_libhandy.scss
ASCII text
1/** 2* libhandy 3*/ 4 5// Based on: 6// https://gitlab.gnome.org/GNOME/libhandy/-/tree/master/src/themes 7 8@use "../../../theme"; 9@use "../../../theme-color"; 10@use "../../../shadow"; 11 12// HdyComboRow 13 14popover.combo { 15padding: 8px 0; 16 17list { 18border-style: none; 19background-color: transparent; 20 21> row { 22min-height: 32px; 23padding: 0 12px; 24 25&:not(:last-child) { 26// border-bottom: 1px solid divider($on-surface); 27} 28} 29} 30 31@each $border in top, bottom { 32overshoot.#{$border} { 33// @include rounded-border($border); 34} 35} 36 37scrollbar.vertical { 38// padding-top: 2px; 39// padding-bottom: 2px; 40 41&:dir(ltr) { 42// @include rounded-border(right); 43} 44 45&:dir(rtl) { 46// @include rounded-border(left); 47} 48} 49} 50 51// HdyExpanderRow 52 53row.expander { 54// padding: 0; 55 56image.expander-row-arrow { 57// @include margin-start(6px); 58} 59} 60 61// HdyKeypad 62 63keypad { 64.digit { 65font-size: 200%; 66font-weight: bold; 67} 68 69.letters { 70font-size: 70%; 71} 72 73.symbol { 74font-size: 160%; 75} 76} 77 78// HdyViewSwitcher 79 80viewswitcher { 81button { 82margin: 0; 83padding: 0; 84border-radius: 0; 85// font-size: 1rem; 86 87// View switcher in a header bar 88headerbar & { 89} 90 91// View switcher button 92> stack > box { 93&.narrow { 94// font-size: 0.75rem; 95// padding-top: 7px; 96// padding-bottom: 5px; 97 98image, 99label { 100padding-left: 8px; 101padding-right: 8px; 102} 103} 104 105&.wide { 106padding: 8px 12px; 107 108label { 109&:dir(ltr) { 110padding-right: 8px; 111} 112 113&:dir(rtl) { 114padding-left: 8px; 115} 116} 117} 118 119label.active { 120// font-weight: bold; 121} 122} 123 124&.needs-attention { 125> stack > box label { 126// @extend %needs-attention; 127} 128 129&:checked > stack > box label { 130// animation: none; 131// background-image: none; 132} 133} 134} 135} 136 137// HdyViewSwitcherBar 138 139viewswitcherbar actionbar > revealer > box { 140// padding: 0; 141} 142 143// Content list 144 145list.content { 146border: 1px solid theme-color.divider(theme-color.$on-surface); 147background-clip: padding-box; 148background-color: theme-color.$surface-z1; 149 150&, 151list { 152// background-color: transparent; 153} 154 155// Nested rows background 156list.nested > row:not(:active) { 157&:not(:hover):not(:selected), 158&:hover:not(.activatable):not(:selected) { 159// background-color: hdymix($bg_color, $base_color, 0.5); 160} 161 162&:hover.activatable:not(:selected) { 163// background-color: hdymix($fg_color, $base_color, 0.95); 164} 165} 166 167> row { 168// Regular rows and expander header rows background 169&:not(.expander):not(:active):not(:hover):not(:selected), 170&:not(.expander):not(:active):hover:not(.activatable):not(:selected), 171&.expander row.header:not(:active):not(:hover):not(:selected), 172&.expander row.header:not(:active):hover:not(.activatable):not(:selected) { 173// background-color: $base_color; 174} 175 176&:not(.expander):not(:active):hover.activatable:not(:selected), 177&.expander row.header:not(:active):hover.activatable:not(:selected) { 178// background-color: hdymix($fg_color, $base_color, 0.95); 179} 180 181&, 182list > row { 183// border-color: hdyalpha($borders_color, 0.7); 184// border-style: solid; 185// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 186} 187 188// Top border 189&:not(:first-child) { 190// border-width: 1px 1px 0; 191border-top: 1px solid theme-color.divider(theme-color.$on-surface); 192} 193 194// Rounded top 195&:first-child, 196&.expander:first-child row.header, 197&.expander:checked, 198&.expander:checked row.header, 199&.expander:checked + row, 200&.expander:checked + row.expander row.header { 201// @include rounded-border(top); 202} 203 204// Bottom border 205&:last-child, 206&.checked-expander-row-previous-sibling, 207&.expander:checked { 208// border-width: 1px; 209} 210 211// Rounded bottom 212&:last-child, 213&.checked-expander-row-previous-sibling, 214&.expander:checked, 215&.expander:not(:checked):last-child row.header, 216&.expander:not(:checked).checked-expander-row-previous-sibling row.header, 217&.expander.empty:checked row.header, 218&.expander list.nested > row:last-child { 219// @include rounded-border(bottom); 220} 221 222// Add space around expanded rows 223&.expander:checked:not(:first-child), 224&.expander:checked + row { 225// margin-top: 6px; 226} 227} 228} 229 230// List button 231 232button.list-button { 233} 234 235// Unified window 236 237window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) { 238// Remove the sheen on headerbar... 239headerbar { 240box-shadow: shadow.$z1; 241 242&.selection-mode { 243// box-shadow: $shadow-z1; 244} 245} 246 247// ...and add it on the window itself 248> decoration-overlay { 249box-shadow: inset 0 1px theme-color.highlight(theme-color.$titlebar); 250} 251 252&, 253> decoration, 254> decoration-overlay { 255border-radius: theme.$corner-radius; 256} 257} 258