Fix segmented controls

This commit is contained in:
Justin Edmund 2023-06-24 15:34:35 -07:00
parent f146c43348
commit 5455ff7d9c
4 changed files with 7 additions and 6 deletions

View file

@ -1,4 +1,4 @@
.Segment { .segment {
color: $grey-55; color: $grey-55;
cursor: pointer; cursor: pointer;
flex-grow: 1; flex-grow: 1;
@ -40,3 +40,7 @@
width: 100%; width: 100%;
} }
} }
:global(.blended) .segment input:checked + label {
background: var(--card-bg);
}

View file

@ -21,7 +21,7 @@ const Segment: React.FC<Props> = (props: Props) => {
} }
return ( return (
<div className="Segment"> <div className={styles.segment}>
<input <input
name={props.groupName} name={props.groupName}
id={props.name} id={props.name}

View file

@ -23,10 +23,6 @@
&.blended { &.blended {
background: var(--input-bound-bg); background: var(--input-bound-bg);
border-radius: $full-corner; border-radius: $full-corner;
.Segment input:checked + label {
background: var(--card-bg);
}
} }
&.grow { &.grow {

View file

@ -26,6 +26,7 @@ const SegmentedControl: React.FC<Props> = ({
[styles.blended]: blended, [styles.blended]: blended,
[styles.grow]: grow, [styles.grow]: grow,
[styles.gap]: gap, [styles.gap]: gap,
blended: blended,
}, },
className, className,
elementClass elementClass