From c1da457fb67a839c7430b772b69ddd47134cf65c Mon Sep 17 00:00:00 2001
From: DMOEdetc <dersim.martin.oezdag@gmail.com>
Date: Tue, 1 Mar 2022 12:28:58 +0100
Subject: [PATCH] added some animation to subitems and improved styling to
 better recognize subitems

---
 src/scss/klaro.scss | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/scss/klaro.scss b/src/scss/klaro.scss
index 0e312472..ffaa5408 100644
--- a/src/scss/klaro.scss
+++ b/src/scss/klaro.scss
@@ -2,7 +2,6 @@
 @import './vars';
 
 .klaro {
-
     $btn-margin-right: 0.5em;
 
     @include var(font-family, font-family);
@@ -11,7 +10,7 @@
     // buttons use their own font-family setting so we need to override it explicitly...
     button {
         @include var(font-family, font-family);
-        @include var(font-size, font-size);    
+        @include var(font-size, font-size);
     }
 
     &.cm-as-context-notice {
@@ -70,7 +69,6 @@
         }
 
         .cm-btn {
-
             @include var(color, button-text-color);
             @include var(background-color, dark2);
             @include var(border-radius, border-radius);
@@ -269,11 +267,23 @@
 
                             .cm-content {
                                 margin-left: -40px;
-                                display: none;
+                                display: block;
+                                overflow: hidden;
+                                max-height: 0;
+                                margin-top: 15px;
+                                margin-bottom: 15px;
+                                transition: max-height 0.5s ease-in-out,
+                                    margin-bottom 0.3s ease-in-out;
+
+                                .cm-switch {
+                                    transform: scale(0.8);
+                                }
 
                                 &.expanded {
-                                    margin-top: 10px;
-                                    display: block;
+                                    margin-bottom: 40px;
+                                    max-height: 9999px;
+                                    transition: max-height 0.1s ease-in-out,
+                                        margin-bottom 0.4s ease-in-out;
                                 }
                             }
                         }
@@ -301,7 +311,6 @@
                         }
 
                         &.cm-toggle-all {
-
                             @include var(border-top-width, border-width);
                             @include var(border-top-style, border-style);
                             @include var(border-top-color, dark2);