Upload preview overflow auto with max height.

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.fixed-column {
  padding: 0;

  #previews {
    overflow: auto;
    max-height: 200px;
  }

  @height_iterations: 1000px;
  @height_difference: 150px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
      #previews {
        max-height: @index - @height_difference - 300px;
      }
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    border: solid 1px @color-grey-border;
    border-radius: @column-border-radius;
    background-color: @color-grey-background;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 5%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: darken(@color-grey-background, 5%);
          padding: 8px;
          position: relative;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover {
              color: darken(@color-grey-background, 70%);
            }
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          &:empty {
            display: none;
          }

          li {
            @padding: 5px;
            border-bottom: solid 1px @color-grey-border;
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);;
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @column-border-radius;
          border-top-right-radius: @column-border-radius;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @column-border-radius;
          border-bottom-right-radius: @column-border-radius;
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;
    border-radius: @column-border-radius;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}

@import 'constants.less';

@column-border-radius: 5px;
@activity-width: 500px;

.room-container {
  margin-left: 0;
  margin-right: 0;
}

.room-activity {
  & > h1 {
    border-bottom: solid 1px lighten(@color-grey-border, 10%);
    margin-top: 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 22px;
  }
}

.fixed-column {
  padding: 0;

  @height_iterations: 1000px;
  @height_difference: 150px;
  @min_height: @height_difference + 100px;
  .loopingClass (@index) when (@index > @min_height) {
    @media only screen and (min-width: 768px) and (max-height: @index) {
      height: @index - @height_difference;
    }
    .loopingClass(@index - 50px);
  }
  .loopingClass (0) {}
  .loopingClass (@height_iterations);

  @media only screen and (max-width: 768px) {
    min-height: 400px;
  }

  .column-table {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
    border: solid 1px @color-grey-border;
    border-radius: @column-border-radius;
    background-color: @color-grey-background;

    .column-table-row {
      @section-padding: 5px;
      display: table-row;

      .column-section {
        position: relative;
        padding: @section-padding;
        height: 100%;
        color: darken(@color-grey-background, 60%);
        border-top: solid 1px lighten(@color-grey-border, 5%);

        &, &:before, &:after {
          @box-sizing: content-box;
          -webkit-box-sizing: @box-sizing;
          -moz-box-sizing: @box-sizing;
          box-sizing: @box-sizing;
        }

        &:empty {
          display: none;
        }

        & > h1 {
          color: black;
          margin: -@section-padding;
          font-size: 17px;
          text-align: center;
          background-color: darken(@color-grey-background, 5%);
          padding: 8px;
          position: relative;

          .button {
            position: absolute;
            right: 6px;
            top: 6px;
            padding: 2px 8px;
            color: darken(@color-grey-background, 50%);

            &:hover {
              color: darken(@color-grey-background, 70%);
            }
          }
        }

        & > ul  {
          list-style: none;
          margin: -@section-padding;
          padding: 0;

          &:empty {
            display: none;
          }

          li {
            @padding: 5px;
            border-bottom: solid 1px @color-grey-border;
            padding: @padding;
            position: relative;
            word-break: break-word;
            margin: 0;

            &:last-child {
              border-bottom-width: 0;
            }

            .background {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: darken(@color-grey-background, 60%);;
              opacity: 0.1;
              z-index: 0;
            }

            .foreground {
              position: relative;
              background: none;
              z-index: 1;
            }

            .error-message {
              margin: auto -@padding;
              padding: @padding;
              color: red;

              &:empty {
                display: none;
              }
            }
          }
        }
      }

      &.stretch {
        height: 100%;

        .column-section {
          overflow-x: hidden;
          overflow-y: auto;

          & > ul {
            li:last-child {
              border-bottom-width: 1px;
            }
          }
        }
      }

      &:first-child {
        .column-section, h1 {
          border-top: none;
          border-top-left-radius: @column-border-radius;
          border-top-right-radius: @column-border-radius;
        }
      }

      &:last-child {
        .column-section, h1 {
          border-bottom-left-radius: @column-border-radius;
          border-bottom-right-radius: @column-border-radius;
        }
      }
    }
  }

  .drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.9);
    @shadow: inset 0 0 40px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
    pointer-events: none;
    z-index: 20;
    border-radius: @column-border-radius;

    opacity: 0;
    @fadetime: .1s;
    transition: opacity @fadetime ease-in-out;
    -moz-transition: opacity @fadetime ease-in-out;
    -webkit-transition: opacity @fadetime ease-in-out;

    & > div {
      @height: 100px;
      @width: 200px;

      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: @width;
      height: @height;
      margin-top: -(@height/2);
      margin-left: -(@width/2);
      text-align: center;
      vertical-align: center;
      line-height: @height;
      font-size: 20px;
      font-weight: 200;
      color: darken(@color-grey-background, 80%);
      opacity: 0.8;
    }
  }

  &.dragging .drag-overlay {
    opacity: 1;
  }

  @media only screen and (max-width: 767px) {
    height: 400px;
    margin: 10px;
  }
}

#btn-upload {
  padding: 4px;
  width: 100%;
}


updated styles to footer menu tablet width

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


Updated css for bookmark scrollable.

Updated css for bookmark scrollable.

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/topics-im/topics.git/'


Removed duplicated scroll in footer

Removed duplicated scroll in footer

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


#2147 fix sidebar not correctly overflowing when taller than page

fatal: unable to access 'https://github.com/dieface/Semantic-UI.git/': The requested URL returned error: 403


Fixes weird skew in media grid

Fixes weird skew in media grid

.umb-media-grid {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
   margin-bottom: 30px;
}

.umb-media-grid__item {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    justify-content: center;

    align-content: center;
    align-items: center;
    align-self: stretch;

    margin: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);

    transition: box-shadow 100ms;
}

.umb-media-grid__item.-file {
    background-color: @grayLighter;
}

.umb-media-grid__item.-selected {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
}

.umb-media-grid__item:hover {
   text-decoration: none;
}

.umb-media-grid__item-image {
   max-width: 100% !important;
   height: auto;
   position: relative;
}

.umb-media-grid__item-image-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
}

.umb-media-grid__image-background {
    content: "";
    background: url("../img/checkered-background.png");
    background-repeat: repeat;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.umb-media-grid__item-overlay {
   display: flex;
   opacity: 0;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
   padding: 5px 10px;
   box-sizing: border-box;
   font-size: 11px;
   overflow: hidden;
   color: white;
   white-space: nowrap;
   background: @blue;
   transition: opacity 150ms;
}

.umb-media-grid__item.-file .umb-media-grid__item-overlay {
    opacity: 1;
    color: @gray;
    background: @grayLighter;
}

.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
    color: @white;
    background: @blue;
}

