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