mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-10 08:14:52 +00:00
Create icons and finish buttons
This commit is contained in:
Marcos Moura
parent
4e435f3341
commit
a0c59d7bd3
14 changed files with 275 additions and 59 deletions
|
|
@ -21,8 +21,32 @@
|
|||
|
||||
<body>
|
||||
<div class="container" id="app" v-cloak>
|
||||
<md-button class="md-primary md-raised" @click="clickAction">My first component</md-button>
|
||||
<md-link-button class="md-primary" href="/">My second component</md-link-button>
|
||||
<md-button class="md-primary" @click="clickAction">Button</md-button>
|
||||
<md-link-button class="md-primary" :disabled="disabled">Primary</md-link-button>
|
||||
<md-link-button class="md-raised">Raised</md-link-button>
|
||||
<md-link-button class="md-raised" :disabled="!disabled">Disabled</md-link-button>
|
||||
<md-link-button class="md-raised md-dense">Dense</md-link-button>
|
||||
<md-link-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-link-button>
|
||||
|
||||
<div class="md-button-group">
|
||||
<md-link-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-link-button>
|
||||
|
||||
<md-link-button class="md-icon-button">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-link-button>
|
||||
|
||||
<md-link-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-link-button>
|
||||
|
||||
<md-link-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-link-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="components/main.js"></script>
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@
|
|||
"xtend": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^1.0.25",
|
||||
"vue-ripple": "^1.0.2"
|
||||
"vue": "^1.0.25"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<button :type="type || 'button'" :disabled="disabled" class="md-button" v-md-ink-ripple>
|
||||
<button :type="type || 'button'" :disabled="disabled" class="md-button" v-md-ink-ripple="disabled">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a :disabled="disabled" class="md-button">
|
||||
<a :disabled="disabled" class="md-button" v-md-ink-ripple="disabled">
|
||||
<slot></slot>
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
|||
11
src/components/mdIcon/index.js
Normal file
11
src/components/mdIcon/index.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
14
src/components/mdIcon/mdIcon.scss
Normal file
14
src/components/mdIcon/mdIcon.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
1
src/components/mdIcon/mdIcon.vue
Normal file
1
src/components/mdIcon/mdIcon.vue
Normal file
|
|
@ -0,0 +1 @@
|
|||
<style lang="scss" src="mdIcon.scss"></style>
|
||||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue