@materializecss/materialize 1.2.1 → 2.0.0-alpha

package/package.json

@@ -3,7 +3,7 @@
   "description": "Builds Materialize distribution packages",
   "author": "Alvin Wang, Alan Chang",
   "homepage": "https://materializecss.github.io/materialize/",
-  "version": "1.2.1",
+  "version": "2.0.0-alpha",
   "main": "dist/js/materialize.js",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
@@ -19,6 +19,7 @@
     "dev": "grunt monitor",
     "test": "grunt test",
     "release": "grunt release",
+    "watch": "webpack --watch",
     "precommit": "lint-staged",
     "docs": "grunt docs",
     "commit": "npx cz",
@@ -42,39 +43,39 @@
     "commitlint": "^17.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "grunt": "^1.0.1",
-    "grunt-babel": "^6.0.0",
     "grunt-banner": "^0.6.0",
     "grunt-browser-sync": "^2.2.0",
     "grunt-concurrent": "^3.0.0",
-    "grunt-contrib-clean": "^1.1.0",
     "grunt-contrib-compress": "^1.4.1",
-    "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jasmine": "^3.0.0",
     "grunt-contrib-pug": "^3.0.0",
-    "grunt-contrib-uglify": "^3.0.1",
     "grunt-contrib-watch": "^1.0.0",
-    "grunt-notify": "^0.4.5",
     "grunt-postcss": "^0.9.0",
     "grunt-remove-logging": "^0.2.0",
     "grunt-rename-util": "^1.0.0",
     "grunt-sass": "^3.1.0",
     "grunt-text-replace": "^0.4.0",
+    "grunt-webpack": "^5.0.0",
     "husky": "^8.0.1",
     "jasmine": "^3.8.0",
-    "jquery": "^3.2.1",
+    "jstransformer-markdown-it": "^3.0.0",
     "lint-staged": "^7.0.5",
     "node-archiver": "^0.3.0",
     "phantomjs-prebuilt": "^2.1.14",
     "pinst": "^3.0.0",
     "prettier": "^1.12.1",
-    "sass": "^1.35.2"
+    "sass": "^1.35.2",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "files": [
     "dist",
     "extras",
-    "js/**/*.js",
+    "src/**/*.ts",
     "sass/**/*.scss",
     "Gruntfile.js",
     "LICENSE"
@@ -83,5 +84,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "animejs": "^3.2.1"
   }
 }

package/sass/components/_badges.scss

@@ -7,14 +7,14 @@ span.badge {
   font-size: 1rem;
   line-height: $badge-height;
   height: $badge-height;
-  color: color('grey', 'darken-1');
+  color: $badge-color;
   float: right;
   box-sizing: border-box;
 
   &.new {
     font-weight: 300;
     font-size: 0.8rem;
-    color: #fff;
+    color: $badge-color-new;
     background-color: $badge-bg-color;
     border-radius: 2px;
   }
@@ -27,6 +27,10 @@ span.badge {
   }
 }
 
