Adwaita: use min-height/width for entry and button sizing

3 files changed, 66 insertions, 57 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index df4a05e465..0b2ce710fa 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -224,8 +224,10 @@ spinner {
  ****************/
 
 entry {
+  min-height: 32px;
   border: 1px solid;
-  padding: 5px 8px 6px;
+  padding-left: 8px;
+  padding-right: 8px;
 
   & image { // icons inside the entry
     &.left { padding-left: 0; padding-right: 6px; }
@@ -373,9 +375,11 @@ button {
 
   $_button_transition: all 200ms $ease-out-quad;
 
+  min-height: 24px;
+  min-width: 16px;
+  padding: 4px 8px;
   border: 1px solid;
   border-radius: 3px;
-  padding: 5px 8px 6px;
   transition: $_button_transition;
   @include button(normal);
   &.flat {
@@ -423,7 +427,10 @@ button {
   }
   // big standalone buttons like in Documents pager
   &.osd {
-    &.image-button { padding: 13px; }
+    &.image-button {
+      min-height: 48px;
+      min-width: 48px;
+    }
     color: $osd_fg_color;
     border-radius: 5px;
     outline-color: transparentize($osd_fg_color, 0.7);  //FIXME: define a color var?
@@ -535,8 +542,6 @@ button {
     }
   }
 
-  &.image-button { padding: 8px; }
-
   &.text-button {
     padding-left: 16px;
     padding-right: 16px;
@@ -547,7 +552,6 @@ button {
     // to have the image-button padding, while the text side the text-button
     // one, so we're adding the missing padding to the label depending on
     // its position inside the button
-    padding: 5px 8px 6px; // same as .button
     & label:first-child { padding-left: 8px; }
     & label:last-child { padding-right: 8px; }
   }
@@ -570,12 +574,15 @@ button {
       padding-bottom: 3px; //
     }
     &.text-button {
-      padding: 5px 10px 6px; // needed or it will get overridden
+      // compensate text-button paddings
+      padding-left: 10px;
+      padding-right: 10px;
     }
     &.image-button {
       // we want image buttons to have a 1:1 aspect ratio, so compensation
       // of the padding added to the GtkImage is needed
-      padding: 5px 2px;
+      padding-left: 2px;
+      padding-right: 2px;
     }
     &.needs-attention > label,
     &.needs-attention > image { @extend %needs_attention; }
@@ -942,9 +949,11 @@ spinbutton {
  * ComboBoxes *
  **************/
 combobox {
-  > button.combo { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
-                                                                           // are bigger then
-                                                                           // buttons
+  > button.combo {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
   @include _button_text_shadow;
 
   &:insensitive {
@@ -2435,12 +2444,12 @@ progressbar {
   // sizing
   &.horizontal {
     trough,
-    progress { min-height: 2px; } // FIXME: should be 4px, but looks like currently gtk+ consider borders
+    progress { min-height: 2px; }
   }
 
   &.vertical {
     trough,
-    progress { min-width: 2px; } // FIXME: should be 4px, but looks like currently gtk+ consider borders
+    progress { min-width: 2px; } 
   }
 
   &.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 0c196d9046..e3bc115fec 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -153,8 +153,10 @@ spinner {
  * Text Entries *
  ****************/
 entry, spinbutton {
+  min-height: 32px;
   border: 1px solid;
-  padding: 5px 8px 6px;
+  padding-left: 8px;
+  padding-right: 8px;
   border-radius: 3px;
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: #292929;
@@ -319,9 +321,11 @@ entry, spinbutton {
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } }
 button, headerbar button.titlebutton,
 .titlebar button.titlebutton {
+  min-height: 24px;
+  min-width: 16px;
+  padding: 4px 8px;
   border: 1px solid;
   border-radius: 3px;
-  padding: 5px 8px 6px;
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
@@ -462,7 +466,8 @@ button, headerbar button.titlebutton,
     box-shadow: none; }
     button.osd.image-button, headerbar button.osd.titlebutton,
     .titlebar button.osd.titlebutton {
-      padding: 13px; }
+      min-height: 48px;
+      min-width: 48px; }
     button.osd:hover {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
@@ -951,26 +956,19 @@ button, headerbar button.titlebutton,
         box-shadow: none;
         text-shadow: none;
         -gtk-icon-shadow: none; }
-  button.image-button, headerbar button.titlebutton,
-  .titlebar button.titlebutton {
-    padding: 8px; }
   button.text-button, GtkScaleButton.button.text-button,
   GtkVolumeButton.button.text-button, headerbar button.text-button.titlebutton,
   .titlebar button.text-button.titlebutton {
     padding-left: 16px;
     padding-right: 16px; }
-  button.text-button.image-button, GtkScaleButton.button.text-button,
-  GtkVolumeButton.button.text-button, headerbar button.text-button.titlebutton,
-  .titlebar button.text-button.titlebutton {
-    padding: 5px 8px 6px; }
-    button.text-button.image-button label:first-child, GtkScaleButton.button.text-button label:first-child,
-    GtkVolumeButton.button.text-button label:first-child, headerbar button.text-button.titlebutton label:first-child,
-    .titlebar button.text-button.titlebutton label:first-child {
-      padding-left: 8px; }
-    button.text-button.image-button label:last-child, GtkScaleButton.button.text-button label:last-child,
-    GtkVolumeButton.button.text-button label:last-child, headerbar button.text-button.titlebutton label:last-child,
-    .titlebar button.text-button.titlebutton label:last-child {
-      padding-right: 8px; }
+  button.text-button.image-button label:first-child, GtkScaleButton.button.text-button label:first-child,
+  GtkVolumeButton.button.text-button label:first-child, headerbar button.text-button.titlebutton label:first-child,
+  .titlebar button.text-button.titlebutton label:first-child {
+    padding-left: 8px; }
+  button.text-button.image-button label:last-child, GtkScaleButton.button.text-button label:last-child,
+  GtkVolumeButton.button.text-button label:last-child, headerbar button.text-button.titlebutton label:last-child,
+  .titlebar button.text-button.titlebutton label:last-child {
+    padding-right: 8px; }
   .stack-switcher > button, headerbar .stack-switcher > button.titlebutton,
   .titlebar .stack-switcher > button.titlebutton {
     outline-offset: -3px; }
@@ -990,10 +988,12 @@ button, headerbar button.titlebutton,
     .titlebar .stack-switcher > button.text-button.titlebutton,
     .titlebar .stack-switcher > GtkScaleButton.titlebutton.button.text-button,
     .titlebar .stack-switcher > GtkVolumeButton.titlebutton.button.text-button {
-      padding: 5px 10px 6px; }
+      padding-left: 10px;
+      padding-right: 10px; }
     .stack-switcher > button.image-button, headerbar .stack-switcher > button.titlebutton,
     .titlebar .stack-switcher > button.titlebutton {
-      padding: 5px 2px; }
+      padding-left: 2px;
+      padding-right: 2px; }
     .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image {
       animation: none;
       background-image: none; }
@@ -1515,8 +1515,8 @@ combobox {
   -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); }
   combobox > button.combo, headerbar combobox > button.combo.titlebutton,
   .titlebar combobox > button.combo.titlebutton {
-    padding-top: 3px;
-    padding-bottom: 4px; }
+    padding-left: 8px;
+    padding-right: 8px; }
   combobox:insensitive {
     color: #949796;
     text-shadow: none;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 0aac5d8af2..5f20ff66a2 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -153,8 +153,10 @@ spinner {
  * Text Entries *
  ****************/
 entry, spinbutton {
+  min-height: 32px;
   border: 1px solid;
-  padding: 5px 8px 6px;
+  padding-left: 8px;
+  padding-right: 8px;
   border-radius: 3px;
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: #ffffff;
@@ -319,9 +321,11 @@ entry, spinbutton {
     background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)); } }
 button, headerbar button.titlebutton,
 .titlebar button.titlebutton {
+  min-height: 24px;
+  min-width: 16px;
+  padding: 4px 8px;
   border: 1px solid;
   border-radius: 3px;
-  padding: 5px 8px 6px;
   transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
@@ -462,7 +466,8 @@ button, headerbar button.titlebutton,
     box-shadow: none; }
     button.osd.image-button, headerbar button.osd.titlebutton,
     .titlebar button.osd.titlebutton {
-      padding: 13px; }
+      min-height: 48px;
+      min-width: 48px; }
     button.osd:hover {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
@@ -951,26 +956,19 @@ button, headerbar button.titlebutton,
         box-shadow: none;
         text-shadow: none;
         -gtk-icon-shadow: none; }
-  button.image-button, headerbar button.titlebutton,
-  .titlebar button.titlebutton {
-    padding: 8px; }
   button.text-button, GtkScaleButton.button.text-button,
   GtkVolumeButton.button.text-button, headerbar button.text-button.titlebutton,
   .titlebar button.text-button.titlebutton {
     padding-left: 16px;
     padding-right: 16px; }
-  button.text-button.image-button, GtkScaleButton.button.text-button,
-  GtkVolumeButton.button.text-button, headerbar button.text-button.titlebutton,
-  .titlebar button.text-button.titlebutton {
-    padding: 5px 8px 6px; }
-    button.text-button.image-button label:first-child, GtkScaleButton.button.text-button label:first-child,
-    GtkVolumeButton.button.text-button label:first-child, headerbar button.text-button.titlebutton label:first-child,
-    .titlebar button.text-button.titlebutton label:first-child {
-      padding-left: 8px; }
-    button.text-button.image-button label:last-child, GtkScaleButton.button.text-button label:last-child,
-    GtkVolumeButton.button.text-button label:last-child, headerbar button.text-button.titlebutton label:last-child,
-    .titlebar button.text-button.titlebutton label:last-child {
-      padding-right: 8px; }
+  button.text-button.image-button label:first-child, GtkScaleButton.button.text-button label:first-child,
+  GtkVolumeButton.button.text-button label:first-child, headerbar button.text-button.titlebutton label:first-child,
+  .titlebar button.text-button.titlebutton label:first-child {
+    padding-left: 8px; }
+  button.text-button.image-button label:last-child, GtkScaleButton.button.text-button label:last-child,
+  GtkVolumeButton.button.text-button label:last-child, headerbar button.text-button.titlebutton label:last-child,
+  .titlebar button.text-button.titlebutton label:last-child {
+    padding-right: 8px; }
   .stack-switcher > button, headerbar .stack-switcher > button.titlebutton,
   .titlebar .stack-switcher > button.titlebutton {
     outline-offset: -3px; }
@@ -990,10 +988,12 @@ button, headerbar button.titlebutton,
     .titlebar .stack-switcher > button.text-button.titlebutton,
     .titlebar .stack-switcher > GtkScaleButton.titlebutton.button.text-button,
     .titlebar .stack-switcher > GtkVolumeButton.titlebutton.button.text-button {
-      padding: 5px 10px 6px; }
+      padding-left: 10px;
+      padding-right: 10px; }
     .stack-switcher > button.image-button, headerbar .stack-switcher > button.titlebutton,
     .titlebar .stack-switcher > button.titlebutton {
-      padding: 5px 2px; }
+      padding-left: 2px;
+      padding-right: 2px; }
     .stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image {
       animation: none;
       background-image: none; }
@@ -1515,8 +1515,8 @@ combobox {
   -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
   combobox > button.combo, headerbar combobox > button.combo.titlebutton,
   .titlebar combobox > button.combo.titlebutton {
-    padding-top: 3px;
-    padding-bottom: 4px; }
+    padding-left: 8px;
+    padding-right: 8px; }
   combobox:insensitive {
     color: #8b8e8f;
     text-shadow: none;