2018-12-05 08:35:18 -06:00
|
|
|
.toggle-button-group {
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.btn {
|
2018-12-07 10:15:46 -06:00
|
|
|
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
|
|
|
|
|
2019-09-12 07:42:28 -05:00
|
|
|
height: $input-height;
|
2018-12-07 10:15:46 -06:00
|
|
|
padding: 7px 10px;
|
|
|
|
font-weight: $font-weight-semi-bold;
|
|
|
|
font-size: $font-size-sm;
|
2018-12-05 09:27:14 -06:00
|
|
|
border-radius: 0;
|
2020-06-05 03:53:57 -05:00
|
|
|
border-right: $button-toggle-group-btn-separator-border;
|
2018-12-07 10:15:46 -06:00
|
|
|
|
2018-12-05 08:35:18 -06:00
|
|
|
&.active {
|
2018-12-07 10:15:46 -06:00
|
|
|
background: $button-toggle-group-btn-active-bg;
|
|
|
|
box-shadow: $button-toggle-group-btn-active-shadow;
|
|
|
|
border-right: 0;
|
2018-12-07 14:13:23 -06:00
|
|
|
color: $white;
|
2018-12-07 10:15:46 -06:00
|
|
|
|
2018-12-05 08:35:18 -06:00
|
|
|
&:hover {
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-05 09:27:14 -06:00
|
|
|
&:first-child {
|
|
|
|
border-radius: $border-radius 0 0 $border-radius;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-radius: 0 $border-radius $border-radius 0;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
2018-12-05 08:35:18 -06:00
|
|
|
}
|
2020-02-11 08:47:52 -06:00
|
|
|
|
|
|
|
&--padded {
|
|
|
|
padding-left: 2px;
|
|
|
|
}
|
2018-12-05 08:35:18 -06:00
|
|
|
}
|