demo: add styling to picker list checkboxes

6pac · Nov 16, 2024 · a010e54 · a010e54
1 parent a14ed8f
commit a010e54
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/dist/styles/css/example-demo.css b/dist/styles/css/example-demo.css
diff --git a/examples/example-trading-esm.html b/examples/example-trading-esm.html
@@ -65,6 +65,47 @@
     .slick-header-menubutton span {
       margin-top: 40%;
     }
+
+    /** you could optionally style the grid menu column picker list with slickgrid icons (.sgi) */
+    .slick-gridmenu-list li,
+    .slick-columnpicker-list li {
+      cursor: pointer;
+      margin: 4px;
+    }
+    .slick-gridmenu-list label,
+    .slick-columnpicker-list label {
+      padding: 1px;
+      display: inline-flex;
+      cursor: pointer;
+    }
+
+    .slick-gridmenu-list input[type=checkbox],
+    .slick-columnpicker-list input[type=checkbox] {
+      display:none; /* to hide the checkbox itself */
+    }
+    .slick-gridmenu-list input[type=checkbox] + label:before,
+    .slick-columnpicker-list input[type=checkbox] + label:before {
+      cursor: pointer;
+      display: inline-block;
+      margin-right: 4px;
+      height: 16px;
+      width: 16px;
+      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23181d1f" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/></svg>');
+    }
+    .slick-gridmenu-list input[type=checkbox] + label:before,
+    .slick-columnpicker-list input[type=checkbox] + label:before {
+      opacity: 0.2; /* unchecked icon */
+    }
+    .slick-gridmenu-list input[type=checkbox]:checked + label:before,
+    .slick-columnpicker-list input[type=checkbox]:checked + label:before {
+      opacity: 1; /* checked icon */
+    }
+    .slick-gridmenu.slick-submenu {
+      background-color: #fbfbfb;
+      /* border-width: 2px; */
+      box-shadow: 0 2px 4px 2px rgba(138, 175, 177, 0.293);
+      /* min-width: 150px; */
+    }
   </style>
 </head>
 <body>

diff --git a/examples/examples.css b/examples/examples.css
@@ -6,7 +6,7 @@
 }
 
 body {
-  background: #fafafa;
+  background: #fff;
   padding: 0;
   margin: 8px;
 }

diff --git a/src/styles/example-demo.scss b/src/styles/example-demo.scss
@@ -5,7 +5,7 @@
 $alpine-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;
 
 body {
-  background: #fafafa;
+  background: #fff;
   padding: 0;
   margin: 8px;
   font-family: var(--alpine-font-family, $alpine-font-family);