From fff91378a958b31358daf4c06dc2be29774a25a5 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 22 Jul 2016 01:45:15 -0300 Subject: [PATCH] Improve lists and create whiteframes --- index.html | 14 +-- src/components/mdList/mdList.scss | 15 ++- src/components/mdWhiteframe/index.js | 5 + src/components/mdWhiteframe/mdWhiteframe.scss | 98 +++++++++++++++++++ src/components/mdWhiteframe/mdWhiteframe.vue | 29 ++++++ src/core/variables.scss | 8 +- src/docs/index.js | 5 +- src/docs/pages/Home.vue | 5 + src/docs/pages/List.vue | 42 +++++++- src/docs/pages/Whiteframe.vue | 35 +++++++ src/docs/routes.js | 10 ++ src/vue-material.js | 2 + 12 files changed, 253 insertions(+), 15 deletions(-) create mode 100644 src/components/mdWhiteframe/index.js create mode 100644 src/components/mdWhiteframe/mdWhiteframe.scss create mode 100644 src/components/mdWhiteframe/mdWhiteframe.vue create mode 100644 src/docs/pages/Home.vue create mode 100644 src/docs/pages/Whiteframe.vue diff --git a/index.html b/index.html index df0aba1..5e4825f 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,15 @@
- - - menu - + + + + menu + -

Vue Material

- +

Vue Material

