re-word rule's description

re-word rule's description

.performance-report {
  // negates bottom padding on body to eliminate scrollbar
  margin-bottom: -50px;
  .nav-tabs {
    .tutor-nav-tabs();
    margin-bottom: 20px;

    li.active {
      border: 1px solid @nav-tabs-border-color;
      border-bottom: none;
    }
  }
  &.panel {
    max-width: 100%;
  }
  .course-performance-title {
    font-size: 3rem;
    padding-bottom: 20px;
    display: inline-block;
  }
  .course-performance-container {
    overflow: hidden;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }

  // removes the display as table, table-row & table-cell
  // from the wrappers so the "width:100%" rule is effective on .header-cell
  .public_fixedDataTable_header {
    .public_fixedDataTableCell_wrap1,
    .public_fixedDataTableCell_wrap2,
    .public_fixedDataTableCell_wrap3 {
      display: block;
      width: 100%;
    }
  }

  .header-cell {
    .no-select();
    cursor: pointer;
    background: @tutor-white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    position: relative;
    &.is-ascending,
    &.is-descending {
      padding-right: 20px;
      &:after {
        position: absolute;
        right: 8px;
        top: 15px;
        .fa-icon();
      }
    }
    &.is-ascending:after  { content: @fa-var-sort-asc;  }
    &.is-descending:after { content: @fa-var-sort-desc; }
  }

  i.late {
    .tutor-late-icon();
    padding-left:8px;
  }
  .assignment-header-cell {
    background: @tutor-neutral-light;
    time {
      &:before {
        content: "Due:";
        margin-right: 0.5rem;
      }
    }
    .review-plan {
      float: right;
      margin-right: 1rem;
    }

    span.review-plan {
      color: @tutor-neutral;
    }
  }

}

.performance-report {
  // negates bottom padding on body to eliminate scrollbar
  margin-bottom: -50px;
  .nav-tabs {
    .tutor-nav-tabs();
    margin-bottom: 20px;

    li.active {
      border: 1px solid @nav-tabs-border-color;
      border-bottom: none;
    }
  }
  &.panel {
    max-width: 100%;
  }
  .course-performance-title {
    font-size: 3rem;
    padding-bottom: 20px;
    display: inline-block;
  }
  .course-performance-container {
    overflow: hidden;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
  }

  // removes the display as table, table-row, & table-cell
  // from the wrappers so the header-cell below can set
  // it's width to 100% with text-overflow: ellipsis;
  .public_fixedDataTable_header {
    .public_fixedDataTableCell_wrap1,
    .public_fixedDataTableCell_wrap2,
    .public_fixedDataTableCell_wrap3 {
      display: block;
      width: 100%;
    }
  }

  .header-cell {
    .no-select();
    cursor: pointer;
    background: @tutor-white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    position: relative;
    &.is-ascending,
    &.is-descending {
      padding-right: 20px;
      &:after {
        position: absolute;
        right: 8px;
        top: 15px;
        .fa-icon();
      }
    }
    &.is-ascending:after  { content: @fa-var-sort-asc;  }
    &.is-descending:after { content: @fa-var-sort-desc; }
  }

  i.late {
    .tutor-late-icon();
    padding-left:8px;
  }
  .assignment-header-cell {
    background: @tutor-neutral-light;
    time {
      &:before {
        content: "Due:";
        margin-right: 0.5rem;
      }
    }
    .review-plan {
      float: right;
      margin-right: 1rem;
    }

    span.review-plan {
      color: @tutor-neutral;
    }
  }

}


fix index.less new line issue

fix index.less new line issue

@import 'portalMode/_index';
@import 'output/_index';
@import 'users/tokens/_index';


Fix #5530 "Error Summary links appear "dirty""

// Copyright (C) 2014 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference)  "../../../apps/fr/style/form-runner-common";

.orbeon .xbl-fr-error-summary {

    clear: both;
    width: 100%;
    padding: 0;
    margin-top: 4px; // margin needed so that error for reCAPTCHA doesn't touch

    .fr-error-summary-body {
        display: block;
        padding: 0;
    }

    .fr-error-title {
        display: block;
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 5px 10px;
        color: white;
    }

    .fr-show-more-errors {
        margin-right: 10px;
    }

    // Multiple levels can be mixed so make sure the strongest wins
    .fr-level-info    > .fr-error-title { background-color: @info; }
    .fr-level-warning > .fr-error-title { background-color: @warning; }
    .fr-level-error   > .fr-error-title { background-color: @error; }

    .fr-error-group {

        margin: 5px 0;

        .xforms-mediatype-text-html, .xforms-mediatype-text-html .xforms-output-output {
            display: inline;
        }

        &> li {
            border: 2px solid;
            padding: 10px;
            margin-bottom: 5px;
            list-style-position: inside;
            background-color: white;

            // Multiple levels can be mixed so make sure the strongest wins
            &.fr-level-info    { border-color: @info; }
            &.fr-level-warning { border-color: @warning; }
            &.fr-level-error   { border-color: @error; }
        }

        .fr-error-number {
            display: none;
        }

        .fr-error-link {
            display: inline;
        }

        .btn-link {
            text-decoration: none;
        }

        .fr-error-label, .fr-error-alert {
            text-decoration: underline;
        }

        .fr-error-label:not(:empty):after {
            content: ": "
        }

        .fr-error-alert {
            ul {
                list-style-type: square;
                margin-bottom: 0;
            }
        }

        // Make label and alert both the same color
        //
        .fr-level-info {
            .fr-error-label, .fr-error-alert {
                color: @info
            }
        }
        .fr-level-warning {
            .fr-error-label, .fr-error-alert {
                color: @warning
            }
        }
        .fr-level-error {
            .fr-error-label, .fr-error-alert {
                color: @error
            }
        }
    }
}

// Copyright (C) 2014 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference)  "../../../apps/fr/style/form-runner-common";

