[FIX] web_planner: fix layout of close button in planner dialog

remove double cross

close #19731

/**************** FONTS ****************/
@font-face {
    font-family: 'Simple-Line-Icons';
    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot');
    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.woff') format('woff'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.ttf') format('truetype'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**************** ICON ****************/
// use data attributes for inserting  icons
// http://www.issme.net/india/assets/plugins/line-icons/
[data-icon]:before {
    font-family: 'Simple-Line-Icons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**************** MENU PROGRESS BAR ****************/
@planner-height: 13px;
.o_planner_systray {
    > .progress {
        width: 70px;
        height: @planner-height;
        margin: floor((@odoo-navbar-height - @planner-height)/2) 10px 0;
        cursor: pointer;

        > .progress-bar {
            background-color: @brand-success;
        }
    }
}

.o_planner_dialog {

    > .modal-dialog {
        height: 100%;
        padding: 30px 0;
        margin: 0 auto;

        > .modal-content {
            height: 100%;
            .o-flex-display();
            .o-flex-flow(column, nowrap);

            > .modal-header, > .modal-footer {
                .o-flex(0, 0, auto);
                text-align: left;
                padding: 15px;
            }

            > .modal-header {
                background-color: @odoo-brand-primary;
                color: white;

                > .close {
                    color: inherit;
                    opacity: 1;

                    &::after, &::before {
                        content: none;
                    }
                }

                > .modal-title {
                    font-weight: 700;
                    color: inherit;

                    > * {
                        display: inline-block;
                        vertical-align: middle;
                    }
                    > .o_page_name {
                        width: 25%;
                        font-size: 22px;
                    }
                    > .progress {
                        width: 120px;
                        margin: 0 15px;

                        > .progress-bar {
                            background-color: @brand-success;
                            box-shadow: none;
                        }
                    }
                }
            }

            > .modal-footer {
                padding-left: 25%;
                > :first-child {
                    margin-left: 25px;
                }
            }

            > .modal-body {
                .o-flex(1, 1, auto);
                padding: 0;

                > .o_planner_menu {
                    float: left;
                    width: 25%;
                    height: 100%;
                    overflow: auto;
                    border-right: 1px solid #e6e6e6;
                    margin: 0;
                    padding-top: 10px;
                    padding-left: 18px;
                    padding-right: 18px;
                    list-style-type: none;
                    line-height: 1.6;

                    > li {
                        // align multi lines li
                        text-indent: -18px;
                        padding-left: 18px;

                        position: relative;

                        > a {
                            color: #666666;
                            padding-left: 18px;
                            font-weight: 600;
                            font-size: 14px;

                            &:hover {
                                color: @odoo-brand-optional;
                            }

                            > .fa {
                                .o-position-absolute(@top: 4px, @left: 1px);
                            }
                        }
                        &.active > a {
                            color: @odoo-brand-optional;
                        }
                    }

                    > h4 {
                        padding-left: 27px;
                        font-size: 12px;
                        color: #a8a8a8;
                        border-top: 1px solid #e6e6e6;
                        margin-left: -15px;
                        margin-bottom: 15px;
                        padding-top: 20px;

                        > i.fa {
                            margin-right: 10px;
                            font-size: 14px;
                        }
                    }
                }

                > .o_planner_page {
                    display: none;
                    height: 100%;
                    overflow: auto;
                    margin-left: 25%;
                    padding: 0 25px;

                    > h1 {
                        font-size: 2.5em;
                        font-weight: 300;
                    }

                    .o_planner_intro {
                        font-size: 120%;
                    }

                    .label > a {
                        color: inherit;
                    }

                    .well, .panel, .alert {
                        box-shadow: none;
                        border-radius: 0;
                    }

                    .well {
                        padding: 30px;
                        padding: 30px;
                        .label {
                            font-size: 12px;
                        }
                    }

                    .alert {
                        padding: 30px;
                    }

                    .fa-lightbulb-o {
                        padding-top: 5px;
                        &:before {
                            float: left;
                            font-size: 20px;
                            padding-right: 10px;
                        }
                    }

                    &.marked:after {
                        .o-display-marked("\f00c", 0, 360px, @brand-success);
                    }

                    //NOTEBOOK
                    .o_planner_notebook_container {
                        margin: 20px 0;
                        .o_planner_notebook {
                            color: #555;
                            padding: 0 !important;
                            font-family: courier, monospace;
                            border: 1px solid #faebcc;
                            color: #8a6d3b;
                            position: relative;
                            background-color: #fcf8e3;

                            textarea, input[type="text"] {
                                background: #fcf8e3;
                                border: none;
                                width: 100%;
                                max-width: 100%;
                            }

                            input[type="radio"],input[type="checkbox"] {
                                margin-right: 5px;
                            }

                            > li {
                                list-style: none;
                                border-bottom: 1px dashed #C1D6DA;
                                padding: 10px 10px 5px 55px;
                                text-transform: capitalize;
                                margin: 0;

                                .indented {
                                    padding-left: 32px;
                                }

                                span {
                                    position: absolute;
                                    left: 9px;
                                    color: rgb(199, 180, 146);
                                    font-size: 20px;
                                    font-weight: bold;
                                }
                            }

                            > li.row {
                                span {
                                    left: -50px; // make up for the li's left padding
                                }
                            }

                            > li:last-child {
                                border-bottom: 0;
                            }

                            .o_planner_notebook_header {
                                div.dropdown {
                                    display: inline;
                                    float:right;
                                }
                                a {
                                    color: #C4A87A;
                                    position: absolute;
                                    top: 13px;
                                    right: 13px;
                                    &:hover {
                                        text-decoration: none;
                                        color: #9C855D;
                                    }
                                }
                                select {
                                    margin-bottom: 10px;
                                    font-family: sans-serif;
                                    font-size: 16px;
                                    border: none;
                                    background: #F5E7CF;
                                    padding: 3px;
                                    width: auto;
                                }
                            }
                            > li:not(.o_planner_notebook_header):hover {
                                background-color: #F5EFD0;
                            }
                            .o_planner_notebook_line_separator {
                                border-left: 1px solid #ffaa9f;
                                border-right: 1px solid #ffaa9f;
                                background: transparent;
                                position: absolute;
                                width: 3px;
                                height: 100%;
                                top: 0;
                                left: 42px;
                                border-bottom: 0;
                                border-top: 0;
                            }
                        }
                    }

                    // WHITE BOX
                    .o_planner_white_box{
                        .panel{
                            height: 200px;
                            width: 100%;
                            font-size: 1.1em;
                            padding-top: 40px;
                            a:hover{
                                text-decoration: none;
                            }
                        }
                    }

                    // TROPHY
                    .o_planner_trophy {
                        font-size: 11em;
                        color: #875A7B;
                        margin-top: .5em;
                        -webkit-animation-name: bounceIn;
                        animation-name: bounceIn;
                        -webkit-animation-duration: 1.75s;
                        animation-duration: 1.75s;
                        -webkit-animation-fill-mode: both;
                        animation-fill-mode: both;
                    }
                    .info_icon {
                        position: relative;
                        padding-left: 5em;
                        min-height: 6em;
                        .fa {
                            position: absolute;
                            font-size: 5em;
                            left: 0.2em;
                            opacity: 0.6;
                        }
                    }

                    .odoo_purple, a.btn.odoo_purple, .btn.odoo_purple:hover {
                        background-color: #875A7B;
                        color: white;
                    }

                    // PARAGRAPHS
                    .o_planner_paragraphs .icon {
                        text-align: center;
                        font-size: 2em;
                        color: #21b799;
                    }

                    // INSTALL APP
                    .o_planner_row_apps{
                        .col-md-4{
                            margin-top: 20px;
                        }
                    }
                }
            }
        }
    }
}

/**************** FONTS ****************/
@font-face {
    font-family: 'Simple-Line-Icons';
    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot');
    src:url('/web_planner/static/src/fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.woff') format('woff'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.ttf') format('truetype'),
        url('/web_planner/static/src/fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**************** ICON ****************/
// use data attributes for inserting  icons
// http://www.issme.net/india/assets/plugins/line-icons/
[data-icon]:before {
    font-family: 'Simple-Line-Icons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**************** MENU PROGRESS BAR ****************/
@planner-height: 13px;
.o_planner_systray {
    > .progress {
        width: 70px;
        height: @planner-height;
        margin: floor((@odoo-navbar-height - @planner-height)/2) 10px 0;
        cursor: pointer;

        > .progress-bar {
            background-color: @brand-success;
        }
    }
}

.o_planner_dialog {

    > .modal-dialog {
        height: 100%;
        padding: 30px 0;
        margin: 0 auto;

        > .modal-content {
            height: 100%;
            .o-flex-display();
            .o-flex-flow(column, nowrap);

            > .modal-header, > .modal-footer {
                .o-flex(0, 0, auto);
                text-align: left;
                padding: 15px;
            }

            > .modal-header {
                background-color: @odoo-brand-primary;
                color: white;

                > .close {
                    color: inherit;
                    opacity: 1;
                }

                > .modal-title {
                    font-weight: 700;
                    color: inherit;

                    > * {
                        display: inline-block;
                        vertical-align: middle;
                    }
                    > .o_page_name {
                        width: 25%;
                        font-size: 22px;
                    }
                    > .progress {
                        width: 120px;
                        margin: 0 15px;

                        > .progress-bar {
                            background-color: @brand-success;
                            box-shadow: none;
                        }
                    }
                }
            }

            > .modal-footer {
                padding-left: 25%;
                > :first-child {
                    margin-left: 25px;
                }
            }

            > .modal-body {
                .o-flex(1, 1, auto);
                padding: 0;

                > .o_planner_menu {
                    float: left;
                    width: 25%;
                    height: 100%;
                    overflow: auto;
                    border-right: 1px solid #e6e6e6;
                    margin: 0;
                    padding-top: 10px;
                    padding-left: 18px;
                    padding-right: 18px;
                    list-style-type: none;
                    line-height: 1.6;

                    > li {
                        // align multi lines li
                        text-indent: -18px;
                        padding-left: 18px;

                        position: relative;

                        > a {
                            color: #666666;
                            padding-left: 18px;
                            font-weight: 600;
                            font-size: 14px;

                            &:hover {
                                color: @odoo-brand-optional;
                            }

                            > .fa {
                                .o-position-absolute(@top: 4px, @left: 1px);
                            }
                        }
                        &.active > a {
                            color: @odoo-brand-optional;
                        }
                    }

                    > h4 {
                        padding-left: 27px;
                        font-size: 12px;
                        color: #a8a8a8;
                        border-top: 1px solid #e6e6e6;
                        margin-left: -15px;
                        margin-bottom: 15px;
                        padding-top: 20px;

                        > i.fa {
                            margin-right: 10px;
                            font-size: 14px;
                        }
                    }
                }

                > .o_planner_page {
                    display: none;
                    height: 100%;
                    overflow: auto;
                    margin-left: 25%;
                    padding: 0 25px;

                    > h1 {
                        font-size: 2.5em;
                        font-weight: 300;
                    }

                    .o_planner_intro {
                        font-size: 120%;
                    }

                    .label > a {
                        color: inherit;
                    }

                    .well, .panel, .alert {
                        box-shadow: none;
                        border-radius: 0;
                    }

                    .well {
                        padding: 30px;
                        padding: 30px;
                        .label {
                            font-size: 12px;
                        }
                    }

                    .alert {
                        padding: 30px;
                    }

                    .fa-lightbulb-o {
                        padding-top: 5px;
                        &:before {
                            float: left;
                            font-size: 20px;
                            padding-right: 10px;
                        }
                    }

                    &.marked:after {
                        .o-display-marked("\f00c", 0, 360px, @brand-success);
                    }

                    //NOTEBOOK
                    .o_planner_notebook_container {
                        margin: 20px 0;
                        .o_planner_notebook {
                            color: #555;
                            padding: 0 !important;
                            font-family: courier, monospace;
                            border: 1px solid #faebcc;
                            color: #8a6d3b;
                            position: relative;
                            background-color: #fcf8e3;

                            textarea, input[type="text"] {
                                background: #fcf8e3;
                                border: none;
                                width: 100%;
                                max-width: 100%;
                            }

                            input[type="radio"],input[type="checkbox"] {
                                margin-right: 5px;
                            }

                            > li {
                                list-style: none;
                                border-bottom: 1px dashed #C1D6DA;
                                padding: 10px 10px 5px 55px;
                                text-transform: capitalize;
                                margin: 0;

                                .indented {
                                    padding-left: 32px;
                                }

                                span {
                                    position: absolute;
                                    left: 9px;
                                    color: rgb(199, 180, 146);
                                    font-size: 20px;
                                    font-weight: bold;
                                }
                            }

                            > li.row {
                                span {
                                    left: -50px; // make up for the li's left padding
                                }
                            }

                            > li:last-child {
                                border-bottom: 0;
                            }

                            .o_planner_notebook_header {
                                div.dropdown {
                                    display: inline;
                                    float:right;
                                }
                                a {
                                    color: #C4A87A;
                                    position: absolute;
                                    top: 13px;
                                    right: 13px;
                                    &:hover {
                                        text-decoration: none;
                                        color: #9C855D;
                                    }
                                }
                                select {
                                    margin-bottom: 10px;
                                    font-family: sans-serif;
                                    font-size: 16px;
                                    border: none;
                                    background: #F5E7CF;
                                    padding: 3px;
                                    width: auto;
                                }
                            }
                            > li:not(.o_planner_notebook_header):hover {
                                background-color: #F5EFD0;
                            }
                            .o_planner_notebook_line_separator {
                                border-left: 1px solid #ffaa9f;
                                border-right: 1px solid #ffaa9f;
                                background: transparent;
                                position: absolute;
                                width: 3px;
                                height: 100%;
                                top: 0;
                                left: 42px;
                                border-bottom: 0;
                                border-top: 0;
                            }
                        }
                    }

                    // WHITE BOX
                    .o_planner_white_box{
                        .panel{
                            height: 200px;
                            width: 100%;
                            font-size: 1.1em;
                            padding-top: 40px;
                            a:hover{
                                text-decoration: none;
                            }
                        }
                    }

                    // TROPHY
                    .o_planner_trophy {
                        font-size: 11em;
                        color: #875A7B;
                        margin-top: .5em;
                        -webkit-animation-name: bounceIn;
                        animation-name: bounceIn;
                        -webkit-animation-duration: 1.75s;
                        animation-duration: 1.75s;
                        -webkit-animation-fill-mode: both;
                        animation-fill-mode: both;
                    }
                    .info_icon {
                        position: relative;
                        padding-left: 5em;
                        min-height: 6em;
                        .fa {
                            position: absolute;
                            font-size: 5em;
                            left: 0.2em;
                            opacity: 0.6;
                        }
                    }

                    .odoo_purple, a.btn.odoo_purple, .btn.odoo_purple:hover {
                        background-color: #875A7B;
                        color: white;
                    }

                    // PARAGRAPHS
                    .o_planner_paragraphs .icon {
                        text-align: center;
                        font-size: 2em;
                        color: #21b799;
                    }

                    // INSTALL APP
                    .o_planner_row_apps{
                        .col-md-4{
                            margin-top: 20px;
                        }
                    }
                }
            }
        }
    }
}


adjust height

adjust height

Signed-off-by: Pierre Tardy <bb5a2a16eebb4a48138fca46fede24b3c8d635fe@intel.com>

/* Based on http://ehesp.github.io/Responsive-Dashboard/ by Elliot Hesp */
@gl-sidebar-transition-time: 0.2s;
.gl-page-with-sidebar {
    padding-left: 70px;
    height: 100%;
    bottom: 0;
    /* theme */
    .sidebar.sidebar-blue {
        background: #30426a;
        ul .sidebar-main, .sidebar-footer, a:hover {
            background: #273759;
        }
        ul .sidebar-title {
            color: #627cb7;
        }
    }
    /* animations */
    transition: all @gl-sidebar-transition-time ease-out 0s;
    &.active {
        transform: translate(180px, 0px);
        -webkit-transform: translate(180px, 0px);
    }
    &:not(.active){

        .sidebar.blue {
            ul.sidebar .sidebar-title.separator {
                background: #273759;
            }
        }
        ul {
            .sidebar-title {
                alpha: 0;
            }
            &.separator {
                display: block;
                margin: 13px 0;
            }
            .sidebar-list a:hover span {
                border-left: 3px solid #e99d1a;
                text-indent: 22px;
            }
        }
        .sidebar-footer {
            display: none;
        }
    }
    /* sidebar */
    .sidebar {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        margin-left: -150px;
        left: -30px;
        width: 250px;
        position: fixed;
        height: 100%;
        ul {
            position: absolute;
            top: 0;
            bottom: 45px;
            padding: 0;
            margin: 0;
            list-style: none;
            text-indent: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            li a {
                color: #fff;
                display: block;
                float: left;
                text-decoration: none;
                width: 250px;
            }
            li.sidebar-main {
                height: 51px;
                a {
                    font-size: 18px;
                    line-height: 50px;
                }
                .menu-icon {
                    float: right;
                    font-size: 18px;
                    padding-right: 28px;
                    line-height: 50px;
                }
            }
            li.sidebar-title {
                font-size: 12px;
                height: 35px;
                line-height: 40px;
                text-transform: uppercase;
            }
            li.sidebar-list {
                height: 40px;
                a {
                    text-indent: 25px;
                    font-size: 15px;
                    color: #b2bfdc;
                    line-height: 40px;
                    .fa {
                        margin-left: -34px;
                    }
                }
                a:hover {
                    color: #fff;
                    border-left: 3px solid #e99d1a;
                    text-indent: 22px;
                }
                .menu-icon {
                    float: right;
                    padding-right: 29px;
                    line-height: 40px;
                    width: 70px;
                }
                a:hover .menu-icon {
                    text-indent: 25px;
                }
                &.subitem {
                    transition: height @gl-sidebar-transition-time ease-out 0s;
                    a {
                        padding-left:20px;
                        transition: line-height @gl-sidebar-transition-time ease-out 0s, color @gl-sidebar-transition-time ease-out 0s,  background @gl-sidebar-transition-time ease-out 0s;;
                    }
                    &:not(.active) {
                        height: 0px;
                        a {
                            line-height: 0px;
                            color: rgba(255, 0, 0, 0.0);
                        }
                    }

                }
            }
        }
    }
    /* footer */
    .footer {
        position: absolute;
        height: 40px;
        bottom: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        div a {
            color: #b2bfdc;
            font-size: 12px;
            line-height: 43px;
        }
        div a:hover {
            color: #ffffff;
            text-decoration: none;
        }
    }
    /* content */
    .content {
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        height: auto;
    }
}

/* Based on http://ehesp.github.io/Responsive-Dashboard/ by Elliot Hesp */
@gl-sidebar-transition-time: 0.2s;
.gl-page-with-sidebar {
    padding-left: 70px;
    height: 100%;
    bottom: 0;
    /* theme */
    .sidebar.sidebar-blue {
        background: #30426a;
        ul .sidebar-main, .sidebar-footer, a:hover {
            background: #273759;
        }
        ul .sidebar-title {
            color: #627cb7;
        }
    }
    /* animations */
    transition: all @gl-sidebar-transition-time ease-out 0s;
    &.active {
        transform: translate(180px, 0px);
        -webkit-transform: translate(180px, 0px);
    }
    &:not(.active){

        .sidebar.blue {
            ul.sidebar .sidebar-title.separator {
                background: #273759;
            }
        }
        ul {
            .sidebar-title {
                alpha: 0;
            }
            &.separator {
                display: block;
                margin: 13px 0;
            }
            .sidebar-list a:hover span {
                border-left: 3px solid #e99d1a;
                text-indent: 22px;
            }
        }
        .sidebar-footer {
            display: none;
        }
    }
    /* sidebar */
    .sidebar {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        margin-left: -150px;
        left: -30px;
        width: 250px;
        position: fixed;
        height: 100%;
        ul {
            position: absolute;
            top: 0;
            bottom: 45px;
            padding: 0;
            margin: 0;
            list-style: none;
            text-indent: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            li a {
                color: #fff;
                display: block;
                float: left;
                text-decoration: none;
                width: 250px;
            }
            li.sidebar-main {
                height: 65px;
                a {
                    font-size: 18px;
                    line-height: 60px;
                }
                .menu-icon {
                    float: right;
                    font-size: 18px;
                    padding-right: 28px;
                    line-height: 60px;
                }
            }
            li.sidebar-title {
                font-size: 12px;
                height: 35px;
                line-height: 40px;
                text-transform: uppercase;
            }
            li.sidebar-list {
                height: 40px;
                a {
                    text-indent: 25px;
                    font-size: 15px;
                    color: #b2bfdc;
                    line-height: 40px;
                    .fa {
                        margin-left: -34px;
                    }
                }
                a:hover {
                    color: #fff;
                    border-left: 3px solid #e99d1a;
                    text-indent: 22px;
                }
                .menu-icon {
                    float: right;
                    padding-right: 29px;
                    line-height: 40px;
                    width: 70px;
                }
                a:hover .menu-icon {
                    text-indent: 25px;
                }
                &.subitem {
                    transition: height @gl-sidebar-transition-time ease-out 0s;
                    a {
                        padding-left:20px;
                        transition: line-height @gl-sidebar-transition-time ease-out 0s, color @gl-sidebar-transition-time ease-out 0s,  background @gl-sidebar-transition-time ease-out 0s;;
                    }
                    &:not(.active) {
                        height: 0px;
                        a {
                            line-height: 0px;
                            color: rgba(255, 0, 0, 0.0);
                        }
                    }

                }
            }
        }
    }
    /* footer */
    .footer {
        position: absolute;
        height: 40px;
        bottom: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        div a {
            color: #b2bfdc;
            font-size: 12px;
            line-height: 43px;
        }
        div a:hover {
            color: #ffffff;
            text-decoration: none;
        }
    }
    /* content */
    .content {
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        height: auto;
    }
}


Tweak Rate style

Tweak Rate style

@import './common/var.less';
@import './common/color.less';

@rate-prefix-cls: ~"@{pure-prefix}-rate";

@rate-active-color: @primary-color;
@rate-inactive-color: #e2e2e2;

.@{rate-prefix-cls} {
	cursor: pointer;

	&--readonly {
		cursor: default;
	}

	&__star {
		position: relative;
		display: inline-block;
		line-height: 1;
		font-size: 21px;
		color: @rate-inactive-color;

		&::before {
			content: '\e62f';
			display: block;
		}
	}

	&__star-highlight {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		overflow: hidden;
		color: @rate-active-color;

		&--full {
			width: 100%;
		}
	}
}

@import './common/var.less';
@import './common/color.less';

@rate-prefix-cls: ~"@{pure-prefix}-rate";

@rate-active-color: @primary-color;
@rate-inactive-color: #ddd;

.@{rate-prefix-cls} {
	cursor: pointer;

	&--readonly {
		cursor: default;
	}

	&__star {
		position: relative;
		display: inline-block;
		line-height: 1;
		font-size: 22px;
		color: @rate-inactive-color;

		&::before {
			content: '\e62f';
			display: block;
		}
	}

	&__star-highlight {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		overflow: hidden;
		color: @rate-active-color;

		&--full {
			width: 100%;
		}
	}
}


responsive

responsive

/*!
 * Bootstrap Responsive v2.3.2
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------

// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately

@import "../../../../vendor/mopa/boostrap-bundle/Mopa/Bundle/BootstrapBundle/Resource/bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../../../../vendor/mopa/boostrap-bundle/Mopa/Bundle/BootstrapBundle/Resource/bootstrap/less/mixins.less";

// RESPONSIVE CLASSES
// ------------------

@import "responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "responsive-1200px-min.less";

// Tablets to regular desktops
@import "responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";

/*!
 * Bootstrap Responsive v2.3.2
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------

// REPEAT VARIABLES & MIXINS
// -------------------------
// Required since we compile the responsive stuff separately

@import "@Mopa/Bundle/BootstrapBundle/Resource/bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "@Mopa/Bundle/BootstrapBundle/Resource/bootstrap/less/mixins.less";

// RESPONSIVE CLASSES
// ------------------

@import "responsive-utilities.less";

// MEDIA QUERIES
// ------------------

// Large desktops
@import "responsive-1200px-min.less";

// Tablets to regular desktops
@import "responsive-768px-979px.less";

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// RESPONSIVE NAVBAR
// ------------------

// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";


TM-82: adding box-sizing reset because style-bleed was hiding the thumb on slider widgets

@import "variables.less";
@import "icons.css";
@import "mask.less";
@import "android.less";
@import "../toolstrip/toolstrip.less";

/* RESET all the things! */
.tinymce-mobile-outer-container * {
  box-sizing: initial;
}

@font-face {
  font-family: 'tinymce-mobile';
  src: url('../icons/tinymce-mobile.woff?8x92w3') format('woff');
  font-weight: normal;
  font-style: normal;
}

@media (min-device-width: 700px) {
  .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input {
    font-size: 25px;
  }
}

@media (max-device-width: 700px) {
  .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input {
    font-size: 18px;
  }
}

.tinymce-mobile-icon {
  font-family: 'tinymce-mobile';
}

.mixin-flex-and-centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mixin-flex-bar {
  display: flex;
  align-items: center;
  height: 100%;
}

.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) {
  .tinymce-mobile-editor-socket {
    overflow: hidden;
    height: 300px;
  }

  .tinymce-mobile-toolstrip {
    display: none;
  }
}

.tinymce-mobile-editor-socket {
  .tinymce-mobile-mask-edit-icon {
    position: fixed;

    /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
    right: 2em;
    bottom: 1em;
    color: @mask-button-foreground-color;
    background-color: @mask-button-background-color;
    border-radius: 50%;
    width: @mask-button-size;
    height: @mask-button-size;
    .mixin-flex-and-centre;

    font-size: @mask-button-font-size-large;
    @media @tablets {
      font-size: @mask-button-font-size-small;
    }
  }
}

/*
  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
  increased and the whole body becomes scrollable. It's important!
 */
input[type="file"]::-webkit-file-upload-button {
  display: none;
}

// Media query for iphone only as the edit button cannot be placed correctly
@media @iphone-small-landscape {
  .tinymce-mobile-ios-container {
    .tinymce-mobile-editor-socket {
      .tinymce-mobile-mask-edit-icon {
        bottom: 50%;
      }
    }
  }
}

@import "variables.less";
@import "icons.css";
@import "mask.less";
@import "android.less";
@import "../toolstrip/toolstrip.less";

@font-face {
  font-family: 'tinymce-mobile';
  src: url('../icons/tinymce-mobile.woff?8x92w3') format('woff');
  font-weight: normal;
  font-style: normal;
}

@media (min-device-width: 700px) {
  .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input {
    font-size: 25px;
  }
}

@media (max-device-width: 700px) {
  .tinymce-mobile-outer-container, .tinymce-mobile-outer-container input {
    font-size: 18px;
  }
}

.tinymce-mobile-icon {
  font-family: 'tinymce-mobile';
}

.mixin-flex-and-centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mixin-flex-bar {
  display: flex;
  align-items: center;
  height: 100%;
}

.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) {
  .tinymce-mobile-editor-socket {
    overflow: hidden;
    height: 300px;
  }

  .tinymce-mobile-toolstrip {
    display: none;
  }
}

.tinymce-mobile-editor-socket {
  .tinymce-mobile-mask-edit-icon {
    position: fixed;

    /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
    right: 2em;
    bottom: 1em;
    color: @mask-button-foreground-color;
    background-color: @mask-button-background-color;
    border-radius: 50%;
    width: @mask-button-size;
    height: @mask-button-size;
    .mixin-flex-and-centre;

    font-size: @mask-button-font-size-large;
    @media @tablets {
      font-size: @mask-button-font-size-small;
    }
  }
}

/*
  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
  increased and the whole body becomes scrollable. It's important!
 */
input[type="file"]::-webkit-file-upload-button {
  display: none;
}

// Media query for iphone only as the edit button cannot be placed correctly
@media @iphone-small-landscape {
  .tinymce-mobile-ios-container {
    .tinymce-mobile-editor-socket {
      .tinymce-mobile-mask-edit-icon {
        bottom: 50%;
      }
    }
  }
}


Add bg color and padding

Add bg color and padding

for init tests with live reload


Force long single-word list items to break across lines in settings.

This prevents a long endpoint name from breaking outside of the left
hand sidebar box.

/*

    Copyright (C) 2010-2011 LShift Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

*/

/* Definitions for the settings widgets */

.diffa-endpoint-list, .diffa-pair-list {
  .add-element {
    display: block;
    text-align: right;
  }

  li {
    word-wrap: break-word;
  }
}

.diffa-endpoint-editor, .diffa-pair-editor {
  .error {
    margin-top: 10px;
  }

  .editable-table {
    border-collapse: collapse;

    thead td {
      font-weight: bold;
    }
    td {
      border: 1px solid black;
    }

    margin-bottom: 0;
  }

  .add-link {
    text-align: right;
  }

  dd.controls {
    margin-top: 10px;
    border-top: 1px dashed black;
    padding-top: 5px;
  }
}

/*

    Copyright (C) 2010-2011 LShift Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

*/

/* Definitions for the settings widgets */

.diffa-endpoint-list, .diffa-pair-list {
  .add-element {
    display: block;
    text-align: right;
  }
}

.diffa-endpoint-editor, .diffa-pair-editor {
  .error {
    margin-top: 10px;
  }

  .editable-table {
    border-collapse: collapse;

    thead td {
      font-weight: bold;
    }
    td {
      border: 1px solid black;
    }

    margin-bottom: 0;
  }

  .add-link {
    text-align: right;
  }

  dd.controls {
    margin-top: 10px;
    border-top: 1px dashed black;
    padding-top: 5px;
  }
}


fix: alert base rtl style (#23714)

fix: alert base rtl style (#23714)

@import '../../style/themes/index';
@import '../../style/mixins/index';

@alert-prefix-cls: ~'@{ant-prefix}-alert';

.@{alert-prefix-cls} {
  &&-rtl {
    padding: 8px 37px 8px 15px;
    direction: rtl;
  }

  &&-no-icon {
    .@{alert-prefix-cls}-rtl& {
      padding: @alert-no-icon-padding-vertical 15px;
    }
  }

  &&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 37px;
      padding-left: 30px;
    }
  }

  &&-no-icon&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 15px;
      padding-left: 30px;
    }
  }

  &-icon {
    .@{alert-prefix-cls}-rtl & {
      right: 16px;
      left: auto;
    }
  }

  &-close-icon {
    .@{alert-prefix-cls}-rtl & {
      right: auto;
      left: 16px;
    }
  }

  &-with-description,
  &-with-description&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: 15px 64px 15px 15px;
    }
  }

  &-with-description&-no-icon {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: 15px;
    }
  }

  &-with-description &-icon {
    .@{alert-prefix-cls}-rtl& {
      right: 24px;
      left: auto;
    }
  }

  &-with-description &-close-icon {
    .@{alert-prefix-cls}-rtl& {
      right: auto;
      left: 16px;
    }
  }
}

