Initial commit
This commit is contained in:
dahoud
37
public/theme/theme-base/components/data/_carousel.scss
Normal file
37
public/theme/theme-base/components/data/_carousel.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.p-carousel {
|
||||
.p-carousel-content {
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
@include action-icon();
|
||||
margin: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
padding: $carouselIndicatorsPadding;
|
||||
|
||||
.p-carousel-indicator {
|
||||
margin-right: $inlineSpacing;
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
button {
|
||||
background-color: $carouselIndicatorBg;
|
||||
width: $carouselIndicatorWidth;
|
||||
height: $carouselIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $carouselIndicatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $carouselIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
47
public/theme/theme-base/components/data/_datascroller.scss
Normal file
47
public/theme/theme-base/components/data/_datascroller.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.p-datascroller {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-datascroller-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-datascroller-content {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
border: $dataViewContentBorder;
|
||||
padding: $dataViewContentPadding;
|
||||
}
|
||||
|
||||
&.p-datascroller-inline {
|
||||
.p-datascroller-list {
|
||||
> li {
|
||||
border: $dataViewListItemBorder;
|
||||
border-width: $dataViewListItemBorderWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datascroller-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;
|
||||
}
|
||||
}
|
||||
389
public/theme/theme-base/components/data/_datatable.scss
Normal file
389
public/theme/theme-base/components/data/_datatable.scss
Normal file
@@ -0,0 +1,389 @@
|
||||
.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):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;
|
||||
|
||||
> 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;
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
||||
&: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.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;
|
||||
}
|
||||
56
public/theme/theme-base/components/data/_dataview.scss
Normal file
56
public/theme/theme-base/components/data/_dataview.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.p-dataview-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
138
public/theme/theme-base/components/data/_filter.scss
Normal file
138
public/theme/theme-base/components/data/_filter.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
80
public/theme/theme-base/components/data/_orderlist.scss
Normal file
80
public/theme/theme-base/components/data/_orderlist.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-orderlist-striped {
|
||||
.p-orderlist-list {
|
||||
.p-orderlist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
91
public/theme/theme-base/components/data/_paginator.scss
Normal file
91
public/theme/theme-base/components/data/_paginator.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
public/theme/theme-base/components/data/_picklist.scss
Normal file
68
public/theme/theme-base/components/data/_picklist.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
.p-picklist {
|
||||
.p-picklist-buttons {
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-button {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
38
public/theme/theme-base/components/data/_timeline.scss
Normal file
38
public/theme/theme-base/components/data/_timeline.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
102
public/theme/theme-base/components/data/_tree.scss
Normal file
102
public/theme/theme-base/components/data/_tree.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.p-tree {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $panelContentPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-tree-container {
|
||||
.p-treenode {
|
||||
padding: $treeNodePadding;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
&.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
277
public/theme/theme-base/components/data/_treetable.scss
Normal file
277
public/theme/theme-base/components/data/_treetable.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
.p-treetable {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-treetable-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableHeaderCellPadding;
|
||||
border: $tableHeaderCellBorder;
|
||||
border-width: $tableHeaderCellBorderWidth;
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
color: $tableHeaderCellTextColor;
|
||||
background: $tableHeaderCellBg;
|
||||
transition: $listItemTransition;
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableFooterCellPadding;
|
||||
border: $tableFooterCellBorder;
|
||||
border-width: $tableFooterCellBorderWidth;
|
||||
font-weight: $tableFooterCellFontWeight;
|
||||
color: $tableFooterCellTextColor;
|
||||
background: $tableFooterCellBg;
|
||||
}
|
||||
|
||||
.p-sortable-column {
|
||||
outline-color: $focusOutlineColor;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tbody {
|
||||
> tr {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
transition: $listItemTransition;
|
||||
|
||||
> td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
border: $tableBodyCellBorder;
|
||||
border-width: $tableBodyCellBorderWidth;
|
||||
padding: $tableBodyCellPadding;
|
||||
|
||||
.p-treetable-toggler {
|
||||
@include action-icon();
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
& + .p-checkbox {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-indeterminate {
|
||||
.p-checkbox-icon {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: .15rem solid $focusOutlineColor;
|
||||
outline-offset: -.15rem;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-treetable-toggler {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-selectable,
|
||||
&.p-treetable-hoverable-rows {
|
||||
.p-treetable-tbody > tr:not(.p-highlight):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
|
||||
.p-treetable-toggler {
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-resizer-helper {
|
||||
background: $tableResizerHelperBg;
|
||||
}
|
||||
|
||||
.p-treetable-scrollable-header,
|
||||
.p-treetable-scrollable-footer {
|
||||
background: $panelHeaderBg;
|
||||
}
|
||||
|
||||
.p-treetable-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-gridlines {
|
||||
.p-treetable-header {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-treetable-top {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-treetable-bottom {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-treetable-thead {
|
||||
> tr {
|
||||
> th {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-striped {
|
||||
.p-treetable-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-treetable-sm {
|
||||
.p-treetable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $scaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treetable-lg {
|
||||
.p-treetable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-treetable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user