Emi Matchu
13b92b30d0
From an era when we didn't have that! Now we do! (My motivation is that I'm trying to add new JS to this page and errors in stickUp are crashing the page early, womp womp!)
470 lines
9.1 KiB
Sass
470 lines
9.1 KiB
Sass
@import "../partials/clean/constants"
|
|
@import "../partials/campaign-progress"
|
|
@import "../partials/context_button"
|
|
@import "../partials/icon"
|
|
@import "../partials/secondary_nav"
|
|
|
|
body.closet_hangers-index
|
|
+campaign-progress
|
|
+secondary-nav
|
|
|
|
#title
|
|
margin-bottom: 0
|
|
|
|
#import-link
|
|
+awesome-button
|
|
+loud-awesome-button-color
|
|
|
|
#closet-hangers-items-search
|
|
float: right
|
|
|
|
input[name=q]
|
|
&.loading
|
|
background:
|
|
image: image-url("loading.gif")
|
|
position: 2px center
|
|
repeat: no-repeat
|
|
padding-left: $icon-width + 4px
|
|
|
|
#closet-hangers-contact
|
|
clear: both
|
|
color: $soft-text-color
|
|
margin-bottom: 1em
|
|
margin-left: 2em
|
|
min-height: image-height("neomail.png")
|
|
|
|
a
|
|
color: inherit
|
|
margin-right: .5em
|
|
text-decoration: none
|
|
&:hover
|
|
text-decoration: underline
|
|
|
|
a, > form
|
|
background:
|
|
position: left center
|
|
repeat: no-repeat
|
|
padding-left: image-width("neomail.png") + 4px
|
|
|
|
a.neomail, > form
|
|
background-image: image-url("neomail.png")
|
|
|
|
a.lookup
|
|
background-image: image-url("lookup.png")
|
|
|
|
select
|
|
width: 10em
|
|
|
|
label
|
|
font-weight: bold
|
|
margin-right: .5em
|
|
|
|
&:after
|
|
content: ":"
|
|
#toggle-help, #toggle-compare
|
|
+awesome-button
|
|
cursor: pointer
|
|
display: none
|
|
|
|
#closet-hangers-help.hidden
|
|
display: none
|
|
|
|
#closet-hangers-extras
|
|
font-size: 85%
|
|
margin:
|
|
bottom: 2em
|
|
top: 2em
|
|
text-align: center
|
|
|
|
a
|
|
+awesome-button
|
|
margin: 0 0.5em
|
|
|
|
#closet-hangers-share
|
|
margin-bottom: 1em
|
|
|
|
label
|
|
font-weight: bold
|
|
margin-right: .5em
|
|
|
|
input
|
|
width: 30em
|
|
|
|
.bulk-actions
|
|
display: none
|
|
|
|
#closet-hangers
|
|
clear: both
|
|
text-align: center
|
|
border-top: 1px solid $module-border-color
|
|
|
|
.object
|
|
.quantity
|
|
+opacity(.75)
|
|
background: white
|
|
padding: 6px 4px 4px
|
|
position: absolute
|
|
left: ($object-width - $object-img-size) / 2 + $object-padding
|
|
line-height: 1
|
|
text-align: left
|
|
top: 0
|
|
|
|
span, input[type=number]
|
|
font-size: 16px
|
|
font-weight: bold
|
|
|
|
form
|
|
display: none
|
|
|
|
&[data-quantity="1"]
|
|
.quantity
|
|
display: none
|
|
|
|
a
|
|
/* It's jarring to have line-height gaps in the linkiness. */
|
|
display: block
|
|
|
|
&:hover
|
|
text-decoration: underline
|
|
|
|
.object
|
|
margin: 0
|
|
|
|
label
|
|
display: block
|
|
|
|
input[type=checkbox]
|
|
display: none
|
|
position: absolute
|
|
top: 0
|
|
right: ($object-width - $object-img-size) / 2 + $object-padding
|
|
height: 16px
|
|
width: 16px
|
|
|
|
&:checked
|
|
display: block
|
|
|
|
& + label
|
|
background: $module-bg-color
|
|
outline: 1px solid $module-border-color
|
|
|
|
.closet-hangers-group
|
|
border-top: 1px solid $module-border-color
|
|
margin-bottom: 2em
|
|
padding-bottom: 1em
|
|
|
|
&:first-of-type
|
|
border-top: 0
|
|
|
|
> header
|
|
border-bottom: 1px solid $soft-border-color
|
|
display: block
|
|
margin-bottom: .25em
|
|
padding: .25em 0
|
|
position: relative
|
|
|
|
h3
|
|
font-size: 250%
|
|
margin: 0
|
|
|
|
.add-closet-list
|
|
+awesome-button
|
|
bottom: 50%
|
|
margin-bottom: -1em
|
|
position: absolute
|
|
right: 1em
|
|
|
|
&:active
|
|
margin-bottom: -1.1em
|
|
top: auto
|
|
|
|
span.show, span.hide
|
|
color: $soft-text-color
|
|
display: none
|
|
font-size: 85%
|
|
left: 1em
|
|
position: absolute
|
|
top: 1em
|
|
|
|
&:hover
|
|
color: inherit
|
|
text-decoration: underline
|
|
|
|
.closet-list
|
|
border-bottom: 1px solid $soft-border-color
|
|
padding: .5em 0
|
|
position: relative
|
|
|
|
.visibility-form
|
|
font-size: 85%
|
|
left: .5em
|
|
position: absolute
|
|
text-align: left
|
|
top: .25em
|
|
z-index: 10
|
|
|
|
input, select
|
|
font-size: inherit
|
|
margin:
|
|
bottom: 0
|
|
top: 0
|
|
|
|
select
|
|
border-color: $background-color
|
|
|
|
input[type=submit]
|
|
+context-button
|
|
font-size: inherit
|
|
visibility: hidden
|
|
|
|
&:active
|
|
top: 1px
|
|
|
|
.visibility-descriptions
|
|
+opacity(.75)
|
|
background: $background-color
|
|
font-style: italic
|
|
list-style: none
|
|
padding: 0 .5em
|
|
|
|
li
|
|
display: none
|
|
|
|
&:hover
|
|
.visibility-descriptions li.current
|
|
display: block
|
|
|
|
header
|
|
display: block
|
|
position: relative
|
|
|
|
h4
|
|
+header-text
|
|
font-size: 150%
|
|
line-height: 1
|
|
margin: 0 auto .67em
|
|
width: 50%
|
|
|
|
.empty-list
|
|
display: none
|
|
font-style: italic
|
|
|
|
.closet-list-controls
|
|
display: none
|
|
position: absolute
|
|
right: 1em
|
|
top: 0
|
|
|
|
a, input[type=submit], button
|
|
+context-button
|
|
|
|
form
|
|
display: inline
|
|
|
|
&[data-hangers-count="0"]
|
|
.empty-list
|
|
display: block
|
|
|
|
&.unlisted
|
|
h4
|
|
font:
|
|
size: 125%
|
|
style: italic
|
|
|
|
&:hover
|
|
.closet-list-controls
|
|
display: block
|
|
|
|
.visibility-form
|
|
input[type=submit]
|
|
visibility: visible
|
|
|
|
select
|
|
border-color: $soft-border-color
|
|
|
|
&:last-child
|
|
border-bottom: 0
|
|
|
|
&.droppable-active
|
|
border-radius: 1em
|
|
+module
|
|
border-bottom-width: 1px
|
|
border-style: dotted
|
|
margin: 1em 0
|
|
|
|
.object
|
|
// totally hiding these elements causes the original element to change
|
|
// position, throwing off the drag
|
|
+opacity(.25)
|
|
&.ui-draggable-dragging
|
|
+opacity(1)
|
|
|
|
.closet-list-controls
|
|
display: none
|
|
|
|
.closet-list-hangers
|
|
overflow: hidden
|
|
|
|
.visibility-form
|
|
display: none
|
|
|
|
.closet-hangers-group-autocomplete-item, .closet-list-autocomplete-item
|
|
span
|
|
+opacity(.5)
|
|
font-style: italic
|
|
padding: .2em .4em
|
|
|
|
.closet-list-autocomplete-item
|
|
a, span
|
|
font-size: 85%
|
|
padding-left: 2em
|
|
|
|
.closet-hangers-group
|
|
&[data-owned=true] .user-wants, &[data-owned=false] .user-owns
|
|
background: $module-bg-color
|
|
font-weight: bold
|
|
|
|
&.current-user
|
|
#closet-hangers
|
|
.object:hover
|
|
form
|
|
display: inline
|
|
|
|
.closet-hanger-destroy
|
|
position: absolute
|
|
right: ($object-width - $object-img-size) / 2 + $object-padding
|
|
top: $object-img-size - 28px
|
|
|
|
input
|
|
+context-button
|
|
|
|
.quantity
|
|
+opacity(1)
|
|
background: transparent
|
|
top: 0
|
|
padding: 0
|
|
|
|
span
|
|
display: none
|
|
|
|
input[type=number]
|
|
padding: 2px
|
|
width: 2em
|
|
|
|
input[type=submit]
|
|
font-size: 85%
|
|
|
|
input[type=checkbox]
|
|
display: block
|
|
|
|
&.js
|
|
#closet-hangers
|
|
.object:hover .quantity
|
|
display: block
|
|
|
|
input[type=number]
|
|
width: 2.5em
|
|
|
|
input[type=submit]
|
|
display: none
|
|
|
|
.object.loading
|
|
background: $module-bg-color
|
|
outline: 1px solid $module-border-color
|
|
|
|
.quantity
|
|
display: block
|
|
|
|
span:after
|
|
content: "…"
|
|
|
|
.bulk-actions
|
|
background: $background-color
|
|
box-sizing: border-box
|
|
display: block
|
|
font-size: 85%
|
|
padding: .5em 1em
|
|
text-align: center
|
|
width: 800px
|
|
|
|
position: sticky
|
|
top: 0
|
|
border-bottom: 1px solid $module-border-color
|
|
z-index: 11 /* beat the visibility form */
|
|
|
|
.bulk-actions-intro, .bulk-actions-target-desc-singular
|
|
display: none
|
|
|
|
.bulk-actions-target-desc
|
|
display: inline-block
|
|
|
|
.bulk-actions-options
|
|
display: inline-block
|
|
list-style: none
|
|
|
|
> li
|
|
display: inline-block
|
|
margin-left: .75em
|
|
|
|
form
|
|
display: inline-block
|
|
|
|
&:not(:first-child)::before
|
|
content: " or "
|
|
display: inline-block
|
|
margin-right: .75em
|
|
|
|
&[data-target-count="0"]
|
|
.bulk-actions-intro
|
|
display: block
|
|
|
|
.bulk-actions-form
|
|
display: none
|
|
|
|
&[data-target-count="1"]
|
|
.bulk-actions-target-desc-singular
|
|
display: inline
|
|
|
|
.bulk-actions-target-desc-plural
|
|
display: none
|
|
|
|
#closet-hangers-contact
|
|
input[type=submit]
|
|
display: none
|
|
|
|
.closet-hangers-group
|
|
header
|
|
.show, .hide
|
|
cursor: pointer
|
|
|
|
.hide
|
|
display: block
|
|
|
|
&.hidden
|
|
header .hide, .closet-hangers-group-content
|
|
display: none
|
|
|
|
header .show
|
|
display: block
|
|
|
|
#toggle-help
|
|
display: inline-block
|
|
|
|
.remove-all
|
|
display: none
|
|
|
|
.select-all
|
|
display: inline-block
|
|
|
|
&.js
|
|
#toggle-compare
|
|
display: inline-block
|
|
|
|
#closet-hangers.comparing
|
|
.object
|
|
display: none
|
|
|
|
.closet-hangers-group
|
|
&[data-owned=true] .user-wants, &[data-owned=false] .user-owns
|
|
display: inline-block
|
|
|