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_light(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;
79 @media screen and (prefers-color-scheme: dark) {
80 color: _palette_dark(fg-bold);
85 input[type="password"],
92 @include vendor('appearance', 'none');
93 background: _palette_light(border-bg);
100 text-decoration: none;
102 @media screen and (prefers-color-scheme: dark) {
103 background: _palette_dark(border-bg);
111 border-color: _palette_light(highlight);
112 box-shadow: 0 0 0 2px _palette_light(highlight);
113 @media screen and (prefers-color-scheme: dark) {
114 border-color: _palette_dark(highlight);
115 box-shadow: 0 0 0 2px _palette_dark(highlight);
121 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_light(border)}' /></svg>");
122 background-size: 1.25rem;
123 background-repeat: no-repeat;
124 background-position: calc(100% - 1rem) center;
125 height: _size(element-height);
126 padding-right: _size(element-height);
127 text-overflow: ellipsis;
128 @media screen and (prefers-color-scheme: dark) {
129 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_dark(border)}' /></svg>");
133 color: _palette_light(fg-bold);
134 background: _palette_light(bg);
135 @media screen and (prefers-color-scheme: dark) {
136 color: _palette_dark(fg-bold);
137 background: _palette_dark(bg);
143 background-color: transparent;
153 input[type="password"],
156 input[type="search"],
159 height: _size(element-height);
166 input[type="checkbox"],
167 input[type="radio"], {
168 @include vendor('appearance', 'none');
177 @include icon(false, solid);
178 color: _palette_light(fg);
180 display: inline-block;
181 font-weight: _font(weight);
182 padding-left: (_size(element-height) * 0.6) + 1em;
183 padding-right: 0.75em;
185 @media screen and (prefers-color-scheme: dark) {
186 color: _palette_dark(fg);
190 background: _palette_light(border-bg);
192 display: inline-block;
194 height: (_size(element-height) * 0.75);
197 line-height: (_size(element-height) * 0.75);
201 width: (_size(element-height) * 0.75);
202 @media screen and (prefers-color-scheme: dark) {
203 background: _palette_dark(border-bg);
210 background: _palette_light(fg-bold);
211 border-color: _palette_light(highlight);
213 color: _palette_light(bg);
214 @media screen and (prefers-color-scheme: dark) {
215 background: _palette_dark(fg-bold);
216 border-color: _palette_dark(highlight);
217 color: _palette_dark(bg);
224 box-shadow: 0 0 0 2px _palette_light(highlight);
225 @media screen and (prefers-color-scheme: dark) {
226 box-shadow: 0 0 0 2px _palette_dark(highlight);
232 input[type="checkbox"] {
239 input[type="radio"] {
247 ::-webkit-input-placeholder {
248 color: _palette_light(fg-light) !important;
250 @media screen and (prefers-color-scheme: dark) {
251 color: _palette_dark(fg-light) !important;
256 color: _palette_light(fg-light) !important;
258 @media screen and (prefers-color-scheme: dark) {
259 color: _palette_dark(fg-light) !important;
264 color: _palette_light(fg-light) !important;
266 @media screen and (prefers-color-scheme: dark) {
267 color: _palette_dark(fg-light) !important;
271 :-ms-input-placeholder {
272 color: _palette_light(fg-light) !important;
274 @media screen and (prefers-color-scheme: dark) {
275 color: _palette_dark(fg-light) !important;