impress/app/assets/stylesheets/partials/_item_header.sass

173 lines
3.4 KiB
Sass
Raw Normal View History

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
=item-header
border-bottom: 1px solid $module-border-color
2024-01-21 05:07:45 -08:00
margin-top: 1em
margin-bottom: 1em
.item-header-main
display: grid
grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
align-items: center
justify-content: center
column-gap: 1em
row-gap: .5em
.item-thumbnail
grid-area: img
border: 1px solid $module-border-color
height: 80px
width: 80px
.item-name
grid-area: name
text-align: left
line-height: 100%
margin-bottom: 0
.item-links
grid-area: links
font-size: 85%
text-align: left
display: flex
align-items: center
flex-wrap: wrap
gap: 1em
2024-06-18 13:25:29 -07:00
abbr
cursor: help
.item-kind, .first-seen-at
padding: .25em .5em
border-radius: .25em
text-decoration: none
font-weight: bold
line-height: 1
background: #E2E8F0
color: #1A202C
2024-06-18 13:25:29 -07:00
.icon
vertical-align: middle
.item-kind
// These colors are copied from DTI 2020, for initial consistency!
// They're based on the Chakra UI colors, which I think are in turn the
// Bootstrap colors? Or something?
// NOTE: For the data-type=np case, we use the default gray colors.
&[data-type=nc]
background: #E9D8FD
color: #44337A
2024-01-21 05:23:53 -08:00
&[data-type=pb]
background: #FEEBC8
color: #7B341E
.user-lists-info
grid-area: lists
font-size: 85%
text-align: left
.user-lists-form-opener
&::after
content: " "
.user-lists-form
background: $background-color
border: 1px solid $module-border-color
border-radius: .5em
padding: 1em
width: 30em
text-align: center
z-index: 2
margin-top: .5em
margin-inline: auto
margin-bottom: 1.5em
font-size: 85%
h3
font-size: 150%
font-weight: bold
margin-bottom: .75em
.closet-hangers-ownership-groups
+clearfix
margin-bottom: .5em
div
float: left
margin: 0 5%
text-align: left
width: 40%
li
list-style: none
word-wrap: break-word
label.unlisted
font-style: italic
form
padding: .5em 0
select
width: 9em
input[type=number]
margin-right: .5em
width: 3em
2024-01-21 05:07:45 -08:00
.item-description
margin-top: .5em
margin-bottom: 1em
.item-subpages-nav
display: flex
align-items: flex-end
gap: 1em
.preview-link
margin-right: auto
.trades-section
display: flex
gap: .5em
header
align-self: center
font-weight: bold
&::after
content: ":"
ul
align-self: flex-end
list-style: none
display: flex
gap: .5em
li
display: block
a
display: block
background: $module-bg-color
border: 1px solid $module-border-color
border-bottom: 0
border-radius: .5em .5em 0 0
padding: .5em 1em
text-decoration: none
&:hover, &:focus
text-decoration: underline
&[data-is-current=true]
background: $background-color
padding-bottom: calc(.5em + 1px)
font-weight: bold
margin-bottom: -1px