impress/app/assets/stylesheets/application/rainbow-pool.sass
Emi Matchu f87f4e61b3 Add extra support info to Rainbow Pool pet types
Easy-to-notice hints for which pet types need more labeling!
2024-10-04 19:24:40 -07:00

65 lines
1 KiB
Sass

@import "../partials/clean/constants"
.rainbow-pool-filters
fieldset
display: flex
flex-direction: row
align-items: center
justify-content: center
gap: .5em
legend
display: contents
font-weight: bold
select
width: 16ch
.rainbow-pool-list
list-style-type: none
display: flex
flex-wrap: wrap
justify-content: center
gap: .5em
--preview-base-width: 150px
> li
width: var(--preview-base-width)
max-width: calc(50% - .25em)
min-width: 150px
box-sizing: border-box
text-align: center
a
display: block
border-radius: 1em
padding: .5em
text-decoration: none
background: white
&:hover
outline: 1px solid $module-border-color
background: $module-bg-color
.preview
width: 100%
height: auto
aspect-ratio: 1 / 1
margin-bottom: -1em
.name
background: inherit
padding: .25em .5em
border-radius: .5em
margin: 0 auto
position: relative
z-index: 1
.info
font-size: .85em
.rainbow-pool-pagination
margin-block: .5em
display: flex
justify-content: center
gap: 1em