.umb-media-grid__info {
    margin-right: 5px;
}

.umb-media-grid__item-overlay.-locked {
    opacity: 1;
}

.umb-media-grid__item:hover .umb-media-grid__item-overlay {
   opacity: 1;
}

.umb-media-grid__item-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.umb-media-grid__item-icon {
   color: @gray;
   position: absolute;
   top: 45%;
   left: 50%;
   font-size: 40px !important;
   transform: translate(-50%,-50%);
}

.umb-media-grid__checkmark {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid #ffffff;
    background: @blue;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-left: 7px;
    transition: background 100ms;
}

.umb-media-grid {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
   margin-bottom: 30px;
}

.umb-media-grid__item {
   margin: 10px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   display: flex;
   align-content: center;
   align-items: center;
   align-self: stretch;
   box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
   justify-content: center;
   transition: box-shadow 100ms;
}

.umb-media-grid__item.-file {
    background-color: @grayLighter;
}

.umb-media-grid__item.-selected {
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.35);
}

.umb-media-grid__item:hover {
   text-decoration: none;
}

.umb-media-grid__item-image {
   max-width: 100% !important;
   height: auto;
   position: relative;
}

.umb-media-grid__item-image-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
}

.umb-media-grid__image-background {
    content: "";
    background: url("../img/checkered-background.png");
    background-repeat: repeat;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.umb-media-grid__item-overlay {
   display: flex;
   opacity: 0;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
   padding: 5px 10px;
   box-sizing: border-box;
   font-size: 11px;
   overflow: hidden;
   color: white;
   white-space: nowrap;
   background: @blue;
   transition: opacity 150ms;
}

.umb-media-grid__item.-file .umb-media-grid__item-overlay {
    opacity: 1;
    color: @gray;
    background: @grayLighter;
}

.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay,
.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay {
    color: @white;
    background: @blue;
}

.umb-media-grid__info {
    margin-right: 5px;
}

.umb-media-grid__item-overlay.-locked {
    opacity: 1;
}

.umb-media-grid__item:hover .umb-media-grid__item-overlay {
   opacity: 1;
}

.umb-media-grid__item-name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.umb-media-grid__item-icon {
   color: @gray;
   position: absolute;
   top: 45%;
   left: 50%;
   font-size: 40px !important;
   transform: translate(-50%,-50%);
}

.umb-media-grid__checkmark {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid #ffffff;
    background: @blue;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-left: 7px;
    transition: background 100ms;
}


Basic styling for embedded images

Basic styling for embedded images

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


map primo id name to css  (lightbox thing)

fatal: unable to access 'https://github.com/Det-Kongelige-Bibliotek/rex.git/': The requested URL returned error: 403


add alert styles

add alert styles

@import "../defaults/spacing";
@import "../variables/colors";

.alert-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .alert-component {
        width: 25%;
        padding: @base-spacing-unit;
        background-color: @color-white;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

        .options {
            display: flex;
            justify-content: space-between;

            button {
                width: 49%;
                padding: @base-spacing-unit--half;
                cursor: pointer;
            }
        }
    }
}

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


Moves left spacing of 1st tertiary link up

The spacing of the first element of a tertiary navigation container relies on a first-of-type pseudo-element. This leads to layout inconsistencies when that first element is hidden. The margin is still applied but since the element is not displayed, it has no effect. Instead, the spacing is done now using left padding on the container, with the advantage of abstraction from whether the first element in the markup is displayed or not.

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


har fjernet display block på .note

har fjernet display block på .note

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/Det-Kongelige-Bibliotek/rex.git/'


Header added

Header added

