rework images inserted in document on mobile

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }
      &.route {
        background-color: @brand-info;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }

      @media @phone {
        thead {
          display: none;
        }
        tbody,
        tr,
        th,
        td {
          display: block;
          padding: 0;
          text-align: left;
          white-space: normal;
        }
        tr {
          overflow: hidden;
          margin-bottom: 30px;
          background-color: inherit;
        }
        td {
          border-top: 0;
          padding-left: 10px;
        }
        td[data-title]:before {
          content: attr(data-title);
          display: block;
          color: #8D8D8D;
          padding: 3px 10px;
          margin-left: -10px;
          font-variant: small-caps;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
        }
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      margin-bottom: 5px;
      padding-left: 10px;
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    app-track-download {
      white-space: nowrap;
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    .orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
        text-align: left;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: 5px;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @bright-green;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 90%;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
        max-width: 100%;
        height: auto;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }
}

.description {
  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
}

.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}

@import "variables.less";

.view-details-associations .section,  .view-details-informations, #document-informations, .name-icon,
.view-details-associations .associated-documents {
  .flex();
  flex-flow: wrap row;
}

.view-details-title {
  margin-top: 60px;
  margin-bottom: 5px;

  @media @phone {
    margin-top: 55px;
    margin-bottom: 0;
  }
  @media @tablet {
    margin-top: 50px;
  }
  &.image {
    margin-bottom: 30px;
  }
  .outing-date {
    font-size: 2.2em;
    color: darkgray;
    text-align: center;
    @media @phone {
      font-size: 1.5em;
    }
  }
  >h1 {
    .flex();
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 80%;
    text-align: center;
    transition: 0.4s;
    margin-top: -5px;
    font-size: 2.5em;

    @media @phone {
      font-size: 2em;
      margin: 10px 0 5px 10px;
    }
    @media @tablet {
      font-size: 2em;
      line-height: 35px;
    }

    &.routes {
      .flex();
      align-items: center;
      justify-content: center;
      width: 99%;
      .title {
        max-width: 70%;
        margin-right: 10px;
        @media @phone {
          max-width: none;
        }
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
        }
      }
    }

    .waypoint-type {
      margin-right: 10px;
      font-size: 1.3em;
      color: @C2C-orange;
    }
    .badge {
      font-size: 0.5em;
      margin-right: 10px;
      margin-left: 10px;
      padding-bottom: 6px;
      margin-top: 5px;
      cursor: pointer;

      a {
        color: white;
        cursor: pointer;
        text-decoration: none;
      }

      @media @phone {
        display: none;
      }

      .glyphicon {
        color: white;
      }
      &.route {
        background-color: @brand-info;
      }
      &.waypoint {
        background-color: @bright-green;
      }
    }
  }
  .icons-header {
    margin-right: 30px;
    .flex();
    flex-flow: wrap row;
    justify-content: center;
    font-size: 4em;
    .route-activity, .waypoint-type {
      color: @C2C-orange;
    }
    @media @big {
      font-size: 4.5em;
    }
    @media @phone {
      font-size: 2em;
      margin-right: 5px;
    }
  }
}

.view-details-not-authorised {
  height: 100px;
  padding-top: 15px;
  margin-top: 10px;
  width: 100% !important;
}

