diff --git a/demo/index.html b/demo/index.html index 32892a7..b3c1f81 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,8 +21,32 @@
- My first component - My second component + Button + Primary + Raised + Disabled + Dense + + menu + + +
+ + format_align_left + + + + format_align_center + + + + format_align_right + + + + format_align_justify + +
diff --git a/gulpfile.babel.js/tasks/browserify.js b/gulpfile.babel.js/tasks/browserify.js index f117a55..179b006 100644 --- a/gulpfile.babel.js/tasks/browserify.js +++ b/gulpfile.babel.js/tasks/browserify.js @@ -22,11 +22,9 @@ gulp.task('browserify', () => { let b = watchify(browserify(xtend(watchify.args, { debug: true, watch: true, - fast: true, fullPaths: true, keepAlive: true, detectGlobals: false, - ignoreWatch: true, noparse: ['node_modules/**/*.js'], entries: entry, transform: [ diff --git a/gulpfile.babel.js/tasks/watch.js b/gulpfile.babel.js/tasks/watch.js index 0543adf..da3123d 100644 --- a/gulpfile.babel.js/tasks/watch.js +++ b/gulpfile.babel.js/tasks/watch.js @@ -9,7 +9,7 @@ let watchConfig = { }; gulp.task('watch', ['browserSync'], () => { - watch(['.eslintrc', '.eslintignore'], watchConfig, () => { + watch(['.eslintrc', '.eslintignore'].concat(config.gulp.scripts, config.src.components), watchConfig, () => { runSequence('eslint-all'); }); diff --git a/package.json b/package.json index cc9db03..8de63ae 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "xtend": "^4.0.1" }, "dependencies": { - "vue": "^1.0.25", - "vue-ripple": "^1.0.2" + "vue": "^1.0.25" } } diff --git a/src/components/main.js b/src/components/main.js index 07dcac4..472dc37 100644 --- a/src/components/main.js +++ b/src/components/main.js @@ -1,15 +1,20 @@ import Vue from 'vue/dist/vue.min'; -import MdButton from './mdButton'; import MdInkRipple from './mdInkRipple'; +import MdButton from './mdButton'; +import MdIcon from './MdIcon'; -Vue.use(MdButton); Vue.use(MdInkRipple); +Vue.use(MdButton); +Vue.use(MdIcon); new Vue({ el: '#app', + data: { + disabled: false + }, methods: { - clickAction: () => { - console.log('Click Action'); + clickAction: function() { + this.disabled = !this.disabled; } } }); diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss index 18e644b..ceb6881 100644 --- a/src/components/mdButton/mdButton.scss +++ b/src/components/mdButton/mdButton.scss @@ -2,6 +2,9 @@ $button-width: 88px; $button-height: 36px; +$button-radius: 2px; + +$button-dense-height: 32px; $button-icon-size: 40px; @@ -9,7 +12,7 @@ $button-icon-size: 40px; min-width: $button-width; min-height: $button-height; margin: 6px 8px; - padding: 0 6px; + padding: 0 16px; display: inline-block; position: relative; align-items: center; @@ -19,9 +22,8 @@ $button-icon-size: 40px; outline: none; background: none; border: 0; - border-radius: 3px; - transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function, - background-color $swift-ease-out-duration $swift-ease-out-timing-function; + border-radius: $button-radius; + transition: $swift-ease-out; color: currentColor; font-family: inherit; font-size: 14px; @@ -39,18 +41,40 @@ $button-icon-size: 40px; outline: none; } - &:hover, - &:focus { - text-decoration: none; + &:hover { + &:not([disabled]) { + &:not(.md-raised) { + background-color: rgba(#999, .2); + text-decoration: none; + } + + &.md-raised { + background-color: rgba(#000, .12); + } + } } - &.ng-hide, - &.ng-leave { - transition: none; + &:active:not([disabled]) { + background-color: rgba(#999, .4); + } + + &[disabled] { + color: rgba(#000, .26); + cursor: default; + + &.md-raised { + background-color: rgba(#000, .12); + } } &.md-raised:not([disabled]) { - box-shadow: $material-shadow-z1; + box-shadow: $material-shadow-2dp; + } + + &.md-dense { + min-height: $button-dense-height; + line-height: $button-dense-height; + font-size: 13px; } &.md-icon-button { @@ -61,18 +85,17 @@ $button-icon-size: 40px; padding: 8px; border-radius: 50%; line-height: 24px; + + .md-ink-ripple { + border-radius: 50%; + } + + .md-ripple.md-active { + animation-duration: .9s; + } } /* - &.md-cornered { - border-radius: 0; - } - - &.md-icon { - padding: 0; - background: none; - } - &.md-fab { // Include the top/left/bottom/right fab positions @@ -107,28 +130,48 @@ $button-icon-size: 40px; width: $button-fab-mini-width; height: $button-fab-mini-height; } - - &.ng-hide, &.ng-leave { - transition: none; - } } - - &:not([disabled]) { - &.md-raised, - &.md-fab { - &.md-focused { - @include md-shadow-bottom-z-1(); - } - &:active { - @include md-shadow-bottom-z-2(); - } - } - } */ + */ .md-ink-ripple { - border-radius: 3px; + border-radius: $button-radius; background-clip: padding-box; overflow: hidden; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); } } + +.md-button-group { + width: auto; + display: flex; + + > .md-button { + margin: 0; + overflow: hidden; + border-width: 1px 0 1px 1px; + border-radius: 0; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + + &:first-child { + border-radius: 2px 0 0 2px; + } + + &:last-child { + border-right-width: 1px; + border-radius: 0 2px 2px 0; + } + + .md-ink-ripple { + border-radius: $button-radius; + } + } +} + +.md-button.md-icon-button, +.md-button.md-fab { + md-icon { + display: block; + } +} diff --git a/src/components/mdButton/mdButton.vue b/src/components/mdButton/mdButton.vue index bc32bd8..f765aa4 100644 --- a/src/components/mdButton/mdButton.vue +++ b/src/components/mdButton/mdButton.vue @@ -1,5 +1,5 @@ diff --git a/src/components/mdButton/mdLinkButton.vue b/src/components/mdButton/mdLinkButton.vue index 0f01ede..5a973a8 100644 --- a/src/components/mdButton/mdLinkButton.vue +++ b/src/components/mdButton/mdLinkButton.vue @@ -1,5 +1,5 @@ diff --git a/src/components/mdIcon/index.js b/src/components/mdIcon/index.js new file mode 100644 index 0000000..afe885f --- /dev/null +++ b/src/components/mdIcon/index.js @@ -0,0 +1,11 @@ +import './mdIcon.vue'; + +export default function install(Vue) { + Vue.elementDirective('md-icon', { + bind: function() { + Vue.nextTick(() => { + this.el.classList.add('material-icons'); + }); + } + }); +} diff --git a/src/components/mdIcon/mdIcon.scss b/src/components/mdIcon/mdIcon.scss new file mode 100644 index 0000000..89c1e2c --- /dev/null +++ b/src/components/mdIcon/mdIcon.scss @@ -0,0 +1,14 @@ +@import '../../stylesheets/variables.scss'; + +$icon-size: 24px; + +md-icon { + width: $icon-size; + min-width: $icon-size; + height: $icon-size; + min-height: $icon-size; + margin: auto; + display: inline-block; + fill: currentColor; + vertical-align: middle; +} diff --git a/src/components/mdIcon/mdIcon.vue b/src/components/mdIcon/mdIcon.vue new file mode 100644 index 0000000..0e6ac40 --- /dev/null +++ b/src/components/mdIcon/mdIcon.vue @@ -0,0 +1 @@ + diff --git a/src/components/mdInkRipple/index.js b/src/components/mdInkRipple/index.js index 30b2f83..b0460a7 100644 --- a/src/components/mdInkRipple/index.js +++ b/src/components/mdInkRipple/index.js @@ -5,12 +5,23 @@ export default function install(Vue) { let rippleClass = 'md-ripple'; let rippleActiveClass = 'md-active'; + let registeredMouseFunction; + + let unregisterMouseEvent = (element) => { + let ripple = element.querySelector('.' + rippleParentClass); + + if (ripple) { + ripple.parentNode.removeChild(ripple); + element.removeEventListener('mousedown', registeredMouseFunction); + } + }; + let registerMouseEvent = (element) => { Vue.nextTick(() => { let rect = element.getBoundingClientRect(); let ripple = element.querySelector('.' + rippleClass); - element.addEventListener('mousedown', function(event) { + registeredMouseFunction = function(event) { ripple.classList.remove(rippleActiveClass); let top = event.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; @@ -20,7 +31,10 @@ export default function install(Vue) { ripple.style.left = left + 'px'; ripple.classList.add(rippleActiveClass); - }); + }; + + element.removeEventListener('mousedown', registeredMouseFunction); + element.addEventListener('mousedown', registeredMouseFunction); }); }; @@ -53,7 +67,11 @@ export default function install(Vue) { } }; - Vue.directive('mdInkRipple', function() { - createRipple(this.el); + Vue.directive('mdInkRipple', function(disabled) { + if (!disabled) { + createRipple(this.el); + } else { + unregisterMouseEvent(this.el); + } }); } diff --git a/src/components/mdInkRipple/mdInkRipple.scss b/src/components/mdInkRipple/mdInkRipple.scss index 2c11abd..ae9eb12 100644 --- a/src/components/mdInkRipple/mdInkRipple.scss +++ b/src/components/mdInkRipple/mdInkRipple.scss @@ -16,7 +16,7 @@ border-radius: 50%; &.md-active { - animation: ripple 1.2s $swift-ease-out-timing-function; + animation: ripple 1s $swift-ease-out-timing-function; } } diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss index a484ae8..d45ff03 100644 --- a/src/stylesheets/variables.scss +++ b/src/stylesheets/variables.scss @@ -1,3 +1,10 @@ +/* Common + ========================================================================== */ + +$font-roboto: Roboto, "Helvetica Neue", sans-serif; + + + /* Transitions ========================================================================== */ @@ -27,10 +34,106 @@ $material-leave: all $material-leave-duration $material-leave-timing-function; -/* Common +/* Elevation ========================================================================== */ -$material-shadow-z1: 0 2px 5px rgba(0, 0, 0, .26); -$material-shadow-z2: 0 4px 8px rgba(0, 0, 0, .4); +$shadow-key-umbra-opacity: 0.2 !default; +$shadow-key-penumbra-opacity: 0.14 !default; +$shadow-ambient-shadow-opacity: 0.12 !default; + +$material-shadow-1dp: 0 1px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-2dp: 0 1px 5px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 2px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-3dp: 0 1px 8px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 3px 4px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-4dp: 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 4px 5px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1px 10 rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-5dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 5px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1px 14px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-6dp: 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 6px 10 rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 1px 18px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-7dp: 0 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 7px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 8px 10 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-10dp: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 10 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-11dp: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-12dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-13dp: 0 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-14dp: 0 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-15dp: 0 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-16dp: 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-17dp: 0 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-18dp: 0 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-19dp: 0 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-20dp: 0 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-21dp: 0 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-22dp: 0 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-23dp: 0 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; + +$material-shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; -$font-roboto: Roboto, "Helvetica Neue", sans-serif;