@import '../../style/themes/index';
@import '../../style/mixins/index';

@alert-prefix-cls: ~'@{ant-prefix}-alert';

.@{alert-prefix-cls} {
  &&-rtl {
    padding: 8px 37px 8px 15px;
    direction: rtl;
  }

  &&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 37px;
      padding-left: 30px;
    }
  }

  &&-no-icon&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding-right: 15px;
      padding-left: 30px;
    }
  }

  &-icon {
    .@{alert-prefix-cls}-rtl & {
      right: 16px;
      left: auto;
    }
  }

  &-close-icon {
    .@{alert-prefix-cls}-rtl & {
      right: auto;
      left: 16px;
    }
  }

  &-with-description,
  &-with-description&-closable {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: 15px 64px 15px 15px;
    }
  }

  &-with-description&-no-icon {
    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
      padding: 15px;
    }
  }

  &-with-description &-icon {
    .@{alert-prefix-cls}-rtl& {
      right: 24px;
      left: auto;
    }
  }

  &-with-description &-close-icon {
    .@{alert-prefix-cls}-rtl& {
      right: auto;
      left: 16px;
    }
  }
}


Put buttons in factlink css

Put buttons in factlink css

@import "bootstrap/mixins";
@import "bootstrap/variables";

body.factlink-site.controller_home,
body.factlink-site.controller_privacy,
body.factlink-site,
body.feedback_form,
body.client {
  .btn {
    display: inline-block;
    padding: 5px 12px;
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    color: @baseFontColor
  }

  .btn-mini {
    padding: 2px 5px;
    font-size: @metaFontSize;
  }
  .btn-action-checked {
    color: @greenLabelColor;
    border: 1px solid @mutedBorderColor;
    background-color: @backgroundGray;
    .box-shadow(inset 0 1px 3px rgba(0,0,0,.06));
    .button-background(@disabledButtonStartColor, @disabledButtonEndColor);
    font-weight: bold;
  }
  .btn-danger {
    color: white;
    background: @dangerButtonColor;
    font-weight:normal;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    .box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
  }
}

