_button.scss (11167B)
1 /********* 2 ! Buttons 3 **********/ 4 5 @include exports("button_extends") { 6 %button { 7 padding: $spacing ($spacing + 2px); 8 border-width: 1px; 9 border-style: solid; 10 border-radius: $roundness; 11 transition: 150ms ease; 12 outline-color: transparent; 13 14 -GtkWidget-focus-padding: 1; 15 -GtkWidget-focus-line-width: 0; 16 17 &:focus, &:hover, &:active { transition: none; } 18 } 19 20 %linked_middle { 21 border-radius: 0; 22 border-left-style: none; 23 border-right-style: solid; 24 25 &:dir(rtl) { 26 border-radius: 0; // needed when including %linked_middle:dir(rtl) 27 border-right-style: none; 28 border-left-style: solid; 29 } 30 } 31 32 %linked_button { 33 border-width: 1px; 34 border-style: solid; 35 border-radius: 0; 36 border-right-style: none; 37 border-left-style: none; 38 39 &:first-child { 40 border-width: 1px; 41 border-radius: $roundness; 42 border-left-style: solid; 43 border-right-style: none; 44 border-top-right-radius: 0; 45 border-bottom-right-radius: 0; 46 47 &:dir(rtl) { 48 border-left-style: none; 49 border-right-style: solid; 50 } 51 } 52 53 &:last-child { 54 border-width: 1px; 55 border-radius: $roundness; 56 border-left-style: none; 57 border-right-style: solid; 58 border-top-left-radius: 0; 59 border-bottom-left-radius: 0; 60 61 &:dir(rtl) { 62 border-left-style: solid; 63 border-right-style: none; 64 } 65 } 66 67 &:only-child, &:first-child:only-child { 68 border-width: 1px; 69 border-style: solid; 70 border-radius: $roundness; 71 } 72 } 73 } 74 75 @mixin linked_button($bg) { 76 $border_strength: if(lightness($bg) > 50, 0, .1); 77 $shadow_strength: if(lightness($bg) > 50, 0, .1); 78 79 @extend %linked_button; 80 81 box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)), 82 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); 83 84 &:focus, &:hover { 85 box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)), 86 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); 87 } 88 89 &:active, &:active:hover, 90 &:active:focus, &:active:hover:focus, 91 &:checked, &:checked:hover, 92 &:checked:focus, &:checked:hover:focus { 93 box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)), 94 inset 0 1px alpha($dark_shadow, .07), 95 inset 0 -1px alpha($dark_shadow, .05); 96 } 97 98 &:insensitive { box-shadow: inset -1px 0 shade($bg, .8); } 99 100 &:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); } 101 102 &:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); } 103 104 &:insensitive:last-child, &:insensitive:only-child, 105 &:active:insensitive:last-child, &:active:insensitive:only-child, 106 &:checked:insensitive:last-child, &:checked:insensitive:only-child { box-shadow: none; } 107 108 &:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus, 109 &:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus, { 110 box-shadow: inset 0 1px alpha($dark_shadow, .07), 111 inset -1px 0 alpha($dark_shadow, .06); 112 } 113 114 &:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus, 115 &:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus { 116 box-shadow: inset 1px 0 alpha($dark_shadow, .06), 117 inset 0 1px alpha($dark_shadow, .07), 118 inset -1px 0 alpha($dark_shadow, .06); 119 } 120 } 121 122 @mixin button($bg, $fg) { 123 $border_strength: if(lightness($bg) > 50, 0, .1); 124 $shadow_strength: if(lightness($bg) > 50, 0, .1); 125 126 $button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg); 127 128 @extend %button; 129 @include linear-gradient($button_bg); 130 @include border(rgba(0, 0, 0, .12 + $border_strength)); 131 132 color: $fg; 133 box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); 134 135 &.flat { 136 border-color: alpha($button_bg, 0); 137 background-color: alpha($button_bg, 0); 138 background-image: none; 139 box-shadow: none; 140 } 141 142 &, &.flat { 143 &:focus, &:hover { 144 @include linear-gradient(shade($button_bg, 1.2)); 145 @include border(rgba(0, 0, 0, .2 + $border_strength)); 146 147 box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); 148 } 149 150 &:active, &:checked { 151 @include linear-gradient(shade($button_bg, .7), to top); 152 153 color: $white; 154 box-shadow: inset 1px 0 alpha($dark_shadow, .06), 155 inset 0 1px alpha($dark_shadow, .07), 156 inset -1px 0 alpha($dark_shadow, .06), 157 inset 0 -1px alpha($dark_shadow, .05); 158 159 &:focus, &:hover { 160 @include linear-gradient(shade($button_bg, .65), to top); 161 162 color: $white; 163 } 164 } 165 166 &:focus, &:hover { color: $fg; } 167 168 &:active:insensitive, &:checked:insensitive { 169 @include linear-gradient(shade($button_bg, .9)); 170 171 color: $fg; 172 box-shadow: none; 173 } 174 175 &:insensitive:insensitive { 176 @if (lightness($button_bg) > 50) { 177 @include linear-gradient(shade($button_bg, .95)); 178 } @else { 179 @include linear-gradient(alpha($button_bg, .3)); 180 } 181 182 color: mix($bg, $fg, .5); 183 box-shadow: none; 184 } 185 } 186 187 &.separator, .separator { 188 border: 1px solid currentColor; 189 color: shade($bg, ($contrast + .1)); 190 191 &:insensitive { color: shade($button_bg, .85); } 192 } 193 } 194 195 @include exports("button") { 196 * { 197 -GtkButton-child-displacement-x: 0; 198 -GtkButton-child-displacement-y: 0; 199 -GtkButton-default-border: 0; 200 -GtkButton-image-spacing: 0; 201 -GtkButton-inner-border: 1; 202 -GtkButton-interior-focus: true; 203 -GtkButtonBox-child-min-height: 24; 204 -GtkButtonBox-child-internal-pad-y: 1; 205 -GtkToolButton-icon-spacing: 6; 206 } 207 208 %close_button { 209 border: 1px solid transparent; 210 background-color: transparent; 211 background-image: none; 212 box-shadow: none; 213 214 &:focus, &:hover { 215 border: 1px solid alpha($black, .3); 216 background-color: alpha($white, .2); 217 background-image: none; 218 box-shadow: none; 219 } 220 221 &:active, &:checked, &:active:hover, &:checked:hover { 222 border: 1px solid alpha($black, .3); 223 background-color: alpha($black, .1); 224 background-image: none; 225 box-shadow: none; 226 } 227 } 228 229 .button { 230 @include button(shade($bg_color, 1.2), $fg_color); 231 232 &.default { @include button($selected_bg_color, $selected_fg_color); } 233 234 &.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); } 235 236 .spinbutton & { 237 color: mix($text_color, $base_color, .4); 238 padding: $spacing ($spacing * 2); 239 border: 0; 240 border-radius: 0; 241 border-style: none; 242 background-color: transparent; 243 background-image: none; 244 box-shadow: inset 1px 0 shade($base_color, .9); 245 246 &:insensitive { 247 color: mix($text_color, $base_color, .7); 248 box-shadow: inset 1px 0 shade($base_color, .85); 249 } 250 251 &:active, &:checked, &:hover { color: $text_color; } 252 253 &:first-child { 254 border-radius: $roundness 0 0 $roundness; 255 box-shadow: none; 256 } 257 258 &:last-child { border-radius: 0 $roundness $roundness 0; } 259 260 &:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); } 261 } 262 263 .spinbutton.vertical & { 264 border: 1px solid shade($bg_color, .8); 265 border-radius: $roundness; 266 background-color: shade($bg_color, 1.08); 267 background-image: none; 268 color: $fg_color; 269 box-shadow: none; 270 271 &:hover { 272 border-color: shade($bg_color, .7); 273 background-color: shade($bg_color, 1.1); 274 background-image: none; 275 } 276 277 &:active, &:checked { 278 border-color: shade($bg_color, .8); 279 background-color: shade($bg_color, .95); 280 background-image: none; 281 } 282 283 &:active:hover, &:checked:hover { 284 border-color: shade($bg_color, .7); 285 } 286 287 &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); } 288 289 &:insensitive { 290 border-color: shade($bg_color, .85); 291 background-color: shade($bg_color, .9); 292 background-image: none; 293 } 294 295 &:first-child { 296 border-width: 1px; 297 border-bottom-width: 0; 298 border-bottom-right-radius: 0; 299 border-bottom-left-radius: 0; 300 } 301 302 &:last-child { 303 border-width: 1px; 304 border-top-width: 0; 305 border-top-left-radius: 0; 306 border-top-right-radius: 0; 307 } 308 } 309 310 .spinbutton.vertical.entry { 311 border-width: 1px; 312 border-style: solid; 313 border-radius: 0; 314 } 315 } 316 } 317 318 319 /****************** 320 ! ComboBoxes * 321 *******************/ 322 323 @include exports("combobox") { 324 GtkComboBox { 325 > .button { 326 padding: ($spacing - 2px) ($spacing + 1px); 327 328 -GtkComboBox-arrow-scaling: .5; 329 -GtkComboBox-shadow-type: none; 330 } 331 332 &.combobox-entry { 333 .entry, .button { @extend %linked_button; } 334 } 335 336 .separator { 337 /* always disable separators */ 338 -GtkWidget-wide-separators: true; 339 -GtkWidget-horizontal-separator: 0; 340 -GtkWidget-vertical-separator: 0; 341 342 border-style: none; 343 } 344 } 345 346 .linked > GtkComboBox { 347 > .button { 348 // the combo is a composite widget so the way we do button linked doesn't 349 // work, special case needed. See 350 // https://bugzilla.gnome.org/show_bug.cgi?id=733979 351 &:dir(ltr) { @extend %linked_middle; } // specificity bump 352 &:dir(rtl) { @extend %linked_middle:dir(rtl); } 353 } 354 355 &:first-child > .button { @extend %linked_button:first-child; } 356 357 &:last-child > .button { @extend %linked_button:last-child; } 358 359 &:only-child > .button { @extend %linked_button:only-child; } 360 } 361 }