mirror of
https://github.com/luneko/SweetTokyoNight.git
synced 2025-12-13 15:29:53 +01:00
Initial commit
This commit is contained in:
EliverLara
192
gtk-3.0/widgets/_spinbuttons.scss
Normal file
192
gtk-3.0/widgets/_spinbuttons.scss
Normal file
@@ -0,0 +1,192 @@
|
||||
/*****************
|
||||
* GtkSpinButton *
|
||||
*****************/
|
||||
spinbutton {
|
||||
&:not(.vertical) {
|
||||
// in this horizontal configuration, the whole spinbutton
|
||||
// behaves as the entry, so we extend the entry styling
|
||||
// and nuke the style on the internal entry
|
||||
@extend %entry;
|
||||
|
||||
padding: 0;
|
||||
|
||||
entry {
|
||||
min-width: 28px;
|
||||
// reset all the other props since the spinbutton node is styled here
|
||||
margin: 0;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 16px;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
color: mix($fg_color, $base_color, 90%);
|
||||
background-image: none;
|
||||
border-style: none none none solid;
|
||||
border-color: transparentize($borders_color, 0.7);
|
||||
border-radius: 0;
|
||||
box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
|
||||
&:hover {
|
||||
color: $fg_color;
|
||||
background-color: $base_hover_color;
|
||||
}
|
||||
|
||||
&:disabled { color: transparentize($insensitive_fg_color, 0.7); }
|
||||
|
||||
&:active {
|
||||
background-color: transparentize(black, 0.9);
|
||||
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
|
||||
background-color: transparent;
|
||||
border-color: transparentize($backdrop_borders_color, 0.7);
|
||||
transition: $backdrop_transition;
|
||||
}
|
||||
|
||||
&:backdrop:disabled {
|
||||
color: transparentize($backdrop_insensitive_color,0.7);
|
||||
background-image: none;
|
||||
border-style: none none none solid; // It is needed or it gets overridden
|
||||
box-shadow: inset 1px 0px 0px 0px rgba(0,0,0,0.07);
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// OSD horizontal
|
||||
.osd &:not(.vertical) {
|
||||
button {
|
||||
@include button(undecorated);
|
||||
|
||||
color: $osd_fg_color;
|
||||
border-style: none none none solid;
|
||||
border-color: transparentize($osd_borders_color, 0.3);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
|
||||
&:hover {
|
||||
@include button(undecorated);
|
||||
|
||||
color: $osd_fg_color;
|
||||
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
background-color: transparentize($osd_fg_color, 0.9);
|
||||
-gtk-icon-shadow: 0 1px black;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
@include button(undecorated);
|
||||
|
||||
color: $osd_fg_color;
|
||||
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include button(undecorated);
|
||||
|
||||
color: $osd_insensitive_fg_color;
|
||||
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
-gtk-icon-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child { border-radius: 0 3px 3px 0; }
|
||||
|
||||
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical
|
||||
&.vertical {
|
||||
// in the vertical configuration, we treat the spinbutton
|
||||
// as a box, and tweak the style of the entry in the middle
|
||||
// so that it's linked
|
||||
|
||||
// FIXME: this should not be set at all, but otherwise it gets the wrong
|
||||
// color
|
||||
&:disabled { color: $insensitive_fg_color; }
|
||||
&:backdrop:disabled { color: $backdrop_insensitive_color; }
|
||||
|
||||
&:drop(active) {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
entry {
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-color: $borders_color;
|
||||
box-shadow: 0 1px $top_highlight;
|
||||
|
||||
&.up { @extend %top_button; }
|
||||
|
||||
&.down { @extend %bottom_button; }
|
||||
}
|
||||
|
||||
%top_button {
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-style: solid solid none solid;
|
||||
}
|
||||
|
||||
%bottom_button {
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-style: none solid solid solid;
|
||||
}
|
||||
}
|
||||
|
||||
// OSD vertical
|
||||
.osd &.vertical button:first-child {
|
||||
@include button(osd);
|
||||
|
||||
&:hover { @include button(osd-hover);}
|
||||
|
||||
&:active { @include button(osd-active); }
|
||||
|
||||
&:disabled { @include button(osd-insensitive); }
|
||||
|
||||
&:backdrop { @include button(osd-backdrop); }
|
||||
}
|
||||
|
||||
// Misc
|
||||
treeview &:not(.vertical) {
|
||||
min-height: 0;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
|
||||
entry {
|
||||
min-height: 0;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user