├── .gitignore ├── .npmignore ├── README.md ├── build ├── js │ └── button.js └── sass │ ├── _development.scss │ ├── _import.scss │ ├── button.scss │ ├── css │ └── _execute.scss │ └── module │ ├── _drop-down.scss │ ├── _loader.scss │ ├── _setup.scss │ ├── _shape.scss │ ├── _size.scss │ ├── _style.scss │ └── _utilities.scss ├── cockpit.json ├── css ├── button.min.css └── icon-font-rocket-button │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── index.html ├── js └── button.min.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | 6 | # Numerous always-ignore extensions 7 | *.diff 8 | *.err 9 | *.orig 10 | *.log 11 | *.rej 12 | *.swo 13 | *.swp 14 | *.zip 15 | *.vi 16 | *~ 17 | 18 | # OS or Editor folders 19 | .DS_Store 20 | ._* 21 | Thumbs.db 22 | .cache 23 | .project 24 | .settings 25 | .tmproj 26 | *.esproj 27 | nbproject 28 | *.sublime-project 29 | *.sublime-workspace 30 | .idea 31 | 32 | # Komodo 33 | *.komodoproject 34 | .komodotools 35 | 36 | # grunt-html-validation 37 | validation-status.json 38 | validation-report.json 39 | 40 | # Folders to ignore 41 | node_modules 42 | bower_components 43 | .sass-cache 44 | 45 | #Files to ignore 46 | test.html 47 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | // Files to ignore 2 | index.html 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NO LONGER SUPPORTED 2 | 3 | # Rocket Button 4 | A lightweight button module. 5 | 6 | * [Getting Started](#getting-started) 7 | * [CSS Implementation](#css-implementation) 8 | * [SASS Implementation](#sass-implementation) 9 | * [Javascript Initialisation](#javascript-initialisation) 10 | * [Loader Options](#loader-options) 11 | * [Defaults](#defaults) 12 | * [Rebuilding Files](#rebuilding-files) 13 | * [Buttonplate Deprecated](#buttonplate-deprecated) 14 | 15 | ## Getting Started 16 | Install via NPM. 17 | 18 | ``` 19 | npm install rocket-button 20 | ``` 21 | 22 | **NOTE** that this module has a dependency [Rocket Tools (28kb)](https://github.com/chrishumboldt/Rocket-Tools) which will automatically be installed as well. 23 | 24 | ## CSS Implementation 25 | Start by including the necessary files. 26 | 27 | ```html 28 | 29 | 30 | 31 | ``` 32 | 33 | Now class your button and add a modifier to gain the desired effect. For example: 34 | 35 | ```html 36 | 37 | ``` 38 | 39 | There are a variety of options for the CSS modifiers. 40 | 41 | Class | Options | Description 42 | ---- | ---- | ---- 43 | `_mod-style-flat-(x)` | `white` `grey` `black` `aqua` `blue` `green`
`orange` `pink` `purple` `red` `yellow` | Set the colour and style to flat. 44 | `_mod-style-gradient-(x)` | `white` `grey` `black` `aqua` `blue` `green`
`orange` `pink` `purple` `red` `yellow` | Set the colour and style to gradient. 45 | `_mod-style-line-(x)` | `white` `grey` `black` `aqua` `blue` `green`
`orange` `pink` `purple` `red` `yellow` | Set the colour and style to line. 46 | `_mod-size-(x)` | `small` `normal` `large` `x-large` | Set the size of the the button. 47 | `_mod-shape-(x)` | `rounded` `pill` `square` | Set the shape of the the button. 48 | 49 | If no modifiers are provided then the colour will default to grey, the style to flat, the size to normal and the shape to rounded. 50 | 51 | ## SASS Implementation 52 | Instead of including the CSS file above, you can import the SASS file and create your own button styles. See an example below: 53 | 54 | ```scss 55 | @import "node_modules/rocket-button/build/sass/import"; 56 | 57 | .btn-primary, 58 | .btn-secondary { 59 | @include mod-button-setup; 60 | @include mod-button-shape(rounded); 61 | @include mod-button-size(normal); 62 | } 63 | .btn-primary { 64 | @include mod-button-style(line, black); 65 | @include mod-button-size(large); 66 | } 67 | .btn-secondary { 68 | @include mod-button-style(flat, white); 69 | } 70 | ``` 71 | 72 | There are a variety of options for the SASS builds. 73 | 74 | SASS | Default | Options | Description 75 | ---- | ---- | ---- | ---- 76 | `mod-button-setup` | | | Apply to all buttons. 77 | `mod-button-shape(x)` | `rounded` | `pill` `rounded` `square` | Set the shape of the button. 78 | `mod-button-size(x)` | `normal` | `small` `normal` `large` `x-large` | Set the size of the button. 79 | `mod-button-style(x, y)` | `flat`, `white` | `flat` `gradient` `line` | Set `x` to the style of button.
Set `y` to the colour. 80 | `mod-button-css(x)` | `.mod-button` | | Create styles for selector `x`. 81 | 82 | ## Javascript Initialisation 83 | If you want to enable button loaders or dropdowns then you will need to execute the following Javascript. Start by including the necessary files. By default the dropdown target option is set to **.mod-button**. 84 | 85 | ```html 86 | 87 | 88 | 89 |
90 | Drop Down Default
91 | 96 |
97 | 98 | 99 | 100 | 101 | 115 | 116 | ``` 117 | 118 | The button loader returns the element instance. You can modify the loader after that. 119 | 120 | ```javascript 121 | // Start the button loader 122 | const btnLoader = Rocket.button.loader({ 123 | target: '#button-loader' 124 | }); 125 | 126 | // The button element 127 | Rocket.log(btnLoader.button); 128 | 129 | // Hide the loader 130 | setTimeout(function () { 131 | btnLoader.hide(); 132 | }, 4000); 133 | ``` 134 | 135 | Each dropdown initialisation will return an array of module objects (An array will always be returned even if the target is an id). This includes the button element itself as well as relevant methods. For example: 136 | 137 | ```javascript 138 | // By default the target option is set to '.mod-button' 139 | const buttons = Rocket.button.dropdown(); 140 | 141 | // The buttons and all methods 142 | for (let i = 0, len = buttons.length; i < len; i++) { 143 | console.log(buttons[i].button); 144 | buttons[i].show(); // Show the button dropdown 145 | buttons[i].hide(); // Hide the button dropdown 146 | } 147 | ``` 148 | 149 | Alternatively if you know the button target is unique you can reference the button right away with the 0 index. For example: 150 | 151 | ```javascript 152 | const myButton = Rocket.button.dropdown({ 153 | target: '#my-button' 154 | })[0]; // Reference the first item in the array right away. 155 | ``` 156 | 157 | #### Loader Options 158 | Name | Default | Options | Description 159 | ---- | ---- | ---- | ---- 160 | `element` | | | Provide the button element to attach the loader to. 161 | `parseEvent` | | | Parse a click event to prevent the default action. 162 | `reveal` | `appear` | `appear` `slide-down` `slide-up` | Set the loader reveal. 163 | `timeout` | `0` | | Set the timeout of the loader (in seconds).
`0` is infinite. 164 | 165 | #### Defaults 166 | You can also overwrite the module target option globally by altering the Rocket defaults. To do so reference the defaults object property, for example: 167 | 168 | ```javascript 169 | Rocket.defaults.button.loader.reveal = 'slide-up'; 170 | Rocket.defaults.button.dropdown.target = '.new-button-class'; 171 | ``` 172 | 173 | ## Rebuilding Files 174 | In order to rebuild production files you will first need to install the [Rocket Command Line Tool](https://github.com/chrishumboldt/Rocket-Command). To do so run the following npm command in your terminal. **NOTE** that this package is installed globally and can take a while as it has quite a few dependencies. 175 | 176 | ``` 177 | npm install rocket-command -g 178 | ``` 179 | 180 | Once installed navigate to the Rocket Button root and run the following command: 181 | 182 | ``` 183 | rocket build 184 | ``` 185 | 186 | The relevant minified CSS and JS will now be rebuilt. 187 | 188 | ## Buttonplate Deprecated 189 | The original library, Buttonplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Buttonplate will be maintained only with bug fixes under the **buttonplate** branch. 190 | 191 | ## Author 192 | Created and maintained by Chris Humboldt
193 | Website: chrishumboldt.com
194 | GitHub github.com/chrishumboldt
195 | 196 | ## Copyright and License 197 | Copyright 2018 Rocket Project 198 | 199 | Licensed under the Apache License, Version 2.0 (the "License"); 200 | you may not use this file except in compliance with the License. 201 | You may obtain a copy of the License at 202 | 203 | http://www.apache.org/licenses/LICENSE-2.0 204 | 205 | Unless required by applicable law or agreed to in writing, software 206 | distributed under the License is distributed on an "AS IS" BASIS, 207 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 208 | See the License for the specific language governing permissions and 209 | limitations under the License. 210 | -------------------------------------------------------------------------------- /build/js/button.js: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Set the defaults 6 | Rocket.defaults.button = { 7 | dropdown: {target: '.mod-button'}, 8 | loader: {reveal: 'appear', timeout: 0} 9 | }; 10 | 11 | // Module 12 | Rocket.button = (() => { 13 | const store = { 14 | dropDownClassName: 'has-dropdown', 15 | docClick: false 16 | }; 17 | 18 | // Methods 19 | const action = { 20 | hide: { 21 | allDropDowns() { 22 | const openDropDowns = Rocket.dom.select(`.${store.dropDownClassName} ul.is-open`); 23 | for (let i = 0, len = openDropDowns.length; i < len; i++) { 24 | Rocket.classes.remove(openDropDowns[i], 'is-open'); 25 | } 26 | }, 27 | dropdown() { 28 | Rocket.state.clear(this); 29 | }, 30 | loader() { 31 | setTimeout(() => { 32 | Rocket.classes.remove(this, 'is-loading'); 33 | this.removeAttribute('disabled'); 34 | }); 35 | } 36 | }, 37 | show: { 38 | dropdown() { 39 | const { button, buttonUL } = this; 40 | 41 | action.hide.allDropDowns(); 42 | buttonUL.style.width = `${button.clientWidth}px`; 43 | setTimeout(function () { 44 | Rocket.state.add(buttonUL, 'open'); 45 | }); 46 | }, 47 | loader() { 48 | if (!this.getAttribute('disabled')) { 49 | setTimeout(() => { 50 | Rocket.classes.add(this, 'is-loading'); 51 | this.setAttribute('disabled', ''); 52 | }); 53 | } 54 | } 55 | } 56 | }; 57 | 58 | const apply = { 59 | dropdown(button) { 60 | const buttonUL = button.querySelector('ul'); 61 | if (!buttonUL) return; 62 | 63 | Rocket.classes.add(button, store.dropDownClassName); 64 | Rocket.event.add(button, 'click', () => { 65 | action.show.dropdown.call({ button, buttonUL }); 66 | }); 67 | 68 | return { 69 | button, 70 | hide: action.hide.dropdown.bind(buttonUL), 71 | show: action.show.dropdown.bind({ button, buttonUL }) 72 | }; 73 | }, 74 | loader({ button, timeout }) { 75 | action.show.loader.call(button); 76 | if (timeout > 0) { setTimeout(() => { action.hide.loader.call(button); }, timeout * 1000) } 77 | 78 | return { 79 | button, 80 | hide: action.hide.loader.bind(button), 81 | show: action.show.loader.bind(button) 82 | }; 83 | } 84 | }; 85 | 86 | const init = { 87 | dropdown({ target = Rocket.defaults.button.dropdown.target } = {}) { 88 | const objReturn = new Array; 89 | const buttons = Rocket.dom.select(target); 90 | 91 | if (buttons.length <= 0) return; 92 | 93 | buttons.forEach((button) => { 94 | objReturn.push(apply.dropdown(button)); 95 | }); 96 | 97 | return objReturn; 98 | }, 99 | loader({ 100 | element = null, 101 | parseEvent = null, 102 | reveal = Rocket.defaults.button.loader.reveal, 103 | target = null, 104 | timeout = Rocket.defaults.button.loader.timeout 105 | } = {}) { 106 | if (parseEvent) { parseEvent.preventDefault(); } 107 | if (!element && !target) { return; } 108 | 109 | const button = (element) ? element : Rocket.dom.element(target); 110 | 111 | if (!Rocket.has.class(button, 'is-loading')) { 112 | if (!button.querySelector('.mod-button-loader')) { 113 | let newInnerHTML = ''; 114 | newInnerHTML += ` 115 |
116 |
117 |
118 |
119 | `; 120 | newInnerHTML += '' + button.innerHTML + ''; 121 | button.innerHTML = newInnerHTML; 122 | } 123 | Rocket.classes.add(button, '_mod-reveal-' + reveal); 124 | 125 | return apply.loader({ button, timeout }); 126 | } 127 | }, 128 | setup() { 129 | if (!store.docClick) { 130 | Rocket.event.add(document, 'click', function () { 131 | action.hide.allDropDowns(); 132 | }); 133 | store.docClick = true; 134 | } 135 | } 136 | }; 137 | 138 | // Expose and execute 139 | init.setup(); 140 | return { 141 | dropdown: init.dropdown, 142 | loader: init.loader 143 | } 144 | })(); 145 | -------------------------------------------------------------------------------- /build/sass/_development.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Variables 6 | $font-face-rocket-button: "icon-font-rocket-button" !default; 7 | 8 | // Import 9 | @import "../../node_modules/rocket-propel/build/sass/import"; 10 | 11 | @import "module/utilities"; 12 | @import "module/drop-down"; 13 | @import "module/loader"; 14 | @import "module/setup"; 15 | @import "module/shape"; 16 | @import "module/size"; 17 | @import "module/style"; 18 | 19 | @import "css/execute"; 20 | -------------------------------------------------------------------------------- /build/sass/_import.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Variables 6 | $font-face-rocket-button: "icon-font-rocket-button" !default; 7 | 8 | // Import 9 | @import "../../../rocket-propel/build/sass/import"; 10 | 11 | @import "module/utilities"; 12 | @import "module/drop-down"; 13 | @import "module/loader"; 14 | @import "module/setup"; 15 | @import "module/shape"; 16 | @import "module/size"; 17 | @import "module/style"; 18 | 19 | @import "css/execute"; 20 | -------------------------------------------------------------------------------- /build/sass/button.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | @import "development"; 6 | @include mod-button-css(); 7 | -------------------------------------------------------------------------------- /build/sass/css/_execute.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // CSS 6 | @mixin mod-button-css($selector: '.mod-button') { 7 | #{$selector} { 8 | @include mod-button-setup(); 9 | @include mod-button-size(normal); 10 | @include mod-button-shape; 11 | @include mod-button-loader; 12 | @include mod-button-dropdown; 13 | } 14 | 15 | // Size 16 | #{$selector}._mod-size-small { 17 | @include mod-button-size(small); 18 | } 19 | #{$selector}._mod-size-large { 20 | @include mod-button-size(large); 21 | } 22 | #{$selector}._mod-size-x-large { 23 | @include mod-button-size(x-large); 24 | } 25 | 26 | // Shapes 27 | #{$selector}._mod-shape-square { 28 | @include mod-button-shape(square); 29 | } 30 | #{$selector}._mod-shape-pill { 31 | @include mod-button-shape(pill); 32 | } 33 | 34 | // Styles 35 | @each $colour-name, $colour in $ar-colours-primary { 36 | #{$selector}._mod-style-flat-#{$colour-name} { 37 | @include mod-button-style(flat, $colour); 38 | } 39 | } 40 | @each $colour-name, $colour in $ar-colours-primary { 41 | #{$selector}._mod-style-gradient-#{$colour-name} { 42 | @include mod-button-style(gradient, $colour); 43 | } 44 | } 45 | @each $colour-name, $colour in $ar-colours-primary { 46 | #{$selector}._mod-style-line-#{$colour-name} { 47 | @include mod-button-style(line, $colour); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /build/sass/module/_drop-down.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Variables 6 | // Drop-downs 7 | // Set line 8 | // Drop-down position 9 | // Drop-down link hover 10 | 11 | // Variables 12 | $default-colour: $blue; 13 | $away-from-button: 4px; 14 | 15 | // Drop-downs 16 | @mixin mod-button-dropdown($colour: $default-colour) { 17 | &.has-dropdown { 18 | @include level(2); 19 | } 20 | 21 | // List 22 | ul { 23 | @include position(absolute); 24 | @include padding(0px); 25 | @include margin-t($away-from-button); 26 | @include list-style(none); 27 | @include background-colour($white); 28 | @include border-radius(); 29 | @include drop-shadow(fade-out($black, 0.85), 3px, 1px); 30 | @include level(2); 31 | @include opacity(0); 32 | @include visibility(hidden); 33 | } 34 | 35 | // Open state 36 | ul.is-open { 37 | @include opacity(1); 38 | @include visibility(visible); 39 | @include animate(all, 0.4s); 40 | } 41 | 42 | li { 43 | @include spacing-no(); 44 | } 45 | li:first-child a { 46 | @include border-radius-t(); 47 | } 48 | li:last-child a { 49 | @include border-radius-b(); 50 | } 51 | li.mod-button-line-top { 52 | @include mod-button-set-line(top); 53 | } 54 | li.mod-button-line-bottom { 55 | @include mod-button-set-line(bottom); 56 | } 57 | li a { 58 | @include display(block); 59 | @include text-align(left); 60 | @include text-colour($black-base); 61 | text-decoration: none; 62 | vertical-align: middle; 63 | .rocket-no-touch &:hover { 64 | @include background-colour(darken($grey-x-light, 3%)); 65 | } 66 | } 67 | } 68 | 69 | // Set line 70 | @mixin mod-button-set-line($position: top) { 71 | // Determine where the line goes 72 | @if $position == top { 73 | @include border-t($grey-light); 74 | } 75 | @else if $position == bottom { 76 | @include border-b($grey-light); 77 | } 78 | } 79 | 80 | // Drop-down position 81 | @mixin drop-down-position($spacing, $link-height, $font-size) { 82 | .mod-button-arrow { 83 | @include margin-l($spacing / 2); 84 | } 85 | ul { 86 | @include margin-l(-$spacing); 87 | } 88 | li a { 89 | @include padding-h($spacing); 90 | @include height($link-height); 91 | @include text-line-height($link-height); 92 | @include text-size($font-size); 93 | } 94 | } 95 | 96 | // Drop-down link hover 97 | @mixin drop-down-link-hover($colour, $lighten: 0%) { 98 | // Colour 99 | @if lightness($colour) < 68% { 100 | @include text-colour($white); 101 | } 102 | // Check saturations 103 | @if saturation($colour) > 0% { 104 | @if saturation($colour) > 38% { 105 | @include background-colour(lighten(saturate($colour, 8%), $lighten)); 106 | } 107 | @else{ 108 | @include background-colour(lighten(saturate($colour, 30%), $lighten)); 109 | } 110 | } 111 | @else { 112 | @include background-colour(lighten($colour, $lighten)); 113 | } 114 | 115 | } 116 | -------------------------------------------------------------------------------- /build/sass/module/_loader.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | $loader-size: 28px; 6 | $loader-size-small: $loader-size - 10px; 7 | $loader-size-large: $loader-size + 8px; 8 | $loader-size-half: -$loader-size / 2; 9 | $loader-size-half-small: -$loader-size-small / 2; 10 | $loader-size-half-large: -$loader-size-large / 2; 11 | 12 | @mixin mod-button-loader() { 13 | span { 14 | @include position(relative); 15 | @include opacity(1); 16 | @include animate(all); 17 | } 18 | .mod-button-loader { 19 | @include position(absolute, top 50% left 50% margin-left $loader-size-half margin-top $loader-size-half); 20 | @include square($loader-size); 21 | @include animate(all); 22 | } 23 | .mod-button-loader-circle { 24 | @include position(absolute); 25 | @include square($loader-size); 26 | @include border-radius(50%); 27 | @include border($white, 3px); 28 | @include opacity(0); 29 | } 30 | 31 | // Sizes 32 | &._mod-size-small { 33 | .mod-button-loader { 34 | @include position-set(margin-left $loader-size-half-small margin-top $loader-size-half-small); 35 | @include square($loader-size-small); 36 | } 37 | .mod-button-loader-circle { 38 | @include square($loader-size-small); 39 | @include border($white, 2px); 40 | } 41 | } 42 | &._mod-size-large, 43 | &._mod-size-x-large { 44 | .mod-button-loader { 45 | @include position-set(margin-left $loader-size-half-large margin-top $loader-size-half-large); 46 | @include square($loader-size-large); 47 | } 48 | .mod-button-loader-circle { 49 | @include square($loader-size-large); 50 | @include border($white, 4px); 51 | } 52 | } 53 | 54 | // Main states 55 | &.is-loading { 56 | @include overflow(hidden); 57 | 58 | .mod-button-loader-circle { 59 | @include animation(modloaderpulse, 1.2s, infinite); 60 | } 61 | .mod-button-loader-circle:first-child { 62 | @include animation-delay(0.4s); 63 | } 64 | } 65 | 66 | // Reveals 67 | &._mod-reveal-appear.is-loading span { 68 | @include opacity(0); 69 | @include transform-scale-3d(0, 0, 0); 70 | } 71 | 72 | &._mod-reveal-slide-up { 73 | .mod-button-loader { 74 | @include transform-translate-y(50px); 75 | } 76 | span { 77 | @include position-set(top 0px); 78 | } 79 | } 80 | &._mod-reveal-slide-up.is-loading { 81 | .mod-button-loader { 82 | @include transform-translate-y(0px); 83 | } 84 | span { 85 | @include position-set(top -50px); 86 | } 87 | } 88 | 89 | &._mod-reveal-slide-down { 90 | .mod-button-loader { 91 | @include transform-translate-y(-50px); 92 | } 93 | span { 94 | @include position-set(top 0px); 95 | } 96 | } 97 | &._mod-reveal-slide-down.is-loading { 98 | .mod-button-loader { 99 | @include transform-translate-y(0px); 100 | } 101 | span { 102 | @include position-set(top 50px); 103 | } 104 | } 105 | } 106 | 107 | // Animation 108 | @include keyframes(modloaderpulse) { 109 | 0% { 110 | @include opacity(0); 111 | @include transform-scale-3d(0, 0, 0); 112 | } 113 | 25% { 114 | @include opacity(1); 115 | } 116 | 100% { 117 | @include opacity(0); 118 | @include transform-scale-3d(1, 1, 1); 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /build/sass/module/_setup.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Font face 6 | @font-face { 7 | font-family: 'rocket-button'; 8 | src:url('#{$font-face-rocket-button}/icomoon.eot?c4hmew'); 9 | src:url('#{$font-face-rocket-button}/icomoon.eot?#iefixc4hmew') format('embedded-opentype'), 10 | url('#{$font-face-rocket-button}/icomoon.woff?c4hmew') format('woff'), 11 | url('#{$font-face-rocket-button}/icomoon.ttf?c4hmew') format('truetype'), 12 | url('#{$font-face-rocket-button}/icomoon.svg?c4hmew#icomoon') format('svg'); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | // Button setup 18 | @mixin mod-button-setup { 19 | @include position(relative); 20 | @include display(inline-block); 21 | @include text-align(center); 22 | @include text-colour-with-visited(lighten(#000, 40%)); 23 | @include text-decoration(none); 24 | @include vertical-align(middle); 25 | @include border-no(); 26 | @include background-colour($grey-light); 27 | @include transform-scale-3d(1, 1, 1); 28 | @include animate(all); 29 | outline: none; 30 | -webkit-appearance: none; 31 | 32 | .rocket-no-touch &:hover { 33 | @include cursor(pointer); 34 | @include background-colour($grey-x-light); 35 | } 36 | .rocket-no-touch &.is-loading:hover { 37 | @include cursor(not-allowed); 38 | } 39 | &:active:not(.has-dropdown):not([disabled]) { 40 | @include transform-scale-3d(0.9, 0.9, 0.9); 41 | } 42 | .mod-button-arrow { 43 | @include display(inline-block); 44 | @include height(10px); 45 | @include width(12px); 46 | @include text-line-height(10px); 47 | speak: none; 48 | font-family: 'rocket-button'; 49 | font-style: normal; 50 | font-weight: normal; 51 | font-variant: normal; 52 | text-transform: none; 53 | -webkit-font-smoothing: antialiased; 54 | -moz-osx-font-smoothing: grayscale; 55 | &:before { 56 | content: "\f107"; 57 | } 58 | } 59 | 60 | > ul { 61 | @include opacity(0); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /build/sass/module/_shape.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Button shape 6 | @mixin mod-button-shape($shape: rounded) { 7 | @if $shape == pill { 8 | @include border-radius(100px); 9 | } 10 | @else if $shape == square { 11 | @include border-radius(0px); 12 | } 13 | @else { 14 | @include border-radius(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /build/sass/module/_size.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Variables 6 | $btn-size-s: 30px; 7 | $btn-size-n: 44px; 8 | $btn-size-l: 54px; 9 | $btn-size-xl: 68px; 10 | $btn-padding-s: 14px; 11 | $btn-padding-n: 24px; 12 | $btn-padding-l: 32px; 13 | $btn-padding-xl: 38px; 14 | $btn-text-s: 12px; 15 | $btn-text-n: 14px; 16 | $btn-text-l: 16px; 17 | $btn-text-xl: 18px; 18 | $drp-height: 34px; 19 | $drp-height-xl: 40px; 20 | 21 | // Button size 22 | @mixin mod-button-size-custom($height: $btn-size-n, $padding: $btn-padding-n, $font-size: $btn-text-n) { 23 | @include padding-h($padding); 24 | @include padding-v(0px); 25 | @include height($height); 26 | @include text-line-height($height); 27 | @include text-size($font-size); 28 | } 29 | 30 | @mixin mod-button-size($size) { 31 | @if $size == small { 32 | @include mod-button-size-custom($btn-size-s, $btn-padding-s, $btn-text-s); 33 | @include drop-down-position($btn-padding-s, $drp-height, 11px); 34 | } 35 | @else if $size == large { 36 | @include mod-button-size-custom($btn-size-l, $btn-padding-l, $btn-text-l); 37 | @include drop-down-position($btn-padding-l, $drp-height, 15px); 38 | } 39 | @else if $size == x-large { 40 | @include mod-button-size-custom($btn-size-xl, $btn-padding-xl, $btn-text-xl); 41 | @include drop-down-position($btn-padding-xl, $drp-height-xl, 15px); 42 | } 43 | @else { 44 | @include mod-button-size-custom(); 45 | @include drop-down-position($btn-padding-n, $drp-height, 13px); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /build/sass/module/_style.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author Chris Humboldt 3 | **/ 4 | 5 | // Variables 6 | $lightness-threshold: 68%; 7 | $lightness-threshold-line: 98%; 8 | 9 | // Button style 10 | @mixin mod-button-style($style, $colour, $border-size: 1px, $lighten: 5%) { 11 | @if $style == gradient { 12 | // Setup 13 | @if lightness($colour) < $lightness-threshold { 14 | @include text-colour-with-visited($white); 15 | } 16 | 17 | // Gradient 18 | $top-colour: lighten($colour, 6%); 19 | $bottom-colour: darken($colour, 4%); 20 | @include gradient-v($top-colour, $bottom-colour); 21 | 22 | // Drop-down link hover 23 | .rocket-no-touch &.has-dropdown ul li a:hover { 24 | @include drop-down-link-hover($colour); 25 | } 26 | } 27 | @else if $style == line { 28 | // Setup 29 | @if lightness($colour) < $lightness-threshold-line { 30 | @include text-colour-with-visited($colour); 31 | } 32 | @else { 33 | @include text-colour-with-visited($white); 34 | } 35 | background: transparent; 36 | @include border($colour, $border-size); 37 | 38 | // Loader 39 | .mod-button-loader-circle { 40 | @include border($colour); 41 | } 42 | &.is-loading:hover .mod-button-loader-circle { 43 | @include border($white); 44 | } 45 | 46 | // States 47 | .rocket-no-touch &:hover { 48 | // Check lightness 49 | @if lightness($colour) > 80% { 50 | @include text-colour($grey); 51 | } 52 | @else { 53 | @include text-colour($white); 54 | } 55 | // Check saturations 56 | @if saturation($colour) > 0% { 57 | @if saturation($colour) > 50% { 58 | @include background-colour(lighten(saturate($colour, 8%), $lighten)); 59 | @include border(lighten(saturate($colour, 8%), $lighten), $border-size); 60 | } 61 | @else{ 62 | @include background-colour(lighten($colour, $lighten)); 63 | @include border(lighten($colour, $lighten), $border-size); 64 | } 65 | } 66 | @else { 67 | @include background-colour(lighten($colour, $lighten)); 68 | @include border(lighten($colour, $lighten), $border-size); 69 | } 70 | } 71 | 72 | // Drop-down link hover 73 | .rocket-no-touch &.has-dropdown ul li a:hover { 74 | @include drop-down-link-hover($colour, $lighten); 75 | } 76 | } 77 | // Flat - Also the default 78 | @else { 79 | // Setup 80 | @if lightness($colour) < $lightness-threshold { 81 | @include text-colour-with-visited($white); 82 | } 83 | @include background-color($colour); 84 | 85 | // States 86 | .rocket-no-touch &:hover { 87 | // Check saturations 88 | @if saturation($colour) > 0% { 89 | @if saturation($colour) > 50% { 90 | @include background-colour(lighten(saturate($colour, 8%), $lighten)); 91 | } 92 | @else{ 93 | @include background-colour(lighten($colour, $lighten)); 94 | } 95 | } 96 | @else { 97 | @include background-colour(lighten($colour, $lighten)); 98 | } 99 | } 100 | 101 | // Drop-down link hover 102 | .rocket-no-touch &.has-dropdown ul li a:hover { 103 | @include drop-down-link-hover($colour, $lighten); 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /build/sass/module/_utilities.scss: -------------------------------------------------------------------------------- 1 | /** 2 | @author marnen 3 | **/ 4 | 5 | @mixin text-colour-with-visited($colour) { 6 | @include text-colour($colour); 7 | 8 | &:visited { 9 | @include text-colour($colour); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /cockpit.json: -------------------------------------------------------------------------------- 1 | { 2 | "build": [{ 3 | "name": "button", 4 | "js": ["~/button.js"], 5 | "css": ["~/button.scss"] 6 | }] 7 | } 8 | -------------------------------------------------------------------------------- /css/button.min.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes modloaderpulse{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(0,0,0);-o-transform:scale3d(0,0,0);-moz-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}25%{opacity:1;filter:alpha(opacity=100)}100%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-moz-keyframes modloaderpulse{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(0,0,0);-o-transform:scale3d(0,0,0);-moz-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}25%{opacity:1;filter:alpha(opacity=100)}100%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes modloaderpulse{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(0,0,0);-o-transform:scale3d(0,0,0);-moz-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}25%{opacity:1;filter:alpha(opacity=100)}100%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@font-face{font-family:'rocket-button';src:url("icon-font-rocket-button/icomoon.eot?c4hmew");src:url("icon-font-rocket-button/icomoon.eot?#iefixc4hmew") format("embedded-opentype"),url("icon-font-rocket-button/icomoon.woff?c4hmew") format("woff"),url("icon-font-rocket-button/icomoon.ttf?c4hmew") format("truetype"),url("icon-font-rocket-button/icomoon.svg?c4hmew#icomoon") format("svg");font-weight:normal;font-style:normal}.mod-button{position:relative;display:inline-block;text-align:center;color:#666;text-decoration:none;vertical-align:middle;border:medium none #000;background-color:#e6e6e6;-webkit-transform:scale3d(1,1,1);-o-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:all .2s ease-out 0s;-moz-transition:all .2s ease-out 0s;-ms-transition:all .2s ease-out 0s;transition:all .2s ease-out 0s;outline:0;-webkit-appearance:none;padding-left:24px;padding-right:24px;padding-top:0;padding-bottom:0;height:44px;line-height:44px;line-height:2.75rem;font-size:14px;font-size:.875rem;border-radius:2px;-ms-border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-clip:padding-box}.mod-button:visited{color:#666}.rocket-no-touch .mod-button:hover{cursor:pointer;background-color:#f5f5f5}.rocket-no-touch .mod-button.is-loading:hover{cursor:not-allowed}.mod-button:active:not(.has-dropdown):not([disabled]){-webkit-transform:scale3d(.9,.9,.9);-o-transform:scale3d(.9,.9,.9);-moz-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}.mod-button .mod-button-arrow{display:inline-block;height:10px;width:12px;line-height:10px;line-height:.625rem;speak:none;font-family:'rocket-button';font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mod-button .mod-button-arrow:before{content:"\f107"}.mod-button>ul{opacity:0;filter:alpha(opacity=0)}.mod-button .mod-button-arrow{margin-left:12px}.mod-button ul{margin-left:-24px}.mod-button li a{padding-left:24px;padding-right:24px;height:34px;line-height:34px;line-height:2.125rem;font-size:13px;font-size:.8125rem}.mod-button span{position:relative;opacity:1;filter:alpha(opacity=100);-webkit-transition:all .2s ease-out 0s;-moz-transition:all .2s ease-out 0s;-ms-transition:all .2s ease-out 0s;transition:all .2s ease-out 0s}.mod-button .mod-button-loader{position:absolute;top:50%;left:50%;margin-top:-14px;margin-left:-14px;width:28px;height:28px;line-height:28px;text-align:center;-webkit-transition:all .2s ease-out 0s;-moz-transition:all .2s ease-out 0s;-ms-transition:all .2s ease-out 0s;transition:all .2s ease-out 0s}.mod-button .mod-button-loader-circle{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;-ms-border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-clip:padding-box;border:3px solid #fff;opacity:0;filter:alpha(opacity=0)}.mod-button._mod-size-small .mod-button-loader{margin-top:-9px;margin-left:-9px;width:18px;height:18px;line-height:18px;text-align:center}.mod-button._mod-size-small .mod-button-loader-circle{width:18px;height:18px;line-height:18px;text-align:center;border:2px solid #fff}.mod-button._mod-size-large .mod-button-loader,.mod-button._mod-size-x-large .mod-button-loader{margin-top:-18px;margin-left:-18px;width:36px;height:36px;line-height:36px;text-align:center}.mod-button._mod-size-large .mod-button-loader-circle,.mod-button._mod-size-x-large .mod-button-loader-circle{width:36px;height:36px;line-height:36px;text-align:center;border:4px solid #fff}.mod-button.is-loading{overflow:hidden}.mod-button.is-loading .mod-button-loader-circle{-webkit-animation-name:modloaderpulse;-moz-animation-name:modloaderpulse;-ms-animation-name:modloaderpulse;animation-name:modloaderpulse;-webkit-animation-duration:1.2s;-moz-animation-duration:1.2s;-ms-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite}.mod-button.is-loading .mod-button-loader-circle:first-child{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s}.mod-button._mod-reveal-appear.is-loading span{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(0,0,0);-o-transform:scale3d(0,0,0);-moz-transform:scale3d(0,0,0);transform:scale3d(0,0,0)}.mod-button._mod-reveal-slide-up .mod-button-loader{-webkit-transform:translateY(50px);-o-transform:translateY(50px);-moz-transform:translateY(50px);transform:translateY(50px)}.mod-button._mod-reveal-slide-up span{top:0}.mod-button._mod-reveal-slide-up.is-loading .mod-button-loader{-webkit-transform:translateY(0px);-o-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px)}.mod-button._mod-reveal-slide-up.is-loading span{top:-50px}.mod-button._mod-reveal-slide-down .mod-button-loader{-webkit-transform:translateY(-50px);-o-transform:translateY(-50px);-moz-transform:translateY(-50px);transform:translateY(-50px)}.mod-button._mod-reveal-slide-down span{top:0}.mod-button._mod-reveal-slide-down.is-loading .mod-button-loader{-webkit-transform:translateY(0px);-o-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px)}.mod-button._mod-reveal-slide-down.is-loading span{top:50px}.mod-button.has-dropdown{z-index:2}.mod-button ul{position:absolute;padding:0;margin-top:4px;list-style:none;background-color:#fff;border-radius:2px;-ms-border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-clip:padding-box;box-shadow:0 1px 3px rgba(0,0,0,0.15);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.15);z-index:2;opacity:0;filter:alpha(opacity=0);visibility:hidden}.mod-button ul.is-open{opacity:1;filter:alpha(opacity=100);visibility:visible;-webkit-transition:all .4s ease-out 0s;-moz-transition:all .4s ease-out 0s;-ms-transition:all .4s ease-out 0s;transition:all .4s ease-out 0s}.mod-button li{padding:0;margin:0}.mod-button li:first-child a{border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;background-clip:padding-box}.mod-button li:last-child a{border-radius:0 0 2px 2px;-ms-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-webkit-border-radius:0 0 2px 2px;background-clip:padding-box}.mod-button li.mod-button-line-top{border-top:1px solid #e6e6e6}.mod-button li.mod-button-line-bottom{border-bottom:1px solid #e6e6e6}.mod-button li a{display:block;text-align:left;color:#383838;text-decoration:none;vertical-align:middle}.rocket-no-touch .mod-button li a:hover{background-color:#ededed}.mod-button._mod-size-small{padding-left:14px;padding-right:14px;padding-top:0;padding-bottom:0;height:30px;line-height:30px;line-height:1.875rem;font-size:12px;font-size:.75rem}.mod-button._mod-size-small .mod-button-arrow{margin-left:7px}.mod-button._mod-size-small ul{margin-left:-14px}.mod-button._mod-size-small li a{padding-left:14px;padding-right:14px;height:34px;line-height:34px;line-height:2.125rem;font-size:11px;font-size:.6875rem}.mod-button._mod-size-large{padding-left:32px;padding-right:32px;padding-top:0;padding-bottom:0;height:54px;line-height:54px;line-height:3.375rem;font-size:16px;font-size:1rem}.mod-button._mod-size-large .mod-button-arrow{margin-left:16px}.mod-button._mod-size-large ul{margin-left:-32px}.mod-button._mod-size-large li a{padding-left:32px;padding-right:32px;height:34px;line-height:34px;line-height:2.125rem;font-size:15px;font-size:.9375rem}.mod-button._mod-size-x-large{padding-left:38px;padding-right:38px;padding-top:0;padding-bottom:0;height:68px;line-height:68px;line-height:4.25rem;font-size:18px;font-size:1.125rem}.mod-button._mod-size-x-large .mod-button-arrow{margin-left:19px}.mod-button._mod-size-x-large ul{margin-left:-38px}.mod-button._mod-size-x-large li a{padding-left:38px;padding-right:38px;height:40px;line-height:40px;line-height:2.5rem;font-size:15px;font-size:.9375rem}.mod-button._mod-shape-square{border-radius:0;-ms-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-clip:padding-box}.mod-button._mod-shape-pill{border-radius:100px;-ms-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;background-clip:padding-box}.mod-button._mod-style-flat-grey{color:#fff;background-color:gray}.mod-button._mod-style-flat-grey:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-grey:hover{background-color:#8c8c8c}.rocket-no-touch .mod-button._mod-style-flat-grey.has-dropdown ul li a:hover{color:#fff;background-color:#af6a6a}.mod-button._mod-style-flat-black{color:#fff;background-color:#383838}.mod-button._mod-style-flat-black:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-black:hover{background-color:#454545}.rocket-no-touch .mod-button._mod-style-flat-black.has-dropdown ul li a:hover{color:#fff;background-color:#5a3030}.mod-button._mod-style-flat-white{background-color:#fff}.rocket-no-touch .mod-button._mod-style-flat-white:hover{background-color:#fff}.rocket-no-touch .mod-button._mod-style-flat-white.has-dropdown ul li a:hover{background-color:#fff}.mod-button._mod-style-flat-aqua{color:#fff;background-color:#1abc9c}.mod-button._mod-style-flat-aqua:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-aqua:hover{background-color:#14dcb4}.rocket-no-touch .mod-button._mod-style-flat-aqua.has-dropdown ul li a:hover{color:#fff;background-color:#14dcb4}.mod-button._mod-style-flat-blue{color:#fff;background-color:#3498db}.mod-button._mod-style-flat-blue:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-blue:hover{background-color:#41a5e7}.rocket-no-touch .mod-button._mod-style-flat-blue.has-dropdown ul li a:hover{color:#fff;background-color:#41a5e7}.mod-button._mod-style-flat-green{color:#fff;background-color:#2ecc71}.mod-button._mod-style-flat-green:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-green:hover{background-color:#36dd7d}.rocket-no-touch .mod-button._mod-style-flat-green.has-dropdown ul li a:hover{color:#fff;background-color:#36dd7d}.mod-button._mod-style-flat-orange{color:#fff;background-color:#f39c12}.mod-button._mod-style-flat-orange:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-orange:hover{background-color:#fda821}.rocket-no-touch .mod-button._mod-style-flat-orange.has-dropdown ul li a:hover{color:#fff;background-color:#fda821}.mod-button._mod-style-flat-pink{color:#fff;background-color:#eb5367}.mod-button._mod-style-flat-pink:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-pink:hover{background-color:#f46376}.rocket-no-touch .mod-button._mod-style-flat-pink.has-dropdown ul li a:hover{color:#fff;background-color:#f46376}.mod-button._mod-style-flat-purple{color:#fff;background-color:#9b59b6}.mod-button._mod-style-flat-purple:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-purple:hover{background-color:#a66bbe}.rocket-no-touch .mod-button._mod-style-flat-purple.has-dropdown ul li a:hover{color:#fff;background-color:#a962c6}.mod-button._mod-style-flat-red{color:#fff;background-color:#e74c3c}.mod-button._mod-style-flat-red:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-red:hover{background-color:#f25b4b}.rocket-no-touch .mod-button._mod-style-flat-red.has-dropdown ul li a:hover{color:#fff;background-color:#f25b4b}.mod-button._mod-style-flat-yellow{color:#fff;background-color:#f1c40f}.mod-button._mod-style-flat-yellow:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-flat-yellow:hover{background-color:#fccf1e}.rocket-no-touch .mod-button._mod-style-flat-yellow.has-dropdown ul li a:hover{color:#fff;background-color:#fccf1e}.mod-button._mod-style-gradient-grey{color:#fff;background:#8f8f8f;background:linear-gradient(to bottom,#8f8f8f 0,#757575 100%);background:-moz-linear-gradient(top,#8f8f8f 0,#757575 100%);background:-ms-linear-gradient(top,#8f8f8f 0,#757575 100%);background:-o-linear-gradient(top,#8f8f8f 0,#757575 100%);background:-webkit-linear-gradient(top,#8f8f8f 0,#757575 100%)}.mod-button._mod-style-gradient-grey:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-grey.has-dropdown ul li a:hover{color:#fff;background-color:#a65959}.mod-button._mod-style-gradient-black{color:#fff;background:#474747;background:linear-gradient(to bottom,#474747 0,#2e2e2e 100%);background:-moz-linear-gradient(top,#474747 0,#2e2e2e 100%);background:-ms-linear-gradient(top,#474747 0,#2e2e2e 100%);background:-o-linear-gradient(top,#474747 0,#2e2e2e 100%);background:-webkit-linear-gradient(top,#474747 0,#2e2e2e 100%)}.mod-button._mod-style-gradient-black:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-black.has-dropdown ul li a:hover{color:#fff;background-color:#492727}.mod-button._mod-style-gradient-white{background:#fff;background:linear-gradient(to bottom,#fff 0,#f5f5f5 100%);background:-moz-linear-gradient(top,#fff 0,#f5f5f5 100%);background:-ms-linear-gradient(top,#fff 0,#f5f5f5 100%);background:-o-linear-gradient(top,#fff 0,#f5f5f5 100%);background:-webkit-linear-gradient(top,#fff 0,#f5f5f5 100%)}.rocket-no-touch .mod-button._mod-style-gradient-white.has-dropdown ul li a:hover{background-color:#fff}.mod-button._mod-style-gradient-aqua{color:#fff;background:#1ed7b2;background:linear-gradient(to bottom,#1ed7b2 0,#18aa8d 100%);background:-moz-linear-gradient(top,#1ed7b2 0,#18aa8d 100%);background:-ms-linear-gradient(top,#1ed7b2 0,#18aa8d 100%);background:-o-linear-gradient(top,#1ed7b2 0,#18aa8d 100%);background:-webkit-linear-gradient(top,#1ed7b2 0,#18aa8d 100%)}.mod-button._mod-style-gradient-aqua:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-aqua.has-dropdown ul li a:hover{color:#fff;background-color:#11c5a1}.mod-button._mod-style-gradient-blue{color:#fff;background:#4ea5e0;background:linear-gradient(to bottom,#4ea5e0 0,#268fd5 100%);background:-moz-linear-gradient(top,#4ea5e0 0,#268fd5 100%);background:-ms-linear-gradient(top,#4ea5e0 0,#268fd5 100%);background:-o-linear-gradient(top,#4ea5e0 0,#268fd5 100%);background:-webkit-linear-gradient(top,#4ea5e0 0,#268fd5 100%)}.mod-button._mod-style-gradient-blue:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-blue.has-dropdown ul li a:hover{color:#fff;background-color:#2a9ae5}.mod-button._mod-style-gradient-green{color:#fff;background:#44d581;background:linear-gradient(to bottom,#44d581 0,#2abb68 100%);background:-moz-linear-gradient(top,#44d581 0,#2abb68 100%);background:-ms-linear-gradient(top,#44d581 0,#2abb68 100%);background:-o-linear-gradient(top,#44d581 0,#2abb68 100%);background:-webkit-linear-gradient(top,#44d581 0,#2abb68 100%)}.mod-button._mod-style-gradient-green:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-green.has-dropdown ul li a:hover{color:#fff;background-color:#24d66f}.mod-button._mod-style-gradient-orange{color:#fff;background:#f4a82f;background:linear-gradient(to bottom,#f4a82f 0,#e5910c 100%);background:-moz-linear-gradient(top,#f4a82f 0,#e5910c 100%);background:-ms-linear-gradient(top,#f4a82f 0,#e5910c 100%);background:-o-linear-gradient(top,#f4a82f 0,#e5910c 100%);background:-webkit-linear-gradient(top,#f4a82f 0,#e5910c 100%)}.mod-button._mod-style-gradient-orange:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-orange.has-dropdown ul li a:hover{color:#fff;background-color:#fd9e08}.mod-button._mod-style-gradient-pink{color:#fff;background:#ee6e7f;background:linear-gradient(to bottom,#ee6e7f 0,#e94157 100%);background:-moz-linear-gradient(top,#ee6e7f 0,#e94157 100%);background:-ms-linear-gradient(top,#ee6e7f 0,#e94157 100%);background:-o-linear-gradient(top,#ee6e7f 0,#e94157 100%);background:-webkit-linear-gradient(top,#ee6e7f 0,#e94157 100%)}.mod-button._mod-style-gradient-pink:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-pink.has-dropdown ul li a:hover{color:#fff;background-color:#f34b61}.mod-button._mod-style-gradient-purple{color:#fff;background:#a86ebf;background:linear-gradient(to bottom,#a86ebf 0,#924dae 100%);background:-moz-linear-gradient(top,#a86ebf 0,#924dae 100%);background:-ms-linear-gradient(top,#a86ebf 0,#924dae 100%);background:-o-linear-gradient(top,#a86ebf 0,#924dae 100%);background:-webkit-linear-gradient(top,#a86ebf 0,#924dae 100%)}.mod-button._mod-style-gradient-purple:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-purple.has-dropdown ul li a:hover{color:#fff;background-color:#9f4fc0}.mod-button._mod-style-gradient-red{color:#fff;background:#ea6557;background:linear-gradient(to bottom,#ea6557 0,#e53b2a 100%);background:-moz-linear-gradient(top,#ea6557 0,#e53b2a 100%);background:-ms-linear-gradient(top,#ea6557 0,#e53b2a 100%);background:-o-linear-gradient(top,#ea6557 0,#e53b2a 100%);background:-webkit-linear-gradient(top,#ea6557 0,#e53b2a 100%)}.mod-button._mod-style-gradient-red:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-red.has-dropdown ul li a:hover{color:#fff;background-color:#f04533}.mod-button._mod-style-gradient-yellow{color:#fff;background:#f3cb2c;background:linear-gradient(to bottom,#f3cb2c 0,#dfb50d 100%);background:-moz-linear-gradient(top,#f3cb2c 0,#dfb50d 100%);background:-ms-linear-gradient(top,#f3cb2c 0,#dfb50d 100%);background:-o-linear-gradient(top,#f3cb2c 0,#dfb50d 100%);background:-webkit-linear-gradient(top,#f3cb2c 0,#dfb50d 100%)}.mod-button._mod-style-gradient-yellow:visited{color:#fff}.rocket-no-touch .mod-button._mod-style-gradient-yellow.has-dropdown ul li a:hover{color:#fff;background-color:#fbca05}.mod-button._mod-style-line-grey{color:gray;background:transparent;border:1px solid gray}.mod-button._mod-style-line-grey:visited{color:gray}.mod-button._mod-style-line-grey .mod-button-loader-circle{border:1px solid gray}.mod-button._mod-style-line-grey.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-grey:hover{color:#fff;background-color:#8c8c8c;border:1px solid #8c8c8c}.rocket-no-touch .mod-button._mod-style-line-grey.has-dropdown ul li a:hover{color:#fff;background-color:#af6a6a}.mod-button._mod-style-line-black{color:#383838;background:transparent;border:1px solid #383838}.mod-button._mod-style-line-black:visited{color:#383838}.mod-button._mod-style-line-black .mod-button-loader-circle{border:1px solid #383838}.mod-button._mod-style-line-black.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-black:hover{color:#fff;background-color:#454545;border:1px solid #454545}.rocket-no-touch .mod-button._mod-style-line-black.has-dropdown ul li a:hover{color:#fff;background-color:#5a3030}.mod-button._mod-style-line-white{color:#fff;background:transparent;border:1px solid #fff}.mod-button._mod-style-line-white:visited{color:#fff}.mod-button._mod-style-line-white .mod-button-loader-circle{border:1px solid #fff}.mod-button._mod-style-line-white.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-white:hover{color:gray;background-color:#fff;border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-white.has-dropdown ul li a:hover{background-color:#fff}.mod-button._mod-style-line-aqua{color:#1abc9c;background:transparent;border:1px solid #1abc9c}.mod-button._mod-style-line-aqua:visited{color:#1abc9c}.mod-button._mod-style-line-aqua .mod-button-loader-circle{border:1px solid #1abc9c}.mod-button._mod-style-line-aqua.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-aqua:hover{color:#fff;background-color:#14dcb4;border:1px solid #14dcb4}.rocket-no-touch .mod-button._mod-style-line-aqua.has-dropdown ul li a:hover{color:#fff;background-color:#14dcb4}.mod-button._mod-style-line-blue{color:#3498db;background:transparent;border:1px solid #3498db}.mod-button._mod-style-line-blue:visited{color:#3498db}.mod-button._mod-style-line-blue .mod-button-loader-circle{border:1px solid #3498db}.mod-button._mod-style-line-blue.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-blue:hover{color:#fff;background-color:#41a5e7;border:1px solid #41a5e7}.rocket-no-touch .mod-button._mod-style-line-blue.has-dropdown ul li a:hover{color:#fff;background-color:#41a5e7}.mod-button._mod-style-line-green{color:#2ecc71;background:transparent;border:1px solid #2ecc71}.mod-button._mod-style-line-green:visited{color:#2ecc71}.mod-button._mod-style-line-green .mod-button-loader-circle{border:1px solid #2ecc71}.mod-button._mod-style-line-green.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-green:hover{color:#fff;background-color:#36dd7d;border:1px solid #36dd7d}.rocket-no-touch .mod-button._mod-style-line-green.has-dropdown ul li a:hover{color:#fff;background-color:#36dd7d}.mod-button._mod-style-line-orange{color:#f39c12;background:transparent;border:1px solid #f39c12}.mod-button._mod-style-line-orange:visited{color:#f39c12}.mod-button._mod-style-line-orange .mod-button-loader-circle{border:1px solid #f39c12}.mod-button._mod-style-line-orange.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-orange:hover{color:#fff;background-color:#fda821;border:1px solid #fda821}.rocket-no-touch .mod-button._mod-style-line-orange.has-dropdown ul li a:hover{color:#fff;background-color:#fda821}.mod-button._mod-style-line-pink{color:#eb5367;background:transparent;border:1px solid #eb5367}.mod-button._mod-style-line-pink:visited{color:#eb5367}.mod-button._mod-style-line-pink .mod-button-loader-circle{border:1px solid #eb5367}.mod-button._mod-style-line-pink.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-pink:hover{color:#fff;background-color:#f46376;border:1px solid #f46376}.rocket-no-touch .mod-button._mod-style-line-pink.has-dropdown ul li a:hover{color:#fff;background-color:#f46376}.mod-button._mod-style-line-purple{color:#9b59b6;background:transparent;border:1px solid #9b59b6}.mod-button._mod-style-line-purple:visited{color:#9b59b6}.mod-button._mod-style-line-purple .mod-button-loader-circle{border:1px solid #9b59b6}.mod-button._mod-style-line-purple.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-purple:hover{color:#fff;background-color:#a66bbe;border:1px solid #a66bbe}.rocket-no-touch .mod-button._mod-style-line-purple.has-dropdown ul li a:hover{color:#fff;background-color:#a962c6}.mod-button._mod-style-line-red{color:#e74c3c;background:transparent;border:1px solid #e74c3c}.mod-button._mod-style-line-red:visited{color:#e74c3c}.mod-button._mod-style-line-red .mod-button-loader-circle{border:1px solid #e74c3c}.mod-button._mod-style-line-red.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-red:hover{color:#fff;background-color:#f25b4b;border:1px solid #f25b4b}.rocket-no-touch .mod-button._mod-style-line-red.has-dropdown ul li a:hover{color:#fff;background-color:#f25b4b}.mod-button._mod-style-line-yellow{color:#f1c40f;background:transparent;border:1px solid #f1c40f}.mod-button._mod-style-line-yellow:visited{color:#f1c40f}.mod-button._mod-style-line-yellow .mod-button-loader-circle{border:1px solid #f1c40f}.mod-button._mod-style-line-yellow.is-loading:hover .mod-button-loader-circle{border:1px solid #fff}.rocket-no-touch .mod-button._mod-style-line-yellow:hover{color:#fff;background-color:#fccf1e;border:1px solid #fccf1e}.rocket-no-touch .mod-button._mod-style-line-yellow.has-dropdown ul li a:hover{color:#fff;background-color:#fccf1e} -------------------------------------------------------------------------------- /css/icon-font-rocket-button/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrishumboldt/Rocket-Button/5a1dcabf31fc72d5b0b27d5d4e1a53714677755a/css/icon-font-rocket-button/icomoon.eot -------------------------------------------------------------------------------- /css/icon-font-rocket-button/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /css/icon-font-rocket-button/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrishumboldt/Rocket-Button/5a1dcabf31fc72d5b0b27d5d4e1a53714677755a/css/icon-font-rocket-button/icomoon.ttf -------------------------------------------------------------------------------- /css/icon-font-rocket-button/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chrishumboldt/Rocket-Button/5a1dcabf31fc72d5b0b27d5d4e1a53714677755a/css/icon-font-rocket-button/icomoon.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rocket Button Module 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | You need to run "npm install" and include the neccessary demo files in order to view this file. 17 |
18 | 19 | 198 | 199 | 200 | 201 | 202 | 203 | 248 | 249 | 250 | 251 | -------------------------------------------------------------------------------- /js/button.min.js: -------------------------------------------------------------------------------- 1 | "use strict";Rocket.defaults.button={dropdown:{target:".mod-button"},loader:{reveal:"appear",timeout:0}},Rocket.button=function(){var o={dropDownClassName:"has-dropdown",docClick:!1},t={hide:{allDropDowns:function(){for(var t=Rocket.dom.select("."+o.dropDownClassName+" ul.is-open"),e=0,n=t.length;e0&&setTimeout(function(){t.hide.loader.call(e)},1e3*n),{button:e,hide:t.hide.loader.bind(e),show:t.show.loader.bind(e)}}},n={dropdown:function(){var o=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target,t=void 0===o?Rocket.defaults.button.dropdown.target:o,n=new Array,d=Rocket.dom.select(t);if(!(d.length<=0))return d.forEach(function(o){n.push(e.dropdown(o))}),n},loader:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.element,n=void 0===t?null:t,d=o.parseEvent,i=void 0===d?null:d,r=o.reveal,a=void 0===r?Rocket.defaults.button.loader.reveal:r,l=o.target,s=void 0===l?null:l,u=o.timeout,c=void 0===u?Rocket.defaults.button.loader.timeout:u;if(i&&i.preventDefault(),n||s){var v=n||Rocket.dom.element(s);if(!Rocket.has.class(v,"is-loading")){if(!v.querySelector(".mod-button-loader")){var p="";p+='\n
\n
\n
\n
\n ',p+=""+v.innerHTML+"",v.innerHTML=p}return Rocket.classes.add(v,"_mod-reveal-"+a),e.loader({button:v,timeout:c})}}},setup:function(){o.docClick||(Rocket.event.add(document,"click",function(){t.hide.allDropDowns()}),o.docClick=!0)}};return n.setup(),{dropdown:n.dropdown,loader:n.loader}}(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rocket-button", 3 | "version": "6.2.1", 4 | "description": "A lightweight button module.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/chrishumboldt/Rocket-Button.git" 8 | }, 9 | "keywords": [ 10 | "Rocket", 11 | "Part", 12 | "Module", 13 | "Button", 14 | "Javascript", 15 | "SASS", 16 | "CSS" 17 | ], 18 | "author": "Chris Humboldt ", 19 | "license": "Apache-2.0", 20 | "bugs": { 21 | "url": "https://github.com/chrishumboldt/Rocket-Button/issues" 22 | }, 23 | "homepage": "https://github.com/chrishumboldt/Rocket-Button#readme", 24 | "engines": { 25 | "npm": "^3.0.0" 26 | }, 27 | "dependencies": { 28 | "rocket-propel": "^3.1.1", 29 | "rocket-tools": "^1.16.0" 30 | }, 31 | "devDependencies": { 32 | "rocket-demo": "^2.0.0" 33 | } 34 | } 35 | --------------------------------------------------------------------------------