void/styles/Button.module.sass
2022-08-10 00:35:26 +02:00

45 lines
1.1 KiB
Sass

@import "./_variables"
.button
display: flex
align-items: center
transition: all .2s
background: $background-dark-buttons
color: $text-dark-buttons
&[data-theme="light"]
background: $background-light-buttons
color: $text-light-buttons
.button:hover
transform: translateY(-0.3em)
background: $background-dark-buttons-hover
color: $text-dark-buttons-hover
&[data-theme="light"]
background: $background-light-buttons-hover
color: $text-light-buttons-hover
// & > .platform_username > .username
// color: $username-dark-hover
// &[data-theme="light"]
// color: $username-light-hover
// TODO: FIX THE HOVER FOR USERNAMES
.icon
padding: 10px
.link
padding: 10px
margin-left: auto
.platform_username
line-height: .5rem
padding-left: 1rem
.platform
font-weight: lighter
.username
color: $username-dark
&[data-theme="light"]
color: $username-light
.grid
display: grid
gap: .5rem
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))