@uxf/cms 10.0.0-beta.9 → 10.0.0

package/ui/styles/menu.css

@@ -0,0 +1,217 @@
+.uxf-cms-menu {
+    background-color: theme("colors.sidebar.background");
+    padding: 0 theme("spacing.2") theme("spacing.4");
+
+    &__item-wrapper {
+        &--super {
+            &:first-child {
+                & > .uxf-cms-menu__item--super {
+                    margin-top: 0;
+                }
+            }
+        }
+
+        &--user-menu {
+            @screen md {
+                display: none;
+            }
+        }
+    }
+
+    &__item {
+        &--super {
+            @apply uxf-typo-overline;
+
+            color: theme("colors.darkLow");
+            margin-bottom: theme("spacing.3");
+            margin-top: theme("spacing.6");
+            padding-left: theme("spacing.2");
+            text-transform: uppercase;
+        }
+
+        &--basic {
+            align-items: center;
+            background-color: theme("colors.sidebar.background");
+            border-radius: theme("borderRadius.lg");
+            color: theme("colors.darkMedium");
+            cursor: pointer;
+            display: flex;
+            margin-bottom: theme("spacing[0.5]");
+            padding: theme("spacing[2.5]") theme("spacing.1") theme("spacing[2.5]") theme("spacing[2.5]");
+
+            &:hover {
+                background-color: theme("colors.sidebar.hover");
+            }
+
+            &.is-selected {
+                background-color: theme("colors.sidebar.highlight");
+                color: theme("colors.darkHigh");
+                font-weight: bold;
+            }
+
+            .uxf-cms-menu__icon-wrapper {
+                width: theme("spacing.7");
+
+                &--level-one {
+                    width: theme("spacing.9");
+                }
+            }
+
+            .uxf-cms-menu__caret {
+                margin-left: auto;
+                margin-right: theme("spacing.2");
+
+                &.is-open {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+    }
+
+    &__item-end-element {
+        margin-left: auto;
+    }
+
+    &__icon-wrapper {
+        flex-shrink: 0;
+    }
+
+    &__submenu-button {
+        width: 100%;
+
+        &--initially-closed {
+            @screen md {
+                display: none;
+            }
+        }
+
+        &--initially-open {
+            @screen md {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.uxf-cms-user-menu {
+    border-top: 1px solid theme("colors.darkBorder");
+    color: theme("colors.darkMedium");
+    display: none;
+
+    @screen md {
+        display: block;
+    }
+
+    &.is-open {
+        background-color: theme("colors.sidebar.hover");
+
+        .uxf-cms-menu__item {
+            background-color: theme("colors.sidebar.hover");
+
+            &:hover {
+                background-color: theme("colors.sidebar.background");
+            }
+        }
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        padding: theme("spacing.3") theme("spacing.4");
+        text-align: left;
+        width: 100%;
+
+        &:hover {
+            background-color: theme("colors.sidebar.hover");
+        }
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        height: 32px;
+        margin-right: theme("spacing.3");
+        width: 32px;
+    }
+
+    &__label-wrapper {
+        @apply truncate;
+    }
+
+    &__name {
+        @apply uxf-typo-body2;
+    }
+
+    &__roles {
+        @apply uxf-typo-caption truncate;
+
+        color: theme("colors.darkLow");
+    }
+
+    &__caret-wrapper {
+        margin-left: auto;
+    }
+
+    &__caret {
+        margin-left: theme("spacing.2");
+
+        &.is-open {
+            transform: rotate(-90deg);
+        }
+    }
+
+    &__sub-menu {
+        padding: 0 theme("spacing.3") theme("spacing.4");
+    }
+}
+
+.uxf-cms-sub-menu {
+    display: none;
+
+    @screen md {
+        display: block;
+    }
+
+    &__wrapper {
+        background-color: theme("colors.sidebar.highlight");
+        border-radius: theme("borderRadius.xl");
+        box-shadow: theme("boxShadow.lg");
+        overflow-y: auto;
+        width: 100%;
+        z-index: theme("zIndex.dropdown");
+    }
+
+    &__wrapper-mobile {
+        background-color: theme("colors.sidebar.background");
+        border-radius: theme("borderRadius.xl");
+        box-shadow: theme("boxShadow.lg");
+        left: theme("spacing.4");
+        overflow-y: auto;
+        width: calc(100vw - 32px);
+        z-index: theme("zIndex.dropdown");
+    }
+
+    &__item {
+        @apply md:text-body2;
+
+        background-color: theme("colors.sidebar.highlight");
+        color: theme("colors.darkMedium");
+        font-size: theme("fontSize.body");
+        padding: theme("spacing[3.5]");
+        width: 100%;
+
+        &:hover {
+            background-color: theme("colors.sidebar.background");
+            color: theme("colors.darkLow");
+        }
+    }
+
+    &__title {
+        @apply uxf-typo-body;
+
+        background-color: theme("colors.sidebar.background");
+        color: theme("colors.darkHigh");
+        font-weight: bold;
+        padding: theme("spacing[3.5]") theme("spacing.4");
+        width: 100%;
+    }
+}

package/ui/styles/mobile-bar.css

@@ -0,0 +1,34 @@
+.uxf-cms-mobile-bar {
+    align-items: center;
+    background-color: theme("colors.sidebar.background");
+    bottom: 0;
+    color: theme("colors.darkMedium");
+    display: flex;
+    height: 52px;
+    left: 0;
+    padding: 0 theme("spacing.1");
+    position: fixed;
+    right: 0;
+
+    @screen md {
+        display: none;
+    }
+
+    &__button {
+        align-items: center;
+        display: flex;
+        flex-grow: 1;
+        flex-shrink: 0;
+        height: theme("spacing.11");
+        justify-content: center;
+    }
+
+    &__avatar {
+        height: theme("spacing.7");
+        width: theme("spacing.7");
+    }
+
+    &__caret {
+        margin-left: theme("spacing.1");
+    }
+}

package/ui/styles/sidebar.css

@@ -0,0 +1,108 @@
+.uxf-cms-sidebar {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+    z-index: 15;
+
+    @screen xs {
+        right: 0;
+        width: var(--drawer-width);
+    }
+
+    @screen md {
+        border-bottom: none;
+        left: 0;
+        right: unset;
+        z-index: 1;
+    }
+
+    &__content {
+        --device-height: 100vh;
+
+        background-color: theme("colors.sidebar.background");
+        border-bottom: 1px solid theme("colors.gray.700");
+        flex-direction: column;
+        height: calc(var(--device-height) - 52px);
+        padding-top: theme("spacing.5");
+
+        @screen md {
+            border-bottom: none;
+            height: 100vh;
+        }
+
+        &--open {
+            display: flex;
+        }
+
+        &--closed {
+            display: none;
+
+            @screen md {
+                display: flex;
+            }
+        }
+    }
+
+    &__logo {
+        padding: 0 theme("spacing.4");
+    }
+
+    &__nav {
+        flex-grow: 1;
+        margin-top: theme("spacing.8");
+        overflow: auto;
+        padding: 0 0 theme("spacing.4");
+
+        @screen md {
+            padding: 0;
+        }
+
+        &--super-section {
+            margin-top: theme("spacing.4");
+        }
+
+        /* width */
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        /* Track */
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.background");
+        }
+
+        /* Handle */
+        &::-webkit-scrollbar-thumb {
+            background: theme("colors.sidebar.highlight");
+            border-radius: 999px;
+        }
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover {
+            background: theme("colors.sidebar.hover");
+        }
+    }
+
+    &__scrollbar {
+        --scrollbar-color: theme("colors.darkBorder");
+
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        scrollbar-color: var(--scrollbar-color) transparent;
+        scrollbar-width: thin;
+
+        &::-webkit-scrollbar {
+            width: theme("spacing.2");
+        }
+
+        &::-webkit-scrollbar-track {
+            background: theme("colors.sidebar.highlight");
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-color);
+            border: none;
+            border-radius: 999px;
+        }
+    }
+}