io.parrots
Version:
Parrots.io App
521 lines (515 loc) • 17.1 kB
text/less
.parrots-page-preferences {
display: block;
width: 100%;
height: 100%;
position: absolute;
>.menu-preferences-add-right {
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;
}
.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;
}
>.wrappre-body-preferences-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-list-sql {
.wrapper-under-line(40pt);
align-items: center;
>.icon-right {
padding-left: 12px;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
&:before {
cursor: pointer;
content: "E";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.icon-down {
padding-left: 12px;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: @CLR_BRAND;
&:before {
cursor: pointer;
content: "K";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.label-value-sql {
margin-left: 5%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
>.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-list-sql:hover {
background-color: extract(@CLR_1, 8);
}
}
>.wrappre-body-preferences-right {
display: block;
width: 75%;
height: 100%;
position: absolute;
right: 0;
>.show-not-select-classses {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: extract(@CLR_1, 1);
.FC2();
font-weight: bold;
>.wrapper-no-data-and-add-prefernes {
display: block;
>.label-no-data {
display: flex;
justify-content: center;
}
>.link-add-prefernes {
display: flex;
justify-content: center;
cursor: pointer;
color: extract(@CLR_P, 7);
}
}
}
>.wrapper-head-preferences {
.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(8%);
}
>.label-header-condition-template {
.SET_CENTER(7%);
margin-right: 13%;
justify-content: flex-start;
margin-left: 2%;
cursor: pointer;
}
>.label-header-size-language-format-layout-engine {
.SET_CENTER(9%);
cursor: pointer;
}
>.label-header-end {
.SET_CENTER(5%);
cursor: pointer;
}
}
>.wrapper-body-preferences-none {
display: none;
}
>.wrapper-body-preferences {
display: block;
height: 100%;
width: 100%;
padding-top: 122pt;
>.wrapper-list-preferences {
.wrapper-under-line();
cursor: unset;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.label-body-number {
.SET_CENTER(8%);
}
>.label-body-condition-template {
.SET_CENTER(20%);
justify-content: flex-start;
margin-left: 2%;
}
>.label-body-size-language-format-layout-engine {
.SET_CENTER(9%);
&:before {
content: "";
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
>.label-body-icon-edit {
.SET_CENTER(5%);
cursor: pointer;
&:before {
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
}
}
}
>.nav-add-preferences {
.nav-bar-side();
>.wrapper-label-head-nav-add-preferences {
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-preferences {
margin-left: 2%;
.FC3();
font-weight: bold;
}
}
>.label-description-nav-add-preferences {
display: flex;
width: 84%;
margin-left: 6.5%;
.FC0();
color: extract(@CLR_1, 4);
}
>.wrapper-condition {
display: block;
width: 100%;
height: 62pt;
border-top: 0.7px solid extract(@CLR_1, 7);
margin-top: 1.5%;
div {
display: flex;
width: 100%;
>.label-condition-title {
display: flex;
.FC2();
margin-left: 3%;
margin-top: 1%;
}
>.wrapper-material-text-box {
display: flex;
width: 40%;
margin-left: 2%;
margin-top: -1.1%;
material-text-box {
width: 100%;
}
}
}
>.label-condition-description {
display: flex;
.FC0();
margin-left: 3%;
margin-top: 0.5%;
color: extract(@CLR_1, 4);
}
}
>.wrapper-contents-nav {
display: flex;
height: 345pt;
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, 4);
}
>.wrapper-content-left {
display: block;
height: 100%;
width: 33.33%;
border-right: 0.7px solid extract(@CLR_1, 7);
>.wrapper-list-template {
width: 99.8%;
height: 70%;
margin-top: 20pt;
border-top: 1px solid extract(@CLR_1, 7);
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.list-template {
.no-select;
.wrapper-under-line(52pt);
align-items: center;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.avatar-template {
margin-left: 5%;
height: 40px;
width: 40px;
border: 0.7px solid extract(@CLR_1, 6);
}
>.wrapper-label-template-name {
display: block;
margin-left: 5%;
width: 72%;
>.label-template-name {
display: flex;
}
>.label-template-description {
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 3);
}
}
>.icon-selected-user {
display: flex;
height: 26pt;
align-items: center;
color: extract(@CLR_P, 4);
margin-right: 3%;
&:before {
content: "y";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
}
}
}
>.wrapper-content-center {
display: block;
height: 100%;
width: 33.33%;
.wrapper-material-simple-dropdown {
display: flex;
width: 80%;
margin-left: 10%;
margin-top: 1%;
material-simple-dropdown {
width: 100%;
}
}
}
>.wrapper-content-right {
display: block;
height: 100%;
width: 31.5%;
border-left: 0.7px solid extract(@CLR_1, 7);
>.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: 25pt;
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-btn-nav-preferences {
display: flex;
justify-content: flex-end;
margin-right: 3%;
margin-top: 3%;
>.btn-back-nav-add-preferences {
.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-preferences {
.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;
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
.label-desccription-left {
.FC0();
}
.wrapper-head-preferences {
.FC0();
}
.wrapper-body-preferences {
.FC0();
}
}