aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_expandableInput.scss
diff options
context:
space:
mode:
authorAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
committerAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
commit280f8015d06af1f41a3ef12e8300801c7a5e0d54 (patch)
tree9c1d3978c04cd28068f02073038c936bb49ca9e0 /openecomp-ui/resources/scss/components/_expandableInput.scss
parentfd3821dad11780d33c5373d74c957c442489945e (diff)
[SDC-29] Amdocs OnBoard 1707 initial commit.
Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components/_expandableInput.scss')
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss108
1 files changed, 51 insertions, 57 deletions
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52f410a61b..52b72d7c91 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,61 +1,55 @@
-$transitionLength: 0.5s;
-
-@mixin expand-transition($tl){
- transition: width $tl, background-color $tl, cursor $tl;
-}
-
-@mixin color-transition($tl){
- transition: color $tl;
-}
-
-.expandable-input-wrapper {
- display: flex;
- &:hover{
- .form-control {
- border-color: $gray;
- }
- }
- .expandable-input-control {
- flex: 1 1;
- margin: 0;
- .form-control {
- border-radius: 20px;
- }
- align-self: center;
- }
- .expandable-active {
- @include expand-transition($transitionLength);
- width: 215px;
- cursor: text;
- }
- .expandable-not-active {
- @include expand-transition($transitionLength);
- width: 28px;
- cursor: pointer;
- background-color: transparent;
- color: transparent;
+.expandable-input-top {
+ display: flex;
+ height: 22px;
+ .svg-icon-wrapper {
+ height: 17px;
+ width: 17px;
}
-
- .expandable-icon {
- @include color-transition($transitionLength);
- position: relative;
- left: -20px;
- align-self: center;
- width: 0;
- cursor: pointer;
- color: $dark-gray;
- }
-
- .expandable-close-button{
- @extend .expandable-icon;
- color: $gray;
- opacity: 0.5;
- &:hover {
- opacity: 1;
+ .expandable-input-wrapper {
+ display: flex;
+ .svg-icon.search {
+ height: 17px;
+ width: 17px;
+ }
+ &.closed {
+ .svg-icon.search {
+ transition: fill 0.5s ease-in;
+ fill: $blue;
+ cursor: pointer;
+ &:hover {
+ transition: fill 0.5s ease-in;
+ fill: $dark-blue;
+ }
+ }
+ }
+ &.opened {
+ .svg-icon-wrapper {
+ margin-left: 3px;
+ }
+ .svg-icon.search {
+ fill: $dark-blue;
+ }
+ .svg-icon.close {
+ margin-left: 7px;
+ height: 10px;
+ width: 10px;
+ opacity: 0.6;
+ fill: $dark-gray;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ .expandable-input-control {
+ .form-control {
+ border: none;
+ background-color: transparent;
+ border-radius: 0;
+ border-bottom: 1px solid $gray;
+ height: 22px;
+ padding: 0 5px;
+ }
+ margin: 0;
}
- }
- .expandable-icon-active {
- @include color-transition($transitionLength);
- color: $blue;
}
}