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

Add CSS class with variables

Browse source
This commit is contained in:
Justin 2022-06-28 14:18:15 -04:00
parent b0b418d699
commit 825f5566a0
2 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/ui/components/background_shapes.tsx
View file

@ -9,7 +9,7 @@ interface IBackgroundShapes {
/** Gradient that appears in the background of the UI. */ /** Gradient that appears in the background of the UI. */
const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => ( const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
<div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}> <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
<div className='w-screen h-screen' style={{ background: 'linear-gradient(112deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(84,72,238,0.1) 30%, rgba(20,156,255,0.1) 70%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%)' }} /> <div className='w-screen h-screen bg-gradient' />
</div> </div>
); );

12
app/styles/application.scss
View file

@ -93,6 +93,18 @@
/* stylelint-disable-next-line unit-no-unknown */ /* stylelint-disable-next-line unit-no-unknown */
height: 100dvh; height: 100dvh;
} }
.bg-gradient {
background: linear-gradient(
112deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 20%,
rgba(var(--color-gradient-start) / 0.1) 30%,
rgba(var(--color-gradient-end) / 0.1) 70%,
rgba(0, 0, 0, 0) 80%,
rgba(0, 0, 0, 0) 100%
);
}
} }
@import 'forms'; @import 'forms';