feat: screen presentation and dismiss animations for mobile (#2073)

packages/web/src/stylesheets/_animation.scss

@@ -1,7 +1,3 @@
-.animate-slide-in-top {
-  animation: slide-in-top 0.1s ease-out;
-}
-
 @keyframes slide-in-top {
   0% {
     opacity: 0;

packages/web/src/stylesheets/_columns.scss

@@ -1,39 +0,0 @@
-.app-column-container {
-  display: flex;
-  flex-direction: column;
-
-  @media screen and (min-width: 768px) {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: auto auto 2fr;
-  }
-}
-
-.app-column {
-  overflow: hidden;
-
-  .content {
-    height: 100%;
-  }
-
-  @media screen and (max-width: 768px) {
-    &[data-selected-pane] {
-      flex-grow: 1;
-
-      .content {
-        overflow-y: auto;
-      }
-    }
-
-    #editor-content {
-      width: 100% !important;
-      left: 0 !important;
-    }
-
-    &:not([data-selected-pane]) {
-      min-height: 0;
-      height: auto;
-      padding: 0;
-    }
-  }
-}

packages/web/src/stylesheets/_focused.scss

@@ -5,6 +5,10 @@
       padding-top: 35px;
     }
 
+    .app {
+      transition: grid-template-columns 0.25s;
+    }
+
     .mac-desktop #editor-column:before {
       content: '';
       display: block;
@@ -28,8 +32,8 @@
 
       background-color: var(--sn-stylekit-contrast-background-color);
 
-      .content {
-        box-shadow: 0 0 4px 1px var(--sn-stylekit-shadow-color);
+      .editor {
+        box-shadow: 0 0 5px 0.5px var(--sn-stylekit-shadow-color);
         overflow: hidden;
       }
 

packages/web/src/stylesheets/_items-column.scss

@@ -6,7 +6,6 @@
   user-select: none;
 
   @media screen and (min-width: 768px) {
-    border-left: 1px solid var(--items-column-border-left-color);
     border-right: 1px solid var(--items-column-border-right-color);
   }
 

packages/web/src/stylesheets/_main.scss

@@ -156,7 +156,6 @@ body,
   width: 100%;
 
   .section {
-    position: relative;
     overflow: hidden;
 
     .section-title-bar {

packages/web/src/stylesheets/_navigation.scss

@@ -8,6 +8,10 @@ $content-horizontal-padding: 16px;
   display: flex;
   flex-direction: column;
 
+  @media screen and (min-width: 768px) {
+    border-right: 1px solid var(--items-column-border-right-color);
+  }
+
   &,
   #navigation-content {
     background-color: var(--navigation-column-background-color);

packages/web/src/stylesheets/index.css.scss

@@ -19,7 +19,6 @@ $blocks-editor-icons-path: '../../../blocks-editor/src/Lexical/Icons';
 @import 'preferences';
 @import 'focused';
 @import 'sn';
-@import 'columns';
 @import 'animation';
 @import '../../../blocks-editor/src/Lexical/Theme/lexical.scss';