Files
btpxpress-frontend/public/theme/extensions/_calendar.scss

163 lines
3.7 KiB
SCSS
Executable File

.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;
}
}
}
}