odit/mailymaily
4
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

renamed to mailymaily

Browse Source
This commit is contained in:
Nicolai Ort
2020-08-29 13:59:02 +02:00
parent f35b067076
commit bf9caccd06
10 changed files with 129 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -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)

6
dist/mailtoui-min.js vendored
View File

File diff suppressed because one or more lines are too long

4
gulpfile.js
View File

@@ -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);
}

2
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "mailtoui",
"name": "mailymaily",
"version": "1.0.3",
"lockfileVersion": 1,
"requires": true,

14
package.json
View File

@@ -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"
}
}

2
src/css/component-min.css vendored
View File

@@ -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)}}

2
src/html/component-min.html
View File

@@ -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="#">&times</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="#">&times</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>

58
src/html/component.html
View File

@@ -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="#">&times</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="#">&times</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>

58
src/js/mailtoui.js
View File

@@ -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="#">&times</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="#">&times</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();
}

84
src/scss/component.scss
View File

@@ -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);