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: #4A831C;
$stageColor: #C0462B;
$archiveColor: #6F6F6F;

// 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(0.8);
    margin: -3px -6px 0 0;
}

.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.8);
}

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

.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);
}

// Container

#BetterNavigator {
    position: fixed;
    z-index: 99999;
    max-height: 100%;
    overflow: auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    text-align: left;

    a {
        text-decoration: none;
    }

    form {
        display:none;
    }

    // Toggle states

    &.collapsed {
        box-shadow: 0px 0px 3px rgba(0,0,0,0.5);

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

            &:hover {
                opacity: 1;
            }
        }

        #BetterNavigatorStatus {
            border-width: 1px;
            padding: 10px 15px 8px 35px;
        }

        #BetterNavigatorContent {
            display: none;
        }
    }

    &.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%);
        }
    }
}

// Status

#BetterNavigatorStatus {
    color: $textColor;
    background: $archiveColor;
    border: 1px solid mix($black, $archiveColor, 10%);
    border-width: 0;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 15px 8px;
    font-weight: bold;
    transition: 100ms background-color ease-in-out;
    font-size: 14px;
    margin: 0;

    #BetterNavigatorStatusButton {
        appearance: none;
        width: 100%;
        height: 38px;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 2px 14px 0;
    }

    .bn-icon-cog {
      margin: -4px 8px -2px -4px;
    }

    .bn-icon-close {
      float: right;
    }

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

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

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

    &.Live {
        background: $liveColor;
        border-color: mix($black, $liveColor, 10%);

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

    &.Draft {
        background: $stageColor;
        border-color: mix($black, $stageColor, 10%);

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

// Content

#BetterNavigatorContent {
    padding: 6px;
    color: $contentColor;
    background: $contentBackground;
    border: 1px solid mix($black, $contentBackground, 10%);
    border-width: 0 0 1px 1px;
    min-width: 140px;
    transition: 100ms background-color ease-in-out;

    .bn-heading {
        text-transform: uppercase;
        font-size: 11px;
        margin: 8px 0 4px 0;
        font-weight: normal;
    }

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

    a,
    .bn-disabled {
        display: block;
        background: $buttonBackground;
        color: $buttonColor;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        border-radius: 5px;
        border-bottom: 1px solid $buttonBorder;
        margin: 0 0 4px 0;
        padding: 6px 10px 5px 10px;
        line-height: 16px;
        font-weight: bold;

        .light {
            font-weight: normal;
        }
    }

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

    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 {
        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;
}