From 02cb94775f0f8356f5abd060b5ed9b3c591ce092 Mon Sep 17 00:00:00 2001 From: eteplus Date: Mon, 1 Feb 2016 18:30:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8vue-resource=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E6=95=B0=E6=8D=AE,=E4=BF=AE=E5=A4=8D=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +- build/dev-server.js | 2 + src/app.js | 2 +- src/assets/adv.jpg | Bin 0 -> 14537 bytes src/assets/sm.css | 4682 +++++++++++++++++++++++++++++++++++++++ src/components/List.vue | 2 +- src/data/tasks.json | 26 + src/views/home.vue | 66 +- 8 files changed, 4779 insertions(+), 35 deletions(-) create mode 100644 src/assets/adv.jpg create mode 100644 src/assets/sm.css create mode 100644 src/data/tasks.json diff --git a/README.md b/README.md index 7a3e707..77c0cd1 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,31 @@ # vue-sui-demo -[VUE](http://cn.vuejs.org/) 和 [SUI-Mobile](http://m.sui.taobao.org/) 结合的demo，禁用了SUI自带的路由，使用vue-router + +> 持续更新，如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^ + +> 后面有空再写学习历程和遇到的问题 + +--- +Vue很轻量，易定制，比较适合移动端，很喜欢Vue写组件的方式， +所有用[VUE](http://cn.vuejs.org/) 和 [SUI-Mobile](http://m.sui.taobao.org/) 写了一个移动端demo，用来反馈vue的学习成果（禁用了SUI自带的路由，使用[Vue-router](https://github.com/vuejs/vue-router)） + +##### 技术栈 + +> [vue](https://github.com/vuejs/vue) + +> [vue-router](https://github.com/vuejs/vue-router) + +> [vue-resource](https://github.com/vuejs/vue-resource) + +> [webpack](http://webpack.github.io/docs/) + +> [sui-mobile](http://m.sui.taobao.org/) + +> [es6-babel](https://babeljs.io/docs/learn-es2015/) + +--- ### 安装 -项目地址：（`git clone`） +项目地址：（使用`git clone`） ```shell git clone https://github.com/eteplus/vue-sui-demo.git @@ -29,9 +52,9 @@ npm run main ``` -###开发 +### 开发 -###目录结构 +### 目录结构 
 .
 ├── README.md           
@@ -45,6 +68,7 @@ npm run main
 ├── package.json             // 项目配置文件
 ├── src                      // 生产目录
 │   ├── assets               // css js 和图片资源
+│   ├── data                 // 数据文件
 │   ├── components           // 各种组件
 │   ├── views                // 各种页面
 │   ├── directives           // 各种指令
@@ -54,4 +78,4 @@ npm run main
 │   └── app.js               // Webpack 预编译入口
 │   └── index.html           // 项目入口文件
 .
