impress/app/assets/stylesheets/items/_show.sass

185 lines
3.2 KiB
Sass
Raw Normal View History

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
2010-11-05 13:43:26 -07:00
body.items-show
2011-07-15 13:32:05 -07:00
#item-header
2010-11-05 13:43:26 -07:00
border-bottom: 1px solid $module-border-color
margin-bottom: 1em
padding: 1em 0
display: grid
grid-template-areas: "img gap1" "img name" "img links" "img gap2"
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
2010-11-05 13:43:26 -07:00
text-align: left
line-height: 100%
2012-03-23 14:37:53 -07:00
#item-links
grid-area: links
text-align: left
a
font-size: 75%
margin-left: 1em
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-name
margin-bottom: 0
#item-info-section
display: grid
grid-template-areas: "info form"
grid-template-columns: 1fr auto
#item-info
grid-area: info
2012-03-23 14:37:53 -07:00
#item-zones
font:
family: $text-font
size: 85%
margin-bottom: 1em
2011-07-30 21:19:28 -07:00
p
display: inline
2011-07-30 21:19:28 -07:00
&:first-child
margin-right: 1em
2011-07-30 21:19:28 -07:00
#your-items-form
grid-area: form
border: 1px solid $module-border-color
font-size: 85%
margin-bottom: 3em
margin-left: 1em
padding: 1em
width: 30em
// compete with #trade-hangers
2011-07-30 21:19:28 -07:00
position: relative
z-index: 2
2011-07-30 21:19:28 -07:00
h3
font-size: 150%
font-weight: bold
margin-bottom: .25em
#closet-hangers-ownership-groups
+clearfix
2011-07-30 21:19:28 -07:00
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
#trade-hangers
font-size: 85%
margin-bottom: 3em
text-align: left
2011-07-30 21:19:28 -07:00
p
position: relative
2011-07-30 21:19:28 -07:00
&:first-child
margin-bottom: .5em
2011-07-30 21:19:28 -07:00
&[data-overflows]
overflow: hidden
.toggle
display: block
2011-07-30 21:19:28 -07:00
&[data-showing-more]
.toggle
.less
display: block
2011-07-30 21:19:28 -07:00
.more
display: none
2011-07-30 21:19:28 -07:00
.toggle
background: white
bottom: 0
cursor: pointer
2011-07-30 21:19:28 -07:00
display: none
font-family: $main-font
padding: 0 1em
position: absolute
right: 0
button
+reset-awesome-button
&:hover
text-decoration: underline
.less
display: none
#item-contributors
+subtle-banner
clear: both
margin:
bottom: 0
top: 2em
header
display: inline
font-weight: bold
margin-right: .25em
footer
display: inline
ul
li::after
content: ", "
li:last-child::after
content: "."
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
.nc-icon
height: 16px
width: 16px
2011-07-14 09:50:24 -07:00
2011-07-30 21:19:28 -07:00
&.js
#trade-hangers
p
max-height: 3em
overflow: hidden
&.showing-more
max-height: none