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

[Frontend] IN-PROGRESS Theme changes continuing

Browse Source 
open #95
Mostly about the overlay and forms;
Buttons, menus, selects tweaks continued;
Initial check and tweaks in mobile;
This commit is contained in:
Charles Hacskaylo
2015-09-09 15:55:12 -07:00
parent 86deec6364
commit 4db48afab0
21 changed files with 1295 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -97,7 +97,6 @@ $formTBPad: $interiorMargin;
$formLRPad: $interiorMargin;
$menuLineH: 1.5rem;
$menuLineHPx: 24px;
$scrollbarTrackSize: 10px;
$btnStdH: 25px;
$btnToolbarH: $btnStdH;

2
platform/commonUI/general/res/sass/_main.scss
View File

@@ -44,8 +44,6 @@
/********************************* FORMS */
@import "forms/elems";
@import "forms/textarea";
@import "forms/text-input";
@import "forms/selects";
@import "forms/channel-selector";
@import "forms/datetime";

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

@@ -146,13 +146,13 @@
}
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
$b: 1px solid lighten($bg, 30%);
//$b: 1px solid lighten($bg, 30%);
@include border-radius(2px);
@include box-sizing(border-box);
@include boxIncised(0.7);
background-color: $bg;
border-bottom: $b;
border-right: $b;
//border-bottom: $b;
//border-right: $b;
}
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
@@ -184,8 +184,8 @@
}
}
@mixin boxIncised($sVal: 0.6) {
@include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
@mixin boxIncised($sVal: 0.6, $inset: 5px) {
@include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
}
@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
@@ -257,6 +257,30 @@
}
/*********************************************** FORM ELEMENTS */
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@include box-sizing(border-box);
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
background: $bg;
border: none;
color: $fg;
outline: none;
&.error {
background: rgba(red, 0.5);
}
}
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
/*
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include appearance(none);
@include border-radius($controlCr);
@@ -275,6 +299,8 @@
@include input-base($bg, $fg);
padding: 0 $interiorMarginSm;
}
*/
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include input-base($bg, $fg);

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

