Browse Source

This is the file with the calendar, events are modified in the calendar_files/js/events.js file

carlos.diaz44 4 years ago
parent
commit
9554657fa7
100 changed files with 0 additions and 40165 deletions
  1. 0
    1466
      Searchbar/onsenui/CHANGELOG.md
  2. 0
    202
      Searchbar/onsenui/LICENSE
  3. 0
    110
      Searchbar/onsenui/README.md
  4. 0
    26
      Searchbar/onsenui/bower.json
  5. 0
    33
      Searchbar/onsenui/css-components-src/README.md
  6. 0
    276
      Searchbar/onsenui/css-components-src/gulpfile.js
  7. BIN
      Searchbar/onsenui/css-components-src/misc/screenshot-01.png
  8. BIN
      Searchbar/onsenui/css-components-src/misc/screenshot-02.png
  9. 0
    48
      Searchbar/onsenui/css-components-src/package.json
  10. 0
    376
      Searchbar/onsenui/css-components-src/patterns.yaml
  11. 0
    64
      Searchbar/onsenui/css-components-src/previewer-src/app.js
  12. 0
    190
      Searchbar/onsenui/css-components-src/previewer-src/components/app-page.js
  13. 0
    36
      Searchbar/onsenui/css-components-src/previewer-src/components/category-page.js
  14. 0
    32
      Searchbar/onsenui/css-components-src/previewer-src/components/component-page.js
  15. 0
    68
      Searchbar/onsenui/css-components-src/previewer-src/components/components-page.js
  16. 0
    9
      Searchbar/onsenui/css-components-src/previewer-src/components/notfound-page.js
  17. 0
    33
      Searchbar/onsenui/css-components-src/previewer-src/components/pattern-page.js
  18. 0
    49
      Searchbar/onsenui/css-components-src/previewer-src/components/patterns-page.js
  19. 0
    25
      Searchbar/onsenui/css-components-src/previewer-src/components/platform-select.js
  20. 0
    30
      Searchbar/onsenui/css-components-src/previewer-src/components/preview-component.js
  21. 0
    48
      Searchbar/onsenui/css-components-src/previewer-src/components/theme-select.js
  22. 0
    32
      Searchbar/onsenui/css-components-src/previewer-src/index.html.eco
  23. 0
    13
      Searchbar/onsenui/css-components-src/previewer-src/select-icon.svg
  24. 0
    313
      Searchbar/onsenui/css-components-src/previewer-src/style.css
  25. 0
    31
      Searchbar/onsenui/css-components-src/previewer-src/util.js
  26. 0
    229
      Searchbar/onsenui/css-components-src/src/components/action-sheet.css
  27. 0
    328
      Searchbar/onsenui/css-components-src/src/components/alert-dialog.css
  28. 0
    115
      Searchbar/onsenui/css-components-src/src/components/button-bar.css
  29. 0
    436
      Searchbar/onsenui/css-components-src/src/components/button.css
  30. 0
    102
      Searchbar/onsenui/css-components-src/src/components/card.css
  31. 0
    331
      Searchbar/onsenui/css-components-src/src/components/checkbox.css
  32. 0
    86
      Searchbar/onsenui/css-components-src/src/components/combination.css
  33. 0
    79
      Searchbar/onsenui/css-components-src/src/components/dialog.css
  34. 0
    256
      Searchbar/onsenui/css-components-src/src/components/fab.css
  35. 0
    83
      Searchbar/onsenui/css-components-src/src/components/global.css
  36. 0
    32
      Searchbar/onsenui/css-components-src/src/components/index.css
  37. 0
    1044
      Searchbar/onsenui/css-components-src/src/components/list.css
  38. 0
    41
      Searchbar/onsenui/css-components-src/src/components/modal.css
  39. 0
    68
      Searchbar/onsenui/css-components-src/src/components/notification.css
  40. 0
    105
      Searchbar/onsenui/css-components-src/src/components/page.css
  41. 0
    197
      Searchbar/onsenui/css-components-src/src/components/popover.css
  42. 0
    150
      Searchbar/onsenui/css-components-src/src/components/progress-bar.css
  43. 0
    135
      Searchbar/onsenui/css-components-src/src/components/progress-circular.css
  44. 0
    246
      Searchbar/onsenui/css-components-src/src/components/radio-button.css
  45. 0
    245
      Searchbar/onsenui/css-components-src/src/components/range.css
  46. 0
    96
      Searchbar/onsenui/css-components-src/src/components/search-input.css
  47. 0
    176
      Searchbar/onsenui/css-components-src/src/components/segment.css
  48. 0
    203
      Searchbar/onsenui/css-components-src/src/components/select.css
  49. 0
    224
      Searchbar/onsenui/css-components-src/src/components/switch.css
  50. 0
    523
      Searchbar/onsenui/css-components-src/src/components/tabbar.css
  51. 0
    189
      Searchbar/onsenui/css-components-src/src/components/text-input.css
  52. 0
    79
      Searchbar/onsenui/css-components-src/src/components/textarea.css
  53. 0
    88
      Searchbar/onsenui/css-components-src/src/components/toast.css
  54. 0
    170
      Searchbar/onsenui/css-components-src/src/components/toolbar-button.css
  55. 0
    385
      Searchbar/onsenui/css-components-src/src/components/toolbar.css
  56. 0
    160
      Searchbar/onsenui/css-components-src/src/components/util.css
  57. 0
    5
      Searchbar/onsenui/css-components-src/src/dark-onsen-css-components.css
  58. 0
    147
      Searchbar/onsenui/css-components-src/src/dark-theme.css
  59. 0
    20
      Searchbar/onsenui/css-components-src/src/img/android-search-input-icon.svg
  60. 0
    14
      Searchbar/onsenui/css-components-src/src/img/ios-search-input-icon.svg
  61. 0
    16
      Searchbar/onsenui/css-components-src/src/img/select-arrow.svg
  62. 0
    14
      Searchbar/onsenui/css-components-src/src/iphonex-support/action-sheet.css
  63. 0
    318
      Searchbar/onsenui/css-components-src/src/iphonex-support/combination.css
  64. 0
    36
      Searchbar/onsenui/css-components-src/src/iphonex-support/fab.css
  65. 0
    11
      Searchbar/onsenui/css-components-src/src/iphonex-support/global.css
  66. 0
    30
      Searchbar/onsenui/css-components-src/src/iphonex-support/index.css
  67. 0
    12
      Searchbar/onsenui/css-components-src/src/iphonex-support/page.css
  68. 0
    7
      Searchbar/onsenui/css-components-src/src/iphonex-support/tabbar.css
  69. 0
    13
      Searchbar/onsenui/css-components-src/src/iphonex-support/toast.css
  70. 0
    14
      Searchbar/onsenui/css-components-src/src/iphonex-support/toolbar.css
  71. 0
    32
      Searchbar/onsenui/css-components-src/src/license.css
  72. 0
    5
      Searchbar/onsenui/css-components-src/src/old-onsen-css-components.css
  73. 0
    150
      Searchbar/onsenui/css-components-src/src/old-theme.css
  74. 0
    5
      Searchbar/onsenui/css-components-src/src/onsen-css-components.css
  75. 0
    147
      Searchbar/onsenui/css-components-src/src/theme.css
  76. 0
    210
      Searchbar/onsenui/css-components-src/stylelint.config.js
  77. 0
    6746
      Searchbar/onsenui/css-components-src/yarn.lock
  78. 0
    7395
      Searchbar/onsenui/css/dark-onsen-css-components.css
  79. 0
    31
      Searchbar/onsenui/css/dark-onsen-css-components.min.css
  80. 0
    4329
      Searchbar/onsenui/css/font_awesome/css/all.css
  81. 0
    5
      Searchbar/onsenui/css/font_awesome/css/all.min.css
  82. 0
    14
      Searchbar/onsenui/css/font_awesome/css/brands.css
  83. 0
    5
      Searchbar/onsenui/css/font_awesome/css/brands.min.css
  84. 0
    4296
      Searchbar/onsenui/css/font_awesome/css/fontawesome.css
  85. 0
    5
      Searchbar/onsenui/css/font_awesome/css/fontawesome.min.css
  86. 0
    15
      Searchbar/onsenui/css/font_awesome/css/regular.css
  87. 0
    5
      Searchbar/onsenui/css/font_awesome/css/regular.min.css
  88. 0
    16
      Searchbar/onsenui/css/font_awesome/css/solid.css
  89. 0
    5
      Searchbar/onsenui/css/font_awesome/css/solid.min.css
  90. 0
    346
      Searchbar/onsenui/css/font_awesome/css/svg-with-js.css
  91. 0
    5
      Searchbar/onsenui/css/font_awesome/css/svg-with-js.min.css
  92. 0
    2166
      Searchbar/onsenui/css/font_awesome/css/v4-shims.css
  93. 0
    5
      Searchbar/onsenui/css/font_awesome/css/v4-shims.min.css
  94. BIN
      Searchbar/onsenui/css/font_awesome/webfonts/fa-brands-400.eot
  95. 0
    3459
      Searchbar/onsenui/css/font_awesome/webfonts/fa-brands-400.svg
  96. BIN
      Searchbar/onsenui/css/font_awesome/webfonts/fa-brands-400.ttf
  97. BIN
      Searchbar/onsenui/css/font_awesome/webfonts/fa-brands-400.woff
  98. BIN
      Searchbar/onsenui/css/font_awesome/webfonts/fa-brands-400.woff2
  99. BIN
      Searchbar/onsenui/css/font_awesome/webfonts/fa-regular-400.eot
  100. 0
    0
      Searchbar/onsenui/css/font_awesome/webfonts/fa-regular-400.svg

+ 0
- 1466
Searchbar/onsenui/CHANGELOG.md
File diff suppressed because it is too large
View File


+ 0
- 202
Searchbar/onsenui/LICENSE View File

