Add "-webkit-touch-call-out: none;" to .unselectable class

// LESS mixins and helpers

.background-size-auto(@url) {
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  -ms-background-size: auto;
  background-size: auto;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='image');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='image')";
}

.background-size-contain(@url) {
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='crop');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='crop')";
}

.background-size-cover(@url) {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

.responsive-resize-outer-element(@ratio) {
  width: 100%;
  padding-top: @ratio;
  position: relative;
}

.responsive-resize-inner-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select:  none;
}

// LESS mixins and helpers

.background-size-auto(@url) {
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  -ms-background-size: auto;
  background-size: auto;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='image');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='image')";
}

.background-size-contain(@url) {
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='crop');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='crop')";
}

.background-size-cover(@url) {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  background-image: url(@url);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

.responsive-resize-outer-element(@ratio) {
  width: 100%;
  padding-top: @ratio;
  position: relative;
}

.responsive-resize-inner-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select:  none;
}


Formatting / syntax fix

Formatting / syntax fix

// Captions
.wp-caption {
  &:extend(.thumbnail all);
}

.wp-caption-text {
  &:extend(.thumbnail .caption all);
}

// Gallery shortcode
.gallery-row {
  padding: (@line-height-computed / 2) 0;
}

// Captions
.wp-caption {
  &:extend(.thumbnail all);
}

.wp-caption-text {
    &:extend(.thumbnail .caption);
}

// Gallery shortcode
.gallery-row {
  padding: (@line-height-computed / 2) 0;
}


linting

linting

// TODO: This will include lots of unnecessary bootstrap css. Consider decoupling
@import '~bootstrap/less/utilities.less';
@import '~bootstrap/less/mixins.less';
@import '~bootstrap/less/variables.less';
@import '~bootstrap/less/buttons.less';
@import '~bootstrap/less/forms.less';
@import "~common/less/colors.less";

@image-width: 230px;
@image-width-with-padding: 238px;

.word-break {
  word-break: normal;
}

input.hidden-input {
  display: none;
}

.hidden-input {
  display: none;
}

#allergies {
  height: 50px;
}

#compiled {
  margin-bottom: 10px;
}

#gender {
  margin-bottom: 8px;
}

.bio {
  overflow-y: auto;
  white-space: pre-wrap;
}

#bio {
  height: 340px;
  .bio;
}

i.btn-icon {
  .pull-left;

  margin-top: 4px;
}

button > i.btn-icon {
  margin-left: 10px;
}

label > i.btn-icon {
  margin-left: 22px;
}

#paddingtop {
  padding-top: 20px;
}

.header-inline {
  display: inline-block;
  padding-right: 10px;
}

.glyphicon-info-sign {
  font-size: 14px;
}

#privacy-help, #image-help {
  cursor: pointer;
}

.privacy-header {
  margin-left: 15px;
}

.privacy-description {
  padding: 15px;
}

.privacy-container {
  display: flex;
  flex-direction: column;
}

.privacybox {
  margin: 5px 0 5px 0;
  padding: 3px;
  border-radius: 5px;

  /* Make text non-selectable */

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;

  span {
    padding: 0 10px 0 10px;
  }

  &.on {
    .button-variant(@btn-success-color;
    @btn-success-bg;
    @btn-success-border);
  }

  &.off {
    .button-variant(@btn-warning-color;
    @btn-warning-bg;
    @btn-warning-border);
  }

  input[type="checkbox"] {
    display: none;
  }
}

.privacybox:hover {
  cursor: pointer;
}

.mark, .application {
  padding-top: 10px;
}

.markheader, .applicationheader {
  font-weight: bold;
  font-size: 17px;
  padding-bottom: 5px;
}

.markbody, .applicationbody {
  background-color: white;
  padding-left: 10px;
}

.markbody .inline .row-fluid [class*="span"] {
  min-height: 15px;
}

.panel-heading {
  padding: 1px 15px;
}

.panel-heading:hover {
  cursor: pointer;
}

.marks.on {
  width: 100%;
  .btn;
  .button-variant(@btn-success-color;
  @btn-success-bg;
  @btn-success-border);
}

.marks.on::after {
  content: "Jeg har godtatt prikkereglene og er inneforstått med hva dette betyr.";
}

.marks.off {
  width: 100%;
  .btn;
  .button-variant(@btn-warning-color;
  @btn-warning-bg;
  @btn-warning-border);
}

.marks.off::after {
  content: "Jeg godtar prikkereglene og er inneforstått med hva dette betyr.";
}

textarea, input[type="text"], input[type="email"], input[type="url"], input[type="number"] {
  .form-control;

  margin-bottom: 7px;
}

textarea {
  resize: vertical;
}

@media all and (max-width: @screen-sm-max) {
  .privacybox {
    width: 100%;
  }

  .attribute-list [class^='col-'] {
    margin-bottom: 10px;
  }

  .img-thumbnail {
    margin-top: 20px;
    float: left !important;
  }

  .official-link {
    float: left !important;
  }

  .dashboard-image {
    float: right !important;
  }
}

@media all and (min-width: @screen-sm-max) {
  .attribute-list {
    margin-bottom: 20px;
  }

  .privacybox {
    width: 250px;
  }
}

.position p {
  margin-bottom: 0;
}

.email-row div p {
  position: relative;
  top: 6px;
}

#email {
  div.emails {
    div.row {
      padding: 7px 0;
      border-bottom: 1px solid #eee;
    }
  }

  div.new-email {
    padding: 7px 0;
  }
}

.delete-position {
  float: left;
  cursor: pointer;
  margin-right: 10px;
  padding-top: 2px;
  line-height: 12px;
}

// Public profile
#zip-code {
  display: inline;
  float: left;
}

/* Membership
--------------------------------------------------*/

.membership-button {
  margin: 10px 0 10px 0;
}

.membership-text {
  margin-bottom: 10px;
}

/* Find users
------------------------------------------------- */

section#user-search {
  .profile-picture {
    padding-left: 0;
  }

  .profile-name {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
  }

  /* sidebar */

  .sidebar {
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .sidebar .nav {
    /* all links */
    & > li > a {
      color: #999;
      padding: 4px 20px;
      font-size: 13px;
      font-weight: 400;
    }

    & > .active > a {
      color: @baby-blue;
      text-decoration: none;
      background-color: transparent;
      border-left-color: @baby-blue;
      font-weight: 700;
    }

    /* active & hover links */
    & > li > a:hover, & > li > a:focus {
      color: @baby-blue;
      text-decoration: none;
      background-color: transparent;
      border-left-color: @baby-blue;
    }

    /* hide inactive nested list */
    ul.nav {
      display: none;
    }

    /* nested links */
    .nav > li > a {
      padding-top: 1px;
      padding-bottom: 1px;
      padding-left: 30px;
      font-size: 12px;
    }

    /* all active links */
    & > .active {
      &:hover > a, &:focus > a {
        font-weight: 700;
      }

      /* show active nested list */
      & > ul.nav {
        display: block;
      }
    }

    /* nested active links */
    .nav > .active {
      a, &:hover a, &:focus a {
        font-weight: 500;
      }
    }
  }
}


fix spinner icon for instance control directive

/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

