[gnome-shell-sass] theme: Define default user-icon sizing in SASS

[Florian Müllner <fmuellner src gnome org>]

commit d9ea06f604dc6751a14754acdec27aba99128b6d
Author: Joonas Henriksson <joonas henriksson gmail com>
Date:   Sun Nov 1 10:55:45 2020 +0200

    theme: Define default user-icon sizing in SASS
    
    The default sizing for user-icon style was not defined in the theme,
    but it simply used the default Avatar iconSize from UserWidget.js.
    
    This didn't work with the current fallback avatar styling (i.e. when
    the avatar icon is not set for an user account, and a symbolic icon
    is displayed in its place), as the fallback StIcon was not scaled
    to align inside the circle shaped user-icon properly.
    
    Define the user-icon and corrected fallback StIcon sizes in the
    stylesheet to correct this. The default 64px user-icon size is based
    on default UserWidget.Avatar iconSize. The sizing for the StIcon is
    taken from `.user-widget.horizontal .user-icon` styling, which uses
    the same base icon-size.
    
    Additionally, the special `.user-widget.horizontal .user-icon`
    styling is removed, as it is now redundant.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1490>

 widgets/_misc.scss | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)
---
diff --git a/widgets/_misc.scss b/widgets/_misc.scss
index 96dd4d1..b2f22fc 100644
--- a/widgets/_misc.scss
+++ b/widgets/_misc.scss
@@ -10,6 +10,7 @@
   color: $osd_fg_color;
   border-radius: 99px;
   border: 2px $osd_fg_color;
+  icon-size: $base_icon_size * 4; // 64px
   &:hover {
     color: lighten($osd_fg_color,30%);
   }
@@ -17,6 +18,8 @@
   & StIcon {
     background-color: transparentize($osd_fg_color,0.95);
     border-radius: 99px;
+    padding: $base_padding * 2 ; // 12px
+    width: $base_icon_size * 2.5; height:  $base_icon_size * 2.5; // 40px;
   }
 }
 
@@ -31,15 +34,6 @@
   }
 }
 
-.user-widget.horizontal .user-icon {
-  icon-size: $base_icon_size * 4; // 64px
-
-  & StIcon {
-    padding: $base_padding * 2 ; // 12px
-    width: $base_icon_size * 2.5; height:  $base_icon_size * 2.5; // 40px;
-  }
-}
-
 .lightbox { background-color: black; }
 .flashspot { background-color: white; }