refactor: add border color animation on focus

coreui · Jul 5, 2023 · e739854 · e739854
1 parent 4bf4e35
commit e739854
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 13 deletions.
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -228,7 +228,7 @@ Alerts use local CSS variables on `.alert` for enhanced real-time customization.
 
 ### SASS mixin
 
-{{< deprecated-in "4.3.0" >}}
+{{< deprecated-in "5.0.0" >}}
 
 Used in combination with `$alert-variants` to create contextual modifier classes for our alerts.
 

diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md
@@ -489,7 +489,7 @@ List groups use local CSS variables on `.list-group` for enhanced real-time cust
 
 ### SASS mixins
 
-{{< deprecated-in "4.3.0" >}}
+{{< deprecated-in "5.0.0" >}}
 
 Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
 

diff --git a/docs/content/customize/color-modes.md b/docs/content/customize/color-modes.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Color modes
-description: CoreUI now supports color modes, or themes, as of v4.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
+description: CoreUI now supports color modes, or themes, as of v5.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
 group: customize
 toc: true
 added: "5.3"
@@ -13,7 +13,7 @@ added: "5.3"
 
 ## Dark mode
 
-**CoreUI for Bootstrap now supports color modes, starting with dark mode!** With v4.3.0 you can implement your own color mode toggler (see below for an example from CoreUI for Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-coreui-theme` attribute.
+**CoreUI for Bootstrap now supports color modes, starting with dark mode!** With v5.0.0 you can implement your own color mode toggler (see below for an example from CoreUI for Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-coreui-theme` attribute.
 
 Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
 

diff --git a/docs/content/customize/color.md b/docs/content/customize/color.md
@@ -11,9 +11,9 @@ toc: true
 
 ## Colors
 
-{{< added-in "4.3.0" >}}
+{{< added-in "5.0.0" >}}
 
-Bootstrap's color palette has continued to expand and become more nuanced in v4.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+Bootstrap's color palette has continued to expand and become more nuanced in v5.0.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
 
 Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--cui-secondary-bg-rgb), .5)`.
 

diff --git a/docs/content/customize/css-variables.md b/docs/content/customize/css-variables.md
@@ -75,7 +75,7 @@ a {
 
 ## Focus variables
 
-{{< added-in "4.3.0" >}}
+{{< added-in "5.0.0" >}}
 
 Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
 

diff --git a/docs/content/migration.md b/docs/content/migration.md
@@ -1,14 +1,13 @@
 ---
 layout: docs
-title: Migrating to v4
-description: Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v3 to v4.
+title: Migrating to v5
+description: Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
 group: migration
 aliases: "/migration/"
-aliases: "/4.0/migration/"
 toc: true
 ---
 
-## v4.3.0 (v4.6.0 PRO)
+## v5.0.0-alpha.0
 
 ### CSS variables
 
@@ -113,7 +112,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 ### Progress bars
 
-The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
+The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.0.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
 
 While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.
 
@@ -175,7 +174,7 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu
 
 - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6.
 
-  With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new `--cui-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
+  With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.0.0. Its default value has also been reassigned to the new `--cui-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
 
 - Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
 

diff --git a/scss/_date-picker.scss b/scss/_date-picker.scss
@@ -78,6 +78,10 @@
     }
   }
 
+  .date-picker & {
+    @include transition($input-transition);
+  }
+
   .date-picker.disabled & {
     --#{$prefix}date-picker-border-color: var(--#{$prefix}date-picker-disabled-border-color);
     background-color: var(--#{$prefix}date-picker-disabled-bg);

diff --git a/scss/_time-picker.scss b/scss/_time-picker.scss
@@ -78,6 +78,10 @@
     }
   }
 
+  .time-picker & {
+    @include transition($input-transition);
+  }
+
   .time-picker.disabled & {
     background-color: var(--#{$prefix}time-picker-disabled-bg);
     border-color: var(--#{$prefix}time-picker-disabled-border-color);

diff --git a/scss/forms/_form-multi-select.scss b/scss/forms/_form-multi-select.scss
@@ -134,6 +134,10 @@ select.form-multi-select {
   border: var(--#{$prefix}form-multi-select-border-width) solid var(--#{$prefix}form-multi-select-border-color);
   @include border-radius(var(--#{$prefix}form-multi-select-border-radius));
 
+  .form-multi-select & {
+    @include transition($input-transition);
+  }
+
   .form-multi-select.disabled & {
     color: var(--#{$prefix}form-multi-select-disabled-color);
     background-color: var(--#{$prefix}form-multi-select-disabled-bg);