mdc-layout-grid.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // Copyright 2017 Google Inc.
  2. //
  3. // Permission is hereby granted, free of charge, to any person obtaining a copy
  4. // of this software and associated documentation files (the "Software"), to deal
  5. // in the Software without restriction, including without limitation the rights
  6. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7. // copies of the Software, and to permit persons to whom the Software is
  8. // furnished to do so, subject to the following conditions:
  9. //
  10. // The above copyright notice and this permission notice shall be included in
  11. // all copies or substantial portions of the Software.
  12. //
  13. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19. // THE SOFTWARE.
  20. // stylelint-disable selector-class-pattern --
  21. // Selector '.mdc-*' should only be used in this project.
  22. @use 'sass:list';
  23. @use 'sass:map';
  24. @use './variables';
  25. @use './mixins';
  26. :root {
  27. @each $size in map.keys(variables.$columns) {
  28. --mdc-layout-grid-margin-#{$size}: #{map.get(
  29. variables.$default-margin,
  30. $size
  31. )};
  32. --mdc-layout-grid-gutter-#{$size}: #{map.get(
  33. variables.$default-gutter,
  34. $size
  35. )};
  36. --mdc-layout-grid-column-width-#{$size}: #{map.get(
  37. variables.$column-width,
  38. $size
  39. )};
  40. }
  41. }
  42. // postcss-bem-linter: define layout-grid
  43. .mdc-layout-grid {
  44. @each $size in map.keys(variables.$columns) {
  45. @include mixins.media-query_($size) {
  46. $margin: map.get(variables.$default-margin, $size);
  47. @include mixins.layout-grid($size, $margin, variables.$max-width);
  48. }
  49. }
  50. }
  51. .mdc-layout-grid__inner {
  52. @each $size in map.keys(variables.$columns) {
  53. @include mixins.media-query_($size) {
  54. $margin: map.get(variables.$default-margin, $size);
  55. $gutter: map.get(variables.$default-gutter, $size);
  56. @include mixins.inner($size, $margin, $gutter);
  57. }
  58. }
  59. }
  60. .mdc-layout-grid__cell {
  61. // select the upper breakpoint
  62. $upper-breakpoint: list.nth(map.keys(variables.$columns), 1);
  63. @each $size in map.keys(variables.$columns) {
  64. @include mixins.media-query_($size) {
  65. $gutter: map.get(variables.$default-gutter, $size);
  66. @include mixins.cell($size, variables.$default-column-span, $gutter);
  67. @for $span from 1 through map.get(variables.$columns, $upper-breakpoint) {
  68. // Span classes.
  69. @at-root .mdc-layout-grid__cell--span-#{$span},
  70. .mdc-layout-grid__cell--span-#{$span}-#{$size} {
  71. @include mixins.cell-span_($size, $span, $gutter);
  72. }
  73. }
  74. }
  75. }
  76. // Order override classes.
  77. @for $i from 1 through map.get(variables.$columns, $upper-breakpoint) {
  78. &--order-#{$i} {
  79. @include mixins.cell-order($i);
  80. }
  81. }
  82. // Alignment classes.
  83. &--align-top {
  84. @include mixins.cell-align(top);
  85. }
  86. &--align-middle {
  87. @include mixins.cell-align(middle);
  88. }
  89. &--align-bottom {
  90. @include mixins.cell-align(bottom);
  91. }
  92. }
  93. .mdc-layout-grid--fixed-column-width {
  94. @each $size in map.keys(variables.$columns) {
  95. @include mixins.media-query_($size) {
  96. $margin: map.get(variables.$default-margin, $size);
  97. $gutter: map.get(variables.$default-gutter, $size);
  98. $column-width: map.get(variables.$column-width, $size);
  99. @include mixins.fixed-column-width(
  100. $size,
  101. $margin,
  102. $gutter,
  103. $column-width
  104. );
  105. }
  106. }
  107. }
  108. .mdc-layout-grid--align-left {
  109. margin-right: auto;
  110. margin-left: 0;
  111. }
  112. .mdc-layout-grid--align-right {
  113. margin-right: 0;
  114. margin-left: auto;
  115. }
  116. // postcss-bem-linter: end