css for details-element

robotframework · Sep 27, 2024 · 0435ee7 · 0435ee7
1 parent b107870
commit 0435ee7
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 9 deletions.
diff --git a/docs/assets/index-CcbfNexT.css → docs/assets/index-BVMRb0fQ.css b/docs/assets/index-CcbfNexT.css → docs/assets/index-BVMRb0fQ.css
diff --git a/docs/assets/index-DT41E5kk.js → docs/assets/index-C58rxdEB.js b/docs/assets/index-DT41E5kk.js → docs/assets/index-C58rxdEB.js
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RoboCon - Robot Framework Conference</title>
     <script defer src="/spa.js"></script>
-    <script type="module" crossorigin src="/assets/index-DT41E5kk.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CcbfNexT.css">
+    <script type="module" crossorigin src="/assets/index-C58rxdEB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BVMRb0fQ.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/css/elements.css b/src/assets/css/elements.css
@@ -18,8 +18,54 @@
 .card {
   border: solid 2px #24282c;
   box-shadow: 0 2px 3px #020d6799;
-  background-color: #fff;
-  border-radius: 2px;
+  border-radius: 4px;
+}
+
+details {
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 3px #020d6755;
+
+  summary {
+    display: flex;
+    list-style-position: outside;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--color-grey-darkest);
+    border-radius: 4px;
+    cursor: pointer;
+    border: solid 2px #00000022;
+  }
+
+  summary::-webkit-details-marker {
+    display: none;
+  }
+  summary::before {
+    content: "";
+    margin-left: 0;
+    margin-right: 0.5rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: #00c0b5;
+    border-radius: 0.5rem;
+    transition: background-color 0.1s;
+  }
+
+  &[open] summary::before {
+    background-color: #ffcb5b;
+  }
+
+  &[open] summary {
+    border-radius: 4px 4px 0 0;
+    border-bottom-style: none;
+  }
+
+  div {
+    padding: 0.25rem 1rem;
+    border: solid 2px #00000022;
+    border-top: none;
+  }
 }
 
 .rounded {

diff --git a/src/assets/css/text.css b/src/assets/css/text.css
@@ -155,7 +155,7 @@ p {
 }
 
 ul {
-  padding-left: 1rem;
+  padding-left: 0;
   list-style-position: outside;
   margin-block-end: 0;
 }

diff --git a/src/views/ContentPage.vue b/src/views/ContentPage.vue
@@ -19,10 +19,8 @@ import { renderNodes, renderMarks } from 'Content/renderContent';
 
 const store = useStore()
 const route = useRoute()
-console.log(route.path, route)
 
 const page = store.pages.find((page) => page.fields.slug as unknown as string === route.path)
-console.log(page)
 
 </script>