fix: themes and vars and improved doc styles

materializecss · Jun 12, 2024 · f66beaa · f66beaa
1 parent de1050f
commit f66beaa
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 270 deletions.
diff --git a/about.html b/about.html
@@ -2,6 +2,11 @@
 <html lang="en">
   <head>
     {{> head }}
+    <style>
+      .promo {
+        width: 100%;
+      }
+    </style>
   </head>
   <body>
     {{> navbar }}

diff --git a/floating-action-button.html b/floating-action-button.html
@@ -296,6 +296,7 @@ <h3 class="header">Click-only FAB</h3>
 
       <div id="toolbar" class="scrollspy section">
         <h3 class="header">FAB to Toolbar</h3>
+        <p class="error-text">Deprecated since Version 2.1.0!</p>
         <p>Instead of displaying individual button options, you can transition your FAB into a toolbar on click. Just add the
           <code class="language-html">toolbar</code> class to the FAB.</p>
         <iframe src="fab-toolbar-demo.html" frameborder="0" width="100%" height="100px"></iframe>

diff --git a/getting-started.html b/getting-started.html
@@ -53,24 +53,20 @@ <h5>Sass</h5>
                 </div>
               </div>
 
-              <div class="row card is-closed" id="download-thanks">
-                <div class="s12">
-                  <h3 class="header">Thank you for downloading!</h3>
+              <div class="is-closed" id="download-thanks">
+                <div class="card p-3 mt-3">
+                  <p class="primary-text"><b>Thank you for downloading!</b></p>
                   <p class="caption">
                     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
                     our work.
                   </p>
+                  <div class="row">
+                    <a href="https://github.com/materializecss/materialize" target="_blank">
+                      <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/materializecss/materialize" />
+                    </a>
+                    <a href="https://opencollective.com/materialize" target="_blank" class="btn tonal z-depth-0">OpenCollective</a>
+                  </div>
                 </div>
-                <iframe
-                  style="align-self: center"
-                  src="https://ghbtns.com/github-btn.html?user=materializecss&repo=materialize&type=star&count=true&size=large"
-                  allowtransparency="true"
-                  frameborder="0"
-                  scrolling="0"
-                  width="170"
-                  height="30"
-                ></iframe>
-                <a href="https://opencollective.com/materialize" target="_blank" class="btn z-depth-0">OpenCollective</a>
               </div>
 
               <div class="row">

diff --git a/grid.html b/grid.html
@@ -5,12 +5,13 @@
     <style>
       .promo {
         width: 100%;
-        i {
-          margin: 30px 0;
-          color: var(--secondary-color);
-          font-size: 5rem;
-          display: block;
-        }
+      }
+
+      .promo i {
+        margin: 30px 0;
+        color: var(--secondary-color);
+        font-size: 5rem;
+        display: block;
       }
 
       .promo-caption {
@@ -374,47 +375,42 @@ <h2 class="header">Offsets</h2>
               <!-- Gaps -->
               <div id="grid-gaps" class="section scrollspy">
                 <h2 class="header">Gaps</h2>
-                <p class="green-text">New in V2.0.0, since CSS Grid is used.</p>
                 <p>
-                  You can easily change the Gap between the Grid. Simply add
-                  <code class="language-html">style="gap:5px;"</code> to the row element to change the gap.
+                  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
+                  <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.
                 </p>
 
-                <p>Without Gaps (standard):</p>
+                <p>Standard Gaps (g-3)</p>
                 <div class="row">
                   <div class="s3 grid-example">1</div>
                   <div class="s3 grid-example">2</div>
                   <div class="s3 grid-example">3</div>
                   <div class="s3 grid-example">4</div>
-                  <div class="s3 grid-example">5</div>
-                  <div class="s3 grid-example">6</div>
-                  <div class="s3 grid-example">7</div>
-                  <div class="s3 grid-example">8</div>
                 </div>
 
-                <p>Grid with Gapsize 5px:</p>
-                <div class="row" style="gap: 5px">
-                  <div class="s3 grid-example">1</div>
-                  <div class="s3 grid-example">2</div>
-                  <div class="s3 grid-example">3</div>
-                  <div class="s3 grid-example">4</div>
-                  <div class="s3 grid-example">5</div>
-                  <div class="s3 grid-example">6</div>
-                  <div class="s3 grid-example">7</div>
-                  <div class="s3 grid-example">8</div>
+                <p>No Gap (g-0)</p>
+                <div class="row g-0">
+                  <div class="s4 grid-example">1</div>
+                  <div class="s4 grid-example">2</div>
+                  <div class="s4 grid-example">3</div>
+                </div>
+
+                <p>Bigger Gap (g-4)</p>
+                <div class="row g-4">
+                  <div class="s4 grid-example">1</div>
+                  <div class="s4 grid-example">2</div>
+                  <div class="s4 grid-example">3</div>
                 </div>
 
                 <pre><code class="language-html">
 <xmp>
-<div class="row" style="gap: 5px;">
+<div class="row g-4">
   <div class="s3">1</div>
   <div class="s3">2</div>
   <div class="s3">3</div>
   <div class="s3">4</div>
-  ...
 </div>
-</xmp>
-          </code></pre>
+</xmp></code></pre>
               </div>
 
               <!-- Grid push and pull -->

diff --git a/index.html b/index.html
@@ -73,12 +73,40 @@
       .github-commit .sha {
         margin: 0 6px 0 6px;
       }
+
+      #index-banner {
+        position: relative;
+        background-color: var(--md-sys-color-background);
+      }
+
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .gradient {
+        --size: 100vh;
+        --speed: 9s;
+        --easing: cubic-bezier(0.8, 0.2, 0.6, 0.8);
+        --bg-color: color-mix(in srgb, var(--md-sys-color-secondary) 20%, var(--md-sys-color-background));
+
+        width: var(--size);
+        height: var(--size);
+        filter: blur(calc(var(--size) / 5));
+        background-image: linear-gradient(var(--bg-color), var(--md-sys-color-primary)); /* hsl(252, 59%, 63%) */
+        animation: rotate var(--speed) var(--easing) alternate infinite;
+        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+      }
     </style>
   </head>
   <body>
     {{> navbar }}
     <main>
