563 lines
9.8 KiB
SCSS
563 lines
9.8 KiB
SCSS
#user-profile {
|
|
|
|
#content {
|
|
padding: 0;
|
|
padding-top: 64px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.content-wrapper {
|
|
margin-top: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.profile-content {
|
|
float: left;
|
|
width: 78%;
|
|
height: 100%;
|
|
min-height: 800px;
|
|
|
|
@media (max-width: $maxMedium) {
|
|
width: 72%;
|
|
}
|
|
|
|
@media (max-width: $maxSmall) {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tabs {
|
|
background: #F5F6F8;
|
|
border-bottom: 1px solid #CED9EB;
|
|
padding: 0 30px;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
|
|
li {
|
|
display: inline-block;
|
|
|
|
a {
|
|
padding: 17px 20px;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: #688EA7;
|
|
font-weight: 600;
|
|
|
|
@include transition(all .2s linear);
|
|
|
|
&.active {
|
|
color: #333;
|
|
font-weight: 600;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 2px;
|
|
width: 100%;
|
|
background: #1DDBF1;
|
|
left: 0;
|
|
bottom: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
margin: 30px 30px 0;
|
|
position: relative;
|
|
|
|
@include transform(translate3d(0, 0, 0));
|
|
|
|
-webkit-perspective: 0px;
|
|
-ms-perspective: 0px;
|
|
-moz-perspective: 0px;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
margin: 30px 10px 0;
|
|
}
|
|
|
|
.tab {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
|
|
@include transform(scale3d(0.95, 0.95, 0.95));
|
|
@include transition(all .3s ease-in-out);
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
position: relative;
|
|
|
|
@include transform(scale3d(1, 1, 1));
|
|
}
|
|
|
|
&.notes {
|
|
padding-left: 20px;
|
|
|
|
.editor {
|
|
width: 94%;
|
|
background: #F7F7F7;
|
|
border-radius: 5px;
|
|
margin-top: 40px;
|
|
|
|
textarea {
|
|
border-bottom: 0;
|
|
border-radius: 4px 4px 0 0;
|
|
border-color: #D7E0EC;
|
|
}
|
|
|
|
.options {
|
|
padding: 11px 20px;
|
|
border: 1px solid #E1E7F0;
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
.attach {
|
|
float: right;
|
|
margin-top: 5px;
|
|
margin-right: 10px;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
margin-right: 20px;
|
|
|
|
i {
|
|
font-size: 23px;
|
|
color: #A8B6C2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
float: right;
|
|
|
|
span {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
margin-top: 50px;
|
|
width: 94%;
|
|
|
|
h4 {
|
|
font-size: 21px;
|
|
}
|
|
|
|
form {
|
|
width: 160px;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
}
|
|
|
|
.comments {
|
|
margin-top: 60px;
|
|
width: 94%;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.comment {
|
|
padding-bottom: 60px;
|
|
position: relative;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 2px;
|
|
background: #f7f7f7;
|
|
height: 100%;
|
|
left: 45px;
|
|
top: 0;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&:before {
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
max-width: 62px;
|
|
border-radius: 5px;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.message {
|
|
border: 1px solid #e4e4e4;
|
|
border-radius: 4px;
|
|
padding: 7px 20px;
|
|
|
|
@media (max-width: $maxSmall) {
|
|
border: 0;
|
|
padding: 7px 0;
|
|
}
|
|
|
|
header {
|
|
font-size: 13px;
|
|
position: relative;
|
|
color: #777;
|
|
margin-top: 8px;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 37px;
|
|
height: 12px;
|
|
top: 10px;
|
|
left: -25px;
|
|
margin-left: -18.5px;
|
|
background-image: url("#{$imagesPath}/popover-arrow.png");
|
|
background-size: 100% 100%;
|
|
@include transform(rotate(270deg));
|
|
|
|
@media (max-width: $maxSmall) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
color: #5481C4;
|
|
}
|
|
|
|
.date {
|
|
color: #8F8F8F;
|
|
}
|
|
}
|
|
|
|
.note {
|
|
p {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
line-height: 23px;
|
|
}
|
|
|
|
.files {
|
|
margin-top: 35px;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
|
|
.file {
|
|
float: left;
|
|
padding-right: 25px;
|
|
max-width: 25%;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
|
|
img {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.name {
|
|
display: inline-block;
|
|
margin-top: 11px;
|
|
line-height: 16px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.load-more {
|
|
margin-top: 30px;
|
|
margin-bottom: 150px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&.orders {
|
|
thead th {
|
|
/*border-top: 1px solid #F3F5F6;*/
|
|
border-top: 0;
|
|
border-bottom: 1px solid #F3F5F6;
|
|
padding: 10px 18px 15px 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
td {
|
|
padding: 11px 15px;
|
|
}
|
|
|
|
.dataTables_length {
|
|
display: none;
|
|
}
|
|
|
|
.dataTables_filter {
|
|
display: none;
|
|
}
|
|
|
|
.dataTables_info {
|
|
display: none;
|
|
}
|
|
|
|
.dataTables_paginate {
|
|
display: none;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
|
|
&.label-default {
|
|
background-color: #F3F3F3;
|
|
color: #333;
|
|
border: 1px solid #E4E4E4;
|
|
}
|
|
}
|
|
|
|
.ion-alert-circled {
|
|
font-size: 18px;
|
|
margin-left: 6px;
|
|
color: #B296DD;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
|
|
&.work {
|
|
margin-bottom: 50px;
|
|
|
|
.pic {
|
|
max-width: 90%;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
.mask {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
padding: 10px 15px;
|
|
background: rgba(76, 103, 133, 0.91);
|
|
font-family: $helvetica;
|
|
|
|
@include transition(all .2s linear);
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
padding-bottom: 8px;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
width: 50%;
|
|
background: #6A819B;
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.date {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
img {
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.profile-info {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: -23%;
|
|
width: 22%;
|
|
background: #fff;
|
|
border-left: 1px solid #E8EBF0;
|
|
|
|
@include animation(showProfileInfo .4s ease-out forwards);
|
|
|
|
@media (max-width: $maxMedium) {
|
|
width: 28%;
|
|
}
|
|
|
|
@media (max-width: $maxSmall) {
|
|
width: 100%;
|
|
position: relative;
|
|
float: left;
|
|
border-left: 0;
|
|
}
|
|
|
|
.avatar {
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid #DFE2E9;
|
|
background: url('#{$imagesPath}/bg.jpg');
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.37) 71%, rgba(0, 0, 0, 0.51) 100%);
|
|
}
|
|
|
|
img {
|
|
/*border-radius: 50%;*/
|
|
/*max-width: 62px;*/
|
|
position: relative;
|
|
border-radius: 3px;
|
|
max-width: 65px;
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
.name {
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.position {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.social {
|
|
margin-top: 5px;
|
|
position: relative;
|
|
|
|
i {
|
|
font-size: 15px;
|
|
margin: 0 5px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-details {
|
|
border-bottom: 1px solid #DFE2E9;
|
|
|
|
.col {
|
|
float: left;
|
|
width: 50%;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #666;
|
|
|
|
&:first-child {
|
|
border-right: 1px solid #DFE2E9;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
margin-bottom: 3px;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.details {
|
|
padding: 0 20px;
|
|
margin-top: 20px;
|
|
|
|
.field {
|
|
margin-bottom: 15px;
|
|
font-size: 13px;
|
|
|
|
label {
|
|
text-transform: uppercase;
|
|
color: #999;
|
|
letter-spacing: .2px;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 600;
|
|
color: #454545;
|
|
}
|
|
|
|
.sub {
|
|
color: #757575;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|