test(ac): revert og styles and move tabs

Author: thetaPC

core/src/components/action-sheet/action-sheet.scss

@@ -53,9 +53,6 @@
   display: block;
   position: fixed;
 
-  align-items: center;
-  justify-content: center;
-
   outline: none;
 
   font-family: $font-family-base;
@@ -70,9 +67,11 @@
 }
 
 .action-sheet-wrapper {
-  display: flex;
+  @include position(null, 0, 0, 0);
+  @include transform(translate3d(0, 100%, 0));
 
-  flex-direction: column;
+  display: block;
+  position: absolute;
 
   width: var(--width);
   min-width: var(--min-width);
@@ -83,6 +82,7 @@
   max-height: var(--max-height);
 
   z-index: $z-index-overlay-wrapper;
+  pointer-events: none;
 }
 
 .action-sheet-title,

core/src/components/action-sheet/action-sheet.tsx

@@ -385,9 +385,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0"></div>
-
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
+          <div tabindex="0"></div>
+
           <div class="action-sheet-container">
             <div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
               {(header || this.subHeader) && (
@@ -448,9 +448,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               </div>
             )}
           </div>
-        </div>
 
-        <div tabindex="0"></div>
+          <div tabindex="0"></div>
+        </div>
       </Host>
     );
   }