@orangesix/react 1.3.8 → 2.0.3

package/style/scss/input/_calendar.scss

@@ -0,0 +1,251 @@
+.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: 0.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/style/scss/input/_cascadeselect.scss

@@ -0,0 +1,107 @@
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .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;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}

package/style/scss/input/_checkbox.scss

@@ -0,0 +1,181 @@
+//core
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// theme
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-input {
+        border: $checkboxBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+    }
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+    }
+    
+
+    &.p-highlight {
+        .p-checkbox-box {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+        }  
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-checkbox-input:hover) {
+            .p-checkbox-box {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-highlight {
+                .p-checkbox-box {
+                    border-color: $checkboxActiveHoverBorderColor;
+                    background: $checkboxActiveHoverBg;
+                    color: $checkboxIconActiveHoverColor;
+                }
+            }
+        }
+
+        &:has(.p-checkbox-input:focus-visible) {
+            .p-checkbox-box {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-checkbox-box {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+    
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+}

package/style/scss/input/_chips.scss

@@ -0,0 +1,102 @@
+@use "sass:math";
+
+// core
+.p-chips {
+    display: inline-flex;
+}
+
+.p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+}
+
+.p-chips-token-icon {
+    cursor: pointer;
+}
+
+.p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+}
+
+.p-fluid .p-chips {
+    display: flex;
+}
+
+// theme
+.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);
+        outline-color: transparent;
+
+        .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/style/scss/input/_colorpicker.scss

@@ -0,0 +1,18 @@
+.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;
+}