my-instance-control {
  table {
    > tbody > tr > td {
      font-weight: bold;
      padding: 5px 10px;
      vertical-align: middle;
    }
    &.table.borderless {
      border-left: 1px solid @table-border-color;
      > tbody > tr > td {
        border: 0;
        &.endpoint-path {
          word-wrap: break-word;
        }
        &.provisioned > span {
          background-color: @subnav-border;
          display: block;
          font-weight: 500;
          padding: 5px 0;
          height: 30px;
          .border-radius(4px);
        }
        &.requested {
          position: relative;
          width: 33%;
        }
        &:last-child {
          width: 20%;
        }
      }
    }
  }

  input[type="number"] {
    padding: 0 12px 0 0;
    text-indent: 12px;
    position: relative;

    // Only apply number input styling to Chrome
    @supports (-webkit-appearance:none) {
      &.mod::-webkit-outer-spin-button,
      &.mod::-webkit-inner-spin-button {
        display: block;
        width: 32px;
        height: 32px;
        border-left: 1px solid @table-border-color;
        color: @cdap-header;
        overflow: hidden;
        padding-right: 12px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        z-index: 950;
        .opacity(1);
        .appearance(none);
        &:before,
        &:after {
          width: 32px;
        }
      }
      + span {
        background-image: url('@{img-path}/divider.png');
        display: block;
        position: absolute;
        height: 1px;
        width: 46px;
        right: 10px;
        bottom: 25px;
        z-index: 900;
        &:before,
        &:after {
          display: block;
          font-family: 'FontAwesome';
          position: absolute;
          left: 18px;
        }
        &:before {
          content: '\f0d8';
          top: -18px;
        }
        &:after {
          content: '\f0d7';
          top: -2px;
        }

      }
    }
  }
}

/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

my-instance-control {
  table {
    > tbody > tr > td {
      font-weight: bold;
      padding: 5px 10px;
      vertical-align: middle;
    }
    &.table.borderless {
      border-left: 1px solid @table-border-color;
      > tbody > tr > td {
        border: 0;
        &.endpoint-path {
          word-wrap: break-word;
        }
        &.provisioned > span {
          background-color: @subnav-border;
          display: block;
          font-weight: 500;
          padding: 5px 0;
          height: 30px;
          .border-radius(4px);
        }
        &.requested {
          position: relative;
          width: 33%;
        }
        &:last-child {
          width: 20%;
        }
      }
    }
  }

  input[type="number"] {
    padding: 0 12px 0 0;
    text-indent: 12px;
    position: relative;

    // Only apply number input styling to Chrome
    @supports (-webkit-appearance:none) {
      &.mod::-webkit-outer-spin-button,
      &.mod::-webkit-inner-spin-button {
        display: block;
        width: 32px;
        height: 32px;
        border-left: 1px solid @table-border-color;
        color: @cdap-header;
        overflow: hidden;
        padding-right: 12px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        .opacity(1);
        .appearance(none);
        &:before,
        &:after {
          display: block;
          font-family: 'FontAwesome';
          width: 32px;
          text-align: center;
        }
        &:before {
          content: '\f0d8';
        }
        &:after {
          content: '\f0d7';
          position: relative;
          bottom: 4px;
        }
      }
      + span {
        background-image: url('@{img-path}/divider.png');
        display: block;
        position: absolute;
        height: 1px;
        width: 46px;
        right: 10px;
        bottom: 25px;
      }
    }
  }
}


set color of h1 to override cnx

set color of h1 to override cnx

@launcher-screen: #F1F1F1;
@launcher-screen-shine: #F5F5F5;

@launcher-text-question-dark: #222E65;
@launcher-text-question-light: #7A7A99;
@launcher-text-dark: #E5E5E5;
@launcher-text-light: #EFEFEF;
@launcher-text-selected-dark: #9A9A9B;
@launcher-text-selected-light: #CFCECE;

@launcher-letter-dark: #CFCECE;
@launcher-circle-text: #9A9A9B;

.launcher-concept() {
  .launcher-circle {
    circle {
      fill: @openstax-white;
    }
    .launcher-letter {
      fill: @launcher-circle-text;

      &-hole { fill: @openstax-white; }
      &-dark { fill: @launcher-letter-dark; }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { fill: @launcher-text-dark; }
      &:nth-child(even) { fill: @launcher-text-light; }
    }
    rect { fill: @launcher-text-light; }
  }
}

.launcher-concept(launching) {
  .launcher-circle {
    circle {
      fill: @openstax-white;
      stroke: @launcher-screen;
    }
    .launcher-letter {
      fill: @launcher-circle-text;

      &-dark { fill: @launcher-circle-text; }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { fill: @launcher-text-dark; }
      &:nth-child(even) { fill: @launcher-text-dark; }
    }
    rect { fill: @launcher-text-dark; }
  }
}

.launcher-select-keyframes(@default-fill, @select-fill){
  0%   { fill: @default-fill; }
  5%   { fill: @select-fill; }
  20%  { fill: @select-fill; }
  25%  { fill: @default-fill; }
  100% { fill: @default-fill; }
}

.keyframes(launcher-circle-select; {
  .launcher-select-keyframes(@openstax-white, @openstax-info);
});

.keyframes(launcher-letter-select; {
  .launcher-select-keyframes(@launcher-circle-text, @openstax-white);
});

.keyframes(launcher-letter-dark-select; {
  .launcher-select-keyframes(@launcher-letter-dark, @openstax-white);
});

.keyframes(launcher-text-odd-select; {
  .launcher-select-keyframes(@launcher-text-dark, @launcher-text-selected-dark);
});

.keyframes(launcher-text-even-select; {
  .launcher-select-keyframes(@launcher-text-light, @launcher-text-selected-light);
});

.launcher-animate-concept(@name, @delay, @duration, @timing-function: ease-in){
  .animation(~'@{name} @{duration} @{timing-function}');
  .animation-name(@name);
  .animation-duration(@duration);
  .animation-delay(@delay);
  .animation-timing-function(@timing-function);
  .animation-iteration-count(infinite);
}

.launcher-concept(selected, @delay: 0s, @duration: 8s) {
  .launcher-circle {
    circle {
      .launcher-animate-concept(launcher-circle-select, @delay, @duration);
    }
    .launcher-letter {
      .launcher-animate-concept(launcher-letter-select, @delay, @duration);

      &-hole { .launcher-animate-concept(launcher-circle-select, @delay, @duration); }
      &-dark { .launcher-animate-concept(launcher-letter-dark-select, @delay, @duration); }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { .launcher-animate-concept(launcher-text-odd-select, @delay, @duration); }
      &:nth-child(even) { .launcher-animate-concept(launcher-text-even-select, @delay, @duration); }
    }
    rect {
      .launcher-animate-concept(launcher-text-even-select, @delay, @duration);
    }
  }
}

.keyframes(launcher-answer-enter; {
    0% { opacity: 0; .translate(-200px; 0); }
   20% { opacity: 0; }
   60% { opacity: 1; .translate(30px; 0); }
   80% {             .translate(-10px; 0); }
  100% {             .translate(0; 0); }
});

.keyframes(launcher-mug-leave; {
    0% { opacity: 1; .translate(0; 0); }
   20% { opacity: 1; .translate(-20px; 0); }
   40% { opacity: 0; .translate(600px; 0); }
  100% { opacity: 0; .translate(600px; 0); }
});

.launcher-concepts-animate() {
  &.launcher-question { .animation-duration(100ms); }
  &.launcher-a { .animation-duration(200ms); }
  &.launcher-b { .animation-duration(300ms); }
  &.launcher-c { .animation-duration(400ms); }
  &.launcher-d { .animation-duration(500ms); }
};

.launcher-base() {
  position: relative;
  width: 100%;

  text-align: center;

  .laptop-and-mug {
    width: 100%;
    position: absolute;
    left: 0;
  }

  .btn {
    position: relative;
    top: 5%;
  }

  .launcher-answer {
    .launcher-concept();
  }
  .launcher-desk {
    .transition(all 200ms linear);
  }
  .launcher-concept-coach {
    .transform-origin(50% 25%);
    .transition(all 400ms ease-in);
  }
  .btn,
  .launcher-concept-coach-shine-bottom,
  .launcher-question .launcher-text polygon,
  .launcher-section-label {
    .transition(opacity 200ms linear);
  }
  .launcher-concept-row {
    .transition(opacity 800ms linear);
  }
  .launcher-background,
  .launcher-concept-coach-screen {
    .transition(fill 200ms linear);
  }
}

