vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #2239 - Material Calendar | Disabled Calendar getting opacity twice

pull/2242/head
Tuğçe Küçükoğlu 2022-03-01 16:56:10 +03:00 committed by Tuğçe Küçükoğlu
parent 96ecbf2d0c
commit 923f236d4c
9 changed files with 113 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/themes/md-dark-deeppurple/theme.css
View File

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

19
public/themes/md-dark-indigo/theme.css
View File

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

19
public/themes/md-light-deeppurple/theme.css
View File

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

19
public/themes/md-light-indigo/theme.css
View File

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

19
public/themes/mdc-dark-deeppurple/theme.css
View File

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

19
public/themes/mdc-dark-indigo/theme.css
View File

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

19
public/themes/mdc-light-deeppurple/theme.css
View File

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

19
public/themes/mdc-light-indigo/theme.css
View File

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

1
src/components/calendar/Calendar.vue
View File

@ -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
}