akurath/client/resources/stylesheets/ui/statusbar.less

IDE Frontend for codepsaces.io

.cb-statusbar {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: @codeboxStatusbarHeight;
    border-top: 1px solid #ccc;
    z-index: 1000;

    .cb-commands-menubar {
        margin: 0px;
        padding: 0px;
        list-style: none;
        font-size: 13px;

        & > .menu-item {
            color: inherit;
            margin: 0px 4px;
            cursor: default;
            position: relative;
            height: @codeboxStatusbarHeight - 1;
            color: inherit;
            float: right;
            display: inline-block;

            .menu-label {
                margin-left: 4px;
            }

            /* Simple label */
            &.menu-item-label {
                float: left;
                padding: 3px 3px;
            }

            /* Menu */
            &.menu-item-menu {
                .ui-menu {
                    bottom: 100%;
                    top: auto;
                    left: auto;
                    right: 0px;
                    max-height: 500px;
                    overflow: auto;
                }

                &:not(.disabled):hover {
                    .ui-menu {
                        display: block;
                    }
                }
            }

            /* Action/Menu */
            & > a {
                border-radius: 0px;
                background: transparent;
                padding: 1px 8px;
                cursor: default;
                color: inherit;
                -webkit-font-smoothing: antialiased;
                border: 1px solid transparent;
                border-top: 0px;
                border-bottom: 0px;
                display: inline-block;

                &:hover, &:focus {
                    text-decoration: none;
                }
            }

            &:hover {
                & > a {
                    background: rgba(0,0,0,0.10);
                    text-decoration: none;
                }
            }

            &.disabled {
                opacity: 0.4;
            }
        }
    }
}