mui-sass 0.1.21.1 → 0.1.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0e4f307757b516b7d5a0d38c91dcfb27d513ad92
-  data.tar.gz: 125e0112d71c40f2089307fc641c5d5a4390f085
+  metadata.gz: edd408bf90b060770c312c4b0b1697efcb3e5d6c
+  data.tar.gz: 8b3daa8a3bad0454a2ee24ea79c1d1c28595b580
 SHA512:
-  metadata.gz: 3278d7273b5ad6d672c2f8c0876df3a67a494c8fa4e0c18cf9f7a85cff3ccfed2034d48dedab644a8f62d3417d2eb6a63f94392651234659c9c2d3412686a70b
-  data.tar.gz: 3ea917949c02b8a9e24ead6bf9657553d199d3608b37517a00604af6af6ddfc455f1105452b4894aaaa4edffaaf9f08d8ff7dda56653ecb990d1758e7b859e56
+  metadata.gz: 8206db09bd6da4fb02b75222ba49bd43d0719a28fe01b157f799b1d526016bf9415ed4b3860c9cc5d925d417d908ee383410b1cf034600bfa2162fafa8c6c0c8
+  data.tar.gz: 534f6a68045c59464db5fe290bb12b742bc8002076da798a1521c2e6907fcdeff5877ddf69c8ac42830bce4a838ee7090f00ae2bb8cf251385ccbb2e3a43cfaf

data/.travis.yml

@@ -3,8 +3,8 @@ language: ruby
 rvm:
   - 1.9.3
   - 2.0.0
-  - 2.1.6
-  - 2.2.2
+  - 2.1.7
+  - 2.2.3
 
 before_install: gem install bundler
 

data/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.22 (2015-09-18)
+
+- Update assets to match upstream version
+
+Framework version: MUI v0.1.22
+
 ## 0.1.21.1 (2015-08-24)
 
 - Bug Fix: Include proper main JavaScript file
@@ -6,12 +12,15 @@ Framework version: MUI v0.1.21
 
 ## 0.1.21 (2015-08-06)
 
+- Update assets to match upstream version
 - Update gem's description
 
 Framework version: MUI v0.1.21
 
 ## 0.1.20 (2015-08-05)
 
+- Update assets to match upstream version
+
 Framework version: MUI v0.1.20
 
 ## 0.1.19 (2015-07-28)

data/README.md

