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

package/scss/common/theme/designer/components/input/_inputgroup.scss

@@ -0,0 +1,69 @@
+.p-inputgroup-addon {
+    background: $inputGroupBg;
+    color: $inputGroupTextColor;
+    border-top: $inputBorder;
+    border-left: $inputBorder;
+    border-bottom: $inputBorder;
+    padding: $inputPadding;
+    min-width: $inputGroupAddOnMinWidth;
+
+    &:last-child {
+        border-right: $inputBorder;
+    }
+}
+
+.p-inputgroup {
+    > .p-component,
+    > .p-float-label > .p-component {
+        border-radius: 0;
+        margin: 0;
+
+        + .p-inputgroup-addon {
+            border-left: 0 none;
+        }
+
+        &:focus {
+            z-index: 1;
+
+            ~ label {
+                z-index: 1;
+            }
+        }
+    }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child  {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+    .p-inputgroup {
+        .p-button {
+            width: auto;
+
+            &.p-button-icon-only {
+                width: $buttonIconOnlyWidth;
+            }
+        }
+    }
+}

package/scss/common/theme/designer/components/input/_inputmask.scss

@@ -0,0 +1,3 @@
+p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
+    @include invalid-input();
+}

package/scss/common/theme/designer/components/input/_inputnumber.scss

@@ -0,0 +1,3 @@
+p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
+    @include invalid-input();
+}

package/scss/common/theme/designer/components/input/_inputswitch.scss

@@ -0,0 +1,58 @@
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: -1 * $inputSwitchHandleHeight / 2;
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider:before {
+            transform: translateX($inputSwitchHandleWidth);
+        }
+    }
+
+    &.p-focus {
+        .p-inputswitch-slider {
+            @include focused();
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOffHoverBg;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+             }
+        }
+
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOnHoverBg;
+            }
+        }
+    }
+}
+
+p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
+    @include invalid-input();
+}

package/scss/common/theme/designer/components/input/_inputtext.scss

@@ -0,0 +1,97 @@
+.p-inputtext {
+    font-family: $fontFamily;
+    font-size: $inputTextFontSize;
+    color: $inputTextColor;
+    background: $inputBg;
+    padding: $inputPadding;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    appearance: none;
+    border-radius: $borderRadius;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.ng-dirty.ng-invalid {
+        @include invalid-input();
+    }
+
+    &.p-inputtext-sm {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+
+    &.p-inputtext-lg {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
+
+.p-float-label > label {
+    left: nth($inputPadding, 2);
+    color: $inputPlaceholderTextColor;
+    transition-duration: $transitionDuration;
+}
+
+.p-float-label > .ng-invalid.ng-dirty + label {
+    color: $inputErrorBorderColor;
+}
+
+.p-input-icon-left > i:first-of-type {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-right > i:last-of-type  {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+    color: $inputPlaceholderTextColor
+};
+
+.p-input-filled {
+    .p-inputtext {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputtext-sm {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+}
+
+.p-inputtext-lg {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}

package/scss/common/theme/designer/components/input/_listbox.scss

@@ -0,0 +1,82 @@
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+
+    .p-listbox-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputListHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-listbox-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-listbox-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    .p-listbox-list {
+        padding: $inputListPadding;
+
+        .p-listbox-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-listbox-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-listbox-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+        }
+    }
+}
+
+p-listbox.ng-dirty.ng-invalid > .p-listbox {
+    @include invalid-input();
+}

package/scss/common/theme/designer/components/input/_multiselect.scss

@@ -0,0 +1,164 @@
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-multiselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-multiselect-chip {
+        .p-multiselect-token {
+            padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $highlightBg;
+            color: $highlightTextColor;
+            border-radius: $borderRadius;
+
+            .p-multiselect-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    .p-multiselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}
+
+.p-inputwrapper-filled {
+    .p-multiselect {
+        &.p-multiselect-chip {
+            .p-multiselect-label {
+                padding: nth($inputPadding, 1)/2 nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-multiselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-multiselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-multiselect-filter-container {
+            .p-inputtext {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+
+            .p-multiselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+        }
+
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+
+        .p-multiselect-close {
+            margin-left: $inlineSpacing;
+            @include action-icon();
+        }
+    }
+
+    .p-multiselect-items {
+        &:not(.p-multiselect-virtualscroll) { 
+            padding: $inputListPadding;
+        }
+
+        &.p-multiselect-virtualscroll .cdk-virtual-scroll-content-wrapper {
+            padding: $inputListPadding;
+        }
+
+        .p-multiselect-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus {
+                @include focused-listitem();
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+
+        .p-multiselect-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-multiselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+    @include invalid-input();
+}
+
+.p-input-filled {
+    .p-multiselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}

package/scss/common/theme/designer/components/input/_password.scss

@@ -0,0 +1,33 @@
+.p-password {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-password-panel {
+    padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $inputOverlayShadow;
+    border-radius: $borderRadius;
+
+    .p-password-meter {
+        margin-bottom: $inlineSpacing;
+        background: $passwordMeterBg;
+
+        .p-password-strength {
+            &.weak {
+                background: $passwordWeakBg;
+            }
+
+            &.medium {
+                background: $passwordMediumBg;
+            }
+
+            &.strong {
+                background: $passwordStrongBg;
+            }
+        }
+    }
+}

package/scss/common/theme/designer/components/input/_radiobutton.scss

@@ -0,0 +1,78 @@
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+
+        &.p-highlight {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+
+            &:not(.p-disabled):hover {
+                border-color: $radiobuttonActiveHoverBorderColor;
+                background: $radiobuttonActiveHoverBg;
+                color: $radiobuttonIconActiveHoverColor;
+            }
+        }
+    }
+}
+
+p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
+    @include invalid-input();
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+    
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+.p-radiobutton-label {
+    margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}

package/scss/common/theme/designer/components/input/_rating.scss

@@ -0,0 +1,48 @@
+.p-rating {
+    .p-rating-icon {
+        color: $ratingStarIconOffColor;
+        margin-left: $inlineSpacing;
+        transition: $formElementTransition;   
+        font-size: $ratingIconFontSize;
+
+        &.p-rating-cancel {
+            color: $ratingCancelIconColor;
+        }
+
+        &:focus {
+            @include focused();
+        }
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &.pi-star {
+            color: $ratingStarIconOnColor;
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-icon {
+            &:hover {
+                color: $ratingStarIconHoverColor;
+            }
+
+            &.p-rating-cancel {
+                &:hover {
+                    color: $ratingCancelIconHoverColor;
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-icon {
+                color: $highlightTextColor;
+            }
+        }
+    }
+}

package/scss/common/theme/designer/components/input/_selectbutton.scss

@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+}
+
+p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
+    @include invalid-input();
+}