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