renamed to mailymaily
This commit is contained in:
parent
f35b067076
commit
bf9caccd06
32
README.md
32
README.md
|
@ -1,29 +1,29 @@
|
|||
<p align="center">
|
||||
<a href="https://mailtoui.com">
|
||||
<img src="https://mailtoui.com/assets/img/heading.jpg" alt="MailtoUI">
|
||||
<a href="https://mailymaily.com">
|
||||
<img src="https://mailymaily.com/assets/img/heading.jpg" alt="mailymaily">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">A simple way to enhance your mailto links with a convenient user interface.</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/mariordev/mailtoui/releases"><img src="https://img.shields.io/npm/v/mailtoui.svg" alt="Latest release"></a>
|
||||
<a href="https://www.npmjs.com/package/mailtoui"><img src="https://img.shields.io/npm/dt/mailtoui.svg" alt="Total downloads"></a>
|
||||
<a href="https://github.com/mariordev/mailtoui/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mariordev/mailtoui.svg" alt="License"></a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Check%20this%20out!%20&url=https%3A%2F%2Fmailtoui.com"><img src="https://img.shields.io/twitter/url/https/mailtoui.com.svg?style=social" alt="Share on Twitter"></a>
|
||||
<a href="https://github.com/mariordev/mailymaily/releases"><img src="https://img.shields.io/npm/v/mailymaily.svg" alt="Latest release"></a>
|
||||
<a href="https://www.npmjs.com/package/mailymaily"><img src="https://img.shields.io/npm/dt/mailymaily.svg" alt="Total downloads"></a>
|
||||
<a href="https://github.com/mariordev/mailymaily/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mariordev/mailymaily.svg" alt="License"></a>
|
||||
<a href="https://twitter.com/intent/tweet?text=Check%20this%20out!%20&url=https%3A%2F%2Fmailymaily.com"><img src="https://img.shields.io/twitter/url/https/mailymaily.com.svg?style=social" alt="Share on Twitter"></a>
|
||||
</p>
|
||||
|
||||
## Introduction
|
||||
|
||||
MailtoUI is a JavaScript library that enhances your mailto links with a convenient user interface. It gives your users the flexibility to compose a new message using a browser-based email client <strong><i>or</i></strong> their default local email app.
|
||||
mailymaily is a JavaScript library that enhances your mailto links with a convenient user interface. It gives your users the flexibility to compose a new message using a browser-based email client <strong><i>or</i></strong> their default local email app.
|
||||
|
||||
MailtoUI is ideal for static sites or any other site where you don't want to spend time setting up a "Contact Us" form solution.
|
||||
mailymaily is ideal for static sites or any other site where you don't want to spend time setting up a "Contact Us" form solution.
|
||||
|
||||
## Quick Setup
|
||||
|
||||
### STEP 1
|
||||
|
||||
Add MailtoUI via CDN to the bottom of your page, just before the closing `</body>` tag.
|
||||
Add mailymaily via CDN to the bottom of your page, just before the closing `</body>` tag.
|
||||
|
||||
IMPORTANT: Be sure to replace `[version]` with the latest version number.
|
||||
|
||||
|
@ -31,29 +31,29 @@ IMPORTANT: Be sure to replace `[version]` with the latest version number.
|
|||
<body>
|
||||
...
|
||||
...
|
||||
<script src="https://cdn.jsdelivr.net/npm/mailtoui@[version]/dist/mailtoui-min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mailymaily@[version]/dist/mailymaily-min.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
### STEP 2
|
||||
|
||||
Attach your mailto link to MailtoUI by adding the class `mailtoui` to the `<a>` tag.
|
||||
Attach your mailto link to mailymaily by adding the class `mailymaily` to the `<a>` tag.
|
||||
|
||||
```html
|
||||
<a class="mailtoui" href="mailto:tony.stark@example.com">Contact Tony</a>
|
||||
<a class="mailymaily" href="mailto:tony.stark@example.com">Contact Tony</a>
|
||||
```
|
||||
|
||||
That's it! Your mailto link is now using MailtoUI. Refresh your page and try it out.
|
||||
That's it! Your mailto link is now using mailymaily. Refresh your page and try it out.
|
||||
|
||||
|
||||
## Documentation
|
||||
|
||||
For full documentation, visit [mailtoui.com](https://mailtoui.com).
|
||||
For full documentation, visit [mailymaily.com](https://mailymaily.com).
|
||||
|
||||
## Contributing
|
||||
|
||||
If you're interested in contributing to MailtoUI, please follow the directions in the [contributing docs](https://github.com/mariordev/mailtoui/blob/master/.github/CONTRIBUTING.md) **before working on a pull request**.
|
||||
If you're interested in contributing to mailymaily, please follow the directions in the [contributing docs](https://github.com/mariordev/mailymaily/blob/master/.github/CONTRIBUTING.md) **before working on a pull request**.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/mariordev/mailtoui/blob/master/LICENSE)
|
||||
[MIT](https://github.com/mariordev/mailymaily/blob/master/LICENSE)
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -60,7 +60,7 @@ function css() {
|
|||
function js() {
|
||||
packageJson = fs.readJsonSync('./package.json');
|
||||
|
||||
return src('./src/js/mailtoui.js')
|
||||
return src('./src/js/mailymaily.js')
|
||||
.pipe(eslint())
|
||||
.pipe(eslint.format())
|
||||
.pipe(minify({ noSource: true }))
|
||||
|
@ -114,7 +114,7 @@ function demoCss() {
|
|||
function watchFiles() {
|
||||
watch('./src/html/component.html', html);
|
||||
watch('./src/scss/component.scss', css);
|
||||
watch(['./src/js/mailtoui.js', './package.json'], series(js, lintDemoJs, processDemoJs));
|
||||
watch(['./src/js/mailymaily.js', './package.json'], series(js, lintDemoJs, processDemoJs));
|
||||
watch('./demo/demo.scss', demoCss);
|
||||
watch('./demo/demo.js', demoJs);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "mailtoui",
|
||||
"name": "mailymaily",
|
||||
"version": "1.0.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
|
|
14
package.json
14
package.json
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"name": "mailtoui",
|
||||
"name": "mailymaily",
|
||||
"description": "A simple way to enhance your mailto links with a convenient user interface.",
|
||||
"version": "1.0.3",
|
||||
"homepage": "https://mailtoui.com",
|
||||
"homepage": "https://mailymaily.com",
|
||||
"author": {
|
||||
"name": "Mario Rodriguez",
|
||||
"url": "https://twitter.com/mariordev"
|
||||
},
|
||||
"keywords": [
|
||||
"mailtoui",
|
||||
"mailymaily",
|
||||
"mailto",
|
||||
"ui",
|
||||
"mail",
|
||||
|
@ -17,8 +17,8 @@
|
|||
"user interface"
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/mariordev/mailtoui.git",
|
||||
"bugs": "https://github.com/mariordev/mailtoui/issues",
|
||||
"repository": "https://github.com/mariordev/mailymaily.git",
|
||||
"bugs": "https://github.com/mariordev/mailymaily/issues",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.5.5",
|
||||
"@babel/plugin-transform-regenerator": "^7.4.5",
|
||||
|
@ -54,8 +54,8 @@
|
|||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
"jsdelivr": "dist/mailtoui-min.js",
|
||||
"jsdelivr": "dist/mailymaily-min.js",
|
||||
"scripts": {
|
||||
"lint": "eslint ./src/js/mailtoui.js"
|
||||
"lint": "eslint ./src/js/mailymaily.js"
|
||||
}
|
||||
}
|
|
@ -1 +1 @@
|
|||
.mailtoui-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailtoui-modal-content{-webkit-animation:mailtoui-appear .4s;animation:mailtoui-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailtoui-modal-content:focus,.mailtoui-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailtoui-modal-content{right:auto}}.mailtoui-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailtoui-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailtoui-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-button{color:#333;text-decoration:none}.mailtoui-button:focus{outline:0}.mailtoui-button:focus .mailtoui-button-content{background-color:#555;color:#fff}.mailtoui-button-content{background-color:#fff;border:none;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailtoui-button-content:hover{background-color:#555;color:#fff}.mailtoui-button:last-child .mailtoui-button-content{margin-bottom:0}.mailtoui-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailtoui-button-icon svg{height:24px;width:24px}.mailtoui-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailtoui-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailtoui-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailtoui-button-copy:focus,.mailtoui-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-button-copy-clicked,.mailtoui-button-copy-clicked:focus,.mailtoui-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailtoui-button-copy-clicked .mailtoui-button-icon,.mailtoui-button-copy-clicked:focus .mailtoui-button-icon,.mailtoui-button-copy-clicked:hover .mailtoui-button-icon{display:none;visibility:hidden}.mailtoui-button-copy-clicked .mailtoui-button-text,.mailtoui-button-copy-clicked:focus .mailtoui-button-text,.mailtoui-button-copy-clicked:hover .mailtoui-button-text{color:#fff;top:2px}.mailtoui-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailtoui-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailtoui-brand a{color:#888}.mailtoui-brand a:focus,.mailtoui-brand a:hover{font-weight:700;outline:0}.mailtoui-no-scroll{overflow:hidden;position:fixed;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailtoui-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailtoui-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}
|
||||
.mailymaily-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}
|
|
@ -1 +1 @@
|
|||
<div class="mailtoui-modal-content"><div class="mailtoui-modal-head"><div id="mailtoui-modal-title" class="mailtoui-modal-title">${options.title}</div><a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">×</a></div><div class="mailtoui-modal-body"><div class="mailtoui-clients"><a id="mailtoui-button-1" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${options.buttonIcon1}</span> <span id="mailtoui-button-text-1" class="mailtoui-button-text">${options.buttonText1}</span></div></a><a id="mailtoui-button-2" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${options.buttonIcon2}</span> <span id="mailtoui-button-text-2" class="mailtoui-button-text">${options.buttonText2}</span></div></a><a id="mailtoui-button-3" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${options.buttonIcon3}</span> <span id="mailtoui-button-text-3" class="mailtoui-button-text">${options.buttonText3}</span></div></a><a id="mailtoui-button-4" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${options.buttonIcon4}</span> <span id="mailtoui-button-text-4" class="mailtoui-button-text">${options.buttonText4}</span></div></a></div><div id="mailtoui-copy" class="mailtoui-copy"><div id="mailtoui-email-address" class="mailtoui-email-address"></div><button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address"><span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${options.buttonIconCopy}</span> <span id="mailtoui-button-text-copy" class="mailtoui-button-text">${options.buttonTextCopy}</span></button></div><div class="mailtoui-brand"><a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a></div></div></div>
|
||||
<div class="mailymaily-modal-content"><div class="mailymaily-modal-head"><div id="mailymaily-modal-title" class="mailymaily-modal-title">${options.title}</div><a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">×</a></div><div class="mailymaily-modal-body"><div class="mailymaily-clients"><a id="mailymaily-button-1" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span></div></a><a id="mailymaily-button-2" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span></div></a><a id="mailymaily-button-3" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${options.buttonIcon3}</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${options.buttonText3}</span></div></a><a id="mailymaily-button-4" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span></div></a></div><div id="mailymaily-copy" class="mailymaily-copy"><div id="mailymaily-email-address" class="mailymaily-email-address"></div><button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address"><span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span></button></div><div class="mailymaily-brand"><a href="https://mailymaily.com?ref=ui" target="_blank">Powered by mailymaily</a></div></div></div>
|
|
@ -1,49 +1,45 @@
|
|||
<div class="mailtoui-modal-content">
|
||||
<div class="mailtoui-modal-head">
|
||||
<div id="mailtoui-modal-title" class="mailtoui-modal-title">${options.title}</div>
|
||||
<a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">×</a>
|
||||
<div class="mailymaily-modal-content">
|
||||
<div class="mailymaily-modal-head">
|
||||
<div id="mailymaily-modal-title" class="mailymaily-modal-title">${options.title}</div>
|
||||
<a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">×</a>
|
||||
</div>
|
||||
<div class="mailtoui-modal-body">
|
||||
<div class="mailtoui-clients">
|
||||
<a id="mailtoui-button-1" class="mailtoui-button" href="#">
|
||||
<div class="mailtoui-button-content">
|
||||
<span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${options.buttonIcon1}</span>
|
||||
<span id="mailtoui-button-text-1" class="mailtoui-button-text">${options.buttonText1}</span>
|
||||
<div class="mailymaily-modal-body">
|
||||
<div class="mailymaily-clients">
|
||||
<a id="mailymaily-button-1" class="mailymaily-button" href="#">
|
||||
<div class="mailymaily-button-content">
|
||||
<span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${options.buttonIcon1}</span>
|
||||
<span id="mailymaily-button-text-1" class="mailymaily-button-text">${options.buttonText1}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a id="mailtoui-button-2" class="mailtoui-button" href="#">
|
||||
<div class="mailtoui-button-content">
|
||||
<span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${options.buttonIcon2}</span>
|
||||
<span id="mailtoui-button-text-2" class="mailtoui-button-text">${options.buttonText2}</span>
|
||||
<a id="mailymaily-button-2" class="mailymaily-button" href="#">
|
||||
<div class="mailymaily-button-content">
|
||||
<span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${options.buttonIcon2}</span>
|
||||
<span id="mailymaily-button-text-2" class="mailymaily-button-text">${options.buttonText2}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a id="mailtoui-button-3" class="mailtoui-button" href="#">
|
||||
<div class="mailtoui-button-content">
|
||||
<span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${options.buttonIcon3}</span>
|
||||
<span id="mailtoui-button-text-3" class="mailtoui-button-text">${options.buttonText3}</span>
|
||||
<a id="mailymaily-button-3" class="mailymaily-button" href="#">
|
||||
<div class="mailymaily-button-content">
|
||||
<span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${options.buttonIcon3}</span>
|
||||
<span id="mailymaily-button-text-3" class="mailymaily-button-text">${options.buttonText3}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a id="mailtoui-button-4" class="mailtoui-button" href="#">
|
||||
<div class="mailtoui-button-content">
|
||||
<span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${options.buttonIcon4}</span>
|
||||
<span id="mailtoui-button-text-4" class="mailtoui-button-text">${options.buttonText4}</span>
|
||||
<a id="mailymaily-button-4" class="mailymaily-button" href="#">
|
||||
<div class="mailymaily-button-content">
|
||||
<span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${options.buttonIcon4}</span>
|
||||
<span id="mailymaily-button-text-4" class="mailymaily-button-text">${options.buttonText4}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="mailtoui-copy" class="mailtoui-copy">
|
||||
<div id="mailtoui-email-address" class="mailtoui-email-address"></div>
|
||||
<button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address">
|
||||
<span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${options.buttonIconCopy}</span>
|
||||
<span id="mailtoui-button-text-copy" class="mailtoui-button-text">${options.buttonTextCopy}</span>
|
||||
<div id="mailymaily-copy" class="mailymaily-copy">
|
||||
<div id="mailymaily-email-address" class="mailymaily-email-address"></div>
|
||||
<button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address">
|
||||
<span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${options.buttonIconCopy}</span>
|
||||
<span id="mailymaily-button-text-copy" class="mailymaily-button-text">${options.buttonTextCopy}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mailtoui-brand">
|
||||
<a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
/**
|
||||
* MailtoUI - A simple way to enhance your mailto links with a convenient user interface.
|
||||
* mailymaily - A simple way to enhance your mailto links with a convenient user interface.
|
||||
*
|
||||
* @link https://mailtoui.com
|
||||
* @link https://mailymaily.com
|
||||
* @author Mario Rodriguez - https://twitter.com/mariordev
|
||||
* @license MIT
|
||||
*
|
||||
* MailtoUI is a library that enhances your mailto links with a convenient user interface.
|
||||
* mailymaily is a library that enhances your mailto links with a convenient user interface.
|
||||
* It gives your site visitors the flexibility to compose a new email message using a
|
||||
* browser-based email client or their default local email application.
|
||||
*/
|
||||
|
@ -13,7 +13,7 @@
|
|||
/**
|
||||
* Let's not step on anybody else's toes.
|
||||
*/
|
||||
var mailtouiApp = mailtouiApp || {};
|
||||
var mailymailyApp = mailymailyApp || {};
|
||||
|
||||
(function(app) {
|
||||
/**
|
||||
|
@ -29,7 +29,7 @@ var mailtouiApp = mailtouiApp || {};
|
|||
var body = document.getElementsByTagName('body')[0];
|
||||
|
||||
/**
|
||||
* The active MailtoUI modal.
|
||||
* The active mailymaily modal.
|
||||
* @type {Element}
|
||||
*/
|
||||
var modal = null;
|
||||
|
@ -66,7 +66,7 @@ var mailtouiApp = mailtouiApp || {};
|
|||
var clipboardSvg = `<svg viewBox="0 0 24 24"><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor"><polyline fill="none" stroke="currentColor" stroke-miterlimit="10" points="20,4 22,4 22,23 2,23 2,4 4,4 "/> <path fill="none" stroke="currentColor" stroke-miterlimit="10" d="M14,3c0-1.105-0.895-2-2-2 s-2,0.895-2,2H7v4h10V3H14z"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="11" x2="17" y2="11"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="15" x2="17" y2="15"/> <line data-color="color-2" fill="none" stroke-miterlimit="10" x1="7" y1="19" x2="11" y2="19"/></g></svg>`;
|
||||
|
||||
/**
|
||||
* User options to change MailtoUI's behavior and/or appearance.
|
||||
* User options to change mailymaily's behavior and/or appearance.
|
||||
* @type {Object}
|
||||
*/
|
||||
var options = new Object();
|
||||
|
@ -75,7 +75,7 @@ var mailtouiApp = mailtouiApp || {};
|
|||
* Allows for a custom class to namespace css classes.
|
||||
* @type {String}
|
||||
*/
|
||||
options.linkClass = 'mailtoui';
|
||||
options.linkClass = 'mailymaily';
|
||||
|
||||
/**
|
||||
* When set to true, the modal is closed automatically when email client is clicked.
|
||||
|
@ -180,8 +180,8 @@ var mailtouiApp = mailtouiApp || {};
|
|||
*/
|
||||
app.buildStyleTag = function() {
|
||||
var styleTag = document.createElement('style');
|
||||
var css = `.mailtoui-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailtoui-modal-content{-webkit-animation:mailtoui-appear .4s;animation:mailtoui-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailtoui-modal-content:focus,.mailtoui-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailtoui-modal-content{right:auto}}.mailtoui-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailtoui-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailtoui-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailtoui-modal-close:focus,.mailtoui-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailtoui-modal-body{height:100%;padding:20px}.mailtoui-button{color:#333;text-decoration:none}.mailtoui-button:focus{outline:0}.mailtoui-button:focus .mailtoui-button-content{background-color:#555;color:#fff}.mailtoui-button-content{background-color:#fff;border:none;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailtoui-button-content:hover{background-color:#555;color:#fff}.mailtoui-button:last-child .mailtoui-button-content{margin-bottom:0}.mailtoui-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailtoui-button-icon svg{height:24px;width:24px}.mailtoui-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailtoui-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailtoui-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailtoui-button-copy:focus,.mailtoui-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailtoui-button-copy-clicked,.mailtoui-button-copy-clicked:focus,.mailtoui-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailtoui-button-copy-clicked .mailtoui-button-icon,.mailtoui-button-copy-clicked:focus .mailtoui-button-icon,.mailtoui-button-copy-clicked:hover .mailtoui-button-icon{display:none;visibility:hidden}.mailtoui-button-copy-clicked .mailtoui-button-text,.mailtoui-button-copy-clicked:focus .mailtoui-button-text,.mailtoui-button-copy-clicked:hover .mailtoui-button-text{color:#fff;top:2px}.mailtoui-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailtoui-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailtoui-brand a{color:#888}.mailtoui-brand a:focus,.mailtoui-brand a:hover{font-weight:700;outline:0}.mailtoui-no-scroll{overflow:hidden;position:fixed;width:100%}.mailtoui-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailtoui-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailtoui-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}`;
|
||||
css = css.replace(/mailtoui/g, app.prefix());
|
||||
var css = `.mailymaily-modal{background-color:#000;background-color:rgba(0,0,0,.4);bottom:0;color:#303131;display:none;height:100%;left:0;margin:0;padding:0;position:fixed;right:0;top:0;width:100%;z-index:1000}.mailymaily-modal-content{-webkit-animation:mailymaily-appear .4s;animation:mailymaily-appear .4s;background-color:#f1f5f8;border-radius:8px;bottom:auto;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);left:50%;max-height:calc(100% - 100px);overflow:auto;padding:0;position:fixed;right:-45%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mailymaily-modal-content:focus,.mailymaily-modal-content:hover{overflow-y:auto}@media only screen and (min-width:768px){.mailymaily-modal-content{right:auto}}.mailymaily-modal-head{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;clear:both;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;padding:10px 20px}.mailymaily-modal-title{color:#303131;-webkit-box-flex:1;-ms-flex:1;flex:1;font-family:sans-serif;font-size:120%;font-weight:700;margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.mailymaily-modal-close{color:#aaa;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;font-size:38px;margin-left:20px;position:relative;text-align:right;text-decoration:none;top:-4px}.mailymaily-modal-close:focus,.mailymaily-modal-close:hover{color:#000;cursor:pointer;font-weight:700;outline:0}.mailymaily-modal-body{height:100%;padding:20px}.mailymaily-button{color:#333;text-decoration:none}.mailymaily-button:focus{outline:0}.mailymaily-button:focus .mailymaily-button-content{background-color:#555;color:#fff}.mailymaily-button-content{background-color:#fff;border:none;border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);margin-bottom:20px;overflow:hidden;padding:15px 20px;text-overflow:ellipsis;white-space:nowrap}.mailymaily-button-content:hover{background-color:#555;color:#fff}.mailymaily-button:last-child .mailymaily-button-content{margin-bottom:0}.mailymaily-button-icon{display:inline-block;font-weight:700;position:relative;top:4px}.mailymaily-button-icon svg{height:24px;width:24px}.mailymaily-button-text{display:inline-block;margin-left:5px;position:relative;top:-2px}.mailymaily-copy{border-radius:8px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.18);box-shadow:0 2px 4px rgba(0,0,0,.18);height:59px;margin-top:20px;position:relative}.mailymaily-button-copy{background-color:#fff;border:none;border-bottom-left-radius:8px;border-top-left-radius:8px;bottom:21px;color:#333;font-size:100%;height:100%;left:0;overflow:hidden;padding:15px 20px;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap;width:120px}.mailymaily-button-copy:focus,.mailymaily-button-copy:hover{background-color:#555;color:#fff;cursor:pointer;outline:0}.mailymaily-button-copy-clicked,.mailymaily-button-copy-clicked:focus,.mailymaily-button-copy-clicked:hover{background-color:#1f9d55;color:#fff}.mailymaily-button-copy-clicked .mailymaily-button-icon,.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,.mailymaily-button-copy-clicked:hover .mailymaily-button-icon{display:none;visibility:hidden}.mailymaily-button-copy-clicked .mailymaily-button-text,.mailymaily-button-copy-clicked:focus .mailymaily-button-text,.mailymaily-button-copy-clicked:hover .mailymaily-button-text{color:#fff;top:2px}.mailymaily-email-address{background-color:#d8dcdf;border:none;border-radius:8px;-webkit-box-shadow:unset;box-shadow:unset;-webkit-box-sizing:border-box;box-sizing:border-box;color:#48494a;font-size:100%;height:100%;overflow:hidden;padding:20px 20px 20px 140px;text-overflow:ellipsis;white-space:nowrap;width:100%}.mailymaily-brand{color:#888;font-size:80%;margin-top:20px;text-align:center}.mailymaily-brand a{color:#888}.mailymaily-brand a:focus,.mailymaily-brand a:hover{font-weight:700;outline:0}.mailymaily-no-scroll{overflow:hidden;position:fixed;width:100%}.mailymaily-is-hidden{display:none;visibility:hidden}@-webkit-keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}@keyframes mailymaily-appear{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0,0);transform:translate(-50%,-50%) scale(0,0)}100%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1,1);transform:translate(-50%,-50%) scale(1,1)}}`;
|
||||
css = css.replace(/mailymaily/g, app.prefix());
|
||||
|
||||
styleTag.setAttribute('id', app.prefix('-styles'));
|
||||
styleTag.setAttribute('type', 'text/css');
|
||||
|
@ -230,31 +230,31 @@ var mailtouiApp = mailtouiApp || {};
|
|||
app.buildModal = function() {
|
||||
var modal = document.createElement('div');
|
||||
|
||||
var markup = `<div class="mailtoui-modal-content"><div class="mailtoui-modal-head"><div id="mailtoui-modal-title" class="mailtoui-modal-title">${
|
||||
var markup = `<div class="mailymaily-modal-content"><div class="mailymaily-modal-head"><div id="mailymaily-modal-title" class="mailymaily-modal-title">${
|
||||
options.title
|
||||
}</div><a id="mailtoui-modal-close" class="mailtoui-modal-close" href="#">×</a></div><div class="mailtoui-modal-body"><div class="mailtoui-clients"><a id="mailtoui-button-1" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-1" class="mailtoui-button-icon">${
|
||||
}</div><a id="mailymaily-modal-close" class="mailymaily-modal-close" href="#">×</a></div><div class="mailymaily-modal-body"><div class="mailymaily-clients"><a id="mailymaily-button-1" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-1" class="mailymaily-button-icon">${
|
||||
options.buttonIcon1
|
||||
}</span> <span id="mailtoui-button-text-1" class="mailtoui-button-text">${
|
||||
}</span> <span id="mailymaily-button-text-1" class="mailymaily-button-text">${
|
||||
options.buttonText1
|
||||
}</span></div></a><a id="mailtoui-button-2" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-2" class="mailtoui-button-icon">${
|
||||
}</span></div></a><a id="mailymaily-button-2" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-2" class="mailymaily-button-icon">${
|
||||
options.buttonIcon2
|
||||
}</span> <span id="mailtoui-button-text-2" class="mailtoui-button-text">${
|
||||
}</span> <span id="mailymaily-button-text-2" class="mailymaily-button-text">${
|
||||
options.buttonText2
|
||||
}</span></div></a><a id="mailtoui-button-3" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-3" class="mailtoui-button-icon">${
|
||||
}</span></div></a><a id="mailymaily-button-3" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-3" class="mailymaily-button-icon">${
|
||||
options.buttonIcon3
|
||||
}</span> <span id="mailtoui-button-text-3" class="mailtoui-button-text">${
|
||||
}</span> <span id="mailymaily-button-text-3" class="mailymaily-button-text">${
|
||||
options.buttonText3
|
||||
}</span></div></a><a id="mailtoui-button-4" class="mailtoui-button" href="#"><div class="mailtoui-button-content"><span id="mailtoui-button-icon-4" class="mailtoui-button-icon">${
|
||||
}</span></div></a><a id="mailymaily-button-4" class="mailymaily-button" href="#"><div class="mailymaily-button-content"><span id="mailymaily-button-icon-4" class="mailymaily-button-icon">${
|
||||
options.buttonIcon4
|
||||
}</span> <span id="mailtoui-button-text-4" class="mailtoui-button-text">${
|
||||
}</span> <span id="mailymaily-button-text-4" class="mailymaily-button-text">${
|
||||
options.buttonText4
|
||||
}</span></div></a></div><div id="mailtoui-copy" class="mailtoui-copy"><div id="mailtoui-email-address" class="mailtoui-email-address"></div><button id="mailtoui-button-copy" class="mailtoui-button-copy" data-copytargetid="mailtoui-email-address"><span id="mailtoui-button-icon-copy" class="mailtoui-button-icon">${
|
||||
}</span></div></a></div><div id="mailymaily-copy" class="mailymaily-copy"><div id="mailymaily-email-address" class="mailymaily-email-address"></div><button id="mailymaily-button-copy" class="mailymaily-button-copy" data-copytargetid="mailymaily-email-address"><span id="mailymaily-button-icon-copy" class="mailymaily-button-icon">${
|
||||
options.buttonIconCopy
|
||||
}</span> <span id="mailtoui-button-text-copy" class="mailtoui-button-text">${
|
||||
}</span> <span id="mailymaily-button-text-copy" class="mailymaily-button-text">${
|
||||
options.buttonTextCopy
|
||||
}</span></button></div><div class="mailtoui-brand"><a href="https://mailtoui.com?ref=ui" target="_blank">Powered by MailtoUI</a></div></div></div>`;
|
||||
}</span></button></div><div class="mailymaily-brand"><a href="https://mailymaily.com?ref=ui" target="_blank">Powered by mailymaily</a></div></div></div>`;
|
||||
|
||||
markup = markup.replace(/mailtoui/g, app.prefix());
|
||||
markup = markup.replace(/mailymaily/g, app.prefix());
|
||||
|
||||
modal.setAttribute('id', app.prefix('-modal'));
|
||||
modal.setAttribute('class', app.prefix('-modal'));
|
||||
|
@ -759,9 +759,9 @@ var mailtouiApp = mailtouiApp || {};
|
|||
};
|
||||
|
||||
/**
|
||||
* Get all "mailtoui" links on the page.
|
||||
* Get all "mailymaily" links on the page.
|
||||
*
|
||||
* @return {HTMLCollection} All links with the class "mailtoui" (default).
|
||||
* @return {HTMLCollection} All links with the class "mailymaily" (default).
|
||||
*/
|
||||
app.getLinks = function() {
|
||||
return document.getElementsByClassName(app.prefix());
|
||||
|
@ -1120,19 +1120,19 @@ var mailtouiApp = mailtouiApp || {};
|
|||
|
||||
app.listenForEvents();
|
||||
};
|
||||
})(mailtouiApp);
|
||||
})(mailymailyApp);
|
||||
|
||||
/**
|
||||
* Are we loaded in the browser? If so, run MailtoUI automatically.
|
||||
* Otherwise, make MailtoUI available to the outside world so
|
||||
* Are we loaded in the browser? If so, run mailymaily automatically.
|
||||
* Otherwise, make mailymaily available to the outside world so
|
||||
* it can be triggered (run) manually when appropriate.
|
||||
*/
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
// We're not in the browser.
|
||||
module.exports = {
|
||||
run: mailtouiApp.run
|
||||
run: mailymailyApp.run
|
||||
};
|
||||
} else {
|
||||
// We're in the browser.
|
||||
mailtouiApp.run();
|
||||
mailymailyApp.run();
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@ $email-margin-top: 20px; //20px
|
|||
$brand-color: #888; //#888
|
||||
$brand-font-size: 80%; //80%
|
||||
|
||||
.mailtoui-modal {
|
||||
.mailymaily-modal {
|
||||
background-color: #000;
|
||||
background-color: $overlay-bg-color;
|
||||
bottom: 0;
|
||||
|
@ -66,8 +66,8 @@ $brand-font-size: 80%; //80%
|
|||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mailtoui-modal-content {
|
||||
animation: mailtoui-appear $animation-speed;
|
||||
.mailymaily-modal-content {
|
||||
animation: mailymaily-appear $animation-speed;
|
||||
background-color: $modal-content-bg-color;
|
||||
border-radius: $modal-border-radius;
|
||||
bottom: auto;
|
||||
|
@ -82,18 +82,18 @@ $brand-font-size: 80%; //80%
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.mailtoui-modal-content:focus,
|
||||
.mailtoui-modal-content:hover {
|
||||
.mailymaily-modal-content:focus,
|
||||
.mailymaily-modal-content:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.mailtoui-modal-content {
|
||||
.mailymaily-modal-content {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mailtoui-modal-head {
|
||||
.mailymaily-modal-head {
|
||||
align-items: center;
|
||||
background-color: $modal-head-bg-color;
|
||||
clear: both;
|
||||
|
@ -102,7 +102,7 @@ $brand-font-size: 80%; //80%
|
|||
padding: $modal-head-padding-y $modal-head-padding-x;
|
||||
}
|
||||
|
||||
.mailtoui-modal-title {
|
||||
.mailymaily-modal-title {
|
||||
color: $modal-title-color;
|
||||
flex: 1;
|
||||
font-family: $modal-title-font-family;
|
||||
|
@ -115,7 +115,7 @@ $brand-font-size: 80%; //80%
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mailtoui-modal-close {
|
||||
.mailymaily-modal-close {
|
||||
color: $modal-close-color-1;
|
||||
flex: initial;
|
||||
font-size: $modal-close-font-size;
|
||||
|
@ -126,34 +126,34 @@ $brand-font-size: 80%; //80%
|
|||
top: $modal-close-top;
|
||||
}
|
||||
|
||||
.mailtoui-modal-close:focus,
|
||||
.mailtoui-modal-close:hover {
|
||||
.mailymaily-modal-close:focus,
|
||||
.mailymaily-modal-close:hover {
|
||||
color: $modal-close-color-2;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.mailtoui-modal-body {
|
||||
.mailymaily-modal-body {
|
||||
height: 100%;
|
||||
padding: $modal-body-padding;
|
||||
}
|
||||
|
||||
.mailtoui-button {
|
||||
.mailymaily-button {
|
||||
color: $button-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mailtoui-button:focus {
|
||||
.mailymaily-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.mailtoui-button:focus .mailtoui-button-content {
|
||||
.mailymaily-button:focus .mailymaily-button-content {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mailtoui-button-content {
|
||||
.mailymaily-button-content {
|
||||
background-color: $button-bg-color;
|
||||
border: $button-border;
|
||||
border-radius: $button-border-radius;
|
||||
|
@ -165,35 +165,35 @@ $brand-font-size: 80%; //80%
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mailtoui-button-content:hover {
|
||||
.mailymaily-button-content:hover {
|
||||
background-color: $button-hover-bg-color;
|
||||
color: $button-hover-color;
|
||||
}
|
||||
|
||||
.mailtoui-button:last-child .mailtoui-button-content {
|
||||
.mailymaily-button:last-child .mailymaily-button-content {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mailtoui-button-icon {
|
||||
.mailymaily-button-icon {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
top: $button-icon-top;
|
||||
}
|
||||
|
||||
.mailtoui-button-icon svg {
|
||||
.mailymaily-button-icon svg {
|
||||
height: $button-icon-height;
|
||||
width: $button-icon-width;
|
||||
}
|
||||
|
||||
.mailtoui-button-text {
|
||||
.mailymaily-button-text {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.mailtoui-copy {
|
||||
.mailymaily-copy {
|
||||
border-radius: $button-border-radius;
|
||||
box-shadow: $button-box-shadow;
|
||||
height: 59px;
|
||||
|
@ -201,7 +201,7 @@ $brand-font-size: 80%; //80%
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.mailtoui-button-copy {
|
||||
.mailymaily-button-copy {
|
||||
background-color: $button-bg-color;
|
||||
border: $button-copy-border;
|
||||
border-bottom-left-radius: $button-border-radius;
|
||||
|
@ -220,36 +220,36 @@ $brand-font-size: 80%; //80%
|
|||
width: 120px;
|
||||
}
|
||||
|
||||
.mailtoui-button-copy:focus,
|
||||
.mailtoui-button-copy:hover {
|
||||
.mailymaily-button-copy:focus,
|
||||
.mailymaily-button-copy:hover {
|
||||
background-color: $button-hover-bg-color;
|
||||
color: $button-hover-color;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.mailtoui-button-copy-clicked,
|
||||
.mailtoui-button-copy-clicked:focus,
|
||||
.mailtoui-button-copy-clicked:hover {
|
||||
.mailymaily-button-copy-clicked,
|
||||
.mailymaily-button-copy-clicked:focus,
|
||||
.mailymaily-button-copy-clicked:hover {
|
||||
background-color: $success-bg-color;
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.mailtoui-button-copy-clicked .mailtoui-button-icon,
|
||||
.mailtoui-button-copy-clicked:focus .mailtoui-button-icon,
|
||||
.mailtoui-button-copy-clicked:hover .mailtoui-button-icon {
|
||||
.mailymaily-button-copy-clicked .mailymaily-button-icon,
|
||||
.mailymaily-button-copy-clicked:focus .mailymaily-button-icon,
|
||||
.mailymaily-button-copy-clicked:hover .mailymaily-button-icon {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mailtoui-button-copy-clicked .mailtoui-button-text,
|
||||
.mailtoui-button-copy-clicked:focus .mailtoui-button-text,
|
||||
.mailtoui-button-copy-clicked:hover .mailtoui-button-text {
|
||||
.mailymaily-button-copy-clicked .mailymaily-button-text,
|
||||
.mailymaily-button-copy-clicked:focus .mailymaily-button-text,
|
||||
.mailymaily-button-copy-clicked:hover .mailymaily-button-text {
|
||||
color: #fff;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mailtoui-email-address {
|
||||
.mailymaily-email-address {
|
||||
background-color: $email-bg-color;
|
||||
border: none;
|
||||
border-radius: $button-border-radius;
|
||||
|
@ -265,35 +265,35 @@ $brand-font-size: 80%; //80%
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mailtoui-brand {
|
||||
.mailymaily-brand {
|
||||
color: $brand-color;
|
||||
font-size: $brand-font-size;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mailtoui-brand a {
|
||||
.mailymaily-brand a {
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.mailtoui-brand a:focus,
|
||||
.mailtoui-brand a:hover {
|
||||
.mailymaily-brand a:focus,
|
||||
.mailymaily-brand a:hover {
|
||||
font-weight: 700;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.mailtoui-no-scroll {
|
||||
.mailymaily-no-scroll {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mailtoui-is-hidden {
|
||||
.mailymaily-is-hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes mailtoui-appear {
|
||||
@keyframes mailymaily-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0, 0);
|
||||
|
|
Loading…
Reference in New Issue