Update style for "active" radio button, strip out unused checkbox css

Summary: {F74532}

Test Plan: On /mission/sat, start a section and click on some different answers

Reviewers: dylan, johnsullivan

Reviewed By: johnsullivan

Subscribers: aria

Differential Revision: http://phabricator.khanacademy.org/D14351

// Override the float: left on input[type=radio]s in the
// #answer_area from khan-exercise.css, because it breaks our
// margin-left: -20px positioning
.perseus-widget-radio,
#answer_area .perseus-widget-radio {
    li span.checkbox input[type=radio] {
        float: none;
        margin: 3px;
    }
}

.perseus-widget-radio {
    // Avoid centering
    width: 100%;

    div,
    div > p {
        /* TODO(alpert): Find a better way of doing inline renderers */
        display: inline;
    }

    li {
        padding: 7px 0;
        margin-left: 20px;

        &.inline {
            display: inline-block;
            padding-left: 20px;
        }

        span.checkbox {
            .perseus-interactive;
            display: inline-block;
            width: 20px;
            margin-left: -20px;
            margin-right: 0;
        }

        div.instructions {
            margin-bottom: 5px;
        }

        .value {
            display: block;
            margin-left: 18px;
            min-height: 22px;
        }

        img, table {
            display: inline-block;
            vertical-align: middle;
        }

        table {
            border: 1px solid #ccc;
        }
    }

   .perseus-radio-clue {
        color: @clueColor;
        display: block;
    }

    .perseus-textarea-pair,
    .perseus-textarea-underlay {
        display: block;
    }
}

// Styles specifically for mobile
body.mobile {
    .framework-perseus #problemarea input[type=radio],
    .framework-perseus #problemarea input[type=checkbox] {
        float: left;
        margin-right: 7px;
    }
    .perseus-widget-radio {
        background: none;
        color: @gray;
        margin-left: 0;

        span.checkbox {
            .perseus-interactive;
            position: absolute;
            margin-right: 26px;
            display: block;
            top: 50%;
            margin: -14px 0 0 0;
            width: auto;
        }

        // General styles for the li
        .perseus-radio-option {
            background: white;
            position: relative;
            border: 2px solid @gray;
            border-radius: 28px;
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            font: 700 14pt/30px "Avenir", "Helvetica", "Arial", sans-serif;
            margin-left: 0;
            margin-bottom: 10px;
            overflow: hidden;
            padding: 8px 10px !important; // Being overwritten by khan-exercises.css

            &:active {
                background-color: @blue;
                border-color: @blue;
                color: white;

                input[type=radio],
                input[type=checkbox] {
                    border-color: @gray;
                    background-color: white;
                }
            }

            &.perseus-radio-selected {
                border-color: @blue;
                color: @blue;
                font-weight: bold;

                &:active {
                    color: white;
                }
            }

            .perseus-radio-option-content {
                margin-left: 40px;
            }
        }

        input[type=radio],
        input[type=checkbox] {
            -webkit-appearance: none;
            appearance: none;
            border: 2px solid @gray;
            border-radius: 25px;
            float: left;
        }

        input[type=radio] {
            height: 25px;
            margin-right: 10px;
            outline: none;
            width: 25px;
            &:checked {
                background: @blue;
                border: 2px solid @blue;
            }
        }

        input[type=checkbox] {
            position: absolute;
            outline: none;

            &:before {
                color: @gray;
                font: 15pt "FontAwesome";
                left: 0;
                position: relative;
                top: 1px;
            }
            &:checked {
                border-color: @blue;
                &:before {
                    color: @blue;
                    content: "\f00c";
                }
            }
        }
    }
}

body.sat-section {
    .framework-perseus #problemarea input[type=radio],
    .framework-perseus #problemarea input[type=checkbox] {
        float: left;
        margin-right: 7px;
    }
    .perseus-widget-radio {
        background: none;
        margin-left: 0;
        margin-top: 24px;

        span.checkbox {
            .perseus-interactive;
            position: absolute;
            display: block;
            top: 50%;
            margin: -16px 0 0 0;
            width: auto;

            &:after {
                color: @satBlue;
                font-family: 'Proxima Nova Semibold';
                font-size: 13px;
                left: 0;
                position: absolute;
                text-align: center;
                top: 7px;
                width: 32px;
            }
        }

        // General styles for the li
        .perseus-radio-option {
            position: relative;
            border-top: 1px solid #ccc;
            &:last-child {
                border-bottom: 1px solid #ccc;
            }
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            margin-left: 0;
            overflow: hidden;
            padding: 17px 14px !important; // Being overwritten by khan-exercises.css

            &.perseus-radio-selected,
            &:active {
                // TODO(kitt): Clean up these decorators.
                border-color: @satBlue;
                span.checkbox:after {
                    color: #fff;
                }
                input[type=radio] {
                    outline: none;
                    background: @satBlue;
                }
                // Make the top border of the next section (which acts
                // as this element's bottom border) the highlight color.
                & + .perseus-radio-option {
                    border-top-color: @satBlue;
                }
            }

            &.perseus-correct {
                color: @satCorrectColor;

                input[type=radio] {
                    // TODO(johnsullivan): support checkbox
                    border-color: @satCorrectColor;

                    &:checked {
                        background: @satCorrectColor;
                    }
                }
            }

            &.perseus-radio-selected.perseus-correct {
                background-color: @satCorrectBackgroundColor;
                border-color: @satCorrectBorderColor;

                & + .perseus-radio-option {
                    border-top-color: @satCorrectBorderColor;
                }
            }

            &.perseus-radio-selected.perseus-incorrect {
                color: @satIncorrectColor;
                background-color: @satIncorrectBackgroundColor;
                border-color: @satIncorrectBorderColor;

                & + .perseus-radio-option {
                    border-top-color: @satIncorrectBorderColor;
                }

                input[type=radio] {
                    // TODO(johnsullivan): support checkbox
                    border-color: @satIncorrectColor;

                    &:checked {
                        background: @satIncorrectColor;
                    }
                }
            }

            &:active {
                background-color: #d0edf4;
            }

            &.perseus-radio-selected {
                background-color: #e4f3f9;

                &:active {
                    background-color: #d0edf4;
                }
            }

            .perseus-radio-option-content {
                display: block;
                margin-left: 45px;
                // Overriding here, not sure why typically set to
                // "cursor: default" in js.
                cursor: inherit !important;
            }

            &:nth-child(1) span.checkbox:after {
                content: 'A';
            }
            &:nth-child(2) span.checkbox:after {
                content: 'B';
            }
            &:nth-child(3) span.checkbox:after {
                content: 'C';
            }
            &:nth-child(4) span.checkbox:after {
                content: 'D';
            }
            &:nth-child(5) span.checkbox:after {
                content: 'E';
            }
        }

        input[type=radio] {
            -webkit-appearance: none;
            appearance: none;
            border: 2px solid @satBlue;
            border-radius: 25px;
            float: left;
            height: 25px;
            width: 25px;
        }
    }
}

// Override the float: left on input[type=radio]s in the
// #answer_area from khan-exercise.css, because it breaks our
// margin-left: -20px positioning
.perseus-widget-radio,
#answer_area .perseus-widget-radio {
    li span.checkbox input[type=radio] {
        float: none;
        margin: 3px;
    }
}

.perseus-widget-radio {
    // Avoid centering
    width: 100%;

    div,
    div > p {
        /* TODO(alpert): Find a better way of doing inline renderers */
        display: inline;
    }

    li {
        padding: 7px 0;
        margin-left: 20px;

        &.inline {
            display: inline-block;
            padding-left: 20px;
        }

        span.checkbox {
            .perseus-interactive;
            display: inline-block;
            width: 20px;
            margin-left: -20px;
            margin-right: 0;
        }

        div.instructions {
            margin-bottom: 5px;
        }

        .value {
            display: block;
            margin-left: 18px;
            min-height: 22px;
        }

        img, table {
            display: inline-block;
            vertical-align: middle;
        }

        table {
            border: 1px solid #ccc;
        }
    }

   .perseus-radio-clue {
        color: @clueColor;
        display: block;
    }

    .perseus-textarea-pair,
    .perseus-textarea-underlay {
        display: block;
    }
}

// Styles specifically for mobile
body.mobile {
    .framework-perseus #problemarea input[type=radio],
    .framework-perseus #problemarea input[type=checkbox] {
        float: left;
        margin-right: 7px;
    }
    .perseus-widget-radio {
        background: none;
        color: @gray;
        margin-left: 0;

        span.checkbox {
            .perseus-interactive;
            position: absolute;
            margin-right: 26px;
            display: block;
            top: 50%;
            margin: -14px 0 0 0;
            width: auto;
        }

        // General styles for the li
        .perseus-radio-option {
            background: white;
            position: relative;
            border: 2px solid @gray;
            border-radius: 28px;
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            font: 700 14pt/30px "Avenir", "Helvetica", "Arial", sans-serif;
            margin-left: 0;
            margin-bottom: 10px;
            overflow: hidden;
            padding: 8px 10px !important; // Being overwritten by khan-exercises.css

            &:active {
                background-color: @blue;
                border-color: @blue;
                color: white;

                input[type=radio],
                input[type=checkbox] {
                    border-color: @gray;
                    background-color: white;
                }
            }

            &.perseus-radio-selected {
                border-color: @blue;
                color: @blue;
                font-weight: bold;

                &:active {
                    color: white;
                }
            }

            .perseus-radio-option-content {
                margin-left: 40px;
            }
        }

        input[type=radio],
        input[type=checkbox] {
            -webkit-appearance: none;
            appearance: none;
            border: 2px solid @gray;
            border-radius: 25px;
            float: left;
        }

        input[type=radio] {
            height: 25px;
            margin-right: 10px;
            outline: none;
            width: 25px;
            &:checked {
                background: @blue;
                border: 2px solid @blue;
            }
        }

        input[type=checkbox] {
            position: absolute;
            outline: none;

            &:before {
                color: @gray;
                font: 15pt "FontAwesome";
                left: 0;
                position: relative;
                top: 1px;
            }
            &:checked {
                border-color: @blue;
                &:before {
                    color: @blue;
                    content: "\f00c";
                }
            }
        }
    }
}

