@vsn-ux/gaia-styles 0.6.2 → 0.6.4

package/src/styles/components/side-navigation.css

@@ -0,0 +1,351 @@
+.ga-side-navigation {
+  @apply shadow-north flex h-full w-80 flex-col rounded bg-(--ga-color-surface-primary) p-1;
+
+  .ga-side-navigation__header {
+    @apply relative z-10 flex shrink-0 flex-col;
+  }
+
+  .ga-side-navigation__switcher {
+    @apply relative flex cursor-pointer items-center justify-between gap-2 rounded p-3 outline-none;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      &::after {
+        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
+      }
+    }
+
+    &:active {
+      .ga-side-navigation__switcher-title {
+        @apply font-semibold;
+      }
+    }
+
+    &.ga-side-navigation__switcher--active {
+      @apply bg-(--ga-color-surface-selected);
+
+      .ga-side-navigation__switcher-title {
+        @apply font-semibold;
+      }
+    }
+  }
+
+  .ga-side-navigation__switcher-title {
+    @apply min-w-0 flex-1 truncate text-left text-lg font-medium text-(--ga-color-text-action);
+  }
+
+  .ga-side-navigation__switcher-action {
+    @apply flex shrink-0 cursor-pointer items-center py-2 text-(--ga-color-icon-secondary);
+
+    &:hover {
+      @apply text-(--ga-color-icon-action);
+    }
+  }
+
+  .ga-side-navigation__switcher-dropdown {
+    @apply shadow-north absolute top-full right-0 left-0 z-10 flex max-h-80 flex-col overflow-y-auto rounded bg-(--ga-color-surface-primary) px-2 pt-4 pb-2;
+  }
+
+  .ga-side-navigation__switcher-dropdown-header {
+    @apply px-4 pt-1 pb-1 text-sm font-semibold text-(--ga-color-text-disable-selected) uppercase;
+  }
+
+  .ga-side-navigation__switcher-dropdown-item {
+    @apply animate-hover relative flex cursor-pointer items-center gap-2 rounded p-4 text-left transition-colors;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      @apply outline-none;
+
+      &::after {
+        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
+      }
+    }
+
+    &:active {
+      .ga-side-navigation__switcher-dropdown-title {
+        @apply font-semibold;
+      }
+    }
+  }
+
+  .ga-side-navigation__switcher-dropdown-title {
+    @apply text-md min-w-0 flex-1 truncate text-left font-medium text-(--ga-color-text-action);
+  }
+
+  .ga-side-navigation__switcher-dropdown-external {
+    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
+  }
+
+  .ga-side-navigation__search {
+    @apply mx-3 my-2;
+
+    &.ga-input {
+      @apply w-auto;
+
+      &:not(:hover) {
+        @apply border-(--ga-color-surface-page) bg-(--ga-color-surface-page);
+      }
+
+      input::-webkit-search-cancel-button {
+        @apply hidden;
+      }
+    }
+  }
+
+  .ga-side-navigation__search-shortcut {
+    @apply font-inter shrink-0 cursor-default rounded border border-(--ga-color-border-disabled) bg-white px-1 py-px text-xs text-(--ga-color-icon-on-disabled);
+  }
+
+  .ga-side-navigation__body {
+    @apply flex flex-1 flex-col overflow-y-auto px-3 py-2;
+  }
+
+  .ga-side-navigation__item {
+    @apply text-md animate-hover relative flex cursor-pointer flex-row items-center gap-3 rounded px-4 py-3 text-left transition-colors;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus,
+    &:focus-visible {
+      @apply outline-none;
+    }
+
+    &:active:not(.ga-side-navigation__item--disabled) {
+      .ga-side-navigation__item-label {
+        @apply font-medium;
+      }
+    }
+
+    &.ga-side-navigation__item--active {
+      @apply bg-(--ga-color-surface-selected);
+
+      &::before {
+        @apply absolute top-1/2 left-0 h-8 w-1 -translate-y-1/2 rounded-r bg-(--ga-color-surface-action) content-[''];
+      }
+
+      .ga-side-navigation__item-label {
+        @apply font-semibold;
+      }
+    }
+
+    &.ga-side-navigation__item--expanded {
+      .ga-side-navigation__item-label {
+        @apply font-semibold;
+      }
+    }
+
+    &.ga-side-navigation__item--disabled {
+      @apply cursor-not-allowed;
+
+      &:hover {
+        @apply bg-transparent;
+      }
+
+      .ga-side-navigation__item-icon {
+        @apply text-(--ga-color-icon-disabled);
+      }
+
+      .ga-side-navigation__item-label {
+        @apply text-(--ga-color-text-disabled);
+      }
+    }
+  }
+
+  .ga-side-navigation__item--level-2 {
+    @apply pl-8;
+  }
+
+  .ga-side-navigation__item--level-3 {
+    @apply pl-14;
+  }
+
+  .ga-side-navigation__item--level-4 {
+    @apply pl-20;
+  }
+
+  .ga-side-navigation__item-icon {
+    @apply h-4 w-4 shrink-0 text-(--ga-color-icon-primary);
+  }
+
+  .ga-side-navigation__item-content {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .ga-side-navigation__item-label {
+    @apply text-md truncate text-(--ga-color-text-action);
+  }
+
+  .ga-side-navigation__item-description {
+    @apply truncate text-xs text-(--ga-color-text-secondary);
+  }
+
+  .ga-side-navigation__item-external {
+    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
+  }
+
+  .ga-side-navigation__recent-title {
+    @apply px-4 py-3 text-sm font-medium text-(--ga-color-text-disable-selected) uppercase;
+  }
+
+  .ga-side-navigation__recent-item {
+    @apply animate-hover relative flex cursor-pointer flex-row items-center gap-3 rounded py-2 pl-4 text-left transition-colors;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus,
+    &:focus-visible {
+      @apply outline-none;
+    }
+  }
+
+  .ga-side-navigation__recent-item-icon {
+    @apply shrink-0 text-(--ga-color-icon-primary);
+  }
+
+  .ga-side-navigation__recent-item-content {
+    @apply flex min-w-0 flex-col;
+  }
+
+  .ga-side-navigation__recent-item-label {
+    @apply text-md truncate leading-6 font-medium text-(--ga-color-text-action);
+  }
+
+  .ga-side-navigation__recent-item-description {
+    @apply truncate text-xs text-(--ga-color-text-on-disabled);
+  }
+
+  .ga-side-navigation__search-results-title {
+    @apply px-6 text-sm leading-6 font-medium text-(--ga-color-text-disable-selected);
+  }
+
+  .ga-side-navigation__search-results-item {
+    @apply animate-hover relative mx-3 flex cursor-pointer flex-row items-center gap-3 rounded px-3 py-2 text-left transition-colors;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      @apply outline-none;
+
+      &::after {
+        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
+      }
+    }
+  }
+
+  .ga-side-navigation__search-results-item-content {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .ga-side-navigation__search-results-item-label {
+    @apply text-md truncate leading-6 font-medium text-(--ga-color-text-action);
+  }
+
+  .ga-side-navigation__search-results-item-description {
+    @apply truncate text-xs text-(--ga-color-text-on-disabled);
+  }
+
+  .ga-side-navigation__search-results-item-external {
+    @apply h-4 w-4 shrink-0 self-center text-(--ga-color-icon-secondary);
+  }
+
+  .ga-side-navigation__footer {
+    @apply relative z-10 shrink-0 border-t border-(--ga-color-border-tertiary) pt-1;
+  }
+
+  .ga-side-navigation__user {
+    @apply relative flex cursor-pointer items-center gap-3 rounded px-4 py-3 outline-none;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      &::after {
+        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
+      }
+    }
+
+    &.ga-side-navigation__user--active {
+      @apply bg-(--ga-color-surface-selected);
+    }
+  }
+
+  .ga-side-navigation__user-avatar {
+    @apply h-10 w-10 shrink-0 rounded-full;
+  }
+
+  .ga-side-navigation__user-name {
+    @apply text-md flex-1 truncate font-medium text-(--ga-color-text-body);
+  }
+
+  .ga-side-navigation__user-action {
+    @apply flex shrink-0 cursor-pointer items-center text-(--ga-color-icon-secondary);
+
+    &:hover {
+      @apply text-(--ga-color-icon-action);
+    }
+  }
+
+  .ga-side-navigation__footer-dropdown {
+    @apply shadow-south absolute right-0 bottom-full left-0 z-10 flex max-h-80 flex-col overflow-y-auto rounded bg-(--ga-color-surface-primary) p-3;
+  }
+
+  .ga-side-navigation__footer-dropdown-item {
+    @apply animate-hover relative flex cursor-pointer items-center gap-3 rounded py-3 pr-2 pl-4 text-left transition-colors;
+
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+
+    &:focus-visible {
+      @apply outline-none;
+
+      &::after {
+        @apply absolute inset-[3px] rounded border-2 border-(--ga-color-border-focus) content-[''];
+      }
+    }
+
+    &:active {
+      .ga-side-navigation__footer-dropdown-title {
+        @apply font-semibold;
+      }
+    }
+
+    &.ga-side-navigation__footer-dropdown-item--disabled {
+      @apply cursor-not-allowed;
+
+      &:hover {
+        @apply bg-transparent;
+      }
+
+      .ga-side-navigation__footer-dropdown-icon {
+        @apply text-(--ga-color-icon-disabled);
+      }
+
+      .ga-side-navigation__footer-dropdown-title {
+        @apply text-(--ga-color-text-disabled);
+      }
+    }
+  }
+
+  .ga-side-navigation__footer-dropdown-icon {
+    @apply h-4 w-4 shrink-0 text-(--ga-color-icon-primary);
+  }
+
+  .ga-side-navigation__footer-dropdown-title {
+    @apply text-md min-w-0 flex-1 truncate text-left font-medium text-(--ga-color-text-action);
+  }
+}

package/src/styles/components.css

@@ -1,5 +1,6 @@
 @import './components/avatar.css';
 @import './components/badge.css';
+@import './components/breadcrumbs.css';
 @import './components/button.css';
 @import './components/card.css';
 @import './components/calendar.css';
@@ -25,3 +26,4 @@
 @import './components/tooltip.css';
 @import './components/link.css';
 @import './components/quick-filter-button.css';
+@import './components/side-navigation.css';