[gnome-shell-sass] userWidget: Allow vertical orientation for user avatars

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

commit df49b19ac264410e8d1e9f8fb2fcd9692ac8021a
Author: Umang Jain <mailumangjain gmail com>
Date:   Tue Jan 14 20:23:36 2020 +0530

    userWidget: Allow vertical orientation for user avatars
    
    Allow vertical orientation for the userWidget so that the user-avatar
    can be centered and user's name can be placed below it. The plan
    for 3.36 is to use this vertical userWidget layout for both lock
    and login screen.
    
    The userWidget is also used while creating the user-selection list
    at the login, hence we still need to keep the horizontal layout
    for userWidget in place.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/922

 widgets/_login-dialog.scss | 15 +++++++++++----
 widgets/_misc.scss         |  8 ++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
---
diff --git a/widgets/_login-dialog.scss b/widgets/_login-dialog.scss
index b0ee8cc..536f635 100644
--- a/widgets/_login-dialog.scss
+++ b/widgets/_login-dialog.scss
@@ -113,20 +113,27 @@
   &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
 }
 
-.login-dialog-username,
 .user-widget-label {
   color: $osd_fg_color;
+}
+
+.user-widget.horizontal .user-widget-label {
   @include fontsize($base_font_size + 2);
   font-weight: bold;
   text-align: left;
   padding-left: 15px;
-}
 
-.user-widget-label {
   &:ltr { padding-left: 14px; }
   &:rtl { padding-right: 14px; }
 }
 
+.user-widget.vertical .user-widget-label {
+  @include fontsize($base_font_size + 5);
+  text-align: center;
+  font-weight: normal;
+  padding-top: 16px;
+}
+
 .login-dialog-prompt-layout {
   padding-top: 24px;
   padding-bottom: 12px;
@@ -148,4 +155,4 @@
   color: darken($osd_fg_color,30%);
   &:hover,&:focus { color: $osd_fg_color; }
   &:active { color: darken($osd_fg_color, 50%); }
-}
\ No newline at end of file
+}
diff --git a/widgets/_misc.scss b/widgets/_misc.scss
index 296632b..3871673 100644
--- a/widgets/_misc.scss
+++ b/widgets/_misc.scss
@@ -37,6 +37,14 @@
   }
 }
 
+.user-widget.vertical .user-icon {
+  icon-size: 128px;
+}
+
+.user-widget.horizontal .user-icon {
+  icon-size: 64px;
+}
+
 // Input Source Switcher
 .input-source-switcher-symbol {
   font-size: 34pt;