mui_app_rails 0.0.1

data/app/assets/stylesheets/mui_app_rails/table-views.scss

@@ -0,0 +1,482 @@
+//
+// Table views
+// --------------------------------------------------
+
+.#{$namespace}table-view {
+    position: relative;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    list-style: none; // Remove usual bullet styles from table view
+    background-color: #fff;
+//  border-color:#c8c7cc;
+//  border-width: 1px 0px 1px 0px;
+//  border-style: solid;
+    @include hairline(double, #c8c7cc, 0); // Double grey border.
+
+}
+//.#{$namespace}table-view-striped>li:nth-child(odd){
+//  background-color: #f9f9f9;
+//  >.#{$namespace}slider-cell{
+//      >.#{$namespace}slider-left ~ .#{$namespace}slider-handle,>.#{$namespace}slider-right ~ .#{$namespace}slider-handle{
+//          background-color:#f9f9f9;
+//      }
+//  }
+//}
+.#{$namespace}table-view-icon .#{$namespace}table-view-cell{
+    .#{$namespace}navigate-right .#{$namespace}icon{
+        font-size: 20px;
+        margin-left: -5px;
+        margin-right: 5px;
+        margin-top: -1px;
+    }
+   &:after{
+       left:40px;
+   }
+}
+.#{$namespace}table-view-chevron .#{$namespace}table-view-cell{
+    padding-right: 65px;
+    > a:not(.#{$namespace}btn) {
+        margin-right: -65px;
+    }
+}
+.#{$namespace}table-view-radio .#{$namespace}table-view-cell{
+    padding-right: 65px;
+    > a:not(.#{$namespace}btn) {
+        margin-right: -65px;
+    }
+    .#{$namespace}navigate-right:after{
+        right:9px;
+        content: '';
+        color:$primary-color;
+        font-size: 30px;
+        font-weight: 600;
+    }
+    &.#{$namespace}selected .#{$namespace}navigate-right:after{
+        content: '\e472';
+    }
+}
+//.#{$namespace}table-view-slider .#{$namespace}table-view-cell{
+//  padding:11px 0;
+//  > a:not(.#{$namespace}btn) {
+//      margin-right: 0;
+//  }
+//}
+.#{$namespace}table-view-inverted {
+    background: #333;
+    color: #fff;
+    @include hairline(double, #222, 0); // Double grey border.
+    .#{$namespace}table-view-cell{
+        @include hairline(single, #222, 15px); // Single grey border with 15px offset.
+        &.#{$namespace}active {
+                background-color: #242424;
+            } 
+        > a:not(.#{$namespace}btn) {
+            &.#{$namespace}active {
+                background-color: #242424;
+            }
+        } 
+    }
+}
+// Pad each table view item and add dividers
+.#{$namespace}table-view-cell {
+    position: relative;
+    padding: 11px 15px;
+    overflow: hidden;
+    background-color: inherit;
+    @include hairline(single, #c8c7cc, 15px); // Single grey border with 15px offset.
+    -webkit-touch-callout: none;//禁止长按出现打开菜单；
+    &.#{$namespace}radio input[type=radio],&.#{$namespace}checkbox input[type=checkbox]{
+        top:8px;
+    }
+    &.#{$namespace}radio.#{$namespace}left,&.#{$namespace}checkbox.#{$namespace}left{
+        padding-left: 58px;
+    }
+    &.#{$namespace}active {
+        background-color: #eee;
+//      >.#{$namespace}slider-cell{
+//          >.#{$namespace}slider-left ~ .#{$namespace}slider-handle,>.#{$namespace}slider-right ~ .#{$namespace}slider-handle{
+//              background-color:#eee;
+//          }
+//      }
+    }
+    // Remove the border from the last table view item
+    &:last-child {
+        //background-image: none;
+        &:before,&:after{
+            height:0;
+        }
+    }
+    // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
+    > a:not(.#{$namespace}btn) {
+        position: relative;
+        display: block;
+        padding: inherit;
+        margin: -11px -15px; // Make the entire list item tappable.
+        overflow: hidden;
+        color: inherit;
+        white-space: nowrap;        
+        text-overflow: ellipsis;
+        /*&:active {
+            background-color: #eee;
+        }*/
+        &.#{$namespace}active {
+            background-color: #eee;
+        }
+    }
+    p {
+        margin-bottom: 0;
+    }
+//  >.#{$namespace}slider-cell{
+//      margin-top:1px;
+//      margin-bottom:1px;
+//      >.#{$namespace}slider-handle{
+//          position:absolute;
+//          left:0;
+//          right:0;
+//          top:0;
+//          bottom:0;
+//          @include transform(translate3d(100%, 0px, 0px));
+//      }
+//      >.#{$namespace}slider-left ~ .#{$namespace}slider-handle,>.#{$namespace}slider-right ~ .#{$namespace}slider-handle{
+//          position:relative;
+//          z-index:z("default");
+//          background-color:#fff;
+//          padding-left:15px;
+//          left:auto;
+//          right:auto;
+//          top:auto;
+//          bottom:auto;
+//          @include transform(translate3d(0px, 0px, 0px));
+//      }
+//      >.#{$namespace}slider-left,>.#{$namespace}slider-right{
+//          top:1px;
+//          bottom:1px;
+//      }
+//  }
+}
+.#{$namespace}table-view-cell {
+    &.#{$namespace}transitioning{
+    >.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{
+        -webkit-transition: -webkit-transform 300ms ease;
+        transition: transform 300ms ease; 
+        }
+    }
+    &.#{$namespace}active>.#{$namespace}slider-handle{
+        background-color: #eee;
+    }
+    >.#{$namespace}slider-handle{
+        background-color: #fff;
+        position: relative;
+        &.#{$namespace}navigate-right:after,.#{$namespace}navigate-right:after{
+            right: 0;
+        }
+    }
+    >.#{$namespace}slider-handle,>.#{$namespace}slider-left .#{$namespace}btn,>.#{$namespace}slider-right .#{$namespace}btn{
+        -webkit-transition: -webkit-transform 0ms ease;
+        transition: transform 0ms ease;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        }
+     >.#{$namespace}slider-left,>.#{$namespace}slider-right{
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        >.#{$namespace}btn{
+          padding: 0 30px;
+          color: #fff;
+          border-radius:0;
+          border:0;
+//        background: #c7c7cc;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          align-items: center;
+          position: relative;
+          left: 0;
+          &:after{
+              content: '';
+              position: absolute;
+              top: 0;
+              width: 600%;
+              height: 100%;
+              background: inherit;
+              z-index: -1;
+          }
+          &.#{$namespace}icon{
+              font-size: 30px;
+          }
+        }   
+     }
+     >.#{$namespace}slider-right{
+      right: 0%;
+      -webkit-transform: translateX(100%);
+      transform: translateX(100%);
+      -webkit-transition: -webkit-transform 0ms ease;
+      transition: transform 0ms ease;
+  }
+  >.#{$namespace}slider-left{
+        left: 0;
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        -webkit-transition: -webkit-transform 0ms ease;
+        transition: transform 0ms ease;
+    > .#{$namespace}btn:after{
+        right: 100%;
+        margin-right: -1px;
+    }
+  }
+  
+}
+
+// Table view dividers
+// --------------------------------------------------
+
+.#{$namespace}table-view-divider {
+    position: relative;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-left: 15px;
+    margin-top: -1px; // Hides the border of the previous list item
+    margin-left: 0;
+    font-weight: $font-weight;
+    color: #999;
+    background-color: #fafafa;
+    @include hairline(double, #c8c7cc, 0);  // Double (top and bottom) grey border with no offset.
+}
+
+
+// Table-views with media (images,avatars, icons)
+// --------------------------------------------------
+
+.#{$namespace}table-view .#{$namespace}media,
+.#{$namespace}table-view .#{$namespace}media-body {
+    overflow: hidden;
+}
+
+.#{$namespace}table-view {
+    .#{$namespace}media-large .#{$namespace}media-object {
+        max-width: 80px;
+        height: 80px;
+        line-height: 80px;
+    }
+    .#{$namespace}media .#{$namespace}subtitle{
+        color: #000;
+    }
+    .#{$namespace}media-object {
+        max-width: 42px;
+        height: 42px;
+        line-height: 42px;
+        &.#{$namespace}pull-left {
+            margin-right: 10px;
+        }
+        &.#{$namespace}pull-right {
+            margin-left: 10px;
+        }
+    }
+    .#{$namespace}table-view-cell.#{$namespace}media-icon{
+       .#{$namespace}media-object {
+            max-width: 29px;
+            height: 29px;
+            line-height: 29px;
+            margin:-4px 0;
+            img{
+                max-width: 29px;
+                height: 29px;
+                line-height: 29px;    
+            }
+            &.#{$namespace}pull-left {
+                margin-right: 10px;
+            }
+            .#{$namespace}icon{
+                font-size: 29px;
+            }
+        }
+        .#{$namespace}media-body{
+            @include hairline(single, #c8c7cc, 55px); // single grey border.
+        }
+       &:after{
+           height:0!important;
+       }  
+    }
+}
+.#{$namespace}table-view.#{$namespace}unfold{
+    .#{$namespace}table-view-cell.#{$namespace}collapse .#{$namespace}table-view{
+        display: block;
+        &:before,&:after{
+            height:0!important;
+        } 
+    }
+    .#{$namespace}table-view-cell.#{$namespace}media-icon.#{$namespace}collapse{
+        .#{$namespace}media-body{
+            @include hairline(single, #c8c7cc, 70px); // single grey border.
+        }
+    }
+}
+
+// Table-views with buttons, badges and switchs
+// --------------------------------------------------
+.#{$namespace}table-view-cell,
+.#{$namespace}table-view-cell > a {
+    > .#{$namespace}btn,
+    > .#{$namespace}badge,
+    > .#{$namespace}switch {
+        position: absolute;
+        top: 50%;
+        right: 15px;
+        @include transform(translateY(-50%));
+    }
+
+    // If the cell has a chevron, give some more room.
+    .#{$namespace}navigate-left,
+    .#{$namespace}navigate-right,
+    .#{$namespace}push-left,
+    .#{$namespace}push-right {
+        > .#{$namespace}btn,
+        > .#{$namespace}badge,
+        > .#{$namespace}switch {
+            right: 35px;
+        }
+    }
+}
+
+// If the table view is the first component, give it extra margin on top.
+.#{$namespace}content > .#{$namespace}table-view:first-child {
+    margin-top: 15px;
+}
+
+//collapse
+.#{$namespace}table-view-cell.#{$namespace}collapse{
+    .#{$namespace}table-view:after{
+        left:15px;
+    }
+    //二级列表默认为向下箭头；
+    >.#{$namespace}navigate-right:after, >.#{$namespace}push-right:after {
+        content: '\e581';
+    }
+
+    &.#{$namespace}active{
+        
+        .#{$namespace}table-view,.#{$namespace}collapse-content{
+            display: block;
+        }
+        //二级列表展开后，变为向上箭头；
+        >.#{$namespace}navigate-right:after, >.#{$namespace}push-right:after {
+            content: '\e580';
+        }
+    }
+    .#{$namespace}collapse-content{
+        display:none;
+        padding: 8px 15px;
+        margin: 11px -15px -11px;
+        background: white;
+        border: 1px solid #ddd;
+        position: relative;
+        overflow: hidden;
+        -webkit-transition: height .35s ease;
+        -o-transition: height .35s ease;
+        transition: height .35s ease;
+        >.#{$namespace}input-group,>.#{$namespace}slider{
+            margin:-8px -15px;
+            width:auto;
+            height:auto;
+        }
+        >.#{$namespace}slider{
+            margin:-8px -16px;
+        }
+    }
+    .#{$namespace}table-view{
+        display: none;
+        margin-bottom: -11px;
+        margin-top: 11px;
+        margin-right: -15px;
+        margin-left:-15px;
+        border: 0;
+        &.#{$namespace}table-view-chevron{
+            margin-right:-65px;
+        }
+        .#{$namespace}table-view-cell{
+            padding-left: 31px;
+            background-position: 31px 100%;
+            @include hairline(single, #c8c7cc, 30px);
+        }
+    }
+}
+//grid
+.#{$namespace}table-view.#{$namespace}grid-view{
+    display:block;
+    padding:0 10px 10px 0;
+    width:100%;
+    white-space:normal;
+    font-size:0;
+    .#{$namespace}table-view-cell{
+        font-size: $font-size-default;
+        display: inline-block;
+        padding:10px 0 0 14px;
+        background:none;
+        text-align:center;
+        vertical-align: middle;
+        margin-right:-4px;
+        .#{$namespace}media-object{
+            width:100%;
+            max-width:100%;
+            height: auto;
+        }
+        > a:not(.#{$namespace}btn){
+            margin:-10px 0 0 -14px;
+            &:active,&.#{$namespace}active{
+                background: none;
+            }
+        }
+        .#{$namespace}media-body{
+            display: block;
+            height: 15px;
+            line-height: 15px;
+            color:#333;
+            font-size: 15px;
+            margin-top:8px;
+            width:100%;
+            text-overflow: ellipsis;
+        }
+        &:before,&:after{
+            height:0;
+        }
+    }
+}
+//grid-9
+.#{$namespace}grid-view.#{$namespace}grid-9{
+    padding-right: 0;
+    background-color: #f2f2f2;
+    padding: 1px 0 1px 0;
+    .#{$namespace}table-view-cell {
+        vertical-align: top;
+        padding:11px 15px;
+        border-left: 1px solid #EEE;
+        border-top: 1px solid #EEE;
+        margin: -1px 0 0 -1px;
+        &.#{$namespace}active{
+            background-color:#eee;
+        }
+        > a:not(.#{$namespace}btn){
+              padding: 10px 0;
+              margin: 0;
+        }
+    }
+    &:before{
+        height: 0;
+    }
+    .#{$namespace}media {
+        color: #797979;
+        .#{$namespace}icon{
+            font-size: 2.4em;
+            position: relative;
+        }
+    }
+}

