* Optimised big button. Fixed #452

pull/539/head
Megax 2016-08-29 09:24:36 +02:00
parent c961b4d204
commit 93602e545a
7 changed files with 61 additions and 21 deletions

View File

@ -43,7 +43,9 @@
} }
%button { %button {
padding: $spacing ($spacing + 2px); min-height: 22px;
min-width: 20px;
padding: ($spacing - 3px) ($spacing + 1px);
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: $roundness; border-radius: $roundness;
@ -341,6 +343,27 @@
} }
} }
&.image-button {
min-width: 24px;
padding-left: $spacing;
padding-right: $spacing;
}
&.text-button {
padding-left: $spacing * 2;
padding-right: $spacing * 2;
}
&.text-button.image-button {
padding-left: $spacing;
padding-right: $spacing;
label {
padding-left: $spacing;
padding-right: $spacing;
}
}
&.separator, .separator { &.separator, .separator {
border: 1px solid currentColor; border: 1px solid currentColor;
color: shade($bg, ($contrast + .1)); color: shade($bg, ($contrast + .1));
@ -351,6 +374,8 @@
@include exports("button") { @include exports("button") {
%close_button { %close_button {
min-height: 22px;
min-width: 16px;
border: 1px solid transparent; border: 1px solid transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
@ -372,8 +397,6 @@
} }
button { button {
min-height: 22px;
min-width: 24px;
@include button(shade($bg_color, 1.2), $fg_color); @include button(shade($bg_color, 1.2), $fg_color);
.inline-toolbar &, .inline-toolbar &,
@ -381,7 +404,21 @@
.linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); } .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }
&.circular { // FIXME: aggregate to buttons &.osd {
@include button($osd_bg, $osd_fg);
&.image-button {
padding: 0;
min-height: 36px;
min-width: 36px;
}
}
&.circular,
&.circular-button { // FIXME: aggregate to buttons
padding: 0;
min-width: 26px;
min-height: 26px;
border-radius: 9999px; // Fixed: https://github.com/GNOME/gtk/commit/a6409458f0d50d673a4dc370b9251993b7835b6b border-radius: 9999px; // Fixed: https://github.com/GNOME/gtk/commit/a6409458f0d50d673a4dc370b9251993b7835b6b
-gtk-outline-radius: 9999px; -gtk-outline-radius: 9999px;
@ -453,6 +490,12 @@
} }
&.vertical { &.vertical {
button, entry {
min-width: 0;
padding-left: $spacing - 1px;
padding-right: $spacing - 1px;
}
entry { entry {
// reset all the other props since the spinbutton node is styled here // reset all the other props since the spinbutton node is styled here
border-radius: 0; border-radius: 0;
@ -494,7 +537,7 @@
box button, box entry { box button, box entry {
@extend %linked_button; @extend %linked_button;
padding: ($spacing - 2px) ($spacing + 1px); padding: ($spacing - 3px) ($spacing + 1px);
} }
.linked:not(.vertical) > & > box > button.combo { .linked:not(.vertical) > & > box > button.combo {

View File

@ -140,7 +140,7 @@
} }
button.color { button.color {
padding: $spacing; padding: $spacing - 1px;
colorswatch:only-child { colorswatch:only-child {
&, overlay { border-radius: 0; } &, overlay { border-radius: 0; }

View File

@ -87,6 +87,7 @@
} }
%entry { %entry {
min-height: 22px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: $roundness; border-radius: $roundness;
@ -123,7 +124,7 @@
@include linear-gradient($bg, to top); @include linear-gradient($bg, to top);
@include border($bg); @include border($bg);
padding: $spacing; padding: ($spacing - 3px) ($spacing + 3px);
color: $fg; color: $fg;
caret-color: $fg; caret-color: $fg;

View File

@ -287,7 +287,9 @@
} }
modelbutton { modelbutton {
padding: $spacing ($spacing + 2px); min-height: 24px;
padding-left: ($spacing + 3px);
padding-right: ($spacing + 3px);
border: none; border: none;
transition: 150ms ease; transition: 150ms ease;
outline-color: transparent; outline-color: transparent;

View File

@ -278,13 +278,9 @@
@include exports("stackswitcher") { @include exports("stackswitcher") {
stackswitcher button { stackswitcher button {
&.text-button { min-width: 90px; } // FIXME aggregate with buttons &.text-button { min-width: 80px; } // FIXME aggregate with buttons
&.circular { // FIXME aggregate with buttons &.circular { min-width: 0; } // FIXME aggregate with buttons
min-width: 32px;
min-height: 32px;
padding: 0;
}
} }
} }

View File

@ -153,10 +153,7 @@
outline: none; outline: none;
button, button:hover { button, button:hover {
padding: $spacing - 4;
margin-left: 15px; margin-left: 15px;
min-height: 18px;
min-width: 18px;
opacity: 0; opacity: 0;
transition: opacity .3s ease-in; transition: opacity .3s ease-in;
} }
@ -198,8 +195,12 @@
} }
/* close button styling */ /* close button styling */
button { button.flat {
@extend %close_button; @extend %close_button;
min-height: 16px;
min-width: 16px;
padding: 0;
} }
} }

View File

@ -19,9 +19,6 @@
background-origin: border-box; background-origin: border-box;
} }
button { @include button($osd_bg, $osd_fg); }
toolbar { toolbar {
-GtkToolbar-button-relief: normal; -GtkToolbar-button-relief: normal;