@aziontech/theme 2.6.0 → 4.0.0

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

@@ -1,114 +0,0 @@
-@use 'sass:math';
-
-.p-autocomplete {
-    .p-autocomplete-loader {
-        right: nth($inputPadding, 2); 
-    }
-
-    &.p-autocomplete-dd {
-        .p-autocomplete-loader {
-            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
-        }
-    }
-
-    &:not(.p-disabled):hover {
-        .p-autocomplete-multiple-container {
-            border-color: $inputHoverBorderColor;
-        }
-    }
-
-    &:not(.p-disabled).p-focus {
-        .p-autocomplete-multiple-container {
-            @include focused-input();
-        }
-    }
-
-    .p-autocomplete-multiple-container {
-        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-        gap: $inlineSpacing;
-
-        .p-autocomplete-input-token {
-            padding: math.div(nth($inputPadding, 1), 2) 0;
-            
-            input {
-                font-family: var(--font-family);
-                font-feature-settings: var(--font-feature-settings, normal);
-                font-size: $inputTextFontSize;
-                color: $textColor;
-                padding: 0;
-                margin: 0;
-            }
-        }
-
-        .p-autocomplete-token {
-            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            background: $chipBg;
-            color: $chipTextColor;
-            border-radius: $chipBorderRadius;
-
-            .p-autocomplete-token-icon {
-                margin-left: $inlineSpacing;
-            }
-
-            &.p-focus {
-                background: $chipFocusBg;
-                color: $chipFocusTextColor;
-            }
-        }
-    }
-
-    &.p-invalid.p-component > .p-inputtext {
-        @include invalid-input();
-    }
-}
-
-.p-autocomplete-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-autocomplete-items {
-        padding: $inputListPadding;
-
-        .p-autocomplete-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-autocomplete-item-group {
-            margin: $submenuHeaderMargin;
-            padding: $submenuHeaderPadding;
-            color: $submenuHeaderTextColor;
-            background: $submenuHeaderBg;
-            font-weight: $submenuHeaderFontWeight;
-        }
-    }
-}

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

