--- /dev/null
+// Configuration
+//
+// Variables and settings not related to theme, components, and more go here. It does include layout.
+
+$prefix: bs- !default;
+
+$enable-container-classes: true !default;
+// more to come here…
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1400px
+) !default;
+// scss-docs-end grid-breakpoints
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1320px
+) !default;
+// scss-docs-end container-max-widths
+
+$container-padding-x: $grid-gutter-width !default;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+ ("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+++ /dev/null
-// Row
-//
-// Rows contain your columns.
-
-:root {
- @each $name, $value in $grid-breakpoints {
- --#{$prefix}breakpoint-#{$name}: #{$value};
- }
-}
-
-@if $enable-grid-classes {
- .row {
- @include make-row();
-
- > * {
- @include make-col-ready();
- }
- }
-}
-
-@if $enable-cssgrid {
- .grid {
- display: grid;
- grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
- grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
- gap: var(--#{$prefix}gap, #{$grid-gutter-width});
-
- @include make-cssgrid();
- }
-}
-
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
- @include make-grid-columns();
-}
@import "mixins/deprecate";
// Helpers
-@import "mixins/breakpoints";
+// @import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
// Layout
@import "mixins/clearfix";
-@import "mixins/container";
-@import "mixins/grid";
+// @import "mixins/container";
+// @import "mixins/grid";
// Prefix for :root CSS variables
-$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix: $variable-prefix !default;
+// $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+// $prefix: $variable-prefix !default;
// Gradient
//
$paragraph-margin-bottom: 1rem !default;
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-// scss-docs-start grid-breakpoints
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1400px
-) !default;
-// scss-docs-end grid-breakpoints
+// // Grid breakpoints
+// //
+// // Define the minimum dimensions at which your layout will change,
+// // adapting to different screen sizes, for use in media queries.
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+// // scss-docs-start grid-breakpoints
+// $grid-breakpoints: (
+// xs: 0,
+// sm: 576px,
+// md: 768px,
+// lg: 992px,
+// xl: 1200px,
+// xxl: 1400px
+// ) !default;
+// // scss-docs-end grid-breakpoints
+// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-// scss-docs-start container-max-widths
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px,
- xxl: 1320px
-) !default;
-// scss-docs-end container-max-widths
-@include _assert-ascending($container-max-widths, "$container-max-widths");
+// // Grid containers
+// //
+// // Define the maximum width of `.container` for different screen sizes.
+// // scss-docs-start container-max-widths
+// $container-max-widths: (
+// sm: 540px,
+// md: 720px,
+// lg: 960px,
+// xl: 1140px,
+// xxl: 1320px
+// ) !default;
+// // scss-docs-end container-max-widths
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
+// @include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// // Grid columns
+// //
+// // Set the number of columns and specify the width of the gutters.
-$grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
-$grid-row-columns: 6 !default;
+// $grid-columns: 12 !default;
+// $grid-gutter-width: 1.5rem !default;
+// $grid-row-columns: 6 !default;
-// Container padding
+// // Container padding
-$container-padding-x: $grid-gutter-width !default;
+// $container-padding-x: $grid-gutter-width !default;
// Components
-@import "mixins/banner";
-@include bsBanner("");
+// @import "mixins/banner";
+// @include bsBanner("");
// scss-docs-start import-stack
// Configuration
+@use "config" as *;
+
@import "functions";
@import "colors";
@import "variables";
@import "reboot";
@import "type";
@import "images";
-@import "containers";
-@import "grid";
+// @import "containers";
+// @import "grid";
+@import "layout";
@import "tables";
@import "forms";
@import "buttons";
+@use "../config" as *;
+@use "breakpoints" as *;
+
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
+// Container mixins
+
+@mixin make-container($gutter: $container-padding-x) {
+ --#{$prefix}gutter-x: #{$gutter};
+ --#{$prefix}gutter-y: 0;
+ width: 100%;
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ margin-right: auto;
+ margin-left: auto;
+}
@if $enable-container-classes {
// Single container class with breakpoint max-widths
--- /dev/null
+@use "sass:map";
+@use "../config" as *;
+@use "breakpoints" as *;
+
+// mdo-do
+// - check gap utilities as replacement for gutter classes from v5
+
+// Row
+//
+// Rows contain your columns.
+
+:root {
+ @each $name, $value in $grid-breakpoints {
+ --#{$prefix}breakpoint-#{$name}: #{$value};
+ }
+}
+
+.grid {
+ --#{$prefix}columns: #{$grid-columns};
+ --#{$prefix}rows: 1;
+ --#{$prefix}gap: #{$grid-gutter-width};
+
+ display: grid;
+ grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
+ grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
+ gap: var(--#{$prefix}gap);
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+ @if $grid-columns > 0 {
+ @for $i from 1 through $grid-columns {
+ .col#{$infix}-#{$i} {
+ grid-column: auto / span $i;
+ }
+
+ .end#{$infix}-#{$i} {
+ grid-column-end: $i;
+ }
+ }
+
+ // Start with `1` because `0` is an invalid value.
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+ @for $i from 1 through ($grid-columns - 1) {
+ .col-start#{$infix}-#{$i} {
+ grid-column-start: $i;
+ }
+ }
+ }
+ }
+}
+
+// mdo-do: add to utilities?
+.grid-cols-subgrid {
+ grid-template-columns: subgrid;
+}
+
+.grid-fill {
+ --#{$prefix}gap: #{$grid-gutter-width};
+
+ display: grid;
+ grid-auto-flow: row;
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+ gap: var(--#{$prefix}gap);
+}
+
+// mdo-do: add to utilities?
+.g-col-auto {
+ grid-column: auto/auto;
+}
+
+// mdo-do: add to utilities?
+.grid-cols-3 {
+ --#{$prefix}columns: 3;
+}
+.grid-cols-4 {
+ --#{$prefix}columns: 4;
+}
+.grid-cols-6 {
+ --#{$prefix}columns: 6;
+}
--- /dev/null
+@import "breakpoints";
+@import "containers";
+@import "grid";
\ No newline at end of file
+++ /dev/null
-// Container mixins
-
-@mixin make-container($gutter: $container-padding-x) {
- --#{$prefix}gutter-x: #{$gutter};
- --#{$prefix}gutter-y: 0;
- width: 100%;
- padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- margin-right: auto;
- margin-left: auto;
-}
+++ /dev/null
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-row($gutter: $grid-gutter-width) {
- --#{$prefix}gutter-x: #{$gutter};
- --#{$prefix}gutter-y: 0;
- display: flex;
- flex-wrap: wrap;
- // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
- margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
- margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
- margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-}
-
-@mixin make-col-ready() {
- // Add box sizing if only the grid is loaded
- box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
- // Prevent columns from becoming too narrow when at smaller grid tiers by
- // 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: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- margin-top: var(--#{$prefix}gutter-y);
-}
-
-@mixin make-col($size: false, $columns: $grid-columns) {
- @if $size {
- flex: 0 0 auto;
- width: percentage(divide($size, $columns));
-
- } @else {
- flex: 1 1 0;
- max-width: 100%;
- }
-}
-
-@mixin make-col-auto() {
- flex: 0 0 auto;
- width: auto;
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: divide($size, $columns);
- margin-left: if($num == 0, 0, percentage($num));
-}
-
-// Row columns
-//
-// Specify on a parent element(e.g., .row) to force immediate children into NN
-// number of columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-@mixin row-cols($count) {
- > * {
- flex: 0 0 auto;
- width: percentage(divide(1, $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) {
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
-
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
- .col#{$infix} {
- flex: 1 0 0;
- }
-
- .row-cols#{$infix}-auto > * {
- @include make-col-auto();
- }
-
- @if $grid-row-columns > 0 {
- @for $i from 1 through $grid-row-columns {
- .row-cols#{$infix}-#{$i} {
- @include row-cols($i);
- }
- }
- }
-
- .col#{$infix}-auto {
- @include make-col-auto();
- }
-
- @if $columns > 0 {
- @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);
- }
- }
- }
- }
-
- // Gutters
- //
- // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
- @each $key, $value in $gutters {
- .g#{$infix}-#{$key},
- .gx#{$infix}-#{$key} {
- --#{$prefix}gutter-x: #{$value};
- }
-
- .g#{$infix}-#{$key},
- .gy#{$infix}-#{$key} {
- --#{$prefix}gutter-y: #{$value};
- }
- }
- }
- }
-}
-
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
-
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- @if $columns > 0 {
- @for $i from 1 through $columns {
- .g-col#{$infix}-#{$i} {
- grid-column: auto / span $i;
- }
- }
-
- // Start with `1` because `0` is an invalid value.
- // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
- @for $i from 1 through ($columns - 1) {
- .g-start#{$infix}-#{$i} {
- grid-column-start: $i;
- }
- }
- }
- }
- }
-}
projects / thirdparty / bootstrap.git / commitdiff
