1 /// @Foundation.settings
\r
3 $btngroup-background: $primary-color !default;
\r
4 $btngroup-color: #fff !default;
\r
5 $btngroup-radius: $button-radius !default;
\r
8 $child-selectors: '> a, > label, > button';
\r
12 margin-bottom: 1rem;
\r
13 list-style-type: none;
\r
14 display: inline-flex;
\r
15 border-radius: $btngroup-radius;
\r
17 font-size: $button-font-size;
\r
22 // Links become buttons
\r
23 #{$child-selectors} {
\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
45 vertical-align: middle;
\r
46 margin-right: 0.25em;
\r
47 margin-top: -2px; // The icons are oddly misaligned
\r
52 %button-group-segmented {
\r
53 border: 1px solid $primary-color;
\r
54 transition-property: background color;
\r
57 // Hide the radio button
\r
58 > input[type="radio"] {
\r
62 // This is the button
\r
63 #{$child-selectors} {
\r
65 background: transparent;
\r
70 @mixin button-group-size($size: medium, $expand: false) {
\r
71 $size: $button-font-size * map-get($button-sizes, $size);
\r
75 @include button-group-expand;
\r
78 @mixin button-group-expand($stretch: true) {
\r
79 display: if($stretch, flex, inline-flex);
\r
82 flex: if($stretch, 1, 0 0 auto);
\r
84 #{$child-selectors} {
\r
85 @if $stretch { @include button-expand; }
\r
89 @mixin button-group-style(
\r
91 $background: $primary-color,
\r
95 @if not($segmented) {
\r
97 #{$child-selectors} {
\r
98 @include button-style($background, auto, $color);
\r
99 border-color: scale-color($background, $lightness: -15%);
\r
102 #{$child-selectors} {
\r
103 background: scale-color($background, $lightness: -15%);
\r
109 @extend %button-group-segmented;
\r
110 $hover-color: rgba($background, 0.25);
\r
111 border-color: $background;
\r
114 // This is the button
\r
115 #{$child-selectors} {
\r
116 border-color: $background;
\r
117 color: $background;
\r
119 // This is the button being hovered on
\r
121 background: $hover-color;
\r
122 color: $background;
\r
125 @if using(iconic) {
\r
126 .iconic { @include color-icon($background); }
\r
130 // This is the button when it's active
\r
132 > input:checked + label {
\r
134 background: $background;
\r
135 color: isitlight($background);
\r
138 @if using(iconic) {
\r
139 .iconic { @include color-icon(isitlight($background)); }
\r
146 @mixin button-group(
\r
149 $background: $primary-color,
\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
158 @include exports(button-group) {
\r
160 @include button-group;
\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
168 // Individual colors
\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
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
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
192 #{$child-selectors} {
\r
193 @include button-disabled;
\r