Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-20 13:01:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve template for mobile

Browse source
This commit is contained in:
Marcos Moura 2016-11-23 01:45:28 -02:00
parent 6d8e89da41
commit b02b8832da
3 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
docs/src/components/DocsComponent.vue
View file

@ -2,13 +2,13 @@
<div class="main-content component-docs">
<div class="usage-content">
<section class="component-description">
<h2 class="md-headline"># Component:</h2>
<h2 class="md-headline">Description</h2>
<slot name="description"></slot>
</section>
<section class="api-documentation">
<h2 class="md-headline"># API Options:</h2>
<h2 class="md-headline">API Options</h2>
<slot name="api"></slot>
</section>
@ -43,6 +43,8 @@
flex: 1 1 45%;
@media (max-width: 1024px) {
padding: 0;
flex: none;
order: 2;
}
}
@ -58,5 +60,10 @@
.example-content {
padding-left: 8px;
flex: 1 1 55%;
@media (max-width: 1024px) {
padding: 0;
flex: none;
}
}
</style>

5
docs/src/components/ExampleBox.vue
View file

@ -32,6 +32,11 @@
.example-tabs {
margin-top: -48px;
@media (max-width: 480px) {
margin-top: -1px;
background-color: #fff;
}
}
</style>

8
src/components/mdSidenav/mdSidenav.scss
View file

@ -27,9 +27,9 @@
pointer-events: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-shadow: $material-shadow-16dp;
will-change: transform;
transition: $swift-ease-out;
transition-property: transform;
will-change: transform;
}
.md-backdrop {
@ -42,13 +42,15 @@
pointer-events: none;
background-color: rgba(#000, .54);
opacity: 0;
will-change: opacity;
transition: $swift-ease-in-out;
transition-property: opacity;
will-change: opacity;
}
}
.md-sidenav.md-active {
.md-sidenav-content {
box-shadow: $material-shadow-16dp;
pointer-events: auto;
transform: translate3D(0, 0, 0);
}