Skip to content

Commit f66beaa

Browse files
wuda-iowuda-io
committed
fix: themes and vars and improved doc styles
1 parent de1050f commit f66beaa

15 files changed

Lines changed: 201 additions & 270 deletions

‎about.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
<html lang="en">
33
<head>
44
{{> head }}
5+
<style>
6+
.promo {
7+
width: 100%;
8+
}
9+
</style>
510
</head>
611
<body>
712
{{> navbar }}

‎floating-action-button.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,7 @@ <h3 class="header">Click-only FAB</h3>
296296

297297
<div id="toolbar" class="scrollspy section">
298298
<h3 class="header">FAB to Toolbar</h3>
299+
<p class="error-text">Deprecated since Version 2.1.0!</p>
299300
<p>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the
300301
<code class="language-html">toolbar</code> class to the FAB.</p>
301302
<iframe src="fab-toolbar-demo.html" frameborder="0" width="100%" height="100px"></iframe>

‎getting-started.html‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,20 @@ <h5>Sass</h5>
5353
</div>
5454
</div>
5555

56-
<div class="row card is-closed" id="download-thanks">
57-
<div class="s12">
58-
<h3 class="header">Thank you for downloading!</h3>
56+
<div class="is-closed" id="download-thanks">
57+
<div class="card p-3 mt-3">
58+
<p class="primary-text"><b>Thank you for downloading!</b></p>
5959
<p class="caption">
6060
We hope you find Materialize useful in your next project. We would appreciate if you help us spread the word about Materialize by giving us a star or support
6161
our work.
6262
</p>
63+
<div class="row">
64+
<a href="https://github.com/materializecss/materialize" target="_blank">
65+
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/materializecss/materialize" />
66+
</a>
67+
<a href="https://opencollective.com/materialize" target="_blank" class="btn tonal z-depth-0">OpenCollective</a>
68+
</div>
6369
</div>
64-
<iframe
65-
style="align-self: center"
66-
src="https://ghbtns.com/github-btn.html?user=materializecss&repo=materialize&type=star&count=true&size=large"
67-
allowtransparency="true"
68-
frameborder="0"
69-
scrolling="0"
70-
width="170"
71-
height="30"
72-
></iframe>
73-
<a href="https://opencollective.com/materialize" target="_blank" class="btn z-depth-0">OpenCollective</a>
7470
</div>
7571

7672
<div class="row">

‎grid.html‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
<style>
66
.promo {
77
width: 100%;
8-
i {
9-
margin: 30px 0;
10-
color: var(--secondary-color);
11-
font-size: 5rem;
12-
display: block;
13-
}
8+
}
9+
10+
.promo i {
11+
margin: 30px 0;
12+
color: var(--secondary-color);
13+
font-size: 5rem;
14+
display: block;
1415
}
1516