.orbeon .xbl-fr-error-summary {

    clear: both;
    width: 100%;
    padding: 0;
    margin-top: 4px; // margin needed so that error for reCAPTCHA doesn't touch

    .fr-error-summary-body {
        display: block;
        padding: 0;
    }

    .fr-error-title {
        display: block;
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 5px 10px;
        color: white;
    }

    .fr-show-more-errors {
        margin-right: 10px;
    }

    // Multiple levels can be mixed so make sure the strongest wins
    .fr-level-info    > .fr-error-title { background-color: @info; }
    .fr-level-warning > .fr-error-title { background-color: @warning; }
    .fr-level-error   > .fr-error-title { background-color: @error; }

    .fr-error-group {

        margin: 5px 0;

        .xforms-mediatype-text-html, .xforms-mediatype-text-html .xforms-output-output {
            display: inline;
        }

        &> li {
            border: 2px solid;
            padding: 10px;
            margin-bottom: 5px;
            list-style-position: inside;
            background-color: white;

            // Multiple levels can be mixed so make sure the strongest wins
            &.fr-level-info    { border-color: @info; }
            &.fr-level-warning { border-color: @warning; }
            &.fr-level-error   { border-color: @error; }
        }

        .fr-error-number {
            display: none;
        }

        .fr-error-link {
            display: inline;
        }

        .fr-error-label, .fr-error-alert {
            text-decoration: underline;
        }

        .fr-error-label:not(:empty):after {
            content: ": "
        }

        .fr-error-alert {
            ul {
                list-style-type: square;
                margin-bottom: 0;
            }
        }

        // Make label and alert both the same color
        //
        .fr-level-info {
            .fr-error-label, .fr-error-alert {
                color: @info
            }
        }
        .fr-level-warning {
            .fr-error-label, .fr-error-alert {
                color: @warning
            }
        }
        .fr-level-error {
            .fr-error-label, .fr-error-alert {
                color: @error
            }
        }
    }
}


Widen the width of the menu

Widen the width of the menu

The main menu in LG viewport would not fit the six possible menu entries. In order to fit them, the container width was increased to 1190px.

See:
https://www.pivotaltracker.com/story/show/163391235/comments/198940053

@import "../../../../../../../vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/bootstrap-fontawesome.less";

// overriding the font path for correct loading.
@FontAwesomePath: "/fonts";
@fa-font-path: "/fonts";

// This override of the mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/font-awesome/path.less
// prevents loading of the none existing woff2 file that resulted in four oh fours.
@font-face {
    font-family: 'FontAwesome';
    src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
    src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
    font-weight: normal;
    font-style: normal;
}

.progress-steps {
    font-size: 110%;
}

div.page-header {
    img.logo {
        max-width: 180px;
        max-height: 90px;
    }
}

table.orderable th {
    color: @brand-primary;
}

.ra-start-vetting-procedure-container {
    margin: 3em auto;
    max-width: 500px;

    form[name="ra_start_vetting_procedure"] {

        margin-bottom: 1em;

        input[name="ra_start_vetting_procedure[registrationCode]"] {
            min-width: 220px;
            text-transform: uppercase;
        }

        ::-webkit-input-placeholder { text-transform: none; }
        :-moz-placeholder { text-transform: none; }
        ::-moz-placeholder { text-transform: none; }
        :-ms-input-placeholder { text-transform: none; }
    }

    p {
        color: #999999;
    }
}

form[name="ra_verify_yubikey_public_id"] {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    > .form-group > .col-sm-9 {
        float: none;
        margin: 0 auto;
    }
}

div.form-ra-verify-identity {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    .left-aligned {
        padding-left: 24px;
        text-align: left;
    }

    table tbody tr th.half-width, table tbody tr td.half-width {
      width: 50%;
    }

    .form-group-verify-identity {
        margin-top: 2em;
        text-align: center;

        label {

            font-weight: bold;
        }
    }
}

div.form-ra-create-ra, div.form-ra-amend-ra-info, div.form-ra-change-role {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    .control-text {
        padding-top: 7px;
    }
}

div.emulate-form-layout {
    .control-text {
        padding-top: 7px;
    }
}

.question {
    padding: 15px;
}

div.form-ra-send-sms-challenge {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    form {
        text-align: center;
    }
}

div.form-retract-registration-authority {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    button {
        margin-left: 1em;
    }
}

form[name="ra_verify_phone_number"] {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    input[type="text"] {
        font-family: "Monaco", "Inconsolata", "Consolas", monospace;
        text-transform: uppercase;
    }
}
.search-second-factors {
    form[name="ra_search_ra_second_factors"] {
        input#ra_search_ra_second_factors_name {
            max-width: 300px;
        }
        input#ra_search_ra_second_factors_secondFactorId {
            max-width: 200px;
        }
        input#ra_search_ra_second_factors_email {
            max-width: 350px;
        }
        select {
            max-width: 175px;
        }
        button#ra_search_ra_second_factors_export {
            margin-left: 0.5em;
        }
        div.button-group {
            margin-left: 25%;
            div.form-group {
                margin-right: 14px;
                float: left;
                button:first-child {
                    margin-left: 8px;
                }
            }
        }
    }
    td.button-column {
        .audit-log, .revoke {
            margin: 0px 3px 3px 3px;
        }
    }
}

form[name="ra_search_ra_candidates"] {
    input#ra_search_ra_candidates_name {
        max-width: 300px;
    }
    input#ra_search_ra_candidates_email {
        max-width: 300px;
    }
    input#ra_search_ra_candidates_institution {
        max-width: 300px;
    }
}

form[name="logout"] button {
    line-height: 26px;
}

form[name="stepup_switch_locale"] {
        .pull-right();
}
select[name="stepup_switch_locale[locale]"] {
    min-width: 150px;
}

.hidden {
    display: none;
}

.container {
    @media (min-width: @screen-lg-min) {
        width: 1190px;
    }
}

.container-cancel-vetting {
    text-align: center;
}

.generate-progress(100);

.generate-progress(@n, @i: 0) when (@i =< @n) {
    .progress-@{i} {
        width: (@i * 1%);
    }
    .generate-progress(@n, (@i + 5));
}

.cancel {
    color: @brand-danger;
}

.result-count {
    margin-top: 1em;
}

