io.parrots
Version:
Parrots.io App
368 lines (366 loc) • 11.4 kB
text/less
.parrots-page-process {
display: flex;
width: 100%;
height: 100%;
>.menu-bpmn-new-process {
display: flex;
position: absolute;
right: 0;
z-index: 2;
width: 220px;
height: 72pt;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 12pt;
}
}
.selected {
color: @CLR_BRAND;
}
>.blur-nav {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: extract(@CLR_1, 8);
}
>.wrapper-body-process {
width: 94%;
height: 100%;
padding-top: 72pt;
margin-left: 6%;
>.wrapper-head-process {
display: block;
width: 90%;
height: 72pt;
margin-left: 1%;
>.label-title {
display: flex;
.FC2();
font-weight: bold;
margin-top: 25pt;
}
>.label-desccription {
display: flex;
.FC0();
color: extract(@CLR_1,1);
}
}
>.wrapper-list-process {
display: block;
margin-top: 12.5pt;
margin-bottom: 12.5pt;
>.img-list-process {
display: flex;
width: 200px;
height: 200px;
background-color: extract(@CLR_1,9);
cursor: pointer;
}
>.selected {
border: 0.7px solid @CLR_BRAND;
}
>.label-title-list-process {
display: flex;
font-weight: bold;
margin-top: 10pt;
}
>.label-desccription-list-process {
display: flex;
.FC0();
color: extract(@CLR_1,1);
}
}
>.wrapper-icon-reload {
left: 0 ;
}
>.reloader-manual {
left: 0 ;
}
>.icon-loading-next {
left: -6% ;
position: relative ;
}
>.loadMore {
left: -6% ;
position: relative ;
}
}
.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
.label-title-nav-body-process {
display: flex;
.FC1();
font-weight: bold;
margin-top: 10%;
margin-left: 10%;
}
.label-description-nav-body-process {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
margin-left: 10%;
margin-bottom: 10%;
}
.btn-delete-file {
.no-select();
display: flex;
margin-left: 10%;
margin-top: 5%;
cursor: pointer;
&:hover {
color: extract(@CLR_P, 6);
}
}
.btn-delete-file-none {
color: extract(@CLR_1, 6) ;
cursor: not-allowed ;
}
>.nav-add-process {
.nav-bar-side(365px);
>.wrapper-label-head-nav-head-process {
display: flex;
width: 100%;
height: 80pt;
margin-top: 10pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.img-process-nav {
width: 75px;
height: 75px;
margin-left: 4%;
}
>.wrapper-title-description-nav-head-process {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-nav-head-process {
display: flex;
.FC1();
font-weight: bold;
}
>.label-description-nav-head-process {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
>.wrapper-file-selector {
display: flex;
margin-top: 20pt;
margin-left: 35px;
width: 295px;
height: 150pt;
}
}
}
>.wrapper-body-nav-process {
.wrapper-under-line(335pt);
display: block;
cursor: unset;
}
>.label-below-description-nav-process {
display: flex;
margin-left: 5.5%;
.FC0();
margin-top: 5%;
color: extract(@CLR_1, 3);
}
>.wrapper-btn-nav-process {
display: flex;
justify-content: flex-end;
margin-right: 4%;
margin-top: 8%;
>.btn-back-nav-process {
.btn-box(100px, 30pt, extract(@CLR_0, 9));
display: flex;
margin-right: 5%;
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-nav-process {
.btn-box(145px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
}
>.btn-submit-nav-process-none {
background-color: extract(@CLR_1, 8) ;
color: extract(@CLR_1, 1) ;
cursor: not-allowed ;
}
}
}
>.nav-edit-process {
.nav-bar-side(730px);
>.wrapper-label-head-nav-head-process {
display: flex;
width: 100%;
height: 80pt;
margin-top: 10pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.img-process-nav {
width: 75px;
height: 75px;
margin-left: 4%;
}
>.wrapper-title-description-nav-head-process {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-nav-head-process {
display: flex;
.FC1();
font-weight: bold;
}
>.label-description-nav-head-process {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
}
>.wrapper-body-nav-process {
.wrapper-under-line(335pt);
cursor: unset;
>.wrapper-body-left {
display: block;
width: 50%;
height: 100%;
border-right: 0.7px solid extract(@CLR_1, 7);
padding-bottom: 10pt;
}
>.wrapper-body-right {
display: block;
width: 50%;
height: 100%;
.material-icon-loader{
opacity: 1;
margin-top: 130pt;
margin-left: 162.5px;
}
>.list-process {
.wrapper-under-line(52pt);
align-items: center;
&:hover {
background-color: extract(@CLR_1, 7);
}
>.img-process {
margin-left: 15px;
width: 40px;
height: 40px;
}
>.wrapper-title-process {
display: inline-block;
padding-left: 5%;
>.process-text-title {
display: flex;
font-weight: bold;
height: 20px;
margin-bottom: 4px;
width: 210px;
}
>.process-text-description {
display: flex;
color: extract(@CLR_1, 3);
font-size: 8pt;
height: 16px;
width: 200px;
}
}
>.icon-selected-process {
display: flex;
height: 26pt;
margin-left: 40px;
align-items: center;
color: extract(@CLR_P, 4);
&:before {
content: "y";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
>.wrapper-switch-process {
display: flex;
height: 26pt;
margin-left: 17px;
justify-content: center;
align-items: center;
}
}
}
}
>.label-below-description-nav-process {
display: flex;
margin-left: 5.5%;
.FC0();
margin-top: 5%;
color: extract(@CLR_1, 3);
}
>.label-below-download-nav-process {
display: flex;
margin-left: 5.5%;
.FC1();
margin-top: 3%;
font-weight: bold;
}
>.label-below-delete-nav-process {
display: flex;
margin-left: 5.5%;
bottom: 100pt;
.FC1();
margin-top: 1%;
font-weight: bold;
}
>.wrapper-btn-nav-process {
display: flex;
justify-content: flex-end;
margin-right: 3%;
margin-top: 3%;
>.btn-back-nav-process {
.btn-box(100px, 30pt, extract(@CLR_0, 9));
display: flex;
margin-right: 2%;
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-nav-process {
.btn-box(145px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
}
>.btn-submit-nav-process-none {
background-color: extract(@CLR_1, 8) ;
color: extract(@CLR_1, 1) ;
cursor: not-allowed ;
}
}
}
.wrapper-file-selector {
display: flex;
margin-top: 20pt;
margin-left: 35px;
width: 295px;
height: 150pt;
}
}