From 8c9ca16db7469542b81ec1e9d4dd64cbeb5464ac Mon Sep 17 00:00:00 2001 From: Alejandro Vivas Date: Tue, 30 Apr 2019 17:04:44 -0400 Subject: [PATCH] CSS Updates --- dist/css/toastme.css | 64 ++++++++++++++++++++++++++---------- dist/css/toastme.min.css | 2 +- src/sass/_notifications.scss | 21 ++++++++++++ 3 files changed, 69 insertions(+), 18 deletions(-) diff --git a/dist/css/toastme.css b/dist/css/toastme.css index 5d874c0..a83d9e0 100644 --- a/dist/css/toastme.css +++ b/dist/css/toastme.css @@ -477,70 +477,100 @@ } /* line 29, src/sass/_notifications.scss */ +.toastme a { + color: #737373; + text-decoration: underline; +} + +/* line 34, src/sass/_notifications.scss */ .toastme.success { color: #fff; background-color: #8bc34a; } -/* line 32, src/sass/_notifications.scss */ +/* line 37, src/sass/_notifications.scss */ +.toastme.success a { + color: #fff; + text-decoration: underline; +} + +/* line 41, src/sass/_notifications.scss */ .toastme.success .toastme-ico { color: #8bc34a; } -/* line 34, src/sass/_notifications.scss */ +/* line 43, src/sass/_notifications.scss */ .toastme.success .toastme-ico:before { content: ""; } -/* line 40, src/sass/_notifications.scss */ +/* line 49, src/sass/_notifications.scss */ .toastme.error { color: #fff; background-color: #f44336; } -/* line 43, src/sass/_notifications.scss */ +/* line 52, src/sass/_notifications.scss */ +.toastme.error a { + color: #fff; + text-decoration: underline; +} + +/* line 56, src/sass/_notifications.scss */ .toastme.error .toastme-ico { color: #f44336; } -/* line 45, src/sass/_notifications.scss */ +/* line 58, src/sass/_notifications.scss */ .toastme.error .toastme-ico:before { content: ""; } -/* line 51, src/sass/_notifications.scss */ +/* line 64, src/sass/_notifications.scss */ .toastme.warning { color: #fff; background-color: #ff9800; } -/* line 54, src/sass/_notifications.scss */ +/* line 67, src/sass/_notifications.scss */ +.toastme.warning a { + color: #fff; + text-decoration: underline; +} + +/* line 71, src/sass/_notifications.scss */ .toastme.warning .toastme-ico { color: #ff9800; } -/* line 56, src/sass/_notifications.scss */ +/* line 73, src/sass/_notifications.scss */ .toastme.warning .toastme-ico:before { content: ""; } -/* line 62, src/sass/_notifications.scss */ +/* line 79, src/sass/_notifications.scss */ .toastme.info { color: #fff; background-color: #2196f3; } -/* line 65, src/sass/_notifications.scss */ +/* line 82, src/sass/_notifications.scss */ +.toastme.info a { + color: #fff; + text-decoration: underline; +} + +/* line 86, src/sass/_notifications.scss */ .toastme.info .toastme-ico { color: #2196f3; } -/* line 67, src/sass/_notifications.scss */ +/* line 88, src/sass/_notifications.scss */ .toastme.info .toastme-ico:before { content: ""; } -/* line 73, src/sass/_notifications.scss */ +/* line 94, src/sass/_notifications.scss */ .toastme .toastme-close { color: #333; opacity: 0.7; @@ -568,18 +598,18 @@ transition: all 0.2s ease-in-out; } -/* line 87, src/sass/_notifications.scss */ +/* line 108, src/sass/_notifications.scss */ .toastme .toastme-close:after { content: ""; color: #ddd; } -/* line 91, src/sass/_notifications.scss */ +/* line 112, src/sass/_notifications.scss */ .toastme .toastme-close:hover, .toastme .toastme-close:focus { opacity: 1; } -/* line 97, src/sass/_notifications.scss */ +/* line 118, src/sass/_notifications.scss */ .toastme .toastme-ico { font-size: 1.5rem; color: #333; @@ -612,12 +642,12 @@ background: #fff; } -/* line 112, src/sass/_notifications.scss */ +/* line 133, src/sass/_notifications.scss */ .toastme .toastme-ico:before { content: ""; } -/* line 116, src/sass/_notifications.scss */ +/* line 137, src/sass/_notifications.scss */ .toastme .toastme-content { white-space: nowrap; min-width: 150px; diff --git a/dist/css/toastme.min.css b/dist/css/toastme.min.css index b96eabc..e8170aa 100644 --- a/dist/css/toastme.min.css +++ b/dist/css/toastme.min.css @@ -1,2 +1,2 @@ /*! toastmejs v1.0.0 | (c) 2019 alexsegen | MIT License | git+https://github.com/alexsegen/toastmejs.git */ -@charset "UTF-8";@font-face{font-family:toastme;src:url(../icons/toastme.eot?p0xg3v);src:url(../icons/toastme.eot?p0xg3v#iefix) format("embedded-opentype"),url(../icons/toastme.ttf?p0xg3v) format("truetype"),url(../icons/toastme.woff?p0xg3v) format("woff"),url(../icons/toastme.svg?p0xg3v#toastme) format("svg");font-weight:400;font-style:normal}.toastme-dialog .btn-toastme{font-family:Open Sans,Helvetica,sans-serif;font-size:14px;white-space:nowrap;cursor:pointer;padding:6px 15px;margin:3px;border-radius:3px;border:1px solid}.toastme-dialog .btn-toastme:hover{opacity:.9}.toastme-dialog .btn-toastme:disabled{background-color:transparent;cursor:not-allowed;opacity:.7}.toastme-dialog .btn-toastme:active{opacity:1}.toastme-dialog .btn-toastme:focus{outline:0}.toastme-dialog .btn-toastme.--toastme-confirm{color:#fff;background:#3f51b5;border:1px solid #3f51b5}.toastme-dialog .btn-toastme.--toastme-cancel{color:#4c4c4c;background:#f9f9f9;border:1px solid #ddd}.flip-in-hor-bottom{animation:a .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes a{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}.slide-in-fwd-center{animation:b .4s cubic-bezier(.25,.46,.45,.94) both}@keyframes b{0%{transform:translateZ(-1400px);opacity:0}to{transform:translateZ(0);opacity:1}}.shake-horizontal{animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}@keyframes c{0%,to{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}}.bounce-top{animation:d .9s both}@keyframes d{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}to{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}.jello-horizontal{animation:e .9s both}@keyframes e{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.wobble-hor-bottom{animation:f .8s both}@keyframes f{0%,to{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(-6deg)}30%{transform:translateX(15px) rotate(6deg)}45%{transform:translateX(-15px) rotate(-3.6deg)}60%{transform:translateX(9px) rotate(2.4deg)}75%{transform:translateX(-6px) rotate(-1.2deg)}}.toastme{font-size:13px;font-family:Helvetica,"san-serif";color:#737373;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:250px;text-align:left;padding:10px 15px 10px 45px;border-radius:2px;background-color:#f5f5f5;position:fixed;opacity:.7;cursor:pointer;z-index:1;transform:translateY(20px);transition:all .2s ease-in-out;box-shadow:0 3px 6px rgba(0,0,0,.2);animation:a .5s cubic-bezier(.25,.46,.45,.94) both}.toastme:focus,.toastme:hover{opacity:1}.toastme.success{color:#fff;background-color:#8bc34a}.toastme.success .toastme-ico{color:#8bc34a}.toastme.success .toastme-ico:before{content:""}.toastme.error{color:#fff;background-color:#f44336}.toastme.error .toastme-ico{color:#f44336}.toastme.error .toastme-ico:before{content:""}.toastme.warning{color:#fff;background-color:#ff9800}.toastme.warning .toastme-ico{color:#ff9800}.toastme.warning .toastme-ico:before{content:""}.toastme.info{color:#fff;background-color:#2196f3}.toastme.info .toastme-ico{color:#2196f3}.toastme.info .toastme-ico:before{content:""}.toastme .toastme-close{color:#333;opacity:.7;float:right;right:-2px;top:2px;font-size:8px;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;background:transparent;border:none;box-shadow:none;cursor:pointer;transition:all .2s ease-in-out}.toastme .toastme-close:after{content:"";color:#ddd}.toastme .toastme-close:focus,.toastme .toastme-close:hover{opacity:1}.toastme .toastme-ico{font-size:1.5rem;color:#333;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;float:left;width:30px;height:30px;border-radius:2px;position:absolute;left:5px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;background:#fff}.toastme .toastme-ico:before{content:""}.toastme .toastme-content{white-space:nowrap;min-width:150px}.toastme.ligh.success{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.success .toastme-ico{color:#8bc34a}.toastme.ligh.success .toastme-ico:before{content:"\ea10"}.toastme.ligh.error{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.error .toastme-ico{color:#f44336}.toastme.ligh.error .toastme-ico:before{content:"\ea0d"}.toastme.ligh.warning{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.warning .toastme-ico{color:#ff9800}.toastme.ligh.warning .toastme-ico:before{content:"\ea07"}.toastme.ligh.info{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.info .toastme-ico{color:#2196f3}.toastme.ligh.info .toastme-ico:before{content:"\ea0c"}.toastme-dialog-bg{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:2}.toastme-dialog-ico{width:50px;height:50px;display:inline-block;margin-bottom:10px;font-size:3rem;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;animation:a .5s cubic-bezier(.25,.46,.45,.94) .5s both}.toastme-dialog-ico.success{color:#8bc34a}.toastme-dialog-ico.success:before{content:""}.toastme-dialog-ico.danger{color:#f44336;animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}.toastme-dialog-ico.danger:before{content:""}.toastme-dialog-ico.info{color:#03a9f4;animation:d .9s both}.toastme-dialog-ico.info:before{content:""}.toastme-dialog-ico.warning{color:#ffc107;animation:f .8s .5s both}.toastme-dialog-ico.warning:before{content:""}.toastme-dialog-ico.question{color:#3f51b5;animation:e .9s .5s both}.toastme-dialog-ico.question:before{content:""}.toastme-dialog{padding:10px;font-size:14px;font-family:Arial,Helvetica,sans-serif;text-align:center;display:inline-block;color:#737373;background:#f9f9f9;border-radius:3px;border:1px solid #ddd;width:280px;position:absolute;top:calc(50% - 200px);left:calc(50% - 190px);z-index:3;transition:all .2s ease-in-out;box-shadow:0 6px 6px 0 rgba(0,0,0,.05);animation:g .2s ease-in-out 0s forwards}.toastme-dialog.toastme-dialog-closing{animation:h .1s ease-in-out 0s forwards}.toastme-dialog .toastme-dialog-title{font-size:15px;color:#333;font-weight:600;font-family:Arial,Helvetica,sans-serif;margin:0 0 10px;line-height:16px}.toastme-dialog .toastme-dialog-text{font-size:14px;color:#333;font-family:Helvetica,sans-serif;margin:0 0 10px;line-height:14px}@keyframes g{0%{transform:rotate(0) translateY(-30px);opacity:0}to{transform:rotate(0) translateY(0);opacity:1}}@keyframes h{0%{transform:rotate(0) translateY(0);opacity:1}to{transform:rotate(0) translateY(-30px);opacity:0}} \ No newline at end of file +@charset "UTF-8";@font-face{font-family:toastme;src:url(../icons/toastme.eot?p0xg3v);src:url(../icons/toastme.eot?p0xg3v#iefix) format("embedded-opentype"),url(../icons/toastme.ttf?p0xg3v) format("truetype"),url(../icons/toastme.woff?p0xg3v) format("woff"),url(../icons/toastme.svg?p0xg3v#toastme) format("svg");font-weight:400;font-style:normal}.toastme-dialog .btn-toastme{font-family:Open Sans,Helvetica,sans-serif;font-size:14px;white-space:nowrap;cursor:pointer;padding:6px 15px;margin:3px;border-radius:3px;border:1px solid}.toastme-dialog .btn-toastme:hover{opacity:.9}.toastme-dialog .btn-toastme:disabled{background-color:transparent;cursor:not-allowed;opacity:.7}.toastme-dialog .btn-toastme:active{opacity:1}.toastme-dialog .btn-toastme:focus{outline:0}.toastme-dialog .btn-toastme.--toastme-confirm{color:#fff;background:#3f51b5;border:1px solid #3f51b5}.toastme-dialog .btn-toastme.--toastme-cancel{color:#4c4c4c;background:#f9f9f9;border:1px solid #ddd}.flip-in-hor-bottom{animation:a .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes a{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}.slide-in-fwd-center{animation:b .4s cubic-bezier(.25,.46,.45,.94) both}@keyframes b{0%{transform:translateZ(-1400px);opacity:0}to{transform:translateZ(0);opacity:1}}.shake-horizontal{animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}@keyframes c{0%,to{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}}.bounce-top{animation:d .9s both}@keyframes d{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}to{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}.jello-horizontal{animation:e .9s both}@keyframes e{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.wobble-hor-bottom{animation:f .8s both}@keyframes f{0%,to{transform:translateX(0);transform-origin:50% 50%}15%{transform:translateX(-30px) rotate(-6deg)}30%{transform:translateX(15px) rotate(6deg)}45%{transform:translateX(-15px) rotate(-3.6deg)}60%{transform:translateX(9px) rotate(2.4deg)}75%{transform:translateX(-6px) rotate(-1.2deg)}}.toastme{font-size:13px;font-family:Helvetica,"san-serif";color:#737373;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:250px;text-align:left;padding:10px 15px 10px 45px;border-radius:2px;background-color:#f5f5f5;position:fixed;opacity:.7;cursor:pointer;z-index:1;transform:translateY(20px);transition:all .2s ease-in-out;box-shadow:0 3px 6px rgba(0,0,0,.2);animation:a .5s cubic-bezier(.25,.46,.45,.94) both}.toastme:focus,.toastme:hover{opacity:1}.toastme a{color:#737373;text-decoration:underline}.toastme.success{color:#fff;background-color:#8bc34a}.toastme.success a{color:#fff;text-decoration:underline}.toastme.success .toastme-ico{color:#8bc34a}.toastme.success .toastme-ico:before{content:""}.toastme.error{color:#fff;background-color:#f44336}.toastme.error a{color:#fff;text-decoration:underline}.toastme.error .toastme-ico{color:#f44336}.toastme.error .toastme-ico:before{content:""}.toastme.warning{color:#fff;background-color:#ff9800}.toastme.warning a{color:#fff;text-decoration:underline}.toastme.warning .toastme-ico{color:#ff9800}.toastme.warning .toastme-ico:before{content:""}.toastme.info{color:#fff;background-color:#2196f3}.toastme.info a{color:#fff;text-decoration:underline}.toastme.info .toastme-ico{color:#2196f3}.toastme.info .toastme-ico:before{content:""}.toastme .toastme-close{color:#333;opacity:.7;float:right;right:-2px;top:2px;font-size:8px;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute;background:transparent;border:none;box-shadow:none;cursor:pointer;transition:all .2s ease-in-out}.toastme .toastme-close:after{content:"";color:#ddd}.toastme .toastme-close:focus,.toastme .toastme-close:hover{opacity:1}.toastme .toastme-ico{font-size:1.5rem;color:#333;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;float:left;width:30px;height:30px;border-radius:2px;position:absolute;left:5px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;background:#fff}.toastme .toastme-ico:before{content:""}.toastme .toastme-content{white-space:nowrap;min-width:150px}.toastme.ligh.success{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.success .toastme-ico{color:#8bc34a}.toastme.ligh.success .toastme-ico:before{content:"\ea10"}.toastme.ligh.error{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.error .toastme-ico{color:#f44336}.toastme.ligh.error .toastme-ico:before{content:"\ea0d"}.toastme.ligh.warning{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.warning .toastme-ico{color:#ff9800}.toastme.ligh.warning .toastme-ico:before{content:"\ea07"}.toastme.ligh.info{color:#333;background-color:#fff;border:1px solid #ddd}.toastme.ligh.info .toastme-ico{color:#2196f3}.toastme.ligh.info .toastme-ico:before{content:"\ea0c"}.toastme-dialog-bg{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.65);z-index:2}.toastme-dialog-ico{width:50px;height:50px;display:inline-block;margin-bottom:10px;font-size:3rem;font-family:toastme!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;animation:a .5s cubic-bezier(.25,.46,.45,.94) .5s both}.toastme-dialog-ico.success{color:#8bc34a}.toastme-dialog-ico.success:before{content:""}.toastme-dialog-ico.danger{color:#f44336;animation:c .8s cubic-bezier(.455,.03,.515,.955) .5s both}.toastme-dialog-ico.danger:before{content:""}.toastme-dialog-ico.info{color:#03a9f4;animation:d .9s both}.toastme-dialog-ico.info:before{content:""}.toastme-dialog-ico.warning{color:#ffc107;animation:f .8s .5s both}.toastme-dialog-ico.warning:before{content:""}.toastme-dialog-ico.question{color:#3f51b5;animation:e .9s .5s both}.toastme-dialog-ico.question:before{content:""}.toastme-dialog{padding:10px;font-size:14px;font-family:Arial,Helvetica,sans-serif;text-align:center;display:inline-block;color:#737373;background:#f9f9f9;border-radius:3px;border:1px solid #ddd;width:280px;position:absolute;top:calc(50% - 200px);left:calc(50% - 190px);z-index:3;transition:all .2s ease-in-out;box-shadow:0 6px 6px 0 rgba(0,0,0,.05);animation:g .2s ease-in-out 0s forwards}.toastme-dialog.toastme-dialog-closing{animation:h .1s ease-in-out 0s forwards}.toastme-dialog .toastme-dialog-title{font-size:15px;color:#333;font-weight:600;font-family:Arial,Helvetica,sans-serif;margin:0 0 10px;line-height:16px}.toastme-dialog .toastme-dialog-text{font-size:14px;color:#333;font-family:Helvetica,sans-serif;margin:0 0 10px;line-height:14px}@keyframes g{0%{transform:rotate(0) translateY(-30px);opacity:0}to{transform:rotate(0) translateY(0);opacity:1}}@keyframes h{0%{transform:rotate(0) translateY(0);opacity:1}to{transform:rotate(0) translateY(-30px);opacity:0}} \ No newline at end of file diff --git a/src/sass/_notifications.scss b/src/sass/_notifications.scss index 8c47720..8b1977b 100644 --- a/src/sass/_notifications.scss +++ b/src/sass/_notifications.scss @@ -26,9 +26,18 @@ opacity: 1; } + a { + color: $font-color-default; + text-decoration: underline; + } + &.success { color: $font-color; background-color: $success; + a { + color: $font-color; + text-decoration: underline; + } .toastme-ico { color: $success; &:before { @@ -40,6 +49,10 @@ &.error { color: $font-color; background-color: $danger; + a { + color: $font-color; + text-decoration: underline; + } .toastme-ico { color: $danger; &:before { @@ -51,6 +64,10 @@ &.warning { color: $font-color; background-color: $warning; + a { + color: $font-color; + text-decoration: underline; + } .toastme-ico { color: $warning; &:before { @@ -62,6 +79,10 @@ &.info { color: $font-color; background-color: $info; + a { + color: $font-color; + text-decoration: underline; + } .toastme-ico { color: $info; &:before {