Fix container css transition on changes of historical of navigator

//
// Sidebar
// --------------------------------------------------

.sidebar-trigger {
    + .container,
    + .container-fluid {
        //-webkit-transition: margin-left 0.2s;
        //transition: margin-left 0.2s;
    }
}

.sidebar-toggle {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height: @navbar-height + 1;
    cursor: pointer;

    margin: 0;
    padding: 17px 20px 17px 0;

    > i {
        font-size: @sidebar-default-toggle-font-size;
        margin: 0 0 0 -5px;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

    > .fa-sidebar-toggle:before {
        content: @sidebar-default-toggle-fa-icon;
    }

    &:hover,
    &.sidebar-toggle-opened {
        > i {
            margin-left: -9px;
        }
    }

    + .navbar-brand > img {
        margin-left: 10px;
    }
}

.sidebar-togglable {
    .sidebar-toggle {
        display: block;
    }
}

.sidebar-wrapper {
    position: fixed;
    top: 0;
    overflow: hidden;
    bottom: 0;
    width: @sidebar-wrapper-width;
    cursor: default;
    -moz-user-select: -moz-none;
    user-select: none;
    -ms-touch-action: none;

    -webkit-transform: translate3d(-@sidebar-wrapper-width, 0px, 0px);
    transform: translate3d(-@sidebar-wrapper-width, 0px, 0px);

    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;

    &.sidebar-open {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    .sidebar-scroller {
        position: absolute;
        overflow-x: hidden;
        overflow-y: scroll;
        left: 0;
        right: -18px;
        height: 100%;
    }

    .sidebar-menu {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        list-style: none;
        text-align: left;
        font-size: @font-size-medium;

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            display: block;
        }
    }

    .sidebar-group > span,
    .sidebar-item > a {
        display: block;
        height: 100%;
        padding: 12px 15px;
        text-decoration: none;
    }

    .sidebar-item > a.active {
        border-left-width: 5px;
        border-left-style: solid;
        padding: 12px 15px 12px 10px;
    }

    .sidebar-item.sidebar-item-mini {
        font-size: 0.7em;

        > a {
            padding-top: 7px;
            padding-bottom: 7px;
        }
    }

    .sidebar-group {
        margin-top: 20px;

        &:first-child {
            margin-top: 0;
        }

        > span {
            font-family: @headings-font-family;
            font-size: @sidebar-default-group-size;
            border-bottom: 1px solid transparent;
        }

        &.sticky-header {
            position: absolute;
            height: auto;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
            margin-top: 0;
        }

        + .sidebar-item {
            margin-top: 32px;
            border-top: 1px solid transparent;
        }
    }

    .sidebar-item > a {
        cursor: pointer;
    }
}

.sidebar-swipe {
    position : fixed;
    z-index: @zindex-sidebar-wrapper - 1;
    width: 20px;
    left: 0;
    top: 0;
    bottom: 0;

    -moz-user-select: -moz-none;
    user-select: none;
    -ms-touch-action: none;
}

.sidebar-open + .sidebar-swipe,
.sidebar-force-open .sidebar-swipe {
    left: @sidebar-wrapper-width;
}

.sidebar-trigger {
    .sidebar-toggle {
        z-index: @zindex-sidebar-toggle;
    }

    .sidebar-wrapper {
        z-index: @zindex-sidebar-wrapper;
    }
}

.navbar + .sidebar-wrapper {
    .sidebar-scroller {
        padding-top: @navbar-height + 1;
    }
}

.navbar-fixed-top + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger,
.navbar-fixed-top + .sidebar-trigger + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger + .sidebar-trigger {
    .sidebar-toggle {
        position: fixed;
        z-index: @zindex-sidebar-toggle-fixed;
    }

    .sidebar-scroller {
        padding-top: inherit;
    }

    .sidebar-wrapper {
        top: @navbar-height + 1;
        z-index: @zindex-sidebar-wrapper-fixed;
    }
}

.navbar-fixed-bottom + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger + .sidebar-trigger {
    .sidebar-toggle {
        top: inherit;
        bottom: 0;
    }

    .sidebar-wrapper {
        top: 0;
        bottom: @navbar-height + 1;
    }
}

.sidebar-wrapper {
    &.sidebar-default {
        color: @sidebar-default-color;
        background-color: @sidebar-default-bg;

        &.sidebar-open,
        &.sidebar-dragging {
            .box-shadow(3px 0 4px rgba(0, 0, 0, 0.18));
        }

        .sidebar-group {
            > span {
                color: @sidebar-default-group-color;
                border-bottom-color: @sidebar-default-border-color;
            }

            &.sticky-header > span {
                background-color: @sidebar-default-bg;
            }

            + .sidebar-item {
                border-top-color: @sidebar-default-border-color;
            }
        }

        .sidebar-item {
            > a {
                color: @sidebar-default-link-color;
                background-color: @sidebar-default-link-bg;

                &:hover,
                &:focus {
                    color: @sidebar-default-link-hover-color;
                    background-color: @sidebar-default-link-hover-bg;
                }

                &.active {
                    color: @sidebar-default-link-active-color;
                    background-color: @sidebar-default-link-active-bg;
                }
            }

            &.sidebar-item-mini > a {
                color: @sidebar-default-link-mini-color;
            }
        }

        .hammer-scrollbar {
            background-color: @sidebar-default-scrollbar-bg;
        }
    }

    &.sidebar-inverse {
        color: @sidebar-inverse-color;
        background-color: @sidebar-inverse-bg;

        &.sidebar-open,
        &.sidebar-dragging {
            .box-shadow(3px 0 4px rgba(0, 0, 0, 0.32));
        }

        .sidebar-group {
            > span {
                color: @sidebar-inverse-group-color;
                border-bottom-color: @sidebar-inverse-border-color;
            }

            &.sticky-header > span {
                background-color: @sidebar-inverse-bg;
            }

            + .sidebar-item {
                border-top-color: @sidebar-inverse-border-color;
            }
        }

        .sidebar-item {
            > a {
                color: @sidebar-inverse-link-color;
                background-color: @sidebar-inverse-link-bg;

                &:hover,
                &:focus {
                    color: @sidebar-inverse-link-hover-color;
                    background-color: @sidebar-inverse-link-hover-bg;
                }

                &.active {
                    color: @sidebar-inverse-link-active-color;
                    background-color: @sidebar-inverse-link-active-bg;
                }
            }

            &.sidebar-item-mini > a {
                color: @sidebar-inverse-link-mini-color;
            }
        }

        .hammer-scrollbar {
            background-color: @sidebar-inverse-scrollbar-bg;
        }
    }
}

.navbar-default + .sidebar-trigger .sidebar-toggle,
.navbar-default + .sidebar-trigger + .sidebar-trigger .sidebar-toggle {
    > i {
        color: @sidebar-default-toggle-color;
    }

    &:hover {
        > i {
            color: @sidebar-default-toggle-hover-color;
        }
    }
}

.navbar-inverse + .sidebar-trigger .sidebar-toggle,
.navbar-inverse + .sidebar-trigger + .sidebar-trigger .sidebar-toggle {
    > i {
        color: @sidebar-toggle-inverse-color;
    }

    &:hover {
        > i {
            color: @sidebar-toggle-inverse-hover-color;
        }
    }
}

// Sidebar Right
// -------------------------

.sidebar-right {
    .sidebar-toggle {
        left: auto;
        right: 0;
        padding-left: 20px;
        padding-right: 0;

        > i {
            margin-left: 0;
            margin-right: -5px;
        }

        &:hover,
        &.sidebar-toggle-opened {
            > i {
                margin-right: -9px;
            }
        }
    }

    .sidebar-wrapper {
        right: 0;
        -webkit-transform: translate3d(@sidebar-wrapper-width, 0px, 0px);
        transform: translate3d(@sidebar-wrapper-width, 0px, 0px);

        &.sidebar-open {
            -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }

        &.sidebar-default {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(-3px 0 4px rgba(0, 0, 0, 0.18));
            }
        }

        &.sidebar-inverse {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(-3px 0 4px rgba(0, 0, 0, 0.32));
            }
        }

        .sidebar-item > a.active {
            border-left: inherit;
            border-right-width: 5px;
            border-right-style: solid;
            padding: 12px 10px 12px 15px;
        }
    }

    .sidebar-swipe {
        left: auto;
        right: 0;
    }

    .sidebar-open + .sidebar-swipe,
    .sidebar-force-open .sidebar-swipe {
        right: @sidebar-wrapper-width;
    }
}

// Responsive
// -------------------------

@media (max-width: @screen-xs-max) {
    .sidebar-wrapper {
        width: 80%;
        -webkit-transform: translate3d(-100%, 0px, 0px);
        transform: translate3d(-100%, 0px, 0px);
    }

    .sidebar-open + .sidebar-swipe {
        left: 80%;
    }

    .sidebar-force-open {
        .sidebar-swipe {
            left: 0;
        }
    }

    .sidebar-right {
        .sidebar-toggle {
            padding-left: 7px;
        }

        .sidebar-wrapper {
            -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
        }

        .sidebar-open + .sidebar-swipe {
            left: auto;
            right: 80%;
        }

        .sidebar-force-open {
            .sidebar-swipe {
                left: auto;
                right: 0;
            }
        }
    }
}

@media (min-width: @screen-md-min) {
    .sidebar-trigger.sidebar-locked .sidebar-toggle {
        display: none;
    }

    .sidebar-wrapper.sidebar-open-init {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    .sidebar-force-open,
    .sidebar-force-open.sidebar-right {
        .sidebar-wrapper {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(none);
            }
        }
    }
}

//
// Sidebar
// --------------------------------------------------

.sidebar-trigger {
    + .container,
    + .container-fluid {
        -webkit-transition: margin-left 0.2s;
        transition: margin-left 0.2s;
    }
}

.sidebar-toggle {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height: @navbar-height + 1;
    cursor: pointer;

    margin: 0;
    padding: 17px 20px 17px 0;

    > i {
        font-size: @sidebar-default-toggle-font-size;
        margin: 0 0 0 -5px;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

    > .fa-sidebar-toggle:before {
        content: @sidebar-default-toggle-fa-icon;
    }

    &:hover,
    &.sidebar-toggle-opened {
        > i {
            margin-left: -9px;
        }
    }

    + .navbar-brand > img {
        margin-left: 10px;
    }
}

.sidebar-togglable {
    .sidebar-toggle {
        display: block;
    }
}

.sidebar-wrapper {
    position: fixed;
    top: 0;
    overflow: hidden;
    bottom: 0;
    width: @sidebar-wrapper-width;
    cursor: default;
    -moz-user-select: -moz-none;
    user-select: none;
    -ms-touch-action: none;

    -webkit-transform: translate3d(-@sidebar-wrapper-width, 0px, 0px);
    transform: translate3d(-@sidebar-wrapper-width, 0px, 0px);

    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;

    &.sidebar-open {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    .sidebar-scroller {
        position: absolute;
        overflow-x: hidden;
        overflow-y: scroll;
        left: 0;
        right: -18px;
        height: 100%;
    }

    .sidebar-menu {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        list-style: none;
        text-align: left;
        font-size: @font-size-medium;

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            display: block;
        }
    }

    .sidebar-group > span,
    .sidebar-item > a {
        display: block;
        height: 100%;
        padding: 12px 15px;
        text-decoration: none;
    }

    .sidebar-item > a.active {
        border-left-width: 5px;
        border-left-style: solid;
        padding: 12px 15px 12px 10px;
    }

    .sidebar-item.sidebar-item-mini {
        font-size: 0.7em;

        > a {
            padding-top: 7px;
            padding-bottom: 7px;
        }
    }

    .sidebar-group {
        margin-top: 20px;

        &:first-child {
            margin-top: 0;
        }

        > span {
            font-family: @headings-font-family;
            font-size: @sidebar-default-group-size;
            border-bottom: 1px solid transparent;
        }

        &.sticky-header {
            position: absolute;
            height: auto;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
            margin-top: 0;
        }

        + .sidebar-item {
            margin-top: 32px;
            border-top: 1px solid transparent;
        }
    }

    .sidebar-item > a {
        cursor: pointer;
    }
}

.sidebar-swipe {
    position : fixed;
    z-index: @zindex-sidebar-wrapper - 1;
    width: 20px;
    left: 0;
    top: 0;
    bottom: 0;

    -moz-user-select: -moz-none;
    user-select: none;
    -ms-touch-action: none;
}

.sidebar-open + .sidebar-swipe,
.sidebar-force-open .sidebar-swipe {
    left: @sidebar-wrapper-width;
}

.sidebar-trigger {
    .sidebar-toggle {
        z-index: @zindex-sidebar-toggle;
    }

    .sidebar-wrapper {
        z-index: @zindex-sidebar-wrapper;
    }
}

.navbar + .sidebar-wrapper {
    .sidebar-scroller {
        padding-top: @navbar-height + 1;
    }
}

.navbar-fixed-top + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger,
.navbar-fixed-top + .sidebar-trigger + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger + .sidebar-trigger {
    .sidebar-toggle {
        position: fixed;
        z-index: @zindex-sidebar-toggle-fixed;
    }

    .sidebar-scroller {
        padding-top: inherit;
    }

    .sidebar-wrapper {
        top: @navbar-height + 1;
        z-index: @zindex-sidebar-wrapper-fixed;
    }
}

.navbar-fixed-bottom + .sidebar-trigger,
.navbar-fixed-bottom + .sidebar-trigger + .sidebar-trigger {
    .sidebar-toggle {
        top: inherit;
        bottom: 0;
    }

    .sidebar-wrapper {
        top: 0;
        bottom: @navbar-height + 1;
    }
}

.sidebar-wrapper {
    &.sidebar-default {
        color: @sidebar-default-color;
        background-color: @sidebar-default-bg;

        &.sidebar-open,
        &.sidebar-dragging {
            .box-shadow(3px 0 4px rgba(0, 0, 0, 0.18));
        }

        .sidebar-group {
            > span {
                color: @sidebar-default-group-color;
                border-bottom-color: @sidebar-default-border-color;
            }

            &.sticky-header > span {
                background-color: @sidebar-default-bg;
            }

            + .sidebar-item {
                border-top-color: @sidebar-default-border-color;
            }
        }

        .sidebar-item {
            > a {
                color: @sidebar-default-link-color;
                background-color: @sidebar-default-link-bg;

                &:hover,
                &:focus {
                    color: @sidebar-default-link-hover-color;
                    background-color: @sidebar-default-link-hover-bg;
                }

                &.active {
                    color: @sidebar-default-link-active-color;
                    background-color: @sidebar-default-link-active-bg;
                }
            }

            &.sidebar-item-mini > a {
                color: @sidebar-default-link-mini-color;
            }
        }

        .hammer-scrollbar {
            background-color: @sidebar-default-scrollbar-bg;
        }
    }

    &.sidebar-inverse {
        color: @sidebar-inverse-color;
        background-color: @sidebar-inverse-bg;

        &.sidebar-open,
        &.sidebar-dragging {
            .box-shadow(3px 0 4px rgba(0, 0, 0, 0.32));
        }

        .sidebar-group {
            > span {
                color: @sidebar-inverse-group-color;
                border-bottom-color: @sidebar-inverse-border-color;
            }

            &.sticky-header > span {
                background-color: @sidebar-inverse-bg;
            }

            + .sidebar-item {
                border-top-color: @sidebar-inverse-border-color;
            }
        }

        .sidebar-item {
            > a {
                color: @sidebar-inverse-link-color;
                background-color: @sidebar-inverse-link-bg;

                &:hover,
                &:focus {
                    color: @sidebar-inverse-link-hover-color;
                    background-color: @sidebar-inverse-link-hover-bg;
                }

                &.active {
                    color: @sidebar-inverse-link-active-color;
                    background-color: @sidebar-inverse-link-active-bg;
                }
            }

            &.sidebar-item-mini > a {
                color: @sidebar-inverse-link-mini-color;
            }
        }

        .hammer-scrollbar {
            background-color: @sidebar-inverse-scrollbar-bg;
        }
    }
}

.navbar-default + .sidebar-trigger .sidebar-toggle,
.navbar-default + .sidebar-trigger + .sidebar-trigger .sidebar-toggle {
    > i {
        color: @sidebar-default-toggle-color;
    }

    &:hover {
        > i {
            color: @sidebar-default-toggle-hover-color;
        }
    }
}

.navbar-inverse + .sidebar-trigger .sidebar-toggle,
.navbar-inverse + .sidebar-trigger + .sidebar-trigger .sidebar-toggle {
    > i {
        color: @sidebar-toggle-inverse-color;
    }

    &:hover {
        > i {
            color: @sidebar-toggle-inverse-hover-color;
        }
    }
}

// Sidebar Right
// -------------------------

.sidebar-right {
    .sidebar-toggle {
        left: auto;
        right: 0;
        padding-left: 20px;
        padding-right: 0;

        > i {
            margin-left: 0;
            margin-right: -5px;
        }

        &:hover,
        &.sidebar-toggle-opened {
            > i {
                margin-right: -9px;
            }
        }
    }

    .sidebar-wrapper {
        right: 0;
        -webkit-transform: translate3d(@sidebar-wrapper-width, 0px, 0px);
        transform: translate3d(@sidebar-wrapper-width, 0px, 0px);

        &.sidebar-open {
            -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }

        &.sidebar-default {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(-3px 0 4px rgba(0, 0, 0, 0.18));
            }
        }

        &.sidebar-inverse {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(-3px 0 4px rgba(0, 0, 0, 0.32));
            }
        }

        .sidebar-item > a.active {
            border-left: inherit;
            border-right-width: 5px;
            border-right-style: solid;
            padding: 12px 10px 12px 15px;
        }
    }

    .sidebar-swipe {
        left: auto;
        right: 0;
    }

    .sidebar-open + .sidebar-swipe,
    .sidebar-force-open .sidebar-swipe {
        right: @sidebar-wrapper-width;
    }
}

