@mediusinc/mng-commons 0.0.1-rc.2 → 0.2.0

package/scss/common/theme/designer/components/data/_fullcalendar.scss

@@ -0,0 +1,324 @@
+.fc {
+    /* FullCalendar 4 */
+    &.fc-unthemed {
+        .fc-view-container {
+            th {
+                background: $panelHeaderBg;
+                border: $panelHeaderBorder;
+                color: $panelHeaderTextColor;
+            }
+
+            td {
+                &.fc-widget-content {
+                    background: $panelContentBg;
+                    border: $panelContentBorder;
+                    color: $panelContentTextColor;
+                }
+
+                &.fc-head-container {
+                    border: $panelHeaderBorder;
+                }
+            }
+
+            .fc-row {
+                border-right: $panelHeaderBorder;
+            }
+
+            .fc-event {
+                background: $fullCalendarEventBg;
+                border: $fullCalendarEventBorder;
+                color: $fullCalendarEventTextColor;
+            }
+
+            .fc-divider {
+                background: $panelHeaderBg;
+                border: $panelHeaderBorder;
+            }
+        }
+
+        .fc-toolbar {
+            .fc-button {
+                color: $buttonTextColor;
+                background: $buttonBg;
+                border: $buttonBorder;
+                font-size: $fontSize;
+                transition: $formElementTransition;
+                border-radius: $borderRadius;
+                display: flex;
+                align-items: center;
+
+                &:enabled:hover {
+                    background: $buttonHoverBg;
+                    color: $buttonTextHoverColor;
+                    border-color: $buttonHoverBorderColor;
+                }
+
+                &:enabled:active {
+                    background: $buttonActiveBg;
+                    color: $buttonTextActiveColor;
+                    border-color: $buttonActiveBorderColor;
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+
+                .fc-icon-chevron-left {
+                    font-family: "PrimeIcons" !important;
+                    text-indent: 0;
+                    @include icon_override("\e900");
+                    font-size: $primeIconFontSize;
+                }
+
+                .fc-icon-chevron-right {
+                    font-family: "PrimeIcons" !important;
+                    text-indent: 0;
+                    @include icon_override("\e901");
+                    font-size: $primeIconFontSize;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+
+                &.fc-dayGridMonth-button,
+                &.fc-timeGridWeek-button,
+                &.fc-timeGridDay-button {
+                    background: $toggleButtonBg;
+                    border: $toggleButtonBorder;
+                    color: $toggleButtonTextColor;
+                    transition: $formElementTransition;
+
+                    &:hover {
+                        background: $toggleButtonHoverBg;
+                        border-color: $toggleButtonHoverBorderColor;
+                        color: $toggleButtonTextHoverColor;
+                    }
+
+                    &.fc-button-active {
+                        background: $toggleButtonActiveBg;
+                        border-color: $toggleButtonActiveBorderColor;
+                        color: $toggleButtonTextActiveColor;
+
+                        &:hover {
+                            background: $toggleButtonActiveHoverBg;
+                            border-color: $toggleButtonActiveHoverBorderColor;
+                            color: $toggleButtonTextActiveHoverColor;
+                        }
+                    }
+
+                    &:focus {
+                        @include focused();
+                        z-index: 1;
+                    }
+                }
+            }
+
+            .fc-button-group {
+                .fc-button {
+                    border-radius: 0;
+
+                    &:first-child {
+                        border-top-left-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+
+                    &:last-child {
+                        border-top-right-radius: $borderRadius;
+                        border-bottom-right-radius: $borderRadius;
+                    }
+                }
+            }
+        }
+    }
+
+    /* FullCalendar 5 */
+    &.fc-theme-standard {
+        .fc-view-harness {
+            .fc-scrollgrid {
+                border-color: $panelContentBorderColor;
+            }
+
+            th {
+                background: $panelHeaderBg;
+                border-color: $panelHeaderBorderColor;
+                color: $panelHeaderTextColor;
+            }
+
+            td {
+                color: $panelContentTextColor;
+                border-color: $panelContentBorderColor;
+            }
+
+            .fc-view {
+                background: $panelContentBg;
+            }
+
+            .fc-popover {
+                background: none;
+                border: 0 none;
+
+                .fc-popover-header {
+                    border: $panelHeaderBorder;
+                    padding: $panelHeaderPadding;
+                    background: $panelHeaderBg;
+                    color: $panelHeaderTextColor;
+
+                    .fc-popover-close {
+                        opacity: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        overflow: hidden;
+                        font-family: "PrimeIcons" !important;
+                        @include icon_override("\e90b");
+                        font-size: $primeIconFontSize;
+                        @include action-icon(false);
+                    }
+                }
+
+                .fc-popover-body {
+                    padding: $panelContentPadding;
+                    border: $panelContentBorder;
+                    background: $panelContentBg;
+                    color: $panelContentTextColor;
+                    border-top: 0 none;
+                }
+            }
+
+            .fc-event {
+                &.fc-daygrid-block-event {
+                    color: $fullCalendarEventTextColor;
+                    background: $fullCalendarEventBg;
+                    border-color: $fullCalendarEventBorderColor;
+
+                    .fc-event-main {
+                        color: $fullCalendarEventTextColor;
+                    }
+                }
+
+                &.fc-daygrid-dot-event {
+                    .fc-daygrid-event-dot {
+                        background: $fullCalendarEventBg;
+                        border-color: $fullCalendarEventBorderColor;
+                    }
+
+                    &:hover {
+                        background: $inputListItemHoverBg;
+                        color: $inputListItemTextHoverColor;
+                    }
+                }
+            }
+
+            .fc-cell-shaded {
+                background: $panelHeaderBg;
+            }
+        }
+
+        .fc-toolbar {
+            .fc-button {
+                color: $buttonTextColor;
+                background: $buttonBg;
+                border: $buttonBorder;
+                font-size: $fontSize;
+                transition: $formElementTransition;
+                border-radius: $borderRadius;
+
+                &:enabled:hover {
+                    background: $buttonHoverBg;
+                    color: $buttonTextHoverColor;
+                    border-color: $buttonHoverBorderColor;
+                }
+
+                &:enabled:active {
+                    background: $buttonActiveBg;
+                    color: $buttonTextActiveColor;
+                    border-color: $buttonActiveBorderColor;
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+
+                &:disabled {
+                    opacity: $disabledOpacity;
+                    color: $buttonTextColor;
+                    background: $buttonBg;
+                    border: $buttonBorder;
+                }
+
+                .fc-icon-chevron-left {
+                    font-family: "PrimeIcons" !important;
+                    text-indent: 0;
+                    @include icon_override("\e900");
+                    font-size: $primeIconFontSize;
+                }
+
+                .fc-icon-chevron-right {
+                    font-family: "PrimeIcons" !important;
+                    text-indent: 0;
+                    @include icon_override("\e901");
+                    font-size: $primeIconFontSize;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+
+                &.fc-dayGridMonth-button,
+                &.fc-timeGridWeek-button,
+                &.fc-timeGridDay-button {
+                    background: $toggleButtonBg;
+                    border: $toggleButtonBorder;
+                    color: $toggleButtonTextColor;
+                    transition: $formElementTransition;
+
+                    &:hover {
+                        background: $toggleButtonHoverBg;
+                        border-color: $toggleButtonHoverBorderColor;
+                        color: $toggleButtonTextHoverColor;
+                    }
+
+                    &.fc-button-active {
+                        background: $toggleButtonActiveBg;
+                        border-color: $toggleButtonActiveBorderColor;
+                        color: $toggleButtonTextActiveColor;
+
+                        &:hover {
+                            background: $toggleButtonActiveHoverBg;
+                            border-color: $toggleButtonActiveHoverBorderColor;
+                            color: $toggleButtonTextActiveHoverColor;
+                        }
+                    }
+
+                    &:not(:disabled) {
+                        &:focus {
+                            @include focused();
+                            z-index: 1;
+                        }
+                    }
+                }
+            }
+
+            .fc-button-group {
+                .fc-button {
+                    border-radius: 0;
+
+                    &:first-child {
+                        border-top-left-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+
+                    &:last-child {
+                        border-top-right-radius: $borderRadius;
+                        border-bottom-right-radius: $borderRadius;
+                    }
+                }
+            }
+        }
+
+        a {
+            color: $textColor;
+        }
+    }
+}

package/scss/common/theme/designer/components/data/_orderlist.scss

@@ -0,0 +1,91 @@
+.p-orderlist {
+    .p-orderlist-controls {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-orderlist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-orderlist-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+    }
+
+    .p-orderlist-filter-container {
+        padding: $panelHeaderPadding;
+        background: $panelContentBg;
+        border: $panelHeaderBorder;
+        border-bottom: 0 none;
+
+        .p-orderlist-filter-input {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-orderlist-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }      
+
+    .p-orderlist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-orderlist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-orderlist-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+        }
+
+        &:not(.cdk-drop-list-dragging) {
+            .p-orderlist-item {
+                &:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+}
+
+.p-orderlist-item {
+    &.cdk-drag-preview {
+        padding: $inputListItemPadding;
+        box-shadow: $inputOverlayShadow;
+        border: $inputListItemBorder;
+        color: $inputListItemTextColor;
+        background: $panelContentBg;
+        margin: 0;
+    }
+}

package/scss/common/theme/designer/components/data/_organizationchart.scss

@@ -0,0 +1,50 @@
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+
+        &:focus {
+            @include focused();
+        }
+    }
+}

package/scss/common/theme/designer/components/data/_paginator.scss

@@ -0,0 +1,83 @@
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+    
+    .p-paginator-last {
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}

package/scss/common/theme/designer/components/data/_picklist.scss

@@ -0,0 +1,91 @@
+.p-picklist {
+    .p-picklist-buttons {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-picklist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-picklist-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+    }
+
+    .p-picklist-filter-container {
+        padding: $panelHeaderPadding;
+        background: $panelContentBg;
+        border: $panelHeaderBorder;
+        border-bottom: 0 none;
+
+        .p-picklist-filter-input {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-picklist-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-picklist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-picklist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-picklist-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+        }
+
+        &:not(.cdk-drop-list-dragging) {
+            .p-picklist-item {
+                &:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+}
+
+.p-picklist-item {
+    &.cdk-drag-preview {
+        padding: $inputListItemPadding;
+        box-shadow: $inputOverlayShadow;
+        border: $inputListItemBorder;
+        color: $inputListItemTextColor;
+        background: $panelContentBg;
+        margin: 0;
+    }
+}

package/scss/common/theme/designer/components/data/_timeline.scss

@@ -0,0 +1,38 @@
+.p-timeline {
+    .p-timeline-event-marker {
+        border: $timelineEventMarkerBorder; 
+        border-radius: $timelineEventMarkerBorderRadius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+
+