mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Merge branch 'master' of https://github.com/driftyco/ionic
Conflicts: dist/css/ionic-scoped.css
This commit is contained in:
Max Lynch
75
dist/css/fonts/ionicon-test.dev.svg
vendored
75
dist/css/fonts/ionicon-test.dev.svg
vendored
@ -1,75 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="ionicon-test" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
<glyph unicode="" d="M 386.6,334.2c-60.8,0-110.1-49.3-110.1-110.2c0-39.7, 21.1-74.5, 52.7-93.8L 182.8,130.2 c 31.6,19.4, 52.7,54.1, 52.7,93.8
|
||||
c0,60.8-49.3,110.2-110.2,110.2c-60.8,0-110.1-49.3-110.1-110.2c0-60.8, 49.3-110.1, 110.1-110.1l 261.3,0 c 60.8,0, 110.2,49.3, 110.2,110.1
|
||||
C 496.8,284.8, 447.5,334.2, 386.6,334.2z M 31.5,224c0,51.7, 42.1,93.8, 93.8,93.8c 51.7,0, 93.8-42.1, 93.8-93.8
|
||||
c0-51.7-42.1-93.8-93.8-93.8C 73.6,130.2, 31.5,172.3, 31.5,224z M 386.6,130.2c-51.7,0-93.8,42.1-93.8,93.8c0,51.7, 42.1,93.8, 93.8,93.8
|
||||
s 93.8-42.1, 93.8-93.8C 480.5,172.3, 438.4,130.2, 386.6,130.2z" data-tags="voicemail" />
|
||||
<glyph unicode="" d="M 306.4,272.3L 256,429.3l-50.5-157L 41.2,272.3 l 133.2-96.6l-51.1-157L 256,116.1l 132.8-97.4l-51.1,157l 133.2,96.6L 306.4,272.3 z M 322.5,170.6
|
||||
L 358.2,61l-92.9,68.1L 256,136l-9.3-6.8L 153.7,61l 35.7,109.7l 3.7,11.2l-9.5,6.9l-93,67.4l 114.9,0 l 11.6,0 l 3.6,11.1L 256,377.2l 35.3-109.9
|
||||
l 3.6-11.1l 11.6,0 l 114.9,0 l-92.9-67.4l-9.5-6.9L 322.5,170.6z" data-tags="star" />
|
||||
<glyph unicode="" d="M 306.4,272.3L 256,429.3l-50.5-157L 41.2,272.3 l 133.2-96.6l-51.1-157L 256,116.1l 132.8-97.4l-51.1,157l 133.2,96.6L 306.4,272.3 z" data-tags="star-filled" />
|
||||
<glyph unicode="" d="M 386.6,334.2c-60.8,0-110.1-49.3-110.1-110.2c0-39.7, 21.1-74.5, 52.7-93.8L 182.8,130.2 c 31.6,19.4, 52.7,54.1, 52.7,93.8
|
||||
c0,60.8-49.3,110.2-110.2,110.2c-60.8,0-110.1-49.3-110.1-110.2c0-60.8, 49.3-110.1, 110.1-110.1l 261.3,0 c 60.8,0, 110.2,49.3, 110.2,110.1
|
||||
C 496.8,284.8, 447.5,334.2, 386.6,334.2z M 31.5,224c0,51.7, 42.1,93.8, 93.8,93.8c 51.7,0, 93.8-42.1, 93.8-93.8
|
||||
c0-51.7-42.1-93.8-93.8-93.8C 73.6,130.2, 31.5,172.3, 31.5,224z M 386.6,130.2c-51.7,0-93.8,42.1-93.8,93.8c0,51.7, 42.1,93.8, 93.8,93.8
|
||||
s 93.8-42.1, 93.8-93.8C 480.5,172.3, 438.4,130.2, 386.6,130.2zM 386.6,334C 386.6,334, 386.6,334, 386.6,334c-0.1,0-0.1,0-0.1,0c-60.8,0-110.2-49.2-110.2-110.1c0-30.5, 12.4-58, 32.4-77.9
|
||||
L 203.3,146 c 20,19.9, 32.4,47.5, 32.4,77.9c0,60.8-49.3,110.1-110.2,110.1c0,0,0,0-0.1,0s0,0-0.1,0c-60.8,0-110.1-49.2-110.1-110
|
||||
c0-60.8, 49.3-110, 110.1-110l 261.3,0 c 60.8,0, 110.2,49.2, 110.2,110C 496.8,284.8, 447.5,334, 386.6,334z M 464.7,224
|
||||
c0-43.1-35.1-78.2-78.2-78.2s-78.2,35.1-78.2,78.2c0,43.1, 35.1,78.2, 78.2,78.2S 464.7,267.1, 464.7,224z M 125.5,145.8
|
||||
c-43.1,0-78.2,35.1-78.2,78.2c0,43.1, 35.1,78.2, 78.2,78.2s 78.2-35.1, 78.2-78.2C 203.7,180.9, 168.6,145.8, 125.5,145.8z" data-tags="voicemail-filled" />
|
||||
<glyph unicode="" d="M 394.6,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4
|
||||
C 357.2,106.1, 373.9,122.8, 394.6,122.8 M 394.6,138.8c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 424.1,138.8, 394.6,138.8L 394.6,138.8zM 256,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4
|
||||
C 218.6,106.1, 235.4,122.8, 256,122.8 M 256,138.8c-29.5,0-53.4-23.9-53.4-53.4S 226.5,32, 256,32c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 285.5,138.8, 256,138.8L 256,138.8zM 117.4,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,64.8, 80,85.4C 80,106.1, 96.8,122.8, 117.4,122.8
|
||||
M 117.4,138.8c-29.5,0-53.4-23.9-53.4-53.4S 87.9,32, 117.4,32c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,138.8, 117.4,138.8L 117.4,138.8zM 394.6,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4
|
||||
C 357.2,244.6, 373.9,261.4, 394.6,261.4 M 394.6,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 424.1,277.4, 394.6,277.4L 394.6,277.4zM 256,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4
|
||||
C 218.6,244.6, 235.4,261.4, 256,261.4 M 256,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 285.5,277.4, 256,277.4L 256,277.4zM 117.4,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,203.4, 80,224C 80,244.6, 96.8,261.4, 117.4,261.4
|
||||
M 117.4,277.4C 87.9,277.4, 64,253.5, 64,224s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,277.4, 117.4,277.4L 117.4,277.4zM 394.6,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4C 357.2,383.2, 373.9,400, 394.6,400
|
||||
M 394.6,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 448,392.1, 424.1,416, 394.6,416
|
||||
L 394.6,416zM 256,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4C 218.6,383.2, 235.4,400, 256,400
|
||||
M 256,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 309.4,392.1, 285.5,416, 256,416L 256,416zM 117.4,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,342, 80,362.6C 80,383.2, 96.8,400, 117.4,400 M 117.4,416
|
||||
C 87.9,416, 64,392.1, 64,362.6c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 170.8,392.1, 146.9,416, 117.4,416L 117.4,416z" data-tags="keypad" />
|
||||
<glyph unicode="" d="M 394.6,138.8c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 424.1,138.8, 394.6,138.8
|
||||
L 394.6,138.8zM 256,138.8c-29.5,0-53.4-23.9-53.4-53.4S 226.5,32, 256,32c 29.5,0, 53.4,23.9, 53.4,53.4S 285.5,138.8, 256,138.8L 256,138.8zM 117.4,138.8c-29.5,0-53.4-23.9-53.4-53.4S 87.9,32, 117.4,32c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,138.8, 117.4,138.8
|
||||
L 117.4,138.8zM 394.6,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 424.1,277.4, 394.6,277.4
|
||||
L 394.6,277.4zM 256,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 285.5,277.4, 256,277.4L 256,277.4z
|
||||
M 117.4,277.4C 87.9,277.4, 64,253.5, 64,224s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,277.4, 117.4,277.4
|
||||
L 117.4,277.4zM 394.6,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 448,392.1, 424.1,416, 394.6,416
|
||||
L 394.6,416zM 256,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 309.4,392.1, 285.5,416, 256,416
|
||||
L 256,416zM 117.4,416C 87.9,416, 64,392.1, 64,362.6c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 170.8,392.1, 146.9,416, 117.4,416
|
||||
L 117.4,416z" data-tags="keypad-filled" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,416.1c 105.9,0, 192.1-86.2, 192.1-192.1c0-46.8-16.8-89.8-44.8-123.1c-20.1,8.2-66.4,24.3-93.6,32.3c-2.4,0.7-2.8,0.9-2.8,10.8
|
||||
c0,8.2, 3.4,16.5, 6.6,23.4c 3.6,7.6, 7.8,20.4, 9.3,31.8c 4.3,4.9, 10,14.6, 13.7,33.2c 3.3,16.3, 1.7,22.3-0.4,27.8
|
||||
c-0.2,0.6-0.5,1.2-0.6,1.7c-0.8,3.8, 0.3,23.7, 3.1,39.1c 1.9,10.6-0.5,33.1-15,51.7c-9.2,11.8-26.8,26.2-59,28.2l-17.6,0
|
||||
c-31.6-2-49.2-16.4-58.4-28.2c-14.6-18.6-17-41.1-15.1-51.7c 2.8-15.4, 3.9-35.3, 3.1-39.1c-0.2-0.7-0.4-1.2-0.6-1.8
|
||||
c-2.2-5.6-3.7-11.5-0.4-27.8c 3.7-18.5, 9.5-28.2, 13.7-33.2c 1.5-11.5, 5.7-24.2, 9.3-31.8c 2.6-5.6, 3.8-13.1, 3.8-23.8
|
||||
c0-9.9-0.4-10-2.6-10.8c-28.4-8.4-73.1-24.5-91-32.2c-28,33.4-45,76.4-45,123.4C 63.9,329.9, 150.1,416.1, 256,416.1z" data-tags="contact" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,31.9c-105.9,0-192.1,86.2-192.1,192.1c0,105.9, 86.2,192.1, 192.1,192.1c 105.9,0, 192.1-86.2, 192.1-192.1
|
||||
C 448.1,118.1, 361.9,31.9, 256,31.9zM 256.1,209.5L 160,209.5L 160,192L 273.6,192L 273.6,352L 256.1,352 z" data-tags="clock" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 274,192L 160,192 l0,17 l 96,0 L 256,352 l 18,0 L 274,192 z" data-tags="clock-filled" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,31.9c-59,0-111.9,26.8-147.2,68.8c 18,7.7, 62.7,23.8, 91,32.2c 2.2,0.7, 2.6,0.8, 2.6,10.8c0,10.7-1.2,18.2-3.8,23.8
|
||||
c-3.6,7.6-7.8,20.4-9.3,31.8c-4.2,4.9-10,14.6-13.7,33.2c-3.3,16.3-1.7,22.3, 0.4,27.8c 0.2,0.6, 0.5,1.2, 0.6,1.8
|
||||
c 0.8,3.7-0.3,23.6-3.1,39.1c-1.9,10.6, 0.5,33.1, 15.1,51.7c 9.2,11.8, 26.8,26.2, 58.4,28.2l 17.6,0c 32.2-2, 49.8-16.5, 59-28.2
|
||||
c 14.6-18.6, 17-41.1, 15-51.7c-2.8-15.4-3.9-35.3-3.1-39.1c 0.2-0.6, 0.4-1.2, 0.6-1.7c 2.1-5.6, 3.7-11.5, 0.4-27.8
|
||||
c-3.7-18.5-9.5-28.2-13.7-33.2c-1.5-11.5-5.7-24.2-9.3-31.8c-3.3-7-6.6-15.2-6.6-23.4c0-9.9, 0.4-10, 2.8-10.8
|
||||
c 26.9-8, 73.3-24, 93.7-32.3C 368.1,58.7, 315.1,31.9, 256,31.9z" data-tags="contact-filled" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 8.9 KiB |
BIN
dist/css/fonts/ionicon-test.eot
vendored
BIN
dist/css/fonts/ionicon-test.eot
vendored
Binary file not shown.
75
dist/css/fonts/ionicon-test.svg
vendored
75
dist/css/fonts/ionicon-test.svg
vendored
@ -1,75 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="ionicon-test" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
<glyph unicode="" d="M 386.6,334.2c-60.8,0-110.1-49.3-110.1-110.2c0-39.7, 21.1-74.5, 52.7-93.8L 182.8,130.2 c 31.6,19.4, 52.7,54.1, 52.7,93.8
|
||||
c0,60.8-49.3,110.2-110.2,110.2c-60.8,0-110.1-49.3-110.1-110.2c0-60.8, 49.3-110.1, 110.1-110.1l 261.3,0 c 60.8,0, 110.2,49.3, 110.2,110.1
|
||||
C 496.8,284.8, 447.5,334.2, 386.6,334.2z M 31.5,224c0,51.7, 42.1,93.8, 93.8,93.8c 51.7,0, 93.8-42.1, 93.8-93.8
|
||||
c0-51.7-42.1-93.8-93.8-93.8C 73.6,130.2, 31.5,172.3, 31.5,224z M 386.6,130.2c-51.7,0-93.8,42.1-93.8,93.8c0,51.7, 42.1,93.8, 93.8,93.8
|
||||
s 93.8-42.1, 93.8-93.8C 480.5,172.3, 438.4,130.2, 386.6,130.2z" />
|
||||
<glyph unicode="" d="M 306.4,272.3L 256,429.3l-50.5-157L 41.2,272.3 l 133.2-96.6l-51.1-157L 256,116.1l 132.8-97.4l-51.1,157l 133.2,96.6L 306.4,272.3 z M 322.5,170.6
|
||||
L 358.2,61l-92.9,68.1L 256,136l-9.3-6.8L 153.7,61l 35.7,109.7l 3.7,11.2l-9.5,6.9l-93,67.4l 114.9,0 l 11.6,0 l 3.6,11.1L 256,377.2l 35.3-109.9
|
||||
l 3.6-11.1l 11.6,0 l 114.9,0 l-92.9-67.4l-9.5-6.9L 322.5,170.6z" />
|
||||
<glyph unicode="" d="M 306.4,272.3L 256,429.3l-50.5-157L 41.2,272.3 l 133.2-96.6l-51.1-157L 256,116.1l 132.8-97.4l-51.1,157l 133.2,96.6L 306.4,272.3 z" />
|
||||
<glyph unicode="" d="M 386.6,334.2c-60.8,0-110.1-49.3-110.1-110.2c0-39.7, 21.1-74.5, 52.7-93.8L 182.8,130.2 c 31.6,19.4, 52.7,54.1, 52.7,93.8
|
||||
c0,60.8-49.3,110.2-110.2,110.2c-60.8,0-110.1-49.3-110.1-110.2c0-60.8, 49.3-110.1, 110.1-110.1l 261.3,0 c 60.8,0, 110.2,49.3, 110.2,110.1
|
||||
C 496.8,284.8, 447.5,334.2, 386.6,334.2z M 31.5,224c0,51.7, 42.1,93.8, 93.8,93.8c 51.7,0, 93.8-42.1, 93.8-93.8
|
||||
c0-51.7-42.1-93.8-93.8-93.8C 73.6,130.2, 31.5,172.3, 31.5,224z M 386.6,130.2c-51.7,0-93.8,42.1-93.8,93.8c0,51.7, 42.1,93.8, 93.8,93.8
|
||||
s 93.8-42.1, 93.8-93.8C 480.5,172.3, 438.4,130.2, 386.6,130.2zM 386.6,334C 386.6,334, 386.6,334, 386.6,334c-0.1,0-0.1,0-0.1,0c-60.8,0-110.2-49.2-110.2-110.1c0-30.5, 12.4-58, 32.4-77.9
|
||||
L 203.3,146 c 20,19.9, 32.4,47.5, 32.4,77.9c0,60.8-49.3,110.1-110.2,110.1c0,0,0,0-0.1,0s0,0-0.1,0c-60.8,0-110.1-49.2-110.1-110
|
||||
c0-60.8, 49.3-110, 110.1-110l 261.3,0 c 60.8,0, 110.2,49.2, 110.2,110C 496.8,284.8, 447.5,334, 386.6,334z M 464.7,224
|
||||
c0-43.1-35.1-78.2-78.2-78.2s-78.2,35.1-78.2,78.2c0,43.1, 35.1,78.2, 78.2,78.2S 464.7,267.1, 464.7,224z M 125.5,145.8
|
||||
c-43.1,0-78.2,35.1-78.2,78.2c0,43.1, 35.1,78.2, 78.2,78.2s 78.2-35.1, 78.2-78.2C 203.7,180.9, 168.6,145.8, 125.5,145.8z" />
|
||||
<glyph unicode="" d="M 394.6,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4
|
||||
C 357.2,106.1, 373.9,122.8, 394.6,122.8 M 394.6,138.8c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 424.1,138.8, 394.6,138.8L 394.6,138.8zM 256,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4
|
||||
C 218.6,106.1, 235.4,122.8, 256,122.8 M 256,138.8c-29.5,0-53.4-23.9-53.4-53.4S 226.5,32, 256,32c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 285.5,138.8, 256,138.8L 256,138.8zM 117.4,122.8c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,64.8, 80,85.4C 80,106.1, 96.8,122.8, 117.4,122.8
|
||||
M 117.4,138.8c-29.5,0-53.4-23.9-53.4-53.4S 87.9,32, 117.4,32c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,138.8, 117.4,138.8L 117.4,138.8zM 394.6,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4
|
||||
C 357.2,244.6, 373.9,261.4, 394.6,261.4 M 394.6,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 424.1,277.4, 394.6,277.4L 394.6,277.4zM 256,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4
|
||||
C 218.6,244.6, 235.4,261.4, 256,261.4 M 256,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4
|
||||
S 285.5,277.4, 256,277.4L 256,277.4zM 117.4,261.4c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,203.4, 80,224C 80,244.6, 96.8,261.4, 117.4,261.4
|
||||
M 117.4,277.4C 87.9,277.4, 64,253.5, 64,224s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,277.4, 117.4,277.4L 117.4,277.4zM 394.6,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4s-37.4,16.8-37.4,37.4C 357.2,383.2, 373.9,400, 394.6,400
|
||||
M 394.6,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 448,392.1, 424.1,416, 394.6,416
|
||||
L 394.6,416zM 256,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4c-20.6,0-37.4,16.8-37.4,37.4C 218.6,383.2, 235.4,400, 256,400
|
||||
M 256,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 309.4,392.1, 285.5,416, 256,416L 256,416zM 117.4,400c 20.6,0, 37.4-16.8, 37.4-37.4c0-20.6-16.8-37.4-37.4-37.4S 80,342, 80,362.6C 80,383.2, 96.8,400, 117.4,400 M 117.4,416
|
||||
C 87.9,416, 64,392.1, 64,362.6c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 170.8,392.1, 146.9,416, 117.4,416L 117.4,416z" />
|
||||
<glyph unicode="" d="M 394.6,138.8c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 424.1,138.8, 394.6,138.8
|
||||
L 394.6,138.8zM 256,138.8c-29.5,0-53.4-23.9-53.4-53.4S 226.5,32, 256,32c 29.5,0, 53.4,23.9, 53.4,53.4S 285.5,138.8, 256,138.8L 256,138.8zM 117.4,138.8c-29.5,0-53.4-23.9-53.4-53.4S 87.9,32, 117.4,32c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,138.8, 117.4,138.8
|
||||
L 117.4,138.8zM 394.6,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 424.1,277.4, 394.6,277.4
|
||||
L 394.6,277.4zM 256,277.4c-29.5,0-53.4-23.9-53.4-53.4s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 285.5,277.4, 256,277.4L 256,277.4z
|
||||
M 117.4,277.4C 87.9,277.4, 64,253.5, 64,224s 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4S 146.9,277.4, 117.4,277.4
|
||||
L 117.4,277.4zM 394.6,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 448,392.1, 424.1,416, 394.6,416
|
||||
L 394.6,416zM 256,416c-29.5,0-53.4-23.9-53.4-53.4c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 309.4,392.1, 285.5,416, 256,416
|
||||
L 256,416zM 117.4,416C 87.9,416, 64,392.1, 64,362.6c0-29.5, 23.9-53.4, 53.4-53.4c 29.5,0, 53.4,23.9, 53.4,53.4C 170.8,392.1, 146.9,416, 117.4,416
|
||||
L 117.4,416z" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,416.1c 105.9,0, 192.1-86.2, 192.1-192.1c0-46.8-16.8-89.8-44.8-123.1c-20.1,8.2-66.4,24.3-93.6,32.3c-2.4,0.7-2.8,0.9-2.8,10.8
|
||||
c0,8.2, 3.4,16.5, 6.6,23.4c 3.6,7.6, 7.8,20.4, 9.3,31.8c 4.3,4.9, 10,14.6, 13.7,33.2c 3.3,16.3, 1.7,22.3-0.4,27.8
|
||||
c-0.2,0.6-0.5,1.2-0.6,1.7c-0.8,3.8, 0.3,23.7, 3.1,39.1c 1.9,10.6-0.5,33.1-15,51.7c-9.2,11.8-26.8,26.2-59,28.2l-17.6,0
|
||||
c-31.6-2-49.2-16.4-58.4-28.2c-14.6-18.6-17-41.1-15.1-51.7c 2.8-15.4, 3.9-35.3, 3.1-39.1c-0.2-0.7-0.4-1.2-0.6-1.8
|
||||
c-2.2-5.6-3.7-11.5-0.4-27.8c 3.7-18.5, 9.5-28.2, 13.7-33.2c 1.5-11.5, 5.7-24.2, 9.3-31.8c 2.6-5.6, 3.8-13.1, 3.8-23.8
|
||||
c0-9.9-0.4-10-2.6-10.8c-28.4-8.4-73.1-24.5-91-32.2c-28,33.4-45,76.4-45,123.4C 63.9,329.9, 150.1,416.1, 256,416.1z" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,31.9c-105.9,0-192.1,86.2-192.1,192.1c0,105.9, 86.2,192.1, 192.1,192.1c 105.9,0, 192.1-86.2, 192.1-192.1
|
||||
C 448.1,118.1, 361.9,31.9, 256,31.9zM 256.1,209.5L 160,209.5L 160,192L 273.6,192L 273.6,352L 256.1,352 z" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 274,192L 160,192 l0,17 l 96,0 L 256,352 l 18,0 L 274,192 z" />
|
||||
<glyph unicode="" d="M 256,433.6C 140.3,433.6, 46.4,339.7, 46.4,224S 140.3,14.4, 256,14.4c 115.7,0, 209.6,93.8, 209.6,209.6S 371.7,433.6, 256,433.6z
|
||||
M 256,31.9c-59,0-111.9,26.8-147.2,68.8c 18,7.7, 62.7,23.8, 91,32.2c 2.2,0.7, 2.6,0.8, 2.6,10.8c0,10.7-1.2,18.2-3.8,23.8
|
||||
c-3.6,7.6-7.8,20.4-9.3,31.8c-4.2,4.9-10,14.6-13.7,33.2c-3.3,16.3-1.7,22.3, 0.4,27.8c 0.2,0.6, 0.5,1.2, 0.6,1.8
|
||||
c 0.8,3.7-0.3,23.6-3.1,39.1c-1.9,10.6, 0.5,33.1, 15.1,51.7c 9.2,11.8, 26.8,26.2, 58.4,28.2l 17.6,0c 32.2-2, 49.8-16.5, 59-28.2
|
||||
c 14.6-18.6, 17-41.1, 15-51.7c-2.8-15.4-3.9-35.3-3.1-39.1c 0.2-0.6, 0.4-1.2, 0.6-1.7c 2.1-5.6, 3.7-11.5, 0.4-27.8
|
||||
c-3.7-18.5-9.5-28.2-13.7-33.2c-1.5-11.5-5.7-24.2-9.3-31.8c-3.3-7-6.6-15.2-6.6-23.4c0-9.9, 0.4-10, 2.8-10.8
|
||||
c 26.9-8, 73.3-24, 93.7-32.3C 368.1,58.7, 315.1,31.9, 256,31.9z" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 8.7 KiB |
BIN
dist/css/fonts/ionicon-test.ttf
vendored
BIN
dist/css/fonts/ionicon-test.ttf
vendored
Binary file not shown.
BIN
dist/css/fonts/ionicon-test.woff
vendored
BIN
dist/css/fonts/ionicon-test.woff
vendored
Binary file not shown.
1552
dist/css/fonts/ionicons.dev.svg
vendored
1552
dist/css/fonts/ionicons.dev.svg
vendored
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 218 KiB |
BIN
dist/css/fonts/ionicons.eot
vendored
BIN
dist/css/fonts/ionicons.eot
vendored
Binary file not shown.
1695
dist/css/fonts/ionicons.svg
vendored
1695
dist/css/fonts/ionicons.svg
vendored
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 211 KiB |
BIN
dist/css/fonts/ionicons.ttf
vendored
BIN
dist/css/fonts/ionicons.ttf
vendored
Binary file not shown.
BIN
dist/css/fonts/ionicons.woff
vendored
BIN
dist/css/fonts/ionicons.woff
vendored
Binary file not shown.
311
dist/css/ionic-ios7.css
vendored
311
dist/css/ionic-ios7.css
vendored
@ -198,6 +198,7 @@ legend {
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
* 4. Remove any default :focus styles
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
@ -208,7 +209,13 @@ textarea {
|
||||
font-size: 100%;
|
||||
/* 2 */
|
||||
font-family: inherit;
|
||||
/* 1 */ }
|
||||
/* 1 */
|
||||
outline-offset: 0;
|
||||
/* 4 */
|
||||
outline-style: none;
|
||||
/* 4 */
|
||||
outline-width: 0;
|
||||
/* 4 */ }
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
@ -938,6 +945,7 @@ address {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
@ -967,16 +975,16 @@ address {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
border-top: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd; }
|
||||
background-color: white; }
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0; }
|
||||
.list-item > .badge {
|
||||
.list-item .badge {
|
||||
float: right; }
|
||||
.list-item > i:last-child {
|
||||
float: right; }
|
||||
.list-item > .badge + .badge {
|
||||
.list-item .badge + .badge {
|
||||
margin-right: 5px; }
|
||||
.list-item.active, .list-item.active:hover, .list-item.active:focus {
|
||||
z-index: 2; }
|
||||
@ -1112,15 +1120,56 @@ a.list-item {
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 2;
|
||||
padding: 15px 15px;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child {
|
||||
margin-top: -5px; }
|
||||
|
||||
.list-item-content i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: 28px;
|
||||
align-items: center; }
|
||||
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 45px; }
|
||||
.list-icon-left .list-item-content i {
|
||||
left: 7.5px; }
|
||||
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 45px; }
|
||||
.list-icon-right .list-item-content i {
|
||||
right: 7.5px; }
|
||||
|
||||
.list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto; }
|
||||
|
||||
.list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px; }
|
||||
|
||||
.list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.list-thumbnail .list-item-content img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
@ -1192,6 +1241,16 @@ a.list-item {
|
||||
border-radius: 0;
|
||||
border: none; }
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
padding: 5px 15px;
|
||||
margin-top: 20px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
@ -1201,13 +1260,15 @@ a.list-item {
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px; }
|
||||
.list-divider,
|
||||
.list-header {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px; }
|
||||
|
||||
.list-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3; }
|
||||
.padding .list-divider,
|
||||
.padding .list-heading {
|
||||
border-left: 1px solid #dddddd;
|
||||
border-right: 1px solid #dddddd; }
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
@ -1377,26 +1438,8 @@ input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
input[type="color"] {
|
||||
border: 0; }
|
||||
textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
outline: 0; }
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@ -1425,14 +1468,6 @@ select[multiple],
|
||||
select[size] {
|
||||
height: auto; }
|
||||
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px; }
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #999999; }
|
||||
@ -1443,24 +1478,6 @@ input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #999999; }
|
||||
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: auto;
|
||||
height: 4px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
background-color: #cccccc;
|
||||
-webkit-appearance: none !important; }
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
|
||||
-webkit-appearance: none !important; }
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
@ -1533,26 +1550,58 @@ input[type="checkbox"][readonly] {
|
||||
-webkit-transform: none;
|
||||
transition-delay: 0.05s, 0s; }
|
||||
|
||||
/* hide a radio button's icon by default */
|
||||
.radio-item [class^="icon-"],
|
||||
.radio-item [class*=" icon-"] {
|
||||
display: none; }
|
||||
.radio-buttton-list .list-item-content {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
padding-right: 60px; }
|
||||
|
||||
.radio-list label.list-item {
|
||||
cursor: pointer; }
|
||||
.radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: 13px;
|
||||
height: 100%;
|
||||
font-size: 24px; }
|
||||
|
||||
.radio-list input[type="radio"] {
|
||||
.radio-buttton-list input[type="radio"] {
|
||||
/* hide any radio button inputs elements (the ugly circles) */
|
||||
display: none;
|
||||
/* when this radio-item is checked */ }
|
||||
.radio-list input[type="radio"]:checked + .radio-item {
|
||||
/* show the radio-item icon when checked */ }
|
||||
.radio-list input[type="radio"]:checked + .radio-item [class^="icon-"],
|
||||
.radio-list input[type="radio"]:checked + .radio-item [class*=" icon-"] {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 10px;
|
||||
display: inline; }
|
||||
display: none; }
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
|
||||
/* style the list item content when its checked */
|
||||
background: #f7f7f7; }
|
||||
.radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible; }
|
||||
|
||||
input[type="range"] {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: auto;
|
||||
height: 4px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
background-color: #cccccc;
|
||||
-webkit-appearance: none !important; }
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none !important; }
|
||||
input[type="range"]::-webkit-slider-thumb:after {
|
||||
/* create a larger (but hidden) hit area */
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
display: table;
|
||||
padding: 20px;
|
||||
content: ' '; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
@ -2041,6 +2090,40 @@ a.button {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.fill-icon.brand-default:before {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary:before {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info:before {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success:before {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning:before {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark:before {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker:before {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark:before {
|
||||
background: #333333; }
|
||||
.fill-icon.gray:before {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light:before {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
display: none !important; }
|
||||
@ -2080,24 +2163,50 @@ a.button {
|
||||
.padding-horizontal {
|
||||
padding-left: 10px; }
|
||||
|
||||
.margin {
|
||||
margin: 10px; }
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: 10px; }
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-right: 10px; }
|
||||
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: 10px; }
|
||||
|
||||
.rounded {
|
||||
border-radius: 4px; }
|
||||
|
||||
.brand-default {
|
||||
color: white; }
|
||||
|
||||
.brand-secondary {
|
||||
color: whitesmoke; }
|
||||
|
||||
.brand-primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
.brand-info {
|
||||
color: #43cee6; }
|
||||
|
||||
.brand-success {
|
||||
color: #66cc33; }
|
||||
|
||||
.brand-warning {
|
||||
color: #f0b840; }
|
||||
|
||||
.brand-danger {
|
||||
color: #ef4e3a; }
|
||||
|
||||
.brand-dark {
|
||||
color: #444444; }
|
||||
|
||||
.black {
|
||||
color: black; }
|
||||
|
||||
.gray-darker {
|
||||
color: #222222; }
|
||||
|
||||
.gray-dark {
|
||||
color: #333333; }
|
||||
|
||||
.gray {
|
||||
color: #555555; }
|
||||
|
||||
.gray-light {
|
||||
color: #999999; }
|
||||
|
||||
.gray-lighter {
|
||||
color: #eeeeee; }
|
||||
|
||||
.white {
|
||||
color: white; }
|
||||
|
||||
1170
dist/css/ionic.css
vendored
1170
dist/css/ionic.css
vendored
File diff suppressed because one or more lines are too long
13
dist/js/ionic-angular.js
vendored
13
dist/js/ionic-angular.js
vendored
@ -1031,28 +1031,21 @@ angular.module('ionic.ui.toggle', [])
|
||||
replace: true,
|
||||
require: '?ngModel',
|
||||
scope: true,
|
||||
template: '<div class="toggle">' +
|
||||
' <input type="checkbox">'+
|
||||
' <div class="track">' +
|
||||
' <div class="handle"></div>' +
|
||||
' </div>' +
|
||||
'</div>',
|
||||
template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox, track, handle;
|
||||
var checkbox, handle;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children().eq(0);
|
||||
track = $element.children().eq(1);
|
||||
handle = track.children().eq(0);
|
||||
|
||||
if(!checkbox.length || !track.length || !handle.length) { return; }
|
||||
if(!checkbox.length || !handle.length) { return; }
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
track: track[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
|
||||
18
dist/js/ionic.js
vendored
18
dist/js/ionic.js
vendored
@ -3036,20 +3036,8 @@ ionic.views.TabBar.prototype = {
|
||||
ionic.views.Toggle = function(opts) {
|
||||
this.el = opts.el;
|
||||
this.checkbox = opts.checkbox;
|
||||
this.track = opts.track;
|
||||
this.handle = opts.handle;
|
||||
this.openPercent = -1;
|
||||
|
||||
/*
|
||||
// remember that this element, and all its children are apart of a component
|
||||
// and assign the component instance to each element so the lookups
|
||||
// only has to go through this process just once
|
||||
this.el.isComponent = true;
|
||||
this.track.component = this;
|
||||
this.track.isComponent = true;
|
||||
this.handle.component = this;
|
||||
this.handle.isComponent = true;
|
||||
*/
|
||||
};
|
||||
|
||||
ionic.views.Toggle.prototype = {
|
||||
@ -3059,8 +3047,8 @@ ionic.views.TabBar.prototype = {
|
||||
},
|
||||
|
||||
drag: function(e) {
|
||||
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
|
||||
if(e.pageX >= slidePageRight - 4) {
|
||||
this.val(true);
|
||||
@ -3081,7 +3069,7 @@ ionic.views.TabBar.prototype = {
|
||||
} else if(openPercent === 100) {
|
||||
this.val(true);
|
||||
} else {
|
||||
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
|
||||
var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
|
||||
openPixel = (openPixel < 1 ? 0 : openPixel);
|
||||
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 218 KiB |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 211 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
13
js/ext/angular/src/directive/ionicToggle.js
vendored
13
js/ext/angular/src/directive/ionicToggle.js
vendored
@ -8,28 +8,21 @@ angular.module('ionic.ui.toggle', [])
|
||||
replace: true,
|
||||
require: '?ngModel',
|
||||
scope: true,
|
||||
template: '<div class="toggle">' +
|
||||
' <input type="checkbox">'+
|
||||
' <div class="track">' +
|
||||
' <div class="handle"></div>' +
|
||||
' </div>' +
|
||||
'</div>',
|
||||
template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox, track, handle;
|
||||
var checkbox, handle;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children().eq(0);
|
||||
track = $element.children().eq(1);
|
||||
handle = track.children().eq(0);
|
||||
|
||||
if(!checkbox.length || !track.length || !handle.length) { return; }
|
||||
if(!checkbox.length || !handle.length) { return; }
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
track: track[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
|
||||
@ -18,12 +18,11 @@
|
||||
var opts = {
|
||||
el: el,
|
||||
checkbox: el.querySelector("input[type='checkbox']"),
|
||||
track: el.querySelector(".track"),
|
||||
handle: el.querySelector(".handle")
|
||||
};
|
||||
|
||||
// validate its a well formed toggle with the required pieces
|
||||
if(!opts.checkbox || !opts.track || !opts.handle) return;
|
||||
if(!opts.checkbox || !opts.handle) return;
|
||||
|
||||
// initialize an instance of a Toggle
|
||||
el.component = new ionic.views.Toggle(opts);
|
||||
|
||||
@ -4,20 +4,8 @@
|
||||
ionic.views.Toggle = function(opts) {
|
||||
this.el = opts.el;
|
||||
this.checkbox = opts.checkbox;
|
||||
this.track = opts.track;
|
||||
this.handle = opts.handle;
|
||||
this.openPercent = -1;
|
||||
|
||||
/*
|
||||
// remember that this element, and all its children are apart of a component
|
||||
// and assign the component instance to each element so the lookups
|
||||
// only has to go through this process just once
|
||||
this.el.isComponent = true;
|
||||
this.track.component = this;
|
||||
this.track.isComponent = true;
|
||||
this.handle.component = this;
|
||||
this.handle.isComponent = true;
|
||||
*/
|
||||
};
|
||||
|
||||
ionic.views.Toggle.prototype = {
|
||||
@ -27,8 +15,8 @@
|
||||
},
|
||||
|
||||
drag: function(e) {
|
||||
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
|
||||
if(e.pageX >= slidePageRight - 4) {
|
||||
this.val(true);
|
||||
@ -49,7 +37,7 @@
|
||||
} else if(openPercent === 100) {
|
||||
this.val(true);
|
||||
} else {
|
||||
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
|
||||
var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
|
||||
openPixel = (openPixel < 1 ? 0 : openPixel);
|
||||
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"../ionic/form",
|
||||
"toggle",
|
||||
"../ionic/radio",
|
||||
"../ionic/range",
|
||||
|
||||
// Buttons
|
||||
"../ionic/button",
|
||||
@ -38,4 +39,5 @@
|
||||
"../ionic/animations",
|
||||
|
||||
// Util
|
||||
"../ionic/icons",
|
||||
"../ionic/util";
|
||||
|
||||
@ -4,46 +4,69 @@
|
||||
display: inline-block;
|
||||
padding: ($checkbox-height / 4) ($checkbox-width / 4);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.checkbox input {
|
||||
position: relative;
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
|
||||
/* what the checkbox looks like when its not checked */
|
||||
.handle {
|
||||
width: $checkbox-width;
|
||||
height: $checkbox-height;
|
||||
&:before {
|
||||
/* what the checkbox looks like when its not checked */
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: $checkbox-border-width solid $checkbox-off-border-color;
|
||||
border-radius: $checkbox-border-radius;
|
||||
background: $checkbox-off-bg-color;
|
||||
content: ' ';
|
||||
transition: background-color .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* the checkmark within the box */
|
||||
.handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: $checkbox-width / 2;
|
||||
width: $checkbox-width / 2;
|
||||
height: $checkbox-width / 4;
|
||||
border: $checkbox-check-width solid $checkbox-check-color;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity .1s ease-in-out;
|
||||
/* the checkmark within the box */
|
||||
.checkbox input:after {
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 26%;
|
||||
display: table;
|
||||
width: $checkbox-width / 2;
|
||||
height: ($checkbox-width / 3) + 1;
|
||||
border: $checkbox-check-width solid $checkbox-check-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
content: ' ';
|
||||
opacity: 0;
|
||||
transition: opacity .05s ease-in-out;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* what it looks like when it is checked */
|
||||
input:checked + .handle {
|
||||
background: $checkbox-on-bg-color;
|
||||
/* what the background looks like when its checked */
|
||||
.checkbox input:checked:before {
|
||||
border: 0;
|
||||
background: $checkbox-on-bg-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* what the checkmark looks like when its checked */
|
||||
.checkbox input:checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
/* make sure list item content have enough padding on left to fit the checkbox */
|
||||
.checkbox-item .list-item-content {
|
||||
padding-left: ($list-item-padding * 2) + $checkbox-width;
|
||||
}
|
||||
|
||||
/* position the checkbox to the left within a list item */
|
||||
.checkbox-item .checkbox {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: $list-item-padding / 2;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@ -183,14 +183,8 @@ input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
input[type="color"] {
|
||||
border: 0;
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -231,14 +225,6 @@ select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
|
||||
// Placeholder
|
||||
// -------------------------------
|
||||
@ -248,30 +234,6 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
// Range
|
||||
// -------------------------------
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: auto;
|
||||
height: $range-track-height;
|
||||
outline: none;
|
||||
border-radius: $range-track-height;
|
||||
background-color: $range-track-color;
|
||||
-webkit-appearance: none !important;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
width: $range-slider-width;
|
||||
height: $range-slider-height;
|
||||
border-radius: $range-slider-border-radius;
|
||||
background-color: $toggle-handle-off-bg-color;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
// -------------------------------
|
||||
|
||||
|
||||
52
scss/ionic/_icons.scss
Normal file
52
scss/ionic/_icons.scss
Normal file
@ -0,0 +1,52 @@
|
||||
|
||||
.fill-icon {
|
||||
color: white !important;
|
||||
&:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: $icon-fill-border-radius;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&.brand-default:before {
|
||||
background: $brand-default;
|
||||
}
|
||||
&.brand-secondary:before {
|
||||
background: $brand-secondary;
|
||||
}
|
||||
&.brand-primary:before {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&.brand-info:before {
|
||||
background: $brand-info;
|
||||
}
|
||||
&.brand-success:before {
|
||||
background: $brand-success;
|
||||
}
|
||||
&.brand-warning:before {
|
||||
background: $brand-warning;
|
||||
}
|
||||
&.brand-danger:before {
|
||||
background: $brand-danger;
|
||||
}
|
||||
&.brand-dark:before {
|
||||
background: $brand-dark;
|
||||
}
|
||||
|
||||
&.gray-darker:before {
|
||||
background: $gray-darker;
|
||||
}
|
||||
&.gray-dark:before {
|
||||
background: $gray-dark;
|
||||
}
|
||||
&.gray:before {
|
||||
background: $gray;
|
||||
}
|
||||
&.gray-light:before {
|
||||
background: $gray-light;
|
||||
}
|
||||
&.gray-lighter:before {
|
||||
background: $gray-lighter;
|
||||
}
|
||||
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@include list-style($list-default-background, $list-default-border, $gray-dark);
|
||||
|
||||
@ -19,56 +20,41 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -1px;
|
||||
margin-bottom: $list-item-border-width * -1;
|
||||
margin-left: $list-item-border-width * -1;
|
||||
margin-right: $list-item-border-width * -1;
|
||||
border-top: $list-item-border-width solid $list-item-border-color;
|
||||
|
||||
|
||||
// Make sure the borders and stuff don't get hidden
|
||||
// by children
|
||||
z-index: 2;
|
||||
|
||||
background-color: $list-default-background;
|
||||
border: $list-item-border;
|
||||
|
||||
// Round the first and last items
|
||||
&:first-child {
|
||||
//@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
//@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
// Align badges within list items
|
||||
> .badge {
|
||||
.badge {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
> .badge + .badge {
|
||||
.badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
// [converter] extracted a& to a.list-item
|
||||
|
||||
// Active class on item itself, not parent
|
||||
&.active,
|
||||
&.active:hover,
|
||||
&.active:focus {
|
||||
z-index: 2;
|
||||
//color: $list-group-active-color;
|
||||
//background-color: $list-group-active-bg;
|
||||
//border-color: $list-group-active-border;
|
||||
|
||||
// Force color to inherit for custom content
|
||||
.list-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-item-text {
|
||||
//color: lighten($list-group-active-bg, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
// Different themes for list items
|
||||
@ -119,27 +105,71 @@ a.list-item {
|
||||
*/
|
||||
.list-item-content {
|
||||
position: relative;
|
||||
|
||||
background-color: #fff;
|
||||
border: $list-item-border-width solid $list-item-border-color;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
padding: 15px 15px;
|
||||
margin-top: $list-item-border-width * -1;
|
||||
padding: $list-item-padding;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// Align icons to the right
|
||||
> i:last-child {
|
||||
float: right;
|
||||
.list-item-content i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
font-size: $list-icon-font-size;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: ($list-item-padding * 3);
|
||||
|
||||
i {
|
||||
left: $list-item-padding / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: ($list-item-padding * 3);
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
i {
|
||||
right: $list-item-padding / 2;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: $list-thumbnail-width + $list-item-padding;
|
||||
min-height: $list-thumbnail-width;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: $list-thumbnail-width;
|
||||
max-height: $list-thumbnail-width;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -234,24 +264,40 @@ a.list-item {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
padding: $list-header-padding;
|
||||
margin-top: $list-header-margin-top;
|
||||
background-color: $list-header-bg;
|
||||
color: $list-header-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
padding: 5px 15px;
|
||||
padding: $list-divider-padding;
|
||||
background-color: $list-divider-bg;
|
||||
color: $list-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.list-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
// inset so they layout the same as list items
|
||||
.list-divider,
|
||||
.list-header {
|
||||
margin-left: $list-item-border-width * -1;
|
||||
margin-right: $list-item-border-width * -1;
|
||||
}
|
||||
.list-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
|
||||
// make sure these have left/right borders when inset
|
||||
.padding .list-divider,
|
||||
.padding .list-heading {
|
||||
border-left: $list-item-border-width solid $list-item-border-color;
|
||||
border-right: $list-item-border-width solid $list-item-border-color;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -2,31 +2,34 @@
|
||||
// Radio Buttons
|
||||
// -------------------------------
|
||||
|
||||
/* hide a radio button's icon by default */
|
||||
.radio-item {
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.radio-list label.list-item {
|
||||
cursor: pointer;
|
||||
.radio-buttton-list .list-item-content {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
padding-right: $list-item-padding * 4;
|
||||
}
|
||||
|
||||
.radio-list input[type="radio"] {
|
||||
.radio-buttton-list .radio-button-icon {
|
||||
/* checkmark icon will be hidden by default */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
visibility: hidden;
|
||||
padding: $list-item-padding - 2;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.radio-buttton-list input[type="radio"] {
|
||||
/* hide any radio button inputs elements (the ugly circles) */
|
||||
display: none;
|
||||
|
||||
/* when this radio-item is checked */
|
||||
&:checked + .radio-item {
|
||||
&:checked ~ .list-item-content {
|
||||
/* style the list item content when its checked */
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
/* show the radio-item icon when checked */
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: $content-padding;
|
||||
display: inline;
|
||||
}
|
||||
&:checked ~ .radio-button-icon {
|
||||
/* show the checkmark icon when its checked */
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
37
scss/ionic/_range.scss
Normal file
37
scss/ionic/_range.scss
Normal file
@ -0,0 +1,37 @@
|
||||
|
||||
// Range
|
||||
// -------------------------------
|
||||
|
||||
input[type="range"] {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: auto;
|
||||
height: $range-track-height;
|
||||
outline: none;
|
||||
border-radius: $range-track-height;
|
||||
background-color: $range-track-color;
|
||||
-webkit-appearance: none !important;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: $range-slider-width;
|
||||
height: $range-slider-height;
|
||||
border-radius: $range-slider-border-radius;
|
||||
background-color: $toggle-handle-off-bg-color;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,.5), 0 5px 6px rgba(0,0,0,0.25);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:after {
|
||||
/* create a larger (but hidden) hit area */
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
display: table;
|
||||
padding: 20px;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
}
|
||||
@ -233,6 +233,7 @@ legend {
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
* 4. Remove any default :focus styles
|
||||
*/
|
||||
|
||||
button,
|
||||
@ -242,6 +243,9 @@ textarea {
|
||||
margin: 0; /* 3 */
|
||||
font-size: 100%; /* 2 */
|
||||
font-family: inherit; /* 1 */
|
||||
outline-offset: 0; /* 4 */
|
||||
outline-style: none; /* 4 */
|
||||
outline-width: 0; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,35 +1,46 @@
|
||||
|
||||
// Toggle
|
||||
// -------------------------------
|
||||
|
||||
/* the overall container of the toggle */
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* hide the actual checkbox */
|
||||
.toggle input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* the background of the toggle's track area */
|
||||
/* also the track appearance when the toggle is "off" */
|
||||
.toggle .track {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
/* set the actual checkbox input to have a width/height */
|
||||
/* but hide its appearance, then use :after to style it */
|
||||
width: $toggle-width;
|
||||
height: $toggle-height;
|
||||
border: solid $toggle-border-width $toggle-off-border-color;
|
||||
border-radius: $toggle-border-radius;
|
||||
background-color: $toggle-off-bg-color;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
|
||||
transition-property: background-color, border;
|
||||
transition-duration: $toggle-transition-duration;
|
||||
transition-timing-function: ease-in-out;
|
||||
/* the track appearance when the toggle is "off" */
|
||||
&:after {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid $toggle-border-width $toggle-off-border-color;
|
||||
border-radius: $toggle-border-radius;
|
||||
background-color: $toggle-off-bg-color;
|
||||
content: ' ';
|
||||
cursor: pointer;
|
||||
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: $toggle-transition-duration;
|
||||
transition-property: background-color, border;
|
||||
}
|
||||
}
|
||||
|
||||
/* the handle (circle) thats inside the toggle's track area */
|
||||
/* also the appearance when the handle is "off" */
|
||||
.toggle .handle {
|
||||
position: absolute;
|
||||
top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
|
||||
left: $toggle-border-width;
|
||||
display: block;
|
||||
width: $toggle-handle-width;
|
||||
height: $toggle-handle-height;
|
||||
@ -37,28 +48,38 @@
|
||||
background-color: $toggle-handle-off-bg-color;
|
||||
transition: -webkit-transform $toggle-transition-duration ease-in-out;
|
||||
|
||||
/* used to create a larger hit area to slide the handle */
|
||||
/* used to create a larger (but hidden) hit area to slide the handle */
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
top: -2px;
|
||||
left: ( ($toggle-handle-width / 2) * -1) - 2;
|
||||
display: table;
|
||||
left: ( ($toggle-handle-width / 2) * -1);
|
||||
top: ( ($toggle-handle-height / 2) * -1) + 3;
|
||||
padding: ($toggle-handle-height / 2) ($toggle-handle-width + 2);
|
||||
padding: ($toggle-handle-height / 2) + 3 ($toggle-handle-width + 2);
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* When the toggle is "on" */
|
||||
.toggle :checked + .track {
|
||||
|
||||
/* the track when the toggle is "on" */
|
||||
/* The track when the toggle is "on" */
|
||||
.toggle input:checked:after {
|
||||
border-color: $toggle-on-border-color;
|
||||
background-color: $toggle-on-bg-color;
|
||||
}
|
||||
|
||||
/* the handle when the toggle is "on" */
|
||||
.handle {
|
||||
background-color: $toggle-handle-on-bg-color;
|
||||
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
|
||||
}
|
||||
.toggle input:checked + .handle {
|
||||
background-color: $toggle-handle-on-bg-color;
|
||||
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
|
||||
}
|
||||
|
||||
/* make sure list item content have enough padding on right to fit the toggle */
|
||||
.toggle-item .list-item-content {
|
||||
padding-right: ($list-item-padding * 3) + $toggle-width;
|
||||
}
|
||||
|
||||
/* position the toggle to the right within a list item */
|
||||
.toggle-item .toggle {
|
||||
position: absolute;
|
||||
top: $list-item-padding / 3;
|
||||
right: $list-item-padding;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@ -50,37 +50,60 @@
|
||||
}
|
||||
|
||||
|
||||
// Inset Margin
|
||||
// -------------------------------
|
||||
|
||||
.margin {
|
||||
margin: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-top,
|
||||
.margin-vertical {
|
||||
margin-top: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-right,
|
||||
.margin-horizontal {
|
||||
margin-right: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-bottom,
|
||||
.margin-vertical {
|
||||
margin-bottom: $inset-margin;
|
||||
}
|
||||
|
||||
.margin-left,
|
||||
.margin-horizontal {
|
||||
margin-left: $inset-margin;
|
||||
}
|
||||
|
||||
|
||||
// Rounded
|
||||
// -------------------------------
|
||||
|
||||
.rounded {
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
|
||||
// Colors
|
||||
// -------------------------------
|
||||
|
||||
.brand-default {
|
||||
color: $brand-default;
|
||||
}
|
||||
.brand-secondary {
|
||||
color: $brand-secondary;
|
||||
}
|
||||
.brand-primary {
|
||||
color: $brand-primary;
|
||||
}
|
||||
.brand-info {
|
||||
color: $brand-info;
|
||||
}
|
||||
.brand-success {
|
||||
color: $brand-success;
|
||||
}
|
||||
.brand-warning {
|
||||
color: $brand-warning;
|
||||
}
|
||||
.brand-danger {
|
||||
color: $brand-danger;
|
||||
}
|
||||
.brand-dark {
|
||||
color: $brand-dark;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: $black;
|
||||
}
|
||||
.gray-darker {
|
||||
color: $gray-darker;
|
||||
}
|
||||
.gray-dark {
|
||||
color: $gray-dark;
|
||||
}
|
||||
.gray {
|
||||
color: $gray;
|
||||
}
|
||||
.gray-light {
|
||||
color: $gray-light;
|
||||
}
|
||||
.gray-lighter {
|
||||
color: $gray-lighter;
|
||||
}
|
||||
.white {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
@ -62,7 +62,6 @@ $base-font-family: $sans-font-family;
|
||||
$base-background-color: $white;
|
||||
$base-color: #000;
|
||||
$content-padding: 10px !default;
|
||||
$inset-margin: 10px;
|
||||
$border-radius-base: 4px !default;
|
||||
$border-radius-large: 6px !default;
|
||||
$border-radius-small: 3px !default;
|
||||
@ -177,7 +176,7 @@ $checkbox-off-border-color: #049cdb;
|
||||
$checkbox-on-bg-color: #049cdb;
|
||||
$checkbox-on-border-color: #049cdb;
|
||||
|
||||
$checkbox-check-width: 1px;
|
||||
$checkbox-check-width: 3px;
|
||||
$checkbox-check-color: #fff;
|
||||
|
||||
|
||||
@ -338,33 +337,52 @@ $tabs-dark-border-color: $button-dark-border;
|
||||
// Lists
|
||||
// -------------------------------
|
||||
|
||||
$list-divider-bg: #f5f5f5;
|
||||
$list-divider-color: #222;
|
||||
$list-item-border: 1px solid #ddd;
|
||||
$list-header-bg: transparent;
|
||||
$list-header-color: #222;
|
||||
$list-header-padding: 5px 15px;
|
||||
$list-header-margin-top: 20px !default;
|
||||
|
||||
$list-default-background: $brand-default;
|
||||
$list-default-border: #ddd;
|
||||
$list-divider-bg: #f5f5f5;
|
||||
$list-divider-color: #222;
|
||||
$list-divider-padding: 5px 15px;
|
||||
|
||||
$list-secondary-background: $brand-secondary;
|
||||
$list-secondary-border: #ddd;
|
||||
$list-item-border-width: 1px !default;
|
||||
$list-item-border-color: #ddd;
|
||||
$list-item-padding: 15px !default;
|
||||
|
||||
$list-success-background: $brand-success;
|
||||
$list-success-border: $brand-success;
|
||||
$list-default-background: $brand-default;
|
||||
$list-default-border: #ddd;
|
||||
|
||||
$list-primary-background: $brand-primary;
|
||||
$list-primary-border: $brand-primary;
|
||||
$list-secondary-background: $brand-secondary;
|
||||
$list-secondary-border: #ddd;
|
||||
|
||||
$list-info-background: $brand-info;
|
||||
$list-info-border: $brand-info;
|
||||
$list-success-background: $brand-success;
|
||||
$list-success-border: $brand-success;
|
||||
|
||||
$list-warning-background: $brand-warning;
|
||||
$list-warning-border: $brand-warning;
|
||||
$list-primary-background: $brand-primary;
|
||||
$list-primary-border: $brand-primary;
|
||||
|
||||
$list-danger-background: $brand-danger;
|
||||
$list-danger-border: $brand-danger;
|
||||
$list-info-background: $brand-info;
|
||||
$list-info-border: $brand-info;
|
||||
|
||||
$list-dark-background: $brand-dark;
|
||||
$list-dark-border: $brand-dark;
|
||||
$list-warning-background: $brand-warning;
|
||||
$list-warning-border: $brand-warning;
|
||||
|
||||
$list-danger-background: $brand-danger;
|
||||
$list-danger-border: $brand-danger;
|
||||
|
||||
$list-dark-background: $brand-dark;
|
||||
$list-dark-border: $brand-dark;
|
||||
|
||||
$list-icon-font-size: 28px !default;
|
||||
|
||||
$list-thumbnail-width: 80px !default;
|
||||
|
||||
|
||||
// Icons
|
||||
// -------------------------------
|
||||
|
||||
$icon-fill-border-radius: 6px !default;
|
||||
|
||||
|
||||
// Menus
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"checkbox",
|
||||
"toggle",
|
||||
"radio",
|
||||
"range",
|
||||
|
||||
// Buttons
|
||||
"button",
|
||||
@ -45,6 +46,7 @@
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"icons",
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"checkbox",
|
||||
"toggle",
|
||||
"radio",
|
||||
"range",
|
||||
|
||||
// Buttons
|
||||
"button",
|
||||
@ -48,5 +49,6 @@
|
||||
"animations",
|
||||
|
||||
// Util
|
||||
"icons",
|
||||
"util",
|
||||
"platform";
|
||||
|
||||
@ -25,10 +25,11 @@
|
||||
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
|
||||
@ -50,7 +51,5 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
66
test/input-checkbox.html
Normal file
66
test/input-checkbox.html
Normal file
@ -0,0 +1,66 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Input: Checkbox</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Checkbox</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content has-header">
|
||||
|
||||
<ul class="padding">
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
Flux Capacitor
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
1.21 Gigawatts
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
88 MPH
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
Plutonium Resupply
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -5,59 +5,40 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="view">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Radio Buttons</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Radio Buttons</h1>
|
||||
</header>
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div class="content has-header has-footer">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="radio-buttton-list">
|
||||
|
||||
<div class="list radio-list">
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="go" checked="checked">
|
||||
<div class="radio-item">
|
||||
<input type="radio" name="serverside" value="go" checked>
|
||||
<div class="list-item-content">
|
||||
Go
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="python">
|
||||
<div class="radio-item">
|
||||
<div class="list-item-content">
|
||||
Python
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value=".net">
|
||||
<div class="radio-item">
|
||||
.Net
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="ruby">
|
||||
<div class="radio-item">
|
||||
Ruby
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="java">
|
||||
<div class="radio-item">
|
||||
Java
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
@ -66,10 +47,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,36 +5,28 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Range</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Range</h1>
|
||||
</header>
|
||||
|
||||
<main class="content has-header">
|
||||
<div class="content-wrapper">
|
||||
<main class="content has-header padding">
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</p>
|
||||
|
||||
<div class="margin">
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -5,86 +5,62 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Toggle</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Toggle</h1>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content has-header">
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
Airplane Mode
|
||||
<div class="toggle" id="airplaneMode">
|
||||
<input type="checkbox" name="airplaneMode">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
Flux Capacitor
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
Do Not Disturb
|
||||
<div class="toggle" id="doNotDisturb">
|
||||
<input type="checkbox" name="doNotDisturb" checked="checked">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
1.21 Gigawatts
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
88 MPH
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
Plutonium Resupply
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox">
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="margin">
|
||||
<p>
|
||||
<button id="btnTest1">Toggle Airplane Mode</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="btnTest2">Toggle Do Not Disturb</button>
|
||||
</p>
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
|
||||
|
||||
<!-- for testing only -->
|
||||
<script>
|
||||
|
||||
$("#btnTest1").click(function(){
|
||||
var toggle = $("#airplaneMode");
|
||||
if( toggle.val() === true ) {
|
||||
toggle.val(false);
|
||||
} else {
|
||||
toggle.val(true);
|
||||
}
|
||||
});
|
||||
|
||||
$("#btnTest2").click(function(){
|
||||
var toggle = $("#doNotDisturb");
|
||||
val = toggle.val();
|
||||
return
|
||||
if( toggle.val() === true ) {
|
||||
toggle.val(false);
|
||||
} else {
|
||||
toggle.val(true);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
368
test/lists.html
368
test/lists.html
@ -5,90 +5,308 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-right">
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Monitors
|
||||
<span class="badge">6</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Multiple Badges
|
||||
<span class="badge">62</span>
|
||||
<span class="badge">4</span>
|
||||
<span class="badge">143</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
<ul id="list" class="list">
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<li class="list-divider">Other things</li>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="icon-heart brand-danger"></i>
|
||||
Madison, WI asdf
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
|
||||
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
<p>Nine Inch Nails</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
|
||||
<h2>Siamese Dream</h2>
|
||||
<p>Smashing Pumpkins</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
<p>Nirvana</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
<p>Bestie Boys</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
<p>Green Day</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script>
|
||||
var l = document.getElementById('list');
|
||||
var list = new ionic.views.List({el: l});
|
||||
$("#btn-test-left").click(function(){
|
||||
|
||||
if(this.isLeft) {
|
||||
// back to normal
|
||||
this.isLeft = false;
|
||||
$(".slide-left").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isLeft = true;
|
||||
$(".slide-left").css({
|
||||
left: "-72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#btn-test-right").click(function(){
|
||||
|
||||
if(this.isRight) {
|
||||
// back to normal
|
||||
this.isRight = false;
|
||||
$(".slide-right").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isRight = true;
|
||||
$(".slide-right").css({
|
||||
left: "72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user