@import "~bootstrap/less/bootstrap.less";
@import "~font-awesome/less/font-awesome.less";
@import "../app/**/*.less";
@import "./animations.less";
@import "./colors.less";
@import "./mobile.less";
@import (inline) "~guanlecoja-ui/dist/styles.css";
/* base css for angular, don't display anything until angular is running */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

// Dashboards which use SVG to draw contents such as waterfall may require
//  setting  body height to 100vh. (100% of viewport height)
//  e.g. Waterfall uses this, otherwise the contents do not appear.
// The controller dynamically adds and removes this class to body
//   when entering and leaving Waterfall.
//
//  (note: adding height:100vh to a div also would solve this problem
//   except that causes the dialogs to make the SVG disappear due to
//   the dialog setting the body to overflow:hidden via modal-open rule.)
body.hundredpercent {
  height: 100vh;
}

/* modal dialog customizations */
@media screen {
  .modal-xlg {
    .modal-dialog {
        width: 90%;
    }
    /*Sets the maximum height of the modal body to 80% of the screen height*/
    .modal-body {
        overflow-y: auto;
        max-height: 80vh;
    }
  }

  /* border-radius looks strange for navbar,
     on lower screen sizes it is 0 by default */
  .navbar-static-top {
    border-radius: 0;
  }

}

/* make the sidebar be on the back of the modals dialog */
.sidebar {
    z-index: (@zindex-modal - 1) !important;
}

/* button bar inside the breadcrum, used for forcesched buttons */
.breadcrumb .btn {
  height: 29px;
  margin-top: -5px;
  padding-top: 4px;
}

.breadcrumb > li + li.pull-right:before {
  content: " ";
  padding: 0 2px;
}

/* status badge */
.badge-status {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: @font-size-small;
  font-weight: @badge-font-weight;
  line-height: @badge-line-height;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  border-radius: @badge-border-radius;
  transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
  .badge-active{
      display: none;
  }
  &:hover,
  &:focus {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    .badge-active{
        display: inline-block;
    }
    .badge-inactive{
        display: none;
    }
  }
}

.clickable {
  cursor: pointer
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.select-content {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* https://danoc.me/blog/css-prevent-copy/
Firefox will insert newlines if the selection go over a no-select span, so we need to implement them with ::before
*/
[data-linenumber-content]::before,
[data-linenumber-content--before]::before,
[data-linenumber-content--after]::after {
  content: attr(data-linenumber-content);
  color: #c7c7c7;
  padding-right: 10px;
}

img.avatar {
  background-color: #ccc;
  border-radius: 50%;
  height: 40px;
  margin: -10px;
  width: 40px;
}

.change-avatar {
  background-size: 16px 16px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
  height: 20px;
  width: 20px;
  overflow: hidden;
  img {
    height: 20px;
    width: 20px;
    background-color: #ccc
  }
}

.changedetails > .no-select > * {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

li.unstyled{
  list-style: none;
}
.no-margin{
  margin: 0px !important;
}
.mouse-over-only  {display: none;}
span:hover>.mouse-over-only  {display: inline;}

/* flex row will make the row grow automatically given the size of the content
   This will make sure all the inside div will fill all content.
   This is useful when you want to create a row with one left and one right
   the level of grow give the importance of the div. The more it has grow the more it will win
   space when fighting against the other divs
   You can use it with following jade code:
   .flex-row
      .flex-grow-1  left content
      .flex-grow-1
          .pull-right right content

*/
.flex-row {
  display: flex;
  flex-flow: row;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
    .flex-grow-1 {
        flex-grow: 1
    }
    .flex-grow-2 {
        flex-grow: 2
    }
    .flex-grow-3 {
        flex-grow: 3
    }
    .flex-grow-4 {
        flex-grow: 4
    }
}

/* Buildsummary tooltip class */
.tooltip.buildsummarytooltipstyle .tooltip-inner {
    border: 1px;
    padding: 1px;
    min-width: 600px;
    color: #262626;
}

/* glyphicon to font awesome translation, for angular-bootstrap-multiselect */
.glyphicon { font-family: 'FontAwesome'; }
.glyphicon-ok:before { content: @fa-var-check; }
.glyphicon-remove:before { content: @fa-var-times; }