"
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 | "ignore": [
27 | ".npmignore"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/FontAwesome.otf
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.eot
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.ttf
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff2
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.eot
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.ttf
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/ionicons/fonts/ionicons.woff
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/css/onsenui.css:
--------------------------------------------------------------------------------
1 | /*! onsenui - v2.0.0-rc.1 - 2016-04-28 */
2 | /*
3 | Copyright 2013-2015 ASIAL CORPORATION
4 |
5 | Licensed under the Apache License, Version 2.0 (the "License");
6 | you may not use this file except in compliance with the License.
7 | You may obtain a copy of the License at
8 |
9 | http://www.apache.org/licenses/LICENSE-2.0
10 |
11 | Unless required by applicable law or agreed to in writing, software
12 | distributed under the License is distributed on an "AS IS" BASIS,
13 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | See the License for the specific language governing permissions and
15 | limitations under the License.
16 |
17 | */
18 |
19 | @import url("font_awesome/css/font-awesome.min.css");
20 | @import url("ionicons/css/ionicons.min.css");
21 | @import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
22 |
23 | /* custom elements */
24 | ons-page, ons-navigator,
25 | ons-split-view, ons-sliding-menu, ons-tabbar,
26 | ons-gesture-detector {
27 | display: block;
28 | }
29 |
30 | ons-navigator,
31 | ons-tabbar {
32 | position: absolute;
33 | top: 0;
34 | left: 0;
35 | bottom: 0;
36 | right: 0;
37 | overflow: hidden;
38 | }
39 |
40 | ons-tab {
41 | -webkit-transform: translate3d(0, 0, 0);
42 | transform: translate3d(0, 0, 0);
43 | }
44 |
45 | ons-page, ons-navigator, ons-tabbar, ons-sliding-menu, ons-split-view {
46 | z-index: 2;
47 | }
48 |
49 | ons-fab {
50 | z-index: 3;
51 | }
52 |
53 | * {
54 | -webkit-touch-callout: none;
55 | -webkit-user-select: none;
56 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
57 | }
58 |
59 | input, textarea {
60 | -webkit-user-select: auto;
61 | }
62 |
63 | ons-toolbar:not([inline]), ons-bottom-toolbar {
64 | position: absolute;
65 | left: 0;
66 | right: 0;
67 | z-index: 10000;
68 | }
69 | ons-toolbar:not([inline]) {
70 | top: 0;
71 | }
72 | ons-bottom-toolbar {
73 | bottom: 0;
74 | }
75 |
76 | .page, .page__content {
77 | background-color: transparent !important;
78 | background: transparent !important;
79 | }
80 |
81 | .page__content {
82 | overflow: auto;
83 | -webkit-overflow-scrolling: touch;
84 | z-index: 0;
85 | -ms-touch-action: pan-y;
86 | }
87 |
88 | .navigation-bar + .page__background + .page__content {
89 | margin-top: -1px;
90 | top: 44px;
91 | }
92 |
93 | .navigation-bar--material + .page__background + .page__content {
94 | top: 56px;
95 | }
96 |
97 | .page[status-bar-fill] > .page__content {
98 | top: 20px;
99 | }
100 |
101 | .page[status-bar-fill] > .navigation-bar {
102 | padding-top: 20px;
103 | box-sizing: content-box;
104 | }
105 |
106 | .page[status-bar-fill] > .navigation-bar + .page__background + .page__content {
107 | top: 64px;
108 | }
109 |
110 | .page[status-bar-fill] > .navigation-bar--material + .page__background + .page__content {
111 | top: 76px;
112 | }
113 |
114 | ons-tabbar[status-bar-fill] > .tab-bar--top__content {
115 | top: 71px;
116 | }
117 |
118 | ons-tabbar[status-bar-fill] > .tab-bar--top {
119 | padding-top: 22px;
120 | }
121 |
122 | ons-tabbar[position="top"] .page[status-bar-fill] > .page__content {
123 | top: 0px;
124 | }
125 |
126 | .navigation-bar + .page__background + .page__content ons-tabbar[status-bar-fill] > .tab-bar--top {
127 | top: 0px;
128 | }
129 |
130 | .navigation-bar + .page__background + .page__content ons-tabbar[status-bar-fill] > .tab-bar--top__content {
131 | top: 49px;
132 | }
133 |
134 | .page-with-bottom-toolbar > .page__content {
135 | bottom: 44px;
136 | }
137 |
138 | ons-dialog[disabled] > .dialog,
139 | ons-alert-dialog[disabled],
140 | ons-popover[disabled] {
141 | pointer-events: none;
142 | opacity: 0.75;
143 | }
144 |
145 | ons-list-item[disabled] {
146 | pointer-events: none;
147 | }
148 |
149 | ons-pull-hook {
150 | position: absolute;
151 | left: 0;
152 | right: 0;
153 | margin: auto;
154 | text-align: center;
155 | z-index: 20002;
156 | }
157 |
158 | ons-splitter {
159 | overflow: hidden;
160 | }
161 |
162 | ons-splitter, ons-splitter-mask, ons-splitter-content, ons-splitter-side {
163 | display: block;
164 | position: absolute;
165 | left: 0;
166 | right: 0;
167 | top: 0;
168 | bottom: 0;
169 | box-sizing: border-box;
170 | z-index: 0;
171 | }
172 |
173 | ons-splitter-mask {
174 | z-index: 2;
175 | background-color: rgba(0, 0, 0, 0.1);
176 | display: none;
177 | opacity: 0;
178 | }
179 |
180 | ons-splitter-content {
181 | z-index: 1;
182 | }
183 |
184 | ons-splitter-side {
185 | right: auto;
186 | z-index: 1;
187 | }
188 |
189 | ons-splitter-side[side="right"] {
190 | right: 0;
191 | left: auto;
192 | }
193 |
194 | ons-splitter-side[mode="collapse"] {
195 | z-index: 3;
196 | left: auto;
197 | right: 100%;
198 | }
199 |
200 | ons-splitter-side[side="right"][mode="collapse"] {
201 | right: auto;
202 | left: 100%;
203 | }
204 |
205 | ons-toolbar-button > ons-icon[icon*="ion-"] {
206 | font-size: 26px;
207 | }
208 |
209 | ons-range {
210 | display: inline-block;
211 | }
212 |
213 | ons-range > input {
214 | min-width: 50px;
215 | width: 100%;
216 | }
217 |
218 | /*
219 | Copyright 2013-2015 ASIAL CORPORATION
220 |
221 | Licensed under the Apache License, Version 2.0 (the "License");
222 | you may not use this file except in compliance with the License.
223 | You may obtain a copy of the License at
224 |
225 | http://www.apache.org/licenses/LICENSE-2.0
226 |
227 | Unless required by applicable law or agreed to in writing, software
228 | distributed under the License is distributed on an "AS IS" BASIS,
229 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
230 | See the License for the specific language governing permissions and
231 | limitations under the License.
232 |
233 | */
234 |
235 | ons-carousel {
236 | display: block;
237 | position: relative;
238 | width: 100%;
239 | overflow: hidden;
240 | }
241 |
242 | ons-carousel-item {
243 | display: block;
244 | height: 100%;
245 | visibility: hidden;
246 | }
247 |
248 | ons-carousel[fullscreen] {
249 | position: absolute;
250 | top: 0px;
251 | right: 0px;
252 | left: 0px;
253 | bottom: 0px;
254 | box-sizing: border-box;
255 | }
256 |
257 | ons-carousel[disabled] {
258 | pointer-events: none;
259 | opacity: 0.75;
260 | }
261 |
262 | ons-row {
263 | display: -webkit-box;
264 | display: -moz-flex;
265 | display: flex;
266 | flex-wrap: wrap;
267 | width: 100%;
268 | box-sizing: border-box;
269 | }
270 |
271 | ons-row[vertical-align="top"], ons-row[align="top"] {
272 | -webkit-box-align: start;
273 | box-align: start;
274 | -moz-align-items: flex-start;
275 | -ms-grid-row-align: flex-start;
276 | align-items: flex-start;
277 | }
278 |
279 | ons-row[vertical-align="bottom"], ons-row[align="bottom"] {
280 | -webkit-box-align: end;
281 | box-align: end;
282 | -moz-align-items: flex-end;
283 | -ms-grid-row-align: flex-end;
284 | align-items: flex-end;
285 | }
286 |
287 | ons-row[vertical-align="center"], ons-row[align="center"] {
288 | -webkit-box-align: center;
289 | box-align: center;
290 | -moz-align-items: center;
291 | -ms-grid-row-align: center;
292 | align-items: center;
293 | text-align: inherit;
294 | }
295 |
296 | ons-row + ons-row {
297 | padding-top: 0;
298 | }
299 |
300 | ons-col {
301 | -webkit-box-flex: 1;
302 | -moz-flex: 1;
303 | flex: 1;
304 | display: block;
305 | width: 100%;
306 | box-sizing: border-box;
307 | }
308 |
309 | ons-col[vertical-align="top"], ons-col[align="top"] {
310 | align-self: flex-start;
311 | }
312 |
313 | ons-col[vertical-align="bottom"], ons-col[align="bottom"] {
314 | align-self: flex-end; }
315 |
316 | ons-col[vertical-align="center"], ons-col[align="center"] {
317 | -webkit-align-self: center;
318 | -moz-align-self: center;
319 | -ms-flex-item-align: center;
320 | text-align: inherit;
321 | }
322 |
323 |
324 | /*
325 | Copyright 2013-2015 ASIAL CORPORATION
326 |
327 | Licensed under the Apache License, Version 2.0 (the "License");
328 | you may not use this file except in compliance with the License.
329 | You may obtain a copy of the License at
330 |
331 | http://www.apache.org/licenses/LICENSE-2.0
332 |
333 | Unless required by applicable law or agreed to in writing, software
334 | distributed under the License is distributed on an "AS IS" BASIS,
335 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
336 | See the License for the specific language governing permissions and
337 | limitations under the License.
338 |
339 | */
340 |
341 | .ons-icon {
342 | display: inline-block;
343 | font-style: normal;
344 | font-weight: normal;
345 | -webkit-font-smoothing: antialiased;
346 | -moz-osx-font-smoothing: grayscale;
347 | }
348 |
349 | .ons-icon--ion {
350 | line-height: 0.75em;
351 | vertical-align: -25%;
352 | }
353 |
354 | ons-icon[spin] {
355 | -webkit-animation: ons-icon-spin 2s infinite linear;
356 | animation: ons-icon-spin 2s infinite linear;
357 | }
358 |
359 | @-webkit-keyframes ons-icon-spin {
360 | 0% {
361 | -webkit-transform: rotate(0deg);
362 | }
363 | 100% {
364 | -webkit-transform: rotate(359deg);
365 | }
366 | }
367 |
368 | @keyframes ons-icon-spin {
369 | 0% {
370 | -webkit-transform: rotate(0deg);
371 | transform: rotate(0deg);
372 | }
373 | 100% {
374 | -webkit-transform: rotate(359deg);
375 | transform: rotate(359deg);
376 | }
377 | }
378 |
379 | .ons-icon[rotate="90"] {
380 | -webkit-transform: rotate(90deg);
381 | transform: rotate(90deg);
382 | }
383 |
384 | .ons-icon[rotate="180"] {
385 | -webkit-transform: rotate(180deg);
386 | transform: rotate(180deg);
387 | }
388 |
389 | .ons-icon[rotate="270"] {
390 | -webkit-transform: rotate(270deg);
391 | transform: rotate(270deg);
392 | }
393 |
394 | ons-icon[fixed-width] {
395 | width: 1.28571429em;
396 | text-align: center;
397 | }
398 |
399 | .ons-icon--lg {
400 | font-size: 1.33333333em;
401 | line-height: 0.75em;
402 | vertical-align: -15%;
403 | }
404 |
405 | .ons-icon--2x {
406 | font-size: 2em;
407 | }
408 |
409 | .ons-icon--3x {
410 | font-size: 3em;
411 | }
412 |
413 | .ons-icon--4x {
414 | font-size: 4em;
415 | }
416 |
417 | .ons-icon--5x {
418 | font-size: 5em;
419 | }
420 |
421 | ons-input {
422 | display: inline-block;
423 | position: relative;
424 | }
425 |
426 | ons-input .text-input__container {
427 | width: 100%;
428 | display: inline-block;
429 | }
430 |
431 | ons-input .text-input--material__label {
432 | position: absolute;
433 | left: 0px;
434 | top: 2px;
435 | font-size: 16px;
436 | font-weight: 400;
437 | font-family: 'Roboto', 'Noto', sans-serif;
438 | pointer-events: none;
439 | }
440 |
441 | ons-input .text-input__label:not(.text-input--material__label) {
442 | display: none;
443 | }
444 |
445 | ons-input .text-input__label--active {
446 | transform: translate(0, -75%) scale(0.75);
447 | -webkit-transform: translate(0, -75%) scale(0.75);
448 | transform-origin: left top;
449 | -webkit-transform-origin: left top;
450 | -webkit-transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
451 | transition: color 0.1s ease-in, -webkit-transform 0.1s ease-in;
452 | transition: transform 0.1s ease-in, color 0.1s ease-in;
453 | transition: transform 0.1s ease-in, color 0.1s ease-in, -webkit-transform 0.1s ease-in;
454 | -webkit-transition: transform 0.1s ease-in, color 0.1s ease-in;
455 | }
456 |
457 | ons-input:not([float]) .text-input__label--active {
458 | display: none;
459 | }
460 |
461 | ons-input[disabled] {
462 | opacity: 0.5;
463 | pointer-events: none;
464 | }
465 |
466 | ons-input input.text-input--material::-webkit-input-placeholder {
467 | color: transparent;
468 | }
469 |
470 | ons-input input.text-input--material::-moz-placeholder {
471 | color: transparent;
472 | }
473 |
474 | ons-input input.text-input--material:-ms-input-placeholder {
475 | color: transparent;
476 | }
477 |
478 | /*
479 | Copyright 2013-2015 ASIAL CORPORATION
480 |
481 | Licensed under the Apache License, Version 2.0 (the "License");
482 | you may not use this file except in compliance with the License.
483 | You may obtain a copy of the License at
484 |
485 | http://www.apache.org/licenses/LICENSE-2.0
486 |
487 | Unless required by applicable law or agreed to in writing, software
488 | distributed under the License is distributed on an "AS IS" BASIS,
489 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
490 | See the License for the specific language governing permissions and
491 | limitations under the License.
492 |
493 | */
494 |
495 | ons-progress-bar {
496 | display: block;
497 | }
498 |
499 | ons-progress-circular {
500 | display: inline-block;
501 | width: 42px;
502 | height: 42px;
503 | }
504 |
505 | ons-progress-circular > svg.progress-circular {
506 | width: 100%;
507 | height: 100%;
508 | }
509 |
510 | /*
511 | Copyright 2013-2015 ASIAL CORPORATION
512 |
513 | Licensed under the Apache License, Version 2.0 (the "License");
514 | you may not use this file except in compliance with the License.
515 | You may obtain a copy of the License at
516 |
517 | http://www.apache.org/licenses/LICENSE-2.0
518 |
519 | Unless required by applicable law or agreed to in writing, software
520 | distributed under the License is distributed on an "AS IS" BASIS,
521 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
522 | See the License for the specific language governing permissions and
523 | limitations under the License.
524 |
525 | */
526 | .ripple {
527 | display: block;
528 | position: absolute;
529 | overflow: hidden;
530 | top: 0;
531 | left: 0;
532 | right: 0;
533 | bottom: 0;
534 | pointer-events: none;
535 | }
536 |
537 | ons-list-item .ripple__wave, ons-list-item .ripple__background,
538 | .button--material--flat .ripple__wave, .button--material--flat .ripple__background{
539 | background: rgba(189, 189, 189, 0.3);
540 | }
541 |
542 | .ripple__background {
543 | background: rgba(255, 255, 255, 0.2);
544 | position: absolute;
545 | top: 0;
546 | left: 0;
547 | right: 0;
548 | bottom: 0;
549 | opacity: 0;
550 | pointer-events: none;
551 | }
552 |
553 | .ripple__wave {
554 | background: rgba(255, 255, 255, 0.2);
555 | width: 0;
556 | height: 0;
557 | border-radius: 50%;
558 | position: absolute;
559 | top: 0;
560 | left: 0;
561 | z-index: 0;
562 | pointer-events: none;
563 | }
564 |
565 | /*
566 | Copyright 2013-2015 ASIAL CORPORATION
567 |
568 | Licensed under the Apache License, Version 2.0 (the "License");
569 | you may not use this file except in compliance with the License.
570 | You may obtain a copy of the License at
571 |
572 | http://www.apache.org/licenses/LICENSE-2.0
573 |
574 | Unless required by applicable law or agreed to in writing, software
575 | distributed under the License is distributed on an "AS IS" BASIS,
576 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
577 | See the License for the specific language governing permissions and
578 | limitations under the License.
579 |
580 | */
581 |
582 | ons-sliding-menu {
583 | position: absolute;
584 | left: 0px;
585 | right: 0px;
586 | top: 0px;
587 | bottom: 0px;
588 | z-index: 0;
589 | overflow-x: hidden;
590 | }
591 |
592 | .onsen-sliding-menu__menu,
593 | .onsen-sliding-menu__main {
594 | position: absolute;
595 | top: 0px;
596 | left: 0px;
597 | bottom: 0px;
598 | right: 0px;
599 | z-index: 0;
600 | margin: 0;
601 | padding: 0;
602 | }
603 |
604 | .onsen-sliding-menu__menu {
605 | opacity: 0;
606 | }
607 |
608 |
609 | /*
610 | Copyright 2013-2015 ASIAL CORPORATION
611 |
612 | Licensed under the Apache License, Version 2.0 (the "License");
613 | you may not use this file except in compliance with the License.
614 | You may obtain a copy of the License at
615 |
616 | http://www.apache.org/licenses/LICENSE-2.0
617 |
618 | Unless required by applicable law or agreed to in writing, software
619 | distributed under the License is distributed on an "AS IS" BASIS,
620 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
621 | See the License for the specific language governing permissions and
622 | limitations under the License.
623 |
624 | */
625 |
626 | ons-split-view {
627 | position: absolute;
628 | left: 0px;
629 | right: 0px;
630 | top: 0px;
631 | bottom: 0px;
632 | z-index: 0;
633 | overflow: hidden;
634 | }
635 |
636 | .onsen-split-view__secondary {
637 | opacity: 0;
638 | width: 100%;
639 | }
640 |
641 | .onsen-split-view__secondary,
642 | .onsen-split-view__main {
643 | position: absolute;
644 | top: 0px;
645 | left: 0px;
646 | bottom: 0px;
647 | right: 0px;
648 | z-index: 0;
649 | overflow-x: hidden;
650 | }
651 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "onsenui",
3 | "version": "2.0.0-rc.1",
4 | "description": "HTML5 Mobile Framework & UI Components",
5 | "private": false,
6 | "author": "@kruyvanna",
7 | "contributors": [
8 | {
9 | "name": "Mitsunori KUBOTA",
10 | "email": "anatoo.jp@gmail.com",
11 | "url": "http://anatoo.jp"
12 | },
13 | {
14 | "name": "Andreas Argelius",
15 | "email": "andreas@asial.co.jp"
16 | },
17 | {
18 | "name": "Ataru Otoh",
19 | "email": "ataru@asial.co.jp"
20 | }
21 | ],
22 | "scripts": {
23 | "test": "gulp test"
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/OnsenUI/OnsenUI"
28 | },
29 | "licenses": [
30 | {
31 | "type": "Apache-2.0",
32 | "url": "http://www.apache.org/licenses/LICENSE-2.0"
33 | }
34 | ],
35 | "bugs": {
36 | "url": "https://github.com/OnsenUI/OnsenUI/issues"
37 | },
38 | "homepage": "http://onsen.io/",
39 | "main": "js/onsenui.js",
40 | "devDependencies": {
41 | "babel-eslint": "^6.0.3",
42 | "babel-preset-es2015": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.1.18.tgz",
43 | "babel-preset-es2015-rollup": "^1.0.0",
44 | "browser-sync": "^2.11.0",
45 | "chai": "^3.4.1",
46 | "chai-as-promised": "^5.2.0",
47 | "chai-spies": "^0.7.1",
48 | "eslint": "^2.8.0",
49 | "event-stream": "^3.3.2",
50 | "globby": "https://registry.npmjs.org/globby/-/globby-2.1.0.tgz",
51 | "gulp": "^3.9.0",
52 | "gulp-add-src": "^0.2.0",
53 | "gulp-autoprefixer": "^3.1.0",
54 | "gulp-cached": "^1.1.0",
55 | "gulp-chmod": "^1.3.0",
56 | "gulp-clean": "^0.3.1",
57 | "gulp-concat": "^2.6.0",
58 | "gulp-connect": "^3.2.2",
59 | "gulp-download": "0.0.1",
60 | "gulp-eslint": "^2.0.0",
61 | "gulp-header": "^1.7.1",
62 | "gulp-html2js": "^0.4.2",
63 | "gulp-if": "^2.0.0",
64 | "gulp-karma": "0.0.5",
65 | "gulp-load-plugins": "^1.2.0",
66 | "gulp-ng-annotate": "^2.0.0",
67 | "gulp-plumber": "^1.0.1",
68 | "gulp-protractor": "^2.1.0",
69 | "gulp-remember": "^0.3.0",
70 | "gulp-rename": "^1.2.2",
71 | "gulp-rollup": "^1.7.0",
72 | "gulp-shell": "^0.5.1",
73 | "gulp-sourcemaps": "^1.6.0",
74 | "gulp-uglify": "^1.5.1",
75 | "gulp-unzip": "^0.1.3",
76 | "gulp-util": "^3.0.7",
77 | "gulp-zip": "^3.0.2",
78 | "jsonschema": "^1.0.3",
79 | "karma": "^0.13.19",
80 | "karma-babel-preprocessor": "^6.0.1",
81 | "karma-chai": "^0.1.0",
82 | "karma-chai-as-promised": "^0.1.2",
83 | "karma-chai-spies": "^0.1.4",
84 | "karma-chrome-launcher": "^0.2.2",
85 | "karma-coverage": "^0.5.3",
86 | "karma-junit-reporter": "^0.4.2",
87 | "karma-mocha": "^0.2.1",
88 | "mkpath": "^1.0.0",
89 | "mocha": "^2.3.4",
90 | "rollup-plugin-babel": "^2.3.8",
91 | "rollup-plugin-npm": "^1.2.1",
92 | "run-sequence": "^1.1.5",
93 | "wcdoc": "0.1.13"
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/blue-basic-theme.styl:
--------------------------------------------------------------------------------
1 | $background-color = #f9f9f9
2 | $material-background-color = #ffffff
3 | $text-color = #1f1f21
4 | $sub-text-color = #999
5 | $highlight-color = rgba(24,103,194,0.81)
6 | $second-highlight-color = #25a6d9
7 | $border-color = #ccc
8 | $toolbar-background-color = #fff
9 | $toolbar-button-color = rgba(38,100,171,0.81)
10 | $toolbar-text-color = #1f1f21
11 | $toolbar-border-color = #bbb
12 | $buttonbar-color = rgba(18,114,224,0.77)
13 | $buttonbar-active-text-color = #fff
14 | $list-background-color = #fff
15 | $list-header-background-color = #eee
16 | $list-tap-active-background-color = #d9d9d9
17 | $tabbar-background-color = #fff
18 | $tabbar-text-color = #999
19 | $tabbar-highlight-text-color = rgba(24,103,194,0.81)
20 | $tabbar-border-color = #ccc
21 | $switch-highlight-color = #5198db
22 | $modal-background-color = rgba(0, 0, 0, 0.7)
23 | $modal-text-color = #fff
24 | $alert-dialog-background-color = #f4f4f4
25 | $alert-dialog-text-color = #1f1f21
26 | $alert-dialog-button-color = rgba(24,103,194,0.81)
27 | $alert-dialog-separator-color = #ddd
28 | $dialog-background-color = #f4f4f4
29 | $popover-background-color = white
30 | $popover-text-color = #1f1f21
31 | $notification-background-color = #dc5236
32 | $material-switch-active-thumb-color = #009688
33 | $material-switch-inactive-thumb-color = #f1f1f1
34 | $material-switch-active-background-color = #77c2bb
35 | $material-switch-inactive-background-color = #b0afaf
36 | $material-range-track-color = #e0e0e0
37 | $material-range-thumb-color = #009688
38 | $material-toolbar-background-color = #009688
39 | $material-toolbar-text-color = #ffffff
40 | $material-toolbar-button-color = #ffffff
41 | $material-toolbar-button-active-color = #26a69a
42 | $material-button-background-color = #009688
43 | $material-button-text-color = #ffffff
44 | $material-checkbox-active-color = #009688
45 | $material-checkbox-inactive-color = #717171
46 | $material-checkbox-checkmark-color = #ffffff
47 | $material-radio-button-active-color = #009688
48 | $material-radio-button-inactive-color = #717171
49 | $material-text-input-text-color = #212121
50 | $material-text-input-active-color = #009688
51 | $material-text-input-inactive-color = #afafaf
52 | $material-dialog-background-color = #ffffff
53 | $material-alert-dialog-background-color = #ffffff
54 | $material-alert-dialog-title-color = #212121
55 | $material-alert-dialog-content-color = #727272
56 | $material-alert-dialog-button-color = #009688
57 | $material-progress-bar-primary-color = #009688
58 | $material-progress-bar-secondary-color = #80cbc4
59 | $material-progress-bar-background-color = #e0e0e0
60 | $material-progress-circle-primary-color = #009688
61 | $material-progress-circle-secondary-color = #80cbc4
62 | $material-tabbar-background-color = #009688
63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6)
64 | $material-tabbar-highlight-text-color = #ffffff
65 | $material-tabbar-highlight-color = #26a69a
66 | $fab-text-color = #ffffff
67 | $fab-background-color = #009688
68 |
69 | @import 'components'
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/blue-theme.styl:
--------------------------------------------------------------------------------
1 | $background-color = #fff
2 | $material-background-color = #ffffff
3 | $text-color = #1f1f21
4 | $sub-text-color = #999
5 | $highlight-color = #1284ff
6 | $second-highlight-color = #4cda64
7 | $border-color = #ddd
8 | $toolbar-background-color = #f8f8f8
9 | $toolbar-button-color = #1284ff
10 | $toolbar-text-color = #1f1f21
11 | $toolbar-border-color = #ddd
12 | $buttonbar-color = #1284ff
13 | $buttonbar-active-text-color = #fff
14 | $list-background-color = #fff
15 | $list-header-background-color = #eee
16 | $list-tap-active-background-color = #d9d9d9
17 | $tabbar-background-color = #f8f8f8
18 | $tabbar-text-color = #666
19 | $tabbar-highlight-text-color = #1284ff
20 | $tabbar-border-color = #ddd
21 | $switch-highlight-color = #4cd964
22 | $modal-background-color = rgba(0, 0, 0, 0.7)
23 | $modal-text-color = #fff
24 | $alert-dialog-background-color = #f4f4f4
25 | $alert-dialog-text-color = #1f1f21
26 | $alert-dialog-button-color = #1284ff
27 | $alert-dialog-separator-color = #ddd
28 | $dialog-background-color = #f4f4f4
29 | $popover-background-color = white
30 | $popover-text-color = #1f1f21
31 | $notification-background-color = #dc5236
32 | $material-switch-active-thumb-color = #009688
33 | $material-switch-inactive-thumb-color = #f1f1f1
34 | $material-switch-active-background-color = #77c2bb
35 | $material-switch-inactive-background-color = #b0afaf
36 | $material-range-track-color = #e0e0e0
37 | $material-range-thumb-color = #009688
38 | $material-toolbar-background-color = #009688
39 | $material-toolbar-text-color = #ffffff
40 | $material-toolbar-button-color = #ffffff
41 | $material-toolbar-button-active-color = #26a69a
42 | $material-button-background-color = #009688
43 | $material-button-text-color = #ffffff
44 | $material-checkbox-active-color = #009688
45 | $material-checkbox-inactive-color = #717171
46 | $material-checkbox-checkmark-color = #ffffff
47 | $material-radio-button-active-color = #009688
48 | $material-radio-button-inactive-color = #717171
49 | $material-text-input-text-color = #212121
50 | $material-text-input-active-color = #009688
51 | $material-text-input-inactive-color = #afafaf
52 | $material-dialog-background-color = #ffffff
53 | $material-alert-dialog-background-color = #ffffff
54 | $material-alert-dialog-title-color = #212121
55 | $material-alert-dialog-content-color = #727272
56 | $material-alert-dialog-button-color = #009688
57 | $material-progress-bar-primary-color = #009688
58 | $material-progress-bar-secondary-color = #80cbc4
59 | $material-progress-bar-background-color = #e0e0e0
60 | $material-progress-circle-primary-color = #009688
61 | $material-progress-circle-secondary-color = #80cbc4
62 | $material-tabbar-background-color = #009688
63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6)
64 | $material-tabbar-highlight-text-color = #ffffff
65 | $material-tabbar-highlight-color = #26a69a
66 | $fab-text-color = #ffffff
67 | $fab-background-color = #009688
68 |
69 | @import 'components'
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/alert-dialog.styl:
--------------------------------------------------------------------------------
1 | /**
2 | Copyright 2013-2014 ASIAL CORPORATION
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 |
16 | */
17 |
18 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
19 |
20 | // internal variables
21 | var-alert-dialog-separator-color = $alert-dialog-separator-color
22 | var-alert-dialog-button-color = $alert-dialog-button-color
23 | var-alert-dialog-background-color = $alert-dialog-background-color
24 | var-alert-dialog-text-color = $alert-dialog-text-color
25 |
26 | var-material-alert-dialog-button-color = $material-alert-dialog-button-color
27 | var-material-alert-dialog-background-color = $material-alert-dialog-background-color
28 | var-material-alert-dialog-title-color = $material-alert-dialog-title-color
29 | var-material-alert-dialog-content-color = $material-alert-dialog-content-color
30 |
31 | retina-alert-dialog-button-border(color = var-alert-dialog-separator-color)
32 | +retina-query()
33 | border-top none
34 | background-size 100% 1px
35 | background-repeat no-repeat
36 | background-position top
37 | background-image linear-gradient(180deg, color, color 50%, transparent 50%)
38 |
39 | /*! topdoc
40 | name: Alert Dialog
41 | class: alert-dialog
42 | height: 360px
43 | markup:
44 |
45 |
46 |
47 |
Alert
48 |
49 |
50 | Hello World!
51 |
52 |
53 |
56 |
57 |
185 |
186 |
187 | Hello World!
188 |
189 |
190 |
193 |
194 |
204 |
205 |
206 | Hello World!
207 |
208 |
209 |
213 |
214 |
224 |
225 |
Alert
226 |
227 |
228 | Hello World!
229 |
230 |
231 |
236 |
237 |
247 |
248 |
249 | Dialog title
250 |
251 |
252 | Some dialog content.
253 |
254 |
258 |
259 |
75 |
76 |
The quick brown fox jumps over the lazy dog.
77 |
78 |
29 |
30 | Message Text
31 |
32 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | Navigation Bar
141 |
142 |
143 |
144 | Label
145 |
146 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 | Title
163 |
164 |
165 |
166 | Button
167 |
168 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | Navigation Bar
184 |
185 |
186 | Label
187 |
188 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 | Title
210 |
211 |
212 |
213 | Button
214 |
215 |
225 |
226 |
227 |
228 |
229 |
230 |
231 | Navigation Bar
232 |
233 |
234 | Label
235 |
236 |
250 |
Bottom Toolbar
251 |
310 |
311 | Title
312 |
313 |
374 |
375 |
376 |
377 |
378 |
379 |
380 | Title
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
17 |
21 | */
22 |
23 | .progress-bar
24 | position relative
25 | height 4px
26 | display block
27 | width 100%
28 | background-color var-progress-bar-background-color
29 | background-clip padding-box
30 | margin 0
31 | overflow hidden
32 |
33 | .progress-bar--determinate > .progress-bar__primary
34 | .progress-bar--determinate > .progress-bar__secondary
35 | position absolute
36 | background-color var-progress-bar-color
37 | top 0
38 | bottom 0
39 | transition width .3s linear
40 | z-index 100
41 |
42 | .progress-bar--determinate > .progress-bar__secondary
43 | background-color var-progress-bar-secondary-color
44 | z-index 0
45 |
46 | .progress-bar--indeterminate:before
47 | content ''
48 | position absolute
49 | background-color var-progress-bar-color
50 | top 0
51 | left 0
52 | bottom 0
53 | will-change left, right
54 | animation progress-bar__indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
55 |
56 | .progress-bar--indeterminate:after
57 | content ''
58 | position absolute
59 | background-color var-progress-bar-color
60 | top 0
61 | left 0
62 | bottom 0
63 | will-change left, right
64 | animation progress-bar__indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
65 | animation-delay 1.15s
66 |
67 | @keyframes progress-bar__indeterminate {
68 | 0% {
69 | left -35%
70 | right 100%
71 | }
72 | 60% {
73 | left 100%
74 | right -90%
75 | }
76 | 100% {
77 | left 100%
78 | right -90%
79 | }
80 | }
81 |
82 | @keyframes progress-bar__indeterminate-short {
83 | 0% {
84 | left -200%
85 | right 100%
86 | }
87 | 60% {
88 | left 107%
89 | right -8%
90 | }
91 | 100% {
92 | left 107%
93 | right -8%
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/progress-circular.styl:
--------------------------------------------------------------------------------
1 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
2 |
3 | // internal variables
4 | var-progress-circle-color = $material-progress-circle-primary-color
5 | var-progress-circle-secondary-color = $material-progress-circle-secondary-color
6 |
7 | /*! topdoc
8 | name: Progress Circle
9 | class: progres-circle
10 | markup:
11 |
14 |
18 |
19 | */
20 |
21 | .progress-circular
22 | animation progress__rotate 2s linear infinite
23 | height 80px
24 | position relative
25 | width 80px
26 |
27 | .progress-circular__primary
28 | stroke-dasharray 1,200
29 | stroke-dashoffset 0
30 | animation progress__dash 1.5s ease-in-out infinite
31 | stroke var-progress-circle-color
32 | transition all 1s cubic-bezier(0.4, 0, 0.2, 1);
33 |
34 | .progress-circular--determinate
35 | transform rotate(270deg)
36 | animation none
37 |
38 | .progress-circular--determinate > .progress-circular__primary
39 | animation none
40 |
41 | .progress-circular--determinate > .progress-circular__secondary
42 | animation none
43 | stroke var-progress-circle-secondary-color
44 |
45 | @keyframes progress__rotate {
46 | 100% {
47 | transform rotate(360deg);
48 | }
49 | }
50 |
51 | @keyframes progress__dash {
52 | 0% {
53 | stroke-dasharray 10%, 241.32%;
54 | stroke-dashoffset 0%;
55 | }
56 | 50% {
57 | stroke-dasharray 201%, 50.322%;
58 | stroke-dashoffset -100.0%;
59 | }
60 | 100% {
61 | stroke-dasharray 10%, 241.32%;
62 | stroke-dashoffset -251.32%;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/radio-button.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
20 |
21 | // internal variables
22 | var-radio-button-background-active = rgba(0, 0, 0, 0)
23 | var-radio-button-indicator-color = $highlight-color
24 |
25 | var-radio-button-background = transparent
26 | var-radio-button-border = 3px solid var-radio-button-indicator-color
27 | var-radio-button-size = 24px
28 |
29 | var-material-radio-button-size = 20px
30 | var-material-radio-button-active-color = $material-radio-button-active-color
31 | var-material-radio-button-inactive-color = $material-radio-button-inactive-color
32 |
33 | /*! topdoc
34 | name: Radio Button
35 | class: radio-button
36 | modifiers:
37 | markup:
38 |
43 |
44 |
49 |
50 |
55 | */
56 |
57 | radio-button()
58 | reset-box-model()
59 | inline-block()
60 | reset-cursor()
61 | reset-font()
62 | hide-input-parent()
63 |
64 | radio-button__label()
65 | inline-block()
66 | reset-cursor()
67 |
68 | radio-button--before()
69 | content ''
70 | position absolute
71 | border-radius 100%
72 | reset-box-model()
73 |
74 | radio-button--after()
75 | content ''
76 | position absolute
77 | border-radius 100%
78 | top 50%
79 | left 50%
80 | transform translate(-50%, -50%)
81 |
82 | radio-button--disabled()
83 | disabled()
84 |
85 | .radio-button__input
86 | hide-input()
87 |
88 | .radio-button__input:active,
89 | .radio-button__input:focus
90 | outline 0
91 | -webkit-tap-highlight-color rgba(0, 0, 0, 0)
92 |
93 | .radio-button__input:checked + .radio-button__checkmark:after
94 | opacity 1
95 |
96 | .radio-button__input:checked + .radio-button__checkmark:before
97 | background transparent
98 | border none
99 |
100 | .radio-button
101 | radio-button__label()
102 | hide-input-parent()
103 | line-height var-radio-button-size
104 | text-align left
105 |
106 | .radio-button__checkmark:before
107 | radio-button--before()
108 | width var-checkbox-size
109 | height var-checkbox-size
110 | background transparent
111 | border none
112 | border-radius var-checkbox-border-radius
113 | left 0
114 |
115 | .radio-button__checkmark
116 | radio-button()
117 | position relative
118 | width var-radio-button-size
119 | height var-radio-button-size
120 | background var-radio-button-background
121 | pointer-events none
122 |
123 | .radio-button__input:checked + .radio-button__checkmark
124 | background var-radio-button-background-active
125 |
126 | .radio-button__checkmark:after
127 | radio-button--after()
128 | top var-checkmark-top
129 | left var-checkmark-left
130 | opacity 0
131 | width var-checkmark-tail-width
132 | height var-checkmark-foot-height
133 | background transparent
134 | border var-radio-button-border
135 | border-width var-checkmark-border-width
136 | border-top none
137 | border-right none
138 | border-radius var-checkmark-border-radius
139 | transform rotate(-45deg)
140 |
141 | .radio-button__input:disabled + .radio-button__checkmark
142 | radio-button--disabled()
143 |
144 |
145 | /*! topdoc
146 | name: Material Radio Button
147 | use: Radio Button
148 | modifiers:
149 | markup:
150 |
155 |
160 |
165 |
170 | */
171 |
172 | .radio-button--material
173 | line-height var-material-radio-button-size + 2px
174 | material-font()
175 |
176 | .radio-button--material__checkmark
177 | width var-material-radio-button-size
178 | height var-material-radio-button-size
179 | overflow visible
180 |
181 | .radio-button--material__checkmark:before
182 | background transparent
183 | border 2px solid $material-radio-button-inactive-color
184 | box-sizing border-box
185 | border-radius 50%
186 | width var-material-radio-button-size
187 | height var-material-radio-button-size
188 | transition border 0.2s ease
189 |
190 | .radio-button--material__checkmark:after
191 | transition background 0.2s ease, transform 0.2s ease
192 | top (var-material-radio-button-size / 4)
193 | left (var-material-radio-button-size / 4)
194 | width (var-material-radio-button-size / 2)
195 | height (var-material-radio-button-size / 2)
196 | border none
197 | border-radius 50%
198 | transform scale(0)
199 |
200 | .radio-button--material__input:checked + .radio-button__checkmark:before
201 | background transparent
202 | border 2px solid $material-radio-button-active-color
203 |
204 | .radio-button--material__input + .radio-button__checkmark:after
205 | background $material-radio-button-inactive-color
206 | opacity 1
207 | transform scale(0)
208 |
209 | .radio-button--material__input:checked + .radio-button__checkmark:after
210 | opacity 1
211 | background $material-radio-button-active-color
212 | transform scale(1)
213 |
214 | .radio-button--material__input:disabled + .radio-button__checkmark
215 | opacity 1
216 |
217 | .radio-button--material__input:disabled + .radio-button__checkmark:after
218 | background-color #afafaf
219 | border-color #afafaf
220 |
221 | .radio-button--material__input:disabled + .radio-button__checkmark:before
222 | border-color #afafaf
223 |
224 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/range.styl:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2012 Adobe Systems Inc.;
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | */
15 |
16 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
17 |
18 | // internal variables
19 | var-range-track-background-color = $border-color
20 | var-range-track-background-color-active = $highlight-color
21 | var-range-thumb-background-color = #fff
22 | var-range-thumb-border-color = $border-color
23 |
24 | var-range-border-radius := 3px
25 | var-range-thumb-border := 1px solid var-range-thumb-border-color
26 | var-range-border := none
27 | var-range-track-height := 2px
28 | var-range-thumb-width := var-thumb-size
29 |
30 | var-material-range-track-color = $material-range-track-color
31 | var-material-range-thumb-color = $material-range-thumb-color
32 |
33 | /*! topdoc
34 | name: Range
35 | class: range
36 | modifiers:
37 | :active: Active state
38 | :disabled: Disabled state
39 | :focus: Focused
40 | markup:
41 |
42 |
43 | showcase:
44 |
45 |
46 |
Range
47 |
48 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | */
66 | range()
67 | reset-input()
68 | -webkit-appearance none
69 |
70 | range__thumb()
71 | cursor pointer
72 |
73 | range__thumb--webkit()
74 | cursor pointer
75 | -webkit-appearance none
76 |
77 | range--disabled()
78 | disabled()
79 |
80 | .range
81 | range()
82 | border-radius var-border-radius
83 | border var-range-border
84 | height var-range-track-height
85 | border-radius var-border-radius--large
86 | border-radius var-range-border-radius
87 | background-image linear-gradient(var-range-track-background-color, var-range-track-background-color)
88 | background-position left center
89 | background-size 100% 2px
90 | background-repeat no-repeat
91 | overflow hidden
92 | height 32px
93 |
94 | .range::-moz-range-track
95 | position relative
96 | border none
97 | background-color var-range-track-background-color
98 | height var-range-track-height
99 | border-radius var-round-border
100 | box-shadow none
101 | top 0
102 | margin 0
103 | padding 0
104 |
105 | .range::-ms-track
106 | position relative
107 | border none
108 | background-color var-range-track-background-color
109 | height 0
110 | border-radius var-round-border
111 |
112 | .range::-webkit-slider-thumb
113 | range__thumb--webkit()
114 | position relative
115 | height var-range-thumb-width
116 | width var-range-thumb-width
117 | background-color var-range-thumb-background-color
118 | border var-range-thumb-border
119 | border-radius var-round-border
120 | box-shadow none
121 | top 0
122 | margin 0
123 | padding 0
124 |
125 | .range::-moz-range-thumb
126 | range__thumb()
127 | position relative
128 | height var-range-thumb-width
129 | width var-range-thumb-width
130 | background-color var-range-thumb-background-color
131 | border var-range-thumb-border
132 | border-radius var-round-border
133 | box-shadow none
134 | margin 0
135 | padding 0
136 |
137 | .range::-ms-thumb
138 | range__thumb()
139 | position relative
140 | height var-range-thumb-width
141 | width var-range-thumb-width
142 | background-color var-range-thumb-background-color
143 | border var-range-thumb-border
144 | border-radius var-round-border
145 | box-shadow none
146 | top 0
147 | margin 0
148 | padding 0
149 |
150 | .range::-webkit-slider-thumb:before
151 | position absolute
152 | top 13px
153 | right 28px
154 | left -10000px
155 | height 2px
156 | background-color var-range-track-background-color-active
157 | content ''
158 | margin 0
159 | padding 0
160 |
161 | .range::-ms-fill-lower
162 | height 2px
163 | background-color var-range-track-background-color-active
164 |
165 | .range::-ms-tooltip
166 | display none
167 |
168 | .range:disabled
169 | range--disabled()
170 |
171 | .range__left
172 | position relative
173 | top 17px
174 | height 2px
175 | width 0
176 | background-color var-range-track-background-color-active
177 | pointer-events none
178 |
179 | [disabled] > .range__left
180 | .range--material:disabled + .range__left
181 | visibility hidden
182 |
183 | /*! topdoc
184 | name: Material Range
185 | use: Range
186 | modifiers:
187 | :active: Active state
188 | :disabled: Disabled state
189 | :focus: Focused
190 | markup:
191 |
192 |
193 | */
194 |
195 | var-material-range-track-height = 2px
196 | var-material-range-thumb-width = 12px
197 | var-material-range-thumb-radius = var-material-range-thumb-width / 2
198 | var-material-range-thumb-vertical-margin = 24px
199 | var-material-range-thumb-horizontal-margin = 2px
200 |
201 | .range--material
202 | background-image linear-gradient(var-material-range-track-color, var-material-range-track-color)
203 | background-position center
204 | background-size 100% 2px
205 | overflow visible
206 |
207 | .range--material::-webkit-slider-thumb
208 | top 1px
209 | border none
210 | height var-material-range-thumb-width + var-material-range-thumb-vertical-margin
211 | width var-material-range-thumb-width + var-material-range-thumb-horizontal-margin
212 | border-radius 0
213 | background-color transparent
214 | background-image radial-gradient(circle var-material-range-thumb-radius at var-material-range-thumb-radius + var-material-range-thumb-horizontal-margin / 2, var-material-range-thumb-color 0%, var-material-range-thumb-color var-material-range-thumb-radius, transparent var-material-range-thumb-radius + 1);
215 | margin-top -1px
216 |
217 | .range--material::-moz-range-thumb
218 | top 1px
219 | border 3px solid var-material-range-track-color
220 | height var-material-range-thumb-width
221 | width var-material-range-thumb-width
222 | border-radius 100%
223 | border-color var-material-range-thumb-color
224 | background-color var-material-range-thumb-color
225 |
226 | .range--material::-moz-range-track
227 | background-color var-material-range-track-color
228 |
229 | .range--material::-ms-thumb
230 | margin-top 1px
231 | border none
232 | height var-material-range-thumb-width
233 | width var-material-range-thumb-width
234 | border-radius 100%;
235 | border-color var-material-range-thumb-color
236 | background-color var-material-range-thumb-color
237 |
238 | .range--material:focus::-moz-range-thumb
239 | border-color var-material-range-thumb-color
240 | background-color var-material-range-thumb-color
241 |
242 | range--material--thumb--before()
243 | display none
244 |
245 | .range--material::-moz-range-thumb:before
246 | range--material--thumb--before()
247 |
248 | .range--material::-webkit-slider-thumb:before
249 | range--material--thumb--before()
250 |
251 | .range--material::-ms-fill-lower
252 | background-color var-material-range-thumb-color
253 |
254 | range--material--thumb--after()
255 | content ''
256 | display block
257 | border 0px
258 | border-radius 100%
259 | height var-material-range-thumb-width
260 | width var-material-range-thumb-width
261 | background-color var-material-range-thumb-color
262 | opacity 0.2
263 | transition transform 0.1s linear
264 |
265 | .range--material::-moz-range-thumb:after
266 | margin-top -3px
267 | margin-left -3px
268 | range--material--thumb--after()
269 |
270 | .range--material::-webkit-slider-thumb:after
271 | margin-top -3px
272 | margin-left -3px
273 | range--material--thumb--after()
274 | display inline-block
275 | margin-left (var-material-range-thumb-horizontal-margin / 2)
276 | margin-top (var-material-range-thumb-vertical-margin / 2)
277 |
278 | .range--material::-ms-fill-upper
279 | margin-top: -6px;
280 | margin-left: -6px;
281 | range--material--thumb--after()
282 |
283 | .range--material:active::-webkit-slider-thumb:after
284 | transform scale(2.5)
285 |
286 | .range--material:active::-moz-range-thumb:after
287 | transform scale(2.5)
288 |
289 | .range--material:active::-ms-fill-upper
290 | transform scale(2.5)
291 |
292 | .range--material__left
293 | background-color var-material-range-thumb-color
294 |
295 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/search-input.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
20 |
21 | // internal variables
22 | var-search-icon = url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDFweCcgaGVpZ2h0PSc0MHB4JyB2aWV3Qm94PScwIDAgNDEgNDAnIHZlcnNpb249JzEuMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycgeG1sbnM6c2tldGNoPSdodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMnPjx0aXRsZT5TbGljZSAxPC90aXRsZT48ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+PGRlZnM+PC9kZWZzPjxnIGlkPSdQYWdlIDEnIHN0cm9rZT0nbm9uZScgc3Ryb2tlLXdpZHRoPScxJyBmaWxsPSdub25lJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnPjxnIGlkPSdzZWFyY2gnIGZpbGw9JyNDNkM4QzgnPjxwYXRoIGQ9J00wLjUwNCwxNi4zMzggQzAuNTA0LDI1LjA4NSA3LjYzNSwzMi4xNjUgMTYuNDQ0LDMyLjE2NSBDMjUuMjQsMzIuMTY1IDMyLjM4MiwyNS4wODUgMzIuMzgyLDE2LjMzOCBDMzIuMzgyLDcuNTkxIDI1LjI0LDAuNSAxNi40NDQsMC41IEM3LjYzNSwwLjUgMC41MDQsNy41OTEgMC41MDQsMTYuMzM4IEwwLjUwNCwxNi4zMzggWiBNNS41NTUsMTYuMzM4IEM1LjU1NSwxMC4zNTkgMTAuNDIzLDUuNTIxIDE2LjQ0NSw1LjUyMSBDMjIuNDU1LDUuNTIxIDI3LjMzMywxMC4zNiAyNy4zMzMsMTYuMzM4IEMyNy4zMzMsMjIuMzE3IDIyLjQ1NSwyNy4xNTYgMTYuNDQ1LDI3LjE1NiBDMTAuNDIzLDI3LjE1NiA1LjU1NSwyMi4zMTYgNS41NTUsMTYuMzM4IEw1LjU1NSwxNi4zMzggWiBNMjcuNjY2LDMwLjg2MSBMMzQuNTIxLDM4LjY3IEMzNS42MjUsMzkuNzcyIDM2LjMzOCwzOS43ODEgMzcuNDYsMzguNjcgTDM5LjY2MSwzNi40ODkgQzQwLjc0MywzNS40MDggNDAuODExLDM0LjcxMSAzOS42NjEsMzMuNTY4IEwzMS43NjUsMjYuNzkzIEwyNy42NjYsMzAuODYxIEwyNy42NjYsMzAuODYxIFogTTI3LjY2NiwzMC44NjEnIGlkPSdTaGFwZSc+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
23 | var-search-input-background-image = var-search-icon
24 | var-search-input-background-color = var-input-bg-color
25 | var-search-input-color = var-input-text-color
26 | var-search-input-border = 1px solid var-input-border-color
27 | var-search-decoration-margin-right = 0px
28 | var-search-input-border-radius = 4px
29 | var-search-input-height = 31px
30 | var-search-input-font-size = 15px
31 |
32 | /*! topdoc
33 | name: Search Input
34 | class: search-input
35 | modifiers:
36 | :disabled: Disabled state
37 | markup:
38 |
39 | */
40 |
41 | search-input()
42 | reset-input()
43 | reset-font()
44 | -webkit-appearance none
45 |
46 | input[type="search"].search-input::-webkit-search-cancel-button
47 | -webkit-appearance none
48 | display none
49 |
50 | search-input--disabled()
51 | disabled()
52 |
53 | .search-input
54 | search-input()
55 | box-sizing border-box
56 | height var-search-input-height
57 | font-size var-search-input-font-size
58 | border var-search-input-border
59 | background-color var-search-input-background-color
60 | box-shadow var-box-shadow--text-input
61 | color var-search-input-color
62 | padding 4px 0 0 28px
63 | border-radius var-search-input-border-radius
64 | background-image var-search-input-background-image
65 | background-position 8px center
66 | background-repeat no-repeat
67 | background-size var-font-size
68 | font-weight var-font-weight
69 | display block
70 | width 100%
71 |
72 | .search-input:focus
73 | background-color var-search-input-background-color
74 | color var-search-input-color
75 | border var-search-input-border
76 | box-shadow var-box-shadow--text-input
77 |
78 | .search-input::-webkit-search-cancel-button,
79 | .search-input::-webkit-search-decoration
80 | margin-right var-search-decoration-margin-right
81 |
82 | .search-input::-webkit-input-placeholder
83 | color var-input-placeholder-color
84 |
85 | .search-input::-moz-placeholder
86 | color var-input-placeholder-color
87 |
88 | .search-input::-ms-input-placeholder
89 | color var-input-placeholder-color
90 |
91 | .search-input:-ms-input-placeholder
92 | color var-input-placeholder-color
93 |
94 | .search-input:disabled
95 | search-input--disabled()
96 |
97 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/switch.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 |
20 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
21 |
22 | // internal variables
23 | var-switch-background-color = $border-color
24 | var-switch-checked-background-color = $switch-highlight-color // background color active
25 | var-switch-thumb-background-color = white
26 | var-switch-thumb-border-color = $border-color
27 | var-switch-thumb-border-color-active = $switch-highlight-color
28 | var-switch-height = 32px
29 | var-switch-width = 51px
30 |
31 | var-material-switch-active-thumb-color = $material-switch-active-thumb-color
32 | var-material-switch-active-background-color = $material-switch-active-background-color
33 | var-material-switch-inactive-thumb-color = $material-switch-inactive-thumb-color
34 | var-material-switch-inactive-background-color = $material-switch-inactive-background-color
35 |
36 | /*! topdoc
37 | name: Switch
38 | class: switch
39 | modifiers:
40 | :focus: Focus state
41 | :disabled: Disabled state
42 | markup:
43 |
49 |
55 |
61 | */
62 |
63 | switch()
64 | inline-block()
65 | reset-box-model()
66 | hide-input-parent()
67 | min-width 51px
68 |
69 | switch__toggle()
70 | inline-block()
71 | reset-box-model()
72 | reset-base()
73 | reset-cursor()
74 |
75 | .switch
76 | switch()
77 | font-size var-font-size
78 | padding 0 20px
79 | border none
80 | overflow visible
81 | width var-switch-width
82 | height var-switch-height
83 | z-index 0
84 | text-align left
85 |
86 | .switch__input
87 | hide-input()
88 | z-index -1
89 |
90 | // switch toggle background
91 | .switch__toggle
92 | background-color #fff
93 | position absolute
94 | top 0px
95 | left 0px
96 | right 0px
97 | bottom 0px
98 | border-radius 30px
99 | transition-property all
100 | transition-duration 0.35s
101 | transition-timing-function ease-out
102 | box-shadow inset 0 0 0 2px #e5e5e5
103 |
104 | // switch toggle circle
105 | .switch__handle
106 | reset-box-model()
107 | position absolute
108 | content ''
109 | border-radius 28px
110 | height 28px
111 | width 28px
112 | background-color var-switch-thumb-background-color
113 | left 1px
114 | top 2px
115 | transition-property all
116 | transition-duration 0.35s
117 | transition-timing-function cubic-bezier(.59,.01,.5,.99)
118 | box-shadow 0 0 0 1px #E4E4E4, 0 3px 2px rgba(0,0,0,0.25)
119 |
120 | .switch--active .switch__handle
121 | transition-duration 0s
122 |
123 | input:checked + .switch__toggle
124 | box-shadow inset 0 0 0 2px var-switch-checked-background-color
125 | background-color var-switch-checked-background-color
126 |
127 | input:checked + .switch__toggle .switch__handle
128 | left 21px
129 | box-shadow 0 3px 2px rgba(0,0,0,0.25)
130 |
131 | input:disabled + .switch__toggle
132 | disabled()
133 |
134 | .switch__touch
135 | position absolute
136 | top -5px
137 | bottom -5px
138 | left -10px
139 | right -10px
140 |
141 | /*! topdoc
142 | name: Material Switch
143 | use: Switch
144 | modifiers:
145 | :focus: Focus state
146 | :disabled: Disabled state
147 | markup:
148 |
155 |
162 |
169 | */
170 |
171 | .switch.switch--material
172 | width 36px
173 | height 24px
174 | padding 0 10px
175 | min-width 36px
176 |
177 | .switch__toggle
178 | background-color var-material-switch-inactive-background-color
179 | margin-top 5px
180 | height 14px
181 | box-shadow none
182 |
183 | .switch__input
184 | hide-input()
185 | z-index -1
186 |
187 | // switch toggle circle
188 | .switch__handle
189 | background-color var-material-switch-inactive-thumb-color
190 | left 0px
191 | margin-top -5px
192 | width 20px
193 | height 20px
194 | shadow-2()
195 |
196 | input:checked + .switch__toggle
197 | background-color var-material-switch-active-background-color
198 | box-shadow none
199 |
200 | .switch__handle
201 | left 16px
202 | background-color var-material-switch-active-thumb-color
203 | shadow-1()
204 |
205 | input:disabled + .switch__toggle
206 | disabled()
207 |
208 | .switch__handle:before
209 | background transparent
210 | content ''
211 | display block
212 | width 100%
213 | height 100%
214 | border-radius 50%
215 | z-index -1
216 | box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.12)
217 | transition box-shadow 0.1s linear
218 |
219 | &.switch--active .switch__handle:before
220 | box-shadow: 0px 0px 0px 14px rgba(0,0,0,0.12)
221 |
222 | &.switch--active input:checked + .switch__toggle .switch__handle:before
223 | box-shadow: 0px 0px 0px 14px alpha(var-material-switch-active-thumb-color, 0.2)
224 |
225 | .switch__touch
226 | position absolute
227 | top -10px
228 | bottom -10px
229 | left -15px
230 | right -15px
231 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/tab-bar.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
20 |
21 | // internal variables
22 | var-tab-bar-background-color = $tabbar-background-color // Background color
23 | var-tab-bar-border-color = $tabbar-border-color // Separator
24 | var-tab-bar-button-color = $tabbar-text-color // Text color
25 | var-tab-bar-active-color = $tabbar-highlight-text-color // Text color active
26 | var-material-tab-bar-background-color = $material-tabbar-background-color
27 | var-material-tab-bar-text-color = $material-tabbar-text-color
28 | var-material-tab-bar-current-color = $material-tabbar-highlight-text-color
29 | var-material-tab-bar-highlight-color = $material-tabbar-highlight-color
30 |
31 | var-tab-bar-active-border-top = none
32 | var-tab-bar-focus-border-top = none
33 | var-tab-bar-height = 49px
34 | var-tab-bar-button-line-height = 49px
35 | var-tab-bar-button-border = none
36 | var-tab-bar-active-box-shadow = none
37 | var-tab-bar-button-focus-box-shadow = none
38 | var-tab-bar-border-top = 1px solid var-tab-bar-border-color
39 |
40 | /*! topdoc
41 | name: Icon Tab Bar
42 | class: tab-bar
43 | use: Tab Bar
44 | modifiers:
45 | :disabled: Disabled state
46 | markup:
47 |
48 |
73 | */
74 |
75 | /*! topdoc
76 | name: Tab Bar
77 | class: tab-bar
78 | modifiers:
79 | :disabled: Disabled state
80 | markup:
81 |
103 | */
104 |
105 | retina-tabbar-border(color = var-tab-bar-border-color, border-position = top)
106 | +retina-query()
107 | border-{border-position} none
108 | background-size 100% 1px
109 | background-repeat no-repeat
110 | background-position border-position
111 | background-image linear-gradient(0deg, color, color 50%, transparent 50%) if border-position == 'bottom'
112 | background-image linear-gradient(180deg, color, color 50%, transparent 50%) if border-position == 'top'
113 |
114 | .tab-bar
115 | reset-font()
116 | display table
117 | table-layout fixed
118 | position absolute
119 | bottom 0px
120 | left 0px
121 | right 0px
122 | white-space nowrap
123 | margin 0
124 | padding 0
125 | height var-tab-bar-height
126 | background-color var-tab-bar-background-color
127 | border-top var-tab-bar-border-top
128 | width 100%
129 | retina-tabbar-border(var-tab-bar-border-color)
130 |
131 | .tab-bar__item
132 | reset-font()
133 | hide-input-parent()
134 | display table-cell
135 | width auto
136 | border-radius 0
137 |
138 | .tab-bar__item > input
139 | hide-input()
140 |
141 | .tab-bar__button
142 | inline-block()
143 | reset-font()
144 | reset-box-model()
145 | reset-base()
146 | reset-cursor()
147 | ellipsis()
148 | text-decoration none
149 | padding 0
150 | height var-tab-bar-button-line-height
151 | letter-spacing var-letter-spacing
152 | color var-tab-bar-button-color
153 | text-shadow var-text-shadow
154 | vertical-align top
155 | background-color transparent
156 | box-shadow var-box-shadow
157 | border-top var-tab-bar-button-border
158 | width 100%
159 | font-weight var-font-weight
160 | line-height var-tab-bar-button-line-height
161 | +retina-query()
162 | border-top none
163 |
164 | .tab-bar__icon
165 | font-size 24px
166 | padding 0
167 | margin 0
168 | line-height 26px
169 | display block
170 | height 28px
171 |
172 | .tab-bar__label
173 | reset-font()
174 |
175 | .tab-bar__icon + .tab-bar__label
176 | font-size 10px
177 | line-height 1
178 | margin 0
179 | font-weight var-font-weight
180 |
181 | .tab-bar__label:first-child
182 | font-size 16px
183 | line-height var-tab-bar-button-line-height
184 | margin 0
185 | padding 0
186 |
187 | .tab-bar__button
188 | color var-tab-bar-button-color
189 |
190 | :checked + .tab-bar__button
191 | color var-tab-bar-active-color
192 | background-color transparent
193 | box-shadow var-tab-bar-active-box-shadow
194 | border-top var-tab-bar-active-border-top
195 |
196 | .tab-bar__button:disabled
197 | disabled()
198 |
199 | .tab-bar__button:focus
200 | z-index 1
201 | border-top var-tab-bar-focus-border-top
202 | box-shadow var-tab-bar-button-focus-box-shadow
203 | outline 0
204 |
205 | .tab-bar__content
206 | position absolute
207 | top 0
208 | left 0
209 | right 0
210 | bottom var-tab-bar-height
211 | z-index 0
212 |
213 | /*! topdoc
214 | name: Icon Only Tab Bar
215 | use: Tab Bar
216 | class: tab-bar
217 | hint: .tab-bar .fa
218 | modifiers:
219 | :disabled: Disabled state
220 | markup:
221 |
222 |
223 |
229 |
230 |
236 |
237 |
243 |
244 |
245 | */
246 |
247 | /*! topdoc
248 | name: Top Tab Bar
249 | class: tab-bar--top
250 | use: Tab Bar
251 | markup:
252 |
253 |
259 |
260 |
266 |
267 |
273 |
274 | */
275 |
276 | .tab-bar--top
277 | position relative
278 | top 0px
279 | left 0px
280 | right 0px
281 | bottom auto
282 | border-top none
283 | border-bottom var-tab-bar-border-top
284 | retina-tabbar-border(var-tab-bar-border-color, bottom)
285 |
286 | .tab-bar--top__content
287 | top var-tab-bar-height
288 | left 0
289 | right 0
290 | bottom 0
291 | z-index 0
292 |
293 | /*! topdoc
294 | name: Bordered Top Tab Bar
295 | class: tab-bar--top-border
296 | use: Top Tab Bar
297 | markup:
298 |
299 |
305 |
306 |
312 |
313 |
319 |
320 | */
321 |
322 | /*! topdoc
323 | name: Material Tab Bar
324 | class: tab-bar--material
325 | use: Top Tab Bar
326 | markup:
327 |
328 |
334 |
335 |
341 |
342 |
348 |
349 |
355 |
356 |
357 | */
358 |
359 | .tab-bar--top-border__button
360 | background-color transparent
361 | border-bottom 4px solid transparent
362 |
363 | :checked + .tab-bar--top-border__button
364 | background-color transparent
365 | border-bottom 4px solid var-tab-bar-active-color
366 |
367 | .tab-bar--material
368 | background-color var-material-tab-bar-background-color
369 | border-bottom-width 0px
370 | box-shadow 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2)
371 |
372 | .tab-bar--material__button
373 | background-color transparent
374 | color var-material-tab-bar-text-color
375 | text-transform uppercase
376 | font-size 14px
377 | font-weight 500
378 | material-font()
379 |
380 | .tab-bar--material__button:after
381 | content ''
382 | display block
383 | width 0px
384 | height 2px
385 | bottom 0px
386 | position absolute
387 | margin-top -2px
388 | background-color var-material-tab-bar-current-color
389 |
390 | :checked + .tab-bar--material__button:after
391 | width 100%
392 | transition width 0.2s ease-in-out
393 |
394 | :checked + .tab-bar--material__button
395 | background-color transparent
396 | color var-material-tab-bar-current-color
397 |
398 | .tab-bar--material__item:not([ripple]):active
399 | background-color var-material-tab-bar-highlight-color
400 |
401 | /*! topdoc
402 | name: Material Tab Bar (Icon only)
403 | class: tab-bar--material__icon
404 | use: Material Tab Bar
405 | markup:
406 |
407 |
413 |
414 |
420 |
421 |
427 |
428 | */
429 |
430 | .tab-bar--material__icon
431 | font-size 22px
432 | line-height 36px
433 |
434 | /*! topdoc
435 | name: Material Tab Bar (Icon and Label)
436 | class: tab-bar--material__label
437 | use: Material Tab Bar
438 | markup:
439 |
464 | */
465 |
466 | .tab-bar--material__label
467 | material-font()
468 |
469 | .tab-bar--material__label:first-child
470 | material-font()
471 | letter-spacing 0.015em
472 | font-weight 500
473 | font-size 14px
474 |
475 | .tab-bar--material__icon + .tab-bar--material__label
476 | font-size 10px
477 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/text-input.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
20 |
21 | // internal variables
22 | var-text-input-font-size = 15px
23 | var-text-input-height = 31px
24 | var-text-input-border-color = var-input-border-color
25 | var-text-highlight-color = $highlight-color // material
26 |
27 | var-material-text-input-font-size = 16px
28 | var-material-text-input-color = $material-text-input-text-color
29 | var-material-text-input-active-color = $material-text-input-active-color
30 | var-material-text-input-inactive-color = $material-text-input-inactive-color
31 |
32 | /*! topdoc
33 | name: Text Input
34 | class: text-input
35 | modifiers:
36 | :disabled: Disabled state
37 | :focus: Focused
38 | :invalid: Hover state
39 | markup:
40 |
41 |
42 |
43 | */
44 |
45 | input()
46 | reset-input()
47 | reset-font()
48 |
49 | input--disabled()
50 | disabled()
51 |
52 | transparent()
53 | border none
54 | background-color transparent
55 |
56 | text-input()
57 | input()
58 | transparent()
59 | letter-spacing var-letter-spacing
60 | box-shadow var-box-shadow--text-input
61 | color var-input-text-color
62 | padding 0
63 | margin 0
64 | width 100%
65 | font-size var-text-input-font-size
66 | height var-text-input-height
67 | font-weight var-font-weight
68 | box-sizing border-box
69 |
70 | text-input--disabled()
71 | input--disabled()
72 | transparent()
73 |
74 | webkit-input-placeholder()
75 | transparent()
76 | color var-input-placeholder-color
77 |
78 | text-input--invalid()
79 | transparent()
80 | color var-input-invalid-text-color
81 |
82 | .text-input
83 | text-input()
84 |
85 | .text-input::-webkit-input-placeholder
86 | color var-input-placeholder-color
87 |
88 | .text-input::-moz-placeholder
89 | color var-input-placeholder-color
90 |
91 | .text-input::-ms-input-placeholder
92 | color var-input-placeholder-color
93 |
94 | .text-input:-ms-input-placeholder
95 | color var-input-placeholder-color
96 |
97 | .text-input:disabled
98 | text-input--disabled()
99 |
100 | .text-input:disabled::-webkit-input-placeholder
101 | webkit-input-placeholder()
102 |
103 | .text-input:disabled::-moz-placeholder
104 | webkit-input-placeholder()
105 |
106 | .text-input:disabled::-ms-input-placeholder
107 | webkit-input-placeholder()
108 |
109 | .text-input:disabled:-ms-input-placeholder
110 | webkit-input-placeholder()
111 |
112 | .text-input::-ms-clear
113 | display none
114 |
115 | .text-input:invalid
116 | text-input--invalid()
117 |
118 | /*! topdoc
119 | name: Underbar Text Input
120 | class: text-input--underbar
121 | markup:
122 |
123 |
124 |
125 | */
126 |
127 | .text-input--underbar
128 | text-input()
129 | border none
130 | background-color transparent
131 | border-bottom 1px solid var-text-input-border-color
132 | border-radius 0px
133 |
134 | .text-input--underbar:disabled
135 | text-input--disabled()
136 | border none
137 | background-color transparent
138 | border-bottom 1px solid var-text-input-border-color
139 |
140 | text-input-underbar-disabled()
141 | webkit-input-placeholder()
142 | border none
143 | background-color transparent
144 |
145 | .text-input--underbar:disabled::-webkit-input-placeholder
146 | text-input-underbar-disabled()
147 |
148 | .text-input--underbar:disabled::-moz-placeholder
149 | text-input-underbar-disabled()
150 |
151 | .text-input--underbar:disabled::-ms-input-placeholder
152 | text-input-underbar-disabled()
153 |
154 | .text-input--underbar:disabled:-ms-input-placeholder
155 | text-input-underbar-disabled()
156 |
157 |
158 | .text-input--underbar:invalid
159 | text-input--invalid()
160 | border none
161 | background-color transparent
162 | border-bottom 1px solid var-input-invalid-border-color
163 |
164 |
165 | /*! topdoc
166 | name: Material Input
167 | class: text-input--material
168 | markup:
169 |
170 |
171 |
172 |
173 |
174 | */
175 |
176 | .text-input--material
177 | input()
178 | material-font()
179 | color var-material-text-input-color
180 | background-image linear-gradient(to top, transparent 1px, var-material-text-input-inactive-color 1px)
181 | background-size 100% 2px
182 | background-repeat no-repeat
183 | background-position center bottom
184 | background-color transparent
185 | font-size var-material-text-input-font-size
186 | font-weight 400
187 | border none
188 | padding-bottom 2px
189 | border-radius 0
190 | height 24px
191 | -webkit-transform translate3d(0, 0, 0) // prevent ios flicker
192 |
193 | .text-input--material__label
194 | color var-material-text-input-active-color
195 |
196 | .text-input--material:focus
197 | background-image linear-gradient(var-material-text-input-active-color, var-material-text-input-active-color), linear-gradient(to top, transparent 1px, var-material-text-input-inactive-color 1px)
198 | animation material-text-input-animate 0.3s forwards
199 |
200 | text-input--material-placeholder()
201 | color var-material-text-input-inactive-color
202 | line-height 20px
203 |
204 | .text-input--material::-webkit-input-placeholder
205 | text-input--material-placeholder()
206 |
207 | .text-input--material::-moz-placeholder
208 | text-input--material-placeholder()
209 |
210 | .text-input--material::-ms-input-placeholder
211 | text-input--material-placeholder()
212 |
213 | .text-input--material:-ms-input-placeholder
214 | text-input--material-placeholder()
215 |
216 | .text-input--material::-ms-clear
217 | display none
218 |
219 | @keyframes material-text-input-animate
220 | 0%
221 | background-size 0% 2px, 100% 2px
222 | 100%
223 | background-size 100% 2px, 100% 2px
224 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/textarea.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
20 |
21 | // internal variables
22 | var-textarea-color = var-input-text-color
23 | var-textarea-border = 1px solid var-input-border-color
24 | var-textarea-padding = 5px 5px 5px 5px
25 | var-textarea-box-shadow = none
26 |
27 | /*! topdoc
28 | name: Textarea
29 | class: textarea
30 | modifiers:
31 | :disabled: Disabled state
32 | markup:
33 |
34 | showcase:
35 | */
36 |
37 | .textarea
38 | reset-box-model()
39 | reset-base()
40 | reset-font()
41 | vertical-align top
42 | resize none
43 | outline none
44 | padding var-textarea-padding
45 | font-size var-text-input-font-size
46 | font-weight var-font-weight
47 | border-radius var-border-radius
48 | border var-textarea-border
49 | background-color var-input-bg-color
50 | color var-textarea-color
51 | letter-spacing var-letter-spacing
52 | box-shadow var-textarea-box-shadow
53 | -webkit-appearance none
54 | width 100%
55 |
56 | .textarea:disabled
57 | disabled()
58 |
59 | .textarea::-webkit-input-placeholder,
60 | .textarea::-moz-placeholder,
61 | .textarea:-ms-input-placeholder
62 | color var-input-placeholder-color
63 |
64 | /*! topdoc
65 | name: Textarea Transparent
66 | class: textarea--transparent
67 | modifiers:
68 | :disabled: Disabled state
69 | markup:
70 |
71 | showcase:
72 | */
73 |
74 | .textarea--transparent
75 | reset-box-model()
76 | reset-base()
77 | reset-font()
78 | vertical-align top
79 | resize none
80 | outline none
81 | padding var-textarea-padding
82 | padding-left 0
83 | padding-right 0
84 | font-size var-text-input-font-size
85 | font-weight var-font-weight
86 | border-radius var-border-radius
87 | border none
88 | background-color transparent
89 | color var-textarea-color
90 | letter-spacing var-letter-spacing
91 | box-shadow var-textarea-box-shadow
92 | -webkit-appearance none
93 | width 100%
94 |
95 | .textarea--transparent:disabled
96 | disabled()
97 |
98 | .textarea--transparent::-webkit-input-placeholder,
99 | .textarea--transparent::-moz-placeholder,
100 | .textarea--transparent:-ms-input-placeholder
101 | color var-input-placeholder-color
102 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/toolbar-button.styl:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * Copyright 2012 Adobe Systems Inc.;
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | *
17 | */
18 |
19 | // internal variables
20 | var-toolbar-button-color = $toolbar-button-color
21 | var-toolbar-button-background-color = rgba(0, 0, 0, 0)
22 | var-toolbar-button-border-color = $toolbar-button-color
23 | var-toolbar-button-border-radius = 2px
24 | var-toolbar-button-padding = 4px 10px
25 | var-toolbar-button-active-background-color = var-toolbar-button-background-color
26 | var-toolbar-button-border = 1px solid var-toolbar-button-border-color
27 |
28 | var-material-toolbar-button-color = $material-toolbar-button-color
29 | var-material-toolbar-button-active-color = $material-toolbar-button-active-color
30 |
31 | // NOTE: You can't use @extend that break component independent and topdoc parsing.
32 |
33 | /*! topdoc
34 | name: Toolbar Button
35 | class: toolbar-button
36 | modifiers:
37 | :active: Active state
38 | :disabled: Disabled state
39 | :focus: Focused
40 | markup:
41 |
42 |
45 |
46 |
49 | */
50 |
51 | .toolbar-button
52 | reset-font()
53 | padding var-toolbar-button-padding
54 | letter-spacing var-letter-spacing
55 | color var-toolbar-button-color
56 | text-shadow var-text-shadow
57 | background-color var-toolbar-button-background-color
58 | border-radius var-toolbar-button-border-radius
59 | border 1px solid transparent
60 | font-weight var-font-weight
61 | font-size var-font-size
62 | transition none
63 |
64 | .toolbar-button:active
65 | background-color var-toolbar-button-active-background-color
66 | transition none
67 | opacity 0.2
68 |
69 | .toolbar-button:disabled,
70 | .toolbar-button[disabled]
71 | disabled()
72 |
73 | .toolbar-button:focus
74 | outline 0
75 | transition none
76 |
77 | .toolbar-button:hover
78 | transition none
79 |
80 | .toolbar-button--outline
81 | @extend .toolbar-button
82 | border var-toolbar-button-border
83 | margin auto 8px
84 | padding-left 6px
85 | padding-right 6px
86 |
87 | .toolbar-button--outline:hover
88 | @extend .toolbar-button:hover
89 |
90 | .toolbar-button--outline:active
91 | @extend .toolbar-button:active
92 |
93 | .toolbar-button--outline:focus
94 | @extend .toolbar-button:focus
95 |
96 | .toolbar-button--quiet
97 | @extend .toolbar-button
98 |
99 | .toolbar-button--quiet:hover
100 | @extend .toolbar-button:hover
101 |
102 | .toolbar-button--quiet:active
103 | @extend .toolbar-button:active
104 |
105 | .toolbar-button--quiet:focus
106 | @extend .toolbar-button:focus
107 |
108 | .toolbar-button--material
109 | font-size 22px
110 | color var-material-toolbar-button-color
111 | display inline-block
112 | padding 0 12px
113 | height 100%
114 | margin 0
115 | border none
116 | border-radius 0
117 | vertical-align initial
118 |
119 | .toolbar-button--material:first-of-type {
120 | margin-left 4px
121 | }
122 |
123 | .toolbar-button--material:last-of-type {
124 | margin-right 4px
125 | }
126 |
127 | .toolbar-button--material:active
128 | opacity 1
129 | background-color var-material-toolbar-button-active-color
130 |
131 | .back-button
132 | height 44px
133 | line-height 44px
134 | padding-left 8px
135 | color var-toolbar-button-color
136 | background-color var-toolbar-button-background-color
137 |
138 | .back-button:active
139 | opacity 0.2
140 |
141 | .back-button__label
142 | display inline-block
143 | height 100%
144 | vertical-align top
145 | margin-left 12px
146 |
147 | .back-button__icon
148 | display inline-block
149 | height 100%
150 | vertical-align top
151 |
152 | .back-button__icon:before
153 | font-family 'Ionicons'
154 | content '\f3cf'
155 | font-size 32px
156 |
157 | .back-button--material
158 | font-size 22px
159 | color var-material-toolbar-button-color
160 | display inline-block
161 | padding 0 12px
162 | height 100%
163 | margin 0 0 0 4px
164 | border none
165 | border-radius 0
166 | vertical-align initial
167 | line-height 56px
168 |
169 | .back-button--material__label
170 | display none
171 | font-size 20px
172 |
173 | .back-button--material__icon:before
174 | font-family 'Material-Design-Iconic-Font'
175 | content: '\f2ea'
176 | font-size 26px
177 |
178 | .back-button--material:active
179 | opacity 1
180 | background-color var-material-toolbar-button-active-color
181 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/components/util.styl:
--------------------------------------------------------------------------------
1 |
2 | reset-font()
3 | font-family -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
4 | -webkit-font-smoothing antialiased
5 | -moz-osx-font-smoothing grayscale
6 | font-weight var-font-weight
7 | font-size var-font-size
8 |
9 | reset-base()
10 | padding 0
11 | margin 0
12 | font inherit
13 | color inherit
14 | background transparent
15 | border none
16 | line-height normal
17 |
18 | reset-list()
19 | padding 0
20 | margin 0
21 | list-style-type none
22 | text-align left
23 |
24 | reset-quiet()
25 | background transparent
26 | border 1px solid transparent
27 | box-shadow none
28 |
29 | reset-input()
30 | reset-base()
31 | reset-box-model()
32 | vertical-align top
33 | outline none
34 | line-height 1
35 |
36 | hide-input()
37 | position absolute
38 | overflow hidden
39 | right 0px
40 | top 0px
41 | left 0px
42 | bottom 0px
43 | padding 0
44 | border 0
45 | opacity 0.001
46 | z-index 1
47 | vertical-align top
48 | outline none
49 | width 100%
50 | height 100%
51 | margin 0
52 | -webkit-appearance none
53 | appearance none
54 |
55 | hide-input-parent()
56 | position relative
57 | overflow hidden
58 |
59 | reset-cursor()
60 | cursor default
61 | user-select none
62 |
63 | reset-box-model()
64 | box-sizing border-box
65 | background-clip padding-box
66 |
67 | reset-overflow()
68 | white-space nowrap
69 | overflow hidden
70 |
71 | reset-container()
72 | reset-box-model()
73 | reset-overflow()
74 | word-spacing 0
75 |
76 | inline-block()
77 | position relative
78 | display inline-block
79 | vertical-align top
80 |
81 | ellipsis()
82 | text-overflow ellipsis
83 | reset-overflow()
84 |
85 | disabled()
86 | opacity 0.3
87 | cursor default
88 | pointer-events none
89 |
90 | reset-ui()
91 | reset-box-model()
92 | inline-block()
93 | reset-base()
94 | reset-cursor()
95 | ellipsis()
96 |
97 | retina-query()
98 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
99 | {block}
100 |
101 | material-font()
102 | font-family 'Roboto', 'Noto', sans-serif
103 | -webkit-font-smoothing antialiased
104 |
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/dark-theme.styl:
--------------------------------------------------------------------------------
1 | $background-color = #242424
2 | $material-background-color = #333333
3 | $text-color = #fff
4 | $sub-text-color = #87888f
5 | $highlight-color = #3d74ff
6 | $second-highlight-color = #5494d1
7 | $border-color = #424242
8 | $toolbar-background-color = #1a1a1a
9 | $toolbar-button-color = #aaa
10 | $toolbar-text-color = #fff
11 | $toolbar-border-color = rgba(0,0,0,.0)
12 | $buttonbar-color = #ddd
13 | $buttonbar-active-text-color = #2e2f33
14 | $list-background-color = rgba(0,0,0,.0)
15 | $list-header-background-color = #3e3f42
16 | $list-tap-active-background-color = #47484d
17 | $tabbar-background-color = #1a1a1a
18 | $tabbar-text-color = #bdbdbd
19 | $tabbar-highlight-text-color = #549eff
20 | $tabbar-border-color = rgba(0,0,0,.0)
21 | $switch-highlight-color = #3385ff
22 | $modal-background-color = rgba(0, 0, 0, 0.7)
23 | $modal-text-color = #fff
24 | $alert-dialog-background-color = #f4f4f4
25 | $alert-dialog-text-color = #1f1f21
26 | $alert-dialog-button-color = #3d74ff
27 | $alert-dialog-separator-color = #ddd
28 | $dialog-background-color = #f4f4f4
29 | $popover-background-color = black
30 | $popover-text-color = white
31 | $notification-background-color = #3385ff
32 | $material-switch-active-thumb-color = #80cbc4
33 | $material-switch-inactive-thumb-color = #bdbdbd
34 | $material-switch-active-background-color = #5a7f7c
35 | $material-switch-inactive-background-color = #707070
36 | $material-range-track-color = #707070
37 | $material-range-thumb-color = #80cbc4
38 | $material-toolbar-background-color = #009688
39 | $material-toolbar-text-color = #ffffff
40 | $material-toolbar-button-color = #ffffff
41 | $material-toolbar-button-active-color = #26a69a
42 | $material-button-background-color = #80cbc4
43 | $material-button-text-color = #ffffff
44 | $material-checkbox-active-color = #009688
45 | $material-checkbox-inactive-color = #f5f5f5
46 | $material-checkbox-checkmark-color = #333333
47 | $material-radio-button-active-color = #009688
48 | $material-radio-button-inactive-color = #f5f5f5
49 | $material-text-input-text-color = #ffffff
50 | $material-text-input-active-color = #009688
51 | $material-text-input-inactive-color = #4c4c4c
52 | $material-dialog-background-color = #333333
53 | $material-alert-dialog-background-color = #333333
54 | $material-alert-dialog-title-color = #ffffff
55 | $material-alert-dialog-content-color = #afafaf
56 | $material-alert-dialog-button-color = #80cbc4
57 | $material-progress-bar-primary-color = #009688
58 | $material-progress-bar-secondary-color = #80cbc4
59 | $material-progress-bar-background-color = #333333
60 | $material-progress-circle-primary-color = #009688
61 | $material-progress-circle-secondary-color = #80cbc4
62 | $material-tabbar-background-color = #009688
63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6)
64 | $material-tabbar-highlight-text-color = #ffffff
65 | $material-tabbar-highlight-color = #26a69a
66 | $fab-text-color = #ffffff
67 | $fab-background-color = #80cbc4
68 |
69 | @import 'components'
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/purple-theme.styl:
--------------------------------------------------------------------------------
1 | $background-color = #f3f3f3
2 | $material-background-color = #ffffff
3 | $text-color = #524b57
4 | $sub-text-color = #ccc
5 | $highlight-color = #8962ed
6 | $second-highlight-color = #574bdb
7 | $border-color = #ddd
8 | $toolbar-background-color = #fff
9 | $toolbar-button-color = #8962ed
10 | $toolbar-text-color = #5b2c7a
11 | $toolbar-border-color = #ddd
12 | $buttonbar-color = #ac62ed
13 | $buttonbar-active-text-color = #fff
14 | $list-background-color = #fff
15 | $list-header-background-color = #eee
16 | $list-tap-active-background-color = #d9d9d9
17 | $tabbar-background-color = #fff
18 | $tabbar-text-color = #aaa
19 | $tabbar-highlight-text-color = #8962ed
20 | $tabbar-border-color = #ddd
21 | $switch-highlight-color = #574bdb
22 | $modal-background-color = rgba(0, 0, 0, 0.7)
23 | $modal-text-color = #fff
24 | $alert-dialog-background-color = #f4f4f4
25 | $alert-dialog-text-color = #1f1f21
26 | $alert-dialog-button-color = #574bdb
27 | $alert-dialog-separator-color = #ddd
28 | $dialog-background-color = #f4f4f4
29 | $popover-background-color = white
30 | $popover-text-color = #1f1f21
31 | $notification-background-color = #dc5236
32 | $material-switch-active-thumb-color = #009688
33 | $material-switch-inactive-thumb-color = #f1f1f1
34 | $material-switch-active-background-color = #77c2bb
35 | $material-switch-inactive-background-color = #b0afaf
36 | $material-range-track-color = #e0e0e0
37 | $material-range-thumb-color = #009688
38 | $material-toolbar-background-color = #009688
39 | $material-toolbar-text-color = #ffffff
40 | $material-toolbar-button-color = #ffffff
41 | $material-toolbar-button-active-color = #26a69a
42 | $material-button-background-color = #009688
43 | $material-button-text-color = #ffffff
44 | $material-checkbox-active-color = #009688
45 | $material-checkbox-inactive-color = #717171
46 | $material-checkbox-checkmark-color = #ffffff
47 | $material-radio-button-active-color = #009688
48 | $material-radio-button-inactive-color = #717171
49 | $material-text-input-text-color = #212121
50 | $material-text-input-active-color = #009688
51 | $material-text-input-inactive-color = #afafaf
52 | $material-dialog-background-color = #ffffff
53 | $material-alert-dialog-background-color = #ffffff
54 | $material-alert-dialog-title-color = #212121
55 | $material-alert-dialog-content-color = #727272
56 | $material-alert-dialog-button-color = #009688
57 | $material-progress-bar-primary-color = #009688
58 | $material-progress-bar-secondary-color = #80cbc4
59 | $material-progress-bar-background-color = #e0e0e0
60 | $material-progress-circle-primary-color = #009688
61 | $material-progress-circle-secondary-color = #80cbc4
62 | $material-tabbar-background-color = #009688
63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6)
64 | $material-tabbar-highlight-text-color = #ffffff
65 | $material-tabbar-highlight-color = #26a69a
66 | $fab-text-color = #ffffff
67 | $fab-background-color = #009688
68 |
69 | @import 'components'
--------------------------------------------------------------------------------
/Samples/Monaca/code/AdGenerationSample/www/lib/onsenui/stylus/sunshine-theme.styl:
--------------------------------------------------------------------------------
1 | $background-color = #f9f9f9
2 | $material-background-color = #ffffff
3 | $text-color = #333
4 | $sub-text-color = #999
5 | $highlight-color = #eb482f
6 | $second-highlight-color = #f28227
7 | $border-color = #ddd
8 | $toolbar-background-color = #fff
9 | $toolbar-button-color = #eb5e2f
10 | $toolbar-text-color = #333
11 | $toolbar-border-color = #ddd
12 | $buttonbar-color = rgba(235, 94, 47, 0.84)
13 | $buttonbar-active-text-color = #fff
14 | $list-background-color = #fff
15 | $list-header-background-color = #eee
16 | $list-tap-active-background-color = #d9d9d9
17 | $tabbar-background-color = #fff
18 | $tabbar-text-color = #ccc
19 | $tabbar-highlight-text-color = #eb5e2f
20 | $tabbar-border-color = #ddd
21 | $switch-highlight-color = #e69e33
22 | $modal-background-color = rgba(0, 0, 0, 0.7)
23 | $modal-text-color = #fff
24 | $alert-dialog-background-color = #f4f4f4
25 | $alert-dialog-text-color = #1f1f21
26 | $alert-dialog-button-color = #eb482f
27 | $alert-dialog-separator-color = #ddd
28 | $dialog-background-color = #f4f4f4
29 | $popover-background-color = white
30 | $popover-text-color = #1f1f21
31 | $notification-background-color = #eb5e2f
32 | $material-switch-active-thumb-color = #009688
33 | $material-switch-inactive-thumb-color = #f1f1f1
34 | $material-switch-active-background-color = #77c2bb
35 | $material-switch-inactive-background-color = #b0afaf
36 | $material-range-track-color = #e0e0e0
37 | $material-range-thumb-color = #009688
38 | $material-toolbar-background-color = #009688
39 | $material-toolbar-text-color = #ffffff
40 | $material-toolbar-button-color = #ffffff
41 | $material-toolbar-button-active-color = #26a69a
42 | $material-button-background-color = #009688
43 | $material-button-text-color = #ffffff
44 | $material-checkbox-active-color = #009688
45 | $material-checkbox-inactive-color = #717171
46 | $material-checkbox-checkmark-color = #ffffff
47 | $material-radio-button-active-color = #009688
48 | $material-radio-button-inactive-color = #717171
49 | $material-text-input-text-color = #212121
50 | $material-text-input-active-color = #009688
51 | $material-text-input-inactive-color = #afafaf
52 | $material-dialog-background-color = #ffffff
53 | $material-alert-dialog-background-color = #ffffff
54 | $material-alert-dialog-title-color = #212121
55 | $material-alert-dialog-content-color = #727272
56 | $material-alert-dialog-button-color = #009688
57 | $material-progress-bar-primary-color = #009688
58 | $material-progress-bar-secondary-color = #80cbc4
59 | $material-progress-bar-background-color = #e0e0e0
60 | $material-progress-circle-primary-color = #009688
61 | $material-progress-circle-secondary-color = #80cbc4
62 | $material-tabbar-background-color = #009688
63 | $material-tabbar-text-color = rgba(255, 255, 255, 0.6)
64 | $material-tabbar-highlight-text-color = #ffffff
65 | $material-tabbar-highlight-color = #26a69a
66 | $fab-text-color = #ffffff
67 | $fab-background-color = #009688
68 |
69 | @import 'components'
--------------------------------------------------------------------------------
/Samples/Monaca/zip/AdGenerationSample.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AdGeneration/SDK/9d43b7dc2dcc3de0820d9c7fe89a2e8ae73eae10/Samples/Monaca/zip/AdGenerationSample.zip
--------------------------------------------------------------------------------