definicao de layout
This commit is contained in:
331
public/assets/scss/theme/_user-profile.scss
Normal file
331
public/assets/scss/theme/_user-profile.scss
Normal file
@@ -0,0 +1,331 @@
|
||||
/**=====================
|
||||
22. User profile css start
|
||||
==========================**/
|
||||
.user-profile{
|
||||
.follow {
|
||||
.follow-num {
|
||||
font-size: 18px;
|
||||
color: $theme-font-color;
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
color: $semi-dark;
|
||||
}
|
||||
ul.follow-list{
|
||||
border-top: 1px solid $light-gray;
|
||||
li{
|
||||
display:inline-block;
|
||||
padding-top:15px;
|
||||
&:nth-child(n+2){
|
||||
margin-left:15px;
|
||||
padding-left:15px;
|
||||
border-left: 1px solid $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-img-style {
|
||||
padding:30px;
|
||||
.img-container{
|
||||
margin-top:30px;
|
||||
}
|
||||
.user-name {
|
||||
font-size:18px;
|
||||
color: $theme-font-color;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: $dark-gray;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.media {
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.like-comment {
|
||||
a{
|
||||
color: $dark-gray;
|
||||
&:hover{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
}
|
||||
}
|
||||
.social-media {
|
||||
ul.user-list-social{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
margin-right: auto;
|
||||
margin-left:auto ;
|
||||
padding-bottom:20px;
|
||||
li{
|
||||
&:nth-child(n+2){
|
||||
margin-left:5px;
|
||||
}
|
||||
a{
|
||||
padding:0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba($primary-color,0.08);
|
||||
i{
|
||||
font-size:14px;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
a{
|
||||
background-color:$primary-color;
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-header{
|
||||
height:420px;
|
||||
padding:30px;
|
||||
display:flex !important;
|
||||
// align-items: center;
|
||||
.profile-img-wrrap{
|
||||
display:none;
|
||||
}
|
||||
.userpro-box{
|
||||
background-color:$white;
|
||||
padding:30px;
|
||||
max-width:380px;
|
||||
margin-top:auto;
|
||||
margin-bottom:auto;
|
||||
text-align:center;
|
||||
.img-wrraper{
|
||||
position:relative ;
|
||||
width:fit-content ;
|
||||
margin:auto ;
|
||||
}
|
||||
.avatar{
|
||||
width:100px;
|
||||
height:100px;
|
||||
max-width: 155px;
|
||||
max-height: 155px;
|
||||
border-radius: 50%;
|
||||
overflow:hidden;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
border:7px solid rgba($primary-color,0.08);
|
||||
margin-bottom:15px;
|
||||
img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.icon-wrapper{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom:0;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
font-size: 17px;
|
||||
box-shadow: 0 0 6px 3px rgba(68, 102, 242, 0.1);
|
||||
i{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
color: $theme-font-color;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
h6{
|
||||
font-size:14px;
|
||||
text-transform: uppercase;
|
||||
color: $light-text;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-post{
|
||||
padding:30px;
|
||||
.post-header{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
margin-bottom:20px;
|
||||
.media{
|
||||
align-items:center;
|
||||
img{
|
||||
width:60px;
|
||||
}
|
||||
h5{
|
||||
color:$theme-font-color;
|
||||
font-size:18px;
|
||||
font-weight:600;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
h6{
|
||||
color:$light-text;
|
||||
font-size:14px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
.post-setting{
|
||||
i{
|
||||
color:$light-text;
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-body{
|
||||
p{
|
||||
color:$light-text;
|
||||
}
|
||||
.post-react{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom:20px;
|
||||
ul{
|
||||
li{
|
||||
display:inline-block;
|
||||
&:nth-child(n+2){
|
||||
margin-left:-20px;
|
||||
}
|
||||
img{
|
||||
width:30px;
|
||||
height:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6{
|
||||
font-size:14px;
|
||||
color:$light-font;
|
||||
margin-bottom:0;
|
||||
margin-left:15px;
|
||||
}
|
||||
}
|
||||
.post-comment{
|
||||
li{
|
||||
display: inline-block;
|
||||
color: $light-font;
|
||||
label{
|
||||
margin-bottom:0;
|
||||
font-weight:500;
|
||||
a{
|
||||
color:$light-font;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
line-height:1;
|
||||
svg{
|
||||
width:14px;
|
||||
height:14px;
|
||||
}
|
||||
span{
|
||||
margin-left:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(n+2){
|
||||
margin-left:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-about{
|
||||
ul{
|
||||
margin-bottom:20px;
|
||||
li{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
.icon{
|
||||
width:35px;
|
||||
height:35px;
|
||||
border-radius:5px;
|
||||
background-color: rgba($primary-color,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right:15px;
|
||||
svg{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
h5{
|
||||
color:$theme-font-color;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
p{
|
||||
font-size:12px;
|
||||
line-height:1;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
&:nth-child(n+2){
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Edit profile //
|
||||
.edit-profile{
|
||||
.profile-title{
|
||||
border-bottom: 1px solid $light-gray;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 20px;
|
||||
.media{
|
||||
align-items:center;
|
||||
.media-body{
|
||||
margin-left:25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card {
|
||||
.card-header {
|
||||
h4{
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
h3{
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table {
|
||||
> :not(:last-child) {
|
||||
> :last-child {
|
||||
> *{
|
||||
border:1px solid $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**============================
|
||||
22. User profile css Ends
|
||||
==============================**/
|
||||
Reference in New Issue
Block a user