body.sat-section {
    .framework-perseus #problemarea input[type=radio],
    .framework-perseus #problemarea input[type=checkbox] {
        float: left;
        margin-right: 7px;
    }
    .perseus-widget-radio {
        background: none;
        margin-left: 0;
        margin-top: 24px;

        span.checkbox {
            .perseus-interactive;
            position: absolute;
            display: block;
            top: 50%;
            margin: -16px 0 0 0;
            width: auto;

            &:after {
                color: @satBlue;
                font-family: 'Proxima Nova Semibold';
                font-size: 13px;
                left: 0;
                position: absolute;
                text-align: center;
                top: 7px;
                width: 32px;
            }
        }

        // General styles for the li
        .perseus-radio-option {
            position: relative;
            border-top: 1px solid #ccc;
            &:last-child {
                border-bottom: 1px solid #ccc;
            }
            box-sizing: border-box;
            cursor: pointer;
            display: block;
            margin-left: 0;
            overflow: hidden;
            padding: 17px 14px !important; // Being overwritten by khan-exercises.css

            &:active {
                background-color: #f7f7f7;
            }

            &.perseus-radio-selected {
                background-color: #e4f3f9;
                border-color: @satBlue;

                &:active {
                    background-color: #d0edf4;
                }

                span.checkbox:after {
                    color: #fff;
                }

                // Make the top border of the next section (which acts
                // as this element's bottom border) the highlight color.
                & + .perseus-radio-option {
                    border-top-color: @satBlue;
                }
            }

            &.perseus-correct {
                color: @satCorrectColor;

                input[type=radio] {
                    // TODO(johnsullivan): support checkbox
                    border-color: @satCorrectColor;

                    &:checked {
                        background: @satCorrectColor;
                    }
                }
            }

            &.perseus-radio-selected.perseus-correct {
                background-color: @satCorrectBackgroundColor;
                border-color: @satCorrectBorderColor;

                & + .perseus-radio-option {
                    border-top-color: @satCorrectBorderColor;
                }
            }

            &.perseus-radio-selected.perseus-incorrect {
                color: @satIncorrectColor;
                background-color: @satIncorrectBackgroundColor;
                border-color: @satIncorrectBorderColor;

                & + .perseus-radio-option {
                    border-top-color: @satIncorrectBorderColor;
                }

                input[type=radio] {
                    // TODO(johnsullivan): support checkbox
                    border-color: @satIncorrectColor;

                    &:checked {
                        background: @satIncorrectColor;
                    }
                }
            }

            .perseus-radio-option-content {
                display: block;
                margin-left: 45px;
            }

            &:nth-child(1) span.checkbox:after {
                content: 'A';
            }
            &:nth-child(2) span.checkbox:after {
                content: 'B';
            }
            &:nth-child(3) span.checkbox:after {
                content: 'C';
            }
            &:nth-child(4) span.checkbox:after {
                content: 'D';
            }
            &:nth-child(5) span.checkbox:after {
                content: 'E';
            }
        }

        input[type=radio],
        input[type=checkbox] {
            -webkit-appearance: none;
            appearance: none;
            border: 2px solid @satBlue;
            border-radius: 25px;
            float: left;
            height: 25px;
            width: 25px;
        }

        input[type=radio] {
            outline: none;
            &:checked {
                background: @satBlue;
            }
        }

        input[type=checkbox] {
            position: absolute;
            outline: none;

            &:before {
                color: @satBlue;
                font: 15pt "FontAwesome";
                left: 0;
                position: relative;
                top: 1px;
            }
            &:checked {
                border-color: @satBlue;
                &:before {
                    color: @satBlue;
                    content: "\f00c";
                }
            }
        }
    }
}


Lighten pull separators for Kyle

Lighten pull separators for Kyle

@blue:   #3683C5;
@green:  #6CB644;
@yellow: #E7B049;
@red:    #DB524B;

@white:      #FFFFFF;
@light-grey: #F5F5F5;
@grey:       #E7E7E7;
@dark-grey:  #555555;
@black:      #000000;

@background-color: @white;

// Header
@header-background: @light-grey;
@header-border: @grey;

@theme-selector-text: @dark-grey;
@theme-selector-active: @black;
@theme-selector-inactive: @dark-grey;

@brand-color: @dark-grey;
@brand-highlight: @blue;

@global-indicator-text: @dark-grey;
@global-indicator-text-link: @blue;
@global-indicator-count-text: @blue;
@global-indicator-count-border: @white;
@global-indicator-count-background: @white;

// Leaderboard
@leaderboard-background: @light-grey;
@leaderboard-border: @grey;
@leaderboard-title-text: @dark-grey;

@leaderboard-posting-background: @blue;
@leaderboard-posting-count: @white;

@leaderboard-leader-background: @green;
@leaderboard-leader-count: @white;

// Pulls
@panel-ci-blocked-text: @black;
@panel-ci-blocked-background: lighten(@yellow, 15%);
@panel-ci-blocked-border: @yellow;
@panel-ci-blocked-count-text: @black;
@panel-ci-blocked-count-background: lighten(@yellow, 5%);
@panel-ci-blocked-count-border: darken(@yellow, 10%);

@panel-deploy-blocked-text: @black;
@panel-deploy-blocked-background: lighten(@red, 15%);
@panel-deploy-blocked-border: @red;
@panel-deploy-blocked-count-text: @black;
@panel-deploy-blocked-count-background: lighten(@red, 5%);
@panel-deploy-blocked-count-border: darken(@red, 10%);

@panel-ready-text: @black;
@panel-ready-background: lighten(@green, 15%);
@panel-ready-border: @green;
@panel-ready-count-text: @black;
@panel-ready-count-background: lighten(@green, 5%);
@panel-ready-count-border: darken(@green, 10%);

@panel-default-text: @black;
@panel-default-background: @light-grey;
@panel-default-border: darken(@light-grey, 15%);
@panel-default-count-text: @black;
@panel-default-count-background: darken(@light-grey, 15%);
@panel-default-count-border: darken(@light-grey, 15%);

@pull-title: @dark-grey;
@pull-number: @black;
@pull-background: @white;
@pull-background-hover: @light-grey;
@pull-separator: darken(@light-grey, 10%);

// Build statuses
@build-state-pending: @grey;
@build-state-failure: @yellow;
@build-state-error:   @red;
@build-state-success: @green;

@tag-default-border: darken(@light-grey, 10%);
@tag-default-background: @white;

@tag-current-milestone: @blue;
@tag-current-milestone-border: @tag-default-border;
@tag-current-milestone-background: @tag-default-background;

@tag-past-milestone: @red;
@tag-past-milestone-border: @tag-default-border;
@tag-past-milestone-background: @tag-default-background;

@tag-dev-blocked: @yellow;
@tag-dev-blocked-border: @tag-default-border;
@tag-dev-blocked-background: @tag-default-background;

@tag-deploy-blocked: @red;
@tag-deploy-blocked-border: @tag-default-border;
@tag-deploy-blocked-background: @tag-default-background;

@tag-qaing: @green;
@tag-qaing-mine: @blue;
@tag-qaing-border: @tag-default-border;
@tag-qaing-background: @tag-default-background;

@user-icon: @blue;

// CR and QA boxes
@status-background: @white;
@status-border: darken(@light-grey, 10%);
@status-text: @dark-grey;

@status-valid-background: lighten(@green, 35%);
@status-valid-border: @green;
@status-valid-text: @green;

@status-valid-mine-background: lighten(@blue, 35%);
@status-valid-mine-border: @blue;
@status-valid-mine-text: @blue;

// Signatures (CR / QA)
@signature-default: darken(@grey, 10%);
@signature-valid: @green;
@signature-valid-mine: @blue;
@signature-invalid: @yellow;
@signature-invalid-mine: @red;

// On hover signoffs
@signature-separator-border: @grey;
@signature-separator-background: @black;

// Refresh on hover
@refresh-default: darken(@grey, 25%);
@refresh-hover: darken(@blue, 10%);

@blue:   #3683C5;
@green:  #6CB644;
@yellow: #E7B049;
@red:    #DB524B;

@white:      #FFFFFF;
@light-grey: #F5F5F5;
@grey:       #E7E7E7;
@dark-grey:  #555555;
@black:      #000000;

@background-color: @white;

// Header
@header-background: @light-grey;
@header-border: @grey;

@theme-selector-text: @dark-grey;
@theme-selector-active: @black;
@theme-selector-inactive: @dark-grey;

@brand-color: @dark-grey;
@brand-highlight: @blue;

@global-indicator-text: @dark-grey;
@global-indicator-text-link: @blue;
@global-indicator-count-text: @blue;
@global-indicator-count-border: @white;
@global-indicator-count-background: @white;

// Leaderboard
@leaderboard-background: @light-grey;
@leaderboard-border: @grey;
@leaderboard-title-text: @dark-grey;

@leaderboard-posting-background: @blue;
@leaderboard-posting-count: @white;

@leaderboard-leader-background: @green;
@leaderboard-leader-count: @white;

// Pulls
@panel-ci-blocked-text: @black;
@panel-ci-blocked-background: lighten(@yellow, 15%);
@panel-ci-blocked-border: @yellow;
@panel-ci-blocked-count-text: @black;
@panel-ci-blocked-count-background: lighten(@yellow, 5%);
@panel-ci-blocked-count-border: darken(@yellow, 10%);

@panel-deploy-blocked-text: @black;
@panel-deploy-blocked-background: lighten(@red, 15%);
@panel-deploy-blocked-border: @red;
@panel-deploy-blocked-count-text: @black;
@panel-deploy-blocked-count-background: lighten(@red, 5%);
@panel-deploy-blocked-count-border: darken(@red, 10%);

@panel-ready-text: @black;
@panel-ready-background: lighten(@green, 15%);
@panel-ready-border: @green;
@panel-ready-count-text: @black;
@panel-ready-count-background: lighten(@green, 5%);
@panel-ready-count-border: darken(@green, 10%);

@panel-default-text: @black;
@panel-default-background: @light-grey;
@panel-default-border: darken(@light-grey, 15%);
@panel-default-count-text: @black;
@panel-default-count-background: darken(@light-grey, 15%);
@panel-default-count-border: darken(@light-grey, 15%);

@pull-title: @dark-grey;
@pull-number: @black;
@pull-background: @white;
@pull-background-hover: @light-grey;
@pull-separator: darken(@light-grey, 15%);

// Build statuses
@build-state-pending: @grey;
@build-state-failure: @yellow;
@build-state-error:   @red;
@build-state-success: @green;

@tag-default-border: darken(@grey, 10%);
@tag-default-background: @white;

@tag-current-milestone: @blue;
@tag-current-milestone-border: @tag-default-border;
@tag-current-milestone-background: @tag-default-background;

@tag-past-milestone: @red;
@tag-past-milestone-border: @tag-default-border;
@tag-past-milestone-background: @tag-default-background;

@tag-dev-blocked: @yellow;
@tag-dev-blocked-border: @tag-default-border;
@tag-dev-blocked-background: @tag-default-background;

@tag-deploy-blocked: @red;
@tag-deploy-blocked-border: @tag-default-border;
@tag-deploy-blocked-background: @tag-default-background;

@tag-qaing: @green;
@tag-qaing-mine: @blue;
@tag-qaing-border: @tag-default-border;
@tag-qaing-background: @tag-default-background;

@user-icon: @blue;

// CR and QA boxes
@status-background: @white;
@status-border: darken(@grey, 10%);
@status-text: @dark-grey;

@status-valid-background: lighten(@green, 35%);
@status-valid-border: @green;
@status-valid-text: @green;

@status-valid-mine-background: lighten(@blue, 35%);
@status-valid-mine-border: @blue;
@status-valid-mine-text: @blue;

// Signatures (CR / QA)
@signature-default: darken(@grey, 10%);
@signature-valid: @green;
@signature-valid-mine: @blue;
@signature-invalid: @yellow;
@signature-invalid-mine: @red;

// On hover signoffs
@signature-separator-border: @grey;
@signature-separator-background: @black;

// Refresh on hover
@refresh-default: darken(@grey, 25%);
@refresh-hover: darken(@blue, 10%);


[FIX] report: missing css rules since new web_editor

html, body {
    height: 100%;
}