.launcher-animate() {

  .launcher-a { .launcher-concept(selected, 2600ms); }
  .launcher-b { .launcher-concept(selected, 4600ms); }
  .launcher-c { .launcher-concept(selected, 600ms); }
  .launcher-d { .launcher-concept(selected, 6600ms); }

}

.launcher-animate(active) {
  .launcher-concept-row {
    .launcher-concepts-animate();
    .animation(launcher-answer-enter ease-in);
  }

  .btn {
    .box-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  }
}

.launcher-animate(launching) {
  .btn,
  .launcher-concept-coach-shine-bottom,
  .launcher-question .launcher-text polygon,
  .launcher-section-label,
  .launcher-concept-row {
    opacity: 0;
  }

  .launcher-desk {
    .translate(0, 100%);
    .transform-origin(50% 100%);
  }
  .launcher-concept-coach {
    .transform(~'translate(-62px, 30px) scale(3.97)');
  }
  .launcher-answer {
    .launcher-concept(launching);
  }
  .launcher-coffee {
    .animation(launcher-mug-leave 300ms ease-in);
    .animation-fill-mode(both);
  }
  .launcher-concept-coach-screen {
    fill: @openstax-white;
  }
  .launcher-background {
    fill: @openstax-neutral-lighter;
  }
  .launcher-laptop {
    opacity: 0;
  }
}

.launcher-animate(closing) {
  .launcher-concept-row {
    .translate(0; 0);
  }
  .launcher-concept-coach {
    .scale(1);
  }
  .launcher-coffee {
    .translate(0; 0);
  }
}

.concept-coach-launcher-wrapper {
  position: relative;
  min-height: 388px;
  height: 100%;

  .launcher-background {
    background-color: @openstax-neutral-bright;
    color: @dark-blue;
    height: 388px;
    width: 100%;
  }

  .border-well {
    border-color: @openstax-neutral-medium;
    border-style: solid;
    border-width: 20px 5px;
    margin: 8px;
  }

  // .concept-coach-launcher {
  //   .box-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  // }

  .button(@color) {
    background-color: @color;
    color: @openstax-neutral-lightest;
    border: 1px solid transparent;
    border-radius: 4px;
    span  { display: block; }
    .warn {
      font-size: 90%;
      font-weight: 300;
    }
    &:active,
    &:focus,
    &:hover {
      background-color: darken(@color, 10%);
      border-color: darken(@color, 15%);
    }
  }

  .header {
    border-bottom: 1px solid @openstax-neutral-light;
    font-size: 18px;
    height: 60px;
    padding: 0 20px;
    .flex-display();
    .align-items(center);
    .justify-content(space-between);
    button {
      .button(#3aab47);
      padding: 8px;
      margin: 1rem 2rem;
    }
  }

  .body {
    .flex-display();
    .align-items(center);
    padding: 30px;
    .words {
      text-align: left;
      margin-right: 1rem;
      .align-self(stretch);
      .flex-display();
      .align-items(flex-start);
      .flex-direction(column);
      .flex(1.2);
      .cta {
        .flex(1);
        .flex-display();
        .flex-direction(column);
        .justify-content(center);
        color: @dark-blue;
        h1 {
          margin: 0;
          font-size: 2.4vw;
          color: @dark-blue;
        }
      }
      .fine-print {
        p {
          margin: 0;
          font-size: 1.8rem;
        }
      }
      button {
        .align-self(flex-start);
        font-size: 18px;
        margin-top: 10px;
        padding: 10px 40px;
        .button(@orange);
      }
    }
    .question {
      .flex(1);
    }
  }
  &.is-loading {
    .words {
      .fine-print,
      button {
        visibility: hidden;
      }
    }
  }
  &.is-logged-in,
  &.is-loading {
    .header .actions { display: none; }
  }
  &.is-enrolled {
    .words button { .button(@green); }
  }

}

.concept-coach-launcher {
  .launcher-base();

  &:not(.launching):not(.closing){

    .launcher-animate();

    &:hover,
    &:focus {
      .launcher-animate(active);
    }
  }

  &.launching {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;

    .launcher-animate(launching);
  }

  &:not(.launching) {
    .launcher-animate(closing);
  }
}

// @media (min-width: @screen-xs-min) {
//   .concept-coach-launcher {
//     .btn {
//       position: absolute;
//       top: 40%;
//       left: 8%;
//     }
//   }
// }

@launcher-screen: #F1F1F1;
@launcher-screen-shine: #F5F5F5;

@launcher-text-question-dark: #222E65;
@launcher-text-question-light: #7A7A99;
@launcher-text-dark: #E5E5E5;
@launcher-text-light: #EFEFEF;
@launcher-text-selected-dark: #9A9A9B;
@launcher-text-selected-light: #CFCECE;

@launcher-letter-dark: #CFCECE;
@launcher-circle-text: #9A9A9B;

.launcher-concept() {
  .launcher-circle {
    circle {
      fill: @openstax-white;
    }
    .launcher-letter {
      fill: @launcher-circle-text;

      &-hole { fill: @openstax-white; }
      &-dark { fill: @launcher-letter-dark; }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { fill: @launcher-text-dark; }
      &:nth-child(even) { fill: @launcher-text-light; }
    }
    rect { fill: @launcher-text-light; }
  }
}

.launcher-concept(launching) {
  .launcher-circle {
    circle {
      fill: @openstax-white;
      stroke: @launcher-screen;
    }
    .launcher-letter {
      fill: @launcher-circle-text;

      &-dark { fill: @launcher-circle-text; }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { fill: @launcher-text-dark; }
      &:nth-child(even) { fill: @launcher-text-dark; }
    }
    rect { fill: @launcher-text-dark; }
  }
}

.launcher-select-keyframes(@default-fill, @select-fill){
  0%   { fill: @default-fill; }
  5%   { fill: @select-fill; }
  20%  { fill: @select-fill; }
  25%  { fill: @default-fill; }
  100% { fill: @default-fill; }
}

.keyframes(launcher-circle-select; {
  .launcher-select-keyframes(@openstax-white, @openstax-info);
});

.keyframes(launcher-letter-select; {
  .launcher-select-keyframes(@launcher-circle-text, @openstax-white);
});

.keyframes(launcher-letter-dark-select; {
  .launcher-select-keyframes(@launcher-letter-dark, @openstax-white);
});

.keyframes(launcher-text-odd-select; {
  .launcher-select-keyframes(@launcher-text-dark, @launcher-text-selected-dark);
});

.keyframes(launcher-text-even-select; {
  .launcher-select-keyframes(@launcher-text-light, @launcher-text-selected-light);
});

.launcher-animate-concept(@name, @delay, @duration, @timing-function: ease-in){
  .animation(~'@{name} @{duration} @{timing-function}');
  .animation-name(@name);
  .animation-duration(@duration);
  .animation-delay(@delay);
  .animation-timing-function(@timing-function);
  .animation-iteration-count(infinite);
}

.launcher-concept(selected, @delay: 0s, @duration: 8s) {
  .launcher-circle {
    circle {
      .launcher-animate-concept(launcher-circle-select, @delay, @duration);
    }
    .launcher-letter {
      .launcher-animate-concept(launcher-letter-select, @delay, @duration);

      &-hole { .launcher-animate-concept(launcher-circle-select, @delay, @duration); }
      &-dark { .launcher-animate-concept(launcher-letter-dark-select, @delay, @duration); }
    }
  }
  .launcher-text {
    polygon {
      &:nth-child(odd)  { .launcher-animate-concept(launcher-text-odd-select, @delay, @duration); }
      &:nth-child(even) { .launcher-animate-concept(launcher-text-even-select, @delay, @duration); }
    }
    rect {
      .launcher-animate-concept(launcher-text-even-select, @delay, @duration);
    }
  }
}

.keyframes(launcher-answer-enter; {
    0% { opacity: 0; .translate(-200px; 0); }
   20% { opacity: 0; }
   60% { opacity: 1; .translate(30px; 0); }
   80% {             .translate(-10px; 0); }
  100% {             .translate(0; 0); }
});

.keyframes(launcher-mug-leave; {
    0% { opacity: 1; .translate(0; 0); }
   20% { opacity: 1; .translate(-20px; 0); }
   40% { opacity: 0; .translate(600px; 0); }
  100% { opacity: 0; .translate(600px; 0); }
});

.launcher-concepts-animate() {
  &.launcher-question { .animation-duration(100ms); }
  &.launcher-a { .animation-duration(200ms); }
  &.launcher-b { .animation-duration(300ms); }
  &.launcher-c { .animation-duration(400ms); }
  &.launcher-d { .animation-duration(500ms); }
};

.launcher-base() {
  position: relative;
  width: 100%;

  text-align: center;

  .laptop-and-mug {
    width: 100%;
    position: absolute;
    left: 0;
  }

  .btn {
    position: relative;
    top: 5%;
  }

  .launcher-answer {
    .launcher-concept();
  }
  .launcher-desk {
    .transition(all 200ms linear);
  }
  .launcher-concept-coach {
    .transform-origin(50% 25%);
    .transition(all 400ms ease-in);
  }
  .btn,
  .launcher-concept-coach-shine-bottom,
  .launcher-question .launcher-text polygon,
  .launcher-section-label {
    .transition(opacity 200ms linear);
  }
  .launcher-concept-row {
    .transition(opacity 800ms linear);
  }
  .launcher-background,
  .launcher-concept-coach-screen {
    .transition(fill 200ms linear);
  }
}

.launcher-animate() {

  .launcher-a { .launcher-concept(selected, 2600ms); }
  .launcher-b { .launcher-concept(selected, 4600ms); }
  .launcher-c { .launcher-concept(selected, 600ms); }
  .launcher-d { .launcher-concept(selected, 6600ms); }

}

.launcher-animate(active) {
  .launcher-concept-row {
    .launcher-concepts-animate();
    .animation(launcher-answer-enter ease-in);
  }

  .btn {
    .box-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  }
}

.launcher-animate(launching) {
  .btn,
  .launcher-concept-coach-shine-bottom,
  .launcher-question .launcher-text polygon,
  .launcher-section-label,
  .launcher-concept-row {
    opacity: 0;
  }

  .launcher-desk {
    .translate(0, 100%);
    .transform-origin(50% 100%);
  }
  .launcher-concept-coach {
    .transform(~'translate(-62px, 30px) scale(3.97)');
  }
  .launcher-answer {
    .launcher-concept(launching);
  }
  .launcher-coffee {
    .animation(launcher-mug-leave 300ms ease-in);
    .animation-fill-mode(both);
  }
  .launcher-concept-coach-screen {
    fill: @openstax-white;
  }
  .launcher-background {
    fill: @openstax-neutral-lighter;
  }
  .launcher-laptop {
    opacity: 0;
  }
}

.launcher-animate(closing) {
  .launcher-concept-row {
    .translate(0; 0);
  }
  .launcher-concept-coach {
    .scale(1);
  }
  .launcher-coffee {
    .translate(0; 0);
  }
}

.concept-coach-launcher-wrapper {
  position: relative;
  min-height: 388px;
  height: 100%;

  .launcher-background {
    background-color: @openstax-neutral-bright;
    color: @dark-blue;
    height: 388px;
    width: 100%;
  }

  .border-well {
    border-color: @openstax-neutral-medium;
    border-style: solid;
    border-width: 20px 5px;
    margin: 8px;
  }

  // .concept-coach-launcher {
  //   .box-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  // }

  .button(@color) {
    background-color: @color;
    color: @openstax-neutral-lightest;
    border: 1px solid transparent;
    border-radius: 4px;
    span  { display: block; }
    .warn {
      font-size: 90%;
      font-weight: 300;
    }
    &:active,
    &:focus,
    &:hover {
      background-color: darken(@color, 10%);
      border-color: darken(@color, 15%);
    }
  }

  .header {
    border-bottom: 1px solid @openstax-neutral-light;
    font-size: 18px;
    height: 60px;
    padding: 0 20px;
    .flex-display();
    .align-items(center);
    .justify-content(space-between);
    button {
      .button(#3aab47);
      padding: 8px;
      margin: 1rem 2rem;
    }
  }

  .body {
    .flex-display();
    .align-items(center);
    padding: 30px;
    .words {
      text-align: left;
      margin-right: 1rem;
      .align-self(stretch);
      .flex-display();
      .align-items(flex-start);
      .flex-direction(column);
      .flex(1.2);
      .cta {
        .flex(1);
        .flex-display();
        .flex-direction(column);
        .justify-content(center);
        color: @dark-blue;
        h1 {
          margin: 0;
          font-size: 2.4vw;
        }
      }
      .fine-print {
        p {
          margin: 0;
          font-size: 1.8rem;
        }
      }
      button {
        .align-self(flex-start);
        font-size: 18px;
        margin-top: 10px;
        padding: 10px 40px;
        .button(@orange);
      }
    }
    .question {
      .flex(1);
    }
  }
  &.is-loading {
    .words {
      .fine-print,
      button {
        visibility: hidden;
      }
    }
  }
  &.is-logged-in,
  &.is-loading {
    .header .actions { display: none; }
  }
  &.is-enrolled {
    .words button { .button(@green); }
  }

}

.concept-coach-launcher {
  .launcher-base();

  &:not(.launching):not(.closing){

    .launcher-animate();

    &:hover,
    &:focus {
      .launcher-animate(active);
    }
  }

  &.launching {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;

    .launcher-animate(launching);
  }

  &:not(.launching) {
    .launcher-animate(closing);
  }
}

// @media (min-width: @screen-xs-min) {
//   .concept-coach-launcher {
//     .btn {
//       position: absolute;
//       top: 40%;
//       left: 8%;
//     }
//   }
// }


Redesign - Material design

Redesign - Material design

.music .banner {
  background: transparent url(../img/backgrounds/vinyls.jpg) no-repeat center;
  background-size: 100% auto;
  display: block;
}

.music .tabs{
  background: #03a9f4;
}

.music .tabs .tab{
  color : white;
  opacity : 0.75;
  border-bottom: 0.5rem solid transparent;
  text-align: center;
  padding : 2rem 0 1rem 0;
  cursor: pointer;
  font-size : 1.5rem;
  text-transform: uppercase;
}

.music .tabs .tab:hover{
  opacity : 1;
}

.music .tabs .tab.selected {
  border-bottom: 0.5rem solid #ffff85;
}

.music .content {
  position : absolute;
  top : 15rem;
  overflow : scroll;
  bottom: 0;
  right: 0;
  left : 0;
}

.music .content [data-type="list"] li:first-child {
  margin-top : 1rem;
}

.music.artist [data-type="list"].albums {
  position: absolute;
  top: 10rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
}

.music .cover-wrapper {
  min-height: 0.1rem;
  position: relative;
}

.album .cover.unknow {
  background: url(/img/backgrounds/album.png) no-repeat center;
  background-size: 100% auto;
}

.artist .cover.unknow {
  background: url(/img/backgrounds/artist.png) no-repeat center;
  background-size: 100% auto;
}

.song.cover {
  background: transparent no-repeat center top;
  opacity: 0.1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;

}

.album .songs {
  position: absolute;
  top : 14rem;
  bottom: 0;
  left : 0;
  right : 0;
  overflow: scroll;
}

.songs .song {
  padding-left: 1rem;
  .box-sizing;
}

h1.album {
  color : @primaryColor;
  font-size : 2rem;
  padding : 1rem 0 0 1rem;
  margin : 0;
  .box-sizing;
}

.album .thumb {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  bottom : -4rem;
  left : 1rem;
}

.album .thumb img {
  width: 8rem;
  height: 8rem;
}

.album .thumb .vinyl {
  width: auto;
}

.album .thumb .cover {
  position: absolute;
  left: 0;
  top: 0;
}

.music .banner {
  background: transparent url(../img/backgrounds/vinyls.jpg) no-repeat center;
  background-size: 100% auto;
  display: block;
}

.music .tabs{
  background: #03a9f4;
}

.music .tabs .tab{
  color : white;
  opacity : 0.75;
  border-bottom: 0.5rem solid transparent;
  text-align: center;
  padding : 2rem 0 1rem 0;
  cursor: pointer;
  font-size : 1.5rem;
  text-transform: uppercase;
}

.music .tabs .tab:hover{
  opacity : 1;
}

.music .tabs .tab.selected {
  border-bottom: 0.5rem solid #ffff85;
}

.music .content {
  position : absolute;
  top : 15rem;
  overflow : scroll;
  bottom: 0;
  right: 0;
  left : 0;
}

.music.artist [data-type="list"].albums {
  position: absolute;
  top: 10rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
}

.music .cover-wrapper {
  min-height: 0.1rem;
  position: relative;
}

.album .cover.unknow {
  background: url(/img/backgrounds/album.png) no-repeat center;
  background-size: 100% auto;
}

.artist .cover.unknow {
  background: url(/img/backgrounds/artist.png) no-repeat center;
  background-size: 100% auto;
}

.song.cover {
  background: transparent no-repeat center top;
  opacity: 0.1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;

}

.album .songs {
  position: absolute;
  top : 14rem;
  bottom: 0;
  left : 0;
  right : 0;
  overflow: scroll;
}

.songs .song {
  padding-left: 1rem;
  .box-sizing;
}

h1.album {
  color : @primaryColor;
  font-size : 2rem;
  padding : 1rem 0 0 1rem;
  margin : 0;
  .box-sizing;
}

.album .thumb {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  bottom : -4rem;
  left : 1rem;
}

.album .thumb img {
  width: 8rem;
  height: 8rem;
}

.album .thumb .vinyl {
  width: auto;
}

.album .thumb .cover {
  position: absolute;
  left: 0;
  top: 0;
}


Break crazy long words inside evidenceish content (comments / subcomments)

@import "bootstrap/mixins";

@evidencePadding: 18px;

.ndp-evidenceish {
  .new-design-font();
}

.ndp-evidenceish-heading {
  position: absolute;
  top: -23px;
  left: @evidencePadding;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ndp-evidenceish-box {
  position: relative;
  .new-design-white-block-with-shadow();
}

.ndp-evidenceish-content {
  padding: @evidencePadding @evidencePadding 13px;
  word-wrap: break-word;

  // HACK until we have "small Factwheels" (per NDP design, in-line with text)
  // -- this looks better for now
  > .fact-base {
    margin-left: -3px;
  }
}

.ndp-evidenceish-bottom {
  box-shadow: 0px -1px @NDPMutedBorderBottomColor, 0px -2px @NDPMutedBorderTopColor;
  margin: 0 @evidencePadding;
  padding: 5px 0;
  color: @mutedFontColor;
  font-size: @metaFontSize;
}

@import "bootstrap/mixins";

@evidencePadding: 18px;

.ndp-evidenceish {
  .new-design-font();
}

.ndp-evidenceish-heading {
  position: absolute;
  top: -23px;
  left: @evidencePadding;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ndp-evidenceish-box {
  position: relative;
  .new-design-white-block-with-shadow();
}

.ndp-evidenceish-content {
  padding: @evidencePadding @evidencePadding 13px;

  // HACK until we have "small Factwheels" (per NDP design, in-line with text)
  // -- this looks better for now
  > .fact-base {
    margin-left: -3px;
  }
}

.ndp-evidenceish-bottom {
  box-shadow: 0px -1px @NDPMutedBorderBottomColor, 0px -2px @NDPMutedBorderTopColor;
  margin: 0 @evidencePadding;
  padding: 5px 0;
  color: @mutedFontColor;
  font-size: @metaFontSize;
}


배경색을 지정하지 않는 그라디언트 믹스인 추가

배경색을 지정하지 않는 그라디언트 믹스인 추가

.ellipsis {
  width: 100%;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
}

.flex( @val : 1 ) {
  -webkit-box-flex: @val;
  -moz-box-flex: @val;
  box-flex: @val;
}

.user-select(@value:none) {
  -webkit-user-select: @value;
  -khtml-user-select: @value;
  -moz-user-select: @value;
  -ms-user-select: @value;
  user-select: @value;
}

.font-face(@name, @fn, @p, @fontWeight:normal) {
  font-family: '@{name}';
  src: url('@{p}/@{fn}.eot');
  // local 속성을 작성할 경우 클라이언트에 해당 글꼴이 있으면 웹폰트를 적용하지 않는다.
  src: local('NanumGothic'), url('@{p}/@{fn}.eot?#iefix') format('embedded-opentype'), url('@{p}/@{fn}.woff2') format('woff2'), url('@{p}/@{fn}.woff') format('woff'), url('@{p}/@{fn}.ttf') format('truetype');
  font-weight: @fontWeight;
  font-style: normal;
}

// Gradient Bar Colors for buttons and alerts
.gradient-bar(@primaryColor, @secondaryColor) {
  #gradient > .vertical(@primaryColor, @secondaryColor);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) fadein(rgba(0, 0, 0, .1), 15%);
}

.button-background(@startColor, @endColor) {
  .gradient-bar(@startColor, @endColor);
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    background-color: @endColor;
  }
}

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

.gradient-vertical-four(
  @first-color, @first-position,
  @second-color, @second-position,
  @third-color, @third-position,
  @fourth-color, @fourth-position
) {
  background: -moz-linear-gradient(top, @first-color @first-position, @second-color @second-position, @third-color @third-position, @fourth-color @fourth-position);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(@first-position, @first-color), color-stop(@second-position, @second-color), color-stop(@third-position, @third-color), color-stop(@fourth-position, @fourth-color));
  background: -webkit-linear-gradient(top, @first-color @first-position, @second-color @second-position, @third-color @third-position, @fourth-color @fourth-position);
  background: -o-linear-gradient(top, @first-color @first-position, @second-color @second-position, @third-color @third-position, @fourth-color @fourth-position);
  background: -ms-linear-gradient(top, @first-color @first-position, @second-color @second-position, @third-color @third-position, @fourth-color @fourth-position);
  background: linear-gradient(to bottom, @first-color @first-position, @second-color @second-position, @third-color @third-position, @fourth-color @fourth-position);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@first-color), argb(@fourth-color)));
}

.gradient-vertical-without-color(@startColor: #555, @endColor: #333) {
  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
  background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
  background-repeat: repeat-x;
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}


Update design

Update design

@themeColor: <%themeColor%>;

@import url(http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css);

* {
	margin: 0;
	padding: 0;
}

.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

html {
	color: #000;
	background-color: #fff;
	background-image: url('/resources/images/grid.png');
	background-repeat: repeat;
}

body {
	color: #fff;
	font-family: "mplus-1c-light", sans-serif !important;

	a {
		color: rgba(152, 186, 220, 1);
		text-decoration: none;

		&:hover {
			color: rgba(152, 186, 220, 0.7);
		}
	}

	header {
		/*flexコンテナとしての設定*/
		justify-content: space-between;
		background: @themeColor;
		height: 150px;
		min-width: 760px;

		#titleLogo {
			/*flexアイテムとしての設定*/
			align-self: center;
			margin-left: 40px;
			/*flexコンテナとしての設定*/
			flex-flow: column nowrap;

			h1 {
				color: #fff;
				font-size: 40px;
			}

			p {
				/*flexアイテムとしての設定*/
				align-self: flex-end;
				color: #fff;
				font-size: 20px;
			}
		}

		#anchorLogout {
			/*flexアイテムとしての設定*/
			align-self: flex-end;
			margin: 0 10px 10px 0;
			font-size: 25px;
		}
	}

	#contents {

		nav {
			background-color: rgba(29, 28, 81, 0.7);
			min-height: 512px;
			padding: 0 64px 0 0;
			border-radius: 0 0 10px 0;

			ul {

				li {
					padding: 10px 0 10px 0;
					font-size: 19px;
					white-space: nowrap;

					* {
						padding-left: 21px;
					}

					h1 {
						font-size: 25px;
						border-left: 8px solid rgb(74, 73, 116);
						margin-top: 0;
						vertical-align: middle;
						padding: 0 8px 3px 8px;
						font-weight: 100;
						cursor: pointer;

						&:hover {
							background: rgba(255, 255, 255, 0.7);
							color: rgba(29, 28, 81, 0.7);
						}
					}
				}
			}
		}

		main {

			article {
				font-size: 19px;
				font-weight: 100;
				margin: 20px 30px;

				ul {
					margin: 10px 20px;
				}

				h1 {
					font-size: 26px;
					margin: 10px 0;
					font-weight: 600;
				}

				h2 {
					font-size: 23px;
					margin: 10px 0;
					font-weight: 600;
				}

				h3 {
					font-size: 20px;
					margin: 10px 0;
					font-weight: 600;
				}
			}
		}
	}

	footer {
		text-align: center;
		color: rgba(180, 180, 180, 1);
		padding: 2px 0 6px 0;
		margin: 5px;
	}

	input {
		font-size: 22px;
		cursor: auto;
		margin: 0px;
		padding: 8px 10px;
		-moz-appearance: none;
		-moz-user-select: text;
		line-height: 24px;
		color: rgb(255, 255, 255);
		outline: medium none;
		border: 1px solid rgb(221, 221, 221);
		border-radius: 0px;
		box-shadow: none;
		transition: color 0.5s ease 0s, border 0.5s ease 0s, box-shadow 0.1s ease 0s;
		background-color: transparent;
	}

		input[type="text"] {
			border: 1px solid rgba(255, 255, 255, 0.5);
			width: 100%;
			min-width: 200px;
			box-sizing: border-box;
		}

		input[type="submit"] {
			-moz-appearance: none;
			display: inline-block;
			box-sizing: border-box;
			margin: 6px 0px;
			padding: 8px 16px;
			min-width: 5em;
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-decoration: none;
			color: rgb(68, 68, 68);
			background: none repeat scroll 0% 0% rgb(249, 249, 249);
			outline: medium none;
			border: 1px solid rgb(204, 204, 204);
			border-radius: 2px;
			box-shadow: 0px 0px 0px 1px rgb(255, 255, 255) inset, 0px 1px 1px rgba(0, 0, 0, 0.1);
			transition: border 0.5s ease 0s;
		}

		input[type=file] {
			font-size: 20px;
		}

	label {
		display: block;
		max-width: 512px;
		width: ~"calc(100% - 128px)";
		margin: 10px 0;
	}
}

