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

   1 /// @Foundation.settings
   2 // Button Group
   3 $btngroup-background: $primary-color !default;
   4 $btngroup-color: #fff !default;
   5 $btngroup-radius: $button-radius !default;
   6 ///
   7
   8 $child-selectors: '> a, > label, > button';
   9
  10 %button-group {
  11   margin: 0;
  12   margin-bottom: 1rem;
  13   list-style-type: none;
  14   display: inline-flex;
  15   border-radius: $btngroup-radius;
  16   overflow: hidden;
  17   font-size: $button-font-size;
  18
  19   > li {
  20     flex: 0 0 auto;
  21
  22     // Links become buttons
  23     #{$child-selectors} {
  24       @extend %button;
  25       border-radius: 0;
  26       font-size: inherit;
  27       display: block;
  28       margin: 0;
  29     }
  30     > input + label {
  31       margin-left: 0;
  32     }
  33     // Add borders between items
  34     &:not(:last-child) {
  35       #{$child-selectors} {
  36         border-right: 1px solid scale-color($btngroup-background, $lightness: -25%);
  37       }
  38     }
  39   }
  40
  41   @if using(iconic) {
  42     .iconic {
  43       width: 1em;
  44       height: 1em;
  45       vertical-align: middle;
  46       margin-right: 0.25em;
  47       margin-top: -2px; // The icons are oddly misaligned
  48     }
  49   }
  50 }
  51
  52 %button-group-segmented {
  53   border: 1px solid $primary-color;
  54   transition-property: background color;
  55
  56   > li {
  57     // Hide the radio button
  58     > input[type="radio"] {
  59       position: absolute;
  60       left: -9999px;
  61     }
  62     // This is the button
  63     #{$child-selectors} {
  64       margin-right: 0;
  65       background: transparent;
  66     }
  67   }
  68 }
  69
  70 @mixin button-group-size($size: medium, $expand: false) {
  71   $size: $button-font-size * map-get($button-sizes, $size);
  72   font-size: $size;
  73
  74   @if $expand {
  75     @include button-group-expand;
  76   }
  77 }
  78 @mixin button-group-expand($stretch: true) {
  79   display: if($stretch, flex, inline-flex);
  80
  81   > li {
  82     flex: if($stretch, 1, 0 0 auto);
  83
  84     #{$child-selectors} {
  85       @if $stretch { @include button-expand; }
  86     }
  87   }
  88 }
  89 @mixin button-group-style(
  90   $segmented: false,
  91   $background: $primary-color,
  92   $color: auto
  93 ) {
  94
  95   @if not($segmented) {
  96     > li {
  97       #{$child-selectors} {
  98         @include button-style($background, auto, $color);
  99         border-color: scale-color($background, $lightness: -15%);
 100       }
 101       &.is-active {
 102         #{$child-selectors} {
 103           background: scale-color($background, $lightness: -15%);
 104         }
 105       }
 106     }
 107   }
 108   @else {
 109     @extend %button-group-segmented;
 110     $hover-color: rgba($background, 0.25);
 111     border-color: $background;
 112
 113     > li {
 114       // This is the button
 115       #{$child-selectors} {
 116         border-color: $background;
 117         color: $background;
 118
 119         // This is the button being hovered on
 120         &:hover {
 121           background: $hover-color;
 122           color: $background;
 123         }
 124
 125         @if using(iconic) {
 126           .iconic { @include color-icon($background); }
 127         }
 128       }
 129
 130       // This is the button when it's active
 131       &.is-active > a,
 132       > input:checked + label {
 133         &, &:hover {
 134           background: $background;
 135           color: isitlight($background);
 136         }
 137
 138         @if using(iconic) {
 139           .iconic { @include color-icon(isitlight($background)); }
 140         }
 141       }
 142     }
 143   }
 144 }
 145
 146 @mixin button-group(
 147   $segmented: false,
 148   $expand: false,
 149   $background: $primary-color,
 150   $color: #fff
 151 ) {
 152   @extend %button-group;
 153   @include button-group-expand($expand);
 154   @include button-group-style($segmented, $background, $color);
 155   border-radius: $btngroup-radius;
 156 }
 157
 158 @include exports(button-group) {
 159   .button-group {
 160     @include button-group;
 161
 162     // Colors
 163     &.secondary { @include button-group-style(false, $secondary-color); }
 164     &.success   { @include button-group-style(false, $success-color); }
 165     &.warning   { @include button-group-style(false, $warning-color); }
 166     &.alert     { @include button-group-style(false, $alert-color); }
 167
 168     // Individual colors
 169     > li {
 170       &.secondary { #{$child-selectors} { @include button-style($secondary-color, auto, $btngroup: true); } }
 171       &.success   { #{$child-selectors} { @include button-style($success-color, auto, $btngroup: true); } }
 172       &.warning   { #{$child-selectors} { @include button-style($warning-color, auto, $btngroup: true); } }
 173       &.alert     { #{$child-selectors} { @include button-style($alert-color, auto, $btngroup: true); } }
 174     }
 175
 176     // Segmented
 177     &.segmented { @include button-group-style(true);
 178       &.secondary { @include button-group-style(true, $secondary-color); }
 179       &.success   { @include button-group-style(true, $success-color); }
 180       &.warning   { @include button-group-style(true, $warning-color); }
 181       &.alert     { @include button-group-style(true, $alert-color); }
 182     }
 183
 184     // Sizing
 185     &.tiny      { @include button-group-size(tiny); }
 186     &.small     { @include button-group-size(small); }
 187     &.large     { @include button-group-size(large); }
 188     &.expand    { @include button-group-expand; }
 189
 190     // Disabled
 191     li.disabled {
 192       #{$child-selectors} {
 193         @include button-disabled;
 194       }
 195     }
 196   }
 197 }