From b5755fa316f50381ce300ca92fba074ea2e22b22 Mon Sep 17 00:00:00 2001
From: George Katsikas <giorgakis.katsikas@gmail.com>
Date: Fri, 29 Sep 2023 13:28:30 +0200
Subject: [PATCH] fix details nested triangle and add transition
---
.../scipost/assets/config/preconfig.scss | 67 ++++++++++---------
1 file changed, 36 insertions(+), 31 deletions(-)
diff --git a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
index e024a3d28..ed517ef68 100644
--- a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
@@ -223,39 +223,44 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
height: 1.5em !important;
}
-summary {
- // Remove triangle for webkit browsers causing problems with flexbox
- &::-webkit-details-marker {
- display: none;
- }
-
- // Remove all list styles
- &.list-none {
- list-style: none;
- }
-
- // List triangle for summary element (necessary with display: flex)
- &.list-triangle {
- position: relative;
- padding-left: 2em !important;
-
- // Styling the equilateral triangle
- &::before {
- content: "â–¶";
- position: absolute;
- left: 0.75em;
- top: 50%;
- transform: translateY(-50%);
+details {
+ summary {
+ // Remove triangle for webkit browsers causing problems with flexbox
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ // Remove all list styles
+ &.list-none {
+ list-style: none;
+ }
+
+ // // List triangle for summary element (necessary with display: flex)
+ &.list-triangle {
+ position: relative;
+ padding-left: 2em !important;
+
+ // Styling the equilateral triangle
+ &::before {
+ content: "â–¶";
+ position: absolute;
+ left: 0.75em;
+ top: 50%;
+ transform: translateY(-50%);
+ transition: transform 0.05s linear;
+ }
+
+ @at-root {
+ // Rotate the equilateral triangle when summary is open
+ details[open] > summary.list-triangle::before {
+ content: "â–¶";
+ transform: translateY(-50%) translateX(-25%) rotate(90deg);
+ }
+ }
+ }
}
- }
}
-// Rotate the equilateral triangle when summary is open
-details[open] > summary.list-triangle::before {
- content: "â–¼";
-}
-
-
// Utilities for details element
// Hide details preview when open
details[open] {
@@ -263,7 +268,7 @@ details[open] {
display: none;
}
}
-details[closed] {
+details:not([open]) {
.details-preview {
display: unset;
}
--
GitLab