@themeColor: <%themeColor%>;

@import url(http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css);

* {
	margin: 0;
	padding: 0;
}

.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

html {
	color: #000;
	background-color: #fff;
	background-image: url('/resources/images/grid.png');
	background-repeat: repeat;
}

body {
	color: #fff;
	font-family: "mplus-1c-light", sans-serif;

	a {
		color: rgba(152, 186, 220, 1);
		text-decoration: none;

		&:hover {
			color: rgba(152, 186, 220, 0.7);
		}
	}

	header {
		/*flexコンテナとしての設定*/
		justify-content: space-between;
		background: @themeColor;
		height: 150px;
		min-width: 760px;

		#titleLogo {
			/*flexアイテムとしての設定*/
			align-self: center;
			margin-left: 40px;
			/*flexコンテナとしての設定*/
			flex-flow: column nowrap;

			h1 {
				color: rgba(152, 186, 220, 1);
				font-size: 40px;
			}

			p {
				/*flexアイテムとしての設定*/
				align-self: flex-end;
				color: rgb(143, 142, 167);
				font-size: 20px;
			}
		}

		#anchorLogout {
			/*flexアイテムとしての設定*/
			align-self: flex-end;
			margin: 0 10px 10px 0;
			font-size: 25px;
		}
	}

	#contents {

		nav {
			background-color: rgba(29, 28, 81, 0.7);
			min-height: 512px;
			padding: 0 64px 0 0;
			border-radius: 0 0 10px 0;

			ul {

				li {
					padding: 10px 0 10px 0;
					font-size: 19px;
					white-space: nowrap;

					* {
						padding-left: 21px;
					}

					h1 {
						font-size: 25px;
						border-left: 8px solid rgb(74, 73, 116);
						margin-top: 0;
						vertical-align: middle;
						padding: 0 8px 3px 8px;
						font-weight: 100;
						cursor: pointer;

						&:hover {
							background: rgba(255, 255, 255, 0.7);
							color: rgba(29, 28, 81, 0.7);
						}
					}
				}
			}
		}

		main {

			article {
				font-size: 19px;
				font-weight: 100;
				margin: 20px 30px;

				ul {
					margin: 10px 20px;
				}

				h1 {
					font-size: 26px;
					margin: 10px 0;
					font-weight: 600;
				}

				h2 {
					font-size: 23px;
					margin: 10px 0;
					font-weight: 600;
				}

				h3 {
					font-size: 20px;
					margin: 10px 0;
					font-weight: 600;
				}
			}
		}
	}

	footer {
		text-align: center;
		color: rgba(180, 180, 180, 1);
		padding: 2px 0 6px 0;
		margin: 5px;
	}

	input {
		font-size: 22px;
		cursor: auto;
		margin: 0px;
		padding: 8px 10px;
		-moz-appearance: none;
		-moz-user-select: text;
		line-height: 24px;
		color: rgb(255, 255, 255);
		outline: medium none;
		border: 1px solid rgb(221, 221, 221);
		border-radius: 0px;
		box-shadow: none;
		transition: color 0.5s ease 0s, border 0.5s ease 0s, box-shadow 0.1s ease 0s;
		background-color: transparent;
	}

		input[type="text"] {
			border: 1px solid rgba(255, 255, 255, 0.5);
			width: 100%;
			min-width: 200px;
			box-sizing: border-box;
		}

		input[type="submit"] {
			-moz-appearance: none;
			display: inline-block;
			box-sizing: border-box;
			margin: 6px 0px;
			padding: 8px 16px;
			min-width: 5em;
			cursor: pointer;
			font-size: 1.2em;
			font-weight: bold;
			text-decoration: none;
			color: rgb(68, 68, 68);
			background: none repeat scroll 0% 0% rgb(249, 249, 249);
			outline: medium none;
			border: 1px solid rgb(204, 204, 204);
			border-radius: 2px;
			box-shadow: 0px 0px 0px 1px rgb(255, 255, 255) inset, 0px 1px 1px rgba(0, 0, 0, 0.1);
			transition: border 0.5s ease 0s;
		}

		input[type=file] {
			font-size: 20px;
		}

	label {
		display: block;
		max-width: 512px;
		width: ~"calc(100% - 128px)";
		margin: 10px 0;
	}
}


Adjust padding for textarea in metadata catalog (BL-6350)

@import "../../bloomUI.less";
@import "../../bloomDialog.less";
@import "../../node_modules/react-table/react-table.css";

.bookMetadataDialog {
    font-family: @ui-fonts;
    .dialogContent {
        .ReactTable {
            padding: 5px 5px;
            border: solid 1px black;
            width: 500px;
            .rt-thead.-header {
                display: none;
            }
            .rt-td.label {
                padding-top: 0;
                padding-bottom: 0;
            }
            .rt-td.value {
                // Enhance in the future: if this dialog actually gets used much, someone somewhere
                // will need it to be a different font in order to show the title or the author's name.
                // I (JH) am consciously choosing to not put the effort right now into building an API
                // endpoint for that and then calling and setting it in the tsx file.
                font-family: "Andika New Basic";
                // Some cells, we want grey (readonly), some are white (editable).
                // Since we don't have a way of putting a class on the rt-dt that
                // is the container of the cell, if it has padding, then both kinds
                // of cells will have the same background color surrounding the text or textarea.
                // So we take out the padding of the cell and leave it to the contents to add back
                // that space as padding.
                padding: 0;

                & > * {
                    padding-right: 5px;
                    padding-left: 5px;
                }
                & > :not(textarea) {
                    // We want vertical padding if it's not a textarea which either has some internal
                    // table related spacing or is more limited vertically to begin with.
                    // See https://silbloom.myjetbrains.com/youtrack/issue/BL-6350.
                    padding-top: 7px;
                    padding-bottom: 7px;
                }
                & > textarea {
                    height: 2em;
                    width: 100%;
                    border: none;
                    resize: none;
                }
            }
            // cover art
            img {
                height: 70px;
            }
            .loading {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 2em;
            }
        }
    }
}

