mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-07 16:49:55 +00:00
GradientBackground is now stable
Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
e173bd2a37
commit
8186284ded
@ -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
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user