Temporary workaround for #3211 This reverts the effect of https://github.com/marijnh/CodeMirror/commit/4a745fe6680d104ff4c4347617a5964dcb01c46b, which seems to cause #3211 and doesn't seem to be fixing any issues we're currently having.

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

.CodeMirror pre {
    padding: 0 @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

// TODO: Temporary workaround at end of sprint 22 for #3211, which was introduced by
// https://github.com/marijnh/CodeMirror/commit/4a745fe6680d104ff4c4347617a5964dcb01c46b
// This just reverts the effect of that commit for now--it doesn't seem to fix an issue
// we're currently experiencing.
.CodeMirror-gutter {
    margin-bottom: 0;
    padding-bottom: 0;
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 15px;

.CodeMirror-activeline-background {
    background: @activeline-bgcolor !important;
}

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @background-color-2;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursor {
        .code-cursor();

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
         * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
         * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
         * we are guaranteed that the mouse event will be captured by our parent div, and click events will
         * be dispatched.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
         * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
        padding: @code-padding 0;
        min-width: 2.5em;
    }
    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding-top: 0px;
        padding-bottom: 0px;
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @background-color-1;
    }

    .CodeMirror .CodeMirror-cursor {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursor {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror-sizer {
        cursor: text;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
// DEALINGS IN THE SOFTWARE.

/* Brackets / CodeMirror Code Formatting */

.CodeMirror pre {
    padding: 0 @code-padding;
}

.CodeMirror-scroll {
    background-color: @background-color-3;
}

.platform-mac .CodeMirror {
    .code-font-mac();
}

.platform-win .CodeMirror {
    .code-font-win();
}

@code-padding: 15px;

.CodeMirror-activeline-background {
    background: @activeline-bgcolor !important;
}

.cm-s-default {
    span.cm-keyword {color: @accent-keyword;}
    span.cm-atom {color: @accent-atom;}
    span.cm-number {color: @accent-number;}
    span.cm-def {color: @accent-def;}
    span.cm-variable {color: @accent-variable;}
    span.cm-variable-2 {color: @accent-variable-2;}
    span.cm-variable-3 {color: @accent-variable-3;}
    span.cm-property {color: @accent-property;}
    span.cm-operator {color: @accent-operator;}
    span.cm-comment {color: @accent-comment;}
    span.cm-string {color: @accent-string;}
    span.cm-string-2 {color: @accent-string-2;}
    span.cm-meta {color: @accent-meta;}
    span.cm-error {color: @accent-error;}
    span.cm-qualifier {color: @accent-qualifier;}
    span.cm-builtin {color: @accent-builtin;}
    span.cm-bracket {color: @accent-bracket;}
    span.cm-tag {color: @accent-tag;}
    span.cm-attribute {color: @accent-attribute;}
    span.cm-header {color: @accent-header;}
    span.cm-quote {color: @accent-quote;}
    span.cm-hr {color: @accent-hr;}
    span.cm-link {color: @accent-link;}
    span.cm-rangeinfo {color: @accent-rangeinfo;}
    span.cm-minus {color: @accent-minus;}
    span.cm-plus {color: @accent-plus;}

    span.CodeMirror-matchingbracket {color: @accent-bracket !important; background-color: @background-color-2;}
    span.CodeMirror-nonmatchingbracket {color: @accent-bracket !important;}

    .CodeMirror-cursor {
        .code-cursor();

        /* Ensure the cursor shows up in front of code spans with a background color
         * (e.g. matchingbracket).
         */
        z-index: 3;
    }

    .CodeMirror-lines {
        padding: @code-padding 0;

        /* This is necessary for issue #2780. The logic for closing dropdowns depends on "click" events. Now
         * that each line has a separate div element, there is a good chance that mouseDown and mouseUp events
         * occur on different elements, which means a click event will not be sent. By disabling pointer events here,
         * we are guaranteed that the mouse event will be captured by our parent div, and click events will
         * be dispatched.
         */
        pointer-events: none;
    }

    .CodeMirror-linewidget {
        /* Re-enable pointer events for line widget. Pointer events are disabled for "CodeMirror-lines", which is the
         * parent of line widgets, so they need to be explicitly re-enabled here in order for selection to work. */
        pointer-events: auto;
    }

    .CodeMirror-gutters {
        background-color: @background-color-3;
        border-right: none;
        padding: @code-padding 0;
        min-width: 2.5em;
    }
    .CodeMirror-linenumber {
        color: @accent-comment;
        min-width: 2.5em;
        /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
        padding-top: 0px;
        padding-bottom: 0px;
    }
    &.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
}

/*
    CodeMirror's use of descendant selectors for certain styling causes problems when editors are
    nested because, for items in the inner editor, the left-hand clause in the selector will now
    match either the actual containing CodeMirror instance *OR* the outer "host" CodeMirror instance.

    TODO (issue #324): We'll still have problems if editors can be nested more than one level deep,
    or if any other descendant-selector-driven CM styles can differ between inner & outer editors
    (potential problem areas include line wrap and coloring theme: basically, anything in codemirror.css
    that uses a descandant selector where the CSS class name to the left of the space is something
    other than a vanilla .CodeMirror)
 */
.CodeMirror {
    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @background-color-1;
    }

    .CodeMirror .CodeMirror-cursor {
        visibility: hidden;
    }
    .CodeMirror.CodeMirror-focused .CodeMirror-cursor {
        visibility: visible;
    }

    .CodeMirror.cm-s-default .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.cm-s-default.CodeMirror-focused .CodeMirror-selected {
        background: @selection-color-focused;
    }
    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: none;
    }

    .CodeMirror-scroll {
        outline: none;
    }

    .CodeMirror-sizer {
        cursor: text;
    }

    .CodeMirror .CodeMirror-vscrollbar, .CodeMirror .CodeMirror-hscrollbar {
        cursor: default;
    }
}

/*
 * Temporarily override bold and italic syntax highlighting until
 * SourceCodePro supports them in a fixed pitch
 */
span.cm-em {
    font-style: normal;
}
span.cm-header, span.cm-strong {
    font-weight: normal;
}
span.cm-emstrong {
    font-style: normal;
    font-weight: normal;
}


Rearrange layers

Rearrange layers

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * container of this component should have its own stacking context otherwise
 * fun things will happen
 */
.nav-popup {
  @_top: nav-popup;
  @_menu-spacing: 30px;

  width: 100%;
  background-color: #222;
  background-size: cover;
  display: flex;
  z-index: 0; // component top level z-index

  @media @desktop {
    padding-left: (@padding-big - (@_menu-spacing / 2));
    min-height: @height--nav-popup;
  }

  &--main {
    background-color: fade(#222, 95%);
  }

  &--sections {
    color: #999;

    flex-direction: column;
    @media @desktop {
      flex-direction: row;
    }
  }

  &__action {
    margin: 0 5px;
  }

  &__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  &__flags {
    margin: 10px -5px 20px;
  }

  &__flag {
    .default-border-radius();
    .default-box-shadow();
    height: 20px;
    margin: 0 5px;
  }

  &__form-input {
    .default-border-radius();
    border: none;
    outline: none;
    background-color: #222;
    padding: 10px 5px;

    margin: 5px;
    font-size: @font-size--iphone-input;

    @media @desktop {
      width: calc(100% ~'-' 10px);
      margin: 0 5px;
      font-size: inherit;
    }

    &::placeholder {
      color: #777;
    }
  }

  &__link {
    color: @yellow;
    font-size: @font-size--nav-popup-link;
    margin: 2.5px 0;
    display: flex;

    &:focus,
    &:hover {
      text-decoration: none;
      color: #fff;
    }

    .@{_top}__menu--locale & {
      color: @purple;

      &:focus,
      &:hover {
        text-decoration: none;
        color: #fff;
      }
    }
  }

  &__link-marker {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    align-items: center;
    display: flex;
    margin-right: 10px;
    color: #555;
    opacity: 0;

    .@{_top}__link:focus &,
    .@{_top}__link:hover & {
      opacity: 1;
    }
  }

  &__menu {
    display: flex;
    flex-direction: column;
  }

  &__menu-head {
    color: #999;
    display: flex;
    padding: 5px (@_menu-spacing / 2) 10px;
    flex: none;

    &--active,
    &.js-menu--active,
    &:focus,
    &:hover {
      color: #fff;
      font-weight: 500;
      text-decoration: none;
    }
  }

  &__menu-head-bar {
    position: absolute;
    top: 0;
    width: calc(100% ~'-' @_menu-spacing);
    transition-duration: 80ms;
    transform: translateY(-100%);

    .@{_top}__menu-head--active &,
    .@{_top}__menu-head.js-menu--active &,
    .@{_top}__menu-head:focus &,
    .@{_top}__menu-head:hover & {
      transform: translateY(0%);
    }
  }

  &__menu-icon {
    width: 20px;
    margin-right: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__overlay {
    display: block;
    .full-size();
    background-color: fade(#000, 75%);
  }

  &__row {
    flex: none;
    margin: 0 0 10px;
    display: flex;

    &--actions {
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
    }

    &--error {
      color: @purple-light;
    }

    &--full {
      flex: 1;
    }

    &--title {
      color: #fff;
      font-size: @font-size--nav-popup-title;
      font-style: normal;
    }

    &--username {
      color: #fff;
      font-size: @font-size--nav-popup-title-large;
      font-style: italic;
      font-weight: 600;
    }

    &--with-gutter {
      margin-left: -5px;
      margin-right: 5px;
    }

    &--xs-vertical {
      @media @mobile {
        flex-direction: column;
      }
    }
  }

  &__section {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    font-size: @font-size--nav-popup-section;

    flex: none;
    @media @desktop {
      flex: 1;
    }

    &--blank {
      padding: 0;
    }

    &--login {
      background-color: #333;

      @media @desktop {
        max-width: 380px;
      }
    }

    &--user {
      flex: none;
      padding-top: 40px;
      padding-bottom: 30px;
    }

    &--user-overview {
      min-width: 180px;

      background-color: fade(#000, 50%);

      align-items: flex-end;
    }

    &--user-links {
      background-color: #222;
      padding-left: 40px;
    }

    &--register {
      background-color: #444;

      @media @desktop {
        max-width: 240px;
      }
    }
  }

  &__social {
    .circle(39px);
    .center-content();
    .link-plain();
    border: 2px solid #333;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;

    .link-hover({
      background-color: #fff;
      border-color: #fff;
    });

    &--facebook {
      .link-hover({
        color: @facebook-colour;
      });
    }

    &--support {
      .link-hover({
        color: @pink;
      });
    }

    &--twitter {
      .link-hover({
        color: @twitter-colour;
      });
    }
  }

  &__socials {
    position: absolute;
    bottom: @bar-size;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #111;
    z-index: 2; // local context, above submenu
  }

  &__submenu-container {
    width: 0;
    flex: 1;
    display: flex;
    margin-left: (@_menu-spacing / 2);
  }

  &__submenu {
    position: absolute;
    padding-right: 20px;
    z-index: 1; // local context
    white-space: nowrap;
    height: 100%;
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * container of this component should have its own stacking context otherwise
 * fun things will happen
 */
.nav-popup {
  @_top: nav-popup;
  @_menu-spacing: 30px;

  width: 100%;
  background-color: #222;
  background-size: cover;
  display: flex;
  z-index: 0; // component top level z-index

  @media @desktop {
    padding-left: (@padding-big - (@_menu-spacing / 2));
    min-height: @height--nav-popup;
  }

  &--main {
    background-color: fade(#222, 95%);
  }

  &--sections {
    color: #999;

    flex-direction: column;
    @media @desktop {
      flex-direction: row;
    }
  }

  &__action {
    margin: 0 5px;
  }

  &__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  &__flags {
    margin: 10px -5px 20px;
  }

  &__flag {
    .default-border-radius();
    .default-box-shadow();
    height: 20px;
    margin: 0 5px;
  }

  &__form-input {
    .default-border-radius();
    border: none;
    outline: none;
    background-color: #222;
    padding: 10px 5px;

    margin: 5px;
    font-size: @font-size--iphone-input;

    @media @desktop {
      width: calc(100% ~'-' 10px);
      margin: 0 5px;
      font-size: inherit;
    }

    &::placeholder {
      color: #777;
    }
  }

  &__link {
    color: @yellow;
    font-size: @font-size--nav-popup-link;
    margin: 2.5px 0;
    display: flex;

    &:focus,
    &:hover {
      text-decoration: none;
      color: #fff;
    }

    .@{_top}__menu--locale & {
      color: @purple;

      &:focus,
      &:hover {
        text-decoration: none;
        color: #fff;
      }
    }
  }

  &__link-marker {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    align-items: center;
    display: flex;
    margin-right: 10px;
    color: #555;
    opacity: 0;

    .@{_top}__link:focus &,
    .@{_top}__link:hover & {
      opacity: 1;
    }
  }

  &__menu {
    display: flex;
    flex-direction: column;
  }

  &__menu-head {
    color: #999;
    display: flex;
    padding: 5px (@_menu-spacing / 2) 10px;
    flex: none;

    &--active,
    &.js-menu--active,
    &:focus,
    &:hover {
      color: #fff;
      font-weight: 500;
      text-decoration: none;
    }
  }

  &__menu-head-bar {
    position: absolute;
    top: 0;
    width: calc(100% ~'-' @_menu-spacing);
    transition-duration: 80ms;
    transform: translateY(-100%);

    .@{_top}__menu-head--active &,
    .@{_top}__menu-head.js-menu--active &,
    .@{_top}__menu-head:focus &,
    .@{_top}__menu-head:hover & {
      transform: translateY(0%);
    }
  }

  &__menu-icon {
    width: 20px;
    margin-right: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  &__overlay {
    display: block;
    .full-size();
    background-color: fade(#000, 75%);
  }

  &__row {
    flex: none;
    margin: 0 0 10px;
    display: flex;

    &--actions {
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
    }

    &--error {
      color: @purple-light;
    }

    &--full {
      flex: 1;
    }

    &--title {
      color: #fff;
      font-size: @font-size--nav-popup-title;
      font-style: normal;
    }

    &--username {
      color: #fff;
      font-size: @font-size--nav-popup-title-large;
      font-style: italic;
      font-weight: 600;
    }

    &--with-gutter {
      margin-left: -5px;
      margin-right: 5px;
    }

    &--xs-vertical {
      @media @mobile {
        flex-direction: column;
      }
    }
  }

  &__section {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    font-size: @font-size--nav-popup-section;

    flex: none;
    @media @desktop {
      flex: 1;
    }

    &--blank {
      padding: 0;
    }

    &--login {
      background-color: #333;

      @media @desktop {
        max-width: 380px;
      }
    }

    &--user {
      flex: none;
      padding-top: 40px;
      padding-bottom: 30px;
    }

    &--user-overview {
      min-width: 180px;

      background-color: fade(#000, 50%);

      align-items: flex-end;
    }

    &--user-links {
      background-color: #222;
      padding-left: 40px;
    }

    &--register {
      background-color: #444;

      @media @desktop {
        max-width: 240px;
      }
    }
  }

  &__social {
    .circle(39px);
    .center-content();
    .link-plain();
    border: 2px solid #333;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;

    .link-hover({
      background-color: #fff;
      border-color: #fff;
    });

    &--facebook {
      .link-hover({
        color: @facebook-colour;
      });
    }

    &--support {
      .link-hover({
        color: @pink;
      });
    }

    &--twitter {
      .link-hover({
        color: @twitter-colour;
      });
    }
  }

  &__socials {
    position: absolute;
    bottom: @bar-size;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #111;
  }

  &__submenu-container {
    width: 0;
    flex: 1;
    display: flex;
    margin-left: (@_menu-spacing / 2);
  }

  &__submenu {
    position: absolute;
    padding-right: 20px;
    z-index: 1; // local context
    white-space: nowrap;
    height: 100%;
  }
}


added active state for icon-hover

added active state for icon-hover

/* ========================================================================
   Pagekit
 ========================================================================== */

[v-cloak] { display: none; }

/* Sidebar
========================================================================== */

.pk-width-sidebar {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    /*
     * Width
     */

    .pk-width-sidebar { width: (200px + @global-grid-gutter); }

}

/*
 * Large Gutter
 */

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    /*
     * Gutter
     */

    /* Horizontal */
    .pk-grid-large { margin-left: -40px; }
    .pk-grid-large > * { padding-left: 40px; }

    /* Vertical */
    .pk-grid-large + .pk-grid-large,
    .pk-grid-large > .uk-grid-margin,
    .pk-grid-large > * > .uk-panel + .uk-panel { margin-top: 40px; }

    /*
     * Width
     */

    .pk-width-sidebar { width: (250px + 40px); }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /*
     * Gutter
     */

    /* Horizontal */
    .pk-grid-large { margin-left: -50px; }
    .pk-grid-large > * { padding-left: 50px; }

    /* Vertical */
    .pk-grid-large + .pk-grid-large,
    .pk-grid-large > .uk-grid-margin,
    .pk-grid-large > * > .uk-panel + .uk-panel { margin-top: 50px; }

    /*
     * Width
     */

    .pk-width-sidebar { width: (250px + 50px); }

    .pk-width-sidebar-large { width: (270px + 50px); }

}

/* Modifier: Side Nav Large (System: Settings + Info, Site: Settings)
========================================================================== */

.pk-nav-large > li > a {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Side Nav Sortable (Users: Roles)
========================================================================== */

.pk-sortable-dragged-list > * {
    display: block;
    padding: 8px 16px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    color: @global-color;
}

/* Panel Sortable (Dashboard)
========================================================================== */

.pk-sortable {
    padding: 0;
    list-style: none;
    min-height: 300px;
}

.pk-sortable > li + li { margin-top: @grid-gutter-vertical; }

.pk-sortable-dragged-panel > * { box-shadow: 0 5px 20px rgba(0,0,0,0.2); }

/* Modifier: Search
========================================================================== */

.pk-search {
    margin-left: 25px;
    padding-left: 15px;
    border-left: 1px solid @global-border;
}

/* SVG Icons
 ========================================================================== */

[class*='pk-icon-'] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    vertical-align: middle;
}

.pk-icon-contain { background-size: contain; }

.pk-icon-delete { background-image: url("../../assets/images/icon-delete.svg"); }
.pk-icon-block { background-image: url("../../assets/images/icon-block.svg"); }
.pk-icon-check { background-image: url("../../assets/images/icon-check.svg"); }
.pk-icon-copy { background-image: url("../../assets/images/icon-copy.svg"); }
.pk-icon-warning { background-image: url("../../assets/images/icon-warning.svg"); }
.pk-icon-edit { background-image: url("../../assets/images/icon-edit.svg"); }
.pk-icon-comment { background-image: url("../../assets/images/icon-comment.svg"); }
.pk-icon-schedule { background-image: url("../../assets/images/icon-schedule.svg"); }
.pk-icon-spam { background-image: url("../../assets/images/icon-spam.svg"); }
.pk-icon-thumbnails { background-image: url("../../assets/images/icon-thumbnails.svg"); }
.pk-icon-table { background-image: url("../../assets/images/icon-table.svg"); }
.pk-icon-reply { background-image: url("../../assets/images/icon-reply.svg"); }
.pk-icon-calendar { background-image: url("../../assets/images/icon-calendar.svg"); }
.pk-icon-time { background-image: url("../../assets/images/icon-time.svg"); }
.pk-icon-info { background-image: url("../../assets/images/icon-info.svg"); }
.pk-icon-permission { background-image: url("../../assets/images/icon-permission.svg"); }
.pk-icon-select { background-image: url("../../assets/images/icon-select.svg"); }
.pk-icon-home { background-image: url("../../assets/images/icon-home.svg"); }
.pk-icon-home-active { background-image: url("../../assets/images/icon-home-active.svg"); }
.pk-icon-settings { background-image: url("../../assets/images/icon-settings.svg"); }
.pk-icon-refresh { background-image: url("../../assets/images/icon-refresh.svg"); }
.pk-icon-star { background-image: url("../../assets/images/icon-star.svg"); }
.pk-icon-share { background-image: url("../../assets/images/icon-share.svg"); }
.pk-icon-move { background-image: url("../../assets/images/icon-move.svg"); }
.pk-icon-pen { background-image: url("../../assets/images/icon-pen.svg"); }
.pk-icon-link { background-image: url("../../assets/images/icon-link.svg"); }

.pk-icon-folder-circle,
.pk-icon-file-circle {
    width: 30px;
    height: 30px;
    margin: -2px;
}

.pk-icon-folder-circle { background-image: url("../../assets/images/icon-folder-circle.svg"); }
.pk-icon-file-circle { background-image: url("../../assets/images/icon-file-circle.svg"); }

.pk-icon-arrow-up,
.pk-icon-arrow-down {
    width: 9px;
    height: 11px;
}

.pk-icon-arrow-up { background-image: url("../../assets/images/icon-arrow-up.svg"); }
.pk-icon-arrow-down { background-image: url("../../assets/images/icon-arrow-down.svg"); }

[class*='pk-icon-circle'] {
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background: @global-muted-color;
}

.pk-icon-circle-primary { background: @global-primary-background; }
.pk-icon-circle-success { background: @global-success-background; }
.pk-icon-circle-danger { background: @global-danger-background; }
.pk-icon-circle-warning { background: @global-warning-background; }

/*
 * Icon Hover
 */

.pk-icon-hover { opacity: 0.5; }

.pk-icon-hover:hover,
.uk-active > .pk-icon-hover { opacity: 1; }

/*
 * Icon Muted
 */

.pk-icon-muted { opacity: 0.3; }

/*
 * Icon Primary
 */

.pk-icon-primary.pk-icon-comment { background-image: url("../../assets/images/icon-comment-primary.svg"); }

/*
 * Icon Contrast
 */

.pk-icon-contrast.pk-icon-edit { background-image: url("../../assets/images/icon-edit-contrast.svg"); }

/*
 * Icon Large
 */

[class*='pk-icon-large-'] {
    width: 25px;
    height: 25px;
}

.pk-icon-large-settings { background-image: url("../../assets/images/icon-large-settings.svg"); }
.pk-icon-large-pin { background-image: url("../../assets/images/icon-large-pin.svg"); }
.pk-icon-large-mail { background-image: url("../../assets/images/icon-large-mail.svg"); }
.pk-icon-large-bolt { background-image: url("../../assets/images/icon-large-bolt.svg"); }
.pk-icon-large-server { background-image: url("../../assets/images/icon-large-server.svg"); }
.pk-icon-large-code { background-image: url("../../assets/images/icon-large-code.svg"); }
.pk-icon-large-database { background-image: url("../../assets/images/icon-large-database.svg"); }
.pk-icon-large-lock-file { background-image: url("../../assets/images/icon-large-lock-file.svg"); }
.pk-icon-large-comment { background-image: url("../../assets/images/icon-large-comment.svg"); }
.pk-icon-large-brush { background-image: url("../../assets/images/icon-large-brush.svg"); }

/*
 * Link Hover with Icon and Text (Link Picker + Blog)
 */

.pk-link-icon {
    display: inline-block;
    color: @global-muted-color;
}

.pk-link-icon:hover { color: @global-color; }

.pk-link-icon [class*='pk-icon-'] { opacity: 0.3; }
.pk-link-icon:hover [class*='pk-icon-'] { opacity: 1; }

/*
 * Form Icon (Blog: Post Edit)
 */

.uk-form-icon > [class*='pk-icon-'] {
  &:extend(.uk-form-icon > [class*='uk-icon-']);
}

.uk-form-icon-flip > [class*='pk-icon-'] {
  &:extend(.uk-form-icon-flip > [class*='uk-icon-']);
}

/* Modifier: Subnav Icon
========================================================================== */

/*
 * 1. Needed if in table width minimum
 * 2. Gutter
 */

.pk-subnav-icon {
    /* 1 */
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    /* 2 */
    margin-left: -10px;
    margin-top: -10px !important;
    margin-bottom: 0;
}

.pk-subnav-icon > * {
    padding-left: 10px;
    margin-top: 10px;
}

.uk-nav-side .pk-subnav-icon > * { padding-left: 5px; }

.pk-subnav-icon > * > * { color: @global-muted-color; }

.pk-subnav-icon > * > :hover,
.pk-subnav-icon > * > :focus { color: @global-color; }

/* Panel Badge Modifiers (Image Picker Fields + System: Themes)
========================================================================== */

/*
 * Background Modifier
 */

.pk-panel-badge {
    padding: 7px 10px;
    background: #fff;
    border-radius: 2px;
}

/*
 * Position Modifier
 */

.pk-panel-badge-bottom-right {
    position: absolute;
    right: @panel-box-padding;
    bottom: @panel-box-padding;
}

/* Text Large (Dashboard)
========================================================================== */

.pk-text-large {
    font-family: @base-heading-font-family;
    font-weight: 400;
    font-size: @base-h2-font-size;
    line-height: @base-h2-line-height;
}

.pk-text-xlarge {
    font-family: @base-heading-font-family;
    font-size: 46px;
    line-height: 52px;
}

/* Modifier Table Large` (Blog: Comments)
========================================================================== */

.pk-table-large td {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* Modifier Table Collapse (Site: Pages: In Nestable)
========================================================================== */

.pk-table-collapse {
    padding-left: 6px !important;
    padding-right: 0 !important;
}

/* Table Modifiers
========================================================================== */

/*
 * Make cell as small as possible
 */

.pk-table-width-minimum { width: 1px; }

/*
 * Useful width classes for table cells
 * Text will wrap automatically, a long string will expand the cell
 */

.pk-table-width-100 { width: 100px; }
.pk-table-width-150 { width: 150px; }
.pk-table-width-200 { width: 200px; }

/*
 * Prevent a long string from expanding the cell
 * `min-width` is needed to prevent cells from collapsing
 */

.pk-table-text-break { word-break: break-word; }

.pk-table-min-width-100 { min-width: 100px; }
.pk-table-min-width-150 { min-width: 150px; }
.pk-table-min-width-200 { min-width: 200px; }
.pk-table-min-width-300 { min-width: 300px; }

/*
 * Need when `uk-text-truncate` is used
 */

.pk-table-max-width-100 { max-width: 100px; }
.pk-table-max-width-150 { max-width: 150px; }

/* Modifier Table Order
========================================================================== */

.pk-table-order:hover { cursor: pointer; }

.pk-table-order:hover,
.pk-table-order.uk-active { color: #666; }

/*
 * Icon
 */

.pk-table-order [class*='pk-icon-'] { opacity: 0.3; }

.pk-table-order:hover [class*='pk-icon-'],
.pk-table-order.uk-active [class*='pk-icon-'] { opacity: 1; }

/* Filter
========================================================================== */

.pk-filter:hover > * { color: #666; }

.pk-filter.uk-active  > * {
    color: #666;
    font-weight: bold;
}

/* Table Fake (Site: Pages + Widgets)
========================================================================== */

.pk-table-fake {
    display: table;
    width: 100%;
    padding: 0;
}

.pk-table-fake > div {
    display: table-cell;
    padding: 16px 12px;
    vertical-align: middle;
}

/*
 * Imitate table header
 */

.pk-table-fake-header > div {
    font-size: round((@global-font-size * 0.85)); // 12px / 14px
    text-transform: uppercase;
    font-weight: normal;
    color: @global-muted-color;
}

.pk-table-fake-border { box-shadow: inset 0 -1px 0  @global-border; }

.pk-table-fake-nestable-padding { padding-left: 28px !important; }

/*
 * Fix height
 */

.pk-table-fake .uk-form-select { vertical-align: top; }

/* Overflow Container (Finder: Thumbnail View)
 ========================================================================== */

.tm-overflow-container {
    margin: -5px;
    padding: 5px;
}

/* Thumbnail Placeholder (Finder + Image Picker)
 ========================================================================== */

.pk-thumbnail-folder {
    background-color: @global-primary-background;
    background-image: url("../../assets/images/icon-folder-large.svg");
    background-size: 80px 80px;
}

.pk-thumbnail-file {
    background-color: #cfd2d8;
    background-image: url("../../assets/images/icon-file-large.svg");
    background-size: 80px 80px;
}

/* Background Contain (Finder: Thumbnail)
 ========================================================================== */

.pk-background-contain {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Panel Teaser (Dashboard)
 ========================================================================== */

.pk-panel-teaser {
    margin: @panel-box-teaser-margin @panel-box-teaser-margin @panel-teaser-margin-bottom @panel-box-teaser-margin;
    padding: @panel-box-padding;
    border-bottom: 1px solid @global-border;
}

/* Panel Background (Dashboard)
 ========================================================================== */

.pk-panel-background {
    margin: -@panel-box-padding;
    padding: @panel-box-padding;
    background: @global-primary-background url("../../assets/images/dashboard-location.jpg") 0 0 no-repeat;
    background-size: cover;
}

/* Overlay Background (System: Themes + Marketplace)
 ========================================================================== */

.pk-overlay-background { background: rgba(255,255,255,0.2); }

/* Modal with IFrame (Marketplace)
 ========================================================================== */

/*
 * Position installer buttons
 */

.pk-modal-dialog-iframe { height: 600px; }

@media (max-width: 767px) {

    .pk-modal-dialog-iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        margin: 10px;
    }

}

.pk-modal-dialog-badge {
    position: absolute;
    top: @modal-dialog-padding;
    right: @modal-dialog-padding;
}

/* Image Preview (Image Picker)
 ========================================================================== */

.pk-image-max-height {
    max-height: 200px;
    overflow: hidden;
}

/* Form Link (Link Picker)
 ========================================================================== */

.pk-form-link {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.pk-form-link-toggle {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 10px;
    font-size: 13px;
}

.pk-form-link > input { padding-right: 100px !important; }

/* List Header (Widget Assignment)
 ========================================================================== */

.pk-list-header {
    padding: 8px 0;
    text-transform: uppercase;
    font-size: 12px;
}

/* Editor (Site: Settings)
========================================================================== */

.pk-editor {
    padding: @form-padding;
    border: @form-border-width solid @form-border;
    background: @form-background;
    border-radius: @global-border-radius;
}

/* Remove `box-shadow` from Drag'n Drop target
 ========================================================================== */

.uk-dragover { box-shadow: none; }

/* SVG Loader
 ========================================================================== */

@radius: 13px;
@size: 15px; // A little larger to prevent overflow clipping
@offset: round(2 * 3.141 * @radius);
@duration: 1.4s;

.pk-loader {
    vertical-align: middle;
    -webkit-animation: pk-loader-rotate @duration linear infinite;
    animation: pk-loader-rotate @duration linear infinite;
}

/*
 * Group
 * Only needed because `transform-origin: center` is not working in Firefox
 */

.pk-loader > * {
    -webkit-transform: translate(@size, @size);
    transform: translate(@size, @size);
}

/*
 * Circle
 */

.pk-loader > * > * {
    stroke-dasharray: @offset;
    stroke-dashoffset: 0;
    // transform-origin: center;
    -webkit-animation: pk-loader-dash @duration ease-in-out infinite,
                       pk-loader-color (@duration*4) ease-in-out infinite;
    animation: pk-loader-dash @duration ease-in-out infinite,
               pk-loader-color (@duration*4) ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes pk-loader-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); }
}

@keyframes pk-loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(270deg); }
}

@-webkit-keyframes pk-loader-dash {
    0% { stroke-dashoffset: @offset; }
    50% {
        stroke-dashoffset: @offset/4;
        -webkit-transform:rotate(135deg);
    }
    100% {
        stroke-dashoffset: @offset;
        -webkit-transform:rotate(450deg);
    }
}

@keyframes pk-loader-dash {
    0% { stroke-dashoffset: @offset; }
    50% {
        stroke-dashoffset: @offset/4;
        transform:rotate(135deg);
    }
    100% {
        stroke-dashoffset: @offset;
        transform:rotate(450deg);
    }
}

@-webkit-keyframes pk-loader-color {
    0% { stroke: @global-primary-hover-background; }
    50% { stroke: @global-primary-hover-background; }
    100% { stroke: @global-primary-hover-background; }
}

@keyframes pk-loader-color {
    0% { stroke: @global-primary-hover-background; }
    50% { stroke: @global-primary-hover-background; }
    100% { stroke: @global-primary-hover-background; }
}

/* ========================================================================
   Pagekit
 ========================================================================== */

[v-cloak] { display: none; }

/* Sidebar
========================================================================== */

.pk-width-sidebar {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

/* Tablet and bigger */
@media (min-width: @breakpoint-medium) {

    /*
     * Width
     */

    .pk-width-sidebar { width: (200px + @global-grid-gutter); }

}

/*
 * Large Gutter
 */

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    /*
     * Gutter
     */

    /* Horizontal */
    .pk-grid-large { margin-left: -40px; }
    .pk-grid-large > * { padding-left: 40px; }

    /* Vertical */
    .pk-grid-large + .pk-grid-large,
    .pk-grid-large > .uk-grid-margin,
    .pk-grid-large > * > .uk-panel + .uk-panel { margin-top: 40px; }

    /*
     * Width
     */

    .pk-width-sidebar { width: (250px + 40px); }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    /*
     * Gutter
     */

    /* Horizontal */
    .pk-grid-large { margin-left: -50px; }
    .pk-grid-large > * { padding-left: 50px; }

    /* Vertical */
    .pk-grid-large + .pk-grid-large,
    .pk-grid-large > .uk-grid-margin,
    .pk-grid-large > * > .uk-panel + .uk-panel { margin-top: 50px; }

    /*
     * Width
     */

    .pk-width-sidebar { width: (250px + 50px); }

    .pk-width-sidebar-large { width: (270px + 50px); }

}

/* Modifier: Side Nav Large (System: Settings + Info, Site: Settings)
========================================================================== */

.pk-nav-large > li > a {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Side Nav Sortable (Users: Roles)
========================================================================== */

.pk-sortable-dragged-list > * {
    display: block;
    padding: 8px 16px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    color: @global-color;
}

/* Panel Sortable (Dashboard)
========================================================================== */

.pk-sortable {
    padding: 0;
    list-style: none;
    min-height: 300px;
}

.pk-sortable > li + li { margin-top: @grid-gutter-vertical; }

.pk-sortable-dragged-panel > * { box-shadow: 0 5px 20px rgba(0,0,0,0.2); }

/* Modifier: Search
========================================================================== */

.pk-search {
    margin-left: 25px;
    padding-left: 15px;
    border-left: 1px solid @global-border;
}

/* SVG Icons
 ========================================================================== */

[class*='pk-icon-'] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    vertical-align: middle;
}

.pk-icon-contain { background-size: contain; }

.pk-icon-delete { background-image: url("../../assets/images/icon-delete.svg"); }
.pk-icon-block { background-image: url("../../assets/images/icon-block.svg"); }
.pk-icon-check { background-image: url("../../assets/images/icon-check.svg"); }
.pk-icon-copy { background-image: url("../../assets/images/icon-copy.svg"); }
.pk-icon-warning { background-image: url("../../assets/images/icon-warning.svg"); }
.pk-icon-edit { background-image: url("../../assets/images/icon-edit.svg"); }
.pk-icon-comment { background-image: url("../../assets/images/icon-comment.svg"); }
.pk-icon-schedule { background-image: url("../../assets/images/icon-schedule.svg"); }
.pk-icon-spam { background-image: url("../../assets/images/icon-spam.svg"); }
.pk-icon-thumbnails { background-image: url("../../assets/images/icon-thumbnails.svg"); }
.pk-icon-table { background-image: url("../../assets/images/icon-table.svg"); }
.pk-icon-reply { background-image: url("../../assets/images/icon-reply.svg"); }
.pk-icon-calendar { background-image: url("../../assets/images/icon-calendar.svg"); }
.pk-icon-time { background-image: url("../../assets/images/icon-time.svg"); }
.pk-icon-info { background-image: url("../../assets/images/icon-info.svg"); }
.pk-icon-permission { background-image: url("../../assets/images/icon-permission.svg"); }
.pk-icon-select { background-image: url("../../assets/images/icon-select.svg"); }
.pk-icon-home { background-image: url("../../assets/images/icon-home.svg"); }
.pk-icon-home-active { background-image: url("../../assets/images/icon-home-active.svg"); }
.pk-icon-settings { background-image: url("../../assets/images/icon-settings.svg"); }
.pk-icon-refresh { background-image: url("../../assets/images/icon-refresh.svg"); }
.pk-icon-star { background-image: url("../../assets/images/icon-star.svg"); }
.pk-icon-share { background-image: url("../../assets/images/icon-share.svg"); }
.pk-icon-move { background-image: url("../../assets/images/icon-move.svg"); }
.pk-icon-pen { background-image: url("../../assets/images/icon-pen.svg"); }
.pk-icon-link { background-image: url("../../assets/images/icon-link.svg"); }

.pk-icon-folder-circle,
.pk-icon-file-circle {
    width: 30px;
    height: 30px;
    margin: -2px;
}

.pk-icon-folder-circle { background-image: url("../../assets/images/icon-folder-circle.svg"); }
.pk-icon-file-circle { background-image: url("../../assets/images/icon-file-circle.svg"); }

.pk-icon-arrow-up,
.pk-icon-arrow-down {
    width: 9px;
    height: 11px;
}

.pk-icon-arrow-up { background-image: url("../../assets/images/icon-arrow-up.svg"); }
.pk-icon-arrow-down { background-image: url("../../assets/images/icon-arrow-down.svg"); }

[class*='pk-icon-circle'] {
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background: @global-muted-color;
}

.pk-icon-circle-primary { background: @global-primary-background; }
.pk-icon-circle-success { background: @global-success-background; }
.pk-icon-circle-danger { background: @global-danger-background; }
.pk-icon-circle-warning { background: @global-warning-background; }

/*
 * Icon Hover
 */

.pk-icon-hover { opacity: 0.5; }
.pk-icon-hover:hover { opacity: 1; }

/*
 * Icon Muted
 */

.pk-icon-muted { opacity: 0.3; }

/*
 * Icon Primary
 */

.pk-icon-primary.pk-icon-comment { background-image: url("../../assets/images/icon-comment-primary.svg"); }

/*
 * Icon Contrast
 */

.pk-icon-contrast.pk-icon-edit { background-image: url("../../assets/images/icon-edit-contrast.svg"); }

/*
 * Icon Large
 */

[class*='pk-icon-large-'] {
    width: 25px;
    height: 25px;
}

.pk-icon-large-settings { background-image: url("../../assets/images/icon-large-settings.svg"); }
.pk-icon-large-pin { background-image: url("../../assets/images/icon-large-pin.svg"); }
.pk-icon-large-mail { background-image: url("../../assets/images/icon-large-mail.svg"); }
.pk-icon-large-bolt { background-image: url("../../assets/images/icon-large-bolt.svg"); }
.pk-icon-large-server { background-image: url("../../assets/images/icon-large-server.svg"); }
.pk-icon-large-code { background-image: url("../../assets/images/icon-large-code.svg"); }
.pk-icon-large-database { background-image: url("../../assets/images/icon-large-database.svg"); }
.pk-icon-large-lock-file { background-image: url("../../assets/images/icon-large-lock-file.svg"); }
.pk-icon-large-comment { background-image: url("../../assets/images/icon-large-comment.svg"); }
.pk-icon-large-brush { background-image: url("../../assets/images/icon-large-brush.svg"); }

/*
 * Link Hover with Icon and Text (Link Picker + Blog)
 */

.pk-link-icon {
    display: inline-block;
    color: @global-muted-color;
}

.pk-link-icon:hover { color: @global-color; }

.pk-link-icon [class*='pk-icon-'] { opacity: 0.3; }
.pk-link-icon:hover [class*='pk-icon-'] { opacity: 1; }

/*
 * Form Icon (Blog: Post Edit)
 */

.uk-form-icon > [class*='pk-icon-'] {
  &:extend(.uk-form-icon > [class*='uk-icon-']);
}

.uk-form-icon-flip > [class*='pk-icon-'] {
  &:extend(.uk-form-icon-flip > [class*='uk-icon-']);
}

/* Modifier: Subnav Icon
========================================================================== */

/*
 * 1. Needed if in table width minimum
 * 2. Gutter
 */

.pk-subnav-icon {
    /* 1 */
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    /* 2 */
    margin-left: -10px;
    margin-top: -10px !important;
    margin-bottom: 0;
}

.pk-subnav-icon > * {
    padding-left: 10px;
    margin-top: 10px;
}

.uk-nav-side .pk-subnav-icon > * { padding-left: 5px; }

.pk-subnav-icon > * > * { color: @global-muted-color; }

.pk-subnav-icon > * > :hover,
.pk-subnav-icon > * > :focus { color: @global-color; }

/* Panel Badge Modifiers (Image Picker Fields + System: Themes)
========================================================================== */

/*
 * Background Modifier
 */

.pk-panel-badge {
    padding: 7px 10px;
    background: #fff;
    border-radius: 2px;
}

/*
 * Position Modifier
 */

.pk-panel-badge-bottom-right {
    position: absolute;
    right: @panel-box-padding;
    bottom: @panel-box-padding;
}

/* Text Large (Dashboard)
========================================================================== */

.pk-text-large {
    font-family: @base-heading-font-family;
    font-weight: 400;
    font-size: @base-h2-font-size;
    line-height: @base-h2-line-height;
}

.pk-text-xlarge {
    font-family: @base-heading-font-family;
    font-size: 46px;
    line-height: 52px;
}

/* Modifier Table Large` (Blog: Comments)
========================================================================== */

.pk-table-large td {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* Modifier Table Collapse (Site: Pages: In Nestable)
========================================================================== */

.pk-table-collapse {
    padding-left: 6px !important;
    padding-right: 0 !important;
}

/* Table Modifiers
========================================================================== */

/*
 * Make cell as small as possible
 */

.pk-table-width-minimum { width: 1px; }

/*
 * Useful width classes for table cells
 * Text will wrap automatically, a long string will expand the cell
 */

.pk-table-width-100 { width: 100px; }
.pk-table-width-150 { width: 150px; }
.pk-table-width-200 { width: 200px; }

/*
 * Prevent a long string from expanding the cell
 * `min-width` is needed to prevent cells from collapsing
 */

.pk-table-text-break { word-break: break-word; }

.pk-table-min-width-100 { min-width: 100px; }
.pk-table-min-width-150 { min-width: 150px; }
.pk-table-min-width-200 { min-width: 200px; }
.pk-table-min-width-300 { min-width: 300px; }

/*
 * Need when `uk-text-truncate` is used
 */

.pk-table-max-width-100 { max-width: 100px; }
.pk-table-max-width-150 { max-width: 150px; }

/* Modifier Table Order
========================================================================== */

.pk-table-order:hover { cursor: pointer; }

.pk-table-order:hover,
.pk-table-order.uk-active { color: #666; }

/*
 * Icon
 */

.pk-table-order [class*='pk-icon-'] { opacity: 0.3; }

.pk-table-order:hover [class*='pk-icon-'],
.pk-table-order.uk-active [class*='pk-icon-'] { opacity: 1; }

/* Filter
========================================================================== */

.pk-filter:hover > * { color: #666; }

.pk-filter.uk-active  > * {
    color: #666;
    font-weight: bold;
}

/* Table Fake (Site: Pages + Widgets)
========================================================================== */

.pk-table-fake {
    display: table;
    width: 100%;
    padding: 0;
}

.pk-table-fake > div {
    display: table-cell;
    padding: 16px 12px;
    vertical-align: middle;
}

/*
 * Imitate table header
 */

.pk-table-fake-header > div {
    font-size: round((@global-font-size * 0.85)); // 12px / 14px
    text-transform: uppercase;
    font-weight: normal;
    color: @global-muted-color;
}

.pk-table-fake-border { box-shadow: inset 0 -1px 0  @global-border; }

.pk-table-fake-nestable-padding { padding-left: 28px !important; }

/*
 * Fix height
 */

.pk-table-fake .uk-form-select { vertical-align: top; }

/* Overflow Container (Finder: Thumbnail View)
 ========================================================================== */

.tm-overflow-container {
    margin: -5px;
    padding: 5px;
}

/* Thumbnail Placeholder (Finder + Image Picker)
 ========================================================================== */

.pk-thumbnail-folder {
    background-color: @global-primary-background;
    background-image: url("../../assets/images/icon-folder-large.svg");
    background-size: 80px 80px;
}

.pk-thumbnail-file {
    background-color: #cfd2d8;
    background-image: url("../../assets/images/icon-file-large.svg");
    background-size: 80px 80px;
}

/* Background Contain (Finder: Thumbnail)
 ========================================================================== */

.pk-background-contain {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Panel Teaser (Dashboard)
 ========================================================================== */

.pk-panel-teaser {
    margin: @panel-box-teaser-margin @panel-box-teaser-margin @panel-teaser-margin-bottom @panel-box-teaser-margin;
    padding: @panel-box-padding;
    border-bottom: 1px solid @global-border;
}

/* Panel Background (Dashboard)
 ========================================================================== */

.pk-panel-background {
    margin: -@panel-box-padding;
    padding: @panel-box-padding;
    background: @global-primary-background url("../../assets/images/dashboard-location.jpg") 0 0 no-repeat;
    background-size: cover;
}

/* Overlay Background (System: Themes + Marketplace)
 ========================================================================== */

.pk-overlay-background { background: rgba(255,255,255,0.2); }

/* Modal with IFrame (Marketplace)
 ========================================================================== */

/*
 * Position installer buttons
 */

.pk-modal-dialog-iframe { height: 600px; }

@media (max-width: 767px) {

    .pk-modal-dialog-iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        margin: 10px;
    }

}

.pk-modal-dialog-badge {
    position: absolute;
    top: @modal-dialog-padding;
    right: @modal-dialog-padding;
}

/* Image Preview (Image Picker)
 ========================================================================== */

.pk-image-max-height {
    max-height: 200px;
    overflow: hidden;
}

/* Form Link (Link Picker)
 ========================================================================== */

.pk-form-link {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.pk-form-link-toggle {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 10px;
    font-size: 13px;
}

.pk-form-link > input { padding-right: 100px !important; }

/* List Header (Widget Assignment)
 ========================================================================== */

.pk-list-header {
    padding: 8px 0;
    text-transform: uppercase;
    font-size: 12px;
}

/* Editor (Site: Settings)
========================================================================== */

.pk-editor {
    padding: @form-padding;
    border: @form-border-width solid @form-border;
    background: @form-background;
    border-radius: @global-border-radius;
}

/* Remove `box-shadow` from Drag'n Drop target
 ========================================================================== */

.uk-dragover { box-shadow: none; }

/* SVG Loader
 ========================================================================== */

@radius: 13px;
@size: 15px; // A little larger to prevent overflow clipping
@offset: round(2 * 3.141 * @radius);
@duration: 1.4s;

.pk-loader {
    vertical-align: middle;
    -webkit-animation: pk-loader-rotate @duration linear infinite;
    animation: pk-loader-rotate @duration linear infinite;
}

/*
 * Group
 * Only needed because `transform-origin: center` is not working in Firefox
 */

.pk-loader > * {
    -webkit-transform: translate(@size, @size);
    transform: translate(@size, @size);
}

/*
 * Circle
 */

.pk-loader > * > * {
    stroke-dasharray: @offset;
    stroke-dashoffset: 0;
    // transform-origin: center;
    -webkit-animation: pk-loader-dash @duration ease-in-out infinite,
                       pk-loader-color (@duration*4) ease-in-out infinite;
    animation: pk-loader-dash @duration ease-in-out infinite,
               pk-loader-color (@duration*4) ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes pk-loader-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); }
}

@keyframes pk-loader-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(270deg); }
}

@-webkit-keyframes pk-loader-dash {
    0% { stroke-dashoffset: @offset; }
    50% {
        stroke-dashoffset: @offset/4;
        -webkit-transform:rotate(135deg);
    }
    100% {
        stroke-dashoffset: @offset;
        -webkit-transform:rotate(450deg);
    }
}

@keyframes pk-loader-dash {
    0% { stroke-dashoffset: @offset; }
    50% {
        stroke-dashoffset: @offset/4;
        transform:rotate(135deg);
    }
    100% {
        stroke-dashoffset: @offset;
        transform:rotate(450deg);
    }
}

@-webkit-keyframes pk-loader-color {
    0% { stroke: @global-primary-hover-background; }
    50% { stroke: @global-primary-hover-background; }
    100% { stroke: @global-primary-hover-background; }
}

@keyframes pk-loader-color {
    0% { stroke: @global-primary-hover-background; }
    50% { stroke: @global-primary-hover-background; }
    100% { stroke: @global-primary-hover-background; }
}


add missing dist file

add missing dist file

// Calculate the total height of the control: line height + y-padding + border
@control-height: @selectize-line-height + (2 * @selectize-padding-y) + 2;
@right-padding-with-arrow: @selectize-padding-x + @selectize-arrow-size + @selectize-arrow-offset;

.plugin-item_nowrap.selectize-control.single .selectize-input {
    height: @control-height;
    white-space: nowrap;
    overflow: hidden;

    &.input-active {
        .item-wrap-inner {
            &.long-input-value {
                text-overflow: initial;
                width: auto;
                position: absolute;
                right: 0;
            }
        }
    }

    .item-wrap-outer {
        overflow: hidden;
        position: absolute;
        top: @selectize-padding-y;
        bottom: @selectize-padding-y;
        right: @right-padding-with-arrow;
        left: @selectize-padding-x;

        .item-wrap-inner {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
        }
    }
}

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


Added application version and copyright color.

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/LordAkkarin/SpigotVersionCheck.git/'


placeholder

placeholder

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


Delete animated.less

Delete animated.less

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


styles for add contributors popup

styles for add contributors popup

https://app.asana.com/0/5451362965522/9628325649697

@fulfillColor: #00EA83;

.btn-fulfill {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 14px;
  text-transform: capitalize;
  .button-variant(#FFF; @fulfillColor; @fulfillColor);
  i {
    font-size: 13px;
  }
}

.post {
  margin-bottom: 20px;
  font-size: @font-size-base;
  color: @text-gray;

  .follower, .contributor {
    padding-right: 5px;

    &:last-of-type {
      padding-right: 0px;
    }

    .avatar {
      width: 20px;
      float: none;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
    }

    &:hover {
      color: @intention-color;
    }
  }

  .bubble {
    padding: 15px 0px;

    & > div:not(.triangle) {
      padding: 0 20px;
    }

    .delete {
      position: absolute;
      top: 5px;
      right: 7px;
      display: none;
    }

    &.deletable:hover .delete {
      display: block;
    }

    .fulfillment {
      .proxima-nova-light;
      color: white;
      margin: 10px 0px;
      font-size: 12px;
      height: 25px;
      background-color: @fulfillColor;
      vertical-align: middle;

      a {
        .proxima-nova-bold;
        cursor: pointer;
        color: white;
      }

      .dropdown-menu a {
        color: @light-gray;
        font-size: 11px;
      }

      > div {
        padding-top: 4px;
      }
    }

    h2 {
      margin-top: 0;
      font-size: @font-size-large;
      .proxima-nova-light;
      &, > a { color: black; }
      > a { text-decoration: none; }
    }

    .comment-form {
      padding-left: 20px;
      padding-right: 20px;
    }

    .controls {
      font-size: @font-size-small;
      font-family: @body-font;
      padding-top: 8px;

      &, > a { color: @light-gray; }
      > a {
        cursor: pointer;
        text-decoration: none;
      }
      .timestamp { margin-right: 12px; }
      .vote, .comment {
        display: inline-block;
        padding: 0 4px;
      }
    }

    .triangle {
      top: 14px;
    }
  }

  .comments {
    background-color: @faint-gray;
    padding: 18px 20px 6px;
    margin: 10px -20px -15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    > .comment {
      margin-bottom: 12px;
      > .bubble {
        padding-top: 13px;
        padding-bottom: 10px;
        position: relative;

        .delete {
          position: absolute;
          top: 5px;
          right: 7px;
          display: none;
        }

        &.deletable:hover .delete {
          display: block;
        }
      }
    }
  }

  .followers {
    margin-top: 6px;
    .proxima-nova-light;
    color: @light-gray;
    font-size: 11px;

    .actionIcon {
      font-size: 14px;
      vertical-align: middle;
    }

    a {
      .proxima-nova-bold;
      font-size: 11px;
      color: @light-gray;
      cursor: pointer;
    }
  }

  .followers-edit {
    padding: 0 10px !important;
    margin-top: 12px;
    position: relative;

    .arrow {
      &,
      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }
    }

    .arrow {
      border-width: @popover-arrow-outer-width;
    }

    .arrow:after {
      border-width: @popover-arrow-width;
      content: "";
    }

    .arrow {
      left: 16px + @popover-arrow-outer-width;
      margin-left: -@popover-arrow-outer-width;
      border-top-width: 0;
      border-bottom-color: @tags-border-color;
      top: -10px;
      &:after {
        content: " ";
        top: 1px;
        margin-left: -@popover-arrow-width;
        border-top-width: 0;
        border-bottom-color: @tags-bg-color;
      }
    }

    .decipher-tags {

    }

    .typeahead-result {
      .proxima-nova-light;
      strong {
        .proxima-nova-bold;
      }
    }
  }
}

.fulfill-modal {
  h4 {
    .proxima-nova-regular;
    font-size: 30px;
    color: @fulfillColor;
  }

  p {
    .proxima-nova-light;
    font-size: 14px;
    margin: 30px 0px;
    color: #333332
  }

  label {
    .proxima-nova-regular;
    font-size: 14px;
    color: #000;
  }
}

.post {
  margin-bottom: 20px;
  font-size: @font-size-base;
  color: @text-gray;

  @fulfillColor: #00EA83;

  .btn-fulfill {
    font-size: 15px;
    margin-top: 8px;
    margin-bottom: 14px;
    text-transform: capitalize;
    .button-variant(#FFF; @fulfillColor; @fulfillColor);
    i {
      font-size: 13px;
    }
  }

  .follower, .contributor {
    padding-right: 5px;

    &:last-of-type {
      padding-right: 0px;
    }

    .avatar {
      width: 20px;
      float: none;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
    }

    &:hover {
      color: @intention-color;
    }
  }

  .bubble {
    padding: 15px 0px;

    & > div:not(.triangle) {
      padding: 0 20px;
    }

    .delete {
      position: absolute;
      top: 5px;
      right: 7px;
      display: none;
    }

    &.deletable:hover .delete {
      display: block;
    }

    .fulfillment {
      .proxima-nova-light;
      color: white;
      margin: 10px 0px;
      font-size: 12px;
      height: 25px;
      background-color: @fulfillColor;
      vertical-align: middle;

      a {
        .proxima-nova-bold;
        cursor: pointer;
        color: white;
      }

      .dropdown-menu a {
        color: @light-gray;
        font-size: 11px;
      }

      > div {
        padding-top: 4px;
      }
    }

    h2 {
      margin-top: 0;
      font-size: @font-size-large;
      .proxima-nova-light;
      &, > a { color: black; }
      > a { text-decoration: none; }
    }

    .comment-form {
      padding-left: 20px;
      padding-right: 20px;
    }

    .controls {
      font-size: @font-size-small;
      font-family: @body-font;
      padding-top: 8px;

      &, > a { color: @light-gray; }
      > a {
        cursor: pointer;
        text-decoration: none;
      }
      .timestamp { margin-right: 12px; }
      .vote, .comment {
        display: inline-block;
        padding: 0 4px;
      }
    }

    .triangle {
      top: 14px;
    }
  }

  .comments {
    background-color: @faint-gray;
    padding: 18px 20px 6px;
    margin: 10px -20px -15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    > .comment {
      margin-bottom: 12px;
      > .bubble {
        padding-top: 13px;
        padding-bottom: 10px;
        position: relative;

        .delete {
          position: absolute;
          top: 5px;
          right: 7px;
          display: none;
        }

        &.deletable:hover .delete {
          display: block;
        }
      }
    }
  }

  .followers {
    margin-top: 6px;
    .proxima-nova-light;
    color: @light-gray;
    font-size: 11px;

    .actionIcon {
      font-size: 14px;
      vertical-align: middle;
    }

    a {
      .proxima-nova-bold;
      font-size: 11px;
      color: @light-gray;
      cursor: pointer;
    }
  }

  .followers-edit {
    padding: 0 10px !important;
    margin-top: 12px;
    position: relative;

    .arrow {
      &,
      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }
    }

    .arrow {
      border-width: @popover-arrow-outer-width;
    }

    .arrow:after {
      border-width: @popover-arrow-width;
      content: "";
    }

    .arrow {
      left: 16px + @popover-arrow-outer-width;
      margin-left: -@popover-arrow-outer-width;
      border-top-width: 0;
      border-bottom-color: @tags-border-color;
      top: -10px;
      &:after {
        content: " ";
        top: 1px;
        margin-left: -@popover-arrow-width;
        border-top-width: 0;
        border-bottom-color: @tags-bg-color;
      }
    }

    .decipher-tags {

    }

    .typeahead-result {
      .proxima-nova-light;
      strong {
        .proxima-nova-bold;
      }
    }
  }
}


Fix inline form style with help, close #1040

@import "../mixins/index";

.reset-form();

label {
  position: relative;

  > .@{iconfont-css-prefix} {
    vertical-align: top;
    font-size: @font-size-base;
  }
}

.@{css-prefix}form-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
  font-family: SimSun;
  font-size: @font-size-base;
  color: @label-required-color;
}

// Input styles
.@{css-prefix}input-wrapper {
  display: block;
}
.@{css-prefix}input {
  .input;
}

//== Input type: with extra icon
.has-feedback {
  .input-with-icon();
}

//== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group {
  .input-group(~"@{css-prefix}input");
}

// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used directly on <label>s
.@{css-prefix}radio-inline,
.@{css-prefix}radio-vertical,
.@{css-prefix}checkbox-inline,
.@{css-prefix}checkbox-vertical {
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used on elements with <label> descendants
.@{css-prefix}radio,
.@{css-prefix}checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: @cursor-disabled;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
.@{css-prefix}form-item {
  font-size: @font-size-base;
  margin-bottom: @form-item-margin-bottom;
  color: #666;

  &-control {
    line-height: 32px;
  }

  &.@{css-prefix}form-item-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
  }

  > label {
    color: @label-color;
    text-align: right;
    vertical-align: middle;
    padding-top: 7px;
    padding-bottom: 7px;

    &:lang(en) {
      padding-right: 8px;
    }
  }

  .@{css-prefix}switch {
    margin: 4px 0;
  }
}

.@{css-prefix}form-explain {
  line-height: 1.5;
  margin-top: 3px;
}

.@{css-prefix}form-text {
  display: inline-block;
  padding-right: 8px;
}

.@{css-prefix}form-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{iconfont-css-prefix} {
      .square(@input-height-lg);
      line-height: @input-height-lg;
    }
  }
  .@{css-prefix}input,
  .@{css-prefix}input-group .@{css-prefix}input,
  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
    .input-lg();
  }

  textarea.@{css-prefix}input {
    height: auto;
  }

  // input[type=file]
  .@{css-prefix}upload {
    background: transparent;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{css-prefix}radio-inline,
  .@{css-prefix}checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    margin-left: 16px;

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

  .@{css-prefix}checkbox-vertical,
  .@{css-prefix}radio-vertical {
    display: block;
  }

  .@{input-number-prefix-cls} {
    margin-top: -1px;
    margin-right: 8px;
  }

  .@{calendar-prefix-cls}-picker,
  .@{select-prefix-cls} {
    width: 100%;
  }
}

// Input combined with select
.@{css-prefix}input-group {
  .@{select-prefix-cls}-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
      border-color: #d9d9d9;
    }
  }

  .@{select-prefix-cls}-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
    .@{select-prefix-cls}-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

  .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
    border-color: #d9d9d9;
    box-shadow: none;
  }
}

.ant-search-input {
  &.ant-input-group .ant-input:first-child {
    border-radius: @border-radius-base;
  }
  .ant-search-btn {
    .btn-default;
    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
    margin-left: -30px;
    position: relative;
    border-width: 0 0 0 1px;
    z-index: 2;
    padding-left: 8px;
    padding-right: 8px;
    &:hover {
      border-color: @border-color-base;
    }
    form & {
      padding-top: 6px;
      padding-bottom: 6px;
    }
  }
  &&-focus .ant-search-btn-noempty,
  &:hover .ant-search-btn-noempty {
    .btn-primary;
  }
}

// Form layout
//== Horizontal Form
.@{css-prefix}form-horizontal {
  .@{css-prefix}form-item {
    .make-row;
  }

  .@{css-prefix}radio-inline,
  .@{css-prefix}checkbox-inline {
    vertical-align: top;
  }
}

//== Inline Form
.@{css-prefix}form-inline {
  .@{css-prefix}form-item {
    display: inline-block;
    margin-right: 10px;
    > div {
      display: inline-block;
    }
  }

  .@{css-prefix}input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .@{calendar-prefix-cls}-picker-input {
    width: 100%!important;
  }

  .@{css-prefix}form-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }

  // Fix https://github.com/ant-design/ant-design/issues/1040
  .@{css-prefix}form-explain {
    position: absolute;
  }
}

.@{css-prefix}form-horizontal,
.@{css-prefix}form-inline {
  label {
    > input[type="radio"],
    > input[type="checkbox"] {
      margin-right: 4px;
    }
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback:after {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "anticon" !important;
    .square(@input-height-lg);
    line-height: @input-height-lg;
    text-align: center;
    font-size: 14px;
    .animation(zoomIn .3s @ease-out-back);
  }
}

.has-success {
  &.has-feedback:after {
    animation-name: diffZoomIn1 !important;
  }
}

.has-error {
  &.has-feedback:after {
    animation-name: diffZoomIn2 !important;
  }
}

.has-warning {
  &.has-feedback:after {
    animation-name: diffZoomIn3 !important;
  }
}

.has-success {
  .form-control-validation(@success-color; @input-hover-border-color;);
  .@{css-prefix}input {
    border-color: @input-border-color;
    box-shadow: none;
  }

  &.has-feedback:after {
    content: '\e62f';
    color: @success-color;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback:after {
    content: '\e634';
    color: @warning-color;
  }

  // ant-select
  .@{select-prefix-cls} {
    &-selection {
      border-color: @warning-color;
      box-shadow: 0 0 0 2px tint(@warning-color, 80%);
    }
    &-arrow {
      color: @warning-color;
    }
  }

  // ant-datepicker
  .@{calendar-prefix-cls}-picker-icon:after {
    color: @warning-color;
  }

  // ant-timepicker
  .@{timepicker-prefix-cls}-picker-icon:after {
    color: @warning-color;
  }

  // ant-input-number
  .@{input-number-prefix-cls} {
    border-color: @warning-color;
    box-shadow: 0 0 0 2px tint(@warning-color, 80%);
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback:after {
    content: '\e634';
    color: @error-color;
  }

  // ant-select
  .@{select-prefix-cls} {
    &-selection {
      border-color: @error-color;
      box-shadow: 0 0 0 2px tint(@error-color, 80%);
    }

    &-arrow {
      color: @error-color;
    }
  }

  // ant-datepicker
  .@{calendar-prefix-cls}-picker-icon:after {
    color: @error-color;
  }

  // ant-timepicker
  .@{timepicker-prefix-cls}-picker-icon:after {
    color: @error-color;
  }

  // ant-input-number
  .@{input-number-prefix-cls} {
    border-color: @error-color;
    box-shadow: 0 0 0 2px tint(@error-color, 80%);
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
}

.is-validating {
  &.has-feedback:after {
    display: inline-block;
    .animation(loadingCircle 1s infinite linear);
    content: "\e6a1";
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@import "../mixins/index";

.reset-form();

label {
  position: relative;

  > .@{iconfont-css-prefix} {
    vertical-align: top;
    font-size: @font-size-base;
  }
}

.@{css-prefix}form-item-required:before {
  display: inline-block;
  margin-right: 4px;
  content: "*";
  font-family: SimSun;
  font-size: @font-size-base;
  color: @label-required-color;
}

// Input styles
.@{css-prefix}input-wrapper {
  display: block;
}
.@{css-prefix}input {
  .input;
}

//== Input type: with extra icon
.has-feedback {
  .input-with-icon();
}

//== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group {
  .input-group(~"@{css-prefix}input");
}

// Radio && Checkbox
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used directly on <label>s
.@{css-prefix}radio-inline,
.@{css-prefix}radio-vertical,
.@{css-prefix}checkbox-inline,
.@{css-prefix}checkbox-vertical {
  &.disabled,
  fieldset[disabled] & {
    cursor: @cursor-disabled;
  }
}
// These classes are used on elements with <label> descendants
.@{css-prefix}radio,
.@{css-prefix}checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: @cursor-disabled;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
.@{css-prefix}form-item {
  font-size: @font-size-base;
  margin-bottom: @form-item-margin-bottom;
  color: #666;

  &-control {
    line-height: 32px;
  }

  &.@{css-prefix}form-item-with-help {
    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
  }

  > label {
    color: @label-color;
    text-align: right;
    vertical-align: middle;
    padding-top: 7px;
    padding-bottom: 7px;

    &:lang(en) {
      padding-right: 8px;
    }
  }

  .@{css-prefix}switch {
    margin: 4px 0;
  }
}

.@{css-prefix}form-explain {
  line-height: 1.5;
  margin-top: 3px;
}

.@{css-prefix}form-text {
  display: inline-block;
  padding-right: 8px;
}

.@{css-prefix}form-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{iconfont-css-prefix} {
      .square(@input-height-lg);
      line-height: @input-height-lg;
    }
  }
  .@{css-prefix}input,
  .@{css-prefix}input-group .@{css-prefix}input,
  .@{css-prefix}input-group .@{css-prefix}input-group-addon {
    .input-lg();
  }

  textarea.@{css-prefix}input {
    height: auto;
  }

  // input[type=file]
  .@{css-prefix}upload {
    background: transparent;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{css-prefix}radio-inline,
  .@{css-prefix}checkbox-inline {
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
    margin-left: 16px;

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

  .@{css-prefix}checkbox-vertical,
  .@{css-prefix}radio-vertical {
    display: block;
  }

  .@{input-number-prefix-cls} {
    margin-top: -1px;
    margin-right: 8px;
  }

  .@{calendar-prefix-cls}-picker,
  .@{select-prefix-cls} {
    width: 100%;
  }
}

// Input combined with select
.@{css-prefix}input-group {
  .@{select-prefix-cls}-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover {
      border-color: #d9d9d9;
    }
  }

  .@{select-prefix-cls}-selection--single {
    margin-left: -1px;
    height: @input-height-lg;
    background-color: #eee;
    .@{select-prefix-cls}-selection__rendered {
      padding-left: 8px;
      padding-right: 25px;
      line-height: 30px;
    }
  }

  .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
    border-color: #d9d9d9;
    box-shadow: none;
  }
}

.ant-search-input {
  &.ant-input-group .ant-input:first-child {
    border-radius: @border-radius-base;
  }
  .ant-search-btn {
    .btn-default;
    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
    margin-left: -30px;
    position: relative;
    border-width: 0 0 0 1px;
    z-index: 2;
    padding-left: 8px;
    padding-right: 8px;
    &:hover {
      border-color: @border-color-base;
    }
    form & {
      padding-top: 6px;
      padding-bottom: 6px;
    }
  }
  &&-focus .ant-search-btn-noempty,
  &:hover .ant-search-btn-noempty {
    .btn-primary;
  }
}

// Form layout
//== Horizontal Form
.@{css-prefix}form-horizontal {
  .@{css-prefix}form-item {
    .make-row;
  }

  .@{css-prefix}radio-inline,
  .@{css-prefix}checkbox-inline {
    vertical-align: top;
  }
}

//== Inline Form
.@{css-prefix}form-inline {
  .@{css-prefix}form-item {
    display: inline-block;
    margin-right: 10px;
    > div {
      display: inline-block;
    }
  }

  .@{css-prefix}input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .@{calendar-prefix-cls}-picker-input {
    width: 100%!important;
  }

  .@{css-prefix}form-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }
}

.@{css-prefix}form-horizontal,
.@{css-prefix}form-inline {
  label {
    > input[type="radio"],
    > input[type="checkbox"] {
      margin-right: 4px;
    }
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback:after {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "anticon" !important;
    .square(@input-height-lg);
    line-height: @input-height-lg;
    text-align: center;
    font-size: 14px;
    .animation(zoomIn .3s @ease-out-back);
  }
}

.has-success {
  &.has-feedback:after {
    animation-name: diffZoomIn1 !important;
  }
}

.has-error {
  &.has-feedback:after {
    animation-name: diffZoomIn2 !important;
  }
}

.has-warning {
  &.has-feedback:after {
    animation-name: diffZoomIn3 !important;
  }
}

.has-success {
  .form-control-validation(@success-color; @input-hover-border-color;);
  .@{css-prefix}input {
    border-color: @input-border-color;
    box-shadow: none;
  }

  &.has-feedback:after {
    content: '\e62f';
    color: @success-color;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback:after {
    content: '\e634';
    color: @warning-color;
  }

  // ant-select
  .@{select-prefix-cls} {
    &-selection {
      border-color: @warning-color;
      box-shadow: 0 0 0 2px tint(@warning-color, 80%);
    }
    &-arrow {
      color: @warning-color;
    }
  }

  // ant-datepicker
  .@{calendar-prefix-cls}-picker-icon:after {
    color: @warning-color;
  }

  // ant-timepicker
  .@{timepicker-prefix-cls}-picker-icon:after {
    color: @warning-color;
  }

  // ant-input-number
  .@{input-number-prefix-cls} {
    border-color: @warning-color;
    box-shadow: 0 0 0 2px tint(@warning-color, 80%);
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback:after {
    content: '\e634';
    color: @error-color;
  }

  // ant-select
  .@{select-prefix-cls} {
    &-selection {
      border-color: @error-color;
      box-shadow: 0 0 0 2px tint(@error-color, 80%);
    }

    &-arrow {
      color: @error-color;
    }
  }

  // ant-datepicker
  .@{calendar-prefix-cls}-picker-icon:after {
    color: @error-color;
  }

  // ant-timepicker
  .@{timepicker-prefix-cls}-picker-icon:after {
    color: @error-color;
  }

  // ant-input-number
  .@{input-number-prefix-cls} {
    border-color: @error-color;
    box-shadow: 0 0 0 2px tint(@error-color, 80%);
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
}

.is-validating {
  &.has-feedback:after {
    display: inline-block;
    .animation(loadingCircle 1s infinite linear);
    content: "\e6a1";
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}


fixed one theme body background

fixed one theme body background

@import "uikit/uikit.less";

@icon-font-path: "../../../../../vendor/assets/uikit/fonts";
@global-image-path: '../../images';

/* ========================================================================
   Theme
 ========================================================================== */

/*
 * Force vertical scrollbar
 */

html { overflow-y: scroll; }

/* Navbar
 ========================================================================== */

.tm-navbar {
    position: relative;
    background: @navbar-background;
    box-shadow: 0px 3px 8px -4px rgba(0,0,0,0.15);
    z-index: 1;
}

/* Navbar as overlay */
.tm-navbar-overlay:not(.uk-active) {
    position: absolute;
    z-index: 1;
    width: 100%;
}

// Transparent background
.tm-navbar-transparent {
    border-bottom-color: transparent;
    background: transparent;
}

.tm-navbar-transparent .uk-navbar { background: none; }

// Contrast color
.tm-navbar-contrast {

    .uk-navbar { color: @contrast-color; }

    // Nav
    .uk-navbar-nav > li > a { color: fade(@contrast-color, 70%); }

    .uk-navbar-nav > li:hover > a,
    .uk-navbar-nav > li > a:focus,
    .uk-navbar-nav > li.uk-open > a { color: @contrast-color; }

    .uk-navbar-nav > li > a:active { color: @contrast-color; }

    .uk-navbar-nav > li.uk-active > a { color: @contrast-color; }

    // Link
    .uk-navbar-content > a:not([class]) { color: fade(@contrast-color, 70%); }
    .uk-navbar-content > a:not([class]):hover { color: @contrast-color; }

    // Brand
    .uk-navbar-brand { color: fade(@contrast-color, 70%); }

    .uk-navbar-brand:hover,
    .uk-navbar-brand:focus { color: @contrast-color; }

    // Toggle
    .uk-navbar-toggle { color: fade(@contrast-color, 70%); }

    .uk-navbar-toggle:hover,
    .uk-navbar-toggle:focus { color: @contrast-color; }

}

/* Blocks
 ========================================================================== */

.tm-block-height { min-height: ~"calc(100vh - 81px)"; }

/*
 * Footer
 */

/* Phone landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .tm-footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }

}

.tm-footer .uk-panel + .uk-panel { margin-top: @global-grid-gutter; }

@import "uikit/uikit.less";

@icon-font-path: "../../../../../vendor/assets/uikit/fonts";
@global-image-path: '../../images';

/* ========================================================================
   Theme
 ========================================================================== */

/*
 * Force vertical scrollbar
 */

html { overflow-y: scroll; }

body { background: @block-secondary-background; }

/* Navbar
 ========================================================================== */

.tm-navbar {
    position: relative;
    background: @navbar-background;
    box-shadow: 0px 3px 8px -4px rgba(0,0,0,0.15);
    z-index: 1;
}

/* Navbar as overlay */
.tm-navbar-overlay:not(.uk-active) {
    position: absolute;
    z-index: 1;
    width: 100%;
}

// Transparent background
.tm-navbar-transparent {
    border-bottom-color: transparent;
    background: transparent;
}

.tm-navbar-transparent .uk-navbar { background: none; }

// Contrast color
.tm-navbar-contrast {

    .uk-navbar { color: @contrast-color; }

    // Nav
    .uk-navbar-nav > li > a { color: fade(@contrast-color, 70%); }

    .uk-navbar-nav > li:hover > a,
    .uk-navbar-nav > li > a:focus,
    .uk-navbar-nav > li.uk-open > a { color: @contrast-color; }

    .uk-navbar-nav > li > a:active { color: @contrast-color; }

    .uk-navbar-nav > li.uk-active > a { color: @contrast-color; }

    // Link
    .uk-navbar-content > a:not([class]) { color: fade(@contrast-color, 70%); }
    .uk-navbar-content > a:not([class]):hover { color: @contrast-color; }

    // Brand
    .uk-navbar-brand { color: fade(@contrast-color, 70%); }

    .uk-navbar-brand:hover,
    .uk-navbar-brand:focus { color: @contrast-color; }

    // Toggle
    .uk-navbar-toggle { color: fade(@contrast-color, 70%); }

    .uk-navbar-toggle:hover,
    .uk-navbar-toggle:focus { color: @contrast-color; }

}

/* Blocks
 ========================================================================== */

.tm-block-height { min-height: ~"calc(100vh - 81px)"; }

/*
 * Footer
 */

/* Phone landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .tm-footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }

}

.tm-footer .uk-panel + .uk-panel { margin-top: @global-grid-gutter; }