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