88 lines
1.8 KiB
SCSS
88 lines
1.8 KiB
SCSS
.department {
|
|
.bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: #E8E8E8 solid 1px;
|
|
cursor: pointer;
|
|
.left {
|
|
flex-shrink: 0;
|
|
&:before {
|
|
display: block;
|
|
width: 40px;
|
|
height: 24px;
|
|
background: transparent url("~projects/app-root/src/assets/images/icons/circle_plus_24.svg") 50% 50% no-repeat;
|
|
content: "";
|
|
}
|
|
}
|
|
.logo {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: 16px;
|
|
border-radius: 200px;
|
|
background-color: #F9B417;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
.mid {
|
|
flex-grow: 1;
|
|
padding: 0 16px;
|
|
.name {
|
|
}
|
|
}
|
|
.right {
|
|
flex-shrink: 0;
|
|
button {
|
|
margin-left: 20px;
|
|
&.edit {
|
|
background-image: url('~projects/app-root/src/assets/images/icons/edit_24dp.svg');
|
|
}
|
|
&.add-member {
|
|
background-image: url('~projects/app-root/src/assets/images/icons/add_person_24.svg');
|
|
}
|
|
&.add-department {
|
|
background-image: url('~projects/app-root/src/assets/images/icons/add_library_dark_24.svg');
|
|
}
|
|
&.delete {
|
|
background-image: url('~projects/app-root/src/assets/images/icons/close_24dp.svg');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.items {
|
|
display: none;
|
|
padding-left: 56px;
|
|
}
|
|
&.active {
|
|
>.bar {
|
|
.left {
|
|
&:before {
|
|
background-image: url("~projects/app-root/src/assets/images/icons/circle_minus_24.svg");
|
|
}
|
|
}
|
|
}
|
|
>.items {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.department {
|
|
.bar {
|
|
.logo {
|
|
display: none;
|
|
}
|
|
//.right {display: none;}
|
|
}
|
|
.items {
|
|
padding-left: 16px;
|
|
}
|
|
}
|
|
}
|