body.factlink-site.controller_home,
body.factlink-site.controller_privacy {
  .btn-primary,
  .btn-primary:hover {
      text-shadow: 0 1px 0 #feed7b;
      color: #7e582f;
      padding-left: 20px;
      padding-right: 20px;
  }
  .btn-primary {
    #gradient > .vertical(#F8D36D, #FDBA39);
    background-color: #FDBA39;
    border-color: #FDBA39 #FDBA39 #DC941F;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  }
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.disabled,
  .btn-primary[disabled] {
    background-color: #FDBA39;
  }
}

body.factlink-site,
body.feedback_form,
body.client {
  .btn-primary,
  .btn-primary:hover {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }

  .btn-primary {
    #gradient > .vertical(#669BBB, @linkColor);
  }

  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.disabled,
  .btn-primary[disabled] {
    background-color: @linkColor;
  }

  @baseButtonHeight: 24px;
  @largeButtonHeight: 30px;

  @baseButtonPadding: 12px;
  @largeButtonPadding: 16px;

  @baseButtonBorderWidth: 2px;
  @largeButtonBorderWidth: 3px;

  @baselinePixelsUp: 1px;

  .button {
    .new-design-font();
    font-size: 13px;
    .border-radius(3px);
    height: @largeButtonHeight;
    line-height: @largeButtonHeight - 2*@baselinePixelsUp;
    padding: 0 @largeButtonPadding;
    border: none;
    border-bottom-width: @largeButtonBorderWidth;
    border-bottom-style: solid;
    transition: all 0.1s;
    background-color: @buttonBackground;
    color: @linkColor;
    text-shadow: 0 1px 0 @buttonTextShadow;
    border-bottom-color: @buttonBorder;
    &:hover {
      background-color: @buttonDarkBackground;
      border-bottom-color: @buttonDarkBorder;
    }
    &:active {
      padding-top: 2px;
      background-color: @buttonDarkBackground;
      border-bottom-color: @buttonDarkBackground;
      box-shadow: inset 0 2px @buttonDarkBorder;
    }
    &.button-loading {
      .background-size(40px 40px);
      .striped(45deg, rgba(0,0,0,0.07));
      .animate-stripes(1.5s);
      color: @mutedFontColor;
    }
  }

  .button-small {
    font-size: 12px;
    height: @baseButtonHeight;
    line-height: @baseButtonHeight - 2*@baselinePixelsUp;
    padding: 0 @baseButtonPadding;
    border-bottom-width: @baseButtonBorderWidth;
    &:active {
      padding-top: 1px;
    }
  }

  .button-confirm {
    background-color: @buttonConfirmBackground;
    color: white;
    text-shadow: 0 1px 0 @buttonConfirmTextShadow;
    border-bottom-color: @buttonConfirmBorder;
    &:hover {
      color: white;
      background-color: @buttonConfirmDarkBackground;
      border-bottom-color: @buttonConfirmDarkBorder;
    }
    &:active {
      background-color: @buttonConfirmDarkBackground;
      border-bottom-color: @buttonConfirmDarkBackground;
      box-shadow: inset 0 2px @buttonConfirmDarkBorder;
    }
    &.button-loading {
      .striped(45deg);
      color: rgba(255,255,255,0.6);
    }
  }

  .button-danger {
    background-color: @buttonDangerBackground;
    color: white;
    text-shadow: 0 1px 0 @buttonDangerTextShadow;
    border-bottom-color: @buttonDangerBorder;
    &:hover {
      color: white;
      background-color: @buttonDangerDarkBackground;
      border-bottom-color: @buttonDangerDarkBorder;
    }
    &:active {
      background-color: @buttonDangerDarkBackground;
      border-bottom-color: @buttonDangerDarkBackground;
      box-shadow: inset 0 2px @buttonDangerDarkBorder;
    }
    &.button-loading {
      .striped(45deg);
      color: rgba(255,255,255,0.6);
    }
  }

  .button-success {
    background-color: @buttonSuccessBackground;
    color: white;
    text-shadow: 0 1px 0 @buttonSuccessTextShadow;
    border-bottom-color: @buttonSuccessBorder;
    &:hover {
      color: white;
      background-color: @buttonSuccessDarkBackground;
      border-bottom-color: @buttonSuccessDarkBorder;
    }
    &:active {
      background-color: @buttonSuccessDarkBackground;
      border-bottom-color: @buttonSuccessDarkBackground;
      box-shadow: inset 0 2px @buttonSuccessDarkBorder;
    }
    &.button-loading {
      .striped(45deg);
      color: rgba(255,255,255,0.6);
    }
  }

  .button-disabled {
    line-height: @baseButtonHeight - 4*@baselinePixelsUp;
    background-color: @buttonDisabledBackground;
    color: @mutedFontColor;
    text-shadow: 0 1px 0 @buttonDisabledTextShadow;
    border-style: solid;
    border-width: @baseButtonBorderWidth;
    border-color: @buttonDisabledBorder;
    &.button-large {
      line-height: @largeButtonHeight - 4*@baselinePixelsUp;
    }
    &:hover {
      cursor: not-allowed;
    }
    &:active {
      padding-top: 0;
    }
    &.button-loading {
      .striped(45deg, rgba(0,0,0,0.04));
      color: @mutedFontColor;
    }
  }

  .button-loading {
    text-shadow: none;
  }

}

@import "bootstrap/mixins";
@import "bootstrap/variables";

body.factlink-site.controller_home,
body.factlink-site.controller_privacy,
body.factlink-site,
body.feedback_form,
body.client {
  .btn {
    display: inline-block;
    padding: 5px 12px;
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    color: @baseFontColor
  }

  .btn-mini {
    padding: 2px 5px;
    font-size: @metaFontSize;
  }
  .btn-action-checked {
    color: @greenLabelColor;
    border: 1px solid @mutedBorderColor;
    background-color: @backgroundGray;
    .box-shadow(inset 0 1px 3px rgba(0,0,0,.06));
    .button-background(@disabledButtonStartColor, @disabledButtonEndColor);
    font-weight: bold;
  }
  .btn-danger {
    color: white;
    background: @dangerButtonColor;
    font-weight:normal;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    .box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05));
  }
}

