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

package/scss/common/layout/menu/_menu_theme.scss

@@ -0,0 +1,365 @@
+.layout-menu-wrapper {
+    .menu-logo {
+        .menu-pin {
+            background: $menuIconBg;
+            color: $menuIconTextColor;
+
+            &:hover {
+                background: $menuIconHoverBg;
+                color: $menuIconHoverTextColor;
+            }
+        }
+    }
+
+    .layout-inline-menu {
+        &.layout-inline-menu-active {
+            .layout-inline-menu-action {
+                img {
+                    border-color: $primaryColor;
+                    filter: drop-shadow(0px 0px 10px rgba($primaryColor, 0.3));
+                }
+
+                &:hover {
+                    img {
+                        border-color: $primaryColor;
+                        filter: drop-shadow(0px 0px 10px rgba($primaryColor, 0.3));
+                    }
+                }
+            }
+        }
+
+        .layout-inline-menu-action {
+            &:hover {
+                img {
+                    border-color: $inlineMenuImageHoverBorderColor;
+                    filter: drop-shadow(0px 0px 10px rgba(15, 139, 253, 0.3));
+                }
+            }
+        }
+
+        .layout-inline-menu-action-panel {
+            .layout-inline-menu-action-item {
+                a {
+                    color: $textColor;
+
+                    &:hover {
+                        background-color: $submenuItemHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin extrenalSubmenuitem {
+    li {
+        > a {
+            color: $submenuItemTextColor;
+
+            &:hover {
+                background-color: $submenuItemHoverBg;
+                color: $submenuItemHoverTextColor;
+            }
+        }
+
+        &.active-menuitem {
+            > a {
+                color: $activeRootMenuItemTextColor;
+            }
+        }
+    }
+}
+
+@mixin internalSubmenu {
+    .layout-menu-container {
+        .layout-menu {
+            > li {
+                > a {
+                    color: $rootMenuItemTextColor;
+
+                    &:hover {
+                        color: $activeRootMenuItemTextColor;
+                    }
+                }
+
+                &.active-menuitem {
+                    > a {
+                        color: $activeRootMenuItemTextColor;
+
+                        &::before {
+                            background-color: $activeRootMenuItemTextColor;
+                        }
+                    }
+                }
+
+                > ul {
+                    > li {
+                        &.active-menuitem {
+                            background-color: $submenuItemHoverBg;
+
+                            > a {
+                                background-color: $submenuItemHoverBg;
+                                color: $submenuItemTextColor;
+                            }
+                        }
+                    }
+
+                    li {
+                        a {
+                            color: $submenuItemTextColor;
+
+                            &:hover {
+                                background-color: $submenuItemHoverBg;
+                            }
+                        }
+
+                        &.active-menuitem {
+                            > a {
+                                color: $submenuItemTextColor;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: $tabletBreakpoint + 1) {
+    .layout-wrapper {
+        &.layout-static {
+            .layout-menu-wrapper {
+                @include internalSubmenu;
+
+                .layout-menu-container {
+                    .layout-menu {
+                        > li {
+
+                            &.layout-root-menuitem {
+                                > div {
+                                    color: $rootMenuItemTextColor;
+                                }
+                            }
+
+                            ul {
+                                li {
+                                    &.active-menuitem {
+                                        > a {
+                                            border-left-color: $primaryColor;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &.layout-overlay, &.layout-sidebar {
+            .layout-menu-wrapper {
+                background: $menuBg;
+
+                .layout-menu-container {
+                    .layout-menu {
+                        > li {
+                            > a {
+                                color: $rootMenuItemTextColor;
+
+                                &:hover {
+                                    background-color: $rootMenuItemHoverBg;
+                                    color: $rootMenuItemHoverTextColor;
+                                }
+                            }
+
+                            &.active-menuitem {
+                                background: $overlayMenuActiveBg;
+
+                                > a {
+
+                                    i {
+                                        color: $rootMenuItemTextColor;
+                                    }
+
+                                    &:hover {
+                                        background-color: $rootMenuItemHoverBg;
+                                        color: $rootMenuItemHoverTextColor;
+                                    }
+                                }
+                            }
+
+                            > ul {
+                                li {
+                                    > a {
+                                        color: $submenuItemTextColor;
+
+                                        &:hover {
+                                            background-color: $submenuItemHoverBg;
+                                            color: $submenuItemHoverTextColor;
+                                        }
+                                        &.active-menuitem-routerlink {
+                                            background-color: $overlayMenuItemActiveBg;
+                                            color: $overlayMenuItemActiveTextColor;
+
+                                            &:hover {
+                                                color: $overlayMenuItemActiveTextColor;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &.layout-slim {
+            .layout-menu-wrapper {
+                background-color: transparent;
+
+                .layout-menu-container {
+                    .layout-menu {
+                        > li {
+                            &.active-menuitem {
+                                > a {
+                                    background-color: $slimActiveRootMenuItemBgColor;
+                                    color: $slimActiveRootMenuItemTextColor;
+
+                                    &:hover {
+                                        background-color: $slimActiveRootMenuItemBgColor;
+                                        color: $slimActiveRootMenuItemTextColor;
+                                    }
+                                }
+                            }
+
+                            > a {
+                                color: $slimRootMenuItemIconColor;
+
+                                &:hover {
+                                    background-color: $rootMenuItemHoverBg;
+                                }
+
+                                &.active-menuitem-routerlink {
+                                    background-color: $slimActiveRootMenuItemBgColor;
+                                    color: $slimActiveRootMenuItemTextColor;
+
+                                    &:hover {
+                                        background-color: $slimActiveRootMenuItemBgColor;
+                                        color: $slimActiveRootMenuItemTextColor;
+                                    }
+                                }
+                            }
+
+                            > ul {
+                                @include extrenalSubmenuitem;
+                                background: $menuBg;
+
+                                li {
+                                    a {
+                                        color: $slimMenuItemTextColor;
+
+                                        &:hover {
+                                            background-color: $submenuItemHoverBg;
+                                        }
+                                    }
+
+                                    &.active-menuitem {
+                                        > a {
+                                            color: $slimMenuItemTextColor;
+                                        }
+                                    }
+
+                                    > a {
+                                        &.active-menuitem-routerlink {
+                                            background-color: $slimActiveRootMenuItemBgColor;
+                                            color: $slimActiveRootMenuItemTextColor;
+
+                                            i {
+                                                color: $slimActiveRootMenuItemTextColor;
+                                            }
+
+                                            &:hover {
+                                                color: $slimActiveRootMenuItemTextColor;
+                                            }
+                                        }
+                                    }
+                                }
+
+                                > li {
+                                    &.active-menuitem {
+                                        background-color: $submenuItemHoverBg;
+
+                                        > a {
+                                            background-color: $submenuItemHoverBg;
+                                            color: $slimMenuItemTextColor;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: $tabletBreakpoint) {
+    .layout-menu-wrapper {
+        background: $menuBg;
+
+        .layout-menu-container {
+            .layout-menu {
+                > li {
+                    > a {
+                        color: $rootMenuItemTextColor;
+
+                        &:hover {
+                            background-color: $rootMenuItemHoverBg;
+                            color: $rootMenuItemHoverTextColor;
+                        }
+                    }
+
+                    &.active-menuitem {
+                        background: $overlayMenuActiveBg;
+
+                        > a {
+                            color: $rootMenuItemTextColor;
+
+                            i {
+                                color: $rootMenuItemTextColor;
+                            }
+
+                            &:hover {
+                                background-color: $rootMenuItemHoverBg;
+                                color: $rootMenuItemHoverTextColor;
+                            }
+                        }
+                    }
+
+                    > ul {
+                        li {
+                            > a {
+                                color: $submenuItemTextColor;
+
+                                &:hover {
+                                    background-color: $submenuItemHoverBg;
+                                    color: $submenuItemHoverTextColor;
+                                }
+                                &.active-menuitem-routerlink {
+                                    background-color: $overlayMenuItemActiveBg;
+                                    color: $overlayMenuItemActiveTextColor;
+
+                                    &:hover {
+                                        color: $overlayMenuItemActiveTextColor;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/_theme_dark.scss

@@ -0,0 +1,5 @@
+@import '../variables/theme/_theme_dark';
+@import './designer/_components';
+@import './extensions/_vendor_extensions';
+
+@import '../../mng-overrides/_theme_styles';

package/scss/common/theme/_theme_light.scss

@@ -0,0 +1,5 @@
+@import '../variables/theme/_theme_light';
+@import './designer/_components';
+@import './extensions/_vendor_extensions';
+
+@import '../../mng-overrides/_theme_styles';

package/scss/common/theme/designer/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+  @if variable-exists(colors) {
+    @each $name, $color in $colors {
+        @for $i from 0 through 5 {
+            @if ($i == 0) {
+                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+            }
+            @else {
+                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+            }
+        }
+
+        @for $i from 1 through 4 {
+            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+        }
+    }
+  }
+}

package/scss/common/theme/designer/_common.scss

@@ -0,0 +1,40 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: $fontFamily;
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-link {
+    font-size: $fontSize;
+    font-family: $fontFamily;
+    border-radius: $borderRadius;
+
+    &:focus {
+        @include focused();
+    }
+}

package/scss/common/theme/designer/_components.scss

@@ -0,0 +1,101 @@
+@import '_mixins';
+@import '_common';
+@import '_colors';
+
+//Input
+@import './components/input/_autocomplete';
+@import './components/input/_calendar';
+// @import './components/input/_cascadeselect';
+@import './components/input/_checkbox';
+@import './components/input/_chips';
+// @import './components/input/_colorpicker';
+@import './components/input/_dropdown';
+@import './components/input/_editor';
+@import './components/input/_inputgroup';
+@import './components/input/_inputmask';
+@import './components/input/_inputnumber';
+@import './components/input/_inputswitch';
+@import './components/input/_inputtext';
+// @import './components/input/_listbox';
+@import './components/input/_multiselect';
+// @import './components/input/_password';
+@import './components/input/_radiobutton';
+// @import './components/input/_rating';
+@import './components/input/_selectbutton';
+// @import './components/input/_slider';
+@import './components/input/_togglebutton';
+@import './components/input/_treeselect';
+
+//Button
+@import './components/button/_button';
+// @import './components/button/_speeddial';
+// @import './components/button/_splitbutton';
+
+//Data
+// @import './components/data/_carousel';
+@import './components/data/_datatable';
+// @import './components/data/_dataview';
+@import './components/data/_filter';
+// @import './components/data/_fullcalendar';
+// @import './components/data/_orderlist';
+// @import './components/data/_organizationchart';
+@import './components/data/_paginator';
+// @import './components/data/_picklist';
+// @import './components/data/_timeline';
+// @import './components/data/_tree';
+// @import './components/data/_treetable';
+//@import './components/data/_virtualscroller';
+
+//Panel
+// @import './components/panel/_accordion';
+@import './components/panel/_card';
+// @import './components/panel/_divider';
+@import './components/panel/_fieldset';
+// @import './components/panel/_panel';
+// @import './components/panel/_scrollpanel';
+// @import './components/panel/_splitter';
+@import './components/panel/_tabview';
+@import './components/panel/_toolbar';
+
+//Overlay
+@import './components/overlay/_confirmpopup';
+@import './components/overlay/_dialog';
+// @import './components/overlay/_overlaypanel';
+// @import './components/overlay/_sidebar';
+@import './components/overlay/_tooltip';
+
+//File
+// @import './components/file/_fileupload';
+
+//Menu
+@import './components/menu/_breadcrumb';
+// @import './components/menu/_contextmenu';
+@import './components/menu/_dock';
+// @import './components/menu/_megamenu';
+// @import './components/menu/_menu';
+// @import './components/menu/_menubar';
+// @import './components/menu/_panelmenu';
+// @import './components/menu/_slidemenu';
+@import './components/menu/_steps';
+// @import './components/menu/_tabmenu';
+// @import './components/menu/_tieredmenu';
+
+//Messages
+// @import './components/messages/_inlinemessage';
+@import './components/messages/_message';
+@import 'components/messages/toast';
+
+//MultiMedia
+// @import './components/multimedia/_galleria';
+
+//Misc
+// @import './components/misc/_avatar';
+// @import './components/misc/_badge';
+@import './components/misc/_blockui';
+@import './components/misc/_chip';
+// @import './components/misc/_inplace';
+// @import './components/misc/_progressbar';
+// @import './components/misc/_scrolltop';
+@import './components/misc/_skeleton';
+@import './components/misc/_tag';
+// @import './components/misc/_terminal';