Added details/summary styles.

Author: azaslonov

src/themes/designer/styles/forms.scss

@@ -27,7 +27,7 @@
     }
 
     &.form-group-collapsible {
-        &>.form-label {
+        & > .form-label {
             position: unset;
         }
 
@@ -118,7 +118,7 @@ textarea {
         }
 
         &.selected {
-            background-color:$dropdown-option-selected-color;
+            background-color: $dropdown-option-selected-color;
         }
     }
 }
@@ -238,4 +238,61 @@ hr {
     max-height: 450px;
     min-width: 150px;
     min-height: 150px;
-}
+}
+
+summary {
+    display: block;
+    cursor: pointer;
+    outline: 0;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+details {
+    display: block;
+    white-space: nowrap;
+    position: relative;
+    padding-left: 20px;
+    margin: 10px 0;
+
+    &[open]:before {
+        content: "";
+        left: 7px;
+        position: absolute;
+        top: 25px;
+        height: calc(100% - 25px);
+        border-left: 1px dotted #ccc;
+        width: 1px;
+    }
+
+    &[open] > summary:before {
+        left: -25px;
+        top: 1px;
+        @extend .paperbits-icon;
+        @extend .paperbits-circle-delete;
+        color: $collapse-button-color;
+    }
+
+    & > summary {
+        font-weight: bold;
+        margin-bottom: 10px;
+
+        &:before {
+            left: -25px;
+            top: 1px;
+            position: absolute;
+            @extend .paperbits-icon;
+            @extend .paperbits-circle-add;
+            color: $collapse-button-color;
+            display: inline-block;
+            width: 1.6rem;
+            text-align: center;
+        }
+
+        &:-webkit-details-marker {
+            display: none;
+        }
+    }
+}

src/themes/website/styles/reboot.scss

@@ -2,6 +2,7 @@
 ::after,
 ::before {
     box-sizing: border-box;
+    min-width: 0;
 }
 html {
     font-family: sans-serif;