assets/sass/components/_button.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Button */
   8
   9         input[type="submit"],
  10         input[type="reset"],
  11         input[type="button"],
  12         button,
  13         .button {
  14                 @include vendor('appearance', 'none');
  15                 @include vendor('transition', (
  16                         'background-color #{_duration(transition)} ease-in-out',
  17                         'box-shadow #{_duration(transition)} ease-in-out',
  18                         'color #{_duration(transition)} ease-in-out'
  19                 ));
  20                 background-color: transparent;
  21                 border: 0;
  22                 border-radius: 0;
  23                 box-shadow: inset 0 0 0 2px _palette_light(fg-bold);
  24                 color: _palette_light(fg-bold);
  25                 @media screen and (prefers-color-scheme: dark) {
  26                         box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);
  27                         color: _palette_dark(fg-bold);
  28                 }
  29                 cursor: pointer;
  30                 display: inline-block;
  31                 font-size: 0.8em;
  32                 font-weight: _font(weight-bold);
  33                 height: 3.5em;
  34                 letter-spacing: _font(letter-spacing-alt);
  35                 line-height: 3.5em;
  36                 padding: 0 1.75em;
  37                 text-align: center;
  38                 text-decoration: none;
  39                 text-transform: uppercase;
  40                 white-space: nowrap;
  41
  42                 &:hover, &:active {
  43                         box-shadow: inset 0 0 0 2px _palette_light(highlight);
  44                         color: _palette_light(highlight);
  45                         @media screen and (prefers-color-scheme: dark) {
  46                                 box-shadow: inset 0 0 0 2px _palette_dark(highlight);
  47                                 color: _palette_dark(highlight);
  48                         }
  49                 }
  50
  51                 &:active {
  52                         background-color: transparentize(_palette_light(highlight), 0.9);
  53                         box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);
  54                         color: desaturate(darken(_palette_light(highlight), 15), 5);
  55                         @media screen and (prefers-color-scheme: dark) {
  56                                 background-color: transparentize(_palette_dark(highlight), 0.9);
  57                                 box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);
  58                                 color: desaturate(darken(_palette_dark(highlight), 15), 5);
  59                         }
  60                 }
  61
  62                 &.icon {
  63                         &:before {
  64                                 margin-right: 0.5em;
  65                         }
  66                 }
  67
  68                 &.fit {
  69                         width: 100%;
  70                 }
  71
  72                 &.small {
  73                         font-size: 0.6em;
  74                 }
  75
  76                 &.large {
  77                         font-size: 1.25em;
  78                         height: 3em;
  79                         line-height: 3em;
  80                 }
  81
  82                 &.next {
  83                         padding-right: 4.5em;
  84                         position: relative;
  85
  86                         &:before, &:after {
  87                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
  88                                 background-position: center right;
  89                                 background-repeat: no-repeat;
  90                                 background-size: 36px 24px;
  91                                 content: '';
  92                                 display: block;
  93                                 height: 100%;
  94                                 position: absolute;
  95                                 right: 1.5em;
  96                                 top: 0;
  97                                 vertical-align: middle;
  98                                 width: 36px;
  99                         }
 100
 101                         &:before {
 102                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
 103                                 @media screen and (prefers-color-scheme: dark) {
 104                                         background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
 105                                 }
 106                         }
 107
 108                         &:after {
 109                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
 110                                 @media screen and (prefers-color-scheme: dark) {
 111                                         background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');
 112                                 }
 113                                 opacity: 0;
 114                                 z-index: 1;
 115                         }
 116
 117                         &:hover, &:active {
 118                                 &:after {
 119                                         opacity: 1;
 120                                 }
 121                         }
 122
 123                         @include breakpoint('<=large') {
 124                                 padding-right: 5em;
 125                         }
 126                 }
 127
 128                 &.primary {
 129                         background-color: _palette_light(fg-bold);
 130                         box-shadow: none;
 131                         color: _palette_light(bg);
 132                         @media screen and (prefers-color-scheme: dark) {
 133                                 background-color: _palette_dark(fg-bold);
 134                                 color: _palette_dark(bg);
 135                         }
 136
 137                         &:hover, &:active {
 138                                 background-color: _palette_light(highlight);
 139                                 color: _palette_light(bg) !important;
 140                                 @media screen and (prefers-color-scheme: dark) {
 141                                         background-color: _palette_dark(highlight);
 142                                         color: _palette_dark(bg) !important;
 143                                 }
 144                         }
 145
 146                         &:active {
 147                                 background-color: desaturate(darken(_palette_light(highlight), 15), 5);
 148                                 @media screen and (prefers-color-scheme: dark) {
 149                                         background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
 150                                 }
 151                         }
 152                 }
 153
 154                 &.disabled,
 155                 &:disabled {
 156                         @include vendor('pointer-events', 'none');
 157                         cursor: default;
 158                         opacity: 0.25;
 159                 }
 160         }