assets/main/sass/components/_button.scss

   1 ///
   2 /// Massively 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                 border: 0;
  21                 border-radius: 0;
  22                 cursor: pointer;
  23                 display: inline-block;
  24                 font-family: _font(family-heading);
  25                 font-size: 0.8rem;
  26                 font-weight: _font(weight-heading);
  27                 letter-spacing: 0.075em;
  28                 height: 3rem;
  29                 line-height: 3rem;
  30                 padding: 0 2rem;
  31                 text-align: center;
  32                 text-decoration: none;
  33                 text-transform: uppercase;
  34                 white-space: nowrap;
  35
  36                 &.icon {
  37                         &:before {
  38                                 margin-right: 0.5rem;
  39                         }
  40
  41                         &.solo {
  42                                 position: relative;
  43                                 width: 4rem;
  44                                 height: 4rem;
  45                                 line-height: 4rem;
  46                                 border-radius: 4rem;
  47                                 text-indent: 4rem;
  48                                 overflow: hidden;
  49                                 padding: 0;
  50                                 white-space: nowrap;
  51
  52                                 &:before {
  53                                         position: absolute;
  54                                         display: block;
  55                                         top: 0;
  56                                         left: 0;
  57                                         width: inherit;
  58                                         height: inherit;
  59                                         line-height: inherit;
  60                                         font-size: 1.25rem;
  61                                         margin-right: 0;
  62                                         text-align: center;
  63                                         text-indent: 0;
  64                                 }
  65                         }
  66                 }
  67
  68                 &.fit {
  69                         width: 100%;
  70                 }
  71
  72                 &.small {
  73                         font-size: 0.7rem;
  74                         height: 2.5rem;
  75                         line-height: 2.5rem;
  76                         padding: 0 1.5rem;
  77                 }
  78
  79                 &.large {
  80                         font-size: 0.9rem;
  81                         height: 3.5rem;
  82                         line-height: 3.5rem;
  83                         padding: 0 2.75rem;
  84                 }
  85
  86                 @include breakpoint('<=medium') {
  87                         font-size: 0.9rem;
  88                         height: 3.25rem;
  89                         line-height: 3.25rem;
  90
  91                         &.large {
  92                                 font-size: 1rem;
  93                                 height: 3.75rem;
  94                                 line-height: 3.75rem;
  95                         }
  96                 }
  97
  98                 &.disabled,
  99                 &:disabled {
 100                         @include vendor('pointer-events', 'none');
 101                         opacity: 0.25;
 102                 }
 103         }
 104
 105         @mixin color-button($p: null) {
 106                 $highlight: _palette($p, highlight);
 107
 108                 input[type="submit"],
 109                 input[type="reset"],
 110                 input[type="button"],
 111                 button,
 112                 .button {
 113                         background-color: transparent;
 114                         box-shadow: inset 0 0 0 2px _palette($p, fg-bold);
 115                         color: _palette($p, fg-bold) !important;
 116
 117                         &:hover {
 118                                 box-shadow: inset 0 0 0 2px _palette($p, accent);
 119                                 color: _palette($p, accent) !important;
 120                         }
 121
 122                         &.primary {
 123                                 background-color: _palette($p, fg-bold);
 124                                 box-shadow: none;
 125                                 color: _palette($p, bg) !important;
 126
 127                                 &:hover {
 128                                         background-color: _palette($p, accent);
 129                                 }
 130                         }
 131                 }
 132         }
 133
 134         @include color-button;