primeng 11.1.0-rc.1 → 11.1.0

package/resources/themes/md-light-indigo/theme.css

@@ -85,36 +85,36 @@
 .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
   right: 4rem;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
+.p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.5rem 1rem;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
+.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #000001;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
   border-color: #3F51B5;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
   padding: 0.5rem 0;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   font-size: 1rem;
   color: #000001;
   padding: 0;
   margin: 0;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.5rem 1rem;
   margin-right: 0.5rem;
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
   border-radius: 4px;
 }
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
 .p-autocomplete.p-error > .p-inputtext, .p-autocomplete.p-invalid > .p-inputtext {
@@ -165,7 +165,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   padding: 0.5rem;
   background: #ffffff;
   color: #000001;
-  border: 1px solid #e5e5e5;
+  border: 1px solid rgba(0, 0, 0, 0.38);
   border-radius: 4px;
 }
 .p-datepicker:not(.p-datepicker-inline) {
@@ -382,7 +382,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-cascadeselect .p-cascadeselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
+  width: 3rem;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -539,7 +539,8 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #B00020;
 }
 
-.p-colorpicker-preview {
+.p-colorpicker-preview,
+.p-fluid .p-colorpicker-preview.p-inputtext {
   width: 2rem;
   height: 2rem;
 }
@@ -589,13 +590,13 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
 .p-dropdown .p-dropdown-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
+  width: 3rem;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 .p-dropdown .p-dropdown-clear-icon {
   color: rgba(0, 0, 0, 0.6);
-  right: 2.357rem;
+  right: 3rem;
 }
 
 .p-dropdown-panel {
@@ -712,16 +713,18 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border: 0 none;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
+  padding: 0;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
   color: #000001;
-  padding: 1rem 1rem;
-  border-radius: 4px;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
   color: #000001;
   background: rgba(0, 0, 0, 0.04);
 }
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 1rem 1rem;
+}
 .p-editor-container .p-editor-content {
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
@@ -775,7 +778,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border-left: 1px solid rgba(0, 0, 0, 0.38);
   border-bottom: 1px solid rgba(0, 0, 0, 0.38);
   padding: 1rem 1rem;
-  min-width: 2.357rem;
+  min-width: 3rem;
 }
 .p-inputgroup-addon:last-child {
   border-right: 1px solid rgba(0, 0, 0, 0.38);
@@ -922,6 +925,10 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   transition-duration: 0.2s;
 }
 
+.p-float-label > .ng-invalid.ng-dirty + label {
+  color: #B00020;
+}
+
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -931,6 +938,10 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   padding-left: 3rem;
 }
 
+.p-input-icon-left.p-float-label > label {
+  left: 3rem;
+}
+
 .p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -979,7 +990,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
 .p-listbox {
   background: #ffffff;
   color: #000001;
-  border: 1px solid #e5e5e5;
+  border: 1px solid rgba(0, 0, 0, 0.38);
   border-radius: 4px;
 }
 .p-listbox .p-listbox-header {
@@ -1071,7 +1082,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-trigger {
   background: transparent;
   color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
+  width: 3rem;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -3702,6 +3713,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border: 0 none;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-contextmenu .p-menuitem {
+  margin: 0;
+}
+.p-contextmenu .p-menuitem:last-child {
+  margin: 0;
+}
 .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: rgba(0, 0, 0, 0.04);
 }
@@ -3834,6 +3851,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   margin: 0.5rem 0;
 }
+.p-megamenu .p-megamenu-submenu .p-menuitem {
+  margin: 0;
+}
+.p-megamenu .p-megamenu-submenu .p-menuitem:last-child {
+  margin: 0;
+}
 .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: rgba(0, 0, 0, 0.04);
 }
@@ -3847,6 +3870,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   width: 12.5rem;
   padding: 0.5rem 0;
 }
+.p-megamenu.p-megamenu-vertical .p-menuitem {
+  margin: 0;
+}
+.p-megamenu.p-megamenu-vertical .p-menuitem:last-child {
+  margin: 0;
+}
 
 .p-menu {
   padding: 0.5rem 0;
@@ -3908,6 +3937,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
   margin: 0.5rem 0;
 }
+.p-menu .p-menuitem {
+  margin: 0;
+}
+.p-menu .p-menuitem:last-child {
+  margin: 0;
+}
 
 .p-menubar {
   padding: 1rem;
@@ -4015,6 +4050,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-menubar .p-submenu-list .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-menubar .p-submenu-list .p-menuitem {
+  margin: 0;
+}
+.p-menubar .p-submenu-list .p-menuitem:last-child {
+  margin: 0;
+}
 .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: rgba(0, 0, 0, 0.04);
 }
@@ -4479,6 +4520,12 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border: 0 none;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
+.p-tieredmenu .p-menuitem {
+  margin: 0;
+}
+.p-tieredmenu .p-menuitem:last-child {
+  margin: 0;
+}
 .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background: rgba(0, 0, 0, 0.04);
 }
@@ -4977,7 +5024,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-radius: 4px;
 }
 .p-skeleton:after {
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
 }
 
 .p-tag {
@@ -5059,11 +5106,11 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   opacity: 0.38;
 }
 
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
 }
 
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
+.p-input-filled .p-autocomplete .p-autocomplete-multiple-container {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   border: 1px solid transparent;
@@ -5073,22 +5120,22 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   background-position: 50% 100%, 50% 100%;
   background-origin: border-box;
 }
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext {
+.p-input-filled .p-autocomplete .p-autocomplete-multiple-container .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
 }
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
+.p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   background-color: #ececec;
   border-color: transparent;
   background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, #000001, #000001);
 }
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
   box-shadow: none;
   background-color: #dcdcdc;
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus {
+.p-input-filled .p-autocomplete .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }
@@ -5107,6 +5154,29 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
   padding: 0;
 }
