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

Improve toolbar documentation

Browse source
This commit is contained in:
Marcos Moura 2016-09-09 13:36:05 -03:00
parent 79d5fdacad
commit 7a2d788672
2 changed files with 80 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/mdToolbar/mdToolbar.scss
View file

@ -7,6 +7,7 @@
align-items: center;
align-content: center;
flex-flow: row wrap;
position: relative;
&.md-dense {
min-height: 48px;
@ -26,7 +27,7 @@
.md-toolbar-container:nth-child(2) {
.md-title:first-child {
margin-left: 64px;
margin-left: 56px;
}
}
}
@ -87,6 +88,12 @@
}
}
.md-button:hover {
&:not([disabled]):not(.md-raised):not(.md-icon-button):not(.md-fab) {
background-color: rgba(#fff, .1);
}
}
.md-title {
margin: 0;
font-size: 20px;

72
src/docs/pages/Toolbar.vue
View file

@ -23,5 +23,77 @@
<h2 class="md-title">Vue Material</h2>
</div>
</md-toolbar>
<md-toolbar>
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">Vue Material</h2>
<md-button class="md-icon-button">
<md-icon>favorite</md-icon>
</md-button>
</md-toolbar>
<md-toolbar>
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">Vue Material</h2>
<md-button>Add</md-button>
<md-button>Remove</md-button>
</md-toolbar>
<md-toolbar>
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title" style="flex: 1">Vue Material</h2>
<md-button class="md-raised">Add</md-button>
<md-button class="md-raised md-warn">Remove</md-button>
</md-toolbar>
<md-toolbar class="md-extended">
<div class="md-toolbar-container">
<md-button class="md-icon-button">
<md-icon>menu</md-icon>
</md-button>
<span style="flex: 1;"></span>
<md-button class="md-icon-button">
<md-icon>search</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>filter_list</md-icon>
</md-button>
</div>
<div class="md-toolbar-container">
<h2 class="md-title">Vue Material</h2>
<md-button class="md-fab md-fab-bottom-right">
<md-icon>add</md-icon>
</md-button>
</div>
</md-toolbar>
</section>
</template>
<style lang="scss" scoped>
.md-toolbar {
margin-bottom: 24px;
}
.md-button.md-fab {
margin: 0;
right: 56px;
bottom: -26px;
}
</style>