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

@import "entry";


/*********
 ! Menubar
**********/

@include exports("menubar") {
    menubar, .menubar {
        -GtkWidget-window-dragging: true;

        padding: 0;
        border: 0;
        background-color: $menubar_bg_color;
        background-image: none;
        //box-shadow: inset 0 -1px shade($menubar_bg_color, .9);
        color: $menubar_fg_color;

        > menuitem {
            min-height: 16px;
            padding: $spacing ($spacing * 2);
            border: 1px solid transparent;
            background-color: transparent;
            background-image: none;
            color: $menubar_fg_color;

            &:hover {
                border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
                background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
                background-image: none;
                color: shade($menubar_fg_color, 1.08);
            }

            *:hover { color: shade($menubar_fg_color, 1.08); }
        }
    }
}


/******
 ! Menu
*******/

@include exports("menu") {
    menu, .menu {
        padding: $spacing;
        border-radius: 0;
        border: 0;
        background-color: $menu_bg_color;
        color: $menu_fg_color;

        .csd & { border: 0; }  // axes borders in a composited env

        &:selected { background-color: $selected_bg_color; }

        // A little hack to get some extra space above/below menuitem separators
        separator {
            border-style: none;
            background-color: transparent;
            min-height: 5px;
            border-bottom-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: shade($menu_bg_color, ($contrast + .1));
            padding: 0;
        }

        menuitem {
            min-height: 16px;
            min-width: 40px;
            padding: $spacing;
            border-radius: 0;

            &:active, &:hover {
                border: 0;
                background-color: $selected_bg_color;
                background-image: none;
                color: $selected_fg_color;
            }

            *:active, *:hover { color: $selected_fg_color; }

            &:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }

            // submenu indicators
            arrow {
                min-height: 16px;
                min-width: 16px;

                &:dir(ltr) {
                    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
                    margin-left: 10px;
                }

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

            &.button, &.button.flat {
                &, &:focus, &:active, &:disabled, &:active:disabled {
                    background-color: transparent;
                    background-image: none;
                    border: 0;
                    box-shadow: none;
                    color: currentColor;
                }

                &:hover, &:focus:hover, &:active:hover, &:selected {
                    background-image: none;
                    background-color: $selected_bg_color;
                    color: $selected_fg_color;
                }
            }

            calendar {
                &:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); }

                .button {
                    border-style: none;
                    background-color: transparent;
                    background-image: none;
                }
            }
        }

        // overflow arrows
        > arrow {
            //@include button(undecorated);

            min-height: 16px;
            min-width: 16px;
            padding: $spacing;
            background-color: $menu_bg_color;
            border-radius: 0;

            &.top {
                margin-top: -6px;
                border-bottom: 1px solid mix($fg_color, $base_color, .1);
                -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
            }

            &.bottom {
                margin-bottom: -6px;
                border-top: 1px solid mix($fg_color, $base_color, .1);
                -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
            }

            &:hover { background-color: mix($fg_color, $base_color, .1); }

            &:backdrop { background-color: $backdrop_menu_color; }

            &:disabled {
                color: transparent;
                background-color: transparent;
                border-color: transparent;
            }
        }
    }

    .context-menu { font: initial; }

    menuitem {
        accelerator {
            color: alpha($menu_fg_color, .6);

            &:hover { color: alpha($selected_fg_color, .8); }

            &:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
        }

        check, radio {
            min-height: 16px;
            min-width: 16px;

            &:dir(ltr) { margin-right: 7px; }
            &:dir(rtl) { margin-left: 7px; }
        }

        window decoration {
            box-shadow: 0 2px 3px alpha($black, .2);
        }

        entry { @include entry($menu_bg_color, $menu_fg_color); }
    }
}


/*********
 ! Popover
**********/

@include exports("popover") {
    popover.background {
        margin: 10px;
        padding: $spacing;
        border-radius: $roundness;
        background-clip: border-box;
        background-color: $menu_bg_color;
        background-image: none;
        color: $menu_fg_color;
        box-shadow: 0 3px 6px alpha($black, .16);

        .csd &, & {
            @include border($menu_bg_color);
            border-width: 1px;
            border-style: solid;
        }

        &:backdrop { box-shadow: none; }

        .osd & {
            box-shadow: 0 2px 7px 3px alpha($black, .5);

            > toolbar button {
                border-radius: 0;
                border-width: 0;
                background-color: transparent;
                background-image: none;
            }
        }

        treeview.view {
            &:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; }

            &, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); }
        }

        view, .view, list {
            &:hover {
                background-image: none;
                background-color: $selected_bg_color;
                color: $selected_fg_color;
            }

            &, &:backdrop {
                background-color: shade($menu_bg_color, ($contrast + .5));
                background-image: none;
                color: $menu_fg_color;
                border-color: border_normal($menu_bg_color);
            }
        }

        list row {
            &, & .button {
                background-color: transparent;
                background-image: none;
                color: $menu_fg_color;

                &:focus, &:hover, &:active {
                    background-image: none;
                    background-color: $selected_bg_color;
                    color: $selected_fg_color;
                }
            }
        }

        .frame {
            border-color: border_normal($menu_bg_color);
            border-radius: $roundness;
        }

        entry { @include entry($menu_bg_color, $menu_fg_color);  }

        button { @include button($menu_bg_color, $menu_fg_color);  }

        > list, > .view, > toolbar {
            border-style: none;
            background-color: transparent;
        }
    }

    modelbutton {
        padding: $spacing ($spacing + 2px);
        border: none;
        transition: 150ms ease;
        outline-color: transparent;

        &, &:backdrop, &.flat, &.flat:backdrop {
            //@extend %undecorated_button;

            &:hover { background-color: $selected_bg_color; color: $selected_fg_color }
            &:active, &:selected { &, arrow { @extend %selected_items; } }
            &:checked { color: $fg_color; }

            // FIXME: temporary workaround
            check:last-child,
            radio:last-child { margin-left: 8px; }

            check:first-child,
            radio:first-child { margin-right: 8px; }

            &.flat arrow {
                &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
                &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
            }
        }

        &.flat {
            &, &:hover {
                transition: none;
            }
        }
    }
}