@mediusinc/mng-commons 0.0.1-rc.4 → 0.1.0

package/scss/common/layout/menu/_menu_common.scss

@@ -0,0 +1,183 @@
+.layout-menu-wrapper {
+    position: fixed;
+    height: 100%;
+    width: $menuWidth;
+    left: 0;
+    top: 0;
+    z-index: 997;
+    transform: none;
+    border-radius: 0px 40px 40px 0px;
+    display: flex;
+    flex-direction: column;
+
+    .menu-logo {
+        @include flex();
+        @include flex-justify-start();
+        @include flex-align-center();
+        padding: 25px 22px 0 34px;
+
+        .menu-pin {
+            display: none;
+            width: 32px;
+            height: 32px;
+            margin-left: auto;
+            border-radius: 6px;
+            @include transition(all $transitionDuration);
+
+            > span {
+                font-size: 1.25rem;
+            }
+        }
+
+        .logo {
+            img {
+                height: 2.5rem;
+                border: 0 none;
+            }
+        }
+
+        .app-name {
+            img {
+                height: 1.714rem;
+                padding-left: 16px;
+            }
+        }
+    }
+
+    ul {
+        @include reset-list;
+    }
+
+    .layout-menu-container {
+        height: 100%;
+        overflow: auto;
+        padding-bottom: 2rem;
+
+        .layout-menu {
+            padding: 0 1.5rem;
+
+            > li {
+                &:first-child {
+                    margin-top: 2rem;
+                }
+            }
+
+            li {
+                border-radius: 8px;
+
+                &.layout-root-menuitem {
+                    > div {
+                        padding-left: 1.5rem;
+                        margin-bottom: .5rem;
+                        font-size: 12px;
+
+                        > .layout-menuitem-text {
+                            font-size: .857rem;
+                            font-weight: 600;
+                            text-transform: uppercase;
+                        }
+                    }
+                }
+
+                > a {
+                    display: flex;
+                    align-items: center;
+                    padding: .5rem 1rem;
+                    cursor: pointer;
+                    user-select: none;
+                    border-radius: 8px;
+                    transition: background-color $transitionDuration, color $transitionDuration;
+
+                    .layout-menuitem-text {
+                        margin-left: 1rem;
+                    }
+
+                    .layout-submenu-toggler {
+                        margin-left: auto;
+                    }
+
+                    &.rotated-icon {
+                        .layout-menuitem-icon {
+                            transform: rotate(90deg);
+                        }
+                    }
+                }
+
+                &.active-menuitem {
+                    > a {
+                        .layout-submenu-toggler {
+                            transition: all $transitionDuration;
+                            transform: rotate(-180deg);
+                        }
+                    }
+                }
+
+                > ul {
+                    padding: 0;
+
+                    li {
+                        ul {
+                            padding: 0 0 .25rem;
+                            overflow: hidden;
+                        }
+                    }
+
+                    > li {
+                        margin-top: .2rem;
+
+                        &.layout-root-menuitem {
+                            > a {
+                                display: flex;
+                            }
+                        }
+
+                        @include nested-submenu-indents(8, 2, 8);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $tabletBreakpoint) {
+    .layout-wrapper {
+        .layout-menu-wrapper {
+            mix-blend-mode: normal;
+            transform: translateX(-100%);
+            transition: transform $animationDuration $animationTimingFunction;
+
+            .layout-menu {
+                padding: 0 1.5rem;
+                overflow: auto;
+
+                li {
+                    &.layout-root-menuitem {
+                        > div {
+                            display: none;
+                        }
+                    }
+
+                    ul {
+                        li {
+                            padding-top: 6px;
+                        }
+                    }
+                }
+
+                > li {
+                    padding: 6px;
+
+                    > a {
+                        padding: .75rem 1.25rem;
+                    }
+                }
+            }
+        }
+
+        &.layout-mobile-active {
+            .layout-menu-wrapper {
+                transform: translateX(0);
+            }
+        }
+    }
+}

package/scss/common/layout/menu/_menu_overlay.scss

@@ -0,0 +1,52 @@
+@media (min-width: $tabletBreakpoint + 1) {
+    .layout-wrapper {
+        &.layout-overlay {
+            .layout-menu-wrapper {
+                position: fixed;
+                mix-blend-mode: normal;
+                transform: translate3d(-$menuWidth, 0px, 0px);
+                transition: transform $animationDuration $animationTimingFunction;
+
+                .layout-menu-container {
+                    .layout-menu {
+                        padding: 0 1.5rem;
+
+                        li {
+                            &.layout-root-menuitem {
+                                > div {
+                                    display: none;
+                                }
+                            }
+
+                            ul {
+                                li {
+                                    padding-top: 6px;
+                                }
+                            }
+                        }
+
+                        > li {
+                            padding: 6px;
+
+                            > a {
+                                padding: .75rem 1rem;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.layout-overlay-active {
+                .layout-menu-wrapper {
+                    transform: translate3d(0px, 0px, 0px);
+
+                    .menu-pin {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/layout/menu/_menu_sidebar.scss

@@ -0,0 +1,232 @@
+@media (min-width: $tabletBreakpoint + 1) {
+    .layout-wrapper {
+        &.layout-sidebar {
+            &.layout-sidebar-static {
+                .layout-main {
+                    margin-left: 21rem;
+                }
+            }
+
+            .layout-menu-wrapper {
+                height: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: 999;
+                width: $sidebarInactiveMenuWidth;
+                mix-blend-mode: normal;
+                @include transition(all $transitionDuration);
+
+                .menu-logo {
+                    padding-left: 25px;
+
+                    .app-name {
+                        display: none;
+                    }
+                }
+
+                &.layout-sidebar-active {
+                    transform: translate3d(0px, 0px, 0px);
+                    width: $menuWidth;
+
+                    .menu-logo {
+                        .app-name {
+                            display: inline;
+                            @include transition(all $transitionDuration);
+                        }
+                    }
+
+                    .menu-pin {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+
+                    .layout-menu-container {
+                        overflow: auto;
+
+                        .layout-menu {
+                            padding-right: 22px;
+
+                            li {
+                                > a {
+                                    > span {
+                                        visibility: visible;
+                                    }
+
+                                    > i {
+                                        &.layout-submenu-toggler {
+                                            visibility: visible;
+                                        }
+                                    }
+                                }
+
+                                > ul {
+                                    > li {
+                                        a {
+                                            @include transition(all $transitionDuration);
+                                            padding-left: 16px;
+                                        }
+                                    }
+                                }
+
+                                ul {
+                                    li {
+                                        @include nested-submenu-indents(8, 3, 8);
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    .layout-inline-menu {
+                        .layout-inline-menu-action {
+                            .layout-inline-menu-text, .layout-inline-menu-icon {
+                                visibility: visible;
+                            }
+
+                            .layout-inline-menu-icon {
+                                transition: all $transitionDuration;
+                            }
+                        }
+
+                        .layout-inline-menu-action-panel {
+                            .layout-inline-menu-action-item {
+                                a {
+                                    span {
+                                        visibility: visible;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .layout-menu-container {
+                    height: 100%;
+                    overflow: hidden;
+
+                    .layout-menu {
+                        list-style-type: none;
+                        margin: 0;
+                        padding: 0 26px 0 22px;
+                        overflow: hidden;
+
+                        > li {
+
+                            .layout-menuitem-root-text {
+                                display: none;
+                            }
+
+                            > ul {
+                                > li {
+                                    margin-left: 6px;
+                                    @include border-radius(8px);
+                                }
+                            }
+                        }
+
+                        li {
+                            padding: 6px;
+
+                            &.active-menuitem {
+                                > a {
+                                    i.layout-submenu-toggler {
+                                        @include rotate(-180deg);
+                                    }
+                                }
+                            }
+
+                            > a {
+                                margin: 0px;
+                                @include flex();
+                                @include flex-align-center();
+                                @include border-radius(8px);
+                                padding: 8px;
+                                user-select: none;
+                                cursor: pointer;
+
+                                > span {
+                                    margin: 0 .5rem;
+                                    margin-left: 1rem;
+                                    visibility: hidden;
+                                    white-space: nowrap;
+                                }
+
+                                > i {
+                                    font-size: 1.25rem;
+                                    width: auto;
+
+                                    &.layout-submenu-toggler {
+                                        @include transition(transform $transitionDuration);
+                                        margin-left: auto;
+                                        font-size:12px ;
+                                        visibility: hidden;
+                                    }
+                                }
+
+                                &.rotated-icon {
+                                    .layout-menuitem-icon {
+                                        transform: rotate(90deg);
+                                    }
+                                }
+                            }
+
+                            > ul {
+                                list-style-type: none;
+                                overflow: hidden;
+                                padding: 0;
+                                margin: 0;
+
+                                > li {
+                                    padding: 6px 0 0 0;
+                                    margin: 0;
+
+                                    a {
+                                        @include transition(all $transitionDuration);
+                                    }
+
+                                    ul {
+                                        li {
+                                            padding: 0;
+                                        }
+                                    }
+
+                                    &.layout-root-menuitem {
+                                        > a {
+                                            @include flex();
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .layout-inline-menu {
+                    .layout-inline-menu-action {
+                        .layout-inline-menu-text, .layout-inline-menu-icon {
+                            white-space: nowrap;
+                            visibility: hidden;
+                        }
+                    }
+
+                    .layout-inline-menu-action-panel {
+                        .layout-inline-menu-action-item {
+                            a {
+                                span {
+                                    white-space: nowrap;
+                                    visibility: hidden;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .layout-main {
+                margin-left: 92px;
+            }
+        }
+    }
+}

package/scss/common/layout/menu/_menu_slim.scss

@@ -0,0 +1,138 @@
+@media (min-width: $tabletBreakpoint + 1) {
+    .layout-wrapper {
+        &.layout-slim {
+            .layout-menu-wrapper {
+                height: 100%;
+                position: fixed;
+                width: $slimMenuWidth;
+                padding: 0;
+
+                .layout-menu-container {
+                    overflow: visible;
+                }
+
+                .layout-menu {
+                    overflow: visible;
+                    padding-right: 0;
+
+                    > li {
+                        position: relative;
+                        padding: 5px 0 5px 12px;
+
+                        .layout-menuitem-root-text {
+                            display: none;
+                        }
+
+                        > a {
+                            margin: 0px;
+                            padding: 8px;
+                            width: 40px;
+                            height: 40px;
+                            @include border-radius(12px);
+                            @include flex();
+                            @include flex-align-center();
+                            @include flex-justify-center();
+                            @include transition(all $transitionDuration);
+                            position: relative;
+                            border: none;
+
+                            &:before {
+                                display: none;
+                            }
+
+                            span {
+                                display: none;
+                            }
+
+                            i {
+                                margin-right: 0;
+                                font-size: 1.5rem;
+
+                                &.layout-submenu-toggler {
+                                    display: none;
+                                }
+                            }
+
+                            .menuitem-badge {
+                                display: none;
+                                margin-left: auto;
+                            }
+
+                            &:hover + .layout-menu-tooltip {
+                                display: block;
+                            }
+                        }
+
+                        > ul {
+                            position: absolute;
+                            top: 0;
+                            left: 60px;
+                            min-width: 250px;
+                            max-height: 450px;
+                            padding: 4px;
+                            overflow: auto;
+                            margin-top: 5px;
+                            border-radius: 8px;
+
+                            li {
+                                margin: 0;
+
+                                > a {
+                                    padding: 6px 8px;
+                                    min-height: 32px;
+
+                                    .layout-menuitem-text {
+                                        margin-left: .5rem;
+                                    }
+
+                                    > span {
+                                        visibility: visible;
+                                    }
+
+                                    > i {
+                                        &.layout-submenu-toggler {
+                                            visibility: visible;
+                                        }
+                                    }
+                                }
+                                @include nested-submenu-indents(8, 2, 8);
+                            }
+
+                        }
+                    }
+                }
+
+                .layout-inline-menu {
+                    .layout-inline-menu-action {
+                        .layout-inline-menu-text,
+                        .layout-inline-menu-icon {
+                            display: none !important;
+                        }
+                    }
+
+                    .layout-inline-menu-action-panel {
+                        padding: 0 .5rem;
+                        padding-left: 1.5rem;
+
+                        .layout-inline-menu-action-item {
+                            padding: 5px 12px 5px 12px;
+
+                            a {
+                                border-left: 0 none;
+                                padding: 8px;
+
+                                span {
+                                    display: none !important;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .layout-main {
+                margin-left: 5.857rem;
+            }
+        }
+    }
+}

package/scss/common/layout/menu/_menu_static.scss

@@ -0,0 +1,70 @@
+@media (min-width: $tabletBreakpoint + 1) {
+    .layout-wrapper {
+        &.layout-static {
+            .menu-button {
+                width: 32px;
+                height: 32px;
+                line-height: 35px;
+                margin-left: 30px;
+                text-align: center;
+                border-radius: 6px;
+                background-color: $topbarIconBg;
+                color: $topbarTextColor;
+                @include transition(color .3s);
+
+                &:hover {
+                    color: $topbarTextHoverColor;
+                }
+
+                i {
+                    font-size: 1.25rem;
+                }
+            }
+
+            .layout-menu-wrapper {
+                position: fixed;
+                transition: transform $animationDuration $animationTimingFunction;
+
+                .layout-menu-container {
+                    ul {
+                        .layout-root-menuitem {
+                            > a {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .layout-menu {
+                        > li {
+                            margin-bottom: 2.25rem;
+                        }
+
+                        li {
+                            a {
+                                border-left: 8px solid transparent;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .layout-main {
+                margin-left: $menuWidth;
+
+                .layout-main-content {
+                    padding-top: 20px;
+                }
+            }
+
+            &.layout-static-inactive {
+                .layout-menu-wrapper {
+                    transform: translateX(-100%);
+                }
+
+                .layout-main {
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}