Index: lams_central/web/css/bootstrap/_accordion.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_accordion.scss (.../_accordion.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_accordion.scss (.../_accordion.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -4,7 +4,7 @@ .accordion { // scss-docs-start accordion-css-vars - --#{$prefix}accordion-color: #{color-contrast($accordion-bg)}; + --#{$prefix}accordion-color: #{$accordion-color}; --#{$prefix}accordion-bg: #{$accordion-bg}; --#{$prefix}accordion-transition: #{$accordion-transition}; --#{$prefix}accordion-border-color: #{$accordion-border-color}; @@ -13,7 +13,7 @@ --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; - --#{$prefix}accordion-btn-color: #{$accordion-color}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; @@ -47,7 +47,7 @@ &:not(.collapsed) { color: var(--#{$prefix}accordion-active-color); background-color: var(--#{$prefix}accordion-active-bg); - box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list &::after { background-image: var(--#{$prefix}accordion-btn-active-icon); @@ -140,7 +140,10 @@ &:last-child { border-bottom: 0; } .accordion-button { - @include border-radius(0); + &, + &.collapsed { + @include border-radius(0); + } } } } Index: lams_central/web/css/bootstrap/_alert.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_alert.scss (.../_alert.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_alert.scss (.../_alert.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -20,7 +20,7 @@ color: var(--#{$prefix}alert-color); background-color: var(--#{$prefix}alert-bg); border: var(--#{$prefix}alert-border); - border-radius: var(--#{$prefix}alert-border-radius, 0); // stylelint-disable-line property-disallowed-list + @include border-radius(var(--#{$prefix}alert-border-radius)); } // Headings for larger alerts Index: lams_central/web/css/bootstrap/_badge.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_badge.scss (.../_badge.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_badge.scss (.../_badge.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -1,5 +1,3 @@ -// stylelint-disable custom-property-empty-line-before - // Base class // // Requires one of the contextual, color modifier classes for `color` and @@ -24,7 +22,7 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list + @include border-radius(var(--#{$prefix}badge-border-radius)); @include gradient-bg(); // Empty badges collapse automatically Index: lams_central/web/css/bootstrap/_breadcrumb.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_breadcrumb.scss (.../_breadcrumb.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_breadcrumb.scss (.../_breadcrumb.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -1,5 +1,3 @@ -// stylelint-disable custom-property-empty-line-before - .breadcrumb { // scss-docs-start breadcrumb-css-vars --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; Index: lams_central/web/css/bootstrap/_button-group.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_button-group.scss (.../_button-group.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_button-group.scss (.../_button-group.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -37,7 +37,7 @@ @include border-radius($btn-border-radius); // Prevent double borders when buttons are next to each other - > .btn:not(:first-child), + > :not(.btn-check:first-child) + .btn, > .btn-group:not(:first-child) { margin-left: -$btn-border-width; } Index: lams_central/web/css/bootstrap/_buttons.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_buttons.scss (.../_buttons.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_buttons.scss (.../_buttons.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -1,5 +1,3 @@ -// stylelint-disable custom-property-empty-line-before - // // Base styles // @@ -17,6 +15,7 @@ --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; --#{$prefix}btn-border-radius: #{$btn-border-radius}; + --#{$prefix}btn-hover-border-color: transparent; --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); @@ -48,8 +47,14 @@ border-color: var(--#{$prefix}btn-hover-border-color); } - .btn-check:focus + &, - &:focus { + .btn-check + &:hover { + // override for the checkbox/radio buttons + color: var(--#{$prefix}btn-color); + background-color: var(--#{$prefix}btn-bg); + border-color: var(--#{$prefix}btn-border-color); + } + + &:focus-visible { color: var(--#{$prefix}btn-hover-color); @include gradient-bg(var(--#{$prefix}btn-hover-bg)); border-color: var(--#{$prefix}btn-hover-border-color); @@ -62,9 +67,20 @@ } } + .btn-check:focus-visible + & { + border-color: var(--#{$prefix}btn-hover-border-color); + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + .btn-check:checked + &, - .btn-check:active + &, - &:active, + :not(.btn-check) + &:active, + &:first-child:active, &.active, &.show { color: var(--#{$prefix}btn-active-color); @@ -74,7 +90,7 @@ border-color: var(--#{$prefix}btn-active-border-color); @include box-shadow(var(--#{$prefix}btn-active-shadow)); - &:focus { + &:focus-visible { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); @@ -105,7 +121,27 @@ // scss-docs-start btn-variant-loops @each $color, $value in $theme-colors { .btn-#{$color} { - @include button-variant($value, $value); + @if $color == "light" { + @include button-variant( + $value, + $value, + $hover-background: shade-color($value, $btn-hover-bg-shade-amount), + $hover-border: shade-color($value, $btn-hover-border-shade-amount), + $active-background: shade-color($value, $btn-active-bg-shade-amount), + $active-border: shade-color($value, $btn-active-border-shade-amount) + ); + } @else if $color == "dark" { + @include button-variant( + $value, + $value, + $hover-background: tint-color($value, $btn-hover-bg-tint-amount), + $hover-border: tint-color($value, $btn-hover-border-tint-amount), + $active-background: tint-color($value, $btn-active-bg-tint-amount), + $active-border: tint-color($value, $btn-active-border-tint-amount) + ); + } @else { + @include button-variant($value, $value); + } } } @@ -129,18 +165,31 @@ --#{$prefix}btn-border-color: transparent; --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-active-color: #{$btn-link-hover-color}; --#{$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%))}; text-decoration: $link-decoration; + @if $enable-gradients { + background-image: none; + } &:hover, - &:focus { + &:focus-visible { text-decoration: $link-hover-decoration; } + &:focus-visible { + color: var(--#{$prefix}btn-color); + } + + &:hover { + color: var(--#{$prefix}btn-hover-color); + } + // No need for an active state here } Index: lams_central/web/css/bootstrap/_carousel.scss =================================================================== diff -u -r9f4482aa1d29f454f091420cc38d3b27a3f4cc8f -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_carousel.scss (.../_carousel.scss) (revision 9f4482aa1d29f454f091420cc38d3b27a3f4cc8f) +++ lams_central/web/css/bootstrap/_carousel.scss (.../_carousel.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -42,7 +42,6 @@ display: block; } -/* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); @@ -53,9 +52,7 @@ transform: translateX(-100%); } -/* rtl:end:ignore */ - // // Alternate transitions // Index: lams_central/web/css/bootstrap/_dropdown.scss =================================================================== diff -u -rb7c92dbcfdb0469dbc0144190a201757f398e529 -ra90d0744dd0d09d1b04869e61ce1b66bf1ee3242 --- lams_central/web/css/bootstrap/_dropdown.scss (.../_dropdown.scss) (revision b7c92dbcfdb0469dbc0144190a201757f398e529) +++ lams_central/web/css/bootstrap/_dropdown.scss (.../_dropdown.scss) (revision a90d0744dd0d09d1b04869e61ce1b66bf1ee3242) @@ -18,12 +18,13 @@ // The dropdown menu .dropdown-menu { // scss-docs-start dropdown-css-vars + --#{$prefix}dropdown-zindex: #{$zindex-dropdown}; --#{$prefix}dropdown-min-width: #{$dropdown-min-width}; --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x}; --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); - --#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}dropdown-color: #{$dropdown-color}; --#{$prefix}dropdown-bg: #{$dropdown-bg}; --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; @@ -46,7 +47,7 @@ // scss-docs-end dropdown-css-vars position: absolute; - z-index: $zindex-dropdown; + z-index: var(--#{$prefix}dropdown-zindex); display: none; // none by default, but block on "open" of the menu min-width: var(--#{$prefix}dropdown-min-width); padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x); @@ -66,6 +67,18 @@ left: 0; margin-top: var(--#{$prefix}dropdown-spacer); } + + @if $dropdown-padding-y == 0 { + > .dropdown-item:first-child, + > li:first-child .dropdown-item { + @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius)); + } + > .dropdown-item:last-child, + > li:last-child .dropdown-item { + @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius)); + } + + } } // scss-docs-start responsive-breakpoints @@ -172,18 +185,6 @@ background-color: transparent; // For `