@@ -1,202 +0,0 @@
1
-
2
-                                 Apache License
3
-                           Version 2.0, January 2004
4
-                        http://www.apache.org/licenses/
5
-
6
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7
-
8
-   1. Definitions.
9
-
10
-      "License" shall mean the terms and conditions for use, reproduction,
11
-      and distribution as defined by Sections 1 through 9 of this document.
12
-
13
-      "Licensor" shall mean the copyright owner or entity authorized by
14
-      the copyright owner that is granting the License.
15
-
16
-      "Legal Entity" shall mean the union of the acting entity and all
17
-      other entities that control, are controlled by, or are under common
18
-      control with that entity. For the purposes of this definition,
19
-      "control" means (i) the power, direct or indirect, to cause the
20
-      direction or management of such entity, whether by contract or
21
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
22
-      outstanding shares, or (iii) beneficial ownership of such entity.
23
-
24
-      "You" (or "Your") shall mean an individual or Legal Entity
25
-      exercising permissions granted by this License.
26
-
27
-      "Source" form shall mean the preferred form for making modifications,
28
-      including but not limited to software source code, documentation
29
-      source, and configuration files.
30
-
31
-      "Object" form shall mean any form resulting from mechanical
32
-      transformation or translation of a Source form, including but
33
-      not limited to compiled object code, generated documentation,
34
-      and conversions to other media types.
35
-
36
-      "Work" shall mean the work of authorship, whether in Source or
37
-      Object form, made available under the License, as indicated by a
38
-      copyright notice that is included in or attached to the work
39
-      (an example is provided in the Appendix below).
40
-
41
-      "Derivative Works" shall mean any work, whether in Source or Object
42
-      form, that is based on (or derived from) the Work and for which the
43
-      editorial revisions, annotations, elaborations, or other modifications
44
-      represent, as a whole, an original work of authorship. For the purposes
45
-      of this License, Derivative Works shall not include works that remain
46
-      separable from, or merely link (or bind by name) to the interfaces of,
47
-      the Work and Derivative Works thereof.
48
-
49
-      "Contribution" shall mean any work of authorship, including
50
-      the original version of the Work and any modifications or additions
51
-      to that Work or Derivative Works thereof, that is intentionally
52
-      submitted to Licensor for inclusion in the Work by the copyright owner
53
-      or by an individual or Legal Entity authorized to submit on behalf of
54
-      the copyright owner. For the purposes of this definition, "submitted"
55
-      means any form of electronic, verbal, or written communication sent
56
-      to the Licensor or its representatives, including but not limited to
57
-      communication on electronic mailing lists, source code control systems,
58
-      and issue tracking systems that are managed by, or on behalf of, the
59
-      Licensor for the purpose of discussing and improving the Work, but
60
-      excluding communication that is conspicuously marked or otherwise
61
-      designated in writing by the copyright owner as "Not a Contribution."
62
-
63
-      "Contributor" shall mean Licensor and any individual or Legal Entity
64
-      on behalf of whom a Contribution has been received by Licensor and
65
-      subsequently incorporated within the Work.
66
-
67
-   2. Grant of Copyright License. Subject to the terms and conditions of
68
-      this License, each Contributor hereby grants to You a perpetual,
69
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70
-      copyright license to reproduce, prepare Derivative Works of,
71
-      publicly display, publicly perform, sublicense, and distribute the
72
-      Work and such Derivative Works in Source or Object form.
73
-
74
-   3. Grant of Patent License. Subject to the terms and conditions of
75
-      this License, each Contributor hereby grants to You a perpetual,
76
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
-      (except as stated in this section) patent license to make, have made,
78
-      use, offer to sell, sell, import, and otherwise transfer the Work,
79
-      where such license applies only to those patent claims licensable
80
-      by such Contributor that are necessarily infringed by their
81
-      Contribution(s) alone or by combination of their Contribution(s)
82
-      with the Work to which such Contribution(s) was submitted. If You
83
-      institute patent litigation against any entity (including a
84
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
85
-      or a Contribution incorporated within the Work constitutes direct
86
-      or contributory patent infringement, then any patent licenses
87
-      granted to You under this License for that Work shall terminate
88
-      as of the date such litigation is filed.
89
-
90
-   4. Redistribution. You may reproduce and distribute copies of the
91
-      Work or Derivative Works thereof in any medium, with or without
92
-      modifications, and in Source or Object form, provided that You
93
-      meet the following conditions:
94
-
95
-      (a) You must give any other recipients of the Work or
96
-          Derivative Works a copy of this License; and
97
-
98
-      (b) You must cause any modified files to carry prominent notices
99
-          stating that You changed the files; and
100
-
101
-      (c) You must retain, in the Source form of any Derivative Works
102
-          that You distribute, all copyright, patent, trademark, and
103
-          attribution notices from the Source form of the Work,
104
-          excluding those notices that do not pertain to any part of
105
-          the Derivative Works; and
106
-
107
-      (d) If the Work includes a "NOTICE" text file as part of its
108
-          distribution, then any Derivative Works that You distribute must
109
-          include a readable copy of the attribution notices contained
110
-          within such NOTICE file, excluding those notices that do not
111
-          pertain to any part of the Derivative Works, in at least one
112
-          of the following places: within a NOTICE text file distributed
113
-          as part of the Derivative Works; within the Source form or
114
-          documentation, if provided along with the Derivative Works; or,
115
-          within a display generated by the Derivative Works, if and
116
-          wherever such third-party notices normally appear. The contents
117
-          of the NOTICE file are for informational purposes only and
118
-          do not modify the License. You may add Your own attribution
119
-          notices within Derivative Works that You distribute, alongside
120
-          or as an addendum to the NOTICE text from the Work, provided
121
-          that such additional attribution notices cannot be construed
122
-          as modifying the License.
123
-
124
-      You may add Your own copyright statement to Your modifications and
125
-      may provide additional or different license terms and conditions
126
-      for use, reproduction, or distribution of Your modifications, or
127
-      for any such Derivative Works as a whole, provided Your use,
128
-      reproduction, and distribution of the Work otherwise complies with
129
-      the conditions stated in this License.
130
-
131
-   5. Submission of Contributions. Unless You explicitly state otherwise,
132
-      any Contribution intentionally submitted for inclusion in the Work
133
-      by You to the Licensor shall be under the terms and conditions of
134
-      this License, without any additional terms or conditions.
135
-      Notwithstanding the above, nothing herein shall supersede or modify
136
-      the terms of any separate license agreement you may have executed
137
-      with Licensor regarding such Contributions.
138
-
139
-   6. Trademarks. This License does not grant permission to use the trade
140
-      names, trademarks, service marks, or product names of the Licensor,
141
-      except as required for reasonable and customary use in describing the
142
-      origin of the Work and reproducing the content of the NOTICE file.
143
-
144
-   7. Disclaimer of Warranty. Unless required by applicable law or
145
-      agreed to in writing, Licensor provides the Work (and each
146
-      Contributor provides its Contributions) on an "AS IS" BASIS,
147
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148
-      implied, including, without limitation, any warranties or conditions
149
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150
-      PARTICULAR PURPOSE. You are solely responsible for determining the
151
-      appropriateness of using or redistributing the Work and assume any
152
-      risks associated with Your exercise of permissions under this License.
153
-
154
-   8. Limitation of Liability. In no event and under no legal theory,
155
-      whether in tort (including negligence), contract, or otherwise,
156
-      unless required by applicable law (such as deliberate and grossly
157
-      negligent acts) or agreed to in writing, shall any Contributor be
158
-      liable to You for damages, including any direct, indirect, special,
159
-      incidental, or consequential damages of any character arising as a
160
-      result of this License or out of the use or inability to use the
161
-      Work (including but not limited to damages for loss of goodwill,
162
-      work stoppage, computer failure or malfunction, or any and all
163
-      other commercial damages or losses), even if such Contributor
164
-      has been advised of the possibility of such damages.
165
-
166
-   9. Accepting Warranty or Additional Liability. While redistributing
167
-      the Work or Derivative Works thereof, You may choose to offer,
168
-      and charge a fee for, acceptance of support, warranty, indemnity,
169
-      or other liability obligations and/or rights consistent with this
170
-      License. However, in accepting such obligations, You may act only
171
-      on Your own behalf and on Your sole responsibility, not on behalf
172
-      of any other Contributor, and only if You agree to indemnify,
173
-      defend, and hold each Contributor harmless for any liability
174
-      incurred by, or claims asserted against, such Contributor by reason
175
-      of your accepting any such warranty or additional liability.
176
-
177
-   END OF TERMS AND CONDITIONS
178
-
179
-   APPENDIX: How to apply the Apache License to your work.
180
-
181
-      To apply the Apache License to your work, attach the following
182
-      boilerplate notice, with the fields enclosed by brackets "[]"
183
-      replaced with your own identifying information. (Don't include
184
-      the brackets!)  The text should be enclosed in the appropriate
185
-      comment syntax for the file format. We also recommend that a
186
-      file or class name and description of purpose be included on the
187
-      same "printed page" as the copyright notice for easier
188
-      identification within third-party archives.
189
-
190
-   Copyright 2013-2018 ASIAL CORPORATION
191
-
192
-   Licensed under the Apache License, Version 2.0 (the "License");
193
-   you may not use this file except in compliance with the License.
194
-   You may obtain a copy of the License at
195
-
196
-       http://www.apache.org/licenses/LICENSE-2.0
197
-
198
-   Unless required by applicable law or agreed to in writing, software
199
-   distributed under the License is distributed on an "AS IS" BASIS,
200
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201
-   See the License for the specific language governing permissions and
202
-   limitations under the License.

+ 0
- 110
Searchbar/onsenui/README.md View File

@@ -1,110 +0,0 @@
1
-
2
-<p align="center"><a href="https://onsen.io/" target="_blank"><img width="140" src="https://onsenui.github.io/art/logos/onsenui-logo-1.png"></a></p>
3
-
4
-<p align="center">
5
-  <a href="https://community.onsen.io/"><img src="https://img.shields.io/badge/forum-onsen--ui-FF412D.svg" alt="Forum"></a>
6
-  <a href="https://github.com/OnsenUI/OnsenUI/blob/master/core/src/onsenui.d.ts"><img src="http://definitelytyped.org/badges/standard.svg" alt="TypeScript definitions"></a>
7
-  <br>
8
-  <a href="https://circleci.com/gh/OnsenUI/OnsenUI"><img src="https://circleci.com/gh/OnsenUI/OnsenUI.svg?style=shield" alt="Circle CI"></a>
9
-  <a href="https://badge.fury.io/js/onsenui"><img src="https://badge.fury.io/js/onsenui.svg" alt="NPM version"></a>
10
-  <a href="https://cdnjs.com/libraries/onsen"><img src="https://img.shields.io/cdnjs/v/onsen.svg" alt="CDNJS"></a>
11
-</p>
12
-
13
-# [Onsen UI](https://onsen.io/) - Cross-Platform Hybrid App and PWA Framework
14
-
15
-Onsen UI is an <strong>open source</strong> framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps.
16
-
17
-The core library is written in <strong>pure Javascript</strong> (on top of <a href="http://webcomponents.org/">Web Components</a>) and is <strong>framework agnostic</strong>, which means you can use it with your favorite framework and its tools. We provide some extra binding packages to make it easy to use Onsen UI's API with many popular frameworks:
18
-
19
-<table>
20
-  <tbody><tr>
21
-    <td align="center" width="150"><a href="https://onsen.io/react"><img src="https://onsen.io/images/common/icn_react_top.svg" height="40"><br><strong>React</strong></a></td>
22
-    <td align="center" width="150"><a href="https://onsen.io/angular2"><img src="https://onsen.io/images/common/icn_angular2_top.svg" height="40"><br><strong>Angular 2+</strong></a><br></td>
23
-    <td align="center" width="150"><a href="https://onsen.io/vue"><img src="https://onsen.io/images/common/icn_vuejs_top.svg" height="40"><br><strong>Vue</strong></a><br></td>
24
-    <td align="center" width="150"><a href="https://onsen.io/v2/docs/guide/angular1/index.html"><img src="https://onsen.io/images/common/icn_angular1_top.svg" height="40"><br><strong>AngularJS 1.x</strong></a><br></td>
25
-  </tr></tbody>
26
-</table>
27
-
28
-Some other frameworks are supported by __community__ packages (not tested or implemented by the core team): [Aurelia](https://www.npmjs.com/package/aurelia-onsenui), [EmberJS](https://www.npmjs.com/package/ember-onsenui).
29
-
30
-Both <strong>flat (iOS) and Material (Android) designs</strong> are included. The components are optionally auto-styled based on the platform, which makes it possible to support both iOS and Android with the <strong>same source code</strong>.
31
-
32
-
33
-## Getting started
34
-We have several resources to help you get started creating hybrid apps and PWAs with Onsen UI:
35
-
36
-* __The official docs__: We provide guides and references for all of the components and bindings, as well as how to publish your app. These are our _Getting Started_ guides:
37
-  * [Core guide (no framework)](https://onsen.io/v2/guide)
38
-  * [Vue guide](https://onsen.io/v2/guide/vue/)
39
-  * [React guide](https://onsen.io/v2/guide/react/)
40
-  * [Angular 2+ guide](https://onsen.io/v2/guide/angular2/)
41
-  * [AngularJS 1.x guide](https://onsen.io/v2/guide/angular1/)
42
-  * [jQuery guide](https://onsen.io/v2/guide/jquery/)
43
-  * [Creating an Onsen UI hybrid app using Cordova](https://onsen.io/v2/guide/hybrid/cordova.html)
44
-  * [Progressive Web Apps (PWAs) with Onsen UI](https://onsen.io/v2/guide/pwa/intro.html)
45
-* __Components overview__: a [list of included CSS components](https://onsen.io/v2/docs/css.html) in both flat and Material Design. Note that these components are just pure and performant CSS without JavaScript behavior. Some extra details (such as dragging or ripple effect) are added by Onsen UI custom elements.
46
-* __Playground__: an [interactive Onsen UI tutorial](https://onsen.io/playground/) where you can learn how to use Onsen UI and play around with the components.
47
-* __Blog__: there are lots of great tutorials and guides published in our [official Onsen UI blog](https://onsen.io/blog/categories/tutorial.html) and we are adding new content regularly.
48
-* __Support__: if you are having trouble using some component the best place to get help is the [Onsen UI Forum](https://community.onsen.io/) or the community-run [Discord Chat](https://discord.gg/JWhBbnE). We are also available to answer short questions on Twitter at [@Onsen_UI](https://twitter.com/Onsen_UI).
49
-
50
-## Get Onsen UI
51
-
52
-### __Download the latest released version__
53
-We have a [distribution repository](https://github.com/OnsenUI/OnsenUI-dist/releases) with changelog. Onsen UI is also available in __npm__, __bower__ and __jspm__. Example:
54
-
55
-```bash
56
-npm install onsenui
57
-```
58
-
59
-This downloads the core Onsen UI library. To install bindings, you can install `react-onsenui`, `vue-onsenui`, `ngx-onsenui` or `angularjs-onsenui`.
60
-
61
-### __Download or request from a CDN__
62
-You can also take the necessary files from a CDN. Some of the options are [unpkg](https://unpkg.com/onsenui/), [jsDelivr](https://www.jsdelivr.com/package/npm/onsenui) and [cdnjs](https://cdnjs.com/libraries/onsen).
63
-
64
-### __Get the latest development build__
65
-Optionally, you can download the [latest development build here](https://onsenui.github.io/latest-build). Be careful, usually everything there is already tested but it might be unstable sometimes.
66
-
67
-## Examples with source code
68
-There are lots of sample applications written using Onsen UI. __[Here are some examples](https://onsen.io/samples) with source code and tutorials__ to give you an idea of what kind of apps you can create.
69
-
70
-<p align="center">
71
-  <a href="https://argelius.github.io/angular2-onsenui-pokedex/" target="_blank"><img src="https://onsen.io/images/samples/pokedex-pikachu.png"></a>
72
-  <a href="http://argelius.github.io/react-onsenui-redux-weather/demo.html" target="_blank"><img src="https://onsen.io/images/samples/react-redux-weather.png"></a>
73
-  <a href="https://frandiox.github.io/OnsenUI-YouTube" target="_blank"><img src="https://onsen.io/images/samples/youtube.png"></a>
74
-</p>
75
-
76
-## Onsen UI ecosystem
77
-Because sometimes a UI framework may not be enough to make hybrid app development easy, Onsen UI comes with a __complete ecosystem__ of well integrated tools. Meet [__Monaca__](https://monaca.io/).
78
-
79
-<p align="center"><a href="https://monaca.io" target="_blank"><img width="300"src="https://onsenui.github.io/art/logos/monaca-logo-2.png"></a></p>
80
-
81
-Developed by the Onsen UI team, __Monaca__ is a toolkit that makes hybrid mobile app development with __PhoneGap / Cordova__ simple and easy: Onsen UI Cordova templates, debugging suite, push notifications, remote build, back-end solutions, encryption, version control, continuous integration and more. Furthermore, it provides multiple development environments with everything already configured and ready to go:
82
-
83
-<p align="center">
84
-  <a href="https://monaca.io/cloud.html"><strong>Cloud IDE</strong></a> -
85
-  <a href="https://monaca.io/cli.html"><strong>Command Line Interface</strong></a> -
86
-  <a href="https://monaca.io/localkit.html"><strong>Localkit GUI</strong></a>
87
-</p>
88
-
89
-Example with __CLI__:
90
-
91
-```
92
-$ [sudo] npm -g install monaca
93
-$ monaca create helloworld # And choose the starter template
94
-$ monaca preview # Preview on the browser
95
-$ monaca debug # Preview on a real device
96
-$ monaca remote build --browser # Production build on the cloud
97
-```
98
-
99
-See the [Onsen UI Getting Started Page](http://onsen.io/v2/guide/) for more information.
100
-
101
-## Browser Support
102
-Onsen UI is tested to work with the following browsers and mobile OS.
103
-
104
- * Android 4.4.4+
105
- * iOS 9+
106
- * Chrome
107
- * Safari
108
-
109
-## Contribution
110
-We welcome your contribution, no matter how big or small! Please have a look at the [contribution guide](https://github.com/OnsenUI/OnsenUI/blob/master/CONTRIBUTING.md) for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the [changelog](https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md).

+ 0
- 26
Searchbar/onsenui/bower.json View File

@@ -1,26 +0,0 @@
1
-{
2
-  "name": "onsenui",
3
-  "homepage": "https://onsen.io",
4
-  "authors": [
5
-    "Kruy Vanna <kruyvanna@gmail.com>",
6
-    "Mitsunori KUBOTA <anatoo.jp@gmail.com>"
7
-  ],
8
-  "description": "Web Component inspired HTML5 UI framework for building modern mobile application",
9
-  "main": [
10
-    "js/onsenui.js",
11
-    "css/onsenui.css",
12
-    "css/onsen-css-components.css"
13
-  ],
14
-  "keywords": [
15
-    "onsenui",
16
-    "angular",
17
-    "html5",
18
-    "cordova",
19
-    "phonegap",
20
-    "web",
21
-    "component",
22
-    "monaca"
23
-  ],
24
-  "dependencies": {},
25
-  "license": "Apache License, Version 2.0"
26
-}

+ 0
- 33
Searchbar/onsenui/css-components-src/README.md View File

@@ -1,33 +0,0 @@
1
-# Onsen CSS Components
2
-
3
-Onsen CSS Components is CSS components for Cordova Apps.
4
-
5
-![Screenshot](./misc/screenshot-01.png)
6
-![Screenshot](./misc/screenshot-02.png)
7
-
8
-## How to Build
9
-
10
-This CSS components is built by PostCSS + cssnext. You can build with following commands.
11
-
12
-```
13
-$ yarn install --pure-lockfile
14
-$ yarn run build
15
-```
16
-
17
-## How to Customize CSS Components
18
-
19
-Execute the following command.
20
-
21
-```
22
-$ yarn install --pure-lockfile
23
-$ yarn run serve
24
-```
25
-
26
-When you open `http://localhost:4321/` in the browser, a preview of the CSS components is displayed.
27
-
28
-When you edit the cssnext files under the `src` directory, the cssnext files is automatically built into the CSS and the browser is reloaded. The built CSS file is located in `./build/onsen-css-components.css`.
29
-
30
-To customize theme colors, you can edit `./src/theme.css`. This file contains CSS variables for the theme colors.
31
-
32
-If you want to customize components' details, you can edit `./src/components/*.css`. These files contain actual rules for all CSS components. But these files may be changed significantly by minor version release.
33
-

+ 0
- 276
Searchbar/onsenui/css-components-src/gulpfile.js View File

@@ -1,276 +0,0 @@
1
-const gulp = require('gulp');
2
-const pkg = require('./package.json');
3
-const corePkg = require('../package.json');
4
-const merge = require('event-stream').merge;
5
-const browserSync = require('browser-sync').create();
6
-const $ = require('gulp-load-plugins')();
7
-const eco = require('eco');
8
-const fs = require('fs');
9
-const ancss = require('@onsenui/ancss');
10
-const cssnextPlugin = require('postcss-cssnext');
11
-const reporter = require('postcss-reporter');
12
-const historyApiFallback = require('connect-history-api-fallback');
13
-const {rollup} = require('rollup');
14
-const babel = require('rollup-plugin-babel');
15
-const commonjs = require('rollup-plugin-commonjs');
16
-const glob = require('glob');
17
-const rimraf = require('rimraf');
18
-const path = require('path');
19
-const yaml = require('js-yaml');
20
-
21
-// Include these plugins outside $ to fix gulp-hub
22
-const plumber = require('gulp-plumber');
23
-const postcss = require('gulp-postcss');
24
-const stylelintPlugin = require('gulp-stylelint');
25
-
26
-const prefix = __dirname + '/../build/css/';
27
-const babelrc = Object.assign({}, corePkg.babel);
28
-babelrc.babelrc = babelrc.presets[0][1].modules = false;
29
-babelrc.exclude = 'node_modules/**';
30
-
31
-const cwdOption = {
32
-  cwd: __dirname // makes sure the correct relative path is used when tasks are run from main OnsenUI gulpfile
33
-};
34
-
35
-////////////////////////////////////////
36
-// build-css
37
-////////////////////////////////////////
38
-gulp.task('build-css', gulp.series(cssClean, stylelint, cssnext, cssmin));
39
-
40
-////////////////////////////////////////
41
-// build
42
-////////////////////////////////////////
43
-gulp.task('build', gulp.series('build-css', generatePreview));
44
-
45
-////////////////////////////////////////
46
-// stylelint
47
-////////////////////////////////////////
48
-function stylelint() {
49
-  return gulp.src([
50
-      './src/**/*.css',
51
-      '!./src/components/combination.css', // not following BEM
52
-      '!./src/iphonex-support/**/*.css' // not following BEM
53
-    ], cwdOption)
54
-    .pipe(stylelintPlugin({
55
-      failAfterError: false,
56
-      reporters: [{formatter: 'string', console: true}],
57
-      configFile: path.join(__dirname, 'stylelint.config.js') // uses css-components/stylelint.config.js even when run from main gulpfile
58
-    }));
59
-}
60
-
61
-////////////////////////////////////////
62
-// cssmin
63
-////////////////////////////////////////
64
-function cssmin() {
65
-  return gulp.src(prefix + '{*-,}onsen-css-components.css')
66
-    .pipe($.cssmin())
67
-    .pipe($.rename({suffix: '.min'}))
68
-    .pipe(gulp.dest('./build/'))
69
-    .pipe(gulp.dest(prefix));
70
-}
71
-
72
-////////////////////////////////////////
73
-// cssnext
74
-////////////////////////////////////////
75
-function cssnext() {
76
-  const plugins = [
77
-    require('postcss-import'),
78
-    require('postcss-base64')({
79
-      extensions: ['.svg'],
80
-      root: __dirname + '/src/components/'
81
-    }),
82
-    cssnextPlugin({
83
-      browsers: babelrc.presets[0][1].targets.browsers,
84
-    }),
85
-    reporter({
86
-      clearAllMessages: true,
87
-      clearReportedMessages: true,
88
-      throwError: false
89
-    })
90
-  ];
91
-
92
-  return gulp.src('src/{*-,}onsen-css-components.css', cwdOption)
93
-    //.pipe(plumber()) // this was causing the task to never complete with gulp 4, but why...?
94
-    .pipe(postcss(plugins))
95
-    .pipe(gulp.dest('./build/'))
96
-    .pipe(gulp.dest(prefix))
97
-    .pipe(browserSync.stream());
98
-}
99
-gulp.task('cssnext', gulp.series(stylelint, cssnext));
100
-
101
-function cssClean(done) {
102
-  rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.css');
103
-  rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.min.css');
104
-  rimraf.sync(prefix + '/{*-,}onsen-css-components.css');
105
-  rimraf.sync(prefix + '/{*-,}onsen-css-components.min.css');
106
-  done();
107
-}
108
-gulp.task('css-clean', cssClean);
109
-
110
-////////////////////////////////////////
111
-// generate-preview
112
-////////////////////////////////////////
113
-let lastMarkupToken = '';
114
-
115
-function generatePreview(done) {
116
-  const components = parseComponents();
117
-  const markupToken = identifyComponentsMarkup(components);
118
-
119
-  if (markupToken !== lastMarkupToken) {
120
-    gulp.series(previewAssets, previewJs, (done) => {
121
-      generate(components);
122
-      browserSync.reload();
123
-
124
-      lastMarkupToken = markupToken;
125
-      done();
126
-    })();
127
-    done();
128
-  } else {
129
-    lastMarkupToken = markupToken;
130
-    done();
131
-  }
132
-}
133
-
134
-function generatePreviewForce(done) {
135
-  generate(parseComponents());
136
-  browserSync.reload();
137
-  done();
138
-}
139
-exports['generate-preview-force'] = gulp.series(previewAssets, previewJs, generatePreviewForce);
140
-
141
-function generate(components) {
142
-  const template = fs.readFileSync(__dirname + '/previewer-src/index.html.eco', 'utf-8');
143
-  const patterns = yaml.safeLoadAll(fs.readFileSync(__dirname + '/patterns.yaml', 'utf-8'));
144
-  const themes = glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(filePath => path.basename(filePath, '.css'));
145
-  const toJSON = JSON.stringify.bind(JSON);
146
-
147
-  fs.writeFileSync(__dirname + '/build/index.html', eco.render(template, {toJSON, components, themes, patterns}), 'utf-8');
148
-}
149
-
150
-function identifyComponentsMarkup(componentsJSON) {
151
-  const token = componentsJSON.map(component => {
152
-    return component.annotation.markup;
153
-  }).join('');
154
-
155
-  return token;
156
-}
157
-
158
-function parseComponents() {
159
-  const css = fs.readFileSync(__dirname + '/build/onsen-css-components.css', 'utf-8');
160
-  const components = ancss.parse(css, {detect: line => line.match(/^~/)});
161
-  return components || [];
162
-}
163
-
164
-////////////////////////////////////////
165
-// preview-assets
166
-////////////////////////////////////////
167
-function previewAssets() {
168
-  return gulp.src('previewer-src/*.{svg,css}')
169
-    .pipe(gulp.dest('./build/'));
170
-}
171
-
172
-////////////////////////////////////////
173
-// preview-js
174
-////////////////////////////////////////
175
-function previewJs() {
176
-  return rollup({
177
-    input: 'previewer-src/app.js',
178
-    plugins: [
179
-      commonjs,
180
-      babel(babelrc)
181
-    ]
182
-  })
183
-  .then(bundle => {
184
-    return bundle.write({
185
-      file: 'build/app.gen.js',
186
-      format: 'umd',
187
-      sourcemap: 'inline'
188
-    });
189
-  });
190
-}
191
-
192
-////////////////////////////////////////
193
-// reset-console
194
-////////////////////////////////////////
195
-function reset(done) {
196
-  process.stdout.write('\x1Bc');
197
-  done();
198
-}
199
-
200
-const outputDevServerInfo = (() => {
201
-  let defer = true;
202
-
203
-  return function () {
204
-    if (defer) {
205
-      setTimeout(() => {
206
-        output();
207
-        defer = true;
208
-      }, 60);
209
-      defer = false;
210
-    }
211
-  }
212
-
213
-  function output() {
214
-    const localUrl = browserSync.getOption('urls').get('local');
215
-    const externalUrl = browserSync.getOption('urls').get('external');
216
-
217
-    console.log('\nAccess URLs:');
218
-    console.log('     Local:', $.util.colors.magenta(localUrl));
219
-    console.log('  External:', $.util.colors.magenta(externalUrl));
220
-    console.log();
221
-
222
-    displayBuildCSSInfo();
223
-  }
224
-})();
225
-
226
-function displayBuildCSSInfo() {
227
-
228
-  console.log('Built CSS Files:')
229
-  getCSSPaths().forEach(cssPath => {
230
-    console.log('  ' + $.util.colors.magenta(cssPath));
231
-  });
232
-
233
-  function getCSSPaths() {
234
-    return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
235
-      return '.' + path.sep + path.relative(__dirname, cssPath);
236
-    });
237
-  }
238
-}
239
-
240
-function getCSSPaths() {
241
-  return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
242
-    return '.' + path.sep + path.relative(__dirname, cssPath);
243
-  });
244
-}
245
-
246
-////////////////////////////////////////
247
-// serve
248
-////////////////////////////////////////
249
-function serve(done) {
250
-  gulp.watch(['src/**/*.css'], () => {
251
-    reset();
252
-    gulp.series('build-css', 'generate-preview', outputDevServerInfo);
253
-  });
254
-
255
-  gulp.watch(['previewer-src/**', 'patterns.yaml'], () => {
256
-    reset();
257
-    gulp.series('generate-preview-force', outputDevServerInfo)
258
-  });
259
-
260
-  browserSync.emitter.on('init', outputDevServerInfo);
261
-
262
-  browserSync.init({
263
-    logLevel: 'silent',
264
-    ui: false,
265
-    port: 4321,
266
-    notify: false,
267
-    server: {
268
-      baseDir: __dirname + '/build',
269
-      middleware: [historyApiFallback()],
270
-    },
271
-    startPath: '/',
272
-    open: false
273
-  });
274
-}
275
-
276
-exports.serve = gulp.series('build', serve);

BIN
Searchbar/onsenui/css-components-src/misc/screenshot-01.png View File


BIN
Searchbar/onsenui/css-components-src/misc/screenshot-02.png View File


+ 0
- 48
Searchbar/onsenui/css-components-src/package.json View File

@@ -1,48 +0,0 @@
1
-{
2
-  "name": "",
3
-  "version": "0.0.0",
4
-  "private": true,
5
-  "scripts": {
6
-    "build": "gulp build",
7
-    "serve": "gulp serve"
8
-  },
9
-  "dependencies": {
10
-    "browser-sync": "^2.18.6",
11
-    "eco": "^1.1.0-rc-3",
12
-    "event-stream": "3.3.4",
13
-    "gulp": "^4.0.0",
14
-    "gulp-cssmin": "^0.1.7",
15
-    "gulp-less": "^1.2.3",
16
-    "gulp-load-plugins": "^0.5.0",
17
-    "gulp-order": "^1.0.6",
18
-    "gulp-plumber": "^0.6.1",
19
-    "gulp-postcss": "^7.0.0",
20
-    "gulp-rename": "^1.2.2",
21
-    "gulp-shell": "^0.2.4",
22
-    "gulp-stylelint": "^3.9.0",
23
-    "gulp-stylus": "^1.0.0",
24
-    "gulp-util": "^2.2.14",
25
-    "immutable-css": "^1.1.2",
26
-    "postcss-base64": "^0.6.1",
27
-    "postcss-cssnext": "^3.0.2",
28
-    "postcss-import": "^9.1.0",
29
-    "postcss-reporter": "^3.0.0",
30
-    "rimraf": "^2.6.1"
31
-  },
32
-  "engines": {
33
-    "node": ">=0.10.0"
34
-  },
35
-  "devDependencies": {
36
-    "@onsenui/ancss": "^1.0.0",
37
-    "babel-core": "^6.25.0",
38
-    "babel-preset-env": "^1.6.1",
39
-    "babel-preset-stage-3": "^6.24.1",
40
-    "connect-history-api-fallback": "^1.3.0",
41
-    "glob": "^7.1.2",
42
-    "gulp-file": "^0.3.0",
43
-    "js-yaml": "^3.10.0",
44
-    "rollup": "^0.51.5",
45
-    "rollup-plugin-babel": "^3.0.2",
46
-    "rollup-plugin-commonjs": "^8.2.6"
47
-  }
48
-}

+ 0
- 376
Searchbar/onsenui/css-components-src/patterns.yaml View File

@@ -1,376 +0,0 @@
1
----
2
-name: Basic
3
-markup: |
4
-  <div class="page">
5
-    <div class="toolbar">
6
-      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
7
-      <div class="toolbar__center">Title</div>
8
-      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
9
-    </div>
10
-
11
-    <div>
12
-      <br>
13
-
14
-      <div class="list-title">Title</div>
15
-
16
-      <ul class="list">
17
-        <li class="list-item">
18
-          <div class="list-item__center">Item</div>
19
-        </li>
20
-        <li class="list-item">
21
-          <div class="list-item__center">Item</div>
22
-        </li>
23
-      </ul>
24
-
25
-      <br>
26
-
27
-      <ul class="list">
28
-        <li class="list-item">
29
-          <div class="list-item__center">
30
-            <div class="list-item__title">
31
-              Title
32
-            </div>
33
-            <div class="list-item__subtitle">
34
-              Subtitle
35
-            </div>
36
-          </div>
37
-        </li>
38
-        <li class="list-item">
39
-          <div class="list-item__center">
40
-            <div class="list-item__title">
41
-              Title
42
-            </div>
43
-            <div class="list-item__subtitle">
44
-              Subtitle
45
-            </div>
46
-          </div>
47
-        </li>
48
-      </ul>
49
-
50
-    </div>
51
-    <div class="bottom-bar">
52
-      <div class="bottom-bar__line-height" style="text-align:center">Label</div>
53
-    </div>
54
-  </div>
55
----
56
-name: Material Basic
57
-markup: |
58
-  <div class="page page--material">
59
-    <div class="toolbar toolbar--material">
60
-      <div class="toolbar__left toolbar--material__left"></div>
61
-      <div class="toolbar__center toolbar--material__center">Title</div>
62
-      <div class="toolbar__right toolbar--material__right"></div>
63
-    </div>
64
-
65
-    <div>
66
-      <h3 class="list-title list-title--material">Title</h3>
67
-      <ul class="list list--material">
68
-        <li class="list-item list-item--material">
69
-          <div class="list-item__center list-item--material__center">Item</div>
70
-        </li>
71
-        <li class="list-item list-item--material">
72
-          <div class="list-item__center list-item--material__center">Item</div>
73
-        </li>
74
-      </ul>
75
-
76
-      <br>
77
-      <ul class="list list--material">
78
-        <li class="list-item list-item--material">
79
-          <div class="list-item__center list-item--material__center">
80
-            <div class="list-item__title list-item--material__title">Title</div>
81
-            <div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
82
-          </div>
83
-        </li>
84
-        <li class="list-item list-item--material">
85
-          <div class="list-item__center list-item--material__center">
86
-            <div class="list-item__title list-item--material__title">Title</div>
87
-            <div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
88
-          </div>
89
-        </li>
90
-      </ul>
91
-
92
-    </div>
93
-  </div>
94
----
95
-name: Settings
96
-markup: |
97
-  <div class="page">
98
-    <div class="toolbar">
99
-      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
100
-      <div class="toolbar__center">Title</div>
101
-      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
102
-    </div>
103
-
104
-    <div>
105
-      <br>
106
-
107
-      <ul class="list">
108
-        <li class="list-item">
109
-          <div class="list-item__left">
110
-            <i class="ion-ios-volume-low" style="font-size: 28px"></i>
111
-          </div>
112
-          <div class="list-item__center">
113
-            <div class="range" style="width: 100%">
114
-              <input type="range" class="range__input">
115
-            </div>
116
-          </div>
117
-          <div class="list-item__right">
118
-            <i class="ion-ios-volume-high" style="font-size: 28px"></i>
119
-          </div>
120
-        </li>
121
-      </ul>
122
-
123
-      <br>
124
-
125
-      <ul class="list">
126
-        <li class="list-item">
127
-          <div class="list-item__center">
128
-            Label
129
-          </div>
130
-          <div class="list-item__right">
131
-            <label class="switch">
132
-              <input type="checkbox" class="switch__input" checked>
133
-              <div class="switch__toggle">
134
-                <div class="switch__handle"></div>
135
-              </div>
136
-            </label>
137
-          </div>
138
-        </li>
139
-      </ul>
140
-
141
-      <br>
142
-
143
-      <ul class="list">
144
-        <li class="list-item list-item--tappable">
145
-          <div class="list-item__left">
146
-            <label class="checkbox checkbox--noborder">
147
-              <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
148
-              <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
149
-            </label>
150
-          </div>
151
-          <label for="s1" class="list-item__center">
152
-            Checkbox
153
-          </label>
154
-        </li>
155
-        <li class="list-item list-item--tappable">
156
-          <div class="list-item__left">
157
-            <label class="checkbox checkbox--noborder">
158
-              <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
159
-              <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
160
-            </label>
161
-          </div>
162
-          <label for="s2" class="list-item__center">
163
-            Checkbox
164
-          </label>
165
-        </li>
166
-      </ul>
167
-
168
-    </div>
169
-  </div>
170
----
171
-name: Material Settings
172
-markup: |
173
-  <div class="page page--material">
174
-    <div class="toolbar toolbar--material">
175
-      <div class="toolbar__left toolbar--material__left"></div>
176
-      <div class="toolbar__center toolbar--material__center">Title</div>
177
-      <div class="toolbar__right toolbar--material__right"></div>
178
-    </div>
179
-
180
-    <div>
181
-      
182
-      <br>
183
-
184
-      <ul class="list list--material">
185
-        <li class="list-item list-item--material">
186
-          <div class="list-item__left list-item--material__left" style="min-width: 0; width: 20px;">
187
-            <i class="ion-ios-volume-low" style="font-size: 28px"></i>
188
-          </div>
189
-          <div class="list-item__center list-item--material__center">
190
-            <div class="range range--material" style="width: 100%">
191
-              <input type="range" class="range__input range--material__input">
192
-            </div>
193
-          </div>
194
-          <div class="list-item__right list-item--material__right">
195
-            <i class="ion-ios-volume-high" style="font-size: 28px"></i>
196
-          </div>
197
-        </li>
198
-      </ul>
199
-
200
-      <br>
201
-
202
-      <ul class="list list--material">
203
-        <li class="list-item list-item--material">
204
-          <div class="list-item__left list-item--material__left">
205
-            Label
206
-          </div>
207
-          <div class="list-item__center list-item--material__center">
208
-          </div>
209
-          <div class="list-item__right list-item--material__right">
210
-            <label class="switch switch--material">
211
-              <input type="checkbox" class="switch__input switch--material__input" checked>
212
-              <div class="switch__toggle switch--material__toggle">
213
-                <div class="switch__handle switch--material__handle"></div>
214
-              </div>
215
-            </label>
216
-          </div>
217
-        </li>
218
-      </ul>
219
-
220
-      <br>
221
-
222
-      <ul class="list list--material">
223
-        <li class="list-item list-item--material">
224
-          <div class="list-item__left list-item--material__left">
225
-            <label class="checkbox checkbox--material">
226
-              <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
227
-              <div class="checkbox__checkmark checkbox--material__checkmark"></div>
228
-            </label>
229
-          </div>
230
-
231
-          <label for="checkbox3" class="list-item__center list-item--material__center">
232
-            <div class="list-item__title list-item--material__title">Checkbox</div>
233
-          </label>
234
-        </li>
235
-
236
-        <li class="list-item list-item--material">
237
-          <div class="list-item__left list-item--material__left">
238
-            <label class="checkbox checkbox--material">
239
-              <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
240
-              <div class="checkbox__checkmark checkbox--material__checkmark"></div>
241
-            </label>
242
-          </div>
243
-
244
-          <label for="checkbox4" class="list-item__center list-item--material__center">
245
-            <div class="list-item__title list-item--material__title">Checkbox</div>
246
-          </label>
247
-        </li>
248
-
249
-      </ul>
250
-
251
-    </div>
252
-  </div>
253
----
254
-name: Tabbar
255
-markup: |
256
-  <div class="page">
257
-    <div class="toolbar">
258
-      <div class="toolbar__left"></div>
259
-      <div class="toolbar__center">Title</div>
260
-      <div class="toolbar__right"></div>
261
-    </div>
262
-
263
-    <div class="tabbar">
264
-      <label class="tabbar__item">
265
-        <input type="radio" name="tabbar-a" checked="checked">
266
-        <button class="tabbar__button">
267
-          <i class="tabbar__icon ion-record"></i>
268
-          <div class="tabbar__label">Label</div>
269
-        </button>
270
-      </label>
271
-
272
-      <label class="tabbar__item">
273
-        <input type="radio" name="tabbar-a">
274
-        <button class="tabbar__button">
275
-          <i class="tabbar__icon ion-record"></i>
276
-          <div class="tabbar__label">Label</div>
277
-        </button>
278
-      </label>
279
-
280
-      <label class="tabbar__item">
281
-        <input type="radio" name="tabbar-a">
282
-        <button class="tabbar__button">
283
-          <i class="tabbar__icon ion-record"></i>
284
-          <div class="tabbar__label">Label</div>
285
-        </button>
286
-      </label>
287
-    </div>
288
-  </div>
289
----
290
-name: Material Tabbar
291
-markup: |
292
-  <div class="page page--material">
293
-    <div class="toolbar toolbar--material">
294
-      <div class="toolbar__left toolbar--material__left"></div>
295
-      <div class="toolbar__center toolbar--material__center">Title</div>
296
-      <div class="toolbar__right toolbar--material__right"></div>
297
-    </div>
298
-
299
-    <div class="tabbar tabbar--material tabbar--top">
300
-      <label class="tabbar__item tabbar--material__item">
301
-        <input type="radio" name="material-tabbar" checked="checked">
302
-        <button class="tabbar__button tabbar--material__button">
303
-          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
304
-          <div class="tabbar__label tabbar--material__label">Label</div>
305
-        </button>
306
-      </label>
307
-
308
-      <label class="tabbar__item tabbar--material__item">
309
-        <input type="radio" name="material-tabbar" checked="checked">
310
-        <button class="tabbar__button tabbar--material__button">
311
-          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
312
-          <div class="tabbar__label tabbar--material__label">Label</div>
313
-        </button>
314
-      </label>
315
-
316
-      <label class="tabbar__item tabbar--material__item">
317
-        <input type="radio" name="material-tabbar" checked="checked">
318
-        <button class="tabbar__button tabbar--material__button">
319
-          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
320
-          <div class="tabbar__label tabbar--material__label">Label</div>
321
-        </button>
322
-      </label>
323
-    </div>
324
-  </div>
325
----
326
-name: Alert Dialog
327
-markup: |
328
-  <div class="page">
329
-    <div class="toolbar">
330
-      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
331
-      <div class="toolbar__center">Title</div>
332
-      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
333
-    </div>
334
-    <div></div>
335
-  </div>
336
-  <div class="alert-dialog-mask"></div>
337
-  <div class="alert-dialog">
338
-    <div class="alert-dialog-container">
339
-      <div class="alert-dialog-title">Alert</div>
340
-
341
-      <div class="alert-dialog-content">
342
-        Hello World!
343
-      </div>
344
-
345
-      <div class="alert-dialog-footer">
346
-        <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
347
-      </div>
348
-    </div>
349
-  </div>
350
----
351
-name: Material Alert Dialog
352
-markup: |
353
-  <div class="page page--material">
354
-    <div class="toolbar toolbar--material">
355
-      <div class="toolbar__left toolbar--material__left"></div>
356
-      <div class="toolbar__center toolbar--material__center">Title</div>
357
-      <div class="toolbar__right toolbar--material__right"></div>
358
-    </div>
359
-    <div>
360
-    </div>
361
-  </div>
362
-  <div class="alert-dialog-mask alert-dialog-mask--material"></div>
363
-  <div class="alert-dialog alert-dialog--material">
364
-    <div class="alert-dialog-container alert-dialog-container--material">
365
-      <div class="alert-dialog-title alert-dialog-title--material">
366
-        Dialog title
367
-      </div>
368
-      <div class="alert-dialog-content alert-dialog-content--material">
369
-        Some dialog content.
370
-      </div>
371
-      <div class="alert-dialog-footer alert-dialog-footer--material">
372
-        <button class="alert-dialog-button alert-dialog-button--material">OK</button>
373
-        <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
374
-      </div>
375
-    </div>
376
-  </div>

+ 0
- 64
Searchbar/onsenui/css-components-src/previewer-src/app.js View File

@@ -1,64 +0,0 @@
1
-import {createAppPageComponent} from './components/app-page';
2
-
3
-function init() {
4
-  const components = loadComponents();
5
-  const categories = loadCategories(components);
6
-  const themes = loadThemes();
7
-  const patterns = loadPatterns();
8
-
9
-  window.components = components;
10
-  window.categories = categories;
11
-  window.themes = themes;
12
-  window.patterns = patterns;
13
-
14
-  const app = new Vue(createAppPageComponent({
15
-    components,
16
-    categories
17
-  }));
18
-};
19
-
20
-function loadCategories(components) {
21
-  const set = new Set();
22
-  components.forEach(component => {
23
-    set.add(component.category);
24
-  });
25
-
26
-  return [...set.values()].map(value => {
27
-    return {
28
-      name: value,
29
-      hash: value.toLowerCase().replace(/ /g, '_')
30
-    };
31
-  });
32
-}
33
-
34
-function loadComponents() {
35
-  return JSON.parse(document.querySelector('#data').getAttribute('data-components')).map(component => {
36
-    component = component.annotation;
37
-    component.id = component.name.toLowerCase().replace(/ /g, '_');
38
-    return component;
39
-  });
40
-}
41
-
42
-function loadThemes() {
43
-  const themes = JSON.parse(document.querySelector('#data').getAttribute('data-themes')).map(theme => {
44
-    return theme;
45
-  }).filter(theme => {
46
-    return theme !== 'onsen-css-components';
47
-  });
48
-
49
-  // デフォルトのテーマを先頭に追加
50
-  themes.unshift('onsen-css-components');
51
-
52
-  return themes;
53
-}
54
-
55
-function loadPatterns() {
56
-  return JSON.parse(document.querySelector('#data').getAttribute('data-patterns')).map(pattern => {
57
-    pattern.id = pattern.name.toLowerCase().replace(/ +/g, '_');
58
-
59
-    return pattern;
60
-  });
61
-}
62
-
63
-window.onload = init;
64
-

+ 0
- 190
Searchbar/onsenui/css-components-src/previewer-src/components/app-page.js View File

@@ -1,190 +0,0 @@
1
-import {ComponentsPage} from './components-page';
2
-import {ComponentPage} from './component-page';
3
-import {CategoryPage} from './category-page';
4
-import {PatternsPage} from './patterns-page';
5
-import {PatternPage} from './pattern-page';
6
-import {NotFoundPage} from './notfound-page';
7
-import {getQueryParams, mergeQueryString, parseQueryString} from '../util';
8
-
9
-export const createAppPageComponent = ({components, categories}) => ({
10
-  el: '#app',
11
-  data: {
12
-    components,
13
-    categories
14
-  },
15
-  template: `
16
-    <div>
17
-      <div class="pv-side-navi">
18
-        <a class="pv-side-navi__title" href="/">
19
-          Onsen<br />
20
-          CSS<br />
21
-          Components
22
-        </a>
23
-
24
-        <div>
25
-          <a class="pv-side-navi__category" href="/">Components</a>
26
-          <div v-for="category in categories" class="pv-side-navi__category-item">
27
-            <a :href="'/categories/' + category.hash" class="pv-side-navi__item-link">{{category.name}}</a>
28
-          </div>
29
-          <a class="pv-side-navi__category" href="/patterns">Patterns</a>
30
-        </div>
31
-      </div>
32
-
33
-      <my-router :base-params="createParams()" />
34
-    </div>
35
-  `,
36
-  components: {
37
-    'my-router': createRouter()
38
-  },
39
-  methods: {
40
-    createParams() {
41
-      const params = {};
42
-
43
-      params.components = [].concat(this.components);
44
-      params.categories = [].concat(this.categories);
45
-
46
-      return params;
47
-    }
48
-  }
49
-});
50
-
51
-const createRouter = () => {
52
-  return {
53
-    props: ['baseParams'],
54
-    data: () => {
55
-      return {
56
-        component: ComponentsPage,
57
-        params: {},
58
-        query: getQueryParams()
59
-      };
60
-    },
61
-    created() {
62
-      // Load query string
63
-      page('*', (context, next) => {
64
-        requestAnimationFrame(() => {
65
-          context.query = parseQueryString(location.search.slice(0));
66
-          next();
67
-        });
68
-      });
69
-
70
-      page('*', (context, next) => {
71
-        document.body.scrollTop = document.body.scrollLeft = 0;
72
-
73
-        // Load selected theme css.
74
-        const theme = context.query.theme;
75
-        if (typeof theme === 'string' && theme !== '') {
76
-          document.querySelector('#theme-css').setAttribute('href', `/${theme}.css`);
77
-        } else {
78
-          document.querySelector('#theme-css').setAttribute('href', '/onsen-css-components.css');
79
-        }
80
-
81
-        next();
82
-      });
83
-
84
-      page('/components/:id', (context) => {
85
-        this.component = ComponentPage;
86
-        this.params = context.params;
87
-        this.query = context.query;
88
-      });
89
-
90
-      page('/categories/:id', (context) => {
91
-        this.component = CategoryPage;
92
-        this.params = context.params;
93
-        this.query = context.query;
94
-      });
95
-
96
-      page('/patterns', (context) => {
97
-        this.component = PatternsPage;
98
-        this.params = context.params;
99
-        this.query = context.query;
100
-      });
101
-
102
-      page('/patterns/:id', (context) => {
103
-        this.component = PatternPage;
104
-        this.params = context.params;
105
-        this.query = context.query;
106
-      });
107
-
108
-      page('/', (context) => {
109
-        this.component = ComponentsPage;
110
-        this.params = context.params;
111
-        this.query = context.query;
112
-      });
113
-
114
-      page('*', () => {
115
-        this.component = NotFoundPage;
116
-        this.params = context.params;
117
-        this.query = context.query;
118
-      });
119
-
120
-      page({click: false});
121
-    },
122
-    render(h) {
123
-      const props = {};
124
-
125
-      if (this.baseParams) {
126
-        for (let key in this.baseParams) {
127
-          if (this.baseParams.hasOwnProperty(key)) {
128
-            props[key] = this.baseParams[key];
129
-          }
130
-        }
131
-      }
132
-
133
-      for (let key in this.params) {
134
-        if (this.params.hasOwnProperty(key)) {
135
-          props[key] = this.params[key];
136
-        }
137
-      }
138
-
139
-      props.query = {};
140
-      for (let key in this.query) {
141
-        if (this.query.hasOwnProperty(key)) {
142
-          props.query[key] = this.query[key];
143
-        }
144
-      }
145
-
146
-      return h(this.component, {props});
147
-    }
148
-  };
149
-};
150
-
151
-document.body.addEventListener('click', e => {
152
-  if (e.metaKey || e.ctrlKey || e.shiftKey) {
153
-    return;
154
-  }
155
-
156
-  if (e.defaultPrevented) {
157
-    return;
158
-  }
159
-
160
-  // ensure link
161
-  let el = e.target;
162
-  while (el && 'A' !== el.nodeName) {
163
-    el = el.parentNode;
164
-  }
165
-  if (!el || 'A' !== el.nodeName) {
166
-    return;
167
-  }
168
-
169
-  // ensure non-hash for the same path
170
-  var link = el.getAttribute('href');
171
-  if (el.pathname === location.pathname && (el.hash || '#' === link)) {
172
-    return;
173
-  }
174
-
175
-  // Check for mailto: in the href
176
-  if (link && link.indexOf('mailto:') > -1) {
177
-    return;
178
-  }
179
-
180
-  // check target
181
-  if (el.target) {
182
-    return;
183
-  }
184
-  
185
-  // rebuild path
186
-  const path = el.pathname + mergeQueryString(el.search, location.search) + (el.hash || '');
187
-
188
-  e.preventDefault();
189
-  page.show(path);
190
-});

+ 0
- 36
Searchbar/onsenui/css-components-src/previewer-src/components/category-page.js View File

@@ -1,36 +0,0 @@
1
-import {PreviewComponent} from './preview-component';
2
-import {ThemeSelect} from './theme-select';
3
-
4
-export const CategoryPage = {
5
-  props: ['components', 'categories', 'id', 'query'],
6
-  template: `
7
-    <div class="pv-content">
8
-
9
-      <h2 class="pv-content__header">{{category.name}} Components</h2>
10
-
11
-      <theme-select :theme="query.theme" :query="query" />
12
-
13
-      <div class="pv-components">
14
-        <css-component v-for="component in filterComponents()" :component="component" :key="component.id" />
15
-      </div>
16
-    </div>
17
-  `,
18
-  components: {
19
-    'css-component': PreviewComponent,
20
-    'theme-select': ThemeSelect
21
-  },
22
-  computed: {
23
-    category() {
24
-      return this.categories.filter(category => category.hash === this.id)[0];
25
-    }
26
-  },
27
-  methods: {
28
-    filterComponents() {
29
-      const category = this.category;
30
-      const components = this.components.filter(component => {
31
-        return component.category === category.name;
32
-      });
33
-      return components;
34
-    },
35
-  }
36
-};

+ 0
- 32
Searchbar/onsenui/css-components-src/previewer-src/components/component-page.js View File

@@ -1,32 +0,0 @@
1
-import {ComponentExample} from './preview-component.js';
2
-import {ThemeSelect} from './theme-select';
3
-
4
-export const ComponentPage = {
5
-  props: ['components', 'id', 'query'],
6
-  components: {
7
-    'component-example': ComponentExample,
8
-    'theme-select': ThemeSelect
9
-  },
10
-  computed: {
11
-    component() {
12
-      return this.components.filter(component => component.id === this.id)[0];
13
-    }
14
-  },
15
-  template: `
16
-    <div class="pv-content" v-if="component">
17
-      <div>
18
-        <h2 class="pv-content__header">{{component.name}}</h2>
19
-
20
-        <theme-select :theme="query.theme" :query="query" />
21
-
22
-        <h3 class="pv-title-label">Example</h3>
23
-
24
-        <component-example :component="component" />
25
-
26
-        <h3 class="pv-title-label">HTML</h3>
27
-
28
-        <pre class="pv-markup">{{component.markup}}</pre>
29
-      </div>
30
-    </div>
31
-  `
32
-};

+ 0
- 68
Searchbar/onsenui/css-components-src/previewer-src/components/components-page.js View File

@@ -1,68 +0,0 @@
1
-import {PreviewComponent} from './preview-component';
2
-import {PlatformSelect} from './platform-select';
3
-import {ThemeSelect} from './theme-select';
4
-
5
-export const ComponentsPage = {
6
-  props: ['components', 'categories', 'query'],
7
-  template: `
8
-    <div class="pv-content">
9
-      <platform-select :platform="query.platform" />
10
-
11
-      <h2 class="pv-content__header">Components</h2>
12
-
13
-      <theme-select :theme="query.theme" :query="query" />
14
-
15
-      <div class="pv-components">
16
-        <css-component v-for="component in filterComponents" :component="component" :key="component.id" />
17
-      </div>
18
-    </div>
19
-  `,
20
-  data: () => ({
21
-    themes: window.themes
22
-  }),
23
-  components: {
24
-    'css-component': PreviewComponent,
25
-    'platform-select': PlatformSelect,
26
-    'theme-select': ThemeSelect
27
-  },
28
-  computed: {
29
-    filterComponents() {
30
-      const components = this.components;
31
-      if (this.query.platform === 'android') {
32
-        return components.filter(function(component) {
33
-          return component.name.match(/Material/);
34
-        });
35
-      } else if (this.query.platform === 'ios') {
36
-        return components.filter(function(component) {
37
-          return !component.name.match(/Material/);
38
-        });
39
-      }
40
-      return components;
41
-    }
42
-  },
43
-  methods: {
44
-    download(event) {
45
-      const theme = this.$refs.themeSelect.value;
46
-      if (!theme) {
47
-        window.open('/onsen-css-components.css');
48
-      } else {
49
-        window.open(`${theme}.css`);
50
-      }
51
-      event.preventDefault();
52
-    },
53
-    changeTheme(event) {
54
-      const theme = event.target.value;
55
-      const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
56
-
57
-      if (theme === 'onsen-css-components') {
58
-        if (suffix === '') {
59
-          page.show('/');
60
-        } else {
61
-          page.show(`?${suffix}`);
62
-        } 
63
-      } else {
64
-        page.show(`?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
65
-      }
66
-    }
67
-  }
68
-};

+ 0
- 9
Searchbar/onsenui/css-components-src/previewer-src/components/notfound-page.js View File

@@ -1,9 +0,0 @@
1
-
2
-export const NotFoundPage = {
3
-  props: ['components', 'categories', 'id', 'query'],
4
-  template: `
5
-    <div class="pv-content">
6
-      <h2 class="pv-content__header">Not Found</h2>
7
-    </div>
8
-  `,
9
-};

+ 0
- 33
Searchbar/onsenui/css-components-src/previewer-src/components/pattern-page.js View File

@@ -1,33 +0,0 @@
1
-import {ThemeSelect} from './theme-select';
2
-
3
-export const PatternPage = {
4
-  props: ['id', 'query'],
5
-  data() {
6
-    const pattern = window.patterns.filter(pattern => {
7
-      return pattern.id == this.id;
8
-    })[0];
9
-
10
-    return {pattern};
11
-  },
12
-  components: {
13
-    'theme-select': ThemeSelect
14
-  },
15
-  template: `
16
-    <div class="pv-content">
17
-      <div v-if="pattern">
18
-        <h2 class="pv-content__header">{{pattern.name}} Pattern</h2>
19
-
20
-        <theme-select :theme="query.theme" :query="query" />
21
-
22
-        <h3 class="pv-title-label">Example</h3>
23
-        <div>
24
-          <div class="pv-pattern__example"><div style="position: static" v-html="pattern.markup"></div></div>
25
-        </div>
26
-
27
-        <h3 class="pv-title-label">HTML</h3>
28
-
29
-        <pre class="pv-markup">{{pattern.markup}}</pre>
30
-      </div>
31
-    </div>
32
-  `,
33
-};

+ 0
- 49
Searchbar/onsenui/css-components-src/previewer-src/components/patterns-page.js View File

@@ -1,49 +0,0 @@
1
-import {PlatformSelect} from './platform-select';
2
-import {ThemeSelect} from './theme-select';
3
-
4
-export const PatternsPage = {
5
-  props: ['query'],
6
-  template: `
7
-    <div class="pv-content">
8
-      <platform-select :platform="query.platform" />
9
-
10
-      <h2 class="pv-content__header">Patterns</h2>
11
-
12
-      <theme-select :query="query" />
13
-
14
-      <div class="pv-patterns">
15
-        <div class="pv-pattern" v-for="pattern in filterPatterns">
16
-          <a class="pv-pattern__name pv-title-label" :href="'/patterns/' + pattern.id">{{pattern.name}}</a>
17
-          <div class="pv-pattern__example"><div v-html="pattern.markup" style="position: static"></div></div>
18
-        </div>
19
-      </div>
20
-    </div>
21
-  `,
22
-  data: () => ({
23
-    patterns: []
24
-  }),
25
-  components: {
26
-    'platform-select': PlatformSelect,
27
-    'theme-select': ThemeSelect
28
-  },
29
-  created() {
30
-    // Load patterns data.
31
-    this.patterns = window.patterns;
32
-  },
33
-  computed: {
34
-    filterPatterns() {
35
-      const patterns = this.patterns;
36
-
37
-      if (this.query.platform === 'android') {
38
-        return patterns.filter(function(pattern) {
39
-          return pattern.name.match(/Material/);
40
-        });
41
-      } else if (this.query.platform === 'ios') {
42
-        return patterns.filter(function(pattern) {
43
-          return !pattern.name.match(/Material/);
44
-        });
45
-      }
46
-      return patterns;
47
-    }
48
-  },
49
-};

+ 0
- 25
Searchbar/onsenui/css-components-src/previewer-src/components/platform-select.js View File

@@ -1,25 +0,0 @@
1
-
2
-export const PlatformSelect = {
3
-  props: ['platform'],
4
-  template: `
5
-    <div class="pv-platform-select">
6
-      <a class="pv-platform-select__link" 
7
-        :class="{'pv-platform-select__link--active': this.platform !== 'ios' && this.platform !== 'android'}"
8
-        :href="getLocation() + '?platform=all'">All</a>
9
-
10
-      <a class="pv-platform-select__link" 
11
-        :class="{'pv-platform-select__link--active': this.platform === 'ios'}"
12
-        :href="getLocation() + '?platform=ios'">iOS</a>
13
-
14
-      <a class="pv-platform-select__link"
15
-        :class="{'pv-platform-select__link--active': this.platform === 'android'}"
16
-        :href="getLocation() + '?platform=android'">Android</a>
17
-
18
-    </div>
19
-  `,
20
-  methods: {
21
-    getLocation() {
22
-      return location.pathname;
23
-    }
24
-  }
25
-};

+ 0
- 30
Searchbar/onsenui/css-components-src/previewer-src/components/preview-component.js View File

@@ -1,30 +0,0 @@
1
-
2
-export const ComponentExample = {
3
-  props: ['component'],
4
-  template: `
5
-      <div class="page pv-component-example" :class="{'page--material__background': isAndroid()}">
6
-        <!-- ontouchstart is a hack to enable :active CSS selector in iOS browsers. -->
7
-        <div style="width: 100%;" v-html="component.markup" ontouchstart=""></div>
8
-      </div>
9
-    `,
10
-  methods: {
11
-    isAndroid() {
12
-      return this.component.name.match(/Material/);
13
-    }
14
-  }
15
-};
16
-
17
-export const PreviewComponent = {
18
-  props: ['component'],
19
-  template: `
20
-      <div class="pv-component-preview">
21
-        <a class="pv-title-label" :href="'/components/' + component.id">{{component.name}}</a>
22
-
23
-        <component-example :component="component" />
24
-      </div>
25
-    `,
26
-  components: {
27
-    'component-example': ComponentExample
28
-  }
29
-};
30
-

+ 0
- 48
Searchbar/onsenui/css-components-src/previewer-src/components/theme-select.js View File

@@ -1,48 +0,0 @@
1
-
2
-export const ThemeSelect = {
3
-  props: ['query'],
4
-  template: `
5
-    <div class="pv-built-css">
6
-      <select ref="themeSelect" class="pv-built-css__select" @change="changeTheme($event)">
7
-        <option v-for="theme in themes" :value="theme">{{theme}}.css</option>
8
-      </select>
9
-      <button class="pv-built-css__button" @click="download($event)">Download</button>
10
-    </div>
11
-  `,
12
-  data() {
13
-    return {
14
-      themes: window.themes
15
-    };
16
-  },
17
-  mounted() {
18
-    if (this.query.theme) {
19
-      this.$refs.themeSelect.value = this.query.theme;
20
-    }
21
-  },
22
-  methods: {
23
-    download(event) {
24
-      const theme = this.$refs.themeSelect.value;
25
-      if (!theme) {
26
-        window.open('/onsen-css-components.css');
27
-      } else {
28
-        window.open(`${theme}.css`);
29
-      }
30
-      event.preventDefault();
31
-    },
32
-
33
-    changeTheme(event) {
34
-      const theme = event.target.value;
35
-      const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
36
-
37
-      if (theme === 'onsen-css-components') {
38
-        if (suffix === '') {
39
-          page.show(location.pathname);
40
-        } else {
41
-          page.show(`${location.pathname}?${suffix}`);
42
-        } 
43
-      } else {
44
-        page.show(`${location.pathname}?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
45
-      }
46
-    }
47
-  }
48
-};

+ 0
- 32
Searchbar/onsenui/css-components-src/previewer-src/index.html.eco View File

@@ -1,32 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
-<head>
4
-  <meta charset="utf-8">
5
-  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1,minimum-scale=1">
6
-  <base href="/">
7
-
8
-  <title>Onsen CSS Components</title>
9
-
10
-  <link rel="stylesheet" href="/onsen-css-components.css" id="theme-css" />
11
-  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/font_awesome/css/font-awesome.min.css">
12
-  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/ionicons/css/ionicons.min.css">
13
-  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/material-design-iconic-font/css/material-design-iconic-font.min.css">
14
-  <link rel="stylesheet" href="/style.css">
15
-
16
-
17
-</head>
18
-<body ontouchstart=""> <!-- Hack to activate :active CSS selector on iOS browsers.-->
19
-
20
-  <div id="app"></div>
21
-
22
-  <script src="https://unpkg.com/vue@2.4.2" async></script>
23
-  <script src="https://unpkg.com/page.js@4.13.3/page.js" async></script>
24
-  <script src="/app.gen.js" async></script>
25
-
26
-  <div id="data"
27
-    data-components="<%= @toJSON(@components) %>"
28
-    data-themes="<%= @toJSON(@themes) %>"
29
-    data-patterns="<%= @toJSON(@patterns) %>"></div>
30
-
31
-</body>
32
-</html>

+ 0
- 13
Searchbar/onsenui/css-components-src/previewer-src/select-icon.svg View File

@@ -1,13 +0,0 @@
1
-<?xml version="1.0" encoding="UTF-8"?>
2
-<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4
-    <title>select-icon</title>
5
-    <desc>Created with Sketch.</desc>
6
-    <defs></defs>
7
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8
-        <g id="select-icon" fill="#888888">
9
-            <polygon id="Triangle" points="3 0 6 3 0 3"></polygon>
10
-            <polygon id="Triangle" transform="translate(3.000000, 6.500000) scale(1, -1) translate(-3.000000, -6.500000) " points="3 5 6 8 0 8"></polygon>
11
-        </g>
12
-    </g>
13
-</svg>

+ 0
- 313
Searchbar/onsenui/css-components-src/previewer-src/style.css View File

@@ -1,313 +0,0 @@
1
-
2
-body {
3
-  margin: 0;
4
-  padding: 0;
5
-  position: static;
6
-  background-color: white;
7
-  overflow: visible;
8
-  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
9
-}
10
-
11
-* {
12
-  user-select: auto !important;
13
-}
14
-
15
-a,
16
-a:link,
17
-a:visited {
18
-  color: #999;
19
-  font-family: 'Helvetica Neue', 'Helevetica', sans-serif;
20
-}
21
-
22
-a:hover {
23
-  text-decoration: none;
24
-}
25
-
26
-.pv-content {
27
-  padding-left: 140px;
28
-  width: 100%;
29
-  box-sizing: border-box;
30
-}
31
-
32
-.pv-content__header {
33
-  font-size: 22px;
34
-  font-weight: 400;
35
-  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
36
-  color: #444;
37
-  margin: 18px 0 6px 0;
38
-  padding: 0;
39
-}
40
-
41
-.pv-components {
42
-  clear: both;
43
-  display: flex;
44
-  flex-wrap: wrap;
45
-  margin: 0 0 50vh -10px;
46
-}
47
-
48
-.pv-component-preview {
49
-  display: block;
50
-  width: 350px;
51
-  box-sizing: border-box;
52
-  margin: 0px 10px 6px 10px;
53
-}
54
-
55
-.pv-component-preview__link,
56
-.pv-component-preview__link:link,
57
-.pv-component-preview__link:visited {
58
-  color: #333;
59
-  text-decoration: none;
60
-}
61
-
62
-.pv-component-preview__link:hover {
63
-  text-decoration: underline;
64
-}
65
-
66
-.pv-component-example {
67
-  height: 201px;
68
-  text-align: center;
69
-  position: relative;
70
-  z-index: 0;
71
-  display: flex;
72
-  justify-content: center;
73
-  align-items: center;
74
-  text-align: center;
75
-  border-radius: 3px;
76
-  width: 350px;
77
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
78
-}
79
-
80
-.pv-patterns {
81
-  clear: both;
82
-  display: flex;
83
-  flex-wrap: wrap;
84
-  margin: 0 0 50vh -10px;
85
-}
86
-
87
-.pv-pattern {
88
-  width: 320px;
89
-  box-sizing: border-box;
90
-  display: inline-block;
91
-  margin: 0px 10px 6px 10px;
92
-}
93
-
94
-.pv-pattern__example {
95
-  display: block;
96
-  position: relative;
97
-  width: 320px;
98
-  height: 568px;
99
-  border-radius: 2px;
100
-  border: 1px solid rgba(0, 0, 0, 0.08);
101
-  box-sizing: border-box;
102
-}
103
-
104
-.pv-title-label,
105
-.pv-title-label:link,
106
-.pv-title-label:visited,
107
-.pv-title-label:hover {
108
-  font-size: 12px;
109
-  color: #444;
110
-  font-weight: 500;
111
-  line-height: 1.4;
112
-  text-decoration: none;
113
-  margin: 12px 0 4px 0;
114
-  display: inline-block;
115
-}
116
-
117
-a.pv-title-label:hover {
118
-  color: #999;
119
-}
120
-
121
-.pv-markup {
122
-  font-family: 'Menlo', monospace;
123
-  font-size: 13px;
124
-  line-height: 1.6;
125
-  color: #F4F9FF;
126
-  background-color: #1F2833;
127
-  padding: 22px;
128
-  width: 100%;
129
-  margin: 0;
130
-  user-select: text;
131
-  box-sizing: border-box;
132
-  overflow: auto;
133
-}
134
-
135
-.pv-side-navi {
136
-  float: left; 
137
-  position: fixed;
138
-  top: 0;
139
-  bottom: 0;
140
-  width: 140px;
141
-  box-sizing: border-box;
142
-  padding: 18px 0 18px 18px;
143
-  overflow-y: auto;
144
-}
145
-
146
-.pv-side-navi::-webkit-scrollbar { 
147
-  display: none; 
148
-}
149
-
150
-.pv-side-navi__title,
151
-.pv-side-navi__title:link,
152
-.pv-side-navi__title:visited {
153
-  font-size: 13px;
154
-  line-height: 18px;
155
-  margin: -6px -6px 20px -6px;
156
-  padding: 6px;
157
-  font-weight: 400;
158
-  display: block;
159
-  text-decoration: none;
160
-  color: #FF3726;
161
-  background-color: rgba(255, 26, 0, 0.08);
162
-  width: 95px;
163
-  box-sizing: border-box;
164
-}
165
-
166
-.pv-side-navi__category {
167
-  font-size: 13px;
168
-  font-weight: 500;
169
-  color: #444;
170
-  line-height: 23px;
171
-}
172
-
173
-.pv-side-navi__category:link,
174
-.pv-side-navi__category:visited {
175
-  color: #444;
176
-  text-decoration: none;
177
-}
178
-
179
-.pv-side-navi__category:link:hover,
180
-.pv-side-navi__category:visited:hover {
181
-  color: #999;
182
-}
183
-
184
-.pv-side-navi__category-item {
185
-  height: 23px;
186
-  line-height: 22px;
187
-  margin-left: 13px;
188
-}
189
-
190
-.pv-side-navi__item-link,
191
-.pv-side-navi__item-link:link,
192
-.pv-side-navi__item-link:visited {
193
-  font-size: 12px;
194
-  color: #444;
195
-  text-decoration: none;
196
-}
197
-
198
-.pv-side-navi__item-link:hover {
199
-  color: #999;
200
-}
201
-
202
-.pv-platform-select {
203
-  float: right;
204
-  margin: 0 18px 0 0;
205
-  display: flex;
206
-}
207
-
208
-.pv-platform-select__link,
209
-.pv-platform-select__link:link,
210
-.pv-platform-select__link:visited,
211
-.pv-platform-select__link:hover {
212
-  font-family: 'Helvetica Neue', 'Helevetica', sans-serif;
213
-  font-size: 12px;
214
-  text-decoration: none;
215
-  color: #999;
216
-  box-sizing: border-box;
217
-  padding: 2px 5px;
218
-  font-weight: 400;
219
-  margin: 0 1px;
220
-  border-radius: 3px;
221
-}
222
-
223
-.pv-platform-select__link--active,
224
-.pv-platform-select__link--active:link,
225
-.pv-platform-select__link--active:visited {
226
-  color: #444;
227
-  background-color: #eee;
228
-}
229
-
230
-.pv-built-css__select {
231
-  -webkit-appearance: none;
232
-  appearance: none;
233
-  height: 25px;
234
-  line-height: 25px;
235
-  border: 1px solid #d9d9d9;
236
-  border-radius: 2px;
237
-  padding: 0 20px 0 4px;
238
-  color: #222;
239
-  position: relative;
240
-  background-image: url(/select-icon.svg);
241
-  background-repeat: no-repeat;
242
-  background-position: right 6px center;
243
-}
244
-
245
-.pv-built-css__button,
246
-.pv-built-css__button:link,
247
-.pv-built-css__button:visited,
248
-.pv-built-css__button:hover {
249
-  background-color: #F0F0F0;
250
-  border-radius: 2px;
251
-  border: 1px solid #f0f0f0;
252
-  line-height: 25px;
253
-  height: 25px;
254
-  font-size: 12px;
255
-  padding: 0 6px;
256
-  display: inline-block;
257
-  color: #444;
258
-  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
259
-  text-decoration: none;
260
-  box-sizing: border-box;
261
-}
262
-
263
-.pv-built-css__button:active {
264
-  opacity: 0.6;
265
-}
266
-
267
-.pv-built-css__button:focus {
268
-  outline: none;
269
-}
270
-
271
-@media (max-width: 480px) {
272
-  .pv-side-navi {
273
-    display: none;
274
-  }
275
-
276
-  .pv-platform-select {
277
-    display: none;
278
-  }
279
-
280
-  .pv-content {
281
-    padding: 0 10px;
282
-  }
283
-
284
-  .pv-components {
285
-    display: block;
286
-    margin-left: 0;
287
-  }
288
-
289
-  .pv-component-preview {
290
-    width: auto;
291
-    margin-right: 0px;
292
-    margin-left: 0px;
293
-  }
294
-
295
-  .pv-component-example {
296
-    width: auto;
297
-    border-radius: 0;
298
-    margin-right: -10px;
299
-    margin-left: -10px;
300
-    box-shadow: none;
301
-  }
302
-
303
-  .pv-component-markup {
304
-    margin-right: -10px;
305
-    margin-left: -10px;
306
-    width: auto;
307
-  }
308
-
309
-  .pv-build-css {
310
-    display: none;
311
-  }
312
-}
313
-

+ 0
- 31
Searchbar/onsenui/css-components-src/previewer-src/util.js View File

@@ -1,31 +0,0 @@
1
-
2
-export function getQueryParams() {
3
-  return parseQueryString(window.location.search);
4
-}
5
-
6
-export function parseQueryString(queryString) {
7
-  if (queryString.length <= 1) {
8
-    return {};
9
-  }
10
-
11
-  const params = [];
12
-  const pairs = queryString.slice(1).split('&');    
13
-  let pair;
14
-  for (var i = 0; i < pairs.length; i++) {
15
-    pair = pairs[i].split('=');
16
-    params[pair[0]] = pair[1];
17
-  }
18
-
19
-  return params;
20
-}
21
-
22
-/**
23
- * @param {string} prefer
24
- * @param {string} base
25
- */
26
-export function mergeQueryString(prefer, base) {
27
-  const params = Object.assign({}, parseQueryString(base), parseQueryString(prefer));
28
-  const result = '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
29
-
30
-  return result === '?' ? '' : result;
31
-}

+ 0
- 229
Searchbar/onsenui/css-components-src/src/components/action-sheet.css View File

@@ -1,229 +0,0 @@
1
-
2
-:root {
3
-  --action-sheet-mask-color: rgba(0, 0, 0, 0.1);
4
-
5
-  --material-action-sheet-mask-color: rgba(0, 0, 0, 0.2);
6
-}
7
-
8
-/*~
9
-  name: Action Sheet
10
-  category: Action Sheet
11
-  markup: |
12
-    <div class="action-sheet-mask"></div>
13
-    <div class="action-sheet">
14
-      <div class="action-sheet-title">Title</div>
15
-      <button class="action-sheet-button">Label</button>
16
-      <button class="action-sheet-button">Cancel</button>
17
-    </div>
18
-*/
19
-
20
-/*~
21
-  name: Action Sheet with Delete Label
22
-  category: Action Sheet
23
-  markup: |
24
-    <div class="action-sheet-mask"></div>
25
-    <div class="action-sheet">
26
-      <button class="action-sheet-button">Label</button>
27
-      <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
28
-      <button class="action-sheet-button">Cancel</button>
29
-    </div>
30
-*/
31
-
32
-.action-sheet {
33
-  @apply(--reset-font);
34
-  cursor: default;
35
-  position: absolute;
36
-  left: 10px; /* iOS 9, 10, 11 */
37
-  right: 10px; /* iOS 9, 10, 11 */
38
-  bottom: 10px; /* iOS 9, 10, 11 */
39
-  z-index: 2;
40
-}
41
-
42
-.action-sheet-button {
43
-  box-sizing: border-box;
44
-  height: 56px;
45
-  font-size: 20px;
46
-  text-align: center;
47
-  color: var(--action-sheet-button-color);
48
-  background-color: var(--action-sheet-button-background-color);
49
-  border-radius: 0;
50
-  line-height: 56px;
51
-  border: none;
52
-  appearance: none;
53
-  display: block;
54
-  width: 100%;
55
-  @apply(--ellipsis);
56
-  background-size: 100% 1px;
57
-  background-repeat: no-repeat;
58
-  background-position: bottom;
59
-  background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
60
-  @media (--retina-query) {
61
-    background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
62
-  }
63
-}
64
-
65
-.action-sheet-button:first-child {
66
-  border-top-left-radius: 12px;
67
-  border-top-right-radius: 12px;
68
-}
69
-
70
-.action-sheet-button:active {
71
-  background-color: var(--action-sheet-button-active-background-color);
72
-  background-image: none;
73
-}
74
-
75
-.action-sheet-button:focus {
76
-  outline: none;
77
-}
78
-
79
-.action-sheet-button:nth-last-of-type(2) {
80
-  border-bottom-right-radius: 12px;
81
-  border-bottom-left-radius: 12px;
82
-  background-image: none;
83
-}
84
-
85
-.action-sheet-button:last-of-type {
86
-  border-radius: 12px;
87
-  margin: 8px 0 0 0; /* iOS 9, 10, 11 */
88
-  background-color: var(--action-sheet-cancel-button-background-color);
89
-  background-image: none;
90
-  font-weight: 600;
91
-}
92
-
93
-.action-sheet-button:last-of-type:active {
94
-  background-color: var(--action-sheet-button-active-background-color);
95
-}
96
-
97
-.action-sheet-button--destructive {
98
-  color: var(--action-sheet-button-destructive-color);
99
-}
100
-
101
-.action-sheet-title {
102
-  box-sizing: border-box;
103
-  height: 56px;
104
-  font-size: 13px;
105
-  color: var(--action-sheet-title-color);
106
-  text-align: center;
107
-  background-color: var(--action-sheet-button-background-color);
108
-  line-height: 56px;
109
-  @apply(--ellipsis);
110
-  background-size: 100% 1px;
111
-  background-repeat: no-repeat;
112
-  background-position: bottom;
113
-  background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 100%);
114
-  @media (--retina-query) {
115
-    background-image: linear-gradient(0deg, var(--action-sheet-button-separator-color), var(--action-sheet-button-separator-color) 50%, transparent 50%);
116
-  }
117
-}
118
-
119
-.action-sheet-title:first-child {
120
-  border-top-left-radius: 12px;
121
-  border-top-right-radius: 12px;
122
-}
123
-
124
-.action-sheet-icon {
125
-  display: none;
126
-}
127
-
128
-.action-sheet-mask {
129
-  position: absolute;
130
-  left: 0;
131
-  top: 0;
132
-  right: 0;
133
-  bottom: 0;
134
-  background-color: var(--action-sheet-mask-color);
135
-  z-index: 1;
136
-}
137
-
138
-/*~
139
-  name: Material Action Sheet
140
-  category: Action Sheet
141
-  markup: |
142
-    <div class="action-sheet-mask action-sheet-mask--material"></div>
143
-    <div class="action-sheet action-sheet--material">
144
-      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
145
-      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
146
-      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
147
-    </div>
148
-*/
149
-
150
-/*~
151
-  name: Material Action Sheet with Title
152
-  category: Action Sheet
153
-  markup: |
154
-    <div class="action-sheet-mask action-sheet-mask--material"></div>
155
-    <div class="action-sheet action-sheet--material">
156
-      <div class="action-sheet-title action-sheet-title--material">Title</div>
157
-      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
158
-      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
159
-    </div>
160
-*/
161
-
162
-.action-sheet--material {
163
-  left: 0;
164
-  right: 0;
165
-  bottom: 0;
166
-  @apply(--material-shadow-5);
167
-}
168
-
169
-.action-sheet-title--material {
170
-  @apply(--material-font);
171
-  border-radius: 0;
172
-  background-image: none;
173
-  text-align: left;
174
-  height: 56px;
175
-  line-height: 56px;
176
-  font-size: 16px;
177
-  padding: 0 0 0 16px;
178
-  color: var(--material-action-sheet-text-color);
179
-  background-color: white;
180
-  font-weight: 400;
181
-}
182
-
183
-.action-sheet-title--material:first-child {
184
-  border-radius: 0;
185
-}
186
-
187
-.action-sheet-button--material {
188
-  @apply(--material-font);
189
-  border-radius: 0;
190
-  background-image: none;
191
-  height: 52px;
192
-  line-height: 52px;
193
-  text-align: left;
194
-  font-size: 16px;
195
-  padding: 0 0 0 16px;
196
-  color: var(--material-action-sheet-text-color);
197
-  font-weight: 400;
198
-  background-color: white;
199
-}
200
-
201
-.action-sheet-button--material:first-child {
202
-  border-radius: 0;
203
-}
204
-
205
-.action-sheet-button--material:nth-last-of-type(2) {
206
-  border-radius: 0;
207
-}
208
-
209
-.action-sheet-button--material:last-of-type {
210
-  margin: 0;
211
-  border-radius: 0;
212
-  font-weight: 400;
213
-  background-color: white;
214
-}
215
-
216
-.action-sheet-icon--material {
217
-  display: inline-block;
218
-  float: left;
219
-  height: 52px;
220
-  line-height: 52px;
221
-  margin-right: 32px;
222
-  font-size: 26px;
223
-  width: 0.8em;
224
-  text-align: center;
225
-}
226
-
227
-.action-sheet-mask--material {
228
-  background-color: var(--material-action-sheet-mask-color);
229
-}

+ 0
- 328
Searchbar/onsenui/css-components-src/src/components/alert-dialog.css View File

@@ -1,328 +0,0 @@
1
-
2
-:root {
3
-  --retina-alert-dialog-button-border: {
4
-    @media (--retina-query) {
5
-      border-top: none;
6
-      background-size: 100% 1px;
7
-      background-repeat: no-repeat;
8
-      background-position: top;
9
-      background-image: linear-gradient(180deg, var(--alert-dialog-separator-color), var(--alert-dialog-separator-color) 50%, transparent 50%);
10
-    }
11
-  }
12
-}
13
-
14
-/*~
15
-  name: Alert Dialog
16
-  category: Alert Dialog
17
-  elements: ons-alert-dialog
18
-  markup: |
19
-    <div class="alert-dialog-mask"></div>
20
-    <div class="alert-dialog">
21
-      <div class="alert-dialog-container">
22
-        <div class="alert-dialog-title">Alert</div>
23
-
24
-        <div class="alert-dialog-content">
25
-          Hello World!
26
-        </div>
27
-
28
-        <div class="alert-dialog-footer">
29
-          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
30
-        </div>
31
-      </div>
32
-    </div>
33
-*/
34
-
35
-.alert-dialog {
36
-  @apply(--reset-box-model);
37
-  @apply(--reset-base);
38
-  @apply(--reset-cursor);
39
-  @apply(--reset-font);
40
-  position: absolute;
41
-  top: 50%;
42
-  left: 50%;
43
-  transform: translate(-50%, -50%);
44
-  width: 270px;
45
-  margin: auto;
46
-  background-color: var(--alert-dialog-background-color);
47
-  border-radius: 8px;
48
-  overflow: visible;
49
-  max-width: 95%;
50
-  color: var(--alert-dialog-text-color);
51
-}
52
-
53
-.alert-dialog-container {
54
-  height: inherit;
55
-  padding-top: 16px;
56
-  overflow: hidden;
57
-}
58
-
59
-.alert-dialog-title {
60
-  @apply(--reset-font);
61
-  font-size: var(--font-size);
62
-  font-weight: var(--font-weight--large);
63
-  padding: 0 8px;
64
-  text-align: center;
65
-  color: var(--alert-dialog-text-color);
66
-}
67
-
68
-.alert-dialog-content {
69
-  @apply(--reset-box-model);
70
-  padding: 4px 12px 8px;
71
-  font-size: var(--font-size--mini);
72
-  min-height: 36px;
73
-  text-align: center;
74
-  color: var(--alert-dialog-text-color);
75
-}
76
-
77
-.alert-dialog-footer {
78
-  width: 100%;
79
-}
80
-
81
-.alert-dialog-button {
82
-  @apply(--reset-box-model);
83
-  @apply(--reset-base);
84
-  @apply(--reset-font);
85
-  @apply(--reset-cursor);
86
-  @apply(--ellipsis);
87
-  text-decoration: none;
88
-  letter-spacing: 0;
89
-  vertical-align: middle;
90
-  border: none;
91
-  border-top: 1px solid var(--alert-dialog-separator-color);
92
-  font-size: calc(var(--font-size) - 1px);
93
-  padding: 0 8px;
94
-  margin: 0;
95
-  display: block;
96
-  width: 100%;
97
-  background-color: transparent;
98
-  text-align: center;
99
-  height: 44px;
100
-  line-height: 44px;
101
-  outline: none;
102
-  color: var(--alert-dialog-button-color);
103
-  @apply(--retina-alert-dialog-button-border);
104
-}
105
-
106
-.alert-dialog-button:active {
107
-  background-color: rgba(0, 0, 0, 0.05);
108
-}
109
-
110
-.alert-dialog-button--primal {
111
-  font-weight: var(--font-weight--large);
112
-}
113
-
114
-.alert-dialog-footer--rowfooter {
115
-  white-space: nowrap;
116
-  display: flex;
117
-  flex-wrap: wrap;
118
-}
119
-
120
-.alert-dialog-button--rowfooter {
121
-  flex: 1;
122
-  display: block;
123
-  width: 100%;
124
-  border-left: 1px solid var(--alert-dialog-separator-color);
125
-  @media (--retina-query) {
126
-    border-top: none;
127
-    border-left: none;
128
-    background-size: 100% 1px, 1px 100%;
129
-    background-repeat: no-repeat;
130
-    background-position: top, left;
131
-    background-image:
132
-      linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%),
133
-      linear-gradient(90deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
134
-  }
135
-}
136
-
137
-.alert-dialog-button--rowfooter:first-child {
138
-  border-left: none;
139
-  @media (--retina-query) {
140
-    border-top: none;
141
-    background-size: 100% 1px;
142
-    background-repeat: no-repeat;
143
-    background-position: top, left;
144
-    background-image: linear-gradient(0deg, transparent, transparent 50%, var(--alert-dialog-separator-color) 50%);
145
-  }
146
-}
147
-
148
-.alert-dialog-mask {
149
-  @apply(--reset-base);
150
-  @apply(--reset-cursor);
151
-  position: absolute;
152
-  top: 0;
153
-  right: 0;
154
-  left: 0;
155
-  bottom: 0;
156
-  background-color: rgba(0, 0, 0, 0.2);
157
-}
158
-
159
-/*~
160
-  name: Alert Dialog without Title
161
-  category: Alert Dialog
162
-  elements: ons-alert-dialog
163
-  markup: |
164
-    <div class="alert-dialog-mask"></div>
165
-    <div class="alert-dialog">
166
-      <div class="alert-dialog-container">
167
-        <div class="alert-dialog-content">
168
-          Hello World!
169
-        </div>
170
-
171
-        <div class="alert-dialog-footer">
172
-          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
173
-        </div>
174
-      </div>
175
-    </div>
176
-*/
177
-
178
-/*~
179
-  name: Alert Dialog with Multiple Buttons
180
-  category: Alert Dialog
181
-  elements: ons-alert-dialog
182
-  markup: |
183
-    <div class="alert-dialog-mask"></div>
184
-    <div class="alert-dialog">
185
-      <div class="alert-dialog-container">
186
-        <div class="alert-dialog-content">
187
-          Hello World!
188
-        </div>
189
-
190
-        <div class="alert-dialog-footer">
191
-          <button class="alert-dialog-button">Cancel</button>
192
-          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
193
-        </div>
194
-      </div>
195
-    </div>
196
-*/
197
-
198
-/*~
199
-  name: Alert Dialog with Multiple Buttons 2
200
-  category: Alert Dialog
201
-  elements: ons-alert-dialog
202
-  markup: |
203
-    <div class="alert-dialog-mask"></div>
204
-    <div class="alert-dialog">
205
-      <div class="alert-dialog-container">
206
-        <div class="alert-dialog-title">Alert</div>
207
-
208
-        <div class="alert-dialog-content">
209
-          Hello World!
210
-        </div>
211
-
212
-        <div class="alert-dialog-footer alert-dialog-footer--rowfooter">
213
-          <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
214
-          <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
215
-          <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
216
-        </div>
217
-      </div>
218
-    </div>
219
-*/
220
-
221
-/*~
222
-  name: Material Alert Dialog
223
-  category: Alert Dialog
224
-  elements: ons-alert-dialog
225
-  markup: |
226
-    <div class="alert-dialog-mask alert-dialog-mask--material"></div>
227
-    <div class="alert-dialog alert-dialog--material">
228
-      <div class="alert-dialog-container alert-dialog-container--material">
229
-        <div class="alert-dialog-title alert-dialog-title--material">