[Frontend] CSS and font updates ONLY from open1423
WTD-1404
CSS has error at this point due to missing $colorIconLink in _constants.scss;
(cherry picked from commit 2a032bf)
This commit is contained in:
Charles Hacskaylo
@@ -20,68 +20,63 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.triangle {
|
||||
$myColor: $colorKey;
|
||||
$mySize: 10px;
|
||||
@include triangle-right($mySize, $myColor);
|
||||
&.triangle-down {
|
||||
@include triangle-down($mySize, $myColor);
|
||||
}
|
||||
$myColor: $colorKey;
|
||||
$mySize: 10px;
|
||||
@include triangle-right($mySize, $myColor);
|
||||
&.triangle-down {
|
||||
@include triangle-down($mySize, $myColor);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
$c: $colorKey;
|
||||
&.icon {
|
||||
color: $c;
|
||||
@include txtShdwSubtle();
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
color: lighten($colorAlert, $ltGamma);
|
||||
}
|
||||
}
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
}
|
||||
$c: $colorKey;
|
||||
&.icon {
|
||||
color: $c;
|
||||
@include txtShdwSubtle();
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
color: lighten($colorAlert, $ltGamma);
|
||||
}
|
||||
}
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar .icon {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.invoke-menu {
|
||||
//@include invokeMenu(); // $colorKey
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
//font-size: 0.8rem;// Normalizing for new icomoon symbols font
|
||||
//vertical-align: middle;// Normalizing for new icomoon symbols font
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMarginSm;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/*
|
||||
.object-header .type-icon {
|
||||
color: $colorKey;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
*/
|
||||
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.super-menu.menu .type-icon {
|
||||
//font-size: $menuLineH * 0.8; //.93 // Normalizing for new icomoon symbols font
|
||||
//line-height: $menuLineH * 1.13; // Normalizing for new icomoon symbols font
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tree-item .type-icon {
|
||||
font-size: 16px; // 16px is crisp size
|
||||
font-size: 16px; // 16px is crisp size
|
||||
}
|
||||
|
||||
.super-menu.menu.dropdown .icon {
|
||||
//font-size: $menuLineH * 0.95 // Normalizing for new icomoon symbols font
|
||||
.l-icon-link:before {
|
||||
content: "\f4";
|
||||
}
|
||||
|
||||
.l-icon-alert {
|
||||
display: none !important; // Remove this when alerts are enabled
|
||||
&:before {
|
||||
color: $colorAlert;
|
||||
content: "!";
|
||||
}
|
||||
}
|
||||
@@ -26,6 +26,16 @@
|
||||
width: auto; height: auto;
|
||||
}
|
||||
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($props, $t: 500ms) {
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
&.grid-item {
|
||||
//div { @include test() }
|
||||
$d: $ueBrowseGridItemLg;
|
||||
//$iconD: 100px;
|
||||
$iconMargin: 40px;
|
||||
$iconD: ($d - ($iconMargin * 2)) * 0.85;
|
||||
$transTime: 200ms;
|
||||
@include btnSubtle($colorItemBase);
|
||||
box-sizing: border-box;
|
||||
@@ -39,12 +42,12 @@
|
||||
margin-bottom: $interiorMarginSm;
|
||||
margin-right: $interiorMarginSm;
|
||||
position: relative;
|
||||
.item-main .item-type {
|
||||
@include trans-prop-nice("color", $transTime);
|
||||
}
|
||||
&:hover .item-main {
|
||||
.item-type {
|
||||
color: $colorKey !important;
|
||||
.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
}
|
||||
}
|
||||
.item-open {
|
||||
//display: block;
|
||||
@@ -63,7 +66,10 @@
|
||||
.left, .right {
|
||||
width: auto;
|
||||
.icon {
|
||||
margin-left: $interiorMargin;
|
||||
margin-left: $interiorMarginSm;
|
||||
&.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,10 +86,28 @@
|
||||
line-height: $lh;
|
||||
z-index: 1;
|
||||
.item-type {
|
||||
//@include trans-prop-nice("color", $transTime);
|
||||
@include absPosDefault($iconMargin, false);
|
||||
//@include test(red);
|
||||
color: $colorItemFg;
|
||||
text-align: center;
|
||||
font-size: 6em;
|
||||
font-size: $iconD * 0.95; //6em;
|
||||
line-height: $iconD;
|
||||
bottom: auto;
|
||||
height: $iconD;
|
||||
top: $iconMargin - 10;
|
||||
//line-height: $lh;
|
||||
.l-icon-link {
|
||||
// When the link icon is in the item-type icon holder
|
||||
color: darken($colorIconLink, 25%);
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
position: absolute;
|
||||
font-size: 32px;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.item-open {
|
||||
//@include test();
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
ul.tree {
|
||||
@include menuUlReset();
|
||||
li {
|
||||
@@ -29,7 +30,7 @@ ul.tree {
|
||||
@include border-radius($basicCr);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
display: block;
|
||||
font-size: 0.80em;
|
||||
font-size: 0.8em;
|
||||
height: $menuLineH;
|
||||
line-height: $menuLineH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
@@ -48,34 +49,44 @@ ul.tree {
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
// border: 1px solid rgba(blue, 0.5);
|
||||
// @include test(orange);
|
||||
@include absPosDefault();
|
||||
left: $runningItemW + $interiorMargin;
|
||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
||||
left: $runningItemW;
|
||||
|
||||
.type-icon {
|
||||
@include absPosDefault();
|
||||
@include absPosDefault(0, false);
|
||||
@include txtShdwSubtle(0.6);
|
||||
color: $colorItemTreeIcon;
|
||||
.alert {
|
||||
@include txtShdwSubtle(0.3);
|
||||
background: $colorBodyBg;
|
||||
color: $colorAlert;
|
||||
font-size: 0.7em;
|
||||
margin-top: -3px;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 9px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: $interiorMargin;
|
||||
right: auto; width: 1em;
|
||||
|
||||
.icon {
|
||||
&.l-icon-link,
|
||||
&.l-icon-alert {
|
||||
@include txtShdwSubtle(1);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
&.l-icon-alert {
|
||||
$d: 8px;
|
||||
@include ancillaryIcon($d, $colorAlert);
|
||||
top: 1px;
|
||||
right: -2px;
|
||||
}
|
||||
&.l-icon-link {
|
||||
$d: 8px;
|
||||
@include ancillaryIcon($d, $colorIconLink);
|
||||
left: -3px;
|
||||
bottom: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
left: $runningItemW + ($interiorMargin);
|
||||
left: $runningItemW + ($interiorMargin * 3);
|
||||
//right: $treeContextTriggerW + $interiorMargin;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
Reference in New Issue
Block a user