refactor(scss): remove helper/shadow. Expose shadow style in CSS variables

This commit is contained in:
Jimmy Cai
2020-09-09 16:14:30 +02:00
parent 190475dbad
commit 9e42d8cd35
12 changed files with 32 additions and 34 deletions
+5 -5
View File
@@ -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 {
@@ -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);
}
+1 -1
View File
@@ -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);
}
+3 -3
View File
@@ -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 {
+1 -1
View File
@@ -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;
+1 -1
View File
@@ -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 {
+1 -1
View File
@@ -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;
+2 -2
View File
@@ -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;
+4 -4
View File
@@ -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) {