AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lapo Calamandrei 2015-12-23 20:35:06 +01:00
parent 08f928a4ea
commit 157276b455
3 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
gtk/theme/Adwaita/_common.scss
View File

@ -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

44
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -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;

44
gtk/theme/Adwaita/gtk-contained.css
View File

@ -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;