feat: improve element placement issues and get rid of flip-x

tboerger · Jul 20, 2023 · 69c90f2 · 69c90f2
1 parent f555e61
commit 69c90f2
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 21 deletions.
diff --git a/layouts/center.vue b/layouts/center.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slidev-layout text-center">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <div class="my-auto">
       <slot />
     </div>

diff --git a/layouts/cover.vue b/layouts/cover.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slidev-layout cover text-center">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <div class="my-auto">
       <slot />
     </div>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -9,11 +9,11 @@ const props = defineProps({
 
 <template>
   <div class="slidev-layout default col-grid">
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <div
       class="top"
       :class="props.class"
     >
-      <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
       <slot />
     </div>
     <div
@@ -33,8 +33,8 @@ const props = defineProps({
       :class="props.class"
     >
       <slot name="bottom" />
-      <LayoutFooter />
     </div>
+    <LayoutFooter />
   </div>
 </template>
 

diff --git a/layouts/presenter.vue b/layouts/presenter.vue
@@ -14,7 +14,7 @@
 
 <template>
   <div class="slidev-layout presenter">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <div class="grid grid-cols-2 w-full h-full">
       <div class="image-right">
         <slot />

diff --git a/layouts/qrcode.vue b/layouts/qrcode.vue
@@ -19,7 +19,7 @@ const qrcode = computed(() => {
 
 <template>
   <div class="slidev-layout qrcode text-center">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <slot />
     <div class="container mx-auto">
       <img

diff --git a/layouts/twocols.vue b/layouts/twocols.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 
 <template>
   <div class="slidev-layout default">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <slot />
     <div class="flex mt-6 mb-3">
       <div
@@ -30,7 +30,7 @@ const props = defineProps({
       :class="props.class"
     >
       <slot name="bottom" />
-      <LayoutFooter />
     </div>
+    <LayoutFooter />
   </div>
 </template>
diff --git a/layouts/window.vue b/layouts/window.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slidev-layout">
-    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <LayoutHeader class="absolute bottom-0 right-0 transform rotate-y-180" />
     <div
       class="top"
     >
@@ -13,7 +13,7 @@
       class="bottom"
     >
       <slot name="bottom" />
-      <LayoutFooter />
     </div>
+    <LayoutFooter />
   </div>
 </template>
diff --git a/setup/windicss.ts b/setup/windicss.ts
@@ -38,16 +38,5 @@ export default defineWindiSetup(() => ({
   },
   plugins: [
     aspectRatioPlugin,
-    plugin(function ({ addUtilities, variants }) {
-      const newUtilities = {
-        '.flip-y': {
-          '--tw-scale-y': '-1 !important',
-        },
-        '.flip-x': {
-          '--tw-scale-x': '-1 !important',
-        },
-      }
-      addUtilities(newUtilities, variants('flip'))
-    }),
   ],
 }))