Unified Diff: css/io-toggle.scss
Issue 29730644:
Issue 6514 - IOToggle Custom Element (Closed)
Patch Set:
Created March 22, 2018, 6:18 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« css/desktop-options.scss ('k')
|
js/io-toggle.js » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: css/io-toggle.scss |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/css/io-toggle.scss |
| @@ -0,0 +1,72 @@ |
| +io-toggle { |
| + display: inline-block; |
| + display: inline-block; |
| + width: 30px; |
| + height: 8px; |
| + border-radius: 4px; |
| + background-color: #9b9b9b; |
| + transition: background .2s ease-out; |
| + will-change: background; |
| + transform: translateY(4px); |
| + cursor: pointer; |
| +} |
| + |
| +io-toggle[checked] { |
| + background-color: #92d3ea; |
| +} |
| + |
| +io-toggle[disabled] { |
| + opacity: 0.5; |
| + cursor: default; |
| +} |
| + |
| +io-toggle button { |
| + width: 16px; |
| + height: 16px; |
| + padding: 0; |
| + border: 2px solid #e1e0e1; |
| + border-radius: 8px; |
| + transition: border .2s ease-out, box-shadow .2s ease-out, |
| + transform .2s ease-out, width .2s ease-out; |
| + will-change: border, box-shadow, transform, width; |
| + transform: translateY(-4px); |
| + outline: none; |
| + cursor: pointer; |
| +} |
| + |
| +io-toggle button[aria-checked="false"] |
| +{ |
| + background-color: #f1f1f1; |
| + box-shadow: 0 1px 2px 0 #e5d1d1; |
| +} |
| + |
| +io-toggle button[aria-checked="false"]:hover |
| +{ |
| + box-shadow: 0 2px 4px 0 #d3b0b0; |
| +} |
| + |
| +io-toggle button[aria-checked="true"] |
| +{ |
| + background-color: #059cd0; |
| + border: 2px solid #059cd0; |
| + box-shadow: 0 1px 2px 0 #a6cede; |
| + transform: translateY(-4px) translateX(14px); |
| +} |
| + |
| +io-toggle button[aria-checked="true"]:hover |
| +{ |
| + box-shadow: 0 2px 4px 0 #a6cede; |
| +} |
| + |
| +io-toggle button:focus, |
| +io-toggle button[aria-checked="true"]:focus |
| +{ |
| + border: 2px solid #87bffe; |
| +} |
| + |
| +/* in case we will need to switch active/disabled direction |
| +body[dir="rtl"] io-toggle button[aria-checked="true"] |
| +{ |
| + transform: translateY(-4px) translateX(-14px); |
| +} |
| +*/ |
« no previous file with comments
|
« css/desktop-options.scss ('k')
|
js/io-toggle.js » ('j')
|
no next file with comments »
