grid-framework-rtl.less 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. // RTL Framework grid generation
  2. //
  3. // Used only by Bootstrap to generate the correct number of grid classes given
  4. // any value of `@grid-columns`.
  5. .make-rtl-grid-columns() {
  6. // Common styles for all sizes of grid columns, widths 1-12
  7. .col(@index) { // initial
  8. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  9. .col((@index + 1), @item);
  10. }
  11. .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
  12. @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
  13. .col((@index + 1), ~"@{list}, @{item}");
  14. }
  15. .col(@index, @list) when (@index > @grid-columns) { // terminal
  16. @{list} {
  17. position: relative;
  18. // Prevent columns from collapsing when empty
  19. min-height: 1px;
  20. // Inner gutter via padding
  21. padding-left: (@grid-gutter-width / 2);
  22. padding-right: (@grid-gutter-width / 2);
  23. }
  24. }
  25. .col(1); // kickstart it
  26. }
  27. .float-rtl-grid-columns(@class) {
  28. .col(@index) { // initial
  29. @item: ~".col-@{class}-@{index}";
  30. .col((@index + 1), @item);
  31. }
  32. .col(@index, @list) when (@index =< @grid-columns) { // general
  33. @item: ~".col-@{class}-@{index}";
  34. .col((@index + 1), ~"@{list}, @{item}");
  35. }
  36. .col(@index, @list) when (@index > @grid-columns) { // terminal
  37. @{list} {
  38. float: right;
  39. }
  40. }
  41. .col(1); // kickstart it
  42. }
  43. .calc-rtl-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  44. .col-@{class}-@{index} {
  45. width: percentage((@index / @grid-columns));
  46. }
  47. }
  48. .calc-rtl-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  49. .col-@{class}-push-@{index} {
  50. right: percentage((@index / @grid-columns));
  51. left: 0;
  52. }
  53. }
  54. .calc-rtl-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  55. .col-@{class}-push-0 {
  56. right: auto;
  57. left: 0;
  58. }
  59. }
  60. .calc-rtl-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  61. .col-@{class}-pull-@{index} {
  62. left: percentage((@index / @grid-columns));
  63. right: auto;
  64. }
  65. }
  66. .calc-rtl-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  67. .col-@{class}-pull-0 {
  68. left: auto;
  69. right: auto;
  70. }
  71. }
  72. .calc-rtl-grid-column(@index, @class, @type) when (@type = offset) {
  73. .col-@{class}-offset-@{index} {
  74. margin-right: percentage((@index / @grid-columns));
  75. margin-left: 0;
  76. }
  77. }
  78. // Basic looping in LESS
  79. .loop-rtl-grid-columns(@index, @class, @type) when (@index >= 0) {
  80. .calc-rtl-grid-column(@index, @class, @type);
  81. // next iteration
  82. .loop-rtl-grid-columns((@index - 1), @class, @type);
  83. }
  84. // Create grid for specific class
  85. .make-rtl-grid(@class) {
  86. .float-rtl-grid-columns(@class);
  87. .loop-rtl-grid-columns(@grid-columns, @class, width);
  88. .loop-rtl-grid-columns(@grid-columns, @class, pull);
  89. .loop-rtl-grid-columns(@grid-columns, @class, push);
  90. .loop-rtl-grid-columns(@grid-columns, @class, offset);
  91. }