source: trip-planner-front/node_modules/bootstrap/less/mixins/grid.less@ ceaed42

Last change on this file since ceaed42 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 3.0 KB
Line 
1// Grid system
2//
3// Generate semantic grid columns with these mixins.
4
5// Centered container element
6.container-fixed(@gutter: @grid-gutter-width) {
7 padding-right: ceil((@gutter / 2));
8 padding-left: floor((@gutter / 2));
9 margin-right: auto;
10 margin-left: auto;
11 &:extend(.clearfix all);
12}
13
14// Creates a wrapper for a series of columns
15.make-row(@gutter: @grid-gutter-width) {
16 margin-right: floor((@gutter / -2));
17 margin-left: ceil((@gutter / -2));
18 &:extend(.clearfix all);
19}
20
21// Generate the extra small columns
22.make-xs-column(@columns; @gutter: @grid-gutter-width) {
23 position: relative;
24 float: left;
25 width: percentage((@columns / @grid-columns));
26 min-height: 1px;
27 padding-right: (@gutter / 2);
28 padding-left: (@gutter / 2);
29}
30.make-xs-column-offset(@columns) {
31 margin-left: percentage((@columns / @grid-columns));
32}
33.make-xs-column-push(@columns) {
34 left: percentage((@columns / @grid-columns));
35}
36.make-xs-column-pull(@columns) {
37 right: percentage((@columns / @grid-columns));
38}
39
40// Generate the small columns
41.make-sm-column(@columns; @gutter: @grid-gutter-width) {
42 position: relative;
43 min-height: 1px;
44 padding-right: (@gutter / 2);
45 padding-left: (@gutter / 2);
46
47 @media (min-width: @screen-sm-min) {
48 float: left;
49 width: percentage((@columns / @grid-columns));
50 }
51}
52.make-sm-column-offset(@columns) {
53 @media (min-width: @screen-sm-min) {
54 margin-left: percentage((@columns / @grid-columns));
55 }
56}
57.make-sm-column-push(@columns) {
58 @media (min-width: @screen-sm-min) {
59 left: percentage((@columns / @grid-columns));
60 }
61}
62.make-sm-column-pull(@columns) {
63 @media (min-width: @screen-sm-min) {
64 right: percentage((@columns / @grid-columns));
65 }
66}
67
68// Generate the medium columns
69.make-md-column(@columns; @gutter: @grid-gutter-width) {
70 position: relative;
71 min-height: 1px;
72 padding-right: (@gutter / 2);
73 padding-left: (@gutter / 2);
74
75 @media (min-width: @screen-md-min) {
76 float: left;
77 width: percentage((@columns / @grid-columns));
78 }
79}
80.make-md-column-offset(@columns) {
81 @media (min-width: @screen-md-min) {
82 margin-left: percentage((@columns / @grid-columns));
83 }
84}
85.make-md-column-push(@columns) {
86 @media (min-width: @screen-md-min) {
87 left: percentage((@columns / @grid-columns));
88 }
89}
90.make-md-column-pull(@columns) {
91 @media (min-width: @screen-md-min) {
92 right: percentage((@columns / @grid-columns));
93 }
94}
95
96// Generate the large columns
97.make-lg-column(@columns; @gutter: @grid-gutter-width) {
98 position: relative;
99 min-height: 1px;
100 padding-right: (@gutter / 2);
101 padding-left: (@gutter / 2);
102
103 @media (min-width: @screen-lg-min) {
104 float: left;
105 width: percentage((@columns / @grid-columns));
106 }
107}
108.make-lg-column-offset(@columns) {
109 @media (min-width: @screen-lg-min) {
110 margin-left: percentage((@columns / @grid-columns));
111 }
112}
113.make-lg-column-push(@columns) {
114 @media (min-width: @screen-lg-min) {
115 left: percentage((@columns / @grid-columns));
116 }
117}
118.make-lg-column-pull(@columns) {
119 @media (min-width: @screen-lg-min) {
120 right: percentage((@columns / @grid-columns));
121 }
122}
Note: See TracBrowser for help on using the repository browser.