materialize-sass 1.0.0.alpha4 → 1.0.0.beta

data/assets/javascripts/materialize/tooltip.js

@@ -46,6 +46,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
       _this.isOpen = false;
       _this.isHovered = false;
+      _this.isFocused = false;
       _this._appendTooltipEl();
       _this._setupEventHandlers();
       return _this;
@@ -61,7 +62,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
       value: function destroy() {
         $(this.tooltipEl).remove();
         this._removeEventHandlers();
-        this.$el[0].M_Tooltip = undefined;
+        this.el.M_Tooltip = undefined;
       }
     }, {
       key: '_appendTooltipEl',
@@ -84,16 +85,22 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_setupEventHandlers',
       value: function _setupEventHandlers() {
-        this.handleMouseEnterBound = this._handleMouseEnter.bind(this);
-        this.handleMouseLeaveBound = this._handleMouseLeave.bind(this);
-        this.$el[0].addEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].addEventListener('mouseleave', this.handleMouseLeaveBound);
+        this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
+        this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+        this._handleFocusBound = this._handleFocus.bind(this);
+        this._handleBlurBound = this._handleBlur.bind(this);
+        this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.addEventListener('focus', this._handleFocusBound, true);
+        this.el.addEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: '_removeEventHandlers',
       value: function _removeEventHandlers() {
-        this.$el[0].removeEventListener('mouseenter', this.handleMouseEnterBound);
-        this.$el[0].removeEventListener('mouseleave', this.handleMouseLeaveBound);
+        this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.removeEventListener('focus', this._handleFocusBound, true);
+        this.el.removeEventListener('blur', this._handleBlurBound, true);
       }
     }, {
       key: 'open',
@@ -131,7 +138,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         clearTimeout(this._exitDelayTimeout);
 
         this._exitDelayTimeout = setTimeout(function () {
-          if (_this2.isHovered) {
+          if (_this2.isHovered || _this2.isFocused) {
             return;
           }
 
@@ -151,7 +158,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         clearTimeout(this._enterDelayTimeout);
 
         this._enterDelayTimeout = setTimeout(function () {
-          if (!_this3.isHovered) {
+          if (!_this3.isHovered && !_this3.isFocused) {
             return;
           }
 
@@ -161,7 +168,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
     }, {
       key: '_positionTooltip',
       value: function _positionTooltip() {
-        var origin = this.$el[0],
+        var origin = this.el,
             tooltip = this.tooltipEl,
             originHeight = origin.offsetHeight,
             originWidth = origin.offsetWidth,
@@ -276,12 +283,24 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
         this.isHovered = false;
         this.close();
       }
+    }, {
+      key: '_handleFocus',
+      value: function _handleFocus() {
+        this.isFocused = true;
+        this.open();
+      }
+    }, {
+      key: '_handleBlur',
+      value: function _handleBlur() {
+        this.isFocused = false;
+        this.close();
+      }
     }, {
       key: '_getAttributeOptions',
       value: function _getAttributeOptions() {
         var attributeOptions = {};
-        var tooltipTextOption = this.$el[0].getAttribute('data-tooltip');
-        var positionOption = this.$el[0].getAttribute('data-position');
+        var tooltipTextOption = this.el.getAttribute('data-tooltip');
+        var positionOption = this.el.getAttribute('data-position');
 
         if (tooltipTextOption) {
           attributeOptions.html = tooltipTextOption;

data/assets/stylesheets/materialize/components/_cards.scss

@@ -160,8 +160,9 @@
     &:last-child {
       border-radius: 0 0 2px 2px;
     }
-    position: relative;
+    background-color: inherit; // Use inherit to inherit color classes
     border-top: 1px solid rgba(160,160,160,.2);
+    position: relative;
     padding: 16px $card-padding;
 
     a:not(.btn):not(.btn-large):not(.btn-floating) {

data/assets/stylesheets/materialize/components/_datepicker.scss

@@ -152,6 +152,7 @@
   justify-content: space-between;
 }
 
+.datepicker-cancel,
 .datepicker-clear,
 .datepicker-today,
 .datepicker-done {

data/assets/stylesheets/materialize/components/_tabs.scss

@@ -45,6 +45,12 @@
     text-transform: uppercase;
 
     a {
+      &:focus,
+      &:focus.active {
+        background-color: transparentize($tabs-underline-color, .8);
+        outline: none;
+      }
+
       &:hover,
       &.active {
         background-color: transparent;
@@ -59,7 +65,7 @@
       font-size: 14px;
       text-overflow: ellipsis;
       overflow: hidden;
-      transition: color .28s ease;
+      transition: color .28s ease, background-color .28s ease;
     }
 
     &.disabled a,

data/assets/stylesheets/materialize/components/forms/_input-fields.scss

@@ -193,6 +193,12 @@ textarea.materialize-textarea {
     }
   }
 
+  & > input[type=date]:not(.browser-default) + label,
+  & > input[type=time]:not(.browser-default) + label {
+    transform: translateY(-14px) scale(.8);
+    transform-origin: 0 0;
+  }
+
   .helper-text {
     &::after {
       opacity: 1;
@@ -253,6 +259,7 @@ textarea.materialize-textarea {
 .input-field input[type=search] {
   display: block;
   line-height: inherit;
+  transition: .3s background-color;
 
   .nav-wrapper & {
     height: inherit;
@@ -328,11 +335,6 @@ textarea {
 
 /* Autocomplete */
 .autocomplete-content {
-  margin-top: -1 * $input-margin-bottom;
-  margin-bottom: $input-margin-bottom;
-  opacity: 1;
-  position: static;
-
   li {
     .highlight { color: #444; }
 

data/assets/stylesheets/materialize/components/forms/_select.scss

@@ -13,20 +13,6 @@ select {
   height: $input-height;
 }
 
-
-.input-field {
-  select {
-    display: block;
-    position: absolute;
-    width: 0;
-    pointer-events: none;
-    height: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-  }
-}
-
 .select-label {
   position: absolute;
 }

data/lib/materialize-sass/version.rb

@@ -1,6 +1,6 @@
 module Materialize
   module Sass
-    VERSION = "1.0.0.alpha4"
+    VERSION = "1.0.0.beta"
   end
 end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: materialize-sass
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha4
+  version: 1.0.0.beta
 platform: ruby
 authors:
 - mkhairi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-20 00:00:00.000000000 Z
+date: 2018-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler