aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/bluemoon/tabs.reel
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-06-20 16:48:34 -0700
committerJose Antonio Marquez2012-06-20 16:48:34 -0700
commit4eff115126ab946c5852d787fd596e07b156c9a5 (patch)
treef7d45b260f2fb5ba5dc4d1879076ca032d5ae2e6 /node_modules/montage/ui/bluemoon/tabs.reel
parent7615da5c6ba54bd082eac4b8a6d9196084e5c590 (diff)
parent392a559e90357d48c910a07617261483b2b45476 (diff)
downloadninja-4eff115126ab946c5852d787fd596e07b156c9a5.tar.gz
Merge branch 'refs/heads/Ninja-Internal' into Color
Diffstat (limited to 'node_modules/montage/ui/bluemoon/tabs.reel')
-rwxr-xr-xnode_modules/montage/ui/bluemoon/tabs.reel/tabs.css126
-rwxr-xr-xnode_modules/montage/ui/bluemoon/tabs.reel/tabs.html66
-rwxr-xr-xnode_modules/montage/ui/bluemoon/tabs.reel/tabs.js180
3 files changed, 372 insertions, 0 deletions
diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css
new file mode 100755
index 00000000..e3615a9b
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.css
@@ -0,0 +1,126 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6.montage-tabs {
7 position: relative;
8 display: inline-block;
9 border-radius: 26px;
10
11 background-color: #ccc;
12 -webkit-box-shadow: rgba(255, 255, 255, .7) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px;
13}
14
15.montage-tabs-indicator {
16 position: absolute;
17 left: 0;
18 top: 0;
19 height: 48px;
20 margin: 2px;
21 padding: 0px 10px;
22 border-radius: 24px;
23 background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6));
24 -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px;
25
26}
27
28.montage-tabs-list {
29 padding: 0;
30 margin: 0;
31 position: relative;
32}
33
34.montage-tabs-list li {
35 display: inline-block;
36 line-height: 46px;
37 margin: 3px;
38 padding: 0 10px;
39 border-radius: 26px;
40 font-family: 'AGBuchBQRegular', Helvetica, sans-serif;
41 font-size: 18px;
42 color: #555;
43 text-align: center;
44 white-space: nowrap;
45 overflow: hidden;
46 text-overflow: ellipsis;
47
48 cursor: pointer;
49}
50
51.montage-tabs-list li.selected {
52 color: #333;
53 background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #fff), color-stop(100%, #e6e6e6));
54 padding: 0 10px;
55 -webkit-box-shadow: rgba(0, 0, 0, .3) 0 1px 3px;
56}
57
58.montage-tabs-list li img {
59 margin-bottom: -2px; /* based on 16px icons */
60 opacity: .5;
61}
62
63.montage-tabs-list li.selected img {
64 opacity: 1;
65}
66
67.montage-tabs-list li span {
68 margin: 0;
69 padding: 0;
70 margin: 0;
71 padding: 0;
72 border: 0;
73 font-size: 100%;
74 font: inherit;
75 vertical-align: baseline;
76}
77
78/* states */
79
80.montage-tabs-list li.pressed {
81 background-color: #aaa;
82 -webkit-box-shadow: rgba(255, 255, 255, .2) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px;
83 -webkit-transition: background-color .15s ease-out;
84}
85
86/* ----------------------- Small ----------------------- */
87
88/* tab width: 70px */
89
90.montage-tabs.small .montage-tabs-indicator {
91 height: 27px;
92}
93
94.montage-tabs.small .montage-tabs-list li {
95 padding: 0 10px;
96 line-height: 25px;
97
98 font-size: 12px;
99}
100
101/* ----------------------- Dark theme ----------------------- */
102
103.montage-tabs.dark {
104 background-color: #404040;
105 -webkit-box-shadow: rgba(255, 255, 255, .25) 0 1px 0, inset rgba(0, 0, 0, .3) 0 1px 3px;
106}
107
108.montage-tabs.dark .montage-tabs-indicator {
109 background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #767676), color-stop(100%, #5c5c5c));
110
111}
112
113.montage-tabs.dark .montage-tabs-list li {
114 color: #bbb;
115}
116
117.montage-tabs.dark .montage-tabs-list li.selected {
118 color: #333;
119}
120
121/* states */
122
123.montage-tabs.dark .montage-tabs-list li.pressed {
124 background-color: #333;
125 -webkit-box-shadow: rgba(255, 255, 255, .05) 0 1px 0, inset rgba(0, 0, 0, .1) 0 2px 5px;
126}
diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html
new file mode 100755
index 00000000..9beda2b0
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.html
@@ -0,0 +1,66 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta charset="utf-8">
10 <link rel="stylesheet" href="tabs.css">
11 <script type="text/montage-serialization">
12{
13 "navController": {
14 "prototype": "ui/controller/array-controller",
15 "properties": {
16 "selectObjectsOnAddition": true,
17 "automaticallyOrganizeObjects": true
18 },
19 "bindings": {
20 "content": {"<-": "@owner.tabs"}
21 }
22 },
23
24 "repetition1": {
25 "prototype": "ui/repetition.reel",
26 "properties": {
27 "element": {
28 "#": "tab-list"
29 },
30 "isSelectionEnabled": true,
31 "contentController": {"@": "navController"}
32 }
33 },
34
35 "owner": {
36 "prototype": "ui/tabs.reel",
37 "properties": {
38 "element": {
39 "#": "tabs-nav"
40 },
41 "navController": {
42 "@": "navController"
43 },
44 "_repetition": {
45 "@": "repetition1"
46 },
47 "_indicator": {
48 "#": "montage-tabs-indicator"
49 }
50 },
51 "bindings": {
52 "selectedTabs": {"<-": "@navController.selectedObjects"}
53 }
54 }
55}
56 </script>
57</head>
58<body>
59 <div data-montage-id='tabs-nav' class='montage-tabs montage-container'>
60 <div data-montage-id="montage-tabs-indicator" class="montage-tabs-indicator" style="display: none;"></div>
61 <ul data-montage-id="tab-list" class='montage-tabs-list montage-clearfix'>
62 <li></li>
63 </ul>
64 </div>
65</body>
66</html> \ No newline at end of file
diff --git a/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js
new file mode 100755
index 00000000..4836e455
--- /dev/null
+++ b/node_modules/montage/ui/bluemoon/tabs.reel/tabs.js
@@ -0,0 +1,180 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6/**
7 @module "montage/ui/tabs.reel"
8 @requires montage/core/core
9 @requires montage/ui/component
10 @requires "montage/ui/repetition.reel"
11 @requires "montage/ui/substitution.reel"
12 @requires "montage/ui/dynamic-text.reel"
13 @requires "montage/ui/image.reel"
14 @requires montage/core/uuid
15*/
16var Montage = require("montage").Montage,
17 Component = require("ui/component").Component,
18 Repetition = require("ui/repetition.reel").Repetition,
19 Substitution = require("ui/substitution.reel").Substitution,
20 DynamicText = require("ui/dy