react-toolbox/components/input/style.scss at master · vageeshb/react-toolbox · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
@import "../base";
@import "./config";

.root {
  position: relative;
  padding: $input-padding 0;
  &.with-icon {
    margin-left: $input-icon-size;
  }
}

.icon {
  position: absolute;
  top: $input-icon-offset;
  left: -$input-icon-size;
  display: block;
  width: $input-icon-size;
  height: $input-icon-size;
  font-size: $input-icon-font-size !important;
  line-height: $input-icon-size !important;
  color: $input-text-label-color;
  text-align: center;
  transition: color $animation-duration $animation-curve-default;
}

.input {
  display: block;
  width: 100%;
  padding: $input-field-padding 0;
  font-size: $input-field-font-size;
  color: $color-text;
  background-color: $input-text-background-color;
  border: 0;
  border-bottom: 1px solid $input-text-bottom-border-color;
  outline: none;
  &:focus {
    ~ .bar:before, ~ .bar:after {
      width: 50%;
    }
    ~ .label:not(.fixed) {
      color: $input-text-highlight-color;
    }
    ~ .icon {
      color: $input-text-highlight-color;
    }
  }
  &:focus, &.filled {
    ~ .label:not(.fixed) {
      top: $input-focus-label-top;
      font-size: $input-label-font-size;
    }
  }
  &.filled ~ .label.fixed {
    display: none;
  }
}

.label {
  position: absolute;
  top: $input-padding + (1.5 * $input-field-padding);
  left: 0;
  font-size: $input-field-font-size;
  line-height: $input-field-font-size;
  color: $input-text-label-color;
  pointer-events: none;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: top, font-size, color;
}

.bar {
  position: relative;
  display: block;
  width: 100%;
  &:before, &:after {
    @include material-animation-default();
    position: absolute;
    bottom: 0;
    width: 0;
    height: 2px;
    content: "";
    background-color: $input-text-highlight-color;
    transition-property: width, background-color;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
}

.error {
  font-size: $input-label-font-size;
  line-height: 1.6 * $unit;
  color: $input-text-error-color;
}

.disabled > .input {
  color: $input-text-disabled-text-color;
  border-bottom-style: dotted;
}

.errored {
  padding-bottom: 0;
  > .input {
    border-bottom-color: $input-text-error-color;
    &:focus {
      ~ .label:not(.fixed) {
        color: $input-text-error-color;
      }
      ~ .bar:before, ~ .bar:after {
        background-color: $input-text-error-color;
      }
    }
  }
}

.hidden {
  display: none;
}