From 74cf4d73d581eb3ac5c2842a12444d5b9853d0bb Mon Sep 17 00:00:00 2001 From: slhale Date: Thu, 13 Aug 2015 14:22:07 -0700 Subject: [PATCH] [Search] Hover transitions --- platform/commonUI/general/res/css/tree.css | 67 ++++++++++--------- .../general/res/sass/search/_search.scss | 12 ++-- 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 7fff207df2..88a21665c2 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -297,8 +297,8 @@ ul.tree { width: 0; height: 0; margin-top: -19px; - transition: visibility .15s, opacity .15s; } - /* line 73, ../sass/search/_search.scss */ + transition: visibility .15s, opacity .15s, color .2s; } + /* line 72, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-icon.content { visibility: hidden; opacity: 0; } @@ -307,6 +307,9 @@ ul.tree { visibility: hidden; opacity: 0; } /* line 86, ../sass/search/_search.scss */ + .search-holder .search .search-bar .search-input:hover + div.search-icon { + color: #a6a6a6; } + /* line 90, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon { position: absolute; display: block; @@ -322,11 +325,11 @@ ul.tree { transition: visibility .15s, opacity .15s; right: 16px; padding-right: 2px; } - /* line 106, ../sass/search/_search.scss */ + /* line 110, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content { visibility: visible; opacity: 1; } - /* line 116, ../sass/search/_search.scss */ + /* line 120, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon { position: absolute; display: block; @@ -338,41 +341,41 @@ ul.tree { right: 0px; top: -3px; transition: color .2s; } - /* line 132, ../sass/search/_search.scss */ + /* line 136, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover { color: #a6a6a6; } - /* line 137, ../sass/search/_search.scss */ + /* line 141, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder { float: right; margin-top: 17px; left: -25px; } - /* line 142, ../sass/search/_search.scss */ + /* line 146, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu { border-top: 0; } - /* line 145, ../sass/search/_search.scss */ + /* line 149, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px; font-size: 0.8em; } - /* line 154, ../sass/search/_search.scss */ + /* line 158, ../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: 3px; } - /* line 167, ../sass/search/_search.scss */ + /* line 171, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item .search-menu-glyph { color: white; } - /* line 175, ../sass/search/_search.scss */ + /* line 179, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder .search-menu .search-menu-item.special { font-weight: bold; - background-color: gray; } - /* line 179, ../sass/search/_search.scss */ + background-color: #737373; } + /* line 183, ../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 188, ../sass/search/_search.scss */ + /* line 192, ../sass/search/_search.scss */ .search-holder .search .search-bar .search-menu-holder:after { position: absolute; top: -6px; @@ -382,18 +385,18 @@ ul.tree { border-bottom: 6px solid #5e5e5e; border-left: 6px solid transparent; content: ''; } - /* line 201, ../sass/search/_search.scss */ + /* line 205, ../sass/search/_search.scss */ .search-holder .search .search-bar .menu-icon:hover + div.search-menu-holder { visibility: visible; } - /* line 204, ../sass/search/_search.scss */ + /* line 208, ../sass/search/_search.scss */ .search-holder .search .search-bar div.search-menu-holder:hover { visibility: visible; } - /* line 209, ../sass/search/_search.scss */ + /* line 213, ../sass/search/_search.scss */ .search-holder .search .search-scroll { top: 25px; overflow-y: auto; padding-right: 5px; } - /* line 217, ../sass/search/_search.scss */ + /* line 221, ../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; @@ -403,10 +406,10 @@ ul.tree { border-radius: 2px; padding-top: 4px; padding-bottom: 2px; } - /* line 231, ../sass/search/_search.scss */ + /* line 235, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label { margin-left: 6px; } - /* line 235, ../sass/search/_search.scss */ + /* line 239, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label .title-label { display: inline-block; position: absolute; @@ -418,47 +421,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 257, ../sass/search/_search.scss */ + /* line 261, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected { background: #005177; color: #fff; } - /* line 261, ../sass/search/_search.scss */ + /* line 265, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .view-control { color: #0099cc; } - /* line 264, ../sass/search/_search.scss */ + /* line 268, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { color: #fff; } - /* line 271, ../sass/search/_search.scss */ + /* line 275, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 274, ../sass/search/_search.scss */ + /* line 278, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { display: block; } - /* line 277, ../sass/search/_search.scss */ + /* line 281, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { color: #33ccff; } - /* line 285, ../sass/search/_search.scss */ + /* line 289, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon { position: relative; } - /* line 287, ../sass/search/_search.scss */ + /* line 291, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading { pointer-events: none; margin-left: 6px; } - /* line 291, ../sass/search/_search.scss */ + /* line 295, ../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 301, ../sass/search/_search.scss */ + /* line 305, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon.loading .wait-spinner { margin-left: 6px; } - /* line 306, ../sass/search/_search.scss */ + /* line 310, ../sass/search/_search.scss */ .search-holder .search .search-scroll .load-icon:not(.loading) { cursor: pointer; } - /* line 311, ../sass/search/_search.scss */ + /* line 315, ../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 1f01f3a613..8ba5f1f839 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -67,8 +67,7 @@ // Line up icon with text input vertically margin-top: -$textInputHeight; - // Text focus display transition - transition: visibility .15s, opacity .15s; + transition: visibility .15s, opacity .15s, color .2s; &.content { // Make icon invisible whenever there is text input @@ -77,12 +76,17 @@ } } + // Make icon invisible when the text input is focused .search-input:focus + div.search-icon { - // Make icon invisible when the text input is focused visibility: hidden; opacity: 0; } + // Make icon lighten when hovering over search bar + .search-input:hover + div.search-icon { + color: lighten($colorItemFg, 20%); + } + .clear-icon { position: absolute; display: block; @@ -174,7 +178,7 @@ &.special { font-weight: bold; - background-color: lighten($colorBodyBg, 30%); + background-color: lighten($colorBodyBg, 25%); .search-menu-label { font-size: 1.1em;