149 lines
2.5 KiB
SCSS
149 lines
2.5 KiB
SCSS
.main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
.left {
|
|
margin-right: 16px;
|
|
.logo {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 100%;
|
|
border: #E8E8E8 solid 1px;
|
|
background-size: 60%;
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
.mid {
|
|
.name {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: auto;
|
|
.menu {
|
|
button {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: transparent url('~projects/app-a/src/assets/images/icons/edit_24dp.svg') 50% 50% no-repeat;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.intro {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.left {
|
|
.logo {
|
|
width: 160px;
|
|
height: 160px;
|
|
margin-right: 16px;
|
|
border-radius: 100%;
|
|
border: #0033661F solid 2px;
|
|
//background: #ffffff url('~projects/app-a/src/assets/images/icons/factory_96dp.svg') 50% 50% no-repeat;
|
|
overflow: hidden;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
.line {
|
|
margin-bottom: 6px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.name {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 24px 40px;
|
|
border-bottom: #6c6c6c solid 1px;
|
|
.properties {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 16px;
|
|
.left {
|
|
flex-grow: 1;
|
|
.title {
|
|
margin-bottom: 4px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: 24px;
|
|
flex-shrink: 0;
|
|
.edit {
|
|
background-image: url('~projects/app-a/src/assets/images/icons/edit_24dp.svg');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 983px) {
|
|
.content {
|
|
padding: 24px;
|
|
.properties {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.intro {
|
|
.left {
|
|
.logo {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-size: 50%;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
.properties {
|
|
.left {
|
|
.default {
|
|
tr {
|
|
td {
|
|
display: block;
|
|
&:first-child {
|
|
margin: 12px 0 0;
|
|
padding: 0;
|
|
}
|
|
&:last-child {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1360px) {
|
|
.main {
|
|
.left {
|
|
margin-right: 0;
|
|
.logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|