docs: fix documation for core-library updates

Author: wuda-io

index.html

@@ -12,8 +12,8 @@
           <div class="gradient"></div>
         </div>
         <!-- Intro -->
-        <div class="intro" style="z-index: 1">
-          <div class="container">
+        <div class="intro py-5" style="z-index: 1">
+          <div class="container py-5">
             <!-- Hero -->
             <div class="center">
               <img id="logo" src="images/materialize.svg" style="height: 100px" alt="Materialize" />

packages/materialize

@@ -6,24 +6,21 @@
     <nav class="primary">
       <div class="nav-wrapper">
         <a class="sidenav-trigger" href="#" data-target="nav-mobile"><i class="material-icons">menu</i></a>
-
         <ul>
           <li>{{page.name}}</li>
         </ul>
-
         <ul class="right">
           <li>
             <a id="select-palette" class="modal-trigger" href="#palette-selector">
               <i class="material-icons">palette</i>
             </a>
           </li>
-
           <li>
             <a id="theme-switch" href="#"><i class="material-icons">dark_mode</i></a>
           </li>
           <li>
             <a class="ext-link" href="https://github.com/materializecss/materialize" target="_blank" title="Check out our GitHub"
-              ><img src="images/github.svg" style="transform: scale(0.8)"
+              ><img src="images/github.svg" style="height: 20px"
             /></a>
           </li>
           <li>

partials/navbar.html

@@ -58,10 +58,8 @@ <h3 class="header">Circular</h3>
                 <code class="language-markup">preloader-wrapper</code> div. The default size is medium, but you can add the classes <code class="language-markup">big</code> or
                 <code class="language-markup">small</code> to adjust the size accordingly. You can add the classes <code class="language-markup">spinner-red-only</code>,
                 <code class="language-markup">spinner-blue-only</code>, <code class="language-markup">spinner-yellow-only</code> and
-                <code class="language-markup">spinner-green-only</code>. You can also leave this class as just <code class="language-markup">spinner-layer</code> and it will be set
-                to the
-                <code class="language-css">$spinner-default-color</code>
-                variable in our variables.scss file.
+                <code class="language-markup">spinner-green-only</code>. You can also leave this class as just <code class="language-markup">spinner-layer</code> and it will be
+                set.
               </p>
 
               <h5>Colors</h5>

preloader.html

@@ -163,10 +163,14 @@ document.addEventListener("DOMContentLoaded", async function () {
     (document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
   }
 
-  /*
-  themes.applyThemeProperties();
-  const themeSwitch = document.querySelector("#theme-switch");
+  // Theme
+  const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const isDarkModeManual = localStorage.getItem("theme-mode") === "dark";
+  const isDarkMode = isDarkModeManual || isDarkModeByCss;
+  importCodeStyle(isDarkMode);
 
+  //themes.applyThemeProperties();
+  const themeSwitch = document.querySelector("#theme-switch");
   if (themeSwitch) {
     themeSwitch.addEventListener("click", (e) => {
       e.preventDefault();
@@ -175,15 +179,20 @@ document.addEventListener("DOMContentLoaded", async function () {
         themeSwitch.classList.add("is-dark");
         themeSwitch.querySelector("i").innerText = "light_mode";
         (themeSwitch as any).title = "Switch to light mode";
-        themes.setDarkMode();
+        document.documentElement.setAttribute("theme", "dark");
+        localStorage.setItem("theme", "dark");
+        //themes.setDarkMode();
       } else {
         themeSwitch.classList.remove("is-dark");
         themeSwitch.querySelector("i").innerText = "dark_mode";
         (themeSwitch as any).title = "Switch to dark mode";
-        themes.setLightMode();
+        //themes.setLightMode();
+        document.documentElement.setAttribute("theme", "light");
+        localStorage.setItem("theme", "light");
       }
     });
   }
+  /*
   const toggleColorsButton = <HTMLInputElement>document.getElementById("color-picker");
   const themePrimaryColor = themes.getThemePrimaryColor();
   if (toggleColorsButton && themePrimaryColor) {
@@ -194,7 +203,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   });
   */
 
-  // Copy Button
+  //------ Copy Button
+
   const copyBtn = Array.prototype.slice.call(document.querySelectorAll(".copyButton"));
   const copiedText = Array.prototype.slice.call(document.querySelectorAll(".copiedText"));
   const copyMsg = Array.prototype.slice.call(document.querySelectorAll(".copyMessage"));
@@ -208,13 +218,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
   });
 
-  // Theme
-  const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const isDarkModeManual = localStorage.getItem("theme-mode") === "dark";
-  const isDarkMode = isDarkModeManual || isDarkModeByCss;
-  importCodeStyle(isDarkMode);
+  //------ Code Highlighting
 
-  //---------- Code Highlighting
   document.querySelectorAll("pre code").forEach((el: HTMLElement) => {
     const xmp = el.querySelector("xmp");
     if (xmp) {
@@ -225,7 +230,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     hljs.highlightElement(el);
   });
 
-  // Materialize Components
+  //------  Materialize Components
 
   M.Carousel.init(document.querySelectorAll(".carousel"), {});
   M.Carousel.init(document.querySelectorAll(".carousel.carousel-slider"), {
@@ -251,7 +256,6 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   M.Parallax.init(document.querySelectorAll(".parallax"), {});
 
-  // Media
   M.Materialbox.init(document.querySelectorAll(".materialboxed"), {});
   M.Slider.init(document.querySelectorAll(".slider"), {});
 

src/main.ts

@@ -49,13 +49,23 @@ th {
   margin-top: 15px;
   padding-top: 30px;
 }
+*/
 
+//--- Sidnav
 header,
 main,
 footer {
   padding-left: 300px;
 }
+@media #{$medium-and-down} {
+  header,
+  main,
+  footer {
+    padding-left: 0;
+  }
+}
 
+/*
 .parallax-demo header,
 .parallax-demo main,
 .parallax-demo footer {
@@ -78,7 +88,7 @@ footer.example {
   }
 }
 
-// Index Page Styles
+//--- Index Page Styles
 
 #logo-container {
   margin: 0;
@@ -591,6 +601,8 @@ pre:has(code) {
   cursor: pointer;
 }
 
+*/
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -612,6 +624,7 @@ pre:has(code) {
   border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
 }
 
+/*
 .toc-wrapper {
   &.pin-bottom {
     margin-top: 84px;

src/style.scss

@@ -19,15 +19,21 @@
 
               <div>
                 <a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
-                <div id="tooltip-content" style="display: none">
+                <div id="tooltip-content" style="display: grid; align-content: center">
                   This is a tooltip with a
                   <a href="https://github.com/materializecss">link</a> and a
                   <i class="material-icons icon-demo">insert_chart</i>
                 </div>
-
-                <a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a tooltip"> Top</a>
-                <a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a tooltip"> Left</a>
-                <a href="#" class="btn tooltipped" data-position="right" data-tooltip="I am a tooltip"> Right</a>
+                <a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
+                <a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
+                <a
+                  href="#"
+                  class="btn tooltipped"
+                  data-position="right"
+                  data-tooltip="I am a right tooltip. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ducimus possimus quidem voluptatem soluta ex dignissimos, itaque magnam aspernatur eum deleniti delectus, vitae rerum, distinctio quam? Quas sapiente sunt blanditiis?"
+                >
+                  Right</a
+                >
               </div>
 
               <p>Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.</p>