@aziontech/theme 2.5.0 → 4.0.0

package/src/azion/theme-base/components/input/_dropdown.scss

@@ -1,147 +0,0 @@
-.p-dropdown {
-    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-dropdown-clearable {
-        .p-dropdown-label {
-            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-        }
-    }
-
-    .p-dropdown-label {
-        background: transparent;
-        border: 0 none;
-
-        &.p-placeholder {
-            color: $inputPlaceholderTextColor;
-        }
-
-        &:focus,
-        &:enabled:focus {
-            outline: 0 none;
-            box-shadow: none;
-        }
-    }
-
-    .p-dropdown-trigger {
-        background: transparent;
-        color: $inputIconColor;
-        width: $inputGroupAddOnMinWidth;
-        border-top-right-radius: $borderRadius;
-        border-bottom-right-radius: $borderRadius;
-    }
-
-    .p-dropdown-clear-icon {
-        color: $inputIconColor;
-        right: $inputGroupAddOnMinWidth;
-    }
-
-    &.p-invalid.p-component {
-        @include invalid-input();
-    }
-}
-
-.p-dropdown-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-dropdown-header {
-        padding: $inputListHeaderPadding;
-        border-bottom: $inputListHeaderBorder;
-        color: $inputListHeaderTextColor;
-        background: $inputOverlayHeaderBg;
-        margin: $inputListHeaderMargin;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-dropdown-filter {
-            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
-        }
-
-        .p-dropdown-filter-icon {
-            right: nth($inputPadding, 2);
-            color: $inputIconColor;
-        }
-    }
-
-    .p-dropdown-items {
-        padding: $inputListPadding;
-
-        .p-dropdown-item {
-            margin: $inputListItemMargin;
-            padding: $inputListItemPadding;
-            border: $inputListItemBorder;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-            transition: $listItemTransition;
-            border-radius: $inputListItemBorderRadius;
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-
-                &.p-focus {
-                    background: $highlightFocusBg;
-                }
-            }
-
-            &:not(.p-highlight):not(.p-disabled) {
-                &.p-focus {
-                    color: $inputListItemTextFocusColor;
-                    background: $inputListItemFocusBg;
-                }
-
-                &:hover {
-                    color: $inputListItemTextHoverColor;
-                    background: $inputListItemHoverBg;
-                }
-            }
-        }
-
-        .p-dropdown-item-group {
-            margin: $submenuHeaderMargin;
-            padding: $submenuHeaderPadding;
-            color: $submenuHeaderTextColor;
-            background: $submenuHeaderBg;
-            font-weight: $submenuHeaderFontWeight;
-        }
-
-        .p-dropdown-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-        }
-    }
-}
-
-.p-input-filled {
-    .p-dropdown {
-        background: $inputFilledBg;
-
-        &:not(.p-disabled):hover {
-            background-color: $inputFilledHoverBg;
-        }
-    
-        &:not(.p-disabled).p-focus {
-            background-color: $inputFilledFocusBg;
-
-            .p-inputtext {
-                background-color: transparent;
-            }
-        }
-    }
-}

package/src/azion/theme-base/components/input/_editor.scss

