@orangesix/react 1.0.10 → 1.1.0

package/style/scss/components/data/_datatable.scss

@@ -0,0 +1,414 @@
+.p-datatable {
+  width: 100%;
+
+  .p-datatable-wrapper {
+    &::-webkit-scrollbar {
+      width: $scrollBarWidth;
+      height: $scrollBarHeight;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $scrollThumbBg;
+      border-radius: $scrollTopBorderRadius;
+    }
+  }
+
+  .p-paginator-top {
+    border-width: $tableTopPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-paginator-bottom {
+    border-width: $tableBottomPaginatorBorderWidth;
+    border-radius: 0;
+  }
+
+  .p-datatable-header {
+    background: $tableHeaderBg;
+    color: $tableHeaderTextColor;
+    border: $tableHeaderBorder;
+    border-width: $tableHeaderBorderWidth;
+    padding: $tableHeaderPadding;
+    font-weight: $tableHeaderFontWeight;
+  }
+
+  .p-datatable-footer {
+    background: $tableFooterBg;
+    color: $tableFooterTextColor;
+    border: $tableFooterBorder;
+    border-width: $tableFooterBorderWidth;
+    padding: $tableFooterPadding;
+    font-weight: $tableFooterFontWeight;
+  }
+
+  .p-datatable-thead > tr > th {
+    text-align: $tableCellContentAlignment;
+    padding: $tableHeaderCellPadding;
+    border: $tableHeaderCellBorder;
+    border-width: $tableHeaderCellBorderWidth !important;
+    border-color: $tableHeaderCellBorderColor !important;
+    color: $tableHeaderCellTextColor;
+    background: $tableHeaderCellBg;
+    transition: $listItemTransition;
+
+    /* Customer */
+    font-weight: $tableHeaderCellFontWeight;
+    font-size: $tableHeaderCellFontSize;
+    text-transform: $tableHeaderCellTextTransform;
+  }
+
+  .p-datatable-tfoot > tr > td {
+    text-align: $tableCellContentAlignment;
+    padding: $tableFooterCellPadding;
+    border: $tableFooterCellBorder;
+    border-width: $tableFooterCellBorderWidth;
+    font-weight: $tableFooterCellFontWeight;
+    color: $tableFooterCellTextColor;
+    background: $tableFooterCellBg;
+  }
+
+  .p-sortable-column {
+    .p-sortable-column-icon {
+      color: $tableHeaderCellIconColor;
+      margin-left: $inlineSpacing;
+    }
+
+    .p-sortable-column-badge {
+      border-radius: 50%;
+      height: $tableSortableColumnBadgeSize;
+      min-width: $tableSortableColumnBadgeSize;
+      line-height: $tableSortableColumnBadgeSize;
+      color: $highlightTextColor;
+      background: $highlightBg;
+      margin-left: $inlineSpacing;
+    }
+
+    &:not(.p-highlight):not(.p-sortable-disabled):hover {
+      background: $tableHeaderCellHoverBg;
+      color: $tableHeaderCellTextHoverColor;
+
+      .p-sortable-column-icon {
+        color: $tableHeaderCellIconHoverColor;
+      }
+    }
+
+    &.p-highlight {
+      background: $tableHeaderCellHighlightBg;
+      color: $tableHeaderCellHighlightTextColor;
+
+      .p-sortable-column-icon {
+        color: $tableHeaderCellHighlightTextColor;
+      }
+
+      &:not(.p-sortable-disabled):hover {
+        background: $tableHeaderCellHighlightHoverBg;
+        color: $tableHeaderCellHighlightTextColor;
+
+        .p-sortable-column-icon {
+          color: $tableHeaderCellHighlightTextColor;
+        }
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: $inputListItemFocusShadow;
+      outline: 0 none;
+    }
+  }
+
+  .p-datatable-tbody {
+    > tr {
+      background: $tableBodyRowBg;
+      color: $tableBodyRowTextColor;
+      transition: $listItemTransition;
+      border-width: $tableBodyCellBorderWidth !important;
+      border-color: $tableBodyCellBorderColor !important;
+      font-size: $tableBodyCellFontSize !important;
+      user-select: text !important;
+
+      > td {
+        text-align: $tableCellContentAlignment;
+        border: $tableBodyCellBorder;
+        border-width: $tableBodyCellBorderWidth;
+        padding: $tableBodyCellPadding;
+        user-select: text !important;
+
+        .p-row-toggler,
+        .p-row-editor-init,
+        .p-row-editor-save,
+        .p-row-editor-cancel {
+          @include action-icon();
+        }
+
+        .p-row-editor-save {
+          margin-right: $inlineSpacing;
+        }
+
+        > .p-column-title {
+          font-weight: $tableHeaderCellFontWeight;
+        }
+
+        &.p-highlight {
+          background: $highlightBg;
+          color: $highlightTextColor;
+        }
+      }
+
+      &.p-highlight {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      &.p-highlight-contextmenu {
+        outline: 0.15rem solid $focusOutlineColor;
+        outline-offset: -0.15rem;
+      }
+
+      &.p-datatable-dragpoint-top > td {
+        box-shadow: inset 0 2px 0 0 $highlightBg;
+      }
+
+      &.p-datatable-dragpoint-bottom > td {
+        box-shadow: inset 0 -2px 0 0 $highlightBg;
+      }
+    }
+  }
+
+  &.p-datatable-selectable {
+    .p-datatable-tbody > tr.p-selectable-row {
+      &:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+        background: $tableBodyRowHoverBg;
+        color: $tableBodyRowTextHoverColor;
+      }
+
+      &:focus-visible {
+        outline: .15rem solid $focusOutlineColor;
+        outline-offset: -.15rem;
+      }
+    }
+  }
+
+  &.p-datatable-selectable-cell {
+    .p-datatable-tbody > tr.p-selectable-row {
+      & > td.p-selectable-cell {
+        &:not(.p-highlight):hover {
+          background: $tableBodyRowHoverBg;
+          color: $tableBodyRowTextHoverColor;
+        }
+
+        &:focus-visible {
+          outline: .15rem solid $focusOutlineColor;
+          outline-offset: -.15rem;
+        }
+      }
+    }
+  }
+
+  &.p-datatable-hoverable-rows {
+    .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+      background: $tableBodyRowHoverBg;
+      color: $tableBodyRowTextHoverColor;
+    }
+  }
+
+  .p-column-resizer-helper {
+    background: $tableResizerHelperBg;
+  }
+
+  .p-datatable-scrollable-header,
+  .p-datatable-scrollable-footer {
+    background: $panelHeaderBg;
+  }
+
+  &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+  &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
+    > .p-datatable-thead,
+    > .p-datatable-tfoot {
+      background-color: $tableHeaderCellBg;
+    }
+  }
+
+  .p-datatable-loading-icon {
+    font-size: $loadingIconFontSize;
+
+    &.p-icon {
+      width: $loadingIconFontSize;
+      height: $loadingIconFontSize;
+    }
+  }
+
+  &.p-datatable-gridlines {
+    .p-datatable-header {
+      border-width: 1px 1px 0 1px;
+    }
+
+    .p-datatable-footer {
+      border-width: 0 1px 1px 1px;
+    }
+
+    .p-paginator-top {
+      border-width: 0 1px 0 1px;
+    }
+
+    .p-paginator-bottom {
+      border-width: 0 1px 1px 1px;
+    }
+
+    .p-datatable-thead {
+      > tr {
+        > th {
+          border-width: 1px 0 1px 1px !important;
+
+          &:last-child {
+            border-width: 1px !important;
+          }
+        }
+      }
+    }
+
+    .p-datatable-tbody {
+      > tr {
+        > td {
+          border-width: 1px 0 0 1px !important;
+
+          &:last-child {
+            border-width: 1px 1px 0 1px !important;
+          }
+        }
+
+        &:last-child {
+          > td {
+            border-width: 1px 0 1px 1px !important;
+
+            &:last-child {
+              border-width: 1px !important;
+            }
+          }
+        }
+      }
+    }
+
+    .p-datatable-tfoot {
+      > tr {
+        > td {
+          border-width: 1px 0 1px 1px;
+
+          &:last-child {
+            border-width: 1px 1px 1px 1px;
+          }
+        }
+      }
+    }
+
+    .p-datatable-thead + .p-datatable-tfoot {
+      > tr {
+        > td {
+          border-width: 0 0 1px 1px;
+
+          &:last-child {
+            border-width: 0 1px 1px 1px;
+          }
+        }
+      }
+    }
+
+    &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
+      > tr {
+        > td {
+          border-width: 0 0 1px 1px;
+
+          &:last-child {
+            border-width: 0 1px 1px 1px;
+          }
+        }
+      }
+    }
+
+    &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
+      > tr {
+        &:last-child {
+          > td {
+            border-width: 0 0 0 1px;
+
+            &:last-child {
+              border-width: 0 1px 0 1px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.p-datatable-striped {
+    .p-datatable-tbody {
+      > tr.p-row-odd {
+        background: $tableBodyRowEvenBg;
+
+        &.p-highlight {
+          background: $highlightBg;
+          color: $highlightTextColor;
+
+          .p-row-toggler {
+            color: $highlightTextColor;
+
+            &:hover {
+              color: $highlightTextColor;
+            }
+          }
+        }
+
+        & + .p-row-expanded {
+          background: $tableBodyRowEvenBg;
+        }
+      }
+    }
+  }
+
+  &.p-datatable-sm {
+    .p-datatable-header {
+      @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+    }
+
+    .p-datatable-thead > tr > th {
+      @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+    }
+
+    .p-datatable-tbody > tr > td {
+      @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+    }
+
+    .p-datatable-tfoot > tr > td {
+      @include scaledPadding($tableFooterPadding, $tableScaleSM);
+    }
+
+    .p-datatable-footer {
+      @include scaledPadding($tableFooterPadding, $tableScaleSM);
+    }
+  }
+
+  &.p-datatable-lg {
+    .p-datatable-header {
+      @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+    }
+
+    .p-datatable-thead > tr > th {
+      @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+    }
+
+    .p-datatable-tbody > tr > td {
+      @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+    }
+
+    .p-datatable-tfoot > tr > td {
+      @include scaledPadding($tableFooterPadding, $tableScaleLG);
+    }
+
+    .p-datatable-footer {
+      @include scaledPadding($tableFooterPadding, $tableScaleLG);
+    }
+  }
+}
+
+.p-datatable-drag-selection-helper {
+  background: $tableDragHelperBg;
+}

package/style/scss/components/data/_dataview.scss

@@ -0,0 +1,47 @@
+.p-dataview {
+	.p-paginator-top {
+		border-width: $tableTopPaginatorBorderWidth;
+		border-radius: 0;
+	}
+
+	.p-paginator-bottom {
+		border-width: $tableBottomPaginatorBorderWidth;
+		border-radius: 0;
+	}
+
+	.p-dataview-header {
+		background: $tableHeaderBg;
+		color: $tableHeaderTextColor;
+		border: $tableHeaderBorder;
+		border-width: $tableHeaderBorderWidth;
+		padding: $tableHeaderPadding;
+		font-weight: $tableHeaderFontWeight;
+	}
+
+	.p-dataview-content {
+		background: $tableBodyRowBg;
+		color: $tableBodyRowTextColor;
+		border: $dataViewContentBorder;
+		padding: $dataViewContentPadding;
+	}
+
+	.p-dataview-footer {
+		background: $tableFooterBg;
+		color: $tableFooterTextColor;
+		border: $tableFooterBorder;
+		border-width: $tableFooterBorderWidth;
+		padding: $tableFooterPadding;
+		font-weight: $tableFooterFontWeight;
+		border-bottom-left-radius: $borderRadius;
+		border-bottom-right-radius: $borderRadius;
+	}
+
+	.p-dataview-loading-icon {
+		font-size: $loadingIconFontSize;
+
+		&.p-icon {
+			width: $loadingIconFontSize;
+			height: $loadingIconFontSize;
+		}
+	}
+}

package/style/scss/components/data/_filter.scss

@@ -0,0 +1,138 @@
+.p-column-filter-row {
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        margin-left: $inlineSpacing;
+    }
+}
+
+.p-column-filter-menu-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &.p-column-filter-menu-button-open,
+    &.p-column-filter-menu-button-open:hover {
+        background: $actionIconHoverBg;
+        color: $actionIconHoverColor;
+    }
+
+    &.p-column-filter-menu-button-active,
+    &.p-column-filter-menu-button-active:hover {
+        background: $highlightBg;
+        color: $highlightTextColor;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+}
+
+.p-column-filter-clear-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-column-filter-overlay {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+    min-width: $menuWidth;
+
+    .p-column-filter-row-items {
+        padding: $inputListPadding;
+
+        .p-column-filter-row-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus-visible {
+                @include focused-listitem();
+            }
+        }
+
+        .p-column-filter-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+}
+
+.p-column-filter-overlay-menu {
+    .p-column-filter-operator {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-column-filter-constraint {
+        padding: $panelContentPadding;
+        border-bottom: $divider;
+
+        .p-column-filter-matchmode-dropdown {
+            margin-bottom: $inlineSpacing;
+        }
+
+        .p-column-filter-remove-button {
+            margin-top: $inlineSpacing;
+        }
+
+        &:last-child {
+            border-bottom: 0 none;
+        }
+    }
+
+    .p-column-filter-add-rule {
+        padding: $panelFooterPadding;
+    }
+
+    .p-column-filter-buttonbar {
+        padding: $panelContentPadding;
+    } 
+}

package/style/scss/components/data/_orderlist.scss

@@ -0,0 +1,86 @@
+.p-orderlist {
+	.p-orderlist-controls {
+		padding: $panelContentPadding;
+
+		.p-button {
+			margin-bottom: $inlineSpacing;
+		}
+	}
+
+	.p-orderlist-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-orderlist-filter-container {
+		padding: $panelHeaderPadding;
+		background: $panelContentBg;
+		border: $panelHeaderBorder;
+		border-bottom: 0 none;
+
+		.p-orderlist-filter-input {
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-orderlist-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.p-orderlist-list {
+		border: $panelContentBorder;
+		background: $panelContentBg;
+		color: $panelContentTextColor;
+		padding: $inputListPadding;
+		border-bottom-right-radius: $borderRadius;
+		border-bottom-left-radius: $borderRadius;
+		outline: 0 none;
+
+		.p-orderlist-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;
+				}
+			}
+		}
+	}
+
+	&.p-orderlist-striped {
+		.p-orderlist-list {
+			.p-orderlist-item:nth-child(even) {
+				background: $panelContentEvenRowBg;
+
+				&:hover {
+					background: $inputListItemHoverBg;
+				}
+			}
+		}
+	}
+}