v1.9.0

htmlstreamofficial · Jun 10, 2023 · 7ed0f9d · 7ed0f9d
1 parent e009c0b
commit 7ed0f9d
Show file tree

Hide file tree

Showing 25 changed files with 4,807 additions and 231 deletions.
diff --git a/README.md b/README.md
@@ -49,25 +49,18 @@ For full documentation of the Preline options, visit <a href="https://preline.co
 
 ## Community
 
-For help, discussion about best practices, or any other conversation that would benefit from being searchable:
-
-<a href="https://github.com/htmlstreamofficial/preline/discussions">Discuss Preline UI on GitHub</a>
+For help, discussion about best practices, or any other conversation that would benefit from being searchable use [GitHub Discussions](https://github.com/htmlstreamofficial/preline/discussions)
 
 ## License
 
-Preline UI is Open Source project and licensed under MIT for better Web.
+Preline UI is Open Source project and licensed under [MIT](https://preline.co/docs/license.html).
 
-Learn more <a href="https://preline.co/docs/license.html">here</a>.
+Preline UI Figma is free for both commercial and personal projects, learn more [here](https://preline.co/license.html).
+
+All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Preline UI, nor vice versa.
 
 ## A product of Htmlstream
 
-Preline Ui is built by the team that has customers in the background such us Stanford University, The University of Maryland, University of Victoria and many more Governments, Corporate Agencies.
-
-Our soical network profiles:
+Preline UI is built and maintend by [Htmlstream](https://htmlstream.com) team. Over the last decade at Htmlstream, our journey has involved crafting UI Components and Templates. This process has allowed us to understand and explore a range of strategies for developing versatile UI designs that can adapt to a variety of needs.
 
-<ul>
-  <li><a href="https://twitter.com/Htmlstream">Twitter</a></li>
-  <li><a href="https://www.facebook.com/Htmlstream/">Facebook</a></li>
-  <li><a href="https://dribbble.com/Htmlstream">Dribbble</a></li>
-  <li><a href="https://www.instagram.com/htmlstream/">Instagram</a></li>
-</ul>
+Share about Preline on [Twitter](https://twitter.com/prelineUI) and keep an eye on [Dribbble](https://dribbble.com/Htmlstream) for teasers of our upcoming UIs.
diff --git a/dist/components/hs-tooltip/hs-tooltip.js b/dist/components/hs-tooltip/hs-tooltip.js
diff --git a/dist/preline.js b/dist/preline.js
diff --git a/examples/html/af-account.html b/examples/html/af-account.html
@@ -56,15 +56,15 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
 
         <form>
           <!-- Grid -->
-          <div class="grid grid-cols-12 gap-4 sm:gap-6">
-            <div class="col-span-3">
+          <div class="grid sm:grid-cols-12 gap-2 sm:gap-6">
+            <div class="sm:col-span-3">
               <label class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 Profile photo
               </label>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <div class="flex items-center gap-5">
                 <img class="inline-block h-16 w-16 rounded-full ring-2 ring-white dark:ring-gray-800" src="../../assets/img/160x160/img1.jpg" alt="Image Description">
                 <div class="flex gap-x-2">
@@ -82,7 +82,7 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <label for="af-account-full-name" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 Full name
               </label>
@@ -100,42 +100,42 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <div class="sm:flex">
                 <input id="af-account-full-name" type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Maria">
                 <input type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Boone">
               </div>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <label for="af-account-email" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 Email
               </label>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <input id="af-account-email" type="email" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm text-sm rounded-lg focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="[email protected]">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <label for="af-account-password" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 Password
               </label>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <div class="space-y-2">
                 <input id="af-account-password" type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Enter current password">
                 <input type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Enter new password">
               </div>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <div class="inline-block">
                 <label for="af-account-phone" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                   Phone
@@ -147,7 +147,7 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <div class="sm:flex">
                 <input id="af-account-phone" type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="+x(xxx)xxx-xx-xx">
                 <select class="py-2 px-3 pr-9 block w-full sm:w-auto border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
@@ -170,14 +170,14 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <label for="af-account-gender-checkbox" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 Gender
               </label>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <div class="sm:flex">
                 <label for="af-account-gender-checkbox" class="flex py-2 px-3 block w-full border border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
                   <input type="radio" name="af-account-gender-checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="af-account-gender-checkbox" checked>
@@ -197,14 +197,14 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">
             </div>
             <!-- End Col -->
 
-            <div class="col-span-3">
+            <div class="sm:col-span-3">
               <label for="af-account-bio" class="inline-block text-sm text-gray-800 mt-2.5 dark:text-gray-200">
                 BIO
               </label>
             </div>
             <!-- End Col -->
 
-            <div class="col-span-9">
+            <div class="sm:col-span-9">
               <textarea id="af-account-bio" class="py-2 px-3 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" rows="6" placeholder="Type your message..."></textarea>
             </div>
             <!-- End Col -->