@@ -1,251 +0,0 @@
-.p-calendar {
-    &.p-invalid.p-component > .p-inputtext {
-        @include invalid-input();
-    }
-
-    &:not(.p-calendar-disabled).p-focus > .p-inputtext {
-        @include focused-input();
-    }
-}
-
-.p-datepicker {
-    padding: $calendarPadding;
-    background: $calendarInlineBg;
-    color: $calendarTextColor;
-    border: $calendarBorder;
-    border-radius: $borderRadius;
-
-    &:not(.p-datepicker-inline) {
-        background: $calendarBg;
-        border: $calendarOverlayBorder;
-        box-shadow: $inputOverlayShadow;
-
-        .p-datepicker-header {
-            background: $calendarHeaderBg;
-        }
-    }
-
-    .p-datepicker-header {
-        padding: $calendarHeaderPadding;
-        color: $calendarHeaderTextColor;
-        background: $calendarInlineHeaderBg;
-        font-weight: $calendarHeaderFontWeight;
-        margin: $inputListHeaderMargin;
-        border-bottom: $calendarHeaderBorder;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-datepicker-prev,
-        .p-datepicker-next {
-            @include action-icon();
-        }
-
-        .p-datepicker-title {
-            line-height: $actionIconHeight;
-
-            .p-datepicker-year,
-            .p-datepicker-month {
-                color: $calendarHeaderTextColor;
-                transition: $actionIconTransition;
-                font-weight: $calendarHeaderFontWeight;
-                padding: $calendarHeaderCellPadding;
-
-                &:enabled:hover {
-                    color: $calendarMonthYearHeaderHoverTextColor;
-                }
-            }
-
-            .p-datepicker-month {
-                margin-right: $inlineSpacing;
-            }
-        }
-    }
-
-    table {
-        font-size: $fontSize;
-        margin: $calendarTableMargin;
-
-        th {
-            padding: $calendarHeaderCellPadding;
-
-            > span {
-                width: $calendarCellDateWidth;
-                height: $calendarCellDateHeight;
-            }
-        }
-
-        td {
-            padding: $calendarCellDatePadding;
-
-            > span {
-                width: $calendarCellDateWidth;
-                height: $calendarCellDateHeight;
-                border-radius: $calendarCellDateBorderRadius;
-                transition: $listItemTransition;
-                border: $calendarCellDateBorder;
-
-                &.p-highlight {
-                    color: $highlightTextColor;
-                    background: $highlightBg;
-                }
-
-                &:focus {
-                    @include focused();
-                }
-            }
-
-            &.p-datepicker-today {
-                > span {
-                    background: $calendarCellDateTodayBg;
-                    color: $calendarCellDateTodayTextColor;
-                    border-color: $calendarCellDateTodayBorderColor;
-
-                    &.p-highlight {
-                        color: $highlightTextColor;
-                        background: $highlightBg;
-                    }
-                }
-            }
-        }
-    }
-
-    .p-datepicker-buttonbar {
-        padding: $calendarButtonBarPadding;
-        border-top: $divider;
-
-        .p-button {
-            width: auto;
-        }
-    }
-
-    .p-timepicker {
-        border-top: $divider;
-        padding: $calendarTimePickerPadding;
-
-        button {
-            @include action-icon();
-
-            &:last-child {
-                margin-top: .2em;
-            }
-        }
-
-        span {
-            font-size: $calendarTimePickerTimeFontSize;
-        }
-
-        > div {
-            padding: $calendarTimePickerElementPadding;
-        }
-    }
-
-    &.p-datepicker-timeonly {
-        .p-timepicker {
-            border-top: 0 none;
-        }
-    }
-
-    .p-monthpicker {
-        margin: $calendarTableMargin;
-
-        .p-monthpicker-month {
-            padding: $calendarCellDatePadding;
-            transition: $listItemTransition;
-            border-radius: $borderRadius;
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-            }
-        }
-    }
-
-    .p-yearpicker {
-        margin: $calendarTableMargin;
-
-        .p-yearpicker-year {
-            padding: $calendarCellDatePadding;
-            transition: $listItemTransition;
-            border-radius: $borderRadius;
-
-            &.p-highlight {
-                color: $highlightTextColor;
-                background: $highlightBg;
-            }
-        }
-    }
-
-    &.p-datepicker-multiple-month {
-        .p-datepicker-group {
-            border-left: $divider;
-            padding-right: $calendarPadding;
-            padding-left: $calendarPadding;
-            padding-top: 0;
-            padding-bottom: 0;
-
-            &:first-child {
-                padding-left: 0;
-                border-left: 0 none;
-            }
-
-            &:last-child {
-                padding-right: 0;
-            }
-        }
-    }
-
-    &:not(.p-disabled) {
-        table {
-            td {
-                span:not(.p-highlight):not(.p-disabled) {
-                    &:hover {
-                        background: $calendarCellDateHoverBg;
-                    }
-
-                    &:focus {
-                        @include focused();
-                    }
-                }
-            }
-        }
-
-        .p-monthpicker {
-            .p-monthpicker-month {
-                &:not(.p-disabled) {
-                    &:not(.p-highlight):hover {
-                        background: $calendarCellDateHoverBg;
-                    }
-
-                    &:focus {
-                        @include focused();
-                    }
-                }
-            }
-        }
-
-        .p-yearpicker {
-            .p-yearpicker-year {
-                &:not(.p-disabled) {
-                    &:not(.p-highlight):hover {
-                        background: $calendarCellDateHoverBg;
-                    }
-
-                    &:focus {
-                        @include focused();
-                    }
-                }
-            }
-        }
-    }
-
-}
-
-@media screen and (max-width: $calendarBreakpoint) {
-    .p-datepicker {
-        table {
-            th, td {
-                padding: $calendarCellDatePaddingSM;
-            }
-        }
-    }
-}

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

@@ -1,106 +0,0 @@
-.p-cascadeselect {
-    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-cascadeselect-label {
-        background: transparent;
-        border: 0 none;
-        padding: $inputPadding;
-
-        &.p-placeholder {
-            color: $inputPlaceholderTextColor;
-        }
-
-        &:enabled:focus {
-            outline: 0 none;
-            box-shadow: none;
-        }
-    }
-
-    .p-cascadeselect-trigger {
-        background: transparent;
-        color: $inputIconColor;
-        width: $inputGroupAddOnMinWidth;
-        border-top-right-radius: $borderRadius;
-        border-bottom-right-radius: $borderRadius;
-    }
-
-    &.p-invalid.p-component {
-        @include invalid-input();
-    }
-}
-
-.p-cascadeselect-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-cascadeselect-items {
-        padding: $inputListPadding;
-
-        .p-cascadeselect-item {
-            margin: $inputListItemMargin;
-            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-cascadeselect-item-content {
-                padding: $inputListItemPadding;
-            }
-
-            .p-cascadeselect-group-icon {
-                font-size: $menuitemSubmenuIconFontSize;
-            }
-        }
-    }
-}
-
-.p-input-filled {
-    .p-cascadeselect {
-        background: $inputFilledBg;
-
-        &:not(.p-disabled):hover {
-            background-color: $inputFilledHoverBg;
-        }
-    
-        &:not(.p-disabled).p-focus {
-            background-color: $inputFilledFocusBg;
-        }
-    }
-}

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

