feat: modernize fe tooling and drop weight
This commit is contained in:
+2
-1
@@ -26,8 +26,9 @@ timezone: Europe/Berlin
|
||||
composer_version: "2"
|
||||
web_environment:
|
||||
- TYPO3_CONTEXT=Development
|
||||
nodejs_version: "18"
|
||||
nodejs_version: "24"
|
||||
corepack_enable: false
|
||||
omit_containers: [ddev-ssh-agent]
|
||||
|
||||
# Key features of DDEV's config.yaml:
|
||||
|
||||
|
||||
Generated
+1025
-1158
File diff suppressed because it is too large
Load Diff
+9
-21
@@ -1,25 +1,22 @@
|
||||
{
|
||||
"name": "eptheme",
|
||||
"description": "EP Reisen TYPO3 website package",
|
||||
"version": "3.0.0",
|
||||
"author": "Björn Fromme, [email protected]",
|
||||
"license": "proprietary",
|
||||
"scripts": {
|
||||
"dev": "./node_modules/.bin/encore dev --watch",
|
||||
"build": "NODE_ENV=production ./node_modules/.bin/encore production"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
],
|
||||
"dependencies": {
|
||||
"@hotwired/stimulus": "^3.2.1",
|
||||
"@hotwired/stimulus-webpack-helpers": "^1.0.1",
|
||||
"@iframe-resizer/parent": "^5.3.2",
|
||||
"@splidejs/splide": "^2.4.21",
|
||||
"axios": "^1.6.2",
|
||||
"cooltipz-css": "^1.6.8",
|
||||
"dayjs": "^1.10.6",
|
||||
"es6-slide-up-down": "^1.0.0",
|
||||
"flatpickr": "^4.6.9",
|
||||
"glightbox": "^3.0.9",
|
||||
"htmx.org": "^1.9.12",
|
||||
@@ -30,31 +27,22 @@
|
||||
"sticky-js": "^1.3.0",
|
||||
"stimulus-use": "^0.52.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.2",
|
||||
"vue-session": "^1.0.0",
|
||||
"vuex": "^3.6.2",
|
||||
"whatwg-fetch": "^3.6.2"
|
||||
"vue-session": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/preset-env": "^7.16.0",
|
||||
"@symfony/webpack-encore": "^2.1.0",
|
||||
"@symfony/webpack-encore": "^4.7.0",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.0",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"core-js": "^3.22.5",
|
||||
"document-register-element": "^1.14.10",
|
||||
"file-loader": "^6.2.0",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"postcss-loader": "^8.2.1",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"sass-mq": "^6.0.0",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
"sass-loader": "^14.2.1",
|
||||
"sass-mq": "^7.0.1",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"tailwindcss-alt": "^3.0.0",
|
||||
"vue-custom-element": "^3.3.0",
|
||||
"vue-loader": "^15.11.1",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
|
||||
+14
-7
@@ -55,7 +55,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import $ from 'jquery';
|
||||
|
||||
export default {
|
||||
@@ -82,13 +81,21 @@
|
||||
load() {
|
||||
this.loading = true;
|
||||
sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
|
||||
axios({
|
||||
url: this.endpointUri,
|
||||
method: 'post',
|
||||
data: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
|
||||
fetch(this.endpointUri, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
|
||||
body: $.param({'tx_epevents_ajax[filterSettings]': this.filterSettings})
|
||||
}).then(response => {
|
||||
this.offers = response.data.offers;
|
||||
this.filterOptions = response.data.filterOptions;
|
||||
// fetch only rejects on network errors, so surface HTTP errors here
|
||||
// to keep the previous behaviour of falling through to .catch()
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
this.offers = data.offers;
|
||||
this.filterOptions = data.filterOptions;
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.badge {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
@@ -27,15 +30,15 @@
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 130%;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge__outline {
|
||||
@include sectionFills(0.15);
|
||||
@include mixins.sectionFills(0.15);
|
||||
}
|
||||
|
||||
.badge__inner {
|
||||
@include sectionFills();
|
||||
@include mixins.sectionFills();
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "mixins";
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
@@ -8,7 +10,7 @@
|
||||
min-height: 300px;
|
||||
padding: 48px 0;
|
||||
color: white;
|
||||
@include sectionBackgrounds(0.8);
|
||||
@include mixins.sectionBackgrounds(0.8);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "fonts";
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $font-main, Sans-Serif;
|
||||
font-family: fonts.$font-main, Sans-Serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@@ -41,13 +47,13 @@ html {
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navtoggle__icon {
|
||||
fill: $color-font-main;
|
||||
fill: colors.$color-font-main;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
.mobilenav--open & {
|
||||
@@ -62,7 +68,7 @@ html {
|
||||
right: 2%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
@@ -76,12 +82,12 @@ a {
|
||||
&.anchor {
|
||||
display: block;
|
||||
height: 0;
|
||||
padding-top: $header-height-mobile;
|
||||
margin-top: -$header-height-mobile;
|
||||
padding-top: variables.$header-height-mobile;
|
||||
margin-top: -(variables.$header-height-mobile);
|
||||
|
||||
@include mq($from: tablet) {
|
||||
padding-top: $header-height-desktop;
|
||||
margin-top: -$header-height-desktop;
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding-top: variables.$header-height-desktop;
|
||||
margin-top: -(variables.$header-height-desktop);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -126,7 +132,7 @@ ul {
|
||||
left: 0;
|
||||
content: "\25CF";
|
||||
font-size: 18px;
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -144,8 +150,8 @@ p {
|
||||
hr {
|
||||
max-width: 25%;
|
||||
margin: 32px auto 32px 0;
|
||||
color: $color-ruler;
|
||||
background-color: $color-ruler;
|
||||
color: colors.$color-ruler;
|
||||
background-color: colors.$color-ruler;
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
@@ -161,7 +167,7 @@ h3,
|
||||
}
|
||||
|
||||
.headline {
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
|
||||
&--icon {
|
||||
display: flex;
|
||||
@@ -186,7 +192,7 @@ h1,
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 18px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 32px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
@@ -200,11 +206,11 @@ h1,
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
text-transform: none;
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@@ -221,7 +227,7 @@ h2,
|
||||
padding-bottom: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 24px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
@@ -231,7 +237,7 @@ h3 {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 18px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
@@ -243,7 +249,7 @@ h3 {
|
||||
height: auto;
|
||||
padding-right: 16px;
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
width: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -13,7 +16,7 @@
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: $color-brand-secondary;
|
||||
background-color: colors.$color-brand-secondary;
|
||||
border: none;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
@@ -23,18 +26,18 @@
|
||||
|
||||
.box__content {
|
||||
padding: 32px 16px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.box__form {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
fill: $color-brand-primary;
|
||||
fill: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
&--top {
|
||||
@@ -52,7 +55,7 @@
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
|
||||
@@ -66,7 +69,7 @@
|
||||
.box__nav {
|
||||
margin-top: -32px;
|
||||
padding-bottom: 32px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
.box__nav__item {
|
||||
@@ -78,7 +81,7 @@
|
||||
|
||||
&--active,
|
||||
&:hover {
|
||||
background-color: $color-brand-light;
|
||||
background-color: colors.$color-brand-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.brands {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid $color-divider;
|
||||
border-top: 1px solid colors.$color-divider;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
@@ -9,7 +12,7 @@
|
||||
.brands__item {
|
||||
width: 50%;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
$mq-breakpoints: (
|
||||
mobile: $viewport-width-mobile,
|
||||
tablet: $viewport-width-tablet,
|
||||
desktop: $viewport-width-desktop
|
||||
);
|
||||
@use "variables";
|
||||
|
||||
@import "~sass-mq";
|
||||
@forward "sass-mq" with (
|
||||
$breakpoints: (
|
||||
mobile: variables.$viewport-width-mobile,
|
||||
tablet: variables.$viewport-width-tablet,
|
||||
desktop: variables.$viewport-width-desktop
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
@@ -5,7 +9,7 @@
|
||||
|
||||
&--default {
|
||||
display: inline-block;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
@@ -13,7 +17,7 @@
|
||||
&--page-header {
|
||||
display: block;
|
||||
min-width: 186px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
padding: 0 32px 0 24px;
|
||||
@@ -26,14 +30,14 @@
|
||||
display: block;
|
||||
min-width: 220px;
|
||||
text-align: center;
|
||||
background-color: $color-brand-primary;
|
||||
@include sectionBackgroundsFromParent();
|
||||
background-color: colors.$color-brand-primary;
|
||||
@include mixins.sectionBackgroundsFromParent();
|
||||
color: white;
|
||||
line-height: 48px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
box-shadow: 8px 8px 8px rgba(black, 0.2);
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -43,7 +47,7 @@
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@@ -56,7 +60,7 @@
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $color-font-main;
|
||||
color: colors.$color-font-main;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,7 +69,7 @@
|
||||
}
|
||||
|
||||
&--icon {
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.card {
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
&:not(.card--no-form) {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
@@ -20,12 +23,12 @@
|
||||
padding: 16px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
@include sectionBackgrounds(0.75);
|
||||
@include mixins.sectionBackgrounds(0.75);
|
||||
transition: background-color 0.25s ease-in-out;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
.card:hover & {
|
||||
@include sectionBackgrounds();
|
||||
@include mixins.sectionBackgrounds();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,7 +36,7 @@
|
||||
.card__form {
|
||||
display: none;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
@@ -50,7 +53,7 @@
|
||||
}
|
||||
|
||||
polygon {
|
||||
@include sectionFills();
|
||||
@include mixins.sectionFills();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
.carousel {
|
||||
|
||||
&--background {
|
||||
background-color: $color-background;
|
||||
background-color: colors.$color-background;
|
||||
padding-bottom: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@include sectionBackgrounds(0.25);
|
||||
@include mixins.sectionBackgrounds(0.25);
|
||||
}
|
||||
|
||||
.carousel__outer {
|
||||
@include container($viewport-width-max);
|
||||
@include mixins.container(variables.$viewport-width-max);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel__inner {
|
||||
@include container($content-width-max);
|
||||
@include mixins.container(variables.$content-width-max);
|
||||
}
|
||||
|
||||
.carousel__item {
|
||||
@@ -36,7 +40,7 @@
|
||||
height: 32px;
|
||||
|
||||
fill: white;
|
||||
@include sectionColoursFromParent;
|
||||
@include mixins.sectionColoursFromParent;
|
||||
|
||||
&--prev {
|
||||
left: -5px;
|
||||
@@ -59,7 +63,7 @@
|
||||
}
|
||||
|
||||
.testimonials & {
|
||||
fill: $color-brand-primary;
|
||||
fill: colors.$color-brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@use "sass:color";
|
||||
|
||||
//$color-brand-primary: #0084d4;
|
||||
$color-brand-primary: #19a0d2;
|
||||
$color-brand-secondary: #1e314b;
|
||||
$color-brand-light: #8CCFE8;
|
||||
$color-background: lighten(#dbdee2, 5%);
|
||||
$color-background: color.adjust(#dbdee2, $lightness: 5%);
|
||||
|
||||
$color-font-main: #1e314b;
|
||||
$color-divider: rgba($color-background, 0.8);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.configurator {
|
||||
background: url(../images/bg_configurator.jpg) no-repeat top left;
|
||||
background-size: cover;
|
||||
@@ -39,7 +42,7 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba($color-brand-secondary, 0.85);
|
||||
background-color: rgba(colors.$color-brand-secondary, 0.85);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -51,7 +54,7 @@
|
||||
display: none;
|
||||
color: white;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -83,11 +86,11 @@
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -98,12 +101,12 @@
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 30%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 20%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -113,11 +116,11 @@
|
||||
width: 100%;
|
||||
padding-right: 40px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@@ -131,11 +134,11 @@
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -151,13 +154,13 @@
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
border-radius: 16px;
|
||||
font-family: "fontello";
|
||||
|
||||
&.closed {
|
||||
background-color: white;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
|
||||
&:before {
|
||||
content: '\e800';
|
||||
@@ -204,7 +207,7 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
width: 50%;
|
||||
|
||||
.active & {
|
||||
@@ -212,7 +215,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 25%;
|
||||
|
||||
.active & {
|
||||
@@ -240,10 +243,10 @@
|
||||
}
|
||||
|
||||
.selected &:after {
|
||||
background-color: rgba($color-brand-secondary, 0.75);
|
||||
background-color: rgba(colors.$color-brand-secondary, 0.75);
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
&:hover:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
@@ -251,7 +254,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba($color-brand-primary, 0.5);
|
||||
background-color: rgba(colors.$color-brand-primary, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -260,12 +263,12 @@
|
||||
background-position: center 32px;
|
||||
background-size: 96px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
background-position: center 16px;
|
||||
background-size: 128px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
background-position: center 8px;
|
||||
background-size: 96px;
|
||||
}
|
||||
@@ -382,7 +385,7 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -391,7 +394,7 @@
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 66.6666%;
|
||||
padding-right: 32px;
|
||||
}
|
||||
@@ -401,7 +404,7 @@
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@@ -456,7 +459,7 @@
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
border-radius: 16px;
|
||||
font-family: 'fontello';
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
// .headline* live in _base.scss; @extend needs that module loaded explicitly.
|
||||
@use "base";
|
||||
|
||||
.cookiefirst {
|
||||
h2 {
|
||||
@extend .headline;
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
|
||||
.form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
&:not(&--horizontal) {
|
||||
max-width: 75%;
|
||||
}
|
||||
@@ -16,7 +20,7 @@
|
||||
|
||||
&--horizontal {
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -42,7 +46,7 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: $color-brand-light;
|
||||
background-color: colors.$color-brand-light;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -50,7 +54,7 @@
|
||||
&--mobile {
|
||||
display: block;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -58,7 +62,7 @@
|
||||
&--tablet {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet, $until: desktop) {
|
||||
@include breakpoints.mq($from: tablet, $until: desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -66,7 +70,7 @@
|
||||
&--desktop {
|
||||
display: none;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -79,7 +83,7 @@
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@@ -88,20 +92,20 @@
|
||||
.form__item__error {
|
||||
padding: 8px;
|
||||
font-size: 90%;
|
||||
color: $color-formerror;
|
||||
color: colors.$color-formerror;
|
||||
}
|
||||
|
||||
.form__field {
|
||||
@include nooutline;
|
||||
@include mixins.nooutline;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
color: white;
|
||||
background-color: $color-brand-light;
|
||||
background-color: colors.$color-brand-light;
|
||||
|
||||
.form--box & {
|
||||
background-color: $color-brand-light;
|
||||
background-color: colors.$color-brand-light;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -114,10 +118,10 @@
|
||||
display: block;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
@@ -127,7 +131,7 @@
|
||||
}
|
||||
|
||||
.has-errors & {
|
||||
border: 1px solid $color-formerror;
|
||||
border: 1px solid colors.$color-formerror;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -158,7 +162,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background-color: $color-brand-secondary;
|
||||
background-color: colors.$color-brand-secondary;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
@@ -166,7 +170,7 @@
|
||||
padding: 8px 32px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
@@ -189,10 +193,10 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba($color-divider, 0.75);
|
||||
background-color: rgba(colors.$color-divider, 0.75);
|
||||
|
||||
.form--box & {
|
||||
background-color: rgba($color-brand-primary, 0.75);
|
||||
background-color: rgba(colors.$color-brand-primary, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.helpernav {
|
||||
display: none;
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
@@ -24,7 +27,7 @@
|
||||
z-index: 10;
|
||||
min-width: 300px;
|
||||
padding: 16px 32px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
.helpernav__item {
|
||||
@@ -32,7 +35,7 @@
|
||||
&:hover:not(.helpernav__item--disabled) {
|
||||
|
||||
& > .helpernav__link {
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
& > .helpernav__subnav {
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
.herounit {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: $viewport-width-max;
|
||||
max-width: variables.$viewport-width-max;
|
||||
margin: 0 auto;
|
||||
|
||||
&--indent {
|
||||
max-width: $content-width-max - 16px;
|
||||
max-width: variables.$content-width-max - 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,22 +21,22 @@
|
||||
|
||||
height: 240px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
height: 384px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.herounit--large & {
|
||||
height: 300px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
.herounit--indent & {
|
||||
height: 320px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
@@ -48,7 +53,7 @@
|
||||
.herounit__mask {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
@@ -67,9 +72,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 32px;
|
||||
background-color: rgba($color-brand-secondary, 0.2);
|
||||
background-color: rgba(colors.$color-brand-secondary, 0.2);
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
background-color: transparent;
|
||||
padding: 64px 16px 0 96px;
|
||||
max-width: 45%;
|
||||
@@ -83,7 +88,7 @@
|
||||
font-size: 32px;
|
||||
line-height: 95%;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@@ -101,10 +106,10 @@
|
||||
span {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
font-size: 56px;
|
||||
}
|
||||
}
|
||||
@@ -120,7 +125,7 @@
|
||||
color: white;
|
||||
text-transform: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@@ -128,12 +133,12 @@
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 24px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
font-size: 32px;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@@ -146,7 +151,7 @@
|
||||
line-height: 120%;
|
||||
color: white;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -154,7 +159,7 @@
|
||||
.herounit__icon {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@@ -173,11 +178,11 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
top: 85%;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -190,34 +195,34 @@
|
||||
height: 48px;
|
||||
border: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > polygon {
|
||||
fill: $color-brand-primary;
|
||||
@include sectionFills();
|
||||
fill: colors.$color-brand-primary;
|
||||
@include mixins.sectionFills();
|
||||
}
|
||||
}
|
||||
|
||||
#gradient__from {
|
||||
stop-color: $color-brand-secondary;
|
||||
stop-color: colors.$color-brand-secondary;
|
||||
}
|
||||
|
||||
#gradient__to {
|
||||
.section-default & {
|
||||
stop-color: $color-brand-primary;
|
||||
stop-color: colors.$color-brand-primary;
|
||||
}
|
||||
.section-incentives & {
|
||||
stop-color: $color-incentives;
|
||||
stop-color: colors.$color-incentives;
|
||||
}
|
||||
.section-teambuilding & {
|
||||
stop-color: $color-teambuilding;
|
||||
stop-color: colors.$color-teambuilding;
|
||||
}
|
||||
.secolor-meeting & {
|
||||
stop-color: $color-meetings;
|
||||
stop-color: colors.$color-meetings;
|
||||
}
|
||||
.secolor-events & {
|
||||
stop-color: $color-events;
|
||||
stop-color: colors.$color-events;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.iconbar {
|
||||
@apply hidden lg:block fixed z-100 top-[30vh] right-0 overflow-hidden;
|
||||
}
|
||||
.iconbar {
|
||||
display: none;
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
display: block;
|
||||
}
|
||||
position: fixed;
|
||||
@@ -20,7 +23,7 @@
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
background-color: $color-brand-light;
|
||||
background-color: colors.$color-brand-light;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
@@ -30,7 +33,7 @@
|
||||
|
||||
.iconbar__icon {
|
||||
padding: 4px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.iconnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -21,7 +24,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
@@ -36,5 +39,5 @@
|
||||
.iconnav__label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
@include sectionColours();
|
||||
@include mixins.sectionColours();
|
||||
}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
main {
|
||||
padding-top: 96px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding-top: 140px;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +13,7 @@ main {
|
||||
width: 100%;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
@include clearfix();
|
||||
@include mixins.clearfix();
|
||||
|
||||
&.nopad {
|
||||
&--bottom {
|
||||
@@ -23,18 +26,18 @@ main {
|
||||
}
|
||||
|
||||
.content__title {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content__inner {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
|
||||
.content--has-sidebar & {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -45,40 +48,40 @@ main {
|
||||
padding: 0 0 32px;
|
||||
overflow: hidden;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content__plain {
|
||||
@include clearfix();
|
||||
@include mq($from: tablet) {
|
||||
@include mixins.clearfix();
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding-right: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.content__background {
|
||||
@include clearfix();
|
||||
@include sectionBackgrounds(0.15);
|
||||
@include mixins.clearfix();
|
||||
@include mixins.sectionBackgrounds(0.15);
|
||||
padding: 24px 48px 24px 32px;
|
||||
}
|
||||
|
||||
.content__float {
|
||||
@include clearfix();
|
||||
@include mixins.clearfix();
|
||||
}
|
||||
|
||||
.content__sidebar {
|
||||
width: 100%;
|
||||
padding: 32px 0;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
flex: 0 0 320px;
|
||||
padding: 0 0 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.content__form {
|
||||
@include sectionFills(0.15);
|
||||
@include mixins.sectionFills(0.15);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
@@ -93,7 +96,7 @@ main {
|
||||
|
||||
.desktop-only {
|
||||
display: none;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@use "sass:math";
|
||||
@use "variables" as *;
|
||||
@use "colors" as *;
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.mobilenav {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
@@ -7,10 +10,10 @@
|
||||
height: 0;
|
||||
padding-top: 96px;
|
||||
overflow: hidden;
|
||||
background: rgba($color-brand-secondary, 0.9);
|
||||
background: rgba(colors.$color-brand-secondary, 0.9);
|
||||
transition: height 0.25s ease-in-out;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "breakpoints";
|
||||
|
||||
.news-entry {
|
||||
width: 100%;
|
||||
&:not(:last-child) {
|
||||
@@ -13,7 +15,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@@ -22,7 +24,7 @@
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@@ -39,7 +41,7 @@
|
||||
.news-entry__teaser {
|
||||
width: 100%;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
padding-left: 24px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "breakpoints";
|
||||
|
||||
.offerlist {
|
||||
position: relative;
|
||||
}
|
||||
@@ -13,7 +15,7 @@
|
||||
}
|
||||
|
||||
.offerlist__teasers {
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -24,13 +26,13 @@
|
||||
text-decoration: none;
|
||||
margin-bottom: 32px;
|
||||
display: block;
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
display: flex;
|
||||
}
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,30 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
|
||||
.page-footer {
|
||||
width: 100%;
|
||||
background: linear-gradient(to right, $color-brand-secondary, $color-brand-primary);
|
||||
background: linear-gradient(to right, colors.$color-brand-secondary, colors.$color-brand-primary);
|
||||
color: white;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer__inner {
|
||||
@include container($content-width-max);
|
||||
@include mixins.container(variables.$content-width-max);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid white;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
}
|
||||
@@ -33,14 +38,14 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&--hide-mobile {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -60,14 +65,14 @@
|
||||
}
|
||||
|
||||
.page-footer__bottom {
|
||||
@include container($content-width-max);
|
||||
@include mixins.container(variables.$content-width-max);
|
||||
padding-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -76,7 +81,7 @@
|
||||
.page-footer__bottom__column {
|
||||
width: 100%;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@@ -86,7 +91,7 @@
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -106,7 +111,7 @@
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -115,7 +120,7 @@
|
||||
text-align: center;
|
||||
padding-top: 32px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -138,7 +143,7 @@
|
||||
text-align: center;
|
||||
padding-top: 32px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
|
||||
.page-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
@@ -5,28 +9,28 @@
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
box-shadow: 0 2px 2px rgba($color-background, 0.5);
|
||||
box-shadow: 0 2px 2px rgba(colors.$color-background, 0.5);
|
||||
}
|
||||
|
||||
.page-header__bar {
|
||||
background: linear-gradient(to right, $color-brand-primary 50%, $color-brand-secondary);
|
||||
background: linear-gradient(to right, colors.$color-brand-primary 50%, colors.$color-brand-secondary);
|
||||
}
|
||||
|
||||
.page-header__bar__main {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__bar__search {
|
||||
display: none;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
width: 50%;
|
||||
}
|
||||
@@ -37,7 +41,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 50%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -53,14 +57,14 @@
|
||||
.page-header__bar__divider {
|
||||
display: none;
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
display: inline-block;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__main {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
@@ -68,11 +72,11 @@
|
||||
align-items: center;
|
||||
-ms-flex-align: center;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding: 32px 16px 24px;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
-ms-flex-align: end;
|
||||
@@ -98,7 +102,7 @@
|
||||
.page-header__sitenav {
|
||||
display: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -106,7 +110,7 @@
|
||||
.page-header__button {
|
||||
display: none;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-width: 220px;
|
||||
@@ -128,6 +132,6 @@
|
||||
border: none;
|
||||
|
||||
& > polygon {
|
||||
fill: $color-brand-primary;
|
||||
fill: colors.$color-brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "colors";
|
||||
|
||||
.paginator {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -10,7 +12,7 @@
|
||||
|
||||
.paginator__item {
|
||||
display: inline-block;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
text-decoration: none;
|
||||
@@ -19,8 +21,8 @@
|
||||
}
|
||||
|
||||
&--current {
|
||||
border: 1px solid $color-brand-primary;
|
||||
border: 1px solid colors.$color-brand-primary;
|
||||
background-color: white;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,27 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.searchresult {}
|
||||
|
||||
.searchresult__info {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
}
|
||||
|
||||
.searchresult-item {
|
||||
text-decoration: none;
|
||||
margin-bottom: 32px;
|
||||
display: block;
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.searchresult-item__card {
|
||||
width: 100%;
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
width: 240px;
|
||||
}
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@@ -27,8 +30,8 @@
|
||||
margin: 0 8px;
|
||||
padding: 32px;
|
||||
color: white;
|
||||
@include sectionBackgrounds();
|
||||
@include mq($from: mobile) {
|
||||
@include mixins.sectionBackgrounds();
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.sitenav {
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
padding-right: 64px;
|
||||
}
|
||||
}
|
||||
@@ -25,7 +28,7 @@
|
||||
&--active,
|
||||
&:hover {
|
||||
border-bottom: 3px solid;
|
||||
@include sectionColours();
|
||||
@include mixins.sectionColours();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "breakpoints";
|
||||
|
||||
.slider {}
|
||||
|
||||
.slider__arrow {
|
||||
@@ -38,7 +40,7 @@
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.statement {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
padding-top: 32px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.statement__inner {
|
||||
@include sectionBackgrounds();
|
||||
@include mixins.sectionBackgrounds();
|
||||
box-shadow: 0 5px 10px rgba(black, 0.2);
|
||||
text-align: center;
|
||||
padding-top: 48px;
|
||||
@@ -18,7 +21,7 @@
|
||||
font-size: 24px;
|
||||
line-height: 105%;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.team {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -12,11 +15,11 @@
|
||||
max-width: 400px;
|
||||
padding: 0 16px 64px;
|
||||
|
||||
@include mq($until: desktop) {
|
||||
@include breakpoints.mq($until: desktop) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -57,10 +60,10 @@
|
||||
|
||||
.team__position {
|
||||
display: block;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
.team__contact__link {
|
||||
text-decoration: none;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
@use "breakpoints";
|
||||
@use "mixins";
|
||||
|
||||
.teasers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include sectionBackgrounds(0.15);
|
||||
@include mixins.sectionBackgrounds(0.15);
|
||||
margin: 0 -16px 0;
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@@ -19,15 +22,15 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@include mq($until: tablet) {
|
||||
@include breakpoints.mq($until: tablet) {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
@@ -40,12 +43,12 @@
|
||||
}
|
||||
|
||||
.teaser__caption {
|
||||
@include sectionBackgroundsFromParent();
|
||||
@include mixins.sectionBackgroundsFromParent();
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
|
||||
.teaser__form {
|
||||
@include sectionFills();
|
||||
@include mixins.sectionFills();
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
|
||||
.testimonial {
|
||||
width: 100%;
|
||||
padding: 0 32px;
|
||||
text-align: center;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 80%;
|
||||
width: 50%;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $color-divider;
|
||||
border-right: 1px solid colors.$color-divider;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq($from: desktop) {
|
||||
@include breakpoints.mq($from: desktop) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "breakpoints";
|
||||
@use "colors";
|
||||
@use "mixins";
|
||||
|
||||
.tiles {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@@ -15,7 +19,7 @@
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 50%;
|
||||
padding: 16px;
|
||||
}
|
||||
@@ -26,12 +30,12 @@
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
@include mq($from: mobile) {
|
||||
@include breakpoints.mq($from: mobile) {
|
||||
min-height: 250px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding: 32px 32px 0;
|
||||
min-height: 375px;
|
||||
}
|
||||
@@ -42,33 +46,33 @@
|
||||
color: white;
|
||||
text-align: center;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tile__caption__inner {
|
||||
@include sectionBackgrounds(0.75);
|
||||
@include mixins.sectionBackgrounds(0.75);
|
||||
width: 100%;
|
||||
padding: 24px 0;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
padding: 32px 0;
|
||||
|
||||
.tile:hover .section-incentives & {
|
||||
background-color: $color-incentives;
|
||||
background-color: colors.$color-incentives;
|
||||
}
|
||||
.tile:hover .section-teambuilding & {
|
||||
background-color: $color-teambuilding;
|
||||
background-color: colors.$color-teambuilding;
|
||||
}
|
||||
|
||||
.tile:hover .section-meetings & {
|
||||
background-color: $color-meetings;
|
||||
background-color: colors.$color-meetings;
|
||||
}
|
||||
|
||||
.tile:hover .section-events & {
|
||||
background-color: $color-events;
|
||||
background-color: colors.$color-events;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,7 +81,7 @@
|
||||
display: none;
|
||||
padding: 16px 32px 0;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
.tile:hover & {
|
||||
display: block;
|
||||
}
|
||||
@@ -91,10 +95,10 @@
|
||||
margin-top: -1px;
|
||||
|
||||
polygon {
|
||||
@include sectionFills();
|
||||
@include mixins.sectionFills();
|
||||
}
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
.tile:hover & {
|
||||
display: block;
|
||||
}
|
||||
@@ -114,7 +118,7 @@
|
||||
font-weight: 700;
|
||||
min-height: 54px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include breakpoints.mq($from: tablet) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use "mixins";
|
||||
|
||||
.video {
|
||||
@include container();
|
||||
@include mixins.container();
|
||||
padding-top: 32px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "breakpoints";
|
||||
@use "variables";
|
||||
@use "mixins";
|
||||
@use "breakpoints";
|
||||
|
||||
@import "colors";
|
||||
@import "fonts";
|
||||
@use "colors";
|
||||
@use "fonts";
|
||||
|
||||
@import "base";
|
||||
@import "buttons";
|
||||
@import "page-header";
|
||||
@import "page-footer";
|
||||
@import "layout";
|
||||
@import "sitenav";
|
||||
@import "helpernav";
|
||||
@import "mobilenav";
|
||||
@import "herounit";
|
||||
@import "carousel";
|
||||
@import "slider";
|
||||
@import "configurator";
|
||||
@import "statement";
|
||||
@import "testimonial";
|
||||
@import "brands";
|
||||
@import "iconbar";
|
||||
@import "tiles";
|
||||
@import "card";
|
||||
@import "box";
|
||||
@import "banner";
|
||||
@import "iconnav";
|
||||
@import "forms";
|
||||
@import "teasers";
|
||||
@import "badge";
|
||||
@import "team";
|
||||
@import "search";
|
||||
@import "offerlist";
|
||||
@import "paginator";
|
||||
@import "news";
|
||||
@import "datepicker";
|
||||
@import "cookiefirst";
|
||||
@import "video";
|
||||
@use "base";
|
||||
@use "buttons";
|
||||
@use "page-header";
|
||||
@use "page-footer";
|
||||
@use "layout";
|
||||
@use "sitenav";
|
||||
@use "helpernav";
|
||||
@use "mobilenav";
|
||||
@use "herounit";
|
||||
@use "carousel";
|
||||
@use "slider";
|
||||
@use "configurator";
|
||||
@use "statement";
|
||||
@use "testimonial";
|
||||
@use "brands";
|
||||
@use "iconbar";
|
||||
@use "tiles";
|
||||
@use "card";
|
||||
@use "box";
|
||||
@use "banner";
|
||||
@use "iconnav";
|
||||
@use "forms";
|
||||
@use "teasers";
|
||||
@use "badge";
|
||||
@use "team";
|
||||
@use "search";
|
||||
@use "offerlist";
|
||||
@use "paginator";
|
||||
@use "news";
|
||||
@use "datepicker";
|
||||
@use "cookiefirst";
|
||||
@use "video";
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
@import "mixins";
|
||||
@import "colors";
|
||||
@use "mixins";
|
||||
@use "colors";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Cairo';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cairo-v2-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local('Cairo'), local('Cairo-Regular'),
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.svg#Cairo') format('svg'); /* Legacy iOS */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.woff2') format('woff2'),
|
||||
url('../fonts/cairo-v2-latin-ext_latin-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -20,13 +16,9 @@
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cairo-v2-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local('Cairo Bold'), local('Cairo-Bold'),
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.svg#Cairo') format('svg'); /* Legacy iOS */
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.woff2') format('woff2'),
|
||||
url('../fonts/cairo-v2-latin-ext_latin-700.woff') format('woff');
|
||||
}
|
||||
|
||||
$font-main: 'Cairo';
|
||||
@@ -34,12 +26,8 @@ $font-main: 'Cairo';
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
font-display: swap;
|
||||
src: url('../fonts/fontello.eot?39986861');
|
||||
src: url('../fonts/fontello.eot?39986861#iefix') format('embedded-opentype'),
|
||||
url('../fonts/fontello.woff2?39986861') format('woff2'),
|
||||
url('../fonts/fontello.woff?39986861') format('woff'),
|
||||
url('../fonts/fontello.ttf?39986861') format('truetype'),
|
||||
url('../fonts/fontello.svg?39986861#fontello') format('svg');
|
||||
src: url('../fonts/fontello.woff2?39986861') format('woff2'),
|
||||
url('../fonts/fontello.woff?39986861') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -123,7 +111,7 @@ ul {
|
||||
left: 0;
|
||||
content: "\25CF";
|
||||
font-size: 18px;
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -141,8 +129,8 @@ p {
|
||||
hr {
|
||||
max-width: 25%;
|
||||
margin: 32px auto 32px 0;
|
||||
color: $color-ruler;
|
||||
background-color: $color-ruler;
|
||||
color: colors.$color-ruler;
|
||||
background-color: colors.$color-ruler;
|
||||
height: 1px;
|
||||
border: none;
|
||||
}
|
||||
@@ -158,7 +146,7 @@ h3,
|
||||
}
|
||||
|
||||
.headline {
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
|
||||
&--icon {
|
||||
display: flex;
|
||||
@@ -192,9 +180,9 @@ h1,
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
color: $color-brand-primary;
|
||||
color: colors.$color-brand-primary;
|
||||
text-transform: none;
|
||||
@include sectionColoursFromParent();
|
||||
@include mixins.sectionColoursFromParent();
|
||||
|
||||
&--box {
|
||||
color: white;
|
||||
@@ -229,7 +217,7 @@ h3 {
|
||||
|
||||
&--default {
|
||||
display: inline-block;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
padding: 4px 16px;
|
||||
}
|
||||
@@ -237,7 +225,7 @@ h3 {
|
||||
&--page-header {
|
||||
display: block;
|
||||
min-width: 186px;
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
padding: 0 32px 0 24px;
|
||||
@@ -250,8 +238,8 @@ h3 {
|
||||
display: block;
|
||||
min-width: 220px;
|
||||
text-align: center;
|
||||
background-color: $color-brand-primary;
|
||||
@include sectionBackgroundsFromParent();
|
||||
background-color: colors.$color-brand-primary;
|
||||
@include mixins.sectionBackgroundsFromParent();
|
||||
color: white;
|
||||
line-height: 48px;
|
||||
border: none;
|
||||
@@ -271,7 +259,7 @@ h3 {
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $color-font-main;
|
||||
color: colors.$color-font-main;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,7 +268,7 @@ h3 {
|
||||
}
|
||||
|
||||
&--icon {
|
||||
background-color: $color-brand-primary;
|
||||
background-color: colors.$color-brand-primary;
|
||||
color: white;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import 'whatwg-fetch'
|
||||
|
||||
export const useFetch = controller => {
|
||||
Object.assign(controller, {
|
||||
checkStatus(response) {
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
@use "sass:meta";
|
||||
@layer base {
|
||||
body {
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||||
}
|
||||
@import "base/typography";
|
||||
@import "base/images";
|
||||
@include meta.load-css("base/typography");
|
||||
@include meta.load-css("base/images");
|
||||
|
||||
[data-rte-content] {
|
||||
@import "base/rte-content";
|
||||
}
|
||||
@include meta.load-css("base/rte-content");
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
@use "sass:meta";
|
||||
@layer components {
|
||||
@import "components/topnav";
|
||||
@import "components/background";
|
||||
@import "components/badges";
|
||||
@import "components/buttons";
|
||||
@import "components/contact-bar";
|
||||
@import "components/calendar";
|
||||
@import "components/forms";
|
||||
@import "components/herounit";
|
||||
@import "components/misc";
|
||||
@import "components/searchbar";
|
||||
@import "components/teaser";
|
||||
@import "components/travelinfo";
|
||||
@include meta.load-css("components/topnav");
|
||||
@include meta.load-css("components/background");
|
||||
@include meta.load-css("components/badges");
|
||||
@include meta.load-css("components/buttons");
|
||||
@include meta.load-css("components/contact-bar");
|
||||
@include meta.load-css("components/calendar");
|
||||
@include meta.load-css("components/forms");
|
||||
@include meta.load-css("components/herounit");
|
||||
@include meta.load-css("components/misc");
|
||||
@include meta.load-css("components/searchbar");
|
||||
@include meta.load-css("components/teaser");
|
||||
@include meta.load-css("components/travelinfo");
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@use "sass:meta";
|
||||
|
||||
// Lightbox
|
||||
@import "~glightbox/dist/css/glightbox.css";
|
||||
|
||||
// Tooltips
|
||||
@import "~cooltipz-css/src/cooltipz";
|
||||
@include meta.load-css("cooltipz-css/cooltipz.css");
|
||||
|
||||
:root {
|
||||
--cooltipz-bg-color: theme('colors.zinc.700');
|
||||
|
||||
+35
-31
@@ -1,35 +1,38 @@
|
||||
h1,
|
||||
.headline--primary,
|
||||
h2,
|
||||
.headline--secondary,
|
||||
h3,
|
||||
.headline--3,
|
||||
h4,
|
||||
.headline--4 {
|
||||
// Self-contained: the wrapper lives here so `&` and @extend resolve the same
|
||||
// way they did when this file was @imported into a [data-rte-content] block.
|
||||
[data-rte-content] {
|
||||
h1,
|
||||
.headline--primary,
|
||||
h2,
|
||||
.headline--secondary,
|
||||
h3,
|
||||
.headline--3,
|
||||
h4,
|
||||
.headline--4 {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
ul {
|
||||
@apply list-disc pl-4 mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
ol {
|
||||
@apply list-decimal pl-4 mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
p {
|
||||
@apply mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.button):not(.rte-button):not(.rte-button--full) {
|
||||
a:not(.button):not(.rte-button):not(.rte-button--full) {
|
||||
@apply underline text-ep-primary-dark sbw:text-sbw-primary-dark;
|
||||
|
||||
.bg-brand-gradient & {
|
||||
@apply text-white underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.rte-button {
|
||||
a.rte-button {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 md:px-8;
|
||||
@apply uppercase leading-none text-center;
|
||||
@apply transition-colors outline-none;
|
||||
@@ -49,34 +52,35 @@ a.rte-button {
|
||||
@apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
|
||||
@apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a.rte-button--full {
|
||||
a.rte-button--full {
|
||||
@extend .rte-button;
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
table,
|
||||
.table {
|
||||
table,
|
||||
.table {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
thead {
|
||||
tr {
|
||||
@apply bg-zinc-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tbody {
|
||||
tr {
|
||||
@apply odd:bg-zinc-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
th {
|
||||
@apply border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
td {
|
||||
@apply border-r border-zinc-200 px-2 py-1 md:p-2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
@import "tailwindcss/base";
|
||||
@import "base";
|
||||
@use "sass:meta";
|
||||
|
||||
@import "tailwindcss/components";
|
||||
@import "components";
|
||||
@include meta.load-css("tailwindcss/base");
|
||||
@include meta.load-css("base");
|
||||
|
||||
@import "tailwindcss/utilities";
|
||||
@import "utilities";
|
||||
@include meta.load-css("tailwindcss/components");
|
||||
@include meta.load-css("components");
|
||||
|
||||
@import "vendor";
|
||||
@include meta.load-css("tailwindcss/utilities");
|
||||
@include meta.load-css("utilities");
|
||||
|
||||
@include meta.load-css("vendor");
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "base/fonts";
|
||||
@use "base/fonts";
|
||||
|
||||
body {
|
||||
@apply antialiased text-zinc-800 font-sans;
|
||||
|
||||
+25
-11
@@ -1,4 +1,5 @@
|
||||
const Encore = require('@symfony/webpack-encore');
|
||||
const path = require('path');
|
||||
|
||||
if (!Encore.isRuntimeEnvironmentConfigured()) {
|
||||
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
|
||||
@@ -12,8 +13,18 @@ Encore
|
||||
.addStyleEntry('rte', './public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
|
||||
.splitEntryChunks()
|
||||
.enableSingleRuntimeChunk()
|
||||
.enableSassLoader()
|
||||
.enableVueLoader(() => {}, { runtimeCompilerBuild: false })
|
||||
.enableSassLoader(options => {
|
||||
// Opt into the modern Sass JS API (sass-loader defaults to the legacy one,
|
||||
// which Dart Sass 2.0 removes). Encore still passes `outputStyle`, which
|
||||
// the modern API ignores in favour of `style`.
|
||||
options.api = 'modern'
|
||||
delete options.sassOptions.outputStyle
|
||||
options.sassOptions.style = 'expanded'
|
||||
|
||||
// sass-loader's webpack importer declines `.css` requests, so plain CSS
|
||||
// pulled in with meta.load-css() has to be resolvable by Dart Sass itself.
|
||||
options.sassOptions.loadPaths = [path.join(__dirname, 'node_modules')]
|
||||
})
|
||||
.enableVersioning(Encore.isProduction())
|
||||
.enableSourceMaps(!Encore.isProduction())
|
||||
.cleanupOutputBeforeBuild()
|
||||
@@ -41,13 +52,8 @@ Encore
|
||||
.configureFontRule({
|
||||
filename: 'fonts/[name][ext]',
|
||||
})
|
||||
.configureBabel(function (babelConfig) {
|
||||
babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
|
||||
})
|
||||
.configureBabelPresetEnv((config) => {
|
||||
config.shippedProposals = true
|
||||
config.useBuiltIns = 'usage'
|
||||
config.corejs = 3
|
||||
});
|
||||
|
||||
const EpThemeConfig = Encore.getWebpackConfig();
|
||||
@@ -65,7 +71,18 @@ Encore
|
||||
.addStyleEntry('rte', './public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/rte.scss')
|
||||
.enableSingleRuntimeChunk()
|
||||
.splitEntryChunks()
|
||||
.enableSassLoader()
|
||||
.enableSassLoader(options => {
|
||||
// Opt into the modern Sass JS API (sass-loader defaults to the legacy one,
|
||||
// which Dart Sass 2.0 removes). Encore still passes `outputStyle`, which
|
||||
// the modern API ignores in favour of `style`.
|
||||
options.api = 'modern'
|
||||
delete options.sassOptions.outputStyle
|
||||
options.sassOptions.style = 'expanded'
|
||||
|
||||
// sass-loader's webpack importer declines `.css` requests, so plain CSS
|
||||
// pulled in with meta.load-css() has to be resolvable by Dart Sass itself.
|
||||
options.sassOptions.loadPaths = [path.join(__dirname, 'node_modules')]
|
||||
})
|
||||
.enableVueLoader()
|
||||
.autoProvidejQuery()
|
||||
.enableSourceMaps(!Encore.isProduction())
|
||||
@@ -86,9 +103,6 @@ Encore
|
||||
})
|
||||
.configureFontRule({
|
||||
filename: 'fonts/[name][ext]',
|
||||
})
|
||||
.configureBabel(function (babelConfig) {
|
||||
babelConfig.plugins = [ '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import' ]
|
||||
});
|
||||
|
||||
const EpEventsConfig = Encore.getWebpackConfig();
|
||||
|
||||
Reference in New Issue
Block a user