all changes removed

all changes removed

// Copyright (c) 2012 - present 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 */

@code-padding: 15px;

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

    > * {
        text-indent: 0;
    }
}

.show-line-padding .CodeMirror pre {
    padding-left: 0;
}

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

.CodeMirror {
    .code-font();
}

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

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

.CodeMirror-activeline-background {
    background: transparent;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: @activeline-bg;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset @code-padding 0 0 0 @activeline-number-bg;
}

.CodeMirror-focused .CodeMirror-activeline {
    & > div, .CodeMirror-gutter-elt {
        height: 100%;
    }
    .CodeMirror-gutter-elt {
        background: @activeline-number-bg;
        color: @activeline-number;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @accent-comment;
    }
}

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

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-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-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; text-decoration: none;}
span.cm-rangeinfo {color: @accent-rangeinfo;}
span.cm-minus {color: @accent-minus;}
span.cm-plus {color: @accent-plus;}
span.cm-property {color: @accent-property;} //cm-property has go after cm-string for a better JSON look.
span.cm-error {color: @accent-error;}

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

div.CodeMirror-cursors {
    .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;
    border-right: none;
}

.platform-mac {
    .CodeMirror-scrollbar-filler {
        background-image: url(images/scrollbar-mac-corner.png);
    }
    .CodeMirror-gutter-filler {
        background-image: url(images/scrollbar-mac-bg.png);
    }
}
.platform-win {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @win-scrollbar-track;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}
.platform-linux {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @background;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}

.CodeMirror-linenumber {
    color: @accent-comment;
/* XXXBramble: Brackets does this, but we don't need that much extra width
    min-width: 2.5em;
*/
    /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
    padding: 0 @code-padding 0 10px;  // note: overridden if code-folding gutter is shown
}
.CodeMirror .CodeMirror-selected {
    background: @selection-color-unfocused;
}
.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-overwrite .CodeMirror-cursor {
        border-left: none !important;
        border-bottom: 1px solid black;
        width: 1.2ex;
    }

    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @matching-bracket;
        color: @accent-bracket !important;
    }

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

    .CodeMirror .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.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;
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }

    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
        box-shadow: none;
    }

    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @accent-comment;
    }

    .CodeMirror-focused .CodeMirror-activeline-background {
        background: @activeline-bg;
    }

    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
        box-shadow: inset @code-padding 0 0 0 @background;
    }

    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: @activeline-number-bg-inline;
            color: @activeline-number;
        }
    }

    .CodeMirror-matchingtag { background: @matching-bracket; }
}

/*
 * 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 - present 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 */

@code-padding: 15px;

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

    > * {
        text-indent: 0;
    }
}

.show-line-padding .CodeMirror pre {
}

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

.CodeMirror {
    .code-font();
}

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

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

.CodeMirror-activeline-background {
    background: transparent;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: @activeline-bg;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset @code-padding 0 0 0 @activeline-number-bg;
}

.CodeMirror-focused .CodeMirror-activeline {
    & > div, .CodeMirror-gutter-elt {
        height: 100%;
    }
    .CodeMirror-gutter-elt {
        background: @activeline-number-bg;
        color: @activeline-number;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @accent-comment;
    }
}

.CodeMirror-focused .cm-matchhighlight {
    border-bottom: 2px solid #78B2F2;
}

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-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-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; text-decoration: none;}
span.cm-rangeinfo {color: @accent-rangeinfo;}
span.cm-minus {color: @accent-minus;}
span.cm-plus {color: @accent-plus;}
span.cm-property {color: @accent-property;} //cm-property has go after cm-string for a better JSON look.
span.cm-error {color: @accent-error;}

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

div.CodeMirror-cursors {
    .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;
    border-right: none;
}

.platform-mac {
    .CodeMirror-scrollbar-filler {
        background-image: url(images/scrollbar-mac-corner.png);
    }
    .CodeMirror-gutter-filler {
        background-image: url(images/scrollbar-mac-bg.png);
    }
}
.platform-win {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @win-scrollbar-track;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}
.platform-linux {
    .CodeMirror-scrollbar-filler,
    .CodeMirror-gutter-filler {
        background-color: @background;
        height: 12px !important;
    }
    .CodeMirror-scrollbar-filler {
        width: 12px !important;
    }
}

.CodeMirror-linenumber {
    color: @accent-comment;
/* XXXBramble: Brackets does this, but we don't need that much extra width
    min-width: 2.5em;
*/
    /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
    padding: 0 @code-padding 0 0;  // note: overridden if code-folding gutter is shown
}
.CodeMirror .CodeMirror-selected {
    background: @selection-color-unfocused;
}
.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-overwrite .CodeMirror-cursor {
        border-left: none !important;
        border-bottom: 1px solid black;
        width: 1.2ex;
    }

    .CodeMirror {
        background: transparent;
    }

    .CodeMirror span.CodeMirror-matchingbracket {
        /* Ensure visibility against gray inline editor background */
        background-color: @matching-bracket;
        color: @accent-bracket !important;
    }

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

    .CodeMirror .CodeMirror-selected {
        background: @selection-color-unfocused;
    }
    .CodeMirror.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;
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }

    .show-line-padding & .CodeMirror .CodeMirror-activeline-background {
        box-shadow: none;
    }

    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @accent-comment;
    }

    .CodeMirror-focused .CodeMirror-activeline-background {
        background: @activeline-bg;
    }

    .show-line-padding & .CodeMirror-focused .CodeMirror-activeline-background {
        box-shadow: inset @code-padding 0 0 0 @background;
    }

    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: @activeline-number-bg-inline;
            color: @activeline-number;
        }
    }

    .CodeMirror-matchingtag { background: @matching-bracket; }
}

