Style (pane) separators and sidebars

[wpkelso]

[danirabbit]

This seems like it should be in stacksidebar.sidebar since otherwise this would effect Granite.ListItem styles in a sidebar using those widgets

[danirabbit]

There's probably a better way to abstract these styles, but what do you think about how this looks?

stacksidebar.sidebar {
    background: none;
    box-shadow: none;

    .navigation-sidebar {
        margin: $button-spacing;

        row {
            @extend .model;

            border-spacing: $button-spacing;
            min-width: rem(150px);

            &:active {
                // There's an optical illusion because items are wider than
                // they are tall, so compensate by scaling y a little extra
                transform: scale(0.98, 0.96);
            }

            &:selected {
                @extend selection;
            }
        }
    }
}

[wpkelso]

I like it—the bounce is very satisfying. selected looks pretty awful in dark mode for text, though:

I think in this case, we probably want to use the standard $fg-color for selected instead of the shaded accent colour.

[danirabbit]

Ah yeah I'll propose a branch to fix the selected styles. I forgot to add the dark one

[wpkelso]

I've initially taken a flatter approach to this, but could re-add the shadow we had in the old stylesheet to the separators; I have no preference between the two approaches.

[danirabbit]

Let's go 🚀