Last active
January 9, 2018 01:12
-
-
Save megganeturner/0cd5631ae74f647cb7ed955f1d05456d to your computer and use it in GitHub Desktop.
Button Component
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.Component.extend({ | |
| tagName: '', | |
| }); |
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.Component.extend({ | |
| tagName: '', | |
| }); |
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.Component.extend({ | |
| tagName: '', | |
| }); |
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.Component.extend({ | |
| tagName: '', | |
| classNames: ['kit'], | |
| attributeBindings: ['disabled', 'type', 'placeholder'] | |
| }); |
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', | |
| dummySelectItems: ['item 1', 'item 2', 'item 3'] | |
| }); |
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
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5592 17620 35 35"> | |
| <g id="arrow" transform="translate(1902 34783)"> | |
| <rect id="canvas" class="canvas" width="35" height="35" transform="translate(-7459 -17128) rotate(180)"/> | |
| <path id="icon" class="icon" d="M22.578,7.266,17.5,12.383,12.422,7.266l-.469.508,5.313,5.352h.469l5.313-5.352Z" transform="translate(-7494 -17155)"/> | |
| </g> | |
| </svg> |
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
| body { | |
| margin: 12px 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12pt; | |
| } | |
| .kit { | |
| height: 30px; | |
| line-height: 30px; | |
| vertical-align: middle; | |
| display: inline-block; | |
| border: none; | |
| border-radius: 2px; | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .kit[disabled] { | |
| background-color: #e9e9e9; | |
| cursor: not-allowed; | |
| color: #fff; | |
| } | |
| .kit[disabled] > svg > path, | |
| .kit[disabled] > svg > g > rect, | |
| .kit[disabled] > svg > g > path { | |
| fill: #fff; | |
| } | |
| .input { | |
| border-bottom: 1px solid #e9e9e9; | |
| border-radius: 0; | |
| padding: 0 1em; | |
| -webkit-appearance: none; | |
| } | |
| .select { | |
| background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg"); | |
| background-position: 90% 50%; | |
| background-repeat: no-repeat; | |
| background-size: 12px; | |
| padding-right: 26px; | |
| } | |
| .btn { | |
| color: #fff; | |
| padding: 0 2rem; | |
| width: auto; | |
| } | |
| .flat { | |
| border: 1px solid #209f85; | |
| color: #000; | |
| } | |
| .flat[disabled] { | |
| border: 1px solid #e9e9e9; | |
| color: #e9e9e9; | |
| background-color: transparent; | |
| } | |
| .flat:hover:not([disabled]) { | |
| background-color: #209f85; | |
| color: #fff; | |
| transition: background-color 280ms cubic-bezier(0.115, 0.93, 0.465, 0.905); | |
| } | |
| .large { | |
| height: 36px; | |
| line-height: 36px; | |
| min-width: 36px; | |
| } | |
| .icon { | |
| width: 30px; | |
| } | |
| .icon > svg { | |
| height: 100%; | |
| width: 100%; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .white { | |
| background-color: #fff; | |
| color: #000; | |
| } | |
| .mist { | |
| background-color: #f7f9f7; | |
| color: #000; | |
| } | |
| .mist > svg > g > .icon, | |
| .white > svg > g > .icon { | |
| fill: #000; | |
| } | |
| .black { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| .acqua { | |
| background-color: #209f85; | |
| color: #fff; | |
| } | |
| .acqua > svg > g > .icon, | |
| .black > svg > g > .icon { | |
| fill: #fff; | |
| } | |
| svg > g > #canvas { | |
| fill: transparent; | |
| } |
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.13.0", | |
| "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.16.2", | |
| "ember-template-compiler": "2.16.2", | |
| "ember-testing": "2.16.2" | |
| }, | |
| "addons": { | |
| "ember-data": "2.16.3" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment