2 /// Massively by HTML5 UP
3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
10 margin: 0 0 _size(element-margin) 0;
17 $gutter: (_size(element-margin) * 0.75);
19 @include vendor('display', 'flex');
20 @include vendor('flex-wrap', 'wrap');
21 width: calc(100% + #{$gutter * 2});
22 margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
25 @include vendor('flex-grow', '0');
26 @include vendor('flex-shrink', '0');
27 padding: $gutter 0 0 $gutter;
28 width: calc(100% - #{$gutter * 1});
31 width: calc(50% - #{$gutter * 0.5});
35 width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
39 width: calc(25% - #{$gutter * 0.25});
44 @include breakpoint('<=xsmall') {
46 $gutter: (_size(element-margin) * 0.75);
48 width: calc(100% + #{$gutter * 2});
49 margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
52 padding: $gutter 0 0 $gutter;
53 width: calc(100% - #{$gutter * 1});
56 width: calc(100% - #{$gutter * 1});
60 width: calc(100% - #{$gutter * 1});
64 width: calc(100% - #{$gutter * 1});
73 font-family: _font(family-heading);
74 font-weight: _font(weight-heading);
76 letter-spacing: 0.075em;
78 text-transform: uppercase;
79 margin: 0 0 (_size(element-margin) * 0.375) 0;
81 @include breakpoint('<=medium') {
87 input[type="password"],
91 @include vendor('appearance', 'none');
92 background: transparent;
99 text-decoration: none;
108 background-size: 1.25rem;
109 background-repeat: no-repeat;
110 background-position: calc(100% - 1rem) center;
111 height: _size(element-height);
112 padding-right: _size(element-height);
113 text-overflow: ellipsis;
117 background-color: transparent;
127 input[type="password"],
130 height: _size(element-height);
134 padding: 0.75rem 1rem;
137 input[type="checkbox"],
138 input[type="radio"], {
139 @include vendor('appearance', 'none');
150 display: inline-block;
153 font-family: _font(family);
154 text-transform: none;
155 font-weight: _font(weight);
156 padding-left: (_size(element-height) * 0.6) + 1rem;
164 display: inline-block;
165 height: (_size(element-height) * 0.6);
167 line-height: (_size(element-height) * 0.575);
171 width: (_size(element-height) * 0.6);
182 input[type="checkbox"] {
190 input[type="radio"] {
198 ::-webkit-input-placeholder {
210 :-ms-input-placeholder {
214 @mixin color-form($p: null) {
216 color: _palette($p, fg-bold);
220 input[type="password"],
224 border-color: _palette($p, border);
227 border-color: _palette($p, accent);
232 background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette($p, border)}' /></svg>");
235 background-color: _palette($p, bg);
236 color: _palette($p, fg);
242 color: _palette($p, border);
246 input[type="checkbox"],
247 input[type="radio"], {
249 color: _palette($p, fg);
252 border-color: _palette($p, border);
258 background-color: _palette($p, fg-bold);
259 border-color: _palette($p, fg-bold);
260 color: _palette($p, bg);
266 border-color: _palette($p, accent);
271 ::-webkit-input-placeholder {
272 color: _palette($p, fg-light) !important;
276 color: _palette($p, fg-light) !important;
280 color: _palette($p, fg-light) !important;
283 :-ms-input-placeholder {
284 color: _palette($p, fg-light) !important;
287 .formerize-placeholder {
288 color: _palette($p, fg-light) !important;