mui_app_rails 0.0.1 → 0.0.2

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

@@ -1,312 +0,0 @@
-//
-// 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

@@ -1,196 +0,0 @@
-//
-// 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

@@ -1,205 +0,0 @@
-//
-// 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;
-    }
-}