mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-16 04:29:20 +00:00
feat: Move to css variables !
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
@ -1,9 +1,9 @@
|
||||
@import "../config"
|
||||
|
||||
.box
|
||||
background $foregroundLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
background nativeRGB(var(--gray-800))
|
||||
border-radius 16px
|
||||
&.noBottomBorder
|
||||
border-radius 16px 16px 0 0
|
||||
@ -31,6 +31,6 @@
|
||||
width 24px
|
||||
height 24px
|
||||
display inline-block
|
||||
background $main
|
||||
background nativeRGB(var(--theme-color))
|
||||
border-radius 4px
|
||||
margin-right 8px
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../config"
|
||||
|
||||
.breadcrumb ol
|
||||
display flex
|
||||
display inline-flex
|
||||
@ -14,3 +16,8 @@
|
||||
|
||||
.item
|
||||
padding 0 16px
|
||||
|
||||
.chevron
|
||||
color nativeRGB(var(--theme-500))
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
|
||||
@ -31,7 +31,7 @@ export default class Breadcrumb extends React.Component<Props> {
|
||||
</li>
|
||||
{this.props.items.map((el, index) => (
|
||||
<li property="itemListElement" typeof="ListItem" key={index}>
|
||||
<Text {...this.props.textProps} tag="span"><ChevronRight size={14} /></Text>
|
||||
<Text {...this.props.textProps} tag="span"><ChevronRight size={14} className={css.chevron} /></Text>
|
||||
{el.href ? (
|
||||
<Link className={css.item} noStyle href={el.href.replace(/ /g, '-')} linkProps={{ property: "item", typeof: "WebPage" }}>
|
||||
<Text {...this.props.textProps} tag="span" textProps={{ property: "name" }}>{el.display}</Text>
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
border none
|
||||
justify-content center
|
||||
align-items center
|
||||
color $textOnMain
|
||||
background-color $main
|
||||
color white
|
||||
background-color nativeRGB(var(--theme-color))
|
||||
|
||||
// Chrome Specific
|
||||
outline none
|
||||
@ -29,12 +29,12 @@
|
||||
&.ghost
|
||||
&:hover
|
||||
box-shadow none
|
||||
background-color rgba($main, .25)
|
||||
background-color nativeRGBA(var(--theme-500), .2)
|
||||
|
||||
&:active
|
||||
&:focus
|
||||
background-color $main
|
||||
color $textOnMain
|
||||
background-color nativeRGB(var(--theme-color))
|
||||
color white
|
||||
|
||||
&.outline
|
||||
border 2px solid @background-color
|
||||
@ -45,7 +45,7 @@
|
||||
&:not(:disabled)
|
||||
&:active
|
||||
&:focus
|
||||
color $textOnMain
|
||||
color white
|
||||
|
||||
|
||||
&.ghost
|
||||
@ -56,11 +56,11 @@
|
||||
|
||||
&:hover
|
||||
background-color @background-color
|
||||
box-shadow 0 0 0 4px rgba(@background-color,.2)
|
||||
box-shadow 0 0 0 4px nativeRGBA(var(--theme-500), .2)
|
||||
|
||||
&:active
|
||||
&:focus
|
||||
background-color darken(@background-color, 30%)
|
||||
background-color nativeRGB(var(--theme-800))
|
||||
|
||||
&.block
|
||||
display flex
|
||||
@ -86,8 +86,8 @@
|
||||
margin-top 0
|
||||
|
||||
&:disabled
|
||||
background $lightGrayLight
|
||||
color $darkGrayLight
|
||||
background nativeRGB(var(--gray-500))
|
||||
color nativeRGB(var(--gray-500))
|
||||
transform none
|
||||
box-shadow none
|
||||
cursor initial
|
||||
@ -97,11 +97,11 @@
|
||||
color $darkGrayDark
|
||||
|
||||
&.outline
|
||||
border 2px solid @color
|
||||
border 2px solid nativeRGB(var(--gray-500))
|
||||
background transparent
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
border 2px solid $darkGrayDark
|
||||
border 2px solid nativeRGB(var(--gray-500))
|
||||
|
||||
&.loading
|
||||
color transparent
|
||||
@ -111,8 +111,8 @@
|
||||
&::after
|
||||
content ""
|
||||
display block
|
||||
border $textOnMain 2px solid
|
||||
border-color transparent transparent $textOnMain $textOnMain
|
||||
border white 2px solid
|
||||
border-color transparent transparent white white
|
||||
width 1em
|
||||
position absolute
|
||||
top calc(50% - (1em / 2))
|
||||
@ -122,10 +122,11 @@
|
||||
box-sizing inherit
|
||||
animation ButtonLoading .75s infinite linear
|
||||
|
||||
&:disabled::after
|
||||
border-color transparent transparent $darkGrayLight $darkGrayLight
|
||||
@media (prefers-color-scheme dark)
|
||||
border-color transparent transparent $darkGrayDark $darkGrayDark
|
||||
// &:disabled::after
|
||||
// $rgb = nativeRGB(var(--gray-500))
|
||||
// border-color transparent transparent $rgb $rgb
|
||||
// @media (prefers-color-scheme dark)
|
||||
// border-color transparent transparent $rgb $rgb
|
||||
|
||||
svg + .textInner
|
||||
margin-left 8px
|
||||
@ -161,7 +162,7 @@ btn($color, $theme)
|
||||
if $theme is 'darken'
|
||||
&:active
|
||||
&:focus
|
||||
background-color darken(@color, 30%)
|
||||
background-color nativeRGB(var(--theme-700))
|
||||
|
||||
|
||||
&.ghost
|
||||
@ -170,7 +171,7 @@ btn($color, $theme)
|
||||
|
||||
&:hover
|
||||
box-shadow none
|
||||
background-color rgba($color, .25)
|
||||
background-color nativeRGBA($color, .25)
|
||||
|
||||
&:active
|
||||
&:focus
|
||||
@ -178,40 +179,20 @@ btn($color, $theme)
|
||||
|
||||
&:hover
|
||||
background-color @background-color
|
||||
box-shadow 0 4px 4px rgba(@background-color,.2)
|
||||
box-shadow 0 4px 4px nativeRGBA(@background-color,.2)
|
||||
|
||||
&:active
|
||||
&:focus
|
||||
if $theme is 'darken'
|
||||
background-color darken(@background-color, 30%)
|
||||
background-color nativeRGB(var(--theme-700))
|
||||
else
|
||||
background-color lighten(@background-color, 30%)
|
||||
background-color nativeRGB(var(--theme-300))
|
||||
|
||||
&.loading
|
||||
color transparent
|
||||
&::after
|
||||
border-color transparent transparent $textColor $textColor
|
||||
|
||||
.info:not(:disabled)
|
||||
btn($infoLight, 'darken')
|
||||
@media (prefers-color-scheme dark)
|
||||
btn($infoDark, 'lighten')
|
||||
|
||||
.success:not(:disabled)
|
||||
btn($successLight, 'darken')
|
||||
@media (prefers-color-scheme dark)
|
||||
btn($successDark, 'lighten')
|
||||
|
||||
.error:not(:disabled)
|
||||
btn($errorLight, 'darken')
|
||||
@media (prefers-color-scheme dark)
|
||||
btn($errorDark, 'lighten')
|
||||
|
||||
.warning:not(:disabled)
|
||||
btn($warningLight, 'darken')
|
||||
@media (prefers-color-scheme dark)
|
||||
btn($warningDark, 'lighten')
|
||||
|
||||
@keyframes ButtonLoading
|
||||
0%
|
||||
transform rotate(0)
|
||||
|
||||
@ -20,9 +20,9 @@ $backColor = #757575
|
||||
width 20px
|
||||
height @width
|
||||
position relative
|
||||
box-shadow inset 0 0 0 2px $darkGrayLight
|
||||
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-600))
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px $darkGrayDark
|
||||
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-400))
|
||||
border-radius 4px
|
||||
transition all $transition
|
||||
|
||||
@ -30,7 +30,7 @@ $backColor = #757575
|
||||
border-radius 20px
|
||||
position absolute
|
||||
transition all $transition
|
||||
background $main
|
||||
background nativeRGB(var(--theme-color))
|
||||
|
||||
svg
|
||||
transition $transition
|
||||
@ -46,11 +46,8 @@ $backColor = #757575
|
||||
opacity 0
|
||||
|
||||
&:checked + span
|
||||
background $infoLight
|
||||
box-shadow inset 0 0 0 2px $infoLight
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px $infoDark
|
||||
background $infoDark
|
||||
background nativeRGB(var(--theme-500))
|
||||
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
|
||||
|
||||
svg
|
||||
color white
|
||||
@ -59,9 +56,7 @@ $backColor = #757575
|
||||
|
||||
&:hover
|
||||
span
|
||||
box-shadow inset 0 0 0 2px $infoLight
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px $infoDark
|
||||
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
|
||||
|
||||
.radio
|
||||
span
|
||||
@ -85,9 +80,7 @@ $backColor = #757575
|
||||
&:hover span
|
||||
box-shadow none
|
||||
&::after
|
||||
background $darkGrayLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $darkGrayDark
|
||||
background nativeRGB(var(--theme-500))
|
||||
|
||||
span
|
||||
width 24px
|
||||
@ -95,19 +88,14 @@ $backColor = #757575
|
||||
border-radius 20px
|
||||
margin-right 10px
|
||||
box-shadow none
|
||||
background rgba($darkGrayLight, .3)
|
||||
@media (prefers-color-scheme dark)
|
||||
background rgba($darkGrayDark, .3)
|
||||
|
||||
background nativeRGB(var(--gray-500))
|
||||
|
||||
&::after
|
||||
content " "
|
||||
top 50%
|
||||
transform translate(-50%, -50%)
|
||||
left 0
|
||||
background $darkGrayLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $darkGrayDark
|
||||
background nativeRGB(var(--gray-600))
|
||||
width 20px
|
||||
height @width
|
||||
|
||||
@ -118,44 +106,8 @@ $backColor = #757575
|
||||
&:checked + span
|
||||
|
||||
box-shadow none
|
||||
background rgba($infoLight, .3)
|
||||
@media (prefers-color-scheme dark)
|
||||
background rgba($infoDark, .3)
|
||||
background nativeRGB(var(--theme-300))
|
||||
&::after
|
||||
left 100%
|
||||
transform translate(-50%, -50%)
|
||||
background $infoLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $infoDark
|
||||
|
||||
checkBox($color)
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
input:focus:checked + span
|
||||
box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
.info
|
||||
checkBox($infoLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($infoDark)
|
||||
|
||||
.success
|
||||
checkBox($successLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($successDark)
|
||||
|
||||
.error
|
||||
checkBox($errorLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($errorDark)
|
||||
|
||||
.warning
|
||||
checkBox($warningLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($warningDark)
|
||||
background nativeRGB(var(--theme-500))
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
@import "../config.styl"
|
||||
@import "../config"
|
||||
|
||||
.code
|
||||
.pre
|
||||
background $lightGrayLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
padding 4px 8px
|
||||
border-radius 8px
|
||||
@media (prefers-color-scheme dark)
|
||||
background $lightGrayDark
|
||||
background nativeRGB(var(--gray-700))
|
||||
color white
|
||||
|
||||
.pre
|
||||
display block
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../config.styl'
|
||||
|
||||
.fieldset
|
||||
border-radius 4px
|
||||
border 2px solid $grayDark
|
||||
border-radius 8px
|
||||
border 2px solid nativeRGB(var(--gray-500))
|
||||
transition all $transition
|
||||
margin 0
|
||||
|
||||
@ -12,8 +12,3 @@
|
||||
padding 0 4px
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
&:hover
|
||||
border-color black
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
border-color white
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
.footer
|
||||
padding 24px 0
|
||||
background $foregroundLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
background nativeRGB(var(--gray-800))
|
||||
|
||||
ul
|
||||
padding 0
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
@import "../config"
|
||||
|
||||
$percent = 15%
|
||||
|
||||
.back
|
||||
transition all $transition
|
||||
background $mainGradient
|
||||
|
||||
&.fullscreen > :first-child
|
||||
min-height 100vh
|
||||
|
||||
.info
|
||||
background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
|
||||
@media (prefers-color-scheme dark)
|
||||
background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
|
||||
|
||||
.success
|
||||
background linear-gradient(to right, $successLight, lighten($successLight, $percent))
|
||||
@media (prefers-color-scheme dark)
|
||||
background linear-gradient(to right, $successDark, darken($successDark, $percent))
|
||||
|
||||
.error
|
||||
background linear-gradient(to right, $errorLight, lighten($errorLight, $percent))
|
||||
@media (prefers-color-scheme dark)
|
||||
background linear-gradient(to right, $errorDark, darken($errorDark, $percent))
|
||||
|
||||
.warning
|
||||
background linear-gradient(to right, $warningLight, lighten($warningLight, $percent))
|
||||
@media (prefers-color-scheme dark)
|
||||
background linear-gradient(to right, $warningDark, darken($warningDark, $percent))
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import { ColorType } from '../interfaces'
|
||||
|
||||
import { buildClassName } from '../Util'
|
||||
import css from './GradientBackground.module.styl'
|
||||
|
||||
interface Props {
|
||||
color?: ColorType
|
||||
className?: string
|
||||
children: React.ReactNode
|
||||
fullscreen?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Make the background a linear-gradient
|
||||
*
|
||||
* @version 1.0.2
|
||||
*/
|
||||
export default class GradientBackground extends React.Component<Props> {
|
||||
|
||||
public render = () => (
|
||||
<div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className, [css.fullscreen, this.props.fullscreen])}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
@ -22,9 +22,9 @@
|
||||
svg
|
||||
position absolute
|
||||
user-select none
|
||||
color $darkGrayLight
|
||||
color black
|
||||
@media (prefers-color-scheme dark)
|
||||
color $darkGrayDark
|
||||
color white
|
||||
transition color $transition
|
||||
pointer-events none
|
||||
&.iconClickable
|
||||
@ -44,10 +44,10 @@
|
||||
appearance none
|
||||
|
||||
option
|
||||
background $foregroundLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
color black
|
||||
@media (prefers-color-scheme dark)
|
||||
background lighten($foregroundDark, 5%)
|
||||
background nativeRGB(var(--gray-800))
|
||||
color white
|
||||
|
||||
textarea
|
||||
@ -101,17 +101,17 @@
|
||||
max-width 100%
|
||||
font-size .875rem
|
||||
outline none
|
||||
background $lightGrayLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
transition all $transition
|
||||
border 2px solid black
|
||||
color black
|
||||
@media (prefers-color-scheme dark)
|
||||
background $lightGrayDark
|
||||
background nativeRGB(var(--gray-800))
|
||||
border-color transparent
|
||||
border 2px solid nativeRGB(var(--gray-500))
|
||||
color white
|
||||
|
||||
&::placeholder
|
||||
font-weight 700
|
||||
font-size rem(16)
|
||||
transition color $transition
|
||||
opacity 1
|
||||
@ -125,10 +125,7 @@
|
||||
|
||||
|
||||
&:disabled
|
||||
border-color $darkGrayLight
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
border-color $darkGrayDark
|
||||
border-color nativeRGB(var(--gray-500))
|
||||
|
||||
&:not(:disabled)
|
||||
&:hover
|
||||
@ -143,7 +140,7 @@
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
&:focus
|
||||
border-color $main
|
||||
border-color nativeRGB(var(--theme-color))
|
||||
|
||||
~ svg
|
||||
color @border-color
|
||||
@ -153,18 +150,6 @@
|
||||
// @media (prefers-color-scheme dark)
|
||||
// color white
|
||||
|
||||
&:invalid
|
||||
border-color $errorLight
|
||||
|
||||
~ svg
|
||||
color @border-color
|
||||
@media (prefers-color-scheme dark)
|
||||
border-color $errorDark
|
||||
|
||||
~ svg
|
||||
color @border-color
|
||||
|
||||
|
||||
&.iconLeft
|
||||
padding-left 16px + 24px + 10px
|
||||
&.iconRight
|
||||
|
||||
@ -23,7 +23,9 @@ tmp.args = {
|
||||
id: 'pouet',
|
||||
type: 'number',
|
||||
step: 10,
|
||||
defaultValue: 'test'
|
||||
defaultValue: 'test',
|
||||
placeholder: 'test',
|
||||
disabled: false
|
||||
}
|
||||
|
||||
export const Normal = tmp
|
||||
|
||||
@ -53,6 +53,8 @@ interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLIn
|
||||
* Allows you to disable automatic icons
|
||||
*/
|
||||
disableAutoIcons?: boolean
|
||||
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
interface States {
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
@import '../config'
|
||||
|
||||
.link
|
||||
color $infoDark
|
||||
@media (prefers-color-scheme dark)
|
||||
color $infoLight
|
||||
&:hover
|
||||
text-decoration underline
|
||||
color nativeRGB(var(--theme-500))
|
||||
text-decoration underline
|
||||
|
||||
.icon
|
||||
vertical-align sub
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.menu
|
||||
&.outline
|
||||
border 2px solid $main
|
||||
border 2px solid nativeRGB(var(--theme-color))
|
||||
&.hidden
|
||||
display none
|
||||
ul
|
||||
@ -20,20 +20,20 @@
|
||||
overflow-x hidden
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom 8px
|
||||
color $darkGrayLight
|
||||
color black
|
||||
cursor pointer
|
||||
transition all $transition
|
||||
font-weight bold
|
||||
border-radius 8px
|
||||
&:hover
|
||||
color black
|
||||
background $lightGrayLight
|
||||
background nativeRGB(var(--theme-100))
|
||||
@media (prefers-color-scheme dark)
|
||||
color $lightGrayDark
|
||||
color white
|
||||
&:hover
|
||||
color white
|
||||
background $darkGrayDark
|
||||
background nativeRGB(var(--gray-700))
|
||||
&.selected
|
||||
&:active
|
||||
background $main
|
||||
color $textOnMain
|
||||
background nativeRGB(var(--theme-500))
|
||||
color white
|
||||
|
||||
@ -8,6 +8,9 @@ $height = 76px
|
||||
.navbar
|
||||
position fixed
|
||||
left 0
|
||||
background nativeRGB(var(--theme-50))
|
||||
@media (prefers-color-scheme dark)
|
||||
background nativeRGB(var(--gray-800))
|
||||
top 0
|
||||
height $height
|
||||
width 100%
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
top 0
|
||||
margin 0 !important // sorry :(
|
||||
left 0
|
||||
background rgba($lightGrayLight, .7)
|
||||
background nativeRGBA($lightGrayLight, .7)
|
||||
@media (prefers-color-scheme dark)
|
||||
background rgba($lightGrayDark, .7)
|
||||
background nativeRGBA($lightGrayDark, .7)
|
||||
cursor pointer
|
||||
z-index 200
|
||||
animation fadeIn .3s ease-in-out 1 forwards
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.bar
|
||||
width 100%
|
||||
background rgba($main, .15)
|
||||
background nativeRGBA(var(--theme-color), 0.15)
|
||||
height 8px
|
||||
border-radius 8px
|
||||
|
||||
@ -21,5 +21,5 @@
|
||||
height 100%
|
||||
max-width 100%
|
||||
width 0
|
||||
background $main
|
||||
background nativeRGB(var(--theme-color))
|
||||
border-radius 8px
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
margin-left 56px
|
||||
|
||||
.sidebar
|
||||
background $foregroundLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
background nativeRGB(var(--gray-800))
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
@ -53,13 +53,13 @@
|
||||
border-radius 8px
|
||||
&:hover
|
||||
color black
|
||||
background $lightGrayLight
|
||||
background nativeRGB(var(--theme-100))
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
background $darkGrayDark
|
||||
background nativeRGB(var(--gray-700))
|
||||
&:active
|
||||
color $textOnMain
|
||||
background $main
|
||||
color white
|
||||
background nativeRGB(var(--theme-color))
|
||||
&.short
|
||||
width 88px
|
||||
.userSpace > div:not(:last-child)
|
||||
@ -109,9 +109,9 @@
|
||||
&::before
|
||||
content " "
|
||||
position absolute
|
||||
background $darkGrayLight
|
||||
@media (prefers-color-theme dark)
|
||||
background $lightGrayDark
|
||||
background black
|
||||
@media (prefers-color-scheme dark)
|
||||
background white
|
||||
border-radius 2px
|
||||
width 2px
|
||||
height 100%
|
||||
@ -131,21 +131,21 @@
|
||||
cursor pointer
|
||||
border-radius 8px
|
||||
transition all $transition
|
||||
color $darkGrayLight
|
||||
color black
|
||||
@media (prefers-color-scheme dark)
|
||||
color $lightGrayDark
|
||||
color white
|
||||
&:first-child
|
||||
margin-top 0
|
||||
&:hover
|
||||
|
||||
color black
|
||||
background $lightGrayLight
|
||||
background nativeRGB(var(--theme-100))
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
background $darkGrayDark
|
||||
background nativeRGB(var(--gray-700))
|
||||
&:active
|
||||
color $textOnMain
|
||||
background $main
|
||||
color white
|
||||
background nativeRGB(var(--theme-color))
|
||||
|
||||
padding 8px
|
||||
display flex
|
||||
@ -168,8 +168,8 @@
|
||||
//max-height 24px
|
||||
|
||||
&.active > div
|
||||
color $textOnMain
|
||||
background $main
|
||||
color white
|
||||
background nativeRGB(var(--theme-color))
|
||||
ul
|
||||
list-style none
|
||||
margin 0
|
||||
|
||||
@ -4,22 +4,19 @@
|
||||
border-spacing 0
|
||||
width 100%
|
||||
|
||||
tr
|
||||
$radius = 16px
|
||||
th:first-child
|
||||
border-top-left-radius $radius
|
||||
border-bottom-left-radius $radius
|
||||
|
||||
th:last-child
|
||||
border-top-right-radius $radius
|
||||
border-bottom-right-radius $radius
|
||||
|
||||
&.horizontalBorders tr:not(:last-child) td
|
||||
tr:not(:last-child) td
|
||||
border-bottom 1px solid $darkGrayLight
|
||||
tr th
|
||||
border-bottom 2px solid $darkGrayLight
|
||||
|
||||
&.verticalBorders tr td:not(:first-child)
|
||||
tr td:not(:first-child)
|
||||
tr th:not(:first-child)
|
||||
border-left 1px solid $darkGrayLight
|
||||
|
||||
th
|
||||
font-weight bold
|
||||
font-size rem(18)
|
||||
|
||||
th
|
||||
td
|
||||
padding 16px
|
||||
@ -27,12 +24,6 @@
|
||||
color black
|
||||
@media (prefers-color-scheme dark)
|
||||
color white
|
||||
th
|
||||
background $lightGrayLight
|
||||
color $darkGrayLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $lightGrayDark
|
||||
color $darkGrayDark
|
||||
|
||||
.parent
|
||||
overflow-x auto
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
color white
|
||||
|
||||
.black
|
||||
color #212121
|
||||
color black
|
||||
|
||||
.main
|
||||
color $main
|
||||
color nativeRGB(var(--theme-color))
|
||||
|
||||
for size in 36 28 24 20 18 16 14
|
||||
.size-{size}
|
||||
@ -38,6 +38,6 @@ for weight in 'normal' 'bold'
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
.white:not(.noDarkTheme)
|
||||
color #212121
|
||||
color black
|
||||
.black:not(.noDarkTheme)
|
||||
color white
|
||||
|
||||
301
src/colors.styl
Normal file
301
src/colors.styl
Normal file
@ -0,0 +1,301 @@
|
||||
// quick function to transform hex to rgb
|
||||
hextorgb(color)
|
||||
red(color) unquote(', ') green(color) unquote(', ') blue(color)
|
||||
|
||||
// not as :root for other components to use the closest value
|
||||
*
|
||||
--theme-color: var(--theme-500)
|
||||
// @media (prefers-color-scheme dark)
|
||||
// --theme-color: var(--theme-500)
|
||||
|
||||
generateTheme($name, c50, c100, c200, c300, c400, c500, c600, c700, c800, c900)
|
||||
{"--" + $name + "-50"}: hextorgb(c50)
|
||||
{"--" + $name + "-100"}: hextorgb(c100)
|
||||
{"--" + $name + "-200"}: hextorgb(c200)
|
||||
{"--" + $name + "-300"}: hextorgb(c300)
|
||||
{"--" + $name + "-400"}: hextorgb(c400)
|
||||
{"--" + $name + "-500"}: hextorgb(c500)
|
||||
{"--" + $name + "-600"}: hextorgb(c600)
|
||||
{"--" + $name + "-700"}: hextorgb(c700)
|
||||
{"--" + $name + "-800"}: hextorgb(c800)
|
||||
{"--" + $name + "-900"}: hextorgb(c900)
|
||||
{"--" + $name + "-50-color"}: hextorgb(c50)
|
||||
{"--" + $name + "-100-color"}: hextorgb(c100)
|
||||
{"--" + $name + "-200-color"}: hextorgb(c200)
|
||||
{"--" + $name + "-300-color"}: hextorgb(c300)
|
||||
{"--" + $name + "-400-color"}: hextorgb(c400)
|
||||
{"--" + $name + "-500-color"}: hextorgb(c500)
|
||||
{"--" + $name + "-600-color"}: hextorgb(c600)
|
||||
{"--" + $name + "-700-color"}: hextorgb(c700)
|
||||
{"--" + $name + "-800-color"}: hextorgb(c800)
|
||||
{"--" + $name + "-900-color"}: hextorgb(c900)
|
||||
{"--" + $name + "-50-text"}: light(c50 ) ? black : white
|
||||
{"--" + $name + "-100-text"}: light(c100) ? black : white
|
||||
{"--" + $name + "-200-text"}: light(c200) ? black : white
|
||||
{"--" + $name + "-300-text"}: light(c300) ? black : white
|
||||
{"--" + $name + "-400-text"}: light(c400) ? black : white
|
||||
{"--" + $name + "-500-text"}: light(c500) ? black : white
|
||||
{"--" + $name + "-600-text"}: light(c600) ? black : white
|
||||
{"--" + $name + "-700-text"}: light(c700) ? black : white
|
||||
{"--" + $name + "-800-text"}: light(c800) ? black : white
|
||||
{"--" + $name + "-900-text"}: light(c900) ? black : white
|
||||
|
||||
:root
|
||||
generateTheme(
|
||||
'test',
|
||||
#000,
|
||||
#100,
|
||||
#200,
|
||||
#003,
|
||||
#004,
|
||||
#005,
|
||||
#006,
|
||||
#007,
|
||||
#008,
|
||||
#fff
|
||||
)
|
||||
// gray is not a theme
|
||||
--gray-50 hextorgb(#FAFAFA)
|
||||
--gray-100 hextorgb(#F5F5F5)
|
||||
--gray-200 hextorgb(#EEEEEE)
|
||||
--gray-300 hextorgb(#E0E0E0)
|
||||
--gray-400 hextorgb(#BDBDBD)
|
||||
--gray-500 hextorgb(#9E9E9E)
|
||||
--gray-600 hextorgb(#757575)
|
||||
--gray-700 hextorgb(#616161)
|
||||
--gray-800 hextorgb(#424242)
|
||||
--gray-900 hextorgb(#212121)
|
||||
|
||||
:root
|
||||
.red
|
||||
.red *
|
||||
--theme-50: hextorgb(#FFEBEE)
|
||||
--theme-100: hextorgb(#FFCDD2)
|
||||
--theme-200: hextorgb(#EF9A9A)
|
||||
--theme-300: hextorgb(#E57373)
|
||||
--theme-400: hextorgb(#EF5350)
|
||||
--theme-500: hextorgb(#F44336)
|
||||
--theme-600: hextorgb(#E53935)
|
||||
--theme-700: hextorgb(#D32F2F)
|
||||
--theme-800: hextorgb(#C62828)
|
||||
--theme-900: hextorgb(#B71C1C)
|
||||
|
||||
.pink
|
||||
.pink *
|
||||
--theme-50: hextorgb(#FCE4EC)
|
||||
--theme-100: hextorgb(#F8BBD0)
|
||||
--theme-200: hextorgb(#F48FB1)
|
||||
--theme-300: hextorgb(#F06292)
|
||||
--theme-400: hextorgb(#EC407A)
|
||||
--theme-500: hextorgb(#E91E63)
|
||||
--theme-600: hextorgb(#D81B60)
|
||||
--theme-700: hextorgb(#C2185B)
|
||||
--theme-800: hextorgb(#AD1457)
|
||||
--theme-900: hextorgb(#880E4F)
|
||||
|
||||
.purple
|
||||
.purple *
|
||||
--theme-50: hextorgb(#F3E5F5)
|
||||
--theme-100: hextorgb(#E1BEE7)
|
||||
--theme-200: hextorgb(#CE93D8)
|
||||
--theme-300: hextorgb(#BA68C8)
|
||||
--theme-400: hextorgb(#AB47BC)
|
||||
--theme-500: hextorgb(#9C27B0)
|
||||
--theme-600: hextorgb(#8E24AA)
|
||||
--theme-700: hextorgb(#7B1FA2)
|
||||
--theme-800: hextorgb(#6A1B9A)
|
||||
--theme-900: hextorgb(#4A148C)
|
||||
|
||||
.deep-purple
|
||||
.deep-purple *
|
||||
--theme-50 hextorgb(#EDE7F6)
|
||||
--theme-100 hextorgb(#D1C4E9)
|
||||
--theme-200 hextorgb(#B39DDB)
|
||||
--theme-300 hextorgb(#9575CD)
|
||||
--theme-400 hextorgb(#7E57C2)
|
||||
--theme-500 hextorgb(#673AB7)
|
||||
--theme-600 hextorgb(#5E35B1)
|
||||
--theme-700 hextorgb(#512DA8)
|
||||
--theme-800 hextorgb(#4527A0)
|
||||
--theme-900 hextorgb(#311B92)
|
||||
|
||||
.indigo
|
||||
.indigo *
|
||||
--theme-50 hextorgb(#E8EAF6)
|
||||
--theme-100 hextorgb(#C5CAE9)
|
||||
--theme-200 hextorgb(#9FA8DA)
|
||||
--theme-300 hextorgb(#7986CB)
|
||||
--theme-400 hextorgb(#5C6BC0)
|
||||
--theme-500 hextorgb(#3F51B5)
|
||||
--theme-600 hextorgb(#3949AB)
|
||||
--theme-700 hextorgb(#303F9F)
|
||||
--theme-800 hextorgb(#283593)
|
||||
--theme-900 hextorgb(#1A237E)
|
||||
|
||||
.blue
|
||||
.blue *
|
||||
--theme-50 hextorgb(#E3F2FD)
|
||||
--theme-100 hextorgb(#BBDEFB)
|
||||
--theme-200 hextorgb(#90CAF9)
|
||||
--theme-300 hextorgb(#64B5F6)
|
||||
--theme-400 hextorgb(#42A5F5)
|
||||
--theme-500 hextorgb(#2196F3)
|
||||
--theme-600 hextorgb(#1E88E5)
|
||||
--theme-700 hextorgb(#1976D2)
|
||||
--theme-800 hextorgb(#1565C0)
|
||||
--theme-900 hextorgb(#0D47A1)
|
||||
|
||||
.light-blue
|
||||
.light-blue *
|
||||
--theme-50 hextorgb(#E1F5FE)
|
||||
--theme-100 hextorgb(#B3E5FC)
|
||||
--theme-200 hextorgb(#81D4FA)
|
||||
--theme-300 hextorgb(#4FC3F7)
|
||||
--theme-400 hextorgb(#29B6F6)
|
||||
--theme-500 hextorgb(#03A9F4)
|
||||
--theme-600 hextorgb(#039BE5)
|
||||
--theme-700 hextorgb(#0288D1)
|
||||
--theme-800 hextorgb(#0277BD)
|
||||
--theme-900 hextorgb(#01579B)
|
||||
|
||||
.cyan
|
||||
.cyan *
|
||||
--theme-50 hextorgb(#E0F7FA)
|
||||
--theme-100 hextorgb(#B2EBF2)
|
||||
--theme-200 hextorgb(#80DEEA)
|
||||
--theme-300 hextorgb(#4DD0E1)
|
||||
--theme-400 hextorgb(#26C6DA)
|
||||
--theme-500 hextorgb(#00BCD4)
|
||||
--theme-600 hextorgb(#00ACC1)
|
||||
--theme-700 hextorgb(#0097A7)
|
||||
--theme-800 hextorgb(#00838F)
|
||||
--theme-900 hextorgb(#006064)
|
||||
|
||||
.teal
|
||||
.teal *
|
||||
--theme-50 hextorgb(#E0F2F1)
|
||||
--theme-100 hextorgb(#B2DFDB)
|
||||
--theme-200 hextorgb(#80CBC4)
|
||||
--theme-300 hextorgb(#4DB6AC)
|
||||
--theme-400 hextorgb(#26A69A)
|
||||
--theme-500 hextorgb(#009688)
|
||||
--theme-600 hextorgb(#00897B)
|
||||
--theme-700 hextorgb(#00796B)
|
||||
--theme-800 hextorgb(#00695C)
|
||||
--theme-900 hextorgb(#004D40)
|
||||
|
||||
.green
|
||||
.green *
|
||||
--theme-50 hextorgb(#E8F5E9)
|
||||
--theme-100 hextorgb(#C8E6C9)
|
||||
--theme-200 hextorgb(#A5D6A7)
|
||||
--theme-300 hextorgb(#81C784)
|
||||
--theme-400 hextorgb(#66BB6A)
|
||||
--theme-500 hextorgb(#4CAF50)
|
||||
--theme-600 hextorgb(#43A047)
|
||||
--theme-700 hextorgb(#388E3C)
|
||||
--theme-800 hextorgb(#2E7D32)
|
||||
--theme-900 hextorgb(#1B5E20)
|
||||
|
||||
.light-green
|
||||
.light-green *
|
||||
--theme-50 hextorgb(#F1F8E9)
|
||||
--theme-100 hextorgb(#DCEDC8)
|
||||
--theme-200 hextorgb(#C5E1A5)
|
||||
--theme-300 hextorgb(#AED581)
|
||||
--theme-400 hextorgb(#9CCC65)
|
||||
--theme-500 hextorgb(#8BC34A)
|
||||
--theme-600 hextorgb(#7CB342)
|
||||
--theme-700 hextorgb(#689F38)
|
||||
--theme-800 hextorgb(#558B2F)
|
||||
--theme-900 hextorgb(#33691E)
|
||||
|
||||
.lime
|
||||
.lime *
|
||||
--theme-50 hextorgb(#F9FBE7)
|
||||
--theme-100 hextorgb(#F0F4C3)
|
||||
--theme-200 hextorgb(#E6EE9C)
|
||||
--theme-300 hextorgb(#DCE775)
|
||||
--theme-400 hextorgb(#D4E157)
|
||||
--theme-500 hextorgb(#CDDC39)
|
||||
--theme-600 hextorgb(#C0CA33)
|
||||
--theme-700 hextorgb(#AFB42B)
|
||||
--theme-800 hextorgb(#9E9D24)
|
||||
--theme-900 hextorgb(#827717)
|
||||
|
||||
.yellow
|
||||
.yellow *
|
||||
--theme-50 hextorgb(#FFFDE7)
|
||||
--theme-100 hextorgb(#FFF9C4)
|
||||
--theme-200 hextorgb(#FFF59D)
|
||||
--theme-300 hextorgb(#FFF176)
|
||||
--theme-400 hextorgb(#FFEE58)
|
||||
--theme-500 hextorgb(#FFEB3B)
|
||||
--theme-600 hextorgb(#FDD835)
|
||||
--theme-700 hextorgb(#FBC02D)
|
||||
--theme-800 hextorgb(#F9A825)
|
||||
--theme-900 hextorgb(#F57F17)
|
||||
|
||||
.amber
|
||||
.amber *
|
||||
--theme-100 hextorgb(#FFECB3)
|
||||
--theme-200 hextorgb(#FFE082)
|
||||
--theme-300 hextorgb(#FFD54F)
|
||||
--theme-400 hextorgb(#FFCA28)
|
||||
--theme-500 hextorgb(#FFC107)
|
||||
--theme-600 hextorgb(#FFB300)
|
||||
--theme-700 hextorgb(#FFA000)
|
||||
--theme-800 hextorgb(#FF8F00)
|
||||
--theme-900 hextorgb(#FF6F00)
|
||||
|
||||
.orange
|
||||
.orange *
|
||||
--theme-50 hextorgb(#FFF3E0)
|
||||
--theme-100 hextorgb(#FFE0B2)
|
||||
--theme-200 hextorgb(#FFCC80)
|
||||
--theme-300 hextorgb(#FFB74D)
|
||||
--theme-400 hextorgb(#FFA726)
|
||||
--theme-500 hextorgb(#FF9800)
|
||||
--theme-600 hextorgb(#FB8C00)
|
||||
--theme-700 hextorgb(#F57C00)
|
||||
--theme-800 hextorgb(#EF6C00)
|
||||
--theme-900 hextorgb(#E65100)
|
||||
|
||||
.deep-orange
|
||||
.deep-orange *
|
||||
--theme-50 hextorgb(#FBE9E7)
|
||||
--theme-100 hextorgb(#FFCCBC)
|
||||
--theme-200 hextorgb(#FFAB91)
|
||||
--theme-300 hextorgb(#FF8A65)
|
||||
--theme-400 hextorgb(#FF7043)
|
||||
--theme-500 hextorgb(#FF5722)
|
||||
--theme-600 hextorgb(#F4511E)
|
||||
--theme-700 hextorgb(#E64A19)
|
||||
--theme-800 hextorgb(#D84315)
|
||||
--theme-900 hextorgb(#BF360C)
|
||||
|
||||
|
||||
|
||||
.brown *
|
||||
--theme-50 hextorgb(#EFEBE9)
|
||||
--theme-100 hextorgb(#D7CCC8)
|
||||
--theme-200 hextorgb(#BCAAA4)
|
||||
--theme-300 hextorgb(#A1887F)
|
||||
--theme-400 hextorgb(#8D6E63)
|
||||
--theme-500 hextorgb(#795548)
|
||||
--theme-600 hextorgb(#6D4C41)
|
||||
--theme-700 hextorgb(#5D4037)
|
||||
--theme-800 hextorgb(#4E342E)
|
||||
--theme-900 hextorgb(#3E2723)
|
||||
|
||||
.blue-gray *
|
||||
--theme-50 hextorgb(#ECEFF1)
|
||||
--theme-100 hextorgb(#CFD8DC)
|
||||
--theme-200 hextorgb(#B0BEC5)
|
||||
--theme-300 hextorgb(#90A4AE)
|
||||
--theme-400 hextorgb(#78909C)
|
||||
--theme-500 hextorgb(#607D8B)
|
||||
--theme-600 hextorgb(#546E7A)
|
||||
--theme-700 hextorgb(#455A64)
|
||||
--theme-800 hextorgb(#37474F)
|
||||
--theme-900 hextorgb(#263238)
|
||||
@ -1,7 +1,13 @@
|
||||
// native RGBA function to replace Stylus rgba function
|
||||
nativeRGBA(color, opacity)
|
||||
unquote('rgba(') color unquote(', ') opacity unquote(');')
|
||||
nativeRGB(color)
|
||||
unquote('rgb(') color unquote(');')
|
||||
|
||||
$main = #4285F4
|
||||
// @deprecated
|
||||
$main = nativeRGB(var(--theme-color))
|
||||
$textOnMain = white
|
||||
$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
|
||||
$mainGradient = linear-gradient(to right, $main, nativeRGB(var(--theme-color)))
|
||||
|
||||
$infoDark = #01579B
|
||||
$infoLight = #29B6F6
|
||||
@ -15,10 +21,10 @@ $errorLight = #F44336
|
||||
$warningDark = #C43E00
|
||||
$warningLight = #FF9800
|
||||
|
||||
$backgroundDark = darken($main, 92%)
|
||||
$backgroundLight = lighten($main, 94%)
|
||||
$foregroundDark = #202020
|
||||
$foregroundLight = #FFFFFF
|
||||
$backgroundDark = nativeRGB(var(--gray-900))
|
||||
$backgroundLight = nativeRGB(var(--gray-50))
|
||||
$foregroundDark = nativeRGB(var(--gray-800))
|
||||
$foregroundLight = nativeRGB(var(--theme-50))
|
||||
|
||||
// Light theme grays
|
||||
$darkGrayLight = #777
|
||||
@ -27,6 +33,7 @@ $lightGrayLight = #F4F4F4
|
||||
// Dark theme grays
|
||||
$darkGrayDark = #444
|
||||
$lightGrayDark = #AAA
|
||||
// -@deprecated
|
||||
|
||||
$transitionTime = .15s
|
||||
$transitionFunction = ease-in-out
|
||||
@ -52,4 +59,4 @@ rem($a)
|
||||
use('stylusUtils.js')
|
||||
|
||||
// Import theme in the root folder of the project
|
||||
@import '../../../../../../theme' if file-exists('../../../../../../theme.styl')
|
||||
@import '../../../../../theme' if file-exists('../../../../../theme.styl')
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
//@import "_aileron"
|
||||
@import "config"
|
||||
@import "colors"
|
||||
|
||||
*
|
||||
*::before
|
||||
@ -7,10 +8,10 @@
|
||||
box-sizing border-box
|
||||
|
||||
scrollbar-width 16px
|
||||
scrollbar-color darken($foregroundLight, 16%) $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
scrollbar-color lighten($foregroundDark, 16%) $foregroundDark
|
||||
font-family: ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
// scrollbar-color nativeRGB(var(--theme-50)) nativeRGB(var(--theme-50))
|
||||
// @media (prefers-color-scheme dark)
|
||||
// scrollbar-color nativeRGB(var(--gray-800)) nativeRGB(var(--gray-800))
|
||||
font-family ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
|
||||
// Georgia,Cambria,"Times New Roman",Times,serif
|
||||
|
||||
@ -22,10 +23,10 @@ body
|
||||
body > div[id="__next"]
|
||||
margin 0
|
||||
min-height 100vh
|
||||
background $backgroundLight
|
||||
background nativeRGB(var(--gray-50))
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
background $backgroundDark
|
||||
background nativeRGB(var(--gray-900))
|
||||
|
||||
a
|
||||
color inherit
|
||||
@ -35,26 +36,25 @@ a
|
||||
::-webkit-scrollbar
|
||||
width 16px
|
||||
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-corner
|
||||
::-webkit-scrollbar-track
|
||||
background $foregroundLight
|
||||
background nativeRGB(var(--theme-50))
|
||||
transition $transition
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
background nativeRGB(var(--gray-800))
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
background: darken($foregroundLight, 16%)
|
||||
transition $transition
|
||||
@media (prefers-color-scheme dark)
|
||||
background lighten($foregroundDark, 16%)
|
||||
&:hover
|
||||
background: darken($foregroundLight, 24%)
|
||||
@media (prefers-color-scheme dark)
|
||||
background: lighten($foregroundDark, 24%)
|
||||
// ::-webkit-scrollbar-thumb
|
||||
// background: darken(nativeRGB(var(--theme-50)), 16%)
|
||||
// transition $transition
|
||||
// @media (prefers-color-scheme dark)
|
||||
// background lighten(nativeRGB(var(--gray-800)), 16%)
|
||||
// &:hover
|
||||
// background: darken(nativeRGB(var(--theme-50)), 24%)
|
||||
// @media (prefers-color-scheme dark)
|
||||
// background: lighten(nativeRGB(var(--gray-800)), 24%)
|
||||
|
||||
&:active
|
||||
background: darken($foregroundLight, 32%)
|
||||
@media (prefers-color-scheme dark)
|
||||
background: lighten($foregroundDark, 32%)
|
||||
// &:active
|
||||
// background: darken(nativeRGB(var(--theme-50)), 32%)
|
||||
// @media (prefers-color-scheme dark)
|
||||
// background: lighten(nativeRGB(var(--gray-800)), 32%)
|
||||
|
||||
@ -15,7 +15,6 @@ import Container from './Container'
|
||||
import DebugCols from './Col/DebugCols'
|
||||
import Footer from './Footer'
|
||||
import Fieldset from './Fieldset'
|
||||
import GradientBackground from './GradientBackground'
|
||||
import Image from './Image'
|
||||
import Input from './Input'
|
||||
import Link from './Link'
|
||||
@ -45,7 +44,6 @@ export {
|
||||
DebugCols,
|
||||
Footer,
|
||||
Fieldset,
|
||||
GradientBackground,
|
||||
Image,
|
||||
Input,
|
||||
Link,
|
||||
|
||||
Reference in New Issue
Block a user