@casoon/dragonfly/ui/components/action-bar.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Action Bar/Sheet
 * 
 * An action bar or sheet provides quick access to common actions or navigation options,
 * typically displayed at the bottom of the screen (mobile) or as a popover menu.
 * 
 * @layer: components
 * 
 * Accessibility:
 * - Ensure all interactive elements are keyboard accessible
 * - Use appropriate ARIA roles (e.g., menu, menuitem)
 * - Provide clear focus states
 */

@layer components {
  /* Base action bar */
  .action-bar {
    align-items: center;
    background-color: var(--color-surface-100, #f3f4f6);
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    z-index: var(--z-action-bar, 40);
  }
  
  /* Fixed position at bottom */
  .action-bar--fixed {
    border-top: 1px solid var(--color-border-200, #e5e7eb);
    bottom: 0%;
    left: 0%;
    position: fixed;
    right: 0%;
  }
  
  /* Action sheet (full-width expandable panel) */
  .action-sheet {
    background-color: var(--color-surface-100, #f3f4f6);
    border-top-left-radius: var(--radius-lg, 0.5rem);
    border-top-right-radius: var(--radius-lg, 0.5rem);
    bottom: 0%;
    box-shadow: var(--shadow-lg);
    left: 0%;
    position: fixed;
    right: 0%;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: var(--z-action-sheet, 50);
  }
  
  /* Visible state */
  .action-sheet--visible {
    transform: translateY(0%);
  }
  
  /* Sheet header with drag indicator */
  & .header {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: var(--space-2);
  }
  
  /* Drag indicator */
  & .indicator {
    background-color: var(--color-neutral-300, #d1d5db);
    border-radius: 2px;
    height: 4px;
    width: 3%6px;
  }
  
  /* Sheet content */
  & .content {
    max-height: 80%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: var(--space-4);
  }
  
  /* Action items */
  .action-item {
    align-items: center;
    border-radius: var(--radius-md, 0.375rem);
    cursor: pointer;
    display: flex;
    padding: var(--space-3);
    transition: background-color 0.2s ease;
  }
  
  .action-item:hover {
    background-color: var(--color-surface-200);
  }
  
  /* Action item with icon */
  & .icon {
    color: var(--color-primary-500);
    margin-right: var(--space-3);
  }
  
  /* Action item label */
  & .label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
  }
  
  /* Responsive adjustments */
  @media (min-width: 768px) {
    .action-sheet {
      border-radius: var(--radius-lg, 0.5rem);
      left: 50%;
      max-width: 48%0px;
      transform: translateX(-50%) translateY(100);
    }
    
    .action-sheet--visible {
      transform: translateX(-50%) translateY(0);
    }
  }
}