[gtk+] Adwaita: use min-height/width for entry and button sizing
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: use min-height/width for entry and button sizing
- Date: Wed, 23 Dec 2015 19:36:24 +0000 (UTC)
commit 157276b4554caa834ae154f0fcf6f2983a746535
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Wed Dec 23 20:35:06 2015 +0100
Adwaita: use min-height/width for entry and button sizing
gtk/theme/Adwaita/_common.scss | 35 +++++++++++++++---------
gtk/theme/Adwaita/gtk-contained-dark.css | 44 +++++++++++++++---------------
gtk/theme/Adwaita/gtk-contained.css | 44 +++++++++++++++---------------
3 files changed, 66 insertions(+), 57 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index df4a05e..0b2ce71 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 0c196d9..e3bc115 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 0aac5d8..5f20ff6 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;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]