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

Demo update

pull/358/head
cagataycivici 2020-06-26 18:58:49 +03:00
parent 97f4c43d53
commit 4c4f605d54
36 changed files with 174 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/themes/arya-blue/theme.css
View File

@ -903,7 +903,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838; border: 1px solid #383838;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/arya-green/theme.css
View File

@ -903,7 +903,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838; border: 1px solid #383838;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/arya-orange/theme.css
View File

@ -903,7 +903,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838; border: 1px solid #383838;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/arya-purple/theme.css
View File

@ -903,7 +903,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838; border: 1px solid #383838;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/luna-amber/theme.css
View File

@ -903,7 +903,7 @@
background: #323232; background: #323232;
color: #dedede; color: #dedede;
border: 1px solid #191919; border: 1px solid #191919;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/luna-blue/theme.css
View File

@ -903,7 +903,7 @@
background: #323232; background: #323232;
color: #dedede; color: #dedede;
border: 1px solid #191919; border: 1px solid #191919;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/luna-green/theme.css
View File

@ -903,7 +903,7 @@
background: #323232; background: #323232;
color: #dedede; color: #dedede;
border: 1px solid #191919; border: 1px solid #191919;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/luna-pink/theme.css
View File

@ -903,7 +903,7 @@
background: #323232; background: #323232;
color: #dedede; color: #dedede;
border: 1px solid #191919; border: 1px solid #191919;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

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

@ -923,7 +923,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #ffffff; background: #ffffff;
color: #000001; color: #000001;
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #ffffff; background: #ffffff;
color: #000001; color: #000001;
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #ffffff; background: #ffffff;
color: #000001; color: #000001;
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

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

@ -923,7 +923,7 @@
background: #ffffff; background: #ffffff;
color: #000001; color: #000001;
border: 0 none; border: 0 none;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2796,7 +2796,7 @@
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
padding: 0.5rem; padding: 0.5rem;
box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); 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; border-radius: 4px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {
@ -4754,7 +4754,7 @@
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
box-shadow: none; box-shadow: none;
font-size: 0.714rem; font-size: 0.875rem;
} }
.p-tooltip .p-tooltip-arrow { .p-tooltip .p-tooltip-arrow {
display: none; display: none;

4
public/themes/nova-accent/theme.css
View File

@ -899,7 +899,7 @@
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2755,7 +2755,7 @@
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/nova-alt/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/nova-vue/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/nova/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2763,7 +2763,7 @@
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
padding: 0.429rem 0.429rem; padding: 0.429rem 0.429rem;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/saga-blue/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
border: 0 none; border: 0 none;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/saga-green/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
border: 0 none; border: 0 none;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/saga-orange/theme.css
View File

@ -903,7 +903,7 @@
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
border: 0 none; border: 0 none;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2780,7 +2780,7 @@
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/vela-blue/theme.css
View File

@ -902,7 +902,7 @@
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562; border: 1px solid #304562;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2779,7 +2779,7 @@
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/vela-green/theme.css
View File

@ -902,7 +902,7 @@
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562; border: 1px solid #304562;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2779,7 +2779,7 @@
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/vela-orange/theme.css
View File

@ -902,7 +902,7 @@
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562; border: 1px solid #304562;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2779,7 +2779,7 @@
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

4
public/themes/vela-purple/theme.css
View File

@ -902,7 +902,7 @@
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562; border: 1px solid #304562;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-password-panel .p-password-meter { .p-password-panel .p-password-meter {
@ -2779,7 +2779,7 @@
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 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);
border-radius: 3px; border-radius: 3px;
} }
.p-tooltip.p-tooltip-right .p-tooltip-arrow { .p-tooltip.p-tooltip-right .p-tooltip-arrow {

48
src/App.vue
View File

@ -18,6 +18,9 @@
<router-view/> <router-view/>
<app-footer /> <app-footer />
</div> </div>
<div class="app-theme">
<img :src="getLogo()" />
</div>
<Toast /> <Toast />
<Toast position="topleft" group="tl" /> <Toast position="topleft" group="tl" />
<Toast position="bottomleft" group="bl" /> <Toast position="bottomleft" group="bl" />
@ -37,9 +40,46 @@ export default {
return { return {
sidebarActive: false, sidebarActive: false,
newsActive: false, newsActive: false,
theme: 'saga-blue' theme: 'saga-blue',
logoMap: {
'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
'md-light-indigo': 'md-light-indigo.svg',
'md-light-purple': 'md-light-purple.svg',
'md-dark-indigo': 'md-dark-indigo.svg',
'md-dark-indigo': 'md-dark-purple.svg',
'mdc-light-indigo': 'md-light-indigo.svg',
'mdc-light-purple': 'md-light-purple.svg',
'mdc-dark-indigo': 'md-dark-indigo.svg',
'mdc-dark-indigo': 'md-dark-purple.svg',
'saga-blue': 'saga-blue.png',
'saga-green': 'saga-green.png',
'saga-orange': 'saga-orange.png',
'saga-purple': 'saga-purple.png',
'vela-blue': 'vela-blue.png',
'vela-green': 'vela-green.png',
'vela-orange': 'vela-orange.png',
'vela-purple': 'vela-purple.png',
'arya-blue': 'arya-blue.png',
'arya-green': 'arya-green.png',
'arya-orange': 'arya-orange.png',
'arya-purple': 'arya-purple.png',
'nova': 'themeswitcher-nova.png',
'nova-alt': 'themeswitcher-nova-alt.png',
'nova-accent': 'themeswitcher-nova-accent.png',
'nova-vue': 'themeswitcher-nova-vue.png',
'luna-blue': 'themeswitcher-luna-blue.png',
'luna-green': 'themeswitcher-luna-green.png',
'luna-pink': 'themeswitcher-luna-pink.png',
'luna-amber': 'themeswitcher-luna-amber.png',
'rhea': 'themeswitcher-rhea.png'
}
} }
}, },
mounted() { mounted() {
if (this.isOutdatedIE()) { if (this.isOutdatedIE()) {
this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'}); this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
@ -112,7 +152,11 @@ export default {
} }
return false; return false;
} },
getLogo() {
var images = require.context('./assets/images/themes', false);
return images('./' + this.logoMap[this.theme]);
},
}, },
computed: { computed: {
containerClass() { containerClass() {

18
src/assets/styles/app/_core.scss
View File

@ -205,3 +205,21 @@ p {
line-height: 1.5; line-height: 1.5;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
.app-theme {
background-color: var(--primary-color);
color: var(--primary-color-text);
position: fixed;
left: 285px;
top: 15px;
padding: .5rem;
z-index: 2000;
border-radius: 4px;
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
width: 39px;
height: 39px;
img {
width: 25px;
}
}

5
src/assets/styles/app/_responsive.scss
View File

@ -136,6 +136,11 @@
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
} }
} }
.app-theme {
right: 35px;
left: auto;
}
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {

1
src/assets/styles/app/_topbar.scss
View File

@ -90,6 +90,7 @@
> ul { > ul {
position: absolute; position: absolute;
transform-origin: top;
top: 70px; top: 70px;
right: 0; right: 0;
width: 275px; width: 275px;

1
src/assets/styles/app/app.scss
View File

@ -8,4 +8,3 @@
@import './designer'; @import './designer';
@import './home'; @import './home';
@import './responsive'; @import './responsive';
@import './core';

28
src/components/common/Common.css
View File

@ -89,34 +89,40 @@ button {
user-select: none; user-select: none;
} }
/* Overlay Animations */ /* Non vue overlay animations */
.p-input-overlay { .p-input-overlay {
transform: translateY(5%);
opacity: 0; opacity: 0;
transition: transform .3s, opacity .3s; transform: scaleY(0.8);
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
} }
.p-input-overlay-visible { .p-input-overlay-visible {
transform: translateY(0);
opacity: 1; opacity: 1;
transform: scaleY(1);
} }
.p-input-overlay-hidden { .p-input-overlay-hidden {
opacity: 0; opacity: 0;
transform: translateY(5%); transform: scaleY(1);
transition: transform .3s, opacity .15s; transition: opacity .1s linear;
}
/* Vue based overlay animations */
.p-input-overlay-enter {
opacity: 0;
transform: scaleY(0.8);
} }
/* Overlay Animations */
.p-input-overlay-enter,
.p-input-overlay-leave-to { .p-input-overlay-leave-to {
opacity: 0; opacity: 0;
transform: translateY(5%);
} }
.p-input-overlay-enter-active, .p-input-overlay-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-input-overlay-leave-active { .p-input-overlay-leave-active {
transition: transform .3s, opacity .15s; transition: opacity .1s linear;
} }
/* Toggleable Content */ /* Toggleable Content */

28
src/components/overlaypanel/OverlayPanel.vue
View File

@ -168,29 +168,21 @@ export default {
} }
/* Animation */ /* Animation */
.p-overlaypanel-enter, .p-overlaypanel-enter {
opacity: 0;
transform: scaleY(0.8);
}
.p-overlaypanel-leave-to { .p-overlaypanel-leave-to {
opacity: 0; opacity: 0;
transform: translate3d(-50%, -25%, 0) scale(0.9);
} }
.p-overlaypanel-enter-active, .p-overlaypanel-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-overlaypanel-leave-active { .p-overlaypanel-leave-active {
transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1); transition: opacity .1s linear;
}
.p-overlaypanel-enter,
.p-overlaypanel-leave-to {
opacity: 0;
-webkit-transform: translateY(5%);
-ms-transform: translateY(5%);
transform: translateY(5%);
}
.p-overlaypanel-enter-active,
.p-overlaypanel-leave-active {
-webkit-transition: transform .3s, opacity .15s;
transition: transform .3s, opacity .15s;
} }
.p-overlaypanel:after, .p-overlaypanel:before { .p-overlaypanel:after, .p-overlaypanel:before {

16
src/components/utils/DomHandler.js
View File

@ -187,10 +187,14 @@ export default class DomHandler {
let viewport = this.getViewport(); let viewport = this.getViewport();
let top, left; let top, left;
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight; top = targetOffset.top + windowScrollTop - elementOuterHeight;
else element.style.transformOrigin = 'bottom';
}
else {
top = targetOuterHeight + targetOffset.top + windowScrollTop; top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
}
if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width) if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width)
left = targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth; left = targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth;
@ -209,10 +213,14 @@ export default class DomHandler {
var viewport = this.getViewport(); var viewport = this.getViewport();
var top, left; var top, left;
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
top = -1 * (elementDimensions.height); top = -1 * (elementDimensions.height);
else element.style.transformOrigin = 'bottom';
}
else {
top = targetHeight; top = targetHeight;
element.style.transformOrigin = 'top';
}
if ((targetOffset.left + elementDimensions.width) > viewport.width) if ((targetOffset.left + elementDimensions.width) > viewport.width)
left = targetWidth - elementDimensions.width; left = targetWidth - elementDimensions.width;