///\r
-/// Massively by HTML5 UP\r
+/// Editorial by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
@include vendor('appearance', 'none');\r
@include vendor('transition', (\r
'background-color #{_duration(transition)} ease-in-out',\r
- 'box-shadow #{_duration(transition)} ease-in-out',\r
'color #{_duration(transition)} ease-in-out'\r
));\r
+ background-color: transparent;\r
+ border-radius: _size(border-radius);\r
border: 0;\r
- border-radius: 0;\r
+ box-shadow: inset 0 0 0 2px _palette(accent);\r
+ color: _palette(accent) !important;\r
cursor: pointer;\r
display: inline-block;\r
font-family: _font(family-heading);\r
- font-size: 0.8rem;\r
+ font-size: 0.8em;\r
font-weight: _font(weight-heading);\r
- letter-spacing: 0.075em;\r
- height: 3rem;\r
- line-height: 3rem;\r
- padding: 0 2rem;\r
+ height: 3.5em;\r
+ letter-spacing: _font(kerning-heading);\r
+ line-height: 3.5em;\r
+ padding: 0 2.25em;\r
text-align: center;\r
text-decoration: none;\r
text-transform: uppercase;\r
white-space: nowrap;\r
\r
- &.icon {\r
- &:before {\r
- margin-right: 0.5rem;\r
- }\r
+ &:hover {\r
+ background-color: transparentize(_palette(accent), 0.95);\r
+ }\r
\r
- &.solo {\r
- position: relative;\r
- width: 4rem;\r
- height: 4rem;\r
- line-height: 4rem;\r
- border-radius: 4rem;\r
- text-indent: 4rem;\r
- overflow: hidden;\r
- padding: 0;\r
- white-space: nowrap;\r
+ &:active {\r
+ background-color: transparentize(_palette(accent), 0.85);\r
+ }\r
\r
- &:before {\r
- position: absolute;\r
- display: block;\r
- top: 0;\r
- left: 0;\r
- width: inherit;\r
- height: inherit;\r
- line-height: inherit;\r
- font-size: 1.25rem;\r
- margin-right: 0;\r
- text-align: center;\r
- text-indent: 0;\r
- }\r
+ &.icon {\r
+ &:before {\r
+ margin-right: 0.5em;\r
}\r
}\r
\r
}\r
\r
&.small {\r
- font-size: 0.7rem;\r
- height: 2.5rem;\r
- line-height: 2.5rem;\r
- padding: 0 1.5rem;\r
+ font-size: 0.6em;\r
}\r
\r
&.large {\r
- font-size: 0.9rem;\r
- height: 3.5rem;\r
- line-height: 3.5rem;\r
- padding: 0 2.75rem;\r
+ font-size: 1em;\r
+ height: 3.65em;\r
+ line-height: 3.65em;\r
}\r
\r
- @include breakpoint('<=medium') {\r
- font-size: 0.9rem;\r
- height: 3.25rem;\r
- line-height: 3.25rem;\r
+ &.primary {\r
+ background-color: _palette(accent);\r
+ box-shadow: none;\r
+ color: _palette(bg) !important;\r
+\r
+ &:hover {\r
+ background-color: lighten(_palette(accent), 3);\r
+ }\r
\r
- &.large {\r
- font-size: 1rem;\r
- height: 3.75rem;\r
- line-height: 3.75rem;\r
+ &:active {\r
+ background-color: darken(_palette(accent), 3);\r
}\r
}\r
\r
@include vendor('pointer-events', 'none');\r
opacity: 0.25;\r
}\r
- }\r
-\r
- @mixin color-button($p: null) {\r
- $highlight: _palette($p, highlight);\r
-\r
- input[type="submit"],\r
- input[type="reset"],\r
- input[type="button"],\r
- button,\r
- .button {\r
- background-color: transparent;\r
- box-shadow: inset 0 0 0 2px _palette($p, fg-bold);\r
- color: _palette($p, fg-bold) !important;\r
-\r
- &:hover {\r
- box-shadow: inset 0 0 0 2px _palette($p, accent);\r
- color: _palette($p, accent) !important;\r
- }\r
-\r
- &.primary {\r
- background-color: _palette($p, fg-bold);\r
- box-shadow: none;\r
- color: _palette($p, bg) !important;\r
-\r
- &:hover {\r
- background-color: _palette($p, accent);\r
- }\r
- }\r
- }\r
- }\r
-\r
- @include color-button;
\ No newline at end of file
+ }
\ No newline at end of file
projects / editorial.git / blobdiff