mui-sass 0.1.23 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a1f50bb6fce0a5fa8ec77fe010f5ad51c9987baf
-  data.tar.gz: 6c9bb0c7a06f306f98f4dae7ee6fa9f8dae0423a
+  metadata.gz: 28053454a00e1c7a3a64d6fb3a8730d0da3535a9
+  data.tar.gz: a9109a451382a7177256715fa0ff1b016984c2a2
 SHA512:
-  metadata.gz: 9e8ff868a44035519dc827042b44faa5728dea325eec9d52cb5b58528c2ec0bf95946726df9169273f6b3015613bf9ddc82afc39dbf64034a49370501a6bf45c
-  data.tar.gz: 2b8346ba2569b0813d11214fffa0b7e1b74e0190e6ed374af23af067a6c74565df601e9053e44b8801ae9dfd20f49275efe4f28dc9cb50f2b537cb0451335236
+  metadata.gz: b969a6308bb1573e21881f206a59090a214441dc63ede12679e6ff39eea7ca02e6f5d0d68f03e6aa3531dc8fbc9dd83f12cd5603583ae1a3f986d753f96b54c7
+  data.tar.gz: f6f950034f6c81ab533564ae20ff58540b64eceec0fe079846f37b885bd3e85eb59304c5b0cf84ff85612d9d756c472339936cef008107beb3edbd02cafead30

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.2.0 (2015-10-13)
+
+- Update assets to match upstream version
+
+Framework version: MUI v0.2.0
+
 ## 0.1.23 (2015-09-20)
 
 - Update assets to match upstream version

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.1.23'
+    VERSION = '0.2.0'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -23,8 +23,8 @@ var jqLite = require('./lib/jqLite.js'),
     util = require('./lib/util.js'),
     attrKey = 'data-mui-toggle',
     attrSelector = '[data-mui-toggle="dropdown"]',
-    openClass = 'mui-is-open',
-    menuClass = 'mui-dropdown-menu';
+    openClass = 'mui--is-open',
+    menuClass = 'mui-dropdown__menu';
 
 
 /**
@@ -125,108 +125,6 @@ module.exports = {
 };
 
 },{"./lib/jqLite.js":5,"./lib/util.js":6}],3:[function(require,module,exports){
-/**
- * MUI CSS/JS form-control module
- * @module forms/form-control
- */
-
-'use strict';
-
-
-var jqLite = require('../lib/jqLite.js'),
-    util = require('../lib/util.js'),
-    cssSelector = '.mui-form-control',
-    emptyClass = 'mui-empty',
-    notEmptyClass = 'mui-not-empty',
-    dirtyClass = 'mui-dirty',
-    formControlClass = 'mui-form-control',
-    floatingLabelClass = 'mui-form-floating-label';
-
-
-/**
- * Initialize input element.
- * @param {Element} inputEl - The input element.
- */
-function initialize(inputEl) {
-  // check flag
-  if (inputEl._muiFormControl === true) return;
-  else inputEl._muiFormControl = true;
-
-  if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
-  else jqLite.addClass(inputEl, emptyClass);
-
-  jqLite.on(inputEl, 'input', inputHandler);
-
-  // add dirty class on focus
-  jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
-}
-
-
-/**
- * Handle input events.
- */
-function inputHandler() {
-  var inputEl = this;
-
-  if (inputEl.value.length) {
-    jqLite.removeClass(inputEl, emptyClass);
-    jqLite.addClass(inputEl, notEmptyClass);
-  } else {
-    jqLite.removeClass(inputEl, notEmptyClass);
-    jqLite.addClass(inputEl, emptyClass)
-  }
-
-  jqLite.addClass(inputEl, dirtyClass);
-}
-
-
-/** Define module API */
-module.exports = {
-  /** Initialize input elements */
-  initialize: initialize,
-  
-  /** Initialize module listeners */
-  initListeners: function() {
-    var doc = document;
-    
-    // markup elements available when method is called
-    var elList = doc.querySelectorAll(cssSelector);
-    for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
-
-    // listen for new elements
-    util.onNodeInserted(function(el) {
-      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
-    });
-
-    // add transition css for floating labels
-    setTimeout(function() {
-      var css = '.' + floatingLabelClass + '{' + [
-        '-webkit-transition',
-        '-moz-transition',
-        '-o-transition',
-        'transition',
-        ''
-      ].join(':all .15s ease-out;') + '}';
-      
-      util.loadStyle(css);
-    }, 150);
-
-    // pointer-events shim for floating labels
-    if (util.supportsPointerEvents() === false) {
-      jqLite.on(document, 'click', function(ev) {
-        var targetEl = ev.target;
-
-        if (targetEl.tagName === 'LABEL' &&
-            jqLite.hasClass(targetEl, floatingLabelClass)) {
-          var inputEl = targetEl.previousElementSibling;
-          if (jqLite.hasClass(inputEl, formControlClass)) inputEl.focus();
-        }
-      });
-    }
-  }
-};
-
-},{"../lib/jqLite.js":5,"../lib/util.js":6}],4:[function(require,module,exports){
 /**
  * MUI CSS/JS select module
  * @module forms/select
@@ -239,7 +137,7 @@ var jqLite = require('../lib/jqLite.js'),
     util = require('../lib/util.js'),
     wrapperClass = 'mui-select',
     cssSelector = '.mui-select > select',
-    menuClass = 'mui-select-menu',
+    menuClass = 'mui-select__menu',
     optionHeight = 42,  // from CSS
     menuPadding = 8,  // from CSS
     doc = document,
@@ -589,6 +487,108 @@ module.exports = {
   }
 };
 
+},{"../lib/jqLite.js":5,"../lib/util.js":6}],4:[function(require,module,exports){
+/**
+ * MUI CSS/JS form-control module
+ * @module forms/form-control
+ */
+
+'use strict';
+
+
+var jqLite = require('../lib/jqLite.js'),
+    util = require('../lib/util.js'),
+    cssSelector = '.mui-textfield__input',
+    emptyClass = 'mui--is-empty',
+    notEmptyClass = 'mui--is-not-empty',
+    dirtyClass = 'mui--is-dirty',
+    formControlClass = 'mui-textfield__input',
+    floatingLabelClass = 'mui-textfield__label--floating';
+
+
+/**
+ * Initialize input element.
+ * @param {Element} inputEl - The input element.
+ */
+function initialize(inputEl) {
+  // check flag
+  if (inputEl._muiTextfield === true) return;
+  else inputEl._muiTextfield = true;
+
+  if (inputEl.value.length) jqLite.addClass(inputEl, notEmptyClass);
+  else jqLite.addClass(inputEl, emptyClass);
+
+  jqLite.on(inputEl, 'input', inputHandler);
+
+  // add dirty class on focus
+  jqLite.on(inputEl, 'focus', function(){jqLite.addClass(this, dirtyClass);});
+}
+
+
+/**
+ * Handle input events.
+ */
+function inputHandler() {
+  var inputEl = this;
+
+  if (inputEl.value.length) {
+    jqLite.removeClass(inputEl, emptyClass);
+    jqLite.addClass(inputEl, notEmptyClass);
+  } else {
+    jqLite.removeClass(inputEl, notEmptyClass);
+    jqLite.addClass(inputEl, emptyClass)
+  }
+
+  jqLite.addClass(inputEl, dirtyClass);
+}
+
+
+/** Define module API */
+module.exports = {
+  /** Initialize input elements */
+  initialize: initialize,
+  
+  /** Initialize module listeners */
+  initListeners: function() {
+    var doc = document;
+    
+    // markup elements available when method is called
+    var elList = doc.querySelectorAll(cssSelector);
+    for (var i=elList.length - 1; i >= 0; i--) initialize(elList[i]);
+
+    // listen for new elements
+    util.onNodeInserted(function(el) {
+      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') initialize(el);
+    });
+
+    // add transition css for floating labels
+    setTimeout(function() {
+      var css = '.' + floatingLabelClass + '{' + [
+        '-webkit-transition',
+        '-moz-transition',
+        '-o-transition',
+        'transition',
+        ''
+      ].join(':all .15s ease-out;') + '}';
+      
+      util.loadStyle(css);
+    }, 150);
+
+    // pointer-events shim for floating labels
+    if (util.supportsPointerEvents() === false) {
+      jqLite.on(document, 'click', function(ev) {
+        var targetEl = ev.target;
+
+        if (targetEl.tagName === 'LABEL' &&
+            jqLite.hasClass(targetEl, floatingLabelClass)) {
+          var inputEl = targetEl.previousElementSibling;
+          if (jqLite.hasClass(inputEl, formControlClass)) inputEl.focus();
+        }
+      });
+    }
+  }
+};
+
 },{"../lib/jqLite.js":5,"../lib/util.js":6}],5:[function(require,module,exports){
 /**
  * MUI CSS/JS jqLite module
@@ -1152,7 +1152,7 @@ module.exports = {
   // load dependencies
   var jqLite = require('./lib/jqLite.js'),
       util = require('./lib/util.js'),
-      formControl = require('./forms/form-control.js'),
+      textfield = require('./forms/textfield.js'),
       select = require('./forms/select.js'),
       ripple = require('./ripple.js'),
       dropdowns = require('./dropdowns.js'),
@@ -1167,7 +1167,7 @@ module.exports = {
   
   // init libraries
   jqLite.ready(function() {
-    formControl.initListeners();
+    textfield.initListeners();
     select.initListeners();
     ripple.initListeners();
     dropdowns.initListeners();
@@ -1175,7 +1175,7 @@ module.exports = {
   });
 })(window);
 
-},{"./dropdowns.js":2,"./forms/form-control.js":3,"./forms/select.js":4,"./lib/jqLite.js":5,"./lib/util.js":6,"./overlay.js":8,"./ripple.js":9,"./tabs.js":10}],8:[function(require,module,exports){
+},{"./dropdowns.js":2,"./forms/select.js":3,"./forms/textfield.js":4,"./lib/jqLite.js":5,"./lib/util.js":6,"./overlay.js":8,"./ripple.js":9,"./tabs.js":10}],8:[function(require,module,exports){
 /**
  * MUI CSS/JS overlay module
  * @module overlay
@@ -1186,8 +1186,8 @@ module.exports = {
 
 var util = require('./lib/util.js'),
     jqLite = require('./lib/jqLite.js'),
-    bodyClass = 'mui-overlay-on',
     overlayId = 'mui-overlay',
+    bodyClass = 'mui--overflow-hidden',
     iosRegex = /(iPad|iPhone|iPod)/g;
 
 
@@ -1378,8 +1378,7 @@ module.exports = overlayFn;
 var jqLite = require('./lib/jqLite.js'),
     util = require('./lib/util.js'),
     btnClass = 'mui-btn',
-    btnStyleKey = 'data-mui-style',
-    btnFloatingClass = 'mui-btn-floating',
+    btnFABClass = 'mui-btn--fab',
     rippleClass = 'mui-ripple-effect',
     animationName = 'mui-btn-inserted';
 
@@ -1435,13 +1434,8 @@ function eventHandler(ev) {
       radius;
 
   // get height
-  // TODO: remove class check
-  if (jqLite.hasClass(buttonEl, btnFloatingClass) || 
-      buttonEl.getAttribute(btnStyleKey) === 'fab') {
-    diameter = offset.height / 2;
-  } else {
-    diameter = offset.height;
-  }
+  if (jqLite.hasClass(buttonEl, btnFABClass)) diameter = offset.height / 2;
+  else diameter = offset.height;
 
   radius = diameter / 2;
   
@@ -1491,7 +1485,7 @@ var jqLite = require('./lib/jqLite.js'),
     attrKey = 'data-mui-toggle',
     attrSelector = '[' + attrKey + '="tab"]',
     controlsAttrKey = 'data-mui-controls',
-    activeClass = 'mui-is-active',
+    activeClass = 'mui--is-active',
     showstartKey = 'mui.tabs.showstart',
     showendKey = 'mui.tabs.showend',
     hidestartKey = 'mui.tabs.hidestart',
@@ -1547,6 +1541,9 @@ function activateTab(currToggleEl) {
       ev2,
       cssSelector;
 
+  // exit if already active
+  if (jqLite.hasClass(currTabEl, activeClass)) return;
+
   // raise error if pane doesn't exist
   if (!currPaneEl) util.raiseError('Tab pane "' + currPaneId + '" not found');
 

data/vendor/assets/stylesheets/mui/_appbar.scss

@@ -6,7 +6,7 @@
 // HELPER CLASSES
 // ============================================================================
 
-.mui-appbar-height {
+.mui--appbar-height {
   height: $mui-appbar-height-xs-portrait;
 
   // mobile landscape
@@ -19,7 +19,7 @@
   }
 }
 
-.mui-appbar-min-height {
+.mui--appbar-min-height {
   min-height: $mui-appbar-height-xs-portrait;
 
   // mobile landscape
@@ -32,7 +32,7 @@
   }
 }
 
-.mui-appbar-line-height {
+.mui--appbar-line-height {
   line-height: $mui-appbar-height-xs-portrait;
 
   // mobile landscape
@@ -45,7 +45,7 @@
   }
 }
 
-.mui-appbar-top {
+.mui--appbar-top {
   top: $mui-appbar-height-xs-portrait;
 
   // mobile landscape
@@ -65,7 +65,7 @@
 // APPBAR
 // ============================================================================
 .mui-appbar {
-  @extend .mui-appbar-min-height;
+  @extend .mui--appbar-min-height;
 
   background-color: $mui-appbar-bg-color;
   color: $mui-appbar-font-color;

data/vendor/assets/stylesheets/mui/_buttons.scss

@@ -51,6 +51,7 @@ $mui-btn-box-shadow-active:
   white-space: nowrap;
   user-select: none;
   font-size: $mui-btn-font-size;
+  letter-spacing: 0.03em;
 
   // For ripples
   position: relative;
@@ -74,7 +75,7 @@ $mui-btn-box-shadow-active:
   }
   
   &:disabled,
-  &.mui-is-disabled {
+  &.mui--is-disabled {
     cursor: $mui-cursor-disabled;
     pointer-events: none;
     opacity: 0.60;
@@ -89,7 +90,7 @@ $mui-btn-box-shadow-active:
 
 
 // ============================================================================
-// BUTTON-STYLES
+// BUTTON-TYPES
 // ============================================================================
 
 
@@ -97,8 +98,7 @@ $mui-btn-box-shadow-active:
 // FLAT
 // ----------------------------------------------------------------------------
 
-.mui-btn-flat,
-.mui-btn[data-mui-style="flat"] {
+.mui-btn--flat {
   background-color: $mui-btn-flat-bg-color;
 
   &:hover,
@@ -114,8 +114,7 @@ $mui-btn-box-shadow-active:
 // RAISED
 // ----------------------------------------------------------------------------
 
-.mui-btn-raised,
-.mui-btn[data-mui-style="raised"] {
+.mui-btn--raised {
   box-shadow: $mui-btn-box-shadow-raised;
 
   &:active {
@@ -128,9 +127,8 @@ $mui-btn-box-shadow-active:
 // FLOATING-ACTION-BUTTON-(FAB)
 // ----------------------------------------------------------------------------
 
-.mui-btn-floating,
-.mui-btn[data-mui-style="fab"] {
-  @extend .mui-btn-raised;
+.mui-btn--fab {
+  @extend .mui-btn--raised;
 
   // Layout
   position: relative;
@@ -145,11 +143,10 @@ $mui-btn-box-shadow-active:
 
 
 // ============================================================================
-// BUTTON-COLORS
+// BUTTON-STYLES
 // ============================================================================
 
-.mui-btn-primary,
-.mui-btn[data-mui-color="primary"] {
+.mui-btn--primary {
   @include button-variant(
     $mui-btn-primary-font-color,
     $mui-btn-primary-bg-color);
@@ -158,7 +155,7 @@ $mui-btn-box-shadow-active:
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn[data-mui-color="dark"] {
+.mui-btn--dark {
   @include button-variant(
     $mui-btn-dark-font-color,
     $mui-btn-dark-bg-color);
@@ -167,8 +164,7 @@ $mui-btn-box-shadow-active:
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn-danger,
-.mui-btn[data-mui-color="danger"] {
+.mui-btn--danger {
   @include button-variant(
     $mui-btn-danger-font-color,
     $mui-btn-danger-bg-color);
@@ -177,8 +173,7 @@ $mui-btn-box-shadow-active:
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn-accent,
-.mui-btn[data-mui-color="accent"] {
+.mui-btn--accent {
   @include button-variant(
     $mui-btn-accent-font-color,
     $mui-btn-accent-bg-color);
@@ -193,29 +188,27 @@ $mui-btn-box-shadow-active:
 // BUTTON-SIZES
 // ============================================================================
 
-.mui-btn[data-mui-size="small"] {
+.mui-btn--small {
   height: $mui-btn-height-sm;
   line-height: $mui-btn-height-sm;
   padding: 0 $mui-btn-padding-horizontal-sm;
   font-size: $mui-btn-font-size-sm;
 }
 
-.mui-btn-lg,
-.mui-btn[data-mui-size="large"] {
+.mui-btn--large {
   height: $mui-btn-height-lg;
   line-height: $mui-btn-height-lg;
   padding: 0 $mui-btn-padding-horizontal-lg;
   font-size: $mui-btn-font-size-lg;
 }
 
-.mui-btn-floating-mini,
-.mui-btn[data-mui-size="small"][data-mui-style="fab"] {
+.mui-btn--fab.mui-btn--small {
   width: $mui-btn-fab-diameter-sm;
   height: $mui-btn-fab-diameter-sm;
   line-height: $mui-btn-fab-diameter-sm;
 }
 
-.mui-btn[data-mui-size="large"][data-mui-style="fab"] {
+.mui-btn--fab.mui-btn--large {
   width: $mui-btn-fab-diameter-lg;
   height: $mui-btn-fab-diameter-lg;
   line-height: $mui-btn-fab-diameter-lg;