blob: 52f410a61b2004c9b2c5bd9fadd1c6b068587e99 [file] [log] [blame]
Michael Landoefa037d2017-02-19 12:57:33 +02001$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}