From 8117d976a6a45439cd4f0446e21d3a60ce0bc2a9 Mon Sep 17 00:00:00 2001 From: Matchu Date: Tue, 14 May 2024 16:09:45 -0700 Subject: [PATCH] Update some stylesheets to use new page_stylesheet_link_tag helper Now that we have this helper, we no longer need these stylesheets to include a `body.controller-action` wrapper to scope all the styles! Someday we should convert more of our stylesheets to this format, instead of slamming them all into `application.sass` like we do now. Ah, well! --- app/assets/stylesheets/auth_users/edit.sass | 93 +++-- .../stylesheets/devise/sessions/new.sass | 139 ++++--- .../fundraising/campaigns/show.css.sass | 358 +++++++++--------- app/views/auth_users/edit.html.erb | 2 +- app/views/devise/sessions/new.html.erb | 2 +- .../fundraising/campaigns/show.html.haml | 2 +- .../fundraising/donations/show.html.haml | 2 +- 7 files changed, 298 insertions(+), 300 deletions(-) diff --git a/app/assets/stylesheets/auth_users/edit.sass b/app/assets/stylesheets/auth_users/edit.sass index 68e86ec7..121b2c93 100644 --- a/app/assets/stylesheets/auth_users/edit.sass +++ b/app/assets/stylesheets/auth_users/edit.sass @@ -1,56 +1,55 @@ @import "../partials/clean/constants" -body.auth_users-edit, body.auth_users-update - .settings-form - border: 1px solid $module-border-color - background: $module-bg-color - border-radius: 1em - padding: 1em 1.25em +.settings-form + border: 1px solid $module-border-color + background: $module-bg-color + border-radius: 1em + padding: 1em 1.25em - &:not(:last-of-type) - margin-bottom: 2em + &:not(:last-of-type) + margin-bottom: 2em - h2 - font-size: 1.5rem - margin-bottom: .25em + h2 + font-size: 1.5rem + margin-bottom: .25em - .hint - font-style: italic - font-size: .85em - opacity: .9 + .hint + font-style: italic + font-size: .85em + opacity: .9 - fieldset - padding-block: .5em + fieldset + padding-block: .5em - fieldset:not(:last-of-type) - border-bottom: 1px solid $module-border-color - margin-bottom: .5em - - .field - margin-bottom: 1em - - .field_with_errors - display: inline - - label - font-weight: bold - - .error-explanation - color: $error-color - background: $error-bg-color - border: 1px solid $error-border-color - border-radius: .5em - padding: .5em - margin-bottom: .5em - - header - font-weight: bold - - ul - padding-left: 2em - - .neopass-info + fieldset:not(:last-of-type) + border-bottom: 1px solid $module-border-color margin-bottom: .5em - .neopass-explanation - font-size: .85em + .field + margin-bottom: 1em + + .field_with_errors + display: inline + + label + font-weight: bold + + .error-explanation + color: $error-color + background: $error-bg-color + border: 1px solid $error-border-color + border-radius: .5em + padding: .5em + margin-bottom: .5em + + header + font-weight: bold + + ul + padding-left: 2em + +.neopass-info + margin-bottom: .5em + +.neopass-explanation + font-size: .85em diff --git a/app/assets/stylesheets/devise/sessions/new.sass b/app/assets/stylesheets/devise/sessions/new.sass index 9431d29e..d92ea48b 100644 --- a/app/assets/stylesheets/devise/sessions/new.sass +++ b/app/assets/stylesheets/devise/sessions/new.sass @@ -1,84 +1,83 @@ @import "../../partials/clean/constants" -body.devise-sessions, body.devise-sessions-new - #title +#title + text-align: center + font-size: 2.5rem + +.login-options + display: flex + margin-block: 3em + + section + flex: 1 1 0 + padding-block: 1em + display: flex + flex-direction: column + justify-content: center + align-items: center + + &:not(:last-of-type) + border-right: 1px solid $module-border-color + margin-right: 1em + padding-right: 1em + + .login-option-neopass text-align: center - font-size: 2.5rem - .login-options - display: flex - margin-block: 3em - - section - flex: 1 1 0 - padding-block: 1em - display: flex - flex-direction: column - justify-content: center - align-items: center - - &:not(:last-of-type) - border-right: 1px solid $module-border-color - margin-right: 1em - padding-right: 1em - - .login-option-neopass - text-align: center - - header - font-weight: bold - font-size: 125% - margin-bottom: .5em - - .neopass-explanation - font-size: 85% - - summary - cursor: pointer - margin-bottom: 1em - - .login-form - margin-bottom: 1em - - .field - margin-bottom: .75em - - .input-field label + header font-weight: bold + font-size: 125% + margin-bottom: .5em - .actions - display: flex - align-items: center - gap: .5em + .neopass-explanation + font-size: 85% - .remember-me - display: flex - align-items: center - gap: .25em - font-size: 85% + summary + cursor: pointer + margin-bottom: 1em - input[type=checkbox] - height: 1em - width: 1em +.login-form + margin-bottom: 1em - .login-links - font-size: 85% + .field + margin-bottom: .75em + + .input-field label + font-weight: bold + + .actions display: flex + align-items: center gap: .5em - .log-in-with-neopass-button - background: linear-gradient(#ebb233, #f6e250, #ebb233) - color: #111 - font-size: 1rem - text-shadow: none - font-family: "Arial Black", sans-serif - margin-bottom: 1em + .remember-me + display: flex + align-items: center + gap: .25em + font-size: 85% - &:hover - color: #111 // override default DTI styles - filter: brightness(105%) + input[type=checkbox] + height: 1em + width: 1em - .neopass-icon - vertical-align: middle - height: 2em - width: 2em +.login-links + font-size: 85% + display: flex + gap: .5em + +.log-in-with-neopass-button + background: linear-gradient(#ebb233, #f6e250, #ebb233) + color: #111 + font-size: 1rem + text-shadow: none + font-family: "Arial Black", sans-serif + margin-bottom: 1em + + &:hover + color: #111 // override default DTI styles + filter: brightness(105%) + + .neopass-icon + vertical-align: middle + height: 2em + width: 2em diff --git a/app/assets/stylesheets/fundraising/campaigns/show.css.sass b/app/assets/stylesheets/fundraising/campaigns/show.css.sass index f573079a..69a9d643 100644 --- a/app/assets/stylesheets/fundraising/campaigns/show.css.sass +++ b/app/assets/stylesheets/fundraising/campaigns/show.css.sass @@ -9,219 +9,219 @@ $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 +body +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: $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 +#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%) - #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 + margin-bottom: .75em + margin-top: .5em - // 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 + li + border: 1px solid $amount-choices-border-color + border-radius: 5px + display: block flex: 1 + list-style: none + overflow: hidden + text-align: center - #donation-form-title - font-size: 125% - font-weight: bold - margin-bottom: .25em - margin-top: 0 + &:not(:last-of-type) + margin-right: .75em - p - font-family: $main-font - font-size: 85% - margin-bottom: 0 - margin-top: .5em + input[type=radio] + height: 0 + margin: 0 + padding: 0 + opacity: 0 + position: absolute + width: 0 - #donation-fields - margin-left: 20px - padding-top: 7px + label + border: 1px solid transparent + box-sizing: border-box + display: block + padding: .5em .5em + width: 100% - #amount-header - font-size: 85% - font-weight: bold - line-height: 1 + input[type=radio]:checked ~ label + background: lighten($amount-choices-border-color, 15%) + font-weight: bold - #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 + input[type=radio]:focus ~ label + border-color: white border-radius: 5px - display: block - flex: 1 - list-style: none - overflow: hidden - text-align: center - &:not(:last-of-type) - margin-right: .75em + #amount-custom-fields + display: none - input[type=radio] - height: 0 - margin: 0 + input[type=text] + font-family: inherit + font-size: inherit + line-height: 1 padding: 0 - opacity: 0 - position: absolute - width: 0 + text-align: center - 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] + #amount-custom:checked ~ #amount-custom-fields display: block - #success-thanks - border: 1px dashed $module-border-color - margin-bottom: 1em - padding: 1em - position: relative + #amount-custom:checked ~ label[for=amount-custom] + display: none - p:last-child - margin-bottom: 0 + input[type=text] + border-color: #cce + color: $campaign-text-color + width: 3em - #success-thanks-toggle-description - position: absolute - bottom: 1em - font-style: italic - right: 1em + #donation-controls + button + +awesome-button-color(#004) + font-size: 120% - #outfits - +outfits-list - text-align: center +#campaign-text[data-campaign-complete] + #description + display: none + &[data-show] + display: block - > li - +outfit +#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 - 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 + &.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 - img - height: $outfit-inner-height - width: $outfit-inner-width + span + +inline-block + font-size: 32px + font-weight: bold + line-height: 1.5 + vertical-align: middle - &.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 +#last-years-donors + font-weight: bold + margin-top: 1em + text-align: center - span - +inline-block - font-size: 32px - font-weight: bold - line-height: 1.5 - vertical-align: middle +#outfits-header > * + display: inline-block - #last-years-donors - font-weight: bold - margin-top: 1em - text-align: center - - #outfits-header > * +#all-campaigns-list + li display: inline-block + list-style: none + margin-left: 1em - #all-campaigns-list - li - display: inline-block - list-style: none - margin-left: 1em - - #fine-print - font-size: 85% - margin-top: 2em +#fine-print + font-size: 85% + margin-top: 2em diff --git a/app/views/auth_users/edit.html.erb b/app/views/auth_users/edit.html.erb index c48ef4cf..07afb9d0 100644 --- a/app/views/auth_users/edit.html.erb +++ b/app/views/auth_users/edit.html.erb @@ -126,5 +126,5 @@ <% end %> <% content_for :stylesheets do %> - <%= stylesheet_link_tag "auth_users/edit" %> + <%= page_stylesheet_link_tag "auth_users/edit" %> <% end %> diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 22b67728..9cd949a4 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -66,5 +66,5 @@ <% content_for :stylesheets do %> - <%= stylesheet_link_tag "devise/sessions/new" %> + <%= page_stylesheet_link_tag "devise/sessions/new" %> <% end %> diff --git a/app/views/fundraising/campaigns/show.html.haml b/app/views/fundraising/campaigns/show.html.haml index 560034c1..43f4dfb9 100644 --- a/app/views/fundraising/campaigns/show.html.haml +++ b/app/views/fundraising/campaigns/show.html.haml @@ -124,4 +124,4 @@ Thank you!! - content_for :stylesheets do - = stylesheet_link_tag 'fundraising/campaigns/show' + = page_stylesheet_link_tag 'fundraising/campaigns/show' diff --git a/app/views/fundraising/donations/show.html.haml b/app/views/fundraising/donations/show.html.haml index 66976193..5ffb6349 100644 --- a/app/views/fundraising/donations/show.html.haml +++ b/app/views/fundraising/donations/show.html.haml @@ -48,4 +48,4 @@ = javascript_include_tag 'fundraising/donations/show', defer: true - content_for :stylesheets do - = stylesheet_link_tag 'fundraising/donations/show' + = page_stylesheet_link_tag 'fundraising/donations/show'