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

Create toolbars

Browse source
This commit is contained in:
Marcos Moura 2016-07-18 17:46:03 -03:00
parent 1075827afa
commit 7c99506723
8 changed files with 162 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/mdToolbar/index.js Normal file
View file

@ -0,0 +1,8 @@
import mdToolbar from './mdToolbar.vue';
import mdToolbarTheme from './mdToolbar.theme';
export default function install(Vue) {
Vue.component('md-toolbar', Vue.extend(mdToolbar));
window.VueMaterial.styles.push(mdToolbarTheme);
}

53
src/components/mdToolbar/mdToolbar.scss Normal file
View file

@ -0,0 +1,53 @@
@import '../../core/variables.scss';
.md-toolbar {
min-height: 64px;
padding: 0 8px;
display: flex;
align-items: center;
flex-flow: row wrap;
&.md-dense {
min-height: 48px;
&.md-extended {
min-height: 96px;
}
.md-toolbar-container {
height: 48px;
}
}
&.md-extended {
min-height: 128px;
.md-toolbar-container:nth-child(2) {
.md-title:first-child {
margin-left: 72px;
}
}
}
.md-toolbar-container {
width: 100%;
height: 64px;
display: flex;
align-items: center;
align-self: flex-start;
> .md-button:first-child {
margin-right: 24px;
}
}
> .md-button:first-child {
margin-right: 24px;
}
.md-title {
font-size: 20px;
font-weight: 400;
line-height: 24px;
}
}

22
src/components/mdToolbar/mdToolbar.theme Normal file
View file

@ -0,0 +1,22 @@
.THEME_NAME {
.md-toolbar,
&.md-toolbar {
background-color: PRIMARY-COLOR;
color: PRIMARY-CONTRAST;
&.md-accent {
background-color: ACCENT-COLOR;
color: ACCENT-CONTRAST;
}
&.md-warn {
background-color: WARN-COLOR;
color: WARN-CONTRAST;
}
&.md-transparent {
background-color: transparent;
color: BACKGROUND-CONTRAST;
}
}
}

7
src/components/mdToolbar/mdToolbar.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<div class="md-toolbar">
<slot></slot>
</div>
</template>
<style lang="scss" src="./mdToolbar.scss"></style>

5
src/core/structure.scss
View file

@ -9,6 +9,9 @@ body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: rgba(#000, .87);
font-size: 14px;
font-family: $font-roboto;
font-size: 14px;
font-weight: 400;
letter-spacing: .010em;
line-height: 20px;
}

2
src/docs.scss
View file

@ -1,6 +1,4 @@
.docs {
padding: 0 8px;
.cell-phone {
width: 360px;
height: 480px;

102
src/docs.vue
View file

@ -98,75 +98,75 @@
<h2 class="title">Button Toggle</h2>
<md-button-toggle class="md-button-group">
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button">
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button">
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>title</md-icon>
</md-link-button>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-button-group md-primary" style="margin-top: 24px">
<md-link-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-link-button>
<md-button-toggle type="radio" class="md-button-group md-primary" style="margin-top: 24px">
<md-button class="md-icon-button">
<md-icon>format_align_left</md-icon>
</md-button>
<md-link-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-link-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_align_center</md-icon>
</md-button>
<md-link-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-link-button>
<md-button class="md-icon-button">
<md-icon>format_align_right</md-icon>
</md-button>
<md-link-button class="md-icon-button">
<md-icon>title</md-icon>
</md-link-button>
<md-button class="md-icon-button">
<md-icon>format_align_justify</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-link-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-link-button class="md-icon-button">
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-link-button>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button md-toggle">
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button">
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-link-button>
</md-button>
<md-link-button class="md-icon-button">
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-link-button>
</md-button>
</md-button-toggle>
</section>
@ -203,6 +203,32 @@
</md-bottom-bar>
</div>
</section>
<section>
<h2 class="title">Toolbar</h2>
<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>
</div>
</md-toolbar>
</section>
</div>
</template>

5
src/main.js
View file

@ -1,18 +1,21 @@
import Vue from 'vue';
import Docs from './docs';
import './core/core';
import MdTheme from './components/mdTheme';
import MdInkRipple from './components/mdInkRipple';
import MdButton from './components/mdButton';
import MdButtonToggle from './components/mdButtonToggle';
import MdIcon from './components/mdIcon';
import MdBottomBar from './components/mdBottomBar';
import MdTheme from './components/mdTheme';
import mdToolbar from './components/mdToolbar';
Vue.use(MdInkRipple);
Vue.use(MdButton);
Vue.use(MdButtonToggle);
Vue.use(MdIcon);
Vue.use(MdBottomBar);
Vue.use(mdToolbar);
Vue.use(MdTheme, {
'bottom-bar': {
primary: 'teal'