1617
.promo-caption {
@@ -374,47 +375,42 @@ <h2 class="header">Offsets</h2>
374375
<!-- Gaps -->
375376
<div id="grid-gaps" class="section scrollspy">
376377
<h2 class="header">Gaps</h2>
377-
<p class="green-text">New in V2.0.0, since CSS Grid is used.</p>
378378
<p>
379-
You can easily change the Gap between the Grid. Simply add
380-
<code class="language-html">style="gap:5px;"</code> to the row element to change the gap.
379+
There is a default gap between the rows (g-3). You can easily change the Gap between the Grid with the Gap-Classes. Simply add
380+
<code class="language-html">g-0</code> to <code class="language-html">g-5</code> to the element with the "row" class, to change the gap size.
381381
</p>
382382

383-
<p>Without Gaps (standard):</p>
383+
<p>Standard Gaps (g-3)</p>
384384
<div class="row">
385385
<div class="s3 grid-example">1</div>
386386
<div class="s3 grid-example">2</div>
387387
<div class="s3 grid-example">3</div>
388388
<div class="s3 grid-example">4</div>
389-
<div class="s3 grid-example">5</div>
390-
<div class="s3 grid-example">6</div>
391-
<div class="s3 grid-example">7</div>
392-
<div class="s3 grid-example">8</div>
393389
</div>
394390

395-
<p>Grid with Gapsize 5px:</p>
396-
<div class="row" style="gap: 5px">
397-
<div class="s3 grid-example">1</div>
398-
<div class="s3 grid-example">2</div>
399-
<div class="s3 grid-example">3</div>
400-
<div class="s3 grid-example">4</div>
401-
<div class="s3 grid-example">5</div>
402-
<div class="s3 grid-example">6</div>
403-
<div class="s3 grid-example">7</div>
404-
<div class="s3 grid-example">8</div>
391+
<p>No Gap (g-0)</p>
392+
<div class="row g-0">
393+
<div class="s4 grid-example">1</div>
394+
<div class="s4 grid-example">2</div>
395+
<div class="s4 grid-example">3</div>
396+
</div>
397+
398+
<p>Bigger Gap (g-4)</p>
399+
<div class="row g-4">
400+
<div class="s4 grid-example">1</div>
401+
<div class="s4 grid-example">2</div>
402+
<div class="s4 grid-example">3</div>
405403
</div>
406404

407405
<pre><code class="language-html">
408406
<xmp>
409-
<div class="row" style="gap: 5px;">
407+
<div class="row g-4">
410408
<div class="s3">1</div>
411409
<div class="s3">2</div>
412410
<div class="s3">3</div>
413411
<div class="s3">4</div>
414-
...
415412
</div>
416-
</xmp>
417-
</code></pre>
413+
</xmp></code></pre>
418414
</div>
419415

420416
<!-- Grid push and pull -->

‎index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,40 @@
7373
.github-commit .sha {
7474
margin: 0 6px 0 6px;
7575
}
76+
77+
#index-banner {
78+
position: relative;
79+
background-color: var(--md-sys-color-background);
80+
}
81+
82+
@keyframes rotate {
83+
0% {
84+
transform: rotate(0deg);
85+
}
86+
100% {
87+
transform: rotate(360deg);
88+
}
89+
}
90+
91+
.gradient {
92+
--size: 100vh;
93+
--speed: 9s;
94+
--easing: cubic-bezier(0.8, 0.2, 0.6, 0.8);
95+
--bg-color: color-mix(in srgb, var(--md-sys-color-secondary) 20%, var(--md-sys-color-background));
96+
97+
width: var(--size);
98+
height: var(--size);
99+
filter: blur(calc(var(--size) / 5));
100+
background-image: linear-gradient(var(--bg-color), var(--md-sys-color-primary)); /* hsl(252, 59%, 63%) */
101+
animation: rotate var(--speed) var(--easing) alternate infinite;
102+
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
103+
}
76104
</style>
77105
</head>
78106
<body>
79107
{{> navbar }}
80108
<main>
81-
<div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--md-sys-color-background))">
109+
<div id="index-banner">
82110
<!-- Background -->
83111
<div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0">
84112
<div class="gradient"></div>

‎packages/materialize‎

Submodule materialize updated 30 files

‎parallax-demo.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,23 @@
33
<head>
44
{{> head }}
55
</head>
6+
<style>
7+
.parallax-demo header,
8+
.parallax-demo main,
9+
.parallax-demo footer {
10+
padding-left: 0;
11+
}
12+
.parallax-container .text-center {
13+
position: absolute;
14+
top: 50%;
15+
left: 0;
16+
right: 0;
17+
margin-top: -27px;
18+
}
19+
body.parallax-demo footer {
20+
margin-top: 0;
21+
}
22+
</style>
623
<body class="parallax-demo">
724
<main>
825
<!-- Parallax Section -->

‎partials/footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<div class="s12 m6 l4">
77
<h5>Help Materialize Grow</h5>
88
<p>
9-
We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by opening issues or contributing
10-
on GitHub.
9+
We hope you have enjoyed using <a href="https://materializeweb.com">Materialize</a> and if you feel like it has helped you out and want to support the team you can
10+
help us by opening issues or contributing on GitHub.
1111
</p>
1212
<a tabindex="0" class="btn tonal btn-small waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
1313
</div>

