1
0
Fork 1
impress/app/assets/stylesheets/closet_hangers/_index.sass
Emi Matchu 13b92b30d0 Replace old stickUp dependency with position: sticky
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!)
2024-02-20 18:33:23 -08:00

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