[gnome-calculator] math-buttons: Prepare the buttons' style

[Robert Roth <robertroth src gnome org>]

commit 8196cd79442f4369dddcd1e98e4ec618ef72ccf4
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Fri Jan 10 15:39:45 2020 +0100

    math-buttons: Prepare the buttons' style
    
    This complements the buttons overhaul.

 src/ui/calculator.css | 31 +++++++++++++++++++++++++++----
 src/ui/math-window.ui |  7 ++++---
 2 files changed, 31 insertions(+), 7 deletions(-)
---
diff --git a/src/ui/calculator.css b/src/ui/calculator.css
index 8573ae4f..b55291c9 100644
--- a/src/ui/calculator.css
+++ b/src/ui/calculator.css
@@ -48,10 +48,29 @@ clamp.small > grid > :first-child {
   margin-top: 0;
 }
 
-window > deck > box > clamp > grid > box {
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-bottom: 12px;
+.math-buttons > grid {
+  /* 5 44px high buttons and 4px spacing. */
+  min-height: calc(44px*5+4px*4);
+  /* 5 60px wide buttons and 4px spacing. */
+  /* Update the clamp size in templates accordingly. */
+  min-width: calc(60px*5+4px*4-6px);
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.math-buttons.unfolded > grid {
+  min-width: calc(60px*5+4px*4);
+}
+
+.math-buttons.unfolded > grid:not(:only-child):first-child {
+  margin-right: 6px;
+}
+
+.math-buttons.unfolded > grid:not(:only-child):last-child {
+  margin-left: 6px;
 }
 
 .converter,
@@ -83,9 +102,13 @@ clamp:not(.small) .bit-panel {
 
 .math-buttons button {
   font-size: 1.1em;
+  /* Counter the button.text-button style. */
+  padding: 2px 4px 2px 4px;
 }
 
   .math-buttons .number-button {
+    font-size: 1.2em;
+    font-weight: bolder;
   }
 
   .math-buttons .numeric-point-button {
diff --git a/src/ui/math-window.ui b/src/ui/math-window.ui
index 7eed7ab0..4ec1ac9d 100644
--- a/src/ui/math-window.ui
+++ b/src/ui/math-window.ui
@@ -200,9 +200,10 @@
         <child>
           <object class="HdyClamp">
             <property name="visible">True</property>
-            <!-- (5*60 button width + 4*4 spacing + 2*12 margins) * 2 panels = 680 width. -->
-            <property name="maximum-size">680</property>
-            <property name="tightening-threshold">680</property>
+            <!-- (5*60px button width + 4*4px spacing + 12px margin) * 2 panels + 12px panel spacing = 668 
width. -->
+            <!-- Update the panel size in CSS accordingly. -->
+            <property name="maximum-size">668</property>
+            <property name="tightening-threshold">668</property>
             <child>
               <object class="GtkGrid" id="grid">
                 <property name="visible">True</property>