@@ -80,22 +80,24 @@ $pad: $interiorMargin * $baseRatio;
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
&:not(.major) {
@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
&.major {
$bg: $colorBtnMajorBg;
$hc: lighten($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
}
&.major {
$bg: $colorKey;
$fg: lighten($bg, 70%);
@include btnSubtle($bg, $fg, $fg);
&:not(.major) {
// bg, bgHov, fg, ic
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
}
&.paused {
@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
.icon:before {
content: "\0000EF";
}

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

@@ -349,18 +349,20 @@ label.checkbox.custom {
}
::-webkit-scrollbar-thumb {
$bg: lighten($colorBodyBg, 10%);
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
@include border-radius(1px);
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
@include border-radius(2px);
@include box-sizing(border-box);
@include boxShdwSubtle();
border-top: 1px solid lighten($bg, 20%);
//@include boxShdwSubtle();
//border-top: 1px solid lighten($bg, 20%);
&:hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
}
}
::-webkit-scrollbar-corner {
background: rgba(#000, 0.4);
background: $scrollbarTrackColorBg;
}
}

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

@@ -66,15 +66,18 @@
/******************************************************** MENUS THEMSELVES */
.menu-element {
$bg: lighten($colorBodyBg, 5%);
$bgHover: lighten($bg, 20%);
$bg: $colorMenuBg;
$fg: $colorMenuFg;
$ic: $colorMenuIc;
$bgHover: $colorMenuHov;
$iconColor: $colorKey;
cursor: pointer;
position: relative;
.menu {
@include border-radius($basicCr);
@include containerSubtle($bg);
@include txtShdwSubtle(0.2);
@include containerSubtle($bg, $fg);
@include boxShdw($shdwMenu);
@include txtShdw($shdwMenuText);
display: block; // set to block via jQuery
padding: $interiorMarginSm 0;
position: absolute;
@@ -84,7 +87,7 @@
li {
@include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%);
color: lighten($bg, 60%);
color: pullForward($bg, 60%);
line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
position: relative;
@@ -95,17 +98,10 @@
&:hover {
background: $bgHover;
color: $colorKeyFg;
//a {
// color: $colorKeyFg;
//}
.icon {
color: lighten($iconColor, 20%);
}
}
//a {
// color: lighten($bg, 60%);
// display: block;
//}
.type-icon {
left: $interiorMargin * 2;
}
@@ -115,12 +111,7 @@
.context-menu,
.super-menu {
$bg: $colorMenuBg;
$fg: $colorMenuFg;
$ic: $colorMenuIc;
//font-size: 0.80rem;
pointer-events: auto;
@include containerSubtle($bg);
ul li {
padding-left: 25px;
a {
@@ -170,8 +161,7 @@
$h: $w - 20;
$plw: 50%; //$w * 0.5;
$prw: 50%; //$w - $plw;
$fg: #fff; //lighten($colorBodyFg, 40%);
$bgHover: $colorKey; //$bg;
//$fg: #fff; //lighten($colorBodyFg, 40%);
display: block;
width: $w;
height: $h;
@@ -203,15 +193,13 @@
right: 0;
padding: $interiorMargin * 5;
width: $prw;
.icon {
color: $fg;
}
}
}
.menu-item-description {
.desc-area {
&.icon {
$h: 150px;
color: $colorCreateMenuLgIcon;
position: relative;
font-size: 8em;
left: 0;
@@ -221,13 +209,13 @@
text-align: center;
}
&.title {
color: $fg;
color: $colorCreateMenuText;
font-size: 1.2em;
margin-bottom: 0.5em;
}
&.description {
//color: lighten($bg, 30%);
color: $fg;
color: $colorCreateMenuText;
font-size: 0.8em;
line-height: 1.5em;
}

39
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -21,7 +21,7 @@
*****************************************************************************/
.section-header {
@include border-radius($basicCr);
background: rgba(#fff, 0.1);
background: $colorFormSectionHeader;
$c: lighten($colorBodyFg, 20%);
//border-bottom: 1px solid rgba(#fff, 0.3);
color: $c;
@@ -32,6 +32,7 @@
.form {
// @include test(orange);
color: $colorFormText;
.form-section {
position: relative;
margin-bottom: $interiorMarginLg * 2;
@@ -69,7 +70,7 @@
}
.value {
color: lighten($colorBodyFg, 20%);
color: $colorInputFg; //lighten($colorBodyFg, 20%);
}
.controls {
@@ -111,18 +112,18 @@
.selector-list {
// Used in create overlay to display tree view
@include nice-input($colorInputBg, $colorInputFg);
$h: 150px;
@include border-radius($basicCr);
@include box-sizing(border-box);
background: rgba(black, 0.2);
padding: $interiorMargin;
//@include border-radius($basicCr);
//@include box-sizing(border-box);
//background: rgba(black, 0.2);
//padding: $interiorMargin;
position: relative;
height: $h;
overflow: auto;
// max-width: 50%;
.wrapper {
>.wrapper {
$p: $interiorMargin;
overflow-y: auto;
overflow: auto;
position: absolute;
top: $p;
right: $p;
@@ -159,4 +160,24 @@ label.form-control.checkbox {
color: lighten($colorFormInvalid, 30%);
padding: $interiorMargin;
}
}
input[type="text"] {
@include nice-input($colorInputBg, $colorInputFg);
&.filter {
&.ng-dirty {
// background: red;
}
}
&.numeric {
text-align: right;
}
}
textarea {
@include nice-textarea($colorInputBg, $colorInputFg);
// font-size: 0.9em;
position: absolute;
height: 100%;
width: 100%;
}

25
platform/commonUI/general/res/sass/forms/_selects.scss
View File

@@ -19,10 +19,11 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.form-control.select {
@include btnSubtle($colorBodyBg);
cursor: pointer;
display: inline-block;
.select {
@include btnSubtle();
@extend .s-menu;
//cursor: pointer;
//display: inline-block;
margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
overflow: hidden;
position: relative;
@@ -30,21 +31,21 @@
@include appearance(none);
@include box-sizing(border-box);
background: none;
color: $colorBodyFg;
color: $colorBtnFg;
border: none !important;
cursor: pointer;
padding: 4px 25px 2px 5px;
//cursor: pointer;
padding: 4px 25px 2px 0px;
width: 120%;
option {
margin: $interiorMargin 0; // Firefox
}
}
&:after {
color: $colorKey;
content:"v";
display: block;
font-family: 'symbolsfont';
pointer-events: none;
//color: $colorKey;
//content:"v";
//display: block;
//font-family: 'symbolsfont';
//pointer-events: none;
position: absolute;
right: $interiorMargin; top: 0;
}

32
platform/commonUI/general/res/sass/forms/_text-input.scss
View File

@@ -1,32 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
input[type="text"] {
@include nice-input();
&.filter {
&.ng-dirty {
// background: red;
}
}
&.numeric {
text-align: right;
}
}

28
platform/commonUI/general/res/sass/forms/_textarea.scss
View File

@@ -1,28 +0,0 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.edit-main textarea {
@include nice-textarea();
// font-size: 0.9em;
position: absolute;
height: 100%;
width: 100%;
}

3
platform/commonUI/general/res/sass/mobile/_constants.scss
View File

@@ -20,9 +20,6 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/************************** STYLE */
$colorMobilePaneLeft: #222;
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
$mobileListIconSize: 30px;
$mobileTitleDescH: 35px;

20
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@@ -31,7 +31,7 @@
}
>.holder {
$i: 15%;
@include containerSubtle();
@include containerSubtle($colorOvrBg, $colorOvrFg);
@include border-radius($basicCr * 3);
color: $colorOvrFg;
top: $i; right: $i; bottom: $i; left: $i;
@@ -64,19 +64,21 @@
height: $ovrFooterH;
text-align: right;
.s-btn {
$l: 15%;
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
$bg: $colorOvrBtnBg;
&:not(.major) {
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
}
font-size: 95%;
height: $ovrFooterH;
line-height: $ovrFooterH;
margin-left: $interiorMargin;
padding: 0 $interiorMargin * 3;
&.major {
@extend .s-btn.major;
&:hover {
@extend .s-btn.major:hover;
}
}
//&.major {
// @extend .s-btn.major;
// &:hover {
// @extend .s-btn.major:hover;
// }
//}
}
}
.contents.l-dialog {

4
platform/commonUI/general/res/sass/user-environ/_top-bar.scss
View File

@@ -28,9 +28,9 @@
line-height: $ueTopBarH;
}
.title {
/* .title {
color: #fff;
}
}*/
.buttons-main {
font-size: 0.8em;