mirror of https://github.com/twbs/bootstrap.git
Reorganize scss folder
This commit is contained in:
Mark Otto
parent
6997db4d71
commit
a1eb57cac2
|
|
@ -0,0 +1,58 @@
|
|||
// 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;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// 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();
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
@import "mixins/deprecate";
|
||||
|
||||
// Helpers
|
||||
@import "mixins/breakpoints";
|
||||
// @import "mixins/breakpoints";
|
||||
@import "mixins/color-mode";
|
||||
@import "mixins/color-scheme";
|
||||
@import "mixins/image";
|
||||
|
|
@ -38,5 +38,5 @@
|
|||
|
||||
// Layout
|
||||
@import "mixins/clearfix";
|
||||
@import "mixins/container";
|
||||
@import "mixins/grid";
|
||||
// @import "mixins/container";
|
||||
// @import "mixins/grid";
|
||||
|
|
|
|||
|
|
@ -389,8 +389,8 @@ $color-mode-type: data !default; // `data` or `media-query`
|
|||
|
||||
// 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
|
||||
//
|
||||
|
|
@ -475,54 +475,54 @@ $icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
|||
$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.
|
||||
// // 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
|
||||
// // 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");
|
||||
// @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.
|
||||
// // 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
|
||||
// // 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");
|
||||
// @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
|
||||
// //
|
||||
// // 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
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
@import "mixins/banner";
|
||||
@include bsBanner("");
|
||||
// @import "mixins/banner";
|
||||
// @include bsBanner("");
|
||||
|
||||
|
||||
// scss-docs-start import-stack
|
||||
// Configuration
|
||||
@use "config" as *;
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
|
|
@ -16,8 +18,9 @@
|
|||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
// @import "containers";
|
||||
// @import "grid";
|
||||
@import "layout";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,20 @@
|
|||
@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
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "breakpoints";
|
||||
@import "containers";
|
||||
@import "grid";
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue