Skip to content

Commit

Permalink
Switch Example using Button: Fix white on white bug (Pull #2482)
Browse files Browse the repository at this point in the history
Fix #2474, which resulted in the switch being displayed as white on white, by:
* updating the css to set button text color and SVG stroke color
* changing button height
* removing stroke color specification
  • Loading branch information
jongund authored Oct 4, 2022
1 parent 1ecdf49 commit c934c22
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions examples/switch/css/switch-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ button[role="switch"] {
border: 0 solid #005a9c;
border-radius: 5px;
width: 17em;
height: 3em;
text-align: left;
background-color: white;
color: black;
}

button[role="switch"] .label {
Expand All @@ -17,9 +19,13 @@ button[role="switch"] .label {
margin: 0;
width: 10em;
vertical-align: middle;
color: black;
}

button[role="switch"] svg {
display: inline-block;
width: 36px;
height: 20px;
forced-color-adjust: auto;
position: relative;
top: 4px;
Expand Down Expand Up @@ -55,7 +61,7 @@ button[role="switch"][aria-checked="true"] svg rect.on {
}

button[role="switch"] span.off {
display: inline;
display: inline-block;
}

button[role="switch"] span.on {
Expand All @@ -67,7 +73,7 @@ button[role="switch"][aria-checked="true"] span.off {
}

button[role="switch"][aria-checked="true"] span.on {
display: inline;
display: inline-block;
}

button[role="switch"]:focus,
Expand Down

0 comments on commit c934c22

Please sign in to comment.