numix-gtk-theme/gtk-3.20/scss/widgets/_view.scss

/***************
 ! Generic views
****************/

@include exports("view") {
    .view,
    %view {
        color: $text_color;
        background-color: $base_color;

        &:backdrop {
            color: $backdrop_text_color;
            background-color: $backdrop_base_color;
        }

        &:selected {
            &:focus, & {
                @extend %selected_items;

                border-radius: 3px;
            }
        }
    }

    .view,
    textview {
        text {
            @extend %view;

            selection { &:focus, & { @extend %selected_items; }}
        }
    }

    iconview { @extend .view; }

}



/************
! Treeview
*************/

@include exports("treeview") {
    .rubberband,
    rubberband {
        border: 1px solid darken($selected_bg_color, 10%);
        background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
    }

    treeview entry {
        &.flat, & {
            border-radius: 0;
            background-image: none;
            background-color: $base_color;

            &:focus { border-color: $selected_bg_color; }
        }
    }

    %column_header_button {
        padding: 0 6px;
        border-radius: 0;
        background-image: none;
        text-shadow: none;
        border-style: none solid solid none;
        border-color: $bg_color;

        &:disabled {
            border-color: $bg_color;
            background-image: none;
        }

        &:backdrop {
            border-color: $backdrop_bg_color;
            border-style: none solid solid none;
            color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
            background-image: none;
            background-color: $backdrop_base_color;

            &:disabled {
                border-color: $backdrop_bg_color;
                background-image: none;
            }
        }
    }

    treeview.view {
        -GtkTreeView-grid-line-width: 1;
        -GtkTreeView-grid-line-pattern: '';
        -GtkTreeView-tree-line-width: 1;
        -GtkTreeView-tree-line-pattern: '';

        border-left-color: mix($dark_bg_color, $base_color, .2); // this is actually the tree lines color,
        border-top-color: mix($dark_bg_color, $base_color, .2);  // while this is the grid lines color, better then nothing

        rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props

        &:selected {
            &:focus, & {
                @extend %selected_items;
                border-radius: 0;
            }

            &:backdrop, & {
                border-left-color: mix($selected_fg_color, $selected_bg_color, .5);
                border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
            }
        }

        &:disabled {
            color: $insensitive_fg_color;

            &:selected {
                color: mix($selected_fg_color, $selected_bg_color, .4);
                &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); }
            }

            &:backdrop { color: $backdrop_insensitive_color; }
        }

        &.separator {
            min-height: 2px;
            color: $bg_color;

            &:backdrop { color: transparentize($bg_color, 0.9); }
        }

        &:backdrop {
            border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
            border-top: $backdrop_bg_color;
        }

        &:drop(active) {
            border-style: solid none;
            border-width: 1px;
            border-color: $selected_borders_color;

            &.after { border-top-style: none; }

            &.before { border-bottom-style: none; }
        }

        &.expander {
            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
            color: mix($fg_color, $base_color, .7);

            &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }


            &:hover { color: $fg_color; }

            &:selected {
                color: mix($selected_fg_color, $selected_bg_color, .7);

                &:hover { color: $selected_fg_color; }

                &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .7); }
            }

            &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }

            &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, .7); }
        }

        &.progressbar { // progress bar in treeviews
            @if $variant == light { color: $base_color; }

            border: 1px solid $selected_borders_color;
            border-radius: 4px;
            background-color: $selected_bg_color;
            background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%));
            box-shadow: inset 0 1px if($variant == 'light', transparentize(white,0.7), transparentize(white,0.85)),
            0 1px if($variant == 'light', transparentize(black, 0.8), transparentize(black,0.9));

            &:selected {
                &:focus, & {
                    border-radius: 4px;

                    @if $variant == 'light' {
                        color: $selected_bg_color;
                        box-shadow: none;
                    } @else { box-shadow: inset 0 1px transparentize(white, 0.95); }

                    background-image: linear-gradient(to bottom,
                        $base_color,
                        darken($base_color,10%));

                    &:backdrop {
                        @if $variant == 'light' {
                            color: $selected_bg_color;
                            border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
                        } @else { border-color: $backdrop_base_color; }

                        background-color: $backdrop_base_color;
                    }
                }
            }

            &:backdrop {
                @if $variant == 'light' { color: $backdrop_base_color;
                } @else { border-color: $backdrop_base_color; }

                background-image: none;
                box-shadow: none;
            }
        }

        &.trough { // progress bar trough in treeviews
            background-color: transparentize($fg_color,0.9);
            border-radius: 4px;

            &:selected {
                &:focus, & {
                    background-color: if($variant == 'light',
                        transparentize($selected_fg_color, 0.7),
                        darken($selected_bg_color, 10%));
                    border-radius: 4px;

                    @if $variant == 'light' {
                        border-width: 1px 0;
                        border-style: solid;
                        border-color: $selected_bg_color;
                    }
                }
            }
        }

        header {
            button {
                $_column_header_color: mix($fg_color, $base_color, .5);

                @extend %column_header_button;

                color: $_column_header_color;
                background-color: $base_color;
                font-weight: bold;
                text-shadow: none;
                box-shadow: none;

                &:hover {
                    @extend %column_header_button;

                    color: mix($_column_header_color, $fg_color, .5);
                    box-shadow: none;
                    transition: none; //I shouldn't need this
                }

                &:active {
                    @extend %column_header_button;

                    color: $fg_color;
                    transition: none; //I shouldn't need this
                }
            }

            button:last-child { &:backdrop, & { border-right-style: none; }}
        }

        button.dnd,
        header.button.dnd { // for treeview-like derive widgets
            &:active, &:selected, &:hover, & {
                padding: 0 6px;
                transition: none;
                background-image: none;
                background-color: $selected_bg_color;
                color: $base_color;
                border-radius: 0;
                border-style: none;
                box-shadow: inset 0 0 0 1px $base_color;
                text-shadow: none;
            }
        }
    }
}


/***********
 ! Separator
************/

@include exports("separator") {
    view separator, separator {
        color: shade($bg_color, ($contrast + .1));
        border: 1px solid currentColor;
    }
}


/*********************
 ! Column view headers
**********************/

@include exports("columnheader") {
    column-header {
        .button {
            &, &:active {
                border-width: 0 1px 1px 0;
                border-radius: 0;
            }

            &, &:active, &:focus, &:active:focus {
                border-color: shade($base_color, .9);
                border-bottom-color: shade($base_color, .8);
                background-color: shade($base_color, .97);
                background-image: none;
            }

            &:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
                border-color: shade($base_color, .9);
                border-bottom-color: shade($base_color, .8);
                background-color: shade($base_color, .99);
                background-image: none;
            }

            &:last-child .button { border-width: 0 0 1px; }
        }
    }
}


/**********
 ! Frames *
***********/

@include exports("frame") {
    .frame {
        border: 1px solid border_normal($bg_color);

        &.flat { border: 0; }
    }

    /* avoid double borders when a viewport is packed into a GtkScrolledWindow */
    scrolledwindow viewport.frame { border: 0; }
}