summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_expandableInput.scss
diff options
context:
space:
mode:
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;
}
}