mui_app_rails 0.0.1

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

@@ -0,0 +1,312 @@
+//
+// Bars
+// --------------------------------------------------
+
+.#{$namespace}bar {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: z("bar","bar");
+    height: $bar-base-height;
+    padding-right: $bar-side-spacing;
+    padding-left: $bar-side-spacing;
+    background-color: $chrome-color;
+    border-bottom: 0;
+    @include box-shadow(0 0 1px rgba(0,0,0,.85));
+    -webkit-backface-visibility: hidden; // Make sure the bar is visible when a modal animates in.
+    backface-visibility: hidden;
+}
+
+//fixed by fxy
+.#{$namespace}bar{
+    .#{$namespace}title{
+        width: auto;
+        left: 40px;
+        right: 40px;
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+    }
+    .#{$namespace}backdrop {
+        background: none;
+    }
+
+}
+
+// Modifier class to dock any bar below .#{$namespace}bar-nav
+.#{$namespace}bar-header-secondary {
+    top: $bar-base-height;
+}
+
+// Modifier class for footer bars
+.#{$namespace}bar-footer {
+    bottom: 0;
+}
+
+// Modifier class to dock any bar above a standard bar
+.#{$namespace}bar-footer-secondary {
+    bottom: $bar-base-height;
+}
+
+// Modifier class to dock any bar above a .#{$namespace}bar-tab
+.#{$namespace}bar-footer-secondary-tab {
+    bottom: $bar-tab-height;
+}
+
+// Give the footers the correct border
+.#{$namespace}bar-footer,
+.#{$namespace}bar-footer-secondary,
+.#{$namespace}bar-footer-secondary-tab {
+    border-top: 0;
+}
+
+
+// Nav bar
+// --------------------------------------------------
+
+// Bar docked to top of viewport for showing page title and actions
+.#{$namespace}bar-nav {
+    top: 0;
+    -webkit-box-shadow: 0px 1px 6px #CCC;
+    box-shadow: 0px 1px 6px #CCC;
+    ~ .#{$namespace}content .#{$namespace}anchor{
+        display: block;
+        height: 45px;
+        margin-top: -45px;
+        visibility: hidden;
+    }
+    &.#{$namespace}bar .#{$namespace}icon{
+        margin-left: -10px;
+        margin-right: -10px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+// Centered text in the .#{$namespace}bar-nav
+//
+// We position the absolutely to make sure the title is always centered
+.#{$namespace}title {
+    position: absolute;
+    display: block;
+    width: 100%;
+    padding: 0;
+    margin: 0 (-$bar-side-spacing);
+    font-size: $font-size-default;
+    font-weight: $font-weight;
+    line-height: $bar-base-height;
+    color: #000;
+    text-align: center;
+    white-space: nowrap;
+}
+// Retain specified title color
+.#{$namespace}title a {
+    color: inherit;
+}
+
+
+// Tab bar
+// --------------------------------------------------
+
+// Bar docked to bottom and used for primary app navigation
+.#{$namespace}bar-tab {
+    display: table;
+    bottom: 0;
+    width: 100%;
+    height: $bar-tab-height;
+    padding: 0;
+    table-layout: fixed;
+    border-top: 0;
+    border-bottom: 0;
+    -webkit-touch-callout: none;//选项卡上禁止长按弹出菜单；
+
+    // Navigational tab (Nested to be more specific for the icons in tab-items)
+    .#{$namespace}tab-item {
+        display: table-cell;
+        width: 1%;
+        height: $bar-tab-height;
+        color: #929292;
+        text-align: center;
+        vertical-align: middle;
+        //自动处理超出部分的文字；
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        // Active states for the tab bar
+        &.#{$namespace}active {
+            color: $primary-color;
+        }
+
+        // Tab icon
+        .#{$namespace}icon {
+            top: 3px;
+            width: 24px;
+            height: 24px;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            // Make the text smaller if it's used with an icon
+            ~ .#{$namespace}tab-label {
+                display: block;
+                font-size: 11px;
+                //处理超出部分文字；
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            &:active {
+                background: none;
+            }
+        }
+    }
+}
+.#{$namespace}focusin>.#{$namespace}bar{
+    position:absolute;
+}
+
+//.#{$namespace}focusin>.#{$namespace}bar-tab,
+//.#{$namespace}focusin> .#{$namespace}bar-footer,
+//.#{$namespace}focusin>.#{$namespace}bar-footer-secondary,
+//.#{$namespace}focusin>.#{$namespace}bar-footer-secondary-tab{
+//  position:static;
+//}
+// Bars with buttons
+// --------------------------------------------------
+
+.#{$namespace}bar .#{$namespace}btn {
+    position: relative;
+    top: 7px;
+    z-index: z("bar","btn"); // Position the buttons on top of .#{$namespace}title
+    padding: 6px 12px 7px;
+    margin-top: 0;
+    font-weight: $font-weight-light;
+
+    // Give buttons that are floated left and right side margin
+    &.#{$namespace}pull-right {
+        margin-left: $bar-side-spacing;
+    }
+    &.#{$namespace}pull-left {
+        margin-right: $bar-side-spacing;
+    }
+}
+
+// Bars with link buttons (Line the text up with content)
+.#{$namespace}bar .#{$namespace}btn-link {
+    top: 0;
+    padding: 0;
+    font-size: 16px;
+    line-height: $bar-base-height;
+    color: $primary-color;
+    border: 0;
+
+    &:active,
+        &.#{$namespace}active {
+        color: darken($primary-color, 10%);
+    }
+}
+
+// Bars with block buttons
+//
+// Add proper padding
+.#{$namespace}bar .#{$namespace}btn-block {
+    top: 6px;
+    padding: 5px 0;
+    margin-bottom: 0;
+    font-size: 16px; // Scale down font size to fit in bar.
+}
+
+// Nav buttons (Only applicable within bars)
+//
+// Buttons inside bars that sit closer against the viewport.
+.#{$namespace}bar .#{$namespace}btn-nav {
+    &.#{$namespace}pull-left {
+        margin-left: -5px;
+
+        .#{$namespace}icon-left-nav {
+            margin-right: -3px;
+        }
+    }
+    &.#{$namespace}pull-right {
+        margin-right: -5px;
+
+        .#{$namespace}icon-right-nav {
+            margin-left: -3px;
+        }
+    }
+    &:active{
+        opacity: .3;
+        //background-color: rgba(0,0,0,.07);
+    }
+}
+
+
+// Bars with Muiicons
+// --------------------------------------------------
+
+.#{$namespace}bar {
+    .#{$namespace}icon {
+        position: relative;
+        z-index: z("bar","icon"); // Position the buttons on top of .#{$namespace}title
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-size: 24px;
+
+        &:active {
+            opacity: .3;
+            //background-color: rgba(0,0,0,.07);
+        }
+    }
+
+    // Vertical center the larger icons in btns.
+    .#{$namespace}btn .#{$namespace}icon {
+        top: 1px;
+        padding: 0;
+        margin:0;
+    }
+
+    // Handle carets in the titles
+    .#{$namespace}title .#{$namespace}icon {
+        padding: 0;
+        margin:0;
+        // Specific postioning of the caret icon within a title. Used with popover.js.
+        &.#{$namespace}icon-caret {
+            top: 4px;
+            margin-left: -5px;
+        }
+    }
+}
+
+
+// Bars for search forms
+// --------------------------------------------------
+
+// Position/size search bar within the bar
+.#{$namespace}bar input[type="search"] {
+    height: 29px;
+    margin: 6px 0;
+}
+.#{$namespace}bar .#{$namespace}input-row .#{$namespace}btn{
+    padding: 12px 10px;
+}
+.#{$namespace}bar .#{$namespace}search:before{
+        margin-top: -10px;
+    }
+.#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear, .#{$namespace}bar .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech{
+    top: 0;
+    right: 12px;
+}
+.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-clear~.#{$namespace}icon-clear, .#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}input-row .#{$namespace}input-speech~.#{$namespace}icon-speech{
+    top: 0;
+    right: 0;
+}
+
+// Bars with segmented controls
+// --------------------------------------------------
+
+// Position the control correctly inside a bar.
+.#{$namespace}bar .#{$namespace}segmented-control {
+    top: 7px;
+    margin: 0 auto;
+    width: auto;
+}

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

