avoid element jump on load

avoid element jump on load

@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;
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
          width: 150px;
        }
      }
    }

    .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-section {
  height: 73%;
  margin-left: 3%;
  width: 91%;
  margin-top: -20px;
  padding-bottom: 266px;
  overflow: hidden;

  @media @phone {
    padding-top: 28px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }
  @media @big {
    margin-left: 4%;
    width: 89%;
  }
  &.images {
    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;
      }
    }
    .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 {
    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: 1em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }
    }
  }

  .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;
      }
    }
    .add-association {
      float: left;
    }
    .add-outing {
      float: right;
      background: #CACACA;
      margin-bottom: 10px;
      padding: .5%;
      color: white;
      border-radius: 5px;
      font-variant: small-caps;
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .outings {
      .heading {
        background-color: gray;
      }
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }
    .list-item {
      &.waypoints {
        @media @big {
          width: 24%;
        }
        @media @desktop {
          width: 32%;
        }
        @media @tablet {
          width: 49%;
        }
      }
      .list-item-title {
        font-size: 0.9em;
      }
    }

    .associated-documents {
      max-height: 600px;
      overflow-y: auto;
      border: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 5px;
    }
  }

  .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;
      }
    }
    .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;
        display: none;
      }
      @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: 1.1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

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

    .accordion {
      padding: 5px;

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

    .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;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        margin: 10px;
        padding: .5%;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
} /*.view-details-section*/

.view-details-map {
  height: 230px!important;
  margin-bottom: 30px;
  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 #5FE45F;
  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: @brand-success;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin-top: 50px;
  margin-bottom: 25px;
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 20;
  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;
      font-weight: bold;
    }
    a {
      color: #A55944;
      &:hover {
        text-decoration: none;
      }
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2{
    margin-top: 10px;
  }
}
.show-phone.elevation {
  display: none;
  @media @phone {
     display: block;
  }
}
#detail-orientation {
  .flex();
  justify-content: center;

  @media @phone {
    justify-content: flex-start;
    display: none;
  }

  #orientation-svg{
    height: 110px;
    width: auto;
  }
}

@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;
      }
      .icons-header {
        font-size: 1.5em;
        margin-right: 10px;
        @media @phone {
          margin-right: 5px;
          width: 150px;
        }
      }
    }

    .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-section {
  height: 73%;
  margin-left: 3%;
  width: 91%;
  margin-top: -20px;
  padding-bottom: 266px;
  overflow: hidden;

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

  .view-details-photos {
    width: 90% !important;
    margin-right: 5%;
    padding: 10px 0 10px 0;
    @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;
      }
    }
    .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 {
    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: 1em;
      th {
        line-height: 16px;
        color: #8D8D8D;
        font-variant: small-caps;
      }
    }
  }

  .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;
      }
    }
    .add-association {
      float: left;
    }
    .add-outing {
      float: right;
      background: #CACACA;
      margin-bottom: 10px;
      padding: .5%;
      color: white;
      border-radius: 5px;
      font-variant: small-caps;
    }
    .show-more {
      float: right;
      margin-bottom: 5px;
    }

    .outings {
      .heading {
        background-color: gray;
      }
    }

    .heading {
      margin-top: 1%;
      border-color: #eee;
      font-size: 1.1em;
    }
    .list-item {
      &.waypoints {
        @media @big {
          width: 24%;
        }
        @media @desktop {
          width: 32%;
        }
        @media @tablet {
          width: 49%;
        }
      }
      .list-item-title {
        font-size: 0.9em;
      }
    }

    .associated-documents {
      max-height: 600px;
      overflow-y: auto;
      border: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 5px;
    }
  }

  .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;
      }
    }
    .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;
        display: none;
      }
      @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: 1.1em;
      }
      .icon-user {
        color: @C2C-orange;
      }

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

    .accordion {
      padding: 5px;

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

    .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;

      .no-thread {
        display: inline-block;
        background: #CACACA;
        margin: 10px;
        padding: .5%;
        color: white;
        border-radius: 5px;
        font-variant: small-caps;
      }
    }
  }
} /*.view-details-section*/

.view-details-map {
  .map {
    width: 100%;
    height: 280px !important;
    margin-bottom: 30px;

    @media @tablet {
      height: 220px !important;
    }
    @media @phone {
      height: 170px !important;
    }
    @media @phone {
      margin-bottom: 0;
    }
  }
  /*is 100% by defaul - it stretches the map!*/
  .ol-unselectable {
    height: auto !important;
    width: auto !important;
  }
}

.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 #5FE45F;
  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: @brand-success;
    }
  }
  ul.types li {
    width: 50%;
    float: left;
  }
}

.scroll-top-btn {
  margin-top: 50px;
  margin-bottom: 25px;
}
.view-details-wrapper {
  width:  100%;
  display: inline-block;
}

.location-static {
  min-height: 80px;
  max-width: 250px;
  padding: 10px;
  position: relative;
  float: right;
  z-index: 20;
  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;
      font-weight: bold;
    }
    a {
      color: #A55944;
      &:hover {
        text-decoration: none;
      }
    }
  }
}
.view-details-description {
  img.image {
    max-width: 100%;
  }
  @media @phone {
    min-height:  50px;
    margin-bottom: -200px;
  }
  h2{
    margin-top: 10px;
  }
}
.show-phone.elevation {
  display: none;
  @media @phone {
     display: block;
  }
}
#detail-orientation {
  .flex();
  justify-content: center;

  @media @phone {
    justify-content: flex-start;
    display: none;
  }

  #orientation-svg{
    height: 110px;
    width: auto;
  }
}


updated vendorized sprites mixin

updated vendorized sprites mixin

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/pixelass/more-or-less.git/'


line-height is now equals to @line-height

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


Create tact.less

Create tact.less

// Core variables, mixins, and fonts
@import "variables.less";

// Mixins
@import "mixins.less";

// Viewport
@import "viewport.less";

// Grid
@import "grid.less";

// Fonts
@import "font-awesome.less";
@import "sinkin.less";
@import "aleo.less";

// Reset and dependencies
@import "normalize.less";

// layout
@import "core.less";

// drawers
@import "drawers.less";

// navigation
@import "menu.less";
@import "tabs.less";

// alerts and labels
@import "alerts.less";
@import "labels.less";

// buttons and pagination
@import "buttons.less";
@import "pagination.less";

// images
@import "images.less";

// tables
@import "tables.less";

// forms
@import "forms.less";

// panels and modals
@import "panels.less";
@import "modals.less";

// list groups and wells
@import "list-groups.less";
@import "wells.less";

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


Create 04-links-icons.less

Create 04-links-icons.less

/* Liens */
/* penser au focus */
a {
  color: @color-links;
  cursor: pointer;

  &:focus,
  &:hover,
  &:active {
    color: @color-hover;
  }
}
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
a:link img,
a:visited img,
img {
  border-style: none;
}

/* liens avec icônes, on peut utiliser les DATA-URI */

/* pour signaler liens externes */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* si URL complète sur un lien interne, virer signalement liens externes */
/*a[href^="http://www.mondomaine.com"] {

}*/
/* contact, liens mailto */
/*.mail,
a[href^="mailto:"] {

}*/
/* dont l'URL se termine par .pdf ou ce que vous voulez comme extension */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/

error: pathspec 'less/rocssti-fr/04-links-icons.less' did not match any file(s) known to git


Modified overflow for file area so horizontal scrollbars do not appear. Added max-height to open files area.

/*!
 * Brackets
 *
 * TODO: Copyright Notice
 *
 * This file first imports all of the shared LESS/CSS, and then defines
 * version-specific layout (e.g. layout for the App shell, or layout for
 * the In-Browser version on Firefox).
 *
 * Going forward, we may have different versions of this file for different
 * Versions (e.g. App, In-Browser, etc.)
 *
 * Anything that is general/reusable should be pushed up into a LESS file
 * in the "styles" directory. See "brackets_shared.less" for the organization
 *
 * Date: @DATE
 */

/* IMPORTANT: importing brackets_shared should be the first step in this file
 * This is so that imported CSS files (NOT LESS files) end up in the
 * right place
 */
@import "styles/brackets_shared.less";

/* Overall layout */

html, body {
    height: 100%;
    overflow: hidden;

    /* Turn off selection for UI elements */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

    /* And make sure we get a pointer cursor even over text */
    cursor: default;
}

body {
    .vbox;

    /* This appears to be necessary in Firefox when body is set to display: box. */
    width: 100%;

    .topbar {
        position: static;
    }
}

a, img {
    -webkit-user-drag: none;
}

.topbar-inner {
    /* We don't want to use the default .container in here,
       so we need to .clearfix the children. */
    .clearfix;

    .brand {
        .sane-box-model;
        margin-left: 0;
        width: 200px;
        padding-left: @base-padding;
        padding-right: @base-padding;
    }
}

.main-view {
    .hbox;
    .box-flex(1);

    .sidebar {
        .vbox;
        width: 200px;
    }

    .content {
        .vbox;
        .box-flex(1);
    }
}

.toolbar {
    /* make sure the shadow goes above other items */
    z-index: 2;
    .title {
        font-size: 1.2em;
        font-weight: bold;
        text-shadow: 0 1px @bc-white;
    }
    .buttons {
        float: right;
    }
}

