Task/fix sass deprecations (#784)

* Fix deprecated @import in sass files * Fix editor styles for next-events
verdigado · Dec 4, 2024 · ecb6ca9 · ecb6ca9
1 parent 16f149e
commit ecb6ca9
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 28 deletions.
diff --git a/assets/css/editor-style.css b/assets/css/editor-style.css
@@ -256,11 +256,6 @@
 	}
 }
 
-.styled-layout .wp-block-group {
-	padding-top: 100px;
-	padding-bottom: 100px;
-}
-
 /* Main column width */
 .wp-block {
 	max-width: 860px;
@@ -483,6 +478,11 @@ p a {
 	padding-bottom: 100px;
 }
 
+.styled-layout .wp-block-group > * {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
 @media (max-width: 767.98px) {
 	.styled-layout .wp-block-group {
 		padding-top: 50px;

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 $custom-colors: (
     klee: #008939,
     klee-700: #006e2e,
@@ -14,17 +15,17 @@ $custom-colors: (
 );
 
 
-$primary: map-get($custom-colors, "klee");
-$secondary: map-get($custom-colors, "tanne");
-$white: map-get($custom-colors, "white");
+$primary: map.get($custom-colors, "klee");
+$secondary: map.get($custom-colors, "tanne");
+$white: map.get($custom-colors, "white");
 
-$black: map-get($custom-colors, "black");
-$black-500: map-get($custom-colors, "black-500");
+$black: map.get($custom-colors, "black");
+$black-500: map.get($custom-colors, "black-500");
 
 $white-90: rgba(255, 255, 255, 0.9);
 
 $dark: #ddd;
-$gray-500: map-get($custom-colors, "gray-500");
+$gray-500: map.get($custom-colors, "gray-500");
 $darkgray: #333;
 $lightgray: #aeb2ad;
 $very-light-gray: #d6d9d6;

diff --git a/src/accordion/editor.scss b/src/accordion/editor.scss
@@ -4,7 +4,7 @@
  * Try to style the editor accordion like in the frontend without bootstrap
  */
 
-@import "../../sass/variables";
+@use "../../sass/variables";
 
 .wp-block-sunflower-accordion {
 
@@ -24,15 +24,15 @@
             padding: 1rem 1.25rem;
             font-size: 1.1875rem;
             text-align: left;
-            background-color: $secondary;
+            background-color: variables.$secondary;
             border: 0;
             border-top-left-radius: 5px;
             border-top-right-radius: 5px;
             overflow-anchor: none;
 
             input[type="text"] {
                 color: #fff;
-                background-color: $secondary;
+                background-color: variables.$secondary;
                 padding: 2px;
                 border: none;
                 font-size: 19px;

diff --git a/src/contact-form/editor.scss b/src/contact-form/editor.scss
@@ -4,7 +4,7 @@
  * Try to style the editor accordion like in the frontend without bootstrap
  */
 
-@import "../../sass/variables";
+@use "../../sass/variables";
 
 *,
 *::before,
@@ -18,9 +18,9 @@
 
         &-respond {
 
-            background-color: $white;
+            background-color: variables.$white;
             padding: 30px;
-            border-radius: $border-radius;
+            border-radius: variables.$border-radius;
 
             label {
                 display: block;
@@ -33,7 +33,7 @@
     }
 
     .form-submit input {
-        background-color: $secondary;
+        background-color: variables.$secondary;
         text-transform: uppercase;
         font-size: 1rem;
         border-radius: 4px;

diff --git a/src/latest-posts/editor.scss b/src/latest-posts/editor.scss
@@ -4,7 +4,7 @@
  * Try to style the editor accordion like in the frontend without bootstrap
  */
 
-@import "../../sass/variables";
+@use "../../sass/variables";
 
 .wp-block-sunflower-latest-posts {
 
@@ -13,7 +13,7 @@
 
     a {
         text-decoration: none;
-        color: $primary;
+        color: variables.$primary;
     }
 
     article {
@@ -48,7 +48,7 @@
         .entry-content a,
         .continue-reading {
             text-decoration: none;
-            color: $body-color;
+            color: variables.$body-color;
         }
 
         .continue-reading {
@@ -117,7 +117,7 @@
     }
 
     .bg-primary {
-        background-color: $primary;
+        background-color: variables.$primary;
     }
 
     .text-white {

diff --git a/src/meta-data/editor.scss b/src/meta-data/editor.scss
@@ -4,13 +4,13 @@
  * Try to style the editor accordion like in the frontend without bootstrap
  */
 
-@import "../../sass/variables";
+@use "../../sass/variables";
 
 .wp-block-sunflower-meta-data {
 
     a {
         text-decoration: none;
-        color: $body-color;
+        color: variables.$body-color;
 
         &.text-danger {
             color: #f00;

diff --git a/src/next-events/editor.scss b/src/next-events/editor.scss
@@ -4,18 +4,18 @@
  * Try to style the editor accordion like in the frontend without bootstrap
  */
 
-@import "../../sass/variables";
+@use "../../sass/variables";
 
 .wp-block-sunflower-next-events {
 
     list-style: none;
     padding: 0;
 
-    a {
+    a.event-card {
         text-decoration: none;
-        color: $body-color;
+        color: variables.$body-color;
 
-        &.event-card article {
+        article {
             background-color: #fff;
             border-radius: 3px;
             height: 100%;