+ + diff --git a/src/components/mdList/mdList.scss b/src/components/mdList/mdList.scss index a5b16c5..14363e2 100644 --- a/src/components/mdList/mdList.scss +++ b/src/components/mdList/mdList.scss @@ -12,22 +12,31 @@ padding: 4px 0; .md-list-item { - min-height: 40px; - padding: 4px 16px; + min-height: 48px; .md-list-item-container { + padding: 4px 16px; font-size: 13px; } } + + .md-avatar { + width: 36px; + min-width: 36px; + height: 36px; + min-height: 36px; + } } } .md-list-item { - min-height: 48px; + min-height: 56px; + display: flex; position: relative; .md-list-item-container { width: 100%; + min-height: 0; margin: 0; padding: 8px 16px; display: flex; diff --git a/src/components/mdWhiteframe/index.js b/src/components/mdWhiteframe/index.js new file mode 100644 index 0000000..644aa41 --- /dev/null +++ b/src/components/mdWhiteframe/index.js @@ -0,0 +1,5 @@ +import mdWhiteframe from './mdWhiteframe.vue'; + +export default function install(Vue) { + Vue.component('md-whiteframe', Vue.extend(mdWhiteframe)); +} diff --git a/src/components/mdWhiteframe/mdWhiteframe.scss b/src/components/mdWhiteframe/mdWhiteframe.scss new file mode 100644 index 0000000..fa367d3 --- /dev/null +++ b/src/components/mdWhiteframe/mdWhiteframe.scss @@ -0,0 +1,98 @@ +@import '../../core/variables.scss'; + +.md-whiteframe-1dp { + box-shadow: $material-shadow-1dp; +} + +.md-whiteframe-2dp { + box-shadow: $material-shadow-2dp; +} + +.md-whiteframe-3dp { + box-shadow: $material-shadow-3dp; +} + +.md-whiteframe-4dp { + box-shadow: $material-shadow-4dp; +} + +.md-whiteframe-5dp { + box-shadow: $material-shadow-5dp; +} + +.md-whiteframe-6dp { + box-shadow: $material-shadow-6dp; +} + +.md-whiteframe-7dp { + box-shadow: $material-shadow-7dp; +} + +.md-whiteframe-8dp { + box-shadow: $material-shadow-8dp; +} + +.md-whiteframe-9dp { + box-shadow: $material-shadow-9dp; +} + +.md-whiteframe-10dp { + box-shadow: $material-shadow-10dp; +} + +.md-whiteframe-11dp { + box-shadow: $material-shadow-11dp; +} + +.md-whiteframe-12dp { + box-shadow: $material-shadow-12dp; +} + +.md-whiteframe-13dp { + box-shadow: $material-shadow-13dp; +} + +.md-whiteframe-14dp { + box-shadow: $material-shadow-14dp; +} + +.md-whiteframe-15dp { + box-shadow: $material-shadow-15dp; +} + +.md-whiteframe-16dp { + box-shadow: $material-shadow-16dp; +} + +.md-whiteframe-17dp { + box-shadow: $material-shadow-17dp; +} + +.md-whiteframe-18dp { + box-shadow: $material-shadow-18dp; +} + +.md-whiteframe-19dp { + box-shadow: $material-shadow-19dp; +} + +.md-whiteframe-20dp { + box-shadow: $material-shadow-20dp; +} + +.md-whiteframe-21dp { + box-shadow: $material-shadow-21dp; +} + +.md-whiteframe-22dp { + box-shadow: $material-shadow-22dp; +} + +.md-whiteframe-23dp { + box-shadow: $material-shadow-23dp; +} + +.md-whiteframe-24dp { + box-shadow: $material-shadow-24dp; +} + diff --git a/src/components/mdWhiteframe/mdWhiteframe.vue b/src/components/mdWhiteframe/mdWhiteframe.vue new file mode 100644 index 0000000..607f2ca --- /dev/null +++ b/src/components/mdWhiteframe/mdWhiteframe.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/core/variables.scss b/src/core/variables.scss index b15a535..b79038a 100644 --- a/src/core/variables.scss +++ b/src/core/variables.scss @@ -37,9 +37,9 @@ $material-leave: all $material-leave-duration $material-leave-timing-function; /* Elevation ========================================================================== */ -$shadow-key-umbra-opacity: 0.2 !default; -$shadow-key-penumbra-opacity: 0.14 !default; -$shadow-ambient-shadow-opacity: 0.12 !default; +$shadow-key-umbra-opacity: .2 !default; +$shadow-key-penumbra-opacity: .14 !default; +$shadow-ambient-shadow-opacity: .12 !default; $material-shadow-1dp: 0 1px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), @@ -78,7 +78,7 @@ $material-shadow-9dp: 0 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; $material-shadow-10dp: 0 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), - 0 10 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), + 0 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default; $material-shadow-11dp: 0 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), diff --git a/src/docs/index.js b/src/docs/index.js index 1110b88..5de160b 100644 --- a/src/docs/index.js +++ b/src/docs/index.js @@ -16,12 +16,15 @@ let App = Vue.component('app', { methods: { toggleSidenav() { this.showSidenav = !this.showSidenav; + }, + hideSidenav() { + this.showSidenav = false; } } }); router.afterEach(function() { - router.app.toggleSidenav(); + router.app.hideSidenav(); }); router.start(App, '#app'); diff --git a/src/docs/pages/Home.vue b/src/docs/pages/Home.vue new file mode 100644 index 0000000..ef10dda --- /dev/null +++ b/src/docs/pages/Home.vue @@ -0,0 +1,5 @@ + diff --git a/src/docs/pages/List.vue b/src/docs/pages/List.vue index 6cfb451..0c4530b 100644 --- a/src/docs/pages/List.vue +++ b/src/docs/pages/List.vue @@ -15,11 +15,51 @@ store Store + + + + People + + + Home + + + + + People + + + Favorites + + + file_download + + + + + + People + + + Store +
- + + + home Home + + + + favorite Favorites + + + + store Store + + People diff --git a/src/docs/pages/Whiteframe.vue b/src/docs/pages/Whiteframe.vue new file mode 100644 index 0000000..c7fbf00 --- /dev/null +++ b/src/docs/pages/Whiteframe.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/docs/routes.js b/src/docs/routes.js index 55601a8..15330a7 100644 --- a/src/docs/routes.js +++ b/src/docs/routes.js @@ -3,6 +3,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; /* Pages */ +import Home from './pages/Home'; import Avatar from './pages/Avatar'; import BottomBar from './pages/BottomBar'; import Buttons from './pages/Buttons'; @@ -13,6 +14,7 @@ import List from './pages/List'; import Sidenav from './pages/Sidenav'; import Theme from './pages/Theme'; import Toolbar from './pages/Toolbar'; +import Whiteframe from './pages/Whiteframe'; Vue.use(VueRouter); @@ -22,6 +24,10 @@ let router = new VueRouter({ }); router.map({ + '/': { + name: 'home', + component: Home + }, '/avatar': { name: 'avatar', component: Avatar @@ -61,6 +67,10 @@ router.map({ '/toolbar': { name: 'toolbar', component: Toolbar + }, + '/whiteframe': { + name: 'whiteframe', + component: Whiteframe } }); diff --git a/src/vue-material.js b/src/vue-material.js index 877f06e..2ee837e 100644 --- a/src/vue-material.js +++ b/src/vue-material.js @@ -9,6 +9,7 @@ import MdToolbar from './components/mdToolbar'; import MdSidenav from './components/mdSidenav'; import MdAvatar from './components/mdAvatar'; import MdList from './components/mdList'; +import MdWhiteframe from './components/mdWhiteframe'; export default { MdAvatar, @@ -20,5 +21,6 @@ export default { MdList, MdSidenav, MdToolbar, + MdWhiteframe, MdTheme };