// // Drawing mixins // // generic drawing of more complex things // provide font size in rem, with px fallback $ref_size: 13.33; @mixin fontscaling($size: $ref_size) { font-size: round( $size * 72 / 96 * 100 ) / 100 + pt; } // // shadows // $z-depth-1: 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.12); $z-depth-2: 0 3px 4px rgba(0, 0, 0, 0.32), 0 3px 2px rgba(0, 0, 0, 0.24); $z-depth-3: 0 9px 12px rgba(0, 0, 0, 0.40), 0 5px 5px rgba(0, 0, 0, 0.32), 0 3px 3px rgba(0, 0, 0, 0.26); $z-depth-4: 0 12px 16px rgba(0, 0, 0, 0.54), 0 8px 8px rgba(0, 0, 0, 0.44), 0 4px 4px rgba(0, 0, 0, 0.32); $z-depth-5: 0 16px 20px rgba(0, 0, 0, 0.72), 0 12px 12px rgba(0, 0, 0, 0.52), 0 5px 5px rgba(0, 0, 0, 0.40); // // entries // @mixin entry($t, $fc:$selected_bg_color) { // // Entries drawing function // // $t: entry type // $fc: focus color // // possible $t values: // normal, focus, insensitive // @if $t==normal { background-color: rgba(0, 0, 0, 0.01); border-color: transparent; box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color); } @if $t==focus { border-color: transparent; box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color); } @if $t==hover { border-color: transparent; box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $fill_color); } @if $t==insensitive { color: $insensitive_fg_color; border-color: transparent; box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_fill_color); } } // // buttons // @mixin button($t, $c:$bg_color, $tc:$fg_color) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // // possible $t values: // normal, hover, active, insensitive, undecorated, // flat-normal, flat-hover, flat-active, flat-insensitive, // undecorated // @if $t==normal { // // normal button // border-color: transparent; border-top: 1px solid $borders_highlight; color: if($tc!=$fg_color, $tc, $secondary_fg_color); background-color: $c; box-shadow: $z-depth-1; text-shadow: none; icon-shadow: none; } @if $t==focus { // // focused button // color: $fg_color; background-color: $c; text-shadow: none; icon-shadow: none; box-shadow: 0 0 transparent; } @else if $t==hover { // // hovered button // border-color: transparent; border-top: 1px solid $borders_highlight; color: if($tc!=$fg_color, $tc, $fg_color); background-color: $c; box-shadow: $z-depth-2; text-shadow: none; icon-shadow: none; } @else if $t==active { // // pushed button // border-color: transparent; border-top: 1px solid $borders_highlight; color: if($tc!=$fg_color, $tc, $selected_fg_color); background-color: $c; box-shadow: $z-depth-2; text-shadow: none; icon-shadow: none; } @else if $t==insensitive { // // insensitive button // color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color); background-color: if($c!=$bg_color, $c, $insensitive_fill_color); border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } @if $t==flat-normal { // // normal flat button // color: if($tc!=$fg_color, $tc, $secondary_fg_color); background-color: transparent; border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } @if $t==flat-focus { // // focused flat button // color: $fg_color; text-shadow: none; icon-shadow: none; box-shadow: 0 0 transparent; // box-shadow: inset 0px 0px 0px 2px $fill_color; } @else if $t==flat-hover { // // hovered flat button // color: if($tc!=$fg_color, $tc, $fg_color); background-color: if($c!=$bg_color, $fill_color, $semi_fill_color); border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } @else if $t==flat-active { // // pushed flat button // color: if($tc!=$fg_color, $tc, $selected_fg_color); background-color: if($c!=$bg_color, $tc, $fill_color); border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } @else if $t==flat-insensitive { // // insensitive flat button // color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color); background-color: transparent; border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } @else if $t==undecorated { // // reset // color: inherit; background-color: transparent; border-color: transparent; box-shadow: 0 0 transparent; text-shadow: none; icon-shadow: none; } }