src/app/users/user.component.scss
.blog-title {
height: 360px;
width: 100%;
display: flex;
align-items: center;
background: #0F132B;
color: white;
position: relative;
overflow-y: hidden;
&__background {
position: absolute;
width: 100%;
}
h1 {
margin: 0 auto;
font-weight: 300;
font-size: 42px;
z-index: 1;
}
}
.background-editor {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
&__overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.60);
box-sizing: border-box;
cursor: pointer;
color: white;
transition: .5s cubic-bezier(0.18, 0.99, 0.56, 1.02);
&:hover {
box-shadow: inset 0 0 0 6px #4c94ff;
color: #4c94ff !important;
}
&__image {
position: absolute;
top: 40%;
left: 50%;
margin-top: -36px;
margin-left: -36px;
font-size: 72px;
width: 48px;
height: 48px;
}
&__discription {
position: absolute;
top: 60%;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 0 12px;
box-sizing: border-box;
}
}
&__icon {
width: 100%;
image-rendering: -webkit-optimize-contrast;
}
}
.icon-editor {
position: absolute;
box-shadow: black 0 0 8px -1px;
background: white;
top: -162px;
left: 0;
border-radius: 8px;
transition: .5s cubic-bezier(0.18, 0.99, 0.56, 1.02);
&__overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.60);
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
transition: .5s cubic-bezier(0.18, 0.99, 0.56, 1.02);
color: white;
&:hover {
box-shadow: inset 0 0 0 6px #4c94ff;
color: #4c94ff !important;
}
&__image {
position: absolute;
top: 55px;
left: 75px;
margin-top: -24px;
margin-left: -24px;
font-size: 48px;
width: 48px;
height: 48px;
}
&__discription {
position: absolute;
top: 54%;
font-size: 16px;
font-weight: bold;
padding: 0 12px;
box-sizing: border-box;
}
}
&__icon {
width: 150px;
height: 150px;
border-radius: 8px;
image-rendering: -webkit-optimize-contrast;
}
}
.sub-nav-bar {
background: #e6e6e6;
margin: 0;
padding: 0;
text-align: center;
&_edit {
opacity: 0.3;
}
&__link {
font-size: 16px;
opacity: 1;
&:hover {
background: #ededed;
}
}
}
.content {
display: flex;
&_edit {
background: white;
}
&__profile {
position: relative;
}
&__main {
&_edit {
opacity: 0.3;
}
}
}
.profile {
position: relative;
font-size: 14px;
color: #464449;
width: 300px;
z-index: 1;
margin-top: 24px;
margin-left: 36px;
margin-right: 36px;
margin-bottom: 72px;
padding: 24px;
box-sizing: border-box;
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
background: white;
border-radius: 2px;
&_edit {
box-shadow: #4c94ff 0 0 8px 2px;
}
&__icon {
position: absolute;
width: 150px;
height: 150px;
border-radius: 8px;
box-shadow: black 0 0 8px -1px;
image-rendering: -webkit-optimize-contrast;
background: white;
top: -162px;
left: 0;
}
&__operation {
display: flex;
height: 36px;
margin: -24px;
margin-bottom: 24px;
padding: 8px;
background: #eaeaea;
&__spacer {
flex: 1 1 auto;
}
button {
margin-right: 12px;
}
}
}
.data {
display: flex;
padding: 0;
margin-bottom: 16px;
width: 100%;
$parent: &;
&_image {
@extend #{$parent};
padding-left: 0;
display: flex;
align-items: start;
padding-bottom: 16px;
border-bottom: 1px solid #d8d7d7;
}
&__icon {
display: block;
bottom: 6px;
font-size: 24px;
color: #737373;
margin-right: 18px;
padding-top: 18px;
&_focused {
color: #3f51b5;
}
}
&__input {
flex: 1;
&__textarea {
height: 100px;
resize: no;
}
}
&__output {
flex: 1;
width:100%;
&__label {
font-size: 10px;
color: #6d6d6d;
margin-bottom: 2px;
}
&__value {
min-height: 24px;
color: #3F3F3F;
padding-bottom: 2px;
border-bottom: 1px solid #949494;
$parent: &;
&_textarea {
@extend #{$parent};
margin: 0;
height: 120px;
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
}
}
}
.sub-nav-bar {
.first-link {
margin-left: auto
}
.last-link {
margin-right: auto
}
}