io.parrots
Version:
Parrots.io App
355 lines (352 loc) • 11 kB
text/less
.parrots-page-configurations {
display: block;
height: 100%;
width: 100%;
background-color: extract(@CLR_1, 8);
.wrapper-none {
display: none ;
}
>.wrapper-menu-user-system-configurations {
.no-select;
.wrapper-under-line(72pt);
position: absolute;
z-index: 2;
cursor: unset;
box-shadow: 0px 2px 4px extract(@CLR_1, 6);
align-items: center;
font-weight: bold;
>.wrapper-material-search {
display: flex;
position: absolute;
width: 25%;
height: 72pt;
right: 0;
>.wrapper-material-text-box {
display: flex;
position: absolute;
right: 140px;
.material-text-box {
margin-top: 10.91pt ;
.textbox-wrapper {
background-color: transparent ;
.form-control {
height: 25px;
}
}
}
}
>.wrapper-btn-user-all {
display: flex;
position: absolute;
height: 73pt;
right: 12px;
width: 120px;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-align: center;
align-items: center;
>.btn-user-all {
.btn-box(75% , 50%, extract(@CLR_1, 9), extract(@CLR_O, 4));
display: flex;
}
}
}
>.btn-user-configurations {
cursor: pointer;
display: flex;
margin-left: 5%;
align-items: center;
width: 150px;
height: 100%;
}
>.btn-system-configurations {
cursor: pointer;
display: flex;
align-items: center;
width: 150px;
height: 100%;
}
>.selected {
color: @CLR_BRAND;
}
}
>.wrapper-user-config {
display: flex;
position: relative;
padding-top: 72pt;
height: 100%;
width: 100%;
>.wrapper-user-config-left {
.no-select;
display: block;
height: 100%;
width: 25%;
z-index: 1;
position: relative;
box-shadow: 0px 4px 9px #e0e0e0;
>.wrapper-material-search {
display: flex;
position: absolute;
width: 100%;
height: 73pt;
>.wrapper-material-text-box {
display: flex;
margin-left: 10%;
width: 50%;
.material-text-box {
margin-top: 10.91pt ;
width: 118pt;
.textbox-wrapper {
background-color: transparent ;
.form-control {
height: 25px;
}
}
}
}
>.wrapper-btn-user-all {
display: flex;
position: absolute;
height: 73pt;
right: 7%;
width: 30%;
justify-content: flex-end;
align-items: center;
>.btn-user-all {
.btn-box(75% , 50%, extract(@CLR_1, 9), extract(@CLR_O, 4));
display: flex;
}
}
}
>.label-search-undefined {
display: flex;
width: 100%;
height: 10%;
justify-content: center;
align-items: center;
}
>.wrapper-list-user {
position: absolute;
width: 100%;
height: 100%;
padding-top: 73pt;
>.list-user {
.no-select;
.wrapper-under-line(52pt);
align-items: center;
&:hover {
background-color: extract(@CLR_1, 8);
}
>.avatar-user {
margin-left: 5%;
border-radius: 50%;
height: 40px;
width: 40px;
}
>.wrapper-label-username-email {
display: block;
margin-left: 5%;
>.label-username {
display: flex;
}
>.label-email {
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 3);
}
}
}
}
>.selected {
border: 0.5px solid @CLR_BRAND;
}
}
>.wrapper-user-config-right {
display: block;
height: 100%;
width: 75%;
z-index: 0;
position: relative;
right: 0;
>.label-selected-user-undefined {
display: flex;
width: 100%;
height: 80%;
justify-content: center;
align-items: center;
.FC3();
}
>.wrapper-header-configurations-user {
.no-select;
.wrapper-under-line(52pt, extract(@CLR_1, 8));
position: absolute;
cursor: unset;
}
>.wrapper-body-configurations-user {
width: 100%;
height: 100%;
padding-top: 52pt;
.wrapper-icon-reload {
top: -55pt ;
}
.show-wrapper-icon-reload {
top: 95pt ;
}
.reloader-manual {
top: -20pt ;
}
.show-reloader-manual {
top: 0 ;
}
}
}
}
>.wrapper-header-configurations-system {
.no-select;
.wrapper-under-line(122pt, extract(@CLR_1, 8));
position: absolute;
padding-top: 72pt;
cursor: unset;
}
.label-header-name-config {
display: flex;
margin-left: 5%;
align-items: center;
width: 50%;
height: 100%;
cursor: pointer;
}
.label-header-type-config {
display: flex;
align-items: center;
width: 20%;
height: 100%;
cursor: pointer;
}
.label-header-value-config {
display: flex;
align-items: center;
width: 25%;
height: 100%;
cursor: pointer;
}
>.wrapper-body-configurations-system {
display: block;
padding-top: 122pt;
height: 100%;
width: 100%;
}
.wrapper-list-configurations {
.wrapper-under-line();
&:hover {
background-color: extract(@CLR_1, 8);
}
>.wrapper-label-name-config {
display: flex;
margin-left: 5%;
width: 45%;
height: 100%;
align-items: center;
>.label-name-config {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.tooltip {
left: unset ;
.FC1() !important;
.tooltip-arrow {
left: 5% ;
border-top-color: @CLR_BRAND ;
}
.tooltip-inner {
max-width: unset ;
background-color: @CLR_BRAND ;
}
}
}
>.label-type-config {
display: flex;
align-items: center;
margin-left: 5%;
width: 20%;
height: 100%;
}
>.wrapper-label-value-config {
display: flex;
width: 20%;
height: 100%;
align-items: center;
>.label-value-config {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.tooltip {
left: unset ;
.FC1() !important;
.tooltip-arrow {
left: 25% ;
border-top-color: @CLR_BRAND ;
}
.tooltip-inner {
max-width: unset ;
background-color: @CLR_BRAND ;
}
}
}
>.icon-edit {
display: flex;
width: 5%;
height: 55px;
cursor: pointer;
justify-content: center;
align-items: center;
&:before {
content: "w";
font-family: 'PhloxGlyphicons';
font-size: 23pt;
}
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-configurations {
>.wrapper-user-config {
>.wrapper-user-config-left {
>.wrapper-material-search {
>.wrapper-material-text-box {
width: 110px;
}
>.wrapper-btn-user-all {
margin-top: 5%;
height: 77.6px;
width: 60px;
}
}
}
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
.parrots-page-configurations {
>.wrapper-user-config {
>.wrapper-user-config-left {
>.wrapper-material-search {
>.wrapper-material-text-box {
width: 85px;
}
>.wrapper-btn-user-all {
margin-top: 6%;
height: 68.5px;
width: 52.5px;
}
}
}
}
}
}