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});
72 color: _palette(fg-bold);
75 font-weight: _font(weight-bold);
76 letter-spacing: _font(letter-spacing-alt);
77 margin: 0 0 (_size(element-margin) * 0.5) 0;
78 text-transform: uppercase;
82 input[type="password"],
89 @include vendor('appearance', 'none');
90 background: _palette(border-bg);
97 text-decoration: none;
105 border-color: _palette(highlight);
106 box-shadow: 0 0 0 2px _palette(highlight);
111 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(border)}' /></svg>");
112 background-size: 1.25rem;
113 background-repeat: no-repeat;
114 background-position: calc(100% - 1rem) center;
115 height: _size(element-height);
116 padding-right: _size(element-height);
117 text-overflow: ellipsis;
120 color: _palette(fg-bold);
121 background: _palette(bg);
126 background-color: transparent;
136 input[type="password"],
139 input[type="search"],
142 height: _size(element-height);
149 input[type="checkbox"],
150 input[type="radio"], {
151 @include vendor('appearance', 'none');
160 @include icon(false, solid);
163 display: inline-block;
164 font-weight: _font(weight);
165 padding-left: (_size(element-height) * 0.6) + 1em;
166 padding-right: 0.75em;
170 background: _palette(border-bg);
172 display: inline-block;
174 height: (_size(element-height) * 0.75);
177 line-height: (_size(element-height) * 0.75);
181 width: (_size(element-height) * 0.75);
187 background: _palette(fg-bold);
188 border-color: _palette(highlight);
196 box-shadow: 0 0 0 2px _palette(highlight);
201 input[type="checkbox"] {
208 input[type="radio"] {
216 ::-webkit-input-placeholder {
217 color: _palette(fg-light) !important;
222 color: _palette(fg-light) !important;
227 color: _palette(fg-light) !important;
231 :-ms-input-placeholder {
232 color: _palette(fg-light) !important;