@mediusinc/mng-commons-layout 5.0.0-rc.0

package/scss/theme/theme-base/components/panel/_panel.scss

@@ -0,0 +1,63 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-top: 0 none;
+
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-icons-end {
+        order: 2;
+        margin-left: auto;
+    }
+
+    .p-panel-icons-start {
+        order: 0;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-panel-icons-center {
+        order: 2;
+        width: 100%;
+        text-align: center;
+    }
+}

package/scss/theme/theme-base/components/panel/_scrollpanel.scss

@@ -0,0 +1,6 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+    }
+}

package/scss/theme/theme-base/components/panel/_splitter.scss

@@ -0,0 +1,19 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}

package/scss/theme/theme-base/components/panel/_tabview.scss

@@ -0,0 +1,82 @@
+.p-tabview {
+    .p-tabview-nav-content {
+        scroll-padding-inline: $buttonIconOnlyWidth;
+    }
+
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-left-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-tabview-right-icon {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}

package/scss/theme/theme-base/components/panel/_toolbar.scss

@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}

package/scss/theme/theme-base/mng/_mng_mixins.scss

@@ -0,0 +1,69 @@
+@import 'mng_variables';
+
+@mixin scaledHeight($val, $scale) {
+    height: $val * $scale;
+}
+
+@mixin scaledWidth($val, $scale) {
+    width: $val * $scale;
+}
+
+@mixin mediaMinSm() {
+    @include mediaMinWidth($mediaSmWidthMin) {
+        @content;
+    }
+}
+
+@mixin mediaMinMd() {
+    @include mediaMinWidth($mediaMdWidthMin) {
+        @content;
+    }
+}
+
+@mixin mediaMinLg() {
+    @include mediaMinWidth($mediaLgWidthMin) {
+        @content;
+    }
+}
+
+@mixin mediaMinXl() {
+    @include mediaMinWidth($mediaXlWidthMin) {
+        @content;
+    }
+}
+
+@mixin mediaMaxXs() {
+    @include mediaMaxWidth($mediaXsWidthMax) {
+        @content;
+    }
+}
+
+@mixin mediaMaxSm() {
+    @include mediaMaxWidth($mediaSmWidthMax) {
+        @content;
+    }
+}
+
+@mixin mediaMaxMd() {
+    @include mediaMaxWidth($mediaMdWidthMax) {
+        @content;
+    }
+}
+
+@mixin mediaMaxLg() {
+    @include mediaMaxWidth($mediaLgWidthMax) {
+        @content;
+    }
+}
+
+@mixin mediaMinWidth($minWidth) {
+    @media (min-width: $minWidth) {
+        @content;
+    }
+}
+
+@mixin mediaMaxWidth($maxWidth) {
+    @media (max-width: $maxWidth) {
+        @content;
+    }
+}

package/scss/theme/theme-base/mng/_mng_theme_autocomplete.scss

@@ -0,0 +1,34 @@
+p-autocomplete {
+    // Merging input field with button so they look like one
+    & .p-autocomplete-input {
+        margin-right: -1px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right-color: transparent !important;
+    }
+
+    & .p-autocomplete-dropdown {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    & .p-autocomplete-multiple-container {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    //clear icon
+    & .p-inputtext {
+        padding-right: 2rem;
+    }
+
+    & .p-autocomplete-clear-icon {
+        color: $secondaryButtonTextColor;
+        right: 0.5rem;
+    }
+
+    & .p-autocomplete-dd .p-autocomplete-clear-icon {
+        color: $secondaryButtonTextColor;
+        right: 2.857rem;
+    }
+}

package/scss/theme/theme-base/mng/_mng_theme_button.scss

@@ -0,0 +1,68 @@
+@import 'mng_mixins';
+
+.p-button {
+    &.p-button-icon-only {
+        &.mng-button-xs {
+            @include scaledWidth($buttonIconOnlyWidth, $scaleXS);
+            @include scaledPadding($buttonIconOnlyPadding, $scaleXS);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleXS);
+            }
+
+            &.p-button-rounded {
+                @include scaledHeight($buttonIconOnlyWidth, $scaleXS);
+            }
+        }
+
+        &.mng-button-sm {
+            @include scaledWidth($buttonIconOnlyWidth, $scaleSM);
+            @include scaledPadding($buttonIconOnlyPadding, $scaleSM);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleSM);
+            }
+
+            &.p-button-rounded {
+                @include scaledHeight($buttonIconOnlyWidth, $scaleSM);
+            }
+        }
+
+        &.mng-button-lg {
+            @include scaledWidth($buttonIconOnlyWidth, $scaleLG);
+            @include scaledPadding($buttonIconOnlyPadding, $scaleLG);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleLG);
+            }
+
+            &.p-button-rounded {
+                @include scaledHeight($buttonIconOnlyWidth, $scaleLG);
+            }
+        }
+
+        &.mng-button-xl {
+            @include scaledWidth($buttonIconOnlyWidth, $scaleLG);
+            @include scaledPadding($buttonIconOnlyPadding, $scaleLG);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleLG);
+            }
+
+            &.p-button-rounded {
+                @include scaledHeight($buttonIconOnlyWidth, $scaleLG);
+            }
+        }
+    }
+}
+
+.mng-action-button {
+    margin: 0.15rem 0.15rem;
+
+    a {
+        &.disabled {
+            opacity: 0.6;
+            cursor: default;
+        }
+    }
+}

