Add ability to highlight a Settings Row
This commit is contained in:
parent
1777397f07
commit
9665f7f4c2
2 changed files with 7 additions and 1 deletions
|
@ -8,16 +8,18 @@ type Props = {
|
|||
multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right.
|
||||
useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values.
|
||||
disabled?: boolean,
|
||||
highlighted?: boolean,
|
||||
children?: React$Node,
|
||||
};
|
||||
|
||||
export default function SettingsRow(props: Props) {
|
||||
const { title, subtitle, multirow, useVerticalSeparator, disabled, children } = props;
|
||||
const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props;
|
||||
return (
|
||||
<div
|
||||
className={classnames('card__main-actions settings__row', {
|
||||
'section__actions--between': !multirow,
|
||||
'opacity-30': disabled,
|
||||
'card--highlightedActive': highlighted,
|
||||
})}
|
||||
>
|
||||
<div className="settings__row--title">
|
||||
|
|
|
@ -107,6 +107,10 @@
|
|||
background-color: var(--color-card-background-highlighted);
|
||||
}
|
||||
|
||||
.card--highlightedActive {
|
||||
background-color: var(--color-fire-outside);
|
||||
}
|
||||
|
||||
.card--claim-preview-wrap {
|
||||
@extend .card;
|
||||
margin: var(--spacing-xl) 0;
|
||||
|
|
Loading…
Reference in a new issue