WIP Migrate to tailwind and alpine

This commit is contained in:
Björn Fromme
2021-08-12 17:51:22 +02:00
parent c71bf75b32
commit 24a0206da6
7 changed files with 15 additions and 8 deletions
@@ -5,7 +5,7 @@
&:before {
@apply block absolute top-0 left-0 inset-0 opacity-80;
@apply bg-ep-primary sbw:bg-sbw-primary;
@apply bg-ep-primary sbw:bg-sbw-primary uch:bg-uch-primary;
z-index: -10;
content: '';
}
@@ -18,7 +18,7 @@
&:before {
@apply block absolute top-0 left-0 inset-0 opacity-80;
@apply bg-ep-primary sbw:bg-sbw-primary;
@apply bg-ep-primary sbw:bg-sbw-primary uch:bg-uch-primary;
z-index: -10;
content: '';
}
@@ -4,16 +4,19 @@
@apply transition-colors outline-none focus:outline-none;
@apply bg-ep-secondary border-2 border-ep-secondary text-white;
@apply sbw:bg-sbw-secondary sbw:border-sbw-secondary;
@apply uch:bg-uch-secondary uch:border-uch-secondary;
&--active,
&--secondary {
@apply bg-ep-primary border-ep-primary;
@apply sbw:bg-sbw-primary sbw:border-sbw-primary;
@apply uch:bg-uch-primary uch:border-uch-primary;
}
&:hover {
@apply bg-ep-primary-dark border-ep-primary-dark;
@apply sbw:bg-sbw-primary-dark sbw:border-sbw-primary-dark;
@apply uch:bg-uch-primary-dark uch:border-uch-primary-dark;
}
&--light {
@@ -37,7 +37,7 @@
}
&:hover:after {
@apply sbw:bg-sbw-overlay-secondary;
@apply sbw:bg-sbw-overlay-secondary uch:bg-uch-overlay-secondary;
}
}
@@ -5,7 +5,7 @@
<div class="bg-winter my-2">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block sbw:md:hidden transform -translate-y-2 text-white'}"/>
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
@@ -22,7 +22,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary uch:bg-uch-secondary flex items-center space-x-2">
<svg class="w-10 h-10 text-white">
<use href="#icon-phone"></use>
</svg>
@@ -60,7 +60,7 @@
</div>
</div>
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block sbw:md:hidden transform translate-y-2 text-white'}"/>
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</f:if>
</div>
@@ -23,7 +23,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary uch:bg-uch-secondary flex items-center space-x-2">
<svg class="w-10 h-10 text-white">
<use href="#icon-phone"></use>
</svg>
@@ -6,7 +6,7 @@
property="{element.identifier}"
id="{element.uniqueIdentifier}"
value="{element.properties.value}"
class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary h-6 w-6"
class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-6 w-6"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
<span class="ml-2">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
+4
View File
@@ -69,6 +69,7 @@ module.exports = {
'secondary': '#ee525a',
'primary-dark': '#c7a20c',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#f0bc44').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
},
@@ -81,8 +82,11 @@ module.exports = {
'uch': {
'primary': '#b5e400',
'secondary': '#19a3dc',
'primary-dark': '#b5e400',
'primary-10': tinycolor('#b5e400').setAlpha(0.1).toRgbString(),
'primary-50': tinycolor('#b5e400').setAlpha(0.5).toRgbString(),
'primary-80': tinycolor('#b5e400').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#b5e400').setAlpha(0.55).toRgbString(),
},
},
height: {