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