mui-sass 0.1.23 → 0.2.0

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

@@ -72,7 +72,7 @@ a {
   }
 
   &:focus {
-    @include tab-focus;
+    @include mui-tab-focus();
   }
 }
 

data/vendor/assets/stylesheets/mui/_semantic-markup.scss

@@ -15,23 +15,23 @@ abbr[title] {
 
 // headers
 h1 {
-  @extend .mui-text-display1;
+  @extend .mui--text-display1;
 }
 
 h2 {
-  @extend .mui-text-headline;
+  @extend .mui--text-headline;
 }
 
 h3 {
-  @extend .mui-text-title;
+  @extend .mui--text-title;
 }
 
 h4 {
-  @extend .mui-text-subhead;
+  @extend .mui--text-subhead;
 }
 
 h5 {
-  @extend .mui-text-body2;
+  @extend .mui--text-body2;
 }
 
 h1, h2, h3 {

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

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

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

@@ -2,7 +2,7 @@
  * MUI Tabs module
  */
 
-.mui-tabs {
+.mui-tabs__bar {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
@@ -24,13 +24,14 @@
       line-height: 48px;
       padding-left: 24px;
       padding-right: 24px;
+      user-select: none;
 
       &:hover {
         text-decoration: none;
       }
     }
 
-    &.mui-is-active {
+    &.mui--is-active {
       border-bottom: 2px solid $mui-tab-border-color-active;
 
       > a {
@@ -43,8 +44,7 @@
     }
   }
 
-  &.mui-tabs-justified,
-  &[data-mui-justified="true"] {
+  &.mui-tabs__bar--justified {
     display: table;
     width: 100%;
     table-layout: fixed;
@@ -61,13 +61,11 @@
   }
 }
 
-.mui-tab-content {
-  > .mui-tab-pane {
-    display: none;
+.mui-tabs__pane {
+  display: none;
 
-    &.mui-is-active {
-      display: block;
-    }
+  &.mui--is-active {
+    display: block;
   }
 }
 

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

@@ -2,50 +2,50 @@
  * MUI Typography module
  */
 
-.mui-text-display4 {
+.mui--text-display4 {
   @include mui-text("display4");
 }
 
-.mui-text-display3 {
+.mui--text-display3 {
   @include mui-text("display3");
 }
 
-.mui-text-display2 {
+.mui--text-display2 {
   @include mui-text("display2");
 }
 
-.mui-text-display1 {
+.mui--text-display1 {
   @include mui-text("display1");
 }
 
-.mui-text-headline {
+.mui--text-headline {
   @include mui-text("headline");
 }
 
-.mui-text-title {
+.mui--text-title {
   @include mui-text("title");
 }
 
-.mui-text-subhead {
+.mui--text-subhead {
   @include mui-text("subhead");
 }
 
-.mui-text-body2 {
+.mui--text-body2 {
   @include mui-text("body2");
 }
 
-.mui-text-body1 {
+.mui--text-body1 {
   @include mui-text("body1");
 }
 
-.mui-text-caption {
+.mui--text-caption {
   @include mui-text("caption");
 }
 
-.mui-text-menu {
+.mui--text-menu {
   @include mui-text("menu");
 }
 
-.mui-text-button {
+.mui--text-button {
   @include mui-text("button");
 }

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

@@ -269,6 +269,3 @@ $mui-screen-xs-max: ($mui-screen-sm-min - 1);
 $mui-screen-sm-max: ($mui-screen-md-min - 1);
 $mui-screen-md-max: ($mui-screen-lg-min - 1);
 
-// for bootstrap
-$grid-gutter-width: $mui-grid-gutter-width;
-$grid-columns: $mui-grid-columns;

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

@@ -20,8 +20,7 @@
 }
 
 @mixin button-flat-variant($font-color, $bg-color-hover) {
-  &.mui-btn-flat,
-  &[data-mui-style="flat"] {
+  &.mui-btn--flat {
     color: $font-color;
     background-color: transparent;
 

data/vendor/assets/stylesheets/mui/mixins/_grid-framework.scss

@@ -1,61 +1,78 @@
 // Overrides bootstrap functions to add prfx support
 
-@mixin make-grid-columns($mui-i: 1, $mui-list: ".mui-col-xs-#{$mui-i}, .mui-col-sm-#{$mui-i}, .mui-col-md-#{$mui-i}, .mui-col-lg-#{$mui-i}") {
-  @for $mui-i from (1 + 1) through $mui-grid-columns {
-    $mui-list: "#{$mui-list}, .mui-col-xs-#{$mui-i}, .mui-col-sm-#{$mui-i}, .mui-col-md-#{$mui-i}, .mui-col-lg-#{$mui-i}";
+@mixin mui-make-grid-columns($i: 1, $list: ".mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}") {
+  @for $i from (1 + 1) through $mui-grid-columns {
+    $list: "#{$list}, .mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}";
   }
-  #{$mui-list} {
+
+  #{$list} {
     // Prevent columns from collapsing when empty
     min-height: 1px;
+
     // Inner gutter via padding
     padding-left:  ($mui-grid-gutter-width / 2);
     padding-right: ($mui-grid-gutter-width / 2);
   }
 }
 
-@mixin float-grid-columns($mui-class, $mui-i: 1, $mui-list: ".mui-col-#{$mui-class}-#{$mui-i}") {
-  @for $mui-i from (1 + 1) through $mui-grid-columns {
-    $mui-list: "#{$mui-list}, .mui-col-#{$mui-class}-#{$mui-i}";
+@mixin mui-float-grid-columns($class, $i: 1, $list: ".mui-col-#{$class}-#{$i}") {
+  @for $i from (1 + 1) through $mui-grid-columns {
+    $list: "#{$list}, .mui-col-#{$class}-#{$i}";
   }
-  #{$mui-list} {
+
+  #{$list} {
     float: left;
   }
 }
 
-@mixin calc-grid-column($mui-index, $mui-class, $mui-type) {
-  @if ($mui-type == width) and ($mui-index > 0) {
-    .mui-col-#{$mui-class}-#{$mui-index} {
-      width: percentage(($mui-index / $mui-grid-columns));
+@mixin mui-calc-grid-column($i, $class, $type) {
+  @if ($type == 'width') and ($i > 0) {
+    .mui-col-#{$class}-#{$i} {
+      width: percentage(($i / $mui-grid-columns));
     }
   }
-  @if ($mui-type == push) and ($mui-index > 0) {
-    .mui-col-#{$mui-class}-push-#{$mui-index} {
-      left: percentage(($mui-index / $mui-grid-columns));
+  @if ($type == 'push') and ($i > 0) {
+    .mui-col-#{$class}-push-#{$i} {
+      left: percentage(($i / $mui-grid-columns));
     }
   }
-  @if ($mui-type == push) and ($mui-index == 0) {
-    .mui-col-#{$mui-class}-push-0 {
+  @if ($type == 'push') and ($i == 0) {
+    .mui-col-#{$class}-push-0 {
       left: auto;
     }
   }
-  @if ($mui-type == pull) and ($mui-index > 0) {
-    .mui-col-#{$mui-class}-pull-#{$mui-index} {
-      right: percentage(($mui-index / $mui-grid-columns));
+  @if ($type == 'pull') and ($i > 0) {
+    .mui-col-#{$class}-pull-#{$i} {
+      right: percentage(($i / $mui-grid-columns));
     }
   }
-  @if ($mui-type == pull) and ($mui-index > 0) {
-    .mui-col-#{$mui-class}-pull-#{$mui-index} {
-      right: percentage(($mui-index / $mui-grid-columns));
+  @if ($type == 'pull') and ($i > 0) {
+    .mui-col-#{$class}-pull-#{$i} {
+      right: percentage(($i / $mui-grid-columns));
     }
   }
-  @if ($mui-type == pull) and ($mui-index == 0) {
-    .mui-col-#{$mui-class}-pull-0 {
+  @if ($type == 'pull') and ($i == 0) {
+    .mui-col-#{$class}-pull-0 {
       right: auto;
     }
   }
-  @if ($mui-type == offset) {
-    .mui-col-#{$mui-class}-offset-#{$mui-index} {
-      margin-left: percentage(($mui-index / $mui-grid-columns));
+  @if ($type == 'offset') {
+    .mui-col-#{$class}-offset-#{$i} {
+      margin-left: percentage(($i / $mui-grid-columns));
     }
   }
 }
+
+@mixin mui-loop-grid-columns($columns, $class, $type) {
+  @for $i from 0 through $columns {
+    @include mui-calc-grid-column($i, $class, $type);
+  }
+}
+
+@mixin mui-make-grid($class) {
+  @include mui-float-grid-columns($class);
+  @include mui-loop-grid-columns($mui-grid-columns, $class, 'width');
+  @include mui-loop-grid-columns($mui-grid-columns, $class, 'pull');
+  @include mui-loop-grid-columns($mui-grid-columns, $class, 'push');
+  @include mui-loop-grid-columns($mui-grid-columns, $class, 'offset');
+}

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

@@ -8,27 +8,9 @@
   font-size: map-get($mui-styles, "font-size");
   line-height: map-get($mui-styles, "line-height");
 
-  @if $mui-base-font-color == mui-color('white') {
-    color: rgba(mui-color('white'), map-get($mui-styles, "alpha-white"));
-  } @else {
-    color: rgba($mui-base-font-color, map-get($mui-styles, "alpha-black"));
-  }
-  
   @if $mui-name == "button" {
     text-transform: uppercase;
   }
-
-  &.mui-text-black {
-    color: rgba(mui-color('black'), map-get($mui-styles, "alpha-black"));
-  }
-
-  &.mui-text-white {
-    color: rgba(mui-color('white'), map-get($mui-styles, "alpha-white"));
-  }
-
-  &.mui-text-accent {
-    color: rgba($mui-accent-color, map-get($mui-styles, "alpha-accent"));
-  }
 }
 
 
@@ -36,97 +18,61 @@ $mui-mui-text-styles: (
   "display4": (
     "font-weight": 300,
     "font-size": 112px,
-    "alpha-black": 0.54,
-    "alpha-white": 0.70,
-    "alpha-accent": 0.54,
     "line-height": 112px
   ),
   "display3": (
     "font-weight": 400,
     "font-size": 56px,
-    "alpha-black": 0.54,
-    "alpha-white": 0.70,
-    "alpha-accent": 0.54,
     "line-height": 56px
   ),
   "display2": (
     "font-weight": 400,
     "font-size": 45px,
-    "alpha-black": 0.54,
-    "alpha-white": 0.70,
-    "alpha-accent": 0.54,
     "line-height": 48px
   ),
   "display1": (
     "font-weight": 400,
     "font-size": 34px,
-    "alpha-black": 0.54,
-    "alpha-white": 0.70,
-    "alpha-accent": 0.54,
     "line-height": 40px
   ),
   "headline": (
     "font-weight": 400,
     "font-size": 24px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 32px
   ),
   "title": (
     "font-weight": 400,
     "font-size": 20px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 28px
   ),
   "subhead": (
     "font-weight": 400,
     "font-size": 16px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 24px
   ),
   "body2": (
     "font-weight": 500,
     "font-size": 14px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 24px
   ),
   "body1": (
     "font-weight": 400,
     "font-size": 14px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 20px
   ),
   "caption": (
     "font-weight": 400,
     "font-size": 12px,
-    "alpha-black": 0.54,
-    "alpha-white": 0.70,
-    "alpha-accent": 0.54,
     "line-height": 16px
   ),
   "menu": (
     "font-weight": 500,
     "font-size": 13px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 17px
   ),
   "button": (
     "font-weight": 500,
     "font-size": 14px,
-    "alpha-black": 0.87,
-    "alpha-white": 1.00,
-    "alpha-accent": 0.87,
     "line-height": 18px
   )
 );

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

@@ -2,3 +2,44 @@
   animation-duration: 0.0001s;
   animation-name: mui-node-inserted;
 }
+
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+@mixin mui-clearfix() {
+  &:before,
+  &:after {
+    content: " ";  // 1
+    display: table;  // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+@mixin mui-container-fixed($gutter: $mui-grid-gutter-width) {
+  @include mui-clearfix();
+
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  ($gutter / 2);
+  padding-right: ($gutter / 2);
+}
+
+@mixin mui-tab-focus() {
+  // Default
+  outline: thin dotted;
+
+  // WebKit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}