Skip to content

Commit

Permalink
First round of fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
MewenLeHo committed Sep 14, 2022
1 parent 7fd2004 commit fcff75c
Show file tree
Hide file tree
Showing 11 changed files with 28 additions and 25 deletions.
4 changes: 0 additions & 4 deletions scss/_button-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,6 @@
.btn:active + &,
.btn.active + & {
border-color: $primary;

&:focus {
border-color: $black;
}
}

.btn:disabled + &,
Expand Down
7 changes: 1 addition & 6 deletions scss/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,7 @@
&:focus { // Boosted mod: no &:focus-visible to avoid issue in button tags
// Boosted mod: added `&[data-focus-visible-added]`
&[data-focus-visible-added] {
// 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);
}
@include focus-box();
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/_carousel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@
&:focus {
&[data-focus-visible-added] {
@include focus-visible();
box-shadow: 0 0 0 $outline-offset $white;
@include focus-box();
transform: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/_list-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
color: var(--#{$prefix}list-group-action-color);
text-align: inherit; // For `<button>`s (anchors inherit)

// Boosted mod: no focus
// Boosted mod: default focus
// Hover state
&:hover{
z-index: 1; // Place hover/focus items above their siblings for proper border styling
Expand Down
4 changes: 1 addition & 3 deletions scss/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,9 @@
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
@import "mixins/focus"; // Boosted mod

// Layout
@import "mixins/clearfix";
@import "mixins/container";
@import "mixins/grid";

// Utilities
@import "mixins/focus" // Boosted mod
11 changes: 9 additions & 2 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -833,7 +833,7 @@ $input-btn-font-family: inherit !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: 1.25 !default;

$input-btn-focus-width: .125rem !default;
$input-btn-focus-width: $outline-offset !default;
// Boosted mod: no need for a blur variable
$input-btn-focus-box-shadow: null !default;

Expand Down Expand Up @@ -1142,8 +1142,12 @@ $form-range-thumb-bg: $white !default;
$form-range-thumb-border: $border-width solid $black !default;
$form-range-thumb-border-radius: 50% !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow: null !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: null !default;
// fusv-disable
$form-range-thumb-active-border: $component-active-bg !default; // Boosted mod // Deprecated in v5.2.0
// fusv-enable
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, box-shadow $transition-duration $transition-timing !default;
// scss-docs-end form-range-variables
Expand Down Expand Up @@ -1401,6 +1405,9 @@ $pagination-border-color: transparent !default; // Boosted mod
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; // Boosted mod
$pagination-focus-color: var(--#{$prefix}link-color) !default;
$pagination-focus-bg: null !default;
// fusv-disable
$pagination-focus-outline: $pagination-border-width solid $pagination-focus-color !default; // Deprecated in v5.2.0
// fusv-enable
// Boosted mod: no $pagination-focus-outline

$pagination-hover-color: var(--#{$prefix}link-color) !default; // Boosted mod
Expand Down Expand Up @@ -1857,7 +1864,7 @@ $carousel-control-color: $black !default;
$carousel-control-width: $spacer * 3 !default;
$carousel-control-opacity: null !default;
$carousel-control-hover-opacity: null !default;
$carousel-control-transition: null !default;
$carousel-control-transition: null !default; // Boosted mod

$carousel-indicator-width: .5rem !default;
$carousel-indicator-height: .5rem !default;
Expand Down
1 change: 1 addition & 0 deletions scss/forms/_form-check.scss
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,7 @@
&[data-focus-visible-added] {
+ .btn {
@include focus-visible();
@include focus-box();
}
}

Expand Down
11 changes: 9 additions & 2 deletions scss/forms/_form-range.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
outline: 0;

&:focus {
outline: 0;

// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }

// Boosted mod: added `&[data-focus-visible-added]`
&[data-focus-visible-added] {
outline: 0;
// Boosted mod: better focus visibility
&::-webkit-slider-thumb {
@include focus-visible();
Expand All @@ -24,6 +30,7 @@
}
// End mod
}
// End mod
}

&::-moz-focus-outer {
Expand Down
3 changes: 1 addition & 2 deletions scss/helpers/_colored-links.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
background-color: color-contrast($value) !important; // Boosted mod: ensure contrast

@if $link-shade-percentage != 0 {
&:hover,
&:focus {
&:hover {
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
}
}
Expand Down
3 changes: 1 addition & 2 deletions scss/mixins/_list-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
background-color: $background;

&.list-group-item-action {
&:hover,
&:focus {
&:hover {
color: $color;
background-color: if($color == $white, shade-color($background, 10%), tint-color($background, 10%)); // Boosted mod
}
Expand Down
5 changes: 3 additions & 2 deletions site/assets/scss/_anchor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
content: "#";
}

&:focus,
&:hover,
:hover > &,
:target > & {
Expand All @@ -21,7 +20,9 @@

// Boosted mod
&:focus {
outline-offset: 0;
&[data-focus-visible-added] {
@include focus-visible();
}
}
// End mod
}

0 comments on commit fcff75c

Please sign in to comment.