139 lines
2.3 KiB
SCSS
139 lines
2.3 KiB
SCSS
|
|
.item.home .bar .mid .info .logo::before{
|
|
background-image: url('~projects/app-a/src/assets/images/icons/home_page_24dp.svg');
|
|
}
|
|
|
|
.items{
|
|
padding-left: 24px;
|
|
}
|
|
|
|
|
|
|
|
.item {
|
|
.bar {
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 7.5px 0 0 0;
|
|
|
|
.left {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
.toggle {
|
|
border:none;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
transform: rotate(90deg);
|
|
transition: transform .3s;
|
|
}
|
|
}
|
|
.mid {
|
|
flex-grow: 1;
|
|
.info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 16px;
|
|
border-radius: 100px;
|
|
background-color: #0070BA;
|
|
color: #ffffff;
|
|
span{
|
|
display: none;
|
|
|
|
}
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
background: transparent url("~projects/app-a/src/assets/images/icons/web_page_24dp.svg")no-repeat;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100px;
|
|
object-fit: cover;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
.name {
|
|
p {
|
|
margin: 0;
|
|
a {
|
|
color: var(--second);
|
|
}
|
|
&.sub {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-shrink: 1;
|
|
button {
|
|
margin-left: 16px;
|
|
}
|
|
.move{
|
|
cursor: move;
|
|
}
|
|
}
|
|
.right-home {
|
|
width: 120px;
|
|
}
|
|
}
|
|
.items {
|
|
display: none;
|
|
}
|
|
&.active {
|
|
>.bar {
|
|
.left {
|
|
.toggle {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
>.items {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1360px) {
|
|
.item {
|
|
.bar {
|
|
.mid {
|
|
.info .logo {
|
|
display: none;
|
|
}
|
|
}
|
|
.right {
|
|
display: none;
|
|
}
|
|
}
|
|
.items {
|
|
|
|
}
|
|
&.company {
|
|
.items {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|