Dropdown component improve & refactor

Author: zvizvi

dist/cssonly.css

@@ -1,7 +1,7 @@
 {
   "name": "cssonly",
   "description": "",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "dist/cssonly.css",
   "devDependencies": {
     "autoprefixer": "^9.8.6",

package-lock.json

@@ -27,11 +27,59 @@
     <br />
     <br />
     <div>
-      <details class="cssonly-dropdown">
+      <details class="cssonly-dropdown cssonly-dropdown-right">
+        <summary>
+          Open Dropdown
+        </summary>
+        <ul class="cssonly-dropdown-menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </details>
+    </div>
+    <br />
+    <br />
+    <div>
+      <details class="cssonly-dropdown cssonly-dropdown-dropup">
+        <summary>
+          Open Dropdown
+        </summary>
+        <ul class="cssonly-dropdown-menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </details>
+    </div>
+    <br />
+    <br />
+    <div>
+      <div class="cssonly-dropdown cssonly-dropdown-dropup cssonly-dropdown-onhover">
         <summary>
           Open Dropdown
         </summary>
-        <ul class="cssonly-dropdown-menu dropdown-menu-right">
+        <ul class="cssonly-dropdown-menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div>
+    </div>
+    <br />
+    <br />
+    <div>
+      <details class="cssonly-dropdown no-close">
+        <summary>
+          Open Dropdown
+        </summary>
+        <ul class="cssonly-dropdown-menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>

package.json

@@ -1,4 +1,8 @@
 .cssonly-dropdown {
+  --background-color: #fff;
+  --color: #333;
+  --hover-color: #262626;
+  --hover-background-color: #f5f5f5;
   display: inline-block;
   position: relative;
 
@@ -11,14 +15,11 @@
     white-space: nowrap;
     -ms-touch-action: manipulation;
     touch-action: manipulation;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     cursor: pointer;
 
-    &::-webkit-details-marker {
-      display: none;
+    &::marker {
+      content: "";
     }
   }
 
@@ -35,57 +36,60 @@
     font-size: 14px;
     text-align: left;
     list-style: none;
-    background-color: #fff;
-    -webkit-background-clip: padding-box;
+    background-color: var(--background-color);
     background-clip: padding-box;
-    border: 1px solid #ccc;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
 
-    &.dropdown-menu-right {
-      right: 0;
-      left: auto;
-    }
-
-    &.dropdown-menu-left {
-      right: auto;
-      left: 0;
-    }
-
     > li > a {
       display: block;
       text-decoration: none;
       padding: 3px 20px;
       clear: both;
       font-weight: 400;
       line-height: 1.42857143;
-      color: #333;
+      color: var(--color);
       white-space: nowrap;
 
       &:focus,
       &:hover {
-        color: #262626;
+        color: var(--hover-color);
         text-decoration: none;
-        background-color: #f5f5f5;
+        background-color: var(--hover-background-color);
       }
     }
 
     .divider {
       height: 1px;
       margin: 4px 0;
       overflow: hidden;
-      background-color: #e5e5e5;
+      background-color: rgba(0, 0, 0, 0.15);
     }
   }
 
+  &.cssonly-dropdown-right .cssonly-dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+
+  &.cssonly-dropdown-left .cssonly-dropdown-menu {
+    right: auto;
+    left: 0;
+  }
+
+  &.cssonly-dropdown-dropup .cssonly-dropdown-menu {
+    top: unset;
+    bottom: 100%;
+    margin: 0 0 2px;
+  }
+
   &[open] {
     .cssonly-dropdown-menu {
       display: block;
     }
 
-    > summary::before {
+    &:not(.no-close) > summary::before {
       position: fixed;
       top: 0;
       right: 0;
@@ -98,4 +102,25 @@
       background: transparent;
     }
   }
+
+  &.cssonly-dropdown-onhover:hover {
+    .cssonly-dropdown-menu {
+      display: block !important;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      right: 0;
+      left: 0;
+      top: 100%;
+      height: 2px;
+    }
+
+    &.cssonly-dropdown-dropup::after {
+      top: unset;
+      bottom: 100%;
+    }
+  }
 }

src/dropdown/index.html

@@ -38,6 +38,7 @@
     max-width: 700px;
     margin: 1.75rem auto;
     width: 96%;
+    text-align: start;
     pointer-events: auto;
     background-color: #fff;
     background-clip: padding-box;

src/dropdown/style.scss

@@ -29,7 +29,7 @@
     transition: color var(--transition-time);
 
     &:first-of-type::after {
-      content: '';
+      content: "";
       position: absolute;
       height: 1px;
       left: 0;
@@ -40,7 +40,7 @@
     }
 
     &:last-of-type::after {
-      content: '';
+      content: "";
       position: absolute;
       height: 2px;
       left: 0;

src/modal/style.scss

@@ -9,9 +9,6 @@
     transform: translate(-50%, -12px);
     z-index: 1000;
     pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     opacity: 0;
     transition: opacity 0.35s ease 0.25s;