now-design-organisms/dist/leftPanel/LeftPanel.css

Organism components for the Now Design System

/* LeftPanel Template Styles */

/* Main Container */
.left-panel {
  display: flex;
  flex-direction: column;
  width: 200px;
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  margin: 0;
  border: none; /* Removed border to eliminate blue border */
  border-radius: 0;
  background: var(--normal-surface-page, #FFF);
  transition: background 0.3s ease;
}

/* Logo Section */
.left-panel-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  padding: 16px;
}

/* Content Section */
.left-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .left-panel {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .left-panel {
    width: 100%;
    padding: 8px 16px;
  }
  
  .left-panel-logo {
    margin-bottom: 16px;
    padding: 8px 0;
  }
}

/* Dark Theme Support */
/* @media (prefers-color-scheme: dark) {
  .sidebar-filter {
    background: var(--dark-surface-page, #1a1a1a);
    border-color: var(--dark-border-primary, #333);
  }
} */

/* Focus States for Accessibility - Removed to prevent blue border */
.left-panel:focus-within {
  /* Removed focus outline to prevent blue border appearance */
}

/* Sticky LeftPanel Styles */
.left-panel.sticky {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* Responsive sticky behavior */
@media (max-width: 768px) {
  .left-panel.sticky {
    width: 100% !important;
    max-width: 100vw;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .left-panel.sticky.open {
    transform: translateX(0);
  }
  
  .left-panel.sticky.hidden {
    transform: translateX(-100%);
  }
  
  /* Ensure hamburger button is always visible when left panel is hidden */
  .left-panel.sticky.hidden + button,
  .left-panel.sticky.hidden ~ button {
    display: block !important;
  }
}

/* Hover Effects - Removed border changes to prevent hover borders */
.left-panel:hover {
  /* No shadow or border changes on hover - maintaining clean appearance */
}