header {
    background-color: @background-seconday;
    color: @text-seconday;
    padding: 3em 0;
    margin-bottom: 1em;
    h1 {
        font-size: 2.5em;
        font-weight: bold;
        margin: 0;
        line-height: 0.6em;
    }
    p {
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    nav {
        text-align: right;
    }
    ul {
        list-style: none;
    }
    li {
        display: inline-block;
        margin: 0 0.4em;
    }
    a {
        color: @text-seconday;
        font-size: 1.5em;
        padding: 0.3em;
        &.active {
            font-weight: bold;
            border-top: 2px solid @text-seconday;
        }
    }
    .slogan {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        h2 {
            margin: 1.5em auto 1em;
        }
        a {
            .rounded(0.6em);
            .transition(300ms, ease-out);
            border: 2px solid @text-seconday;
            padding: 0.7em 1em;
            font-weight: lighter;
            &:hover {
                background-color: @text-seconday;
                color: @background-seconday;
            }
        }
    }
}

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


fix uppercase file name

fix uppercase file name

fatal: remote error: upload-pack: not our ref 5058e7b6867bd9e5ad779e464ca94b70d79b52e8
fatal: the remote end hung up unexpectedly


Deleted debris file header.less

Deleted debris file header.less


Update variables.less

Update variables.less

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


border.radius 2px, width is 100% and label color is red

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


Update style.less

Update style.less

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


Update style.less

Update style.less

fatal: unable to access 'https://github.com/prasadkblr/direct-channel-dashboard.git/': The requested URL returned error: 403


make property placeholder smaller

make property placeholder smaller

.editors-document-type-container{

  /*
  .handle{visibility: hidden;}
  .item-title{color: @blackLight; text-transform: none; font-size: 16px; padding-right: 30px;}
  .item-alias{color: @grayLight; font-weight: 400; font-size: 14px;}
  */

  li{list-style: none}

  .fieldset-title{
	border-bottom: 1px solid @grayLight;
	border-top: 1px solid @grayLight;
	background: @grayLighter;
	font-size: 16px;
	text-transform: none;
	padding: 7px 10px 7px 10px;
	margin-left: -30px;
	margin-right: -10px;
	font-weight: 400
  }

  .editors-document-type-sidebar{
	padding: 20px;
	top: 0;
	left: 0;
	width: 340px;
	bottom: 0;
	overflow: auto;
	border-right: 1px solid #d9d9d9;
	background: rgba(248, 248, 248, 0.06);
	position: absolute;
	display: none;
  }

  .no-style-list {
	padding: 0;
	margin: 0;
	list-style: none;
  }

  /* ---------- TABS ---------- */

  .edt-tab{
    margin: 50px 0 0 0;
    min-height: 145px;
    border: 2px solid #CCCCCC;
    padding: 0;
    //box-shadow: 0 3px 0 0 rgba(0,0,0,0.1);
    border-radius: 0 10px 10px 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    &:hover {
      .edt-tab-actions {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0.5s; /* Safari */
        transition: opacity 0.5s;
      }
    }
    .edt-tab-actions {
      position: absolute;
      top: 5px;
      right: 5px;
      visibility: hidden;
      opacity: 0;
      z-index: 10;
      .tab-action {
        display: inline-block;
      }
    }
  }

  .tab-title-wrapper {
    position: absolute;
    left: -2px;
    top: -45px;
    .tab-title{
      display: inline-block;
      padding: 5px 10px 0 10px;
      height: 38px;
      background: white;
      border: 2px solid #CCCCCC;
      border-bottom: none;
      border-radius: 10px 10px 0 0;
      font-weight: bold;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      .tab-title-input {
        border-color: transparent;
        background: transparent;
        min-width: 80px;
        font-weight: bold;
        color: #515151;
        margin-bottom: 0;
        height: 25px !important;
        &:hover {
          border-color: @inputBorder;
        }
        &.tab-title-placeholder {
          border: 1px dashed #979797 !important;
        }
      }
      .tab-title-text {
        position: relative;
        top: 7px;
        font-size: 14px;
      }
    }
  }

  .edt-tab-inherited-from {
    font-size: 13px;
    color: @grayLight;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: 2px;
    .icon {
      font-size: 15px;
    }
  }

  .edt-tab-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    color: #00759D;
  }

  // tab is in init state
  .edt-tab.tab-state-init {
    cursor: pointer;
    border: 1px dashed @grayLight;
    //box-shadow: none !important;
    .tab-title-wrapper {
      left: -1px;
      top: -44px;
    }
    .tab-title{
      border: 1px dashed @grayLight;
      border-bottom: none;
      width: 70px;
    }
    &:hover {
      border-color: @blueLight;
      .tab-title {
        border-color: @blueLight;
      }
    }
  }

  // tab is active
  .edt-tab.tab-state-active {
    border-color: @blue;
    .tab-title{
      border-color: @blue;
    }
  }

  // tab is inactive
  .edt-tab.tab-state-inactive {

  }

  // tab is inherited from compositions
  .edt-tab.tab-is-inherited {
    background: #FDFDFD;
    border-color: #F2F2F2;
    //box-shadow: none;

    .tab-title{
      border-color: #F2F2F2;
      background: #FDFDFD;
    }
  }

  /* ---------- PROPERTY ---------- */

  .edt-property-group{
    position: relative;
    padding: 10px 10px 0 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  .edt-property-list {
    min-height: 50px;
  }

  .edt-property{
    position: relative;
    display: flex;
    flex-flow: row;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin-bottom: 10px;
    padding: 10px 0;
    border: 1px solid transparent;
    border-radius: 5px;
    &:hover {
      border: 1px solid @inputBorder;
    }
  }

  .edt-property-meta {
    width: 300px;
    margin-right: 50px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    .property-meta-group {
      display: inline-block;
    }
    @media screen and (max-width: 1500px) {
      width: 200px;
    }
  }

  .edt-property-preview{
    flex: 2;
    height: 50px;
    overflow: hidden;
    position: relative;
    padding: 25px 10px;
    &:hover {
      cursor: pointer;
    }
    &:focus {
      outline: none;
    }
  }

  .edt-property-preview:after {
    content:"";
    position:absolute;
    top:0px;
    left:0;
    height:100%;
    width:100%;
    background: @grayLighter;
    opacity: 0.3;
  }

  .edt-property-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 10px;
    background: url("../img/checkered-background.png");
    opacity: 0.2;
    .overlay-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: @grayDark;
      display: none;
    }
  }

  .edt-property-preview-label{
    font-size: 11px;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    z-index: 15;
    background: @grayLighter;
    padding: 3px;
    line-height: 12px;
    opacity: 0.8
  }

  .edt-property-actions {
    width: 50px;
    text-align: center;
    margin: 15px 0 0 0;
    .property-action {
      margin: 0 0 5px 0;
      display: block;
      &:hover {
        text-decoration: none;
      }
      .icon {
        font-size: 15px;
        color: @gray;
      }
    }
  }

  // property state init - property placeholder
  .edt-property.property-state-init {
    background: #ffffff;
    border: 1px dashed @grayLight;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      border-color: @blueLight;
    }

    .edt-property-meta {
      padding: 0 0 0 10px;
    }

    .edt-property-preview {
      background: @grayLight;
      height: 0;
    }

  }

  .edt-property.property-is-inherited {
    background: #FDFDFD;
    border: transparent;
    //border: 1px solid #F2F2F2;
    &:hover {
      border: transparent;
    }
  }

  .edt-property-inherited-from {
    font-size: 11px;
    background-color: #d9d9d9;
    margin-left: 5px;
    position: absolute;
    right: 0;
    z-index: 100;
    padding: 0 10px 0 5px;
    top: 0;
  }

  /* ---------- SORTING ---------- */

  // sorting tabs
  .editors-document-type-canvas.is-in-sorting-mode {
    .edt-tab {
      min-height: 0;
      cursor: move;
    }

    .edt-tab.tab-is-inherited {
      cursor: auto;
    }

  }

  // sorting properties

  .editors-document-type-canvas.is-in-sorting-mode {

    .edt-property {
      height: 40px;
      margin-bottom: 10px;
      background: #E9E9E9;
      color: @grayDarker;
      border-radius: @baseBorderRadius;
      padding: 0;
      cursor: move;
      border: none;
    }

    .edt-property-meta {
      padding: 10px 0 0 10px;
      width: auto;
      flex: 1;
      .icon {
        font-size: 15px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }

    .tab-title{
      .icon {
        font-size: 15px;
        position: relative;
        top: 4px;
      }
    }

    .edt-property-preview {
      display: none;
    }

    .edt-property-actions {
      display: none;
    }

    .edt-property.property-state-init {
      display: none;
    }

    .edt-property.property-is-inherited {
      cursor: auto;
      .icon-navigation {
        visibility: hidden;
      }
      .edt-property-inherited-from {
        text-align: right;
        float: right;
      }
    }

  }

  // sorting placeholders
  .ui-sortable-tabs-placeholder {
    background: transparent;
    border: 2px solid #E9E9E9;
    margin: 0 0 70px 0;
    border-radius: 10px;
  }

  .ui-sortable-properties-placeholder {
    background: transparent;
    border: 2px solid #E9E9E9;
    margin-bottom: 10px;
  }

  /* ---------- INPUTS ---------- */

  .invisible-field {
    input,
    textarea {
      border-color: transparent;
      background: transparent;
    }
  }

  .edt-property-meta-alias {
    input {
      font-size: 12px;
      color: @gray;
      margin-bottom: 0;
      height: 10px;
    }
  }

  .edt-property-meta-label {
    input {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 0;
      color: @grayDarker;
    }
  }

  .edt-property-meta-description {
    textarea {
      font-size: 12px;
      color: @grayDark;
    }
  }

  /* ---------- PLACEHOLDERS ----------- */

  .placeholder-text {
    color: @gray;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
  }

  .placeholder-input-small {
    background: @grayLight;
    display: block;
    height: 5px;
    margin-bottom: 5px;
    width: 25%;
  }

  .placeholder-input {
    background: @grayLight;
    display: block;
    height: 10px;
    margin-bottom: 5px;
  }

  .placeholder-text-group {
    .placeholder-text-line-full {
      background: @grayLight;
      display: block;
      height: 3px;
      margin-bottom: 3px;
    }
    .placeholder-text-line-short {
      background: @grayLight;
      display: block;
      height: 3px;
      margin-bottom: 3px;
      width: 75%;
    }
  }

}

