alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Fronted] Significant refactoring of mixins for containers and buttons

Browse Source 
WTD-839
Refactoring in advance of style mods to switcher when in frame;
Cleanup of markup to remove 'icon' class from invoke-menu elements;
This commit is contained in:
Charles Hacskaylo
2015-06-12 10:00:51 -07:00
parent 0b8d5ceb86
commit af0c2e7827
10 changed files with 56 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -131,20 +131,35 @@
}
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%)));
$ltnRatio: 7%;
$gradRatio: 5%;
$hovRatio: 7%;
$bgBase: lighten($bg, $ltnRatio);
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$gradC2: $bgBase;
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
@include background-image(linear-gradient($gradC1, $gradC2));
@include border-radius($controlCr);
@include box-sizing(border-box);
// @include box-shadow(rgba(black, 0.3) 0 1px 2px);
@include boxShdwSubtle();
border: none;
border-top: 1px solid lighten($bg, 20%);
border-top: 1px solid lighten($gradC1, 2%);
color: $fg;
display: inline-block;
@if $hover == true {
&:hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%)));
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
&.btn-menu .invoke-menu {
color: lighten($cInvokeBase, $hovRatio);
}
}
}
&.btn-menu .invoke-menu {
color: $cInvokeBase;
}
}
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -185,18 +200,16 @@
}
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerSubtle($bg, $fg);
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%)));
}
@include containerSubtle($bg, $fg, true);
}
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerSubtle($bg, $fg);
@include background-image(linear-gradient(lighten($bg, 20%), $bg));
&:not(.disabled):hover {
// No longer should be used; use btnSubtle instead
//@include containerSubtle($bg, $fg, true);
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
/* &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
}
}*/
}
@mixin boxIncised($sVal: 0.6) {
@@ -207,8 +220,8 @@
border: 1px solid $c;
}
@mixin boxShdwSubtle($sVal: 0.3) {
@include box-shadow(rgba(black, $sVal) 0 1px 3px);
@mixin boxShdwSubtle($sVal: 0.2) {
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
}
@mixin boxShdwLarge($sVal: 0.7) {
@@ -235,13 +248,15 @@
}
@mixin invokeMenu($baseColor) {
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
@mixin menuUlReset() {
margin: 0;