Paragraphs styles for new dropbutton details format.

See backdrop-contrib/paragraphs#62

Author: laryn

dist/css/components/paragraphs.css renamed to 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);
+}
+

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:

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(

styles/components/paragraphs.scss renamed to 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);
+        }
+      }
+    }
+  }
+}

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'],