4d322bb9db8492019abf9ceafeee3144dcc83753.svn-base 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-container($gutter: $grid-gutter-width) {
  5. margin-right: auto;
  6. margin-left: auto;
  7. padding-left: ($gutter / 2);
  8. padding-right: ($gutter / 2);
  9. @include clearfix();
  10. }
  11. @mixin make-row($gutter: $grid-gutter-width) {
  12. @if $enable-flex {
  13. display: flex;
  14. flex-wrap: wrap;
  15. } @else {
  16. @include clearfix();
  17. }
  18. margin-left: ($gutter / -2);
  19. margin-right: ($gutter / -2);
  20. }
  21. @mixin make-col($gutter: $grid-gutter-width) {
  22. position: relative;
  23. @if $enable-flex {
  24. // Do nothing
  25. } @else {
  26. float: left;
  27. }
  28. min-height: 1px;
  29. padding-left: ($gutter / 2);
  30. padding-right: ($gutter / 2);
  31. }
  32. @mixin make-col-span($size, $columns: $grid-columns) {
  33. @if $enable-flex {
  34. flex: 0 0 percentage($size / $columns);
  35. } @else {
  36. width: percentage($size / $columns);
  37. }
  38. }
  39. @mixin make-col-offset($size, $columns: $grid-columns) {
  40. margin-left: percentage($size / $columns);
  41. }
  42. @mixin make-col-push($size, $columns: $grid-columns) {
  43. left: if($size > 0, percentage($size / $columns), auto);
  44. }
  45. @mixin make-col-pull($size, $columns: $grid-columns) {
  46. right: if($size > 0, percentage($size / $columns), auto);
  47. }
  48. @mixin make-col-modifier($type, $size, $columns) {
  49. // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
  50. @if $type == push {
  51. @include make-col-push($size, $columns);
  52. } @else if $type == pull {
  53. @include make-col-pull($size, $columns);
  54. } @else if $type == offset {
  55. @include make-col-offset($size, $columns);
  56. }
  57. }