From 77a1a9090500c8a13b31e0f1072b880efe584f10 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 26 Oct 2015 14:48:50 -0700 Subject: [PATCH] Frontend] Normalizing styles for items and l-icon-link open #90 --- .../commonUI/general/res/sass/_icons.scss | 23 ++++--- .../general/res/sass/items/_item.scss | 12 +--- .../espresso/res/css/theme-espresso.css | 68 +++++++++---------- .../themes/snow/res/css/theme-snow.css | 68 +++++++++---------- 4 files changed, 84 insertions(+), 87 deletions(-) diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index d0fb6c53cc..3d0c4ec165 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -35,6 +35,8 @@ } &.icon { color: $colorKey; + //position: relative; + font-size: inherit; &.alert { color: $colorAlert; &:hover { @@ -48,6 +50,19 @@ &.icon-calendar:after { 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 { @@ -70,14 +85,6 @@ position: absolute; } -//.tree-item .type-icon { -// font-size: 16px; // 16px is crisp size -//} - -.l-icon-link:before { - content: "\f4"; -} - .l-icon-alert { display: none !important; // Remove this when alerts are enabled &:before { diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 9e5fe1cf47..fd780c4eea 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -88,7 +88,7 @@ z-index: 1; .item-type { //@include trans-prop-nice("color", $transTime); - @include absPosDefault($iconMargin, false); + @include absPosDefault($iconMargin, hidden); //@include test(red); //color: $colorItemIc; text-align: center; @@ -97,16 +97,6 @@ bottom: auto; height: $iconD; 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 { @include trans-prop-nice("opacity", $transTime); diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 68ff29407e..cf5a051299 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -610,48 +610,58 @@ mct-container { color: #cccccc; } /* 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 { - color: #0099cc; } - /* line 38, ../../../../general/res/sass/_icons.scss */ + color: #0099cc; + 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 { 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 { 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 { 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 { content: "\e605"; } + /* 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 53, ../../../../general/res/sass/_icons.scss */ +/* 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 { display: inline-block; } -/* line 57, ../../../../general/res/sass/_icons.scss */ +/* line 72, ../../../../general/res/sass/_icons.scss */ .invoke-menu { text-shadow: none; display: inline-block; } -/* line 62, ../../../../general/res/sass/_icons.scss */ +/* line 77, ../../../../general/res/sass/_icons.scss */ .s-menu-btn .invoke-menu, .icon.major .invoke-menu { margin-left: 3px; } -/* line 67, ../../../../general/res/sass/_icons.scss */ +/* line 82, ../../../../general/res/sass/_icons.scss */ .menu .type-icon, .tree-item .type-icon, .super-menu.menu .type-icon { position: absolute; } -/* line 77, ../../../../general/res/sass/_icons.scss */ -.l-icon-link:before { - content: "\f4"; } - -/* line 81, ../../../../general/res/sass/_icons.scss */ +/* line 88, ../../../../general/res/sass/_icons.scss */ .l-icon-alert { display: none !important; } - /* line 83, ../../../../general/res/sass/_icons.scss */ + /* line 90, ../../../../general/res/sass/_icons.scss */ .l-icon-alert:before { color: #ff3c00; content: "!"; } @@ -6215,7 +6225,7 @@ table { z-index: 1; } /* line 89, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - overflow: false; + overflow: hidden; position: absolute; top: 40px; right: 40px; @@ -6229,17 +6239,7 @@ table { bottom: auto; height: 102px; top: 30px; } - /* line 100, ../../../../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 */ + /* line 101, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -6264,14 +6264,14 @@ table { width: 50px; pointer-events: none; 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 { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bfbfbf; } - /* line 126, ../../../../general/res/sass/items/_item.scss */ + /* line 116, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .details { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; overflow: hidden; @@ -6279,7 +6279,7 @@ table { white-space: nowrap; color: #8c8c8c; 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 { background-color: #0099cc; -moz-border-radius: 3px; @@ -6319,16 +6319,16 @@ table { /* line 281, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover > .icon { 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) { 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 { 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 { 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 { color: white !important; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 05de4d14a0..343aaf5408 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -610,48 +610,58 @@ mct-container { color: #b3b3b3; } /* 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 { - color: #0099cc; } - /* line 38, ../../../../general/res/sass/_icons.scss */ + color: #0099cc; + 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 { 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 { 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 { 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 { content: "\e605"; } + /* 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 53, ../../../../general/res/sass/_icons.scss */ +/* 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 { display: inline-block; } -/* line 57, ../../../../general/res/sass/_icons.scss */ +/* line 72, ../../../../general/res/sass/_icons.scss */ .invoke-menu { text-shadow: none; display: inline-block; } -/* line 62, ../../../../general/res/sass/_icons.scss */ +/* line 77, ../../../../general/res/sass/_icons.scss */ .s-menu-btn .invoke-menu, .icon.major .invoke-menu { margin-left: 3px; } -/* line 67, ../../../../general/res/sass/_icons.scss */ +/* line 82, ../../../../general/res/sass/_icons.scss */ .menu .type-icon, .tree-item .type-icon, .super-menu.menu .type-icon { position: absolute; } -/* line 77, ../../../../general/res/sass/_icons.scss */ -.l-icon-link:before { - content: "\f4"; } - -/* line 81, ../../../../general/res/sass/_icons.scss */ +/* line 88, ../../../../general/res/sass/_icons.scss */ .l-icon-alert { display: none !important; } - /* line 83, ../../../../general/res/sass/_icons.scss */ + /* line 90, ../../../../general/res/sass/_icons.scss */ .l-icon-alert:before { color: #ff3c00; content: "!"; } @@ -6128,7 +6138,7 @@ table { z-index: 1; } /* line 89, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - overflow: false; + overflow: hidden; position: absolute; top: 40px; right: 40px; @@ -6142,17 +6152,7 @@ table { bottom: auto; height: 102px; top: 30px; } - /* line 100, ../../../../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 */ + /* line 101, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -6177,14 +6177,14 @@ table { width: 50px; pointer-events: none; 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 { text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; } - /* line 126, ../../../../general/res/sass/items/_item.scss */ + /* line 116, ../../../../general/res/sass/items/_item.scss */ .items-holder .item.grid-item .details { text-shadow: none; overflow: hidden; @@ -6192,7 +6192,7 @@ table { white-space: nowrap; color: #8c8c8c; 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 { background-color: #0099cc; -moz-border-radius: 4px; @@ -6216,16 +6216,16 @@ table { /* line 274, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected .icon { 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) { 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 { 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 { 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 { color: white !important; }