io.parrots
Version:
Parrots.io App
477 lines (472 loc) • 15.2 kB
text/less
.SET_COLUMN_CENTER(@width){
display: flex;
align-items: center;
justify-content: center;
width: @width;
height: 100%;
font-weight: bold;
}
.SET_ROW_CENTER(@width){
.SET_COLUMN_CENTER(@width);
font-weight: normal;
}
.TEXT_OVER {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.parrots-page-monitor-bpmn {
display: flex;
position: absolute;
width: 100%;
height: 100%;
>.wrapper-body-monitor-left {
display: block;
width: 25%;
height: 100%;
position: absolute;
padding-top: 72pt;
left: 0;
background-color: extract(@CLR_1, 9);
border-right: 1.7px solid extract(@CLR_1, 7);
>.wrapper-head-left {
.wrapper-under-line(170pt);
padding: 12% 24px 24px 12%;
display: block;
cursor: unset;
>.label-title-left {
.FC2();
font-weight: bold;
}
>.label-desccription-left {
color: extract(@CLR_1, 3);
margin-top: 10pt;
}
}
>.wrapper-head-left-internal {
.wrapper-under-line(72pt);
align-items: center;
cursor: unset;
>.icon-back {
display: flex;
margin-left: 20px;
margin-right: 20px;
&:before {
cursor: pointer;
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
>.icon-head-internal-left {
width: 50px;
height: 50px;
}
>.wrapper-name-table-id-bpmn-internal {
display: block;
margin-left: 10px;
>.label-name-table-left {
display: flex;
.FC2();
font-weight: bold;
}
>.label-id-bpmn-internal-left {
display: flex;
width: 120px;
color: extract(@CLR_1, 3);
span {
.TEXT_OVER;
}
}
}
}
>.wrapper-head-variables-setting-left {
.wrapper-under-line(45pt);
background-color: unset;
cursor: unset;
>.label-head-variables-setting-left {
margin-left: 20px;
margin-top: 23pt;
color: extract(@CLR_1, 1);
}
}
>.list-variables-setting {
.wrapper-under-line(45pt);
align-items: center;
cursor: unset;
>.label-variables-setting {
display: flex;
margin-left: 20px;
}
>.value-variables-setting {
display: flex;
position: absolute;
right: 0;
margin-right: 70px;
}
>.icon-edit-variables-setting {
display: flex;
position: absolute;
right: 0;
margin-right: 20px;
height: 45pt;
align-items: center;
&:before {
cursor: pointer;
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 20pt;
}
}
}
>.wrapper-head-active-user-task-setting-left {
.wrapper-under-line(45pt);
background-color: unset;
cursor: unset;
>.label-head-active-user-task-setting-left {
margin-left: 20px;
margin-top: 23pt;
color: extract(@CLR_1, 1);
}
}
>.list-active-user-task-setting {
.wrapper-under-line(52pt);
align-items: center;
cursor: unset;
>.wrapper-active-user-task-setting {
display: block;
margin-left: 20px;
>.label-title-active-user-task-setting {
display: flex;
}
>.label-description-active-user-task-setting {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
>.icon-value-active-user-task-setting {
display: flex;
position: absolute;
right: 0;
margin-right: 70px;
height: 52pt;
align-items: center;
&:before {
cursor: pointer;
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 20pt;
}
}
>.icon-edit-active-user-task-setting {
display: flex;
position: absolute;
right: 0;
margin-right: 20px;
height: 52pt;
align-items: center;
&:before {
cursor: pointer;
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 20pt;
}
}
}
.wrapper-list-sql {
.wrapper-under-line(40pt);
align-items: center;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.icon-right {
padding-left: 12px;
&:before {
cursor: pointer;
content: "E";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.icon-down {
padding-left: 12px;
color: @CLR_BRAND;
&:before {
cursor: pointer;
content: "K";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.label-value-sql {
margin-left: 5%;
.TEXT_OVER;
}
>.parent-sql {
width: 80%;
}
>.children-sql {
width: 200%;
}
.icon-sql {
width: 25px;
height: 25px;
min-width: 25px;
margin-left: 16px;
}
.icon-arrow-right {
width: 100%;
justify-content: flex-end;
padding-right: 16px;
display: flex;
height: 100%;
align-items: center;
&:before {
content: "C";
font-family: 'PhloxGlyphicons';
font-size: 8pt;
}
}
}
.selected {
border: 0.7px solid @CLR_BRAND;
}
}
>.wrapper-body-monitor-right {
display: block;
width: 75%;
height: 100%;
position: absolute;
padding-top: 72pt;
right: 0;
background-color: extract(@CLR_1, 9);
>.no-select-class {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.FC2();
color: extract(@CLR_1, 3);
}
>.wrapper-head-monitor-right {
.wrapper-under-line(72pt);
cursor: unset;
>.wrapper-label-head-monitor-right {
display: block;
width: 25%;
height: 52pt;
margin-left: 5%;
margin-top: 20pt;
.label-title-head-monitor-right {
display: flex;
font-weight: bold;
}
.label-description-head-monitor-right {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
margin-top: 2%;
}
}
>.wrapper-material-right {
display: flex;
align-items: center;
position: absolute;
right: 180px;
width: 180px;
height: 72pt;
material-simple-dropdown {
width: 100%;
}
}
>.btn-show-heatmap {
display: flex;
position: absolute;
right: 0;
width: 180px;
height: 72pt;
align-items: center;
justify-content: center;
}
}
>.wrapper-canvas-bpmn {
display: flex;
border-bottom: 0.7px solid extract(@CLR_1, 7);
width: 100%;
height: 450pt;
.canvas-bpmn {
width: 100%;
height: 100%;
}
>.ui-resizable-s {
cursor: ns-resize;
}
>.wrapper-canvas-bpmn-internal {
display: flex;
border-right: 0.7px solid extract(@CLR_1, 7);
width: 93%;
height: 100%;
}
>.wrapper-controller-bpmn {
display: block;
width: 7%;
height: 100%;
>.btn-close-bpmn {
display: flex;
width: 100%;
height: 60pt;
justify-content: center;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
cursor: pointer;
&:before {
content: "Y";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
>.btn-sleep-bpmn {
display: flex;
width: 100%;
height: 60pt;
justify-content: center;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
cursor: pointer;
&:before {
content: "g";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
}
}
>.wrapper-column-bpmn {
.no-select;
.wrapper-under-line(52pt);
border: unset ;
background-color: extract(@CLR_1, 7);
cursor: unset;
>.label-column-number {
.SET_COLUMN_CENTER(10%);
}
>.label-column-id {
.SET_COLUMN_CENTER(22%);
margin-left: 3%;
justify-content: flex-start;
}
>.label-column-start-time {
.SET_COLUMN_CENTER(20%);
justify-content: flex-start;
}
>.label-column-business-key {
.SET_COLUMN_CENTER(25%);
}
>.label-column-state {
.SET_COLUMN_CENTER(15%);
}
>.label-column-activity-internal {
.SET_COLUMN_CENTER(15%);
margin-left: 5%;
justify-content: flex-start;
}
>.label-column-start-end-time-internal {
.SET_COLUMN_CENTER(17%);
margin-left: 3%;
justify-content: flex-start;
}
>.label-column-activity-instance-id-internal {
.SET_COLUMN_CENTER(15%);
margin-left: 3%;
justify-content: flex-start;
}
>.label-column-state-internal {
.SET_COLUMN_CENTER(15%);
margin-left: 10%;
}
}
// >.wrapper-content-row-bpmn {
// display: block;
// width: 100%;
// height: 520pt;
>.wrapper-row-bpmn {
.wrapper-under-line(52pt);
cursor: unset;
>.label-row-number {
.SET_ROW_CENTER(10%);
}
>.label-row-id {
.SET_ROW_CENTER(19%);
margin-left: 3%;
justify-content: flex-start;
color: extract(@CLR_P, 4);
cursor: pointer;
span {
.TEXT_OVER;
}
}
>.label-row-start-time {
.SET_ROW_CENTER(17%);
margin-left: 3%;
justify-content: flex-start;
span {
.TEXT_OVER;
}
}
>.label-row-business-key {
.SET_ROW_CENTER(22%);
margin-left: 3%;
span {
.TEXT_OVER;
}
}
>.label-row-state {
.SET_ROW_CENTER(15%);
margin-left: 3%;
color: extract(@CLR_K, 5);
&:before {
content: "P";
font-family: 'PhloxGlyphicons';
font-size: 8pt;
}
}
>.label-row-activity-internal {
.SET_COLUMN_CENTER(15%);
margin-left: 5%;
justify-content: flex-start;
color: extract(@CLR_P, 4);
span {
.TEXT_OVER;
}
}
>.label-row-start-end-time-internal {
.SET_ROW_CENTER(17%);
margin-left: 3%;
justify-content: flex-start;
span {
.TEXT_OVER;
}
}
>.label-row-activity-instance-id-internal {
.SET_ROW_CENTER(15%);
margin-left: 3%;
span {
.TEXT_OVER;
}
}
>.label-row-state-internal {
.SET_ROW_CENTER(15%);
margin-left: 10%;
color: extract(@CLR_K, 5);
&:before {
content: "P";
font-family: 'PhloxGlyphicons';
font-size: 8pt;
}
}
}
// }
}
}