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

   1 $font-family: Roboto, 'Helvetica Neue', sans-serif !default;
   2 $font-size:   10px !default;
   3 $display-4-font-size-base: rem(11.20) !default;
   4 $display-3-font-size-base: rem(5.600) !default;
   5 $display-2-font-size-base: rem(4.500) !default;
   6 $display-1-font-size-base: rem(3.400) !default;
   7 $headline-font-size-base:  rem(2.400) !default;
   8 $title-font-size-base:     rem(2.000) !default;
   9 $subhead-font-size-base:   rem(1.600) !default;
  10 $body-font-size-base:      rem(1.400) !default;
  11 $caption-font-size-base:   rem(1.200) !default;
  12 $baseline-grid:            8px !default;
  13 $layout-gutter-width:      ($baseline-grid * 2) !default;
  14 $layout-breakpoint-xs:     600px !default;
  15 $layout-breakpoint-sm:     960px !default;
  16 $layout-breakpoint-md:     1280px !default;
  17 $layout-breakpoint-lg:     1920px !default;
  18 $button-left-right-padding: rem(0.600) !default;
  19 $icon-size: rem(2.400) !default;
  20 $app-bar-height: 64px !default;
  21 $toast-height: $baseline-grid * 3 !default;
  22 $toast-margin: $baseline-grid * 1 !default;
  23 $shadow-key-umbra-opacity:      0.2 !default;
  24 $shadow-key-penumbra-opacity:   0.14 !default;
  25 $shadow-ambient-shadow-opacity: 0.12 !default;
  26 $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;
  27 $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;
  28 $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;
  29 $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;
  30 $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;
  31 $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;
  32 $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;
  33 $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;
  34 $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;
  35 $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;
  36 $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;
  37 $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;
  38 $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;
  39 $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;
  40 $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;
  41 $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;
  42 $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;
  43 $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;
  44 $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;
  45 $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;
  46 $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;
  47 $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;
  48 $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;
  49 $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;
  50 $z-index-toast: 105 !default;
  51 $z-index-tooltip: 100 !default;
  52 $z-index-menu: 100 !default;
  53 $z-index-calendar-pane: 100 !default;
  54 $z-index-select: 90 !default;
  55 $z-index-dialog: 80 !default;
  56 $z-index-bottom-sheet: 70 !default;
  57 $z-index-scroll-mask: 50 !default;
  58 $z-index-scroll-mask-bar: 65 !default;
  59 $z-index-sidenav: 60 !default;
  60 $z-index-backdrop: 50 !default;
  61 $z-index-fab: 20 !default;
  62 $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
  63 $swift-ease-out-duration: 0.4s !default;
  64 $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
  65 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
  66 $swift-ease-in-duration: 0.3s !default;
  67 $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
  68 $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
  69 $swift-ease-in-out-duration: 0.5s !default;
  70 $swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
  71 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
  72 $swift-linear-duration: 0.08s !default;
  73 $swift-linear-timing-function: linear !default;
  74 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
  75 $material-enter-duration: 0.3s;
  76 $material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  77 $material-enter: all $material-enter-duration $material-enter-timing-function;
  78 $material-leave-duration: 0.3s;
  79 $material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
  80 $material-leave: all $material-leave-duration $material-leave-timing-function;
  81 $button-fab-width: rem(5.600) !default;
  82 $button-fab-height: rem(5.600) !default;
  83 $button-fab-padding: rem(1.60) !default;
  84 $checkbox-width: 20px !default;
  85 $checkbox-height: $checkbox-width !default;
  86 $checkbox-border-radius: 2px !default;
  87 $checkbox-border-width: 2px !default;
  88 $baseline-grid:            8px !default;
  89 $layout-gutter-width:      ($baseline-grid * 2) !default;
  90 $layout-breakpoint-xs:     600px !default;
  91 $layout-breakpoint-sm:     960px !default;
  92 $layout-breakpoint-md:     1280px !default;
  93 $layout-breakpoint-lg:     1920px !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 // Layout
 495 // ------------------------------
 496
 497
 498
 499 @-moz-document url-prefix() {
 500   [layout-fill] {
 501     margin: 0;
 502     width: 100%;
 503     min-height: 100%;
 504     height: 100%;
 505   }
 506 }
 507
 508
 509 @mixin flex-order-for-name($sizes:null) {
 510   @if $sizes == null {
 511     $sizes : '';
 512
 513     [flex-order] {
 514      order : 0;
 515     }
 516   }
 517
 518   @for $i from -20 through 20 {
 519     $order : '';
 520     $suffix : '';
 521
 522     @each $s in $sizes {
 523       @if $s != '' { $suffix : '-#{$s}="#{$i}"'; }
 524       @else        { $suffix : '="#{$i}"';       }
 525
 526       $order : '[flex-order#{$suffix}]';
 527     }
 528
 529     #{$order} {
 530       order: #{$i};
 531     }
 532   }
 533 }
 534 @mixin offset-for-name($sizes:null) {
 535   @if $sizes == null { $sizes : ''; }
 536
 537   @for $i from 0 through 19 {
 538     $offsets : '';
 539     $suffix : '';
 540
 541     @each $s in $sizes {
 542       @if $s != '' { $suffix : '-#{$s}="#{$i * 5}"'; }
 543       @else        { $suffix : '="#{$i * 5}"';       }
 544
 545       $offsets : $offsets + '[flex-offset#{$suffix}], ';
 546     }
 547
 548     #{$offsets} {
 549       margin-left: #{$i * 5 + '%'};
 550     }
 551   }
 552
 553   @each $i in 33 {
 554     $offsets : '';
 555     $suffix : '';
 556
 557     @each $s in $sizes {
 558       @if $s != '' {  $suffix : '-#{$s}="#{$i}"';   }
 559       @else        {  $suffix : '="#{$i}"';         }
 560
 561       $offsets : '[flex-offset#{$suffix}], ';
 562     }
 563
 564     #{$offsets} {
 565       margin-left: calc(100% / 3);
 566     }
 567   }
 568
 569   @each $i in 66  {
 570     $offsets : '';
 571     $suffix : '';
 572
 573     @each $s in $sizes {
 574       @if $s != '' {  $suffix : '-#{$s}="#{$i}"';   }
 575       @else        {  $suffix : '="#{$i}"';         }
 576
 577       $offsets : '[flex-offset#{$suffix}]';
 578     }
 579
 580     #{$offsets} {
 581       margin-left: calc(200% / 3);
 582     }
 583   }
 584 }
 585
 586 @mixin layout-for-name($name: null) {
 587   @if $name == null { $name : '';          }
 588   @if $name != ''   { $name : '-#{$name}'; }
 589
 590   [layout#{$name}], [layout#{$name}="column"], [layout#{$name}="row"] {
 591     box-sizing: border-box;
 592     display: -webkit-box;
 593     display: -webkit-flex;
 594     display: -moz-box;
 595     display: -ms-flexbox;
 596     display: flex;
 597   }
 598   [layout#{$name}="column"] {  flex-direction: column;  }
 599   [layout#{$name}="row"]    {  flex-direction: row;     }
 600 }
 601
 602 @mixin flex-properties-for-name($name: null) {
 603   $flexName: 'flex';
 604   @if $name != null {
 605     $flexName: 'flex-#{$name}';
 606     $name : '-#{$name}';
 607   } @else {
 608     $name : '';
 609   }
 610
 611   [#{$flexName}]             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;
 612
 613   [#{$flexName}-grow]        { flex: 1 1 100%;  box-sizing: border-box; }
 614   [#{$flexName}-initial]     { flex: 0 1 auto;  box-sizing: border-box; }
 615   [#{$flexName}-auto]        { flex: 1 1 auto;  box-sizing: border-box; }
 616   [#{$flexName}-none]        { flex: 0 0 auto;  box-sizing: border-box; }
 617
 618   // (1-20) * 5 = 0-100%
 619   @for $i from 0 through 20 {
 620     $value : #{$i * 5 + '%'};
 621
 622     [#{$flexName}="#{$i * 5}"] {
 623       flex: 1 1 #{$value};
 624       max-width: #{$value};
 625       max-height: 100%;
 626       box-sizing: border-box;
 627     }
 628
 629     [layout="row"] > [#{$flexName}="#{$i * 5}"] {
 630       flex: 1 1 #{$value};
 631       max-width: #{$value};
 632       max-height: 100%;
 633       box-sizing: border-box;
 634     }
 635
 636     [layout="column"] > [#{$flexName}="#{$i * 5}"] {
 637       flex: 1 1 #{$value};
 638       max-width: 100%;
 639       max-height: #{$value};
 640       box-sizing: border-box;
 641     }
 642
 643     [layout="row"] {
 644             > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
 645             > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
 646           }
 647
 648           [layout="column"] {
 649             > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
 650             > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
 651           }
 652
 653     [layout#{$name}="row"] > [#{$flexName}="#{$i * 5}"] {
 654       flex: 1 1 #{$value};
 655       max-width: #{$value};
 656       max-height: 100%;
 657       box-sizing: border-box;
 658     }
 659
 660     [layout#{$name}="column"] > [#{$flexName}="#{$i * 5}"] {
 661       flex: 1 1 #{$value};
 662       max-width: 100%;
 663       max-height: #{$value};
 664       box-sizing: border-box;
 665     }
 666   }
 667
 668   [layout#{$name}="row"] {
 669     > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 33.33%;  max-height: 100%; box-sizing: border-box; }
 670     > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 66.66%;  max-height: 100%; box-sizing: border-box; }
 671   }
 672
 673   [layout#{$name}="column"] {
 674     > [#{$flexName}="33"]   , > [#{$flexName}="33"]     {  flex: 1 1 33.33%;  max-width: 100%;  max-height: 33.33%; box-sizing: border-box; }
 675     > [#{$flexName}="66"]   , > [#{$flexName}="66"]     {  flex: 1 1 66.66%;  max-width: 100%;  max-height: 66.66%; box-sizing: border-box; }
 676   }
 677
 678 }
 679 @mixin layout-align-for-name($suffix: null) {
 680
 681   // Alignment attributes for layout containers' children
 682   // Arrange on the Main Axis
 683   // center, start, end, space-between, space-around
 684   // flex-start is the default for justify-content
 685   // ------------------------------
 686
 687   $name: 'layout-align';
 688   @if $suffix != null {
 689     $name: 'layout-align-#{$suffix}';
 690   }
 691
 692   [#{$name}],
 693   [#{$name}="start stretch"] // defaults
 694   {
 695     justify-content :flex-start;
 696     align-content : stretch;
 697     align-items: stretch;
 698   }
 699   // Main Axis Center
 700   [#{$name}="start"],
 701   [#{$name}="start start"],
 702   [#{$name}="start center"],
 703   [#{$name}="start end"],
 704   [#{$name}="start stretch"]
 705   {
 706     justify-content: flex-start;
 707   }
 708
 709   // Main Axis Center
 710   [#{$name}="center"],
 711   [#{$name}="center start"],
 712   [#{$name}="center center"],
 713   [#{$name}="center end"],
 714   [#{$name}="center stretch"]
 715   {
 716     justify-content: center;
 717   }
 718
 719   // Main Axis End
 720   [#{$name}="end"], //stretch
 721   [#{$name}="end center"],
 722   [#{$name}="end start"],
 723   [#{$name}="end end"],
 724   [#{$name}="end stretch"]
 725   {
 726     justify-content: flex-end;
 727   }
 728
 729   // Main Axis Space Around
 730   [#{$name}="space-around"], //stretch
 731   [#{$name}="space-around center"],
 732   [#{$name}="space-around start"],
 733   [#{$name}="space-around end"],
 734     [#{$name}="space-around stretch"]
 735   {
 736     justify-content: space-around;
 737   }
 738
 739   // Main Axis Space Between
 740   [#{$name}="space-between"], //stretch
 741   [#{$name}="space-between center"],
 742   [#{$name}="space-between start"],
 743   [#{$name}="space-between end"],
 744     [#{$name}="space-between stretch"]
 745   {
 746     justify-content: space-between;
 747   }
 748
 749
 750   // Arrange on the Cross Axis
 751   // center, start, end
 752   // stretch is the default for align-items
 753   // ------------------------------
 754
 755   // Cross Axis Start
 756   [#{$name}="start start"],
 757   [#{$name}="center start"],
 758   [#{$name}="end start"],
 759   [#{$name}="space-between start"],
 760   [#{$name}="space-around start"]
 761   {
 762     align-items: flex-start;
 763     align-content: flex-start;
 764   }
 765
 766   // Cross Axis Center
 767   [#{$name}="start center"],
 768   [#{$name}="center center"],
 769   [#{$name}="end center"],
 770   [#{$name}="space-between center"],
 771   [#{$name}="space-around center"]
 772   {
 773     align-items: center;
 774     align-content: center;
 775     max-width: 100%;
 776   }
 777
 778   // Cross Axis Center IE overflow fix
 779   [#{$name}="start center"] > *,
 780   [#{$name}="center center"] > *,
 781   [#{$name}="end center"] > *,
 782   [#{$name}="space-between center"] > *,
 783   [#{$name}="space-around center"] > *
 784   {
 785     max-width: 100%;
 786     box-sizing: border-box;
 787   }
 788
 789   // Cross Axis End
 790   [#{$name}="start end"],
 791   [#{$name}="center end"],
 792   [#{$name}="end end"],
 793   [#{$name}="space-between end"],
 794   [#{$name}="space-around end"]
 795   {
 796     align-items: flex-end;
 797     align-content: flex-end;
 798   }
 799
 800   // Cross Axis  stretch
 801   [#{$name}="start stretch"],
 802   [#{$name}="center stretch"],
 803   [#{$name}="end stretch"],
 804   [#{$name}="space-between stretch"],
 805   [#{$name}="space-around stretch"]
 806   {
 807     align-items: stretch;
 808     align-content: stretch;
 809   }
 810 }
 811 @mixin layout-padding-margin() {
 812
 813   [layout-padding] > [flex-sm],   [layout-padding] > [flex-lt-md] {
 814     padding: $layout-gutter-width / 4;
 815   }
 816   [layout-padding],
 817   [layout-padding] > [flex],
 818   [layout-padding] > [flex-gt-sm],
 819   [layout-padding] > [flex-md],
 820   [layout-padding] > [flex-lt-lg]
 821   {
 822     padding: $layout-gutter-width / 2;
 823   }
 824   [layout-padding] > [flex-gt-md],
 825   [layout-padding] > [flex-lg]
 826   {
 827     padding: $layout-gutter-width / 1;
 828   }
 829
 830   [layout-margin] > [flex-sm],
 831   [layout-margin] > [flex-lt-md]
 832   {
 833     margin: $layout-gutter-width / 4;
 834   }
 835
 836   [layout-margin],
 837   [layout-margin]  > [flex],
 838   [layout-margin]  > [flex-gt-sm],
 839   [layout-margin]  > [flex-md],
 840   [layout-margin]  > [flex-lt-lg]
 841   {
 842     margin: $layout-gutter-width / 2;
 843   }
 844
 845   [layout-margin]  > [flex-gt-md],
 846   [layout-margin]  > [flex-lg]
 847   {
 848     margin: $layout-gutter-width / 1;
 849   }
 850
 851   [layout-wrap] {
 852     flex-wrap: wrap;
 853   }
 854
 855   [layout-nowrap] {
 856       flex-wrap: nowrap;
 857   }
 858
 859   [layout-fill] {
 860     margin: 0;
 861     width: 100%;
 862     min-height: 100%;
 863     height: 100%;
 864   }
 865 }
 866
 867 @mixin layouts_for_breakpoint($name:null) {
 868     @include flex-order-for-name($name);
 869     @include offset-for-name($name);
 870     @include layout-align-for-name($name);
 871
 872     @include flex-properties-for-name($name);
 873     @include layout-for-name($name);
 874 }
 875
 876 /*
 877  *  Apply Mixins to create Layout/Flexbox styles
 878  *
 879  */
 880
 881
 882 @include layouts_for_breakpoint();
 883 @include layout-padding-margin();
 884
 885
 886 /**
 887  * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 888  * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 889  * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 890  *
 891  *  hide means hide everywhere
 892  *  Sizes:
 893  *         $layout-breakpoint-xs:     600px !default;
 894  *         $layout-breakpoint-sm:     960px !default;
 895  *         $layout-breakpoint-md:     1280px !default;
 896  *         $layout-breakpoint-lg:     1920px !default;
 897  */
 898
 899
 900 @media (max-width: $layout-breakpoint-xs - 1) {
 901   // Xtra-SMALL  SCREEN
 902   [hide-xs], [hide] {
 903     &:not([show-xs]):not([show]) {
 904       display: none;
 905     }
 906   }
 907   @include layouts_for_breakpoint(xs);
 908 }
 909
 910 @media (min-width: $layout-breakpoint-xs) {
 911   // BIGGER THAN Xtra-SMALL SCREEN
 912   @include layouts_for_breakpoint(gt-xs);
 913
 914 }
 915
 916 @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
 917   // SMALL SCREEN
 918   [hide], [hide-gt-xs] {
 919     &:not([show-gt-xs]):not([show-sm]):not([show]) {
 920       display: none;
 921     }
 922   }
 923   [hide-sm]:not([show-gt-xs]):not([show-sm]):not([show]) {
 924     display: none;
 925   }
 926   @include layouts_for_breakpoint(sm);
 927 }
 928
 929 @media (min-width: $layout-breakpoint-sm) {
 930   // BIGGER THAN SMALL SCREEN
 931   @include layouts_for_breakpoint(gt-sm);
 932
 933 }
 934
 935 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
 936   // MEDIUM SCREEN
 937   [hide], [hide-gt-xs], [hide-gt-sm] {
 938       &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
 939         display: none;
 940       }
 941     }
 942     [hide-md]:not([show-md]):not([show]) {
 943       display: none;
 944     }
 945   @include layouts_for_breakpoint(md);
 946 }
 947
 948 @media (min-width: $layout-breakpoint-md) {
 949   // BIGGER THAN MEDIUM SCREEN
 950   @include layouts_for_breakpoint(gt-md);
 951 }
 952
 953 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
 954   // LARGE SCREEN
 955   [hide],[hide-gt-xs], [hide-gt-sm], [hide-gt-md] {
 956       &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
 957         display: none;
 958       }
 959     }
 960     [hide-lg]:not([show-lg]):not([show]) {
 961       display: none;
 962     }
 963
 964   @include layouts_for_breakpoint(lg);
 965 }
 966
 967 @media (min-width: $layout-breakpoint-lg) {
 968   // BIGGER THAN LARGE SCREEN
 969   @include layouts_for_breakpoint(gt-lg);
 970   @include layouts_for_breakpoint(xl);
 971
 972   // BIGGER THAN LARGE SCREEN
 973   [hide], [hide-gt-xs], [hide-gt-sm], [hide-gt-md], [hide-gt-lg] {
 974     &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
 975       display: none;
 976     }
 977   }
 978   [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
 979     display: none;
 980   }
 981 }
 982
 983 @media print {
 984   // PRINT
 985   @include layouts_for_breakpoint(print);
 986
 987   [hide-print]:not([show-print]):not([show]) {
 988     display: none;
 989   }
 990 }
 991
 992