mui-sass 0.1.19

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

@@ -0,0 +1,25 @@
+/**
+ * MUI Dividers module
+ */
+
+.mui-divider {
+  display: block;
+  height: 1px;
+  background-color: $mui-divider-color;
+}
+
+.mui-divider-top {
+  border-top: 1px solid $mui-divider-color;
+}
+
+.mui-divider-bottom {
+  border-bottom: 1px solid $mui-divider-color;
+}
+
+.mui-divider-left {
+  border-left: 1px solid $mui-divider-color;
+}
+
+.mui-divider-right {
+  border-right: 1px solid $mui-divider-color;
+}

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

@@ -0,0 +1,90 @@
+/**
+ * MUI Dropdown module
+ */
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+.mui-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+// Toggle element
+[data-mui-toggle="dropdown"] {
+  @include mui-node-inserted();
+
+  outline: 0;
+}
+
+
+
+
+// ============================================================================
+// MENU ELEMENT
+// ============================================================================
+.mui-dropdown-menu {
+  @extend .mui-z1;
+
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: none;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;  // override default ul
+  list-style: none;
+  font-size: $mui-base-font-size;
+  text-align: left;
+  background-color: $mui-dropdown-bg-color;
+  border-radius: $mui-dropdown-border-radius;
+  z-index: 1;
+  background-clip: padding-box;
+
+  // open state
+  &.mui-open {
+    display: block;
+  }
+  
+  // links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: $mui-base-line-height;
+    color: $mui-dropdown-link-font-color;
+    white-space: nowrap; 
+                         
+    // hover & focus state
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $mui-dropdown-link-font-color-hover;
+      background-color: $mui-dropdown-link-bg-color-hover;
+    }
+  }
+
+  > .mui-disabled > a {
+    &,
+    &:hover,
+    &:focus {
+      color: $mui-dropdown-link-font-color-disabled;
+    }
+    
+    // nuke hover & focus effects
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: transparent;
+      background-image: none;
+      cursor: $mui-cursor-disabled;
+    }
+  }
+}
+
+// right align
+.mui-dropdown-menu-right {
+  left: auto;
+  right: 0;
+}

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

