.quick-settings { padding: 4 * $base_padding; } .quick-settings-grid { spacing-rows: 3 * $base_padding; spacing-columns: 2 * $base_padding; } .quick-toggle { border-radius: 99px; min-width: 11.5em; max-width: 11.5em; min-height: 48px; &:checked { @include button(default); } & > StBoxLayout { spacing: $base_padding; } /* Move padding into the box; this is to allow menu arrows to extend to the border */ &.button { padding: 0; } & > StBoxLayout { padding: 0 2 * $base_padding; } .quick-toggle-label { font-weight: bold; } .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } } .quick-menu-toggle { &:ltr > StBoxLayout { padding-right: 0; } &:rtl > StBoxLayout { padding-left: 0; } & .quick-toggle-arrow { background-color: transparentize($fg_color, 0.9); padding: 8px; &:ltr { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 99px 0 0 99px; } } } .quick-slider { padding: $base_padding; .slider-bin { &:focus {@include button(focus);} min-height: 16px; // slider size padding: $base_padding; border-radius: 99px; } .quick-toggle-icon { icon-size: $base_icon_size; } .icon-button { background-color: transparent; } } .quick-toggle-menu { @include card(); padding: 1.5 * $base_padding; & .header { spacing-rows: 0.5 * $base_padding; spacing-columns: $base_padding; padding-bottom: 2 * $base_padding; & .icon { icon-size: $large_icon_size; border-radius: 999px; padding: 1.5 * $base_padding; background-color: lighten($bg_color, 10%); &.active { background-color: $selected_bg_color; } } & .title { @extend %title_3; } & .subtitle { @extend %caption_heading; } } } .quick-toggle-menu-container { padding: 2 * $base_padding $base_padding 0; } .quick-settings-system-item { & > StBoxLayout { spacing: 2 * $base_padding; } & .power-item { min-height: 0; min-width: 0; &:insensitive { @include button(normal); background-color: transparent; } } }