_drawing.scss
ASCII text
1// Drawing mixins 2 3// generic drawing of more complex things 4 5$root-font-size: if($laptop == 'true', 13px, 14px); 6$subheading-size: if($laptop == 'true', 15px, 16px); 7 8// provide font size in pt, with px fallback 9@mixin pt($size: $root-font-size) { 10font-size: ($size * 0.75 / 1px) * 1pt; 11} 12 13// provide icon size in em, with px fallback 14@mixin em($size: 16px) { 15icon-size: ($size / $root-font-size) * 1em; 16} 17 18// Typography 19 20// Reference URL: 21// https://material.google.com/style/typography.html#typography-styles 22 23@mixin font($size) { 24@if $size==display-4 { 25// font-family: $large-font-family; 26font-size: 112px; 27font-weight: 300; 28// line-height: 1; 29} 30@if $size==display-3 { 31// font-family: $large-font-family; 32font-size: 56px; 33font-weight: 400; 34// line-height: 1; 35} 36@if $size==display-2 { 37// font-family: $large-font-family; 38font-size: 45px; 39font-weight: 400; 40// line-height: 48px; 41} 42@if $size==display-1 { 43// font-family: $large-font-family; 44font-size: 34px; 45font-weight: 400; 46// line-height: 40px; 47} 48@if $size==headline { 49@include pt(24px); 50font-weight: 400; 51// line-height: 32px; 52} 53@if $size==title { 54@include pt(20px); 55font-weight: 500; 56// line-height: 1; 57} 58@if $size==subheading { 59@include pt($subheading-size); 60font-weight: 400; 61// line-height: 24px; 62} 63@if $size==body-2 { 64@include pt($root-font-size); 65font-weight: 500; 66// line-height: 24px; 67} 68@if $size==body-1 { 69@include pt($root-font-size); 70font-weight: 400; 71// line-height: 20px; 72} 73@if $size==caption { 74@include pt(12px); 75font-weight: 400; 76// line-height: 1; 77} 78@if $size==button { 79@include pt($root-font-size); 80font-weight: 500; 81// line-height: 20px; 82} 83} 84 85// shadows 86 87// Reference URL: 88// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png 89 90$z-depth-0: 0 0 transparent; 91$z-depth-1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24); 92$z-depth-2: 0 3px 3px rgba(0, 0, 0, 0.16 * 1.5), 0 3px 3px rgba(0, 0, 0, 0.23 * 1.5); 93$z-depth-3: 0 10px 10px rgba(0, 0, 0, 0.19 * 1.5), 0 6px 3px rgba(0, 0, 0, 0.23 * 1.5); 94$z-depth-4: 0 14px 14px rgba(0, 0, 0, 0.25 * 2), 0 10px 5px rgba(0, 0, 0, 0.22 * 2); 95$z-depth-5: 0 19px 19px rgba(0, 0, 0, 0.30 * 2), 0 15px 6px rgba(0, 0, 0, 0.22 * 2); 96 97// entries 98 99@mixin entry($t, $fc:$selected_bg_color) { 100// 101// Entries drawing function 102// 103// $t: entry type 104// $fc: focus color 105// 106// possible $t values: 107// normal, focus, insensitive 108// 109@if $t==normal { 110background-color: if($fc!=$selected_bg_color, rgba($bg_color, 0.01), rgba($base_color, 0.01)); 111border-color: transparent; 112box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $track_color); 113 114} 115@if $t==focus { 116border-color: transparent; 117box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color); 118} 119@if $t==hover { } 120@if $t==insensitive { 121color: $insensitive_fg_color; 122border-color: transparent; 123box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_track_color); 124} 125} 126 127// buttons 128 129@mixin button($t, $c:$base_color, $tc:$fg_color) { 130// 131// Button drawing function 132// 133// $t: button type, 134// $c: base button color for colored* types 135// $tc: optional text color for colored* types 136// 137// possible $t values: 138// normal, focus, hover, active, insensitive, 139// flat-normal, flat-focus, flat-hover, flat-active, flat-insensitive 140// 141@if $t==normal { 142// 143// normal button 144// 145color: if($tc!=$fg_color, $tc, $secondary_fg_color); 146background-color: $c; 147border-color: transparent; 148box-shadow: $z-depth-1; 149text-shadow: none; 150icon-shadow: none; 151} 152@if $t==focus { 153// 154// focused button 155// 156color: $tc; 157text-shadow: none; 158icon-shadow: none; 159box-shadow: 0 0 transparent; 160// box-shadow: inset 0px 0px 0px 2px $track_color; 161} 162 163@else if $t==hover { 164// 165// hovered button 166// 167color: if($tc!=$fg_color, $tc, $fg_color); 168background-color: $c; 169border-color: transparent; 170box-shadow: $z-depth-2; 171text-shadow: none; 172icon-shadow: none; 173 174} 175@else if $t==active { 176// 177// pushed button 178// 179color: if($tc!=$fg_color, $tc, $fg_color); 180background-color: mix($tc, $c, percentage($lower_opacity)); 181border-color: transparent; 182box-shadow: $z-depth-2; 183text-shadow: none; 184icon-shadow: none; 185} 186@else if $t==insensitive { 187// 188// insensitive button 189// 190color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color); 191background-color: if($c!=$base_color, $c, $insensitive_track_color); 192border-color: transparent; 193box-shadow: 0 0 transparent; 194text-shadow: none; 195icon-shadow: none; 196} 197@if $t==flat-normal { 198// 199// normal flat button 200// 201color: if($tc!=$fg_color, $tc, $secondary_fg_color); 202background-color: transparent; 203border-color: transparent; 204box-shadow: 0 0 transparent; 205text-shadow: none; 206icon-shadow: none; 207} 208@if $t==flat-focus { 209// 210// focused flat button 211// 212color: $tc; 213text-shadow: none; 214icon-shadow: none; 215box-shadow: 0 0 transparent; 216// box-shadow: inset 0px 0px 0px 2px $track_color; 217} 218 219@else if $t==flat-hover { 220// 221// hovered flat button 222// 223color: if($tc!=$fg_color, $tc, $fg_color); 224background-color: if($c!=$base_color, $c, $semi_track_color); 225border-color: transparent; 226box-shadow: 0 0 transparent; 227text-shadow: none; 228icon-shadow: none; 229 230} 231@else if $t==flat-active { 232// 233// pushed flat button 234// 235color: if($tc!=$fg_color, $tc, $fg_color); 236background-color: if($c!=$base_color, $c, $track_color); 237border-color: transparent; 238box-shadow: 0 0 transparent; 239text-shadow: none; 240icon-shadow: none; 241} 242@else if $t==flat-insensitive { 243// 244// insensitive flat button 245// 246color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color); 247background-color: transparent; 248border-color: transparent; 249box-shadow: 0 0 transparent; 250text-shadow: none; 251icon-shadow: none; 252} 253} 254 255