@orangesix/react 2.3.1 → 2.4.0

package/style/scss/_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: 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/_card.scss

@@ -1,30 +0,0 @@
-.p-card {
-    background: $panelContentBg;
-    color: $panelContentTextColor;
-    box-shadow: $cardShadow;
-    border-radius: $borderRadius;
-
-    .p-card-body {
-        padding: $cardBodyPadding;
-    }
-
-    .p-card-title {
-        font-size: $cardTitleFontSize;
-        font-weight: $cardTitleFontWeight;
-        margin-bottom: $inlineSpacing;
-    }
-
-    .p-card-subtitle {
-        font-weight: $cardSubTitleFontWeight;
-        margin-bottom: $inlineSpacing;
-        color: $cardSubTitleColor;
-    }
-
-    .p-card-content {
-        padding: $cardContentPadding;
-    }
-
-    .p-card-footer {
-        padding: $cardFooterPadding;
-    }
-}

package/style/scss/_carousel.scss

@@ -1,39 +0,0 @@
-.p-carousel {
-    .p-carousel-content {
-        .p-carousel-prev,
-        .p-carousel-next {
-            @include action-icon();
-            & {
-                margin: $inlineSpacing;
-            }
-        }
-    }
-
-    .p-carousel-indicators {
-        padding: $carouselIndicatorsPadding;
-
-        .p-carousel-indicator {
-            margin-right: $inlineSpacing;
-            margin-bottom: $inlineSpacing;
-           
-            button {
-                background-color: $carouselIndicatorBg;
-                width: $carouselIndicatorWidth;
-                height: $carouselIndicatorHeight;
-                transition: $actionIconTransition;
-                border-radius: $carouselIndicatorBorderRadius;
-
-                &:hover {
-                    background: $carouselIndicatorHoverBg;
-                }
-            }
-
-            &.p-highlight {
-                button {
-                    background: $highlightBg;
-                    color: $highlightTextColor;
-                }
-            }
-        }
-    }
-}

package/style/scss/_cascadeselect.scss

@@ -1,107 +0,0 @@
-.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/_checkbox.scss

@@ -1,181 +0,0 @@
-//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/_chip.scss

@@ -1,39 +0,0 @@
-@use 'sass:math';
-
-.p-chip {
-    background-color: $chipBg;
-    color: $chipTextColor;
-    border-radius: $chipBorderRadius;
-    padding: 0 nth($inputPadding, 2);
-
-    .p-chip-text {
-        line-height: 1.5;
-        margin-top: math.div(nth($inputPadding, 1), 2);
-        margin-bottom: math.div(nth($inputPadding, 1), 2);
-    }
-
-    .p-chip-icon {
-        margin-right: $inlineSpacing;
-    }
-
-    img {
-        width: 1.5 + nth($inputPadding, 1);
-        height: 1.5 + nth($inputPadding, 1);
-        margin-left: -1 * nth($inputPadding, 2);
-        margin-right: $inlineSpacing;
-    }
-
-    .p-chip-remove-icon {
-        border-radius: $borderRadius;
-        transition: $actionIconTransition;
-        margin-left: $inlineSpacing;
-        
-        &:focus-visible {
-            @include focused();
-        }
-
-        &:focus {
-            outline: 0 none;
-        }
-    }
-}