// Responsive
// -------------------------

@media (max-width: @screen-xs-max) {
    .sidebar-wrapper {
        width: 80%;
        -webkit-transform: translate3d(-100%, 0px, 0px);
        transform: translate3d(-100%, 0px, 0px);
    }

    .sidebar-open + .sidebar-swipe {
        left: 80%;
    }

    .sidebar-force-open {
        .sidebar-swipe {
            left: 0;
        }
    }

    .sidebar-right {
        .sidebar-toggle {
            padding-left: 7px;
        }

        .sidebar-wrapper {
            -webkit-transform: translate3d(100%, 0px, 0px);
            transform: translate3d(100%, 0px, 0px);
        }

        .sidebar-open + .sidebar-swipe {
            left: auto;
            right: 80%;
        }

        .sidebar-force-open {
            .sidebar-swipe {
                left: auto;
                right: 0;
            }
        }
    }
}

@media (min-width: @screen-md-min) {
    .sidebar-trigger.sidebar-locked .sidebar-toggle {
        display: none;
    }

    .sidebar-wrapper.sidebar-open-init {
        -webkit-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

    .sidebar-force-open,
    .sidebar-force-open.sidebar-right {
        .sidebar-wrapper {
            &.sidebar-open,
            &.sidebar-dragging {
                .box-shadow(none);
            }
        }
    }
}


Playing around with less...

Playing around with less...

/** Navbar */

.navbar-inner-text (@base) when (lightness(@base) >= 58%) {
  color: #333333;
}
.navbar-inner-text (@base) when (lightness(@base) < 58%) {
  color: #f2f2f2;
}
.navbar-inner-text (@base) {
  text-shadow: 0 1px 0 lighten(@base, 15%);
}

.navbar-inner-color (@base) {
  @top: lighten(@base, 25%);
  @bottom: darken(@base, 15%);

  background-color: @base; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, @top, @bottom); /* For Chrome and Safari */
  background-image: -moz-linear-gradient(top, @top, @bottom); /* For old Fx (3.6 to 15) */
  background-image: -ms-linear-gradient(top, @top, @bottom); /* For pre-releases of IE 10*/
  background-image: -o-linear-gradient(top, @top, @bottom); /* For old Opera (11.1 to 12.0) */
  background-image: linear-gradient(to bottom, @top, @bottom); /* Standard syntax; must be last */

  .brand, .nav>li>a {
    .navbar-inner-text(@base);
  }
}

#navbar .navbar-inner {
  @base: #F2F2F2;
  .navbar-inner-color(@base);

  &.red {
    @base: #F22828;
    .navbar-inner-color(@base);
  }
  &.orange {
    @base: #F27728;
    .navbar-inner-color(@base);
  }
  &.yellow {
    @base: #F2DE28;
    .navbar-inner-color(@base);
  }
  &.green {
    @base: #77FF28;
    .navbar-inner-color(@base);
  }
  &.blue {
    @base: #2877FF;
    .navbar-inner-color(@base);
  }
  &.violet {
    @base: #7728FF;
    .navbar-inner-color(@base);
  }
}

error: pathspec 'octoprint/static/css/octoprint.less' did not match any file(s) known to git


Avatar now respects the size.

Avatar now respects the size.

@import "../styles/fonts.less";

.Avatar {
  display: inline-block;

  img {
    width: 100%;
    height: 100%;
  }
}

.Avatar--xs {
  height: 24px;
  width: 24px;
  line-height: 1em;
  vertical-align: middle;
}

.Avatar--sm {
  width: 40px;
  height: 40px;

  .Avatar__reputation {
    top: 8px;
    font-size: 12px;
    height: 24px;
    width: 24px;
    line-height: 24px;
  }
}

.Avatar--md {
  width: 50px;
  height: 50px;
}

.Avatar--lg {
  width: 60px;
  height: 60px;
}

.Avatar--xl {
  width: 70px;
  height: 70px;

  .Avatar__reputation {
    top: 20px;
    font-size: 15px;
    height: 30px;
    width: 30px;
    line-height: 30px;
  }
}

.Avatar__reputation {
  position: absolute;
  font-family: @font-alt;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  color: #27d0a9;
  overflow: hidden;
  right: -20px;
}

.Avatar__img {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  overflow: hidden;
}

@import "../styles/fonts.less";

.Avatar {
  line-height: 1em;
  text-align: center;
  display: inline-block;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }
}

.Avatar--xs {
  height: 24px;
  width: 24px;
  line-height: 1em;
  vertical-align: middle;
}

.Avatar--sm {
  width: 40px;
  height: 40px;

  .Avatar__reputation {
    top: 8px;
    font-size: 12px;
    height: 24px;
    width: 24px;
    line-height: 24px;
  }
}

.Avatar--md {
  width: 50px;
  height: 50px;
}

.Avatar--lg {
  width: 60px;
  height: 60px;
}

.Avatar--xl {
  width: 70px;
  height: 70px;

  .Avatar__reputation {
    top: 20px;
    font-size: 15px;
    height: 30px;
    width: 30px;
    line-height: 30px;
  }
}

.Avatar__reputation {
  position: absolute;
  font-family: @font-alt;
  background-color: white;
  border-radius: 50%;
  text-align: center;
  color: #27d0a9;
  overflow: hidden;
  right: -20px;
}

.Avatar__img {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  overflow: hidden;
}


Code style edit

Code style edit

// Import external dependencies

@import (less) '../../cf-core/src/cf-core.less';
@import (less) '../../cf-grid/src/cf-grid.less';

/* ==========================================================================
   Capital Framework
   Layout Helpers
   ========================================================================== */

/* topdoc
  name: Theme variables
  family: cf-layout
  notes:
    - "The following color and sizing variables are exposed, allowing you to
       easily override them before compiling."
  patterns:
  - name: Colors
    codenotes:
      - |
        @block__border-top
        @block__border-bottom
        @block__border-left
        @block__border-right
        @block__border
        @block__bg
        @content_main-border
        @content_sidebar-bg
        @content_sidebar-border
        @content_bar
        @content_line
        @grid_column__top-divider
        @grid_column__left-divider
  tags:
  - cf-layout
  - less
*/

// Color variables

