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

package/scss/common/theme/extensions/_picklist.scss

@@ -0,0 +1,38 @@
+//picklist
+.p-picklist {
+    .p-picklist-list-wrapper {
+        background: $picklistBg;
+        box-shadow: $picklistShadow;
+        border-radius: $picklistBorderRadius;
+    }
+
+    .p-picklist-header {
+        border: $picklistBorder;
+        border-width: $picklistBorderWidth;
+        padding: $picklistHeaderPadding;
+    }
+
+
+    .p-picklist-filter-container {
+        border: $picklistBorder;
+        border-width: $picklistBorderWidth;
+    }
+
+    .p-picklist-list {
+        border: $picklistBorder;
+        border-width: $picklistBorderWidth;
+        padding: $picklistListPadding;
+
+        .p-picklist-item {
+            padding: $picklistListItemPadding;
+            border-radius: $borderRadius;
+            border: $picklistListItemBorder;
+
+            &.p-highlight {
+                color: $textColor;
+                background: $picklistListItemActiveBg;
+                border-color: $picklistListItemActiveBorderColor;
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_radiobutton.scss

@@ -0,0 +1,8 @@
+//radiobutton
+.p-radiobutton {
+    .p-radiobutton-box {
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border-color: $radiobuttonHoverBorderColor;
+        }
+    }
+}

package/scss/common/theme/extensions/_sidebar.scss

@@ -0,0 +1,19 @@
+//sidebar
+.p-sidebar {
+    &.p-sidebar-full {
+        border-radius: 0;
+    }
+
+    &.p-sidebar-top {
+        border-radius: 0 0 40px 40px;
+    }
+    &.p-sidebar-left {
+        border-radius: 0 40px 40px 0;
+    }
+    &.p-sidebar-right {
+        border-radius: 40px 0 0 40px;
+    }
+    &.p-sidebar-bottom {
+        border-radius: 40px 40px 0 0;
+    }
+}

package/scss/common/theme/extensions/_slidemenu.scss

@@ -0,0 +1,10 @@
+//slidemenu
+.p-slidemenu {
+    .p-menuitem-link {
+        border: $menuitemBorder;
+
+        &:focus {
+            border-color: $menuitemFocusBorderColor;
+        }
+    }
+}

package/scss/common/theme/extensions/_slider.scss

@@ -0,0 +1,6 @@
+//slider
+.p-slider {
+    .p-slider-range {
+        border-radius: $borderRadius;
+    }
+}

package/scss/common/theme/extensions/_steps.scss

@@ -0,0 +1,50 @@
+//steps
+.p-steps {
+    .p-steps-item {
+        .p-menuitem-link {
+            .p-steps-number {
+                background: $stepsItemNumberBg;
+            }
+
+            &:hover {
+                cursor: pointer;
+
+                .p-steps-number {
+                    background: $stepsItemHoverBg;
+                    color: $stepsItemHoverTextColor;
+                }
+
+                .p-steps-title {
+                    color: $stepsItemHoverTextColor;
+                }
+            }
+        }
+
+        &.p-highlight {
+            .p-menuitem-link {
+                .p-steps-number {
+                    background: $stepsItemActiveBg;
+                    color: $stepsItemNumberActiveTextColor;
+                    box-shadow: $stepsItemActiveShadow;
+                }
+
+                .p-steps-title {
+                    color: $stepsItemActiveTextColor;
+                }
+
+                &:hover {
+                    cursor: pointer;
+
+                    .p-steps-number {
+                        background: $stepsItemActiveBg;
+                        color: $stepsItemNumberActiveTextColor;
+                    }
+
+                    .p-steps-title {
+                        color: $stepsItemActiveTextColor;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_tieredmenu.scss

@@ -0,0 +1,14 @@
+//tieredmenu
+.p-tieredmenu {
+    .p-submenu-list {
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem-link {
+        border: $menuitemBorder;
+
+        &:focus {
+            border-color: $menuitemFocusBorderColor;
+        }
+    }
+}

package/scss/common/theme/extensions/_toast.scss

@@ -0,0 +1,6 @@
+//toast
+.p-toast {
+    .p-toast-message-content {
+        background: $solidSurfaceColor;
+    }
+}

package/scss/common/theme/extensions/_tree.scss

@@ -0,0 +1,36 @@
+//tree
+.p-tree {
+    .p-tree-container {
+        .p-treenode {
+            .p-treenode-content {
+                &.p-highlight {
+                    background: $tableBodyRowHighlightBg;
+                    color: $tableBodyRowHighlightTextColor;
+
+                    .p-tree-toggler,
+                    .p-treenode-icon {
+                        color: $tableBodyRowHighlightTextColor;
+
+                        &:hover {
+                            color: $tableBodyRowHighlightTextColor;
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    &.p-tree-horizontal {
+        .p-treenode {
+            .p-treenode-content {
+                background: $solidSurfaceColor;
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background-color: $solidSurfaceColor;
+                    color: inherit;
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_treetable.scss

@@ -0,0 +1,35 @@
+//treetable
+.p-treetable {
+    .p-column-filter-menu-button {
+        color: $tableHeaderTextColor;
+    }
+
+    .p-sortable-column {
+        border-radius: $borderRadius;
+
+        &:focus {
+            box-shadow: none;
+            outline: 0 none;
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            > td {
+                &:first-child {
+                    border-top-left-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+                &:last-child {
+                    border-top-right-radius: $borderRadius;
+                    border-bottom-right-radius: $borderRadius;
+                }
+            }
+
+            &.p-highlight {
+                background: $tableBodyRowHighlightBg;
+                color: $tableBodyRowHighlightTextColor;
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_vendor_extensions.scss

@@ -0,0 +1,27 @@
+@import './_button';
+// @import './_calendar';
+@import './_card';
+// @import './_carousel';
+@import './_checkbox';
+// @import './_contextmenu';
+@import './_datatable';
+@import './_dialog';
+// @import './_fieldset';
+// @import './_galleria';
+// @import './_megamenu';
+// @import './_menu';
+// @import './_menubar';
+// @import './_orderlist';
+@import './_paginator';
+// @import './_panelmenu';
+// @import './_password';
+// @import './_picklist';
+@import './_radiobutton';
+// @import './_sidebar';
+// @import './_slidemenu';
+// @import './_slider';
+// @import './_steps';
+// @import './_tieredmenu';
+@import './_toast';
+// @import './_tree';
+// @import './_treetable';

package/scss/common/variables/layout/_common.scss

@@ -0,0 +1,10 @@
+//general
+$fontSize:14px !default;
+$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$transitionDuration:.2s !default;
+$animationDuration:.4s !default;
+$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
+$letterSpacing:normal !default;
+$borderRadius:8px !default;
+$tabletBreakpoint:991px !default;
+$phoneBreakpoint:576px !default;

package/scss/common/variables/layout/_layout_dark.scss

@@ -0,0 +1,70 @@
+@import './_common';
+
+$bodyBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$bodyImage:  url("./~/assets/images/mng/effect-ondark.png") !default;
+$textColor: #ffffff !default;
+$textSecondaryColor: #C8CCD8 !default;
+$textThirdColor: #868C9B !default;
+$dividerColor:rgba(255, 255, 255, 0.15) !default;
+
+//loader
+$loaderPathColor:#ECECF9 !default;
+
+//card
+$cardBg: rgba(255, 255, 255, 0.05) !default;
+$cardBorder: 0 none !default;
+
+//topbar
+$topbarTextColor: $textSecondaryColor !default;
+$topbarTextHoverColor: $textColor !default;
+$topbarIconBg: rgba(255, 255, 255, 0.05) !default;
+$topbarIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+
+$topbarSubmenuBg:linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$topbarSubmenuItemHoverBgColor: rgba(255, 255, 255, 0.05) !default;
+
+//menu
+$menuWidth: 21rem !default;
+$slimMenuWidth: 5.857rem !default;
+$sidebarInactiveMenuWidth: 6.571em !default;
+$menuBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$menuIconBg: rgba(255, 255, 255, 0.05) !default;
+$menuIconHoverBg: rgba(255, 255, 255, 0.1) !default;
+$menuIconTextColor: $textSecondaryColor !default;
+$menuIconHoverTextColor: $textColor !default;
+
+$rootMenuItemTextColor: $textSecondaryColor !default;
+$rootMenuItemHoverTextColor: $textColor !default;
+$rootMenuItemHoverBg: rgba(255, 255, 255, 0.05) !default;
+$activeRootMenuItemTextColor: $primaryColor !default;
+
+$submenuItemTextColor: $textColor !default;
+$submenuItemHoverTextColor: $textColor !default;
+$submenuItemHoverBg: rgba(255, 255, 255, 0.05) !default;
+$activeSubmenuItemTextColor: $primaryColor !default;
+
+$overlayMenuActiveBg: rgba(255, 255, 255, 0.05) !default;
+$overlayMenuItemActiveBg: $primaryColor !default;
+$overlayMenuItemActiveTextColor: $primaryTextColor !default;
+
+$slimRootMenuItemIconColor: $textColor !default;
+$slimActiveRootMenuItemBgColor: $primaryColor !default;
+$slimActiveRootMenuItemTextColor: $primaryTextColor !default;
+$slimMenuItemTextColor: $textColor !default;
+
+//inline menu
+$inlineMenuImageHoverBorderColor: #868C9B !default;
+
+//rightmenu
+$rightMenuWidth: 24.571rem !default;
+$rightMenuBg: linear-gradient(180deg, #2E323F 0%, #0A061A 100%) !default;
+$rightMenuButtonBg: rgba(255, 255, 255, 0.05) !default;
+$rightMenuListItemBg: rgba(255, 255, 255, 0.05) !default;
+
+//dashboard
+$progressBarBg: rgba(255, 255, 255, 0.1) !default;
+
+//pages
+$helpHeaderBg: linear-gradient(179.2deg, rgba(15, 139, 253, 0.2) 0.69%, rgba(15, 139, 253, 0) 108.44%), rgba(255, 255, 255, 0.05) !default;
+$helpHeaderImage:  url("./~/assets/images/mng/effect-ondark.svg") !default;
+$exceptionPagesImage: url("./~/assets/images/mng/pages/exception-ondark.png") !default;

package/scss/common/variables/layout/_layout_light.scss

@@ -0,0 +1,70 @@
+@import './_common';
+
+$bodyBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
+$bodyImage:  url("./~/assets/images/mng/effect-onlight.png") !default;
+$textColor:#44486D !default;
+$textSecondaryColor:#676B89 !default;
+$textThirdColor: #8A8EA6 !default;
+$dividerColor:rgba(68, 72, 109, 0.2) !default;
+
+//loader
+$loaderPathColor:#0A061A !default;
+
+//card
+$cardBg: rgba(255, 255, 255, 0.9) !default;
+$cardBorder: 0 none !default;
+
+//topbar
+$topbarTextColor: $textSecondaryColor !default;
+$topbarTextHoverColor: $textColor !default;
+$topbarIconBg: rgba(68, 72, 109, 0.07) !default;
+$topbarIconHoverBg: rgba(68, 72, 109, 0.12) !default;
+
+$topbarSubmenuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%)!default;
+$topbarSubmenuItemHoverBgColor: rgba(68, 72, 109, 0.07) !default;
+
+//menu
+$menuWidth: 21rem !default;
+$slimMenuWidth: 5.857rem !default;
+$sidebarInactiveMenuWidth: 6.571rem !default;
+$menuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
+$menuIconBg: rgba(68, 72, 109, 0.07) !default;
+$menuIconHoverBg: rgba(68, 72, 109, 0.12) !default;
+$menuIconTextColor: $textSecondaryColor !default;
+$menuIconHoverTextColor: $textColor !default;
+
+$rootMenuItemTextColor: $textSecondaryColor !default;
+$rootMenuItemHoverTextColor: $textColor !default;
+$rootMenuItemHoverBg: rgba(68, 72, 109, 0.07) !default;
+$activeRootMenuItemTextColor: $primaryColor !default;
+
+$submenuItemTextColor: $textColor !default;
+$submenuItemHoverTextColor: $textColor !default;
+$submenuItemHoverBg: rgba(68, 72, 109, 0.07) !default;
+$activeSubmenuItemTextColor: $primaryColor !default;
+
+$overlayMenuActiveBg: rgba(68, 72, 109, 0.07) !default;
+$overlayMenuItemActiveBg: $primaryColor !default;
+$overlayMenuItemActiveTextColor: $primaryTextColor !default;
+
+$slimRootMenuItemIconColor: $textColor !default;
+$slimActiveRootMenuItemBgColor: $primaryColor !default;
+$slimActiveRootMenuItemTextColor: $primaryTextColor !default;
+$slimMenuItemTextColor: $textColor !default;
+
+//inline menu
+$inlineMenuImageHoverBorderColor: #8A8EA6 !default;
+
+//rightmenu
+$rightMenuWidth: 24.571rem !default;
+$rightMenuBg: linear-gradient(180deg, #F6F9FC 0%, #ECECF9 100%) !default;
+$rightMenuButtonBg: rgba(68, 72, 109, 0.07) !default;
+$rightMenuListItemBg: rgba(68, 72, 109, 0.07) !default;
+
+//dashboard
+$progressBarBg: rgba(68, 72, 109, 0.12) !default;
+
+//pages
+$helpHeaderBg: linear-gradient(179.2deg, rgba(15, 139, 253, 0.15) 0.69%, rgba(15, 139, 253, 0) 108.44%), rgba(255, 255, 255, 0.9) !default;
+$helpHeaderImage:  url("./~/assets/images/mng/effect-onlight.svg") !default;
+$exceptionPagesImage: url("./~/assets/images/mng/pages/exception-onlight.png") !default;