body {
    color: #000 !important;
    word-wrap: break-word;
}
.border-black td {
    border-top: 1px solid black !important;
}
/* See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524 */
.table-condensed {
    > thead > tr > th {
        border-bottom: 1px solid black !important;
    }
    > tbody > tr {
        page-break-inside: avoid !important;
    }
}
.zero_min_height {
    min-height: 0px !important;
}

/* To avoid broken snippets in report rendering */
.jumbotron, .panel, .carousel, section{
    page-break-inside: avoid;
}
/* Wkhtmltopdf doesn't support very well the media-print CSS (depends on the version) */
.hidden-print{
    display: none;
}


[JENKINS-68390] Fixed build number cutoff in build history widget (#6692)

Co-authored-by: Alexander Brandes <960c479dce01ab1c54a97493a690c819cd54ea38@web.de>

@import "../abstracts/theme.less";

#side-panel .pane-frame {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-color: var(--panel-border-color);
  border-width: 1px;
}

#side-panel .pane-header {
  font-size: var(--font-size-sm);
  display: inline-flex;
}

#side-panel .pane-footer {
  font-size: var(--font-size-xs);
}

#side-panel .pane-header, #side-panel .pane-footer {
  color: var(--link-dark-color);
  background-color: var(--panel-header-bg-color);
  border-radius: 0;
  border-width: 1px;
  padding: 0.5rem 1.25rem;
}

#side-panel .pane-header-title {
  display: inline-block;
  flex: 1;
  font-weight: bold;

  & > div {
    font-weight: normal;
  }
}

#side-panel .pane-header .expand, #side-panel .pane-header .collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 0.5rem;

  svg {
    width: 1rem;
    height: 1rem;
  }
}

#side-panel .pane-content {
  font-size: var(--font-size-xs);
}

#side-panel .pane-content .pane {
  font-size: var(--font-size-xs);
  padding: 0.5rem 0.25rem;

  &:first-child {
    padding-left: 1rem;
  }

  &:last-child {
    padding-right: 1rem;
  }
}

#side-panel .pane-content > table {
  padding: 0 1.25rem;
}

#side-panel .pane-content tbody tr {
  &:not(:first-child) {
    border-top: 1px solid var(--panel-border-color);
  }
}

#side-panel .pane-header a, #side-panel .pane-footer a, #side-panel .pane-content a {
  .link-dark();

  text-decoration: underline;
}

#side-panel .pane-header a {
  font-weight: bold;
}

#side-panel .pane-content a {
  font-weight: 600;
}

/**
 * Build Queue
 */
#buildQueue {
  margin-bottom: 1.25rem;
}

/**
 * Executors
 */
#executors th.pane {
  text-align: left;
}

/**
 * Build history
 */
.build-row {
  padding: 3px 4px;
}

.build-row.model-link-active {
  background: var(--very-light-grey) !important;
}

.build-row-cell {
  font-size: var(--font-size-xs);
}

.build-row-cell .pane.build-name {
  width: 30%;
  font-weight: bold;
  vertical-align: top;
}

.build-row-cell .pane.build-details {
  width: 50%;
}

.build-row-cell .pane.build-controls {
  width: 20%;
  text-align: right;
}

.build-row-cell .pane.build-details.block {
  width: 100%;
}

.build-row.multi-line .build-row-cell .pane.build-name.block {
  width: 100%;
}

.build-row-cell .pane.build-controls.block {
  width: 100%;
}

.build-row-cell .pane.build-name .build-icon, .build-row-cell .pane.build-name .display-name {
  display: inline-block;
}

.build-row-cell .pane.build-name .build-icon {
  position: absolute;
  z-index: 1;
}

.build-row-cell .build-stop {
  display: inline-block;
  width: 30%;
}

.build-row-cell .build-badge {
  display: inline-block;
  text-align: right;
  width: 70%;
  padding: 2px 0;
}

.build-row-cell .build-badge > span {
  display: inline-block;
  max-width: 256px;
  padding: 0 1px;
  overflow: hidden;
}

.build-row-cell .build-badge > span + span {
  margin: 0 0 0 2px !important;
}

@media (min-width: 1170px) {
  .build-row-cell .build-badge > span {
    max-width: 296px;
  }
}

.build-row .build-name-controls .pane.build-name, .build-row .build-details-controls .pane.build-details {
  width: 70%;
}

.build-row .build-row-cell .pane, #side-panel .build-row .build-row-cell .pane {
  padding: 0 2px; /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
  display: inline-block;
  overflow: hidden;
}

.build-row.multi-line .build-row-cell .block {
  display: block;
  overflow: auto;
}

.build-row.multi-line .build-row-cell .indent-multiline {
  margin-top: 5px;
}

.build-row.multi-line .build-row-cell .left-bar {
  position: absolute;
  top: 31px;
  bottom: 10px;
  left: 17px;
  border-left: 1px solid var(--medium-grey);
}

.build-row-cell .pane.build-name .display-name {
  margin-left: 20px;
  word-break: break-all;
}

.build-row-cell .indent-multiline {
  padding-left: 20px !important;  /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
}

.build-row.overflow-checked .build-row-cell {
  visibility: visible;
}

.jenkins-pane {
  &__information {
    text-align: center;
    line-height: 80px;
    background-color: var(--panel-header-bg-color);
    margin-top: 10px;
    font-weight: 600;
    border-radius: var(--form-input-border-radius);
  }

  .build-row {
    transition: opacity 0.2s ease;

    &-cell {
      padding: 4px 8px;
    }
  }

  &--loading .build-row {
    opacity: 0.5;
  }
}

.jenkins-pane__header--build-history {
  display: grid;
  grid-template-columns: auto 1fr auto;
  font-weight: bold !important;

  .jenkins-table__cell--tight {
    width: auto;
    margin-right: 1rem;
  }
}

@import "../abstracts/theme.less";

#side-panel .pane-frame {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-color: var(--panel-border-color);
  border-width: 1px;
}

#side-panel .pane-header {
  font-size: var(--font-size-sm);
  display: inline-flex;
}

#side-panel .pane-footer {
  font-size: var(--font-size-xs);
}

#side-panel .pane-header, #side-panel .pane-footer {
  color: var(--link-dark-color);
  background-color: var(--panel-header-bg-color);
  border-radius: 0;
  border-width: 1px;
  padding: 0.5rem 1.25rem;
}

#side-panel .pane-header-title {
  display: inline-block;
  flex: 1;
  font-weight: bold;

  & > div {
    font-weight: normal;
  }
}

#side-panel .pane-header .expand, #side-panel .pane-header .collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 0.5rem;

  svg {
    width: 1rem;
    height: 1rem;
  }
}

#side-panel .pane-content {
  font-size: var(--font-size-xs);
}

#side-panel .pane-content .pane {
  font-size: var(--font-size-xs);
  padding: 0.5rem 0.25rem;

  &:first-child {
    padding-left: 1rem;
  }

  &:last-child {
    padding-right: 1rem;
  }
}

#side-panel .pane-content > table {
  padding: 0 1.25rem;
}

#side-panel .pane-content tbody tr {
  &:not(:first-child) {
    border-top: 1px solid var(--panel-border-color);
  }
}

#side-panel .pane-header a, #side-panel .pane-footer a, #side-panel .pane-content a {
  .link-dark();

  text-decoration: underline;
}

#side-panel .pane-header a {
  font-weight: bold;
}

#side-panel .pane-content a {
  font-weight: 600;
}

/**
 * Build Queue
 */
#buildQueue {
  margin-bottom: 1.25rem;
}

/**
 * Executors
 */
#executors th.pane {
  text-align: left;
}

/**
 * Build history
 */
.build-row {
  padding: 3px 4px;
}

.build-row.model-link-active {
  background: var(--very-light-grey) !important;
}

.build-row-cell {
  font-size: var(--font-size-xs);
}

.build-row-cell .pane.build-name {
  width: 25%;
  font-weight: bold;
  vertical-align: top;
}

.build-row-cell .pane.build-details {
  width: 50%;
}

.build-row-cell .pane.build-controls {
  width: 25%;
  text-align: right;
}

.build-row-cell .pane.build-details.block {
  width: 100%;
}

.build-row.multi-line .build-row-cell .pane.build-name.block {
  width: 100%;
}

.build-row-cell .pane.build-controls.block {
  width: 100%;
}

.build-row-cell .pane.build-name .build-icon, .build-row-cell .pane.build-name .display-name {
  display: inline-block;
}

.build-row-cell .pane.build-name .build-icon {
  position: absolute;
  z-index: 1;
}

.build-row-cell .build-stop {
  display: inline-block;
  width: 30%;
}

.build-row-cell .build-badge {
  display: inline-block;
  text-align: right;
  width: 70%;
  padding: 2px 0;
}

.build-row-cell .build-badge > span {
  display: inline-block;
  max-width: 256px;
  padding: 0 1px;
  overflow: hidden;
}

.build-row-cell .build-badge > span + span {
  margin: 0 0 0 2px !important;
}

@media (min-width: 1170px) {
  .build-row-cell .build-badge > span {
    max-width: 296px;
  }
}

.build-row .build-name-controls .pane.build-name, .build-row .build-details-controls .pane.build-details {
  width: 70%;
}

.build-row .build-row-cell .pane, #side-panel .build-row .build-row-cell .pane {
  padding: 0 2px; /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
  display: inline-block;
  overflow: hidden;
}

.build-row.multi-line .build-row-cell .block {
  display: block;
  overflow: auto;
}

.build-row.multi-line .build-row-cell .indent-multiline {
  margin-top: 5px;
}

.build-row.multi-line .build-row-cell .left-bar {
  position: absolute;
  top: 31px;
  bottom: 10px;
  left: 17px;
  border-left: 1px solid var(--medium-grey);
}

.build-row-cell .pane.build-name .display-name {
  margin-left: 20px;
  word-break: break-all;
}

.build-row-cell .indent-multiline {
  padding-left: 20px !important;  /* Sync changes with func expandControlsTo50Percent in hudson-behavior.js */
}

.build-row.overflow-checked .build-row-cell {
  visibility: visible;
}

.jenkins-pane {
  &__information {
    text-align: center;
    line-height: 80px;
    background-color: var(--panel-header-bg-color);
    margin-top: 10px;
    font-weight: 600;
    border-radius: var(--form-input-border-radius);
  }

  .build-row {
    transition: opacity 0.2s ease;

    &-cell {
      padding: 4px 8px;
    }
  }

  &--loading .build-row {
    opacity: 0.5;
  }
}

.jenkins-pane__header--build-history {
  display: grid;
  grid-template-columns: auto 1fr auto;
  font-weight: bold !important;

  .jenkins-table__cell--tight {
    width: auto;
    margin-right: 1rem;
  }
}


search button styling changes that haven't been tested...

@cs-blue: #3FA9F5;
@cs-accent-blue: #3F7BF5;
@sam-grey: #8a949e;