@import "../../../../../../../vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/bootstrap-fontawesome.less";

// overriding the font path for correct loading.
@FontAwesomePath: "/fonts";
@fa-font-path: "/fonts";

// This override of the mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Resources/public/less/font-awesome/path.less
// prevents loading of the none existing woff2 file that resulted in four oh fours.
@font-face {
    font-family: 'FontAwesome';
    src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
    src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
    font-weight: normal;
    font-style: normal;
}

.progress-steps {
    font-size: 110%;
}

div.page-header {
    img.logo {
        max-width: 180px;
        max-height: 90px;
    }
}

table.orderable th {
    color: @brand-primary;
}

.ra-start-vetting-procedure-container {
    margin: 3em auto;
    max-width: 500px;

    form[name="ra_start_vetting_procedure"] {

        margin-bottom: 1em;

        input[name="ra_start_vetting_procedure[registrationCode]"] {
            min-width: 220px;
            text-transform: uppercase;
        }

        ::-webkit-input-placeholder { text-transform: none; }
        :-moz-placeholder { text-transform: none; }
        ::-moz-placeholder { text-transform: none; }
        :-ms-input-placeholder { text-transform: none; }
    }

    p {
        color: #999999;
    }
}

form[name="ra_verify_yubikey_public_id"] {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    > .form-group > .col-sm-9 {
        float: none;
        margin: 0 auto;
    }
}

div.form-ra-verify-identity {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    .left-aligned {
        padding-left: 24px;
        text-align: left;
    }

    table tbody tr th.half-width, table tbody tr td.half-width {
      width: 50%;
    }

    .form-group-verify-identity {
        margin-top: 2em;
        text-align: center;

        label {

            font-weight: bold;
        }
    }
}

div.form-ra-create-ra, div.form-ra-amend-ra-info, div.form-ra-change-role {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    .control-text {
        padding-top: 7px;
    }
}

div.emulate-form-layout {
    .control-text {
        padding-top: 7px;
    }
}

.question {
    padding: 15px;
}

div.form-ra-send-sms-challenge {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    form {
        text-align: center;
    }
}

div.form-retract-registration-authority {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 650px;

    button {
        margin-left: 1em;
    }
}

form[name="ra_verify_phone_number"] {
    margin: 1em auto;
    padding: 0.75em 1em;
    max-width: 525px;

    input[type="text"] {
        font-family: "Monaco", "Inconsolata", "Consolas", monospace;
        text-transform: uppercase;
    }
}
.search-second-factors {
    form[name="ra_search_ra_second_factors"] {
        input#ra_search_ra_second_factors_name {
            max-width: 300px;
        }
        input#ra_search_ra_second_factors_secondFactorId {
            max-width: 200px;
        }
        input#ra_search_ra_second_factors_email {
            max-width: 350px;
        }
        select {
            max-width: 175px;
        }
        button#ra_search_ra_second_factors_export {
            margin-left: 0.5em;
        }
        div.button-group {
            margin-left: 25%;
            div.form-group {
                margin-right: 14px;
                float: left;
                button:first-child {
                    margin-left: 8px;
                }
            }
        }
    }
    td.button-column {
        .audit-log, .revoke {
            margin: 0px 3px 3px 3px;
        }
    }
}

form[name="ra_search_ra_candidates"] {
    input#ra_search_ra_candidates_name {
        max-width: 300px;
    }
    input#ra_search_ra_candidates_email {
        max-width: 300px;
    }
    input#ra_search_ra_candidates_institution {
        max-width: 300px;
    }
}

form[name="logout"] button {
    line-height: 26px;
}

form[name="stepup_switch_locale"] {
        .pull-right();
}
select[name="stepup_switch_locale[locale]"] {
    min-width: 150px;
}

.hidden {
    display: none;
}

.container-cancel-vetting {
    text-align: center;
}

.generate-progress(100);

.generate-progress(@n, @i: 0) when (@i =< @n) {
    .progress-@{i} {
        width: (@i * 1%);
    }
    .generate-progress(@n, (@i + 5));
}

.cancel {
    color: @brand-danger;
}

.result-count {
    margin-top: 1em;
}


Add dragover effect for tabs sections

Add dragover effect for tabs sections

.cb-tabs {
    position: absolute;
    width: 100%;
    height: 100%;

    .section {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        border-bottom: 1px solid @tabSeparationColor;
        border-right: 1px solid @tabSeparationColor;

        &.dragover {
            opacity: 0.6;
        }

        .tabs-header {
            position: absolute;
            top: 0px;
            height: @tabHeight+@tabMarginTop;
            right: 0px;
            left: 0px;
            background: @tabBackground;
            padding-left: 12px;
            overflow: hidden;
            box-shadow: inset 0px -8px 9px -10px #000000;
        }

        .tabs-content {
            position: absolute;
            top: @tabHeight+@tabMarginTop - 1px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 1;
            background: @tabActiveColor;
            border-top: 1px solid @tabActiveBorder;
        }
    }
}

.cb-tabs {
    position: absolute;
    width: 100%;
    height: 100%;

    .section {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        border-bottom: 1px solid @tabSeparationColor;
        border-right: 1px solid @tabSeparationColor;

        &.dragover {
            .opacity(60);
        }

        .tabs-header {
            position: absolute;
            top: 0px;
            height: @tabHeight+@tabMarginTop;
            right: 0px;
            left: 0px;
            background: @tabBackground;
            padding-left: 12px;
            overflow: hidden;
            box-shadow: inset 0px -8px 9px -10px #000000;
        }

        .tabs-content {
            position: absolute;
            top: @tabHeight+@tabMarginTop - 1px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 1;
            background: @tabActiveColor;
            border-top: 1px solid @tabActiveBorder;
        }
    }
}


adjust switch style

adjust switch style

@import "../../style/themes/default";
@import "../../style/mixins/index";

@switch-prefix-cls: ~"@{ant-prefix}-switch";
@switch-duration: .3s;