.view-details-section {
  display: inline-block;
  margin-left: 3%;
  width: 91%;
  padding-bottom: 200px;
  font-size: .9em;

  @media @phone {
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images, &.articles, &.books {
    margin-top: 0;
  }

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    height: 170px;
    @media @phone {
      width: 88% !important;
      margin-right: 6%;
    }
    .photos {
      img {
        height: 150px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: 5px;
        margin-right: 5px;
      }
      app-slide-info {
        display: none;
      }
    }
    .slick-prev, .slick-next {
      width: 40px;
      height: 100%;
      &:before {
        font-size: 30px;
        color: @C2C-orange;
      }
    }
    .slick-prev {
      left: -40px;
      @media @phone {
        left: -35px;
      }
    }
    .slick-next {
      right: -40px;
      @media @phone {
        right: -35px;
      }
    }
  }
  .view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos,
  .view-details-comments, .view-details-not-authorised {
    padding-left: 0;
    padding-right: 0;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
    float: right;
    border: 1px solid #eee;

    @media @phone {
      border-width: 2px;
    }

    @media @big {
      width: 71.5%;
      margin-left: 2.5%;
    }

    h2 {
      text-align: left;
    }
    .heading {
      margin-top: 0;
    }
    .lead {
      width: 100%;
      word-break: break-word;
      float: left;
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 1.2em;

      @media (max-width: @screen-xs-max) {
        padding: 10px;
      }
    }
    .conditions-levels {
      font-size: .9em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }

      @media @phone {
        thead {
          display: none;
        }
        tbody,
        tr,
        th,
        td {
          display: block;
          padding: 0;
          text-align: left;
          white-space: normal;
        }
        tr {
          overflow: hidden;
          margin-bottom: 30px;
          background-color: inherit;
        }
        td {
          border-top: 0;
          padding-left: 10px;
        }
        td[data-title]:before {
          content: attr(data-title);
          display: block;
          color: #8D8D8D;
          padding: 3px 10px;
          margin-left: -10px;
          font-variant: small-caps;
          font-weight: bold;
          border-bottom: 1px solid #ddd;
        }
      }
    }
  }

  .view-details-associations {
    background: white;
    width: 100%;
    border: 1px solid #eee;

    @media @big {
      section article {
        min-width:  48%;
        margin-left: 0.5%;
        margin-right: 0.5%;
        flex-grow: 1;
      }
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }

    .associated-documents {
      margin-bottom: 5px;
      padding-left: 10px;
    }
  }

  .view-details-informations {
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;

    @media (max-width: 1400px) {
      width: 100%;
    }
    @media @big {
      width: 26%;
    }
    .value, .value-title {
      font-size: 1em;
    }
    .rating-block {
      float: left;
      margin-right: 6px;
      .flex();
      label {
        margin: 0;
        color: @bright-green;
      }
    }
    .route-activity {
      font-size: 2.5em;
      color: @bright-green;
    }

    #document-informations {
      overflow: hidden;
      width: 100%;
      @media @phone {
        display: block;
        border: 2px solid @C2C-orange;
      }
    }
    >.heading {
      margin-top:0;

      .glyphicon {
        font-size: .8em;
      }
    }
    .glyphicon-sort-by-attributes{
      transform: rotateZ(180deg);
    }
    .glyphicon {
      font-size: 2.5em;
      @media @phone {
        font-size: 1em;
      }
    }
    .glyphicon-duplicate {
      color: @bright-green;
      @media @desktop {
        margin-left: 10px;
      }
      @media @phone {
        font-size: 2em;
      }
      /*red strike through*/
      &:after {
        content: "";
        border-top: 3px solid #ea3636;
        position: absolute;
        left: -25%;
        top: 50%;
        width: 150%;
      }
    }
    a.creative-commons {
      font-size: 1em;
      &:hover, &:focus {
        text-decoration: none;
      }
    }

    app-track-download {
      white-space: nowrap;
    }

    .icon-glacier {
      font-size: 3.3em;
      color: @C2C-orange;
    }

    .detail-text {
      width: 80%;
      margin: auto;
      text-align: left;
      line-height: 17px;
      font-size: 1.1em;

      @media @phone {
        width: 200%;
        font-size: 1em;
      }
      @media @tablet {
        font-size: 1em;
      }
      ul {
        padding-left: 15px;
        width: 90%;
        li {
          margin-bottom: 5px;
        }
      }
      >p, >article {
        margin-top: 3px;
        margin-bottom: 3px;
      }
      &.ratings .value {
        cursor: pointer;
        transition: .2s;
        &:hover {
          color: gold;
          transition: .2s;
        }
      }
    }

    .name-icon-value {
      .flex();
      padding: 0;
      flex-grow: 1;
      min-height: 80px;
      background-color: white;
      border-bottom: 1px solid #dfd6c5;
      transition: 0.3s;

      @media @big {
        min-width: 100%;
        min-height: 0;
        height: auto;
      }

      @media (max-width : @screen-sm-max) {
        min-width:  50%;
        padding: 0;
      }
      @media @phone {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        cursor: pointer;
        &:not(:first-of-type) {
          border-top: 1px solid #dfd6c5;
        }
      }
      .activities {
        font-size: 1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

      &.location {
        display: none;
        @media @phone {
          .flex();
        }
        .areas {
          @media (min-width: @phone-max) {
            display: none;
          }
        }
      }
      &.maps {
        order: 10;
      }
    }

    .orientation-svg {
      height: 110px;
      width: auto;
      margin-left: 10%;
    }

    .accordion {
      padding: 5px;
      @media (min-width: @phone-max) {
        display: block !important;
      }
      @media @phone {
        padding-top: 1%;
      }
      @media @tablet {
        font-size: 14px;
      }
      ul {
        margin: 0;
      }
    }
    h4 {
      display: none;
      width: 100%;
      text-align: center;

      span {
        margin-right: 5px;
        transition: 0.3s;
      }
      @media @phone {
        display: block;
        font-size: 1em;
        margin-left: 10px;
        text-align: left;
      }
    }

    .name-icon {
      width: 67px;
      text-align: center;
      transition: 0.3s;
      justify-content: center;
      align-items: center;
      align-content: center;
      margin: 5px 3px 5px 10px;

      @media @phone {
        display: none;
      }
      .icon-user {
        font-size: 3em;
      }
      p {
        font-weight: bold;
        font-variant: small-caps;
      }
    }
    .coordinates-table {
      width: 180px;
      td {
        text-align: center;
        vertical-align: middle;
        padding: 1%;
      }
    }
  }
  .view-details-comments {
    @media @big {
      width: 100%;
    }

    #discourse-comments {
      text-align: center;
      padding: 20px;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        padding: 5px;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
  .area-associations {
    padding: 10px 10px 20px 10px;
    [class^="icon-"] {
      font-size: 2em;
      color: @C2C-orange
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 15px;
  display: block;
  background-color: rgba(164, 164, 166, 0.24);

  @media @tablet {
    height: 200px !important;
  }
  @media @phone {
    height: 150px !important;
    margin-bottom: 0;
  }
  .map {
    height: 100%;
  }
}

.view-details-other {
  width: 100% !important;
  margin: 0 0 40px 0 !important;
}

.document-summary{
  color: #626262;
  border: 1px solid #D8D8D8;
  border-left: 0.5em solid @bright-green;
  padding: 5px 15px 5px 15px;
  background-color: rgba(168, 168, 168, 0.07);
  margin: 10px 0 10px 0;
  .shadow(0, 0, 2px, rgba(0,0,0,0.2));
  font-style: italic;

  label {
    font-style: normal;
  }
}

app-add-association {

  app-simple-search {
    margin-bottom: 20px;
    width: 346px;

    @media @phone {
      width: 100%;
    }
    @media @tablet {
      width: 100%;
    }
    .search {
      width: 100%;

    }
    .glyphicon-search {
      margin-top: 4px;
      font-size: 1.5em;
    }
    .tt-suggestion {
      border-radius: 0;
      padding: 5px !important;
    }
    p {
      margin: 0 !important;
    }
  }

}

.view-details-description, .view-details-other,  .view-details-info, .view-details-associations, .view-details-photos, .view-details-informations {
  will-change: height;
  ul li {
    list-style: none;
    &:before {
      /*Using a Bootstrap glyphicon as the bullet point*/
      content: "\e080";
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      float: left;
      margin-left: -17px;
      color: @bright-green;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin: 0 calc(~"50% - 40px") 100px calc(~"50% - 40px");
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 3;
  margin-bottom: -18%;
  top: 45px;
  background: #FFFB80; /*yellow*/
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  .shadow(2px, 2px, 10px, rgba(33,33,33,0.4) );

  @media @tablet {
    right: 30px;
    font-size: 1em;
    max-width: 200px;
  }
  @media @phone {
    display: none !important;
  }
  @media @big {
    font-size: 1.1em;
    right: 50px;
  }
  @media @desktop {
    right: 50px;
  }

  p {
    margin-top: 2px;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    text-align: center;
    li:hover {
      cursor: pointer;
    }
    a {
      color: #A55944;
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2 {
    margin-top: 10px;
  }

  [class^='embedded_'] {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 15px;
    background-color: rgba(234, 234, 234, 0.37);
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    cursor: pointer;

    @media @phone {
      margin: 5px auto !important;
      max-width: 285px;
      float: none !important;

      figcaption {
        text-align: center;
        margin-left: 0;
        margin-top: 5px;
      }
      img {
        margin: auto !important;
      }
    }
    /*Big Image*/
    &.BI  {
      display: table-cell;
      max-width: none;
      margin-left: 10px;

      figcaption, img {
        max-width: 100% !important;
      }
    }
    app-slide-info {
      display: none;
    }
    figcaption {
      max-width: 240px;
      margin: 5px 10px -5px 10px;
      color: dimgray;
      font-size: 14px;
    }
    img {
      margin: auto auto 0 auto;
    }
  }

  .embedded_center {
    margin: 10px auto;
    display: table;
  }
  .embedded_left {
    float: left;
    clear: left;
    margin: 5px 25px 10px 0;
  }
  .embedded_right {
    float: right;
    clear: right;
    margin: 5px 0 10px 20px;
  }
  .embedded_inline {
    display: table;
    margin: 5px 20px 10px 10px;
  }
}

.description {
  .important_message, .warning_message {
    clear: both;
    display: inline-block;
    border-radius: 8px;
    margin: 0 0 5px 0;
    min-height: 25px;
    text-align: justify;
    vertical-align: middle;
    border-collapse: collapse;
    padding: 10px;

    span.glyphicon {
      margin-right: 10px;
    }
  }
  .important_message {
    border: 2px solid #f93;
  }
  .warning_message {
    background-color: #fcc9c8;

    span.glyphicon {
      color: white;
    }
  }
}

.show-phone.elevation {
  display: none;
  @media @phone {
    display: block;
  }
}


Fix popover style

Fix popover style

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/puttarajubr/commcare-hq.git/'


Revert "fixed delete photo button issues (bug 764934)"

This reverts commit c7b87b2fa2cd118773dc7ae08a7f848819a939e6.

@import 'lib';

#notifications {
    line-height: 16px;
    ol, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ol {
        margin-top: 5px;
    }
    ol > li + li {
        margin-top: 10px;
    }
    ul li {
        padding-bottom: 5px;
    }
    h3 {
        display: none;
    }
    p.note {
        font-style: italic;
        margin: 10px 0 0;
    }
}

.avatar {
    border: 5px solid @white;
    .box-shadow(1px 1px 3px #B2C8E0);
}

#account-settings {
    img, .button {
        .border-box;
    }
    img {
        .transition(~'.2s all ease-in-out');
        .max-width(2);
        &.previewed {
            max-height: 210px;
            max-width: 210px;
        }
    }
    .button {
        .width(2);
    }
    .button {
        font-size: 12px;
        padding: 0;
    }
    #profile-photo {
        img {
            display: block;
            margin-top: 5px;
        }
        .errorlist, a {
            margin-top: 10px;
        }
        .invisible-upload a {
            margin-top: 0;
        }
        a {
            font-size: 11px;
        }
        a {
            display: block;
        }
    }
    .form-footer {
        .delete {
            color: @red;
            font-size: 12px;
            &:hover {
                color: darken(@red, 10%);
            }
        }
    }
}

#account-delete {
    .notification-box, form {
        margin-top: 10px;
    }
}

#preapproval, #currency {
    p {
        font-size: 15px;
        line-height: 20px;
    }
    div + p {
        margin-top: 10px;
    }
    .enabled b {
        color: @green;
    }
    footer {
        margin-top: 20px;
    }
}

#preapproval, #currency {
    ul {
        list-style: none;
        padding: 0;
        li + li {
            margin-top: 5px;
        }
    }
    label {
        color: @black;
        font-weight: normal;
    }
}

#currency {
    ul {
        margin-bottom: 20px;
    }
    p {
        font-weight: bold;
    }
}

#profile {
    #avatar, #prose {
        float: left;
    }
    #prose {
        padding-left: 20px;
    }
    #bio, #my-submissions {
        margin-top: 10px;
    }
}

@import 'lib';

#notifications {
    line-height: 16px;
    ol, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ol {
        margin-top: 5px;
    }
    ol > li + li {
        margin-top: 10px;
    }
    ul li {
        padding-bottom: 5px;
    }
    h3 {
        display: none;
    }
    p.note {
        font-style: italic;
        margin: 10px 0 0;
    }
}

.avatar {
    border: 5px solid @white;
    .box-shadow(1px 1px 3px #B2C8E0);
}

#account-settings {
    img, .button {
        .border-box;
    }
    img {
        .transition(~'.2s all ease-in-out');
        .max-width(2);
        &.previewed {
            max-height: 210px;
            max-width: 210px;
        }
    }
    .button {
        .width(2);
    }
    .button {
        font-size: 12px;
        padding: 0;
    }
    #profile-photo {
        img {
            display: block;
            margin-top: 5px;
        }
        .errorlist, a {
            margin-top: 10px;
        }
        .invisible-upload a {
            margin-top: 0;
        }
        a {
            font-size: 11px;
            display: inline-block;
            &.button {
                color: @white;
                width: auto;
                padding: 0 10px;
            }
        }
    }
    .form-footer {
        .delete {
            color: @red;
            font-size: 12px;
            &:hover {
                color: darken(@red, 10%);
            }
        }
    }
}

