Created
December 19, 2017 22:44
-
-
Save dehart/e3b53d885d2e5ffea77fb4388e08322e to your computer and use it in GitHub Desktop.
Toying with currentColor
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
| <html> | |
| <head> | |
| <title>TODO supply a title</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| #checkbox { | |
| transition: border-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1); | |
| border: 2px solid currentColor; | |
| border-radius: 2px; | |
| width: 14px; | |
| height: 14px; | |
| position:relative; | |
| display:inline-block; | |
| } | |
| #checkbox.on { | |
| background-color: currentColor; | |
| } | |
| .mark { | |
| position: absolute; | |
| top: 0;bottom: 0; | |
| width: 100%; | |
| fill:none; | |
| stroke: white !important; | |
| stroke-width: 3.12px; | |
| stroke-dashoffset: 29.78334; | |
| stroke-dasharray: 29.78334; | |
| } | |
| .on .mark { | |
| stroke-dashoffset: 0; | |
| transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1); | |
| } | |
| </style> | |
| </head> | |
| <body style="background-color: #eee;"> | |
| <div id="checkbox" style="color:green;"> | |
| <svg class="mark" viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path></svg> | |
| </div> | |
| <script type="text/javascript">var el = document.getElementById('checkbox'); el.addEventListener('click',function() {el.classList.toggle('on');});</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment