io.parrots
Version:
Parrots.io App
702 lines (696 loc) • 21.7 kB
text/less
.parrots-page-user-account-page {
width: 100%;
height: 100%;
background-color: extract(@CLR_1, 8);
>.wrapper-add-user-group {
display: flex;
top: 0;
right: 0;
position: absolute;
height: 72pt;
width: 25%;
z-index: 2;
border-left: 0.5px solid extract(@CLR_1, 8);
>.link-add-user-to-group-none {
display: flex;
height: 100%;
margin-left: 10%;
width: 45%;
align-items: center;
justify-content: center;
color: extract(@CLR_1, 4);
}
>.on-add-user-to-group {
cursor: pointer;
color: extract(@CLR_0, 1);
}
>.link-new-user {
display: flex;
height: 100%;
width: 45%;
cursor: pointer;
align-items: center;
justify-content: center;
}
}
>.background-blur {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: extract(@CLR_1, 8);
}
.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 ;
}
>.wrapper-user-account-head {
.no-select;
.wrapper-under-line(52pt, extract(@CLR_1, 8));
top: 72pt;
position: absolute;
align-items: center;
>.label-head-user-account-name {
display: flex;
margin-left: 8%;
width: 5.5%;
height: 100%;
align-items: center;
font-weight: bold;
margin-right: 12%;
cursor: pointer;
}
>.label-head-user-account-user-name {
display: flex;
align-items: center;
cursor: pointer;
width: 7.5%;
height: 100%;
font-weight: bold;
margin-right: 6%;
}
>.label-head-group {
display: flex;
height: 100%;
align-items: center;
cursor: pointer;
width: 9%;
font-weight: bold;
}
>.label-head-user-type {
display: flex;
height: 100%;
align-items: center;
cursor: pointer;
width: 9%;
font-weight: bold;
}
>.label-head-description {
width: 35%;
font-weight: bold;
}
}
>.wrapper-content-list {
display: block;
width: 100%;
height: 100%;
padding-top: 124pt;
>.wrapper-user-account-list{
border: 0.5px solid transparent;
.wrapper-under-line();
align-items: center;
>.wrapper-avatar {
display: flex;
width: 8%;
height: 100%;
align-items: center;
justify-content: center;
>.icon-avatar {
width: 40%;
height: 65%;
border-radius: 60%;
}
}
>.wrapper-label-name-email {
display: block;
width: 17.5%;
height: 100%;
>.label-name {
display: flex;
height: 50%;
font-size: 11pt;
font-weight: bold;
align-items: flex-end;
}
>.label-email {
display: flex;
font-size: 8pt;
color: extract(@CLR_1, 1);
}
}
>.label-username {
display: flex;
width: 13.5%;
height: 100%;
font-weight: bold;
align-items: center;
}
>.wrapper-icon-group {
display: flex;
width: 9.1%;
height: 100%;
align-items: center;
>.icon-group {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
background-color: extract(@CLR_O, 4);
border-radius: 15px;
color: extract(@CLR_1, 9);
}
}
>.wrapper-label-drop-down-user-type {
display: flex;
width: 9.1%;
height: 100%;
align-items: center;
>.label-user-type {
display: flex;
height: 100%;
align-items: center;
}
>.wrapper-drop-down-user-type {
display: block;
position: relative;
width: 100px;
height: 70px;
margin-top: 3%;
transition: 0.5s ease-in-out 0s;
right: 19%;
background-color: extract(@CLR_1, 9);
>.items-drop-down-user-type {
display: flex;
width: 100px;
height: 35px;
justify-content: center;
align-items: center;
border: 0.5px solid extract(@CLR_1, 7);
}
.items-drop-down-user-type:hover {
background-color: extract(@CLR_1, 8);
}
}
}
>.label-description {
display: flex;
width: 33.8%;
height: 100%;
align-items: center;
color: extract(@CLR_1, 1);
}
.phx-switch {
display: flex;
}
.phx-switch input.toggle + label {
margin-bottom: unset ;
}
.icon-del {
display: flex;
width: 5%;
height: 100%;
align-items: center;
justify-content: center;
&:before {
content: "g";
font-family: 'PhloxGlyphicons';
font-size: 13pt;
}
}
.phx-switch input.toggle + label:before {
background: @CLR_BRAND;
cursor: w-resize;
}
.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);
}
}
.wrapper-user-account-list:hover{
background-color: extract(@CLR_1, 7);
}
}
.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-user-to-group {
.nav-bar-side(455px);
>.wrapper-label-head-nav-user-to-group {
display: flex;
margin-left: 5%;
margin-top: 27pt;
align-items: center;
>.label-head-user-to-group {
margin-left: 2%;
font-size: 18pt;
font-weight: bold;
}
}
>.label-description-nav-user-to-group {
display: flex;
margin-left: 5.5%;
margin-top: 5.5pt;
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%;
height: 50%;
margin-top: 9.7%;
padding-top: unset;
.phx-table-body {
display: block;
}
.list-group {
display: flex;
cursor: pointer;
width: 100%;
height: 35pt;
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-user-to-group {
display: flex;
margin-left: 10.5%;
width: 72%;
bottom: 110pt;
font-size: 9pt;
position: absolute;
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);
}
}
}
>.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;
margin-left: 10.5%;
width: 76%;
margin-top: 5.5pt;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-icon-count-add-users {
position: absolute;
width: 22%;
margin-top: 9%;
right: 0;
>.icon-count-add-users {
position: absolute;
left: 0;
font-size: 6.91pt;
background-color: extract(@CLR_O, 4);
color: extract(@CLR_1, 9);
border-radius: 25px;
padding-left: 4px;
padding-right: 4px;
}
}
>.wrapper-search-selected{
display: flex;
width: 100%;
height: 8.5%;
margin-top: 5%;
justify-content: center;
border-top: 0.7px solid extract(@CLR_1, 7);
border-bottom: 1.7px solid extract(@CLR_1, 7);
>.btn-search-selected {
display: flex;
width: 50%;
cursor: pointer;
justify-content: center;
align-items: center;
color: extract(@CLR_O, 4);
background-color: extract(@CLR_1, 9);
}
.on-selceted-user {
background-color: extract(@CLR_1, 8) ;
color: extract(@CLR_1, 1) ;
}
.on-search {
background-color: extract(@CLR_1, 8) ;
color: extract(@CLR_1, 1) ;
}
}
.none-selceted-user {
cursor: not-allowed ;
color: extract(@CLR_1, 7) ;
}
>.wrapper-material-search {
display: flex;
margin-left: 10.5%;
width: 89%;
height: 10%;
>.wrapper-material-text-area {
display: flex;
width: 65%;
.material-text-area {
margin-top: unset ;
.form-control {
max-height: 350px;
height: 50px;
background-color: extract(@CLR_1,9);
resize: none;
}
.description {
color: extract(@CLR_1, 1);
}
}
}
>.wrapper-btn-search {
display: flex;
margin-left: 6%;
width: 18%;
align-items: flex-end;
>.btn-search {
display: flex;
cursor: pointer;
height: 50%;
width: 100%;
align-items: center;
justify-content: center;
color: extract(@CLR_1, 9);
background-color: extract(@CLR_O, 4);
}
}
}
>.btn-add-all-user {
display: flex;
cursor: pointer;
position: absolute;
right: 16%;
top: 36.5%;
}
>.full-line {
margin-top: 5.5%;
position: absolute;
height: 0.7px;
width: 100%;
border-bottom: 1.5px solid extract(@CLR_1, 7);
}
>.full-line-user-selected {
position: absolute;
height: 0.7px;
width: 100%;
border-bottom: 1.5px solid extract(@CLR_1, 7);
}
.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);
}
}
.wrapper-list-user {
display: block;
width: 100%;
height: 50%;
margin-top: 6%;
>.list-user {
display: flex;
width: 100%;
height: 20%;
background-color: extract(@CLR_1, 9);
border-bottom: 0.5px solid extract(@CLR_1, 7);
transition: all 0.5s ease 0s;
align-items: center;
>.btn-has {
.FC0();
display: flex;
justify-content: center;
cursor: unset;
position: absolute;
right: 7%;
color: extract(@CLR_1, 4);
width: 17%;
background-color: extract(@CLR_1, 7);
border-radius: 20px;
}
>.btn-add {
.FC0();
display: flex;
justify-content: center;
position: absolute;
right: 7%;
color: extract(@CLR_1, 9);
width: 17%;
background-color: extract(@CLR_O, 4);
border-radius: 20px;
}
>.btn-add-selected {
.FC0();
display: flex;
justify-content: center;
cursor: unset;
position: absolute;
right: 7%;
color: extract(@CLR_1, 4);
width: 17%;
background-color: extract(@CLR_1, 7);
border-radius: 20px;
}
}
.list-user:hover {
background-color: extract(@CLR_1, 8);
}
}
.wrapper-list-user-selected {
display: block;
position: absolute;
width: 99.5%;
height: 52%;
margin-top: 0.5%;
>.list-user-selected {
display: flex;
width: 100%;
height: 16%;
background-color: extract(@CLR_1, 9);
border-bottom: 0.5px solid extract(@CLR_1, 7);
align-items: center;
transition: all 0.5s ease 0s;
>.icon-selected-user {
display: flex;
position: absolute;
cursor: pointer;
right: 9.5%;
height: 15%;
width: 10%;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: extract(@CLR_P, 4);
&:before {
content: "y";
font-family: 'PhloxGlyphicons';
font-size: 16pt;
}
}
}
.list-user-selected:hover {
background-color: extract(@CLR_1, 8);
}
}
>.wrapper-first-open-no-data {
display: flex;
margin-top: 5%;
.FC0();
width: 100%;
height: 50%;
align-items: center;
justify-content: center;
border-bottom: 0.7px solid #ededed;
}
>.label-below-description-nav-add-group {
display: flex;
margin-left: 10.5%;
width: 72%;
margin-top: 15pt;
font-size: 9pt;
color: extract(@CLR_1, 3);
}
>.wrapper-btn-nav-add-group {
display: flex;
width: 100%;
height: 30pt;
margin-top: 29pt;
>.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);
}
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-user-account-page {
.FC0();
.icon-user {
&:before {
font-size: 9pt;
}
}
.icon-plus {
&:before {
font-size: 8pt;
}
}
.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;
}
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}
@import "./userAccount/UserAccountTableRow";