xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 12:14:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

changes for repsonsive

Browse Source
This commit is contained in:
Dragos 2018-09-27 12:59:38 +03:00
parent 41d1f90cda
commit a97239bcaa
3 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/assets/demo.css
View File

@ -164,3 +164,43 @@
.section-examples h5{ .section-examples h5{
margin-top: 30px; margin-top: 30px;
} }
.leaf1,
.leaf3,
.leaf4,
.leaf2 {
position: absolute;
z-index: 9;
}
.leaf4 {
right: 172px;
top: -122px;
width: 17%;
width: 32%;
transform: rotate(-83deg);
}
.leaf3 {
top: 21px;
right: -69px;
left: auto;
width: 24%;
transform: rotate(-13deg);
}
.leaf2 {
width: 25%;
left: 170px;
top: -28px;
transform: rotate(90deg);
}
.leaf1 {
transform: rotate(0deg);
right: auto;
top: 25px;
width: 15%;
left: -11px;
}

16
src/assets/scss/material-kit/_responsive.scss
View File

@ -354,6 +354,16 @@
} }
} }
.index-page .brand h1 {
font-size: 4.3rem;
}
.index-page .brand h3 {
max-width: 500px;
line-height: normal;
font-size: 1.7rem;
}
.nav-tabs { .nav-tabs {
overflow: auto; overflow: auto;
} }
@ -442,3 +452,9 @@
max-width: 1140px; max-width: 1140px;
} }
} }
@media screen and (max-width: 450px) {
.index-page .brand {
max-width: 300px;
}
}

59
src/views/Index.vue
View File

@ -288,63 +288,4 @@ export default {
display: flex; display: flex;
} }
} }
.leaf1,
.leaf3,
.leaf4,
.leaf2 {
position: absolute;
z-index: 9;
}
.leaf4 {
right: 172px;
top: -122px;
width: 17%;
width: 32%;
transform: rotate(-83deg);
}
.leaf3 {
top: 21px;
right: -69px;
left: auto;
width: 24%;
transform: rotate(-13deg);
}
.leaf2 {
width: 25%;
left: 170px;
top: -28px;
transform: rotate(90deg);
}
.leaf1 {
transform: rotate(0deg);
right: auto;
top: 25px;
width: 15%;
left: -11px;
}
@media all and (max-width: 768px) {
.index-page .image-wrapper /deep/ .brand {
h1 {
font-size: 4.3rem;
}
h3 {
max-width: 500px;
line-height: normal;
font-size: 1.7rem;
}
}
}
@media all and (max-width: 450px) {
.index-page .image-wrapper /deep/ .brand {
max-width: 300px;
}
}
</style> </style>