body.factlink-site.controller_home,
body.factlink-site.controller_privacy {
  .btn-primary,
  .btn-primary:hover {
      text-shadow: 0 1px 0 #feed7b;
      color: #7e582f;
      padding-left: 20px;
      padding-right: 20px;
  }
  .btn-primary {
    #gradient > .vertical(#F8D36D, #FDBA39);
    background-color: #FDBA39;
    border-color: #FDBA39 #FDBA39 #DC941F;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  }
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.disabled,
  .btn-primary[disabled] {
    background-color: #FDBA39;
  }
}

body.factlink-site,
body.feedback_form,
body.client {
  .btn-primary,
  .btn-primary:hover {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }

  .btn-primary {
    #gradient > .vertical(#669BBB, @linkColor);
  }

  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary.active,
  .btn-primary.disabled,
  .btn-primary[disabled] {
    background-color: @linkColor;
  }
}

@baseButtonHeight: 24px;
@largeButtonHeight: 30px;

@baseButtonPadding: 12px;
@largeButtonPadding: 16px;

@baseButtonBorderWidth: 2px;
@largeButtonBorderWidth: 3px;

@baselinePixelsUp: 1px;

.button {
  .new-design-font();
  .border-radius(3px);
  height: @baseButtonHeight;
  line-height: @baseButtonHeight - 2*@baselinePixelsUp;
  padding: 0 @baseButtonPadding;
  border: none;
  border-bottom-width: @baseButtonBorderWidth;
  border-bottom-style: solid;
  transition: all 0.1s;
  background-color: @buttonBackground;
  color: @linkColor;
  text-shadow: 0 1px 0 @buttonTextShadow;
  border-bottom-color: @buttonBorder;
  &:hover {
    background-color: @buttonDarkBackground;
    border-bottom-color: @buttonDarkBorder;
  }
  &:active {
    padding-top: 1px;
    background-color: @buttonDarkBackground;
    border-bottom-color: @buttonDarkBackground;
    box-shadow: inset 0 2px @buttonDarkBorder;
  }
  &.button-loading {
    .background-size(40px 40px);
    .striped(45deg, rgba(0,0,0,0.07));
    .animate-stripes(1.5s);
    color: @mutedFontColor;
  }
}

.button-large {
  font-size: 13px;
  height: @largeButtonHeight;
  line-height: @largeButtonHeight - 2*@baselinePixelsUp;
  padding: 0 @largeButtonPadding;
  border-bottom-width: @largeButtonBorderWidth;
  &:active {
    padding-top: 2px;
  }
}

.button-confirm {
  background-color: @buttonConfirmBackground;
  color: white;
  text-shadow: 0 1px 0 @buttonConfirmTextShadow;
  border-bottom-color: @buttonConfirmBorder;
  &:hover {
    background-color: @buttonConfirmDarkBackground;
    border-bottom-color: @buttonConfirmDarkBorder;
  }
  &:active {
    background-color: @buttonConfirmDarkBackground;
    border-bottom-color: @buttonConfirmDarkBackground;
    box-shadow: inset 0 2px @buttonConfirmDarkBorder;
  }
  &.button-loading {
    .striped(45deg);
    color: rgba(255,255,255,0.6);
  }
}

.button-danger {
  background-color: @buttonDangerBackground;
  color: white;
  text-shadow: 0 1px 0 @buttonDangerTextShadow;
  border-bottom-color: @buttonDangerBorder;
  &:hover {
    background-color: @buttonDangerDarkBackground;
    border-bottom-color: @buttonDangerDarkBorder;
  }
  &:active {
    background-color: @buttonDangerDarkBackground;
    border-bottom-color: @buttonDangerDarkBackground;
    box-shadow: inset 0 2px @buttonDangerDarkBorder;
  }
  &.button-loading {
    .striped(45deg);
    color: rgba(255,255,255,0.6);
  }
}

.button-success {
  background-color: @buttonSuccessBackground;
  color: white;
  text-shadow: 0 1px 0 @buttonSuccessTextShadow;
  border-bottom-color: @buttonSuccessBorder;
  &:hover {
    background-color: @buttonSuccessDarkBackground;
    border-bottom-color: @buttonSuccessDarkBorder;
  }
  &:active {
    background-color: @buttonSuccessDarkBackground;
    border-bottom-color: @buttonSuccessDarkBackground;
    box-shadow: inset 0 2px @buttonSuccessDarkBorder;
  }
  &.button-loading {
    .striped(45deg);
    color: rgba(255,255,255,0.6);
  }
}

.button-disabled {
  line-height: @baseButtonHeight - 4*@baselinePixelsUp;
  background-color: @buttonDisabledBackground;
  color: @mutedFontColor;
  text-shadow: 0 1px 0 @buttonDisabledTextShadow;
  border-style: solid;
  border-width: @baseButtonBorderWidth;
  border-color: @buttonDisabledBorder;
  &.button-large {
    line-height: @largeButtonHeight - 4*@baselinePixelsUp;
  }
  &:hover {
    cursor: not-allowed;
  }
  &:active {
    padding-top: 0;
  }
  &.button-loading {
    .striped(45deg, rgba(0,0,0,0.04));
    color: @mutedFontColor;
  }
}

.button-loading {
  text-shadow: none;
}


Remove unnecessary style

Remove unnecessary style

@aside-menu-width: (@tile * 3);

@new-aside-menu-width: 285px;

@aside-nav-width: @tile;

@em: @baseFontSize;
@cascade-delay: 30ms;
@aside-items: 7;
@aside-transition-speed: 200ms;
@activity-color: fade(@white, 55);
@activity-ico: (@em - 2);
@activity-line: (@em * 1.5);
@activity-toggle: round((@em + (@em / 4) + (1px * 2) + @em + (@em / 2)) * -1);

.inner {
  height: 100vh;

  .app-main {
    .flexy(column);
    overflow: auto;

    transition: margin @aside-transition-speed;
    transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
  }
}

&.ui-v2 {
  .aside-left-nav {
    background: @aside-nav-bg-color-v2;

    hr {
      margin: 0;
      border-top: 1px solid @gray;
    }
  }

  .aside-item {
    opacity: .8;

    &:hover, &:focus {
      opacity: 1;
      background: lighten(@aside-nav-bg-color-v2, 12%);
      box-shadow: none;
    }

    &.logo {
      opacity: 1;
      background: @aside-nav-logo-bg-color-v2;
      box-shadow: none;

      &:hover, &:focus {
        background: lighten(@aside-nav-logo-bg-color-v2, 12%);
      }
    }
  }

  .aside-icon {
    margin: auto;
  }
}

.aside-left-nav {
  width: @aside-nav-width;
  background: @blueDarkest;
  color: fade(@white, 66);
  overflow: visible;

  // Because this div can include elements which stretch across the top and the
  // side of the page, it tends to cover the page. Therefore, we need to make it
  // (but not its children) invisible to the pointer.
  pointer-events: none;

  > * { pointer-events: auto; }

  a {
    outline: none;
    text-decoration: none;

    &:not(:hover) {
      color: inherit;
    }
  }

  .tooltip {
    font-size: @baseFontSize;
    visibility: hidden;
    .tooltip-inner {
      border-radius: (@em * 2);
      padding: (@em / 2) @em;   // BS RESET
    }
    .tooltip-arrow {
      display: none;
    }
    @media screen and ( max-height: 650px ){
      visibility: visible;
    }
  }
}

.app-aside {
  .flex(0 0 auto);
  .flexy(column);
}

.aside-left-nav,
.aside-left-menu {
  .flexy(column);
}

.aside-user.open ~ .aside-activity.open {
  display: none;
}

.aside-left-menu {
  .flex(1 0 1px);
  width: @aside-menu-width;
  box-shadow: 1px 0 @grayBoxBorder;
  overflow: hidden;

  background-color: @white;
  transition: @aside-transition-speed;
  transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);

  .aside-activity {
    color: @grayLight;

    header {
      .box-sizing(border-box);
      .flex(0 0 auto);
      .flexy(baseline, space-between);

      padding: 10px 0;
      border-bottom: solid 1px @border-gray-v2;

      .toggle-sorting {
        .fancy-select();
      }

      .toggle-all-branches {
        .flexy;

        input[type=radio] {
          display: none;

          &:checked + label {
            background-color: rgba(0,0,0, 0.1);
          }
        }

        label {
          width: 40px;
          height: 22px;
          margin: 0;

          line-height: 22px;
          font-weight: normal;
          color: @grayDark;
          text-align: center;

          border-radius: 3px;
          cursor: pointer;
        }
      }
    }
  }

  .aside-activity.ui-v1 {
    ul {
      padding-left: 0;
    }

    &:hover {
      .project-settings-icon {
        svg {
          stroke: @grayLight;
          &:hover {
            stroke: @linkColorHover;
          }
        }
      }
    }
    .status {
      .icon-style(transparent, @activity-ico);
      i {
        &.ico {
          .busy-light {stroke: @blueLight;}
          .pass-light {stroke: @green;}
          .fail-light {stroke: @redLight;}
          .hold-light {stroke: @gray;}
          .stop-light {stroke: @orange;}
          .none-light {stroke: @white;}
          [class$="-light"] {stroke-width: 10;}
        }
      }
    }
    .project {
      a {
        &:not(:hover) {
          color: @grayDark;
        }
      }
    }
  }

  &.ui-v2 {
    width: @new-aside-menu-width;
  }

  &.ui-v1 {
    .aside-activity header {
      height: 70px;
      padding-left: 15px;
      padding-right: 15px;

      align-items: center;

      border-bottom: solid 1px @grayBoxBorder;

      label {
        margin-left: 10px;
      }
    }
  }
}

