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

Create introduction page without images

Browse source
This commit is contained in:
Marcos Moura 2016-09-27 00:53:25 -03:00
parent 6748f56f56
commit 3f3f41eb08
12 changed files with 191 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/mdButton/mdButton.scss
View file

@ -15,7 +15,7 @@ $button-icon-size: 40px;
min-width: $button-width;
min-height: $button-height;
margin: 6px 8px;
padding: 0 8px;
padding: 0 16px;
display: inline-block;
position: relative;
align-items: center;

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

@ -112,9 +112,7 @@
.md-title {
margin: 0;
font-size: 20px;
font-weight: 400;
line-height: 24px;
&:first-child {
margin-left: 8px;

20
src/core/stylesheets/core.theme
View file

@ -1,5 +1,5 @@
.THEME_NAME {
color: rgba(0, 0, 0, .87);
color: #{'BACKGROUND-CONTRAST-0.87'};
background-color: #{'BACKGROUND-COLOR-A100'};
:not(input):not(textarea)::selection {
@ -8,11 +8,23 @@
}
a:not(.md-button) {
color: #{'PRIMARY-COLOR'};
text-decoration: none;
color: #{'ACCENT-COLOR'};
&:hover {
color: #{'PRIMARY-COLOR-800'};
color: #{'ACCENT-COLOR-800'};
}
}
}
/* Typography */
.THEME_NAME {
.md-caption,
.md-display-1,
.md-display-2,
.md-display-3,
.md-display-4 {
color: #{'BACKGROUND-CONTRAST-0.57'};
}
}

5
src/core/stylesheets/structure.scss
View file

@ -10,10 +10,7 @@ body {
-webkit-font-smoothing: antialiased;
color: rgba(#000, .87);
font-family: $font-roboto;
font-size: 14px;
font-weight: 400;
letter-spacing: .010em;
line-height: 20px;
@extend .md-body-1;
}
::-webkit-scrollbar {

77
src/core/stylesheets/type.scss
View file

@ -0,0 +1,77 @@
/* Text and Titles */
.md-caption {
font-size: 12px;
font-weight: 400;
letter-spacing: .02em;
line-height: 17px;
}
.md-body-1 {
font-size: 14px;
font-weight: 400;
letter-spacing: .01em;
line-height: 20px;
}
.md-body-2 {
font-size: 14px;
font-weight: 500;
letter-spacing: .01em;
line-height: 24px;
}
.md-subheading {
font-size: 16px;
font-weight: 400;
letter-spacing: .01em;
line-height: 24px;
}
.md-title {
font-size: 20px;
font-weight: 500;
letter-spacing: .005em;
line-height: 26px;
}
.md-headline {
font-size: 24px;
font-weight: 400;
letter-spacing: 0;
line-height: 32px;
}
.md-display-1 {
font-size: 34px;
font-weight: 400;
letter-spacing: 0;
line-height: 40px;
}
.md-display-2 {
font-size: 45px;
font-weight: 400;
letter-spacing: 0;
line-height: 48px;
}
.md-display-3 {
font-size: 56px;
font-weight: 400;
letter-spacing: -.005em;
line-height: 58px;
}
.md-display-4 {
font-size: 112px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 112px;
}
/* Links */
a {
text-decoration: none;
}

28
src/docs/App.vue
View file

@ -173,10 +173,6 @@
}
}
.md-theme-default .main-header {
color: #fff;
}
.main-header {
position: relative;
z-index: 3;
@ -187,6 +183,11 @@
}
}
.md-toolbar,
.md-title {
color: #fff;
}
.md-title {
.page-title {
margin-left: 0;
@ -206,11 +207,11 @@
.main-sidebar.md-sidenav {
.md-sidenav-content {
width: $sizebar-size;
display: flex;
flex-flow: column;
@media (min-width: 1280px) {
width: $sizebar-size;
top: 0;
pointer-events: auto;
transform: translate3d(0, 0, 0);
@ -288,23 +289,22 @@
position: absolute;
top: 0;
right: 0;
left: 280px;
left: 0;
transition: $swift-ease-out;
@media (min-width: 1280px) {
left: 280px;
}
}
.md-router-enter,
.md-router-leave-active {
opacity: 0;
opacity: .2;
}
.md-router-enter {
.single-page-banner .md-toolbar {
min-height: 64px;
padding-top: 0;
.md-title {
font-size: 20px;
}
.md-display-2 {
transform: translate3D(0, -36px, 0);
}
}
</style>

2
src/docs/components/demo-page.vue
View file

@ -66,7 +66,7 @@
}
.md-tab {
max-width: 960px;
max-width: 1024px;
font-size: 16px;
line-height: 1.6em;
}

15
src/docs/components/single-page-banner.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="single-page-banner">
<md-toolbar class="single-page-banner">
<h1 class="md-title">{{ label }}</h1>
<h1 class="md-display-2">{{ label }}</h1>
</md-toolbar>
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
@ -28,12 +28,13 @@
transition: $swift-ease-out;
color: #fff !important;
.md-title:first-child {
margin-left: 48px;
font-size: 45px;
font-weight: 400;
line-height: 1.3em;
.md-display-2 {
width: 100%;
max-width: 1024px;
padding-left: 16px;
margin: 0 auto;
transition: $swift-ease-out;
color: #fff;
}
}
@ -41,7 +42,7 @@
margin: 0;
position: fixed;
top: 12px;
left: 2px;
left: 12px;
z-index: 3;
color: #fff;
}

28
src/docs/components/single-page.vue
View file

@ -21,25 +21,14 @@
<style lang="scss">
@import '../../core/stylesheets/variables.scss';
.single-page:not(.single-page-home),
.single-page-content {
max-width: 1024px;
padding: 16px;
margin: 0 auto;
}
.single-page-content {
font-size: 16px;
line-height: 1.6em;
.introduction {
margin-top: 2px;
margin-bottom: 1.5em;
font-size: 20px;
line-height: 1.6em;
}
}
.single-page-home {
padding-top: 256px;
.single-page {
padding-top: 64px;
.main-header {
position: fixed;
@ -53,12 +42,17 @@
padding-left: 280px;
}
.md-toolbar {
.md-toolbar,
.md-title {
color: #fff;
}
}
}
.single-page-home {
padding-top: 256px;
}
.single-page-banner {
min-height: 256px;
padding-top: 98px;
@ -81,7 +75,7 @@
margin: 0;
position: fixed;
top: 12px;
left: 2px;
left: 12px;
z-index: 3;
color: #fff;
}

2
src/docs/config.js
View file

@ -26,7 +26,7 @@ Vue.use(VueMaterial.MdTheme, {
},
blue: {
primary: 'blue',
accent: 'purple'
accent: 'pink'
},
green: {
primary: 'green',

12
src/docs/index.js
View file

@ -21,12 +21,18 @@ let router = new VueRouter({
let Docs = Vue.component('app', App);
let handleSectionTheme = (route) => {
if (route.name.indexOf('components') >= 0) {
if (route.name.indexOf('introduction') >= 0) {
Docs.theme = 'blue';
} else if (route.name.indexOf('components') >= 0) {
Docs.theme = 'indigo';
} else if (route.name.indexOf('themes') >= 0) {
Docs.theme = 'teal';
} else if (route.name.indexOf('ui-elements') >= 0) {
Docs.theme = 'dark-pink';
} else if (route.name.indexOf('changelog') >= 0) {
Docs.theme = 'orange';
} else if (route.name.indexOf('about') >= 0) {
Docs.theme = 'green';
} else {
Docs.theme = 'default';
}
@ -51,7 +57,7 @@ router.afterEach((currentRoute) => {
mainContent.scrollTop = 0;
}
handleSectionTheme(currentRoute);
Docs.closeSidenav();
handleSectionTheme(currentRoute);
});

54
src/docs/pages/Introduction.vue
View file

@ -2,7 +2,57 @@
<single-page class="single-page-home" label="Introduction">
<single-page-banner label="Vue Material"></single-page-banner>
<p class="introduction">Vue Material is a lightweight implementation <a href="http://material.google.com" target="_blank" rel="noopener">Google Material Design</a> specifications.</p>
<p>This project provides reusable components and a series of UI Elements to build crafted Material Design applications. It aims to support the latest version of Vue and to have the same <a href="https://saucelabs.com/u/vuejs" target="_blank" rel="noopener">compatibility</a> with Web Browsers.</p>
<div class="button-actions">
<div class="introduction">Build well-crafted apps with Material Design and Vue 2.0</div>
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
</div>
<div class="row">
<div class="column">
<h2 class="md-headline">Material Design</h2>
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
</div>
<div class="column">
<h2 class="md-headline">Full-featured</h2>
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
</div>
<div class="column">
<h2 class="md-headline">Compatible</h2>
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to <a href="https://saucelabs.com/u/vuejs" target="_blank" rel="noopener">modern Web Browsers</a> through Vue 2.0.</p>
</div>
</div>
</single-page>
</template>
<style lang="scss" scoped>
.button-actions {
margin-bottom: 24px;
text-align: center;
.introduction {
margin-bottom: .8em;
font-size: 20px;
line-height: 1.6em;
}
.md-button {
margin-left: 0;
color: #fff !important;
}
}
.row {
margin: 0 -10px;
display: flex;
flex-flow: row wrap;
}
.column {
margin: 0 10px;
flex: 1 1 30%;
}
</style>