From 211e37df6cf98a12342330a05960b335e3a0b92a Mon Sep 17 00:00:00 2001 From: crissdev Date: Wed, 7 Jun 2023 18:08:22 +0300 Subject: [PATCH] v5.3.0 --- LICENSE | 3 +- README.md | 8 +- _accordion.scss | 9 + _alert.scss | 19 +- _button-group.scss | 4 +- _buttons.scss | 6 +- _card.scss | 5 + _carousel.scss | 22 +- _close.scss | 41 +++- _dropdown.scss | 1 + _functions.scss | 2 +- _grid.scss | 6 + _helpers.scss | 2 + _list-group.scss | 19 +- _maps.scss | 120 ++++++++++ _mixins.scss | 3 +- _nav.scss | 43 +++- _navbar.scss | 19 +- _offcanvas.scss | 6 +- _pagination.scss | 2 +- _progress.scss | 11 +- _reboot.scss | 6 +- _root.scss | 131 ++++++++++- _tables.scss | 29 ++- _tooltip.scss | 9 +- _utilities.scss | 185 ++++++++++++++-- _variables-dark.scss | 85 +++++++ _variables.scss | 415 ++++++++++++++++++++++------------- bootstrap-grid.scss | 4 +- bootstrap-reboot.scss | 1 + bootstrap-utilities.scss | 1 + bootstrap.scss | 1 + forms/_floating-labels.scss | 25 ++- forms/_form-check.scss | 35 ++- forms/_form-control.scss | 26 ++- forms/_form-select.scss | 13 +- forms/_input-group.scss | 2 +- helpers/_color-bg.scss | 2 - helpers/_colored-links.scss | 22 +- helpers/_focus-ring.scss | 5 + helpers/_icon-link.scss | 25 +++ mixins/_alert.scss | 5 +- mixins/_banner.scss | 6 +- mixins/_caret.scss | 55 ++--- mixins/_color-mode.scss | 21 ++ mixins/_forms.scss | 15 +- mixins/_list-group.scss | 2 + mixins/_utilities.scss | 2 +- mixins/_visually-hidden.scss | 6 +- package.json | 2 +- vendor/_rfs.scss | 52 ++--- 51 files changed, 1194 insertions(+), 345 deletions(-) create mode 100644 _variables-dark.scss create mode 100644 helpers/_focus-ring.scss create mode 100644 helpers/_icon-link.scss create mode 100644 mixins/_color-mode.scss diff --git a/LICENSE b/LICENSE index dda75ca..6633b55 100644 --- a/LICENSE +++ b/LICENSE @@ -1,7 +1,6 @@ The MIT License (MIT) -Copyright (c) 2011-2022 Twitter, Inc. -Copyright (c) 2011-2022 The Bootstrap Authors +Copyright (c) 2011-2023 The Bootstrap Authors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index a97c994..6795ebe 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@

- Bootstrap logo + Bootstrap logo

@@ -13,7 +13,7 @@

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
- Explore Bootstrap docs » + Explore Bootstrap docs »

