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

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