// .block
@block__border-top:             #3a8899;
@block__border-bottom:          #3a8899;
@block__border-left:            #3a8899;
@block__border-right:           #3a8899;
@block__border:                 #3a8899;
@block__bg:                     lighten(#3a8899, 55%);

// .content_main
@content_main-border:           #3a8899;

// .content_sidebar
@content_sidebar-bg:            lighten(#3a8899, 55%);
@content_sidebar-border:        #3a8899;

// .content_bar
@content_bar:                   #3a8899;

// .content_line
@content_line:                  #3a8899;

// .grid_column__top-divider
@grid_column__top-divider:      #3a8899;

// .grid_column__top-divider
@grid_column__left-divider:     #3a8899;

/* topdoc
  name: Content layouts
  family: cf-layout
  patterns:
    - name: Standard content columns
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

                    Third-width column (spans 4/12 columns)

                    Quarter width column (spans 3/12 columns)

                    Three-quarter width column (spans 9/12 columns)

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          .content-l
            .content-l_col
      notes:
        - "Simplifies use of grid structure inside content containers (like .content-main)."
        - "Since .content-l_col's are nested within .content_main extra margins will occur.
           The .content-l container uses the grid_nested-col-group mixin to counter this."
        - ".content-l_col-RATIO classes default to stacking on mobile and displaying as columns
           above mobile-max width (600px). This may not be the desired breakpoint for
           all use cases, so mixins are provided to simplify changing column display to
           stacked."
        - "Three .content-l modifiers handle the stacking overrides for use cases of
           .content_main, .content_full, and .content_sidebar containers."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: .content-l__full modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

                    Third-width column (spans 4/12 columns)

                    Quarter width column (spans 3/12 columns)

                    Three-quarter width column (spans 9/12 columns)

      codenotes:
        - .content-l.content-l__full
      notes:
        - "Designed for use within .content_full containers."
        - "Displays .content-l_col-1-2 as columns at tablet sizes & above (600px+)"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3,
           .content-l_col-2-3, .content-l_col-3-8, .content-l_col-5-8)
           as columns above 767px."
    - name: .content-l__main modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

                    Third-width column (spans 4/12 columns)

                    Quarter width column (spans 3/12 columns)

                    Three-quarter width column (spans 9/12 columns)

      codenotes:
        - .content-l.content-l__main
      notes:
        - "Designed for use in .content_main containers, which have reduced (75%) width
           above tablet sizes to accommodate adjacent sidebar column."
        - "Displays .content-l_col-1-2 as columns in the tablet range, 600-800px;
           stacked from 800-899, the start of sidebar range; and as columns again at 900px+"
        - "Displays other common .content-l_col modifiers (.content-l_col-1-3, .content-l_col-2-3,
           .content-l_col-3-8, .content-l_col-5-8) as columns above 900px."
    - name: .content-l__sidebar modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Third-width column (spans 4/12 columns)

                    Two thirds-width column (spans 8/12 columns)

                    Third-width column (spans 4/12 columns)

                    Quarter width column (spans 3/12 columns)

                    Three-quarter width column (spans 9/12 columns)

      codenotes:
        - .content-l.content-l__sidebar
      notes:
        - "For use in sidebar containers, which are full width only
           on tablet widths (600-800px)."
        - "Displays .content-l_col-1-2 as columns in the tablet range,
           600-800px, and stacked at all other widths."
    - name: Large gutters modifier
      markup: |

                    Full-width column (spans 12 columns)

                    Half-width column (spans 6/12 columns)

                    Half-width column (spans 6/12 columns)

      codenotes:
        - .content-l.content-l__large-gutters
      notes:
        - "Adds 30px gutters to all columns by simply adding the
           .content-l__large-gutters modifier."
  tags:
    - cf-layout
*/

.content-l {
    // Used to position __divider modifiers
    position: relative;

    .respond-to-min(@tablet-min, {
        .grid_nested-col-group();
    });

    &__full {
        .respond-to-range(@tablet-min, 767px, {
            .stack-col-thirds();
            .stack-col-eighths();
            .stack-col-quarters();
        });
    }

    &__main {
        .respond-to-range(801px, 899px, {
            .stack-col(content-l_col-1-2);
        });

        .respond-to-range(@tablet-min, 899px, {
            .stack-col-thirds();
            .stack-col-eighths();
            .stack-col-quarters();
        });
    }

    &__sidebar {
        .stack-col-thirds();
        .stack-col-eighths();
        .stack-col-quarters();

        .respond-to-min(801px, {
            .stack-col(content-l_col-1-2);
        });
    }

    &__large-gutters {
        .respond-to-min(@tablet-min, {
            margin-left: -@grid_gutter-width;
            margin-right: -@grid_gutter-width;

            & .content-l_col {
                border-left-width: @grid_gutter-width;
                border-right-width: @grid_gutter-width;
            }
        });
    }
}

.content-l_col {
    .respond-to-max(@mobile-max, {
        & + & {
            margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
        }
    });
}

.respond-to-min(@tablet-min, {
    .content-l_col-1 {
        .grid_column(12);
    }

    .content-l_col-1-2 {
        .grid_column(6);
    }

    .content-l_col-1-3 {
        .grid_column(4);
    }

    .content-l_col-2-3 {
        .grid_column(8);
    }

    .content-l_col-3-8 {
        .grid_column(3, 8);
    }

    .content-l_col-5-8 {
        .grid_column(5, 8);
    }

    .content-l_col-1-4 {
        .grid_column(3);
    }

    .content-l_col-3-4 {
        .grid_column(9);
    }
});

/* topdoc
  name: Content layout column dividers
  family: cf-layout
  notes:
    - "Adds dividers between specified .content-l_col-X-X classes."
    - "Layout dividers work in conjunction with .content-l_col-X-X elements and
       have specific needs depending on which column element variant they are
       attached to. For example .content-l_col-1-2 has different divider needs
       than .content-l_col-1-3 because they may break to single columns at different
       breakpoints."
    - "Dividers use absolute positioning relative to the .content-l element and
       depends on .content-l using `position: relative;`. This allows vertical
       dividers to span the height of the tallest column. Just be aware that if
       you have more than one row of columns, and each row has columns of
       different widths, the borders will cause unwanted overlapping since they
       will span the height of the entire .content-l element."
  patterns:
    - name: .content-l_col__before-divider (modifier)
      markup: |

                Half-width column (spans 6/12 columns)

                Half-width column (spans 6/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

                Third-width column (spans 4/12 columns)

      codenotes:
        - .content-l_col__before-divider
  tags:
    - cf-layout
*/

.content-l_col__before-divider.content-l_col-1-2 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.content-l_col__before-divider.content-l_col-1-3 {
    .respond-to-max(@mobile-max {
        .grid_column__top-divider();
    });

    .respond-to-min(@tablet-min, {
        .grid_column__left-divider();
    });
}

.stack-col(@col) {
    .content-l_col.@{col} {
        display: block;
        width: 100%;

        &.content-l_col__before-divider {
            .grid_column__top-divider();
        }
    }

    &.content-l__large-gutters {
        .content-l_col.@{col}.content-l_col__before-divider {
            border-left-width: @grid_gutter-width;
        }
    }

    .content-l_col + .@{col} {
        margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
    }
}

.stack-col-thirds() {
    .stack-col(content-l_col-1-3);
    .stack-col(content-l_col-2-3);
}

.stack-col-eighths() {
    .stack-col(content-l_col-3-8);
    .stack-col(content-l_col-5-8);
}

.stack-col-quarters() {
    .stack-col(content-l_col-1-4);
    .stack-col(content-l_col-3-4);
}

/* topdoc
  name: Content bar
  family: cf-layout
  patterns:
    - name: A 10 pixel bar that divides the header or hero from the main content
      markup: |

      notes:
        - "This is necessary because we don't have a predictable place to put a
           full-width border. It needs to be under the hero on pages with
           heroes, but under the header if there is no hero."
        - ".content_bar must come after .content_hero but before .content_wrapper"
  tags:
    - cf-layout
*/

.content_bar {
    height: 10px;
    background: @content_bar;
}

/* topdoc
  name: Content line
  family: cf-layout
  patterns:
    - name: "A 1 pixel edge to edge bar that can divide content."
      markup: |

  tags:
    - cf-layout
*/

.content_line {
    height: 1px;
    background: @content_line;
}

/* topdoc
  name: Main content and sidebar
  family: cf-layout
  patterns:
    - name: Standard layout for the main content area and sidebar
      markup: |

                Content hero

                    Main content area

                    Sidebar

      codenotes:
        - |
          Structural cheat sheet:
          -----------------------
          main.content
            .content_hero
            .content_bar
            .content_wrapper
              .content_sidebar
              .content_main
      notes:
        - "By default .content_main and .content_sidebar stack vertically. When
           using the modifiers described below to create columns, the columns
           will remain stacked for smaller screens and then convert to to
           columns at 801px."
        - ".content_bar must come after .content_hero (if it exists) but before
           .content_wrapper."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Left-hand navigation layout
      markup: |

                    Section navigation

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                Footer

      codenotes:
        - .content__1-3
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
    - name: Right-hand sidebar layout
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content__2-1
      notes:
        - "Add a class of .content__L-R to main.content to determine the width
           ratio of .content_main and .content_sidebar, where 'L' is the
           left-hand item and 'R' is the right-hand item. The two common
           configurations are 1-3 (sidebar on the left, content on the right, in
           a ratio of 1:3) and 2-1 (content on the left, sidebar on the right,
           in a ratio of 2:1). It is assumed that the content is wider than the
           sidebar."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Narrow content column option
      markup: |

Main content area

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Cum corrupti tempora nam nihil qui mollitia consectetur
                        corporis nemo culpa dolorum! Laborum at eos deleniti
                        consequatur itaque officiis debitis quisquam! Provident!

                    Sidebar

                Footer

      codenotes:
        - .content_main__narrow
      notes:
        - "Add a class of .content_main__narrow to .content_main to get a
           one-column (in a 12-column grid) gutter on the right side."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
    - name: Flush bottom modifier
      markup: |

                    Side with no bottom padding...

                    Main content with no bottom padding...

                        .content__flush-bottom is very useful when you have a
                        content block inside of .content_main with a background
                        and flush sides.

                Footer

      codenotes:
        - .content__flush-bottom
      notes:
        - "Add a class of .content__flush-bottom to .content_main or
           content_sidebar to remove bottom padding."
    - name: Flush top modifier (only on small screens)
      markup: |

                    Side with no top padding on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-top-on-small
      notes:
        - "Add a class of .content__flush-top-on-small to .content_main or
           .content_sidebar to remove top padding on small screens only.
           'Small' screens in this case refers to the breakpoint where
           .content_main and .content_sidebar single column layout."
    - name: Flush all modifier (only on small screens)
      markup: |

                    Side with no padding or border-based gutters on small screens...

                    Main content

                Footer

      codenotes:
        - .content__flush-all-on-small
      notes:
        - "Add a class of .content__flush-all-on-small to .content_main or
           .content_sidebar to remove all padding and border-based gutters on
           small screens only. 'Small' screens in this case refers to the
           breakpoint where .content_main and .content_sidebar single column layout."
  tags:
    - cf-layout
*/

.content_wrapper {
    &:extend(.wrapper all);
}

.content_intro,
.content_main,
.content_sidebar {
    padding: unit(@grid_gutter-width / @base-font-size-px, em)
             unit((@grid_gutter-width / 2) / @base-font-size-px, em);

    .respond-to-min(600px, {
        .grid_column(12);
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
    });

    .respond-to-min(801px, {
        padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                 0;
    });
}

.respond-to-min(801px, {
    .content_intro {
        .grid_column(12);
    }
});

// Set up standard multi-column content area layouts
.respond-to-min(801px, {
    .content {
        &__1-3 {
            .content_sidebar {
                .grid_column(3);

                padding-right: unit(@grid_gutter-width / @base-font-size-px, em);
            }

            .content_main {
                .grid_column(9);
                position: relative;

                &:after {
                    content: '';
                    border-left: 1px solid @content_main-border;
                    position: absolute;
                    top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
                    bottom: 0;
                    left: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }
        }

        &__2-1 {
            .content_main {
                .grid_column(8);

                &:after {
                    right: unit(-1 * @grid_gutter-width / @base-font-size-px, em);
                }
            }

            .content_sidebar {
                .grid_column(4);

                padding-left: unit(@grid_gutter-width / @base-font-size-px, em);
            }
        }
    }
}); // END min-width 801 block

.respond-to-min(1024px, {
    .content__2-1 .content_main__narrow {
        .grid_column(7, @grid_total-columns, 0, 1);
    }
});

.content__flush-bottom {
    padding-bottom: 0;
}

.content__flush-top-on-small {
    .respond-to-max(800px, {
        padding-top: 0;
    });
}

.content__flush-all-on-small {
    .respond-to-max(800px, {
        padding: 0;
        border-width: 0;
    });
}

/* topdoc
  name: Block
  family: cf-layout
  notes:
    - ".block is a base class with several modifiers that help you separate
       chunks of content via margins, padding, borders, and backgrounds."
  patterns:
    - name: Standard block example
      markup: |
        Main content...

            Content block

            Content block

            Content block

      codenotes:
        - .block
      notes:
        - "The standard .block class by itself simply adds a margin of twice the
           gutter width to the top and bottom."
    - name: Border-top modifier
      markup: |
        Main content...

            Content block with top border.

      codenotes:
        - .block.block__border-top
      notes:
        - "Adds top border to .block."
    - name: Border-bottom modifier
      markup: |
        Main content...

            Content block with bottom border.

      codenotes:
        - .block.block__border-bottom
      notes:
        - "Adds bottom border to .block."
    - name: Border-left modifier
      markup: |
        Main content...

            Content block with left border.

      codenotes:
        - .block.block__border-left
      notes:
        - "Adds left border to .block."
    - name: Border-right modifier
      markup: |
        Main content...

            Content block with right border.

      codenotes:
        - .block.block__border-right
      notes:
        - "Adds right border to .block."
    - name: Border modifier
      markup: |
        Main content...

            Content block with borders on all sides.

      codenotes:
        - .block.block__border
      notes:
        - "Adds border on all sides to .block."
    - name: Flush-top modifier
      markup: |
        Main content...

            Content block with no top margin.

            Content block

      codenotes:
        - .block.block__flush-top
      notes:
        - "Removes the top margin from .block."
    - name: Flush-bottom modifier
      markup: |
        Main content...

            Content block with no bottom margin.

            Content block with no top margin.

      codenotes:
        - .block.block__flush-bottom
      notes:
        - "Removes the bottom margin from .block."
    - name: Flush-sides modifier
      markup: |

                    Section navigation

                    Main content...

                        Content block with no side margins.

      codenotes:
        - .block.block__flush-sides
      notes:
        - "Removes the side margin from .block."
        - "Typically used in conjuction with .block__bg to create a 'well' whose
           background extends into the left and right gutters. (See below.)"
    - name: Flush modifier
      markup: |

                    Section navigation

                    Main content...

                        Content block with no margins.

      codenotes:
        - .block.block__flush
      notes:
        - "Removes the side, top, and bottom margin from .block."
    - name: Background modifier
      markup: |
        Main content...

            Content block with a background

      codenotes:
        - .block.block__bg
      notes:
        - "Adds a background color and padding to .block."
        - "Setup for (ems-equivalent) 30px padding on top and 60px on bottom."
    - name: Background and flush-sides modifier combo example
      markup: |

                    Section navigation

                    Main content...

                        Content block with a background and flush sides

      codenotes:
        - .block.block__flush-sides.block__bg
      notes:
        - "This is an example of combining modifiers to get a flush padded bg
           with a .block."
    - name: Padded-top modifier
      markup: |
        Main content...

            Content block with reduced top margin & added top padding
            and border.

      codenotes:
        - .block.block__padded-top
      notes:
        - "Breaks top margin into margin & padding. Useful in combination with
           block__border-top to add padding between block contents & border."
    - name: Padded-bottom modifier
      markup: |

            Content block with reduced bottom margin & added bottom padding
            and border.

        Content...
      codenotes:
        - .block.block__padded-bottom
      notes:
        - "Breaks bottom margin into margin & padding. Useful in combination with
           block__border-bottom to add padding between block contents & border."
    - name: Sub blocks
      markup: |

                Sub content block

                Sub content block

                Sub content block

      codenotes:
        - .block.block__sub
      notes:
        - "Useful for when you need some consistent margins between
           blocks that are nested within other blocks."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
    - name: Mixing content blocks with content layouts
      markup: |

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

                    Content block that is also a content column.
                    Notice how my top margins only exist on smaller screens when
                    I need to stack vertically.

      codenotes:
        - .block.content-l_col
      notes:
        - "You can safely combine .block with .content-l_col to
           achieve a column-based layout at larger screens with no top margins
           and a vertical layout at smaller screens that do have margins."
        - "Note that the divs with inline styles are for demonstration purposes
           only and should not be used in production."
  tags:
    - cf-layout
*/

.block {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    margin-bottom: unit((@grid_gutter-width * 2) / @base-font-size-px, em);

    &__border-top {
        border-top: 1px solid @block__border-top;
    }

    &__border-bottom {
        border-bottom: 1px solid @block__border-bottom;
    }

    &__border-left {
        border-left: 1px solid @block__border-left;
    }

    &__border-right {
        border-right: 1px solid @block__border-right;
    }

    &__border {
        border: 1px solid @block__border;
    }

    &__flush-top {
        margin-top: 0 !important;
    }

    &__flush-bottom {
        margin-bottom: 0 !important;
    }

    &__flush-sides {
        margin-right: -(@grid_gutter-width / 2);
        margin-left: -(@grid_gutter-width / 2);

        .respond-to-min(600px, {
            margin-right: -@grid_gutter-width;
            margin-left: -@grid_gutter-width;
        });
    }

    &__flush {
        margin-left: -(@grid_gutter-width / 2);
        margin-top: 0 !important;
        margin-right: -(@grid_gutter-width / 2);
        margin-bottom: 0 !important;

        .respond-to-min(600px, {
            margin-right: -@grid_gutter-width;
            margin-left: -@grid_gutter-width;
        });
    }

    &__bg {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        padding-bottom: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
        background: @block__bg;

        .respond-to-min(600px, {
            padding: unit(45 / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
        });
    }

    &__padded-top {
        padding-top: unit(30px / @base-font-size-px, em);
        margin-top: unit(30px / @base-font-size-px, em);
    }

    &__padded-bottom {
        padding-bottom: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    &__sub {
        margin-top: unit(30px / @base-font-size-px, em);
        margin-bottom: unit(30px / @base-font-size-px, em);
    }

    // Overrides for when .block is also a column
    .content-l_col&,
    .content-l_col&__sub {
        .respond-to-min(600px, {
            margin-top: 0;
        });
    }
}

/* topdoc
  name: Bleedbar sidebar styling
  family: cf-layout
  patterns:
    - name: Give the sidebar a background color that bleeds off the edge of the screen
      markup: |

                Content hero

                    Main content area

                    Bleeding sidebar

      codenotes:
        - ".content__bleedbar"
      notes:
        - "Simply add class .content__bleedbar to main.content."
        - "Only supports sidebars on the right, for now."
        - "Inline styling is for demonstration purposes only; do not include it
           in your markup."
  tags:
    - cf-layout
*/

.content__bleedbar {
    // Overrides the border between main and sidebar, because bleedbar makes its own.
    .content_main:after {
        content: none;
    }

    .content_sidebar {
        padding: unit(@grid_gutter-width / @base-font-size-px, em)
                 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
        background: @content_sidebar-bg;
    }

    .respond-to-min(801px, {
        // Prevent pseudo element background from creating horizontal scrollbar.
        overflow: hidden;

        .content_sidebar {
            padding: unit((@grid_gutter-width * 2) / @base-font-size-px, em)
                     0
                     unit((@grid_gutter-width / 2) / @base-font-size-px, em)
                     unit(@grid_gutter-width / @base-font-size-px, em);
            margin-left: 0;
            position: relative;
            z-index: 1;

            // Remove background color from actual sidebar.
            // It will now be provided by pseudoelement :after sidebar parent.
            background: transparent;

            .lt-ie8 & {
                // Make sure the sidebar still has a background in IE7.
                padding-right: @grid_gutter-width;
                background: @content_sidebar-bg;
            }
        }

        .content_wrapper {
            position: relative;

            &:after {
                // Create faux sidebar background.
                content: '';
                display: block;
                width: 9999px;
                border-left: 1px solid @content_sidebar-border;
                height: 100%;
                position: absolute;
                top: 0;
                z-index: 0;
                // The three in the below calculation is a magic number.
                // Not entirely sure what to do about it right now.
                margin-left: (@grid_gutter-width / 3);
                background: @content_sidebar-bg;
            }
        }

        &.content__2-1 .content_wrapper:after {
            left: 66.666666667%;
        }

        &.content__3-1 .content_wrapper:after {
            left: 75%;
        }
    });
}

/* topdoc
  name: cf-grid helpers
  family: cf-layout
  patterns:
    - name: .wrapper (base)
      markup: |

            Wrapper

      notes:
        - "Turns an element into a cf-grid wrapper at 801px and above."
        - "Includes some explicit declarations for IE8 due to the fact that it
           doesn't support media queries."
    - name: .wrapper__match-content (modifier)
      markup: |

            .wrapper.wrapper__match-content

                    .content_wrapper .content_main

      notes:
        - "The .content area has a visual gutter twice the size of a normal
           wrapper because the gutters from the sidebar and main content divs
           add to the gutters of the wrapper. This modifier gives you a wrapper
           with wider gutters to match the visual gutters of the .content area."
    - name: Column divider modifiers
      notes:
        - "cf-grid columns use left and right borders for fixed margins which
           means it's not possible to set visual left and right borders directly
           on them. Instead we can use the :before pseudo element and position
           it absolutely. The added benefit of doing it this way is that the
           border spans the entire height of the next parent using `position:
           relative;`. This means that the border will always match the height
           of the tallest column in the row."
      codenotes:
        - .grid_column__top-divider
        - .grid_column__left-divider
        - |
          .my-column-1-2 {

              // Creates a column that spans 6 out of 12 columns.
              .grid_column(6, 12);

              // Add a top divider only at screen 599px and smaller.
              .respond-to-max(599px {
                  .grid_column__top-divider();
              });

              // Add a left divider only at screen 600px and larger.
              .respond-to-min(600px, {
                  .grid_column__left-divider();
              });

          }
  tags:
    - cf-layout
*/

.wrapper {
    .respond-to-min(801px, {
        .grid_wrapper();
    });

    &__match-content {
        padding-left: @grid_gutter-width / 2;
        padding-right: @grid_gutter-width / 2;

        .respond-to-min(600px, {
            padding-left: @grid_gutter-width;
            padding-right: @grid_gutter-width;
            max-width: 1140px;
        });
    }
}

.lt-ie9 {
    & .wrapper {
        max-width: 960px;
    }

    & body {
        min-width: 800px;
    }
}

.grid_column__top-divider {
    margin-top: unit((@grid_gutter-width * 2) / @base-font-size-px, em);
    border-left-width: @grid_gutter-width / 2;

    &:before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
        background-color: @grid_column__top-divider;
        position: static;
        width: 100%;
        margin-left: auto !important;
    }
}

.grid_column__left-divider {
    border-left-width: @grid_gutter-width;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        display: block;
        background-color: @grid_column__left-divider;
        margin-left: -@grid_gutter-width;
    }
}

/* topdoc
  name: EOF
  eof: true
*/


fix button outline on focus

fix button outline on focus

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/notadd/administration.git/'


add grunt base compile option

add grunt base compile option

// Core variables and mixins
@import "lesshat.less";
@import "variables.less";
@import "mixins.less";

// Reset
@import "print.less";

// Core CSS
@import "style.less";
@import "style-mower.less";
@import "style-layout.less";

// Components
@import "plugins.less";
@import "custom.less";

error: pathspec 'src/css/mower.less' did not match any file(s) known to git


fix inline image height

fix inline image height

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/MatTheCat/clean.git/'


Create image-sliders.less

Create image-sliders.less

fatal: unable to access 'https://github.com/EvolSoft/xWeb.git/': The requested URL returned error: 403


Removed obsolete rule from shield.less

Removed obsolete rule from shield.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Fixeg/DnD-5e-Character-Sheet-Generator.git/'


Fix first child hub-content-action button

fatal: unable to access 'https://github.com/Livefyre/streamhub-sdk.git/': The requested URL returned error: 403


Add less-file for IE fixes

Add less-file for IE fixes

error: pathspec 'fileadmin/template/less/fix_ie.less' did not match any file(s) known to git


Create sidebar.less

Create sidebar.less

@import "variables.less";

// Sidebar Components

// Large Screen
@media (min-width: 1200px){
    .post-container, .sidebar-container{
        padding-right: 5%;
    }
}
@media (min-width: 768px){
    .post-container{
        padding-right: 5%;
    }
}

// Container of Sidebar, also Friends
.sidebar-container{
    color: @gray-l;
    font-size: 14px;
    h5{
        color: @gray;
        padding-bottom: 1em;
        a{
            color: @gray !important;
            text-decoration: none;
        }
    }
    a{
        color: @gray-l !important;
        &:hover, &:active{
            color: @brand-primary !important;
        }
    }
    .tags{
        a{
            border-color: @gray-l;
            &:hover, &:active{
                border-color: @brand-primary;
            }
        }
    }
    .short-about{
        img{
            width: 80%;
            display: block;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        p{
            margin-top: 0px;
            margin-bottom: 20px;
        }
        .list-inline>li{
            padding-left: 0px;
        }
    }
}

error: pathspec 'less/sidebar.less' did not match any file(s) known to git


SW-7856 Refactored panel component

SW-7856 Refactored panel component

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/simkli/shopware.git/'


make loading throbber animate in WebKit

make loading throbber animate in WebKit

@import 'lib';

// Site-wide or structural styles only in this file.
// Can't find a better file for your style? Create one!
// This is not your diaper.

* {
    .border-box;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
}

.js-hidden, .hidden {
    display: none;
}

.emaillink-wrapper {
    /* Necessary when emaillink is in a paragraph. */
    display: inline-block;
}

span.emaillink {
    direction: rtl;
    unicode-bidi: bidi-override;
    .i {
        display: none;
    }
}

a {
    text-decoration: none;
    color: @link;
    &:hover {
        text-decoration: underline;
    }
}

body {
    background: @grain-src @bg;
    color: @text;
    overflow-x: hidden;
}

// Specificified!
body .loading-fragment {
    background-color: rgba(0,0,0,0.5);
    z-index: 11;  // To cover the header.
    em {
        // Because WebKit can't figure out how to animate PNGs.
        -webkit-animation-duration: 1.5s;
        -webkit-animation-name: spin;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        background: url(../../img/zamboni/mobile/loading-white.png) center no-repeat;
        display: inline-block;
        height: 86px;
        margin: -43px 0 0 -43px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 86px;
        &:before {
            .border-radius(180px);
            background: rgba(0,0,0,.3);
            content: "";
            display: block;
            height: 86px;
            margin: -43px 0 0 -43px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            width: 86px;
        }
    }
}

.notification-box {
    .box-shadow(0 -1px 0 #ddd inset, 0 1px 0 rgba(0,0,0,.1));
    padding: 15px;
    background: rgba(255,255,255,0.6);
    form {
        line-height: 28px;
        button {
            float: right;
        }
    }
    ol, ul {
        &:last-child {
            margin-bottom: 0;
        }
    }
    p {
        margin: .5em 0 0;
    }
    b {
        color: #333;
    }
    h1 {
        color: maroon;
        font-size: 14px;
    }
    h2 {
        color: #458;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
    }
    &.error {
        background: #FEE3E5;
        border-color: #E0C9D6;
        h2 {
            color: #B14949;
        }
    }
    &.warning {
        background: #fd9;
        border: 1px solid darken(#fd9, 60%);
    }
    &.full {
        a:last-child {
            font-weight: bold;
        }
        p {
            margin: 0;
            + p {
                font-size: 12px;
                margin-top: 5px;
            }
        }
    }
}

#site-header, #page {
    min-width: 320px;
    section.main {
        margin-left: auto;
        margin-right: auto;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        &.full {
            width: 100%;
            > div {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
}

#page {
    position: relative;
    section.main {
        &:only-child {
            padding-top: 24px;
            padding-bottom: 12px;
        }
    }
}

.row {
    clear: both;
}

.col {
    float: left;
    margin-left: @gutter * @px;
    &:first-child {
        margin-left: 0;
    }
}

.html-rtl .col {
    float: right;
    margin-right: @gutter * @px;
    margin-left: auto;
    &:first-child {
        margin-right: 0;
    }
}

// TODO potch: Belongs with the "collapsible" widget.
.more {
    display: none;
    &.expand {
        display: block;
    }
}

// Fixes z-index footer issue on login page.
.login #site-footer {
    background: none;
    position: relative;
    z-index: 2;
}

.hidden {
    display: none;
}

.force-mobile {
    #site-header section.main,
    #page section.main,
    #site-footer {
        margin: 0 auto;
    }
    #page > .overlay {
        max-width: 100%;
    }
}

// 'Notice' pages have a padded body and a home icon in the header.
// 'Alpha' pages have a padded body and a back icon.
body[data-page-type=notice], body[data-page-type=alpha] {
    section.primary {
        padding: 15px;
        h2 {
            font-size: 20px;
            border-bottom: 1px solid @dark-gray;
            padding-bottom: 10px;
        }
    }
}

#offline-pixel {
    display: none;
    width: 1px;
    height: 1px;
}

#site-footer {
    display: none;
    padding: 15px 0 30px;

    margin-top: 15px;
    border-top: 1px solid rgba(3, 16, 26, 0.13);
    .box-shadow(inset 0 1px fade(#fff, 50%));

    .account {
        color: @dark-gray;
        font-weight: 400;
        margin-bottom: 5px;
        a {
            font-weight: 600;
        }
        .logout {
            font-weight: 200;
        }
    }
    // Reviewers should always see a footer.
    &.reviewer {
        display: block;
    }
}

// Mobile footer needs only the "log in" button.
@media (max-width: @not-desktop) {
    #site-footer.anonymous {
        display: block;
        text-align: center;
        nav {
            display: none;
        }
    }
}

.force-mobile {
    .account, .footer-links a {
        padding: 4px;
    }
    .footer-links {
        p {
            margin: 0;
        }
        a {
            display: block;
            &:hover {
                background-color: rgba(255,255,255,.35);
                color: @link-dark;
                text-decoration: underline;
            }
        }
        p + p,
        a + a {
            border-top: 1px solid @light-gray;
        }
    }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0turn); }
    to { -webkit-transform: rotate(1turn); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0turn); }
    to { -moz-transform: rotate(1turn); }
}
@keyframes spin {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

@import 'lib';

// Site-wide or structural styles only in this file.
// Can't find a better file for your style? Create one!
// This is not your diaper.

* {
    .border-box;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
}

.js-hidden, .hidden {
    display: none;
}

.emaillink-wrapper {
    /* Necessary when emaillink is in a paragraph. */
    display: inline-block;
}

span.emaillink {
    direction: rtl;
    unicode-bidi: bidi-override;
    .i {
        display: none;
    }
}

a {
    text-decoration: none;
    color: @link;
    &:hover {
        text-decoration: underline;
    }
}

body {
    background: @grain-src @bg;
    color: @text;
    overflow-x: hidden;
}

// Specificified!
body .loading-fragment {
    background-color: rgba(0,0,0,0.5);
    z-index: 11;  // To cover the header.
    em {
        .border-radius(4px);
        background: url(../../img/zamboni/mobile/loading-white.png) rgba(0,0,0,.25) 50% 50% no-repeat;
        display: inline-block;
        height: 66px;
        width: 66px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -33px 0 0 -33px;
    }
}

.notification-box {
    .box-shadow(0 -1px 0 #ddd inset, 0 1px 0 rgba(0,0,0,.1));
    padding: 15px;
    background: rgba(255,255,255,0.6);
    form {
        line-height: 28px;
        button {
            float: right;
        }
    }
    ol, ul {
        &:last-child {
            margin-bottom: 0;
        }
    }
    p {
        margin: .5em 0 0;
    }
    b {
        color: #333;
    }
    h1 {
        color: maroon;
        font-size: 14px;
    }
    h2 {
        color: #458;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
    }
    &.error {
        background: #FEE3E5;
        border-color: #E0C9D6;
        h2 {
            color: #B14949;
        }
    }
    &.warning {
        background: #fd9;
        border: 1px solid darken(#fd9, 60%);
    }
    &.full {
        a:last-child {
            font-weight: bold;
        }
        p {
            margin: 0;
            + p {
                font-size: 12px;
                margin-top: 5px;
            }
        }
    }
}

#site-header, #page {
    min-width: 320px;
    section.main {
        margin-left: auto;
        margin-right: auto;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        &.full {
            width: 100%;
            > div {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
}

#page {
    position: relative;
    section.main {
        &:only-child {
            padding-top: 24px;
            padding-bottom: 12px;
        }
    }
}

.row {
    clear: both;
}

.col {
    float: left;
    margin-left: @gutter * @px;
    &:first-child {
        margin-left: 0;
    }
}

.html-rtl .col {
    float: right;
    margin-right: @gutter * @px;
    margin-left: auto;
    &:first-child {
        margin-right: 0;
    }
}

// TODO potch: Belongs with the "collapsible" widget.
.more {
    display: none;
    &.expand {
        display: block;
    }
}

// Fixes z-index footer issue on login page.
.login #site-footer {
    background: none;
    position: relative;
    z-index: 2;
}

.hidden {
    display: none;
}

.force-mobile {
    #site-header section.main,
    #page section.main,
    #site-footer {
        margin: 0 auto;
    }
    #page > .overlay {
        max-width: 100%;
    }
}

// 'Notice' pages have a padded body and a home icon in the header.
// 'Alpha' pages have a padded body and a back icon.
body[data-page-type=notice], body[data-page-type=alpha] {
    section.primary {
        padding: 15px;
        h2 {
            font-size: 20px;
            border-bottom: 1px solid @dark-gray;
            padding-bottom: 10px;
        }
    }
}

#offline-pixel {
    display: none;
    width: 1px;
    height: 1px;
}

