EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modernize fe tooling and drop weight

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