98 lines
2.1 KiB
SCSS
Raw Normal View History

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);
}
}