summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_expandableInput.scss
blob: 52f410a61b2004c9b2c5bd9fadd1c6b068587e99 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$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-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-icon-active {
		@include color-transition($transitionLength);
		color: $blue;
	}
}