1 | @import 'mixins';
|
2 | @import 'variables';
|
3 |
|
4 | .form {
|
5 | border-radius: $border-radius;
|
6 | background: $neutral-lighter;
|
7 | }
|
8 |
|
9 | .form-panel {
|
10 | transition: all $animation-duration $animation-easing;
|
11 |
|
12 | margin: 0 auto;
|
13 | border: 0;
|
14 | width: 100%;
|
15 | max-width: $sm-min / 2;
|
16 | padding: 0;
|
17 |
|
18 | &[disabled] {
|
19 | @include filter(grayscale(100%));
|
20 | }
|
21 |
|
22 | &.xs { max-width: $xs-min / 2; }
|
23 | &.sm { max-width: $sm-min / 2; }
|
24 | &.md { max-width: $md-min / 2; }
|
25 | &.lg { max-width: $lg-min / 2; }
|
26 | &.xl { max-width: $xl-min / 2; }
|
27 | }
|
28 |
|
29 | .form-input {
|
30 | margin-bottom: 8px;
|
31 | border: 0;
|
32 | border-bottom: 2px solid $primary;
|
33 | border-radius: $border-radius;
|
34 | padding: 9px;
|
35 | width: 100%;
|
36 | font-family: $font-family;
|
37 | font-size: $font-size;
|
38 | }
|
39 |
|
40 | .form-button {
|
41 | border: 0;
|
42 | border-radius: $border-radius;
|
43 | background: $primary;
|
44 | padding: 8px 12px;
|
45 | width: 50%;
|
46 | color: $neutral-lighter;
|
47 | }
|