cmat 0.0.3 → 0.0.5

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

@@ -1,550 +0,0 @@
-/* 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

@@ -1,171 +0,0 @@
-/* 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;
-    }
-}