├── www
├── css
│ └── style.css
├── img
│ ├── ben.png
│ ├── max.png
│ ├── me.png
│ ├── adam.jpg
│ ├── ionic.png
│ ├── mike.png
│ └── perry.png
├── lib
│ └── ionic
│ │ ├── fonts
│ │ ├── ionicons.eot
│ │ ├── ionicons.ttf
│ │ └── ionicons.woff
│ │ ├── version.json
│ │ ├── scss
│ │ ├── _progress.scss
│ │ ├── _backdrop.scss
│ │ ├── ionicons
│ │ │ ├── ionicons.scss
│ │ │ └── _ionicons-font.scss
│ │ ├── ionic.scss
│ │ ├── _loading.scss
│ │ ├── _radio.scss
│ │ ├── _button-bar.scss
│ │ ├── _menu.scss
│ │ ├── _animations.scss
│ │ ├── _slide-box.scss
│ │ ├── _badge.scss
│ │ ├── _platform.scss
│ │ ├── _spinner.scss
│ │ ├── _popup.scss
│ │ ├── _modal.scss
│ │ ├── _list.scss
│ │ ├── _refresher.scss
│ │ ├── _select.scss
│ │ ├── _grid.scss
│ │ ├── _type.scss
│ │ ├── _action-sheet.scss
│ │ ├── _popover.scss
│ │ ├── _range.scss
│ │ ├── _transitions.scss
│ │ ├── _checkbox.scss
│ │ ├── _toggle.scss
│ │ ├── _scaffolding.scss
│ │ ├── _util.scss
│ │ ├── _button.scss
│ │ ├── _form.scss
│ │ ├── _reset.scss
│ │ ├── _bar.scss
│ │ ├── _tabs.scss
│ │ └── _mixins.scss
│ │ └── js
│ │ └── angular
│ │ ├── angular-resource.min.js
│ │ └── angular-sanitize.min.js
├── templates
│ ├── tab-setting.html
│ ├── tab-find.html
│ ├── popup.html
│ ├── tabs.html
│ ├── tab-message.html
│ ├── message-detail.html
│ └── tab-friends.html
├── index.html
├── js
│ ├── app.js
│ ├── routes.js
│ ├── directives.js
│ ├── controllers.js
│ ├── elastic.js
│ └── services.js
└── data
│ └── json
│ └── messages.json
├── README.md
└── scss
└── ionic.app.scss
/www/css/style.css:
--------------------------------------------------------------------------------
1 | /* Empty. Add your own CSS if you like */
2 |
--------------------------------------------------------------------------------
/www/img/ben.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/ben.png
--------------------------------------------------------------------------------
/www/img/max.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/max.png
--------------------------------------------------------------------------------
/www/img/me.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/me.png
--------------------------------------------------------------------------------
/www/img/adam.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/adam.jpg
--------------------------------------------------------------------------------
/www/img/ionic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/ionic.png
--------------------------------------------------------------------------------
/www/img/mike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/mike.png
--------------------------------------------------------------------------------
/www/img/perry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/img/perry.png
--------------------------------------------------------------------------------
/www/lib/ionic/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/lib/ionic/fonts/ionicons.eot
--------------------------------------------------------------------------------
/www/lib/ionic/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/lib/ionic/fonts/ionicons.ttf
--------------------------------------------------------------------------------
/www/lib/ionic/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frogmarch/ionic-wechat/HEAD/www/lib/ionic/fonts/ionicons.woff
--------------------------------------------------------------------------------
/www/lib/ionic/version.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.1.1",
3 | "codename": "yttrium-yeti",
4 | "date": "2015-11-05",
5 | "time": "21:31:24"
6 | }
7 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_progress.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Progress
4 | * --------------------------------------------------
5 | */
6 |
7 | progress {
8 | display: block;
9 | margin: $progress-margin;
10 | width: $progress-width;
11 | }
12 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_backdrop.scss:
--------------------------------------------------------------------------------
1 |
2 | .backdrop {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | z-index: $z-index-backdrop;
7 |
8 | width: 100%;
9 | height: 100%;
10 |
11 | background-color: $loading-backdrop-bg-color;
12 |
13 | visibility: hidden;
14 | opacity: 0;
15 |
16 | &.visible {
17 | visibility: visible;
18 | }
19 | &.active {
20 | opacity: 1;
21 | }
22 |
23 | @include transition($loading-backdrop-fadein-duration opacity linear);
24 | }
25 |
--------------------------------------------------------------------------------
/www/templates/tab-setting.html:
--------------------------------------------------------------------------------
1 |
2 | 微信(16)
3 |
4 |
6 |
8 |
9 |
10 |
11 |
12 | 设置页面
13 |
14 |
15 |
--------------------------------------------------------------------------------
/www/templates/tab-find.html:
--------------------------------------------------------------------------------
1 |
2 | 微信(16)
3 |
4 |
6 |
8 |
9 |
10 |
11 |
12 | 发现页面
13 |
14 |
15 |
--------------------------------------------------------------------------------
/www/templates/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
10 |
13 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/ionicons/ionicons.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "ionicons-variables";
3 | /*!
4 | Ionicons, v2.0.1
5 | Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
6 | https://twitter.com/benjsperry https://twitter.com/ionicframework
7 | MIT License: https://github.com/driftyco/ionicons
8 |
9 | Android-style icons originally built by Google’s
10 | Material Design Icons: https://github.com/google/material-design-icons
11 | used under CC BY http://creativecommons.org/licenses/by/4.0/
12 | Modified icons to fit ionicon’s grid from original.
13 | */
14 |
15 | @import "ionicons-font";
16 | @import "ionicons-icons";
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 | 这是一个学习Ionic的练习项目，模仿微信，开发的一款App
3 |
4 | 初步计划要实现的功能：
5 | > 1. 界面要像，呵呵
6 | > 2. 聊天消息列表，查看对话内容，来了消息推送提醒
7 | > 3. 通讯录展示，好友搜索，右侧字母快速索引
8 | > 4. 朋友圈展示，发朋友圈消息
9 | > 5. 扫一扫， 摇一摇功能
10 | > 6. 设置功能，设置消息提醒方式，设置聊天背景，关于等
11 |
12 | # 目录
13 | 没有上传所有目录, 只上传了www和sass, 以后有需要在更新
14 | [博客地址](http://www.cnblogs.com/Frogmarch/)
15 |
16 | ## 一
17 | ## 二
18 | ## 三
19 | ## 四
20 | 1. 增加置顶删除功能
21 | 2. 增加聊天详细界面
22 | 3. 增加可伸缩输入框
23 | 4. 增加下拉刷新聊天记录
24 |
25 | ## 五
26 | 1. 增加联系人列表页面
27 |
28 | # 最新界面截图:
29 | 
30 |
31 | 
32 | 
33 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/ionic.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | @import
4 | // Ionicons
5 | "ionicons/ionicons.scss",
6 |
7 | // Variables
8 | "mixins",
9 | "variables",
10 |
11 | // Base
12 | "reset",
13 | "scaffolding",
14 | "type",
15 |
16 | // Components
17 | "action-sheet",
18 | "backdrop",
19 | "bar",
20 | "tabs",
21 | "menu",
22 | "modal",
23 | "popover",
24 | "popup",
25 | "loading",
26 | "items",
27 | "list",
28 | "badge",
29 | "slide-box",
30 | "refresher",
31 | "spinner",
32 |
33 | // Forms
34 | "form",
35 | "checkbox",
36 | "toggle",
37 | "radio",
38 | "range",
39 | "select",
40 | "progress",
41 |
42 | // Buttons
43 | "button",
44 | "button-bar",
45 |
46 | // Util
47 | "grid",
48 | "util",
49 | "platform",
50 |
51 | // Animations
52 | "animations",
53 | "transitions";
54 |
--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/www/templates/tabs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_loading.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Loading
4 | * --------------------------------------------------
5 | */
6 |
7 | .loading-container {
8 | position: absolute;
9 | left: 0;
10 | top: 0;
11 | right: 0;
12 | bottom: 0;
13 |
14 | z-index: $z-index-loading;
15 |
16 | @include display-flex();
17 | @include justify-content(center);
18 | @include align-items(center);
19 |
20 | @include transition(0.2s opacity linear);
21 | visibility: hidden;
22 | opacity: 0;
23 |
24 | &:not(.visible) .icon,
25 | &:not(.visible) .spinner{
26 | display: none;
27 | }
28 | &.visible {
29 | visibility: visible;
30 | }
31 | &.active {
32 | opacity: 1;
33 | }
34 |
35 | .loading {
36 | padding: $loading-padding;
37 |
38 | border-radius: $loading-border-radius;
39 | background-color: $loading-bg-color;
40 |
41 | color: $loading-text-color;
42 |
43 | text-align: center;
44 | text-overflow: ellipsis;
45 | font-size: $loading-font-size;
46 |
47 | h1, h2, h3, h4, h5, h6 {
48 | color: $loading-text-color;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/ionicons/_ionicons-font.scss:
--------------------------------------------------------------------------------
1 | // Ionicons Font Path
2 | // --------------------------
3 |
4 | @font-face {
5 | font-family: $ionicons-font-family;
6 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
7 | src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
8 | url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
9 | url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
10 | url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */
11 | url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
12 | font-weight: normal;
13 | font-style: normal;
14 | }
15 |
16 | .ion {
17 | display: inline-block;
18 | font-family: $ionicons-font-family;
19 | speak: none;
20 | font-style: normal;
21 | font-weight: normal;
22 | font-variant: normal;
23 | text-transform: none;
24 | text-rendering: auto;
25 | line-height: 1;
26 | -webkit-font-smoothing: antialiased;
27 | -moz-osx-font-smoothing: grayscale;
28 | }
29 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_radio.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Radio Button Inputs
4 | * --------------------------------------------------
5 | */
6 |
7 | .item-radio {
8 | padding: 0;
9 |
10 | &:hover {
11 | cursor: pointer;
12 | }
13 | }
14 |
15 | .item-radio .item-content {
16 | /* give some room to the right for the checkmark icon */
17 | padding-right: $item-padding * 4;
18 | }
19 |
20 | .item-radio .radio-icon {
21 | /* checkmark icon will be hidden by default */
22 | position: absolute;
23 | top: 0;
24 | right: 0;
25 | z-index: $z-index-item-radio;
26 | visibility: hidden;
27 | padding: $item-padding - 2;
28 | height: 100%;
29 | font-size: 24px;
30 | }
31 |
32 | .item-radio input {
33 | /* hide any radio button inputs elements (the ugly circles) */
34 | position: absolute;
35 | left: -9999px;
36 |
37 | &:checked + .radio-content .item-content {
38 | /* style the item content when its checked */
39 | background: #f7f7f7;
40 | }
41 |
42 | &:checked + .radio-content .radio-icon {
43 | /* show the checkmark icon when its checked */
44 | visibility: visible;
45 | }
46 | }
47 |
48 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_button-bar.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Button Bar
4 | * --------------------------------------------------
5 | */
6 |
7 | .button-bar {
8 | @include display-flex();
9 | @include flex(1);
10 | width: 100%;
11 |
12 | &.button-bar-inline {
13 | display: block;
14 | width: auto;
15 |
16 | @include clearfix();
17 |
18 | > .button {
19 | width: auto;
20 | display: inline-block;
21 | float: left;
22 | }
23 | }
24 | }
25 |
26 | .button-bar > .button {
27 | @include flex(1);
28 | display: block;
29 |
30 | overflow: hidden;
31 |
32 | padding: 0 16px;
33 |
34 | width: 0;
35 |
36 | border-width: 1px 0px 1px 1px;
37 | border-radius: 0;
38 | text-align: center;
39 | text-overflow: ellipsis;
40 | white-space: nowrap;
41 |
42 | &:before,
43 | .icon:before {
44 | line-height: 44px;
45 | }
46 |
47 | &:first-child {
48 | border-radius: $button-border-radius 0px 0px $button-border-radius;
49 | }
50 | &:last-child {
51 | border-right-width: 1px;
52 | border-radius: 0px $button-border-radius $button-border-radius 0px;
53 | }
54 | }
55 |
56 | .button-bar > .button-small {
57 | &:before,
58 | .icon:before {
59 | line-height: 28px;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/www/templates/tab-message.html:
--------------------------------------------------------------------------------
1 |
2 | 微信(16)
3 |
4 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | ![]()
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_menu.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Menus
4 | * --------------------------------------------------
5 | * Side panel structure
6 | */
7 |
8 | .menu {
9 | position: absolute;
10 | top: 0;
11 | bottom: 0;
12 | z-index: $z-index-menu;
13 | overflow: hidden;
14 |
15 | min-height: 100%;
16 | max-height: 100%;
17 | width: $menu-width;
18 |
19 | background-color: $menu-bg;
20 |
21 | .scroll-content {
22 | z-index: $z-index-menu-scroll-content;
23 | }
24 |
25 | .bar-header {
26 | z-index: $z-index-menu-bar-header;
27 | }
28 | }
29 |
30 | .menu-content {
31 | @include transform(none);
32 | box-shadow: $menu-side-shadow;
33 | }
34 |
35 | .menu-open .menu-content .pane,
36 | .menu-open .menu-content .scroll-content {
37 | pointer-events: none;
38 | overflow: hidden;
39 | }
40 |
41 | .grade-b .menu-content,
42 | .grade-c .menu-content {
43 | @include box-sizing(content-box);
44 | right: -1px;
45 | left: -1px;
46 | border-right: 1px solid #ccc;
47 | border-left: 1px solid #ccc;
48 | box-shadow: none;
49 | }
50 |
51 | .menu-left {
52 | left: 0;
53 | }
54 |
55 | .menu-right {
56 | right: 0;
57 | }
58 |
59 | .aside-open.aside-resizing .menu-right {
60 | display: none;
61 | }
62 |
63 | .menu-animated {
64 | @include transition-transform($menu-animation-speed ease);
65 | }
66 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_animations.scss:
--------------------------------------------------------------------------------
1 |
2 | // Slide up from the bottom, used for modals
3 | // -------------------------------
4 |
5 | .slide-in-up {
6 | @include translate3d(0, 100%, 0);
7 | }
8 | .slide-in-up.ng-enter,
9 | .slide-in-up > .ng-enter {
10 | @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms);
11 | }
12 | .slide-in-up.ng-enter-active,
13 | .slide-in-up > .ng-enter-active {
14 | @include translate3d(0, 0, 0);
15 | }
16 |
17 | .slide-in-up.ng-leave,
18 | .slide-in-up > .ng-leave {
19 | @include transition(all ease-in-out 250ms);
20 | }
21 |
22 |
23 | // Scale Out
24 | // Scale from hero (1 in this case) to zero
25 | // -------------------------------
26 |
27 | @-webkit-keyframes scaleOut {
28 | from { -webkit-transform: scale(1); opacity: 1; }
29 | to { -webkit-transform: scale(0.8); opacity: 0; }
30 | }
31 | @keyframes scaleOut {
32 | from { transform: scale(1); opacity: 1; }
33 | to { transform: scale(0.8); opacity: 0; }
34 | }
35 |
36 |
37 | // Super Scale In
38 | // Scale from super (1.x) to duper (1 in this case)
39 | // -------------------------------
40 |
41 | @-webkit-keyframes superScaleIn {
42 | from { -webkit-transform: scale(1.2); opacity: 0; }
43 | to { -webkit-transform: scale(1); opacity: 1 }
44 | }
45 | @keyframes superScaleIn {
46 | from { transform: scale(1.2); opacity: 0; }
47 | to { transform: scale(1); opacity: 1; }
48 | }
49 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_slide-box.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Slide Box
4 | * --------------------------------------------------
5 | */
6 |
7 | .slider {
8 | position: relative;
9 | visibility: hidden;
10 | // Make sure items don't scroll over ever
11 | overflow: hidden;
12 | }
13 |
14 | .slider-slides {
15 | position: relative;
16 | height: 100%;
17 | }
18 |
19 | .slider-slide {
20 | position: relative;
21 | display: block;
22 | float: left;
23 | width: 100%;
24 | height: 100%;
25 | vertical-align: top;
26 | }
27 |
28 | .slider-slide-image {
29 | > img {
30 | width: 100%;
31 | }
32 | }
33 |
34 | .slider-pager {
35 | position: absolute;
36 | bottom: 20px;
37 | z-index: $z-index-slider-pager;
38 | width: 100%;
39 | height: 15px;
40 | text-align: center;
41 |
42 | .slider-pager-page {
43 | display: inline-block;
44 | margin: 0px 3px;
45 | width: 15px;
46 | color: #000;
47 | text-decoration: none;
48 |
49 | opacity: 0.3;
50 |
51 | &.active {
52 | @include transition(opacity 0.4s ease-in);
53 | opacity: 1;
54 | }
55 | }
56 | }
57 |
58 | //Disable animate service animations
59 | .slider-slide,
60 | .slider-pager-page {
61 | &.ng-enter,
62 | &.ng-leave,
63 | &.ng-animate {
64 | -webkit-transition: none !important;
65 | transition: none !important;
66 | }
67 | &.ng-animate {
68 | -webkit-animation: none 0s;
69 | animation: none 0s;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/www/js/app.js:
--------------------------------------------------------------------------------
1 | // Ionic Starter App
2 |
3 | // angular.module is a global place for creating, registering and retrieving Angular modules
4 | // 'starter' is the name of this angular module example (also set in a attribute in index.html)
5 | // the 2nd parameter is an array of 'requires'
6 | angular.module('wechat', ['ionic', 'wechat.controllers', 'wechat.routes',
7 | 'wechat.services', 'wechat.directives', 'monospaced.elastic'
8 | ])
9 |
10 | .config(['$ionicConfigProvider', function($ionicConfigProvider) {
11 |
12 | $ionicConfigProvider.tabs.position('bottom'); // other values: top
13 |
14 | }])
15 |
16 | .run(function($ionicPlatform, $http, messageService, dateService) {
17 |
18 | var url = "";
19 | if (ionic.Platform.isAndroid()) {
20 | url = "/android_asset/www/";
21 | }
22 |
23 | // if (localStorage.getItem("messageID") === null) {
24 |
25 | $http.get(url + "data/json/messages.json").then(function(response) {
26 | // localStorageService.update("messages", response.data.messages);
27 | messageService.init(response.data.messages);
28 |
29 | });
30 | $http.get(url + "data/json/friends.json").then(function(response){
31 | console.log(response.data.results);
32 | });
33 | // }
34 | $ionicPlatform.ready(function() {
35 | // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
36 | // for form inputs)
37 |
38 |
39 | if (window.cordova && window.cordova.plugins.Keyboard) {
40 | cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
41 | }
42 | if (window.StatusBar) {
43 | StatusBar.styleDefault();
44 | }
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/www/js/routes.js:
--------------------------------------------------------------------------------
1 | angular.module('wechat.routes', [])
2 |
3 | .config(function($stateProvider, $urlRouterProvider) {
4 |
5 | $stateProvider
6 | .state("tab", {
7 | url: "/tab",
8 | abstract: true,
9 | templateUrl: "templates/tabs.html",
10 | })
11 | .state('tab.message', {
12 | url: '/message',
13 | views: {
14 | 'tab-message': {
15 | templateUrl: 'templates/tab-message.html',
16 | controller: "messageCtrl"
17 | }
18 | }
19 | })
20 | .state('messageDetail', {
21 | url: '/messageDetail/:messageId',
22 | templateUrl: "templates/message-detail.html",
23 | controller: "messageDetailCtrl"
24 | })
25 | .state('tab.friends', {
26 | url: '/friends',
27 | views: {
28 | 'tab-friends': {
29 | templateUrl: 'templates/tab-friends.html',
30 | controller: "friendsCtrl"
31 | }
32 | }
33 | })
34 | .state('tab.find', {
35 | url: '/find',
36 | views: {
37 | 'tab-find': {
38 | templateUrl: 'templates/tab-find.html',
39 | controller: "findCtrl"
40 | }
41 | },
42 | })
43 | .state('tab.setting', {
44 | url: '/setting',
45 | views: {
46 | 'tab-setting': {
47 | templateUrl: 'templates/tab-setting.html',
48 | controller: "settingCtrl"
49 | }
50 | }
51 | });
52 |
53 | $urlRouterProvider.otherwise("/tab/message");
54 | });
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_badge.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Badges
4 | * --------------------------------------------------
5 | */
6 |
7 | .badge {
8 | @include badge-style($badge-default-bg, $badge-default-text);
9 | z-index: $z-index-badge;
10 | display: inline-block;
11 | padding: 3px 8px;
12 | min-width: 10px;
13 | border-radius: $badge-border-radius;
14 | vertical-align: baseline;
15 | text-align: center;
16 | white-space: nowrap;
17 | font-weight: $badge-font-weight;
18 | font-size: $badge-font-size;
19 | line-height: $badge-line-height;
20 |
21 | &:empty {
22 | display: none;
23 | }
24 | }
25 |
26 | //Be sure to override specificity of rule that 'badge color matches tab color by default'
27 | .tabs .tab-item .badge,
28 | .badge {
29 | &.badge-light {
30 | @include badge-style($badge-light-bg, $badge-light-text);
31 | }
32 | &.badge-stable {
33 | @include badge-style($badge-stable-bg, $badge-stable-text);
34 | }
35 | &.badge-positive {
36 | @include badge-style($badge-positive-bg, $badge-positive-text);
37 | }
38 | &.badge-calm {
39 | @include badge-style($badge-calm-bg, $badge-calm-text);
40 | }
41 | &.badge-assertive {
42 | @include badge-style($badge-assertive-bg, $badge-assertive-text);
43 | }
44 | &.badge-balanced {
45 | @include badge-style($badge-balanced-bg, $badge-balanced-text);
46 | }
47 | &.badge-energized {
48 | @include badge-style($badge-energized-bg, $badge-energized-text);
49 | }
50 | &.badge-royal {
51 | @include badge-style($badge-royal-bg, $badge-royal-text);
52 | }
53 | &.badge-dark {
54 | @include badge-style($badge-dark-bg, $badge-dark-text);
55 | }
56 | }
57 |
58 | // Quick fix for labels/badges in buttons
59 | .button .badge {
60 | position: relative;
61 | top: -1px;
62 | }
63 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_platform.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Platform
4 | * --------------------------------------------------
5 | * Platform specific tweaks
6 | */
7 |
8 | .platform-ios.platform-cordova {
9 | // iOS has a status bar which sits on top of the header.
10 | // Bump down everything to make room for it. However, if
11 | // if its in Cordova, and set to fullscreen, then disregard the bump.
12 | &:not(.fullscreen) {
13 | .bar-header:not(.bar-subheader) {
14 | height: $bar-height + $ios-statusbar-height;
15 |
16 | &.item-input-inset .item-input-wrapper {
17 | margin-top: 19px !important;
18 | }
19 |
20 | > * {
21 | margin-top: $ios-statusbar-height;
22 | }
23 | }
24 | .tabs-top > .tabs,
25 | .tabs.tabs-top {
26 | top: $bar-height + $ios-statusbar-height;
27 | }
28 |
29 | .has-header,
30 | .bar-subheader {
31 | top: $bar-height + $ios-statusbar-height;
32 | }
33 | .has-subheader {
34 | top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
35 | }
36 | .has-header.has-tabs-top {
37 | top: $bar-height + $tabs-height + $ios-statusbar-height;
38 | }
39 | .has-header.has-subheader.has-tabs-top {
40 | top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
41 | }
42 | }
43 | .popover{
44 | .bar-header:not(.bar-subheader) {
45 | height: $bar-height;
46 | &.item-input-inset .item-input-wrapper {
47 | margin-top: -1px;
48 | }
49 | > * {
50 | margin-top: 0;
51 | }
52 | }
53 | .has-header,
54 | .bar-subheader {
55 | top: $bar-height;
56 | }
57 | .has-subheader {
58 | top: $bar-height + $bar-subheader-height;
59 | }
60 | }
61 | &.status-bar-hide {
62 | // Cordova doesn't adjust the body height correctly, this makes up for it
63 | margin-bottom: 20px;
64 | }
65 | }
66 |
67 | @media (orientation:landscape) {
68 | .platform-ios.platform-browser.platform-ipad {
69 | position: fixed; // required for iPad 7 Safari
70 | }
71 | }
72 |
73 | .platform-c:not(.enable-transitions) * {
74 | // disable transitions on grade-c devices (Android 2)
75 | -webkit-transition: none !important;
76 | transition: none !important;
77 | }
78 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_spinner.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Spinners
3 | * --------------------------------------------------
4 | */
5 |
6 | .spinner {
7 | svg {
8 | width: $spinner-width;
9 | height: $spinner-height;
10 | }
11 |
12 | stroke: $spinner-default-stroke;
13 | fill: $spinner-default-fill;
14 |
15 | &.spinner-light {
16 | stroke: $spinner-light-stroke;
17 | fill: $spinner-light-fill;
18 | }
19 | &.spinner-stable {
20 | stroke: $spinner-stable-stroke;
21 | fill: $spinner-stable-fill;
22 | }
23 | &.spinner-positive {
24 | stroke: $spinner-positive-stroke;
25 | fill: $spinner-positive-fill;
26 | }
27 | &.spinner-calm {
28 | stroke: $spinner-calm-stroke;
29 | fill: $spinner-calm-fill;
30 | }
31 | &.spinner-balanced {
32 | stroke: $spinner-balanced-stroke;
33 | fill: $spinner-balanced-fill;
34 | }
35 | &.spinner-assertive {
36 | stroke: $spinner-assertive-stroke;
37 | fill: $spinner-assertive-fill;
38 | }
39 | &.spinner-energized {
40 | stroke: $spinner-energized-stroke;
41 | fill: $spinner-energized-fill;
42 | }
43 | &.spinner-royal {
44 | stroke: $spinner-royal-stroke;
45 | fill: $spinner-royal-fill;
46 | }
47 | &.spinner-dark {
48 | stroke: $spinner-dark-stroke;
49 | fill: $spinner-dark-fill;
50 | }
51 | }
52 |
53 | .spinner-android {
54 | stroke: #4b8bf4;
55 | }
56 |
57 | .spinner-ios,
58 | .spinner-ios-small {
59 | stroke: #69717d;
60 | }
61 |
62 | .spinner-spiral {
63 | .stop1 {
64 | stop-color: $spinner-light-fill;
65 | stop-opacity: 0;
66 | }
67 |
68 | &.spinner-light {
69 | .stop1 {
70 | stop-color: $spinner-default-fill;
71 | }
72 | .stop2 {
73 | stop-color: $spinner-light-fill;
74 | }
75 | }
76 | &.spinner-stable .stop2 {
77 | stop-color: $spinner-stable-fill;
78 | }
79 | &.spinner-positive .stop2 {
80 | stop-color: $spinner-positive-fill;
81 | }
82 | &.spinner-calm .stop2 {
83 | stop-color: $spinner-calm-fill;
84 | }
85 | &.spinner-balanced .stop2 {
86 | stop-color: $spinner-balanced-fill;
87 | }
88 | &.spinner-assertive .stop2 {
89 | stop-color: $spinner-assertive-fill;
90 | }
91 | &.spinner-energized .stop2 {
92 | stop-color: $spinner-energized-fill;
93 | }
94 | &.spinner-royal .stop2 {
95 | stop-color: $spinner-royal-fill;
96 | }
97 | &.spinner-dark .stop2 {
98 | stop-color: $spinner-dark-fill;
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/www/templates/message-detail.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
![]()
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
微信(16)
3 |
4 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 新的朋友
18 |
19 |
20 |
21 |
22 |
23 | 群聊
24 |
25 |
26 |
27 |
28 |
29 | 标签
30 |
31 |
32 |
33 |
34 |
35 | 公众号
36 |
37 |
38 |
39 |
40 | A
41 |
42 |
43 |
46 | 李明
47 |
48 |
49 |
52 | 李明
53 |
54 |
55 |
58 | 李明
59 |
60 |
61 |
62 |
63 | B
64 |
65 |
66 |
69 | 李明
70 |
71 |
72 |
75 | 李明
76 |
77 |
78 |
81 | 李明
82 |
83 |
84 |
85 |
86 | C
87 |
88 |
89 |
92 | 李明
93 |
94 |
95 |
98 | 李明
99 |
100 |
101 |
104 | 李明
105 |
106 |
107 |
108 |
109 |
110 |
141 |
142 | A
143 |
144 |
145 |
146 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_toggle.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Toggle
4 | * --------------------------------------------------
5 | */
6 |
7 | .item-toggle {
8 | pointer-events: none;
9 | }
10 |
11 | .toggle {
12 | // set the color defaults
13 | @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
14 |
15 | position: relative;
16 | display: inline-block;
17 | pointer-events: auto;
18 | margin: -$toggle-hit-area-expansion;
19 | padding: $toggle-hit-area-expansion;
20 |
21 | &.dragging {
22 | .handle {
23 | background-color: $toggle-handle-dragging-bg-color !important;
24 | }
25 | }
26 |
27 | }
28 |
29 | .toggle {
30 | &.toggle-light {
31 | @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
32 | }
33 | &.toggle-stable {
34 | @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
35 | }
36 | &.toggle-positive {
37 | @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
38 | }
39 | &.toggle-calm {
40 | @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
41 | }
42 | &.toggle-assertive {
43 | @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
44 | }
45 | &.toggle-balanced {
46 | @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
47 | }
48 | &.toggle-energized {
49 | @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
50 | }
51 | &.toggle-royal {
52 | @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
53 | }
54 | &.toggle-dark {
55 | @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
56 | }
57 | }
58 |
59 | .toggle input {
60 | // hide the actual input checkbox
61 | display: none;
62 | }
63 |
64 | /* the track appearance when the toggle is "off" */
65 | .toggle .track {
66 | @include transition-timing-function(ease-in-out);
67 | @include transition-duration($toggle-transition-duration);
68 | @include transition-property((background-color, border));
69 |
70 | display: inline-block;
71 | box-sizing: border-box;
72 | width: $toggle-width;
73 | height: $toggle-height;
74 | border: solid $toggle-border-width $toggle-off-border-color;
75 | border-radius: $toggle-border-radius;
76 | background-color: $toggle-off-bg-color;
77 | content: ' ';
78 | cursor: pointer;
79 | pointer-events: none;
80 | }
81 |
82 | /* Fix to avoid background color bleeding */
83 | /* (occured on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
84 | .platform-android4_2 .toggle .track {
85 | -webkit-background-clip: padding-box;
86 | }
87 |
88 | /* the handle (circle) thats inside the toggle's track area */
89 | /* also the handle's appearance when it is "off" */
90 | .toggle .handle {
91 | @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
92 | @include transition-property((background-color, transform));
93 | position: absolute;
94 | display: block;
95 | width: $toggle-handle-width;
96 | height: $toggle-handle-height;
97 | border-radius: $toggle-handle-radius;
98 | background-color: $toggle-handle-off-bg-color;
99 | top: $toggle-border-width + $toggle-hit-area-expansion;
100 | left: $toggle-border-width + $toggle-hit-area-expansion;
101 | box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
102 |
103 | &:before {
104 | // used to create a larger (but hidden) hit area to slide the handle
105 | position: absolute;
106 | top: -4px;
107 | left: ( ($toggle-handle-width / 2) * -1) - 8;
108 | padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
109 | content: " ";
110 | }
111 | }
112 |
113 | .toggle input:checked + .track .handle {
114 | // the handle when the toggle is "on"
115 | @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
116 | background-color: $toggle-handle-on-bg-color;
117 | }
118 |
119 | .item-toggle.active {
120 | box-shadow: none;
121 | }
122 |
123 | .item-toggle,
124 | .item-toggle.item-complex .item-content {
125 | // make sure list item content have enough padding on right to fit the toggle
126 | padding-right: ($item-padding * 3) + $toggle-width;
127 | }
128 |
129 | .item-toggle.item-complex {
130 | padding-right: 0;
131 | }
132 |
133 | .item-toggle .toggle {
134 | // position the toggle to the right within a list item
135 | position: absolute;
136 | top: ($item-padding / 2) + 2;
137 | right: $item-padding;
138 | z-index: $z-index-item-toggle;
139 | }
140 |
141 | .toggle input:disabled + .track {
142 | opacity: .6;
143 | }
144 |
145 | .toggle-small {
146 |
147 | .track {
148 | border: 0;
149 | width: 34px;
150 | height: 15px;
151 | background: #9e9e9e;
152 | }
153 | input:checked + .track {
154 | background: rgba(0,150,137,.5);
155 | }
156 | .handle {
157 | top: 2px;
158 | left: 4px;
159 | width: 21px;
160 | height: 21px;
161 | box-shadow: 0 2px 5px rgba(0,0,0,.25);
162 | }
163 | input:checked + .track .handle {
164 | @include translate3d(16px, 0, 0);
165 | background: rgb(0,150,137);
166 | }
167 | &.item-toggle .toggle {
168 | top: 19px;
169 | }
170 |
171 | .toggle-light {
172 | @include toggle-small-style($toggle-on-light-bg);
173 | }
174 | .toggle-stable {
175 | @include toggle-small-style($toggle-on-stable-bg);
176 | }
177 | .toggle-positive {
178 | @include toggle-small-style($toggle-on-positive-bg);
179 | }
180 | .toggle-calm {
181 | @include toggle-small-style($toggle-on-calm-bg);
182 | }
183 | .toggle-assertive {
184 | @include toggle-small-style($toggle-on-assertive-bg);
185 | }
186 | .toggle-balanced {
187 | @include toggle-small-style($toggle-on-balanced-bg);
188 | }
189 | .toggle-energized {
190 | @include toggle-small-style($toggle-on-energized-bg);
191 | }
192 | .toggle-royal {
193 | @include toggle-small-style($toggle-on-royal-bg);
194 | }
195 | .toggle-dark {
196 | @include toggle-small-style($toggle-on-dark-bg);
197 | }
198 | }
199 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_scaffolding.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Scaffolding
4 | * --------------------------------------------------
5 | */
6 |
7 | *,
8 | *:before,
9 | *:after {
10 | @include box-sizing(border-box);
11 | }
12 |
13 | html {
14 | overflow: hidden;
15 | -ms-touch-action: pan-y;
16 | touch-action: pan-y;
17 | }
18 |
19 | body,
20 | .ionic-body {
21 | @include touch-callout(none);
22 | @include font-smoothing(antialiased);
23 | @include text-size-adjust(none);
24 | @include tap-highlight-transparent();
25 | @include user-select(none);
26 |
27 | top: 0;
28 | right: 0;
29 | bottom: 0;
30 | left: 0;
31 | overflow: hidden;
32 |
33 | margin: 0;
34 | padding: 0;
35 |
36 | color: $base-color;
37 | word-wrap: break-word;
38 | font-size: $font-size-base;
39 | font-family: $font-family-base;
40 | line-height: $line-height-computed;
41 | text-rendering: optimizeLegibility;
42 | -webkit-backface-visibility: hidden;
43 | -webkit-user-drag: none;
44 | -ms-content-zooming: none;
45 | }
46 |
47 | body.grade-b,
48 | body.grade-c {
49 | // disable optimizeLegibility for low end devices
50 | text-rendering: auto;
51 | }
52 |
53 | .content {
54 | // used for content areas not using the content directive
55 | position: relative;
56 | }
57 |
58 | .scroll-content {
59 | position: absolute;
60 | top: 0;
61 | right: 0;
62 | bottom: 0;
63 | left: 0;
64 | overflow: hidden;
65 |
66 | // Hide the top border if any
67 | margin-top: -1px;
68 |
69 | // Prevents any distortion of lines
70 | padding-top: 1px;
71 | margin-bottom: -1px;
72 |
73 | width: auto;
74 | height: auto;
75 | }
76 |
77 | .menu .scroll-content.scroll-content-false{
78 | z-index: $z-index-scroll-content-false;
79 | }
80 |
81 | .scroll-view {
82 | position: relative;
83 | display: block;
84 | overflow: hidden;
85 |
86 | // Hide the top border if any
87 | margin-top: -1px;
88 | }
89 |
90 | /**
91 | * Scroll is the scroll view component available for complex and custom
92 | * scroll view functionality.
93 | */
94 | .scroll {
95 | @include user-select(none);
96 | @include touch-callout(none);
97 | @include text-size-adjust(none);
98 | @include transform-origin(left, top);
99 | }
100 | /**
101 | * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
102 | * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
103 | */
104 | @-ms-viewport { width: device-width; }
105 |
106 | // Scroll bar styles
107 | .scroll-bar {
108 | position: absolute;
109 | z-index: $z-index-scroll-bar;
110 | }
111 | // hide the scroll-bar during animations
112 | .ng-animate .scroll-bar {
113 | visibility: hidden;
114 | }
115 | .scroll-bar-h {
116 | right: 2px;
117 | bottom: 3px;
118 | left: 2px;
119 | height: 3px;
120 |
121 | .scroll-bar-indicator {
122 | height: 100%;
123 | }
124 | }
125 |
126 | .scroll-bar-v {
127 | top: 2px;
128 | right: 3px;
129 | bottom: 2px;
130 | width: 3px;
131 |
132 | .scroll-bar-indicator {
133 | width: 100%;
134 | }
135 | }
136 | .scroll-bar-indicator {
137 | position: absolute;
138 | border-radius: 4px;
139 | background: rgba(0,0,0,0.3);
140 | opacity: 1;
141 | @include transition(opacity .3s linear);
142 |
143 | &.scroll-bar-fade-out {
144 | opacity: 0;
145 | }
146 | }
147 | .platform-android .scroll-bar-indicator {
148 | // android doesn't have rounded ends on scrollbar
149 | border-radius: 0;
150 | }
151 | .grade-b .scroll-bar-indicator,
152 | .grade-c .scroll-bar-indicator {
153 | // disable rgba background and border radius for low end devices
154 | background: #aaa;
155 |
156 | &.scroll-bar-fade-out {
157 | @include transition(none);
158 | }
159 | }
160 |
161 | ion-infinite-scroll {
162 | height: 60px;
163 | width: 100%;
164 | display: block;
165 |
166 | @include display-flex();
167 | @include flex-direction(row);
168 | @include justify-content(center);
169 | @include align-items(center);
170 |
171 | .icon {
172 | color: #666666;
173 | font-size: 30px;
174 | color: $scroll-refresh-icon-color;
175 | }
176 | &:not(.active){
177 | .spinner,
178 | .icon:before{
179 | display:none;
180 | }
181 | }
182 | }
183 |
184 | .overflow-scroll {
185 | overflow-x: hidden;
186 | overflow-y: scroll;
187 | -webkit-overflow-scrolling: touch;
188 | top: 0;
189 | right: 0;
190 | bottom: 0;
191 | left: 0;
192 | position: absolute;
193 |
194 | .scroll {
195 | position: static;
196 | height: 100%;
197 | -webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
198 | }
199 | }
200 |
201 |
202 | // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
203 | // Note: For these to work, content must come after both bars in the markup
204 | /* If you change these, change platform.scss as well */
205 | .has-header {
206 | top: $bar-height;
207 | }
208 | // Force no header
209 | .no-header {
210 | top: 0;
211 | }
212 |
213 | .has-subheader {
214 | top: $bar-height + $bar-subheader-height;
215 | }
216 | .has-tabs-top {
217 | top: $bar-height + $tabs-height;
218 | }
219 | .has-header.has-subheader.has-tabs-top {
220 | top: $bar-height + $bar-subheader-height + $tabs-height;
221 | }
222 |
223 | .has-footer {
224 | bottom: $bar-footer-height;
225 | }
226 | .has-subfooter {
227 | bottom: $bar-footer-height + $bar-subfooter-height;
228 | }
229 |
230 | .has-tabs,
231 | .bar-footer.has-tabs {
232 | bottom: $tabs-height;
233 | &.pane{
234 | bottom: $tabs-height;
235 | height:auto;
236 | }
237 | }
238 |
239 | .has-footer.has-tabs {
240 | bottom: $tabs-height + $bar-footer-height;
241 | }
242 |
243 | // A full screen section with a solid background
244 | .pane {
245 | @include translate3d(0,0,0);
246 | @include transition-duration(0);
247 | z-index: $z-index-pane;
248 | }
249 | .view {
250 | z-index: $z-index-view;
251 | }
252 | .pane,
253 | .view {
254 | position: absolute;
255 | top: 0;
256 | right: 0;
257 | bottom: 0;
258 | left: 0;
259 | width: 100%;
260 | height: 100%;
261 | background-color: $base-background-color;
262 | overflow: hidden;
263 | }
264 | .view-container {
265 | position: absolute;
266 | display: block;
267 | width: 100%;
268 | height: 100%;
269 | }
270 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_util.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Utility Classes
4 | * --------------------------------------------------
5 | */
6 |
7 | .hide {
8 | display: none;
9 | }
10 | .opacity-hide {
11 | opacity: 0;
12 | }
13 | .grade-b .opacity-hide,
14 | .grade-c .opacity-hide {
15 | opacity: 1;
16 | display: none;
17 | }
18 | .show {
19 | display: block;
20 | }
21 | .opacity-show {
22 | opacity: 1;
23 | }
24 | .invisible {
25 | visibility: hidden;
26 | }
27 |
28 | .keyboard-open .hide-on-keyboard-open {
29 | display: none;
30 | }
31 |
32 | .keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
33 | .keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
34 | bottom: 0;
35 | }
36 |
37 | .inline {
38 | display: inline-block;
39 | }
40 |
41 | .disable-pointer-events {
42 | pointer-events: none;
43 | }
44 |
45 | .enable-pointer-events {
46 | pointer-events: auto;
47 | }
48 |
49 | .disable-user-behavior {
50 | // used to prevent the browser from doing its native behavior. this doesnt
51 | // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
52 |
53 | @include user-select(none);
54 | @include touch-callout(none);
55 | @include tap-highlight-transparent();
56 |
57 | -webkit-user-drag: none;
58 |
59 | -ms-touch-action: none;
60 | -ms-content-zooming: none;
61 | }
62 |
63 | // Fill the screen to block clicks (a better pointer-events: none) for the body
64 | // to avoid full-page reflows and paints which can cause flickers
65 | .click-block {
66 | position: absolute;
67 | top: 0;
68 | right: 0;
69 | bottom: 0;
70 | left: 0;
71 | opacity: 0;
72 | z-index: $z-index-click-block;
73 | @include translate3d(0, 0, 0);
74 | overflow: hidden;
75 | }
76 | .click-block-hide {
77 | @include translate3d(-9999px, 0, 0);
78 | }
79 |
80 | .no-resize {
81 | resize: none;
82 | }
83 |
84 | .block {
85 | display: block;
86 | clear: both;
87 | &:after {
88 | display: block;
89 | visibility: hidden;
90 | clear: both;
91 | height: 0;
92 | content: ".";
93 | }
94 | }
95 |
96 | .full-image {
97 | width: 100%;
98 | }
99 |
100 | .clearfix {
101 | *zoom: 1;
102 | &:before,
103 | &:after {
104 | display: table;
105 | content: "";
106 | // Fixes Opera/contenteditable bug:
107 | // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
108 | line-height: 0;
109 | }
110 | &:after {
111 | clear: both;
112 | }
113 | }
114 |
115 | /**
116 | * Content Padding
117 | * --------------------------------------------------
118 | */
119 |
120 | .padding {
121 | padding: $content-padding;
122 | }
123 |
124 | .padding-top,
125 | .padding-vertical {
126 | padding-top: $content-padding;
127 | }
128 |
129 | .padding-right,
130 | .padding-horizontal {
131 | padding-right: $content-padding;
132 | }
133 |
134 | .padding-bottom,
135 | .padding-vertical {
136 | padding-bottom: $content-padding;
137 | }
138 |
139 | .padding-left,
140 | .padding-horizontal {
141 | padding-left: $content-padding;
142 | }
143 |
144 |
145 | /**
146 | * Scrollable iFrames
147 | * --------------------------------------------------
148 | */
149 |
150 | .iframe-wrapper {
151 | position: fixed;
152 | -webkit-overflow-scrolling: touch;
153 | overflow: scroll;
154 |
155 | iframe {
156 | height: 100%;
157 | width: 100%;
158 | }
159 | }
160 |
161 |
162 | /**
163 | * Rounded
164 | * --------------------------------------------------
165 | */
166 |
167 | .rounded {
168 | border-radius: $border-radius-base;
169 | }
170 |
171 |
172 | /**
173 | * Utility Colors
174 | * --------------------------------------------------
175 | * Utility colors are added to help set a naming convention. You'll
176 | * notice we purposely do not use words like "red" or "blue", but
177 | * instead have colors which represent an emotion or generic theme.
178 | */
179 |
180 | .light, a.light {
181 | color: $light;
182 | }
183 | .light-bg {
184 | background-color: $light;
185 | }
186 | .light-border {
187 | border-color: $button-light-border;
188 | }
189 |
190 | .stable, a.stable {
191 | color: $stable;
192 | }
193 | .stable-bg {
194 | background-color: $stable;
195 | }
196 | .stable-border {
197 | border-color: $button-stable-border;
198 | }
199 |
200 | .positive, a.positive {
201 | color: $positive;
202 | }
203 | .positive-bg {
204 | background-color: $positive;
205 | }
206 | .positive-border {
207 | border-color: $button-positive-border;
208 | }
209 |
210 | .calm, a.calm {
211 | color: $calm;
212 | }
213 | .calm-bg {
214 | background-color: $calm;
215 | }
216 | .calm-border {
217 | border-color: $button-calm-border;
218 | }
219 |
220 | .assertive, a.assertive {
221 | color: $assertive;
222 | }
223 | .assertive-bg {
224 | background-color: $assertive;
225 | }
226 | .assertive-border {
227 | border-color: $button-assertive-border;
228 | }
229 |
230 | .balanced, a.balanced {
231 | color: $balanced;
232 | }
233 | .balanced-bg {
234 | background-color: $balanced;
235 | }
236 | .balanced-border {
237 | border-color: $button-balanced-border;
238 | }
239 |
240 | .energized, a.energized {
241 | color: $energized;
242 | }
243 | .energized-bg {
244 | background-color: $energized;
245 | }
246 | .energized-border {
247 | border-color: $button-energized-border;
248 | }
249 |
250 | .royal, a.royal {
251 | color: $royal;
252 | }
253 | .royal-bg {
254 | background-color: $royal;
255 | }
256 | .royal-border {
257 | border-color: $button-royal-border;
258 | }
259 |
260 | .dark, a.dark {
261 | color: $dark;
262 | }
263 | .dark-bg {
264 | background-color: $dark;
265 | }
266 | .dark-border {
267 | border-color: $button-dark-border;
268 | }
269 |
270 | [collection-repeat] {
271 | /* Position is set by transforms */
272 | left: 0 !important;
273 | top: 0 !important;
274 | position: absolute !important;
275 | z-index: 1;
276 | }
277 | .collection-repeat-container {
278 | position: relative;
279 | z-index: 1; //make sure it's above the after-container
280 | }
281 | .collection-repeat-after-container {
282 | z-index: 0;
283 | display: block;
284 |
285 | /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
286 | &.horizontal {
287 | display: inline-block;
288 | }
289 | }
290 |
291 | // ng-show fix for windows phone
292 | // https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
293 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
294 | .x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
295 | display: none !important;
296 | }
--------------------------------------------------------------------------------
/scss/ionic.app.scss:
--------------------------------------------------------------------------------
1 | /*
2 | To customize the look and feel of Ionic, you can override the variables
3 | in ionic's _variables.scss file.
4 |
5 | For example, you might change some of the default colors:
6 |
7 | $light: #fff !default;
8 | $stable: #f8f8f8 !default;
9 | $positive: #387ef5 !default;
10 | $calm: #11c1f3 !default;
11 | $balanced: #33cd5f !default;
12 | $energized: #ffc900 !default;
13 | $assertive: #ef473a !default;
14 | $royal: #886aea !default;
15 | $dark: #444 !default;
16 | */
17 |
18 | // The path for our ionicons font files, relative to the built CSS in www/css
19 | $ionicons-font-path: "../lib/ionic/fonts" !default;
20 | $tabs-striped-border-width: 0;
21 | $item-padding: 10px;
22 | .rj-push-right {
23 | position: absolute;
24 | right: $item-padding;
25 | top: $item-padding;
26 | color: #8c8c8c;
27 | font-size: 13px;
28 | }
29 |
30 | $item-avatar-border-radius: 0;
31 | .item {
32 | .rj-list-p {
33 | font-size: 13px;
34 | color: #6a6a6a;
35 | }
36 | }
37 |
38 | .item.my-popup {
39 | padding: ($item-padding+5px);
40 | padding-left: $item-padding * 2;
41 | }
42 |
43 | $item-default-border: #E8E8E8;
44 | $tabs-default-border: $item-default-border;
45 | .popup-head {
46 | padding: 0 !important;
47 | border-bottom: none !important;
48 | }
49 |
50 | .popup-body {
51 | padding: 0px !important;
52 | overflow: hidden !important;
53 | }
54 |
55 | $popup-width: 85%;
56 | .scroll-bar-indicator {
57 | display: none;
58 | }
59 |
60 | .item > .rj-sm-red-icon {
61 | position: absolute;
62 | display: inline-block;
63 | width: 18px;
64 | height: 18px;
65 | border-radius: 50%;
66 | background-color: #FF0000;
67 | line-height: 18px;
68 | text-align: center;
69 | top: 5px;
70 | left: 40px;
71 | }
72 |
73 | .item > .rj-sm-red-icon > p {
74 | color: #FFF;
75 | font-size: 12px;
76 | }
77 |
78 | .rj-item-top {
79 | background-color: #F1F1F1 !important;
80 | }
81 |
82 | .rj-stable-content {
83 | background-color: #EEE;
84 | }
85 |
86 | .bar-footer {
87 | border-top: 1px solid #EEE !important;
88 | }
89 |
90 | .bar-footer textarea {
91 | resize: none;
92 | height: 21px;
93 | max-height: 100px;
94 | }
95 |
96 | .bar-footer .item-input {
97 | border: none !important;
98 | border-bottom: 1px solid #EEE !important;
99 | }
100 |
101 |
102 | .rj-footer-btn {
103 | position: absolute !important;
104 | bottom: -1px;
105 | right: 5px;
106 | }
107 |
108 | .rj-footer-input{
109 | width: 100%;
110 | }
111 |
112 | .rj-footer-btn-wrap {
113 | position: relative;
114 | height: 100%;
115 | width: 50px;
116 | top: 2px;
117 | }
118 |
119 | .rj-footer-btn-left {
120 | position: absolute !important;
121 | bottom: 0;
122 |
123 | }
124 |
125 | .rj-message-wrap{
126 | padding: 7px;
127 | overflow: auto;
128 | position: relative;
129 | }
130 |
131 | .rj-message-wrap .rj-head-pic,
132 | .rj-message-wrap .rj-head-pic-right{
133 | max-height: 40px;
134 | max-width: 40px;
135 | }
136 | .rj-message-wrap .rj-head-pic{
137 | float: left;
138 | }
139 |
140 | .rj-message-wrap .rj-head-pic-right{
141 | float: right;
142 | }
143 |
144 |
145 | .rj-message-wrap .rj-message,
146 | .rj-message-wrap .rj-message-right{
147 | padding: 6px 8px;
148 | line-height: 26px;
149 | max-width: 190px;
150 | border-radius: 5px;
151 |
152 | }
153 | .rj-message-wrap .rj-message{
154 | float: left;
155 | margin-left: 16px;
156 | background-color: #fff;
157 |
158 | }
159 |
160 | .rj-message-wrap .rj-message-right{
161 | float: right;
162 | margin-right: 16px;
163 | background-color: #6BE00B;
164 |
165 | }
166 | .rj-message-wrap .rj-triangle-left,
167 | .rj-message-wrap .rj-triangle-right{
168 | display: inline-block;
169 | width: 0px;
170 | height: 0px;
171 | position: absolute;
172 | border-width:8px 10px;
173 | border-style: solid;
174 | top:17px;
175 | }
176 |
177 | .rj-message-wrap .rj-triangle-left{
178 | left: 47px;
179 | border-color: transparent #FFF transparent transparent;
180 | }
181 |
182 | .rj-message-wrap .rj-triangle-right{
183 | right: 47px;
184 | border-color: transparent transparent transparent #6BE00B;
185 | }
186 |
187 | .rj-message-time{
188 | width: 42px;
189 | text-align: center;
190 | margin-bottom: 5px;
191 | color: #FFF;
192 | background-color: rgba(0,0,0,.2);
193 | font-size: 12px;
194 | margin-left: auto;
195 | margin-right: auto;
196 | }
197 | .rj-footer-btn-wrap .rj-send-button{
198 | background-color: #1BBB37;
199 | color: #FFF;
200 | height: 30px;
201 | line-height: 30px;
202 | text-align: center;
203 | position: absolute;
204 | bottom: 3px;
205 | width: 38px;
206 | left: 4px;
207 | }
208 |
209 | .rj-list .list{
210 | width: 90%;
211 | margin-left: 10px;
212 | margin-right: auto;
213 | margin-top: -1px;
214 | }
215 |
216 | .rj-list .list .rj-item{
217 | border-left:none;
218 | border-right:none;
219 | border-bottom: none;
220 | padding-left: 0;
221 | padding-top: 6px;
222 | padding-bottom: 6px;
223 | }
224 | .rj-contacts-item{
225 | padding: 0px !important;
226 | }
227 |
228 | .rj-item .rj-contacts-pic{
229 | color:white;
230 | height:36px;
231 | width:36px;
232 | line-height: 36px;
233 | float: left;
234 | font-size: 28px;
235 | text-align: center;
236 | }
237 | .rj-orange-bgc{
238 | background-color:orange;
239 | }
240 | .rj-green-bgc{
241 | background-color: #63db2a;
242 | }
243 | .rj-blue-bgc{
244 | background-color: #2d31ca;
245 | }
246 |
247 | .rj-item h2{
248 | padding-left: 10px;
249 | position: absolute;
250 | margin: auto !important;
251 | top: 0;
252 | bottom: 0;
253 | left: 36px;
254 | height: 32px;
255 | line-height: 32px;
256 | }
257 |
258 | .rj-contacts-pic img{
259 | width: 36px;
260 | height: 36px;
261 | }
262 |
263 | .rj-contacts-index-bar{
264 | background-color: $item-default-border;
265 | padding-left: 10px;
266 | height: 20px;
267 | line-height: 20px;
268 | font-size: 80%;
269 | color: #545454;
270 | }
271 |
272 | .rj-contacts-right-bar{
273 | position: fixed;
274 | right: 0;
275 | // top: 44px;
276 | width: 20px;
277 | height: 464px;
278 | z-index: 2;
279 | text-align: center;
280 | font-size: 80%;
281 | color: #545454;
282 | }
283 | .rj-contacts-right-bar div{
284 | height: 16px;
285 | }
286 | .rj-contacts-middle-bar{
287 | position: fixed;
288 | margin: auto;
289 | left: 0;
290 | top: 0;
291 | right: 0;
292 | bottom: 0;
293 | height: 60px;
294 | width: 60px;
295 | line-height: 60px;
296 | text-align: center;
297 | color: #FFF;
298 | font-size: 300%;
299 | background-color: rgba(0, 0, 0, .5);
300 |
301 | }
302 | // Include all of Ionic
303 | @import "www/lib/ionic/scss/ionic";
304 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_button.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Buttons
4 | * --------------------------------------------------
5 | */
6 |
7 | .button {
8 | // set the color defaults
9 | @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text);
10 |
11 | position: relative;
12 | display: inline-block;
13 | margin: 0;
14 | padding: 0 $button-padding;
15 |
16 | min-width: ($button-padding * 3) + $button-font-size;
17 | min-height: $button-height + 5px;
18 |
19 | border-width: $button-border-width;
20 | border-style: solid;
21 | border-radius: $button-border-radius;
22 |
23 | vertical-align: top;
24 | text-align: center;
25 |
26 | text-overflow: ellipsis;
27 | font-size: $button-font-size;
28 | line-height: $button-height - $button-border-width + 1px;
29 |
30 | cursor: pointer;
31 |
32 | &:after {
33 | // used to create a larger button "hit" area
34 | position: absolute;
35 | top: -6px;
36 | right: -6px;
37 | bottom: -6px;
38 | left: -6px;
39 | content: ' ';
40 | }
41 |
42 | .icon {
43 | vertical-align: top;
44 | pointer-events: none;
45 | }
46 |
47 | .icon:before,
48 | &.icon:before,
49 | &.icon-left:before,
50 | &.icon-right:before {
51 | display: inline-block;
52 | padding: 0 0 $button-border-width 0;
53 | vertical-align: inherit;
54 | font-size: $button-icon-size;
55 | line-height: $button-height - $button-border-width;
56 | pointer-events: none;
57 | }
58 | &.icon-left:before {
59 | float: left;
60 | padding-right: .2em;
61 | padding-left: 0;
62 | }
63 | &.icon-right:before {
64 | float: right;
65 | padding-right: 0;
66 | padding-left: .2em;
67 | }
68 |
69 | &.button-block, &.button-full {
70 | margin-top: $button-block-margin;
71 | margin-bottom: $button-block-margin;
72 | }
73 |
74 | &.button-light {
75 | @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
76 | @include button-clear($button-light-border);
77 | @include button-outline($button-light-border);
78 | }
79 |
80 | &.button-stable {
81 | @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
82 | @include button-clear($button-stable-border);
83 | @include button-outline($button-stable-border);
84 | }
85 |
86 | &.button-positive {
87 | @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
88 | @include button-clear($button-positive-bg);
89 | @include button-outline($button-positive-bg);
90 | }
91 |
92 | &.button-calm {
93 | @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
94 | @include button-clear($button-calm-bg);
95 | @include button-outline($button-calm-bg);
96 | }
97 |
98 | &.button-assertive {
99 | @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
100 | @include button-clear($button-assertive-bg);
101 | @include button-outline($button-assertive-bg);
102 | }
103 |
104 | &.button-balanced {
105 | @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
106 | @include button-clear($button-balanced-bg);
107 | @include button-outline($button-balanced-bg);
108 | }
109 |
110 | &.button-energized {
111 | @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
112 | @include button-clear($button-energized-bg);
113 | @include button-outline($button-energized-bg);
114 | }
115 |
116 | &.button-royal {
117 | @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
118 | @include button-clear($button-royal-bg);
119 | @include button-outline($button-royal-bg);
120 | }
121 |
122 | &.button-dark {
123 | @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
124 | @include button-clear($button-dark-bg);
125 | @include button-outline($button-dark-bg);
126 | }
127 | }
128 |
129 | .button-small {
130 | padding: 2px $button-small-padding 1px;
131 | min-width: $button-small-height;
132 | min-height: $button-small-height + 2;
133 | font-size: $button-small-font-size;
134 | line-height: $button-small-height - $button-border-width - 1;
135 |
136 | .icon:before,
137 | &.icon:before,
138 | &.icon-left:before,
139 | &.icon-right:before {
140 | font-size: $button-small-icon-size;
141 | line-height: $button-small-icon-size + 3;
142 | margin-top: 3px;
143 | }
144 | }
145 |
146 | .button-large {
147 | padding: 0 $button-large-padding;
148 | min-width: ($button-large-padding * 3) + $button-large-font-size;
149 | min-height: $button-large-height + 5;
150 | font-size: $button-large-font-size;
151 | line-height: $button-large-height - $button-border-width;
152 |
153 | .icon:before,
154 | &.icon:before,
155 | &.icon-left:before,
156 | &.icon-right:before {
157 | padding-bottom: ($button-border-width * 2);
158 | font-size: $button-large-icon-size;
159 | line-height: $button-large-height - ($button-border-width * 2) - 1;
160 | }
161 | }
162 |
163 | .button-icon {
164 | @include transition(opacity .1s);
165 | padding: 0 6px;
166 | min-width: initial;
167 | border-color: transparent;
168 | background: none;
169 |
170 | &.button.active,
171 | &.button.activated {
172 | border-color: transparent;
173 | background: none;
174 | box-shadow: none;
175 | opacity: 0.3;
176 | }
177 |
178 | .icon:before,
179 | &.icon:before {
180 | font-size: $button-large-icon-size;
181 | }
182 | }
183 |
184 | .button-clear {
185 | @include button-clear($button-default-border);
186 | @include transition(opacity .1s);
187 | padding: 0 $button-clear-padding;
188 | max-height: $button-height;
189 | border-color: transparent;
190 | background: none;
191 | box-shadow: none;
192 |
193 | &.active,
194 | &.activated {
195 | opacity: 0.3;
196 | }
197 | }
198 |
199 | .button-outline {
200 | @include button-outline($button-default-border);
201 | @include transition(opacity .1s);
202 | background: none;
203 | box-shadow: none;
204 | }
205 |
206 | .padding > .button.button-block:first-child {
207 | margin-top: 0;
208 | }
209 |
210 | .button-block {
211 | display: block;
212 | clear: both;
213 |
214 | &:after {
215 | clear: both;
216 | }
217 | }
218 |
219 | .button-full,
220 | .button-full > .button {
221 | display: block;
222 | margin-right: 0;
223 | margin-left: 0;
224 | border-right-width: 0;
225 | border-left-width: 0;
226 | border-radius: 0;
227 | }
228 |
229 | button.button-block,
230 | button.button-full,
231 | .button-full > button.button,
232 | input.button.button-block {
233 | width: 100%;
234 | }
235 |
236 | a.button {
237 | text-decoration: none;
238 |
239 | .icon:before,
240 | &.icon:before,
241 | &.icon-left:before,
242 | &.icon-right:before {
243 | margin-top: 2px;
244 | }
245 | }
246 |
247 | .button.disabled,
248 | .button[disabled] {
249 | opacity: .4;
250 | cursor: default !important;
251 | pointer-events: none;
252 | }
253 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_form.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Forms
3 | * --------------------------------------------------
4 | */
5 |
6 | // Make all forms have space below them
7 | form {
8 | margin: 0 0 $line-height-base;
9 | }
10 |
11 | // Groups of fields with labels on top (legends)
12 | legend {
13 | display: block;
14 | margin-bottom: $line-height-base;
15 | padding: 0;
16 | width: 100%;
17 | border: $input-border-width solid $input-border;
18 | color: $dark;
19 | font-size: $font-size-base * 1.5;
20 | line-height: $line-height-base * 2;
21 |
22 | small {
23 | color: $stable;
24 | font-size: $line-height-base * .75;
25 | }
26 | }
27 |
28 | // Set font for forms
29 | label,
30 | input,
31 | button,
32 | select,
33 | textarea {
34 | @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
35 | }
36 | input,
37 | button,
38 | select,
39 | textarea {
40 | font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
41 | }
42 |
43 |
44 | // Input List
45 | // -------------------------------
46 |
47 | .item-input {
48 | @include display-flex();
49 | @include align-items(center);
50 | position: relative;
51 | overflow: hidden;
52 | padding: 6px 0 5px 16px;
53 |
54 | input {
55 | @include border-radius(0);
56 | @include flex(1, 220px);
57 | @include appearance(none);
58 | margin: 0;
59 | padding-right: 24px;
60 | background-color: transparent;
61 | }
62 |
63 | .button .icon {
64 | @include flex(0, 0, 24px);
65 | position: static;
66 | display: inline-block;
67 | height: auto;
68 | text-align: center;
69 | font-size: 16px;
70 | }
71 |
72 | .button-bar {
73 | @include border-radius(0);
74 | @include flex(1, 0, 220px);
75 | @include appearance(none);
76 | }
77 |
78 | .icon {
79 | min-width: 14px;
80 | }
81 | }
82 | // prevent flex-shrink on WP
83 | .platform-windowsphone .item-input input{
84 | flex-shrink: 1;
85 | }
86 |
87 | .item-input-inset {
88 | @include display-flex();
89 | @include align-items(center);
90 | position: relative;
91 | overflow: hidden;
92 | padding: ($item-padding / 3) * 2;
93 | }
94 |
95 | .item-input-wrapper {
96 | @include display-flex();
97 | @include flex(1, 0);
98 | @include align-items(center);
99 | @include border-radius(4px);
100 | padding-right: 8px;
101 | padding-left: 8px;
102 | background: #eee;
103 | }
104 |
105 | .item-input-inset .item-input-wrapper input {
106 | padding-left: 4px;
107 | height: 29px;
108 | background: transparent;
109 | line-height: 18px;
110 | }
111 |
112 | .item-input-wrapper ~ .button {
113 | margin-left: ($item-padding / 3) * 2;
114 | }
115 |
116 | .input-label {
117 | display: table;
118 | padding: 7px 10px 7px 0px;
119 | max-width: 200px;
120 | width: 35%;
121 | color: $input-label-color;
122 | font-size: 16px;
123 | }
124 |
125 | .placeholder-icon {
126 | color: #aaa;
127 | &:first-child {
128 | padding-right: 6px;
129 | }
130 | &:last-child {
131 | padding-left: 6px;
132 | }
133 | }
134 |
135 | .item-stacked-label {
136 | display: block;
137 | background-color: transparent;
138 | box-shadow: none;
139 |
140 | .input-label, .icon {
141 | display: inline-block;
142 | padding: 4px 0 0 0px;
143 | vertical-align: middle;
144 | }
145 | }
146 |
147 | .item-stacked-label input,
148 | .item-stacked-label textarea {
149 | @include border-radius(2px);
150 | padding: 4px 8px 3px 0;
151 | border: none;
152 | background-color: $input-bg;
153 | }
154 | .item-stacked-label input {
155 | overflow: hidden;
156 | height: $line-height-computed + $font-size-base + 12px;
157 | }
158 |
159 | .item-floating-label {
160 | display: block;
161 | background-color: transparent;
162 | box-shadow: none;
163 |
164 | .input-label {
165 | position: relative;
166 | padding: 5px 0 0 0;
167 | opacity: 0;
168 | top: 10px;
169 | @include transition(opacity .15s ease-in, top .2s linear);
170 |
171 | &.has-input {
172 | opacity: 1;
173 | top: 0;
174 | @include transition(opacity .15s ease-in, top .2s linear);
175 | }
176 | }
177 | }
178 |
179 |
180 | // Form Controls
181 | // -------------------------------
182 |
183 | // Shared size and type resets
184 | textarea,
185 | input[type="text"],
186 | input[type="password"],
187 | input[type="datetime"],
188 | input[type="datetime-local"],
189 | input[type="date"],
190 | input[type="month"],
191 | input[type="time"],
192 | input[type="week"],
193 | input[type="number"],
194 | input[type="email"],
195 | input[type="url"],
196 | input[type="search"],
197 | input[type="tel"],
198 | input[type="color"] {
199 | display: block;
200 | padding-top: 2px;
201 | padding-left: 0;
202 | height: $line-height-computed + $font-size-base;
203 | color: $input-color;
204 | vertical-align: middle;
205 | font-size: $font-size-base;
206 | line-height: $font-size-base + 2;
207 | }
208 |
209 | .platform-ios,
210 | .platform-android {
211 | input[type="datetime-local"],
212 | input[type="date"],
213 | input[type="month"],
214 | input[type="time"],
215 | input[type="week"] {
216 | padding-top: 8px;
217 | }
218 | }
219 |
220 | .item-input {
221 | input,
222 | textarea {
223 | width: 100%;
224 | }
225 | }
226 |
227 | textarea {
228 | padding-left: 0;
229 | @include placeholder($input-color-placeholder, -3px);
230 | }
231 |
232 | // Reset height since textareas have rows
233 | textarea {
234 | height: auto;
235 | }
236 |
237 | // Everything else
238 | textarea,
239 | input[type="text"],
240 | input[type="password"],
241 | input[type="datetime"],
242 | input[type="datetime-local"],
243 | input[type="date"],
244 | input[type="month"],
245 | input[type="time"],
246 | input[type="week"],
247 | input[type="number"],
248 | input[type="email"],
249 | input[type="url"],
250 | input[type="search"],
251 | input[type="tel"],
252 | input[type="color"] {
253 | border: 0;
254 | }
255 |
256 | // Position radios and checkboxes better
257 | input[type="radio"],
258 | input[type="checkbox"] {
259 | margin: 0;
260 | line-height: normal;
261 | }
262 |
263 | // Reset width of input images, buttons, radios, checkboxes
264 | .item-input {
265 | input[type="file"],
266 | input[type="image"],
267 | input[type="submit"],
268 | input[type="reset"],
269 | input[type="button"],
270 | input[type="radio"],
271 | input[type="checkbox"] {
272 | width: auto; // Override of generic input selector
273 | }
274 | }
275 |
276 | // Set the height of file to match text inputs
277 | input[type="file"] {
278 | line-height: $input-height-base;
279 | }
280 |
281 | // Text input classes to hide text caret during scroll
282 | .previous-input-focus,
283 | .cloned-text-input + input,
284 | .cloned-text-input + textarea {
285 | position: absolute !important;
286 | left: -9999px;
287 | width: 200px;
288 | }
289 |
290 |
291 | // Placeholder
292 | // -------------------------------
293 | input,
294 | textarea {
295 | @include placeholder();
296 | }
297 |
298 |
299 | // DISABLED STATE
300 | // -------------------------------
301 |
302 | // Disabled and read-only inputs
303 | input[disabled],
304 | select[disabled],
305 | textarea[disabled],
306 | input[readonly]:not(.cloned-text-input),
307 | textarea[readonly]:not(.cloned-text-input),
308 | select[readonly] {
309 | background-color: $input-bg-disabled;
310 | cursor: not-allowed;
311 | }
312 | // Explicitly reset the colors here
313 | input[type="radio"][disabled],
314 | input[type="checkbox"][disabled],
315 | input[type="radio"][readonly],
316 | input[type="checkbox"][readonly] {
317 | background-color: transparent;
318 | }
319 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_reset.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Resets
4 | * --------------------------------------------------
5 | * Adapted from normalize.css and some reset.css. We don't care even one
6 | * bit about old IE, so we don't need any hacks for that in here.
7 | *
8 | * There are probably other things we could remove here, as well.
9 | *
10 | * normalize.css v2.1.2 | MIT License | git.io/normalize
11 |
12 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
13 | * http://cssreset.com
14 | */
15 |
16 | html, body, div, span, applet, object, iframe,
17 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18 | a, abbr, acronym, address, big, cite, code,
19 | del, dfn, em, img, ins, kbd, q, s, samp,
20 | small, strike, strong, sub, sup, tt, var,
21 | b, i, u, center,
22 | dl, dt, dd, ol, ul, li,
23 | fieldset, form, label, legend,
24 | table, caption, tbody, tfoot, thead, tr, th, td,
25 | article, aside, canvas, details, embed, fieldset,
26 | figure, figcaption, footer, header, hgroup,
27 | menu, nav, output, ruby, section, summary,
28 | time, mark, audio, video {
29 | margin: 0;
30 | padding: 0;
31 | border: 0;
32 | vertical-align: baseline;
33 | font: inherit;
34 | font-size: 100%;
35 | }
36 |
37 | ol, ul {
38 | list-style: none;
39 | }
40 | blockquote, q {
41 | quotes: none;
42 | }
43 | blockquote:before, blockquote:after,
44 | q:before, q:after {
45 | content: '';
46 | content: none;
47 | }
48 |
49 | /**
50 | * Prevent modern browsers from displaying `audio` without controls.
51 | * Remove excess height in iOS 5 devices.
52 | */
53 |
54 | audio:not([controls]) {
55 | display: none;
56 | height: 0;
57 | }
58 |
59 | /**
60 | * Hide the `template` element in IE, Safari, and Firefox < 22.
61 | */
62 |
63 | [hidden],
64 | template {
65 | display: none;
66 | }
67 |
68 | script {
69 | display: none !important;
70 | }
71 |
72 | /* ==========================================================================
73 | Base
74 | ========================================================================== */
75 |
76 | /**
77 | * 1. Set default font family to sans-serif.
78 | * 2. Prevent iOS text size adjust after orientation change, without disabling
79 | * user zoom.
80 | */
81 |
82 | html {
83 | @include user-select(none);
84 | font-family: sans-serif; /* 1 */
85 | -webkit-text-size-adjust: 100%;
86 | -ms-text-size-adjust: 100%; /* 2 */
87 | -webkit-text-size-adjust: 100%; /* 2 */
88 | }
89 |
90 | /**
91 | * Remove default margin.
92 | */
93 |
94 | body {
95 | margin: 0;
96 | line-height: 1;
97 | }
98 |
99 |
100 | /**
101 | * Remove default outlines.
102 | */
103 | a,
104 | button,
105 | :focus,
106 | a:focus,
107 | button:focus,
108 | a:active,
109 | a:hover {
110 | outline: 0;
111 | }
112 |
113 | /* *
114 | * Remove tap highlight color
115 | */
116 |
117 | a {
118 | -webkit-user-drag: none;
119 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
120 | -webkit-tap-highlight-color: transparent;
121 |
122 | &[href]:hover {
123 | cursor: pointer;
124 | }
125 | }
126 |
127 | /* ==========================================================================
128 | Typography
129 | ========================================================================== */
130 |
131 |
132 | /**
133 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
134 | */
135 |
136 | b,
137 | strong {
138 | font-weight: bold;
139 | }
140 |
141 | /**
142 | * Address styling not present in Safari 5 and Chrome.
143 | */
144 |
145 | dfn {
146 | font-style: italic;
147 | }
148 |
149 | /**
150 | * Address differences between Firefox and other browsers.
151 | */
152 |
153 | hr {
154 | -moz-box-sizing: content-box;
155 | box-sizing: content-box;
156 | height: 0;
157 | }
158 |
159 |
160 | /**
161 | * Correct font family set oddly in Safari 5 and Chrome.
162 | */
163 |
164 | code,
165 | kbd,
166 | pre,
167 | samp {
168 | font-size: 1em;
169 | font-family: monospace, serif;
170 | }
171 |
172 | /**
173 | * Improve readability of pre-formatted text in all browsers.
174 | */
175 |
176 | pre {
177 | white-space: pre-wrap;
178 | }
179 |
180 | /**
181 | * Set consistent quote types.
182 | */
183 |
184 | q {
185 | quotes: "\201C" "\201D" "\2018" "\2019";
186 | }
187 |
188 | /**
189 | * Address inconsistent and variable font size in all browsers.
190 | */
191 |
192 | small {
193 | font-size: 80%;
194 | }
195 |
196 | /**
197 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
198 | */
199 |
200 | sub,
201 | sup {
202 | position: relative;
203 | vertical-align: baseline;
204 | font-size: 75%;
205 | line-height: 0;
206 | }
207 |
208 | sup {
209 | top: -0.5em;
210 | }
211 |
212 | sub {
213 | bottom: -0.25em;
214 | }
215 |
216 | /**
217 | * Define consistent border, margin, and padding.
218 | */
219 |
220 | fieldset {
221 | margin: 0 2px;
222 | padding: 0.35em 0.625em 0.75em;
223 | border: 1px solid #c0c0c0;
224 | }
225 |
226 | /**
227 | * 1. Correct `color` not being inherited in IE 8/9.
228 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
229 | */
230 |
231 | legend {
232 | padding: 0; /* 2 */
233 | border: 0; /* 1 */
234 | }
235 |
236 | /**
237 | * 1. Correct font family not being inherited in all browsers.
238 | * 2. Correct font size not being inherited in all browsers.
239 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
240 | * 4. Remove any default :focus styles
241 | * 5. Make sure webkit font smoothing is being inherited
242 | * 6. Remove default gradient in Android Firefox / FirefoxOS
243 | */
244 |
245 | button,
246 | input,
247 | select,
248 | textarea {
249 | margin: 0; /* 3 */
250 | font-size: 100%; /* 2 */
251 | font-family: inherit; /* 1 */
252 | outline-offset: 0; /* 4 */
253 | outline-style: none; /* 4 */
254 | outline-width: 0; /* 4 */
255 | -webkit-font-smoothing: inherit; /* 5 */
256 | background-image: none; /* 6 */
257 | }
258 |
259 | /**
260 | * Address Firefox 4+ setting `line-height` on `input` using `importnt` in
261 | * the UA stylesheet.
262 | */
263 |
264 | button,
265 | input {
266 | line-height: normal;
267 | }
268 |
269 | /**
270 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 | * All other form control elements do not inherit `text-transform` values.
272 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
273 | * Correct `select` style inheritance in Firefox 4+ and Opera.
274 | */
275 |
276 | button,
277 | select {
278 | text-transform: none;
279 | }
280 |
281 | /**
282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 | * and `video` controls.
284 | * 2. Correct inability to style clickable `input` types in iOS.
285 | * 3. Improve usability and consistency of cursor style between image-type
286 | * `input` and others.
287 | */
288 |
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 | cursor: pointer; /* 3 */
294 | -webkit-appearance: button; /* 2 */
295 | }
296 |
297 | /**
298 | * Re-set default cursor for disabled elements.
299 | */
300 |
301 | button[disabled],
302 | html input[disabled] {
303 | cursor: default;
304 | }
305 |
306 | /**
307 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
308 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
309 | * (include `-moz` to future-proof).
310 | */
311 |
312 | input[type="search"] {
313 | -webkit-box-sizing: content-box; /* 2 */
314 | -moz-box-sizing: content-box;
315 | box-sizing: content-box;
316 | -webkit-appearance: textfield; /* 1 */
317 | }
318 |
319 | /**
320 | * Remove inner padding and search cancel button in Safari 5 and Chrome
321 | * on OS X.
322 | */
323 |
324 | input[type="search"]::-webkit-search-cancel-button,
325 | input[type="search"]::-webkit-search-decoration {
326 | -webkit-appearance: none;
327 | }
328 |
329 | /**
330 | * Remove inner padding and border in Firefox 4+.
331 | */
332 |
333 | button::-moz-focus-inner,
334 | input::-moz-focus-inner {
335 | padding: 0;
336 | border: 0;
337 | }
338 |
339 | /**
340 | * 1. Remove default vertical scrollbar in IE 8/9.
341 | * 2. Improve readability and alignment in all browsers.
342 | */
343 |
344 | textarea {
345 | overflow: auto; /* 1 */
346 | vertical-align: top; /* 2 */
347 | }
348 |
349 |
350 | img {
351 | -webkit-user-drag: none;
352 | }
353 |
354 | /* ==========================================================================
355 | Tables
356 | ========================================================================== */
357 |
358 | /**
359 | * Remove most spacing between table cells.
360 | */
361 |
362 | table {
363 | border-spacing: 0;
364 | border-collapse: collapse;
365 | }
366 |
--------------------------------------------------------------------------------
/www/js/elastic.js:
--------------------------------------------------------------------------------
1 | /*
2 | * angular-elastic v2.5.1
3 | * (c) 2014 Monospaced http://monospaced.com
4 | * License: MIT
5 | */
6 |
7 | if (typeof module !== 'undefined' &&
8 | typeof exports !== 'undefined' &&
9 | module.exports === exports){
10 | module.exports = 'monospaced.elastic';
11 | }
12 |
13 | angular.module('monospaced.elastic', [])
14 |
15 | .constant('msdElasticConfig', {
16 | append: ''
17 | })
18 |
19 | .directive('msdElastic', [
20 | '$timeout', '$window', 'msdElasticConfig',
21 | function($timeout, $window, config) {
22 | 'use strict';
23 |
24 | return {
25 | require: 'ngModel',
26 | restrict: 'A, C',
27 | link: function(scope, element, attrs, ngModel) {
28 |
29 | // cache a reference to the DOM element
30 | var ta = element[0],
31 | $ta = element;
32 |
33 | // ensure the element is a textarea, and browser is capable
34 | if (ta.nodeName !== 'TEXTAREA' || !$window.getComputedStyle) {
35 | return;
36 | }
37 |
38 | // set these properties before measuring dimensions
39 | $ta.css({
40 | 'overflow': 'hidden',
41 | 'overflow-y': 'hidden',
42 | 'word-wrap': 'break-word'
43 | });
44 |
45 | // force text reflow
46 | var text = ta.value;
47 | ta.value = '';
48 | ta.value = text;
49 |
50 | var append = attrs.msdElastic ? attrs.msdElastic.replace(/\\n/g, '\n') : config.append,
51 | $win = angular.element($window),
52 | mirrorInitStyle = 'position: absolute; top: -999px; right: auto; bottom: auto;' +
53 | 'left: 0; overflow: hidden; -webkit-box-sizing: content-box;' +
54 | '-moz-box-sizing: content-box; box-sizing: content-box;' +
55 | 'min-height: 0 !important; height: 0 !important; padding: 0;' +
56 | 'word-wrap: break-word; border: 0;',
57 | $mirror = angular.element('').data('elastic', true),
59 | mirror = $mirror[0],
60 | taStyle = getComputedStyle(ta),
61 | resize = taStyle.getPropertyValue('resize'),
62 | borderBox = taStyle.getPropertyValue('box-sizing') === 'border-box' ||
63 | taStyle.getPropertyValue('-moz-box-sizing') === 'border-box' ||
64 | taStyle.getPropertyValue('-webkit-box-sizing') === 'border-box',
65 | boxOuter = !borderBox ? {width: 0, height: 0} : {
66 | width: parseInt(taStyle.getPropertyValue('border-right-width'), 10) +
67 | parseInt(taStyle.getPropertyValue('padding-right'), 10) +
68 | parseInt(taStyle.getPropertyValue('padding-left'), 10) +
69 | parseInt(taStyle.getPropertyValue('border-left-width'), 10),
70 | height: parseInt(taStyle.getPropertyValue('border-top-width'), 10) +
71 | parseInt(taStyle.getPropertyValue('padding-top'), 10) +
72 | parseInt(taStyle.getPropertyValue('padding-bottom'), 10) +
73 | parseInt(taStyle.getPropertyValue('border-bottom-width'), 10)
74 | },
75 | minHeightValue = parseInt(taStyle.getPropertyValue('min-height'), 10),
76 | heightValue = parseInt(taStyle.getPropertyValue('height'), 10),
77 | minHeight = Math.max(minHeightValue, heightValue) - boxOuter.height,
78 | maxHeight = parseInt(taStyle.getPropertyValue('max-height'), 10),
79 | mirrored,
80 | active,
81 | copyStyle = ['font-family',
82 | 'font-size',
83 | 'font-weight',
84 | 'font-style',
85 | 'letter-spacing',
86 | 'line-height',
87 | 'text-transform',
88 | 'word-spacing',
89 | 'text-indent'];
90 |
91 | // exit if elastic already applied (or is the mirror element)
92 | if ($ta.data('elastic')) {
93 | return;
94 | }
95 |
96 | // Opera returns max-height of -1 if not set
97 | maxHeight = maxHeight && maxHeight > 0 ? maxHeight : 9e4;
98 |
99 | // append mirror to the DOM
100 | if (mirror.parentNode !== document.body) {
101 | angular.element(document.body).append(mirror);
102 | }
103 |
104 | // set resize and apply elastic
105 | $ta.css({
106 | 'resize': (resize === 'none' || resize === 'vertical') ? 'none' : 'horizontal'
107 | }).data('elastic', true);
108 |
109 | /*
110 | * methods
111 | */
112 |
113 | function initMirror() {
114 | var mirrorStyle = mirrorInitStyle;
115 |
116 | mirrored = ta;
117 | // copy the essential styles from the textarea to the mirror
118 | taStyle = getComputedStyle(ta);
119 | angular.forEach(copyStyle, function(val) {
120 | mirrorStyle += val + ':' + taStyle.getPropertyValue(val) + ';';
121 | });
122 | mirror.setAttribute('style', mirrorStyle);
123 | }
124 |
125 | function adjust() {
126 | var taHeight,
127 | taComputedStyleWidth,
128 | mirrorHeight,
129 | width,
130 | overflow;
131 |
132 | if (mirrored !== ta) {
133 | initMirror();
134 | }
135 |
136 | // active flag prevents actions in function from calling adjust again
137 | if (!active) {
138 | active = true;
139 |
140 | mirror.value = ta.value + append; // optional whitespace to improve animation
141 | mirror.style.overflowY = ta.style.overflowY;
142 |
143 | taHeight = ta.style.height === '' ? 'auto' : parseInt(ta.style.height, 10);
144 |
145 | taComputedStyleWidth = getComputedStyle(ta).getPropertyValue('width');
146 |
147 | // ensure getComputedStyle has returned a readable 'used value' pixel width
148 | if (taComputedStyleWidth.substr(taComputedStyleWidth.length - 2, 2) === 'px') {
149 | // update mirror width in case the textarea width has changed
150 | width = parseInt(taComputedStyleWidth, 10) - boxOuter.width;
151 | mirror.style.width = width + 'px';
152 | }
153 |
154 | mirrorHeight = mirror.scrollHeight;
155 |
156 | if (mirrorHeight > maxHeight) {
157 | mirrorHeight = maxHeight;
158 | overflow = 'scroll';
159 | } else if (mirrorHeight < minHeight) {
160 | mirrorHeight = minHeight;
161 | }
162 | mirrorHeight += boxOuter.height;
163 | ta.style.overflowY = overflow || 'hidden';
164 |
165 | if (taHeight !== mirrorHeight) {
166 | scope.$emit('elastic:resize', $ta, taHeight, mirrorHeight);
167 | ta.style.height = mirrorHeight + 'px';
168 | }
169 |
170 | scope.$emit('taResize', $ta);
171 | // small delay to prevent an infinite loop
172 | $timeout(function() {
173 | active = false;
174 | }, 1, false);
175 |
176 | }
177 | }
178 |
179 | function forceAdjust() {
180 | active = false;
181 | adjust();
182 | }
183 |
184 | /*
185 | * initialise
186 | */
187 |
188 | // listen
189 | if ('onpropertychange' in ta && 'oninput' in ta) {
190 | // IE9
191 | ta['oninput'] = ta.onkeyup = adjust;
192 | } else {
193 | ta['oninput'] = adjust;
194 | }
195 |
196 | $win.bind('resize', forceAdjust);
197 |
198 | scope.$watch(function() {
199 | return ngModel.$modelValue;
200 | }, function(newValue) {
201 | forceAdjust();
202 | });
203 |
204 | scope.$on('elastic:adjust', function() {
205 | initMirror();
206 | forceAdjust();
207 | });
208 |
209 | $timeout(adjust, 0, false);
210 |
211 | /*
212 | * destroy
213 | */
214 |
215 | scope.$on('$destroy', function() {
216 | $mirror.remove();
217 | $win.unbind('resize', forceAdjust);
218 | });
219 | }
220 | };
221 | }
222 | ]);
223 |
--------------------------------------------------------------------------------
/www/js/services.js:
--------------------------------------------------------------------------------
1 | angular.module('wechat.services', [])
2 |
3 | .factory("userService", function($http) {
4 | var users = [];
5 | return {
6 | getUsers: function() {
7 | return $http.get("https://randomuser.me/api/?results=10").then(function(response) {
8 | users = response.data.results;
9 | return response.data.results;
10 | });
11 | },
12 | getUser: function(index) {
13 | return users[index];
14 | }
15 | };
16 | })
17 |
18 | .factory('localStorageService', [function() {
19 | return {
20 | get: function localStorageServiceGet(key, defaultValue) {
21 | var stored = localStorage.getItem(key);
22 | try {
23 | stored = angular.fromJson(stored);
24 | } catch (error) {
25 | stored = null;
26 | }
27 | if (defaultValue && stored === null) {
28 | stored = defaultValue;
29 | }
30 | return stored;
31 | },
32 | update: function localStorageServiceUpdate(key, value) {
33 | if (value) {
34 | localStorage.setItem(key, angular.toJson(value));
35 | }
36 | },
37 | clear: function localStorageServiceClear(key) {
38 | localStorage.removeItem(key);
39 | }
40 | };
41 | }])
42 | .factory('dateService', [function() {
43 | return {
44 | handleMessageDate: function(messages) {
45 | var i = 0,
46 | length = 0,
47 | messageDate = {},
48 | nowDate = {},
49 | weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
50 | diffWeekValue = 0;
51 | if (messages) {
52 | nowDate = this.getNowDate();
53 | length = messages.length;
54 | for (i = 0; i < length; i++) {
55 | messageDate = this.getMessageDate(messages[i]);
56 | if(!messageDate){
57 | return null;
58 | }
59 | if (nowDate.year - messageDate.year > 0) {
60 | messages[i].lastMessage.time = messageDate.year + "";
61 | continue;
62 | }
63 | if (nowDate.month - messageDate.month >= 0 ||
64 | nowDate.day - messageDate.day > nowDate.week) {
65 | messages[i].lastMessage.time = messageDate.month +
66 | "月" + messageDate.day + "日";
67 | continue;
68 | }
69 | if (nowDate.day - messageDate.day <= nowDate.week &&
70 | nowDate.day - messageDate.day > 1) {
71 | diffWeekValue = nowDate.week - (nowDate.day - messageDate.day);
72 | messages[i].lastMessage.time = weekArray[diffWeekValue];
73 | continue;
74 | }
75 | if (nowDate.day - messageDate.day === 1) {
76 | messages[i].lastMessage.time = "昨天";
77 | continue;
78 | }
79 | if (nowDate.day - messageDate.day === 0) {
80 | messages[i].lastMessage.time = messageDate.hour + ":" + messageDate.minute;
81 | continue;
82 | }
83 | }
84 | // console.log(messages);
85 | // return messages;
86 | } else {
87 | console.log("messages is null");
88 | return null;
89 | }
90 |
91 | },
92 | getNowDate: function() {
93 | var nowDate = {};
94 | var date = new Date();
95 | nowDate.year = date.getFullYear();
96 | nowDate.month = date.getMonth();
97 | nowDate.day = date.getDate();
98 | nowDate.week = date.getDay();
99 | nowDate.hour = date.getHours();
100 | nowDate.minute = date.getMinutes();
101 | nowDate.second = date.getSeconds();
102 | return nowDate;
103 | },
104 | getMessageDate: function(message) {
105 | var messageDate = {};
106 | var messageTime = "";
107 | //2015-10-12 15:34:55
108 | var reg = /(^\d{4})-(\d{1,2})-(\d{1,2})\s(\d{1,2}):(\d{1,2}):(\d{1,2})/g;
109 | var result = new Array();
110 | if (message) {
111 | messageTime = message.lastMessage.originalTime;
112 | result = reg.exec(messageTime);
113 | if (!result) {
114 | console.log("result is null");
115 | return null;
116 | }
117 | messageDate.year = parseInt(result[1]);
118 | messageDate.month = parseInt(result[2]);
119 | messageDate.day = parseInt(result[3]);
120 | messageDate.hour = parseInt(result[4]);
121 | messageDate.minute = parseInt(result[5]);
122 | messageDate.second = parseInt(result[6]);
123 | // console.log(messageDate);
124 | return messageDate;
125 | } else {
126 | console.log("message is null");
127 | return null;
128 | }
129 | }
130 | };
131 | }])
132 | .factory('messageService', ['localStorageService', 'dateService',
133 | function(localStorageService, dateService) {
134 | return {
135 | init: function(messages) {
136 | var i = 0;
137 | var length = 0;
138 | var messageID = new Array();
139 | var date = null;
140 | var messageDate = null;
141 | if (messages) {
142 | length = messages.length;
143 | for (; i < length; i++) {
144 | messageDate = dateService.getMessageDate(messages[i]);
145 | if(!messageDate){
146 | return null;
147 | }
148 | date = new Date(messageDate.year, messageDate.month,
149 | messageDate.day, messageDate.hour, messageDate.minute,
150 | messageDate.second);
151 | messages[i].lastMessage.timeFrome1970 = date.getTime();
152 | messageID[i] = {
153 | id: messages[i].id
154 | };
155 |
156 | }
157 | localStorageService.update("messageID", messageID);
158 | for (i = 0; i < length; i++) {
159 | localStorageService.update("message_" + messages[i].id, messages[i]);
160 | }
161 | }
162 | },
163 | getAllMessages: function() {
164 | var messages = new Array();
165 | var i = 0;
166 | var messageID = localStorageService.get("messageID");
167 | var length = 0;
168 | var message = null;
169 | if (messageID) {
170 | length = messageID.length;
171 |
172 | for (; i < length; i++) {
173 | message = localStorageService.get("message_" + messageID[i].id);
174 | if(message){
175 | messages.push(message);
176 | }
177 | }
178 | dateService.handleMessageDate(messages);
179 | return messages;
180 | }
181 | return null;
182 |
183 | },
184 | getMessageById: function(id){
185 | return localStorageService.get("message_" + id);
186 | },
187 | getAmountMessageById: function(num, id){
188 | var messages = [];
189 | var message = localStorageService.get("message_" + id).message;
190 | var length = 0;
191 | if(num < 0 || !message) return;
192 | length = message.length;
193 | if(num < length){
194 | messages = message.splice(length - num, length);
195 | return messages;
196 | }else{
197 | return message;
198 | }
199 | },
200 | updateMessage: function(message) {
201 | var id = 0;
202 | if (message) {
203 | id = message.id;
204 | localStorageService.update("message_" + id, message);
205 | }
206 | },
207 | deleteMessageId: function(id){
208 | var messageId = localStorageService.get("messageID");
209 | var length = 0;
210 | var i = 0;
211 | if(!messageId){
212 | return null;
213 | }
214 | length = messageId.length;
215 | for(; i < length; i++){
216 | if(messageId[i].id === id){
217 | messageId.splice(i, 1);
218 | break;
219 | }
220 | }
221 | localStorageService.update("messageID", messageId);
222 | },
223 | clearMessage: function(message) {
224 | var id = 0;
225 | if (message) {
226 | id = message.id;
227 | localStorageService.clear("message_" + id);
228 | }
229 | }
230 | };
231 | }
232 | ])
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_bar.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Bar (Headers and Footers)
4 | * --------------------------------------------------
5 | */
6 |
7 | .bar {
8 | @include display-flex();
9 | @include translate3d(0,0,0);
10 | @include user-select(none);
11 | position: absolute;
12 | right: 0;
13 | left: 0;
14 | z-index: $z-index-bar;
15 |
16 | @include box-sizing(border-box);
17 | padding: $bar-padding-portrait;
18 |
19 | width: 100%;
20 | height: $bar-height;
21 | border-width: 0;
22 | border-style: solid;
23 | border-top: 1px solid transparent;
24 | border-bottom: 1px solid $bar-default-border;
25 |
26 | background-color: $bar-default-bg;
27 |
28 | /* border-width: 1px will actually create 2 device pixels on retina */
29 | /* this nifty trick sets an actual 1px border on hi-res displays */
30 | background-size: 0;
31 | @media (min--moz-device-pixel-ratio: 1.5),
32 | (-webkit-min-device-pixel-ratio: 1.5),
33 | (min-device-pixel-ratio: 1.5),
34 | (min-resolution: 144dpi),
35 | (min-resolution: 1.5dppx) {
36 | border: none;
37 | background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
38 | background-position: bottom;
39 | background-size: 100% 1px;
40 | background-repeat: no-repeat;
41 | }
42 |
43 | &.bar-clear {
44 | border: none;
45 | background: none;
46 | color: #fff;
47 |
48 | .button {
49 | color: #fff;
50 | }
51 | .title {
52 | color: #fff;
53 | }
54 | }
55 |
56 | &.item-input-inset {
57 | .item-input-wrapper {
58 | margin-top: -1px;
59 |
60 | input {
61 | padding-left: 8px;
62 | width: 94%;
63 | height: 28px;
64 | background: transparent;
65 | }
66 | }
67 | }
68 |
69 | &.bar-light {
70 | @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
71 | &.bar-footer{
72 | background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
73 | }
74 | }
75 | &.bar-stable {
76 | @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
77 | &.bar-footer{
78 | background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
79 | }
80 | }
81 | &.bar-positive {
82 | @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
83 | &.bar-footer{
84 | background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
85 | }
86 | }
87 | &.bar-calm {
88 | @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
89 | &.bar-footer{
90 | background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
91 | }
92 | }
93 | &.bar-assertive {
94 | @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
95 | &.bar-footer{
96 | background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
97 | }
98 | }
99 | &.bar-balanced {
100 | @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
101 | &.bar-footer{
102 | background-image: linear-gradient(180deg, $bar-balanced-border, $bar-positive-border 50%, transparent 50%);
103 | }
104 | }
105 | &.bar-energized {
106 | @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
107 | &.bar-footer{
108 | background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
109 | }
110 | }
111 | &.bar-royal {
112 | @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
113 | &.bar-footer{
114 | background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
115 | }
116 | }
117 | &.bar-dark {
118 | @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
119 | &.bar-footer{
120 | background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
121 | }
122 | }
123 |
124 | // Title inside of a bar is centered
125 | .title {
126 | position: absolute;
127 |
128 | top: 0;
129 | right: 0;
130 | left: 0;
131 | z-index: $z-index-bar-title;
132 | overflow: hidden;
133 |
134 | margin: 0 10px;
135 |
136 | min-width: 30px;
137 | height: $bar-height - 1;
138 |
139 | text-align: center;
140 |
141 | // Go into ellipsis if too small
142 | text-overflow: ellipsis;
143 | white-space: nowrap;
144 |
145 | font-size: $bar-title-font-size;
146 | font-weight: $headings-font-weight;
147 |
148 | line-height: $bar-height;
149 |
150 | &.title-left {
151 | text-align: left;
152 | }
153 | &.title-right {
154 | text-align: right;
155 | }
156 | }
157 |
158 | .title a {
159 | color: inherit;
160 | }
161 |
162 | .button {
163 | z-index: $z-index-bar-button;
164 | padding: 0 $button-bar-button-padding;
165 | min-width: initial;
166 | min-height: $button-bar-button-height - 1;
167 | font-weight: 400;
168 | font-size: $button-bar-button-font-size;
169 | line-height: $button-bar-button-height;
170 |
171 | &.button-icon:before,
172 | .icon:before,
173 | &.icon:before,
174 | &.icon-left:before,
175 | &.icon-right:before {
176 | padding-right: 2px;
177 | padding-left: 2px;
178 | font-size: $button-bar-button-icon-size;
179 | line-height: $button-bar-button-height;
180 | }
181 |
182 | &.button-icon {
183 | font-size: $bar-title-font-size;
184 | .icon:before,
185 | &:before,
186 | &.icon-left:before,
187 | &.icon-right:before {
188 | vertical-align: top;
189 | font-size: $button-large-icon-size;
190 | line-height: $button-bar-button-height;
191 | }
192 | }
193 | &.button-clear {
194 | padding-right: 2px;
195 | padding-left: 2px;
196 | font-weight: 300;
197 | font-size: $bar-title-font-size;
198 |
199 | .icon:before,
200 | &.icon:before,
201 | &.icon-left:before,
202 | &.icon-right:before {
203 | font-size: $button-large-icon-size;
204 | line-height: $button-bar-button-height;
205 | }
206 | }
207 |
208 | &.back-button {
209 | display: block;
210 | margin-right: 5px;
211 | padding: 0;
212 | white-space: nowrap;
213 | font-weight: 400;
214 | }
215 |
216 | &.back-button.active,
217 | &.back-button.activated {
218 | opacity: 0.2;
219 | }
220 | }
221 |
222 | .button-bar > .button,
223 | .buttons > .button {
224 | min-height: $button-bar-button-height - 1;
225 | line-height: $button-bar-button-height;
226 | }
227 |
228 | .button-bar + .button,
229 | .button + .button-bar {
230 | margin-left: 5px;
231 | }
232 |
233 | // Android 4.4 messes with the display property
234 | .buttons,
235 | .buttons.primary-buttons,
236 | .buttons.secondary-buttons {
237 | display: inherit;
238 | }
239 | .buttons span {
240 | display: inline-block;
241 | }
242 | .buttons-left span {
243 | margin-right: 5px;
244 | display: inherit;
245 | }
246 | .buttons-right span {
247 | margin-left: 5px;
248 | display: inherit;
249 | }
250 |
251 | // Place the last button in a bar on the right of the bar
252 | .title + .button:last-child,
253 | > .button + .button:last-child,
254 | > .button.pull-right,
255 | .buttons.pull-right,
256 | .title + .buttons {
257 | position: absolute;
258 | top: 5px;
259 | right: 5px;
260 | bottom: 5px;
261 | }
262 |
263 | }
264 |
265 | .platform-android {
266 |
267 | .nav-bar-has-subheader .bar {
268 | background-image: none;
269 | }
270 |
271 | .bar {
272 |
273 | .back-button .icon:before {
274 | font-size: 24px;
275 | }
276 |
277 | .title {
278 | font-size: 19px;
279 | line-height: $bar-height;
280 | }
281 | }
282 |
283 | }
284 |
285 | // Default styles for buttons inside of styled bars
286 | .bar-light {
287 | .button {
288 | @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
289 | @include button-clear($bar-light-text, $bar-title-font-size);
290 | }
291 | }
292 | .bar-stable {
293 | .button {
294 | @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
295 | @include button-clear($bar-stable-text, $bar-title-font-size);
296 | }
297 | }
298 | .bar-positive {
299 | .button {
300 | @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
301 | @include button-clear(#fff, $bar-title-font-size);
302 | }
303 | }
304 | .bar-calm {
305 | .button {
306 | @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
307 | @include button-clear(#fff, $bar-title-font-size);
308 | }
309 | }
310 | .bar-assertive {
311 | .button {
312 | @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
313 | @include button-clear(#fff, $bar-title-font-size);
314 | }
315 | }
316 | .bar-balanced {
317 | .button {
318 | @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
319 | @include button-clear(#fff, $bar-title-font-size);
320 | }
321 | }
322 | .bar-energized {
323 | .button {
324 | @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
325 | @include button-clear(#fff, $bar-title-font-size);
326 | }
327 | }
328 | .bar-royal {
329 | .button {
330 | @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
331 | @include button-clear(#fff, $bar-title-font-size);
332 | }
333 | }
334 | .bar-dark {
335 | .button {
336 | @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
337 | @include button-clear(#fff, $bar-title-font-size);
338 | }
339 | }
340 |
341 | // Header at top
342 | .bar-header {
343 | top: 0;
344 | border-top-width: 0;
345 | border-bottom-width: 1px;
346 | &.has-tabs-top{
347 | border-bottom-width: 0px;
348 | background-image: none;
349 | }
350 | }
351 | .tabs-top .bar-header{
352 | border-bottom-width: 0px;
353 | background-image: none;
354 | }
355 |
356 | // Footer at bottom
357 | .bar-footer {
358 | bottom: 0;
359 | border-top-width: 1px;
360 | border-bottom-width: 0;
361 | background-position: top;
362 |
363 | height: $bar-footer-height;
364 |
365 | &.item-input-inset {
366 | position: absolute;
367 | }
368 | }
369 |
370 | // Don't render padding if the bar is just for tabs
371 | .bar-tabs {
372 | padding: 0;
373 | }
374 |
375 | .bar-subheader {
376 | top: $bar-height;
377 | display: block;
378 |
379 | height: $bar-subheader-height;
380 | }
381 | .bar-subfooter {
382 | bottom: $bar-footer-height;
383 | display: block;
384 |
385 | height: $bar-subfooter-height;
386 | }
387 |
388 | .nav-bar-block {
389 | position: absolute;
390 | top: 0;
391 | right: 0;
392 | left: 0;
393 | z-index: $z-index-bar;
394 | }
395 |
396 | .bar .back-button.hide,
397 | .bar .buttons .hide {
398 | display: none;
399 | }
400 |
401 | .nav-bar-tabs-top .bar {
402 | background-image: none;
403 | }
404 |
405 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_tabs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Tabs
3 | * --------------------------------------------------
4 | * A navigation bar with any number of tab items supported.
5 | */
6 |
7 | .tabs {
8 | @include display-flex();
9 | @include flex-direction(horizontal);
10 | @include justify-content(center);
11 | @include translate3d(0,0,0);
12 |
13 | @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
14 | @include tab-badge-style($tabs-default-text, $tabs-default-bg);
15 |
16 | position: absolute;
17 | bottom: 0;
18 |
19 | z-index: $z-index-tabs;
20 |
21 | width: 100%;
22 | height: $tabs-height;
23 |
24 | border-style: solid;
25 | border-top-width: 1px;
26 |
27 | background-size: 0;
28 | line-height: $tabs-height;
29 |
30 | @media (min--moz-device-pixel-ratio: 1.5),
31 | (-webkit-min-device-pixel-ratio: 1.5),
32 | (min-device-pixel-ratio: 1.5),
33 | (min-resolution: 144dpi),
34 | (min-resolution: 1.5dppx) {
35 | padding-top: 2px;
36 | border-top: none !important;
37 | border-bottom: none;
38 | background-position: top;
39 | background-size: 100% 1px;
40 | background-repeat: no-repeat;
41 | }
42 |
43 | }
44 | /* Allow parent element of tabs to define color, or just the tab itself */
45 | .tabs-light > .tabs,
46 | .tabs.tabs-light {
47 | @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
48 | @include tab-badge-style($tabs-light-text, $tabs-light-bg);
49 | }
50 | .tabs-stable > .tabs,
51 | .tabs.tabs-stable {
52 | @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
53 | @include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
54 | }
55 | .tabs-positive > .tabs,
56 | .tabs.tabs-positive {
57 | @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
58 | @include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
59 | }
60 | .tabs-calm > .tabs,
61 | .tabs.tabs-calm {
62 | @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
63 | @include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
64 | }
65 | .tabs-assertive > .tabs,
66 | .tabs.tabs-assertive {
67 | @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
68 | @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
69 | }
70 | .tabs-balanced > .tabs,
71 | .tabs.tabs-balanced {
72 | @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
73 | @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
74 | }
75 | .tabs-energized > .tabs,
76 | .tabs.tabs-energized {
77 | @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
78 | @include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
79 | }
80 | .tabs-royal > .tabs,
81 | .tabs.tabs-royal {
82 | @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
83 | @include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
84 | }
85 | .tabs-dark > .tabs,
86 | .tabs.tabs-dark {
87 | @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
88 | @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
89 | }
90 |
91 | @mixin tabs-striped($style, $color, $background) {
92 | &.#{$style} {
93 | .tabs{
94 | background-color: $background;
95 | }
96 | .tab-item {
97 | color: rgba($color, $tabs-striped-off-opacity);
98 | opacity: 1;
99 | .badge{
100 | opacity:$tabs-striped-off-opacity;
101 | }
102 | &.tab-item-active,
103 | &.active,
104 | &.activated {
105 | margin-top: -$tabs-striped-border-width;
106 | color: $color;
107 | border-style: solid;
108 | border-width: $tabs-striped-border-width 0 0 0;
109 | border-color: $color;
110 | }
111 | }
112 | }
113 | &.tabs-top{
114 | .tab-item {
115 | &.tab-item-active,
116 | &.active,
117 | &.activated {
118 | .badge {
119 | top: 4%;
120 | }
121 | }
122 | }
123 | }
124 | }
125 |
126 | @mixin tabs-background($style, $color, $border-color) {
127 | .#{$style} {
128 | .tabs,
129 | &> .tabs{
130 | background-color: $color;
131 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
132 | border-color: $border-color;
133 | }
134 | }
135 | }
136 |
137 | @mixin tabs-striped-background($style, $color) {
138 | &.#{$style} {
139 | .tabs {
140 | background-color: $color;
141 | background-image:none;
142 | }
143 | }
144 | }
145 |
146 | @mixin tabs-color($style, $color) {
147 | .#{$style} {
148 | .tab-item {
149 | color: rgba($color, $tabs-off-opacity);
150 | opacity: 1;
151 | .badge{
152 | opacity:$tabs-off-opacity;
153 | }
154 | &.tab-item-active,
155 | &.active,
156 | &.activated {
157 | color: $color;
158 | border: 0 solid $color;
159 | .badge{
160 | opacity: 1;
161 | }
162 | }
163 | }
164 | }
165 | }
166 |
167 | @mixin tabs-striped-color($style, $color) {
168 | &.#{$style} {
169 | .tab-item {
170 | color: rgba($color, $tabs-striped-off-opacity);
171 | opacity: 1;
172 | .badge{
173 | opacity:$tabs-striped-off-opacity;
174 | }
175 | &.tab-item-active,
176 | &.active,
177 | &.activated {
178 | margin-top: -$tabs-striped-border-width;
179 | color: $color;
180 | border: 0 solid $color;
181 | border-top-width: $tabs-striped-border-width;
182 | .badge{
183 | top:$tabs-striped-border-width;
184 | opacity: 1;
185 | }
186 | }
187 | }
188 | }
189 | }
190 |
191 | .tabs-striped {
192 | .tabs {
193 | background-color: white;
194 | background-image: none;
195 | border: none;
196 | border-bottom: 1px solid #ddd;
197 | padding-top: $tabs-striped-border-width;
198 | }
199 | .tab-item {
200 | // default android tab style
201 | &.tab-item-active,
202 | &.active,
203 | &.activated {
204 | margin-top: -$tabs-striped-border-width;
205 | border-style: solid;
206 | border-width: $tabs-striped-border-width 0 0 0;
207 | border-color: $dark;
208 | .badge{
209 | top:$tabs-striped-border-width;
210 | opacity: 1;
211 | }
212 | }
213 | }
214 | @include tabs-striped('tabs-light', $dark, $light);
215 | @include tabs-striped('tabs-stable', $dark, $stable);
216 | @include tabs-striped('tabs-positive', $light, $positive);
217 | @include tabs-striped('tabs-calm', $light, $calm);
218 | @include tabs-striped('tabs-assertive', $light, $assertive);
219 | @include tabs-striped('tabs-balanced', $light, $balanced);
220 | @include tabs-striped('tabs-energized', $light, $energized);
221 | @include tabs-striped('tabs-royal', $light, $royal);
222 | @include tabs-striped('tabs-dark', $light, $dark);
223 |
224 | // doing this twice so striped tabs styles don't override specific bg and color vals
225 | @include tabs-striped-background('tabs-background-light', $light);
226 | @include tabs-striped-background('tabs-background-stable', $stable);
227 | @include tabs-striped-background('tabs-background-positive', $positive);
228 | @include tabs-striped-background('tabs-background-calm', $calm);
229 | @include tabs-striped-background('tabs-background-assertive', $assertive);
230 | @include tabs-striped-background('tabs-background-balanced', $balanced);
231 | @include tabs-striped-background('tabs-background-energized',$energized);
232 | @include tabs-striped-background('tabs-background-royal', $royal);
233 | @include tabs-striped-background('tabs-background-dark', $dark);
234 |
235 | @include tabs-striped-color('tabs-color-light', $light);
236 | @include tabs-striped-color('tabs-color-stable', $stable);
237 | @include tabs-striped-color('tabs-color-positive', $positive);
238 | @include tabs-striped-color('tabs-color-calm', $calm);
239 | @include tabs-striped-color('tabs-color-assertive', $assertive);
240 | @include tabs-striped-color('tabs-color-balanced', $balanced);
241 | @include tabs-striped-color('tabs-color-energized',$energized);
242 | @include tabs-striped-color('tabs-color-royal', $royal);
243 | @include tabs-striped-color('tabs-color-dark', $dark);
244 |
245 | }
246 |
247 | @include tabs-background('tabs-background-light', $light, $bar-light-border);
248 | @include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
249 | @include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
250 | @include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
251 | @include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
252 | @include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
253 | @include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
254 | @include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
255 | @include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
256 |
257 | @include tabs-color('tabs-color-light', $light);
258 | @include tabs-color('tabs-color-stable', $stable);
259 | @include tabs-color('tabs-color-positive', $positive);
260 | @include tabs-color('tabs-color-calm', $calm);
261 | @include tabs-color('tabs-color-assertive', $assertive);
262 | @include tabs-color('tabs-color-balanced', $balanced);
263 | @include tabs-color('tabs-color-energized',$energized);
264 | @include tabs-color('tabs-color-royal', $royal);
265 | @include tabs-color('tabs-color-dark', $dark);
266 |
267 | @mixin tabs-standard-color($style, $color, $off-color:$dark) {
268 | &.#{$style} {
269 | .tab-item {
270 | color: $off-color;
271 | &.tab-item-active,
272 | &.active,
273 | &.activated {
274 | color: $color;
275 | }
276 | }
277 | }
278 | }
279 |
280 | ion-tabs {
281 | @include tabs-standard-color('tabs-color-active-light', $light, $dark);
282 | @include tabs-standard-color('tabs-color-active-stable', $stable, $dark);
283 | @include tabs-standard-color('tabs-color-active-positive', $positive, $dark);
284 | @include tabs-standard-color('tabs-color-active-calm', $calm, $dark);
285 | @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark);
286 | @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark);
287 | @include tabs-standard-color('tabs-color-active-energized',$energized, $dark);
288 | @include tabs-standard-color('tabs-color-active-royal', $royal, $dark);
289 | @include tabs-standard-color('tabs-color-active-dark', $dark, $light);
290 | }
291 |
292 | .tabs-top {
293 | &.tabs-striped {
294 | padding-bottom:0;
295 | .tab-item{
296 | background: transparent;
297 | // animate the top bar, leave bottom for platform consistency
298 | -webkit-transition: color .1s ease;
299 | -moz-transition: color .1s ease;
300 | -ms-transition: color .1s ease;
301 | -o-transition: color .1s ease;
302 | transition: color .1s ease;
303 | &.tab-item-active,
304 | &.active,
305 | &.activated {
306 | margin-top: $tabs-striped-border-width - 1px;
307 | border-width: 0px 0px $tabs-striped-border-width 0px !important;
308 | border-style: solid;
309 | > .badge, > i{
310 | margin-top: -$tabs-striped-border-width + 1px;
311 | }
312 | }
313 | .badge{
314 | -webkit-transition: color .2s ease;
315 | -moz-transition: color .2s ease;
316 | -ms-transition: color .2s ease;
317 | -o-transition: color .2s ease;
318 | transition: color .2s ease;
319 | }
320 | }
321 | &:not(.tabs-icon-left):not(.tabs-icon-top){
322 | .tab-item{
323 | &.tab-item-active,
324 | &.active,
325 | &.activated {
326 | .tab-title, i{
327 | display:block;
328 | margin-top: -$tabs-striped-border-width + 1px;
329 | }
330 | }
331 | }
332 | }
333 | &.tabs-icon-left{
334 | .tab-item{
335 | margin-top: 1px;
336 | &.tab-item-active,
337 | &.active,
338 | &.activated {
339 | .tab-title, i {
340 | margin-top: -0.1em;
341 | }
342 | }
343 | }
344 | }
345 | }
346 | }
347 |
348 | /* Allow parent element to have tabs-top */
349 | /* If you change this, change platform.scss as well */
350 | .tabs-top > .tabs,
351 | .tabs.tabs-top {
352 | top: $bar-height;
353 | padding-top: 0;
354 | background-position: bottom;
355 | border-top-width: 0;
356 | border-bottom-width: 1px;
357 | .tab-item {
358 | &.tab-item-active,
359 | &.active,
360 | &.activated {
361 | .badge {
362 | top: 4%;
363 | }
364 | }
365 | }
366 | }
367 | .tabs-top ~ .bar-header {
368 | border-bottom-width: 0;
369 | }
370 |
371 | .tab-item {
372 | @include flex(1);
373 | display: block;
374 | overflow: hidden;
375 |
376 | max-width: $tab-item-max-width;
377 | height: 100%;
378 |
379 | color: inherit;
380 | text-align: center;
381 | text-decoration: none;
382 | text-overflow: ellipsis;
383 | white-space: nowrap;
384 |
385 | font-weight: 400;
386 | font-size: $tabs-text-font-size;
387 | font-family: $font-family-sans-serif;
388 |
389 | opacity: 0.7;
390 |
391 | &:hover {
392 | cursor: pointer;
393 | }
394 | &.tab-hidden{
395 | display:none;
396 | }
397 | }
398 |
399 | .tabs-item-hide > .tabs,
400 | .tabs.tabs-item-hide {
401 | display: none;
402 | }
403 |
404 | .tabs-icon-top > .tabs .tab-item,
405 | .tabs-icon-top.tabs .tab-item,
406 | .tabs-icon-bottom > .tabs .tab-item,
407 | .tabs-icon-bottom.tabs .tab-item {
408 | font-size: $tabs-text-font-size-side-icon;
409 | line-height: $tabs-text-font-size;
410 | }
411 |
412 | .tab-item .icon {
413 | display: block;
414 | margin: 0 auto;
415 | height: $tabs-icon-size;
416 | font-size: $tabs-icon-size;
417 | }
418 |
419 | .tabs-icon-left.tabs .tab-item,
420 | .tabs-icon-left > .tabs .tab-item,
421 | .tabs-icon-right.tabs .tab-item,
422 | .tabs-icon-right > .tabs .tab-item {
423 | font-size: $tabs-text-font-size-side-icon;
424 |
425 | .icon, .tab-title {
426 | display: inline-block;
427 | vertical-align: top;
428 | margin-top: -.1em;
429 |
430 | &:before {
431 | font-size: $tabs-icon-size - 8;
432 | line-height: $tabs-height;
433 | }
434 | }
435 | }
436 |
437 | .tabs-icon-left > .tabs .tab-item .icon,
438 | .tabs-icon-left.tabs .tab-item .icon {
439 | padding-right: 3px;
440 | }
441 |
442 | .tabs-icon-right > .tabs .tab-item .icon,
443 | .tabs-icon-right.tabs .tab-item .icon {
444 | padding-left: 3px;
445 | }
446 |
447 | .tabs-icon-only > .tabs .icon,
448 | .tabs-icon-only.tabs .icon {
449 | line-height: inherit;
450 | }
451 |
452 |
453 | .tab-item.has-badge {
454 | position: relative;
455 | }
456 |
457 | .tab-item .badge {
458 | position: absolute;
459 | top: 4%;
460 | right: 33%; // fallback
461 | right: calc(50% - 26px);
462 | padding: $tabs-badge-padding;
463 | height: auto;
464 | font-size: $tabs-badge-font-size;
465 | line-height: $tabs-badge-font-size + 4;
466 | }
467 |
468 |
469 | /* Navigational tab */
470 |
471 | /* Active state for tab */
472 | .tab-item.tab-item-active,
473 | .tab-item.active,
474 | .tab-item.activated {
475 | opacity: 1;
476 |
477 | &.tab-item-light {
478 | color: $light;
479 | }
480 | &.tab-item-stable {
481 | color: $stable;
482 | }
483 | &.tab-item-positive {
484 | color: $positive;
485 | }
486 | &.tab-item-calm {
487 | color: $calm;
488 | }
489 | &.tab-item-assertive {
490 | color: $assertive;
491 | }
492 | &.tab-item-balanced {
493 | color: $balanced;
494 | }
495 | &.tab-item-energized {
496 | color: $energized;
497 | }
498 | &.tab-item-royal {
499 | color: $royal;
500 | }
501 | &.tab-item-dark {
502 | color: $dark;
503 | }
504 | }
505 |
506 | .item.tabs {
507 | @include display-flex();
508 | padding: 0;
509 |
510 | .icon:before {
511 | position: relative;
512 | }
513 | }
514 |
515 | .tab-item.disabled,
516 | .tab-item[disabled] {
517 | opacity: .4;
518 | cursor: default;
519 | pointer-events: none;
520 | }
521 |
522 | .nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{
523 | top: 0
524 | }
525 | .pane[hide-nav-bar="true"] .has-tabs-top{
526 | top:49px
527 | }
528 |
529 |
--------------------------------------------------------------------------------
/www/lib/ionic/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 |
2 | // Button Mixins
3 | // --------------------------------------------------
4 |
5 | @mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
6 | border-color: $border-color;
7 | background-color: $bg-color;
8 | color: $color;
9 |
10 | // Give desktop users something to play with
11 | &:hover {
12 | color: $color;
13 | text-decoration: none;
14 | }
15 | &.active,
16 | &.activated {
17 | border-color: $active-border-color;
18 | background-color: $active-bg-color;
19 | box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
20 | }
21 | }
22 |
23 | @mixin button-clear($color, $font-size:"") {
24 | &.button-clear {
25 | border-color: transparent;
26 | background: none;
27 | box-shadow: none;
28 | color: $color;
29 |
30 | @if $font-size != "" {
31 | font-size: $font-size;
32 | }
33 | }
34 | &.button-icon {
35 | border-color: transparent;
36 | background: none;
37 | }
38 | }
39 |
40 | @mixin button-outline($color, $text-color:"") {
41 | &.button-outline {
42 | border-color: $color;
43 | background: transparent;
44 | @if $text-color == "" {
45 | $text-color: $color;
46 | }
47 | color: $text-color;
48 | &.active,
49 | &.activated {
50 | background-color: $color;
51 | box-shadow: none;
52 | color: #fff;
53 | }
54 | }
55 | }
56 |
57 |
58 | // Bar Mixins
59 | // --------------------------------------------------
60 |
61 | @mixin bar-style($bg-color, $border-color, $color) {
62 | border-color: $border-color;
63 | background-color: $bg-color;
64 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
65 | color: $color;
66 |
67 | .title {
68 | color: $color;
69 | }
70 | }
71 |
72 |
73 | // Tab Mixins
74 | // --------------------------------------------------
75 |
76 | @mixin tab-style($bg-color, $border-color, $color) {
77 | border-color: $border-color;
78 | background-color: $bg-color;
79 | background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
80 | color: $color;
81 | }
82 |
83 | @mixin tab-badge-style($bg-color, $color) {
84 | .tab-item .badge {
85 | background-color: $bg-color;
86 | color: $color;
87 | }
88 | }
89 |
90 |
91 | // Item Mixins
92 | // --------------------------------------------------
93 |
94 | @mixin item-style($bg-color, $border-color, $color) {
95 | border-color: $border-color;
96 | background-color: $bg-color;
97 | color: $color;
98 | }
99 |
100 | @mixin item-active-style($active-bg-color, $active-border-color) {
101 | border-color: $active-border-color;
102 | background-color: $active-bg-color;
103 | }
104 |
105 |
106 | // Badge Mixins
107 | // --------------------------------------------------
108 |
109 | @mixin badge-style($bg-color, $color) {
110 | background-color: $bg-color;
111 | color: $color;
112 | }
113 |
114 |
115 | // Range Mixins
116 | // --------------------------------------------------
117 |
118 | @mixin range-style($track-bg-color) {
119 | &::-webkit-slider-thumb:before {
120 | background: $track-bg-color;
121 | }
122 | &::-ms-fill-lower{
123 | background: $track-bg-color;
124 | }
125 | }
126 |
127 |
128 | // Checkbox Mixins
129 | // --------------------------------------------------
130 |
131 | @mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
132 | & input:before,
133 | & .checkbox-icon:before {
134 | border-color: $off-border-color;
135 | }
136 |
137 | // what the background looks like when its checked
138 | & input:checked:before,
139 | & input:checked + .checkbox-icon:before {
140 | background: $on-bg-color;
141 | border-color: $on-border-color;
142 | }
143 | }
144 |
145 |
146 | // Toggle Mixins
147 | // --------------------------------------------------
148 |
149 | @mixin toggle-style($on-border-color, $on-bg-color) {
150 | // the track when the toggle is "on"
151 | & input:checked + .track {
152 | border-color: $on-border-color;
153 | background-color: $on-bg-color;
154 | }
155 | }
156 | @mixin toggle-small-style($on-bg-color) {
157 | // the track when the toggle is "on"
158 | & input:checked + .track {
159 | background-color: rgba($on-bg-color, .5);
160 | }
161 | & input:checked + .track .handle {
162 | background-color: $on-bg-color;
163 | }
164 | }
165 |
166 |
167 | // Clearfix
168 | // --------------------------------------------------
169 |
170 | @mixin clearfix {
171 | *zoom: 1;
172 | &:before,
173 | &:after {
174 | display: table;
175 | content: "";
176 | line-height: 0;
177 | }
178 | &:after {
179 | clear: both;
180 | }
181 | }
182 |
183 |
184 | // Placeholder text
185 | // --------------------------------------------------
186 |
187 | @mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
188 | &::-moz-placeholder { // Firefox 19+
189 | color: $color;
190 | }
191 | &:-ms-input-placeholder {
192 | color: $color;
193 | }
194 | &::-webkit-input-placeholder {
195 | color: $color;
196 | // Safari placeholder margin issue
197 | text-indent: $text-indent;
198 | }
199 | }
200 |
201 |
202 | // Text Mixins
203 | // --------------------------------------------------
204 |
205 | @mixin text-size-adjust($value: none) {
206 | -webkit-text-size-adjust: $value;
207 | -moz-text-size-adjust: $value;
208 | text-size-adjust: $value;
209 | }
210 | @mixin tap-highlight-transparent() {
211 | -webkit-tap-highlight-color: rgba(0,0,0,0);
212 | -webkit-tap-highlight-color: transparent; // For some Androids
213 | }
214 | @mixin touch-callout($value: none) {
215 | -webkit-touch-callout: $value;
216 | }
217 |
218 |
219 | // Font Mixins
220 | // --------------------------------------------------
221 |
222 | @mixin font-family-serif() {
223 | font-family: $serif-font-family;
224 | }
225 | @mixin font-family-sans-serif() {
226 | font-family: $sans-font-family;
227 | }
228 | @mixin font-family-monospace() {
229 | font-family: $mono-font-family;
230 | }
231 | @mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
232 | font-weight: $weight;
233 | font-size: $size;
234 | line-height: $line-height;
235 | }
236 | @mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
237 | @include font-family-serif();
238 | @include font-shorthand($size, $weight, $line-height);
239 | }
240 | @mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
241 | @include font-family-sans-serif();
242 | @include font-shorthand($size, $weight, $line-height);
243 | }
244 | @mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
245 | @include font-family-monospace();
246 | @include font-shorthand($size, $weight, $line-height);
247 | }
248 | @mixin font-smoothing($font-smoothing) {
249 | -webkit-font-smoothing: $font-smoothing;
250 | font-smoothing: $font-smoothing;
251 | }
252 |
253 |
254 | // Appearance
255 | // --------------------------------------------------
256 |
257 | @mixin appearance($val) {
258 | -webkit-appearance: $val;
259 | -moz-appearance: $val;
260 | appearance: $val;
261 | }
262 |
263 |
264 | // Border Radius Mixins
265 | // --------------------------------------------------
266 |
267 | @mixin border-radius($radius) {
268 | -webkit-border-radius: $radius;
269 | border-radius: $radius;
270 | }
271 |
272 | // Single Corner Border Radius
273 | @mixin border-top-left-radius($radius) {
274 | -webkit-border-top-left-radius: $radius;
275 | border-top-left-radius: $radius;
276 | }
277 | @mixin border-top-right-radius($radius) {
278 | -webkit-border-top-right-radius: $radius;
279 | border-top-right-radius: $radius;
280 | }
281 | @mixin border-bottom-right-radius($radius) {
282 | -webkit-border-bottom-right-radius: $radius;
283 | border-bottom-right-radius: $radius;
284 | }
285 | @mixin border-bottom-left-radius($radius) {
286 | -webkit-border-bottom-left-radius: $radius;
287 | border-bottom-left-radius: $radius;
288 | }
289 |
290 | // Single Side Border Radius
291 | @mixin border-top-radius($radius) {
292 | @include border-top-right-radius($radius);
293 | @include border-top-left-radius($radius);
294 | }
295 | @mixin border-right-radius($radius) {
296 | @include border-top-right-radius($radius);
297 | @include border-bottom-right-radius($radius);
298 | }
299 | @mixin border-bottom-radius($radius) {
300 | @include border-bottom-right-radius($radius);
301 | @include border-bottom-left-radius($radius);
302 | }
303 | @mixin border-left-radius($radius) {
304 | @include border-top-left-radius($radius);
305 | @include border-bottom-left-radius($radius);
306 | }
307 |
308 |
309 | // Box shadows
310 | // --------------------------------------------------
311 |
312 | @mixin box-shadow($shadow...) {
313 | -webkit-box-shadow: $shadow;
314 | box-shadow: $shadow;
315 | }
316 |
317 |
318 | // Transition Mixins
319 | // --------------------------------------------------
320 |
321 | @mixin transition($transition...) {
322 | -webkit-transition: $transition;
323 | transition: $transition;
324 | }
325 | @mixin transition-delay($transition-delay) {
326 | -webkit-transition-delay: $transition-delay;
327 | transition-delay: $transition-delay;
328 | }
329 | @mixin transition-duration($transition-duration) {
330 | -webkit-transition-duration: $transition-duration;
331 | transition-duration: $transition-duration;
332 | }
333 | @mixin transition-timing-function($transition-timing) {
334 | -webkit-transition-timing-function: $transition-timing;
335 | transition-timing-function: $transition-timing;
336 | }
337 | @mixin transition-property($property) {
338 | -webkit-transition-property: $property;
339 | transition-property: $property;
340 | }
341 | @mixin transition-transform($properties...) {
342 | // special case cuz of transform vendor prefixes
343 | -webkit-transition: -webkit-transform $properties;
344 | transition: transform $properties;
345 | }
346 |
347 |
348 | // Animation Mixins
349 | // --------------------------------------------------
350 |
351 | @mixin animation($animation) {
352 | -webkit-animation: $animation;
353 | animation: $animation;
354 | }
355 | @mixin animation-duration($duration) {
356 | -webkit-animation-duration: $duration;
357 | animation-duration: $duration;
358 | }
359 | @mixin animation-direction($direction) {
360 | -webkit-animation-direction: $direction;
361 | animation-direction: $direction;
362 | }
363 | @mixin animation-timing-function($animation-timing) {
364 | -webkit-animation-timing-function: $animation-timing;
365 | animation-timing-function: $animation-timing;
366 | }
367 | @mixin animation-fill-mode($fill-mode) {
368 | -webkit-animation-fill-mode: $fill-mode;
369 | animation-fill-mode: $fill-mode;
370 | }
371 | @mixin animation-name($name...) {
372 | -webkit-animation-name: $name;
373 | animation-name: $name;
374 | }
375 | @mixin animation-iteration-count($count) {
376 | -webkit-animation-iteration-count: $count;
377 | animation-iteration-count: $count;
378 | }
379 |
380 |
381 | // Transformation Mixins
382 | // --------------------------------------------------
383 |
384 | @mixin rotate($degrees) {
385 | @include transform( rotate($degrees) );
386 | }
387 | @mixin scale($ratio) {
388 | @include transform( scale($ratio) );
389 | }
390 | @mixin translate($x, $y) {
391 | @include transform( translate($x, $y) );
392 | }
393 | @mixin skew($x, $y) {
394 | @include transform( skew($x, $y) );
395 | -webkit-backface-visibility: hidden;
396 | }
397 | @mixin translate3d($x, $y, $z) {
398 | @include transform( translate3d($x, $y, $z) );
399 | }
400 | @mixin translateZ($z) {
401 | @include transform( translateZ($z) );
402 | }
403 | @mixin transform($val) {
404 | -webkit-transform: $val;
405 | transform: $val;
406 | }
407 |
408 | @mixin transform-origin($left, $top) {
409 | -webkit-transform-origin: $left $top;
410 | transform-origin: $left $top;
411 | }
412 |
413 |
414 | // Backface visibility
415 | // --------------------------------------------------
416 | // Prevent browsers from flickering when using CSS 3D transforms.
417 | // Default value is `visible`, but can be changed to `hidden
418 |
419 | @mixin backface-visibility($visibility){
420 | -webkit-backface-visibility: $visibility;
421 | backface-visibility: $visibility;
422 | }
423 |
424 |
425 | // Background clipping
426 | // --------------------------------------------------
427 |
428 | @mixin background-clip($clip) {
429 | -webkit-background-clip: $clip;
430 | background-clip: $clip;
431 | }
432 |
433 |
434 | // Background sizing
435 | // --------------------------------------------------
436 |
437 | @mixin background-size($size) {
438 | -webkit-background-size: $size;
439 | background-size: $size;
440 | }
441 |
442 |
443 | // Box sizing
444 | // --------------------------------------------------
445 |
446 | @mixin box-sizing($boxmodel) {
447 | -webkit-box-sizing: $boxmodel;
448 | -moz-box-sizing: $boxmodel;
449 | box-sizing: $boxmodel;
450 | }
451 |
452 |
453 | // User select
454 | // --------------------------------------------------
455 |
456 | @mixin user-select($select) {
457 | -webkit-user-select: $select;
458 | -moz-user-select: $select;
459 | -ms-user-select: $select;
460 | user-select: $select;
461 | }
462 |
463 |
464 | // Content Columns
465 | // --------------------------------------------------
466 |
467 | @mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
468 | -webkit-column-count: $columnCount;
469 | -moz-column-count: $columnCount;
470 | column-count: $columnCount;
471 | -webkit-column-gap: $columnGap;
472 | -moz-column-gap: $columnGap;
473 | column-gap: $columnGap;
474 | }
475 |
476 |
477 | // Flexbox Mixins
478 | // --------------------------------------------------
479 | // http://philipwalton.github.io/solved-by-flexbox/
480 | // https://github.com/philipwalton/solved-by-flexbox
481 |
482 | @mixin display-flex {
483 | display: -webkit-box;
484 | display: -webkit-flex;
485 | display: -moz-box;
486 | display: -moz-flex;
487 | display: -ms-flexbox;
488 | display: flex;
489 | }
490 |
491 | @mixin display-inline-flex {
492 | display: -webkit-inline-box;
493 | display: -webkit-inline-flex;
494 | display: -moz-inline-flex;
495 | display: -ms-inline-flexbox;
496 | display: inline-flex;
497 | }
498 |
499 | @mixin flex-direction($value: row) {
500 | @if $value == row-reverse {
501 | -webkit-box-direction: reverse;
502 | -webkit-box-orient: horizontal;
503 | } @else if $value == column {
504 | -webkit-box-direction: normal;
505 | -webkit-box-orient: vertical;
506 | } @else if $value == column-reverse {
507 | -webkit-box-direction: reverse;
508 | -webkit-box-orient: vertical;
509 | } @else {
510 | -webkit-box-direction: normal;
511 | -webkit-box-orient: horizontal;
512 | }
513 | -webkit-flex-direction: $value;
514 | -moz-flex-direction: $value;
515 | -ms-flex-direction: $value;
516 | flex-direction: $value;
517 | }
518 |
519 | @mixin flex-wrap($value: nowrap) {
520 | // No Webkit Box fallback.
521 | -webkit-flex-wrap: $value;
522 | -moz-flex-wrap: $value;
523 | @if $value == nowrap {
524 | -ms-flex-wrap: none;
525 | } @else {
526 | -ms-flex-wrap: $value;
527 | }
528 | flex-wrap: $value;
529 | }
530 |
531 | @mixin flex($fg: 1, $fs: null, $fb: null) {
532 | -webkit-box-flex: $fg;
533 | -webkit-flex: $fg $fs $fb;
534 | -moz-box-flex: $fg;
535 | -moz-flex: $fg $fs $fb;
536 | -ms-flex: $fg $fs $fb;
537 | flex: $fg $fs $fb;
538 | }
539 |
540 | @mixin flex-flow($values: (row nowrap)) {
541 | // No Webkit Box fallback.
542 | -webkit-flex-flow: $values;
543 | -moz-flex-flow: $values;
544 | -ms-flex-flow: $values;
545 | flex-flow: $values;
546 | }
547 |
548 | @mixin align-items($value: stretch) {
549 | @if $value == flex-start {
550 | -webkit-box-align: start;
551 | -ms-flex-align: start;
552 | } @else if $value == flex-end {
553 | -webkit-box-align: end;
554 | -ms-flex-align: end;
555 | } @else {
556 | -webkit-box-align: $value;
557 | -ms-flex-align: $value;
558 | }
559 | -webkit-align-items: $value;
560 | -moz-align-items: $value;
561 | align-items: $value;
562 | }
563 |
564 | @mixin align-self($value: auto) {
565 | -webkit-align-self: $value;
566 | -moz-align-self: $value;
567 | @if $value == flex-start {
568 | -ms-flex-item-align: start;
569 | } @else if $value == flex-end {
570 | -ms-flex-item-align: end;
571 | } @else {
572 | -ms-flex-item-align: $value;
573 | }
574 | align-self: $value;
575 | }
576 |
577 | @mixin align-content($value: stretch) {
578 | -webkit-align-content: $value;
579 | -moz-align-content: $value;
580 | @if $value == flex-start {
581 | -ms-flex-line-pack: start;
582 | } @else if $value == flex-end {
583 | -ms-flex-line-pack: end;
584 | } @else {
585 | -ms-flex-line-pack: $value;
586 | }
587 | align-content: $value;
588 | }
589 |
590 | @mixin justify-content($value: stretch) {
591 | @if $value == flex-start {
592 | -webkit-box-pack: start;
593 | -ms-flex-pack: start;
594 | } @else if $value == flex-end {
595 | -webkit-box-pack: end;
596 | -ms-flex-pack: end;
597 | } @else if $value == space-between {
598 | -webkit-box-pack: justify;
599 | -ms-flex-pack: justify;
600 | } @else {
601 | -webkit-box-pack: $value;
602 | -ms-flex-pack: $value;
603 | }
604 | -webkit-justify-content: $value;
605 | -moz-justify-content: $value;
606 | justify-content: $value;
607 | }
608 |
609 | @mixin flex-order($n) {
610 | -webkit-order: $n;
611 | -ms-flex-order: $n;
612 | order: $n;
613 | -webkit-box-ordinal-group: $n;
614 | }
615 |
616 | @mixin responsive-grid-break($selector, $max-width) {
617 | @media (max-width: $max-width) {
618 | #{$selector} {
619 | -webkit-box-direction: normal;
620 | -moz-box-direction: normal;
621 | -webkit-box-orient: vertical;
622 | -moz-box-orient: vertical;
623 | -webkit-flex-direction: column;
624 | -ms-flex-direction: column;
625 | flex-direction: column;
626 |
627 | .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
628 | @include flex(1);
629 | margin-bottom: ($grid-padding-width * 3) / 2;
630 | margin-left: 0;
631 | max-width: 100%;
632 | width: 100%;
633 | }
634 | }
635 | }
636 | }
637 |
--------------------------------------------------------------------------------
45 |