@mediusinc/mng-commons-layout 6.0.0-rc.5 → 6.0.0-rc.7

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

@@ -1,63 +0,0 @@
-.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

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

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

@@ -1,19 +0,0 @@
-.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

@@ -1,82 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-.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

@@ -1,69 +0,0 @@
-@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

@@ -1,34 +0,0 @@
-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

@@ -1,68 +0,0 @@
-@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

@@ -1,157 +0,0 @@
-.p-datatable {
-    .p-column-filter-menu-button {
-        color: $tableHeaderTextColor;
-
-        &.p-column-filter-menu-button-active {
-            color: $primaryTextColor;
-        }
-    }
-
-    &.datatable-no-header .p-datatable-header {
-        display: none;
-    }
-
-    .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

@@ -1,21 +0,0 @@
-.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;
-    }
-}

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

@@ -1,32 +0,0 @@
-.mng-filter-lookup-dropdown {
-    .p-dropdown-items-wrapper {
-        max-width: 350px;
-    }
-}
-
-.mng-dropdown-dialog {
-    position: relative;
-
-    .mng-dropdown-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        color: $textSecondaryColor;
-        right: calc(65px + 0.5rem);
-        cursor: pointer;
-    }
-
-    .p-button.mng-dropdown-dialog-search-button {
-        width: 65px;
-    }
-}
-
-.p-dropdown-panel {
-    .p-dropdown-item {
-        &.p-highlight {
-            &.p-focus {
-                background: $primaryColor;
-            }
-        }
-    }
-}

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

@@ -1,24 +0,0 @@
-.p-fileupload {
-    .p-fileupload-buttonbar {
-        span.p-fileupload-choose {
-            width: auto;
-        }
-
-        p-button button {
-            width: auto;
-        }
-    }
-
-    .p-fileupload-content {
-        padding: $panelHeaderPadding;
-
-        .dropdown-area {
-            height: 5rem;
-            display: flex;
-            border: dashed;
-            border-radius: 8px;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}

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

@@ -1,66 +0,0 @@
-@import 'mng_mixins';
-
-form {
-    .p-fileupload {
-        .p-fileupload-row > div:first-child {
-            flex-grow: 0;
-            flex-shrink: 0;
-            width: 50px;
-            padding: 0;
-
-            img {
-                max-width: 100%;
-            }
-        }
-
-        .p-fileupload-row .p-button {
-            @include scaledWidth($buttonIconOnlyWidth, $scaleSM);
-            @include scaledPadding($buttonIconOnlyPadding, $scaleSM);
-        }
-    }
-
-    // This makes the border of input field orange. It is used for localized fields, where the translation is missing and default value is displayed.
-    .localized-input-border-orange {
-        input,
-        textarea {
-            border-color: $warningButtonBg;
-        }
-    }
-
-    button[type='submit'].hidden {
-        display: none !important;
-        visibility: hidden !important;
-    }
-
-    .field.table {
-        .p-datatable {
-            .p-datatable-header {
-                border-top: none;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 0;
-                padding-bottom: 0.25rem;
-
-                label.mng-datatable-form-label {
-                    flex-basis: 100%;
-                    color: var(--text-color);
-                    font-size: 14px;
-                    font-weight: normal;
-                }
-            }
-        }
-    }
-
-    .p-fieldset {
-        margin-bottom: 1rem;
-
-        .p-fieldset-content {
-            padding: 0.75rem 0 0 0;
-        }
-    }
-
-    .field-checkbox,
-    .field-radiobutton {
-        margin-bottom: 0.5rem;
-    }
-}

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

@@ -1,27 +0,0 @@
-.mng-image {
-    &.p-image-preview-container {
-        height: 150px;
-
-        img {
-            max-height: 100%;
-        }
-
-        &.no-image {
-            width: 150px;
-
-            .p-image-preview-indicator {
-                background-color: $imagePreviewIndicatorBg;
-                height: 100%;
-                opacity: 1;
-                cursor: default;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .p-image-preview-icon {
-                    font-size: 1.5rem;
-                }
-            }
-        }
-    }
-}