From 91ce623440fe019fd87124b902ce0741071928b0 Mon Sep 17 00:00:00 2001
From: laryn <laryn@kragtbakker.com>
Date: Fri, 12 Jul 2024 13:08:00 -0500
Subject: [PATCH] Paragraphs styles for new dropbutton details format. See
 https://github.com/backdrop-contrib/paragraphs/issues/62

---
 .../{paragraphs.css => gin_paragraphs.css}    | 42 ++++++++++++++++-
 gin.libraries.yml                             |  2 +-
 includes/libraries.php                        |  2 +-
 .../{paragraphs.scss => gin_paragraphs.scss}  | 46 ++++++++++++++++++-
 webpack.config.js                             |  2 +-
 5 files changed, 87 insertions(+), 7 deletions(-)
 rename dist/css/components/{paragraphs.css => gin_paragraphs.css} (91%)
 rename styles/components/{paragraphs.scss => gin_paragraphs.scss} (89%)

diff --git a/dist/css/components/paragraphs.css b/dist/css/components/gin_paragraphs.css
similarity index 91%
rename from dist/css/components/paragraphs.css
rename to dist/css/components/gin_paragraphs.css
index f82721ae..b1326cde 100644
--- a/dist/css/components/paragraphs.css
+++ b/dist/css/components/gin_paragraphs.css
@@ -293,7 +293,8 @@ html[dir="rtl"].js .field--widget-paragraphs th .paragraphs-actions .paragraphs-
   left: var(--gin-spacing-xxs);
 }
 
