update checking-card style

update checking-card style

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


Tweak checkbox margin

Tweak checkbox margin

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

.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
  // 一般状态
  .@{checkbox-prefix-cls} {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: text-bottom;

    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner,
    &-input:focus + &-inner {
      border-color: @primary-color;
    }

    &-checked:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: @border-radius-sm;
      border: 1px solid @primary-color;
      content: '';
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: both;
      visibility: hidden;
    }

    &:hover:after,
    .@{checkbox-prefix-cls}-wrapper:hover &:after {
      visibility: visible;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      background-color: #fff;
      transition: all .3s;

      &:after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;
        transform: rotate(45deg) scale(0);
        position: absolute;
        left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14);
        top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14);
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: ' ';
        transition: all .1s @ease-in-back;
      }
    }

    &-input {
      position: absolute;
      left: 0;
      z-index: 1;
      cursor: pointer;
      .opacity(0);
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
    @indeterminate-width: (@checkbox-size / 14) * 8px;
    @indeterminate-height: (@checkbox-size / 14) * 1px;
    content: ' ';
    transform: scale(1);
    position: absolute;
    left: (@checkbox-size - 2 - @indeterminate-width) / 2;
    top: (@checkbox-size - 3 - @indeterminate-height) / 2;
    width: @indeterminate-width;
    height: @indeterminate-height;
  }

  .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
    border-color: @disabled-color;
  }

  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
    transform: rotate(45deg) scale(1);
    position: absolute;
    display: table;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    content: ' ';
    transition: all .2s @ease-out-back .1s;
  }

  .@{checkbox-prefix-cls}-checked,
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @primary-color;
      border-color: @primary-color;
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    cursor: not-allowed;

    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}:after {
        animation-name: none;
        border-color: @disabled-color;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
    }

    .@{checkbox-inner-prefix-cls} {
      border-color: @border-color-base !important;
      background-color: @input-disabled-bg;
      &:after {
        animation-name: none;
        border-color: @input-disabled-bg;
      }
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    cursor: pointer;
    font-size: @font-size-base;
    display: inline-block;
    & + & {
      margin-left: 8px;
    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
  .@{checkbox-prefix-cls} + span {
    padding-left: 8px;
    padding-right: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    font-size: @font-size-base;
    &-item {
      display: inline-block;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }

  @ie8: \0screen;

  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
  @media @ie8 {
    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
      .iconfont-font("\e632");
      font-weight: bold;
      font-size: 8px;
      border: 0;
      color: #fff;
      left: 2px;
      top: 3px;
      position: absolute;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

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

.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
  // 一般状态
  .@{checkbox-prefix-cls} {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: text-bottom;

    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner,
    &-input:focus + &-inner {
      border-color: @primary-color;
    }

    &-checked:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: @border-radius-sm;
      border: 1px solid @primary-color;
      content: '';
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: both;
      visibility: hidden;
    }

    &:hover:after,
    .@{checkbox-prefix-cls}-wrapper:hover &:after {
      visibility: visible;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      background-color: #fff;
      transition: all .3s;

      &:after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;
        transform: rotate(45deg) scale(0);
        position: absolute;
        left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14);
        top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14);
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        content: ' ';
        transition: all .1s @ease-in-back;
      }
    }

    &-input {
      position: absolute;
      left: 0;
      z-index: 1;
      cursor: pointer;
      .opacity(0);
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
    @indeterminate-width: (@checkbox-size / 14) * 8px;
    @indeterminate-height: (@checkbox-size / 14) * 1px;
    content: ' ';
    transform: scale(1);
    position: absolute;
    left: (@checkbox-size - 2 - @indeterminate-width) / 2;
    top: (@checkbox-size - 3 - @indeterminate-height) / 2;
    width: @indeterminate-width;
    height: @indeterminate-height;
  }

  .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
    border-color: @disabled-color;
  }

  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
    transform: rotate(45deg) scale(1);
    position: absolute;
    display: table;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    content: ' ';
    transition: all .2s @ease-out-back .1s;
  }

  .@{checkbox-prefix-cls}-checked,
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @primary-color;
      border-color: @primary-color;
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    cursor: not-allowed;

    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}:after {
        animation-name: none;
        border-color: @disabled-color;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
    }

    .@{checkbox-inner-prefix-cls} {
      border-color: @border-color-base !important;
      background-color: @input-disabled-bg;
      &:after {
        animation-name: none;
        border-color: @input-disabled-bg;
      }
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    cursor: pointer;
    font-size: @font-size-base;
    display: inline-block;
    & + & {
      margin-left: 8px;
    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
  .@{checkbox-prefix-cls} + span {
    padding-left: 8px;
    padding-right: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    font-size: @font-size-base;
    &-item {
      display: inline-block;
    }
  }

  @ie8: \0screen;

  // IE8 hack for https://github.com/ant-design/ant-design/issues/2148
  @media @ie8 {
    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
    .@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
      .iconfont-font("\e632");
      font-weight: bold;
      font-size: 8px;
      border: 0;
      color: #fff;
      left: 2px;
      top: 3px;
      position: absolute;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}


Do not resize note on area hover

Do not resize note on area hover

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


change to breakpoint-view.less

change to breakpoint-view.less

.node-debugger {
  .breanpoint-view {
    table, td, th {
      text-align: center;
    }
  }

  .breakpoint-item-view {

    &.loading {
      .details {
        display: none;
      }

      .loading {
        display: block;
      }
    }

    .loading {
      display: none;
    }

  }
}

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


fix(style): exclude browser image width

fix(style): exclude browser image width

// Global variables
@base-font-size: 1.6vw;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 180);
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;
@monospace: Menlo, monospace;
@breakpoint-lg: 1600px;
@breakpoint-md: 1000px;
@breakpoint-sm: 640px;
@breakpoint-xs: 400px;
@padding-lg: 22vw;
@padding-md: 8vw;
@padding-sm: 4vw;
@padding-xs: 0;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

// http://nicolasgallagher.com/micro-clearfix-hack/
.cf {

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 @padding-lg;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;
  transition: all .3s ease .2s;

  @media (max-width: @breakpoint-md) {
    padding-left: @padding-md;
    padding-right: @padding-md;
    font-size: (@base-font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    padding-left: @padding-sm;
    padding-right: @padding-sm;
    font-size: (@base-font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@base-font-size * 3.2);
  }

  // All iOS devices, the easiest way
  @media (max-device-width: 480px), (max-device-width: 1024px) {
    -webkit-text-size-adjust: none;
  }

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 1vmax;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Essential mixins
.heading {
  font-family: @sans-serif;
  font-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: 72%;
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    border-bottom: .1em solid;
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

::-webkit-input-placeholder {
  color: @text-color;
  opacity: .1;
}

// Site logo
.logo {
  display: block;
  height: 1vmax;
  margin: 0 0 1.4vmax;
  background: @link-color;
  opacity: 0;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
    opacity: 1;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 60%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: .5em 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.content .status {
  margin: 1vmin 0 0;
  font-size: 75%;
  font-weight: bold;

  &:before {
    @size: .8em;
    display: inline-block;
    width: @size;
    height: @size;
    margin-right: .8vw;
    background: fade(@text-color, 20%);
    border-radius: 50%;
    content: "";
  }

  &.available {

    &:before {
      background: #0cf;
    }

    a {
      color: #0cf;
    }
  }

  &.unavailable {

    &:before {
      background: #ccc;
    }

    a {
      color: #ccc;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;

  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

  // Post / page content first element fix
  .post-content,
  .page-content {

    > *:first-child {
      margin-top: 0;

      > *:first-child {
        margin-top: 0;
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.6rem;
    line-height: (@base-line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

    h1 {
      margin: 0 0 .1em;
      .heading;
      hyphens: none;
      line-height: 1.1;

      @media (max-width: @breakpoint-sm) {
        // Override viewport units defined in post.html
        font-size: 280%;
      }

      svg {
        display: block;
        max-width: 100%;
      }

      // Override margin from article img
      svg,
      img {
        margin-bottom: .3em;

        @media (max-width: @breakpoint-sm) {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
    .image-title {
      text-indent: -999999px;
      line-height: 0;
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: 80%;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 2vmin 0 0;
      letter-spacing: .1em;
    }

  }

  h2, h3, h4, h5, h6 {
    margin: 10vmin 0 1rem;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1.8rem 1.5em;

    li {
      line-height: (@base-line-height * 1.2);

      > ul, ol {
        margin-bottom: 0;
      }
    }
  }

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 1.8rem;
  }

  p:not(.browser) {

    > img, > video, > iframe {

      @media (max-width: @breakpoint-md) {
        margin-left: -@padding-md;
        margin-right: -@padding-md;
        max-width: calc(100% + (@padding-md * 2));
        width: calc(100% + (@padding-md * 2));
      }

      @media (max-width: @breakpoint-sm) {
        margin-left: -@padding-sm;
        margin-right: -@padding-sm;
        max-width: calc(100% + (@padding-sm * 2));
        width: calc(100% + (@padding-sm * 2));
      }
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 90%;
      font-style: normal;

      &:before {
        // http://www.fileformat.info/info/unicode/char/2500/index.htm
        content: "\2500\2500\00a0"
      }
    }
  }

  hr {
    border-top: 1px solid fade(#ccc, 20%);
    margin-top: 2em;
    margin-bottom: 2em;
  }

  sup {
    font-size: 75%;
  }

  abbr {
    border-bottom: 1px dashed;
  }

  code, pre {
    font-family: @monospace;
    color: @code-color;
  }

  // Only apply word breaking rule for codes in paragraphs
  p code {
    word-break: break-word;
    word-wrap: break-word;
  }

  pre {
    padding: 1em;
    margin: 0 0 1.8rem;
    overflow-x: scroll;
    font-size: 80%;
    line-height: (@base-line-height * 1.2);
    background: fade(#08f, 4%);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      padding-left: 8vw;
      padding-right: 8vw;
      margin-left: -8vw;
      margin-right: -8vw;
    }

    @media (max-width: @breakpoint-sm) {
      padding-left: 4vw;
      padding-right: 4vw;
      margin-left: -4vw;
      margin-right: -4vw;
    }
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    margin: 0 0 1.8rem;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      text-align: left;
    }

    td {
      border-top: 1px solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
[lang=zh],
[lang=ja] {
  text-align: justify;

  header {
    text-align: start;
  }
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: 200%;
  margin-bottom: 1.8rem !important;
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 24px;
  margin: 0 0 1.8rem !important;
  background: rgba(255, 255, 255, .1);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,    0 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

  img {
    margin: 0;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);

    // Reset borwser image width for small screens
    @media (max-width: @breakpoint-md) {
      margin: 0;
      max-width: 100%;
      width: 100%;
    }

    @media (max-width: @breakpoint-sm) {
      margin: 0;
      max-width: 100%;
      width: 100%;
    }
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

// Reference notes and links in post
.footnotes {
  border-top: 1px solid fade(#ccc, 20%);
  padding-top: 2em;
  margin-top: 2em;
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],
  // Kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

// Post list in "work" and "note"
.list {
  display: block;
  margin: 0 0 .4rem;

  h1 {
    .heading;
    font-size: 200%;
    line-height: 1.1;
    // Override heading defines in .content
    opacity: 1;
    margin: 0;

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      font-size: 180%;
    }
  }

  .external {

    &:hover,
    &:focus {
      border: none;
    }

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      display: none;
    }
  }
}

.external {

  span {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin: 0 .1em;
    vertical-align: middle;
    background: @text-color;
    border-radius: 50%;
    transition: transform .4s ease;
  }

  &:hover,
  &:focus {

    span {
      transform: scale(1.4);
    }
  }
}

.footer {
  padding: 0 0 16vmin;
  font-size: 75%;
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 .6vw;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// Import custom styles
@import "custom";

// Global variables
@base-font-size: 1.6vw;
@base-line-height: (20 / 14); // ~ 1.428571429
@link-color: #a212d1;
@background-color: #fff;
@text-color: #000;
@code-color: spin(@link-color, 180);
@sans-serif: "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
@serif: Georgia, "Hiragino Mincho ProN", serif;
@monospace: Menlo, monospace;
@breakpoint-lg: 1600px;
@breakpoint-md: 1000px;
@breakpoint-sm: 640px;
@breakpoint-xs: 400px;
@padding-lg: 22vw;
@padding-md: 8vw;
@padding-sm: 4vw;
@padding-xs: 0;

// Invert color switcher for images and videos
// :root { filter: invert(100%); }

// http://nicolasgallagher.com/micro-clearfix-hack/
.cf {

  &:before, &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

// Basic reset
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 0 @padding-lg;
  margin: 0 auto 0;
  font-family: @sans-serif;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: @text-color;
  text-rendering: optimizelegibility;
  background: @background-color;
  image-rendering: optimizequality;
  transition: all .3s ease .2s;

  @media (max-width: @breakpoint-md) {
    padding-left: @padding-md;
    padding-right: @padding-md;
    font-size: (@base-font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    padding-left: @padding-sm;
    padding-right: @padding-sm;
    font-size: (@base-font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@base-font-size * 3.2);
  }

  // All iOS devices, the easiest way
  @media (max-device-width: 480px), (max-device-width: 1024px) {
    -webkit-text-size-adjust: none;
  }

  // A semitranslucent bar at the top of the page
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9999;
    width: 100%;
    height: 1vmax;
    pointer-events: none;
    background: @link-color;
    content: "";
    opacity: .2;
  }
}

// Essential mixins
.heading {
  font-family: @sans-serif;
  font-size: 330%;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  letter-spacing: -.06em;
}

.sub-heading {
  font-family: @sans-serif;
  font-size: 72%;
  font-weight: normal;
  letter-spacing: .08em;
  opacity: .5;
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    border-bottom: .1em solid;
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  color: @link-color;
  background: fade(@text-color, 2%);
}

::-webkit-input-placeholder {
  color: @text-color;
  opacity: .1;
}

// Site logo
.logo {
  display: block;
  height: 1vmax;
  margin: 0 0 1.4vmax;
  background: @link-color;
  opacity: 0;

  &:hover,
  &:focus {
    border-bottom: none !important;
    background: @text-color;
    opacity: 1;
  }

  h1 {
    height: 0;
    text-indent: -99999em;
  }
}

// Main navigation
.navigation {
  margin: 0 0 16vmin;
  margin-right: -1.1em;
  margin-left: -1.1em;
  font-size: 60%;
  font-weight: bold;
  letter-spacing: .45em;
  text-transform: uppercase;

  li {
    display: inline-block;
    line-height: 2;
    list-style: none;

    a {
      padding: .5em 1.2em;

      &:hover,
      &:focus {
        color: @link-color;
        border: none;
      }
    }
  }
}

// Currently activated page or category class
.current {

  a {
    color: @link-color;
  }
}

// Latest work link
body:hover .latest {
  color: @link-color !important;
}

// Pserson status
.content .status {
  margin: 1vmin 0 0;
  font-size: 75%;
  font-weight: bold;

  &:before {
    @size: .8em;
    display: inline-block;
    width: @size;
    height: @size;
    margin-right: .8vw;
    background: fade(@text-color, 20%);
    border-radius: 50%;
    content: "";
  }

  &.available {

    &:before {
      background: #0cf;
    }

    a {
      color: #0cf;
    }
  }

  &.unavailable {

    &:before {
      background: #ccc;
    }

    a {
      color: #ccc;
    }
  }
}

// Main content
.content {
  margin-bottom: 16vmin;

  // For some specified posts in work category
  .cf;

  // Remove extra space for the last paragraph in the container
  article {

    // article > p
    > *:last-child {
      margin-bottom: 0 !important;

      // article > ul > li, article > .footnotes > ol
      > *:last-child {
        margin-bottom: 0 !important;

        // article > ul > li > p, article > .footnotes > ol > li
        > *:last-child {
          margin-bottom: 0 !important;

          // article > .footnotes > ol > li > p
          > *:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

  // Post / page content first element fix
  .post-content,
  .page-content {

    > *:first-child {
      margin-top: 0;

      > *:first-child {
        margin-top: 0;
      }
    }
  }

  a {
    font-weight: bold;
  }

  p {
    margin: 0 0 1.6rem;
    line-height: (@base-line-height * 1.2);
  }

  header {
    padding-bottom: 16vmin;

    h1 {
      margin: 0 0 .1em;
      .heading;
      hyphens: none;
      line-height: 1.1;

      @media (max-width: @breakpoint-sm) {
        // Override viewport units defined in post.html
        font-size: 280%;
      }

      svg {
        display: block;
        max-width: 100%;
      }

      // Override margin from article img
      svg,
      img {
        margin-bottom: .3em;

        @media (max-width: @breakpoint-sm) {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    // Hide actual text if post title is image or SVG, the actual text helps Safari get the real post title in Reader mode.
    .image-title {
      text-indent: -999999px;
      line-height: 0;
    }

    .latest-post {
      margin-top: 16vmin;
      font-size: 80%;
      font-weight: normal;
      line-height: 1.2;

      a {
        font-weight: bold;
      }
    }

    small {
      display: block;
      margin: 2vmin 0 0;
      letter-spacing: .1em;
    }

  }

  h2, h3, h4, h5, h6 {
    margin: 10vmin 0 1rem;
    .sub-heading;
  }

  ul, ol {
    margin: 0 0 1.8rem 1.5em;

    li {
      line-height: (@base-line-height * 1.2);

      > ul, ol {
        margin-bottom: 0;
      }
    }
  }

  ol {
    margin-left: 1.75em;
  }

  img, video, iframe {
    display: block;
    max-width: 100%;
    margin: 0 0 1.8rem;
  }

  .post-content {

    img, video, iframe {

      @media (max-width: @breakpoint-md) {
        margin-left: -@padding-md;
        margin-right: -@padding-md;
        max-width: calc(100% + (@padding-md * 2));
        width: calc(100% + (@padding-md * 2));
      }

      @media (max-width: @breakpoint-sm) {
        margin-left: -@padding-sm;
        margin-right: -@padding-sm;
        max-width: calc(100% + (@padding-sm * 2));
        width: calc(100% + (@padding-sm * 2));
      }
    }
  }

  blockquote {
    position: relative;
    margin-bottom: 2.8rem;

    > p {
      padding-left: .8em;
      border-left: 2px solid;
    }

    footer {
      .cf;
    }

    cite {
      float: right;
      font-size: 90%;
      font-style: normal;

      &:before {
        // http://www.fileformat.info/info/unicode/char/2500/index.htm
        content: "\2500\2500\00a0"
      }
    }
  }

  hr {
    border-top: 1px solid fade(#ccc, 20%);
    margin-top: 2em;
    margin-bottom: 2em;
  }

  sup {
    font-size: 75%;
  }

  abbr {
    border-bottom: 1px dashed;
  }

  code, pre {
    font-family: @monospace;
    color: @code-color;
  }

  // Only apply word breaking rule for codes in paragraphs
  p code {
    word-break: break-word;
    word-wrap: break-word;
  }

  pre {
    padding: 1em;
    margin: 0 0 1.8rem;
    overflow-x: scroll;
    font-size: 80%;
    line-height: (@base-line-height * 1.2);
    background: fade(#08f, 4%);
    // Bouncing scroll fix for iOS
    -webkit-overflow-scrolling: touch;

    @media (max-width: @breakpoint-md) {
      padding-left: 8vw;
      padding-right: 8vw;
      margin-left: -8vw;
      margin-right: -8vw;
    }

    @media (max-width: @breakpoint-sm) {
      padding-left: 4vw;
      padding-right: 4vw;
      margin-left: -4vw;
      margin-right: -4vw;
    }
  }

  // Newsletter subscription form in page "store"
  form {

    input {
      display: block;
      width: 100%;
      padding: 1vmin 0;
      margin: 0 0 1.8rem;
      border: none;
      border-bottom: 1px solid fade(@text-color, 20%);
      // Remove border-radius for iOS devices
      border-radius: 0;
      outline: none;
      transition: padding .2s ease;

      &:focus {
        padding: 1vmin;
        background: fade(@text-color, 2%);
        border-color: @text-color;
      }
    }
  }

  // Rest form validation styles, borrowed from Bootstrap
  input, textarea, select {

    &:focus:required:invalid {

      &:focus {
        background: fade(@link-color, 5%);
        border-color: @link-color;
        // Override Firefox default styles
        box-shadow: none;
      }
    }
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 90%;
    width: 100%;
    margin: 0 0 1.8rem;

    th,
    td {
      padding: .6em;
    }

    th {
      border-bottom: 2px solid fade(@text-color, 6%);
      // Override default user agent stylesheet
      text-align: left;
    }

    td {
      border-top: 1px solid fade(@text-color, 4%);
    }
  }
}

// Posts with Asian characters
[lang=zh],
[lang=ja] {
  text-align: justify;

  header {
    text-align: start;
  }
}

// Fix empty space when a paragraph starts with some asian punctuation marks
.margin-fix:first-letter {
  margin-left: -.6em;
}

// Tweet button margin fix
.tweet {
  margin-top: 10vmin;
}

// Largetype styles (replaces button styles)
.largetype {
  .heading;
  font-size: 200%;
  margin-bottom: 1.8rem !important;
}

// Broser frame for images in category "work"
.browser {
  position: relative;
  padding-top: 24px;
  margin: 0 0 1.8rem !important;
  background: rgba(255, 255, 255, .1);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);

  &:before {
    position: absolute;
    top: 8px;
    left: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: lighten(#f24e59, 30%);
    border-radius: 50%;
    content: "";
    box-shadow:
        16px 0 0 0   fade(lighten(#fac536, 30%), 96%)
      , 32px 0 0 0   fade(lighten(#26e93d, 30%), 96%)
      ,    0 0 0 1px fade(darken(#f24e59, 30%), 30%)
      , 16px 0 0 1px fade(darken(#fac536, 30%), 30%)
      , 32px 0 0 1px fade(darken(#26e93d, 30%), 30%)
    ;
  }

  img {
    margin: 0;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .05);

    // Reset borwser image width for small screens
    @media (max-width: @breakpoint-md) {
      margin: 0;
      max-width: 100%;
      width: 100%;
    }

    @media (max-width: @breakpoint-sm) {
      margin: 0;
      max-width: 100%;
      width: 100%;
    }
  }
}

// Special paragraph with border line
.note,
.store,
.download {
  padding-left: .8em;
  border-left: 2px solid @link-color;
}

// Reference notes and links in post
.footnotes {
  border-top: 1px solid fade(#ccc, 20%);
  padding-top: 2em;
  margin-top: 2em;
  font-size: 80%;
}

:target {

  // Redcarpet-style
  [rev=footnote],
  [rel=footnote],
  // Kramdown-style
  .reversefootnote,
  .footnote {
    color: @link-color;
  }
}

// Post list in "work" and "note"
.list {
  display: block;
  margin: 0 0 .4rem;

  h1 {
    .heading;
    font-size: 200%;
    line-height: 1.1;
    // Override heading defines in .content
    opacity: 1;
    margin: 0;

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      font-size: 180%;
    }
  }

  .external {

    &:hover,
    &:focus {
      border: none;
    }

    @media (max-width: @breakpoint-sm) {
      // Hide external link for post list
      display: none;
    }
  }
}

.external {

  span {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin: 0 .1em;
    vertical-align: middle;
    background: @text-color;
    border-radius: 50%;
    transition: transform .4s ease;
  }

  &:hover,
  &:focus {

    span {
      transform: scale(1.4);
    }
  }
}

.footer {
  padding: 0 0 16vmin;
  font-size: 75%;
  text-transform: lowercase;

  ul {

    li {
      display: inline;

      &:after {
        padding: 0 .6vw;
        content: " / ";
        opacity: .3;
      }

      &:last-child {

        &:after {
          content: none;
        }
      }
    }
  }
}

// Import custom styles
@import "custom";


fix FormItem margin-bottom, close #1557

fix FormItem margin-bottom, close #1557

@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 {
  .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 - 3;
  }

  > 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-explain,
.@{css-prefix}form-extra {
  color: #999;
}

.@{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 {
      padding-right: 24px;
    }
  }
  .@{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;
  }

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

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

  .@{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: @border-color-base;
    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: -100%;
    left: -1px;
    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,
  .@{css-prefix}input {
    vertical-align: top;
  }
}

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

    &-with-help {
      margin-bottom: 24px;
    }

    > div {
      display: inline-block;
    }
  }

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

  .@{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}-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;
    }
  }

  .@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus {
    box-shadow: none;
  }

  // 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 {
  .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-explain,
.@{css-prefix}form-extra {
  color: #999;
}

.@{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 {
      padding-right: 24px;
    }
  }
  .@{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;
  }

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

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

  .@{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: @border-color-base;
    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: -100%;
    left: -1px;
    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,
  .@{css-prefix}input {
    vertical-align: top;
  }
}

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

    &-with-help {
      margin-bottom: 24px;
    }

    > div {
      display: inline-block;
    }
  }

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

  .@{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}-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;
    }
  }

  .@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus {
    box-shadow: none;
  }

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


Fixes icon font

Fixes icon font

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


slideshow css

slideshow css

.baku-slides{
  display: block;
  height: 100%;
  width: 100%;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  z-index: 2;
  overflow: hidden;
  position: relative;
  li{
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: 50% 50%;
    background-size: cover;
    &.grad{
      &:after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 80%;
        width: 100%;
        z-index: 1;
        .gradient();
      }
    }
  }
}

.baku-pagination{
  position: absolute;
  width: 100%;
  text-align: center;
  margin:0;
  padding:0;
  bottom:45px;
  height: auto;
  list-style: none;
  z-index: 2;
  li{
    display: inline-block;
    float: none;
    width:10px;
    height:10px;
    margin:0 5px;
    cursor: pointer;
    border-radius: 50%;
    background:#fff;
    opacity: 0.5;
    .quickTrans(200ms, opacity);
    &.active{
      opacity: 1;
    }
    &:hover{
      opacity: 1;
    }
  }
}

.baku-slideshow{
  a{
    &.baku-prev, &.baku-next{
      display: block;
      position: absolute;
      height: 60px;
      width: 30px;
      top: 50%;
      margin-top: -30px;
      background-color: #f5f5f5;
      background-image: url(../img/ss_arrows.png);
      background-size: cover;
      opacity: 0.7;
      z-index: 2;
    }
    &.baku-prev{
      left: 0;
      background-position: top left;
    }
    &.baku-next{
      right: 0;

      background-position: top right;
    }
    &:hover{opacity: 1.0;}
  }
}

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


changed some styles

changed some 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/dedalozzo/pit-bootstrap.git/'


Style more popover

Style more popover

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

@width: 520px;

.Story {
  position: relative;
  max-width: @width;
  border-radius: 4px;
  background-color: @white;
  color: #353535;
  border: solid 1px #e9e7e7;
  padding: 16px 16px 0 16px;

  &__submenu__icon {
    font-size: 20px !important;
    vertical-align: -1px;
  }

  &__more {
    position: absolute;
    right: 16px;
    top: 4px;
    background-color: transparent !important;
    border-bottom: none !important;

    &__item {
      border-bottom: none !important;

      & > ul {
        left: -128px !important;
      }

      & > div {
        padding: 0 2px !important;
      }
    }

    &__icon {
      font-size: 20px !important;
      color: #c2ccd3;
    }
  }

  &__header {
    display: flex;

    &__text {
      margin: 0 12px;
    }
  }

  &__date {
    position: relative;
    top: -2px;
    font-size: 14px;
    color: #99aab5;
  }

  &__topics > button {
    margin: 0 2px;
  }

  &__content {
    padding-top: 16px;

    & > p {
      padding: 8px 0;
      line-height: 20px;
    }

    &__image {
      width: @width - 1px;
      display: block;
      margin-left: -16px;
    }
  }

  &__footer {
    position: relative;
    height: 46px;
    line-height: 46px;
    color: #99aab5;
    font-weight: bold;
    font-size: 14px;

    &__payout {
      font-size: 16px;
      position: absolute;
      right: 0;
    }

    &__link {
      color: #99aab5;
      font-weight: bold;
      font-size: 14px;

      & > .iconfont {
        margin-right: 4px;
        font-size: 24px !important;
        color: #c2ccd3;
      }

      &:hover > .iconfont {
        color: @purple;
      }
    }

    &__number {
      vertical-align: 3px;
      margin-right: 16px;
    }

    &__dislike:before {
      display: inline-block;
      transform: rotate(180deg);
      vertical-align: -3px;
    }

    &__share {
      vertical-align: -1px;
    }
  }
}

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

@width: 520px;

.Story {
  position: relative;
  max-width: @width;
  border-radius: 4px;
  background-color: @white;
  color: #353535;
  border: solid 1px #e9e7e7;
  padding: 16px 16px 0 16px;

  &__submenu__icon {
    font-size: 20px !important;
    vertical-align: -1px;
  }

  &__more {
    position: absolute;
    right: 16px;
    top: 4px;
    background-color: transparent !important;
    border-bottom: none !important;

    &__item {
      border-bottom: none !important;

      & > div {
        padding: 0 2px !important;
      }
    }

    &__icon {
      font-size: 20px !important;
      color: #c2ccd3;
    }
  }

  &__header {
    display: flex;

    &__text {
      margin: 0 12px;
    }
  }

  &__date {
    position: relative;
    top: -2px;
    font-size: 14px;
    color: #99aab5;
  }

  &__topics > button {
    margin: 0 2px;
  }

  &__content {
    padding-top: 16px;

    & > p {
      padding: 8px 0;
      line-height: 20px;
    }

    &__image {
      width: @width - 1px;
      display: block;
      margin-left: -16px;
    }
  }

  &__footer {
    position: relative;
    height: 46px;
    line-height: 46px;
    color: #99aab5;
    font-weight: bold;
    font-size: 14px;

    &__payout {
      font-size: 16px;
      position: absolute;
      right: 0;
    }

    &__link {
      color: #99aab5;
      font-weight: bold;
      font-size: 14px;

      & > .iconfont {
        margin-right: 4px;
        font-size: 24px !important;
        color: #c2ccd3;
      }

      &:hover > .iconfont {
        color: @purple;
      }
    }

    &__number {
      vertical-align: 3px;
      margin-right: 16px;
    }

    &__dislike:before {
      display: inline-block;
      transform: rotate(180deg);
      vertical-align: -3px;
    }

    &__share {
      vertical-align: -1px;
    }
  }
}


Fixed UI of main {{> yield}}

Fixed UI of main {{> yield}}

Commented Out `page.import.less`

// .ss-path {
//   padding: 10px;
// }

// article {
//   margin: 10px;
//   padding: 10px;
//   border: solid 1px @input-border;
//   background: #fff;
//   //box-shadow: 1px 1px 0 0 #aaa;
//   -webkit-transition: width @page-transition-time linear @page-transition-time; //ease-in;
//        -o-transition: width @page-transition-time linear @page-transition-time; //ease-in;
//           transition: width @page-transition-time linear @page-transition-time; //ease-in;
// }

// .page > header {
//   //border: solid 1px #eee;
//   //background: #eee;

//   h1, h2, h3, h4, h5, h6 {
//     margin: 0;
//     padding: 0;
//     line-height: 1.6em;
//     color: darken(@brand-primary, 20%);
//   }
// }

// .page {
//   .ss-list-frame {
//     margin-top: 10px;
//   }
//   .ss-list-frame > .list {
//     margin-top: 10px;
//     border: solid 1px @input-border;
//   }
// }

.ss-path {
  padding: 10px;
}

article {
  margin: 10px;
  padding: 10px;
  border: solid 1px @input-border;
  background: #fff;
  //box-shadow: 1px 1px 0 0 #aaa;
  -webkit-transition: width @page-transition-time linear @page-transition-time; //ease-in;
       -o-transition: width @page-transition-time linear @page-transition-time; //ease-in;
          transition: width @page-transition-time linear @page-transition-time; //ease-in;
}

.page > header {
  //border: solid 1px #eee;
  //background: #eee;

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    line-height: 1.6em;
    color: darken(@brand-primary, 20%);
  }
}

.page {
  .ss-list-frame {
    margin-top: 10px;
  }
  .ss-list-frame > .list {
    margin-top: 10px;
    border: solid 1px @input-border;
  }
}


Make category view thumbnail visible

Make category view thumbnail visible

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/Four51/demo_buyer.git/'


Create alerts.less

Create alerts.less

//
// Alerts
// --------------------------------------------------

// Base styles
// -------------------------

.alert {
  padding: @alert-padding;
  margin-bottom: @line-height-computed;
  border: 1px solid transparent;
  border-radius: @alert-border-radius;

  // Headings for larger alerts
  h4 {
    margin-top: 0;
    // Specified for the h4 to prevent conflicts of changing @headings-color
    color: inherit;
  }
  // Provide class for links that match alerts
  .alert-link {
    font-weight: @alert-link-font-weight;
  }

  // Improve alignment and spacing of inner content
  > p,
  > ul {
    margin-bottom: 0;
  }
  > p + p {
    margin-top: 5px;
  }
}

// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
  padding-right: (@alert-padding + 20);

  // Adjust close link position
  .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.alert-success {
  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

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


add small padding inside topoguide bullets

@bg-color: rgba(229, 229, 229, 0.3);

#topoguide {
  .calc(min-height, "100vh - 50px");
  background-color: @bg-color;

  @media @tablet {
    margin-top: -12px;
  }
  .topoguide-nav {
    justify-content: center;
    padding: 0;
    margin: 0;
    &:last-of-type {
      padding-bottom: 20px;
    }
  }
  .topoguide-types {
    margin-top: 10px;
  }
  header {
    color: white;
    background-image:url(../img/home/laurentf-sajama.jpg);
    background-size: cover;
    height: auto;
  }
  h1 {
    padding-top: 10px;
  }
  a {
    outline: none;
    text-decoration: none;
  }
  .topoguide-entry {
    height: 130px;
    width: 130px;
    flex-basis: initial;
    border-radius: 50%;
    border: 2px solid white;
    color: white;
    transition: .2s;
    background-color: rgba(117, 117, 117, 0.44);
    margin-bottom: 15px;
    padding: 2px;
    &:hover {
      cursor: pointer;
      background-color: rgba(66, 66, 66, 0.52);
      -webkit-font-smoothing: antialiased;
    }

    @media (max-width: 900px) {
      height: 110px;
      width: 110px;
    }
    @media (max-width: @phone-max) {
      height: 95px;
      width: 95px;
    }
    @media (min-width: @phone-max) {
      &:hover {
        transform: scale3d(1.1, 1.1, 1);
        backface-visibility: hidden;
      }
    }
    span {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
  .waypoint-type, .activity {
    width: 100%;
    font-size: 3em;
    color: @C2C-orange;
    &:hover {
      cursor: pointer;
    }
  }
  .activity {
    width: 100%;
  }
  .icon-div {
    margin-top: 0;
    margin-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    min-height: 90px;
    text-align: center;
    margin-right: 1%;
    margin-left: 1%;
    .flex();
    flex-direction: column;
    justify-content: space-around;
  }
  .outings {
    padding-left: 4%;
    padding-right: 2%;
  }
  .routes {
    padding-left: 2%;
    padding-right: 4%;
  }
  .outings, .routes {
    width: 50%;
    .icon-div {
      flex-basis: 20%;
      @media @desktop {
        flex-basis: 25%;
      }
      @media @tablet {
        flex-basis: 31%;
      }
    }
  }
  .waypoints {
    .icon-div {
      flex-basis: 12%;
      @media @desktop {
        flex-basis: 15%;
      }
      @media @tablet {
        flex-basis: 20%;
      }
    }
  }
  .value {
    font-family: sans-serif;
  }
  .doctype {
    padding: 0 2%;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .wrapper {
    padding: 10px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  // #topoguide
  @media @phone {
    margin-top: -10px;
    h1 {
      padding: 20px 10px 0 10px;
      font-size: 2.5em;
    }
    .topoguide-entry {
      font-size: 0.9em;
    }
    .icon-div {
      height: 80px;
      flex-basis: 31%;
    }
    .collapse.in, .collapsing {
      margin: 0;
    }
    .topoguide-nav {
      padding-left: 0;
      padding-right: 0;
    }
    .doctype {
      padding-left: 2%;
      padding-right: 2%;
    }
    .wrapper {
      padding: 0;
    }
    .outings, .routes {
      width: 100%;
      float: none;
    }
  }
}

@bg-color: rgba(229, 229, 229, 0.3);

#topoguide {
  .calc(min-height, "100vh - 50px");
  background-color: @bg-color;

  @media @tablet {
    margin-top: -12px;
  }
  .topoguide-nav {
    justify-content: center;
    padding: 0;
    margin: 0;
    &:last-of-type {
      padding-bottom: 20px;
    }
  }
  .topoguide-types {
    margin-top: 10px;
  }
  header {
    color: white;
    background-image:url(../img/home/laurentf-sajama.jpg);
    background-size: cover;
    height: auto;
  }
  h1 {
    padding-top: 10px;
  }
  a {
    outline: none;
    text-decoration: none;
  }
  .topoguide-entry {
    height: 130px;
    width: 130px;
    flex-basis: initial;
    border-radius: 50%;
    border: 2px solid white;
    color: white;
    transition: .2s;
    background-color: rgba(117, 117, 117, 0.44);
    margin-bottom: 15px;
    &:hover {
      cursor: pointer;
      background-color: rgba(66, 66, 66, 0.52);
      -webkit-font-smoothing: antialiased;
    }

    @media (max-width: 900px) {
      height: 110px;
      width: 110px;
    }
    @media (max-width: @phone-max) {
      height: 95px;
      width: 95px;
    }
    @media (min-width: @phone-max) {
      &:hover {
        transform: scale3d(1.1, 1.1, 1);
        backface-visibility: hidden;
      }
    }
    span {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
  .waypoint-type, .activity {
    width: 100%;
    font-size: 3em;
    color: @C2C-orange;
    &:hover {
      cursor: pointer;
    }
  }
  .activity {
    width: 100%;
  }
  .icon-div {
    margin-top: 0;
    margin-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    min-height: 90px;
    text-align: center;
    margin-right: 1%;
    margin-left: 1%;
    .flex();
    flex-direction: column;
    justify-content: space-around;
  }
  .outings {
    padding-left: 4%;
    padding-right: 2%;
  }
  .routes {
    padding-left: 2%;
    padding-right: 4%;
  }
  .outings, .routes {
    width: 50%;
    .icon-div {
      flex-basis: 20%;
      @media @desktop {
        flex-basis: 25%;
      }
      @media @tablet {
        flex-basis: 31%;
      }
    }
  }
  .waypoints {
    .icon-div {
      flex-basis: 12%;
      @media @desktop {
        flex-basis: 15%;
      }
      @media @tablet {
        flex-basis: 20%;
      }
    }
  }
  .value {
    font-family: sans-serif;
  }
  .doctype {
    padding: 0 2%;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .wrapper {
    padding: 10px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  // #topoguide
  @media @phone {
    margin-top: -10px;
    h1 {
      padding: 20px 10px 0 10px;
      font-size: 2.5em;
    }
    .topoguide-entry {
      font-size: 0.9em;
    }
    .icon-div {
      height: 80px;
      flex-basis: 31%;
    }
    .collapse.in, .collapsing {
      margin: 0;
    }
    .topoguide-nav {
      padding-left: 0;
      padding-right: 0;
    }
    .doctype {
      padding-left: 2%;
      padding-right: 2%;
    }
    .wrapper {
      padding: 0;
    }
    .outings, .routes {
      width: 100%;
      float: none;
    }
  }
}


Maneouvre brand tiles so they wrap around iphone properly on iPhone

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/'


Change color of active step icon

Change color of active step icon

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


Fix the IE10 issue where users couldn't select an image


Update

Update

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


Fix whiteapcing

Fix whiteapcing

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/Livefyre/livefyre-bootstrap.git/'


Updates table column config

Updates table column config

//
// Table
// --------------------------------------------------

.table {
    > thead,
    > tfoot {
        > tr {
            > th {
                color: @table-header-color;
                min-width: 90px;

                &.table-left {
                    text-align: left;
                }

                &.table-center {
                    text-align: center;
                }

                &.table-right {
                    text-align: right;
                }
            }
        }
    }

    > tbody {
        > tr {
            > td {
                &.table-left {
                    text-align: left;
                }

                &.table-center {
                    text-align: center;
                }

                &.table-right {
                    text-align: right;
                }

                &.table-row-number {
                    color: @table-row-number-color;
                    font-size: @table-row-number-size;
                    text-align: right;
                    white-space: nowrap;
                    width: 1px;
                }
            }
        }
    }

    > thead > tr > th,
    > tbody > tr > td,
    > tfoot > tr > td {
        > .checkbox,
        > .radio {
            margin-top: auto;
            margin-bottom: auto;
            display: inline-block;
        }

        > .checkbox label.form-control-fa > input[type="checkbox"],
        > .radio label.form-control-fa > input[type="radio"] {
            + .form-control-fa-style {
                width: 18px;
                height: 18px;
                font-size: 11px;
            }
        }
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

//
// Table
// --------------------------------------------------

.table {
    > thead,
    > tfoot {
        > tr {
            > th {
                color: @table-header-color;
                min-width: 90px;

                &.table-left {
                    text-align: left;
                }

                &.table-center {
                    text-align: center;
                }

                &.table-right {
                    text-align: right;
                }
            }
        }
    }

    > tbody {
        > tr {
            > td {
                &.table-left {
                    text-align: left;
                }

                &.table-center {
                    text-align: center;
                }

                &.table-right {
                    text-align: right;
                }

                &.table-row-number {
                    color: @table-row-number-color;
                    font-size: @table-row-number-size;
                    text-align: right;
                }
            }
        }
    }

    > thead > tr > th,
    > tbody > tr > td,
    > tfoot > tr > td {
        > .checkbox,
        > .radio {
            margin-top: auto;
            margin-bottom: auto;
            display: inline-block;
        }

        > .checkbox label.form-control-fa > input[type="checkbox"],
        > .radio label.form-control-fa > input[type="radio"] {
            + .form-control-fa-style {
                width: 18px;
                height: 18px;
                font-size: 11px;
            }
        }
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}


add comment to custom.less

add comment to custom.less

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


Remove top spacing from the gallery

Remove top spacing from the gallery

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/basekit-templates/example-supersized-integration.git/'


Add table pager container

Add table pager container

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/sonatra/sonatra-theme-gluon.git/'


Theme less different now

Theme less different now

fatal: unable to access 'https://github.com/enyojs/enyo-dev.git/': The requested URL returned error: 403


Code checking.

Code checking.

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/BrightMahi/aacBuyerNew.git/'


Fix typo

Fix typo

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/ade25/diazo-plone.git/'


This is the main css file for tagger itself, anything outside of the scope of the bootstrap theme goes here

body {
  background: url(/assets/LRMI.png) right no-repeat;
}

.navbar-inner {
  padding: 0 10px;
}

.border-right {
  border-right: 1px solid #fbd385;
}

error: pathspec 'app/assets/stylesheets/tagger.css.less' did not match any file(s) known to git


restore default font-family definition

restore default font-family definition

// 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 Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Overall Colors */

/*
 * Background colors are ordered from least "intense" to most "intense"
 * So, if the background is light, then @background-color-3 should be
 * lightest, -2 should be darker, and -1 should be darker still.
 *
 * The opposite is true for a dark background -- background-color-3 should be
 * the darkest, -2 should be lighter, and -1 should be lighter still.
 */

@background: #f8f8f8;
@foreground: #535353;

/* Code Styling */

/* code accent colors */
@accent-keyword: #446fbd;
@accent-atom: #e88501;
@accent-number: #6d8600;
@accent-def: #8757ad;
@accent-variable: #535353;
@accent-variable-2: #535353;
@accent-variable-3: #535353;
@accent-property: #8757ad;
@accent-operator: #535353;
@accent-comment: #949494;
@accent-string: #e88501;
@accent-string-2: #e88501;
@accent-meta: #535353;
@accent-error: #dc322f;
@accent-qualifier: #446fbd;
@accent-builtin: #446fbd;
@accent-bracket: #222;
@accent-tag: #446fbd;
@accent-attribute: #6d8600;
@accent-header: #d33682;
@accent-quote: #446fbd;
@accent-hr: #e88501;
@accent-link: #8757ad;
@accent-rangeinfo: #6c71c4;
@accent-minus: #dc322f;
@accent-plus: #859900;
@match-text: #121212;
@cm-match-highlight: #f5ee92;
@cm-current-match-highlight: #f7c44e;

/* code highlight */
@matching-bracket: #cfead6;

/* sidebar/toolbar colors */
@project-panel-base-color: #47484B;
@project-panel-text-1: #ffffff;
@project-panel-text-2: #adb9bd;
@main-toolbar-background-color: #5D5F60;

/* open working file highlight */
@open-working-file-name-highlight: #8fddff;
@open-working-file-ext-highlight: #8fddff;

/* selection colors */
@selection-color-focused: #abdffa;
@selection-color-unfocused: #d5dee3;

/* background color of the line that has the cursor */
@activeline-bg: #ebefef;
@activeline-number: #000;
@activeline-number-bg: #dee5e6;
@activeline-number-bg-inline: #d7dede;

/* custom scrollbar colors */
@win-scrollbar-track: rgb(240, 240, 240);
@win-scrollbar-thumb: rgb(206, 206, 206);
@win-scrollbar-thumb-hover: rgb(166, 166, 166);
@win-scrollbar-thumb-active: rgb(96, 96, 96);

@linux-scrollbar-thumb: rgba(0, 0, 0, 0.24);
@linux-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);

/* live preview */
@live-preview-sync-error-background: #ff5d99;
@live-preview-sync-error-color: #fff;

/* Code font formatting
 *
 * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that
 * is styled with .code-font().
 *
 * The platform-specific selector gets added to the body tag *before* document ready time.
 * We rely on this behavior to load platform-specific web fonts early.
 */
.code-font() {
    color: @foreground;
    line-height: 1.25;

    .dark & {
        color: @dark-bc-text;
    }

    font-family: "SourceCodePro-Medium", "ＭＳ ゴシック", "MS Gothic", monospace;
}

.code-font-win() {
}

.code-font-mac() {
}

.code-cursor() {
    // to make a block cursor, use something like this:
    // background-color: fadeout(@blue, 50%);
    // border: none !important;

    // to make an I-cursor, use something like this:
    border-left: 1px solid black;

}

/* Dark theme styling
 *
 * These are overrides to make the UI look better when the editor theme is dark.
 * Eventually, these will likely be replaced by full-featured UI themes.
 */

.dark {
    .inline-widget {
        color: @dark-bc-text;
        background-color: @dark-bc-bg-inline-widget;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .inline-editor-header {
            .filename {
                color: #fff;

                .dirty-indicator {
                    color: #aaa;
                }

                .line-number {
                    color: #bbb;
                }
            }
        }

        .btn {
            background-color: @dark-bc-btn-bg;
            color: @dark-bc-text;
            border: 1px solid @dark-bc-btn-border;
            box-shadow: inset 0 1px 0 @dark-bc-highlight;

            &:hover {
                background-color: @dark-bc-btn-bg;
                color: @dark-bc-text;
            }

            &:focus {
                border: 1px solid @dark-bc-btn-border-focused;
                box-shadow: inset 0 1px 0 @dark-bc-highlight, 0 0 0 1px @dark-bc-btn-border-focused-glow;
                color: @dark-bc-text;
            }

            &:active:not([disabled]) {
                background-color: @dark-bc-btn-bg-down;
                box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
                color: @dark-bc-text;
            }
        }

        .close {
            color: @dark-bc-text;
        }

        .CodeMirror-scroll {
            .CodeMirror-linenumbers {
                background-color: @dark-bc-bg-inline-widget;
            }
        }

    }

    #editor-holder .inline-widget .CodeMirror, #editor-holder .inline-widget .CodeMirror-gutters {
        background: transparent;
    }

    .related-container {
        background: @dark-bc-panel-bg;

        .selection {
            background: @dark-bc-panel-bg-selected;
        }

        .selection:before {
            border-left: @inline-triangle-size solid @dark-bc-bg-inline-widget;
        }

        .related {
            li {
                color: @dark-bc-text-alt;

                .related-file {
                    color: @dark-bc-text-thin-quiet;
                }
            }

            .selected {
                color: @dark-bc-text-alt;
            }
        }

        .inline-editor-message {
            color: @dark-bc-text-thin-quiet;
        }
    }
}

/* Variables and Mixins for non-code UI elements that can be styled */

// 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 Default Theme
 *
 * Defines all the variables that one can configure in a theme. This should
 * contain all variables / mixins for UI styling that we want to be able to
 * change in a theme.
 *
 * Throughout the rest of the LESS files we should _only_ use color
 * variable names that are on the LHS of the list below. So, if we
 * need a new color for some UI element, we should add a variable
 * in this file.
 */

/* Overall Colors */

/*
 * Background colors are ordered from least "intense" to most "intense"
 * So, if the background is light, then @background-color-3 should be
 * lightest, -2 should be darker, and -1 should be darker still.
 *
 * The opposite is true for a dark background -- background-color-3 should be
 * the darkest, -2 should be lighter, and -1 should be lighter still.
 */

@background: #f8f8f8;
@foreground: #535353;

/* Code Styling */

/* code accent colors */
@accent-keyword: #446fbd;
@accent-atom: #e88501;
@accent-number: #6d8600;
@accent-def: #8757ad;
@accent-variable: #535353;
@accent-variable-2: #535353;
@accent-variable-3: #535353;
@accent-property: #8757ad;
@accent-operator: #535353;
@accent-comment: #949494;
@accent-string: #e88501;
@accent-string-2: #e88501;
@accent-meta: #535353;
@accent-error: #dc322f;
@accent-qualifier: #446fbd;
@accent-builtin: #446fbd;
@accent-bracket: #222;
@accent-tag: #446fbd;
@accent-attribute: #6d8600;
@accent-header: #d33682;
@accent-quote: #446fbd;
@accent-hr: #e88501;
@accent-link: #8757ad;
@accent-rangeinfo: #6c71c4;
@accent-minus: #dc322f;
@accent-plus: #859900;
@match-text: #121212;
@cm-match-highlight: #f5ee92;
@cm-current-match-highlight: #f7c44e;

/* code highlight */
@matching-bracket: #cfead6;

/* sidebar/toolbar colors */
@project-panel-base-color: #47484B;
@project-panel-text-1: #ffffff;
@project-panel-text-2: #adb9bd;
@main-toolbar-background-color: #5D5F60;

/* open working file highlight */
@open-working-file-name-highlight: #8fddff;
@open-working-file-ext-highlight: #8fddff;

/* selection colors */
@selection-color-focused: #abdffa;
@selection-color-unfocused: #d5dee3;

/* background color of the line that has the cursor */
@activeline-bg: #ebefef;
@activeline-number: #000;
@activeline-number-bg: #dee5e6;
@activeline-number-bg-inline: #d7dede;

/* custom scrollbar colors */
@win-scrollbar-track: rgb(240, 240, 240);
@win-scrollbar-thumb: rgb(206, 206, 206);
@win-scrollbar-thumb-hover: rgb(166, 166, 166);
@win-scrollbar-thumb-active: rgb(96, 96, 96);

@linux-scrollbar-thumb: rgba(0, 0, 0, 0.24);
@linux-scrollbar-thumb-inactive: rgba(0, 0, 0, 0.12);

/* live preview */
@live-preview-sync-error-background: #ff5d99;
@live-preview-sync-error-color: #fff;

/* Code font formatting
 *
 * NOTE (JRB): In order to get the web font to load early enough, we have a div called "dummy-text" that
 * is styled with .code-font().
 *
 * The platform-specific selector gets added to the body tag *before* document ready time.
 * We rely on this behavior to load platform-specific web fonts early.
 */
.code-font() {
    color: @foreground;
    line-height: 1.25;

    .dark & {
        color: @dark-bc-text;
    }
}

.code-font-win() {
}

.code-font-mac() {
}

.code-cursor() {
    // to make a block cursor, use something like this:
    // background-color: fadeout(@blue, 50%);
    // border: none !important;

    // to make an I-cursor, use something like this:
    border-left: 1px solid black;

}

/* Dark theme styling
 *
 * These are overrides to make the UI look better when the editor theme is dark.
 * Eventually, these will likely be replaced by full-featured UI themes.
 */

.dark {
    .inline-widget {
        color: @dark-bc-text;
        background-color: @dark-bc-bg-inline-widget;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .inline-editor-header {
            .filename {
                color: #fff;

                .dirty-indicator {
                    color: #aaa;
                }

                .line-number {
                    color: #bbb;
                }
            }
        }

        .btn {
            background-color: @dark-bc-btn-bg;
            color: @dark-bc-text;
            border: 1px solid @dark-bc-btn-border;
            box-shadow: inset 0 1px 0 @dark-bc-highlight;

            &:hover {
                background-color: @dark-bc-btn-bg;
                color: @dark-bc-text;
            }

            &:focus {
                border: 1px solid @dark-bc-btn-border-focused;
                box-shadow: inset 0 1px 0 @dark-bc-highlight, 0 0 0 1px @dark-bc-btn-border-focused-glow;
                color: @dark-bc-text;
            }

            &:active:not([disabled]) {
                background-color: @dark-bc-btn-bg-down;
                box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
                color: @dark-bc-text;
            }
        }

        .close {
            color: @dark-bc-text;
        }

        .CodeMirror-scroll {
            .CodeMirror-linenumbers {
                background-color: @dark-bc-bg-inline-widget;
            }
        }

    }

    #editor-holder .inline-widget .CodeMirror, #editor-holder .inline-widget .CodeMirror-gutters {
        background: transparent;
    }

    .related-container {
        background: @dark-bc-panel-bg;

        .selection {
            background: @dark-bc-panel-bg-selected;
        }

        .selection:before {
            border-left: @inline-triangle-size solid @dark-bc-bg-inline-widget;
        }

        .related {
            li {
                color: @dark-bc-text-alt;

                .related-file {
                    color: @dark-bc-text-thin-quiet;
                }
            }

            .selected {
                color: @dark-bc-text-alt;
            }
        }

        .inline-editor-message {
            color: @dark-bc-text-thin-quiet;
        }
    }
}

/* Variables and Mixins for non-code UI elements that can be styled */


fix vertical alignment

fix vertical alignment

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