Last active
May 15, 2017 16:38
-
-
Save gtb104/c53a62692fdf070b4547f7bb8de2f014 to your computer and use it in GitHub Desktop.
ember-toggle
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
| import Ember from 'ember'; | |
| export default Ember.Controller.extend({ | |
| appName: 'Ember Twiddle', | |
| hasStyledBytes: false, | |
| actions: { | |
| toggleByteStyling(val) { | |
| console.log('val', val); | |
| this.set('hasStyledBytes', val); | |
| } | |
| } | |
| }); |
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, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| color: inherit; | |
| vertical-align: baseline; | |
| } | |
| body { | |
| margin: 12px 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12pt; | |
| } | |
| input { | |
| line-height: 1.45; | |
| } | |
| .x-toggle-component { | |
| display: inline-flex; | |
| } | |
| .x-toggle-component label.off-label, .x-toggle-component label.on-label { | |
| padding: 0; | |
| } | |
| .x-toggle-component label.toggle-text { | |
| padding-left: 0.5rem; | |
| } | |
| .x-toggle-component .x-toggle-container { | |
| padding: 0; | |
| } | |
| .x-toggle-component .x-toggle-container.medium, .x-toggle-component .x-toggle-container.medium label > .x-toggle-default { | |
| padding: 0; | |
| width: 2rem; | |
| } | |
| .x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default { | |
| background-color: transparent; | |
| border: 1px solid #757575; | |
| border-radius: 10rem; | |
| flex-basis: 4.5rem; | |
| height: 16px; | |
| padding: 0; | |
| transition: background-color .3s; | |
| } | |
| .x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default::after { | |
| background-color: #eeeeee; | |
| border-radius: 10rem; | |
| width: 1rem; | |
| } | |
| .x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default:hover:not(.x-toggle-disabled) { | |
| border-color: #cccccc; | |
| } | |
| .x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default:hover:not(.x-toggle-disabled)::after { | |
| background-color: #eeeeee; | |
| } | |
| .x-toggle-component .x-toggle-container label > .x-toggle-btn.x-toggle-default.x-toggle-disabled { | |
| opacity: 0.2; | |
| } | |
| .x-toggle-component .x-toggle-container-checked .x-toggle:checked + label > .x-toggle-default.x-toggle-btn { | |
| transition: background-color .3s; | |
| background-color: #03a9f4; | |
| } | |
| .x-toggle-component .x-toggle-container-checked .x-toggle:checked + label > .x-toggle-default.x-toggle-btn::after { | |
| left: 14px; | |
| } |
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
| { | |
| "version": "0.12.1", | |
| "EmberENV": { | |
| "FEATURES": {} | |
| }, | |
| "options": { | |
| "use_pods": false, | |
| "enable-testing": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
| "ember": "2.12.0", | |
| "ember-template-compiler": "2.12.0", | |
| "ember-testing": "2.12.0" | |
| }, | |
| "addons": { | |
| "ember-data": "2.12.1", | |
| "ember-toggle": "5.0.0-alpha.4", | |
| "ember-truth-helpers": "1.3.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment