Moved between oomox themes
This one's based on Numix, which should look a lot better.
This commit is contained in:
226
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_sidebar.scss
Normal file
226
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_sidebar.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
/*********
|
||||
! Sidebar
|
||||
**********/
|
||||
|
||||
@include exports("sidebar") {
|
||||
.sidebar {
|
||||
border-style: none;
|
||||
background-color: mix($bg_color, $base_color, .5);
|
||||
|
||||
@at-root %sidebar_left,
|
||||
&:dir(ltr),
|
||||
&.left,
|
||||
&.left:dir(rtl) {
|
||||
border-right: 1px solid $borders_color;
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
@at-root %sidebar_right
|
||||
&:dir(rtl),
|
||||
&.right {
|
||||
border-left: 1px solid $borders_color;
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_sidebar_bg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
.frame, frame { border-width: 0; }
|
||||
|
||||
list { background-color: transparent; }
|
||||
|
||||
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } }
|
||||
}
|
||||
|
||||
stacksidebar {
|
||||
&.sidebar {
|
||||
&:dir(ltr),
|
||||
&.left,
|
||||
&.left:dir(rtl) {
|
||||
list { @extend %sidebar_left; }
|
||||
}
|
||||
|
||||
&:dir(rtl),
|
||||
&.right {
|
||||
list { @extend %sidebar_right; }
|
||||
}
|
||||
}
|
||||
|
||||
row {
|
||||
padding: $spacing * 2 $spacing;
|
||||
|
||||
> label {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&.needs-attention > label {
|
||||
@extend %needs_attention;
|
||||
|
||||
background-size: 6px 6px, 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$_placesidebar_icons_opacity: .7;
|
||||
|
||||
placessidebar {
|
||||
> viewport.frame { border-style: none; }
|
||||
|
||||
row {
|
||||
// Needs overriding of the GtkListBoxRow padding
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
|
||||
// Using margins/padding directly in the SidebarRow
|
||||
// will make the animation of the new bookmark row jump
|
||||
> revealer { padding: 0 $spacing * 2; }
|
||||
|
||||
&:selected { color: $selected_fg_color; }
|
||||
|
||||
&:disabled { color: $insensitive_fg_color; }
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_fg_color;
|
||||
|
||||
&:selected { color: $backdrop_selected_fg_color; }
|
||||
|
||||
&:disabled { color: $backdrop_insensitive_color; }
|
||||
}
|
||||
|
||||
image.sidebar-icon {
|
||||
opacity: $_placesidebar_icons_opacity; // dim the device icons
|
||||
|
||||
&:dir(ltr) {
|
||||
padding-right: $spacing*2 + 2;
|
||||
padding-left: $spacing;
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
padding-left: $spacing*2 + 2;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
label.sidebar-label {
|
||||
&:dir(ltr) { padding-right: 2px; }
|
||||
|
||||
&:dir(rtl) { padding-left: 2px; }
|
||||
}
|
||||
|
||||
@at-root button.sidebar-button {
|
||||
//@extend %button_basic.flat;
|
||||
|
||||
//@extend %button_selected.flat;
|
||||
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
-gtk-outline-radius: 100%;
|
||||
|
||||
&:not(:hover):not(:active),
|
||||
&:backdrop {
|
||||
> image { opacity: $_placesidebar_icons_opacity; }
|
||||
}
|
||||
}
|
||||
|
||||
// in the sidebar case it makes no sense to click the selected row
|
||||
&:selected:active { box-shadow: none; }
|
||||
|
||||
&.sidebar-placeholder-row {
|
||||
padding: 0 8px;
|
||||
min-height: 2px;
|
||||
background-image: image($drop_target_color);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
||||
|
||||
&:drop(active):not(:disabled) {
|
||||
color: $drop_target_color;
|
||||
box-shadow: inset 0 1px $drop_target_color,
|
||||
inset 0 -1px $drop_target_color;
|
||||
|
||||
&:selected {
|
||||
color: $selected_fg_color;
|
||||
background-color: $drop_target_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Paned
|
||||
*******/
|
||||
|
||||
@include exports("paned") {
|
||||
paned {
|
||||
> separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
-gtk-icon-source: none; // defeats the ugly default handle decoration
|
||||
border-style: none; // just to be sure
|
||||
background-color: transparent;
|
||||
// workaround, using background istead of a border since the border will get rendered twice (?)
|
||||
background-image: image(shade($bg_color, .9));
|
||||
background-size: 1px 1px;
|
||||
background-position: center center;
|
||||
|
||||
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
|
||||
|
||||
&:backdrop { background-image: image($backdrop_borders_color); }
|
||||
|
||||
&.wide {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: $bg_color;
|
||||
background-image: image(border_normal($bg_color)), image(border_normal($bg_color));
|
||||
background-size: 1px 1px, 1px 1px;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_bg_color;
|
||||
background-image: image($backdrop_borders_color),
|
||||
image($backdrop_borders_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal > separator {
|
||||
background-repeat: repeat-y;
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-repeat: repeat-y, repeat-y;
|
||||
background-position: left, right;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > separator {
|
||||
background-repeat: repeat-x;
|
||||
padding: 2px 0;
|
||||
margin: -2px 0;
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-repeat: repeat-x, repeat-x;
|
||||
background-position: bottom, top;
|
||||
}
|
||||
}
|
||||
|
||||
&.titlebar > separator {
|
||||
background-image: image(shade($titlebar_bg_color, ($contrast + .1)));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user