--- /dev/null
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-grid-classes {
+ // Single container class with breakpoint max-widths
+ .container {
+ @include make-container();
+ @include make-container-max-widths();
+ }
+
+ // 100% wide container at all breakpoints
+ .container-fluid {
+ @include make-container();
+ }
+
+ // Responsive containers that are 100% wide until a breakpoint
+ @each $breakpoint, $container-max-width in $container-max-widths {
+ .container-#{$breakpoint} {
+ @extend .container-fluid;
+ }
+
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ %responsive-container-#{$breakpoint} {
+ max-width: $container-max-width;
+ }
+
+ // Extend each breakpoint which is smaller or equal to the current breakpoint
+ $extend-breakpoint: true;
+
+ @each $name, $width in $grid-breakpoints {
+ @if ($extend-breakpoint) {
+ .container#{breakpoint-infix($name, $grid-breakpoints)} {
+ @extend %responsive-container-#{$breakpoint};
+ }
+
+ // Once the current breakpoint is reached, stop extending
+ @if ($breakpoint == $name) {
+ $extend-breakpoint: false;
+ }
+ }
+ }
+ }
+ }
+}
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-@if $enable-grid-classes {
- // Single container class with breakpoint max-widths
- .container {
- @include make-container();
- @include make-container-max-widths();
- }
-
- // 100% wide container at all breakpoints
- .container-fluid {
- @include make-container();
- }
-
- // Responsive containers that are 100% wide until a breakpoint
- @each $breakpoint, $container-max-width in $container-max-widths {
- .container-#{$breakpoint} {
- @extend .container-fluid;
- }
-
- @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
- %responsive-container-#{$breakpoint} {
- max-width: $container-max-width;
- }
-
- // Extend each breakpoint which is smaller or equal to the current breakpoint
- $extend-breakpoint: true;
-
- @each $name, $width in $grid-breakpoints {
- @if ($extend-breakpoint) {
- .container#{breakpoint-infix($name, $grid-breakpoints)} {
- @extend %responsive-container-#{$breakpoint};
- }
-
- // Once the current breakpoint is reached, stop extending
- @if ($breakpoint == $name) {
- $extend-breakpoint: false;
- }
- }
- }
- }
- }
-}
-
-
// Row
//
// Rows contain your columns.
// Layout
@import "mixins/clearfix";
-@import "mixins/grid-framework";
+@import "mixins/container";
@import "mixins/grid";
@import "variables";
@import "mixins/breakpoints";
-@import "mixins/grid-framework";
+@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
+@import "containers";
@import "grid";
@import "utilities";
@import "reboot";
@import "type";
@import "images";
+@import "containers";
@import "grid";
@import "tables";
@import "forms";
--- /dev/null
+// Container mixins
+
+@mixin make-container($padding-x: $container-padding-x) {
+ width: 100%;
+ padding-right: $padding-x;
+ padding-left: $padding-x;
+ margin-right: auto;
+ margin-left: auto;
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint, $container-max-width in $max-widths {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ max-width: $container-max-width;
+ }
+ }
+}
+++ /dev/null
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// 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;
- min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
- max-width: 100%;
- }
-
- @for $i from 1 through $grid-row-columns {
- .row-cols#{$infix}-#{$i} {
- @include row-cols($i);
- }
- }
-
- .col#{$infix}-auto {
- @include make-col-auto();
- }
-
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @include make-col($i, $columns);
- }
- }
-
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
- @for $i from 0 through ($columns - 1) {
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
- .offset#{$infix}-#{$i} {
- @include make-col-offset($i, $columns);
- }
- }
- }
- }
- }
-}
//
// Generate semantic grid columns with these mixins.
-@mixin make-container($padding-x: $container-padding-x) {
- width: 100%;
- padding-right: $padding-x;
- padding-left: $padding-x;
- margin-right: auto;
- margin-left: auto;
-}
-
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
- @each $breakpoint, $container-max-width in $max-widths {
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- max-width: $container-max-width;
- }
- }
-}
-
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
max-width: 100% / $count;
}
}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// 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;
+ min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
+ max-width: 100%;
+ }
+
+ @for $i from 1 through $grid-row-columns {
+ .row-cols#{$infix}-#{$i} {
+ @include row-cols($i);
+ }
+ }
+
+ .col#{$infix}-auto {
+ @include make-col-auto();
+ }
+
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
+ }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
+ }
+ }
+ }
+ }
+}
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
| `$enable-prefers-reduced-motion-media-query` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
-| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
+| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
- Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
- The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
+- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146)
- Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271)
- The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-yiq()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-yiq()`.
- The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-yiq()`.
projects / thirdparty / bootstrap.git / commitdiff
