-
Notifications
You must be signed in to change notification settings - Fork 3
/
theme.widget.form.styl
95 lines (85 loc) · 2.62 KB
/
theme.widget.form.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
/**
* Stylesheet
*
* @namespace Lungo.Theme
* @class Layout
*
* @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
*/
form, .form
& label
color: darken(FORM_color, 50%)
font-weight: 300
& fieldset
background: #fff
border-bottom: 1px solid BACKGROUND
& .icon
color: #ccc
&.radius-top
border-radius (BORDER_radius * 2) (BORDER_radius * 2) 0 0
&.radius-bottom
border-radius 0 0 (BORDER_radius * 2) (BORDER_radius * 2)
&.radius
border-radius (BORDER_radius * 2)
&.shadow
border-bottom: 1px solid rgba(0,0,0,0.1)
& input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select, textarea, label.select
background-color: #fff
color: rgba(0, 0, 0, 0.75)
&.border
border: FORM_border solid FORM_color
// border-radius: FORM_border_radius
border-radius: 0.2em
&.error, &:required
color: DANGER !important
border-color: DANGER !important
&.success
color: SUCCESS !important
border-color: SUCCESS !important
&:focus, &:active, &:hover
color: THEME
border-color: THEME
&[disabled]
background: FORM_color
border-color: FORM_color
color: darken(FORM_color, 25%)
/* -------------------------- SELECT -------------------------- */
& select, label.select
&:after
color: FORM_color
&:focus, &:active, &:hover
&:after
color: THEME
/* -------------------------- RANGE -------------------------- */
& input[type=range]
background-color: FORM_color
color: darken(FORM_color, 25%)
border-radius: (FORM_border_radius / 2)
&:active
background-color: THEME !important
color: #fff
&::-webkit-slider-thumb
border-radius: 1em
background-color: darken(#fff, 2%)
border: 1px solid FORM_color
box-shadow: 0 1px 4px hsla(0, 0%,0%,.15)
/* -------------------------- PROGRESS -------------------------- */
& [data-progress]
background-color: #ddd
& .value
background-color: THEME
&, & .value
border-radius: (FORM_border_radius / 2)
/* -------------------------- CHECKBOX -------------------------- */
& input[type=checkbox]
background-color: darken(#fff, 2%)
border: 1px solid FORM_color
box-shadow: inset 0 0 0 1px FORM_color
&:after
background-color: #fff
border: 1px solid FORM_color
&:checked
border-color: SUCCESS
box-shadow: inset 0 0 0 13px SUCCESS
&:after
border-color: SUCCESS