silverstripe-betternavigator/scss/betternavigator.scss

/**
 * Better navigator styles
 */

@import "_iconsprite";

// Variables

$black: #000;
$white: #fff;

$textColor: $white;
$contentColor: #595d61;
$contentBackground: #cfd8de;
$buttonColor: #313639;
$buttonColorDisabled: #51565a;
$buttonBackground: #eceff2;
$buttonBackgroundDisabled: #c6d3da;
$buttonBorder: #a3aaaf;
$liveColor: #06ad18;
$liveBgColor: #068913;
$stageColor: #e6674b;
$stageBgColor: #d73f1d;
$archiveColor: #6f6f6f;
$archiveBgColor: #6f6f6f;

// Container

#BetterNavigator {
    position: fixed;
    z-index: 99999;
    max-height: 100%;
    overflow: auto;
    text-align: left;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25),
        0px 0px 12px rgba(0, 0, 0, 0.15);

    * {
        // Reset all styles to avoid inheriting from
        // the parent page theme
        all: initial;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 1.2;
    }

    a {
        text-decoration: none;
    }

    form {
        display: none;
    }

    // Toggle states

    &.collapsed {
        &.translucent {
            opacity: 0.5;
            transition: opacity 250ms;

            &:hover {
                opacity: 1;
            }
        }

        #BetterNavigatorStatus {
            padding-right: 12px;
        }

        #BetterNavigatorContent {
            display: none;
        }

        #BetterNavigatorStatusIcon {
            order: -1;
        }
    }

    &.right-top {
        right: 0;
        top: 0;

        &.collapsed {
            transform-origin: right top;
            transform: rotate(90deg) translate(100%, 0);
        }
    }

    &.right-bottom {
        right: 0;
        bottom: 0;

        &.collapsed {
            transform-origin: right bottom;
            transform: rotate(90deg) translate(0, 100%);
        }
    }

    &.left-bottom {
        left: 0;
        bottom: 0;

        &.collapsed {
            transform-origin: left bottom;
            transform: rotate(90deg) translate(-100%, 0);
        }
    }

    &.left-top {
        left: 0;
        top: 0;

        &.collapsed {
            transform-origin: left top;
            transform: rotate(90deg) translate(0, -100%);
        }
    }

    // Icons
    span[class^="bn-icon"],
    span[class*=" bn-icon"] {
        display: inline-block;
    }

    .bn-icon-close {
        @extend .svg-images--bn-icon--close;
        @extend .svg-images--bn-icon--close-dims;
        transform: scale(1.3);
    }

    .bn-icon-cog {
        @extend .svg-images--bn-icon--cog;
        @extend .svg-images--bn-icon--cog-dims;
    }

    .bn-icon-db {
        @extend .svg-images--bn-icon--db;
        @extend .svg-images--bn-icon--db-dims;
        transform: scale(0.8);
    }

    .bn-icon-edit {
        @extend .svg-images--bn-icon--edit;
        @extend .svg-images--bn-icon--edit-dims;
        transform: scale(0.9);
    }

    .bn-icon-flush {
        @extend .svg-images--bn-icon--flush;
        @extend .svg-images--bn-icon--flush-dims;
        transform: scale(0.8);
    }

    .bn-icon-info {
        @extend .svg-images--bn-icon--info;
        @extend .svg-images--bn-icon--info-dims;
        transform: scale(0.7);
    }

    .bn-icon-tick {
        @extend .svg-images--bn-icon--tick;
        @extend .svg-images--bn-icon--tick-dims;
        transform: scale(0.7);
    }

    .bn-icon-tools {
        @extend .svg-images--bn-icon--tools;
        @extend .svg-images--bn-icon--tools-dims;
        transform: scale(0.9);
    }

    .bn-icon-user {
        @extend .svg-images--bn-icon--user;
        @extend .svg-images--bn-icon--user-dims;
    }

    .bn-icon-view {
        @extend .svg-images--bn-icon--view;
        @extend .svg-images--bn-icon--view-dims;
        transform: scale(0.95);
    }
}

// Status

#BetterNavigatorStatus {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    appearance: none;
    background: $archiveColor;
    cursor: pointer;
    padding: 8px 10px 8px 14px;
    margin: 0;
    transition: 100ms background-color ease-in-out;
    white-space: nowrap;
    color: $textColor;

    .status-text {
        text-align: left;
        color: $textColor;
        text-transform: uppercase;
        font-family: inherit;
        font-weight: bold;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.4px;
        padding: 3px 3px 2px;
        border-radius: 3px;
        background: $archiveBgColor;
    }

    &:hover,
    &:focus-visible {
        background: mix($black, $archiveColor, 5%);

        .bn-icon-cog,
        .bn-icon-close {
            opacity: 1;
        }
    }

    &:focus-visible {
        outline: 3px solid mix($black, $archiveColor, 10%);
        outline-offset: 0;
    }

    &.Live {
        background: $liveColor;

        .status-text {
            background: $liveBgColor;
        }

        &:hover {
            background: mix($black, $liveColor, 5%);
        }

        &:focus-visible {
            outline: 3px solid mix($black, $liveColor, 10%);
        }
    }

    &.Draft {
        background: $stageColor;

        .status-text {
            background: $stageBgColor;
        }

        &:hover {
            background: mix($black, $stageColor, 5%);
        }

        &:focus-visible {
            outline: 3px solid mix($black, $stageColor, 10%);
        }
    }

    .bn-icon-cog,
    .bn-icon-close {
        opacity: 0.7;
    }
}

#BetterNavigatorStatusIcon {
    cursor: inherit;
    transition: 100ms opacity ease-in-out;
}

// Content

#BetterNavigatorContent {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
    color: $contentColor;
    background: $contentBackground;
    min-width: 140px;
    overflow: auto;

    .bn-heading {
        display: block;
        text-transform: uppercase;
        font-size: 11px;
        line-height: 1.2;
        color: $contentColor;
        margin: 5px 0 0 0;
        padding: 0;
        font-weight: normal;
    }

    span[class^="bn-icon"],
    span[class*=" bn-icon"] {
        cursor: inherit;
        margin: -2px 5px -3px -2px;
    }

    a,
    .bn-disabled {
        display: block;
        background: $buttonBackground;
        color: $buttonColor;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 1.4;
        border-radius: 5px;
        border-bottom: 1px solid $buttonBorder;
        margin: 0;
        padding: 6px 10px 5px 10px;
        font-weight: bold;
        cursor: pointer;
        transition: 100ms background-color ease-in-out;

        .light {
            font-weight: normal;
        }
    }

    a:focus-visible,
    a:hover {
        background: $white;
        color: $black;
    }

    a:focus-visible {
        border-bottom: 1px solid transparent;
        outline: 2px solid mix($black, $buttonBorder, 10%);
        outline-offset: 1px;
    }

    a:active {
        background: mix($black, $buttonBackground, 10%);
        border-color: mix($white, $buttonBorder, 10%);
    }

    .bn-disabled {
        background: $buttonBackgroundDisabled;
        color: $buttonColorDisabled;
        cursor: default;
        pointer-events: none;
    }

    .bn-links {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
        padding: 0;
        list-style-type: none;

        > :last-child {
            margin-bottom: 0;
        }
    }
}

// Some help for debugging info
body > p.message {
    text-align: left;
    background: #fff;
    color: #222;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    border-left: 5px solid #1d8aff;
}