Style details element.

backdrop-contrib · Apr 18, 2024 · 6585b82 · 6585b82
1 parent dfa9034
commit 6585b82
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 11 deletions.
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
@@ -749,11 +749,6 @@ body:not(.toolbar-tray-open) .layout-container {
   border-bottom: 1px solid var(--gin-border-color);
 }
 
-details summary {
-  padding: var(--gin-spacing-m);
-  background-color: rgba(230, 228, 223, .2);
-}
-
 .form--inline,
 [data-drupal-selector*=-bulk-form],
 .layout-region-node-footer__content {
@@ -4296,6 +4291,87 @@ hr {
   margin: var(--gin-spacing-xl) 0;
 }
 
+details {
+  border: 1px solid var(--gin-border-color);
+  border-radius: var(--gin-border-m);
+  box-shadow: none;
+  margin: 0 0 var(--gin-spacing-xs) 0;
+}
+
+details summary {
+  position: relative;
+  width: calc(100% - 2px - var(--gin-spacing-l) - var(--gin-spacing-xxl));
+  min-width: calc(100% - 2px - var(--gin-spacing-l) - var(--gin-spacing-xxl));
+  border-radius: var(--gin-border-m);
+  border-top: 1px solid var(--gin-border-color);
+  border-left: 1px solid var(--gin-border-color);
+  border-right: 1px solid var(--gin-border-color);
+}
+
+[dir="ltr"] details summary {
+  padding: var(--gin-spacing-m) var(--gin-spacing-l) var(--gin-spacing-m) var(--gin-spacing-xxl);
+}
+
+[dir="rtl"] details summary {
+  padding: var(--gin-spacing-m) var(--gin-spacing-xxl) var(--gin-spacing-m) var(--gin-spacing-l);
+}
+
+details summary:hover {
+  background: var(--gin-color-primary-light-hover);
+}
+
+details summary::marker {
+  display: none;
+  content: "";
+}
+
+details summary::before {
+  top: 50%;
+  background: var(--gin-color-text);
+  -webkit-mask-image: url("../../media/sprite.svg#handle-view");
+          mask-image: url("../../media/sprite.svg#handle-view");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+  -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+  display: inline-block;
+  width: var(--gin-spacing-m);
+  height: var(--gin-spacing-m);
+  margin-top: calc(var(--gin-spacing-m) / -2);
+  content: "";
+  position: absolute;
+  text-align: center;
+  transition: transform var(--gin-transition);
+}
+
+[dir="ltr"] details summary::before {
+  transform: rotate(90deg);
+  left: 1.125rem;
+}
+
+[dir="rtl"] details summary::before {
+  transform: rotate(-90deg);
+  right: 1.125rem;
+}
+
+details[open] summary {
+  border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
+}
+
+[dir="ltr"] details[open] summary::before {
+  transform: rotate(-90deg);
+}
+
+[dir="rtl"] details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+details .details-child-wrapper {
+  padding: var(--gin-spacing-m) var(--gin-spacing-l);
+}
+
 .admin-list {
   padding: var(--gin-spacing-s) 0;
 }

diff --git a/styles/base/_claro_improvements.scss b/styles/base/_claro_improvements.scss
@@ -1,9 +1,3 @@
-// Summary
-details summary {
-  padding: var(--gin-spacing-m);
-  background-color: rgba(#e6e4df, .2);
-}
-
 // Claro form--inline fixes
 .form--inline,
 [data-drupal-selector*="-bulk-form"],

diff --git a/styles/base/_elements.scss b/styles/base/_elements.scss
@@ -1,3 +1,62 @@
 hr {
   margin: var(--gin-spacing-xl) 0;
 }
+
+// Summary
+details {
+  border: 1px solid var(--gin-border-color);
+  border-radius: var(--gin-border-m);
+  box-shadow: none;
+  margin: 0 0 var(--gin-spacing-xs) 0;
+
+  summary {
+    padding: var(--gin-spacing-m) var(--gin-spacing-l) var(--gin-spacing-m) var(--gin-spacing-xxl);
+    position: relative;
+    width: calc(100% - 2px - var(--gin-spacing-l) - var(--gin-spacing-xxl));
+    min-width: calc(100% - 2px - var(--gin-spacing-l) - var(--gin-spacing-xxl));
+    border-radius: var(--gin-border-m);
+    border-top: 1px solid var(--gin-border-color);
+    border-left: 1px solid var(--gin-border-color);
+    border-right: 1px solid var(--gin-border-color);
+
+    &:hover {
+      background: var(--gin-color-primary-light-hover);
+    }
+
+    &::marker {
+      display: none;
+      content: "";
+    }
+
+    &::before {
+      transform: rotate(90deg);
+      left: 1.125rem;
+      top: 50%;
+      background: var(--gin-color-text);
+      mask-image: icon('handle');
+      mask-repeat: no-repeat;
+      mask-position: center center;
+      mask-size: 100% 100%;
+      display: inline-block;
+      width: var(--gin-spacing-m);
+      height: var(--gin-spacing-m);
+      margin-top: calc(var(--gin-spacing-m) / -2);
+      content: "";
+      position: absolute;
+      text-align: center;
+      transition: transform var(--gin-transition);
+    }
+  }
+
+  &[open] summary {
+    border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
+
+    &::before {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .details-child-wrapper {
+    padding: var(--gin-spacing-m) var(--gin-spacing-l);
+  }
+}