eSales Media Git repositories
Browse code

Progress

Benjamin Roth authored on21/02/2023 19:42:19
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/form.scss
History View file @12e841b
... ... 
@@ -6,12 +6,6 @@
6 6 
  * legends accordingly
7 7 
  */
8 8
9 
-*:not(.widget) {
10 
-  > fieldset {
11 
-    clear: left;
12 
-  }
13 
-}
14 
-
15 9 
 legend {
16 10 
   width: 100%;
17 11 
   display: block;
... ... 
@@ -30,6 +24,62 @@ select {
30 24 
 }
31 25
32 26 
 /**
27 
+ * Magic Labels
28 
+ */
29 
+.widget {
30 
+
31 
+  &:not(.widget-submit):not(.widget-captcha) {
32 
+    display: flex;
33 
+    flex-flow: column-reverse nowrap;
34 
+  }
35 
+
36 
+  &.widget-text,
37 
+  &.widget-textarea,
38 
+  &.widget-select {
39 
+
40 
+
41 
+    label {
42 
+      display: block;
43 
+      position: relative;
44 
+      @include transition(all 0.25s);
45 
+      width: fit-content;
46 
+      top: 0;
47 
+      left: 0;
48 
+    }
49 
+
50 
+    input,
51 
+    textarea {
52 
+      &::placeholder {
53 
+        color: transparent;
54 
+      }
55 
+      &:placeholder-shown ~ label {
56 
+        top: calc(#{$field-height/2} + 1em);
57 
+        left: 10px;
58 
+        cursor: text;
59 
+      }
60 
+      &:focus {
61 
+        ~ label {
62 
+          top: 0;
63 
+          left: 0;
64 
+        }
65 
+      }
66 
+    }
67 
+
68 
+    select {
69 
+
70 
+      &:empty {
71 
+        color: transparent;
72 
+      }
73 
+
74 
+      option[value=""],
75 
+      option:not([value]) {
76 
+        color: transparent;
77 
+      }
78 
+    }
79 
+  }
80 
+}
81 
+
82 
+/**
33 83 
  * Placeholders
34 84 
  */
35 85 
 ::-webkit-input-placeholder { /* Webkit Browsers */
... ... 
@@ -101,8 +151,6 @@ input[type=number] {
101 151 
  * Widget
102 152 
  */
103 153 
 .widget {
104 
-  margin-bottom: 15px;
105 
-  min-height: font-size($field-height+(1.75*10px));
106 154
107 155 
   input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
108 156 
   input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
... ... 
@@ -191,31 +239,38 @@ textarea {
191 239 
  */
192 240
193 241 
 .formbody {
194 
-  @include cf;
195 242
196 
-  label {
197 
-    color: $label-color;
198 
-    display: block;
199 
-    margin-bottom: 0.25em;
200 
-    padding-top: 0.5em;
201 
-    text-transform: uppercase;
202 
-    font-size: font-size(10px);
203 
-    letter-spacing: 0.1em;
204 
-    line-height: 1.5;
205 
-    font-weight: 600;
206 
-
207 
-    .mandatory {
208 
-      vertical-align: middle;
209 
-      font-size: font-size(18px);
210 
-      font-weight: 300;
211 
-      color: $color-link;
212 
-      line-height: 0;
213 
-    }
214 
-  }
243 
+  align-items: start;
244 
+
215 245 
   .widget {
246 
+    label {
247 
+      font-family: $font-family-alternate;
248 
+      color: $label-color;
249 
+      display: block;
250 
+      margin-bottom: 0.25em;
251 
+      padding-top: 0.5em;
252 
+      text-transform: uppercase;
253 
+      font-size: font-size(10px);
254 
+      letter-spacing: 0.125em;
255 
+      line-height: 1.5;
256 
+      font-weight: 700;
257 
+
258 
+      .mandatory {
259 
+        vertical-align: middle;
260 
+        font-size: font-size(18px);
261 
+        font-weight: 300;
262 
+        color: $color-link;
263 
+        line-height: 0;
264 
+      }
265 
+    }
266 
+
216 267 
     &.lblp {
217 268 
       padding-top: font-size(10px*2.25);
218 269 
     }
270 
+
271 
+    .captcha_text {
272 
+
273 
+    }
219 274 
   }
220 275 
 }
221 276
... ... 
@@ -283,6 +338,21 @@ select {
283 338 
   -ms-transition: all .15s linear;
284 339 
   -o-transition: all .15s linear;
285 340 
   transition: all .15s linear;
341 
+  font-family: $font-family-alternate;
342 
+  text-transform: uppercase;
343 
+  font-weight: 700;
344 
+  letter-spacing: 0.125em;
345 
+  color: $label-color;
346 
+  font-size: font-size(10px);
347 
+  option {
348 
+    font-family: $font-family-alternate;
349 
+    text-transform: uppercase;
350 
+    font-weight: 700;
351 
+    letter-spacing: 0.125em;
352 
+    color: $label-color;
353 
+    font-size: font-size(10px);
354 
+    zoom: 1.125;
355 
+  }
286 356 
 }
287 357 
 .select-wrapper {
288 358 
   position: relative;
... ... 
@@ -326,32 +396,52 @@ select {
326 396 
 .widget {
327 397 
   &.widget-checkbox,
328 398 
   &.widget-radio {
399 
+    padding-top: font-size(2.25*10px);
329 400 
     > fieldset {
330 
-      padding-left: 1.5em;
331 
-    }
332 401
333 
-    .options {
334 402 
       > span {
403 
+        padding: 0 0 0 1.75em;
404 
+        min-height: 1.5em;
405 
+        position: relative;
335 406 
         margin-bottom: 0.25em;
336 407 
         display: block;
337 
-        font-size: font-size(12px);
408 
+        font-size: font-size(14px);
409 
+      }
410 
+
411 
+      label {
412 
+        text-transform: none;
413 
+        letter-spacing: 0;
414 
+        font-family: $font-family;
415 
+        color: $field-color;
416 
+        line-height: 1.5;
417 
+        display: block;
418 
+        margin: 0;
419 
+        font-weight: 700;
420 
+        padding: 0;
421 
+        font-size: inherit;
422 
+
423 
+        .note {
424 
+          font-weight: 400;
425 
+        }
338 426 
       }
339 427 
     }
340 428
341 429 
     input[type="radio"],
342 430 
     input[type="checkbox"] {
343 
-      height: 2em;
344 
-      width: 2em;
345 
-      margin-left: -2.25em;
346 
-      margin-right: 5px;
431 
+      top: 0.125em;
432 
+      height: 1.25em;
433 
+      width: 1.25em;
434 
+      position: absolute;
435 
+      left: 0;
436 
+      font-size: inherit;
347 437 
     }
348 438
349 
-    label {
439 
+    /*label {
350 440 
       display: inline;
351 441 
       margin-bottom: 0;
352 442 
       font-size: font-size(12px);
353 443 
       font-weight: 600;
354 
-    }
444 
+    }*/
355 445
356 446 
     /*@supports(-webkit-appearance: none) or (-moz-appearance: none) {
357 447 
       input[type='checkbox'],
... ... 
@@ -519,7 +609,7 @@ input[type="submit"],
519 609 
 button[type="submit"],
520 610 
 .submit,
521 611 
 .button {
522 
-  @include button-outline();
612 
+  @include button();
523 613
524 614 
   &:not([data-icon]) {
525 615 
     @include button-no-icon;
Browse code

Initial commit

Benjamin Roth authored on07/11/2022 09:19:06
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/form.scss
History View file @6e83285
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,547 @@
1 
+@if not-imported("import_once_func") { @import "import_once_func"; }
2 
+@if not-imported("framework") { @import "framework"; }
3 
+
4 
+/**
5 
+ * Since fieldset borders are removed in the reset style sheet, adjust the
6 
+ * legends accordingly
7 
+ */
8 
+
9 
+*:not(.widget) {
10 
+  > fieldset {
11 
+    clear: left;
12 
+  }
13 
+}
14 
+
15 
+legend {
16 
+  width: 100%;
17 
+  display: block;
18 
+  font-weight: bold;
19 
+  border: 0;
20 
+}
21 
+
22 
+input,
23 
+textarea,
24 
+select {
25 
+  line-height: 150%;
26 
+  outline: none;
27 
+  font-size: $font-size-field;
28 
+  font-family: $font-family-form;
29 
+  font-weight: 400;
30 
+}
31 
+
32 
+/**
33 
+ * Placeholders
34 
+ */
35 
+::-webkit-input-placeholder { /* Webkit Browsers */
36 
+  color: $placeholder-color;
37 
+  font-size: $font-size-placeholder;
38 
+  text-transform: uppercase;
39 
+  opacity: 0.9;
40 
+  font-weight: 600;
41 
+}
42 
+
43 
+:-moz-placeholder { /* Firefox < 19 */
44 
+  color: $placeholder-color;
45 
+  font-size: $font-size-placeholder;
46 
+  text-transform: uppercase;
47 
+  opacity: 0.9;
48 
+  font-weight: 600;
49 
+
50 
+}
51 
+
52 
+::-moz-placeholder {  /* Firefox >= 19 */
53 
+  color: $placeholder-color;
54 
+  font-size: $font-size-placeholder;
55 
+  text-transform: uppercase;
56 
+  opacity: 0.9;
57 
+  font-weight: 600;
58 
+
59 
+}
60 
+
61 
+:-ms-input-placeholder { /* IE 10-11 */
62 
+  color: $placeholder-color !important;
63 
+  font-size: $font-size-placeholder !important;
64 
+  text-transform: uppercase !important;
65 
+  opacity: 0.9;
66 
+  font-weight: 600;
67 
+
68 
+}
69 
+
70 
+::-ms-input-placeholder { /* Edge (old) */
71 
+  color: $placeholder-color;
72 
+  font-size: $font-size-placeholder;
73 
+  text-transform: uppercase;
74 
+  opacity: 0.9;
75 
+  font-weight: 600;
76 
+
77 
+}
78 
+
79 
+::placeholder {  /* CSS 4 Draft */
80 
+  color: $placeholder-color;
81 
+  font-size: $font-size-placeholder;
82 
+  text-transform: uppercase;
83 
+  opacity: 0.9;
84 
+  font-weight: 600;
85 
+
86 
+}
87 
+
88 
+/* Chrome, Safari, Edge, Opera */
89 
+input::-webkit-outer-spin-button,
90 
+input::-webkit-inner-spin-button {
91 
+  -webkit-appearance: none;
92 
+  margin: 0;
93 
+}
94 
+
95 
+/* Firefox */
96 
+input[type=number] {
97 
+  -moz-appearance: textfield;
98 
+}
99 
+
100 
+/**
101 
+ * Widget
102 
+ */
103 
+.widget {
104 
+  margin-bottom: 15px;
105 
+  min-height: font-size($field-height+(1.75*10px));
106 
+
107 
+  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
108 
+  input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
109 
+    vertical-align: top;
110 
+  }
111 
+
112 
+  > .formelement {
113 
+    position: relative;
114 
+  }
115 
+
116 
+  &.icon {
117 
+    > .formelement {
118 
+      > input,
119 
+      > textarea {
120 
+        padding-right: 1.75em;
121 
+      }
122 
+      > .ico-wrapper {
123 
+        font-size: font-size(20px);
124 
+        cursor: default;
125 
+        position: absolute;
126 
+        top: 0;
127 
+        right: 0;
128 
+        height: 100%;
129 
+        width: 1.75em;
130 
+        border-radius: 0 .28571429rem .28571429rem 0;
131 
+
132 
+        > a {
133 
+          display: flex;
134 
+          align-items: center;
135 
+          justify-content: center;
136 
+          line-height: inherit;
137 
+          color: $color-text;
138 
+
139 
+          &:hover {
140 
+            color: $color-link;
141 
+          }
142 
+        }
143 
+
144 
+        &.link {
145 
+          cursor: pointer;
146 
+        }
147 
+      }
148 
+    }
149 
+  }
150 
+}
151 
+
152 
+/**
153 
+ * Text fields and textareas
154 
+ */
155 
+input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
156 
+input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
157 
+  display: inline-block;
158 
+  width: 100%;
159 
+  height: $field-height;
160 
+  line-height: #{$field-height - (2*$field-border-width) - (2*$field-padding-vertical)};
161 
+  padding: $field-padding;
162 
+  -webkit-box-sizing: border-box;
163 
+  -moz-box-sizing: border-box;
164 
+  box-sizing: border-box;
165 
+  color: $field-color;
166 
+  background: $field-background-color;
167 
+  border: $field-border-width solid $field-border-color;
168 
+  -webkit-border-radius: $field-radius;
169 
+  -moz-border-radius: $field-radius;
170 
+  border-radius: $field-radius;
171 
+  -webkit-transition: all .15s linear;
172 
+  -moz-transition: all .15s linear;
173 
+  -ms-transition: all .15s linear;
174 
+  -o-transition: all .15s linear;
175 
+  transition: all .15s linear;
176 
+
177 
+  &:focus {
178 
+    outline: 0;
179 
+    background: $field-background-color-hl;
180 
+    border-color: $field-border-color-hl;
181 
+  }
182 
+}
183 
+
184 
+
185 
+textarea {
186 
+  line-height: 1.35;
187 
+}
188 
+
189 
+/**
190 
+ * Label styling
191 
+ */
192 
+
193 
+.formbody {
194 
+  @include cf;
195 
+
196 
+  label {
197 
+    color: $label-color;
198 
+    display: block;
199 
+    margin-bottom: 0.25em;
200 
+    padding-top: 0.5em;
201 
+    text-transform: uppercase;
202 
+    font-size: font-size(10px);
203 
+    letter-spacing: 0.1em;
204 
+    line-height: 1.5;
205 
+    font-weight: 600;
206 
+
207 
+    .mandatory {
208 
+      vertical-align: middle;
209 
+      font-size: font-size(18px);
210 
+      font-weight: 300;
211 
+      color: $color-link;
212 
+      line-height: 0;
213 
+    }
214 
+  }
215 
+  .widget {
216 
+    &.lblp {
217 
+      padding-top: font-size(10px*2.25);
218 
+    }
219 
+  }
220 
+}
221 
+
222 
+/**
223 
+ * Fieldset styling
224 
+ */
225 
+.formbody > fieldset {
226 
+  margin-top: 1.5em;
227 
+
228 
+  &:first-of-type {
229 
+    margin-top: 0;
230 
+  }
231 
+
232 
+  legend {
233 
+    @include headline(font-size(18px));
234 
+  }
235 
+}
236 
+
237 
+
238 
+/**
239 
+ * Fix some width and height settings
240 
+ */
241 
+input[type="file"] {
242 
+  cursor: pointer;
243 
+}
244 
+
245 
+select, input[type="file"] {
246 
+  display: block;
247 
+}
248 
+
249 
+input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
250 
+  width: auto;
251 
+}
252 
+
253 
+textarea, select[multiple], select[size] {
254 
+  height: auto;
255 
+}
256 
+
257 
+select {
258 
+  -moz-appearance: none;
259 
+  -webkit-appearance: none;
260 
+  appearance: none;
261 
+  border: none;
262 
+}
263 
+select::-ms-expand {
264 
+  display: none;
265 
+}
266 
+
267 
+select {
268 
+  display: inline-block;
269 
+  width: 100%;
270 
+  height: $field-height;
271 
+  padding: $field-padding-vertical $field-padding-horizontal+25px $field-padding-vertical $field-padding-horizontal;
272 
+  -webkit-box-sizing: border-box;
273 
+  -moz-box-sizing: border-box;
274 
+  box-sizing: border-box;
275 
+  color: $field-color;
276 
+  background: $field-background-color;
277 
+  border: $field-border-width solid $field-border-color;
278 
+  -webkit-border-radius: $field-radius;
279 
+  -moz-border-radius: $field-radius;
280 
+  border-radius: $field-radius;
281 
+  -webkit-transition: all .15s linear;
282 
+  -moz-transition: all .15s linear;
283 
+  -ms-transition: all .15s linear;
284 
+  -o-transition: all .15s linear;
285 
+  transition: all .15s linear;
286 
+}
287 
+.select-wrapper {
288 
+  position: relative;
289 
+  display: inline-block;
290 
+  width: 100%;
291 
+  min-height: $field-height;
292 
+
293 
+  &:before,
294 
+  &:after {
295 
+    //@include icon('\e90a',font-size(20px));
296 
+    content: '';
297 
+    width: 1em;
298 
+    height: 1em;
299 
+    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M14.898 19.849c0.585 0.579 1.592 0.604 2.202 0.001l12.084-12.084 2.815 2.815-12.093 12.093c-2.055 2.027-5.656 2.13-7.815-0.001l-12.092-12.092 2.815-2.815c4.027 4.029 8.054 8.056 12.083 12.083z"/%3E%3C/svg%3E') 50% 50% no-repeat;
300 
+    position: absolute;
301 
+    right: 10px;
302 
+    top: 10px;
303 
+    pointer-events: none;
304 
+  }
305 
+  &:after {
306 
+    @include transition(all 0.25s);
307 
+    opacity: 0;
308 
+    visibility: hidden;
309 
+    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M14.898 19.849c0.585 0.579 1.592 0.604 2.202 0.001l12.084-12.084 2.815 2.815-12.093 12.093c-2.055 2.027-5.656 2.13-7.815-0.001l-12.092-12.092 2.815-2.815c4.027 4.029 8.054 8.056 12.083 12.083z"/%3E%3C/svg%3E') 50% 50% no-repeat;
310 
+  }
311 
+  &:hover {
312 
+    &:after {
313 
+      opacity: 1;
314 
+      visibility: visible;
315 
+    }
316 
+  }
317 
+
318 
+  /*select {
319 
+    vertical-align: top;
320 
+  }*/
321 
+}
322 
+/**
323 
+ * Checkboxes and radio buttons
324 
+ */
325 
+
326 
+.widget {
327 
+  &.widget-checkbox,
328 
+  &.widget-radio {
329 
+    > fieldset {
330 
+      padding-left: 1.5em;
331 
+    }
332 
+
333 
+    .options {
334 
+      > span {
335 
+        margin-bottom: 0.25em;
336 
+        display: block;
337 
+        font-size: font-size(12px);
338 
+      }
339 
+    }
340 
+
341 
+    input[type="radio"],
342 
+    input[type="checkbox"] {
343 
+      height: 2em;
344 
+      width: 2em;
345 
+      margin-left: -2.25em;
346 
+      margin-right: 5px;
347 
+    }
348 
+
349 
+    label {
350 
+      display: inline;
351 
+      margin-bottom: 0;
352 
+      font-size: font-size(12px);
353 
+      font-weight: 600;
354 
+    }
355 
+
356 
+    /*@supports(-webkit-appearance: none) or (-moz-appearance: none) {
357 
+      input[type='checkbox'],
358 
+      input[type='radio'] {
359 
+        --active: #275EFE;
360 
+        --active-inner: #fff;
361 
+        --focus: 2px rgba(39, 94, 254, .3);
362 
+        --border: #BBC1E1;
363 
+        --border-hover: #275EFE;
364 
+        --background: #fff;
365 
+        --disabled: #F6F8FF;
366 
+        --disabled-inner: #E1E6F9;
367 
+        -webkit-appearance: none;
368 
+        -moz-appearance: none;
369 
+        height: 21px;
370 
+        outline: none;
371 
+        display: inline-block;
372 
+        vertical-align: top;
373 
+        position: relative;
374 
+        margin: 0;
375 
+        cursor: pointer;
376 
+        border: 1px solid var(--bc, var(--border));
377 
+        background: var(--b, var(--background));
378 
+        transition: background .3s, border-color .3s, box-shadow .2s;
379 
+        &:after {
380 
+          content: '';
381 
+          display: block;
382 
+          left: 0;
383 
+          top: 0;
384 
+          position: absolute;
385 
+          transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
386 
+        }
387 
+        &:checked {
388 
+          --b: var(--active);
389 
+          --bc: var(--active);
390 
+          --d-o: .3s;
391 
+          --d-t: .6s;
392 
+          --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
393 
+        }
394 
+        &:disabled {
395 
+          --b: var(--disabled);
396 
+          cursor: not-allowed;
397 
+          opacity: .9;
398 
+          &:checked {
399 
+            --b: var(--disabled-inner);
400 
+            --bc: var(--border);
401 
+          }
402 
+          & + label {
403 
+            cursor: not-allowed;
404 
+          }
405 
+        }
406 
+        &:hover {
407 
+          &:not(:checked) {
408 
+            &:not(:disabled) {
409 
+              --bc: var(--border-hover);
410 
+            }
411 
+          }
412 
+        }
413 
+        &:focus {
414 
+          box-shadow: 0 0 0 var(--focus);
415 
+        }
416 
+        &:not(.switch) {
417 
+          width: 21px;
418 
+          &:after {
419 
+            opacity: var(--o, 0);
420 
+          }
421 
+          &:checked {
422 
+            --o: 1;
423 
+          }
424 
+        }
425 
+        & + label {
426 
+          font-size: 14px;
427 
+          line-height: 21px;
428 
+          display: inline-block;
429 
+          vertical-align: top;
430 
+          cursor: pointer;
431 
+          margin-left: 4px;
432 
+        }
433 
+      }
434 
+      input[type='checkbox'] {
435 
+        &:not(.switch) {
436 
+          border-radius: 7px;
437 
+          &:after {
438 
+            width: 5px;
439 
+            height: 9px;
440 
+            border: 2px solid var(--active-inner);
441 
+            border-top: 0;
442 
+            border-left: 0;
443 
+            left: 7px;
444 
+            top: 4px;
445 
+            transform: rotate(var(--r, 20deg));
446 
+          }
447 
+          &:checked {
448 
+            --r: 43deg;
449 
+          }
450 
+        }
451 
+        &.switch {
452 
+          width: 38px;
453 
+          border-radius: 11px;
454 
+          &:after {
455 
+            left: 2px;
456 
+            top: 2px;
457 
+            border-radius: 50%;
458 
+            width: 15px;
459 
+            height: 15px;
460 
+            background: var(--ab, var(--border));
461 
+            transform: translateX(var(--x, 0));
462 
+          }
463 
+          &:checked {
464 
+            --ab: var(--active-inner);
465 
+            --x: 17px;
466 
+          }
467 
+          &:disabled {
468 
+            &:not(:checked) {
469 
+              &:after {
470 
+                opacity: .6;
471 
+              }
472 
+            }
473 
+          }
474 
+        }
475 
+      }
476 
+      input[type='radio'] {
477 
+        border-radius: 50%;
478 
+        &:after {
479 
+          width: 19px;
480 
+          height: 19px;
481 
+          border-radius: 50%;
482 
+          background: var(--active-inner);
483 
+          opacity: 0;
484 
+          transform: scale(var(--s, .7));
485 
+        }
486 
+        &:checked {
487 
+          --s: .5;
488 
+        }
489 
+      }
490 
+    }*/
491 
+  }
492 
+}
493 
+
494 
+input[type="radio"], input[type="checkbox"] {
495 
+  margin: 0 3px 0 0;
496 
+}
497 
+
498 
+input[type="radio"], input[type="checkbox"], label {
499 
+  vertical-align: middle;
500 
+}
501 
+
502 
+/**
503 
+ * Handle disabled and read-only
504 
+ */
505 
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
506 
+  cursor: not-allowed;
507 
+  background: $field-background-color-ro;
508 
+}
509 
+
510 
+input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
511 
+  background: transparent;
512 
+}
513 
+
514 
+/**
515 
+ * Buttons
516 
+ */
517 
+input[type="submit"],
518 
+//input[type="button"],
519 
+button[type="submit"],
520 
+.submit,
521 
+.button {
522 
+  @include button-outline();
523 
+
524 
+  &:not([data-icon]) {
525 
+    @include button-no-icon;
526 
+  }
527 
+
528 
+  &.button-icon-only {
529 
+    @include button-icon-only;
530 
+  }
531 
+
532 
+  .-alt-color > & {
533 
+    @include button-outline($color: $color-stroke-grey, $border-color: $color-stroke-grey);
534 
+    @include button-no-icon;
535 
+  }
536 
+
537 
+  &.-big {
538 
+    padding: $button-padding-vertical*2 $button-padding-horizontal*2;
539 
+    height: $button-height*2;
540 
+    line-height: #{$button-height*2 - (2*$button-border-width) - (2*($button-padding-vertical*2))};
541 
+  }
542 
+}
543 
+
544 
+.button-block {
545 
+  display: block;
546 
+  width: 100%;
547 
+}