io.parrots
Version:
Parrots.io App
428 lines (425 loc) • 12.2 kB
text/less
.parrots-page-group-page {
display: block;
width: 100%;
height: 100%;
>.wrapper-add-user-group {
display: flex;
top: 0;
right: 0;
position: absolute;
height: 72pt;
width: 35%;
z-index: 2;
border-left: 0.5px solid extract(@CLR_1, 8);
>.link-remove-user-to-group-none {
display: flex;
height: 100%;
margin-left: 10%;
width: 30%;
align-items: center;
justify-content: center;
color: extract(@CLR_1, 4);
}
>.link-add-user-to-group-none {
display: flex;
height: 100%;
width: 30%;
align-items: center;
justify-content: center;
color: extract(@CLR_1, 4);
}
>.on-add-user-to-group {
cursor: pointer;
color: extract(@CLR_0, 1);
}
>.link-add-group {
display: flex;
height: 100%;
width: 30%;
cursor: pointer;
align-items: center;
justify-content: center;
}
}
>.blur-nav {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: extract(@CLR_1, 8);
}
>.wrapper-phx-table {
position: relative;
width: 100%;
height: 100%;
padding-top: 72pt;
>.wrapper-none {
display: none;
}
phx-table {
width: 100%;
height: 100%;
padding-top: unset;
position: unset;
.phx-table-body {
width: 100%;
height: 100% ;
overflow-y: hidden;
position: absolute;
padding-top: 52pt;
}
}
}
.icon-remove-user-nav {
display: flex;
&:before {
content: "m";
font-family: 'PhloxGlyphicons';
font-size: 14pt;
}
}
.icon-user-nav {
display: flex;
&:before {
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
.icon-plus-nav {
display: flex;
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 15pt;
}
}
.icon-back {
display: flex;
&:before {
content: "B";
font-family: 'PhloxGlyphicons';
font-size: 7pt;
}
}
>.nav-add-group {
.nav-bar-side(365px);
>.wrapper-label-head-nav-add-group {
display: flex;
margin-left: 11%;
margin-top: 27pt;
align-items: center;
>.label-head-add-group {
margin-left: 4%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-add-group {
display: flex;
width: 76%;
margin-left: 10.5%;
margin-top: 5.5pt;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-material-name-description {
display: block;
margin-top: 100pt;
margin-left: 10.5%;
width: 89%;
>.label-parent-group {
display: flex;
margin-bottom: 3%;
}
>.wrapper-material{
display: flex;
width: 89%;
material-text-box {
width: 100%;
}
material-simple-dropdown {
width: 100%;
}
}
}
>.label-below-description-nav-add-group {
display: flex;
margin-left: 10.5%;
margin-top: 195pt;
width: 72%;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-btn-nav-add-group {
display: flex;
width: 100%;
height: 30pt;
margin-top: 30pt;
>.btn-back-nav-add-group {
display: flex;
height: 30pt;
width: 25%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 13%;
font-size: 8pt;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
>.btn-submit-nav-add-group {
display: flex;
height: 30pt;
width: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 3%;
font-size: 8pt;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
}
}
>.nav-user-to-group {
.nav-bar-side(365px);
>.wrapper-label-head-nav-user-to-group {
display: flex;
margin-left: 11%;
margin-top: 27pt;
align-items: center;
>.label-head-user-to-group {
margin-left: 4%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-user-to-group {
display: flex;
width: 84%;
margin-left: 10.5%;
margin-top: 5.5pt;
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;
>.avatar-user {
margin-left: 3%;
border-radius: 25px;
height: 50px;
width: 50px;
}
>.wrapper-label-username-email {
display: block;
margin-left: 3%;
>.label-username {
display: flex;
}
>.label-email {
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 3);
}
}
>.btn-add {
position: absolute;
right: 7%;
color: extract(@CLR_1, 9);
width: 17%;
background-color: extract(@CLR_O, 4);;
border-radius: 20px;
}
>.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);
}
}
>.notifi-nav {
display: flex;
margin-top: 14%;
width: 100%;
height: 50%;
border-bottom: 1px solid extract(@CLR_1, 7);
border-top: 1px solid extract(@CLR_1, 7);
align-items: center;
justify-content: center;
}
>.label-below-description-nav-user-to-group {
display: flex;
margin-left: 10.5%;
margin-top: 195pt;
width: 72%;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-btn-nav-user-to-group {
display: flex;
width: 100%;
height: 30pt;
margin-top: 30pt;
>.btn-back-nav-user-to-group {
display: flex;
height: 30pt;
width: 25%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 13%;
font-size: 8pt;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
>.btn-submit-nav-user-to-group {
display: flex;
height: 30pt;
width: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
margin-left: 3%;
font-size: 8pt;
color: extract(@CLR_0, 7);
background-color: extract(@CLR_1, 8);
}
}
}
.icon-remove-user {
display: flex;
&:before {
content: "m";
font-family: 'PhloxGlyphicons';
font-size: 10pt;
}
}
.icon-user {
display: flex;
&:before {
content: "D";
font-family: 'PhloxGlyphicons';
font-size: 11pt;
}
}
.icon-plus {
display: flex;
&:before {
content: "a";
font-family: 'PhloxGlyphicons';
font-size: 11pt;
}
}
.selected {
color: @CLR_BRAND ;
}
.selected-row {
border: 0.7px solid @CLR_BRAND;
}
.drag-top-over {
background-color: extract(@CLR_0, 1) ;
}
.drag-bottom-over {
background-color: extract(@CLR_0, 1) ;
}
.wrapper-group-head{
.no-select;
.wrapper-under-line(52pt, extract(@CLR_1, 8));
position: absolute;
align-items: center;
font-weight: bold;
.label-head-group-name {
margin-left: 6.5%;
width: 26.5%;
}
.label-head-group-type-name {
width: 20%;
}
.label-head-create-update {
width: 14.375%;
}
}
.wrapper-group-list{
display: flex;
height: 60px;
width: 100%;
align-items: center;
background-color: extract(@CLR_1, 9) ;
border-bottom: 0.5px solid extract(@CLR_1, 7);
}
.wrapper-group-list:hover{
background-color: extract(@CLR_1, 7);
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-group-page {
.FC0();
.wrapper-group-list{
margin-top: 1px;
}
.icon-remove-user {
&:before {
font-size: 7pt;
}
}
.icon-user {
&:before {
font-size: 9pt;
}
}
.icon-plus {
&:before {
font-size: 8pt;
}
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
.parrots-page-group-page {
.FC0();
.wrapper-group-list{
margin-top: 1px;
}
}
}
@import "./group/GroupTableRow";