getlackey/lackey-cms

    [data-lky-hook="header"] {
        z-index: 1;
        height: $header-height;
        background-color: $color-background;
        color: $color-white;

        > * {
            font: inherit;
            color: inherit;
            background-color: transparent;
        }
        > button,
        > a {
            border: 0;
            margin: 0;
            overflow: visible;
            display: block;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
            &:disabled {
                color: $color-washed;
            }
            > img {
                margin-right: 0.75em;

                vertical-align: middle;
            }
        }
        [data-lky-hook="header.settings"] {
            > img {
                margin: 0;

                height: 40px;
            }
        }
        [data-lky-hook="header.cms"],
        [data-lky-hook="header.settings"],
        [data-lky-hook="header.publish"],
        [data-lky-hook="header.blocks"],
        [data-lky-hook="header.create"] {
            border-right: 1px solid $color-washed;
            transition: background-color $speed;
        }
        [data-lky-hook="header.settings"],
        [data-lky-hook="header.publish"],
        [data-lky-hook="header.blocks"] {
            display: none;
            padding: 0px 20px;
        }
        [data-lky-hook="header.cms"],
        [data-lky-hook="header.create"] {
            display: inline-flex;
            align-items: center;
            padding: 0px 20px;

            text-decoration: none;
        }
        [data-lky-hook="header.cms"] {
            padding: 0px 20px;
        }
        [data-lky-hook="header.publish"] {
            [data-lky-switch] {
                span {
                    width: #{$switch-width * 3};
                }
                span:before {
                    color: $color-lackey-gray;
                    font-size: 11px;
                    padding: 5px 0px 0px 18px;
                    content: 'draft';
                }
                input:checked + span:before {
                    content: 'live';
                    padding: 5px 16px 0px 0px;
                    color: $color-lackey-lighter-blue;
                }
                input:checked + span:after {
                    margin-left: #{$switch-width * 2 + 4};
                }
            }
        }
        p.shareBox {
            display: none;
            top: 60px;
            text-align: left;
            background-color: #1E2021;
            padding: 20px;
            width: 350px;
            position: absolute;
            border-radius: 3px;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
            right: 5px;
            color: #FFF;
            font-size: 13px;
            line-height: 1.4;

            &:before{
                position: absolute;
                content: '';
                width:0;
                height: 0;
                border:6px solid transparent;
                border-bottom-color:#1E2021;
                right:10px;
                top:-11px;
            }

            &:after{
                width:100%;
                height:40px;
                content:'';
                position: absolute;
                top:-40px;
                left:0;
            }

            input {
                width: 240px;
                border-radius: 3px;
                border: none;
                padding: 5px;
            }
        }


        [data-lky-hook="header.cms"],
        [data-lky-hook="header.settings"],
        [data-lky-hook="header.blocks"],
        [data-lky-hook="header.create"] {
            float: left;
            height: $header-height;
        }
        [data-lky-hook="header.publish"] {
            float: right;
            height: $header-height;
        }
        [data-lky-hook="header.save"] {
            border-radius: 30px;
            &:disabled {
                border: 1px solid #5F799C;
            }
        }
        [data-lky-hook="header.changes"] {
            font-size: 11px;
            float: right;
            width: 370px;
            height: $header-height;
            > span {
                display: none;
            }
            &[data-lky-active] {
                background-color: $color-lackey-dark-gray;
                > span {
                    display: block;
                    width: 200px;
                    padding: 23px;
                    line-height: 15px;
                    a {
                        display: block;
                        color: $color-lackey-light-gray;
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
                button {
                    border: 1px solid $color-lackey-light-blue;
                    background-color: $color-lackey-light-blue;
                    color: white;
                }
            }
            button {
                margin: 18px;
                padding: 10px 35px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 2px;
                float: right;
                background-color: transparent;
                color: #5F799C;
                border: 1px solid #5F799C;
            }
        }
        [data-lky-hook="header.user"] {
            float: right;
            height: $header-height;
            border-left: 1px solid #5F799C;
            width: 200px;
            cursor: pointer;
            position: relative;
            a {
                color: white;
                text-decoration: none;
            }
            figure {
                display: inline-block;
                margin: 0;
                height: 100%;
                vertical-align: middle;
                img {
                    box-sizing: content-box;
                    width: 38px;
                    height: 38px;
                    border-radius: 38px;
                    padding: 18px 21px;
                }
            }
            span {
                display: inline-block;
                width: 100px;
                text-transform: uppercase;
                word-wrap: break-word;
                font-size: 10px;
                vertical-align: middle;
            }
            [data-lky-hook="header.user.name"] {

            }
            nav {
                position: absolute;
                min-width: 100%;
                background: #00CBFE;
                color: #333333;
                padding: 0;
                cursor: initial;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.5s, visibility 0s linear 0.5s;
                ul {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                    li {
                        a {

                            display: block;
                            padding: 0.8rem 1.875rem;
                            color: #fff;
                            border-left: 0 solid #fed530;
                            font-weight: 400;
                            text-decoration: none;
                            transition: background-color 0.3s, color 0.3s, font-weight 0.3s, border-left-width 0.1s;

                            &:hover {
                                background-color: #00ABFC;
                            }
                        }
                    }
                }

                &[data-visible] {
                    visibility: visible;
                    opacity: 1;
                    transition-delay:0s;
                }
            }
            &:after {
                content: '';
                position: absolute;
                right: 18px;
                top: 35px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-top: 5px solid #fff;
            }
        }
    }