_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); 150background-clip: padding-box; 151background-color: $base; 152 153&, 154list { 155// background-color: transparent; 156} 157 158// Nested rows background 159list.nested > row:not(:active) { 160&:not(:hover):not(:selected), 161&:hover:not(.activatable):not(:selected) { 162// background-color: hdymix($bg_color, $base_color, 0.5); 163} 164 165&:hover.activatable:not(:selected) { 166// background-color: hdymix($fg_color, $base_color, 0.95); 167} 168} 169 170> row { 171// Regular rows and expander header rows background 172&:not(.expander):not(:active):not(:hover):not(:selected), 173&:not(.expander):not(:active):hover:not(.activatable):not(:selected), 174&.expander row.header:not(:active):not(:hover):not(:selected), 175&.expander row.header:not(:active):hover:not(.activatable):not(:selected) { 176// background-color: $base_color; 177} 178 179&:not(.expander):not(:active):hover.activatable:not(:selected), 180&.expander row.header:not(:active):hover.activatable:not(:selected) { 181// background-color: hdymix($fg_color, $base_color, 0.95); 182} 183 184&, 185list > row { 186// border-color: hdyalpha($borders_color, 0.7); 187// border-style: solid; 188// transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 189} 190 191// Top border 192&:not(:first-child) { 193// border-width: 1px 1px 0; 194border-top: 1px solid divider($on-surface); 195} 196 197// Rounded top 198&:first-child, 199&.expander:first-child row.header, 200&.expander:checked, 201&.expander:checked row.header, 202&.expander:checked + row, 203&.expander:checked + row.expander row.header { 204// @include rounded-border(top); 205} 206 207// Bottom border 208&:last-child, 209&.checked-expander-row-previous-sibling, 210&.expander:checked { 211// border-width: 1px; 212} 213 214// Rounded bottom 215&:last-child, 216&.checked-expander-row-previous-sibling, 217&.expander:checked, 218&.expander:not(:checked):last-child row.header, 219&.expander:not(:checked).checked-expander-row-previous-sibling row.header, 220&.expander.empty:checked row.header, 221&.expander list.nested > row:last-child { 222// @include rounded-border(bottom); 223} 224 225// Add space around expanded rows 226&.expander:checked:not(:first-child), 227&.expander:checked + row { 228// margin-top: 6px; 229} 230} 231} 232 233// List button 234 235button.list-button { 236} 237 238// Unified window 239 240window.csd.unified:not(.solid-csd):not(.maximized):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right) { 241// Remove the sheen on headerbar... 242headerbar { 243box-shadow: $shadow-z1; 244 245&.selection-mode { 246// box-shadow: $shadow-z1; 247} 248} 249 250// ...and add it on the window itself 251> decoration-overlay { 252box-shadow: inset 0 1px highlight($titlebar); 253} 254 255&, 256> decoration, 257> decoration-overlay { 258border-radius: $corner-radius; 259} 260} 261