@fleetbase/ember-ui/addon/styles/components/sidebar-navigator.css

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

.next-sidebar-navigator {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    position: relative;
}

.next-sidebar-navigator-primary-action,
.next-sidebar-navigator-search,
.next-sidebar-navigator-item,
.next-sidebar-navigator-back {
    width: 100%;
    border-radius: 0.375rem;
}

.next-sidebar-navigator-primary-action {
    min-height: 2rem;
    @apply flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-blue-600;
}

.next-sidebar-navigator-primary-action:hover {
    @apply bg-blue-700;
}

.next-sidebar-navigator-search-wrap {
    position: relative;
    z-index: 20;
}

.next-sidebar-navigator-search {
    min-height: 1.625rem;
    padding: 0.5rem;
    @apply flex items-center gap-1.5 text-gray-500 bg-gray-50 border border-gray-200 shadow-sm;
}

.next-sidebar-navigator-search.is-morphing {
    opacity: 0;
    transform: scale(0.98);
}

.next-sidebar-navigator-search input {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    line-height: 1rem;
    font-size: 0.75rem;
    appearance: none;
    @apply flex-1 min-w-0 bg-transparent border-0 outline-none shadow-none;
}

.next-sidebar-navigator-search input::-webkit-search-cancel-button,
.next-sidebar-navigator-search input::-webkit-search-decoration,
.next-sidebar-navigator-search input::-webkit-search-results-button,
.next-sidebar-navigator-search input::-webkit-search-results-decoration,
.next-sidebar-navigator-search-popover-input input::-webkit-search-cancel-button,
.next-sidebar-navigator-search-popover-input input::-webkit-search-decoration,
.next-sidebar-navigator-search-popover-input input::-webkit-search-results-button,
.next-sidebar-navigator-search-popover-input input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

.next-sidebar-navigator-search input:focus {
    @apply outline-none shadow-none ring-0;
}

.next-sidebar-navigator-search button,
.next-sidebar-navigator-search-clear {
    @apply flex items-center justify-center w-5 h-5 text-gray-400 rounded;
}

.next-sidebar-navigator-search button:hover,
.next-sidebar-navigator-search-clear:hover {
    @apply text-gray-700 bg-gray-200;
}

.next-sidebar-navigator-kbd {
    font-size: 0.625rem;
    line-height: 1;
    @apply px-1.5 py-0.5 text-gray-400 border border-gray-300 rounded;
}

.next-sidebar-navigator-search-overlay {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 890;
    padding: 0;
    cursor: default;
    background-color: rgb(15 23 42 / 8%);
    border: 0;
    appearance: none;
    opacity: 1;
}

.next-sidebar-navigator-search-overlay.is-primed {
    opacity: 0;
}

