Skip to content

Commit 5cfa455

Browse files
committed
docs: fix documation for core-library updates
1 parent 0accd10 commit 5cfa455

7 files changed

Lines changed: 49 additions & 31 deletions

File tree

index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<div class="gradient"></div>
1313
</div>
1414
<!-- Intro -->
15-
<div class="intro" style="z-index: 1">
16-
<div class="container">
15+
<div class="intro py-5" style="z-index: 1">
16+
<div class="container py-5">
1717
<!-- Hero -->
1818
<div class="center">
1919
<img id="logo" src="images/materialize.svg" style="height: 100px" alt="Materialize" />

partials/navbar.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,21 @@
66
<nav class="primary">
77
<div class="nav-wrapper">
88
<a class="sidenav-trigger" href="#" data-target="nav-mobile"><i class="material-icons">menu</i></a>
9-
109
<ul>
1110
<li>{{page.name}}</li>
1211
</ul>
13-
1412
<ul class="right">
1513
<li>
1614
<a id="select-palette" class="modal-trigger" href="#palette-selector">
1715
<i class="material-icons">palette</i>
1816
</a>
1917
</li>
20-
2118
<li>
2219
<a id="theme-switch" href="#"><i class="material-icons">dark_mode</i></a>
2320
</li>
2421
<li>
2522
<a class="ext-link" href="https://github.com/materializecss/materialize" target="_blank" title="Check out our GitHub"
26-
><img src="images/github.svg" style="transform: scale(0.8)"
23+
><img src="images/github.svg" style="height: 20px"
2724
/></a>
2825
</li>
2926
<li>

preloader.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,8 @@ <h3 class="header">Circular</h3>
5858
<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
5959
<code class="language-markup">small</code> to adjust the size accordingly. You can add the classes <code class="language-markup">spinner-red-only</code>,
6060
<code class="language-markup">spinner-blue-only</code>, <code class="language-markup">spinner-yellow-only</code> and
61-
<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
62-
to the
63-
<code class="language-css">$spinner-default-color</code>
64-
variable in our variables.scss file.
61+
<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
62+
set.
6563
</p>
6664

6765
<h5>Colors</h5>

src/main.ts

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,14 @@ document.addEventListener("DOMContentLoaded", async function () {
163163
(document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
164164
}
165165

166-
/*
167-
themes.applyThemeProperties();
168-
const themeSwitch = document.querySelector("#theme-switch");
166+
// Theme
167+
const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
168+
const isDarkModeManual = localStorage.getItem("theme-mode") === "dark";
169+
const isDarkMode = isDarkModeManual || isDarkModeByCss;
170+
importCodeStyle(isDarkMode);
169171

172+
//themes.applyThemeProperties();
173+
const themeSwitch = document.querySelector("#theme-switch");
170174
if (themeSwitch) {
171175
themeSwitch.addEventListener("click", (e) => {
172176
e.preventDefault();
@@ -175,15 +179,20 @@ document.addEventListener("DOMContentLoaded", async function () {
175179
themeSwitch.classList.add("is-dark");
176180
themeSwitch.querySelector("i").innerText = "light_mode";
177181
(themeSwitch as any).title = "Switch to light mode";
178-
themes.setDarkMode();
182+
document.documentElement.setAttribute("theme", "dark");
183+
localStorage.setItem("theme", "dark");
184+
//themes.setDarkMode();
179185
} else {
180186
themeSwitch.classList.remove("is-dark");
181187
themeSwitch.querySelector("i").innerText = "dark_mode";
182188
(themeSwitch as any).title = "Switch to dark mode";
183-
themes.setLightMode();
189+
//themes.setLightMode();
190+
document.documentElement.setAttribute("theme", "light");
191+
localStorage.setItem("theme", "light");
184192
}
185193
});
186194
}
195+
/*
187196
const toggleColorsButton = <HTMLInputElement>document.getElementById("color-picker");
188197
const themePrimaryColor = themes.getThemePrimaryColor();
189198
if (toggleColorsButton && themePrimaryColor) {
@@ -194,7 +203,8 @@ document.addEventListener("DOMContentLoaded", async function () {
194203
});
195204
*/
196205

197-
// Copy Button
206+
//------ Copy Button
207+
198208
const copyBtn = Array.prototype.slice.call(document.querySelectorAll(".copyButton"));
199209
const copiedText = Array.prototype.slice.call(document.querySelectorAll(".copiedText"));
200210
const copyMsg = Array.prototype.slice.call(document.querySelectorAll(".copyMessage"));
@@ -208,13 +218,8 @@ document.addEventListener("DOMContentLoaded", async function () {
208218
});
209219
});
210220

