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

[Search] Hover transitions

Browse Source
This commit is contained in:
slhale
2015-08-13 14:22:07 -07:00
parent c8694f182a
commit 74cf4d73d5
2 changed files with 43 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/general/res/sass/search/_search.scss
View File

@@ -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;