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

- added OasisContact.vue

Browse Source 
- Mobile responsivenes
This commit is contained in:
Peter Papp
2021-04-05 07:07:28 +02:00
parent 760d7a4687
commit 790da00420
19 changed files with 717 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Homepage/Components/OasisAboutUs.vue
+23 -3
View File
@@ -1,7 +1,7 @@
<template>
<div class="oasis-about-us container">
<div id="o-nas" class="oasis-about-us container">
<div class="title-wrapper container">
<h3 class="main-title">
<h3 class="main-title-sm">
Kto Jsme?
</h3>
<h4 class="sub-title-sm">
@@ -10,7 +10,7 @@
</div>
<ul class="info-list">
<li v-for="(item, i) in infoList" :key="i" class="info-list-item">
<check-icon size="26" class="icon" />
<check-icon size="30" class="icon" />
<p class="description">{{ item }}</p>
</li>
</ul>
@@ -45,4 +45,24 @@
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.info-list {
margin: 65px 0;
.info-list-item {
display: flex;
align-items: start;
margin-bottom: 40px;
.description {
max-width: 700px;
@include font-size(19);
color: $text-primary;
font-weight: 800;
line-height: 1.5;
}
}
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisContact.vue
+168
View File
@@ -0,0 +1,168 @@
<template>
<div id="kontakt-a-podpora" class="oasis-contact">
<div class="container">
<div class="title-wrapper">
<h3 class="main-title-sm">
Kontakt a Podpora
</h3>
<h4 class="sub-title-sm">
Jsme česká společnost, která pro fyzické a právnické osoby (živnostníky a firmy) poskytuje cloudové uložiště dle evropské směrnice.
</h4>
</div>
<div class="info-container">
<div class="info-grid">
<div class="info-wrapper">
<b class="info-title">Společnost:</b>
<p class="info-description">GDPR Cloud Solution, s.r.o., </p>
<p class="info-description">ICO: 08995281</p>
<p class="info-description">Sídlo: Zbraslavská 12/11, Malá Chuchle, 159 00 Praha 5</p>
</div>
<div class="info-wrapper">
<b class="info-title">Prodej:</b>
<div class="info-group">
<p class="info-description">John Doe</p>
<p class="info-description">+420 922 123 456</p>
</div>
<div class="info-group">
<p class="info-description">Jane Does</p>
<p class="info-description">+420 982 510 182</p>
</div>
</div>
<div class="info-wrapper">
<b class="info-title">Podpora:</b>
<p class="info-description">podpora@oasisdrive.cz</p>
<p class="info-description">+420 922 123 456</p>
</div>
<div class="info-wrapper">
<b class="info-title">Dokumenty:</b>
<div class="info-icon">
<file-text-icon size="22" />
<a href="/oasis/eu-smernice-gdpr.pdf" target="_blank" class="info-description">Směrnice EU (GDPR)</a>
</div>
</div>
</div>
<ValidationObserver v-if="! isSuccess" @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form" class="contact-form">
<b class="info-title">Zanechte nám vzkaz:</b>
<div class="block-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required" v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_contact_us.form.email_plac')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required" v-slot="{ errors }">
<textarea v-model="contact.message" :placeholder="$t('page_contact_us.form.message_plac')" rows="7" class="focus-border-theme" :class="{'is-error': errors[0]}"></textarea>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<InfoBox v-if="isError">
<p>{{ $t('page_contact_us.error_message') }}</p>
</InfoBox>
<button :disabled="isLoading" class="base-button theme-color" type="submit">
{{ $t('page_contact_us.form.submit_button') }}
</button>
</ValidationObserver>
</div>
</div>
</div>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import InfoBox from '@/components/Others/Forms/InfoBox'
import {required} from 'vee-validate/dist/rules'
import {FileTextIcon} from 'vue-feather-icons'
import axios from 'axios'
export default {
name: 'OasisAboutUs',
components: {
ValidationProvider,
ValidationObserver,
FileTextIcon,
required,
InfoBox,
},
data() {
return {
isLoading: false,
isSuccess: false,
isError: false,
contact: {
email: '',
message: '',
},
}
},
methods: {
async contactForm() {
// Validate fields
const isValid = await this.$refs.contactForm.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user token
axios
.post('/api/contact', this.contact)
.then(() => {
this.isSuccess = true
})
.catch(() => {
this.isError = true
})
.finally(() => {
this.isLoading = false
})
}
},
}
</script>
<style lang="scss" scoped>
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.oasis-contact {
.info-container {
grid-template-columns: 1fr;
gap: 0;
}
.info-grid {
gap: 0;
grid-template-columns: 1fr;
}
}
.info-wrapper {
padding-bottom: 30px;
.info-description {
@include font-size(18);
margin-bottom: 3px;
}
}
.contact-form {
padding-bottom: 40px;
button {
width: 100%;
}
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisFeatures.vue
+23 -4
View File
@@ -2,7 +2,7 @@
<div class="oasis-features text-center">
<div class="title-wrapper container">
<h3 class="main-title">
<h3 class="main-title-sm">
Proč je OasisDrive Výnimočný?
</h3>
<h4 class="sub-title-sm">
@@ -12,9 +12,9 @@
<ul class="features-box container">
<li v-for="(feature, i) in features" :key="i" class="box">
<cloud-icon v-if="feature.icon === 'cloud'" size="56" class="box-icon" />
<file-text-icon v-if="feature.icon === 'file'" size="56" class="box-icon" />
<lock-icon v-if="feature.icon === 'lock'" size="56" class="box-icon" />
<cloud-icon v-if="feature.icon === 'cloud'" size="72" class="box-icon" />
<file-text-icon v-if="feature.icon === 'file'" size="72" class="box-icon" />
<lock-icon v-if="feature.icon === 'lock'" size="72" class="box-icon" />
<h5 class="box-title">
{{ feature.title }}
@@ -95,4 +95,23 @@
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.features-box {
grid-template-columns: 1fr;
gap: 30px;
.box {
.box-title {
@include font-size(26);
}
.box-description {
@include font-size(18);
line-height: 1.55;
}
}
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisFooter.vue
+29 -42
View File
@@ -6,16 +6,9 @@
</router-link>
<nav>
<ul class="links">
<li v-for="(item, i) in navigation" :key="i">
<a :href="`#${item.href}`">
{{ item.title }}
</a>
</li>
</ul>
<ul class="links">
<li v-for="(item, i) in routes" :key="i">
<router-link :to="{name: item.route}" :class="{'highlighted': item.route === 'SignUp'}">
{{ item.title }}
<li v-if="legal.visibility" v-for="(legal, index) in config.legal" :key="index">
<router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}">
{{ legal.title }}
</router-link>
</li>
</ul>
@@ -37,38 +30,6 @@
'config'
]),
},
data() {
return {
navigation: [
{
title: 'O Nás',
href: 'o-nas',
},
/*{
title: 'Kariéra',
href: 'kariera',
},*/
{
title: 'Ceník',
href: 'cenik',
},
{
title: 'Podpora',
href: 'podpora',
},
],
routes: [
{
title: 'Prihlásit se',
route: 'SignIn',
},
{
title: 'Zaregistrovat se',
route: 'SignUp',
},
],
}
},
}
</script>
@@ -76,4 +37,30 @@
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.oasis-footer.container {
display: block;
text-align: center;
padding: 10px 0;
.logo {
margin: 0 auto;
display: block;
}
.links {
display: block;
li {
display: block;
a {
display: block;
padding: 10px;
}
}
}
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisHeader.vue
+14 -6
View File
@@ -7,12 +7,20 @@
<h2 class="sub-title">
Virtuální šanon, vždy s tebou.
</h2>
<router-link :to="{name: 'SignUp'}" class="theme-button">
Zaregistrujte se
</router-link>
<span class="log-in">
alebo <router-link :to="{name: 'SignIn'}">prihláste se</router-link>
</span>
<div v-if="config.isAuthenticated">
<router-link :to="{name: 'Files'}" class="theme-button">
{{ $t('go_to_files') }}
</router-link>
</div>
<div v-if="! config.isAuthenticated">
<router-link :to="{name: 'SignUp'}" class="theme-button">
Zaregistrujte se
</router-link>
<span class="log-in">
alebo <router-link :to="{name: 'SignIn'}">prihláste se</router-link>
</span>
</div>
</header>
</div>
</template>
resources/js/Oasis/Homepage/Components/OasisNavigation.vue
+63 -13
View File
@@ -1,5 +1,5 @@
<template>
<nav class="oasis-navigation navigation">
<nav class="oasis-navigation navigation" :class="{'white': isWhite}">
<div class="container">
<router-link :to="{name: 'Homepage'}" tag="div" class="logo">
<img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
@@ -7,10 +7,19 @@
</router-link>
<ul class="links">
<li v-for="(item, i) in navigation" :key="i">
<a :href="`#${item.href}`">{{ item.title }}</a>
<a v-if="$router.currentRoute.name !== 'DynamicPage'" @click="scrollToSection(item.href)">{{ item.title }}</a>
<router-link v-if="$router.currentRoute.name === 'DynamicPage'" :to="{path: '/', hash: `#${item.href}`}">
{{ item.title }}
</router-link>
</li>
</ul>
<div class="log-in">
<div v-if="config.isAuthenticated" class="log-in">
<router-link :to="{name: 'Files'}" class="base-button theme-color">
{{ $t('go_to_files') }}
</router-link>
</div>
<div v-if="! config.isAuthenticated" class="log-in">
<router-link :to="{name: 'SignIn'}" class="base-button theme-color">
Prihlásit se
</router-link>
@@ -34,26 +43,53 @@
},
data() {
return {
isWhite: false,
navigation: [
{
title: 'O Nás',
href: 'o-nas',
},
/*{
title: 'Kariéra',
href: 'kariera',
},*/
{
title: 'Ceník',
href: 'cenik',
},
{
title: 'Podpora',
href: 'podpora',
title: 'O Nás',
href: 'o-nas',
},
{
title: 'Kontakt a Podpora',
href: 'kontakt-a-podpora',
},
],
}
},
methods: {
scrollToSection(anchor) {
var el = document.getElementById('vuefilemanager')
const section = document.getElementById(anchor),
position = section.offsetTop - 100;
el.scrollTo({top: position, behavior: 'smooth'});
}
},
created() {
// Perform scroll to loaded location
if (document.location.hash) {
setTimeout(() => {
this.scrollToSection(document.location.hash.substring(1))
}, 300)
}
// Set white bar after user scrolling down
var el = document.getElementById('vuefilemanager')
el.addEventListener('scroll', () => {
if (el.scrollTop > 35 ) {
this.isWhite = true
} else {
this.isWhite = false
}
})
}
}
</script>
@@ -61,4 +97,18 @@
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.oasis-navigation.navigation {
margin-top: 10px;
.base-button {
padding: 12px 24px;
}
}
.links {
display: none;
}
}
</style>
resources/js/Oasis/Homepage/Components/OasisPricing.vue
+26 -2
View File
@@ -1,8 +1,8 @@
<template>
<div class="oasis-pricing text-center">
<div id="cenik" class="oasis-pricing text-center">
<div class="title-wrapper container">
<h3 class="main-title">
<h3 class="main-title-sm">
Kolik stoji OasisDrive?
</h3>
<h4 class="sub-title-sm">
@@ -111,4 +111,28 @@
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
@media only screen and (max-width: 960px) {
.pricing-box {
grid-template-columns: 1fr;
gap: 25px;
.box {
&:nth-child(2) {
padding: 38px 40px 35px;
margin-top: 0px;
margin-bottom: 0px;
.pricing-data {
margin-top: 0;
}
.pricing-description {
margin-bottom: 50px;
}
}
}
}
}
</style>
resources/js/Oasis/Homepage/DynamicPage.vue
+104
View File
@@ -0,0 +1,104 @@
<template>
<div class="landing-page">
<!--Navigation-->
<OasisNavigation class="page-wrapper"/>
<!--Page content-->
<div v-if="page" class="container small">
<!--Headline-->
<PageTitle
class="headline"
:title="page.data.attributes.title"
/>
<!--Content-->
<div class="page-content" v-html="page.data.attributes.content_formatted"></div>
</div>
<!--Footer-->
<OasisFooter/>
</div>
</template>
<script>
import OasisFooter from '@/Oasis/Homepage/Components/OasisFooter'
import PageTitle from '@/components/Index/Components/PageTitle'
import OasisNavigation from '@/Oasis/Homepage/Components/OasisNavigation'
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
name: 'DynamicPage',
components: {
OasisNavigation,
OasisFooter,
PageTitle,
},
computed: {
...mapGetters(['config']),
},
data() {
return {
isLoading: false,
page: undefined,
}
},
watch: {
$route(to, from) {
this.getPage()
}
},
methods: {
getPage() {
axios.get('/api/page/' + this.$route.params.slug)
.then(response => {
this.page = response.data
this.$scrollTop()
})
}
},
created() {
this.getPage()
}
}
</script>
<style lang="scss" scoped>
@import '@assets/oasis/_components';
@import '@assets/oasis/_homepage';
@import '@assets/oasis/_responsive';
.headline {
padding-top: 70px;
padding-bottom: 50px;
}
.small {
margin-top: 50px;
max-width: 960px;
}
.page-content {
/deep/ p {
@include font-size(20);
font-weight: 500;
line-height: 1.65;
padding-bottom: 30px;
}
}
@media (prefers-color-scheme: dark) {
}
@media only screen and (max-width: 960px) {
.headline {
padding-top: 50px;
padding-bottom: 30px;
}
}
</style>
resources/js/Oasis/Homepage/Homepage.vue
+10 -7
View File
@@ -1,11 +1,12 @@
<template>
<div id="page">
<OasisNavigation v-if="false"/>
<OasisHeader v-if="false"/>
<OasisFeatures v-if="false"/>
<OasisPricing v-if="false"/>
<OasisAboutUs v-if="false"/>
<OasisFooter v-if="true"/>
<OasisNavigation/>
<OasisHeader/>
<OasisFeatures/>
<OasisPricing/>
<OasisAboutUs/>
<OasisContact/>
<OasisFooter/>
</div>
</template>
@@ -14,6 +15,7 @@
import OasisFeatures from '@/Oasis/Homepage/Components/OasisFeatures'
import OasisPricing from '@/Oasis/Homepage/Components/OasisPricing'
import OasisAboutUs from '@/Oasis/Homepage/Components/OasisAboutUs'
import OasisContact from '@/Oasis/Homepage/Components/OasisContact'
import OasisHeader from '@/Oasis/Homepage/Components/OasisHeader'
import OasisFooter from '@/Oasis/Homepage/Components/OasisFooter'
import { mapGetters } from 'vuex'
@@ -26,6 +28,7 @@
OasisFeatures,
OasisPricing,
OasisAboutUs,
OasisContact,
OasisHeader,
OasisFooter,
},
@@ -43,7 +46,7 @@
},
created() {
this.$scrollTop()
//this.$scrollTop()
}
}
</script>
resources/js/router.js
Vendored
+9
View File
@@ -18,6 +18,15 @@ const routesOasis = [
requiresAuth: false
},
},
{
name: 'DynamicPage',
path: '/page/:slug',
component: () =>
import(/* webpackChunkName: "chunks/dynamic-page" */ './Oasis/Homepage/DynamicPage'),
meta: {
requiresAuth: false
},
},
{
name: 'SignUp',
path: '/sign-up',
resources/js/views/Frontpage/ContactUs.vue
+7 -7
View File
@@ -2,16 +2,16 @@
<div class="landing-page">
<!--Navigation-->
<Navigation class="page-wrapper small"/>
<Navigation class="page-wrapper small" />
<!--Page content-->
<div class="page-wrapper small">
<!--Headline-->
<PageTitle
class="headline"
:title="$t('page_contact_us.title')"
:description="$t('page_contact_us.description')"
class="headline"
:title="$t('page_contact_us.title')"
:description="$t('page_contact_us.description')"
></PageTitle>
<ValidationObserver v-if="! isSuccess" @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
@@ -23,7 +23,7 @@
v-slot="{ errors }">
<input v-model="contact.email" :placeholder="$t('page_contact_us.form.email_plac')" type="email"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
:class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
@@ -45,7 +45,7 @@
</InfoBox>
<div>
<AuthButton class="submit-button" icon="chevron-right" :text="$t('page_contact_us.form.submit_button')" :loading="isLoading" :disabled="isLoading"/>
<AuthButton class="submit-button" icon="chevron-right" :text="$t('page_contact_us.form.submit_button')" :loading="isLoading" :disabled="isLoading" />
</div>
</ValidationObserver>
<InfoBox v-if="isSuccess">
@@ -54,7 +54,7 @@
</div>
<!--Footer-->
<PageFooter/>
<PageFooter />
</div>
</template>
resources/sass/oasis/_components.scss
Vendored
+24 -1
View File
@@ -9,7 +9,17 @@
@include font-size(62);
font-weight: 900;
line-height: 1.1;
margin-bottom: 16px;
margin-bottom: 20px;
letter-spacing: -1px;
}
.main-title-sm {
@include font-size(52);
font-weight: 900;
line-height: 1.1;
max-width: 1150px;
margin-bottom: 20px;
letter-spacing: -1px;
}
.sub-title {
@@ -23,6 +33,7 @@
font-weight: 600;
line-height: 1.6;
color: $text-secondary;
max-width: 1150px;
}
.theme-button {
@@ -55,6 +66,10 @@
display: inline-block;
font-weight: 800;
color: $theme;
appearance: none;
outline: 0;
border: none;
cursor: pointer;
&:hover {
background: $theme;
@@ -64,4 +79,12 @@
&:active {
@include transform(scale(0.97));
}
}
.info-title {
@include font-size(24);
color: white;
font-weight: 800;
margin-bottom: 17px;
display: block;
}
resources/sass/oasis/_homepage.scss
Vendored
+160 -25
View File
@@ -8,15 +8,23 @@
}
.oasis-navigation {
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
}
.oasis-header {
padding-top: 100px;
margin-top: -110px;
padding-top: 250px;
background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
.main-title {
max-width: 890px;
margin: 0 auto;
}
.sub-title {
margin-bottom: 50px;
}
}
.oasis-features {
@@ -26,11 +34,14 @@
margin-bottom: 90px;
}
.main-title {
.main-title-sm {
color: white;
max-width: 690px;
margin: 0 auto;
}
.sub-title-sm {
margin: 0 auto;
color: $text-dark-subtitle;
}
@@ -39,7 +50,7 @@
}
.cta {
top: 240px;
top: 245px;
position: relative;
}
}
@@ -47,6 +58,12 @@
.oasis-pricing {
margin-top: 290px;
.main-title-sm,
.sub-title-sm {
margin-left: auto;
margin-right: auto;
}
.title-wrapper {
margin-bottom: 60px;
}
@@ -58,6 +75,38 @@
.oasis-about-us {
.sub-title-sm {
max-width: 890px;
}
}
.oasis-contact {
background: $theme-bg-dark;
.title-wrapper {
margin-bottom: 65px;
}
.main-title-sm {
color: white;
}
.sub-title-sm {
color: $text-dark-subtitle;
max-width: 750px;
}
.info-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.info-grid {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.oasis-footer {
@@ -77,19 +126,19 @@
.links {
display: inline-block;
.highlighted {
color: $theme;
}
&:last-child {
margin-left: 25px;
}
}
}
.navigation {
padding: 10px 0;
padding: 5px 0;
z-index: 10;
@include transition(150ms);
backdrop-filter: blur(18px);
margin-top: 35px;
&.white {
background: rgba(white, 0.95);
}
.container {
display: flex;
@@ -116,6 +165,7 @@
.log-in {
display: block;
margin-top: 12px;
a {
@include transition(150ms);
@@ -139,12 +189,12 @@
box-shadow: 0 22px 34px -20px #232142;
border-radius: 12px;
text-align: center;
padding: 45px 25px;
padding: 40px 25px 45px;
display: block;
.box-title {
color: white;
margin-top: 30px;
margin-top: 22px;
margin-bottom: 25px;
@include font-size(32);
}
@@ -152,7 +202,7 @@
.box-description {
color: $text-dark-secondary;
@include font-size(19);
line-height: 1.6;
line-height: 1.55;
margin-bottom: 25px;
}
@@ -224,7 +274,7 @@
box-shadow: 0 5px 333px -22px #1B253935;
border-radius: 12px;
display: block;
padding: 45px 40px 20px;
padding: 38px 40px 35px;
z-index: 1;
&:nth-child(2) {
@@ -240,6 +290,7 @@
.pricing-description {
color: $text-dark-secondary;
margin-bottom: 70px;
}
.pricing-data {
@@ -252,7 +303,7 @@
}
.pricing-icon {
margin-bottom: 40px;
margin-bottom: 45px;
path {
color: $theme;
@@ -262,6 +313,7 @@
.pricing-data {
@include font-size(50);
font-weight: 900;
margin-bottom: 10px;
}
.pricing-name {
@@ -273,7 +325,7 @@
.pricing-description {
@include font-size(19);
margin-bottom: 35px;
margin-bottom: 50px;
}
.pricing-vat {
@@ -288,12 +340,12 @@
}
.info-list {
margin: 70px 0;
margin: 65px 0;
.info-list-item {
display: flex;
align-items: start;
margin-bottom: 35px;
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
@@ -309,10 +361,11 @@
}
.description {
max-width: 620px;
max-width: 700px;
@include font-size(24);
color: $text-primary;
font-weight: 800;
line-height: 1.5;
}
}
}
@@ -324,6 +377,7 @@
display: inline-block;
a {
cursor: pointer;
@include font-size(17);
padding: 9px 30px;
color: $text-primary;
@@ -331,10 +385,91 @@
@include transition;
border-radius: 25px;
&:hover {
&:hover, &.router-link-active {
background: white;
box-shadow: 0 6px 20px -10px rgba($theme, 0.35);
}
}
}
}
.info-wrapper {
padding-bottom: 45px;
.info-group {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
}
.info-icon {
display: flex;
align-items: center;
.info-description {
margin-bottom: 0;
text-decoration: underline;
@include transition;
&:hover {
color: $cyan;
}
}
svg {
margin-right: 10px;
line, path, polyline {
color: $cyan;
}
}
}
.info-description {
@include font-size(20);
color: $text-dark-secondary;
font-weight: 500;
margin-bottom: 7px;
max-width: 320px;
line-height: 1.6;
}
}
.contact-form {
width: 100%;
.block-wrapper {
margin-bottom: 30px;
}
.error-message {
color: $pink;
margin-top: 5px;
display: block;
}
input, textarea {
background: $theme-bg-light;
border: 1px solid transparent;
border-radius: 8px;
padding: 13px 20px;
appearance: none;
outline: 0;
color: $text-dark-secondary;
@include font-size(16);
font-weight: 600;
width: 100%;
&.is-error {
border-color: $pink;
}
&::placeholder {
color: $text-dark-subtitle;
@include font-size(16);
font-weight: 600;
}
}
}
resources/sass/oasis/_responsive.scss
Vendored
+47 -1
View File
@@ -1,5 +1,51 @@
@media only screen and (min-width: 1440px) {
.container {
width: 1700px;
width: 1750px;
}
}
@media only screen and (max-width: 960px) {
// Components
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.main-title {
@include font-size(38);
line-height: 1.1;
margin-bottom: 20px;
}
.main-title-sm {
@include font-size(32);
line-height: 1.1;
margin-bottom: 20px;
}
.sub-title {
@include font-size(20);
font-weight: 600;
}
.sub-title-sm {
@include font-size(18);
font-weight: 600;
line-height: 1.6;
}
.theme-button {
@include font-size(19);
}
.base-button {
@include font-size(15);
}
.info-title {
@include font-size(21);
margin-bottom: 12px;
}
}
resources/views/vuefilemanager/others/color-template.blade.php
+1 -1
View File
@@ -36,7 +36,7 @@
.focus-within-border-theme:focus-within {border-color: {{ $color }} !important;}
.focus-border-theme:focus {border-color: {{ $color }}}
.focus-border-theme:focus {border-color: {{ $color }} !important;}
.focus-border-theme:focus[type='email'] {border-color: {{ $color }}}
.focus-border-theme:focus[type='text'] {border-color: {{ $color }}}
.focus-border-theme:focus[type='password'] {border-color: {{ $color }}}