2023-10-04 13:27:02 +00:00
|
|
|
collapsible-section {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 2px;
|
2023-11-28 10:58:59 +00:00
|
|
|
padding-block: 4px;
|
|
|
|
|
|
|
|
:not(:last-child) > & {
|
|
|
|
border-bottom: 1px solid var(--fill-quinary);
|
|
|
|
}
|
2023-10-04 13:27:02 +00:00
|
|
|
|
|
|
|
& > .head {
|
|
|
|
@include comfortable {
|
|
|
|
padding-block: 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 4px;
|
|
|
|
color: var(--fill-secondary);
|
|
|
|
font-weight: 590;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: '';
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toolbarbutton {
|
|
|
|
flex-shrink: 0;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
padding: 2px;
|
2023-11-28 10:58:59 +00:00
|
|
|
color: var(--fill-secondary);
|
2023-10-04 13:27:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
toolbarbutton.add {
|
2023-11-28 10:58:59 +00:00
|
|
|
@include svgicon-menu("plus", "universal", "16");
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: var(--fill-quinary);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
background: var(--fill-quarternary);
|
|
|
|
}
|
2023-10-04 13:27:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
toolbarbutton.twisty .toolbarbutton-icon {
|
2023-11-28 10:58:59 +00:00
|
|
|
@include svgicon-menu("chevron-12", "universal", "16");
|
2023-10-04 13:27:02 +00:00
|
|
|
transform: rotate(0deg);
|
|
|
|
transform-origin: center;
|
|
|
|
transition: transform 0.2s ease-in-out;
|
|
|
|
}
|
2023-12-01 07:43:43 +00:00
|
|
|
|
|
|
|
popupset > menupopup {
|
|
|
|
@include macOS-hide-menu-icons;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-28 10:58:59 +00:00
|
|
|
&[open]:not([empty]) > .head {
|
2023-10-04 13:27:02 +00:00
|
|
|
toolbarbutton.twisty .toolbarbutton-icon {
|
|
|
|
transform: rotate(-180deg);
|
|
|
|
}
|
|
|
|
}
|
2023-11-28 10:58:59 +00:00
|
|
|
|
|
|
|
&[empty] > .head > toolbarbutton.twisty {
|
|
|
|
fill: var(--fill-tertiary);
|
|
|
|
}
|
2023-10-04 13:27:02 +00:00
|
|
|
|
|
|
|
@each $pane, $color in $item-pane-sections {
|
|
|
|
&[data-pane="#{$pane}"] {
|
|
|
|
& > .head > .title::before {
|
|
|
|
background: icon-url("itempane/16/#{$pane}.svg") no-repeat center;
|
|
|
|
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
|
|
|
|
fill: $color;
|
|
|
|
stroke: $color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
& > :not(.head) {
|
|
|
|
max-height: var(--open-height, auto);
|
|
|
|
opacity: 1;
|
|
|
|
transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not([open]) {
|
|
|
|
& > :not(.head) {
|
|
|
|
max-height: 0;
|
|
|
|
opacity: 0;
|
|
|
|
visibility: hidden;
|
2023-11-28 10:58:59 +00:00
|
|
|
overflow-y: hidden;
|
|
|
|
transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0s 0.2s, overflow-y 0s 0.2s;
|
2023-10-04 13:27:02 +00:00
|
|
|
}
|
|
|
|
}
|
2023-12-01 07:43:43 +00:00
|
|
|
|
|
|
|
&.disable-transitions * {
|
|
|
|
transition: none !important;
|
|
|
|
color: red;
|
|
|
|
}
|
2023-10-04 13:27:02 +00:00
|
|
|
}
|