data/app/assets/stylesheets/mui_app_rails/toast.scss

@@ -0,0 +1,16 @@
+.#{$namespace}toast-container {
+	position: fixed;
+	width: 100%;
+	bottom: 50px;
+	z-index: z("toast");
+}
+.#{$namespace}toast-message {
+	width: 270px;
+	margin: 5px auto 5px auto;
+	padding: 5px 5px 5px 5px;
+	background-color: #D8D8D8;
+	text-align: center;
+	color: #000;
+	border-radius: 7px;
+	font-size: 14px;
+}

data/app/assets/stylesheets/mui_app_rails/type.scss

@@ -0,0 +1,23 @@
+//
+// Typography
+// --------------------------------------------------
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  line-height: 1;
+}
+h1, .#{$namespace}h1 { font-size: 36px; }
+h2, .#{$namespace}h2 { font-size: 30px; }
+h3, .#{$namespace}h3 { font-size: 24px; }
+h4, .#{$namespace}h4 { font-size: 18px; }
+h5, .#{$namespace}h5 { font-size: 14px; color: #8f8f94;font-weight: normal; }
+h6, .#{$namespace}h6 { font-size: 12px; color: #8f8f94;font-weight: normal; }
+
+// Paragraphs
+p {
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #8f8f94;
+}