.@{switch-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 22px;
  min-width: 44px;
  line-height: 20px;
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &-inner {
    color: #fff;
    font-size: @font-size-base;
    margin-left: 24px;
    margin-right: 6px;
    display: block;
  }

  &:after {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 1px;
    top: 1px;

    border-radius: 18px;
    background-color: #fff;
    content: " ";
    cursor: pointer;
    transition: all @switch-duration, width @switch-duration;
  }

  &:active:after {
    width: 24px;
  }

  &:focus {
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    outline: 0;
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-small {
    height: 14px;
    min-width: 28px;
    line-height: 12px;

    .@{switch-prefix-cls}-inner {
      margin-left: 18px;
      margin-right: 3px;
    }

    &:after {
      width: 12px;
      height: 12px;
      top: 0;
      left: 0.5px;
    }

    &:active:after {
      width: 16px;
    }
  }

  &-small&-checked {
    &:after {
      left: 100%;
      margin-left: -12.5px;
    }

    .@{switch-prefix-cls}-inner {
      margin-left: 3px;
      margin-right: 18px;
    }
  }

  &-small:active&-checked:after {
    left: 10px;
  }

  &-checked {
    border-color: @primary-color;
    background-color: @primary-color;

    .@{switch-prefix-cls}-inner {
      margin-left: 6px;
      margin-right: 24px;
    }

    &:after {
      left: 100%;
      margin-left: -19px;
    }

    &:active:after {
      left: 16px;
    }
  }

  &-disabled {
    cursor: not-allowed;
    background: #f4f4f4;
    border-color: #f4f4f4;

    &:after {
      background: #ccc;
      cursor: not-allowed;
    }

    .@{switch-prefix-cls}-inner {
      color: #ccc;
    }
  }
}

@import "../../style/themes/default";
@import "../../style/mixins/index";

@switch-prefix-cls: ~"@{ant-prefix}-switch";
@switch-duration: .3s;

.@{switch-prefix-cls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 22px;
  min-width: 44px;
  line-height: 20px;
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &-inner {
    color: #fff;
    font-size: @font-size-base;
    margin-left: 24px;
    margin-right: 6px;
    display: block;
  }

  &:after {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 1px;

    border-radius: 18px;
    background-color: #fff;
    content: " ";
    cursor: pointer;
    transition: all @switch-duration, width @switch-duration;
  }

  &:active:after {
    width: 24px;
  }

  &:focus {
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
    outline: 0;
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-small {
    height: 14px;
    min-width: 28px;
    line-height: 12px;

    .@{switch-prefix-cls}-inner {
      margin-left: 18px;
      margin-right: 3px;
    }

    &:after {
      width: 12px;
      height: 12px;
      top: 0;
      left: 0;
    }

    &:active:after {
      width: 16px;
    }
  }

  &-small&-checked {
    &:after {
      left: 100%;
      margin-left: -12px;
    }

    .@{switch-prefix-cls}-inner {
      margin-left: 3px;
      margin-right: 18px;
    }
  }

  &-small:active&-checked:after {
    left: 10px;
  }

  &-checked {
    border-color: @primary-color;
    background-color: @primary-color;

    .@{switch-prefix-cls}-inner {
      margin-left: 6px;
      margin-right: 24px;
    }

    &:after {
      left: 100%;
      margin-left: -20px;
    }

    &:active:after {
      left: 16px;
    }
  }

  &-disabled {
    cursor: not-allowed;
    background: #f4f4f4;
    border-color: #f4f4f4;

    &:after {
      background: #ccc;
      cursor: not-allowed;
    }

    .@{switch-prefix-cls}-inner {
      color: #ccc;
    }
  }
}


Fix mixin

Fix mixin

@import "mixins/mixins";

.alert-error {
  padding: 8px 35px 8px 14px;
  margin-bottom: @baseLineHeight;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid @errorBorder;
  border-radius: @baseBorderRadius;
  background-color: @errorBackground;
  color: @errorText;
}

.alert-close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  opacity: .2;
  position: relative;
  top: -2px;
  right: -21px;
  line-height: @baseLineHeight;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    opacity: 0.4;
  }
}

.fade {
  opacity: 0;
  transition: opacity .15s linear;
  &.in {
    opacity: 1;
  }
}

@import "mixins/mixins";

.alert-error {
  padding: 8px 35px 8px 14px;
  margin-bottom: @baseLineHeight;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid @errorBorder;
  border-radius: @baseBorderRadius;
  background-color: @errorBackground;
  color: @errorText;
}

.alert-close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  opacity: .2;
  position: relative;
  top: -2px;
  right: -21px;
  line-height: @baseLineHeight;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    opacity: 0.4;
  }
}

.fade {
  opacity: 0;
  .transition(opacity .15s linear);
  &.in {
    opacity: 1;
  }
}


Fixed aligning of add-to-topic-container

@import "bootstrap/mixins";

@import "bubble/variables";

form.post-factlink-page {
  margin: 0 0 -15px;

  article.fact {
    padding-bottom: 12px;
    border-bottom: 1px solid @baseBorderColor;
  }

  textarea {
    display: none;
  }

  .add-to-topic-container {
    margin: 0 0 20px 55px;
    width: 300px;

    .add-to-topic-header, .js-suggestions-title {
      display: inline-block;
      margin: 10px 0 5px;
      font-weight: bold;
      font-size: @baseFontSize;
    }
  }

  .buttons {
    .clearfix();
    margin: @popup-padding 0;
    .cancel-post-factlink { float: left; }
    .submit-post-factlink {
      float: right;
      width: 120px;
    }

    .post-factlink-share {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
    }
  }
}

@import "bootstrap/mixins";

@import "bubble/variables";

form.post-factlink-page {
  margin: 0 0 -15px;

  article.fact {
    padding-bottom: 12px;
    border-bottom: 1px solid @baseBorderColor;
  }

  textarea {
    display: none;
  }

  .add-to-topic-container {
    margin: 0 0 0 60px;
    width: 300px;

    .add-to-topic-header, .js-suggestions-title {
      display: inline-block;
      margin: 10px 0 5px;
      font-weight: bold;
      font-size: @baseFontSize;
    }
  }

  .buttons {
    .clearfix();
    margin: @popup-padding 0;
    .cancel-post-factlink { float: left; }
    .submit-post-factlink {
      float: right;
      width: 120px;
    }

    .post-factlink-share {
      float: right;
      margin-top: 3px;
      margin-right: 10px;
    }
  }
}


