2021-04-08 22:59:05 +08:00
|
|
|
/* Buttons */
|
|
|
|
|
2022-11-11 18:39:37 +08:00
|
|
|
%button {
|
2024-03-31 02:47:02 +08:00
|
|
|
@include button(flat-normal);
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
|
|
&:selected, &:active { @include button(flat-active); }
|
|
|
|
&:checked { @include button(checked); }
|
|
|
|
&:insensitive { @include button(flat-insensitive); }
|
|
|
|
&:focus { @include button(flat-focus); }
|
|
|
|
}
|
|
|
|
|
|
|
|
%flat_button {
|
|
|
|
@include button(flat-normal);
|
|
|
|
&:hover { @include button(flat-hover); }
|
|
|
|
&:selected, &:active { @include button(flat-active); }
|
|
|
|
&:checked { @include button(flat-checked); }
|
|
|
|
&:insensitive { @include button(flat-insensitive); }
|
|
|
|
&:focus { @include button(flat-focus); }
|
|
|
|
}
|
|
|
|
|
|
|
|
%default_button {
|
2024-05-11 07:14:31 +08:00
|
|
|
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
|
|
|
|
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color); }
|
|
|
|
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color); }
|
|
|
|
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color); }
|
|
|
|
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color); }
|
2022-11-11 18:39:37 +08:00
|
|
|
}
|
|
|
|
|
2021-04-08 22:59:05 +08:00
|
|
|
.button {
|
2024-03-31 02:47:02 +08:00
|
|
|
min-height: to_em(22px);
|
2022-10-28 18:34:59 +08:00
|
|
|
padding: $container_padding $container_padding * 2;
|
2021-04-08 22:59:05 +08:00
|
|
|
border-radius: $bt_radius;
|
2022-11-11 18:39:37 +08:00
|
|
|
border: none;
|
|
|
|
@extend %button;
|
2024-03-31 02:47:02 +08:00
|
|
|
|
|
|
|
// default style
|
|
|
|
&.default {
|
|
|
|
@extend %default_button;
|
|
|
|
}
|
|
|
|
|
|
|
|
// flat style
|
|
|
|
&.flat {
|
|
|
|
@extend %flat_button;
|
|
|
|
}
|
2021-04-08 22:59:05 +08:00
|
|
|
}
|
2022-05-05 22:42:15 +08:00
|
|
|
|
2022-10-28 18:34:59 +08:00
|
|
|
.icon-button {
|
2024-03-31 02:47:02 +08:00
|
|
|
min-height: $scalable_icon_size;
|
2024-04-18 11:35:37 +08:00
|
|
|
min-width: $scalable_icon_size;
|
2024-03-31 02:47:02 +08:00
|
|
|
padding: $scaled_padding * 2;
|
2022-10-28 18:34:59 +08:00
|
|
|
border-radius: $circular_radius;
|
2024-04-18 11:35:37 +08:00
|
|
|
border: none;
|
2022-11-11 18:39:37 +08:00
|
|
|
@extend %button;
|
2024-03-31 02:47:02 +08:00
|
|
|
|
|
|
|
StIcon {
|
|
|
|
icon-size: $scalable_icon_size;
|
|
|
|
-st-icon-style: symbolic;
|
|
|
|
}
|
|
|
|
|
|
|
|
// default style
|
|
|
|
&.default {
|
|
|
|
@extend %default_button;
|
|
|
|
}
|
|
|
|
|
|
|
|
// flat style
|
|
|
|
&.flat {
|
|
|
|
@extend %flat_button;
|
|
|
|
}
|
2022-10-28 18:34:59 +08:00
|
|
|
}
|
|
|
|
|
2022-05-05 22:42:15 +08:00
|
|
|
%osd_button {
|
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
|
|
|
box-shadow: none;
|
|
|
|
outline: none;
|
|
|
|
color: rgba(white, 0.75);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: rgba(white, 0.1);
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background-color: rgba(white, 0.25);
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
2023-04-21 16:33:11 +08:00
|
|
|
&:checked {
|
|
|
|
background-color: $primary_color;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
2022-05-05 22:42:15 +08:00
|
|
|
&:insensitive {
|
|
|
|
background-color: transparent;
|
|
|
|
color: rgba(white, 0.35);
|
|
|
|
}
|
|
|
|
}
|