LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Update settings css, hopefully closer to bem

Browse source
This commit is contained in:
infinite-persistence 2022-03-17 00:32:59 +08:00 committed by Thomas Zarebczan
parent a6c832bac1
commit d3109bd330
3 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/component/settingsRow/view.jsx
View file

@ -16,20 +16,20 @@ export default function SettingsRow(props: Props) {
const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props; const { title, subtitle, multirow, useVerticalSeparator, disabled, highlighted, children } = props;
return ( return (
<div <div
className={classnames('card__main-actions settings__row', { className={classnames('card__main-actions settings-row', {
'section__actions--between': !multirow, 'section__actions--between': !multirow,
'opacity-30': disabled, 'opacity-30': disabled,
'card--highlightedActive': highlighted, 'card--highlightedActive': highlighted,
})} })}
> >
<div className="settings__row--title"> <div className="settings-row__title">
<p>{title}</p> <p>{title}</p>
{subtitle && <p className="settings__row--subtitle">{subtitle}</p>} {subtitle && <p className="settings-row__subtitle">{subtitle}</p>}
</div> </div>
<div <div
className={classnames('settings__row--value', { className={classnames('settings-row__value', {
'settings__row--value--multirow': multirow, 'settings-row__value--multirow': multirow,
'settings__row--value--vertical-separator': useVerticalSeparator, 'settings-row__vertical-separator': useVerticalSeparator,
})} })}
> >
{children && children} {children && children}

16
ui/scss/component/_main.scss
View file

@ -703,11 +703,11 @@ body {
border-radius: var(--border-radius); border-radius: var(--border-radius);
border-top: unset; border-top: unset;
.settings__row { .settings-row {
padding: var(--spacing-s); padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
.settings__row--value { .settings-row__value {
.button__content { .button__content {
&:hover { &:hover {
color: var(--color-secondary); color: var(--color-secondary);
@ -723,10 +723,10 @@ body {
} }
} }
} }
.settings__row:first-of-type { .settings-row:first-of-type {
margin-top: var(--spacing-xxxs); margin-top: var(--spacing-xxxs);
} }
.settings__row:last-of-type { .settings-row:last-of-type {
border-bottom: unset; border-bottom: unset;
} }
@ -798,19 +798,19 @@ body {
margin-left: auto; margin-left: auto;
position: relative; position: relative;
.settings__row--value { .settings-row__value {
align-self: start; align-self: start;
} }
.settings__row--title { .settings-row__title {
color: rgba(var(--color-text-base), 0.9); color: rgba(var(--color-text-base), 0.9);
} }
.settings__row--subtitle { .settings-row__subtitle {
color: rgba(var(--color-text-base), 0.6); color: rgba(var(--color-text-base), 0.6);
} }
&:hover:not(.opacity-30) { &:hover:not(.opacity-30) {
.settings__row--title { .settings-row__title {
color: rgba(var(--color-text-base), 1); color: rgba(var(--color-text-base), 1);
} }
} }

14
ui/scss/component/section.scss
View file

@ -280,14 +280,14 @@
} }
} }
.settings__row { .settings-row {
&:first-child, &:first-child,
&:only-child { &:only-child {
border-top: none; border-top: none;
} }
} }
.card__main-actions.settings__row { .card__main-actions.settings-row {
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
//padding: var(--spacing-s); //padding: var(--spacing-s);
padding: 0; padding: 0;
@ -296,7 +296,7 @@
} }
} }
.settings__row--title { .settings-row__title {
min-width: 100%; min-width: 100%;
align-self: flex-start; align-self: flex-start;
@ -306,13 +306,13 @@
} }
} }
.settings__row--subtitle { .settings-row__subtitle {
@extend .section__subtitle; @extend .section__subtitle;
font-size: var(--font-small); font-size: var(--font-small);
margin-top: calc(var(--spacing-xxs) / 2); margin-top: calc(var(--spacing-xxs) / 2);
} }
.settings__row--value { .settings-row__value {
width: 100%; width: 100%;
fieldset-section.radio { fieldset-section.radio {
@ -353,7 +353,7 @@
} }
} }
.settings__row--value--multirow { .settings-row__value--multirow {
@media (min-width: $breakpoint-medium) { @media (min-width: $breakpoint-medium) {
width: 80%; width: 80%;
margin-top: var(--spacing-l); margin-top: var(--spacing-l);
@ -367,7 +367,7 @@
} }
} }
.settings__row--value--vertical-separator { .settings-row__vertical-separator {
@media (min-width: $breakpoint-medium) { @media (min-width: $breakpoint-medium) {
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
} }