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