dependabot[bot]
2024-08-19 e47c29d2fd4eae06c511c914e2a5fcb057b44d7b
quartz/components/styles/explorer.scss
@@ -1,3 +1,5 @@
@use "../../styles/variables.scss" as *;
button#explorer {
  background-color: transparent;
  border: none;
@@ -8,7 +10,7 @@
  display: flex;
  align-items: center;
  & h3 {
  & h2 {
    font-size: 1rem;
    display: inline-block;
    margin: 0;
@@ -43,8 +45,18 @@
  list-style: none;
  overflow: hidden;
  max-height: none;
  transition: max-height 0.35s ease;
  transition:
    max-height 0.35s ease,
    visibility 0s linear 0s;
  margin-top: 0.5rem;
  visibility: visible;
  &.collapsed {
    transition:
      max-height 0.35s ease,
      visibility 0s linear 0.35s;
    visibility: hidden;
  }
  &.collapsed > .overflow::after {
    opacity: 0;
@@ -58,7 +70,7 @@
      max-height 0.35s ease,
      transform 0.35s ease,
      opacity 0.2s ease;
    & div > li > a {
    & li > a {
      color: var(--dark);
      opacity: 0.75;
      pointer-events: all;
@@ -80,19 +92,20 @@
  align-items: center;
  user-select: none;
  & li > a {
    // other selector is more specific, needs important
    color: var(--secondary) !important;
    opacity: 1 !important;
    font-size: 1.05rem !important;
  & div > a {
    color: var(--secondary);
    font-family: var(--headerFont);
    font-size: 0.95rem;
    font-weight: $semiBoldWeight;
    line-height: 1.5rem;
    display: inline-block;
  }
  & li > a:hover {
    // other selector is more specific, needs important
    color: var(--tertiary) !important;
  & div > a:hover {
    color: var(--tertiary);
  }
  & li > button {
  & div > button {
    color: var(--dark);
    background-color: transparent;
    border: none;
@@ -102,15 +115,15 @@
    padding-right: 0;
    display: flex;
    align-items: center;
    font-family: var(--headerFont);
    & h3 {
    & span {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
      font-weight: 600;
      font-weight: $semiBoldWeight;
      margin: 0;
      line-height: 1.5rem;
      font-weight: bold;
      pointer-events: none;
    }
  }
@@ -124,10 +137,21 @@
  backface-visibility: visible;
}
div:has(> .folder-outer:not(.open)) > .folder-container > svg {
li:has(> .folder-outer:not(.open)) > .folder-container > svg {
  transform: rotate(-90deg);
}
.folder-icon:hover {
  color: var(--tertiary);
}
.no-background::after {
  background: none !important;
}
#explorer-end {
  // needs height so IntersectionObserver gets triggered
  height: 4px;
  // remove default margin from li
  margin: 0;
}