nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 19:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

- homepage mobile

Browse Source
This commit is contained in:
Peter Papp
2021-04-05 18:00:54 +02:00
parent 399748b01a
commit 2ca4d4a02d
8 changed files with 381 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Homepage/Components/OasisPricing.vue
+86 -2
View File
@@ -17,8 +17,10 @@
</h4>
</div>
<div class="container">
<div class="container" style="overflow: hidden">
<img src="/oasis/trees.svg" alt="oasis-trees" class="trees">
</div>
<div class="container">
<ul class="pricing-box">
<li v-for="(plan, i) in pricing" :key="i" class="box">
@@ -352,13 +354,43 @@
}
}
@media only screen and (max-width: 960px) {
.clouds .cloud {
&:nth-child(1) {
left: 1%;
top: 4%;
@include transform(scale(0.6))
}
&:nth-child(2) {
left: 2%;
top: 25%;
}
&:nth-child(3) {
right: -12%;
top: 2%;
@include transform(scale(-0.9, 0.9))
}
&:nth-child(4) {
right: -3%;
top: 26%;
@include transform(scale(0.5))
}
}
.pricing-box {
grid-template-columns: 1fr;
gap: 25px;
.box {
width: 100%;
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
&:nth-child(2) {
padding: 38px 40px 35px;
@@ -376,4 +408,56 @@
}
}
}
@media only screen and (max-width: 760px) {
.oasis-pricing {
.title-wrapper {
margin-bottom: -70px;
}
}
.trees {
margin-bottom: -130px;
margin-left: 0;
transform: scale(0.5) translatex(-110px);
}
.pricing-box .box {
.pricing-data {
@include font-size(36);
margin-bottom: 0;
}
.pricing-description {
margin-bottom: 35px;
}
}
.clouds .cloud {
&:nth-child(1) {
left: -10%;
}
&:nth-child(2) {
left: -18%;
top: 18%;
@include transform(scale(-0.5, 0.5))
}
&:nth-child(3) {
right: -22%;
top: 1%;
}
&:nth-child(4) {
right: 1%;
top: 24%;
@include transform(scale(0.4))
}
}
}
</style>