Contents

@layer components {
  [data-coco][data-component="app-sidebar-nav"] {
    @apply bg-background-dark-2 antialiased;
    @apply w-full h-14 grid grid-rows-1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);

    .nav-action {
      @apply cursor-pointer;

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

    .nav-actions-button {
      @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
      @apply h-10 w-10 flex items-center justify-center mx-auto rounded-full cursor-pointer;

      &:hover {
        transform: scale(1.05);
      }

      .coco-icon {
        @apply h-6 w-6;
      }
    }

    .nav-item {
      @apply hidden sm:contents h-full justify-center w-full;
    }

    .mobile-nav-item {
      @apply flex sm:contents;
    }

    @media screen(sm) {
      @apply sidebar-nav-vertical-condensed;
    }

    @media screen(lg) {
      @apply sidebar-nav-vertical;
    }

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

  .sidebar-nav-action {
    @apply flex items-start p-1;

    .sidebar-nav-action-icon {
      @apply flex-none mr-3 text-content-light-1;
    }

    .sidebar-nav-action-detail {
      @apply w-full text-left;
    }

    .sidebar-nav-action-label {
      @apply mb-0.5 font-semibold text-content-light-1;
    }

    .sidebar-nav-action-description {
      @apply text-para-xs;
    }
  }

  .sidebar-nav-menu a.sidebar-nav-actions-item {
    width: 320px;
  }
}

@layer utilities {
  .sidebar-nav-vertical-condensed {
    @apply block w-18 h-full;

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

    .nav-actions-button {
      @apply h-14 w-14 mb-2;

      .coco-icon {
        @apply w-8 h-8;
      }
    }
  }

  .sidebar-nav-vertical {
    @apply block w-24 h-full;

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

    .nav-actions-button {
      @apply h-[72px] w-[72px];

      .coco-icon {
        @apply h-10 w-10;
      }
    }
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
coveragebook_components-0.8.0	app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css
coveragebook_components-0.8.0.beta.3	app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css