diff options
Diffstat (limited to 'Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss')
| -rw-r--r-- | Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss new file mode 100644 index 0000000..ab068f6 --- /dev/null +++ b/Redcore-daylight/gtk-3.20/scss/widgets/_sidebar.scss @@ -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))); + } + } +} |