blob: c4f7eed5b3a76a1fd3222434ce6b624befc1876d [file] [log] [blame]
Michael Daviscb8bb192017-02-09 15:45:13 -06001label, legend {
2 font-size:1em;
3 font-weight: 300;
4 margin: 0;
5 &.disabled {
6 color: $lightbg__grey;
7 }
8 .error {
9 font-size: .9em;
10 }
11}
12
13input[type='email'],
14input[type='number'],
15input[type='password'],
16input[type='search'],
17input[type='tel'],
18input[type='url'],
19input[type='text'],
20textarea {
21 border-radius: 0px;
Michael Davisdfad5d52017-07-20 14:53:46 -050022 border: 1px solid $lightbg__grey;
Michael Daviscb8bb192017-02-09 15:45:13 -060023 height: 3.1em;
Michael Davisdfad5d52017-07-20 14:53:46 -050024 transition: all 1s ease;
Michael Daviscb8bb192017-02-09 15:45:13 -060025 margin: 0 0 1em 0;
Michael Davisdfad5d52017-07-20 14:53:46 -050026 background: $lightbg__grey;
27 box-shadow: 0px 0px 0px;
Michael Daviscb8bb192017-02-09 15:45:13 -060028 &:focus {
Michael Davisdfad5d52017-07-20 14:53:46 -050029 border-color: $lightbg__accent;
30 box-shadow: 0px 0px 0px;
Michael Daviscb8bb192017-02-09 15:45:13 -060031 }
Michael Davisdfad5d52017-07-20 14:53:46 -050032 &:disabled, .disabled {
Michael Daviscb8bb192017-02-09 15:45:13 -060033 background: $field__disabled;
34 border: 1px solid $lightbg__grey;
35 }
36 &.input__error {
Michael Davisdfad5d52017-07-20 14:53:46 -050037 border-color: $error;
38 background: rgba(230, 35, 37, 0.1);
Michael Daviscb8bb192017-02-09 15:45:13 -060039 }
40}
41
42textarea { padding: .2em;
43 height: auto;}
Michael Davisdfad5d52017-07-20 14:53:46 -050044input[type="submit"] {
Michael Daviscb8bb192017-02-09 15:45:13 -060045 margin: 1em 0;
46 width: 100%;
47}
48
49//Custom select
50select{
51 border-radius: 0px;
52 height:auto;
53 @include fastTransition-all;
54 @include bgImage__arrowDown-primary;
55 &:focus {
56 border-color: $lightbg__accent;
57 @include bgImage__arrowDown-accent;
58 box-shadow: 0 0 0;
59 }
60}
Michael Davisdfad5d52017-07-20 14:53:46 -050061
62//Custom Checkbox and Radio
63.checkbox-custom,
64.radio-custom {
65 opacity: 0;
66 position: absolute;
67}
68
69.checkbox-custom, .checkbox-custom-label,
70.radio-custom,
71.radio-custom-label {
72 display: inline-block;
73 vertical-align: middle;
74 margin: .1em 0 .1em -.5em;
75 padding: .5em;
76 cursor: pointer;
77}
78
79.checkbox-custom-label, .radio-custom-label {
80 position: relative;
81 padding-left: 2em;
82
83}
84
85.checkbox-custom + .checkbox-custom-label:before,
86.radio-custom + .radio-custom-label:before {
87 content: '';
88 background: #fff;
89 border: 1px solid $lightbg__grey;
90 display: inline-block;
91 vertical-align: middle;
92 width: 16px;
93 height: 16px;
94 margin-right: 10px;
95 margin-top: -3px;
96 text-align: center;
97 position: absolute;
98 left: 9px;
99 top: 15px;
100}
101
102.checkbox-custom:checked + .checkbox-custom-label:after {
103 content: '\2713';
104 position: absolute;
105 left: 10px;
106 top: 3px;
107 font-size: 1em;
108 padding: 4px 0 0 2px;
109 color: $white;
110}
111
112.checkbox-custom:checked + .checkbox-custom-label:before {
113 background: $lightbg__primary;
114 @include fastTransition-all;
115}
116
117.radio-custom + .radio-custom-label:before {
118 border-radius: 50%;
119}
120
121.radio-custom:checked + .radio-custom-label:before {
122 background: $lightbg__primary;
123 @include fastTransition-all;
124 box-shadow: inset 0px 0px 0px 2px #fff;
125}
126
127
128.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
129 outline: 1px solid $lightbg__grey; /* focus style */
130}