mui-sass 0.1.23 → 0.2.0

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

@@ -329,14 +329,6 @@ $mui-colors: (
   ),
   "black": #000,
   "white": #FFF,
-  "black-alpha-1": rgba(0, 0, 0, 0.12),
-  "black-alpha-2": rgba(0, 0, 0, 0.26),
-  "black-alpha-3": rgba(0, 0, 0, 0.54),
-  "black-alpha-4": rgba(0, 0, 0, 0.87),
-  "white-alpha-1": rgba(255, 255, 255, 0.12),
-  "white-alpha-2": rgba(255, 255, 255, 0.30),
-  "white-alpha-3": rgba(255, 255, 255, 0.70),
-  "white-alpha-4": rgba(255, 255, 255, 1.00),
 
   "black-alpha-12": rgba(#000, 0.12),
   "black-alpha-26": rgba(#000, 0.26),

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

@@ -8,18 +8,18 @@
   background-color: $mui-divider-color;
 }
 
-.mui-divider-top {
+.mui--divider-top {
   border-top: 1px solid $mui-divider-color;
 }
 
-.mui-divider-bottom {
+.mui--divider-bottom {
   border-bottom: 1px solid $mui-divider-color;
 }
 
-.mui-divider-left {
+.mui--divider-left {
   border-left: 1px solid $mui-divider-color;
 }
 
-.mui-divider-right {
+.mui--divider-right {
   border-right: 1px solid $mui-divider-color;
 }

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

@@ -23,8 +23,8 @@
 // ============================================================================
 // MENU ELEMENT
 // ============================================================================
-.mui-dropdown-menu {
-  @extend .mui-z1;
+.mui-dropdown__menu {
+  @extend .mui--z1;
 
   position: absolute;
   top: 100%;
@@ -42,7 +42,7 @@
   background-clip: padding-box;
 
   // open state
-  &.mui-is-open {
+  &.mui--is-open {
     display: block;
   }
   
@@ -65,7 +65,7 @@
     }
   }
 
-  > .mui-is-disabled > a {
+  > .mui--is-disabled > a {
     &,
     &:hover,
     &:focus {
@@ -84,8 +84,7 @@
 }
 
 // right align
-.mui-dropdown-menu-right,
-.mui-dropdown-menu[data-mui-align="right"] {
+.mui-dropdown__menu--right {
   left: auto;
   right: 0;
 }

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

@@ -25,13 +25,14 @@ legend {
 // override content-box in normalize.css
 input[type="search"] {
   box-sizing: border-box;
+  -webkit-appearance: none;  // Search inputs in iOS
 }
 
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
   // Focus for file, radio, and checkbox
-  @include tab-focus;
+  @include mui-tab-focus();
 }
 
 input[type="radio"]:disabled,
@@ -42,69 +43,11 @@ input[type="checkbox"]:disabled {
 
 
 // ============================================================================
-// FORM-CONTROL
+// TEXTFIELD
 // ============================================================================
 
-.mui-form-control {
-  @include mui-node-inserted();
-
+.mui-textfield {
   display: block;
-  background-color: $mui-input-bg-color;
-  color: $mui-input-font-color;
-  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;
-  box-shadow: none;
-  border-radius: 0px;
-
-  // Bugfix for firefox-android
-  background-image: none;
-
-  &:focus {
-    border-color: $mui-input-border-color-focus;
-    border-width: 2px;
-  }
-
-  &:disabled,
-  &:read-only {
-    cursor: $mui-cursor-disabled;
-    background-color: $mui-input-bg-color-disabled;
-    opacity: 1;  // iOS fix for unreadable disabled content
-  }
-
-  &::placeholder {
-    color: $mui-input-placeholder-color;
-    opacity: 1;  // Normalize firefox
-  }
-}
-
-textarea.mui-form-control {
-  height: auto;  // Reset height for <textarea>s
-}
-
-input.mui-form-control:focus {
-  // Compensate for height change on focus
-  height: $mui-input-height + 1px;
-  margin-bottom: -1px;
-}
-
-input[type="search"] {
-  -webkit-appearance: none;  // Search inputs in iOS
-}
-
-
-
-// ============================================================================
-// FORM-GROUP
-// ============================================================================
-
-.mui-form-group {
-  display: block;
-  width: 100%;
   padding-top: $xFormLabelLineHeight;
   margin-bottom: $mui-form-group-margin-bottom;
   position: relative;
@@ -128,7 +71,7 @@ input[type="search"] {
     white-space: nowrap;
   }
 
-  > .mui-form-floating-label {
+  > .mui-textfield__label--floating {
     // Layout
     position: absolute;
     top: $xFormLabelLineHeight;
@@ -151,29 +94,29 @@ input[type="search"] {
     min-height: $mui-textarea-height;
   }
 
-  > .mui-form-control {
+  > .mui-textfield__input {
     display: block;
   }
 
-  > .mui-form-control:focus ~ label {
+  > .mui-textfield__input:focus ~ label {
     color: $mui-input-border-color-focus;
   }
+}
 
-  &[data-mui-wrap-label="true"] {
-    display: table;
-    padding-top: 0px;
+.mui-textfield--wrap-label {
+  display: table;
+  padding-top: 0px;
 
-    > label:not(.mui-form-floating-label) {
-      display: table-header-group;
-      position: static;
-      white-space: normal;
-      overflow-x: visible;
-    }
+  > label:not(.mui-textfield__label--floating) {
+    display: table-header-group;
+    position: static;
+    white-space: normal;
+    overflow-x: visible;
   }
 }
 
 // Placed outside of form-group for performance
-.mui-form-control:focus ~ .mui-form-floating-label {
+.mui-textfield__input:focus ~ .mui-textfield__label--floating {
   top: 0px;
   font-size: $mui-label-font-size;
   line-height: $xFormLabelLineHeight;
@@ -181,11 +124,11 @@ input[type="search"] {
 }
 
 // Placed outside of form-group for performance
-.mui-form-control:not(:focus) {
-  &.mui-not-empty,
-  &[value]:not([value=""]):not(.mui-empty):not(.mui-not-empty),
-  &:not(:empty):not(.mui-empty):not(.mui-not-empty) {
-    ~ .mui-form-floating-label {
+.mui-textfield__input:not(:focus) {
+  &.mui--is-not-empty,
+  &[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
+  &:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
+    ~ .mui-textfield__label--floating {
       color: $mui-label-font-color;
       font-size: $mui-label-font-size;
       line-height: $xFormLabelLineHeight;
@@ -195,6 +138,53 @@ input[type="search"] {
   }
 }
 
+.mui-textfield__input {
+  @include mui-node-inserted();
+
+  display: block;
+  background-color: $mui-input-bg-color;
+  color: $mui-input-font-color;
+  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;
+  box-shadow: none;
+  border-radius: 0px;
+
+  // Bugfix for firefox-android
+  background-image: none;
+
+  &:focus {
+    border-color: $mui-input-border-color-focus;
+    border-width: 2px;
+  }
+
+  &:disabled,
+  &:read-only {
+    cursor: $mui-cursor-disabled;
+    background-color: $mui-input-bg-color-disabled;
+    opacity: 1;  // iOS fix for unreadable disabled content
+  }
+
+  &::placeholder {
+    color: $mui-input-placeholder-color;
+    opacity: 1;  // Normalize firefox
+  }
+}
+
+textarea.mui-textfield__input {
+  height: auto;  // Reset height for <textarea>s
+}
+
+input.mui-textfield__input:focus {
+  // Compensate for height change on focus
+  height: $mui-input-height + 1px;
+  margin-bottom: -1px;
+}
+
 
 
 // ============================================================================
@@ -218,9 +208,9 @@ input[type="search"] {
 }
 
 .mui-radio > label > input[type="radio"],
-.mui-radio-inline > label > input[type="radio"],
+.mui-radio--inline > label > input[type="radio"],
 .mui-checkbox > label> input[type="checkbox"],
-.mui-checkbox-inline > label > input[type="checkbox"] {
+.mui-checkbox--inline > label > input[type="checkbox"] {
   position: absolute;
   margin-left: -20px;
   margin-top: 4px;
@@ -232,8 +222,8 @@ input[type="search"] {
   margin-top: -5px; 
 }
 
-.mui-radio-inline,
-.mui-checkbox-inline {
+.mui-radio--inline,
+.mui-checkbox--inline {
   // Radios and checkboxes on same line
   display: inline-block;
   padding-left: 20px;
@@ -251,8 +241,8 @@ input[type="search"] {
   }
 }
 
-.mui-radio-inline + .mui-radio-inline,
-.mui-checkbox-inline + .mui-checkbox-inline {
+.mui-radio--inline + .mui-radio--inline,
+.mui-checkbox--inline + .mui-checkbox--inline {
   // Space out consecutive inline controls
   margin-top: 0;
   margin-left: 10px; 
@@ -265,6 +255,9 @@ input[type="search"] {
 // ============================================================================
 
 .mui-select {
+  display: block;
+  padding-top: $xFormLabelLineHeight;
+  margin-bottom: $mui-form-group-margin-bottom;
   position: relative;
 
   &:focus {
@@ -327,8 +320,8 @@ input[type="search"] {
   }
 }
 
-.mui-select-menu {
-  @extend .mui-z1;
+.mui-select__menu {
+  @extend .mui--z1;
 
   // Positioning
   position: absolute;
@@ -366,24 +359,16 @@ input[type="search"] {
 // INLINE-FORMS
 // ============================================================================
 
-.mui-form-inline {
+.mui-form--inline {
   @media (min-width: $mui-screen-sm-min) {
-    > * {
-      // Bottom align children
-      vertical-align: bottom;
-    }
-  
-    > .mui-form-group {
+    > .mui-textfield {
       display: inline-block;
       margin-bottom: 0;
-      vertical-align: middle;
     }
 
-    > .mui-form-control,
-    > .mui-form-group > .mui-form-group {
+    > .mui-textfield__input {
       display: inline-block;
       width: auto;
-      vertical-align: middle;
     }
 
     > .mui-radio,
@@ -411,6 +396,7 @@ input[type="search"] {
     > .mui-btn {
       margin-bottom: 0;
       margin-top: 0;
+      vertical-align: bottom;
     }
   }
 }
@@ -421,14 +407,14 @@ input[type="search"] {
 // FORM-VALIDATION
 // ============================================================================
 
-.mui-form-control {
+.mui-textfield__input {
   // Use thick colored border for invalid fields
   &:invalid:not(:focus) {
     &:not(:required),
-    &:required.mui-not-empty,
-    &:required.mui-empty.mui-dirty,
-    &:required[value]:not([value=""]):not(.mui-empty):not(.mui-not-empty),
-    &:required:not(:empty):not(.mui-empty):not(.mui-not-empty) {
+    &:required.mui--is-not-empty,
+    &:required.mui--is-empty.mui--is-dirty,
+    &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
+    &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
       border-color: $mui-danger-color;
       border-width: 2px;
     }
@@ -436,31 +422,31 @@ input[type="search"] {
 }
 
 // Treat <input>'s different from <textarea>'s
-input.mui-form-control:invalid:not(:focus) {
+input.mui-textfield__input:invalid:not(:focus) {
   &:not(:required),
-  &:required.mui-not-empty,
-  &:required.mui-empty.mui-dirty,
-  &:required[value]:not([value=""]):not(.mui-empty):not(.mui-not-empty),
-  &:required:not(:empty):not(.mui-empty):not(.mui-not-empty) {
+  &:required.mui--is-not-empty,
+  &:required.mui--is-empty.mui--is-dirty,
+  &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
+  &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
     height: $mui-input-height + 1px;
     margin-bottom: -1px;
   }
 }
 
-.mui-form-group > .mui-form-control {
+.mui-textfield > .mui-textfield__input {
   &:invalid:not(:focus) {
     // Set label color to danger color
     &:not(:required),
-    &:required.mui-not-empty,
-    &:required[value]:not([value=""]):not(.mui-empty):not(.mui-not-empty),
-    &:required:not(:empty):not(.mui-empty):not(.mui-not-empty) {
+    &:required.mui--is-not-empty,
+    &:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),
+    &:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) {
       ~ label {
         color: $mui-danger-color;
       }
     }
     
     // Set label color to danger color for dirty, empty fields
-    &:required.mui-empty.mui-dirty ~ label:not(.mui-form-floating-label) {
+    &:required.mui--is-empty.mui--is-dirty ~ label:not(.mui-textfield__label--floating) {
       color: $mui-danger-color;
     }
   }

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

@@ -4,26 +4,29 @@
 
 // row
 .mui-row {
-  @include make-row;
+  @include mui-clearfix();
+
+  margin-left: ($mui-grid-gutter-width / -2);
+  margin-right: ($mui-grid-gutter-width / -2);
 }
 
 // columns
-@include make-grid-columns;
+@include mui-make-grid-columns();
 
 // extra small grid
-@include make-grid(xs);
+@include mui-make-grid('xs');
 
 // small grid
 @media (min-width: $mui-screen-sm-min) {
-  @include make-grid(sm);
+  @include mui-make-grid('sm');
 }
 
 // medium grid
 @media (min-width: $mui-screen-md-min) {
-  @include make-grid(md);
+  @include mui-make-grid('md');
 }
 
 // large grid
 @media (min-width: $mui-screen-lg-min) {
-  @include make-grid(lg);
+  @include mui-make-grid('lg');
 }