mirror of
https://github.com/nasa/openmct.git
synced 2024-12-29 09:28:52 +00:00
[Frontend] IN-PROGRESS Major restructuring of /platform/commonUI/ to add themes structure
open #95 New themes bundle files, .scss and directories; Moved constants definitions (mainly colors) from commonUI/.../_constants to individual themes _constants files; tweaks to mixins files; changed pathways to font and images in commonUI/.../_constants;
This commit is contained in:
parent
62898c921f
commit
37c34c668c
@ -8,6 +8,7 @@
|
||||
"platform/commonUI/dialog",
|
||||
"platform/commonUI/general",
|
||||
"platform/commonUI/inspect",
|
||||
"platform/commonUI/themes/espresso",
|
||||
"platform/containment",
|
||||
"platform/execution",
|
||||
"platform/telemetry",
|
||||
|
@ -24,10 +24,6 @@
|
||||
{
|
||||
"stylesheetUrl": "css/normalize.min.css",
|
||||
"priority": "mandatory"
|
||||
},
|
||||
{
|
||||
"stylesheetUrl": "css/theme-espresso.css",
|
||||
"priority": 1000
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
|
@ -13,7 +13,7 @@ javascripts_dir = "js"
|
||||
output_style = :nested
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
@ -33,62 +33,6 @@ $controlCr: 3px;
|
||||
$smallCr: 2px;
|
||||
$badgeW: 35px;
|
||||
|
||||
/************************** COLORS AND SHADING */
|
||||
$colorBodyBg: #333;
|
||||
$colorBodyFg: #999;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
$colorMenuIc: lighten($colorKey, 17%);
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
// Limits and staleness colors
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
$colorTelemFresh: #fff;
|
||||
$colorTelemStale: #888;
|
||||
$styleTelemStale: italic;
|
||||
// Bubble colors
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
// Items
|
||||
$colorItemBase: lighten($colorBodyBg, 5%);
|
||||
$colorItemFg: lighten($colorItemBase, 20%);
|
||||
$colorItemSelected: $colorKey;
|
||||
// Tabular
|
||||
$tabularColorBorder: rgba(white, 0.1);
|
||||
$tabularColorBodyBg: darken($colorBodyBg, 10%);
|
||||
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
|
||||
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
|
||||
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
|
||||
$tabularColorHeaderBorder: $colorBodyBg;
|
||||
|
||||
/************************** RATIOS */
|
||||
$ltGamma: 20%;
|
||||
$btnFontSizeToH: 0.45;
|
||||
@ -118,9 +62,6 @@ $treeVCW: 10px;
|
||||
$treeTypeIconH: 16px;
|
||||
$treeTypeIconW: 20px;
|
||||
$treeContextTriggerW: 20px;
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
// Tabular
|
||||
$tabularHeaderH: 22px; //18px
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
@ -157,13 +98,13 @@ $formLRPad: $interiorMargin;
|
||||
$menuLineH: 1.5rem;
|
||||
$menuLineHPx: 24px;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$btnStdH: 25px;
|
||||
$btnToolbarH: $btnStdH;
|
||||
|
||||
/************************** PATHS */
|
||||
$dirImgs: '../images/'; // Relative to platform/css/ directory
|
||||
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
|
||||
$dirCommonRes: '../../../../general/res/';
|
||||
$dirImgs: $dirCommonRes + 'images/';
|
||||
|
||||
/************************** TIMINGS */
|
||||
$controlFadeMs: 100ms;
|
||||
|
||||
|
@ -1,38 +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.
|
||||
*****************************************************************************/
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://www.web-font-generator.com/ to gen fonts
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url('../fonts/symbols/wtdsymbols.eot');
|
||||
src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/symbols/wtdsymbols.woff') format('woff'),
|
||||
url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
|
||||
url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
@ -19,6 +19,26 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/************************** FONTS */
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
|
||||
src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
|
||||
url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
|
@ -29,10 +29,8 @@
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
$c: $colorKey;
|
||||
&.icon {
|
||||
color: $c;
|
||||
@include txtShdwSubtle();
|
||||
color: $colorKey;
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
|
@ -21,7 +21,6 @@
|
||||
*****************************************************************************/
|
||||
@import "effects";
|
||||
@import "global";
|
||||
@import "fonts";
|
||||
@import "about";
|
||||
@import "text";
|
||||
@import "icons";
|
||||
|
@ -149,9 +149,9 @@
|
||||
$ltnRatio: 7%;
|
||||
$gradRatio: 5%;
|
||||
$hovRatio: 7%;
|
||||
$bgBase: lighten($bg, $ltnRatio);
|
||||
$fgBase: lighten($fg, $ltnRatio);
|
||||
$gradC1: lighten($bgBase, $gradRatio);
|
||||
$bgBase: $bg; //pullForward($bg, $ltnRatio);
|
||||
$fgBase: $fg; // pullForward($fg, $ltnRatio);
|
||||
$gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
|
||||
$gradC2: $bgBase;
|
||||
$cInvokeBase: #fff;
|
||||
|
||||
@ -165,8 +165,8 @@
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
|
||||
color: lighten($fgBase, $hovRatio);
|
||||
@include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
|
||||
color: pullForward($fgBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -212,7 +212,9 @@
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
|
||||
// $ic: Icon color
|
||||
@include border-radius($controlCr);
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
@ -263,6 +265,16 @@
|
||||
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
|
||||
}
|
||||
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
/*********************************************** FORM ELEMENTS */
|
||||
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include appearance(none);
|
||||
|
@ -59,19 +59,15 @@ $pad: $interiorMargin * $baseRatio;
|
||||
|
||||
/*********************************** STYLE STYLES */
|
||||
.s-btn {
|
||||
$base: lighten($colorBodyBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
@include user-select(none);
|
||||
//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
|
||||
font-size: 0.7rem;
|
||||
.icon {
|
||||
font-size: 0.8rem;
|
||||
color: $colorKey;
|
||||
@ -89,7 +85,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
|
||||
&:not(.major) {
|
||||
@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
|
||||
@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
|
||||
}
|
||||
|
||||
&.major {
|
||||
|
@ -1,52 +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.
|
||||
*****************************************************************************/
|
||||
@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.65) 0 1px 4px);
|
||||
// background: lighten($bg, 20%);
|
||||
background: rgba(#fff, 0.1);
|
||||
border: none;
|
||||
//border-bottom: 1px solid rgba(#fff, 0.1);
|
||||
color: lighten($fg, 20%);
|
||||
outline: none;
|
||||
&.error {
|
||||
background: rgba(red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
|
||||
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include nice-input($bg, $fg);
|
||||
background: lighten($bg, 3%);
|
||||
border-bottom: 1px solid lighten($bg, 10%);
|
||||
}
|
12
platform/commonUI/themes/espresso/bundle.json
Normal file
12
platform/commonUI/themes/espresso/bundle.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "Espresso",
|
||||
"description": "Espresso theme: dark and rich",
|
||||
"extensions": {
|
||||
"stylesheets": [
|
||||
{
|
||||
"stylesheetUrl": "css/theme-espresso.css",
|
||||
"priority": 1000
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
26
platform/commonUI/themes/espresso/res/config.rb
Executable file
26
platform/commonUI/themes/espresso/res/config.rb
Executable file
@ -0,0 +1,26 @@
|
||||
# Require any additional compass plugins here.
|
||||
# require "compass-growl"
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "js"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# :expanded, :compressed, :nested
|
||||
output_style = :nested
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
|
File diff suppressed because it is too large
Load Diff
68
platform/commonUI/themes/espresso/res/sass/_constants.scss
Normal file
68
platform/commonUI/themes/espresso/res/sass/_constants.scss
Normal file
@ -0,0 +1,68 @@
|
||||
/************************** COLORS AND SHADING */
|
||||
$colorBodyBg: #333;
|
||||
$colorBodyFg: #999;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
|
||||
$contrastRatio: 7%;
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
|
||||
$colorBtnFg: $colorBodyFg;
|
||||
$colorBtnIcon: $colorKey;
|
||||
$colorInvokeMenu: #fff;
|
||||
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
$colorMenuIc: lighten($colorKey, 17%);
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
// Limits and staleness colors
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
$colorTelemFresh: #fff;
|
||||
$colorTelemStale: #888;
|
||||
$styleTelemStale: italic;
|
||||
// Bubble colors
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
// Items
|
||||
$colorItemBase: lighten($colorBodyBg, 5%);
|
||||
$colorItemFg: lighten($colorItemBase, 20%);
|
||||
$colorItemSelected: $colorKey;
|
||||
// Tabular
|
||||
$tabularColorBorder: rgba(white, 0.1);
|
||||
$tabularColorBodyBg: darken($colorBodyBg, 10%);
|
||||
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
|
||||
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
|
||||
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
|
||||
$tabularColorHeaderBorder: $colorBodyBg;
|
||||
// Tree
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
// Scrollbar
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
9
platform/commonUI/themes/espresso/res/sass/_mixins.scss
Normal file
9
platform/commonUI/themes/espresso/res/sass/_mixins.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
@ -25,12 +25,12 @@
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mobile/constants";
|
||||
|
||||
@import "../../../../general/res/sass/_mixins";
|
||||
@import "../../../../general/res/sass/mobile/mixins";
|
||||
@import "mixins";
|
||||
@import "forms/mixins";
|
||||
@import "mobile/mixins";
|
||||
|
||||
@import "themes/theme-espresso";
|
||||
@import "main";
|
||||
@import "../../../../general/res/sass/constants";
|
||||
@import "../../../../general/res/sass/mobile/constants";
|
||||
@import "constants";
|
||||
|
||||
@import "../../../../general/res/sass/main";
|
12
platform/commonUI/themes/snow/bundle.json
Normal file
12
platform/commonUI/themes/snow/bundle.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "Sonw",
|
||||
"description": "Snow theme: light and cool",
|
||||
"extensions": {
|
||||
"stylesheets": [
|
||||
{
|
||||
"stylesheetUrl": "css/theme-snow.css",
|
||||
"priority": 1000
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
26
platform/commonUI/themes/snow/res/config.rb
Executable file
26
platform/commonUI/themes/snow/res/config.rb
Executable file
@ -0,0 +1,26 @@
|
||||
# Require any additional compass plugins here.
|
||||
# require "compass-growl"
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "js"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# :expanded, :compressed, :nested
|
||||
output_style = :nested
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
|
5971
platform/commonUI/themes/snow/res/css/theme-snow.css
Normal file
5971
platform/commonUI/themes/snow/res/css/theme-snow.css
Normal file
File diff suppressed because it is too large
Load Diff
68
platform/commonUI/themes/snow/res/sass/_constants.scss
Normal file
68
platform/commonUI/themes/snow/res/sass/_constants.scss
Normal file
@ -0,0 +1,68 @@
|
||||
/************************** COLORS AND SHADING */
|
||||
$colorBodyBg: #fff;
|
||||
$colorBodyFg: #666;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
|
||||
$contrastRatio: 25%;
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
|
||||
$colorBtnFg: $colorBodyBg;
|
||||
$colorBtnIcon: $colorBtnFg;
|
||||
$colorInvokeMenu: #fff;
|
||||
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
$colorInvokeMenu: #fff;
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
$colorMenuIc: lighten($colorKey, 17%);
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
// Limits and staleness colors
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
$colorTelemFresh: #fff;
|
||||
$colorTelemStale: #888;
|
||||
$styleTelemStale: italic;
|
||||
// Bubble colors
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
// Items
|
||||
$colorItemBase: lighten($colorBodyBg, 5%);
|
||||
$colorItemFg: lighten($colorItemBase, 20%);
|
||||
$colorItemSelected: $colorKey;
|
||||
// Tabular
|
||||
$tabularColorBorder: rgba(white, 0.1);
|
||||
$tabularColorBodyBg: darken($colorBodyBg, 10%);
|
||||
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
|
||||
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
|
||||
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
|
||||
$tabularColorHeaderBorder: $colorBodyBg;
|
||||
// Tree
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
// Scrollbar
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
7
platform/commonUI/themes/snow/res/sass/_controls.scss
Normal file
7
platform/commonUI/themes/snow/res/sass/_controls.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.s-btn {
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
$fg: lighten($bg, 70%);
|
||||
@include btnSubtle($bg, $fg, $fg, 0);
|
||||
}
|
||||
}
|
48
platform/commonUI/themes/snow/res/sass/_mixins.scss
Normal file
48
platform/commonUI/themes/snow/res/sass/_mixins.scss
Normal file
@ -0,0 +1,48 @@
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) {
|
||||
$hovRatio: 5%;
|
||||
$bgBase: $bg; //pullForward($bg, $contrastRatio);
|
||||
$fgBase: $fg; //pushBack($bg, $contrastRatio);
|
||||
|
||||
background-color: $bgBase;
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
//@include boxShdwSubtle();
|
||||
//border: none;
|
||||
//border-top: 1px solid lighten($gradC1, 2%);
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
background-color: $colorKey; //pullForward($bgBase, $hovRatio);
|
||||
//color: pushBack($fgBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) {
|
||||
// $ic: Icon color
|
||||
@include border-radius($controlCr);
|
||||
@include containerSubtle($bg, $fg, true, 30%);
|
||||
color: $ic;
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
/* &:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: pullForward($ic, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
@ -19,12 +19,28 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* CONSTANTS */
|
||||
//$colorBodyBg: #fff;
|
||||
//$colorBodyFg: #666;
|
||||
|
||||
/*
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
background: red;
|
||||
display: inline-block;
|
||||
}*/
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "../../../../general/res/sass/_mixins";
|
||||
@import "../../../../general/res/sass/mobile/mixins";
|
||||
@import "mixins";
|
||||
|
||||
@import "../../../../general/res/sass/constants";
|
||||
@import "../../../../general/res/sass/mobile/constants";
|
||||
@import "constants";
|
||||
|
||||
@import "../../../../general/res/sass/main";
|
||||
@import "controls";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user