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

fix mobile style

Browse source
This commit is contained in:
Sean Yesmunt 2020-06-15 10:41:59 -04:00
parent c3cdc742ab
commit 4bbd831a16
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/walletSendTip/view.jsx
View file

@ -205,7 +205,7 @@ function WalletSendTip(props: Props) {
key={amount} key={amount}
disabled={amount > balance} disabled={amount > balance}
button="alt" button="alt"
className={classnames('button-toggle', { className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': tipAmount === amount, 'button-toggle--active': tipAmount === amount,
'button-toggle--disabled': amount > balance, 'button-toggle--disabled': amount > balance,
})} })}
@ -215,7 +215,7 @@ function WalletSendTip(props: Props) {
))} ))}
<Button <Button
button="alt" button="alt"
className={classnames('button-toggle', { className={classnames('button-toggle button-toggle--expandformobile', {
'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount), 'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
})} })}
label={__('Custom')} label={__('Custom')}

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

@ -120,6 +120,20 @@ svg + .button__label,
} }
} }
.button-toggle--expandformobile {
@media (max-width: $breakpoint-small) {
display: block;
width: 100%;
text-align: center;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
}
}
.button-toggle--active { .button-toggle--active {
color: var(--color-primary); color: var(--color-primary);
background-color: var(--color-primary-alt); background-color: var(--color-primary-alt);