package/scss/theme/theme-base/mng/_mng_theme_datatable.scss

@@ -0,0 +1,153 @@
+.p-datatable {
+    .p-column-filter-menu-button {
+        color: $tableHeaderTextColor;
+
+        &.p-column-filter-menu-button-active {
+            color: $primaryTextColor;
+        }
+    }
+
+    .p-datatable-thead > tr > th,
+    .p-datatable-tbody > tr > td {
+        // string
+        &.mng-column-filter-string {
+            min-width: 135px;
+        }
+        // number
+        &.mng-column-filter-number {
+            min-width: 165px;
+        }
+        // date
+        &.mng-column-filter-date {
+            min-width: 170px;
+        }
+        // boolean
+        &.mng-column-filter-boolean {
+            min-width: 80px;
+        }
+        // lookup, lookup enum
+        &.mng-column-filter-lookup,
+        &.mng-column-filter-lookupenum {
+            min-width: 180px;
+        }
+
+        .mng-column-filter-string-input {
+            width: 100%;
+        }
+
+        .mng-column-filter-number-input {
+            width: 100%;
+        }
+
+        &:hover {
+            mng-table-column-value .help-buttons {
+                display: block;
+            }
+        }
+    }
+
+    .p-datatable-thead > tr.mng-column-filter-row {
+        > th {
+            padding-left: 0.15rem;
+            padding-right: 0.15rem;
+
+            .p-column-filter-menu-button,
+            .p-column-filter-clear-button {
+                width: 1.75rem;
+                height: 1.75rem;
+                margin-left: 0.1rem;
+            }
+        }
+    }
+
+    .p-datatable-thead > tr > th {
+        &.column-custom-last {
+            padding-top: 0.1rem;
+            padding-bottom: 0.1rem;
+        }
+    }
+
+    .p-datatable-tbody > tr > td {
+        position: relative;
+
+        &.column-custom-last {
+            padding-top: 0.1rem;
+            padding-bottom: 0.1rem;
+        }
+
+        &.p-frozen-column {
+            position: sticky;
+            z-index: 1;
+            background: transparent;
+        }
+    }
+
+    // TODO: uncomment, need to address mobile devices dooooh
+    //.p-datatable-tbody {
+    //    > tr:not(:hover) {
+    //        > td.p-frozen-column {
+    //            visibility: hidden;
+    //        }
+    //    }
+    //}
+
+    &.p-datatable-lg .p-datatable-tbody > tr > td {
+        &.column-custom-last {
+            padding-top: 0.15rem;
+            padding-bottom: 0.15rem;
+        }
+    }
+
+    &.p-datatable-sm .p-datatable-tbody > tr > td {
+        &.column-custom-last {
+            padding-top: 0.05rem;
+            padding-bottom: 0.05rem;
+        }
+    }
+
+    &.p-datatable-flex-scrollable {
+        .p-datatable-thead > tr > th {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .p-datatable-tbody > tr > td {
+            overflow: hidden;
+        }
+    }
+
+    // override for background color
+    .p-radiobutton .p-radiobutton-box {
+        background-color: $primaryTextColor;
+
+        .p-radiobutton-icon {
+            background-color: $primaryColor;
+        }
+
+        &.p-highlight {
+            &:not(.p-disabled):hover {
+                .p-radiobutton-icon {
+                    background-color: $primaryTextColor;
+                }
+            }
+        }
+    }
+
+    .p-checkbox {
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &.p-highlight:hover {
+                    .p-checkbox-icon {
+                        color: $primaryTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    // This style adds orange border around the table-row with default language in show all translations
+    .all-translations-default-value {
+        background: $secondaryButtonActiveBg !important;
+        border-radius: 10px;
+    }
+}

package/scss/theme/theme-base/mng/_mng_theme_datepicker.scss

@@ -0,0 +1,21 @@
+.p-datepicker-header {
+    .p-datepicker-title {
+        .p-link {
+            color: $calendarHeaderTextColor;
+        }
+    }
+}
+
+p-calendar {
+    & .p-inputtext {
+        margin-right: -1px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right-color: transparent !important;
+    }
+
+    & .p-datepicker-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}