source: trip-planner-front/node_modules/angular-material/modules/scss/angular-material.layout-attributes.scss@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 31.3 KB
Line 
1$font-family: Roboto, 'Helvetica Neue', sans-serif !default;
2$font-size: 10px !default;
3$display-4-font-size-base: rem(11.20) !default;
4$display-3-font-size-base: rem(5.600) !default;
5$display-2-font-size-base: rem(4.500) !default;
6$display-1-font-size-base: rem(3.400) !default;
7$headline-font-size-base: rem(2.400) !default;
8$title-font-size-base: rem(2.000) !default;
9$subhead-font-size-base: rem(1.600) !default;
10$body-font-size-base: rem(1.400) !default;
11$caption-font-size-base: rem(1.200) !default;
12$baseline-grid: 8px !default;
13$layout-gutter-width: ($baseline-grid * 2) !default;
14$layout-breakpoint-xs: 600px !default;
15$layout-breakpoint-sm: 960px !default;
16$layout-breakpoint-md: 1280px !default;
17$layout-breakpoint-lg: 1920px !default;
18$icon-size: rem(2.400) !default;
19$app-bar-height: 64px !default;
20$toast-height: $baseline-grid * 3 !default;
21$toast-margin: $baseline-grid * 1 !default;
22$shadow-key-umbra-opacity: 0.2 !default;
23$shadow-key-penumbra-opacity: 0.14 !default;
24$shadow-ambient-shadow-opacity: 0.12 !default;
25$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
26$whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
27$whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
28$whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
29$whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
30$whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
31$whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
32$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
33$whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
34$whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
35$whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
36$whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
37$whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
38$whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
39$whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
40$whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
41$whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
42$whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
43$whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
44$whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
45$whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
46$whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
47$whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
48$whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
49$z-index-toast: 105 !default;
50$z-index-tooltip: 100 !default;
51$z-index-menu: 100 !default;
52$z-index-calendar-pane: 100 !default;
53$z-index-select: 90 !default;
54$z-index-dialog: 80 !default;
55$z-index-bottom-sheet: 70 !default;
56$z-index-scroll-mask: 50 !default;
57$z-index-scroll-mask-bar: 65 !default;
58$z-index-sidenav: 60 !default;
59$z-index-backdrop: 50 !default;
60$z-index-fab: 20 !default;
61$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
62$swift-ease-out-duration: 0.4s !default;
63$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
64$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
65$swift-ease-in-duration: 0.3s !default;
66$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
67$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
68$swift-ease-in-out-duration: 0.5s !default;
69$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
70$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
71$swift-linear-duration: 0.08s !default;
72$swift-linear-timing-function: linear !default;
73$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
74$material-enter-duration: 0.3s;
75$material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
76$material-enter: all $material-enter-duration $material-enter-timing-function;
77$material-leave-duration: 0.3s;
78$material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
79$material-leave: all $material-leave-duration $material-leave-timing-function;
80$button-left-right-padding: rem(0.800) !default;
81$icon-button-height: rem(4.000) !default;
82$icon-button-width: rem(4.000) !default;
83$button-fab-width: rem(5.600) !default;
84$button-fab-height: rem(5.600) !default;
85$button-fab-padding: rem(1.60) !default;
86$checkbox-width: 18px !default;
87$checkbox-height: $checkbox-width !default;
88$checkbox-border-radius: 2px !default;
89$checkbox-border-width: 2px !default;
90$default-horizontal-margin: 16px !default;
91$baseline-grid: 8px !default;
92$layout-gutter-width: ($baseline-grid * 2) !default;
93$layout-breakpoint-xs: 600px !default;
94$layout-breakpoint-sm: 960px !default;
95$layout-breakpoint-md: 1280px !default;
96$layout-breakpoint-lg: 1920px !default;
97// Typography
98// ------------------------------
99
100//-- Must be defined after $font-size and before variables that depend on the function.
101@function rem($multiplier) {
102 @return $multiplier * $font-size;
103}
104
105
106
107// Layout
108// ------------------------------
109
110
111
112// Icon
113
114// App bar variables
115
116
117// Whiteframes
118
119
120// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
121// multiple lines. Ugly. Sorry.
122
123// Z-indexes
124//--------------------------------------------
125
126
127// Easing Curves
128//--------------------------------------------
129
130
131
132
133
134
135
136// Button
137
138// Fab Buttons (shared between buttons.scss and fab*.scss)
139
140
141// Shared Checkbox variables
142
143// Shared Horizontal Margin Variables
144
145@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
146 -webkit-margin-before: $before;
147 -webkit-margin-after: $after;
148 -webkit-margin-start: $start;
149 -webkit-margin-end: $end;
150}
151
152@mixin not-selectable($value:none) {
153 -webkit-touch-callout: $value;
154 -webkit-user-select: $value;
155 -khtml-user-select: $value;
156 -moz-user-select: $value;
157 -ms-user-select: $value;
158 user-select: $value;
159}
160
161@mixin input-placeholder-color($color) {
162 $pseudos: '::-webkit-input-placeholder', // For QQ Browser
163 ':-ms-input-placeholder', // For IE
164 '::-ms-input-placeholder', // For Edge
165 '::placeholder';
166 $firefox-pseudos: ':-moz-placeholder', '::-moz-placeholder';
167
168 // It is important to export every pseudo within its own block, because otherwise the placeholder
169 // won't be set on the most browsers.
170 @each $pseudo in $pseudos {
171 &#{$pseudo} {
172 color: unquote($color);
173 }
174 }
175 // Firefox reduces the opacity of placeholders so we need to keep them opaque to avoid applying
176 // double the transparency and causing a11y failures due to text contrast.
177 @each $pseudo in $firefox-pseudos {
178 &#{$pseudo} {
179 color: unquote($color);
180 opacity: 1;
181 }
182 }
183}
184
185@mixin pie-clearfix {
186 &:after {
187 content: '';
188 display: table;
189 clear: both;
190 }
191}
192
193@mixin md-shadow-bottom-z-1() {
194 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
195}
196
197@mixin md-shadow-bottom-z-2() {
198 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
199}
200
201// Mixin for a "flat" input that can be used for components that contain an input
202// (datepicker, autocomplete).
203@mixin md-flat-input() {
204 font-size: 14px;
205
206 box-sizing: border-box;
207 border: none;
208 box-shadow: none;
209 outline: none;
210 background: transparent;
211
212 // The "clear X" that IE adds to input[type="search"]
213 &::-ms-clear {
214 display: none;
215 }
216}
217
218// Typography mixins
219
220@mixin md-title() {
221 font-size: $title-font-size-base;
222 font-weight: 500;
223 letter-spacing: 0.005em;
224}
225
226@mixin md-body-1() {
227 font-size: $body-font-size-base;
228 font-weight: 400;
229 letter-spacing: 0.010em;
230 line-height: rem(2);
231}
232
233@mixin md-body-2() {
234 font-size: $body-font-size-base;
235 font-weight: 500;
236 letter-spacing: 0.010em;
237 line-height: rem(2.4);
238}
239
240@mixin md-subhead() {
241 font-size: $subhead-font-size-base;
242 font-weight: 400;
243 letter-spacing: 0.010em;
244 line-height: rem(2.4);
245}
246
247@function map-to-string($map) {
248 $map-str: '{';
249 $keys: map-keys($map);
250 $len: length($keys);
251 @for $i from 1 through $len {
252 $key: nth($keys, $i);
253 $value: map-get($map, $key);
254 $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
255 @if $i != $len {
256 $map-str: $map-str + ',';
257 }
258 }
259 @return $map-str + '}';
260}
261
262// This is a mixin, which fixes IE11's vertical alignment issue, when using `min-height`.
263// See https://connect.microsoft.com/IE/feedback/details/816293/
264@mixin ie11-min-height-flexbug($min-height) {
265 &::before {
266 content: '';
267 min-height: $min-height;
268 visibility: hidden;
269 display: inline-block;
270 }
271}
272
273// mixin definition ; sets LTR and RTL within the same style call
274// @see https://css-tricks.com/almanac/properties/d/direction/
275
276@mixin rtl($prop, $ltr-value, $rtl-value) {
277 #{$prop}: $ltr-value;
278 [dir=rtl] & {
279 #{$prop}: $rtl-value;
280 }
281}
282
283@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
284 #{$ltr-prop}: $value;
285 [dir=rtl] & {
286 #{$ltr-prop}: $reset-value;
287 #{$rtl-prop}: $value;
288 }
289}
290
291// To reverse padding (top left bottom right) -> (top right bottom left)
292@function rtl-value($list) {
293 @if length($list) == 4 {
294 @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
295 }
296 @if length($list) == 5 {
297 @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
298 }
299 @return $list;
300}
301
302// Position a FAB button.
303@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
304 &.md-fab-#{$spot} {
305 top: $top;
306 right: $right;
307 bottom: $bottom;
308 left: $left;
309 position: absolute;
310 }
311}
312
313@mixin fab-all-positions() {
314 @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
315 @include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
316 @include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
317 @include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
318}
319
320// This mixin allows a user to use the md-checkbox css outside of the
321// md-checkbox directive.
322// See src/components/select/select.scss for an example.
323@mixin checkbox-container(
324 $checkedSelector: '.md-checked',
325 $width: $checkbox-width,
326 $height: $checkbox-height,
327 $border-width: $checkbox-border-width,
328 $border-radius: $checkbox-border-radius) {
329 .md-container {
330 position: absolute;
331 top: 50%;
332 transform: translateY(-50%);
333
334 box-sizing: border-box;
335 display: inline-block;
336
337 width: $width;
338 height: $height;
339 @include rtl(left, 0, auto);
340 @include rtl(right, auto, 0);
341
342 &:before {
343 box-sizing: border-box;
344 background-color: transparent;
345 border-radius: 50%;
346 content: '';
347 position: absolute;
348 display: block;
349 height: auto;
350 left: 0;
351 top: 0;
352 right: 0;
353 bottom: 0;
354 transition: all 0.5s;
355 width: auto;
356 }
357
358 &:after {
359 box-sizing: border-box;
360 content: '';
361 position: absolute;
362 top: -10px;
363 right: -10px;
364 bottom: -10px;
365 left: -10px;
366 }
367
368 .md-ripple-container {
369 position: absolute;
370 display: block;
371 width: auto;
372 height: auto;
373 left: -15px;
374 top: -15px;
375 right: -15px;
376 bottom: -15px;
377 }
378 }
379
380 // unchecked
381 .md-icon {
382 box-sizing: border-box;
383 transition: 240ms;
384 position: absolute;
385 top: 0;
386 left: 0;
387 width: $width;
388 height: $height;
389 border-width: $border-width;
390 border-style: solid;
391 border-radius: $border-radius;
392 }
393
394 &#{$checkedSelector} .md-icon {
395 border-color: transparent;
396
397 &:after {
398 box-sizing: border-box;
399 transform: rotate(45deg);
400 position: absolute;
401 left: $width / 3 - $border-width;
402 top: $width / 9 - $border-width;
403 display: table;
404 width: $width / 3;
405 height: $width * 2 / 3;
406 border-width: $border-width;
407 border-style: solid;
408 border-top: 0;
409 border-left: 0;
410 content: '';
411 }
412 }
413
414 // disabled
415 &[disabled] {
416 cursor: default;
417 }
418
419 &.md-indeterminate .md-icon {
420 &:after {
421 box-sizing: border-box;
422 position: absolute;
423 top: 50%;
424 left: 50%;
425 transform: translate(-50%, -50%);
426 display: table;
427 width: $width * 0.6;
428 height: $border-width;
429 border-width: $border-width;
430 border-style: solid;
431 border-top: 0;
432 border-left: 0;
433 content: '';
434 }
435 }
436}
437
438// Mixin to create a primary checkbox.
439// Used by the checkbox and select component.
440@mixin checkbox-primary($checkedSelector: '.md-checked') {
441 .md-ripple {
442 color: '{{primary-600}}';
443 }
444
445 &#{$checkedSelector} .md-ripple {
446 color: '{{background-600}}';
447 }
448
449 .md-ink-ripple {
450 color: '{{foreground-2}}';
451 }
452
453 &#{$checkedSelector} .md-ink-ripple {
454 color: '{{primary-color-0.87}}';
455 }
456
457 &:not(.md-checked) .md-icon {
458 border-color: '{{foreground-2}}';
459 }
460
461 &#{$checkedSelector} .md-icon {
462 background-color: '{{primary-color-0.87}}';
463 }
464
465 &#{$checkedSelector}.md-focused .md-container:before {
466 background-color: '{{primary-color-0.26}}';
467 }
468
469 &#{$checkedSelector} .md-icon:after {
470 border-color: '{{primary-contrast-0.87}}';
471 }
472
473 & .md-indeterminate[disabled] {
474 .md-container {
475 color: '{{foreground-3}}';
476 }
477 }
478}
479
480@mixin dense($prop, $normal, $dense) {
481 #{$prop}: $normal;
482 .md-dense > &:not(.md-dense-disabled),
483 .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) {
484 #{$prop}: $dense;
485 }
486}
487
488@mixin dense-rtl($prop, $ltr-normal, $rtl-normal, $ltr-dense, $rtl-dense) {
489 @include rtl($prop, $ltr-normal, $rtl-normal);
490 .md-dense > &:not(.md-dense-disabled),
491 .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) {
492 @include rtl($prop, $ltr-dense, $rtl-dense);
493 }
494}
495
496// Only use when in row layout
497@mixin when-layout-row($element) {
498 @media (max-width: $layout-breakpoint-xs - 1) {
499 .layout-row:not(.layout-xs-column),
500 .layout-xs-row {
501 & > #{$element} { @content; }
502 }
503 }
504 @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
505 .layout-row:not(.layout-gt-xs-column),
506 .layout-gt-xs-row,
507 .layout-sm-row {
508 &:not(.layout-sm-column) > #{$element} { @content; }
509 }
510 }
511 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
512 .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
513 .layout-gt-xs-row:not(.layout-gt-sm-column),
514 .layout-gt-sm-row,
515 .layout-md-row {
516 &:not(.layout-md-column) > #{$element} { @content; }
517 }
518 }
519 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
520 .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
521 .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
522 .layout-gt-sm-row:not(.layout-gt-md-column),
523 .layout-gt-md-row,
524 .layout-lg-row {
525 &:not(.layout-lg-column) > #{$element} { @content; }
526 }
527 }
528 @media (min-width: $layout-breakpoint-lg) {
529 .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
530 .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
531 .layout-gt-sm-row:not(.layout-gt-md-column),
532 .layout-gt-md-row,
533 .layout-gt-lg-row,
534 .layout-xl-row {
535 &:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
536 }
537 }
538}
539
540// Auto insert object margin
541@mixin auto-horizontal-margin($selector) {
542 @include when-layout-row($selector) {
543 &:not(:first-child) {
544 @include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
545 }
546 }
547}
548
549/*
550* Responsive attributes
551*
552* References:
553* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
554* 2) https://css-tricks.com/almanac/properties/f/flex/
555* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
556* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
557* 5) http://godban.com.ua/projects/flexgrid
558*/
559
560// Layout
561// ------------------------------
562
563
564
565@-moz-document url-prefix() {
566 [layout-fill] {
567 margin: 0;
568 width: 100%;
569 min-height: 100%;
570 height: 100%;
571 }
572}
573
574
575@mixin flex-order-for-name($sizes:null) {
576 @if $sizes == null {
577 $sizes : '';
578
579 [flex-order] {
580 order : 0;
581 }
582 }
583
584 @for $i from -20 through 20 {
585 $order : '';
586 $suffix : '';
587
588 @each $s in $sizes {
589 @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
590 @else { $suffix : '="#{$i}"'; }
591
592 $order : '[flex-order#{$suffix}]';
593 }
594
595 #{$order} {
596 order: #{$i};
597 }
598 }
599}
600@mixin offset-for-name($sizes:null) {
601 @if $sizes == null { $sizes : ''; }
602
603 @for $i from 0 through 19 {
604 $offsets : '';
605 $suffix : '';
606
607 @each $s in $sizes {
608 @if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
609 @else { $suffix : '="#{$i * 5}"'; }
610
611 $offsets : $offsets + '[flex-offset#{$suffix}], ';
612 }
613
614 #{$offsets} {
615 margin-left: #{$i * 5 + '%'};
616 }
617 }
618
619 @each $i in 33 {
620 $offsets : '';
621 $suffix : '';
622
623 @each $s in $sizes {
624 @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
625 @else { $suffix : '="#{$i}"'; }
626
627 $offsets : '[flex-offset#{$suffix}], ';
628 }
629
630 #{$offsets} {
631 margin-left: calc(100% / 3);
632 }
633 }
634
635 @each $i in 66 {
636 $offsets : '';
637 $suffix : '';
638
639 @each $s in $sizes {
640 @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
641 @else { $suffix : '="#{$i}"'; }
642
643 $offsets : '[flex-offset#{$suffix}]';
644 }
645
646 #{$offsets} {
647 margin-left: calc(200% / 3);
648 }
649 }
650}
651
652@mixin layout-for-name($name: null) {
653 @if $name == null { $name : ''; }
654 @if $name != '' { $name : '-#{$name}'; }
655
656 [layout#{$name}], [layout#{$name}="column"], [layout#{$name}="row"] {
657 box-sizing: border-box;
658 display: -webkit-box;
659 display: -webkit-flex;
660 display: -moz-box;
661 display: -ms-flexbox;
662 display: flex;
663 }
664 [layout#{$name}="column"] { flex-direction: column; }
665 [layout#{$name}="row"] { flex-direction: row; }
666}
667
668@mixin flex-properties-for-name($name: null) {
669 $flexName: 'flex';
670 @if $name != null {
671 $flexName: 'flex-#{$name}';
672 $name : '-#{$name}';
673 } @else {
674 $name : '';
675 }
676
677 [#{$flexName}] { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
678
679 [#{$flexName}-grow] { flex: 1 1 100%; box-sizing: border-box; }
680 [#{$flexName}-initial] { flex: 0 1 auto; box-sizing: border-box; }
681 [#{$flexName}-auto] { flex: 1 1 auto; box-sizing: border-box; }
682 [#{$flexName}-none] { flex: 0 0 auto; box-sizing: border-box; }
683
684 // (1-20) * 5 = 0-100%
685 @for $i from 0 through 20 {
686 $value : #{$i * 5 + '%'};
687
688 [#{$flexName}="#{$i * 5}"] {
689 flex: 1 1 #{$value};
690 max-width: #{$value};
691 max-height: 100%;
692 box-sizing: border-box;
693 }
694
695 [layout="row"] > [#{$flexName}="#{$i * 5}"] {
696 flex: 1 1 #{$value};
697 max-width: #{$value};
698 max-height: 100%;
699 box-sizing: border-box;
700 }
701
702 [layout="column"] > [#{$flexName}="#{$i * 5}"] {
703 flex: 1 1 #{$value};
704 max-width: 100%;
705 max-height: #{$value};
706 box-sizing: border-box;
707 }
708
709 [layout="row"] {
710 > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
711 > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
712 }
713
714 [layout="column"] {
715 > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
716 > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
717 }
718
719 [layout#{$name}="row"] > [#{$flexName}="#{$i * 5}"] {
720 flex: 1 1 #{$value};
721 max-width: #{$value};
722 max-height: 100%;
723 box-sizing: border-box;
724 }
725
726 [layout#{$name}="column"] > [#{$flexName}="#{$i * 5}"] {
727 flex: 1 1 #{$value};
728 max-width: 100%;
729 max-height: #{$value};
730 box-sizing: border-box;
731 }
732 }
733
734 [layout#{$name}="row"] {
735 > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
736 > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
737 }
738
739 [layout#{$name}="column"] {
740 > [#{$flexName}="33"] , > [#{$flexName}="33"] { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
741 > [#{$flexName}="66"] , > [#{$flexName}="66"] { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
742 }
743
744}
745@mixin layout-align-for-name($suffix: null) {
746
747 // Alignment attributes for layout containers' children
748 // Arrange on the Main Axis
749 // center, start, end, space-between, space-around
750 // flex-start is the default for justify-content
751 // ------------------------------
752
753 $name: 'layout-align';
754 @if $suffix != null {
755 $name: 'layout-align-#{$suffix}';
756 }
757
758 [#{$name}],
759 [#{$name}="start stretch"] // defaults
760 {
761 justify-content :flex-start;
762 align-content : stretch;
763 align-items: stretch;
764 }
765 // Main Axis Center
766 [#{$name}="start"],
767 [#{$name}="start start"],
768 [#{$name}="start center"],
769 [#{$name}="start end"],
770 [#{$name}="start stretch"]
771 {
772 justify-content: flex-start;
773 }
774
775 // Main Axis Center
776 [#{$name}="center"],
777 [#{$name}="center start"],
778 [#{$name}="center center"],
779 [#{$name}="center end"],
780 [#{$name}="center stretch"]
781 {
782 justify-content: center;
783 }
784
785 // Main Axis End
786 [#{$name}="end"], //stretch
787 [#{$name}="end center"],
788 [#{$name}="end start"],
789 [#{$name}="end end"],
790 [#{$name}="end stretch"]
791 {
792 justify-content: flex-end;
793 }
794
795 // Main Axis Space Around
796 [#{$name}="space-around"], //stretch
797 [#{$name}="space-around center"],
798 [#{$name}="space-around start"],
799 [#{$name}="space-around end"],
800 [#{$name}="space-around stretch"]
801 {
802 justify-content: space-around;
803 }
804
805 // Main Axis Space Between
806 [#{$name}="space-between"], //stretch
807 [#{$name}="space-between center"],
808 [#{$name}="space-between start"],
809 [#{$name}="space-between end"],
810 [#{$name}="space-between stretch"]
811 {
812 justify-content: space-between;
813 }
814
815
816 // Arrange on the Cross Axis
817 // center, start, end
818 // stretch is the default for align-items
819 // ------------------------------
820
821 // Cross Axis Start
822 [#{$name}="start start"],
823 [#{$name}="center start"],
824 [#{$name}="end start"],
825 [#{$name}="space-between start"],
826 [#{$name}="space-around start"]
827 {
828 align-items: flex-start;
829 align-content: flex-start;
830 }
831
832 // Cross Axis Center
833 [#{$name}="start center"],
834 [#{$name}="center center"],
835 [#{$name}="end center"],
836 [#{$name}="space-between center"],
837 [#{$name}="space-around center"]
838 {
839 align-items: center;
840 align-content: center;
841 max-width: 100%;
842 }
843
844 // Cross Axis Center IE overflow fix
845 [#{$name}="start center"] > *,
846 [#{$name}="center center"] > *,
847 [#{$name}="end center"] > *,
848 [#{$name}="space-between center"] > *,
849 [#{$name}="space-around center"] > *
850 {
851 max-width: 100%;
852 box-sizing: border-box;
853 }
854
855 // Cross Axis End
856 [#{$name}="start end"],
857 [#{$name}="center end"],
858 [#{$name}="end end"],
859 [#{$name}="space-between end"],
860 [#{$name}="space-around end"]
861 {
862 align-items: flex-end;
863 align-content: flex-end;
864 }
865
866 // Cross Axis stretch
867 [#{$name}="start stretch"],
868 [#{$name}="center stretch"],
869 [#{$name}="end stretch"],
870 [#{$name}="space-between stretch"],
871 [#{$name}="space-around stretch"]
872 {
873 align-items: stretch;
874 align-content: stretch;
875 }
876}
877@mixin layout-padding-margin() {
878
879 [layout-padding] > [flex-sm] {
880 padding: $layout-gutter-width / 4;
881 }
882 [layout-padding],
883 [layout-padding] > [flex],
884 [layout-padding] > [flex-gt-sm],
885 [layout-padding] > [flex-md]
886 {
887 padding: $layout-gutter-width / 2;
888 }
889 [layout-padding] > [flex-gt-md],
890 [layout-padding] > [flex-lg]
891 {
892 padding: $layout-gutter-width / 1;
893 }
894
895 [layout-margin] > [flex-sm]
896 {
897 margin: $layout-gutter-width / 4;
898 }
899
900 [layout-margin],
901 [layout-margin] > [flex],
902 [layout-margin] > [flex-gt-sm],
903 [layout-margin] > [flex-md]
904 {
905 margin: $layout-gutter-width / 2;
906 }
907
908 [layout-margin] > [flex-gt-md],
909 [layout-margin] > [flex-lg]
910 {
911 margin: $layout-gutter-width / 1;
912 }
913
914 [layout-wrap] {
915 flex-wrap: wrap;
916 }
917
918 [layout-nowrap] {
919 flex-wrap: nowrap;
920 }
921
922 [layout-fill] {
923 margin: 0;
924 width: 100%;
925 min-height: 100%;
926 height: 100%;
927 }
928}
929
930@mixin layouts_for_breakpoint($name:null) {
931 @include flex-order-for-name($name);
932 @include offset-for-name($name);
933 @include layout-align-for-name($name);
934
935 @include flex-properties-for-name($name);
936 @include layout-for-name($name);
937}
938
939/*
940 * Apply Mixins to create Layout/Flexbox styles
941 *
942 */
943
944
945@include layouts_for_breakpoint();
946@include layout-padding-margin();
947
948
949/**
950 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
951 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
952 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
953 *
954 * hide means hide everywhere
955 * Sizes:
956 * $layout-breakpoint-xs: 600px !default;
957 * $layout-breakpoint-sm: 960px !default;
958 * $layout-breakpoint-md: 1280px !default;
959 * $layout-breakpoint-lg: 1920px !default;
960 */
961
962
963@media (max-width: $layout-breakpoint-xs - 1) {
964 // Xtra-SMALL SCREEN
965 [hide-xs], [hide] {
966 &:not([show-xs]):not([show]) {
967 display: none;
968 }
969 }
970 @include layouts_for_breakpoint(xs);
971}
972
973@media (min-width: $layout-breakpoint-xs) {
974 // BIGGER THAN Xtra-SMALL SCREEN
975 @include layouts_for_breakpoint(gt-xs);
976
977}
978
979@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
980 // SMALL SCREEN
981 [hide], [hide-gt-xs] {
982 &:not([show-gt-xs]):not([show-sm]):not([show]) {
983 display: none;
984 }
985 }
986 [hide-sm]:not([show-gt-xs]):not([show-sm]):not([show]) {
987 display: none;
988 }
989 @include layouts_for_breakpoint(sm);
990}
991
992@media (min-width: $layout-breakpoint-sm) {
993 // BIGGER THAN SMALL SCREEN
994 @include layouts_for_breakpoint(gt-sm);
995
996}
997
998@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
999 // MEDIUM SCREEN
1000 [hide], [hide-gt-xs], [hide-gt-sm] {
1001 &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
1002 display: none;
1003 }
1004 }
1005 [hide-md]:not([show-md]):not([show]) {
1006 display: none;
1007 }
1008 @include layouts_for_breakpoint(md);
1009}
1010
1011@media (min-width: $layout-breakpoint-md) {
1012 // BIGGER THAN MEDIUM SCREEN
1013 @include layouts_for_breakpoint(gt-md);
1014}
1015
1016@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
1017 // LARGE SCREEN
1018 [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] {
1019 &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
1020 display: none;
1021 }
1022 }
1023 [hide-lg]:not([show-lg]):not([show]) {
1024 display: none;
1025 }
1026
1027 @include layouts_for_breakpoint(lg);
1028}
1029
1030@media (min-width: $layout-breakpoint-lg) {
1031 // BIGGER THAN LARGE SCREEN
1032 @include layouts_for_breakpoint(gt-lg);
1033 @include layouts_for_breakpoint(xl);
1034
1035 // BIGGER THAN LARGE SCREEN
1036 [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [hide-gt-lg] {
1037 &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
1038 display: none;
1039 }
1040 }
1041 [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
1042 display: none;
1043 }
1044}
1045
1046@media print {
1047 // PRINT
1048 @include layouts_for_breakpoint(print);
1049
1050 [hide-print]:not([show-print]):not([show]) {
1051 display: none;
1052 }
1053}
1054
1055
Note: See TracBrowser for help on using the repository browser.