@@ -1,122 +0,0 @@
-.p-editor-container {
-    .p-editor-toolbar {
-        background: $editorToolbarBg;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        &.ql-snow {
-            border: $editorToolbarBorder;
-
-            .ql-stroke {
-                stroke: $editorToolbarIconColor;
-            }
-    
-            .ql-fill {
-                fill: $editorToolbarIconColor;
-            }
-    
-            .ql-picker {
-                .ql-picker-label {
-                    border: 0 none;
-                    color: $editorToolbarIconColor;
-
-                    &:hover {
-                        color: $editorToolbarIconHoverColor;
-
-                        .ql-stroke {
-                            stroke: $editorToolbarIconHoverColor;
-                        }
-                
-                        .ql-fill {
-                            fill: $editorToolbarIconHoverColor;
-                        }
-                    }
-                }
-
-                &.ql-expanded {
-                    .ql-picker-label {
-                        color: $editorToolbarIconHoverColor;
-
-                        .ql-stroke {
-                            stroke: $editorToolbarIconHoverColor;
-                        }
-                
-                        .ql-fill {
-                            fill: $editorToolbarIconHoverColor;
-                        }
-                    }
-
-                    .ql-picker-options {
-                        background: $inputOverlayBg;
-                        border:$inputOverlayBorder;
-                        box-shadow:$inputOverlayShadow;
-                        border-radius: $borderRadius;
-                        padding: $inputListPadding;
-
-                        .ql-picker-item {
-                            color: $inputListItemTextColor;
-                            
-                            &:hover {
-                                color: $inputListItemTextHoverColor;
-                                background: $inputListItemHoverBg;
-                            }
-                        }
-                    }
-
-                    &:not(.ql-icon-picker) {
-                        .ql-picker-item {
-                            padding: $inputListItemPadding;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-editor-content {
-        border-bottom-right-radius: $borderRadius;
-        border-bottom-left-radius: $borderRadius;
-
-        &.ql-snow {
-            border: $editorContentBorder;
-        }
-
-        .ql-editor {
-            background: $inputBg;
-            color: $inputTextColor;
-            border-bottom-right-radius: $borderRadius;
-            border-bottom-left-radius: $borderRadius;
-        }
-    }
-
-    .ql-snow.ql-toolbar button:hover,
-    .ql-snow.ql-toolbar button:focus {
-        color: $editorToolbarIconHoverColor;
-
-        .ql-stroke {
-            stroke: $editorToolbarIconHoverColor;
-        }
-
-        .ql-fill {
-            fill: $editorToolbarIconHoverColor;
-        }
-    }
-
-    .ql-snow.ql-toolbar button.ql-active,
-    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
-        color: $editorIconActiveColor;
-
-        .ql-stroke {
-            stroke: $editorIconActiveColor;
-        }
-
-        .ql-fill {
-            fill: $editorIconActiveColor;
-        }
-
-        .ql-picker-label {
-            color: $editorIconActiveColor;
-        }
-    }
-}

package/src/azion/theme-base/components/input/_inputgroup.scss

@@ -1,74 +0,0 @@
-.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-inputwrapper > .p-inputtext,
-    > .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,
-.p-inputgroup > .p-inputwrapper:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
-    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,
-.p-inputgroup > .p-inputwrapper:last-child, 
-.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
-    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/src/azion/theme-base/components/input/_inputnumber.scss

@@ -1,5 +0,0 @@
-.p-inputnumber {
-    &.p-invalid.p-component > .p-inputtext {
-        @include invalid-input();
-    }
-}

package/src/azion/theme-base/components/input/_inputswitch.scss

@@ -1,62 +0,0 @@
-@use 'sass:math';
-
-.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: math.div(-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-invalid {
-        .p-inputswitch-slider {
-            @include invalid-input();
-        }
-    }
-}

package/src/azion/theme-base/components/input/_inputtext.scss

@@ -1,100 +0,0 @@
-.p-inputtext {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    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();
-    }
-
-    &.p-invalid.p-component {
-        @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 > .p-invalid + label {
-    color: $inputErrorBorderColor;
-}
-
-.p-input-icon-left > svg:first-of-type,
-.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 > svg:last-of-type,
-.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/src/azion/theme-base/components/input/_listbox.scss

@@ -1,89 +0,0 @@
-.p-listbox {
-    background: $inputListBg;
-    color: $inputListTextColor;
-    border: $inputListBorder;
-    border-radius: $borderRadius;
-    transition: $formElementTransition;
-
-    .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-listbox-list {
-        padding: $inputListPadding;
-        outline: 0 none;
-
-        .p-listbox-item {
-            margin: $inputListItemMargin;
-            padding: $inputListItemPadding;
-            border: $inputListItemBorder;
-            color: $inputListItemTextColor;
-            transition: $listItemTransition;
-            border-radius: $inputListItemBorderRadius;
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-            }
-        }
-
-        .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 {
-            &.p-highlight {
-                &.p-focus {
-                    background: $highlightFocusBg;
-                }
-            }
-
-            &:not(.p-highlight):not(.p-disabled) {
-                &.p-focus {
-                    color: $inputListItemTextFocusColor;
-                    background: $inputListItemFocusBg;
-                }
-
-                &:hover {
-                    color: $inputListItemTextHoverColor;
-                    background: $inputListItemHoverBg;
-                }
-            }
-        }
-    }
-
-    &.p-focus {
-        @include focused-input();
-    }
-
-    &.p-invalid {
-        @include invalid-input();
-    }
-}