Improve theming of buttons and product detail page for site ser

This commit is contained in:
Björn Fromme
2022-06-07 15:58:54 +02:00
parent 48b6f1a9db
commit 2a8bfe10fc
3 changed files with 13 additions and 12 deletions
@@ -26,7 +26,7 @@
&--active,
&--secondary {
@apply bg-ep-primary;
@apply bg-ep-secondary;
@apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary;
@apply uch:bg-uch-primary;
@@ -40,6 +40,7 @@
&--dark {
@apply bg-ep-primary-dark;
@apply ser:bg-ser-primary;
@apply ser:hover:bg-ser-secondary ser:group-hover:bg-ser-secondary;
}
&--light {
@@ -1,7 +1,7 @@
@import "~cooltipz-css/src/cooltipz";
:root {
--cooltipz-bg-color: theme('colors.ep.secondary');
--cooltipz-border-color: theme('colors.ep.secondary');
--cooltipz-bg-color: theme('colors.gray.700');
--cooltipz-border-color: theme('colors.gray.700');
--cooltipz-text-color: theme('colors.white');
}
@@ -49,7 +49,7 @@
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
<f:then>
<button type="button"
class="text-left text-ep-primary-light text-sm md:text-base"
class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}">
{row.dateStart} - {row.dateEnd}
@@ -93,7 +93,7 @@
</span>
</f:if>
<button type="button"
class="text-ep-primary-light col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
data-action="pricetable#openModal"
data-type="services"
data-uid="{row.dateUid}"
@@ -121,7 +121,7 @@
<f:if condition="{row.showBookingButton}">
<f:then>
<button type="button"
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-gray-300')}"
data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}">
<svg class="w-6 h-6 hidden md:block">
@@ -135,7 +135,7 @@
<f:else>
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
title="Reisen-Alert"
class="flex space-x-1 items-center text-ep-primary-light">
class="flex space-x-1 items-center text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6 hidden md:block">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg>
@@ -156,7 +156,7 @@
<li class="py-2">
<button type="button"
data-action="pricetable#toggleSurcharge"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg>
@@ -172,7 +172,7 @@
<li class="py-2">
<button type="button"
data-action="pricetable#toggleDiscount"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg>
@@ -187,7 +187,7 @@
<f:if condition="{dates -> f:count()} > 5">
<li class="py-2">
<button type="button"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary"
data-action="pricetable#toggleRows">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
@@ -203,7 +203,7 @@
<li class="py-2">
<a href="{altProductLink}"
title="{altLabel}"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light">
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg>
@@ -223,7 +223,7 @@
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
<span class="text-xl font-bold">
Inklusivleistungen {hotel.name}
</span>