impress/app/stylesheets/outfits/_edit.sass

439 lines
9.4 KiB
Sass

@import ../shared/jquery.jgrowl
$object-padding: 6px
$nc-icon-size: 16px
$preview-dimension: 400px
$sidebar-margin: 20px
$sidebar-width: 400px
$sidebar-unit-horizontal-padding: 24px
$sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2
$outfit-thumbnail-size: 0
$outfit-thumbnail-original-size: 100px
$outfit-thumbnail-margin: 12px
$outfit-header-padding: 24px
$outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
$outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
=outfit
//+clearfix
padding: .25em 0
//.outfit-thumbnail
float: left
height: $outfit-thumbnail-size
margin-right: $outfit-thumbnail-margin
overflow: hidden
position: relative
width: $outfit-thumbnail-size
img
height: $outfit-thumbnail-original-size
left: -$outfit-thumbnail-original-size / 4
position: absolute
top: -$outfit-thumbnail-original-size / 4
width: $outfit-thumbnail-original-size
//> div
float: left
width: $outfit-content-width
.outfit-delete
+reset-awesome-button
+opacity(.5)
font-size: 150%
float: right
line-height: 1
margin-top: -.125em
padding: .125em .25em
&:hover
+opacity(1)
background: $module-bg-color
header
display: block
padding-left: $outfit-header-padding
.outfit-star
background:
image: image-url("unstarred.png")
position: left top
repeat: no-repeat
bottom: -2px
/* margin-bottom doesn't work here
cursor: pointer
display: block
float: left
height: 16px
margin-left: -24px
/* makes it not take up inline space
position: relative
width: 16px
&.loading
background-image: image-url("loading.gif") !important
h4
cursor: pointer
font-size: 115%
&:hover
text-decoration: underline
.outfit-url
+opacity(.5)
background: transparent
border-color: $background-color
font-size: 75%
width: $outfit-content-inner-width
&:hover
+opacity(1)
border-color: $input-border-color
.outfit-delete-confirmation
display: none
font-size: 75%
span
color: red
a
margin: 0 .25em
&.active
background: $module-bg-color
&.confirming-deletion
.outfit-delete
visibility: hidden
.outfit-url
display: none
.outfit-delete-confirmation
display: block
&.starred
.outfit-star
background-image: image-url("star.png")
body.outfits-edit
#preview-toolbar
margin-bottom: .5em
text-align: left
form
+inline-block
margin-right: 2em
#pet-info form
display: inline
#pet-state-form
ul
list-style: none
&, li
display: inline
input
display: none
label
+awesome-button
margin: 0 .25em
li.selected label
+awesome-button-color($marked_button_color)
&.hidden
visibility: hidden
#save-outfit-wrapper
float: right
button
+loud-awesome-button-color
display: none
#preview
clear: both
#preview-swf
float: left
height: $preview-dimension
margin-bottom: 1em
position: relative
width: $preview-dimension
#preview-swf-overlay
+opacity(0)
background: black
height: 100%
left: 0
position: absolute
top: 0
width: 100%
#preview-sidebar
float: left
height: $preview-dimension
margin-left: $sidebar-margin
margin-bottom: 1em
width: $container_width - $preview-dimension - $sidebar-margin
&.viewing-outfits
#preview-closet
display: none
#preview-outfits
display: block
&.viewing-saving-outfit
height: auto
max-height: 100%
#preview-closet
display: none
#preview-saving-outfit
display: block
#preview-closet
h2
margin-bottom: 0
ul
text-align: center
.object
background: $module-bg-color
img
+opacity(0.5)
&.worn
background: transparent
img
+opacity(1)
&.no-assets
background: $error-bg-color
color: $error-color
padding-bottom: 1.25em
.no-assets-message
display: block
.no-assets-message
background: $error-bg-color - #080808
bottom: 0
color: $error-color - #080808
cursor: pointer
display: none
font-size: 75%
left: 0
position: absolute
width: 100%
#no-assets-full-message
+border-radius(5px)
background: $error-bg-color + #111111
border: 1px solid $error-border-color + #111111
color: $error-color + #111111
font-size: 75%
left: -9999px
padding: .25em
position: absolute
top: -9999px
width: 30em
#preview-search-form
clear: both
text-align: left
h2
+inline-block
margin: 0 1em 0 0
input
+inline-block
#preview-search-form-pagination
+inline-block
margin-left: 2em
a, span
margin: 0 .25em
.current
font-weight: bold
#preview-search-form-clear
display: none
font-size: 87.5%
margin-left: 2em
#preview-search-form-loading
display: none
font:
size: 75%
style: italic
margin-left: 2em
#preview-search-form-no-results
display: none
#preview-search-form-help
font-size: 87.5%
margin-left: 2em
.search-helper
font-family: inherit
.possible-error
@extend .error
display: none
#fullscreen-copyright
display: none
&.fullscreen
$fullscreen-search-border: 1px 1px 0
height: 100%
#container
+box-sizing(border-box)
height: 100%
margin: 0 auto
min-width: 800px
padding-top: 2.5em
position: relative
width: 80%
h1
display: none
#short-url-response
position: static
#preview
width: 100%
#preview-sidebar
+border-radius(10px)
border: 1px solid $soft-border-color
float: right
height: 100%
margin: 0
position: relative
width: auto
> div
height: 100%
overflow: auto
width: $sidebar-width
h2
margin:
bottom: .25em
left: $sidebar-unit-horizontal-padding
&.viewing-saving-outfit
height: auto
max-height: 100%
#preview-search-form
bottom: 1.5em
left: 0
overflow: auto
padding: .5em 1em
position: absolute
width: 100%
#preview-search-form-help
div
+inline-block
width: 48%
#footer
bottom: 0
left: 0
position: absolute
width: 100%
ul, p, li
display: inline
ul
margin-right: 2em
.object
padding: $object-padding
position: relative
ul
display: none
left: 0
list-style: none
position: absolute
top: 0
li
margin-bottom: .25em
a
+awesome-button
+awesome-button-color(#aaaaaa)
+opacity(0.9)
font-size: 80%
&:hover
ul, .object-info
display: block
// the difference between the horizontal edge of the object element and the
// image edge
$object-img-diff: ($object-width - $object-img-size) / 2 + $object-padding
.nc-icon
background: image-url("nc.png") no-repeat
height: $nc-icon-size
position: absolute
right: $object-img-diff
text-indent: -9999px
top: $object-img-size - $nc-icon-size
width: $nc-icon-size
&:hover
+opacity(0.5)
.object-info
+border-radius(12px)
+opacity(0.75)
background: #aaa
color: #fff
display: none
height: 16px
position: absolute
right: $object-img-diff / 2
top: 0
width: 16px
span
font:
family: $text-font
weight: bold
position: relative
top: -2px
&:hover
+opacity(1)
#preview-outfits
display: none
text-align: left
> ul
background: image-url("loading.gif") no-repeat center top
display: block
font-family: $main-font
list-style: none
margin:
bottom: 1em
left: $sidebar-unit-horizontal-padding
right: $sidebar-unit-horizontal-padding
min-height: 16px
> li
+outfit
&.loaded
background: transparent
.preview-sidebar-nav
float: right
font-size: 85%
margin:
right: $sidebar-unit-horizontal-padding
top: 1em
#save-success, #save-error, #outfit-not-found
display: none
margin-top: 1em
text-align: center
#save-success
+notice
#save-error, #outfit-not-found
+error
#userbar-message
+opacity(.5)
display: none
#new-outfit
+outfit
display: none
h4
display: inline
&:hover
text-decoration: none
.outfit-star
margin-top: .5em
#new-outfit-name
font: inherit
line-height: 1
#preview-saving-outfit
display: none
padding-bottom: 1em
#pet-type-form, #pet-state-form, #preview-swf, #preview-search-form
position: relative
.control-overlay
height: 100%
left: 0
position: absolute
top: 0
width: 100%
z-index: 5
#preview-sidebar-nav-outfits, #save-outfit-signed-in
display: none
&.user-signed-in
#preview-sidebar-nav-outfits
display: block
#save-outfit
display: inline-block
#save-outfit-wrapper.active-outfit
#save-outfit
display: none
#save-current-outfit, #save-outfit-copy
display: inline-block
&.user-not-signed-in
#save-outfit-not-signed-in
display: inline-block