diff --git a/README.md b/README.md index 6795ebe..db34fa4 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ For simplicity, this project will use the same version numbers as Bootstrap. ## Changelog -https://github.com/twbs/bootstrap/releases/tag/v5.3.0 +https://github.com/twbs/bootstrap/releases/tag/v5.3.1 ## Copyright and license diff --git a/_nav.scss b/_nav.scss index aedbdba..ff073d3 100644 --- a/_nav.scss +++ b/_nav.scss @@ -44,7 +44,8 @@ } // Disabled state lightens text - &.disabled { + &.disabled, + &:disabled { color: var(--#{$prefix}nav-link-disabled-color); pointer-events: none; cursor: default; @@ -79,13 +80,6 @@ isolation: isolate; border-color: var(--#{$prefix}nav-tabs-link-hover-border-color); } - - &.disabled, - &:disabled { - color: var(--#{$prefix}nav-link-disabled-color); - background-color: transparent; - border-color: transparent; - } } .nav-link.active, @@ -117,12 +111,6 @@ .nav-link { @include border-radius(var(--#{$prefix}nav-pills-border-radius)); - - &:disabled { - color: var(--#{$prefix}nav-link-disabled-color); - background-color: transparent; - border-color: transparent; - } } .nav-link.active, diff --git a/_reboot.scss b/_reboot.scss index 4226ab8..81ea216 100644 --- a/_reboot.scss +++ b/_reboot.scss @@ -524,15 +524,15 @@ legend { height: auto; } -// 1. Correct the outline style in Safari. -// 2. This overrides the extra rounded corners on search inputs in iOS so that our +// 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"] { - outline-offset: -2px; // 1 - -webkit-appearance: textfield; // 2 + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 } // 1. A few input types should stay LTR diff --git a/_variables-dark.scss b/_variables-dark.scss index 494eefa..79f29a3 100644 --- a/_variables-dark.scss +++ b/_variables-dark.scss @@ -40,7 +40,7 @@ $light-border-subtle-dark: $gray-700 !default; $dark-border-subtle-dark: $gray-800 !default; // scss-docs-end theme-border-subtle-dark-variables -$body-color-dark: $gray-500 !default; +$body-color-dark: $gray-300 !default; $body-bg-dark: $gray-900 !default; $body-secondary-color-dark: rgba($body-color-dark, .75) !default; $body-secondary-bg-dark: $gray-800 !default; diff --git a/_variables.scss b/_variables.scss index 0288898..eb066c6 100644 --- a/_variables.scss +++ b/_variables.scss @@ -705,6 +705,10 @@ $hr-border-color: null !default; // Allows for inherited colors $hr-border-width: var(--#{$prefix}border-width) !default; $hr-opacity: .25 !default; +// scss-docs-start vr-variables +$vr-border-width: var(--#{$prefix}border-width) !default; +// scss-docs-end vr-variables + $legend-margin-bottom: .5rem !default; $legend-font-size: 1.5rem !default; $legend-font-weight: null !default; @@ -1216,7 +1220,8 @@ $navbar-dark-color: rgba($white, .55) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-dark-icon-color: $navbar-dark-color !default; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; @@ -1543,9 +1548,6 @@ $alert-margin-bottom: 1rem !default; $alert-border-radius: var(--#{$prefix}border-radius) !default; $alert-link-font-weight: $font-weight-bold !default; $alert-border-width: var(--#{$prefix}border-width) !default; -$alert-bg-scale: -80% !default; -$alert-border-scale: -70% !default; -$alert-color-scale: 40% !default; $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side // scss-docs-end alert-variables diff --git a/forms/_floating-labels.scss b/forms/_floating-labels.scss index 3ca4264..2cf0470 100644 --- a/forms/_floating-labels.scss +++ b/forms/_floating-labels.scss @@ -84,7 +84,8 @@ } } - > :disabled ~ label { + > :disabled ~ label, + > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity color: $form-floating-label-disabled-color; &::after { diff --git a/forms/_form-check.scss b/forms/_form-check.scss index 83aacba..f8d9b08 100644 --- a/forms/_form-check.scss +++ b/forms/_form-check.scss @@ -33,13 +33,13 @@ height: $form-check-input-width; margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height vertical-align: top; + appearance: none; background-color: var(--#{$prefix}form-check-bg); background-image: var(--#{$prefix}form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; border: $form-check-input-border; - appearance: none; print-color-adjust: exact; // Keep themed appearance for print @include transition($form-check-transition); diff --git a/forms/_form-control.scss b/forms/_form-control.scss index ca2a7df..67ae5f4 100644 --- a/forms/_form-control.scss +++ b/forms/_form-control.scss @@ -11,10 +11,10 @@ font-weight: $input-font-weight; line-height: $input-line-height; color: $input-color; + appearance: none; // Fix appearance for date inputs in Safari background-color: $input-bg; background-clip: padding-box; border: $input-border-width solid $input-border-color; - appearance: none; // Fix appearance for date inputs in Safari // Note: This has no effect on `s in CSS. @include border-radius($input-border-radius, 0); diff --git a/forms/_form-range.scss b/forms/_form-range.scss index 6de4213..4732213 100644 --- a/forms/_form-range.scss +++ b/forms/_form-range.scss @@ -8,8 +8,8 @@ width: 100%; height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding - background-color: transparent; appearance: none; + background-color: transparent; &:focus { outline: 0; @@ -28,12 +28,12 @@ width: $form-range-thumb-width; height: $form-range-thumb-height; margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific + appearance: none; @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); @include box-shadow($form-range-thumb-box-shadow); @include transition($form-range-thumb-transition); - appearance: none; &:active { @include gradient-bg($form-range-thumb-active-bg); @@ -54,12 +54,12 @@ &::-moz-range-thumb { width: $form-range-thumb-width; height: $form-range-thumb-height; + appearance: none; @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); @include box-shadow($form-range-thumb-box-shadow); @include transition($form-range-thumb-transition); - appearance: none; &:active { @include gradient-bg($form-range-thumb-active-bg); diff --git a/forms/_form-select.scss b/forms/_form-select.scss index 0b26323..69ace52 100644 --- a/forms/_form-select.scss +++ b/forms/_form-select.scss @@ -14,6 +14,7 @@ font-weight: $form-select-font-weight; line-height: $form-select-line-height; color: $form-select-color; + appearance: none; background-color: $form-select-bg; background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); background-repeat: no-repeat; @@ -23,7 +24,6 @@ @include border-radius($form-select-border-radius, 0); @include box-shadow($form-select-box-shadow); @include transition($form-select-transition); - appearance: none; &:focus { border-color: $form-select-focus-border-color; diff --git a/helpers/_color-bg.scss b/helpers/_color-bg.scss index c00acde..1a3a4cf 100644 --- a/helpers/_color-bg.scss +++ b/helpers/_color-bg.scss @@ -1,8 +1,7 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { - $color-rgb: to-rgb($value); .text-bg-#{$color} { color: color-contrast($value) if($enable-important-utilities, !important, null); - background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); + background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); } } diff --git a/helpers/_vr.scss b/helpers/_vr.scss index 9bca099..b6f9d42 100644 --- a/helpers/_vr.scss +++ b/helpers/_vr.scss @@ -1,7 +1,7 @@ .vr { display: inline-block; align-self: stretch; - width: 1px; + width: $vr-border-width; min-height: 1em; background-color: currentcolor; opacity: $hr-opacity; diff --git a/mixins/_banner.scss b/mixins/_banner.scss index 4323989..aa83dcc 100644 --- a/mixins/_banner.scss +++ b/mixins/_banner.scss @@ -1,6 +1,6 @@ @mixin bsBanner($file) { /*! - * Bootstrap #{$file} v5.3.0 (https://getbootstrap.com/) + * Bootstrap #{$file} v5.3.1 (https://getbootstrap.com/) * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ diff --git a/package.json b/package.json index 3c746a3..8212f2a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-scss", - "version": "5.3.0", + "version": "5.3.1", "description": "Bootstrap's SCSS files (only)", "main": "bootstrap.scss", "repository": {