Initial commit
This commit is contained in:
dahoud
99
public/theme/_compact.scss
Normal file
99
public/theme/_compact.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
$actionIconWidth:2rem;
|
||||
$actionIconHeight:2rem;
|
||||
|
||||
$inputPadding: .75rem .75rem;
|
||||
$inputListItemPadding: .75rem .75rem;
|
||||
$inputListHeaderPadding:.75rem;
|
||||
|
||||
$multiselectHeaderIconWidth:2.25rem;
|
||||
$multiselectHeaderIconHeight:.2.25rem;
|
||||
|
||||
$buttonPadding:0.571rem .75rem;
|
||||
$buttonIconOnlyWidth:2.25rem;
|
||||
$buttonIconOnlyPadding:0.571rem;
|
||||
|
||||
$ratingIconFontSize:1rem;
|
||||
|
||||
$calendarCellDateWidth:2.25rem;
|
||||
$calendarCellDateHeight:2.25rem;
|
||||
|
||||
$calendarActionIconWidth:2.25rem;
|
||||
$calendarActionIconHeight:2.25rem;
|
||||
|
||||
$calendarButtonBarPadding:.75rem 0;
|
||||
|
||||
$panelHeaderPadding:.75rem;
|
||||
$panelContentPadding:.75rem;
|
||||
$panelFooterPadding:.75rem .75rem;
|
||||
|
||||
$accordionHeaderPadding:1.25rem;
|
||||
$accordionContentPadding:.75rem 1.25rem;
|
||||
|
||||
$tabviewHeaderPadding:.75rem 1.25rem;
|
||||
$tabviewContentPadding:.75rem;
|
||||
|
||||
$cardBodyPadding:.75rem;
|
||||
$cardContentPadding:.75rem 0;
|
||||
$cardFooterPadding:.75rem 0 0 0;
|
||||
$paginatorPadding:.375rem .75rem;
|
||||
|
||||
$tableHeaderPadding:.75rem .75rem;
|
||||
$tableHeaderCellPadding:.75rem .75rem;
|
||||
$tableBodyCellPadding:.75rem .75rem;
|
||||
$tableFooterCellPadding:.75rem .75rem;
|
||||
$tableFooterPadding:.75rem .75rem;
|
||||
|
||||
$dataViewContentPadding:.75rem;
|
||||
$treeNodeContentPadding:.25rem;
|
||||
|
||||
$messageMargin:.75rem 0;
|
||||
$messagePadding: 1rem 1.25rem;
|
||||
$messageIconFontSize:1.5rem;
|
||||
$messageCloseIconWidth:2.25rem;
|
||||
$messageCloseIconHeight:2.25rem;
|
||||
$inlineMessagePadding:.75rem .75rem;
|
||||
|
||||
$toastPadding:1.25rem;
|
||||
|
||||
$toastCloseIconWidth:1.5rem;
|
||||
$toastCloseIconHeight:1.5rem;
|
||||
|
||||
$dialogHeaderPadding:1.25rem;
|
||||
$dialogContentPadding:0 1.25rem 1.25rem 1.25rem;
|
||||
$dialogFooterPadding:.75rem 1.25rem;
|
||||
|
||||
$dialogHeaderActionIconWidth:2.25rem;
|
||||
$dialogHeaderActionIconHeight:2.25rem;
|
||||
|
||||
$confirmPopupContentPadding:1.25rem;
|
||||
$confirmPopupFooterPadding:0 1.25rem .75rem 1.25rem;
|
||||
|
||||
$sidebarCloseIconWidth:2.25rem;
|
||||
$sidebarCloseIconHeight:2.25rem;
|
||||
|
||||
$overlayPanelCloseIconWidth:2.25rem;
|
||||
$overlayPanelCloseIconHeight:2.25rem;
|
||||
|
||||
$menuitemPadding:.75rem .75rem;
|
||||
$submenuHeaderPadding:.75rem;
|
||||
|
||||
$breadcrumbPadding:.75rem;
|
||||
|
||||
$horizontalMenuPadding:.75rem;
|
||||
|
||||
$horizontalMenuRootMenuitemPadding:.75rem;
|
||||
|
||||
$menubarButtonWidth:2.25rem;
|
||||
$menubarButtonHeight:2.25rem;
|
||||
|
||||
$carouselNavIconWidth:2.25rem;
|
||||
$carouselNavIconHeight:2.25rem;
|
||||
|
||||
$dividerHorizontalMargin:1rem 0;
|
||||
$dividerHorizontalPadding:0 1rem;
|
||||
$dividerVerticalMargin:0 1rem;
|
||||
$dividerVerticalPadding:1rem 0;
|
||||
|
||||
$scrollTopWidth:2.75rem;
|
||||
$scrollTopHeight:2.75rem;
|
||||
$scrollTopFontSize:1.15rem;
|
||||
55
public/theme/extensions/_accordion.scss
Normal file
55
public/theme/extensions/_accordion.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
.p-accordion {
|
||||
.p-accordion-tab {
|
||||
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
transition: margin-bottom 225ms;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-accordion-toggle-icon {
|
||||
order: 1;
|
||||
margin-left: auto;
|
||||
transition: transform $transitionDuration;
|
||||
}
|
||||
|
||||
&:not(.p-accordion-tab-active) {
|
||||
.p-accordion-header-link {
|
||||
&:focus {
|
||||
background: $accordionHeaderHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-toggle-icon {
|
||||
transform: rotate(-270deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-accordion-tab-active {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.p-accordion-toggle-icon {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.p-accordion-header {
|
||||
&.p-disabled {
|
||||
opacity: 1;
|
||||
|
||||
.p-accordion-header-link > * {
|
||||
opacity: $disabledOpacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
72
public/theme/extensions/_autocomplete.scss
Normal file
72
public/theme/extensions/_autocomplete.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
.p-autocomplete {
|
||||
&.p-autocomplete-multiple {
|
||||
.p-autocomplete-multiple-container {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-autocomplete {
|
||||
&.p-autocomplete-multiple {
|
||||
.p-autocomplete-multiple-container {
|
||||
@include filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label {
|
||||
.p-autocomplete-multiple-container {
|
||||
.p-autocomplete-token {
|
||||
padding: .25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-autocomplete {
|
||||
.p-autocomplete-multiple-container {
|
||||
.p-autocomplete-token {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete.p-invalid {
|
||||
> .p-inputtext {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
|
||||
> .p-autocomplete-multiple-container {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete.p-invalid {
|
||||
> .p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
> .p-autocomplete-multiple-container {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
public/theme/extensions/_breadcrumb.scss
Normal file
10
public/theme/extensions/_breadcrumb.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
.p-breadcrumb {
|
||||
.p-menuitem-link {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
218
public/theme/extensions/_button.scss
Normal file
218
public/theme/extensions/_button.scss
Normal file
@@ -0,0 +1,218 @@
|
||||
.p-button {
|
||||
font-weight: 500;
|
||||
min-width: 4rem;
|
||||
|
||||
&.p-button-icon-only {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background: rgba($buttonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($buttonBg, .68);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba(255,255,255, .32);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($buttonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($buttonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($buttonBg, .16);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $emphasis-lower !important;
|
||||
color: $emphasis-low !important;
|
||||
opacity: 1;
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent !important;
|
||||
color: $emphasis-low !important;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent !important;
|
||||
color: $emphasis-low !important;
|
||||
border-color: $emphasis-low !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-raised:enabled:focus {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($secondaryButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($secondaryButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($secondaryButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($secondaryButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($secondaryButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($infoButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($infoButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($infoButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($infoButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($infoButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($successButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($successButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($successButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($successButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($successButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($warningButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($warningButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($warningButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($warningButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($warningButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($helpButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($helpButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($helpButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($helpButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($helpButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
|
||||
&:enabled:focus {
|
||||
background: rgba($dangerButtonBg, .76);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($dangerButtonBg, .68);
|
||||
}
|
||||
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
&:enabled:focus {
|
||||
background: rgba($dangerButtonBg, .12);
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
background: rgba($dangerButtonBg, .16);
|
||||
}
|
||||
|
||||
.p-ink {
|
||||
background-color: rgba($dangerButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
163
public/theme/extensions/_calendar.scss
Normal file
163
public/theme/extensions/_calendar.scss
Normal file
@@ -0,0 +1,163 @@
|
||||
.p-calendar-w-btn {
|
||||
border: $inputBorder;
|
||||
background: $inputBg;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-inputtext {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border: 0 none;
|
||||
|
||||
&:enabled:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-trigger.p-button {
|
||||
background-color: transparent;
|
||||
border: 0 none;
|
||||
|
||||
span {
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
&:enabled:hover {
|
||||
background: rgba($overlayColor, .04);
|
||||
}
|
||||
|
||||
&:enabled:active,
|
||||
&:focus {
|
||||
background: rgba($overlayColor, .12);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-calendar-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-calendar-disabled).p-inputwrapper-focus {
|
||||
border-color: $inputFocusBorderColor;
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
|
||||
&.p-calendar-disabled {
|
||||
opacity: $disabledOpacity;
|
||||
|
||||
.p-inputtext {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
.p-datepicker-header {
|
||||
border-bottom: 0 none;
|
||||
|
||||
.p-datepicker-title {
|
||||
margin: 0 auto 0 0;
|
||||
order: 1;
|
||||
|
||||
.p-datepicker-year:focus,
|
||||
.p-datepicker-month:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-prev {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-datepicker-next {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.p-datepicker-prev:focus,
|
||||
.p-datepicker-next:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
border-bottom: $calendarHeaderBorder;
|
||||
color: $emphasis-low();
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
> span {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-today {
|
||||
> span {
|
||||
box-shadow: 0 0 0 1px rgba($overlayColor,.38);
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
box-shadow: 0 0 0 1px $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-calendar.p-invalid {
|
||||
.p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-calendar-w-btn {
|
||||
border-color: $inputErrorBorderColor;
|
||||
|
||||
.p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-inputwrapper-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-calendar-w-btn {
|
||||
@include filled-input-wrapper-default();
|
||||
|
||||
&:not(.p-calendar-disabled) {
|
||||
@include filled-input-wrapper-interaction();
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
border: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-calendar.p-invalid {
|
||||
.p-inputtext {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
|
||||
&.p-calendar-w-btn {
|
||||
@include invalid-filled-input-wrapper();
|
||||
|
||||
.p-inputtext {
|
||||
border: 0 none;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/theme/extensions/_carousel.scss
Normal file
13
public/theme/extensions/_carousel.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.p-carousel {
|
||||
.p-carousel-indicators {
|
||||
|
||||
.p-carousel-indicator {
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $accentColor;
|
||||
color: $accentTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
public/theme/extensions/_cascadeselect.scss
Normal file
61
public/theme/extensions/_cascadeselect.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.p-cascadeselect {
|
||||
.p-cascadeselect-label, .p-dropdown-trigger {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
.p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-cascadeselect {
|
||||
@include filled-input-wrapper();
|
||||
|
||||
.p-cascadeselect-label {
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-cascadeselect {
|
||||
.p-cascadeselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-cascadeselect {
|
||||
.p-cascadeselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-invalid {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect.p-invalid {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
86
public/theme/extensions/_checkbox.scss
Normal file
86
public/theme/extensions/_checkbox.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
.p-checkbox {
|
||||
border-radius: 50%;
|
||||
transition: box-shadow $transitionDuration;
|
||||
|
||||
.p-checkbox-box {
|
||||
border-color: nth($checkboxBorder, 3);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: nth($checkboxBorder, 3);
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
border-color: nth($checkboxBorder, 3);
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
&:not(.p-disabled).p-focus {
|
||||
border-color: $checkboxActiveBorderColor;
|
||||
}
|
||||
|
||||
.p-checkbox-icon.pi-check:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 1px;
|
||||
border-right: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 0% 100%;
|
||||
animation: checkbox-check 125ms 50ms linear forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled):hover {
|
||||
box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled).p-checkbox-focused {
|
||||
box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
|
||||
}
|
||||
|
||||
&.p-checkbox-checked {
|
||||
&:not(.p-checkbox-disabled):hover {
|
||||
box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .04);
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled).p-checkbox-focused {
|
||||
box-shadow: 0 0 1px 10px rgba($checkboxActiveBg, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-check{
|
||||
0%{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: $checkboxIconActiveColor;
|
||||
transform: translate3d(0,0,0) rotate(45deg);
|
||||
}
|
||||
33%{
|
||||
width: 4px;
|
||||
height: 0;
|
||||
transform: translate3d(0,0,0) rotate(45deg);
|
||||
}
|
||||
100%{
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
border-color: $checkboxIconActiveColor;
|
||||
transform: translate3d(0,-10px,0) rotate(45deg);
|
||||
}
|
||||
}
|
||||
54
public/theme/extensions/_chips.scss
Normal file
54
public/theme/extensions/_chips.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.p-chips {
|
||||
.p-chips-multiple-container {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-chips-multiple-container {
|
||||
@include filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label {
|
||||
.p-chips-multiple-container {
|
||||
.p-chips-token {
|
||||
padding: .25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-chips {
|
||||
.p-chips-multiple-container {
|
||||
.p-chips-token {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.p-chips-token-icon {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-chips.p-invalid {
|
||||
.p-chips-multiple-container {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-chips.p-invalid .p-chips-multiple-container {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_contextmenu.scss
Normal file
19
public/theme/extensions/_contextmenu.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-contextmenu {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
public/theme/extensions/_datatable.scss
Normal file
33
public/theme/extensions/_datatable.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.p-datatable {
|
||||
.p-sortable-column {
|
||||
outline: 0 none;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($overlayColor, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
outline: 0 none;
|
||||
|
||||
&:not(.p-highlight):focus {
|
||||
background-color: rgba($overlayColor, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable {
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $primaryColor;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $primaryColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
public/theme/extensions/_dropdown.scss
Normal file
40
public/theme/extensions/_dropdown.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.p-dropdown {
|
||||
.p-inputtext, .p-dropdown-trigger {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-item {
|
||||
.p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-dropdown {
|
||||
@include filled-input-wrapper();
|
||||
|
||||
.p-inputtext {
|
||||
border: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown.p-invalid {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown.p-invalid {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
15
public/theme/extensions/_fieldset.scss
Normal file
15
public/theme/extensions/_fieldset.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.p-fieldset {
|
||||
.p-fieldset-legend {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
&.p-fieldset-toggleable {
|
||||
.p-fieldset-legend {
|
||||
a {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
public/theme/extensions/_float_label.scss
Normal file
41
public/theme/extensions/_float_label.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.p-float-label input:focus ~ label,
|
||||
.p-float-label input.p-filled ~ label,
|
||||
.p-float-label textarea:focus ~ label,
|
||||
.p-float-label textarea.p-filled ~ label,
|
||||
.p-float-label .p-inputwrapper-focus ~ label,
|
||||
.p-float-label .p-inputwrapper-filled ~ label {
|
||||
top: -.5rem !important;
|
||||
background-color: $inputBg;
|
||||
padding: 2px 4px;
|
||||
margin-left: -4px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.p-float-label textarea ~ label {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.p-float-label input:focus ~ label,
|
||||
.p-float-label textarea:focus ~ label,
|
||||
.p-float-label .p-inputwrapper-focus ~ label {
|
||||
color: $inputFocusBorderColor;
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-inputtext {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
|
||||
input:focus ~ label,
|
||||
input.p-filled ~ label,
|
||||
textarea:focus ~ label,
|
||||
textarea.p-filled ~ label,
|
||||
.p-inputwrapper-focus ~ label,
|
||||
.p-inputwrapper-filled ~ label {
|
||||
top: .25rem !important;
|
||||
margin-top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
84
public/theme/extensions/_fullcalendar.scss
Normal file
84
public/theme/extensions/_fullcalendar.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.fc {
|
||||
/* FullCalendar 4 */
|
||||
&.fc-unthemed {
|
||||
|
||||
.fc-toolbar {
|
||||
.fc-button {
|
||||
&:focus {
|
||||
background: rgba($buttonBg, .76);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($buttonBg, .68);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button {
|
||||
&:focus {
|
||||
background: rgba($buttonBg, .76);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($buttonBg, .68);
|
||||
}
|
||||
|
||||
&.fc-dayGridMonth-button,
|
||||
&.fc-timeGridWeek-button,
|
||||
&.fc-timeGridDay-button {
|
||||
&:focus {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* FullCalendar 5 */
|
||||
&.fc-theme-standard {
|
||||
.fc-toolbar {
|
||||
.fc-button {
|
||||
&:focus {
|
||||
background: rgba($buttonBg, .76);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($buttonBg, .68);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button {
|
||||
&:focus {
|
||||
background: rgba($buttonBg, .76);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($buttonBg, .68);
|
||||
}
|
||||
|
||||
&.fc-dayGridMonth-button,
|
||||
&.fc-timeGridWeek-button,
|
||||
&.fc-timeGridDay-button {
|
||||
&:focus {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
public/theme/extensions/_galleria.scss
Normal file
27
public/theme/extensions/_galleria.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.p-galleria {
|
||||
.p-galleria-indicators {
|
||||
padding: $galleriaIndicatorsPadding;
|
||||
|
||||
.p-galleria-indicator {
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $accentColor;
|
||||
color: $accentTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-galleria-indicator-onitem {
|
||||
.p-galleria-indicators {
|
||||
.p-galleria-indicator {
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: rgba($accentColor, .68);
|
||||
color: $accentTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
public/theme/extensions/_input.scss
Normal file
15
public/theme/extensions/_input.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
|
||||
&.p-invalid {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-inputtext {
|
||||
@include filled-input();
|
||||
}
|
||||
}
|
||||
32
public/theme/extensions/_inputgroup.scss
Normal file
32
public/theme/extensions/_inputgroup.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.p-input-filled {
|
||||
.p-inputgroup {
|
||||
.p-inputgroup-addon {
|
||||
@include filled-input-default();
|
||||
|
||||
&:last-child {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:first-child,
|
||||
.p-inputgroup button:first-child,
|
||||
.p-inputgroup input:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:first-child input {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:last-child,
|
||||
.p-inputgroup button:last-child,
|
||||
.p-inputgroup input:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:last-child input {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
15
public/theme/extensions/_inputmask.scss
Normal file
15
public/theme/extensions/_inputmask.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
p-inputmask.ng-dirty.ng-invalid {
|
||||
.p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
p-inputmask.ng-dirty.ng-invalid {
|
||||
.p-inputtext {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
15
public/theme/extensions/_inputnumber.scss
Normal file
15
public/theme/extensions/_inputnumber.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.p-inputnumber.p-invalid {
|
||||
.p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-inputnumber.p-invalid {
|
||||
.p-inputtext {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
32
public/theme/extensions/_inputswitch.scss
Normal file
32
public/theme/extensions/_inputswitch.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.p-inputswitch {
|
||||
.p-inputswitch-slider:before {
|
||||
transition-property: box-shadow transform;
|
||||
box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider:before {
|
||||
box-shadow: 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12), 0 0 1px 10px rgba($overlayColor, .04),
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus,
|
||||
&.p-focus:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px rgba($overlayColor, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .04), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked.p-focus,
|
||||
&.p-inputswitch-checked.p-focus:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider:before {
|
||||
box-shadow: 0 0 1px 10px rgba($inputSwitchHandleOnBg, .12), 0px 3px 1px -2px rgba($overlayColor, 0.2), 0px 2px 2px 0px rgba($overlayColor, 0.14), 0px 1px 5px 0px rgba($overlayColor,.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
17
public/theme/extensions/_listbox.scss
Normal file
17
public/theme/extensions/_listbox.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.p-listbox {
|
||||
.p-listbox-list {
|
||||
.p-listbox-item {
|
||||
.p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_megamenu.scss
Normal file
19
public/theme/extensions/_megamenu.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-megamenu {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_menu.scss
Normal file
19
public/theme/extensions/_menu.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-menu {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_menubar.scss
Normal file
19
public/theme/extensions/_menubar.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-menubar {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
113
public/theme/extensions/_mixins.scss
Normal file
113
public/theme/extensions/_mixins.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
@mixin filled-input() {
|
||||
@include filled-input-default();
|
||||
@include filled-input-interaction();
|
||||
}
|
||||
|
||||
@mixin filled-input-wrapper() {
|
||||
@include filled-input-wrapper-default();
|
||||
@include filled-input-wrapper-interaction();
|
||||
}
|
||||
|
||||
@mixin filled-input-default() {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border: 1px solid transparent;
|
||||
background: $inputFilledBg no-repeat;
|
||||
background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, nth($inputBorder, 3), nth($inputBorder, 3));
|
||||
background-size: 0 2px, 100% 1px;
|
||||
background-position: 50% 100%, 50% 100%;
|
||||
background-origin: border-box;
|
||||
}
|
||||
|
||||
@mixin invalid-filled-input() {
|
||||
border-color: transparent;
|
||||
background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
|
||||
|
||||
&:enabled:hover {
|
||||
border-color: transparent;
|
||||
background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filled-input-interaction() {
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
border-color: transparent;
|
||||
background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $inputHoverBorderColor, $inputHoverBorderColor);
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
box-shadow: none;
|
||||
background-color: $inputFilledFocusBg;
|
||||
border-color: transparent;
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filled-input-wrapper-default() {
|
||||
@include filled-input-default();
|
||||
|
||||
.p-inputtext {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin invalid-filled-input-wrapper() {
|
||||
border-color: transparent;
|
||||
background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus,
|
||||
&:not(.p-disabled).p-inputwrapper-focus {
|
||||
box-shadow: none;
|
||||
background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filled-input-wrapper-interaction() {
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
border-color: transparent;
|
||||
background-image: linear-gradient(to bottom, $inputFocusBorderColor, $inputFocusBorderColor), linear-gradient(to bottom, $emphasis-high, $emphasis-high);
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus,
|
||||
&:not(.p-disabled).p-inputwrapper-focus {
|
||||
box-shadow: none;
|
||||
background-color: $inputFilledFocusBg;
|
||||
border-color: transparent;
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
}
|
||||
|
||||
.p-inputtext {
|
||||
&:enabled:hover,
|
||||
&:enabled:focus {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filled-input-float-label() {
|
||||
@if (nth($inputPadding, 1) == 1rem) {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
@else if (nth($inputPadding, 1) == .75rem) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
102
public/theme/extensions/_multiselect.scss
Normal file
102
public/theme/extensions/_multiselect.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.p-multiselect {
|
||||
.p-multiselect-label, .p-multiselect-trigger {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
.p-multiselect-items {
|
||||
.p-multiselect-item {
|
||||
.p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-close {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-multiselect {
|
||||
@include filled-input-wrapper();
|
||||
|
||||
.p-multiselect-label {
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label {
|
||||
.p-multiselect-label {
|
||||
.p-multiselect-token {
|
||||
padding: .25rem 1rem;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-multiselect {
|
||||
.p-multiselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-multiselect {
|
||||
.p-multiselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
|
||||
&.p-multiselect-chip {
|
||||
.p-multiselect-token {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.p-multiselect-token-icon {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect.p-invalid {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect.p-invalid {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
13
public/theme/extensions/_orderlist.scss
Normal file
13
public/theme/extensions/_orderlist.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.p-orderlist {
|
||||
.p-orderlist-list {
|
||||
.p-orderlist-item {
|
||||
&.p-focus {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
public/theme/extensions/_overlaypanel.scss
Normal file
5
public/theme/extensions/_overlaypanel.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.p-overlaypanel {
|
||||
.p-overlaypanel-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
13
public/theme/extensions/_paginator.scss
Normal file
13
public/theme/extensions/_paginator.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.p-paginator {
|
||||
justify-content: flex-end;
|
||||
|
||||
.p-paginator-element {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
public/theme/extensions/_panel.scss
Normal file
24
public/theme/extensions/_panel.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
.p-panel {
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $cardShadow;
|
||||
|
||||
.p-panel-header,
|
||||
.p-panel-content,
|
||||
.p-panel-footer {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-panel-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.p-panel-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.p-panel-header-icon {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
66
public/theme/extensions/_panelmenu.scss
Normal file
66
public/theme/extensions/_panelmenu.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
.p-panelmenu {
|
||||
.p-panelmenu-header {
|
||||
.p-panelmenu-header-content {
|
||||
.p-panelmenu-header-action {
|
||||
.p-submenu-icon {
|
||||
order: 1;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-disabled {
|
||||
opacity: 1;
|
||||
|
||||
.p-panelmenu-header-content > * {
|
||||
opacity: $disabledOpacity;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.p-highlight:focus {
|
||||
.p-panelmenu-header-content {
|
||||
background: $accordionHeaderHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-content {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-panelmenu-panel {
|
||||
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
transition: margin-bottom 225ms;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
public/theme/extensions/_password.scss
Normal file
15
public/theme/extensions/_password.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.p-input-filled {
|
||||
.p-password.p-invalid {
|
||||
> .p-inputtext {
|
||||
@include invalid-filled-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-password.p-invalid {
|
||||
> .p-inputtext {
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/theme/extensions/_picklist.scss
Normal file
13
public/theme/extensions/_picklist.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.p-picklist {
|
||||
.p-picklist-list {
|
||||
.p-picklist-item {
|
||||
&.p-focus {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
public/theme/extensions/_progressbar.scss
Normal file
9
public/theme/extensions/_progressbar.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.p-progressbar {
|
||||
border-radius: 0;
|
||||
|
||||
&.p-progressbar-determinate {
|
||||
.p-progressbar-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
public/theme/extensions/_radiobutton.scss
Normal file
50
public/theme/extensions/_radiobutton.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.p-radiobutton {
|
||||
border-radius: 50%;
|
||||
transition: box-shadow $transitionDuration;
|
||||
|
||||
.p-radiobutton-box {
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
border: $radiobuttonBorder;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
border: $radiobuttonBorder;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
&:not(.p-disabled).p-focus {
|
||||
border-color: $radiobuttonActiveBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-radiobutton-disabled):hover {
|
||||
box-shadow: 0 0 1px 10px rgba($overlayColor, .04);
|
||||
}
|
||||
|
||||
&:not(.p-radiobutton-disabled).p-radiobutton-focused {
|
||||
box-shadow: 0 0 1px 10px rgba($overlayColor, .12);
|
||||
}
|
||||
|
||||
&.p-radiobutton-checked {
|
||||
&:not(.p-radiobutton-disabled):hover {
|
||||
box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .04);
|
||||
}
|
||||
|
||||
&:not(.p-radiobutton-disabled).p-radiobutton-focused {
|
||||
box-shadow: 0 0 1px 10px rgba($radiobuttonActiveBorderColor, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/theme/extensions/_rating.scss
Normal file
30
public/theme/extensions/_rating.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.p-rating {
|
||||
gap: 0;
|
||||
|
||||
.p-rating-item {
|
||||
border-radius: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
justify-content: center;
|
||||
|
||||
&.p-focus {
|
||||
background: rgba($primaryColor, .12);
|
||||
|
||||
&.p-rating-cancel-item {
|
||||
background: rgba($ratingCancelIconColor, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-readonly) {
|
||||
.p-rating-item {
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.04);
|
||||
|
||||
&.p-rating-cancel-item {
|
||||
background: rgba($ratingCancelIconColor, .04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
public/theme/extensions/_scrollpanel.scss
Normal file
7
public/theme/extensions/_scrollpanel.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.p-scrollpanel {
|
||||
.p-scrollpanel-bar {
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px 4px rgba($accentColor, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/theme/extensions/_selectbutton.scss
Normal file
13
public/theme/extensions/_selectbutton.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
.p-selectbutton {
|
||||
.p-button {
|
||||
&:focus {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
public/theme/extensions/_slidemenu.scss
Normal file
7
public/theme/extensions/_slidemenu.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.p-slidemenu {
|
||||
.p-menuitem-link {
|
||||
&:focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
public/theme/extensions/_slider.scss
Normal file
16
public/theme/extensions/_slider.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.p-slider {
|
||||
.p-slider-handle {
|
||||
transition: transform $transitionDuration, box-shadow $transitionDuration;
|
||||
transform: scale(.7);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px 10px rgba($accentColor, .2);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-slider-sliding {
|
||||
.p-slider-handle {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
5
public/theme/extensions/_speeddial.scss
Normal file
5
public/theme/extensions/_speeddial.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.p-speeddial-item {
|
||||
&.p-focus > .p-speeddial-action {
|
||||
background: rgba($speedDialActionHoverBg, .76);
|
||||
}
|
||||
}
|
||||
164
public/theme/extensions/_splitbutton.scss
Normal file
164
public/theme/extensions/_splitbutton.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
.p-splitbutton {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($buttonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($buttonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
|
||||
&:enabled:focus {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
}
|
||||
|
||||
&:enabled:active {
|
||||
box-shadow: inset 0 0 0 1px;
|
||||
}
|
||||
|
||||
&.p-splitbutton-menubutton {
|
||||
margin-left: -1px;
|
||||
width: calc(#{$buttonIconOnlyWidth} + 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-disabled {
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent !important;
|
||||
color: $emphasis-low !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent !important;
|
||||
color: $emphasis-low !important;
|
||||
border-color: $emphasis-low !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-secondary {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($secondaryButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($secondaryButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-info > .p-button {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($infoButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($infoButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-success {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($successButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($successButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-warning {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($warningButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($warningButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-help {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($helpButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($helpButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-danger {
|
||||
&.p-button-text,
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
@include button-states {
|
||||
&:focus {
|
||||
background: rgba($dangerButtonBg, .12);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($dangerButtonBg, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
public/theme/extensions/_splitter.scss
Normal file
18
public/theme/extensions/_splitter.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.p-splitter {
|
||||
.p-splitter-gutter {
|
||||
.p-splitter-gutter-handle {
|
||||
transition: transform $transitionDuration, box-shadow $transitionDuration;
|
||||
transform: scale(.7);
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 1px 6px rgba($accentColor, .2);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-splitter-gutter-resizing {
|
||||
.p-splitter-gutter-handle {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
65
public/theme/extensions/_steps.scss
Normal file
65
public/theme/extensions/_steps.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
.p-steps {
|
||||
padding: 1rem 0;
|
||||
|
||||
.p-steps-item {
|
||||
justify-content: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
position: static;
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-menuitem-link {
|
||||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
overflow: visible;
|
||||
padding: 1rem $inlineSpacing;
|
||||
|
||||
.p-steps-number {
|
||||
background-color: #9e9d9e;
|
||||
color: #ffffff;
|
||||
font-size: 0.857rem;
|
||||
min-width: 1.714rem;
|
||||
height: 1.714rem;
|
||||
line-height: 1.714rem;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
margin: 0;
|
||||
padding-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):focus {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-steps-number {
|
||||
background-color: $primaryColor;
|
||||
color: $primaryTextColor;
|
||||
}
|
||||
|
||||
.p-steps-title {
|
||||
font-weight: 600;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
public/theme/extensions/_tabmenu.scss
Normal file
37
public/theme/extensions/_tabmenu.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.p-tabmenu {
|
||||
.p-tabmenu-nav {
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
.p-menuitem-link {
|
||||
transition: background-color $transitionDuration;
|
||||
border-radius: 0;
|
||||
|
||||
> .p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($primaryColor, .12);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
.p-menuitem-link {
|
||||
&:focus {
|
||||
background-color: rgba($primaryColor, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabmenu-ink-bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: $primaryColor;
|
||||
transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/theme/extensions/_tabview.scss
Normal file
30
public/theme/extensions/_tabview.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.p-tabview {
|
||||
.p-tabview-nav {
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
.p-tabview-nav-link {
|
||||
transition: background-color $transitionDuration;
|
||||
border-radius: 0;
|
||||
|
||||
> .p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($primaryColor, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-ink-bar {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: $primaryColor;
|
||||
transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_tieredmenu.scss
Normal file
19
public/theme/extensions/_tieredmenu.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-tieredmenu {
|
||||
.p-menuitem {
|
||||
&.p-highlight {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled) {
|
||||
&.p-focus {
|
||||
> .p-menuitem-content {
|
||||
background: $emphasis-lower;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
public/theme/extensions/_timeline.scss
Normal file
9
public/theme/extensions/_timeline.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.p-timeline {
|
||||
&.p-timeline-vertical .p-timeline-event-connector {
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
&.p-timeline-horizontal .p-timeline-event-connector {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
11
public/theme/extensions/_togglebutton.scss
Normal file
11
public/theme/extensions/_togglebutton.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.p-togglebutton.p-button {
|
||||
&:not(.p-disabled).p-focus {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
public/theme/extensions/_toolbar.scss
Normal file
3
public/theme/extensions/_toolbar.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.p-toolbar {
|
||||
border: 0 none;
|
||||
}
|
||||
10
public/theme/extensions/_tooltip.scss
Normal file
10
public/theme/extensions/_tooltip.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
.p-tooltip {
|
||||
.p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.p-tooltip-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
15
public/theme/extensions/_tree.scss
Normal file
15
public/theme/extensions/_tree.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.p-tree {
|
||||
.p-tree-container {
|
||||
.p-treenode {
|
||||
outline: 0 none;
|
||||
|
||||
&:focus > .p-treenode-content {
|
||||
background: $emphasis-lower;
|
||||
|
||||
&.p-highlight {
|
||||
background: rgba($primaryColor, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
84
public/theme/extensions/_treeselect.scss
Normal file
84
public/theme/extensions/_treeselect.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.p-treeselect {
|
||||
.p-treeselect-label, .p-treeselect-trigger {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor,inset 0 0 0 1px $inputFocusBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-item {
|
||||
.p-ink {
|
||||
background-color: rgba($primaryColor, .16);
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-treeselect {
|
||||
@include filled-input-wrapper();
|
||||
|
||||
.p-treeselect-label {
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label {
|
||||
.p-treeselect-label {
|
||||
.p-treeselect-token {
|
||||
padding: .25rem 1rem;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-float-label {
|
||||
.p-treeselect {
|
||||
.p-treeselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-treeselect {
|
||||
.p-treeselect-label {
|
||||
@include filled-input-float-label();
|
||||
}
|
||||
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-token {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.p-treeselect-token-icon {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect.p-invalid {
|
||||
@include invalid-filled-input-wrapper();
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect.p-invalid {
|
||||
&:not(.p-disabled).p-focus {
|
||||
box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
|
||||
}
|
||||
}
|
||||
19
public/theme/extensions/_treetable.scss
Normal file
19
public/theme/extensions/_treetable.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.p-treetable {
|
||||
.p-sortable-column {
|
||||
outline: 0 none;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($overlayColor, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.p-treetable-tbody {
|
||||
> tr {
|
||||
outline: 0 none;
|
||||
|
||||
&:not(.p-highlight):focus {
|
||||
background-color: rgba($overlayColor, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
public/theme/extensions/_vendor_extensions.scss
Normal file
52
public/theme/extensions/_vendor_extensions.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
@import './_mixins';
|
||||
@import './_accordion';
|
||||
@import './_autocomplete';
|
||||
@import './_breadcrumb';
|
||||
@import './_button';
|
||||
@import './_calendar';
|
||||
@import './_carousel';
|
||||
@import './_cascadeselect';
|
||||
@import './_checkbox';
|
||||
@import './_chips';
|
||||
@import './_contextmenu';
|
||||
@import './_datatable';
|
||||
@import './_dropdown';
|
||||
@import './_fullcalendar';
|
||||
@import './_galleria';
|
||||
@import './_input';
|
||||
@import './_inputgroup';
|
||||
@import './_inputnumber';
|
||||
@import './_inputswitch';
|
||||
@import './_fieldset';
|
||||
@import './_float_label';
|
||||
@import './_listbox';
|
||||
@import './_megamenu';
|
||||
@import './_menu';
|
||||
@import './_menubar';
|
||||
@import './_multiselect';
|
||||
@import './_orderlist';
|
||||
@import './_overlaypanel';
|
||||
@import './_paginator';
|
||||
@import './_password';
|
||||
@import './_panel';
|
||||
@import './_panelmenu';
|
||||
@import './_picklist';
|
||||
@import './_progressbar';
|
||||
@import './_rating';
|
||||
@import './_radiobutton';
|
||||
@import './_scrollpanel';
|
||||
@import './_selectbutton';
|
||||
@import './_slider';
|
||||
@import './_speeddial';
|
||||
@import './_splitbutton';
|
||||
@import './_splitter';
|
||||
@import './_steps';
|
||||
@import './_tabview';
|
||||
@import './_tieredmenu';
|
||||
@import './_toolbar';
|
||||
@import './_tooltip';
|
||||
@import './_tree';
|
||||
@import './_treeselect';
|
||||
@import './_treetable';
|
||||
@import './_tabmenu';
|
||||
@import './_togglebutton';
|
||||
18
public/theme/theme-base/_colors.scss
Normal file
18
public/theme/theme-base/_colors.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
:root {
|
||||
@if variable-exists(colors) {
|
||||
@each $name, $color in $colors {
|
||||
@for $i from 0 through 5 {
|
||||
@if ($i == 0) {
|
||||
--#{$name}-50:#{tint($color, (5 - $i) * 19%)};
|
||||
}
|
||||
@else {
|
||||
--#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
--#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
75
public/theme/theme-base/_common.scss
Normal file
75
public/theme/theme-base/_common.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.p-component {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $fontSize;
|
||||
font-weight: $fontWeight;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
background-color: $maskBg;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-disabled, .p-component:disabled {
|
||||
opacity: $disabledOpacity;
|
||||
}
|
||||
|
||||
.p-error {
|
||||
color: $errorColor;
|
||||
}
|
||||
|
||||
.p-text-secondary {
|
||||
color: $textSecondaryColor;
|
||||
}
|
||||
|
||||
.pi {
|
||||
font-size: $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-icon {
|
||||
width: $primeIconFontSize;
|
||||
height: $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-link {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $fontSize;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-component-overlay-enter {
|
||||
animation: p-component-overlay-enter-animation 150ms forwards;
|
||||
}
|
||||
|
||||
.p-component-overlay-leave {
|
||||
animation: p-component-overlay-leave-animation 150ms forwards;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
@keyframes p-component-overlay-enter-animation {
|
||||
from {
|
||||
background-color: transparent;
|
||||
}
|
||||
to {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-component-overlay-leave-animation {
|
||||
from {
|
||||
background-color: var(--maskbg);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
105
public/theme/theme-base/_components.scss
Normal file
105
public/theme/theme-base/_components.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@import '_mixins';
|
||||
@import '_colors';
|
||||
|
||||
@import './components/input/_editor';
|
||||
|
||||
@layer primereact {
|
||||
@import '_common';
|
||||
|
||||
//Input
|
||||
@import './components/input/_autocomplete';
|
||||
@import './components/input/_calendar';
|
||||
@import './components/input/_cascadeselect';
|
||||
@import './components/input/_checkbox';
|
||||
@import './components/input/_chips';
|
||||
@import './components/input/_colorpicker';
|
||||
@import './components/input/_dropdown';
|
||||
@import './components/input/_inputgroup';
|
||||
@import './components/input/_inputnumber';
|
||||
@import './components/input/_inputswitch';
|
||||
@import './components/input/_inputtext';
|
||||
@import './components/input/_listbox';
|
||||
@import './components/input/_mention';
|
||||
@import './components/input/_multiselect';
|
||||
@import './components/input/_password';
|
||||
@import './components/input/_radiobutton';
|
||||
@import './components/input/_rating';
|
||||
@import './components/input/_selectbutton';
|
||||
@import './components/input/_slider';
|
||||
@import './components/input/_treeselect';
|
||||
@import './components/input/_togglebutton';
|
||||
|
||||
//Button
|
||||
@import './components/button/_button';
|
||||
@import './components/button/_splitbutton';
|
||||
@import './components/button/_speeddial';
|
||||
|
||||
//Data
|
||||
@import './components/data/_carousel';
|
||||
@import './components/data/_datatable';
|
||||
@import './components/data/_dataview';
|
||||
@import './components/data/_datascroller';
|
||||
@import './components/data/_filter';
|
||||
@import './components/data/_orderlist';
|
||||
@import './components/data/_organizationchart';
|
||||
@import './components/data/_paginator';
|
||||
@import './components/data/_picklist';
|
||||
@import './components/data/_tree';
|
||||
@import './components/data/_treetable';
|
||||
@import './components/data/_timeline';
|
||||
|
||||
//Panel
|
||||
@import './components/panel/_accordion';
|
||||
@import './components/panel/_card';
|
||||
@import './components/panel/_fieldset';
|
||||
@import './components/panel/_divider';
|
||||
@import './components/panel/_panel';
|
||||
@import './components/panel/_splitter';
|
||||
@import './components/panel/_scrollpanel';
|
||||
@import './components/panel/_tabview';
|
||||
@import './components/panel/_toolbar';
|
||||
|
||||
//Overlay
|
||||
@import './components/overlay/_confirmpopup';
|
||||
@import './components/overlay/_dialog';
|
||||
@import './components/overlay/_overlaypanel';
|
||||
@import './components/overlay/_sidebar';
|
||||
@import './components/overlay/_tooltip';
|
||||
|
||||
//File
|
||||
@import './components/file/_fileupload';
|
||||
|
||||
//Menu
|
||||
@import './components/menu/_breadcrumb';
|
||||
@import './components/menu/_contextmenu';
|
||||
@import './components/menu/_dock';
|
||||
@import './components/menu/_megamenu';
|
||||
@import './components/menu/_menu';
|
||||
@import './components/menu/_menubar';
|
||||
@import './components/menu/_panelmenu';
|
||||
@import './components/menu/_slidemenu';
|
||||
@import './components/menu/_steps';
|
||||
@import './components/menu/_tabmenu';
|
||||
@import './components/menu/_tieredmenu';
|
||||
|
||||
//Messages
|
||||
@import './components/messages/_inlinemessage';
|
||||
@import './components/messages/_message';
|
||||
@import 'components/messages/toast';
|
||||
|
||||
//MultiMedia
|
||||
@import './components/multimedia/_galleria';
|
||||
@import './components/multimedia/_image';
|
||||
|
||||
//Misc
|
||||
@import './components/misc/_avatar';
|
||||
@import './components/misc/_chip';
|
||||
@import './components/misc/_scrolltop';
|
||||
@import './components/misc/_skeleton';
|
||||
@import './components/misc/_tag';
|
||||
@import './components/misc/_inplace';
|
||||
@import './components/misc/_progressbar';
|
||||
@import './components/misc/_terminal';
|
||||
@import './components/misc/_blockui';
|
||||
@import './components/misc/_badge';
|
||||
}
|
||||
190
public/theme/theme-base/_mixins.scss
Normal file
190
public/theme/theme-base/_mixins.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
@mixin icon-override($icon) {
|
||||
&:before {
|
||||
content: $icon;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focused() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: $focusShadow;
|
||||
}
|
||||
|
||||
@mixin focused-inset() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: inset $focusShadow;
|
||||
}
|
||||
|
||||
@mixin focused-input() {
|
||||
@include focused();
|
||||
border-color: $inputFocusBorderColor;
|
||||
}
|
||||
|
||||
@mixin focused-listitem() {
|
||||
outline: $focusOutline;
|
||||
outline-offset: $focusOutlineOffset;
|
||||
box-shadow: $inputListItemFocusShadow;
|
||||
}
|
||||
|
||||
@mixin invalid-input() {
|
||||
border-color: $inputErrorBorderColor;
|
||||
}
|
||||
|
||||
@mixin menuitem-link {
|
||||
padding: $menuitemPadding;
|
||||
color: $menuitemTextColor;
|
||||
border-radius: $menuitemBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
user-select: none;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $menuitemIconColor;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $menuitemIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $menuitemHoverBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $menuitemTextHoverColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $menuitemIconHoverColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $menuitemIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin horizontal-rootmenuitem-link {
|
||||
padding: $horizontalMenuRootMenuitemPadding;
|
||||
color: $horizontalMenuRootMenuitemTextColor;
|
||||
border-radius: $horizontalMenuRootMenuitemBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
user-select: none;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconColor;
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $horizontalMenuRootMenuitemHoverBg;
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $horizontalMenuRootMenuitemTextHoverColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
}
|
||||
|
||||
.p-submenu-icon {
|
||||
color: $horizontalMenuRootMenuitemIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
::-webkit-input-placeholder {
|
||||
@content
|
||||
}
|
||||
:-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
::-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scaledPadding($val, $scale) {
|
||||
padding: nth($val, 1) * $scale nth($val, 2) * $scale;
|
||||
}
|
||||
|
||||
@mixin scaledFontSize($val, $scale) {
|
||||
font-size: $val * $scale;
|
||||
}
|
||||
|
||||
@mixin nested-submenu-indents($val, $index, $length) {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
padding-left: $val * ($index + 1);
|
||||
}
|
||||
|
||||
@if $index < $length {
|
||||
@include nested-submenu-indents($val, $index + 2, $length);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin action-icon($enabled: true) {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
|
||||
@if $enabled {
|
||||
&:enabled:hover {
|
||||
@include action-icon-hover();
|
||||
}
|
||||
} @else {
|
||||
&:hover {
|
||||
@include action-icon-hover();
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin action-icon-hover() {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(#fff, $color, $percentage);
|
||||
}
|
||||
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(#000, $color, $percentage);
|
||||
}
|
||||
584
public/theme/theme-base/components/button/_button.scss
Normal file
584
public/theme/theme-base/components/button/_button.scss
Normal file
@@ -0,0 +1,584 @@
|
||||
.p-button {
|
||||
color: $buttonTextColor;
|
||||
background: $buttonBg;
|
||||
border: $buttonBorder;
|
||||
padding: $buttonPadding;
|
||||
font-size: $fontSize;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $buttonHoverBg;
|
||||
color: $buttonTextHoverColor;
|
||||
border-color: $buttonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $buttonActiveBg;
|
||||
color: $buttonTextActiveColor;
|
||||
border-color: $buttonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
color: $plainButtonTextColor;
|
||||
border-color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-button-icon-left {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-button-icon-top {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-badge {
|
||||
margin-left: $inlineSpacing;
|
||||
min-width: $fontSize;
|
||||
height: $fontSize;
|
||||
line-height: $fontSize;
|
||||
color: $buttonBg;
|
||||
background-color: $buttonTextColor;
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
}
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
padding: $buttonIconOnlyPadding;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: 50%;
|
||||
height: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-sm {
|
||||
@include scaledFontSize($fontSize, $scaleSM);
|
||||
@include scaledPadding($buttonPadding, $scaleSM);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-lg {
|
||||
@include scaledFontSize($fontSize, $scaleLG);
|
||||
@include scaledPadding($buttonPadding, $scaleLG);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-label-only {
|
||||
&.p-button-loading-left {
|
||||
.p-button-label {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-right {
|
||||
.p-button-label {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-top {
|
||||
.p-button-label {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-loading-bottom {
|
||||
.p-button-label {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-button-loading-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-fluid {
|
||||
.p-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
|
||||
.p-buttonset {
|
||||
display: flex;
|
||||
|
||||
.p-button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
|
||||
color: $secondaryButtonTextColor;
|
||||
background: $secondaryButtonBg;
|
||||
border: $secondaryButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $secondaryButtonHoverBg;
|
||||
color: $secondaryButtonTextHoverColor;
|
||||
border-color: $secondaryButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $secondaryButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $secondaryButtonActiveBg;
|
||||
color: $secondaryButtonTextActiveColor;
|
||||
border-color: $secondaryButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
|
||||
color: $infoButtonTextColor;
|
||||
background: $infoButtonBg;
|
||||
border: $infoButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $infoButtonHoverBg;
|
||||
color: $infoButtonTextHoverColor;
|
||||
border-color: $infoButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $infoButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $infoButtonActiveBg;
|
||||
color: $infoButtonTextActiveColor;
|
||||
border-color: $infoButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
|
||||
color: $successButtonTextColor;
|
||||
background: $successButtonBg;
|
||||
border: $successButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $successButtonHoverBg;
|
||||
color: $successButtonTextHoverColor;
|
||||
border-color: $successButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $successButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $successButtonActiveBg;
|
||||
color: $successButtonTextActiveColor;
|
||||
border-color: $successButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
|
||||
color: $warningButtonTextColor;
|
||||
background: $warningButtonBg;
|
||||
border: $warningButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $warningButtonHoverBg;
|
||||
color: $warningButtonTextHoverColor;
|
||||
border-color: $warningButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $warningButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $warningButtonActiveBg;
|
||||
color: $warningButtonTextActiveColor;
|
||||
border-color: $warningButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
|
||||
color: $helpButtonTextColor;
|
||||
background: $helpButtonBg;
|
||||
border: $helpButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $helpButtonHoverBg;
|
||||
color: $helpButtonTextHoverColor;
|
||||
border-color: $helpButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $helpButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $helpButtonActiveBg;
|
||||
color: $helpButtonTextActiveColor;
|
||||
border-color: $helpButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
|
||||
color: $dangerButtonTextColor;
|
||||
background: $dangerButtonBg;
|
||||
border: $dangerButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $dangerButtonHoverBg;
|
||||
color: $dangerButtonTextHoverColor;
|
||||
border-color: $dangerButtonHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
box-shadow: $dangerButtonFocusShadow;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $dangerButtonActiveBg;
|
||||
color: $dangerButtonTextActiveColor;
|
||||
border-color: $dangerButtonActiveBorderColor;
|
||||
}
|
||||
|
||||
&.p-button-outlined {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-button.p-button-link {
|
||||
color: $linkButtonColor;
|
||||
background: transparent;
|
||||
border: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: transparent;
|
||||
color: $linkButtonHoverColor;
|
||||
border-color: transparent;
|
||||
|
||||
.p-button-label {
|
||||
text-decoration: $linkButtonTextHoverDecoration;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):focus {
|
||||
background: transparent;
|
||||
box-shadow: $linkButtonFocusShadow;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: transparent;
|
||||
color: $linkButtonColor;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
87
public/theme/theme-base/components/button/_speeddial.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-speeddial-button {
|
||||
&.p-button.p-button-icon-only {
|
||||
width: $speedDialButtonWidth;
|
||||
height: $speedDialButtonHeight;
|
||||
|
||||
.p-button-icon {
|
||||
font-size: $speedDialButtonIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $speedDialButtonIconFontSize;
|
||||
height: $speedDialButtonIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-action {
|
||||
width: $speedDialActionWidth;
|
||||
height: $speedDialActionHeight;
|
||||
background: $speedDialActionBg;
|
||||
color: $speedDialActionTextColor;
|
||||
|
||||
&:hover {
|
||||
background: $speedDialActionHoverBg;
|
||||
color: $speedDialActionTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-up {
|
||||
.p-speeddial-item {
|
||||
margin: math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-down {
|
||||
.p-speeddial-item {
|
||||
margin: math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-left {
|
||||
.p-speeddial-item {
|
||||
margin: 0 math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-direction-right {
|
||||
.p-speeddial-item {
|
||||
margin: 0 math.div($inlineSpacing, 2);
|
||||
|
||||
&:first-child {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-circle,
|
||||
.p-speeddial-semi-circle,
|
||||
.p-speeddial-quarter-circle {
|
||||
.p-speeddial-item {
|
||||
margin: 0;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-speeddial-mask {
|
||||
background-color: $maskBg;
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
359
public/theme/theme-base/components/button/_splitbutton.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
.p-splitbutton {
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
border-color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($buttonBg, $textButtonHoverBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($buttonBg, $textButtonActiveBgOpacity);
|
||||
color: $buttonBg;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-plain {
|
||||
> .p-button {
|
||||
color: $plainButtonTextColor;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: $plainButtonHoverBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: $plainButtonActiveBgColor;
|
||||
color: $plainButtonTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-raised {
|
||||
box-shadow: $raisedButtonShadow;
|
||||
}
|
||||
|
||||
&.p-button-rounded {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
|
||||
> .p-button {
|
||||
border-radius: $roundedButtonBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-sm {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleSM);
|
||||
@include scaledPadding($buttonPadding, $scaleSM);
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleSM);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-lg {
|
||||
> .p-button {
|
||||
@include scaledFontSize($fontSize, $scaleLG);
|
||||
@include scaledPadding($buttonPadding, $scaleLG);
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-button-icon {
|
||||
@include scaledFontSize($primeIconFontSize, $scaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton-menubutton,
|
||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-secondary {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $secondaryButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-info {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $infoButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-success {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $successButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($successButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($successButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $successButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-warning {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $warningButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-help {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $helpButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-splitbutton.p-button-danger {
|
||||
&.p-button-outlined {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border: $outlinedButtonBorder;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-button-text {
|
||||
> .p-button {
|
||||
background-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
border-color: transparent;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
|
||||
border-color: transparent;
|
||||
color: $dangerButtonBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
41
public/theme/theme-base/components/file/_fileupload.scss
Normal file
41
public/theme/theme-base/components/file/_fileupload.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.p-fileupload {
|
||||
.p-fileupload-buttonbar {
|
||||
background: $panelHeaderBg;
|
||||
padding: $panelHeaderPadding;
|
||||
border: $panelHeaderBorder;
|
||||
color: $panelHeaderTextColor;
|
||||
border-bottom: 0 none;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-button {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-fileupload-content {
|
||||
background: $panelContentBg;
|
||||
padding: $fileUploadContentPadding;
|
||||
border: $panelContentBorder;
|
||||
color: $panelContentTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-progressbar {
|
||||
height: $fileUploadProgressBarHeight;
|
||||
}
|
||||
|
||||
.p-fileupload-row {
|
||||
> div {
|
||||
padding: $tableBodyCellPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-fileupload-advanced {
|
||||
.p-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
95
public/theme/theme-base/components/input/_autocomplete.scss
Normal file
95
public/theme/theme-base/components/input/_autocomplete.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-autocomplete {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2);
|
||||
}
|
||||
|
||||
&.p-autocomplete-dd {
|
||||
.p-autocomplete-loader {
|
||||
right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-autocomplete-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-autocomplete-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-autocomplete-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
246
public/theme/theme-base/components/input/_calendar.scss
Normal file
246
public/theme/theme-base/components/input/_calendar.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
.p-calendar {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
padding: $calendarPadding;
|
||||
background: $calendarInlineBg;
|
||||
color: $calendarTextColor;
|
||||
border: $calendarBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-datepicker-inline) {
|
||||
background: $calendarBg;
|
||||
border: $calendarOverlayBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-datepicker-header {
|
||||
background: $calendarHeaderBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-header {
|
||||
padding: $calendarHeaderPadding;
|
||||
color: $calendarHeaderTextColor;
|
||||
background: $calendarInlineHeaderBg;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-bottom: $calendarHeaderBorder;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-datepicker-title {
|
||||
line-height: $actionIconHeight;
|
||||
|
||||
.p-datepicker-year,
|
||||
.p-datepicker-month {
|
||||
color: $calendarHeaderTextColor;
|
||||
transition: $actionIconTransition;
|
||||
font-weight: $calendarHeaderFontWeight;
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
&:enabled:hover {
|
||||
color: $calendarMonthYearHeaderHoverTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-month {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: $fontSize;
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
th {
|
||||
padding: $calendarHeaderCellPadding;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $calendarCellDatePadding;
|
||||
|
||||
> span {
|
||||
width: $calendarCellDateWidth;
|
||||
height: $calendarCellDateHeight;
|
||||
border-radius: $calendarCellDateBorderRadius;
|
||||
transition: $listItemTransition;
|
||||
border: $calendarCellDateBorder;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-today {
|
||||
> span {
|
||||
background: $calendarCellDateTodayBg;
|
||||
color: $calendarCellDateTodayTextColor;
|
||||
border-color: $calendarCellDateTodayBorderColor;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datepicker-buttonbar {
|
||||
padding: $calendarButtonBarPadding;
|
||||
border-top: $divider;
|
||||
|
||||
.p-button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timepicker {
|
||||
border-top: $divider;
|
||||
padding: $calendarTimePickerPadding;
|
||||
|
||||
button {
|
||||
@include action-icon();
|
||||
|
||||
&:last-child {
|
||||
margin-top: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $calendarTimePickerTimeFontSize;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: $calendarTimePickerElementPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-timeonly {
|
||||
.p-timepicker {
|
||||
border-top: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-monthpicker {
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
.p-monthpicker-month {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
margin: $calendarTableMargin;
|
||||
|
||||
.p-yearpicker-year {
|
||||
padding: $calendarCellDatePadding;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datepicker-multiple-month {
|
||||
.p-datepicker-group {
|
||||
border-left: $divider;
|
||||
padding-right: $calendarPadding;
|
||||
padding-left: $calendarPadding;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
border-left: 0 none; }
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
table {
|
||||
td {
|
||||
span:not(.p-highlight):not(.p-disabled) {
|
||||
&:hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-monthpicker {
|
||||
.p-monthpicker-month {
|
||||
&:not(.p-disabled) {
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-yearpicker {
|
||||
.p-yearpicker-year {
|
||||
&:not(.p-disabled) {
|
||||
&:not(.p-highlight):hover {
|
||||
background: $calendarCellDateHoverBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: $calendarBreakpoint) {
|
||||
.p-datepicker {
|
||||
table {
|
||||
th, td {
|
||||
padding: $calendarCellDatePaddingSM;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
103
public/theme/theme-base/components/input/_cascadeselect.scss
Normal file
103
public/theme/theme-base/components/input/_cascadeselect.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
.p-cascadeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
padding: $inputPadding;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-cascadeselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-cascadeselect-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-cascadeselect-item {
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
padding: $inputListItemPadding;
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
font-size: $menuitemSubmenuIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $menuitemSubmenuIconFontSize;
|
||||
height: $menuitemSubmenuIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-cascadeselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
public/theme/theme-base/components/input/_checkbox.scss
Normal file
92
public/theme/theme-base/components/input/_checkbox.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
.p-checkbox {
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
|
||||
.p-checkbox-box {
|
||||
border: $checkboxBorder;
|
||||
background: $inputBg;
|
||||
width: $checkboxWidth;
|
||||
height: $checkboxHeight;
|
||||
color: $textColor;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-checkbox-icon {
|
||||
transition-duration: $transitionDuration;
|
||||
color: $checkboxIconActiveColor;
|
||||
font-size: $checkboxIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $checkboxIconFontSize;
|
||||
height: $checkboxIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
border-color: $checkboxActiveBorderColor;
|
||||
background: $checkboxActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled) {
|
||||
.p-checkbox-box {
|
||||
&:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-highlight:hover {
|
||||
border-color: $checkboxActiveHoverBorderColor;
|
||||
background: $checkboxActiveHoverBg;
|
||||
color: $checkboxIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-checkbox-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&.p-highlight {
|
||||
background: $checkboxActiveBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-checkbox-disabled) {
|
||||
.p-checkbox-box {
|
||||
&:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight:hover {
|
||||
background: $checkboxActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $checkboxActiveBg) {
|
||||
.p-highlight {
|
||||
.p-checkbox {
|
||||
.p-checkbox-box {
|
||||
border-color: $checkboxIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
public/theme/theme-base/components/input/_chips.scss
Normal file
45
public/theme/theme-base/components/input/_chips.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-chips {
|
||||
.p-chips-multiple-container {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
gap: $inlineSpacing;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $highlightBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-chips-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) 0;
|
||||
|
||||
input {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $textColor;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
18
public/theme/theme-base/components/input/_colorpicker.scss
Normal file
18
public/theme/theme-base/components/input/_colorpicker.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.p-colorpicker-preview {
|
||||
width: $colorPickerPreviewWidth;
|
||||
height: $colorPickerPreviewHeight;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel {
|
||||
background: $colorPickerBg;
|
||||
border: $colorPickerBorder;
|
||||
|
||||
.p-colorpicker-color-handle,
|
||||
.p-colorpicker-hue-handle {
|
||||
border-color: $colorPickerHandleColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-colorpicker-overlay-panel {
|
||||
box-shadow: $inputOverlayShadow;
|
||||
}
|
||||
146
public/theme/theme-base/components/input/_dropdown.scss
Normal file
146
public/theme/theme-base/components/input/_dropdown.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.p-dropdown {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-dropdown-clearable {
|
||||
.p-dropdown-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-label {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
outline: 0 none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-dropdown-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-dropdown-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-dropdown-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-dropdown-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-dropdown-clearable-filter {
|
||||
.p-dropdown-filter {
|
||||
padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
margin-right: -2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-dropdown-filter-clear-icon {
|
||||
right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-dropdown-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;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-dropdown-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-dropdown {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
|
||||
.p-inputtext {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
122
public/theme/theme-base/components/input/_editor.scss
Normal file
122
public/theme/theme-base/components/input/_editor.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
.p-editor-container {
|
||||
.p-editor-toolbar {
|
||||
background: $editorToolbarBg;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorToolbarBorder;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconColor;
|
||||
}
|
||||
|
||||
.ql-picker {
|
||||
.ql-picker-label {
|
||||
border: 0 none;
|
||||
color: $editorToolbarIconColor;
|
||||
|
||||
&:hover {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ql-expanded {
|
||||
.ql-picker-label {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-picker-options {
|
||||
background: $inputOverlayBg;
|
||||
border:$inputOverlayBorder;
|
||||
box-shadow:$inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
padding: $inputListPadding;
|
||||
|
||||
.ql-picker-item {
|
||||
color: $inputListItemTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.ql-icon-picker) {
|
||||
.ql-picker-item {
|
||||
padding: $inputListItemPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-editor-content {
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
|
||||
&.ql-snow {
|
||||
border: $editorContentBorder;
|
||||
}
|
||||
|
||||
.ql-editor {
|
||||
background: $inputBg;
|
||||
color: $inputTextColor;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button:hover,
|
||||
.ql-snow.ql-toolbar button:focus {
|
||||
color: $editorToolbarIconHoverColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorToolbarIconHoverColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorToolbarIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ql-snow.ql-toolbar button.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
|
||||
.ql-snow.ql-toolbar .ql-picker-item.ql-selected {
|
||||
color: $editorIconActiveColor;
|
||||
|
||||
.ql-stroke {
|
||||
stroke: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-fill {
|
||||
fill: $editorIconActiveColor;
|
||||
}
|
||||
|
||||
.ql-picker-label {
|
||||
color: $editorIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
public/theme/theme-base/components/input/_inputgroup.scss
Normal file
74
public/theme/theme-base/components/input/_inputgroup.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.p-inputgroup-addon {
|
||||
background: $inputGroupBg;
|
||||
color: $inputGroupTextColor;
|
||||
border-top: $inputBorder;
|
||||
border-left: $inputBorder;
|
||||
border-bottom: $inputBorder;
|
||||
padding: $inputPadding;
|
||||
min-width: $inputGroupAddOnMinWidth;
|
||||
|
||||
&:last-child {
|
||||
border-right: $inputBorder;
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup {
|
||||
> .p-component,
|
||||
> .p-inputwrapper > .p-inputtext,
|
||||
> .p-float-label > .p-component {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
+ .p-inputgroup-addon {
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
|
||||
~ label {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:first-child,
|
||||
.p-inputgroup button:first-child,
|
||||
.p-inputgroup input:first-child,
|
||||
.p-inputgroup > .p-inputwrapper:first-child,
|
||||
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:first-child input {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup-addon:last-child,
|
||||
.p-inputgroup button:last-child,
|
||||
.p-inputgroup input:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child,
|
||||
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-inputgroup .p-float-label:last-child input {
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-fluid {
|
||||
.p-inputgroup {
|
||||
.p-button {
|
||||
width: auto;
|
||||
|
||||
&.p-button-icon-only {
|
||||
width: $buttonIconOnlyWidth;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.p-inputnumber {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
62
public/theme/theme-base/components/input/_inputswitch.scss
Normal file
62
public/theme/theme-base/components/input/_inputswitch.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-inputswitch {
|
||||
width: $inputSwitchWidth;
|
||||
height: $inputSwitchHeight;
|
||||
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffBg;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $inputSwitchBorderRadius;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOffBg;
|
||||
width: $inputSwitchHandleWidth;
|
||||
height: $inputSwitchHandleHeight;
|
||||
left: $inputSwitchSliderPadding;
|
||||
margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
|
||||
border-radius: $inputSwitchHandleBorderRadius;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider:before {
|
||||
transform: translateX($inputSwitchHandleWidth);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
.p-inputswitch-slider {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOffHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnBg;
|
||||
|
||||
&:before {
|
||||
background: $inputSwitchHandleOnBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
.p-inputswitch-slider {
|
||||
background: $inputSwitchSliderOnHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
.p-inputswitch-slider {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
}
|
||||
102
public/theme/theme-base/components/input/_inputtext.scss
Normal file
102
public/theme/theme-base/components/input/_inputtext.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.p-inputtext {
|
||||
font-family: var(--font-family);
|
||||
font-feature-settings: var(--font-feature-settings, normal);
|
||||
font-size: $inputTextFontSize;
|
||||
color: $inputTextColor;
|
||||
background: $inputBg;
|
||||
padding: $inputPadding;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
appearance: none;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:enabled:hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&.p-inputtext-sm {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
|
||||
&.p-inputtext-lg {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
|
||||
.p-float-label > label {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputPlaceholderTextColor;
|
||||
transition-duration: $transitionDuration;
|
||||
}
|
||||
|
||||
.p-float-label > label.p-error {
|
||||
color: $errorColor;
|
||||
}
|
||||
|
||||
.p-input-icon-left > i:first-of-type,
|
||||
.p-input-icon-left > svg:first-of-type,
|
||||
.p-input-icon-left > .p-input-prefix {
|
||||
left: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-input-icon-left > .p-inputtext {
|
||||
padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-input-icon-left.p-float-label > label {
|
||||
left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-input-icon-right > i:last-of-type,
|
||||
.p-input-icon-right > svg:last-of-type,
|
||||
.p-input-icon-right > .p-input-suffix {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
.p-input-icon-right > .p-inputtext {
|
||||
padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
color: $inputPlaceholderTextColor
|
||||
};
|
||||
|
||||
.p-input-filled {
|
||||
.p-inputtext {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:enabled:hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:enabled:focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputtext-sm {
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleSM);
|
||||
@include scaledPadding($inputPadding, $scaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputtext-lg {
|
||||
.p-inputtext {
|
||||
@include scaledFontSize($inputTextFontSize, $scaleLG);
|
||||
@include scaledPadding($inputPadding, $scaleLG);
|
||||
}
|
||||
}
|
||||
74
public/theme/theme-base/components/input/_listbox.scss
Normal file
74
public/theme/theme-base/components/input/_listbox.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.p-listbox {
|
||||
background: $inputListBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputListBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-listbox-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputListHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-listbox-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-listbox-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-listbox-list {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-listbox-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
.p-listbox-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-listbox-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-listbox-item {
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
31
public/theme/theme-base/components/input/_mention.scss
Normal file
31
public/theme/theme-base/components/input/_mention.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.p-mention-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-mention-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-mention-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
177
public/theme/theme-base/components/input/_multiselect.scss
Normal file
177
public/theme/theme-base/components/input/_multiselect.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-multiselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-multiselect-clearable {
|
||||
.p-multiselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-multiselect-chip {
|
||||
.p-multiselect-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
|
||||
.p-multiselect-token-icon {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-multiselect-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-multiselect {
|
||||
&.p-multiselect-chip {
|
||||
.p-multiselect-label {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
|
||||
&.p-multiselect-items-label {
|
||||
padding: $inputPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-multiselect-clearable {
|
||||
.p-multiselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-multiselect-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-multiselect-filter-container {
|
||||
margin: 0 $inlineSpacing;
|
||||
|
||||
.p-inputtext {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-multiselect-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-close {
|
||||
@include action-icon();
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-multiselect-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 {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
.p-checkbox {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-multiselect-item-group {
|
||||
margin: $submenuHeaderMargin;
|
||||
padding: $submenuHeaderPadding;
|
||||
color: $submenuHeaderTextColor;
|
||||
background: $submenuHeaderBg;
|
||||
font-weight: $submenuHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-multiselect-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-multiselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
public/theme/theme-base/components/input/_password.scss
Normal file
33
public/theme/theme-base/components/input/_password.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
.p-password {
|
||||
&.p-invalid.p-component > .p-inputtext {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-password-panel {
|
||||
padding: $panelContentPadding;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
border: $overlayContentBorder;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-password-meter {
|
||||
margin-bottom: $inlineSpacing;
|
||||
background: $passwordMeterBg;
|
||||
|
||||
.p-password-strength {
|
||||
&.weak {
|
||||
background: $passwordWeakBg;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: $passwordMediumBg;
|
||||
}
|
||||
|
||||
&.strong {
|
||||
background: $passwordStrongBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
public/theme/theme-base/components/input/_radiobutton.scss
Normal file
78
public/theme/theme-base/components/input/_radiobutton.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.p-radiobutton {
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
|
||||
.p-radiobutton-box {
|
||||
border: $radiobuttonBorder;
|
||||
background: $inputBg;
|
||||
width: $radiobuttonWidth;
|
||||
height: $radiobuttonHeight;
|
||||
color: $textColor;
|
||||
border-radius: 50%;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
width: $radiobuttonIconSize;
|
||||
height: $radiobuttonIconSize;
|
||||
transition-duration: $transitionDuration;
|
||||
background-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
border-color: $radiobuttonActiveBorderColor;
|
||||
background: $radiobuttonActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $radiobuttonActiveHoverBorderColor;
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
color: $radiobuttonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-radiobutton-box {
|
||||
@include invalid-input();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
background-color: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $radiobuttonActiveBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background: $radiobuttonActiveHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $radiobuttonActiveBg) {
|
||||
.p-highlight {
|
||||
.p-radiobutton {
|
||||
.p-radiobutton-box {
|
||||
border-color: $radiobuttonIconActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
public/theme/theme-base/components/input/_rating.scss
Normal file
60
public/theme/theme-base/components/input/_rating.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-rating {
|
||||
gap: $inlineSpacing;
|
||||
|
||||
.p-rating-item {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOffColor;
|
||||
transition: $formElementTransition;
|
||||
font-size: $ratingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $ratingIconFontSize;
|
||||
height: $ratingIconFontSize;
|
||||
}
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconOnColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-readonly) {
|
||||
.p-rating-item {
|
||||
&:hover {
|
||||
.p-rating-icon {
|
||||
color: $ratingStarIconHoverColor;
|
||||
|
||||
&.p-rating-cancel {
|
||||
color: $ratingCancelIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($highlightBg == $ratingStarIconOnColor) {
|
||||
.p-highlight {
|
||||
.p-rating {
|
||||
.p-rating-item {
|
||||
&.p-rating-item-active {
|
||||
.p-rating-icon {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
public/theme/theme-base/components/input/_selectbutton.scss
Normal file
50
public/theme/theme-base/components/input/_selectbutton.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.p-selectbutton {
|
||||
.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
49
public/theme/theme-base/components/input/_slider.scss
Normal file
49
public/theme/theme-base/components/input/_slider.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-slider {
|
||||
background: $sliderBg;
|
||||
border: $sliderBorder;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&.p-slider-horizontal {
|
||||
height: $sliderHorizontalHeight;
|
||||
|
||||
.p-slider-handle {
|
||||
margin-top: math.div(-1 * $sliderHandleHeight, 2);
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-slider-vertical {
|
||||
width: $sliderVerticalWidth;
|
||||
|
||||
.p-slider-handle {
|
||||
margin-left: math.div(-1 * $sliderHandleWidth, 2);
|
||||
margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-handle {
|
||||
height: $sliderHandleHeight;
|
||||
width: $sliderHandleWidth;
|
||||
background: $sliderHandleBg;
|
||||
border: $sliderHandleBorder;
|
||||
border-radius: $sliderHandleBorderRadius;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&:focus {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-slider-range {
|
||||
background: $sliderRangeBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled) {
|
||||
.p-slider-handle:hover {
|
||||
background: $sliderHandleHoverBg;
|
||||
border-color: $sliderHandleHoverBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
48
public/theme/theme-base/components/input/_togglebutton.scss
Normal file
48
public/theme/theme-base/components/input/_togglebutton.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.p-togglebutton.p-button {
|
||||
background: $toggleButtonBg;
|
||||
border: $toggleButtonBorder;
|
||||
color: $toggleButtonTextColor;
|
||||
transition: $formElementTransition;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $toggleButtonHoverBg;
|
||||
border-color: $toggleButtonHoverBorderColor;
|
||||
color: $toggleButtonTextHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $toggleButtonActiveBg;
|
||||
border-color: $toggleButtonActiveBorderColor;
|
||||
color: $toggleButtonTextActiveColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $toggleButtonActiveHoverBg;
|
||||
border-color: $toggleButtonActiveHoverBorderColor;
|
||||
color: $toggleButtonTextActiveHoverColor;
|
||||
|
||||
.p-button-icon-left,
|
||||
.p-button-icon-right {
|
||||
color: $toggleButtonIconActiveHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-invalid > .p-button {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
139
public/theme/theme-base/components/input/_treeselect.scss
Normal file
139
public/theme/theme-base/components/input/_treeselect.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.p-treeselect {
|
||||
background: $inputBg;
|
||||
border: $inputBorder;
|
||||
transition: $formElementTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
border-color: $inputHoverBorderColor;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
|
||||
&.p-treeselect-clearable {
|
||||
.p-treeselect-label {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-label {
|
||||
padding: $inputPadding;
|
||||
transition: $formElementTransition;
|
||||
|
||||
&.p-placeholder {
|
||||
color: $inputPlaceholderTextColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-token {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
margin-right: $inlineSpacing;
|
||||
background: $chipBg;
|
||||
color: $chipTextColor;
|
||||
border-radius: $chipBorderRadius;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-trigger {
|
||||
background: transparent;
|
||||
color: $inputIconColor;
|
||||
width: $inputGroupAddOnMinWidth;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-treeselect-clear-icon {
|
||||
color: $inputIconColor;
|
||||
right: $inputGroupAddOnMinWidth;
|
||||
}
|
||||
|
||||
&.p-invalid.p-component {
|
||||
@include invalid-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-inputwrapper-filled {
|
||||
&.p-treeselect {
|
||||
&.p-treeselect-chip {
|
||||
.p-treeselect-label {
|
||||
padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-panel {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
|
||||
.p-treeselect-header {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
|
||||
.p-treeselect-filter-container {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-treeselect-filter {
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-treeselect-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
|
||||
&.p-treeselect-clearable-filter {
|
||||
.p-treeselect-filter {
|
||||
padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
|
||||
}
|
||||
|
||||
.p-treeselect-filter-clear-icon {
|
||||
right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-close {
|
||||
@include action-icon();
|
||||
}
|
||||
}
|
||||
|
||||
.p-treeselect-items-wrapper {
|
||||
.p-tree {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-treeselect-empty-message {
|
||||
padding: $inputListItemPadding;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-input-filled {
|
||||
.p-treeselect {
|
||||
background: $inputFilledBg;
|
||||
|
||||
&:not(.p-disabled):hover {
|
||||
background-color: $inputFilledHoverBg;
|
||||
}
|
||||
|
||||
&:not(.p-disabled).p-focus {
|
||||
background-color: $inputFilledFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
public/theme/theme-base/components/menu/_breadcrumb.scss
Normal file
42
public/theme/theme-base/components/menu/_breadcrumb.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.p-breadcrumb {
|
||||
background: $breadcrumbBg;
|
||||
border: $breadcrumbBorder;
|
||||
border-radius: $borderRadius;
|
||||
padding: $breadcrumbPadding;
|
||||
|
||||
.p-breadcrumb-list {
|
||||
li {
|
||||
.p-menuitem-link {
|
||||
transition: $listItemTransition;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
.p-menuitem-text {
|
||||
color: $breadcrumbItemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $breadcrumbItemIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-menuitem-separator {
|
||||
margin: 0 $inlineSpacing 0 $inlineSpacing;
|
||||
color: $breadcrumbSeparatorColor;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.p-menuitem-text {
|
||||
color: $breadcrumbLastItemTextColor;
|
||||
}
|
||||
|
||||
.p-menuitem-icon {
|
||||
color: $breadcrumbLastItemIconColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user