211-
// Theme
212-
const isDarkModeByCss = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
213-
const isDarkModeManual = localStorage.getItem("theme-mode") === "dark";
214-
const isDarkMode = isDarkModeManual || isDarkModeByCss;
215-
importCodeStyle(isDarkMode);
221+
//------ Code Highlighting
216222

217-
//---------- Code Highlighting
218223
document.querySelectorAll("pre code").forEach((el: HTMLElement) => {
219224
const xmp = el.querySelector("xmp");
220225
if (xmp) {
@@ -225,7 +230,7 @@ document.addEventListener("DOMContentLoaded", async function () {
225230
hljs.highlightElement(el);
226231
});
227232

228-
// Materialize Components
233+
//------ Materialize Components
229234

230235
M.Carousel.init(document.querySelectorAll(".carousel"), {});
231236
M.Carousel.init(document.querySelectorAll(".carousel.carousel-slider"), {
@@ -251,7 +256,6 @@ document.addEventListener("DOMContentLoaded", async function () {
251256

252257
M.Parallax.init(document.querySelectorAll(".parallax"), {});
253258

254-
// Media
255259
M.Materialbox.init(document.querySelectorAll(".materialboxed"), {});
256260
M.Slider.init(document.querySelectorAll(".slider"), {});
257261

src/style.scss

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,23 @@ th {
4949
margin-top: 15px;
5050
padding-top: 30px;
5151
}
52+
*/
5253

54+
//--- Sidnav
5355
header,
5456
main,
5557
footer {
5658
padding-left: 300px;
5759
}
60+
@media #{$medium-and-down} {
61+
header,
62+
main,
63+
footer {
64+
padding-left: 0;
65+
}
66+
}
5867

68+
/*
5969
.parallax-demo header,
6070
.parallax-demo main,
6171
.parallax-demo footer {
@@ -78,7 +88,7 @@ footer.example {
7888
}
7989
}
8090
81-
// Index Page Styles
91+
//--- Index Page Styles
8292
8393
#logo-container {
8494
margin: 0;
@@ -591,6 +601,8 @@ pre:has(code) {
591601
cursor: pointer;
592602
}
593603
604+
*/
605+
594606
@keyframes rotate {
595607
0% {
596608
transform: rotate(0deg);
@@ -612,6 +624,7 @@ pre:has(code) {
612624
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
613625
}
614626

627+
/*
615628
.toc-wrapper {
616629
&.pin-bottom {
617630
margin-top: 84px;

tooltips.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,21 @@
1919

2020
<div>
2121
<a href="#" class="btn tooltipped" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
22-
<div id="tooltip-content" style="display: none">
22+
<div id="tooltip-content" style="display: grid; align-content: center">
2323
This is a tooltip with a
2424
<a href="https://github.com/materializecss">link</a> and a
2525
<i class="material-icons icon-demo">insert_chart</i>
2626
</div>
27-
28-
<a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a tooltip"> Top</a>
29-
<a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a tooltip"> Left</a>
30-
<a href="#" class="btn tooltipped" data-position="right" data-tooltip="I am a tooltip"> Right</a>
27+
<a href="#" class="btn tooltipped" data-position="top" data-tooltip="I am a top tooltip"> Top</a>
28+
<a href="#" class="btn tooltipped" data-position="left" data-tooltip="I am a left tooltip"> Left</a>
29+
<a
30+
href="#"
31+
class="btn tooltipped"
32+
data-position="right"
33+
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?"
34+
>
35+
Right</a
36+
>
3137
</div>
3238

3339
<p>Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.</p>

0 commit comments

Comments
 (0)