Initial commit

[editorial.git] / assets / main / sass / components / _button.scss

diff --git a/assets/main/sass/components/_button.scss b/assets/main/sass/components/_button.scss
new file mode 100644 (file)
index 0000000..b0b4821
--- /dev/null
+++ b/assets/main/sass/components/_button.scss
@@ -0,0 +1,134 @@
+///\r
+/// Massively 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
+\r
+/* Button */\r
+\r
+       input[type="submit"],\r
+       input[type="reset"],\r
+       input[type="button"],\r
+       button,\r
+       .button {\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
+               border: 0;\r
+               border-radius: 0;\r
+               cursor: pointer;\r
+               display: inline-block;\r
+               font-family: _font(family-heading);\r
+               font-size: 0.8rem;\r
+               font-weight: _font(weight-heading);\r
+               letter-spacing: 0.075em;\r
+               height: 3rem;\r
+               line-height: 3rem;\r
+               padding: 0 2rem;\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
+\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
+\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
+                       }\r
+               }\r
+\r
+               &.fit {\r
+                       width: 100%;\r
+               }\r
+\r
+               &.small {\r
+                       font-size: 0.7rem;\r
+                       height: 2.5rem;\r
+                       line-height: 2.5rem;\r
+                       padding: 0 1.5rem;\r
+               }\r
+\r
+               &.large {\r
+                       font-size: 0.9rem;\r
+                       height: 3.5rem;\r
+                       line-height: 3.5rem;\r
+                       padding: 0 2.75rem;\r
+               }\r
+\r
+               @include breakpoint('<=medium') {\r
+                       font-size: 0.9rem;\r
+                       height: 3.25rem;\r
+                       line-height: 3.25rem;\r
+\r
+                       &.large {\r
+                               font-size: 1rem;\r
+                               height: 3.75rem;\r
+                               line-height: 3.75rem;\r
+                       }\r
+               }\r
+\r
+               &.disabled,\r
+               &:disabled {\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