From d125617e130d42aeae54413591965eff8d6d39a0 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Mon, 20 Dec 2021 15:42:40 +0100 Subject: [PATCH] CSS Variables cleanup (#15828) * variables cleanup * little fix --- .../stylesheets/components/skip-link.scss | 7 ++- app/assets/stylesheets/config/_colors.scss | 17 +------- .../stylesheets/preact/onboarding-modal.scss | 2 +- app/assets/stylesheets/themes/dark.scss | 18 +------- .../stylesheets/views/article-form.scss | 10 ----- app/assets/stylesheets/views/footer.scss | 43 +++---------------- app/views/layouts/_footer.html.erb | 29 +++++++------ config/locales/views/main/en.yml | 1 - config/locales/views/main/fr.yml | 1 - 9 files changed, 29 insertions(+), 99 deletions(-) diff --git a/app/assets/stylesheets/components/skip-link.scss b/app/assets/stylesheets/components/skip-link.scss index d0a18f87d..a3c98cdad 100644 --- a/app/assets/stylesheets/components/skip-link.scss +++ b/app/assets/stylesheets/components/skip-link.scss @@ -4,10 +4,9 @@ background: var(--body-color); color: var(--body-color-inverted); z-index: var(--z-popover); - padding: var(--su-4); + padding: var(--su-3) var(--su-4); pointer-events: none; border-radius: var(--radius); - height: var(--header-height); transform: translate(-50%, -200%); transition: transform var(--transition-props); opacity: var(--opacity-0); @@ -19,8 +18,8 @@ .js-focus-visible .skip-content-link:focus { pointer-events: auto; - transform: translate(-50%, 0); + transform: translate(-50%, var(--su-1)); outline: none; - border: 2px solid var(--header-button-focus-color); opacity: var(--opacity-1); + box-shadow: var(--focus-ring); } diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index 4d11e85b8..c784e0511 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -98,22 +98,11 @@ // Header --header-bg: var(--base-inverted); - --header-bg-hover: var(--base-10); - --header-button-focus-color: var(--accent-brand); - --header-bg-current: var(--base-20); --header-shadow: rgba(0, 0, 0, 0.1); - --header-icons-color: var(--base-70); - --header-icons-color-hover: var(--base-100); - - // Logo - --logo-bg: var(--base-100); - --logo-color: var(--base-inverted); // Footer --footer-bg: var(--base-20); - --footer-color: var(--base-70); - --footer-link-color: var(--base-80); - --footer-link-color-hover: var(--base-100); + --footer-color: var(--base-80); // Links --link-bg-hover-alt: var(--base-inverted); @@ -187,10 +176,6 @@ --label-primary: var(--base-90); --label-secondary: var(--base-60); - // Default box - --box: var(--base-90); - --box-darker: var(--base-100); - // Snackbars --snackbar-bg: var(--base-90); --snackbar-color: var(--body-color-inverted); diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss index de0a3ae6b..02a67f621 100644 --- a/app/assets/stylesheets/preact/onboarding-modal.scss +++ b/app/assets/stylesheets/preact/onboarding-modal.scss @@ -97,7 +97,7 @@ align-self: flex-end; flex-shrink: 0; width: 100%; - border-bottom: 2px solid var(--box-darker); + border-bottom: 2px solid #000; &.intro-slide { border-bottom: none; diff --git a/app/assets/stylesheets/themes/dark.scss b/app/assets/stylesheets/themes/dark.scss index 8dc2f5bcb..198675b2d 100644 --- a/app/assets/stylesheets/themes/dark.scss +++ b/app/assets/stylesheets/themes/dark.scss @@ -90,23 +90,11 @@ // Header --header-bg: var(--base-10); - --header-bg-hover: var(--base-0); - --header-bg-current: var(--base-20); - --header-button-focus-color: var(--accent-brand); --header-shadow: rgba(0, 0, 0, 0.3); - --header-icons-color: rgba(255, 255, 255, 0.8); - --header-icons-color-hover: #fff; - - // Logo - --logo-bg: #0a0a0a; - --logo-color: #fff; // Footer --footer-bg: var(--base-inverted); - --footer-copy-color: var(--base-80); - --footer-copy-secondary-color: var(--base-60); - --footer-link-color: var(--base-80); - --footer-link-color-hover: var(--base-100); + --footer-color: var(--base-60); // Links --link-bg-hover-alt: var(--base-inverted); @@ -178,10 +166,6 @@ --label-primary: var(--base-90); --label-secondary: var(--base-60); - // Default box - --box: var(--base-0); - --box-darker: var(--base-inverted); - // Snackbars --snackbar-bg: var(--base-10); --snackbar-color: var(--card-color); diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss index cd2cf2326..336fa8557 100644 --- a/app/assets/stylesheets/views/article-form.scss +++ b/app/assets/stylesheets/views/article-form.scss @@ -122,16 +122,6 @@ @media (min-width: $breakpoint-s) { margin-right: var(--layout-gap); } - - .logo { - width: 50px; - height: 40px; - padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little... - background: var(--logo-bg); - fill: var(--logo-color); - border-radius: var(--radius); - display: block; - } } &__close { diff --git a/app/assets/stylesheets/views/footer.scss b/app/assets/stylesheets/views/footer.scss index f788c5438..a4eaa23ba 100644 --- a/app/assets/stylesheets/views/footer.scss +++ b/app/assets/stylesheets/views/footer.scss @@ -1,6 +1,7 @@ @import '../config/import'; #footer-container { + padding: var(--su-1) 0; // To prevent cutting off the foucs style. content-visibility: auto; contain-intrinsic-size: 300px; // Chromium only. See our discussion here: https://github.com/forem/forem/pull/11560 @media (min-width: $breakpoint-l) { @@ -13,7 +14,6 @@ background: var(--footer-bg); color: var(--footer-color); padding: var(--footer-padding); - position: relative; text-align: center; @media (min-width: $breakpoint-m) { @@ -21,42 +21,11 @@ } &__container { - justify-items: center; - font-size: var(--fs-s); - grid-gap: var(--su-6); margin-bottom: env(safe-area-inset-bottom); - @media (min-width: $breakpoint-m) { - grid-gap: var(--su-5); - font-size: var(--fs-base); - } - } - - &__divider { - border: none; - border-top: 1px solid var(--footer-color); - opacity: 0.15; - width: 20%; - margin: 0; - } - - &__mascot { - position: absolute; - right: var(--footer-padding); - top: -2px; - display: none; - transform-origin: center top; - transition: all var(--transition-props); - - @media (min-width: $breakpoint-l) { - display: block; - } - - &:hover { - transform: rotate(-3deg); - } - } - - .crayons-footer__description a { - font-weight: var(--fw-bold); + max-width: var(--site-width); + margin: 0 auto; + display: flex; + flex-direction: column; + gap: var(--su-2); } } diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index 93b4c5caf..1f9a41f24 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -1,18 +1,23 @@
diff --git a/config/locales/views/main/en.yml b/config/locales/views/main/en.yml index 53d3b33b8..ac518dac8 100644 --- a/config/locales/views/main/en.yml +++ b/config/locales/views/main/en.yml @@ -66,7 +66,6 @@ en: forem: Forem opensource: open source dev: DEV - desc: "%{community} – %{desc}" logo: Forem logo powered: text_html: Made with love and %{rails}. %{community} © %{copyright}. diff --git a/config/locales/views/main/fr.yml b/config/locales/views/main/fr.yml index b822b9718..43b28527a 100644 --- a/config/locales/views/main/fr.yml +++ b/config/locales/views/main/fr.yml @@ -66,7 +66,6 @@ fr: forem: Forem opensource: open source dev: DEV - desc: "%{community} – %{desc}" logo: Forem logo powered: text_html: Made with love and %{rails}. %{community} © %{copyright}.