cmat 0.0.3

package/components/navigation/vertical/styles/appearances/default.scss

@@ -0,0 +1,550 @@
+/* Variables */
+$cmat-vertical-navigation-width: 280;
+
+cmat-vertical-navigation {
+    position: sticky;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    top: 0;
+    width: #{$cmat-vertical-navigation-width}px;
+    min-width: #{$cmat-vertical-navigation-width}px;
+    max-width: #{$cmat-vertical-navigation-width}px;
+    height: 100%;
+    z-index: 200;
+
+    /* ----------------------------------------------------------------------------------------------------- */
+    /* @ Navigation Drawer
+    /* ----------------------------------------------------------------------------------------------------- */
+
+    /* Animations */
+    &.cmat-vertical-navigation-animations-enabled {
+        transition-duration: 400ms;
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition-property: visibility, margin-left, margin-right, transform,
+            width, max-width, min-width;
+
+        /* Wrapper */
+        .cmat-vertical-navigation-wrapper {
+            transition-duration: 400ms;
+            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition-property: width, max-width, min-width;
+        }
+    }
+
+    /* Over mode */
+    &.cmat-vertical-navigation-mode-over {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+    }
+
+    /* Left position */
+    &.cmat-vertical-navigation-position-left {
+        /* Side mode */
+        &.cmat-vertical-navigation-mode-side {
+            margin-left: -#{$cmat-vertical-navigation-width}px;
+
+            &.cmat-vertical-navigation-opened {
+                margin-left: 0;
+            }
+        }
+
+        /* Over mode */
+        &.cmat-vertical-navigation-mode-over {
+            left: 0;
+            transform: translate3d(-100%, 0, 0);
+
+            &.cmat-vertical-navigation-opened {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        /* Wrapper */
+        .cmat-vertical-navigation-wrapper {
+            left: 0;
+        }
+    }
+
+    /* Right position */
+    &.cmat-vertical-navigation-position-right {
+        /* Side mode */
+        &.cmat-vertical-navigation-mode-side {
+            margin-right: -#{$cmat-vertical-navigation-width}px;
+
+            &.cmat-vertical-navigation-opened {
+                margin-right: 0;
+            }
+        }
+
+        /* Over mode */
+        &.cmat-vertical-navigation-mode-over {
+            right: 0;
+            transform: translate3d(100%, 0, 0);
+
+            &.cmat-vertical-navigation-opened {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        /* Wrapper */
+        .cmat-vertical-navigation-wrapper {
+            right: 0;
+        }
+    }
+
+    /* Inner mode */
+    &.cmat-vertical-navigation-inner {
+        position: relative;
+        width: auto;
+        min-width: 0;
+        max-width: none;
+        height: auto;
+        min-height: 0;
+        max-height: none;
+        box-shadow: none;
+
+        .cmat-vertical-navigation-wrapper {
+            position: relative;
+            overflow: visible;
+            height: auto;
+
+            .cmat-vertical-navigation-content {
+                overflow: visible !important;
+            }
+        }
+    }
+
+    /* Wrapper */
+    .cmat-vertical-navigation-wrapper {
+        position: absolute;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 10;
+        background: inherit;
+        box-shadow: inset -1px 0 0 var(--cmat-border);
+
+        /* Header */
+        .cmat-vertical-navigation-header {
+        }
+
+        /* Content */
+        .cmat-vertical-navigation-content {
+            flex: 1 1 auto;
+            overflow-x: hidden;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+
+            /* Divider */
+            > cmat-vertical-navigation-divider-item {
+                margin: 24px 0;
+            }
+
+            /* Group */
+            > cmat-vertical-navigation-group-item {
+                margin-top: 24px;
+            }
+        }
+
+        /* Footer */
+        .cmat-vertical-navigation-footer {
+        }
+    }
+
+    /* Aside wrapper */
+    .cmat-vertical-navigation-aside-wrapper {
+        position: absolute;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        top: 0;
+        bottom: 0;
+        left: #{$cmat-vertical-navigation-width}px;
+        width: #{$cmat-vertical-navigation-width}px;
+        height: 100%;
+        z-index: 5;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        transition-duration: 400ms;
+        transition-property: left, right;
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+        background: inherit;
+
+        > cmat-vertical-navigation-aside-item {
+            padding: 24px 0;
+
+            /* First item of the aside */
+            > .cmat-vertical-navigation-item-wrapper {
+                display: none !important;
+            }
+        }
+    }
+
+    &.cmat-vertical-navigation-position-right {
+        .cmat-vertical-navigation-aside-wrapper {
+            left: auto;
+            right: #{$cmat-vertical-navigation-width}px;
+        }
+    }
+
+    /* ----------------------------------------------------------------------------------------------------- */
+    /* @ Navigation Items
+    /* ----------------------------------------------------------------------------------------------------- */
+
+    /* Navigation items common */
+    cmat-vertical-navigation-aside-item,
+    cmat-vertical-navigation-basic-item,
+    cmat-vertical-navigation-collapsable-item,
+    cmat-vertical-navigation-divider-item,
+    cmat-vertical-navigation-group-item,
+    cmat-vertical-navigation-spacer-item {
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 auto;
+        user-select: none;
+
+        .cmat-vertical-navigation-item-wrapper {
+            .cmat-vertical-navigation-item {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 10px 16px;
+                font-size: 13px;
+                font-weight: 500;
+                line-height: 20px;
+                text-decoration: none;
+                border-radius: 6px;
+
+                /* Disabled state */
+                &.cmat-vertical-navigation-item-disabled {
+                    cursor: default;
+                    opacity: 0.4;
+                }
+
+                .cmat-vertical-navigation-item-icon {
+                    margin-right: 16px;
+                }
+
+                .cmat-vertical-navigation-item-title-wrapper {
+                    .cmat-vertical-navigation-item-subtitle {
+                        font-size: 11px;
+                        line-height: 1.5;
+                    }
+                }
+
+                .cmat-vertical-navigation-item-badge {
+                    margin-left: auto;
+
+                    .cmat-vertical-navigation-item-badge-content {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 10px;
+                        font-weight: 700;
+                        white-space: nowrap;
+                        height: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    /* Aside, Basic, Collapsable, Group */
+    cmat-vertical-navigation-aside-item,
+    cmat-vertical-navigation-basic-item,
+    cmat-vertical-navigation-collapsable-item,
+    cmat-vertical-navigation-group-item {
+        > .cmat-vertical-navigation-item-wrapper {
+            margin: 0 12px;
+        }
+    }
+
+    /* Aside, Basic, Collapsable */
+    cmat-vertical-navigation-aside-item,
+    cmat-vertical-navigation-basic-item,
+    cmat-vertical-navigation-collapsable-item {
+        margin-bottom: 4px;
+
+        .cmat-vertical-navigation-item {
+            cursor: pointer;
+        }
+    }
+
+    /* Aside */
+    cmat-vertical-navigation-aside-item {
+    }
+
+    /* Basic */
+    cmat-vertical-navigation-basic-item {
+    }
+
+    /* Collapsable */
+    cmat-vertical-navigation-collapsable-item {
+        > .cmat-vertical-navigation-item-wrapper {
+            .cmat-vertical-navigation-item {
+                .cmat-vertical-navigation-item-badge {
+                    + .cmat-vertical-navigation-item-arrow {
+                        margin-left: 8px;
+                    }
+                }
+
+                .cmat-vertical-navigation-item-arrow {
+                    height: 20px;
+                    line-height: 20px;
+                    margin-left: auto;
+                    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
+                        color 375ms cubic-bezier(0.25, 0.8, 0.25, 1);
+                }
+            }
+        }
+
+        &.cmat-vertical-navigation-item-expanded {
+            > .cmat-vertical-navigation-item-wrapper {
+                .cmat-vertical-navigation-item {
+                    .cmat-vertical-navigation-item-arrow {
+                        transform: rotate(90deg);
+                    }
+                }
+            }
+        }
+
+        > .cmat-vertical-navigation-item-children {
+            margin-top: 6px;
+
+            > *:last-child {
+                padding-bottom: 6px;
+
+                > .cmat-vertical-navigation-item-children {
+                    > *:last-child {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .cmat-vertical-navigation-item {
+                padding: 10px 16px;
+            }
+        }
+
+        /* 1st level */
+        .cmat-vertical-navigation-item-children {
+            overflow: hidden;
+
+            .cmat-vertical-navigation-item {
+                padding-left: 56px;
+            }
+
+            /* 2nd level */
+            .cmat-vertical-navigation-item-children {
+                .cmat-vertical-navigation-item {
+                    padding-left: 72px;
+                }
+
+                /* 3rd level */
+                .cmat-vertical-navigation-item-children {
+                    .cmat-vertical-navigation-item {
+                        padding-left: 88px;
+                    }
+
+                    /* 4th level */
+                    .cmat-vertical-navigation-item-children {
+                        .cmat-vertical-navigation-item {
+                            padding-left: 104px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /* Divider */
+    cmat-vertical-navigation-divider-item {
+        margin: 12px 0;
+
+        .cmat-vertical-navigation-item-wrapper {
+            height: 1px;
+            box-shadow: 0 1px 0 0;
+        }
+    }
+
+    /* Group */
+    cmat-vertical-navigation-group-item {
+        > .cmat-vertical-navigation-item-wrapper {
+            .cmat-vertical-navigation-item {
+                .cmat-vertical-navigation-item-badge,
+                .cmat-vertical-navigation-item-icon {
+                    display: none !important;
+                }
+
+                .cmat-vertical-navigation-item-title-wrapper {
+                    .cmat-vertical-navigation-item-title {
+                        font-size: 12px;
+                        font-weight: 700;
+                        letter-spacing: 0.05em;
+                        text-transform: uppercase;
+                    }
+                }
+            }
+        }
+    }
+
+    /* Spacer */
+    cmat-vertical-navigation-spacer-item {
+        margin: 6px 0;
+    }
+}
+
+/* ----------------------------------------------------------------------------------------------------- */
+/* @ Overlay
+/* ----------------------------------------------------------------------------------------------------- */
+.cmat-vertical-navigation-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 170;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+
+    + .cmat-vertical-navigation-aside-overlay {
+        background-color: transparent;
+    }
+}
+
+/* ----------------------------------------------------------------------------------------------------- */
+/* @ Aside overlay
+/* ----------------------------------------------------------------------------------------------------- */
+.cmat-vertical-navigation-aside-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 169;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* ----------------------------------------------------------------------------------------------------- */
+/* @ Navigation Items Colors
+/* ----------------------------------------------------------------------------------------------------- */
+
+/* Navigation items common */
+cmat-vertical-navigation-aside-item,
+cmat-vertical-navigation-basic-item,
+cmat-vertical-navigation-collapsable-item,
+cmat-vertical-navigation-group-item {
+    .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            color: currentColor;
+
+            .cmat-vertical-navigation-item-icon {
+                @apply text-current opacity-60;
+            }
+
+            .cmat-vertical-navigation-item-title-wrapper {
+                .cmat-vertical-navigation-item-title {
+                    @apply text-current opacity-80;
+                }
+
+                .cmat-vertical-navigation-item-subtitle {
+                    @apply text-current opacity-50;
+                }
+            }
+        }
+    }
+}
+
+/* Aside, Basic, Collapsable */
+cmat-vertical-navigation-aside-item,
+cmat-vertical-navigation-basic-item,
+cmat-vertical-navigation-collapsable-item {
+    > .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            /* Active state */
+            &:not(.cmat-vertical-navigation-item-disabled) {
+                &.cmat-vertical-navigation-item-active,
+                &.cmat-vertical-navigation-item-active-forced {
+                    @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
+
+                    .cmat-vertical-navigation-item-icon {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-title {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-subtitle {
+                        @apply opacity-100;
+                    }
+                }
+            }
+
+            /* Hover state */
+            &:not(.cmat-vertical-navigation-item-active-forced):not(.cmat-vertical-navigation-item-active):not(.cmat-vertical-navigation-item-disabled) {
+                &:hover {
+                    @apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;
+
+                    .cmat-vertical-navigation-item-icon {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-title,
+                    .cmat-vertical-navigation-item-arrow {
+                        @apply opacity-100;
+                    }
+
+                    .cmat-vertical-navigation-item-subtitle {
+                        @apply opacity-100;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* Collapsable */
+cmat-vertical-navigation-collapsable-item {
+    /* Expanded state */
+    &.cmat-vertical-navigation-item-expanded {
+        > .cmat-vertical-navigation-item-wrapper {
+            .cmat-vertical-navigation-item {
+                .cmat-vertical-navigation-item-icon {
+                    @apply opacity-100;
+                }
+
+                .cmat-vertical-navigation-item-title,
+                .cmat-vertical-navigation-item-arrow {
+                    @apply opacity-100;
+                }
+
+                .cmat-vertical-navigation-item-subtitle {
+                    @apply opacity-100;
+                }
+            }
+        }
+    }
+}
+
+/* Group */
+cmat-vertical-navigation-group-item {
+    > .cmat-vertical-navigation-item-wrapper {
+        .cmat-vertical-navigation-item {
+            .cmat-vertical-navigation-item-title-wrapper {
+                .cmat-vertical-navigation-item-title {
+                    @apply opacity-100 text-primary-600 dark:text-primary-400;
+                }
+            }
+        }
+    }
+}

package/components/navigation/vertical/styles/appearances/dense.scss

@@ -0,0 +1,171 @@
+/* Variables */
+$cmat-vertical-navigation-width: 280;
+$cmat-vertical-navigation-dense-width: 80;
+
+cmat-vertical-navigation {
+    /* Dense appearance overrides */
+    &.cmat-vertical-navigation-appearance-dense {
+        &:not(.cmat-vertical-navigation-mode-over) {
+            width: #{$cmat-vertical-navigation-dense-width}px;
+            min-width: #{$cmat-vertical-navigation-dense-width}px;
+            max-width: #{$cmat-vertical-navigation-dense-width}px;
+
+            /* Left positioned */
+            &.cmat-vertical-navigation-position-left {
+                /* Side mode */
+                &.cmat-vertical-navigation-mode-side {
+                    margin-left: -#{$cmat-vertical-navigation-dense-width}px;
+                }
+
+                /* Opened */
+                &.cmat-vertical-navigation-opened {
+                    margin-left: 0;
+                }
+            }
+
+            /* Right positioned */
+            &.cmat-vertical-navigation-position-right {
+                /* Side mode */
+                &.cmat-vertical-navigation-mode-side {
+                    margin-right: -#{$cmat-vertical-navigation-dense-width}px;
+                }
+
+                /* Opened */
+                &.cmat-vertical-navigation-opened {
+                    margin-right: 0;
+                }
+
+                /* Aside wrapper */
+                .cmat-vertical-navigation-aside-wrapper {
+                    left: auto;
+                    right: #{$cmat-vertical-navigation-dense-width}px;
+                }
+
+                &.cmat-vertical-navigation-hover {
+                    .cmat-vertical-navigation-aside-wrapper {
+                        left: auto;
+                        right: #{$cmat-vertical-navigation-width}px;
+                    }
+                }
+            }
+        }
+
+        /* Wrapper */
+        .cmat-vertical-navigation-wrapper {
+            /* Content */
+            .cmat-vertical-navigation-content {
+                cmat-vertical-navigation-aside-item,
+                cmat-vertical-navigation-basic-item,
+                cmat-vertical-navigation-collapsable-item,
+                cmat-vertical-navigation-group-item {
+                    .cmat-vertical-navigation-item-wrapper {
+                        .cmat-vertical-navigation-item {
+                            width: #{$cmat-vertical-navigation-width}px - 24px;
+                            min-width: #{$cmat-vertical-navigation-width}px -
+                                24px;
+                            max-width: #{$cmat-vertical-navigation-width}px -
+                                24px;
+
+                            .cmat-vertical-navigation-item-arrow,
+                            .cmat-vertical-navigation-item-badge,
+                            .cmat-vertical-navigation-item-title-wrapper {
+                                transition: opacity 400ms
+                                    cubic-bezier(0.25, 0.8, 0.25, 1);
+                            }
+                        }
+                    }
+                }
+
+                cmat-vertical-navigation-group-item {
+                    &:first-of-type {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        &:not(.cmat-vertical-navigation-hover):not(.cmat-vertical-navigation-mode-over) {
+            /* Wrapper */
+            .cmat-vertical-navigation-wrapper {
+                /* Content */
+                .cmat-vertical-navigation-content {
+                    .cmat-vertical-navigation-item-wrapper {
+                        .cmat-vertical-navigation-item {
+                            padding: 10px 16px;
+
+                            .cmat-vertical-navigation-item-arrow,
+                            .cmat-vertical-navigation-item-badge,
+                            .cmat-vertical-navigation-item-title-wrapper {
+                                white-space: nowrap;
+                                opacity: 0;
+                            }
+                        }
+                    }
+
+                    cmat-vertical-navigation-collapsable-item {
+                        .cmat-vertical-navigation-item-children {
+                            display: none;
+                        }
+                    }
+
+                    cmat-vertical-navigation-group-item {
+                        > .cmat-vertical-navigation-item-wrapper {
+                            .cmat-vertical-navigation-item {
+                                &:before {
+                                    content: "";
+                                    position: absolute;
+                                    top: 20px;
+                                    width: 23px;
+                                    border-top-width: 2px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        /* Aside wrapper */
+        .cmat-vertical-navigation-aside-wrapper {
+            left: #{$cmat-vertical-navigation-dense-width}px;
+        }
+
+        /* Hover */
+        &.cmat-vertical-navigation-hover {
+            .cmat-vertical-navigation-wrapper {
+                width: #{$cmat-vertical-navigation-width}px;
+
+                .cmat-vertical-navigation-content {
+                    .cmat-vertical-navigation-item-wrapper {
+                        .cmat-vertical-navigation-item {
+                            .cmat-vertical-navigation-item-arrow,
+                            .cmat-vertical-navigation-item-badge,
+                            .cmat-vertical-navigation-item-title-wrapper {
+                                white-space: nowrap;
+                                animation: removeWhiteSpaceNoWrap 1ms linear
+                                    350ms;
+                                animation-fill-mode: forwards;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .cmat-vertical-navigation-aside-wrapper {
+                left: #{$cmat-vertical-navigation-width}px;
+            }
+        }
+    }
+}
+
+@keyframes removeWhiteSpaceNoWrap {
+    0% {
+        white-space: nowrap;
+    }
+    99% {
+        white-space: nowrap;
+    }
+    100% {
+        white-space: normal;
+    }
+}