gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   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 }