/*
 * 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;
}


Add margins to paragraphs except last-child

@import (reference) "../../styles/modules/variables.less";
@import (reference) "../../styles/fonts.less";

.Body {
  font-family: @font-text;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: none;

  // Heading

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
  }

  h1 {
    margin: 2.5rem 0 0.3rem;
    font-size: 160%;
  }

  h2 {
    margin: 2.5rem 0 0.3rem;
    font-size: 140%;
  }

  h3 {
    margin: 2rem 0 0.3rem;
    font-size: 120%;
  }

  h4 {
    margin: 1.5rem 0 0.2rem;
    font-size: 110%;
  }

  h5 {
    margin: 1rem 0 0.2rem;
    font-size: 100%;
  }

  h6 {
    margin: 1rem 0 0.2rem;
    font-size: 90%;
  }

  // Paragraph

  p {
    font-size: 100%;
    line-height: 150%;

    &:not(:last-child) {
      margin: 0 0 0.5rem 0;
    }
  }

  // List

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  ol,
  ul {
    margin-left: 20px;

    li {
      list-style-position: outside;
      margin: 8px 0;
    }
  }

  // Quote and code

  blockquote {
    padding-left: 1rem;
    margin: 0.4rem 0;
    border-left: 1px solid rgba(0, 0, 0, 0.6);
    color: rgba(0, 0, 0, 0.6);
  }

  :not(pre) > code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
  }

  pre {
    overflow-y: auto;
    padding: 10px 20px;
    margin-bottom: 14px;
    line-height: 1em;
    background-color: #f7f7f9;

    code {
      font-size: 16px;
    }
  }

  // Table

  table {
    width: 100%;
    display: table;
    table-layout: fixed;

    tr > th {
      text-align: left;
      background-color: #f2f2f2;
    }

    tr > th,
    td {
      padding: 4px 12px;
      word-wrap: break-word;
      vertical-align: middle;
    }

    tr:nth-child(even) {
      td {
        background-color: #f2f2f2;
      }
    }
  }

  // Position

  div.pull-left {
    float: left;
    padding-right: 1rem;
    max-width: 50%;
  }

  div.pull-right {
    float: right;
    padding-left: 1rem;
    max-width: 50%;
  }

  div.text-justify {
    text-align: justify;
  }

  div.text-right {
    text-align: right;
  }

  div.text-center {
    text-align: center;
  }

  div.text-rtl {
    direction: rtl;
  }

  // Images

  img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: inline-block;
    vertical-align: middle;
  }

  hr {
    clear: both;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  &--full {
    font-size: 18px;

    @media @small {
      font-size: 21px;
    }

    p:not(:last-child) {
      margin: 0 0 1.5rem 0;
    }
  }
}

@import (reference) "../../styles/modules/variables.less";
@import (reference) "../../styles/fonts.less";

.Body {
  font-family: @font-text;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: none;

  &--full {
    font-size: 18px;

    @media @small {
      font-size: 21px;
    }

    p {
      margin: 0 0 1.5rem 0;
    }
  }

  // Heading

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
  }

  h1 {
    margin: 2.5rem 0 0.3rem;
    font-size: 160%;
  }

  h2 {
    margin: 2.5rem 0 0.3rem;
    font-size: 140%;
  }

  h3 {
    margin: 2rem 0 0.3rem;
    font-size: 120%;
  }

  h4 {
    margin: 1.5rem 0 0.2rem;
    font-size: 110%;
  }

  h5 {
    margin: 1rem 0 0.2rem;
    font-size: 100%;
  }

  h6 {
    margin: 1rem 0 0.2rem;
    font-size: 90%;
  }

  // Paragraph

  p {
    font-size: 100%;
    line-height: 150%;
  }

  // List

  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }

  ol,
  ul {
    margin-left: 20px;

    li {
      list-style-position: outside;
      margin: 8px 0;
    }
  }

  // Quote and code

  blockquote {
    padding-left: 1rem;
    margin: 0.4rem 0;
    border-left: 1px solid rgba(0, 0, 0, 0.6);
    color: rgba(0, 0, 0, 0.6);
  }

  :not(pre) > code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
  }

  pre {
    overflow-y: auto;
    padding: 10px 20px;
    margin-bottom: 14px;
    line-height: 1em;
    background-color: #f7f7f9;

    code {
      font-size: 16px;
    }
  }

  // Table

  table {
    width: 100%;
    display: table;
    table-layout: fixed;

    tr > th {
      text-align: left;
      background-color: #f2f2f2;
    }

    tr > th,
    td {
      padding: 4px 12px;
      word-wrap: break-word;
      vertical-align: middle;
    }

    tr:nth-child(even) {
      td {
        background-color: #f2f2f2;
      }
    }
  }

  // Position

  div.pull-left {
    float: left;
    padding-right: 1rem;
    max-width: 50%;
  }

  div.pull-right {
    float: right;
    padding-left: 1rem;
    max-width: 50%;
  }

  div.text-justify {
    text-align: justify;
  }

  div.text-right {
    text-align: right;
  }

  div.text-center {
    text-align: center;
  }

  div.text-rtl {
    direction: rtl;
  }

  // Images

  img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: inline-block;
    vertical-align: middle;
  }

  hr {
    clear: both;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}


add styles for Slider component

add styles for Slider component

.Slider {
  input[type=range] {
    -webkit-appearance: none;
    width: 100%;
  }

  input[type=range]:focus {
    outline: none;
  }

  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    cursor: pointer;
    background: lightgrey;
    height: 5px;
  }

  input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: 12px;
    background: #403d39;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6.95px;
  }

  input[type=range]:focus::-webkit-slider-runnable-track {
    background: lightgrey;
  }

  input[type=range]::-moz-range-track {
    width: 100%;
    cursor: pointer;
    background: lightgrey;
    border-radius: 1px;
  }

  input[type=range]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 12px;
    background: #403d39;
    cursor: pointer;
  }

  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  input[type=range]::-ms-thumb {
    height: 23px;
    width: 23px;
    border-radius: 12px;
    background: #403d39;
    cursor: pointer;
  }
}

error: pathspec 'components/views/Slider/index.less' did not match any file(s) known to git


Remove width from pattern (container/layout should dictate width)

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/putterschool/styleguide.git/'


Fixed cart-product's width and no vertical borders

The main purpose is to avoid the product description's overflow text (truncated with an ellipsis) from causing the whole product description to wrap to the following line. As a side-effect, the cart-product cell is given priority in terms of width allocation.
The vertical border change is just an aesthetics one.

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/hevnly/asset-bazaar.git/'


potential fix for custom pointer issues in IE10 and IE11. #209

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/bmesuere/uni-test.git/'


update site style

update site style

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
  line-height: 1.5;
  color: #666;
  font-size: 14px;
  background: #ECECEC;
  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow-x: hidden;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body,
ul,
li,
p {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  color: #2db7f5;
  text-decoration: none;
  transition: color .3s ease;
}

a:hover {
  color: #4DC4F0;
}

.clearfix:after {
  clear: both;
  display: table;
  content: '';
}

::selection {
  background: #2db7f5;
  color: #fff;
}
::-moz-selection {
  background: #2db7f5;
  color: #fff;
}

header {
  width: 100%;
  background: #fff;
  font-size: 16px;
  margin-bottom: 24px;
}

.fn-hide {
  display: none;
}

.fn-alpha-in {
  opacity: 1 !important;
}

.fn-alpha-out {
  opacity: 0 !important;
}

a.logo {
  float: left;
  height: 40px;
  line-height: 40px;
  margin: 20px 0 20px 4%;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
  color: #2db7f5;
  width: 219px;
}

.logo img {
  width: 40px;
  float: left;
  margin-right: 8px;
}

.search {
  float: left;
  height: 20px;
  padding: 0px 0 0 30px;
  margin: 30px auto 0;
  border-left: 1px solid #e9e9e9;
  position: relative;
}

#autoComplete {
  margin-top: -3px;
  width: 200px;
}

#autoComplete .ant-select {
  font-size: 14px;
}

#autoComplete .ant-select-selection--single {
  border: transparent;
  outline: none;
  width: 160px;
  height: 28px;
  line-height: 28px;
  color: #999;
  transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-size: 14px;
  box-shadow: none;
}

#autoComplete .ant-select-search__field:focus {
  box-shadow: none;
}

#autoComplete input::-webkit-input-placeholder,
#autoComplete input::-moz-placeholder,
#autoComplete input:-ms-input-placeholder {
  color: #CADCE3;
}

.autoComplete.ant-select-dropdown {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
  font-size: 14px;
}

.autoComplete .ant-select-dropdown-menu {
  max-height: 200px;
}

.autoComplete .ant-select-dropdown-menu-item {
  border-radius: 0!important;
}

.autoComplete .ant-component-decs {
  font-size: 12px;
  position: absolute;
  top: 9px;
  color: #aaa;
  right: 16px;
}

.global-hint {
  color: #666;
  font-size: 12px;
  padding: 5px 14px 6px;
  margin-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 1px 3px #ddd;
  opacity: 0.8;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.nav {
  height: 80px;
  line-height: 80px;
  float: right;
  font-size: 0.875em;
  position: relative;
  margin-right: 4%;
  overflow: hidden;
}

.nav ul li {
  float: left;
  text-align: center;
}

.nav ul li a {
  color: #666;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 0 22px;
}

a.nav-link-disabled {
  cursor: not-allowed;
  color: #ccc !important;
  pointer-events: none;
}

.nav ul li.current a {
  color: #2db7f5;
  font-weight: 600;
}

.nav ul li a:hover,
.nav ul li .hover {
  color: #2db7f5;
}

.nav .bar {
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #2db7f5;
  display: none;
  transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-box {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.perspective {
  vertical-align: top;
  position: relative;
  perspective: 4000px;
  -webkit-perspective: 4000px;
}

.main {
  overflow: hidden;
  position: relative;
  height: calc(100% - 190px);
  min-height: 500px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
}

.banner-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: inherit;
  -webkit-animation: alphaTo .3s ease-out;
  animation: alphaTo .3s ease-out;
}

.banner-box .banner-img {
  background: url("https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg") center no-repeat;
  height: 1300px;
  width: 2400px;
  transform-origin: center center;
  transition: opacity 0.5s ease-out;
}

.banner-box #bannerAnim,
.load-main-box {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  z-index: 2;
    top:0;
    left:0;
}

.load-box {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  width: 140px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -40px;
  z-index: 99;
  animation: alphaTo .3s ease-out;
  -webkit-animation: alphaTo .3s ease-out;
  font-size: 22px;
  text-align: center;
  font-family: "Raleway","Helvetica Neue",Helvetica,"Lantinghei SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
}

.load-box em {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
  width: 50px;
  height: 50px;
  margin: auto;
  animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
}
.load-box span {
  display: inline-block;
}
.load-box span > p {
  float: left;
}
.load-main-box .load-bar {
  width: 0%;
  height: 2px;
  background: #2db7f5;
  transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
}
.load-out {
  -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.banner-box #bannerAnim .banner-line-absolute {
  position: absolute;
}

footer {
  clear: both;
  border-top: 1px solid #eee;
  font-size: 12px;
  background: #fff;
  position: relative;
  z-index: 1;
  color: #666;
  box-shadow: 0 1000px 0 1000px #fff;
}

footer ul {
  overflow: hidden;
  margin: 0 2%;
}

footer ul li {
  float: left;
  width: 25%;
  padding: 5px 2% 15px;
}

footer ul li > h2 {
  font-size: 16px;
  margin: 10px auto 5px;
  font-weight: normal;
}

footer ul li > div {
  margin: auto;
  margin: 10px 0;
}

footer ul li > a {
  margin: 5px 2px 0 0;
}

.aside-container {
  width: 220px;
  padding-bottom: 50px;
  float: left;
  border-right: 1px solid #e9e9e9;
  margin-right: -1px;
}

.aside-container > ul > li {
  overflow: hidden;
  position: relative;
  right: -1px;
  z-index: 1;
}

.aside-container > ul > li > ul {
  margin-left: 16px;
}

.aside-container li h4 {
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 0 24px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  position: relative;
  background: #fff;
  border-right: 1px solid #e9e9e9;
}

.aside-container li h4:after {
  position: absolute;
  top: 0;
  right: 20px;
  content: "\e602";
  font-family: "anticon";
  transform: scale(0.6);
  font-size: 12px;
  opacity: 0;
  transition: all 0.3s ease;
}

.aside-container li[open=open] h4:after {
  -webkit-transform: scale(0.6) rotate(180deg);
  transform: scale(0.6) rotate(180deg);
}

.aside-container li:hover h4:after {
  opacity: 0.8;
}

.aside-container li > ul.aside-list-show {
  display: block;
}

.aside-container li a {
  line-height: 40px;
  height: 40px;
  display: block;
  padding-left: 24px;
  font-size: 14px;
  color: #666;
}

.aside-container li.type-divider {
  font-size: 12px;
  -webkit-transform:  scale(0.9);
  transform: scale(0.9);
  transform-origin: 0 50%;
  color: #aaa;
  margin: 6px 0 6px 24px;
}

.aside-container .chinese {
  font-size: 12px;
  margin-left: 6px;
  font-weight: normal;
  opacity: 0.67;
}

.aside-container li a:hover {
  color: #2db7f5;
}

.aside-container .current {
  border-right: 2px solid #2db7f5;
  color: #2db7f5;
}

.aside-container .current a {
  color: #2db7f5;
}

.main-wrapper {
  background: #fff;
  width: 92%;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  padding: 24px 0 0;
  margin-bottom: 24px;
  min-height: 400px;
  position: relative;
}

.main-container {
  border-left: 1px solid #e9e9e9;
  margin-left: 219px;
  padding: 0 40px 120px;
  background: #fff;
  min-height: 400px;
  min-height: 80vh;
  overflow: hidden;
}

.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 { font-size: 28px; }
.markdown h2 { font-size: 22px; }
.markdown h3 { font-size: 18px; }
.markdown h4 { font-size: 16px; }
.markdown h5 { font-size: 14px; }
.markdown h6 { font-size: 12px; }

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
  width: 80%;
}

.markdown ul > li {
  list-style: circle;
}

.markdown > ul li,
.markdown blockquote ul > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown > ul li p,
.markdown > ol li p {
  margin: 0.6em 0;
}

.markdown ol > li {
  list-style: decimal;
}

.markdown > ol li,
.markdown blockquote ol > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown code {
  margin: 0 3px;
}

.markdown pre {
  border-radius: 6px;
  background: #f7f7f7;
}

.markdown pre code {
  border: none;
  padding: 1em 2em;
  background: #f7f7f7;
  margin: 0;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown > table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 80%;
  margin-bottom: 24px;
}

.markdown > table th {
  white-space: nowrap;
  color: #5C6B77;
  font-weight: 600;
}

.markdown > table th,
.markdown > table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown > table th {
  background: #F7F7F7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

#api ~ ul > li > p > strong ~ code {
  background: #fff;
  color: #CC7300;
  border: none;
  margin-left: 0.5em;
}

.prev-next-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  padding-left: 220px;
}

.prev-next-nav > .prev-page,
.prev-next-nav > .next-page {
  padding: 0 24px;
  width: 50%;
  float: left;
  line-height: 72px;
  height: 72px;
  border-top: 1px solid #e9e9e9;
}

.prev-next-nav > a.prev-page:before {
  font-family: 'anticon';
  content: '\e601';
  font-size: 12px;
  margin-right: 1em;
}

.prev-next-nav > .next-page {
  text-align: right;
  float: right;
}

.prev-next-nav > a.next-page:after {
  font-family: 'anticon';
  content: '\e600';
  font-size: 12px;
  margin-left: 1em;
}

.toc {
  font-size: 14px;
  margin-bottom: 20px;
  background: #fbfbfb;
  border-left: 2px solid #eee;
}

.toc > ul {
  padding: 8px 0;
}

.toc > ul li {
  list-style: none;
}

.toc li > ul {
  text-indent: 8px;
  font-size: 12px;
  display: none;
}

.toc a {
  padding-left: 16px;
  border-left: 2px solid #eee;
  margin-left: -2px;
  display: block;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  color: #666;
}

.toc a:hover {
  color: #2db7f5;
}

.toc a.current {
  border-color: #2db7f5;
  color: #2db7f5;
}

/* autocomplete */
.ui-select ul {
  outline: none;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px #ccc;
  background-clip: padding-box;
  border: 1px solid #ccc;
}

