Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

fixed css for bold text in react tabs (#3943)

Browse source
This commit is contained in:
Martavis Parker 2022-01-31 17:30:35 -08:00 committed by GitHub
parent 80960e47f8
commit fabd71c75c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/components/TabsWrapper/_styles.scss
View file

@ -13,13 +13,27 @@
margin-right: $pad-xxlarge;
font-size: $x-small;
border: none;
display: inline-flex;
flex-direction: column;
align-items: center;
&:focus {
box-shadow: none;
outline: 0;
}
// Bolding text when the button is active causes a layout shift
// so we add a hidden pseudo element with the same text string
&:before {
content: attr(data-text);
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: $bold;
}
&--selected {
text-shadow: -0.3px 0 #192147, 0.3px 0 #192147;
font-weight: $bold;
&::after {
content: "";