Emi Matchu
82be7fe301
Mostly this is just me testing out what it would look like to modularize the app more… I've noticed that some concerns, like fundraising, are just not relevant to most of the app, and being able to lock them away inside subfolders feels like it'll help tidy up long folder lists. Notably, I haven't touched the models case yet, because I worry that might be a bit more complex, whereas everything else seems pretty well-isolated? We'll try it out!
227 lines
4.5 KiB
Sass
227 lines
4.5 KiB
Sass
@import "../../partials/clean/constants"
|
|
@import "../../partials/campaign-progress"
|
|
@import "../../partials/outfit"
|
|
|
|
/* TODO: redundant with outfits/index; why is it not in the partial? */
|
|
$outfit-inner-height: 150px
|
|
$outfit-inner-width: 150px
|
|
$outfit-banner-h-padding: 4px
|
|
$outfit-banner-v-padding: 2px
|
|
$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
|
|
|
|
body.fundraising-campaigns
|
|
+campaign-progress
|
|
color: $campaign-text-color
|
|
|
|
a
|
|
color: $campaign-text-color + #222 !important
|
|
|
|
#home-link:hover
|
|
background-color: $campaign-background-color
|
|
|
|
#userbar, #footer
|
|
color: $text-color
|
|
a
|
|
color: $link-color
|
|
|
|
#home-link
|
|
color: $link-color
|
|
|
|
#title
|
|
display: none
|
|
|
|
#donation-form
|
|
+module
|
|
background: $campaign-background-color
|
|
border-color: $campaign-border-color
|
|
display: flex
|
|
flex-direction: row
|
|
margin-top: 1em
|
|
margin-bottom: 1.5em
|
|
padding-bottom: 32px
|
|
padding-left: 24px
|
|
padding-right: 24px
|
|
padding-top: 32px
|
|
position: relative
|
|
|
|
// We ignore the theme attribute on campaigns now, and just do purple.
|
|
&::after
|
|
background:
|
|
image: url(image_path("fundraising/purple.png"))
|
|
repeat: no-repeat
|
|
bottom: 0
|
|
content: " "
|
|
height: 123px
|
|
position: absolute
|
|
right: 4px
|
|
width: 150px
|
|
|
|
header, #donation-fields
|
|
flex: 1
|
|
|
|
#donation-form-title
|
|
font-size: 125%
|
|
font-weight: bold
|
|
margin-bottom: .25em
|
|
margin-top: 0
|
|
|
|
p
|
|
font-family: $main-font
|
|
font-size: 85%
|
|
margin-bottom: 0
|
|
margin-top: .5em
|
|
|
|
#donation-fields
|
|
margin-left: 20px
|
|
padding-top: 7px
|
|
|
|
#amount-header
|
|
font-size: 85%
|
|
font-weight: bold
|
|
line-height: 1
|
|
|
|
#amount-choices
|
|
$amount-choices-border-color: desaturate(lighten($campaign-border-color, 30%), 30%)
|
|
|
|
display: flex
|
|
flex-direction: row
|
|
margin-bottom: .75em
|
|
margin-top: .5em
|
|
|
|
li
|
|
border: 1px solid $amount-choices-border-color
|
|
border-radius: 5px
|
|
display: block
|
|
flex: 1
|
|
list-style: none
|
|
overflow: hidden
|
|
text-align: center
|
|
|
|
&:not(:last-of-type)
|
|
margin-right: .75em
|
|
|
|
input[type=radio]
|
|
height: 0
|
|
margin: 0
|
|
padding: 0
|
|
opacity: 0
|
|
position: absolute
|
|
width: 0
|
|
|
|
label
|
|
border: 1px solid transparent
|
|
box-sizing: border-box
|
|
display: block
|
|
padding: .5em .5em
|
|
width: 100%
|
|
|
|
input[type=radio]:checked ~ label
|
|
background: lighten($amount-choices-border-color, 15%)
|
|
font-weight: bold
|
|
|
|
input[type=radio]:focus ~ label
|
|
border-color: white
|
|
border-radius: 5px
|
|
|
|
#amount-custom-fields
|
|
display: none
|
|
|
|
input[type=text]
|
|
font-family: inherit
|
|
font-size: inherit
|
|
line-height: 1
|
|
padding: 0
|
|
text-align: center
|
|
|
|
#amount-custom:checked ~ #amount-custom-fields
|
|
display: block
|
|
|
|
#amount-custom:checked ~ label[for=amount-custom]
|
|
display: none
|
|
|
|
input[type=text]
|
|
border-color: #cce
|
|
color: $campaign-text-color
|
|
width: 3em
|
|
|
|
#donation-controls
|
|
button
|
|
+awesome-button-color(#004)
|
|
font-size: 120%
|
|
|
|
#campaign-text[data-campaign-complete]
|
|
#description
|
|
display: none
|
|
&[data-show]
|
|
display: block
|
|
|
|
#success-thanks
|
|
border: 1px dashed $module-border-color
|
|
margin-bottom: 1em
|
|
padding: 1em
|
|
position: relative
|
|
|
|
p:last-child
|
|
margin-bottom: 0
|
|
|
|
#success-thanks-toggle-description
|
|
position: absolute
|
|
bottom: 1em
|
|
font-style: italic
|
|
right: 1em
|
|
|
|
#outfits
|
|
+outfits-list
|
|
text-align: center
|
|
|
|
> li
|
|
+outfit
|
|
|
|
height: $outfit-inner-height
|
|
margin: 2px
|
|
width: $outfit-inner-width
|
|
|
|
header, footer
|
|
font-size: 85%
|
|
padding: $outfit-banner-v-padding $outfit-banner-h-padding
|
|
width: $outfit-banner-inner-width
|
|
|
|
img
|
|
height: $outfit-inner-height
|
|
width: $outfit-inner-width
|
|
|
|
&.banner
|
|
background-image: url(https://images.neopets.com/themes/004_bir_a2e60/footer_bg.png)
|
|
background-position: 0 -60px
|
|
border: 2px solid #006
|
|
color: white
|
|
height: 100px
|
|
line-height: 100px
|
|
margin: 4px 0
|
|
text-shadow: #335 2px 2px 1px
|
|
width: 800px - 4px
|
|
|
|
span
|
|
+inline-block
|
|
font-size: 32px
|
|
font-weight: bold
|
|
line-height: 1.5
|
|
vertical-align: middle
|
|
|
|
#last-years-donors
|
|
font-weight: bold
|
|
margin-top: 1em
|
|
text-align: center
|
|
|
|
#outfits-header > *
|
|
display: inline-block
|
|
|
|
#all-campaigns-list
|
|
li
|
|
display: inline-block
|
|
list-style: none
|
|
margin-left: 1em
|
|
|
|
#fine-print
|
|
font-size: 85%
|
|
margin-top: 2em
|