├── .editorconfig ├── .eslintrc.json ├── .github └── workflows │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .nvmrc ├── CODEOWNERS ├── LICENSE ├── README.md ├── d2l-button-behavior.js ├── d2l-button-icon.js ├── d2l-button-shared-styles.js ├── d2l-button-subtle.js ├── d2l-button.js ├── d2l-button.scss ├── d2l-floating-buttons.js ├── demo ├── button-icon.html ├── button-subtle.html ├── button.html ├── floating-buttons-standard.html └── floating-buttons.html ├── package.json └── test ├── .gitignore └── button.css.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf8 5 | end_of_line = lf 6 | trim_trailing_whitespace = true 7 | insert_final_newline = true 8 | indent_style = tab 9 | indent_size = 4 10 | 11 | [{*.json,*.yml}] 12 | indent_style = space 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "brightspace/lit-config" 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: pull_request 3 | jobs: 4 | test: 5 | timeout-minutes: 5 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: Brightspace/third-party-actions@actions/checkout 9 | - uses: Brightspace/third-party-actions@actions/setup-node 10 | with: 11 | node-version-file: .nvmrc 12 | - name: Install dependencies 13 | run: npm install 14 | - name: Lint and Test 15 | run: npm run test 16 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | release: 8 | if: "!contains(github.event.head_commit.message, 'skip ci')" 9 | name: Release 10 | timeout-minutes: 5 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 14 | uses: Brightspace/third-party-actions@actions/checkout 15 | with: 16 | persist-credentials: false 17 | - name: Setup Node 18 | uses: Brightspace/third-party-actions@actions/setup-node 19 | with: 20 | node-version-file: .nvmrc 21 | - name: Semantic Release 22 | uses: BrightspaceUI/actions/semantic-release@main 23 | with: 24 | GITHUB_TOKEN: ${{ secrets.D2L_RELEASE_TOKEN }} 25 | NPM: true 26 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @dlockhart @dbatiste 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, and 10 | distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by the copyright 13 | owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all other entities 16 | that control, are controlled by, or are under common control with that entity. 17 | For the purposes of this definition, "control" means (i) the power, direct or 18 | indirect, to cause the direction or management of such entity, whether by 19 | contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the 20 | outstanding shares, or (iii) beneficial ownership of such entity. 21 | 22 | "You" (or "Your") shall mean an individual or Legal Entity exercising 23 | permissions granted by this License. 24 | 25 | "Source" form shall mean the preferred form for making modifications, including 26 | but not limited to software source code, documentation source, and configuration 27 | files. 28 | 29 | "Object" form shall mean any form resulting from mechanical transformation or 30 | translation of a Source form, including but not limited to compiled object code, 31 | generated documentation, and conversions to other media types. 32 | 33 | "Work" shall mean the work of authorship, whether in Source or Object form, made 34 | available under the License, as indicated by a copyright notice that is included 35 | in or attached to the work (an example is provided in the Appendix below). 36 | 37 | "Derivative Works" shall mean any work, whether in Source or Object form, that 38 | is based on (or derived from) the Work and for which the editorial revisions, 39 | annotations, elaborations, or other modifications represent, as a whole, an 40 | original work of authorship. For the purposes of this License, Derivative Works 41 | shall not include works that remain separable from, or merely link (or bind by 42 | name) to the interfaces of, the Work and Derivative Works thereof. 43 | 44 | "Contribution" shall mean any work of authorship, including the original version 45 | of the Work and any modifications or additions to that Work or Derivative Works 46 | thereof, that is intentionally submitted to Licensor for inclusion in the Work 47 | by the copyright owner or by an individual or Legal Entity authorized to submit 48 | on behalf of the copyright owner. For the purposes of this definition, 49 | "submitted" means any form of electronic, verbal, or written communication sent 50 | to the Licensor or its representatives, including but not limited to 51 | communication on electronic mailing lists, source code control systems, and 52 | issue tracking systems that are managed by, or on behalf of, the Licensor for 53 | the purpose of discussing and improving the Work, but excluding communication 54 | that is conspicuously marked or otherwise designated in writing by the copyright 55 | owner as "Not a Contribution." 56 | 57 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf 58 | of whom a Contribution has been received by Licensor and subsequently 59 | incorporated within the Work. 60 | 61 | 2. Grant of Copyright License. 62 | 63 | Subject to the terms and conditions of this License, each Contributor hereby 64 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, 65 | irrevocable copyright license to reproduce, prepare Derivative Works of, 66 | publicly display, publicly perform, sublicense, and distribute the Work and such 67 | Derivative Works in Source or Object form. 68 | 69 | 3. Grant of Patent License. 70 | 71 | Subject to the terms and conditions of this License, each Contributor hereby 72 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, 73 | irrevocable (except as stated in this section) patent license to make, have 74 | made, use, offer to sell, sell, import, and otherwise transfer the Work, where 75 | such license applies only to those patent claims licensable by such Contributor 76 | that are necessarily infringed by their Contribution(s) alone or by combination 77 | of their Contribution(s) with the Work to which such Contribution(s) was 78 | submitted. If You institute patent litigation against any entity (including a 79 | cross-claim or counterclaim in a lawsuit) alleging that the Work or a 80 | Contribution incorporated within the Work constitutes direct or contributory 81 | patent infringement, then any patent licenses granted to You under this License 82 | for that Work shall terminate as of the date such litigation is filed. 83 | 84 | 4. Redistribution. 85 | 86 | You may reproduce and distribute copies of the Work or Derivative Works thereof 87 | in any medium, with or without modifications, and in Source or Object form, 88 | provided that You meet the following conditions: 89 | 90 | You must give any other recipients of the Work or Derivative Works a copy of 91 | this License; and 92 | You must cause any modified files to carry prominent notices stating that You 93 | changed the files; and 94 | You must retain, in the Source form of any Derivative Works that You distribute, 95 | all copyright, patent, trademark, and attribution notices from the Source form 96 | of the Work, excluding those notices that do not pertain to any part of the 97 | Derivative Works; and 98 | If the Work includes a "NOTICE" text file as part of its distribution, then any 99 | Derivative Works that You distribute must include a readable copy of the 100 | attribution notices contained within such NOTICE file, excluding those notices 101 | that do not pertain to any part of the Derivative Works, in at least one of the 102 | following places: within a NOTICE text file distributed as part of the 103 | Derivative Works; within the Source form or documentation, if provided along 104 | with the Derivative Works; or, within a display generated by the Derivative 105 | Works, if and wherever such third-party notices normally appear. The contents of 106 | the NOTICE file are for informational purposes only and do not modify the 107 | License. You may add Your own attribution notices within Derivative Works that 108 | You distribute, alongside or as an addendum to the NOTICE text from the Work, 109 | provided that such additional attribution notices cannot be construed as 110 | modifying the License. 111 | You may add Your own copyright statement to Your modifications and may provide 112 | additional or different license terms and conditions for use, reproduction, or 113 | distribution of Your modifications, or for any such Derivative Works as a whole, 114 | provided Your use, reproduction, and distribution of the Work otherwise complies 115 | with the conditions stated in this License. 116 | 117 | 5. Submission of Contributions. 118 | 119 | Unless You explicitly state otherwise, any Contribution intentionally submitted 120 | for inclusion in the Work by You to the Licensor shall be under the terms and 121 | conditions of this License, without any additional terms or conditions. 122 | Notwithstanding the above, nothing herein shall supersede or modify the terms of 123 | any separate license agreement you may have executed with Licensor regarding 124 | such Contributions. 125 | 126 | 6. Trademarks. 127 | 128 | This License does not grant permission to use the trade names, trademarks, 129 | service marks, or product names of the Licensor, except as required for 130 | reasonable and customary use in describing the origin of the Work and 131 | reproducing the content of the NOTICE file. 132 | 133 | 7. Disclaimer of Warranty. 134 | 135 | Unless required by applicable law or agreed to in writing, Licensor provides the 136 | Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, 137 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, 138 | including, without limitation, any warranties or conditions of TITLE, 139 | NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are 140 | solely responsible for determining the appropriateness of using or 141 | redistributing the Work and assume any risks associated with Your exercise of 142 | permissions under this License. 143 | 144 | 8. Limitation of Liability. 145 | 146 | In no event and under no legal theory, whether in tort (including negligence), 147 | contract, or otherwise, unless required by applicable law (such as deliberate 148 | and grossly negligent acts) or agreed to in writing, shall any Contributor be 149 | liable to You for damages, including any direct, indirect, special, incidental, 150 | or consequential damages of any character arising as a result of this License or 151 | out of the use or inability to use the Work (including but not limited to 152 | damages for loss of goodwill, work stoppage, computer failure or malfunction, or 153 | any and all other commercial damages or losses), even if such Contributor has 154 | been advised of the possibility of such damages. 155 | 156 | 9. Accepting Warranty or Additional Liability. 157 | 158 | While redistributing the Work or Derivative Works thereof, You may choose to 159 | offer, and charge a fee for, acceptance of support, warranty, indemnity, or 160 | other liability obligations and/or rights consistent with this License. However, 161 | in accepting such obligations, You may act only on Your own behalf and on Your 162 | sole responsibility, not on behalf of any other Contributor, and only if You 163 | agree to indemnify, defend, and hold each Contributor harmless for any liability 164 | incurred by, or claims asserted against, such Contributor by reason of your 165 | accepting any such warranty or additional liability. 166 | 167 | END OF TERMS AND CONDITIONS 168 | 169 | APPENDIX: How to apply the Apache License to your work 170 | 171 | To apply the Apache License to your work, attach the following boilerplate 172 | notice, with the fields enclosed by brackets "[]" replaced with your own 173 | identifying information. (Don't include the brackets!) The text should be 174 | enclosed in the appropriate comment syntax for the file format. We also 175 | recommend that a file or class name and description of purpose be included on 176 | the same "printed page" as the copyright notice for easier identification within 177 | third-party archives. 178 | 179 | Copyright 2016 D2L Corporation 180 | 181 | Licensed under the Apache License, Version 2.0 (the "License"); 182 | you may not use this file except in compliance with the License. 183 | You may obtain a copy of the License at 184 | 185 | http://www.apache.org/licenses/LICENSE-2.0 186 | 187 | Unless required by applicable law or agreed to in writing, software 188 | distributed under the License is distributed on an "AS IS" BASIS, 189 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 190 | See the License for the specific language governing permissions and 191 | limitations under the License. 192 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Deprecated: use [BrightspaceUI/core](https://github.com/BrightspaceUI/core) instead. 2 | 3 | -------------------------------------------------------------------------------- /d2l-button-behavior.js: -------------------------------------------------------------------------------- 1 | import '@polymer/polymer/polymer-legacy.js'; 2 | import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; 3 | 4 | window.D2L = window.D2L || {}; 5 | window.D2L.PolymerBehaviors = window.D2L.PolymerBehaviors || {}; 6 | window.D2L.PolymerBehaviors.Button = window.D2L.PolymerBehaviors.Button || {}; 7 | 8 | /** @polymerBehavior */ 9 | D2L.PolymerBehaviors.Button.Behavior = { 10 | properties: { 11 | 12 | /** 13 | * Whether the button is the primary button. 14 | */ 15 | primary: { 16 | type: Boolean, 17 | reflectToAttribute: true 18 | }, 19 | 20 | /** 21 | * Standard HTML disabled. 22 | */ 23 | disabled: { 24 | type: Boolean, 25 | reflectToAttribute: true 26 | }, 27 | /** 28 | * Indicates whether the element, or another grouping element it 29 | * controls, is currently expanded or collapsed. 30 | */ 31 | ariaExpanded: String, 32 | /** 33 | * Indicates the button opens a menu. 34 | */ 35 | ariaHaspopup: String, 36 | /** 37 | * A string to be used as the accessible label, which overrides text content. 38 | */ 39 | ariaLabel: String, 40 | /** 41 | * Standard HTML autofocus. 42 | */ 43 | autofocus: { 44 | type: Boolean, 45 | reflectToAttribute: true 46 | }, 47 | /** 48 | * Standard HTML form. 49 | */ 50 | form: { 51 | type: String, 52 | reflectToAttribute: true 53 | }, 54 | /** 55 | * Standard HTML formaction. 56 | */ 57 | formaction: { 58 | type: String, 59 | reflectToAttribute: true 60 | }, 61 | /** 62 | * Standard HTML formenctype. 63 | */ 64 | formenctype: { 65 | type: String, 66 | reflectToAttribute: true 67 | }, 68 | /** 69 | * Standard HTML formmethod. 70 | */ 71 | formmethod: { 72 | type: String, 73 | reflectToAttribute: true 74 | }, 75 | /** 76 | * Standard HTML formnovalidate. 77 | */ 78 | formnovalidate: { 79 | type: String, 80 | reflectToAttribute: true 81 | }, 82 | /** 83 | * Standard HTML formtarget. 84 | */ 85 | formtarget: { 86 | type: String, 87 | reflectToAttribute: true 88 | }, 89 | /** 90 | * Standard HTML name. 91 | */ 92 | name: { 93 | type: String, 94 | reflectToAttribute: true 95 | }, 96 | /** 97 | * Standard HTML type. 98 | */ 99 | type: { 100 | type: String, 101 | reflectToAttribute: true, 102 | value: 'button' 103 | } 104 | 105 | }, 106 | 107 | ready: function() { 108 | this._handleClick = this._handleClick.bind(this); 109 | }, 110 | 111 | attached: function() { 112 | // eslint-disable-next-line prefer-arrow-callback 113 | afterNextRender(this, function() { 114 | this.addEventListener('click', this._handleClick, true); 115 | }.bind(this)); 116 | }, 117 | 118 | detached: function() { 119 | this.removeEventListener('click', this._handleClick, true); 120 | }, 121 | 122 | _handleClick: function(e) { 123 | if (this.disabled) { 124 | e.stopPropagation(); 125 | } 126 | } 127 | 128 | }; 129 | -------------------------------------------------------------------------------- /d2l-button-icon.js: -------------------------------------------------------------------------------- 1 | import '@brightspace-ui/core/components/button/button-icon.js'; 2 | -------------------------------------------------------------------------------- /d2l-button-shared-styles.js: -------------------------------------------------------------------------------- 1 | import '@polymer/polymer/polymer-legacy.js'; 2 | const $_documentContainer = document.createElement('template'); 3 | 4 | $_documentContainer.innerHTML = ` 5 | 43 | `; 44 | 45 | document.head.appendChild($_documentContainer.content); 46 | -------------------------------------------------------------------------------- /d2l-button-subtle.js: -------------------------------------------------------------------------------- 1 | import '@brightspace-ui/core/components/button/button-subtle.js'; 2 | -------------------------------------------------------------------------------- /d2l-button.js: -------------------------------------------------------------------------------- 1 | import '@brightspace-ui/core/components/button/button.js'; 2 | -------------------------------------------------------------------------------- /d2l-button.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/@brightspace-ui/core/components/colors/colors.scss'; 2 | @import 'node_modules/@brightspace-ui/core/components/typography/typography.scss'; 3 | 4 | @mixin _d2l-button-clear-focus() { 5 | box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); 6 | } 7 | 8 | @mixin _d2l-button-focus() { 9 | box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006fbf; 10 | } 11 | 12 | @mixin _d2l-button-shared() { 13 | border-radius: 0.3rem; 14 | border-style: solid; 15 | border-width: 1px; 16 | box-sizing: border-box; 17 | cursor: pointer; 18 | display: inline-block; 19 | margin: 0; 20 | min-height: -webkit-calc(2rem + 2px); 21 | min-height: calc(2rem + 2px); 22 | outline: none; 23 | text-align: center; 24 | transition: box-shadow 0.2s; 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | -ms-user-select: none; 28 | user-select: none; 29 | vertical-align: middle; 30 | white-space: nowrap; 31 | width: auto; 32 | } 33 | 34 | @mixin d2l-button-icon() { 35 | @include _d2l-button-shared(); 36 | background-color: transparent; 37 | border-color: transparent; 38 | @include _d2l-button-clear-focus(); 39 | font-family: inherit; 40 | min-width: calc(2rem + 2px); 41 | padding: 0; 42 | position: relative; 43 | &::-moz-focus-inner { 44 | border: 0; 45 | } 46 | &[h-align="text"] { 47 | left: calc(((2rem + 2px - 0.9rem) / 2) * -1); 48 | } 49 | [dir="rtl"] &[h-align="text"] { 50 | left: 0; 51 | right: calc(((2rem + 2px - 0.9rem) / 2) * -1); 52 | } 53 | &[disabled]:hover, &[disabled]:focus, &[active][disabled] { 54 | background-color: transparent; 55 | } 56 | &:hover, &:focus, &[active], &.d2l-button-icon-hover, &.d2l-button-icon-focus { 57 | background-color: $d2l-color-gypsum; 58 | } 59 | &:focus, &.d2l-button-icon-focus { 60 | @include _d2l-button-focus(); 61 | } 62 | & d2l-icon { 63 | height: 0.9rem; 64 | width: 0.9rem; 65 | } 66 | &[disabled] { 67 | cursor: default; 68 | opacity: 0.5; 69 | } 70 | &[translucent] { 71 | background-color: rgba(0,0,0,0.5); 72 | transition: background-color 0.5s; 73 | } 74 | &[translucent] d2l-icon { 75 | color: white; 76 | } 77 | &[active][translucent], 78 | &[translucent].d2l-button-icon-hover, 79 | &[translucent].d2l-button-icon-focus, 80 | &[translucent]:hover, 81 | &[translucent]:focus { 82 | border: none; 83 | background-color: $d2l-color-celestine; 84 | box-shadow: none; 85 | } 86 | } 87 | 88 | @mixin d2l-button-subtle() { 89 | @include _d2l-button-shared(); 90 | background-color: transparent; 91 | border-color: transparent; 92 | color: $d2l-color-celestine; 93 | @include _d2l-button-clear-focus(); 94 | font-family: inherit; 95 | padding: 0.5rem 0.6rem; 96 | position: relative; 97 | @include d2l-label-text(); 98 | &::-moz-focus-inner { 99 | border: 0; 100 | } 101 | &[h-align="text"] { 102 | left: -0.6rem; 103 | } 104 | [dir="rtl"] &[h-align="text"] { 105 | left: 0; 106 | right: -0.6rem; 107 | } 108 | &[disabled]:hover, &[disabled]:focus, &[active][disabled] { 109 | background-color: transparent; 110 | } 111 | &:hover, &:focus, &[active], &.d2l-button-subtle-hover, &.d2l-button-subtle-focus { 112 | background-color: $d2l-color-gypsum; 113 | } 114 | &:focus, &.d2l-button-subtle-focus { 115 | @include _d2l-button-focus(); 116 | } 117 | & d2l-icon { 118 | color: $d2l-color-celestine; 119 | height: 0.9rem; 120 | margin-right: 0.3rem; 121 | width: 0.9rem; 122 | } 123 | [dir="rtl"] & d2l-icon { 124 | margin-left: 0.3rem; 125 | margin-right: 0; 126 | } 127 | &[disabled] { 128 | cursor: default; 129 | opacity: 0.5; 130 | } 131 | } 132 | 133 | @mixin d2l-button() { 134 | @include _d2l-button-shared(); 135 | @include _d2l-button-clear-focus(); 136 | font-family: inherit; 137 | padding: 0.5rem 1.5rem; 138 | @include d2l-label-text(); 139 | &::-moz-focus-inner { 140 | border: 0; 141 | } 142 | &, &[disabled]:hover, &[disabled]:focus, &[active][disabled] { 143 | background-color: $d2l-color-regolith; 144 | border-color: $d2l-color-mica; 145 | color: $d2l-color-ferrite; 146 | } 147 | &:hover, &:focus, &[active], &.d2l-button-hover, &.d2l-button-focus { 148 | background-color: $d2l-color-gypsum; 149 | } 150 | &:focus, &.d2l-button-focus { 151 | @include _d2l-button-focus(); 152 | } 153 | &[disabled] { 154 | opacity: 0.5; 155 | cursor: default; 156 | } 157 | &[primary], &[primary][disabled]:hover, &[primary][disabled]:focus, &[primary][active][disabled] { 158 | background-color: $d2l-color-celestine; 159 | border-color: $d2l-color-celestine-minus-1; 160 | color: #ffffff; 161 | } 162 | &[primary]:hover, &[primary].d2l-button-hover, &[primary]:focus, &[primary].d2l-button-focus, &[primary][active] { 163 | background-color: $d2l-color-celestine-minus-1; 164 | } 165 | &[primary]:focus, &[primary].d2l-button-focus { 166 | @include _d2l-button-focus(); 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /d2l-floating-buttons.js: -------------------------------------------------------------------------------- 1 | import '@brightspace-ui/core/components/button/floating-buttons.js'; 2 | -------------------------------------------------------------------------------- /demo/button-icon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | d2l-button-icon demo 8 | 12 | 61 | 62 | 63 | 64 | 65 | 66 |

Icon Button

67 | 68 | 69 | 70 | 71 | 72 |

Icon Button Disabled

73 | 74 | 75 | 76 | 77 | 78 |

Icon Button Translucent

79 | 80 | 81 |
82 | 83 | 84 |
85 | 86 | 87 |

Icon Button with Horizontal Align

88 | 89 | 90 | 91 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit
92 | 93 | 94 | 95 |

Icon Button with Visible on Ancestor

96 | 97 | 98 |
99 | 100 | 101 | 102 |
103 | 104 | 105 |

Icon Button with Translucent + Visible on Ancestor

106 | 107 | 108 |
109 | 110 | 111 |
112 | 113 | 114 |

Icon Button with Customized Size and Focus Box-Shadow

115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /demo/button-subtle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | d2l-button-subtle demo 8 | 12 | 13 | 14 | 15 | 16 | 17 |

Subtle Button with Text Only

18 | 19 | 20 | 21 | 22 | 23 |

Subtle Button Disabled

24 | 25 | 26 | 27 | 28 | 29 |

Subtle Button with Text and Icon

30 | 31 | 32 | 33 | 34 | 35 |

Subtle Button with Text and Icon on the Right

36 | 37 | 38 | 39 | 40 | 41 |

Subtle Button with Horizontal Align

42 | 43 | 44 | 45 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit
46 | 47 | 48 | 49 | 50 | 51 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /demo/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | d2l-button demo 8 | 12 | 13 | 14 | 15 | 16 |

Button

17 | 18 | Normal Button 19 | 20 |

Button (Primary)

21 | 22 | Primary Button 23 | 24 |

Button (Disabled)

25 | 26 | Disabled Button 27 | 28 |

Button (Primary and Disabled)

29 | 30 | Disabled Primary Button 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /demo/floating-buttons-standard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | d2l-floating-buttons-standard demo 8 | 13 | 14 | 22 | 23 | 24 | 25 | 26 | 27 |

Floating Buttons

28 | 29 | Remove Floating Buttons 30 | Append Floating Buttons 31 | Append New Button 32 | Remove Last Button 33 | Insert Content 34 | Remove Content 35 | 36 | 37 |
38 |

I love beer!

39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /demo/floating-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | d2l-floating-buttons demo 8 | 13 | 21 | 22 | 23 | 24 | 25 | 26 |

Floating Buttons

27 | 28 | Remove Floating Buttons 29 | Append Floating Buttons 30 | Append New Button 31 | Remove Last Button 32 | Insert Content 33 | Remove Content 34 | 35 | 36 |
37 |

I love beer!

38 |
39 | 40 | Make more Beer! 41 | 42 | 43 | 44 | 45 | 46 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Polymer-based web components and Sass mixins for D2L buttons", 3 | "repository": { 4 | "type": "git", 5 | "url": "https://github.com/BrightspaceUI/button.git" 6 | }, 7 | "name": "@brightspace-ui/button", 8 | "scripts": { 9 | "build:sass": "node-sass --output-style expanded ./test/button.css.scss ./test/button.css", 10 | "lint": "npm run lint:js", 11 | "lint:js": "eslint . --ext .js,.html demo/**/*.html", 12 | "start": "web-dev-server --node-resolve --watch", 13 | "test": "npm run lint && npm run build:sass" 14 | }, 15 | "author": "D2L Corporation", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "@babel/eslint-parser": "^7", 19 | "@web/dev-server": "^0.1", 20 | "eslint": "^8", 21 | "eslint-config-brightspace": "^0.16", 22 | "eslint-plugin-html": "^6", 23 | "eslint-plugin-import": "^2", 24 | "eslint-plugin-lit": "^1", 25 | "eslint-plugin-sort-class-members": "^1", 26 | "node-sass": "^7" 27 | }, 28 | "version": "6.2.1", 29 | "main": "d2l-button.js", 30 | "files": [ 31 | "d2l-button-behavior.js", 32 | "d2l-button-icon.js", 33 | "d2l-button-shared-styles.js", 34 | "d2l-button-subtle.js", 35 | "d2l-button.js", 36 | "d2l-button.scss", 37 | "d2l-floating-buttons.js" 38 | ], 39 | "publishConfig": { 40 | "access": "public" 41 | }, 42 | "dependencies": { 43 | "@brightspace-ui/core": "^2", 44 | "@polymer/polymer": "^3.0.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /test/.gitignore: -------------------------------------------------------------------------------- 1 | *.css 2 | -------------------------------------------------------------------------------- /test/button.css.scss: -------------------------------------------------------------------------------- 1 | @import '../d2l-button.scss'; 2 | 3 | .sass-mixin-button { 4 | @include d2l-button(); 5 | } 6 | 7 | .sass-mixin-button-subtle { 8 | @include d2l-button-subtle(); 9 | } 10 | 11 | .sass-mixin-button-icon { 12 | @include d2l-button-icon(); 13 | } 14 | --------------------------------------------------------------------------------