icingaweb2/public/css/components/layouts.less

153 lines
2.7 KiB
Plaintext
Executable File

@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
**/