.aside-item {
  .flex(0 1 @tile);
  .flexy(center, center, column);
  .shadow-noboss();

  background: transparent;
  white-space: nowrap;
  transition: (@aside-transition-speed / 2) ease-in-out;
  min-height: 1.5em;

  &:hover,
  &:focus {
    .shadow-emboss(@blueDarker);
    color: @white;
    background: @blueDarker;
    transition-duration: 0;
  }

  &:active,
  &.open {
    .shadow-deboss(@blueDarkest);
    color: @white;
    background: fade(@black, 8);
    transition-duration: 0;
  }

  &.logo {
    .justify-content(center);
    .underline-deboss();
    min-height: @tile;

    .logomark {
      .flexy(center, center);
      .icon-style(@white, (@em * 2));
      width: @tile;
      min-height: @tile;
    }
  }

  .nav-label {
    font-size: 10px;
    margin-top: 6px;
    text-align: center;
    white-space: normal;
    text-transform: uppercase;

    @media screen and ( max-height: 650px ){
      display: none;
    }
  }

  &.push-to-bottom {
    margin-top: auto;
  }

  &:nth-child(2)  > i {transition-delay: @cascade-delay *  1;}
  &:nth-child(3)  > i {transition-delay: @cascade-delay *  2;}
  &:nth-child(4)  > i {transition-delay: @cascade-delay *  3;}
  &:nth-child(5)  > i {transition-delay: @cascade-delay *  4;}
  &:nth-child(6)  > i {transition-delay: @cascade-delay *  5;}
  &:nth-child(7)  > i {transition-delay: @cascade-delay *  6;}
  &:nth-child(8)  > i {transition-delay: @cascade-delay *  7;}
  &:nth-child(9)  > i {transition-delay: @cascade-delay *  8;}
  &:nth-child(10) > i {transition-delay: @cascade-delay *  9;}
  &:nth-child(11) > i {transition-delay: @cascade-delay * 10;}

  > i {
    font-size: 24px;
    transition: margin @aside-transition-speed;

    @media screen and ( max-height: 650px ){
      font-size: @fontSizeLarge;
    }
  }

  &.unread > i:after {
    position: absolute;
    top: -3px;
    right: -5px;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    content: ' ';
    background-color: @white;
  }

  span {
    opacity: 1;
    visibility: visible;
    transition: visibility 0ms (@aside-transition-speed / 2), opacity (@aside-transition-speed * 2) 0ms;
  }
}

.aside-activity.ui-v1 {
  .flexy(column);
  font-size: @em;
  background: fade(@black, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms, background 400ms, visibility 0ms 1000ms, height 200ms ease-in-out;
  &.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms 100ms, background 200ms, visibility 0ms 0ms, height 200ms ease-in-out;
    height: 100vh;
    .wrapper {
      height: 100vh; // needed to fix safari bug preventing accordion from opening up
    }
  }

  .projects {
    .flex(1 0 1px);
    overflow-y: auto;

    a {
      outline: none;
      text-decoration: none;
      &:not(:hover) {
        color: inherit;
      }
    }
  }
  ul {
    margin: 0;
    list-style: none;
    &:not(.open) {
      li {
        a {
          &.latest {
            .flexy(center, center);
          }
        }
      }
    }
  }
  li {
    .flexy(center, flex-end);
    line-height: @em; // BS RESET
    overflow: hidden;
    &:hover {
      .statuses {
        a {
          &:not(:last-child) {
            transition-delay: 1000ms; // delay meant to give user time to hover over to branch name
          }
        }
        &:hover {
          a {
            &:not(:last-child) {
              width: @activity-ico;
              margin: 0 round((@activity-line - @activity-ico) / 2);
              transition: 100ms 100ms;
            }
            &:hover {
              &:nth-child(-n + 5) {
                path {
                  opacity: 1;
                }
              }
            }
            &:nth-last-of-type(1) path {opacity: .89}
            &:nth-last-of-type(2) path {opacity: .55}
            &:nth-last-of-type(3) path {opacity: .34}
            &:nth-last-of-type(4) path {opacity: .21}
            &:nth-last-of-type(5) path {opacity: .13}
          }
        }
      }
    }
    &:not(:first-of-type) {
      margin: 0 @em;
    }
  }
  .project {
    .flexy(center);
    padding-right: @em;
    width: 100%;
    a {
      height: @activity-line;
      line-height: @activity-line;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:not(:hover) {
        color: fadein(@activity-color, 34);
      }
      &.toggle {
        .box-sizing(border-box);
        .flex(0 0 (@em * 2));
        .icon-style(@grayDark, 100%);
        width: @em * 2;
        height: @em *2;
        padding: 5px; // got this from trial and error
        &:hover {
          .ico {
            .repo {
              fill: @linkColorHover;
            }
          }
        }
        .ico {
          width: 100%;
          height: 100%;
        }
        .ico {
          .repo {
            fill: @grayDark;
          }
        }
      }
      &.title {
        .flex(1 1 auto);
      }
      &.project-settings-icon {
        .flexy(center, center);
        .flex(0 0 auto);

        height: @activity-line;
        line-height: @activity-line;

        svg {
          stroke: fade(@grayLight, 0);
          transition: 200ms;
          path {
            &:first-child {
              stroke-width: 8;
            }
          }
        }
      }
      &.latest {
        .flex(0 0 @activity-ico);
        display: none;

        width: @activity-ico;
        height: @activity-line;
        line-height: @activity-line;
      }
    }
  }
  .branch,
  .statuses {
    a {
      height: @activity-line;
      line-height: @activity-line;
    }
  }
  .branch {
    .flex(0 1 auto);
    .flexy(center);
    a {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
  }
  .statuses {
    .flex(1 0 auto);
    .flexy(center, flex-end);
    a {
      .flexy(center, center);
      overflow: hidden;
      &:not(:last-child) {
        width: 0;
        transition: 400ms;
      }
      &:last-child {
        padding-left: round((@activity-line - @activity-ico) / 2);
      }
    }
  }
  .when {
    .flexy(left, flex-start);
    height: @activity-line;
    line-height: @activity-line;
    font-family: @monoFontFamily;
    font-size: @fontSizeMini;
    color: @grayLight;
  }
}

.ui-v2 {
  .aside-activity.open {
    @border-width: 1px;

    .flexy(column);
    .flex(1 0 1px);

    font-size: 12px;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    // Opt out all s in here from the normal link styles.
    a {
      color: inherit;
      text-decoration: none;
    }

    //
s at this level scroll.
    > ul {
      .flex(1 0 1px);
      overflow-y: auto;
    }

    .projects {
      > li {
        border-top: solid @border-width #c5c5c5;

        &:first-child {
          border-top: none;
        }
      }
    }

    .selectable() {
      &:hover {
        background-color: fade(@white, 60%);
      }

      &.selected {
        background-color: @white;
      }
    }

    .project-heading {
      .flexy;
      .selectable;

      padding: 10px;
      background-color: #eaeaea;

      > .project-name {
        .flex(1 1 auto);
        font-size: 12px;
        font-weight: bold;
        color: @gray-dark-v2;
        &:hover {
          text-decoration: underline;
        }
      }

      &:first-child {
        border-top: none;
      }

      .rotating-chevron {
        margin-right: 10px;
        font-size: 14px;

        &:before {
          vertical-align: bottom;
          line-height: 18px;
          width:18px;
          text-align: center
        }
      }
    }

    .branches > li {
      @border-color-between-branches: #dcdcdc;
      @border-color-above-selected-branch: #e5e5e5;
      @border-color-below-selected-branch: #c5c5c5;

      .selectable;
      position: relative;

      border-top: @border-width solid @border-color-between-branches;

      &:first-child {
        border-top: none;
      }

      &.selected {
        border-top-color: @border-color-above-selected-branch;

        & + li {
          border-top-color: @border-color-below-selected-branch;
        }
      }

      &:hover {
        .branch-name {
          text-decoration: underline;
        }
      }

      .branch {
        .flexy;

        padding: 10px;

        .last-build-status {
          margin-right: 10px;
        }

        .project-name {
          color: @gray-dark-v2;
          font-weight: bold;
        }

        .branch-name {
          color: @gray-dark-v2;
        }

        .last-build-info {
          color: @gray-lighter-v2;
        }
      }

      .project-settings-icon {
        position: absolute;
        top: 10px + @border-width;
        right: 10px;
      }
    }

    .project-settings-icon {
      svg {
        width: 16px;
        height: 16px;

        stroke: fade(@gray-lighter-v2, 0);
        transition: 200ms;

        path {
          &:first-child {
            stroke-width: 8;
          }
        }
      }
    }

    &:hover {
      .project-settings-icon {
        svg {
          stroke: fade(@gray-lighter-v2, 60%);

          &:hover {
            stroke: @gray-lighter-v2;
          }
        }
      }
    }
  }
}

&.ui-v2 .aside-activity .when {
  font-family: @monoFontFamilyV2;
}

.ui-v2 {
  .aside-activity.open {
    margin-left: 15px;
  }

  .aside-left-menu {
    background-color: transparent;
    box-shadow: none;
  }

  .aside-user.open {
    .flex(1 0 1px);
    width: @new-aside-menu-width;
  }

  .aside-user .close-menu {
    // TODO a magic number. the close menu should be removed on completion of v2 anyways.
    height: 47px;
  }
}

.aside-user {
  display: none;
  height: 100%;
  position: relative;

  background: @appBackgroundColor;
  color: @appBackgroundColor;
  box-shadow: 1px 0 @grayBoxBorder;
  transition: (@aside-transition-speed / 2);
  transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);
  overflow: hidden;

  &.open {
    .flexy(column);

    &.ui-v2 {
      width: @new-aside-menu-width;
    }

    width: @aside-menu-width;
    left: 0;
    color: @gray;
    .flex(1 0 1px);

    h5 {
      color: @black;
    }
    .aside-item {
      padding: 0 (@em * 2);
    }
  }
  header {
    .flex(0 0 auto);
    .justify-content(center);
    padding: 0;
  }
  h5 {
    font-weight: normal;
    color: @appBackgroundColor;
    white-space: nowrap;
    transition: (@aside-transition-speed / 2);
    transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);
    width: 100%;
    text-align: center;
    height: @tile;
    line-height: @tile;
    margin: 0;
  }
  .close-menu {
    .flexy(center);
    position: absolute;
    top: 0;
    right: 0;
    height: @tile;
    padding: 0 @em;

    z-index: @zindex-popover;

    &:hover {
      path {
        stroke: @black;
      }
    }
    path {
      stroke: @grayLight;
      stroke-width: 5;
    }
  }
}