.ui-select-item {
  width: 156px;
  padding: 10px 12px;
  clear: both;
  font-size: 14px;
  font-weight: normal;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-select-item-hover {
  cursor: pointer;
  background-color: #eaf8fe;
}
/* autocomplete end */

/***************************************************************************/
.api-link {
  font-size: 16px;
  vertical-align: middle;
  margin-left: 15px;
  font-weight: normal;
}

.sketch-link {
  font-size: 14px;
  vertical-align: middle;
  font-weight: normal;
  float: right;
  margin-right: 15px;
  border: 1px solid #ddd;
  padding: 2px 15px;
  border-radius: 100px;
  color: #777;
}

.sketch-link i {
  margin-right: 5px;
}

.component-demos {
  margin: 2em 0 1em;
  color: #404040;
  font-weight: 500;
  font-size: 24px;
}

.component-demos .anticon-appstore {
  cursor: pointer;
  font-size: 14px;
  color: #9199AC;
  margin-left: 5px;
  opacity: 0.8;
  transition: all 0.3s ease;
  top: -2px;
  position: relative;
}

.component-demos .anticon-appstore:hover {
  opacity: 1;
}

.component-demos .anticon-appstore.expand {
  color: #3B4357;
}

.code-boxes-col-1-1 {
  width: 80%;
}

.code-boxes-col-2-1 {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  padding-right: 8px;
}

.code-boxes-col-2-1:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.code-box {
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0px 0 16px 0px;
  transition: all 0.5s ease;
}

.code-box:hover {
  border-color: #ccc;
}

.code-box:target {
  border: 1px solid rgba(45, 183, 245, 0.7);
  box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
}

.code-box:hover .code-box-meta,
.code-box:target .code-box-meta {
  background: #fbfbfb;
}

.code-box:hover .code-box-title,
.code-box:target .code-box-title {
  background: #fbfbfb;
  box-shadow: 0 -1.2px 0 #e9e9e9;
}

.code-box .code-box-title a,
.code-box .code-box-title a:hover {
  color: #666;
}

.code-box .code-box-demo {
  border-bottom: 1px solid #E9E9E9;
  padding: 42px 20px 50px;
}

.code-box-meta {
  position: relative;
  padding: 10px 15px;
  border-radius: 0 0 6px 6px;
  transition: background-color 0.4s ease;
  width: 100%;
}

.code-box-meta h4,
.code-box-meta p {
  margin: 0;
}

.code-box-title {
  position: absolute;
  top: -14px;
  padding: 1px 1.1em;
  color: #777;
  border-radius: 6px;
  background: #fff;
  transition: all 0.4s ease;
}

.code-box-title:before {
  font-family: anticon;
  content: "\e658";
  font-size: 16px;
  vertical-align: middle;
  line-height: 22px;
  position: relative;
  margin-right: 8px;
  top: -2px;
  color: #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
}

.code-box-meta > p {
  font-size: 12px;
  margin: 0.5em 0;
  padding-right: 25px;
  width: 100%;
  word-break: break-word;
}

.code-box .collapse {
  position: absolute;
  right: 16px;
  bottom: 18px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  opacity: 0.5;
  text-align: center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.3s ease;
  color: #999;
  background: #fff;
  user-select: none;
}

.code-box.expand .collapse {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.code-box .collapse:hover {
  opacity: 1;
}

.code-box .highlight {
  overflow: hidden;
  display: none;
  padding: 5px;
  border-top: 1px dashed #e9e9e9;
}

.code-box pre {
  margin: 0;
  width: auto;
}

.code-box pre code {
  border: none;
  background: #fff;
}

.banner-entry {
  position: absolute;
  top: 19%;
  left: 10%;
  z-index: 100;
  color: #707d8d;
  font-family: "Raleway","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
  font-weight: 300;
}

.entry-title {
  font-size: 50px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}

.entry-slogan {
  padding-left: 4px;
  font-size: 14px;
  color: #9ea9b4;
}

a.entry-link {
  margin-top: 30px;
  border: 1px solid rgba(95, 108, 119, 0.3);
  border-radius: 50px;
  color: #5F6C77;
  display: inline-block;
  text-align: center;
  padding: 8px 20px;
  transition: border 0.3s ease;
}

a.entry-link:hover {
  border-color: #5F6C77;
}

a.entry-link .anticon-smile {
  margin-right: 2px;
  display: inline-block;
  -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out;
  animation: rotateCircleBack 0.6s 1 ease-in-out;
  line-height: 1;
  width: 16px;
}

a.entry-link:hover .anticon-smile {
  -webkit-animation: rotateCircle 0.6s 1 ease-in-out;
  animation: rotateCircle 0.6s 1 ease-in-out;
}

.entry-version {
  font-size: 12px;
  margin-top: 15px;
  position: absolute;
  top: 36px;
  right: -32px;
}

#instantclick {
  top: 80px!important;
  position: absolute!important;
}

#instantclick-bar {
  background: #2db7f5;
}