Report bug @@ -43,7 +43,7 @@ Several quick start options are available: - Install with [npm](https://www.npmjs.com/): `npm install bootstrap-scss` - Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap-scss` -Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-started/introduction/) for information on the framework contents, templates and examples, and more. +Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates and examples, and more. ## Status @@ -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.2.3 +https://github.com/twbs/bootstrap/releases/tag/v5.3.0 ## Copyright and license diff --git a/_accordion.scss b/_accordion.scss index f09601b..75588a5 100644 --- a/_accordion.scss +++ b/_accordion.scss @@ -147,3 +147,12 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/_alert.scss b/_alert.scss index c8bc91b..b8cff9b 100644 --- a/_alert.scss +++ b/_alert.scss @@ -12,6 +12,7 @@ --#{$prefix}alert-border-color: transparent; --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; // scss-docs-end alert-css-vars position: relative; @@ -32,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -54,18 +56,13 @@ // scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert. - -@each $state, $value in $theme-colors { - $alert-background: shift-color($value, $alert-bg-scale); - $alert-border: shift-color($value, $alert-border-scale); - $alert-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { - $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); - } +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { .alert-#{$state} { - @include alert-variant($alert-background, $alert-border, $alert-color); + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); } } // scss-docs-end alert-modifiers diff --git a/_button-group.scss b/_button-group.scss index 79b100c..55ae3f6 100644 --- a/_button-group.scss +++ b/_button-group.scss @@ -39,7 +39,7 @@ // Prevent double borders when buttons are next to each other > :not(.btn-check:first-child) + .btn, > .btn-group:not(:first-child) { - margin-left: -$btn-border-width; + margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list } // Reset rounded corners @@ -126,7 +126,7 @@ > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-top: -$btn-border-width; + margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list } // Reset rounded corners diff --git a/_buttons.scss b/_buttons.scss index f2c4c13..cbc0784 100644 --- a/_buttons.scss +++ b/_buttons.scss @@ -10,7 +10,7 @@ @include rfs($btn-font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; - --#{$prefix}btn-color: #{$body-color}; + --#{$prefix}btn-color: #{$btn-color}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; @@ -169,8 +169,8 @@ --#{$prefix}btn-active-border-color: transparent; --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}btn-disabled-border-color: transparent; - --#{$prefix}btn-box-shadow: none; - --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))}; + --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))}; text-decoration: $link-decoration; @if $enable-gradients { diff --git a/_card.scss b/_card.scss index ce8c02f..d3535a9 100644 --- a/_card.scss +++ b/_card.scss @@ -7,6 +7,8 @@ --#{$prefix}card-spacer-y: #{$card-spacer-y}; --#{$prefix}card-spacer-x: #{$card-spacer-x}; --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; + --#{$prefix}card-title-color: #{$card-title-color}; + --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; --#{$prefix}card-border-width: #{$card-border-width}; --#{$prefix}card-border-color: #{$card-border-color}; --#{$prefix}card-border-radius: #{$card-border-radius}; @@ -28,6 +30,7 @@ flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 height: var(--#{$prefix}card-height); + color: var(--#{$prefix}body-color); word-wrap: break-word; background-color: var(--#{$prefix}card-bg); background-clip: border-box; @@ -73,11 +76,13 @@ .card-title { margin-bottom: var(--#{$prefix}card-title-spacer-y); + color: var(--#{$prefix}card-title-color); } .card-subtitle { margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list margin-bottom: 0; + color: var(--#{$prefix}card-subtitle-color); } .card-text:last-child { diff --git a/_carousel.scss b/_carousel.scss index 858b836..0ac8f87 100644 --- a/_carousel.scss +++ b/_carousel.scss @@ -165,7 +165,6 @@ margin-right: $carousel-control-width; margin-bottom: 1rem; margin-left: $carousel-control-width; - list-style: none; [data-bs-target] { box-sizing: content-box; @@ -210,7 +209,7 @@ // Dark mode carousel -.carousel-dark { +@mixin carousel-dark() { .carousel-control-prev-icon, .carousel-control-next-icon { filter: $carousel-dark-control-icon-filter; @@ -224,3 +223,22 @@ color: $carousel-dark-caption-color; } } + +.carousel-dark { + @include carousel-dark(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + @if $color-mode-type == "media-query" { + .carousel { + @include carousel-dark(); + } + } @else { + .carousel, + &.carousel { + @include carousel-dark(); + } + } + } +} diff --git a/_close.scss b/_close.scss index a0813de..4d6e73c 100644 --- a/_close.scss +++ b/_close.scss @@ -4,37 +4,60 @@ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile .btn-close { + // scss-docs-start close-css-vars + --#{$prefix}btn-close-color: #{$btn-close-color}; + --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; + --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; + --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; + --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; + --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; + --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; + --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; + // scss-docs-end close-css-vars + box-sizing: content-box; width: $btn-close-width; height: $btn-close-height; padding: $btn-close-padding-y $btn-close-padding-x; - color: $btn-close-color; - background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + color: var(--#{$prefix}btn-close-color); + background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements border: 0; // for button elements @include border-radius(); - opacity: $btn-close-opacity; + opacity: var(--#{$prefix}btn-close-opacity); // Override 's hover style &:hover { - color: $btn-close-color; + color: var(--#{$prefix}btn-close-color); text-decoration: none; - opacity: $btn-close-hover-opacity; + opacity: var(--#{$prefix}btn-close-hover-opacity); } &:focus { outline: 0; - box-shadow: $btn-close-focus-shadow; - opacity: $btn-close-focus-opacity; + box-shadow: var(--#{$prefix}btn-close-focus-shadow); + opacity: var(--#{$prefix}btn-close-focus-opacity); } &:disabled, &.disabled { pointer-events: none; user-select: none; - opacity: $btn-close-disabled-opacity; + opacity: var(--#{$prefix}btn-close-disabled-opacity); } } +@mixin btn-close-white() { + filter: var(--#{$prefix}btn-close-white-filter); +} + .btn-close-white { - filter: $btn-close-white-filter; + @include btn-close-white(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @include btn-close-white(); + } + } } diff --git a/_dropdown.scss b/_dropdown.scss index 8899d25..587ebb4 100644 --- a/_dropdown.scss +++ b/_dropdown.scss @@ -184,6 +184,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For `