@@ -0,0 +1,196 @@
+//
+// Base styles
+// --------------------------------------------------
+
+// Use box sizing on all the things!
+* {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;//禁止选择文字
+    outline: none;
+}
+// We fix position the body and scroll `.#{$namespace}content`.
+body {
+    font-family: $font-family-default;
+    font-size: $font-size-default;
+    line-height: $line-height-default;
+    color: #000;
+    background-color: #fff;
+    -webkit-overflow-scrolling: touch;
+}
+
+// Universal link styling
+a {
+    color: $primary-color;
+    text-decoration: none;
+
+    &:active {
+        color: darken($primary-color, 10%);
+    }
+}
+
+// Wrapper to be used around all content not in .#{$namespace}bar-title and .#{$namespace}bar-tab
+.#{$namespace}content {
+    background-color: #efeff4;
+    -webkit-overflow-scrolling: touch;
+}
+
+// Hack to force all relatively and absolutely positioned elements still render while scrolling
+// Note: This is a bug for "-webkit-overflow-scrolling: touch"
+// .#{$namespace}content > * {
+//     @include transform(translateZ(0));
+// }
+
+// Pad top/bottom of content so it doesn't hide behind bars.
+// Note: For these to work, content must come after both bars in the markup
+.#{$namespace}bar-nav ~ .#{$namespace}content {
+    padding-top: $bar-base-height;
+    &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         top:$bar-base-height;
+     }
+    }
+}
+.#{$namespace}bar-header-secondary ~ .#{$namespace}content {
+    padding-top: ($bar-base-height*2);
+     &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         top:($bar-base-height*2);
+     }
+    }
+}
+
+// Footer bar padding
+.#{$namespace}bar-footer ~ .#{$namespace}content {
+    padding-bottom: $bar-base-height;
+     &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         bottom:$bar-base-height;
+     }
+    }
+}
+.#{$namespace}bar-footer-secondary ~ .#{$namespace}content {
+    padding-bottom: ($bar-base-height*2);
+     &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         bottom:($bar-base-height*2);
+     }
+    }
+}
+
+// Tab bar padding
+.#{$namespace}bar-tab ~ .#{$namespace}content {
+    padding-bottom: $bar-tab-height;
+     &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         bottom:$bar-tab-height;
+     }
+    }
+}
+.#{$namespace}bar-footer-secondary-tab ~ .#{$namespace}content {
+    padding-bottom: ($bar-tab-height+$bar-base-height);
+     &.#{$namespace}scroll-wrapper{
+     .#{$namespace}scrollbar-vertical{
+         bottom:($bar-tab-height+$bar-base-height);
+     }
+    }
+}
+
+// Utility classes
+
+.#{$namespace}content-padded {
+    //暂时放弃content-padded
+       margin: $bar-side-spacing;
+}
+.#{$namespace}inline {
+    display: inline-block;
+    vertical-align: top;
+}
+.#{$namespace}block {
+    display: block!important;
+}
+.#{$namespace}visibility {
+    visibility: visible!important;
+}
+.#{$namespace}hidden {
+    display: none!important;
+}
+.#{$namespace}ellipsis{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.#{$namespace}ellipsis-2{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal!important;
+    word-wrap: break-word;
+}
+.#{$namespace}table{
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+}
+.#{$namespace}table-cell{
+    display: table-cell;
+    position: relative;
+}
+.#{$namespace}text-left{
+    text-align: left!important;
+}
+.#{$namespace}text-center{
+    text-align: center!important;
+}
+.#{$namespace}text-justify{
+    text-align: justify!important;
+}
+.#{$namespace}text-right{
+    text-align: right!important;
+}
+.#{$namespace}pull-left {
+    float: left;
+}
+.#{$namespace}pull-right {
+    float: right;
+}
+
+.#{$namespace}list-unstyled {
+    padding-left: 0;
+    list-style: none;
+}
+.#{$namespace}list-inline {
+    padding-left: 0;
+    list-style: none;
+    margin-left: -5px;
+}
+.#{$namespace}list-inline > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+.#{$namespace}clearfix {
+    @include clearfix();
+}
+.#{$namespace}bg-primary {
+    background-color:$primary-color;
+}
+.#{$namespace}bg-positive{
+    background-color:$positive-color;
+}
+.#{$namespace}bg-negative{
+    background-color:$negative-color;
+}
+.#{$namespace}error{
+    margin: 88px 35px;
+    padding:10px;
+    border-radius:6px;
+    background-color:#bbb;
+}
+.#{$namespace}subtitle{
+    font-size: 15px;
+}

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

@@ -0,0 +1,205 @@
+//
+// Buttons
+// --------------------------------------------------
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+button,
+.#{$namespace}btn {
+    position: relative;
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0; // For input.#{$namespace}btn
+    font-size: $button-font-size;
+    font-weight: $font-weight-light;
+    line-height: 1.42;//增大，和bootstrap保持一致；
+    color: #333;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: top;
+    cursor: pointer;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border-top-left-radius: 3px;//fixed android 4.2
+    border-top-right-radius: 3px;//fixed android 4.2
+    border-bottom-right-radius: 3px;//fixed android 4.2
+    border-bottom-left-radius: 3px;//fixed android 4.2
+    border-radius: 3px;
+    @include transition(all);
+    @include transition-duration(.2s);
+    @include transition-timing-function(linear);
+
+    // Active & filled button styles
+    &:enabled:active,
+        &.#{$namespace}active:enabled {
+        color: #fff;
+        background-color: $default-color;
+    }
+
+    // Disabled styles & filled button active styles
+    &:disabled,
+        &.#{$namespace}disabled {
+        opacity: .6;
+    }
+}
+
+
+// Other button types
+// --------------------------------------------------
+
+// Primary button (Default color is blue)
+input[type="submit"],
+.#{$namespace}btn-primary,.#{$namespace}btn-blue {
+    @include btn($primary-color);
+}
+
+// Positive button (Default color is green)
+.#{$namespace}btn-positive,.#{$namespace}btn-success,.#{$namespace}btn-green {
+    @include btn($positive-color);
+}
+
+.#{$namespace}btn-warning,.#{$namespace}btn-yellow {
+    @include btn($warning-color);
+}
+
+// Negative button (Default color is red)
+.#{$namespace}btn-negative,.#{$namespace}btn-danger,.#{$namespace}btn-red {
+    @include btn($negative-color);
+}
+//紫色
+.#{$namespace}btn-royal,.#{$namespace}btn-purple {
+    @include btn($royal-color);
+}
+// grey button
+.#{$namespace}btn-grey {
+    @include btn($grey-color);
+}
+// Outlined buttons
+.#{$namespace}btn-outlined {
+    background-color: transparent;
+
+    &.#{$namespace}btn-primary,&.#{$namespace}btn-blue {
+        color: $primary-color;
+    }
+    &.#{$namespace}btn-positive,&.#{$namespace}btn-success,&.#{$namespace}btn-green {
+        color: $positive-color;
+    }
+    &.#{$namespace}btn-warning,&.#{$namespace}btn-yellow {
+        color: $warning-color;
+    }
+    &.#{$namespace}btn-negative,&.#{$namespace}btn-danger,&.#{$namespace}btn-red {
+        color: $negative-color;
+    }
+    &.#{$namespace}btn-royal,&.#{$namespace}btn-purple {
+        color: $royal-color;
+    }
+    // Active states
+    &.#{$namespace}btn-primary,&.#{$namespace}btn-blue,
+        &.#{$namespace}btn-positive,&.#{$namespace}btn-success,&.#{$namespace}btn-green,
+        &.#{$namespace}btn-warning,&.#{$namespace}btn-yellow, 
+        &.#{$namespace}btn-negative,&.#{$namespace}btn-danger,&.#{$namespace}btn-red,
+        &.#{$namespace}btn-royal,&.#{$namespace}btn-purple, 
+        {
+            &:enabled:active{
+                color: #fff;
+            }
+    }
+}
+
+// Link button (Buttons that look like links)
+.#{$namespace}btn-link {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    color: $primary-color;
+    background-color: transparent;
+    border: 0;
+
+    &:enabled:active,
+        &.#{$namespace}active:enabled {
+        color: darken($primary-color, 10%);
+        background-color: transparent;
+    }
+}
+
+// Block level buttons (full width buttons)
+.#{$namespace}btn-block {
+    display: block;
+    width: 100%;
+    padding: 15px 0;
+    margin-bottom: 10px;
+    font-size: 18px;
+}
+
+
+// Button overrides
+// --------------------------------------------------
+
+//input[type="submit"],
+//input[type="reset"],
+//input[type="button"] {
+//  width: 100%;
+//}
+
+
+// Buttons with badges
+// --------------------------------------------------
+
+// Generic styles for all badges within default buttons
+.#{$namespace}btn .#{$namespace}badge {
+    margin: -2px -4px -2px 4px;
+    font-size: $button-font-size;
+    background-color: rgba(0,0,0,.15);
+}
+
+// Buttons with inverted badges
+.#{$namespace}btn .#{$namespace}badge-inverted,
+.#{$namespace}btn:enabled:active .#{$namespace}badge-inverted {
+    background-color: transparent;
+}
+.#{$namespace}btn-primary:enabled:active .#{$namespace}badge-inverted,
+.#{$namespace}btn-positive:enabled:active .#{$namespace}badge-inverted,
+.#{$namespace}btn-negative:enabled:active .#{$namespace}badge-inverted {
+    color: #fff;
+}
+
+// Position badges within block level buttons
+// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
+// stays at the center of button
+.#{$namespace}btn-block .#{$namespace}badge {
+    position: absolute;
+    right: 0;
+    margin-right: 10px;
+}
+
+
+// Buttons with Muiicons
+// --------------------------------------------------
+
+.#{$namespace}btn .#{$namespace}icon{
+    font-size: inherit;
+}
+
+.#{$namespace}btn.#{$namespace}icon {
+    font-size: $button-font-size;
+    line-height: 1.42;
+}
+
+.#{$namespace}btn.#{$namespace}fab{
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    padding:16px;
+    outline: none;
+    &.#{$namespace}btn-mini{
+        width: 40px;
+        height: 40px;
+        padding:8px;
+    }
+    .#{$namespace}icon{
+        font-size: 24px;
+        line-height: 24px;
+        width: 24px;
+        height: 24px;
+    }
+}