mui_app_rails 0.0.1

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

@@ -0,0 +1,155 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+
+.#{$namespace}pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 0 auto;
+  border-radius: $border-radius;
+
+  > li {
+    display: inline; // Remove list-style and block-level defaults
+    > a,
+    > span {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: 6px 12px;
+      line-height: 1.428571429;
+      text-decoration: none;
+      color: $primary-color;
+      background-color: #fff;
+      border: $border-default;
+      margin-left: -1px;
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+        background-clip: padding-box;
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        background-clip: padding-box;
+      }
+    }
+  }
+
+  > li:active > a,
+  > li:active > span,
+  > li.#{$namespace}active > a,
+  > li.#{$namespace}active > span {
+    &,
+    &:active {
+      z-index: z("default")+1;
+      color: #fff;
+      background-color: $primary-color;
+      border-color: $primary-color;
+      cursor: default;
+    }
+  }
+
+  > li.#{$namespace}disabled {
+    > span,
+    > span:active,
+    > a,
+    > a:active {
+      color:#777;
+      opacity: .6;
+      background-color:#fff;
+      border: $border-default;
+    }
+  }
+}
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.#{$namespace}pagination-lg>li {
+    > a,
+    > span {
+      padding: 10px 16px;
+      font-size: 18px;
+    }
+}
+
+// Small
+.#{$namespace}pagination-sm >li{
+    > a,
+    > span {
+      padding: 5px 10px;
+      font-size: 12px;
+    }
+}
+
+
+
+.#{$namespace}pager {
+  padding-left: 0;
+  list-style: none;
+  text-align: center;
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+  li {
+    display: inline;
+    > a,
+    > span {
+      display: inline-block;
+      padding: 5px 14px;
+      background-color: #fff;
+      background-clip: padding-box;
+      border: $border-default;
+      border-radius: $border-radius;
+    }
+    &:active>a,
+    &:active>span,
+    &.#{$namespace}active > a ,
+    &.#{$namespace}active > span {
+      text-decoration: none;
+      color: #fff;
+      background-color: $primary-color;
+      border-color: $primary-color;
+      cursor: default;
+    }
+  }
+
+  .#{$namespace}next {
+    > a,
+    > span {
+      float: right;
+    }
+  }
+
+  .#{$namespace}previous {
+    > a,
+    > span {
+      float: left;
+    }
+  }
+
+  .#{$namespace}disabled {
+    > a,
+    > a:active,
+    > span,
+    > span:active{
+        color:#777;
+        opacity: .6;
+        background-color:#fff;
+        border: $border-default;
+    }
+  }
+
+}

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

