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

211 lines
3.7 KiB
Sass
Raw Normal View History

=grayscale
// http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
filter: gray
// Cheap hack: https://github.com/chriseppstein/compass/issues/811
$percent: 100%
-webkit-filter: unquote('grayscale(#{$percent})')
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
display: block
margin-bottom: 1em
padding: 1em 0
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
div, img
+inline-block
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
div
text-align: left
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
a
font-size: 75%
margin-left: 1em
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-thumbnail
border: 1px solid $module-border-color
height: 80px
margin-right: .5em
width: 80px
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-name
margin-bottom: 0
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-preview
+clearfix
2010-11-05 13:43:26 -07:00
div
float: left
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-preview-species
width: 400px
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
a, img
height: 50px
width: 50px
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
a
+inline-block
&.current
background: $module-bg-color
outline: 1px solid $module-border-color
&.deactivated
img
+grayscale
+opacity(0.5)
2010-11-05 13:43:26 -07:00
&.current
background: transparent
2010-11-05 13:43:26 -07:00
outline-color: $error_border_color
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-preview-error
display: none
padding: 20px 10px 0
width: 380px
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-preview-swf
height: 300px
overflow: hidden
width: 300px
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
#item-zones
font:
2010-11-05 15:45:05 -07:00
family: $text-font
2010-11-05 13:43:26 -07:00
size: 85%
2011-07-30 21:19:28 -07:00
margin-bottom: 1em
p
display: inline
&:first-child
margin-right: 1em
2012-03-23 14:37:53 -07:00
2011-07-30 21:19:28 -07:00
#trade-hangers
font-size: 85%
2012-03-23 14:37:53 -07:00
margin-bottom: 3em
2011-07-30 21:19:28 -07:00
text-align: left
p
position: relative
&:first-child
margin-bottom: .5em
&.overflows
.toggle
display: block
&.showing-more
.toggle
.less
display: block
.more
display: none
.toggle
background: white
bottom: 0
cursor: pointer
display: none
font-family: $main-font
padding: 0 1em
position: absolute
right: 0
&: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
+comma-delimited-list
li:last-child::after
content: "."
2011-07-30 21:19:28 -07:00
2010-11-05 13:43:26 -07:00
#item-preview-header
2012-03-23 14:37:53 -07:00
clear: both
2010-11-05 13:43:26 -07:00
h3, a
+inline-block
a
font-size: 85%
margin: -1.5em 0 0 1em
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
#closet-hangers
2011-07-14 09:50:24 -07:00
border: 1px solid $module-border-color
float: right
font-size: 85%
2012-03-23 14:37:53 -07:00
margin-bottom: 3em
2011-07-30 21:19:28 -07:00
margin-left: 1em
padding: 1em
width: 30em
// compete with #trade-hangers
position: relative
z-index: 2
h3
font-size: 150%
2011-07-14 09:50:24 -07:00
font-weight: bold
margin-bottom: .25em
#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
2012-03-23 14:37:53 -07:00
label.unlisted
font-style: italic
2011-07-14 09:50:24 -07:00
form
padding: .5em 0
2011-07-14 09:50:24 -07:00
2011-07-29 07:52:04 -07:00
select
width: 9em
input[type=number]
margin-right: .5em
width: 3em
2011-07-15 13:32:05 -07:00
2011-07-30 21:19:28 -07:00
&.js
#trade-hangers
p
max-height: 3em
overflow: hidden
&.showing-more
max-height: none