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

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