afb-client/bower_components/foundation-apps/scss/components/_button.scss

   1 /// @Foundation.settings
   2 // Button
   3 $button-padding: 0.85em 1em !default;
   4 $button-margin: 0 $global-padding $global-padding 0 !default;
   5 $button-style: solid !default;
   6 $button-background: $primary-color !default;
   7 $button-background-hover: scale-color($button-background, $lightness: -15%) !default;
   8 $button-color: auto !default;
   9 $button-radius: 0 !default;
  10 $button-sizes: (
  11   tiny: 0.7,
  12   small: 0.8,
  13   medium: 1,
  14   large: 1.3,
  15 ) !default;
  16 $button-font-size: 0.9rem !default;
  17 $button-opacity-disabled: 0.5 !default;
  18 $button-tag-selector: false !default;
  19 ///
  20
  21 %button {
  22   display: inline-block;
  23   border: 0;
  24   text-align: center;
  25   line-height: 1;
  26   cursor: pointer;
  27   -webkit-appearance: none;
  28   -webkit-font-smoothing: antialiased;
  29   transition: background 0.25s ease-out;
  30   vertical-align: middle;
  31
  32   padding: $button-padding;
  33   margin: $button-margin;
  34   font-size: $button-font-size;
  35   border-radius: $button-radius;
  36
  37   // Dropdown arrow
  38   // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic
  39   // &[data-popup-toggle] {
  40   //   position: relative;
  41   //   padding-right: 2em; // Placeholder
  42
  43   //   &::after {
  44   //     @include css-triangle(6px, black, top);
  45   //     position: absolute;
  46   //     right: 0.7em;
  47   //     top: 50%;
  48   //     margin-top: -3px;
  49   //   }
  50   // }
  51 }
  52
  53 @mixin button-size($size: medium, $expand: false) {
  54   $size: $button-font-size * map-get($button-sizes, $size);
  55   font-size: $size;
  56
  57   @if $expand {
  58     @include button-expand;
  59   }
  60
  61   @if using(iconic) {
  62     .iconic {
  63       width: 1em;
  64       height: 1em;
  65       vertical-align: middle;
  66       margin-right: 0.25em;
  67       margin-top: -2px; // The icons are oddly misaligned
  68     }
  69   }
  70 }
  71
  72 @mixin button-expand($expand: true) {
  73   @if $expand {
  74     display: block;
  75     width: 100%;
  76     margin-left: 0;
  77     margin-right: 0;
  78   }
  79   @else {
  80     display: inline-block;
  81     width: auto;
  82     margin: $button-margin;
  83   }
  84 }
  85
  86 @mixin button-style(
  87   $background: $button-background,
  88   $background-hover: $button-background-hover,
  89   $color: $button-color,
  90   $style: $button-style,
  91   $radius: $button-radius,
  92   $btngroup: false
  93 ){
  94   @if $style == hollow {
  95     border: 1px solid $background;
  96     background: transparent;
  97     color: $background;
  98
  99     &:hover, &:focus {
 100       border-color: scale-color($background, $lightness: 25%);
 101       background: transparent;
 102       color: scale-color($background, $lightness: 25%);
 103     }
 104   }
 105   // Solid is the default
 106   @else {
 107     @if $color == auto {
 108       $color: isitlight($background);
 109     }
 110
 111     background: $background;
 112     color: $color;
 113
 114     &:hover, &:focus {
 115       @if $background-hover == auto {
 116         background: scale-color($background, $lightness: -15%);
 117       }
 118       @else {
 119         background: $background-hover;
 120       }
 121       color: $color;
 122     }
 123   }
 124
 125   @if $btngroup {
 126     border-color: $background;
 127     &:hover, &:focus {
 128       border-color: scale-color($background, $lightness: -25%);
 129     }
 130   }
 131
 132   @if using(iconic) {
 133     @if $style == hollow {
 134       .iconic {
 135         @include color-icon($background);
 136       }
 137       &:hover .iconic {
 138         @include color-icon(scale-color($background, $lightness: 25%));
 139       }
 140     }
 141     @else {
 142       .iconic {
 143         @include color-icon($color);
 144       }
 145     }
 146   }
 147 }
 148
 149 @mixin button-disabled() {
 150   opacity: $button-opacity-disabled;
 151   cursor: default;
 152   pointer-events: none;
 153 }
 154
 155 @mixin button(
 156   $size: medium,
 157   $expand: false,
 158   $background: $button-background,
 159   $background-hover: $button-background-hover,
 160   $color: $button-color,
 161   $style: $button-style,
 162   $radius: $button-radius
 163 ) {
 164   @extend %button;
 165   @include button-size($size);
 166   @include button-expand($expand);
 167   @include button-style($background, $background-hover, $color, $style);
 168 }
 169
 170 @include exports(button) {
 171   .button {
 172     @include button;
 173
 174     &.tiny   { @include button-size(tiny); }
 175     &.small  { @include button-size(small); }
 176     &.large  { @include button-size(large); }
 177     &.expand { @include button-expand; }
 178
 179     &.secondary { @include button-style($secondary-color, auto) }
 180     &.success   { @include button-style($success-color, auto) }
 181     &.warning   { @include button-style($warning-color, auto) }
 182     &.alert     { @include button-style($alert-color, auto) }
 183     &.info      { @include button-style($info-color, auto) }
 184     &.dark      { @include button-style($dark-color, auto) }
 185
 186     @if $button-style != hollow {
 187       &.hollow { @include button-style($style: hollow);
 188         &.secondary { @include button-style($secondary-color, $style: hollow); }
 189         &.success   { @include button-style($success-color, $style: hollow); }
 190         &.warning   { @include button-style($warning-color, $style: hollow); }
 191         &.alert     { @include button-style($alert-color, $style: hollow); }
 192         &.info      { @include button-style($info-color, $style: hollow); }
 193         &.dark      { @include button-style($dark-color, $style: hollow); }
 194       }
 195     }
 196
 197     &.disabled { @include button-disabled; }
 198   }
 199
 200   @if $button-tag-selector {
 201     button {
 202       @extend .button;
 203     }
 204   }
 205 }