#account-delete {
    .notification-box, form {
        margin-top: 10px;
    }
}

#preapproval, #currency {
    p {
        font-size: 15px;
        line-height: 20px;
    }
    div + p {
        margin-top: 10px;
    }
    .enabled b {
        color: @green;
    }
    footer {
        margin-top: 20px;
    }
}

#preapproval, #currency {
    ul {
        list-style: none;
        padding: 0;
        li + li {
            margin-top: 5px;
        }
    }
    label {
        color: @black;
        font-weight: normal;
    }
}

#currency {
    ul {
        margin-bottom: 20px;
    }
    p {
        font-weight: bold;
    }
}

#profile {
    #avatar, #prose {
        float: left;
    }
    #prose {
        padding-left: 20px;
    }
    #bio, #my-submissions {
        margin-top: 10px;
    }
}


Add styles.less

Add styles.less

.theme-atom-material-ui status-bar {
    font-size: 0.80rem;
}

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


add base less file

add base less file

/* 全局变量 */
@fontSize: 14px;
@lineHeight: 1.5em;
/* reset */
html, body, div, nav, header, footer, article {display: block;margin: 0;padding: 0;}
/* list */
ul, li {list-style-type: none;}
/* font */
body {font: normal normal @fontSize/@lineHeight arial,"microsoft yahei";}

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


Create side-catalog.less

Create side-catalog.less

// Directory Section

.catalog-container{
    padding: 0px;
}

