Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
Power BI Dev
322
assets/plugins/sweetalert/example/example.css
Normal file
322
assets/plugins/sweetalert/example/example.css
Normal file
@@ -0,0 +1,322 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
|
||||
body {
|
||||
background-color: #f2f4f6;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-align: center; }
|
||||
|
||||
h1 {
|
||||
background-image: url("images/logo_big.png");
|
||||
background-image: -webkit-image-set(url("images/logo_big.png") 1x, url("images/logo_big@2x.png") 2x);
|
||||
width: 385px;
|
||||
height: 81px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
margin: 50px auto; }
|
||||
@media all and (max-width: 420px) {
|
||||
h1 {
|
||||
width: 300px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; } }
|
||||
@media all and (max-width: 330px) {
|
||||
h1 {
|
||||
width: 250px; } }
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: #A9B2BC;
|
||||
line-height: 25px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
display: block; }
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #C7CCD1;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
h3#download-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 40px; }
|
||||
h3::after {
|
||||
content: "";
|
||||
background-color: #e2e5e8;
|
||||
height: 4px;
|
||||
width: 700px;
|
||||
left: 50%;
|
||||
margin-left: -350px;
|
||||
position: absolute;
|
||||
margin-top: -50px;
|
||||
border-radius: 2px; }
|
||||
@media all and (max-width: 740px) {
|
||||
h3::after {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
margin-left: 0; } }
|
||||
|
||||
a {
|
||||
text-decoration: none; }
|
||||
|
||||
p {
|
||||
max-width: 826px;
|
||||
margin: 30px auto;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
color: #848D94;
|
||||
line-height: 25px;
|
||||
text-align: left; }
|
||||
p.center {
|
||||
text-align: center; }
|
||||
p strong {
|
||||
color: #8A8F94;
|
||||
font-weight: 600; }
|
||||
p a {
|
||||
color: #9ECADF;
|
||||
font-weight: 600; }
|
||||
p a:hover {
|
||||
text-decoration: underline; }
|
||||
p a.twitter {
|
||||
color: #5eaade; }
|
||||
p a.dribbble {
|
||||
color: #f26798; }
|
||||
p a.github {
|
||||
color: #323131; }
|
||||
|
||||
button, .button {
|
||||
background-color: #AEDEF4;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 15px 35px;
|
||||
margin: 26px 5px 0 5px;
|
||||
cursor: pointer; }
|
||||
button:focus, .button:focus {
|
||||
outline: none; }
|
||||
button:hover, .button:hover {
|
||||
background-color: #a1d9f2; }
|
||||
button:active, .button:active {
|
||||
background-color: #81ccee; }
|
||||
button.cancel, .button.cancel {
|
||||
background-color: #D0D0D0; }
|
||||
button.cancel:hover, .button.cancel:hover {
|
||||
background-color: #c8c8c8; }
|
||||
button.cancel:active, .button.cancel:active {
|
||||
background-color: #b6b6b6; }
|
||||
button.download, .button.download {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: #ABCADA;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
z-index: 3; }
|
||||
@media all and (max-width: 1278px) {
|
||||
button.download, .button.download {
|
||||
display: none; } }
|
||||
|
||||
.center-container {
|
||||
max-width: 700px;
|
||||
margin: 70px auto; }
|
||||
|
||||
pre {
|
||||
background-color: #49483e;
|
||||
color: #f8f8f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
white-space: pre-line;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
max-width: 600px; }
|
||||
pre .str {
|
||||
color: #e6db74; }
|
||||
pre .func {
|
||||
color: #66d9ef; }
|
||||
pre .val {
|
||||
color: #a381ff; }
|
||||
pre .tag {
|
||||
color: #e92772; }
|
||||
pre .attr {
|
||||
color: #a6e22d; }
|
||||
|
||||
.showcase {
|
||||
background-color: #eceef0;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
width: 383px;
|
||||
vertical-align: top;
|
||||
position: relative; }
|
||||
@media all and (max-width: 865px) {
|
||||
.showcase {
|
||||
margin: 5px auto;
|
||||
padding: 46px 20px; } }
|
||||
@media all and (max-width: 440px) {
|
||||
.showcase {
|
||||
width: auto; } }
|
||||
.showcase h4 {
|
||||
font-size: 16px;
|
||||
color: #BCBCBC;
|
||||
line-height: 22px;
|
||||
margin: 0 auto;
|
||||
font-weight: 400; }
|
||||
.showcase.sweet h4 {
|
||||
width: 117px;
|
||||
height: 25px;
|
||||
margin-top: -3px;
|
||||
text-indent: -9999px;
|
||||
background-image: url("images/logo_small.png");
|
||||
background-image: -webkit-image-set(url("images/logo_small.png") 1x, url("images/logo_small@2x.png") 2x); }
|
||||
.showcase h5 {
|
||||
margin-bottom: -7px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #c2c2c2; }
|
||||
.showcase button {
|
||||
margin-bottom: 10px; }
|
||||
.showcase .vs-icon {
|
||||
background-image: url("images/vs_icon.png");
|
||||
background-image: -webkit-image-set(url("images/vs_icon.png") 1x, url("images/vs_icon@2x.png") 2x);
|
||||
width: 69px;
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
right: -34px;
|
||||
top: 60px;
|
||||
z-index: 2; }
|
||||
@media all and (max-width: 865px) {
|
||||
.showcase .vs-icon {
|
||||
margin: 5px auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
top: auto;
|
||||
bottom: -35px; } }
|
||||
|
||||
ul.examples {
|
||||
list-style-type: none;
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-left: 0; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples {
|
||||
width: auto; } }
|
||||
ul.examples li {
|
||||
padding-left: 0; }
|
||||
ul.examples .ui, ul.examples pre {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples .ui, ul.examples pre {
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 auto; } }
|
||||
ul.examples .ui {
|
||||
width: 300px;
|
||||
text-align: center; }
|
||||
ul.examples .ui button {
|
||||
margin-top: 12px; }
|
||||
ul.examples .ui p {
|
||||
text-align: center;
|
||||
margin-bottom: 0; }
|
||||
ul.examples pre {
|
||||
max-width: 370px;
|
||||
margin-top: 67px; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples pre {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: 60px; } }
|
||||
ul.examples .warning pre {
|
||||
margin-top: 93px; }
|
||||
|
||||
ol {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
list-style-position: inside;
|
||||
padding-left: 0; }
|
||||
ol li {
|
||||
color: #A7ADB2; }
|
||||
ol li p {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
table {
|
||||
width: 700px;
|
||||
font-size: 14px;
|
||||
color: #8a8f94;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border-collapse: collapse; }
|
||||
@media all and (max-width: 750px) {
|
||||
table {
|
||||
width: auto;
|
||||
margin: 10px 20px; } }
|
||||
table th {
|
||||
background-color: white;
|
||||
padding: 9px;
|
||||
color: #acb9be;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
table th .border-left, table th .border-right {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -17px;
|
||||
width: 37px;
|
||||
height: 37px; }
|
||||
table th .border-right {
|
||||
left: auto;
|
||||
right: -17px; }
|
||||
@media all and (max-width: 750px) {
|
||||
table th:nth-child(2) {
|
||||
display: none; } }
|
||||
table td {
|
||||
padding: 10px 20px;
|
||||
vertical-align: top; }
|
||||
table td:first-child {
|
||||
padding-left: 0px; }
|
||||
table td:last-child {
|
||||
padding-right: 0px; }
|
||||
@media all and (max-width: 750px) {
|
||||
table td:nth-child(2) {
|
||||
display: none; } }
|
||||
@media all and (max-width: 360px) {
|
||||
table td {
|
||||
padding: 10px 4px; }
|
||||
table td b {
|
||||
font-size: 13px; } }
|
||||
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
padding-bottom: 30px;
|
||||
color: #9A999F;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
color: #93a1aa;
|
||||
font-weight: 300; }
|
||||
footer .te-logo {
|
||||
text-indent: -99999px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-image: url("images/te-logo-small.svg");
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px; }
|
||||
412
assets/plugins/sweetalert/example/example.scss
Normal file
412
assets/plugins/sweetalert/example/example.scss
Normal file
@@ -0,0 +1,412 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300); // Open Sans font
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700); // Condensed
|
||||
|
||||
@mixin retina-background($url, $type:png) {
|
||||
background-image: url("#{$url}.#{$type}");
|
||||
background-image: -webkit-image-set(url("#{$url}.#{$type}") 1x,
|
||||
url("#{$url}@2x.#{$type}") 2x);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f4f6;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include retina-background("images/logo_big");
|
||||
width: 385px;
|
||||
height: 81px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
margin: 50px auto;
|
||||
@media all and (max-width: 420px) {
|
||||
width: 300px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
@media all and (max-width: 330px) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: #A9B2BC;
|
||||
line-height: 25px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #C7CCD1;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&#download-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: #e2e5e8;
|
||||
height: 4px;
|
||||
width: 700px;
|
||||
left: 50%;
|
||||
margin-left: -350px;
|
||||
position: absolute;
|
||||
margin-top: -50px;
|
||||
border-radius: 2px;
|
||||
|
||||
@media all and (max-width: 740px) {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 826px;
|
||||
margin: 30px auto;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
color: #848D94;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #8A8F94;
|
||||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
color: #9ECADF;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.twitter {
|
||||
color: #5eaade;
|
||||
}
|
||||
&.dribbble {
|
||||
color: #f26798;
|
||||
}
|
||||
&.github {
|
||||
color: #323131;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button, .button {
|
||||
$btnBlue: #AEDEF4;
|
||||
$btnGray: #D0D0D0;
|
||||
|
||||
background-color: $btnBlue;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 15px 35px;
|
||||
margin: 26px 5px 0 5px;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($btnBlue, 3%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($btnBlue, 10%);
|
||||
}
|
||||
&.cancel {
|
||||
background-color: $btnGray;
|
||||
&:hover {
|
||||
background-color: darken($btnGray, 3%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($btnGray, 10%);
|
||||
}
|
||||
}
|
||||
&.download {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
top: 0;
|
||||
background-color: rgba(white, 0.9);
|
||||
color: #ABCADA;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
z-index: 3;
|
||||
|
||||
@media all and (max-width: 1278px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-container {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #49483e;
|
||||
color: #f8f8f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
white-space: pre-line;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
max-width: 600px;
|
||||
|
||||
.str {
|
||||
color: #e6db74;
|
||||
}
|
||||
.func {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.val {
|
||||
color: #a381ff;
|
||||
}
|
||||
.tag {
|
||||
color: #e92772;
|
||||
}
|
||||
.attr {
|
||||
color: #a6e22d;
|
||||
}
|
||||
}
|
||||
|
||||
.showcase {
|
||||
background-color: #eceef0;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
width: 383px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
@media all and (max-width: 865px) {
|
||||
margin: 5px auto;
|
||||
padding: 46px 20px;
|
||||
}
|
||||
@media all and (max-width: 440px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
color: #BCBCBC;
|
||||
line-height: 22px;
|
||||
margin: 0 auto;
|
||||
font-weight: 400;
|
||||
}
|
||||
&.sweet h4 {
|
||||
width: 117px;
|
||||
height: 25px;
|
||||
margin-top: -3px;
|
||||
text-indent: -9999px;
|
||||
@include retina-background("images/logo_small");
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: -7px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgb(194, 194, 194);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vs-icon {
|
||||
@include retina-background("images/vs_icon");
|
||||
width: 69px;
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
right: -34px;
|
||||
top: 60px;
|
||||
z-index: 2;
|
||||
|
||||
@media all and (max-width: 865px) {
|
||||
margin: 5px auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
top: auto;
|
||||
bottom: -35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul.examples {
|
||||
list-style-type: none;
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
@media all and (max-width: 758px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui, pre {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
@media all and (max-width: 758px) {
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.ui {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 370px;
|
||||
margin-top: 67px;
|
||||
|
||||
@media all and (max-width: 758px) {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
.warning pre {
|
||||
margin-top: 93px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ol {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
color: #A7ADB2;
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
width: 700px;
|
||||
font-size: 14px;
|
||||
color: #8a8f94;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
@media all and (max-width: 750px) {
|
||||
width: auto;
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: white;
|
||||
padding: 9px;
|
||||
color: rgb(172, 185, 190);
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.border-left, .border-right {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -17px;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
.border-right {
|
||||
left: auto;
|
||||
right: -17px;
|
||||
}
|
||||
@media all and (max-width: 750px) {
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
vertical-align: top;
|
||||
&:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0px;
|
||||
}
|
||||
@media all and (max-width: 750px) {
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 360px) {
|
||||
padding: 10px 4px;
|
||||
b {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
padding-bottom: 30px;
|
||||
color: #9A999F;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
color: rgb(147, 161, 170);
|
||||
font-weight: 300;
|
||||
|
||||
.te-logo {
|
||||
text-indent: -99999px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-image: url("images/te-logo-small.svg");
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
BIN
assets/plugins/sweetalert/example/images/logo_big.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_big@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_big@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_small.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_small@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_small@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
12
assets/plugins/sweetalert/example/images/te-logo-small.svg
Normal file
12
assets/plugins/sweetalert/example/images/te-logo-small.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="14px" height="11px" viewBox="0 0 14 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>te-logo-small</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Website" sketch:type="MSArtboardGroup" transform="translate(-520.000000, -1871.000000)" fill="#AFC1C9">
|
||||
<path d="M526.768,1871.832 L524.416,1871.832 L524.416,1881.672 L523.488,1881.672 L523.488,1871.832 L520,1871.832 L520,1871 L527.336,1871 L533.536,1871 L533.536,1871.832 L527.68,1871.832 L527.68,1875.784 L533.424,1875.784 L533.424,1876.616 L527.68,1876.616 L527.68,1880.84 L533.536,1880.84 L533.536,1881.672 L526.768,1881.672 L526.768,1871.832 Z" id="te-logo-small" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/plugins/sweetalert/example/images/thumbs-up.jpg
Normal file
BIN
assets/plugins/sweetalert/example/images/thumbs-up.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/plugins/sweetalert/example/images/vs_icon.png
Normal file
BIN
assets/plugins/sweetalert/example/images/vs_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/plugins/sweetalert/example/images/vs_icon@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/vs_icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
339
assets/plugins/sweetalert/example/index.html
Normal file
339
assets/plugins/sweetalert/example/index.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE HTML>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>SweetAlert</title>
|
||||
|
||||
<link rel="stylesheet" href="./example.css">
|
||||
|
||||
<!-- This is what you need -->
|
||||
<script src="../lib/sweet-alert.js"></script>
|
||||
<link rel="stylesheet" href="../lib/sweet-alert.css">
|
||||
<!--.......................-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Sweet Alert</h1>
|
||||
<h2>A beautiful replacement for Javascript's "Alert"</h2>
|
||||
<button class="download">Download</button>
|
||||
|
||||
<!-- What does it do? -->
|
||||
<h3>So... What does it do?</h3>
|
||||
<p>Here’s a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
|
||||
|
||||
<div class="showcase normal">
|
||||
<h4>Normal alert</h4>
|
||||
<button>Show error message</button>
|
||||
|
||||
<h5>Code:</h5>
|
||||
<pre><span class="func">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
|
||||
|
||||
</pre>
|
||||
|
||||
<div class="vs-icon"></div>
|
||||
</div>
|
||||
|
||||
<div class="showcase sweet">
|
||||
<h4>Sweet Alert</h4>
|
||||
<button>Show error message</button>
|
||||
|
||||
<h5>Code:</h5>
|
||||
<pre>sweetAlert(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre>
|
||||
</div>
|
||||
|
||||
<p>Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
|
||||
|
||||
|
||||
<!-- Examples -->
|
||||
<h3>More examples</h3>
|
||||
|
||||
<p class="center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p>
|
||||
|
||||
<ul class="examples">
|
||||
|
||||
<li class="message">
|
||||
<div class="ui">
|
||||
<p>A basic message</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Here's a message!"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="title-text">
|
||||
<div class="ui">
|
||||
<p>A title with a text under</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it?"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="success">
|
||||
<div class="ui">
|
||||
<p>A success message!</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="warning confirm">
|
||||
<div class="ui">
|
||||
<p>A warning message, with a function attached to the "Confirm"-button...</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Are you sure?"</span>,
|
||||
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
||||
type: <span class="str">"warning"</span>,
|
||||
showCancelButton: <span class="val">true</span>,
|
||||
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
||||
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
||||
closeOnConfirm: <span class="val">false</span>
|
||||
},
|
||||
<span class="func"><i>function</i></span>(){
|
||||
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
<li class="warning cancel">
|
||||
<div class="ui">
|
||||
<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Are you sure?"</span>,
|
||||
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
||||
type: <span class="str">"warning"</span>,
|
||||
showCancelButton: <span class="val">true</span>,
|
||||
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
||||
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
||||
cancelButtonText: <span class="str">"No, cancel plx!"</span>,
|
||||
closeOnConfirm: <span class="val">false</span>,
|
||||
closeOnCancel: <span class="val">false</span>
|
||||
},
|
||||
<span class="func"><i>function</i></span>(isConfirm){
|
||||
<span class="tag">if</span> (isConfirm) {
|
||||
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
||||
} <span class="tag">else</span> {
|
||||
<span class="func">swal</span>(<span class="str">"Cancelled"</span>, <span class="str">"Your imaginary file is safe :)"</span>, <span class="str">"error"</span>);
|
||||
}
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
<li class="custom-icon">
|
||||
<div class="ui">
|
||||
<p>A message with a custom icon</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Sweet!"</span>,
|
||||
text: <span class="str">"Here's a custom image."</span>,
|
||||
imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- Download & Install -->
|
||||
<h3 id="download-section">Download & install</h3>
|
||||
|
||||
<div class="center-container">
|
||||
<p class="center"><b>Method 1:</b> Install through bower:</p>
|
||||
<pre class="center">$ bower install sweetalert</pre>
|
||||
</div>
|
||||
|
||||
<p class="center"><b>Method 2:</b> Download the sweetAlert <strong>CSS</strong> and <strong>JavaScript</strong> files.</p>
|
||||
|
||||
<a class="button" href="https://github.com/t4t5/sweetalert/archive/master.zip" download>Download files</a>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>Initialize the plugin by referencing the necessary files:</p>
|
||||
<pre><<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>></<span class="tag">script</span>>
|
||||
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"lib/sweet-alert.css"</span>></pre>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>Call the sweetAlert-function after the page has loaded</p>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Error!"</span>,
|
||||
text: <span class="str">"Here's my error message!"</span>,
|
||||
type: <span class="str">"error"</span>,
|
||||
confirmButtonText: <span class="str">"Cool"</span>
|
||||
});
|
||||
</pre>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<!-- Configuration -->
|
||||
<h3>Configuration</h3>
|
||||
|
||||
<p class="center">Here are the keys that you can use if you pass an object into sweetAlert:</p>
|
||||
|
||||
<table>
|
||||
<tr class="titles">
|
||||
<th>
|
||||
<div class="border-left"></div>
|
||||
Argument
|
||||
</th>
|
||||
<th>Default value</th>
|
||||
<th>
|
||||
<div class="border-right"></div>
|
||||
Description
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>title</b></td>
|
||||
<td><i>null (required)</i></td>
|
||||
<td>The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>text</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>type</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "<strong>warning</strong>", "<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>allowOutsideClick</b></td>
|
||||
<td><i>false</i></td>
|
||||
<td>If set to <strong>true</strong>, the user can dismiss the modal by clicking outside it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>showCancelButton</b></td>
|
||||
<td><i>false</i></td>
|
||||
<td>If set to <strong>true</strong>, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>confirmButtonText</b></td>
|
||||
<td><i>"OK"</i></td>
|
||||
<td>Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>confirmButtonColor</b></td>
|
||||
<td><i>"#AEDEF4"</i></td>
|
||||
<td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>cancelButtonText</b></td>
|
||||
<td><i>"Cancel"</i></td>
|
||||
<td>Use this to change the text on the "Cancel"-button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>closeOnConfirm</b></td>
|
||||
<td><i>true</i></td>
|
||||
<td>Set to <i>false</i> if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>imageUrl</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>Add a customized icon for the modal. Should contain a string with the path to the image.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>imageSize</b></td>
|
||||
<td><i>"80x80"</i></td>
|
||||
<td>If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!-- Contribute -->
|
||||
<h3>Contribute</h3>
|
||||
<p>SweetAlert was created by <a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>, you can follow him on <a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a> or <a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a> for updates and other cool projects!</p>
|
||||
<p>Feel free to fork sweetAlert on <a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a> if you have any features that you want to add!</p>
|
||||
|
||||
|
||||
<footer>
|
||||
<span class="te-logo">TE</span> • 2014
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelector('button.download').onclick = function(){
|
||||
$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
|
||||
};
|
||||
|
||||
document.querySelector('.showcase.normal button').onclick = function(){
|
||||
alert("Oops... Something went wrong!");
|
||||
};
|
||||
|
||||
document.querySelector('.showcase.sweet button').onclick = function(){
|
||||
swal("Oops...", "Something went wrong!", "error");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.message button').onclick = function(){
|
||||
swal("Here's a message!");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.title-text button').onclick = function(){
|
||||
swal("Here's a message!", "It's pretty, isn't it?")
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.success button').onclick = function(){
|
||||
swal("Good job!", "You clicked the button!", "success");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#DD6B55',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
closeOnConfirm: false,
|
||||
//closeOnCancel: false
|
||||
},
|
||||
function(){
|
||||
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#DD6B55',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: "No, cancel plx!",
|
||||
closeOnConfirm: false,
|
||||
closeOnCancel: false
|
||||
},
|
||||
function(isConfirm){
|
||||
if (isConfirm){
|
||||
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
||||
} else {
|
||||
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.custom-icon button').onclick = function(){
|
||||
swal({
|
||||
title: "Sweet!",
|
||||
text: "Here's a custom image.",
|
||||
imageUrl: 'images/thumbs-up.jpg'
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user