@materializecss/materialize 2.0.3-alpha → 2.0.3-beta

package/sass/components/_global.scss

@@ -78,7 +78,6 @@ a {
 
 .hoverable {
   transition: box-shadow .25s;
-
   &:hover {
     box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
@@ -91,7 +90,6 @@ a {
   background-color: $divider-color;
 }
 
-
 //  Blockquote
 blockquote {
   margin: 20px 0;
@@ -102,29 +100,24 @@ blockquote {
 // Icon Styles
 i {
   line-height: inherit;
-
   &.left {
     float: left;
-    margin-right: 15px;
+    margin-left: -8px;
+    // margin-right: 15px;
   }
-
   &.right {
     float: right;
-    margin-left: 15px;
+    // margin-left: 15px;
   }
-
   &.tiny {
     font-size: 1rem;
   }
-
   &.small {
     font-size: 2rem;
   }
-
   &.medium {
     font-size: 4rem;
   }
-
   &.large {
     font-size: 6rem;
   }
@@ -525,10 +518,8 @@ td, th {
       border-right: 1px solid $table-border-color;
     }
   }
-
 }
 
-
 // Responsive Videos
 .video-container {
   position: relative;
@@ -545,88 +536,6 @@ td, th {
   }
 }
 
-// Progress Bar
-.progress {
-  position: relative;
-  height: 4px;
-  display: block;
-  width: 100%;
-  background-color: $progress-bar-track-color;
-  border-radius: 2px;
-  margin: $element-top-margin 0 $element-bottom-margin 0;
-  overflow: hidden;
-
-  .determinate {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background-color: $progress-bar-color;
-    transition: width .3s linear;
-  }
-
-  .indeterminate {
-    background-color: $progress-bar-color;
-
-    &:before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
-
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      // Custom bezier
-      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
-      animation-delay: 1.15s;
-    }
-  }
-}
-
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-
-
 /*******************
   Utility Classes
 *******************/
@@ -644,12 +553,15 @@ td, th {
 .center, .center-align {
   text-align: center;
 }
+
+// TODO: Remove this
 .left {
   float: left !important;
 }
 .right {
   float: right !important;
 }
+
 // No Text Select
 .no-select {
   user-select: none;

package/sass/components/_preloader.scss

@@ -1,3 +1,88 @@
+// Progress Bar
+.progress {
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+
+  @extend .surface-variant;
+
+  border-radius: 2px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  overflow: hidden;
+
+  .determinate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: $progress-bar-color;
+    transition: width .3s linear;
+  }
+
+  .indeterminate {
+    background-color: $progress-bar-color;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
+
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
+      animation-delay: 1.15s;
+    }
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+
+
 /*
     @license
     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

package/sass/components/_variables.scss

@@ -97,7 +97,7 @@ $button-raised-color: $font-on-primary-color-main !default;
 $button-border: none !default;
 $button-background-focus: $button-raised-background-focus !default;
 $button-font-size: 14px !default;
-$button-icon-font-size: 1.3rem !default;
+$button-icon-font-size: 18px !default;
 $button-height: 40px !default;
 $button-padding: 0 16px !default;
 $button-radius: 4px !default;
@@ -116,6 +116,7 @@ $button-floating-large-size: 56px !default;
 $button-small-font-size: 13px !default;
 $button-small-icon-font-size: 1.2rem !default;
 $button-small-height: $button-height * .75 !default;
+$button-small-padding: 0 8px !default;
 $button-floating-small-size: $button-height * .75 !default;
 
 // Flat buttons
@@ -130,7 +131,7 @@ $button-floating-background-hover: $secondary-color-when-hovered-solid !default;
 $button-floating-background-focus: $secondary-color-when-focused-solid !default;
 $button-floating-color: $font-on-secondary-color-main !default;
 $button-floating-size: 40px !default;
-$button-floating-radius: 50% !default;
+$button-floating-radius: 16px !default;
 
 
 // 4. Cards

package/sass/components/forms/_range.scss

@@ -63,7 +63,7 @@ input[type=range] + .thumb {
 // Shared
 @mixin range-track {
   height: $track-height;
-  background: $range-track-color;
+  @extend .surface-variant;
   border: none;
 }
 

package/sass/components/forms/_switches.scss

@@ -1,6 +1,17 @@
 /* Switch
    ========================================================================== */
 
+.switch {
+  --track-height: 32px;
+  --track-width: 52px;
+  --border-width: 2px;
+  --size-off: 16px;
+  --size-on: 24px;
+  --icon-size: 16px;
+  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
+  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
+}
+
 .switch,
 .switch * {
   -webkit-tap-highlight-color: transparent;
@@ -16,17 +27,22 @@
   width: 0;
   height: 0;
 
+  // CHECKED
+  // Track
   &:checked + .lever{
-    background-color: $switch-track-checked-bg;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
   }
-
+  // Dot
   &:checked + .lever {
     &:before, &:after {
-      left: 18px;
+      top: var(--gap-on);
+      left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
+      width: var(--size-on);
+      height: var(--size-on);
     }
-
     &:after {
-      background-color: $switch-thumb-checked-color;
+      @extend .surface;
     }
   }
 }
@@ -35,30 +51,44 @@
   content: "";
   display: inline-block;
   position: relative;
-  width: 36px;
-  height: 14px;
-  background-color: $switch-track-unchecked-bg;
+  width: var(--track-width);
+  height: var(--track-height);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--md-sys-color-outline);
+
+  //background-color: $switch-track-unchecked-bg;
+  @extend .surface-variant;
+
   border-radius: $switch-radius;
   margin-right: 10px;
   transition: background 0.3s ease;
   vertical-align: middle;
   margin: 0 16px;
 
+  // DOT
   &:before, &:after {
     content: "";
     position: absolute;
     display: inline-block;
-    width: 20px;
-    height: 20px;
+    width: var(--size-off);
+    height: var(--size-off);
     border-radius: 50%;
-    left: 0;
-    top: -3px;
+
+    left: var(--gap-off);
+    top: var(--gap-off);
+
     transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
   }
 
+  // NOT CHECKED [DOT]
   &:after {
-    background-color: $switch-thumb-unchecked-color;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    @extend .outline; 
+    height: var(--size-off);
+    width: var(--size-off);
+
+    //@extend .surface-variant;
+    //box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   }
 }
 

package/src/datepicker.ts

@@ -134,7 +134,7 @@ export interface DatepickerOptions extends BaseOptions {
    * @default null
    */
   onDraw: (() => void) | null;
-  
+
   /** Field used for internal calculations DO NOT CHANGE IT */
   minYear?: any;
   /** Field used for internal calculations DO NOT CHANGE IT */
@@ -261,7 +261,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>) {
     super(el, options, Datepicker);
     (this.el as any).M_Datepicker = this;
-    
+
     this.options = {
       ...Datepicker.defaults,
       ...options
@@ -847,8 +847,8 @@ export class Datepicker extends Component<DatepickerOptions> {
     });
 
     // Add change handlers for select
-    yearSelect.addEventListener('change', () => this._handleYearChange);
-    monthSelect.addEventListener('change', () => this._handleMonthChange);
+    yearSelect.addEventListener('change', this._handleYearChange);
+    monthSelect.addEventListener('change', this._handleMonthChange);
 
     if (typeof this.options.onDraw === 'function') {
       this.options.onDraw.call(this);

package/src/global.ts

@@ -26,7 +26,7 @@ import { Range } from './range';
 import { Utils } from './utils';
 
 export class M {
-  static version = '2.0.3-alpha';
+  static version = '2.0.3-beta';
 
   static Autocomplete: typeof Autocomplete = Autocomplete;
   static Tabs: typeof Tabs = Tabs;

package/src/tooltip.ts

@@ -4,6 +4,8 @@ import { Utils } from "./utils";
 import { Bounding } from "./bounding";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
 
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
 export interface TooltipOptions extends BaseOptions {
   /**
    * Delay time before tooltip disappears.
@@ -15,6 +17,11 @@ export interface TooltipOptions extends BaseOptions {
    * @default 0
    */
   enterDelay: number;
+  /**
+   * Element Id for the tooltip.
+   * @default ""
+   */
+  tooltipId?: string;
   /**
    * Text string for the tooltip.
    * @default ""
@@ -45,7 +52,7 @@ export interface TooltipOptions extends BaseOptions {
    * Set the direction of the tooltip.
    * @default 'bottom'
    */
-  position: 'top' | 'right' | 'bottom' | 'left';
+  position: TooltipPosition;
   /**
    * Amount in px that the tooltip moves during its transition.
    * @default 10
@@ -60,7 +67,7 @@ const _defaults: TooltipOptions = {
   margin: 5,
   inDuration: 250,
   outDuration: 200,
-  position: 'bottom',
+  position: 'bottom' as TooltipPosition,
   transitionMovement: 10,
   opacity: 1
 };
@@ -90,6 +97,7 @@ export class Tooltip extends Component<TooltipOptions> {
 
     this.options = {
       ...Tooltip.defaults,
+      ...this._getAttributeOptions(),
       ...options
     };
     
@@ -139,7 +147,12 @@ export class Tooltip extends Component<TooltipOptions> {
     this.tooltipEl = document.createElement('div');
     this.tooltipEl.classList.add('material-tooltip');
 
-    const tooltipContentEl = document.createElement('div');
+    const tooltipContentEl = this.options.tooltipId 
+      ? document.getElementById(this.options.tooltipId)
+      : document.createElement('div');
+    this.tooltipEl.append( tooltipContentEl);
+    tooltipContentEl.style.display = ""; 
+    
     tooltipContentEl.classList.add('tooltip-content');
     this._setTooltipContent(tooltipContentEl);
     this.tooltipEl.appendChild(tooltipContentEl);
@@ -147,7 +160,9 @@ export class Tooltip extends Component<TooltipOptions> {
   }
 
   _setTooltipContent(tooltipContentEl: HTMLElement) {
-    tooltipContentEl.innerText = this.options.text;
+    if (this.options.tooltipId) 
+      return;
+    tooltipContentEl.innerText = this.options.text;        
   }
 
   _updateTooltipContent() {
@@ -331,16 +346,21 @@ export class Tooltip extends Component<TooltipOptions> {
     this.close();
   }
 
-  _getAttributeOptions() {
-    const attributeOptions = {};
+  _getAttributeOptions(): Partial<TooltipOptions> {    
+    let attributeOptions: Partial<TooltipOptions> = { };
     const tooltipTextOption = this.el.getAttribute('data-tooltip');
+    const tooltipId = this.el.getAttribute('data-tooltip-id');
     const positionOption = this.el.getAttribute('data-position');
     if (tooltipTextOption) {
-      (attributeOptions as any).text = tooltipTextOption;
+      attributeOptions.text = tooltipTextOption;
     }
     if (positionOption) {
-      (attributeOptions as any).position = positionOption;
+      attributeOptions.position = positionOption as TooltipPosition;
+    }
+    if (tooltipId) {
+      attributeOptions.tooltipId = tooltipId;
     }
+
     return attributeOptions;
   }
 }