2 /// Phantom by HTML5 UP
\r
3 /// html5up.net | @ajlkn
\r
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
\r
10 margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0;
\r
22 margin: 0 0 (_size(element-margin) * 0.65) 0;
\r
23 vertical-align: top;
\r
28 width: calc(50% + #{_size(field-gutter) * 0.5}) !important;
\r
29 padding-left: _size(field-gutter);
\r
33 width: calc(50% - #{_size(field-gutter) * 0.5}) !important;
\r
41 .half:nth-last-child(2) {
\r
48 padding-top: (_size(element-margin) * 0.5);
\r
51 @include breakpoint(xsmall) {
\r
53 width: 100% !important;
\r
58 width: 100% !important;
\r
62 .half:nth-last-child(2) {
\r
63 margin: 0 0 (_size(element-margin) * 0.65) 0;
\r
71 font-weight: _font(weight-bold);
\r
72 margin: 0 0 (_size(element-margin) * 0.5) 0;
\r
76 input[type="password"],
\r
77 input[type="email"],
\r
81 @include vendor('appearance', 'none');
\r
82 background-color: transparent;
\r
85 border-bottom: solid _size(border-width) _palette(border);
\r
90 text-decoration: none;
\r
98 border-bottom-color: _palette(accent1);
\r
99 box-shadow: inset 0 -1px 0 0 _palette(accent1);
\r
106 position: relative;
\r
109 color: _palette(border);
\r
112 height: _size(element-height);
\r
113 line-height: _size(element-height);
\r
114 pointer-events: none;
\r
115 position: absolute;
\r
117 text-align: center;
\r
119 width: _size(element-height);
\r
122 select::-ms-expand {
\r
127 input[type="text"],
\r
128 input[type="password"],
\r
129 input[type="email"],
\r
131 height: _size(element-height);
\r
136 min-height: (_size(element-height) * 1.25);
\r
139 input[type="checkbox"],
\r
140 input[type="radio"], {
\r
141 @include vendor('appearance', 'none');
\r
144 margin-right: -2em;
\r
151 color: _palette(fg);
\r
153 display: inline-block;
\r
155 font-weight: _font(weight);
\r
156 padding-left: (_size(element-height) * 0.6) + 0.75em;
\r
157 padding-right: 0.75em;
\r
158 position: relative;
\r
161 border-radius: _size(border-radius);
\r
162 border: solid _size(border-width) _palette(border);
\r
164 display: inline-block;
\r
165 height: (_size(element-height) * 0.6);
\r
167 line-height: (_size(element-height) * 0.575);
\r
168 position: absolute;
\r
169 text-align: center;
\r
171 width: (_size(element-height) * 0.6);
\r
175 &:checked + label {
\r
177 background: _palette(fg);
\r
178 border-color: _palette(fg);
\r
179 color: _palette(bg);
\r
186 border-color: _palette(accent1);
\r
187 box-shadow: 0 0 0 _size(border-width) _palette(accent1);
\r
192 input[type="checkbox"] {
\r
195 border-radius: _size(border-radius);
\r
200 input[type="radio"] {
\r
203 border-radius: 100%;
\r