feat(modal): split common & native styles

Author: Tanner Reits

core/src/components/modal/modal.scss renamed to core/src/components/modal/modal.common.scss

@@ -1,14 +1,11 @@
-@import "./modal.vars";
+@import "../../themes/native/native.globals";
 
-// Modals
+// Modals: Common Styles
 // --------------------------------------------------
 
 :host {
   /**
-   * @prop --background: Background of the modal content
-   *
    * @prop --border-color: Border color of the modal content
-   * @prop --border-radius: Border radius of the modal content
    * @prop --border-width: Border width of the modal content
    * @prop --border-style: Border style of the modal content
    *
@@ -19,8 +16,6 @@
    * @prop --min-height: Minimum height of the modal
    * @prop --height: Height of the modal
    * @prop --max-height: Maximum height of the modal
-   *
-   * @prop --backdrop-opacity: Opacity of the backdrop
    */
   --width: 100%;
   --min-width: auto;
@@ -29,13 +24,10 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
-  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
-  --background: #{$background-color};
   --box-shadow: none;
-  --backdrop-opacity: 0;
 
   @include position(0, 0, 0, 0);
 
@@ -47,8 +39,6 @@
 
   outline: none;
 
-  color: $modal-text-color;
-
   contain: strict;
 }
 
@@ -90,37 +80,14 @@ ion-backdrop {
   background: transparent;
 }
 
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-small};
-    --ion-safe-area-top: 0px;
-    --ion-safe-area-bottom: 0px;
-    --ion-safe-area-right: 0px;
-    --ion-safe-area-left: 0px;
-  }
-}
-
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
-  :host {
-    --width: #{$modal-inset-width};
-    --height: #{$modal-inset-height-large};
-  }
-}
-
 // Sheet Modal
 // --------------------------------------------------
 
 .modal-handle {
-  @include position(5px, 0px, null, 0px);
-  @include border-radius(8px, 8px, 8px, 8px);
   @include margin(null, auto, null, auto);
 
   position: absolute;
 
-  width: 36px;
-  height: 5px;
-
   /**
    * This allows the handle to appear
    * on top of user content in WebKit.
@@ -129,8 +96,6 @@ ion-backdrop {
 
   border: 0;
 
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-
   cursor: pointer;
 
   z-index: 11;
@@ -144,9 +109,6 @@ ion-backdrop {
 
     position: absolute;
 
-    width: 36px;
-    height: 5px;
-
     transform: translate(-50%, -50%);
 
     content: "";

core/src/components/modal/modal.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./modal";
+@import "./modal.common";
 
 // Ionic Modal
 // --------------------------------------------------

core/src/components/modal/modal.ios.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.ios.vars";
 
 // iOS Modals

core/src/components/modal/modal.md.scss

@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
 @import "./modal.md.vars";
 
 // Material Design Modals

core/src/components/modal/modal.native.scss

@@ -0,0 +1,56 @@
+@use "./datetime.common";
+@import "./modal.native.vars";
+
+// Modals: Native Styles
+// --------------------------------------------------
+
+:host {
+  /**
+    * @prop --background: Background of the modal content
+    *
+    * @prop --border-radius: Border radius of the modal content
+    *
+    * @prop --backdrop-opacity: Opacity of the backdrop
+    */
+  --background: #{$background-color};
+  --border-radius: 0;
+  --backdrop-opacity: 0;
+
+  color: $modal-text-color;
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+  :host {
+    --width: #{$modal-inset-width};
+    --height: #{$modal-inset-height-small};
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
+  }
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
+  :host {
+    --width: #{$modal-inset-width};
+    --height: #{$modal-inset-height-large};
+  }
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+  @include position(5px, 0px, null, 0px);
+  @include border-radius(8px, 8px, 8px, 8px);
+
+  width: 36px;
+  height: 5px;
+
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+
+  &::before {
+    width: 36px;
+    height: 5px;
+  }
+}