[libadwaita/wip/exalm/stylesheet2: 94/97] stylesheet: Split avatar styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 28ab9b27f44429e9e3f8a867e334105325e69a31
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 16:47:24 2021 +0500

    stylesheet: Split avatar styles into a separate file

 src/stylesheet/_custom.scss         | 41 -------------------------------------
 src/stylesheet/_widgets.scss        |  1 +
 src/stylesheet/meson.build          |  1 +
 src/stylesheet/widgets/_avatar.scss | 38 ++++++++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 41 deletions(-)
---
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index f9cec07..053f3ed 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -75,47 +75,6 @@ leaflet {
   }
 }
 
-// AdwAvatar
-
-avatar {
-  border-radius: 9999px;
-  font-weight: bold;
-
-  // The list of colors to generate avatars.
-  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
-  // There are 8 different colors for avtars in the list if you change the number of them you
-  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
-  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
-  $avatarcolorlist: (
-   (#cfe1f5, #83b6ec, #337fdc), // blue
-   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
-   (#cef8d8, #8de6b1, #29ae74), // green
-   (#e6f9d7, #b5e98a, #6ab85b), // lime
-   (#f9f4e1, #f8e359, #d29d09), // yellow
-   (#ffead1, #ffcb62, #d68400), // gold
-   (#ffe5c5, #ffa95a, #ed5b00), // orange
-   (#f8d2ce, #f78773, #e62d42), // raspberry
-   (#fac7de, #e973ab, #e33b6a), // magenta
-   (#e7c2e8, #cb78d4, #9945b5), // purple
-   (#d5d2f5, #9e91e8, #7a59ca), // violet
-   (#f2eade, #e3cf9c, #b08952), // beige
-   (#e5d6ca, #be916d, #785336), // brown
-   (#d8d7d3, #c0bfbc, #6e6d71), // gray
-  );
-
-  @for $i from 1 through length($avatarcolorlist) {
-    &.color#{$i} {
-      $avatarcolor: nth($avatarcolorlist, $i);
-      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
-      color: nth($avatarcolor, 1);
-    }
-  }
-
-  &.contrasted { color: #fff; }
-
-  &.image { background: none; }
-}
-
 // Preferences
 
 window.preferences > contents > leaflet > box > stack > stack > scrolledwindow > viewport > clamp > list,
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 5ce5d4b..cf31ba8 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -1,3 +1,4 @@
+@import 'widgets/avatar';
 @import 'widgets/buttons';
 @import 'widgets/calendar';
 @import 'widgets/checks';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index ddcde35..ce2c5d8 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -20,6 +20,7 @@ if not fs.exists('Adwaita-light.css')
       '_drawing.scss',
       '_widgets.scss',
 
+      'widgets/_avatar.scss',
       'widgets/_buttons.scss',
       'widgets/_calendar.scss',
       'widgets/_checks.scss',
diff --git a/src/stylesheet/widgets/_avatar.scss b/src/stylesheet/widgets/_avatar.scss
new file mode 100644
index 0000000..8cbfbd4
--- /dev/null
+++ b/src/stylesheet/widgets/_avatar.scss
@@ -0,0 +1,38 @@
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+  // There are 8 different colors for avtars in the list if you change the number of them you
+  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+  $avatarcolorlist: (
+   (#cfe1f5, #83b6ec, #337fdc), // blue
+   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+   (#cef8d8, #8de6b1, #29ae74), // green
+   (#e6f9d7, #b5e98a, #6ab85b), // lime
+   (#f9f4e1, #f8e359, #d29d09), // yellow
+   (#ffead1, #ffcb62, #d68400), // gold
+   (#ffe5c5, #ffa95a, #ed5b00), // orange
+   (#f8d2ce, #f78773, #e62d42), // raspberry
+   (#fac7de, #e973ab, #e33b6a), // magenta
+   (#e7c2e8, #cb78d4, #9945b5), // purple
+   (#d5d2f5, #9e91e8, #7a59ca), // violet
+   (#f2eade, #e3cf9c, #b08952), // beige
+   (#e5d6ca, #be916d, #785336), // brown
+   (#d8d7d3, #c0bfbc, #6e6d71), // gray
+  );
+
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: #fff; }
+
+  &.image { background: none; }
+}