data/app/assets/stylesheets/mui_app_rails/variables.scss

@@ -0,0 +1,64 @@
+//
+// Variables
+// --------------------------------------------------
+$namespace: "mui-" !default;
+
+// Type
+// --------------------------------------------------
+$font-family-default: "Helvetica Neue", Helvetica, sans-serif !default;
+$font-size-default: 17px !default;
+$font-weight: 500 !default;
+$font-weight-light: 400 !default;
+$line-height-default: 21px !default;
+
+
+// Colors
+// --------------------------------------------------
+
+// Main theme colors
+//blue theme
+$primary-color: #007aff !default;
+//green theme
+//$primary-color: #4cd964 !default;
+$chrome-color:  rgba(247,247,247,.98) !default;
+
+// Action colors
+$default-color:  #929292 !default;
+$positive-color: #4cd964 !default;
+$negative-color: #dd524d !default;
+$warning-color: #f0ad4e !default;
+$royal-color: #8a6de9 !default;
+$grey-color:#c7c7cc !default;
+
+
+// Bars
+// --------------------------------------------------
+
+$bar-base-height:  44px !default;
+$bar-tab-height:   50px !default;
+$bar-side-spacing: 10px !default;
+
+
+// Cards
+// --------------------------------------------------
+
+$card-bg: #fff !default;
+
+
+// Buttons
+// --------------------------------------------------
+
+$button-font-size: 14px !default;
+
+
+// Transitions
+// --------------------------------------------------
+
+$timing-fuction: cubic-bezier(.1,.5,.1,1) !default; // Inspired by @c2prods
+
+
+// Borders
+// --------------------------------------------------
+
+$border-default: 1px solid #ddd !default;
+$border-radius: 6px !default;

data/app/assets/stylesheets/mui_app_rails.css

@@ -0,0 +1,3 @@
+/*
+ *=require mui_app_rails/mui
+*/

data/lib/mui_app_rails/engine.rb

@@ -0,0 +1,5 @@
+module MuiAppRails
+  class Engine < ::Rails::Engine
+    isolate_namespace MuiAppRails
+  end
+end

data/lib/mui_app_rails/version.rb

@@ -0,0 +1,3 @@
+module MuiAppRails
+  VERSION = "0.0.1"
+end

data/lib/mui_app_rails.rb

@@ -0,0 +1,5 @@
+require "mui_app_rails/version"
+
+module MuiAppRails
+	
+end