impress/app/assets/stylesheets/outfits/_edit.sass

886 lines
20 KiB
Sass

@import partials/jquery.jgrowl
@import partials/wardrobe
@import "partials/context_button"
@import "partials/icon"
@import "partials/outfit"
@import star
$object-padding: 6px
$nc-icon-size: 16px
$preview-dimension: 380px
$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
=user-select($select)
select: unquote($select)
+experimental(user-select, $select, -moz, -webkit, not -o, not -ms, -khtml, official)
=active-mode
color: $text-color
font-weight: bold
=sidebar-navbar-unselected
background: transparent
border-bottom: 1px solid $soft-border-color
font-weight: normal
=sidebar-navbar-selected
background: white
border-bottom-color: white
font-weight: bold
=sidebar-view-child
margin:
left: $sidebar-unit-horizontal-padding
right: $sidebar-unit-horizontal-padding
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
font-size: 85%
&.hidden
visibility: hidden
#save-outfit-wrapper
float: right
button
display: none
#share-outfit
display: inline-block
&.loading
background:
image: image-url("loading.gif")
position: left center
repeat: no-repeat
padding-left: 20px
#save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-finish
+loud-awesome-button-color
#current-outfit-permalink, #shared-outfit-permalink
display: none
margin-right: .25em
img
+icon
#shared-outfit-url
display: none
width: 15em
#preview
clear: both
#preview-swf
float: left
height: $preview-dimension
margin-bottom: 1em
position: relative
width: $preview-dimension
&.swf-adapter
#preview-image-container
display: none
&.image-adapter
#preview-swf-container
display: none
#preview-image-container
+wardrobe-image-wrapper
position: relative
&, img
height: 100%
width: 100%
#preview-swf-overlay
+opacity(0)
background: black
height: 100%
left: 0
position: absolute
top: 0
width: 100%
#preview-images-pending
background: black
background: rgba(0, 0, 0, 0.75)
bottom: 0
color: white
font-size: 75%
padding: .5em
position: absolute
right: 0
z-index: 1000
&.waiting-on-0
display: none
#preview-mode
margin-right: 1em
position: absolute
right: 100%
text-align: center
top: 0
width: 7em
&.flash-active
#preview-mode-flash
+active-mode
&.image-active
#preview-mode-image
+active-mode
#preview-mode-note, #report-broken-image
display: block
// Phasing out the image download section. Not confident enough yet to
// *remove* it, depending on user feedback, but that's a TODO for down
// the road if hiding goes well.
// &.can-download
// #preview-download-image
// display: inline-block
#preview-mode-toggle
+border-radius(.5em)
border: 1px solid $module-border-color
color: $soft-text-color
font-size: 85%
list-style: none
margin: 0 auto .5em
text-align: center
width: 5em
li
border-top: 1px solid $soft-border-color
cursor: pointer
padding: .125em 0
width: 100%
&:first-child
border-top: 0
#preview-download-image
display: none
margin: 1em auto
h3
font-size: 125%
margin-bottom: .5em
ul
list-style: none
button
font-size: 75%
width: 100%
#preview-mode-note, #report-broken-image
display: block
font-size: 75%
margin-top: .5em
text-align: center
text-decoration: none
width: 100%
em
font-style: normal
text-decoration: underline
#preview-mode-note, #report-broken-image
display: none
#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
&.sharing
#preview-closet
display: none
#preview-sharing
display: block
.sidebar-view
margin: 1.5em 0
#preview-closet
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: 85%
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
clear: both
padding-top: .5em
text-align: left
h2
+inline-block
margin: 0 1em 0 0
input
+inline-block
&[type=submit]
margin-right: 2em
&.advanced
#preview-search-basic
display: none
#preview-search-advanced
display: block
#preview-search-basic > ul
clear: both
#preview-search-basic > ul, #preview-search-advanced-main
/* don't bounce the header around kthx */
min-height: 180px
#preview-search-advanced
display: none
h2
margin-right: 2em
button
margin-right: 4em
#preview-search-basic-link
font-size: 85%
#preview-search-advanced-main
padding-left: 2em
#preview-search-advanced-main > div
+inline-block
box-sizing: border-box
font-size: 87.5%
padding-left: 24px
padding-top: .5em
vertical-align: top
width: 32%
li.text, li.select
label
+inline-block
li.text label
display: block
li.select label
width: 8em
li.checkbox
list-style: none
margin-left: -24px
&:nth-of-type(2), &:nth-of-type(3)
li:first-child
margin-bottom: .75em
#preview-search-advanced-link
font-size: 85%
margin-right: 1em
.preview-search-form-your-items
display: none
font-size: 85%
margin-right: 1em
#preview-search-form-pagination
+inline-block
float: right
margin-top: .5em
a, span
margin: 0 .25em
.current
font-weight: bold
#preview-search-form-clear
display: none
font-size: 85%
#preview-search-form-loading
display: none
font:
size: 75%
style: italic
margin-left: 2em
#preview-search-form-no-results
display: none
.search-helper
font-family: inherit
.possible-error
@extend .error
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%
#short-url-response
position: static
#preview
width: 100%
#preview-sidebar
float: right
margin: 0
position: relative
width: $sidebar-width
&.viewing-saving-outfit
height: auto
max-height: 100%
#preview-search
bottom: 1.5em
left: 0
overflow: auto
position: absolute
width: 100%
#footer
bottom: 0
left: 0
padding-top: 0
position: absolute
width: 100%
ul, li, p, div
display: inline-block
vertical-align: middle
padding: 0
> ul
margin-right: 2em
> p
margin: 0
> ul, div, p
margin-top: 6px
.object
font-size: 85%
padding: $object-padding
position: relative
ul
display: none
left: 0
list-style: none
position: absolute
top: 0
li
margin-bottom: .25em
a
+context-button
font-size: 100%
.unwear-item, .uncloset-item
display: none
&.worn
.wear-item
display: none
.unwear-item
display: block
&.closeted
.closet-item
display: none
.uncloset-item
display: block
&: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
$outfit-inner-size: 110px
$outfit-margin: 1px
$outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
> ul
+outfits-list
+sidebar-view-child
background: image-url("loading.gif") no-repeat center top
display: none
font-family: $main-font
margin: 0 auto 1em
min-height: 16px
width: $outfit-outer-size * 3
&.loaded
background: transparent
> li
height: $outfit-inner-size
margin: $outfit-margin
width: $outfit-inner-size
$outfit-header-h-padding: 4px
$outfit-header-v-padding: 2px
$outfit-header-inner-width: $outfit-inner-size - (2 * $outfit-header-h-padding)
$outfit-header-inner-height: 12px
$outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
header, footer, .outfit-delete-confirmation
font-size: $outfit-header-inner-height
padding: $outfit-header-v-padding $outfit-header-h-padding
width: $outfit-header-inner-width
header
+opacity(0.75)
bottom: 0
cursor: pointer
footer, .outfit-delete-confirmation
display: none
.outfit-delete-confirmation
+outfit-banner
+outfit-banner-background(rgb(255, 50, 50))
text-align: center
top: 0
span
font-weight: bold
$outfit-thumbnail-size: 150px
$outfit-thumbnail-h-offset: ($outfit-inner-size - $outfit-thumbnail-size) / 2
$outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
.outfit-thumbnail-wrapper
+opacity(.5)
background:
image: image-url("small_default.png")
position: center center
size: $outfit-inner-size $outfit-inner-size
cursor: pointer
height: $outfit-thumbnail-size
left: $outfit-thumbnail-h-offset
position: absolute
top: $outfit-thumbnail-v-offset
width: $outfit-thumbnail-size
z-index: 1
.outfit-thumbnail
display: none
.outfit-star
bottom: 0
margin-right: 4px
.outfit-delete
float: right
.outfit-rename-button
float: left
.outfit-rename-button, .outfit-delete
font-size: 85%
text-decoration: none
&:hover
text-decoration: underline
.outfit-rename-form
display: none
input
background: transparent
border: 1px solid white
width: 6em
&:hover
header
+opacity(1)
.outfit-thumbnail-wrapper
+opacity(0.75)
footer
display: block
&.active
header
+opacity(1)
font-weight: bold
.outfit-thumbnail-wrapper
+opacity(1)
&.confirming-deletion
footer
display: none
.outfit-delete-confirmation
display: block
&.renaming
.outfit-name
display: none
.outfit-rename-form
display: inline
&.thumbnail-available
background: transparent
.outfit-thumbnail-wrapper
background-image: none
.outfit-thumbnail
display: block
&.loading
.outfit-star
background-image: image-url("loading_outfit_pane.gif")
#preview-outfits-not-logged-in
text-align: center
img
width: 100%
border:
color: $module-border-color
style: solid
width: 1px 0
figure
display: block
margin: 0 0 1em 0
padding: 0
figcaption
display: block
font-weight: bold
p
+sidebar-view-child
font-size: 85%
#preview-outfits-log-in
+awesome-button
+loud-awesome-button-color
#preview-sharing
display: none
#preview-sharing-urls
+sidebar-view-child
display: none
margin:
bottom: 1em
top: 1em
li
display: block
padding: .25em 0
width: 100%
label
display: block
font-weight: bold
input
display: block
width: 100%
#preview-sharing-url-formats
+sidebar-view-child
+user-select(none)
// remove whitespace between inline-block elements
display: none
font-size: 0
text-align: center
li
+inline-block
border: 1px solid $module-border-color
border-left-width: 0
border-right-color: $soft-border-color
color: $soft-text-color
cursor: pointer
font-size: 12px
padding: 0 2em
&.active
background: $module-bg-color
color: inherit
font-weight: bold
&:first-child
+border-top-left-radius(5px)
+border-bottom-left-radius(5px)
border-left-width: 1px
&:last-child
+border-top-right-radius(5px)
+border-bottom-right-radius(5px)
border-right-color: $module-border-color
#preview-sharing-thumbnail-wrapper
border: 1px solid $soft-border-color
display: block
height: 150px
margin: 1em auto 0
position: relative
width: 150px
#preview-sharing-thumbnail-loading
height: 100%
left: 0
position: absolute
top: 0
width: 100%
span
color: $soft-text-color
font-size: 85%
margin-top: -0.75em
position: absolute
text-align: center
top: 50%
width: 100%
#preview-sharing-thumbnail, #preview-sharing-thumbnail-generating
display: none
#preview-sharing-beta-note
+sidebar-view-child
+warning
font-size: 85%
margin-top: 1em
text-align: center
&.urls-loaded
#preview-sharing-thumbnail-saving
display: none
#preview-sharing-urls, #preview-sharing-url-formats, #preview-sharing-thumbnail-generating
display: block
&.urls-loaded.thumbnail-loaded
#preview-sharing-thumbnail-loading
display: none
#preview-sharing-thumbnail
display: block
&.urls-loaded.thumbnail-available
#preview-sharing-thumbnail-loading
+opacity(0.85)
#preview-sharing-thumbnail
display: block
.preview-sidebar-nav
float: right
font-size: 85%
margin:
right: $sidebar-unit-horizontal-padding
top: 1em
$sidebar-border-radius: 10px
$sidebar-navbar-inner-width: $sidebar-width - 2px
$sidebar-navbar-child-outer-width: floor($sidebar-navbar-inner-width / 3)
#preview-sidebar
#preview-sidebar-navbar-closet
+sidebar-navbar-selected
&.viewing-outfits, &.sharing
#preview-sidebar-navbar-closet
+sidebar-navbar-unselected
&.viewing-outfits #preview-sidebar-navbar-outfits, &.sharing #preview-sidebar-navbar-sharing
+sidebar-navbar-selected
#preview-sidebar-navbar
+border-radius($sidebar-border-radius $sidebar-border-radius 0 0)
+clearfix
+header-text
background: $module-bg-color
border: 1px solid $soft-border-color
border-bottom: 0
font-size: 150%
> div
+sidebar-navbar-unselected
cursor: pointer
float: left
border-left: 1px solid $soft-border-color
padding: .5em 0
text-align: center
width: $sidebar-navbar-child-outer-width
&:first-child
border-left: 0
#preview-sidebar-content
+border-radius(0 0 $sidebar-border-radius $sidebar-border-radius)
border: 1px solid $soft-border-color
border-top: 0
height: 300px
overflow: auto
#save-success, #save-error, #outfit-not-found, #preview-sidebar-donation-request
+sidebar-view-child
display: none
margin:
top: 1em
text-align: center
#preview-sidebar-donation-request
+notice
font-size: 85%
padding: 1em
#preview-sidebar-donation-request-no-thanks
margin-left: 1em
#save-success
+notice
#save-error, #outfit-not-found
+error
#userbar-session-message
+opacity(.5)
display: none
#new-outfit-name
font: inherit
line-height: 1
#pet-type-form, #pet-state-form, #preview-swf, #preview-search
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
form#save-outfit-form
+outfit-star-shifted
display: none
margin-right: 0
padding: 0
.outfit-star, input, button
+inline-block
float: none
vertical-align: top
.outfit-star
margin-top: .25em
.outfit-url
font-size: 75%
#preview-search-form-error
+error
padding: .25em .5em
&.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
// Phasing out permalink. Shared outfit links have been straight-up
// removed, but this may stay depending on user feedback. Otherwise,
// removing it is TODO down the road.
// #current-outfit-permalink
// display: inline-block
&.saving-outfit
#save-outfit-form
display: block
#save-outfit, #save-current-outfit, #save-outfit-copy, #current-outfit-permalink, #shared-outfit-permalink, #share-outfit, #shared-outfit-url
display: none
.preview-search-form-your-items
+inline-block
#preview-outfits-not-logged-in
display: none
#preview-outfits-list
display: block
#advanced-search-log-in-link
display: none
&.user-not-signed-in
#save-outfit-not-signed-in
display: inline-block
#preview-search-advanced
.must-log-in
color: #aca
#save-outfit-wrapper.shared-outfit
#shared-outfit-permalink, #shared-outfit-url
display: inline-block
#current-outfit-permalink
display: none !important
#prank-color-message
display: none
margin: 0 1em