Created
January 22, 2015 21:05
-
-
Save zsherman/8749cf510b6019426980 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.1.0-beta) | |
| // ---- | |
| // SweetAlert | |
| // 2014 (c) - Tristan Edwards | |
| // github.com/t4t5/sweetalert | |
| .icon { | |
| $red: #F27474; | |
| $orange: #F8BB86; | |
| $blue: #C9DAE1; | |
| $green: #A5DC86; | |
| $success: #0066C3; | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid gray; | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| margin: 20px auto; | |
| padding: 0; | |
| position: relative; | |
| box-sizing: content-box; | |
| &.error { | |
| border-color: $red; | |
| .x-mark { | |
| position: relative; | |
| display: block; | |
| } | |
| .line { | |
| position: absolute; | |
| height: 5px; | |
| width: 47px; | |
| background-color: $red; | |
| display: block; | |
| top: 37px; | |
| border-radius: 2px; | |
| &.left { | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| left: 17px; | |
| } | |
| &.right { | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| right: 16px; | |
| } | |
| } | |
| } | |
| &.warning { | |
| border-color: $orange; | |
| .body { // Exclamation mark body | |
| position: absolute; | |
| width: 5px; | |
| height: 47px; | |
| left: 50%; | |
| top: 10px; | |
| -webkit-border-radius: 2px; | |
| border-radius: 2px; | |
| margin-left: -2px; | |
| background-color: $orange; | |
| } | |
| .dot { // Exclamation mark dot | |
| position: absolute; | |
| width: 7px; | |
| height: 7px; | |
| -webkit-border-radius: 50%; | |
| border-radius: 50%; | |
| margin-left: -3px; | |
| left: 50%; | |
| bottom: 10px; | |
| background-color: $orange; | |
| } | |
| } | |
| &.success { | |
| border-color: $success; | |
| &::before, &::after { // Emulate moving circular line | |
| content: ''; | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| position: absolute; | |
| width: 60px; | |
| height: 120px; | |
| background: white; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| &::before { | |
| -webkit-border-radius: 120px 0 0 120px; | |
| border-radius: 120px 0 0 120px; | |
| top: -7px; | |
| left: -33px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 60px 60px; | |
| transform-origin: 60px 60px; | |
| } | |
| &::after { | |
| -webkit-border-radius: 0 120px 120px 0; | |
| border-radius: 0 120px 120px 0; | |
| top: -11px; | |
| left: 30px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 0px 60px; | |
| transform-origin: 0px 60px; | |
| } | |
| .placeholder { // Ring | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid rgba($success, 0.2); | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| box-sizing: content-box; | |
| position: absolute; | |
| left: -4px; | |
| top: -4px; | |
| z-index: 2; | |
| } | |
| .fix { // Hide corners left from animation | |
| width: 5px; | |
| height: 90px; | |
| background-color: white; | |
| position: absolute; | |
| left: 28px; | |
| top: 8px; | |
| z-index: 1; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| .line { | |
| height: 5px; | |
| background-color: $success; | |
| display: block; | |
| border-radius: 2px; | |
| position: absolute; | |
| z-index: 2; | |
| &.tip { | |
| width: 25px; | |
| left: 14px; | |
| top: 46px; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| } | |
| &.long { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| } | |
| } | |
| } | |
| &.custom { | |
| background-size: contain; | |
| border-radius: 0; | |
| border: none; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| } | |
| } | |
| /* | |
| * Animations | |
| */ | |
| @mixin keyframes($animation-name) { | |
| @-webkit-keyframes #{$animation-name} { | |
| @content; | |
| } | |
| @keyframes #{$animation-name} { | |
| @content; | |
| } | |
| } | |
| @mixin animation($str) { | |
| -webkit-animation: #{$str}; | |
| animation: #{$str}; | |
| } | |
| // Modal animation | |
| @include keyframes(showSweetAlert) { | |
| 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } | |
| 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } | |
| 80% { transform: scale(0.95); -webkit-tranform: scale(0.95); } | |
| 100% { transform: scale(1); -webkit-transform: scale(1); } | |
| } | |
| @include keyframes(hideSweetAlert) { | |
| 0% { transform: scale(1); -webkit-transform: scale(1); } | |
| 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } | |
| } | |
| .showSweetAlert { | |
| @include animation('showSweetAlert 0.3s'); | |
| &[data-animation=none] { | |
| @include animation('none'); | |
| } | |
| } | |
| .hideSweetAlert { | |
| @include animation('hideSweetAlert 1s'); | |
| &[data-animation=none] { | |
| @include animation('none'); | |
| } | |
| } | |
| // Success icon animation | |
| @include keyframes(animateSuccessTip) { | |
| 0% { width: 0; left: 1px; top: 19px; } | |
| 54% { width: 0; left: 1px; top: 19px; } | |
| 70% { width: 50px; left: -8px; top: 37px; } | |
| 84% { width: 17px; left: 21px; top: 48px; } | |
| 90% { width: 25px; left: 14px; top: 45px; } | |
| 100% { width: 25px; left: 14px; top: 45px; display: none; } | |
| } | |
| @include keyframes(animateSuccessLong) { | |
| 0% { width: 0; right: 46px; top: 54px; } | |
| 65% { width: 0; right: 46px; top: 54px; } | |
| 84% { width: 55px; right: 0px; top: 35px; } | |
| 90% { width: 47px; right: 8px; top: 38px; } | |
| 100% { width: 47px; right: 8px; top: 38px; display: none; } | |
| } | |
| @include keyframes(rotatePlaceholder) { | |
| 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } | |
| 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } | |
| 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } | |
| 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } | |
| } | |
| .animateSuccessTip { | |
| @include animation('animateSuccessTip 0.75s'); | |
| } | |
| .animateSuccessLong { | |
| @include animation('animateSuccessLong 0.75s'); | |
| } | |
| .animateHideSuccessIcon { | |
| -webkit-animation: hideSweetAlert .75s; | |
| -webkit-animation-delay: 1s; | |
| } | |
| .icon.success.animate::after { | |
| @include animation('rotatePlaceholder 4.25s ease-in'); | |
| } | |
| // Error icon animation | |
| @include keyframes(animateErrorIcon) { | |
| 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } | |
| 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } | |
| } | |
| .animateErrorIcon { | |
| @include animation('animateErrorIcon 0.5s'); | |
| } | |
| @include keyframes(animateXMark) { | |
| 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } | |
| 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } | |
| 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } | |
| 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } | |
| } | |
| .animateXMark { | |
| @include animation('animateXMark 0.5s'); | |
| } | |
| @include keyframes(pulseWarning) { | |
| 0% { border-color: #F8D486; } | |
| 100% { border-color: #F8BB86; } | |
| } | |
| .pulseWarning { | |
| @include animation('pulseWarning 0.75s infinite alternate'); | |
| } | |
| @include keyframes(pulseWarningIns) { | |
| 0% { background-color: #F8D486; } | |
| 100% { background-color: #F8BB86; } | |
| } | |
| .pulseWarningIns { | |
| @include animation('pulseWarningIns 0.75s infinite alternate'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .icon { | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid gray; | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| margin: 20px auto; | |
| padding: 0; | |
| position: relative; | |
| box-sizing: content-box; } | |
| .icon.error { | |
| border-color: #F27474; } | |
| .icon.error .x-mark { | |
| position: relative; | |
| display: block; } | |
| .icon.error .line { | |
| position: absolute; | |
| height: 5px; | |
| width: 47px; | |
| background-color: #F27474; | |
| display: block; | |
| top: 37px; | |
| border-radius: 2px; } | |
| .icon.error .line.left { | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| left: 17px; } | |
| .icon.error .line.right { | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| right: 16px; } | |
| .icon.warning { | |
| border-color: #F8BB86; } | |
| .icon.warning .body { | |
| position: absolute; | |
| width: 5px; | |
| height: 47px; | |
| left: 50%; | |
| top: 10px; | |
| -webkit-border-radius: 2px; | |
| border-radius: 2px; | |
| margin-left: -2px; | |
| background-color: #F8BB86; } | |
| .icon.warning .dot { | |
| position: absolute; | |
| width: 7px; | |
| height: 7px; | |
| -webkit-border-radius: 50%; | |
| border-radius: 50%; | |
| margin-left: -3px; | |
| left: 50%; | |
| bottom: 10px; | |
| background-color: #F8BB86; } | |
| .icon.success { | |
| border-color: #0066C3; } | |
| .icon.success::before, .icon.success::after { | |
| content: ''; | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| position: absolute; | |
| width: 60px; | |
| height: 120px; | |
| background: white; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); } | |
| .icon.success::before { | |
| -webkit-border-radius: 120px 0 0 120px; | |
| border-radius: 120px 0 0 120px; | |
| top: -7px; | |
| left: -33px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 60px 60px; | |
| transform-origin: 60px 60px; } | |
| .icon.success::after { | |
| -webkit-border-radius: 0 120px 120px 0; | |
| border-radius: 0 120px 120px 0; | |
| top: -11px; | |
| left: 30px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 0px 60px; | |
| transform-origin: 0px 60px; } | |
| .icon.success .placeholder { | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid rgba(0, 102, 195, 0.2); | |
| -webkit-border-radius: 40px; | |
| border-radius: 40px; | |
| border-radius: 50%; | |
| box-sizing: content-box; | |
| position: absolute; | |
| left: -4px; | |
| top: -4px; | |
| z-index: 2; } | |
| .icon.success .fix { | |
| width: 5px; | |
| height: 90px; | |
| background-color: white; | |
| position: absolute; | |
| left: 28px; | |
| top: 8px; | |
| z-index: 1; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); } | |
| .icon.success .line { | |
| height: 5px; | |
| background-color: #0066C3; | |
| display: block; | |
| border-radius: 2px; | |
| position: absolute; | |
| z-index: 2; } | |
| .icon.success .line.tip { | |
| width: 25px; | |
| left: 14px; | |
| top: 46px; | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); } | |
| .icon.success .line.long { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); } | |
| .icon.custom { | |
| background-size: contain; | |
| border-radius: 0; | |
| border: none; | |
| background-position: center center; | |
| background-repeat: no-repeat; } | |
| /* | |
| * Animations | |
| */ | |
| @-webkit-keyframes showSweetAlert { | |
| 0% { | |
| transform: scale(0.7); | |
| -webkit-transform: scale(0.7); } | |
| 45% { | |
| transform: scale(1.05); | |
| -webkit-transform: scale(1.05); } | |
| 80% { | |
| transform: scale(0.95); | |
| -webkit-tranform: scale(0.95); } | |
| 100% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); } } | |
| @keyframes showSweetAlert { | |
| 0% { | |
| transform: scale(0.7); | |
| -webkit-transform: scale(0.7); } | |
| 45% { | |
| transform: scale(1.05); | |
| -webkit-transform: scale(1.05); } | |
| 80% { | |
| transform: scale(0.95); | |
| -webkit-tranform: scale(0.95); } | |
| 100% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); } } | |
| @-webkit-keyframes hideSweetAlert { | |
| 0% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); } | |
| 100% { | |
| transform: scale(0); | |
| -webkit-transform: scale(0); } } | |
| @keyframes hideSweetAlert { | |
| 0% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); } | |
| 100% { | |
| transform: scale(0); | |
| -webkit-transform: scale(0); } } | |
| .showSweetAlert { | |
| -webkit-animation: showSweetAlert 0.3s; | |
| animation: showSweetAlert 0.3s; } | |
| .showSweetAlert[data-animation=none] { | |
| -webkit-animation: none; | |
| animation: none; } | |
| .hideSweetAlert { | |
| -webkit-animation: hideSweetAlert 1s; | |
| animation: hideSweetAlert 1s; } | |
| .hideSweetAlert[data-animation=none] { | |
| -webkit-animation: none; | |
| animation: none; } | |
| @-webkit-keyframes animateSuccessTip { | |
| 0% { | |
| width: 0; | |
| left: 1px; | |
| top: 19px; } | |
| 54% { | |
| width: 0; | |
| left: 1px; | |
| top: 19px; } | |
| 70% { | |
| width: 50px; | |
| left: -8px; | |
| top: 37px; } | |
| 84% { | |
| width: 17px; | |
| left: 21px; | |
| top: 48px; } | |
| 90% { | |
| width: 25px; | |
| left: 14px; | |
| top: 45px; } | |
| 100% { | |
| width: 25px; | |
| left: 14px; | |
| top: 45px; | |
| display: none; } } | |
| @keyframes animateSuccessTip { | |
| 0% { | |
| width: 0; | |
| left: 1px; | |
| top: 19px; } | |
| 54% { | |
| width: 0; | |
| left: 1px; | |
| top: 19px; } | |
| 70% { | |
| width: 50px; | |
| left: -8px; | |
| top: 37px; } | |
| 84% { | |
| width: 17px; | |
| left: 21px; | |
| top: 48px; } | |
| 90% { | |
| width: 25px; | |
| left: 14px; | |
| top: 45px; } | |
| 100% { | |
| width: 25px; | |
| left: 14px; | |
| top: 45px; | |
| display: none; } } | |
| @-webkit-keyframes animateSuccessLong { | |
| 0% { | |
| width: 0; | |
| right: 46px; | |
| top: 54px; } | |
| 65% { | |
| width: 0; | |
| right: 46px; | |
| top: 54px; } | |
| 84% { | |
| width: 55px; | |
| right: 0px; | |
| top: 35px; } | |
| 90% { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; } | |
| 100% { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; | |
| display: none; } } | |
| @keyframes animateSuccessLong { | |
| 0% { | |
| width: 0; | |
| right: 46px; | |
| top: 54px; } | |
| 65% { | |
| width: 0; | |
| right: 46px; | |
| top: 54px; } | |
| 84% { | |
| width: 55px; | |
| right: 0px; | |
| top: 35px; } | |
| 90% { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; } | |
| 100% { | |
| width: 47px; | |
| right: 8px; | |
| top: 38px; | |
| display: none; } } | |
| @-webkit-keyframes rotatePlaceholder { | |
| 0% { | |
| transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); } | |
| 5% { | |
| transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); } | |
| 12% { | |
| transform: rotate(-405deg); | |
| -webkit-transform: rotate(-405deg); } | |
| 100% { | |
| transform: rotate(-405deg); | |
| -webkit-transform: rotate(-405deg); } } | |
| @keyframes rotatePlaceholder { | |
| 0% { | |
| transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); } | |
| 5% { | |
| transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); } | |
| 12% { | |
| transform: rotate(-405deg); | |
| -webkit-transform: rotate(-405deg); } | |
| 100% { | |
| transform: rotate(-405deg); | |
| -webkit-transform: rotate(-405deg); } } | |
| .animateSuccessTip { | |
| -webkit-animation: animateSuccessTip 0.75s; | |
| animation: animateSuccessTip 0.75s; } | |
| .animateSuccessLong { | |
| -webkit-animation: animateSuccessLong 0.75s; | |
| animation: animateSuccessLong 0.75s; } | |
| .animateHideSuccessIcon { | |
| -webkit-animation: hideSweetAlert .75s; | |
| -webkit-animation-delay: 1s; } | |
| .icon.success.animate::after { | |
| -webkit-animation: rotatePlaceholder 4.25s ease-in; | |
| animation: rotatePlaceholder 4.25s ease-in; } | |
| @-webkit-keyframes animateErrorIcon { | |
| 0% { | |
| transform: rotateX(100deg); | |
| -webkit-transform: rotateX(100deg); | |
| opacity: 0; } | |
| 100% { | |
| transform: rotateX(0deg); | |
| -webkit-transform: rotateX(0deg); | |
| opacity: 1; } } | |
| @keyframes animateErrorIcon { | |
| 0% { | |
| transform: rotateX(100deg); | |
| -webkit-transform: rotateX(100deg); | |
| opacity: 0; } | |
| 100% { | |
| transform: rotateX(0deg); | |
| -webkit-transform: rotateX(0deg); | |
| opacity: 1; } } | |
| .animateErrorIcon { | |
| -webkit-animation: animateErrorIcon 0.5s; | |
| animation: animateErrorIcon 0.5s; } | |
| @-webkit-keyframes animateXMark { | |
| 0% { | |
| transform: scale(0.4); | |
| -webkit-transform: scale(0.4); | |
| margin-top: 26px; | |
| opacity: 0; } | |
| 50% { | |
| transform: scale(0.4); | |
| -webkit-transform: scale(0.4); | |
| margin-top: 26px; | |
| opacity: 0; } | |
| 80% { | |
| transform: scale(1.15); | |
| -webkit-transform: scale(1.15); | |
| margin-top: -6px; } | |
| 100% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); | |
| margin-top: 0; | |
| opacity: 1; } } | |
| @keyframes animateXMark { | |
| 0% { | |
| transform: scale(0.4); | |
| -webkit-transform: scale(0.4); | |
| margin-top: 26px; | |
| opacity: 0; } | |
| 50% { | |
| transform: scale(0.4); | |
| -webkit-transform: scale(0.4); | |
| margin-top: 26px; | |
| opacity: 0; } | |
| 80% { | |
| transform: scale(1.15); | |
| -webkit-transform: scale(1.15); | |
| margin-top: -6px; } | |
| 100% { | |
| transform: scale(1); | |
| -webkit-transform: scale(1); | |
| margin-top: 0; | |
| opacity: 1; } } | |
| .animateXMark { | |
| -webkit-animation: animateXMark 0.5s; | |
| animation: animateXMark 0.5s; } | |
| @-webkit-keyframes pulseWarning { | |
| 0% { | |
| border-color: #F8D486; } | |
| 100% { | |
| border-color: #F8BB86; } } | |
| @keyframes pulseWarning { | |
| 0% { | |
| border-color: #F8D486; } | |
| 100% { | |
| border-color: #F8BB86; } } | |
| .pulseWarning { | |
| -webkit-animation: pulseWarning 0.75s infinite alternate; | |
| animation: pulseWarning 0.75s infinite alternate; } | |
| @-webkit-keyframes pulseWarningIns { | |
| 0% { | |
| background-color: #F8D486; } | |
| 100% { | |
| background-color: #F8BB86; } } | |
| @keyframes pulseWarningIns { | |
| 0% { | |
| background-color: #F8D486; } | |
| 100% { | |
| background-color: #F8BB86; } } | |
| .pulseWarningIns { | |
| -webkit-animation: pulseWarningIns 0.75s infinite alternate; | |
| animation: pulseWarningIns 0.75s infinite alternate; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment