From 14df2e66d014d0db93dbaf6aa1dd74b326b15980 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 14 Aug 2024 11:07:49 +1000
Subject: [PATCH] Add stying for the unit pop out

---
 .../spree/admin/variants/_form.html.haml      |  2 +-
 app/webpacker/css/admin_v3/all.scss           |  1 +
 .../css/admin_v3/pages/edit_variant.scss      | 55 +++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/pages/edit_variant.scss

diff --git a/app/views/spree/admin/variants/_form.html.haml b/app/views/spree/admin/variants/_form.html.haml
index 7f73095cd97e..5cd9cf130d9c 100644
--- a/app/views/spree/admin/variants/_form.html.haml
+++ b/app/views/spree/admin/variants/_form.html.haml
@@ -1,4 +1,4 @@
-%div{'data-controller': "edit-variant"}
+%div{'data-controller': "edit-variant", id: "edit_variant"}
   .label-block.left.six.columns.alpha
     %script= render partial: "admin/shared/global_var_ofn", formats: :js,
       locals: { name: :available_units_sorted, value: WeightsAndMeasures.available_units_sorted }
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 7ee27d28ac73..8ec13635fbb3 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -94,6 +94,7 @@
 @import "../admin/dialog";
 @import "../admin/disabled";
 @import "components/dropdown"; // admin_v3
+@import "pages/edit_variant"; // admin_v3
 @import "pages/enterprise_index_panels"; // admin_v3
 @import "../admin/enterprises";
 @import "../admin/filters_and_controls";
diff --git a/app/webpacker/css/admin_v3/pages/edit_variant.scss b/app/webpacker/css/admin_v3/pages/edit_variant.scss
new file mode 100644
index 000000000000..694c72bd9325
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/edit_variant.scss
@@ -0,0 +1,55 @@
+@import "unit_popout";
+
+#edit_variant {
+
+  .popout {
+    @include unit_popout;
+
+    &__button {
+      // override popout button styles
+      &.popout__button {
+        // Reapplying button style from buttons.css
+        background-color: $color-btn-bg;
+        border: 1px solid $color-btn-bg;
+        color: $color-btn-text;
+        font-weight: bold;
+
+        &:before {
+          font-family: FontAwesome;
+          text-decoration: inherit;
+          display: inline-block;
+          speak: none;
+          content: "\f078";
+
+          position: absolute;
+          top: 0; // Required for empty buttons
+          right: $border-radius;
+          font-size: 0.67em;
+        }
+
+        // Reapplying button style from buttons.css
+        &:active,
+        &:focus {
+          outline: none;
+          border: 1px solid $color-btn-hover-border;
+        }
+
+        &:active:focus {
+          box-shadow: none;
+        }
+
+        &:hover {
+          background-color: $color-btn-hover-bg;
+          border: 1px solid $color-btn-hover-bg;
+          color: $color-btn-hover-text;
+        }
+      }
+    }
+
+    &__container {
+      width: max-content;
+      top: auto;
+      left: auto;
+    }
+  }
+}