.next-sidebar-navigator-search-overlay.is-opening {
    animation: next-sidebar-search-overlay-in 160ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-search-overlay.is-closing {
    animation: next-sidebar-search-overlay-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

.next-sidebar-navigator-search-popover {
    transform-origin: top left;
    max-height: min(31rem, calc(100vh - 2rem));
    overflow: hidden;
    z-index: 900;
    box-shadow:
        0 10px 22px rgb(15 23 42 / 12%),
        0 2px 5px rgb(15 23 42 / 8%);
    @apply bg-white border border-gray-300 rounded-lg;
}

.next-sidebar-navigator-search-popover.is-primed {
    opacity: 0.64;
    transform: translateX(var(--search-source-x, 0)) scaleX(var(--search-source-scale, 1)) scaleY(0.72);
}

.next-sidebar-navigator-search-popover.is-opening {
    animation: next-sidebar-search-popover-open 160ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-search-popover.is-open {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.next-sidebar-navigator-search-popover.is-closing {
    animation: next-sidebar-search-popover-close 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

.next-sidebar-navigator-search-popover-input {
    min-height: 3rem;
    @apply flex items-center gap-2 px-3 text-gray-500 border-b border-gray-200 bg-white;
}

.next-sidebar-navigator-search-popover-input input {
    line-height: 1.25rem;
    appearance: none;
    @apply flex-1 min-w-0 text-sm bg-transparent border-0 outline-none shadow-none;
}

.next-sidebar-navigator-search-popover-input input:focus {
    @apply outline-none shadow-none ring-0;
}

.next-sidebar-navigator-search-popover-input button {
    @apply flex items-center justify-center w-5 h-5 rounded text-gray-400;
}

.next-sidebar-navigator-search-popover-input button:hover {
    @apply text-gray-700 bg-gray-200;
}

.next-sidebar-navigator-search-close {
    @apply ml-1;
}

.next-sidebar-navigator-search-results {
    max-height: min(26rem, calc(100vh - 6rem));
    overflow-y: auto;
    @apply p-1.5 bg-white;
}

.next-sidebar-navigator-search-result {
    min-height: 3.5rem;
    @apply relative flex w-full items-start gap-3 rounded-md px-2.5 py-2 text-left text-gray-700 border border-transparent transition-colors duration-150;
}

.next-sidebar-navigator-search-result.is-active,
.next-sidebar-navigator-search-result:hover {
    @apply bg-gray-100 text-gray-900;
}

.next-sidebar-navigator-search-result-icon {
    @apply flex items-center justify-center w-9 h-9 mt-0.5 text-base text-gray-500 bg-gray-100 border border-gray-200 rounded-md shrink-0 transition-colors duration-150;
}

.next-sidebar-navigator-search-result.is-active .next-sidebar-navigator-search-result-icon,
.next-sidebar-navigator-search-result:hover .next-sidebar-navigator-search-result-icon {
    @apply text-gray-900 bg-white border-gray-300;
}

.next-sidebar-navigator-search-result-content {
    @apply flex flex-col min-w-0 flex-1 gap-0.5;
}

.next-sidebar-navigator-search-result-label {
    @apply text-sm font-semibold leading-5 truncate;
}

.next-sidebar-navigator-search-result-description {
    @apply text-xs leading-4 text-gray-500 truncate;
}

.next-sidebar-navigator-search-result-meta {
    font-size: 0.625rem;
    line-height: 1;
    @apply flex items-center gap-1 text-gray-400 truncate;
}

.next-sidebar-navigator-search-status {
    min-height: 7rem;
    @apply flex flex-col items-center justify-center gap-2 px-3 py-6 text-sm text-center text-gray-400 bg-white;
}

.next-sidebar-navigator-viewport {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.next-sidebar-navigator-view {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 100%;
}

.next-sidebar-navigator-view-out {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    pointer-events: none;
}

.next-sidebar-navigator-viewport.is-transitioning {
    min-height: var(--next-sidebar-navigator-transition-height, 12rem);
}

.next-sidebar-navigator-viewport.is-transitioning.is-forward .next-sidebar-navigator-view-out {
    animation: next-sidebar-navigator-out-left 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-viewport.is-transitioning.is-forward .next-sidebar-navigator-view-in {
    animation: next-sidebar-navigator-in-right 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-viewport.is-transitioning.is-back .next-sidebar-navigator-view-out {
    animation: next-sidebar-navigator-out-right 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-viewport.is-transitioning.is-back .next-sidebar-navigator-view-in {
    animation: next-sidebar-navigator-in-left 180ms cubic-bezier(0.2, 0, 0, 1) both;
}

.next-sidebar-navigator-back,
.next-sidebar-navigator-nested-header {
    min-height: 2rem;
    @apply relative flex items-center justify-center px-2 py-1.5 mb-1 text-sm font-medium text-gray-700 border border-transparent bg-transparent;
}

.next-sidebar-navigator-back:hover {
    background-color: rgb(229 231 235 / 65%);
}

.next-sidebar-navigator-back-icon {
    position: absolute;
    left: 0.5rem;
    @apply flex items-center justify-center w-5 h-5 text-gray-500;
}

.next-sidebar-navigator-item {
    min-height: 1.75rem;
    @apply flex items-center gap-2 px-2 py-0.5 text-left text-gray-700 border border-transparent;
}

.next-sidebar-navigator-item.has-description {
    min-height: 2.5rem;
    @apply items-start py-1;
}

.next-sidebar-navigator-item:hover {
    @apply bg-gray-100;
}

.next-sidebar-navigator-item.is-parent-active {
    @apply bg-gray-100;
}

.next-sidebar-navigator-item.is-active {
    @apply text-gray-900 bg-gray-200;
}

.next-sidebar-navigator-item-icon {
    @apply flex items-center justify-center w-5 h-5 shrink-0 text-gray-400;
}

.next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-icon {
    @apply text-gray-800;
}

.next-sidebar-navigator-item-content {
    @apply flex flex-col min-w-0 flex-1;
}

.next-sidebar-navigator-item-label {
    @apply text-sm leading-5 truncate;
}

.next-sidebar-navigator-item-description {
    @apply text-xs leading-4 text-gray-400 truncate;
}

.next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-description {
    @apply text-gray-600;
}

.next-sidebar-navigator-item-badge {
    font-size: 0.625rem;
    line-height: 1;
    @apply px-1.5 py-0.5 text-gray-500 bg-gray-200 rounded;
}

.next-sidebar-navigator-item-caret {
    @apply ml-auto flex items-center justify-center w-6 h-6 rounded text-gray-400 transition-colors;
}

.next-sidebar-navigator-item:hover .next-sidebar-navigator-item-caret,
.next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-caret,
.next-sidebar-navigator-item.is-parent-active .next-sidebar-navigator-item-caret {
    @apply text-gray-700 bg-gray-200;
}

.next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-caret {
    @apply text-gray-800 bg-gray-300;
}

body[data-theme='dark'] .next-sidebar-navigator-search {
    @apply text-gray-400 bg-gray-800 border-gray-700 shadow-none;
}

body[data-theme='dark'] .next-sidebar-navigator-search input {
    @apply text-gray-100;
}

body[data-theme='dark'] .next-sidebar-navigator-search button:hover {
    @apply text-gray-100 bg-gray-700;
}

body[data-theme='dark'] .next-sidebar-navigator-kbd {
    @apply text-gray-400 border-gray-700 bg-gray-900;
}

body[data-theme='dark'] .next-sidebar-navigator-search-popover {
    @apply bg-gray-900 border-gray-700;
}

body[data-theme='dark'] .next-sidebar-navigator-search-overlay {
    background-color: rgb(2 6 23 / 18%);
}

body[data-theme='dark'] .next-sidebar-navigator-search-popover-input {
    @apply text-gray-400 bg-gray-900 border-gray-700;
}

body[data-theme='dark'] .next-sidebar-navigator-search-popover-input input {
    @apply text-gray-100;
}

body[data-theme='dark'] .next-sidebar-navigator-search-popover-input button:hover,
body[data-theme='dark'] .next-sidebar-navigator-search-result.is-active,
body[data-theme='dark'] .next-sidebar-navigator-search-result:hover {
    @apply text-gray-100 bg-gray-800;
}

body[data-theme='dark'] .next-sidebar-navigator-search-results,
body[data-theme='dark'] .next-sidebar-navigator-search-status {
    @apply bg-gray-900;
}

body[data-theme='dark'] .next-sidebar-navigator-search-result,
body[data-theme='dark'] .next-sidebar-navigator-back,
body[data-theme='dark'] .next-sidebar-navigator-nested-header,
body[data-theme='dark'] .next-sidebar-navigator-item {
    @apply text-gray-200;
}

body[data-theme='dark'] .next-sidebar-navigator-search-result-icon {
    @apply text-gray-400 bg-gray-800 border-gray-700;
}

body[data-theme='dark'] .next-sidebar-navigator-search-result.is-active .next-sidebar-navigator-search-result-icon,
body[data-theme='dark'] .next-sidebar-navigator-search-result:hover .next-sidebar-navigator-search-result-icon {
    @apply text-gray-100 bg-gray-700 border-gray-600;
}

body[data-theme='dark'] .next-sidebar-navigator-search-result-description {
    @apply text-gray-400;
}

body[data-theme='dark'] .next-sidebar-navigator-back,
body[data-theme='dark'] .next-sidebar-navigator-nested-header {
    @apply bg-transparent border-transparent;
}

body[data-theme='dark'] .next-sidebar-navigator-back:hover,
body[data-theme='dark'] .next-sidebar-navigator-item:hover,
body[data-theme='dark'] .next-sidebar-navigator-item.is-parent-active {
    @apply bg-gray-700 bg-opacity-75;
}

body[data-theme='dark'] .next-sidebar-navigator-item.is-active {
    @apply bg-gray-700 bg-opacity-75 text-white;
}

body[data-theme='dark'] .next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-icon {
    @apply text-gray-100;
}

body[data-theme='dark'] .next-sidebar-navigator-item:hover .next-sidebar-navigator-item-caret,
body[data-theme='dark'] .next-sidebar-navigator-item.is-active .next-sidebar-navigator-item-caret,
body[data-theme='dark'] .next-sidebar-navigator-item.is-parent-active .next-sidebar-navigator-item-caret {
    @apply text-gray-100 bg-gray-800;
}

body[data-theme='dark'] .next-sidebar-navigator-item-badge {
    @apply text-gray-300 bg-gray-700;
}

@keyframes next-sidebar-navigator-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-1rem);
    }
}

@keyframes next-sidebar-navigator-in-right {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes next-sidebar-navigator-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(1rem);
    }
}

@keyframes next-sidebar-navigator-in-left {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes next-sidebar-search-popover-open {
    from {
        opacity: 0.6;
        transform: translateX(var(--search-source-x, 0)) scaleX(var(--search-source-scale, 1)) scaleY(0.72);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);
    }
}

@keyframes next-sidebar-search-popover-close {
    from {
        opacity: 1;
        transform: translateX(0) scaleX(1) scaleY(1);
    }

    to {
        opacity: 0;
        transform: translateX(var(--search-source-x, 0)) scaleX(var(--search-source-scale, 1)) scaleY(0.72);
    }
}

@keyframes next-sidebar-search-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes next-sidebar-search-overlay-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .next-sidebar-navigator-viewport.is-transitioning.is-forward .next-sidebar-navigator-view-out,
    .next-sidebar-navigator-viewport.is-transitioning.is-forward .next-sidebar-navigator-view-in,
    .next-sidebar-navigator-viewport.is-transitioning.is-back .next-sidebar-navigator-view-out,
    .next-sidebar-navigator-viewport.is-transitioning.is-back .next-sidebar-navigator-view-in,
    .next-sidebar-navigator-search-overlay.is-opening,
    .next-sidebar-navigator-search-overlay.is-closing,
    .next-sidebar-navigator-search-popover.is-opening,
    .next-sidebar-navigator-search-popover.is-closing {
        animation: none;
    }
}