.filter-panel {
	padding: 8px 8px 8px 8px;
	position: relative;
  	margin: 15px;
  	overflow: hidden;
  	color: @sam-grey;

  	background-color: white;

  	.search-box {
  		padding-bottom: 1.5em;

		.btn {
			// margin-left: 1px; // space between text field and button
			padding: 4px 13px;
			color: white;
			background-color: @cs-blue;
			background-image: -webkit-linear-gradient(top, @cs-accent-blue, @cs-blue);
		}
  	}

  	.advanced-search {
  		padding-bottom: 0.2em;
  	}

  	.attribute {

  		fieldset {
  			border: solid 1px @sam-grey;
  			margin-top: 10px;
  			margin-bottom: 10px;
  		}

  		legend {
  			color: @sam-grey;
  			text-align: left;
  			width: auto;
  			border: none;
  			font-size: 100%;
  			line-height: 0px;
  			margin-left: 3%;
  			margin-right: auto;
  			margin-bottom: 15px;
  			padding-left: 0.5em;
  			padding-right: 0.5em;
  		}
  	}

  	.days{
  		text-align: center;
  		margin: 10px;
		.day {
			text-align: center;
		}
  	}

  	.time {
  		color: @cs-blue;
  		margin-left: 10px;
  	}

  	/** Slider Stylings **/
  	.slider {
  		margin: 10px;
  	}
	.ui-slider {
		position: relative;
		text-align: left;
	 }
	.ui-slider .ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: 0.5em;
		height: 1em;
		cursor: default;
	}
	.ui-slider .ui-slider-range {
		position: absolute;
		z-index: 1;
		font-size: 0.7em;
		display: block;
		border: 0;
		background-position: 0 0;
	}
	.ui-slider-horizontal {
		height: 0.6em;
	}
	.ui-slider-horizontal .ui-slider-handle {
		top: -.3em;
		margin-left: -.6em;
	}
	// slider range background
	.ui-widget-header {
		border: 1px solid @cs-blue;
		background-color: @cs-blue;
		background-image: none;
	}
	// slider hovering style
	.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
		border: 1px solid @cs-blue;
		background-color: @cs-blue * 3;
		background-image: none;
		font-weight: bold;
		color: @sam-grey;
	}
	// slider moving style
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		border: 1px solid @cs-blue;
		background-color: #ffffff;
		background-image: none;
		font-weight: bold;
		color: @cs-blue;
	 }
	// slider hovering around style
	.ui-state-hover a, .ui-state-hover a:hover {
		color: @cs-blue;
		text-decoration: none;
	}
}

@cs-blue: #3FA9F5;
@sam-grey: #8a949e;

.filter-panel {
	padding: 8px 8px 8px 8px;
	position: relative;
  	margin: 15px;
  	overflow: hidden;
  	color: @sam-grey;

  	background-color: white;

  	.search-box {
  		padding-bottom: 1.5em;

		.btn {
			// margin-left: 1px; // space between text field and button
			padding: 4px 13px;
		}
  	}

  	.advanced-search {
  		padding-bottom: 0.2em;
  	}

  	.attribute {

  		fieldset {
  			border: solid 1px @sam-grey;
  			margin-top: 10px;
  			margin-bottom: 10px;
  		}

  		legend {
  			color: @sam-grey;
  			text-align: left;
  			width: auto;
  			border: none;
  			font-size: 100%;
  			line-height: 0px;
  			margin-left: 3%;
  			margin-right: auto;
  			margin-bottom: 15px;
  			padding-left: 0.5em;
  			padding-right: 0.5em;
  		}
  	}

  	.days{
  		text-align: center;
  		margin: 10px;
		.day {
			text-align: center;
		}
  	}

  	.time {
  		color: @cs-blue;
  		margin-left: 10px;
  	}

  	/** Slider Stylings **/
  	.slider {
  		margin: 10px;
  	}
	.ui-slider {
		position: relative;
		text-align: left;
	 }
	.ui-slider .ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: 0.5em;
		height: 1em;
		cursor: default;
	}
	.ui-slider .ui-slider-range {
		position: absolute;
		z-index: 1;
		font-size: 0.7em;
		display: block;
		border: 0;
		background-position: 0 0;
	}
	.ui-slider-horizontal {
		height: 0.6em;
	}
	.ui-slider-horizontal .ui-slider-handle {
		top: -.3em;
		margin-left: -.6em;
	}
	// slider range background
	.ui-widget-header {
		border: 1px solid @cs-blue;
		background-color: @cs-blue;
		background-image: none;
	}
	// slider hovering style
	.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
		border: 1px solid @cs-blue;
		background-color: @cs-blue * 3;
		background-image: none;
		font-weight: bold;
		color: @sam-grey;
	}
	// slider moving style
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
		border: 1px solid @cs-blue;
		background-color: #ffffff;
		background-image: none;
		font-weight: bold;
		color: @cs-blue;
	 }
	// slider hovering around style
	.ui-state-hover a, .ui-state-hover a:hover {
		color: @cs-blue;
		text-decoration: none;
	}
}


show completed icon hex code

show completed icon hex code

@import "foundation.less";

/*

Icons

extended mind uses Icomoon to pack icons to font files. When updating the icons, make sure the character codes (e.g. "\e602") stays the same.

TODO: Icons are not working yet with Phytoplankton
*/

@size-icon-logo: 19px;
@size-icon-menu: 17px;
@size-icon-toggle-completed: 20px;
@size-icon-arrow-small: 11px;
@size-icon-arrow-large: 20px;

// Icon character codes
@icon-show-completed: "\e60e";
@icon-tag: "\e602";
@icon-x: "\e603";
@icon-trash: "\e604";
@icon-menu: "\e605";
@icon-plus: "\e606";
@icon-calendar: "\e607";
@icon-star: "\e608";
@icon-arrow-left: "\e609";
@icon-arrow-right: "\e60c";
@icon-arrow-move: "\e60d";
@icon-triangle-down: "\e600";
@icon-triangle-right: "\e601";
@icon-logo-only: "\e60a";
@icon-logo-with-text: "\e60b";
@icon-selection-checked: "\e60f";
@icon-selection-empty: "\e610";

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot') format('embedded-opentype'),
  url('../fonts/icomoon.woff') format('woff'),
  url('../fonts/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
}

.set-icon-font() {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@import "foundation.less";

/*

Icons

extended mind uses Icomoon to pack icons to font files. When updating the icons, make sure the character codes (e.g. "\e602") stays the same.

TODO: Icons are not working yet with Phytoplankton
*/

@size-icon-logo: 19px;
@size-icon-menu: 17px;
@size-icon-toggle-completed: 20px;
@size-icon-arrow-small: 11px;
@size-icon-arrow-large: 20px;

// Icon character codes
@icon-tag: "\e602";
@icon-x: "\e603";
@icon-trash: "\e604";
@icon-menu: "\e605";
@icon-plus: "\e606";
@icon-calendar: "\e607";
@icon-star: "\e608";
@icon-arrow-left: "\e609";
@icon-arrow-right: "\e60c";
@icon-arrow-move: "\e60d";
@icon-triangle-down: "\e600";
@icon-triangle-right: "\e601";
@icon-logo-only: "\e60a";
@icon-logo-with-text: "\e60b";
@icon-selection-checked: "\e60f";
@icon-selection-empty: "\e610";

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot') format('embedded-opentype'),
  url('../fonts/icomoon.woff') format('woff'),
  url('../fonts/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon.svg?') format('svg');
  font-weight: normal;
  font-style: normal;
}

.set-icon-font() {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


bugfix

bugfix

// LOGIN

@login-content-height: @vertical-grid*5.6;

section#login {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @vertical-grid / 10;
      span {
        width: 200px;
        display: block;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @vertical-grid * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;

    }
    .content {
      height: @login-content-height;
      .button-container{
        padding-top: @vertical-grid;
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

// HOME

section#home {
  header#main-header {
    min-height: @main-header-height;
    #menu-content {
      background-color: white;
      width: auto;
      padding-top: 10px;
      .top-bottom-borders;
      a.collective{
        color: @text-gray;
      }
      a.collective:active{
        color: @active-button;
      }
    }
    nav {
      max-width: @one-column-grid-width;
      text-align: right;
      margin-right: auto;
      margin-left: auto;
      width: inherit;
    }
    button#menu-button{
      .button;
      padding: 10px 0 10px 20px; // increased clicking area
      margin-right: -3px; // aligns menu button to the edge of the column
    }
    button#menu-button:active{
      background-position: 0 0;
    }
  }

  #main-content-container {
    height:100%;
    .banner {
      padding-top: @vertical-grid * 1.5;
      padding-bottom: @vertical-grid / 2;
      span {
        width: 2em;
        .center-horizontally;
        display: block;
        font-size: 2em;
      }
    }
    .content {
      height:inherit;
      padding-top: @vertical-grid / 2;
      padding-bottom: @footer-height + @vertical-grid / 4;
      #omnibar{
        .top-bottom-borders;
        display: table;
        width: 100%;
        div#omni-input-wrapper, div#plus-wrapper{
          vertical-align: middle;
        }
        div#omni-input-wrapper {
          width: 100%;
          display:table-cell;
        }
        div#plus-wrapper {
          display:table-cell;
          width: @plus-button-width;
          line-height: 100%;
          button {
            padding-top: 8px; // quick fix to center the plus button
          }
          // onboarding highlight
          button {
            color: @highlight-button;
          }

          button:disabled {
            color: @inactive-button;
          }
        }
        .input-placeholder {
          color: @highlight-button;
        }
        // Input placeholder browser tweaks
        *::-webkit-input-placeholder {
          .input-placeholder
        }
        *:-moz-placeholder {
          /* FF 4-18 */
          .input-placeholder
        }
        *::-moz-placeholder {
          /* FF 19+ */
          .input-placeholder
        }
        *:-ms-input-placeholder {
          /* IE 10+ */
          .input-placeholder
        }
      }
    }
    div#filtered-items-container {
      height: inherit;
      overflow-y: auto;
    }
  }
}

// TASKS

input[type="checkbox"]:checked ~ .task {
  color:@text-gray;
  .fade-color(@fade-time);
}

// TASKS DATES

section#tasks-dates {
  #date-picker {
    width: 100%;
    overflow-x: auto;
    table {
      max-width: 100%;
      td {
        padding-right: 0.5em;
        a {
          color:@text-gray;
        }
        a:active{
          color:black;
        }
      }
    }
  }
  .inner-slide-content-container{
    padding-bottom: @footer-height;
  }
}

// LOGIN

@login-content-height: @vertical-grid*5.6;

section#login {
  .column {
    overflow-y: auto;
    .banner {
      padding-bottom: @vertical-grid / 10;
      span {
        width: 200px;
        display: block;
        .center-horizontally;
      }
      // Make content a "sticky footer"
      min-height: 100%;
      margin-bottom: -@login-content-height;
      padding-top: @vertical-grid * 1.5;
    }
    .banner:after {
      content: "";
      display: block;
      height: @login-content-height;

    }
    .content {
      height: @login-content-height;
      .button-container{
        padding-top: @vertical-grid;
        padding-bottom: @vertical-grid / 2;
      }
    }
  }
}

// HOME

