Fix segmented controls
This commit is contained in:
parent
f146c43348
commit
5455ff7d9c
4 changed files with 7 additions and 6 deletions
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue