1
0
Fork 0
forked from OpenNeo/impress
impress/app/assets/stylesheets/partials/_item_header.sass

170 lines
No EOL
3.4 KiB
Sass
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
=item-header
border-bottom: 1px solid $module-border-color
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
gap: 1em
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
.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
&[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
.item-description
margin-top: .5em
margin-bottom: 1em
.item-subpages-nav
display: flex
align-items: flex-end
.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