io.parrots
Version:
Parrots.io App
638 lines (637 loc) • 22.1 kB
text/less
.parrots-page-template {
display: block;
width: 100%;
height: 100%;
>.menu-new-collection {
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-template {
display: flex;
position: absolute;
width: 100%;
height: 100%;
padding-top: 72pt;
>.wrapper-body-template-left {
display: block;
width: 20%;
height: 100%;
background-color: extract(@CLR_1, 9);
border-right: 0.7px solid extract(@CLR_1, 6);
>.wrapper-type-template {
.no-select;
.wrapper-under-line(72pt);
width: 99.5%;
align-items: center;
&:hover {
background-color: extract(@CLR_1, 7);
}
>.img-type-template {
margin-left: 15px;
width: 55px;
height: 55px;
}
>.wrapper-title-type-template {
display: inline-block;
padding-left: 3%;
>.type-template-text-title {
display: flex;
font-weight: bold;
height: 20px;
margin-bottom: 4px;
width: 200px;
}
>.type-template-text-description {
display: flex;
color: extract(@CLR_1, 3);
font-size: 8pt;
height: 16px;
width: 200px;
}
}
}
.selected-type-template {
background-color: extract(@CLR_1, 8);
}
}
>.wrapper-body-template-right {
display: block;
width: 80%;
height: 100%;
>.wrapper-none{
display: none ;
}
.wrapper-body-templates {
display: block;
width: 100%;
height: 100%;
>.wrapper-icon-reload {
width: 80% ;
}
>.show-wrapper-icon-reload {
top: 100pt ;
}
>.reloader-manual {
width: 80% ;
}
>.wrapper-head-template {
display: flex;
width: 88%;
height: 72pt;
margin-left: 6%;
margin-bottom: 10pt;
>.icon-template-custom {
display: flex;
width: 75px;
height: 75px;
margin-top: 13pt;
}
>.wrapper-head-label {
display: block;
margin-left: 1%;
>.label-title {
display: flex;
.FC2();
font-weight: bold;
margin-top: 25pt;
}
>.wrapper-below-title {
display: flex;
>.label-desccription {
display: flex;
.FC0();
color: extract(@CLR_1,1);
}
}
}
}
>.wrapper-set-template {
display: block;
width: 88%;
margin-left: 6%;
>.wrapper-name-template {
display: flex;
width: 100%;
height: 32pt;
padding-top: 10pt;
border-bottom: 0.7px solid extract(@CLR_1, 6);
>.label-name-template {
display: flex;
width: 75%;
justify-content: flex-start;
font-weight: bold;
}
>.label-all-template {
display: flex;
width: 100px;
.FC0();
color: extract(@CLR_1, 1);
margin-left: 10%;
}
>.label-all-template-installed {
margin-left: 5%;
}
>.icon-edit-template {
display: flex;
margin-top: -11pt;
cursor: pointer;
&:before {
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 25pt;
}
}
>.wrapper-version-template {
display: flex;
}
}
>.wrapper-list-template {
width: 98%;
margin-left: 2%;
>.list-template {
display: block;
height: 225pt;
padding: 25px 15px 25px 15px;
>.img-list-template {
display: flex;
width: 200px;
height: 200px;
background-color: extract(@CLR_1,9);
cursor: pointer;
}
>.add-template {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: extract(@CLR_1, 7);
border: 1px dashed extract(@CLR_1, 3);
cursor: pointer;
>.icon-plus {
color: extract(@CLR_1, 3);
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
}
>.load-more-template {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: extract(@CLR_1, 7);
border: 1px dashed extract(@CLR_1, 3);
cursor: pointer;
.material-icon-loader {
opacity: 1 ;
}
>.load-more {
color: extract(@CLR_1, 1);
}
}
>.selected {
border: 0.7px solid @CLR_BRAND;
}
>.label-title-list-template {
display: flex;
font-weight: bold;
margin-top: 10pt;
}
>.label-desccription-list-template {
display: flex;
.FC0();
color: extract(@CLR_1,1);
}
}
}
}
}
}
}
.wrapper-file-selector {
display: flex;
margin-top: 20pt;
margin-left: 35px;
width: 295px;
height: 150pt;
}
.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
.label-title-nav-body-template {
display: flex;
.FC1();
font-weight: bold;
margin-top: 10%;
margin-left: 10%;
}
.label-description-nav-body-template {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
margin-left: 10%;
margin-bottom: 10%;
}
.btn-delete-file {
display: flex;
margin-left: 10%;
margin-top: 5%;
}
>.nav-edit-custom-template {
.nav-bar-side(60%);
>.wrapper-label-head-nav-head-template {
display: flex;
width: 100%;
height: 80pt;
margin-top: 10pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.img-template-nav {
width: 75px;
height: 75px;
margin-left: 4%;
}
>.wrapper-title-description-nav-head-template {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-nav-head-template {
display: flex;
.FC1();
font-weight: bold;
}
>.label-description-nav-head-template {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
>.wrapper-tab-view-upload {
display: flex;
width: 20%;
height: 80pt;
color: extract(@CLR_1, 1);
align-items: flex-end;
position: absolute;
right: 0;
>.btn-tab-view {
display: flex;
width: 50%;
height: 35pt;
cursor: pointer;
align-items: center;
justify-content: center;
background-color: extract(@CLR_1, 8);
border: 0.7px solid extract(@CLR_1, 7);
}
>.btn-tab-view-none {
color: extract(@CLR_1, 5) ;
cursor: not-allowed ;
}
>.btn-tab-upload {
display: flex;
width: 50%;
height: 35pt;
cursor: pointer;
align-items: center;
justify-content: center;
background-color: extract(@CLR_1, 8);
border: 0.7px solid extract(@CLR_1, 7);
}
>.select-tab {
background-color: extract(@CLR_1, 4) ;
}
}
}
>.wrapper-body-nav-template {
display: flex;
width: 100%;
height: 380pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.wrapper-body-left {
display: block;
width: 50%;
height: 100%;
border-right: 0.7px solid extract(@CLR_1, 7);
padding-bottom: 10pt;
.wrapper-label-layout {
display: flex;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
}
.wrapper-label-value {
display: flex;
align-items: center;
margin-left: 10%;
height: 50pt;
// margin-top: 5%;
}
// .wrapper-label-value {
// display: flex;
// margin-left: 10%;
// margin-top: 5%;
// }
.label-data {
display: flex;
width: 30%;
color: extract(@CLR_1,3);
}
.label-value {
display: flex;
align-items: center;
margin-left: 10%;
.material-text-box {
margin-top: unset ;
}
}
}
>.wrapper-body-right {
display: block;
width: 50%;
height: 100%;
>.wrapper-list-file-upload {
display: block;
width: 100%;
height: 70%;
>.list-file-upload {
display: flex;
width: 100%;
height: 40pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
}
}
}
}
>.label-below-description-nav-template {
display: flex;
margin-left: 5.5%;
.FC0();
margin-top: 2%;
color: extract(@CLR_1, 3);
}
>.label-below-download-nav-template {
display: flex;
margin-left: 5.5%;
.FC1();
margin-top: 2%;
font-weight: bold;
}
>.label-below-delete-nav-template {
display: flex;
margin-left: 5.5%;
bottom: 100pt;
.FC1();
margin-top: 1%;
font-weight: bold;
}
>.wrapper-btn-nav-template {
display: flex;
justify-content: flex-end;
margin-right: 3%;
margin-top: 50pt;
>.btn-back-nav-template {
.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-template {
.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);
}
}
}
>.nav-add-edit-collection {
.nav-bar-side(365px);
>.wrapper-label-head-nav-head-template {
display: flex;
width: 100%;
height: 80pt;
margin-top: 10pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.img-template-nav {
width: 75px;
height: 75px;
margin-left: 5%;
}
>.wrapper-title-description-nav-head-template {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-nav-head-template {
display: flex;
.FC1();
font-weight: bold;
}
>.label-description-nav-head-template {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
}
>.wrapper-body-nav-template {
display: block;
width: 100%;
height: 330pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.wrapper-material {
display: flex;
width: 80%;
margin-left: 10%;
material-text-box {
width: 100%;
}
material-text-area {
width: 100%;
}
}
}
>.wrapper-btn-nav-template {
display: flex;
justify-content: flex-end;
margin-right: 7%;
margin-top: 7%;
>.btn-back-nav-template {
.btn-box(85px, 30pt, extract(@CLR_0, 9));
display: flex;
margin-right: 4%;
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-nav-template {
.btn-box(140px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
}
>.btn-submit-none {
color: extract(@CLR_0, 9);
background-color: extract(@CLR_1, 8);
}
}
}
>.nav-edit-default-template {
.nav-bar-side(65%);
>.wrapper-label-head-nav-head-template {
display: flex;
width: 100%;
height: 80pt;
margin-top: 10pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.img-template-nav {
width: 75px;
height: 75px;
margin-left: 5%;
}
>.wrapper-title-description-nav-head-template {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-nav-head-template {
display: flex;
.FC1();
font-weight: bold;
}
>.label-description-nav-head-template {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
}
>.wrapper-body-nav-template {
display: flex;
width: 100%;
height: 390pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.wrapper-body-nav-template-left {
display: block;
width: 50%;
height: 100%;
border-right: 0.7px solid extract(@CLR_1, 7);
>.wrapper-preview-template {
display: flex;
cursor: pointer;
margin-left: 5%;
margin-top: 5%;
color: extract(@CLR_0, 7);
width: 90%;
height: 90%;
align-items: center;
justify-content: center;
box-shadow: 0px 3px 13px extract(@CLR_1, 6);
}
}
>.wrapper-body-nav-template-right {
display: block;
width: 50%;
height: 100%;
.wrapper-label-layout {
display: flex;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
}
.wrapper-label-value {
display: flex;
margin-left: 10%;
margin-top: 5%;
}
.label-data {
display: flex;
width: 30%;
color: extract(@CLR_1,3);
}
.label-value {
display: flex;
margin-left: 10%;
}
}
}
>.label-below-description-nav-template {
display: flex;
margin-left: 5.5%;
.FC0();
margin-top: 5%;
color: extract(@CLR_1, 3);
}
>.wrapper-btn-nav-template {
display: flex;
justify-content: flex-end;
margin-right: 7%;
margin-top: 3%;
>.btn-back-nav-template {
.btn-box(85px, 30pt, extract(@CLR_0, 9));
display: flex;
margin-right: 4%;
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-nav-template {
.btn-box(140px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
}
>.btn-submit-none {
color: extract(@CLR_0, 9);
background-color: extract(@CLR_1, 8);
}
}
}
}