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

package/scss/common/theme/designer/components/panel/_divider.scss

@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}

package/scss/common/theme/designer/components/panel/_fieldset.scss

@@ -0,0 +1,47 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}

package/scss/common/theme/designer/components/panel/_panel.scss

@@ -0,0 +1,42 @@
+.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-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-top: 0 none;
+    }
+}

package/scss/common/theme/designer/components/panel/_scrollpanel.scss

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

package/scss/common/theme/designer/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/common/theme/designer/components/panel/_tabview.scss

@@ -0,0 +1,66 @@
+.p-tabview {
+    .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 {
+                    @include focused();
+                }
+            }
+
+            &: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-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}

package/scss/common/theme/designer/components/panel/_toolbar.scss

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

package/scss/common/theme/extensions/_button.scss

@@ -0,0 +1,99 @@
+//buttons
+.p-button:not(.p-button-outlined, .p-button-text, .p-button-link, .p-togglebutton) {
+    box-shadow: $buttonShadow;
+}
+
+.p-buttonset .p-button {
+    box-shadow: $selectbuttonShadow;
+}
+
+.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+    box-shadow: $secondaryButtonShadow;
+
+    &.p-button-outlined {
+        background-color: $secondaryButtonBg;
+        color: $secondaryButtonTextColor;
+
+        &:enabled:hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonTextColor;
+        }
+
+        &:enabled:active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonTextColor;
+        }
+    }
+
+    &.p-button-text {
+        color: $secondaryButtonTextColor;
+
+        &:enabled:hover {
+            color: $secondaryButtonTextColor;
+        }
+
+        &:enabled:active {
+            color: $secondaryButtonTextColor;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+    box-shadow: $infoButtonShadow;
+
+    &.p-button-outlined {
+        box-shadow: none;
+    }
+
+    &.p-button-text {
+        box-shadow: none;
+    }
+}
+
+.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+    box-shadow: $successButtonShadow;
+
+    &.p-button-outlined {
+        box-shadow: none;
+    }
+
+    &.p-button-text {
+        box-shadow: none;
+    }
+}
+
+.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+    box-shadow: $warningButtonShadow;
+
+    &.p-button-outlined {
+        box-shadow: none;
+    }
+
+    &.p-button-text {
+        box-shadow: none;
+    }
+}
+
+.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+    box-shadow: $helpButtonShadow;
+
+    &.p-button-outlined {
+        box-shadow: none;
+    }
+
+    &.p-button-text {
+        box-shadow: none;
+    }
+}
+
+.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+    box-shadow: $dangerButtonShadow;
+
+    &.p-button-outlined {
+        box-shadow: none;
+    }
+
+    &.p-button-text {
+        box-shadow: none;
+    }
+}

package/scss/common/theme/extensions/_calendar.scss

