bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style the floating action button

Browse source
This commit is contained in:
Alex Gleason 2021-09-20 21:56:06 -05:00
parent 4ec5cb931c
commit 640891ded9
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 10 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/ui/index.js
View file

@ -637,7 +637,7 @@ class UI extends React.PureComponent {
className='floating-action-button' className='floating-action-button'
aria-label={intl.formatMessage(messages.publish)} aria-label={intl.formatMessage(messages.publish)}
> >
<Icon id='pencil' fixedWidth /> <Icon src={require('@tabler/icons/icons/pencil.svg')} fixedWidth />
</button> </button>
); );

23
app/styles/ui.scss
View file

@ -356,13 +356,12 @@
position: fixed; position: fixed;
bottom: 64px; bottom: 64px;
right: 14px; right: 14px;
width: 61px; width: 58px;
height: 61px; height: 58px;
background-color: var(--brand-color); background-color: var(--brand-color);
color: white; color: white;
border: 0; border: 0;
border-radius: 999px; border-radius: 10px;
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.5);
font-size: 30px; font-size: 30px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -378,17 +377,13 @@
background-color: var(--brand-color--hicontrast); background-color: var(--brand-color--hicontrast);
} }
i.fa {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin: 0;
}
.svg-icon { .svg-icon {
width: 26px; width: 40px;
height: 26px; height: 40px;
svg {
stroke-width: 1px;
}
} }
} }