@@ -0,0 +1,467 @@
+/**
+ * MUI Form styles
+ * 
+ */
+
+$xFormLabelLineHeight: floor($mui-label-font-size * 1.25);
+
+
+
+// ============================================================================
+// NORMALIZATIONS
+// ============================================================================
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: $mui-base-line-height-computed / 2;
+  font-size: $mui-legend-font-size;
+  color: $mui-legend-font-color;
+  line-height: inherit;
+  border: 0;
+}
+
+// override content-box in normalize.css
+input[type="search"] {
+  box-sizing: border-box;
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  // Focus for file, radio, and checkbox
+  @include tab-focus;
+}
+
+input[type="radio"]:disabled,
+input[type="checkbox"]:disabled {
+  cursor: $mui-cursor-disabled;
+}
+
+
+
+// ============================================================================
+// FORM-CONTROL
+// ============================================================================
+
+.mui-form-control {
+  @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-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;
+
+  > label {
+    // Positioning
+    position: absolute;
+    top: 0;
+
+    // Display
+    display: block;
+    width: 100%;
+
+    // Other
+    color: $mui-label-font-color;
+    font-size: $mui-label-font-size;
+    font-weight: 400;
+    line-height: $xFormLabelLineHeight;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > .mui-form-floating-label {
+    // Layout
+    position: absolute;
+    top: $xFormLabelLineHeight;
+    
+    // Typography
+    font-size: $mui-input-font-size;
+    line-height: $mui-input-height;
+    color: $mui-input-placeholder-color;
+    
+    // Overflow policy
+    text-overflow: clip;
+
+    // Cursor
+    cursor: text;  // for ie10
+    pointer-events: none;
+  }
+
+  > textarea {
+    padding-top: 5px;
+    min-height: $mui-textarea-height;
+  }
+
+  > .mui-form-control {
+    display: block;
+  }
+
+  > .mui-form-control:focus ~ label {
+    color: $mui-input-border-color-focus;
+  }
+
+  &[data-mui-wrap-label="true"] {
+    display: table;
+    padding-top: 0px;
+
+    > label:not(.mui-form-floating-label) {
+      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 {
+  top: 0px;
+  font-size: $mui-label-font-size;
+  line-height: $xFormLabelLineHeight;
+  text-overflow: ellipsis;
+}
+
+// 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 {
+      color: $mui-label-font-color;
+      font-size: $mui-label-font-size;
+      line-height: $xFormLabelLineHeight;
+      top: 0px;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+
+
+// ============================================================================
+// CHECKBOXES-AND-RADIOS
+// ============================================================================
+
+.mui-radio,
+.mui-checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  > label {
+    min-height: $mui-base-line-height-computed;
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+
+.mui-radio > label > input[type="radio"],
+.mui-radio-inline > label > input[type="radio"],
+.mui-checkbox > label> input[type="checkbox"],
+.mui-checkbox-inline > label > input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px;
+}
+
+.mui-radio + .mui-radio,
+.mui-checkbox + .mui-checkbox {
+  // Move up sibling radios or checkboxes for tighter spacing
+  margin-top: -5px; 
+}
+
+.mui-radio-inline,
+.mui-checkbox-inline {
+  // Radios and checkboxes on same line
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+
+  > input[type="radio"],
+  > input[type="checkbox"],
+  > label > input[type="radio"],
+  > label > input[type="checkbox"] {
+    margin: 4px 0 0;
+    line-height: normal;
+  }
+}
+
+.mui-radio-inline + .mui-radio-inline,
+.mui-checkbox-inline + .mui-checkbox-inline {
+  // Space out consecutive inline controls
+  margin-top: 0;
+  margin-left: 10px; 
+}
+
+
+
+// ============================================================================
+// SELECT-COMPONENT
+// ============================================================================
+
+.mui-select {
+  position: relative;
+
+  &:focus {
+    outline: 0;
+
+    > select {
+      height: $mui-input-height + 1px;
+      margin-bottom: -1px;
+      border-color: $mui-input-border-color-focus;
+      border-width: 2px;
+    }
+  }
+  
+  > select {
+    @include mui-node-inserted();
+    
+    // Layout
+    display: block;
+    height: $mui-input-height;
+    width: 100%;
+    
+    // Look and feel
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid $mui-input-border-color;
+    border-radius: 0px;
+    box-shadow: none;
+    background-color: $mui-input-bg-color;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg==");
+    background-repeat: no-repeat;
+    background-position: right center;
+    cursor: pointer;
+    
+    // Typography
+    color: $mui-input-font-color;
+    font-size: $mui-input-font-size;
+    padding: 0 25px 0 0;
+
+    &::ms-expand {
+      display: none;  // For IE
+    }
+    
+    &:focus {
+      outline: 0;
+      height: $mui-input-height + 1px;
+      margin-bottom: -1px;
+      border-color: $mui-input-border-color-focus;
+      border-width: 2px;
+    }
+
+    &:disabled {
+      color: mui-color('black-alpha-26');
+      cursor: $mui-cursor-disabled;
+      background-color: $mui-input-bg-color-disabled;
+      opacity: 1;  // iOS fix for unreadable disabled content
+    }
+  }
+}
+
+.mui-select-menu {
+  @extend .mui-z1;
+
+  // Positioning
+  position: absolute;
+  z-index: 1;
+
+  // Display
+  min-width: 100%;
+  overflow-y: auto;
+  padding: 8px 0;
+
+  // Other
+  background-color: mui-color('white');
+  font-size: $mui-input-font-size;
+
+  > div {
+    padding: 0 22px;
+    height: $mui-input-font-size + 26px;
+    line-height: $mui-input-font-size + 26px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: mui-color('grey', '300');
+    }
+
+    &[selected] {
+      background-color: mui-color('grey', '200'); 
+    }
+  }
+}
+
+
+
+// ============================================================================
+// INLINE-FORMS
+// ============================================================================
+
+.mui-form-inline {
+  @media (min-width: $mui-screen-sm-min) {
+    > * {
+      // Bottom align children
+      vertical-align: bottom;
+    }
+  
+    > .mui-form-group {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    > .mui-form-control,
+    > .mui-form-group > .mui-form-group {
+      display: inline-block;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    > .mui-radio,
+    > .mui-checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      vertical-align: middle;
+
+      > label {
+        padding-left: 0;
+      }
+    }
+    
+    > .mui-radio > label > input[type="radio"],
+    > .mui-checkbox > label > input[type="checkbox"] {
+      position: relative;
+      margin-left: 0;
+    }
+
+    > .mui-select {
+      display: inline-block;
+    }
+
+    > .mui-btn {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+}
+
+
+
+// ============================================================================
+// FORM-VALIDATION
+// ============================================================================
+
+.mui-form-control {
+  // 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) {
+      border-color: $mui-danger-color;
+      border-width: 2px;
+    }
+  }
+}
+
+// Treat <input>'s different from <textarea>'s
+input.mui-form-control: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) {
+    height: $mui-input-height + 1px;
+    margin-bottom: -1px;
+  }
+}
+
+.mui-form-group > .mui-form-control {
+  &: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) {
+      ~ 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) {
+      color: $mui-danger-color;
+    }
+  }
+}