Contents

@layer components {
  [data-coco][data-component="app-sidebar-nav"] {
    @apply bg-background-dark-2 antialiased;

    @media screen(max-sm) {
      @apply app-sidebar-nav-horizontal;
    }

    @media screen(sm) and screen(max-md) {
      @apply app-sidebar-nav-vertical-narrow;
    }

    @media screen(md) {
      @apply app-sidebar-nav-vertical-wide;
    }

    @media screen(letterbox) {
      @apply app-sidebar-nav-vertical-narrow;
    }
  }
}

@layer utilities {
  .app-sidebar-nav-horizontal {
    @apply w-full h-14 grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    .nav-item {
      @apply flex items-stretch;

      &[data-show-on-mobile="false"] {
        @apply hidden;
      }
    }

    .nav-item-action {
      .nav-item-label {
        @apply hidden;
      }
    }
  }

  .app-sidebar-nav-vertical {
    @apply h-full;

    .nav-item-action {
      .nav-item-label {
        @apply text-content-primary-inverse-vivid;
      }
    }
  }

  .app-sidebar-nav-vertical-narrow {
    @apply app-sidebar-nav-vertical;
    @apply w-16;

    .nav-item-action {
      [data-component="app-sidebar-nav-item"] {
        @apply pb-2.5;
      }
    }
  }

  .app-sidebar-nav-vertical-wide {
    @apply app-sidebar-nav-vertical;
    @apply w-24;

    .nav-item-action {
      [data-component="app-sidebar-nav-item"] {
        @apply pb-3;
      }
    }
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
coveragebook_components-0.8.5	app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css
coveragebook_components-0.8.4	app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css
coveragebook_components-0.8.3	app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css