grid.less 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. .vc_non_responsive {
  2. //If "Disable responsive content elements" is checked in VC Settings
  3. .vc_row {
  4. .vc_col-sm-1 {
  5. .make-xs-column(1);
  6. }
  7. .vc_col-sm-2 {
  8. .make-xs-column(2);
  9. }
  10. .vc_col-sm-3 {
  11. .make-xs-column(3);
  12. }
  13. .vc_col-sm-4 {
  14. .make-xs-column(4);
  15. }
  16. .vc_col-sm-5 {
  17. .make-xs-column(5);
  18. }
  19. .vc_col-sm-6 {
  20. .make-xs-column(6);
  21. }
  22. .vc_col-sm-7 {
  23. .make-xs-column(7);
  24. }
  25. .vc_col-sm-8 {
  26. .make-xs-column(8);
  27. }
  28. .vc_col-sm-9 {
  29. .make-xs-column(9);
  30. }
  31. .vc_col-sm-10 {
  32. .make-xs-column(10);
  33. }
  34. .vc_col-sm-11 {
  35. .make-xs-column(11);
  36. }
  37. .vc_col-sm-12 {
  38. .make-xs-column(12);
  39. }
  40. .vc_loop-grid-columns(@grid-columns, sm, offset);
  41. .vc_hidden-sm {
  42. .responsive-invisibility();
  43. }
  44. }
  45. }
  46. @import "grid-5-cols-non-responsive.less";
  47. // fix for flexbox row
  48. .vc_column_container {
  49. width: 100%;
  50. }
  51. .vc_make-grid-columns() {
  52. // Common styles for all sizes of grid columns, widths 1-12
  53. .vc_col(@index) when (@index = 1) {
  54. // initial
  55. @item: ~".vc_col-xs-@{index}, .vc_col-sm-@{index}, .vc_col-md-@{index}, .vc_col-lg-@{index}";
  56. .vc_col((@index + 1), @item);
  57. }
  58. .vc_col(@index, @list) when (@index =< @grid-columns) {
  59. // general; "=<" isn't a typo
  60. @item: ~".vc_col-xs-@{index}, .vc_col-sm-@{index}, .vc_col-md-@{index}, .vc_col-lg-@{index}";
  61. .vc_col((@index + 1), ~"@{list}, @{item}");
  62. }
  63. .vc_col(@index, @list) when (@index > @grid-columns) {
  64. // terminal
  65. @{list} {
  66. position: relative;
  67. // Prevent columns from collapsing when empty
  68. min-height: 1px;
  69. // Inner gutter via padding
  70. padding-left: (@grid-gutter-width / 2);
  71. padding-right: (@grid-gutter-width / 2);
  72. .box-sizing(border-box);
  73. }
  74. }
  75. .vc_col(1); // kickstart it
  76. }
  77. .vc_float-grid-columns(@class) {
  78. .vc_col(@index) when (@index = 1) {
  79. // initial
  80. @item: ~".vc_col-@{class}-@{index}";
  81. .vc_col((@index + 1), @item);
  82. }
  83. .vc_col(@index, @list) when (@index =< @grid-columns) {
  84. // general
  85. @item: ~".vc_col-@{class}-@{index}";
  86. .vc_col((@index + 1), ~"@{list}, @{item}");
  87. }
  88. .vc_col(@index, @list) when (@index > @grid-columns) {
  89. // terminal
  90. @{list} {
  91. float: left;
  92. }
  93. }
  94. .vc_col(1); // kickstart it
  95. }
  96. .vc_float-grid-columns-rtl(@class) {
  97. .vc_col-rtl(@index) when (@index = 1) {
  98. // initial
  99. @item: ~".rtl .vc_rtl-columns-reverse .vc_col-@{class}-@{index}";
  100. .vc_col-rtl((@index + 1), @item);
  101. }
  102. .vc_col-rtl(@index, @list) when (@index =< @grid-columns) {
  103. // general
  104. @item: ~".rtl .vc_rtl-columns-reverse .vc_col-@{class}-@{index}";
  105. .vc_col-rtl((@index + 1), ~"@{list}, @{item}");
  106. }
  107. .vc_col-rtl(@index, @list) when (@index > @grid-columns) {
  108. // terminal
  109. @{list} {
  110. float: right;
  111. }
  112. }
  113. .vc_col-rtl(1); // kickstart it
  114. }
  115. .vc_calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  116. .vc_col-@{class}-@{index} {
  117. width: percentage((@index / @grid-columns));
  118. }
  119. }
  120. .vc_calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  121. .vc_col-@{class}-push-@{index} {
  122. left: percentage((@index / @grid-columns));
  123. }
  124. }
  125. .vc_calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  126. .vc_col-@{class}-push-0 {
  127. left: auto;
  128. }
  129. }
  130. .vc_calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  131. .vc_col-@{class}-pull-@{index} {
  132. right: percentage((@index / @grid-columns));
  133. }
  134. }
  135. .vc_calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  136. .vc_col-@{class}-pull-0 {
  137. right: auto;
  138. }
  139. }
  140. .vc_calc-grid-column(@index, @class, @type) when (@type = offset) {
  141. .vc_col-@{class}-offset-@{index} {
  142. margin-left: percentage((@index / @grid-columns));
  143. }
  144. }
  145. // Basic looping in LESS
  146. .vc_loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  147. .vc_calc-grid-column(@index, @class, @type);
  148. // next iteration
  149. .vc_loop-grid-columns((@index - 1), @class, @type);
  150. }
  151. // Create grid for specific class
  152. .vc_make-grid(@class) {
  153. .vc_float-grid-columns(@class);
  154. .vc_float-grid-columns-rtl(@class);
  155. .vc_loop-grid-columns(@grid-columns, @class, width);
  156. .vc_loop-grid-columns(@grid-columns, @class, pull);
  157. .vc_loop-grid-columns(@grid-columns, @class, push);
  158. .vc_loop-grid-columns(@grid-columns, @class, offset);
  159. }
  160. .vc_row {
  161. .make-row();
  162. }
  163. .vc_make-grid-columns();
  164. // Extra small grid
  165. //
  166. // Columns, offsets, pushes, and pulls for extra small devices like
  167. // smartphones.
  168. .vc_make-grid(xs);
  169. @import "grid-5-cols-xs.less";
  170. @media (min-width: @screen-sm-min) {
  171. .vc_make-grid(sm);
  172. @import "grid-5-cols-sm";
  173. }
  174. // Medium grid
  175. //
  176. // Columns, offsets, pushes, and pulls for the desktop device range.
  177. @media (min-width: @screen-md-min) {
  178. .vc_make-grid(md);
  179. @import "grid-5-cols-md";
  180. }
  181. // Large grid
  182. //
  183. // Columns, offsets, pushes, and pulls for the large desktop device range.
  184. @media (min-width: @screen-lg-min) {
  185. .vc_make-grid(lg);
  186. @import "grid-5-cols-lg";
  187. }
  188. @import "grid-5-cols-xs.less";