mui-sass 0.1.23 → 0.2.0

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

@@ -7,8 +7,8 @@
 // ============================================================================
 
 @keyframes mui-node-inserted {
-  from {opacity: 0.99;}
-  to {opacity: 1;}
+  from { opacity: 0.99; }
+  to { opacity: 1; }
 }
 
 
@@ -18,13 +18,23 @@
 // ANIMATION
 // ============================================================================
 
-.mui-notransition {
+.mui--no-transition {
   transition: none !important;
 }
 
 
 
 
+// ============================================================================
+// USER SELECT
+// ============================================================================
+.mui--no-user-select {
+  user-select: none;
+}
+
+
+
+
 // ============================================================================
 // CARET
 // ============================================================================
@@ -47,37 +57,62 @@
 // ALIGNMENT HELPERS
 // ============================================================================
 
-.mui-text-left           { text-align: left !important; }
-.mui-text-right          { text-align: right !important; }
-.mui-text-center         { text-align: center !important; }
-.mui-text-justify        { text-align: justify !important; }
-.mui-text-nowrap         { white-space: nowrap !important; }
+.mui--text-left           { text-align: left !important; }
+.mui--text-right          { text-align: right !important; }
+.mui--text-center         { text-align: center !important; }
+.mui--text-justify        { text-align: justify !important; }
+.mui--text-nowrap         { white-space: nowrap !important; }
 
-.mui-align-baseline      { vertical-align: baseline !important; }
-.mui-align-top           { vertical-align: top !important; }
-.mui-align-middle        { vertical-align: middle !important; }
-.mui-align-bottom        { vertical-align: bottom !important; }
+.mui--align-baseline      { vertical-align: baseline !important; }
+.mui--align-top           { vertical-align: top !important; }
+.mui--align-middle        { vertical-align: middle !important; }
+.mui--align-bottom        { vertical-align: bottom !important; }
 
 
 
 
+// ============================================================================
+// TEXT COLOR HELPERS
+// ============================================================================
+
+.mui--text-danger   { color: $mui-danger-color; }
+
+.mui--text-black    { color: mui-color('black'); }
+.mui--text-black-87 { color: mui-color('black-alpha-87'); }
+.mui--text-black-54 { color: mui-color('black-alpha-54'); }
+.mui--text-black-26 { color: mui-color('black-alpha-26'); }
+.mui--text-black-12 { color: mui-color('black-alpha-12'); }
+
+.mui--text-white    { color: mui-color('white'); }
+.mui--text-white-70 { color: mui-color('white-alpha-70'); }
+.mui--text-white-30 { color: mui-color('white-alpha-30'); }
+.mui--text-white-12 { color: mui-color('white-alpha-12'); }
+
+.mui--text-accent    { color: $mui-accent-color; }
+.mui--text-accent-87 { color: rgba($mui-accent-color, .87); }
+.mui--text-accent-54 { color: rgba($mui-accent-color, .54); }
+.mui--text-accent-26 { color: rgba($mui-accent-color, .26); }
+.mui--text-accent-12 { color: rgba($mui-accent-color, .12); }
+
+
 // ============================================================================
 // LISTS
 // ============================================================================
 
-@mixin list-unstyled {
+@mixin x-list-unstyled {
   padding-left: 0;
   list-style: none;
 }
 
 // [converter] extracted as `@mixin list-unstyled` for libsass compatibility
-.mui-list-unstyled {
-  @include list-unstyled;
+.mui-list--unstyled {
+  @include x-list-unstyled();
 }
 
 // Inline turns list items into inline-block
-.mui-list-inline {
-  @include list-unstyled;
+.mui-list--inline {
+  @include x-list-unstyled();
+
   margin-left: -5px;
 
   > li {
@@ -94,27 +129,27 @@
 // DEPTH HELPERS
 // ============================================================================
 
-.mui-z1 {
+.mui--z1 {
   box-shadow: 0 1px 3px rgba(mui-color('black'), 0.12),
               0 1px 2px rgba(mui-color('black'), 0.24);
 }
 
-.mui-z2 {
+.mui--z2 {
   box-shadow: 0 3px 6px rgba(mui-color('black'), 0.16),
               0 3px 6px rgba(mui-color('black'), 0.23);
 }
 
-.mui-z3 {
+.mui--z3 {
   box-shadow: 0 10px 20px rgba(mui-color('black'), 0.19),
               0 6px 6px rgba(mui-color('black'), 0.23);
 }
 
-.mui-z4 {
+.mui--z4 {
   box-shadow: 0 14px 28px rgba(mui-color('black'), 0.25),
               0 10px 10px rgba(mui-color('black'), 0.22);  
 }
 
-.mui-z5 {
+.mui--z5 {
   box-shadow: 0 19px 38px rgba(mui-color('black'), 0.30),
               0 15px 12px rgba(mui-color('black'), 0.22);
 }
@@ -126,15 +161,15 @@
 // FLOAT HELPERS
 // ============================================================================
 
-.mui-clearfix {
-  @include clearfix;
+.mui--clearfix {
+  @include mui-clearfix();
 }
 
-.mui-pull-right {
+.mui--pull-right {
   float: right !important;
 }
 
-.mui-pull-left {
+.mui--pull-left {
   float: left !important;
 }
 
@@ -145,18 +180,21 @@
 // TOGGLE HELPERS
 // ============================================================================
 
-.mui-hide {
+.mui--hide {
   display: none !important;
 }
 
-.mui-show {
+.mui--show {
   display: block !important;
 }
 
-.mui-invisible {
+.mui--invisible {
   visibility: hidden;
 }
 
+.mui--overflow-hidden {
+  overflow: hidden !important;
+}
 
 
 
@@ -164,121 +202,139 @@
 // RESPONSIVE UTILITIES
 // ============================================================================
 
-.mui-visible-xs-block,
-.mui-visible-xs-inline,
-.mui-visible-xs-inline-block,
-.mui-visible-sm-block,
-.mui-visible-sm-inline,
-.mui-visible-sm-inline-block,
-.mui-visible-md-block,
-.mui-visible-md-inline,
-.mui-visible-md-inline-block,
-.mui-visible-lg-block,
-.mui-visible-lg-inline,
-.mui-visible-lg-inline-block {
+@mixin x-responsive-visibility($parent) {
+  #{$parent} {
+    display: block !important;
+  }
+
+  table#{$parent}  { display: table; }
+  tr#{$parent}     { display: table-row !important; }
+  th#{$parent},
+  td#{$parent}     { display: table-cell !important; }
+}
+
+// [converter] $parent hack
+@mixin x-responsive-invisibility($parent) {
+  #{$parent} {
+    display: none !important;
+  }
+}
+
+.mui--visible-xs-block,
+.mui--visible-xs-inline,
+.mui--visible-xs-inline-block,
+.mui--visible-sm-block,
+.mui--visible-sm-inline,
+.mui--visible-sm-inline-block,
+.mui--visible-md-block,
+.mui--visible-md-inline,
+.mui--visible-md-inline-block,
+.mui--visible-lg-block,
+.mui--visible-lg-inline,
+.mui--visible-lg-inline-block {
   display: none !important;
 }
 
 @media (max-width: $mui-screen-xs-max) {
-  @include responsive-visibility('.mui-visible-xs');
+  @include x-responsive-visibility('.mui-visible-xs');
 }
 
-.mui-visible-xs-block {
+.mui--visible-xs-block {
   @media (max-width: $mui-screen-xs-max) {
     display: block !important;
   }
 }
 
-.mui-visible-xs-inline {
+.mui--visible-xs-inline {
   @media (max-width: $mui-screen-xs-max) {
     display: inline !important;
   }
 }
 
-.mui-visible-xs-inline-block {
+.mui--visible-xs-inline-block {
   @media (max-width: $mui-screen-xs-max) {
     display: inline-block !important;
   }
 }
 
 @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
-  @include responsive-visibility('.mui-visible-sm');
+  @include x-responsive-visibility('.mui--visible-sm');
 }
 
-.mui-visible-sm-block {
+.mui--visible-sm-block {
   @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
     display: block !important;
   }
 }
 
-.mui-visible-sm-inline {
+.mui--visible-sm-inline {
   @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
     display: inline !important;
   }
 }
 
-.mui-visible-sm-inline-block {
+.mui--visible-sm-inline-block {
   @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
     display: inline-block !important;
   }
 }
 
 @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
-  @include responsive-visibility('.mui-visible-md');
+  @include x-responsive-visibility('.mui--visible-md');
 }
 
-.mui-visible-md-block {
+.mui--visible-md-block {
   @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
     display: block !important;
   }
 }
 
-.mui-visible-md-inline {
+.mui--visible-md-inline {
   @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
     display: inline !important;
   }
 }
 
-.mui-visible-md-inline-block {
+.mui--visible-md-inline-block {
   @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
     display: inline-block !important;
   }
 }
 
 @media (min-width: $mui-screen-lg-min) {
-  @include responsive-visibility('.mui-visible-lg');
+  @include x-responsive-visibility('.mui--visible-lg');
 }
 
-.mui-visible-lg-block {
+.mui--visible-lg-block {
   @media (min-width: $mui-screen-lg-min) {
     display: block !important;
   }
 }
 
-.mui-visible-lg-inline {
+.mui--visible-lg-inline {
   @media (min-width: $mui-screen-lg-min) {
     display: inline !important;
   }
 }
 
-.mui-visible-lg-inline-block {
+.mui--visible-lg-inline-block {
   @media (min-width: $mui-screen-lg-min) {
     display: inline-block !important;
   }
 }
 
 @media (max-width: $mui-screen-xs-max) {
-  @include responsive-invisibility('.mui-hidden-xs');
+  @include x-responsive-invisibility('.mui--hidden-xs');
 }
 
 @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
-  @include responsive-invisibility('.mui-hidden-sm');
+  @include x-responsive-invisibility('.mui--hidden-sm');
 }
 
 @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
-  @include responsive-invisibility('.mui-hidden-md');
+  @include x-responsive-invisibility('.mui--hidden-md');
 }
 
 @media (min-width: $mui-screen-lg-min) {
-  @include responsive-invisibility('.mui-hidden-lg');
+  @include x-responsive-invisibility('.mui--hidden-lg');
 }

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

@@ -3,7 +3,7 @@
  */
 
 .mui-container {
-  @include container-fixed;
+  @include mui-container-fixed();
 
   @media (min-width: $mui-screen-sm-min) {
     width: $mui-container-sm;
@@ -16,7 +16,6 @@
   }
 }
 
-.mui-container-fluid,
-.mui-container[data-mui-fluid="true"] {
-  @include container-fixed;
+.mui-container-fluid {
+  @include mui-container-fixed();
 }

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

@@ -1,17 +1,4 @@
-// Bootstrap
-@import
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/clearfix",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/grid",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/grid-framework",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/image",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/tab-focus",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/responsive-visibility",
-"../bootstrap-3.3.1/assets/stylesheets/bootstrap/mixins/forms";
-
-// Bootstrap override
 @import "mixins/grid-framework";
-
-// Utilities
 @import "mixins/util";
 @import "mixins/buttons";
 @import "mixins/typography";

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

@@ -2,11 +2,6 @@
  * MUI Overlay module
  */
 
-// For body
-.mui-overlay-on {
-  overflow: hidden !important;
-}
-
 #mui-overlay {
   position: fixed;
   top: 0;

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

@@ -3,7 +3,7 @@
  */
 
 .mui-panel {
-  @include clearfix();
+  @include mui-clearfix();
 
   padding: $mui-panel-padding;
   margin-bottom: $mui-base-line-height-computed;

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

@@ -30,32 +30,26 @@
 // ============================================================================
 // BUTTON-SPECIFIC STYLES
 // ============================================================================
-.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[data-mui-color="primary"] > .mui-ripple-effect {
+.mui-btn--primary > .mui-ripple-effect {
   background-color: $mui-btn-primary-ripple-color;
 }
 
-.mui-btn[data-mui-color="dark"] > .mui-ripple-effect {
+.mui-btn--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 {
+.mui-btn--danger > .mui-ripple-effect {
   background-color: $mui-btn-danger-ripple-color;
 }
 
-.mui-btn-accent > .mui-ripple-effect,
-.mui-btn[data-mui-color="accent"] > .mui-ripple-effect {
+.mui-btn--accent > .mui-ripple-effect {
   background-color: $mui-btn-accent-ripple-color;
 }
 
-.mui-btn-flat > .mui-ripple-effect,
-.mui-btn[data-mui-style="flat"] > .mui-ripple-effect {
+.mui-btn--flat > .mui-ripple-effect {
   background-color: $mui-btn-flat-ripple-color;
 }
-