mui-sass 0.2.10 → 0.3.0

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

@@ -2,60 +2,32 @@
  * MUI Appbar
  */
 
+$x-mobile-breakpoint: 480px;
+
 // ============================================================================
 // HELPER CLASSES
 // ============================================================================
 
-.mui--appbar-height {
-  height: $mui-appbar-height-xs-portrait;
-
-  // mobile landscape
-  @media (orientation: landscape) and (max-height: $mui-screen-xs) {
-    height: $mui-appbar-height-xs-landscape;
-  }
-  
-  @media (min-width: $mui-screen-xs) {
-    height: $mui-appbar-height;
-  }
-}
-
-.mui--appbar-min-height {
-  min-height: $mui-appbar-height-xs-portrait;
-
-  // mobile landscape
-  @media (orientation: landscape) and (max-height: $mui-screen-xs) {
-    min-height: $mui-appbar-height-xs-landscape;
-  }
-
-  @media (min-width: $mui-screen-xs) {
-    min-height: $mui-appbar-height;
-  }
+// mobile portrait
+.mui--appbar-height      { height: $mui-appbar-height-xs-portrait; }
+.mui--appbar-min-height  { min-height: $mui-appbar-height-xs-portrait; }
+.mui--appbar-line-height { line-height: $mui-appbar-height-xs-portrait; }
+.mui--appbar-top         { top: $mui-appbar-height-xs-portrait; }
+
+// mobile landscape
+@media (orientation: landscape) and (max-height: $x-mobile-breakpoint) {
+  .mui--appbar-height      { height: $mui-appbar-height-xs-landscape; }
+  .mui--appbar-min-height  { min-height: $mui-appbar-height-xs-landscape; }
+  .mui--appbar-line-height { line-height: $mui-appbar-height-xs-landscape; }
+  .mui--appbar-top         { top: $mui-appbar-height-xs-landscape; }
 }
 
-.mui--appbar-line-height {
-  line-height: $mui-appbar-height-xs-portrait;
-
-  // mobile landscape
-  @media (orientation: landscape) and (max-height: $mui-screen-xs) {
-    line-height: $mui-appbar-height-xs-landscape;
-  }
-
-  @media (min-width: $mui-screen-xs) {
-    line-height: $mui-appbar-height;
-  }
-}
-
-.mui--appbar-top {
-  top: $mui-appbar-height-xs-portrait;
-
-  // mobile landscape
-  @media (orientation: landscape) and (max-height: $mui-screen-xs) {
-    top: $mui-appbar-height-xs-landscape;
-  }
-
-  @media (min-width: $mui-screen-xs) {
-    top: $mui-appbar-height;
-  }
+// all other screen sizes
+@media (min-width: $x-mobile-breakpoint) {
+  .mui--appbar-height      { height: $mui-appbar-height; }
+  .mui--appbar-min-height  { min-height: $mui-appbar-height; }
+  .mui--appbar-line-height { line-height: $mui-appbar-height; }
+  .mui--appbar-top         { top: $mui-appbar-height; }  
 }
 
 

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

@@ -73,7 +73,7 @@ input[type="checkbox"]:disabled {
 
   > textarea {
     padding-top: 5px;
-    min-height: $mui-textarea-height;
+    //min-height: $mui-textarea-height;
   }
 
   > input,
@@ -153,7 +153,6 @@ input[type="checkbox"]:disabled {
   border: none;
   border-bottom: 1px solid $mui-input-border-color;
   outline: none;
-  height: $mui-input-height;
   width: 100%;
   font-size: $mui-input-font-size;
   padding: 0;
@@ -181,8 +180,24 @@ input[type="checkbox"]:disabled {
   }
 }
 
+.mui-textfield > input {
+  height: $mui-input-height;
+
+  // Compensate for height change on focus
+  &:focus {
+    height: $mui-input-height + 1px;
+    margin-bottom: -1px;
+  }
+}
+
 .mui-textfield > textarea {
-  height: auto;  // Reset height for <textarea>s
+  //height: auto;  // Reset height for <textarea>s
+  min-height: $mui-textarea-height;
+
+  // Compensate for height change on focus
+  &[rows]:not([rows="2"]):focus {
+    margin-bottom: -1px;
+  }
 }
 
 .mui-textfield > input:focus {
@@ -359,7 +374,7 @@ input[type="checkbox"]:disabled {
       background-color: mui-color('grey', '300');
     }
 
-    &[selected] {
+    &.mui--is-selected {
       background-color: mui-color('grey', '200');
     }
   }
@@ -416,8 +431,8 @@ input[type="checkbox"]:disabled {
 
 .mui-textfield > input:invalid:not(:focus),
 .mui-textfield > textarea:invalid:not(:focus),
-.mui-textfield--invalid > input:not(:focus),
-.mui-textfield--invalid > textarea:not(:focus) {
+.mui-textfield > input:not(:focus).mui--is-invalid,
+.mui-textfield > textarea:not(:focus).mui--is-invalid {
   &:not(:required),
   &:required.mui--is-not-empty,
   &:required.mui--is-empty.mui--is-dirty,
@@ -430,7 +445,7 @@ input[type="checkbox"]:disabled {
 
 // Treat <input>'s different from <textarea>'s
 .mui-textfield > input:invalid:not(:focus),
-.mui-textfield--invalid > input:not(:focus) {
+.mui-textfield > input:not(:focus).mui--is-invalid {
   &:not(:required),
   &:required.mui--is-not-empty,
   &:required.mui--is-empty.mui--is-dirty,
@@ -443,8 +458,8 @@ input[type="checkbox"]:disabled {
 
 .mui-textfield > input:invalid:not(:focus),
 .mui-textfield > textarea:invalid:not(:focus),
-.mui-textfield--invalid > input:not(:focus),
-.mui-textfield--invalid > textarea:not(:focus) {
+.mui-textfield > input:not(:focus).mui--is-invalid,
+.mui-textfield > textarea:not(:focus).mui--is-invalid {
   // Set label color to danger color
   &:not(:required),
   &:required.mui--is-not-empty,
@@ -458,8 +473,8 @@ input[type="checkbox"]:disabled {
 
 .mui-textfield:not(.mui-textfield--float-label) > input:invalid:not(:focus),
 .mui-textfield:not(.mui-textfield--float-label) > textarea:invalid:not(:focus),
-.mui-textfield--invalid:not(.mui-textfield--float-label) > input:not(:focus),
-.mui-textfield--invalid:not(.mui-textfield--float-label) > textarea:not(:focus) {
+.mui-textfield:not(.mui-textfield--float-label) > input:not(:focus).mui--is-invalid,
+.mui-textfield:not(.mui-textfield--float-label) > textarea:not(:focus).mui--is-invalid {
   // Set label color to danger color for dirty, empty fields
   &:required.mui--is-empty.mui--is-dirty ~ label {
     color: $mui-danger-color;

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

@@ -30,3 +30,8 @@
 @media (min-width: $mui-screen-lg-min) {
   @include mui-make-grid('lg');
 }
+
+// extra-large grid
+@media (min-width: $mui-screen-xl-min) {
+  @include mui-make-grid('xl');
+}

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

@@ -75,24 +75,23 @@
 // TEXT COLOR HELPERS
 // ============================================================================
 
-.mui--text-danger   { color: $mui-danger-color; }
+.mui--text-dark             { color: $mui-text-dark; }
+.mui--text-dark-secondary   { color: $mui-text-dark-secondary; }
+.mui--text-dark-hint        { color: $mui-text-dark-hint; }
 
-.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-38 { color: mui-color('black-alpha-38'); }
-.mui--text-black-12 { color: mui-color('black-alpha-12'); }
+.mui--text-light            { color: $mui-text-light; }
+.mui--text-light-secondary  { color: $mui-text-light-secondary; }
+.mui--text-light-hint       { color: $mui-text-light-hint; }
+
+.mui--text-accent           { color: $mui-text-accent; }
+.mui--text-accent-secondary { color: $mui-text-accent-secondary; }
+.mui--text-accent-hint      { color: $mui-text-accent-hint; }
+
+.mui--text-black            { color: mui-color('black'); }
+.mui--text-white            { color: mui-color('white'); }
+.mui--text-danger           { color: $mui-text-danger; }
 
-.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-38 { color: rgba($mui-accent-color, .38); }
-.mui--text-accent-12 { color: rgba($mui-accent-color, .12); }
 
 
 // ============================================================================
@@ -239,115 +238,84 @@
 .mui--visible-md-inline-block,
 .mui--visible-lg-block,
 .mui--visible-lg-inline,
-.mui--visible-lg-inline-block {
+.mui--visible-lg-inline-block,
+.mui--visible-xl-block,
+.mui--visible-xl-inline,
+.mui--visible-xl-inline-block {
   display: none !important;
 }
 
+
 @media (max-width: $mui-screen-xs-max) {
   @include x-responsive-visibility('.mui-visible-xs');
+  
+  .mui--visible-xs-block        { display: block !important; }
+  .mui--visible-xs-inline       { display: inline !important; }
+  .mui--visible-xs-inline-block { display: inline-block !important; }
 }
 
-.mui--visible-xs-block {
-  @media (max-width: $mui-screen-xs-max) {
-    display: block !important;
-  }
-}
-
-.mui--visible-xs-inline {
-  @media (max-width: $mui-screen-xs-max) {
-    display: inline !important;
-  }
-}
-
-.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 x-responsive-visibility('.mui--visible-sm');
-}
-
-.mui--visible-sm-block {
-  @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
-    display: block !important;
-  }
+  @include x-responsive-visibility('.mui-visible-sm');
+  
+  .mui--visible-sm-block        { display: block !important; }
+  .mui--visible-sm-inline       { display: inline !important; }
+  .mui--visible-sm-inline-block { display: inline-block !important; }
 }
 
-.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 {
-  @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 x-responsive-visibility('.mui--visible-md');
+  @include x-responsive-visibility('.mui-visible-md');
+  
+  .mui--visible-md-block        { display: block !important; }
+  .mui--visible-md-inline       { display: inline !important; }
+  .mui--visible-md-inline-block { display: inline-block !important; }
 }
 
-.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 {
-  @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
-    display: inline !important;
-  }
+@media (min-width: $mui-screen-lg-min) and (max-width: $mui-screen-lg-max) {
+  @include x-responsive-visibility('.mui-visible-lg');
+  
+  .mui--visible-lg-block        { display: block !important; }
+  .mui--visible-lg-inline       { display: inline !important; }
+  .mui--visible-lg-inline-block { display: inline-block !important; }
 }
 
-.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 x-responsive-visibility('.mui--visible-lg');
+@media (min-width: $mui-screen-xl-min) {
+  @include x-responsive-visibility('.mui-visible-xl');
+  
+  .mui--visible-xl-block        { display: block !important; }
+  .mui--visible-xl-inline       { display: inline !important; }
+  .mui--visible-xl-inline-block { display: inline-block !important; }
 }
 
-.mui--visible-lg-block {
-  @media (min-width: $mui-screen-lg-min) {
-    display: block !important;
-  }
-}
-
-.mui--visible-lg-inline {
-  @media (min-width: $mui-screen-lg-min) {
-    display: inline !important;
-  }
-}
-
-.mui--visible-lg-inline-block {
-  @media (min-width: $mui-screen-lg-min) {
-    display: inline-block !important;
-  }
-}
 
 @media (max-width: $mui-screen-xs-max) {
   @include x-responsive-invisibility('.mui--hidden-xs');
 }
 
+
 @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
   @include x-responsive-invisibility('.mui--hidden-sm');
 }
 
+
 @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
   @include x-responsive-invisibility('.mui--hidden-md');
 }
 
-@media (min-width: $mui-screen-lg-min) {
+
+@media (min-width: $mui-screen-lg-min) and (max-width: $mui-screen-lg-max) {
   @include x-responsive-invisibility('.mui--hidden-lg');
 }
 
 
+@media (min-width: $mui-screen-xl-min) {
+  @include x-responsive-invisibility('.mui--hidden-xl');
+}
+
+
 
 // ============================================================================
 // SCROLL BLOCK

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

@@ -6,13 +6,16 @@
   @include mui-container-fixed();
 
   @media (min-width: $mui-screen-sm-min) {
-    width: $mui-container-sm;
+    max-width: $mui-container-sm;
   }
   @media (min-width: $mui-screen-md-min) {
-    width: $mui-container-md;
+    max-width: $mui-container-md;
   }
   @media (min-width: $mui-screen-lg-min) {
-    width: $mui-container-lg;
+    max-width: $mui-container-lg;
+  }
+  @media (min-width: $mui-screen-xl-min) {
+    max-width: $mui-container-xl;
   }
 }
 

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

@@ -19,10 +19,10 @@ $mui-danger-color:             mui-color('red', '500') !default;
 // MEDIA QUERY BREAKPOINTS
 // ============================================================================
 
-$mui-screen-xs:     480px !default;
-$mui-screen-sm-min: 768px !default;
-$mui-screen-md-min: 992px !default;
-$mui-screen-lg-min: 1200px !default;
+$mui-screen-sm-min: 544px !default;
+$mui-screen-md-min: 768px !default;
+$mui-screen-lg-min: 992px !default;
+$mui-screen-xl-min: 1200px !default;
 
 
 
@@ -42,9 +42,10 @@ $mui-grid-float-breakpoint:      $mui-screen-sm-min !default;
 // CONTAINER SIZES
 // ============================================================================
 
-$mui-container-sm:               ($mui-screen-sm-min - 18px) !default;
-$mui-container-md:               (940px + $mui-grid-gutter-width) !default;
-$mui-container-lg:               (1140px + $mui-grid-gutter-width) !default;
+$mui-container-sm:               570px !default;
+$mui-container-md:               740px !default;
+$mui-container-lg:               960px !default;
+$mui-container-xl:               1170px !default;
 
 
 
@@ -81,6 +82,27 @@ $mui-base-font-smoothing: false;
 
 
 
+// ============================================================================
+// TEXT COLORS
+// ============================================================================
+
+$mui-text-dark:             mui-color('black-alpha-87') !default;
+$mui-text-dark-secondary:   mui-color('black-alpha-54') !default;
+$mui-text-dark-hint:        mui-color('black-alpha-38') !default;
+
+$mui-text-light:            mui-color('white') !default;
+$mui-text-light-secondary:  mui-color('white-alpha-70') !default;
+$mui-text-light-hint:       mui-color('white-alpha-30') !default;
+
+$mui-text-accent:           rgba($mui-accent-color, .87) !default;
+$mui-text-accent-secondary: rgba($mui-accent-color, .54) !default;
+$mui-text-accent-hint:      rgba($mui-accent-color, .38) !default;
+
+$mui-text-danger:          $mui-danger-color !default;
+
+
+
+
 // ============================================================================
 // BUTTONS
 // ============================================================================
@@ -268,4 +290,4 @@ $mui-base-line-height-computed: floor(($mui-base-font-size * $mui-base-line-heig
 $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);
-
+$mui-screen-lg-max: ($mui-screen-xl-min - 1);