-      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--md-sys-color-background))">
+      <div id="index-banner">
         <!-- Background -->
         <div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0">
           <div class="gradient"></div>

diff --git a/packages/materialize b/packages/materialize
diff --git a/parallax-demo.html b/parallax-demo.html
@@ -3,6 +3,23 @@
   <head>
     {{> head }}
   </head>
+  <style>
+    .parallax-demo header,
+    .parallax-demo main,
+    .parallax-demo footer {
+      padding-left: 0;
+    }
+    .parallax-container .text-center {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      margin-top: -27px;
+    }
+    body.parallax-demo footer {
+      margin-top: 0;
+    }
+  </style>
   <body class="parallax-demo">
     <main>
       <!--  Parallax Section  -->

diff --git a/partials/footer.html b/partials/footer.html
@@ -6,8 +6,8 @@
           <div class="s12 m6 l4">
             <h5>Help Materialize Grow</h5>
             <p>
-              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
-              on GitHub.
+              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
+              help us by opening issues or contributing on GitHub.
             </p>
             <a tabindex="0" class="btn tonal btn-small waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
           </div>

diff --git a/sass.html b/sass.html
@@ -13,6 +13,7 @@
             <!--  Variables Section  -->
             <div id="variables" class="section scrollspy">
               <h3 class="header">Variables</h3>
+              <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>
               <p class="caption">
                 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
                 <a href="https://github.com/materializecss/materialize/blob/main/sass/components/_variables.scss">_variables.scss</a>.

diff --git a/shadow.html b/shadow.html
@@ -32,45 +32,49 @@
                 <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
                 by default.
               </p>
+
               <div class="row">
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-0 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-0 p-3">0</p>
                 </div>
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-1 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-1 p-3">1</p>
                 </div>
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-2 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-2 p-3">2</p>
                 </div>
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-3 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-3 p-3">3</p>
                 </div>
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-4 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-4 p-3">4</p>
                 </div>
-                <div class="col s12 m4 l2">
-                  <p class="z-depth-5 shadow-demo"></p>
+                <div class="col s12 m4 l3">
+                  <p class="z-depth-5 p-3">5</p>
                 </div>
               </div>
-              <pre><code class="language-html">
-<xmp>
-<div class="col s12 m2">
-  <p class="z-depth-1">z-depth-1</p>
-</div>
-<div class="col s12 m2">
-  <p class="z-depth-2">z-depth-2</p>
-</div>
-<div class="col s12 m2">
-  <p class="z-depth-3">z-depth-3</p>
-</div>
-<div class="col s12 m2">
-  <p class="z-depth-4">z-depth-4</p>
-</div>
-<div class="col s12 m2">
-  <p class="z-depth-5">z-depth-5</p>
+
+              <pre><code class="language-html"><xmp><div class="row">
+  <div class="col s12 m4 l3">
+    <p class="z-depth-0 p-3">0</p>
+  </div>
+  <div class="col s12 m4 l3">
+    <p class="z-depth-1 p-3">1</p>
+  </div>
+  <div class="col s12 m4 l3">
+    <p class="z-depth-2 p-3">2</p>
+  </div>
+  <div class="col s12 m4 l3">
+    <p class="z-depth-3 p-3">3</p>
+  </div>
+  <div class="col s12 m4 l3">
+    <p class="z-depth-4 p-3">4</p>
+  </div>
+  <div class="col s12 m4 l3">
+    <p class="z-depth-5 p-3">5</p>
+  </div>
 </div>
-</xmp>
-        </code></pre>
+</xmp></code></pre>
             </div>
           </div>
+0 −527		HISTORY.md
+3 −1		dist/css/materialize.css
+4 −4		sass/components/_badges.scss
+1 −1		sass/components/_cards.scss
+2 −2		sass/components/_carousel.scss
+4 −4		sass/components/_chips.scss
+1 −1		sass/components/_collapsible.scss
+5 −5		sass/components/_collection.scss
+13 −13		sass/components/_datepicker.scss
+1 −1		sass/components/_dropdown.scss
+20 −18		sass/components/_global.scss
+12 −4		sass/components/_grid.scss
+9 −9		sass/components/_navbar.scss
+3 −3		sass/components/_sidenav.scss
+4 −4		sass/components/_slider.scss
+8 −8		sass/components/_tabs.scss
+3 −3		sass/components/_tapTarget.scss
+0 −56		sass/components/_theme_variables.scss
+4 −4		sass/components/_timepicker.scss
+4 −4		sass/components/_variables.scss
+15 −15		sass/components/forms/_checkboxes.scss
+2 −2		sass/components/forms/_forms.scss
+7 −7		sass/components/forms/_input-fields.scss
+9 −9		sass/components/forms/_radio-buttons.scss
+5 −5		sass/components/forms/_range.scss
+10 −10		sass/components/forms/_select.scss
+4 −4		sass/components/forms/_switches.scss
+1 −1		sass/materialize.scss
+0 −2		src/select.ts
+0 −8		tests/spec/helper.js