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(fg-bold);
  24                 color: _palette(fg-bold);
  25                 cursor: pointer;
  26                 display: inline-block;
  27                 font-size: 0.8em;
  28                 font-weight: _font(weight-bold);
  29                 height: 3.5em;
  30                 letter-spacing: _font(letter-spacing-alt);
  31                 line-height: 3.5em;
  32                 padding: 0 1.75em;
  33                 text-align: center;
  34                 text-decoration: none;
  35                 text-transform: uppercase;
  36                 white-space: nowrap;
  37
  38                 &:hover, &:active {
  39                         box-shadow: inset 0 0 0 2px _palette(highlight);
  40                         color: _palette(highlight);
  41                 }
  42
  43                 &:active {
  44                         background-color: transparentize(_palette(highlight), 0.9);
  45                         box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);
  46                         color: desaturate(darken(_palette(highlight), 15), 5);
  47                 }
  48
  49                 &.icon {
  50                         &:before {
  51                                 margin-right: 0.5em;
  52                         }
  53                 }
  54
  55                 &.fit {
  56                         width: 100%;
  57                 }
  58
  59                 &.small {
  60                         font-size: 0.6em;
  61                 }
  62
  63                 &.large {
  64                         font-size: 1.25em;
  65                         height: 3em;
  66                         line-height: 3em;
  67                 }
  68
  69                 &.next {
  70                         padding-right: 4.5em;
  71                         position: relative;
  72
  73                         &:before, &:after {
  74                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
  75                                 background-position: center right;
  76                                 background-repeat: no-repeat;
  77                                 background-size: 36px 24px;
  78                                 content: '';
  79                                 display: block;
  80                                 height: 100%;
  81                                 position: absolute;
  82                                 right: 1.5em;
  83                                 top: 0;
  84                                 vertical-align: middle;
  85                                 width: 36px;
  86                         }
  87
  88                         &:before {
  89                                 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(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>');
  90                         }
  91
  92                         &:after {
  93                                 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(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>');
  94                                 opacity: 0;
  95                                 z-index: 1;
  96                         }
  97
  98                         &:hover, &:active {
  99                                 &:after {
 100                                         opacity: 1;
 101                                 }
 102                         }
 103
 104                         @include breakpoint('<=large') {
 105                                 padding-right: 5em;
 106                         }
 107                 }
 108
 109                 &.primary {
 110                         background-color: _palette(fg-bold);
 111                         box-shadow: none;
 112                         color: _palette(bg);
 113
 114                         &:hover, &:active {
 115                                 background-color: _palette(highlight);
 116                                 color: _palette(bg) !important;
 117                         }
 118
 119                         &:active {
 120                                 background-color: desaturate(darken(_palette(highlight), 15), 5);
 121                         }
 122                 }
 123
 124                 &.disabled,
 125                 &:disabled {
 126                         @include vendor('pointer-events', 'none');
 127                         cursor: default;
 128                         opacity: 0.25;
 129                 }
 130         }