#versions-select {
  position: relative;
  top: -2px;
}

.window-frame {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  line-height: 1;
}

.window-frame .top-bar {
  background: #DCD9DC;
  background-image: -webkit-linear-gradient(#F6F6F6, #dadada);
  background-image: linear-gradient(#F6F6F6, #dadada);
  min-height: 2rem;
  border-radius: 0.35rem 0.35rem 0 0;
  padding: 0.41528rem 0.83056rem;
  border-bottom: 1px solid transparent;
  border-bottom-color: #ccc;
  color: rgba(0, 0, 0, 0.5);
}

.window-frame .top-bar .address-bar {
  border-radius: 0.245rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: black;
  box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 0 0.5em 0 1em;
  font-size: 0.75rem;
  line-height: 2;
  background: white;
  width: 60%;
  margin-left: 15%;
}

.window-frame .top-bar .controls {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding-top: 0.2em;
}
.window-frame .top-bar .controls > * {
  position: relative;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
  margin-right: 0.41528rem;
  -webkit-transition: 0.1s linear;
          transition: 0.1s linear;
}
.window-frame .top-bar .control {
  width: 0.83056rem;
  height: 0.83056rem;
  background: #DCD9DC;
  border-radius: 0.83056rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.window-frame .top-bar .control:hover {
  background: #b0adb0;
}
.window-frame .top-bar .control:before,
.window-frame .top-bar .control:after {
  line-height: 0.5;
  color: black;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  vertical-align: middle;
  line-height: 0.5;
}
.window-frame .top-bar .control.close {
  background: #FC625C;
}
.window-frame .top-bar .control.minify {
  background: #FDC041;
}
.window-frame .top-bar .control.expand {
  background: #35CD4B;
}
.window-frame .window-content {
  padding: 0;
  line-height: 1.5;
  overflow: auto;
  height: 440px;
  position: relative;
  border-radius: 0 0 5px 5px;
  background: #ececec;
}

.window-frame .status-bar {
  height: 2rem;
  border-radius: 0 0 0.35rem 0.35rem;
  display: none;
}

.demos-anchor {
  color: #aaa;
  position: absolute;
  margin-right: 24px;
  top: 24px;
  right: 0;
  z-index: 100;
  background: #fff;
  font-size: 12px;
}

.demos-anchor a {
  padding-left: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.demos-anchor.toc.sticky {
  position: fixed;
  top: 0;
  right: 4%;
  margin-right: 24px;
  z-index: 100;
}

.preview-image-boxes {
  float: right;
  margin: 0 0 110px 60px;
  width: 616px;
}

.preview-image-boxes + .preview-image-boxes {
  margin-top: -75px;
}

.preview-image-box {
  width: 100%;
  float: left;
  padding: 0 8px;
}

.preview-image-wrapper {
  background: #f4f4f4;
  padding: 16px;
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
}

.preview-image-wrapper.good:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #2db7f5;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.preview-image-wrapper.bad:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #f50;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.preview-image-title {
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}

.preview-image-description {
  font-size: 12px;
  margin-top: 2px;
  color: #999;
  line-height: 1.5;
}

.preview-image-description hr {
  margin: 2px 0;
  border: 0;
  background: none;
}

.preview-image-box img {
  cursor: pointer;
  max-width: 100%;
  transition: all 0.3s ease;
  background: #fff;
  padding: 12px;
  border-radius: 6px;
}

.preview-image-boxes.pack img {
  padding: 0;
  box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff,  0 7px 0 0 #ddd;
}

.preview-image-box img:hover {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}

.outside-link:after {
  content: '\e669';
  font-family: 'anticon';
  margin-left: 5px;
  font-size: 12px;
}

.image-modal {
  text-align: center;
}

.image-modal-container {
  position: relative;
  text-align: center;
}

.image-modal .ant-modal-header {
  display: none;
}

.image-modal .ant-carousel .slick-slider {
  padding-bottom: 24px;
}

.image-modal .ant-carousel .slick-dots {
  text-align: left;
  bottom: -6px;
}

.image-modal .ant-carousel .slick-dots li {
  margin: 0;
}

.image-modal .preview-image-title {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);;
}

.image-modal .slick-prev {
  left: 0;
  height: 100%;
  top: 0;
  margin-top: 0;
  width: 50%;
  text-align: left;
}

.image-modal .slick-prev:after {
  content: "\e601";
  font-size: 28px;
  font-family: "anticon";
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  top: 220px;
  right: 24px;
}

.image-modal .slick-prev:hover:after {
  opacity: 0.38;
}

.image-modal .slick-next {
  right: 0;
  height: 100%;
  top: 0;
  margin-top: 0;
  width: 50%;
  text-align: right;
}

.image-modal .slick-next:after {
  content: "\e600";
  font-size: 28px;
  font-family: "anticon";
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  top: 220px;
  right: 24px;
}

.image-modal .slick-next:hover:after {
  opacity: 0.38;
}

.image-modal .outside-link {
  position: absolute;
  right: 16px;
  bottom: 12px;
}

.image-modal .ant-carousel .slick-slide img {
  max-width: 100%;
  display: inline-block;
}

.resource-cards {
  width: 100%;
}

.resource-card {
  max-width: 350px;
  width: 40%;
  min-width: 300px;;
  height: 130px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  font-size: 12px;
  color: #777;
  display: inline-block;
  margin: 20px 40px 10px 0;
  vertical-align: middle;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.resource-card:hover {
  box-shadow: 0 1px 4px rgba(64,64,64,.2);
}

.resource-card:hover .resource-card-title {
  color: #2db7f5;
}

.resource-card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.resource-card img {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  margin: 0 20px 0 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.resource-card-content {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 92px;
}

.resource-card-title {
  display: block;
  font-size: 16px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 8px;
}

.resource-card-description {
  display: block;
  color: #999;
  padding-right: 8px;
}

/* responsive style */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  .code-boxes-col-2-1 {
    float: none;
    width: 100%;
  }
  .search {
    display: none;
  }
  .preview-image-boxes {
    margin: 0!important;
    float: none;
    width: 100%;
  }
  .preview-image-box {
    padding-left: 0;
    margin: 10px 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  #list,
  .search {
    display: none;
  }

  a.logo {
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
  }

  .banner-entry {
    position: relative;
    top: 30px;
    left: 0;
    text-align: center;
  }

  .nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fff;
    line-height: 60px;
    margin-right: 0;
    width: 50%;
    height: 100%;
    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(-100%);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .nav.nav-show {
    animation: moveLeft .2s ease-in forwards;
  }

  .nav.nav-hide {
    animation: moveLeftOut .2s ease-in forwards;
  }

  .nav .bar {
    display: none!important;
  }

  .nav ul li {
    width: 100%;
  }

  .toc {
    display: none;
  }

  .nav-phone-icon {
    display: block;
    width: 16px;
    height: 50px;
    position: absolute;
    left: 30px;
    top: 32px;
    cursor: pointer;
  }

  .nav-phone-icon:before {
    content: "";
    display: block;
    border-radius: 2px;
    width: 16px;
    height: 2px;
    background: #777;
    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
    position: absolute;
  }

  .main {
    height: calc(100% - 86px);
  }

  .aside-container {
    float: none;
    width: auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
  }

  .main-container {
    margin-left: 0;
    > .markdown > * {
      width: 100%!important;
    }
  }

  .main-wrapper {
    width: 100%;
    border-radius: 0;
  }

  .main-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .prev-next-nav {
    padding-left: 0;
  }

  footer {
    text-align: center;
  }

  footer ul li {
    float: none;
    width: auto;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes moveLeftOut {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
  line-height: 1.5;
  color: #666;
  font-size: 14px;
  background: #ECECEC;
  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  overflow-x: hidden;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body,
ul,
li,
p {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  color: #2db7f5;
  text-decoration: none;
  transition: color .3s ease;
}

a:hover {
  color: #4DC4F0;
}

.clearfix:after {
  clear: both;
  display: table;
  content: '';
}

::selection {
  background: #2db7f5;
  color: #fff;
}
::-moz-selection {
  background: #2db7f5;
  color: #fff;
}

header {
  width: 100%;
  background: #fff;
  font-size: 16px;
  margin-bottom: 24px;
}

.fn-hide {
  display: none;
}

.fn-alpha-in {
  opacity: 1 !important;
}

.fn-alpha-out {
  opacity: 0 !important;
}

a.logo {
  float: left;
  height: 40px;
  line-height: 40px;
  margin: 20px 0 20px 4%;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
  color: #2db7f5;
  width: 219px;
}

.logo img {
  width: 40px;
  float: left;
  margin-right: 8px;
}

.search {
  float: left;
  height: 20px;
  padding: 0px 0 0 30px;
  margin: 30px auto 0;
  border-left: 1px solid #e9e9e9;
  position: relative;
}

#autoComplete {
  margin-top: -3px;
  width: 200px;
}

#autoComplete .ant-select {
  font-size: 14px;
}

#autoComplete .ant-select-selection--single {
  border: transparent;
  outline: none;
  width: 160px;
  height: 28px;
  line-height: 28px;
  color: #999;
  transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
  font-size: 14px;
  box-shadow: none;
}

#autoComplete .ant-select-search__field:focus {
  box-shadow: none;
}

#autoComplete input::-webkit-input-placeholder,
#autoComplete input::-moz-placeholder,
#autoComplete input:-ms-input-placeholder {
  color: #CADCE3;
}

.autoComplete.ant-select-dropdown {
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
  font-size: 14px;
}

.autoComplete .ant-select-dropdown-menu {
  max-height: 200px;
}

.autoComplete .ant-select-dropdown-menu-item {
  border-radius: 0!important;
}

.autoComplete .ant-component-decs {
  font-size: 12px;
  position: absolute;
  top: 9px;
  color: #aaa;
  right: 16px;
}

.global-hint {
  color: #666;
  font-size: 12px;
  padding: 5px 14px 6px;
  margin-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 1px 3px #ddd;
  opacity: 0.8;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.nav {
  height: 80px;
  line-height: 80px;
  float: right;
  font-size: 0.875em;
  position: relative;
  margin-right: 4%;
  overflow: hidden;
}

.nav ul li {
  float: left;
  text-align: center;
}

.nav ul li a {
  color: #666;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 0 22px;
}

a.nav-link-disabled {
  cursor: not-allowed;
  color: #ccc !important;
  pointer-events: none;
}

.nav ul li.current a {
  color: #2db7f5;
  font-weight: 600;
}

.nav ul li a:hover,
.nav ul li .hover {
  color: #2db7f5;
}

.nav .bar {
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #2db7f5;
  display: none;
  transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main-box {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.perspective {
  vertical-align: top;
  position: relative;
  perspective: 4000px;
  -webkit-perspective: 4000px;
}

.main {
  overflow: hidden;
  position: relative;
  height: calc(100% - 190px);
  min-height: 500px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
}

.banner-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: inherit;
  -webkit-animation: alphaTo .3s ease-out;
  animation: alphaTo .3s ease-out;
}

.banner-box .banner-img {
  background: url("https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg") center no-repeat;
  height: 1300px;
  width: 2400px;
  transform-origin: center center;
  transition: opacity 0.5s ease-out;
}

.banner-box #bannerAnim,
.load-main-box {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  z-index: 2;
    top:0;
    left:0;
}

.load-box {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  width: 140px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -40px;
  z-index: 99;
  animation: alphaTo .3s ease-out;
  -webkit-animation: alphaTo .3s ease-out;
  font-size: 22px;
  text-align: center;
  font-family: "Raleway","Helvetica Neue",Helvetica,"Lantinghei SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
}

.load-box em {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
  width: 50px;
  height: 50px;
  margin: auto;
  animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
}
.load-box span {
  display: inline-block;
}
.load-box span > p {
  float: left;
}
.load-main-box .load-bar {
  width: 0%;
  height: 2px;
  background: #2db7f5;
  transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
}
.load-out {
  -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.banner-box #bannerAnim .banner-line-absolute {
  position: absolute;
}

footer {
  clear: both;
  border-top: 1px solid #eee;
  font-size: 12px;
  background: #fff;
  position: relative;
  z-index: 1;
  color: #666;
}

footer ul {
  overflow: hidden;
  margin: 0 2%;
}

footer ul li {
  float: left;
  width: 25%;
  padding: 5px 2% 15px;
}

footer ul li > h2 {
  font-size: 16px;
  margin: 10px auto 5px;
  font-weight: normal;
}

footer ul li > div {
  margin: auto;
  margin: 10px 0;
}

footer ul li > a {
  margin: 5px 2px 0 0;
}

.aside-container {
  width: 220px;
  padding-bottom: 50px;
  float: left;
  border-right: 1px solid #e9e9e9;
  margin-right: -1px;
}

.aside-container > ul > li {
  overflow: hidden;
  position: relative;
  right: -1px;
  z-index: 1;
}

.aside-container > ul > li > ul {
  margin-left: 16px;
}

.aside-container li h4 {
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 0 24px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  position: relative;
  background: #fff;
  border-right: 1px solid #e9e9e9;
}

.aside-container li h4:after {
  position: absolute;
  top: 0;
  right: 20px;
  content: "\e602";
  font-family: "anticon";
  transform: scale(0.6);
  font-size: 12px;
  opacity: 0;
  transition: all 0.3s ease;
}

.aside-container li[open=open] h4:after {
  -webkit-transform: scale(0.6) rotate(180deg);
  transform: scale(0.6) rotate(180deg);
}

.aside-container li:hover h4:after {
  opacity: 0.8;
}

.aside-container li > ul.aside-list-show {
  display: block;
}

.aside-container li a {
  line-height: 40px;
  height: 40px;
  display: block;
  padding-left: 24px;
  font-size: 14px;
  color: #666;
}

.aside-container li.type-divider {
  font-size: 12px;
  -webkit-transform:  scale(0.9);
  transform: scale(0.9);
  transform-origin: 0 50%;
  color: #aaa;
  margin: 6px 0 6px 24px;
}

.aside-container .chinese {
  font-size: 12px;
  margin-left: 6px;
  font-weight: normal;
  opacity: 0.67;
}

.aside-container li a:hover {
  color: #2db7f5;
}

.aside-container .current {
  border-right: 2px solid #2db7f5;
  color: #2db7f5;
}

.aside-container .current a {
  color: #2db7f5;
}

.main-wrapper {
  background: #fff;
  width: 92%;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  padding: 24px 0 0;
  margin-bottom: 24px;
  position: relative;
}

.main-container {
  border-left: 1px solid #e9e9e9;
  margin-left: 219px;
  padding: 0 40px 120px;
  background: #fff;
  min-height: 500px;
  overflow: hidden;
}

.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 { font-size: 28px; }
.markdown h2 { font-size: 22px; }
.markdown h3 { font-size: 18px; }
.markdown h4 { font-size: 16px; }
.markdown h5 { font-size: 14px; }
.markdown h6 { font-size: 12px; }

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
  width: 80%;
}

.markdown ul > li {
  list-style: circle;
}

.markdown > ul li,
.markdown blockquote ul > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown > ul li p,
.markdown > ol li p {
  margin: 0.6em 0;
}

.markdown ol > li {
  list-style: decimal;
}

.markdown > ol li,
.markdown blockquote ol > li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown code {
  margin: 0 3px;
}

.markdown pre {
  border-radius: 6px;
  background: #f7f7f7;
}

.markdown pre code {
  border: none;
  padding: 1em 2em;
  background: #f7f7f7;
  margin: 0;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown > table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 80%;
  margin-bottom: 24px;
}

.markdown > table th {
  white-space: nowrap;
  color: #5C6B77;
  font-weight: 600;
}

.markdown > table th,
.markdown > table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown > table th {
  background: #F7F7F7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

#api ~ ul > li > p > strong ~ code {
  background: #fff;
  color: #CC7300;
  border: none;
  margin-left: 0.5em;
}

.prev-next-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  padding-left: 220px;
}

.prev-next-nav > .prev-page,
.prev-next-nav > .next-page {
  padding: 0 24px;
  width: 50%;
  float: left;
  line-height: 72px;
  height: 72px;
  border-top: 1px solid #e9e9e9;
}

.prev-next-nav > a.prev-page:before {
  font-family: 'anticon';
  content: '\e601';
  font-size: 12px;
  margin-right: 1em;
}

.prev-next-nav > .next-page {
  text-align: right;
  float: right;
}

.prev-next-nav > a.next-page:after {
  font-family: 'anticon';
  content: '\e600';
  font-size: 12px;
  margin-left: 1em;
}

.toc {
  font-size: 14px;
  margin-bottom: 20px;
  background: #fbfbfb;
  border-left: 2px solid #eee;
}

.toc > ul {
  padding: 8px 0;
}

.toc > ul li {
  list-style: none;
}

.toc li > ul {
  text-indent: 8px;
  font-size: 12px;
  display: none;
}

.toc a {
  padding-left: 16px;
  border-left: 2px solid #eee;
  margin-left: -2px;
  display: block;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  color: #666;
}

.toc a:hover {
  color: #2db7f5;
}

.toc a.current {
  border-color: #2db7f5;
  color: #2db7f5;
}

/* autocomplete */
.ui-select ul {
  outline: none;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px #ccc;
  background-clip: padding-box;
  border: 1px solid #ccc;
}

.ui-select-item {
  width: 156px;
  padding: 10px 12px;
  clear: both;
  font-size: 14px;
  font-weight: normal;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-select-item-hover {
  cursor: pointer;
  background-color: #eaf8fe;
}
/* autocomplete end */

/***************************************************************************/
.api-link {
  font-size: 16px;
  vertical-align: middle;
  margin-left: 15px;
  font-weight: normal;
}

.sketch-link {
  font-size: 14px;
  vertical-align: middle;
  font-weight: normal;
  float: right;
  margin-right: 15px;
  border: 1px solid #ddd;
  padding: 2px 15px;
  border-radius: 100px;
  color: #777;
}

.sketch-link i {
  margin-right: 5px;
}

.component-demos {
  margin: 2em 0 1em;
  color: #404040;
  font-weight: 500;
  font-size: 24px;
}

.component-demos .anticon-appstore {
  cursor: pointer;
  font-size: 14px;
  color: #9199AC;
  margin-left: 5px;
  opacity: 0.8;
  transition: all 0.3s ease;
  top: -2px;
  position: relative;
}

.component-demos .anticon-appstore:hover {
  opacity: 1;
}

.component-demos .anticon-appstore.expand {
  color: #3B4357;
}

.code-boxes-col-1-1 {
  width: 80%;
}

.code-boxes-col-2-1 {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  padding-right: 8px;
}

.code-boxes-col-2-1:last-child {
  padding-right: 0;
  padding-left: 8px;
}

.code-box {
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0px 0 16px 0px;
  transition: all 0.5s ease;
}

.code-box:hover {
  border-color: #ccc;
}

.code-box:target {
  border: 1px solid rgba(45, 183, 245, 0.7);
  box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
}

.code-box:hover .code-box-meta,
.code-box:target .code-box-meta {
  background: #fbfbfb;
}

.code-box:hover .code-box-title,
.code-box:target .code-box-title {
  background: #fbfbfb;
  box-shadow: 0 -1.2px 0 #e9e9e9;
}

.code-box .code-box-title a,
.code-box .code-box-title a:hover {
  color: #666;
}

.code-box .code-box-demo {
  border-bottom: 1px solid #E9E9E9;
  padding: 42px 20px 50px;
}

.code-box-meta {
  position: relative;
  padding: 10px 15px;
  border-radius: 0 0 6px 6px;
  transition: background-color 0.4s ease;
  width: 100%;
}

.code-box-meta h4,
.code-box-meta p {
  margin: 0;
}

.code-box-title {
  position: absolute;
  top: -14px;
  padding: 1px 1.1em;
  color: #777;
  border-radius: 6px;
  background: #fff;
  transition: all 0.4s ease;
}

.code-box-title:before {
  font-family: anticon;
  content: "\e658";
  font-size: 16px;
  vertical-align: middle;
  line-height: 22px;
  position: relative;
  margin-right: 8px;
  top: -2px;
  color: #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
}

.code-box-meta > p {
  font-size: 12px;
  margin: 0.5em 0;
  padding-right: 25px;
  width: 100%;
  word-break: break-word;
}

.code-box .collapse {
  position: absolute;
  right: 16px;
  bottom: 18px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  opacity: 0.5;
  text-align: center;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all 0.3s ease;
  color: #999;
  background: #fff;
  user-select: none;
}

.code-box.expand .collapse {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.code-box .collapse:hover {
  opacity: 1;
}

.code-box .highlight {
  overflow: hidden;
  display: none;
  padding: 5px;
  border-top: 1px dashed #e9e9e9;
}

.code-box pre {
  margin: 0;
  width: auto;
}

.code-box pre code {
  border: none;
  background: #fff;
}

.banner-entry {
  position: absolute;
  top: 19%;
  left: 10%;
  z-index: 100;
  color: #707d8d;
  font-family: "Raleway","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
  font-weight: 300;
}

.entry-title {
  font-size: 50px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}

.entry-slogan {
  padding-left: 4px;
  font-size: 14px;
  color: #9ea9b4;
}

a.entry-link {
  margin-top: 30px;
  border: 1px solid rgba(95, 108, 119, 0.3);
  border-radius: 50px;
  color: #5F6C77;
  display: inline-block;
  text-align: center;
  padding: 8px 20px;
  transition: border 0.3s ease;
}

a.entry-link:hover {
  border-color: #5F6C77;
}

a.entry-link .anticon-smile {
  margin-right: 2px;
  display: inline-block;
  -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out;
  animation: rotateCircleBack 0.6s 1 ease-in-out;
  line-height: 1;
  width: 16px;
}

a.entry-link:hover .anticon-smile {
  -webkit-animation: rotateCircle 0.6s 1 ease-in-out;
  animation: rotateCircle 0.6s 1 ease-in-out;
}

.entry-version {
  font-size: 12px;
  margin-top: 15px;
  position: absolute;
  top: 36px;
  right: -32px;
}

#instantclick {
  top: 80px!important;
  position: absolute!important;
}

#instantclick-bar {
  background: #2db7f5;
}

#versions-select {
  position: relative;
  top: -2px;
}

.window-frame {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  line-height: 1;
}

.window-frame .top-bar {
  background: #DCD9DC;
  background-image: -webkit-linear-gradient(#F6F6F6, #dadada);
  background-image: linear-gradient(#F6F6F6, #dadada);
  min-height: 2rem;
  border-radius: 0.35rem 0.35rem 0 0;
  padding: 0.41528rem 0.83056rem;
  border-bottom: 1px solid transparent;
  border-bottom-color: #ccc;
  color: rgba(0, 0, 0, 0.5);
}

.window-frame .top-bar .address-bar {
  border-radius: 0.245rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: black;
  box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
  display: inline-block;
  padding: 0 0.5em 0 1em;
  font-size: 0.75rem;
  line-height: 2;
  background: white;
  width: 60%;
  margin-left: 15%;
}

.window-frame .top-bar .controls {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding-top: 0.2em;
}
.window-frame .top-bar .controls > * {
  position: relative;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
  margin-right: 0.41528rem;
  -webkit-transition: 0.1s linear;
          transition: 0.1s linear;
}
.window-frame .top-bar .control {
  width: 0.83056rem;
  height: 0.83056rem;
  background: #DCD9DC;
  border-radius: 0.83056rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.window-frame .top-bar .control:hover {
  background: #b0adb0;
}
.window-frame .top-bar .control:before,
.window-frame .top-bar .control:after {
  line-height: 0.5;
  color: black;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  vertical-align: middle;
  line-height: 0.5;
}
.window-frame .top-bar .control.close {
  background: #FC625C;
}
.window-frame .top-bar .control.minify {
  background: #FDC041;
}
.window-frame .top-bar .control.expand {
  background: #35CD4B;
}
.window-frame .window-content {
  padding: 0;
  line-height: 1.5;
  overflow: auto;
  height: 440px;
  position: relative;
  border-radius: 0 0 5px 5px;
  background: #ececec;
}

.window-frame .status-bar {
  height: 2rem;
  border-radius: 0 0 0.35rem 0.35rem;
  display: none;
}

.demos-anchor {
  color: #aaa;
  position: absolute;
  margin-right: 24px;
  top: 24px;
  right: 0;
  z-index: 100;
  background: #fff;
  font-size: 12px;
}

.demos-anchor a {
  padding-left: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.demos-anchor.toc.sticky {
  position: fixed;
  top: 0;
  right: 4%;
  margin-right: 24px;
  z-index: 100;
}

.preview-image-boxes {
  float: right;
  margin: 0 0 110px 60px;
  width: 616px;
}

.preview-image-boxes + .preview-image-boxes {
  margin-top: -75px;
}

.preview-image-box {
  width: 100%;
  float: left;
  padding: 0 8px;
}

.preview-image-wrapper {
  background: #f4f4f4;
  padding: 16px;
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
}

.preview-image-wrapper.good:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #2db7f5;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.preview-image-wrapper.bad:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #f50;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.preview-image-title {
  font-size: 12px;
  margin-top: 5px;
  color: #666;
}

.preview-image-description {
  font-size: 12px;
  margin-top: 2px;
  color: #999;
  line-height: 1.5;
}

.preview-image-description hr {
  margin: 2px 0;
  border: 0;
  background: none;
}

.preview-image-box img {
  cursor: pointer;
  max-width: 100%;
  transition: all 0.3s ease;
  background: #fff;
  padding: 12px;
  border-radius: 6px;
}

.preview-image-boxes.pack img {
  padding: 0;
  box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff,  0 7px 0 0 #ddd;
}

.preview-image-box img:hover {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}

.outside-link:after {
  content: '\e669';
  font-family: 'anticon';
  margin-left: 5px;
  font-size: 12px;
}

.image-modal {
  text-align: center;
}

.image-modal-container {
  position: relative;
  text-align: center;
}

.image-modal .ant-modal-header {
  display: none;
}

.image-modal .ant-carousel .slick-slider {
  padding-bottom: 24px;
}

.image-modal .ant-carousel .slick-dots {
  text-align: left;
  bottom: -6px;
}

.image-modal .ant-carousel .slick-dots li {
  margin: 0;
}

.image-modal .preview-image-title {
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);;
}

.image-modal .slick-prev {
  left: 0;
  height: 100%;
  top: 0;
  margin-top: 0;
  width: 50%;
  text-align: left;
}

.image-modal .slick-prev:after {
  content: "\e601";
  font-size: 28px;
  font-family: "anticon";
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  top: 220px;
  right: 24px;
}

.image-modal .slick-prev:hover:after {
  opacity: 0.38;
}

.image-modal .slick-next {
  right: 0;
  height: 100%;
  top: 0;
  margin-top: 0;
  width: 50%;
  text-align: right;
}

.image-modal .slick-next:after {
  content: "\e600";
  font-size: 28px;
  font-family: "anticon";
  color: #000;
  opacity: 0;
  transition: all 0.3s ease;
  position: absolute;
  top: 220px;
  right: 24px;
}

.image-modal .slick-next:hover:after {
  opacity: 0.38;
}

.image-modal .outside-link {
  position: absolute;
  right: 16px;
  bottom: 12px;
}

.image-modal .ant-carousel .slick-slide img {
  max-width: 100%;
  display: inline-block;
}

.resource-cards {
  width: 100%;
}

.resource-card {
  max-width: 350px;
  width: 40%;
  min-width: 300px;;
  height: 130px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  font-size: 12px;
  color: #777;
  display: inline-block;
  margin: 20px 40px 10px 0;
  vertical-align: middle;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.resource-card:hover {
  box-shadow: 0 1px 4px rgba(64,64,64,.2);
}

.resource-card:hover .resource-card-title {
  color: #2db7f5;
}

.resource-card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.resource-card img {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  margin: 0 20px 0 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.resource-card-content {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 92px;
}

.resource-card-title {
  display: block;
  font-size: 16px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 8px;
}

.resource-card-description {
  display: block;
  color: #999;
  padding-right: 8px;
}

/* responsive style */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  .code-boxes-col-2-1 {
    float: none;
    width: 100%;
  }
  .search {
    display: none;
  }
  .preview-image-boxes {
    margin: 0!important;
    float: none;
    width: 100%;
  }
  .preview-image-box {
    padding-left: 0;
    margin: 10px 0;
  }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
  #list,
  .search {
    display: none;
  }

  a.logo {
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
  }

  .banner-entry {
    position: relative;
    top: 30px;
    left: 0;
    text-align: center;
  }

  .nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fff;
    line-height: 60px;
    margin-right: 0;
    width: 50%;
    height: 100%;
    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(-100%);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .nav.nav-show {
    animation: moveLeft .2s ease-in forwards;
  }

  .nav.nav-hide {
    animation: moveLeftOut .2s ease-in forwards;
  }

  .nav .bar {
    display: none!important;
  }

  .nav ul li {
    width: 100%;
  }

  .toc {
    display: none;
  }

  .nav-phone-icon {
    display: block;
    width: 16px;
    height: 50px;
    position: absolute;
    left: 30px;
    top: 32px;
    cursor: pointer;
  }

  .nav-phone-icon:before {
    content: "";
    display: block;
    border-radius: 2px;
    width: 16px;
    height: 2px;
    background: #777;
    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
    position: absolute;
  }

  .main {
    height: calc(100% - 86px);
  }

  .aside-container {
    float: none;
    width: auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
  }

  .main-container {
    margin-left: 0;
    > .markdown > * {
      width: 100%!important;
    }
  }

  .main-wrapper {
    width: 100%;
    border-radius: 0;
  }

  .main-container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .prev-next-nav {
    padding-left: 0;
  }

  footer {
    text-align: center;
  }

  footer ul li {
    float: none;
    width: auto;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes moveLeftOut {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}


Add collapsible-panel component

Add collapsible-panel component

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


Update description for notifications

Update description for notifications

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/sfi0zy/muilessium.git/'


+ template.less

+ template.less

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
input { font-size: inherit; color: inherit; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }

.clearfix {
  clear: both; zoom: 1;
  &::before { content:""; display:table; }
  &::after { content:""; display:table; clear:both; }
}

.float-wrapper { display: inline-block; width: 100%; zoom: 1; }

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

.rounded-corners (@radius: 4px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.circle { .rounded-corners(9999px); }

.placeholder-color(@color: inherit) {
  &::-webkit-input-placeholder { color: @color; }
  &:-moz-placeholder { color: @color; }
  &::-moz-placeholder { color: @color; }
  &:-ms-input-placeholder { color: @color; }
}

.rotate(@angle) {
  transform: rotate(@angle);
  -ms-transform: rotate(@angle); 	/* IE 9 */
  -moz-transform: rotate(@angle); 	/* Firefox */
  -webkit-transform: rotate(@angle); /* Safari Chrome */
  -o-transform: rotate(@angle); 	/* Opera */
}

.scale(@x, @y:@x) {
  transform: scale(@x, @y);
  -ms-transform: scale(@x, @y); 	/* IE 9 */
  -moz-transform: scale(@x, @y); 	/* Firefox */
  -webkit-transform: scale(@x, @y); /* Safari Chrome */
  -o-transform: scale(@x, @y); 	/* Opera */
}

.box-shadow(@shadow:0 0 0.5em fade(@color-dark, 25%)) {
  -moz-box-shadow: @shadow;
  -webkit-box-shadow: @shadow;
  box-shadow: @shadow;
}

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


collections masthead fligtweaks

collections masthead fligtweaks

@import 'lib';

#ajax_collections_list {
    margin: 0 0 .5em 0;
    li {
        cursor: pointer;
        padding: 5px 0 3px 30px;
        background: url(../../img/zamboni/icons/checks.png) no-repeat 0 4px;
    }
    li:hover {
        background-position: 0 -36px;
    }
    li.selected {
        background-position: 0 -76px;
    }
    li.ajax-loading {
       background-image: url(../../img/zamboni/loading-white.gif);
       background-position: left bottom;
    }
    a.outlink {
        margin-left: 4px;
        background-repeat: no-repeat;
        background-image: url(../../img/zamboni/icons/collections.png);
        white-space: nowrap;
        padding-left: 16px;
        background-position: 0 -850px;
        &:hover {
            background-position: 0 -900px;
        }
    }
}

#ajax_new_collection {
    border-top: 1px dashed #aecfda;
    padding: .5em 0 0 30px;
    margin: 0;
}

#add-to-collection {
    padding: 1em;
    form {
        margin-bottom: 0;
        #id_description {
            height: 6em;
        }
    }
    .register-button {
        margin: 1em 0;
    }
}

#slug_value {
    font-weight: bold;
    color: #222;
}

#collection-form-slug,
#clear-recents {
    font-size: .9em;
}

#collection-favorites-opts li {
    display: inline-block;
    margin-right: 1em;
}

