_drawing.scss
ASCII text
1// Drawing mixins 2 3// generic drawing of more complex things 4 5 6// shadows 7 8// based shadow values: 9// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png 10 11// box-shadow 1px blur doesn't draw correctly, see 12// https://bugzilla.gnome.org/show_bug.cgi?id=738484 13// $z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); 14$z-depth-1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 15$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23); 16$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23); 17$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22); 18$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22); 19 20 21// ripple effect animations 22 23@keyframes ripple_effect { 24from { 25background-image: radial-gradient(circle farthest-corner at center, 26gtkalpha(currentColor, $lower_opacity / 2) 0%, 27transparent 0%), 28image(gtkalpha(currentColor, 0)); 29} 30 31to { 32background-image: radial-gradient(circle farthest-corner at center, 33gtkalpha(currentColor, $lower_opacity / 2) 100%, 34transparent 0%), 35image(gtkalpha(currentColor, $lower_opacity / 2)); 36} 37} 38 39@keyframes flat_ripple_effect { 40from { 41background-image: radial-gradient(circle farthest-corner at center, 42gtkalpha(currentColor, $lower_opacity / 2) 0%, 43transparent 0%), 44image(gtkalpha(currentColor, $lower_opacity / 2)); 45} 46 47to { 48background-image: radial-gradient(circle farthest-corner at center, 49gtkalpha(currentColor, $lower_opacity / 2) 100%, 50transparent 0%), 51image(gtkalpha(currentColor, $lower_opacity / 2)); 52} 53} 54 55@keyframes row_ripple_effect { 56from { 57background-image: radial-gradient(circle farthest-corner at center, 58gtkalpha(currentColor, $lower_opacity / 2) 0%, 59transparent 0%), 60image(gtkalpha(currentColor, 0)); 61} 62 63to { 64background-image: radial-gradient(circle farthest-corner at center, 65gtkalpha(currentColor, $lower_opacity / 2) 100%, 66transparent 0%), 67image(gtkalpha(currentColor, 0)); 68} 69} 70 71@keyframes tab_ripple_effect { 72from { 73background-image: radial-gradient(circle farthest-corner at center, 74scale-alpha($primary_color, $middle_opacity) 0%, 75transparent 0%); 76} 77 7850% { 79background-image: radial-gradient(circle farthest-corner at center, 80scale-alpha($primary_color, $middle_opacity) 100%, 81transparent 0%); 82} 83 84to { 85background-image: radial-gradient(circle farthest-corner at center, 86transparent 100%, 87transparent 0%); 88} 89} 90 91@keyframes header_ripple_effect { 92from { 93background-image: radial-gradient(circle farthest-corner at center, 94$primary_color 0%, 95transparent 0%); 96} 97 98to { 99background-image: radial-gradient(circle farthest-corner at center, 100$primary_color 100%, 101transparent 0%); 102} 103} 104 105 106@mixin entry($t, $fc:$primary_color) { 107// 108// Entries drawing function 109// 110// $t: entry type 111// $fc: focus color 112// 113// possible $t values: 114// normal, focus, disabled, flat-normal, flat-focus, flat-disabled; 115// 116 117@if $t == normal { 118transition: $longer_transition, $shadow_transition; 119border-image: none; 120box-shadow: $z-depth-1; 121background-color: if($fc != $primary_color, $fc, $base_color); 122color: if($fc != $primary_color, $inversed_fg_color, $fg_color); 123} 124 125@if $t == focus { 126border-image: none; 127box-shadow: $z-depth-2; 128} 129 130@if $t == disabled { 131box-shadow: $z-depth-1; 132background-color: $alt_base_color; 133color: $disabled_fg_color; 134} 135 136@if $t == flat-normal { 137transition: $longer_transition; 138border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), 139$fc 0%, 140transparent 0%) 1410 0 0 / 0 0 0px; 142box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color); 143background-color: transparent; 144color: $fg_color; 145} 146 147@if $t == flat-focus { 148border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), 149$fc 100%, 150transparent 0%) 1510 0 2 / 0 0 2px; 152box-shadow: inset 0 -1px if($fc != $primary_color, $fc, $track_color); 153} 154 155@if $t == flat-disabled { 156box-shadow: inset 0 -1px $track_color; 157background-color: transparent; 158color: $disabled_fg_color; 159} 160} 161 162 163@mixin button($t, $c:$lighter_bg_color, $tc:$fg_color) { 164// 165// Button drawing function 166// 167// $t: button type, 168// $c: base button color for colored* types 169// $tc: optional text color for colored* types 170// 171// possible $t values: 172// normal, hover, active, disabled, checked, checked-disabled, 173// flat-normal, flat-hover, flat-active, flat-disabled, flat-checked, flat-checked-disabled; 174// 175 176@if $t == normal { 177transition: $longer_transition, $shadow_transition; 178box-shadow: $z-depth-1; 179background-color: $c; 180background-image: radial-gradient(circle farthest-corner at center, 181gtkalpha(currentColor, 0) 100%, 182transparent 0%), 183image(gtkalpha(currentColor, 0)); 184color: $secondary_fg_color; 185} 186 187@if $t == hover { 188box-shadow: $z-depth-2; 189background-image: radial-gradient(circle farthest-corner at center, 190gtkalpha(currentColor, 0) 100%, 191transparent 0%), 192image(gtkalpha(currentColor, 0)); 193color: $fg_color; 194} 195 196@if $t == active { 197transition: $longer_transition, $shadow_transition, background-image 0; 198animation: ripple_effect $longer_duration $deceleration_curve forwards; 199box-shadow: $z-depth-2; 200color: $fg_color; 201} 202 203@if $t == disabled { 204box-shadow: none; 205background-color: $track_color; 206color: if($tc != $fg_color, $disabled_fg_color, $disabled_secondary_fg_color); 207 208> label { color: inherit; } 209} 210 211@if $t == checked { 212background-color: $primary_color; 213color: $inversed_fg_color; 214} 215 216@if $t == checked-disabled { 217background-color: $track_color; 218color: scale-alpha($primary_color, $disabled_opacity); 219 220> label { color: inherit; } 221} 222 223@if $t == flat-normal { 224transition: $longer_transition; 225box-shadow: none; 226background-color: transparent; 227background-image: radial-gradient(circle farthest-corner at center, 228gtkalpha(currentColor, 0) 100%, 229transparent 0%), 230image(gtkalpha(currentColor, 0)); 231color: gtkalpha(currentColor, $enabled_opacity); 232} 233 234@if $t == flat-hover { 235box-shadow: none; 236background-image: radial-gradient(circle farthest-corner at center, 237gtkalpha(currentColor, 0) 100%, 238transparent 0%), 239image(gtkalpha(currentColor, $lower_opacity / 2)); 240color: currentColor; 241} 242 243@if $t == flat-active { 244transition: $longer_transition, background-image 0; 245animation: flat_ripple_effect $longer_duration $deceleration_curve forwards; 246box-shadow: none; 247color: currentColor; 248} 249 250@if $t == flat-disabled { 251box-shadow: none; 252background-color: transparent; 253color: if($tc != $fg_color, gtkalpha(currentColor, $disabled_opacity), gtkalpha(currentColor, $enabled_opacity * $disabled_opacity)); 254 255> label { color: inherit; } 256} 257 258@if $t == flat-checked { 259background-color: $track_color; 260color: currentColor; 261} 262 263@if $t == flat-checked-disabled { 264background-color: $track_color; 265color: gtkalpha(currentColor, $disabled_opacity); 266 267> label { color: inherit; } 268} 269} 270 271 272@mixin overshoot($p, $t:normal, $c:$alt_primary_color) { 273// 274// overshoot 275// 276// $p: position 277// $t: type 278// $c: base color 279// 280// possible $p values: 281// top, bottom, right, left 282// 283// possible $t values: 284// normal, backdrop 285// 286 287$_position: center $p; 288 289@if ($p == left) or ($p == right) { 290$_position: $p center; 291} 292 293background-image: -gtk-gradient(radial, 294$_position, 0, 295$_position, 0.75, 296to(scale-alpha($c, $lower_opacity)), 297to(transparent)); 298 299background-repeat: no-repeat; 300background-position: $_position; 301 302background-color: transparent; // reset some properties to be sure to not inherit them somehow 303border: none; // 304box-shadow: none; // 305} 306 307 308@mixin undershoot($p) { 309// 310// undershoot 311// 312// $p: position 313// 314// possible $p values: 315// top, bottom, right, left 316// 317 318$_undershoot_color_dark: scale-alpha($fg_color, $lower_opacity); 319$_undershoot_color_light: scale-alpha($base_color, $lower_opacity); 320 321$_gradient_dir: left; 322$_dash_bg_size: 12px 1px; 323$_gradient_repeat: repeat-x; 324$_bg_pos: left $p; 325 326background-color: transparent; // shouldn't be needed, but better to be sure; 327 328@if ($p == left) or ($p == right) { 329$_gradient_dir: top; 330$_dash_bg_size: 1px 12px; 331$_gradient_repeat: repeat-y; 332$_bg_pos: $p top; 333} 334 335background-image: linear-gradient(to $_gradient_dir, // this is the dashed line 336$_undershoot_color_light 50%, 337$_undershoot_color_dark 50%); 338 339padding-#{$p}: 1px; 340background-size: $_dash_bg_size; 341background-repeat: $_gradient_repeat; 342background-origin: content-box; 343background-position: $_bg_pos; 344} 345