Files
cms_thermo_active/Step/wwwroot/assets/styles/base/process-info.less
T
2018-03-27 17:07:53 +02:00

132 lines
2.5 KiB
Plaintext

// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@width: 280px;
@height: 64px;
.turn-up {
.process-info {
display: none;
}
}
.process-container {
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
overflow-x: auto;
overflow-y: visible;
height: 100%;
align-items: center;
border: none;
&::-webkit-scrollbar {
border-radius: 5px;
height: 3px;
background-color: rgba(0, 0, 0, 0.05);
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
height: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
}
.process-info {
background-color: @color-white;
width: @width;
min-width: @width;
max-width: @width;
height: @height;
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
margin: 0 9px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
.counter {
width: 72px;
min-width: 72px;
height: @height;
background-color: @color-duck-egg-blue;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.content {
display: flex;
color: @color-squash;
align-items: center; // max-width: 140px;
width: 100%;
overflow: hidden;
flex-flow: column;
align-items: flex-start;
justify-content: center;
.processname{
color: @color-greyish-brown;
}
}
.status {
width: @height;
height: @height;
min-width: @height;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: @color-squash;
}
.content.RUN,
.status.RUN {
color: @color-green;
}
.content.READY,
.status.READY{
color: @color-clear-blue;
}
}
.process-selection{
position: absolute;
width: 48px;
height:790px;
background-color: @color-battleship-grey;
.process{
font-size: 48px;
font-weight: 600;
color:#fff;
height: 148px;
box-sizing: border-box;
border-bottom: 4px solid #fff;
-webkit-tap-highlight-color: transparent;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
cursor: pointer;
small{
font-size: 18px;
font-weight: normal;
}
&.selected{
cursor: default;
background-color: #4e585e;
}
&:active:not(.selected){
background-color: @color-black-50;
}
}
}