@@ -0,0 +1,18 @@
+//calendar
+.p-datepicker {
+    table {
+        th {
+            > span {
+                color: $calendarHeaderCellTextColor;
+                font-size: $calendarHeaderCellFontSize;
+                font-weight: $calendarHeaderCellFontWeight;
+            }
+        }
+
+        td {
+            > span {
+                background: $calendarCellDateBg;
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_card.scss

@@ -0,0 +1,6 @@
+//card
+.p-card {
+    .p-card-subtitle {
+        font-size: $cardSubTitleFontSize;
+    }
+}

package/scss/common/theme/extensions/_carousel.scss

@@ -0,0 +1,13 @@
+//carousel
+.p-carousel {
+    .p-carousel-indicators {
+        .p-carousel-indicator {
+            &.p-highlight {
+                button {
+                    background: $carouselIndicatorActiveBg;
+                    color: $carouselIndicatorActiveTextColor;
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_checkbox.scss

@@ -0,0 +1,10 @@
+//checkbox
+.p-checkbox {
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &:hover {
+                border-color: $checkboxHoverBorderColor;
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_contextmenu.scss

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

package/scss/common/theme/extensions/_datatable.scss

@@ -0,0 +1,83 @@
+//datatable
+.p-datatable {
+    .p-column-filter-menu-button {
+        color: $tableHeaderTextColor;
+    }
+
+    .p-sortable-column {
+        border-radius: $borderRadius;
+
+        &:focus {
+            box-shadow: none;
+            outline: 0 none;
+        }
+    }
+
+    .p-datatable-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;
+            }
+        }
+    }
+
+    &.p-datatable-striped {
+        .p-datatable-header {
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+        }
+
+        .p-sortable-column {
+            border-radius: 0;
+        }
+
+        .p-datatable-tbody {
+            > tr {
+                > td {
+                    &:first-child {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                    }
+
+                    &:last-child {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+            }
+
+            > tr:nth-child(even) {
+                &.p-highlight {
+                    background: $tableBodyRowHighlightBg;
+                    color: $tableBodyRowHighlightTextColor;
+
+                    .p-row-toggler {
+                        color: $tableBodyRowHighlightTextColor;
+
+                        &:hover {
+                            color: $tableBodyRowHighlightTextColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-scrollable {
+        .p-datatable-thead {
+            background: $overlayContentBg;
+        }
+    }
+}

package/scss/common/theme/extensions/_dialog.scss

@@ -0,0 +1,14 @@
+//dialog
+.p-dialog {
+    border-radius: $dialogBorderRadius;
+
+    .p-dialog-header {
+        border-top-right-radius: $dialogBorderRadius;
+        border-top-left-radius: $dialogBorderRadius;
+    }
+
+    .p-dialog-footer {
+        border-bottom-right-radius: $dialogBorderRadius;
+        border-bottom-left-radius: $dialogBorderRadius;
+    }
+}

package/scss/common/theme/extensions/_fieldset.scss

@@ -0,0 +1,6 @@
+//fieldset
+.p-fieldset {
+    .p-fieldset-content {
+        padding: $fieldsetContentPadding;
+    }
+}

package/scss/common/theme/extensions/_galleria.scss

@@ -0,0 +1,25 @@
+.p-galleria {
+    .p-galleria-indicators {
+        .p-galleria-indicator {
+            &.p-highlight {
+                button {
+                    background: $galleriaIndicatorActiveBg;
+                    color: $galleriaIndicatorActiveTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            .p-galleria-indicator {
+                &.p-highlight {
+                    button {
+                        background: $galleriaIndicatorActiveBg;
+                        color: $galleriaIndicatorActiveTextColor;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_megamenu.scss

@@ -0,0 +1,18 @@
+//megamenu
+.p-megamenu {
+    .p-megamenu-panel {
+        border-radius: $borderRadius;
+
+        .p-megamenu-submenu-header {
+            font-size: $submenuHeaderFontSize;
+        }
+    }
+
+    .p-menuitem-link {
+        border: $menuitemBorder;
+
+        &:focus {
+            border-color: $menuitemFocusBorderColor;
+        }
+    }
+}

package/scss/common/theme/extensions/_menu.scss

@@ -0,0 +1,14 @@
+//menu
+.p-menu {
+    .p-submenu-header {
+        font-size: $submenuHeaderFontSize;
+    }
+
+    .p-menuitem-link {
+        border: $menuitemBorder;
+
+        &:focus {
+            border-color: $menuitemFocusBorderColor;
+        }
+    }
+}

package/scss/common/theme/extensions/_menubar.scss

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

package/scss/common/theme/extensions/_orderlist.scss

@@ -0,0 +1,38 @@
+//orderlist
+.p-orderlist {
+    .p-orderlist-list-container {
+        background: $orderlistBg;
+        box-shadow: $orderlistShadow;
+        border-radius: $orderlistBorderRadius;
+    }
+
+    .p-orderlist-header {
+        border: $orderlistBorder;
+        border-width: $orderlistBorderWidth;
+        padding: $orderlistHeaderPadding;
+    }
+
+
+    .p-orderlist-filter-container {
+        border: $orderlistBorder;
+        border-width: $orderlistBorderWidth;
+    }
+
+    .p-orderlist-list {
+        border: $orderlistBorder;
+        border-width: $orderlistBorderWidth;
+        padding: $orderlistListPadding;
+
+        .p-orderlist-item {
+            padding: $orderlistListItemPadding;
+            border-radius: $borderRadius;
+            border: $orderlistListItemBorder;
+
+            &.p-highlight {
+                color: $textColor;
+                background: $orderlistListItemActiveBg;
+                border-color: $orderlistListItemActiveBorderColor;
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_paginator.scss

@@ -0,0 +1,19 @@
+//paginator
+.p-paginator {
+    .p-paginator-pages {
+        .p-paginator-page {
+            &.p-highlight {
+                background: $paginatorElementActiveBg;
+                border-color: $paginatorElementActiveBorderColor;
+                color: $paginatorElementIconActiveColor;
+            }
+        }
+    }
+
+    .p-dropdown {
+        .p-dropdown-label {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+}

package/scss/common/theme/extensions/_panelmenu.scss

@@ -0,0 +1,20 @@
+//panelmenu
+.p-panelmenu {
+    .p-panelmenu-header {
+        > a {
+            color: $panelmenuHeaderTextColor;
+        }
+    }
+
+    .p-panelmenu-content {
+        .p-menuitem {
+            .p-menuitem-link {
+                border: $menuitemBorder;
+
+                &:focus {
+                    border-color: $menuitemFocusBorderColor;
+                }
+            }
+        }
+    }
+}

package/scss/common/theme/extensions/_password.scss

@@ -0,0 +1,5 @@
+.p-password {
+    .p-password-panel {
+        background: $passwordPanelBg;
+    }
+}