#editorHolder {
    .vbox;
    .box-flex(1);

    .CodeMirror-lines {
        padding: @base-padding;
    }

    /* Placeholder shown when there is no editor open */
    #notEditor {
        .box-flex(1);
        .vbox;
        .box-pack(center);
        .box-align(center);
        background-color: @background-color-2;

        #notEditorContent {
            color: @background-color-1;
            font-size: 350px;
            line-height: normal;
            margin-top: -0.25em;
            text-shadow: 0 1px @bc-black;
            opacity: 0.30;
        }
    }
}

/* Project panel */

#projects .toolbar {
    .picker {
        .box;
        .box-flex(1);
    }
}

#project-file-area {
    .vbox;
    .box-flex(1);
    margin: 5px 0px 5px 0px;

    .project-file-header-area {
        padding: 4px 4px 2px 0px;

        span {
            font-weight: bold;
            vertical-align: middle;
        }
    }

    .file-list-divider {
        border-bottom: 1px solid #9a9a9a;
        box-shadow: 0px 1px #eeeeee;
    }

}

#open-files-container {
    .box-flex(0);
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 200px; // TODO: it would be nicer to have this be 50%, but that doesn't seem to work

    ul {
        list-style-type: none;
        margin: 0;

        a {
            color: black;
            text-decoration: none;
            margin-left: 26px;
        }

        li {
            padding: 2px 0px 2px 2px;

            position: relative; // so that children can be positioned absolute

            &:hover {
                background: #E7F4F9;
            }

            &.selected {
                #gradient.vertical(#5fa3e0, #0065be);

                a { color: white; }
            }
        }
    }
}

#project-files-container {
    .box-flex(1);
    margin: 0px 0px 0px 8px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;

    ul { margin-top: 0; }
}

@spriteSize18: 18px;

/** Classes for icons from jsTreeSprites.png
*/
.jsTreeSprite {
    background-image: url("styles/images/jsTreeSprites.png");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: @spriteSize18;
    height: @spriteSize18;
}

.disclosure-arrow-opened {
    .jsTreeSprite;
    display: inline-block;
    background-position: -@spriteSize18 0px;
}

.disclosure-arrow-closed {
    .jsTreeSprite;
    display: inline-block;
    background-position: 0px 0px;
}

/** Classes for icons from bracketSprites.png
*/

.bracketSprite {
    background-image: url("styles/images/bracketsSprites.png");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: @spriteSize18;
    height: @spriteSize18;
}

.file-status-icon {
    margin: 0px 0px 0px 10px;
    .bracketSprite;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 1px;

    &.dirty {
        background-position: 0 0;
    }

    &.canClose {
        background-position: -@spriteSize18 0;
    }

    &.canClose:hover {
        background-position: -@spriteSize18*2 0;
    }
}

/* Styles for the search dialog--this is temporary, only for debugging */

.CodeMirror-dialog {
  position: relative;
}

.CodeMirror-dialog > div {
  font-family: sans-serif;
  position: absolute;
  top: 0; left: 0; right: 0;
  background: @background-color-2;
  color: @content-color;
  border-bottom: 1px solid @bc-gray;
  .box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
  z-index: 1;
  padding: .5em .8em;
  overflow: hidden;
}

.CodeMirror-dialog input {
  font-family: sans-serif;
  border: 1px solid @content-color-weaker;
  outline: none;
  background: @background-color-3;
  width: 20em;
  margin: .3em .3em;
  color: inherit;
}

.CodeMirror-searching {
  background-color: inherit;
}

/*!
 * Brackets
 *
 * TODO: Copyright Notice
 *
 * This file first imports all of the shared LESS/CSS, and then defines
 * version-specific layout (e.g. layout for the App shell, or layout for
 * the In-Browser version on Firefox).
 *
 * Going forward, we may have different versions of this file for different
 * Versions (e.g. App, In-Browser, etc.)
 *
 * Anything that is general/reusable should be pushed up into a LESS file
 * in the "styles" directory. See "brackets_shared.less" for the organization
 *
 * Date: @DATE
 */

/* IMPORTANT: importing brackets_shared should be the first step in this file
 * This is so that imported CSS files (NOT LESS files) end up in the
 * right place
 */
@import "styles/brackets_shared.less";

/* Overall layout */

html, body {
    height: 100%;
    overflow: hidden;

    /* Turn off selection for UI elements */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

    /* And make sure we get a pointer cursor even over text */
    cursor: default;
}

body {
    .vbox;

    /* This appears to be necessary in Firefox when body is set to display: box. */
    width: 100%;

    .topbar {
        position: static;
    }
}

