@geoffcox/sterling-svelte-themes/css/sterling/TreeChevron.base.css

A modern theme for the sterling-svelte component library.

.sterling-tree-chevron {
  position: relative;
  border: none;
  background: none;
  height: 1em;
  width: 1em;
  transform-origin: 50% 50%;
}

.sterling-tree-chevron::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 3px solid currentColor;
  border-top: 3px solid currentColor;
}

.sterling-tree-chevron:not(.leaf):not(.expanded):not(.animate)::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sterling-tree-chevron:not(.leaf).expanded:not(.animate)::after {
  transform: translate(-50%, -70%) rotate(135deg);
}

@keyframes tree-chevron-collapse {
  from {
    transform: translate(-50%, -70%) rotate(135deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

@keyframes tree-chevron-expand {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    transform: translate(-50%, -70%) rotate(135deg);
  }
}

.sterling-tree-chevron:not(.leaf):not(.expanded).animate::after {
  animation-name: tree-chevron-collapse;
  animation-duration: 100ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.sterling-tree-chevron:not(.leaf).expanded.animate::after {
  animation-name: tree-chevron-expand;
  animation-duration: 100ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.sterling-tree-chevron.leaf::after {
  animation: none;
  content: '';
  position: absolute;
  font: inherit;
  left: 50%;
  top: 50%;
  width: 0.35em;
  height: 0.35em;
  background: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion) {
  .sterling-tree-chevron:not(.leaf):not(.expanded).animate::after {
    animation: none;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .sterling-tree-chevron:not(.leaf).expanded.animate::after {
    animation: none;
    transform: translate(-50%, -70%) rotate(135deg);
  }
}