DEV: merge mobile stylesheets into common with breakpoints (#31656)

This is the beginning of a longer process to merge our stylesheets under
the common directory.

I also converted a SCSS variable to a CSS custom property along the way.

In the case of the lightbox styles, this seemed more appropriate to
distinguish by primary input type (touch vs mouse) rather than
breakpoint sizes.

app/assets/stylesheets/common/base/alert.scss

@@ -39,6 +39,11 @@
     &.clickable {
       color: var(--tertiary);
       z-index: z("base");
+
+      .mobile-view & {
+        margin: 0;
+        padding: 1em;
+      }
     }
   }
 

app/assets/stylesheets/common/base/dialog.scss

@@ -10,6 +10,11 @@
 .dialog-container {
   z-index: z("modal", "dialog");
   display: flex;
+
+  // fixes modal placement on Android when keyboard is visible
+  html.keyboard-visible:not(.ios-device) & {
+    height: calc(100% - env(keyboard-inset-height));
+  }
 }
 
 /**

app/assets/stylesheets/common/base/directory.scss

@@ -16,6 +16,12 @@
     .directory-group-selector {
       vertical-align: top;
     }
+
+    @include breakpoint("mobile-large") {
+      .filter-name {
+        width: 100%;
+      }
+    }
   }
 
   .user-info {
@@ -30,16 +36,34 @@
     display: flex;
     justify-content: space-between;
 
+    @include breakpoint("mobile-large") {
+      display: block;
+    }
+
     .total-rows {
       color: var(--primary-medium);
       font-weight: normal;
+
+      @include breakpoint("mobile-large") {
+        display: block;
+      }
     }
   }
 
   .directory-last-updated {
-    margin-bottom: 0.5em;
     color: var(--primary-medium);
     font-size: var(--font-down-1);
+    margin-bottom: 0.5em;
+
+    @include breakpoint("mobile-large") {
+      margin-bottom: 1em;
+    }
+  }
+
+  @include breakpoint("tablet") {
+    .period-chooser .period-chooser-header h2.selected-name {
+      font-size: var(--font-up-1);
+    }
   }
 }
 

app/assets/stylesheets/common/base/lightbox.scss

@@ -1,5 +1,3 @@
-$meta-element-margin: 6px;
-
 .lightbox-wrapper .lightbox {
   position: relative;
   display: inline-block;
@@ -39,6 +37,7 @@ $meta-element-margin: 6px;
 }
 
 .meta {
+  --meta-element-margin: 0.375em;
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -49,29 +48,60 @@ $meta-element-margin: 6px;
   display: flex;
   align-items: center;
 
+  @media (pointer: coarse) {
+    align-items: center;
+    background: var(--secondary);
+    color: var(--primary-high);
+    height: 25px;
+    width: 25px;
+    bottom: 0;
+    right: 0;
+    opacity: 0.8;
+  }
+
   .filename {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
 
     @include ellipsis;
+
+    @media (pointer: coarse) {
+      display: none;
+    }
   }
 
   .d-icon {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
     opacity: 0.8;
     color: var(--secondary);
 
     + .filename {
       margin-left: 0;
     }
+
+    &.d-icon-far-image {
+      @media (pointer: coarse) {
+        display: none;
+      }
+    }
   }
 
   .informations {
-    margin: $meta-element-margin;
+    margin: var(--meta-element-margin);
     padding-right: 20px;
     color: var(--secondary-high);
     font-size: var(--font-0);
     flex-shrink: 0;
     flex-grow: 3;
+
+    @media (pointer: coarse) {
+      display: none;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .d-icon-discourse-expand {
+      color: var(--primary-high);
+    }
   }
 }
 

app/assets/stylesheets/mobile/_index.scss

@@ -1,13 +1,9 @@
-@import "alert";
 @import "compose";
 @import "dashboard";
-@import "dialog";
-@import "directory";
 @import "discourse";
 @import "edit-category";
 @import "header";
 @import "invite-signup";
-@import "lightbox";
 @import "list-controls";
 @import "login-modal";
 @import "login-signup-page";

app/assets/stylesheets/mobile/alert.scss

@@ -1,7 +0,0 @@
-.alert.alert-info {
-  &.clickable {
-    // there are (n) new or updated topics, click to show
-    margin: 0;
-    padding: 1em;
-  }
-}

app/assets/stylesheets/mobile/dialog.scss

@@ -1,6 +0,0 @@
-.dialog-container {
-  // fixes modal placement on Android when keyboard is visible
-  html.keyboard-visible:not(.ios-device) & {
-    height: calc(100% - env(keyboard-inset-height));
-  }
-}

app/assets/stylesheets/mobile/directory.scss

@@ -1,24 +0,0 @@
-.directory {
-  .period-chooser .period-chooser-header h2.selected-name {
-    font-size: var(--font-up-1);
-  }
-
-  &.users-directory {
-    .filter-name {
-      width: 100%;
-    }
-
-    .directory-last-updated {
-      margin-bottom: 1em;
-    }
-  }
-
-  .directory-controls {
-    display: block;
-  }
-
-  .total-rows {
-    color: var(--primary-medium);
-    padding: 5px;
-  }
-}

app/assets/stylesheets/mobile/lightbox.scss

@@ -1,25 +0,0 @@
-.lightbox .meta,
-.lightbox:hover .meta {
-  opacity: 0.7;
-  transition: none;
-}
-
-.meta {
-  align-items: center;
-  background: var(--secondary);
-  color: var(--primary-high);
-  height: 25px;
-  width: 25px;
-  bottom: 0;
-  right: 0;
-
-  .filename,
-  .informations,
-  .d-icon-far-image {
-    display: none;
-  }
-
-  .d-icon-discourse-expand {
-    color: var(--primary-high);
-  }
-}