Demo update
parent
97f4c43d53
commit
4c4f605d54
public/themes
arya-blue
arya-green
arya-orange
arya-purple
luna-amber
luna-blue
luna-green
luna-pink
md-dark-deeppurple
md-dark-indigo
md-light-deeppurple
md-light-indigo
mdc-dark-deeppurple
mdc-dark-indigo
mdc-light-deeppurple
mdc-light-indigo
nova-accent
nova-alt
nova-vue
nova
saga-blue
saga-green
saga-orange
vela-blue
vela-green
vela-orange
vela-purple
src
assets/styles/app
components
|
@ -903,7 +903,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #383838;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #383838;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #383838;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #383838;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #323232;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #4c4c4c;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #323232;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #4c4c4c;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #323232;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #4c4c4c;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #323232;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #4c4c4c;
|
||||
color: #dedede;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: #444444;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: #444444;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #ffffff;
|
||||
color: #000001;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: rgba(97, 97, 97, 0.9);
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #ffffff;
|
||||
color: #000001;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: rgba(97, 97, 97, 0.9);
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: #444444;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #1e1e1e;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: #444444;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #ffffff;
|
||||
color: #000001;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: rgba(97, 97, 97, 0.9);
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -923,7 +923,7 @@
|
|||
background: #ffffff;
|
||||
color: #000001;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2796,7 +2796,7 @@
|
|||
background: rgba(97, 97, 97, 0.9);
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
@ -4754,7 +4754,7 @@
|
|||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
box-shadow: none;
|
||||
font-size: 0.714rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.p-tooltip .p-tooltip-arrow {
|
||||
display: none;
|
||||
|
|
|
@ -899,7 +899,7 @@
|
|||
background: #ffffff;
|
||||
color: #333333;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2755,7 +2755,7 @@
|
|||
background: #333333;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #333333;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #333333;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #333333;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #333333;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #333333;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2763,7 +2763,7 @@
|
|||
background: #333333;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #495057;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #495057;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #495057;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #495057;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -903,7 +903,7 @@
|
|||
background: #ffffff;
|
||||
color: #495057;
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2780,7 +2780,7 @@
|
|||
background: #495057;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -902,7 +902,7 @@
|
|||
background: #1f2d40;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2779,7 +2779,7 @@
|
|||
background: #304562;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -902,7 +902,7 @@
|
|||
background: #1f2d40;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2779,7 +2779,7 @@
|
|||
background: #304562;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -902,7 +902,7 @@
|
|||
background: #1f2d40;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2779,7 +2779,7 @@
|
|||
background: #304562;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
|
@ -902,7 +902,7 @@
|
|||
background: #1f2d40;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-password-panel .p-password-meter {
|
||||
|
@ -2779,7 +2779,7 @@
|
|||
background: #304562;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
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;
|
||||
}
|
||||
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
|
||||
|
|
48
src/App.vue
48
src/App.vue
|
@ -18,6 +18,9 @@
|
|||
<router-view/>
|
||||
<app-footer />
|
||||
</div>
|
||||
<div class="app-theme">
|
||||
<img :src="getLogo()" />
|
||||
</div>
|
||||
<Toast />
|
||||
<Toast position="topleft" group="tl" />
|
||||
<Toast position="bottomleft" group="bl" />
|
||||
|
@ -37,9 +40,46 @@ export default {
|
|||
return {
|
||||
sidebarActive: 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() {
|
||||
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.'});
|
||||
|
@ -112,7 +152,11 @@ export default {
|
|||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getLogo() {
|
||||
var images = require.context('./assets/images/themes', false);
|
||||
return images('./' + this.logoMap[this.theme]);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
<li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'bootstrap4-dark-blue')"><img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'bootstrap4-dark-purple')"><img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
|
||||
|
||||
|
||||
<li class="topbar-submenu-header">MATERIAL DESIGN</li>
|
||||
<li><a @click="changeTheme($event, 'md-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
|
||||
|
@ -33,7 +33,7 @@
|
|||
<li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'mdc-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'mdc-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
|
||||
|
||||
|
||||
<li class="topbar-submenu-header">PRIMEONE</li>
|
||||
<li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
|
||||
|
|
|
@ -204,4 +204,22 @@ h6 {
|
|||
p {
|
||||
line-height: 1.5;
|
||||
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;
|
||||
}
|
||||
}
|
|
@ -136,6 +136,11 @@
|
|||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.app-theme {
|
||||
right: 35px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
|
|
|
@ -90,6 +90,7 @@
|
|||
|
||||
> ul {
|
||||
position: absolute;
|
||||
transform-origin: top;
|
||||
top: 70px;
|
||||
right: 0;
|
||||
width: 275px;
|
||||
|
|
|
@ -7,5 +7,4 @@
|
|||
@import './config';
|
||||
@import './designer';
|
||||
@import './home';
|
||||
@import './responsive';
|
||||
@import './core';
|
||||
@import './responsive';
|
|
@ -89,34 +89,40 @@ button {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
/* Overlay Animations */
|
||||
/* Non vue overlay animations */
|
||||
.p-input-overlay {
|
||||
transform: translateY(5%);
|
||||
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 {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.p-input-overlay-hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(5%);
|
||||
transition: transform .3s, opacity .15s;
|
||||
transform: scaleY(1);
|
||||
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 {
|
||||
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 {
|
||||
transition: transform .3s, opacity .15s;
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
/* Toggleable Content */
|
||||
|
|
|
@ -168,29 +168,21 @@ export default {
|
|||
}
|
||||
|
||||
/* Animation */
|
||||
.p-overlaypanel-enter,
|
||||
.p-overlaypanel-enter {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.p-overlaypanel-leave-to {
|
||||
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 {
|
||||
transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
.p-overlaypanel:after, .p-overlaypanel:before {
|
||||
|
|
|
@ -187,10 +187,14 @@ export default class DomHandler {
|
|||
let viewport = this.getViewport();
|
||||
let top, left;
|
||||
|
||||
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height)
|
||||
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
|
||||
top = targetOffset.top + windowScrollTop - elementOuterHeight;
|
||||
else
|
||||
element.style.transformOrigin = 'bottom';
|
||||
}
|
||||
else {
|
||||
top = targetOuterHeight + targetOffset.top + windowScrollTop;
|
||||
element.style.transformOrigin = 'top';
|
||||
}
|
||||
|
||||
if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width)
|
||||
left = targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth;
|
||||
|
@ -209,10 +213,14 @@ export default class DomHandler {
|
|||
var viewport = this.getViewport();
|
||||
var top, left;
|
||||
|
||||
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height)
|
||||
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
|
||||
top = -1 * (elementDimensions.height);
|
||||
else
|
||||
element.style.transformOrigin = 'bottom';
|
||||
}
|
||||
else {
|
||||
top = targetHeight;
|
||||
element.style.transformOrigin = 'top';
|
||||
}
|
||||
|
||||
if ((targetOffset.left + elementDimensions.width) > viewport.width)
|
||||
left = targetWidth - elementDimensions.width;
|
||||
|
|
Loading…
Reference in New Issue