UX: Experiment with animation (#32341)

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

@@ -34,6 +34,30 @@
   }
 }
 
+@keyframes float-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes background-fade-highlight {
   0% {
     background-color: var(--tertiary-low);

app/assets/stylesheets/common/base/search-menu.scss

@@ -102,12 +102,6 @@ $search-pad-horizontal: 0.5em;
     }
   }
 
-  .menu-panel {
-    border: 0;
-    box-shadow: var(--shadow-dropdown);
-    padding: 1rem;
-  }
-
   &.menu-panel-results {
     position: relative;
 

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

@@ -10,6 +10,10 @@
   font-weight: bold;
 }
 
+.search-menu-panel {
+  @include float-down;
+}
+
 .search-container {
   background: var(--d-content-background);
 

app/assets/stylesheets/common/components/welcome-banner.scss

@@ -18,13 +18,6 @@
   margin-bottom: 1em;
   border-radius: var(--d-border-radius-large);
 
-  &__search-menu {
-    .menu-panel-results .menu-panel.search-menu-panel {
-      position: unset;
-      padding: 0;
-    }
-  }
-
   &__wrap {
     box-sizing: border-box;
     position: relative;
@@ -133,19 +126,19 @@
     }
 
     .results {
+      @include float-down;
       box-sizing: border-box;
-      border: 1px solid var(--primary-low);
       border-radius: var(--d-border-radius);
       background: var(--secondary);
-      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
-      position: absolute;
       z-index: 9;
       margin-left: auto;
       margin-right: auto;
       left: 0;
       top: 100%;
+
       right: 0;
-      padding: 0.5em;
+
+      @include float-down;
 
       @include breakpoint(mobile-extra-large) {
         width: 100%;

app/assets/stylesheets/common/float-kit/d-menu.scss

@@ -1,13 +1,3 @@
-@keyframes d-menu-opening {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
 .fk-d-menu {
   width: max-content;
   position: absolute;
@@ -24,13 +14,14 @@
   }
 
   &.-animated {
-    animation: d-menu-opening 0.15s ease-in;
+    @include float-down;
 
     &[data-placement^="bottom"] {
       transform-origin: top center;
     }
 
     &[data-placement^="top"] {
+      @include float-up;
       transform-origin: bottom center;
     }
 

app/assets/stylesheets/common/foundation/mixins.scss

@@ -141,6 +141,14 @@ $hpad: 0.65em;
   border-radius: var(--d-border-radius);
 }
 
+@mixin float-down {
+  animation: float-down ease 0.25s 1 forwards;
+}
+
+@mixin float-up {
+  animation: float-up ease 0.25s 1 forwards;
+}
+
 @mixin default-focus() {
   border-color: var(--tertiary);
   outline: 2px solid var(--tertiary);

app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

@@ -13,10 +13,12 @@
         }
       }
 
-      .select-kit-body {
+      .select-kit-collection {
         border: 1px solid var(--primary-low);
         background-clip: padding-box;
         box-shadow: var(--shadow-dropdown);
+        padding: 0;
+        max-height: 100%;
       }
 
       .select-kit-row {
@@ -64,11 +66,6 @@
         }
       }
 
-      .select-kit-collection {
-        padding: 0;
-        max-height: 100%;
-      }
-
       .select-kit-header {
         display: inline-flex;
         align-items: center;

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -38,13 +38,37 @@
       align-items: center;
       justify-content: center;
       border-radius: 0;
-      border: 1px solid var(--primary-low);
-      box-shadow: var(--shadow-dropdown);
       background: var(--secondary);
       max-width: 600px;
     }
 
+    &:not(.mini-tag-chooser) {
+      .select-kit-body[data-popper-placement="bottom-start"]
+        .select-kit-collection,
+      .select-kit-body[data-popper-placement="bottom-end"]
+        .select-kit-collection,
+      .select-kit-body[data-popper-placement="bottom-start"] .select-kit-filter,
+      .select-kit-body[data-popper-placement="bottom-end"] .select-kit-filter {
+        @include float-down;
+      }
+
+      .select-kit-body[data-popper-placement="top-start"]
+        .select-kit-collection,
+      .select-kit-body[data-popper-placement="top-end"] .select-kit-collection,
+      .select-kit-body[data-popper-placement="top-start"] .select-kit-filter,
+      .select-kit-body[data-popper-placement="top-end"] .select-kit-filter {
+        @include float-up;
+      }
+    }
+
+    &:not(.composer-actions, .toolbar-popup-menu-options) .select-kit-filter {
+      border: 1px solid var(--primary-low);
+      border-bottom: none;
+    }
+
     .select-kit-collection {
+      border: 1px solid var(--primary-low);
+      border-top: none;
       box-sizing: border-box;
       width: 100%;
     }
@@ -195,6 +219,8 @@
     .selected-content {
       max-height: 300px;
       overflow-y: auto;
+      border-right: 1px solid var(--primary-low);
+      border-left: 1px solid var(--primary-low);
     }
 
     &[data-popper-reference-hidden] {

app/assets/stylesheets/desktop/menu-panel.scss

@@ -10,6 +10,10 @@
   }
 }
 
+.user-menu.revamped.menu-panel.drop-down {
+  @include float-down;
+}
+
 // Sidebar-hamburger hybrid
 .hamburger-panel .revamped {
   --d-sidebar-highlight-background: var(--d-hover);