_grid.scss 1.2 KB

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