Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-16 19:21:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve ripple creation and add lighter color to bottom bar

Browse source
This commit is contained in:
Marcos Moura 2016-07-12 03:48:52 -03:00
parent 19841ca951
commit d69b99647c
2 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/mdBottomBar/mdBottomBar.scss
View file

@ -21,7 +21,7 @@
position: relative;
border: none;
background: transparent;
transition: .3s ease;
transition: $swift-ease-out;
color: currentColor;
font-size: 14px;
line-height: 1em;
@ -32,6 +32,11 @@
.md-text {
transform: scale(1) translate3d(0, 0, 0);
}
.md-text,
.md-icon {
color: currentColor;
}
}
.md-bottom-bar.md-shift & {
@ -58,13 +63,14 @@
}
.md-text {
color: #757575;
transform: scale(.8571) translateY(2px);
transition: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function,
transition: all $swift-ease-out-duration $swift-ease-out-timing-function,
opacity $swift-linear-duration $swift-linear-timing-function;
}
.md-icon {
color: currentColor;
transition: $swift-ease-in-out;
color: #757575;
transition: $swift-ease-out;
}
}

12
src/components/mdInkRipple/index.js
View file

@ -73,12 +73,12 @@ export default function install(Vue) {
};
let createRipple = (element) => {
element = getParentWithPositionRelatve(element);
Vue.nextTick(() => {
element = getParentWithPositionRelatve(element);
let ripple = element.querySelector('.' + rippleClass);
let ripple = element.querySelector('.' + rippleClass);
if (!ripple) {
Vue.nextTick(() => {
if (!ripple) {
let elementSize = Math.round(Math.max(element.offsetWidth, element.offsetHeight)) + 'px';
let rippleParent = createElement(ripple, rippleParentClass);
let rippleElement = createElement(ripple, rippleClass, elementSize);
@ -87,8 +87,8 @@ export default function install(Vue) {
element.appendChild(rippleParent);
registerMouseEvent(element);
});
}
}
});
};
Vue.directive('mdInkRipple', function(disabled) {