kmaterialize 2.0.0 → 2.3.3-1.0.0

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2014-2019 Materialize
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2014-2026 Materialize
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,91 +1,55 @@
-<p align="center">
-  <a href="http://materializecss.com/">
-    <img src="http://materializecss.com/res/materialize.svg" width="150">
-  </a>
-</p>
-
-<h3 align="center">MaterializeCSS</h3>
-
-<p align="center">
-  Materialize, a CSS Framework based on material design.
-  <br>
-  <a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
-  <br>
-  <br>
-  <a href="https://travis-ci.com/Dogfalo/materialize">
-    <img src="https://travis-ci.com/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
-  </a>
-  <a href="https://badge.fury.io/js/materialize-css">
-    <img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
-  </a>
-  <a href="https://cdnjs.com/libraries/materialize">
-    <img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
-  </a>
-  <a href="https://david-dm.org/Dogfalo/materialize">
-    <img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge">
-    </a>
-  <a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
-    <img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
-  </a>
-  <a href="https://gitter.im/Dogfalo/materialize">
-    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
-  </a>
-</p>
-
-## Table of Contents
-- [Quickstart](#quickstart)
-- [Documentation](#documentation)
-- [Supported Browsers](#supported-browsers)
-- [Changelog](#changelog)
-- [Testing](#testing)
-- [Contributing](#contributing)
-- [Copyright and license](#copyright-and-license)
-
-## Quickstart:
-Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize.
-
-- [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/Dogfalo/materialize/releases/))
-- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` (Beta: `git clone -b v1-dev https://github.com/Dogfalo/materialize.git`)
-- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html). ([Beta](https://cdnjs.com/libraries/materialize/1.0.0-beta))
-- Install with [npm](https://www.npmjs.com): `npm install materialize-css` (Beta: `npm install materialize-css@next`)
-- Install with [Bower](https://bower.io): `bower install materialize` ([DEPRECATED](https://bower.io/blog/2017/how-to-migrate-away-from-bower/))
-- Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize` (Beta: `meteor add materialize:materialize@=1.0.0-beta`)
-
-## Documentation
-The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
-
-### Running documentation locally
-Run these commands to set up the documentation:
-
-```bash
-git clone https://github.com/Dogfalo/materialize
-cd materialize
-npm install
-```
-
-Then run `grunt monitor` to compile the documentation. When it finishes, open a new browser window and navigate to `localhost:8000`. We use [BrowserSync](https://www.browsersync.io/) to display the documentation.
-
-### Documentation for previous releases
-Previous releases and their documentation are available for [download](https://github.com/Dogfalo/materialize/releases).
-
-## Supported Browsers:
-Materialize is compatible with:
-
-- Chrome 35+
-- Firefox 31+
-- Safari 9+
-- Opera
-- Edge
-- IE 11+
-
-## Changelog
-For changelogs, check out [the Releases section of materialize](https://github.com/Dogfalo/materialize/releases) or the [CHANGELOG.md](CHANGELOG.md).
-
-## Testing
-We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](CONTRIBUTING.md#jasmine-testing-guide).
-
-## Contributing
-Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
-
-## Copyright and license
-Code Copyright 2018 Materialize. Code released under the MIT license.
+<p align="center">
+  <a href="https://materialize.kevinzarshenas.com" target="_blank">
+    <img src="https://materializeweb.com/images/materialize.svg" width="200"/>
+  </a>
+</p>
+
+<h3 align="center">kmaterialize</h3>
+
+<p align="center">
+  kmaterialize, a CSS Framework based on Material Design.
+  <br>
+  <a target="_blank" href="https://materialize.kevinzarshenas.com"><strong>[ Browse the docs ]</strong></a>
+</p>
+
+## Getting started
+Read the [getting started guide](https://materialize.kevinzarshenas.com/getting-started.html) for more information on how to use kmaterialize.
+
+- Clone the repo: `git clone https://github.com/materializecss/materialize.git`
+- Install with [npm](https://www.npmjs.com): `npm install kmaterialize`
+
+## Testing
+To run tests locally you first have to build the files and then run the tests. This can be done with the command `npm test`;
+To get more info and debug information you can do the following:
+run `npx jasmine-browser-runner` then go to the url via browser `http://localhost:8888`. The tests will then run and show detailed feedback.
+
+## Development
+The documentation can be found at <https://materialize.kevinzarshenas.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org) installed on your computer.
+This is the core project with all the components. To see how they are used we recommend using an example project or go to the documentation.
+
+### Running documentation locally
+See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.
+
+### Releases
+Previous releases are available [here](https://github.com/materializecss/materialize/releases). You can also find the changelog under each release.
+
+## Supported Browsers:
+Materialize is compatible with:
+
+- Chrome 35+
+- Firefox 31+
+- Safari 9+
+- Opera
+- Edge
+
+## Testing
+We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](docs/CONTRIBUTING.md#jasmine-testing-guide).
+
+## Quick Testing and Development
+For quick testing install live-server node package globally and run `npm run demo`
+
+## Contributing
+Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+
+## Copyright and license
+Code Copyright 2026 kmaterialize. Code released under the MIT license.

package/components/appbar/_navbar.old.scss

@@ -0,0 +1,223 @@
+/* @use '../../sass/variables' as *;
+@use '../../sass/global' as *;
+
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px; // todo: do not change
+  --appbar-title-font-size: 24px;
+}
+
+.nav-wrapper {
+  height: 100%;
+  background-color: var(--md-sys-color-surface);
+  padding-left: 4px;
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.navbar {
+  color: var(--md-sys-color-on-surface);
+  @extend .z-depth-1;
+  height: var(--navbar-height-mobile);
+
+  &.nav-extended {
+    height: auto;
+    .nav-wrapper {
+      min-height: var(--navbar-height-mobile);
+      height: auto;
+    }
+    .nav-content {
+      position: relative;
+      line-height: normal;
+    }
+  }
+
+  // Navbar Links
+  ul:not(.dropdown-content) {
+    list-style-type: none;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    & > li {
+      transition: background-color 0.3s;
+      padding: 0;
+
+      & > a {
+        transition: background-color 0.3s;
+        color: var(--md-sys-color-on-surface);
+        display: block;
+        cursor: pointer;
+
+
+        &.active {
+          //background-color: var(--md-sys-color-primary-container-dark);
+        }
+        &:hover:not(.active) {
+          // background-color: var(--md-sys-color-on-primary-dark);
+        }
+
+        &.btn,
+        &.btn-large,
+        &.btn-flat,
+        &.btn-floating {
+          margin-top: -2px;
+          margin-left: 15px;
+          margin-right: 15px;
+          display: inline-block;
+
+          & > .material-icons,
+          & > .material-symbols-outlined,
+          & > .material-symbols-rounded,
+          & > .material-symbols-sharp {
+            height: inherit;
+            line-height: inherit;
+          }
+        }
+      }
+    }
+
+    &.left {
+      float: left;
+    }
+  }
+
+  a {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  i,
+  [class^='mdi-'],
+  [class*='mdi-'],
+  i.material-icons,
+  i.material-symbols-outlined,
+  i.material-symbols-rounded,
+  i.material-symbols-sharp {
+    display: block;
+    font-size: 24px;
+    height: var(--navbar-height-mobile);
+    line-height: var(--navbar-height-mobile);
+  }
+
+
+  // Collapse button
+  .sidenav-trigger {
+    float: left;
+    position: relative;
+    z-index: 1;
+    height: var(--navbar-height-mobile);
+    margin: 0 18px;
+
+    i {
+      height: var(--navbar-height-mobile);
+      line-height: var(--navbar-height-mobile);
+    }
+  }
+
+  // Logo
+  .brand-logo {
+    color: var(--md-sys-color-on-surface);
+    font-size: var(--appbar-title-font-size);
+    display: inline-block;
+    padding: 0;
+
+     &.center {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.right {
+      right: 0.5rem;
+      padding: 0;
+    }
+
+    i,
+    [class^='mdi-'],
+    [class*='mdi-'],
+    i.material-icons,
+    i.material-symbols-outlined,
+    i.material-symbols-rounded,
+    i.material-symbols-sharp {
+      float: left;
+      margin-right: 15px;
+    }
+  }
+
+  // Title
+  .nav-title {
+    display: inline-block;
+    font-size: 32px;
+    padding: 28px 0;
+  }
+
+  // Navbar Search Form
+  form {
+    height: 100%;
+  }
+  .input-field {
+    margin: 0;
+    height: 100%;
+
+    input[type='search'] {
+      height: 100%;
+      font-size: 1.2rem;
+      border: none;
+      padding-left: 2rem;
+      color: var(--md-sys-color-on-primary);
+
+      &:focus,
+      &[type='text']:valid,
+      &[type='password']:valid,
+      &[type='email']:valid,
+      &[type='url']:valid,
+      &[type='date']:valid {
+        border: none;
+        box-shadow: none;
+      }
+    }
+
+    label {
+      top: 0;
+      left: 0;
+
+      i {
+        color: var(--font-on-primary-color-medium);
+        transition: color 0.3s;
+      }
+
+      &.active i {
+        color: var(--md-sys-color-on-primary);
+      }
+    }
+  }
+}
+
+// Fixed Navbar
+.navbar-fixed {
+  position: relative;
+  height: var(--navbar-height-mobile);
+  z-index: 997;
+
+  .navbar {
+    position: fixed;
+    right: 0;
+  }
+}
+
+@media #{$medium-and-up} {
+  .nav.nav-extended .nav-wrapper {
+    min-height: var(--navbar-height-mobile);
+  }
+  .nav,
+  .navbar .nav-wrapper i,
+  nav a.sidenav-trigger,
+  .navbar a.sidenav-trigger i {
+    height: var(--navbar-height);
+    line-height: var(--navbar-height);
+  }
+  .navbar-fixed {
+    height: var(--navbar-height);
+  }
+} */

package/components/appbar/appbar.css

@@ -0,0 +1,235 @@
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px;
+  --appbar-title-font-size: 24px;
+}
+
+/* :where() keeps this whole rule at zero specificity, so a color utility
+   class (.primary, .secondary, .surface, etc.) placed on the same element
+   always wins over this base/fallback styling, no matter which rule comes
+   later in the stylesheet. Without it, "background-color" here tied on
+   specificity with ".primary" and (being later in source order) silently
+   overrode the intended navbar color whenever both classes were present. */
+:where(.nav-wrapper) {
+  height: 100%;
+  background-color: var(--md-sys-color-surface);
+  padding-left: 4px;
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.navbar {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-secondary-container);
+  width: 100%;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+
+.navbar.nav-extended {
+  height: auto;
+}
+
+.navbar.nav-extended .nav-wrapper {
+  min-height: var(--navbar-height-mobile);
+  height: auto;
+}
+
+.navbar.nav-extended .nav-content {
+  position: relative;
+  line-height: normal;
+}
+
+.navbar ul:not(.dropdown-content) {
+  list-style-type: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.navbar ul:not(.dropdown-content).left {
+  float: left;
+}
+
+.navbar ul:not(.dropdown-content) > li {
+  transition: background-color 0.3s;
+  padding: 0;
+}
+
+.navbar ul:not(.dropdown-content) > li > a {
+  transition: background-color 0.3s;
+  color: var(--md-sys-color-on-surface);
+  display: block;
+  cursor: pointer;
+}
+
+.navbar ul:not(.dropdown-content) > li > a.btn,
+.navbar ul:not(.dropdown-content) > li > a.btn-large,
+.navbar ul:not(.dropdown-content) > li > a.btn-flat,
+.navbar ul:not(.dropdown-content) > li > a.btn-floating {
+  margin-top: -2px;
+  margin-left: 15px;
+  margin-right: 15px;
+  display: inline-block;
+}
+
+.navbar ul:not(.dropdown-content) > li > a.btn > .material-icons,
+.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-icons,
+.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-icons,
+.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-icons,
+.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-outlined,
+.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-outlined,
+.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-outlined,
+.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-outlined,
+.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-rounded,
+.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-rounded,
+.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-rounded,
+.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-rounded,
+.navbar ul:not(.dropdown-content) > li > a.btn > .material-symbols-sharp,
+.navbar ul:not(.dropdown-content) > li > a.btn-large > .material-symbols-sharp,
+.navbar ul:not(.dropdown-content) > li > a.btn-flat > .material-symbols-sharp,
+.navbar ul:not(.dropdown-content) > li > a.btn-floating > .material-symbols-sharp {
+  height: inherit;
+  line-height: inherit;
+}
+
+.navbar a {
+  color: var(--md-sys-color-on-primary);
+}
+
+.navbar i,
+.navbar [class^='mdi-'],
+.navbar [class*='mdi-'],
+.navbar i.material-icons,
+.navbar i.material-symbols-outlined,
+.navbar i.material-symbols-rounded,
+.navbar i.material-symbols-sharp {
+  display: block;
+  font-size: 24px;
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+
+/* Collapse button */
+.navbar .sidenav-trigger {
+  float: left;
+  position: relative;
+  z-index: 1;
+  height: var(--navbar-height-mobile);
+  margin: 0 18px;
+}
+
+.navbar .sidenav-trigger i {
+  height: var(--navbar-height-mobile);
+  line-height: var(--navbar-height-mobile);
+}
+
+/* Logo */
+.navbar .brand-logo {
+  color: var(--md-sys-color-on-surface);
+  font-size: var(--appbar-title-font-size);
+  display: inline-block;
+  padding: 0;
+}
+
+.navbar .brand-logo.center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.navbar .brand-logo.right {
+  right: 0.5rem;
+  padding: 0;
+}
+
+.navbar .brand-logo i,
+.navbar .brand-logo [class^='mdi-'],
+.navbar .brand-logo [class*='mdi-'],
+.navbar .brand-logo i.material-icons,
+.navbar .brand-logo i.material-symbols-outlined,
+.navbar .brand-logo i.material-symbols-rounded,
+.navbar .brand-logo i.material-symbols-sharp {
+  float: left;
+  margin-right: 15px;
+}
+
+/* Title */
+.navbar .nav-title {
+  display: inline-block;
+  font-size: 32px;
+  padding: 28px 0;
+}
+
+/* Navbar Search Form */
+.navbar form {
+  height: 100%;
+}
+
+.navbar .input-field {
+  margin: 0;
+  height: 100%;
+}
+
+.navbar .input-field input[type='search'] {
+  height: 100%;
+  font-size: 1.2rem;
+  border: none;
+  padding-left: 2rem;
+  color: var(--md-sys-color-on-primary);
+}
+
+.navbar .input-field input[type='search']:focus,
+.navbar .input-field input[type='search'][type='text']:valid,
+.navbar .input-field input[type='search'][type='password']:valid,
+.navbar .input-field input[type='search'][type='email']:valid,
+.navbar .input-field input[type='search'][type='url']:valid,
+.navbar .input-field input[type='search'][type='date']:valid {
+  border: none;
+  box-shadow: none;
+}
+
+.navbar .input-field label {
+  top: 0;
+  left: 0;
+}
+
+.navbar .input-field label i {
+  color: var(--font-on-primary-color-medium);
+  transition: color 0.3s;
+}
+
+.navbar .input-field label.active i {
+  color: var(--md-sys-color-on-primary);
+}
+
+/* Fixed Navbar */
+.navbar-fixed {
+  position: relative;
+  height: var(--navbar-height-mobile);
+  z-index: 997;
+}
+
+.navbar-fixed .navbar {
+  position: fixed;
+  right: 0;
+}
+
+@media only screen and (min-width: 601px) {
+  .nav.nav-extended .nav-wrapper {
+    min-height: var(--navbar-height-mobile);
+  }
+
+  .nav,
+  .navbar .nav-wrapper i,
+  nav a.sidenav-trigger,
+  .navbar a.sidenav-trigger i {
+    height: var(--navbar-height);
+    line-height: var(--navbar-height);
+  }
+
+  .navbar-fixed {
+    height: var(--navbar-height);
+  }
+}