input.less
1.64 KB
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
.hover(@color: @input-hover-border-color) {
border-color: tint(@color, 20%);
}
.active(@color: @input-hover-border-color) {
border-color: tint(@color, 20%);
outline: 0;
box-shadow: 0 0 0 2px fade(@color, 20%);
}
.disabled() {
background-color: @input-disabled-bg;
opacity: 1;
cursor: @cursor-disabled;
color: #ccc;
&:hover {
.hover(@input-border-color);
}
}
.input-large() {
padding: @input-padding-vertical-large @input-padding-horizontal;
height: @input-height-large;
}
.input-small() {
padding: @input-padding-vertical-small @input-padding-horizontal;
height: @input-height-small;
border-radius: @border-radius-small;
}
.input() {
display: inline-block;
width: 100%;
height: @input-height-base;
line-height: @line-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: @font-size-base;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
color: @input-color;
background-color: @input-bg;
background-image: none;
position: relative;
cursor: text;
.placeholder();
.transition3(border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out);
&:hover {
.hover();
}
&:focus {
.active();
}
&[disabled],
fieldset[disabled] & {
.disabled();
}
// Reset height for textarea
textarea& {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
// Size
&-large {
.input-large();
}
&-small {
.input-small();
}
}