style: improve style

rezozero · Feb 21, 2024 · 0153e0b · 0153e0b
1 parent f5f43bb
commit 0153e0b
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 8 deletions.
diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
@@ -0,0 +1,82 @@
+/***
+    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" and "symbol" part is to solve Firefox SVG sprite bug
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio, symbol, svg *, symbol *, table, th, del, em)) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+    list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-width: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+    user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    appearance: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
+:where([contenteditable]:not([contenteditable="false"])) {
+    -webkit-line-break: after-white-space;
+    overflow-wrap: break-word;
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
     devtools: { enabled: true },
     modules: ['../src/module'],
+    css: ['~/assets/css/main.css'],
 })
diff --git a/src/runtime/components/StoriesNavItem.vue b/src/runtime/components/StoriesNavItem.vue
@@ -70,10 +70,10 @@ watch(isOpen, () => {
     <NuxtLink v-if="isLink" ref="link" :to="item.to" :class="$style.link">
         {{ item.label }}
     </NuxtLink>
-    <div v-else ref="folder" :class="[$style.folder, hasActiveParentRoute && $style['folder--active']]">
+    <div v-else ref="folder" :class="[$style.folder, isOpen && $style['folder--active']]">
         <button :class="$style.button" @click="isOpen = !isOpen">
             <span>{{ label }}</span>
-            <span :class="$style.icon">{{ isOpen ? '−' : '+' }}</span>
+            <span :class="$style.icon"></span>
         </button>
         <ul v-if="isOpen">
             <li v-for="(childItem, key) in item" :key="key">
@@ -97,25 +97,55 @@ watch(isOpen, () => {
 }
 
 .button {
+    display: flex;
+    align-items: center;
     margin-block: 0.8rem 0.5rem;
+    padding: 0.15rem 0.3rem;
     white-space: nowrap;
     background-color: transparent;
     border: none;
-
-    .folder--active & {
-        font-weight: bold;
-    }
 }
 
 .icon {
+    position: relative;
     display: inline-flex;
-    width: 1rem;
-    height: 1rem;
+    width: 1.2rem;
+    height: 1.2rem;
     align-items: center;
     justify-content: center;
     margin-left: 0.5rem;
     border-radius: 100%;
     background-color: #e4e4e4;
+    font-size: 0.8rem;
+
+    &::before,
+    &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        background-color: currentColor;
+        content: '';
+        flex-shrink: 0;
+    }
+
+    &::before {
+        width: 8px;
+        height: 2px;
+        margin-top: -1px;
+        margin-left: -4px;
+    }
+
+    &::after {
+        width: 2px;
+        height: 8px;
+        margin-top: -4px;
+        margin-left: -1px;
+    }
+
+    .folder--active &::after {
+        display: none;
+    }
 }
 
 .folder ul {