diff --git a/src/components/mdAvatar/index.js b/src/components/mdAvatar/index.js new file mode 100644 index 0000000..73cf1da --- /dev/null +++ b/src/components/mdAvatar/index.js @@ -0,0 +1,5 @@ +import mdAvatar from './mdAvatar.vue'; + +export default function install(Vue) { + Vue.component('md-avatar', Vue.extend(mdAvatar)); +} diff --git a/src/components/mdAvatar/mdAvatar.scss b/src/components/mdAvatar/mdAvatar.scss new file mode 100644 index 0000000..14c267c --- /dev/null +++ b/src/components/mdAvatar/mdAvatar.scss @@ -0,0 +1,23 @@ +@import '../../core/variables.scss'; + +$avatar-size: 40px; + +.md-avatar { + width: $avatar-size; + min-width: $avatar-size; + height: $avatar-size; + min-height: $avatar-size; + margin: auto; + display: inline-block; + overflow: hidden; + border-radius: $avatar-size; + vertical-align: middle; + + &.md-avatar-icon { + background-color: rgba(#000, .2); + } + + .md-icon { + margin: 8px; + } +} diff --git a/src/components/mdAvatar/mdAvatar.vue b/src/components/mdAvatar/mdAvatar.vue new file mode 100644 index 0000000..103df3d --- /dev/null +++ b/src/components/mdAvatar/mdAvatar.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/components/mdList/index.js b/src/components/mdList/index.js new file mode 100644 index 0000000..3c7ce69 --- /dev/null +++ b/src/components/mdList/index.js @@ -0,0 +1,10 @@ +import mdList from './mdList.vue'; +import mdListItem from './mdListItem.vue'; +import mdListTheme from './mdList.theme'; + +export default function install(Vue) { + Vue.component('md-list', Vue.extend(mdList)); + Vue.component('md-list-item', Vue.extend(mdListItem)); + + window.VueMaterial.styles.push(mdListTheme); +} diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss new file mode 100644 index 0000000..ae8b792 --- /dev/null +++ b/src/components/mdList/mdList.scss @@ -0,0 +1,62 @@ +@import '../../core/variables.scss'; + +.md-list { + margin: 0; + padding: 8px 0; + display: flex; + flex-flow: column nowrap; + position: relative; + list-style: none; + + &.md-dense { + padding: 4px 0; + + .md-list-item { + min-height: 40px; + padding: 4px 16px; + font-size: 13px; + } + } +} + +.md-list-item { + min-height: 48px; + position: relative; + font-size: 16px; + + .md-list-item-container { + width: 100%; + margin: 0; + padding: 8px 16px; + display: flex; + flex-flow: row wrap; + align-items: center; + border-radius: 0; + text-align: left; + + > .md-ink-ripple { + border-radius: 0; + } + + > .md-icon:first-child { + margin-right: 32px; + } + + > .md-avatar:first-child { + margin-right: 16px; + } + + > .md-list-action { + margin: 0 0 0 16px; + } + } + + .md-icon, + .md-avatar { + margin: 0; + + + * { + flex: 1; + } + } +} diff --git a/src/components/mdList/mdList.theme b/src/components/mdList/mdList.theme new file mode 100644 index 0000000..fcb9c39 --- /dev/null +++ b/src/components/mdList/mdList.theme @@ -0,0 +1,7 @@ +.THEME_NAME { + .md-list, + &.md-list { + background-color: BACKGROUND-COLOR-50; + color: BACKGROUND-CONTRAST; + } +} diff --git a/src/components/mdList/mdList.vue b/src/components/mdList/mdList.vue new file mode 100644 index 0000000..f26c44c --- /dev/null +++ b/src/components/mdList/mdList.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/components/mdList/mdListItem.vue b/src/components/mdList/mdListItem.vue new file mode 100644 index 0000000..7629cb1 --- /dev/null +++ b/src/components/mdList/mdListItem.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/components/mdSidenav/mdSidenav.scss b/src/components/mdSidenav/mdSidenav.scss index ba7be2a..ccb6cce 100644 --- a/src/components/mdSidenav/mdSidenav.scss +++ b/src/components/mdSidenav/mdSidenav.scss @@ -12,7 +12,7 @@ } .md-sidenav-content { - width: 320px; + width: 304px; position: absolute; top: 0; bottom: 0; diff --git a/src/docs.vue b/src/docs.vue index 6b02c77..c86ddd0 100644 --- a/src/docs.vue +++ b/src/docs.vue @@ -231,18 +231,18 @@
-

Toolbar

+

Sidenav

- + menu -

Toggle Sidenav

+

Left Sidenav

- +

Sidenav content

@@ -252,6 +252,78 @@

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!

+ +
+ + + menu + + +

Right Sidenav

+
+ + + +
+

Sidenav content

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!

+
+
+
+ +
+

Lists

+ +
+ + + home Home + + + + favorite Favorites + + + + store Store + + +
+ +
+ + + + People + + + Home + + + + + People + + + Favorites + + + file_download + + + + + + People + + + Store + + +
@@ -263,15 +335,19 @@ data() { return { buttonDisabled: false, - sidenavVisible: false + sidenavLeftVisible: false, + sidenavRightVisible: false }; }, methods: { disableButton() { this.buttonDisabled = !this.buttonDisabled; }, - toggleSidenav() { - this.sidenavVisible = !this.sidenavVisible; + toggleLeftSidenav() { + this.sidenavLeftVisible = !this.sidenavLeftVisible; + }, + toggleRightSidenav() { + this.sidenavRightVisible = !this.sidenavRightVisible; } } }; diff --git a/src/main.js b/src/main.js index 3a6e580..6c61cd9 100644 --- a/src/main.js +++ b/src/main.js @@ -9,6 +9,8 @@ import MdIcon from './components/mdIcon'; import MdBottomBar from './components/mdBottomBar'; import MdToolbar from './components/mdToolbar'; import MdSidenav from './components/mdSidenav'; +import MdAvatar from './components/mdAvatar'; +import MdList from './components/mdList'; Vue.use(MdInkRipple); Vue.use(MdButton); @@ -17,6 +19,8 @@ Vue.use(MdIcon); Vue.use(MdBottomBar); Vue.use(MdToolbar); Vue.use(MdSidenav); +Vue.use(MdAvatar); +Vue.use(MdList); Vue.use(MdTheme, { 'bottom-bar': {