mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 12:14:22 +08:00
changes for responsive
This commit is contained in:
Dragos
parent
2350776429
commit
1653795d32
@ -5,12 +5,6 @@
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.md-toolbar-section-start {
|
||||
.md-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent{
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
@ -26,6 +20,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.md-toolbar-section-end .md-list {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.md-toolbar-section-start .md-list {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&.md-absolute {
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
@ -225,6 +226,7 @@
|
||||
|
||||
.md-title {
|
||||
height: 50px;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
|
||||
@ -20,6 +20,12 @@
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.md-toolbar-section-start {
|
||||
.md-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer .container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
@ -61,6 +67,10 @@
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.md-collapse-wrapper {
|
||||
height: calc(100vh - 61px);
|
||||
}
|
||||
|
||||
.dropdown-toggle:not(.md-button):after,
|
||||
.dropdown-toggle .md-ripple:after,
|
||||
.md-list-item .md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple .md-button-content i,
|
||||
@ -134,15 +144,16 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: calc(100% - 30px);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin-left: 15px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-mobile-section-start .md-list-item:last-child:after,
|
||||
.md-list-item:after {
|
||||
width: calc(100% - 30px);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin-left: 15px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
@ -161,7 +172,6 @@
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
overflow-y:scroll;
|
||||
height: calc(100vh - 61px);
|
||||
width: 100%;
|
||||
}
|
||||
&::before{
|
||||
@ -380,6 +390,11 @@
|
||||
|
||||
.md-tabs-navigation {
|
||||
flex-direction: column;
|
||||
|
||||
.md-button {
|
||||
max-width: none;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-wrapper .modal-container {
|
||||
@ -411,6 +426,10 @@
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.md-list.nav-mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -12,93 +12,98 @@
|
||||
</md-button>
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<li class="md-list-item" v-if="!showDownload">
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
|
||||
<div class="md-list-item-content">
|
||||
<drop-down direction="down">
|
||||
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">apps</i>
|
||||
<p>Components</p>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu dropdown-with-icons">
|
||||
<li>
|
||||
<a href="/">
|
||||
<i class="material-icons">layers</i>
|
||||
<p>All Components</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Documentation</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<div class="md-collapse-wrapper">
|
||||
<mobile-menu nav-mobile-section-start="false">
|
||||
<!-- Here you can add your items from the section-start of your toolbar -->
|
||||
</mobile-menu>
|
||||
<md-list>
|
||||
<li class="md-list-item" v-if="!showDownload">
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
|
||||
<div class="md-list-item-content">
|
||||
<drop-down direction="down">
|
||||
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">apps</i>
|
||||
<p>Components</p>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu dropdown-with-icons">
|
||||
<li>
|
||||
<a href="#/">
|
||||
<i class="material-icons">layers</i>
|
||||
<p>All Components</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Documentation</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/" target="_blank" v-if="showDownload">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Documentation</p>
|
||||
</md-list-item>
|
||||
<md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/" target="_blank" v-if="showDownload">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Documentation</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload">
|
||||
<i class="material-icons">cloud_download</i>
|
||||
<p>Download</p>
|
||||
</md-list-item>
|
||||
<md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload">
|
||||
<i class="material-icons">cloud_download</i>
|
||||
<p>Download</p>
|
||||
</md-list-item>
|
||||
|
||||
<li class="md-list-item" v-else>
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
|
||||
<div class="md-list-item-content">
|
||||
<drop-down direction="down">
|
||||
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">view_carousel</i>
|
||||
<p>Examples</p>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu dropdown-with-icons">
|
||||
<li>
|
||||
<a href="#/landing">
|
||||
<i class="material-icons">view_day</i>
|
||||
<p>Landing Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/login">
|
||||
<i class="material-icons">fingerprint</i>
|
||||
<p>Login Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/profile">
|
||||
<i class="material-icons">account_circle</i>
|
||||
<p>Profile Page</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="md-list-item" v-else>
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
|
||||
<div class="md-list-item-content">
|
||||
<drop-down direction="down">
|
||||
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="material-icons">view_carousel</i>
|
||||
<p>Examples</p>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu dropdown-with-icons">
|
||||
<li>
|
||||
<a href="#/landing">
|
||||
<i class="material-icons">view_day</i>
|
||||
<p>Landing Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/login">
|
||||
<i class="material-icons">fingerprint</i>
|
||||
<p>Login Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/profile">
|
||||
<i class="material-icons">account_circle</i>
|
||||
<p>Profile Page</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<md-list-item href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<p class="hidden-lg">Twitter</p>
|
||||
<md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
|
||||
</md-list-item>
|
||||
<md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
<p class="hidden-lg">Facebook</p>
|
||||
<md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
|
||||
</md-list-item>
|
||||
<md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fab fa-instagram"></i>
|
||||
<p class="hidden-lg">Instagram</p>
|
||||
<md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<md-list-item href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<p class="hidden-lg">Twitter</p>
|
||||
<md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
|
||||
</md-list-item>
|
||||
<md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
<p class="hidden-lg">Facebook</p>
|
||||
<md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
|
||||
</md-list-item>
|
||||
<md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
|
||||
<i class="fab fa-instagram"></i>
|
||||
<p class="hidden-lg">Instagram</p>
|
||||
<md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,7 +124,11 @@ function resizeThrottler(actualResizeHandler) {
|
||||
}
|
||||
}
|
||||
|
||||
import MobileMenu from "@/layout/MobileMenu";
|
||||
export default {
|
||||
components: {
|
||||
MobileMenu
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
|
||||
17
src/layout/MobileMenu.vue
Normal file
17
src/layout/MobileMenu.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
|
||||
<slot></slot>
|
||||
</md-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mobile-menu",
|
||||
props: {
|
||||
navMobileSectionStart: {
|
||||
type: String,
|
||||
default: "false"
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="md-layout-item">
|
||||
<div class="brand">
|
||||
<h1>Vue Material Kit.</h1>
|
||||
<h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
|
||||
<h3>Badass VueJs Kit based on Material Design.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,11 +128,11 @@
|
||||
<div class="section section-download" id="downloadSection">
|
||||
<div class="container">
|
||||
<div class="md-layout text-center">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
|
||||
<h2>Do you love this UI Kit?</h2>
|
||||
<h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&utm_source=creativetim&utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-small-size-66 mx-auto">
|
||||
<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
|
||||
<md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-primary md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
|
||||
<md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&utm_source=creativetim&utm_medium=website" class="md-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
|
||||
</div>
|
||||
@ -140,12 +140,15 @@
|
||||
<br><br>
|
||||
|
||||
<div class="md-layout text-center">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
|
||||
<h2>Want more?</h2>
|
||||
<h4>We've just launched <a href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" target="_blank">Material Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
|
||||
<h4>We've just launched <a href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos" target="_blank">Vue Material Dashboard PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-40 md-small-size-66 mx-auto">
|
||||
<md-button href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon> Upgrade to PRO</md-button>
|
||||
<div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
|
||||
<div class="btn-container">
|
||||
<md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade disabled" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
|
||||
<md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -239,4 +242,10 @@ export default {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 991px) {
|
||||
.btn-container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="section page-header header-filter" :style="headerStyle">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-80 md-medium-size-40 mx-auto">
|
||||
<div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
|
||||
<login-card header-color="green">
|
||||
<h4 slot="title" class="card-title">Login</h4>
|
||||
<md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user