_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 { 77&, 78button { 79// margin: 0; 80// padding: 0; 81} 82 83button { 84// border-radius: 0; 85// border-top: 0; 86// border-bottom: 0; 87// box-shadow: none; 88// font-size: 1rem; 89 90// View switcher in a header bar 91headerbar &:not(:checked) { 92} 93 94// View switcher button 95> stack > box { 96&.narrow { 97// font-size: 0.75rem; 98// padding-top: 7px; 99// padding-bottom: 5px; 100 101image, 102label { 103// padding-left: 8px; 104// padding-right: 8px; 105} 106} 107 108&.wide { 109// padding: 8px 12px; 110 111label { 112&:dir(ltr) { 113// padding-right: 7px; 114} 115 116&:dir(rtl) { 117// padding-left: 7px; 118} 119} 120} 121 122label.active { 123// font-weight: bold; 124} 125} 126 127&.needs-attention { 128> stack > box label { 129// @extend %needs-attention; 130} 131 132&:checked > stack > box label { 133// animation: none; 134// background-image: none; 135} 136} 137} 138} 139 140// HdyViewSwitcherBar 141 142viewswitcherbar actionbar > revealer > box { 143// padding: 0; 144} 145 146// Content list 147 148list.content { 149border: 1px solid divider($on-surface); 150 151&, 152list { 153// background-color: transparent; 154} 155 156// Nested rows background 157list.nested > row:not(:active) { 158&:not(:hover):not(:selected), 159&:hover:not(.activatable):not(:selected) { 160// background-color: hdymix($bg_color, $base_color, 0.5); 161} 162 163&:hover.activatable:not(:selected) { 164// background-color: hdymix($fg_color, $base_color, 0.95); 165} 166} 167 168> row { 169// Regular rows and expander header rows background 170&:not(.expander):not(:active):not(:hover):not(:selected), 171&:not(.expander):not(:active):hover:not(.activatable):not(:selected), 172&.expander row.header:not(:active):not(:hover):not(:selected), 173&.expander row.header:not(:active):hover:not(.activatable):not(:selected) { 174// background-color: $base_color; 175} 176 177&:not(.expander):not(:active):hover.activatable:not(:selected), 178&.expander row.header:not(:active):hover.activatable:not(:selected) { 179// background-color: hdymix($fg_color, $base_color, 0.95); 180} 181 182&, 183list > row { 184// border-color: hdyalpha($borders_color, 0.7); 185// border-style: solid; 186// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 187} 188 189// Top border 190&:not(:last-child) { 191// border-width: 1px 1px 0; 192border-top: 1px solid divider($on-surface); 193} 194 195// Rounded top 196&:first-child, 197&.expander:first-child row.header, 198&.expander:checked, 199&.expander:checked row.header, 200&.expander:checked + row, 201&.expander:checked + row.expander row.header { 202// @include rounded-border(top); 203} 204 205// Bottom border 206&:last-child, 207&.checked-expander-row-previous-sibling, 208&.expander:checked { 209// border-width: 1px; 210} 211 212// Rounded bottom 213&:last-child, 214&.checked-expander-row-previous-sibling, 215&.expander:checked, 216&.expander:not(:checked):last-child row.header, 217&.expander:not(:checked).checked-expander-row-previous-sibling row.header, 218&.expander.empty:checked row.header, 219&.expander list.nested > row:last-child { 220// @include rounded-border(bottom); 221} 222 223// Add space around expanded rows 224&.expander:checked:not(:first-child), 225&.expander:checked + row { 226// margin-top: 6px; 227} 228} 229} 230 231// List button 232 233button.list-button { 234} 235 236// Unified window 237 238window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) { 239// Remove the sheen on headerbar... 240headerbar { 241box-shadow: $shadow-z1; 242 243&.selection-mode { 244// box-shadow: $shadow-z1; 245} 246} 247 248// ...and add it on the window itself 249> decoration-overlay { 250box-shadow: inset 0 1px highlight($titlebar); 251} 252 253&, 254> decoration, 255> decoration-overlay { 256border-radius: $corner-radius; 257} 258} 259