@aziontech/theme 2.6.0 → 4.1.0

package/src/azion/theme-base/components/data/_datatable.scss

@@ -1,347 +0,0 @@
-.p-datatable {
-    .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;
-        font-weight: $tableHeaderCellFontWeight;
-        color: $tableHeaderCellTextColor;
-        background: $tableHeaderCellBg;
-        transition: $listItemTransition;
-    }
-
-    .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):hover {
-            background: $tableHeaderCellHoverBg;
-            color: $tableHeaderCellTextHoverColor;
-
-            .p-sortable-column-icon {
-                color: $tableHeaderCellIconHoverColor;
-            }
-        }
-
-        &.p-highlight {
-            background: $tableHeaderCellHighlightBg;
-            color: $tableHeaderCellHighlightTextColor;
-
-            .p-sortable-column-icon {
-                color: $tableHeaderCellHighlightTextColor;
-            }
-
-            &: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;
-
-            > td {
-                text-align: $tableCellContentAlignment;
-                border: $tableBodyCellBorder;
-                border-width: $tableBodyCellBorderWidth;
-                padding: $tableBodyCellPadding;
-
-                .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;
-                }
-            }
-
-            &:focus-visible {
-                outline: 0.15rem solid $focusOutlineColor;
-                outline-offset: -0.15rem;
-            }
-
-            &.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-hoverable-rows {
-        .p-datatable-tbody > tr:not(.p-highlight):hover {
-            background: $tableBodyRowHoverBg;
-            color: $tableBodyRowTextHoverColor;
-        }
-    }
-
-    .p-column-resizer-helper {
-        background: $tableResizerHelperBg;
-    }
-
-    &.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;
-
-                    &:last-child {
-                        border-width: 1px;
-                    }
-                }
-            }
-        }
-
-        .p-datatable-tbody {
-            > tr {
-                > td {
-                    border-width: 1px 0 0 1px;
-
-                    &:last-child {
-                        border-width: 1px 1px 0 1px;
-                    }
-                }
-
-                &:last-child {
-                    > td {
-                        border-width: 1px 0 1px 1px;
-
-                        &:last-child {
-                            border-width: 1px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .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:nth-child(even) {
-                background: $tableBodyRowEvenBg;
-    
-                &.p-highlight {
-                    background: $highlightBg;
-                    color: $highlightTextColor;
-    
-                    .p-row-toggler {
-                        color: $highlightTextColor;
-    
-                        &:hover {
-                            color: $highlightTextColor;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &.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);
-        }
-    }
-}

package/src/azion/theme-base/components/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-list {
-        .p-dataview-content {
-            > .p-grid > div {
-                border: $dataViewListItemBorder;
-                border-width: $dataViewListItemBorderWidth;
-            }
-        }
-    }
-
-    .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;
-    }
-}

package/src/azion/theme-base/components/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/src/azion/theme-base/components/data/_orderlist.scss

@@ -1,70 +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-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;
-                }
-            }
-        }
-    }
-}

package/src/azion/theme-base/components/data/_organizationchart.scss

@@ -1,50 +0,0 @@
-.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: $highlightBg
-                }
-            }
-        }
-    }
-
-    .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();
-        }
-    }
-}