Skip to content

Commit

Permalink
Fixed #9745 - Improve invalid validation visuals on material themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Jan 11, 2021
1 parent a0201cd commit e51550e
Show file tree
Hide file tree
Showing 9 changed files with 313 additions and 209 deletions.
2 changes: 1 addition & 1 deletion src/app/components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export interface LocaleSettings {
@Component({
selector: 'p-calendar',
template: `
<span #container [ngClass]="{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly}" [ngStyle]="style" [class]="styleClass">
<span #container [ngClass]="{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-focus': focus}" [ngStyle]="style" [class]="styleClass">
<ng-template [ngIf]="!inline">
<input #inputfield type="text" [attr.id]="inputId" [attr.name]="name" [attr.required]="required" [attr.aria-required]="required" [value]="inputFieldValue" (focus)="onInputFocus($event)" (keydown)="onInputKeydown($event)" (click)="onInputClick()" (blur)="onInputBlur($event)"
[readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
Expand Down
65 changes: 39 additions & 26 deletions src/assets/components/themes/md-dark-deeppurple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5347,7 +5347,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
.p-calendar-w-btn:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
.p-calendar-w-btn:not(.p-disabled).p-focus {
border-color: #CE93D8;
box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
}
Expand Down Expand Up @@ -5378,31 +5378,47 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16);
}

/*p-calendar.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-calendar-w-btn {
border-color: $inputErrorBorderColor;
&:not(.p-disabled):hover {
border-color: $inputErrorBorderColor;
}
.p-inputtext {
&:enabled:focus {
box-shadow: none;
}
}
}
&.p-inputwrapper-focus {
.p-calendar-w-btn {
border-color: $inputErrorBorderColor;
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.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
border-color: #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext:enabled:focus {
box-shadow: none;
}
p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: #f44435;
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}

.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled .p-calendar-w-btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Expand Down Expand Up @@ -5433,30 +5449,27 @@ p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar
background: transparent;
}
.p-input-filled .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: transparent;
box-shadow: none;
background-size: 100% 2px, 100% 1px;
background-image: none;
}

.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
Expand Down
65 changes: 39 additions & 26 deletions src/assets/components/themes/md-dark-indigo/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5347,7 +5347,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
.p-calendar-w-btn:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
.p-calendar-w-btn:not(.p-disabled).p-focus {
border-color: #9FA8DA;
box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
}
Expand Down Expand Up @@ -5378,31 +5378,47 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16);
}

/*p-calendar.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-calendar-w-btn {
border-color: $inputErrorBorderColor;
&:not(.p-disabled):hover {
border-color: $inputErrorBorderColor;
}
.p-inputtext {
&:enabled:focus {
box-shadow: none;
}
}
}
&.p-inputwrapper-focus {
.p-calendar-w-btn {
border-color: $inputErrorBorderColor;
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.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
border-color: #f44435;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext:enabled:focus {
box-shadow: none;
}
p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: #f44435;
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}

.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled .p-calendar-w-btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Expand Down Expand Up @@ -5433,30 +5449,27 @@ p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar
background: transparent;
}
.p-input-filled .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: transparent;
box-shadow: none;
background-size: 100% 2px, 100% 1px;
background-image: none;
}

.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
Expand Down
65 changes: 39 additions & 26 deletions src/assets/components/themes/md-light-deeppurple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5347,7 +5347,7 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
.p-calendar-w-btn:not(.p-disabled):hover {
border-color: #000001;
}
.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
.p-calendar-w-btn:not(.p-disabled).p-focus {
border-color: #673AB7;
box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
}
Expand Down Expand Up @@ -5378,31 +5378,47 @@ p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-cont
box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12);
}

/*p-calendar.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-calendar-w-btn {
border-color: $inputErrorBorderColor;
&:not(.p-disabled):hover {
border-color: $inputErrorBorderColor;
}
.p-inputtext {
&:enabled:focus {
box-shadow: none;
}
}
}
&.p-inputwrapper-focus {
.p-calendar-w-btn {
border-color: $inputErrorBorderColor;
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.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: #B00020;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
border-color: #B00020;
}
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext:enabled:focus {
box-shadow: none;
}
p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: #B00020;
p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}

.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled .p-calendar-w-btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
Expand Down Expand Up @@ -5433,30 +5449,27 @@ p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar
background: transparent;
}
.p-input-filled .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled):hover {
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus {
box-shadow: none;
border-color: transparent;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext {
background-image: none;
background-color: transparent;
border: 0 none;
}
.p-input-filled p-calendar.ng-dirty.ng-invalid:not(.p-disabled).p-inputwrapper-focus .p-calendar-w-btn {
border-color: transparent;
box-shadow: none;
background-size: 100% 2px, 100% 1px;
background-image: none;
}

.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
Expand Down
Loading

0 comments on commit e51550e

Please sign in to comment.