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