section#home {
  header#main-header {
    min-height: @main-header-height;
    #menu-content {
      background-color: white;
      width: auto;
      padding-top: 10px;
      .top-bottom-borders;
      a.collective{
        color: @text-gray;
      }
      a.collective:active{
        color: @active-button;
      }
    }
    nav {
      max-width: @one-column-grid-width;
      text-align: right;
      margin-right: auto;
      margin-left: auto;
      width: inherit;
    }
    button#menu-button{
      .button;
      padding: 10px 0 10px 20px; // increased clicking area
      margin-right: -3px; // aligns menu button to the edge of the column
    }
    button#menu-button:active{
      background-position: 0 0;
    }
  }

  #main-content-container {
    height:100%;
    .banner {
      padding-top: @vertical-grid * 1.5;
      padding-bottom: @vertical-grid / 2;
      span {
        width: 2em;
        .center-horizontally;
        display: block;
        font-size: 2em;
      }
    }
    .content {
      height:inherit;
      padding-top: @vertical-grid / 2;
      padding-bottom: @footer-height + @vertical-grid / 4;
      #omnibar{
        .top-bottom-borders;
        display: table;
        width: 100%;
        div#omni-input-wrapper, div#plus-wrapper{
          vertical-align: middle;
        }
        div#omni-input-wrapper {
          width: 100%;
          display:table-cell;
        }
        div#plus-wrapper {
          display:table-cell;
          width: @plus-button-width;
          line-height: 100%;
          button {
            padding-top: 8px; // quick fix to center the plus button
          }
        }

        // Input placeholder browser tweaks

        .input-placeholder {
          color: @highlight-button;
        }

        *::-webkit-input-placeholder {
          .input-placeholder
        }
        *:-moz-placeholder {
          /* FF 4-18 */
          .input-placeholder
        }
        *::-moz-placeholder {
          /* FF 19+ */
          .input-placeholder
        }
        *:-ms-input-placeholder {
          /* IE 10+ */
          .input-placeholder
        }

        button {
          color: @active-button;
        }

        button:disabled {
          color: @inactive-button;
        }
      }
    }
    div#filtered-items-container {
      height: inherit;
      overflow-y: auto;
    }
  }
}

// TASKS

input[type="checkbox"]:checked ~ .task {
  color:@text-gray;
  .fade-color(@fade-time);
}

// TASKS DATES

section#tasks-dates {
  #date-picker {
    width: 100%;
    overflow-x: auto;
    table {
      max-width: 100%;
      td {
        padding-right: 0.5em;
        a {
          color:@text-gray;
        }
        a:active{
          color:black;
        }
      }
    }
  }
  .inner-slide-content-container{
    padding-bottom: @footer-height;
  }
}


Fixing https://github.com/anvaka/pm/issues/10

@font-size: 18px;
@line-height: 1.4;
@lines-to-show: 2;

.node-details {
  width: 395px;
  left: 16px;
  bottom: 12px;
  padding: 12px;
  position: absolute;
  z-index: 1;

  font-family: 'PT Sans', sans-serif;

  background: rgba(0, 0, 0, 0.85);
  border: 1px solid @border-color;
  color: white;

  h4 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: @font-size*@line-height*@lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: @font-size;
  line-height: @line-height;
  -webkit-line-clamp: @lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    margin: 0;
    font-family: 'PT Sans', sans-serif;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
  h2 {
    margin: 0;
    text-align: center;
    font-family: 'PT Sans', sans-serif;
  }
  .small {
    text-align: center;
    color: #999;
  }

  @media (max-width: @screen-sm-min) {
    right: 12px;
    width: inherit;
    .info-block {
      padding-left: 0;
      a {
        display: inline-block;
        margin: 0 7px;
      }
    }
  }
  .info-block {
    a {
      font-size: @font-size;
    }
  }
}

.github-avatar-detail {
  width: 50px;
  margin-left: -16px;
  margin-right: 8px;
  float: left;
}

.node-details {
  width: 395px;
  left: 16px;
  bottom: 12px;
  padding: 12px;
  position: absolute;
  z-index: 1;

  font-family: 'PT Sans', sans-serif;

  background: rgba(0, 0, 0, 0.85);
  border: 1px solid @border-color;
  color: white;

  h4 {
    margin: 0;
    font-family: 'PT Sans', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  h2 {
    margin: 0;
    text-align: center;
    font-family: 'PT Sans', sans-serif;
  }
  .small {
    text-align: center;
    color: #999;
  }

  @media (max-width: @screen-sm-min) {
    right: 12px;
    width: inherit;
    .info-block {
      padding-left: 0;
      a {
        display: inline-block;
        margin: 0 7px;
      }
    }
  }
  .info-block {
    a {
      font-size: 18px;
    }
  }
}

.github-avatar-detail {
  width: 50px;
  margin-left: -16px;
  margin-right: 8px;
  float: left;
}


fix badge style

fix badge style

@badge-prefix-cls: ~"@{css-prefix}badge";
@number-prefix-cls: ~"@{css-prefix}scroll-number";

.@{badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;

  &-count {
    position: absolute;
    transform: translateX(-50%);
    top: -10px;
    height: 20px;
    border-radius: 10px;
    min-width: 20px;
    background: @error-color;
    border: 1px solid transparent;
    color: #fff;
    line-height: 18px;
    text-align: center;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
    transform-origin: -10% center;
    z-index: 10;
    font-family: tahoma;
    box-shadow: 0 0 0 1px #fff;
    a,
    a:hover {
      color: #fff;
    }
  }

  &-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0px center;
    top: -4px;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background: @error-color;
    z-index: 10;
    box-shadow: 0 0 0 1px #fff;
  }

  &-zoom-appear,
  &-zoom-enter {
    animation: antZoomBadgeIn .3s @ease-out-back;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: antZoomBadgeOut .3s @ease-in-back;
    animation-fill-mode: both;
  }

  &-not-a-wrapper &-count {
    top: auto;
    display: block;
    position: relative;
    transform: translateX(0);
  }
}

a & {
  &-count:hover {
    background: tint(@error-color, 20%);
  }
  &-count:active {
    background: shade(@error-color, 5%);
  }
}

.@{number-prefix-cls} {
  overflow: hidden;
  &-only {
    display: inline-block;
    transition: transform .3s @ease-in-out;
  }
}

@keyframes antZoomBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0) translateX(-50%);
  }
  100% {
    transform: scale(1) translateX(-50%);
  }
}

@keyframes antZoomBadgeOut {
  0% {
    transform: scale(1) translateX(-50%);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateX(-50%);
  }
}

@badge-prefix-cls: ~"@{css-prefix}badge";
@number-prefix-cls: ~"@{css-prefix}scroll-number";

.@{badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;

  &-count {
    position: absolute;
    transform: translateX(-50%);
    top: -10px;
    height: 20px;
    border-radius: 10px;
    min-width: 20px;
    background: @error-color;
    border: 1px solid transparent;
    color: #fff;
    line-height: 18px;
    text-align: center;
    padding: 0 6px;
    font-size: 12px;
    white-space: nowrap;
    transform-origin: -10% center;
    z-index: 10;
    font-family: tahoma;
    box-shadow: 0 0 0 1px #fff;
    a,
    a:hover {
      color: #fff;
    }
  }

  &-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0px center;
    top: -4px;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background: @error-color;
    z-index: 10;
    box-shadow: 0 0 0 1px #fff;
  }

  &-zoom-appear,
  &-zoom-enter {
    animation: antZoomBadgeIn .3s @ease-out-back;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: antZoomBadgeOut .3s @ease-in-back;
    animation-fill-mode: both;
  }

  &-not-a-wrapper &-count {
    top: auto;
    display: block;
    position: relative;
    transform: translateX(0);
  }
}

a & {
  &-count:hover {
    background: tint(@error-color, 20%);
  }
  &-count:active {
    background: shade(@error-color, 5%);
  }
}

.@{number-prefix-cls} {
  overflow: hidden;
  &-only {
    display: inline-block;
    transition: transform .3s @ease-in-out;
  }
}

@keyframes antZoomBadgeIn {
  0% {
    opacity: 0;
    transform: scale(0) translateX(-50%);
  }
  100% {
    transform: scale(1) translateX(-50%);
  }
}

@keyframes antZoomBadgeOut {
  0% {
    transform: scale(1) translateX(-50%);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateX(-50%);
  }
}


visual changes to the list items (truncate and enlarge the text, fix spacing of items)

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.truncate () {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atom-git-replay {
  overflow-y: scroll;
  height: 100%;

  .tag,
  .branch,
  .commit {
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 15vw;
    padding: 0 0.5em;
    margin-bottom: 0.25em;
    font-size: 1.25em;
    text-align: left;

    .truncate();
  }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.atom-git-replay {
  overflow-y: scroll;
  height: 100%;

  .tag,
  .branch,
  .commit {
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 15vw;
    padding: 0.25em 0.5em;
    text-align: left;
  }
}


:sparkles: Remove padding from deprecation-overview

To make padding even on all sides with the already existing `.padded` class.

Part of https://github.com/atom/deprecation-cop/pull/59

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.deprecation-cop-status {
  .icon.icon-alert:before {
    // It's a really big icon...
    width: 17px;
  }
}
.deprecation-cop {
  overflow: auto;
  -webkit-flex: 1;
  background-color: @app-background-color !important;

  .deprecation-overview {
    &:after {
      content: '';
      clear: both;
      display: block;
    }
  }

  .deprecation-info {
    padding: 0 @component-padding;
  }

  .deprecation-info:hover {
    background-color: @background-color-selected !important;
  }

  .deprecation-detail.list-item {
    white-space: normal;
    clear: both;

    .deprecation-message {
      padding: 5px 0 5px 28px;
      line-height: 1.4;
      font-size: @font-size;

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

    .icon-alert {
      margin-top: 5px;
      float: left;
    }
  }

  .collapsed > ul {
    display: none;
  }

  .list {
    list-style-type: none;
    padding: 0;
  }

  .stack-trace {
    background-color: @tool-panel-background-color;
    padding: @component-padding;
    margin-bottom: @component-padding;
  }

  a {
    color: @text-color-highlight;
  }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.deprecation-cop-status {
  .icon.icon-alert:before {
    // It's a really big icon...
    width: 17px;
  }
}
.deprecation-cop {
  overflow: auto;
  -webkit-flex: 1;
  background-color: @app-background-color !important;

  .deprecation-overview {
    padding: @component-padding*2 @component-padding @component-padding*2 @component-padding;

    &:after {
      content: '';
      clear: both;
      display: block;
    }
  }

  .deprecation-info {
    padding: 0 @component-padding;
  }

  .deprecation-info:hover {
    background-color: @background-color-selected !important;
  }

  .deprecation-detail.list-item {
    white-space: normal;
    clear: both;

    .deprecation-message {
      padding: 5px 0 5px 28px;
      line-height: 1.4;
      font-size: @font-size;

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

    .icon-alert {
      margin-top: 5px;
      float: left;
    }
  }

  .collapsed > ul {
    display: none;
  }

  .list {
    list-style-type: none;
    padding: 0;
  }

  .stack-trace {
    background-color: @tool-panel-background-color;
    padding: @component-padding;
    margin-bottom: @component-padding;
  }

  a {
    color: @text-color-highlight;
  }
}


Removed buggy resize handle

Removed buggy resize handle

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.live-doc-viewer {
    padding: 2px;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    // resize: vertical;
}

.live-doc-viewer pre {
    padding: 0px;
    min-height: 100%;
}

.doc-view-resize-handle {
    height: 8px;
    position: absolute;
    left: 0;
    right: 0;
    cursor: row-resize;
    z-index: 3;
}

.platform-win32 {
    .doc-view-resize-handle {
        cursor: ns-resize;
    }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.live-doc-viewer {
    padding: 2px;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    resize: vertical;
}

.live-doc-viewer pre {
    padding: 0px;
}

.doc-view-resize-handle {
    height: 8px;
    position: absolute;
    left: 0;
    right: 0;
    cursor: row-resize;
    z-index: 3;
}

.platform-win32 {
    .doc-view-resize-handle {
        cursor: ns-resize;
    }
}


Add styles for column resize handle

Add styles for column resize handle

@import "ui-variables";

.flex-container {
  position: relative;
  width: 100%;
  display: -webkit-flex;
}

.row-number-placeholder {
  padding: 2px 10px;
  text-align: right;
}

//    ######   ######## ##    ## ######## ########     ###    ##
//   ##    ##  ##       ###   ## ##       ##     ##   ## ##   ##
//   ##        ##       ####  ## ##       ##     ##  ##   ##  ##
//   ##   #### ######   ## ## ## ######   ########  ##     ## ##
//   ##    ##  ##       ##  #### ##       ##   ##   ######### ##
//   ##    ##  ##       ##   ### ##       ##    ##  ##     ## ##
//    ######   ######## ##    ## ######## ##     ## ##     ## ########

.table-edit {
  position: relative;
  -webkit-flex-direction: column;
  display: -webkit-flex;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    display: -webkit-flex;
    -webkit-flex: 1;
    border: 1px solid @background-color-highlight;
  }

  .hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
  }

  atom-text-editor {
    position: fixed;
    margin: 1px;

    &::shadow .gutter {
      display: none;
    }
  }

  &.with-editor-gutter atom-text-editor::shadow .gutter {
    display: block;
  }

  &.demo {
    position: absolute;
  }
}

//    ##     ## ########    ###    ########  ######## ########
//    ##     ## ##         ## ##   ##     ## ##       ##     ##
//    ##     ## ##        ##   ##  ##     ## ##       ##     ##
//    ######### ######   ##     ## ##     ## ######   ########
//    ##     ## ##       ######### ##     ## ##       ##   ##
//    ##     ## ##       ##     ## ##     ## ##       ##    ##
//    ##     ## ######## ##     ## ########  ######## ##     ##

.table-edit-header {
  display: -webkit-flex;
  top: 0;
  left: 0;
  right: 0;
  border: 1px solid @background-color-highlight;
  width: 100%;
}

.table-edit-header-content, .table-edit-header-row {
  .flex-container;
}

.table-edit-header-row {
  -webkit-flex: 1;
  cursor: pointer;
}

.table-edit-header-cell {
  position: relative;
}

.table-edit-header-filler {
  .row-number-placeholder;
}

.table-edit-header-filler + * {
  border-left: 1px solid @background-color-highlight;
  margin-left: -1px;
}

.column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 2;
}

//     ######   ##     ## ######## ######## ######## ########
//    ##    ##  ##     ##    ##       ##    ##       ##     ##
//    ##        ##     ##    ##       ##    ##       ##     ##
//    ##   #### ##     ##    ##       ##    ######   ########
//    ##    ##  ##     ##    ##       ##    ##       ##   ##
//    ##    ##  ##     ##    ##       ##    ##       ##    ##
//     ######    #######     ##       ##    ######## ##     ##

.table-edit-gutter {
  display: -webkit-flex;
  position: relative;
  cursor: cell;
}

.table-edit-gutter-filler, .table-edit-header-filler {
  visibility: hidden;
}

.table-edit-row-number {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid @background-color-highlight;
  border-right: 1px solid @background-color-highlight;

  &:nth-child(2) {
    border-top: none;
  }

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

  .row-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    cursor: row-resize;
  }
}

.table-edit-row-number, .table-edit-gutter-filler {
  .row-number-placeholder;
}

//   ########  ##     ## ##       ######## ########   ######
//   ##     ## ##     ## ##       ##       ##     ## ##    ##
//   ##     ## ##     ## ##       ##       ##     ## ##
//   ########  ##     ## ##       ######   ########   ######
//   ##   ##   ##     ## ##       ##       ##   ##         ##
//   ##    ##  ##     ## ##       ##       ##    ##  ##    ##
//   ##     ##  #######  ######## ######## ##     ##  ######

.selection-box {
  position: absolute;
  pointer-events: none;
  border: 1px solid fadeout(@background-color-info, 50%);
}

.selection-box-handle {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  margin-left: -3px;
  background: @background-color-info;

  &:before {
    content: '';
    position: absolute;
    display: block;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    cursor: nwse-resize;
  }
}

.row-resize-ruler {
  position: absolute;
  display: none;
  height: 1px;
  min-width: 1px;
  left: 0;
  right: 0;
  background: @background-color-info;

  &.visible {
    display: block;
  }
}

//   ########   #######  ##      ##  ######
//   ##     ## ##     ## ##  ##  ## ##    ##
//   ##     ## ##     ## ##  ##  ## ##
//   ########  ##     ## ##  ##  ##  ######
//   ##   ##   ##     ## ##  ##  ##       ##
//   ##    ##  ##     ## ##  ##  ## ##    ##
//   ##     ##  #######   ###  ###   ######

.table-edit-content {
  .flex-container;
}

.table-edit-rows {
  position: relative;
  cursor: cell;
  display: -webkit-flex;
  -webkit-flex: 1;
}

.table-edit-row {
  position: absolute;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid @background-color-highlight;

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

//     ######  ######## ##       ##        ######
//    ##    ## ##       ##       ##       ##    ##
//    ##       ##       ##       ##       ##
//    ##       ######   ##       ##        ######
//    ##       ##       ##       ##             ##
//    ##    ## ##       ##       ##       ##    ##
//     ######  ######## ######## ########  ######

.table-edit-cell, .table-edit-header-cell, .table-edit-row-number, .table-edit-gutter-filler, .table-edit-header-filler {
  font-size: 13px;
}
.table-edit-cell, .table-edit-header-cell {
  overflow: hidden;
  float: left;
  text-overflow: ellipsis;
  height: 100%;
  padding: 2px 6px;
  border-left: 1px solid @background-color-highlight;

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

//     ######  ########    ###    ######## ########  ######
//    ##    ##    ##      ## ##      ##    ##       ##    ##
//    ##          ##     ##   ##     ##    ##       ##
//     ######     ##    ##     ##    ##    ######    ######
//          ##    ##    #########    ##    ##             ##
//    ##    ##    ##    ##     ##    ##    ##       ##    ##
//     ######     ##    ##     ##    ##    ########  ######

.active-row {
  background: fadeout(@background-color-success, 95%);
}

.order {
  background: fadeout(@background-color-info, 95%);
}

.table-edit-header-cell.order {
  padding-right: 24px;

  &:after {
    font-family: 'Octicons Regular';
    content: '\f0a3';
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    margin-top: -10px;
  }

  &.descending:after {
    content: '\f0a2';
  }
}

.active-column {
  background: fadeout(@background-color-error, 95%);

  &.order {
    background: screen(fadeout(@background-color-error, 90%), fadeout(@background-color-info, 90%));
  }
}

.table-edit-header-cell.active-column {
  color: @text-color-selected;
}

.table-edit-cell {
  &.selected {
    background: @background-color-highlight;
  }

  &.active {
    background: fadeout(@background-color-warning, 90%);
    color: @text-color-selected;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: 1px solid fadeout(@background-color-warning, 75%);
    }
  }
}

@import "ui-variables";

.flex-container {
  position: relative;
  width: 100%;
  display: -webkit-flex;
}

.row-number-placeholder {
  padding: 2px 10px;
  text-align: right;
}

//    ######   ######## ##    ## ######## ########     ###    ##
//   ##    ##  ##       ###   ## ##       ##     ##   ## ##   ##
//   ##        ##       ####  ## ##       ##     ##  ##   ##  ##
//   ##   #### ######   ## ## ## ######   ########  ##     ## ##
//   ##    ##  ##       ##  #### ##       ##   ##   ######### ##
//   ##    ##  ##       ##   ### ##       ##    ##  ##     ## ##
//    ######   ######## ##    ## ######## ##     ## ##     ## ########

.table-edit {
  position: relative;
  -webkit-flex-direction: column;
  display: -webkit-flex;

  .scroll-view {
    overflow-y: auto;
    overflow-x: hidden;
    display: -webkit-flex;
    -webkit-flex: 1;
    border: 1px solid @background-color-highlight;
  }

  .hidden-input {
    position: absolute;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
  }

  atom-text-editor {
    position: fixed;
    margin: 1px;

    &::shadow .gutter {
      display: none;
    }
  }

  &.with-editor-gutter atom-text-editor::shadow .gutter {
    display: block;
  }

  &.demo {
    position: absolute;
  }
}

//    ##     ## ########    ###    ########  ######## ########
//    ##     ## ##         ## ##   ##     ## ##       ##     ##
//    ##     ## ##        ##   ##  ##     ## ##       ##     ##
//    ######### ######   ##     ## ##     ## ######   ########
//    ##     ## ##       ######### ##     ## ##       ##   ##
//    ##     ## ##       ##     ## ##     ## ##       ##    ##
//    ##     ## ######## ##     ## ########  ######## ##     ##

.table-edit-header {
  display: -webkit-flex;
  top: 0;
  left: 0;
  right: 0;
  border: 1px solid @background-color-highlight;
  width: 100%;
}

.table-edit-header-content, .table-edit-header-row {
  .flex-container;
}

.table-edit-header-row {
  -webkit-flex: 1;
  cursor: pointer;
}

.table-edit-header-filler {
  .row-number-placeholder;
}

.table-edit-header-filler + * {
  border-left: 1px solid @background-color-highlight;
  margin-left: -1px;
}

//     ######   ##     ## ######## ######## ######## ########
//    ##    ##  ##     ##    ##       ##    ##       ##     ##
//    ##        ##     ##    ##       ##    ##       ##     ##
//    ##   #### ##     ##    ##       ##    ######   ########
//    ##    ##  ##     ##    ##       ##    ##       ##   ##
//    ##    ##  ##     ##    ##       ##    ##       ##    ##
//     ######    #######     ##       ##    ######## ##     ##

.table-edit-gutter {
  display: -webkit-flex;
  position: relative;
  cursor: cell;
}

.table-edit-gutter-filler, .table-edit-header-filler {
  visibility: hidden;
}

.table-edit-row-number {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid @background-color-highlight;
  border-right: 1px solid @background-color-highlight;

  &:nth-child(2) {
    border-top: none;
  }

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

  .row-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    cursor: row-resize;
  }
}

.table-edit-row-number, .table-edit-gutter-filler {
  .row-number-placeholder;
}

//   ########  ##     ## ##       ######## ########   ######
//   ##     ## ##     ## ##       ##       ##     ## ##    ##
//   ##     ## ##     ## ##       ##       ##     ## ##
//   ########  ##     ## ##       ######   ########   ######
//   ##   ##   ##     ## ##       ##       ##   ##         ##
//   ##    ##  ##     ## ##       ##       ##    ##  ##    ##
//   ##     ##  #######  ######## ######## ##     ##  ######

.selection-box {
  position: absolute;
  pointer-events: none;
  border: 1px solid fadeout(@background-color-info, 50%);
}

.selection-box-handle {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  margin-left: -3px;
  background: @background-color-info;

  &:before {
    content: '';
    position: absolute;
    display: block;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    cursor: nwse-resize;
  }
}

.row-resize-ruler {
  position: absolute;
  display: none;
  height: 1px;
  min-width: 1px;
  left: 0;
  right: 0;
  background: @background-color-info;

  &.visible {
    display: block;
  }
}

//   ########   #######  ##      ##  ######
//   ##     ## ##     ## ##  ##  ## ##    ##
//   ##     ## ##     ## ##  ##  ## ##
//   ########  ##     ## ##  ##  ##  ######
//   ##   ##   ##     ## ##  ##  ##       ##
//   ##    ##  ##     ## ##  ##  ## ##    ##
//   ##     ##  #######   ###  ###   ######

.table-edit-content {
  .flex-container;
}

.table-edit-rows {
  position: relative;
  cursor: cell;
  display: -webkit-flex;
  -webkit-flex: 1;
}

.table-edit-row {
  position: absolute;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid @background-color-highlight;

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

//     ######  ######## ##       ##        ######
//    ##    ## ##       ##       ##       ##    ##
//    ##       ##       ##       ##       ##
//    ##       ######   ##       ##        ######
//    ##       ##       ##       ##             ##
//    ##    ## ##       ##       ##       ##    ##
//     ######  ######## ######## ########  ######

.table-edit-cell, .table-edit-header-cell, .table-edit-row-number, .table-edit-gutter-filler, .table-edit-header-filler {
  font-size: 13px;
}
.table-edit-cell, .table-edit-header-cell {
  overflow: hidden;
  float: left;
  text-overflow: ellipsis;
  height: 100%;
  padding: 2px 6px;
  border-left: 1px solid @background-color-highlight;

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

//     ######  ########    ###    ######## ########  ######
//    ##    ##    ##      ## ##      ##    ##       ##    ##
//    ##          ##     ##   ##     ##    ##       ##
//     ######     ##    ##     ##    ##    ######    ######
//          ##    ##    #########    ##    ##             ##
//    ##    ##    ##    ##     ##    ##    ##       ##    ##
//     ######     ##    ##     ##    ##    ########  ######

.active-row {
  background: fadeout(@background-color-success, 95%);
}

.order {
  background: fadeout(@background-color-info, 95%);
}

.table-edit-header-cell.order {
  position: relative;
  padding-right: 24px;

  &:after {
    font-family: 'Octicons Regular';
    content: '\f0a3';
    display: inline-block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    margin-top: -10px;
  }

  &.descending:after {
    content: '\f0a2';
  }
}

.active-column {
  background: fadeout(@background-color-error, 95%);

  &.order {
    background: screen(fadeout(@background-color-error, 90%), fadeout(@background-color-info, 90%));
  }
}

.table-edit-header-cell.active-column {
  color: @text-color-selected;
}

.table-edit-cell {
  &.selected {
    background: @background-color-highlight;
  }

  &.active {
    background: fadeout(@background-color-warning, 90%);
    color: @text-color-selected;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: 1px solid fadeout(@background-color-warning, 75%);
    }
  }
}


[INTERNAL] DemoKit: Restrict styles for collapsed element to first children

Problem: When there are nested collapsed element styles for hiding the content
are applyed from first level (first collapsable element) to lower levels (nested collapsible elements)

Solution: Apply styles to direct children only.

BCP: 2070385713
Change-Id: I27e93835ea670cab2bc66f5fa74ff8153848e944


fix: Input.TextArea clear icon disappears (#24360)

* [#24359]: fix this issues

details: https://github.com/ant-design/ant-design/issues/24359

* fix css order

@import './index';

.clear-icon() {
  color: @disabled-color;
  font-size: @font-size-sm;
  // https://github.com/ant-design/ant-design/pull/18151
  // https://codesandbox.io/s/wizardly-sun-u10br
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @text-color-secondary;
  }

  &:active {
    color: @text-color;
  }

  + i {
    margin-left: 6px;
  }

  &-hidden {
    visibility: hidden;
  }
}

// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
  .clear-icon;
  margin: 0 @input-affix-margin;
  vertical-align: -1px;

  &:last-child {
    margin-right: 0;
  }
}

// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
  padding: 0 !important;
  border: 0 !important;
}

.@{ant-prefix}-input-textarea-clear-icon {
  .clear-icon;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 8px 8px 0 0;
}

@import './index';

.clear-icon() {
  color: @disabled-color;
  font-size: @font-size-sm;
  // https://github.com/ant-design/ant-design/pull/18151
  // https://codesandbox.io/s/wizardly-sun-u10br
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @text-color-secondary;
  }

  &:active {
    color: @text-color;
  }

  + i {
    margin-left: 6px;
  }

  &-hidden {
    visibility: hidden;
  }
}

// ========================= Input =========================
.@{ant-prefix}-input-clear-icon {
  .clear-icon;
  margin: 0 @input-affix-margin;
  vertical-align: -1px;

  &:last-child {
    margin-right: 0;
  }
}

// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
  padding: 0 !important;
  border: 0 !important;
}

