haikal/static/scss/theme/_treeview.scss
Marwan Alwali b6486bb657 update
2024-12-25 17:51:07 +03:00

138 lines
3.7 KiB
SCSS

.treeview.treeview-slect {
[data-bs-toggle='collapse'] {
.treeview-text {
margin-left: 2.1rem;
}
}
.toggle-container {
position: relative;
input {
position: absolute;
left: 18px;
z-index: 2;
}
}
}
.treeview {
position: relative;
padding-left: 0;
.collapsing {
@include transition($treeview-transition-collapse);
}
.treeview-border {
border-left-style: dashed;
border-width: 1px;
border-color: var(--#{$prefix}border-color);
margin-left: 3px;
padding-left: 20px;
}
.treeview-border-transparent {
border-color: transparent !important ;
}
ul {
&:not(.collapse-show) {
.treeview-row {
display: none;
}
}
}
.treeview-list-item {
list-style: none;
.treeview-row {
width: 100%;
height: 27px;
position: absolute;
left: 0;
}
.treeview-row-odd {
background-color: $treeview-row-bg-odd;
}
.treeview-row-even {
background-color: $treeview-row-bg-even;
}
.treeview-item {
position: relative;
display: flex;
align-items: center;
> {
.form-check-input {
margin: 0 map-get($spacers, 2) map-get($spacers, 1) 0;
}
}
}
.treeview-text {
display: flex;
align-items: center;
font-weight: $font-weight-semibold;
font-size: map-get($font-sizes, 9);
color: var(--#{$prefix}tertiary-color);
height: 28px;
margin-bottom: 0;
[data-bs-theme='dark'] & {
color: var(--#{$prefix}body-color);
}
.treeview-icon {
color: var(--#{$prefix}quaternary-color);
font-size: map-get($font-sizes, 8);
margin-right: map-get($spacers, 2);
[data-bs-theme='dark'] & {
color: var(--#{$prefix}tertiary-color);
}
}
}
.treeview-badge {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--#{$prefix}primary-bg-subtle);
color: var(--#{$prefix}primary-darker);
display: flex;
align-items: center;
justify-content: center;
margin-left: map-get($spacers, 2);
}
.treeview-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-left: map-get($spacers, 1);
}
}
a {
text-decoration: none;
}
[data-bs-toggle='collapse'] {
position: relative;
display: block;
.treeview-text {
padding-left: map-get($spacers, 2);
margin-left: map-get($spacers, 2);
}
&:after {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy41Mjg1NiA1LjgwNDc2QzMuNzg4ODcgNi4wNjUwOCA0LjIxMTYyIDYuMDY1MDggNC40NzE5NCA1LjgwNDc2TDcuMTM3NTYgMy4xMzkxNEM3LjMyOTE2IDIuOTQ3NTUgNy4zODUzOCAyLjY2MjI0IDcuMjgxMjYgMi40MTIzNEM3LjE3NzEzIDIuMTYyNDQgNi45MzU1NiAyIDYuNjY0ODMgMkwxLjMzMzU4IDIuMDAyMDhDMS4wNjQ5NCAyLjAwMjA4IDAuODIxMjgxIDIuMTY0NTIgMC43MTcxNTUgMi40MTQ0MkMwLjYxMzAyOSAyLjY2NDMyIDAuNjcxMzQgMi45NDk2MyAwLjg2MDg0OSAzLjE0MTIyTDMuNTI2NDcgNS44MDY4NUwzLjUyODU2IDUuODA0NzZaIiBmaWxsPSIjOEE5NEFEIi8+Cjwvc3ZnPgo=');
position: absolute;
left: 0;
color: red !important;
top: 45%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: center;
transition: $transition-base;
transition-property: transform;
}
&[aria-expanded='true']:after {
transform: translateY(-50%) rotate(0deg);
}
&[aria-expanded='true'] .treeview-arrow-icon {
transform: rotate(0deg);
}
}
&.treeview-stripe {
padding-left: map-get($spacers, 2) !important;
}
}
.treeview-body-height {
height: 28.75rem;
}