+.p-input-filled p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.p-input-filled p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .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-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container: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-button {
   font-weight: 500;
@@ -5251,10 +5321,11 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border: 1px solid rgba(0, 0, 0, 0.38);
   background: #ffffff;
   border-radius: 4px;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
 }
 .p-calendar-w-btn .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
   border: 0 none;
 }
 .p-calendar-w-btn .p-inputtext:enabled:focus {
@@ -5276,11 +5347,78 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .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: #3F51B5;
   box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
 }
 
+.p-datepicker .p-datepicker-header {
+  border-bottom: 0 none;
+}
+.p-datepicker .p-datepicker-header .p-datepicker-title {
+  margin: 0 auto 0 0;
+  order: 1;
+}
+.p-datepicker .p-datepicker-header .p-datepicker-prev {
+  order: 2;
+}
+.p-datepicker .p-datepicker-header .p-datepicker-next {
+  order: 3;
+}
+.p-datepicker table th {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.38);
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+.p-datepicker table td.p-datepicker-today > span {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
+}
+.p-datepicker table td.p-datepicker-today.p-highlight {
+  box-shadow: 0 0 0 1px rgba(63, 81, 181, 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 .p-inputtext:enabled:focus {
+  box-shadow: none;
+}
+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-w-btn {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -5293,7 +5431,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-input-filled .p-calendar-w-btn .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
 }
 .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
   background-color: #ececec;
@@ -5310,31 +5448,28 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   background-image: none;
   background: transparent;
 }
-
-.p-datepicker .p-datepicker-header {
-  border-bottom: 0 none;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0 auto 0 0;
-  order: 1;
+.p-input-filled .p-calendar-w-btn .p-inputtext {
+  border: 0 none;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-prev {
-  order: 2;
+.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-datepicker .p-datepicker-header .p-datepicker-next {
-  order: 3;
+.p-input-filled p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
 }
-.p-datepicker table th {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.38);
-  font-weight: 400;
-  font-size: 0.875rem;
+.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-datepicker table td.p-datepicker-today > span {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
+.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-datepicker table td.p-datepicker-today.p-highlight {
-  box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12);
+.p-input-filled p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn .p-inputtext {
+  border: 0 none;
+  background-image: none;
 }
 
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
@@ -5426,7 +5561,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-input-filled .p-chips-multiple-container .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
 }
 .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
   background-color: #ececec;
@@ -5458,6 +5593,18 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-input-token {
   padding: 0;
 }
+.p-input-filled p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container: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-datatable .p-sortable-column {
   outline: 0 none;
@@ -5499,7 +5646,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-input-filled .p-dropdown .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
 }
 .p-input-filled .p-dropdown:not(.p-disabled):hover {
   background-color: #ececec;
@@ -5519,6 +5666,18 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-input-filled .p-dropdown .p-inputtext {
   border: 0 none;
 }
+.p-input-filled p-dropdown.ng-dirty.ng-invalid .p-dropdown {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-dropdown.ng-dirty.ng-invalid .p-dropdown: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-galleria .p-galleria-indicators {
   padding: 1rem;
@@ -5535,6 +5694,9 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-inputtext:enabled:focus {
   box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
 }
+.p-inputtext:enabled:focus.ng-invalid.ng-dirty {
+  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-inputtext {
   border-bottom-left-radius: 0;
@@ -5557,6 +5719,14 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
+.p-input-filled .p-inputtext.ng-invalid.ng-dirty {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-inputtext.ng-invalid.ng-dirty:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
 
 .p-input-filled .p-inputgroup .p-inputgroup-addon {
   border-bottom-left-radius: 0;
@@ -5588,6 +5758,32 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-bottom-right-radius: 0;
 }
 
+p-inputmask.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-input-filled p-inputmask.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-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-inputnumber.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-input-filled p-inputnumber.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-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
 .p-inputswitch .p-inputswitch-slider:before {
   transition-property: box-shadow transform;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
@@ -5677,7 +5873,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-input-filled .p-multiselect .p-inputtext {
   background-image: none;
-  background: transparent;
+  background-color: transparent;
 }
 .p-input-filled .p-multiselect:not(.p-disabled):hover {
   background-color: #ececec;
@@ -5722,6 +5918,18 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-input-filled .p-float-label .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
   font-size: 75%;
 }
+.p-input-filled p-multiselect.ng-dirty.ng-invalid .p-multiselect {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+p-multiselect.ng-dirty.ng-invalid .p-multiselect: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-overlaypanel .p-overlaypanel-content {
   padding: 1.5rem;
@@ -5842,25 +6050,38 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 }
 .p-steps .p-steps-item {
   justify-content: flex-start;
+  flex-direction: row-reverse;
+  align-items: center;
 }
 .p-steps .p-steps-item:before {
+  position: static;
+  left: auto;
+  top: auto;
   margin-top: 0;
 }
+.p-steps .p-steps-item:last-child {
+  flex-grow: 0;
+}
+.p-steps .p-steps-item:last-child:before {
+  display: none;
+}
 .p-steps .p-steps-item .p-menuitem-link {
   flex-direction: row;
-  background-color: transparent;
-  z-index: 1;
+  flex: 1 1 auto;
+  overflow: visible;
+  padding: 0 0.5rem;
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
   background-color: #9e9d9e;
   color: #ffffff;
-  margin-right: 0.5rem;
+  font-size: 0.857rem;
+  min-width: 1.714rem;
+  height: 1.714rem;
+  line-height: 1.714rem;
 }
 .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
   margin: 0;
-  background-color: transparent;
-  color: #9e9d9e;
-  padding: 0 0.25rem 0 0;
+  padding-left: 0.5rem;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
   background-color: #3F51B5;