#site-footer {
    display: none;
    padding: 15px 0 30px;

    margin-top: 15px;
    border-top: 1px solid rgba(3, 16, 26, 0.13);
    .box-shadow(inset 0 1px fade(#fff, 50%));

    .account {
        color: @dark-gray;
        font-weight: 400;
        margin-bottom: 5px;
        a {
            font-weight: 600;
        }
        .logout {
            font-weight: 200;
        }
    }
    // Reviewers should always see a footer.
    &.reviewer {
        display: block;
    }
}

// Mobile footer needs only the "log in" button.
@media (max-width: @not-desktop) {
    #site-footer.anonymous {
        display: block;
        text-align: center;
        nav {
            display: none;
        }
    }
}

.force-mobile {
    .account, .footer-links a {
        padding: 4px;
    }
    .footer-links {
        p {
            margin: 0;
        }
        a {
            display: block;
            &:hover {
                background-color: rgba(255,255,255,.35);
                color: @link-dark;
                text-decoration: underline;
            }
        }
        p + p,
        a + a {
            border-top: 1px solid @light-gray;
        }
    }
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0turn); }
    to { -webkit-transform: rotate(1turn); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0turn); }
    to { -moz-transform: rotate(1turn); }
}
@keyframes spin {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}


style tweaks to tablet footer menu

