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

[Frontend] IN-PROGRESS Theming continues

Browse Source 
open #95
Shadow and color normalization: fixed-position, tabular;
Updated paint bucket and icon-box in symbols font;
Custom checkboxes now use inset shdw;
This commit is contained in:
Charles Hacskaylo
2015-09-10 15:01:51 -07:00
parent 3b2454c6a9
commit d14c4e08b8
20 changed files with 547 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -59,94 +59,103 @@ $pad: $interiorMargin * $baseRatio;
/*********************************** STYLE STYLES */
.s-btn {
@include box-sizing(border-box);
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
font-size: 0.7rem;
@include box-sizing(border-box);
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
padding: 0 $pad;
font-size: 0.7rem;
.icon {
font-size: 0.8rem;
color: $colorKey;
}
.icon {
font-size: 0.8rem;
color: $colorKey;
}
.title-label {
vertical-align: top;
}
.title-label {
vertical-align: top;
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&.major {
$bg: $colorBtnMajorBg;
$hc: lighten($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
}
&.major {
$bg: $colorBtnMajorBg;
$hc: lighten($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
}
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
}
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
}
&.pause-play {
&.paused {
@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon:before {
content: "\0000EF";
}
}
}
&.pause-play {
/*
&.paused {
.icon {
@include pulse(500ms);
}
}
*/
.icon:before {
content: "\0000F1";
}
}
//&.paused {
// @include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
// .icon {
// @include pulse(500ms);
// &:before {
// content: "\0000EF";
// }
// }
//}
&.show-thumbs {
.icon:before {
content: "\000039";
}
}
&.pause-play {
.icon:before {
content: "\0000F1";
}
&.paused {
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon {
@include pulse(1000ms);
:before {
content: "\0000EF";
}
}
}
}
&.show-thumbs {
.icon:before {
content: "\000039";
}
}
}
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn
//@include test(red);
font-size: 0; // Remove space between s-btn elements due to white space in markup
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn
//@include test(red);
font-size: 0; // Remove space between s-btn elements due to white space in markup
.s-btn {
@include border-radius(0);
margin-left: 1px;
}
.s-btn {
@include border-radius(0);
margin-left: 1px;
}
.first {
.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.first {
.s-btn {
@include border-left-radius($controlCr);
margin-left: 0;
}
}
.last {
.s-btn {
@include border-right-radius($controlCr);
}
}
.last {
.s-btn {
@include border-right-radius($controlCr);
}
}
}
/*********************************** LAYOUT STYLES */
/*

12
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -138,7 +138,7 @@
}
label.checkbox.custom {
$bg: lighten($colorBodyBg, $ltGamma);
$bg: pullForward($colorBodyBg, 10%);
$d: $formRowCtrlsH;
cursor: pointer;
display: inline-block;
@@ -154,8 +154,9 @@ label.checkbox.custom {
min-width: $d;
&:before {
@include border-radius($basicCr * .75);
background: $bg;
border-bottom: 1px solid lighten($bg, 10%);
//background: $bg;
//border-bottom: 1px solid lighten($bg, 10%);
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
box-sizing: border-box;
content: " ";
font-family: 'symbolsfont';
@@ -344,7 +345,10 @@ label.checkbox.custom {
@include desktop {
::-webkit-scrollbar {
@include sliderTrack();
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}

7
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@@ -158,9 +158,8 @@
.super-menu {
$w: 500px;
$h: $w - 20;
$plw: 50%; //$w * 0.5;
$prw: 50%; //$w - $plw;
//$fg: #fff; //lighten($colorBodyFg, 40%);
$plw: 50%;
$prw: 50%;
display: block;
width: $w;
height: $h;
@@ -171,7 +170,7 @@
@include box-sizing(border-box);
&.left {
//@include test();
border-right: 1px solid rgba(white, 0.2);
border-right: 1px solid pullForward($colorMenuBg, 10%);
left: 0;
padding-right: $interiorMargin;
right: auto;