Project

General

Profile

1
/* forms */
2
select,
3
textarea,
4
input:not([type]),
5
input[type="text"],
6
input[type="password"],
7
input[type="datetime"],
8
input[type="datetime-local"],
9
input[type="date"],
10
input[type="month"],
11
input[type="time"],
12
input[type="week"],
13
input[type="number"],
14
input[type="email"],
15
input[type="url"],
16
input[type="search"],
17
input[type="tel"],
18
input[type="color"] {
19
    outline: none;
20
    &.md-input {
21
        border-radius: 0;
22
        border-width: 0 0 1px;
23
        border-style: solid;
24
        border-color: @border_color;
25
        .md_font(400,15px,18px);
26
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
27
        box-sizing: border-box;
28
        padding: 12px 4px;
29
        background: transparent;
30
        width: 100%;
31
        display: block;
32
        &.md-input-danger {
33
            border-color: @danger_color;
34
            &:focus {
35
                border-bottom-color: @danger_color;
36
            }
37
        }
38
        &.md-input-success {
39
            border-color: @success_color;
40
            &:focus {
41
                border-bottom-color: @success_color;
42
            }
43
        }
44
        &:focus {
45
            background: transparent;
46
            border-color: @border_color;
47
        }
48
        &-small {
49
            padding: 4px;
50
        }
51
        &.uk-form-width {
52
            &-mini {
53
                width: 40px;
54
            }
55
            &-small {
56
                width: 130px;
57
            }
58
            &-medium {
59
                width: 200px;
60
            }
61
            &-large {
62
                width: 500px;
63
            }
64
        }
65
    }
66
}
67

    
68
select.md-input {
69
    &.uk-form-width-mini {
70
        width: 65px;
71
    }
72
}
73

    
74
.md-input {
75
    &-width-small {
76
        min-width: 80px !important;
77
    }
78
    &-width-medium {
79
        min-width: 160px !important;
80
    }
81
    &-width-large {
82
        min-width: 320px !important;
83
    }
84
}
85

    
86
textarea {
87
    &.md-input {
88
        min-height: 80px;
89
        resize: none;
90
        overflow: hidden;
91
        transition: height 200ms ease-out;
92
        line-height: 24px;
93
    }
94
    &.no_autosize {
95
        min-height: inherit;
96
        overflow: auto;
97
        transition: none;
98
        resize: both;
99
    }
100
}
101

    
102
.md-input-wrapper {
103
    position: relative;
104
    padding-top: 4px;
105
    width: 100%;
106
    display: block;
107
    .md-input-bar {
108
        display: block;
109
        position: absolute;
110
        bottom: 0;
111
        left: 0;
112
        width: 100%;
113
        &:before,
114
        &:after {
115
            content: '';
116
            display: block;
117
            position: absolute;
118
            bottom: 0;
119
            width: 0;
120
            height: 2px;
121
            background: @primary_color_dark;
122
            transition: width 400ms @md_easing;
123
        }
124
        &:before {
125
            left: 50%
126
        }
127
        &:after {
128
            right: 50%
129
        }
130
        &.uk-form-width {
131
            &-mini {
132
                width: 40px;
133
            }
134
            &-small {
135
                width: 130px;
136
            }
137
            &-medium {
138
                width: 200px;
139
            }
140
            &-large {
141
                width: 500px;
142
            }
143
        }
144
    }
145
    > label {
146
        color: @text_secondary_color;
147
        position: absolute;
148
        top: 16px;
149
        left: 4px;
150
        right: 0;
151
        pointer-events: none;
152
        transition: all 150ms ease-out;
153
    }
154
    + * {
155
        margin-top: 10px;
156
    }
157
    &.md-input-wrapper-disabled {
158
        > label {
159
            color: @input_disabled_color;
160
        }
161
    }
162
    &-count {
163
        padding-bottom: 24px;
164
        .md-input-bar {
165
            bottom: 24px;
166
        }
167
        .text-count-wrapper {
168
            font-size: 12px;
169
            position: absolute;
170
            right: 0;
171
            bottom: 0;
172
            opacity: 0;
173
            transition: opacity 200ms ease-in;
174
            .md-input-wrapper-count > & {
175
                position: absolute;
176
                bottom: 0;
177
                right: 0;
178
            }
179
        }
180

    
181
    }
182
}
183

    
184
.md-input-filled,
185
.md-input-focus {
186
    > label {
187
        top: -6px;
188
        font-size: 12px;
189
    }
190
    &.md-input-wrapper-count {
191
        .text-count-wrapper {
192
            opacity: 1;
193
        }
194
    }
195
}
196
.md-input-focus {
197
    .md-input-bar:before,
198
    .md-input-bar:after {
199
        width: 50%;
200
    }
201
}
202

    
203
.md-input-wrapper-danger {
204
    .md-input-bar {
205
        &:before,
206
        &:after {
207
            background: @danger_color;
208
        }
209
    }
210
    &.md-input-wrapper-count {
211
        .text-count-wrapper {
212
            color: @danger_color;
213
        }
214
    }
215
}
216

    
217
.md-input-wrapper-success {
218
    .md-input-bar {
219
        &:before,
220
        &:after {
221
            background: @success_color;
222
        }
223
    }
224
    &.md-input-wrapper-count {
225
        .text-count-wrapper {
226
            color: @success_color;
227
        }
228
    }
229
}
230

    
231
.md-form-group {
232
    position: relative;
233
}
234

    
235
label.md-label {
236
    color: #999;
237
    padding: 0 6px;
238
    font-size: 11px;
239
}
(4-4/12)