.aside-user-options {
  .flex(1);
  .flexy(column);
  overflow-y: auto;

  .aside-item {
    max-height: 3em;
    padding: 0;

    &:hover,
    &:focus {
      color: @grayDarker;
      box-shadow: none;
      background: @grayLightest;
    }

    &a:active {
      &:not(.active) {
        .shadow-deboss(@white);
        color: inherit;
        background: @grayLightest;
      }
    }

    &a.active {
      color: @grayDark;
      background: @grayLightest;
      cursor: default;
    }

    &.aside-heading {
      padding-top: 2em;
      padding-bottom: 1em;
      font-weight: bold;
      color: @gray;
      background: @white;
      box-shadow: none;
    }

    &:last-child {
      margin-bottom: 1em;
    }
  }
}

@aside-menu-width: (@tile * 3);

@new-aside-menu-width: 285px;

@aside-nav-width: @tile;

@em: @baseFontSize;
@cascade-delay: 30ms;
@aside-items: 7;
@aside-transition-speed: 200ms;
@activity-color: fade(@white, 55);
@activity-ico: (@em - 2);
@activity-line: (@em * 1.5);
@activity-toggle: round((@em + (@em / 4) + (1px * 2) + @em + (@em / 2)) * -1);

.inner {
  height: 100vh;

  .app-main {
    .flexy(column);
    overflow: auto;

    transition: margin @aside-transition-speed;
    transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
  }
}

&.ui-v2 {
  .aside-left-nav {
    background: @aside-nav-bg-color-v2;

    hr {
      margin: 0;
      border-top: 1px solid @gray;
    }
  }

  .aside-item {
    opacity: .8;

    &:hover, &:focus {
      opacity: 1;
      background: lighten(@aside-nav-bg-color-v2, 12%);
      box-shadow: none;
    }

    &.logo {
      opacity: 1;
      background: @aside-nav-logo-bg-color-v2;
      box-shadow: none;

      &:hover, &:focus {
        background: lighten(@aside-nav-logo-bg-color-v2, 12%);
      }
    }
  }

  .aside-icon {
    margin: auto;
  }
}

.aside-left-nav {
  width: @aside-nav-width;
  background: @blueDarkest;
  color: fade(@white, 66);
  overflow: visible;

  // Because this div can include elements which stretch across the top and the
  // side of the page, it tends to cover the page. Therefore, we need to make it
  // (but not its children) invisible to the pointer.
  pointer-events: none;

  > * { pointer-events: auto; }

  a {
    outline: none;
    text-decoration: none;

    &:not(:hover) {
      color: inherit;
    }
  }

  .tooltip {
    font-size: @baseFontSize;
    visibility: hidden;
    .tooltip-inner {
      border-radius: (@em * 2);
      padding: (@em / 2) @em;   // BS RESET
    }
    .tooltip-arrow {
      display: none;
    }
    @media screen and ( max-height: 650px ){
      visibility: visible;
    }
  }
}

.app-aside {
  .flex(0 0 auto);
  .flexy(column);
}

.aside-left-nav,
.aside-left-menu {
  .flexy(column);
}

.aside-user.open ~ .aside-activity.open {
  display: none;
}

.aside-left-menu {
  .flex(1 0 1px);
  width: @aside-menu-width;
  box-shadow: 1px 0 @grayBoxBorder;
  overflow: hidden;

  background-color: @white;
  transition: @aside-transition-speed;
  transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);

  .aside-activity {
    color: @grayLight;

    header {
      .box-sizing(border-box);
      .flex(0 0 auto);
      .flexy(baseline, space-between);

      padding: 10px 0;
      border-bottom: solid 1px @border-gray-v2;

      .toggle-sorting {
        .fancy-select();
      }

      .toggle-all-branches {
        .flexy;

        input[type=radio] {
          display: none;

          &:checked + label {
            background-color: rgba(0,0,0, 0.1);
          }
        }

        label {
          width: 40px;
          height: 22px;
          margin: 0;

          line-height: 22px;
          font-weight: normal;
          color: @grayDark;
          text-align: center;

          border-radius: 3px;
          cursor: pointer;
        }
      }
    }
  }

  .aside-activity.ui-v1 {
    ul {
      padding-left: 0;
    }

    &:hover {
      .project-settings-icon {
        svg {
          stroke: @grayLight;
          &:hover {
            stroke: @linkColorHover;
          }
        }
      }
    }
    .status {
      .icon-style(transparent, @activity-ico);
      i {
        &.ico {
          .busy-light {stroke: @blueLight;}
          .pass-light {stroke: @green;}
          .fail-light {stroke: @redLight;}
          .hold-light {stroke: @gray;}
          .stop-light {stroke: @orange;}
          .none-light {stroke: @white;}
          [class$="-light"] {stroke-width: 10;}
        }
      }
    }
    .project {
      a {
        &:not(:hover) {
          color: @grayDark;
        }
      }
    }
  }

  &.ui-v2 {
    width: @new-aside-menu-width;
  }

  &.ui-v1 {
    .aside-activity header {
      height: 70px;
      padding-left: 15px;
      padding-right: 15px;

      align-items: center;

      border-bottom: solid 1px @grayBoxBorder;

      label {
        margin-left: 10px;
      }
    }
  }
}

.aside-item {
  .flex(0 1 @tile);
  .flexy(center, center, column);
  .shadow-noboss();

  background: transparent;
  white-space: nowrap;
  transition: (@aside-transition-speed / 2) ease-in-out;
  min-height: 1.5em;

  &:hover,
  &:focus {
    .shadow-emboss(@blueDarker);
    color: @white;
    background: @blueDarker;
    transition-duration: 0;
  }

  &:active,
  &.open {
    .shadow-deboss(@blueDarkest);
    color: @white;
    background: fade(@black, 8);
    transition-duration: 0;
  }

  &.logo {
    .justify-content(center);
    .underline-deboss();
    min-height: @tile;

    .logomark {
      .flexy(center, center);
      .icon-style(@white, (@em * 2));
      width: @tile;
      min-height: @tile;
    }
  }

  .nav-label {
    font-size: 10px;
    margin-top: 6px;
    text-align: center;
    white-space: normal;
    text-transform: uppercase;

    @media screen and ( max-height: 650px ){
      display: none;
    }
  }

  &.push-to-bottom {
    margin-top: auto;
  }

  &:nth-child(2)  > i {transition-delay: @cascade-delay *  1;}
  &:nth-child(3)  > i {transition-delay: @cascade-delay *  2;}
  &:nth-child(4)  > i {transition-delay: @cascade-delay *  3;}
  &:nth-child(5)  > i {transition-delay: @cascade-delay *  4;}
  &:nth-child(6)  > i {transition-delay: @cascade-delay *  5;}
  &:nth-child(7)  > i {transition-delay: @cascade-delay *  6;}
  &:nth-child(8)  > i {transition-delay: @cascade-delay *  7;}
  &:nth-child(9)  > i {transition-delay: @cascade-delay *  8;}
  &:nth-child(10) > i {transition-delay: @cascade-delay *  9;}
  &:nth-child(11) > i {transition-delay: @cascade-delay * 10;}

  > i {
    position: relative;

    font-size: 24px;

    transition: margin @aside-transition-speed;

    @media screen and ( max-height: 650px ){
      font-size: @fontSizeLarge;
    }
  }

  &.unread > i:after {
    position: absolute;
    top: -3px;
    right: -5px;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    content: ' ';
    background-color: @white;
  }

  span {
    opacity: 1;
    visibility: visible;
    transition: visibility 0ms (@aside-transition-speed / 2), opacity (@aside-transition-speed * 2) 0ms;
  }
}