@@ -0,0 +1,198 @@
+//
+// Popovers (to be used with popovers.js)
+// --------------------------------------------------
+
+.#{$namespace}popover {
+    position: absolute;
+    z-index: z("popover","popover");
+    display: none;
+    width: 280px;
+    background-color: $chrome-color;
+    border-radius: 7px;
+    opacity: 0;
+    @include box-shadow(0 0 15px rgba(0, 0, 0, .1));
+    -webkit-transition: opacity .3s;
+    transition: opacity .3s;
+    -webkit-transform: none;
+    transform: none;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+   .#{$namespace}popover-arrow{
+        width: 26px;
+        height: 26px;
+        position: absolute;
+        left: 0px;
+        top: -25px;
+        z-index: z("popover","arrow");
+        overflow: hidden;
+        &:after {
+            content: ' ';
+            background: $chrome-color;
+            width: 26px;
+            height: 26px;
+            position: absolute;
+            left: 0;
+            top: 19px;
+            border-radius: 3px;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+        &.#{$namespace}bottom{
+            left:-26px;
+            top: 100%;
+            margin-top: -1px;
+            &:after {
+                left: 0;
+                top: -19px;
+            }
+        }
+   }
+   
+   &.#{$namespace}popover-action{
+        //display: block;//加上后可实现从底部出来动画效果，但会导致html页面高度增加
+        bottom:0;
+        width: 100%;
+        border-radius:0;
+        @include transform(translate3d(0, 100%, 0));
+        -webkit-transition: -webkit-transform .3s, opacity .3s;
+        transition: transform .3s, opacity .3s;
+        background: none;
+        @include box-shadow(none);
+        .#{$namespace}popover-arrow{
+            display: none;
+        }
+        // Active modal
+        &.#{$namespace}active {
+            @include transform(translate3d(0, 0, 0));
+        }
+        .#{$namespace}table-view {
+            margin: 8px;
+            border-radius:4px;
+            text-align: center;
+            color: $primary-color;
+            .#{$namespace}table-view-cell {
+                @include hairline(single, #c8c7cc, 0); // Single grey border with 15px offset.
+            }
+            small{
+                line-height: 1.3;
+                font-weight: 400;
+                display: block;
+            }
+        }
+
+    }
+
+    // Popover transition
+    // --------------------------------------------------
+
+    &.#{$namespace}active {
+        display: block;
+        opacity: 1;
+    }
+
+    // Give correct spacing to the content if there is a bar inside the popover.
+    .#{$namespace}bar ~ .#{$namespace}table-view {
+        padding-top: $bar-base-height;
+    }
+}
+
+// Backdrop (used as invisible touch escape)
+// --------------------------------------------------
+
+.#{$namespace}backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: z("backdrop");
+    background-color: rgba(0,0,0,.3);
+}
+
+.#{$namespace}bar-backdrop.#{$namespace}backdrop{
+    bottom: 50px;
+    background:none;
+}
+.#{$namespace}backdrop-action.#{$namespace}backdrop{
+   // bottom:50px;
+    background-color: rgba(0,0,0,.3);
+}
+.#{$namespace}bar-backdrop.#{$namespace}backdrop,.#{$namespace}backdrop-action.#{$namespace}backdrop{
+    opacity:0;
+    &.#{$namespace}active {
+        opacity: 1;
+        @include transition(all 0.4s ease);
+    }
+}
+// Block level buttons in popovers
+// --------------------------------------------------
+
+.#{$namespace}popover .#{$namespace}btn-block {
+    margin-bottom: 5px;
+
+    // Remove extra margin on bottom of last button
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// Popovers with nav bars
+// --------------------------------------------------
+.#{$namespace}popover .#{$namespace}bar {
+    @include box-shadow(none);
+}
+.#{$namespace}popover .#{$namespace}bar-nav {
+    border-bottom: 1px solid rgba(0,0,0,.15);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    @include box-shadow(none);
+}
+
+// scroll in popovers
+.#{$namespace}popover .#{$namespace}scroll-wrapper{
+    background-clip: padding-box;
+    border-radius: 7px;
+    margin: 7px 0;// border radius not work(fixed android)
+}
+// Table views in popovers
+// --------------------------------------------------
+.#{$namespace}popover .#{$namespace}scroll .#{$namespace}table-view{
+    max-height: none;
+}
+.#{$namespace}popover .#{$namespace}table-view {
+    max-height: 300px;
+    margin-bottom: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    background-color: $chrome-color;
+    background-image: none;
+    border-radius: 7px;
+    &:before,&:after{
+        height: 0;
+    }
+    .#{$namespace}table-view-cell:first-child{
+        &,
+        > a:not(.mui-btn){
+            border-top-right-radius: 12px;
+            border-top-left-radius: 12px;     
+        }
+    }
+    .#{$namespace}table-view-cell:last-child{
+        &,
+        > a:not(.mui-btn){
+            border-bottom-right-radius: 12px;
+            border-bottom-left-radius: 12px;
+        }
+    }
+}
+.#{$namespace}popover.#{$namespace}bar-popover .#{$namespace}table-view{
+    width:106px;
+    .#{$namespace}table-view-cell{
+        padding:11px 15px 11px 15px;
+        background-position:0px 100%;
+    }
+    .#{$namespace}table-view-cell > a:not(.#{$namespace}btn){
+        margin:-11px -15px -11px -15px;
+    }
+}

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

