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);
94 border: 1px solid _palette_light(fg-light);
100 text-decoration: none;
102 @media screen and (prefers-color-scheme: dark) {
103 background: _palette_dark(border);
104 border: 1px solid _palette_dark(fg-light);
112 border-color: _palette_light(highlight);
113 box-shadow: inset 0 0 0 2px _palette_light(highlight);
114 @media screen and (prefers-color-scheme: dark) {
115 border-color: _palette_dark(highlight);
116 box-shadow: inset 0 0 0 2px _palette_dark(highlight);
122 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>");
123 background-size: 1.25rem;
124 background-repeat: no-repeat;
125 background-position: calc(100% - 1rem) center;
126 height: _size(element-height);
127 padding-right: _size(element-height);
128 text-overflow: ellipsis;
129 @media screen and (prefers-color-scheme: dark) {
130 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>");
134 color: _palette_light(fg-bold);
135 background: _palette_light(bg);
136 @media screen and (prefers-color-scheme: dark) {
137 color: _palette_dark(fg-bold);
138 background: _palette_dark(bg);
144 background-color: transparent;
154 input[type="password"],
157 input[type="search"],
160 height: _size(element-height);
167 input[type="checkbox"],
168 input[type="radio"], {
169 @include vendor('appearance', 'none');
178 @include icon(false, solid);
179 color: _palette_light(fg);
181 display: inline-block;
182 font-weight: _font(weight);
183 padding-left: (_size(element-height) * 0.6) + 1em;
184 padding-right: 0.75em;
186 @media screen and (prefers-color-scheme: dark) {
187 color: _palette_dark(fg);
191 background: _palette_light(border-bg);
193 display: inline-block;
195 height: (_size(element-height) * 0.75);
198 line-height: (_size(element-height) * 0.75);
202 width: (_size(element-height) * 0.75);
203 @media screen and (prefers-color-scheme: dark) {
204 background: _palette_dark(border-bg);
211 background: _palette_light(fg-bold);
212 border-color: _palette_light(highlight);
214 color: _palette_light(bg);
215 @media screen and (prefers-color-scheme: dark) {
216 background: _palette_dark(fg-bold);
217 border-color: _palette_dark(highlight);
218 color: _palette_dark(bg);
225 box-shadow: inset 0 0 0 2px _palette_light(highlight);
226 @media screen and (prefers-color-scheme: dark) {
227 box-shadow: inset 0 0 0 2px _palette_dark(highlight);
233 input[type="checkbox"] {
240 input[type="radio"] {
248 ::-webkit-input-placeholder {
249 color: _palette_light(fg-light) !important;
251 @media screen and (prefers-color-scheme: dark) {
252 color: _palette_dark(fg-light) !important;
257 color: _palette_light(fg-light) !important;
259 @media screen and (prefers-color-scheme: dark) {
260 color: _palette_dark(fg-light) !important;
265 color: _palette_light(fg-light) !important;
267 @media screen and (prefers-color-scheme: dark) {
268 color: _palette_dark(fg-light) !important;
272 :-ms-input-placeholder {
273 color: _palette_light(fg-light) !important;
275 @media screen and (prefers-color-scheme: dark) {
276 color: _palette_dark(fg-light) !important;