grid-rtl.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // RTL Grid system
  2. //
  3. // Generate semantic rtl grid columns with these mixins.
  4. // Generate the extra small columns
  5. .make-xs-column(@columns; @gutter: @grid-gutter-width) {
  6. float: right;
  7. }
  8. .make-xs-column-offset(@columns) {
  9. margin-right: percentage((@columns / @grid-columns));
  10. margin-left: 0;
  11. }
  12. .make-xs-column-push(@columns) {
  13. right: percentage((@columns / @grid-columns));
  14. left: auto;
  15. }
  16. .make-xs-column-pull(@columns) {
  17. left: percentage((@columns / @grid-columns));
  18. right: auto;
  19. }
  20. // Generate the small columns
  21. .make-sm-column(@columns; @gutter: @grid-gutter-width) {
  22. @media (min-width: @screen-sm-min) {
  23. float: right;
  24. }
  25. }
  26. .make-sm-column-offset(@columns) {
  27. @media (min-width: @screen-sm-min) {
  28. margin-right: percentage((@columns / @grid-columns));
  29. margin-left: 0;
  30. }
  31. }
  32. .make-sm-column-push(@columns) {
  33. @media (min-width: @screen-sm-min) {
  34. right: percentage((@columns / @grid-columns));
  35. left: auto;
  36. }
  37. }
  38. .make-sm-column-pull(@columns) {
  39. @media (min-width: @screen-sm-min) {
  40. left: percentage((@columns / @grid-columns));
  41. right: auto;
  42. }
  43. }
  44. // Generate the medium columns
  45. .make-md-column(@columns; @gutter: @grid-gutter-width) {
  46. @media (min-width: @screen-md-min) {
  47. float: right;
  48. }
  49. }
  50. .make-md-column-offset(@columns) {
  51. @media (min-width: @screen-md-min) {
  52. margin-right: percentage((@columns / @grid-columns));
  53. margin-left: 0;
  54. }
  55. }
  56. .make-md-column-push(@columns) {
  57. @media (min-width: @screen-md-min) {
  58. right: percentage((@columns / @grid-columns));
  59. left: auto;
  60. }
  61. }
  62. .make-md-column-pull(@columns) {
  63. @media (min-width: @screen-md-min) {
  64. left: percentage((@columns / @grid-columns));
  65. right: auto;
  66. }
  67. }
  68. // Generate the large columns
  69. .make-lg-column(@columns; @gutter: @grid-gutter-width) {
  70. @media (min-width: @screen-lg-min) {
  71. float: right;
  72. }
  73. }
  74. .make-lg-column-offset(@columns) {
  75. @media (min-width: @screen-lg-min) {
  76. margin-right: percentage((@columns / @grid-columns));
  77. margin-left: 0;
  78. }
  79. }
  80. .make-lg-column-push(@columns) {
  81. @media (min-width: @screen-lg-min) {
  82. right: percentage((@columns / @grid-columns));
  83. left: auto;
  84. }
  85. }
  86. .make-lg-column-pull(@columns) {
  87. @media (min-width: @screen-lg-min) {
  88. left: percentage((@columns / @grid-columns));
  89. right: auto;
  90. }
  91. }