/* ---------- DIALOGS ---------- */

.content-type-editor-dialog.edit-property-settings {

  .title-wrapper {
    float: left;
    width: 300px;
    input.input-style-underline {
      border: none;
      //border-bottom: 1px solid #cccccc;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 0 0 0;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      &:focus {
        outline: none;
      }
    }
    .alias {
      font-size: 13px;
      color: @grayLight;
    }
  }

  .editor-placeholder {
    border: 1px dashed @grayLight;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: block;
    border-radius: 5px;
    color: @gray;
    font-weight: bold;
    font-size: 13px;
    &:hover {
      text-decoration: none;
    }
  }

  .editor {
    margin-bottom: 10px;
    .editor-icon-wrapper {
      border: 1px solid @grayLight;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border-radius: 5px;
      float: left;
      margin-right: 20px;
      &:hover {
        text-decoration: none;
        border-color: @blueLight;
      }
      .icon {
        font-size: 26px;
      }
    }
    .editor-details {
      float: left;
      margin-top: 10px;
      .editor-name {
        font-weight: bold;
      }
      .editor-editor {
        font-size: 12px;
      }
    }
  }

  textarea.description,
  textarea.pattern {
    width: 100%;
    box-sizing: border-box;
    border: none;
  }

  .checkbox {
    padding-left: 0;
    margin-bottom: 20px;
  }

  .umb-editor {
    width: 100%;
  }

}

/* ---------- TEMPLATES GRID ------------ */

.templates-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.template {
  width: 125px;
  height: 150px;
  padding: 20px;
  background: #f8f8f8;
  border: 1px solid #CCCCCC;
  text-align: center;
  margin: 0 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  animation: fadeIn 0.5s;
  position: relative;
}

.template .template-content .icon {
  font-size: 50px;
  color: #d9d9d9;
}

