From c0064d8a90631a7a59ae42abc1a2c94f373dd12a Mon Sep 17 00:00:00 2001 From: iwx <525029662@qq.com> Date: Sat, 9 Jan 2016 10:50:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0less=E5=92=8Cgulp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1、增加less，降低配置sass环境的复杂过程 2、增加gulp打包方式，打包更容易 --- .csscomb.json | 10 + gulpfile.js | 167 ++++++++++++ less/badges.less | 88 ++++++ less/bars.less | 312 ++++++++++++++++++++++ less/base.less | 196 ++++++++++++++ less/buttons.less | 205 ++++++++++++++ less/cards.less | 63 +++++ less/forms.less | 456 ++++++++++++++++++++++++++++++++ less/fullscreen.less | 35 +++ less/grid.less | 85 ++++++ less/hack.less | 20 ++ less/icon.less | 174 ++++++++++++ less/iframe.less | 12 + less/iscroll.less | 43 +++ less/loadings.less | 111 ++++++++ less/mixins.less | 184 +++++++++++++ less/modals.less | 34 +++ less/mui.less | 48 ++++ less/normalize.less | 425 +++++++++++++++++++++++++++++ less/number.less | 71 +++++ less/off-canvas.less | 119 +++++++++ less/os.less | 39 +++ less/pagination.less | 150 +++++++++++ less/popovers.less | 203 ++++++++++++++ less/popup.less | 153 +++++++++++ less/pullrefreshs.less | 98 +++++++ less/push.less | 61 +++++ less/scroll.less | 95 +++++++ less/segmented-controls.less | 167 ++++++++++++ less/slider-cell.less | 20 ++ less/sliders.less | 135 ++++++++++ less/switches.less | 115 ++++++++ less/table-views.less | 500 +++++++++++++++++++++++++++++++++++ less/toast.less | 22 ++ less/type.less | 23 ++ less/variables.less | 85 ++++++ package.json | 21 +- 37 files changed, 4742 insertions(+), 3 deletions(-) create mode 100644 .csscomb.json create mode 100644 gulpfile.js create mode 100644 less/badges.less create mode 100644 less/bars.less create mode 100644 less/base.less create mode 100644 less/buttons.less create mode 100644 less/cards.less create mode 100644 less/forms.less create mode 100644 less/fullscreen.less create mode 100644 less/grid.less create mode 100644 less/hack.less create mode 100644 less/icon.less create mode 100644 less/iframe.less create mode 100644 less/iscroll.less create mode 100644 less/loadings.less create mode 100644 less/mixins.less create mode 100644 less/modals.less create mode 100644 less/mui.less create mode 100644 less/normalize.less create mode 100644 less/number.less create mode 100644 less/off-canvas.less create mode 100644 less/os.less create mode 100644 less/pagination.less create mode 100644 less/popovers.less create mode 100644 less/popup.less create mode 100644 less/pullrefreshs.less create mode 100644 less/push.less create mode 100644 less/scroll.less create mode 100644 less/segmented-controls.less create mode 100644 less/slider-cell.less create mode 100644 less/sliders.less create mode 100644 less/switches.less create mode 100644 less/table-views.less create mode 100644 less/toast.less create mode 100644 less/type.less create mode 100644 less/variables.less diff --git a/.csscomb.json b/.csscomb.json new file mode 100644 index 00000000..72e23027 --- /dev/null +++ b/.csscomb.json @@ -0,0 +1,10 @@ +{ + "always-semicolon": false, + "block-indent": 4, + "space-between-declarations": "\n", + "space-after-opening-brace": "\n", + "space-before-closing-brace": "\n", + "leading-zero": true, + "strip-spaces": true, + "vendor-prefix-align": true +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..5fea8923 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,167 @@ +'use strict'; + +var path = require('path'); +var del = require('del'); + +var runSequence = require('run-sequence'); + +var gulp = require('gulp'); +var $ = require('gulp-load-plugins')(); + +var pkg = require('./package.json'); + +// 路径配置信息 +var config = { + path: { + less: [ + './less/mui.less', + ], + fonts: './fonts/*', + js: [ + 'js/mui.js', + 'js/mui.detect.js', + 'js/mui.detect.5+.js', + 'js/mui.event.js', + 'js/mui.target.js', + 'js/mui.fixed.js', + 'js/mui.fixed.bind.js', + 'js/mui.fixed.classlist.js', + 'js/mui.fixed.animation.js', + 'js/mui.fixed.fastclick.js', + 'js/mui.fixed.keyboard.js', + 'js/mui.namespace.js', + 'js/mui.gestures.js', + 'js/mui.gestures.flick.js', + 'js/mui.gestures.swipe.js', + 'js/mui.gestures.drag.js', + 'js/mui.gestures.tap.js', + 'js/mui.gestures.longtap.js', + 'js/mui.gestures.hold.js', + 'js/mui.gestures.pinch.js', + 'js/mui.init.js', + 'js/mui.init.5+.js', + 'js/mui.back.js', + 'js/mui.back.5+.js', + 'js/mui.init.pullrefresh.js', + 'js/mui.ajax.js', + 'js/mui.ajax.5+.js', + 'js/mui.layout.js', + 'js/mui.animation.js', + 'js/mui.class.js', + 'js/mui.pullRefresh.js', + 'js/mui.class.scroll.js', + 'js/mui.class.scroll.pullrefresh.js', + 'js/mui.class.scroll.slider.js', + 'js/pullrefresh.5+.js', + 'js/mui.offcanvas.js', + 'js/actions.js', + 'js/modals.js', + 'js/popovers.js', + 'js/segmented-controllers.js', + 'js/switches.js', + 'js/tableviews.js', + 'js/mui.dialog.alert.js', + 'js/mui.dialog.confirm.js', + 'js/mui.dialog.prompt.js', + 'js/mui.dialog.toast.js', + 'js/mui.popup.js', + 'js/input.plugin.js', + 'js/mui.number.js' + + ] + }, + dist: { + js: './dist/js', + css: './dist/css', + fonts: './dist/fonts' + }, + uglify: { + compress: { + warnings: false + }, + output: { + ascii_only: true + } + } +}; + +var dateFormat = 'isoDateTime'; + +var banner = [ + '/*!', + ' * =====================================================', + ' * Mui v<%= pkg.version %> (<%= pkg.homepage %>)', + ' * Licensed under <%= pkg.license %> | ' + $.util.date(Date.now(), dateFormat), + ' * =====================================================', + ' */\n' +].join('\n'); + +// clean +gulp.task('build:clean', function() { + return del([ + config.dist.css, + config.dist.js + ]); +}); + +// build less +gulp.task('build:less', function() { + gulp.src(config.path.less) + .pipe($.header(banner, {pkg: pkg, ver: ''})) + .pipe($.plumber({errorHandler: function(err) { + console.log(err); + this.emit('end'); + }})) + .pipe($.less({ + paths: [ path.join(__dirname, 'less') ] + })) + .pipe($.csscomb({configPath: path.join(__dirname, ".csscomb.json")})) + .pipe(gulp.dest(config.dist.css)) + .pipe($.size({showFiles: true, title: 'source'})) + .pipe($.minifyCss({noAdvanced: true})) + .pipe($.rename({ + suffix: '.min', + extname: '.css' + })) + .pipe(gulp.dest(config.dist.css)) + .pipe($.size({showFiles: true, title: 'minified'})) + .pipe($.size({showFiles: true, gzip: true, title: 'gzipped'})); +}); + +// build fonts +gulp.task('build:fonts', function() { + gulp.src(config.path.fonts) + .pipe(gulp.dest(config.dist.fonts)); +}); + +// build js +gulp.task('build:js', function() { + gulp.src(config.path.js) + .pipe($.concat('mui.js')) + .pipe($.header(banner, {pkg: pkg, ver: ''})) + .pipe(gulp.dest(config.dist.js)) + .pipe($.size({showFiles: true, title: 'source'})) + .pipe($.uglify(config.uglify)) + .pipe($.header(banner, {pkg: pkg, ver: ''})) + .pipe($.rename({suffix: '.min'})) + .pipe(gulp.dest(config.dist.js)) + .pipe($.size({showFiles: true, title: 'minified'})) + .pipe($.size({showFiles: true, gzip: true, title: 'gzipped'})); +}); + +// build +gulp.task('build', function(cb) { + runSequence( + 'build:clean', + ['build:less', 'build:fonts', 'build:js'], + cb); +}); + +// watch +gulp.task('watch', function() { + gulp.watch(['js/*.js'], ['build:js']); + gulp.watch(['less/**/*.less'], ['build:less']); +}); + +// default +gulp.task('default', ['build']); \ No newline at end of file diff --git a/less/badges.less b/less/badges.less new file mode 100644 index 00000000..676a2c21 --- /dev/null +++ b/less/badges.less @@ -0,0 +1,88 @@ +// +// Badges +// -------------------------------------------------- +.@{namespace}badge { + display: inline-block; + padding: 3px 6px; + font-size: 12px; + line-height: 1; + color: #333; + background-color: rgba(0,0,0,.15); + border-radius: 100px; + + // Inverted badges have no background. + &.@{namespace}badge-inverted { + padding: 0 5px 0 0; + color: @default-color; + background-color: transparent; + } +} + + +// Badge modifiers +// -------------------------------------------------- + +// Main badge +.@{namespace}badge-primary,.@{namespace}badge-blue { + color: #fff; + background-color: @primary-color; + + &.@{namespace}badge-inverted { + color: @primary-color; + background-color: transparent; + } +} + +// success badge +.@{namespace}badge-success,.@{namespace}badge-green { + color: #fff; + background-color: @positive-color; + + &.@{namespace}badge-inverted { + color: @positive-color; + background-color: transparent; + } +} +//waring +.@{namespace}badge-warning,.@{namespace}badge-yellow { + color: #fff; + background-color: @warning-color; + + &.@{namespace}badge-inverted { + color: @warning-color; + background-color: transparent; + } +} + +// Negative badge +.@{namespace}badge-danger,.@{namespace}badge-red { + color: #fff; + background-color: @negative-color; + + &.@{namespace}badge-inverted { + color: @negative-color; + background-color: transparent; + } +} + +.@{namespace}badge-royal,.@{namespace}badge-purple { + color: #fff; + background-color: @royal-color; + + &.@{namespace}badge-inverted { + color: @royal-color; + background-color: transparent; + } +} + +.@{namespace}icon .@{namespace}badge{ + position: absolute; + left: 100%; + margin-left: -10px; + top: -2px; + font-size: 10px; + line-height: 1.4; + padding: 1px 5px; + background: red; + color: white; +} \ No newline at end of file diff --git a/less/bars.less b/less/bars.less new file mode 100644 index 00000000..f0ecc9b2 --- /dev/null +++ b/less/bars.less @@ -0,0 +1,312 @@ +// +// Bars +// -------------------------------------------------- + +.@{namespace}bar { + position: fixed; + right: 0; + left: 0; + z-index: @z-layers-bar; + height: @bar-base-height; + padding-right: @bar-side-spacing; + padding-left: @bar-side-spacing; + background-color: @chrome-color; + border-bottom: 0; + .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-nav,.@{namespace}focusin>.@{namespace}bar-header-secondary{ + position:absolute; +} +.@{namespace}focusin>.@{namespace}bar~.@{namespace}content{ + padding-bottom: 0; +} + +// Bars with buttons +// -------------------------------------------------- + +.@{namespace}bar .@{namespace}btn { + position: relative; + top: 7px; + z-index: @z-layers-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-layers-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; +} +.@{namespace}bar.@{namespace}bar-header-secondary .@{namespace}segmented-control { + top: 0px; +} diff --git a/less/base.less b/less/base.less new file mode 100644 index 00000000..692e5868 --- /dev/null +++ b/less/base.less @@ -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: #efeff4; + -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 { + .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; +} \ No newline at end of file diff --git a/less/buttons.less b/less/buttons.less new file mode 100644 index 00000000..0f0e1ed3 --- /dev/null +++ b/less/buttons.less @@ -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; + .transition(all); + .transition-duration(.2s); + .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 { + .btn(@primary-color); +} + +// Positive button (Default color is green) +.@{namespace}btn-positive,.@{namespace}btn-success,.@{namespace}btn-green { + .btn(@positive-color); +} + +.@{namespace}btn-warning,.@{namespace}btn-yellow { + .btn(@warning-color); +} + +// Negative button (Default color is red) +.@{namespace}btn-negative,.@{namespace}btn-danger,.@{namespace}btn-red { + .btn(@negative-color); +} +//紫色 +.@{namespace}btn-royal,.@{namespace}btn-purple { + .btn(@royal-color); +} +// grey button +.@{namespace}btn-grey { + .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; + } +} \ No newline at end of file diff --git a/less/cards.less b/less/cards.less new file mode 100644 index 00000000..dbee49c9 --- /dev/null +++ b/less/cards.less @@ -0,0 +1,63 @@ +// +// Cards +// -------------------------------------------------- + +.@{namespace}card { + margin: 0 15px; + overflow: hidden; + background-color: @card-bg; + border: @border-default; + background-clip:padding-box; + border-radius: @border-radius; +} + +.@{namespace}content > .@{namespace}card:first-child{ + margin-top: 15px; +} +//Cards with input-group +.@{namespace}card .@{namespace}input-group{ + &:before,&:after{ + height:0; + } + .@{namespace}input-row:last-child{ + &:before,&:after{ + height:0; + } + } + +} +// Cards with table-views +// -------------------------------------------------- +.@{namespace}card .@{namespace}table-view { + margin-bottom: 0; + border-top: 0; + border-bottom: 0; + border-radius: @border-radius; + // Rounding first divider on carded lists and remove border on the top + //fix Android 4.1.x/4.2.x 圆角列表四角不圆的bug + .@{namespace}table-view-divider:first-child,.@{namespace}table-view-cell:first-child { + top: 0; + border-top-left-radius: @border-radius; + border-top-right-radius: @border-radius; + } + + // Rounding last divider on carded table views + .@{namespace}table-view-divider:last-child,.@{namespace}table-view-cell:last-child { + border-bottom-left-radius: @border-radius; + border-bottom-right-radius: @border-radius; + } + &:before,&:after{ + height:0; + } +} + + +// Remove the bottom border from last table cell +.@{namespace}card > .@{namespace}table-view { + >.@{namespace}table-view-cell:last-child{ + &:before,&:after{ + height:0; + } + } +} + diff --git a/less/forms.less b/less/forms.less new file mode 100644 index 00000000..9fb67d77 --- /dev/null +++ b/less/forms.less @@ -0,0 +1,456 @@ +// +// Forms +// -------------------------------------------------- + +// Force form elements to inherit font styles +input, +textarea, +select { + font-family: @font-family-default; + font-size: @font-size-default; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + &:focus{ + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + -webkit-user-modify: read-write-plaintext-only; + } +} + +// Stretch inputs/textareas to full width and add height to maintain a consistent baseline +select, +textarea, +input[type="text"], +input[type="search"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="tel"], +input[type="color"] { + width: 100%; + height: 40px; + -webkit-appearance: none; + padding: 10px 15px; + margin-bottom: 15px; + line-height: @line-height-default; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 3px; + outline: none; + -webkit-user-select: text; +} +//input[type=number]::-webkit-outer-spin-button { margin: 0; } +//turn off spin button +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +// Rounded search input +input[type="search"] { + font-size: 16px; + height: 34px; + text-align: center; + background-color: rgba(0,0,0,.1); + border: 0; + border-radius: 6px; + // Override content-box in normalize + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +input[type="search"]:focus { + text-align: left; +} + +// Allow text area's height to grow larger than a normal input +textarea { + height: auto; + resize: none; +} + +// Style select button to look like part of the Ratchet's style +select { + margin-top:1px; + height: auto; + font-size: 14px; + background-color: #fff; + border: 0!important; + &:focus{ + -webkit-user-modify: read-only; + } +} + + + +// Input groups (cluster multiple inputs together into a single group) +// ------------------------------------------------------------------- + +// Remove spacing, borders, shadows and rounding since it all belongs on the .@{namespace}input-group not the input +.@{namespace}input-group { + position: relative; + padding: 0; + border: 0; + background-color: #fff; + .hairline(double, #c8c7cc, 0); // Double grey border. +} +.@{namespace}input-group input, +.@{namespace}input-group textarea { + margin-bottom: 0; + background-color: transparent; + border-radius: 0; + .box-shadow(none); + border: 0; +// .hairline(single, #c8c7cc, 15px);//为啥之前给input，textarea加了边线？都放入input-row的话，是不需要的 +} + +.@{namespace}input-group input[type="search"]{ + background:none; +} +.@{namespace}input-group input:last-child { + background-image: none; +} +// Input groups with labels +// -------------------------------------------------- +.@{namespace}input-row { + clear:left; + overflow: hidden; + select{ + padding: 0; + height: 37px; + font-size:17px; + } +} +.@{namespace}input-row:last-child, +.@{namespace}input-row label + input,.@{namespace}input-row .mui-btn + input { + background: none; +} +// To use labels with input groups, wrap a label and an input in an .@{namespace}input-row +.@{namespace}input-group .@{namespace}input-row { + height: 40px; // Matches the height of inputs. + .hairline(single, #c8c7cc, 15px); // Single grey border with a 15px . +} +// Labels get floated left with a set percentage width +.@{namespace}input-row label { + float: left; + width: 35%; + padding: 11px 15px; + font-family: @font-family-default; + line-height: 1.1; // Put the text on the baseline. +} +.@{namespace}input-row label ~ +{ + input,select,textarea{ + float: right; + width: 65%; + padding-left: 0; + margin-bottom: 0; + border: 0; + } +} +.@{namespace}input-row .mui-btn { + float: right; + width: 15%; + padding: 10px 15px; + font-family: @font-family-default; + line-height: 1.1; // Put the text on the baseline. +} +.@{namespace}input-row .mui-btn ~ +{ + input,select,textarea{ + float: left; + width: 85%; + padding-left: 0; + margin-bottom: 0; + border: 0; + } +} +.@{namespace}button-row { + position: relative; + padding-top: 5px; + text-align: center; +} +.@{namespace}input-group .@{namespace}button-row { + height: 45px; +} +// Actual inputs float to right of labels and also have a set percentage +.@{namespace}input-row { + position:relative; + &.@{namespace}input-range{ + padding-right: 20px; + overflow: visible; + } + .@{namespace}inline{ + padding: 8px 0; + } + .@{namespace}input-clear ~ .@{namespace}icon-clear,.@{namespace}input-speech ~ .@{namespace}icon-speech,.@{namespace}input-password ~ .@{namespace}icon-eye{ + position:absolute; + right: 0px; + top: 10px; + font-size: 20px; + height: 38px; + width: 38px; + text-align: center; + color:#999; + z-index: @z-layers-default; + &.@{namespace}active{ + color:@primary-color; + } + } + .@{namespace}input-speech ~ .@{namespace}icon-speech{ + top:8px; + font-size:24px; + } + .@{namespace}input-clear ~ .@{namespace}icon-clear { + ~ .@{namespace}icon-speech{ + display:none; + } + &.@{namespace}hidden{ + ~ .@{namespace}icon-speech{ + display:inline-block; + } + } + } + .@{namespace}icon-speech ~ .@{namespace}placeholder{ + right:38px; + } + &.@{namespace}search{ + .@{namespace}icon-clear{ + top:7px; + } + .@{namespace}icon-speech{ + top:5px; + } + } +} + +//radio,checkbox +.@{namespace}radio,.@{namespace}checkbox{ + position:relative; + label{ + float: none; + display: inline-block; + width: 100%; + padding-right: 58px; + } + +} +.@{namespace}radio.@{namespace}left input[type="radio"],.@{namespace}checkbox.@{namespace}left input[type="checkbox"]{ + left:20px; +} +.@{namespace}radio.@{namespace}left label,.@{namespace}checkbox.@{namespace}left label{ + padding-left: 58px; + padding-right: 15px; +} +.@{namespace}radio input[type="radio"],.@{namespace}checkbox input[type="checkbox"]{ + -webkit-appearance:none; + outline: 0!important; + width: 28px; + border: 0; + height: 26px; + display: inline-block; + position: absolute; + right: 20px; + top: 4px; + //设置背景色，否则在Ios上会有黑色边框； + background-color:transparent; + &[disabled]:before{ + opacity: .3; + } + &:before{ + font-family: Muiicons; + font-weight: normal; + border-radius: 0; + font-size: 28px; + line-height: 1; + text-decoration: none; + -webkit-font-smoothing: antialiased; + color: rgb(170, 170, 170); + background: none; + } + &:checked:before{ + color:@primary-color; + } + +} +.@{namespace}radio.@{namespace}disabled label,.@{namespace}radio label.@{namespace}disabled,.@{namespace}checkbox.@{namespace}disabled label,.@{namespace}checkbox label.@{namespace}disabled{ + opacity: .4; +} +.@{namespace}radio input[type="radio"]:before{ + content: "\e411"; +} +.@{namespace}radio input[type="radio"]:checked:before{ + content: "\e441"; +} +.@{namespace}checkbox input[type="checkbox"]:before{ + content: "\e411"; +} +.@{namespace}checkbox input[type="checkbox"]:checked:before{ + content: "\e442"; +} + + +.@{namespace}select{ + position: relative; +} +.@{namespace}select:before{ + position: absolute; + top: 8px; + color:rgba(170, 170, 170, 0.6); + font-family: Muiicons; + right: 21px; + content: '\e581'; +} + + +.@{namespace}input-row .@{namespace}switch{ + float: right; + margin-top: 5px; + margin-right: 20px; +} +//show the min and max +.@{namespace}input-range{ + input[type="range"] { + -webkit-appearance: none!important; + cursor: pointer; + border: 0; + outline: none; + padding: 0; + margin: 17px 0; + background-color: #999; + height: 2px; + border-radius: 3px; + position: relative; + width:100%; + } + + input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none!important; + background-color:@primary-color; + background-clip: padding-box; + height:28px; + width:28px; + border-radius: 50%; + border-color: darken(@primary-color, 10%); + } + /*input[type="range"] { + -webkit-appearance: none; + background: #999; + height: 36px; + border-radius: 1px; + overflow: hidden; + margin-top: 2px; + margin-bottom: 2px; + outline:none; + position:relative; + width:100%; + }*/ + label ~ input[type="range"]{ + width:65%; + } + + /*input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none!important; + opacity: 0.5; + height:28px; + width:28px; + border-radius: 50%; + background:#00b7fb; + position: relative; + pointer-events: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + &:before{ + position: absolute; + top: 13px; + left: -2000px; + width: 2000px; + height: 2px; + background: #00b7fb; + content:' '; + } + }*/ + .@{namespace}tooltip{ + width: 64px; + height: 64px; + font-size: 36px; + line-height:64px; + opacity: .8; + background-color: #fff; + border:1px solid #ddd; + border-radius:6px; + color: #333; + text-shadow: 0 1px 0 #f3f3f3; + position:absolute; + top:-70px; + text-align:center; + z-index:@z-layers-default; + } +} +//.@{namespace}bar .@{namespace}input-row.@{namespace}search .@{namespace}icon-speech{ +// top: -2px; +// right: 10px; +//} +.@{namespace}search{ + position: relative; + input[type="search"]{ + padding-left:30px; + } + .@{namespace}placeholder{ + height: 34px; + font-size: 16px; + line-height:34px; + text-align: center; + background:none; + border: 0; + color:#999; + border-radius: 6px; + display:inline-block; + position:absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index:@z-layers-default; + .@{namespace}icon{ + color:#333; + font-size:20px; + } + } + + &:before{ + position: absolute; + font-family: Muiicons; + font-weight: normal; + font-size: 20px; + right: 50%; + margin-right:31px; + top: 50%; + margin-top: -18px; + content: '\e466'; + display:none; + } + &.@{namespace}active{ + &:before{ + left:5px; + right:auto; + margin-right:0; + font-size:20px; + display:block; + } + input[type="search"]{ + text-align:left; + } + .@{namespace}placeholder{ + display:none; + } + } +} + diff --git a/less/fullscreen.less b/less/fullscreen.less new file mode 100644 index 00000000..e37da41a --- /dev/null +++ b/less/fullscreen.less @@ -0,0 +1,35 @@ +.@{namespace}fullscreen{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + &.@{namespace}slider .@{namespace}slider-group{ + height:100%; + + } + .@{namespace}segmented-control ~ .@{namespace}slider-group{ + width:100%; + height:auto; + top:40px; + bottom:0; + position: absolute; + } + &.@{namespace}slider .@{namespace}slider-item>a{ + top: 50%; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + } + .@{namespace}off-canvas-wrap .@{namespace}slider-item>a{ + top: auto; + transform: none; + -webkit-transform: none; + } +} +.@{namespace}bar-tab ~ .@{namespace}content .@{namespace}slider.@{namespace}fullscreen{ + .@{namespace}segmented-control ~ .@{namespace}slider-group{ + bottom:50px; + } +} diff --git a/less/grid.less b/less/grid.less new file mode 100644 index 00000000..d28ad48f --- /dev/null +++ b/less/grid.less @@ -0,0 +1,85 @@ +.@{namespace}row { + .clearfix(); +} +.@{namespace}col-xs-1, .@{namespace}col-sm-1, .@{namespace}col-xs-2, .@{namespace}col-sm-2, .@{namespace}col-xs-3, .@{namespace}col-sm-3, .@{namespace}col-xs-4, .@{namespace}col-sm-4, .@{namespace}col-xs-5, .@{namespace}col-sm-5, .@{namespace}col-xs-6, .@{namespace}col-sm-6, .@{namespace}col-xs-7, .@{namespace}col-sm-7, .@{namespace}col-xs-8, .@{namespace}col-sm-8, .@{namespace}col-xs-9, .@{namespace}col-sm-9, .@{namespace}col-xs-10, .@{namespace}col-sm-10, .@{namespace}col-xs-11, .@{namespace}col-sm-11, .@{namespace}col-xs-12, .@{namespace}col-sm-12 { + position: relative; + min-height: 1px; +} +.@{namespace}row>[class*="@{namespace}col-"]{ + float: left; +} +.@{namespace}col-xs-12 { + width: 100%; +} +.@{namespace}col-xs-11 { + width: 91.66666667%; +} +.@{namespace}col-xs-10 { + width: 83.33333333%; +} +.@{namespace}col-xs-9 { + width: 75%; +} +.@{namespace}col-xs-8 { + width: 66.66666667%; +} +.@{namespace}col-xs-7 { + width: 58.33333333%; +} +.@{namespace}col-xs-6 { + width: 50%; +} +.@{namespace}col-xs-5 { + width: 41.66666667%; +} +.@{namespace}col-xs-4 { + width: 33.33333333%; +} +.@{namespace}col-xs-3 { + width: 25%; +} +.@{namespace}col-xs-2 { + width: 16.66666667%; +} +.@{namespace}col-xs-1 { + width: 8.33333333%; +} +@media (min-width: 400px) { + .@{namespace}col-sm-12 { + width: 100%; + } + .@{namespace}col-sm-11 { + width: 91.66666667%; + } + .@{namespace}col-sm-10 { + width: 83.33333333%; + } + .@{namespace}col-sm-9 { + width: 75%; + } + .@{namespace}col-sm-8 { + width: 66.66666667%; + } + .@{namespace}col-sm-7 { + width: 58.33333333%; + } + .@{namespace}col-sm-6 { + width: 50%; + } + .@{namespace}col-sm-5 { + width: 41.66666667%; + } + .@{namespace}col-sm-4 { + width: 33.33333333%; + } + .@{namespace}col-sm-3 { + width: 25%; + } + .@{namespace}col-sm-2 { + width: 16.66666667%; + } + .@{namespace}col-sm-1 { + width: 8.33333333%; + } + +} \ No newline at end of file diff --git a/less/hack.less b/less/hack.less new file mode 100644 index 00000000..cf784707 --- /dev/null +++ b/less/hack.less @@ -0,0 +1,20 @@ +.@{namespace}android.@{namespace}android-4-0 { +input, +textarea{ + &:focus{ + //修复4.0.x系统的输入框无法正常输入文字 + -webkit-user-modify: inherit; + } +} +} +.@{namespace}android.@{namespace}android-4-2,.@{namespace}android.@{namespace}android-4-3 { +input, +textarea{ + -webkit-user-select: text; +} +} +//解决ios list 过多(height>20000px) crash的bug +.@{namespace}ios .@{namespace}table-view-cell { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} diff --git a/less/icon.less b/less/icon.less new file mode 100644 index 00000000..32b8c292 --- /dev/null +++ b/less/icon.less @@ -0,0 +1,174 @@ +// +// Muiicons +// -------------------------------------------------- + +@font-face { + font-family: Muiicons; + font-weight: normal; + font-style: normal; + src: url('../fonts/mui.ttf') format('truetype'); +} + +.@{namespace}icon { + display: inline-block; + font-family: Muiicons; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + text-decoration: none; + -webkit-font-smoothing: antialiased; + &.@{namespace}active{ + color:@primary-color; + } + &.@{namespace}right{ + &:before{ + float:right; + padding-left: 0.2em; + } + } +} + + +// 通讯录 +// 空心部分 +.@{namespace}icon-contact:before { content: "\e100"; } +.@{namespace}icon-person:before { content: "\e101"; } +.@{namespace}icon-personadd:before { content: "\e102"; } + +// 实心部分 +.@{namespace}icon-contact-filled:before { content: "\e130"; } +.@{namespace}icon-person-filled:before { content: "\e131"; } +.@{namespace}icon-personadd-filled:before { content: "\e132"; } + + +// 通讯功能 +// 空心部分 +.@{namespace}icon-phone:before { content: "\e200"; } +.@{namespace}icon-email:before { content: "\e201"; } +.@{namespace}icon-chatbubble:before { content: "\e202"; } +.@{namespace}icon-chatboxes:before { content: "\e203"; } + +// 实心部分 +.@{namespace}icon-phone-filled:before { content: "\e230"; } +.@{namespace}icon-email-filled:before { content: "\e231"; } +.@{namespace}icon-chatbubble-filled:before { content: "\e232"; } +.@{namespace}icon-chatboxes-filled:before { content: "\e233"; } +// 通讯功能补充类 +.@{namespace}icon-weibo:before { content: "\e260"; } +.@{namespace}icon-weixin:before { content: "\e261"; } +.@{namespace}icon-pengyouquan:before { content: "\e262"; } +.@{namespace}icon-chat:before { content: "\e263"; } +.@{namespace}icon-qq:before { content: "\e264"; } + + +// 设备类 +// 空心部分 +.@{namespace}icon-videocam:before { content: "\e300"; } +.@{namespace}icon-camera:before { content: "\e301"; } +.@{namespace}icon-mic:before { content: "\e302"; } +.@{namespace}icon-location:before { content: "\e303"; } + +// 实心部分 +.@{namespace}icon-mic-filled:before,.@{namespace}icon-speech:before { content: "\e332"; } +.@{namespace}icon-location-filled:before { content: "\e333"; } + +// 设备补充类 +.@{namespace}icon-micoff:before { content: "\e360"; } +// .@{namespace}icon-volumehigh:before { content: "\e361"; } +// .@{namespace}icon-volumelow:before { content: "\e362"; } +.@{namespace}icon-image:before { content: "\e363"; } +.@{namespace}icon-map:before { content: "\e364"; } + + +// 操作标志类 +// 空心部分 +.@{namespace}icon-compose:before { content: "\e400"; } +.@{namespace}icon-trash:before { content: "\e401"; } +.@{namespace}icon-upload:before { content: "\e402"; } +.@{namespace}icon-download:before { content: "\e403"; } +.@{namespace}icon-close:before { content: "\e404"; } +.@{namespace}icon-redo:before { content: "\e405"; } +.@{namespace}icon-undo:before { content: "\e406"; } +.@{namespace}icon-refresh:before { content: "\e407"; } +.@{namespace}icon-star:before { content: "\e408"; } +.@{namespace}icon-plus:before { content: "\e409"; } +.@{namespace}icon-minus:before { content: "\e410"; } +.@{namespace}icon-circle:before,.@{namespace}icon-checkbox:before { content: "\e411"; } + +// 实心部分 +.@{namespace}icon-close-filled:before,.@{namespace}icon-clear:before { content: "\e434"; } +.@{namespace}icon-refresh-filled:before { content: "\e437"; } +.@{namespace}icon-star-filled:before { content: "\e438"; } +.@{namespace}icon-plus-filled:before { content: "\e439"; } +.@{namespace}icon-minus-filled:before { content: "\e440"; } +.@{namespace}icon-circle-filled:before { content: "\e441"; } +.@{namespace}icon-checkbox-filled:before { content: "\e442"; } + + +// 操作标志补充类 +.@{namespace}icon-closeempty:before { content: "\e460"; } +.@{namespace}icon-refreshempty:before { content: "\e461"; } +.@{namespace}icon-reload:before { content: "\e462"; } +.@{namespace}icon-starhalf:before { content: "\e463"; } +.@{namespace}icon-spinner:before { content: "\e464"; } +.@{namespace}icon-spinner-cycle:before { content: "\e465"; } +.@{namespace}icon-search:before { content: "\e466"; } +// .@{namespace}icon-searchstrong:before { content: "\e467"; } +.@{namespace}icon-plusempty:before { content: "\e468"; } + +.@{namespace}icon-forward:before { content: "\e470"; } +.@{namespace}icon-back:before,.@{namespace}icon-left-nav:before { content: "\e471"; } +.@{namespace}icon-checkmarkempty:before { content: "\e472"; } +// .@{namespace}icon-share:before { content: "\e473"; } + + +// 拟物标志类 +// 空心部分 +.@{namespace}icon-home:before { content: "\e500"; } +.@{namespace}icon-navigate:before { content: "\e501"; } +.@{namespace}icon-gear:before { content: "\e502"; } +.@{namespace}icon-paperplane:before { content: "\e503"; } +.@{namespace}icon-info:before { content: "\e504"; } +.@{namespace}icon-help:before { content: "\e505"; } +.@{namespace}icon-locked:before { content: "\e506"; } +.@{namespace}icon-more:before { content: "\e507"; } +.@{namespace}icon-flag:before { content: "\e508"; } + +// 实心部分 +.@{namespace}icon-home-filled:before { content: "\e530"; } +.@{namespace}icon-gear-filled:before { content: "\e532"; } +.@{namespace}icon-info-filled:before { content: "\e534"; } +.@{namespace}icon-help-filled:before { content: "\e535"; } +.@{namespace}icon-more-filled:before { content: "\e537"; } + +// 拟物标志补充类 +.@{namespace}icon-settings:before { content: "\e560"; } +// .@{namespace}icon-settingsstrong:before { content: "\e561"; } +.@{namespace}icon-list:before { content: "\e562"; } +.@{namespace}icon-bars:before { content: "\e563"; } +// .@{namespace}icon-more-vertical:before { content: "\e564"; } +.@{namespace}icon-loop:before { content: "\e565"; } +// .@{namespace}icon-loopstrong:before { content: "\e566"; } +.@{namespace}icon-paperclip:before { content: "\e567"; } +.@{namespace}icon-eye:before { content: "\e568"; } + +// 箭头 +.@{namespace}icon-arrowup:before { content: "\e580"; } +.@{namespace}icon-arrowdown:before { content: "\e581"; } +.@{namespace}icon-arrowleft:before { content: "\e582"; } +.@{namespace}icon-arrowright:before { content: "\e583"; } + +.@{namespace}icon-arrowthinup:before { content: "\e584"; } +.@{namespace}icon-arrowthindown:before { content: "\e585"; } +.@{namespace}icon-arrowthinleft:before { content: "\e586"; } +.@{namespace}icon-arrowthinright:before { content: "\e587"; } + +.@{namespace}icon-pulldown:before { content: "\e588"; } + + + + + + + diff --git a/less/iframe.less b/less/iframe.less new file mode 100644 index 00000000..34b0f450 --- /dev/null +++ b/less/iframe.less @@ -0,0 +1,12 @@ +.@{namespace}iframe-wrapper{ + -webkit-overflow-scrolling:touch; + position: absolute; + left: 0; + right: 0; + iframe{ + border: 0; + width: 100%; + height: 100%; + } +} + diff --git a/less/iscroll.less b/less/iscroll.less new file mode 100644 index 00000000..4d297085 --- /dev/null +++ b/less/iscroll.less @@ -0,0 +1,43 @@ +.@{namespace}iscroll-wrapper{ + position: absolute; + z-index: @z-layers-default; + top: 0; + left: 0; + bottom: 0; + width: 100%; + overflow: hidden; +} +.@{namespace}bar-nav ~ .@{namespace}iscroll-wrapper { + top: @bar-base-height; + padding:0; +} +.@{namespace}bar-header-secondary ~ .@{namespace}iscroll-wrapper { + top: (@bar-base-height * 2); +} +.@{namespace}bar-footer ~ .@{namespace}iscroll-wrapper { + bottom: @bar-base-height; + padding:0; +} +.@{namespace}bar-footer-secondary ~ .@{namespace}iscroll-wrapper { + bottom: (@bar-base-height * 2); +} +.@{namespace}bar-tab ~ .@{namespace}iscroll-wrapper{ + bottom: @bar-tab-height; + padding:0; +} +.@{namespace}bar-footer-secondary-tab ~ .@{namespace}iscroll-wrapper{ + bottom: (@bar-tab-height+@bar-base-height); +} + +.@{namespace}iscroll{ + position: absolute; + z-index: @z-layers-default; + -webkit-tap-highlight-color: rgba(0,0,0,0); + width: 100%; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} diff --git a/less/loadings.less b/less/loadings.less new file mode 100644 index 00000000..08900ed7 --- /dev/null +++ b/less/loadings.less @@ -0,0 +1,111 @@ +.@{namespace}loading{ + .@{namespace}spinner{ + margin: 0 auto; + display: block; + } +} +.@{namespace}spinner { + display: inline-block; + width: 24px; + height: 24px; + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-animation: spinner-spin 1s step-end infinite; + animation: spinner-spin 1s step-end infinite; +} +.@{namespace}spinner:after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf-8,"); + background-position: 50%; + background-size: 100%; + background-repeat: no-repeat; +} +.@{namespace}spinner-white:after { + background-image: url("data:image/svg+xml;charset=utf-8,"); +} +@-webkit-keyframes spinner-spin { + 0% { + -webkit-transform: rotate(0deg); + } + 8.33333333% { + -webkit-transform: rotate(30deg); + } + 16.66666667% { + -webkit-transform: rotate(60deg); + } + 25% { + -webkit-transform: rotate(90deg); + } + 33.33333333% { + -webkit-transform: rotate(120deg); + } + 41.66666667% { + -webkit-transform: rotate(150deg); + } + 50% { + -webkit-transform: rotate(180deg); + } + 58.33333333% { + -webkit-transform: rotate(210deg); + } + 66.66666667% { + -webkit-transform: rotate(240deg); + } + 75% { + -webkit-transform: rotate(270deg); + } + 83.33333333% { + -webkit-transform: rotate(300deg); + } + 91.66666667% { + -webkit-transform: rotate(330deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes spinner-spin { + 0% { + transform: rotate(0deg); + } + 8.33333333% { + transform: rotate(30deg); + } + 16.66666667% { + transform: rotate(60deg); + } + 25% { + transform: rotate(90deg); + } + 33.33333333% { + transform: rotate(120deg); + } + 41.66666667% { + transform: rotate(150deg); + } + 50% { + transform: rotate(180deg); + } + 58.33333333% { + transform: rotate(210deg); + } + 66.66666667% { + transform: rotate(240deg); + } + 75% { + transform: rotate(270deg); + } + 83.33333333% { + transform: rotate(300deg); + } + 91.66666667% { + transform: rotate(330deg); + } + 100% { + transform: rotate(360deg); + } +} + diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 00000000..7a3684a4 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,184 @@ +// +// Mixins +// -------------------------------------------------- + +// General +// -------------------------------------------------- + +// Utilities +// ------------------------- + +// Clearfix +// Source: http://nicolasgallagher.com/micro-clearfix-hack/ +// +// For modern browsers +// 1. The space content is one way to avoid an Opera bug when the +// contenteditable attribute is included anywhere else in the document. +// Otherwise it causes space to appear at the top and bottom of elements +// that are clearfixed. +// 2. The use of `table` rather than `block` is only necessary if using +// `:before` to contain the top-margins of child elements. +.clearfix() { + &:before, + &:after { + display: table; // 2 + content: " "; // 1 + } + &:after { + clear: both; + } +} + +// Box shadow +.box-shadow(@shadow...) { + -webkit-box-shadow: @shadow; + box-shadow: @shadow; +} + +// Gradients +.linear-gradient(@color-from; @color-to) { + background-color: @color-from; // Old browsers + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color-from), color-stop(100%,@color-to)); // Chrome, Safari4+ + background-image: -webkit-linear-gradient(top, @color-from 0%, @color-to 100%); // Chrome10+, Safari5.1+ +// background-image: -moz-linear-gradient(top, @color-from 0%, @color-to 100%); // FF3.6+ +// background-image: -ms-linear-gradient(top, @color-from 0%, @color-to 100%); // IE10+ + //background-image: -o-linear-gradient(top, @color-from 0%, @color-to 100%); // Opera 11.10+ + background-image: linear-gradient(to bottom, @color-from 0%, @color-to 100%); // W3C +// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{@color-from}', endColorstr='#{@color-to}', GradientType=0 ); // IE6-9 +} + +.directional-gradient(@color-from; @color-to; @deg: 45deg) { + background-color: @color-from; // Old browsers + background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,@color-from), color-stop(100%,@color-to)); // Chrome, Safari4+ + background-image: -webkit-linear-gradient(45deg, @color-from 0%, @color-to 100%); // Chrome10+, Safari5.1+ +// background-image: -moz-linear-gradient(45deg, @color-from 0%, @color-to 100%); // FF3.6+ +// background-image: -ms-linear-gradient(45deg, @color-from 0%, @color-to 100%); // IE10+ + //background-image: -o-linear-gradient(45deg, @color-from 0%, @color-to 100%); // Opera 11.10+ + background-image: linear-gradient(45deg, @color-from 0%, @color-to 100%); // W3C +// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{@color-from}', endColorstr='#{@color-to}', GradientType=1 ); // IE6-9 +} + + +// Transforms +// -------------------------------------------------- +.transform(@transform...) { + -webkit-transform: @transform; +// -ms-transform: @transform; + transform: @transform; +} + + +// Transitions +// -------------------------------------------------- +.transition(@transition...) { + -webkit-transition: @transition; +// -moz-transition: @transition; + transition: @transition; +} +.transition-property(@property...) { + -webkit-transition-property: @property; +// -moz-transition-property: @property; + transition-property: @property; +} +.transition-duration(@duration...) { + -webkit-transition-duration: @duration; +// -moz-transition-duration: @duration; + transition-duration: @duration; +} +.transition-timing-function(@function...) { + -webkit-transition-timing-function: @function; +// -moz-transition-timing-function: @function; + transition-timing-function: @function; +} + + +// Animations +// -------------------------------------------------- +.animation-name(@name) { + -webkit-animation-name: @name; +// -moz-animation-name: @name; + animation-name: @name; +} +.animation-duration(@duration) { + -webkit-animation-duration: @duration; +// -moz-animation-duration: @duration; + animation-duration: @duration; +} +.animation-direction(@direction) { + -webkit-animation-direction: @direction; +// -moz-animation-direction: @direction; + animation-direction: @direction; +} + + +// Misc +// -------------------------------------------------- +.hairline(@type; @color; @offset) { + &:after{ + position: absolute; + left: @offset; + right: 0; + bottom: 0; + height: 1px; + background-color: @color; + content:''; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } + + // & when( @type = double) { + // &:before{ + // position: absolute; + // left: @offset; + // right: 0; + // top: 0; + // height: 1px; + // background-color: @color; + // content:''; + // -webkit-transform: scaleY(0.5); + // transform: scaleY(0.5); + // } + // } + +// background: repeat-x bottom left +// url(data:image/gif;base64,R0lGODlhAQACAPABAMjHzP///yH/C1hNUCBEYXRhWE1QAz94cAAh+QQFAAABACwAAAAAAQACAAACAgwKADs=); +// background-size: 100% 1px; +//@if @type == single { +// background-image: url("data:image/svg+xml;utf8,"); +// background-position: @offset 100%; +// +//} @else if @type == double { +// background-image: url("data:image/svg+xml;utf8,"), +// url("data:image/svg+xml;utf8,"); +// background-position: @offset 100%, @offset 0; +//} +//background-repeat: no-repeat; +} + +.hairline(@type; @color; @offset) when( @type = double) { + &:before{ + position: absolute; + left: @offset; + right: 0; + top: 0; + height: 1px; + background-color: @color; + content:''; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} + +//button +.btn(@color){ + color: #fff; + background-color: @color; + border: 1px solid @color; + + &:enabled:active, + &.@{namespace}active:enabled { + color: #fff; + background-color: darken(@color, 10%); + border: 1px solid darken(@color, 10%); + } +} diff --git a/less/modals.less b/less/modals.less new file mode 100644 index 00000000..d487cf3e --- /dev/null +++ b/less/modals.less @@ -0,0 +1,34 @@ +// +// Modals +// -------------------------------------------------- + +.@{namespace}modal { + position: fixed; + top: 0; + z-index: z("modal"); + width: 100%; + min-height: 100%; + overflow: hidden; + background-color: #fff; + opacity: 0; + -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; + transition: transform .25s, opacity 1ms .25s; + .transform(translate3d(0, 100%, 0)); + .transition-timing-function(@timing-fuction); + + // Active modal + &.@{namespace}active { + height: 100%; + opacity: 1; + -webkit-transition: -webkit-transform .25s; + transition: transform .25s; + .transform(translate3d(0, 0, 0)); + .transition-timing-function(@timing-fuction); + } +} +.@{namespace}android .@{namespace}modal .@{namespace}bar{ + position: static; +} +.@{namespace}android .@{namespace}modal .@{namespace}bar-nav~.@{namespace}content{ + padding-top: 0; +} diff --git a/less/mui.less b/less/mui.less new file mode 100644 index 00000000..7c4152a6 --- /dev/null +++ b/less/mui.less @@ -0,0 +1,48 @@ +// Variables +@import "variables.less"; + +// Mixins +@import "mixins.less"; + +// Normalize & Base CSS +@import "normalize.less"; +@import "base.less"; +@import "type.less"; +@import "grid.less"; + +// Components +@import "scroll.less"; +// @import "iscroll.less"; +@import "off-canvas.less"; +@import "loadings.less"; +@import "buttons.less"; +@import "bars.less"; +@import "badges.less"; +@import "cards.less"; +@import "table-views.less"; +@import "slider-cell.less"; +@import "forms.less"; +@import "segmented-controls.less"; +@import "popovers.less"; +@import "popup.less"; +@import "pagination.less"; + +// // Javascript components +@import "modals.less"; +@import "sliders.less"; +@import "switches.less"; +@import "push.less"; +@import "pullrefreshs.less"; +@import "toast.less"; + +@import "number.less"; + +// Muiicons +@import "icon.less"; +// fullscreen +@import "fullscreen.less"; +@import "hack.less"; +// // os +@import "os.less"; +// //iframe +@import "iframe.less"; \ No newline at end of file diff --git a/less/normalize.less b/less/normalize.less new file mode 100644 index 00000000..69bab10b --- /dev/null +++ b/less/normalize.less @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS text size adjust after orientation change, without disabling +// user zoom. +// + +html { + font-family: sans-serif; // 1 + //-ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background: transparent; +} + +// +// Improve readability when focused and also mouse hovered in all browsers. +// + +a:active, +a:hover { + outline: 0; +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + margin: 0.67em 0; + font-size: 2em; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + color: #000; + background: #ff0; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -.5em; +} + +sub { + bottom: -.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + height: 0; + //-moz-box-sizing: content-box; + box-sizing: content-box; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + margin: 0; // 3 + color: inherit; // 1 + font: inherit; // 2 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +//button::-moz-focus-inner, +//input::-moz-focus-inner { +//padding: 0; +//border: 0; +//} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + padding: 0; // 2 + box-sizing: border-box; // 1 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome +// (include `-moz` to future-proof). +// + +input[type="search"] { + -webkit-box-sizing: content-box; // 2 +// -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; // 1 +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + padding: .35em .625em .75em; + margin: 0 2px; + border: 1px solid #c0c0c0; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + padding: 0; // 2 + border: 0; // 1 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; +} diff --git a/less/number.less b/less/number.less new file mode 100644 index 00000000..286fa4fb --- /dev/null +++ b/less/number.less @@ -0,0 +1,71 @@ +.@{namespace}numbox { + border: solid 1px #bbb; + overflow: hidden ; + display: inline-block; + height: 35px; + border-radius: 3px; + background-color: #efeff4; + vertical-align: top; + position: relative; + padding: 0px 40px 0px 40px; + width: 120px; + vertical-align: middle; + + //基于.mui-btn扩展，故命名修改为mui-btn-numbox + [class*=numbox-btn],[class*=btn-numbox] { + width: 40px; + height: 100%; + position: absolute; + top: 0px; + border: none; + border-radius: 0px; + font-size: 18px; + color: #555; + line-height: 100%; + font-weight: normal; + overflow: hidden; + padding: 0px; + background-color: #f9f9f9; + + &:active{ + background-color: #ccc; + } + &[disabled]{ + color: #c0c0c0; + } + } + + .@{namespace}numbox-btn-plus,.@{namespace}btn-numbox-plus { + right: 0px; + border-top-right-radius:3px; + border-bottom-right-radius:3px; + } + .@{namespace}numbox-btn-minus,.@{namespace}btn-numbox-minus { + left: 0px; + border-top-left-radius:3px; + border-bottom-left-radius:3px; + } + + .@{namespace}numbox-input,.@{namespace}input-numbox { + width: 100% !important; + height: 100%; + text-align: center; + border: none !important; + border-left: solid 1px #ccc !important; + border-right: solid 1px #ccc !important; + margin: 0px; + padding: 0px 3px !important; + display: inline-block; + border-radius: 0px !important; + text-overflow: ellipsis; + word-break: normal; + overflow: hidden; + } + +} + + +.@{namespace}input-row .@{namespace}numbox { + margin: 2px 8px; + float: right; +} \ No newline at end of file diff --git a/less/off-canvas.less b/less/off-canvas.less new file mode 100644 index 00000000..d6cff28d --- /dev/null +++ b/less/off-canvas.less @@ -0,0 +1,119 @@ +//.@{namespace}android{ +.@{namespace}off-canvas-wrap{ + .@{namespace}bar{//fix android + position: absolute!important; + .transform(translate3d(0, 0, 0));//fix ios(offcanvas scalable的时候,bar会消失) + -webkit-box-shadow: none; + box-shadow: none; + } + } +//} + +.@{namespace}off-canvas-wrap{ + position: relative; + width:100%; + height: 100%; + overflow: hidden; + z-index: @z-layers-default; + .@{namespace}inner-wrap{ + position: relative; + width: 100%; + height:100%; + z-index: @z-layers-default; + &.@{namespace}transitioning{ + -webkit-transition: -webkit-transform 350ms ; + transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + } + .@{namespace}off-canvas-left { + .transform(translate3d(-100%, 0, 0)); + } + .@{namespace}off-canvas-right{ + .transform(translate3d(100%, 0, 0)); + } + } + &.@{namespace}active{ + overflow:hidden; + height:100%; + .@{namespace}off-canvas-backdrop{ +// -webkit-backface-visibility: hidden; + transition: background 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5); + display: block; + position: absolute; + background: rgba(0, 0, 0, 0.4); + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: @z-layers-backdrop; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + } + &.@{namespace}slide-in{ + .@{namespace}off-canvas-right { + -webkit-transform: translate3d(100%, 0px, 0px); + z-index: @z-layers-max!important; + } + .@{namespace}off-canvas-left { + -webkit-transform: translate3d(-100%, 0px, 0px); + z-index: @z-layers-max!important; + } + } +} + + +.@{namespace}off-canvas-left, .@{namespace}off-canvas-right { +// -webkit-backface-visibility: hidden; + width: 70%; + min-height:100%; + top: 0; + bottom: 0; + position: absolute; + background: #333; + box-sizing: content-box; + -webkit-overflow-scrolling: touch; + z-index: -1; + visibility: hidden; + &.@{namespace}transitioning{ + -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + } +} +.@{namespace}off-canvas-left { + left: 0; +} +.@{namespace}off-canvas-right { + right: 0; +} + +//scalable +.@{namespace}off-canvas-wrap:not(.@{namespace}slide-in).@{namespace}scalable { + background-color: #333; + >.@{namespace}off-canvas-left,>.@{namespace}off-canvas-right{ + width: 80%; + .transform(scale(0.8)); + opacity: 0.1; + &.@{namespace}transitioning{ + -webkit-transition: -webkit-transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + transition: transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 350ms cubic-bezier(0.165, 0.84, 0.44, 1); + } + } + >.@{namespace}off-canvas-left{ + -webkit-transform-origin: -100%; + transform-origin: -100%; + } + >.@{namespace}off-canvas-right{ + -webkit-transform-origin: 200%; + transform-origin: 200%; + } + &.@{namespace}active{ + >.@{namespace}inner-wrap{ + .transform(scale(0.8)); + } + >.@{namespace}off-canvas-left,>.@{namespace}off-canvas-right{ + .transform(scale(1)); + opacity: 1; + } + } + +} \ No newline at end of file diff --git a/less/os.less b/less/os.less new file mode 100644 index 00000000..d3be3208 --- /dev/null +++ b/less/os.less @@ -0,0 +1,39 @@ +.@{namespace}plus-visible,.@{namespace}wechat-visible{ + display: none!important; +} +.@{namespace}plus-hidden,.@{namespace}wechat-hidden{ + display: block!important; +} +.@{namespace}tab-item.@{namespace}plus-hidden,.@{namespace}tab-item.@{namespace}wechat-hidden{ + display: table-cell!important; +} +.@{namespace}plus .@{namespace}plus-visible,.@{namespace}wechat .@{namespace}wechat-visible{ + display: block!important; +} +.@{namespace}plus .@{namespace}tab-item.@{namespace}plus-visible,.@{namespace}wechat .@{namespace}tab-item.@{namespace}wechat-visible{ + display: table-cell!important; +} +.@{namespace}plus .@{namespace}plus-hidden,.@{namespace}wechat .@{namespace}wechat-hidden{ + display: none!important; +} + + +//ios 状态栏 +.@{namespace}plus.@{namespace}statusbar.@{namespace}statusbar-offset{ + .@{namespace}bar-nav { + padding-top: 20px; + height:64px; + &~.@{namespace}content { + padding-top: 64px; + .@{namespace}pull-top-pocket { + top: 64px; + } + } + } + .@{namespace}bar-header-secondary { + top: 64px; + &~.@{namespace}content { + padding-top: 94px; + } + } +} diff --git a/less/pagination.less b/less/pagination.less new file mode 100644 index 00000000..1984647c --- /dev/null +++ b/less/pagination.less @@ -0,0 +1,150 @@ +// +// 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-layers-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; + + .clearfix(); + + 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; + } + } + +} \ No newline at end of file diff --git a/less/popovers.less b/less/popovers.less new file mode 100644 index 00000000..f0d5fdab --- /dev/null +++ b/less/popovers.less @@ -0,0 +1,203 @@ +// +// Popovers (to be used with popovers.js) +// -------------------------------------------------- + +.@{namespace}popover { + position: absolute; + z-index: @z-layers-popover; + display: none; + width: 280px; + background-color: @chrome-color; + border-radius: 7px; + opacity: 0; + .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-layers-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; + .transform(translate3d(0, 100%, 0)); + -webkit-transition: -webkit-transform .3s, opacity .3s; + transition: transform .3s, opacity .3s; + background: none; + .box-shadow(none); + .@{namespace}popover-arrow{ + display: none; + } + + &.@{namespace}popover-bottom{ + position: fixed; + } + + // Active modal + &.@{namespace}active { + .transform(translate3d(0, 0, 0)); + } + .@{namespace}table-view { + margin: 8px; + border-radius:4px; + text-align: center; + color: @primary-color; + .@{namespace}table-view-cell { + .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-layers-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; + .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 { + .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; + .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; + } +} diff --git a/less/popup.less b/less/popup.less new file mode 100644 index 00000000..b0d537be --- /dev/null +++ b/less/popup.less @@ -0,0 +1,153 @@ +.@{namespace}popup-backdrop{ + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: @z-layers-backdrop; + background: rgba(0,0,0,.4); + opacity: 0; + .transition-duration(400ms); + &.@{namespace}active { + opacity: 1; + } +} +.@{namespace}popup{ + width: 270px; + position: absolute; + z-index: @z-layers-max; + left: 50%; + top: 50%; + text-align: center; + border-radius: 13px; + overflow: hidden; + opacity: 0; + .transform(translate3d(-50%,-50%,0) scale(1.185)); + -webkit-transition-property: -webkit-transform,opacity; + transition-property: transform,opacity; + color: #000; + display: none; + &.@{namespace}popup-in{ + opacity: 1; + .transition-duration(400ms); + .transform(translate3d(-50%,-50%,0) scale(1)); + display: block; + } + &.@{namespace}popup-out{ + opacity: 0; + //z-index:max-1 + .transition-duration(400ms); + .transform(translate3d(-50%,-50%,0) scale(1)); + } +} +.@{namespace}popup-inner { + padding: 15px; + border-radius: 13px 13px 0 0; + position: relative; + background: rgba(255,255,255,.95); + &:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0,0,0,.2); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + -webkit-transform: scaleY(.5); + transform: scaleY(.5); + } +} +.@{namespace}popup-title { + font-weight: 500; + font-size: 18px; + text-align: center; +} +.@{namespace}popup-title+.@{namespace}popup-text { + margin-top: 5px; + font-size: 14px; +} +.@{namespace}popup-buttons { + height: 44px; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center +} + +.@{namespace}popup-button { + width: 100%; + padding: 0 5px; + height: 44px; + font-size: 17px; + line-height: 44px; + text-align: center; + color: #007aff; + display: block; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; + box-sizing: border-box; + -webkit-box-flex: 1; + background: rgba(255,255,255,.95); + &:after { + content: ''; + position: absolute; + right: 0; + top: 0; + left: auto; + bottom: auto; + width: 1px; + height: 100%; + background-color: rgba(0,0,0,.2); + display: block; + z-index: 15; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-transform: scaleX(.5); + transform: scaleX(.5) + } + &:first-child { + border-radius: 0 0 0 13px; + &:last-child { + border-radius: 0 0 13px 13px + } + } + &:last-child { + border-radius: 0 0 13px 0; + &:after { + display: none + } + } + &.@{namespace}popup-button-bold { + font-weight: 600 + } +} +.@{namespace}popup-input input{ + height: 26px; + background: #fff; + margin: 0; + margin-top: 15px; + padding: 0 5px; + border: 1px solid rgba(0,0,0,.3); + border-radius: 0; + width: 100%; + font-size: 14px; +} +.@{namespace}plus.@{namespace}android .@{namespace}popup-backdrop{ + .transition-duration(1ms); +} +.@{namespace}plus.@{namespace}android .@{namespace}popup{ + .transition-duration(1ms); + .transform(translate3d(-50%,-50%,0) scale(1)); +} diff --git a/less/pullrefreshs.less b/less/pullrefreshs.less new file mode 100644 index 00000000..cc159cd8 --- /dev/null +++ b/less/pullrefreshs.less @@ -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,R0lGODlhMAAwAKUAAAQCBISChMTCxERCRKSipOTi5GRiZCQiJJSSlNTS1LSytPTy9HRydDQyNFxaXIyKjMzKzExKTKyqrOzq7GxqbCwqLJyanNza3Ly6vPz6/Hx6fDw6PBwaHISGhMTGxERGRKSmpOTm5GRmZCQmJJSWlNTW1LS2tPT29HR2dDQ2NFxeXIyOjMzOzExOTKyurOzu7GxubCwuLJyenNze3Ly+vPz+/Hx+fDw+PBweHP///wAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCQA5ACwAAAAAMAAwAAAG/sCccEgsGnMsCixxbDqfzoyoFYFloNisceGIRFQnrXiYQKGYxZcq0gIbMZEPZFw82UQixqLIpbqJEzcNDSpXdEIZAQYiBhI1RC9dbWFDNR2DMYWHQwKMIhQzRAtrX5RCCRsxKQ0mm5UBeAYIj0J9pUNSmAaGrjklFIsiLEO2fzkmgw0pw71CNRYGixqGkWx/JxGYAXQZvEQhMHgiGLUOfmHPDaoDBUcnpkQXJCQJ3jk1CosGDC85dgE2AlwpIGiQDCMZQAz4IMDIAxsQLYQikgEFIw1o3mSL0cJbDRofOIhM4TAgxAAu+nGCoWCPkxcIbtAgMoMCDpEjjSTooCFg/s8HNAxlCKHlgqETD0bgFDmC3BYFAHtCRJCA1piEKZZywIFC5ZEaBWQADNCzw4RDLJQudcDCapQEDyE6pVPDBs4ULtxiyUDjwQN4YyZUGLECsJYaLy40M0G0mePD3SJLtrdpgeXLmB8VkCADhAwCnT8TmNurhdalMWiAsGCBBOvWsGc6bgGgtu3bMVa7nvfatexmEW4LBxBjMwEQx0GDQE7alenTIivMrJHhBHXr1bs9XvCiu3fveh+LN3KisasQhrVkuGACA2UtJzBguBD+SY0QGBQocKF4U4L9CtAQQn1FIOaBfi6YoIAJLo3xgoIAKuDBAgT6859+GGIw4CEZ9BSAQYIYKpBAevi5gKAJJpRASw0NQkEhIiUoaGKCJpxVRH4YmsACPAWk+N4QJ8RoXg4LsLBghkbIGKBXiOCoYRP46UeDWzVMQMOMvw0RggAC6lVDCQCaEEYGEEDgAQSPLAAhf0aARYMANhaRQX1qYjhRBhCaQMsFJi6Y3pxj1GDkflMiIqN7TQLIjGMThGkenvrpOUSPGMbpykcYemAVpO3xUoMHCbqgaTMFnMhkBh8u6NYLIbbjCl99qkgRhIhWksCMAlQIBV8muIABYJD6as8JEBZ6nnxDGqqgpEXgh4Gl4xmqX63RZoGpC8ZWm4WVAjB5SBAAIfkECQkAPQAsAAAAADAAMACFBAIEhIKExMLEREJEpKKk5OLkZGJkJCIkFBIUlJKU1NLUVFJUtLK09PL0dHJ0NDI0DAoMjIqMzMrMTEpMrKqs7OrsHBocnJqc3NrcXFpcvLq8/Pr8fHp8PDo8bG5sBAYEhIaExMbEREZEpKak5ObkZGZkLC4sFBYUlJaU1NbUVFZUtLa09Pb0dHZ0NDY0DA4MjI6MzM7MTE5MrK6s7O7sHB4cnJ6c3N7cXF5cvL68/P78fH58PD48////AAAAAAAABv7AnnBILBp7qcDudmw6n84Np1QK6KDYrLHhoDo22vAQE4GljCyHofQ1CnCGmLi4Sex2kUaR5fGCiTQqMhMOLHNDLCh3OytXiGpsf0I6CYMyHpKHMTsBHAEkRFxrbUMpMpY5h0Q6ipwEjj0NfZGIHJYtmaoYnXdnQml+QzmnEwsKqkU6FIsJf6K0PSwGE4MJcxu5QhUgvCFCssE6BJYZoEYbhkYFMxQYsJMai3nRCSj1YCSC1BTnMyoZEowQQHEBxQxzQzZE6AQDQxMB02QYyKQjRIYHGGUILHihYw49Q2KAyJGuSQMbKgQQucHBxQMTLzUWuWGjI8ELNmL82VBBy/6NP4kGYBw6IBUaATY7Xhhx452WDQxkvHzpwgUMGk50kFjBkaANrHMU8BhqwoWHFE6P6MAwgmPAQzoiwHwgI0e2JxtiEBhRcg4NEQNs3M1CowAyITkQHl6sRQe2x5DTHmLRoLJly1cq5NCwQgNnz53lMDZgorRp0wNC5GDAmsGMFa5hi16Mw4Lt27hFaIj9uvUMBrMP1z5xwgJx48ZFaP78ecXmt7Rhln6J2psOx9g3ONbOONrlBpQpS+5OnggLxXN0zDCsagOGzoOxkLCAIEJfLFp3u3aoygGA/wfMEN8QOtAQAmu9rQCSGDG88N+DE8QwXjQKtNaaBiRM6AQLBPfU8OB/HzjQkxEkaPBbbCugNcmCUDTgTAsOfngCA0box9oKMfRVQIoDspDCCgitpcKHABxgBGy/5QBWQvph2ESJrOXwjg4rPPBgDSQKkJhTOqTgGgMrGLKBBBKEIMEVDcC2HxoXlKbBEdxtoSYDTPSwgZqNCIHBiWEeAZ4YOsSAoJRC3OmaBjvt9ltwh1XwJZAJ4QnLjq2NeJgOq7EWAiyGwkdgCK/NsOliBSC4wpJ2mgjmOzRYyF57OZyoYqSsIbqKAr/NIICGeOWwwgwa3GcosLmwoCahyJToJB0rwJZnEcpaWh6tDNg6bWOrzYDstVloJgCqhwQBACH5BAkJADsALAAAAAAwADAAhQQCBISChMTCxERCRKSipOTi5GRiZCQiJJSSlNTS1LSytPTy9HRydFRSVBQSFDQyNIyKjMzKzKyqrOzq7GxqbJyanNza3Ly6vPz6/Hx6fFxaXAwODExOTCwuLBwaHDw6PAQGBISGhMTGxERGRKSmpOTm5GRmZCQmJJSWlNTW1LS2tPT29HR2dFRWVDQ2NIyOjMzOzKyurOzu7GxubJyenNze3Ly+vPz+/Hx+fFxeXBweHP///wAAAAAAAAAAAAAAAAb+wJ1wSCwadzUEqnBsOp9ODAKHQ92g2KxxBaFCMNrwsEAg1baQDO5rhLFYKXERQ6pUaKsi1wsmyhgGJiF9cjs3Eih2IldDewFsQzcEJpQBhIUpFSgoNBNEXBkZkEIWlIERhUQ3MXYVKow7C11rhCsvlCajqTsFmnZnQnu0QxGmFBa7qhebFSSMsmqQKywmgQRyN5dDMgS+CcEhfIYKlBQMnlvaQhM2AgWwQjcRiXd5KyQSZWATM9UGCkZuXKAw41sRFQoUxBCAbgidRCSYHHETKMOlGzBmcNhowMgFhQgVwMgzxAKNkU8WxGCAagyEjTA7FikRMkZCFRb63GgI5V3+MAItYI7goEHEkRUJaiK04VMOBhsGYG5sUGGBkxsyRNRUoMKqHAsNhHLIkBPLjQIfY6iIU+hGBQ5DDURQ9+RGigsq6GaRoUGDBL1YVpRItiMCT8KIoWTDwLgxY3i7VkieTPkKO7wXMGOGkZjBiM+gQWuIYCNhQrUgRXZ+wLq1aw1pVaA+rRrxDNe4O2i4rCJzbxU2LrQk7Dl06BaobmRbjmEx5FQrFkSfLn3B88TY9QxOpmJ7IQwWegOGMqFDBxQktdwo8VEhslQ4PMj/kNds1tMIuxaCccKDA/keaADDdcEkYJppF5RA4BMYSPCAfP95cAAOMhzBnk0grcXIDV70YQFDHyuE0B+AHnRwgUcHqoDSGGuNNwELDpAQSQ0m6OCffx8YgZBNNlRIBAbtJdhEDB4AAMAB6RliwwgAumBECQLYoGARdinEVR4YRBCBCBFcYYEDRgIQwBYkDDCCDUc0d8QCISkADAYhvWIIDmE6AIweSZoFw2k2MAKnQhf0sYAOYeaA3QRWdudQnLCQECYIaBJ2Q2kJLbIoV4E2MkCYH4yHRQH4+SgEkDbJOYQIIIQp4y5PYZgCPH8qkKlDJoT5QJ5hPCXbBXn+GcOsQ5SwgZG3JsOekHOokN9zEniggwrZGRErsNGaVVoMfVYbBjsCiJpKEAAh+QQJCQA4ACwAAAAAMAAwAIUEAgSEgoTEwsREQkTk4uSkoqRkZmQkJiSUkpTU0tT08vRUVlS0srR0dnQ0NjQUFhSMiozMysxMSkzs6uxsbmwsLiycmpzc2tz8+vy8urysqqxcXlx8fnw8PjwcHhyEhoTExsRERkTk5uRsamwsKiyUlpTU1tT09vRcWly0trR8enw8OjwcGhyMjozMzsxMTkzs7ux0cnQ0MjScnpzc3tz8/vy8vrysrqz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAG/kCccEgsGnEEjUZ0bDqfToymZNHUoNis8VSgFjDa8FCUyTCLmJml9DUmWhCaGG1jMFJgInfd1n84HBZ5czg1dXYJV0NcXoOFDIAcJY5zBDcMNykwRGl8jjQBHAEqCYRENQJ2DCCKOJ0WfYUzkRatpjgiKZkMZziMMzOtCaKicrdDNS6YDDaKGF2weSctHCocDHM1lEIKKarGjBbBhTahHBCbRhjbOBM2AgS2hRfLKSeuKRn5YDAQ1hwC1AkQZcKIN0wCJqDJYMeGwiNvREFwVCNBAAMYVRhhuIuBi3tDaKQwwW6IggwfSg2ZYAGjS41Fctm5dOdCnhoKtIhwdoOC/kuMMVQWOZHg4C4b8QhhANHgp4ERGnI2qQEDhNE7UsXQ8PkTgU0sNQhwHGmqhoaXEUpONaFPLRQYMWIwcPvkRC9TCR4e2xtG27q/f+WZOkG4sOEr7vSVyafYBV8cATZInjx5RIJDM73tcsw3gITPoD+/kEBhbMdlnPcGGP2CNWvSiRnnS2EjQ4THkSlvQCHZciFtwDH4FUyosAIMx5MTf8xcz11CNp6HwXBh360JIQYUAKmlBpmZF261kEH+hQ26hapmxkrIRAcZFcg7oGBiua8EqlSZsR+FgQT45MmwQgvpxJQBTZmMpAhOWpAkxAkldOBAfOQNYMNG+aXwEREE7YzkFgwBHICNEGE1sEJ88b1g0DI2FCgEBgwxYEYTKcjAAgsrcFcICCjA54CKMQkQnTw1mFDPPQpI0NoL9xBwAAsPsNCCETXcsAAKIBwh3BHdfCPEBA8AAAALOdUAAZQskGAMGjqCpQwmzQgBQ5gAPACSAg6gSQFzE9TTC5hikjnEDR5E6UGWexmiCitDzCmmnUNgsMCND7yA3hMEZOaio2NmhUMEhd54wzEY2EBTfUQAWqeONTSAZgiXammDLhm0yamgqT7JAqzHkDFjEZxCWgQDFTgQUHNFqIorsllgcICYFcTKLA4pVFDBhccEAQAh+QQJCQA9ACwAAAAAMAAwAIUEAgSEgoTEwsREQkSkoqTk4uRkYmQkIiSUkpTU0tRUUlS0srT08vQUEhR0dnQ0MjSMiozMysxMSkysqqzs6uxsamycmpzc2txcWly8urz8+vwcGhw8OjwMCgwsLix8fnwEBgSEhoTExsRERkSkpqTk5uRkZmQkJiSUlpTU1tRUVlS0trT09vQUFhR8enw0NjSMjozMzsxMTkysrqzs7uxsbmycnpzc3txcXly8vrz8/vwcHhw8Pjz///8AAAAAAAAG/sCecEgsGnuUXI52bDqfTl1uscjpoNisUbOiZjTa8LCUyZS2mdlidS1eSISCuKiZrsFEVnr1LbJsFhYzeHM9UlQLCW1CXAszfUM6AigWKIOFQwVqMytMQ41riz0lgJQXmJECiCKLGnuQhguVFguimCUrnAtnjF2hQxezFryoQjoxjlVtoJAaJJQWOXM6hEQMvgs3vY6QEdA2DEca1UNJAgW2OhfJKyw9GiIxIhFXNASzMUbHKCjaRb4zBFCgk4FKjoFHbjyzQEKUOhQfAnyAYaSgrgUx3A25sSIFOT8RbPgTQmGCxA8RKRbBRUXNmgt4dITLQmNZjhAoA7j4ACHF/hEWCQB2yYGukIYYECLujLhi5hEdNEQAXOM0TIkQOiMGiGPraQGLHTHpWIFyoiIxOlJkWPFRCwMIEAS0zcKCGKYUVYvpzUJtnF+/XY2yYKFhcGHCV5KsLcNncb69CBxInjw5QAo7LbvoeqwXgQkDoEODNhEA7MVknIshMGCitevPpBU35rMiR4YIe3ugoMzbsiFqwDX0DTzHMAMGGo4nn5u7+ZC6ekUgNHqBD3MoNHBguBRGB5mWpzBZkCBDgglWWKCKyEy10A0V5MnLCHCBeA+giBCZse+kjgEJAAKoAAp5CUGGS5x0tEwCWsAkBAsEqFDehBjgVkRBiKyQERE2/TTwgSdNMAADDxlEUgAEE5JngBGaVQGiEAxsAAAAO6zQRAYSePCADNUcUwOAMqy4kgA5lJCOCzMC0IIcDOBggJPuFMDDCw88YAMaFdSQ2ieBpdBAkiEIQYMHG2zggTs6WPCAjgPIYQRhaGGQ5AkaMeBBC2ZqxIIEaz4QQHMZJAnADEOMuUELD2jUwwpUPvDClkZ5kOQIixia5ycmVOmBAddhYUOSIKRGwZ2XDpFAox6UiAoLks5Ygyh2HvpAVTqEUOULGCg6h50zNjAdSaSeWQQFPOiIg65zLNDCDoQWYSiiBeI4goXOEWGpsNVqoQEHeA7QabZE5DDAAALoFQQAIfkECQkAPgAsAAAAADAAMACFBAIEhIKEREJExMLEZGJk5OLkJCIkpKKkVFJU1NLUdHJ09PL0NDI0tLK0FBIUlJKUTEpMzMrMbGps7OrsLCosrKqsXFpc3NrcfHp8/Pr8PDo8vLq8HBocnJqcDAoMjIqMBAYEhIaEREZExMbEZGZk5ObkJCYkpKakVFZU1NbUdHZ09Pb0NDY0tLa0FBYUlJaUTE5MzM7MbG5s7O7sLC4srK6sXF5c3N7cfH58/P78PD48vL68HB4cnJ6c////AAAABv5An3BILBp9k91udmw6n87crtHY5aDYrDHTom4y2vCwtNmUtptao3UtkjcTcTEzXYOJq3TrW1x1q21yPlJUDQmBPlwNNXxDOQlUNSN3gj4FajUtTEOKa4gzi10FlY4DhSOBGXqNgyOFA4iVJS2ZDWdCnWxDBZEtcaSOMYuAuH+NqrUxcjmURAt/DTfFi40pfy0rRxnNQ0kDBbE5F8PYiSMxIxFXfpEXRjkpFTWjRX81A7+cG1Q7+UUF+2pYIZLjUocXHU4YCfgnRrYhN1qk4NYnhRkiMzZ0OLhRoRt7VFpcuJNjgZYZbTJE6MHx4AFpRlYksNdlBzhB4g5sRPiix/6Ih0dyzBgBsoVJOSVYItzoK1ZQgKFSVMoxguOJG06fwNvQgqKWFQcOxPCaZcUtUjeOAlsbhtm2t2+zysmwgq7duiuuJOFaZg9fZWxPfBhMmPCLAnV6hWoAeO0JHJAjS37BsFYkxmx9HJDMOcCDvX73tNixIUJmwYULP5CWg5nrDG7lirlLO2/m21pvNFgbY5OgBQEc8PAtZ4YCBV1nnzAAoDkOUhVIECCBIYZsRyNENN/uQKqcAhJIiJ++WnYJCR62N+dxguyTFSNUTJdOQkIFtUQqOFAPwAGOOyu4k8UNd2RQgwLTJahAY0O4oB4INggoxAkUfECcEQv0gMIAjviU0EF482FghIPNsbBDHwy4wAELGzQxgg0wQEBCM48EQJ+IRTRAAw0HcJNDCBxw4AINZyxwnAwKgFGCBRDEWMEWA+AQgHd9AEXEBRSoyMELQswgAgMMiJBNDgfECIMFZxGxjRg5kCDkig8tIAANYT60AgEQ5PnAbQPwICQPLXb5ZZ1DDGAmAgmwlYEAWtpAiZwM0CAmJxiYqYJ7WZwQpAsGMCgnDSxAYGUKZkJwIikr6PAmDp8MOqkjLzQJgQyYvscoBxRcCKmkVvqwAApN0grMBmC2YISXYL5KxAA2EMAgbkJ8Sii0WmQAAwsMoHAdtUWMgIIFpgETBAAh+QQJCQA3ACwAAAAAMAAwAIUEAgSEgoTEwsREQkTk4uRkZmSkoqQkIiTU0tRUUlT08vQ0MjR0dnS0srSUlpSMiozMysxMSkzs6uxsbmwsKizc2txcWlz8+vw8Ojy8urwcGhysqqx8fnyEhoTExsRERkTk5uRsamwkJiTU1tRUVlT09vQ0NjR8eny0trScmpyMjozMzsxMTkzs7ux0cnQsLizc3txcXlz8/vw8Pjy8vrwcHhysrqz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/sCbcEgsGm8SGq11bDqfThmt0aDJoNis8YKiZi7a8BCUyYC2GVsDdS2SMxJx8TJdg4mlNOpbLHWrbXI3UlQNCIE3XA02fEMyCFQ2HneCNwRqNihMQ4priC2LXQSVjgKFHoEXeo2DHoUCiJUgKJkNZ0KdbEMEkShxpI4ri4C4f42qtStyMpRECn8NMMWLjSN/KCVHF7FCSQIEsTIVw9iJHiseEFd+kRVGMgQ0Ar9EfzbzcxlUNPRFBPo2rBCRkSQSDSMA/6zINgQGihHNjJQYYcaZsEINMhiZFYkKigp3ZCjQ0qLNBWuF1KC41QeBvS40wAmCp68XCgQRB7bwYG/N/kg5LV428FASC81QIyo9KkQDBLcnMiiiyKnFDwoYVLOUYFlJAkNgYMNcUEC2bNmvwC6oXcv2SgYKGuLKlUsi7A0UBvLq1bsBxAEAgAMLrhs2g4PDiBGnsCFCsGMAhMFmSEG5MmUHKTaggDt3bmRgePfutXHmQovTqFGjJaW2hAzXsGU8tUvbEQEUYEf8FFRCBQUTmwQpePBAQNYmFxoskPuAFAoO0FWMmD1wBYnOItzJAdEBegAOAQw4dSKBwYHOL2wcd3JhhYoTHOCDL2ekgQjsKhhekJZFZqIMD8QHHQcPJFXEC51NwJ8QNgzgwG5HKGDDBBA4IsEG3wUAnwpG7yAY1wcH4RHBAi+wIEATKzBQQAEnNCOOA95xWEQGM8ywQTgOvGDCAh/EoUAAHQQQQDYSTLBiAQ28A8Fh2vWxmhAwDLAAiQYI0UIMEbAQQzYyNHCkC/1wst47J+i4AAt3KGBBBBFsiYsLK8ZQpV0eYECiCSHeoCYLbX4FwZEhGJiWBS9MOQElV2bpJi4PHPnAmFDYMOULGAiq55p9ElFBCDGsWCFrJEy5gAqIKEACC1qiJYMBRwYAaRMlhPrCB8EJoQCWmToDZwyuAiPABxHkOYSaij4JgQsnWFqblbguumwWFxTA56HPhgHBBBMgAFYQACH5BAkJADwALAAAAAAwADAAhQQCBISChMTCxERCRKSipOTi5GRiZCQiJJSSlNTS1FRSVLSytPTy9HRydBQSFDQyNIyKjMzKzExKTKyqrOzq7GxqbJyanNza3FxaXLy6vPz6/Hx6fBwaHDw6PAQGBISGhMTGxERGRKSmpOTm5GRmZCwuLJSWlNTW1FRWVLS2tPT29HR2dBQWFDQ2NIyOjMzOzExOTKyurOzu7GxubJyenNze3FxeXLy+vPz+/Hx+fBweHDw+PP///wAAAAAAAAAAAAb+QJ5wSCwaeZTbTXZsOp9O3G2xuOGg2KxRk6JmNNrwcJTJjLaZ2CJ1LZIzFHFRM12Diap06ltUdattcjxSVAsJgTxcCzF8QzgJVDEgd4I8BWoxKUxDimuIMotdBZWOAoUggRp6jYMghQKIlSMpmQtnQp1sQwWRKXGkji+LgLh/jaq1L3IqKkcMfws1xYuNJ38pzVuxQikPJQSUQjgnkRnNGiAvIBFXfpEXRjgFNwK/RCwA+S03cxlet0bIULFCBEeSSPyKcMiXz4MNeLtSnAhnRIU1gDwYCCu0IIMREQ4Y5nMQIBsOBlpktNFgLVIoe0RGkPAgEsABERSzyPPHUWL+TkcRdtR0oEzOM5cpQKjEokGEDoYrKj2qdWPEticMAjjQAVNMnhQXrmLBUSMGMB4jsp1dm0UDg7dw4aoFhkOD3bt3r9wYUKKvX78V2EbYk4Ew4SUdWHBYrHjxYhKCe1HpkklABw6KG2fmEHgtCFqUhy0ScGPH39Odz4IoY/jGnhtxNKhgMJu27bmk6mqoi4P3brbAn+AYIeBsDZSVVFgYIGGTIBUECLz46USVBG8PTJCKYMKEBRE1xBZMQKKFN/M7pMmhQMOCBe8WfImn8KED9gcPYLAKg+MCAe/w0QACbkJkMMB9D+xgQTYaqIcFBXeg89977xHg4BAhnPdACzn+YHQDCiIg10QeH5xAhAw3UPieCEYc6I0NRQ2hggESSGBABE2c4EIOOSAQjjwxwMdiEQKggIIuBREgAQwS2BCHCgiYECUYMkCwQQ4bFFfEOBPEMEpFPxWAQo0wTCCECg2QQEIDYOCQAY85QOAcEXaJgQMES8JAwh0MzECCASvcoYILAVy5AHAvwMAkDCDImKYBbA6RAJwBXFiJBjMwKUEOgTCQJgmBckIDnBaIl0UGiyoA0ZkNGLBmOAUUWmgCwKhQwZISlEpEn3+GyskCWOZgAXVY2LokBnPygKaake76AY8mEIsFCDYY0Ggfrb5qRAIQuLBqcEN46mqz4LaVg5oKnJYbxqQBfCtIEAAh+QQJCQA8ACwAAAAAMAAwAIUEAgSEgoTEwsREQkSkoqTk4uRkYmQcHhyUkpTU0tRUUlS0srT08vR0cnQUEhQsLiyMiozMysxMSkysqqzs6uxsamycmpzc2txcWly8urz8+vx8enwMCgwkJiQcGhw0NjQEBgSEhoTExsRERkSkpqTk5uRkZmSUlpTU1tRUVlS0trT09vR0dnQUFhQ0MjSMjozMzsxMTkysrqzs7uxsbmycnpzc3txcXly8vrz8/vx8fnwsKiz///8AAAAAAAAAAAAG/kCecEgsGnkUHG52bDqfzhxuscDloNisUaOiZjTa8HDhOSy2XdnXWMpkKOLiagcAOODEVYaquua7VX5xPHN1ADSCPFwyC2tDOQkLjAKJcTWGHBF5e2pgQzNUVAWDRBoPhhKeiipdfY8ikiqUpEQZIIYyQ1xeqgWxC3i0Qjkphh0rQrsyOJ5cgDBxK8hGFxyGIcmsC648KGkq00U5qkQ4AwMy5Dw5LIYtoxoiEfJXDIALF0Y5BTgCwUMPPHhoEUOAHA91Dqho0oaKFSI5koTKYCRgi4EHGtggUoODDiZONHgrQYQBjFCMKBZZ0GGgQA87XjRLoIWBH5GAZLQiaYQC/osDLi9+WBAuzL49obYlKCouQoqgHjqgGGRPUiwRMyod0SDjg8AW2AZB2lalhNYnK17s+ABy0ApWNtRp2bdQGAWmwvJiySGtr1+8YjUIHjz4iogUIyQMSLxY8Qa9PCKocDM5Q+UlCly4eKC5s+bHemH9IqtTQIzOnFNvBp03wi9GjCQJEKFghO3EtyWwgCwZR2UVvjPggJODwQrjxo9LgzxOw7gcz51Dnv4kRwlNwkoAzrJiAoYbDGjpUXHhbEgBNySoJ0ErkkOzey9siEE/hgQMG+NUjb1AhE0nM5yggAT2EWjAQ3FoUEAGOvG31BECYKCefTFgQEIzPGFBgR85/ngTCyMq/CNEehQq8EKGPIhAA1FoRVBDfkKYdE8jRpAoQQPQlMKCCQZsQNMRNhBggQUkJBLRFDqpREQENNCA4CMyGMBjA0ysQMKVF/LAQA0nWHBCjhDxM9xWgFFAgwloqrQCBDoEAIEnEQxpAQFtQWReEzlYYICUG3jCAAQbbPCmEFae0CUO06FQgZQVYEcImzoMKsQFQ55QA4qk5BAAmgYgIMiaOkSqSg4LdGmBDHdmIQCPJlQA46OhSipECVwOmQ8tGujA6gSJ/LmBqBAJ0OUJ6YgXgJRUygGprITWMGSx7TXAAphDgApsEUGSMAp1yv7KLLdQaIBAqCekCm4RBxd0eSstQQAAIfkECQkAOQAsAAAAADAAMACFBAIEhIKExMLEREJEpKKk5OLkZGZkJCIklJKU1NLUtLK09PL0NDI0dHZ0XFpcFBYUjIqMzMrMTEpMrKqs7OrsbG5sLCosnJqc3NrcvLq8/Pr8PDo8fH58HB4chIaExMbEREZEpKak5ObkbGpsJCYklJaU1NbUtLa09Pb0NDY0fHp8XF5cHBocjI6MzM7MTE5MrK6s7O7sdHJ0LC4snJ6c3N7cvL68/P78PD48////AAAAAAAAAAAAAAAAAAAAAAAABv7AnHBILBpzNstMcGw6n06UBQCYaaDYrDH2oLIW2vAww0hljJQu4IEyijIZiriIGjxYllgx7QUTUScKCjY3c0MoOCx3HIVDXFRsRDcJgjACjYY5IYosBy5EjwBfoAowCicFmUMaIJwrV0KhkUIaH4IKl6pDNh2KHSeOaqNCBZUncrpCNyN3LBttOXxr0BoZMIGfYiiwRRgknCWxwn4mgafQRTfcRAIODifrOTcenDMiOQsSL/ptgKUnGIzcKGBDADIiIBjMYLAiAh0Gisw0eXMqAyZ5FGxUsmFkAAOFZQKkGhKCBAQ9TjSUuzdkgQtjCs4UyYCjzMcZAy7AUqllQf4jleaunWJZJIaHFB+RzniRAV2YgRlgKkgQT1ICAykWfsQRcE6MQEIVfIhxsYmGEy8UpkCQadItGyLKQkFBYwAIP4YAZTAhN8sNEUx0iXCarDCUGygSK15sWJ2Gx5AfF3IxwsEKy5gvQzAc4QQczxlA24hhQJ/pfag3F44gFewJAaVPy1adzJZQU6ZKCaC8ordv37R1dbYR2sYJ4xlsyLmxAMUCDQueR69qSINj69hv9DXMfcgNCgmSDValQUGFBnjnoAiNYbvZCA0MyFegipIguO6912ghv7+MkWJ8VcotH/jkxAIEjNCffCpEQN1hBUSFWyAJECaECxUsaIAMCvnsdBAUZNFSTlCnfCiEDAuOcMGHLnhgg4VEAEUUPi/dEpMRKMoXQFerQMBBAC3wWARFg1z0nQ24cVREAgEE4GAR1XDAgQon5XBWaBlcscAJuZkgEEEGHbHNERR4EICUHwiBAgEXlEAALOUIcgKM1olxwwRScoAALGuWcMGbtFgjSDaFYSDlmeHRQkObgAohwoAKmGjIDSWcqQIBmKzJKDe1VPJBfli4kGcAM2qwqJvrxPCPAgBWh8CPKpxwkambWlVJLploUMKUEKSXg6YX0FCWP0XqYgIELXgJJQ1+NkrEG3F0Z4SmqEobhgYhtDkBqNYSUcAEMMxoSBAAIfkECQkAOwAsAAAAADAAMACFBAIEhIKExMLEREJE5OLkZGJkpKKkJCIk1NLUVFJU9PL0dHJ0tLK0lJaUFBIUNDI0jIqMzMrMTEpM7OrsbGpsrKqs3NrcXFpc/Pr8fHp8vLq8PDo8DA4MnJ6cHBocBAYEhIaExMbEREZE5ObkZGZkpKakLC4s1NbUVFZU9Pb0dHZ0tLa0nJqcNDY0jI6MzM7MTE5M7O7sbG5srK6s3N7cXF5c/P78fH58vL68PD48HB4c////AAAAAAAAAAAAAAAABv7AnXBILBp3gtwgdGw6n85UzuMZYKDYrDFmoppS2vBQIIIJtiaH52us6HQacTGFejwGsSLXCyaOOAAAD31yOxh1Jg8uNkQKaWuEhhSBgpFyM3YPLSdEE12QRCEflCWFRBgXiQ8yV0JcaoNDGAOULYymQyEtLZo4Q458QwaUH764QzYZD4kwrZ5qbDsKOpQ1chiWQjQDmR2un2w2AZQONEc2rUURMjI4t8gNyy0iE9I19wVgFg6UAUY2BHAIqFekhgQJMBYgmCPCjoQzR2Z4CKQj3Q4bE3AwYDDDGJELMBBKSOBiBBEGORrkcRJDBYcKjV5snLGCQZwiAlCE3HmhRP4rDBa0IPh5oibNjStMbmmQQGTIAgIsagGoYaPVFQiyITuRYWdIFObkxDDKcUWIGO+cYBBQY6cBUzYQMKiJY0RaLCkqoCigAFeKFSto3J06IsKxHSOkHl78xEYKbI9TRFZcCB2Gy5gvMzpxY4EKz6A/s2AcYYUGDaZRn8YRIwMJEgVgv45NYvTiCDNrzi0rwDUJCrRfv7Z9OERZjsg5CuC8oPnn5p6JH4twOvUKHKZx1HM8uTtjdOAxhB/MuDwRGzGCHhuhNctaEC7a40VtgbxaBC5u3Ahws9AJq3XZdx4BHegXQAY3gECQGGMlx0AICgiowAoB7KffDS4MVRkBVfzNkFxWR5wAwoX6QRCVEBhpEaEQGBRlFU0rLDgEBPtlEEAAFchoQQcRyGdIUUoJoYBMutlkBI36sRCWLAaw0EAJBDQxQlUMuHNeRh52ZIQFDTSg4XkRdMmCAX1hEEIEaDIyYZbqDSiQjLJQFkMHLDi50A4pdKhBKxZcpZV4YtiggZMslHALBoDNdShgHr5QHgGEKimLUXsOMYJVDMBZ2QyErvAOonNViqJxNAkgYBYnENqBjHlyJKorMzEQJS4YVNCAkyGkBeoMr15E5Aym0mrrmJYgWpOnRYBa5alQ0FCCAUtOulGvQkypgabm7UqteVDYoNGy3IqREWuHBQEAIfkECQkAPQAsAAAAADAAMACFBAIEhIKExMLEREZEpKKk5OLkZGZkJCIklJKU1NLUVFZUtLK09PL0FBIUdHZ0NDI0jIqMzMrMTE5MrKqs7OrsbG5sLCosnJqc3NrcXF5cvLq8/Pr8HBocDAoMfH58PDo8BAYEhIaExMbETEpMpKak5ObkbGpsJCYklJaU1NbUXFpctLa09Pb0FBYUfHp8NDY0jI6MzM7MVFJUrK6s7O7sdHJ0LC4snJ6c3N7cZGJkvL68/P78HB4c////AAAAAAAABv7AnnBILBp7EZkidmw6n86N5PVQbaDYrJE2eDwGLK14GMnkREZG1wY2LryCcZFlGklUtKLa2yZSThwtI2FyQiwVI4kXO0RcNl+EQjsOgRwDV4VCGnYjMhiNXZBEETwcgTOZQxsVEq0ejEJ7okIbMpUSmKk9MRJ2EmixoX09M6YcPMC6PTsQiSMGmI6zLA+VFXIbuUQFCq0jqD2ybcyVNjhHLJFECR4BIrBDOwScGRThJhU1NWEFFqYtCIxsuPBIgxEHBgzkCPGJCIsMvXJEaPKmBYcP6naseACgIw8jNRImNHHD3hAdCggweEIjxIkF8TCoANGx4wEjESrkSLizxv4KTBvOZUmBiYWLDjU7NgCnh4CJnVBdRNCmhQUBHkkBgKhg8sgODDBEJqxQolAEpEkHxIAXJYKLHDuZjtlRoyaPGVShsFhRwcXKTCVatICgTswOCkxS7ZhRQJljwxtYRJ4sOW+hbJgzb2CEAQWEz6A/h5jwWISGFadTo9ZBA4GH17Bjk3YcYcUC27gX6NYB47UL38BnK4swY0Hx48ZXCOgcurlwXaZP65Au3V42yekiY3+8Y8fmbN43s31M/ggDoalKFBazIcYNEuu1bDiNYTyUryQu6J+YKUHxBTqUYJ8Rhy1wAQoHXnBDHnLQYJtuuonAwICGCJBggiTUd1kBOvkgp1sC8eFAAIIJEhADJjv8hcWEtKRg2wwrFLdCV0OMmOANrG2zAlFPsOBiWUMwEMODuhlUBAH6XTADkKpoUCSTRZTgJIBsHaZDckZuQ8IMGhKxQwrG3RbGBhFEIEIEjDDwIJcE4iCADjTGY5maEAq1wYMrwILBfyvEt9lcMeg2gw6w3GmcBkA5WVxijlEQ5gpMGnobPAUQGWchO1wZITx32oZoPCLAOMM7yhQg6AoM0qKBjGzRAOECjaWyQYe6pcCWpJ/G459xAlCIxawxalCYoTPkOsReu/mKhZQaQEnLCrjZx+yl5eFqWXlOZGocodiOQYEOAqSaSRAAOw=="); +//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{ + .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; + } + } +} \ No newline at end of file diff --git a/less/push.less b/less/push.less new file mode 100644 index 00000000..4673684f --- /dev/null +++ b/less/push.less @@ -0,0 +1,61 @@ +// +// 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-layers-default + 1; + -webkit-transition: -webkit-transform .4s; + transition: transform .4s; + .transform(translate3d(0, 0, 0)); + + &.@{namespace}left { + z-index: @z-layers-default; + .transform(translate3d(-100%, 0, 0)); + } + + &.@{namespace}right { + z-index: @z-layers-default + 2; + .transform(translate3d(100%, 0, 0)); + } + } +} + +// Add chevrons to elements +.@{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; + .transform(translateY(-50%)); + } +} + +.@{namespace}push-left:after { + left: 15px; + content: '\e582'; +} +.@{namespace}navigate-right:after, +.@{namespace}push-right:after{ + right: 15px; + content: '\e583'; +} diff --git a/less/scroll.less b/less/scroll.less new file mode 100644 index 00000000..bf535a73 --- /dev/null +++ b/less/scroll.less @@ -0,0 +1,95 @@ + +.@{namespace}scroll-wrapper { +// -webkit-backface-visibility: hidden; + position: absolute; + z-index: 2; + top: 0px; + bottom: 0px; + left: 0; + width: 100%; + overflow: hidden; +} +.@{namespace}scroll { +// -webkit-backface-visibility: hidden; + position: absolute; + z-index: @z-layers-default; + width: 100%; + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +.@{namespace}scrollbar{ + position: absolute; + z-index: @z-layers-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; + } +} diff --git a/less/segmented-controls.less b/less/segmented-controls.less new file mode 100644 index 00000000..d7cbebec --- /dev/null +++ b/less/segmented-controls.less @@ -0,0 +1,167 @@ +// +// 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}segmented-control-vertical{ + border-radius:0; + border-width: 0; + border-collapse: collapse; + .@{namespace}control-item{ + display: block; + border-left-width: 0; + border-bottom: 1px solid #c8c7cc; + } + } + &.@{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; + .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}segmented-control-vertical{ + .@{namespace}control-item{ + border-bottom: 1px solid #c8c7cc; + &.@{namespace}active { + border-bottom: 1px solid #c8c7cc; + } + } + } + .@{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; + } +} diff --git a/less/slider-cell.less b/less/slider-cell.less new file mode 100644 index 00000000..77835387 --- /dev/null +++ b/less/slider-cell.less @@ -0,0 +1,20 @@ +.@{namespace}slider-cell{ + position:relative; + >.@{namespace}slider-handle{ + z-index: @z-layers-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-layers-default - 1; + } +} + + \ No newline at end of file diff --git a/less/sliders.less b/less/sliders.less new file mode 100644 index 00000000..2fbaea3c --- /dev/null +++ b/less/sliders.less @@ -0,0 +1,135 @@ +// +// Slider styles (to be used with galleries.js) +// -------------------------------------------------- + +// Outer wrapper for slider +.@{namespace}slider { + //-webkit-backface-visibility: hidden; + overflow: hidden; + width: 100%; + position:relative; + z-index: @z-layers-default; + .@{namespace}segmented-control.@{namespace}segmented-control-inverted{ + .@{namespace}control-item { + &.@{namespace}active { + border-bottom:0; + } + } + ~ .@{namespace}slider-group{ + .@{namespace}slider-item{ + //.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; + .transition(all 0s linear); + + // Individual slider + .@{namespace}slider-item { +// -webkit-backface-visibility: hidden; + position: relative; + display: inline-block; + white-space:normal; + 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{ + .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%; + .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; + .transform(translateZ(0)); + height:2px; + z-index: @z-layers-default; +} diff --git a/less/switches.less b/less/switches.less new file mode 100644 index 00000000..c0078892 --- /dev/null +++ b/less/switches.less @@ -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-layers-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; +// .box-shadow(inset 0 0 0 13px @positive-color); + .@{namespace}switch-handle { +// border-color: @positive-color; + .transform(translate(43px,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 { + .transform(translate(16px,0)); + } + } +} + +//增加蓝色开关 +.@{namespace}switch-blue { + // Sliding handle + .@{namespace}switch-handle { +// border: 1px solid rgba(0, 0, 0, .2); +// .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; +// .box-shadow(inset 0 0 0 13px @primary-color); +// .@{namespace}switch-handle { +// border-color: @primary-color; +// } + } +} \ No newline at end of file diff --git a/less/table-views.less b/less/table-views.less new file mode 100644 index 00000000..6d948726 --- /dev/null +++ b/less/table-views.less @@ -0,0 +1,500 @@ +// +// 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; + .hairline(double, #c8c7cc, 0); // Double grey border. + &:before{ + top:-1px;//cell 高亮时，保证边框仍旧可见 + } + +} +//.@{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; + .hairline(double, #222, 0); // Double grey border. + .@{namespace}table-view-cell{ + .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;//应该透明，否则会盖住ul的边框 + .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 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; +// .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; +// .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; + .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{ + .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{ + .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; + .transform(translateY(-50%)); + } + + // If the cell has a chevron, give some more room. + .@{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{ + &:before,&:after{ + height:0; + } + .@{namespace}table-view-cell:last-child:after{ + height:0; + } + } + //二级列表默认为向下箭头； + >.@{namespace}navigate-right:after, >.@{namespace}push-right:after { + content: '\e581'; + } + + &.@{namespace}active{ + margin-top: -1px; + .@{namespace}table-view,.@{namespace}collapse-content{ + display: block; + } + //二级列表展开后，变为向上箭头； + >.@{namespace}navigate-right:after, >.@{namespace}push-right:after { + content: '\e580'; + } + //二级列表展开后，高亮时宽度100% + .@{namespace}table-view-cell>a:not(.@{namespace}btn).@{namespace}active{ + margin-left: -31px; + padding-left: 47px; + } + } + .@{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%; + .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{ + background-color: #f2f2f2; + padding: 0; + margin:0; + border-left:1px solid #EEE; + border-top:1px solid #EEE; + .clearfix(); + &:after{ + position:static; + } + .@{namespace}table-view-cell { + vertical-align: top; + padding:11px 15px; + margin:0; + border-right: 1px solid #EEE; + border-bottom: 1px solid #EEE; + &.@{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; + } + } +} \ No newline at end of file diff --git a/less/toast.less b/less/toast.less new file mode 100644 index 00000000..29c3e4a1 --- /dev/null +++ b/less/toast.less @@ -0,0 +1,22 @@ +.@{namespace}toast-container { + position: fixed; + width: 100%; + bottom: 50px; + z-index: @z-layers-toast; + opacity: 0; + -webkit-transition: opacity .8s; + transition: opacity .8s; + &.@{namespace}active{ + opacity: 1; + } +} +.@{namespace}toast-message { + width: 270px; + margin: 5px auto; + padding: 5px; + background-color: #D8D8D8; + text-align: center; + color: #000; + border-radius: 7px; + font-size: 14px; +} \ No newline at end of file diff --git a/less/type.less b/less/type.less new file mode 100644 index 00000000..4605e7cc --- /dev/null +++ b/less/type.less @@ -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; +} diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 00000000..ea0f2a9f --- /dev/null +++ b/less/variables.less @@ -0,0 +1,85 @@ +// +// Variables +// -------------------------------------------------- +@namespace: mui-; + +// Type +// -------------------------------------------------- +@font-family-default: "Helvetica Neue", Helvetica, sans-serif; +@font-size-default: 17px; +@font-weight: 500; +@font-weight-light: 400; +@line-height-default: 21px; + + +// Colors +// -------------------------------------------------- + +// Main theme colors +//blue theme +@primary-color: #007aff; +//green theme +//@primary-color: #4cd964; +//@chrome-color: rgba(247,247,247,.98); +@chrome-color: rgb(247,247,247); + +// Action colors +@default-color: #929292; +@positive-color: #4cd964; +@negative-color: #dd524d; +@warning-color: #f0ad4e; +@royal-color: #8a6de9; +@grey-color: #c7c7cc; + + +// Bars +// -------------------------------------------------- + +@bar-base-height: 44px; +@bar-tab-height: 50px; +@bar-side-spacing: 10px; + + +// Cards +// -------------------------------------------------- + +@card-bg: #fff; + + +// Buttons +// -------------------------------------------------- + +@button-font-size: 14px; + + +// Transitions +// -------------------------------------------------- + +@timing-fuction: cubic-bezier(.1,.5,.1,1); // Inspired by @c2prods + + +// Borders +// -------------------------------------------------- + +@border-default: 1px solid #ddd; +@border-radius: 6px; + +// Z-Layers +// -------------------------------------------------- +@z-layers-default: 1; +@z-layers-below: -1; +@z-layers-max: 10000; + +@z-layers-bar: 10; +@z-layers-btn: 20; +@z-layers-icon: 20; + +@z-layers-backdrop: 998; +@z-layers-modal: 999; + +@z-layers-popover: 999; +@z-layers-arrow: 1000; + +@z-layers-scrollbar: 9998; + +@z-layers-toast: 9999; \ No newline at end of file diff --git a/package.json b/package.json index c04f112a..ee26f8f6 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "devDependencies": { "body-parser": "~1.9.1", + "del": "^2.2.0", "grunt": "~0.4.5", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.4.0", @@ -34,6 +35,7 @@ "grunt-contrib-copy": "~0.5.0", "grunt-contrib-csslint": "~0.2.0", "grunt-contrib-cssmin": "~0.9.0", + "grunt-contrib-handlebars": "~0.8.0", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-sass": "~0.7.3", "grunt-contrib-uglify": "~0.4.0", @@ -42,12 +44,25 @@ "grunt-html-validation": "~0.1.17", "grunt-jekyll": "~0.4.2", "grunt-jscs": "~1.7.0", + "grunt-jsdoc": "~0.5.4", "grunt-open": "^0.2.3", "grunt-sed": "~0.1.1", + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-csscomb": "^3.0.6", + "gulp-header": "^1.7.1", + "gulp-less": "^3.0.5", + "gulp-load-plugins": "^1.2.0", + "gulp-minify-css": "^1.2.3", + "gulp-plumber": "^1.0.1", + "gulp-rename": "^1.2.2", + "gulp-size": "^2.0.0", + "gulp-uglify": "^1.5.1", + "gulp-util": "^3.0.7", + "gulp-zip": "^3.0.2", "load-grunt-tasks": "~0.4.0", - "time-grunt": "~0.3.1", - "grunt-jsdoc": "~0.5.4", - "grunt-contrib-handlebars": "~0.8.0" + "run-sequence": "^1.1.5", + "time-grunt": "~0.3.1" }, "engines": { "node": "~0.10.1"