_span-columns.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. @mixin span-columns($span: $columns of $container-columns, $display: block) {
  2. $columns: nth($span, 1);
  3. $container-columns: container-span($span);
  4. // Set nesting context (used by shift())
  5. $parent-columns: get-parent-columns($container-columns) !global;
  6. $direction: get-direction($layout-direction, $default-layout-direction);
  7. $opposite-direction: get-opposite-direction($direction);
  8. $display-table: is-display-table($container-display-table, $display);
  9. @if $display-table {
  10. display: table-cell;
  11. width: percentage($columns / $container-columns);
  12. } @else {
  13. float: #{$opposite-direction};
  14. @if $display != no-display {
  15. display: block;
  16. }
  17. @if $display == collapse {
  18. @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."
  19. }
  20. @if $display == collapse or $display == block-collapse {
  21. width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
  22. &:last-child {
  23. width: flex-grid($columns, $container-columns);
  24. }
  25. } @else {
  26. margin-#{$direction}: flex-gutter($container-columns);
  27. width: flex-grid($columns, $container-columns);
  28. &:last-child {
  29. margin-#{$direction}: 0;
  30. }
  31. }
  32. }
  33. }