assets/main/sass/components/_button.scss

   1 ///
   2 /// Editorial 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                         'color #{_duration(transition)} ease-in-out'
  18                 ));
  19                 background-color: transparent;
  20                 border-radius: _size(border-radius);
  21                 border: 0;
  22                 box-shadow: inset 0 0 0 2px _palette(accent);
  23                 color: _palette(accent) !important;
  24                 cursor: pointer;
  25                 display: inline-block;
  26                 font-family: _font(family-heading);
  27                 font-size: 0.8em;
  28                 font-weight: _font(weight-heading);
  29                 height: 3.5em;
  30                 letter-spacing: _font(kerning-heading);
  31                 line-height: 3.5em;
  32                 padding: 0 2.25em;
  33                 text-align: center;
  34                 text-decoration: none;
  35                 text-transform: uppercase;
  36                 white-space: nowrap;
  37
  38                 &:hover {
  39                         background-color: transparentize(_palette(accent), 0.95);
  40                 }
  41
  42                 &:active {
  43                         background-color: transparentize(_palette(accent), 0.85);
  44                 }
  45
  46                 &.icon {
  47                         &:before {
  48                                 margin-right: 0.5em;
  49                         }
  50                 }
  51
  52                 &.fit {
  53                         width: 100%;
  54                 }
  55
  56                 &.small {
  57                         font-size: 0.6em;
  58                 }
  59
  60                 &.large {
  61                         font-size: 1em;
  62                         height: 3.65em;
  63                         line-height: 3.65em;
  64                 }
  65
  66                 &.primary {
  67                         background-color: _palette(accent);
  68                         box-shadow: none;
  69                         color: _palette(bg) !important;
  70
  71                         &:hover {
  72                                 background-color: lighten(_palette(accent), 3);
  73                         }
  74
  75                         &:active {
  76                                 background-color: darken(_palette(accent), 3);
  77                         }
  78                 }
  79
  80                 &.disabled,
  81                 &:disabled {
  82                         @include vendor('pointer-events', 'none');
  83                         opacity: 0.25;
  84                 }
  85         }