col.scss 938 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. @use 'sass:math';
  2. @use 'common/var' as *;
  3. @use 'mixins/mixins' as *;
  4. @use 'mixins/_col' as *;
  5. [class*='#{$namespace}-col-'] {
  6. box-sizing: border-box;
  7. @include when(guttered) {
  8. display: block;
  9. min-height: 1px;
  10. }
  11. }
  12. @for $i from 0 through 24 {
  13. .#{$namespace}-col-#{$i} {
  14. display: if($i == 0, none, block);
  15. max-width: (math.div(1, 24) * $i * 100) * 1%;
  16. flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
  17. @include when(guttered) {
  18. display: if($i == 0, none, block);
  19. }
  20. }
  21. .#{$namespace}-col-offset-#{$i} {
  22. margin-left: (math.div(1, 24) * $i * 100) * 1%;
  23. }
  24. .#{$namespace}-col-pull-#{$i} {
  25. position: relative;
  26. right: (math.div(1, 24) * $i * 100) * 1%;
  27. }
  28. .#{$namespace}-col-push-#{$i} {
  29. position: relative;
  30. left: (math.div(1, 24) * $i * 100) * 1%;
  31. }
  32. }
  33. @include col-size(xs);
  34. @include col-size(sm);
  35. @include col-size(md);
  36. @include col-size(lg);
  37. @include col-size(xl);