From 31337eaf4f97e0405778766b6baf9260fa9997e0 Mon Sep 17 00:00:00 2001 From: slhale Date: Fri, 14 Aug 2015 15:38:02 -0700 Subject: [PATCH] [Search] Text clear size & hover The search bar clear button now gets highlighted when hovered over, and the click area is slightly larger. --- platform/commonUI/general/res/css/tree.css | 81 ++++++++++--------- .../general/res/sass/search/_search.scss | 12 ++- 2 files changed, 50 insertions(+), 43 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index b0f178b428..b69340244c 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -329,14 +329,17 @@ ul.tree { top: -3px; visibility: hidden; opacity: 0; - transition: visibility .15s, opacity .15s; - right: 16px; - padding-right: 2px; } + transition: visibility .15s, opacity .15s, color .2s; + right: 15px; + padding-right: 4px; } /* line 115, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 125, ../sass/search/_search.scss */ + /* line 120, ../sass/search/_search.scss */ + .search-holder .search .search-bar .clear-icon:hover { + color: #a6a6a6; } + /* line 129, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -344,28 +347,28 @@ ul.tree { color: #737373; font-size: 6px; padding: 6px; - padding-left: 4px; + padding-left: 3px; right: 0px; top: -3px; transition: color .2s; } - /* line 141, ../sass/search/_search.scss */ + /* line 145, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 146, ../sass/search/_search.scss */ + /* line 150, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -50px; z-index: 9; transition: visibility .11s, opacity .11s; } - /* line 155, ../sass/search/_search.scss */ + /* line 159, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder.off { visibility: hidden; opacity: 0; } - /* line 160, ../sass/search/_search.scss */ + /* line 164, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 163, ../sass/search/_search.scss */ + /* line 167, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; @@ -375,33 +378,33 @@ ul.tree { color: #e6e6e6; cursor: pointer; transition: background-color .13s; } - /* line 177, ../sass/search/_search.scss */ + /* line 181, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox { margin-top: 0.3em; padding-left: 0; margin-right: 0; padding-right: 2px; } - /* line 190, ../sass/search/_search.scss */ + /* line 194, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-checkbox em:before { color: white; background-color: grey; height: 12px; width: 12px; font-size: .7em; } - /* line 203, ../sass/search/_search.scss */ + /* line 207, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: #3dcfff; } - /* line 207, ../sass/search/_search.scss */ + /* line 211, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; background-color: #666666; } - /* line 211, ../sass/search/_search.scss */ + /* line 215, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special .search-menu-label { font-size: 1.1em; } - /* line 215, ../sass/search/_search.scss */ + /* line 219, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special:hover { background-color: gray; } - /* line 224, ../sass/search/_search.scss */ + /* line 228, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -411,13 +414,13 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 237, ../sass/search/_search.scss */ + /* line 241, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 240, ../sass/search/_search.scss */ + /* line 244, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 245, ../sass/search/_search.scss */ + /* line 249, ../sass/search/_search.scss */ .search-holder .search .active-filter-display { order: 2; font-size: .6em; @@ -427,7 +430,7 @@ ul.tree { padding-left: 4px; padding-right: 4px; margin-top: 2px; } - /* line 258, ../sass/search/_search.scss */ + /* line 262, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .clear-filters-icon { padding: 4px; position: relative; @@ -436,13 +439,13 @@ ul.tree { cursor: pointer; color: #737373; font-size: 6px; } - /* line 271, ../sass/search/_search.scss */ + /* line 275, ../sass/search/_search.scss */ .search-holder .search .active-filter-display .filter-options { position: relative; top: -0.5em; margin-left: 14px; text-indent: -4px; } - /* line 284, ../sass/search/_search.scss */ + /* line 288, ../sass/search/_search.scss */ .search-holder .search .active-filter-display.off { visibility: hidden; opacity: 0; @@ -450,7 +453,7 @@ ul.tree { margin: 0; padding: 0; border: 0; } - /* line 294, ../sass/search/_search.scss */ + /* line 298, ../sass/search/_search.scss */ .search-holder .search .search-scroll { order: 3; margin-top: 4px; @@ -459,7 +462,7 @@ ul.tree { height: auto; max-height: 100%; position: relative; } - /* line 309, ../sass/search/_search.scss */ + /* line 313, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item { -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; @@ -469,10 +472,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 323, ../sass/search/_search.scss */ + /* line 327, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 327, ../sass/search/_search.scss */ + /* line 331, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -484,47 +487,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 349, ../sass/search/_search.scss */ + /* line 353, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 353, ../sass/search/_search.scss */ + /* line 357, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 356, ../sass/search/_search.scss */ + /* line 360, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 363, ../sass/search/_search.scss */ + /* line 367, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 366, ../sass/search/_search.scss */ + /* line 370, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 369, ../sass/search/_search.scss */ + /* line 373, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 377, ../sass/search/_search.scss */ + /* line 381, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 379, ../sass/search/_search.scss */ + /* line 383, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 383, ../sass/search/_search.scss */ + /* line 387, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .title-label { font-style: italic; font-size: .9em; opacity: 0.5; margin-left: 26px; line-height: 24px; } - /* line 393, ../sass/search/_search.scss */ + /* line 397, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 398, ../sass/search/_search.scss */ + /* line 402, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 403, ../sass/search/_search.scss */ + /* line 407, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-more-button { margin-top: 5px; margin-bottom: 5px; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 978e54f6d0..658ec1a6f3 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -110,16 +110,20 @@ visibility: hidden; opacity: 0; - transition: visibility .15s, opacity .15s; + transition: visibility .15s, opacity .15s, color .2s; &.content { visibility: visible; opacity: 1; } + &:hover { + color: lighten($colorItemFg, 20%); + } + // Modifications for existence of menu icon: - right: 16px; - padding-right: 2px; + right: 3px + 6px + 6px; + padding-right: 4px; } .menu-icon { @@ -131,7 +135,7 @@ color: $colorItemFg; font-size: 6px; padding: 6px; - padding-left: 4px; + padding-left: 3px; right: 0px; top: -3px;