mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-23 20:54:22 +01:00
0e1aada576
- Also remove regular flexbox grid styles, leading with CSS Grid - Move some mixins around
1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
{"version":3,"sourceRoot":"","sources":["../../../scss/layout/_containers.scss","../../../scss/layout/_breakpoints.scss","../../../scss/_config.scss","../../../scss/layout/_grid.scss"],"names":[],"mappings":"AAoBE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAXA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACgDE;ED9BE;IACE,WEIe;;;ADyBnB;ED9BE;IACE,WEIe;;;ADyBnB;ED9BE;IACE,WEIe;;;ADyBnB;ED9BE;IACE,WEIe;;;ADyBnB;ED9BE;IACE,WEIe;;;AC3BvB;EAEI;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAIJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;;;AASM;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AACX;EACE;;;AAGF;EACE,iBANS;;;AAaX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AFkBf;EE7BI;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EAaX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;;AFkBf;EE7BI;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EAaX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;;AFkBf;EE7BI;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EAaX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;;AFkBf;EE7BI;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EAaX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;;AFkBf;EE7BI;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EACX;IACE;;EAGF;IACE,iBANS;;EAaX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;EACX;IACE,mBAFS;;;AAUnB;EACE;;;AAGF;EACE;EAEA;EACA;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE","file":"index.css","sourcesContent":["@use \"../config\" as *;\n@use \"breakpoints\" as *;\n\n// Container widths\n//\n// Set the container width, and override it for fixed navbars in media queries.\n// Container mixins\n\n@mixin make-container($gutter: $container-padding-x) {\n --#{$prefix}gutter-x: #{$gutter};\n --#{$prefix}gutter-y: 0;\n width: 100%;\n padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n margin-right: auto;\n margin-left: auto;\n}\n\n@if $enable-container-classes {\n // Single container class with breakpoint max-widths\n .container,\n // 100% wide container at all breakpoints\n .container-fluid {\n @include make-container();\n }\n\n // Responsive containers that are 100% wide until a breakpoint\n @each $breakpoint, $container-max-width in $container-max-widths {\n .container-#{$breakpoint} {\n @extend .container-fluid;\n }\n\n @include media-breakpoint-up($breakpoint, $grid-breakpoints) {\n %responsive-container-#{$breakpoint} {\n max-width: $container-max-width;\n }\n\n // Extend each breakpoint which is smaller or equal to the current breakpoint\n $extend-breakpoint: true;\n\n @each $name, $width in $grid-breakpoints {\n @if ($extend-breakpoint) {\n .container#{breakpoint-infix($name, $grid-breakpoints)} {\n @extend %responsive-container-#{$breakpoint};\n }\n\n // Once the current breakpoint is reached, stop extending\n @if ($breakpoint == $name) {\n $extend-breakpoint: false;\n }\n }\n }\n }\n }\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @if not $n {\n @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n }\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $next: breakpoint-next($name, $breakpoints);\n $max: breakpoint-max($next, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($next, $breakpoints) {\n @content;\n }\n }\n}\n","// Configuration\n//\n// Variables and settings not related to theme, components, and more go here. It does include layout.\n\n$prefix: bs- !default;\n\n$enable-container-classes: true !default;\n// more to come here…\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n// scss-docs-start grid-breakpoints\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n xxl: 1400px\n) !default;\n// scss-docs-end grid-breakpoints\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 1.5rem !default;\n$grid-row-columns: 6 !default;\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n// scss-docs-start container-max-widths\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px,\n xxl: 1320px\n) !default;\n// scss-docs-end container-max-widths\n\n$container-padding-x: $grid-gutter-width !default;\n\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n (\"<\", \"%3c\"),\n (\">\", \"%3e\"),\n (\"#\", \"%23\"),\n (\"(\", \"%28\"),\n (\")\", \"%29\"),\n) !default;\n","@use \"sass:map\";\n@use \"../config\" as *;\n@use \"breakpoints\" as *;\n\n// mdo-do\n// - check gap utilities as replacement for gutter classes from v5\n\n// Row\n//\n// Rows contain your columns.\n\n:root {\n @each $name, $value in $grid-breakpoints {\n --#{$prefix}breakpoint-#{$name}: #{$value};\n }\n}\n\n.grid {\n --#{$prefix}columns: #{$grid-columns};\n --#{$prefix}rows: 1;\n --#{$prefix}gap: #{$grid-gutter-width};\n\n display: grid;\n grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);\n grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);\n gap: var(--#{$prefix}gap);\n}\n\n@each $breakpoint in map.keys($grid-breakpoints) {\n $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n @include media-breakpoint-up($breakpoint, $grid-breakpoints) {\n @if $grid-columns > 0 {\n @for $i from 1 through $grid-columns {\n .col#{$infix}-#{$i} {\n grid-column: auto / span $i;\n }\n\n .end#{$infix}-#{$i} {\n grid-column-end: $i;\n }\n }\n\n // Start with `1` because `0` is an invalid value.\n // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.\n @for $i from 1 through ($grid-columns - 1) {\n .col-start#{$infix}-#{$i} {\n grid-column-start: $i;\n }\n }\n }\n }\n}\n\n// mdo-do: add to utilities?\n.grid-cols-subgrid {\n grid-template-columns: subgrid;\n}\n\n.grid-fill {\n --#{$prefix}gap: #{$grid-gutter-width};\n\n display: grid;\n grid-auto-flow: row;\n grid-template-columns: repeat(auto-fit, minmax(0, 1fr));\n gap: var(--#{$prefix}gap);\n}\n\n// mdo-do: add to utilities?\n.g-col-auto {\n grid-column: auto/auto;\n}\n\n// mdo-do: add to utilities?\n.grid-cols-3 {\n --#{$prefix}columns: 3;\n}\n.grid-cols-4 {\n --#{$prefix}columns: 4;\n}\n.grid-cols-6 {\n --#{$prefix}columns: 6;\n}\n"]} |