* Optimised big button. Fixed #452
parent
c961b4d204
commit
93602e545a
|
@ -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 {
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue