mui_app_rails 0.0.1

data/app/assets/stylesheets/mui_app_rails/segmented-controls.scss

@@ -0,0 +1,150 @@
+//
+// Segmented controllers
+// --------------------------------------------------
+
+.#{$namespace}segmented-control {
+    position: relative;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    overflow: hidden;
+    font-size: 15px;
+    font-weight: $font-weight-light;
+    background-color: transparent;
+    border: 1px solid $primary-color;
+    border-radius: 3px;
+    -webkit-touch-callout: none;//(iOS平台)分段选择禁止长按弹出菜单；
+
+    &.#{$namespace}scroll-wrapper{
+        height: 38px;
+        .#{$namespace}scroll{
+            height: 40px;
+            width: auto;
+            white-space: nowrap;
+        }
+        .#{$namespace}control-item{
+            display: inline-block;
+            width: auto;
+            padding: 0 20px;
+            border: 0;
+        }
+    }
+    // Section within controller
+    .#{$namespace}control-item {
+        display: table-cell;
+        width: 1%;
+//      padding-top: 6px;
+//      padding-bottom: 7px;
+        overflow: hidden;
+        line-height: 38px;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-left: 1px solid $primary-color;
+        color: $primary-color;
+        border-color: $primary-color;
+        @include transition(background-color .1s linear);
+        // Remove border-left and shadow from first section
+        &:first-child {
+            border-left-width: 0;
+        }
+//      &:active {
+//          background-color: lighten($primary-color, 35%);
+//      }
+        // Selected state of segmented controller
+        &.#{$namespace}active {
+            color: #fff;
+            background-color: $primary-color;
+        }
+    }
+    &.#{$namespace}segmented-control-inverted{
+        width:100%;
+        border:0;
+        border-radius:0;
+        .#{$namespace}control-item {
+            border:0;
+            color: inherit;
+            &.#{$namespace}active {
+                color: $primary-color;
+                background: none;
+                border-bottom:2px solid $primary-color;
+            }
+        }
+        ~ .#{$namespace}slider-progress-bar{
+            background-color:$primary-color;
+        }
+    }
+}
+
+// Other segmented controller types
+// --------------------------------------------------
+
+// Positive
+.#{$namespace}segmented-control-positive {
+    border: 1px solid $positive-color;
+
+    .#{$namespace}control-item {
+        color: $positive-color;
+        border-color: inherit;
+
+//      &:active {
+//          background-color: lighten($positive-color, 35%);
+//      }
+        &.#{$namespace}active {
+            color: #fff;
+            background-color: $positive-color;
+        }
+    }
+    &.#{$namespace}segmented-control-inverted{
+        .#{$namespace}control-item {
+            &.#{$namespace}active {
+                color: $positive-color;
+                background: none;
+                border-bottom:2px solid $positive-color;
+            }
+        }
+        ~ .#{$namespace}slider-progress-bar{
+            background-color:$positive-color;
+        }
+    }
+}
+
+// Negative
+.#{$namespace}segmented-control-negative {
+    border: 1px solid $negative-color;
+
+    .#{$namespace}control-item {
+        color: $negative-color;
+        border-color: inherit;
+
+//      &:active {
+//          background-color: lighten($negative-color, 35%);
+//      }
+        &.#{$namespace}active {
+            color: #fff;
+            background-color: $negative-color;
+        }
+    }
+    &.#{$namespace}segmented-control-inverted{
+        .#{$namespace}control-item {
+            &.#{$namespace}active {
+                color: $negative-color;
+                background: none;
+                border-bottom:2px solid $negative-color;
+            }
+        }
+        ~ .#{$namespace}slider-progress-bar{
+            background-color:$negative-color;
+        }
+    }
+}
+
+// This is used to by the js to show and hide content tide to the segmented control.
+.#{$namespace}control-content {
+    position: relative;
+    display: none;
+
+    &.#{$namespace}active {
+        display: block;
+    }
+}

data/app/assets/stylesheets/mui_app_rails/slider-cell.scss

@@ -0,0 +1,20 @@
+.#{$namespace}slider-cell{
+    position:relative;
+    >.#{$namespace}slider-handle{
+        z-index:z("default");
+    }
+    >.#{$namespace}slider-left,>.#{$namespace}slider-right{
+        z-index:0;
+        position:absolute;
+        top:0;
+        bottom:0;
+    }
+    >.#{$namespace}slider-left{
+        left:0;
+    }
+    >.#{$namespace}slider-right{
+        right:z("default")-1;
+    }
+}
+
+    

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

@@ -0,0 +1,133 @@
+//
+// Slider styles (to be used with galleries.js)
+// --------------------------------------------------
+
+// Outer wrapper for slider
+.#{$namespace}slider {
+    //-webkit-backface-visibility: hidden;
+    overflow: hidden;
+    width: 100%;
+    position:relative;
+    .#{$namespace}segmented-control.#{$namespace}segmented-control-inverted{
+        .#{$namespace}control-item {
+            &.#{$namespace}active {
+                border-bottom:0;
+            }
+        }
+        ~ .#{$namespace}slider-group{
+            .#{$namespace}slider-item{
+                //@include hairline(double, #c8c7cc, 0); // double grey border.
+                border-top: 1px solid #c8c7cc;
+                border-bottom: 1px solid #c8c7cc;    
+            }
+        }
+     }
+    // Inner wrapper for slider (width of all sliders together)
+    .#{$namespace}slider-group {
+        //加上后好像内嵌轮播时，第一张图片显示有问题
+//      -webkit-backface-visibility: hidden;
+        position: relative;
+        font-size: 0; // Remove spaces from inline-block children
+        white-space: nowrap;
+        @include transition(all 0s linear);
+
+        // Individual slider
+        .#{$namespace}slider-item {
+//          -webkit-backface-visibility: hidden;
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            font-size: 14px;
+            vertical-align: top; // Ensure that li always aligns to top
+            >a:not(.#{$namespace}control-item){
+                position: relative;
+                line-height: 0;
+                display: block;
+            }
+            img{
+                width: 100%; 
+            }
+            .#{$namespace}table-view:before,.#{$namespace}table-view:after{
+                    height:0;
+             }
+//           .#{$namespace}table-view-cell:last-child:after{
+//               height: 0;
+//           }
+        }
+        &.#{$namespace}slider-loop{
+            @include transform(translate(-100%, 0px));
+        }
+//      &.#{$namespace}slider-loop .#{$namespace}slider-item{
+//          &:first-child{
+//              margin-left: -100%;
+//          }
+//          &:last-child{
+//              margin-right: -100%;
+//          }
+//      }
+    }
+}
+.#{$namespace}slider-title{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    text-align: left;
+    text-indent: 12px;
+    background-color: #000;
+    opacity: 0.8;
+    margin: 0;   
+}
+.#{$namespace}slider-indicator{
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align:center;
+    background:none;
+    &.#{$namespace}segmented-control{
+        position:relative;
+        bottom:auto;
+//      .#{$namespace}control-item{
+//          line-height: 40px;    
+//      }
+    }
+    .#{$namespace}indicator{
+        display: inline-block;
+        cursor: pointer;
+        background: #aaa;
+        width: 6px;
+        height: 6px;
+        margin: 1px 6px;
+        border-radius: 50%;
+        @include box-shadow(0 0 1px 1px rgba(130,130,130,.7));
+    }
+    .#{$namespace}active.#{$namespace}indicator{
+        background: #fff;
+    }
+    .#{$namespace}icon{
+        width: 40px;
+        height: 30px;
+        margin: 3px;
+        font-size: 20px;
+        line-height: 30px;
+        text-align: center;
+        border: 1px solid #dddddd;
+    }
+    .#{$namespace}number{
+        display: inline-block;
+        line-height: 32px;
+        width: 58px;
+        span{
+            color: #ff5053;
+        }
+    }
+}
+.#{$namespace}slider-progress-bar{
+    -webkit-backface-visibility: hidden;
+    @include transform(translateZ(0));
+    height:2px;
+    z-index:z("default");
+}

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

@@ -0,0 +1,115 @@
+//
+// switch styles (to be used with switchs.js)
+// --------------------------------------------------
+
+.#{$namespace}switch {
+    position: relative;
+    display: block;
+    width: 74px;
+    height: 30px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 2px solid #ddd;
+    border-radius: 20px;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    -webkit-transition-property: background-color, border;
+    transition-property: background-color, border;
+    &.#{$namespace}disabled {
+        opacity: .3;
+    }
+    // Sliding handle
+    .#{$namespace}switch-handle {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        z-index: z("default");
+        width: 28px;
+        height: 28px;
+        background-color: #fff;
+        background-clip: padding-box;
+//      border: 1px solid #ddd;
+        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.4);
+        box-shadow: 0 2px 5px rgba(0,0,0,.4);
+        border-radius: 16px;
+        -webkit-transition-property: -webkit-transform, width,left;
+        transition-property: transform, width,left;
+        -webkit-transition: 0.2s ease-in-out;
+        transition: 0.2s ease-in-out;
+    }
+    &:before {
+        position: absolute;
+        top: 3px;
+        right: 11px;
+        font-size: 13px;
+        color: #999;
+        text-transform: uppercase;
+        content: "Off";
+    }
+    &.#{$namespace}dragging {
+        background-color: $chrome-color;
+        border-color: $chrome-color;
+        .#{$namespace}switch-handle {
+           width: 38px;
+        }
+        &.#{$namespace}active{
+            .#{$namespace}switch-handle {
+               width: 38px;
+               left:-11px;
+            }    
+        }
+    }
+    // Active state for switchborder: 2px solid $positive-color;
+    &.#{$namespace}active {
+        background-color: $positive-color;
+        border-color: $positive-color;
+//        @include box-shadow(inset 0 0 0 13px $positive-color);
+        .#{$namespace}switch-handle {
+//          border-color: $positive-color;
+            @include transform(translate3d(43px,0,0));
+        }
+        &:before {
+            right: auto;
+            left: 15px;
+            color: #fff;
+            content: "On";
+        }
+    }
+    // Hide the checkbox
+    input[type="checkbox"] {
+        display: none;
+    }
+}
+
+.#{$namespace}switch-mini{
+    width: 47px;
+    &:before {
+        display: none;
+    }
+    // Active state for switch
+    &.#{$namespace}active {
+        .#{$namespace}switch-handle {
+            @include transform(translate3d(16px,0,0));
+        }
+    }
+}
+
+//增加蓝色开关
+.#{$namespace}switch-blue {
+    // Sliding handle
+    .#{$namespace}switch-handle {
+//      border: 1px solid rgba(0, 0, 0, .2);
+//      @include box-shadow(0 3px 3px rgba(0,0,0,.08));
+    }
+    // Active state for switch
+    &.#{$namespace}active {
+        background-color: $primary-color;
+        border: 2px solid $primary-color;
+//        @include box-shadow(inset 0 0 0 13px $primary-color);
+//      .#{$namespace}switch-handle {
+//          border-color: $primary-color;
+//      }
+    }
+}