mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Migrate to Sass modules

Browse Source
This commit is contained in:
Mark Otto
2025-02-18 09:50:10 -08:00
parent eaa83fa86b
commit d96374ada9
106 changed files with 2001 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scss/forms/_floating-labels.scss
View File

@@ -1,3 +1,8 @@
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/transition" as *;
.form-floating {
position: relative;

9
scss/forms/_form-check.scss
View File

@@ -1,3 +1,12 @@
@use "../config" as *;
@use "../variables" as *;
@use "../functions" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
//
// Check/radio
//

10
scss/forms/_form-control.scss
View File

@@ -1,3 +1,11 @@
@use "sass:math";
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
//
// General form controls (plus a few specific high-level interventions)
//
@@ -56,7 +64,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM

6
scss/forms/_form-range.scss
View File

@@ -1,3 +1,9 @@
@use "../variables" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/gradients" as *;
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo

8
scss/forms/_form-select.scss
View File

@@ -1,3 +1,11 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/transition" as *;
@use "../mixins/color-mode" as *;
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from

2
scss/forms/_form-text.scss
View File

@@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Form text
//

10
scss/forms/_input-group.scss
View File

@@ -1,3 +1,9 @@
@use "sass:map";
@use "sass:string";
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
//
// Base styles
//
@@ -116,8 +122,8 @@
}
$validation-messages: "";
@each $state in map-keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
@each $state in map.keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {

2
scss/forms/_labels.scss
View File

@@ -1,3 +1,5 @@
@use "../variables" as *;
@use "../vendor/rfs" as *;
//
// Labels
//

171
scss/forms/_validation.scss
View File

@@ -1,3 +1,9 @@
@use "../config" as *;
@use "../variables" as *;
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
@@ -5,6 +11,171 @@
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server-side validation.
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if(&, "&", "")}:#{$state},
#{if(&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if(&, "&", "")}.is-#{$state} {
@content;
}
}
}
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
@include font-size($form-feedback-font-size);
font-style: $form-feedback-font-style;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@include form-validation-state-selector($state) {
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
.form-control {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($input-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.form-select {
@include form-validation-state-selector($state) {
border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
border-color: $border-color;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $focus-box-shadow);
} @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $focus-box-shadow;
}
}
}
}
.form-control-color {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
border-color: $border-color;
&:checked {
background-color: $color;
}
&:focus {
box-shadow: $focus-box-shadow;
}
~ .form-check-label {
color: $color;
}
}
}
.form-check-inline .form-check-input {
~ .#{$state}-feedback {
margin-left: .5em;
}
}
.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
> .form-floating:not(:focus-within) {
@include form-validation-state-selector($state) {
@if $state == "valid" {
z-index: 3;
} @else if $state == "invalid" {
z-index: 4;
}
}
}
}
}
// scss-docs-end form-validation-mixins
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);

9
scss/forms/index.scss Normal file
View File

@@ -0,0 +1,9 @@
@forward "labels";
@forward "form-text";
@forward "form-control";
@forward "form-select";
@forward "form-check";
@forward "form-range";
@forward "floating-labels";
@forward "input-group";
@forward "validation";