openecomp-ui/resources/scss/components/_expandableInput.scss

   1 $transitionLength: 0.5s;
   2
   3 @mixin expand-transition($tl){
   4         transition: width $tl, background-color $tl, cursor $tl;
   5 }
   6
   7 @mixin color-transition($tl){
   8         transition: color $tl;
   9 }
  10
  11 .expandable-input-wrapper {
  12   display: flex;
  13         &:hover{
  14                 .form-control {
  15                         border-color: $gray;
  16                 }
  17         }
  18   .expandable-input-control {
  19     flex: 1 1;
  20     margin: 0;
  21     .form-control {
  22                         border-radius: 20px;
  23     }
  24                 align-self: center;
  25   }
  26         .expandable-active {
  27                 @include expand-transition($transitionLength);
  28                 width: 215px;
  29                 cursor: text;
  30         }
  31         .expandable-not-active {
  32                 @include expand-transition($transitionLength);
  33                 width: 28px;
  34                 cursor: pointer;
  35                 background-color: transparent;
  36                 color: transparent;
  37         }
  38
  39   .expandable-icon {
  40                 @include color-transition($transitionLength);
  41     position: relative;
  42     left: -20px;
  43     align-self: center;
  44     width: 0;
  45                 cursor: pointer;
  46                 color: $dark-gray;
  47   }
  48
  49         .expandable-close-button{
  50                 @extend .expandable-icon;
  51                 color: $gray;
  52                 opacity: 0.5;
  53                 &:hover {
  54                         opacity: 1;
  55                 }
  56         }
  57         .expandable-icon-active {
  58                 @include color-transition($transitionLength);
  59                 color: $blue;
  60         }
  61 }