.@{ant-prefix}-input-textarea-clear-icon {
  .clear-icon;
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 8px 0 0;
}


Hide overflow for screen preview (BL-9352)

@import (reference) "../bloomUI.less";

@media screen {
    body {
        background-color: @bloom-darkestBackground;
    }
}
div.bloom-page.coverColor {
    background-color: @PreviewCoverColor;
}
/*When in preview, people often think they are looking at something edtiable. Give them this visual feedack*/
.disabledVisual {
    cursor: not-allowed;
}
.disabledVisual img {
    opacity: 0.4;
}
/* Some images, like the copyright one, have no src initially. Don't puzzle the user with a missing-image icon.''*/
img[src=""] {
    display: none;
}
.disabledVisual div {
    opacity: 0.4;
    cursor: not-allowed;
}
input {
    border: 1px solid transparent;
}
textarea {
    /*we have javascript function which notices this border and makes it read-only
(which isn't a style, so we can't set it ourselves*/
    border: 1px solid transparent;
}
div.bloom-page {
    border-bottom: 15px solid @bloom-darkestBackground !important;
    /*This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly*/
    background-color: white;
}
@media print {
    div.bloom-page {
        /*This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly
This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly
This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly*/
        border: 0 none @WarningColor !important;
        /*This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly
This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly
This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly
This invisible border is needed to make wkhtml 0.10.0 lay out the pages correctly*/
    }
}
div#formatButton {
    display: none !important;
}
.bloom-page button {
    display: none;
}
/*this is the purple label in the upper-left corner above pages*/
.pageLabel {
    display: none;
}
textarea.coverColor {
    background-color: @PreviewCoverColor;
}
input.coverColor {
    background-color: @PreviewCoverColor;
}
/*this could be placed on an element by hand, but it is notably added by jscript when the element has
a bloom-doNotPublishIfParentOtherwiseEmpty class and the parent is empty*/
*.bloom-hideWhenPublishing,
*.bloom-classSwitchingCombobox {
    visibility: hidden;
}
div.coverBottomBookTopic div.topicN1 {
    border: none;
}

.bloom-draggableLabel {
    /*This matches the width of the dragHandle, which doesn't get added in preview mode
and as a result, the labels are shifted to this many pixels to the width. This shifts them back.*/
    padding-left: 22px;
}

// when making a PDF or a thumbnail, if no image is chosen, just don't show anything
// note that the *= here is needed in case there is a path, as happens in folio pdfs e.g. ../foo/placheholder.png
.hidePlaceHolders img[src*="placeHolder.png"] {
    display: none;
}

// Absolutely positioned elements can show outside the margin box
// because margin box is also absolutely positioned.
// So hide anything overflowing the margin box in the collection preview.
// @media screen ensures we don't mess up full-bleed printing.
@media screen {
    .bloom-page .marginBox {
        overflow: hidden;
    }
}


improved look

improved look

//
// Copyright © 2016-present Kary Foundation, Inc. All Rights Reserved
//   Author: Pouya Kary <k@karyfoundation.org>
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//

//
// ─── VARS ───────────────────────────────────────────────────────────────────────
//

    @open-close-duration: 0.4s;

//
// ─── EDITOR CONTAINER ───────────────────────────────────────────────────────────
//

    #quartet-editor-container {
        height: ~'calc( 100vh - 110px )';
        width: ~'calc( 100vw + 220pt )';
        overflow: hidden;
        display: flex;
    }

//
// ─── QUARTET CODING VIEW ─────────────────────────────────────────────────────────
//

    #quartet-coding-view {
        //transition-duration: @open-close-duration;
        flex: 1;
        height: inherit !important;
        background-color: var( --kary-background );
        width: 100vw;
        max-width: 100vw;
        transition: width @open-close-duration, max-width @open-close-duration;
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    #quartet-console-view {
        -webkit-user-select: none;
        //transition-duration: @open-close-duration;
        flex: 1;
        height: inherit !important;
        max-width: 0;
        background-color: var( --side-console-background );
        box-sizing: border-box;
        overflow: hidden;
        transition: max-width @open-close-duration;
        border-left: 1pt var( --side-console-border-color ) solid;
        color: var( --side-console-title-color );
        min-width: 220pt;
    }

//
// ─── SIDE BAR CONTAINER ─────────────────────────────────────────────────────────
//

    #side-bar-container {
        height: ~'calc( 100vh - 110px )';
        display: flex;
        flex-direction: column;
    }

//
// ─── HIDE CONSOLE ───────────────────────────────────────────────────────────────
//

    .show-console-view {
        #quartet-console-view {
            max-width: 220pt !important;
            transition: max-width @open-close-duration;
            // transition-duration: @open-close-duration;
        }
        #quartet-coding-view {
            //transition-duration: @open-close-duration;
            width: ~'calc( 100vw - 220pt )' !important;
            max-width: ~'calc( 100vw - 220pt )' !important;
            transition: width @open-close-duration, max-width @open-close-duration;
        }
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    .console-sidebar-title {
        font-size: 0.9rem;
        padding: 10pt;
        padding-bottom: 7pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2pt;
    }

//
// ─── CONSOLE CONTENT ────────────────────────────────────────────────────────────
//

    #quartet-console-view-content {
        padding-left: 13pt;
        color: var( --console-regexp );
        width: 200pt;
        font-size: 12pt;
        font-family: @source-code-pro-typeface;
        word-wrap: break-word;
        line-height: 1.8;
        overflow-y: scroll;
        margin-bottom: 13pt;
        max-height: ~'calc( 100% - 30pt )';
        letter-spacing: 2pt;
    }

//
// ─── QUICK TEST VIEW ────────────────────────────────────────────────────────────
//

    #quick-test-view {
        min-height: 140pt;
        overflow: scroll;
    }

//
// ─── CONSOLE NEW TEST ───────────────────────────────────────────────────────────
//

    #console-new-test {
        align-self: flex-end;
        color: var( --kary-green );
    }

// ────────────────────────────────────────────────────────────────────────────────

//
// Copyright © 2016-present Kary Foundation, Inc. All Rights Reserved
//   Author: Pouya Kary <k@karyfoundation.org>
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//