@import "../../bloomUI.less";
@import "../../bloomDialog.less";
@import "../../node_modules/react-table/react-table.css";

.bookMetadataDialog {
    font-family: @ui-fonts;
    .dialogContent {
        .ReactTable {
            padding: 5px 5px;
            border: solid 1px black;
            width: 500px;
            .rt-thead.-header {
                display: none;
            }
            .rt-td.label {
                padding-top: 0;
                padding-bottom: 0;
            }
            .rt-td.value {
                // Enhance in the future: if this dialog actually gets used much, someone somewhere
                // will need it to be a different font in order to show the title or the author's name.
                // I (JH) am consciously choosing to not put the effort right now into building an API
                // endpoint for that and then calling and setting it in the tsx file.
                font-family: "Andika New Basic";
                // Some cells, we want grey (readonly), some are white (editable).
                // Since we don't have a way of putting a class on the rt-dt that
                // is the container of the cell, if it has padding, then both kinds
                // of cells will have the same background color surrounding the text or textarea.
                // So we take out the padding of the cell and leave it to the contents to add back
                // that space as padding.
                padding: 0;

                & > * {
                    padding-right: 5px; // sets padding-left as well
                }
                & > :not(textarea) {
                    // We want vertical padding if it's not a textarea which either has some internal
                    // table related spacing or is more limited vertically to begin with.
                    // See https://silbloom.myjetbrains.com/youtrack/issue/BL-6350.
                    padding-top: 7px; // sets padding-bottom as well
                }
                & > textarea {
                    height: 2em;
                    width: 100%;
                    border: none;
                    resize: none;
                }
            }
            // cover art
            img {
                height: 70px;
            }
            .loading {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 2em;
            }
        }
    }
}


[ENH] Minor edits.

[ENH] Minor edits.

git-svn-id: a7fabbc6a7c54ea5c67cbd16bd322330fd10cc35@50808 b456876b-0849-0410-b77d-98878d47e9d5

// $Id$ Darkroom theme custom-other.less file.

@imagePath: ~"darkroom/";
//body {
//	background-image: url('@{imagePath}bg.jpg');
//}

body {background-image: url('@{imagePath}474747_5e5e5e_40.png');}

.container {background: #0C0C0C;}

#col1 {
  background: #3F3F3F;
  border-left: 10px solid #0c0c0c;
  border-right: 10px solid #0c0c0c;
  padding-bottom: 10px;
}

h3.panel-title {
  color: #9D9D9D;
  font-size: 24px;
}

.panel-body {border: solid #292929; border-width: 0 8px 8px 8px;}

// To do: replace with bootstrap gradient mixin.
.navbar-default,
.btn,
.btn-default,
.nav-tabs > li > a,
.input-group-addon {
  background: #818181; /* Old browsers */
  background: -moz-linear-gradient(top,  #818181 0%, #393939 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#393939)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #818181 0%,#393939 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #818181 0%,#393939 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #818181 0%,#393939 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #818181 0%,#393939 100%) !important; /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#393939',GradientType=0 );
} /* IE6-9 */

.textarea-toolbar a.toolbar {background: none !important; }

.nav > li > a {padding: 6px 10px;}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #fff;}

select {background: #292929}

.cke_wysiwyg_frame, .cke_wysiwyg_div {background: #292929 !important; color: #fff !important;}

@table-bg: transparent;
@table-bg-accent: #393939;
.even {background: @table-bg-accent;}

.odd,
#trig_dptxt {
  background: @table-bg;
  color: @brand-primary;
}

input[type="checkbox"] {
  color: #fff !important;
  background: @table-bg;
}

input.reportBuilderInput,
.ui-datepicker {background: #292929;}

textarea,
input{
  background: @input-bg;
  color: @input-color;
}

.jtrack-form {background: #292929 !important;}

/* $Id$ Darkroom theme custom-other.less file.  */

@imagePath: ~"darkroom/";
//body {
//	background-image: url('@{imagePath}bg.jpg');
//}

body {background-image: url('@{imagePath}474747_5e5e5e_40.png');}

.container {background: #0C0C0C;}

#col1 {background: #3F3F3F;border-left: 10px solid #0c0c0c;border-right: 10px solid #0c0c0c;padding-bottom: 10px;}

h3.panel-title {
  color: #9D9D9D;
  font-size: 24px;
}

.panel-body {border: solid #292929; border-width: 0 8px 8px 8px;}

.navbar-default,
.btn,
.btn-default,
.nav-tabs > li > a,
.input-group-addon {
  background: #818181; /* Old browsers */
  background: -moz-linear-gradient(top,  #818181 0%, #393939 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#393939)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #818181 0%,#393939 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #818181 0%,#393939 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #818181 0%,#393939 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #818181 0%,#393939 100%) !important; /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#393939',GradientType=0 );
} /* IE6-9 */

.textarea-toolbar a.toolbar {background: none !important; }

.nav > li > a {padding: 6px 10px;}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #fff;}

select {background: #292929}

.cke_wysiwyg_frame, .cke_wysiwyg_div {background: #292929 !important; color: #fff !important;}

@table-bg: transparent;
@table-bg-accent: #393939;
.even {background: @table-bg-accent;}

.odd,
#trig_dptxt {
  background: @table-bg;
  color: @brand-primary;
}

input[type="checkbox"] {
  color: #fff !important;
  background: @table-bg;
}

input.reportBuilderInput,
.ui-datepicker {background: #292929;}

textarea,
input{
  background: @input-bg;
  color: @input-color;
}

.jtrack-form {background: #292929 !important;}


Fixes styling for upload artifact wizard in tracker

/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

.artifact-upload-wizard {
  .upload-instruction {
    margin-bottom: 25px;
    margin-top: 0;
  }

  .form-group {
    .file-drop-container {
      width: 100%;
      height: 100px;
      border: 1px dashed #666;
      cursor: pointer;
      position: relative;
      border-radius: 5px;

      &.file-drag-container {
        background-color: lightblue;
        opacity: 0.7;
      }
      .file-metadata-container {
        position: absolute;
        top: 15px;
        left: 0;
        right: 0;
        text-align: center;
        margin: 0;
        font-size: 14px;
        color: #666;

        span {
          line-height: 14px;
          color: #666;
          margin: 0;
          font-size: 14px;
        }
      }
    }
  }
}

/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

.artifact-upload-wizard {
  .upload-instruction {
    margin-bottom: 25px;
    margin-top: 0;
  }

  .file-drop-container {
    width: 100%;
    height: 100px;
    border: 1px dashed #666;
    cursor: pointer;
    position: relative;
    border-radius: 5px;

    &.file-drag-container {
      background-color: lightblue;
      opacity: 0.7;
    }
    .file-metadata-container {
      position: absolute;
      top: 15px;
      left: 0;
      right: 0;
      text-align: center;
      margin: 0;
      font-size: 14px;
      color: #666;
    }
  }
}


* template: move tab-navbar up.

* template: move tab-navbar up.

html,
body {
  height: 100%;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Microsoft YaHei"
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

/* header start */
#header {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  height: 50px;

  .brand-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    width: 230px;
    height: 100%;
    transition: width .5s ease-in-out;
    white-space: nowrap;
    word-break: break-all;
    background-color: @brand-bgcolor;

    .navbar-brand {
      overflow: hidden;
      color: @brand-color;

      .title {
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        white-space: nowrap;
        word-break: break-all;
        font-size: @font-size-large;
      }
    }
  }

  .navbar-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    padding-right: 50px;
    border-left: 1px solid @brand-border-color;
    background-color: @color-back;
    box-shadow: 0 1px 4px @box-shadow-color;

    #mainMenuToggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      cursor: pointer;
      color: @link-color;

      .icon {
        font-size: 21px;
      }

      .icon-bars {
        display: none;
      }

      .icon-times {
        display: inline-block;
      }

      &:hover {
        background-color: @link-hover-bgcolor;
      }
    }

    .navbar-nav {
      display: flex;
      align-items: center;

      #search {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        margin-right: 10px;

        .icon-search-container {
          position: absolute;
          background-color: @color-secondary;
          left: 0;
          top: 0;
          width: 38px;
          height: 32px;
          color: #fff;
          border-radius: 20px 0 0 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      #searchInput {
        padding-left: 40px;
        color: #666;
        border: 1px solid @color-secondary;
        border-radius: 20px;
        width: 200px;
        transition: width 0.5s ease-in-out;
      }

      #searchInput::placeholder {
        color: #8d8d8d;
      }

      #searchInput:focus {
        width: 280px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(51, 51, 51, .275);
      }

      .has-avatar {
        float: left;

        >a {
          color: @link-color;

          &:hover {
            background-color: @link-hover-bgcolor;
          }
        }

        .notice {
          position: absolute;
          margin-top: -4px;
          margin-left: -4px;
        }
      }

      .icon {
        font-size: 21px;
      }
    }
  }
}

/* header end */

.modal {
  .modal-body {
    display: flex;
    justify-content: space-around;

    .basic {
      flex-basis: 20%;
      padding-top: 30px;

      .uploader-files{
        display: none;
      }

      .desc {
        margin-bottom: 8px;
        font-size: 12px;
        text-align: left;
      }
    }

    .detail {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;
      }
    }

    .password-edit {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;

        .input-control-label-left {
          width: 80px;
        }

        .form-control {
          padding-left: 80px;
        }
      }
    }
  }
}

/* side start */
#side {
  position: fixed;
  z-index: 1;
  top: 50px;
  bottom: 36px;
  left: 0;
  overflow: hidden;
  width: 230px;
  transition: width .5s ease-in-out;

  >.menu-main {
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: @sidebar-bgcolor;

    &::-webkit-scrollbar {
      display: none;
    }

    >.tree-menu {
      width: 230px;
      border: none;
      border-radius: 0;

      li.active {
        >a {
          background-color: #2b373d;
          color: @nav-item-native-color;
        }
      }

      li {
        a {
          border: none;
          color: @nav-item-color;

          &:hover {
            background-color: #2b373d;
          }
        }
      }
    }
  }
}

/* side end */

/* main start */
#main {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 230px;
  padding: 0 10px 40px 10px;
  transition: left .5s ease-in-out;
  background-color: @main-bgcolor;
}

#tabs-container {
  min-height: 100%;

  .tabs-navbar {
    position: absolute;
    top: -40px;
    left: 40px;
    right: 350px;

    .tabs-nav {
      height: auto;
      border-bottom: none;

      .tab-nav-item {
        .tab-nav-link {
          display: flex;
          border: none;
          height: 36px;
          padding: 8px;
          align-items: center;
          color: #777;
          background-color: #e4e4e4;
          > .icon {
            position: static;
          }

          > .title {
            max-width: 100px;
            position: static;
            padding-left: 4px;
          }

          > .close {
            top: 8px;
          }
        }
      }

      .tab-nav-item.active {
        .tab-nav-link {
          color: #333;
          background-color: #d0d0d0;
        }
      }
    }
  }

  .tabs-container {
    top: 10px;
  }
}

/* main end */

/* footer start */
#footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;

  .breadcrumb {
    margin-bottom: 0;

    li:not(:first-child) {
      &::before {
        content: '>';
      }
    }
  }
}
/* footer end */

