Mercurial > minori

comparison dep/fmt/doc/bootstrap/mixins/grid.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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 margin-right: auto;
8 margin-left: auto;
9 padding-left: (@gutter / 2);
10 padding-right: (@gutter / 2);
11 &:extend(.clearfix all);
12 }
13
14 // Creates a wrapper for a series of columns
15 .make-row(@gutter: @grid-gutter-width) {
16 margin-left: (@gutter / -2);
17 margin-right: (@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-left: (@gutter / 2);
28 padding-right: (@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-left: (@gutter / 2);
45 padding-right: (@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-left: (@gutter / 2);
73 padding-right: (@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-left: (@gutter / 2);
101 padding-right: (@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 }