.aside-activity.ui-v1 {
  .flexy(column);
  font-size: @em;
  background: fade(@black, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms, background 400ms, visibility 0ms 1000ms, height 200ms ease-in-out;
  &.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms 100ms, background 200ms, visibility 0ms 0ms, height 200ms ease-in-out;
    height: 100vh;
    .wrapper {
      height: 100vh; // needed to fix safari bug preventing accordion from opening up
    }
  }

  .projects {
    .flex(1 0 1px);
    overflow-y: auto;

    a {
      outline: none;
      text-decoration: none;
      &:not(:hover) {
        color: inherit;
      }
    }
  }
  ul {
    margin: 0;
    list-style: none;
    &:not(.open) {
      li {
        a {
          &.latest {
            .flexy(center, center);
          }
        }
      }
    }
  }
  li {
    .flexy(center, flex-end);
    line-height: @em; // BS RESET
    overflow: hidden;
    &:hover {
      .statuses {
        a {
          &:not(:last-child) {
            transition-delay: 1000ms; // delay meant to give user time to hover over to branch name
          }
        }
        &:hover {
          a {
            &:not(:last-child) {
              width: @activity-ico;
              margin: 0 round((@activity-line - @activity-ico) / 2);
              transition: 100ms 100ms;
            }
            &:hover {
              &:nth-child(-n + 5) {
                path {
                  opacity: 1;
                }
              }
            }
            &:nth-last-of-type(1) path {opacity: .89}
            &:nth-last-of-type(2) path {opacity: .55}
            &:nth-last-of-type(3) path {opacity: .34}
            &:nth-last-of-type(4) path {opacity: .21}
            &:nth-last-of-type(5) path {opacity: .13}
          }
        }
      }
    }
    &:not(:first-of-type) {
      margin: 0 @em;
    }
  }
  .project {
    .flexy(center);
    padding-right: @em;
    width: 100%;
    a {
      height: @activity-line;
      line-height: @activity-line;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:not(:hover) {
        color: fadein(@activity-color, 34);
      }
      &.toggle {
        .box-sizing(border-box);
        .flex(0 0 (@em * 2));
        .icon-style(@grayDark, 100%);
        width: @em * 2;
        height: @em *2;
        padding: 5px; // got this from trial and error
        &:hover {
          .ico {
            .repo {
              fill: @linkColorHover;
            }
          }
        }
        .ico {
          width: 100%;
          height: 100%;
        }
        .ico {
          .repo {
            fill: @grayDark;
          }
        }
      }
      &.title {
        .flex(1 1 auto);
      }
      &.project-settings-icon {
        .flexy(center, center);
        .flex(0 0 auto);

        height: @activity-line;
        line-height: @activity-line;

        svg {
          stroke: fade(@grayLight, 0);
          transition: 200ms;
          path {
            &:first-child {
              stroke-width: 8;
            }
          }
        }
      }
      &.latest {
        .flex(0 0 @activity-ico);
        display: none;

        width: @activity-ico;
        height: @activity-line;
        line-height: @activity-line;
      }
    }
  }
  .branch,
  .statuses {
    a {
      height: @activity-line;
      line-height: @activity-line;
    }
  }
  .branch {
    .flex(0 1 auto);
    .flexy(center);
    a {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
  }
  .statuses {
    .flex(1 0 auto);
    .flexy(center, flex-end);
    a {
      .flexy(center, center);
      overflow: hidden;
      &:not(:last-child) {
        width: 0;
        transition: 400ms;
      }
      &:last-child {
        padding-left: round((@activity-line - @activity-ico) / 2);
      }
    }
  }
  .when {
    .flexy(left, flex-start);
    height: @activity-line;
    line-height: @activity-line;
    font-family: @monoFontFamily;
    font-size: @fontSizeMini;
    color: @grayLight;
  }
}

.ui-v2 {
  .aside-activity.open {
    @border-width: 1px;

    .flexy(column);
    .flex(1 0 1px);

    font-size: 12px;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    // Opt out all s in here from the normal link styles.
    a {
      color: inherit;
      text-decoration: none;
    }

    //
s at this level scroll.
    > ul {
      .flex(1 0 1px);
      overflow-y: auto;
    }

    .projects {
      > li {
        border-top: solid @border-width #c5c5c5;

        &:first-child {
          border-top: none;
        }
      }
    }

    .selectable() {
      &:hover {
        background-color: fade(@white, 60%);
      }

      &.selected {
        background-color: @white;
      }
    }

    .project-heading {
      .flexy;
      .selectable;

      padding: 10px;
      background-color: #eaeaea;

      > .project-name {
        .flex(1 1 auto);
        font-size: 12px;
        font-weight: bold;
        color: @gray-dark-v2;
        &:hover {
          text-decoration: underline;
        }
      }

      &:first-child {
        border-top: none;
      }

      .rotating-chevron {
        margin-right: 10px;
        font-size: 14px;

        &:before {
          vertical-align: bottom;
          line-height: 18px;
          width:18px;
          text-align: center
        }
      }
    }

    .branches > li {
      @border-color-between-branches: #dcdcdc;
      @border-color-above-selected-branch: #e5e5e5;
      @border-color-below-selected-branch: #c5c5c5;

      .selectable;
      position: relative;

      border-top: @border-width solid @border-color-between-branches;

      &:first-child {
        border-top: none;
      }

      &.selected {
        border-top-color: @border-color-above-selected-branch;

        & + li {
          border-top-color: @border-color-below-selected-branch;
        }
      }

      &:hover {
        .branch-name {
          text-decoration: underline;
        }
      }

      .branch {
        .flexy;

        padding: 10px;

        .last-build-status {
          margin-right: 10px;
        }

        .project-name {
          color: @gray-dark-v2;
          font-weight: bold;
        }

        .branch-name {
          color: @gray-dark-v2;
        }

        .last-build-info {
          color: @gray-lighter-v2;
        }
      }

      .project-settings-icon {
        position: absolute;
        top: 10px + @border-width;
        right: 10px;
      }
    }

    .project-settings-icon {
      svg {
        width: 16px;
        height: 16px;

        stroke: fade(@gray-lighter-v2, 0);
        transition: 200ms;

        path {
          &:first-child {
            stroke-width: 8;
          }
        }
      }
    }

    &:hover {
      .project-settings-icon {
        svg {
          stroke: fade(@gray-lighter-v2, 60%);

          &:hover {
            stroke: @gray-lighter-v2;
          }
        }
      }
    }
  }
}

&.ui-v2 .aside-activity .when {
  font-family: @monoFontFamilyV2;
}

.ui-v2 {
  .aside-activity.open {
    margin-left: 15px;
  }

  .aside-left-menu {
    background-color: transparent;
    box-shadow: none;
  }

  .aside-user.open {
    .flex(1 0 1px);
    width: @new-aside-menu-width;
  }

  .aside-user .close-menu {
    // TODO a magic number. the close menu should be removed on completion of v2 anyways.
    height: 47px;
  }
}

.aside-user {
  display: none;
  height: 100%;
  position: relative;

  background: @appBackgroundColor;
  color: @appBackgroundColor;
  box-shadow: 1px 0 @grayBoxBorder;
  transition: (@aside-transition-speed / 2);
  transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);
  overflow: hidden;

  &.open {
    .flexy(column);

    &.ui-v2 {
      width: @new-aside-menu-width;
    }

    width: @aside-menu-width;
    left: 0;
    color: @gray;
    .flex(1 0 1px);

    h5 {
      color: @black;
    }
    .aside-item {
      padding: 0 (@em * 2);
    }
  }
  header {
    .flex(0 0 auto);
    .justify-content(center);
    padding: 0;
  }
  h5 {
    font-weight: normal;
    color: @appBackgroundColor;
    white-space: nowrap;
    transition: (@aside-transition-speed / 2);
    transition-timing-function: cubic-bezier(0.5, -.25, 0.5, 1.25);
    width: 100%;
    text-align: center;
    height: @tile;
    line-height: @tile;
    margin: 0;
  }
  .close-menu {
    .flexy(center);
    position: absolute;
    top: 0;
    right: 0;
    height: @tile;
    padding: 0 @em;

    z-index: @zindex-popover;

    &:hover {
      path {
        stroke: @black;
      }
    }
    path {
      stroke: @grayLight;
      stroke-width: 5;
    }
  }
}

.aside-user-options {
  .flex(1);
  .flexy(column);
  overflow-y: auto;

  .aside-item {
    max-height: 3em;
    padding: 0;

    &:hover,
    &:focus {
      color: @grayDarker;
      box-shadow: none;
      background: @grayLightest;
    }

    &a:active {
      &:not(.active) {
        .shadow-deboss(@white);
        color: inherit;
        background: @grayLightest;
      }
    }

    &a.active {
      color: @grayDark;
      background: @grayLightest;
      cursor: default;
    }

    &.aside-heading {
      padding-top: 2em;
      padding-bottom: 1em;
      font-weight: bold;
      color: @gray;
      background: @white;
      box-shadow: none;
    }

    &:last-child {
      margin-bottom: 1em;
    }
  }
}