+.active span.badge {
+  color: $badge-color-active;
+}
+
 // Special cases
 nav ul a span.badge {
   display: inline-block;
@@ -41,9 +45,15 @@ nav ul a span.badge {
 .collection-item span.badge {
   margin-top: calc(#{$collection-line-height * 0.5} - #{$badge-height * 0.5});
 }
+
 .collapsible span.badge {
   margin-left: auto;
 }
+
+.collapsible .active span.badge:not(.new) {
+  color: $badge-color;
+}
+
 .sidenav span.badge {
   margin-top: calc(#{$sidenav-line-height * 0.5} - #{$badge-height * 0.5});
 }

package/sass/components/_buttons.scss

@@ -1,14 +1,15 @@
 // shared styles
 .btn,
 .btn-flat {
+  font-weight: 500;
   border: $button-border;
   border-radius: $button-radius;
   display: inline-block;
   height: $button-height;
   line-height: $button-height;
   padding: $button-padding;
-  text-transform: uppercase;
   vertical-align: middle;
+  user-select: none;
   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
@@ -53,14 +54,6 @@
   }
 }
 
-// Shared focus button style
-.btn,
-.btn-floating {
-  &:focus {
-    background-color: darken($button-raised-background, 10%);
-  }
-}
-
 // Raised Button
 .btn {
   text-decoration: none;
@@ -75,6 +68,10 @@
     background-color: $button-raised-background-hover;
     @extend .z-depth-1-half;
   }
+  &:focus {
+    background-color: $button-raised-background-focus;
+    @extend .z-depth-1-half;
+  }
 }
 
 // Floating button
@@ -83,6 +80,10 @@
     background-color: $button-floating-background-hover;
     @extend .z-depth-1-half;
   }
+  &:focus {
+    background-color: $button-floating-background-focus;
+    @extend .z-depth-1-half;
+  }
   &:before {
     border-radius: 0;
   }
@@ -153,6 +154,8 @@ button.btn-floating {
   &.active {
     ul {
       visibility: visible;
+      padding-left: 0;
+      list-style-type: none;    
     }
   }
 
@@ -226,9 +229,10 @@ button.btn-floating {
           height: 100%;
           background-color: transparent;
           box-shadow: none;
-          color: #fff;
+          color: $button-floating-color;
           line-height: $button-floating-large-size;
           z-index: 1;
+
           i {
             line-height: inherit;
           }
@@ -280,9 +284,10 @@ button.btn-floating {
   &:focus,
   &:hover {
     box-shadow: none;
+    background-color: $button-flat-hover-background-color;
   }
   &:focus {
-    background-color: rgba(0, 0, 0, .1);
+    background-color: $button-flat-focus-background-color;
   }
   &.disabled,
   &.btn-flat[disabled]  {

package/sass/components/_cards.scss

@@ -4,17 +4,17 @@
   transition: box-shadow .25s;
   padding: $card-padding;
   margin: $element-top-margin 0 $element-bottom-margin 0;
-  border-radius: 2px;
+  border-radius: 12px;
   @extend .z-depth-1;
   background-color: $card-bg-color;
 }
 
 .card {
   position: relative;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
+  //margin: $element-top-margin 0 $element-bottom-margin 0;
   background-color: $card-bg-color;
   transition: box-shadow .25s;
-  border-radius: 2px;
+  border-radius: 12px;
   @extend .z-depth-1;
 
 
@@ -160,18 +160,23 @@
     &:last-child {
       border-radius: 0 0 2px 2px;
     }
-    background-color: inherit; // Use inherit to inherit color classes
-    border-top: 1px solid rgba(160,160,160,.2);
+
+    border-top: 1px solid $divider-color;
     position: relative;
-    padding: 16px $card-padding;
+    background-color: inherit;
+
+    a {
+      padding: 16px $card-padding;
+      display: inline-block;
+    }
 
     a:not(.btn):not(.btn-large):not(.btn-floating) {
       color: $card-link-color;
-      margin-right: $card-padding;
       transition: color .3s ease;
-      text-transform: uppercase;
 
-      &:hover { color: $card-link-color-light; }
+      &:hover {
+        background-color: $primary-color-hover-opaque;
+      }
     }
   }
 

package/sass/components/_carousel.scss

@@ -57,6 +57,9 @@
   }
 
   .indicators {
+    padding-left: 0;
+    list-style-type: none;
+
     position: absolute;
     text-align: center;
     left: 0;
@@ -66,7 +69,7 @@
 
     .indicator-item {
       &.active {
-        background-color: #fff;
+        background-color: $carousel-indicator-color-active;
       }
 
       display: inline-block;
@@ -75,7 +78,7 @@
       height: 8px;
       width: 8px;
       margin: 24px 4px;
-      background-color: rgba(255,255,255,.5);
+      background-color: $carousel-indicator-color;
 
       transition: background-color .3s;
       border-radius: 50%;

package/sass/components/_chips.scss

@@ -2,14 +2,14 @@
   &:focus {
     outline: none;
     background-color: $chip-selected-color;
-    color: #fff;
+    color: $chip-selected-font-color;
   }
 
   display: inline-block;
   height: 32px;
   font-size: 13px;
   font-weight: 500;
-  color: rgba(0,0,0,.6);
+  color: $chip-font-color;
   line-height: 32px;
   padding: 0 12px;
   border-radius: 16px;
@@ -55,7 +55,7 @@
   input:not([type]):not(.browser-default).input {
     background: none;
     border: 0;
-    color: rgba(0,0,0,.6);
+    color: $input-color;
     display: inline-block;
     font-size: $input-font-size;
     height: $input-height;

package/sass/components/_collapsible.scss

@@ -1,4 +1,7 @@
 .collapsible {
+  padding-left: 0;
+  list-style-type: none;
+
   border-top: 1px solid $collapsible-border-color;
   border-right: 1px solid $collapsible-border-color;
   border-left: 1px solid $collapsible-border-color;
@@ -16,8 +19,8 @@
   -webkit-tap-highlight-color: transparent;
   line-height: 1.5;
   padding: 1rem;
-  background-color: $collapsible-header-color;
   border-bottom: 1px solid $collapsible-border-color;
+  background-color: $collapsible-bg-color;
 
   i {
     width: 2rem;
@@ -27,8 +30,9 @@
     margin-right: 1rem;
   }
 }
+
 .keyboard-focused .collapsible-header:focus {
-  background-color: #eee;
+  background-color: $surface-focus-color-opaque;
 }
 
 .collapsible-body {
@@ -36,6 +40,7 @@
   border-bottom: 1px solid $collapsible-border-color;
   box-sizing: border-box;
   padding: 2rem;
+  background-color: $collapsible-bg-color;
 }
 
 // Sidenav collapsible styling
@@ -46,7 +51,14 @@
     border: none;
     box-shadow: none;
 
-    li { padding: 0; }
+    li {
+      padding: 0;
+    }
+  }
+
+  > li:hover,
+  > li.active {
+    background-color: transparent;
   }
 
   .collapsible-header {
@@ -56,17 +68,17 @@
     height: inherit;
     padding: 0 $sidenav-padding;
 
-    &:hover { background-color: rgba(0,0,0,.05); }
-    i { line-height: inherit; }
+    i {
+      line-height: inherit;
+    }
   }
 
   .collapsible-body {
     border: 0;
-    background-color: $collapsible-header-color;
+    background-color: $collapsible-bg-color;
 
     li a {
-      padding: 0 (7.5px + $sidenav-padding)
-               0 (15px + $sidenav-padding);
+      padding: 0 (7.5px + $sidenav-padding) 0 (15px + $sidenav-padding);
     }
   }
 
@@ -77,12 +89,14 @@
 .collapsible.popout {
   border: none;
   box-shadow: none;
+
   > li {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     // transform: scaleX(.92);
     margin: 0 24px;
     transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
   }
+
   > li.active {
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     margin: 16px 0;

package/sass/components/_collection.scss

@@ -1,6 +1,7 @@
-
 // Collections
 .collection {
+  padding-left: 0;
+  list-style-type: none;
   margin: $element-top-margin 0 $element-bottom-margin 0;
   border: 1px solid $collection-border-color;
   border-radius: $collection-border-radius;
@@ -31,11 +32,12 @@
         display: inline-block;
         vertical-align: middle;
       }
+
       i.circle {
         font-size: 18px;
         line-height: 42px;
-        color: #fff;
-        background-color: #999;
+        color: $collection-avatar-circle-icon-color;
+        background-color: $collection-avatar-circle-bg-color;
         text-align: center;
       }
 
@@ -66,14 +68,16 @@
       color: $collection-active-color;
 
       .secondary-content {
-        color: #fff;
+        color: $font-on-primary-color-main;
       }
     }
   }
-  a.collection-item{
+
+  a.collection-item {
     display: block;
     transition: .25s;
     color: $collection-link-color;
+
     &:not(.active) {
       &:hover {
         background-color: $collection-hover-bg-color;
@@ -87,20 +91,24 @@
       border-bottom: 1px solid $collection-border-color;
       padding: 10px 20px;
     }
+
     .collection-item {
       padding-left: 30px;
     }
+
     .collection-item.avatar {
       padding-left: 72px;
     }
   }
 
 }
+
 // Made less specific to allow easier overriding
 .secondary-content {
   float: right;
-  color: $secondary-color;
+  color: $primary-color;
 }
+
 .collapsible .collection {
   margin: 0;
   border: none;

package/sass/components/_datepicker.scss

@@ -9,6 +9,7 @@
   display: flex;
   flex-direction: column;
   padding: 0;
+  background-color: $surface-color;
 }
 
 .datepicker-controls {
@@ -26,6 +27,7 @@
       &:focus {
         border-bottom: none;
       }
+
       border-bottom: none;
       text-align: center;
       margin: 0;
@@ -43,6 +45,17 @@
   .select-month input {
     width: 80px;
   }
+
+  .month-prev,
+  .month-next {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .month-prev > svg,
+  .month-next > svg {
+    fill: $button-flat-color;
+  }
 }
 
 .month-prev, .month-next {
@@ -56,8 +69,8 @@
 /* Date Display */
 .datepicker-date-display {
   flex: 1 auto;
-  background-color: $secondary-color;
-  color: #fff;
+  background-color: $primary-color;
+  color: $font-on-primary-color-main;
   padding: 20px 22px;
   font-weight: 500;
 
@@ -106,18 +119,20 @@
   }
 
   td {
+    color: $datepicker-day-font-color;
+
     &.is-today {
-      color: $secondary-color;
+      color: $primary-color;
     }
 
     &.is-selected {
-      background-color: $secondary-color;
-      color: #fff;
+      background-color: $primary-color;
+      color: $font-on-primary-color-main;
     }
 
     &.is-outside-current-month,
     &.is-disabled {
-      color: $datepicker-disabled-day-color;
+      color: $datepicker-day-font-color-disabled;
       pointer-events: none;
     }
 
@@ -127,10 +142,6 @@
 }
 
 .datepicker-day-button {
-  &:focus {
-    background-color: $datepicker-day-focus;
-  }
-
   background-color: transparent;
   border: none;
   line-height: 38px;
@@ -140,6 +151,14 @@
   padding: 0 5px;
   cursor: pointer;
   color: inherit;
+
+  &:hover {
+    background-color: $datepicker-day-hover;
+  }
+
+  &:focus {
+    background-color: $datepicker-day-focus;
+  }
 }
 
 
@@ -156,7 +175,7 @@
 .datepicker-clear,
 .datepicker-today,
 .datepicker-done {
-  color: $secondary-color;
+  color: $primary-color;
   padding: 0 1rem;
 }
 

package/sass/components/_dropdown.scss

@@ -1,9 +1,11 @@
 .dropdown-content {
+  padding-left: 0;
+  list-style-type: none;
+
   &:focus {
     outline: 0;
   }
 
-
   @extend .z-depth-1;
   background-color: $dropdown-bg-color;
   margin: 0;
@@ -57,7 +59,7 @@
 
 
     clear: both;
-    color: $off-black;
+    color: $text-color;
     cursor: pointer;
     min-height: $dropdown-item-height;
     line-height: 1.5rem;
@@ -68,7 +70,7 @@
 
 body.keyboard-focused {
   .dropdown-content li:focus {
-    background-color: darken($dropdown-hover-bg-color, 8%);
+    background-color: $dropdown-focus-bg-color;
   }
 }
 
@@ -82,4 +84,4 @@ body.keyboard-focused {
 
 .dropdown-trigger {
   cursor: pointer;
-}
+}