Merge pull request #77 from ratson/fix-sass-warniing

example: fix sass deprecation warnings

4 files changed, 36 insertions, 20 deletions

diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/js/simple-bar/style.scss
+++ b/examples/js/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/lua/simple-bar/style.scss b/examples/lua/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/lua/simple-bar/style.scss
+++ b/examples/lua/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/py/simple-bar/style.scss b/examples/py/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/py/simple-bar/style.scss
+++ b/examples/py/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/vala/simple-bar/style.scss b/examples/vala/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/vala/simple-bar/style.scss
+++ b/examples/vala/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }