Created
February 24, 2015 12:35
-
-
Save psdcoder/28102424486c96caa8ab to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/fizolo
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://static.jsbin.com/js/vendor/traceur.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'> | |
| <style id="jsbin-css"> | |
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url("http://i.icomoon.io/public/temp/6ad7584961/UntitledProject3/icomoon.eot"); | |
| } | |
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAywAAAC8AAAAYGNtYXAaVcxZAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZriRWXUAAAFwAAABIGhlYWQFMv6tAAACkAAAADZoaGVhB8IDyAAAAsgAAAAkaG10eA0AAIAAAALsAAAAHGxvY2EAhADYAAADCAAAABBtYXhwAAsAHQAAAxgAAAAgbmFtZVcZpu4AAAM4AAABRXBvc3QAAwAAAAAEgAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYC//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIADAAMAAAYAAAkBJwcJAScCgP6AgIABAAIAgAMA/oCAgP8AAgCAAAACAID/wAOAA8AAEAAVAAABISIGFREUFjMhMjY1ETQmIwMhESERA0D9gBslJRsCgBslJRtA/gACAAPAJRv8gBslJRsDgBsl/QACgP2AAAAAAAMAAABABAADQAAQABQAGgAAASEiBhURFBYzITI2NRE0JiMHCQEhEyERCQERA8D8gBslJRsDgBslJRuA/sD+wAKAQP0AAYABgANAJRv9gBslJRsCgBslgP8AAQD+AAHA/sABQP5AAAAAAQAAAAEAAJcCczxfDzz1AAsEAAAAAADRCd0YAAAAANEJ3RgAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAIAAAADAAAABAAAgAQAAAAAAAAAAAoAFAAeADQAXACQAAEAAAAHABsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAAsAAAAABKAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIDLGNtYXAAAAFoAAAATAAAAEwaVcxZZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAASAAAAEguJFZdWhlYWQAAALcAAAANgAAADYFMv6taGhlYQAAAxQAAAAkAAAAJAfCA8hobXR4AAADOAAAABwAAAAcDQAAgGxvY2EAAANUAAAAEAAAABAAhADYbWF4cAAAA2QAAAAgAAAAIAALAB1uYW1lAAADhAAAAUUAAAFFVxmm7nBvc3QAAATMAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAv/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAACAAwADAAAGAAAJAScHCQEnAoD+gICAAQACAIADAP6AgID/AAIAgAAAAgCA/8ADgAPAABAAFQAAASEiBhURFBYzITI2NRE0JiMDIREhEQNA/YAbJSUbAoAbJSUbQP4AAgADwCUb/IAbJSUbA4AbJf0AAoD9gAAAAAADAAAAQAQAA0AAEAAUABoAAAEhIgYVERQWMyEyNjURNCYjBwkBIRMhEQkBEQPA/IAbJSUbA4AbJSUbgP7A/sACgED9AAGAAYADQCUb/YAbJSUbAoAbJYD/AAEA/gABwP7AAUD+QAAAAAEAAAABAACXAnM8Xw889QALBAAAAAAA0QndGAAAAADRCd0YAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAACAAAAAwAAAAQAAIAEAAAAAAAAAAAKABQAHgA0AFwAkAABAAAABwAbAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("woff"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: 'icomoon'; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| /* Better Font Rendering =========== */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-letter:before { | |
| content: "\e602"; | |
| } | |
| .icon-phone:before { | |
| content: "\e601"; | |
| } | |
| .icon-check:before { | |
| content: "\e600"; | |
| } | |
| body { | |
| background-color: #fff; | |
| } | |
| a { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| @-moz-keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @-moz-keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| .icons-set { | |
| list-style: none; | |
| margin: 30px; | |
| padding: 0; | |
| } | |
| .icons-set__item { | |
| position: relative; | |
| display: block; | |
| float: left; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .icons-set__item * { | |
| -moz-user-select: -moz-none; | |
| -ms-user-select: none; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } | |
| .icons-set__item + .icons-set__item { | |
| margin-left: 14px; | |
| } | |
| .icons-set__item_enabled .icons-set__icon-block { | |
| background-color: #fff; | |
| color: #3C494D; | |
| } | |
| .icons-set__item_enabled .icons-set__icon { | |
| -moz-animation: down 0.4s ease-out; | |
| -webkit-animation: down 0.4s ease-out; | |
| animation: down 0.4s ease-out; | |
| } | |
| .icons-set__item_enabled .icons-set__circle { | |
| -moz-animation: zoom-in 0.3s ease-out forwards; | |
| -webkit-animation: zoom-in 0.3s ease-out forwards; | |
| animation: zoom-in 0.3s ease-out forwards; | |
| } | |
| .icons-set__item_enabled .icons-set__circle-icon { | |
| -moz-animation: zoom-in 0.2s ease-out 0.1s; | |
| -webkit-animation: zoom-in 0.2s ease-out 0.1s; | |
| animation: zoom-in 0.2s ease-out 0.1s; | |
| } | |
| .icons-set__item_disabled .icons-set__icon { | |
| -moz-animation: up 0.4s ease-out; | |
| -webkit-animation: up 0.4s ease-out; | |
| animation: up 0.4s ease-out; | |
| } | |
| .icons-set__item_disabled .icons-set__circle { | |
| -moz-animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| -webkit-animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| } | |
| .icons-set__item_disabled .icons-set__circle-icon { | |
| -moz-animation: zoom-out 0.2s ease-out; | |
| -webkit-animation: zoom-out 0.2s ease-out; | |
| animation: zoom-out 0.2s ease-out; | |
| } | |
| .icons-set__icon-block { | |
| overflow: hidden; | |
| padding: 10px 20px; | |
| font-size: 32px; | |
| line-height: 32px; | |
| color: #BFC5C6; | |
| background-color: #F0F4F5; | |
| border: 1px solid #F0F4F5; | |
| border-radius: 5px; | |
| transition: background-color .2s ease-out; | |
| } | |
| .icons-set__icon { | |
| display: inline-block; | |
| width: 32px; | |
| height: 32px; | |
| vertical-align: top; | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| .icons-set__circle { | |
| position: absolute; | |
| top: -13px; | |
| right: -13px; | |
| height: 26px; | |
| width: 26px; | |
| background-color: #10DB9E; | |
| border: 3px solid #fff; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 16px; | |
| } | |
| .icons-set__circle-icon { | |
| display: inline-block; | |
| height: 16px; | |
| width: 16px; | |
| margin: 5px; | |
| line-height: 16px; | |
| font-size: 16px; | |
| vertical-align: top; | |
| color: #fff; | |
| } | |
| .icons-set__text { | |
| display: inline-block; | |
| margin: 5px 0; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 600; | |
| font-size: 11px; | |
| color: #D2D8DA; | |
| text-transform: uppercase; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="https://dribbble.com/shots/1927803-Toggle" target="_blank">Based on this dribbble</a> | |
| <ul class="icons-set"> | |
| <li class="icons-set__item icons-set__item_disabled"> | |
| <div class="icons-set__icon-block"> | |
| <span class="icons-set__icon icon icon-letter"> | |
| </div> | |
| <div class="icons-set__circle"> | |
| <span class="icons-set__circle-icon icon icon-check"> | |
| </div> | |
| <span class="icons-set__text">Email</span> | |
| </li> | |
| <li class="icons-set__item icons-set__item_enabled"> | |
| <div class="icons-set__icon-block"> | |
| <span class="icons-set__icon icon icon-phone"> | |
| </div> | |
| <div class="icons-set__circle"> | |
| <span class="icons-set__circle-icon icon icon-check"> | |
| </div> | |
| <span class="icons-set__text">SMS</span> | |
| </li> | |
| </ul> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| var items = document.querySelectorAll(".icons-set__item"); | |
| function clickHandler(e) { | |
| this.classList.toggle("icons-set__item_disabled"); | |
| this.classList.toggle("icons-set__item_enabled"); | |
| } | |
| Array.prototype.slice.call(items).forEach(function (item) { | |
| return item.addEventListener("click", clickHandler); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">//icons from icomoon | |
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url('http://i.icomoon.io/public/temp/6ad7584961/UntitledProject3/icomoon.eot'); | |
| } | |
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAywAAAC8AAAAYGNtYXAaVcxZAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZriRWXUAAAFwAAABIGhlYWQFMv6tAAACkAAAADZoaGVhB8IDyAAAAsgAAAAkaG10eA0AAIAAAALsAAAAHGxvY2EAhADYAAADCAAAABBtYXhwAAsAHQAAAxgAAAAgbmFtZVcZpu4AAAM4AAABRXBvc3QAAwAAAAAEgAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYC//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIADAAMAAAYAAAkBJwcJAScCgP6AgIABAAIAgAMA/oCAgP8AAgCAAAACAID/wAOAA8AAEAAVAAABISIGFREUFjMhMjY1ETQmIwMhESERA0D9gBslJRsCgBslJRtA/gACAAPAJRv8gBslJRsDgBsl/QACgP2AAAAAAAMAAABABAADQAAQABQAGgAAASEiBhURFBYzITI2NRE0JiMHCQEhEyERCQERA8D8gBslJRsDgBslJRuA/sD+wAKAQP0AAYABgANAJRv9gBslJRsCgBslgP8AAQD+AAHA/sABQP5AAAAAAQAAAAEAAJcCczxfDzz1AAsEAAAAAADRCd0YAAAAANEJ3RgAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAIAAAADAAAABAAAgAQAAAAAAAAAAAoAFAAeADQAXACQAAEAAAAHABsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), | |
| url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAAsAAAAABKAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIDLGNtYXAAAAFoAAAATAAAAEwaVcxZZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAASAAAAEguJFZdWhlYWQAAALcAAAANgAAADYFMv6taGhlYQAAAxQAAAAkAAAAJAfCA8hobXR4AAADOAAAABwAAAAcDQAAgGxvY2EAAANUAAAAEAAAABAAhADYbWF4cAAAA2QAAAAgAAAAIAALAB1uYW1lAAADhAAAAUUAAAFFVxmm7nBvc3QAAATMAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAv/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAACAAwADAAAGAAAJAScHCQEnAoD+gICAAQACAIADAP6AgID/AAIAgAAAAgCA/8ADgAPAABAAFQAAASEiBhURFBYzITI2NRE0JiMDIREhEQNA/YAbJSUbAoAbJSUbQP4AAgADwCUb/IAbJSUbA4AbJf0AAoD9gAAAAAADAAAAQAQAA0AAEAAUABoAAAEhIgYVERQWMyEyNjURNCYjBwkBIRMhEQkBEQPA/IAbJSUbA4AbJSUbgP7A/sACgED9AAGAAYADQCUb/YAbJSUbAoAbJYD/AAEA/gABwP7AAUD+QAAAAAEAAAABAACXAnM8Xw889QALBAAAAAAA0QndGAAAAADRCd0YAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAACAAAAAwAAAAQAAIAEAAAAAAAAAAAKABQAHgA0AFwAkAABAAAABwAbAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: 'icomoon'; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| /* Better Font Rendering =========== */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-letter:before { | |
| content: "\e602"; | |
| } | |
| .icon-phone:before { | |
| content: "\e601"; | |
| } | |
| .icon-check:before { | |
| content: "\e600"; | |
| } | |
| @import "compass/css3/user-interface"; | |
| @import "compass/css3/animation"; | |
| body { | |
| background-color: #fff; | |
| } | |
| a { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| $block-name: 'icons-set'; | |
| $icon-size: 32px; | |
| $check-icon-size: 16px; | |
| $check-icon-size-padding: 5px; | |
| @include keyframes(up){ | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -$icon-size, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, $icon-size, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @include keyframes(down){ | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, $icon-size, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -$icon-size, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @include keyframes(zoom-in) { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @include keyframes(zoom-out){ | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| .#{$block-name} { | |
| list-style: none; | |
| margin: 30px; | |
| padding: 0; | |
| &__item { | |
| position: relative; | |
| display: block; | |
| float: left; | |
| text-align: center; | |
| cursor: pointer; | |
| * { | |
| @include user-select(none); | |
| } | |
| & + & { | |
| margin-left: ceil(($check-icon-size + $check-icon-size-padding) / 2) + 3px; | |
| } | |
| &_enabled { | |
| .#{$block-name}__icon-block { | |
| background-color: #fff; | |
| color: #3C494D; | |
| } | |
| .#{$block-name}__icon { | |
| @include animation(down .4s ease-out); | |
| } | |
| .#{$block-name}__circle { | |
| @include animation(zoom-in .3s ease-out forwards); | |
| } | |
| .#{$block-name}__circle-icon { | |
| @include animation(zoom-in .2s ease-out .1s); | |
| } | |
| } | |
| &_disabled { | |
| .#{$block-name}__icon { | |
| @include animation(up .4s ease-out); | |
| } | |
| .#{$block-name}__circle { | |
| @include animation(zoom-out .3s ease-out .05s forwards); | |
| } | |
| .#{$block-name}__circle-icon { | |
| @include animation(zoom-out .2s ease-out); | |
| } | |
| } | |
| } | |
| &__icon-block { | |
| overflow:hidden; | |
| padding: 10px 20px; | |
| font-size: $icon-size; | |
| line-height: $icon-size; | |
| color: #BFC5C6; | |
| background-color: #F0F4F5; | |
| border: 1px solid #F0F4F5; | |
| border-radius: 5px; | |
| transition: background-color .2s ease-out; | |
| } | |
| &__icon { | |
| display: inline-block; | |
| width: $icon-size; | |
| height: $icon-size; | |
| vertical-align: top; | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| &__circle { | |
| position: absolute; | |
| top: -($check-icon-size + $check-icon-size-padding * 2) / 2; | |
| right: -($check-icon-size + $check-icon-size-padding * 2) / 2; | |
| height: $check-icon-size + $check-icon-size-padding * 2; | |
| width: $check-icon-size + $check-icon-size-padding * 2; | |
| background-color: #10DB9E; | |
| border: 3px solid #fff; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: $check-icon-size; | |
| } | |
| &__circle-icon { | |
| display: inline-block; | |
| height: $check-icon-size; | |
| width: $check-icon-size; | |
| margin: $check-icon-size-padding; | |
| line-height: $check-icon-size; | |
| font-size: $check-icon-size; | |
| vertical-align: top; | |
| color: #fff; | |
| } | |
| &__text { | |
| display: inline-block; | |
| margin: 5px 0; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 600; | |
| font-size: 11px; | |
| color: #D2D8DA; | |
| text-transform: uppercase; | |
| } | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var items = document.querySelectorAll('.icons-set__item'); | |
| function clickHandler(e) { | |
| this.classList.toggle('icons-set__item_disabled'); | |
| this.classList.toggle('icons-set__item_enabled'); | |
| } | |
| Array.prototype.slice.call(items).forEach(item => item.addEventListener('click', clickHandler));</script></body> | |
| </html> |
This file contains hidden or 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
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url("http://i.icomoon.io/public/temp/6ad7584961/UntitledProject3/icomoon.eot"); | |
| } | |
| @font-face { | |
| font-family: 'icomoon'; | |
| src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAywAAAC8AAAAYGNtYXAaVcxZAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZriRWXUAAAFwAAABIGhlYWQFMv6tAAACkAAAADZoaGVhB8IDyAAAAsgAAAAkaG10eA0AAIAAAALsAAAAHGxvY2EAhADYAAADCAAAABBtYXhwAAsAHQAAAxgAAAAgbmFtZVcZpu4AAAM4AAABRXBvc3QAAwAAAAAEgAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYC//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIADAAMAAAYAAAkBJwcJAScCgP6AgIABAAIAgAMA/oCAgP8AAgCAAAACAID/wAOAA8AAEAAVAAABISIGFREUFjMhMjY1ETQmIwMhESERA0D9gBslJRsCgBslJRtA/gACAAPAJRv8gBslJRsDgBsl/QACgP2AAAAAAAMAAABABAADQAAQABQAGgAAASEiBhURFBYzITI2NRE0JiMHCQEhEyERCQERA8D8gBslJRsDgBslJRuA/sD+wAKAQP0AAYABgANAJRv9gBslJRsCgBslgP8AAQD+AAHA/sABQP5AAAAAAQAAAAEAAJcCczxfDzz1AAsEAAAAAADRCd0YAAAAANEJ3RgAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAIAAAADAAAABAAAgAQAAAAAAAAAAAoAFAAeADQAXACQAAEAAAAHABsAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAAsAAAAABKAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIDLGNtYXAAAAFoAAAATAAAAEwaVcxZZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAASAAAAEguJFZdWhlYWQAAALcAAAANgAAADYFMv6taGhlYQAAAxQAAAAkAAAAJAfCA8hobXR4AAADOAAAABwAAAAcDQAAgGxvY2EAAANUAAAAEAAAABAAhADYbWF4cAAAA2QAAAAgAAAAIAALAB1uYW1lAAADhAAAAUUAAAFFVxmm7nBvc3QAAATMAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAv/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAACAAwADAAAGAAAJAScHCQEnAoD+gICAAQACAIADAP6AgID/AAIAgAAAAgCA/8ADgAPAABAAFQAAASEiBhURFBYzITI2NRE0JiMDIREhEQNA/YAbJSUbAoAbJSUbQP4AAgADwCUb/IAbJSUbA4AbJf0AAoD9gAAAAAADAAAAQAQAA0AAEAAUABoAAAEhIgYVERQWMyEyNjURNCYjBwkBIRMhEQkBEQPA/IAbJSUbA4AbJSUbgP7A/sACgED9AAGAAYADQCUb/YAbJSUbAoAbJYD/AAEA/gABwP7AAUD+QAAAAAEAAAABAACXAnM8Xw889QALBAAAAAAA0QndGAAAAADRCd0YAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAACAAAAAwAAAAQAAIAEAAAAAAAAAAAKABQAHgA0AFwAkAABAAAABwAbAAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("woff"); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| .icon { | |
| font-family: 'icomoon'; | |
| speak: none; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-transform: none; | |
| line-height: 1; | |
| /* Better Font Rendering =========== */ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-letter:before { | |
| content: "\e602"; | |
| } | |
| .icon-phone:before { | |
| content: "\e601"; | |
| } | |
| .icon-check:before { | |
| content: "\e600"; | |
| } | |
| body { | |
| background-color: #fff; | |
| } | |
| a { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #555; | |
| } | |
| @-moz-keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes up { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 45% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes down { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| 40% { | |
| transform: translate3d(0, 32px, 0); | |
| opacity: 0; | |
| } | |
| 60% { | |
| transform: translate3d(0, -32px, 0); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translate3d(0, 0, 0); | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes zoom-in { | |
| 0% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @-moz-keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes zoom-out { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(1.35); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(0.1); | |
| opacity: 0; | |
| } | |
| } | |
| .icons-set { | |
| list-style: none; | |
| margin: 30px; | |
| padding: 0; | |
| } | |
| .icons-set__item { | |
| position: relative; | |
| display: block; | |
| float: left; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .icons-set__item * { | |
| -moz-user-select: -moz-none; | |
| -ms-user-select: none; | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } | |
| .icons-set__item + .icons-set__item { | |
| margin-left: 14px; | |
| } | |
| .icons-set__item_enabled .icons-set__icon-block { | |
| background-color: #fff; | |
| color: #3C494D; | |
| } | |
| .icons-set__item_enabled .icons-set__icon { | |
| -moz-animation: down 0.4s ease-out; | |
| -webkit-animation: down 0.4s ease-out; | |
| animation: down 0.4s ease-out; | |
| } | |
| .icons-set__item_enabled .icons-set__circle { | |
| -moz-animation: zoom-in 0.3s ease-out forwards; | |
| -webkit-animation: zoom-in 0.3s ease-out forwards; | |
| animation: zoom-in 0.3s ease-out forwards; | |
| } | |
| .icons-set__item_enabled .icons-set__circle-icon { | |
| -moz-animation: zoom-in 0.2s ease-out 0.1s; | |
| -webkit-animation: zoom-in 0.2s ease-out 0.1s; | |
| animation: zoom-in 0.2s ease-out 0.1s; | |
| } | |
| .icons-set__item_disabled .icons-set__icon { | |
| -moz-animation: up 0.4s ease-out; | |
| -webkit-animation: up 0.4s ease-out; | |
| animation: up 0.4s ease-out; | |
| } | |
| .icons-set__item_disabled .icons-set__circle { | |
| -moz-animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| -webkit-animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| animation: zoom-out 0.3s ease-out 0.05s forwards; | |
| } | |
| .icons-set__item_disabled .icons-set__circle-icon { | |
| -moz-animation: zoom-out 0.2s ease-out; | |
| -webkit-animation: zoom-out 0.2s ease-out; | |
| animation: zoom-out 0.2s ease-out; | |
| } | |
| .icons-set__icon-block { | |
| overflow: hidden; | |
| padding: 10px 20px; | |
| font-size: 32px; | |
| line-height: 32px; | |
| color: #BFC5C6; | |
| background-color: #F0F4F5; | |
| border: 1px solid #F0F4F5; | |
| border-radius: 5px; | |
| transition: background-color .2s ease-out; | |
| } | |
| .icons-set__icon { | |
| display: inline-block; | |
| width: 32px; | |
| height: 32px; | |
| vertical-align: top; | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| .icons-set__circle { | |
| position: absolute; | |
| top: -13px; | |
| right: -13px; | |
| height: 26px; | |
| width: 26px; | |
| background-color: #10DB9E; | |
| border: 3px solid #fff; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 16px; | |
| } | |
| .icons-set__circle-icon { | |
| display: inline-block; | |
| height: 16px; | |
| width: 16px; | |
| margin: 5px; | |
| line-height: 16px; | |
| font-size: 16px; | |
| vertical-align: top; | |
| color: #fff; | |
| } | |
| .icons-set__text { | |
| display: inline-block; | |
| margin: 5px 0; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 600; | |
| font-size: 11px; | |
| color: #D2D8DA; | |
| text-transform: uppercase; | |
| } |
This file contains hidden or 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
| "use strict"; | |
| var items = document.querySelectorAll(".icons-set__item"); | |
| function clickHandler(e) { | |
| this.classList.toggle("icons-set__item_disabled"); | |
| this.classList.toggle("icons-set__item_enabled"); | |
| } | |
| Array.prototype.slice.call(items).forEach(function (item) { | |
| return item.addEventListener("click", clickHandler); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment