@import "forms/form-check";
@import "forms/form-file";
@import "forms/form-range";
-@import "forms/layout";
@import "forms/input-group";
@import "forms/validation";
@if $enable-grid-classes {
.row {
@include make-row();
+
+ > * {
+ @include make-col-ready();
+ }
}
+}
+
+// Gutters
+//
+// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+
+@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;
+ }
+ }
- // 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;
+ .g#{$infix}-#{$key},
+ .gy#{$infix}-#{$key} {
+ margin-top: -$value;
- > .col,
- > [class*="col-"] {
- padding-right: 0;
- padding-left: 0;
+ > * {
+ margin-top: $value;
+ }
+ }
+ }
}
}
}
// 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
$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;
@import "functions";
@import "variables";
+@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
+++ /dev/null
-// 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;
- }
- }
-}
}
@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) {
// style grid.
@mixin row-cols($count) {
& > * {
- flex: 0 0 100% / $count;
- max-width: 100% / $count;
+ flex: 0 0 auto;
+ width: 100% / $count;
}
}
// 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 {
projects / thirdparty / bootstrap.git / commitdiff