//
// ─── VARS ───────────────────────────────────────────────────────────────────────
//

    @open-close-duration: 0.4s;

//
// ─── EDITOR CONTAINER ───────────────────────────────────────────────────────────
//

    #quartet-editor-container {
        height: ~'calc( 100vh - 110px )';
        width: ~'calc( 100vw + 220pt )';
        overflow: hidden;
        display: flex;
    }

//
// ─── QUARTET CODING VIEW ─────────────────────────────────────────────────────────
//

    #quartet-coding-view {
        //transition-duration: @open-close-duration;
        flex: 1;
        height: inherit !important;
        background-color: var( --kary-background );
        width: 100vw;
        max-width: 100vw;
        transition: width @open-close-duration, max-width @open-close-duration;
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    #quartet-console-view {
        -webkit-user-select: none;
        //transition-duration: @open-close-duration;
        flex: 1;
        height: inherit !important;
        max-width: 0;
        background-color: var( --side-console-background );
        box-sizing: border-box;
        overflow: hidden;
        transition: max-width @open-close-duration;
        border-left: 1pt var( --side-console-border-color ) solid;
        color: var( --side-console-title-color );
        min-width: 220pt;
    }

//
// ─── SIDE BAR CONTAINER ─────────────────────────────────────────────────────────
//

    #side-bar-container {
        height: ~'calc( 100vh - 110px )';
        display: flex;
        flex-direction: column;
    }

//
// ─── HIDE CONSOLE ───────────────────────────────────────────────────────────────
//

    .show-console-view {
        #quartet-console-view {
            max-width: 220pt !important;
            transition: max-width @open-close-duration;
            // transition-duration: @open-close-duration;
        }
        #quartet-coding-view {
            //transition-duration: @open-close-duration;
            width: ~'calc( 100vw - 220pt )' !important;
            max-width: ~'calc( 100vw - 220pt )' !important;
            transition: width @open-close-duration, max-width @open-close-duration;
        }
    }

//
// ─── CONSOLE VIEW ───────────────────────────────────────────────────────────────
//

    .console-sidebar-title {
        font-size: 0.9rem;
        padding: 10pt;
        padding-bottom: 7pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2pt;
    }

//
// ─── CONSOLE CONTENT ────────────────────────────────────────────────────────────
//

    #quartet-console-view-content {
        padding-left: 13pt;
        color: var( --console-regexp );
        width: 200pt;
        font-size: 14pt;
        font-family: @source-code-pro-typeface;
        word-wrap: break-word;
        line-height: 1.8;
        overflow-y: scroll;
        margin-bottom: 13pt;
        max-height: ~'calc( 100% - 30pt )';
    }

//
// ─── QUICK TEST VIEW ────────────────────────────────────────────────────────────
//

    #quick-test-view {
        min-height: 140pt;
        overflow: scroll;
    }

//
// ─── CONSOLE NEW TEST ───────────────────────────────────────────────────────────
//

    #console-new-test {
        align-self: flex-end;
        color: var( --kary-green );
    }

// ────────────────────────────────────────────────────────────────────────────────


style(Tabs): Modify font size.

style(Tabs): Modify font size.

@w-tabs:~ "w-tabs";

.@{w-tabs} {
  &-bar {
    position: relative;
  }
  &-nav {
    position: relative;
  }
  &-item {
    padding: 7px 10px;
    display: inline-block;
    height: 100%;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    &.active {
      color: #008ef0;
    }
    &.disabled {
      cursor: not-allowed;
      user-select: none;
      color: rgba(0, 0, 0, 0.25);
    }
  }
}

.@{w-tabs} {
  &-card &-nav::after,
  &-line &-nav::after {
    content: "";
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
}

.@{w-tabs} {
  &-line &-slide {
    background-color: #108ee9;
    box-sizing: border-box;
    bottom: 0;
    position: absolute;
    height: 1px;
    left: 0;
    width: 20px;
    z-index: 1;
    transition: all 0.3s;
  }
}

.@{w-tabs} {
  &-card &-nav::after {
    content: "";
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
  &-card &-item {
    margin: 0;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    padding: 7px 16px;
    border-radius: 4px 4px 0 0;
    background: #f9f9f9;
    margin-right: 5px;
    bottom: -1px;
  }
  &-card &-item.active {
    background: #fff;
    z-index: 1;
  }
}

@w-tabs:~"w-tabs";

.@{w-tabs} {
  &-bar {
    position: relative;
  }
  &-nav {
    position: relative;
  }
  &-item {
    padding: 7px 10px;
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: all .3s;
    &.active {
      color: #008EF0;
    }
    &.disabled {
      cursor: not-allowed;
      user-select: none;
      color: rgba(0, 0, 0, .25);
    }
  }
}

.@{w-tabs} {
  &-card &-nav::after, &-line &-nav::after {
    content: '';
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
}

.@{w-tabs} {
  &-line &-slide {
    background-color: #108ee9;
    box-sizing: border-box;
    bottom: 0;
    position: absolute;
    height: 1px;
    left: 0;
    width: 20px;
    z-index: 1;
    transition: all .3s;
  }
}

.@{w-tabs} {
  &-card &-nav::after {
    content: '';
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
  &-card &-item {
    margin: 0;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    padding: 7px 16px;
    border-radius: 4px 4px 0 0;
    background: #f9f9f9;
    margin-right: 5px;
    bottom: -1px;
  }
  &-card &-item.active {
    background: #fff;
    z-index: 1;
  }
}


site: tweak logo text

site: tweak logo text

@header-height: 64px;
@menu-item-border: 2px;

#header {
  transition: all 0.3s;
  background: #fff;
  box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
  position: relative;
  z-index: 10;

  &.home-nav-bottom {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: #ebedee;
    .search {
      border-left-color: #ebedee;
    }
    a {
      color: @site-text-color;
    }
  }

  .header-link {
    color: @site-text-color;
  }

  .ant-menu-item-active .header-link {
    color: @primary-color;
  }
}

#logo {
  overflow: hidden;
  padding-left: 40px;
  float: left;
  height: @header-height;
  line-height: @header-height;
  text-decoration: none;
  white-space: nowrap;
  img {
    height: 32px;
    margin-right: 16px;
  }
  img + img {
    height: 16px;
    position: relative;
    top: 1px;
  }
}

#search-box {
  border-left: 1px solid #ebedee;
  float: left;
  height: 22px;
  line-height: 22px;
  padding-left: 16px;
  margin: 22px auto 0;
}

#search-box .anticon {
  color: #ced4d9;
  position: relative;
  top: 0.5px;
}

#search-box .ant-select {
  font-size: 14px;
  margin-top: -5px;
  width: 200px;
}

#search-box .ant-select-selection {
  border: 0;
  box-shadow: none;
}

#search-box .ant-input {
  border: 0;
  box-shadow: none;
}

.header-lang-button,
.version {
  float: right;
  margin-top: 20px;
  margin-left: 16px;
}

.header-lang-button {
  color: @text-color;
  border-color: @border-color-base;
  margin-right: 40px;
}

#nav {
  border: 0;
  float: right;
  font-size: 14px;
  font-family: Lato, @font-family;
  &.ant-menu-horizontal {
    border-bottom: none;

    & > .ant-menu-item {
      height: @header-height;
      line-height: @header-height - @menu-item-border - 2px;
      min-width: 72px;
      border-top: @menu-item-border solid transparent;

      &:hover {
        border-top: @menu-item-border solid @primary-color;
        border-bottom: @menu-item-border solid transparent;
      }
    }

    & > .ant-menu-item-selected {
      border-top: @menu-item-border solid @primary-color;
      border-bottom: @menu-item-border solid transparent;
      a {
        color: @primary-color;
      }
    }
  }

  & > .ant-menu-item {
    text-align: center;
  }
}

.component-select {
  &.ant-select-dropdown {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    font-size: 14px;
  }
  .ant-select-dropdown-menu {
    max-height: 200px;
  }
  .ant-select-dropdown-menu-item {
    border-radius: 0 !important;
  }
  .ant-component-decs {
    font-size: 12px;
    position: absolute;
    color: #aaa;
    right: 16px;
  }
}

@header-height: 64px;
@menu-item-border: 2px;

#header {
  transition: all 0.3s;
  background: #fff;
  box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
  position: relative;
  z-index: 10;

  &.home-nav-bottom {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: #ebedee;
    .search {
      border-left-color: #ebedee;
    }
    a {
      color: @site-text-color;
    }
  }

  .header-link {
    color: @site-text-color;
  }

  .ant-menu-item-active .header-link {
    color: @primary-color;
  }
}

#logo {
  overflow: hidden;
  padding-left: 40px;
  float: left;
  height: @header-height;
  line-height: @header-height;
  text-decoration: none;
  white-space: nowrap;
  img {
    height: 32px;
    margin-right: 16px;
  }
  img + img {
    height: 16px;
  }
}

#search-box {
  border-left: 1px solid #ebedee;
  float: left;
  height: 22px;
  line-height: 22px;
  padding-left: 16px;
  margin: 22px auto 0;
}

#search-box .anticon {
  color: #ced4d9;
  position: relative;
  top: 0.5px;
}

#search-box .ant-select {
  font-size: 14px;
  margin-top: -5px;
  width: 200px;
}

#search-box .ant-select-selection {
  border: 0;
  box-shadow: none;
}

#search-box .ant-input {
  border: 0;
  box-shadow: none;
}

.header-lang-button,
.version {
  float: right;
  margin-top: 20px;
  margin-left: 16px;
}

.header-lang-button {
  color: @text-color;
  border-color: @border-color-base;
  margin-right: 40px;
}

#nav {
  border: 0;
  float: right;
  font-size: 14px;
  font-family: Lato, @font-family;
  &.ant-menu-horizontal {
    border-bottom: none;

    & > .ant-menu-item {
      height: @header-height;
      line-height: @header-height - @menu-item-border - 2px;
      min-width: 72px;
      border-top: @menu-item-border solid transparent;

      &:hover {
        border-top: @menu-item-border solid @primary-color;
        border-bottom: @menu-item-border solid transparent;
      }
    }

    & > .ant-menu-item-selected {
      border-top: @menu-item-border solid @primary-color;
      border-bottom: @menu-item-border solid transparent;
      a {
        color: @primary-color;
      }
    }
  }

  & > .ant-menu-item {
    text-align: center;
  }
}

.component-select {
  &.ant-select-dropdown {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    font-size: 14px;
  }
  .ant-select-dropdown-menu {
    max-height: 200px;
  }
  .ant-select-dropdown-menu-item {
    border-radius: 0 !important;
  }
  .ant-component-decs {
    font-size: 12px;
    position: absolute;
    color: #aaa;
    right: 16px;
  }
}


Delete list.less

Delete list.less

// List Icons
// -------------------------

.@{fa-css-prefix}-ul {
  padding-left: 0;
  margin-left: @fa-li-width;
  list-style-type: none;
  > li { position: relative; }
}
.@{fa-css-prefix}-li {
  position: absolute;
  left: -@fa-li-width;
  width: @fa-li-width;
  top: (2em / 14);
  text-align: center;
  &.@{fa-css-prefix}-lg {
    left: (-@fa-li-width + (4em / 14));
  }
}