Fixed #2239 - Material Calendar | Disabled Calendar getting opacity t…

…wice
primefaces · Mar 1, 2022 · 923f236 · 923f236
1 parent 96ecbf2
commit 923f236
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 40 deletions.
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-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-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: transparent;
   background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.1);
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
-.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-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-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: transparent;
   background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.1);
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
-.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-disabled):hover {
   border-color: rgba(0, 0, 0, 0.87);
 }
-.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: #ececec;
   border-color: transparent;
   background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-disabled):hover {
   border-color: rgba(0, 0, 0, 0.87);
 }
-.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-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-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: #ececec;
   border-color: transparent;
   background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-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-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: transparent;
   background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.1);
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
-.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(255, 255, 255, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-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-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: transparent;
   background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus {
   box-shadow: none;
   background-color: rgba(255, 255, 255, 0.1);
   border-color: transparent;
   background-size: 100% 2px, 100% 1px;
 }
-.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-disabled):hover {
   border-color: rgba(0, 0, 0, 0.87);
 }
-.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-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;
 }
+.p-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: #ececec;
   border-color: transparent;
   background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
@@ -5974,13 +5974,22 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
   background: rgba(0, 0, 0, 0.12);
 }
-.p-calendar-w-btn:not(.p-disabled):hover {
+.p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+  background-color: transparent !important;
+}
+.p-calendar-w-btn:not(.p-calendar-disabled):hover {
   border-color: rgba(0, 0, 0, 0.87);
 }
-.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-calendar-w-btn:not(.p-calendar-disabled).p-inputwrapper-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-calendar-w-btn.p-calendar-disabled {
+  opacity: 0.38;
+}
+.p-calendar-w-btn.p-calendar-disabled .p-inputtext {
+  opacity: 1;
+}
 
 .p-datepicker .p-datepicker-header {
   border-bottom: 0 none;
@@ -6035,18 +6044,18 @@
   background-image: none;
   background: transparent;
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover {
   background-color: #ececec;
   border-color: transparent;
   background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
 }
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):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-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled) .p-inputtext:enabled:focus {
   background-image: none;
   background: transparent;
 }

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -2311,6 +2311,7 @@ export default {
                 {
                     'p-calendar-w-btn': this.showIcon,
                     'p-calendar-timeonly': this.timeOnly,
+                    'p-calendar-disabled': this.$attrs.disabled,
                     'p-inputwrapper-filled': this.modelValue,
                     'p-inputwrapper-focus': this.focused
                 }