@orangesix/react 2.3.1 → 2.4.0-beta.3

package/style/scss/data/_datatable.scss

@@ -1,415 +0,0 @@
-.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;
-        font-weight: $tableBodyCellSelectedFontWeight;
-      }
-
-      &.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/data/_dataview.scss

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

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

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