io.parrots
Version:
Parrots.io App
735 lines (717 loc) • 23.7 kB
text/less
.parrots-page-permissions {
display: flex;
position: absolute;
padding-top: 72pt;
width: 100%;
height: 100%;
>.tooltip-view-group-list{
display: none;
position: fixed;
width: 155px;
height: 200px;
z-index: 100;
box-shadow: 0px 4px 9px extract(@CLR_1, 6);
background-color: extract(@CLR_1, 9);
overflow: auto;
>.tooltip-view-group-list-row{
width: 100%;
height: 40px;
box-shadow: 0px 1px 1px extract(@CLR_1, 6);
display: flex;
align-items: center;
padding-left: 16px;
}
}
>.nav-permitted-user{
display: block;
height: 83%;
width: 25%;
position: fixed;
z-index: 1;
right: -25%;
background-color: extract(@CLR_1, 9);
transition: all 0.5s ease 0s;
box-shadow: 0px 4px 9px extract(@CLR_1, 6);
>.wrapper-class-permitted-user {
position: absolute;
right: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 1px extract(@CLR_1, 6);
>.wrapper-label-head-permitted-user {
display: flex;
margin-left: 5%;
margin-top: 6%;
align-items: center;
>.label-head-select-group {
margin-left: 2%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-permitted-user {
display: flex;
margin-left: 5.5%;
margin-top: 1%;
font-size: 9pt;
color: extract(@CLR_1, 3);
margin-bottom: 32pt;
}
>.col-md-12{
display: flex;
width: 100%;
height: 48pt;
background-color: extract(@CLR_1, 8);
border-bottom: 0.5px solid extract(@CLR_1, 7);
align-items: center;
>.avatar-user{
margin-left: 8px;
border-radius: 22px;
height: 44px;
width: 44px;
}
>.wrapper-label-username-email {
display: block;
margin-left: 8px;
>.label-username {
display: flex;
}
>.label-email {
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 3);
}
}
>.wrapper-group-user{
display: block;
position: absolute;
right: 7%;
width: 17%;
>.group-user-header{
display: flex;
justify-content: center;
}
>.group-user-description{
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 3);
justify-content: center;
}
>.group-user-description:hover{
display: flex;
font-size: 8pt;
color: extract(@CLR_0, 1);
justify-content: center;
}
}
}
>.label-below-description-permitted-user {
display: flex;
margin-left: 10.5%;
width: 80%;
bottom: 14%;
font-size: 9pt;
position: absolute;
color: extract(@CLR_1, 3);
}
>.btn-back-permitted-user {
display: flex;
height: 5.8%;
width: 23%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 10.5%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-permitted-user {
display: flex;
height: 5.8%;
width: 40%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 39%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
}
}
>.nav-class{
display: block;
height: 83%;
width: 40%;
position: fixed;
z-index: 1;
right: -40%;
background-color: extract(@CLR_1, 9);
transition: all 0.5s ease 0s;
box-shadow: 0px 4px 9px extract(@CLR_1, 6);
>.nav-class-header{
height: 16%;
display: flex;
padding-left: 8%;
align-items: center;
box-shadow: 0px 0px 1px extract(@CLR_1, 6);
>.icon-class-object{
width: 40px;
height: 40px;;
}
>.label-header{
padding-left: 4%;
>.label-header-title{
font-size: 18pt;
font-weight: bold;
}
>.label-header-description{
font-size: 9pt;
color: extract(@CLR_1, 3);
}
}
}
>.nav-class-body{
>.wrapper-class-perrmissions-level {
position: absolute;
left: 0;
width: 45%;
height: 84%;
box-shadow: 0px 0px 1px extract(@CLR_1, 6);
>.wrapper-label-head-nav-select-level {
display: flex;
margin-left: 5%;
margin-top: 6%;
align-items: center;
>.label-head-select-level {
margin-left: 2%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-select-level {
display: flex;
margin-left: 5.5%;
margin-top: 1%;
font-size: 9pt;
color: extract(@CLR_1, 3);
padding-bottom: 20%;
}
>.wrapper-list-checkbox{
display: flex;
padding-left: 16%;
}
>.label-below-description-nav-select-level {
display: flex;
margin-left: 10.5%;
width: 80%;
bottom: 14%;
font-size: 9pt;
position: absolute;
color: extract(@CLR_1, 3);
}
}
>.wrapper-class-perrmissions-group {
position: absolute;
right: 0;
width: 55%;
height: 84%;
box-shadow: 0px 0px 1px extract(@CLR_1, 6);
>.wrapper-label-head-nav-select-group {
display: flex;
margin-left: 5%;
margin-top: 6%;
align-items: center;
>.label-head-select-group {
margin-left: 2%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-select-group {
display: flex;
margin-left: 5.5%;
margin-top: 1%;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-material{
display: flex;
position: absolute;
width: 40%;
margin-left: 5%;
material-text-box {
width: 100%;
}
}
>.btn-all-group {
display: flex;
position: absolute;
cursor: pointer;
padding-right: 10%;
margin-top: 5%;
width: 100%;
color: extract(@CLR_1, 3);
border-bottom: 0.5px solid extract(@CLR_1, 7);
justify-content: flex-end;
padding-bottom: 1%;
}
.wrapper-list-group {
display: block;
position: absolute;
width: 100%;
padding-left: 1px;
height: 60%;
margin-top: 9.7%;
padding-top: unset;
.phx-table-body {
display: block;
}
.list-group {
display: flex;
cursor: pointer;
width: 100%;
height: 15%;
background-color: extract(@CLR_1, 8);
border-bottom: 0.5px solid extract(@CLR_1, 7);
align-items: center;
margin-bottom: unset ;
}
.list-group:hover{
background-color: extract(@CLR_1, 9);
}
.selected-group {
background-color: extract(@CLR_1, 9);
}
}
>.label-below-description-nav-select-group {
display: flex;
margin-left: 10.5%;
width: 80%;
bottom: 14%;
font-size: 9pt;
position: absolute;
color: extract(@CLR_1, 3);
}
>.btn-back-nav-select-group {
display: flex;
height: 5.8%;
width: 23%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 10.5%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
>.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
}
>.btn-submit-nav-select-group {
display: flex;
height: 5.8%;
width: 40%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 39%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
}
}
}
.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;
}
}
.icon-user {
margin-right: 16px;
display: flex;
height: 100%;
&:before {
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
.disable{
&:before {
color: extract(@CLR_1, 5);
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
.icon-user:hover {
&:before {
color: extract(@CLR_1, 5);
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
>.wrapper-permissions-left {
display: block;
height: 100%;
width: 25%;
border-right: 1.7px solid extract(@CLR_1, 7);
background-color: extract(@CLR_1, 9);
overflow: auto;
>.wrapper-head-left {
display: block;
height: 24%;
width: 100%;
padding: 12% 24px 24px 12%;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.label-title-left {
font-size: 16pt;
font-weight: bold;
}
>.label-desccription-left {
font-size: 11pt;
color: extract(@CLR_1, 3);
margin-top: 10pt;
}
}
.wrapper-list-sql {
display: flex;
cursor: pointer;
width: 100%;
height: 40pt;
border-bottom: 0.7px solid extract(@CLR_1, 7);
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%;
}
}
.selected {
background-color: extract(@CLR_1, 8);
}
.wrapper-list-sql:hover {
background-color: extract(@CLR_1, 8);
}
}
>.wrapper-right{
overflow: auto;
width: 75%;
height: 100%;
>.wrapper-permissions-right{
display: block;
height: 100%;
width: 100%;
background-color: extract(@CLR_1, 9);
>.wrapper-head-right {
display: flex;
margin-left: 10%;
padding-top: 5%;
>.label-title-right {
display: flex;
margin-left: 2.5%;
font-size: 16pt;
font-weight: bold;
}
}
>.label-desrciptions-right {
display: flex;
margin-left: 10%;
margin-top: 1%;
margin-bottom: 2%;
font-size: 8pt;
color: #c2c2c2;
}
>.label-permissions {
display: flex;
align-items: center;
height: 50pt;
align-content: center;
padding-left: 10%;
background-color: #f5f5f5;
font-weight: bold;
font-size: 15pt;
}
>.wrapper-column-class-object {
display: flex;
width: 100%;
height: 50pt;
margin-top: 2%;
background-color: extract(@CLR_1, 8);
align-items: center;
}
.label-first-column {
display: flex;
padding-left: 5%;
align-items: center;
>.wrapper-icon-class-object {
display: flex;
justify-content: center;
width: 5%;
margin-left: 5%;
margin-right: 2%;
>.icon-class-object {
width: 10px;
height: 15px;
}
}
}
>.wrapper-row-class-object {
display: flex;
width: 100%;
height: 50pt;
align-items: center;
border-bottom: 0.7px solid extract(@CLR_1, 7);
>.col-md-2{
display: flex;
align-items: center;
}
>.col-md-3{
display: flex;
align-items: center;
}
>.col-md-4{
display: flex;
align-items: center;
}
>.col-md-8{
display: flex;
align-items: center;
}
}
>.hover:hover {
cursor: pointer;
background-color: extract(@CLR_1, 8);
}
}
}
>.nav-permissions {
display: block;
height: 83%;
width: 23.8%;
position: absolute;
z-index: 1;
top: 10%;
right: -23.8%;
background-color: extract(@CLR_1, 9);
transition: all 0.5s ease 0s;
box-shadow: 0px 4px 9px extract(@CLR_1, 6);
>.wrapper-label-head-nav-permissions {
display: flex;
margin-left: 11%;
margin-top: 10%;
align-items: center;
>.label-head-permissions {
margin-left: 4%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-permissions {
display: flex;
margin-left: 10.5%;
margin-top: 2%;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.btn-all-user {
display: flex;
position: absolute;
cursor: pointer;
padding-right: 10%;
margin-top: 10%;
width: 100%;
color: extract(@CLR_1, 3);
border-bottom: 0.5px solid extract(@CLR_1, 7);
justify-content: flex-end;
padding-bottom: 1%;
}
>.wrapper-list-user {
display: block;
position: absolute;
width: 100%;
height: 55%;
margin-top: 15.5%;
>.list-user {
display: flex;
cursor: pointer;
width: 100%;
height: 15%;
background-color: extract(@CLR_1, 8);
border-bottom: 0.5px solid extract(@CLR_1, 7);
align-items: center;
>.wrapper-space{
width: 5%;
}
>.icon-status {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
width: 5%;
&:before {
cursor: pointer;
content: "E";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.icon-status-show {
display: flex;
width: 5%;
height: 100%;
align-items: center;
&:before {
cursor: pointer;
content: "K";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
>.icon-sub-group {
display: flex;
justify-content: center;
width: 5%;
align-items: center;
height: 100%;
&:before {
cursor: pointer;
content: "z";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
>.wrapper-label-group-name-sub {
display: flex;
font-weight: bold;
}
>.wrapper-label-group-name {
display: flex;
margin-left: 10%;
font-weight: bold;
}
>.icon-selected-user {
display: flex;
position: absolute;
right: 9.5%;
color: extract(@CLR_P, 4);
&:before {
content: "y";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
}
.list-user:hover{
background-color: extract(@CLR_1, 9);
}
.selected-user {
background-color: extract(@CLR_1, 9);
}
}
>.label-below-description-nav-permissions {
display: flex;
margin-left: 10.5%;
width: 72%;
bottom: 16%;
font-size: 9pt;
position: absolute;
color: extract(@CLR_1, 3);
}
>.btn-back-nav-permissions {
display: flex;
height: 4.8%;
width: 25%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 10.5%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
>.btn-submit-nav-permissions {
display: flex;
height: 4.8%;
width: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 39%;
bottom: 5%;
font-size: 8pt;
position: absolute;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
}
}