Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/mixins/_grid-framework.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // 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
6 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7 // Common properties for all breakpoints
8 %grid-column {
9 position: relative;
10 width: 100%;
11 min-height: 1px; // Prevent columns from collapsing when empty
12 padding-right: ($gutter / 2);
13 padding-left: ($gutter / 2);
14 }
15
16 @each $breakpoint in map-keys($breakpoints) {
17 $infix: breakpoint-infix($breakpoint, $breakpoints);
18
19 // Allow columns to stretch full width below their breakpoints
20 @for $i from 1 through $columns {
21 .col#{$infix}-#{$i} {
22 @extend %grid-column;
23 }
24 }
25 .col#{$infix},
26 .col#{$infix}-auto {
27 @extend %grid-column;
28 }
29
30 @include media-breakpoint-up($breakpoint, $breakpoints) {
31 // Provide basic `.col-{bp}` classes for equal-width flexbox columns
32 .col#{$infix} {
33 flex-basis: 0;
34 flex-grow: 1;
35 max-width: 100%;
36 }
37 .col#{$infix}-auto {
38 flex: 0 0 auto;
39 width: auto;
40 max-width: none; // Reset earlier grid tiers
41 }
42
43 @for $i from 1 through $columns {
44 .col#{$infix}-#{$i} {
45 @include make-col($i, $columns);
46 }
47 }
48
49 @for $i from 1 through $columns {
50 .order#{$infix}-#{$i} {
51 order: $i;
52 }
53 }
54 }
55 }
56 }