diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss index 7a173d99..7ac3ebf7 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss @@ -1,19 +1,73 @@ -.product-teaser { - @apply relative; +.product-teaser__flag { + @apply w-6 h-4 md:w-8 md:h-6; } -.product-teaser__icon { - @apply w-4 h-4 md:w-8 md:h-8; +.product-teaser__label-concept { + @apply text-white uppercase font-semibold; + + [data-teasergrid-disabled-value="false"] & { + @apply text-xs md:text-base; + } } -.product-teaser__concept { - @apply text-sm md:text-base; +.product-teaser__watchlist-icon { + @apply text-white w-6 h-6; + + [data-teasergrid-disabled-value="false"] & { + @apply w-4 h-4 md:w-6 md:h-6; + } } -.product-teaser__content { - @apply px-2 py-4 md:p-4; +.product-teaser__label-name { + @apply text-gray-800 leading-none; + + [data-teasergrid-disabled-value="false"] & { + @apply text-sm md:text-base; + } } -.product-teaser__product { - @apply pl-8 md:pl-10; +.product-teaser__label-region { + @apply h-12 md:h-16 text-gray-800 leading-none font-bold text-3xl; + + [data-teasergrid-disabled-value="false"] & { + @apply text-lg leading-none md:text-3xl md:leading-none; + } +} + +.product-teaser__label-included { + @apply pb-2 text-gray-800 text-xl font-bold leading-none; + + [data-teasergrid-disabled-value="false"] & { + @apply text-sm md:text-lg lg:text-xl; + } +} + +.product-teaser__list-included { + [data-teasergrid-disabled-value="false"] & { + @apply text-sm md:text-base; + } +} + +.product-teaser__list-icon { + @apply w-6 h-6 text-ep-primary; + + [data-teasergrid-disabled-value="false"] & { + @apply w-4 h-4 md:w-6 md:h-6; + } +} + +.product-teaser__price { + @apply text-3xl; + + [data-teasergrid-disabled-value="false"] & { + @apply text-xl md:text-3xl; + } +} + +.product-teaser__label-price { + @apply inline-block; + + [data-teasergrid-disabled-value="false"] & { + @apply text-sm md:text-base lg:inline-block; + } } diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html index 836cf6dd..479b0a8b 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html @@ -34,8 +34,6 @@ - - diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html index 6c236faf..69cc386a 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html @@ -3,7 +3,7 @@ xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> -
+
@@ -19,7 +19,7 @@
- + @@ -31,13 +31,12 @@
- --> - + --> + {concept.name}
@@ -55,18 +54,18 @@ -
+
{product.name}
-
+
{region.name}
-
+
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
-
    +
    • - + @@ -75,7 +74,7 @@
    • - + @@ -85,7 +84,7 @@
    • - + @@ -97,9 +96,9 @@
      - ab {minPrice} € + ab {minPrice} €
      -
      +
      p. P. / inkl. {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
      diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html index 866f1499..259dbe1b 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html @@ -21,19 +21,19 @@ data-action="teasergrid#grid" data-teasergrid-target="button"> - +
      - +
      diff --git a/tailwind.config.js b/tailwind.config.js index 5cf6252c..a7862e13 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -42,6 +42,9 @@ module.exports = { xl: '1280px', }, extend: { + fontSize: { + 'xs': '.6rem', + }, colors: { overlay: { black: tinycolor('#000000').setAlpha(0.85).toRgbString(),