Paragraphs styles for new dropbutton details format.

See backdrop-contrib/paragraphs#62
backdrop-contrib · Jul 12, 2024 · 91ce623 · 91ce623
1 parent cd4f013
commit 91ce623
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 7 deletions.
diff --git a/dist/css/components/paragraphs.css → dist/css/components/gin_paragraphs.css b/dist/css/components/paragraphs.css → dist/css/components/gin_paragraphs.css
@@ -293,15 +293,17 @@ 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;
   border-radius: var(--gin-border-xs);
   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
@@ -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
@@ -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 → styles/components/gin_paragraphs.scss b/styles/components/paragraphs.scss → 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
@@ -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'],