[gnome-shell-sass] screenshot: Assign names to several CSS expressions

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

commit 2c5d923b8aafda87c6c5e8432f0377fbe6d330dc
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Fri Jan 28 22:53:38 2022 +0300

    screenshot: Assign names to several CSS expressions
    
    This commit replaces a few of the screenshot UI CSS expressions with
    named variables.
    
    The shot-cast margin is not defined, but rather set to the value it ends
    up equal to, given the panel padding and the capture button's
    sizes + position, which would be a bit awkward to compute here. It ends
    up slightly larger than the general panel padding due to the capture
    button being larger than other elements, and due to having to
    center-align the shot-cast container to the capture button.
    
    The shot-cast container border radius is defined as 12px, then the panel
    border radius is computed from the shot-cast border radius + margin,
    then the type button border radius is computed from panel
    border radius - padding.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>

 widgets/_screenshot.scss | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)
---
diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss
index 5855fbe..870333e 100644
--- a/widgets/_screenshot.scss
+++ b/widgets/_screenshot.scss
@@ -8,13 +8,20 @@
   }
 }
 
+$screenshot_ui_panel_padding: 18px;
+$screenshot_ui_shot_cast_margin: 21px;
+$screenshot_ui_shot_cast_border_radius: 12px;
+$screenshot_ui_panel_border_radius: $screenshot_ui_shot_cast_border_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_shot_cast_spacing: 3px;
+
 $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-panel {
   background-color: $osd_bg_color;
-  border-radius: 12px + 21px;
-  padding: 18px;
-  padding-bottom: 18px - 6px;
+  border-radius: $screenshot_ui_panel_border_radius;
+  padding: $screenshot_ui_panel_padding;
+  // Reduce the bottom padding a little to accommodate the large capture button.
+  padding-bottom: $screenshot_ui_panel_padding - 6px;
   margin-bottom: $base_margin * 8;
   spacing: $base_padding * 2;
 }
@@ -37,7 +44,7 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-type-button {
   padding: $base_padding * 2 $base_padding * 3;
-  border-radius: 12px + 21px - 18px;
+  border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
   font-weight: bold;
   &:hover, &:focus { background-color: $hover_bg_color; }
   &:active { background-color: $active_bg_color; }
@@ -92,12 +99,12 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-shot-cast-container {
   background-color: $hover_bg_color;
-  border-radius: 12px;
-  padding: $base_padding / 2;
-  spacing: $base_padding / 2;
+  border-radius: $screenshot_ui_shot_cast_border_radius;
+  padding: $screenshot_ui_shot_cast_spacing;
+  spacing: $screenshot_ui_shot_cast_spacing;
 
-  &:ltr { margin-left: 3px; }
-  &:rtl { margin-right: 3px; }
+  &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
+  &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
 }
 
 .screenshot-ui-shot-cast-button {
@@ -107,7 +114,7 @@ $screenshot_ui_button_red: #e01b24;
   &:active { background-color: $active_bg_color; }
   &:checked { background-color: white; color: black; }
 
-  border-radius: 12px - 3px;
+  border-radius: $screenshot_ui_shot_cast_border_radius - $screenshot_ui_shot_cast_spacing;
 
   StIcon {
     icon-size: $base_icon_size;