@orangesix/react 1.3.8 → 2.0.3

package/style/scss/data/_organizationchart.scss

@@ -0,0 +1,50 @@
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}

package/style/scss/data/_paginator.scss

@@ -0,0 +1,91 @@
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+    
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}

package/style/scss/data/_picklist.scss

@@ -0,0 +1,74 @@
+.p-picklist {
+  .p-picklist-buttons {
+    padding: $panelContentPadding;
+
+    .p-button {
+      margin-bottom: $inlineSpacing !important;
+    }
+  }
+
+  .p-picklist-header {
+    background: $panelHeaderBg;
+    color: $panelHeaderTextColor;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    font-weight: $panelHeaderFontWeight;
+    border-bottom: 0 none;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+  }
+
+  .p-picklist-filter-container {
+    padding: $panelHeaderPadding;
+    background: $panelContentBg;
+    border: $panelHeaderBorder;
+    border-bottom: 0 none;
+
+    .p-picklist-filter-input {
+      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-picklist-filter-icon {
+      right: nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-picklist-list {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $inputListPadding;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    outline: 0 none;
+
+    .p-picklist-item {
+      padding: $inputListItemPadding;
+      margin: $inputListItemMargin;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: transform $transitionDuration, $listItemTransition;
+
+      &:not(.p-highlight):hover {
+        background: $inputListItemHoverBg;
+        color: $inputListItemTextHoverColor;
+      }
+
+      &.p-focus {
+        color: $inputListItemTextFocusColor;
+        background: $inputListItemFocusBg;
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+    }
+  }
+}

package/style/scss/data/_timeline.scss

@@ -0,0 +1,38 @@
+.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/data/_tree.scss

@@ -0,0 +1,184 @@
+// 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%);
+		}
+	}
+}