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

Frontend] Normalizing styles for items and l-icon-link

Browse Source 
open #90
This commit is contained in:
Charles Hacskaylo
2015-10-26 14:48:50 -07:00
parent f655346f46
commit 77a1a90905
4 changed files with 84 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
platform/commonUI/general/res/sass/_icons.scss
View File

@@ -35,6 +35,8 @@
} }
&.icon { &.icon {
color: $colorKey; color: $colorKey;
//position: relative;
font-size: inherit;
&.alert { &.alert {
color: $colorAlert; color: $colorAlert;
&:hover { &:hover {
@@ -48,6 +50,19 @@
&.icon-calendar:after { &.icon-calendar:after {
content: "\e605"; content: "\e605";
} }
&.l-icon-link {
color: $colorIconLink;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.4em !important;
left: 0px;
bottom: 5%;
z-index: 2;
&:before {
content: "\f4";
}
}
} }
.bar .ui-symbol { .bar .ui-symbol {
@@ -70,14 +85,6 @@
position: absolute; position: absolute;
} }
//.tree-item .type-icon {
// font-size: 16px; // 16px is crisp size
//}
.l-icon-link:before {
content: "\f4";
}
.l-icon-alert { .l-icon-alert {
display: none !important; // Remove this when alerts are enabled display: none !important; // Remove this when alerts are enabled
&:before { &:before {

12
platform/commonUI/general/res/sass/items/_item.scss
View File

@@ -88,7 +88,7 @@
z-index: 1; z-index: 1;
.item-type { .item-type {
//@include trans-prop-nice("color", $transTime); //@include trans-prop-nice("color", $transTime);
@include absPosDefault($iconMargin, false); @include absPosDefault($iconMargin, hidden);
//@include test(red); //@include test(red);
//color: $colorItemIc; //color: $colorItemIc;
text-align: center; text-align: center;
@@ -97,16 +97,6 @@
bottom: auto; bottom: auto;
height: $iconD; height: $iconD;
top: $iconMargin - 10; top: $iconMargin - 10;
.l-icon-link {
color: $colorIconLink;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2;
}
} }
.item-open { .item-open {
@include trans-prop-nice("opacity", $transTime); @include trans-prop-nice("opacity", $transTime);

68
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@@ -610,48 +610,58 @@ mct-container {
color: #cccccc; } color: #cccccc; }
/* line 36, ../../../../general/res/sass/_icons.scss */ /* line 36, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon, .icon.s-icon-btn, .icon.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.pager { .ui-symbol.icon, .icon.s-icon-btn, .icon.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.pager {
color: #0099cc; } color: #0099cc;
/* line 38, ../../../../general/res/sass/_icons.scss */ font-size: inherit; }
/* line 40, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert, .icon.alert.s-icon-btn, .icon.alert.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.alert.pager { .ui-symbol.icon.alert, .icon.alert.s-icon-btn, .icon.alert.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.alert.pager {
color: #ff3c00; } color: #ff3c00; }
/* line 40, ../../../../general/res/sass/_icons.scss */ /* line 42, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert:hover, .icon.alert.s-icon-btn:hover, .icon.alert.mini-tab-icon:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover { .ui-symbol.icon.alert:hover, .icon.alert.s-icon-btn:hover, .icon.alert.mini-tab-icon:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover {
color: #ff8a66; } color: #ff8a66; }
/* line 44, ../../../../general/res/sass/_icons.scss */ /* line 46, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.major, .icon.major.s-icon-btn, .icon.major.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.major.pager { .ui-symbol.icon.major, .icon.major.s-icon-btn, .icon.major.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.major.pager {
font-size: 1.65em; } font-size: 1.65em; }
/* line 48, ../../../../general/res/sass/_icons.scss */ /* line 50, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon-calendar:after, .icon-calendar.s-icon-btn:after, .icon-calendar.mini-tab-icon:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after { .ui-symbol.icon-calendar:after, .icon-calendar.s-icon-btn:after, .icon-calendar.mini-tab-icon:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after {
content: "\e605"; } content: "\e605"; }
/* line 53, ../../../../general/res/sass/_icons.scss */ /* line 53, ../../../../general/res/sass/_icons.scss */
.ui-symbol.l-icon-link, .l-icon-link.s-icon-btn, .l-icon-link.mini-tab-icon, .l-datetime-picker .l-month-year-pager .l-icon-link.pager {
color: #49dedb;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.4em !important;
left: 0px;
bottom: 5%;
z-index: 2; }
/* line 62, ../../../../general/res/sass/_icons.scss */
.ui-symbol.l-icon-link:before, .l-icon-link.s-icon-btn:before, .l-icon-link.mini-tab-icon:before, .l-datetime-picker .l-month-year-pager .l-icon-link.pager:before {
content: "\f4"; }
/* line 68, ../../../../general/res/sass/_icons.scss */
.bar .ui-symbol, .bar .s-icon-btn, .bar .mini-tab-icon, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager { .bar .ui-symbol, .bar .s-icon-btn, .bar .mini-tab-icon, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager {
display: inline-block; } display: inline-block; }
/* line 57, ../../../../general/res/sass/_icons.scss */ /* line 72, ../../../../general/res/sass/_icons.scss */
.invoke-menu { .invoke-menu {
text-shadow: none; text-shadow: none;
display: inline-block; } display: inline-block; }
/* line 62, ../../../../general/res/sass/_icons.scss */ /* line 77, ../../../../general/res/sass/_icons.scss */
.s-menu-btn .invoke-menu, .s-menu-btn .invoke-menu,
.icon.major .invoke-menu { .icon.major .invoke-menu {
margin-left: 3px; } margin-left: 3px; }
/* line 67, ../../../../general/res/sass/_icons.scss */ /* line 82, ../../../../general/res/sass/_icons.scss */
.menu .type-icon, .menu .type-icon,
.tree-item .type-icon, .tree-item .type-icon,
.super-menu.menu .type-icon { .super-menu.menu .type-icon {
position: absolute; } position: absolute; }
/* line 77, ../../../../general/res/sass/_icons.scss */ /* line 88, ../../../../general/res/sass/_icons.scss */
.l-icon-link:before {
content: "\f4"; }
/* line 81, ../../../../general/res/sass/_icons.scss */
.l-icon-alert { .l-icon-alert {
display: none !important; } display: none !important; }
/* line 83, ../../../../general/res/sass/_icons.scss */ /* line 90, ../../../../general/res/sass/_icons.scss */
.l-icon-alert:before { .l-icon-alert:before {
color: #ff3c00; color: #ff3c00;
content: "!"; } content: "!"; }
@@ -6215,7 +6225,7 @@ table {
z-index: 1; } z-index: 1; }
/* line 89, ../../../../general/res/sass/items/_item.scss */ /* line 89, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
overflow: false; overflow: hidden;
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 40px; right: 40px;
@@ -6229,17 +6239,7 @@ table {
bottom: auto; bottom: auto;
height: 102px; height: 102px;
top: 30px; } top: 30px; }
/* line 100, ../../../../general/res/sass/items/_item.scss */ /* line 101, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-icon-link {
color: #49dedb;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2; }
/* line 111, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity"; -moz-transition-property: "opacity";
-o-transition-property: "opacity"; -o-transition-property: "opacity";
@@ -6264,14 +6264,14 @@ table {
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 121, ../../../../general/res/sass/items/_item.scss */ /* line 111, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: #bfbfbf; } color: #bfbfbf; }
/* line 126, ../../../../general/res/sass/items/_item.scss */ /* line 116, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
overflow: hidden; overflow: hidden;
@@ -6279,7 +6279,7 @@ table {
white-space: nowrap; white-space: nowrap;
color: #8c8c8c; color: #8c8c8c;
font-size: 0.8em; } font-size: 0.8em; }
/* line 132, ../../../../general/res/sass/items/_item.scss */ /* line 122, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-color: #0099cc; background-color: #0099cc;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -6319,16 +6319,16 @@ table {
/* line 281, ../../../../general/res/sass/_mixins.scss */ /* line 281, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover > .icon { .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
color: #33ccff; } } color: #33ccff; } }
/* line 137, ../../../../general/res/sass/items/_item.scss */ /* line 127, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }
/* line 138, ../../../../general/res/sass/items/_item.scss */ /* line 128, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open { .items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; } color: #80dfff; }
/* line 139, ../../../../general/res/sass/items/_item.scss */ /* line 129, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 141, ../../../../general/res/sass/items/_item.scss */ /* line 131, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type { .items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; } color: white !important; }

68
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@@ -610,48 +610,58 @@ mct-container {
color: #b3b3b3; } color: #b3b3b3; }
/* line 36, ../../../../general/res/sass/_icons.scss */ /* line 36, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon, .icon.s-icon-btn, .icon.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.pager { .ui-symbol.icon, .icon.s-icon-btn, .icon.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.pager {
color: #0099cc; } color: #0099cc;
/* line 38, ../../../../general/res/sass/_icons.scss */ font-size: inherit; }
/* line 40, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert, .icon.alert.s-icon-btn, .icon.alert.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.alert.pager { .ui-symbol.icon.alert, .icon.alert.s-icon-btn, .icon.alert.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.alert.pager {
color: #ff3c00; } color: #ff3c00; }
/* line 40, ../../../../general/res/sass/_icons.scss */ /* line 42, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.alert:hover, .icon.alert.s-icon-btn:hover, .icon.alert.mini-tab-icon:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover { .ui-symbol.icon.alert:hover, .icon.alert.s-icon-btn:hover, .icon.alert.mini-tab-icon:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover {
color: #ff8a66; } color: #ff8a66; }
/* line 44, ../../../../general/res/sass/_icons.scss */ /* line 46, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon.major, .icon.major.s-icon-btn, .icon.major.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.major.pager { .ui-symbol.icon.major, .icon.major.s-icon-btn, .icon.major.mini-tab-icon, .l-datetime-picker .l-month-year-pager .icon.major.pager {
font-size: 1.65em; } font-size: 1.65em; }
/* line 48, ../../../../general/res/sass/_icons.scss */ /* line 50, ../../../../general/res/sass/_icons.scss */
.ui-symbol.icon-calendar:after, .icon-calendar.s-icon-btn:after, .icon-calendar.mini-tab-icon:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after { .ui-symbol.icon-calendar:after, .icon-calendar.s-icon-btn:after, .icon-calendar.mini-tab-icon:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after {
content: "\e605"; } content: "\e605"; }
/* line 53, ../../../../general/res/sass/_icons.scss */ /* line 53, ../../../../general/res/sass/_icons.scss */
.ui-symbol.l-icon-link, .l-icon-link.s-icon-btn, .l-icon-link.mini-tab-icon, .l-datetime-picker .l-month-year-pager .l-icon-link.pager {
color: #49dedb;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.4em !important;
left: 0px;
bottom: 5%;
z-index: 2; }
/* line 62, ../../../../general/res/sass/_icons.scss */
.ui-symbol.l-icon-link:before, .l-icon-link.s-icon-btn:before, .l-icon-link.mini-tab-icon:before, .l-datetime-picker .l-month-year-pager .l-icon-link.pager:before {
content: "\f4"; }
/* line 68, ../../../../general/res/sass/_icons.scss */
.bar .ui-symbol, .bar .s-icon-btn, .bar .mini-tab-icon, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager { .bar .ui-symbol, .bar .s-icon-btn, .bar .mini-tab-icon, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager {
display: inline-block; } display: inline-block; }
/* line 57, ../../../../general/res/sass/_icons.scss */ /* line 72, ../../../../general/res/sass/_icons.scss */
.invoke-menu { .invoke-menu {
text-shadow: none; text-shadow: none;
display: inline-block; } display: inline-block; }
/* line 62, ../../../../general/res/sass/_icons.scss */ /* line 77, ../../../../general/res/sass/_icons.scss */
.s-menu-btn .invoke-menu, .s-menu-btn .invoke-menu,
.icon.major .invoke-menu { .icon.major .invoke-menu {
margin-left: 3px; } margin-left: 3px; }
/* line 67, ../../../../general/res/sass/_icons.scss */ /* line 82, ../../../../general/res/sass/_icons.scss */
.menu .type-icon, .menu .type-icon,
.tree-item .type-icon, .tree-item .type-icon,
.super-menu.menu .type-icon { .super-menu.menu .type-icon {
position: absolute; } position: absolute; }
/* line 77, ../../../../general/res/sass/_icons.scss */ /* line 88, ../../../../general/res/sass/_icons.scss */
.l-icon-link:before {
content: "\f4"; }
/* line 81, ../../../../general/res/sass/_icons.scss */
.l-icon-alert { .l-icon-alert {
display: none !important; } display: none !important; }
/* line 83, ../../../../general/res/sass/_icons.scss */ /* line 90, ../../../../general/res/sass/_icons.scss */
.l-icon-alert:before { .l-icon-alert:before {
color: #ff3c00; color: #ff3c00;
content: "!"; } content: "!"; }
@@ -6128,7 +6138,7 @@ table {
z-index: 1; } z-index: 1; }
/* line 89, ../../../../general/res/sass/items/_item.scss */ /* line 89, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type { .items-holder .item.grid-item .item-main .item-type {
overflow: false; overflow: hidden;
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 40px; right: 40px;
@@ -6142,17 +6152,7 @@ table {
bottom: auto; bottom: auto;
height: 102px; height: 102px;
top: 30px; } top: 30px; }
/* line 100, ../../../../general/res/sass/items/_item.scss */ /* line 101, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-type .l-icon-link {
color: #49dedb;
height: auto;
line-height: 100%;
position: absolute;
font-size: 0.3em;
left: 0px;
bottom: 10px;
z-index: 2; }
/* line 111, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .item-main .item-open { .items-holder .item.grid-item .item-main .item-open {
-moz-transition-property: "opacity"; -moz-transition-property: "opacity";
-o-transition-property: "opacity"; -o-transition-property: "opacity";
@@ -6177,14 +6177,14 @@ table {
width: 50px; width: 50px;
pointer-events: none; pointer-events: none;
text-align: right; } text-align: right; }
/* line 121, ../../../../general/res/sass/items/_item.scss */ /* line 111, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .title { .items-holder .item.grid-item .title {
text-shadow: none; text-shadow: none;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: #666; } color: #666; }
/* line 126, ../../../../general/res/sass/items/_item.scss */ /* line 116, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item .details { .items-holder .item.grid-item .details {
text-shadow: none; text-shadow: none;
overflow: hidden; overflow: hidden;
@@ -6192,7 +6192,7 @@ table {
white-space: nowrap; white-space: nowrap;
color: #8c8c8c; color: #8c8c8c;
font-size: 0.8em; } font-size: 0.8em; }
/* line 132, ../../../../general/res/sass/items/_item.scss */ /* line 122, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-color: #0099cc; background-color: #0099cc;
-moz-border-radius: 4px; -moz-border-radius: 4px;
@@ -6216,16 +6216,16 @@ table {
/* line 274, ../../../../general/res/sass/_mixins.scss */ /* line 274, ../../../../general/res/sass/_mixins.scss */
.items-holder .item.grid-item.selected .icon { .items-holder .item.grid-item.selected .icon {
color: #eee; } color: #eee; }
/* line 137, ../../../../general/res/sass/items/_item.scss */ /* line 127, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }
/* line 138, ../../../../general/res/sass/items/_item.scss */ /* line 128, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-main .item-open { .items-holder .item.grid-item.selected .item-main .item-open {
color: #80dfff; } color: #80dfff; }
/* line 139, ../../../../general/res/sass/items/_item.scss */ /* line 129, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected .title { .items-holder .item.grid-item.selected .title {
color: white; } color: white; }
/* line 141, ../../../../general/res/sass/items/_item.scss */ /* line 131, ../../../../general/res/sass/items/_item.scss */
.items-holder .item.grid-item.selected:hover .item-main .item-type { .items-holder .item.grid-item.selected:hover .item-main .item-type {
color: white !important; } color: white !important; }