aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/tabs.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /node_modules/montage/ui/tabs.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'node_modules/montage/ui/tabs.reel')
-rwxr-xr-xnode_modules/montage/ui/tabs.reel/tabs.css126
-rwxr-xr-xnode_modules/montage/ui/tabs.reel/tabs.html80
-rwxr-xr-xnode_modules/montage/ui/tabs.reel/tabs.js177
3 files changed, 383 insertions, 0 deletions
diff --git a/node_modules/montage/ui/tabs.reel/tabs.css b/node_modules/montage/ui/tabs.reel/tabs.css
new file mode 100755
index 00000000..e3615a9b
--- /dev/null
+++ b/node_modules/montage/ui/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/tabs.reel/tabs.html b/node_modules/montage/ui/tabs.reel/tabs.html
new file mode 100755
index 00000000..ad51e254
--- /dev/null
+++ b/node_modules/montage/ui/tabs.reel/tabs.html
@@ -0,0 +1,80 @@
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 <title></title>
10 <link rel="stylesheet" type="text/css" href="tabs.css">
11 <script type="text/montage-serialization">
12{
13 "navController": {
14 "name": "ArrayController",
15 "module": "montage/ui/controller/array-controller",
16 "properties": {
17 "selectObjectsOnAddition": true,
18 "automaticallyOrganizeObjects": true
19 },
20 "bindings": {
21 "content": {
22 "boundObject": {"@": "owner"},
23 "boundObjectPropertyPath": "tabs",
24 "oneway": true
25 }
26 }
27 },
28
29 "repetition1": {
30 "module": "montage/ui/repetition.reel",
31 "name": "Repetition",
32 "properties": {
33 "element": {
34 "#": "tab-list"
35 },
36 "isSelectionEnabled": true,
37 "contentController": {"@": "navController"}
38 }
39 },
40
41 "owner": {
42 "module": "montage/ui/tabs.reel",
43 "name": "Tabs",
44 "properties": {
45 "element": {
46 "#": "tabs-nav"
47 },
48 "navController": {
49 "@": "navController"
50 },
51 "_repetition": {
52 "@": "repetition1"
53 },
54 "_indicator": {
55 "#": "montage-tabs-indicator"
56 }
57 },
58 "bindings": {
59 "selectedTabs": {
60 "boundObject": {"@": "navController"},
61 "boundObjectPropertyPath": "selectedObjects",
62 "oneway": true
63 }
64 }
65 }
66}
67 </script>
68
69 </head>
70<body>
71
72 <div id='tabs-nav' class='montage-tabs montage-container'>
73 <div id="montage-tabs-indicator" class="montage-tabs-indicator" style="display: none;"></div>
74 <ul id="tab-list" class='montage-tabs-list montage-clearfix'>
75 <li></li>
76 </ul>
77 </div>
78
79</body>
80</html>
diff --git a/node_modules/montage/ui/tabs.reel/tabs.js b/node_modules/montage/ui/tabs.reel/tabs.js
new file mode 100755
index 00000000..60b18480
--- /dev/null
+++ b/node_modules/montage/ui/tabs.reel/tabs.js
@@ -0,0 +1,177 @@
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*/