html,
body {
  height: 100%;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Microsoft YaHei"
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif;
}

/* header start */
#header {
  position: fixed;
  z-index: 10;
  top: 0;
  display: flex;
  width: 100%;
  height: 50px;

  .brand-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    width: 230px;
    height: 100%;
    transition: width .5s ease-in-out;
    white-space: nowrap;
    word-break: break-all;
    background-color: @brand-bgcolor;

    .navbar-brand {
      overflow: hidden;
      color: @brand-color;

      .title {
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        white-space: nowrap;
        word-break: break-all;
        font-size: @font-size-large;
      }
    }
  }

  .navbar-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    padding-right: 50px;
    border-left: 1px solid @brand-border-color;
    background-color: @color-back;
    box-shadow: 0 1px 4px @box-shadow-color;

    #mainMenuToggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      cursor: pointer;
      color: @link-color;

      .icon {
        font-size: 21px;
      }

      .icon-bars {
        display: none;
      }

      .icon-times {
        display: inline-block;
      }

      &:hover {
        background-color: @link-hover-bgcolor;
      }
    }

    .navbar-nav {
      display: flex;
      align-items: center;

      #search {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        margin-right: 10px;

        .icon-search-container {
          position: absolute;
          background-color: @color-secondary;
          left: 0;
          top: 0;
          width: 38px;
          height: 32px;
          color: #fff;
          border-radius: 20px 0 0 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      #searchInput {
        padding-left: 40px;
        color: #666;
        border: 1px solid @color-secondary;
        border-radius: 20px;
        width: 200px;
        transition: width 0.5s ease-in-out;
      }

      #searchInput::placeholder {
        color: #8d8d8d;
      }

      #searchInput:focus {
        width: 280px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(51, 51, 51, .275);
      }

      .has-avatar {
        float: left;

        >a {
          color: @link-color;

          &:hover {
            background-color: @link-hover-bgcolor;
          }
        }

        .notice {
          position: absolute;
          margin-top: -4px;
          margin-left: -4px;
        }
      }

      .icon {
        font-size: 21px;
      }
    }
  }
}

/* header end */

.modal {
  .modal-body {
    display: flex;
    justify-content: space-around;

    .basic {
      flex-basis: 20%;
      padding-top: 30px;

      .uploader-files{
        display: none;
      }

      .desc {
        margin-bottom: 8px;
        font-size: 12px;
        text-align: left;
      }
    }

    .detail {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;
      }
    }

    .password-edit {
      flex-basis: 30%;

      .has-label-left {
        margin-bottom: 10px;

        .input-control-label-left {
          width: 80px;
        }

        .form-control {
          padding-left: 80px;
        }
      }
    }
  }
}

/* side start */
#side {
  position: fixed;
  z-index: 1;
  top: 50px;
  bottom: 36px;
  left: 0;
  overflow: hidden;
  width: 230px;
  transition: width .5s ease-in-out;

  >.menu-main {
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: @sidebar-bgcolor;

    &::-webkit-scrollbar {
      display: none;
    }

    >.tree-menu {
      width: 230px;
      border: none;
      border-radius: 0;

      li.active {
        >a {
          background-color: #2b373d;
          color: @nav-item-native-color;
        }
      }

      li {
        a {
          border: none;
          color: @nav-item-color;

          &:hover {
            background-color: #2b373d;
          }
        }
      }
    }
  }
}

/* side end */

/* main start */
#main {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 230px;
  padding: 0 10px 40px 10px;
  transition: left .5s ease-in-out;
  background-color: @main-bgcolor;
}

#tabs-container {
  min-height: 100%;
}

/* main end */

/* footer start */
#footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;

  .breadcrumb {
    margin-bottom: 0;

    li:not(:first-child) {
      &::before {
        content: '>';
      }
    }
  }
}
/* footer end */