io.parrots
Version:
Parrots.io App
291 lines • 9.96 kB
text/less
.parrots-page-settings {
display: flex;
width: 100%;
height: 100%;
>.wrappre-body-settings-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-settings-right {
display: block;
width: 75%;
height: 100%;
position: absolute;
padding-top: 72pt;
right: 0;
background-color: extract(@CLR_1, 9);
>.not-selected-class {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
.FC3();
color: extract(@CLR_1, 3);
}
.label-title-body-settings-right {
display: flex;
.FC2();
font-weight: bold;
margin-top: 15pt;
margin-left: 10%;
}
.label-description-body-settings-right {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
margin-left: 10%;
margin-top: 2%;
margin-bottom: 4%;
}
>.wrapper-label-head-data-type {
.wrapper-under-line(80pt);
cursor: unset;
align-items: center;
position: absolute;
>.img-template-nav {
width: 75px;
height: 75px;
margin-left: 4%;
}
>.wrapper-title-description-data-type-left {
display: block;
margin-left: 2%;
width: 60%;
>.label-title-data-type-left {
display: flex;
.FC2();
font-weight: bold;
}
>.label-description-data-type-left {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
}
}
>.btn-submit {
.btn-box(145px, 30pt, extract(@CLR_1, 9), @CLR_BRAND);
display: flex;
position: absolute;
right: 3%;
}
}
>.wrapper-data-type {
display: flex;
width: 100%;
height: 100%;
padding-top: 80pt;
>.wrapper-data-type-left {
display: block;
width: 45%;
height: 100%;
border-right: 0.7px solid extract(@CLR_1, 7);
>.wrapper-process-defintion {
display: block;
width: 100%;
height: 330pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.bpmn-process-definition {
display: flex;
margin-left: 10%;
width: 80%;
height: 170pt;
justify-content: center;
align-items: center;
background-color: extract(@CLR_1, 7);
border: 1.5px solid extract(@CLR_1, 5);
margin-top: 25pt;
>.not-data-bpmn {
.FC2();
font-weight: bold;
color: extract(@CLR_1, 3);
}
}
>.head-radio-label {
display: flex;
margin-left: 10%;
margin-top: 25pt;
margin-bottom: 5pt;
font-weight: bold;
}
>.wrapper-radio {
display: flex;
width: 90%;
height: 40pt;
margin-left: 10%;
align-items: center;
}
}
>.wrapper-material {
display: flex;
width: 80%;
margin-left: 10%;
material-simple-dropdown {
width: 100%;
}
}
}
>.wrapper-data-type-right {
display: block;
width: 65%;
height: 100%;
padding-bottom: 100pt;
>.label-title-data-type-right {
display: flex;
.FC2();
font-weight: bold;
margin-left: 10%;
margin-top: 15pt;
}
>.label-description-data-type-right {
display: flex;
.FC0();
color: extract(@CLR_1, 3);
margin-left: 10%;
margin-top: 2%;
margin-bottom: 4%;
}
.wrapper-allow-trigger-action {
display: flex;
height: 20pt;
margin-left: 10%;
width: 90%;
}
>.label-storage-actions {
display: flex;
margin-top: 10pt;
justify-content: flex-end;
margin-right: 5%;
color: extract(@CLR_1, 3);
}
>.wrapper-setting-storage-actions {
display: block;
margin-top: 10pt;
width: 100%;
height: 312pt;
border-top: 0.7px solid extract(@CLR_1, 7);
>.list-setting-storage-actions {
.wrapper-under-line(52pt);
cursor: unset;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.label-list-setting-storage-actions {
display: flex;
margin-left: 10%;
width: 10%;
align-items: center;
}
.wrapper-switch {
display: flex;
width: 76%;
height: 100%;
align-items: center;
justify-content: flex-end;
.phx-switch {
display: flex;
}
.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);
}
}
}
}
}
}
}
}