.template .remove-template {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.template .template-default-label {
  font-size: 11px;
  color: #d9d9d9;
}

.template .link-blue {
  color: @blue;
}

.template.template-default {
  border-width: 2px;
}

.template.template-placeholder {
  border: 1px dashed #d9d9d9;
  background: none;
  cursor: pointer;
}

.template.template-placeholder .template-name {
  color: @blue;
  font-weight: bold;
}

/* ---------- CHILD NODE TREE ---------- */

.node-tree {

  .child-notes-wrapper {
    margin-left: 30px;
  }

  .node {
    background: @grayLighter;
    padding: 5px 15px;
    margin-bottom: 5px;
    min-width: 300px;
    display: flex;
    border-radius: 5px;
    animation: fadeIn 0.5s;
  }

  .node-description {
    flex: 1;
  }

  .node-actions {
    flex: 0 0 50px;
    text-align: right;
  }

  .node.node-parent {
    background: #f1f1f1;
    padding-top: 10px;
    padding-bottom: 10px;
    .node-icon-wrapper {
      display: inline-block;
      width: 20px;
    }
    .node-name {
      font-weight: bold;
    }
  }

  .node.node-child {
    .node-icon-wrapper {
      display: inline-block;
      width: 15px;
    }
    .node-name {
      font-size: 12px;
    }
    .icon-trash {
      cursor: pointer;
    }
  }

  .node-placeholder {
    border: 1px dashed @grayLight;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    padding: 10px;
    .node-placeholder-text {
      color: @blue;
      font-weight: bold;
    }
  }

  .node-select {
    margin-bottom: 0;
    margin-right: 10px;
    float: left;
  }

}

/* ---------- DIALOG ---------- */

.dialog-grid {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.dialog-grid-element {
  flex: 0 0 80px;
  height: 80px;
  padding: 5px;
  overflow: hidden;
  font-size: 11px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dialog-grid-element:hover {
  background: #2e8aea;
  color: white;
  text-decoration: none;
}

.dialog-grid-element:hover .icon {
  color: white;
}

.dialog-grid-element .icon {
  font-size: 30px;
  color: #999;
  display: block;
  margin-bottom: 10px;
}

.editors-document-type-container{

  /*
  .handle{visibility: hidden;}
  .item-title{color: @blackLight; text-transform: none; font-size: 16px; padding-right: 30px;}
  .item-alias{color: @grayLight; font-weight: 400; font-size: 14px;}
  */

  li{list-style: none}

  .fieldset-title{
	border-bottom: 1px solid @grayLight;
	border-top: 1px solid @grayLight;
	background: @grayLighter;
	font-size: 16px;
	text-transform: none;
	padding: 7px 10px 7px 10px;
	margin-left: -30px;
	margin-right: -10px;
	font-weight: 400
  }

  .editors-document-type-sidebar{
	padding: 20px;
	top: 0;
	left: 0;
	width: 340px;
	bottom: 0;
	overflow: auto;
	border-right: 1px solid #d9d9d9;
	background: rgba(248, 248, 248, 0.06);
	position: absolute;
	display: none;
  }

  .no-style-list {
	padding: 0;
	margin: 0;
	list-style: none;
  }

  /* ---------- TABS ---------- */

  .edt-tab{
    margin: 50px 0 0 0;
    min-height: 145px;
    border: 2px solid #CCCCCC;
    padding: 0;
    //box-shadow: 0 3px 0 0 rgba(0,0,0,0.1);
    border-radius: 0 10px 10px 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    &:hover {
      .edt-tab-actions {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0.5s; /* Safari */
        transition: opacity 0.5s;
      }
    }
    .edt-tab-actions {
      position: absolute;
      top: 5px;
      right: 5px;
      visibility: hidden;
      opacity: 0;
      z-index: 10;
      .tab-action {
        display: inline-block;
      }
    }
  }

  .tab-title-wrapper {
    position: absolute;
    left: -2px;
    top: -45px;
    .tab-title{
      display: inline-block;
      padding: 5px 10px 0 10px;
      height: 38px;
      background: white;
      border: 2px solid #CCCCCC;
      border-bottom: none;
      border-radius: 10px 10px 0 0;
      font-weight: bold;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      .tab-title-input {
        border-color: transparent;
        background: transparent;
        min-width: 80px;
        font-weight: bold;
        color: #515151;
        margin-bottom: 0;
        height: 25px !important;
        &:hover {
          border-color: @inputBorder;
        }
        &.tab-title-placeholder {
          border: 1px dashed #979797 !important;
        }
      }
      .tab-title-text {
        position: relative;
        top: 7px;
        font-size: 14px;
      }
    }
  }

  .edt-tab-inherited-from {
    font-size: 13px;
    color: @grayLight;
    display: inline-block;
    margin-left: 5px;
    position: relative;
    top: 2px;
    .icon {
      font-size: 15px;
    }
  }

  .edt-tab-center-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    color: #00759D;
  }

  // tab is in init state
  .edt-tab.tab-state-init {
    cursor: pointer;
    border: 1px dashed @grayLight;
    //box-shadow: none !important;
    .tab-title-wrapper {
      left: -1px;
      top: -44px;
    }
    .tab-title{
      border: 1px dashed @grayLight;
      border-bottom: none;
      width: 70px;
    }
    &:hover {
      border-color: @blueLight;
      .tab-title {
        border-color: @blueLight;
      }
    }
  }

  // tab is active
  .edt-tab.tab-state-active {
    border-color: @blue;
    .tab-title{
      border-color: @blue;
    }
  }

  // tab is inactive
  .edt-tab.tab-state-inactive {

  }

  // tab is inherited from compositions
  .edt-tab.tab-is-inherited {
    background: #FDFDFD;
    border-color: #F2F2F2;
    //box-shadow: none;

    .tab-title{
      border-color: #F2F2F2;
      background: #FDFDFD;
    }
  }

  /* ---------- PROPERTY ---------- */

  .edt-property-group{
    position: relative;
    padding: 10px 10px 0 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  .edt-property-list {
    min-height: 50px;
  }

  .edt-property{
    position: relative;
    display: flex;
    flex-flow: row;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin-bottom: 10px;
    padding: 10px 0;
    border: 1px solid transparent;
    border-radius: 5px;
    &:hover {
      border: 1px solid @inputBorder;
    }
  }

  .edt-property-meta {
    width: 300px;
    margin-right: 50px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    .property-meta-group {
      display: inline-block;
    }
    @media screen and (max-width: 1500px) {
      width: 200px;
    }
  }

  .edt-property-preview{
    flex: 2;
    height: 50px;
    overflow: hidden;
    position: relative;
    padding: 25px 10px;
    &:hover {
      cursor: pointer;
    }
    &:focus {
      outline: none;
    }
  }

  .edt-property-preview:after {
    content:"";
    position:absolute;
    top:0px;
    left:0;
    height:100%;
    width:100%;
    background: @grayLighter;
    opacity: 0.3;
  }

  .edt-property-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 10px;
    background: url("../img/checkered-background.png");
    opacity: 0.2;
    .overlay-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: @grayDark;
      display: none;
    }
  }

  .edt-property-preview-label{
    font-size: 11px;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    z-index: 15;
    background: @grayLighter;
    padding: 3px;
    line-height: 12px;
    opacity: 0.8
  }

  .edt-property-actions {
    width: 50px;
    text-align: center;
    margin: 15px 0 0 0;
    .property-action {
      margin: 0 0 5px 0;
      display: block;
      &:hover {
        text-decoration: none;
      }
      .icon {
        font-size: 15px;
        color: @gray;
      }
    }
  }

  // property state init - property placeholder
  .edt-property.property-state-init {
    background: #ffffff;
    border: 1px dashed @grayLight;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      border-color: @blueLight;
    }

    .edt-property-meta {
      padding: 0 0 0 10px;
    }

    .edt-property-preview {
      background: @grayLight;
    }

  }

  .edt-property.property-is-inherited {
    background: #FDFDFD;
    border: transparent;
    //border: 1px solid #F2F2F2;
    &:hover {
      border: transparent;
    }
  }

  .edt-property-inherited-from {
    font-size: 11px;
    background-color: #d9d9d9;
    margin-left: 5px;
    position: absolute;
    right: 0;
    z-index: 100;
    padding: 0 10px 0 5px;
    top: 0;
  }

  /* ---------- SORTING ---------- */

  // sorting tabs
  .editors-document-type-canvas.is-in-sorting-mode {
    .edt-tab {
      min-height: 0;
      cursor: move;
    }

    .edt-tab.tab-is-inherited {
      cursor: auto;
    }

  }

  // sorting properties

  .editors-document-type-canvas.is-in-sorting-mode {

    .edt-property {
      height: 40px;
      margin-bottom: 10px;
      background: #E9E9E9;
      color: @grayDarker;
      border-radius: @baseBorderRadius;
      padding: 0;
      cursor: move;
      border: none;
    }

    .edt-property-meta {
      padding: 10px 0 0 10px;
      width: auto;
      flex: 1;
      .icon {
        font-size: 15px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }

    .tab-title{
      .icon {
        font-size: 15px;
        position: relative;
        top: 4px;
      }
    }

    .edt-property-preview {
      display: none;
    }

    .edt-property-actions {
      display: none;
    }

    .edt-property.property-state-init {
      display: none;
    }

    .edt-property.property-is-inherited {
      cursor: auto;
      .icon-navigation {
        visibility: hidden;
      }
      .edt-property-inherited-from {
        text-align: right;
        float: right;
      }
    }

  }

  // sorting placeholders
  .ui-sortable-tabs-placeholder {
    background: transparent;
    border: 2px solid #E9E9E9;
    margin: 0 0 70px 0;
    border-radius: 10px;
  }

  .ui-sortable-properties-placeholder {
    background: transparent;
    border: 2px solid #E9E9E9;
    margin-bottom: 10px;
  }

  /* ---------- INPUTS ---------- */

  .invisible-field {
    input,
    textarea {
      border-color: transparent;
      background: transparent;
    }
  }

  .edt-property-meta-alias {
    input {
      font-size: 12px;
      color: @gray;
      margin-bottom: 0;
      height: 10px;
    }
  }

  .edt-property-meta-label {
    input {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 0;
      color: @grayDarker;
    }
  }

  .edt-property-meta-description {
    textarea {
      font-size: 12px;
      color: @grayDark;
    }
  }

  /* ---------- PLACEHOLDERS ----------- */

  .placeholder-text {
    color: @gray;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
  }

  .placeholder-input-small {
    background: @grayLight;
    display: block;
    height: 10px;
    margin-bottom: 5px;
    width: 25%;
  }

  .placeholder-input {
    background: @grayLight;
    display: block;
    height: 20px;
    margin-bottom: 5px;
  }

  .placeholder-text-group {
    .placeholder-text-line-full {
      background: @grayLight;
      display: block;
      height: 5px;
      margin-bottom: 5px;
    }
    .placeholder-text-line-short {
      background: @grayLight;
      display: block;
      height: 5px;
      margin-bottom: 5px;
      width: 75%;
    }
  }

}

/* ---------- DIALOGS ---------- */

.content-type-editor-dialog.edit-property-settings {

  .title-wrapper {
    float: left;
    width: 300px;
    input.input-style-underline {
      border: none;
      //border-bottom: 1px solid #cccccc;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 0 0 0;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      &:focus {
        outline: none;
      }
    }
    .alias {
      font-size: 13px;
      color: @grayLight;
    }
  }

  .editor-placeholder {
    border: 1px dashed @grayLight;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: block;
    border-radius: 5px;
    color: @gray;
    font-weight: bold;
    font-size: 13px;
    &:hover {
      text-decoration: none;
    }
  }

  .editor {
    margin-bottom: 10px;
    .editor-icon-wrapper {
      border: 1px solid @grayLight;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border-radius: 5px;
      float: left;
      margin-right: 20px;
      &:hover {
        text-decoration: none;
        border-color: @blueLight;
      }
      .icon {
        font-size: 26px;
      }
    }
    .editor-details {
      float: left;
      margin-top: 10px;
      .editor-name {
        font-weight: bold;
      }
      .editor-editor {
        font-size: 12px;
      }
    }
  }

  textarea.description,
  textarea.pattern {
    width: 100%;
    box-sizing: border-box;
    border: none;
  }

  .checkbox {
    padding-left: 0;
    margin-bottom: 20px;
  }

  .umb-editor {
    width: 100%;
  }

}

