163 lines
3.7 KiB
SCSS
163 lines
3.7 KiB
SCSS
.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;
|
|
}
|
|
}
|
|
}
|
|
} |