_grid.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .container,
  2. .container-fluid {
  3. width: 100%;
  4. max-width: $container-max-width;
  5. margin: 0 auto;
  6. padding: 0 1rem;
  7. @include media-breakpoint-up(lg) {
  8. padding: 0 2rem;
  9. }
  10. }
  11. .container-narrow {
  12. max-width: $container-narrow-max-width;
  13. }
  14. .container-slim {
  15. max-width: $container-slim-max-width;
  16. }
  17. .container-fluid {
  18. max-width: 100%;
  19. }
  20. .row {
  21. @include make-row();
  22. > * {
  23. @include make-col-ready();
  24. }
  25. }
  26. @include make-grid-columns();
  27. .col-separator {
  28. border-top: 1px solid $color-border-light;
  29. border-right: 1px solid $color-border-light;
  30. flex: 0 0 0%;
  31. padding: 0;
  32. }
  33. .stack {
  34. display: flex;
  35. flex-direction: column;
  36. gap: $gap-3;
  37. }
  38. @each $name, $size in map-merge((null: $gap-3), $gaps) {
  39. $suffix: if($name == null, null, '-#{$name}');
  40. .stack#{$suffix} {
  41. gap: $size;
  42. }
  43. .space-y#{$suffix} {
  44. > * ~ * {
  45. margin-top: $size !important;
  46. }
  47. }
  48. .space-x#{$suffix} {
  49. > * ~ * {
  50. margin-left: $size !important;
  51. }
  52. }
  53. .divider-y#{$suffix} {
  54. > * {
  55. &:not(:first-child) {
  56. padding-top: divide($size, 2) !important;
  57. border-top: 1px solid $color-border-light;
  58. }
  59. &:not(:last-child) {
  60. padding-bottom: divide($size, 2) !important;
  61. }
  62. }
  63. }
  64. }