forked from OpenNeo/impress
Emi Matchu
0705f66f6d
Impress 2020 has had this for a while, I've wanted it for reference on occasion, let's bring it in! Very similar logic, and Ruby & Rails's date affordances are super helpful for simplifying how to express it!
165 lines
No EOL
3.3 KiB
Sass
165 lines
No EOL
3.3 KiB
Sass
@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
|
||
|
||
.item-kind, .first-seen-at
|
||
padding: .25em .5em
|
||
border-radius: .25em
|
||
cursor: help
|
||
|
||
text-decoration: none
|
||
font-weight: bold
|
||
line-height: 1
|
||
|
||
background: #E2E8F0
|
||
color: #1A202C
|
||
|
||
.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 |