-.paragraphs-dropdown-actions {
+.paragraphs-dropdown-actions,
+.paragraphs-actions-more .details-child-wrapper {
   color: var(--gin-color-button-text);
   background: var(--gin-bg-layer3);
   border: 0 none;
@@ -301,7 +302,8 @@ html[dir="rtl"].js .field--widget-paragraphs th .paragraphs-actions .paragraphs-
   box-shadow: var(--gin-shadow-l2);
 }
 
-.paragraphs-dropdown-actions .paragraphs-dropdown-action.button {
+.paragraphs-dropdown-actions > .button,
+.paragraphs-actions-more .details-child-wrapper > .button {
   font-size: var(--gin-font-size-xs);
   padding: var(--gin-spacing-xs) var(--gin-spacing-m);
   margin: 0;
@@ -498,3 +500,39 @@ html[dir="rtl"].js .paragraph-type-icon {
   border-color: var(--gin-color-danger);
 }
 
+.field-widget-paragraphs-embed input.paragraphs-edit-button {
+  margin: var(--gin-spacing-xxxs);
+  padding: var(--gin-spacing-xxxs) var(--gin-spacing-xs);
+}
+
+.inner-actions details.paragraphs-actions-more summary {
+  padding: var(--gin-spacing-s) var(--gin-spacing-m);
+  min-width: auto;
+  width: auto;
+}
+
+.inner-actions details.paragraphs-actions-more summary::before {
+  display: none;
+}
+
+.inner-actions details.paragraphs-actions-more .details-child-wrapper {
+  padding: var(--gin-spacing-xxs);
+  box-shadow: 0 6px 16px var(--gin-border-color-layer);
+  border: 1px solid var(--gin-border-color);
+}
+
+.inner-actions details.paragraphs-actions-more .details-child-wrapper input:first-child,
+.inner-actions details.paragraphs-actions-more .details-child-wrapper input:last-child {
+  margin: 0;
+}
+
+.inner-actions details.paragraphs-actions-more .details-child-wrapper .button-danger {
+  background-color: transparent;
+  color: var(--gin-color-danger);
+}
+
+.inner-actions details.paragraphs-actions-more .details-child-wrapper .button-danger:hover, .inner-actions details.paragraphs-actions-more .details-child-wrapper .button-danger:focus {
+  background-color: var(--gin-color-danger-light);
+  color: var(--gin-color-text);
+}
+
diff --git a/gin.libraries.yml b/gin.libraries.yml
index 7464ca9a..936f436a 100644
--- a/gin.libraries.yml
+++ b/gin.libraries.yml
@@ -361,7 +361,7 @@ maintenance_page:
 paragraphs:
   css:
     component:
-      dist/css/components/paragraphs.css: { minified: false }
+      dist/css/components/gin_paragraphs.css: { minified: false }
 
 layout_paragraphs:
   css:
diff --git a/includes/libraries.php b/includes/libraries.php
index 4590a298..a130e7d7 100644
--- a/includes/libraries.php
+++ b/includes/libraries.php
@@ -290,7 +290,7 @@ function gin_library_info() {
       'title' => 'Paragraphs',
       'version' => BACKDROP_VERSION,
       'css' => array(
-        $basethemeurl . '/dist/css/components/paragraphs.css' => array(),
+        $basethemeurl . '/dist/css/components/gin_paragraphs.css' => array(),
       ),
     ),
     'gin_webform' => array(
diff --git a/styles/components/paragraphs.scss b/styles/components/gin_paragraphs.scss
similarity index 89%
rename from styles/components/paragraphs.scss
rename to styles/components/gin_paragraphs.scss
index 2cc1f316..317800f6 100644
--- a/styles/components/paragraphs.scss
+++ b/styles/components/gin_paragraphs.scss
@@ -118,6 +118,7 @@
 }
 
 .paragraphs-subform {
+
   .form-item,
   .field--type-text-with-summary .form-item,
   .field--widget-text-textarea .form-item {
@@ -234,14 +235,15 @@ html.js .field--widget-paragraphs th .paragraphs-actions .paragraphs-dropdown {
   right: var(--gin-spacing-xxs);
 }
 
-.paragraphs-dropdown-actions {
+.paragraphs-dropdown-actions,
+.paragraphs-actions-more .details-child-wrapper {
   color: var(--gin-color-button-text);
   background: var(--gin-bg-layer3);
   border: 0 none;
   border-radius: var(--gin-border-xs);
   box-shadow: var(--gin-shadow-l2);
 
-  .paragraphs-dropdown-action.button {
+  > .button {
     font-size: var(--gin-font-size-xs);
     padding: var(--gin-spacing-xs) var(--gin-spacing-m);
     margin: 0;
@@ -418,3 +420,43 @@ html.js .paragraph-type-icon {
     border-color: var(--gin-color-danger);
   }
 }
+
+.field-widget-paragraphs-embed input.paragraphs-edit-button {
+  margin: var(--gin-spacing-xxxs);
+  padding: var(--gin-spacing-xxxs) var(--gin-spacing-xs);
+}
+
+.inner-actions {
+  details.paragraphs-actions-more {
+    summary {
+      padding: var(--gin-spacing-s) var(--gin-spacing-m);
+      min-width: auto;
+      width: auto;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .details-child-wrapper {
+      padding: var(--gin-spacing-xxs);
+      box-shadow: 0 6px 16px var(--gin-border-color-layer);
+      border: 1px solid var(--gin-border-color);
+
+      input:first-child,
+      input:last-child {
+        margin: 0;
+      }
+
+      .button-danger {
+        background-color: transparent;
+        color: var(--gin-color-danger);
+        &:hover,
+        &:focus {
+          background-color: var(--gin-color-danger-light);
+          color: var(--gin-color-text);
+        }
+      }
+    }
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
index a55cc517..0f83a16f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,7 +46,7 @@ module.exports = {
     'components/more_actions': ['./styles/components/more_actions.scss'],
     'components/edit_form': ['./styles/components/edit_form.scss'],
     'components/inline_entity_form': ['./styles/components/inline_entity_form.scss'],
-    'components/paragraphs': ['./styles/components/paragraphs.scss'],
+    'components/gin_paragraphs': ['./styles/components/gin_paragraphs.scss'],
     'components/project_installer': ['./styles/components/project_installer.scss'],
     'components/maintenance_page': ['./styles/components/maintenance_page.scss'],
     'components/module_filter': ['./styles/components/module_filter.scss'],