maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS Variables cleanup (#15828)

Browse source 
* variables cleanup

* little fix
This commit is contained in:
ludwiczakpawel 2021-12-20 15:42:40 +01:00 • committed by GitHub
parent 5e098df276
commit d125617e13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 29 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/components/skip-link.scss
View file

@ -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);
}

17
app/assets/stylesheets/config/_colors.scss
View file

@ -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);

2
app/assets/stylesheets/preact/onboarding-modal.scss
View file

@ -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;

18
app/assets/stylesheets/themes/dark.scss
View file

@ -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);

10
app/assets/stylesheets/views/article-form.scss
View file

@ -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 {

43
app/assets/stylesheets/views/footer.scss
View file

@ -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);
}
}

29
app/views/layouts/_footer.html.erb
View file

@ -1,18 +1,23 @@
<footer class="crayons-footer print-hidden">
<div id="footer-container" class="crayons-layout crayons-layout--limited-m crayons-footer__container">
<p class="fs-s crayons-footer__description"><a href="/" aria-label="<%= t("views.main.aria_home", community: community_name) %>" class="crayons-link"><%= t("views.main.footer.desc", community: community_name, desc: Settings::Community.community_description) %></p>
<div class="m:-mb-4 crayons-footer__description">
<div id="footer-container" class="crayons-footer__container">
<p class="fs-s crayons-footer__description">
<a href="<%= root_path %>" aria-label="<%= t("views.main.aria_home", community: community_name) %>" class="c-link c-link--branded fw-medium">
<%= community_name %>
</a>
– <%= Settings::Community.community_description %>
</p>
<div class="fs-s">
<%# The following copy is necessary for compatibility with the Forem AGPL licence which requires instances to link back to the source. %>
<p class="fs-s"><%= t("views.main.footer.built.text_html",
forem: link_to(t("views.main.footer.built.forem"), "https://www.forem.com", class: "crayons-link", target: "_blank", rel: "noopener"),
opensource: link_to(t("views.main.footer.built.opensource"), "https://dev.to/t/opensource", target: "_blank", rel: "noopener", class: "crayons-link"),
dev: link_to(t("views.main.footer.built.dev"), "https://dev.to", target: "_blank", rel: "noopener", class: "crayons-link")) %></p>
<p class="fs-s"><%= t("views.main.footer.powered.text_html",
rails: link_to(t("views.main.footer.powered.rails"), "https://dev.to/t/rails", target: "_blank", rel: "noopener", class: "crayons-link"),
community: community_name,
copyright: copyright_notice) %></p>
<div><a href="https://www.forem.com" target="_blank" rel="noopener" class="inline-block mt-4"><%= inline_svg_tag("logo-forem.svg", aria: true, class: "crayons-icon crayons-icon--default", title: t("views.main.footer.logo")) %></a></div>
<p><%= t("views.main.footer.built.text_html",
forem: link_to(t("views.main.footer.built.forem"), "https://www.forem.com", class: "c-link c-link--branded", target: "_blank", rel: "noopener"),
opensource: link_to(t("views.main.footer.built.opensource"), "https://dev.to/t/opensource", target: "_blank", rel: "noopener", class: "c-link c-link--branded"),
dev: link_to(t("views.main.footer.built.dev"), "https://dev.to", target: "_blank", rel: "noopener", class: "c-link c-link--branded")) %></p>
<p><%= t("views.main.footer.powered.text_html",
rails: link_to(t("views.main.footer.powered.rails"), "https://dev.to/t/rails", target: "_blank", rel: "noopener", class: "c-link c-link--branded"),
community: community_name,
copyright: copyright_notice) %></p>
</div>
<a href="https://www.forem.com" target="_blank" rel="noopener" class="c-link c-link c-link--block c-link--icon-alone self-center"><%= inline_svg_tag("logo-forem.svg", aria: true, class: "c-link__icon crayons-icon crayons-icon--default", title: t("views.main.footer.logo")) %></a>
</div>
</footer>
<div id="snack-zone"></div>

1
config/locales/views/main/en.yml
View file

@ -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} <span title="copyright">&copy;</span> %{copyright}.

1
config/locales/views/main/fr.yml
View file

@ -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} <span title="copyright">&copy;</span> %{copyright}.