mirror of
https://github.com/nasa/openmct.git
synced 2025-01-29 23:53:56 +00:00
[Fronted] Significant refactoring of mixins for containers and buttons
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
parent
0b8d5ceb86
commit
af0c2e7827
@ -28,8 +28,8 @@ $bodyMargin: 10px;
|
||||
$interiorMargin: 5px;
|
||||
$interiorMarginLg: $interiorMargin * 2;
|
||||
$interiorMarginSm: 3px;
|
||||
$basicCr: 3px;
|
||||
$controlCr: $basicCr;
|
||||
$basicCr: 2px;
|
||||
$controlCr: 2px;
|
||||
$smallCr: 2px;
|
||||
$badgeW: 35px;
|
||||
|
||||
@ -119,7 +119,7 @@ $controlDisabledOpacity: 0.3;
|
||||
$formLabelW: 20%;
|
||||
$formInputH: 22px;
|
||||
$formRowCtrlsH: 14px;
|
||||
$menuLineH: 1.5rem;
|
||||
$menuLineH: 1.4rem;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$btnStdH: 25px;
|
||||
|
||||
@ -42,12 +42,6 @@
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
&:hover {
|
||||
// color: lighten($c, $ltGamma);
|
||||
.invoke-menu {
|
||||
// color: lighten($colorBodyBg, $ltGamma * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,28 +50,21 @@
|
||||
}
|
||||
|
||||
.invoke-menu {
|
||||
@include invokeMenu($colorKey);
|
||||
//@include invokeMenu(); // $colorKey
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
.icon-buttons-main .invoke-menu {
|
||||
@include invokeMenu(lighten($colorBodyBg, $ltGamma));
|
||||
}
|
||||
|
||||
.menu-element .invoke-menu {
|
||||
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.object-header .type-icon {
|
||||
color: $colorKey;
|
||||
margin-right: $interiorMargin;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.menu .type-icon,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -62,12 +62,12 @@ $pad: $interiorMargin * $baseRatio;
|
||||
text-decoration: none;
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
@include btnNoticeable($bg);
|
||||
@include btnSubtle($bg);
|
||||
$fg: lighten($bg, 50%);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
@include btnNoticeable(lighten($bg, 5%));
|
||||
color: $fg;
|
||||
@include btnSubtle(lighten($bg, 5%), $fg);
|
||||
//color: $fg;
|
||||
}
|
||||
.invoke-menu {
|
||||
color: $fg;
|
||||
|
||||
@ -263,7 +263,7 @@ label.checkbox.custom {
|
||||
|
||||
.btn-menu {
|
||||
$h: 20px;
|
||||
$p: $interiorMargin * 2;
|
||||
$p: $interiorMarginSm * 2;
|
||||
$c: $colorBodyFg;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
height: $h;
|
||||
@ -359,7 +359,8 @@ label.checkbox.custom {
|
||||
|
||||
/******************************************************** VIEW-CONTROLS */
|
||||
|
||||
.view-controls .view-type {
|
||||
/*.view-controls .view-type {
|
||||
// UNUSED?
|
||||
$d: 20px;
|
||||
$p: 5px;
|
||||
@include border-radius($controlCr);
|
||||
@ -373,13 +374,17 @@ label.checkbox.custom {
|
||||
&.cur {
|
||||
background: lighten($colorBodyBg, $ltGamma);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.edit-mode .top-bar .control-set.edit-view-controls {
|
||||
// Used in templates/edit-view-controls.html
|
||||
margin-right: $interiorMargin * 10;
|
||||
}
|
||||
|
||||
.frame .t-view-switcher {
|
||||
// Style the view switcher when in a frame
|
||||
}
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.slider {
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
&.selected {
|
||||
$cfg: lighten($colorItemSelected, 35%);
|
||||
$cfgh: lighten($cfg, 30%);
|
||||
@include btnNoticeable($colorItemSelected);
|
||||
@include btnSubtle($colorItemSelected);
|
||||
color: $cfg;
|
||||
.item-type, .top-bar .icon:not(.alert) { color: $cfg }
|
||||
.item-main .item-open { color: $cfg }
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<span ng-controller="ViewSwitcherController">
|
||||
|
||||
<div
|
||||
class="menu-element icon-btn btn btn-menu dropdown click-invoke"
|
||||
class="t-view-switcher menu-element icon-btn btn btn-menu dropdown click-invoke"
|
||||
ng-if="view.length > 1"
|
||||
ng-controller="ClickAwayController as toggle"
|
||||
>
|
||||
@ -37,7 +37,7 @@
|
||||
{{ngModel.selected.glyph}}
|
||||
</span>
|
||||
<span class="name">{{ngModel.selected.name}}</span>
|
||||
<span class='ui-symbol icon invoke-menu'>v</span>
|
||||
<span class='ui-symbol invoke-menu'>v</span>
|
||||
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
|
||||
@ -116,7 +116,7 @@
|
||||
|
||||
<span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
|
||||
<span>{{plot.getMode().name}}</span>
|
||||
<span class='ui-symbol icon invoke-menu'>v</span>
|
||||
<span class='ui-symbol invoke-menu'>v</span>
|
||||
|
||||
<div class="menu dropdown" ng-show="toggle.isActive()">
|
||||
<ul>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
<span class='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
|
||||
<span class='ui-symbol invoke-menu' ng-if="!structure.text">v</span>
|
||||
|
||||
|
||||
<div
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<span class="title-label" ng-if="structure.text">
|
||||
{{structure.text}}
|
||||
</span>
|
||||
<span class='ui-symbol icon invoke-menu'
|
||||
<span class='ui-symbol invoke-menu'
|
||||
ng-if="!structure.text">
|
||||
v
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user