.side-catalog {
    &.fixed{
        position: fixed;
        top: -21px;
    }
    &.fold{
        .catalog-toggle::before{
            content: "+";
        }
        .catalog-body{
            display: none;
        }
    }
    .catalog-toggle::before{
        content: "−";
        position: relative;
        margin-right: 5px;
        bottom: 1px;
    }
    display: block;
    overflow: auto;
    height: 100%;
    padding-bottom: 40px;
    width: 195px;
    .catalog-body{
        position: relative;
        list-style: none;
        height: auto;
        overflow: hidden;
        padding-left: 0px;
        padding-right: 5px;
        text-indent: 0;
        li{
            position: relative;
            list-style: none;
            a{
                padding-left: 10px;
                max-width: 180px;
                display: inline-block;
                vertical-align: middle;
                height: 30px;
                line-height: 30px;
                overflow: hidden;
                text-decoration: none;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .h1_nav,.h2_nav,.h3_nav{
            margin-left: 0;
            font-size: 13px;
            font-weight: bold;
        }
        .h4_nav,.h5_nav,.h6_nav{
            margin-left: 10px;
            font-size: 12px;
            a{
                max-width: 170px;
            }
        }
        .active{
            a{
                color: #0085a1!important;
            }
            border-radius: 4px;
            background-color: #F5F5F5;
        }
    }
}

@media (max-width: 1200px){
    .side-catalog{
        display: none;
    }
}

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


colors

colors

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/vtex/ui-style-guide.git/'


Adds the replacement of toggle button for sidebar

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

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

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

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

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

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

    &:hover {
        > i {
            margin-left: -9px;
        }
    }

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

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

.sidebar-wrapper {
    position: fixed;
    top: 0;
    overflow: hidden;
    bottom: 0;
    width: @sidebar-wrapper-width;
    cursor: default;

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

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

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

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

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

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            display: block;
        }
    }

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

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

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

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

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

        + .sidebar-item {
            padding-top: 32px;

            > a {
                border-top: 1px solid transparent;
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        &:hover {
            > i {
                margin-right: -9px;
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
        > i {
            margin-left: -9px;
        }
    }

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

.sidebar-wrapper {
    position: fixed;
    top: 0;
    overflow: hidden;
    bottom: 0;
    width: @sidebar-wrapper-width;
    cursor: default;

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

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

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

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

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

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            display: block;
        }
    }

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

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

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

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

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

        + .sidebar-item {
            padding-top: 32px;

            > a {
                border-top: 1px solid transparent;
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        &:hover {
            > i {
                margin-right: -9px;
            }
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Update index.less (#5341)

Update index.less (#5341)

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

@table-prefix-cls: ~"@{ant-prefix}-table";
@table-head-background-color: @background-color-base;

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  font-size: @font-size-base;
  color: @text-color;
  overflow: hidden;
  position: relative;
  border-radius: @border-radius-base @border-radius-base 0 0;

  &-body {
    transition: opacity 0.3s ease;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
  }

  &-thead > tr > th {
    background: @table-head-background-color;
    font-weight: 500;
    transition: background .3s ease;
    text-align: left;
    color: @heading-color;

    &[colspan] {
      text-align: center;
    }

    .@{iconfont-css-prefix}-filter {
      margin-left: 4px;
      font-size: @font-size-base;
      cursor: pointer;
      color: #aaa;
      transition: all .3s;
      &:hover {
        color: @text-color;
      }
    }

    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
      color: @primary-color;
    }
  }

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: all .3s;
  }

  &-thead > tr,
  &-tbody > tr {
    transition: all .3s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
      & > td {
        background: @primary-1;
      }
    }
  }

  &-thead > tr:hover {
    background: none;
  }

  &-footer {
    padding: 16px 8px;
    background: @table-head-background-color;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    position: relative;
    &:before {
      content: '';
      height: 1px;
      background: @table-head-background-color;
      position: absolute;
      top: -1px;
      width: 100%;
      left: 0;
    }
  }

  &.@{table-prefix-cls}-bordered &-footer {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title {
    padding: 16px 0;
    position: relative;
    top: 1px;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &.@{table-prefix-cls}-bordered &-title {
    border: @border-width-base @border-style-base @border-color-split;
    padding-left: 8px;
    padding-right: 8px;
  }

  &-title + &-content {
    position: relative;
    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
    .@{table-prefix-cls}-bordered & {
      &,
      table {
        border-radius: 0;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4373
  &-without-column-header &-title + &-content,
  &-without-column-header table {
    border-radius: 0;
  }

  &-tbody > tr.@{table-prefix-cls}-row-selected {
    background: #fafafa;
  }

  &-thead > tr > th.@{table-prefix-cls}-column-sort {
    background: #eaeaea;
  }

  &-thead > tr > th,
  &-tbody > tr > td {
    padding: 16px 8px;
    word-break: break-all;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column {
    padding-left: 16px;
    padding-right: 0;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
    text-align: center;
    width: 62px;
  }

  &-expand-icon-th,
  &-row-expand-icon-cell {
    text-align: center;
    width: 50px;
  }

  &-header {
    background: @table-head-background-color;
    overflow: hidden;
  }

  &-header table {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-loading {
    position: relative;
    .@{table-prefix-cls}-body {
      background: @component-background;
      opacity: 0.5;
    }
    .@{table-prefix-cls}-spin-holder {
      height: 20px;
      line-height: 20px;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      position: absolute;
    }
    .@{table-prefix-cls}-with-pagination {
      margin-top: -20px;
    }
    .@{table-prefix-cls}-without-pagination {
      margin-top: 10px;
    }
  }

  &-middle {
    .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column),
    .@{table-prefix-cls}-tbody > tr > td {
      padding: 10px 8px;
    }

    .@{table-prefix-cls}-title,
    .@{table-prefix-cls}-footer {
      padding: 10px 8px;
    }
  }

  &-small {
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base;

    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table {
      border: 0;
      padding: 0 8px;
    }

    .@{table-prefix-cls}-thead > tr > th {
      background: @component-background;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-tbody > tr > td {
      padding: 6px 8px;
    }

    .@{table-prefix-cls}-title,
    .@{table-prefix-cls}-footer,
    .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column) {
      padding: 10px 8px;
    }

    .@{table-prefix-cls}-title {
      border-bottom: @border-width-base @border-style-base @border-color-split;
      top: 0;
    }

    .@{table-prefix-cls}-header {
      background: @component-background;
      table {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }

    .@{table-prefix-cls}-placeholder,
    .@{table-prefix-cls}-row:last-child td {
      border-bottom: 0;
    }
  }

  &-column-sorter {
    margin-left: 4px;
    display: inline-block;
    width: 12px;
    height: 14px;
    vertical-align: middle;
    text-align: center;
    &-up,
    &-down {
      line-height: 4px;
      height: 5px;
      display: block;
      width: 12px;
      cursor: pointer;
      &:hover .@{iconfont-css-prefix} {
        color: @text-color;
      }
      &.on {
        .@{iconfont-css-prefix}-caret-up,
        .@{iconfont-css-prefix}-caret-down {
          color: @primary-color;
        }
      }
    }
    .@{iconfont-css-prefix}-caret-up,
    .@{iconfont-css-prefix}-caret-down {
      .iconfont-size-under-12px(7px);
      line-height: 6px;
      height: 6px;
      color: #aaa;
      &:before {
        -moz-transform-origin: 53% 50%; /* fix firefox position */
      }
    }
  }

  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
    .@{table-prefix-cls}-fixed-left table,
    .@{table-prefix-cls}-fixed-right table {
      border: @border-width-base @border-style-base @border-color-split;
      border-right: 0;
      border-bottom: 0;
    }

    &.@{table-prefix-cls}-empty {
      .@{table-prefix-cls}-placeholder {
        border-left: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    &.@{table-prefix-cls}-fixed-header {
      .@{table-prefix-cls}-header > table {
        border-bottom: 0;
      }

      .@{table-prefix-cls}-body > table {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .@{table-prefix-cls}-body-inner > table {
        border-top: 0;
      }

      .@{table-prefix-cls}-placeholder {
        border: 0;
      }
    }

    .@{table-prefix-cls}-thead > tr > th {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    &.@{table-prefix-cls}-small {
      border-right: 0;

      .@{table-prefix-cls}-header > table,
      .@{table-prefix-cls}-body > table,
      .@{table-prefix-cls}-fixed-left table,
      .@{table-prefix-cls}-fixed-right table {
        border: 0;
        padding: 0;
      }

      .@{table-prefix-cls}-title {
        border: 0;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
      }

      .@{table-prefix-cls}-footer {
        border: 0;
        border-top: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
        &:before {
          display: none;
        }
      }

      .@{table-prefix-cls}-placeholder {
        border-left: 0;
        border-bottom: 0;
      }
    }
  }

  &-placeholder {
    position: relative;
    padding: 16px 8px;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    text-align: center;
    font-size: @font-size-base;
    color: @text-color-secondary;
    .@{iconfont-css-prefix} {
      margin-right: 4px;
    }
  }

  &-pagination {
    margin: 16px 0;
    float: right;
  }

  &-filter-dropdown {
    min-width: 96px;
    margin-left: -8px;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    .@{ant-prefix}-dropdown-menu {
      border: 0;
      box-shadow: none;
      border-radius: @border-radius-base @border-radius-base 0 0;

      // https://github.com/ant-design/ant-design/issues/4916
      &-without-submenu {
        max-height: 400px;
        overflow-x: hidden;
      }

      &-item > label + span {
        padding: 0;
      }

      &-sub {
        border-radius: @border-radius-base;
        box-shadow: @box-shadow-base;
      }

      .@{ant-prefix}-dropdown-submenu-contain-selected {
        .@{ant-prefix}-dropdown-menu-submenu-title:after {
          color: @primary-color;
          font-weight: bold;
          text-shadow: 0 0 2px @primary-2;
        }
      }
    }

    .@{ant-prefix}-dropdown-menu-item {
      overflow: hidden;
    }

    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
      border-radius: 0;
    }

    &-btns {
      overflow: hidden;
      padding: 7px 16px;
      border-top: @border-width-base @border-style-base @border-color-split;
    }

    &-link {
      color: @link-color;
      &:hover {
        color: @link-hover-color;
      }
      &:active {
        color: @link-active-color;
      }
      &.confirm {
        float: left;
      }
      &.clear {
        float: right;
      }
    }
  }

  &-selection {
    &-select-all {
      margin-right: 4px !important;
    }

    .@{iconfont-css-prefix}-down {
      color: #aaa;
    }

    &-menu {
      min-width: 96px;
      margin-top: 5px;
      margin-left: -30px;
      background: @component-background;
      border-radius: @border-radius-base;
      box-shadow: @box-shadow-base;

      .@{ant-prefix}-action-down {
        color: #aaa;
      }
    }

    &-down {
      cursor: pointer;
      padding: 0;
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
    }
  }

  &-row {
    &-expand-icon {
      cursor: pointer;
      display: inline-block;
      width: 17px;
      height: 17px;
      text-align: center;
      line-height: 14px;
      border: @border-width-base @border-style-base @border-color-split;
      user-select: none;
      background: @component-background;
    }

    &-expanded:after {
      content: '-';
    }

    &-collapsed:after {
      content: '+';
    }

    &-spaced {
      visibility: hidden;
      &:after {
        content: '.';
      }
    }

    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
      display: inline-block;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      background: #fbfbfb;
    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
    margin-right: 8px;
  }

  &-scroll {
    overflow: auto;
    overflow-x: hidden;
    table {
      width: auto;
      min-width: 100%;
    }
  }

  &-body-inner {
    height: 100%;
  }

  &-fixed-header &-body {
    position: relative;
    background: @component-background;
  }

  &-fixed-header &-body-inner {
    overflow: scroll;
  }

  &-fixed-header &-scroll &-header {
    overflow: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;
  }

  /* fix firefox scrollbar bug */
  &-fixed-header&-empty &-scroll &-body {
    padding-bottom: 20px;
    margin-bottom: -20px;
  }

  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    overflow: hidden;
    transition: box-shadow .3s ease;
    border-radius: 0;
    table {
      width: auto;
      background: @component-background;
    }
  }

  &-fixed-header &-fixed-left &-body-outer &-fixed,
  &-fixed-header &-fixed-right &-body-outer &-fixed {
    border-radius: 0;
  }

  &-fixed-left {
    left: 0;
    box-shadow: 6px 0 6px -4px @shadow-color;
    .@{table-prefix-cls}-header {
      overflow-y: hidden;
    }
    // hide scrollbar in left fixed columns
    .@{table-prefix-cls}-body-inner {
      margin-right: -20px;
      padding-right: 20px;
    }
    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
      padding-right: 0;
    }
    &,
    table {
      border-radius: @border-radius-base 0 0 0;
    }
  }

  &-fixed-right {
    right: 0;
    box-shadow: -6px 0 6px -4px @shadow-color;
    &,
    table {
      border-radius: 0 @border-radius-base 0 0;
    }
    // hide expand row content in right-fixed Table
    // https://github.com/ant-design/ant-design/issues/1898
    .@{table-prefix-cls}-expanded-row {
      color: transparent;
      pointer-events: none;
    }
  }

  &&-scroll-position-left &-fixed-left {
    box-shadow: none;
  }

  &&-scroll-position-right &-fixed-right {
    box-shadow: none;
  }
}

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

@table-prefix-cls: ~"@{ant-prefix}-table";
@table-head-background-color: @background-color-base;

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  font-size: @font-size-base;
  color: @text-color;
  overflow: hidden;
  position: relative;
  border-radius: @border-radius-base @border-radius-base 0 0;

  &-body {
    transition: opacity 0.3s ease;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
  }

  &-thead > tr > th {
    background: @table-head-background-color;
    font-weight: 500;
    transition: background .3s ease;
    text-align: left;
    color: @heading-color;

    &[colspan] {
      text-align: center;
    }

    .@{iconfont-css-prefix}-filter {
      margin-left: 4px;
      font-size: @font-size-base;
      cursor: pointer;
      color: #aaa;
      transition: all .3s;
      &:hover {
        color: @text-color;
      }
    }

    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
      color: @primary-color;
    }
  }

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: all .3s;
  }

  &-thead > tr,
  &-tbody > tr {
    transition: all .3s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
      & > td {
        background: @primary-1;
      }
    }
  }

  &-thead > tr:hover {
    background: none;
  }

  &-footer {
    padding: 16px 8px;
    background: @table-head-background-color;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    position: relative;
    &:before {
      content: '';
      height: 1px;
      background: @table-head-background-color;
      position: absolute;
      top: -1px;
      width: 100%;
      left: 0;
    }
  }

  &.@{table-prefix-cls}-bordered &-footer {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title {
    padding: 16px 0;
    position: relative;
    top: 1px;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &.@{table-prefix-cls}-bordered &-title {
    border: @border-width-base @border-style-base @border-color-split;
    padding-left: 8px;
    padding-right: 8px;
  }

  &-title + &-content {
    position: relative;
    border-radius: @border-radius-base @border-radius-base 0 0;
    overflow: hidden;
    .@{table-prefix-cls}-bordered & {
      &,
      table {
        border-radius: 0;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4373
  &-without-column-header &-title + &-content,
  &-without-column-header table {
    border-radius: 0;
  }

  &-tbody > tr.@{table-prefix-cls}-row-selected {
    background: #fafafa;
  }

  &-thead > tr > th.@{table-prefix-cls}-column-sort {
    background: #eaeaea;
  }

  &-thead > tr > th,
  &-tbody > tr > td {
    padding: 16px 8px;
    word-break: break-all;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column {
    padding-left: 16px;
    padding-right: 0;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
    text-align: center;
    width: 62px;
  }

  &-expand-icon-th,
  &-row-expand-icon-cell {
    text-align: center;
    width: 50px;
  }

  &-header {
    background: @table-head-background-color;
    overflow: hidden;
  }

  &-header table {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-loading {
    position: relative;
    .@{table-prefix-cls}-body {
      background: @component-background;
      opacity: 0.5;
    }
    .@{table-prefix-cls}-spin-holder {
      height: 20px;
      line-height: 20px;
      left: 50%;
      top: 50%;
      margin-left: -30px;
      position: absolute;
    }
    .@{table-prefix-cls}-with-pagination {
      margin-top: -20px;
    }
    .@{table-prefix-cls}-without-pagination {
      margin-top: 10px;
    }
  }

  &-middle {
    .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column),
    .@{table-prefix-cls}-tbody > tr > td {
      padding: 10px 8px;
    }

    .@{table-prefix-cls}-title,
    .@{table-prefix-cls}-footer {
      padding: 10px 8px;
    }
  }

  &-small {
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base;

    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table {
      border: 0;
      padding: 0 8px;
    }

    .@{table-prefix-cls}-thead > tr > th {
      background: @component-background;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-tbody > tr > td {
      padding: 6px 8px;
    }

    .@{table-prefix-cls}-title,
    .@{table-prefix-cls}-footer,
    .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column) {
      padding: 10px 8px;
    }

    .@{table-prefix-cls}-title {
      border-bottom: @border-width-base @border-style-base @border-color-split;
      top: 0;
    }

    .@{table-prefix-cls}-header {
      background: @component-background;
      table {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }

    .@{table-prefix-cls}-placeholder,
    .@{table-prefix-cls}-row:last-child td {
      border-bottom: 0;
    }
  }

  &-column-sorter {
    margin-left: 4px;
    display: inline-block;
    width: 12px;
    height: 14px;
    vertical-align: middle;
    text-align: center;
    &-up,
    &-down {
      line-height: 4px;
      height: 5px;
      display: block;
      width: 12px;
      cursor: pointer;
      &:hover .@{iconfont-css-prefix} {
        color: @text-color;
      }
      &.on {
        .@{iconfont-css-prefix}-caret-up,
        .@{iconfont-css-prefix}-caret-down {
          color: @primary-color;
        }
      }
    }
    .@{iconfont-css-prefix}-caret-up,
    .@{iconfont-css-prefix}-caret-down {
      .iconfont-size-under-12px(7px);
      line-height: 6px;
      height: 6px;
      color: #aaa;
      &:before {
        -moz-transform-origin: 53% 50%; /* fix firefox position */
      }
    }
  }

  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
    .@{table-prefix-cls}-fixed-left table,
    .@{table-prefix-cls}-fixed-right table {
      border: @border-width-base @border-style-base @border-color-split;
      border-right: 0;
      border-bottom: 0;
    }

    &.@{table-prefix-cls}-empty {
      .@{table-prefix-cls}-placeholder {
        border-left: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    &.@{table-prefix-cls}-fixed-header {
      .@{table-prefix-cls}-header > table {
        border-bottom: 0;
      }

      .@{table-prefix-cls}-body > table {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .@{table-prefix-cls}-body-inner > table {
        border-top: 0;
      }

      .@{table-prefix-cls}-placeholder {
        border: 0;
      }
    }

    .@{table-prefix-cls}-thead > tr > th {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    &.@{table-prefix-cls}-small {
      border-right: 0;

      .@{table-prefix-cls}-header > table,
      .@{table-prefix-cls}-body > table,
      .@{table-prefix-cls}-fixed-left table,
      .@{table-prefix-cls}-fixed-right table {
        border: 0;
        padding: 0;
      }

      .@{table-prefix-cls}-title {
        border: 0;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
      }

      .@{table-prefix-cls}-footer {
        border: 0;
        border-top: @border-width-base @border-style-base @border-color-split;
        border-right: @border-width-base @border-style-base @border-color-split;
        &:before {
          display: none;
        }
      }

      .@{table-prefix-cls}-placeholder {
        border-left: 0;
        border-bottom: 0;
      }
    }
  }

  &-placeholder {
    position: relative;
    padding: 16px 8px;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    text-align: center;
    font-size: @font-size-base;
    color: @text-color-secondary;
    .@{iconfont-css-prefix} {
      margin-right: 4px;
    }
  }

  &-pagination {
    margin: 16px 0;
    float: right;
  }

  &-filter-dropdown {
    min-width: 96px;
    margin-left: -8px;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    .@{ant-prefix}-dropdown-menu {
      border: 0;
      box-shadow: none;
      border-radius: @border-radius-base @border-radius-base 0 0;

      // https://github.com/ant-design/ant-design/issues/4916
      &-without-submenu {
        max-height: 400px;
        overflow-x: hidden;
      }

      &-item > label + span {
        padding: 0;
      }

      &-sub {
        border-radius: @border-radius-base;
        box-shadow: @box-shadow-base;
      }

      .@{ant-prefix}-dropdown-submenu-contain-selected {
        .@{ant-prefix}-dropdown-menu-submenu-title:after {
          color: @primary-color;
          font-weight: bold;
          text-shadow: 0 0 2px@primary-2;
        }
      }
    }

    .@{ant-prefix}-dropdown-menu-item {
      overflow: hidden;
    }

    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
      border-radius: 0;
    }

    &-btns {
      overflow: hidden;
      padding: 7px 16px;
      border-top: @border-width-base @border-style-base @border-color-split;
    }

    &-link {
      color: @link-color;
      &:hover {
        color: @link-hover-color;
      }
      &:active {
        color: @link-active-color;
      }
      &.confirm {
        float: left;
      }
      &.clear {
        float: right;
      }
    }
  }

  &-selection {
    &-select-all {
      margin-right: 4px !important;
    }

    .@{iconfont-css-prefix}-down {
      color: #aaa;
    }

    &-menu {
      min-width: 96px;
      margin-top: 5px;
      margin-left: -30px;
      background: @component-background;
      border-radius: @border-radius-base;
      box-shadow: @box-shadow-base;

      .@{ant-prefix}-action-down {
        color: #aaa;
      }
    }

    &-down {
      cursor: pointer;
      padding: 0;
      display: inline-block;
      vertical-align: middle;
      line-height: 1;
    }
  }

  &-row {
    &-expand-icon {
      cursor: pointer;
      display: inline-block;
      width: 17px;
      height: 17px;
      text-align: center;
      line-height: 14px;
      border: @border-width-base @border-style-base @border-color-split;
      user-select: none;
      background: @component-background;
    }

    &-expanded:after {
      content: '-';
    }

    &-collapsed:after {
      content: '+';
    }

    &-spaced {
      visibility: hidden;
      &:after {
        content: '.';
      }
    }

    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
      display: inline-block;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      background: #fbfbfb;
    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
    margin-right: 8px;
  }

  &-scroll {
    overflow: auto;
    overflow-x: hidden;
    table {
      width: auto;
      min-width: 100%;
    }
  }

  &-body-inner {
    height: 100%;
  }

  &-fixed-header &-body {
    position: relative;
    background: @component-background;
  }

  &-fixed-header &-body-inner {
    overflow: scroll;
  }

  &-fixed-header &-scroll &-header {
    overflow: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;
  }

  /* fix firefox scrollbar bug */
  &-fixed-header&-empty &-scroll &-body {
    padding-bottom: 20px;
    margin-bottom: -20px;
  }

  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    overflow: hidden;
    transition: box-shadow .3s ease;
    border-radius: 0;
    table {
      width: auto;
      background: @component-background;
    }
  }

  &-fixed-header &-fixed-left &-body-outer &-fixed,
  &-fixed-header &-fixed-right &-body-outer &-fixed {
    border-radius: 0;
  }

  &-fixed-left {
    left: 0;
    box-shadow: 6px 0 6px -4px @shadow-color;
    .@{table-prefix-cls}-header {
      overflow-y: hidden;
    }
    // hide scrollbar in left fixed columns
    .@{table-prefix-cls}-body-inner {
      margin-right: -20px;
      padding-right: 20px;
    }
    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
      padding-right: 0;
    }
    &,
    table {
      border-radius: @border-radius-base 0 0 0;
    }
  }

  &-fixed-right {
    right: 0;
    box-shadow: -6px 0 6px -4px @shadow-color;
    &,
    table {
      border-radius: 0 @border-radius-base 0 0;
    }
    // hide expand row content in right-fixed Table
    // https://github.com/ant-design/ant-design/issues/1898
    .@{table-prefix-cls}-expanded-row {
      color: transparent;
      pointer-events: none;
    }
  }

  &&-scroll-position-left &-fixed-left {
    box-shadow: none;
  }

  &&-scroll-position-right &-fixed-right {
    box-shadow: none;
  }
}