From 9e42d8cd35e91dd44dbf06ac5bb986e8a1e873c0 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Wed, 9 Sep 2020 16:14:30 +0200 Subject: [PATCH] refactor(scss): remove helper/shadow. Expose shadow style in CSS variables --- assets/scss/helper/shadow.scss | 12 ------------ assets/scss/partials/article.scss | 10 +++++----- assets/scss/partials/comments/provider/disqus.scss | 2 +- assets/scss/partials/layout/404.scss | 2 +- assets/scss/partials/layout/article.scss | 6 +++--- assets/scss/partials/layout/taxonomy.scss | 2 +- assets/scss/partials/menu.scss | 2 +- assets/scss/partials/pagination.scss | 2 +- assets/scss/partials/sidebar.scss | 4 ++-- assets/scss/partials/widgets.scss | 8 ++++---- assets/scss/style.scss | 4 +--- assets/scss/variables.scss | 12 ++++++++++++ 12 files changed, 32 insertions(+), 34 deletions(-) delete mode 100644 assets/scss/helper/shadow.scss diff --git a/assets/scss/helper/shadow.scss b/assets/scss/helper/shadow.scss deleted file mode 100644 index ad326f9..0000000 --- a/assets/scss/helper/shadow.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin box_shadow($level) { - @if $level == 1 { - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); - } @else if $level == 2 { - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); - } @else if $level == 3 { - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); - } @else if $level == 4 { - box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), - 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); - } -} diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 6aed5be..bcc10c1 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -7,14 +7,14 @@ display: flex; flex-direction: column; background-color: var(--card-background); - @include box_shadow(1); + box-shadow: var(--shadow-l1); border-radius: var(--card-border-radius); overflow: hidden; transition: box-shadow .3s ease; &:hover { - @include box_shadow(2); + box-shadow: var(--shadow-l2); } &:not(:last-of-type) { @@ -157,7 +157,7 @@ /* Compact style article list */ .article-list--compact { border-radius: var(--card-border-radius); - @include box_shadow(1); + box-shadow: var(--shadow-l1); background-color: var(--card-background); & + .pagination { @@ -205,12 +205,12 @@ position: relative; height: 350px; width: 250px; - @include box_shadow(1); + box-shadow: var(--shadow-l1); transition: box-shadow 0.3s ease; background-color: var(--card-background); &:hover { - @include box_shadow(2); + box-shadow: var(--shadow-l2); } &.has-image { diff --git a/assets/scss/partials/comments/provider/disqus.scss b/assets/scss/partials/comments/provider/disqus.scss index a57c27d..b716351 100644 --- a/assets/scss/partials/comments/provider/disqus.scss +++ b/assets/scss/partials/comments/provider/disqus.scss @@ -1,6 +1,6 @@ .disqus-container { background-color: var(--card-background); border-radius: var(--card-border-radius); - @include box_shadow(1); + box-shadow: var(--shadow-l1); padding: var(--content-padding); } diff --git a/assets/scss/partials/layout/404.scss b/assets/scss/partials/layout/404.scss index 8bdcca2..c1c0db1 100644 --- a/assets/scss/partials/layout/404.scss +++ b/assets/scss/partials/layout/404.scss @@ -1,6 +1,6 @@ .not-found-card { background-color: var(--card-background); - @include box_shadow(1); + box-shadow: var(--shadow-l1); border-radius: var(--card-border-radius); padding: var(--content-padding); } diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index 4504895..5caf8d3 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -46,7 +46,7 @@ article { background: var(--card-background); border-radius: var(--card-border-radius); - @include box_shadow(1); + box-shadow: var(--shadow-l1); overflow: hidden; &.main-article { @@ -134,10 +134,10 @@ transition: box-shadow 0.3s ease; - @include box_shadow(1); + box-shadow: var(--shadow-l1); &:hover { - @include box_shadow(2); + box-shadow: var(--shadow-l2); } svg { diff --git a/assets/scss/partials/layout/taxonomy.scss b/assets/scss/partials/layout/taxonomy.scss index 3318457..d594b23 100644 --- a/assets/scss/partials/layout/taxonomy.scss +++ b/assets/scss/partials/layout/taxonomy.scss @@ -10,7 +10,7 @@ border-radius: var(--card-border-radius); background-color: var(--card-background); padding: var(--small-card-padding); - @include box_shadow(1); + box-shadow: var(--shadow-l1); margin-bottom: var(--section-separation); display: flex; align-items: center; diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 36a261a..5771d22 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -136,7 +136,7 @@ background-color: var(--card-background); margin-top: 0; padding: 15px 0; - @include box_shadow(1); + box-shadow: var(--shadow-l1); display: none; &.show { diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss index ef6b2bd..a6c6882 100644 --- a/assets/scss/partials/pagination.scss +++ b/assets/scss/partials/pagination.scss @@ -1,7 +1,7 @@ .pagination { display: flex; background-color: var(--card-background); - @include box_shadow(1); + box-shadow: var(--shadow-l1); border-radius: var(--card-border-radius); overflow: hidden; flex-wrap: wrap; diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 973e8ea..1166a58 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -83,7 +83,7 @@ width: 100%; height: 100%; border-radius: 100%; - @include box_shadow(1); + box-shadow: var(--shadow-l1); } .emoji { @@ -97,7 +97,7 @@ text-align: center; font-size: 20px; background-color: var(--card-background); - @include box_shadow(2); + box-shadow: var(--shadow-l2); @media (max-width: $on-desktop-large) { width: 40px; diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss index d6a572b..3874e7d 100644 --- a/assets/scss/partials/widgets.scss +++ b/assets/scss/partials/widgets.scss @@ -26,7 +26,7 @@ a { background: var(--card-background); - @include box_shadow(1); + box-shadow: var(--shadow-l1); border-radius: var(--tag-border-radius); padding: 8px 20px; @@ -37,7 +37,7 @@ transition: box-shadow 0.3s ease; &:hover { - @include box_shadow(2); + box-shadow: var(--shadow-l2); } } } @@ -51,12 +51,12 @@ background-color: var(--card-background); padding: 15px 25px; border-radius: var(--card-border-radius); - @include box_shadow(1); + box-shadow: var(--shadow-l1); display: flex; transition: box-shadow 0.3s ease; &:hover { - @include box_shadow(2); + box-shadow: var(--shadow-l2); } @media (max-width: $on-desktop-large) { diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 7fee808..61419c4 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -1,7 +1,5 @@ @import "breakpoints.scss"; - @import "variables.scss"; -@import "helper/shadow.scss"; @import "external/normalize.scss"; @@ -112,8 +110,8 @@ main.main { padding: 15px 20px; border-radius: var(--card-border-radius); line-height: 1.75; - @include box_shadow(2); color: var(--card-text-color-secondary); + box-shadow: var(--shadow-l2); @media (max-width: $on-phone) { max-width: 100vw; diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index 10e9707..5a9ecf8 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -81,6 +81,18 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --tr-even-background-color: #efefee; } +/* +* Shadow style +* Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker +*/ +:root { + --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), + 0px 0px 1px rgba(0, 0, 0, 0.04); +} + @media (prefers-color-scheme: dark) { :root { --body-background: #303030;