@@ -3,11 +3,11 @@
 [![Gem Version](https://badge.fury.io/rb/mui-sass.svg)](http://badge.fury.io/rb/mui-sass)
 [![Build Status](https://travis-ci.org/rubysamurai/mui-sass.svg?branch=master)](https://travis-ci.org/rubysamurai/mui-sass)
 
-`mui-sass` is a Sass-powered version of [MUI framework](https://www.muicss.com/) for your Ruby applications. It works with Ruby on Rails, Compass, Sprockets, etc.
+[MUI](https://www.muicss.com/) is a lightweight CSS framework that follows Google's Material Design guidelines
 
-## Installation
+`mui-sass` is a Sass-powered version of MUI framework for your applications. It works with Ruby on Rails, Compass, Sprockets, etc. 
 
-This package provides MUI framework CSS and JavaScript components. HTML Email, React, WebComponents and Design Files are not included.
+`mui-sass` allows to include MUI framework CSS and JavaScript components. HTML Email, React, WebComponents and Design Files are not included.
 
 ## Installation
 
@@ -16,30 +16,30 @@ This package provides MUI framework CSS and JavaScript components. HTML Email, R
 
 ### Ruby on Rails
 
-Add this line to your Rails application's Gemfile:
+Open your Rails application's Gemfile and add this line:
 
 ```ruby
 gem 'mui-sass'
 ```
 
-And then execute `bundle` command to install.
+Save Gemfile and execute `bundle` command to install the gem.
 
-Import `mui` in `app/assets/stylesheets/application.scss`:
+Open `app/assets/stylesheets/application.scss` file and add this line:
 
 ```scss
 @import 'mui';
 ```
 
-Default Rails installation comes with `.css` file extension for stylesheet assests files, make sure you change it to `.scss` and remove all the `//= require` and `//= require_tree` statements from file.
-
-Alternatively, to keep original `application.css` file, you can create `custom.scss` file in same folder and import `mui` there.
+> **Note:** Default Rails installation comes with `.css` file extension for stylesheet assests files, make sure you change it to `.scss` and remove all the `*= require_tree .` and `*= require_self` statements from file. Alternatively, to keep original `application.css` file, you can create `custom.scss` file in the same folder and import `mui` there.
 
-Require `mui` javascript in `app/assets/javascripts/application.js`:
+Open `app/assets/javascripts/application.js` file and add this line:
 
 ````
 //= require mui
 ````
 
+Restart Rails web server if it was running and now your Rails application is powered by Sass version of MUI framework.
+
 ### Compass
 
 To use Compass extension you'll need to install `mui-sass` gem:
@@ -84,7 +84,7 @@ This command will create a new Compass project with `styles.scss` file, which im
 
 By default, using `@import 'mui';` and `//= require mui`, all of MUI components are imported.
 
-You can import individual `scss` components like this:
+You can also import individual Sass components.
 
 First you need to include core components:
 
@@ -95,7 +95,8 @@ First you need to include core components:
 @import 'mui/mixins';
 ```
 
-Then add component:
+Then include desired Sass component:
+
 ```scss
 @import 'mui/appbar';
 @import 'mui/buttons';
@@ -115,8 +116,29 @@ Then add component:
 @import 'mui/typography';
 ```
 
-The full set of MUI variables can be found [here](https://github.com/rubysamurai/mui-sass/blob/master/vendor/assets/stylesheets/mui/_variables.scss)
+### Variables
+
+Sass version of MUI framework provides many variables to make customization process convenient. The full set of MUI variables can be found [here](https://github.com/rubysamurai/mui-sass/blob/master/vendor/assets/stylesheets/mui/_variables.scss)
+
+To override the variable it must be redefined before the @import directive, like this:
+
+```scss
+$mui-base-font-size: 16px !default;
+@import 'mui';
+```
+
+## Versioning
+
+MUI for Sass follows the upstream version of MUI framework. But last version number may be ahead, in case there is a need to release project specific changes.
+
+Please always refer to the [CHANGELOG](https://github.com/rubysamurai/mui-sass/blob/master/CHANGELOG.md) when upgrading.
 
 ## Contributing
 
-Fork the project and submit a pull request.
+Anyone is welcome to contribute to MUI Sass. Please [raise an issue](https://github.com/rubysamurai/mui-sass/issues), fork the project, make changes to your forked repository and submit a pull request.
+
+## License
+
+MUI © Andres Morey, 2015. Released under the [MIT](https://github.com/muicss/mui/blob/master/LICENSE.txt) license.
+
+`mui-sass` © Dmitriy Tarasov, 2015. Released under the [MIT](https://github.com/rubysamurai/mui-sass/blob/master/LICENSE.txt) license.

data/lib/mui/sass/version.rb

@@ -1,5 +1,5 @@
 module Mui
   module Sass
-    VERSION = '0.1.21.1'
+    VERSION = '0.1.22'
   end
 end

data/vendor/assets/javascripts/mui.js

@@ -23,7 +23,7 @@ var jqLite = require('./lib/jqLite.js'),
     util = require('./lib/util.js'),
     attrKey = 'data-mui-toggle',
     attrSelector = '[data-mui-toggle="dropdown"]',
-    openClass = 'mui-open',
+    openClass = 'mui-is-open',
     menuClass = 'mui-dropdown-menu';
 
 
@@ -1087,14 +1087,23 @@ function callbackFn(instance, funcName) {
  * @param {String} eventType - The event type.
  * @param {Boolean} bubbles=true - If true, event bubbles.
  * @param {Boolean} cancelable=true = If true, event is cancelable
+ * @param {Object} [data] - Data to add to event object
  */
-function dispatchEventFn(element, eventType, bubbles, cancelable) {
+function dispatchEventFn(element, eventType, bubbles, cancelable, data) {
   var ev = document.createEvent('HTMLEvents'),
       bubbles = (bubbles !== undefined) ? bubbles : true,
-      cancelable = (cancelable !== undefined) ? cancelable : true;
+      cancelable = (cancelable !== undefined) ? cancelable : true,
+      k;
   
   ev.initEvent(eventType, bubbles, cancelable);
-  element.dispatchEvent(ev);
+
+  // add data to event object
+  if (data) for (k in data) ev[k] = data[k];
+
+  // dispatch
+  if (element) element.dispatchEvent(ev);
+
+  return ev;
 }
 
 
@@ -1369,7 +1378,7 @@ module.exports = overlayFn;
 var jqLite = require('./lib/jqLite.js'),
     util = require('./lib/util.js'),
     btnClass = 'mui-btn',
-    btnFlatClass = 'mui-btn-flat',
+    btnStyleKey = 'data-mui-style',
     btnFloatingClass = 'mui-btn-floating',
     rippleClass = 'mui-ripple-effect',
     animationName = 'mui-btn-inserted';
@@ -1426,7 +1435,9 @@ function eventHandler(ev) {
       radius;
 
   // get height
-  if (jqLite.hasClass(buttonEl, btnFloatingClass)) {
+  // TODO: remove class check
+  if (jqLite.hasClass(buttonEl, btnFloatingClass) || 
+      buttonEl.getAttribute(btnStyleKey) === 'fab') {
     diameter = offset.height / 2;
   } else {
     diameter = offset.height;
@@ -1480,7 +1491,11 @@ var jqLite = require('./lib/jqLite.js'),
     attrKey = 'data-mui-toggle',
     attrSelector = '[' + attrKey + '="tab"]',
     controlsAttrKey = 'data-mui-controls',
-    activeClass = 'mui-active';
+    activeClass = 'mui-is-active',
+    showstartKey = 'mui.tabs.showstart',
+    showendKey = 'mui.tabs.showend',
+    hidestartKey = 'mui.tabs.hidestart',
+    hideendKey = 'mui.tabs.hideend';
 
 
 /**
@@ -1510,10 +1525,7 @@ function clickHandler(ev) {
   // exit if toggle element is disabled
   if (toggleEl.getAttribute('disabled') !== null) return;
 
-  // let event bubble before toggling tab
-  setTimeout(function() {
-    if (!ev.defaultPrevented) activateTab(toggleEl);
-  }, 0);
+  activateTab(toggleEl);
 }
 
 
@@ -1521,35 +1533,76 @@ function clickHandler(ev) {
  * Activate the tab controlled by the toggle element.
  * @param {Element} toggleEl - The toggle element.
  */
-function activateTab(toggleEl) {
-  var tabEl = toggleEl.parentNode,
-      paneId = toggleEl.getAttribute(controlsAttrKey),
-      paneEl = document.getElementById(paneId),
-      tabs,
-      panes,
-      el,
-      i;
+function activateTab(currToggleEl) {
+  var currTabEl = currToggleEl.parentNode,
+      currPaneId = currToggleEl.getAttribute(controlsAttrKey),
+      currPaneEl = document.getElementById(currPaneId),
+      prevTabEl,
+      prevPaneEl,
+      prevPaneId,
+      prevToggleEl,
+      currData,
+      prevData,
+      ev1,
+      ev2,
+      cssSelector;
 
   // raise error if pane doesn't exist
-  if (!paneEl) util.raiseError('Tab pane "' + paneId + '" not found');
+  if (!currPaneEl) util.raiseError('Tab pane "' + currPaneId + '" not found');
 
-  // de-activate tab siblings
-  tabs = tabEl.parentNode.children;
-  for (i=tabs.length - 1; i >= 0; i--) {
-    el = tabs[i];
-    if (el !== tabEl) jqLite.removeClass(el, activeClass);
-  }
-  
-  // de-activate pane siblings
-  panes = paneEl.parentNode.children;
-  for (i=panes.length - 1; i >= 0; i--) {
-    el = panes[i];
-    if (el !== paneEl) jqLite.removeClass(el, activeClass);
+  // get previous pane
+  prevPaneEl = getActiveSibling(currPaneEl);
+  prevPaneId = prevPaneEl.id;
+
+  // get previous toggle and tab elements
+  cssSelector = '[' + controlsAttrKey + '="' + prevPaneId + '"]';
+  prevToggleEl = document.querySelectorAll(cssSelector)[0];
+  prevTabEl = prevToggleEl.parentNode;
+
+  // define event data
+  currData = {paneId: currPaneId, relatedPaneId: prevPaneId};
+  prevData = {paneId: prevPaneId, relatedPaneId: currPaneId};
+
+  // dispatch 'hidestart', 'showstart' events
+  ev1 = util.dispatchEvent(prevToggleEl, hidestartKey, true, true, prevData);
+  ev2 = util.dispatchEvent(currToggleEl, showstartKey, true, true, currData);
+
+  // let events bubble
+  setTimeout(function() {
+    // exit if either event was canceled
+    if (ev1.defaultPrevented || ev2.defaultPrevented) return;
+
+    // de-activate previous
+    if (prevTabEl) jqLite.removeClass(prevTabEl, activeClass);
+    if (prevPaneEl) jqLite.removeClass(prevPaneEl, activeClass);
+
+    // activate current
+    jqLite.addClass(currTabEl, activeClass);
+    jqLite.addClass(currPaneEl, activeClass);
+
+    // dispatch 'hideend', 'showend' events
+    util.dispatchEvent(prevToggleEl, hideendKey, true, false, prevData);
+    util.dispatchEvent(currToggleEl, showendKey, true, false, currData);
+  }, 0);
+}
+
+
+/** 
+ * Get previous active sibling.
+ * @param {Element} el - The anchor element.
+ */
+function getActiveSibling(el) {
+  var elList = el.parentNode.children,
+      q = elList.length,
+      activeEl = null,
+      tmpEl;
+
+  while (q-- && !activeEl) {
+    tmpEl = elList[q];
+    if (tmpEl !== el && jqLite.hasClass(tmpEl, activeClass)) activeEl = tmpEl
   }
-  
-  // activate tab and pane
-  jqLite.addClass(tabEl, activeClass);
-  jqLite.addClass(paneEl, activeClass);
+
+  return activeEl;
 }
 
 

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

@@ -13,13 +13,21 @@ $mui-btn-box-shadow-active:
 
 
 // ============================================================================
-// MAIN-BUTTON-CLASS
+// DEFAULT-BUTTON
 // ============================================================================
 
 .mui-btn {
   @include mui-node-inserted();
   @include mui-text("button");
 
+  @include button-variant(
+    $mui-btn-default-font-color,
+    $mui-btn-default-bg-color);
+
+  @include button-flat-variant(
+    $mui-btn-default-font-color,
+    $mui-btn-flat-bg-color-hover);
+
   transition: all 0.2s ease-in-out;
   
   // Layout
@@ -42,6 +50,7 @@ $mui-btn-box-shadow-active:
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
+  font-size: $mui-btn-font-size;
 
   // For ripples
   position: relative;
@@ -65,7 +74,7 @@ $mui-btn-box-shadow-active:
   }
   
   &:disabled,
-  &.mui-disabled {
+  &.mui-is-disabled {
     cursor: $mui-cursor-disabled;
     pointer-events: none;
     opacity: 0.60;
@@ -80,21 +89,16 @@ $mui-btn-box-shadow-active:
 
 
 // ============================================================================
-// BUTTON-SIZES
+// BUTTON-STYLES
 // ============================================================================
 
-.mui-btn-lg {
-  height: $mui-btn-height-lg;
-  line-height: $mui-btn-height-lg;
-}
 
+// ----------------------------------------------------------------------------
+// FLAT
+// ----------------------------------------------------------------------------
 
-
-// ============================================================================
-// FLAT-BUTTONS
-// ============================================================================
-
-.mui-btn-flat {
+.mui-btn-flat,
+.mui-btn[data-mui-style="flat"] {
   background-color: $mui-btn-flat-bg-color;
 
   &:hover,
@@ -106,12 +110,12 @@ $mui-btn-box-shadow-active:
 }
 
 
+// ----------------------------------------------------------------------------
+// RAISED
+// ----------------------------------------------------------------------------
 
-// ============================================================================
-// RAISED-BUTTONS
-// ============================================================================
-
-.mui-btn-raised {
+.mui-btn-raised,
+.mui-btn[data-mui-style="raised"] {
   box-shadow: $mui-btn-box-shadow-raised;
 
   &:active {
@@ -120,30 +124,51 @@ $mui-btn-box-shadow-active:
 }
 
 
+// ----------------------------------------------------------------------------
+// FLOATING-ACTION-BUTTON-(FAB)
+// ----------------------------------------------------------------------------
+
+.mui-btn-floating,
+.mui-btn[data-mui-style="fab"] {
+  @extend .mui-btn-raised;
+
+  // Layout
+  position: relative;
+  padding: 0;
+  width: $mui-btn-fab-diameter;
+  height: $mui-btn-fab-diameter;
+  line-height: $mui-btn-fab-diameter;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+
 
 // ============================================================================
 // BUTTON-COLORS
 // ============================================================================
 
-.mui-btn-default {
+.mui-btn-primary,
+.mui-btn[data-mui-color="primary"] {
   @include button-variant(
-    $mui-btn-default-font-color,
-    $mui-btn-default-bg-color);
+    $mui-btn-primary-font-color,
+    $mui-btn-primary-bg-color);
   @include button-flat-variant(
-    $mui-btn-default-font-color,
+    $mui-btn-primary-bg-color,
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn-primary {
+.mui-btn[data-mui-color="dark"] {
   @include button-variant(
-    $mui-btn-primary-font-color,
-    $mui-btn-primary-bg-color);
+    $mui-btn-dark-font-color,
+    $mui-btn-dark-bg-color);
   @include button-flat-variant(
-    $mui-btn-primary-bg-color,
+    $mui-btn-dark-bg-color,
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn-danger {
+.mui-btn-danger,
+.mui-btn[data-mui-color="danger"] {
   @include button-variant(
     $mui-btn-danger-font-color,
     $mui-btn-danger-bg-color);
@@ -152,7 +177,8 @@ $mui-btn-box-shadow-active:
     $mui-btn-flat-bg-color-hover);
 }
 
-.mui-btn-accent {
+.mui-btn-accent,
+.mui-btn[data-mui-color="accent"] {
   @include button-variant(
     $mui-btn-accent-font-color,
     $mui-btn-accent-bg-color);
@@ -164,38 +190,33 @@ $mui-btn-box-shadow-active:
 
 
 // ============================================================================
-// FLOATING-BUTTON
+// BUTTON-SIZES
 // ============================================================================
 
-.mui-btn-floating {
-  @extend .mui-btn-raised;
-
-  position: relative;
-  z-index: 1;
-  width: 55px;
-  height: 55px;
-  line-height: 55px;
-  padding: 0;
-  border-radius: 50%;
-  color: $mui-btn-floating-font-color;
-  background-color: $mui-btn-floating-bg-color;
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: $mui-btn-floating-font-color;
-    background-color: lighten($mui-btn-floating-bg-color, 5%);
-  }
+.mui-btn[data-mui-size="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"] {
+  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"] {
+  width: $mui-btn-fab-diameter-sm;
+  height: $mui-btn-fab-diameter-sm;
+  line-height: $mui-btn-fab-diameter-sm;
+}
 
-// ============================================================================
-// FLOATING-BUTTON-SIZES
-// ============================================================================
-
-.mui-btn-floating-mini {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
+.mui-btn[data-mui-size="large"][data-mui-style="fab"] {
+  width: $mui-btn-fab-diameter-lg;
+  height: $mui-btn-fab-diameter-lg;
+  line-height: $mui-btn-fab-diameter-lg;
 }

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

@@ -42,7 +42,7 @@
   background-clip: padding-box;
 
   // open state
-  &.mui-open {
+  &.mui-is-open {
     display: block;
   }
   
@@ -65,7 +65,7 @@
     }
   }
 
-  > .mui-disabled > a {
+  > .mui-is-disabled > a {
     &,
     &:hover,
     &:focus {
@@ -84,7 +84,8 @@
 }
 
 // right align
-.mui-dropdown-menu-right {
+.mui-dropdown-menu-right,
+.mui-dropdown-menu[data-mui-align="right"] {
   left: auto;
   right: 0;
 }

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

@@ -83,7 +83,7 @@ input[type="checkbox"]:disabled {
 }
 
 textarea.mui-form-control {
-  height: auto;  // Reset height for <textarea>'s
+  height: auto;  // Reset height for <textarea>s
 }
 
 input.mui-form-control:focus {

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

@@ -16,6 +16,7 @@
   }
 }
 
-.mui-container-fluid {
+.mui-container-fluid,
+.mui-container[data-mui-fluid="true"] {
   @include container-fixed;
 }

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

@@ -5,7 +5,7 @@
 // ============================================================================
 // RIPPLE
 // ============================================================================
-.mui-ripple-effect{
+.mui-ripple-effect {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
@@ -14,14 +14,14 @@
 }
 
 @keyframes mui-ripple-animation {
-    from {
-      transform: scale(1);
-      opacity: 0.4;
-    }
-    to {
-      transform: scale(100);
-      opacity: 0;
-    }
+  from {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+  to {
+    transform: scale(100);
+    opacity: 0;
+  }
 }
 
 
@@ -30,26 +30,32 @@
 // ============================================================================
 // BUTTON-SPECIFIC STYLES
 // ============================================================================
-.mui-btn-default > .mui-ripple-effect {
+.mui-btn-default > .mui-ripple-effect,
+.mui-btn > .mui-ripple-effect {
   background-color: $mui-btn-default-ripple-color;
 }
 
-.mui-btn-primary > .mui-ripple-effect {
+.mui-btn-primary > .mui-ripple-effect,
+.mui-btn[data-mui-color="primary"] > .mui-ripple-effect {
   background-color: $mui-btn-primary-ripple-color;
 }
 
-.mui-btn-danger > .mui-ripple-effect {
+.mui-btn[data-mui-color="dark"] > .mui-ripple-effect {
+  background-color: $mui-btn-dark-ripple-color;
+}
+
+.mui-btn-danger > .mui-ripple-effect,
+.mui-btn[data-mui-color="danger"] > .mui-ripple-effect {
   background-color: $mui-btn-danger-ripple-color;
 }
 
-.mui-btn-accent > .mui-ripple-effect {
+.mui-btn-accent > .mui-ripple-effect,
+.mui-btn[data-mui-color="accent"] > .mui-ripple-effect {
   background-color: $mui-btn-accent-ripple-color;
 }
 
-.mui-btn-flat > .mui-ripple-effect {
+.mui-btn-flat > .mui-ripple-effect,
+.mui-btn[data-mui-style="flat"] > .mui-ripple-effect {
   background-color: $mui-btn-flat-ripple-color;
 }
 
-.mui-btn-floating > .mui-ripple-effect {
-  background-color: $mui-btn-floating-ripple-color;
-}

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

@@ -38,7 +38,8 @@ th {
   }  
 
   // Bordered style
-  &.mui-table-bordered > tbody > tr > td {
+  &.mui-table-bordered > tbody > tr > td,
+  &[data-mui-borders="true"] > tbody > tr > td {
     border-bottom: 1px solid $mui-table-border-color;
   }
 }

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

@@ -30,7 +30,7 @@
       }
     }
 
-    &.mui-active {
+    &.mui-is-active {
       border-bottom: 2px solid $mui-tab-border-color-active;
 
       > a {
@@ -64,7 +64,7 @@
   > .mui-tab-pane {
     display: none;
 
-    &.mui-active {
+    &.mui-is-active {
       display: block;
     }
   }

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

@@ -86,14 +86,32 @@ $mui-base-font-smoothing: false;
 // ============================================================================
 
 $mui-btn-height:                      36px !default;
+$mui-btn-height-sm:                   $mui-btn-height * 0.85 !default;
 $mui-btn-height-lg:                   $mui-btn-height * 1.5 !default;
 
 $mui-btn-border-radius:               $mui-border-radius-default !default;
+
 $mui-btn-padding-horizontal:          26px !default;
+$mui-btn-padding-horizontal-sm:       16px !default;
+$mui-btn-padding-horizontal-lg:       $mui-btn-padding-horizontal !default;
+
+$mui-btn-font-size:                   14px !default;
+$mui-btn-font-size-sm:                13px !default;
+$mui-btn-font-size-lg:                $mui-btn-font-size !default;
+
+$mui-btn-fab-diameter:                55px !default;
+$mui-btn-fab-diameter-sm:             44px !default;
+$mui-btn-fab-diameter-lg:             75px !default;
 
 $mui-btn-margin-vertical:             6px !default;
 $mui-btn-spacing-horizontal:          8px !default;
 
+
+
+// ----------------------------------------------------------------------------
+// COLORS
+// ----------------------------------------------------------------------------
+
 $mui-btn-default-bg-color:            mui-color('white') !default;
 $mui-btn-default-font-color:          $mui-base-font-color !default;
 $mui-btn-default-ripple-color:        darken(mui-color('white'), 35%) !default;
@@ -106,6 +124,10 @@ $mui-btn-danger-bg-color:             $mui-danger-color !default;
 $mui-btn-danger-font-color:           mui-color('white') !default;
 $mui-btn-danger-ripple-color:         mui-color('white') !default;
 
+$mui-btn-dark-bg-color:               mui-color('grey', '800') !default;
+$mui-btn-dark-font-color:             mui-color('white') !default;
+$mui-btn-dark-ripple-color:           mui-color('white') !default;
+
 $mui-btn-accent-bg-color:             $mui-accent-color !default;
 $mui-btn-accent-font-color:           mui-color('white') !default;
 $mui-btn-accent-ripple-color:         mui-color('white') !default;
@@ -114,10 +136,6 @@ $mui-btn-flat-bg-color:               transparent !default;
 $mui-btn-flat-bg-color-hover:         darken(mui-color('white'), 5%) !default;
 $mui-btn-flat-ripple-color:           darken(mui-color('white'), 35%) !default;
 
-$mui-btn-floating-bg-color:           $mui-accent-color !default;
-$mui-btn-floating-font-color:         mui-color('white') !default;
-$mui-btn-floating-ripple-color:       mui-color('white') !default;
-
 
 
 

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

@@ -4,15 +4,12 @@
 
   &:hover,
   &:focus,
-  &:active,
-  .mui-open > &.mui-dropdown-toggle {
+  &:active {
     color: $font-color;
     background-color: lighten($bg-color, 5%);
   }
 
-  &[disabled],
-  fieldset[disabled] & {
-    &,
+  &[disabled] {
     &:hover,
     &:focus,
     &:active {
@@ -23,21 +20,19 @@
 }
 
 @mixin button-flat-variant($font-color, $bg-color-hover) {
-  &.mui-btn-flat {
+  &.mui-btn-flat,
+  &[data-mui-style="flat"] {
     color: $font-color;
     background-color: transparent;
 
     &:hover,
     &:focus,
-    &:active,
-    .mui-open > &.mui-dropdown-toggle {
+    &:active {
       color: $font-color;
       background-color: $bg-color-hover;
     }
 
-    &[disabled],
-    fieldset[disabled] & {
-      &,
+    &[disabled] {
       &:hover,
       &:focus,
       &:active {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mui-sass
 version: !ruby/object:Gem::Version
-  version: 0.1.21.1
+  version: 0.1.22
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-24 00:00:00.000000000 Z
+date: 2015-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass