Spin button styling
parent
4680d4f189
commit
fbca03b4a1
|
@ -172,5 +172,87 @@
|
||||||
@include button($bg_color, $fg_color);
|
@include button($bg_color, $fg_color);
|
||||||
|
|
||||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||||
|
|
||||||
|
.spinbutton & {
|
||||||
|
color: mix($text_color, $base_color, 0.4);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
box-shadow: inset 1px 0 shade($base_color, 0.9);
|
||||||
|
|
||||||
|
&:insensitive {
|
||||||
|
color: mix($text_color, $base_color, 0.7);
|
||||||
|
box-shadow: inset 1px 0 shade($base_color, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &:checked, &:hover { color: $text_color; }
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: $roundness 0 0 $roundness;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child { border-radius: 0 $roundness $roundness 0; }
|
||||||
|
|
||||||
|
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, 0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinbutton.vertical & {
|
||||||
|
border: 1px solid shade($bg_color, 0.8);
|
||||||
|
border-radius: $roundness;
|
||||||
|
background-color: shade($bg_color, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
color: $fg_color;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: shade($bg_color, 0.7);
|
||||||
|
background-color: shade($bg_color, 1.10);
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &:checked {
|
||||||
|
border-color: shade($bg_color, 0.8);
|
||||||
|
background-color: shade($bg_color, 0.95);
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:hover, &:checked:hover {
|
||||||
|
border-color: shade($bg_color, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, 0.7); }
|
||||||
|
|
||||||
|
&:insensitive {
|
||||||
|
border-color: shade($bg_color, 0.85);
|
||||||
|
background-color: shade($bg_color, 0.9);
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-width: 1px;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-radius: $roundness;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-width: 1px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-radius: $roundness;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinbutton.vertical.entry {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,114 +18,6 @@
|
||||||
@import "window";
|
@import "window";
|
||||||
|
|
||||||
|
|
||||||
/**************
|
|
||||||
* spinbutton *
|
|
||||||
**************/
|
|
||||||
.spinbutton .button {
|
|
||||||
color: mix($text_color, $base_color, 0.4);
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-width: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
border-style: none;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
box-shadow: inset 1px 0 shade($base_color, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton .button:insensitive {
|
|
||||||
color: mix($text_color, $base_color, 0.7);
|
|
||||||
box-shadow: inset 1px 0 shade($bg_color, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton .button:active,
|
|
||||||
.spinbutton .button:hover {
|
|
||||||
color: $fg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton .button:first-child {
|
|
||||||
border-radius: 2px 0 0 2px;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton .button:last-child {
|
|
||||||
border-radius: 0 2px 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton .button:dir(rtl) {
|
|
||||||
box-shadow: inset -1px 0 shade($base_color, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: shade($bg_color, 0.8);
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
color: $fg_color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:hover {
|
|
||||||
border-color: shade($bg_color, 0.7);
|
|
||||||
background-color: shade($bg_color, 1.10);
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:active {
|
|
||||||
border-color: shade($bg_color, 0.8);
|
|
||||||
background-color: shade($bg_color, 0.95);
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:active:hover {
|
|
||||||
border-color: shade($bg_color, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:focus,
|
|
||||||
.spinbutton.vertical .button:hover:focus,
|
|
||||||
.spinbutton.vertical .button:active:focus,
|
|
||||||
.spinbutton.vertical .button:active:hover:focus {
|
|
||||||
border-color: shade($bg_color, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:insensitive {
|
|
||||||
border-color: shade($bg_color, 0.85);
|
|
||||||
background-color: shade($bg_color, 0.9);
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:first-child {
|
|
||||||
border-width: 1px;
|
|
||||||
border-bottom-width: 0;
|
|
||||||
border-radius: 2px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical .button:last-child {
|
|
||||||
border-width: 1px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-radius: 2px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinbutton.vertical.entry {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*************
|
|
||||||
* statusbar *
|
|
||||||
*************/
|
|
||||||
GtkStatusbar {
|
|
||||||
padding: 4px;
|
|
||||||
color: $fg_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*****************
|
/*****************
|
||||||
* color chooser *
|
* color chooser *
|
||||||
*****************/
|
*****************/
|
||||||
|
|
Loading…
Reference in New Issue