mirror of https://github.com/IoTcat/tips.git
parent
841bb6126b
commit
78f7cb5a08
9 changed files with 3944 additions and 0 deletions
@ -0,0 +1,984 @@ |
||||
@charset "utf-8"; |
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, |
||||
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, |
||||
address, big, cite, code, del, dfn, em, font, img, ins, |
||||
kbd, q, s, samp, small, strike, strong, sub, sup, tt, |
||||
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, |
||||
table, caption, tbody, tfoot, thead, tr, th, td { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
font-weight: inherit; |
||||
font-style: inherit; |
||||
font-size: 100%; |
||||
font-family: inherit; |
||||
vertical-align: baseline; |
||||
} |
||||
:focus { outline: 0;} |
||||
a:link, a:visited, a:active{text-decoration:none; color: #d48d37} |
||||
table a:hover{ |
||||
text-decoration: underline; |
||||
} |
||||
table { border-collapse: separate;border-spacing: 0; width: 100%;} |
||||
th, td {text-align: left; font-weight: normal;} |
||||
tr{line-height: 30px;} |
||||
img, iframe {border: none; text-decoration:none;} |
||||
ol, ul {list-style: none;} |
||||
input, textarea, select, button {font-size: 100%;font-family: inherit;} |
||||
object{display: block;} |
||||
|
||||
img { |
||||
vertical-align: middle; |
||||
} |
||||
fieldset, figure { |
||||
border: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
textarea { |
||||
resize: vertical; |
||||
} |
||||
strong{ |
||||
font-weight:bold; |
||||
} |
||||
em{ |
||||
font-style:italic; |
||||
} |
||||
p{ |
||||
color:#333; |
||||
} |
||||
*, |
||||
*:after, |
||||
*::before{box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} |
||||
|
||||
|
||||
|
||||
body{ |
||||
font-family: arial; |
||||
background: #F0F2F1; |
||||
overflow-x:hidden; |
||||
} |
||||
.overflow-hidden{ |
||||
overflow: hidden !important; |
||||
} |
||||
|
||||
.title{ |
||||
font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; |
||||
padding: 1em 0; |
||||
} |
||||
.hide{ |
||||
display: none; |
||||
} |
||||
|
||||
.in-block{ |
||||
display: inline-block; |
||||
} |
||||
|
||||
.text-center{ |
||||
text-align: center; |
||||
} |
||||
.right{ |
||||
float: right |
||||
} |
||||
|
||||
.highlight{ |
||||
height: 100vh; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
.highlight::before{ |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
background: url("../img/img") no-repeat 100% 100%; |
||||
background-size: cover; |
||||
opacity: 0.3; |
||||
pointer-events: none; |
||||
} |
||||
.highlight::after{ |
||||
display: none; |
||||
content: ''; |
||||
width: 31px; |
||||
height: 167px; |
||||
right: 31px; |
||||
top: 50%; |
||||
position: fixed; |
||||
z-index: 9; |
||||
background: rgba(0, 0, 0, 0.05); |
||||
margin: -85px 0 0 0; |
||||
border-radius: 50px; |
||||
} |
||||
|
||||
.bg{ |
||||
min-height: 5px; |
||||
background: #c21500; /* fallback for old browsers */ |
||||
background: -webkit-linear-gradient(to left, #c21500 , #ffc500); /* Chrome 10-25, Safari 5.1-6 */ |
||||
background: linear-gradient(to left, #c21500 , #ffc500); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
||||
} |
||||
.highlight header{ |
||||
padding:25px 30px; |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
font-size: 0.9em; |
||||
} |
||||
.highlight header a{ |
||||
color: white; |
||||
line-height: 33px; |
||||
transition: opacity 0.2s ease; |
||||
} |
||||
.highlight header a:hover{ |
||||
opacity: 0.7; |
||||
} |
||||
.highlight header a.github{ |
||||
margin-left: 30px; |
||||
background: url('../img/github.png') no-repeat; |
||||
width: 32px; |
||||
height: 32px; |
||||
} |
||||
.highlight header a.documentation{ |
||||
border-right: 1px solid rgba(255,255,255,0.4); |
||||
padding-right: 30px; |
||||
margin-left: 30px; |
||||
display: block; |
||||
} |
||||
|
||||
.core{ |
||||
width: 100%; |
||||
text-align: center; |
||||
font-family: 'Lato'; |
||||
color: white; |
||||
} |
||||
.core h1{ |
||||
font-size: 3em; |
||||
font-weight: lighter; |
||||
margin: 0; |
||||
line-height: 1.1em; |
||||
text-shadow: 0 12px 10px rgba(0, 0, 0, 0.24); |
||||
} |
||||
.core p{ |
||||
font-size: 1.1em; |
||||
color: rgba(0, 0, 0, 0.4); |
||||
padding: 0 20px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.core span{ |
||||
font-size: 0.3em; |
||||
font-weight: 400; |
||||
line-height: 1em; |
||||
} |
||||
.core .examples{ |
||||
color: white; |
||||
text-transform: uppercase; |
||||
font-size: 0.6em; |
||||
font-weight: 400; |
||||
letter-spacing: 0.2em; |
||||
display: block; |
||||
margin: 0 auto; |
||||
width: 120px; |
||||
padding: 4px 0 3px 3px; |
||||
border-radius: 3px 3px 0 0; |
||||
border: 1px solid rgba(0,0,0,0.2); |
||||
background: rgba(0, 0, 0, 0.3); |
||||
border-bottom: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
.core a{ |
||||
display: block; |
||||
border-radius: 3px; |
||||
padding: 10px 20px; |
||||
color: white; |
||||
cursor: pointer; |
||||
transition: 0.2s ease; |
||||
border: 0; |
||||
font-size: 0.8em; |
||||
} |
||||
.core a:hover{ |
||||
/*background: rgba(255,255,255,0.1);*/ |
||||
} |
||||
|
||||
|
||||
|
||||
.core .buttons{ |
||||
background: rgba(0, 0, 0, 0.18); |
||||
border-radius: 3px; |
||||
padding: 5px; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin: 0 auto; |
||||
min-width: 260px; |
||||
display: block; |
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); |
||||
margin-bottom: 20px; |
||||
} |
||||
.core .buttons li{ |
||||
text-align:center; |
||||
white-space:nowrap; |
||||
} |
||||
|
||||
.core .buttons .lava{ |
||||
display: none; |
||||
position: absolute; |
||||
bottom: 0; |
||||
top: 0; |
||||
left: 50%; |
||||
z-index: 3; |
||||
margin: 0; |
||||
border: 0; |
||||
width: 0; |
||||
padding: 0; |
||||
overflow: hidden; |
||||
text-indent: -9999em; |
||||
background:rgba(0, 0, 0, 0.13); |
||||
transition-property: left, width, opacity; |
||||
transition-duration: .4s; |
||||
transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1); |
||||
pointer-events: none; |
||||
opacity: 0; |
||||
} |
||||
.buttons li:nth-child(1).active ~ li.lava { left: 0; width: 71px; opacity: 1} |
||||
.buttons li:nth-child(2).active ~ li.lava { left: 69px; width: 89px; opacity: 1} |
||||
.buttons li:nth-child(3).active ~ li.lava { left: 156px; width: 92px; opacity: 1} |
||||
.buttons li:nth-child(4).active ~ li.lava { left: 247px; width: 74px; opacity: 1} |
||||
.buttons li:nth-child(5).active ~ li.lava { left: 320px; width: 95px; opacity: 1} |
||||
.buttons li:nth-child(6).active ~ li.lava { left: 413px; width: 101px; opacity: 1} |
||||
|
||||
|
||||
.buttons li:nth-child(1):hover ~ li.lava{ left: 0; width: 71px; opacity: 1} |
||||
.buttons li:nth-child(2):hover ~ li.lava { left: 69px; width: 89px; opacity: 1} |
||||
.buttons li:nth-child(3):hover ~ li.lava { left: 156px; width: 92px; opacity: 1} |
||||
.buttons li:nth-child(4):hover ~ li.lava { left: 247px; width: 74px; opacity: 1} |
||||
.buttons li:nth-child(5):hover ~ li.lava { left: 320px; width: 95px; opacity: 1} |
||||
.buttons li:nth-child(6):hover ~ li.lava { left: 413px; width: 101px; opacity: 1} |
||||
|
||||
|
||||
.core .download{ |
||||
background: rgba(0, 0, 0, 0.1); |
||||
display: block; |
||||
margin: 0 auto 25px; |
||||
width: 180px; |
||||
border-radius: 0 0 3px 3px; |
||||
font-family: arial; |
||||
} |
||||
.core .download:hover{ |
||||
background: rgba(0, 0, 0, 0.2); |
||||
width: 240px; |
||||
} |
||||
|
||||
|
||||
.btn{ |
||||
position: relative; |
||||
display: inline-block; |
||||
z-index: 1; |
||||
top: 60px; |
||||
margin: 10px; |
||||
margin-right: 30px; |
||||
background: #fafafa; |
||||
padding: 7px 15px; |
||||
font-size: 12px; |
||||
color: #555; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
border: 1px solid #ddd; |
||||
} |
||||
.btn:hover{ |
||||
background: #ddd; |
||||
} |
||||
|
||||
.tag{ |
||||
padding: 2px 5px 2px; |
||||
border-radius: 2px; |
||||
font-size: 11px; |
||||
text-transform: uppercase; |
||||
color: white; |
||||
margin-right: 3px; |
||||
} |
||||
.tag.red{ |
||||
background: #e88a8a; |
||||
} |
||||
.tag.green{ |
||||
background: #76bf73; |
||||
} |
||||
|
||||
.notes{ |
||||
margin: 30px 0 0 0; |
||||
border: 1px solid #ddd; |
||||
background: rgba(0,0,0,0.04); |
||||
border-radius: 4px; |
||||
} |
||||
.notes ul{ |
||||
padding: 10px 30px 30px 30px; |
||||
border-bottom: 1px solid #ccc; |
||||
} |
||||
.notes h3{ |
||||
background: #dddddd; |
||||
padding: 5px 20px; |
||||
border: 1px solid #ccc; |
||||
border-left: 0; |
||||
} |
||||
.notes .header{ |
||||
padding:20px; |
||||
background: #ddd; |
||||
border-bottom:1px solid #ccc; |
||||
margin-bottom: 10px; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
|
||||
.features{ |
||||
background: #fff; |
||||
padding: 40px 0 50px 0; |
||||
margin-bottom: 50px; |
||||
} |
||||
.features h4{ |
||||
margin: 0 0 30px; |
||||
} |
||||
.features h4 span{ |
||||
border-radius: 5px; |
||||
padding: 5px 20px 7px; |
||||
margin: 0 0 30px; |
||||
font-size: 14px; |
||||
background: #FFF; |
||||
border: 1px solid #ddd; |
||||
} |
||||
.features ul{ |
||||
display: table; |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
.features ul li{ |
||||
display: inline-block; |
||||
text-align: center; |
||||
width: 33.3%; |
||||
margin-bottom: 20px; |
||||
} |
||||
.features ul li .icon{ |
||||
display: block; |
||||
margin: 0 auto; |
||||
margin-bottom: 10px; |
||||
font-size: 3em; |
||||
} |
||||
.features ul li:nth-child(1) .icon{color:#e7bb3b;} |
||||
.features ul li:nth-child(2) .icon{color:#dea43a;} |
||||
.features ul li:nth-child(3) .icon{color:#d48d37;} |
||||
.features ul li:nth-child(4) .icon{color:#cf7b39;} |
||||
.features ul li:nth-child(5) .icon{color:#c76437;} |
||||
.features ul li:nth-child(6) .icon{color:#c15239;} |
||||
|
||||
.wrap{ |
||||
padding: 0 10px; |
||||
max-width: 1020px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.panel { |
||||
min-height: 100px; |
||||
background: #fff; |
||||
margin: 30px auto 50px; |
||||
border-radius: 4px; |
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); |
||||
overflow: hidden; |
||||
} |
||||
.panel.attached-bottom{ |
||||
margin-bottom: 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
main p{ |
||||
font-family: 'Lato'; |
||||
color: #999; |
||||
line-height: 1.5em; |
||||
font-size: 16px; |
||||
font-weight: 400; |
||||
} |
||||
.panel p{ |
||||
padding: 10px; |
||||
font-size: 14px; |
||||
} |
||||
main h2{ |
||||
font-size: 2em; |
||||
text-align: center; |
||||
color: #aaa; |
||||
font-family: 'Lato'; |
||||
font-weight: lighter; |
||||
} |
||||
main hr{ |
||||
border: 0; |
||||
border-bottom: 1px solid #dbdcdb; |
||||
margin: 10px 0; |
||||
height: 1px; |
||||
} |
||||
main h3{ |
||||
padding: 10px 20px; |
||||
background: #EDEDED; |
||||
display: inline-block; |
||||
margin: 10px 0 0 0; |
||||
border-radius: 0 4px 4px 0; |
||||
color: #777; |
||||
font-family: 'Lato'; |
||||
font-size: 0.9em; |
||||
} |
||||
h4{ |
||||
text-align: center; |
||||
line-height: 1.5em; |
||||
position: relative; |
||||
margin: 40px 0 10px 0; |
||||
} |
||||
h4::before{ |
||||
content: ''; |
||||
left: 0; |
||||
right: 0; |
||||
height: 1px; |
||||
background: #dbdcdb; |
||||
position: absolute; |
||||
top: 50%; |
||||
z-index: 0; |
||||
} |
||||
h4 span{ |
||||
background: white; |
||||
position: relative; |
||||
padding: 0 20px; |
||||
font-family: 'Lato'; |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
|
||||
.scrollToTop{ |
||||
color: rgba(0, 0, 0, 0.3); |
||||
left: 0; |
||||
bottom: 0; |
||||
position: fixed; |
||||
font-size: 24px; |
||||
padding: 20px 33px 20px 20px; |
||||
cursor: pointer; |
||||
transition: all 0.1s ease; |
||||
transform: translateY(0) translateX(-2px); |
||||
background: transparent; |
||||
border:0; |
||||
} |
||||
.scrollToTop:hover{ |
||||
opacity: 0.5; |
||||
} |
||||
.scrollToTop:active{ |
||||
color: #555; |
||||
transform: scale(1.4); |
||||
} |
||||
|
||||
.icon.icon-heart{ |
||||
color:#d48d37; |
||||
padding: 0 5px; |
||||
} |
||||
|
||||
.aboutme{ |
||||
padding:60px 0; |
||||
height: auto; |
||||
margin-top: 80px; |
||||
} |
||||
.aboutme.highlight::before{ |
||||
background-position-y: 0%; |
||||
} |
||||
.aboutme p{ |
||||
font-size: 1.3em; |
||||
font-weight: 200; |
||||
padding-top: 10px; |
||||
z-index: 1; |
||||
position: relative; |
||||
color: #999; |
||||
} |
||||
.aboutme ul{ |
||||
z-index: 1; |
||||
position: relative; |
||||
padding: 20px 0 10px 0; |
||||
display: table; |
||||
width: 100%; |
||||
max-width: 600px; |
||||
margin: 0 auto; |
||||
} |
||||
.aboutme ul li{ |
||||
padding: 10px; |
||||
display: table-cell; |
||||
font-size: 2em; |
||||
} |
||||
.aboutme ul li a{ |
||||
transition: all 0.3s ease; |
||||
} |
||||
.aboutme ul li a:hover{ |
||||
color: #555; |
||||
} |
||||
|
||||
|
||||
#disqus_thread{ |
||||
padding: 30px 10px; |
||||
} |
||||
.tweets{ |
||||
overflow: auto; |
||||
margin-bottom: 20px; |
||||
} |
||||
.tweets .twitter-tweet{ |
||||
float: left; |
||||
width: 50% !important; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.buttons-donate{ |
||||
width: 440px; |
||||
margin: 0 auto; |
||||
padding-top: 40px; |
||||
} |
||||
.button-donate{ |
||||
float: left; |
||||
width: 50%; |
||||
} |
||||
|
||||
|
||||
|
||||
footer.main{ |
||||
background: #fff; |
||||
padding: 35px 5px; |
||||
text-align: center; |
||||
font-family: 'Lato'; |
||||
font-size: 0.9em; |
||||
} |
||||
footer.main p { |
||||
color: #aeaeae; |
||||
margin-bottom: 10px; |
||||
} |
||||
footer.main p a{ |
||||
color: #aeaeae; |
||||
} |
||||
footer.main p a:hover{ |
||||
text-decoration: underline; |
||||
} |
||||
footer.main p.assign{ |
||||
font-size: 11px; |
||||
} |
||||
footer ul li{ |
||||
display: inline-block; |
||||
margin: 0 5px; |
||||
color: #999; |
||||
} |
||||
footer ul li a{ |
||||
display: block; |
||||
padding: 10px 0; |
||||
margin-bottom: 20px; |
||||
} |
||||
footer ul li a:link, footer ul li a:visited, footer ul li a:active{ |
||||
color: #555; |
||||
} |
||||
footer ul li a:hover{ |
||||
opacity: 0.7; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
div.table{ |
||||
border: 1px solid #bbb; |
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); |
||||
background: white; |
||||
margin: 0 0 50px 0; |
||||
overflow-x: auto; |
||||
} |
||||
table { |
||||
width: 100%; |
||||
font-size: 14px; |
||||
color: #8a8f94; |
||||
text-align: left; |
||||
border-collapse: collapse; |
||||
margin-bottom: 10px; |
||||
font-family: 'Lato'; |
||||
} |
||||
table th { |
||||
background-color: #eee; |
||||
padding: 9px 0; |
||||
color: #aaa; |
||||
text-align: center; |
||||
position: relative; |
||||
text-transform: uppercase; |
||||
text-shadow: 1px 1px 0 #FFF; |
||||
font-size: 11px; |
||||
font-weight: 600; |
||||
letter-spacing: 0.05em; |
||||
} |
||||
table td{ |
||||
padding: 5px; |
||||
vertical-align: top; |
||||
font-size: 13px; |
||||
line-height: 20px; |
||||
} |
||||
table td:nth-child(1) { |
||||
font-weight: 600; |
||||
color: #777 |
||||
} |
||||
table tr{ |
||||
background: #fafafa; |
||||
} |
||||
table tr:nth-child(2n){ |
||||
background: #fff; |
||||
} |
||||
table td:nth-child(2) { |
||||
font-style: italic; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.syntaxhighlighter{ |
||||
padding: 1px; |
||||
} |
||||
.syntaxhighlighter .toolbar{ |
||||
display: none; |
||||
} |
||||
|
||||
.bloco-js .line:nth-child(1), |
||||
.bloco-js .line:nth-child(2), |
||||
.bloco-js .line:nth-child(4){ |
||||
opacity: 0.3; |
||||
} |
||||
.cd-section{ |
||||
background: #F0F2F1; |
||||
} |
||||
/* No Touch devices */ |
||||
.cd-nav-trigger { |
||||
display: none; |
||||
} |
||||
|
||||
.no-touch #cd-vertical-nav { |
||||
position: fixed; |
||||
right: 0; |
||||
top: 50%; |
||||
bottom: auto; |
||||
-webkit-transform: translateY(-50%); |
||||
-moz-transform: translateY(-50%); |
||||
-ms-transform: translateY(-50%); |
||||
-o-transform: translateY(-50%); |
||||
transform: translateY(-50%); |
||||
z-index: 10; |
||||
padding-right: 10px; |
||||
} |
||||
.no-touch #cd-vertical-nav li { |
||||
text-align: right; |
||||
} |
||||
.no-touch #cd-vertical-nav a { |
||||
display: inline-block; |
||||
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ |
||||
-webkit-backface-visibility: hidden; |
||||
backface-visibility: hidden; |
||||
} |
||||
.no-touch #cd-vertical-nav a:after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
.no-touch #cd-vertical-nav a span { |
||||
float: right; |
||||
display: inline-block; |
||||
-webkit-transform: scale(0.6); |
||||
-moz-transform: scale(0.6); |
||||
-ms-transform: scale(0.6); |
||||
-o-transform: scale(0.6); |
||||
transform: scale(0.6); |
||||
} |
||||
.no-touch #cd-vertical-nav a:hover span { |
||||
-webkit-transform: scale(1); |
||||
-moz-transform: scale(1); |
||||
-ms-transform: scale(1); |
||||
-o-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
.no-touch #cd-vertical-nav a:hover span.cd-dot{ |
||||
background: white; |
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); |
||||
} |
||||
.no-touch #cd-vertical-nav a:hover .cd-label { |
||||
opacity: 1; |
||||
} |
||||
.no-touch #cd-vertical-nav a.is-selected .cd-dot { |
||||
background-color: white; |
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); |
||||
transform-origin: 50% 50%; |
||||
} |
||||
.no-touch #cd-vertical-nav .cd-dot { |
||||
position: relative; |
||||
/* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ |
||||
top: 4px; |
||||
height: 14px; |
||||
width: 14px; |
||||
border-radius: 50%; |
||||
background-color: rgba(0, 0, 0, 0.3); |
||||
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); |
||||
transition: transform 0.2s, background-color 0.2s; |
||||
transform-origin: 50% 50%; |
||||
} |
||||
.no-touch #cd-vertical-nav .cd-label { |
||||
position: relative; |
||||
margin-right: 10px; |
||||
padding: .1em .5em; |
||||
font-size: 14px; |
||||
font-size: 0.875rem; |
||||
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s; |
||||
-moz-transition: -moz-transform 0.2s, opacity 0.2s; |
||||
transition: transform 0.2s, opacity 0.2s; |
||||
opacity: 0; |
||||
-webkit-transform-origin: 100% 50%; |
||||
-moz-transform-origin: 100% 50%; |
||||
-ms-transform-origin: 100% 50%; |
||||
-o-transform-origin: 100% 50%; |
||||
transform-origin: 100% 50%; |
||||
font-family: 'Lato'; |
||||
font-weight: 400; |
||||
color: #555; |
||||
} |
||||
.cd-img-replace{ |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
text-indent: 100%; |
||||
white-space: nowrap; |
||||
} |
||||
.cd-nav-trigger{ |
||||
display: none; |
||||
} |
||||
|
||||
/* Touch devices */ |
||||
.touch .cd-nav-trigger { |
||||
display: block; |
||||
z-index: 10; |
||||
position: fixed; |
||||
bottom: 10px; |
||||
right: 10px; |
||||
height: 39px; |
||||
width: 39px; |
||||
border-radius: 0.25em; |
||||
background: rgba(0, 0, 0, 0.4); |
||||
} |
||||
.touch .cd-nav-trigger span { |
||||
position: absolute; |
||||
height: 4px; |
||||
width: 4px; |
||||
background-color: #fff; |
||||
border-radius: 50%; |
||||
left: 50%; |
||||
top: 50%; |
||||
bottom: auto; |
||||
right: auto; |
||||
-webkit-transform: translateX(-50%) translateY(-50%); |
||||
-moz-transform: translateX(-50%) translateY(-50%); |
||||
-ms-transform: translateX(-50%) translateY(-50%); |
||||
-o-transform: translateX(-50%) translateY(-50%); |
||||
transform: translateX(-50%) translateY(-50%); |
||||
} |
||||
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after { |
||||
content: ''; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
background-color: inherit; |
||||
border-radius: inherit; |
||||
} |
||||
.touch .cd-nav-trigger span::before { |
||||
top: -9px; |
||||
} |
||||
.touch .cd-nav-trigger span::after { |
||||
bottom: -9px; |
||||
} |
||||
|
||||
|
||||
|
||||
.touch #cd-vertical-nav { |
||||
position: fixed; |
||||
z-index: 1; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
width: 90%; |
||||
max-width: 378px; |
||||
max-height: 90%; |
||||
overflow-y: scroll; |
||||
-webkit-overflow-scrolling: touch; |
||||
-webkit-transform-origin: right bottom; |
||||
-moz-transform-origin: right bottom; |
||||
-ms-transform-origin: right bottom; |
||||
-o-transform-origin: right bottom; |
||||
transform-origin: right bottom; |
||||
-webkit-transform: scale(0); |
||||
-moz-transform: scale(0); |
||||
-ms-transform: scale(0); |
||||
-o-transform: scale(0); |
||||
transform: scale(0); |
||||
-webkit-transition-property: -webkit-transform; |
||||
-moz-transition-property: -moz-transform; |
||||
transition-property: transform; |
||||
-webkit-transition-duration: 0.2s; |
||||
-moz-transition-duration: 0.2s; |
||||
transition-duration: 0.2s; |
||||
border-radius: 0.25em; |
||||
background-color: rgba(0, 0, 0, 0.9); |
||||
z-index: 9; |
||||
} |
||||
.touch #cd-vertical-nav a { |
||||
display: block; |
||||
padding: 10px 15px; |
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
color: #989898; |
||||
} |
||||
.touch #cd-vertical-nav a span:first-child { |
||||
display: none; |
||||
} |
||||
.touch #cd-vertical-nav a.is-selected span:last-child { |
||||
color: #fff; |
||||
} |
||||
.touch #cd-vertical-nav.open { |
||||
-webkit-transform: scale(1); |
||||
-moz-transform: scale(1); |
||||
-ms-transform: scale(1); |
||||
-o-transform: scale(1); |
||||
transform: scale(1); |
||||
} |
||||
.touch #cd-vertical-nav.open + .cd-nav-trigger { |
||||
background-color: transparent; |
||||
} |
||||
.touch #cd-vertical-nav.open + .cd-nav-trigger span { |
||||
background-color: rgba(62, 57, 71, 0); |
||||
} |
||||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { |
||||
background-color: #555; |
||||
height: 3px; |
||||
width: 20px; |
||||
border-radius: 0; |
||||
left: -8px; |
||||
} |
||||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before { |
||||
-webkit-transform: rotate(45deg); |
||||
-moz-transform: rotate(45deg); |
||||
-ms-transform: rotate(45deg); |
||||
-o-transform: rotate(45deg); |
||||
transform: rotate(45deg); |
||||
top: 1px; |
||||
} |
||||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after { |
||||
-webkit-transform: rotate(135deg); |
||||
-moz-transform: rotate(135deg); |
||||
-ms-transform: rotate(135deg); |
||||
-o-transform: rotate(135deg); |
||||
transform: rotate(135deg); |
||||
bottom: 0; |
||||
} |
||||
.touch #cd-vertical-nav li:last-child a { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
@media only screen and (min-width: 768px) { |
||||
|
||||
.wrap{ |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
table td{ |
||||
padding: 10px 20px; |
||||
} |
||||
|
||||
.core{ |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 0; |
||||
margin-top: -140px; |
||||
} |
||||
|
||||
.core .buttons .lava{ |
||||
display: block; |
||||
} |
||||
|
||||
.touch .cd-nav-trigger, .touch #cd-vertical-nav { |
||||
bottom: 40px; |
||||
} |
||||
.no-touch #cd-vertical-nav { |
||||
right: 40px; |
||||
padding:0; |
||||
} |
||||
.highlight::after, .modal, .buttons .lava{ |
||||
display: block; |
||||
} |
||||
.core h1{ |
||||
font-size: 3em; |
||||
} |
||||
.core p{ |
||||
padding: 0; |
||||
margin-bottom: 25px; |
||||
} |
||||
.scrollToTop{ |
||||
right: 0; |
||||
left: auto; |
||||
bottom: 0; |
||||
color: #e9746f; |
||||
} |
||||
.core .buttons{ |
||||
max-width: none; |
||||
display: inline-block; |
||||
} |
||||
.core .buttons li{ |
||||
display: inline-block; |
||||
min-width: auto; |
||||
} |
||||
.features ul li{ |
||||
display: table-cell; |
||||
text-align: center; |
||||
width: 16%; |
||||
} |
||||
footer ul li a{ |
||||
padding: 10px; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
.no-touch .first-section #cd-vertical-nav .cd-label{ |
||||
color: #fff; |
||||
} |
||||
|
||||
|
||||
@media only screen and (max-width: 768px) { |
||||
.core{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
top: 0; |
||||
margin: 0; |
||||
} |
||||
.highlight header{ |
||||
padding: 20px 20px; |
||||
} |
||||
} |
||||
@media only screen and (max-width: 560px) { |
||||
.tweets .twitter-tweet{ |
||||
float: none; |
||||
width: 100% !important; |
||||
padding:0; |
||||
} |
||||
} |
||||
@media only screen and (max-width: 350px) { |
||||
.core h1{ |
||||
font-size: 2.5em; |
||||
} |
||||
.core p{ |
||||
font-size: 1em; |
||||
color: rgb(0, 0, 0); |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-height: 530px) { |
||||
.highlight header{ |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
|
||||
.touch .highlight::after, .touch .scrollToTop{ |
||||
display: none; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.1 KiB |
@ -0,0 +1,567 @@ |
||||
$(document).ready(function ($) { |
||||
var contentSections = $('.cd-section'); |
||||
$(".buttons li a").on('click', function(){ |
||||
$(".buttons li").removeClass('active'); |
||||
$(this).parent().addClass('active'); |
||||
}); |
||||
}); |
||||
|
||||
|
||||
//
|
||||
// CONFIG IZIToast
|
||||
//
|
||||
|
||||
iziToast.settings({ |
||||
timeout: 5000, |
||||
// position: 'center',
|
||||
// imageWidth: 50,
|
||||
pauseOnHover: true, |
||||
// resetOnHover: true,
|
||||
close: true, |
||||
progressBar: true, |
||||
// layout: 1,
|
||||
// balloon: true,
|
||||
// target: '.target',
|
||||
// icon: 'material-icons',
|
||||
// iconText: 'face',
|
||||
// animateInside: false,
|
||||
// transitionIn: 'flipInX',
|
||||
// transitionOut: 'flipOutX',
|
||||
}); |
||||
|
||||
|
||||
$(".trigger-info").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.info({ |
||||
title: 'Hello', |
||||
message: 'Welcome!', |
||||
// imageWidth: 70,
|
||||
|
||||
position: 'bottomLeft', |
||||
transitionIn: 'bounceInRight', |
||||
// rtl: true,
|
||||
// iconText: 'star',
|
||||
onOpen: function(){ |
||||
console.log('callback abriu! info'); |
||||
}, |
||||
onClose: function(){ |
||||
console.log("callback fechou! info"); |
||||
} |
||||
}); |
||||
}); |
||||
$(".trigger-success").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.success({ |
||||
title: 'OK', |
||||
message: 'Successfully inserted record!', |
||||
position: 'bottomRight', |
||||
transitionIn: 'bounceInLeft', |
||||
// iconText: 'star',
|
||||
onOpen: function(){ |
||||
console.log('callback abriu! success'); |
||||
}, |
||||
onClose: function(){ |
||||
console.log("callback fechou! success"); |
||||
} |
||||
}); |
||||
}); |
||||
$(".trigger-warning").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.warning({ |
||||
title: 'Caution', |
||||
message: 'You forgot important data', |
||||
position: 'topLeft', |
||||
transitionIn: 'flipInX', |
||||
transitionOut: 'flipOutX' |
||||
}); |
||||
}); |
||||
$(".trigger-error").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.error({ |
||||
title: 'Error', |
||||
message: 'Illegal operation', |
||||
position: 'topRight', |
||||
transitionIn: 'fadeInDown' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-custom1").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
title: 'Hey', |
||||
icon: 'icon-drafts', |
||||
class: 'custom1', |
||||
message: 'What would you like to add?', |
||||
position: 'bottomCenter', |
||||
image: 'img/avatar.jpg', |
||||
balloon: true, |
||||
buttons: [ |
||||
['<button>Photo</button>', function (instance, toast) { |
||||
|
||||
// instance.hide({ transitionOut: 'fadeOutUp' }, toast);
|
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-photo', |
||||
title: 'OK', |
||||
message: 'Callback Photo!', |
||||
position: 'bottomCenter', |
||||
// iconText: 'star',
|
||||
}); |
||||
|
||||
}], |
||||
['<button>Video</button>', function (instance, toast) { |
||||
|
||||
// instance.hide({ transitionOut: 'fadeOutUp' }, toast);
|
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-ondemand_video', |
||||
title: 'OK', |
||||
message: 'Callback V铆deo!', |
||||
position: 'bottomCenter', |
||||
// iconText: 'star',
|
||||
}); |
||||
|
||||
}], |
||||
['<button>Text</button>', function (instance, toast) { |
||||
|
||||
// instance.hide({ transitionOut: 'fadeOutUp' }, toast);
|
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-event_note', |
||||
title: 'OK', |
||||
message: 'Callback Text!', |
||||
position: 'bottomCenter', |
||||
// iconText: 'star',
|
||||
}); |
||||
|
||||
}], |
||||
] |
||||
}); |
||||
|
||||
}); |
||||
|
||||
|
||||
$(".trigger-animInsideFalse").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
title: 'Hey', |
||||
icon: 'icon-drafts', |
||||
class: 'animInsideFalse', |
||||
message: 'What would you like to add?', |
||||
position: 'bottomCenter', |
||||
animateInside: false, |
||||
image: 'img/avatar.jpg', |
||||
buttons: [ |
||||
['<button>Photo</button>', function (instance, toast) { |
||||
|
||||
}], |
||||
['<button>Video</button>', function (instance, toast) { |
||||
|
||||
}], |
||||
['<button>Text</button>', function (instance, toast) { |
||||
|
||||
}], |
||||
] |
||||
}); |
||||
|
||||
}); |
||||
|
||||
|
||||
|
||||
$(".trigger-custom2").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
class: 'test', |
||||
color: 'dark', |
||||
icon: 'icon-contacts', |
||||
title: 'Hello!', |
||||
message: 'Do you like it?', |
||||
position: 'topCenter', |
||||
transitionIn: 'flipInX', |
||||
transitionOut: 'flipOutX', |
||||
progressBarColor: 'rgb(0, 255, 184)', |
||||
image: 'img/avatar.jpg', |
||||
imageWidth: 70, |
||||
layout:2, |
||||
onClose: function(){ |
||||
console.info('onClose'); |
||||
}, |
||||
iconColor: 'rgb(0, 255, 184)' |
||||
}); |
||||
}); |
||||
|
||||
document.addEventListener('iziToast-open', function(data){ |
||||
if(data.detail.class == 'test'){ |
||||
console.log('test open'); |
||||
} |
||||
}); |
||||
|
||||
|
||||
document.addEventListener('iziToast-close', function(data){ |
||||
if(data.detail.class == 'test'){ |
||||
console.log('test close'); |
||||
} |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(".trigger-bounceInLeft").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'bounceInLeft', |
||||
transitionIn: 'bounceInLeft', |
||||
transitionInMobile: 'bounceInLeft', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-bounceInRight").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'bounceInRight', |
||||
transitionIn: 'bounceInRight', |
||||
transitionInMobile: 'bounceInRight', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-bounceInUp").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'bounceInUp', |
||||
transitionIn: 'bounceInUp', |
||||
transitionInMobile: 'bounceInUp', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-bounceInDown").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'bounceInDown', |
||||
transitionIn: 'bounceInDown', |
||||
transitionInMobile: 'bounceInDown', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-fadeIn").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'fadeIn', |
||||
transitionIn: 'fadeIn', |
||||
transitionInMobile: 'fadeIn', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-fadeInDown").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'fadeInDown', |
||||
transitionIn: 'fadeInDown', |
||||
transitionInMobile: 'fadeInDown', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-fadeInUp").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'fadeInUp', |
||||
transitionIn: 'fadeInUp', |
||||
transitionInMobile: 'fadeInUp', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-fadeInLeft").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'fadeInLeft', |
||||
transitionIn: 'fadeInLeft', |
||||
transitionInMobile: 'fadeInLeft', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-fadeInRight").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'fadeInRight', |
||||
transitionIn: 'fadeInRight', |
||||
transitionInMobile: 'fadeInRight', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-flipInX").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
icon: 'icon-style', |
||||
title: 'Transition', |
||||
message: 'flipInX', |
||||
transitionIn: 'flipInX', |
||||
transitionInMobile: 'flipInX', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
|
||||
$(".trigger-image").on('click', function (event) { |
||||
event.preventDefault(); |
||||
iziToast.show({ |
||||
imageWidth: 50, |
||||
image: 'img/avatar.jpg', |
||||
color: 'dark', |
||||
icon: 'icon-person', |
||||
title: 'Hey', |
||||
message: 'How are you?', |
||||
position: 'center', |
||||
layout: 1 |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-imageWidth").on('click', function (event) { |
||||
event.preventDefault(); |
||||
iziToast.show({ |
||||
imageWidth: 100, |
||||
image: 'img/avatar.jpg', |
||||
color: 'dark', |
||||
icon: 'icon-person', |
||||
title: 'Hey', |
||||
message: 'How are you?', |
||||
position: 'center', |
||||
layout: 2 |
||||
}); |
||||
}); |
||||
|
||||
|
||||
$(".trigger-layout1").on('click', function (event) { |
||||
event.preventDefault(); |
||||
iziToast.show({ |
||||
title: 'Layout 1', |
||||
icon: 'icon-palette', |
||||
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing.', |
||||
position: 'center', |
||||
layout: 1 |
||||
}); |
||||
}); |
||||
$(".trigger-layout2").on('click', function (event) { |
||||
event.preventDefault(); |
||||
iziToast.show({ |
||||
title: 'Layout 2', |
||||
icon: 'icon-palette', |
||||
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing.', |
||||
position: 'center', |
||||
layout: 2 |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-balloon").on('click', function (event) { |
||||
event.preventDefault(); |
||||
iziToast.show({ |
||||
color: 'dark', |
||||
progressBarColor: '#d48d37', |
||||
title: 'Balloon', |
||||
icon: 'icon-chat_bubble', |
||||
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing.', |
||||
position: 'center', |
||||
balloon: true |
||||
}); |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$(".trigger-bottomRight").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'bottomRight', |
||||
position: 'bottomRight' |
||||
}); |
||||
}); |
||||
$(".trigger-bottomLeft").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'bottomLeft', |
||||
position: 'bottomLeft' |
||||
}); |
||||
}); |
||||
$(".trigger-topRight").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'topRight', |
||||
position: 'topRight' |
||||
}); |
||||
}); |
||||
$(".trigger-topLeft").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'topLeft', |
||||
position: 'topLeft' |
||||
}); |
||||
}); |
||||
$(".trigger-topCenter").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'topCenter', |
||||
position: 'topCenter' |
||||
}); |
||||
}); |
||||
$(".trigger-bottomCenter").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'bottomCenter', |
||||
position: 'bottomCenter' |
||||
}); |
||||
}); |
||||
$(".trigger-center").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-style', |
||||
title: 'Position', |
||||
message: 'center', |
||||
position: 'center' |
||||
}); |
||||
}); |
||||
|
||||
|
||||
$(".trigger-show").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-person', |
||||
title: 'Hey', |
||||
message: 'Welcome!', |
||||
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
|
||||
progressBarColor: 'rgb(0, 255, 184)', |
||||
buttons: [ |
||||
['<button>Ok</button>', function (instance, toast) { |
||||
alert("Hello world!"); |
||||
}], |
||||
['<button>Close</button>', function (instance, toast) { |
||||
instance.hide({ transitionOut: 'fadeOutUp' }, toast); |
||||
}] |
||||
] |
||||
}); |
||||
}); |
||||
|
||||
|
||||
$(".trigger-pause").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-mouse', |
||||
title: 'Pause', |
||||
message: 'OnHover', |
||||
position: 'center', |
||||
progressBarColor: 'rgb(0, 255, 184)', |
||||
}); |
||||
}); |
||||
|
||||
$(".trigger-reset").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: 'dark', |
||||
icon: 'icon-mouse', |
||||
title: 'Reset', |
||||
message: 'OnHover', |
||||
position: 'center', |
||||
resetOnHover: true, |
||||
progressBarColor: 'rgb(0, 255, 184)', |
||||
}); |
||||
}); |
||||
|
||||
|
||||
|
||||
|
||||
$(".trigger-target").on('click', function (event) { |
||||
event.preventDefault(); |
||||
|
||||
iziToast.show({ |
||||
color: '#fff', |
||||
icon: 'icon-style', |
||||
title: 'Target', |
||||
message: 'Specifying a Target', |
||||
transitionIn: 'flipInX', |
||||
transitionInMobile: 'flipInX', |
||||
target: '.target-example', |
||||
progressBarColor: '#d48d37', |
||||
}); |
||||
}); |
||||
@ -0,0 +1,721 @@ |
||||
/* |
||||
* iziToast | v1.0.1 |
||||
* http://izitoast.marcelodolce.com
|
||||
* by Marcelo Dolce. |
||||
*/ |
||||
(function (root, factory) { |
||||
if (typeof define === 'function' && define.amd) { |
||||
define([], factory(root)); |
||||
} else if (typeof exports === 'object') { |
||||
module.exports = factory(root); |
||||
} else { |
||||
root.iziToast = factory(root); |
||||
} |
||||
})(typeof global !== "undefined" ? global : this.window || this.global, function (root) { |
||||
|
||||
'use strict'; |
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
var PLUGIN_NAME = 'iziToast'; |
||||
var iziToast = {}; |
||||
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
|
||||
var isMobile = (/Mobi/.test(navigator.userAgent)) ? true : false; |
||||
var mobileWidth = 568; |
||||
var config = {}; |
||||
|
||||
// Default settings
|
||||
var defaults = { |
||||
class: '', |
||||
title: '', |
||||
message: '', |
||||
color: '', // blue, red, green, yellow
|
||||
icon: '', |
||||
iconText: '', |
||||
iconColor: '', |
||||
image: '', |
||||
imageWidth: 50, |
||||
layout: 1, |
||||
balloon: false, |
||||
close: true, |
||||
rtl: false, |
||||
position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
|
||||
target: '', |
||||
timeout: 5000, |
||||
pauseOnHover: true, |
||||
resetOnHover: false, |
||||
progressBar: true, |
||||
progressBarColor: '', |
||||
animateInside: true, |
||||
buttons: {}, |
||||
transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
|
||||
transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
|
||||
transitionInMobile: 'fadeInUp', |
||||
transitionOutMobile: 'fadeOutDown', |
||||
onOpen: function () {}, |
||||
onClose: function () {} |
||||
}; |
||||
|
||||
//
|
||||
// Methods
|
||||
//
|
||||
|
||||
|
||||
/** |
||||
* Polyfill for remove() method |
||||
*/ |
||||
if (!('remove' in Element.prototype)) { |
||||
Element.prototype.remove = function() { |
||||
if (this.parentNode) { |
||||
this.parentNode.removeChild(this); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* A simple forEach() implementation for Arrays, Objects and NodeLists |
||||
* @private |
||||
* @param {Array|Object|NodeList} collection Collection of items to iterate |
||||
* @param {Function} callback Callback function for each iteration |
||||
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`) |
||||
*/ |
||||
var forEach = function (collection, callback, scope) { |
||||
if (Object.prototype.toString.call(collection) === '[object Object]') { |
||||
for (var prop in collection) { |
||||
if (Object.prototype.hasOwnProperty.call(collection, prop)) { |
||||
callback.call(scope, collection[prop], prop, collection); |
||||
} |
||||
} |
||||
} else { |
||||
if(collection){ |
||||
for (var i = 0, len = collection.length; i < len; i++) { |
||||
callback.call(scope, collection[i], i, collection); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Merge defaults with user options |
||||
* @private |
||||
* @param {Object} defaults Default settings |
||||
* @param {Object} options User options |
||||
* @returns {Object} Merged values of defaults and options |
||||
*/ |
||||
var extend = function (defaults, options) { |
||||
var extended = {}; |
||||
forEach(defaults, function (value, prop) { |
||||
extended[prop] = defaults[prop]; |
||||
}); |
||||
forEach(options, function (value, prop) { |
||||
extended[prop] = options[prop]; |
||||
}); |
||||
return extended; |
||||
}; |
||||
|
||||
/** |
||||
* Get the closest matching element up the DOM tree |
||||
* @param {Element} elem Starting element |
||||
* @param {String} selector Selector to match against (class, ID, or data attribute) |
||||
* @return {Boolean|Element} Returns false if not match found |
||||
*/ |
||||
var getClosest = function (elem, selector) { |
||||
var firstChar = selector.charAt(0); |
||||
for (; elem && elem !== document; elem = elem.parentNode) { |
||||
if (firstChar === '.') { |
||||
if (elem.classList.contains(selector.substr(1))) { |
||||
return elem; |
||||
} |
||||
} else if (firstChar === '#') { |
||||
if (elem.id === selector.substr(1)) { |
||||
return elem; |
||||
} |
||||
} else if (firstChar === '[') { |
||||
if (elem.hasAttribute(selector.substr(1, selector.length - 2))) { |
||||
return elem; |
||||
} |
||||
} |
||||
} |
||||
return false; |
||||
}; |
||||
|
||||
/** |
||||
* animationEnd
|
||||
* @private |
||||
*/ |
||||
function whichAnimationEvent(){ |
||||
var t, |
||||
el = document.createElement("fakeelement"); |
||||
|
||||
var animations = { |
||||
"animation" : "animationend", |
||||
"OAnimation" : "oAnimationEnd", |
||||
"MozAnimation" : "animationend", |
||||
"WebkitAnimation": "webkitAnimationEnd" |
||||
}; |
||||
for (t in animations){ |
||||
if (el.style[t] !== undefined){ |
||||
return animations[t]; |
||||
} |
||||
} |
||||
} |
||||
var animationEvent = whichAnimationEvent(); |
||||
|
||||
/** |
||||
* Create a fragment DOM elements |
||||
* @private |
||||
*/ |
||||
function createFragElem(htmlStr) { |
||||
var frag = document.createDocumentFragment(), |
||||
temp = document.createElement('div'); |
||||
temp.innerHTML = htmlStr; |
||||
while (temp.firstChild) { |
||||
frag.appendChild(temp.firstChild); |
||||
} |
||||
return frag; |
||||
} |
||||
|
||||
/** |
||||
* Do the calculation to move the progress bar |
||||
* @private |
||||
*/ |
||||
function moveProgress(toast, settings, callback){ |
||||
|
||||
var isPaused = false; |
||||
var isReseted = false; |
||||
var isClosed = false; |
||||
var timerTimeout = null; |
||||
var elem = toast.querySelector("."+PLUGIN_NAME+"-progressbar div"); |
||||
var progressBar = { |
||||
hideEta: null, |
||||
maxHideTime: null, |
||||
currentTime: new Date().getTime(), |
||||
updateProgress: function() |
||||
{ |
||||
isPaused = toast.classList.contains(PLUGIN_NAME+'-paused') ? true : false; |
||||
isReseted = toast.classList.contains(PLUGIN_NAME+'-reseted') ? true : false; |
||||
isClosed = toast.classList.contains(PLUGIN_NAME+'-closed') ? true : false; |
||||
|
||||
//console.log(new Date().getTime());
|
||||
|
||||
if(isReseted){ |
||||
console.log('ok'); |
||||
clearTimeout(timerTimeout); |
||||
elem.style.width = '100%'; |
||||
moveProgress(toast, settings, callback); |
||||
toast.classList.remove(PLUGIN_NAME+'-reseted'); |
||||
} |
||||
if(isClosed){ |
||||
clearTimeout(timerTimeout); |
||||
console.log('closed1'); |
||||
toast.classList.remove(PLUGIN_NAME+'-closed'); |
||||
} |
||||
|
||||
if(!isPaused && !isReseted && !isClosed){ |
||||
progressBar.currentTime = progressBar.currentTime+10; |
||||
var percentage = ((progressBar.hideEta - (progressBar.currentTime)) / progressBar.maxHideTime) * 100; |
||||
elem.style.width = percentage + '%'; |
||||
|
||||
if(Math.round(percentage) < 0 || typeof toast != 'object'){ |
||||
clearTimeout(timerTimeout); |
||||
callback.apply(); |
||||
console.log('closed2'); |
||||
} |
||||
} |
||||
|
||||
} |
||||
}; |
||||
if (settings.timeout > 0) { |
||||
progressBar.maxHideTime = parseFloat(settings.timeout); |
||||
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime; |
||||
timerTimeout = setInterval(progressBar.updateProgress, 10); |
||||
} |
||||
|
||||
} |
||||
|
||||
/** |
||||
* Destroy the current initialization. |
||||
* @public |
||||
*/ |
||||
iziToast.destroy = function () { |
||||
|
||||
forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) { |
||||
element.remove(); |
||||
}); |
||||
|
||||
forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) { |
||||
element.remove(); |
||||
}); |
||||
|
||||
// Remove event listeners
|
||||
document.removeEventListener(PLUGIN_NAME+'-open', {}, false); |
||||
document.removeEventListener(PLUGIN_NAME+'-close', {}, false); |
||||
|
||||
// Reset variables
|
||||
config = {}; |
||||
}; |
||||
|
||||
/** |
||||
* Initialize Plugin |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.settings = function (options) { |
||||
|
||||
// feature test
|
||||
if (!supports) return; |
||||
|
||||
// Destroy any existing initializations
|
||||
iziToast.destroy(); |
||||
|
||||
config = options; |
||||
defaults = extend(defaults, options || {}); |
||||
}; |
||||
|
||||
/** |
||||
* Info theme |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.info = function (options) { |
||||
|
||||
var theme = { |
||||
color: "blue", |
||||
icon: "ico-info" |
||||
}; |
||||
|
||||
var settings = extend(config, options || {}); |
||||
settings = extend(theme, settings || {}); |
||||
|
||||
this.show(settings); |
||||
}; |
||||
|
||||
/** |
||||
* Success theme |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.success = function (options) { |
||||
|
||||
var theme = { |
||||
color: "green", |
||||
icon: "ico-check" |
||||
}; |
||||
|
||||
var settings = extend(config, options || {}); |
||||
settings = extend(theme, settings || {}); |
||||
|
||||
this.show(settings); |
||||
}; |
||||
|
||||
/** |
||||
* Warning theme |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.warning = function (options) { |
||||
|
||||
var theme = { |
||||
color: "yellow", |
||||
icon: "ico-warning" |
||||
}; |
||||
|
||||
var settings = extend(config, options || {}); |
||||
settings = extend(theme, settings || {}); |
||||
|
||||
this.show(settings); |
||||
}; |
||||
|
||||
/** |
||||
* Error theme |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.error = function (options) { |
||||
|
||||
var theme = { |
||||
color: "red", |
||||
icon: "ico-error" |
||||
}; |
||||
|
||||
var settings = extend(config, options || {}); |
||||
settings = extend(theme, settings || {}); |
||||
|
||||
this.show(settings); |
||||
}; |
||||
|
||||
/** |
||||
* Close the specific Toast |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.hide = function (options, $toast) { |
||||
|
||||
var settings = extend(defaults, options || {}); |
||||
|
||||
if(typeof $toast != 'object'){ |
||||
$toast = document.querySelector($toast); |
||||
} |
||||
$toast.classList.add(PLUGIN_NAME+'-closed'); |
||||
|
||||
if(settings.transitionIn || settings.transitionInMobile){ |
||||
$toast.classList.remove(settings.transitionIn, settings.transitionInMobile); |
||||
} |
||||
if(settings.transitionOut || settings.transitionOutMobile){ |
||||
|
||||
if(isMobile || window.innerWidth <= mobileWidth){ |
||||
if(settings.transitionOutMobile.length>0) |
||||
$toast.classList.add(settings.transitionOutMobile); |
||||
} else{ |
||||
if(settings.transitionOut.length>0) |
||||
$toast.classList.add(settings.transitionOut); |
||||
} |
||||
var H = $toast.parentNode.offsetHeight; |
||||
$toast.parentNode.style.height = H+'px'; |
||||
$toast.style.pointerEvents = 'none'; |
||||
if(isMobile || window.innerWidth <= mobileWidth){ |
||||
|
||||
} else { |
||||
$toast.parentNode.style.transitionDelay = '0.2s'; |
||||
} |
||||
|
||||
setTimeout(function() { |
||||
$toast.parentNode.style.height = '0px'; |
||||
window.setTimeout(function(){ |
||||
$toast.parentNode.remove(); |
||||
},1000); |
||||
},200); |
||||
|
||||
} else { |
||||
$toast.parentNode.remove(); |
||||
} |
||||
|
||||
if (settings.class){ |
||||
try { |
||||
var event; |
||||
if (window.CustomEvent) { |
||||
event = new CustomEvent('iziToast-close', {detail: {class: settings.class}}); |
||||
} else { |
||||
event = document.createEvent('CustomEvent'); |
||||
event.initCustomEvent('iziToast-close', true, true, {class: settings.class}); |
||||
} |
||||
document.dispatchEvent(event); |
||||
} catch(ex){ |
||||
console.warn(ex); |
||||
} |
||||
} |
||||
|
||||
if(typeof settings.onClose !== "undefined") |
||||
settings.onClose.apply(); |
||||
}; |
||||
|
||||
/** |
||||
* Create and show the Toast |
||||
* @public |
||||
* @param {Object} options User settings |
||||
*/ |
||||
iziToast.show = function (options) { |
||||
|
||||
var that = this; |
||||
|
||||
// Merge user options with defaults
|
||||
var settings = extend(config, options || {}); |
||||
settings = extend(defaults, settings); |
||||
|
||||
var $toastCapsule = document.createElement("div"); |
||||
$toastCapsule.classList.add(PLUGIN_NAME+"-capsule"); |
||||
|
||||
var $toast = document.createElement("div"); |
||||
$toast.classList.add(PLUGIN_NAME); |
||||
|
||||
if(isMobile || window.innerWidth <= mobileWidth){ |
||||
if(settings.transitionInMobile.length>0) |
||||
$toast.classList.add(settings.transitionInMobile); |
||||
} else { |
||||
if(settings.transitionIn.length>0) |
||||
$toast.classList.add(settings.transitionIn); |
||||
} |
||||
|
||||
if(settings.rtl){ |
||||
$toast.classList.add(PLUGIN_NAME + '-rtl'); |
||||
} |
||||
|
||||
if (settings.color.length > 0) { //#, rgb, rgba, hsl
|
||||
|
||||
if( settings.color.substring(0,1) == "#" || settings.color.substring(0,3) == "rgb" || settings.color.substring(0,3) == "hsl" ){ |
||||
$toast.style.background = settings.color; |
||||
} else { |
||||
$toast.classList.add(PLUGIN_NAME+'-color-'+settings.color); |
||||
} |
||||
} |
||||
|
||||
if (settings.class){ |
||||
$toast.classList.add(settings.class); |
||||
} |
||||
|
||||
if (settings.image) { |
||||
var $cover = document.createElement("div"); |
||||
$cover.classList.add(PLUGIN_NAME + '-cover'); |
||||
$cover.style.width = settings.imageWidth + "px"; |
||||
$cover.style.backgroundImage = 'url(' + settings.image + ')'; |
||||
$toast.appendChild($cover); |
||||
} |
||||
|
||||
var $buttonClose; |
||||
if(settings.close){ |
||||
$buttonClose = document.createElement("button"); |
||||
$buttonClose.classList.add(PLUGIN_NAME + '-close'); |
||||
$toast.appendChild($buttonClose); |
||||
} else { |
||||
if(settings.rtl){ |
||||
$toast.style.paddingLeft = "30px"; |
||||
} else { |
||||
$toast.style.paddingRight = "30px"; |
||||
} |
||||
} |
||||
|
||||
if (settings.progressBar) { |
||||
|
||||
var $progressBar = document.createElement("div"); |
||||
$progressBar.classList.add(PLUGIN_NAME + '-progressbar'); |
||||
|
||||
var $progressBarDiv = document.createElement("div"); |
||||
$progressBarDiv.style.background = settings.progressBarColor; |
||||
|
||||
$progressBar.appendChild($progressBarDiv); |
||||
$toast.appendChild($progressBar); |
||||
|
||||
setTimeout(function() { |
||||
moveProgress($toast, settings, function(){ |
||||
that.hide(settings, $toast); |
||||
}); |
||||
},300); |
||||
} |
||||
else if( settings.progressBar === false && settings.timeout > 0){ |
||||
setTimeout(function() { |
||||
that.hide(settings, $toast); |
||||
}, settings.timeout); |
||||
} |
||||
|
||||
|
||||
var $toastBody = document.createElement("div"); |
||||
$toastBody.classList.add(PLUGIN_NAME + '-body'); |
||||
|
||||
if (settings.image) { |
||||
if(settings.rtl){ |
||||
$toastBody.style.marginRight = (settings.imageWidth + 10) + 'px'; |
||||
} else { |
||||
$toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';
|
||||
} |
||||
} |
||||
|
||||
if (settings.icon) { |
||||
var $icon = document.createElement("i"); |
||||
$icon.setAttribute("class", PLUGIN_NAME + '-icon ' + settings.icon); |
||||
|
||||
if (settings.iconText){ |
||||
$icon.appendChild(document.createTextNode(settings.iconText)); |
||||
} |
||||
|
||||
if(settings.rtl){ |
||||
$toastBody.style.paddingRight = '33px'; |
||||
} else { |
||||
$toastBody.style.paddingLeft = '33px';
|
||||
} |
||||
|
||||
if (settings.iconColor){ |
||||
$icon.style.color = settings.iconColor; |
||||
} |
||||
$toastBody.appendChild($icon); |
||||
} |
||||
|
||||
var $strong = document.createElement("strong"); |
||||
$strong.appendChild(document.createTextNode(settings.title)); |
||||
|
||||
var $p = document.createElement("p"); |
||||
$p.appendChild(document.createTextNode(settings.message)); |
||||
|
||||
|
||||
if(settings.layout > 1){ |
||||
$p.style.width = "100%"; |
||||
$toast.classList.add(PLUGIN_NAME+"-layout"+settings.layout); |
||||
} |
||||
|
||||
if(settings.balloon){ |
||||
$toast.classList.add(PLUGIN_NAME+"-balloon"); |
||||
} |
||||
|
||||
$toastBody.appendChild($strong); |
||||
$toastBody.appendChild($p); |
||||
|
||||
var $buttons; |
||||
if (settings.buttons.length > 0) { |
||||
|
||||
$buttons = document.createElement("div"); |
||||
$buttons.classList.add(PLUGIN_NAME + '-buttons'); |
||||
|
||||
$p.style.marginRight = '15px'; |
||||
|
||||
var i = 0; |
||||
forEach(settings.buttons, function (value, index) { |
||||
$buttons.appendChild(createFragElem(value[0])); |
||||
|
||||
var $btns = $buttons.childNodes; |
||||
|
||||
$btns[i].addEventListener('click', function (event) { |
||||
event.preventDefault(); |
||||
var ts = value[1]; |
||||
return new ts(that, $toast);
|
||||
}); |
||||
|
||||
i++; |
||||
}); |
||||
|
||||
$toastBody.appendChild($buttons); |
||||
} |
||||
|
||||
$toast.appendChild($toastBody); |
||||
$toastCapsule.style.visibility = 'hidden'; |
||||
$toastCapsule.style.height = '0px'; |
||||
$toastCapsule.appendChild($toast); |
||||
|
||||
setTimeout(function() { |
||||
var H = $toast.offsetHeight; |
||||
var style = $toast.currentStyle || window.getComputedStyle($toast); |
||||
var marginTop = style.marginTop; |
||||
marginTop = marginTop.split("px"); |
||||
marginTop = parseInt(marginTop[0]); |
||||
var marginBottom = style.marginBottom; |
||||
marginBottom = marginBottom.split("px"); |
||||
marginBottom = parseInt(marginBottom[0]); |
||||
|
||||
$toastCapsule.style.visibility = ''; |
||||
$toastCapsule.style.height = (H+marginBottom+marginTop)+'px'; |
||||
setTimeout(function() { |
||||
$toastCapsule.style.height = 'auto'; |
||||
},1000); |
||||
}, 100); |
||||
|
||||
var position = settings.position, |
||||
$wrapper; |
||||
|
||||
|
||||
|
||||
if(settings.target){ |
||||
|
||||
$wrapper = document.querySelector(settings.target); |
||||
$wrapper.classList.add(PLUGIN_NAME + '-target'); |
||||
$wrapper.appendChild($toastCapsule); |
||||
|
||||
} else { |
||||
if(isMobile || window.innerWidth <= mobileWidth){ |
||||
if(settings.position == "bottomLeft" || settings.position == "bottomRight" || settings.position == "bottomCenter"){ |
||||
position = PLUGIN_NAME+'-wrapper-bottomCenter'; |
||||
} |
||||
else if(settings.position == "topLeft" || settings.position == "topRight" || settings.position == "topCenter"){ |
||||
position = PLUGIN_NAME+'-wrapper-topCenter'; |
||||
} |
||||
else{ |
||||
position = PLUGIN_NAME+'-wrapper-center'; |
||||
} |
||||
} else { |
||||
position = PLUGIN_NAME+'-wrapper-'+position; |
||||
} |
||||
$wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position); |
||||
|
||||
if (!$wrapper) { |
||||
$wrapper = document.createElement("div"); |
||||
$wrapper.classList.add(PLUGIN_NAME + '-wrapper'); |
||||
$wrapper.classList.add(position); |
||||
document.body.appendChild($wrapper); |
||||
} |
||||
if(settings.position == "topLeft" || settings.position == "topCenter" || settings.position == "topRight"){ |
||||
$wrapper.insertBefore($toastCapsule, $wrapper.firstChild); |
||||
} else { |
||||
$wrapper.appendChild($toastCapsule); |
||||
} |
||||
} |
||||
|
||||
settings.onOpen.apply(); |
||||
|
||||
try { |
||||
var event; |
||||
if (window.CustomEvent) { |
||||
event = new CustomEvent('iziToast-open', {detail: {class: settings.class}}); |
||||
} else { |
||||
event = document.createEvent('CustomEvent'); |
||||
event.initCustomEvent('iziToast-open', true, true, {class: settings.class}); |
||||
} |
||||
document.dispatchEvent(event); |
||||
} catch(ex){ |
||||
console.warn(ex); |
||||
} |
||||
|
||||
if(settings.animateInside){ |
||||
$toast.classList.add(PLUGIN_NAME+'-animateInside'); |
||||
|
||||
var timeAnimation1 = 200; |
||||
var timeAnimation2 = 100; |
||||
var timeAnimation3 = 300; |
||||
if(settings.transitionIn == "bounceInLeft"){ |
||||
timeAnimation1 = 400; |
||||
timeAnimation2 = 200; |
||||
timeAnimation3 = 400; |
||||
} |
||||
|
||||
window.setTimeout(function(){ |
||||
$strong.classList.add('slideIn'); |
||||
},timeAnimation1); |
||||
|
||||
window.setTimeout(function(){ |
||||
$p.classList.add('slideIn'); |
||||
},timeAnimation2); |
||||
|
||||
if (settings.icon) { |
||||
window.setTimeout(function(){ |
||||
$icon.classList.add('revealIn'); |
||||
},timeAnimation3); |
||||
} |
||||
|
||||
if (settings.buttons.length > 0 && $buttons) { |
||||
var counter = 150; |
||||
forEach($buttons.childNodes, function(element, index) { |
||||
|
||||
window.setTimeout(function(){ |
||||
element.classList.add('revealIn'); |
||||
},counter); |
||||
counter = counter + counter; |
||||
}); |
||||
} |
||||
} |
||||
|
||||
if($buttonClose){ |
||||
$buttonClose.addEventListener('click', function (event) { |
||||
var button = event.target; |
||||
that.hide(settings, $toast); |
||||
}); |
||||
} |
||||
|
||||
if(settings.pauseOnHover){ |
||||
|
||||
$toast.addEventListener('mouseenter', function (event) { |
||||
this.classList.add(PLUGIN_NAME+'-paused'); |
||||
}); |
||||
$toast.addEventListener('mouseleave', function (event) { |
||||
this.classList.remove(PLUGIN_NAME+'-paused'); |
||||
}); |
||||
} |
||||
if(settings.resetOnHover){ |
||||
|
||||
$toast.addEventListener('mouseenter', function (event) { |
||||
this.classList.add(PLUGIN_NAME+'-reseted'); |
||||
}); |
||||
$toast.addEventListener('mouseleave', function (event) { |
||||
this.classList.remove(PLUGIN_NAME+'-reseted'); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
return iziToast; |
||||
}); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue