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

Improve ripple css to match with color theme

Browse source
This commit is contained in:
Marcos Moura 2016-07-14 18:16:02 -03:00
parent aedf00ad45
commit 591f5098c9
3 changed files with 68 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,12 +47,12 @@
position: static;
.md-icon {
transform: translate3d(0, 6px, 0);
transform: translate3d(0, 8px, 0);
}
.md-text {
opacity: 0;
transform: scale(1) translate3d(0, 10px, 0);
transform: scale(1) translate3d(0, 6px, 0);
}
&.md-active {
@ -64,21 +64,23 @@
opacity: 1;
}
.md-icon {
transform: scale(1) translate3d(0, 0, 0);
}
.md-text {
transform: scale(1) translate3d(0, 6px, 0);
transform: scale(1) translate3d(0, 2px, 0);
}
}
}
.md-text {
color: #757575;
transform: scale(.8571) translateY(2px);
transition: $swift-ease-out,
opacity $swift-linear-duration $swift-linear-timing-function;
}
.md-icon {
color: #757575;
transition: $swift-ease-out;
}
}

3
src/components/mdInkRipple/mdInkRipple.scss
View file

@ -13,7 +13,8 @@
.md-ripple {
position: absolute;
transform: scale(0);
background: rgba(0, 0, 0, .26);
background-color: currentColor;
opacity: .26;
border-radius: 50%;
&.md-active {

102
src/docs.vue
View file

@ -1,57 +1,73 @@
<template>
<div class="container">
<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>
<section>
<h2 class="title">Buttons</h2>
<div class="md-button-group">
<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>format_align_left</md-icon>
<md-icon>menu</md-icon>
</md-link-button>
</section>
<md-link-button class="md-icon-button">
<md-icon>format_align_center</md-icon>
</md-link-button>
<section>
<h2 class="title">Button Group</h2>
<md-link-button class="md-icon-button">
<md-icon>format_align_right</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_justify</md-icon>
</md-link-button>
</div>
<md-link-button class="md-icon-button">
<md-icon>format_align_center</md-icon>
</md-link-button>
<div style="padding: 16px; position: relative" v-md-ink-ripple>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<md-link-button class="md-icon-button">
<md-icon>format_align_right</md-icon>
</md-link-button>
<div style="width: 720px; max-width: 100%; height: 480px;" v-md-theme>
<md-bottom-bar>
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
<md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
</md-bottom-bar>
<md-link-button class="md-icon-button">
<md-icon>format_align_justify</md-icon>
</md-link-button>
</div>
</section>
<md-bottom-bar md-shift style="margin-top: 24px">
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
<md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
</md-bottom-bar>
</div>
<section>
<h2 class="title">Ripple</h2>
<div style="padding: 16px; position: relative" v-md-ink-ripple>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section>
<h2 class="title">Bottom Bar</h2>
<div style="width: 720px; max-width: 100%; height: 480px;" v-md-theme>
<md-bottom-bar>
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
<md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
</md-bottom-bar>
<md-bottom-bar md-shift style="margin-top: 24px">
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
<md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
<md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
</md-bottom-bar>
</div>
</section>
</div>
</template>