.collections-details #id_name {
    display: block;
    -moz-box-sizing: border-box;
    width: 100%;
}

#collection_listed {
    margin-bottom: 1.5em;
    ul label {
        font-weight: normal;
    }
}

#slug_value {
    font-weight: bold;
    color: #222;
}

#collection-form-slug,
#clear-recents {
    font-size: .9em;
}

#collection-favorites-opts li {
    display: inline-block;
    margin-right: 1em;
}

.collections-details #id_name {
    display: block;
    -moz-box-sizing: border-box;
    width: 100%;
}

#collection_listed {
    margin: 0 0 1.5em;
}

#collection_listed ul label {
    font-weight: normal;
}

#recently-viewed {
    display: none;
    ul {
        margin: 0 0 4px;
    }
    h3 {
        border: none;
        margin: 0;
    }
    #clear-recents {
        color: #666;
        padding: 0 6px;
    }
}

.listing .item {
    &.watching {
        .install-shell {
            visibility: visible;
            .is-watching {
                display: block;
                font: bold 13px/1em @head-sans;
                padding: 6px 10px 7px;
            }
            a {
                visibility: hidden;
            }
        }
        &:hover {
            .install-shell {
                .is-watching {
                    display: none;
                }
                a {
                    visibility: visible;
                }
            }
        }
    }
}

#side-nav .listing-grid {
    li {
        border: none;
        a:hover {
            background: #fff;
        }
        a {
            display: inline;
            line-height: auto;
            padding: 0;
        }
        a:after {
            display: none;
        }
    }
    .item.addon {
        margin-left: -3px;
    }
}

#collections-landing {
    background: no-repeat 98% 10px, 0 100%;
    background-image: url(../../img/illustrations/logo-collections-220x270.png), -moz-linear-gradient(#e4f5fb, #fff);
    .background-size(auto 150px, auto);
    border: 1px solid @border-blue;
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
    margin-bottom: 15px;
    min-height: 100px;
    padding: 14px;
    #breadcrumbs {
        margin-bottom: 8px;
    }
    p {
        font-size: 16px;
        line-height: 1.3;
        margin: 0;
        max-width: 525px;
    }
    h1 {
        font: 40px/40px MetaBlack;
        text-transform: uppercase;
    }
}

@import 'lib';

#ajax_collections_list {
    margin: 0 0 .5em 0;
    li {
        cursor: pointer;
        padding: 5px 0 3px 30px;
        background: url(../../img/zamboni/icons/checks.png) no-repeat 0 4px;
    }
    li:hover {
        background-position: 0 -36px;
    }
    li.selected {
        background-position: 0 -76px;
    }
    li.ajax-loading {
       background-image: url(../../img/zamboni/loading-white.gif);
       background-position: left bottom;
    }
    a.outlink {
        margin-left: 4px;
        background-repeat: no-repeat;
        background-image: url(../../img/zamboni/icons/collections.png);
        white-space: nowrap;
        padding-left: 16px;
        background-position: 0 -850px;
        &:hover {
            background-position: 0 -900px;
        }
    }
}

#ajax_new_collection {
    border-top: 1px dashed #aecfda;
    padding: .5em 0 0 30px;
    margin: 0;
}

#add-to-collection {
    padding: 1em;
    form {
        margin-bottom: 0;
        #id_description {
            height: 6em;
        }
    }
    .register-button {
        margin: 1em 0;
    }
}

#slug_value {
    font-weight: bold;
    color: #222;
}

#collection-form-slug,
#clear-recents {
    font-size: .9em;
}

#collection-favorites-opts li {
    display: inline-block;
    margin-right: 1em;
}

.collections-details #id_name {
    display: block;
    -moz-box-sizing: border-box;
    width: 100%;
}

#collection_listed {
    margin-bottom: 1.5em;
    ul label {
        font-weight: normal;
    }
}

#slug_value {
    font-weight: bold;
    color: #222;
}

#collection-form-slug,
#clear-recents {
    font-size: .9em;
}

#collection-favorites-opts li {
    display: inline-block;
    margin-right: 1em;
}

.collections-details #id_name {
    display: block;
    -moz-box-sizing: border-box;
    width: 100%;
}

#collection_listed {
    margin: 0 0 1.5em;
}

#collection_listed ul label {
    font-weight: normal;
}

#recently-viewed {
    display: none;
    ul {
        margin: 0 0 4px;
    }
    h3 {
        border: none;
        margin: 0;
    }
    #clear-recents {
        color: #666;
        padding: 0 6px;
    }
}

.listing .item {
    &.watching {
        .install-shell {
            visibility: visible;
            .is-watching {
                display: block;
                font: bold 13px/1em @head-sans;
                padding: 6px 10px 7px;
            }
            a {
                visibility: hidden;
            }
        }
        &:hover {
            .install-shell {
                .is-watching {
                    display: none;
                }
                a {
                    visibility: visible;
                }
            }
        }
    }
}

#side-nav .listing-grid {
    li {
        border: none;
        a:hover {
            background: #fff;
        }
        a {
            display: inline;
            line-height: auto;
            padding: 0;
        }
        a:after {
            display: none;
        }
    }
    .item.addon {
        margin-left: -3px;
    }
}

#collections-landing {
    background: no-repeat 95% 10px, 0 100%;
    background-image: url(../../img/illustrations/logo-collections-220x270.png), -moz-linear-gradient(#e4f5fb, #fff);
    .background-size(auto 200px, auto);
    border: 1px solid @border-blue;
    .border-radius(5px);
    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
    margin-bottom: 15px;
    min-height: 100px;
    padding: 14px;
    #breadcrumbs {
        margin-bottom: 8px;
    }
    p {
        font-size: 18px;
        line-height: 1.3;
        margin: 0;
        max-width: 450px;
        padding-right: 250px;
    }
    h1 {
        font: 40px/40px MetaBlack;
        text-transform: uppercase;
    }
}


#53 sweetalert less file add.

#53 sweetalert less file add.

.sweet-alert  {
  border-radius: 3px;

  button {
    border-radius: 3px;
  }
}

error: pathspec 'client/styles/imports/sweetalert.less' did not match any file(s) known to git


Larger header post title

Larger header post title

fatal: unable to access 'https://github.com/sszuflita/almace-scaffolding.git/': The requested URL returned error: 403


Improved article-title ellipsis styles.

Improved article-title ellipsis styles.

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/team-aries/just.git/'