707b3fc6b2
This change adds a background color to Toggles to make them easier to see. This is especially important when DevTools are not in focus, and it's harder to see. Test plan: 1. `yarn build:chrome:local` 2. Inspect components 3. Hover over "Select an Element in page to inspect it" 4. Observe background change
56 lines
954 B
CSS
56 lines
954 B
CSS
.ToggleDisabled,
|
|
.ToggleOn,
|
|
.ToggleOff {
|
|
background: var(--color-button-background);
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
padding: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ToggleContent {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 0.25rem;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.ToggleOff {
|
|
border: none;
|
|
background: var(--color-button-background);
|
|
color: var(--color-button);
|
|
}
|
|
|
|
.ToggleOff:hover {
|
|
color: var(--color-button-hover);
|
|
}
|
|
|
|
.ToggleOn:hover,
|
|
.ToggleOff:hover {
|
|
background-color: var(--color-button-background-hover);
|
|
}
|
|
|
|
|
|
.ToggleOn,
|
|
.ToggleOn:active {
|
|
color: var(--color-button-active);
|
|
outline: none;
|
|
}
|
|
|
|
.ToggleOn:focus,
|
|
.ToggleOff:focus,
|
|
.ToggleContent:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.ToggleOn:focus > .ToggleContent,
|
|
.ToggleOff:focus > .ToggleContent {
|
|
background: var(--color-button-background-focus);
|
|
}
|
|
|
|
.ToggleDisabled {
|
|
background: var(--color-button-background);
|
|
color: var(--color-button-disabled);
|
|
cursor: default;
|
|
}
|