Increased heading font size

Increased heading font size

/*
Extended Mind specific UI-components.
*/

// ACCORDION

.accordion-item-active {
  padding-top: 5px;
  padding-bottom: 5px;
  .accordion-title-open {
    margin-top: -4px;
    padding-bottom: 5px;
    .left-input-wrapper {
      padding-left: 1px;
    }
    &.no-checkbox {
      margin-top: -6px;
    }
  }
}

.keywords-container {
  line-height: @vertical-grid / 1.2;
  #new-keyword {
    margin-right: -4px;
  }
}

button.keyword {
  color: #0f82fe;
  border: 1px solid;
  padding: 2px 4px;
  margin-right: 4px;
}

button.selected-keyword {
  background-color: #0f82fe;
  color: white;
  padding: 3px 6px;
  margin-right: 4px;
}

button.keyword:disabled {
  opacity: .5;
}

input[type="checkbox"]:checked ~ a#accordionTitleLink {
  color: @default-element;
  .fade-color(@fade-time);
}

div#accordionTitleHeightFix {
  height: @vertical-grid;
}

a#accordionTitleLink {
  color: @content;
  line-height: 19px;
  .break-words;
  &.needsSmallPadding {
    padding-top: 4px;
  }
  &.needsBigPadding {
    padding-top: 5px;
  }
}

div#closedAccordionTitleWrapper {
  max-height: @vertical-grid;
  overflow: hidden;
}

// SIMPLE CONTENT

.simple-content {
  padding-bottom: @vertical-grid;
}

.simple-content:last-child {
  padding-bottom: 0;
}

#email-verification-status {
  font-size: @smallest-font-size;
  display: block;
  line-height: @vertical-grid-half;
}

.dashboard-info {
  color: @default-element;
}

// TEASER

.teaser {
  line-height: @vertical-grid-half;
  font-size: @small-font-size;
  .break-words;
}

.teaser, .teaser-empty {
  padding-bottom: @vertical-grid-half;
}

// OFFLINE

.offline-indicator {
  display: inline;
  vertical-align: top;
  font-size: @small-font-size;
}

// ERRORS

#errorMessage {
  h3 {
    text-align: center;
    padding-bottom: @vertical-grid;
  }
}

// MODALS

#modalFooter {
  button[disabled].normal-button {
    color: white;
    background-color: @default-button-pressed;
  }
}

// ADD ITEM/NOTE/TASK..

.add-element {
  // Add @vertical grid to make room for 'add [item]...' input
  padding-bottom: @vertical-grid-half;
}

// PAGE HEADER

header.static-page-header {
  background-color: white;
  .active-item-container {
    button#menu-button {
      .button;
      padding: 19px 20px 13px @horizontal-grid - 4; // increased clicking area, align icon to grid with right padding
      span.icon-menu {
        color: @highlighted-element;
      }
    }
    button#menu-button:active {
      span.icon-menu {
        color: @highlighted-element-pressed;
      }
    }
    a#today-link {
      float: left;
      color: @highlighted-element;
      font-size: @small-font-size;
      margin-top: 10px;
      padding-left: @horizontal-grid + 4;
      height: @page-header-height;
    }
    a.today-link-active {
      .font-bold;
    }
  }
  .heading {
    color: @highlighted-element;
    font-weight: 700;
    font-size: @large-font-size;
  }
  .omni-button {
    .button;
    line-height: normal;
    padding: 17px @horizontal-grid 17px 20px; // increased clicking area
    span {
      font-size: 16px;
    }
  }
}

nav#edit-header {
  button {
    font-size: @small-font-size;
  }
}

// FOOTER

footer {
  a[class^='active-slide'], a[class*=' active-slide'] {
    span {
      color: @highlighted-element;
    }
    span:active {
      color: @highlighted-element-pressed;
    }
  }
}

// OMNIBAR

.omnibar-container {
  .one-column-grid;
  position: relative;

  // Push omnibar under page header
  min-height: @page-header-height;

  padding-top: 10px;
  form, .form-group, input {
    height: inherit;
  }
  #omnibar-results {
    margin-top: 12px;
    float: left;
    overflow-y: auto;
    // height set with javascript

    #filtered-items-placeholder {
      height: 100%;
      // width set with javascript
    }
    .filtered-items {
      padding-top: @vertical-grid-half;
    }
  }
  #omnibarX {
    //padding-bottom: 6px;
    span {
      font-size: 18px;
    }
  }
}

.omnibar-hidden .omnibar-container {
  margin-top: -@page-header-height;
}

.omnibar-animation.ng-enter, .omnibar-animation.ng-leave {
  position: absolute;
  left: @horizontal-grid;
  right: @horizontal-grid;
}

.omnibar-animation.ng-enter {
  -webkit-animation: .3s fade-in;
  -moz-animation: .3s fade-in;
  -o-animation: .3s fade-in;
  animation: .3s fade-in;

  display: none;  // https://github.com/angular/angular.js/issues/4225
}

.omnibar-animation.ng-enter.ng-enter-active {
  display: block; // https://github.com/angular/angular.js/issues/4225
}

.omnibar-animation.ng-leave {
  -webkit-animation: .3s fade-out;
  -moz-animation: .3s fade-out;
  -o-animation: .3s fade-out;
  animation: .3s fade-out;
}

// MENU

