icingaweb2/public/css/components/layouts.less

@main-detail-main-width: 55%;

@controls-height: 26px;
@controls-padding: 4px;

/**
* Plain layout
**/

.icinga-container {

  .container-controls {
    position:absolute;
    right:0px;
    top:2px;
    text-align:right;
    height:20px;
    border: none;
    padding:0.3em;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    transition-duration:0.5s;
    &:hover {

      background-color:lighten(@color-emphasis,40%);
    }
  }

}

.icinga-container.dashboard {
  position: relative;
  box-shadow: 1px 1px 1px #ded;
  width: 31%;
  border: 1px solid grey;
  min-height: 200px;
  float:left;
  margin-left: 1%;
  margin-bottom: 1%;
}

.layout-plain {
  right: 0px;
  left: @navigation-bar-width;
  top: 0px;
  bottom:0px;
}

.icinga-container .controls {
  padding:5px;
  height: 25px;
  margin:0px;
  input {
    margin-right:0.5em;
  }
}

/**
* Two column Main/detail layout used for overviews
**/

.layout-main-detail {
  &.collapsed #icinga-main {
    right:0px;
    box-shadow: none;
  }

  &.collapsed #icinga-detail {
    display:hidden;
    left:100%;
  }

  -webkit-overflow-scrolling: touch;

  #icinga-main {
    position: absolute;
    left: @navigation-bar-width;

    right: 100-@main-detail-main-width;

    min-width: 400px;
    top: 0px;
    bottom: 0px;
    margin: 0 10px 0 10px;
    -webkit-transition: right 0.5s ease;
    -moz-transition: right 0.5s ease;
    -o-transition: right 0.5s ease;
    -ms-transition: right 0.5s ease;
    transition: right 0.5s ease;
    overflow-x:hidden;
    .content {
      position: absolute;
      top: @controls-height+@controls-padding+90px;
      bottom: 0px;
      overflow-y:auto;
      -webkit-overflow-scrolling: touch;
      left: 0px;
      right: -1px;
      @import 'details';

    }

    z-index:8;
  }
  #icinga-detail {
    position: absolute;
    top: 0px;
    left: @main-detail-main-width ;
    right: 0px;
    bottom: 0px;
    z-index:10;
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    transition: left 0.5s ease;
    background-color:white;
    /* border-left: 1px solid @color-black;*/

    .content {
      position: absolute;
      top: @controls-height+@controls-padding+74px;
      left: 0px;
      right: 0px;
      bottom:0px;
      padding:1em;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      @import 'details';
    }

  }

  .header {
    position: absolute;
    top: @controls-height+@controls-padding;
    left: 0px;
    right: 0px;
    height:74px;
    padding:1em;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    @import 'headers';
  }
}



/**
* End of main/detail layout
**/