/* ---------- TEMPLATES GRID ------------ */

.templates-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.template {
  width: 125px;
  height: 150px;
  padding: 20px;
  background: #f8f8f8;
  border: 1px solid #CCCCCC;
  text-align: center;
  margin: 0 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  animation: fadeIn 0.5s;
  position: relative;
}

.template .template-content .icon {
  font-size: 50px;
  color: #d9d9d9;
}

.template .remove-template {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.template .template-default-label {
  font-size: 11px;
  color: #d9d9d9;
}

.template .link-blue {
  color: @blue;
}

.template.template-default {
  border-width: 2px;
}

.template.template-placeholder {
  border: 1px dashed #d9d9d9;
  background: none;
  cursor: pointer;
}

.template.template-placeholder .template-name {
  color: @blue;
  font-weight: bold;
}

/* ---------- CHILD NODE TREE ---------- */

.node-tree {

  .child-notes-wrapper {
    margin-left: 30px;
  }

  .node {
    background: @grayLighter;
    padding: 5px 15px;
    margin-bottom: 5px;
    min-width: 300px;
    display: flex;
    border-radius: 5px;
    animation: fadeIn 0.5s;
  }

  .node-description {
    flex: 1;
  }

  .node-actions {
    flex: 0 0 50px;
    text-align: right;
  }

  .node.node-parent {
    background: #f1f1f1;
    padding-top: 10px;
    padding-bottom: 10px;
    .node-icon-wrapper {
      display: inline-block;
      width: 20px;
    }
    .node-name {
      font-weight: bold;
    }
  }

  .node.node-child {
    .node-icon-wrapper {
      display: inline-block;
      width: 15px;
    }
    .node-name {
      font-size: 12px;
    }
    .icon-trash {
      cursor: pointer;
    }
  }

  .node-placeholder {
    border: 1px dashed @grayLight;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    padding: 10px;
    .node-placeholder-text {
      color: @blue;
      font-weight: bold;
    }
  }

  .node-select {
    margin-bottom: 0;
    margin-right: 10px;
    float: left;
  }

}

/* ---------- DIALOG ---------- */

.dialog-grid {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.dialog-grid-element {
  flex: 0 0 80px;
  height: 80px;
  padding: 5px;
  overflow: hidden;
  font-size: 11px;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.dialog-grid-element:hover {
  background: #2e8aea;
  color: white;
  text-decoration: none;
}

.dialog-grid-element:hover .icon {
  color: white;
}

.dialog-grid-element .icon {
  font-size: 30px;
  color: #999;
  display: block;
  margin-bottom: 10px;
}


fix the close buttons on the new dialogs

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/brian-rowe/krossr.git/'


退课原因优化

退课原因优化

学习中心-退课

fatal: unable to access 'https://github.com/XUEJS/xue-project.git/': The requested URL returned error: 403


Create dialog.less

Create dialog.less

.dialog {
	position: fixed;
	top: 0;
	z-index: 11;
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	background-color: #fff;
	-webkit-transition: -webkit-transform .35s,opacity 1ms .35s;
	-moz-transition: -moz-transform .35s,opacity 1ms .35s;
	transition: transform .35s,opacity 1ms .35s;
	-webkit-transform: translate3d(0,100%,0);
	-ms-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	left: 0;
	overflow: scroll;

	&.active {
		height: 100%;
		opacity: 1;
		-webkit-transition: -webkit-transform .25s;
		-moz-transition: -moz-transform .25s;
		transition: transform .25s;
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}

@media all and (min-width: 768px) {
	.dialog {
		max-width: 800px;
		margin: 0 auto;
		position: relative;
		border-radius: 3px;
		min-height: 50px;
		height: auto !important;
		z-index: 1050;
		width: auto !important;
		webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
  		box-shadow: 0 5px 15px rgba(0,0,0,.5);
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
		outline: 0;
		top: 10%;
		padding-bottom: 30px;

		& > .navbar {
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
	}

	.dialog-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000;
		display: none;
		z-index: 0;

		&.in {
			filter: alpha(opacity=50);
			opacity: .5;
			display: block;
			z-index: 9;
		}
	}

	.fade {
		opacity: 0;
		-webkit-transition: opacity .15s linear;
		-o-transition: opacity .15s linear;
		transition: opacity .15s linear;
	}
}

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


Create mixins.less

Create mixins.less

// lesshat
@import "mixins/lesshat.less";

// Grid
@import "mixins/grid.less";

// Core
@import "mixins/core.less";

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


Create mixins.less

Create mixins.less

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


set navbar hover color

set navbar hover color

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


Removes @gutter-width argument from .nested-col-group().

// The following variables can be overridden in your application's stylesheet.

// Grid's max width in px.
@wrapper-width: 1200px;

// Width between columns.
@gutter-width: 30px;

// Total number of columns.
@total-columns: 12;

// Column blocks have a bg color if set to true.
@debug: false;

// A wrapper holds one or more .column() elements.

.wrapper( @wrapper-width: @wrapper-width ) {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  max-width: @wrapper-width;
  padding: 0 ( @gutter-width / 2 );
  margin: 0 auto;
  position: relative;
  clear: both;

  .lt-ie8 & {
    // Clearfix hack for IE 6/7 only
    *zoom: 1;
    // If you want IE 6/7 support, ensure boxsizing.htc is in the same dir as your stylesheet.
    // Read more: https://github.com/Schepp/box-sizing-polyfill
    *behavior: url(boxsizing.htc);
  }

}

// A container for columns to pull the left and right margins out.

.nested-col-group() {
  margin-left: ( @gutter-width / 2 ) * -1;
  margin-right: ( @gutter-width / 2 ) * -1;
}

// Column()s hold actual content

.col {
  display: inline-block;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  // borders used for fixed gutters
  border: solid transparent;
  border-width: 0 (@gutter-width / 2);

  margin-right: -0.25em; // Remove whitespace caused by setting display to inline-block

  vertical-align: top;

  // Tweaks are necessary for IE, of course.
  // This creates a whole heap of extra rules, and thus should probably be pulled out
  // into a separate stylesheet that gets loaded via conditional comment.
  .ie & {
    margin-right: -0.26em;
  }
  .lt-ie8 & {
    // hack inline-block into submission
    display: inline;

    // Clearfix hack for IE 6/7 only
    *zoom: 1;
    // box-sizing polyfill: https://github.com/Schepp/box-sizing-polyfill
    *behavior: url(boxsizing.htc);
  }
} // .col

// Compute column widths and prefix/suffix padding

.column( @columns: 1; @total: @total-columns; @prefix: 0; @suffix: 0 ) {

  // Necessary bits from the simple class/mixin above
  .col;

  // To calculate the percentage width of the base element, we take the number of
  // columns it'll span and divide by the total number of columns. As columns are
  // specified as inline-block elements, standard columns require no further math.
  //
  //                      num cols used
  //  column width in % = -------------
  //                       total cols

  @width: percentage( @columns / @total );

  // Modifying standard width and padding for prefixed/suffixed columns, if necessary:
  // LESS will now run through four possible child mixins, only one of which will
  // actually be activated, depending on which one's guard conditions are met.
  // At some point, consider how to modularize the prefix-suffix functionality and
  // keep it optional.

  .nonPrefixSuffix( @prefix, @suffix );
  .prefix( @prefix, @suffix );
  .suffix( @suffix, @prefix );
  .prefixSuffix( @prefix, @suffix );

  // Child mixins

  // Run this when neither prefix nor suffix are specified
  .nonPrefixSuffix( @prefix: 0; @suffix: 0 ) when ( @prefix = 0 ) and ( @suffix = 0 ) {
    width: @width;
  }

  // Run this when only prefix is specified
  .prefix( @prefix: 0; @suffix: 0 ) when ( @prefix > 0 ) and ( @suffix = 0 ) {
    @offset: percentage( @prefix / @total );
    width: @width + @offset;
    padding-left: @offset;
    .lt-ie8 & {
      padding-left: 0;
    }
  }

  // Run this when only suffix is specified
  .suffix( @suffix: 0; @prefix: 0 ) when ( @suffix > 0 ) and ( @prefix = 0 ) {
    @offset: percentage( @suffix / @total );
    width: @width + @offset;
    padding-right: @offset;
    .lt-ie8 & {
      padding-right: 0;
    }
  }

  // Run this when both prefix and suffix are specified
  .prefixSuffix( @prefix: 0; @suffix: 0 ) when ( @prefix > 0 ) and ( @suffix > 0 ) {
    @left: percentage( @prefix / @total );
    @right: percentage( @suffix / @total );
    width: @width + @left + @right;
    padding-right: @right;
    padding-left: @left;
    .lt-ie8 & {
      padding-right: 0;
      padding-left: 0;
    }
  }

} // .column()

// Push and Pull mixins for source ordering

.push( @offset: 1, @total-columns: @total-columns ) {
  @push: percentage( @offset / @total-columns );
  position: relative;
  left: @push;
}

.pull( @offset: 1, @total-columns: @total-columns ) {
  @pull: percentage( @offset / @total-columns );
  position: relative;
  right: @pull;
}

// Debug tools

.column( @columns; @total: @total-columns; @prefix: 0; @suffix: 0; ) when ( @debug ) {

  background-color: #ffc;
  background-color: fade(#ff0, 25%);

}

// The following variables can be overridden in your application's stylesheet.

// Grid's max width in px.
@wrapper-width: 1200px;

// Width between columns.
@gutter-width: 30px;

// Total number of columns.
@total-columns: 12;

// Column blocks have a bg color if set to true.
@debug: false;

// A wrapper holds one or more .column() elements.

.wrapper( @wrapper-width: @wrapper-width ) {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  max-width: @wrapper-width;
  padding: 0 ( @gutter-width / 2 );
  margin: 0 auto;
  position: relative;
  clear: both;

  .lt-ie8 & {
    // Clearfix hack for IE 6/7 only
    *zoom: 1;
    // If you want IE 6/7 support, ensure boxsizing.htc is in the same dir as your stylesheet.
    // Read more: https://github.com/Schepp/box-sizing-polyfill
    *behavior: url(boxsizing.htc);
  }

}

// A container for columns to pull the left and right margins out.

.nested-col-group( @gutter-width: @gutter-width ) {
  margin-left: ( @gutter-width / 2 ) * -1;
  margin-right: ( @gutter-width / 2 ) * -1;
}

// Column()s hold actual content

.col {
  display: inline-block;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  // borders used for fixed gutters
  border: solid transparent;
  border-width: 0 (@gutter-width / 2);

  margin-right: -0.25em; // Remove whitespace caused by setting display to inline-block

  vertical-align: top;

  // Tweaks are necessary for IE, of course.
  // This creates a whole heap of extra rules, and thus should probably be pulled out
  // into a separate stylesheet that gets loaded via conditional comment.
  .ie & {
    margin-right: -0.26em;
  }
  .lt-ie8 & {
    // hack inline-block into submission
    display: inline;

    // Clearfix hack for IE 6/7 only
    *zoom: 1;
    // box-sizing polyfill: https://github.com/Schepp/box-sizing-polyfill
    *behavior: url(boxsizing.htc);
  }
} // .col

// Compute column widths and prefix/suffix padding

.column( @columns: 1; @total: @total-columns; @prefix: 0; @suffix: 0 ) {

  // Necessary bits from the simple class/mixin above
  .col;

  // To calculate the percentage width of the base element, we take the number of
  // columns it'll span and divide by the total number of columns. As columns are
  // specified as inline-block elements, standard columns require no further math.
  //
  //                      num cols used
  //  column width in % = -------------
  //                       total cols

  @width: percentage( @columns / @total );

  // Modifying standard width and padding for prefixed/suffixed columns, if necessary:
  // LESS will now run through four possible child mixins, only one of which will
  // actually be activated, depending on which one's guard conditions are met.
  // At some point, consider how to modularize the prefix-suffix functionality and
  // keep it optional.

  .nonPrefixSuffix( @prefix, @suffix );
  .prefix( @prefix, @suffix );
  .suffix( @suffix, @prefix );
  .prefixSuffix( @prefix, @suffix );

  // Child mixins

  // Run this when neither prefix nor suffix are specified
  .nonPrefixSuffix( @prefix: 0; @suffix: 0 ) when ( @prefix = 0 ) and ( @suffix = 0 ) {
    width: @width;
  }

  // Run this when only prefix is specified
  .prefix( @prefix: 0; @suffix: 0 ) when ( @prefix > 0 ) and ( @suffix = 0 ) {
    @offset: percentage( @prefix / @total );
    width: @width + @offset;
    padding-left: @offset;
    .lt-ie8 & {
      padding-left: 0;
    }
  }

  // Run this when only suffix is specified
  .suffix( @suffix: 0; @prefix: 0 ) when ( @suffix > 0 ) and ( @prefix = 0 ) {
    @offset: percentage( @suffix / @total );
    width: @width + @offset;
    padding-right: @offset;
    .lt-ie8 & {
      padding-right: 0;
    }
  }

  // Run this when both prefix and suffix are specified
  .prefixSuffix( @prefix: 0; @suffix: 0 ) when ( @prefix > 0 ) and ( @suffix > 0 ) {
    @left: percentage( @prefix / @total );
    @right: percentage( @suffix / @total );
    width: @width + @left + @right;
    padding-right: @right;
    padding-left: @left;
    .lt-ie8 & {
      padding-right: 0;
      padding-left: 0;
    }
  }

} // .column()

// Push and Pull mixins for source ordering

.push( @offset: 1, @total-columns: @total-columns ) {
  @push: percentage( @offset / @total-columns );
  position: relative;
  left: @push;
}

.pull( @offset: 1, @total-columns: @total-columns ) {
  @pull: percentage( @offset / @total-columns );
  position: relative;
  right: @pull;
}

// Debug tools

.column( @columns; @total: @total-columns; @prefix: 0; @suffix: 0; ) when ( @debug ) {

  background-color: #ffc;
  background-color: fade(#ff0, 25%);

}


forProgrammers role... but we should get rid of these from the content, or put a glasses icon before it.

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/pradeepmurugesan/incubator-freemarker-docgen.git/'


update default style for data embedded tables

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/damageboy/rundeck.git/'


Fix series selector button icon alignment on mobile

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/ScottLogic/BitFlux.git/'


Decrease height and spacing of the *To* between the start and end date.

fatal: unable to access 'https://github.com/heroandtn3/openpaas-esn.git/': The requested URL returned error: 403


Speed up transition for scrollbar (#110)

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/JakubJecminek/oni.git/'


Create datepicker.less

Create datepicker.less

.pk-datepicker{
	border:1px solid darken(@color-background, 30%);
	position:absolute;
	width:@item-width;
	overflow:hidden;
	padding:0 10px 10px;
	ul,li{
		list-style:none;
		padding:0;
		margin:0;
	}
	ul{
		display:100%;
		border-bottom:1px solid darken(@color-background, 10%);
		padding:2px 0;
		margin-bottom:10px;
	}
	li{
		width:calc(100% / 12);
		display:inline-block;
		font-size:.7em;
		box-sizing:border-box;
		padding:0 5px;
	}
	table{
		border-collapse:collapse;
		font-family:arial;
		box-sizing:border-box;
		width:100%;
		th{
			font-weight:500;
			font-size:.8em;
			color:@color-foreground;
			text-transform:uppercase;
			color:@color-highlight;
			width:@item-height*.8;
		}
		td{
			line-height:@item-height*.7;
			font-size:.9em;
			text-align:center;
			cursor:default;
			position:relative;
			font-weight:400;
			&:hover{
				color:@color-highlight;
			}
			&.pk-prev, &.pk-next{
				color:darken(@color-background, 20%);
				&:hover{
					color:darken(@color-background, 30%);
				}
			}
		}
	}
}

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


Change site-options to language-bar

Change site-options to language-bar

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


Fix aside menu css

Fix aside menu css

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/sphido/cms.git/'


Create header.less

Create header.less

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


INBOX-437 Fixed select behavior in configuration pages.

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/heroandtn3/openpaas-esn.git/'


fixex #1547 button overflow overlap issue

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/afz/fuelux.git/'


Adds style changes for backbone modal plugin

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


correct font path

correct font path

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/frankandoak/silo.git/'


CRM-5351: fix pinned dropdown text alignment

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


less: Add paddings

less: Add paddings

@padding-xs: 5px;
@padding-sm: 10px;
@padding-md: 15px;
@padding-lg: 20px;

.padding-4-xs {
  padding: 4px;
}

.padding-top-1-xs {
  padding-top: 1px;
}

.padding-top-8-xs {
  padding-top: 8px !important;
}

.padding-bottom-1-xs {
  padding-bottom: 1px;
}

.padding-2-xs {
  padding: 2px !important;
}

.padding-left-4-xs {
  padding-left: 4px;
}

.padding-right-4-xs {
  padding-right: 4px;
}

.padding-right-40 {
  padding-right: 40px !important;
}

.padding-left-40 {
  padding-left: 40px !important;
}

.padding-left-45 {
  padding-left: 45px !important;
}

.padding-right-60 {
  padding-right: 60px !important;
}

.generate-paddings(@padding-xs, @padding-sm, @padding-md, @padding-lg);

error: pathspec 'src/app/components/less/paddings.less' did not match any file(s) known to git


added a negative margin-left to the .item-title class (reverted from commit d06f4f13884c758797f33fa58b202efeea5dfa86)

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 lesshat.import.less

Create lesshat.import.less

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


Create nav-vertical-align.less

Create nav-vertical-align.less

// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.

.navbar-vertical-align(@element-height) {
  margin-top: ((@navbar-height - @element-height) / 2);
  margin-bottom: ((@navbar-height - @element-height) / 2);
}

error: pathspec 'static/app/components/bootstrap/css/less/mixins/nav-vertical-align.less' did not match any file(s) known to git


Adding "vui-outline-force" to be able to demonstrate the outline style in documentation, even when element doesn't have focus.

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/Brightspace/valence-ui-link.git/'