4db48afab0
open #95 Mostly about the overlay and forms; Buttons, menus, selects tweaks continued; Initial check and tweaks in mobile;
35 lines
1012 B
SCSS
35 lines
1012 B
SCSS
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
|
$hovRatio: 5%;
|
|
$bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
|
|
$fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
|
|
|
|
background-color: $bgBase;
|
|
@include border-radius($controlCr);
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
}
|
|
|
|
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
|
|
@include user-select(none);
|
|
@include border-radius($controlCr);
|
|
@include containerSubtle($bg, $fg);
|
|
color: $ic;
|
|
.icon {
|
|
color: $ic;
|
|
}
|
|
@if $bgHov != none {
|
|
&:not(.disabled):hover {
|
|
background-color: $bgHov;
|
|
}
|
|
}
|
|
}
|
|
|
|
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
|
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
|
@return darken($c, $p);
|
|
}
|
|
|
|
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
|
// For dark interfaces, darker things move back - opposite for light interfaces
|
|
@return lighten($c, $p);
|
|
} |