Merge pull request #1698 from basecamp/mobile-app/scoped-stylesheets

Mobile app / Scoped stylesheets

Author: adjogima

app/assets/stylesheets/android/utilities.css

@@ -0,0 +1,5 @@
+@layer android {
+  .hide-in-android-app {
+    display: none;
+  }
+}

app/assets/stylesheets/ios/utilities.css

@@ -0,0 +1,5 @@
+@layer ios {
+  .hide-in-ios-app {
+    display: none;
+  }
+}

app/assets/stylesheets/mobile_app/_global.css

@@ -0,0 +1,10 @@
+@layer mobile_app {
+  /* Use custom insets to account for floating navigation elements.
+     The mobile apps can inject their own inset value based on native elements on screen. */
+  :root {
+    --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
+    --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
+    --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
+    --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
+  }
+}

app/assets/stylesheets/mobile_app/utilities.css

@@ -0,0 +1,9 @@
+@layer mobile_app {
+  .hide-in-mobile-app {
+    display: none;
+  }
+
+  .show-in-mobile-app {
+    display: unset;
+  }
+}

app/assets/stylesheets/_global.css app/assets/stylesheets/web/_global.cssapp/assets/stylesheets/_global.css renamed to app/assets/stylesheets/web/_global.css

@@ -1,4 +1,4 @@
-@layer reset, base, components, modules, utilities;
+@layer reset, base, components, modules, utilities, mobile_app, android, ios;
 
 :root {
   /* Spacing */