style tweaks to tablet footer menu

fatal: unable to access 'https://github.com/amazingBastard/sva-accreditation.git/': The requested URL returned error: 403


fix a trailing comma in css selectors

fix a trailing comma in css selectors

fatal: unable to access 'https://github.com/Jobava/zamboni.git/': The requested URL returned error: 403


simplify example css

simplify example css

fatal: unable to access 'https://github.com/vsn4ik/bootstrap.git/': The requested URL returned error: 403


removed home layout class

removed home layout class

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


delete needless css

delete needless css

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/enginejs/skeleton.git/'


remove allowance for app bar

remove allowance for app bar

fatal: unable to access 'https://github.com/Thinkful/ui.git/': The requested URL returned error: 403


Create base.less

Create base.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/598918/cmb-note.git/'


edit pottery form

edit pottery form

.group {
    .control-group{
        width: 100%;
        float: left;
        .control-label {

        }
        .control {
            float: left;
            .radio {
                width: 100%;
                float: left;
            }
        }
    }
}

error: pathspec 'src/Kdig/OrientBundle/Resources/public/less/orient.less' did not match any file(s) known to git


revert switch height

revert switch height

@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: @component-background;
    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 {
    margin-left: -16.5px;
  }

  &-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 {
      margin-left: -25px;
    }
  }

  &-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: @input-height-base;
  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: @component-background;
    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 {
    margin-left: -16.5px;
  }

  &-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 {
      margin-left: -25px;
    }
  }

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

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

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


