Very Android Lollipop. Wanted this feature when designing an app, and wanted to see what it would take in CSS.
Because of z-index issues, the background of the li has to be drawn with a :before element. Will fix it when I have time.
Check it out on Dribbble!: https://dribbble.com/shots/1968649-Radial-Checkbox
A Pen by Taylor Palmer on CodePen.
| main(role="main") | |
| button#popup-trigger.popup-trigger.btn: span Signup Now | |
| i.fa.fa-plus-square-o | |
| #overlay.overlay | |
| #overlay-background.overlay-background | |
| #overlay-content.overlay-content | |
| #overlay-close.fa.fa-times.fa-lg.overlay-close | |
| h1.main-heading Signup Now | |
| h3.blurb Creating an account is free — | |
| span.blurb-tagline and won't take longer than a couple of seconds. |
| .tiles | |
| a.tile(href="#") | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg") | |
| .details | |
| span.title Lorem Ipsum Dolor | |
| span.info Quisque vel felis lectus donec vitae dapibus magna | |
| a.tile(href="#") | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/2.jpg") | |
| .details | |
| span.title Lorem Ipsum Dolor |
| .tiles | |
| a.tile(href="#") | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg") | |
| .details | |
| span.title Lorem Ipsum Dolor | |
| span.info Quisque vel felis lectus donec vitae dapibus magna | |
| a.tile(href="#") | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/2.jpg") | |
| .details | |
| span.title Lorem Ipsum Dolor |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>PyScript — Python in Browser</title> | |
| <script defer src="https://pyscript.net/alpha/pyscript.js"></script> | |
| </head> | |
| <body> | |
| <py-script> print('Hello, Python in HTML!') </py-script> | |
| </body> | |
| </html> |
| <div class="loader"> | |
| <i class="grey"></i> | |
| </div> |
A Pen by Sara Soueidan on CodePen.
A Pen by Troy Bland on CodePen.
| <h1>Expenses</h1> | |
| <!--first layout--> | |
| <template id="expense-template"> | |
| <style> | |
| #expenses { | |
| display: flex; | |
| } | |
| .expense1 { |
| <main class="grid-wrap"> | |
| <div class="grid"> | |
| <span>One column default</span> | |
| </div> | |
| <div class="grid"> | |
| <span>Half column 1</span> | |
| <span>Half column 2</span> | |
| </div> |