Bootstrap 5 grid
This commit is contained in:
Martijn Cuppens
parent
0327545e6d
commit
beefc6f530
|
|
@ -4,6 +4,5 @@
|
|||
@import "forms/form-check";
|
||||
@import "forms/form-file";
|
||||
@import "forms/form-range";
|
||||
@import "forms/layout";
|
||||
@import "forms/input-group";
|
||||
@import "forms/validation";
|
||||
|
|
|
|||
|
|
@ -5,18 +5,44 @@
|
|||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
|
||||
> * {
|
||||
@include make-col-ready();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the negative margin from default .row, then the horizontal padding
|
||||
// from all immediate children columns (to prevent runaway style inheritance).
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
// Gutters
|
||||
//
|
||||
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
@if $enable-grid-classes {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||
|
||||
@each $key, $value in $gutters {
|
||||
.g#{$infix}-#{$key},
|
||||
.gx#{$infix}-#{$key} {
|
||||
margin-right: -$value / 2;
|
||||
margin-left: -$value / 2;
|
||||
|
||||
> * {
|
||||
padding-right: $value / 2;
|
||||
padding-left: $value / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.g#{$infix}-#{$key},
|
||||
.gy#{$infix}-#{$key} {
|
||||
margin-top: -$value;
|
||||
|
||||
> * {
|
||||
margin-top: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -301,9 +301,10 @@ $container-max-widths: (
|
|||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
$grid-row-columns: 6 !default;
|
||||
|
||||
$gutters: $spacers !default;
|
||||
|
||||
// Container padding
|
||||
|
||||
|
|
@ -659,10 +660,6 @@ $form-text-margin-top: .25rem !default;
|
|||
|
||||
$form-check-inline-margin-right: 1rem !default;
|
||||
|
||||
$form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-grid-gutter-width: 10px !default;
|
||||
|
||||
$input-group-addon-color: $input-color !default;
|
||||
$input-group-addon-bg: $gray-200 !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ html {
|
|||
@import "functions";
|
||||
@import "variables";
|
||||
|
||||
@import "mixins/lists";
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
// Form grid
|
||||
//
|
||||
// Special replacement for our grid system's `.row` for tighter form layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -$form-grid-gutter-width / 2;
|
||||
margin-left: -$form-grid-gutter-width / 2;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: $form-grid-gutter-width / 2;
|
||||
padding-left: $form-grid-gutter-width / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||
// forms begin stacked on extra small (mobile) devices and then go inline when
|
||||
// viewports reach <768px.
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
||||
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-plaintext {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group,
|
||||
.form-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0;
|
||||
margin-right: $form-check-input-margin-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,27 +10,24 @@
|
|||
}
|
||||
|
||||
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
||||
position: relative;
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
// always setting `width: 100%;`. This works because we set the width
|
||||
// later on to override this initial width.
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
|
||||
padding-right: $gutter / 2;
|
||||
padding-left: $gutter / 2;
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
flex: 0 0 auto;
|
||||
width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
@mixin make-col-auto() {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%; // Reset earlier grid tiers
|
||||
}
|
||||
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
|
|
@ -45,8 +42,8 @@
|
|||
// style grid.
|
||||
@mixin row-cols($count) {
|
||||
& > * {
|
||||
flex: 0 0 100% / $count;
|
||||
max-width: 100% / $count;
|
||||
flex: 0 0 auto;
|
||||
width: 100% / $count;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,35 +53,14 @@
|
|||
// any value of `$grid-columns`.
|
||||
|
||||
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: $gutter / 2;
|
||||
padding-left: $gutter / 2;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $breakpoints);
|
||||
|
||||
// Allow columns to stretch full width below their breakpoints
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@extend %grid-column;
|
||||
}
|
||||
}
|
||||
.col#{$infix},
|
||||
.col#{$infix}-auto {
|
||||
@extend %grid-column;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
||||
.col#{$infix} {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid-row-columns {
|
||||
|
|
|
|||
Loading…
Reference in New Issue