io.parrots
Version:
Parrots.io App
454 lines (452 loc) • 14.9 kB
text/less
.parrots-page-schedule {
display: block;
width: 100%;
height: 100%;
position: absolute;
>.wrapper-menu-schedule-right-on-search {
width: 385px ;
}
>.wrapper-menu-schedule-right {
display: flex;
position: absolute;
width: 270px;
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: 85px;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "s";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
>.icon-add {
display: flex;
width: 185px;
height: 100%;
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: #f5f5f5;
}
>.wrapper-head-schedule {
.no-select;
.wrapper-under-line(52pt, extract(@CLR_1, 8));
position: absolute;
top: 72pt;
cursor: unset;
font-weight: bold;
>.label-header-number {
display: flex;
align-items: center;
justify-content: center;
width: 6%;
height: 100%;
>.header-number-preload {
.text-preload(30px, 12pt);
}
}
>.label-header-name {
display: flex;
align-items: center;
margin-right: 55%;
margin-left: 10px;
width: 5%;
height: 100%;
cursor: pointer;
>.header-name-preload {
.text-preload(80px, 12pt);
}
}
>.label-header-create-time {
display: flex;
align-items: center;
justify-content: center;
width: 19%;
height: 100%;
cursor: pointer;
>.header-create-time-preload {
.text-preload(70px, 12pt);
}
}
>.label-header-trigger {
display: flex;
margin-left: 1%;
align-items: center;
width: 14%;
height: 100%;
>.header-trigger-preload {
.text-preload(75px, 12pt);
}
}
}
>.wrapper-content-schedule {
display: block;
padding-top: 122pt;
height: 100%;
width: 100%;
>.wrapper-body-schedule {
display: block;
height: 100%;
width: 100%;
>.wrapper-list-schedule {
.wrapper-under-line();
cursor: unset;
>.label-number {
display: flex;
width: 6%;
height: 100%;
justify-content: center;
align-items: center;
>.label-number-preload {
.icon-preload(25px);
}
}
>.label-name {
display: flex;
margin-left: 10px;
width: 60%;
height: 100%;
align-items: center;
>.label-name-preload {
.text-preload(300px, 12pt, extract(@CLR_1, 7));
}
}
>.label-create-time {
display: flex;
align-items: center;
justify-content: center;
width: 19%;
height: 100%;
>.label-create-time-preload {
.text-preload(100px, 12pt, extract(@CLR_1, 7));
}
}
>.icon-trigger-preload {
display: flex;
width: 5%;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "";
.icon-preload(30px);
}
}
>.icon-trigger {
display: flex;
width: 5%;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "q";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
>.icon-trigger-none {
color: extract(@CLR_1, 1);
cursor: not-allowed;
}
.wrapper-switch {
display: flex;
width: 5%;
height: 100%;
cursor: pointer;
align-items: center;
justify-content: center;
.phx-switch {
display: flex;
cursor: pointer;
}
.phx-switch input.toggle + label {
margin-bottom: unset ;
}
.phx-switch input.toggle + label:before {
background: @CLR_BRAND;
}
.phx-switch input.toggle:checked + label:after {
box-shadow: inset 0 0 0 1px @CLR_BRAND, 0 2px 4px rgba(0, 0, 0, 0.2);
}
}
>.icon-edit {
display: flex;
width: 5%;
height: 100%;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
}
}
}
.wrapper-list-schedule:hover {
background-color: extract(@CLR_1, 8);
}
>.nav-add-schedule {
.nav-bar-side();
>.wrapper-label-head-nav-add-schedule {
display: flex;
margin-left: 3%;
margin-top: 4%;
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-schedule {
margin-left: 2%;
.FC3();
font-weight: bold;
}
}
>.wrapper-edit-head {
margin-top: 2.5%;
}
>.label-description-nav-add-schedule {
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%;
}
}
}
.none {
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-schedule {
display: flex;
justify-content: flex-end;
margin-right: 3%;
margin-top: 3%;
>.btn-back-nav-add-schedule {
.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-schedule {
.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);
}
}
}
}
.phx-dialog {
phx-component-dialog >.phx-component-dialog {
.dialog-head-trigger {
height: 70pt;
background-color: @CLR_BRAND ;
}
>.dialog-body-trigger {
height: 330pt ;
}
>.dialog-footer-trigger {
display: none;
}
}
}