col.scss 1018 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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. .#{$namespace}-col-0 {
  13. display: none;
  14. // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
  15. @include when(guttered) {
  16. display: none;
  17. }
  18. }
  19. @for $i from 0 through 24 {
  20. .#{$namespace}-col-#{$i} {
  21. max-width: (math.div(1, 24) * $i * 100) * 1%;
  22. flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
  23. }
  24. .#{$namespace}-col-offset-#{$i} {
  25. margin-left: (math.div(1, 24) * $i * 100) * 1%;
  26. }
  27. .#{$namespace}-col-pull-#{$i} {
  28. position: relative;
  29. right: (math.div(1, 24) * $i * 100) * 1%;
  30. }
  31. .#{$namespace}-col-push-#{$i} {
  32. position: relative;
  33. left: (math.div(1, 24) * $i * 100) * 1%;
  34. }
  35. }
  36. @include col-size(xs);
  37. @include col-size(sm);
  38. @include col-size(md);
  39. @include col-size(lg);
  40. @include col-size(xl);