a, img {
    -webkit-user-drag: none;
}

.topbar-inner {
    /* We don't want to use the default .container in here,
       so we need to .clearfix the children. */
    .clearfix;

    .brand {
        .sane-box-model;
        margin-left: 0;
        width: 200px;
        padding-left: @base-padding;
        padding-right: @base-padding;
    }
}

.main-view {
    .hbox;
    .box-flex(1);

    .sidebar {
        .vbox;
        width: 200px;
    }

    .content {
        .vbox;
        .box-flex(1);
    }
}

.toolbar {
    /* make sure the shadow goes above other items */
    z-index: 2;
    .title {
        font-size: 1.2em;
        font-weight: bold;
        text-shadow: 0 1px @bc-white;
    }
    .buttons {
        float: right;
    }
}

#editorHolder {
    .vbox;
    .box-flex(1);

    .CodeMirror-lines {
        padding: @base-padding;
    }

    /* Placeholder shown when there is no editor open */
    #notEditor {
        .box-flex(1);
        .vbox;
        .box-pack(center);
        .box-align(center);
        background-color: @background-color-2;

        #notEditorContent {
            color: @background-color-1;
            font-size: 350px;
            line-height: normal;
            margin-top: -0.25em;
            text-shadow: 0 1px @bc-black;
            opacity: 0.30;
        }
    }
}

/* Project panel */

#projects .toolbar {
    .picker {
        .box;
        .box-flex(1);
    }
}

#project-file-area {
    .vbox;
    .box-flex(1);
    margin: 5px 0px 5px 0px;

    .project-file-header-area {
        padding: 4px 4px 2px 0px;

        span {
            font-weight: bold;
            vertical-align: middle;
        }
    }

    .file-list-divider {
        border-bottom: 1px solid #9a9a9a;
        box-shadow: 0px 1px #eeeeee;
    }

}

#open-files-container {
    .box-flex(0);
    margin: 0px;
    padding: 0px;
    overflow: auto;

    ul {
        list-style-type: none;
        margin: 0;

        a {
            color: black;
            text-decoration: none;
            margin-left: 26px;
        }

        li {
            padding: 2px 0px 2px 2px;

            position: relative; // so that children can be positioned absolute

            &:hover {
                background: #E7F4F9;
            }

            &.selected {
                #gradient.vertical(#5fa3e0, #0065be);

                a { color: white; }
            }
        }
    }
}

#project-files-container {
    .box-flex(1);
    margin: 0px 0px 0px 8px;
    padding: 0;
    overflow: auto; /* show scrollbars */

    ul { margin-top: 0; }
}

@spriteSize18: 18px;

/** Classes for icons from jsTreeSprites.png
*/
.jsTreeSprite {
    background-image: url("styles/images/jsTreeSprites.png");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: @spriteSize18;
    height: @spriteSize18;
}

.disclosure-arrow-opened {
    .jsTreeSprite;
    display: inline-block;
    background-position: -@spriteSize18 0px;
}

.disclosure-arrow-closed {
    .jsTreeSprite;
    display: inline-block;
    background-position: 0px 0px;
}

/** Classes for icons from bracketSprites.png
*/

.bracketSprite {
    background-image: url("styles/images/bracketsSprites.png");
    background-repeat: no-repeat;
    background-color: transparent;
    vertical-align: middle;
    width: @spriteSize18;
    height: @spriteSize18;
}

.file-status-icon {
    margin: 0px 0px 0px 10px;
    .bracketSprite;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 1px;

    &.dirty {
        background-position: 0 0;
    }

    &.canClose {
        background-position: -@spriteSize18 0;
    }

    &.canClose:hover {
        background-position: -@spriteSize18*2 0;
    }
}

/* Styles for the search dialog--this is temporary, only for debugging */

.CodeMirror-dialog {
  position: relative;
}

.CodeMirror-dialog > div {
  font-family: sans-serif;
  position: absolute;
  top: 0; left: 0; right: 0;
  background: @background-color-2;
  color: @content-color;
  border-bottom: 1px solid @bc-gray;
  .box-shadow(0 1px 3px 0 fadeout(@bc-black, 70%));
  z-index: 1;
  padding: .5em .8em;
  overflow: hidden;
}

.CodeMirror-dialog input {
  font-family: sans-serif;
  border: 1px solid @content-color-weaker;
  outline: none;
  background: @background-color-3;
  width: 20em;
  margin: .3em .3em;
  color: inherit;
}

.CodeMirror-searching {
  background-color: inherit;
}


Text overlay basic style

Text overlay basic 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/theworkers/HLTheme.git/'