src/app/page/profile/profile.component.scss
@use '../../style/mixin' as mxn;
h2 {
padding: 1rem;
text-align: center;
}
article {
section {
padding: .5rem;
> h5 {
margin-bottom: 1rem;
}
}
section:first-of-type {
> form {
width: 100%;
> fieldset {
padding-left: 1rem;
padding-right: 1rem;
}
}
// button/action
> div {
width: 100%;
padding: 1rem;
}
}
section:last-of-type {
> span {
color: #35F29A;
font-size: 1.1rem;
&:last-of-type {
margin-left: .5rem;
}
}
> ul {
overflow-y: scroll;
width: 100%;
> li {
padding: 1rem 1rem 1rem;
margin-bottom: 1rem;
@include mxn.transition;
&:hover {
cursor: pointer;
background-color: #181818;
}
h3 {
margin-bottom: .3rem;
}
p {
font-size: .8rem;
&:last-of-type {
margin-bottom: 1rem;
}
}
span {
color: #907f7f;
}
}
}
}
}
@media screen and (min-width: 600px) {
h2 {
text-align: left;
}
article {
display: flex;
}
section {
width: 48%;
ul {
max-height: 300px;
}
> div {
width: 70%;
margin: 2rem auto auto;
}
}
}