-
\ No newline at end of file + diff --git a/build/dev-server.js b/build/dev-server.js index ed93a42..9b36fda 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -6,6 +6,8 @@ var favicon = require('express-favicon') var app = express() var compiler = webpack(config) +//设置资源目录 +app.use('/static', express.static(path.join(__dirname, '../src'))) app.use(favicon(path.join(__dirname, '../favicon.ico'))) // handle fallback for HTML5 history API diff --git a/src/app.js b/src/app.js index eecdc57..195daf0 100644 --- a/src/app.js +++ b/src/app.js @@ -20,7 +20,7 @@ routerConfig(router) // Resource Vue.use(VueResource) -Vue.http.options.root = '/api' +Vue.http.options.root = '/static/data' Vue.http.options.emulateJSON = true // Directive diff --git a/src/assets/adv.jpg b/src/assets/adv.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6eadbcfaaff891565c312815d487202e23c112c3 GIT binary patch literal 14537 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 [class*="col-"], +.row > [class*="tablet-"] { + box-sizing: border-box; + float: left; +} +.row.no-gutter { + margin-left: 0; +} +.row .col-100 { + width: 96%; + margin-left: 4%; +} +.row.no-gutter .col-100 { + width: 100%; + margin: 0; +} +.row .col-95 { + width: 91%; + margin-left: 4%; +} +.row.no-gutter .col-95 { + width: 95%; + margin: 0; +} +.row .col-90 { + width: 86%; + margin-left: 4%; +} +.row.no-gutter .col-90 { + width: 90%; + margin: 0; +} +.row .col-85 { + width: 81%; + margin-left: 4%; +} +.row.no-gutter .col-85 { + width: 85%; + margin: 0; +} +.row .col-80 { + width: 76%; + margin-left: 4%; +} +.row.no-gutter .col-80 { + width: 80%; + margin: 0; +} +.row .col-75 { + width: 71.00000000000001%; + margin-left: 4%; +} +.row.no-gutter .col-75 { + width: 75%; + margin: 0; +} +.row .col-66 { + width: 62.66666666666666%; + margin-left: 4%; +} +.row.no-gutter .col-66 { + width: 66.66666666666666%; + margin: 0; +} +.row .col-60 { + width: 55.99999999999999%; + margin-left: 4%; +} +.row.no-gutter .col-60 { + width: 60%; + margin: 0; +} +.row .col-50 { + width: 46%; + margin-left: 4%; +} +.row.no-gutter .col-50 { + width: 50%; + margin: 0; +} +.row .col-40 { + width: 36%; + margin-left: 4%; +} +.row.no-gutter .col-40 { + width: 40%; + margin: 0; +} +.row .col-33 { + width: 29.333333333333332%; + margin-left: 4%; +} +.row.no-gutter .col-33 { + width: 33.333333333333336%; + margin: 0; +} +.row .col-25 { + width: 21%; + margin-left: 4%; +} +.row.no-gutter .col-25 { + width: 25%; + margin: 0; +} +.row .col-20 { + width: 16%; + margin-left: 4%; +} +.row.no-gutter .col-20 { + width: 20%; + margin: 0; +} +.row .col-15 { + width: 10.999999999999998%; + margin-left: 4%; +} +.row.no-gutter .col-15 { + width: 15%; + margin: 0; +} +.row .col-10 { + width: 6%; + margin-left: 4%; +} +.row.no-gutter .col-10 { + width: 10%; + margin: 0; +} +.row .col-5 { + width: 1%; + margin-left: 4%; +} +.row.no-gutter .col-5 { + width: 5%; + margin: 0; +} +@media all and (min-width: 768px) { + .row { + margin-left: -2%; + } + .row .col-100 { + width: 98%; + margin-left: 2%; + } + .row.no-gutter .col-100 { + width: 100%; + margin: 0; + } + .row .col-95 { + width: 93%; + margin-left: 2%; + } + .row.no-gutter .col-95 { + width: 95%; + margin: 0; + } + .row .col-90 { + width: 87.99999999999999%; + margin-left: 2%; + } + .row.no-gutter .col-90 { + width: 90%; + margin: 0; + } + .row .col-85 { + width: 82.99999999999999%; + margin-left: 2%; + } + .row.no-gutter .col-85 { + width: 85%; + margin: 0; + } + .row .col-80 { + width: 78%; + margin-left: 2%; + } + .row.no-gutter .col-80 { + width: 80%; + margin: 0; + } + .row .col-75 { + width: 73%; + margin-left: 2%; + } + .row.no-gutter .col-75 { + width: 75%; + margin: 0; + } + .row .col-66 { + width: 64.66666666666666%; + margin-left: 2%; + } + .row.no-gutter .col-66 { + width: 66.66666666666666%; + margin: 0; + } + .row .col-60 { + width: 58%; + margin-left: 2%; + } + .row.no-gutter .col-60 { + width: 60%; + margin: 0; + } + .row .col-50 { + width: 48%; + margin-left: 2%; + } + .row.no-gutter .col-50 { + width: 50%; + margin: 0; + } + .row .col-40 { + width: 38%; + margin-left: 2%; + } + .row.no-gutter .col-40 { + width: 40%; + margin: 0; + } + .row .col-33 { + width: 31.333333333333332%; + margin-left: 2%; + } + .row.no-gutter .col-33 { + width: 33.333333333333336%; + margin: 0; + } + .row .col-25 { + width: 23%; + margin-left: 2%; + } + .row.no-gutter .col-25 { + width: 25%; + margin: 0; + } + .row .col-20 { + width: 18%; + margin-left: 2%; + } + .row.no-gutter .col-20 { + width: 20%; + margin: 0; + } + .row .col-15 { + width: 13%; + margin-left: 2%; + } + .row.no-gutter .col-15 { + width: 15%; + margin: 0; + } + .row .col-10 { + width: 8%; + margin-left: 2%; + } + .row.no-gutter .col-10 { + width: 10%; + margin: 0; + } + .row .col-5 { + width: 3%; + margin-left: 2%; + } + .row.no-gutter .col-5 { + width: 5%; + margin: 0; + } + .row .tablet-100 { + width: 98%; + margin-left: 2%; + } + .row.no-gutter .tablet-100 { + width: 100%; + margin: 0; + } + .row .tablet-95 { + width: 93%; + margin-left: 2%; + } + .row.no-gutter .tablet-95 { + width: 95%; + margin: 0; + } + .row .tablet-90 { + width: 87.99999999999999%; + margin-left: 2%; + } + .row.no-gutter .tablet-90 { + width: 90%; + margin: 0; + } + .row .tablet-85 { + width: 82.99999999999999%; + margin-left: 2%; + } + .row.no-gutter .tablet-85 { + width: 85%; + margin: 0; + } + .row .tablet-80 { + width: 78%; + margin-left: 2%; + } + .row.no-gutter .tablet-80 { + width: 80%; + margin: 0; + } + .row .tablet-75 { + width: 73%; + margin-left: 2%; + } + .row.no-gutter .tablet-75 { + width: 75%; + margin: 0; + } + .row .tablet-66 { + width: 64.66666666666666%; + margin-left: 2%; + } + .row.no-gutter .tablet-66 { + width: 66.66666666666666%; + margin: 0; + } + .row .tablet-60 { + width: 58%; + margin-left: 2%; + } + .row.no-gutter .tablet-60 { + width: 60%; + margin: 0; + } + .row .tablet-50 { + width: 48%; + margin-left: 2%; + } + .row.no-gutter .tablet-50 { + width: 50%; + margin: 0; + } + .row .tablet-40 { + width: 38%; + margin-left: 2%; + } + .row.no-gutter .tablet-40 { + width: 40%; + margin: 0; + } + .row .tablet-33 { + width: 31.333333333333332%; + margin-left: 2%; + } + .row.no-gutter .tablet-33 { + width: 33.333333333333336%; + margin: 0; + } + .row .tablet-25 { + width: 23%; + margin-left: 2%; + } + .row.no-gutter .tablet-25 { + width: 25%; + margin: 0; + } + .row .tablet-20 { + width: 18%; + margin-left: 2%; + } + .row.no-gutter .tablet-20 { + width: 20%; + margin: 0; + } + .row .tablet-15 { + width: 13%; + margin-left: 2%; + } + .row.no-gutter .tablet-15 { + width: 15%; + margin: 0; + } + .row .tablet-10 { + width: 8%; + margin-left: 2%; + } + .row.no-gutter .tablet-10 { + width: 10%; + margin: 0; + } + .row .tablet-5 { + width: 3%; + margin-left: 2%; + } + .row.no-gutter .tablet-5 { + width: 5%; + margin: 0; + } +} +.color-default { + color: #3d4145; +} +.color-gray { + color: #999; +} +.color-primary { + color: #0894ec; +} +.color-success { + color: #4cd964; +} +.color-danger { + color: #f6383a; +} +.color-warning { + color: #f60; +} +.text-center { + text-align: center; +} +.bar { + position: absolute; + right: 0; + left: 0; + z-index: 10; + height: 2.2rem; + padding-right: 0.5rem; + padding-left: 0.5rem; + background-color: #f7f7f8; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.bar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .bar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .bar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.bar-header-secondary { + top: 2.2rem; +} +.bar-footer { + bottom: 0; +} +.bar-footer-secondary { + bottom: 2.2rem; +} +.bar-footer-secondary-tab { + bottom: 2.5rem; +} +.bar-footer:before, +.bar-footer-secondary:before, +.bar-footer-secondary-tab:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .bar-footer:before, + .bar-footer-secondary:before, + .bar-footer-secondary-tab:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .bar-footer:before, + .bar-footer-secondary:before, + .bar-footer-secondary-tab:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.bar-footer:after, +.bar-footer-secondary:after, +.bar-footer-secondary-tab:after { + display: none; +} +.bar-nav { + top: 0; +} +.title { + position: absolute; + display: block; + width: 100%; + padding: 0; + margin: 0 -0.5rem; + font-size: 0.85rem; + font-weight: 500; + line-height: 2.2rem; + color: #3d4145; + text-align: center; + white-space: nowrap; +} +.title a { + color: inherit; +} +.bar-tab { + bottom: 0; + width: 100%; + height: 2.5rem; + padding: 0; + table-layout: fixed; +} +.bar-tab:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .bar-tab:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .bar-tab:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.bar-tab:after { + display: none; +} +.bar-tab .tab-item { + position: relative; + display: table-cell; + width: 1%; + height: 2.5rem; + color: #929292; + text-align: center; + vertical-align: middle; +} +.bar-tab .tab-item.active, +.bar-tab .tab-item:active { + color: #0894ec; +} +.bar-tab .tab-item .badge { + position: absolute; + top: .1rem; + left: 50%; + z-index: 100; + height: .8rem; + min-width: .8rem; + padding: 0 .2rem; + font-size: .6rem; + line-height: .8rem; + color: white; + vertical-align: top; + background: red; + border-radius: .5rem; + margin-left: .1rem; +} +.bar-tab .tab-item .icon { + top: 0.05rem; + height: 1.2rem; + font-size: 1.2rem; + line-height: 1.2rem; + padding-top: 0; + padding-bottom: 0; +} +.bar-tab .tab-item .icon ~ .tab-label { + display: block; + font-size: 0.55rem; + position: relative; + top: 0.15rem; +} +.bar .button { + position: relative; + top: 0.35rem; + z-index: 20; + margin-top: 0; + font-weight: 400; +} +.bar .button.pull-right { + margin-left: 0.5rem; +} +.bar .button.pull-left { + margin-right: 0.5rem; +} +.bar .button-link { + top: 0; + padding: 0; + font-size: 0.8rem; + line-height: 2.2rem; + height: 2.2rem; + color: #0894ec; + border: 0; +} +.bar .button-link:active, +.bar .button-link.active { + color: #0675bb; +} +.bar .button-block { + top: 0.35rem; + font-size: 0.8rem; + width: 100%; +} +.bar .button-nav.pull-left { + margin-left: -0.25rem; +} +.bar .button-nav.pull-left .icon-left-nav { + margin-right: -0.15rem; +} +.bar .button-nav.pull-right { + margin-right: -0.25rem; +} +.bar .button-nav.pull-right .icon-right-nav { + margin-left: -0.15rem; +} +.bar .icon { + position: relative; + z-index: 20; + padding: .5rem .1rem; + font-size: 1rem; + line-height: 1.2rem; +} +.bar .button .icon { + padding: 0; +} +.bar .title .icon { + padding: 0; +} +.bar .title .icon.icon-caret { + top: 0.2rem; + margin-left: -0.25rem; +} +.bar-footer .icon { + font-size: 1.2rem; + line-height: 1.2rem; +} +.bar input[type="search"] { + height: 1.45rem; + margin: 0.3rem 0; +} +.badge { + display: inline-block; + padding: 0.1rem 0.45rem 0.15rem; + font-size: 0.6rem; + line-height: 1; + color: #3d4145; + background-color: rgba(0, 0, 0, 0.15); + border-radius: 5rem; +} +.badge.badge-inverted { + padding: 0 0.25rem 0 0; + background-color: transparent; +} +/* === Lists === */ +.list-block { + margin: 1.75rem 0; + font-size: 0.85rem; + /* + .swipeout { + overflow: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + } + .swipeout.deleting { + transition-duration: 300ms; + .swipeout-content { + transform: translateX(-100%); + } + } + .swipeout.transitioning { + .swipeout-content, .swipeout-actions-right a, .swipeout-actions-left a, .swipeout-overswipe { + -webkit-transition: 300ms; + transition: 300ms; + } + } + .swipeout-content { + position: relative; + z-index: 10; + } + .swipeout-overswipe { + -webkit-transition: 200ms left; + transition: 200ms left; + } + .swipeout-actions-left, .swipeout-actions-right { + position: absolute; + top: 0; + height: 100%; + .flexbox(); + a { + padding: 0 1.5rem; + color:#fff; + background: #c7c7cc; + .flexbox(); + .align-items(center); + position: relative; + left: 0; + &:after { + content:''; + position: absolute; + top: 0; + width: 600%; + height: 100%; + background: inherit; + z-index: -1; + } + } + a.swipeout-delete { + background: @color-danger; + } + } + .swipeout-actions-right { + right: 0%; + transform: translateX(100%); + a:after { + left: 100%; + margin-left: -1px; + } + } + .swipeout-actions-left { + left: 0%; + transform: translateX(-100%); + a:after { + right: 100%; + margin-right: -1px; + } + } + */ + /* + .sortable-handler { + position: absolute; + right: 0; + top: 0; + bottom: 1px; + z-index: 10; + background-repeat: no-repeat; + background-size: 0.9rem 0.6rem; + background-image: url("@{imgBaseUrl}/i-sortable-handler.png"); + background-position: center; + width: 1.75rem; + opacity: 0; + visibility: hidden; + right: 0; + } + &.sortable { + .item-inner { + transition-duration: 300ms; + } + } + &.sortable-opened { + .sortable-handler { + visibility: visible; + opacity: 1; + } + .item-inner, .item-link .item-inner { + padding-right: 1.5rem; + } + .item-link .item-inner, .item-link .item-title-row { + background-image: none; + } + } + &.sortable-sorting { + li { + transition-duration: 300ms; + } + } + li.sorting { + z-index: 50; + background: rgba(255,255,255,0.8); + box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,0.6); + transition-duration: 0ms; + .item-inner { + .hairline-remove(bottom); + } + } + */ +} +.list-block ul { + background: #fff; + list-style: none; + padding: 0; + margin: 0; + position: relative; +} +.list-block ul:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block ul:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block ul:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.list-block ul:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block ul:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block ul:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.list-block ul ul { + padding-left: 2.25rem; +} +.list-block ul ul:before { + display: none; +} +.list-block ul ul:after { + display: none; +} +.list-block .align-top, +.list-block .align-top .item-content, +.list-block .align-top .item-inner { + -webkit-box-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.list-block.inset { + margin-left: 0.75rem; + margin-right: 0.75rem; + border-radius: 0.35rem; +} +.list-block.inset .content-block-title { + margin-left: 0; + margin-right: 0; +} +.list-block.inset ul { + border-radius: 0.35rem; +} +.list-block.inset ul:before { + display: none; +} +.list-block.inset ul:after { + display: none; +} +.list-block.inset li:first-child > a { + border-radius: 0.35rem 0.35rem 0 0; +} +.list-block.inset li:last-child > a { + border-radius: 0 0 0.35rem 0.35rem; +} +.list-block.inset li:first-child:last-child > a { + border-radius: 0.35rem; +} +@media all and (min-width: 768px) { + .list-block.tablet-inset { + margin-left: 0.75rem; + margin-right: 0.75rem; + border-radius: 0.35rem; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 0.35rem; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 0.35rem 0.35rem 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 0.35rem 0.35rem; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 0.35rem; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 0.35rem; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 0.35rem 0.35rem 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 0.35rem 0.35rem; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 0.35rem; + } +} +.list-block li { + box-sizing: border-box; + position: relative; +} +.list-block .item-media { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + -webkit-flex-shrink: 0; + flex-shrink: 0; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + box-sizing: border-box; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + padding-top: 0.35rem; + padding-bottom: 0.4rem; +} +.list-block .item-media i + i { + margin-left: 0.25rem; +} +.list-block .item-media i + img { + margin-left: 0.25rem; +} +.list-block .item-media + .item-inner { + margin-left: 0.75rem; +} +.list-block .item-inner { + padding-right: 0.75rem; + position: relative; + width: 100%; + padding-top: 0.4rem; + padding-bottom: 0.35rem; + min-height: 2.2rem; + overflow: hidden; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.list-block .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.list-block .item-title { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} +.list-block .item-title.label { + width: 35%; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin: 4px 0; +} +.list-block .item-input { + width: 100%; + margin-top: -0.4rem; + margin-bottom: -0.35rem; + -webkit-box-flex: 1; + -ms-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; +} +.list-block .item-after { + white-space: nowrap; + color: #5f646e; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + -webkit-flex-shrink: 0; + flex-shrink: 0; + margin-left: 0.25rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + max-height: 1.4rem; +} +.list-block .smart-select .item-after { + max-width: 70%; + overflow: hidden; + text-overflow: ellipsis; + position: relative; +} +.list-block .item-link { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + display: block; + color: inherit; +} +.list-block .item-link .item-inner { + padding-right: 1.5rem; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUM0QzFDNzMyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUM0QzFDNzQyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1QzRDMUM3MTJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1QzRDMUM3MjJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjs2Bb4AAAItSURBVHjazJhbK0RRGIb3DIOU/AG5kUTOgxmHceFGKf6BO+Vf+E8KKYcYg3FuMpNIDhFJXJAcp/GtvKumrzVs+zBrvfU2u689q6d3rb33+lYgl8tZvymZ3JOX7eQp8gT50fJA0Wj4z3tKbY5VR14hV5ObyWLkZ6sICtq4p4V8CjihevIWucoUQJFUmtUayTvkShMAL5DiGqs3IMlK3YBSgwrIZkBWmAAoIRMKyG2/IIMO/hMjbygepCS53ARAoQHyOqu1YbrLTADMAXJbASmSDOkGlOpTQHaQN72CdAuYBeQuq4cBWaIbUEJGC0Am3UIGPVoqMsk9Vu/CwxTQDSj0iSQPWD2C6Q7oBhT6AmRKAZkwAVDoowBkn+LdqQVQ6A2QhwrIuAmAEjKi2KrF/jPdfgIKveI7Pcfq/eSMCYBSD4pakymA0+RxVrsn15oAOEMeY7Vbcif5ys4ApT7CzZJHWO2G3I1fSyfgPHmY1a7x6bvT/ZpZUMBdOoHzI8El8pCiK+wq8CQXNcFlBdw51tyD00G9SnAVHV++zgDn6hzHiwTjCrgTTKvrQya3Ca5jA5CvY3IP+UlnTxJEb8zhjpDck1cL20mCAcBFWD2D2ovOvjiERojDpTGtnsL9N8EQegt+LJrC5vRN59lMORp0DrePNH2BswvYivXVzuoHSO7dz+2QHcAa6+eMOl87WHOffm8m7QCK7foog+tFi2mZACg3npPkRUxrtkitgvUtwAA5A3LWdzPizwAAAABJRU5ErkJggg==); + background-size: 0.7rem; + background-repeat: no-repeat; + background-position: 97% center; + background-position: -webkit-calc(100% - .5rem) center; + background-position: calc(100% - .5rem) center; +} +html:not(.watch-active-state) .list-block .item-link:active, +.list-block .item-link.active-state { + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + background-color: #d9d9d9; +} +html:not(.watch-active-state) .list-block .item-link:active .item-inner:after, +.list-block .item-link.active-state .item-inner:after { + background-color: transparent; +} +.list-block .item-link.list-button { + padding: 0 0.75rem; + text-align: center; + color: #0894ec; + display: block; + line-height: 2.15rem; +} +.list-block .item-link.list-button:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block .item-link.list-button:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block .item-link.list-button:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.list-block .item-content { + box-sizing: border-box; + padding-left: 0.75rem; + min-height: 2.2rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.list-block .list-block-label { + margin: 0.5rem 0 1.75rem; + padding: 0 0.75rem; + font-size: 0.7rem; + color: #5f646e; +} +.list-block .item-subtitle { + font-size: 0.75rem; + position: relative; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + text-overflow: ellipsis; +} +.list-block .item-text { + font-size: 0.75rem; + color: #5f646e; + line-height: 1.05rem; + position: relative; + overflow: hidden; + height: 2.1rem; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; +} +.list-block.media-list .item-title { + font-weight: 500; +} +.list-block.media-list .item-inner { + display: block; + padding-top: 0.5rem; + padding-bottom: 0.45rem; + -webkit-align-self: stretch; + align-self: stretch; +} +.list-block.media-list .item-media { + padding-top: 0.45rem; + padding-bottom: 0.5rem; +} +.list-block.media-list .item-media img { + display: block; +} +.list-block.media-list .item-title-row { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.list-block .list-group ul:after, +.list-block .list-group ul:before { + z-index: 11; +} +.list-block .list-group + .list-group ul:before { + display: none; +} +.list-block .item-divider, +.list-block .list-group-title { + background: #F7F7F7; + margin-top: -1px; + padding: 0.2rem 0.75rem; + white-space: nowrap; + position: relative; + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + color: #e7e7e7; +} +.list-block .item-divider:before, +.list-block .list-group-title:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block .item-divider:before, + .list-block .list-group-title:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block .item-divider:before, + .list-block .list-group-title:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.list-block .list-group-title { + position: relative; + position: -webkit-sticky; + position: -moz-sticky; + position: sticky; + top: 0; + z-index: 20; + margin-top: 0; +} +.list-block .list-group-title:before { + display: none; +} +.list-block li:last-child .list-button:after { + display: none; +} +.list-block li:last-child .item-inner:after, +.list-block li:last-child li:last-child .item-inner:after { + display: none; +} +.list-block li li:last-child .item-inner:after, +.list-block li:last-child li .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e7e7e7; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .list-block li li:last-child .item-inner:after, + .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .list-block li li:last-child .item-inner:after, + .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +/* === Forms === */ +.list-block input[type="text"], +.list-block input[type="password"], +.list-block input[type="search"], +.list-block input[type="email"], +.list-block input[type="tel"], +.list-block input[type="url"], +.list-block input[type="date"], +.list-block input[type="datetime-local"], +.list-block input[type="time"], +.list-block input[type="number"], +.list-block select, +.list-block textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + box-sizing: border-box; + border: none; + background: none; + border-radius: 0 0 0 0; + box-shadow: none; + display: block; + padding: 0 0 0 0.25rem; + margin: 0; + width: 100%; + height: 2.15rem; + color: #3d4145; + font-size: 0.85rem; + font-family: inherit; +} +.list-block input[type="date"], +.list-block input[type="datetime-local"] { + line-height: 2.2rem; +} +.list-block select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; +} +.list-block .label { + vertical-align: top; +} +.list-block textarea { + height: 5rem; + resize: none; + line-height: 1.4; + padding-top: 0.4rem; + padding-bottom: 0.35rem; +} +.label-switch { + display: inline-block; + vertical-align: middle; + width: 2.6rem; + border-radius: 0.8rem; + box-sizing: border-box; + height: 1.6rem; + position: relative; + cursor: pointer; + -webkit-align-self: center; + align-self: center; +} +.label-switch .checkbox { + width: 2.6rem; + border-radius: 0.8rem; + box-sizing: border-box; + height: 1.6rem; + background: #e5e5e5; + z-index: 0; + margin: 0; + padding: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + cursor: pointer; + position: relative; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch .checkbox:before { + content: ' '; + position: absolute; + left: 0.1rem; + top: 0.1rem; + width: 2.4rem; + border-radius: 0.8rem; + box-sizing: border-box; + height: 1.4rem; + background: #fff; + z-index: 1; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: scale(1); + transform: scale(1); +} +.label-switch .checkbox:after { + content: ' '; + height: 1.4rem; + width: 1.4rem; + border-radius: 1.4rem; + background: #fff; + position: absolute; + z-index: 2; + top: 0.1rem; + left: 0.1rem; + box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.4); + -webkit-transform: translateX(0px); + transform: translateX(0px); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch input[type="checkbox"] { + display: none; +} +.label-switch input[type="checkbox"]:checked + .checkbox { + background: #4cd964; +} +.label-switch input[type="checkbox"]:checked + .checkbox:before { + -webkit-transform: scale(0); + transform: scale(0); +} +.label-switch input[type="checkbox"]:checked + .checkbox:after { + -webkit-transform: translateX(1.1rem); + transform: translateX(1.1rem); +} +html.android .label-switch input[type="checkbox"] + .checkbox { + -webkit-transition-duration: 0; + transition-duration: 0; +} +html.android .label-switch input[type="checkbox"] + .checkbox:after, +html.android .label-switch input[type="checkbox"] + .checkbox:before { + -webkit-transition-duration: 0; + transition-duration: 0; +} +.range-slider { + width: 100%; + position: relative; + overflow: hidden; + padding-left: 0.15rem; + padding-right: 0.15rem; + margin-left: -1px; + -webkit-align-self: center; + align-self: center; +} +.range-slider input[type="range"] { + position: relative; + height: 1.4rem; + width: 100%; + margin: 0.2rem 0 0.25rem 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7)); + background: -webkit-linear-gradient(left, #b7b8b7 0, #b7b8b7 100%); + background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%); + background-position: center; + background-size: 100% 0.1rem; + background-repeat: no-repeat; + outline: 0; +} +.range-slider input[type="range"]:after { + height: 0.1rem; + background: #fff; + content: ' '; + width: 0.25rem; + top: 50%; + margin-top: -1px; + left: -0.25rem; + z-index: 1; + position: absolute; +} +.range-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + height: 1.4rem; + width: 1.4rem; + position: relative; + background: none; +} +.range-slider input[type="range"]::-webkit-slider-thumb:after { + height: 1.4rem; + width: 1.4rem; + border-radius: 1.4rem; + background: #fff; + z-index: 10; + box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.4); + position: absolute; + left: 0; + top: 0; + content: ' '; +} +.range-slider input[type="range"]::-webkit-slider-thumb:before { + position: absolute; + top: 50%; + right: 100%; + width: 100rem; + height: 0.1rem; + margin-top: -1px; + z-index: 1; + background: #0894ec; + content: ' '; +} +label.label-checkbox { + cursor: pointer; +} +label.label-checkbox i.icon-form-checkbox { + width: 1.1rem; + height: 1.1rem; + position: relative; + border-radius: 1.1rem; + border: 1px solid #c7c7cc; + box-sizing: border-box; +} +label.label-checkbox i.icon-form-checkbox:after { + content: ' '; + position: absolute; + left: 50%; + margin-left: -0.3rem; + top: 50%; + margin-top: -0.2rem; + width: 0.6rem; + height: 0.45rem; +} +label.label-checkbox input[type="checkbox"], +label.label-checkbox input[type="radio"] { + display: none; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox { + border: none; + background-color: #0894ec; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox:after, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox:after { + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); + background-size: 0.6rem 0.45rem; +} +label.label-checkbox { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +html:not(.watch-active-state) label.label-checkbox:active, +label.label-checkbox.active-state { + -webkit-transition: 0ms; + transition: 0ms; + background-color: #d9d9d9; +} +html:not(.watch-active-state) label.label-checkbox:active .item-inner:after, +label.label-checkbox.active-state .item-inner:after { + background-color: transparent; +} +.smart-select select { + display: none; +} +/* === Search Bar === */ +.searchbar { + padding: 8px 0; + overflow: hidden; + height: 2.2rem; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.searchbar .searchbar-cancel { + margin-right: -3rem; + width: 2.2rem; + float: right; + height: 1.4rem; + line-height: 1.4rem; + text-align: center; + -webkit-transition: all .3s; + transition: all .3s; + opacity: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.searchbar .search-input { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + margin-right: 0; + -webkit-transition: all .3s; + transition: all .3s; +} +.searchbar .search-input input { + margin: 0; + height: 1.4rem; +} +.searchbar.searchbar-active .searchbar-cancel { + margin-right: 0; + opacity: 1; +} +.searchbar.searchbar-active .searchbar-cancel + .search-input { + margin-right: 2.5rem; +} +.search-input { + position: relative; +} +.search-input input { + box-sizing: border-box; + width: 100%; + height: 1.4rem; + display: block; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.25rem; + font-family: inherit; + color: #3d4145; + font-size: 0.7rem; + font-weight: normal; + padding: 0 0.5rem; + background-color: #fff; + border: 1px solid #b4b4b4; +} +.search-input input::-webkit-input-placeholder { + color: #ccc; + opacity: 1; +} +.search-input .icon { + position: absolute; + font-size: 0.9rem; + color: #b4b4b4; + top: 50%; + left: 0.3rem; + -webkit-transform: translate3D(0, -50%, 0); + transform: translate3D(0, -50%, 0); +} +.search-input label + input { + padding-left: 1.4rem; +} +.bar .searchbar { + margin: 0 -0.5rem; + padding: 0.4rem 0.5rem; + background: rgba(0, 0, 0, 0.1); +} +.bar .searchbar .search-input input { + border: 0; +} +.bar .searchbar .searchbar-cancel { + color: #5f646e; +} +.button { + border: 1px solid #0894ec; + color: #0894ec; + text-decoration: none; + text-align: center; + display: block; + border-radius: 0.25rem; + line-height: 1.25rem; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: none; + padding: 0 0.5rem; + margin: 0; + height: 1.35rem; + white-space: nowrap; + position: relative; + text-overflow: ellipsis; + font-size: 0.7rem; + font-family: inherit; + cursor: pointer; +} +input[type="submit"].button, +input[type="button"].button { + width: 100%; +} +.button:active { + color: #0a8ddf; + border-color: #0a8ddf; +} +.button.button-round { + border-radius: 1.25rem; +} +.button.active, +.button.active:active { + color: #0a8ddf; + border-color: #0a8ddf; +} +.button.button-big { + font-size: 0.85rem; + height: 2.4rem; + line-height: 2.3rem; +} +.button.button-fill { + color: #fff; + background: #0894ec; + border: none; + line-height: 1.35rem; +} +.button.button-fill.active, +.button.button-fill:active { + background: #0a8ddf; +} +.button.button-fill.button-big { + line-height: 2.4rem; +} +.button .button-link { + padding-top: 0.3rem; + padding-bottom: 0.3rem; + color: #0894ec; + background-color: transparent; + border: 0; +} +.button i.icon:first-child { + margin-right: 0.5rem; +} +.button i.icon:last-child { + margin-left: 0.5rem; +} +.button i.icon:first-child:last-child { + margin-left: 0; + margin-right: 0; +} +.button-light { + border-color: #ccc; + color: #ccc; + color: #5f646e; +} +.button-light:active { + border-color: #0a8ddf; + color: #0a8ddf; +} +.button-light.button-fill { + color: white; + background-color: #ccc; +} +.button-light.button-fill:active { + background-color: #0a8ddf; +} +.button-dark { + border-color: #6e727b; + color: #6e727b; + color: #5f646e; +} +.button-dark:active { + border-color: #0a8ddf; + color: #0a8ddf; +} +.button-dark.button-fill { + color: white; + background-color: #6e727b; +} +.button-dark.button-fill:active { + background-color: #0a8ddf; +} +.button-success { + border-color: #4cd964; + color: #4cd964; +} +.button-success:active { + border-color: #2ac845; + color: #2ac845; +} +.button-success.button-fill { + color: white; + background-color: #4cd964; +} +.button-success.button-fill:active { + background-color: #2ac845; +} +.button-danger { + border-color: #f6383a; + color: #f6383a; +} +.button-danger:active { + border-color: #f00b0d; + color: #f00b0d; +} +.button-danger.button-fill { + color: white; + background-color: #f6383a; +} +.button-danger.button-fill:active { + background-color: #f00b0d; +} +.button-warning { + border-color: #f60; + color: #f60; +} +.button-warning:active { + border-color: #cc5200; + color: #cc5200; +} +.button-warning.button-fill { + color: white; + background-color: #f60; +} +.button-warning.button-fill:active { + background-color: #cc5200; +} +.button.disabled, +.button.button-primary.disabled, +.button.button-success.disabled, +.button.button-danger.disabled, +.button.button-warning.disabled { + border-color: #c8c9cb; + color: #c8c9cb; + cursor: not-allowed; +} +.button.disabled:active, +.button.button-primary.disabled:active, +.button.button-success.disabled:active, +.button.button-danger.disabled:active, +.button.button-warning.disabled:active { + border-color: #c8c9cb; + color: #c8c9cb; +} +.button.disabled.button-fill, +.button.button-primary.disabled.button-fill, +.button.button-success.disabled.button-fill, +.button.button-danger.disabled.button-fill, +.button.button-warning.disabled.button-fill { + color: white; + background-color: #c8c9cb; +} +.button.disabled.button-fill:active, +.button.button-primary.disabled.button-fill:active, +.button.button-success.disabled.button-fill:active, +.button.button-danger.disabled.button-fill:active, +.button.button-warning.disabled.button-fill:active { + background-color: #c8c9cb; +} +.buttons-row, +.buttons-tab { + -webkit-align-self: center; + align-self: center; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; +} +.buttons-row .button { + border-radius: 0 0 0 0; + margin-left: -1px; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1; + border-color: #0894ec; + color: #0894ec; +} +.buttons-row .button.active { + background-color: #0894ec; + color: white; + z-index: 90; +} +.buttons-row .button:first-child { + border-radius: 0.25rem 0 0 0.25rem; + margin-left: 0; + border-left-width: 1px; + border-left-style: solid; +} +.buttons-row .button:last-child { + border-radius: 0 0.25rem 0.25rem 0; +} +.buttons-row .button.button-round:first-child { + border-radius: 1.35rem 0 0 1.35rem; +} +.buttons-row .button.button-round:last-child { + border-radius: 0 1.35rem 1.35rem 0; +} +.buttons-tab { + background: white; + position: relative; +} +.buttons-tab:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #d0d0d0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .buttons-tab:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .buttons-tab:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.buttons-tab .button { + color: #5f646e; + font-size: 0.8rem; + width: 100%; + height: 2rem; + line-height: 2rem; + -webkit-box-flex: 1; + -ms-flex: 1; + border: 0; + border-bottom: 2px solid transparent; + border-radius: 0; +} +.buttons-tab .button.active { + color: #0894ec; + border-color: #0894ec; + z-index: 100; +} +.buttons-fixed { + position: fixed; + z-index: 99; + width: 100%; +} +/* === Tabs === */ +.tabs .tab { + display: none; +} +.tabs .tab.active { + display: block; +} +.tabs-animated-wrap { + position: relative; + width: 100%; + overflow: hidden; + height: 100%; +} +.tabs-animated-wrap > .tabs { + display: -webkit-box; + display: -webkit-flex; + display: flex; + height: 100%; + -webkit-transition: 300ms; + transition: 300ms; +} +.tabs-animated-wrap > .tabs > .tab { + width: 100%; + display: block; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + -webkit-flex-shrink: 0; + flex-shrink: 0; +} +/* === Pages === */ +.page, +.page-group { + box-sizing: border-box; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #efeff4; + display: none; + overflow: hidden; +} +.page.page-current, +.page-group.page-current, +.page.page-visible, +.page-group.page-visible, +.page.page-from-center-to-left, +.page-group.page-from-center-to-left, +.page.page-from-center-to-right, +.page-group.page-from-center-to-right, +.page.page-from-right-to-center, +.page-group.page-from-right-to-center, +.page.page-from-left-to-center, +.page-group.page-from-left-to-center { + display: block; +} +.page.page-current, +.page-group.page-current { + overflow: hidden; +} +.page-group { + display: block; +} +.page-transitioning, +.page-transitioning .swipeback-page-shadow { + -webkit-transition: 400ms; + transition: 400ms; +} +.page-from-right-to-center { + -webkit-animation: pageFromRightToCenter 400ms forwards; + animation: pageFromRightToCenter 400ms forwards; + z-index: 2002; +} +.page-from-center-to-right { + -webkit-animation: pageFromCenterToRight 400ms forwards; + animation: pageFromCenterToRight 400ms forwards; + z-index: 2002; +} +@-webkit-keyframes pageFromRightToCenter { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: .9; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} +@keyframes pageFromRightToCenter { + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: .9; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } +} +@-webkit-keyframes pageFromCenterToRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: .9; + } +} +@keyframes pageFromCenterToRight { + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + } + to { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + opacity: .9; + } +} +.page-from-center-to-left { + -webkit-animation: pageFromCenterToLeft 400ms forwards; + animation: pageFromCenterToLeft 400ms forwards; +} +.page-from-left-to-center { + -webkit-animation: pageFromLeftToCenter 400ms forwards; + animation: pageFromLeftToCenter 400ms forwards; +} +@-webkit-keyframes pageFromCenterToLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0.5; + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); + } +} +@keyframes pageFromCenterToLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + opacity: 0.5; + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); + } +} +@-webkit-keyframes pageFromLeftToCenter { + from { + opacity: .5; + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes pageFromLeftToCenter { + from { + opacity: .5; + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +.content-inner { + box-sizing: border-box; + border-top: 1px solid transparent; + margin-top: -1px; + padding-bottom: 0.5rem; +} +.javascript-scroll { + overflow: hidden; +} +/* === Pull To Refresh === */ +.pull-to-refresh-layer { + position: relative; + left: 0; + top: 0; + width: 100%; + height: 2.2rem; +} +.pull-to-refresh-layer .preloader { + position: absolute; + left: 50%; + top: 50%; + margin-left: -0.5rem; + margin-top: -0.5rem; + visibility: hidden; +} +.pull-to-refresh-layer .pull-to-refresh-arrow { + width: 0.65rem; + height: 1rem; + position: absolute; + left: 50%; + top: 50%; + margin-left: -0.15rem; + margin-top: -0.5rem; + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E"); + background-size: 0.65rem 1rem; + z-index: 10; + -webkit-transform: rotate(0deg) translate3d(0, 0, 0); + transform: rotate(0deg) translate3d(0, 0, 0); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.pull-to-refresh-content { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.pull-to-refresh-content.transitioning, +.pull-to-refresh-content.refreshing { + -webkit-transition: -webkit-transform 400ms; + transition: transform 400ms; +} +.pull-to-refresh-content:not(.refreshing) .pull-to-refresh-layer .preloader { + -webkit-animation: none; + animation: none; +} +.pull-to-refresh-content.refreshing .pull-to-refresh-arrow { + visibility: hidden; + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.pull-to-refresh-content.refreshing .preloader { + visibility: visible; +} +.pull-to-refresh-content.pull-up .pull-to-refresh-arrow { + -webkit-transform: rotate(180deg) translate3d(0, 0, 0); + transform: rotate(180deg) translate3d(0, 0, 0); +} +.pull-to-refresh-content { + top: -2.2rem; +} +.pull-to-refresh-content.refreshing { + -webkit-transform: translate3d(0, 2.2rem, 0); + transform: translate3d(0, 2.2rem, 0); +} +.bar-nav ~ .pull-to-refresh-content, +.bar-footer ~ .pull-to-refresh-content, +.bar-tab ~ .pull-to-refresh-content { + top: 0; +} +.bar-nav ~ .pull-to-refresh-content.refreshing, +.bar-footer ~ .pull-to-refresh-content.refreshing, +.bar-tab ~ .pull-to-refresh-content.refreshing { + -webkit-transform: translate3d(0, 2.2rem, 0); + transform: translate3d(0, 2.2rem, 0); +} +.bar-header-secondary ~ .pull-to-refresh-content, +.bar-footer-secondary ~ .pull-to-refresh-content { + top: 2.2rem; +} +.infinite-scroll-preloader { + margin: 0.5rem; + text-align: center; +} +.infinite-scroll-preloader .preloader { + width: 1.5rem; + height: 1.5rem; +} +.infinite-scroll-top .infinite-scroll-preloader { + position: absolute; + width: 100%; + top: 0; + margin: 0; +} +/* === Modals === */ +.modal-overlay, +.preloader-indicator-overlay, +.popup-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 10600; + visibility: hidden; + opacity: 0; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.modal-overlay.modal-overlay-visible, +.preloader-indicator-overlay.modal-overlay-visible, +.popup-overlay.modal-overlay-visible { + visibility: visible; + opacity: 1; +} +.popup-overlay { + z-index: 10200; +} +.modal { + width: 13.5rem; + position: absolute; + z-index: 11000; + left: 50%; + margin-left: -6.75rem; + margin-top: 0; + top: 50%; + text-align: center; + border-radius: 0.35rem; + opacity: 0; + -webkit-transform: translate3d(0, 0, 0) scale(1.185); + transform: translate3d(0, 0, 0) scale(1.185); + -webkit-transition-property: -webkit-transform, opacity; + transition-property: transform, opacity; + color: #3d4145; + display: none; +} +.modal.modal-in { + opacity: 1; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); +} +.modal.modal-out { + opacity: 0; + z-index: 10999; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(0.815); + transform: translate3d(0, 0, 0) scale(0.815); +} +.modal-inner { + padding: 0.75rem; + border-radius: 0.35rem 0.35rem 0 0; + position: relative; + background: #e8e8e8; +} +.modal-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #b5b5b5; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .modal-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .modal-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.modal-title { + font-weight: 500; + font-size: 0.9rem; + text-align: center; +} +.modal-title + .modal-text { + margin-top: 0.25rem; +} +.modal-buttons { + height: 2.2rem; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.modal-buttons.modal-buttons-vertical { + display: block; + height: auto; +} +.modal-button { + width: 100%; + padding: 0 0.25rem; + height: 2.2rem; + font-size: 0.85rem; + line-height: 2.2rem; + text-align: center; + color: #0894ec; + background: #e8e8e8; + display: block; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; +} +.modal-button:after { + content: ''; + position: absolute; + right: 0; + top: 0; + left: auto; + bottom: auto; + width: 1px; + height: 100%; + background-color: #b5b5b5; + display: block; + z-index: 15; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .modal-button:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .modal-button:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.modal-button:first-child { + border-radius: 0 0 0 0.35rem; +} +.modal-button:last-child { + border-radius: 0 0 0.35rem 0; +} +.modal-button:last-child:after { + display: none; +} +.modal-button:first-child:last-child { + border-radius: 0 0 0.35rem 0.35rem; +} +.modal-button.modal-button-bold { + font-weight: 500; +} +html:not(.watch-active-state) .modal-button:active, +.modal-button.active-state { + background: #d4d4d4; +} +.modal-buttons-vertical .modal-button { + border-radius: 0; +} +.modal-buttons-vertical .modal-button:after { + display: none; +} +.modal-buttons-vertical .modal-button:before { + display: none; +} +.modal-buttons-vertical .modal-button:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #b5b5b5; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .modal-buttons-vertical .modal-button:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .modal-buttons-vertical .modal-button:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.modal-buttons-vertical .modal-button:last-child { + border-radius: 0 0 0.35rem 0.35rem; +} +.modal-buttons-vertical .modal-button:last-child:after { + display: none; +} +.modal-no-buttons .modal-inner { + border-radius: 0.35rem; +} +.modal-no-buttons .modal-inner:after { + display: none; +} +.modal-no-buttons .modal-buttons { + display: none; +} +.actions-modal { + position: absolute; + left: 0; + bottom: 0; + z-index: 11000; + width: 100%; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.actions-modal.modal-in { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.actions-modal.modal-out { + z-index: 10999; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.actions-modal-group { + margin: 0.4rem; +} +.actions-modal-button, +.actions-modal-label { + width: 100%; + text-align: center; + font-weight: normal; + margin: 0; + background: rgba(243, 243, 243, 0.95); + box-sizing: border-box; + display: block; + position: relative; +} +.actions-modal-button:after, +.actions-modal-label:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #d2d2d6; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .actions-modal-button:after, + .actions-modal-label:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .actions-modal-button:after, + .actions-modal-label:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.actions-modal-button a, +.actions-modal-label a { + text-decoration: none; + color: inherit; +} +.actions-modal-button b, +.actions-modal-label b { + font-weight: 500; +} +.actions-modal-button.actions-modal-button-bold, +.actions-modal-label.actions-modal-button-bold { + font-weight: 500; +} +.actions-modal-button.actions-modal-button-danger, +.actions-modal-label.actions-modal-button-danger { + color: #f6383a; +} +.actions-modal-button.color-danger, +.actions-modal-label.color-danger { + color: #f6383a; +} +.actions-modal-button.bg-danger, +.actions-modal-label.bg-danger { + background: #f6383a; + color: white; +} +.actions-modal-button.bg-danger:active, +.actions-modal-label.bg-danger:active { + background: #f00b0d; +} +.actions-modal-button:first-child, +.actions-modal-label:first-child { + border-radius: 0.2rem 0.2rem 0 0; +} +.actions-modal-button:last-child, +.actions-modal-label:last-child { + border-radius: 0 0 0.2rem 0.2rem; +} +.actions-modal-button:last-child:after, +.actions-modal-label:last-child:after { + display: none; +} +.actions-modal-button:first-child:last-child, +.actions-modal-label:first-child:last-child { + border-radius: 0.2rem; +} +.actions-modal-button.disabled, +.actions-modal-label.disabled { + opacity: 0.95; + color: #8e8e93; +} +.actions-modal-button { + cursor: pointer; + line-height: 2.15rem; + font-size: 1rem; + color: #0894ec; +} +.actions-modal-button:active, +.actions-modal-button.active-state { + background: #dcdcdc; +} +.actions-modal-label { + font-size: 0.7rem; + line-height: 1.3; + min-height: 2.2rem; + padding: 0.4rem 0.5rem; + color: #5f646e; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +input.modal-text-input { + box-sizing: border-box; + height: 1.5rem; + background: #fff; + margin: 0; + margin-top: 0.75rem; + padding: 0 0.25rem; + border: 1px solid #a0a0a0; + border-radius: 0.25rem; + width: 100%; + font-size: 0.7rem; + font-family: inherit; + display: block; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +input.modal-text-input + input.modal-text-input { + margin-top: 0.25rem; +} +input.modal-text-input.modal-text-input-double { + border-radius: 0.25rem 0.25rem 0 0; +} +input.modal-text-input.modal-text-input-double + input.modal-text-input { + margin-top: 0; + border-top: 0; + border-radius: 0 0 0.25rem 0.25rem; +} +.popup, +.login-screen { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10400; + background: #fff; + box-sizing: border-box; + display: none; + overflow: auto; + -webkit-overflow-scrolling: touch; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.popup.modal-in, +.login-screen.modal-in, +.popup.modal-out, +.login-screen.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.popup.modal-in, +.login-screen.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popup.modal-out, +.login-screen.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.login-screen.modal-in, +.login-screen.modal-out { + display: block; +} +html.with-statusbar-overlay .popup { + height: -webkit-calc(100% - 1rem); + height: calc(100% - 1rem); + top: 1rem; +} +html.with-statusbar-overlay .popup-overlay { + z-index: 9800; +} +@media all and (max-width: 629px), (max-height: 629px) { + html.with-statusbar-overlay .popup { + height: -webkit-calc(100% - 1rem); + height: calc(100% - 1rem); + top: 1rem; + } + html.with-statusbar-overlay .popup-overlay { + z-index: 9800; + } +} +html.with-statusbar-overlay .login-screen, +html.with-statusbar-overlay .popup.tablet-fullscreen { + height: -webkit-calc(100% - 1rem); + height: calc(100% - 1rem); + top: 1rem; +} +.modal .preloader { + width: 1.7rem; + height: 1.7rem; +} +.preloader-indicator-overlay { + visibility: visible; + opacity: 0; + background: none; +} +.preloader-indicator-modal { + position: absolute; + left: 50%; + top: 50%; + padding: 0.4rem; + margin-left: -1.25rem; + margin-top: -1.25rem; + background: rgba(0, 0, 0, 0.8); + z-index: 11000; + border-radius: 0.25rem; +} +.preloader-indicator-modal .preloader { + display: block; + width: 1.7rem; + height: 1.7rem; +} +.picker-modal { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + height: 13rem; + z-index: 11500; + display: none; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + background: #cfd5da; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal.modal-in, +.picker-modal.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.picker-modal.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal .picker-modal-inner { + height: 100%; + position: relative; +} +.picker-modal .toolbar { + position: relative; + width: 100%; +} +.picker-modal .toolbar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #999; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-modal .toolbar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-modal .toolbar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-modal .toolbar + .picker-modal-inner { + height: -webkit-calc(100% - 2.2rem); + height: calc(100% - 2.2rem); +} +.picker-modal.picker-modal-inline { + display: block; + position: relative; + background: none; + z-index: inherit; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.picker-modal-inline .toolbar:before { + display: none; +} +.picker-modal.picker-modal-inline .toolbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #999; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-modal.picker-modal-inline .toolbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-modal.picker-modal-inline .toolbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.toast { + background: rgba(0, 0, 0, 0.8); + border-radius: 1rem; + color: white; + padding: 0 .8rem; + height: 2rem; + line-height: 2rem; + font-size: 0.8rem; + width: auto; +} +/* === Preloader === */ +.preloader { + display: inline-block; + width: 1rem; + height: 1rem; + -webkit-transform-origin: 50%; + transform-origin: 50%; + -webkit-animation: preloader-spin 1s steps(12, end) infinite; + animation: preloader-spin 1s steps(12, end) infinite; +} +.preloader:after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: 50%; + background-size: 100%; + background-repeat: no-repeat; +} +.preloader-white:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +@-webkit-keyframes preloader-spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes preloader-spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/* === Cards === */ +.cards-list ul, +.card .list-block ul { + background: none; +} +.cards-list > ul:before, +.card .list-block > ul:before { + display: none; +} +.cards-list > ul:after, +.card .list-block > ul:after { + display: none; +} +.card { + background: #fff; + box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.3); + margin: 0.5rem; + position: relative; + border-radius: 0.1rem; + font-size: 0.7rem; +} +.card .list-block, +.card .content-block { + margin: 0; +} +.row:not(.no-gutter) .col > .card { + margin-left: 0; + margin-right: 0; +} +.card-content { + position: relative; +} +.card-content-inner { + padding: 0.75rem; + position: relative; +} +.card-content-inner > p:first-child { + margin-top: 0; +} +.card-content-inner > p:last-child { + margin-bottom: 0; +} +.card-content-inner > .list-block, +.card-content-inner > .content-block { + margin: -0.75rem; +} +.card-header, +.card-footer { + min-height: 2.2rem; + position: relative; + padding: 0.5rem 0.75rem; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.card-header[valign="top"], +.card-footer[valign="top"] { + -webkit-box-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.card-header[valign="bottom"], +.card-footer[valign="bottom"] { + -webkit-box-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; +} +.card-header a.link, +.card-footer a.link { + line-height: 2.2rem; + height: 2.2rem; + text-decoration: none; + position: relative; + margin-top: -0.5rem; + margin-bottom: -0.5rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +html:not(.watch-active-state) .card-header a.link:active, +html:not(.watch-active-state) .card-footer a.link:active, +.card-header a.link.active-state, +.card-footer a.link.active-state { + opacity: 0.3; + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.card-header a.link i + span, +.card-footer a.link i + span, +.card-header a.link i + i, +.card-footer a.link i + i, +.card-header a.link span + i, +.card-footer a.link span + i, +.card-header a.link span + span, +.card-footer a.link span + span { + margin-left: 0.35rem; +} +.card-header a.link i.icon, +.card-footer a.link i.icon { + display: block; +} +.card-header a.icon-only, +.card-footer a.icon-only { + min-width: 2.2rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + margin: 0; +} +.card-header { + border-radius: 0.1rem 0.1rem 0 0; + font-size: 0.85rem; +} +.card-header:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e1e1e1; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .card-header:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .card-header:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.card-header .card-cover { + width: 100%; + display: block; +} +.card-header.no-border:after { + display: none; +} +.card-header.no-padding { + padding: 0; +} +.card-footer { + border-radius: 0 0 0.1rem 0.1rem; + color: #5f646e; +} +.card-footer:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e1e1e1; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .card-footer:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .card-footer:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.card-footer.no-border:before { + display: none; +} +.facebook-card .card-header { + display: block; + padding: 0.5rem; +} +.facebook-card .facebook-avatar { + float: left; +} +.facebook-card .facebook-name { + margin-left: 2.2rem; + font-size: 0.7rem; + font-weight: 500; +} +.facebook-card .facebook-date { + margin-left: 2.2rem; + font-size: 0.65rem; + color: #5f646e; +} +.facebook-card .card-footer { + background: #fafafa; +} +.facebook-card .card-footer a { + color: #5f646e; + font-weight: 500; +} +.facebook-card .card-content img { + display: block; +} +.facebook-card .card-content-inner { + padding: 0.75rem 0.5rem; +} +/* === Panels === */ +.panel-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0); + opacity: 0; + z-index: 5999; + display: none; +} +.panel { + z-index: 1000; + display: none; + background: #111; + color: white; + box-sizing: border-box; + overflow: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + width: 12rem; + top: 0; + height: 100%; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition: -webkit-transform 400ms; + transition: transform 400ms; +} +.panel.panel-left.panel-cover { + z-index: 6000; + left: -12rem; +} +.panel.panel-left.panel-reveal { + left: 0; +} +.panel.panel-right.panel-cover { + z-index: 6000; + right: -12rem; +} +.panel.panel-right.panel-reveal { + right: 0; +} +body.with-panel-left-cover .page, +body.with-panel-right-cover .page { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition: -webkit-transform 400ms; + transition: transform 400ms; +} +body.with-panel-left-cover .panel-overlay, +body.with-panel-right-cover .panel-overlay { + display: block; +} +body.with-panel-left-reveal .page, +body.with-panel-right-reveal .page { + -webkit-transition: 400ms; + transition: 400ms; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} +body.with-panel-left-reveal .panel-overlay, +body.with-panel-right-reveal .panel-overlay { + display: block; +} +body.with-panel-left-reveal .page { + -webkit-transform: translate3d(12rem, 0, 0); + transform: translate3d(12rem, 0, 0); +} +body.with-panel-left-reveal .panel-overlay { + margin-left: 12rem; +} +body.with-panel-left-cover .panel-left { + -webkit-transform: translate3d(12rem, 0, 0); + transform: translate3d(12rem, 0, 0); +} +body.with-panel-right-reveal .page { + -webkit-transform: translate3d(-12rem, 0, 0); + transform: translate3d(-12rem, 0, 0); +} +body.with-panel-right-reveal .panel-overlay { + margin-left: -12rem; +} +body.with-panel-right-cover .panel-right { + -webkit-transform: translate3d(-12rem, 0, 0); + transform: translate3d(-12rem, 0, 0); +} +body.panel-closing .page { + -webkit-transition: 400ms; + transition: 400ms; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} +/* === Calendar === */ +.picker-calendar { + background: #fff; + height: 300px; + width: 100%; + overflow: hidden; +} +@media (orientation: landscape) and (max-height: 415px) { + .picker-calendar:not(.picker-modal-inline) { + height: 220px; + } +} +.picker-calendar .picker-modal-inner { + overflow: hidden; +} +.picker-calendar-week-days { + height: 18px; + background: #f7f7f8; + display: -webkit-box; + display: -webkit-flex; + display: flex; + font-size: 11px; + box-sizing: border-box; + position: relative; +} +.picker-calendar-week-days:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-calendar-week-days:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-calendar-week-days:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-calendar-week-days .picker-calendar-week-day { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; + width: 14.28571429%; + width: -webkit-calc(100% / 7); + width: calc(100% / 7); + line-height: 17px; + text-align: center; +} +.picker-calendar-week-days + .picker-calendar-months { + height: -webkit-calc(100% - 18px); + height: calc(100% - 18px); +} +.picker-calendar-months { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} +.picker-calendar-months-wrapper { + position: relative; + width: 100%; + height: 100%; + -webkit-transition: 300ms; + transition: 300ms; +} +.picker-calendar-month { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + flex-direction: column; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} +.picker-calendar-row { + height: 16.66666667%; + height: -webkit-calc(100% / 6); + height: calc(100% / 6); + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; + width: 100%; + position: relative; +} +.picker-calendar-row:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #ccc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-calendar-row:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-calendar-row:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-calendar-row:last-child:after { + display: none; +} +.picker-calendar-day { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + box-sizing: border-box; + width: 14.28571429%; + width: -webkit-calc(100% / 7); + width: calc(100% / 7); + text-align: center; + color: #3d4145; + font-size: 15px; + cursor: pointer; +} +.picker-calendar-day.picker-calendar-day-prev, +.picker-calendar-day.picker-calendar-day-next { + color: #ccc; +} +.picker-calendar-day.picker-calendar-day-disabled { + color: #d4d4d4; + cursor: auto; +} +.picker-calendar-day.picker-calendar-day-today span { + background: #e3e3e3; +} +.picker-calendar-day.picker-calendar-day-selected span { + background: #0894ec; + color: #fff; +} +.picker-calendar-day span { + display: inline-block; + border-radius: 100%; + width: 30px; + height: 30px; + line-height: 30px; +} +.picker-calendar-month-picker, +.picker-calendar-year-picker { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 50%; + max-width: 200px; + -webkit-flex-shrink: 10; + -ms-flex: 0 10 auto; + -webkit-flex-shrink: 10; + flex-shrink: 10; +} +.picker-calendar-month-picker a.icon-only, +.picker-calendar-year-picker a.icon-only { + min-width: 36px; +} +.picker-calendar-month-picker span, +.picker-calendar-year-picker span { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + -webkit-flex-shrink: 1; + flex-shrink: 1; + position: relative; + overflow: hidden; + text-overflow: ellipsis; +} +.picker-modal .toolbar-inner { + height: 2.2rem; + display: -webkit-box; + display: -webkit-flex; + display: flex; + text-align: center; +} +.picker-calendar-month-picker, +.picker-calendar-year-picker { + display: block; + line-height: 2.2rem; +} +.picker-calendar-month-picker a.icon-only, +.picker-calendar-year-picker a.icon-only { + float: left; + width: 25%; + height: 2.2rem; + line-height: 2rem; +} +.picker-calendar-month-picker .current-month-value, +.picker-calendar-year-picker .current-month-value, +.picker-calendar-month-picker .current-year-value, +.picker-calendar-year-picker .current-year-value { + float: left; + width: 50%; + height: 2.2rem; +} +/* === Columns Picker === */ +.picker-columns { + width: 100%; + height: 13rem; + z-index: 11500; +} +.picker-columns.picker-modal-inline { + height: 10rem; +} +@media (orientation: landscape) and (max-height: 415px) { + .picker-columns:not(.picker-modal-inline) { + height: 10rem; + } +} +.picker-items { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding: 0; + text-align: right; + font-size: 1.2rem; + -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); + -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); +} +.bar + .picker-items { + height: 10.8rem; +} +.picker-items-col { + overflow: hidden; + position: relative; + max-height: 100%; +} +.picker-items-col.picker-items-col-left { + text-align: left; +} +.picker-items-col.picker-items-col-center { + text-align: center; +} +.picker-items-col.picker-items-col-right { + text-align: right; +} +.picker-items-col.picker-items-col-divider { + color: #3d4145; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; +} +.picker-items-col-normal { + width: 100%; +} +.picker-items-col-wrapper { + -webkit-transition: 300ms; + transition: 300ms; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.picker-item { + height: 36px; + line-height: 36px; + padding: 0 10px; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + color: #999; + left: 0; + top: 0; + width: 100%; + box-sizing: border-box; + -webkit-transition: 300ms; + transition: 300ms; +} +.picker-items-col-absolute .picker-item { + position: absolute; +} +.picker-item.picker-item-far { + pointer-events: none; +} +.picker-item.picker-selected { + color: #3d4145; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); +} +.picker-center-highlight { + height: 36px; + box-sizing: border-box; + position: absolute; + left: 0; + width: 100%; + top: 50%; + margin-top: -18px; + pointer-events: none; +} +.picker-center-highlight:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-center-highlight:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-center-highlight:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-center-highlight:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-center-highlight:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-center-highlight:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-3d .picker-items { + overflow: hidden; + -webkit-perspective: 1200px; + perspective: 1200px; +} +.picker-3d .picker-items-col, +.picker-3d .picker-items-col-wrapper, +.picker-3d .picker-item { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.picker-3d .picker-items-col { + overflow: visible; +} +.picker-3d .picker-item { + -webkit-transform-origin: center center -110px; + transform-origin: center center -110px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.picker-modal .bar { + position: relative; + top: 0; +} +.picker-modal .bar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-modal .bar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-modal .bar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-modal .bar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2) { + .picker-modal .bar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +@media only screen and (-webkit-min-device-pixel-ratio: 3) { + .picker-modal .bar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); + } +} +.picker-modal .bar .title { + color: #5f646e; + font-weight: normal; +} +.city-picker .col-province { + width: 5rem; +} +.city-picker .col-city { + width: 6rem; +} +.city-picker .col-district { + width: 5rem; +} +@font-face { + font-family: "iconfont-sm"; + src: url('//at.alicdn.com/t/font_1433401008_2229297.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1433401008_2229297.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1433401008_2229297.svg#iconfont') format('svg'); + /* iOS 4.1- */ +} +.icon { + font-family: "iconfont-sm" !important; + font-style: normal; + display: inline-block; + vertical-align: middle; + background-size: 100% auto; + background-position: center; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + -moz-osx-font-smoothing: grayscale; +} +.icon-app:before { + content: "\e605"; +} +.icon-browser:before { + content: "\e606"; +} +.icon-card:before { + content: "\e607"; +} +.icon-cart:before { + content: "\e600"; +} +.icon-code:before { + content: "\e609"; +} +.icon-computer:before { + content: "\e616"; +} +.icon-remove:before { + content: "\e60a"; +} +.icon-download:before { + content: "\e60b"; +} +.icon-edit:before { + content: "\e60c"; +} +.icon-emoji:before { + content: "\e615"; +} +.icon-star:before { + content: "\e60e"; +} +.icon-friends:before { + content: "\e601"; +} +.icon-gift:before { + content: "\e618"; +} +.icon-phone:before { + content: "\e60f"; +} +.icon-clock:before { + content: "\e619"; +} +.icon-home:before { + content: "\e602"; +} +.icon-menu:before { + content: "\e60d"; +} +.icon-message:before { + content: "\e617"; +} +.icon-me:before { + content: "\e603"; +} +.icon-picture:before { + content: "\e61a"; +} +.icon-share:before { + content: "\e61b"; +} +.icon-settings:before { + content: "\e604"; +} +.icon-refresh:before { + content: "\e61c"; +} +.icon-caret:before { + content: "\e610"; +} +.icon-down:before { + content: "\e611"; +} +.icon-up:before { + content: "\e612"; +} +.icon-right:before { + content: "\e613"; +} +.icon-left:before { + content: "\e614"; +} +.icon-check:before { + content: "\e608"; +} +.icon-search:before { + content: "\e61d"; +} +.icon-new:before { + content: "\e61e"; +} +.icon-next, +.icon-prev { + width: 0.75rem; + height: 0.75rem; +} +.icon-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.icon-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +/* +.icon-plus { + width: 1.25rem; + height: 1.25rem; + font-size: 1.55rem; + line-height: 1rem; + text-align: center; + font-weight: 100; +} +*/ +/*========================== +Framework7 Layouts Themes +==========================*/ +/* === Dark layout === */ +.theme-dark { + background-color: #222426; +} +.theme-dark .bar, +.bar.theme-dark { + background-color: #131313; + color: #fff; +} +.theme-dark .bar:after, +.bar.theme-dark:after { + background-color: #333; +} +.theme-dark .title { + color: #fff; +} +.theme-dark .bar-nav, +.theme-dark .bar-tab, +.bar-nav.theme-dark, +.bar-tab.theme-dark { + background-color: #131313; + color: #fff; +} +.theme-dark .bar-nav:before, +.theme-dark .bar-tab:before, +.bar-nav.theme-dark:before, +.bar-tab.theme-dark:before { + background-color: #333; +} +.theme-dark .tab-item { + color: #fff; +} +.theme-dark .tab-item.active { + color: #0894ec; +} +.theme-dark .picker-calendar-week-days { + color: #fff; + background-color: #131313; +} +.theme-dark .picker-modal.picker-modal-inline .picker-center-highlight:before { + background-color: #333; +} +.theme-dark .picker-modal.picker-modal-inline .picker-center-highlight:after { + background-color: #333; +} +.theme-dark .picker-modal.picker-modal-inline .picker-item.picker-selected { + color: #fff; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days { + color: #fff; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-day { + color: #fff; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-prev, +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-next { + color: #777; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-disabled { + color: #555; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-day.picker-calendar-day-today span { + background: #444; +} +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days:after, +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-row:after { + background-color: #333; +} +.theme-dark .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before, +.theme-dark .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before { + background-color: #333; +} +.theme-dark .photo-browser .navbar, +.photo-browser.theme-dark .navbar, +.theme-dark .view[data-page="photo-browser-slides"] .navbar, +.view[data-page="photo-browser-slides"].theme-dark .navbar, +.theme-dark .photo-browser .toolbar, +.photo-browser.theme-dark .toolbar, +.theme-dark .view[data-page="photo-browser-slides"] .toolbar, +.view[data-page="photo-browser-slides"].theme-dark .toolbar { + background: rgba(19, 19, 19, 0.95); +} +.theme-dark .tabbar a:not(.active) { + color: #fff; +} +.theme-dark .page, +.theme-dark .login-screen-content, +.page.theme-dark, +.theme-dark .panel, +.panel.theme-dark, +.theme-dark .content { + background-color: #222426; + color: #ddd; +} +.theme-dark .content-block-title { + color: #fff; +} +.theme-dark .content-block, +.content-block.theme-dark { + color: #bbb; +} +.theme-dark .content-block-inner { + background: #1c1d1f; + color: #ddd; +} +.theme-dark .content-block-inner:before { + background-color: #393939; +} +.theme-dark .content-block-inner:after { + background-color: #393939; +} +.theme-dark .list-block ul, +.list-block.theme-dark ul { + background: #1c1d1f; +} +.theme-dark .list-block ul:before, +.list-block.theme-dark ul:before { + background-color: #393939; +} +.theme-dark .list-block ul:after, +.list-block.theme-dark ul:after { + background-color: #393939; +} +.theme-dark .list-block.inset ul, +.list-block.theme-dark.inset ul { + background: #1c1d1f; +} +.theme-dark .list-block.notifications > ul, +.list-block.theme-dark.notifications > ul { + background: none; +} +.theme-dark .list-block .item-title, +.list-block.theme-dark .item-title, +.theme-dark .list-block .item-subtitle, +.list-block.theme-dark .item-subtitle { + color: #bbb; +} +.theme-dark .card { + background: #1c1d1f; +} +.theme-dark .card-header:after { + background-color: #393939; +} +.theme-dark .card-footer { + color: #bbb; +} +.theme-dark .card-footer:before { + background-color: #393939; +} +.theme-dark li.sorting { + background-color: #29292f; +} +.theme-dark .swipeout-actions-left a, +.theme-dark .swipeout-actions-right a { + background-color: #444; +} +.theme-dark .item-inner:after, +.theme-dark .list-block ul ul li:last-child .item-inner:after { + background-color: #393939; +} +.theme-dark .item-after { + color: #bbb; +} +html:not(.watch-active-state) .theme-dark .item-link:active, +html:not(.watch-active-state) .theme-dark label.label-checkbox:active, +html:not(.watch-active-state) .theme-dark label.label-radio:active, +.theme-dark .item-link.active-state, +.theme-dark label.label-checkbox.active-state, +.theme-dark label.label-radio.active-state { + background-color: #29292f; +} +.theme-dark .item-link.list-button:after { + background-color: #393939; +} +.theme-dark .list-block-label { + color: #bbb; +} +.theme-dark .item-divider, +.theme-dark .list-group-title { + background: #1a1a1a; + color: #bbb; +} +.theme-dark .item-divider:before, +.theme-dark .list-group-title:before { + background-color: #393939; +} +.theme-dark .searchbar { + background: #333; +} +.theme-dark .searchbar:after { + background-color: #333; +} +.theme-dark .list-block input[type="text"], +.list-block.theme-dark input[type="text"], +.theme-dark .list-block input[type="password"], +.list-block.theme-dark input[type="password"], +.theme-dark .list-block input[type="email"], +.list-block.theme-dark input[type="email"], +.theme-dark .list-block input[type="tel"], +.list-block.theme-dark input[type="tel"], +.theme-dark .list-block input[type="url"], +.list-block.theme-dark input[type="url"], +.theme-dark .list-block input[type="date"], +.list-block.theme-dark input[type="date"], +.theme-dark .list-block input[type="datetime-local"], +.list-block.theme-dark input[type="datetime-local"], +.theme-dark .list-block input[type="number"], +.list-block.theme-dark input[type="number"], +.theme-dark .list-block select, +.list-block.theme-dark select, +.theme-dark .list-block textarea, +.list-block.theme-dark textarea { + color: #fff; +} +.theme-dark .label-switch .checkbox { + background-color: #393939; +} +.theme-dark .label-switch .checkbox:before { + background-color: #1c1d1f; +} +.theme-dark .range-slider input[type="range"]:after { + background: #1c1d1f; +} +.theme-dark .buttons-tab { + background: #131313; +} +.theme-dark .buttons-tab .tab-link:not(.active) { + color: #ddd; +} +/* === White layout === */ +.theme-white .navbar, +.navbar.theme-white, +.theme-white .subnavbar, +.subnavbar.theme-white { + background-color: #fff; + color: #000; +} +.theme-white .navbar:after, +.navbar.theme-white:after, +.theme-white .subnavbar:after, +.subnavbar.theme-white:after { + background-color: #ddd; +} +.theme-white .toolbar, +.toolbar.theme-white { + background-color: #fff; + color: #000; +} +.theme-white .toolbar:before, +.toolbar.theme-white:before { + background-color: #ddd; +} +.theme-white .picker-modal.picker-modal-inline .picker-center-highlight:before { + background-color: #ddd; +} +.theme-white .picker-modal.picker-modal-inline .picker-center-highlight:after { + background-color: #ddd; +} +.theme-white .picker-modal.picker-modal-inline .picker-calendar-week-days:after, +.theme-white .picker-modal.picker-modal-inline .picker-calendar-row:after { + background-color: #ddd; +} +.theme-white .picker-modal.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before, +.theme-white .picker-modal.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before { + background-color: #ddd; +} +.theme-white .photo-browser .navbar, +.photo-browser.theme-white .navbar, +.theme-white .view[data-page="photo-browser-slides"] .navbar, +.view[data-page="photo-browser-slides"].theme-white .navbar, +.theme-white .photo-browser .toolbar, +.photo-browser.theme-white .toolbar, +.theme-white .view[data-page="photo-browser-slides"] .toolbar, +.view[data-page="photo-browser-slides"].theme-white .toolbar { + background: rgba(255, 255, 255, 0.95); +} +.theme-white .tabbar a:not(.active) { + color: #777; +} +.theme-white .page, +.theme-white .login-screen-content, +.page.theme-white, +.theme-white .panel, +.panel.theme-white { + background-color: #fff; + color: #000; +} +.theme-white .content-block-title { + color: #777; +} +.theme-white .content-block, +.content-block.theme-white { + color: #777; +} +.theme-white .content-block-inner { + background: #fafafa; + color: #000; +} +.theme-white .content-block-inner:after { + background-color: #ddd; +} +.theme-white .content-block-inner:before { + background-color: #ddd; +} +.theme-white .list-block ul, +.list-block.theme-white ul { + background: #fff; +} +.theme-white .list-block ul:after, +.list-block.theme-white ul:after { + background-color: #ddd; +} +.theme-white .list-block ul:before, +.list-block.theme-white ul:before { + background-color: #ddd; +} +.theme-white .list-block.inset ul, +.list-block.theme-white.inset ul { + background: #fafafa; +} +.theme-white .list-block.notifications > ul, +.list-block.theme-white.notifications > ul { + background: none; +} +.theme-white li.sorting { + background-color: #eee; +} +.theme-white .swipeout-actions-left a, +.theme-white .swipeout-actions-right a { + background-color: #c7c7cc; +} +.theme-white .item-inner, +.theme-white .list-block ul ul li:last-child .item-inner { + border-color: #ddd; +} +.theme-white .item-inner:after, +.theme-white .list-block ul ul li:last-child .item-inner:after { + background-color: #ddd; +} +.theme-white .item-after { + color: #8e8e93; +} +html:not(.watch-active-state) .theme-white .item-link:active, +html:not(.watch-active-state) .theme-white label.label-checkbox:active, +html:not(.watch-active-state) .theme-white label.label-radio:active, +.theme-white .item-link.active-state, +.theme-white label.label-checkbox.active-state, +.theme-white label.label-radio.active-state { + background-color: #eee; +} +.theme-white .item-link.list-button:after { + background-color: #ddd; +} +.theme-white .list-block-label { + color: #777; +} +.theme-white .item-divider, +.theme-white .list-group-title { + background: #f7f7f7; + color: #777; +} +.theme-white .item-divider:before, +.theme-white .list-group-title:before { + background-color: #ddd; +} +.theme-white .searchbar { + background: #c9c9ce; +} +.theme-white .searchbar:after { + background-color: #b4b4b4; +} +.theme-white .list-block input[type="text"], +.list-block.theme-white input[type="text"], +.theme-white .list-block input[type="password"], +.list-block.theme-white input[type="password"], +.theme-white .list-block input[type="email"], +.list-block.theme-white input[type="email"], +.theme-white .list-block input[type="tel"], +.list-block.theme-white input[type="tel"], +.theme-white .list-block input[type="url"], +.list-block.theme-white input[type="url"], +.theme-white .list-block input[type="date"], +.list-block.theme-white input[type="date"], +.theme-white .list-block input[type="datetime-local"], +.list-block.theme-white input[type="datetime-local"], +.theme-white .list-block input[type="number"], +.list-block.theme-white input[type="number"], +.theme-white .list-block select, +.list-block.theme-white select, +.theme-white .list-block textarea, +.list-block.theme-white textarea { + color: #777; +} +.theme-white .label-switch .checkbox { + background-color: #e5e5e5; +} +.theme-white .label-switch .checkbox:before { + background-color: #fff; +} +.theme-white .range-slider input[type="range"]:after { + background: #fff; +} diff --git a/src/components/List.vue b/src/components/List.vue index cce020a..9b9edb8 100644 --- a/src/components/List.vue +++ b/src/components/List.vue @@ -30,7 +30,7 @@ export default { if (this.type === 'media') { typeCls = 'media-list' } - else if (this.type !== '') { + else if (this.type !== '' && this.type !== undefined) { typeCls = `${this.type}-block` } return cx({ diff --git a/src/data/tasks.json b/src/data/tasks.json new file mode 100644 index 0000000..5d589e7 --- /dev/null +++ b/src/data/tasks.json @@ -0,0 +1,26 @@ +{ + "code": 200, + "message": "获取成功", + "data": [ + { + "tid": "1", + "title": "哈哈哈？你傻逼吗？", + "thumbnail": "adv.jpg", + "advertiser": "abc1", + "read_profit": "8", + "type": "0", + "status": "1", + "created": "1452139945" + }, + { + "tid": "2", + "title": "看看你到底有多污？", + "thumbnail": "adv.jpg", + "advertiser": "abc2", + "status": "0", + "type": "1", + "read_profit": "5", + "created": "1452094126" + } + ] +} \ No newline at end of file diff --git a/src/views/home.vue b/src/views/home.vue index cde71da..784cf5d 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -7,29 +7,40 @@ :class-name="bar.className"> - - 任务推荐 - 更多任务 + + + 任务推荐 + + + 更多任务 +
- + - +
  • -
    + -
    -
    -
    -
    {{task.title}}
    -
    -
    + + + + {{task.title}} + +
    • -     +     - - 赞助商：{{task.adv}} - {{task.point}}积分 + +
    + 赞助商：{{task.advertiser}} + {{task.status === '0' ? '结束' : '已领'}} +
    + {{task.read_profit}} 积分
    @@ -43,9 +54,11 @@ import VBar from '../components/Bar' import VTabItem from '../components/BarTabItem' import VLayer from '../components/PullToRefreshLayer' import VCardContainer from '../components/Card' +import Btn from '../components/Button' import Card from '../components/CardItem' import VContent from '../components/Content' -import VList from '../components/List' +import List from '../components/List' +import Item from '../components/ListItem' export default { ready () { @@ -98,14 +111,7 @@ export default { activeClass: 'inactive', className: 'home-bar' }, - tasks: [ - { - id: 1, - title: '标题1', - adv: 'abc1', - point: 100 - } - ] + tasks: [] } }, computed: { @@ -138,12 +144,16 @@ export default { VCardContainer, Card, VContent, - VList + List, + Item, + Btn }, route: { data ({to, next}) { - console.log('route home data') - next() + return this.$http.get('tasks.json') + .then(({data: {code, message, data}})=>{ + this.tasks = data + }) }, activate ({to, next}) { console.log('route home activate')