Initial commit
This commit is contained in:
dahoud
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';
|
||||
Reference in New Issue
Block a user