io.parrots
Version:
Parrots.io App
423 lines • 13.3 kB
text/less
@keyframes progress-bar-stripes {
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}
.parrots-page-job {
display: block;
width: 100%;
height: 100%;
position: relative;
>.wrapper-menu-job-right-on-search {
width: 600px ;
}
>.wrapper-menu-job-right {
display: flex;
position: absolute;
width: 450px;
height: 72pt;
right: 0;
z-index: 3;
>.wrapper-material-search {
display: flex;
height: 72pt;
width: 200px;
>.wrapper-material-text-box {
display: flex;
width: 150px;
.material-text-box {
margin-top: 4.91pt ;
width: 150px;
.textbox-wrapper {
background-color: transparent ;
.form-control {
height: 25px;
}
}
}
}
>.icon-close-search {
display: flex;
width: 50px;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "m";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
}
>.icon-search {
display: flex;
width: 50px;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "s";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
>.icon-add {
display: flex;
width: 150px;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
.selected {
color: @CLR_BRAND;
}
>.icon-down {
display: flex;
width: 75px;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "K";
font-family: 'PhloxGlyphicons';
font-size: 12pt;
}
}
>.label-view {
display: flex;
width: 75px;
height: 100%;
justify-content: center;
align-items: center;
}
>.label-view-value {
display: flex;
width: 100px;
height: 100%;
justify-content: center;
align-items: center;
}
}
.SET_CENTER(@width){
display: flex;
align-items: center;
justify-content: center;
width: @width;
height: 100%;
}
>.blur-nav {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #f5f5f5;
}
>.wrapper-head-job {
.no-select;
.wrapper-under-line(122pt, extract(@CLR_1, 8));
position: absolute;
padding-top: 72pt;
cursor: unset;
font-weight: bold;
>.label-header-number {
.SET_CENTER(6%);
}
>.label-header-name {
.SET_CENTER(5%);
margin-right: 20%;
margin-left: 10px;
justify-content: left;
cursor: pointer;
}
>.label-header-start {
.SET_CENTER(15%);
cursor: pointer;
}
>.label-header-end {
.SET_CENTER(15%);
cursor: pointer;
}
>.label-header-status {
.SET_CENTER(11%);
cursor: pointer;
}
>.label-header-task {
.SET_CENTER(14%);
}
>.label-header-action {
.SET_CENTER(14%);
}
}
>.wrapper-content-job {
display: block;
padding-top: 122pt;
height: 100%;
width: 100%;
>.wrapper-body-job {
display: block;
height: 100%;
width: 100%;
>.wrapper-list-job {
.wrapper-under-line();
transition: all 0.5s ease 0s;
cursor: unset;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.label-body-number {
padding-left: 2px;
.SET_CENTER(6%);
}
>.label-body-name {
.SET_CENTER(25%);
margin-left: 10px;
justify-content: left;
}
>.label-body-start {
.SET_CENTER(15%);
}
>.label-body-end {
.SET_CENTER(15%);
}
>.label-body-status {
.SET_CENTER(11%);
>.progress-bar-job {
height: 6pt ;
width: 40%;
background-color: #8ce261;
animation: progress-bar-stripes 2s linear infinite;
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 25%,
transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%,
transparent 75%, transparent);
background-size: 20px 20px;
float: left;
font-size: 7pt;
line-height: 15pt;
color: @CLR_BRAND;
text-align: center;
transition: width 0.6s ease;
border-radius: 25px;
}
}
>.label-body-task {
.SET_CENTER(14%);
}
>.label-body-action {
cursor: pointer;
.SET_CENTER(14%);
&:hover {
color: @CLR_BRAND;
}
>.icon-interrupt {
.btn-box(15px, 15px, unset, @CLR_BRAND);
align-items: unset;
justify-content: unset;
}
}
}
>.status-completed-error {
color: extract(@CLR_1, 6) ;
}
}
}
>.nav-add-job {
.nav-bar-side();
>.wrapper-label-head-nav-add-job {
display: flex;
margin-left: 3%;
margin-top: 3%;
align-items: center;
>.icon-plus-nav {
display: flex;
margin-top: 1%;
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
>.icon-edit-nav {
display: flex;
margin-top: 1%;
margin-right: -1%;
&:before {
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
>.label-head-add-job {
margin-left: 2%;
.FC3();
font-weight: bold;
}
}
>.label-description-nav-add-job {
display: flex;
width: 84%;
margin-left: 6.5%;
.FC0();
color: extract(@CLR_1, 3);
}
>.wrapper-contents-nav {
display: flex;
margin-top: 4%;
height: 395pt;
width: 100%;
border-top: 0.7px solid extract(@CLR_1, 7);
border-bottom: 0.7px solid extract(@CLR_1, 7);
.label-head-content {
display: flex;
margin-top: 6%;
margin-left: 10%;
.FC2();
}
.label-description-content {
display: flex;
margin-top: 1%;
margin-left: 10%;
.FC0();
color: extract(@CLR_1, 1);
}
.wrapper-material {
display: flex;
width: 80%;
margin-left: 10%;
margin-top: 2%;
material-text-box {
width: 100%;
}
material-simple-dropdown {
width: 100%;
}
material-text-area {
width: 100%;
}
}
>.wrapper-content-left {
display: block;
height: 100%;
width: 33.33%;
border-right: 0.7px solid extract(@CLR_1, 7);
}
>.wrapper-content-center {
display: block;
height: 100%;
width: 33.33%;
>.wrapper-table-connfig {
display: block;
position: relative;
height: 60%;
width: 80%;
margin-top: 6%;
margin-left: 10%;
>.wrapper-row-configs {
display: block;
height: 88%;
width: 101.5%;
top: unset;
padding-top: unset;
>.phx-table-body {
display: block;
height: 100% ;
width: 100% ;
.selected {
background-color: @CLR_BRAND ;
border: 0.7px solid @CLR_BRAND ;
filter: unset ;
>.disable {
color: extract(@CLR_1, 9) ;
}
}
}
}
.wrapper-row-config {
display: flex;
height: 27pt;
width: 100%;
filter: unset ;
>.row-head-config-key {
display: flex;
height: 100%;
width: 50%;
justify-content: center;
align-items: center;
font-weight: bold;
background-color: @CLR_BRAND;
color: extract(@CLR_1, 9);
border: 0.7px solid extract(@CLR_1, 7);
}
>.row-head-config-value {
.row-head-config-key;
border-left: unset;
}
}
}
>.btn-add-column {
.btn-box(80%, 7.5%, extract(@CLR_0, 9), extract(@CLR_1, 8));
display: flex;
margin-left: 10%;
>.icon-add-column {
display: flex;
&:before {
content: "0";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
margin-top: 2%;
}
}
}
.m {
opacity: 0.5 ;
cursor: not-allowed ;
}
}
>.wrapper-content-right {
display: block;
height: 100%;
width: 31.5%;
border-left: 0.7px solid extract(@CLR_1, 7);
}
}
>.wrapper-btn-nav-job {
display: flex;
justify-content: flex-end;
margin-right: 3%;
margin-top: 3%;
>.btn-back-nav-add-job {
.btn-box(130px, 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-add-job {
.btn-box(220px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
}
>.btn-submit-none {
color: extract(@CLR_0, 9);
background-color: extract(@CLR_1, 8);
}
}
}
}