@orangesix/react 2.3.1 → 2.4.0

package/style/scss/_tabview.scss

@@ -1,148 +0,0 @@
-//core
-.p-tabview-nav-container {
-  position: relative;
-}
-
-.p-tabview-scrollable .p-tabview-nav-container {
-  overflow: hidden;
-}
-
-.p-tabview-nav-content {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  overscroll-behavior: contain auto;
-  position: relative;
-}
-
-.p-tabview-nav {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  flex: 1 1 auto;
-}
-
-.p-tabview-nav-link {
-  cursor: pointer;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  position: relative;
-  text-decoration: none;
-  overflow: hidden;
-}
-
-.p-tabview-ink-bar {
-  display: none;
-  z-index: 1;
-}
-
-.p-tabview-nav-link:focus {
-  z-index: 1;
-}
-
-.p-tabview-close {
-  z-index: 1;
-}
-
-.p-tabview-title {
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.p-tabview-nav-btn {
-  position: absolute;
-  top: 0;
-  z-index: 2;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.p-tabview-nav-prev {
-  left: 0;
-}
-
-.p-tabview-nav-next {
-  right: 0;
-}
-
-.p-tabview-nav-content::-webkit-scrollbar {
-  display: none;
-}
-
-//theme
-.p-tabview {
-  .p-tabview-nav {
-    background: $tabviewNavBg;
-    border: $tabviewNavBorder;
-    border-width: $tabviewNavBorderWidth;
-
-    li {
-      margin-right: $tabviewHeaderSpacing;
-
-      .p-tabview-nav-link {
-        border: $tabviewHeaderBorder;
-        border-width: $tabviewHeaderBorderWidth;
-        border-color: $tabviewHeaderBorderColor;
-        background: $tabviewHeaderBg;
-        color: $tabviewHeaderTextColor !important;
-        padding: $tabviewHeaderPadding;
-        font-weight: $tabviewHeaderFontWeight;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-        transition: $listItemTransition;
-        margin: $tabviewHeaderMargin;
-
-        &:not(.p-disabled):focus-visible {
-          @include focused-inset();
-        }
-      }
-
-      &:not(.p-highlight):not(.p-disabled):hover {
-        .p-tabview-nav-link {
-          background: $tabviewHeaderHoverBg;
-          border-color: $tabviewHeaderHoverBorderColor;
-          color: $tabviewHeaderTextHoverColor;
-        }
-      }
-
-      &.p-highlight {
-        .p-tabview-nav-link {
-          background: $tabviewHeaderActiveBg;
-          border-color: $tabviewHeaderActiveBorderColor;
-          color: $tabviewHeaderTextActiveColor !important;
-        }
-      }
-    }
-  }
-
-  .p-tabview-close {
-    margin-left: $inlineSpacing;
-  }
-
-  .p-tabview-nav-btn.p-link {
-    background: $tabviewHeaderActiveBg;
-    color: $tabviewHeaderTextActiveColor;
-    width: $buttonIconOnlyWidth;
-    box-shadow: $raisedButtonShadow;
-    border-radius: 0;
-
-    &:focus-visible {
-      @include focused-inset();
-    }
-  }
-
-  .p-tabview-panels {
-    background: $tabviewContentBg;
-    padding: $tabviewContentPadding;
-    border: $tabviewContentBorder;
-    color: $tabviewContentTextColor;
-    border-bottom-right-radius: $borderRadius;
-    border-bottom-left-radius: $borderRadius;
-    font-size: $tabviewContentFontSize !important;
-  }
-}

package/style/scss/_tag.scss

@@ -1,40 +0,0 @@
-@use 'sass:math';
-
-.p-tag {
-    background: $badgeBg;
-    color: $badgeTextColor;
-    font-size: $badgeFontSize;
-    font-weight: $badgeFontWeight;
-    padding: $tagPadding;
-    border-radius: $borderRadius;
-
-    &.p-tag-success {
-        background-color: $successButtonBg;
-        color: $successButtonTextColor;
-    }
-
-    &.p-tag-info {
-        background-color: $infoButtonBg;
-        color: $infoButtonTextColor;
-    }
-
-    &.p-tag-warning {
-        background-color: $warningButtonBg;
-        color: $warningButtonTextColor;
-    }
-
-    &.p-tag-danger {
-        background-color: $dangerButtonBg;
-        color: $dangerButtonTextColor;
-    }
-
-    .p-tag-icon {
-        margin-right: math.div($inlineSpacing, 2);
-        font-size: $badgeFontSize;
-
-        &.p-icon {
-            width: $badgeFontSize;
-            height: $badgeFontSize;
-        }
-    }
-}

package/style/scss/_terminal.scss

@@ -1,12 +0,0 @@
-.p-terminal {
-	background: $panelContentBg;
-	color: $panelContentTextColor;
-	border: $panelContentBorder;
-	padding: $panelContentPadding;
-
-	.p-terminal-input {
-		font-family: var(--font-family);
-		font-feature-settings: var(--font-feature-settings, normal);
-		font-size: $inputTextFontSize;
-	}
-}

package/style/scss/_tieredmenu.scss

@@ -1,43 +0,0 @@
-.p-tieredmenu {
-	padding: $verticalMenuPadding;
-	background: $menuBg;
-	color: $menuTextColor;
-	border: $menuBorder;
-	border-radius: $borderRadius;
-	width: $menuWidth;
-
-	&.p-tieredmenu-overlay {
-		background: $overlayMenuBg;
-		border: $overlayMenuBorder;
-		box-shadow: $overlayMenuShadow;
-	}
-
-	.p-tieredmenu-root-list {
-		outline: 0 none;
-	}
-
-	.p-submenu-list {
-		padding: $verticalMenuPadding;
-		background: $overlayMenuBg;
-		border: $overlayMenuBorder;
-		box-shadow: $overlayMenuShadow;
-	}
-
-	.p-menuitem {
-		@include menuitem-link();
-	}
-
-	.p-menuitem-separator {
-		border-top: $divider;
-		margin: $menuSeparatorMargin;
-	}
-
-	.p-submenu-icon {
-		font-size: $menuitemSubmenuIconFontSize;
-
-		&.p-icon {
-			width: $menuitemSubmenuIconFontSize;
-			height: $menuitemSubmenuIconFontSize;
-		}
-	}
-}

package/style/scss/_timeline.scss

@@ -1,38 +0,0 @@
-.p-timeline {
-    .p-timeline-event-marker {
-        border: $timelineEventMarkerBorder; 
-        border-radius: $timelineEventMarkerBorderRadius;
-        width: $timelineEventMarkerWidth;
-        height: $timelineEventMarkerHeight;
-        background-color: $timelineEventMarkerBackground;
-    }
-
-    .p-timeline-event-connector {
-        background-color: $timelineEventColor;
-    }
-
-    &.p-timeline-vertical {
-        .p-timeline-event-opposite,
-        .p-timeline-event-content  {
-            padding: $timelineVerticalEventContentPadding;
-        }
-
-        .p-timeline-event-connector {
-            width: $timelineEventConnectorSize;
-        }
-    }
-
-    &.p-timeline-horizontal {
-        .p-timeline-event-opposite,
-        .p-timeline-event-content  {
-            padding: $timelineHorizontalEventContentPadding;
-        }
-
-        .p-timeline-event-connector {
-            height: $timelineEventConnectorSize;
-        }
-    }
-}
-
-
-

package/style/scss/_toast.scss

@@ -1,100 +0,0 @@
-.p-toast {
-    opacity: $toastOpacity;
-
-    .p-toast-message {
-        margin: $toastMargin;
-        box-shadow: $toastShadow;
-        border-radius: $borderRadius;
-
-        .p-toast-message-content {
-            padding: $toastPadding;
-
-            .p-toast-message-text {
-                margin: $toastMessageTextMargin;
-            }
-
-            .p-toast-message-icon {
-                font-size: $toastIconFontSize;
-                
-                &.p-icon {
-                    width: $toastIconFontSize;
-                    height: $toastIconFontSize;
-                }
-            }
-
-
-            .p-toast-summary {
-                font-weight: $toastTitleFontWeight;
-            }
-
-            .p-toast-detail {
-                margin: $toastDetailMargin;
-            }
-        }
-
-        .p-toast-icon-close {
-            width: $toastIconFontSize;
-            height: $toastIconFontSize;
-            border-radius: $actionIconBorderRadius;
-            background: transparent;
-            transition: $actionIconTransition;
-
-            &:hover {
-                background: rgba(255,255,255,.5);
-            }
-
-            &:focus-visible {
-                @include focused();
-            }
-        }
-
-        &.p-toast-message-info {
-            background: $infoMessageBg;
-            border: $infoMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $infoMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $infoMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-success {
-            background: $successMessageBg;
-            border: $successMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $successMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $successMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-warn {
-            background: $warningMessageBg;
-            border: $warningMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $warningMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $warningMessageIconColor;
-            }
-        }
-
-        &.p-toast-message-error {
-            background: $errorMessageBg;
-            border: $errorMessageBorder;
-            border-width: $messageBorderWidth;
-            color: $errorMessageTextColor;
-
-            .p-toast-message-icon,
-            .p-toast-icon-close {
-                color: $errorMessageIconColor;
-            }
-        }
-
-    }
-}

package/style/scss/_togglebutton.scss

@@ -1,99 +0,0 @@
-//core
-.p-togglebutton {
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-togglebutton-input {
-    cursor: pointer;
-}
-
-.p-togglebutton .p-button {
-    flex: 1 1 auto;
-}
-//theme
-.p-togglebutton {
-    .p-togglebutton-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;
-        border: $toggleButtonBorder;
-        border-radius: $borderRadius;
-    }
-
-    .p-button {
-        background: $toggleButtonBg;
-        border: $toggleButtonBorder;
-        color: $toggleButtonTextColor;
-        transition: $formElementTransition;
-        outline-color: transparent;
-
-        .p-button-icon-left,
-        .p-button-icon-right {
-            color: $toggleButtonIconColor;
-        }
-    }
-
-    &.p-highlight {
-        .p-button {
-            background: $toggleButtonActiveBg;
-            border-color: $toggleButtonActiveBorderColor;
-            color: $toggleButtonTextActiveColor;
-
-            .p-button-icon-left,
-            .p-button-icon-right {
-                color: $toggleButtonIconActiveColor;
-            }
-        }
-    }
-
-    &:not(.p-disabled) {
-        &:has(.p-togglebutton-input:hover) {
-            &:not(.p-highlight) {
-                .p-button {
-                    background: $toggleButtonHoverBg;
-                    border-color: $toggleButtonHoverBorderColor;
-                    color: $toggleButtonTextHoverColor;
-
-                    .p-button-icon-left,
-                    .p-button-icon-right {
-                        color: $toggleButtonIconHoverColor;
-                    }
-                }
-            }
-
-            &.p-highlight {
-                .p-button {
-                    background: $toggleButtonActiveHoverBg;
-                    border-color: $toggleButtonActiveHoverBorderColor;
-                    color: $toggleButtonTextActiveHoverColor;
-
-                    .p-button-icon-left,
-                    .p-button-icon-right {
-                        color: $toggleButtonIconActiveHoverColor;
-                    }
-                }
-            }
-        }
-
-        &:has(.p-togglebutton-input:focus-visible) {
-            .p-button {
-                @include focused-input();
-            }
-        }
-    }
-
-    &.p-invalid > .p-button {
-        @include invalid-input();
-    }
-}

package/style/scss/_toolbar.scss

@@ -1,11 +0,0 @@
-.p-toolbar {
-    background: $panelHeaderBg;
-    border: $panelHeaderBorder;
-    padding: $panelHeaderPadding;
-    border-radius: $borderRadius;
-    gap: $inlineSpacing;
-
-    .p-toolbar-separator {
-        margin: 0 $inlineSpacing;
-    }
-}

package/style/scss/_tooltip.scss

@@ -1,33 +0,0 @@
-.p-tooltip {
-    .p-tooltip-text {
-        background: $tooltipBg;
-        color: $tooltipTextColor;
-        padding: $tooltipPadding;
-        box-shadow: $inputOverlayShadow;
-        border-radius: $borderRadius;
-    }
-
-    &.p-tooltip-right {
-        .p-tooltip-arrow {
-            border-right-color: $tooltipBg;
-        }
-    }
-
-    &.p-tooltip-left {
-        .p-tooltip-arrow {
-            border-left-color: $tooltipBg;
-        }
-    }
-
-    &.p-tooltip-top {
-        .p-tooltip-arrow {
-            border-top-color: $tooltipBg;
-        }
-    }
-
-    &.p-tooltip-bottom {
-        .p-tooltip-arrow {
-            border-bottom-color: $tooltipBg;
-        }
-    }
-}

package/style/scss/_tree.scss

@@ -1,184 +0,0 @@
-// core
-.p-tree-container {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-	overflow: auto;
-}
-
-.p-treenode-children {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-}
-
-.p-treenode-selectable {
-	cursor: pointer;
-	user-select: none;
-}
-
-.p-tree-toggler {
-	cursor: pointer;
-	user-select: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-	position: relative;
-	flex-shrink: 0;
-}
-
-.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
-	visibility: hidden;
-}
-
-.p-treenode-content {
-	display: flex;
-	align-items: center;
-}
-
-.p-tree-filter {
-	width: 100%;
-}
-
-.p-tree-filter-container {
-	position: relative;
-	display: block;
-	width: 100%;
-}
-
-.p-tree-filter-icon {
-	position: absolute;
-	top: 50%;
-	margin-top: -0.5rem;
-}
-
-.p-tree-loading {
-	position: relative;
-	min-height: 4rem;
-}
-
-.p-tree .p-tree-loading-overlay {
-	position: absolute;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-// TODO: Should be removed after implementing the new scrollable prop to Tree
-// .p-tree-flex-scrollable {
-//     display: flex;
-//     flex: 1;
-//     height: 100%;
-//     flex-direction: column;
-// }
-
-// .p-tree-flex-scrollable .p-tree-wrapper {
-//     flex: 1;
-// }
-
-// theme
-.p-tree {
-	border: $panelContentBorder;
-	background: $panelContentBg;
-	color: $panelContentTextColor;
-	padding: $panelContentPadding;
-	border-radius: $borderRadius;
-
-	.p-tree-container {
-			.p-treenode {
-					padding: $treeNodePadding;
-					outline: 0 none;
-
-					&:focus > .p-treenode-content {
-							@include focused-listitem();
-					}
-
-					.p-treenode-content {
-							border-radius: $borderRadius;
-							transition: $listItemTransition;
-							padding: $treeNodeContentPadding;
-
-							.p-tree-toggler {
-									margin-right: $inlineSpacing;
-									@include action-icon();
-							}
-
-							.p-treenode-icon {
-									margin-right: $inlineSpacing;
-									color: $treeNodeIconColor;
-							}
-
-							.p-checkbox {
-									margin-right: $inlineSpacing;
-
-									&.p-indeterminate {
-											.p-checkbox-icon {
-													color: $textColor;
-											}
-									}
-							}
-
-							&.p-highlight {
-									background: $highlightBg;
-									color: $highlightTextColor;
-
-									.p-tree-toggler,
-									.p-treenode-icon {
-											color: $highlightTextColor;
-
-											&:hover {
-													color: $highlightTextColor;
-											}
-									}
-							}
-
-							&.p-treenode-selectable:not(.p-highlight):hover {
-									background: $inputListItemHoverBg;
-									color: $inputListItemTextHoverColor;
-							}
-
-							&.p-treenode-dragover {
-								background: $inputListItemHoverBg;
-								color: $inputListItemTextHoverColor;
-							}
-					}
-			}
-	}
-
-	.p-tree-filter-container {
-			margin-bottom: $inlineSpacing;
-
-			.p-tree-filter {
-					width: 100%;
-					padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-			}
-
-			.p-tree-filter-icon {
-					right: nth($inputPadding, 2);
-					color: $inputIconColor;
-			}
-	}
-
-	.p-treenode-children {
-			padding: $treeNodeChildrenPadding;
-	}
-
-	.p-tree-loading-icon {
-			font-size: $loadingIconFontSize;
-
-			&.p-icon {
-					width:  $loadingIconFontSize;
-					height: $loadingIconFontSize;
-			}
-	}
-
-	.p-treenode-droppoint {
-		height: $inlineSpacing;
-
-		&.p-treenode-droppoint-active {
-			background: scale-color($highlightBg, $lightness: -20%);
-		}
-	}
-}