From 46c61e50b582afe0220a5479db1f9696ddcc99da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 12 Jul 2022 12:26:21 +0200
Subject: [PATCH] Fix buttons in rte generated content

---
 .../ep_theme/Configuration/RTE/Default.yaml   |  6 +++---
 .../ep_theme/Configuration/RTE/Minimal.yaml   |  3 ++-
 .../Assets/scss/base/_rte-content.scss        | 21 +++++++++++++++++++
 .../Resources/Private/Assets/scss/rte.scss    | 18 ++++++----------
 tailwind.config.js                            |  1 +
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml b/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
index 0e2433e1..011454e6 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
+++ b/public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml
@@ -7,11 +7,11 @@ editor:
   config:
     disableNativeSpellChecker: false
     contentsCss:
-      - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
+      - "EXT:ep_theme/Resources/Public/css/rte.css?v=2022.07-01"
 
     stylesSet:
-      - { name: "Button", element: "a", attributes: { 'class': 'button bg-button' } }
-      - { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button bg-button button--full' } }
+      - { name: "Button", element: "a", attributes: { 'class': 'rte-button' } }
+      - { name: "Button volle Breite", element: "a", attributes: { 'class': 'rte-button--full' } }
 
     toolbarGroups:
       - { name: styles, groups: [ format, styles ] }
diff --git a/public/typo3conf/ext/ep_theme/Configuration/RTE/Minimal.yaml b/public/typo3conf/ext/ep_theme/Configuration/RTE/Minimal.yaml
index 9a8eee38..9b8aa72f 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/RTE/Minimal.yaml
+++ b/public/typo3conf/ext/ep_theme/Configuration/RTE/Minimal.yaml
@@ -11,7 +11,8 @@ editor:
       - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
 
     stylesSet:
-      - { name: "Button", element: "a", attributes: { 'class': 'button' } }
+      - { name: "Button", element: "a", attributes: { 'class': 'rte-button' } }
+      - { name: "Button volle Breite", element: "a", attributes: { 'class': 'rte-button--full' } }
 
     toolbarGroups:
       - { name: paragraph, groups: [ list] }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
index 5ba46261..08bb67d5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
@@ -25,6 +25,27 @@ a:not(.button) {
     @apply text-ep-primary-light sbw:text-sbw-primary-dark;
 }
 
+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 focus:outline-none;
+    @apply bg-ep-primary-light text-white;
+    @apply sbw:bg-sbw-secondary;
+    @apply snz:bg-snz-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 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;
+}
+
+a.rte-button--full {
+    @extend .rte-button;
+    @apply w-full;
+}
+
 table,
 .table {
     @apply w-full;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss
index 78617a24..62c401ed 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss
@@ -10,21 +10,15 @@ table {
     font-size: inherit;
 }
 
-a.button {
-    border: 1px solid #999;
-    padding: 0.25em;
-}
-
-a.bg-button {
+a.rte-button {
+    @apply inline-flex items-center justify-center px-4 py-2 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center no-underline;
     @apply bg-ep-primary-light text-white;
-    @apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
 }
 
-a.button--full {
-    border: 1px solid #999;
-    padding: 0.25em;
-    display: block;
-    width: 95%;
+a.rte-button--full {
+    @extend .rte-button;
+    @apply w-full;
 }
 
 td, th {
diff --git a/tailwind.config.js b/tailwind.config.js
index 19d6efbd..39dfff47 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ const tinycolor = require('tinycolor2')
 module.exports = {
     purge: {
         content: [
+            './public/typo3conf/ext/ep_theme/Configuration/RTE/*.yaml',
             './public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
             './public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
             './public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',