GradientBackground is now stable

Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2021-03-31 13:51:04 +02:00
parent e173bd2a37
commit 8186284ded
3 changed files with 16 additions and 15 deletions

View File

@ -1,34 +1,29 @@
@import "../config" @import "../config"
$transparent = 75% $transparent = 15%
.back .back
transition all $transition transition all $transition
background linear-gradient(to left, $default, transparentify($default, $transparent)) background $mainGradient
.primary &.fullscreen
$color = $primary min-height 100vh
background linear-gradient(to left, $color, transparentify($color, $transparent))
.secondary
$color = $secondary
background linear-gradient(to left, $color, transparentify($color, $transparent))
.info .info
$color = $info $color = $info
background linear-gradient(to left, $color, transparentify($color, $transparent)) background linear-gradient(to left, $color, lighten($color, $transparent))
.success .success
$color = $success $color = $success
background linear-gradient(to left, $color, transparentify($color, $transparent)) background linear-gradient(to left, $color, lighten($color, $transparent))
.danger .danger
$color = $danger $color = $danger
background linear-gradient(to left, $color, transparentify($color, $transparent)) background linear-gradient(to left, $color, lighten($color, $transparent))
.warning .warning
$color = $warning $color = $warning
background linear-gradient(to left, $color, transparentify($color, $transparent)) background linear-gradient(to left, $color, lighten($color, $transparent))
@media (prefers-color-scheme dark) @media (prefers-color-scheme dark)
.back .back

View File

@ -8,12 +8,18 @@ interface Props {
color?: ColorType color?: ColorType
className?: string className?: string
children: React.ReactNode children: React.ReactNode
fullscreen?: boolean
} }
/**
* Make the background a linear-gradient
*
* @version 1.0.0
*/
export default class GradientBackground extends React.Component<Props> { export default class GradientBackground extends React.Component<Props> {
public render = () => ( public render = () => (
<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}> <div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className)}>
{this.props.children} {this.props.children}
</div> </div>
) )

View File

@ -1,6 +1,6 @@
import { SVGAttributes } from 'react' import { SVGAttributes } from 'react'
export type ColorType = 'primary' | 'info' | 'success' | 'error' | 'warning' export type ColorType = 'info' | 'success' | 'error' | 'warning'
export interface IconProps extends SVGAttributes<SVGElement> { export interface IconProps extends SVGAttributes<SVGElement> {
color?: string color?: string