Current state
This commit is contained in:
747
public/assets/plugins/modal/css/component.css
Normal file
747
public/assets/plugins/modal/css/component.css
Normal file
@@ -0,0 +1,747 @@
|
||||
/* General styles for the modal */
|
||||
|
||||
/*
|
||||
Styles for the html/body for special modal where we want 3d effects
|
||||
Note that we need a container wrapping all content on the page for the
|
||||
perspective effects (not including the modals and the overlay).
|
||||
*/
|
||||
.md-perspective,
|
||||
.md-perspective body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-perspective body {
|
||||
background: #222;
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #e74c3c;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.md-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
max-width: 630px;
|
||||
min-width: 320px;
|
||||
height: auto;
|
||||
z-index: 2000;
|
||||
visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.md-show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.md-overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
background: rgba(78, 78, 78, 0.8);
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show ~ .md-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Content styles */
|
||||
.md-content {
|
||||
color: #fff;
|
||||
background: #2D6199;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.md-content-red {
|
||||
background: #CE5959;
|
||||
}
|
||||
.md-content-dark {
|
||||
background: #363A41;
|
||||
}
|
||||
.md-content-white {
|
||||
color: #2B2E33;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
.md-content h3 {
|
||||
margin: 0;
|
||||
padding: 0.4em;
|
||||
text-align: center;
|
||||
font-size: 2.4em;
|
||||
font-weight: 300;
|
||||
opacity: 0.8;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 3px 3px 0 0;
|
||||
color:#2B2B2B;
|
||||
}
|
||||
|
||||
.md-content > div {
|
||||
padding: 15px 40px 30px;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.md-content > div p {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.md-content > div ul {
|
||||
margin: 0;
|
||||
padding: 0 0 30px 20px;
|
||||
}
|
||||
|
||||
.md-content > div ul li {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.md-content button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Individual modal styles with animations/transitions */
|
||||
|
||||
/* Effect 1: Fade in and scale up */
|
||||
.md-effect-1 .md-content {
|
||||
-webkit-transform: scale(0.7);
|
||||
-moz-transform: scale(0.7);
|
||||
-ms-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-1 .md-content {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 2: Slide from the right */
|
||||
.md-effect-2 .md-content {
|
||||
-webkit-transform: translateX(20%);
|
||||
-moz-transform: translateX(20%);
|
||||
-ms-transform: translateX(20%);
|
||||
transform: translateX(20%);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
}
|
||||
|
||||
.md-show.md-effect-2 .md-content {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 3: Slide from the bottom */
|
||||
.md-effect-3 .md-content {
|
||||
-webkit-transform: translateY(20%);
|
||||
-moz-transform: translateY(20%);
|
||||
-ms-transform: translateY(20%);
|
||||
transform: translateY(20%);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-3 .md-content {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 4: Newspaper */
|
||||
.md-effect-4 .md-content {
|
||||
-webkit-transform: scale(0) rotate(720deg);
|
||||
-moz-transform: scale(0) rotate(720deg);
|
||||
-ms-transform: scale(0) rotate(720deg);
|
||||
transform: scale(0) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-4 ~ .md-overlay,
|
||||
.md-effect-4 .md-content {
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-4 .md-content {
|
||||
-webkit-transform: scale(1) rotate(0deg);
|
||||
-moz-transform: scale(1) rotate(0deg);
|
||||
-ms-transform: scale(1) rotate(0deg);
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 5: fall */
|
||||
.md-effect-5.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-5 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translateZ(600px) rotateX(20deg);
|
||||
-moz-transform: translateZ(600px) rotateX(20deg);
|
||||
-ms-transform: translateZ(600px) rotateX(20deg);
|
||||
transform: translateZ(600px) rotateX(20deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-5 .md-content {
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-webkit-transform: translateZ(0px) rotateX(0deg);
|
||||
-moz-transform: translateZ(0px) rotateX(0deg);
|
||||
-ms-transform: translateZ(0px) rotateX(0deg);
|
||||
transform: translateZ(0px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 6: side fall */
|
||||
.md-effect-6.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-6 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
|
||||
-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
|
||||
-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
|
||||
transform: translate(30%) translateZ(600px) rotate(10deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-6 .md-content {
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
|
||||
-moz-transform: translate(0%) translateZ(0) rotate(0deg);
|
||||
-ms-transform: translate(0%) translateZ(0) rotate(0deg);
|
||||
transform: translate(0%) translateZ(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 7: slide and stick to top */
|
||||
.md-effect-7{
|
||||
top: 0;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.md-effect-7 .md-content {
|
||||
-webkit-transform: translateY(-200%);
|
||||
-moz-transform: translateY(-200%);
|
||||
-ms-transform: translateY(-200%);
|
||||
transform: translateY(-200%);
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
transition: all .3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-7 .md-content {
|
||||
-webkit-transform: translateY(0%);
|
||||
-moz-transform: translateY(0%);
|
||||
-ms-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
border-radius: 0 0 3px 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 8: 3D flip horizontal */
|
||||
.md-effect-8.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-8 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: rotateY(-70deg);
|
||||
-moz-transform: rotateY(-70deg);
|
||||
-ms-transform: rotateY(-70deg);
|
||||
transform: rotateY(-70deg);
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-8 .md-content {
|
||||
-webkit-transform: rotateY(0deg);
|
||||
-moz-transform: rotateY(0deg);
|
||||
-ms-transform: rotateY(0deg);
|
||||
transform: rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 9: 3D flip vertical */
|
||||
.md-effect-9.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-9 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: rotateX(-70deg);
|
||||
-moz-transform: rotateX(-70deg);
|
||||
-ms-transform: rotateX(-70deg);
|
||||
transform: rotateX(-70deg);
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-9 .md-content {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 10: 3D sign */
|
||||
.md-effect-10.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-10 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: rotateX(-60deg);
|
||||
-moz-transform: rotateX(-60deg);
|
||||
-ms-transform: rotateX(-60deg);
|
||||
transform: rotateX(-60deg);
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-10 .md-content {
|
||||
-webkit-transform: rotateX(0deg);
|
||||
-moz-transform: rotateX(0deg);
|
||||
-ms-transform: rotateX(0deg);
|
||||
transform: rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 11: Super scaled */
|
||||
.md-effect-11 .md-content {
|
||||
-webkit-transform: scale(2);
|
||||
-moz-transform: scale(2);
|
||||
-ms-transform: scale(2);
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-11 .md-content {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 12: Just me */
|
||||
.md-effect-12 .md-content {
|
||||
-webkit-transform: scale(0.8);
|
||||
-moz-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-12 ~ .md-overlay {
|
||||
background: #2B2E33;
|
||||
}
|
||||
|
||||
.md-effect-12 .md-content h3,
|
||||
.md-effect-12 .md-content {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.md-show.md-effect-12 .md-content {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 13: 3D slit */
|
||||
.md-effect-13.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-13 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translateZ(-3000px) rotateY(90deg);
|
||||
-moz-transform: translateZ(-3000px) rotateY(90deg);
|
||||
-ms-transform: translateZ(-3000px) rotateY(90deg);
|
||||
transform: translateZ(-3000px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-13 .md-content {
|
||||
-webkit-animation: slit .7s forwards ease-out;
|
||||
-moz-animation: slit .7s forwards ease-out;
|
||||
animation: slit .7s forwards ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slit {
|
||||
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
|
||||
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes slit {
|
||||
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
|
||||
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slit {
|
||||
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
|
||||
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Effect 14: 3D Rotate from bottom */
|
||||
.md-effect-14.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-14 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translateY(100%) rotateX(90deg);
|
||||
-moz-transform: translateY(100%) rotateX(90deg);
|
||||
-ms-transform: translateY(100%) rotateX(90deg);
|
||||
transform: translateY(100%) rotateX(90deg);
|
||||
-webkit-transform-origin: 0 100%;
|
||||
-moz-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.md-show.md-effect-14 .md-content {
|
||||
-webkit-transform: translateY(0%) rotateX(0deg);
|
||||
-moz-transform: translateY(0%) rotateX(0deg);
|
||||
-ms-transform: translateY(0%) rotateX(0deg);
|
||||
transform: translateY(0%) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 15: 3D Rotate in from left */
|
||||
.md-effect-15.md-modal {
|
||||
-webkit-perspective: 1300px;
|
||||
-moz-perspective: 1300px;
|
||||
perspective: 1300px;
|
||||
}
|
||||
|
||||
.md-effect-15 .md-content {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
|
||||
-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
|
||||
-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
|
||||
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
|
||||
-webkit-transform-origin: 0 100%;
|
||||
-moz-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-15 .md-content {
|
||||
-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
|
||||
-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
|
||||
-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
|
||||
transform: translateZ(0px) translateX(0%) rotateY(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 16: Blur */
|
||||
.md-show.md-effect-16 ~ .md-overlay {
|
||||
background: rgba(80, 80, 80, 0.60);
|
||||
}
|
||||
|
||||
.md-show.md-effect-16 ~ .container {
|
||||
-webkit-filter: blur(3px);
|
||||
-moz-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
.md-effect-16 .md-content {
|
||||
-webkit-transform: translateY(-5%);
|
||||
-moz-transform: translateY(-5%);
|
||||
-ms-transform: translateY(-5%);
|
||||
transform: translateY(-5%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-16 ~ .container,
|
||||
.md-effect-16 .md-content {
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-16 .md-content {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Effect 17: Slide in from bottom with perspective on container */
|
||||
.md-show.md-effect-17 ~ .container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
-moz-transition: -moz-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-17 ~ .container,
|
||||
.md-show.md-effect-17 ~ .md-overlay {
|
||||
-webkit-transform: rotateX(-2deg);
|
||||
-moz-transform: rotateX(-2deg);
|
||||
-ms-transform: rotateX(-2deg);
|
||||
transform: rotateX(-2deg);
|
||||
-webkit-transform-origin: 50% 0%;
|
||||
-moz-transform-origin: 50% 0%;
|
||||
transform-origin: 50% 0%;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.md-effect-17 .md-content {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(200%);
|
||||
-moz-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
.md-show.md-effect-17 .md-content {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3s 0.2s;
|
||||
-moz-transition: all 0.3s 0.2s;
|
||||
transition: all 0.3s 0.2s;
|
||||
}
|
||||
|
||||
/* Effect 18: Slide from right with perspective on container */
|
||||
.md-show.md-effect-18 ~ .container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-show.md-effect-18 ~ .md-overlay {
|
||||
background: rgba(143,27,15,0.8);
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-18 ~ .container,
|
||||
.md-show.md-effect-18 ~ .md-overlay {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform-origin: 0% 50%;
|
||||
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: 0% 50%;
|
||||
animation: rotateRightSideFirst 0.5s forwards ease-in;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotateRightSideFirst {
|
||||
50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
|
||||
100% { -webkit-transform: translateZ(-200px); }
|
||||
}
|
||||
|
||||
@-moz-keyframes rotateRightSideFirst {
|
||||
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
|
||||
100% { -moz-transform: translateZ(-200px); }
|
||||
}
|
||||
|
||||
@keyframes rotateRightSideFirst {
|
||||
50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
|
||||
100% { transform: translateZ(-200px); }
|
||||
}
|
||||
|
||||
.md-effect-18 .md-content {
|
||||
-webkit-transform: translateX(200%);
|
||||
-moz-transform: translateX(200%);
|
||||
-ms-transform: translateX(200%);
|
||||
transform: translateX(200%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-18 .md-content {
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.5s 0.1s;
|
||||
-moz-transition: all 0.5s 0.1s;
|
||||
transition: all 0.5s 0.1s;
|
||||
}
|
||||
|
||||
/* Effect 19: Slip in from the top with perspective on container */
|
||||
.md-show.md-effect-19 ~ .container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-show.md-effect-19 ~ .md-overlay {
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-19 ~ .container,
|
||||
.md-show.md-effect-19 ~ .md-overlay {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
-webkit-animation: OpenTop 0.5s forwards ease-in;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform-origin: 50% 100%;
|
||||
-moz-animation: OpenTop 0.5s forwards ease-in;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: 50% 100%;
|
||||
animation: OpenTop 0.5s forwards ease-in;
|
||||
}
|
||||
|
||||
@-webkit-keyframes OpenTop {
|
||||
50% {
|
||||
-webkit-transform: rotateX(10deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes OpenTop {
|
||||
50% {
|
||||
-moz-transform: rotateX(10deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes OpenTop {
|
||||
50% {
|
||||
transform: rotateX(10deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.md-effect-19 .md-content {
|
||||
-webkit-transform: translateY(-200%);
|
||||
-moz-transform: translateY(-200%);
|
||||
-ms-transform: translateY(-200%);
|
||||
transform: translateY(-200%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-show.md-effect-19 .md-content {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.5s 0.1s;
|
||||
-moz-transition: all 0.5s 0.1s;
|
||||
transition: all 0.5s 0.1s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 32em) {
|
||||
body { font-size: 75%; }
|
||||
}
|
||||
184
public/assets/plugins/modal/css/default.css
Normal file
184
public/assets/plugins/modal/css/default.css
Normal file
@@ -0,0 +1,184 @@
|
||||
/* General Demo Style */
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
|
||||
@font-face {
|
||||
font-family: 'codropsicons';
|
||||
src:url('../fonts/codropsicons/codropsicons.eot');
|
||||
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
body, html { font-size: 100%; padding: 0; margin: 0; }
|
||||
|
||||
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix:before, .clearfix:after { content: " "; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif;
|
||||
color: #fff;
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c0392b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Header Style */
|
||||
.main,
|
||||
.container > header {
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.container > header {
|
||||
text-align: center;
|
||||
background: #d94839;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.container > header h1 {
|
||||
font-size: 2.625em;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.container > header span {
|
||||
display: block;
|
||||
font-size: 60%;
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0.6em 0.1em;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main {
|
||||
max-width: 69em;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 2em;
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column:nth-child(2) {
|
||||
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.column p {
|
||||
font-weight: 300;
|
||||
font-size: 2em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* To Navigation Style */
|
||||
.codrops-top {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
font-size: 0.69em;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.codrops-top a {
|
||||
padding: 0 1em;
|
||||
letter-spacing: 0.1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.codrops-top a:hover {
|
||||
color: #e74c3c;
|
||||
background: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.codrops-top span.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.codrops-top span.right a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
font-family: 'codropsicons';
|
||||
margin: 0 4px;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon-drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon-prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 0.6em 1.2em;
|
||||
background: #c0392b;
|
||||
color: #fff;
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 3px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #A5281B;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 46.0625em) {
|
||||
.column {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.column p {
|
||||
text-align: left;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.column:nth-child(2) {
|
||||
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
|
||||
.codrops-icon span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.eot
Normal file
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.eot
Normal file
Binary file not shown.
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="14"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="codropsicons" horiz-adv-x="448" >
|
||||
<font-face units-per-em="448" ascent="384" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="448" />
|
||||
<glyph unicode="" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
|
||||
<glyph unicode="" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
|
||||
l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
|
||||
c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
|
||||
<glyph unicode="" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
|
||||
M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
|
||||
s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
|
||||
c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
|
||||
<glyph unicode=" " horiz-adv-x="224" />
|
||||
<glyph class="hidden" unicode="" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.ttf
Normal file
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.ttf
Normal file
Binary file not shown.
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.woff
Normal file
BIN
public/assets/plugins/modal/fonts/codropsicons/codropsicons.woff
Normal file
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
|
||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
|
||||
|
||||
|
||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
|
||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
|
||||
80
public/assets/plugins/modal/js/classie.js
Normal file
80
public/assets/plugins/modal/js/classie.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/*!
|
||||
* classie - class helper functions
|
||||
* from bonzo https://github.com/ded/bonzo
|
||||
*
|
||||
* classie.has( elem, 'my-class' ) -> true/false
|
||||
* classie.add( elem, 'my-new-class' )
|
||||
* classie.remove( elem, 'my-unwanted-class' )
|
||||
* classie.toggle( elem, 'my-class' )
|
||||
*/
|
||||
|
||||
/*jshint browser: true, strict: true, undef: true */
|
||||
/*global define: false */
|
||||
|
||||
( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// class helper functions from bonzo https://github.com/ded/bonzo
|
||||
|
||||
function classReg( className ) {
|
||||
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
|
||||
}
|
||||
|
||||
// classList support for class management
|
||||
// altho to be fair, the api sucks because it won't accept multiple classes at once
|
||||
var hasClass, addClass, removeClass;
|
||||
|
||||
if ( 'classList' in document.documentElement ) {
|
||||
hasClass = function( elem, c ) {
|
||||
return elem.classList.contains( c );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
elem.classList.add( c );
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.classList.remove( c );
|
||||
};
|
||||
}
|
||||
else {
|
||||
hasClass = function( elem, c ) {
|
||||
return classReg( c ).test( elem.className );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
if ( !hasClass( elem, c ) ) {
|
||||
elem.className = elem.className + ' ' + c;
|
||||
}
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.className = elem.className.replace( classReg( c ), ' ' );
|
||||
};
|
||||
}
|
||||
|
||||
function toggleClass( elem, c ) {
|
||||
var fn = hasClass( elem, c ) ? removeClass : addClass;
|
||||
fn( elem, c );
|
||||
}
|
||||
|
||||
var classie = {
|
||||
// full names
|
||||
hasClass: hasClass,
|
||||
addClass: addClass,
|
||||
removeClass: removeClass,
|
||||
toggleClass: toggleClass,
|
||||
// short names
|
||||
has: hasClass,
|
||||
add: addClass,
|
||||
remove: removeClass,
|
||||
toggle: toggleClass
|
||||
};
|
||||
|
||||
// transport
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( classie );
|
||||
} else {
|
||||
// browser global
|
||||
window.classie = classie;
|
||||
}
|
||||
|
||||
})( window );
|
||||
786
public/assets/plugins/modal/js/css-filters-polyfill.js
Normal file
786
public/assets/plugins/modal/js/css-filters-polyfill.js
Normal file
@@ -0,0 +1,786 @@
|
||||
/*!
|
||||
* css-filters-polyfill.js
|
||||
*
|
||||
* Author: Christian Schepp Schaefer
|
||||
* Summary: A polyfill for CSS filter effects
|
||||
* License: MIT
|
||||
* Version: 0.22
|
||||
*
|
||||
* URL:
|
||||
* https://github.com/Schepp/
|
||||
*
|
||||
*/
|
||||
;(function(window){
|
||||
var polyfilter = {
|
||||
// Detect if we are dealing with IE <= 9
|
||||
// http://james.padolsey.com/javascript/detect-_ie-in-js-using-conditional-comments/
|
||||
_ie: (function(){
|
||||
var undef,
|
||||
v = 3,
|
||||
div = document.createElement('div'),
|
||||
all = div.getElementsByTagName('i');
|
||||
|
||||
while(
|
||||
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
||||
all[0]
|
||||
);
|
||||
|
||||
return v > 4 ? v : undef;
|
||||
}()),
|
||||
|
||||
_svg_cache: {},
|
||||
|
||||
_create_svg_element: function(tagname,attributes){
|
||||
var xmlns = 'http://www.w3.org/2000/svg';
|
||||
var elem = document.createElementNS(xmlns,tagname);
|
||||
for(key in attributes){
|
||||
elem.setAttributeNS(null,key,attributes[key]);
|
||||
}
|
||||
|
||||
return elem;
|
||||
},
|
||||
|
||||
_create_svg: function(id,filterelements){
|
||||
var xmlns = 'http://www.w3.org/2000/svg';
|
||||
var svg = document.createElementNS(xmlns,'svg');
|
||||
svg.setAttributeNS(null,'width','0');
|
||||
svg.setAttributeNS(null,'height','0');
|
||||
svg.setAttributeNS(null,'style','position:absolute');
|
||||
|
||||
var svg_filter = document.createElementNS(xmlns,'filter');
|
||||
svg_filter.setAttributeNS(null,'id',id);
|
||||
svg.appendChild(svg_filter);
|
||||
|
||||
for(var i = 0; i < filterelements.length; i++){
|
||||
svg_filter.appendChild(filterelements[i]);
|
||||
}
|
||||
|
||||
return svg;
|
||||
},
|
||||
|
||||
_pending_stylesheets: 0,
|
||||
|
||||
_stylesheets: [],
|
||||
|
||||
_development_mode: (function(){
|
||||
if(location.hostname === 'localhost' || location.hostname.search(/.local$/) !== -1 || location.hostname.search(/\d+\.\d+\.\d+\.\d+/) !== -1){
|
||||
if(window.console) console.log('Detected localhost or IP address. Assuming you are a developer. Caching of stylesheets is disabled.');
|
||||
return true;
|
||||
}
|
||||
if(window.console) console.log('Caching of stylesheets is enabled. You need to refresh twice to see any changes.');
|
||||
return false;
|
||||
})(),
|
||||
|
||||
process_stylesheets: function(){
|
||||
var xmlHttp = [];
|
||||
|
||||
// Check if path to library is correct, do that 2 secs. after this to not disturb initial processing
|
||||
window.setTimeout(function(){
|
||||
if (window.XMLHttpRequest) {
|
||||
var xmlHttpCheck = new XMLHttpRequest();
|
||||
} else if (window.ActiveXObject) {
|
||||
var xmlHttpCheck = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlHttpCheck.open('GET', window.polyfilter_scriptpath + 'htc/sepia.htc', true);
|
||||
xmlHttpCheck.onreadystatechange = function(){
|
||||
if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
|
||||
alert('The configured path \r\rvar polyfilter_scriptpath = "' + window.polyfilter_scriptpath + '"\r\rseems wrong!\r\rConfigure the polyfill\'s correct absolute(!) script path before referencing the css-filters-polyfill.js, like so:\r\rvar polyfilter_scriptpath = "/js/css-filters-polyfill/";\r\rLeaving IE dead in the water is no option. You damn Mac user... ;)');
|
||||
}
|
||||
};
|
||||
try{
|
||||
xmlHttpCheck.send(null);
|
||||
} catch(e){}
|
||||
},2000);
|
||||
|
||||
|
||||
var stylesheets = document.querySelectorAll ? document.querySelectorAll('style,link[rel="stylesheet"]') : document.getElementsByTagName('*');
|
||||
|
||||
for(var i = 0; i < stylesheets.length; i++){
|
||||
(function(i){
|
||||
switch(stylesheets[i].nodeName){
|
||||
default:
|
||||
break;
|
||||
|
||||
case 'STYLE':
|
||||
polyfilter._stylesheets.push({
|
||||
media: stylesheets[i].media || 'all',
|
||||
content: stylesheets[i].innerHTML
|
||||
});
|
||||
break;
|
||||
|
||||
case 'LINK':
|
||||
if(stylesheets[i].rel === 'stylesheet'){
|
||||
var index = polyfilter._stylesheets.length;
|
||||
|
||||
polyfilter._stylesheets.push({
|
||||
media: stylesheets[i].media || 'all'
|
||||
});
|
||||
|
||||
polyfilter._pending_stylesheets++;
|
||||
|
||||
// Fetch external stylesheet
|
||||
var href = stylesheets[i].href;
|
||||
|
||||
// Use localStorage as cache for stylesheets, if available
|
||||
if(!polyfilter._development_mode && window.localStorage && window.localStorage.getItem('polyfilter_' + href)){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = localStorage.getItem('polyfilter_' + href);
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
|
||||
// Always fetch stylesheets to reflect possible changes
|
||||
try{
|
||||
if(window.XMLHttpRequest) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
} else if(window.ActiveXObject) {
|
||||
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlHttp.open('GET', href, true);
|
||||
xmlHttp.onreadystatechange = function(){
|
||||
if(xmlHttp.readyState === 4){
|
||||
if(xmlHttp.status === 0){
|
||||
if(window.console) console.log('Could not fetch external CSS via HTTP-Request ' + href + '. Probably because of cross origin.');
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = xmlHttp.responseText;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = xmlHttp.responseText;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
// Cache stylesheet in localStorage, if available
|
||||
if(!polyfilter._development_mode && window.localStorage){
|
||||
try{
|
||||
window.localStorage.setItem('polyfilter_' + href,polyfilter._stylesheets[index].content)
|
||||
}
|
||||
catch(e){
|
||||
if(window.console) console.log('Local storage quota have been exceeded. Caching of stylesheet ' + href + ' is not possible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
try{
|
||||
xmlHttp.send(null);
|
||||
} catch(e){
|
||||
if(window.console) console.log('Could not fetch external CSS via HTTP-Request ' + href + '. Are you maybe testing using the file://-protocol?');
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch(e){}
|
||||
}
|
||||
break;
|
||||
}
|
||||
})(i);
|
||||
}
|
||||
if(this._pending_stylesheets === 0){
|
||||
this.process();
|
||||
}
|
||||
},
|
||||
|
||||
_processDeclarations: function(rule){
|
||||
var newstyles = '';
|
||||
for(var k in rule.declarations){
|
||||
var declaration = rule.declarations[k];
|
||||
|
||||
if(declaration.property === 'filter'){
|
||||
|
||||
if(document.querySelectorAll){
|
||||
var elems = document.querySelectorAll(rule.mSelectorText);
|
||||
for(var k = 0; k < elems.length; k++){
|
||||
elems[k].style.polyfilterStore = declaration.valueText;
|
||||
}
|
||||
}
|
||||
|
||||
var gluedvalues = declaration.valueText;
|
||||
var values = gluedvalues.split(/\)\s+/),
|
||||
properties = {
|
||||
filtersW3C: [],
|
||||
filtersWebKit: [],
|
||||
filtersSVG: [],
|
||||
filtersIE: [],
|
||||
behaviorsIE: []
|
||||
};
|
||||
|
||||
for(idx in values){
|
||||
var value = values[idx] + ')';
|
||||
|
||||
currentproperties = polyfilter.convert(value);
|
||||
|
||||
for(key in currentproperties){
|
||||
if(typeof properties[key] !== 'undefined'){
|
||||
properties[key] = properties[key].concat(currentproperties[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
newstyles += rule.mSelectorText + '{';
|
||||
if(properties['filtersW3C'].length > 0){
|
||||
var filter =
|
||||
webkitFilter =
|
||||
mozFilter =
|
||||
oFilter =
|
||||
msFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
|
||||
if(properties['filtersWebKit'] && properties['filtersWebKit'].length > 0){
|
||||
webkitFilter = properties['filtersWebKit'].join(' ');
|
||||
}
|
||||
|
||||
if(typeof this._ie === 'undefined'){
|
||||
newstyles += '-ms-filter:' + msFilter + ';';
|
||||
}
|
||||
|
||||
newstyles += '-webkit-filter:' + webkitFilter + ';';
|
||||
newstyles += '-moz-filter:' + mozFilter + ';';
|
||||
newstyles += '-o-filter:' + oFilter + ';';
|
||||
}
|
||||
if(properties['filtersSVG'].length > 0){
|
||||
if(properties['filtersSVG'][0] != 'none'){
|
||||
var id = gluedvalues.replace(/[^a-z0-9]/g,'');
|
||||
|
||||
if(typeof this._svg_cache[id] === 'undefined'){
|
||||
this._svg_cache[id] = this._create_svg(id,properties['filtersSVG']);
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
document.body.appendChild(this._svg_cache[id]);
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(this._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
document.body.appendChild(this._svg_cache[id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
newstyles += 'filter: url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(this._svg_cache[id]);
|
||||
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
newstyles += 'filter: url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
newstyles += 'filter: url(\'data:image/svg+xml;utf8,' + svgString + '#' + id + '\')';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
newstyles += 'filter: none;';
|
||||
}
|
||||
}
|
||||
if(typeof this._ie !== 'undefined'){
|
||||
if(properties['filtersIE'].length > 0){
|
||||
var filtersIE = properties['filtersIE'].join(' ');
|
||||
|
||||
newstyles += 'filter:' + filtersIE + ';';
|
||||
}
|
||||
if(properties['behaviorsIE'].length > 0){
|
||||
var behaviorsIE = properties['behaviorsIE'].join(' ');
|
||||
|
||||
newstyles += 'behavior:' + behaviorsIE + ';';
|
||||
}
|
||||
}
|
||||
newstyles += '}\r\n';
|
||||
}
|
||||
}
|
||||
return newstyles;
|
||||
},
|
||||
|
||||
// Absolute path to the .htc-files
|
||||
scriptpath:
|
||||
window.polyfilter_scriptpath ? window.polyfilter_scriptpath : (function(){
|
||||
alert('Please configure the polyfill\'s absolute(!) script path before referencing the css-filters-polyfill.js, like so:\r\nvar polyfilter_scriptpath = "/js/css-filters-polyfill/";');
|
||||
return './'
|
||||
})(),
|
||||
|
||||
// process stylesheets
|
||||
process: function(){
|
||||
var parser = new CSSParser();
|
||||
|
||||
for(var i = 0; i < this._stylesheets.length; i++){
|
||||
var newstyles = '';
|
||||
var sheet = parser.parse(this._stylesheets[i].content, false, true);
|
||||
if(sheet !== null) for(var j in sheet.cssRules){
|
||||
var rule = sheet.cssRules[j];
|
||||
|
||||
switch(rule.type){
|
||||
default:
|
||||
break;
|
||||
|
||||
case 1:
|
||||
newstyles += this._processDeclarations(rule);
|
||||
break;
|
||||
|
||||
case 4:
|
||||
newstyles += '@media ' + rule.media.join(',') + '{';
|
||||
for(var k in rule.cssRules){
|
||||
var mediarule = rule.cssRules[k];
|
||||
|
||||
newstyles += this._processDeclarations(mediarule);
|
||||
}
|
||||
newstyles += '}';
|
||||
break;
|
||||
}
|
||||
}
|
||||
var newstylesheet = document.createElement('style');
|
||||
newstylesheet.setAttribute('media',this._stylesheets[i].media);
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
newstylesheet.innerHTML = newstyles;
|
||||
document.getElementsByTagName('head')[0].appendChild(newstylesheet);
|
||||
}
|
||||
else {
|
||||
document.getElementsByTagName('head')[0].appendChild(newstylesheet);
|
||||
newstylesheet.styleSheet.cssText = newstyles;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
init: function(){
|
||||
if(Object.defineProperty){
|
||||
Object.defineProperty(CSSStyleDeclaration.prototype, 'polyfilter', {
|
||||
get: function(){
|
||||
return this.polyfilterStore;
|
||||
},
|
||||
set: function(gluedvalues){
|
||||
values = gluedvalues.split(/\)\s+/);
|
||||
var properties = {
|
||||
filtersW3C: [],
|
||||
filtersWebKit: [],
|
||||
filtersSVG: [],
|
||||
filtersIE: [],
|
||||
behaviorsIE: []
|
||||
}
|
||||
|
||||
for(idx in values){
|
||||
var value = values[idx] + ')';
|
||||
|
||||
currentproperties = polyfilter.convert(value);
|
||||
|
||||
for(key in currentproperties){
|
||||
if(typeof properties[key] !== 'undefined'){
|
||||
properties[key] = properties[key].concat(currentproperties[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(properties['filtersW3C'].length > 0){
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
this.msFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
}
|
||||
|
||||
this.webkitFilter =
|
||||
this.mozFilter =
|
||||
this.oFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
}
|
||||
if(properties['filtersWebKit'].length > 0){
|
||||
this.webkitFilter = properties['filtersWebKit'].join(' ');
|
||||
}
|
||||
if(properties['filtersSVG'].length > 0){
|
||||
if(properties['filtersSVG'][0] != 'none'){
|
||||
var id = gluedvalues.replace(/[^a-z0-9]/g,'');
|
||||
|
||||
if(typeof polyfilter._svg_cache[id] === 'undefined'){
|
||||
polyfilter._svg_cache[id] = polyfilter._create_svg(id,properties['filtersSVG']);
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
document.body.appendChild(polyfilter._svg_cache[id]);
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(polyfilter._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
document.body.appendChild(polyfilter._svg_cache[id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
this.filter = 'url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(polyfilter._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
this.filter = 'url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
this.filter = 'url(\'data:image/svg+xml;utf8,' + svgString + '#' + id + '\')';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.filter = 'none';
|
||||
}
|
||||
}
|
||||
if(typeof polyfilter._ie !== 'undefined'){
|
||||
if(properties['filtersIE'].length > 0){
|
||||
this.filter =
|
||||
properties['filtersIE'].join(' ');
|
||||
}
|
||||
else {
|
||||
this.filter = '';
|
||||
}
|
||||
if(properties['behaviorsIE'].length > 0){
|
||||
this.behavior =
|
||||
properties['behaviorsIE'].join(' ');
|
||||
}
|
||||
else {
|
||||
this.behavior = '';
|
||||
}
|
||||
}
|
||||
this.polyfilterStore = gluedvalues;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
convert: function(value){
|
||||
// None
|
||||
var fmatch = value.match(/none/i);
|
||||
if(fmatch !== null){
|
||||
var properties = this.filters.none();
|
||||
}
|
||||
// Grayscale
|
||||
var fmatch = value.match(/(grayscale)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.grayscale(amount);
|
||||
}
|
||||
// Sepia
|
||||
var fmatch = value.match(/(sepia)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.sepia(amount);
|
||||
}
|
||||
// Blur
|
||||
var fmatch = value.match(/(blur)\(([0-9]+)[px]*\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseInt(fmatch[2],10),
|
||||
properties = this.filters.blur(amount);
|
||||
}
|
||||
// Invert
|
||||
var fmatch = value.match(/(invert)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.invert(amount);
|
||||
}
|
||||
// Brightness
|
||||
var fmatch = value.match(/(brightness)\(([0-9\.]+)%\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.brightness(amount);
|
||||
}
|
||||
// Drop Shadow
|
||||
var fmatch = value.match(/(drop\-shadow)\(([0-9]+)[px]*\s+([0-9]+)[px]*\s+([0-9]+)[px]*\s+([#0-9]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var offsetX = parseInt(fmatch[2],10),
|
||||
offsetY = parseInt(fmatch[3],10),
|
||||
radius = parseInt(fmatch[4],10),
|
||||
color = fmatch[5],
|
||||
properties = this.filters.dropShadow(offsetX,offsetY,radius,color);
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// EFFECTS SECTION -------------------------------------------------------------------------------------------------------------
|
||||
|
||||
filters: {
|
||||
// None
|
||||
none: function(){
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['none'];
|
||||
|
||||
// Firefox
|
||||
properties['filtersSVG'] = ['none'];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['none'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Grayscale
|
||||
grayscale: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['grayscale(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feColorMatrix',{
|
||||
type: 'matrix',
|
||||
values: (0.2126 + 0.7874 * (1 - amount)) + ' '
|
||||
+ (0.7152 - 0.7152 * (1 - amount)) + ' '
|
||||
+ (0.0722 - 0.0722 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.2126 - 0.2126 * (1 - amount)) + ' '
|
||||
+ (0.7152 + 0.2848 * (1 - amount)) + ' '
|
||||
+ (0.0722 - 0.0722 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.2126 - 0.2126 * (1 - amount)) + ' '
|
||||
+ (0.7152 - 0.7152 * (1 - amount)) + ' '
|
||||
+ (0.0722 + 0.9278 * (1 - amount)) + ' 0 0 0 0 0 1 0'
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['gray'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Sepia
|
||||
sepia: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['sepia(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feColorMatrix',{
|
||||
type: 'matrix',
|
||||
values: (0.393 + 0.607 * (1 - amount)) + ' '
|
||||
+ (0.769 - 0.769 * (1 - amount)) + ' '
|
||||
+ (0.189 - 0.189 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.349 - 0.349 * (1 - amount)) + ' '
|
||||
+ (0.686 + 0.314 * (1 - amount)) + ' '
|
||||
+ (0.168 - 0.168 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.272 - 0.272 * (1 - amount)) + ' '
|
||||
+ (0.534 - 0.534 * (1 - amount)) + ' '
|
||||
+ (0.131 + 0.869 * (1 - amount)) + ' 0 0 0 0 0 1 0'
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['gray','progid:DXImageTransform.Microsoft.Light()'] : [];
|
||||
properties['behaviorsIE'] = amount >= 0.5 ? ['url("' + polyfilter.scriptpath + 'htc/sepia.htc")'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Blur
|
||||
blur: function(amount){
|
||||
amount = Math.round(amount) || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['blur(' + amount + 'px)'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feGaussianBlur',{
|
||||
'in': 'SourceGraphic',
|
||||
stdDeviation: amount
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Blur(pixelradius=' + amount + ')'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Invert
|
||||
invert: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['invert(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feComponentTransfer',{});
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncR',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncG',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncB',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['invert'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Brightness
|
||||
brightness: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['brightness(' + amount + '%)'];
|
||||
|
||||
// WebKit "specialty"
|
||||
properties['filtersWebKit'] = ['brightness(' + (amount - 100) + '%)'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feComponentTransfer',{});
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncR',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncG',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncB',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Light()'];
|
||||
properties['behaviorsIE'] = ['url("' + polyfilter.scriptpath + 'htc/brightness.htc")'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Drop Shadow
|
||||
dropShadow: function(offsetX,offsetY,radius,color){
|
||||
offsetX = Math.round(offsetX) || 0;
|
||||
offsetY = Math.round(offsetY) || 0;
|
||||
radius = Math.round(radius) || 0;
|
||||
color = color || '#000000';
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['drop-shadow(' + offsetX + 'px ' + offsetY + 'px ' + radius + 'px ' + color + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feGaussianBlur',{
|
||||
'in': 'SourceAlpha',
|
||||
stdDeviation: radius
|
||||
});
|
||||
var svg_fe2 = polyfilter._create_svg_element('feOffset',{
|
||||
dx: offsetX + 1,
|
||||
dy: offsetY + 1,
|
||||
result: 'offsetblur'
|
||||
});
|
||||
var svg_fe3 = polyfilter._create_svg_element('feFlood',{
|
||||
'flood-color': color
|
||||
});
|
||||
var svg_fe4 = polyfilter._create_svg_element('feComposite',{
|
||||
in2: 'offsetblur',
|
||||
operator: 'in'
|
||||
});
|
||||
var svg_fe5 = polyfilter._create_svg_element('feMerge',{});
|
||||
var svg_fe5sub = polyfilter._create_svg_element('feMergeNode',{});
|
||||
svg_fe5.appendChild(svg_fe5sub);
|
||||
var svg_fe5sub = polyfilter._create_svg_element('feMergeNode',{
|
||||
'in': 'SourceGraphic'
|
||||
});
|
||||
svg_fe5.appendChild(svg_fe5sub);
|
||||
properties['filtersSVG'] = [svg_fe1,svg_fe2,svg_fe3,svg_fe4,svg_fe5];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Glow(color=' + color + ',strength=0)','progid:DXImageTransform.Microsoft.Shadow(color=' + color + ',strength=0)'];
|
||||
properties['behaviorsIE'] = ['url("' + polyfilter.scriptpath + 'htc/drop-shadow.htc")'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inialize, either via jQuery...
|
||||
if(window.jQuery){
|
||||
window.jQuery(document).ready(function(e) {
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
// or via contentLoaded...
|
||||
else if(window.contentLoaded){
|
||||
contentLoaded(window,function(){
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
// or on DOM ready / load
|
||||
else {
|
||||
if(window.addEventListener) // W3C standard
|
||||
{
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
polyfilter.process_stylesheets();
|
||||
}, false);
|
||||
}
|
||||
else if(window.attachEvent) // Microsoft
|
||||
{
|
||||
window.attachEvent('onload', function(){
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Install style setters and getters
|
||||
polyfilter.init();
|
||||
})(window);
|
||||
5449
public/assets/plugins/modal/js/cssParser.js
Normal file
5449
public/assets/plugins/modal/js/cssParser.js
Normal file
File diff suppressed because it is too large
Load Diff
58
public/assets/plugins/modal/js/modalEffects.js
Normal file
58
public/assets/plugins/modal/js/modalEffects.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* modalEffects.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2013, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
var ModalEffects = (function() {
|
||||
|
||||
function init() {
|
||||
|
||||
var overlay = document.querySelector( '.md-overlay' );
|
||||
|
||||
[].slice.call( document.querySelectorAll( ".btn-effect" ) ).forEach( function( el, i ) {
|
||||
|
||||
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
|
||||
close = modal.querySelector( '.btn-modal' );
|
||||
console.log(modal);
|
||||
|
||||
function removeModal( hasPerspective ) {
|
||||
classie.remove( modal, 'md-show' );
|
||||
|
||||
if( hasPerspective ) {
|
||||
classie.remove( document.documentElement, 'md-perspective' );
|
||||
}
|
||||
}
|
||||
|
||||
function removeModalHandler() {
|
||||
removeModal( classie.has( el, 'md-setperspective' ) );
|
||||
}
|
||||
|
||||
el.addEventListener( 'click', function( ev ) {
|
||||
classie.add( modal, 'md-show' );
|
||||
overlay.removeEventListener( 'click', removeModalHandler );
|
||||
overlay.addEventListener( 'click', removeModalHandler );
|
||||
|
||||
if( classie.has( el, 'md-setperspective' ) ) {
|
||||
setTimeout( function() {
|
||||
classie.add( document.documentElement, 'md-perspective' );
|
||||
}, 25 );
|
||||
}
|
||||
});
|
||||
|
||||
close.addEventListener( 'click', function( ev ) {
|
||||
ev.stopPropagation();
|
||||
removeModalHandler();
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
})();
|
||||
4
public/assets/plugins/modal/js/modernizr.custom.js
Normal file
4
public/assets/plugins/modal/js/modernizr.custom.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user