source: main/waeup-hugo/public/sass/components/_form.scss @ 16827

Last change on this file since 16827 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 4.8 KB
Line 
1///
2/// Dimension by HTML5 UP
3/// html5up.net | @ajlkn
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5///
6
7/* Form */
8
9        form {
10                $gutter: _size(element-margin) * 0.75;
11
12                margin: 0 0 (_size(element-margin) * 1.25) 0;
13
14                .field {
15                        margin: 0 0 ($gutter * 1) 0;
16
17                        &.half {
18                                width: 50%;
19                                float: left;
20                                padding: 0 0 0 ($gutter * 1 * 0.5);
21
22                                &.first {
23                                        padding: 0 ($gutter * 1 * 0.5) 0 0;
24                                }
25                        }
26                }
27
28                > .actions {
29                        margin: ($gutter * 1.25) 0 0 0 !important;
30                }
31
32                @include breakpoint(small) {
33                        .field {
34                                margin: 0 0 ($gutter * 0.75) 0;
35
36                                &.half {
37                                        padding: 0 0 0 ($gutter * 0.75 * 0.5);
38
39                                        &.first {
40                                                padding: 0 ($gutter * 0.75 * 0.5) 0 0;
41                                        }
42                                }
43                        }
44
45                        > .actions {
46                                margin: ($gutter * 1) 0 0 0 !important;
47                        }
48                }
49
50                @include breakpoint(xsmall) {
51                        .field {
52                                &.half {
53                                        width: 100%;
54                                        float: none;
55                                        padding: 0;
56
57                                        &.first {
58                                                padding: 0;
59                                        }
60                                }
61                        }
62                }
63        }
64
65        label {
66                color: _palette(fg-bold);
67                display: block;
68                font-size: 0.8rem;
69                font-weight: _font(weight);
70                letter-spacing: _font(letter-spacing);
71                line-height: 1.5;
72                margin: 0 0 (_size(element-margin) * 0.5) 0;
73                text-transform: uppercase;
74        }
75
76        input[type="text"],
77        input[type="password"],
78        input[type="email"],
79        input[type="tel"],
80        select,
81        textarea {
82                @include vendor('appearance', 'none');
83                @include vendor('transition', (
84                        'border-color #{_duration(transition)} ease-in-out',
85                        'box-shadow #{_duration(transition)} ease-in-out',
86                        'background-color #{_duration(transition)} ease-in-out'
87                ));
88                background: transparent;
89                border-radius: _size(border-radius);
90                border: solid _size(border-width) _palette(border);
91                color: inherit;
92                display: block;
93                outline: 0;
94                padding: 0 1rem;
95                text-decoration: none;
96                width: 100%;
97
98                &:invalid {
99                        box-shadow: none;
100                }
101
102                &:focus {
103                        background: _palette(border-bg);
104                        border-color: _palette(fg-bold);
105                        box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
106                }
107        }
108
109        select {
110                option {
111                        background: _palette(bg);
112                        color: _palette(fg);
113                }
114        }
115
116        .select-wrapper {
117                @include icon;
118                display: block;
119                position: relative;
120
121                &:before {
122                        color: _palette(border);
123                        content: '\f107';
124                        display: block;
125                        height: _size(element-height);
126                        //line-height: _size(element-height);
127                        line-height: calc(#{_size(element-height)} + 0em);
128                        pointer-events: none;
129                        position: absolute;
130                        right: 0;
131                        text-align: center;
132                        top: 0;
133                        width: _size(element-height);
134                }
135
136                select::-ms-expand {
137                        display: none;
138                }
139        }
140
141        input[type="text"],
142        input[type="password"],
143        input[type="email"],
144        select {
145                height: _size(element-height);
146        }
147
148        textarea {
149                padding: 0.75rem 1rem;
150        }
151
152        input[type="checkbox"],
153        input[type="radio"], {
154                @include vendor('appearance', 'none');
155                display: block;
156                float: left;
157                margin-right: -2rem;
158                opacity: 0;
159                width: 1rem;
160                z-index: -1;
161
162                & + label {
163                        @include icon;
164                        @include vendor('user-select', 'none');
165                        color: _palette(fg);
166                        cursor: pointer;
167                        display: inline-block;
168                        font-size: 0.8rem;
169                        font-weight: _font(weight);
170                        margin: 0 0 (_size(element-margin) * 0.25) 0;
171                        padding-left: (_size(element-height) * 0.6) + 1rem;
172                        padding-right: 0.75rem;
173                        position: relative;
174
175                        &:before {
176                                @include vendor('transition', (
177                                        'border-color #{_duration(transition)} ease-in-out',
178                                        'box-shadow #{_duration(transition)} ease-in-out',
179                                        'background-color #{_duration(transition)} ease-in-out'
180                                ));
181                                border-radius: _size(border-radius);
182                                border: solid _size(border-width) _palette(border);
183                                content: '';
184                                display: inline-block;
185                                height: (_size(element-height) * 0.6);
186                                left: 0;
187                                //line-height: (_size(element-height) * 0.575);
188                                line-height: calc(#{_size(element-height) * 0.575} + 0em);
189                                position: absolute;
190                                text-align: center;
191                                top: -0.125rem;
192                                width: (_size(element-height) * 0.6);
193                        }
194                }
195
196                &:checked + label {
197                        &:before {
198                                background: _palette(fg-bold) !important;
199                                border-color: _palette(fg-bold) !important;
200                                color: _palette(bg);
201                                content: '\f00c';
202                        }
203                }
204
205                &:focus + label {
206                        &:before {
207                                background: _palette(border-bg);
208                                border-color: _palette(fg-bold);
209                                box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
210                        }
211                }
212        }
213
214        input[type="checkbox"] {
215                & + label {
216                        &:before {
217                                border-radius: _size(border-radius);
218                        }
219                }
220        }
221
222        input[type="radio"] {
223                & + label {
224                        &:before {
225                                border-radius: 100%;
226                        }
227                }
228        }
229
230        ::-webkit-input-placeholder {
231                color: _palette(fg-light) !important;
232                opacity: 1.0;
233        }
234
235        :-moz-placeholder {
236                color: _palette(fg-light) !important;
237                opacity: 1.0;
238        }
239
240        ::-moz-placeholder {
241                color: _palette(fg-light) !important;
242                opacity: 1.0;
243        }
244
245        :-ms-input-placeholder {
246                color: _palette(fg-light) !important;
247                opacity: 1.0;
248        }
249
250        .formerize-placeholder {
251                color: _palette(fg-light) !important;
252                opacity: 1.0;
253        }
Note: See TracBrowser for help on using the repository browser.