_grid.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. .row > * {
  2. min-width: 0;
  3. }
  4. .col-separator {
  5. border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  6. }
  7. .container {
  8. @each $variation, $size in $container-variations {
  9. &-#{$variation} {
  10. @include make-container();
  11. max-width: $size;
  12. }
  13. }
  14. }
  15. @each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
  16. .row-#{$name} {
  17. margin-right: (-$value);
  18. margin-left: -($value);
  19. > .col,
  20. > [class*="col-"] {
  21. padding-right: $value;
  22. padding-left: $value;
  23. }
  24. .card {
  25. margin-bottom: 2 * $value;
  26. }
  27. }
  28. }
  29. .row-deck {
  30. > .col,
  31. > [class*="col-"] {
  32. display: flex;
  33. align-items: stretch;
  34. .card {
  35. flex: 1 1 auto;
  36. }
  37. }
  38. }
  39. .row-cards {
  40. --#{$prefix}gutter-x: #{$cards-grid-gap};
  41. --#{$prefix}gutter-y: #{$cards-grid-gap};
  42. min-width: 0;
  43. .row-cards {
  44. flex: 1;
  45. }
  46. }
  47. @each $name, $size in map-merge((null: $spacer), $spacers) {
  48. $name-prefixed: if($name == null, null, '-#{$name}');
  49. .space-y#{$name-prefixed} {
  50. display: flex;
  51. flex-direction: column;
  52. gap: $size;
  53. }
  54. .space-x#{$name-prefixed} {
  55. display: flex;
  56. gap: $size;
  57. }
  58. }
  59. @each $name, $size in map-merge((null: $spacer), $spacers) {
  60. $name-prefixed: if($name == null, null, '-#{$name}');
  61. .divide-y#{$name-prefixed} {
  62. > :not(template) ~ :not(template) {
  63. border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
  64. }
  65. > :not(template):not(:first-child) {
  66. padding-top: $size !important;
  67. }
  68. > :not(template):not(:last-child) {
  69. padding-bottom: $size !important;
  70. }
  71. }
  72. .divide-x#{$name-prefixed} {
  73. > :not(template) ~ :not(template) {
  74. border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
  75. }
  76. > :not(template):not(:first-child) {
  77. padding-left: $size !important;
  78. }
  79. > :not(template):not(:last-child) {
  80. padding-right: $size !important;
  81. }
  82. }
  83. }
  84. .divide-y-fill {
  85. display: flex;
  86. flex-direction: column;
  87. height: 100%;
  88. > :not(template) {
  89. flex: 1;
  90. display: flex;
  91. justify-content: center;
  92. flex-direction: column;
  93. }
  94. }