mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-06-08 08:04:21 +08:00
vue md v1.0.0
This commit is contained in:
Dragos
parent
24dfc74f23
commit
0e08bb7cff
@ -12,7 +12,10 @@
|
||||
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run dev"
|
||||
},
|
||||
"dependencies": {
|
||||
"nouislider": "^11.1.0",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"vue": "^2.5.17",
|
||||
"vue-carousel": "^0.13.1",
|
||||
"vue-clickaway": "^2.2.2",
|
||||
"vue-lazyload": "^1.2.6",
|
||||
"vue-material": "^1.0.0-beta-10.2",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<title>Vue Material Kit by Creative Tim</title>
|
||||
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
12
src/App.vue
12
src/App.vue
@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view name="header"/>
|
||||
<div>
|
||||
<router-view/>
|
||||
<div id="material-kit">
|
||||
<div :class="{'nav-open': NavbarStore.showNavbar}">
|
||||
<router-view name="header"/>
|
||||
<div>
|
||||
<router-view/>
|
||||
</div>
|
||||
<router-view name="footer"/>
|
||||
</div>
|
||||
<router-view name="footer"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,731 @@
|
||||
.tim-row{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.presentation-page{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tim-white-buttons {
|
||||
background-color: #777777;
|
||||
}
|
||||
.title{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 25px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
#tooltips .md-button{
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#notifications .alert {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.tim-typo{
|
||||
padding-left: 25%;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.tim-typo .tim-note{
|
||||
bottom: 5px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
left: 0;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
}
|
||||
.tim-row{
|
||||
padding-top: 50px;
|
||||
}
|
||||
.tim-row h3{
|
||||
margin-top: 0;
|
||||
}
|
||||
#typography h1, #typography h2, #typography h3,
|
||||
#typography h4, #typography h5, #typography h6{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.switch{
|
||||
margin-right: 20px;
|
||||
}
|
||||
#navbar-full .navbar{
|
||||
border-radius: 0 !important;
|
||||
margin-bottom: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
.space{
|
||||
height: 130px;
|
||||
display: block;
|
||||
}
|
||||
.space-110{
|
||||
height: 110px;
|
||||
display: block;
|
||||
}
|
||||
.space-50{
|
||||
height: 50px;
|
||||
display: block;
|
||||
}
|
||||
.space-70{
|
||||
height: 70px;
|
||||
display: block;
|
||||
}
|
||||
.navigation-example .img-src{
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.tim-container .noUi-horizontal{
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.navigation-example{
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin-top:0;
|
||||
min-height: 740px;
|
||||
}
|
||||
#notifications{
|
||||
background-color: #FFFFFF;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#notifications .alert-danger{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.tim-note{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#buttons .md-button{
|
||||
margin: 0 2px 15px;
|
||||
}
|
||||
.space-100{
|
||||
height: 100px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.be-social{
|
||||
padding-bottom: 20px;
|
||||
/* border-bottom: 1px solid #aaa; */
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.txt-white{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.txt-gray{
|
||||
color: #ddd !important;
|
||||
}
|
||||
|
||||
|
||||
.parallax{
|
||||
width:100%;
|
||||
height:570px;
|
||||
|
||||
display: block;
|
||||
background-attachment: fixed;
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
background-position: center center;
|
||||
|
||||
}
|
||||
|
||||
.logo-container .logo{
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333333;
|
||||
width: 50px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-container .brand{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 7px;
|
||||
color: #fff;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar-default .logo-container .brand{
|
||||
color: #999999;
|
||||
}
|
||||
.navbar-transparent .logo-container .brand{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.logo-container .brand-material{
|
||||
font-size: 18px;
|
||||
margin-top: 15px;
|
||||
height: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-container .logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.navbar-small .logo-container .brand{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixed-section{
|
||||
top: 90px;
|
||||
max-height: 71vh;
|
||||
overflow: scroll;
|
||||
border-bottom: 1px solid rgba(220,220,220, .8);
|
||||
}
|
||||
.fixed-section ul li{
|
||||
list-style: none;
|
||||
}
|
||||
.fixed-section li a{
|
||||
font-size: 14px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
color: #666666;
|
||||
}
|
||||
.fixed-section li a.active{
|
||||
color: #00bbff;
|
||||
}
|
||||
.fixed-section.float{
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
width: 200px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.parallax .parallax-image{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.parallax .parallax-image img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.parallax .parallax-image{
|
||||
width: 100%;
|
||||
height: 640px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.parallax .parallax-image img{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.separator{
|
||||
content: "Separator";
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.separator-line{
|
||||
background-color: #EEE;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.separator.separator-gray{
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
.social-buttons-demo .btn{
|
||||
/*margin-right: 5px;
|
||||
margin-bottom: 7px;*/
|
||||
margin: 10px 5px 7px 1px;
|
||||
}
|
||||
|
||||
.img-container{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-container img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lightbox img{
|
||||
width: 100%;
|
||||
}
|
||||
.lightbox .modal-content{
|
||||
overflow: hidden;
|
||||
}
|
||||
.lightbox .modal-body{
|
||||
padding: 0;
|
||||
}
|
||||
@media screen and (min-width: 991px){
|
||||
.lightbox .modal-dialog{
|
||||
width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.fixed-section.affix {
|
||||
position: relative;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.btn, .btn-morphing{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.parallax .motto{
|
||||
top: 170px;
|
||||
margin-top: 0;
|
||||
font-size: 60px;
|
||||
width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading dots */
|
||||
|
||||
/* transitions */
|
||||
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
|
||||
#images h4{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#javascriptComponents{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#javascriptComponents .btn-raised{
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
/* layer animation */
|
||||
|
||||
.layers-container{
|
||||
display: block;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.layers-container img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-black {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.animate {
|
||||
transition: 1.5s ease-in-out;
|
||||
-moz-transition: 1.5s ease-in-out;
|
||||
-webkit-transition: 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-default.navbar-small .logo-container .brand{
|
||||
color: #333333;
|
||||
}
|
||||
.navbar-transparent.navbar-small .logo-container .brand{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.navbar-default.navbar-small .logo-container .brand{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sharing-area{
|
||||
margin-top: 80px;
|
||||
}
|
||||
.sharing-area .md-button{
|
||||
margin: 15px 4px 0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#navbar{
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.section-thin,
|
||||
.section-notifications{
|
||||
padding: 0;
|
||||
}
|
||||
.section-navbars{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#navigation .md-toolbar{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#navigation .md-dark,
|
||||
#menu,
|
||||
#menu .md-primary {
|
||||
z-index: 9999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-tabs{
|
||||
background: #EEEEEE;
|
||||
}
|
||||
.section-pagination{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.section-download h4{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.section-examples a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.section-examples h5{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.components-page .wrapper > .header,
|
||||
.tutorial-page .wrapper > .header{
|
||||
height: 400px;
|
||||
padding-top: 100px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
.components-page .title,
|
||||
.tutorial-page .title{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media (max-width: 830px){
|
||||
.main-raised{
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*@media all and (min-width: 1200px){
|
||||
#modal-row [class*="col-"]:nth-child(1),
|
||||
#modal-row [class*="col-"]:nth-child(4),
|
||||
#javascriptComponents [class*="col-"]:nth-child(2),
|
||||
#javascriptComponents [class*="col-"]:nth-child(5){
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
#modal-row [class*="col-"]:nth-child(2),
|
||||
#javascriptComponents [class*="col-"]:nth-child(3){
|
||||
padding-right: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#modal-row [class*="col-"]:nth-child(3),
|
||||
#modal-row [class*="col-"]:nth-child(5),
|
||||
#javascriptComponents [class*="col-"]:nth-child(4),
|
||||
#javascriptComponents [class*="col-"]:nth-child(6){
|
||||
padding-left: 3px;
|
||||
}
|
||||
}*/
|
||||
|
||||
.components-page .footer{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.components-page .page-header:after{
|
||||
background: rgba(132, 13, 121, 0.88);
|
||||
background: linear-gradient(45deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
||||
background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
||||
background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
|
||||
}
|
||||
|
||||
.components-page .page-header.header-filter:before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.components-page .page-header .title-container{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.components-page .footer .container{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.components-page .footer .btn i{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.components-page .page-header{
|
||||
height: 100vh !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
|
||||
/* PRESENTION PAGE */
|
||||
|
||||
/* Section Components */
|
||||
|
||||
.section-components .title{
|
||||
margin-top: 60px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.section-components .description{
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.section-components .image-container{
|
||||
height: 560px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-components .components-macbook{
|
||||
width: auto;
|
||||
left: -100px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.section-components .table-img,
|
||||
.section-components .share-btn-img,
|
||||
.section-components .coloured-card-btn-img,
|
||||
.section-components .coloured-card-img,
|
||||
.section-components .social-img,
|
||||
.section-components .pin-btn-img{
|
||||
position: absolute;
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.section-components .coloured-card-img{
|
||||
left: 90%;
|
||||
top: 11%;
|
||||
height: 90px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-components .social-img{
|
||||
left: 70%;
|
||||
top: 67%;
|
||||
height: 40px;
|
||||
|
||||
}
|
||||
.section-components .coloured-card-btn-img{
|
||||
left: 35%;
|
||||
top: 2%;
|
||||
height: 125px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.section-components .table-img{
|
||||
left: -13%;
|
||||
top: 27%;
|
||||
height: 175px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-components .pin-btn-img{
|
||||
left: 0%;
|
||||
top: 68%;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.section-components .share-btn-img{
|
||||
left: 3%;
|
||||
top: -3%;
|
||||
height: 25px;
|
||||
|
||||
}
|
||||
|
||||
/* Section Content */
|
||||
|
||||
.section-content .section-description{
|
||||
margin-top: 100px;
|
||||
}
|
||||
.section-content .title{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.section-content .section-description .title + .description{
|
||||
margin-top: 0;
|
||||
}
|
||||
.section-content .description{
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.section-content .image-container{
|
||||
max-width: 900px;
|
||||
position: relative;
|
||||
}
|
||||
.section-content .image-container .ipad-img{
|
||||
width: 100%;
|
||||
transition: transform .6s .9s;
|
||||
z-index: 2;
|
||||
}
|
||||
.section-content .image-container .area-img,
|
||||
.section-content .image-container .info-img{
|
||||
position: absolute;
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
transform: translate3D(0px, 100px, 0px);
|
||||
-webkit-transform: translate3D(0px, 100px, 0px);
|
||||
}
|
||||
.section-content .image-container .area-img{
|
||||
top: 10%;
|
||||
left: 60%;
|
||||
height: 300px;
|
||||
width: 250px;
|
||||
z-index: 2;
|
||||
-webkit-transition: all 1s ease-out 0s;
|
||||
-moz-transition: all 1s ease-out 0s;
|
||||
-o-transition: all 1s ease-out 0s;
|
||||
-ms-transition: all 1s ease-out 0s;
|
||||
transition: all 1s ease-out 0s;
|
||||
}
|
||||
.section-content .image-container .info-img{
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
-webkit-transition: all 1s ease-out 0s;
|
||||
-moz-transition: all 1s ease-out 0s;
|
||||
-o-transition: all 1s ease-out 0s;
|
||||
-ms-transition: all 1s ease-out 0s;
|
||||
transition: all 1s ease-out 0s;
|
||||
}
|
||||
.animated{
|
||||
transform: translate3D(0px, 0px, 0px) !important;
|
||||
-webkit-transform: translate3D(0px, 0px, 0px) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
/* animated images */
|
||||
|
||||
@-webkit-keyframes Floatingy{
|
||||
from {-webkit-transform:translate(0, 0px);}
|
||||
65% {-webkit-transform:translate(50px, 0);}
|
||||
to {-webkit-transform: translate(0, -0px);}
|
||||
}
|
||||
@-moz-keyframes Floatingy{
|
||||
from {-moz-transform:translate(0, 0px);}
|
||||
65% {-moz-transform:translate(50px, 0);}
|
||||
to {-moz-transform: translate(0, -0px);}
|
||||
}
|
||||
@-webkit-keyframes Floatingx{
|
||||
from {-webkit-transform:translate(50px, 0px);}
|
||||
65% {-webkit-transform:translate(0, 0);}
|
||||
to {-webkit-transform: translate(50px, -0px);}
|
||||
}
|
||||
@-moz-keyframes Floatingx{
|
||||
from {-moz-transform:translate(50px, 0px);}
|
||||
65% {-moz-transform:translate(0, 0);}
|
||||
to {-moz-transform: translate(50px, -0px);}
|
||||
}
|
||||
|
||||
|
||||
.table-img, .coloured-card-img, .coloured-card-btn-img, .pin-btn-img, .share-btn-img, .social-img{
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-webkit-animation-name: Floatingy;
|
||||
-moz-animation-name: Floatingy;
|
||||
float: left;
|
||||
}
|
||||
.table-img{
|
||||
-webkit-animation-duration: 14s;
|
||||
-moz-animation-duration: 14s;
|
||||
-webkit-animation-name: Floatingx;
|
||||
-moz-animation-name: Floatingx;
|
||||
}
|
||||
|
||||
.coloured-card-img{
|
||||
-webkit-animation-duration: 10s;
|
||||
-moz-animation-duration: 10s;
|
||||
-webkit-animation-name: Floatingx;
|
||||
-moz-animation-name: Floatingx;
|
||||
}
|
||||
|
||||
.coloured-card-btn-img{
|
||||
-webkit-animation-duration: 18s;
|
||||
-moz-animation-duration: 18s;
|
||||
}
|
||||
.pin-btn-img{
|
||||
-webkit-animation-duration: 15s;
|
||||
-moz-animation-duration: 15s;
|
||||
}
|
||||
.share-btn-img{
|
||||
-webkit-animation-duration: 11s;
|
||||
-moz-animation-duration: 11s;
|
||||
}
|
||||
.social-img{
|
||||
-webkit-animation-duration: 16s;
|
||||
-moz-animation-duration: 16s;
|
||||
-webkit-animation-name: Floatingx;
|
||||
-moz-animation-name: Floatingx;
|
||||
}
|
||||
|
||||
/* Presentation Page OnScroll Animation */
|
||||
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.animated.flipOutX,
|
||||
.animated.flipOutY,
|
||||
.animated.bounceIn,
|
||||
.animated.bounceOut {
|
||||
animation-duration: .75s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from, 20%, 53%, 80%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
40%, 43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
70% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -15px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
}
|
||||
.bounce {
|
||||
animation-name: bounce;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
from, 50%, to {
|
||||
opacity: 1;
|
||||
}
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.flash {
|
||||
animation-name: flash;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 827 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 520 KiB After Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 454 KiB After Width: | Height: | Size: 654 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 312 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 632 KiB After Width: | Height: | Size: 556 KiB |
@ -6,7 +6,7 @@
|
||||
|
||||
* Product Page: http://www.creative-tim.com/product/vue-material-kit
|
||||
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/vue-material-kit/blob/master/LICENSE.md)
|
||||
|
||||
=========================================================
|
||||
|
||||
@ -22,13 +22,21 @@
|
||||
|
||||
//plugin css
|
||||
@import "material-kit/plugins/_perfect-scrollbar";
|
||||
@import "material-kit/plugins/_plugin-nouislider";
|
||||
|
||||
// Core CSS
|
||||
@import "material-kit/typography";
|
||||
@import "material-kit/sidebar-and-main-panel";
|
||||
@import "material-kit/buttons";
|
||||
@import "material-kit/carousel";
|
||||
@import "material-kit/autocomplete";
|
||||
@import "material-kit/misc";
|
||||
@import "material-kit/images";
|
||||
@import "material-kit/info-areas";
|
||||
@import "material-kit/datepicker";
|
||||
@import "material-kit/inputs";
|
||||
@import "material-kit/badges";
|
||||
@import "material-kit/progress";
|
||||
@import "material-kit/forms";
|
||||
@import "material-kit/alerts";
|
||||
@import "material-kit/tables";
|
||||
@ -37,8 +45,8 @@
|
||||
@import "material-kit/example-pages";
|
||||
@import "material-kit/checkboxes";
|
||||
@import "material-kit/togglebutton";
|
||||
@import "material-kit/ripples";
|
||||
@import "material-kit/pagination";
|
||||
@import "material-kit/radios";
|
||||
@import "material-kit/pills";
|
||||
@import "material-kit/dialogs";
|
||||
@import "material-kit/navbars";
|
||||
|
||||
@ -12,6 +12,13 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex-direction: unset;
|
||||
display: flow-root;
|
||||
padding: 0 31px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
b{
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
@ -21,23 +28,23 @@
|
||||
@include alert-color($gray-color);
|
||||
|
||||
&.alert-info{
|
||||
@include alert-color(lighten($brand-info,5%));
|
||||
@include alert-color(lighten($brand-info,3%));
|
||||
}
|
||||
|
||||
&.alert-danger{
|
||||
@include alert-color(lighten($brand-danger,5%));
|
||||
@include alert-color(lighten($brand-danger,3%));
|
||||
}
|
||||
|
||||
&.alert-primary{
|
||||
@include alert-color(lighten($brand-primary,5%));
|
||||
@include alert-color(lighten($brand-primary,3%));
|
||||
}
|
||||
|
||||
&.alert-warning{
|
||||
@include alert-color(lighten($brand-warning,5%));
|
||||
@include alert-color(lighten($brand-warning, 3%));
|
||||
}
|
||||
|
||||
&.alert-success{
|
||||
@include alert-color(lighten($brand-success,5%));
|
||||
@include alert-color(lighten($brand-success, 3%));
|
||||
}
|
||||
|
||||
|
||||
@ -52,7 +59,8 @@
|
||||
}
|
||||
|
||||
.close{
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
@ -61,6 +69,14 @@
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
i {
|
||||
font-size: 20px !important;
|
||||
color: $white-color !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
i[data-notify="icon"] {
|
||||
@ -72,21 +88,14 @@
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
span{
|
||||
display: block;
|
||||
max-width: 89%;
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: $margin-base;
|
||||
display: inline-block;
|
||||
margin-right: $margin-base;
|
||||
|
||||
i{
|
||||
margin-top: -7px;
|
||||
top: 5px;
|
||||
position: relative;
|
||||
}
|
||||
i{
|
||||
color: $white-color !important;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
34
src/assets/scss/material-kit/_autocomplete.scss
Normal file
34
src/assets/scss/material-kit/_autocomplete.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.md-menu-content:not(.md-select-menu) .md-menu-content-container .md-list {
|
||||
.md-list-item {
|
||||
margin: 0 .3125rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.md-list-item-button {
|
||||
background-color: transparent;
|
||||
color: $gray-dark !important;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: $brand-primary !important;
|
||||
@include shadow-big-color($brand-primary);
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.md-list-item-content {
|
||||
min-height: 38px;
|
||||
font-size: 13px;
|
||||
|
||||
span {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
src/assets/scss/material-kit/_badges.scss
Normal file
55
src/assets/scss/material-kit/_badges.scss
Normal file
@ -0,0 +1,55 @@
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: $border-radius-label;
|
||||
padding: 5px 12px;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
color: $white-color;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@include badge-color();
|
||||
}
|
||||
|
||||
|
||||
.badge-default[href]:hover,
|
||||
.badge-default[href]:focus {
|
||||
background-color: darken($gray-light, 5%);
|
||||
}
|
||||
|
||||
.badge-primary[href]:hover,
|
||||
.badge-primary[href]:focus {
|
||||
background-color: darken($brand-primary, 5%);
|
||||
}
|
||||
|
||||
.badge-info[href]:hover,
|
||||
.badge-info[href]:focus {
|
||||
background-color: darken($brand-info, 5%);
|
||||
}
|
||||
|
||||
.badge-success[href]:hover,
|
||||
.badge-success[href]:focus {
|
||||
background-color: darken($brand-success, 5%);
|
||||
}
|
||||
|
||||
.badge-warning[href]:hover,
|
||||
.badge-warning[href]:focus {
|
||||
background-color: darken($brand-warning, 5%);
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.badge-danger[href]:hover,
|
||||
.badge-danger[href]:focus {
|
||||
background-color: darken($brand-danger, 5%);
|
||||
}
|
||||
.badge-rose[href]:hover,
|
||||
.badge-rose[href]:focus {
|
||||
background-color: darken($brand-rose, 5%);
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
border: none;
|
||||
border-radius: $border-radius-base;
|
||||
position: relative;
|
||||
margin: 10px 1px;
|
||||
margin: .3125rem 1px;
|
||||
height: auto;
|
||||
line-height: 1.42857;
|
||||
|
||||
@ -11,6 +11,8 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
|
||||
@include social-buttons();
|
||||
|
||||
will-change: box-shadow, transform;
|
||||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s $mdb-animation-curve-default;
|
||||
@ -19,7 +21,7 @@
|
||||
padding: 12px 30px;
|
||||
}
|
||||
|
||||
&:not(.md-just-icon) .md-button-content i{
|
||||
&:not(.md-just-icon) .md-button-content i:not(.md-tab-icon){
|
||||
font-size: 1.1rem !important;
|
||||
height: 17px;
|
||||
}
|
||||
@ -36,6 +38,16 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
i{
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
&.md-white {
|
||||
@include btn-styles($white-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&.md-default{
|
||||
@include btn-styles($gray-light);
|
||||
@ -56,8 +68,8 @@
|
||||
&.md-danger{
|
||||
@include btn-styles($brand-danger);
|
||||
}
|
||||
&.md-white{
|
||||
@include btn-styles($white-color);
|
||||
&.md-rose{
|
||||
@include btn-styles($brand-rose);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
@ -66,7 +78,9 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.md-round{
|
||||
&.md-round,
|
||||
&.md-round.md-fab,
|
||||
&.md-round.md-just-icon{
|
||||
border-radius: $border-radius-extreme;
|
||||
}
|
||||
|
||||
@ -75,7 +89,7 @@
|
||||
font-size: 18px;
|
||||
margin-top: -2px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,30 +141,17 @@
|
||||
// Size variations
|
||||
&.md-lg .md-ripple{
|
||||
font-size: $mdb-btn-font-size-lg;
|
||||
padding: 18px 36px !important;
|
||||
padding: 1.125rem 2.25rem !important;
|
||||
line-height: 1.333333;
|
||||
}
|
||||
&.md-sm .md-ripple{
|
||||
padding: 0.40625rem 1.25rem !important;
|
||||
font-size: $mdb-btn-font-size-sm;
|
||||
}
|
||||
|
||||
&.btn-just-icon{
|
||||
font-size: 20px;
|
||||
padding: 12px 12px;
|
||||
line-height: 1em;
|
||||
|
||||
i{
|
||||
width: 20px;
|
||||
}
|
||||
&.btn-lg{
|
||||
font-size: 22px;
|
||||
padding: 13px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-fab,
|
||||
&.md-just-icon{
|
||||
font-size: 24px;
|
||||
height: 41px;
|
||||
min-width: 41px;
|
||||
width: 41px;
|
||||
@ -158,15 +159,16 @@
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 41px;
|
||||
border-radius: 50%;
|
||||
|
||||
i,
|
||||
& {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-button-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i{
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -210,3 +212,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md-group>.md-group:not(:last-child)>.md-button, .md-group>.md-button:not(:last-child):not(.dropdown-toggle){
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.md-group>.md-group:not(:first-child)>.md-button,
|
||||
.md-group>.md-button:not(:first-child){
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.md-group{
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
|
||||
.md-button{
|
||||
min-width: auto !important;
|
||||
width: auto !important;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 25px 0;
|
||||
margin: 30px 0;
|
||||
overflow: unset;
|
||||
|
||||
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
|
||||
border-radius: $border-radius-base;
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
border-radius: $border-radius-base + 3;
|
||||
color: $mdb-card-body-text;
|
||||
background: $mdb-card-body-background;
|
||||
|
||||
@ -54,7 +54,8 @@
|
||||
color: $gray-color;
|
||||
}
|
||||
.md-card-content{
|
||||
padding: 15px 20px;
|
||||
padding: .9375rem 1.875rem;
|
||||
line-height: inherit;
|
||||
|
||||
.category{
|
||||
margin: 0;
|
||||
@ -63,13 +64,14 @@
|
||||
|
||||
.md-card-header{
|
||||
@include shadow-big();
|
||||
margin: -20px $margin-base 0;
|
||||
margin: -40px 20px $margin-base;
|
||||
border-radius: $border-radius-base;
|
||||
padding: $padding-base;
|
||||
padding: $padding-base + 5 0;
|
||||
background-color: $gray-color;
|
||||
|
||||
.title{
|
||||
color: $white-color;
|
||||
.title,
|
||||
.card-title{
|
||||
color: $white-color;
|
||||
}
|
||||
.category{
|
||||
margin: 0;
|
||||
@ -213,35 +215,47 @@
|
||||
}
|
||||
|
||||
[data-background-color="purple"],
|
||||
.md-card-header-primary,
|
||||
.md-tabs.md-primary .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $purple-400, $purple-600);
|
||||
background: linear-gradient(60deg, $purple-400, $purple-700);
|
||||
@include shadow-big-color($brand-primary);
|
||||
}
|
||||
|
||||
[data-background-color="blue"],
|
||||
.md-card-header-info,
|
||||
.md-tabs.md-info .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $cyan-400, $cyan-600);
|
||||
background: linear-gradient(60deg, $cyan-400, $cyan-700);
|
||||
@include shadow-big-color($brand-info);
|
||||
}
|
||||
|
||||
[data-background-color="green"],
|
||||
.md-card-header-green,
|
||||
.md-tabs.md-success .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $green-400, $green-600);
|
||||
background: linear-gradient(60deg, $green-400, $green-700);
|
||||
@include shadow-big-color($brand-success);
|
||||
}
|
||||
|
||||
[data-background-color="orange"],
|
||||
.md-card-header-orange,
|
||||
.md-tabs.md-warning .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $orange-400, $orange-600);
|
||||
background: linear-gradient(60deg, $orange-400, $orange-700);
|
||||
@include shadow-big-color($brand-warning);
|
||||
}
|
||||
|
||||
[data-background-color="red"],
|
||||
.md-card-header-red,
|
||||
.md-tabs.md-danger .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $red-400, $red-600);
|
||||
background: linear-gradient(60deg, $red-400, $red-700);
|
||||
@include shadow-big-color($brand-danger);
|
||||
}
|
||||
|
||||
[data-background-color="rose"],
|
||||
.md-card-header-rose,
|
||||
.md-tabs.md-rose .md-tabs-navigation{
|
||||
background: linear-gradient(60deg, $pink-400, $pink-700);
|
||||
@include shadow-big-color($brand-rose);
|
||||
}
|
||||
|
||||
[data-background-color]{
|
||||
color: $white-color;
|
||||
|
||||
@ -304,7 +318,7 @@
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.content{
|
||||
.md-card-content{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@ -360,3 +374,176 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-tabs{
|
||||
margin-top: 0;
|
||||
|
||||
.md-list{
|
||||
flex-flow: initial;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&.page-subcategories > .md-card-header .title{
|
||||
margin-top: 30px !important;
|
||||
margin-bottom: 25px !important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.tab-content{
|
||||
padding: 20px 0 9px;
|
||||
}
|
||||
|
||||
.md-list-item + .md-list-item{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.md-list .md-list-item .md-list-item-button{
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
color: $black-color !important;
|
||||
transition: all .3s;
|
||||
border-radius: 30px;
|
||||
padding: 0;
|
||||
|
||||
.md-icon{
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
font-size: 30px !important;
|
||||
padding: 15px 0;
|
||||
color: $navbar-color;
|
||||
}
|
||||
|
||||
.md-list-item-content{
|
||||
min-height: auto;
|
||||
padding: 10px 15px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: rgba(199, 199, 199, .2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list .md-list-item:not(.active) .md-list-item-button .md-list-item-content {
|
||||
color: $navbar-color;
|
||||
}
|
||||
|
||||
.active.md-list-item .md-list-item-button{
|
||||
@include tabs-color($gray-color);
|
||||
color: $white-color !important;
|
||||
|
||||
.md-list-item-content .md-icon,
|
||||
&{
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active.md-list-item.md-rose .md-list-item-button{
|
||||
@include tabs-color($brand-rose);
|
||||
}
|
||||
.active.md-list-item.md-primary .md-list-item-button{
|
||||
@include tabs-color($brand-primary);
|
||||
}
|
||||
.active.md-list-item.md-warning .md-list-item-button{
|
||||
@include tabs-color($brand-warning);
|
||||
}
|
||||
.active.md-list-item.md-info .md-list-item-button{
|
||||
@include tabs-color($brand-info);
|
||||
}
|
||||
.active.md-list-item.md-success .md-list-item-button{
|
||||
@include tabs-color($brand-success);
|
||||
}
|
||||
.active.md-list-item.md-danger .md-list-item-button{
|
||||
@include tabs-color($brand-danger);
|
||||
}
|
||||
|
||||
&.md-card-plain {
|
||||
|
||||
.md-card-header,
|
||||
.md-list{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.title{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-column{
|
||||
.md-card-content{
|
||||
display: flex;
|
||||
flex-flow: initial;
|
||||
}
|
||||
|
||||
.md-list{
|
||||
flex-direction: column;
|
||||
min-width: 148px;
|
||||
|
||||
& .md-list-item + .md-list-item{
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content{
|
||||
padding: 0;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills-icons{
|
||||
.md-list .md-list-item .md-list-item-button {
|
||||
border-radius: 4px;
|
||||
|
||||
.md-list-item-content{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-login{
|
||||
margin: 0 auto;
|
||||
|
||||
.md-button{
|
||||
margin: .3125rem 1px;
|
||||
}
|
||||
|
||||
.social-line {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.md-card-header,
|
||||
.description{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.md-card-hidden{
|
||||
opacity: 0;
|
||||
transform: translate3d(0,-60px,0);
|
||||
}
|
||||
|
||||
.md-card-content{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.md-card-actions{
|
||||
border: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.team-player .md-card-actions {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
72
src/assets/scss/material-kit/_carousel.scss
Normal file
72
src/assets/scss/material-kit/_carousel.scss
Normal file
@ -0,0 +1,72 @@
|
||||
.VueCarousel-pagination {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.VueCarousel-wrapper {
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
|
||||
.VueCarousel-dot-button {
|
||||
display: inline-block;
|
||||
width: 10px !important;
|
||||
height: 10px !important;
|
||||
border: 1px solid #fff !important;
|
||||
background: #FFF !important;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
|
||||
border-radius: 2px !important;
|
||||
transition: all .3s linear;
|
||||
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.VueCarousel-dot--active .VueCarousel-dot-button {
|
||||
margin-top: 10px;
|
||||
transform: scale(1.5);
|
||||
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
&,
|
||||
.md-icon,
|
||||
.fa,
|
||||
.fab,
|
||||
.fas {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.VueCarousel-navigation-prev {
|
||||
left: 95px !important;
|
||||
|
||||
}
|
||||
|
||||
.VueCarousel-navigation-next {
|
||||
right: 95px !important;
|
||||
}
|
||||
|
||||
.VueCarousel-navigation-prev i,
|
||||
.VueCarousel-navigation-next i {
|
||||
font-size: 50px;
|
||||
color: $white-color !important;
|
||||
opacity: .5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.VueCarousel-slide {
|
||||
position: relative;
|
||||
}
|
||||
@ -16,13 +16,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled .md-checkbox-label{
|
||||
.md-checkbox-label{
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
color: #aaa;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&.md-theme-default.md-checked .md-checkbox-container{
|
||||
background-color: transparent !important;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
&.md-theme-default.md-checked .md-ripple{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.md-disabled .md-checkbox-label,
|
||||
&.md-disabled .md-checkbox-container{
|
||||
opacity: .26;
|
||||
border-color: rgba(0, 0, 0, .54) !important;
|
||||
}
|
||||
|
||||
&.md-checked.md-disabled .md-checkbox-container{
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(0, 0, 0, .54) !important;
|
||||
opacity: .26;
|
||||
|
||||
&:after{
|
||||
border-color: rgba(0, 0, 0, .54) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
80
src/assets/scss/material-kit/_datepicker.scss
Normal file
80
src/assets/scss/material-kit/_datepicker.scss
Normal file
@ -0,0 +1,80 @@
|
||||
.md-datepicker-body-header{
|
||||
.md-icon-button{
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
.md-button-content svg{
|
||||
fill: #212529 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-datepicker-header .md-datepicker-date-select{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.md-button[class*="md-datepicker-"]{
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
margin-left: 48px;
|
||||
margin-right: 48px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
.md-button-content{
|
||||
color: #212529 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-datepicker-day-button{
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-datepicker-today,
|
||||
.md-datepicker-selected{
|
||||
@include shadow-2dp-color($brand-primary);
|
||||
font-weight: lighter !important;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $brand-primary !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-datepicker-month-button,
|
||||
.md-datepicker-year-button{
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.md-datepicker-dayname,
|
||||
.md-datepicker-monthname,
|
||||
.md-datepicker-day{
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.md-datepicker-dialog .md-datepicker-header{
|
||||
background: linear-gradient(60deg, $purple-400, $purple-600) !important;
|
||||
}
|
||||
|
||||
.md-datepicker-overlay,
|
||||
.md-datepicker-dialog {
|
||||
z-index: 9999;
|
||||
}
|
||||
@ -1,99 +1,113 @@
|
||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
display: table;
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
|
||||
//
|
||||
// Modals
|
||||
// Material Design element Dialogs
|
||||
// --------------------------------------------------
|
||||
.modal-content {
|
||||
@include shadow-z-5();
|
||||
border-radius: $border-radius-large;
|
||||
.modal-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.picture{
|
||||
max-width: 150px;
|
||||
|
||||
img{
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title{
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
padding: 24px 24px 16px;
|
||||
|
||||
p{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
max-width: 500px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
transition: all .3s ease;
|
||||
box-shadow: 0 27px 24px 0 rgba(0,0,0,.2), 0 40px 77px 0 rgba(0,0,0,.22);
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
padding-top: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
padding-top: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 16px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 7px;
|
||||
|
||||
&.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 24px 0;
|
||||
border-top-left-radius: .3rem;
|
||||
border-top-right-radius: .3rem;
|
||||
|
||||
.md-button .md-button-content i{
|
||||
font-size: 16px !important;
|
||||
opacity: .5;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 24px;
|
||||
padding-top: 0;
|
||||
|
||||
.md-button{
|
||||
margin: 0;
|
||||
.md-ripple{
|
||||
padding-left: 16px !important;
|
||||
padding-right: 16px !important;
|
||||
width: auto;
|
||||
&.pull-left {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
button+button {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.modal-body + .modal-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.notice-modal + .modal-mask .modal-footer,
|
||||
.small-alert-modal + .modal-mask .modal-footer{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.instruction{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.small-alert-modal + .modal-mask .modal-container{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
.modal-body{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.modal-backdrop {
|
||||
background: rgba(0,0,0,0.3);
|
||||
|
||||
.modal-header h3 {
|
||||
margin-top: 0;
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
.modal{
|
||||
.modal-dialog{
|
||||
margin-top: 100px;
|
||||
}
|
||||
.modal-header .close{
|
||||
color: $gray-light;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.modal-default-button {
|
||||
position: absolute !important;
|
||||
right: 9px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.modal-notice {
|
||||
.instruction{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.picture{
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
.btn-raised{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-small{
|
||||
width: 300px;
|
||||
.modal-body{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@ -24,16 +24,13 @@
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
|
||||
.divider {
|
||||
background-color: rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
|
||||
li > a{
|
||||
font-size: $mdb-dropdown-font-size;
|
||||
padding: 10px 20px;
|
||||
padding: .625rem 1.5rem;
|
||||
margin: 0 5px;
|
||||
text-transform: none;
|
||||
line-height: 1.428571;
|
||||
color: $gray-dark !important;
|
||||
border-radius: $border-radius-small;
|
||||
@include transition($fast-transition-time, $transition-linear);
|
||||
@ -70,11 +67,6 @@
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
}
|
||||
|
||||
.divider{
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.navbar &,
|
||||
.navbar.navbar-default &{
|
||||
li{
|
||||
@ -90,6 +82,25 @@
|
||||
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
height: 0;
|
||||
margin: .5rem 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
font-size: .75rem;
|
||||
padding-top: .1875rem;
|
||||
padding-bottom: .1875rem;
|
||||
text-transform: none;
|
||||
color: #777;
|
||||
line-height: 1.428571;
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
padding: .5rem 1.25rem;
|
||||
}
|
||||
|
||||
.dropdown-toggle:not(.md-button):after,
|
||||
.dropdown-toggle .md-ripple:after
|
||||
{
|
||||
@ -103,6 +114,7 @@
|
||||
margin-left: .555em;
|
||||
border-top: .3em solid;
|
||||
border-bottom: 0;
|
||||
margin-top: -1px;
|
||||
will-change: transform;
|
||||
transition: transform 150ms linear;
|
||||
}
|
||||
@ -125,6 +137,10 @@
|
||||
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu.dropdown-menu-right {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-right{
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
.profile-page{
|
||||
.page-header{
|
||||
height: 380px;
|
||||
background-position: top center;
|
||||
background-position: center center;
|
||||
}
|
||||
.profile{
|
||||
text-align: center;
|
||||
@ -164,3 +164,19 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-page {
|
||||
.footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: $white-color;
|
||||
z-index: 1;
|
||||
|
||||
.copyright a{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -39,25 +39,12 @@ footer{
|
||||
.copyright{
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
.material-icons{
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
.md-icon{
|
||||
font-size: 18px !important;
|
||||
color: inherit !important;
|
||||
width: auto !important;
|
||||
min-width: auto !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.container{
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
19
src/assets/scss/material-kit/_images.scss
Normal file
19
src/assets/scss/material-kit/_images.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.img-thumbnail{
|
||||
border-radius: 16px;
|
||||
}
|
||||
.img-raised{
|
||||
@include shadow-big-image();
|
||||
}
|
||||
|
||||
.rounded{
|
||||
border-radius: $border-radius-large !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%!important;
|
||||
}
|
||||
|
||||
.responsive-image {
|
||||
max-width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
62
src/assets/scss/material-kit/_info-areas.scss
Normal file
62
src/assets/scss/material-kit/_info-areas.scss
Normal file
@ -0,0 +1,62 @@
|
||||
.info{
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
padding: 70px 0 30px;
|
||||
|
||||
.icon{
|
||||
color: $gray-color;
|
||||
|
||||
> i{
|
||||
font-size: 3.85rem !important;
|
||||
min-width: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: unset;
|
||||
}
|
||||
}
|
||||
.info-title{
|
||||
color: $black-color;
|
||||
margin: 0.875rem * 2 0 0.875rem;
|
||||
}
|
||||
p{
|
||||
color: $gray-color;
|
||||
}
|
||||
}
|
||||
|
||||
.info-horizontal{
|
||||
.icon{
|
||||
float: left;
|
||||
margin-top: 24px;
|
||||
margin-right: 10px;
|
||||
|
||||
>i{
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
}
|
||||
.description{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
&.icon-primary i{
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
&.icon-info i{
|
||||
color: $brand-info !important;
|
||||
}
|
||||
&.icon-success i{
|
||||
color: $brand-success !important;
|
||||
}
|
||||
&.icon-warning i{
|
||||
color: $brand-warning !important;
|
||||
}
|
||||
&.icon-danger i{
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
&.icon-rose i{
|
||||
color: $brand-rose !important;
|
||||
}
|
||||
}
|
||||
@ -386,16 +386,122 @@ select.form-control {
|
||||
}
|
||||
|
||||
.md-field{
|
||||
|
||||
.md-input,
|
||||
.md-textarea{
|
||||
height: 36px;
|
||||
padding: 7px 0;
|
||||
font-size: 14px !important;
|
||||
-webkit-text-fill-color: $black-color !important;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
&.md-has-textarea:not(.md-autogrow) label{
|
||||
left: 0;
|
||||
& > .fas ~ .md-input,
|
||||
& > .fab ~ .md-input,
|
||||
& > .fa ~ .md-input {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
& > .fas,
|
||||
& > .fab,
|
||||
& > .fa {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: .4s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
&.has-white {
|
||||
&:not(.md-disabled):after,
|
||||
&:before {
|
||||
background-color: $white-color !important;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.md-input {
|
||||
-webkit-text-fill-color: $white-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-textarea:not(.md-autogrow).md-focused .md-textarea, &.md-has-textarea:not(.md-autogrow).md-has-value .md-textarea{
|
||||
margin-top: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.md-valid{
|
||||
label{
|
||||
color: $brand-success !important;
|
||||
}
|
||||
|
||||
&:before{
|
||||
background-color: $brand-success !important;
|
||||
}
|
||||
|
||||
.md-icon{
|
||||
color: $brand-success !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-error{
|
||||
label{
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
|
||||
&:before{
|
||||
background-color: $brand-danger !important;
|
||||
}
|
||||
|
||||
.md-icon{
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-textarea:not(.md-autogrow) {
|
||||
.md-textarea {
|
||||
min-height: 85px;
|
||||
|
||||
}
|
||||
|
||||
label{
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-focused label,
|
||||
&.md-has-value label{
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
.md-helper-text{
|
||||
color: #6c757d !important;
|
||||
bottom: 18px;
|
||||
opacity: 0;
|
||||
font-size: .75rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.md-input{
|
||||
@include material-placeholder{
|
||||
font-size: 14px;
|
||||
color: #aaa !important;
|
||||
};
|
||||
}
|
||||
|
||||
&.md-focused{
|
||||
.md-helper-text{
|
||||
opacity: 1;
|
||||
bottom: -10px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar &.md-theme-default.md-focused .md-input{
|
||||
@ -463,8 +569,10 @@ select.form-control {
|
||||
}
|
||||
|
||||
.md-field .md-input-action{
|
||||
top: 8px;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
background-color: $white-color !important;
|
||||
|
||||
.md-button-content i{
|
||||
@ -476,3 +584,84 @@ select.form-control {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-field{
|
||||
padding-bottom: 10px;
|
||||
padding-top: 0;
|
||||
margin: 13px 0 0;
|
||||
min-height: auto;
|
||||
|
||||
&.md-focused label,
|
||||
&.md-field.md-has-value label{
|
||||
top: -.8rem;
|
||||
}
|
||||
|
||||
&.md-focused > .fa,
|
||||
&.md-focused > .fas,
|
||||
&.md-focused > .fab {
|
||||
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.success.md-icon,
|
||||
.error.md-icon{
|
||||
transition: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
font-size: 20px !important;
|
||||
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before{
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
label{
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
&.md-form-group,
|
||||
&.md-datepicker{
|
||||
> .md-icon{
|
||||
margin: 6px 0;
|
||||
color: inherit;
|
||||
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:after,
|
||||
&:before{
|
||||
width: calc(100% - 36px);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-static{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-category{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.md-label-on-right {
|
||||
padding: 20px 5px 0 0;
|
||||
text-align: left;
|
||||
|
||||
code{
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
color: #c7254e;
|
||||
background-color: #f9f2f4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ body {
|
||||
letter-spacing: unset;
|
||||
font-size: 1rem;
|
||||
color: $black-color;
|
||||
line-height: 1.5em;
|
||||
&.inverse {
|
||||
background: #333333;
|
||||
&, .form-control {
|
||||
@ -52,16 +53,6 @@ blockquote{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.serif-font{
|
||||
font-family: $font-family-serif;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $link-color;
|
||||
&:hover,
|
||||
@ -81,7 +72,7 @@ a{
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.open .dropdown-toggle:after {
|
||||
.dropdown.open .dropdown-toggle .md-ripple:after {
|
||||
@include rotate-180();
|
||||
}
|
||||
|
||||
@ -155,3 +146,44 @@ input[type="file"] > input[type="button"]::-moz-focus-inner {
|
||||
.md-theme-default :not(input):not(textarea)::selection{
|
||||
background-color: #c8c8c8 !important;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
|
||||
.section & {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.md-ripple .md-ripple-wave {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.small, small {
|
||||
font-size: 75%;
|
||||
color: #777;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ml-auto,
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mr-auto,
|
||||
.mx-auto {
|
||||
margin-right: auto!important;
|
||||
}
|
||||
|
||||
.md-layout {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
@ -25,6 +25,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tabs-color($color) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $color !important;
|
||||
@include shadow-big-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin badge-color() {
|
||||
&.badge-primary{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
&.badge-info {
|
||||
background-color: $brand-info;
|
||||
}
|
||||
&.badge-success{
|
||||
background-color: $brand-success;
|
||||
}
|
||||
&.badge-warning{
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
&.badge-danger{
|
||||
background-color: $brand-danger;
|
||||
}
|
||||
&.badge-rose{
|
||||
background-color: $brand-rose;
|
||||
}
|
||||
&.badge-default{
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin md-progress-bar($color) {
|
||||
&:not(.md-buffer){
|
||||
background: rgba($color,.2);
|
||||
}
|
||||
|
||||
.md-progress-bar-fill{
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
&.md-buffer {
|
||||
.md-progress-bar-fill{
|
||||
background-color: $color;
|
||||
}
|
||||
.md-progress-bar-buffer {
|
||||
border-color: rgba($color,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin dropdown-colors($variation-color) {
|
||||
.dropdown-menu {
|
||||
@ -217,10 +269,16 @@
|
||||
.open > &.dropdown-toggle:focus,
|
||||
.open > &.dropdown-toggle:hover {
|
||||
background-color: $btn-color !important;
|
||||
color: $white-color !important;
|
||||
|
||||
i{
|
||||
color: $white-color !important;
|
||||
@if $btn-color == $white-color {
|
||||
&,
|
||||
i{
|
||||
color: $gray-light !important;
|
||||
}
|
||||
} @else {
|
||||
&,
|
||||
i{
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -242,8 +300,9 @@
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
opacity: .65;
|
||||
pointer-events: none;
|
||||
box-shadow: none;
|
||||
opacity: .65;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -314,4 +373,10 @@
|
||||
&.md-twitter {
|
||||
@include social-buttons-color($social-twitter);
|
||||
}
|
||||
&.md-google {
|
||||
@include social-buttons-color($social-google);
|
||||
}
|
||||
&.md-github {
|
||||
@include social-buttons-color($social-github);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
min-height: 56px;
|
||||
padding: 10px 15px;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.md-transparent{
|
||||
background-color: transparent !important;
|
||||
@ -23,6 +25,7 @@
|
||||
z-index: 1030;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.md-list-item-content {
|
||||
@ -30,6 +33,8 @@
|
||||
.fa {
|
||||
font-size: 1.25rem;
|
||||
max-width: 24px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
@ -91,28 +96,27 @@
|
||||
// default color for dropdown
|
||||
@include dropdown-colors($brand-primary);
|
||||
@include toolbar-colors($gray-light, $white-color);
|
||||
.md-toolbar-toggle .icon-bar{
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
&.md-white {
|
||||
@include toolbar-colors($white-color, $navbar-color);
|
||||
|
||||
.md-button,
|
||||
.md-button:hover,
|
||||
.md-button:focus,
|
||||
.md-button:active,
|
||||
.md-button.active,
|
||||
.md-button:active:focus,
|
||||
.md-button:active:hover,
|
||||
.md-button.active:focus,
|
||||
.md-button.active:hover,
|
||||
.open > .md-button.dropdown-toggle,
|
||||
.open > .md-button.dropdown-toggle:focus,
|
||||
.open > .md-button.dropdown-toggle:hover {
|
||||
i,
|
||||
& {
|
||||
color: $navbar-color !important;
|
||||
.md-list-item .md-button.md-simple {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.open > &.dropdown-toggle,
|
||||
.open > &.dropdown-toggle:focus,
|
||||
.open > &.dropdown-toggle:hover {
|
||||
i,
|
||||
& {
|
||||
color: $navbar-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -137,6 +141,14 @@
|
||||
@include dropdown-colors($brand-success);
|
||||
@include toolbar-colors($brand-success, $white-color);
|
||||
}
|
||||
&.md-rose{
|
||||
@include dropdown-colors($brand-rose);
|
||||
@include toolbar-colors($brand-rose, $white-color);
|
||||
}
|
||||
&.md-dark{
|
||||
@include dropdown-colors($grey-900);
|
||||
@include toolbar-colors($grey-900, $white-color);
|
||||
}
|
||||
|
||||
&.navbar-transparent{
|
||||
background-color: transparent;
|
||||
@ -158,6 +170,23 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
padding: 0;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.profile-photo-small {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dropdown .md-button:not(.md-round).md-just-icon {
|
||||
height: unset;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.md-toolbar-toggle .md-button-content{
|
||||
display: block;
|
||||
align-items: unset;
|
||||
@ -220,8 +249,6 @@
|
||||
|
||||
.md-list{
|
||||
flex-flow: row;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: inherit !important;
|
||||
@ -278,66 +305,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.md-list-item a{
|
||||
color: inherit !important;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
font-weight: $font-weight-default;
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
text-transform: uppercase;
|
||||
overflow: visible;
|
||||
|
||||
border-radius: $border-radius-base;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.material-icons,
|
||||
.fa{
|
||||
font-size: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.btn:not(.btn-just-icon){
|
||||
.fa,
|
||||
.fab{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-top: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item{
|
||||
list-style: none;
|
||||
|
||||
.md-list-item-content:not(.md-ripple) {
|
||||
.router-link-active .md-ripple{
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
font-weight: $font-weight-default;
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
text-transform: uppercase;
|
||||
overflow: visible;
|
||||
|
||||
border-radius: $border-radius-base;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
text-decoration: none;
|
||||
|
||||
.md-button:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
|
||||
padding: 12px 15px;
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.material-icons,
|
||||
.md-icon,
|
||||
.fab,
|
||||
.fa{
|
||||
font-size: 20px !important;
|
||||
margin: 0 !important;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
i + p {
|
||||
margin: 0;
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.md-list-item{
|
||||
.md-list-item-container{
|
||||
.md-ripple{
|
||||
padding: 10px 15px;
|
||||
border-radius: $border-radius-base;
|
||||
@ -350,7 +363,7 @@
|
||||
|
||||
.md-icon {
|
||||
transition: none;
|
||||
margin-right: 5px;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
> span{
|
||||
@ -358,4 +371,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item-content:not(.md-ripple) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& .md-list-item-container .md-just-icon .md-ripple .md-icon {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple{
|
||||
padding: 12px 15px;
|
||||
min-height: 48px;
|
||||
|
||||
.md-button-content i {
|
||||
font-size: 20px !important;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,31 @@
|
||||
.page-link{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5rem .75rem;
|
||||
margin-left: 0;
|
||||
line-height: 1.25;
|
||||
color: #2196f3;
|
||||
background-color: transparent;
|
||||
border: 0 solid #dee2e6;
|
||||
}
|
||||
|
||||
.no-arrows{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination{
|
||||
> li > a,
|
||||
> li > span{
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
border-radius: .25rem;
|
||||
|
||||
> .page-item > .page-link,
|
||||
> .page-item > span{
|
||||
border: 0;
|
||||
border-radius: 30px !important;
|
||||
transition: all .3s;
|
||||
padding: 0px 11px;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@ -14,24 +34,25 @@
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $gray-color;
|
||||
color: $gray-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a,
|
||||
> .active > span{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
color: $gray-color;
|
||||
text-align: center;
|
||||
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
color: $white-color;
|
||||
color: $white-color !important;
|
||||
@include shadow-4dp-color($brand-primary);
|
||||
}
|
||||
|
||||
@ -39,8 +60,8 @@
|
||||
|
||||
// Colors
|
||||
&.pagination-info{
|
||||
> .active > a,
|
||||
> .active > span{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
@ -52,8 +73,8 @@
|
||||
}
|
||||
|
||||
&.pagination-success{
|
||||
> .active > a,
|
||||
> .active > span{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
@ -63,10 +84,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rose{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: $brand-rose;
|
||||
border-color: $brand-rose;
|
||||
@include shadow-4dp-color($brand-rose);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-warning{
|
||||
> .active > a,
|
||||
> .active > span{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
@ -78,8 +111,8 @@
|
||||
}
|
||||
|
||||
&.pagination-danger{
|
||||
> .active > a,
|
||||
> .active > span{
|
||||
> .page-item.active > a,
|
||||
> .page-item.active > span{
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
.md-tooltip{
|
||||
.md-tooltip,
|
||||
.popover{
|
||||
padding: 10px 15px;
|
||||
min-width: 130px;
|
||||
min-width: 140px;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
border-radius: $border-radius-base;
|
||||
background-color: $white-color !important;
|
||||
color: $gray !important;
|
||||
font-size: 12px;
|
||||
font-size: $tooltip-font-size;
|
||||
font-weight: 400;
|
||||
@include shadow-8dp();
|
||||
|
||||
@ -17,40 +18,147 @@
|
||||
height: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 5px;
|
||||
|
||||
vertical-align: .255em;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&[x-placement="top"]:after{
|
||||
border-top: 5px solid $white-color;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 5px solid transparent;
|
||||
&.popover {
|
||||
@include shadow-16dp();
|
||||
max-width: 276px;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
|
||||
&:after {
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[x-placement="top"]:after{
|
||||
border-top: 6px solid $white-color;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 6px solid transparent;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
&.popover[x-placement="top"]:after {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
transform: none;
|
||||
top: unset;
|
||||
border-top: 6px solid $white-color;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
|
||||
&[x-placement="bottom"]:after{
|
||||
top: -5px;
|
||||
border-top: 0;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid $white-color;
|
||||
border-left: 5px solid transparent;
|
||||
top: -6px;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $white-color;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
&.popover[x-placement="bottom"]:after{
|
||||
border-top: 0;
|
||||
top: -6px;
|
||||
transform: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $white-color;
|
||||
border-left: 6px solid transparent;
|
||||
}
|
||||
&[x-placement="left"]:after{
|
||||
margin-right: 0;
|
||||
right: -5px;
|
||||
top: 16px;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid $white-color;
|
||||
right: -6px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid $white-color;
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
left: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.popover[x-placement="left"]:after {
|
||||
right: -8px;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid $white-color;
|
||||
}
|
||||
|
||||
&[x-placement="right"]:after{
|
||||
margin-left: 0;
|
||||
left: -5px;
|
||||
top: 16px;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 5px solid $white-color;
|
||||
top: 50%;
|
||||
left: auto;
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
left: -6px;
|
||||
right: auto;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid $white-color;
|
||||
}
|
||||
|
||||
&.popover[x-placement="right"]:after {
|
||||
left: -8px;
|
||||
right: auto;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 6px solid $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
will-change: opacity, visibility;
|
||||
transition: opacity .15s linear, visibility .15s linear;
|
||||
|
||||
&:after {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
padding: 15px 15px 5px;
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: 10px 15px 15px;
|
||||
line-height: 1.4;
|
||||
color: #555;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.v-popover {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
23
src/assets/scss/material-kit/_progress.scss
Normal file
23
src/assets/scss/material-kit/_progress.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.md-progress-bar{
|
||||
height: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.md-rose{
|
||||
@include md-progress-bar($brand-rose);
|
||||
}
|
||||
&.md-danger{
|
||||
@include md-progress-bar($brand-danger);
|
||||
}
|
||||
&.md-primary{
|
||||
@include md-progress-bar($brand-primary);
|
||||
}
|
||||
&.md-info{
|
||||
@include md-progress-bar($brand-info);
|
||||
}
|
||||
&.md-success{
|
||||
@include md-progress-bar($brand-success);
|
||||
}
|
||||
&.md-warning{
|
||||
@include md-progress-bar($brand-warning);
|
||||
}
|
||||
}
|
||||
60
src/assets/scss/material-kit/_radios.scss
Normal file
60
src/assets/scss/material-kit/_radios.scss
Normal file
@ -0,0 +1,60 @@
|
||||
.md-radio{
|
||||
|
||||
.md-radio-label{
|
||||
padding-left: 10px;
|
||||
color: #aaa;
|
||||
font-size: .875rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.md-radio-container{
|
||||
border: 1px solid rgba(0,0,0,.54) !important;
|
||||
width: 15px;
|
||||
min-width: 15px;
|
||||
height: 15px;
|
||||
top: 2px;
|
||||
transition: .2s !important;
|
||||
|
||||
&:after{
|
||||
transform: scale3D(0,0,0);
|
||||
transition: .2s !important;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.md-ripple{
|
||||
overflow: hidden;
|
||||
|
||||
.md-ripple-wave{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-checked .md-radio-container{
|
||||
border-color: $brand-primary !important;
|
||||
|
||||
&:after{
|
||||
background-color: $brand-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled .md-radio-label,
|
||||
&.md-disabled .md-radio-container{
|
||||
opacity: .26;
|
||||
border-color: rgba(0, 0, 0, .54) !important;
|
||||
}
|
||||
|
||||
&.md-checked.md-disabled .md-radio-container{
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(0, 0, 0, .54) !important;
|
||||
opacity: .26;
|
||||
|
||||
&:after{
|
||||
background-color: rgba(0, 0, 0, .54) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -60,10 +60,6 @@
|
||||
/* Changes for small display */
|
||||
|
||||
@media (max-width: 991px){
|
||||
.md-toolbar .md-collapse{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.main-panel > .content{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@ -178,13 +174,27 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.off-canvas-sidebar{
|
||||
.md-toolbar-row {
|
||||
will-change: auto;
|
||||
transition-property: none;
|
||||
|
||||
}
|
||||
|
||||
.md-toolbar-row:not(.md-collapse-lateral) .md-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md-toolbar.md-transparent .md-list .md-list-item-content {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
|
||||
.md-collapse-lateral .md-collapse{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 260px;
|
||||
width: 230px !important;
|
||||
right: 0;
|
||||
left: auto;
|
||||
z-index: 1032;
|
||||
@ -196,7 +206,105 @@
|
||||
padding-right: 0px;
|
||||
padding-left: 0;
|
||||
|
||||
@include transform-translate-x(260px);
|
||||
.md-list {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.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,
|
||||
.md-list-item a .md-ripple p,
|
||||
.md-list-item-content i {
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.dropdown-toggle:not(.md-button):after,
|
||||
.dropdown-toggle .md-ripple:after {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu {
|
||||
background-color: transparent;
|
||||
position: static;
|
||||
border: 0;
|
||||
padding-bottom: 20px;
|
||||
transition: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
transform: none!important;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 0;
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
overflow-y: scroll;
|
||||
display: none;
|
||||
|
||||
li > a {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-with-icons li > a:hover i,
|
||||
.dropdown-menu.dropdown-with-icons li > a:focus i {
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
> a {
|
||||
margin: 5px 15px;
|
||||
}
|
||||
|
||||
.dropdown .dropdown,
|
||||
.md-list-item-content,
|
||||
.md-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.md-list-item-content .md-button {
|
||||
&,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-button .md-ripple {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: calc(100% - 30px);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin-left: 15px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.md-list-item-content {
|
||||
justify-content: flex-start;
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
@include transform-translate-x(230px);
|
||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
> ul {
|
||||
position: relative;
|
||||
@ -212,6 +320,7 @@
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: $white-color;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
}
|
||||
@ -238,42 +347,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-group{
|
||||
.form-control{
|
||||
font-size: 16px;
|
||||
height: 37px
|
||||
}
|
||||
.md-collapse-lateral .md-toolbar-toggle,
|
||||
.md-collapse-lateral .md-title {
|
||||
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
|
||||
.nav-open & {
|
||||
@include transform-translate-x(-230px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-form{
|
||||
.btn{
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-open .navbar-collapse{
|
||||
.nav-open .md-collapse-lateral .md-collapse{
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
.nav-open .navbar .container{
|
||||
left: -250px;
|
||||
}
|
||||
.nav-open .main-panel{
|
||||
left: 0;
|
||||
@include transform-translate-x(-260px);
|
||||
}
|
||||
|
||||
.nav-open .sidebar{
|
||||
@include shadow-big();
|
||||
}
|
||||
|
||||
.nav-open{
|
||||
.off-canvas-sidebar,
|
||||
.sidebar{
|
||||
@include transform-translate-x(0);
|
||||
}
|
||||
}
|
||||
|
||||
.close-layer{
|
||||
height: 100%;
|
||||
@ -501,28 +586,29 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
.container{
|
||||
justify-content: unset;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
.footer {
|
||||
text-align: center;
|
||||
|
||||
.container{
|
||||
justify-content: unset;
|
||||
nav{
|
||||
display: block;
|
||||
|
||||
nav{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-sm{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.hidden-lg,
|
||||
.hidden-md{
|
||||
display: none !important;
|
||||
}
|
||||
@ -559,6 +645,10 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hidden-lg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
@ -569,11 +659,16 @@
|
||||
bottom: -25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-wrapper .modal-container {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.md-toolbar-row,
|
||||
.section .container,
|
||||
.footer .container {
|
||||
max-width: 540px;
|
||||
}
|
||||
@ -581,6 +676,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md-toolbar-row,
|
||||
.section .container,
|
||||
.footer .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
@ -588,6 +684,7 @@
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md-toolbar-row,
|
||||
.section .container,
|
||||
.footer .container {
|
||||
max-width: 960px;
|
||||
}
|
||||
@ -595,6 +692,7 @@
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.md-toolbar-row,
|
||||
.section .container,
|
||||
.footer .container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
.withripple {
|
||||
position: relative;
|
||||
}
|
||||
.ripple-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
|
||||
.disabled &{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ripple {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
border-radius: 100%;
|
||||
background-color: #000; // fallback color
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
transform: scale(1);
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ripple.ripple-on {
|
||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.ripple.ripple-out {
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -45,6 +45,12 @@
|
||||
0 8px 16px rgba(0, 0, 0,.36);
|
||||
}
|
||||
|
||||
@mixin shadow-big-image(){
|
||||
// new box shadow optimized for Tables and Phones
|
||||
box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity * 2),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin button-shadow-color($color){
|
||||
box-shadow: 0 14px 26px -12px rgba($color, $mdb-shadow-key-penumbra-opacity * 3),
|
||||
0 4px 23px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
||||
@ -124,10 +130,9 @@
|
||||
}
|
||||
|
||||
@mixin shadow-big-color($color){
|
||||
box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2),
|
||||
0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity);
|
||||
|
||||
// new box shadow optimized for Tables and Phones
|
||||
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2),
|
||||
0 13px 24px -11px rgba($color, 0.60);
|
||||
}
|
||||
|
||||
@mixin shadow-navbar-color($color){
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.md-tabs-navigation{
|
||||
@include shadow-big();
|
||||
margin: -35px 0 0;
|
||||
margin: -50px -15px 0 -15px;
|
||||
border-radius: $border-radius-base;
|
||||
padding: $padding-base $padding-base $padding-base 75px;
|
||||
padding: $padding-base + 1 $padding-base $padding-base + 1 75px;
|
||||
background-color: $gray-color;
|
||||
overflow: auto;
|
||||
|
||||
.md-icon-label .md-button-content{
|
||||
flex-direction: row;
|
||||
@ -14,8 +15,16 @@
|
||||
top: 0px;
|
||||
left: 5px;
|
||||
}
|
||||
.md-tab {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.no-label & {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
.md-button,
|
||||
.md-button:hover,
|
||||
.md-button:focus,
|
||||
@ -31,9 +40,10 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.md-icon-label{
|
||||
.md-button{
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
@ -43,12 +53,12 @@
|
||||
}
|
||||
|
||||
.md-tab-icon + .md-tab-label{
|
||||
margin-top: 1px;
|
||||
margin-left: 5px;
|
||||
margin-top: 0px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.md-ripple{
|
||||
padding: 10px 15px;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,3 +79,9 @@
|
||||
.md-tab{
|
||||
padding: 15px 0 0 0;
|
||||
}
|
||||
|
||||
.md-card-nav-tabs.md-card-plain {
|
||||
.md-content.md-theme-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,87 +1,45 @@
|
||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
.md-switch .md-switch-thumb .md-ripple,
|
||||
.md-switch .md-switch-thumb:before {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, label, input, .toggle {
|
||||
user-select: none;
|
||||
.md-switch {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
||||
.md-switch-label {
|
||||
color: rgba(0,0,0,.26);
|
||||
font-size: 14px;
|
||||
line-height: 1.42857;
|
||||
font-weight: 400;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: $mdb-toggle-label-color;
|
||||
@include mdb-label-color-toggle-focus();
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.md-switch-container{
|
||||
background-color: rgba(80,80,80,.7) !important;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
text-align: left; // Issue #737 horizontal form
|
||||
margin-left: 5px;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled] + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 15px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -3px;
|
||||
border: 1px solid $mdb-checkbox-border-color;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
// Handle disabled
|
||||
&[disabled] {
|
||||
& + .toggle:after,
|
||||
&:checked + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
}
|
||||
.md-switch-thumb {
|
||||
background-color: $white-color !important;
|
||||
border: 1px solid rgba(0,0,0,.54);
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
|
||||
|
||||
& + .toggle:active:after,
|
||||
&[disabled] + .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.md-ripple .md-ripple-wave{
|
||||
background-color: rgba(0,0,0,.54) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Ripple off and disabled
|
||||
&:checked + .toggle:after {
|
||||
left: 15px;
|
||||
&.md-checked {
|
||||
.md-switch-thumb {
|
||||
border: 1px solid $brand-primary;
|
||||
|
||||
.md-ripple .md-ripple-wave{
|
||||
background-color: rgba(156,39,176,.7) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// set bg when checked
|
||||
input[type=checkbox]:checked {
|
||||
+ .toggle {
|
||||
background-color: rgba($brand-primary, (70/100)); // Switch bg on
|
||||
}
|
||||
|
||||
+ .toggle:after {
|
||||
border-color: $brand-primary; // Handle on
|
||||
}
|
||||
|
||||
+ .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
|
||||
}
|
||||
.md-switch-container {
|
||||
background-color: rgba(156,39,176,.7) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
h1,h2,h3,.h1,.h2,.h3{
|
||||
@ -50,6 +49,23 @@ h2.title{
|
||||
margin-bottom: $margin-base * 2;
|
||||
}
|
||||
|
||||
.title,
|
||||
.card-title,
|
||||
.info-title,
|
||||
.footer-brand,
|
||||
.footer-big h5,
|
||||
.footer-big h4,
|
||||
.media .media-heading{
|
||||
font-weight: $font-weight-extra-bold;
|
||||
font-family: $font-family-serif;
|
||||
|
||||
&,
|
||||
a{
|
||||
color: $black-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.description,
|
||||
.card-description,
|
||||
.footer-big p{
|
||||
@ -72,5 +88,8 @@ h2.title{
|
||||
color: $brand-info !important;
|
||||
}
|
||||
.text-gray{
|
||||
color: $gray-color !important;
|
||||
color: $gray-color !important;
|
||||
}
|
||||
.text-muted {
|
||||
color: #6c757d!important;
|
||||
}
|
||||
|
||||
@ -26,6 +26,8 @@ $white-transparent: rgba($white-color, .8);
|
||||
$gray-color: #999999 !default;
|
||||
$navbar-color: #555 !default;
|
||||
|
||||
//Tooltips
|
||||
$tooltip-font-size: 0.875rem !default;
|
||||
|
||||
$brand-primary: $purple !default;
|
||||
$brand-success: $green !default;
|
||||
@ -1073,6 +1075,10 @@ $mdb-shadow-key-umbra-opacity: 0.2 !default;
|
||||
$mdb-shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
|
||||
|
||||
|
||||
$fancy-shadow: 0 13px 39px -10px rgba(0, 0, 0, 0.65), 0 1px 25px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
|
||||
354
src/assets/scss/material-kit/plugins/_plugin-nouislider.scss
Normal file
354
src/assets/scss/material-kit/plugins/_plugin-nouislider.scss
Normal file
@ -0,0 +1,354 @@
|
||||
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
|
||||
/* Functional styling;
|
||||
* These styles are required for noUiSlider to function.
|
||||
* You don't need to change these rules to apply your design.
|
||||
*/
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-target {
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
.noUi-base,
|
||||
.noUi-connects {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
/* Wrapper for all connect elements.
|
||||
*/
|
||||
.noUi-connects {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-ms-transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
/* Offset direction
|
||||
*/
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
/* Give origins 0 height/width so they don't interfere with clicking the
|
||||
* connect elements.
|
||||
*/
|
||||
.noUi-vertical .noUi-origin {
|
||||
width: 0;
|
||||
}
|
||||
.noUi-horizontal .noUi-origin {
|
||||
height: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: absolute;
|
||||
}
|
||||
.noUi-state-tap .noUi-connect,
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
/* Slider size and handle placement;
|
||||
*/
|
||||
.noUi-horizontal {
|
||||
height: 2px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
// .noUi-horizontal .noUi-handle {
|
||||
// width: 34px;
|
||||
// height: 28px;
|
||||
// left: -17px;
|
||||
// top: -6px;
|
||||
// }
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
// .noUi-vertical .noUi-handle {
|
||||
// width: 28px;
|
||||
// height: 34px;
|
||||
// left: -6px;
|
||||
// top: -17px;
|
||||
// }
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
|
||||
right: -14px;
|
||||
left: auto;
|
||||
}
|
||||
/* Styling;
|
||||
* Giving the connect element a border radius causes issues with using transform: scale
|
||||
*/
|
||||
.noUi-target {
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.noUi-connects {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: #3FB8AF;
|
||||
}
|
||||
/* Handles and cursors;
|
||||
*/
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-handle {
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: -10px;
|
||||
top: -6px;
|
||||
cursor: pointer;
|
||||
border-radius: 100%;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
background: $white-color;
|
||||
@include shadow-2dp();
|
||||
|
||||
&.noUi-active {
|
||||
transform: scale3d(1.5, 1.5, 1);
|
||||
}
|
||||
}
|
||||
// .noUi-active {
|
||||
// box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
|
||||
// }
|
||||
/* Handle stripes;
|
||||
*/
|
||||
// .noUi-handle:before,
|
||||
// .noUi-handle:after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// height: 14px;
|
||||
// width: 1px;
|
||||
// background: #E8E7E6;
|
||||
// left: 14px;
|
||||
// top: 6px;
|
||||
// }
|
||||
// .noUi-handle:after {
|
||||
// left: 17px;
|
||||
// }
|
||||
// .noUi-vertical .noUi-handle:before,
|
||||
// .noUi-vertical .noUi-handle:after {
|
||||
// width: 14px;
|
||||
// height: 1px;
|
||||
// left: 6px;
|
||||
// top: 14px;
|
||||
// }
|
||||
// .noUi-vertical .noUi-handle:after {
|
||||
// top: 17px;
|
||||
// }
|
||||
/* Disabled state;
|
||||
*/
|
||||
[disabled] .noUi-connect {
|
||||
background: #B8B8B8;
|
||||
}
|
||||
[disabled].noUi-target,
|
||||
[disabled].noUi-handle,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Base;
|
||||
*
|
||||
*/
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
/* Values;
|
||||
*
|
||||
*/
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
/* Markings;
|
||||
*
|
||||
*/
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
}
|
||||
.noUi-marker-sub {
|
||||
background: #AAA;
|
||||
}
|
||||
.noUi-marker-large {
|
||||
background: #AAA;
|
||||
}
|
||||
/* Horizontal layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.noUi-value-horizontal {
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.noUi-rtl .noUi-value-horizontal {
|
||||
-webkit-transform: translate(50%, 50%);
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
}
|
||||
/* Vertical layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.noUi-value-vertical {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%, 0);
|
||||
padding-left: 25px;
|
||||
}
|
||||
.noUi-rtl .noUi-value-vertical {
|
||||
-webkit-transform: translate(0, 50%);
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
}
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
}
|
||||
.noUi-vertical .noUi-tooltip {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
background: #c8c8c8;
|
||||
|
||||
& .noUi-connect{
|
||||
background-color: $brand-primary;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-primary;
|
||||
}
|
||||
|
||||
&.slider-info{
|
||||
& .noUi-connect{
|
||||
background-color: $brand-info;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-info;
|
||||
}
|
||||
}
|
||||
&.slider-success{
|
||||
& .noUi-connect{
|
||||
background-color: $brand-success;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-success;
|
||||
}
|
||||
}
|
||||
&.slider-warning{
|
||||
& .noUi-connect{
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-warning;
|
||||
}
|
||||
}
|
||||
&.slider-danger{
|
||||
& .noUi-connect{
|
||||
background-color: $brand-danger;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.slider-rose{
|
||||
& .noUi-connect{
|
||||
background-color: $brand-rose;
|
||||
}
|
||||
|
||||
.noUi-handle{
|
||||
border-color: $brand-rose;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
src/components/Badge.vue
Normal file
34
src/components/Badge.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<component :is="tag" class="badge" :class="`badge-${type}`">
|
||||
<slot></slot>
|
||||
</component>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "badge",
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: "span"
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "default",
|
||||
validator: value => {
|
||||
let acceptedValues = [
|
||||
"primary",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"danger",
|
||||
"rose",
|
||||
"default"
|
||||
];
|
||||
return acceptedValues.indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
58
src/components/Modal.vue
Normal file
58
src/components/Modal.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<transition name="modal">
|
||||
<div class="modal-mask">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container" v-click-outside="closeModal">
|
||||
|
||||
<div class="modal-header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-body text-center">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "modal",
|
||||
methods: {
|
||||
closeModal: function() {
|
||||
this.$emit("close");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave-active .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
140
src/components/Pagination.vue
Normal file
140
src/components/Pagination.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<ul class="pagination" :class="paginationClass">
|
||||
<li class="page-item prev-page" :class="{'disabled': value === 1, 'no-arrows': noArrows}">
|
||||
<a class="page-link" aria-label="Previous" @click="prevPage">
|
||||
<template v-if="withText">Prev</template>
|
||||
<i class="fas fa-angle-double-left" v-else></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"
|
||||
v-for="item in range(minPage, maxPage)"
|
||||
:key="item"
|
||||
:class="{active: value === item}">
|
||||
<a class="page-link" @click="changePage(item)">{{item}}</a>
|
||||
</li>
|
||||
<li class="page-item page-pre next-page" :class="{ 'disabled': value === totalPages, 'no-arrows': noArrows}">
|
||||
<a class="page-link" aria-label="Next" @click="nextPage">
|
||||
<template v-if="withText">Next</template>
|
||||
<i class="fas fa-angle-double-right" v-else></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "pagination",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "primary",
|
||||
validator: value => {
|
||||
return [
|
||||
"default",
|
||||
"primary",
|
||||
"danger",
|
||||
"success",
|
||||
"warning",
|
||||
"info",
|
||||
"rose"
|
||||
].includes(value);
|
||||
}
|
||||
},
|
||||
withText: Boolean,
|
||||
noArrows: Boolean,
|
||||
pageCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
perPage: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginationClass() {
|
||||
return `pagination-${this.type}`;
|
||||
},
|
||||
totalPages() {
|
||||
if (this.pageCount > 0) return this.pageCount;
|
||||
if (this.total > 0) {
|
||||
return Math.ceil(this.total / this.perPage);
|
||||
}
|
||||
return 1;
|
||||
},
|
||||
pagesToDisplay() {
|
||||
if (this.totalPages > 0 && this.totalPages < this.defaultPagesToDisplay) {
|
||||
return this.totalPages;
|
||||
}
|
||||
return this.defaultPagesToDisplay;
|
||||
},
|
||||
minPage() {
|
||||
if (this.value >= this.pagesToDisplay) {
|
||||
const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
|
||||
const newMaxPage = pagesToAdd + this.value;
|
||||
if (newMaxPage > this.totalPages) {
|
||||
return this.totalPages - this.pagesToDisplay + 1;
|
||||
}
|
||||
return this.value - pagesToAdd;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
},
|
||||
maxPage() {
|
||||
if (this.value >= this.pagesToDisplay) {
|
||||
const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
|
||||
const newMaxPage = pagesToAdd + this.value;
|
||||
if (newMaxPage < this.totalPages) {
|
||||
return newMaxPage;
|
||||
} else {
|
||||
return this.totalPages;
|
||||
}
|
||||
} else {
|
||||
return this.pagesToDisplay;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultPagesToDisplay: 5
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
range(min, max) {
|
||||
let arr = [];
|
||||
for (let i = min; i <= max; i++) {
|
||||
arr.push(i);
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
changePage(item) {
|
||||
this.$emit("input", item);
|
||||
},
|
||||
nextPage() {
|
||||
if (this.value < this.totalPages) {
|
||||
this.$emit("input", this.value + 1);
|
||||
}
|
||||
},
|
||||
prevPage() {
|
||||
if (this.value > 1) {
|
||||
this.$emit("input", this.value - 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
perPage() {
|
||||
this.$emit("input", 1);
|
||||
},
|
||||
total() {
|
||||
this.$emit("input", 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
53
src/components/Parallax.vue
Normal file
53
src/components/Parallax.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div :style="styles">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function() {
|
||||
const context = this,
|
||||
args = arguments;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
}, wait);
|
||||
if (immediate && !timeout) func.apply(context, args);
|
||||
};
|
||||
}
|
||||
export default {
|
||||
name: "parallax",
|
||||
data() {
|
||||
return {
|
||||
styles: {},
|
||||
debounceTimeout: 6
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleScroll(scrollVal) {
|
||||
let oVal = scrollVal / 3;
|
||||
this.styles = {
|
||||
transform: `translate3d(0, ${oVal}px,0)`
|
||||
};
|
||||
},
|
||||
checkForParallax(scrollVal) {
|
||||
let fn = debounce(
|
||||
() => this.handleScroll(scrollVal),
|
||||
this.debounceTimeout
|
||||
);
|
||||
fn();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let self = this;
|
||||
window.addEventListener("scroll", function() {
|
||||
if (window.innerWidth > 991) {
|
||||
let scrollVal = this.scrollY;
|
||||
self.checkForParallax(scrollVal);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
90
src/components/Slider.vue
Normal file
90
src/components/Slider.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="slider"
|
||||
:class="[`slider-${type}`]"
|
||||
:disabled="disabled">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import noUiSlider from "nouislider";
|
||||
|
||||
export default {
|
||||
name: "slider",
|
||||
props: {
|
||||
value: [String, Array, Number],
|
||||
disabled: Boolean,
|
||||
start: {
|
||||
type: [Number, Array],
|
||||
default: 0
|
||||
},
|
||||
connect: {
|
||||
type: [Boolean, Array],
|
||||
default: () => [true, false]
|
||||
},
|
||||
range: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slider: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createSlider() {
|
||||
noUiSlider.create(this.$el, {
|
||||
start: this.value || this.start,
|
||||
connect: this.connect,
|
||||
range: this.range,
|
||||
...this.options
|
||||
});
|
||||
const slider = this.$el.noUiSlider;
|
||||
slider.on("slide", () => {
|
||||
let value = slider.get();
|
||||
if (value !== this.value) {
|
||||
this.$emit("input", value);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createSlider();
|
||||
},
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
const slider = this.$el.noUiSlider;
|
||||
const sliderValue = slider.get();
|
||||
if (newValue !== oldValue && sliderValue !== newValue) {
|
||||
if (Array.isArray(sliderValue) && Array.isArray(newValue)) {
|
||||
if (
|
||||
oldValue.length === newValue.length &&
|
||||
oldValue.every((v, i) => v === newValue[i])
|
||||
) {
|
||||
slider.set(newValue);
|
||||
}
|
||||
} else {
|
||||
slider.set(newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
79
src/components/Tabs.vue
Normal file
79
src/components/Tabs.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<md-card class="md-card-tabs"
|
||||
:class="[
|
||||
{'flex-column': flexColumn},
|
||||
{'nav-pills-icons': navPillsIcons},
|
||||
{'md-card-plain': plain}
|
||||
]">
|
||||
<md-card-header slot="header-title">
|
||||
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
<md-list class="nav-tabs">
|
||||
<md-list-item
|
||||
v-for="(item, index) in tabName"
|
||||
@click="switchPanel(tabName[index])"
|
||||
:key="item"
|
||||
:class="[
|
||||
{active: isActivePanel(tabName[index])},
|
||||
{[getColorButton(colorButton)]: isActivePanel(tabName[index])}]">
|
||||
{{tabName[index]}}
|
||||
<md-icon v-if="navPillsIcons">{{tabIcon[index]}}</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="tab-content">
|
||||
<div
|
||||
:class="getTabContent(index + 1)"
|
||||
v-for="(item, index) in tabName"
|
||||
:key="item"
|
||||
v-if="isActivePanel(tabName[index])">
|
||||
<slot :name="getTabContent(index + 1)">
|
||||
This is the default text!
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
flexColumn: Boolean,
|
||||
navPillsIcons: Boolean,
|
||||
plain: Boolean,
|
||||
tabName: Array,
|
||||
tabIcon: Array,
|
||||
colorButton: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activePanel: this.tabName[0]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchPanel(panel) {
|
||||
this.activePanel = panel;
|
||||
},
|
||||
isActivePanel(panel) {
|
||||
return this.activePanel == panel;
|
||||
},
|
||||
getColorButton: function(colorButton) {
|
||||
return "md-" + colorButton + "";
|
||||
},
|
||||
getTabContent: function(index) {
|
||||
return "tab-pane-" + index + "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
103
src/components/cards/LoginCard.vue
Normal file
103
src/components/cards/LoginCard.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<md-card class="md-card-login" :class="{'md-card-hidden': cardHidden}">
|
||||
<md-card-header :class="getClass(headerColor)">
|
||||
<slot name="title"></slot>
|
||||
<div class="social-line">
|
||||
<slot name="buttons"></slot>
|
||||
</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
<slot name="description"></slot>
|
||||
<slot name="inputs"></slot>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<slot name="footer"></slot>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "login-card",
|
||||
props: {
|
||||
headerColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cardHidden: true
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
setTimeout(this.showCard, 400);
|
||||
},
|
||||
methods: {
|
||||
showCard: function() {
|
||||
this.cardHidden = false;
|
||||
},
|
||||
getClass: function(headerColor) {
|
||||
return "md-card-header-" + headerColor + "";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
|
||||
<!-- <div class="card card-login card-hidden">
|
||||
<div class="card-header card-header-rose text-center">
|
||||
<h4 class="card-title">Log in</h4>
|
||||
<div class="social-line">
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-facebook-square"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
|
||||
<i class="fa fa-google-plus"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body ">
|
||||
<p class="card-description text-center">Or Be Classical</p>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">face</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="First Name...">
|
||||
</div>
|
||||
</span>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">email</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="email" class="form-control" placeholder="Email...">
|
||||
</div>
|
||||
</span>
|
||||
<span class="bmd-form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons">lock_outline</i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="password" class="form-control" placeholder="Password...">
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer justify-content-center">
|
||||
<a href="#pablo" class="btn btn-rose btn-link btn-lg">Lets Go</a>
|
||||
</div>
|
||||
</div> -->
|
||||
17
src/components/cards/NavTabsCard.vue
Normal file
17
src/components/cards/NavTabsCard.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<md-card class="md-card-nav-tabs" :class="{'no-label': noLabel, 'md-card-plain': tabsPlain}">
|
||||
<md-card-content>
|
||||
<slot name="content"></slot>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "nav-tabs-card",
|
||||
props: {
|
||||
noLabel: Boolean,
|
||||
tabsPlain: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,3 +1,21 @@
|
||||
import DropDown from "./Dropdown.vue";
|
||||
import Parallax from "./Parallax.vue";
|
||||
import Pagination from "./Pagination.vue";
|
||||
import Slider from "./Slider.vue";
|
||||
import Badge from "./Badge.vue";
|
||||
import NavTabsCard from "./cards/NavTabsCard.vue";
|
||||
import LoginCard from "./cards/LoginCard.vue";
|
||||
import Tabs from "./Tabs.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
export { DropDown };
|
||||
export {
|
||||
DropDown,
|
||||
Parallax,
|
||||
Pagination,
|
||||
Slider,
|
||||
Badge,
|
||||
NavTabsCard,
|
||||
LoginCard,
|
||||
Tabs,
|
||||
Modal
|
||||
};
|
||||
|
||||
@ -20,13 +20,16 @@
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/license">
|
||||
Licenses
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright">
|
||||
© {{year}}, Designed by
|
||||
<a href="https:///www.invisionapp.com" target="_blank">Invision</a>. Coded by
|
||||
<a href="https://github.com/cristijora" target="_blank">Cristi Jora</a> and
|
||||
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
|
||||
© {{year}}, made with <md-icon>favorite</md-icon> by
|
||||
<a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> for a better web.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<md-toolbar id="toolbar" md-elevation="0" class="md-transparent md-absolute" :class="extraNavClasses" :color-on-scroll="colorOnScroll">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-row md-collapse-lateral">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Material Kit</h3>
|
||||
<h3 class="md-title">Vue Material Kit</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-toolbar-toggle">
|
||||
<md-button class="md-just-icon md-simple md-toolbar-toggle" :class="{toggled: toggledClass}" @click="toggleNavbarMobile()">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@ -17,20 +17,22 @@
|
||||
<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-white md-simple dropdown-toggle" data-toggle="dropdown">
|
||||
<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="#">
|
||||
<a href="/">
|
||||
<i class="material-icons">layers</i>
|
||||
All Components
|
||||
<p>All Components</p>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">
|
||||
<i class="material-icons">content_paste</i>
|
||||
Documentation</a>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="material-icons">content_paste</i>
|
||||
<p>Documentation</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
@ -38,31 +40,63 @@
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<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>
|
||||
|
||||
<md-list-item href="https://twitter.com/CreativeTim" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<p class="hidden-lg hidden-md">Twitter</p>
|
||||
<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 hidden-md">Facebook</p>
|
||||
<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 hidden-md">Instagram</p>
|
||||
<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>
|
||||
|
||||
</md-toolbar>
|
||||
</template>
|
||||
|
||||
@ -104,10 +138,21 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extraNavClasses: ""
|
||||
extraNavClasses: "",
|
||||
toggledClass: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showDownload() {
|
||||
const excludedRoutes = ["login", "landing", "profile"];
|
||||
return excludedRoutes.every(r => r !== this.$route.name);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNavbarMobile() {
|
||||
this.NavbarStore.showNavbar = !this.NavbarStore.showNavbar;
|
||||
this.toggledClass = this.NavbarStore.showNavbar;
|
||||
},
|
||||
handleScroll() {
|
||||
let scrollValue =
|
||||
document.body.scrollTop || document.documentElement.scrollTop;
|
||||
@ -125,6 +170,12 @@ export default {
|
||||
},
|
||||
scrollListener() {
|
||||
resizeThrottler(this.handleScroll);
|
||||
},
|
||||
scrollToElement() {
|
||||
let element_id = document.getElementById("downloadSection");
|
||||
if (element_id) {
|
||||
element_id.scrollIntoView({ block: "end", behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
12
src/main.js
12
src/main.js
@ -8,6 +8,18 @@ Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(MaterialKit);
|
||||
|
||||
const NavbarStore = {
|
||||
showNavbar: false
|
||||
};
|
||||
|
||||
Vue.mixin({
|
||||
data() {
|
||||
return {
|
||||
NavbarStore
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import DropDown from "../components/Dropdown.vue";
|
||||
import { DropDown } from "../components";
|
||||
import { Parallax } from "../components";
|
||||
import { VPopover } from "v-tooltip";
|
||||
/**
|
||||
* You can register global components here and use them as a plugin in your main Vue instance
|
||||
*/
|
||||
@ -6,6 +8,8 @@ import DropDown from "../components/Dropdown.vue";
|
||||
const GlobalComponents = {
|
||||
install(Vue) {
|
||||
Vue.component("drop-down", DropDown);
|
||||
Vue.component(Parallax.name, Parallax);
|
||||
Vue.component("v-popover", VPopover);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import globalDirectives from "./globalDirectives";
|
||||
import globalMixins from "./globalMixins";
|
||||
import globalComponents from "./globalComponents";
|
||||
import VueLazyload from "vue-lazyload";
|
||||
import VueCarousel from "vue-carousel";
|
||||
|
||||
export default {
|
||||
install(Vue) {
|
||||
@ -13,6 +14,7 @@ export default {
|
||||
Vue.use(globalDirectives);
|
||||
Vue.use(globalMixins);
|
||||
Vue.use(globalComponents);
|
||||
Vue.use(VueCarousel);
|
||||
Vue.use(VueLazyload, {
|
||||
observer: true,
|
||||
// optional
|
||||
|
||||
@ -32,7 +32,7 @@ export default new Router({
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
components: { default: Login, header: MainNavbar },
|
||||
components: { default: Login, header: MainNavbar, footer: MainFooter },
|
||||
props: {
|
||||
header: { colorOnScroll: 400 }
|
||||
}
|
||||
|
||||
@ -1,17 +1,168 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="page-header header-filter clear-filter purple-filter" :style="headerStyle">
|
||||
<parallax class="page-header header-filter clear-filter purple-filter" :style="headerStyle">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<div class="brand">
|
||||
<h1>Material Kit.</h1>
|
||||
<h1>Vue Material Kit.</h1>
|
||||
<h3>A Badass VueMaterial.io Kit based on Material Design.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</parallax>
|
||||
<div class="main main-raised">
|
||||
a
|
||||
<div class="section section-basic">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<h2>Basic Elements</h2>
|
||||
</div>
|
||||
<basic-elements></basic-elements>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-navbars">
|
||||
<div class="container">
|
||||
<small-navigation></small-navigation>
|
||||
</div>
|
||||
<navigation></navigation>
|
||||
</div>
|
||||
<div class="section section-tabs">
|
||||
<div class="container">
|
||||
<tabs></tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-white">
|
||||
<div class="container">
|
||||
<nav-pills></nav-pills>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-notifications">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<h3>Notifications</h3>
|
||||
</div>
|
||||
</div>
|
||||
<notifications></notifications>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<typography-images></typography-images>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-javascript">
|
||||
<div class="container">
|
||||
<javascript-components></javascript-components>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="container text-center">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 ml-auto mr-auto text-center">
|
||||
<h2>Completed with examples</h2>
|
||||
<h4>The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-signup page-header" :style="signupImage">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-33 md-medium-size-40 md-small-size-50 md-xsmall-size-70 mx-auto text-center">
|
||||
<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">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</md-button>
|
||||
<md-button slot="buttons" to="#twitter" class="md-just-icon md-simple md-white">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</md-button>
|
||||
<md-button slot="buttons" to="#google" class="md-just-icon md-simple md-white">
|
||||
<i class="fab fa-google-plus-g"></i>
|
||||
</md-button>
|
||||
<p slot="description" class="description">Or Be Classical</p>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>face</md-icon>
|
||||
<label>First Name...</label>
|
||||
<md-input v-model="firstname"></md-input>
|
||||
</md-field>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>email</md-icon>
|
||||
<label>Email...</label>
|
||||
<md-input v-model="email" type="email"></md-input>
|
||||
</md-field>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>lock_outline</md-icon>
|
||||
<label>Password...</label>
|
||||
<md-input v-model="password"></md-input>
|
||||
</md-field>
|
||||
<md-button slot="footer" class="md-simple md-success md-lg">
|
||||
Get Started
|
||||
</md-button>
|
||||
</login-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item text-center">
|
||||
<md-button href="#/login" class="md-simple md-primary md-lg">View Login Page</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-examples">
|
||||
<div class="container-fluid text-center">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<a href="#/landing" target="_blank">
|
||||
<img :src="landing" alt="Rounded Image" class="img-raised rounded img-fluid">
|
||||
</a>
|
||||
<md-button href="#/landing" class="md-simple md-primary md-lg">View Landing Page</md-button>
|
||||
</div>
|
||||
<div class="md-layout-item">
|
||||
<a href="#/profile" target="_blank">
|
||||
<img :src="profile" alt="Rounded Image" class="img-raised rounded img-fluid">
|
||||
</a>
|
||||
<md-button href="#/profile" class="md-simple md-primary md-lg">View Profile Page</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<br><br>
|
||||
|
||||
<div class="md-layout text-center">
|
||||
<div class="md-layout-item md-size-66 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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="sharing-area text-center">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<h3>Thank you for supporting us!</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<md-button class="md-twitter"><i class="fab fa-twitter"></i>Tweet</md-button>
|
||||
<md-button class="md-facebook"><i class="fab fa-facebook-square"></i> Share</md-button>
|
||||
<md-button class="md-google"><i class="fab fa-google-plus"></i> Share</md-button>
|
||||
<md-button class="md-github"><i class="fab fa-github"></i> Star</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,21 +170,73 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicElements from "./components/BasicElementsSection";
|
||||
import Navigation from "./components/NavigationSection";
|
||||
import SmallNavigation from "./components/SmallNavigationSection";
|
||||
import Tabs from "./components/TabsSection";
|
||||
import NavPills from "./components/NavPillsSection";
|
||||
import Notifications from "./components/NotificationsSection";
|
||||
import TypographyImages from "./components/TypographyImagesSection";
|
||||
import JavascriptComponents from "./components/JavascriptComponentsSection";
|
||||
import { LoginCard } from "@/components";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BasicElements,
|
||||
Navigation,
|
||||
SmallNavigation,
|
||||
Tabs,
|
||||
NavPills,
|
||||
Notifications,
|
||||
TypographyImages,
|
||||
JavascriptComponents,
|
||||
LoginCard
|
||||
},
|
||||
name: "index",
|
||||
bodyClass: "index-page",
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
default: require("@/assets/img/bg2.jpg")
|
||||
},
|
||||
signup: {
|
||||
type: String,
|
||||
default: require("@/assets/img/city.jpg")
|
||||
},
|
||||
landing: {
|
||||
type: String,
|
||||
default: require("@/assets/img/landing.jpg")
|
||||
},
|
||||
profile: {
|
||||
type: String,
|
||||
default: require("@/assets/img/profile.jpg")
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
firstname: null,
|
||||
email: null,
|
||||
password: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.image})`
|
||||
};
|
||||
},
|
||||
signupImage() {
|
||||
return {
|
||||
backgroundImage: `url(${this.signup})`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.section-download {
|
||||
.md-button + .md-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<parallax class="section page-header header-filter" :style="headerStyle">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-small-size-70 md-xsmall-size-100">
|
||||
<h1 class="title">Your Story Starts With Us.</h1>
|
||||
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
|
||||
<br>
|
||||
<md-button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="md-danger md-lg" target="_blank"><i class="fas fa-play"></i> Watch video</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</parallax>
|
||||
<div class="main main-raised">
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto text-center">
|
||||
<h2 class="title text-center">Let's talk product</h2>
|
||||
<h5 class="description">This is the paragraph where you can write more details about your product. Keep you user engaged by providing meaningful information. Remember that by this time, the user is curious, otherwise he wouldn't scroll to get here. Add a button if you want the user to see more.</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features text-center">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="info">
|
||||
<div class="icon icon-info">
|
||||
<md-icon>chat</md-icon>
|
||||
</div>
|
||||
<h4 class="info-title">Free Chat</h4>
|
||||
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="info">
|
||||
<div class="icon icon-success">
|
||||
<md-icon>verified_user</md-icon>
|
||||
</div>
|
||||
<h4 class="info-title">Verified Users</h4>
|
||||
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="info">
|
||||
<div class="icon icon-danger">
|
||||
<md-icon>fingerprint</md-icon>
|
||||
</div>
|
||||
<h4 class="info-title">Fingerprint</h4>
|
||||
<p>Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section text-center">
|
||||
<div class="container">
|
||||
<h2 class="title">Here is our team</h2>
|
||||
<div class="team">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="team-player">
|
||||
<md-card class="md-card-plain">
|
||||
<div class="md-layout-item md-size-50 mx-auto">
|
||||
<img :src="teamImg1" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title">Gigi Hadid
|
||||
<br>
|
||||
<small class="card-description text-muted">Model</small>
|
||||
</h4>
|
||||
|
||||
<md-card-content>
|
||||
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions class="text-center">
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="team-player">
|
||||
<md-card class="md-card-plain">
|
||||
<div class="md-layout-item md-size-50 mx-auto">
|
||||
<img :src="teamImg2" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title">Christian Louboutin
|
||||
<br>
|
||||
<small class="card-description text-muted">Designer</small>
|
||||
</h4>
|
||||
|
||||
<md-card-content>
|
||||
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions class="text-center">
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-medium-size-33 md-small-size-100">
|
||||
<div class="team-player">
|
||||
<md-card class="md-card-plain">
|
||||
<div class="md-layout-item md-size-50 mx-auto">
|
||||
<img :src="teamImg3" alt="Thumbnail Image" class="img-raised rounded-circle img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title">Kendall Jenner
|
||||
<br>
|
||||
<small class="card-description text-muted">Model</small>
|
||||
</h4>
|
||||
|
||||
<md-card-content>
|
||||
<p class="card-description">You can write here details about one of your team members. You can give more details about what they do. Feel free to add some <a href="#">links</a> for people to be able to follow them outside the site.</p>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions class="text-center">
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section section-contacts">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<h2 class="text-center title">Work with us</h2>
|
||||
<h4 class="text-center description">Divide details about your product or agency work into parts. Write a few lines about each one and contact us about any further collaboration. We will responde get back to you in a couple of hours.</h4>
|
||||
<form class="contact-form">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50">
|
||||
<md-field>
|
||||
<label>Your Name</label>
|
||||
<md-input v-model="name" type="text"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50">
|
||||
<md-field>
|
||||
<label>Your Email</label>
|
||||
<md-input v-model="email" type="email"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
</div>
|
||||
<md-field maxlength="5">
|
||||
<label>Your Message</label>
|
||||
<md-textarea v-model="message"></md-textarea>
|
||||
</md-field>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-33 mx-auto text-center">
|
||||
<md-button class="md-primary">Send Message</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
bodyClass: "landing-page",
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: require("@/assets/img/bg7.jpg")
|
||||
},
|
||||
teamImg1: {
|
||||
type: String,
|
||||
default: require("@/assets/img/faces/avatar.jpg")
|
||||
},
|
||||
teamImg2: {
|
||||
type: String,
|
||||
default: require("@/assets/img/faces/christian.jpg")
|
||||
},
|
||||
teamImg3: {
|
||||
type: String,
|
||||
default: require("@/assets/img/faces/kendall.jpg")
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: null,
|
||||
email: null,
|
||||
message: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.header})`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-card-actions.text-center {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.contact-form {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.md-has-textarea + .md-layout {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<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">
|
||||
<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">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</md-button>
|
||||
<md-button slot="buttons" to="#twitter" class="md-just-icon md-simple md-white">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</md-button>
|
||||
<md-button slot="buttons" to="#google" class="md-just-icon md-simple md-white">
|
||||
<i class="fab fa-google-plus-g"></i>
|
||||
</md-button>
|
||||
<p slot="description" class="description">Or Be Classical</p>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>face</md-icon>
|
||||
<label>First Name...</label>
|
||||
<md-input v-model="firstname"></md-input>
|
||||
</md-field>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>email</md-icon>
|
||||
<label>Email...</label>
|
||||
<md-input v-model="email" type="email"></md-input>
|
||||
</md-field>
|
||||
<md-field class="md-form-group" slot="inputs">
|
||||
<md-icon>lock_outline</md-icon>
|
||||
<label>Password...</label>
|
||||
<md-input v-model="password"></md-input>
|
||||
</md-field>
|
||||
<md-button slot="footer" class="md-simple md-success md-lg">
|
||||
Get Started
|
||||
</md-button>
|
||||
</login-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LoginCard } from "@/components";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LoginCard
|
||||
},
|
||||
bodyClass: "login-page",
|
||||
data() {
|
||||
return {
|
||||
firstname: null,
|
||||
email: null,
|
||||
password: null
|
||||
};
|
||||
},
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: require("@/assets/img/profile_city.jpg")
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.header})`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<parallax class="section page-header header-filter" :style="headerStyle"></parallax>
|
||||
<div class="main main-raised">
|
||||
<div class="section profile-content">
|
||||
<div class="container">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 mx-auto">
|
||||
<div class="profile">
|
||||
<div class="avatar">
|
||||
<img :src="img" alt="Circle Image" class="img-raised rounded-circle img-fluid">
|
||||
</div>
|
||||
<div class="name">
|
||||
<h3 class="title">Christian Louboutin</h3>
|
||||
<h6>Designer</h6>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-dribbble"><i class="fab fa-dribbble"></i></md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-twitter"><i class="fab fa-twitter"></i></md-button>
|
||||
<md-button href="javascript:void(0)" class="md-just-icon md-simple md-pinterest"><i class="fab fa-pinterest"></i></md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description text-center">
|
||||
<p>An artist of considerable range, Chet Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p>
|
||||
</div>
|
||||
<div class="profile-tabs">
|
||||
<tabs
|
||||
:tab-name="['Studio', 'Work', 'Favorite']"
|
||||
:tab-icon="['camera', 'palette', 'favorite']"
|
||||
plain
|
||||
nav-pills-icons
|
||||
color-button="primary">
|
||||
|
||||
<!-- here you can add your content for tab-content -->
|
||||
<template slot="tab-pane-1">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-25 ml-auto">
|
||||
<img :src="tabPane1[0].image" class="rounded">
|
||||
<img :src="tabPane1[1].image" class="rounded">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 mr-auto">
|
||||
<img :src="tabPane1[3].image" class="rounded">
|
||||
<img :src="tabPane1[2].image" class="rounded">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="tab-pane-2">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-25 ml-auto">
|
||||
<img :src="tabPane2[0].image" class="rounded">
|
||||
<img :src="tabPane2[1].image" class="rounded">
|
||||
<img :src="tabPane2[2].image" class="rounded">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 mr-auto">
|
||||
<img :src="tabPane2[3].image" class="rounded">
|
||||
<img :src="tabPane2[4].image" class="rounded">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="tab-pane-3">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-25 ml-auto">
|
||||
<img :src="tabPane3[0].image" class="rounded">
|
||||
<img :src="tabPane3[1].image" class="rounded">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 mr-auto">
|
||||
<img :src="tabPane3[2].image" class="rounded">
|
||||
<img :src="tabPane3[3].image" class="rounded">
|
||||
<img :src="tabPane3[4].image" class="rounded">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tabs } from "@/components";
|
||||
export default {
|
||||
components: {
|
||||
Tabs
|
||||
},
|
||||
bodyClass: "profile-page",
|
||||
data() {
|
||||
return {
|
||||
tabPane1: [
|
||||
{ image: require("@/assets/img/examples/studio-1.jpg") },
|
||||
{ image: require("@/assets/img/examples/studio-2.jpg") },
|
||||
{ image: require("@/assets/img/examples/studio-4.jpg") },
|
||||
{ image: require("@/assets/img/examples/studio-5.jpg") }
|
||||
],
|
||||
tabPane2: [
|
||||
{ image: require("@/assets/img/examples/olu-eletu.jpg") },
|
||||
{ image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
|
||||
{ image: require("@/assets/img/examples/cynthia-del-rio.jpg") },
|
||||
{ image: require("@/assets/img/examples/mariya-georgieva.jpg") },
|
||||
{ image: require("@/assets/img/examples/clem-onojegaw.jpg") }
|
||||
],
|
||||
tabPane3: [
|
||||
{ image: require("@/assets/img/examples/mariya-georgieva.jpg") },
|
||||
{ image: require("@/assets/img/examples/studio-3.jpg") },
|
||||
{ image: require("@/assets/img/examples/clem-onojeghuo.jpg") },
|
||||
{ image: require("@/assets/img/examples/olu-eletu.jpg") },
|
||||
{ image: require("@/assets/img/examples/studio-1.jpg") }
|
||||
]
|
||||
};
|
||||
},
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
default: require("@/assets/img/city-profile.jpg")
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: require("@/assets/img/faces/christian.jpg")
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headerStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.header})`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.profile-tabs /deep/ {
|
||||
.md-card-tabs .md-list {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[class*="tab-pane-"] {
|
||||
margin-top: 3.213rem;
|
||||
padding-bottom: 50px;
|
||||
|
||||
img {
|
||||
margin-bottom: 2.142rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
src/views/components/BasicElementsSection.vue
Normal file
259
src/views/components/BasicElementsSection.vue
Normal file
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="buttons">
|
||||
<div class="title">
|
||||
<h3>Buttons <br>
|
||||
<small>Pick your style</small>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<md-button class="md-primary">Default</md-button>
|
||||
<md-button class="md-primary md-round">Round</md-button>
|
||||
<md-button class="md-primary"><md-icon >favorite</md-icon> With Icon</md-button>
|
||||
<md-button class="md-primary md-just-icon md-round"><md-icon >favorite</md-icon></md-button>
|
||||
<md-button class="md-primary md-simple">Simple</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h3><small>Pick your size</small></h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<div class="vertical-center">
|
||||
<md-button class="md-primary md-sm">Small</md-button>
|
||||
<md-button class="md-primary">Regular</md-button>
|
||||
<md-button class="md-primary md-lg">Large</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h3><small>Pick your color</small></h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto">
|
||||
<md-button>Default</md-button>
|
||||
<md-button class="md-primary">Primary</md-button>
|
||||
<md-button class="md-info">Info</md-button>
|
||||
<md-button class="md-success">Success</md-button>
|
||||
<md-button class="md-warning">Warning</md-button>
|
||||
<md-button class="md-danger">Danger</md-button>
|
||||
<md-button class="md-rose">Rose</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end buttons -->
|
||||
<div class="space-50"></div>
|
||||
|
||||
<!-- Inputs -->
|
||||
<div id="inputs">
|
||||
<div class="title">
|
||||
<h3>Inputs</h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field>
|
||||
<md-input v-model="initial" placeholder="Regular"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field>
|
||||
<label>With Floating Label</label>
|
||||
<md-input v-model="floatingLabel" type="text"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field class="md-valid">
|
||||
<label>Success Input</label>
|
||||
<md-input v-model="success" type="text"></md-input>
|
||||
<md-icon>done</md-icon>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field class="md-error">
|
||||
<label>Error Input</label>
|
||||
<md-input v-model="error" type="text"></md-input>
|
||||
<md-icon>clear</md-icon>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field class="md-form-group">
|
||||
<md-icon>face</md-icon>
|
||||
<md-input v-model="withMIcon" placeholder="With Material Icons"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<md-field class="md-form-group">
|
||||
<i class="fas fa-users"></i>
|
||||
<md-input v-model="withFaIcon" placeholder="With Font Awesome Icons"></md-input>
|
||||
</md-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end inputs -->
|
||||
|
||||
<div class="space-50"></div>
|
||||
|
||||
<!-- Checkboxes/Radios/Toggle -->
|
||||
<div id="checkRadios">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<div class="title">
|
||||
<h3>Checkboxes</h3>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<md-checkbox v-model="checkbox1">Checked</md-checkbox>
|
||||
<md-checkbox v-model="checkbox2">Unchecked</md-checkbox>
|
||||
<md-checkbox v-model="checkbox3" disabled>Disabled Checked</md-checkbox>
|
||||
<md-checkbox v-model="checkbox4" disabled>Disabled Unchecked</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<div class="title">
|
||||
<h3>Radios</h3>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<md-radio v-model="radio1" :value="true">Radio is on</md-radio>
|
||||
<md-radio v-model="radio1" :value="false">Radio is off</md-radio>
|
||||
<md-radio v-model="radio2" :value="true" disabled>Disabled Radio is on</md-radio>
|
||||
<md-radio v-model="radio2" :value="false" disabled>Disabled Radio is off</md-radio>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
|
||||
<div class="title">
|
||||
<h3>Toggle Buttons</h3>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<md-switch v-model="switch1">Toogle is on</md-switch>
|
||||
<md-switch v-model="switch2">Toogle is off</md-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Checkboxes/Radios/Toggle -->
|
||||
|
||||
<div class="space-70"></div>
|
||||
|
||||
<!-- Progress/Pagination -->
|
||||
<div id="progress-pagination">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-xsmall-size-100">
|
||||
<div class="title">
|
||||
<h3>Progress</h3>
|
||||
</div>
|
||||
<md-progress-bar class="md-primary" :md-value="amount"></md-progress-bar>
|
||||
<md-progress-bar class="md-info" :md-value="amount2"></md-progress-bar>
|
||||
<md-progress-bar class="md-warning" md-mode="buffer" :md-value="buffer" :md-buffer="buffer"></md-progress-bar>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-xsmall-size-100">
|
||||
<div class="title">
|
||||
<h3>Pagination</h3>
|
||||
</div>
|
||||
<pagination
|
||||
no-arrows
|
||||
v-model="defaultPagination"
|
||||
:page-count="5">
|
||||
</pagination>
|
||||
<pagination
|
||||
class="pagination-info"
|
||||
v-model="infoPagination"
|
||||
with-text
|
||||
:page-count="5">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end progress/pagination -->
|
||||
|
||||
<div class="space-50"></div>
|
||||
|
||||
<!-- Sliders -->
|
||||
<div id="sliders">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-xsmall-size-100">
|
||||
<div class="title">
|
||||
<h3>Sliders</h3>
|
||||
</div>
|
||||
<slider v-model="sliders.simple">
|
||||
</slider>
|
||||
|
||||
<slider v-model="sliders.rangeSlider"
|
||||
type="info"
|
||||
:connect="true">
|
||||
</slider>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-xsmall-size-100">
|
||||
<div class="title">
|
||||
<h3>Badges</h3>
|
||||
</div>
|
||||
<badge type="default">Default</badge>
|
||||
<badge type="primary">Primary</badge>
|
||||
<badge type="info">Info</badge>
|
||||
<badge type="success">Success</badge>
|
||||
<badge type="warning">Warning</badge>
|
||||
<badge type="danger">Danger</badge>
|
||||
<badge type="rose">Rose</badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end sliders -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Pagination } from "@/components";
|
||||
import { Slider } from "@/components";
|
||||
import { Badge } from "@/components";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
Slider,
|
||||
Badge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultPagination: 3,
|
||||
infoPagination: 3,
|
||||
initial: null,
|
||||
floatingLabel: null,
|
||||
success: null,
|
||||
error: null,
|
||||
withMIcon: null,
|
||||
withFaIcon: null,
|
||||
checkbox1: true,
|
||||
checkbox2: null,
|
||||
checkbox3: true,
|
||||
checkbox4: null,
|
||||
radio1: true,
|
||||
radio2: false,
|
||||
switch1: true,
|
||||
switch2: null,
|
||||
amount: 30,
|
||||
amount2: 60,
|
||||
buffer: 40,
|
||||
sliders: {
|
||||
simple: 40,
|
||||
rangeSlider: [20, 60]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vertical-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.md-checkbox,
|
||||
.md-radio {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
199
src/views/components/JavascriptComponentsSection.vue
Normal file
199
src/views/components/JavascriptComponentsSection.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="javascriptComponents">
|
||||
<div class="title">
|
||||
<h2>Javascript components</h2>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-small-size-100">
|
||||
<div class="title">
|
||||
<h3>Modal</h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-33">
|
||||
<md-button class="md-primary md-block" @click="classicModal = true"><md-icon>library_books</md-icon> Classic</md-button>
|
||||
<modal v-if="classicModal" @close="classicModalHide">
|
||||
<template slot="header">
|
||||
<h4 class="modal-title">Modal Title</h4>
|
||||
<md-button class="md-simple md-just-icon md-round modal-default-button" @click="classicModalHide">
|
||||
<md-icon>clear</md-icon>
|
||||
</md-button>
|
||||
</template>
|
||||
|
||||
<template slot="body">
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
|
||||
</template>
|
||||
|
||||
<template slot="footer">
|
||||
<md-button class="md-simple">Nice Button</md-button>
|
||||
<md-button class="md-danger md-simple" @click="classicModalHide">Close</md-button>
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-80">
|
||||
<div class="title">
|
||||
<h3>DatePicker</h3>
|
||||
</div>
|
||||
<md-datepicker v-model="selectedDate">
|
||||
<label>Select date</label>
|
||||
</md-datepicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout-item md-small-size-100">
|
||||
<div class="title">
|
||||
<h3>Popovers</h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<v-popover
|
||||
offset="8"
|
||||
placement="left"
|
||||
>
|
||||
<md-button>On left</md-button>
|
||||
|
||||
<template slot="popover">
|
||||
<h3 class="popover-header">Popover on left</h3>
|
||||
<div class="popover-body">Here will be some very useful information about his popover. Here will be some very useful information about his popover.</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover
|
||||
offset="4"
|
||||
placement="top"
|
||||
>
|
||||
<md-button>On top</md-button>
|
||||
|
||||
<template slot="popover">
|
||||
<h3 class="popover-header">Popover on top</h3>
|
||||
<div class="popover-body">Here will be some very useful information about his popover.</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover
|
||||
offset="4"
|
||||
placement="bottom"
|
||||
>
|
||||
<md-button>On bottom</md-button>
|
||||
|
||||
<template slot="popover">
|
||||
<h3 class="popover-header">Popover on bottom</h3>
|
||||
<div class="popover-body">Here will be some very useful information about his popover.</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
<v-popover
|
||||
offset="8"
|
||||
placement="right"
|
||||
>
|
||||
<md-button>On right</md-button>
|
||||
|
||||
<template slot="popover">
|
||||
<h3 class="popover-header">Popover on right</h3>
|
||||
<div class="popover-body">Here will be some very useful information about his popover.</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-layout" id="tooltips">
|
||||
<div class="md-layout-item">
|
||||
<div class="title">
|
||||
<h3>Tooltips</h3>
|
||||
</div>
|
||||
|
||||
<md-button>
|
||||
on left
|
||||
<md-tooltip md-direction="left">Tooltip on left</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-button>
|
||||
on top
|
||||
<md-tooltip md-direction="top">Tooltip on top</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-button>
|
||||
on bottom
|
||||
<md-tooltip md-direction="bottom">Tooltip on bottom</md-tooltip>
|
||||
</md-button>
|
||||
<md-button>
|
||||
on right
|
||||
<md-tooltip md-direction="right">Tooltip on right</md-tooltip>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="title">
|
||||
<h3>Carousel</h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-66 mx-auto md-small-size-100">
|
||||
<md-card>
|
||||
<carousel
|
||||
:per-page="1"
|
||||
loop
|
||||
:speed="700"
|
||||
autoplay
|
||||
:autoplay-timeout="5000"
|
||||
:mouse-drag="false"
|
||||
navigationEnabled
|
||||
navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
|
||||
navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>">
|
||||
<slide>
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
<md-icon>location_on</md-icon>
|
||||
Somewhere Beyond, United States
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="carousel1" alt="carousel1">
|
||||
</slide>
|
||||
<slide>
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
<md-icon>location_on</md-icon>
|
||||
Yellowstone National Park, United States
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="carousel2" alt="carousel2">
|
||||
</slide>
|
||||
<slide>
|
||||
<div class="carousel-caption">
|
||||
<h4>
|
||||
<md-icon>location_on</md-icon>
|
||||
Yellowstone National Park, United States
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="carousel3" alt="carousel3">
|
||||
</slide>
|
||||
</carousel>
|
||||
</md-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from "@/components";
|
||||
export default {
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
classicModal: false,
|
||||
selectedDate: new Date("2018/03/26"),
|
||||
carousel1: require("@/assets/img/bg.jpg"),
|
||||
carousel2: require("@/assets/img/bg3.jpg"),
|
||||
carousel3: require("@/assets/img/city.jpg")
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
classicModalHide() {
|
||||
this.classicModal = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
75
src/views/components/NavPillsSection.vue
Normal file
75
src/views/components/NavPillsSection.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="navigation-pills">
|
||||
<div class="title">
|
||||
<h3>Navigation Pills</h3>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h3><small>With Icons</small></h3>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<tabs
|
||||
:tab-name="['Dashboard', 'Schedule', 'Tasks']"
|
||||
:tab-icon="['dashboard', 'schedule', 'list']"
|
||||
plain
|
||||
nav-pills-icons
|
||||
color-button="primary">
|
||||
|
||||
<!-- here you can add your content for tab-content -->
|
||||
<template slot="tab-pane-1">
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
<br><br>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI.
|
||||
</template>
|
||||
<template slot="tab-pane-2">
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
<br><br>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
</template>
|
||||
<template slot="tab-pane-3">
|
||||
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
||||
<br><br>
|
||||
Dynamically innovate resource-leveling customer service for state of the art customer service.
|
||||
</template>
|
||||
</tabs>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<tabs
|
||||
:tab-name="['Dashboard', 'Schedule']"
|
||||
:tab-icon="['dashboard', 'schedule']"
|
||||
plain
|
||||
flex-column
|
||||
nav-pills-icons
|
||||
color-button="primary">
|
||||
|
||||
<!-- here you can add your content for tab-content -->
|
||||
<template slot="tab-pane-1">
|
||||
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
||||
<br><br>
|
||||
Dramatically visualize customer directed convergence without revolutionary ROI.
|
||||
</template>
|
||||
<template slot="tab-pane-2">
|
||||
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
||||
<br><br>
|
||||
Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
</template>
|
||||
</tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tabs } from "@/components";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tabs
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
273
src/views/components/NavigationSection.vue
Normal file
273
src/views/components/NavigationSection.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="navigation">
|
||||
<div class="navigation-example" :style="bgImage">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<md-toolbar class="md-rose">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Brand</h3>
|
||||
<md-list>
|
||||
<md-list-item to="/">
|
||||
<p>Link</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Link</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<div class="md-autocomplete">
|
||||
<md-autocomplete class="search has-white" v-model="selectedEmployee" :md-options="employees" :md-open-on-focus="false">
|
||||
<label>Search...</label>
|
||||
</md-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-info">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Info Color</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item to="/">
|
||||
<p>Discover</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Profile</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Settings</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-primary">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Primary Color</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item to="/">
|
||||
<md-icon>explore</md-icon>
|
||||
<p>Discover</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<md-icon>account_circle</md-icon>
|
||||
<p>Profile</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<md-icon>settings</md-icon>
|
||||
<p>Settings</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-dark">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Navbar with notification</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Discover</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Whishlist</p>
|
||||
</md-list-item>
|
||||
|
||||
<li class="md-list-item">
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
|
||||
<div class="md-list-item-content">
|
||||
<md-button class="md-rose md-just-icon md-round"><md-icon>email</md-icon></md-button>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="md-list-item">
|
||||
<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" class="profile-photo">
|
||||
<div class="profile-photo-small" slot="title" data-toggle="dropdown">
|
||||
<img :src="img" alt="Circle Image">
|
||||
</div>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li class="dropdown-header">Dropdown header</li>
|
||||
<li><a href="#pablo" class="dropdown-item">Me</a></li>
|
||||
<li> <a href="#pablo" class="dropdown-item">Settings and other stuff</a></li>
|
||||
<li><a href="#pablo" class="dropdown-item">Sign Out</a></li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-white">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Navbar with profile</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Discover</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Whishlist</p>
|
||||
</md-list-item>
|
||||
|
||||
<li class="md-list-item">
|
||||
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean">
|
||||
<div class="md-list-item-content">
|
||||
<md-button class="md-rose md-round">Register</md-button>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-transparent">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Transparent</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
<p>Facebook</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<p>Twitter</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<i class="fab fa-instagram"></i>
|
||||
<p>Instagram</p>
|
||||
</md-list-item>
|
||||
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedEmployee: "",
|
||||
employees: [
|
||||
"Jim Halpert",
|
||||
"Dwight Schrute",
|
||||
"Michael Scott",
|
||||
"Pam Beesly",
|
||||
"Angela Martin",
|
||||
"Kelly Kapoor",
|
||||
"Ryan Howard",
|
||||
"Kevin Malone"
|
||||
]
|
||||
};
|
||||
},
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
default: require("@/assets/img/bg.jpg")
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: require("@/assets/img/faces/avatar.jpg")
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bgImage() {
|
||||
return {
|
||||
backgroundImage: `url(${this.image})`
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
68
src/views/components/NotificationsSection.vue
Normal file
68
src/views/components/NotificationsSection.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="notifications">
|
||||
<div class="alert alert-info">
|
||||
<div class="container">
|
||||
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-info')">
|
||||
<md-icon>clear</md-icon>
|
||||
</button>
|
||||
<div class="alert-icon">
|
||||
<md-icon>info_outline</md-icon>
|
||||
</div>
|
||||
<b> INFO ALERT </b> : You've got some friends nearby, stop looking at your phone and find them...
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<div class="container">
|
||||
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-success')">
|
||||
<md-icon>clear</md-icon>
|
||||
</button>
|
||||
<div class="alert-icon">
|
||||
<md-icon>check</md-icon>
|
||||
</div>
|
||||
|
||||
<b> SUCCESS ALERT </b> : Yuhuuu! You've got your $11.99 album from The Weeknd
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<div class="container">
|
||||
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-warning')">
|
||||
<md-icon>clear</md-icon>
|
||||
</button>
|
||||
<div class="alert-icon">
|
||||
<md-icon>warning</md-icon>
|
||||
</div>
|
||||
<b> WARNING ALERT </b> : Hey, it looks like you still have the "copyright © 2015" in your footer. Please update it!
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
<div class="container">
|
||||
<button type="button" aria-hidden="true" class="close" @click="event => removeNotify(event,'alert-danger')">
|
||||
<md-icon>clear</md-icon>
|
||||
</button>
|
||||
<div class="alert-icon">
|
||||
<md-icon>info_outline</md-icon>
|
||||
</div>
|
||||
<b> ERROR ALERT </b> : Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
removeNotify(e, notifyClass) {
|
||||
var target = e.target;
|
||||
while (target.className.indexOf(notifyClass) === -1) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
return target.parentNode.removeChild(target);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
149
src/views/components/SmallNavigationSection.vue
Normal file
149
src/views/components/SmallNavigationSection.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="menu">
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<div class="title">
|
||||
<h3>Menu</h3>
|
||||
</div>
|
||||
<md-toolbar class="md-primary">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">Menu</h3>
|
||||
<md-list>
|
||||
<md-list-item to="/">
|
||||
<p>Link</p>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<p>Link</p>
|
||||
</md-list-item>
|
||||
|
||||
<li class="md-list-item">
|
||||
<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">
|
||||
<p>Dropdown</p>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
|
||||
<li class="dropdown-header">Dropdown header</li>
|
||||
<li><a href="#pablo" class="dropdown-item">Action</a></li>
|
||||
<li> <a href="#pablo" class="dropdown-item">Another action</a></li>
|
||||
<li><a href="#pablo" class="dropdown-item">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a href="#pablo" class="dropdown-item">Separated link</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</md-list>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
<div class="md-collapse">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<div class="title">
|
||||
<h3>Menu with Icons</h3>
|
||||
</div>
|
||||
<md-toolbar class="md-info">
|
||||
<div class="md-toolbar-row">
|
||||
<div class="md-toolbar-section-start">
|
||||
<h3 class="md-title">icons</h3>
|
||||
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-just-icon md-simple md-white md-toolbar-toggle">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</md-button>
|
||||
|
||||
<div class="md-collapse">
|
||||
<md-list>
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<md-icon>email</md-icon>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item href="javascript:void(0)">
|
||||
<md-icon>face</md-icon>
|
||||
</md-list-item>
|
||||
|
||||
<li class="md-list-item">
|
||||
<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 md-just-icon" data-toggle="dropdown">
|
||||
<md-icon>settings</md-icon>
|
||||
</md-button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li class="dropdown-header">Dropdown header</li>
|
||||
<li><a href="#pablo" class="dropdown-item">Action</a></li>
|
||||
<li> <a href="#pablo" class="dropdown-item">Another action</a></li>
|
||||
<li><a href="#pablo" class="dropdown-item">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a href="#pablo" class="dropdown-item">Separated link</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li><a href="#pablo" class="dropdown-item">One more separated link</a></li>
|
||||
</ul>
|
||||
</drop-down>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h3>Navigation</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end menu -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
responsive: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onResponsiveInverted() {
|
||||
if (window.innerWidth < 500) {
|
||||
this.responsive = true;
|
||||
} else {
|
||||
this.responsive = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onResponsiveInverted();
|
||||
window.addEventListener("resize", this.onResponsiveInverted);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.onResponsiveInverted);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
64
src/views/components/TabsSection.vue
Normal file
64
src/views/components/TabsSection.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="nav-tabs">
|
||||
<h3>Navigation Tabs</h3>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<h3><small>Tabs with Icons on Card</small></h3>
|
||||
<nav-tabs-card no-label>
|
||||
<template slot="content">
|
||||
<md-tabs md-sync-route class="md-primary" md-alignment="left">
|
||||
|
||||
<md-tab id="tab-home" md-label="Profile" md-icon="face">
|
||||
<p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="tab-pages" md-label="Messages" md-icon="chat">
|
||||
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="tab-posts" md-label="Settings" md-icon="build">
|
||||
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</template>
|
||||
</nav-tabs-card>
|
||||
</div>
|
||||
<div class="md-layout-item md-size-50 md-small-size-100">
|
||||
<h3><small>Tabs on Plain Card</small></h3>
|
||||
<nav-tabs-card no-label tabs-plain>
|
||||
<template slot="content">
|
||||
<md-tabs md-sync-route class="md-danger" md-alignment="left">
|
||||
|
||||
<md-tab id="tab-home" md-label="Home">
|
||||
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="tab-pages" md-label="Updates">
|
||||
<p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="tab-posts" md-label="History">
|
||||
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</template>
|
||||
</nav-tabs-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NavTabsCard } from "@/components";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavTabsCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
152
src/views/components/TypographyImagesSection.vue
Normal file
152
src/views/components/TypographyImagesSection.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div id="typography">
|
||||
<div class="title">
|
||||
<h2>Typography</h2>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item">
|
||||
<div class="tim-typo">
|
||||
<h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h1 class="title"><span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h2 class="title"><span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h3 class="title"><span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h4 class="title"><span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<p><span class="tim-note">Paragraph</span>
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Quote</span>
|
||||
<div class="blockquote undefined">
|
||||
<p>
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
|
||||
</p>
|
||||
<small>
|
||||
Kanye West, Musician
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Muted Text</span>
|
||||
<p class="text-muted">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||
</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Primary Text</span>
|
||||
<p class="text-primary">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Info Text</span>
|
||||
<p class="text-info">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Success Text</span>
|
||||
<p class="text-success">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Warning Text</span>
|
||||
<p class="text-warning">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
|
||||
</p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<span class="tim-note">Danger Text</span>
|
||||
<p class="text-danger">
|
||||
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
|
||||
</div>
|
||||
<div class="tim-typo">
|
||||
<h2><span class="tim-note">Small Tag</span>
|
||||
Header with small subtitle <br>
|
||||
<small>Use "small" tag for the headers</small>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-50"></div>
|
||||
|
||||
<div id="images">
|
||||
<div class="title">
|
||||
<h2>Images</h2>
|
||||
</div>
|
||||
<div class="md-layout">
|
||||
<div class="md-layout-item md-size-20 md-xsmall-size-100" :class="{'text-center': responsive}">
|
||||
<h4>Rounded Image</h4>
|
||||
<img :src="image" alt="Rounded Image" class="rounded" :class="{'responsive-image': responsive}">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
|
||||
<h4>Circle Image</h4>
|
||||
<img :src="image" alt="Circle Image" class="rounded-circle" :class="{'responsive-image': responsive}">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
|
||||
<h4>Rounded Raised</h4>
|
||||
<img :src="image" alt="Raised Image" class="img-raised rounded" :class="{'responsive-image': responsive}">
|
||||
</div>
|
||||
<div class="md-layout-item md-size-20 md-xsmall-size-100 ml-auto" :class="{'text-center': responsive}">
|
||||
<h4>Circle Raised</h4>
|
||||
<img :src="image" alt="Thumbnail Image" class="img-raised rounded-circle" :class="{'responsive-image': responsive}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
image: require("@/assets/img/faces/avatar.jpg"),
|
||||
responsive: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onResponsiveInverted() {
|
||||
if (window.innerWidth < 600) {
|
||||
this.responsive = true;
|
||||
} else {
|
||||
this.responsive = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onResponsiveInverted();
|
||||
window.addEventListener("resize", this.onResponsiveInverted);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.onResponsiveInverted);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
</style>
|
||||
9
vue.config.js
Normal file
9
vue.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
css: {
|
||||
sourceMap: process.env.NODE_ENV !== "production" ? true : false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user