180 lines
3.3 KiB
Stylus
180 lines
3.3 KiB
Stylus
button
|
|
font-family sans-serif
|
|
|
|
*
|
|
pointer-events none
|
|
|
|
button.ui
|
|
.button.ui
|
|
display inline-block
|
|
cursor pointer
|
|
padding 0 14px
|
|
margin 0
|
|
min-width 100px
|
|
line-height 38px
|
|
font-size 14px
|
|
color #888
|
|
text-decoration none
|
|
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
|
border solid 1px #e2e2e2
|
|
border-radius 4px
|
|
outline none
|
|
|
|
&.block
|
|
display block
|
|
|
|
&:focus
|
|
&:after
|
|
content ""
|
|
pointer-events none
|
|
position absolute
|
|
top -5px
|
|
right -5px
|
|
bottom -5px
|
|
left -5px
|
|
border 2px solid var(--primaryAlpha03)
|
|
border-radius 8px
|
|
|
|
&:disabled
|
|
opacity 0.7
|
|
cursor default
|
|
|
|
&:hover
|
|
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
|
border-color #dcdcdc
|
|
|
|
&:active
|
|
background #ececec
|
|
border-color #dcdcdc
|
|
|
|
&.primary
|
|
color var(--primaryForeground)
|
|
//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
|
border solid 1px var(--primaryLighten15)
|
|
|
|
&:not(:disabled)
|
|
font-weight bold
|
|
|
|
&:hover:not(:disabled)
|
|
//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
|
border-color var(--primary)
|
|
|
|
&:active:not(:disabled)
|
|
background var(--primary)
|
|
border-color var(--primary)
|
|
|
|
input:not([type]).ui
|
|
input[type='text'].ui
|
|
input[type='password'].ui
|
|
input[type='email'].ui
|
|
input[type='date'].ui
|
|
input[type='number'].ui
|
|
textarea.ui
|
|
display block
|
|
padding 10px
|
|
width 100%
|
|
height 40px
|
|
font-family sans-serif
|
|
font-size 16px
|
|
color #55595c
|
|
border solid 1px #dadada
|
|
border-radius 4px
|
|
|
|
&:hover
|
|
border-color #b0b0b0
|
|
|
|
&:focus
|
|
border-color var(--primary)
|
|
|
|
textarea.ui
|
|
min-width 100%
|
|
max-width 100%
|
|
min-height 64px
|
|
|
|
.ui.info
|
|
display block
|
|
margin 1em 0
|
|
padding 0 1em
|
|
font-size 90%
|
|
color rgba(#000, 0.87)
|
|
background #f8f8f9
|
|
border solid 1px rgba(34, 36, 38, 0.22)
|
|
border-radius 4px
|
|
|
|
> p
|
|
opacity 0.8
|
|
|
|
> [data-fa]:first-child
|
|
margin-right 0.25em
|
|
|
|
&.warn
|
|
color #573a08
|
|
background #FFFAF3
|
|
border-color #C9BA9B
|
|
|
|
.ui.from.group
|
|
display block
|
|
margin 16px 0
|
|
|
|
> p:first-child
|
|
margin 0 0 6px 0
|
|
font-size 90%
|
|
font-weight bold
|
|
color rgba(#373a3c, 0.9)
|
|
|
|
html[data-darkmode]
|
|
button.ui
|
|
.button.ui
|
|
color #fff
|
|
background linear-gradient(to bottom, #313543 0%, #282c37 100%)
|
|
border-color #1c2023
|
|
|
|
&:hover
|
|
background linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%)
|
|
border-color #151a1d
|
|
|
|
&:active
|
|
background #22262f
|
|
border-color #151a1d
|
|
|
|
&.primary
|
|
color var(--primaryForeground)
|
|
//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
|
|
border solid 1px var(--primaryLighten15)
|
|
|
|
&:hover:not(:disabled)
|
|
//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
|
|
border-color var(--primary)
|
|
|
|
&:active:not(:disabled)
|
|
background var(--primary)
|
|
border-color var(--primary)
|
|
|
|
input:not([type]).ui
|
|
input[type='text'].ui
|
|
input[type='password'].ui
|
|
input[type='email'].ui
|
|
input[type='date'].ui
|
|
input[type='number'].ui
|
|
textarea.ui
|
|
display block
|
|
padding 10px
|
|
width 100%
|
|
height 40px
|
|
font-family sans-serif
|
|
font-size 16px
|
|
color #dee4e8
|
|
background #191b22
|
|
border solid 1px #495156
|
|
border-radius 4px
|
|
|
|
&:hover
|
|
border-color #b0b0b0
|
|
|
|
&:focus
|
|
border-color var(--primary)
|
|
|
|
.ui.from.group
|
|
> p:first-child
|
|
color #c0c7cc
|