‎sass.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<!-- Variables Section -->
1414
<div id="variables" class="section scrollspy">
1515
<h3 class="header">Variables</h3>
16+
<p class="error-text">Deprecated in Version 2.1.0. You can use CSS Variables now to change the colors. Take a look at <a href="/themes.html">Themes</a></p>
1617
<p class="caption">
1718
When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in
1819
<a href="https://github.com/materializecss/materialize/blob/main/sass/components/_variables.scss">_variables.scss</a>.

‎shadow.html‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -32,45 +32,49 @@
3232
<code class="language-scss">@extend .z-depth-2</code>. A <code class="language-scss">z-depth-0</code> can be used to remove shadows from elements that have z-depths
3333
by default.
3434
</p>
35+
3536
<div class="row">
36-
<div class="col s12 m4 l2">
37-
<p class="z-depth-0 shadow-demo"></p>
37+
<div class="col s12 m4 l3">
38+
<p class="z-depth-0 p-3">0</p>
3839
</div>
39-
<div class="col s12 m4 l2">
40-
<p class="z-depth-1 shadow-demo"></p>
40+
<div class="col s12 m4 l3">
41+
<p class="z-depth-1 p-3">1</p>
4142
</div>
42-
<div class="col s12 m4 l2">
43-
<p class="z-depth-2 shadow-demo"></p>
43+
<div class="col s12 m4 l3">
44+
<p class="z-depth-2 p-3">2</p>
4445
</div>
45-
<div class="col s12 m4 l2">
46-
<p class="z-depth-3 shadow-demo"></p>
46+
<div class="col s12 m4 l3">
47+
<p class="z-depth-3 p-3">3</p>
4748
</div>
48-
<div class="col s12 m4 l2">
49-
<p class="z-depth-4 shadow-demo"></p>
49+
<div class="col s12 m4 l3">
50+
<p class="z-depth-4 p-3">4</p>
5051
</div>
51-
<div class="col s12 m4 l2">
52-
<p class="z-depth-5 shadow-demo"></p>
52+
<div class="col s12 m4 l3">
53+
<p class="z-depth-5 p-3">5</p>
5354
</div>
5455
</div>
55-
<pre><code class="language-html">
56-
<xmp>
57-
<div class="col s12 m2">
58-
<p class="z-depth-1">z-depth-1</p>
59-
</div>
60-
<div class="col s12 m2">
61-
<p class="z-depth-2">z-depth-2</p>
62-
</div>
63-
<div class="col s12 m2">
64-
<p class="z-depth-3">z-depth-3</p>
65-
</div>
66-
<div class="col s12 m2">
67-
<p class="z-depth-4">z-depth-4</p>
68-
</div>
69-
<div class="col s12 m2">
70-
<p class="z-depth-5">z-depth-5</p>
56+
57+
<pre><code class="language-html"><xmp><div class="row">
58+
<div class="col s12 m4 l3">
59+
<p class="z-depth-0 p-3">0</p>
60+
</div>
61+
<div class="col s12 m4 l3">
62+
<p class="z-depth-1 p-3">1</p>
63+
</div>
64+
<div class="col s12 m4 l3">
65+
<p class="z-depth-2 p-3">2</p>
66+
</div>
67+
<div class="col s12 m4 l3">
68+
<p class="z-depth-3 p-3">3</p>
69+
</div>
70+
<div class="col s12 m4 l3">
71+
<p class="z-depth-4 p-3">4</p>
72+
</div>
73+
<div class="col s12 m4 l3">
74+
<p class="z-depth-5 p-3">5</p>
75+
</div>
7176
</div>
72-
</xmp>
73-
</code></pre>
77+
</xmp></code></pre>
7478
</div>
7579
</div>
7680

0 commit comments

Comments
 (0)