mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 23:59:53 +02:00
Code Issues Releases Wiki Activity

Implement CSS layers

Browse Source 
Rearrange and comment import stack

Move content stylesheets to new folder
This commit is contained in:
Mark Otto
2025-02-19 23:08:52 -08:00
parent 0f5fba9c63
commit c1e8462c4b
57 changed files with 5000 additions and 4889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
scss/content/_images.scss Normal file
View File

@@ -0,0 +1,51 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/image" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@layer content {
// Responsive images (ensure images don't scale beyond their parents)
//
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid();
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
@include border-radius($thumbnail-border-radius);
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid();
}
//
// Figures
//
.figure {
// Ensures the caption's text aligns with the image.
display: inline-block;
}
.figure-img {
margin-bottom: $spacer * .5;
line-height: 1;
}
.figure-caption {
@include font-size($figure-caption-font-size);
color: $figure-caption-color;
}
}

618
scss/content/_reboot.scss Normal file
View File

@@ -0,0 +1,618 @@
@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
@layer reboot {
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box;
}
// Root
//
// Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated.
:root {
@if $font-size-root != null {
@include font-size(var(--#{$prefix}root-font-size));
}
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
}
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
// scss-docs-end reboot-body-rules
// Content grouping
//
// 1. Reset Firefox's gray color
hr {
margin: $hr-margin-y 0;
color: $hr-color; // 1
border: 0;
border-top: $hr-border-width solid $hr-border-color;
opacity: $hr-opacity;
}
// Typography
//
// 1. Remove top margins from headings
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: var(--#{$prefix}heading-color);
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `rem` units instead of `em`.
p {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
}
// Abbreviations
//
// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 2. Add explicit cursor to indicate changed behavior.
// 3. Prevent the text-decoration to be skipped.
abbr[title] {
text-decoration: underline dotted; // 1
cursor: help; // 2
text-decoration-skip-ink: none; // 3
}
// Address
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
// Lists
ol,
ul {
padding-left: 2rem;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
dt {
font-weight: $dt-font-weight;
}
// 1. Undo browser default
dd {
margin-bottom: .5rem;
margin-left: 0; // 1
}
// Blockquote
blockquote {
margin: 0 0 1rem;
}
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
b,
strong {
font-weight: $font-weight-bolder;
}
// Small
//
// Add the correct font size in all browsers
small {
@include font-size($small-font-size);
}
// Mark
mark {
padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
}
// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
sub,
sup {
position: relative;
@include font-size($sub-sup-font-size);
line-height: 0;
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
// Links
a {
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
&:hover {
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}
// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402
a:not([href]):not([class]) {
&,
&:hover {
color: inherit;
text-decoration: none;
}
}
// Code
pre,
code,
kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
// 1. Remove browser default top margin
// 2. Reset browser default of `1em` to use `rem`s
// 3. Don't allow content to break outside
pre {
display: block;
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
@include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
@include font-size(inherit);
color: inherit;
word-break: normal;
}
}
code {
@include font-size($code-font-size);
color: var(--#{$prefix}code-color);
word-wrap: break-word;
// Streamline the style when inside anchors to avoid broken underline and more
a > & {
color: inherit;
}
}
kbd {
padding: $kbd-padding-y $kbd-padding-x;
@include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
@include font-size(1em);
font-weight: $nested-kbd-font-weight;
}
}
// Figures
//
// Apply a consistent margin strategy (matches our type styles).
figure {
margin: 0 0 1rem;
}
// Images and content
img,
svg {
vertical-align: middle;
}
// Tables
//
// Prevent double borders
table {
caption-side: bottom;
border-collapse: collapse;
}
caption {
padding-top: $table-cell-padding-y;
padding-bottom: $table-cell-padding-y;
color: $table-caption-color;
text-align: left;
}
// 1. Removes font-weight bold by inheriting
// 2. Matches default `<td>` alignment by inheriting `text-align`.
// 3. Fix alignment for Safari
th {
font-weight: $table-th-font-weight; // 1
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
}
thead,
tbody,
tfoot,
tr,
td,
th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
// Forms
//
// 1. Allow labels to use `margin` for spacing.
label {
display: inline-block; // 1
}
// Remove the default `border-radius` that macOS Chrome adds.
// See https://github.com/twbs/bootstrap/issues/24093
button {
// stylelint-disable-next-line property-disallowed-list
border-radius: 0;
}
// Explicitly remove focus outline in Chromium when it shouldn't be
// visible (e.g. as result of mouse click or touch tap). It already
// should be doing this automatically, but seems to currently be
// confused and applies its very visible two-tone outline anyway.
button:focus:not(:focus-visible) {
outline: 0;
}
// 1. Remove the margin in Firefox and Safari
input,
button,
select,
optgroup,
textarea {
margin: 0; // 1
font-family: inherit;
@include font-size(inherit);
line-height: inherit;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Set the cursor for non-`<button>` buttons
//
// Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] {
cursor: pointer;
}
select {
// Remove the inheritance of word-wrap in Safari.
// See https://github.com/twbs/bootstrap/issues/24990
word-wrap: normal;
// Undo the opacity change from Chrome
&:disabled {
opacity: 1;
}
}
// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
// See https://stackoverflow.com/a/54997118
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
display: none !important;
}
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Opinionated: add "hand" cursor to non-disabled button elements.
button,
[type="button"], // 1
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
@if $enable-button-pointers {
&:not(:disabled) {
cursor: pointer; // 3
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
::-moz-focus-inner {
padding: 0;
border-style: none;
}
// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
textarea {
resize: vertical; // 1
}
// 1. Browsers set a default `min-width: min-content;` on fieldsets,
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
// So we reset that to ensure fieldsets behave more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
fieldset {
min-width: 0; // 1
padding: 0; // 2
margin: 0; // 2
border: 0; // 2
}
// 1. By using `float: left`, the legend will behave like a block element.
// This way the border of a fieldset wraps around the legend if present.
// 2. Fix wrapping bug.
// See https://github.com/twbs/bootstrap/issues/29712
legend {
float: left; // 1
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
font-weight: $legend-font-weight;
line-height: inherit;
@include font-size($legend-font-size);
+ * {
clear: left; // 2
}
}
// Fix height of inputs with a type of datetime-local, date, month, week, or time
// See https://github.com/twbs/bootstrap/issues/18842
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
::-webkit-inner-spin-button {
height: auto;
}
// 1. This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
// 2. Correct the outline style in Safari.
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// 1. A few input types should stay LTR
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
// 2. RTL only output
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/
// Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration {
-webkit-appearance: none;
}
// Remove padding around color pickers in webkit browsers
::-webkit-color-swatch-wrapper {
padding: 0;
}
// 1. Inherit font family and line height for file input buttons
// 2. Correct the inability to style clickable types in iOS and Safari.
::file-selector-button {
font: inherit; // 1
-webkit-appearance: button; // 2
}
// Correct element displays
output {
display: inline-block;
}
// Remove border from iframe
iframe {
border: 0;
}
// Summary
//
// 1. Add the correct display in all browsers
summary {
display: list-item; // 1
cursor: pointer;
}
// Progress
//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.
[hidden] {
display: none !important;
}
}

205
scss/content/_tables.scss Normal file
View File

@@ -0,0 +1,205 @@
@use "sass:map";
@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../layout/breakpoints" as *;
@layer content {
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
//
// Basic Bootstrap table
//
.table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
// End of reset
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-accent-bg: #{$table-accent-bg};
--#{$prefix}table-striped-color: #{$table-striped-color};
--#{$prefix}table-striped-bg: #{$table-striped-bg};
--#{$prefix}table-active-color: #{$table-active-color};
--#{$prefix}table-active-bg: #{$table-active-bg};
--#{$prefix}table-hover-color: #{$table-hover-color};
--#{$prefix}table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);
// Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
// We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
// Another advantage is that this generates less code and makes the selector less specific making it easier to override.
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}
> tbody {
vertical-align: inherit;
}
> thead {
vertical-align: bottom;
}
}
.table-group-divider {
border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//
// Change placement of captions with a class
//
.caption-top {
caption-side: top;
}
//
// Condensed table w/ half padding
//
.table-sm {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
// Border versions
//
// Add or remove borders all around the table and between all the columns.
//
// When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent.
// Therefore we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s
.table-bordered {
> :not(caption) > * {
border-width: $table-border-width 0;
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
}
}
}
.table-borderless {
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
border-bottom-width: 0;
}
> :not(:first-child) {
border-top-width: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
// For rows
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// For columns
.table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}
// Active table
//
// The `.table-active` class can be added to highlight rows or cells
.table-active {
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody > tr:hover > * {
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
}
}
// Table variants
//
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
@each $color, $value in $table-variants {
@include table-variant($color, $value);
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
}
}

114
scss/content/_type.scss Normal file
View File

@@ -0,0 +1,114 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/lists" as *;
@use "../vendor/rfs" as *;
@layer content {
//
// Headings
//
// mdo-do: remove extend
// .h1 {
// @extend h1;
// }
// .h2 {
// @extend h2;
// }
// .h3 {
// @extend h3;
// }
// .h4 {
// @extend h4;
// }
// .h5 {
// @extend h5;
// }
// .h6 {
// @extend h6;
// }
.lead {
@include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
@each $display, $font-size in $display-font-sizes {
.display-#{$display} {
font-family: $display-font-family;
font-style: $display-font-style;
font-weight: $display-font-weight;
line-height: $display-line-height;
@include font-size($font-size);
}
}
//
// Emphasis
//
.small {
// @extend small;
}
.mark {
// @extend mark;
}
//
// Lists
//
.list-unstyled {
@include list-unstyled();
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled();
}
.list-inline-item {
display: inline-block;
&:not(:last-child) {
margin-right: $list-inline-padding;
}
}
//
// Misc
//
// Builds on `abbr`
.initialism {
@include font-size($initialism-font-size);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-font-size);
> :last-child {
margin-bottom: 0;
}
}
.blockquote-footer {
margin-top: -$blockquote-margin-y;
margin-bottom: $blockquote-margin-y;
@include font-size($blockquote-footer-font-size);
color: $blockquote-footer-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp
}
}
}

4
scss/content/index.scss Normal file
View File

@@ -0,0 +1,4 @@
@forward "reboot";
@forward "type";
@forward "tables";
@forward "images";