#menu {
  background-color: @menu;
  position: absolute;
  width: 260px;
  height: 100%;
  overflow-y: auto;
  #menu-content {
    li.account-link {
      padding-top: 8px;
      height: @page-header-height;
    }
    a, span {
      font-size: @small-font-size;
      .font-bold;
    }
    a.feature-link, a.lists-link{
      font-size: 1.17em;  // http://www.w3.org/TR/CSS2/sample.html
    }
    li.last-feature { // padding-bottom for li with last a.feature-link
      padding-bottom: @vertical-grid;
    }
    ul {
      margin-top: 4px;
    }
    a {
      color: #FEFFFF;
      padding-right: 30px;
      padding-left: 30px;
    }
    a.active, a.lists-link.active + a.hide-expand-link {
      background-color: white;
      color: black;
    }
    a {
      // http://getbootstrap.com/components/#dropdowns
      display: block;
    }
    .list {
      display: table;
      line-height: @vertical-grid-half;
      height: @vertical-grid;
      .list-link {
        width: 100%;
        display: table-cell;
        vertical-align: middle;
        padding-left: 40px;
      }
    }
    .list-last{
      margin-bottom: @vertical-grid-half;
    }
    .lists-heading-container{
      display:table;
      .feature-link {
        display: table-cell;
        width: 90%;
      }
      a.hide-expand-link {
        vertical-align: middle;
        display: table-cell;
        width: 10%;
      }
    }
  }
}

// Override again with background color of the next element
// of the mobile menu
#feature-container-wrapper {
  position: relative;
  background-color: white;
}

// DATEPICKER

li.datepicker-date {
  line-height: @vertical-grid-half;
}

#datepicker {
  height: @vertical-grid + 6;
  margin-top: -16px;
  overflow: hidden;
  div#scroller {
    // http://stackoverflow.com/a/18784257
    // css divide width 100% to 3 column
    width: 300%;
    height: inherit;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    nav[role=navigation].slide {
      height: inherit;
      flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      ul {
        // http://stackoverflow.com/a/14103766
        // How to stretch html / css horizontal navigation items evenly and fully across a specified container
        width: 100%;
        height: inherit;
        li {
          height: inherit;
          vertical-align: middle;
        }
        li#datepicker-arrow-previous {
          text-align: left;
        }
        li#datepicker-arrow-next {
          text-align: right;
        }
        li.datepicker-date {
          min-width: 11.11%;
          text-align: center;
          a {
            font-size: @small-font-size;
            width: inherit;
            color: @highlighted-element;
            span {
              display: block;
              min-width: 29px;
            }
            span.day-date {
              display: block;
              margin: 0 auto;
              height: 28px;
              width: 28px;
              text-align: center;
              padding-top: 4px;
            }
          }
          a.date-active, a.date-active-today {
            font-weight: 700;
            span.day-date {
              color: white;
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              background-color: @highlighted-element;
            }
          }
          a.date-past, a.date-active-past {
            color: @default-element;
          }
          a.date-active-past {
            span.day-date {
              color: white;
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              background-color: @default-element;
            }
          }
          a.date-today {
            span.day-date {
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              border: 1px solid @highlighted-element;
            }
          }
        }
      }
    }
  }
}

// FORMS

.inline-form-fields{
  padding-bottom: 10px;
}

// ONBOARDING

#wrapper {
  overflow: hidden;
  width: 100%;

  #onboarding-scroller {
    width: 200%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;

    .slide {
      width: 100%;
      height: 100%;
      flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;

      .onboarding-slide {
        max-width: 100%;
        min-height: 300px;
        max-height: 100%;
      }
    }
  }
}

// LOADING ANIMATION

.loading-animation {
  position: relative;
  height: inherit;
  padding-top: @vertical-grid * 3;
  color: @default-element;
  text-align: center;
}

// FADE OUT TOO LONG TEXT ELLIPSIS
// From: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

.ellipsis {
  overflow: hidden;
  height: @vertical-grid;
  line-height: 22px;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: @vertical-grid;
}

.ellipsis > span {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\00a0";

  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;

  float: right;
  position: relative;
  top: -24px;
  left: 100%;
  width: 7em;
  margin-left: -7em;
  padding-right: 5px;
  text-align: right;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(255, 255, 255, 0)), to(white), color-stop(75%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
}

// EDITABLE FIELD

.editable-field-backdrop {
  -webkit-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -ms-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.editable-field-backdrop.active {
  background-color: #f6f6f6 !important;
  &.backdrop-disable * {
    pointer-events: none;
  }
}

.editable-field-backdrop.active, .editable-field-backdrop.animating {
  #omnibar-label-wrapper, .ellipsis:after {
    background-image: none !important;
  }
  #active-action-wrapper, #plus-button-wrapper, #feature-container-wrapper, #feature-container, .border-button, .static-page-header {
    background-color: inherit;
  }
}

.backdrop-disable .editable-field-container.active {
  * {
    pointer-events: auto !important;
  }
}

.editable-field.active, .editable-field-container.active {
  background-color: white;
}

/*
Extended Mind specific UI-components.
*/

// ACCORDION

.accordion-item-active {
  padding-top: 5px;
  padding-bottom: 5px;
  .accordion-title-open {
    margin-top: -4px;
    padding-bottom: 5px;
    .left-input-wrapper {
      padding-left: 1px;
    }
    &.no-checkbox {
      margin-top: -6px;
    }
  }
}

.keywords-container {
  line-height: @vertical-grid / 1.2;
  #new-keyword {
    margin-right: -4px;
  }
}

button.keyword {
  color: #0f82fe;
  border: 1px solid;
  padding: 2px 4px;
  margin-right: 4px;
}

button.selected-keyword {
  background-color: #0f82fe;
  color: white;
  padding: 3px 6px;
  margin-right: 4px;
}

button.keyword:disabled {
  opacity: .5;
}

input[type="checkbox"]:checked ~ a#accordionTitleLink {
  color: @default-element;
  .fade-color(@fade-time);
}

div#accordionTitleHeightFix {
  height: @vertical-grid;
}

a#accordionTitleLink {
  color: @content;
  line-height: 19px;
  .break-words;
  &.needsSmallPadding {
    padding-top: 4px;
  }
  &.needsBigPadding {
    padding-top: 5px;
  }
}

div#closedAccordionTitleWrapper {
  max-height: @vertical-grid;
  overflow: hidden;
}

// SIMPLE CONTENT

.simple-content {
  padding-bottom: @vertical-grid;
}

