[Frontend] IN-PROGRESS Theme changes continuing
open #95 Splitter styles updated; Tree styles updated;
This commit is contained in:
Charles Hacskaylo
1
platform/commonUI/general/res/sass/COMPILE.scss
Normal file
1
platform/commonUI/general/res/sass/COMPILE.scss
Normal file
@@ -0,0 +1 @@
|
||||
// This file exists only to force compass to compile in this directory with watch .
|
||||
@@ -205,8 +205,8 @@
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
@include trans-prop-nice("border-color", 50ms);
|
||||
border-color: $colorKey;
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,12 +237,22 @@
|
||||
border: 1px solid $c;
|
||||
}
|
||||
|
||||
@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow($sVal);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxShdwSubtle($sVal: 0.2) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxShdwLarge($sVal: 0.7) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outerGlow($color: #fff, $sVal: 0.3) {
|
||||
@@ -258,33 +268,41 @@
|
||||
}
|
||||
|
||||
@mixin txtShdwSubtle($sVal: 0.1) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
@if $sVal != 'none' {
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin txtShdwLarge($sVal: 0.7) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
|
||||
}
|
||||
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
@function pullForward($c, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
@function pushBack($c, $p: 20%) {
|
||||
// For dark interfaces, darker things move back
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function percentToDecimal($p) {
|
||||
@return $p / 100%;
|
||||
}
|
||||
|
||||
@function decimalToPercent($d) {
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
/*********************************************** 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.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 {
|
||||
@@ -308,16 +326,6 @@
|
||||
border-bottom: 1px solid lighten($bg, 10%);
|
||||
}
|
||||
|
||||
/*
|
||||
@mixin invokeMenu($baseColor: $colorBodyFg) {
|
||||
$c: $baseColor;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, $ltGamma);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@mixin menuUlReset() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -37,8 +37,8 @@
|
||||
}
|
||||
|
||||
&:after {
|
||||
// Adds the downward facing arrow element
|
||||
color: rgba($colorInvokeMenu, 0.2);
|
||||
// Adds the downward facing 'context available / invoke menu' arrow element
|
||||
color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
|
||||
content: '\76';
|
||||
display: inline-block;
|
||||
font-family: 'symbolsfont';
|
||||
@@ -50,9 +50,9 @@
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&:after {
|
||||
color: rgba($colorInvokeMenu, 0.5);
|
||||
}
|
||||
//&:after {
|
||||
// color: rgba($colorInvokeMenu, 0.5);
|
||||
//}
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
||||
@@ -20,18 +20,20 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.split-layout {
|
||||
$b: lighten($colorBodyBg, 5%);
|
||||
$b: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$splitterD: 5px;
|
||||
// TEMP VAlS - this will need to be redone when we implement a draggable splitter
|
||||
$splitL: 85%;
|
||||
$splitT: 70%;
|
||||
|
||||
.splitter {
|
||||
background-color: $b;
|
||||
@include box-shadow(rgba(black, 0.4) 0 0 3px);
|
||||
@include boxShdw($splitterShdw);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
//@if $colorSplitterHover != 'none' {
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
}
|
||||
//}
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
@@ -41,21 +43,17 @@
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
// height: $splitT;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
// height: 100% - $splitT;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($b, horizontal);
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterD;
|
||||
// margin-top: ($splitterD + 2) * -1; // Controlled by splitter
|
||||
// top: $splitT; // Controlled by splitter
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
@@ -65,20 +63,16 @@
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
// width: $splitL - 1%; // Controlled by splitter
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
// width: 100% - $splitL; // Controlled by splitter
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($b, vertical);
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterD;
|
||||
// margin-left: ($splitterD + 2) * -1; // Controlled by splitter
|
||||
// left: $splitL; // Controlled by splitter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
|
||||
ul.tree {
|
||||
@include menuUlReset();
|
||||
@include user-select(none);
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -45,6 +46,7 @@ ul.tree {
|
||||
position: relative;
|
||||
|
||||
.view-control {
|
||||
color: $colorItemTreeVC;
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin;
|
||||
font-size: 0.75em;
|
||||
@@ -53,7 +55,7 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
color: $colorItemTreeVCHover;
|
||||
color: $colorItemTreeVCHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -69,7 +71,7 @@ ul.tree {
|
||||
.type-icon {
|
||||
//@include absPosDefault(0, false);
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
@include txtShdwSubtle(0.6);
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $d;
|
||||
color: $colorItemTreeIcon;
|
||||
left: $interiorMargin;
|
||||
@@ -124,14 +126,13 @@ ul.tree {
|
||||
}
|
||||
|
||||
&.selected {
|
||||
$c: #fff;
|
||||
background: $colorKeySelectedBg;
|
||||
color: $c;
|
||||
background: $colorItemTreeSelectedBg;
|
||||
color: $colorItemTreeSelectedFg;
|
||||
.view-control {
|
||||
color: $colorItemTreeIcon;
|
||||
color: $colorItemTreeSelectedVC;
|
||||
}
|
||||
.label .type-icon {
|
||||
color: #fff; //$colorItemTreeIconHover;
|
||||
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,11 +140,11 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
.context-trigger {
|
||||
display: block;
|
||||
}
|
||||
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
//.context-trigger {
|
||||
// display: block;
|
||||
//}
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user