-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path5_select.styl
126 lines (124 loc) · 2.74 KB
/
5_select.styl
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
122
123
124
125
126
@require "./3_mixins"
/* Select Field
========================================================================== */
select
display: none
select.browser-default
display: block
select
background-color: $select-background
width: 100%
padding: $select-padding
border: $select-border
border-radius: $select-radius
height: $input-height
select:focus
outline: $select-focus
.input-field
& > select
display: block
position: absolute
width: 0
pointer-events: none
height: 0
top: 0
left: 0
opacity: 0
.select-label
position: absolute
.select-wrapper
&.valid
& > input.select-dropdown
$valid-input-style()
& + label:after
$custom-success-message()
&.invalid
& > input.select-dropdown
$invalid-input-style()
& + label:after
$custom-error-message()
&.valid + label,
&.invalid + label
width: 100%
pointer-events: none
& + label:after
$input-after-style()
position: relative
input.select-dropdown
position: relative
cursor: pointer
background-color: transparent
border: none
border-bottom: $input-border
outline: none
height: $input-height
line-height: $input-height
width: 100%
font-size: $input-font-size
margin: $input-margin
padding: 0
display: block
user-select: none
span.caret
color: initial
position: absolute
right: 0
top: 0
bottom: 0
height: 10px
margin: auto 0
font-size: 10px
line-height: 10px
& + label
position: absolute
top: -26px
font-size: $label-font-size
// Disabled styles
select:disabled
color: $input-disabled-color
.select-wrapper.disabled
span.caret,
& + label
color: $input-disabled-color
.select-wrapper input.select-dropdown:disabled
color: $input-disabled-color
cursor: default
user-select: none
.select-wrapper i
color: $select-disabled-color
.select-dropdown li.disabled,
.select-dropdown li.disabled > span,
.select-dropdown li.optgroup
color: $select-disabled-color
background-color: transparent
.select-dropdown.dropdown-content
li
&.active
background-color: transparent
&:hover
background-color: $select-option-hover
&.selected
background-color: $select-option-focus
// Prefix Icons
.prefix ~ .select-wrapper
margin-left: 3rem
width: 92%
width: calc(100% - 3rem)
.prefix ~ label
margin-left: 3rem
// Icons
.select-dropdown li
img
height: ($dropdown-item-height - 10)
width: ($dropdown-item-height - 10)
margin: 5px 15px
float: right
// Optgroup styles
.select-dropdown li.optgroup
border-top: 1px solid $dropdown-hover-bg-color
&.selected > span
color: rgba(0, 0, 0, 0.7)
& > span
color: rgba(0, 0, 0, 0.4)
& ~ li.optgroup-option
padding-left: 1rem