@@ -1,86 +0,0 @@
-.p-checkbox {
-    width: $checkboxWidth;
-    height: $checkboxHeight;
-
-    .p-checkbox-box {
-        border: $checkboxBorder;
-        background: $inputBg;
-        width: $checkboxWidth;
-        height: $checkboxHeight;
-        color: $textColor;
-        border-radius: $borderRadius;
-        transition: $formElementTransition;
-
-        .p-checkbox-icon {
-            transition-duration: $transitionDuration;
-            color: $checkboxIconActiveColor;
-            font-size: $checkboxIconFontSize;
-
-            &.p-icon {
-                width: $checkboxIconFontSize;
-                height: $checkboxIconFontSize;
-            }
-        }
-
-        &.p-highlight {
-            border-color: $checkboxActiveBorderColor;
-            background: $checkboxActiveBg;
-        }
-    }
-
-    &:not(.p-checkbox-disabled) {
-        .p-checkbox-box {
-            &:hover {
-                border-color: $inputHoverBorderColor;
-            }
-
-            &.p-focus {
-                @include focused-input();
-            }
-
-            &.p-highlight:hover {    
-                border-color: $checkboxActiveHoverBorderColor;
-                background: $checkboxActiveHoverBg;
-                color: $checkboxIconActiveHoverColor;
-            }
-        }
-    }
-
-    &.p-invalid > .p-checkbox-box {
-        @include invalid-input();
-    }
-}
-
-.p-input-filled {
-    .p-checkbox {
-        .p-checkbox-box {
-            background-color: $inputFilledBg;
-
-            &.p-highlight {
-                background: $checkboxActiveBg;
-            }
-        }
-
-        &:not(.p-checkbox-disabled) {
-            .p-checkbox-box {
-                &:hover {
-                    background-color: $inputFilledHoverBg;
-                }
-        
-                &.p-highlight:hover {    
-                    background: $checkboxActiveHoverBg;
-                }
-            }
-        }
-    }
-}
-
-@if ($highlightBg == $checkboxActiveBg) {
-    .p-highlight {
-        .p-checkbox {
-            .p-checkbox-box {
-                border-color: $checkboxIconActiveColor;
-            }
-        }
-    }
-} 

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

@@ -1,53 +0,0 @@
-@use 'sass:math';
-
-.p-chips {
-    &:not(.p-disabled):hover {
-        .p-chips-multiple-container {
-            border-color: $inputHoverBorderColor;
-        }
-    }
-
-    &:not(.p-disabled).p-focus {
-        .p-chips-multiple-container {
-            @include focused-input();
-        }
-    }
-
-    .p-chips-multiple-container {
-        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-
-        .p-chips-token {
-            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            margin-right: $inlineSpacing;
-            background: $chipBg;
-            color: $chipTextColor;
-            border-radius: $chipBorderRadius;
-
-            &.p-focus {
-                background: $chipFocusBg;
-                color: $chipFocusTextColor;
-            }
-
-            .p-chips-token-icon {
-                margin-left: $inlineSpacing;
-            }
-        }
-
-        .p-chips-input-token {
-            padding: math.div(nth($inputPadding, 1), 2) 0;
-                
-            input {
-                font-family: var(--font-family);
-                font-feature-settings: var(--font-feature-settings, normal);
-                font-size: $inputTextFontSize;
-                color: $textColor;
-                padding: 0;
-                margin: 0;
-            }
-        }
-    }
-
-    &.p-invalid.p-component > .p-inputtext {
-        @include invalid-input();
-    }
-}

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

@@ -1,18 +0,0 @@
-.p-colorpicker-preview  {
-    width: $colorPickerPreviewWidth;
-    height: $colorPickerPreviewHeight;
-}
-
-.p-colorpicker-panel {
-    background: $colorPickerBg;
-    border: $colorPickerBorder;
-
-    .p-colorpicker-color-handle,
-    .p-colorpicker-hue-handle {
-        border-color: $colorPickerHandleColor;
-    }
-}
-
-.p-colorpicker-overlay-panel {
-    box-shadow: $inputOverlayShadow;
-}