.simple-content:last-child {
  padding-bottom: 0;
}

#email-verification-status {
  font-size: @smallest-font-size;
  display: block;
  line-height: @vertical-grid-half;
}

.dashboard-info {
  color: @default-element;
}

// TEASER

.teaser {
  line-height: @vertical-grid-half;
  font-size: @small-font-size;
  .break-words;
}

.teaser, .teaser-empty {
  padding-bottom: @vertical-grid-half;
}

// OFFLINE

.offline-indicator {
  display: inline;
  vertical-align: top;
  font-size: @small-font-size;
}

// ERRORS

#errorMessage {
  h3 {
    text-align: center;
    padding-bottom: @vertical-grid;
  }
}

// MODALS

#modalFooter {
  button[disabled].normal-button {
    color: white;
    background-color: @default-button-pressed;
  }
}

// ADD ITEM/NOTE/TASK..

.add-element {
  // Add @vertical grid to make room for 'add [item]...' input
  padding-bottom: @vertical-grid-half;
}

// PAGE HEADER

header.static-page-header {
  background-color: white;
  .active-item-container {
    button#menu-button {
      .button;
      padding: 19px 20px 13px @horizontal-grid - 4; // increased clicking area, align icon to grid with right padding
      span.icon-menu {
        color: @highlighted-element;
      }
    }
    button#menu-button:active {
      span.icon-menu {
        color: @highlighted-element-pressed;
      }
    }
    a#today-link {
      float: left;
      color: @highlighted-element;
      font-size: @small-font-size;
      margin-top: 10px;
      padding-left: @horizontal-grid + 4;
      height: @page-header-height;
    }
    a.today-link-active {
      .font-bold;
    }
  }
  .heading {
    color: @highlighted-element;
    font-weight: 700;
  }
  .omni-button {
    .button;
    line-height: normal;
    padding: 17px @horizontal-grid 17px 20px; // increased clicking area
    span {
      font-size: 16px;
    }
  }
}

nav#edit-header {
  button {
    font-size: @small-font-size;
  }
}

// FOOTER

footer {
  a[class^='active-slide'], a[class*=' active-slide'] {
    span {
      color: @highlighted-element;
    }
    span:active {
      color: @highlighted-element-pressed;
    }
  }
}

// OMNIBAR

.omnibar-container {
  .one-column-grid;
  position: relative;

  // Push omnibar under page header
  min-height: @page-header-height;

  padding-top: 10px;
  form, .form-group, input {
    height: inherit;
  }
  #omnibar-results {
    margin-top: 12px;
    float: left;
    overflow-y: auto;
    // height set with javascript

    #filtered-items-placeholder {
      height: 100%;
      // width set with javascript
    }
    .filtered-items {
      padding-top: @vertical-grid-half;
    }
  }
  #omnibarX {
    //padding-bottom: 6px;
    span {
      font-size: 18px;
    }
  }
}

.omnibar-hidden .omnibar-container {
  margin-top: -@page-header-height;
}

.omnibar-animation.ng-enter, .omnibar-animation.ng-leave {
  position: absolute;
  left: @horizontal-grid;
  right: @horizontal-grid;
}

.omnibar-animation.ng-enter {
  -webkit-animation: .3s fade-in;
  -moz-animation: .3s fade-in;
  -o-animation: .3s fade-in;
  animation: .3s fade-in;

  display: none;  // https://github.com/angular/angular.js/issues/4225
}

.omnibar-animation.ng-enter.ng-enter-active {
  display: block; // https://github.com/angular/angular.js/issues/4225
}

.omnibar-animation.ng-leave {
  -webkit-animation: .3s fade-out;
  -moz-animation: .3s fade-out;
  -o-animation: .3s fade-out;
  animation: .3s fade-out;
}

// MENU

#menu {
  background-color: @menu;
  position: absolute;
  width: 260px;
  height: 100%;
  overflow-y: auto;
  #menu-content {
    li.account-link {
      padding-top: 8px;
      height: @page-header-height;
    }
    a, span {
      font-size: @small-font-size;
      .font-bold;
    }
    a.feature-link, a.lists-link{
      font-size: 1.17em;  // http://www.w3.org/TR/CSS2/sample.html
    }
    li.last-feature { // padding-bottom for li with last a.feature-link
      padding-bottom: @vertical-grid;
    }
    ul {
      margin-top: 4px;
    }
    a {
      color: #FEFFFF;
      padding-right: 30px;
      padding-left: 30px;
    }
    a.active, a.lists-link.active + a.hide-expand-link {
      background-color: white;
      color: black;
    }
    a {
      // http://getbootstrap.com/components/#dropdowns
      display: block;
    }
    .list {
      display: table;
      line-height: @vertical-grid-half;
      height: @vertical-grid;
      .list-link {
        width: 100%;
        display: table-cell;
        vertical-align: middle;
        padding-left: 40px;
      }
    }
    .list-last{
      margin-bottom: @vertical-grid-half;
    }
    .lists-heading-container{
      display:table;
      .feature-link {
        display: table-cell;
        width: 90%;
      }
      a.hide-expand-link {
        vertical-align: middle;
        display: table-cell;
        width: 10%;
      }
    }
  }
}

// Override again with background color of the next element
// of the mobile menu
#feature-container-wrapper {
  position: relative;
  background-color: white;
}

// DATEPICKER

li.datepicker-date {
  line-height: @vertical-grid-half;
}

