GameExpo23/TFR/server/static/sass/button.sass

84 lines
1.4 KiB
Sass

.button
margin: auto 0
padding: 0.5rem 0.7rem
display: flex
align-items: center
text-decoration: none
white-space: nowrap
font-size: 0.9em
background-color: RGBA($white, 0.02)
color: RGB($white)
border-radius: 2px
border: 0 solid transparent
transition: background-color 0.1s ease-in-out
&:hover
background-color: RGBA($white, 0.3)
&.primary
background-color: RGBA($primary, 0.02)
color: RGB($primary)
&:hover
background-color: RGBA($primary, 0.3)
&.secondary
background-color: RGBA($secondary, 0.02)
color: RGB($secondary)
&:hover
background-color: RGBA($secondary, 0.3)
> i
font-size: 1.25em
display: block
.text-input
margin: auto 0
width: 100%
position: relative
display: flex
flex-direction: row
> label
padding: 0.5rem 0.7rem
min-width: 7rem
text-decoration: none
text-align: end
white-space: nowrap
font-size: 0.9em
background-color: RGBA($white, 0.02)
color: RGB($white)
border-radius: 2px 0 0 2px
> input
padding: 0.5rem 0.7rem
width: 100%
font-size: 0.9em
background-color: RGBA($white, 0.02)
color: RGB($white)
border: 0 solid transparent
border-left: 1px solid RGBA($white, 0.1)
border-radius: 0 2px 2px 0
&:hover
background-color: RGBA($white, 0.1)
border-left: 1px solid transparent
&:focus-visible, &:focus
background-color: RGBA($white, 0.1)
outline: 0 solid transparent
border-left: 1px solid transparent
border-radius: 0 2px 0 0