Added global scroll bar styles import

Added global scroll bar styles import

/* #Scroll Bar
================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(255,255,255,0.4);
    -webkit-box-shadow: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: white;
    -webkit-box-shadow: none;
}

::-webkit-scrollbar-corner {
    background: none;
}

error: pathspec 'app/styles/imports/scroll-bar.less' did not match any file(s) known to git


Tweak drowpdown positioning

Tweak drowpdown positioning

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Thinkful/ui.git/'


Fixed region label vertical alignment

Fixed region label vertical alignment

@import "globalStyles.less";
@import "textAreaInputStyles.less";
@import "annotationInputStyles.less";
@import "mainClassDefinitions.less";
@import "previewStyles.less";
@import "sectionPickerOverrides.less";
@import "animatorStyles.less";
@import "tooltipStyles.less";

/*---------------------------------------------------------*
	Constant Sizes
*---------------------------------------------------------*/
@ClipperUIWidth: 322px;
@ClipperUIInnerPadding: 24px;
@ClipperUITopRightOffset: 20px;
@ClipperUIDropShadowBuffer: 7px;
@FooterOffset: 6px;
@OneNotePageLeftPadding: 20px;
@OneNotePageRightPadding: 40px;
@OneNotePageWidth: 624px + @OneNotePageLeftPadding + @OneNotePageRightPadding;
@ClipperBorderRadius: 8px;
@ClipperScrollbarOffsetRight: 20px;