#datepicker {
  height: @vertical-grid + 6;
  margin-top: -16px;
  overflow: hidden;
  div#scroller {
    // http://stackoverflow.com/a/18784257
    // css divide width 100% to 3 column
    width: 300%;
    height: inherit;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    nav[role=navigation].slide {
      height: inherit;
      flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      ul {
        // http://stackoverflow.com/a/14103766
        // How to stretch html / css horizontal navigation items evenly and fully across a specified container
        width: 100%;
        height: inherit;
        li {
          height: inherit;
          vertical-align: middle;
        }
        li#datepicker-arrow-previous {
          text-align: left;
        }
        li#datepicker-arrow-next {
          text-align: right;
        }
        li.datepicker-date {
          min-width: 11.11%;
          text-align: center;
          a {
            font-size: @small-font-size;
            width: inherit;
            color: @highlighted-element;
            span {
              display: block;
              min-width: 29px;
            }
            span.day-date {
              display: block;
              margin: 0 auto;
              height: 28px;
              width: 28px;
              text-align: center;
              padding-top: 4px;
            }
          }
          a.date-active, a.date-active-today {
            font-weight: 700;
            span.day-date {
              color: white;
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              background-color: @highlighted-element;
            }
          }
          a.date-past, a.date-active-past {
            color: @default-element;
          }
          a.date-active-past {
            span.day-date {
              color: white;
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              background-color: @default-element;
            }
          }
          a.date-today {
            span.day-date {
              border-radius: 50%; //http://css-tricks.com/almanac/properties/b/border-radius/
              border: 1px solid @highlighted-element;
            }
          }
        }
      }
    }
  }
}

// FORMS

.inline-form-fields{
  padding-bottom: 10px;
}

// ONBOARDING

#wrapper {
  overflow: hidden;
  width: 100%;

  #onboarding-scroller {
    width: 200%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;

    .slide {
      width: 100%;
      height: 100%;
      flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;

      .onboarding-slide {
        max-width: 100%;
        min-height: 300px;
        max-height: 100%;
      }
    }
  }
}

// LOADING ANIMATION

.loading-animation {
  position: relative;
  height: inherit;
  padding-top: @vertical-grid * 3;
  color: @default-element;
  text-align: center;
}

// FADE OUT TOO LONG TEXT ELLIPSIS
// From: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

.ellipsis {
  overflow: hidden;
  height: @vertical-grid;
  line-height: 22px;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: @vertical-grid;
}

.ellipsis > span {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\00a0";

  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;

  float: right;
  position: relative;
  top: -24px;
  left: 100%;
  width: 7em;
  margin-left: -7em;
  padding-right: 5px;
  text-align: right;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(255, 255, 255, 0)), to(white), color-stop(75%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 75%, white);
}

// EDITABLE FIELD

.editable-field-backdrop {
  -webkit-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -ms-transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition: background-color cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.editable-field-backdrop.active {
  background-color: #f6f6f6 !important;
  &.backdrop-disable * {
    pointer-events: none;
  }
}

.editable-field-backdrop.active, .editable-field-backdrop.animating {
  #omnibar-label-wrapper, .ellipsis:after {
    background-image: none !important;
  }
  #active-action-wrapper, #plus-button-wrapper, #feature-container-wrapper, #feature-container, .border-button, .static-page-header {
    background-color: inherit;
  }
}

.backdrop-disable .editable-field-container.active {
  * {
    pointer-events: auto !important;
  }
}

.editable-field.active, .editable-field-container.active {
  background-color: white;
}


Make redactor's background transparent in page.

Former-commit-id: d31af7d9bcae08f1a1712320b4444144e84a20ea

@import "../include/variables.less";
@import "../../vendor/bootstrap/variables.less";
@import "../../vendor/bootstrap/mixins.less";

*.ccm-content-editor-snippet {
  .border-radius(2px);
  border: 1px solid #eee;
  padding: 4px;
  display: inline-block;
  background-color: #FDFFCE;
  font-family: @font-family-sans-serif;
}

.redactor_ccm-block-content-editor-composer {
  border: 1px solid #eee;
  background: white;
  padding: 10px;
  .border-bottom-radius(4px);
}

.ccm-block-edit-inline-active .redactor_box {
  background: transparent;
}

@import "../include/variables.less";
@import "../../vendor/bootstrap/variables.less";
@import "../../vendor/bootstrap/mixins.less";

*.ccm-content-editor-snippet {
  .border-radius(2px);
  border: 1px solid #eee;
  padding: 4px;
  display: inline-block;
  background-color: #FDFFCE;
  font-family: @font-family-sans-serif;
}

.redactor_ccm-block-content-editor-composer {
  border: 1px solid #eee;
  padding: 10px;
  .border-bottom-radius(4px);
}


While we're at it, fixed small styling bug.

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

.fact-relation-search {

  .clearfix();

  .fact-relation-search-container {
    background: @whiteDarker;
    padding: 15px @mainRightPadding 15px @mainLeftPadding;

    border-top: 1px solid @baseBorderColor;
    border-bottom: 1px solid @baseBorderColor;
  }

  .auto-complete-fact-relations {
    overflow: hidden;
    position: relative;
    margin: 0;

    .fact-relation-post {
      display: none;
    }

    &.active {
      .fact-relation-post {
        display: inline-block;
      }
    }

    .fact-wheel {
      height: 43px;
    }

    .fact-relations-input-container {
      margin-left: 60px;
      margin-bottom: 10px;
    }
  }

  input[type="text"] { font-size: @baseFontSize; }

  .view-toggle {
    font-size: @baseFontSize;
    color: @metaFontColor;
    padding: 5px 12px 0;
    cursor: pointer;

    input[type="checkbox"] {
      margin: -3px 6px 0;
      padding: 0;
    }
  }
}

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

.fact-relation-search {

  .clearfix();

  .fact-relation-search-container {
    background: @whiteDarker;
    padding: 15px @mainRightPadding 15px @mainLeftPadding;

    border-top: 1px solid @baseBorderColor;
    border-bottom: 1px solid @baseBorderColor;
  }

  .auto-complete-fact-relations {
    overflow: hidden;
    position: relative;
    margin: 0;

    .fact-relation-post {
      display: none;
    }

    &.active {
      .fact-relation-post {
        display: inline-block;
      }
    }

    .fact-wheel {
      height: 43px;
    }

    .fact-relations-input-container {
      margin-left: 60px;
      margin-bottom: 10px;
    }
  }

  input[type="text"] { font-size: @baseFontSize; }

  .view-toggle {
    font-size: @baseFontSize;
    color: @metaFontColor;
    padding: 5px 12px 0;

    input[type="checkbox"] {
      margin: -3px 6px 0;
      padding: 0;
    }
  }
}