(snippets): Add new pills functionality and dark mode (#1262)

mdbootstrap · Jan 19, 2023 · f733f32 · f733f32
1 parent f574b22
commit f733f32
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 40 deletions.
diff --git a/site/assets/css/style.css b/site/assets/css/style.css
@@ -1147,14 +1147,14 @@ html.dark {
   margin-right: 0.25rem;
 }
 
-.mb-12 {
-  margin-bottom: 3rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .-mr-\[100\%\] {
   margin-right: -100%;
 }
@@ -1529,6 +1529,10 @@ html.dark {
   height: 20px;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .max-h-\[calc\(100\%-64px\)\] {
   max-height: calc(100% - 64px);
 }
@@ -2855,6 +2859,10 @@ html.dark {
   align-self: stretch;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -3350,6 +3358,11 @@ html.dark {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#F7F7F7\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -3524,15 +3537,15 @@ html.dark {
   background-color: rgb(251 251 251 / var(--tw-bg-opacity));
 }
 
-.bg-\[\#f3f4f680\] {
-  background-color: #f3f4f680;
-}
-
 .bg-zinc-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(212 212 216 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#f3f4f680\] {
+  background-color: #f3f4f680;
+}
+
 .bg-\[radial-gradient\(circle\2c _rgba\(0\2c 0\2c 0\2c 0\.2\)_0\%\2c _rgba\(0\2c 0\2c 0\2c 0\.3\)_40\%\2c _rgba\(0\2c 0\2c 0\2c 0\.4\)_50\%\2c _rgba\(0\2c 0\2c 0\2c 0\.5\)_60\%\2c _transparent_70\%\)\] {
   background-image: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.5) 60%, transparent 70%);
 }
@@ -4276,6 +4289,10 @@ html.dark {
   line-height: 2.15;
 }
 
+.leading-\[3rem\] {
+  line-height: 3rem;
+}
+
 .leading-\[1\.3rem\] {
   line-height: 1.3rem;
 }
@@ -4328,9 +4345,9 @@ html.dark {
   color: rgb(33 37 41 / var(--tw-text-opacity));
 }
 
-.text-\[\#1266f1\] {
-  --tw-text-opacity: 1;
-  color: rgb(18 102 241 / var(--tw-text-opacity));
+.\!text-\[\#1266f1\] {
+  --tw-text-opacity: 1 !important;
+  color: rgb(18 102 241 / var(--tw-text-opacity)) !important;
 }
 
 .text-white {
@@ -4401,6 +4418,10 @@ html.dark {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.text-\[\#0000008c\] {
+  color: #0000008c;
+}
+
 .text-purple-800 {
   --tw-text-opacity: 1;
   color: rgb(107 33 168 / var(--tw-text-opacity));
@@ -4534,11 +4555,6 @@ html.dark {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.\!text-\[\#1266f1\] {
-  --tw-text-opacity: 1 !important;
-  color: rgb(18 102 241 / var(--tw-text-opacity)) !important;
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -6607,6 +6623,11 @@ h1 {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity)) !important;
 }
 
+.data-\[te-nav-active\]\:bg-\[\#E3EBF7\][data-te-nav-active] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 235 247 / var(--tw-bg-opacity));
+}
+
 .data-\[te-nav-active\]\:bg-\[\#2563eb\][data-te-nav-active] {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -6622,6 +6643,11 @@ h1 {
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
+.data-\[te-nav-active\]\:text-\[\#285192\][data-te-nav-active] {
+  --tw-text-opacity: 1;
+  color: rgb(40 81 146 / var(--tw-text-opacity));
+}
+
 .data-\[te-nav-active\]\:text-\[\#2563eb\][data-te-nav-active] {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -6850,11 +6876,6 @@ h1 {
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-blue-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
-}
-
 .dark .dark\:border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -7134,11 +7155,6 @@ h1 {
   background-color: rgb(255 255 255 / 0.1);
 }
 
-.dark .dark\:hover\:bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-gray-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -7177,11 +7193,6 @@ h1 {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-zinc-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 113 122 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:hover\:bg-opacity-10:hover {
   --tw-bg-opacity: 0.1;
 }
@@ -7385,6 +7396,16 @@ h1 {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.dark .dark\:data-\[te-nav-active\]\:bg-\[\#E3EBF7\][data-te-nav-active] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 235 247 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:data-\[te-nav-active\]\:text-\[\#285192\][data-te-nav-active] {
+  --tw-text-opacity: 1;
+  color: rgb(40 81 146 / var(--tw-text-opacity));
+}
+
 @media (min-width: 0px) {
   .min-\[0px\]\:m-0 {
     margin: 0px;

diff --git a/site/layouts/shortcodes/twsnippet/code.html b/site/layouts/shortcodes/twsnippet/code.html
@@ -5,7 +5,8 @@
 
 
 <div
-  class="tab-pane fade {{ if eq (.Get `active`) true }}active show{{ end }}"
+  class="hidden opacity-0 {{ if eq (.Get `active`) true }}opacity-100{{ end }} transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
+  {{ if eq (.Get `active`) true }}data-te-tab-active{{ end }}
   id="mdb_{{ $hash }}"
   role="tabpanel">
   <pre

diff --git a/site/layouts/shortcodes/twsnippet/wrapper.html b/site/layouts/shortcodes/twsnippet/wrapper.html
@@ -9,23 +9,25 @@
   <div class="docs-pills">
     <div
       class="
-        d-flex
-        justify-content-between
+        flex
+        justify-between
         py-2
         rounded-t-lg
         border-t border-l border-r border-gray-200 dark:border-gray-600
       "
       style="padding-left: 0.6rem"
     >
-      <ul class="nav nav-pills p-2">
+      <ul class="flex list-none flex-col flex-wrap pl-0 md:flex-row p-2 mb-2 ml-2" data-te-nav-ref>
         {{ $tabcolor := .Get 1 }}
         {{ range $i, $tabname := (split (.Get 0) ",") }} {{/* Get the i-th hash
         generated by the i-th `code` child-shortcode */}} {{ $hash := index
         $hashes $i }}
-        <li class="nav-item">
+        <li>
           <a
-            class="text-blue-500 bg-transparent border border-solid border-blue-500 hover:bg-blue-500 dark:text-blue-300 dark:border-blue-300 dark:hover:bg-blue-300 hover:text-white active:bg-blue-600 font-bold uppercase text-sm px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 {{ if eq $i 0 }} active show {{end}}"
-            data-bs-toggle="pill"
+            class="my-2 rounded bg-[#F7F7F7] px-6 py-3 text-xs font-medium uppercase leading-tight text-[#0000008c] shadow-none focus:outline-none focus:ring-0 data-[te-nav-active]:bg-[#E3EBF7] data-[te-nav-active]:text-[#285192] data-[te-nav-active]:shadow-[0_4px_6px_-1px_#0000001a,0_2px_4px_-1px_#0000000f] dark:bg-gray-600 dark:text-white dark:data-[te-nav-active]:bg-[#E3EBF7] dark:data-[te-nav-active]:text-[#285192] md:mr-2 mb-3"
+            data-te-toggle="pill"
+            data-te-target="#mdb_{{ $hash }}"
+            {{ if eq $i 0 }} data-te-nav-active {{end}}
             style="{{ if $tabcolor }} background-color: {{ $tabcolor }} !important; border-color: {{ $tabcolor }} !important {{end}}"
             href="#mdb_{{ $hash }}"
             role="tab"

diff --git a/site/static/js/index.min.js b/site/static/js/index.min.js
diff --git a/site/static/js/index.min.js.map b/site/static/js/index.min.js.map