refactor(scss): remove helper/shadow. Expose shadow style in CSS variables
This commit is contained in:
@@ -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,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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user