@@ -0,0 +1,98 @@
+.#{$namespace}pull-top-pocket,.#{$namespace}pull-bottom-pocket{
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    visibility:hidden;
+}
+//android 5+
+.#{$namespace}plus-pullrefresh{
+    .#{$namespace}pull-top-pocket,.#{$namespace}pull-bottom-pocket{
+        display: none;
+        visibility:visible;
+    }
+}
+.#{$namespace}pull-top-pocket{
+    top:0px;
+}
+.#{$namespace}bar-nav~.#{$namespace}content .#{$namespace}pull-top-pocket{
+    top: 44px;
+}
+.#{$namespace}bar-nav~.#{$namespace}bar-header-secondary~.#{$namespace}content .#{$namespace}pull-top-pocket{
+    top: 88px;
+}
+.#{$namespace}pull-bottom-pocket{
+    bottom:0;
+    height: 40px;
+    position:relative;
+    .#{$namespace}pull-loading{
+        visibility:hidden;
+        &.#{$namespace}in{
+            display: inline-block;
+        }
+    }   
+}
+//android 5+
+//.#{$namespace}plus-pullrefresh{
+//  .#{$namespace}pull-bottom-pocket{
+//      position: relative;
+//      left: auto;
+//      bottom: auto;
+//  }
+//}
+//.#{$namespace}bar-nav ~ .#{$namespace}content{
+//  .#{$namespace}pull-top-pocket{
+//      top:-445px;
+//  }
+//}
+.#{$namespace}pull{
+    position: absolute;
+    left: 0;
+    bottom: 10px;
+    right: 0;
+    color: #777;
+    text-align: center;
+    //text-shadow: 1px 1px 0 #dfdfdf;
+    font-weight: bold;
+}
+
+//.#{$namespace}pull-loading{
+//  
+//display: inline-block;
+//width: 20px;
+//height: 20px;
+//background-image: url("data:image/GIF;base64,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");
+//background-size:contain;
+//background-position:center center;
+//background-repeat:no-repeat;
+//vertical-align: middle;
+//}
+.#{$namespace}pull-loading{
+    -webkit-backface-visibility: hidden;
+    -webkit-transition-duration: 400ms;
+    transition-duration: 400ms;
+    -webkit-transition:-webkit-transform 0.4s;
+    transition: transform 0.4s;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+.#{$namespace}pull-loading.#{$namespace}reverse{
+    @include transform(rotate(180deg) translateZ(0));
+}
+.#{$namespace}pull-caption{
+    display: inline-block;
+    line-height: 24px;
+    font-size: 15px;
+    margin-top: 0;
+    vertical-align: middle;
+    position: relative;
+    overflow: visible;
+    span{
+        display: none;
+        &.#{$namespace}in{
+            display: inline;
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+//
+// Push styles (to be used with push.js)
+// --------------------------------------------------
+
+.#{$namespace}content {
+  // Fade animation
+  &.#{$namespace}fade {
+    left: 0;
+    opacity: 0;
+
+    &.#{$namespace}in {
+      opacity: 1;
+    }
+  }
+
+  // Slide animation
+  &.#{$namespace}sliding {
+    z-index: z("default")+1;
+    -webkit-transition: -webkit-transform .4s;
+            transition: transform .4s;
+    @include transform(translate3d(0, 0, 0));
+
+    &.#{$namespace}left {
+      z-index: z("default");
+      @include transform(translate3d(-100%, 0, 0));
+    }
+
+    &.#{$namespace}right {
+      z-index: z("default")+2;
+      @include transform(translate3d(100%, 0, 0));
+    }
+  }
+}
+
+// Add chevrons to elements
+.#{$namespace}navigate-left,
+.#{$namespace}navigate-right,
+.#{$namespace}push-left,
+.#{$namespace}push-right {
+  &:after {
+    position: absolute;
+    top: 50%;
+    display: inline-block;
+    font-family: Muiicons;
+    font-size: inherit;
+    line-height: 1;
+    color: #bbb;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    @include transform(translateY(-50%));
+  }
+}
+
+.#{$namespace}navigate-left:after,
+.#{$namespace}push-left:after {
+  left: 15px;
+  content: '\e582';
+}
+.#{$namespace}navigate-right:after,
+.#{$namespace}push-right:after{
+  right: 15px;
+  content: '\e583';
+}

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

@@ -0,0 +1,95 @@
+
+.#{$namespace}scroll-wrapper {
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    z-index: z("default");
+    top: 0px;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    overflow: hidden;
+}
+.#{$namespace}scroll {
+    -webkit-backface-visibility: hidden;
+    position: absolute;
+    z-index: z("default");
+    width: 100%;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+
+.#{$namespace}scrollbar{
+    position: absolute;
+    z-index: z("scroll","scrollbar");
+    overflow: hidden;
+    transform: translateZ(0px);
+    transition: 500ms;
+    -webkit-transition: 500ms;
+    opacity: 0;
+    pointer-events: none;
+}
+.#{$namespace}scrollbar-vertical{
+    width: 4px;
+    bottom: 2px;
+    top: 0;
+    right: 1px;
+    .#{$namespace}scrollbar-indicator{
+        width:100%;
+    }
+}
+.#{$namespace}scrollbar-horizontal{
+    height: 4px;
+    left: 2px;
+    right: 2px;
+    bottom: 0px;
+    .#{$namespace}scrollbar-indicator{
+        height:100%;
+    }
+}
+
+.#{$namespace}scrollbar-indicator{
+    box-sizing: border-box;
+    position: absolute;
+    border: 1px solid rgba(255, 255, 255, 0.801961);
+    border-radius: 2px;
+    transition: 0.01s cubic-bezier(0.1, 0.57, 0.1, 1);
+    -webkit-transition: 0.01s cubic-bezier(0.1, 0.57, 0.1, 1);
+    display: block;
+    transform: translate(0px, 0px) translateZ(0px);
+    background: rgba(0, 0, 0, 0.398039);
+}
+
+//android 5+
+.#{$namespace}plus-pullrefresh{
+    .#{$namespace}fullscreen{
+        .#{$namespace}scroll-wrapper,.#{$namespace}slider-group {
+            .#{$namespace}scroll-wrapper {
+                position: absolute;
+                top: 0px;
+                bottom: 0px;
+                left: 0;
+                width: 100%;
+                overflow: hidden;
+            }
+             .#{$namespace}scroll {
+                position: absolute;
+                width: 100%;
+            }  
+        }
+    }
+    .#{$namespace}scroll-wrapper,.#{$namespace}slider-group {
+        position: static;
+        top: auto;
+        bottom: auto;
+        left: auto;
+        width: auto;
+        overflow: auto;
+    }
+    .#{$namespace}slider-group{
+        overflow: visible;
+    }
+    .#{$namespace}scroll {
+        position: static;
+        width: auto;
+    }   
+}