@ozen-ui/kit

Version:
React component library
46 lines (37 loc) • 1.31 kB
CSS
.SidebarCollapsibleItem {
  --sidebar-collapsible-item-gap: var(--spacing-xs);
  z-index: 0;
}

  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
      opacity: 0;
      max-inline-size: 0;
      margin-inline-start: 0;
      pointer-events: none;
    }

  .SidebarCollapsibleItem-Fixed {
    z-index: 1;
  }

  .SidebarCollapsibleItem-ContentWrapper {
    display: flex;
    flex-shrink: 0;
    margin-inline-start: var(--sidebar-collapsible-item-gap);
  }

  .SidebarCollapsibleItem-Content {
    box-sizing: border-box;
  }

  .SidebarCollapsibleItem_center {
    margin-inline: auto;
  }

.Sidebar_variant_full .SidebarCollapsibleItem-Content, .Sidebar_variant_mini .SidebarCollapsibleItem-Content {
    overflow: hidden;
    inline-size: var(--sidebar-collapsible-item-content-width);
    min-inline-size: var(--sidebar-collapsible-item-content-width);
  }

.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-ContentWrapper {
    transition: var(--transition-default);
    transition-property: opacity, transform, max-inline-size, margin-inline;
  }

.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
      transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
      transition-duration: 100ms;
    }