/*---------------------------------------------------------*
	Constant Colors
*---------------------------------------------------------*/
@OneNotePurple: #7321a6;
@OneNotePurpleTransparent: rgba(128, 46, 179, 0.95);

@WideButtonBackgroundColor: #ffffff;
@WideButtonHoverColor: #e5d6ec;

@DarkBackgroundColor: #56197c;
@DarkHoverColor: #8f4db8;

@ClipperDividerColor: #e6b3cf;
@ClipperLightFontColor: #e5d6ec;

@ClipperScrollbarDark: rgba(0, 0, 0, 0.5);

@ClipperBoxShadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);

/*---------------------------------------------------------*
	Fonts
*---------------------------------------------------------*/

// CSS declarations for (Apple & Android) users who don't have Segoe UI
@font-face {
	font-family: 'Segoe UI';
	src: url('segoeui.eot');
	src: local("Segoe UI"), local("Segoe"), local("Segoe WP"), url('https://www.onenote.com/styles/segoeui.eot?#iefix') format('embedded-opentype'), url('https://www.onenote.com/styles/segoeui.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Light';
	src: url('segoeuil.eot');
	src: local("Segoe UI Light"), local("Segoe WP Light"), url('https://www.onenote.com/styles/segoeuil.eot?#iefix') format('embedded-opentype'), url('https://www.onenote.com/styles/segoeuil.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*---------------------------------------------------------*
	ID Styles
*---------------------------------------------------------*/

#clipButtonContainer {
	margin-top: 15px;
}

#clipperFooterContainer {
	padding-top: 20px;
	white-space: nowrap;
}

#closeButtonContainer {
	position: absolute;
	margin-left: -30px;
	left: 100%;
}

#currentUserDetails {
	overflow: hidden;
	text-align: right;
}

#feedbackImage {
	height: 13px;
	width: 13px;
	padding-right: 5px;
	padding-top: 2px;
	float: left;
}

#unsupportedBrowserContainer {
	position: fixed;
	top: @ClipperUITopRightOffset;
	right: @ClipperUITopRightOffset;
	height: 225px;
	width: @ClipperUIWidth;
	background: @OneNotePurple;
	border-radius: @ClipperBorderRadius;
	box-shadow: @ClipperBoxShadow;
	text-align: center;
	color: white;

	// In older versions of IE, there is rendering issues with CSS classes, so we have to use ids instead
	#unsupportedBrowserPanel {
		padding-top: @ClipperUIInnerPadding;
		padding-left: @ClipperUIInnerPadding;
		padding-right: @ClipperUIInnerPadding;
		padding-bottom: @ClipperUIInnerPadding - @FooterOffset;
	}
}

#mainController {
	position: fixed;
	top: @ClipperUITopRightOffset;
	right: @ClipperUITopRightOffset;
	width: 100px;
	background: @OneNotePurple;
	background: @OneNotePurpleTransparent;
	border-radius: @ClipperBorderRadius;
	box-shadow: @ClipperBoxShadow;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	.panelContent {
		padding-top: @ClipperUIInnerPadding;
		padding-left: @ClipperUIInnerPadding;
		padding-right: @ClipperUIInnerPadding;
		padding-bottom: @ClipperUIInnerPadding - @FooterOffset;
		text-align: center;
		width: @ClipperUIWidth - (@ClipperUIInnerPadding*2);
	}
}

#regionButton {
	.icon {
		// For the region mode button, the icon is a little fatter so we need to reduce padding with the same amount
		padding-right: 8px; // 12px - 4px
	}
}

#regionSelectorContainer {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	cursor: crosshair;
	overflow: hidden;

	#outerFrame {
		opacity: 0.6;
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	#innerFrame {
		border: solid white 1px;
		opacity: 1;
		width: 0;
		height: 0;
		position: fixed;
	}
}

#signInLogo {
	display: block;
	margin: auto;
	height: 60px;
	width: 60px;
}

#signInMessageLabelContainer {
	color: white;
	font-size: 34px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#userDropdownArrow {
	float: right;
	height: auto;
	width: 10px;
	padding-top: 7px;
	padding-left: 5px;
}

@import "globalStyles.less";
@import "textAreaInputStyles.less";
@import "annotationInputStyles.less";
@import "mainClassDefinitions.less";
@import "previewStyles.less";
@import "sectionPickerOverrides.less";
@import "animatorStyles.less";
@import "tooltipStyles.less";

/*---------------------------------------------------------*
	Constant Sizes
*---------------------------------------------------------*/
@ClipperUIWidth: 322px;
@ClipperUIInnerPadding: 24px;
@ClipperUITopRightOffset: 20px;
@ClipperUIDropShadowBuffer: 7px;
@FooterOffset: 6px;
@OneNotePageLeftPadding: 20px;
@OneNotePageRightPadding: 40px;
@OneNotePageWidth: 624px + @OneNotePageLeftPadding + @OneNotePageRightPadding;
@ClipperBorderRadius: 8px;
@ClipperScrollbarOffsetRight: 20px;

/*---------------------------------------------------------*
	Constant Colors
*---------------------------------------------------------*/
@OneNotePurple: #7321a6;
@OneNotePurpleTransparent: rgba(128, 46, 179, 0.95);

@WideButtonBackgroundColor: #ffffff;
@WideButtonHoverColor: #e5d6ec;

@DarkBackgroundColor: #56197c;
@DarkHoverColor: #8f4db8;

@ClipperDividerColor: #e6b3cf;
@ClipperLightFontColor: #e5d6ec;

@ClipperScrollbarDark: rgba(0, 0, 0, 0.5);

@ClipperBoxShadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);

/*---------------------------------------------------------*
	Fonts
*---------------------------------------------------------*/

// CSS declarations for (Apple & Android) users who don't have Segoe UI
@font-face {
	font-family: 'Segoe UI';
	src: url('segoeui.eot');
	src: local("Segoe UI"), local("Segoe"), local("Segoe WP"), url('https://www.onenote.com/styles/segoeui.eot?#iefix') format('embedded-opentype'), url('https://www.onenote.com/styles/segoeui.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Light';
	src: url('segoeuil.eot');
	src: local("Segoe UI Light"), local("Segoe WP Light"), url('https://www.onenote.com/styles/segoeuil.eot?#iefix') format('embedded-opentype'), url('https://www.onenote.com/styles/segoeuil.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*---------------------------------------------------------*
	ID Styles
*---------------------------------------------------------*/

#clipButtonContainer {
	margin-top: 15px;
}

#clipperFooterContainer {
	padding-top: 20px;
	white-space: nowrap;
}

#closeButtonContainer {
	position: absolute;
	margin-left: -30px;
	left: 100%;
}

#currentUserDetails {
	overflow: hidden;
	text-align: right;
}

#feedbackImage {
	height: 13px;
	width: 13px;
	padding-right: 5px;
	padding-top: 2px;
	float: left;
}

#unsupportedBrowserContainer {
	position: fixed;
	top: @ClipperUITopRightOffset;
	right: @ClipperUITopRightOffset;
	height: 225px;
	width: @ClipperUIWidth;
	background: @OneNotePurple;
	border-radius: @ClipperBorderRadius;
	box-shadow: @ClipperBoxShadow;
	text-align: center;
	color: white;

	// In older versions of IE, there is rendering issues with CSS classes, so we have to use ids instead
	#unsupportedBrowserPanel {
		padding-top: @ClipperUIInnerPadding;
		padding-left: @ClipperUIInnerPadding;
		padding-right: @ClipperUIInnerPadding;
		padding-bottom: @ClipperUIInnerPadding - @FooterOffset;
	}
}

#mainController {
	position: fixed;
	top: @ClipperUITopRightOffset;
	right: @ClipperUITopRightOffset;
	width: 100px;
	background: @OneNotePurple;
	background: @OneNotePurpleTransparent;
	border-radius: @ClipperBorderRadius;
	box-shadow: @ClipperBoxShadow;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;

	.panelContent {
		padding-top: @ClipperUIInnerPadding;
		padding-left: @ClipperUIInnerPadding;
		padding-right: @ClipperUIInnerPadding;
		padding-bottom: @ClipperUIInnerPadding - @FooterOffset;
		text-align: center;
		width: @ClipperUIWidth - (@ClipperUIInnerPadding*2);
	}
}

#regionSelectorContainer {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	cursor: crosshair;
	overflow: hidden;

	#outerFrame {
		opacity: 0.6;
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: -1;
	}

	#innerFrame {
		border: solid white 1px;
		opacity: 1;
		width: 0;
		height: 0;
		position: fixed;
	}
}

#signInLogo {
	display: block;
	margin: auto;
	height: 60px;
	width: 60px;
}

#signInMessageLabelContainer {
	color: white;
	font-size: 34px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#userDropdownArrow {
	float: right;
	height: auto;
	width: 10px;
	padding-top: 7px;
	padding-left: 5px;
}


完成任务可以去死了（好悲凉的一段话）

完成任务可以去死了（好悲凉的一段话）

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Didichaoren/Didichaoren.github.io.git/'