Added real flatui customised for this UI

This commit is contained in:
Felipe Martín 2013-05-30 14:46:14 +02:00
parent a97e591158
commit 012e682d1f
54 changed files with 6012 additions and 13 deletions

1
.gitignore vendored
View File

@ -21,6 +21,7 @@
# Studio
/minecraftcodex/studio/static/css/*.css
/minecraftcodex/studio/static/js/*.js
/minecraftcodex/studio/static/lib/*.css
# Utils
/utils/miner/classes

View File

@ -0,0 +1,140 @@
<?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" href="http://designmodo.com/flat" name="Flat UI Icons" id="Flat-UI-Icons"></iconset><author href="http://designmodo.com" name="Sergey Shmidt"></author><license href="http://creativecommons.org/licenses/by-nc-nd/3.0/" name="Attribution-NonCommercial-NoDerivs 3.0 Unported"></license>
</metadata>
<defs>
<font id="Flat-UI-Icons" horiz-adv-x="512" >
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#xe02c;" d="M 192.576-33.056l-64.096,64.128l 160.544,160.448L 128.448,350.496l 64,65.504l 223.584-223.616L 192.576-33.056z" data-tags="arrow-right" />
<glyph unicode="&#xe02d;" d="M 96.48,192.384L 320.064,416l 64-65.504L 223.488,191.488l 160.576-160.448l-64.128-64.128L 96.48,192.384z" data-tags="arrow-left" />
<glyph unicode="&#xe02f;" d="M 400,256c-11.488,0-29.664,0-48,0L 352,192 c 11.328,0, 22.4,0, 32,0c 6.048,0, 11.648,0, 16,0c 61.856,0, 112-50.144, 112-112S 461.856-32, 400-32
S 288,18.112, 288,80c0,11.488,0,29.632,0,48L 224,128 c0-11.328,0-22.432,0-32c0-6.048,0-11.616,0-16C 224,18.112, 173.856-32, 112-32S0,18.112,0,80
S 50.144,192, 112,192C 123.488,192, 141.664,192, 160,192L 160,256 C 148.704,256, 137.568,256, 128,256C 121.952,256, 116.384,256, 112,256C 50.144,256,0,306.112,0,368C0,429.856, 50.144,480, 112,480
S 224,429.856, 224,368C 224,356.512, 224,338.336, 224,320l 64,0 c0,11.296,0,22.432,0,32c0,6.048,0,11.616,0,16C 288,429.856, 338.144,480, 400,480S 512,429.856, 512,368
C 512,306.112, 461.856,256, 400,256z M 160,368C 160,394.496, 138.496,416, 112,416S 64,394.496, 64,368C 64,341.472, 85.504,320, 112,320C 115.872,320, 121.76,320, 128,320c 14.784,0, 32,0, 32,0
S 160,354.528, 160,368z M 160,96c0,14.752,0,32,0,32s-34.528,0-48,0C 85.504,128, 64,106.496, 64,80S 85.504,32, 112,32S 160,53.504, 160,80
C 160,83.872, 160,89.76, 160,96z M 352,80c0-26.496, 21.504-48, 48-48s 48,21.504, 48,48S 426.496,128, 400,128c-3.872,0-9.76,0-16,0
c-14.784,0-32,0-32,0S 352,93.44, 352,80z M 288,256L 224,256 L 224,192 l 64,0 L 288,256 z M 400,416C 373.504,416, 352,394.496, 352,368c0-3.872,0-9.728,0-16c0-14.816,0-32,0-32
s 34.528,0, 48,0C 426.496,320, 448,341.472, 448,368C 448,394.496, 426.496,416, 400,416z" data-tags="cmd" />
<glyph unicode="&#xe006;" d="M 256,480C 114.624,480,0,365.408,0,224.032C0,82.624, 114.624-32, 256-32c 141.376,0, 256,114.624, 256,256.032C 512,365.408, 397.376,480, 256,480z M 421.44,276.064
l-183.648-183.616c-3.744-3.744-9.856-3.744-13.568,0l-27.136,27.392c-3.712,3.776-9.856,9.952-13.568,13.696L 120.352,199.936
C 118.496,201.792, 117.504,204.416, 117.504,206.88c0,2.496, 0.992,4.864, 2.848,6.752l 27.68,24.96c 1.888,1.92, 4.384,2.816, 6.848,2.816
c 2.432-0.032, 4.864-0.992, 6.72-2.816l 62.624-63.936c 3.744-3.808, 9.824-3.808, 13.568,0l 142.944,142.56c 3.712,3.744, 9.856,3.744, 13.568,0
l 27.168-27.456C 425.184,286.016, 425.184,279.84, 421.44,276.064z" data-tags="check-inverted" />
<glyph unicode="&#xe007;" d="M 474.272,191.424c 50.24,51.392, 50.176,134.656,0,186.016c-25.696,26.24-59.488,39.072-93.12,38.496C 334.080,415.168, 256.48,351.456, 256.48,351.456
S 176.672,416.064, 128.48,416C 95.616,415.936, 62.784,403.072, 37.728,377.472c-50.208-51.392-50.24-134.624,0-186.016L 256-31.712L 474.272,191.424z" data-tags="heart" />
<glyph unicode="&#xe008;" d="M 272.064,216.032c-43.936,0-79.552,36.864-79.552,82.4c0,45.568, 35.616,82.432, 79.552,82.432S 351.616,344, 351.616,298.432
C 351.616,252.928, 316,216.032, 272.064,216.032 M 272.064,480.192c-97.248,0-176.064-81.664-176.064-182.4c0-95.136, 79.744-217.888, 132.992-277.632
c 19.904-22.272, 43.072-52.352, 43.072-52.352s 24.896,30.176, 46.24,53.152c 53.184,57.248, 129.824,172.224, 129.824,276.8
C 448.128,398.528, 369.312,480.192, 272.064,480.192" data-tags="location" />
<glyph unicode="&#xe009;" d="M 448,159.968L 288,159.968 L 288,0 c0-17.696-14.304-32-32-32L 224-32 c-17.664,0-32,14.304-32,32L 192,159.968 L 32,159.968 C 14.336,159.968,0,174.336,0,192L0,224.032
c0,17.664, 14.336,31.936, 32,31.936l 160,0 L 192,416 c0,17.664, 14.336,32, 32,32l 32,0 c 17.696,0, 32-14.336, 32-32l0-160.032 l 160,0 c 17.696,0, 32-14.272, 32-31.936L 480,192
C 480,174.336, 465.696,159.968, 448,159.968z" data-tags="plus" />
<glyph unicode="&#xe00a;" d="M 461.568,411.296c-6.176,6.272-16.384,6.272-22.56,0l-238.080-237.248c-6.24-6.272-16.416-6.272-22.624,0L 73.984,280.416
C 70.912,283.52, 66.848,285.12, 62.816,285.152c-4.128,0-8.288-1.504-11.424-4.736l-46.080-41.504C 2.24,235.776, 0.576,231.84, 0.576,227.744
c0-4.16, 1.664-8.512, 4.736-11.616l 105.184-110.496c 6.208-6.24, 16.416-16.512, 22.624-22.816l 45.216-45.632c 6.208-6.24, 16.384-6.24, 22.624,0
l 305.856,305.664c 6.24,6.24, 6.24,16.544,0,22.816L 461.568,411.296z" data-tags="check" />
<glyph unicode="&#xe00b;" d="M 443.904,366.016c 6.24-6.208, 6.24-16.416,0-22.624L 319.456,218.88c-6.176-6.208-6.176-16.416,0-22.656l 124.384-124.544
c 6.24-6.208, 6.24-16.416,0-22.624l-45.312-45.216c-6.176-6.208-16.384-6.208-22.624,0L 251.584,128.384c-6.208,6.208-16.416,6.208-22.624,0
l-124.448-124.448c-6.208-6.24-16.416-6.24-22.624,0l-45.248,45.312c-6.208,6.176-6.208,16.384,0,22.624l 124.48,124.448
c 6.208,6.208, 6.208,16.416,0,22.656L 36.736,343.488c-6.208,6.24-6.208,16.416,0,22.624l 45.28,45.248c 6.208,6.208, 16.416,6.208, 22.624,0
l 124.32-124.512c 6.208-6.24, 16.416-6.24, 22.624-0.032l 124.416,124.48c 6.24,6.176, 16.448,6.176, 22.624,0L 443.904,366.016z" data-tags="cross" />
<glyph unicode="&#xe00c;" d="M 495.968,415.68L 16.032,415.68 c-8.8,0-16-7.68-16-17.088l0-62.336 c0-9.024, 7.2-16.416, 16-16.416l 479.936,0 c 8.8,0, 16,7.36, 16,16.416
L 511.968,398.592 C 511.968,408, 504.768,415.68, 495.968,415.68z M 495.968,255.68L 16.032,255.68 c-8.8,0-16-7.68-16-17.12l0-62.304
c0-9.056, 7.2-16.416, 16-16.416l 479.936,0 c 8.8,0, 16,7.36, 16,16.416L 511.968,238.592 C 511.968,248, 504.768,255.68, 495.968,255.68z M 495.968,95.68
L 16.032,95.68 c-8.8,0-16-7.68-16-17.12l0-62.304 c0-8.992, 7.2-16.384, 16-16.384l 479.936,0 c 8.8,0, 16,7.36, 16,16.384l0,62.304
C 511.968,88, 504.768,95.68, 495.968,95.68z" data-tags="list" />
<glyph unicode="&#xe00d;" d="M 480.256,355.136c-10.88,17.984-24.288,35.584-40.672,51.904c-16.608,16.448-34.496,29.984-52.8,40.8L 418.944,480c0,0, 46.528,0, 69.824-23.264
C 512,433.44, 512,386.912, 512,386.912L 480.256,355.136z M 193.6,64.384L 96.384,64.384 L 96.384,161.6 l 11.68,11.68c 19.776-9.28, 39.392-22.464, 57.088-40.16
c 17.696-17.664, 30.848-37.344, 40.16-57.088L 193.6,64.384z M 453.376,328.256l-220-224.16c-11.36,18.816-25.344,37.152-42.496,54.176
C 173.536,175.488, 154.848,189.632, 135.712,200.928l 224.576,220.448c 18.912-8.928, 37.728-21.472, 54.656-38.432S 444.448,347.232, 453.376,328.256z M 64,416l0-383.968 l 384,0
L 448,192 l 64,63.968l0-241.44 C 512-11.168, 491.2-32, 465.472-32L 46.528-32 C 20.832-32,0-11.168,0,14.528L0,433.44 C0,459.168, 20.832,480, 46.528,480L 288,480 L 224,416L 64,416 z" data-tags="new" />
<glyph unicode="&#xe00e;" d="M 480.128,32.032l0-0.384 L 352,159.776l0-63.744 C 352,60.672, 323.328,32, 288,32L 64,32 c-35.328,0-64,28.672-64,64.032L0,319.968 C0,355.328, 28.672,384, 64,384l 224,0
c 35.328,0, 64-28.672, 64-64.032L 352,255.68 l 128,128L 480,384 c 17.696,0, 32-14.304, 32-32l0-288 C 512,46.368, 497.728,32.096, 480.128,32.032z" data-tags="video" />
<glyph unicode="&#xe00f;" d="M 448.512,384l-73.92,0 l-21.44,45.312C 348.256,439.968, 330.624,448, 313.472,448L 191.072,448 C 173.92,448, 156.288,439.968, 151.36,429.312L 130.432,384L 64,384 C0,384,0,352,0,352
l0-320 c0,0,0-32, 64-32l 384,0 c 64,0, 64,32, 64,32L 512,352 C 512,352, 512,384, 448.512,384z M 256,64.032c-70.688,0-128,57.248-128,127.936C 128,262.688, 185.312,320, 256,320s 128-57.312, 128-128.032
C 384,121.28, 326.688,64.032, 256,64.032z M 256,272C 211.808,272, 176,236.192, 176,192c0-44.16, 35.808-80, 80-80s 80,35.84, 80,80
C 336,236.192, 300.192,272, 256,272z" data-tags="photo" />
<glyph unicode="&#xe010;" d="M 246.592,448C 222.4,448, 215.072,434.080, 215.072,434.080S 123.52,325.984, 81.792,325.984c-41.088,0-40.672,0-40.672,0C 18.4,325.984,0,307.776,0,285.344
l0-122.048 c0-22.464, 18.4-40.64, 41.088-40.64c0,0, 0.672,0, 41.088,0c 40.512,0, 134.784-109.44, 134.784-109.44c 7.456-7.744, 17.952-12.576, 29.632-12.576
c 22.688,0, 41.088,18.176, 41.088,40.64L 287.68,407.328 C 287.68,429.792, 269.28,448, 246.592,448z M 421.984,408.864l-23.712-35.488
c 43.328-35.2, 71.104-88.864, 71.104-149.088s-27.744-113.92-71.104-149.056l 23.712-35.488C 476.704,82.688, 512,149.312, 512,224.288
C 512,299.296, 476.704,365.888, 421.984,408.864z M 374.4,337.664l-23.936-35.84c 20.672-19.456, 33.696-46.88, 33.696-77.536
c0-30.656-13.024-58.048-33.696-77.536l 23.936-35.808c 31.936,27.36, 52.288,68, 52.288,113.344C 426.688,269.696, 406.336,310.272, 374.4,337.664z" data-tags="volume" />
<glyph unicode="&#xe011;" d="M 256.032,480C 114.688,480, 0.096,365.408, 0.096,224.032c0-141.408, 114.592-255.968, 255.936-255.968c 141.376,0, 255.968,114.56, 255.968,255.968
C 512,365.408, 397.408,480, 256.032,480z M 339.488,134.24l-7.424-7.488c-6.208-6.176-16.672-6.496-23.232-0.64L 223.072,199.872
C 216.512,205.728, 211.552,217.728, 211.968,226.496l 8.928,141.536C 221.344,376.832, 228.896,384, 237.728,384l 10.528,0 c 8.8,0, 16.352-7.168, 16.768-15.968
l 7.328-115.904c 0.448-8.768, 5.6-21.344, 11.424-27.904l 56.384-66.784C 345.984,150.944, 345.728,140.448, 339.488,134.24z" data-tags="time" />
<glyph unicode="&#xe012;" d="M 256.032,400c-169.472,0-256.48-176.448-256.48-176.448s 65.664-176.48, 256.48-176.48c 172.736,0, 256.416,175.808, 256.416,175.808
S 428.128,400, 256.032,400z M 256.416,113.248c-61.984,0-106.752,48.288-106.752,110.304c0,62.048, 44.768,110.272, 106.752,110.272
c 61.952,0, 106.72-48.224, 106.72-110.272C 363.136,161.536, 318.336,113.248, 256.416,113.248z M 256.416,289.728c-35.392-0.064-64.064-30.72-64.064-66.176
c0-35.424, 28.672-66.176, 64.064-66.176s 64.032,30.752, 64.032,66.176C 320.448,259.008, 291.808,289.824, 256.416,289.728z" data-tags="eye" />
<glyph unicode="&#xe013;" d="M 228.928,84.032l 144.64-113.248c 2.368-1.888, 3.808-2.816, 5.184-2.816c 4,0, 5.248,2.752, 5.248,7.264l0,107.2
C 384,89.984, 388.992,96, 395.68,96l 52.576,0 c 63.744,0, 63.68,30.72, 63.68,30.72L 511.936,446.752 c0,0,0,33.28-63.936,33.28L 64.032,480.032 c-64,0-64-33.28-64-33.28L 0.032,126.72
c0,0-0.032-30.72, 64.224-30.72l 128,0 C 192.256,96, 219.040,95.264, 228.928,84.032z" data-tags="chat" />
<glyph unicode="&#xe01c;" d="M 361.696,176.8c-5.664,5.728-7.552,16.352-4.192,23.648c0,0, 23.616,51.232, 23.616,88.864C 381.12,394.624, 295.904,480, 190.752,480
s-190.4-85.376-190.4-190.656c0-105.312, 85.248-190.688, 190.4-190.688c 37.6,0, 88.704,23.68, 88.704,23.68c 7.328,3.392, 17.984,1.472, 23.616-4.224
l 145.728-145.888c 5.728-5.696, 15.040-5.696, 20.672,0l 37.888,37.952c 5.728,5.728, 5.728,15.072,0,20.736L 361.696,176.8z M 190.752,186.688
c-56.544,0-102.528,46.016-102.528,102.656c0,56.608, 46.016,102.656, 102.528,102.656s 102.496-46.048, 102.496-102.656C 293.248,232.704, 247.296,186.688, 190.752,186.688z" data-tags="search" />
<glyph unicode="&#xe01d;" d="M 256.512,298.144c 53.28,0, 96.512,40.672, 96.512,90.944C 352.992,439.296, 309.792,480, 256.512,480S 160,439.296, 160,389.088
C 160,338.848, 203.232,298.144, 256.512,298.144z M 332.16,291.84C 310.88,277.12, 284.864,268.128, 256.512,268.128c-28.48,0-54.56,9.056-75.872,23.872
C 94.016,273.344, 32,223.584, 32,164.992l0-129.44 c0-8.576, 7.2-15.552, 16-15.552l 32,0 c 8.8,0, 16,6.304, 16,14.048c0,4.48,0,100.928,0,100.928
c0,8.32, 4.768,4.992, 10.688,4.992c 5.888,0, 10.656-4.512, 10.656-9.984l 0.16-89.984c 0.448-5.184, 4.8-42.208, 10.272-43.296
c0,0, 33.28-28.672, 128.224-28.672c 95.616,0, 128.224,28.672, 128.224,28.672c 5.472,1.056, 9.856,38.080, 10.272,43.296l 0.16,89.984
c0,5.504, 4.768,9.984, 10.688,9.984c 5.888,0, 10.656-4.512, 10.656-9.984c0,0,0-91.456,0-95.936c0-7.744, 7.2-14.048, 16-14.048l 32,0
c 8.8,0, 16,7.008, 16,15.552L 480,164.992 C 480,223.424, 418.304,273.056, 332.16,291.84z" data-tags="user" />
<glyph unicode="&#xe01e;" d="M 448,416C 422.752,416, 64,416, 64,416C 38.752,416,0,395.424,0,370.528l0-9.056 c0,0, 216.384-180.928, 256-180.928s 256,180.352, 256,180.352l0,9.6
C 512,395.424, 473.248,416, 448,416z M0,288.48l0-256.448 C0,32.032,0,0, 64,0l 384,0 c 64.096,0, 64,32.032, 64,32.032L 512,289.28 c0,0-182.080-162.496-256-162.496
C 182.848,126.784,0,288.48,0,288.48z" data-tags="mail" />
<glyph unicode="&#xe01f;" d="M 448-32L 64-32 c-17.664,0-32,14.304-32,32.032L 32,224 c0,17.664, 14.336,32, 32,32l 32,0 L 96,320 c0,88.352, 71.616,160, 160,160s 160-71.648, 160-160l0-64 l 32,0 c 17.696,0, 32-14.336, 32-32
l0-223.968 C 480-17.696, 465.696-32, 448-32z M 352,320c0,52.992-42.976,96-96,96S 160,372.992, 160,320l0-64 l 192,0 L 352,320 z" data-tags="lock" />
<glyph unicode="&#xe024;" d="M 459.136,263.52c-8.672,1.28-17.984,9.152-20.672,17.504l-13.056,31.616c-4.064,7.776-3.136,19.936, 2.176,26.976l 21.056,28.096
c 5.312,7.040, 4.864,18.176-0.992,24.768L 424.512,415.68c-6.56,5.856-17.76,6.272-24.8,0.992l-28.064-21.12
c-7.072-5.248-19.2-6.24-27.008-2.144L 313.056,406.432C 304.64,409.088, 296.736,418.432, 295.552,427.168L 290.56,461.92
C 289.312,470.624, 281.152,478.496, 272.384,479.392C 272.384,479.392, 266.976,480, 256,480S 239.616,479.392, 239.616,479.392C 230.848,478.496, 222.656,470.624, 221.44,461.92
L 216.448,427.168C 215.232,418.432, 207.36,409.088, 198.944,406.432L 167.36,393.408C 159.584,389.312, 147.456,390.304, 140.416,395.552l-28.128,21.12
C 105.28,421.984, 94.080,421.536, 87.488,415.68L 64.384,392.544C 58.56,385.952, 58.112,374.784, 63.392,367.744L 84.48,339.648c 5.28-7.040, 6.24-19.2, 2.144-26.976
L 73.6,281.024C 70.912,272.672, 61.6,264.8, 52.896,263.52L 18.144,258.624C 9.408,257.344, 1.536,249.184, 0.64,240.416c0,0-0.576-5.44-0.576-16.416
c0-10.976, 0.576-16.448, 0.576-16.448c 0.928-8.736, 8.8-16.896, 17.504-18.144l 34.752-4.928C 61.6,183.232, 70.912,175.328, 73.6,166.976l 13.056-31.616
c 4.096-7.808, 3.136-19.904-2.144-26.944l-21.088-28.128c-5.28-7.072-6.56-16.64-2.816-21.248c 3.712-4.608, 14.432-16.032, 14.464-16.032
c0-0.064, 3.616-3.36, 8-7.328c 4.384-4.032, 22.24-9.6, 29.28-4.32l 28.128,21.056c 7.040,5.312, 19.168,6.272, 26.944,2.176L 198.944,41.6
c 8.416-2.72, 16.288-12, 17.504-20.736l 4.992-34.752c 1.216-8.672, 9.408-16.64, 18.144-17.536c0,0, 5.44-0.576, 16.416-0.576
s 16.384,0.576, 16.384,0.576c 8.736,0.896, 16.928,8.832, 18.176,17.536l 4.992,34.752c 1.184,8.736, 9.056,18.016, 17.504,20.736l 31.552,12.992
c 7.808,4.096, 19.936,3.136, 27.008-2.112l 28.128-21.12c 7.072-5.28, 18.176-4.832, 24.8,0.96l 23.136,23.168
c 5.824,6.592, 6.24,17.76, 0.928,24.8l-21.056,28.128c-5.312,7.040-6.24,19.136-2.176,26.944l 13.056,31.616
c 2.688,8.384, 12,16.256, 20.672,17.504l 34.752,4.928c 8.672,1.248, 16.576,9.408, 17.504,18.144c0,0, 0.576,5.44, 0.576,16.448
c0,10.976-0.576,16.416-0.576,16.416c-0.928,8.768-8.8,16.928-17.504,18.208L 459.136,263.52z M 256,160c-35.328,0-64,28.672-64,64
c0,35.36, 28.672,64, 64,64c 35.296,0, 64-28.672, 64-64C 320,188.672, 291.328,160, 256,160z" data-tags="gear" />
<glyph unicode="&#xe02b;" d="M 256,480C 114.61,480,0,365.369,0,223.957c0-141.369, 114.61-255.979, 256-255.979c 141.39,0, 256,114.61, 256,255.979C 512,365.369, 397.39,480, 256,480z
M 256,70.379c-84.814,0-153.6,68.764-153.6,153.579c0,84.857, 68.786,153.621, 153.6,153.621c 84.836,0, 153.6-68.764, 153.6-153.621C 409.6,139.143, 340.836,70.379, 256,70.379z" data-tags="radio-unchecked" />
<glyph unicode="&#xe032;" d="M 256,480C 114.61,480,0,365.412,0,224.021c0-141.412, 114.61-256.043, 256-256.043c 141.39,0, 256,114.631, 256,256.043C 512,365.412, 397.39,480, 256,480z
M 256,70.4c-84.814,0-153.6,68.786-153.6,153.621c0,84.793, 68.786,153.543, 153.6,153.543c 84.836,0, 153.6-68.764, 153.6-153.543C 409.6,139.186, 340.836,70.4, 256,70.4z M 256,300.8
C 213.582,300.8, 179.2,266.418, 179.2,224.021C 179.2,181.582, 213.582,147.2, 256,147.2c 42.418,0, 76.8,34.382, 76.8,76.821C 332.8,266.418, 298.418,300.8, 256,300.8z" data-tags="radio-checked" />
<glyph unicode="&#xe033;" d="M 128,480l 256,0 c 70.713,0, 128-57.287, 128-128l0-256.021 c0-70.713-57.287-128-128-128L 128-32.021 c-70.677,0-128,57.287-128,128L0,352 C0,422.713, 57.323,480, 128,480z" data-tags="checkbox-unchecked" />
<glyph unicode="&#xe034;" d="M 384,480L 128,480 C 57.323,480,0,422.677,0,352l0-256.021 c0-70.713, 57.323-128, 128-128l 256,0 c 70.713,0, 128,57.287, 128,128L 512,352 C 512,422.677, 454.699,480, 384,480z M 421.433,276.046
l-183.652-183.652c-3.74-3.74-9.849-3.74-13.568,0l-27.157,27.371c-3.74,3.783-9.849,9.963-13.568,13.724l-63.154,66.382
c-1.849,1.892-2.837,4.473-2.837,6.933c0,2.503, 1.003,4.864, 2.837,6.756l 27.669,24.953c 1.87,1.913, 4.373,2.816, 6.855,2.816
c 2.425,0, 4.864-0.946, 6.734-2.816l 62.62-63.9c 3.705-3.819, 9.828-3.819, 13.568,0l 142.948,142.514c 3.74,3.74, 9.828,3.74, 13.547,0
l 27.157-27.392C 425.138,286.009, 425.138,279.787, 421.433,276.046z" data-tags="checkbox-checked" />
<glyph unicode="&#xe022;" d="M0,288.224L0,342.080 c0,22.976, 19.104,41.568, 42.656,41.568l 53.696,0 L 96.352,428.864
c0,10.528, 10.784,51.104, 24.096,51.104L 168.64,479.968 c 13.312,0, 24.096-40.576, 24.096-51.104l0-45.216 l 159.616,0 L 352.352,428.864 c0,10.528, 10.816,51.104, 24.096,51.104l 48.192,0
c 13.312,0, 24.096-40.576, 24.096-51.104l0-45.216 l 20.64,0 c 23.584,0, 42.688-18.592, 42.688-41.568l0-53.888 L0,288.192 z M 512.032,255.68l0-246.112
c0-22.976-19.104-41.6-42.688-41.6L 42.656-32.032 c-23.552,0-42.656,18.624-42.656,41.6L0,255.68 L 512.032,255.68 z" data-tags="calendar-solid" />
<glyph unicode="&#xe03b;" d="M 128,480l-96,0 c-17.664,0-32-14.304-32-32l0-448 c0-17.696, 14.336-32, 32-32l 96,0
c 17.664,0, 32,14.304, 32,32l0,448 C 160,465.696, 145.664,480, 128,480z M 448,480l-96,0 c-17.696,0-32-14.304-32-32l0-448 c0-17.696, 14.304-32, 32-32l 96,0
c 17.696,0, 32,14.304, 32,32l0,448 C 480,465.696, 465.696,480, 448,480z" data-tags="pause" />
<glyph unicode="&#xe03c;" d="M 440,237.888l-416,240c-4.928,2.848-11.072,2.848-16,0C 3.072,475.008, 0,469.728, 0,464l0-480
c0-5.728, 3.072-11.008, 8-13.856C 10.464-31.296, 13.248-32, 16-32s 5.536,0.704, 8,2.144l 416,240c 4.928,2.848, 8,8.128, 8,13.856
S 444.928,235.008, 440,237.888z" data-tags="play" />
<glyph unicode="&#xe000;" d="M 256,480C 114.624,480,0,365.408,0,224.032C0,82.624, 114.624-32, 256-32c 141.376,0, 256,114.624, 256,256.032C 512,365.408, 397.376,480, 256,480z M 421.44,276.064
l-183.648-183.616c-3.744-3.744-9.856-3.744-13.568,0l-27.136,27.392c-3.712,3.776-9.856,9.952-13.568,13.696L 120.352,199.936
C 118.496,201.792, 117.504,204.416, 117.504,206.88c0,2.496, 0.992,4.864, 2.848,6.752l 27.68,24.96c 1.888,1.92, 4.384,2.816, 6.848,2.816
c 2.432-0.032, 4.864-0.992, 6.72-2.816l 62.624-63.936c 3.744-3.808, 9.824-3.808, 13.568,0l 142.944,142.56c 3.712,3.744, 9.856,3.744, 13.568,0
l 27.168-27.456C 425.184,286.016, 425.184,279.84, 421.44,276.064z" data-tags="check-inverted" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

View File

@ -0,0 +1,140 @@
<?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" href="http://designmodo.com/flat" name="Flat UI Icons" id="Flat-UI-Icons"></iconset><author href="http://designmodo.com" name="Sergey Shmidt"></author><license href="http://creativecommons.org/licenses/by-nc-nd/3.0/" name="Attribution-NonCommercial-NoDerivs 3.0 Unported"></license>
</metadata>
<defs>
<font id="Flat-UI-Icons" horiz-adv-x="512" >
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#xe02c;" d="M 192.576-33.056l-64.096,64.128l 160.544,160.448L 128.448,350.496l 64,65.504l 223.584-223.616L 192.576-33.056z" />
<glyph unicode="&#xe02d;" d="M 96.48,192.384L 320.064,416l 64-65.504L 223.488,191.488l 160.576-160.448l-64.128-64.128L 96.48,192.384z" />
<glyph unicode="&#xe02f;" d="M 400,256c-11.488,0-29.664,0-48,0L 352,192 c 11.328,0, 22.4,0, 32,0c 6.048,0, 11.648,0, 16,0c 61.856,0, 112-50.144, 112-112S 461.856-32, 400-32
S 288,18.112, 288,80c0,11.488,0,29.632,0,48L 224,128 c0-11.328,0-22.432,0-32c0-6.048,0-11.616,0-16C 224,18.112, 173.856-32, 112-32S0,18.112,0,80
S 50.144,192, 112,192C 123.488,192, 141.664,192, 160,192L 160,256 C 148.704,256, 137.568,256, 128,256C 121.952,256, 116.384,256, 112,256C 50.144,256,0,306.112,0,368C0,429.856, 50.144,480, 112,480
S 224,429.856, 224,368C 224,356.512, 224,338.336, 224,320l 64,0 c0,11.296,0,22.432,0,32c0,6.048,0,11.616,0,16C 288,429.856, 338.144,480, 400,480S 512,429.856, 512,368
C 512,306.112, 461.856,256, 400,256z M 160,368C 160,394.496, 138.496,416, 112,416S 64,394.496, 64,368C 64,341.472, 85.504,320, 112,320C 115.872,320, 121.76,320, 128,320c 14.784,0, 32,0, 32,0
S 160,354.528, 160,368z M 160,96c0,14.752,0,32,0,32s-34.528,0-48,0C 85.504,128, 64,106.496, 64,80S 85.504,32, 112,32S 160,53.504, 160,80
C 160,83.872, 160,89.76, 160,96z M 352,80c0-26.496, 21.504-48, 48-48s 48,21.504, 48,48S 426.496,128, 400,128c-3.872,0-9.76,0-16,0
c-14.784,0-32,0-32,0S 352,93.44, 352,80z M 288,256L 224,256 L 224,192 l 64,0 L 288,256 z M 400,416C 373.504,416, 352,394.496, 352,368c0-3.872,0-9.728,0-16c0-14.816,0-32,0-32
s 34.528,0, 48,0C 426.496,320, 448,341.472, 448,368C 448,394.496, 426.496,416, 400,416z" />
<glyph unicode="&#xe006;" d="M 256,480C 114.624,480,0,365.408,0,224.032C0,82.624, 114.624-32, 256-32c 141.376,0, 256,114.624, 256,256.032C 512,365.408, 397.376,480, 256,480z M 421.44,276.064
l-183.648-183.616c-3.744-3.744-9.856-3.744-13.568,0l-27.136,27.392c-3.712,3.776-9.856,9.952-13.568,13.696L 120.352,199.936
C 118.496,201.792, 117.504,204.416, 117.504,206.88c0,2.496, 0.992,4.864, 2.848,6.752l 27.68,24.96c 1.888,1.92, 4.384,2.816, 6.848,2.816
c 2.432-0.032, 4.864-0.992, 6.72-2.816l 62.624-63.936c 3.744-3.808, 9.824-3.808, 13.568,0l 142.944,142.56c 3.712,3.744, 9.856,3.744, 13.568,0
l 27.168-27.456C 425.184,286.016, 425.184,279.84, 421.44,276.064z" />
<glyph unicode="&#xe007;" d="M 474.272,191.424c 50.24,51.392, 50.176,134.656,0,186.016c-25.696,26.24-59.488,39.072-93.12,38.496C 334.080,415.168, 256.48,351.456, 256.48,351.456
S 176.672,416.064, 128.48,416C 95.616,415.936, 62.784,403.072, 37.728,377.472c-50.208-51.392-50.24-134.624,0-186.016L 256-31.712L 474.272,191.424z" />
<glyph unicode="&#xe008;" d="M 272.064,216.032c-43.936,0-79.552,36.864-79.552,82.4c0,45.568, 35.616,82.432, 79.552,82.432S 351.616,344, 351.616,298.432
C 351.616,252.928, 316,216.032, 272.064,216.032 M 272.064,480.192c-97.248,0-176.064-81.664-176.064-182.4c0-95.136, 79.744-217.888, 132.992-277.632
c 19.904-22.272, 43.072-52.352, 43.072-52.352s 24.896,30.176, 46.24,53.152c 53.184,57.248, 129.824,172.224, 129.824,276.8
C 448.128,398.528, 369.312,480.192, 272.064,480.192" />
<glyph unicode="&#xe009;" d="M 448,159.968L 288,159.968 L 288,0 c0-17.696-14.304-32-32-32L 224-32 c-17.664,0-32,14.304-32,32L 192,159.968 L 32,159.968 C 14.336,159.968,0,174.336,0,192L0,224.032
c0,17.664, 14.336,31.936, 32,31.936l 160,0 L 192,416 c0,17.664, 14.336,32, 32,32l 32,0 c 17.696,0, 32-14.336, 32-32l0-160.032 l 160,0 c 17.696,0, 32-14.272, 32-31.936L 480,192
C 480,174.336, 465.696,159.968, 448,159.968z" />
<glyph unicode="&#xe00a;" d="M 461.568,411.296c-6.176,6.272-16.384,6.272-22.56,0l-238.080-237.248c-6.24-6.272-16.416-6.272-22.624,0L 73.984,280.416
C 70.912,283.52, 66.848,285.12, 62.816,285.152c-4.128,0-8.288-1.504-11.424-4.736l-46.080-41.504C 2.24,235.776, 0.576,231.84, 0.576,227.744
c0-4.16, 1.664-8.512, 4.736-11.616l 105.184-110.496c 6.208-6.24, 16.416-16.512, 22.624-22.816l 45.216-45.632c 6.208-6.24, 16.384-6.24, 22.624,0
l 305.856,305.664c 6.24,6.24, 6.24,16.544,0,22.816L 461.568,411.296z" />
<glyph unicode="&#xe00b;" d="M 443.904,366.016c 6.24-6.208, 6.24-16.416,0-22.624L 319.456,218.88c-6.176-6.208-6.176-16.416,0-22.656l 124.384-124.544
c 6.24-6.208, 6.24-16.416,0-22.624l-45.312-45.216c-6.176-6.208-16.384-6.208-22.624,0L 251.584,128.384c-6.208,6.208-16.416,6.208-22.624,0
l-124.448-124.448c-6.208-6.24-16.416-6.24-22.624,0l-45.248,45.312c-6.208,6.176-6.208,16.384,0,22.624l 124.48,124.448
c 6.208,6.208, 6.208,16.416,0,22.656L 36.736,343.488c-6.208,6.24-6.208,16.416,0,22.624l 45.28,45.248c 6.208,6.208, 16.416,6.208, 22.624,0
l 124.32-124.512c 6.208-6.24, 16.416-6.24, 22.624-0.032l 124.416,124.48c 6.24,6.176, 16.448,6.176, 22.624,0L 443.904,366.016z" />
<glyph unicode="&#xe00c;" d="M 495.968,415.68L 16.032,415.68 c-8.8,0-16-7.68-16-17.088l0-62.336 c0-9.024, 7.2-16.416, 16-16.416l 479.936,0 c 8.8,0, 16,7.36, 16,16.416
L 511.968,398.592 C 511.968,408, 504.768,415.68, 495.968,415.68z M 495.968,255.68L 16.032,255.68 c-8.8,0-16-7.68-16-17.12l0-62.304
c0-9.056, 7.2-16.416, 16-16.416l 479.936,0 c 8.8,0, 16,7.36, 16,16.416L 511.968,238.592 C 511.968,248, 504.768,255.68, 495.968,255.68z M 495.968,95.68
L 16.032,95.68 c-8.8,0-16-7.68-16-17.12l0-62.304 c0-8.992, 7.2-16.384, 16-16.384l 479.936,0 c 8.8,0, 16,7.36, 16,16.384l0,62.304
C 511.968,88, 504.768,95.68, 495.968,95.68z" />
<glyph unicode="&#xe00d;" d="M 480.256,355.136c-10.88,17.984-24.288,35.584-40.672,51.904c-16.608,16.448-34.496,29.984-52.8,40.8L 418.944,480c0,0, 46.528,0, 69.824-23.264
C 512,433.44, 512,386.912, 512,386.912L 480.256,355.136z M 193.6,64.384L 96.384,64.384 L 96.384,161.6 l 11.68,11.68c 19.776-9.28, 39.392-22.464, 57.088-40.16
c 17.696-17.664, 30.848-37.344, 40.16-57.088L 193.6,64.384z M 453.376,328.256l-220-224.16c-11.36,18.816-25.344,37.152-42.496,54.176
C 173.536,175.488, 154.848,189.632, 135.712,200.928l 224.576,220.448c 18.912-8.928, 37.728-21.472, 54.656-38.432S 444.448,347.232, 453.376,328.256z M 64,416l0-383.968 l 384,0
L 448,192 l 64,63.968l0-241.44 C 512-11.168, 491.2-32, 465.472-32L 46.528-32 C 20.832-32,0-11.168,0,14.528L0,433.44 C0,459.168, 20.832,480, 46.528,480L 288,480 L 224,416L 64,416 z" />
<glyph unicode="&#xe00e;" d="M 480.128,32.032l0-0.384 L 352,159.776l0-63.744 C 352,60.672, 323.328,32, 288,32L 64,32 c-35.328,0-64,28.672-64,64.032L0,319.968 C0,355.328, 28.672,384, 64,384l 224,0
c 35.328,0, 64-28.672, 64-64.032L 352,255.68 l 128,128L 480,384 c 17.696,0, 32-14.304, 32-32l0-288 C 512,46.368, 497.728,32.096, 480.128,32.032z" />
<glyph unicode="&#xe00f;" d="M 448.512,384l-73.92,0 l-21.44,45.312C 348.256,439.968, 330.624,448, 313.472,448L 191.072,448 C 173.92,448, 156.288,439.968, 151.36,429.312L 130.432,384L 64,384 C0,384,0,352,0,352
l0-320 c0,0,0-32, 64-32l 384,0 c 64,0, 64,32, 64,32L 512,352 C 512,352, 512,384, 448.512,384z M 256,64.032c-70.688,0-128,57.248-128,127.936C 128,262.688, 185.312,320, 256,320s 128-57.312, 128-128.032
C 384,121.28, 326.688,64.032, 256,64.032z M 256,272C 211.808,272, 176,236.192, 176,192c0-44.16, 35.808-80, 80-80s 80,35.84, 80,80
C 336,236.192, 300.192,272, 256,272z" />
<glyph unicode="&#xe010;" d="M 246.592,448C 222.4,448, 215.072,434.080, 215.072,434.080S 123.52,325.984, 81.792,325.984c-41.088,0-40.672,0-40.672,0C 18.4,325.984,0,307.776,0,285.344
l0-122.048 c0-22.464, 18.4-40.64, 41.088-40.64c0,0, 0.672,0, 41.088,0c 40.512,0, 134.784-109.44, 134.784-109.44c 7.456-7.744, 17.952-12.576, 29.632-12.576
c 22.688,0, 41.088,18.176, 41.088,40.64L 287.68,407.328 C 287.68,429.792, 269.28,448, 246.592,448z M 421.984,408.864l-23.712-35.488
c 43.328-35.2, 71.104-88.864, 71.104-149.088s-27.744-113.92-71.104-149.056l 23.712-35.488C 476.704,82.688, 512,149.312, 512,224.288
C 512,299.296, 476.704,365.888, 421.984,408.864z M 374.4,337.664l-23.936-35.84c 20.672-19.456, 33.696-46.88, 33.696-77.536
c0-30.656-13.024-58.048-33.696-77.536l 23.936-35.808c 31.936,27.36, 52.288,68, 52.288,113.344C 426.688,269.696, 406.336,310.272, 374.4,337.664z" />
<glyph unicode="&#xe011;" d="M 256.032,480C 114.688,480, 0.096,365.408, 0.096,224.032c0-141.408, 114.592-255.968, 255.936-255.968c 141.376,0, 255.968,114.56, 255.968,255.968
C 512,365.408, 397.408,480, 256.032,480z M 339.488,134.24l-7.424-7.488c-6.208-6.176-16.672-6.496-23.232-0.64L 223.072,199.872
C 216.512,205.728, 211.552,217.728, 211.968,226.496l 8.928,141.536C 221.344,376.832, 228.896,384, 237.728,384l 10.528,0 c 8.8,0, 16.352-7.168, 16.768-15.968
l 7.328-115.904c 0.448-8.768, 5.6-21.344, 11.424-27.904l 56.384-66.784C 345.984,150.944, 345.728,140.448, 339.488,134.24z" />
<glyph unicode="&#xe012;" d="M 256.032,400c-169.472,0-256.48-176.448-256.48-176.448s 65.664-176.48, 256.48-176.48c 172.736,0, 256.416,175.808, 256.416,175.808
S 428.128,400, 256.032,400z M 256.416,113.248c-61.984,0-106.752,48.288-106.752,110.304c0,62.048, 44.768,110.272, 106.752,110.272
c 61.952,0, 106.72-48.224, 106.72-110.272C 363.136,161.536, 318.336,113.248, 256.416,113.248z M 256.416,289.728c-35.392-0.064-64.064-30.72-64.064-66.176
c0-35.424, 28.672-66.176, 64.064-66.176s 64.032,30.752, 64.032,66.176C 320.448,259.008, 291.808,289.824, 256.416,289.728z" />
<glyph unicode="&#xe013;" d="M 228.928,84.032l 144.64-113.248c 2.368-1.888, 3.808-2.816, 5.184-2.816c 4,0, 5.248,2.752, 5.248,7.264l0,107.2
C 384,89.984, 388.992,96, 395.68,96l 52.576,0 c 63.744,0, 63.68,30.72, 63.68,30.72L 511.936,446.752 c0,0,0,33.28-63.936,33.28L 64.032,480.032 c-64,0-64-33.28-64-33.28L 0.032,126.72
c0,0-0.032-30.72, 64.224-30.72l 128,0 C 192.256,96, 219.040,95.264, 228.928,84.032z" />
<glyph unicode="&#xe01c;" d="M 361.696,176.8c-5.664,5.728-7.552,16.352-4.192,23.648c0,0, 23.616,51.232, 23.616,88.864C 381.12,394.624, 295.904,480, 190.752,480
s-190.4-85.376-190.4-190.656c0-105.312, 85.248-190.688, 190.4-190.688c 37.6,0, 88.704,23.68, 88.704,23.68c 7.328,3.392, 17.984,1.472, 23.616-4.224
l 145.728-145.888c 5.728-5.696, 15.040-5.696, 20.672,0l 37.888,37.952c 5.728,5.728, 5.728,15.072,0,20.736L 361.696,176.8z M 190.752,186.688
c-56.544,0-102.528,46.016-102.528,102.656c0,56.608, 46.016,102.656, 102.528,102.656s 102.496-46.048, 102.496-102.656C 293.248,232.704, 247.296,186.688, 190.752,186.688z" />
<glyph unicode="&#xe01d;" d="M 256.512,298.144c 53.28,0, 96.512,40.672, 96.512,90.944C 352.992,439.296, 309.792,480, 256.512,480S 160,439.296, 160,389.088
C 160,338.848, 203.232,298.144, 256.512,298.144z M 332.16,291.84C 310.88,277.12, 284.864,268.128, 256.512,268.128c-28.48,0-54.56,9.056-75.872,23.872
C 94.016,273.344, 32,223.584, 32,164.992l0-129.44 c0-8.576, 7.2-15.552, 16-15.552l 32,0 c 8.8,0, 16,6.304, 16,14.048c0,4.48,0,100.928,0,100.928
c0,8.32, 4.768,4.992, 10.688,4.992c 5.888,0, 10.656-4.512, 10.656-9.984l 0.16-89.984c 0.448-5.184, 4.8-42.208, 10.272-43.296
c0,0, 33.28-28.672, 128.224-28.672c 95.616,0, 128.224,28.672, 128.224,28.672c 5.472,1.056, 9.856,38.080, 10.272,43.296l 0.16,89.984
c0,5.504, 4.768,9.984, 10.688,9.984c 5.888,0, 10.656-4.512, 10.656-9.984c0,0,0-91.456,0-95.936c0-7.744, 7.2-14.048, 16-14.048l 32,0
c 8.8,0, 16,7.008, 16,15.552L 480,164.992 C 480,223.424, 418.304,273.056, 332.16,291.84z" />
<glyph unicode="&#xe01e;" d="M 448,416C 422.752,416, 64,416, 64,416C 38.752,416,0,395.424,0,370.528l0-9.056 c0,0, 216.384-180.928, 256-180.928s 256,180.352, 256,180.352l0,9.6
C 512,395.424, 473.248,416, 448,416z M0,288.48l0-256.448 C0,32.032,0,0, 64,0l 384,0 c 64.096,0, 64,32.032, 64,32.032L 512,289.28 c0,0-182.080-162.496-256-162.496
C 182.848,126.784,0,288.48,0,288.48z" />
<glyph unicode="&#xe01f;" d="M 448-32L 64-32 c-17.664,0-32,14.304-32,32.032L 32,224 c0,17.664, 14.336,32, 32,32l 32,0 L 96,320 c0,88.352, 71.616,160, 160,160s 160-71.648, 160-160l0-64 l 32,0 c 17.696,0, 32-14.336, 32-32
l0-223.968 C 480-17.696, 465.696-32, 448-32z M 352,320c0,52.992-42.976,96-96,96S 160,372.992, 160,320l0-64 l 192,0 L 352,320 z" />
<glyph unicode="&#xe024;" d="M 459.136,263.52c-8.672,1.28-17.984,9.152-20.672,17.504l-13.056,31.616c-4.064,7.776-3.136,19.936, 2.176,26.976l 21.056,28.096
c 5.312,7.040, 4.864,18.176-0.992,24.768L 424.512,415.68c-6.56,5.856-17.76,6.272-24.8,0.992l-28.064-21.12
c-7.072-5.248-19.2-6.24-27.008-2.144L 313.056,406.432C 304.64,409.088, 296.736,418.432, 295.552,427.168L 290.56,461.92
C 289.312,470.624, 281.152,478.496, 272.384,479.392C 272.384,479.392, 266.976,480, 256,480S 239.616,479.392, 239.616,479.392C 230.848,478.496, 222.656,470.624, 221.44,461.92
L 216.448,427.168C 215.232,418.432, 207.36,409.088, 198.944,406.432L 167.36,393.408C 159.584,389.312, 147.456,390.304, 140.416,395.552l-28.128,21.12
C 105.28,421.984, 94.080,421.536, 87.488,415.68L 64.384,392.544C 58.56,385.952, 58.112,374.784, 63.392,367.744L 84.48,339.648c 5.28-7.040, 6.24-19.2, 2.144-26.976
L 73.6,281.024C 70.912,272.672, 61.6,264.8, 52.896,263.52L 18.144,258.624C 9.408,257.344, 1.536,249.184, 0.64,240.416c0,0-0.576-5.44-0.576-16.416
c0-10.976, 0.576-16.448, 0.576-16.448c 0.928-8.736, 8.8-16.896, 17.504-18.144l 34.752-4.928C 61.6,183.232, 70.912,175.328, 73.6,166.976l 13.056-31.616
c 4.096-7.808, 3.136-19.904-2.144-26.944l-21.088-28.128c-5.28-7.072-6.56-16.64-2.816-21.248c 3.712-4.608, 14.432-16.032, 14.464-16.032
c0-0.064, 3.616-3.36, 8-7.328c 4.384-4.032, 22.24-9.6, 29.28-4.32l 28.128,21.056c 7.040,5.312, 19.168,6.272, 26.944,2.176L 198.944,41.6
c 8.416-2.72, 16.288-12, 17.504-20.736l 4.992-34.752c 1.216-8.672, 9.408-16.64, 18.144-17.536c0,0, 5.44-0.576, 16.416-0.576
s 16.384,0.576, 16.384,0.576c 8.736,0.896, 16.928,8.832, 18.176,17.536l 4.992,34.752c 1.184,8.736, 9.056,18.016, 17.504,20.736l 31.552,12.992
c 7.808,4.096, 19.936,3.136, 27.008-2.112l 28.128-21.12c 7.072-5.28, 18.176-4.832, 24.8,0.96l 23.136,23.168
c 5.824,6.592, 6.24,17.76, 0.928,24.8l-21.056,28.128c-5.312,7.040-6.24,19.136-2.176,26.944l 13.056,31.616
c 2.688,8.384, 12,16.256, 20.672,17.504l 34.752,4.928c 8.672,1.248, 16.576,9.408, 17.504,18.144c0,0, 0.576,5.44, 0.576,16.448
c0,10.976-0.576,16.416-0.576,16.416c-0.928,8.768-8.8,16.928-17.504,18.208L 459.136,263.52z M 256,160c-35.328,0-64,28.672-64,64
c0,35.36, 28.672,64, 64,64c 35.296,0, 64-28.672, 64-64C 320,188.672, 291.328,160, 256,160z" />
<glyph unicode="&#xe02b;" d="M 256,480C 114.61,480,0,365.369,0,223.957c0-141.369, 114.61-255.979, 256-255.979c 141.39,0, 256,114.61, 256,255.979C 512,365.369, 397.39,480, 256,480z
M 256,70.379c-84.814,0-153.6,68.764-153.6,153.579c0,84.857, 68.786,153.621, 153.6,153.621c 84.836,0, 153.6-68.764, 153.6-153.621C 409.6,139.143, 340.836,70.379, 256,70.379z" />
<glyph unicode="&#xe032;" d="M 256,480C 114.61,480,0,365.412,0,224.021c0-141.412, 114.61-256.043, 256-256.043c 141.39,0, 256,114.631, 256,256.043C 512,365.412, 397.39,480, 256,480z
M 256,70.4c-84.814,0-153.6,68.786-153.6,153.621c0,84.793, 68.786,153.543, 153.6,153.543c 84.836,0, 153.6-68.764, 153.6-153.543C 409.6,139.186, 340.836,70.4, 256,70.4z M 256,300.8
C 213.582,300.8, 179.2,266.418, 179.2,224.021C 179.2,181.582, 213.582,147.2, 256,147.2c 42.418,0, 76.8,34.382, 76.8,76.821C 332.8,266.418, 298.418,300.8, 256,300.8z" />
<glyph unicode="&#xe033;" d="M 128,480l 256,0 c 70.713,0, 128-57.287, 128-128l0-256.021 c0-70.713-57.287-128-128-128L 128-32.021 c-70.677,0-128,57.287-128,128L0,352 C0,422.713, 57.323,480, 128,480z" />
<glyph unicode="&#xe034;" d="M 384,480L 128,480 C 57.323,480,0,422.677,0,352l0-256.021 c0-70.713, 57.323-128, 128-128l 256,0 c 70.713,0, 128,57.287, 128,128L 512,352 C 512,422.677, 454.699,480, 384,480z M 421.433,276.046
l-183.652-183.652c-3.74-3.74-9.849-3.74-13.568,0l-27.157,27.371c-3.74,3.783-9.849,9.963-13.568,13.724l-63.154,66.382
c-1.849,1.892-2.837,4.473-2.837,6.933c0,2.503, 1.003,4.864, 2.837,6.756l 27.669,24.953c 1.87,1.913, 4.373,2.816, 6.855,2.816
c 2.425,0, 4.864-0.946, 6.734-2.816l 62.62-63.9c 3.705-3.819, 9.828-3.819, 13.568,0l 142.948,142.514c 3.74,3.74, 9.828,3.74, 13.547,0
l 27.157-27.392C 425.138,286.009, 425.138,279.787, 421.433,276.046z" />
<glyph unicode="&#xe022;" d="M0,288.224L0,342.080 c0,22.976, 19.104,41.568, 42.656,41.568l 53.696,0 L 96.352,428.864
c0,10.528, 10.784,51.104, 24.096,51.104L 168.64,479.968 c 13.312,0, 24.096-40.576, 24.096-51.104l0-45.216 l 159.616,0 L 352.352,428.864 c0,10.528, 10.816,51.104, 24.096,51.104l 48.192,0
c 13.312,0, 24.096-40.576, 24.096-51.104l0-45.216 l 20.64,0 c 23.584,0, 42.688-18.592, 42.688-41.568l0-53.888 L0,288.192 z M 512.032,255.68l0-246.112
c0-22.976-19.104-41.6-42.688-41.6L 42.656-32.032 c-23.552,0-42.656,18.624-42.656,41.6L0,255.68 L 512.032,255.68 z" />
<glyph unicode="&#xe03b;" d="M 128,480l-96,0 c-17.664,0-32-14.304-32-32l0-448 c0-17.696, 14.336-32, 32-32l 96,0
c 17.664,0, 32,14.304, 32,32l0,448 C 160,465.696, 145.664,480, 128,480z M 448,480l-96,0 c-17.696,0-32-14.304-32-32l0-448 c0-17.696, 14.304-32, 32-32l 96,0
c 17.696,0, 32,14.304, 32,32l0,448 C 480,465.696, 465.696,480, 448,480z" />
<glyph unicode="&#xe03c;" d="M 440,237.888l-416,240c-4.928,2.848-11.072,2.848-16,0C 3.072,475.008, 0,469.728, 0,464l0-480
c0-5.728, 3.072-11.008, 8-13.856C 10.464-31.296, 13.248-32, 16-32s 5.536,0.704, 8,2.144l 416,240c 4.928,2.848, 8,8.128, 8,13.856
S 444.928,235.008, 440,237.888z" />
<glyph unicode="&#xe000;" d="M 256,480C 114.624,480,0,365.408,0,224.032C0,82.624, 114.624-32, 256-32c 141.376,0, 256,114.624, 256,256.032C 512,365.408, 397.376,480, 256,480z M 421.44,276.064
l-183.648-183.616c-3.744-3.744-9.856-3.744-13.568,0l-27.136,27.392c-3.712,3.776-9.856,9.952-13.568,13.696L 120.352,199.936
C 118.496,201.792, 117.504,204.416, 117.504,206.88c0,2.496, 0.992,4.864, 2.848,6.752l 27.68,24.96c 1.888,1.92, 4.384,2.816, 6.848,2.816
c 2.432-0.032, 4.864-0.992, 6.72-2.816l 62.624-63.936c 3.744-3.808, 9.824-3.808, 13.568,0l 142.944,142.56c 3.712,3.744, 9.856,3.744, 13.568,0
l 27.168-27.456C 425.184,286.016, 425.184,279.84, 421.44,276.064z" />
<glyph unicode="&#x20;" horiz-adv-x="256" />
<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,68 @@
// Some general UI pack related JS
// Extend JS String with repeat method
String.prototype.repeat = function(num) {
return new Array(num + 1).join(this);
};
(function($) {
// Add segments to a slider
$.fn.addSliderSegments = function (amount) {
return this.each(function () {
var segmentGap = 100 / (amount - 1) + "%"
, segment = "<div class='ui-slider-segment' style='margin-left: " + segmentGap + ";'></div>";
$(this).prepend(segment.repeat(amount - 2));
});
};
$(function() {
// Todo list
$(".todo li").click(function() {
$(this).toggleClass("todo-done");
});
// Custom Select
$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
// Tooltips
$("[data-toggle=tooltip]").tooltip("show");
// Tags Input
$(".tagsinput").tagsInput();
// jQuery UI Sliders
var $slider = $("#slider");
if ($slider.length) {
$slider.slider({
min: 1,
max: 5,
value: 2,
orientation: "horizontal",
range: "min"
}).addSliderSegments($slider.slider("option").max);
}
// Placeholders for input/textarea
$("input, textarea").placeholder();
// Make pagination demo work
$(".pagination a").on('click', function() {
$(this).parent().siblings("li").removeClass("active").end().addClass("active");
});
$(".btn-group a").on('click', function() {
$(this).siblings().removeClass("active").end().addClass("active");
});
// Disable link clicks to prevent page scrolling
$('a[href="#fakelink"]').on('click', function (e) {
e.preventDefault();
});
// Switch
$("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch();
});
})(jQuery);

View File

@ -0,0 +1,413 @@
!function($) {
var Selectpicker = function(element, options, e) {
if (e ) {
e.stopPropagation();
e.preventDefault();
}
this.$element = $(element);
this.$newElement = null;
this.button = null;
//Merge defaults, options and data-attributes to make our options
this.options = $.extend({}, $.fn.selectpicker.defaults, this.$element.data(), typeof options == 'object' && options);
//If we have no title yet, check the attribute 'title' (this is missed by jq as its not a data-attribute
if(this.options.title==null)
this.options.title = this.$element.attr('title');
//Expose public methods
this.val = Selectpicker.prototype.val;
this.render = Selectpicker.prototype.render;
this.init();
};
Selectpicker.prototype = {
constructor: Selectpicker,
init: function (e) {
var _this = this;
this.$element.hide();
this.multiple = this.$element.prop('multiple');
var classList = this.$element.attr('class') !== undefined ? this.$element.attr('class').split(/\s+/) : '';
var id = this.$element.attr('id');
this.$element.after( this.createView() );
this.$newElement = this.$element.next('.select');
var select = this.$newElement;
var menu = this.$newElement.find('.dropdown-menu');
var menuArrow = this.$newElement.find('.dropdown-arrow');
var menuA = menu.find('li > a');
var liHeight = select.addClass('open').find('.dropdown-menu li > a').outerHeight();
select.removeClass('open');
var divHeight = menu.find('li .divider').outerHeight(true);
var selectOffset_top = this.$newElement.offset().top;
var size = 0;
var menuHeight = 0;
var selectHeight = this.$newElement.outerHeight();
this.button = this.$newElement.find('> button');
if (id !== undefined) {
this.button.attr('id', id);
$('label[for="' + id + '"]').click(function(){ select.find('button#'+id).focus(); })
}
for (var i = 0; i < classList.length; i++) {
if(classList[i] != 'selectpicker') {
this.$newElement.addClass(classList[i]);
}
}
//If we are multiple, then add the show-tick class by default
if(this.multiple) {
this.$newElement.addClass('select-multiple');
}
this.button.addClass(this.options.style);
menu.addClass(this.options.menuStyle);
menuArrow.addClass(function() {
if (_this.options.menuStyle) {
return _this.options.menuStyle.replace('dropdown-', 'dropdown-arrow-');
}
});
this.checkDisabled();
this.checkTabIndex();
this.clickListener();
var menuPadding = parseInt(menu.css('padding-top')) + parseInt(menu.css('padding-bottom')) + parseInt(menu.css('border-top-width')) + parseInt(menu.css('border-bottom-width'));
if (this.options.size == 'auto') {
function getSize() {
var selectOffset_top_scroll = selectOffset_top - $(window).scrollTop();
var windowHeight = window.innerHeight;
var menuExtras = menuPadding + parseInt(menu.css('margin-top')) + parseInt(menu.css('margin-bottom')) + 2;
var selectOffset_bot = windowHeight - selectOffset_top_scroll - selectHeight - menuExtras;
menuHeight = selectOffset_bot;
if (select.hasClass('dropup')) {
menuHeight = selectOffset_top_scroll - menuExtras;
}
menu.css({'max-height' : menuHeight + 'px', 'overflow-y' : 'auto', 'min-height' : 'auto'});
//menu.css({'max-height' : menuHeight + 'px', 'overflow-y' : 'auto', 'min-height' : liHeight*3 + 'px'});
}
getSize();
$(window).resize(getSize);
$(window).scroll(getSize);
this.$element.bind('DOMNodeInserted', getSize);
} else if (this.options.size && this.options.size != 'auto' && menu.find('li').length > this.options.size) {
var optIndex = menu.find("li > *").filter(':not(.divider)').slice(0,this.options.size).last().parent().index();
var divLength = menu.find("li").slice(0,optIndex + 1).find('.divider').length;
menuHeight = liHeight*this.options.size + divLength*divHeight + menuPadding;
menu.css({'max-height' : menuHeight + 'px', 'overflow-y' : 'scroll'});
}
//Listen for updates to the DOM and re render...
this.$element.bind('DOMNodeInserted', $.proxy(this.reloadLi, this));
this.render();
},
createDropdown: function() {
var drop =
"<div class='btn-group select'>" +
"<i class='dropdown-arrow'></i>" +
"<button class='btn dropdown-toggle clearfix' data-toggle='dropdown'>" +
"<span class='filter-option pull-left'></span>&nbsp;" +
"<span class='caret'></span>" +
"</button>" +
"<ul class='dropdown-menu' role='menu'>" +
"</ul>" +
"</div>";
return $(drop);
},
createView: function() {
var $drop = this.createDropdown();
var $li = this.createLi();
$drop.find('ul').append($li);
return $drop;
},
reloadLi: function() {
//Remove all children.
this.destroyLi();
//Re build
$li = this.createLi();
this.$newElement.find('ul').append( $li );
//render view
this.render();
},
destroyLi:function() {
this.$newElement.find('li').remove();
},
createLi: function() {
var _this = this;
var _li = [];
var _liA = [];
var _liHtml = '';
this.$element.find('option').each(function(){
_li.push($(this).text());
});
this.$element.find('option').each(function(index) {
//Get the class and text for the option
var optionClass = $(this).attr("class") !== undefined ? $(this).attr("class") : '';
var text = $(this).text();
var subtext = $(this).data('subtext') !== undefined ? '<small class="muted">'+$(this).data('subtext')+'</small>' : '';
//Append any subtext to the main text.
text+=subtext;
if ($(this).parent().is('optgroup') && $(this).data('divider') != true) {
if ($(this).index() == 0) {
//Get the opt group label
var label = $(this).parent().attr('label');
var labelSubtext = $(this).parent().data('subtext') !== undefined ? '<small class="muted">'+$(this).parent().data('subtext')+'</small>' : '';
label += labelSubtext;
if ($(this)[0].index != 0) {
_liA.push(
'<div class="divider"></div>'+
'<dt>'+label+'</dt>'+
_this.createA(text, "opt " + optionClass )
);
} else {
_liA.push(
'<dt>'+label+'</dt>'+
_this.createA(text, "opt " + optionClass ));
}
} else {
_liA.push( _this.createA(text, "opt " + optionClass ) );
}
} else if ($(this).data('divider') == true) {
_liA.push('<div class="divider"></div>');
} else {
_liA.push( _this.createA(text, optionClass ) );
}
});
if (_li.length > 0) {
for (var i = 0; i < _li.length; i++) {
var $option = this.$element.find('option').eq(i);
_liHtml += "<li rel=" + i + ">" + _liA[i] + "</li>";
}
}
//If we dont have a selected item, and we dont have a title, select the first element so something is set in the button
if(this.$element.find('option:selected').length==0 && !_this.options.title) {
this.$element.find('option').eq(0).prop('selected', true).attr('selected', 'selected');
}
return $(_liHtml);
},
createA:function(test, classes) {
return '<a tabindex="-1" href="#" class="'+classes+'">' +
'<span class="pull-left">' + test + '</span>' +
'</a>';
},
render:function() {
var _this = this;
//Set width of select
if (this.options.width == 'auto') {
var ulWidth = this.$newElement.find('.dropdown-menu').css('width');
this.$newElement.css('width',ulWidth);
} else if (this.options.width && this.options.width != 'auto') {
this.$newElement.css('width',this.options.width);
}
//Update the LI to match the SELECT
this.$element.find('option').each(function(index) {
_this.setDisabled(index, $(this).is(':disabled') || $(this).parent().is(':disabled') );
_this.setSelected(index, $(this).is(':selected') );
});
var selectedItems = this.$element.find('option:selected').map(function(index,value) {
if($(this).attr('title')!=undefined) {
return $(this).attr('title');
} else {
return $(this).text();
}
}).toArray();
//Convert all the values into a comma delimited string
var title = selectedItems.join(", ");
//If this is multi select, and the selectText type is count, the show 1 of 2 selected etc..
if(_this.multiple && _this.options.selectedTextFormat.indexOf('count') > -1) {
var max = _this.options.selectedTextFormat.split(">");
if( (max.length>1 && selectedItems.length > max[1]) || (max.length==1 && selectedItems.length>=2)) {
title = selectedItems.length +' of ' + this.$element.find('option').length + ' selected';
}
}
//If we dont have a title, then use the default, or if nothing is set at all, use the not selected text
if(!title) {
title = _this.options.title != undefined ? _this.options.title : _this.options.noneSelectedText;
}
this.$element.next('.select').find('.filter-option').html( title );
},
setSelected:function(index, selected) {
if(selected) {
this.$newElement.find('li').eq(index).addClass('selected');
} else {
this.$newElement.find('li').eq(index).removeClass('selected');
}
},
setDisabled:function(index, disabled) {
if(disabled) {
this.$newElement.find('li').eq(index).addClass('disabled');
} else {
this.$newElement.find('li').eq(index).removeClass('disabled');
}
},
checkDisabled: function() {
if (this.$element.is(':disabled')) {
this.button.addClass('disabled');
this.button.click(function(e) {
e.preventDefault();
});
}
},
checkTabIndex: function() {
if (this.$element.is('[tabindex]')) {
var tabindex = this.$element.attr("tabindex");
this.button.attr('tabindex', tabindex);
}
},
clickListener: function() {
var _this = this;
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
this.$newElement.on('click', 'li a', function(e){
var clickedIndex = $(this).parent().index(),
$this = $(this).parent(),
$select = $this.parents('.select');
//Dont close on multi choice menu
if(_this.multiple) {
e.stopPropagation();
}
e.preventDefault();
//Dont run if we have been disabled
if ($select.prev('select').not(':disabled') && !$(this).parent().hasClass('disabled')){
//Deselect all others if not multi select box
if (!_this.multiple) {
$select.prev('select').find('option').removeAttr('selected');
$select.prev('select').find('option').eq(clickedIndex).prop('selected', true).attr('selected', 'selected');
}
//Else toggle the one we have chosen if we are multi selet.
else {
var selected = $select.prev('select').find('option').eq(clickedIndex).prop('selected');
if(selected) {
$select.prev('select').find('option').eq(clickedIndex).removeAttr('selected');
} else {
$select.prev('select').find('option').eq(clickedIndex).prop('selected', true).attr('selected', 'selected');
}
}
$select.find('.filter-option').html($this.text());
$select.find('button').focus();
// Trigger select 'change'
$select.prev('select').trigger('change');
}
});
this.$newElement.on('click', 'li.disabled a, li dt, li .divider', function(e) {
e.preventDefault();
e.stopPropagation();
$select = $(this).parent().parents('.select');
$select.find('button').focus();
});
this.$element.on('change', function(e) {
_this.render();
});
},
val:function(value) {
if(value!=undefined) {
this.$element.val( value );
this.$element.trigger('change');
return this.$element;
} else {
return this.$element.val();
}
}
};
$.fn.selectpicker = function(option, event) {
//get the args of the outer function..
var args = arguments;
var value;
var chain = this.each(function () {
var $this = $(this),
data = $this.data('selectpicker'),
options = typeof option == 'object' && option;
if (!data) {
$this.data('selectpicker', (data = new Selectpicker(this, options, event)));
} else {
for(var i in option) {
data[i]=option[i];
}
}
if (typeof option == 'string') {
//Copy the value of option, as once we shift the arguments
//it also shifts the value of option.
property = option;
if(data[property] instanceof Function) {
[].shift.apply(args);
value = data[property].apply(data, args);
} else {
value = data[property];
}
}
});
if(value!=undefined) {
return value;
} else {
return chain;
}
};
$.fn.selectpicker.defaults = {
style: null,
size: 'auto',
title: null,
selectedTextFormat : 'values',
noneSelectedText : 'Nothing selected',
width: null,
menuStyle: null,
toggleSize: null
}
}(window.jQuery);

View File

@ -0,0 +1,251 @@
/* ============================================================
* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
* http://www.larentis.eu/switch/
* ============================================================
* Licensed under the Apache License, Version 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* ============================================================ */
!function ($) {
"use strict";
$.fn['bootstrapSwitch'] = function (method) {
var methods = {
init: function () {
return this.each(function () {
var $element = $(this)
, $div
, $switchLeft
, $switchRight
, $label
, myClasses = ""
, classes = $element.attr('class')
, color
, moving
, onLabel = "ON"
, offLabel = "OFF"
, icon = false;
$.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
if (classes.indexOf(el) >= 0)
myClasses = el;
});
$element.addClass('has-switch');
if ($element.data('on') !== undefined)
color = "switch-" + $element.data('on');
if ($element.data('on-label') !== undefined)
onLabel = $element.data('on-label');
if ($element.data('off-label') !== undefined)
offLabel = $element.data('off-label');
if ($element.data('icon') !== undefined)
icon = $element.data('icon');
$switchLeft = $('<span>')
.addClass("switch-left")
.addClass(myClasses)
.addClass(color)
.html(onLabel);
color = '';
if ($element.data('off') !== undefined)
color = "switch-" + $element.data('off');
$switchRight = $('<span>')
.addClass("switch-right")
.addClass(myClasses)
.addClass(color)
.html(offLabel);
$label = $('<label>')
.html("&nbsp;")
.addClass(myClasses)
.attr('for', $element.find('input').attr('id'));
if (icon) {
$label.html('<i class="' + icon + '"></i>');
}
$div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
if ($element.data('animated') !== false)
$div.addClass('switch-animate').data('animated', true);
$div
.append($switchLeft)
.append($label)
.append($switchRight);
$element.find('>div').addClass(
$element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
);
if ($element.find('input').is(':disabled'))
$(this).addClass('deactivate');
var changeStatus = function ($this) {
$this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
};
$element.on('keydown', function (e) {
if (e.keyCode === 32) {
e.stopImmediatePropagation();
e.preventDefault();
changeStatus($(e.target).find('span:first'));
}
});
$switchLeft.on('click', function (e) {
changeStatus($(this));
});
$switchRight.on('click', function (e) {
changeStatus($(this));
});
$element.find('input').on('change', function (e) {
var $this = $(this)
, $element = $this.parent()
, thisState = $this.is(':checked')
, state = $element.is('.switch-off');
e.preventDefault();
$element.css('left', '');
if (state === thisState) {
if (thisState)
$element.removeClass('switch-off').addClass('switch-on');
else $element.removeClass('switch-on').addClass('switch-off');
if ($element.data('animated') !== false)
$element.addClass("switch-animate");
$element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
}
});
$element.find('label').on('mousedown touchstart', function (e) {
var $this = $(this);
moving = false;
e.preventDefault();
e.stopImmediatePropagation();
$this.closest('div').removeClass('switch-animate');
if ($this.closest('.has-switch').is('.deactivate'))
$this.unbind('click');
else {
$this.on('mousemove touchmove', function (e) {
var $element = $(this).closest('.switch')
, relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
, percent = (relativeX / $element.width()) * 100
, left = 25
, right = 75;
moving = true;
if (percent < left)
percent = left;
else if (percent > right)
percent = right;
$element.find('>div').css('left', (percent - right) + "%")
});
$this.on('click touchend', function (e) {
var $this = $(this)
, $target = $(e.target)
, $myCheckBox = $target.siblings('input');
e.stopImmediatePropagation();
e.preventDefault();
$this.unbind('mouseleave');
if (moving)
$myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
moving = false;
$myCheckBox.trigger('change');
});
$this.on('mouseleave', function (e) {
var $this = $(this)
, $myCheckBox = $this.siblings('input');
e.preventDefault();
e.stopImmediatePropagation();
$this.unbind('mouseleave');
$this.trigger('mouseup');
$myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
});
$this.on('mouseup', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
$(this).unbind('mousemove');
});
}
});
}
);
},
toggleActivation: function () {
$(this).toggleClass('deactivate');
},
isActive: function () {
return !$(this).hasClass('deactivate');
},
setActive: function (active) {
if (active)
$(this).removeClass('deactivate');
else $(this).addClass('deactivate');
},
toggleState: function (skipOnChange) {
var $input = $(this).find('input:checkbox');
$input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
},
setState: function (value, skipOnChange) {
$(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
},
status: function () {
return $(this).find('input:checkbox').is(':checked');
},
destroy: function () {
var $div = $(this).find('div')
, $checkbox;
$div.find(':not(input:checkbox)').remove();
$checkbox = $div.children();
$checkbox.unwrap().unwrap();
$checkbox.unbind('change');
return $checkbox;
}
};
if (methods[method])
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else if (typeof method === 'object' || !method)
return methods.init.apply(this, arguments);
else
$.error('Method ' + method + ' does not exist!');
};
}(jQuery);
$(function () {
$('.switch')['bootstrapSwitch']();
});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,110 @@
/* =============================================================
* flatui-checkbox.js v0.0.2
* ============================================================ */
!function ($) {
/* CHECKBOX PUBLIC CLASS DEFINITION
* ============================== */
var Checkbox = function (element, options) {
this.init(element, options);
}
Checkbox.prototype = {
constructor: Checkbox
, init: function (element, options) {
var $el = this.$element = $(element)
this.options = $.extend({}, $.fn.checkbox.defaults, options);
$el.before(this.options.template);
this.setState();
}
, setState: function () {
var $el = this.$element
, $parent = $el.closest('.checkbox');
$el.prop('disabled') && $parent.addClass('disabled');
$el.prop('checked') && $parent.addClass('checked');
}
, toggle: function () {
var ch = 'checked'
, $el = this.$element
, $parent = $el.closest('.checkbox')
, checked = $el.prop(ch)
, e = $.Event('toggle')
if ($el.prop('disabled') == false) {
$parent.toggleClass(ch) && checked ? $el.removeAttr(ch) : $el.attr(ch, true);
$el.trigger(e).trigger('change');
}
}
, setCheck: function (option) {
var d = 'disabled'
, ch = 'checked'
, $el = this.$element
, $parent = $el.closest('.checkbox')
, checkAction = option == 'check' ? true : false
, e = $.Event(option)
$parent[checkAction ? 'addClass' : 'removeClass' ](ch) && checkAction ? $el.attr(ch, true) : $el.removeAttr(ch);
$el.trigger(e).trigger('change');
}
}
/* CHECKBOX PLUGIN DEFINITION
* ======================== */
var old = $.fn.checkbox
$.fn.checkbox = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('checkbox')
, options = $.extend({}, $.fn.checkbox.defaults, $this.data(), typeof option == 'object' && option);
if (!data) $this.data('checkbox', (data = new Checkbox(this, options)));
if (option == 'toggle') data.toggle()
if (option == 'check' || option == 'uncheck') data.setCheck(option)
else if (option) data.setState();
});
}
$.fn.checkbox.defaults = {
template: '<span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span>'
}
/* CHECKBOX NO CONFLICT
* ================== */
$.fn.checkbox.noConflict = function () {
$.fn.checkbox = old;
return this;
}
/* CHECKBOX DATA-API
* =============== */
$(document).on('click.checkbox.data-api', '[data-toggle^=checkbox], .checkbox', function (e) {
var $checkbox = $(e.target);
e && e.preventDefault() && e.stopPropagation();
if (!$checkbox.hasClass('checkbox')) $checkbox = $checkbox.closest('.checkbox');
$checkbox.find(':checkbox').checkbox('toggle');
});
$(window).on('load', function () {
$('[data-toggle="checkbox"]').each(function () {
var $checkbox = $(this);
$checkbox.checkbox();
});
});
}(window.jQuery);

View File

@ -0,0 +1,139 @@
/* =============================================================
* flatui-radio.js v0.0.2
* ============================================================ */
!function ($) {
/* RADIO PUBLIC CLASS DEFINITION
* ============================== */
var Radio = function (element, options) {
this.init(element, options);
}
Radio.prototype = {
constructor: Radio
, init: function (element, options) {
var $el = this.$element = $(element)
this.options = $.extend({}, $.fn.radio.defaults, options);
$el.before(this.options.template);
this.setState();
}
, setState: function () {
var $el = this.$element
, $parent = $el.closest('.radio');
$el.prop('disabled') && $parent.addClass('disabled');
$el.prop('checked') && $parent.addClass('checked');
}
, toggle: function () {
var d = 'disabled'
, ch = 'checked'
, $el = this.$element
, checked = $el.prop(ch)
, $parent = $el.closest('.radio')
, $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
, $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]')
, e = $.Event('toggle')
$elemGroup.not($el).each(function () {
var $el = $(this)
, $parent = $(this).closest('.radio');
if ($el.prop(d) == false) {
$parent.removeClass(ch) && $el.attr(ch, false).trigger('change');
}
});
if ($el.prop(d) == false) {
if (checked == false) $parent.addClass(ch) && $el.attr(ch, true);
$el.trigger(e);
if (checked !== $el.prop(ch)) {
$el.trigger('change');
}
}
}
, setCheck: function (option) {
var ch = 'checked'
, $el = this.$element
, $parent = $el.closest('.radio')
, checkAction = option == 'check' ? true : false
, checked = $el.prop(ch)
, $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
, $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]')
, e = $.Event(option)
$elemGroup.not($el).each(function () {
var $el = $(this)
, $parent = $(this).closest('.radio');
$parent.removeClass(ch) && $el.removeAttr(ch);
});
$parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.attr(ch, true) : $el.removeAttr(ch);
$el.trigger(e);
if (checked !== $el.prop(ch)) {
$el.trigger('change');
}
}
}
/* RADIO PLUGIN DEFINITION
* ======================== */
var old = $.fn.radio
$.fn.radio = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('radio')
, options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option);
if (!data) $this.data('radio', (data = new Radio(this, options)));
if (option == 'toggle') data.toggle()
if (option == 'check' || option == 'uncheck') data.setCheck(option)
else if (option) data.setState();
});
}
$.fn.radio.defaults = {
template: '<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span>'
}
/* RADIO NO CONFLICT
* ================== */
$.fn.radio.noConflict = function () {
$.fn.radio = old;
return this;
}
/* RADIO DATA-API
* =============== */
$(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
var $radio = $(e.target);
e && e.preventDefault() && e.stopPropagation();
if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio');
$radio.find(':radio').radio('toggle');
});
$(window).on('load', function () {
$('[data-toggle="radio"]').each(function () {
var $radio = $(this);
$radio.radio();
});
});
}(window.jQuery);

View File

@ -0,0 +1,8 @@
/*
HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

View File

@ -0,0 +1,57 @@
/* Load this script using conditional IE comments if you need to support IE 7 and IE 6. */
window.onload = function() {
function addIcon(el, entity) {
var html = el.innerHTML;
el.innerHTML = '<span style="font-family: \'Flat-UI-Icons\'">' + entity + '</span>' + html;
}
var icons = {
'fui-arrow-right' : '&#xe02c;',
'fui-arrow-left' : '&#xe02d;',
'fui-cmd' : '&#xe02f;',
'fui-check-inverted' : '&#xe006;',
'fui-heart' : '&#xe007;',
'fui-location' : '&#xe008;',
'fui-plus' : '&#xe009;',
'fui-check' : '&#xe00a;',
'fui-cross' : '&#xe00b;',
'fui-list' : '&#xe00c;',
'fui-new' : '&#xe00d;',
'fui-video' : '&#xe00e;',
'fui-photo' : '&#xe00f;',
'fui-volume' : '&#xe010;',
'fui-time' : '&#xe011;',
'fui-eye' : '&#xe012;',
'fui-chat' : '&#xe013;',
'fui-search' : '&#xe01c;',
'fui-user' : '&#xe01d;',
'fui-mail' : '&#xe01e;',
'fui-lock' : '&#xe01f;',
'fui-gear' : '&#xe024;',
'fui-radio-unchecked' : '&#xe02b;',
'fui-radio-checked' : '&#xe032;',
'fui-checkbox-unchecked' : '&#xe033;',
'fui-checkbox-checked' : '&#xe034;',
'fui-calendar-solid' : '&#xe022;',
'fui-pause' : '&#xe03b;',
'fui-play' : '&#xe03c;',
'fui-check-inverted-2' : '&#xe000;'
},
els = document.getElementsByTagName('*'),
i, attr, html, c, el;
for (i = 0; ; i += 1) {
el = els[i];
if(!el) {
break;
}
attr = el.getAttribute('data-icon');
if (attr) {
addIcon(el, attr);
}
c = el.className;
c = c.match(/fui-[^\s'"]+/);
if (c && icons[c[0]]) {
addIcon(el, icons[c[0]]);
}
}
};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,157 @@
/*! http://mths.be/placeholder v2.0.7 by @mathias */
;(function(window, document, $) {
var isInputSupported = 'placeholder' in document.createElement('input'),
isTextareaSupported = 'placeholder' in document.createElement('textarea'),
prototype = $.fn,
valHooks = $.valHooks,
hooks,
placeholder;
if (isInputSupported && isTextareaSupported) {
placeholder = prototype.placeholder = function() {
return this;
};
placeholder.input = placeholder.textarea = true;
} else {
placeholder = prototype.placeholder = function() {
var $this = this;
$this
.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.placeholder')
.bind({
'focus.placeholder': clearPlaceholder,
'blur.placeholder': setPlaceholder
})
.data('placeholder-enabled', true)
.trigger('blur.placeholder');
return $this;
};
placeholder.input = isInputSupported;
placeholder.textarea = isTextareaSupported;
hooks = {
'get': function(element) {
var $element = $(element);
return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
},
'set': function(element, value) {
var $element = $(element);
if (!$element.data('placeholder-enabled')) {
return element.value = value;
}
if (value == '') {
element.value = value;
// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
if (element != document.activeElement) {
// We can't use `triggerHandler` here because of dummy text/password inputs :(
setPlaceholder.call(element);
}
} else if ($element.hasClass('placeholder')) {
clearPlaceholder.call(element, true, value) || (element.value = value);
} else {
element.value = value;
}
// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
return $element;
}
};
isInputSupported || (valHooks.input = hooks);
isTextareaSupported || (valHooks.textarea = hooks);
$(function() {
// Look for forms
$(document).delegate('form', 'submit.placeholder', function() {
// Clear the placeholder values so they don't get submitted
var $inputs = $('.placeholder', this).each(clearPlaceholder);
setTimeout(function() {
$inputs.each(setPlaceholder);
}, 10);
});
});
// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
$('.placeholder').each(function() {
this.value = '';
});
});
}
function args(elem) {
// Return an object of element attributes
var newAttrs = {},
rinlinejQuery = /^jQuery\d+$/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
function clearPlaceholder(event, value) {
var input = this,
$input = $(input);
if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
if ($input.data('placeholder-password')) {
$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
// If `clearPlaceholder` was called from `$.valHooks.input.set`
if (event === true) {
return $input[0].value = value;
}
$input.focus();
} else {
input.value = '';
$input.removeClass('placeholder');
input == document.activeElement && input.select();
}
}
}
function setPlaceholder() {
var $replacement,
input = this,
$input = $(input),
$origInput = $input,
id = this.id;
if (input.value == '') {
if (input.type == 'password') {
if (!$input.data('placeholder-textinput')) {
try {
$replacement = $input.clone().attr({ 'type': 'text' });
} catch(e) {
$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
}
$replacement
.removeAttr('name')
.data({
'placeholder-password': true,
'placeholder-id': id
})
.bind('focus.placeholder', clearPlaceholder);
$input
.data({
'placeholder-textinput': $replacement,
'placeholder-id': id
})
.before($replacement);
}
$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
// Note: `$input[0] != input` now!
}
$input.addClass('placeholder');
$input[0].value = $input.attr('placeholder');
} else {
$input.removeClass('placeholder');
}
}
}(this, document, jQuery));

View File

@ -0,0 +1,54 @@
/**
* MODIFIED CAUSE WE NEEDED OUR OWN MARKUP
* stacktable.js
* Author & copyright (c) 2012: John Polacek
* Dual MIT & GPL license
*
* Page: http://johnpolacek.github.com/stacktable.js
* Repo: https://github.com/johnpolacek/stacktable.js/
*
* jQuery plugin for stacking tables on small screens
*
*/
;(function($) {
$.fn.stacktable = function(options) {
var $tables = this,
defaults = {id:'stacktable',hideOriginal:false},
settings = $.extend({}, defaults, options),
stacktable;
return $tables.each(function() {
var $stacktable = $('<table class="'+settings.id+'"><tbody></tbody></table>');
if (typeof settings.myClass !== undefined) $stacktable.addClass(settings.myClass);
var markup = '';
$table = $(this);
$topRow = $table.find('tr').eq(0);
$table.find('tr').each(function(index,value) {
var zebra = "";
if (index % 2 === 0) {
zebra = "even";
} else {
zebra = "odd";
}
markup += '<tr class="' + zebra + '">';
$(this).find('td').each(function(index,value) {
if ($(this).html() !== ''){
markup += '<tr class="' + zebra + '">';
if ($topRow.find('td,th').eq(index).html()){
markup += '<td>'+$topRow.find('td,th').eq(index).html()+'</td>';
} else {
markup += '<td></td>';
}
markup += '<td>'+$(this).html()+'</td>';
markup += '</tr>';
}
});
});
$stacktable.append($(markup));
$table.before($stacktable);
if (settings.hideOriginal) $table.hide();
});
};
}(jQuery));

View File

@ -0,0 +1,355 @@
/*
jQuery Tags Input Plugin 1.3.3
Copyright (c) 2011 XOXCO, Inc
Documentation for this plugin lives here:
http://xoxco.com/clickable/jquery-tags-input
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
ben@xoxco.com
*/
(function($) {
var delimiter = new Array();
var tags_callbacks = new Array();
$.fn.doAutosize = function(o){
var minWidth = $(this).data('minwidth'),
maxWidth = $(this).data('maxwidth'),
val = '',
input = $(this),
testSubject = $('#'+$(this).data('tester_id'));
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
$.fn.resetAutosize = function(options){
// alert(JSON.stringify(options));
var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(),
maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
testerId = $(this).attr('id')+'_autosize_tester';
if(! $('#'+testerId).length > 0){
testSubject.attr('id', testerId);
testSubject.appendTo('body');
}
input.data('minwidth', minWidth);
input.data('maxwidth', maxWidth);
input.data('tester_id', testerId);
input.css('width', minWidth);
};
$.fn.addTag = function(value,options) {
options = jQuery.extend({focus:false,callback:true},options);
this.each(function() {
var id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
if (tagslist[0] == '') {
tagslist = new Array();
}
value = jQuery.trim(value);
if (options.unique) {
var skipTag = $(this).tagExist(value);
if(skipTag == true) {
//Marks fake input as not_valid to let styling it
$('#'+id+'_tag').addClass('not_valid');
}
} else {
var skipTag = false;
}
if (value !='' && skipTag != true) {
$('<span>').addClass('tag').append(
$('<span>').text(value).append('&nbsp;&nbsp;'),
$('<a class="tagsinput-remove-link">', {
href : '#',
title : 'Remove tag',
text : ''
}).click(function () {
return $('#' + id).removeTag(escape(value));
})
).insertBefore('#' + id + '_addTag');
tagslist.push(value);
$('#'+id+'_tag').val('');
if (options.focus) {
$('#'+id+'_tag').focus();
} else {
$('#'+id+'_tag').blur();
}
$.fn.tagsInput.updateTagsField(this,tagslist);
if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
var f = tags_callbacks[id]['onAddTag'];
f.call(this, value);
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
{
var i = tagslist.length;
var f = tags_callbacks[id]['onChange'];
f.call(this, $(this), tagslist[i-1]);
}
}
});
return false;
};
$.fn.removeTag = function(value) {
value = unescape(value);
this.each(function() {
var id = $(this).attr('id');
var old = $(this).val().split(delimiter[id]);
$('#'+id+'_tagsinput .tag').remove();
str = '';
for (i=0; i< old.length; i++) {
if (old[i]!=value) {
str = str + delimiter[id] +old[i];
}
}
$.fn.tagsInput.importTags(this,str);
if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
var f = tags_callbacks[id]['onRemoveTag'];
f.call(this, value);
}
});
return false;
};
$.fn.tagExist = function(val) {
var id = $(this).attr('id');
var tagslist = $(this).val().split(delimiter[id]);
return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not
};
// clear all existing tags and import new ones from a string
$.fn.importTags = function(str) {
id = $(this).attr('id');
$('#'+id+'_tagsinput .tag').remove();
$.fn.tagsInput.importTags(this,str);
}
$.fn.tagsInput = function(options) {
var settings = jQuery.extend({
interactive:true,
defaultText:'',
minChars:0,
width:'',
height:'',
autocomplete: {selectFirst: false },
'hide':true,
'delimiter':',',
'unique':true,
removeWithBackspace:true,
placeholderColor:'#666666',
autosize: true,
comfortZone: 20,
inputPadding: 6*2
},options);
this.each(function() {
if (settings.hide) {
$(this).hide();
}
var id = $(this).attr('id');
if (!id || delimiter[$(this).attr('id')]) {
id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');
}
var data = jQuery.extend({
pid:id,
real_input: '#'+id,
holder: '#'+id+'_tagsinput',
input_wrapper: '#'+id+'_addTag',
fake_input: '#'+id+'_tag'
},settings);
delimiter[id] = data.delimiter;
if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
tags_callbacks[id] = new Array();
tags_callbacks[id]['onAddTag'] = settings.onAddTag;
tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
tags_callbacks[id]['onChange'] = settings.onChange;
}
var containerClass = $('#'+id).attr('class').replace('tagsinput', '');
var markup = '<div id="'+id+'_tagsinput" class="tagsinput '+containerClass+'"><div class="tagsinput-add-container" id="'+id+'_addTag"><div class="tagsinput-add"></div>';
if (settings.interactive) {
markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
}
markup = markup + '</div></div>';
$(markup).insertAfter(this);
$(data.holder).css('width',settings.width);
$(data.holder).css('min-height',settings.height);
$(data.holder).css('height','100%');
if ($(data.real_input).val()!='') {
$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
}
if (settings.interactive) {
$(data.fake_input).val($(data.fake_input).attr('data-default'));
$(data.fake_input).css('color',settings.placeholderColor);
$(data.fake_input).resetAutosize(settings);
$(data.holder).bind('click',data,function(event) {
$(event.data.fake_input).focus();
});
$(data.fake_input).bind('focus',data,function(event) {
if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) {
$(event.data.fake_input).val('');
}
$(event.data.fake_input).css('color','#000000');
});
if (settings.autocomplete_url != undefined) {
autocomplete_options = {source: settings.autocomplete_url};
for (attrname in settings.autocomplete) {
autocomplete_options[attrname] = settings.autocomplete[attrname];
}
if (jQuery.Autocompleter !== undefined) {
$(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
$(data.fake_input).bind('result',data,function(event,data,formatted) {
if (data) {
$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
}
});
} else if (jQuery.ui.autocomplete !== undefined) {
$(data.fake_input).autocomplete(autocomplete_options);
$(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
return false;
});
}
} else {
// if a user tabs out of the field, create a new tag
// this is only available if autocomplete is not used.
$(data.fake_input).bind('blur',data,function(event) {
var d = $(this).attr('data-default');
if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) {
if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
} else {
$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
$(event.data.fake_input).css('color',settings.placeholderColor);
}
return false;
});
}
// if user types a comma, create a new tag
$(data.fake_input).bind('keypress',data,function(event) {
if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
event.preventDefault();
if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
$(event.data.fake_input).resetAutosize(settings);
return false;
} else if (event.data.autosize) {
$(event.data.fake_input).doAutosize(settings);
}
});
//Delete last tag on backspace
data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
{
if(event.keyCode == 8 && $(this).val() == '')
{
event.preventDefault();
var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
var id = $(this).attr('id').replace(/_tag$/, '');
last_tag = last_tag.replace(/[\s\u00a0]+x$/, '');
$('#' + id).removeTag(escape(last_tag));
$(this).trigger('focus');
}
});
$(data.fake_input).blur();
//Removes the not_valid class when user changes the value of the fake input
if(data.unique) {
$(data.fake_input).keydown(function(event){
if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
$(this).removeClass('not_valid');
}
});
}
} // if settings.interactive
});
return this;
};
$.fn.tagsInput.updateTagsField = function(obj,tagslist) {
var id = $(obj).attr('id');
$(obj).val(tagslist.join(delimiter[id]));
};
$.fn.tagsInput.importTags = function(obj,val) {
$(obj).val('');
var id = $(obj).attr('id');
var tags = val.split(delimiter[id]);
for (i=0; i<tags.length; i++) {
$(obj).addTag(tags[i],{focus:false,callback:false});
}
if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
{
var f = tags_callbacks[id]['onChange'];
f.call(obj, obj, tags[i]);
}
};
})(jQuery);

View File

@ -0,0 +1,11 @@
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);

View File

@ -0,0 +1,123 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
//
// Color Swatches
// --------------------------------------------------
@turquoise: #1abc9c;
@green-sea: #16a085;
@emerland: #2ecc71;
@nephritis: #27ae60;
@peter-river: #3498db;
@belize-hole: #2980b9;
@amethyst: #9b59b6;
@wisteria: #8e44ad;
@wet-asphalt: #34495e;
@midnight-blue: #2c3e50;
@sun-flower: #f1c40f;
@orange: #f39c12;
@carrot: #e67e22;
@pumpkin: #d35400;
@alizarin: #e74c3c;
@pomegranate: #c0392b;
@clouds: #ecf0f1;
@silver: #bdc3c7;
@concrete: #95a5a6;
@asbestos: #7f8c8d;
// Main Colors
// -------------------------
@base: @wet-asphalt;
@firm: @turquoise;
@gray: @concrete;
@lightgray: @silver;
@inverse: white;
@success: @emerland;
@danger: @alizarin;
@warning: @sun-flower;
@info: @peter-river;
@link-color: @green-sea;
@link-hover-color: @turquoise;
// Typography
// -------------------------
@base-font-family: "Lato", sans-serif;
@base-font-size: 14px;
@base-line-height: 1.231;
@h1: @base-font-size * 4.429; /* 62px */
@h2: @base-font-size * 3.714; /* 52px */
@h3: @base-font-size * 2.857; /* 40px */
@h4: @base-font-size * 2.071; /* 29px */
@h5: @base-font-size * 2; /* 28px */
@h6: @base-font-size * 1.714; /* 24px */
// Icons
@icon-normal: 16px;
@icon-medium: 18px;
@icon-large: 32px;
// Inputs
// -------------------------
@input-border-radius: 6px;
// Pagination
// -------------------------
@pagination-color: mix(@base, white, 20%);
// Pager
// -------------------------
@pager-padding: 9px 15px 10px;
// Buttons
@button-text: @inverse;
@button-hover: mix(@lightgray, white, 80%);
@button-active: mix(@lightgray, black, 85%);
@button-primary-hover: mix(@firm, white, 80%);
@button-primary-active: mix(@firm, black, 85%);
@button-info-hover: mix(@info, white, 80%);
@button-info-active: mix(@info, black, 85%);
@button-success-hover: mix(@success, white, 80%);
@button-success-active: mix(@success, black, 85%);
@button-danger-hover: mix(@danger, white, 80%);
@button-danger-active: mix(@danger, black, 85%);
@button-warning-hover: overlay(@warning, darken(white, 37.5%));
@button-warning-active: mix(@warning, black, 85%);
@button-inverse-hover: overlay(@base, darken(white, 37.5%));
@button-inverse-active: mix(@base, black, 85%);
// Navbar
// -------------------------
@navbar-link-space: 20px;
@navbar-sublink-space: 9px;
// Dropdown Menu
// -------------------------
@dropdown-background: mix(@inverse, @base, 94%);
// Progress/slider
// -------------------------
@progress-height: 12px;
// Switch
// -------------------------
@switch-border-radius: 30px;
@switch-width: 80px;

View File

@ -0,0 +1,40 @@
// Flat UI main stylesheet that aggregates all modules
// Loading custom fonts
//@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
@import "icon-font";
// Loading config with variables (changing them leads to changing a color scheme)
@import "config";
// Utility mixins for greater good
@import "mixins";
// Modules
//@import "modules/demo";
//@import "modules/type";
//@import "modules/buttons";
@import "modules/caret";
//@import "modules/navbar";
@import "modules/navbar-custom";
@import "modules/select";
//@import "modules/input";
@import "modules/checkbox-and-radio";
//@import "modules/tagsinput";
//@import "modules/progress";
//@import "modules/ui-slider";
//@import "modules/pager";
//@import "modules/pagination";
//@import "modules/tooltip";
@import "modules/dropdown";
//@import "modules/switch";
//@import "modules/share";
//@import "modules/palette";
//@import "modules/tile";
//@import "modules/todo";
//@import "modules/footer";
//@import "modules/video";
//@import "modules/login";
// Spaces
@import "spaces";

View File

@ -0,0 +1,128 @@
@font-face {
font-family: 'Flat-UI-Icons';
src:url('../fonts/Flat-UI-Icons.eot');
src:url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'),
url('../fonts/Flat-UI-Icons.woff') format('woff'),
url('../fonts/Flat-UI-Icons.ttf') format('truetype'),
url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="fui-"] {
*/
.fui-arrow-right, .fui-arrow-left, .fui-cmd, .fui-check-inverted, .fui-heart, .fui-location, .fui-plus, .fui-check, .fui-cross, .fui-list, .fui-new, .fui-video, .fui-photo, .fui-volume, .fui-time, .fui-eye, .fui-chat, .fui-search, .fui-user, .fui-mail, .fui-lock, .fui-gear, .fui-radio-unchecked, .fui-radio-checked, .fui-checkbox-unchecked, .fui-checkbox-checked, .fui-calendar-solid, .fui-pause, .fui-play, .fui-check-inverted-2 {
display: inline-block;
font-family: 'Flat-UI-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.fui-arrow-right:before {
content: "\e02c";
}
.fui-arrow-left:before {
content: "\e02d";
}
.fui-cmd:before {
content: "\e02f";
}
.fui-check-inverted:before {
content: "\e006";
}
.fui-heart:before {
content: "\e007";
}
.fui-location:before {
content: "\e008";
}
.fui-plus:before {
content: "\e009";
}
.fui-check:before {
content: "\e00a";
}
.fui-cross:before {
content: "\e00b";
}
.fui-list:before {
content: "\e00c";
}
.fui-new:before {
content: "\e00d";
}
.fui-video:before {
content: "\e00e";
}
.fui-photo:before {
content: "\e00f";
}
.fui-volume:before {
content: "\e010";
}
.fui-time:before {
content: "\e011";
}
.fui-eye:before {
content: "\e012";
}
.fui-chat:before {
content: "\e013";
}
.fui-search:before {
content: "\e01c";
}
.fui-user:before {
content: "\e01d";
}
.fui-mail:before {
content: "\e01e";
}
.fui-lock:before {
content: "\e01f";
}
.fui-gear:before {
content: "\e024";
}
.fui-radio-unchecked:before {
content: "\e02b";
}
.fui-radio-checked:before {
content: "\e032";
}
.fui-checkbox-unchecked:before {
content: "\e033";
}
.fui-checkbox-checked:before {
content: "\e034";
}
.fui-calendar-solid:before {
content: "\e022";
}
.fui-pause:before {
content: "\e03b";
}
.fui-play:before {
content: "\e03c";
}
.fui-check-inverted-2:before {
content: "\e000";
}

View File

@ -0,0 +1,219 @@
//
// Mixins
// --------------------------------------------------
.animation(@properties) {
-webkit-animation: @properties;
-moz-animation: @properties;
-o-animation: @properties;
animation: @properties;
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-sizing(@boxmodel: border-box) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
.box-shadow(@properties) {
-webkit-box-shadow: @properties;
-moz-box-shadow: @properties;
box-shadow: @properties;
}
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
.opacity(@value) {
opacity: @value / 100;
filter: ~"alpha(opacity=@{value})";
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
.placeholder-height(@height) {
&:-moz-placeholder {
line-height: @height;
}
&::-webkit-input-placeholder {
line-height: @height;
}
&.placeholder {
line-height: @height;
}
}
.mask(...) {
-webkit-mask: @arguments;
mask: @arguments;
}
.placeholder-color(@color) {
&:-moz-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
&.placeholder {
color: @color;
}
}
.transition(@properties) {
-webkit-transition: @properties;
-moz-transition: @properties;
-o-transition: @properties;
transition: @properties;
-webkit-backface-visibility: hidden;
}
.transform(@properties) {
-webkit-transform: @properties;
-moz-transform: @properties;
-ms-transform: @properties;
-o-transform: @properties;
transform: @properties;
}
.vertical-gradient(@from, @to) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @from), color-stop(100%, @to));
background: -webkit-linear-gradient(top, @from, @to);
background: -moz-linear-gradient(top, @from, @to);
background: -ms-linear-gradient(top, @from, @to);
background: -o-linear-gradient(top, @from, @to);
background: linear-gradient(to bottom, @from, @to);
}
.selection(@color) {
&::selection {
background: @color;
}
&::-moz-selection {
background: @color;
}
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
.dropdown-arrow(@color: @base, @top: 5px, @left: 15px, @size: 9px) {
&:before {
content: "";
border-style: solid;
border-width: 0 @size @size @size;
border-color: transparent transparent @color transparent;
height: 0;
position: absolute;
left: @left;
top: @top;
width: 0;
// Make corners smooth
-webkit-transform: rotate(360deg);
}
}
.drop-ie-gradient {
filter: unquote("progid:DXImageTransform.Microsoft.gradient(enabled = false)");
}
.swap-button-color(@color, @hover, @active) {
background-color: @color;
&:hover,
&:focus,
.btn-group:focus &.dropdown-toggle {
background-color: @hover;
}
&:active,
.btn-group.open &.dropdown-toggle,
&.active {
background-color: @active;
}
}
.dropdown-arrow-inverse {
border-bottom-color: @base !important;
border-top-color: @base !important;
}
.input-states(@color) {
border-color: @color;
color: @color;
.box-shadow(none);
&:focus {
.box-shadow(none);
}
}
.swap-pagination-color(@color, @hover, @active) {
ul {
background-color: @color;
li {
&.previous {
> a {
border-right-color: mix(@color, white, 66%);
}
}
> a, > span {
border-left-color: mix(@color, white, 66%);
&:hover, &:focus {
background-color: @hover;
}
&:active {
background-color: @active;
}
}
&.active {
> a, > span {
background-color: @active;
}
}
&.pagination-dropdown.dropup {
.dropdown-arrow {
border-top-color: @color;
}
}
}
}
}
// Color swatches grid
.calc-color(@first-color, @second-color) {
.palette-@{first-color} {
background-color: ~"@{@{first-color}}";
}
.palette-@{second-color} {
background-color: ~"@{@{second-color}}";
}
}

View File

@ -0,0 +1,182 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
.btn,
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: @base-font-size * 1.071; /* 15px */
font-weight: 500;
}
.btn {
border: none;
background: @lightgray;
color: @button-text;
padding: 9px 12px 10px;
line-height: 22px;
text-decoration: none;
text-shadow: none;
.border-radius(6px);
.box-shadow(none);
.transition(0.25s);
// Alternate states
// --------------------------------------------------
&:hover,
&:focus,
.btn-group:focus &.dropdown-toggle {
background-color: @button-hover;
color: @button-text;
outline: none;
.transition(0.25s);
}
// Active State
&:active,
.btn-group.open &.dropdown-toggle,
&.active {
background-color: @button-active;
color: fade(@button-text, 75%);
.box-shadow(none);
}
// Disabled state
&.disabled,
&[disabled] {
background-color: @lightgray;
color: fade(@button-text, 75%);
.box-shadow(none);
.opacity(70);
}
// Button sizes
// --------------------------------------------------
// Large
&.btn-large {
font-size: @base-font-size * 1.214; /* 17px */
line-height: 20px;
padding: 12px 18px 13px;
> [class^="fui-"] {
top: 0;
&.pull-right {
margin-right: -2px;
}
}
}
// Set the backgrounds
// -------------------------
&.btn-primary {
.swap-button-color(@firm, @button-primary-hover, @button-primary-active);
}
&.btn-info {
.swap-button-color(@info, @button-info-hover, @button-info-active);
}
&.btn-danger {
.swap-button-color(@danger, @button-danger-hover, @button-danger-active);
}
&.btn-success {
.swap-button-color(@success, @button-success-hover, @button-success-active);
}
&.btn-warning {
.swap-button-color(@warning, @button-warning-hover, @button-warning-active);
}
&.btn-inverse {
.swap-button-color(@base, @button-inverse-hover, @button-inverse-active);
}
// Button icon
// --------------------------------------------------
> [class^="fui-"] {
margin: 0 4px;
position: relative;
top: 1px;
vertical-align: top;
.inline-block();
&.pull-right {
margin-right: 0px;
}
}
}
// Other button locations
// Button with icon inside
.btn-toolbar .btn {
&.active {
color: @button-text;
}
&:first-child {
.border-radius(6px 0 0 6px);
}
&:last-child {
.border-radius(0 6px 6px 0);
}
> [class^="fui-"] {
font-size: @icon-normal;
top: 0;
}
}
// Button tip
.btn-tip {
font-weight: 300;
padding-left: 10px;
}
// BUTTON GROUP
// ----------------------
.btn-group {
> .btn {
border-radius: 0;
text-align: center;
&:active,
&.active {
& + .btn {
border-left-color: transparent;
}
}
&:first-of-type {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
&:last-of-type {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
& + .btn {
margin-left: 0;
}
& + .dropdown-toggle {
border-left: 2px solid fade(@base, 15%);
padding-left: 13px;
padding-right: 13px;
.box-shadow(none);
.caret {
margin-left: 3px;
margin-right: 3px;
}
}
&.btn-huge + .dropdown-toggle {
.caret {
margin-left: 7px;
margin-right: 7px;
}
}
&.btn-small + .dropdown-toggle {
.caret {
margin-left: 0;
margin-right: 0;
}
}
}
}

View File

@ -0,0 +1,37 @@
//
// Caret
// --------------------------------------------------
.caret(@color: @base) {
border-left-width: 6px;
border-right-width: 6px;
border-top-width: 8px;
border-bottom-color: @color;
border-style: solid;
border-bottom-style: none;
border-top-color: @color;
.transition(.25s);
}
.caret {
.caret();
}
.dropup .caret,
.dropup .btn-large .caret,
.navbar-fixed-bottom .dropdown .caret {
border-bottom-width: 8px;
}
.btn-mini .caret,
.btn-small .caret,
.btn-large .caret {
margin-top: 7px;
}
.btn-large .caret {
border-top-width: 8px;
border-right-width: 6px;
border-left-width: 6px;
}

View File

@ -0,0 +1,98 @@
//
// Checkbox & Radio
// --------------------------------------------------
.checkbox,
.radio {
margin-bottom: 12px;
padding-left: 32px;
position: relative;
.transition(color .25s linear);
input {
outline: none !important;
display: none;
}
// Replace icons
// --------------------------------------------------
.icons {
color: @lightgray;
display: block;
height: 20px;
left: 0;
position: absolute;
top: 0;
width: 20px;
text-align: center;
line-height: 20px;
font-size: 20px;
.transition(color .25s linear);
.first-icon-icon,
.second-icon {
position: absolute;
left: 0;
top: 0;
.opacity(100);
}
.second-icon {
.opacity(0);
}
}
// Alternate States
// --------------------------------------------------
// Hover State
&:hover {
.first-icon {
.opacity(0);
}
.second-icon {
.opacity(100);
}
}
// Checked State
&.checked {
color: @link-color;
.icons {
color: @firm;
}
.first-icon {
.opacity(0);
}
.second-icon {
.opacity(100);
}
}
// Disabled state
&.disabled {
cursor: default;
color: mix(@lightgray, white, 38%);
.icons {
color: mix(@lightgray, white, 38%);
}
.first-icon {
.opacity(100);
}
.second-icon {
.opacity(0);
}
&.checked {
.icons {
color: mix(@lightgray, white, 38%);
}
.first-icon {
.opacity(0);
}
.second-icon {
.opacity(100);
}
}
}
}

View File

@ -0,0 +1,238 @@
// For demo purposes only
.demo-headline {
padding: 73px 0 110px;
text-align: center;
}
.demo-logo {
font-size: 90px;
font-weight: 900;
letter-spacing: -2px;
line-height: 100px;
.logo {
background: url(../images/demo/logo-mask.png) center 0 no-repeat;
background-size: 256px 186px;
height: 186px;
margin: 0 auto 26px;
overflow: hidden;
text-indent: -9999em;
width: 256px;
}
small {
color: fadeout(@base, 70%);
display: block;
font-size: 22px;
font-weight: 700;
letter-spacing: -1px;
padding-top: 5px;
}
}
// Panels delimiter
.demo-row {
margin-bottom: 20px
}
.demo-panel-title {
margin-bottom: 20px;
padding-top: 20px;
small {
color: mix(@base, @inverse, 66%);
font-size: inherit;
font-weight: 400;
}
}
// Shift blocks to fit design
.demo-navigation {
margin-bottom: -4px;
margin-top: -10px;
}
.demo-pager {
margin-top: -10px;
}
.demo-tooltips {
height: 126px;
// Needed just for the demo. Don't use it in producion ;)
.tooltip {
left: -8px !important;
position: relative !important;
top: -8px !important;
}
}
.demo-headings {
margin-bottom: 12px;
}
.demo-tiles {
margin-bottom: 46px
}
.demo-icons {
font-size: 32px;
margin-left: -15px;
.demo-content {
margin: 0 0 0 -36px;
> span {
display: inline-block;
margin: 0 0 32px 36px;
width: 24px;
font-size: 24px;
}
}
}
.demo-icons-tooltip {
bottom: 0;
color: mix(@base, @inverse, 30%);
font-size: 12px;
left: 100%;
margin-left: 0 !important;
position: absolute;
width: 80px;
}
// Illustration Icons
// --------------------------------------------------
.demo-illustrations {
margin-top: 40px;
.clearfix();
.demo-content {
margin: 0 0 0 -40px;
padding-top: 20px;
> div {
float: left;
width: 100px;
height: 100px;
margin: 0 0 80px 40px;
text-align: center;
}
}
img {
display: inline-block;
max-height: 100px;
max-width: 100px;
vertical-align: baseline;
}
}
.demo-samples {
margin-bottom: 46px;
}
.demo-video {
padding-top: 95px;
.border-radius(6px);
}
.demo-download-section {
float: none;
margin: 0 auto;
padding: 60px 0 90px 20px;
text-align: center;
[class*='fui-'] {
margin: 3px 0 -3px;
}
}
.demo-download {
background-color: mix(@base, @inverse, 10%);
height: 120px;
margin: 0 auto 32px;
padding: 40px 28px 30px 32px;
text-align: center;
width: 130px;
.border-radius(50%);
img {
height: 104px;
width: 82px;
}
}
.demo-download-text {
font-size: 15px;
padding: 20px 0;
text-align: center;
}
.demo-text-box {
a:hover {
color: @firm;
}
}
.demo-browser {
background: mix(@base, black, 85%) url(../images/demo/browser.png) 0 0 no-repeat;
background-size: 659px 42px;
color: @inverse;
margin: 0 41px 140px 0;
padding-top: 42px;
.border-radius(0 0 6px 6px);
}
.demo-browser-side {
float: left;
padding: 22px 20px;
width: 111px;
> h5 {
margin-bottom: 3px;
text-transform: none;
}
> h6 {
font-size: 11px;
font-weight: 300;
line-height: 18px;
margin-top: 3px;
text-transform: none;
}
}
.demo-browser-author {
background: url(../images/demo/browser-author.jpg) center center no-repeat;
border: 3px solid @inverse;
display: block;
height: 84px;
margin: 0 auto;
width: 84px;
.border-radius(50%);
}
.demo-browser-action {
padding: 30px 0 12px;
> .btn {
padding: 9px 0 10px 11px !important;
text-align: left;
.border-radius(3px);
&:before {
color: @inverse;
content: '\e009';
font-size: 16px;
font-family: 'Flat-UI-Icons';
font-weight: 300;
margin-right: 12px;
position: relative;
top: 1px;
-webkit-font-smoothing: antialiased;
}
}
}
.demo-browser-content {
background-color: @base;
overflow: hidden;
padding: 21px 0 0 20px;
.border-radius(0 0 6px);
> img {
border: 6px solid @inverse;
float: left;
margin: 0 15px 20px 0;
width: 134px;
}
}
// Serving 2x images
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.logo {
background-image: url(../images/demo/logo-mask-2x.png)
}
.demo-browser {
background-image: url(../images/demo/browser-2x.png)
}
}

View File

@ -0,0 +1,225 @@
//
// Dropdown
// --------------------------------------------------
.dropdown-menu {
background-color: @dropdown-background;
border: none;
display: block;
margin-top: 8px;
opacity: 0;
padding: 0;
visibility: hidden;
width: 100%;
.box-shadow(none);
.transition(.25s);
&.typeahead {
display: none;
opacity: 1;
visibility: visible;
width: auto;
margin-top: 2px;
}
// Opened state
.open > & {
margin-top: 18px;
opacity: 1;
visibility: visible;
}
li {
&:first-child {
dt + a {
border-radius: 0;
}
> a {
border-radius: 6px 6px 0 0;
padding-top: 8px;
}
}
&:last-child {
> a {
border-radius: 0 0 6px 6px;
padding-bottom: 10px;
}
}
&.active,
&.selected {
> a,
> a.highlighted {
background: @firm;
color: @inverse;
&:hover,
&:focus {
background: mix(@firm, black, 85%);
color: @inverse;
}
}
}
> a {
color: fade(@base, 75%);
padding: 6px 15px 8px;
text-decoration: none;
.clearfix();
.transition(background-color 0.25s);
&:hover,
&:active,
&:focus {
background: mix(@inverse, @base, 85%);
color: inherit;
outline: none;
}
&.highlighted {
background: mix(@inverse, @base, 73.5%);
color: @inverse;
&:hover,
&:focus {
background: mix(@inverse, @base, 66%);
color: @inverse;
}
}
&:before {
float: right;
margin-top: 3px;
}
}
// Submenu title
dt {
font-weight: 300;
margin-bottom: 3px;
margin-top: 12px;
padding: 0 15px;
}
}
}
// Dropdown expands to top
.dropup,
.navbar-fixed-bottom .dropdown {
.dropdown-menu {
margin-bottom: 8px;
}
.dropdown-arrow {
border-bottom: none;
border-top: 8px outset mix(@inverse, @base, 94%);
bottom: 100%;
top: auto;
}
}
// Second level nav
.navbar-fixed-bottom .nav > li > ul:before {
border-bottom: none;
border-top: 9px outset @base;
bottom: 4px;
top: auto;
}
.open {
&.dropup {
> .dropdown-menu {
margin-bottom: 18px;
}
> .dropdown-arrow {
margin-bottom: 10px;
&.dropdown-arrow-inverse {
border-top-color: @base;
}
}
}
> .dropdown-arrow {
margin-top: 9px;
opacity: 1;
}
}
// Arrows
// --------------------------------------------------
.dropdown-arrow {
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent mix(@inverse, @base, 94%) transparent;
height: 0;
margin-top: 0;
opacity: 0;
position: absolute;
right: 13px;
top: 100%;
width: 0;
z-index: 10;
-webkit-transform: rotate(360deg); // Make corners smooth
.transition(.25s);
}
// Alternate Color
// --------------------------------------------------
.dropdown-inverse {
background-color: @base;
color: mix(@inverse, black, 80%);
padding: 4px 0 6px;
li {
margin: 0 4px -2px;
&:first-child,
&:last-child {
> a {
border-radius: 2px;
padding-bottom: 7px;
padding-top: 5px;
}
dt + a {
border-radius: 2px;
}
}
&.active,
&.selected {
> a {
background: @firm;
color: @inverse;
position: relative;
z-index: 1;
}
}
dt {
padding-left: 11px;
padding-right: 11px;
}
.divider {
margin-left: 11px;
margin-right: 11px;
}
> a {
border-radius: 2px;
color: @inverse;
padding: 5px 11px 7px;
&:hover,
&:active,
&:focus {
background: mix(@base, black, 85%);
}
&.highlighted {
background: mix(@base, @inverse, 85%);
&:hover,
&:focus {
background: mix(@base, @inverse, 75%);
}
}
}
.divider {
background-color: mix(@base, white, 85%);
border-bottom-color: mix(@base, white, 85%);
}
}
}

View File

@ -0,0 +1,72 @@
//
// Footer
// --------------------------------------------------
footer {
background-color: mix(@base, @inverse, 9%);
color: mix(@base, @inverse, 34%);
font-size: 15px;
padding: 0;
a {
color: mix(@base, @inverse, 50%);
font-weight: 700;
}
p {
font-size: 15px;
line-height: 20px;
}
}
.footer-title {
margin: 0 0 22px;
padding-top: 21px;
}
.footer-brand {
display: block;
margin-bottom: 26px;
width: 220px;
img {
width: 216px;
}
}
// FOOTER BANNER
// ----------------------
.footer-banner {
background-color: @firm;
color: mix(@firm, @inverse, 20%);
margin-left: 42px;
min-height: 286px;
padding: 0 30px 30px;
.footer-title {
color: @inverse;
}
a {
color: lighten(@firm, 42%);
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
ul {
list-style-type: none;
margin: 0 0 26px;
li {
border-top: 1px solid lighten(@firm, 2%);
line-height: 19px;
padding: 6px 0;
&:first-child {
border-top: none;
padding-top: 1px;
}
}
}
}

View File

@ -0,0 +1,175 @@
//
// Inputs
// --------------------------------------------------
// Text fields
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border: 2px solid @lightgray;
color: @base;
font-family: @base-font-family;
font-size: @base-font-size;
padding: 8px 5px;
height: 21px;
text-indent: 6px;
-webkit-appearance: none;
.border-radius(6px);
.box-shadow(none);
.placeholder-color(desaturate(lighten(@base, 45%), 15%));
.transition(~"border .25s linear, color .25s linear");
// Alternate state
// --------------------------------------------------
.control-group.focus &,
&:focus {
border-color: @firm;
.box-shadow(none);
}
.row-fluid & {
height: 41px;
width: 100%;
}
// Flat (without border)
&.flat {
border-color: transparent;
&:hover {
border-color: @lightgray;
}
&:focus {
border-color: @firm;
}
}
// Alternate Colors
// --------------------------------------------------
.control-group.error & { .input-states(@danger) }
.control-group.success & { .input-states(@success) }
.control-group.warning & { .input-states(@warning) }
.control-group.info & { .input-states(@info) }
.control-group & { margin-bottom: 0; }
}
// INPUT ICONS
// ----------------------
.control-group {
position: relative;
> .input-icon {
position: absolute;
top: 2px;
right: 2px;
line-height: 37px;
vertical-align: middle;
font-size: @base-font-size * 1.428; /* 20px */
color: desaturate(lighten(@base, 45%), 15%);
background-color: #ffffff;
padding: 0 10px;
.border-radius(6px);
}
input:focus + .input-icon { color: @base; }
// Icon Sizes
// --------------------------------------------------
// Huge
&.huge {
> .input-icon {
line-height: 49px;
}
}
//Large
&.large {
> .input-icon {
line-height: 41px;
}
}
// Small
&.small {
> .input-icon {
font-size: @base-font-size * 1.142; /* 16px */
line-height: 30px;
}
}
// Icon Colors
// --------------------------------------------------
&.success {
> .input-icon, input + .input-icon {
color: @success;
}
}
&.warning {
> .input-icon, input + .input-icon {
color: @warning;
}
}
&.error {
> .input-icon, input + .input-icon {
color: @danger;
}
}
&.disabled {
> .input-icon, input + .input-icon {
color: mix(@gray, white, 40%);
background-color: mix(@gray, white, 10%);
}
}
}
// Disabled state
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
background-color: mix(@gray, white, 10%);
border-color: mix(@gray, white, 40%);
color: mix(@gray, white, 40%);
cursor: default;
}
// Text field grids
input,
textarea,
.uneditable-input {
width: 192px;
}
// Textarea
textarea {
height: auto;
font-size: @base-font-size * 1.071; /* 15px */
line-height: 24px;
padding: 5px 11px;
text-indent: 0;
.row-fluid & {
height: auto;
width: 100% !important;
}
}
textarea[class*="span"] {
width: 100% !important;
.box-sizing(border-box);
}

View File

@ -0,0 +1,113 @@
//
// Login screen
// --------------------------------------------------
// Module color variable
@form-color: mix(@base, @inverse, 9%);
.login {
background: url(../images/login/imac.png) 0 0 no-repeat;
background-size: 940px 778px;
color: @inverse;
margin-bottom: 77px;
padding: 38px 38px 267px;
position: relative;
}
.login-screen {
background-color: @firm;
min-height: 317px;
padding: 123px 199px 33px 306px;
}
.login-icon {
left: 200px;
position: absolute;
top: 160px;
width: 96px;
> img {
display: block;
margin-bottom: 6px;
width: 100%;
}
> h4 {
font-size: 17px;
font-weight: 200;
line-height: 34px;
.opacity(95);
small {
color: inherit;
display: block;
font-size: inherit;
font-weight: 700;
}
}
}
// LOGIN FORM
// -----------
.login-form {
background-color: @form-color;
padding: 24px 23px 20px;
position: relative;
.border-radius(6px);
// Ear
&:before {
content: '';
border-style: solid;
border-width: 12px 12px 12px 0;
border-color: transparent @form-color transparent transparent;
height: 0;
position: absolute;
left: -12px;
top: 35px;
width: 0;
-webkit-transform: rotate(360deg); // Make corners smooth
}
.control-group {
margin-bottom: 6px;
position: relative;
}
.login-field {
border-color: transparent;
font-size: 17px;
padding-bottom: 11px;
padding-top: 11px;
text-indent: 3px;
width: 299px;
margin-bottom: 10px !important;
&:focus {
& + .login-field-icon {
color: @firm;
}
}
}
.login-field-icon {
color: mix(@gray, @inverse, 60%);
font-size: 16px;
position: absolute;
right: 13px;
top: 14px;
.transition(.25s);
}
}
.login-link {
color: mix(@gray, @inverse, 60%);
display: block;
font-size: 13px;
margin-top: 15px;
text-align: center;
}
// Retina support
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.login {
background-image: url(../images/login/imac-2x.png);
}
}

View File

@ -0,0 +1,235 @@
//
// Navbar
// --------------------------------------------------
.navbar {
.nav {
// First level nav
> li {
&:hover {
> ul {
opacity: 1;
top: 100%;
visibility: visible;
z-index: 100;
-webkit-transform: scale(1, 1);
// Show on hover
display: block\9;
}
}
// Second level nav
> ul {
padding-top: 13px;
top: 80%;
.dropdown-arrow(@base);
// Third level nav
li {
&:hover {
ul {
opacity: 1;
-webkit-transform: scale(1, 1);
visibility: visible;
display: block\9;
}
}
ul {
left: 100%;
}
}
}
}
// Sub menu
ul {
border-radius: 4px;
left: 0;
list-style-type: none;
margin-left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 234px;
z-index: -100;
// Trigger transform to hide nav completely without 'ghost' bug (when switching from :hover to initial)
-webkit-transform: scale(1, 0.99);
-webkit-transform-origin: 0 0;
// Don't show it at all by default since IE doesn't get modern transitions
visibility: hidden;
.transition(0.3s ease-out);
// Deep level sub menu
ul {
left: 95%;
padding-left: 5px;
}
// Sub menu item
li {
background-color: @base;
padding: 0 3px 3px;
position: relative;
&:first-child {
border-radius: 6px 6px 0 0;
padding-top: 3px;
}
&:last-child {
border-radius: 0 0 6px 6px;
}
&.active {
> a,
> a:hover,
> a:focus {
background-color: @firm;
color: @inverse;
padding-left: @navbar-sublink-space;
padding-right: @navbar-sublink-space;
}
& + li {
> a {
padding-left: @navbar-sublink-space;
padding-right: @navbar-sublink-space;
}
}
}
}
// Sub menu link
a {
border-radius: 2px;
color: @inverse;
display: block;
font-size: @base-font-size;
padding: 6px @navbar-sublink-space;
text-decoration: none;
&:hover {
background-color: @firm;
}
}
}
}
// Expand/collapse button
.btn-navbar {
background: none;
border: none;
color: @base;
margin: 21px 15px 17px;
text-shadow: none;
.box-shadow(none);
&:hover, &:focus {
background: none;
color: @firm;
}
&:before {
content: "\e00c";
font-family: "Flat-UI-Icons";
font-size: @base-font-size * 1.571;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.icon-bar {
display: none;
}
}
// Inverse navbar dropdown styling
&.navbar-inverse {
.nav li.dropdown {
&.open {
> .dropdown-toggle {
background-color: @firm;
border-bottom-color: mix(@firm, black, 85%);
color: @inverse;
.caret {
border-bottom-color: @inverse !important;
border-top-color: @inverse !important;
}
}
}
}
.nav {
li {
a {
b.caret {
color: white !important;
}
}
}
}
}
// Default navbar dropdown styling
.nav li.dropdown {
&.open {
> .dropdown-toggle {
background: none;
color: @firm;
.caret {
border-bottom-color: @firm !important;
border-top-color: @firm !important;
}
}
.dropdown-menu {
opacity: 1;
top: 100%;
visibility: visible;
z-index: 1000;
-webkit-transform: none;
}
}
> .dropdown-toggle {
outline: none;
&:hover, &:focus {
.caret {
border-bottom-color: @firm;
border-top-color: @firm;
}
}
.caret {
color: white !important;
border-left-width: 6px;
border-right-width: 6px;
border-top-width: 8px;
border-bottom-color: lighten(@base, 13%);
border-top-color: lighten(@base, 13%);
margin-left: 10px;
margin-top: 7px;
}
}
.dropdown-menu {
background-color: @base;
opacity: 0;
padding: 0;
visibility: hidden;
&:before {
display: none;
}
&:after {
border-bottom-color: @base;
}
> li {
> a {
border-radius: 3px;
color: @inverse;
padding: 6px 8px 8px;
}
}
.divider {
background-color: mix(@base, black, 85%);
border-bottom: none;
margin: 2px 0 5px;
padding: 0;
height: 2px;
}
}
}
}

View File

@ -0,0 +1,416 @@
//
// Navbar
// --------------------------------------------------
.navbar {
font-size: @base-font-size * 1.142; /* 16px */
.brand {
border-radius: 6px 0 0 6px;
color: mix(@base, white, 85%);
font-size: @base-font-size * 1.714; /* 24px */
font-weight: 700;
margin-left: 0;
padding: 23px 28px 24px 32px;
text-shadow: none;
&:hover, &:focus {
color: @firm;
}
&[class*="fui-"] {
font-weight: normal;
}
}
.nav {
margin-right: 0;
// First level nav
> li {
position: relative;
&:hover {
> ul {
opacity: 1;
top: 100%;
visibility: visible;
z-index: 100;
-webkit-transform: scale(1, 1);
// Show on hover
display: block\9;
}
}
&.active {
> a,
> a:hover,
> a:focus {
background: none;
color: @firm;
.box-shadow(none);
}
}
// Second level nav
> ul {
padding-top: 13px;
top: 80%;
.dropdown-arrow(@base);
// Third level nav
li {
&:hover {
ul {
opacity: 1;
-webkit-transform: scale(1, 1);
visibility: visible;
display: block\9;
}
}
ul {
left: 100%;
}
}
}
// First level link
> a {
color: mix(@base, white, 85%);
font-weight: 700;
font-size: @base-font-size * 1.071; /* 15px */
padding: 29px @navbar-link-space 27px;
text-shadow: none;
.transition(~"background-color .25s, color .25s, border-bottom-color .25s");
&:hover, &:focus {
color: @firm;
}
&[class*="fui-"] {
font-size: 24px;
font-weight: normal;
}
> [class*="fui-"] {
font-size: 24px;
margin: -4px 0 0;
position: relative;
top: 4px;
}
> [class*="fui-"] + * {
margin-left: 12px;
}
}
}
> li:first-child {
> a {
.border-radius(0 0 0 6px);
}
}
// Sub menu
ul {
border-radius: 4px;
left: 0;
list-style-type: none;
margin-left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 234px;
z-index: -100;
// Trigger transform to hide nav completely without 'ghost' bug (when switching from :hover to initial)
-webkit-transform: scale(1, 0.99);
-webkit-transform-origin: 0 0;
// Don't show it at all by default since IE doesn't get modern transitions
visibility: hidden;
.transition(0.3s ease-out);
// Deep level sub menu
ul {
left: 95%;
padding-left: 5px;
}
// Sub menu item
li {
background-color: @base;
padding: 0 3px 3px;
position: relative;
&:first-child {
border-radius: 6px 6px 0 0;
padding-top: 3px;
}
&:last-child {
border-radius: 0 0 6px 6px;
}
&.active {
> a,
> a:hover,
> a:focus {
background-color: @firm;
color: @inverse;
padding-left: @navbar-sublink-space;
padding-right: @navbar-sublink-space;
}
& + li {
> a {
padding-left: @navbar-sublink-space;
padding-right: @navbar-sublink-space;
}
}
}
}
// Sub menu link
a {
border-radius: 2px;
color: @inverse;
display: block;
font-size: @base-font-size;
padding: 6px @navbar-sublink-space;
text-decoration: none;
&:hover {
background-color: @firm;
}
}
}
}
// Expand/collapse button
.btn-navbar {
background: none;
border: none;
color: @base;
margin: 21px 15px 17px;
text-shadow: none;
.box-shadow(none);
&:hover, &:focus {
background: none;
color: @firm;
}
&:before {
content: "\e00c";
font-family: "Flat-UI-Icons";
font-size: @base-font-size * 1.571;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.icon-bar {
display: none;
}
}
}
.navbar-inner {
background: mix(@base, white, 9.5%);
border: none;
padding-left: 0;
padding-right: 0;
.border-radius(6px);
.drop-ie-gradient();
.box-shadow(none);
}
// Alternate Color
// --------------------------------------------------
.navbar-inverse {
font-size: @base-font-size * 1.214; /* 17px */
.navbar-inner {
background: @base;
.drop-ie-gradient();
}
.brand {
border-bottom: 2px solid mix(@base, black, 85%);
border-right: 2px solid mix(@base, black, 85%);
color: @inverse;
padding: 10px 28px 11px 32px;
}
.btn-navbar {
color: @inverse;
margin: 7px 10px;
}
.nav {
> li {
&:first-child {
&.active {
> a {
padding-left: @navbar-link-space;
}
}
> a {
border-left: none;
}
}
// Active item
&.active {
> a {
&, &:hover, &:focus {
background-color: @firm;
border-bottom-color: mix(@firm, black, 85%);
border-left: none;
color: @inverse;
padding-left: @navbar-link-space + 2;
.box-shadow(none);
}
}
& + li {
> a {
border-left: none;
padding-left: @navbar-link-space + 2;
}
}
}
// Link styling
> a {
font-size: @base-font-size * 1.143; /* 16px */
border-bottom: 2px solid mix(@base, black, 85%);
border-left: 2px solid mix(@base, black, 85%);
color: @inverse;
padding: 16px @navbar-link-space 15px;
}
}
}
// Round corders of the pull-right dropdown
.nav.pull-right > li {
> a {
border-radius: 0 6px 6px 0;
}
}
}
// Unread icon
.navbar-unread,
.navbar-new {
font-family: @base-font-family;
background-color: @firm;
border-radius: 50%;
color: @inverse;
font-size: 0;
font-weight: 700;
height: 6px;
line-height: @base-font-size;
position: absolute;
right: 12px;
text-align: center;
top: 28px;
width: 6px;
z-index: 10;
.active & {
background-color: @inverse;
display: none;
}
.navbar-inverse & {
top: 15px;
}
}
.navbar-new {
background-color: @danger;
font-size: 12px;
line-height: 17px;
height: 18px;
margin: -9px -1px;
min-width: 16px;
padding: 0 1px;
width: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// DROPDOWN LIST
// -----------
.navbar {
// Inverse navbar dropdown styling
&.navbar-inverse {
.nav li.dropdown {
&.open {
> .dropdown-toggle {
background-color: @firm;
border-bottom-color: mix(@firm, black, 85%);
color: @inverse;
.caret {
border-bottom-color: @inverse !important;
border-top-color: @inverse !important;
}
}
}
}
}
// Default navbar dropdown styling
.nav li.dropdown {
&.open {
> .dropdown-toggle {
background: none;
color: @firm;
.caret {
border-bottom-color: @firm !important;
border-top-color: @firm !important;
}
}
.dropdown-menu {
opacity: 1;
top: 100%;
visibility: visible;
z-index: 1000;
-webkit-transform: none;
}
}
> .dropdown-toggle {
outline: none;
&:hover, &:focus {
.caret {
border-bottom-color: @firm;
border-top-color: @firm;
}
}
.caret {
border-left-width: 6px;
border-right-width: 6px;
border-top-width: 8px;
border-bottom-color: lighten(@base, 13%);
border-top-color: lighten(@base, 13%);
margin-left: 10px;
margin-top: 7px;
}
}
.dropdown-menu {
background-color: @base;
opacity: 0;
padding: 0;
visibility: hidden;
&:before {
display: none;
}
&:after {
border-bottom-color: @base;
}
> li {
> a {
border-radius: 3px;
color: @inverse;
padding: 6px 8px 8px;
}
}
.divider {
background-color: mix(@base, black, 85%);
border-bottom: none;
margin: 2px 0 5px;
padding: 0;
height: 2px;
}
}
}
}

View File

@ -0,0 +1,54 @@
//
// Pager
// --------------------------------------------------
.pager {
background-color: @base;
border-radius: 6px;
color: @inverse;
font-size: 16px;
font-weight: 700;
.inline-block();
li {
&:first-child {
> a,
> span {
border-left: none;
.border-radius(6px 0 0 6px);
}
}
&.pager-center {
padding: @pager-padding;
padding-left: 0;
padding-right: 0;
.inline-block();
}
> a,
> span {
background: none;
border: none;
border-left: 2px solid mix(@base, black, 85%);
color: @inverse;
padding: @pager-padding;
text-decoration: none;
white-space: nowrap;
.border-radius(0 6px 6px 0);
&:hover, &:focus {
background-color: mix(@base, black, 85%);
}
&:active {
background-color: mix(@base, black, 85%);
}
// Add some spacing between the icon and text
[class*="fui-"] + span {
margin-left: 8px;
}
span + [class*="fui-"] {
margin-left: 8px;
}
}
}
}

View File

@ -0,0 +1,171 @@
//
// Pagination
// --------------------------------------------------
.pagination {
position: relative;
ul {
background: @pagination-color;
color: @inverse;
vertical-align: top;
.border-radius(6px);
.box-shadow(none);
li {
display: inline-block;
margin-right: -3px;
vertical-align: top;
// Pseudos and states
&.active {
> a, > span {
background-color: @firm;
color: @inverse;
}
&.previous,
&.next {
> a, > span {
margin: 0;
&, &:hover, &:focus {
background-color: @firm;
color: @inverse;
}
}
}
}
&:first-child {
.border-radius(6px 0 0 6px);
> a, > span {
.border-radius(6px 0 0 6px);
}
&.previous + li {
> a, > span {
border-left-width: 5px;
}
}
> a, > span {
border-left: none;
}
}
&:last-child {
margin-right: 0;
.border-radius(0 6px 6px 0);
> a, > span {
&, &:hover, &:focus {
.border-radius(0 6px 6px 0);
}
}
}
&.previous,
&.next {
> a, > span {
background: transparent;
border: none;
border-right: 2px solid mix(@pagination-color, white, 66%);
font-size: @base-font-size * 1.142; /* 16px */
margin: 0 9px 0 0;
padding: 12px 17px;
min-width: auto;
.border-radius(6px 0 0 6px);
.box-shadow(~"none !important");
&, &:hover, &:focus {
border-color: mix(@pagination-color, white, 66%) !important;
}
}
}
&.next {
margin-left: 9px;
> a, > span {
border-left: 2px solid mix(@pagination-color, white, 66%);
border-right: none;
margin: 0;
.border-radius(0 6px 6px 0);
}
}
&.active {
> a, > span {
background-color: @inverse;
border-color: @inverse;
border-width: 2px !important;
color: @pagination-color;
margin: 10px 5px 9px;
&:hover, &:focus {
background-color: @inverse;
border-color: @inverse;
color: @pagination-color;
.box-shadow(none);
}
}
&.previous,
&.next {
border-color: mix(@pagination-color, white, 66%);
}
&.previous {
margin-right: 6px;
}
}
// Link
> a, > span {
background: @inverse;
border: 5px solid @pagination-color;
color: @inverse;
line-height: 16px;
min-height: 17px;
min-width: auto;
outline: none;
padding: 0 4px;
margin: 7px 2px 6px;
text-align: center;
.border-radius(50px);
.transition(~"background 0.2s ease-out, border-color 0s ease-out, color 0.2s ease-out");
&:hover,
&:focus {
background-color: @firm;
border-color: @firm;
color: @inverse;
.transition(~"background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out");
}
&:active {
background-color: mix(@firm, black, 85%);
border-color: mix(@firm, black, 85%);
color: @inverse;
}
}
}
}
// Navigation buttons
> .btn {
&.previous,
&.next {
margin-right: 8px;
font-size: @base-font-size;
padding-left: 23px;
padding-right: 23px;
[class*="fui-"] {
font-size: @icon-normal;
margin-left: -2px;
margin-top: -2px;
}
}
&.next {
margin-left: 8px;
margin-right: 0;
[class*="fui-"] {
margin-right: -2px;
margin-left: 4px;
}
}
}
}

View File

@ -0,0 +1,58 @@
//
// Palette
// --------------------------------------------------
.palette {
color: @inverse;
margin: 0;
padding: 15px;
text-transform: uppercase;
dt {
display: block;
font-weight: 500;
.opacity(80);
}
dd {
font-weight: 200;
margin-left: 0;
.opacity(80);
}
}
//
// Pallet grid
// --------------------------------------------------
.calc-color(~"turquoise", ~"green-sea");
.calc-color(~"emerland", ~"nephritis");
.calc-color(~"peter-river", ~"belize-hole");
.calc-color(~"amethyst", ~"wisteria");
.calc-color(~"wet-asphalt", ~"midnight-blue");
.calc-color(~"sun-flower", ~"orange");
.calc-color(~"carrot", ~"pumpkin");
.calc-color(~"alizarin", ~"pomegranate");
.calc-color(~"clouds", ~"silver");
.calc-color(~"concrete", ~"asbestos");
.palette-clouds {
color: #bdc3c7;
}
// Palette paragraph
.palette-paragraph {
color: #7f8c8d;
font-size: 12px;
line-height: 17px;
span {
color: #bdc3c7;
}
}
// Headline
.palette-headline {
color: #7f8c8d;
font-weight: 700;
margin-top: -5px;
}

View File

@ -0,0 +1,36 @@
//
// Progress bar
// --------------------------------------------------
.progress {
background: mix(@base, white, 10%);
border-radius: 32px;
height: @progress-height;
.box-shadow(none);
.drop-ie-gradient();
// Alternate Colors
// --------------------------------------------------
.bar {
background: @firm;
.box-shadow(~"none !important");
.drop-ie-gradient();
}
.bar-success {
background-color: @success;
.drop-ie-gradient();
}
.bar-warning {
background-color: @warning;
.drop-ie-gradient();
}
.bar-danger {
background-color: @danger;
.drop-ie-gradient();
}
.bar-info {
background-color: @info;
.drop-ie-gradient();
}
}

View File

@ -0,0 +1,145 @@
//
// Bootstrap Select
// --------------------------------------------------
// Credits: Silvio Moreto
// http://github.com/silviomoreto/bootstrap-select
.select {
display: inline-block;
margin-bottom: 10px;
// Select grid
&[class*="span"] {
[class*="span"] > & {
margin-left: 0; // No margin if select is a closest child of the grid
}
.btn {
width: 100%; // Button should take all available space of its parent
.box-sizing();
}
}
// Fluid width. Takes all available space and behaves like a block
&.select-block {
display: block;
float: none;
margin-left: 0;
width: auto;
.btn {
width: 100%;
.box-sizing();
}
}
// Button Sizes
// --------------------------------------------------
.btn {
width: 220px; // Default select width until .span* is applied
// Huge
&.btn-huge {
.filter-option {
left: 20px;
right: 40px;
top: 16px;
}
.caret {
right: 20px;
}
}
// Large
&.btn-large {
.filter-option {
left: 18px;
right: 38px;
top: 12px;
}
}
// Small
&.btn-small {
.filter-option {
left: 13px;
right: 33px;
top: 7px;
}
.caret {
right: 13px;
}
}
// Mini
&.btn-mini {
.filter-option {
left: 13px;
right: 33px;
top: 5px;
}
.caret {
right: 13px;
}
}
.filter-option {
height: 26px;
left: 13px;
overflow: hidden;
position: absolute;
right: 33px;
text-align: left;
top: 10px;
}
.caret {
position: absolute;
right: 16px;
}
.dropdown-toggle {
.border-radius(6px);
}
// Dropdown menu
.dropdown-menu {
min-width: 100%;
.box-sizing;
dt {
cursor: default;
display: block;
padding: 3px 20px;
}
li {
&:not(.disabled) > a:hover small {
color: fade(@inverse, .4);
}
> a {
min-height: 20px;
&.opt {
padding-left: 35px;
}
}
small {
padding-left: 0.5em;
}
> dt small {
font-weight: normal;
}
}
}
// Disabled state
> .disabled,
.dropdown-menu li.disabled > a {
cursor: default;
}
}
// Caret
.caret {
.caret(@inverse);
}
}

View File

@ -0,0 +1,41 @@
//
// Sharing box
// --------------------------------------------------
// Module color variable
@share-color: mix(@base, @inverse, 8%);
.share {
background-color: @share-color;
position: relative;
.dropdown-arrow(@share-color, -9px, 23px);
.border-radius(6px);
ul {
list-style-type: none;
margin: 0;
padding: 15px;
}
li {
padding-top: 11px;
.clearfix();
&:first-child {
padding-top: 0;
}
}
.toggle {
float: right;
margin: 0;
}
.btn {
.border-radius(0 0 6px 6px);
}
}
.share-label {
float: left;
font-size: 15px;
padding-top: 5px;
width: 50%;
}

View File

@ -0,0 +1,148 @@
/* ============================================================
* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
* http://www.larentis.eu/switch/
* ============================================================
* Licensed under the Apache License, Version 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* ============================================================ */
.has-switch {
border-radius: @switch-border-radius;
display: inline-block;
cursor: pointer;
line-height: @base-line-height;
overflow: hidden;
position: relative;
text-align: left;
width: @switch-width;
.mask(~"url('../images/switch/mask.png') 0 0 no-repeat");
.user-select(none);
&.deactivate {
.opacity(50);
cursor: default !important;
label, span {
cursor: default !important;
}
}
> div {
width: 162%;
position: relative;
top: 0;
&.switch-animate {
.transition(left 0.25s ease-out);
}
&.switch-off {
left: -63%;
label {
background-color: mix(@base, white, 63%);
border-color: @lightgray;
.box-shadow(-1px 0 0 fade(@inverse, 50%));
}
}
&.switch-on {
left: 0%;
label {
background-color: @firm;
}
}
}
input[type=checkbox] {
display: none;
}
span {
cursor: pointer;
font-size: @base-font-size * 1.071;
font-weight: 700;
float: left;
height: 29px;
line-height: 19px;
margin: 0;
padding-bottom: 6px;
padding-top: 5px;
position: relative;
text-align: center;
width: 50%;
z-index: 1;
.box-sizing();
.transition(.25s ease-out);
&.switch-left {
border-radius: @switch-border-radius 0 0 @switch-border-radius;
background-color: @base;
color: @firm;
border-left: 1px solid transparent;
}
&.switch-right {
border-radius: 0 @switch-border-radius @switch-border-radius 0;
background-color: @lightgray;
color: @inverse;
text-indent: 7px;
[class*="fui-"] {
text-indent: 0;
}
}
}
label {
border: 4px solid @base;
border-radius: 50%;
float: left;
height: 21px;
margin: 0 -15px 0 -14px;
padding: 0;
position: relative;
vertical-align: middle;
width: 21px;
z-index: 100;
.transition(.25s ease-out);
}
}
// Square Switch
// -------------------------------
.switch-square {
border-radius: 6px;
.mask(~"url('../images/switch/mask.png') 0 0 no-repeat");
> div {
&.switch-off {
label {
border-color: mix(@base, white, 63%);
border-radius: 6px 0 0 6px;
}
}
}
span {
&.switch-left {
border-radius: 6px 0 0 6px;
[class*="fui-"] {
text-indent: -10px;
}
}
&.switch-right {
border-radius: 0 6px 6px 0;
[class*="fui-"] {
text-indent: 5px;
}
}
}
label {
border-radius: 0 6px 6px 0;
border-color: @firm;
}
}

View File

@ -0,0 +1,117 @@
//
// Tags Input
// --------------------------------------------------
.tagsinput {
background: white;
border: 2px solid @firm;
border-radius: 6px;
height: 100px;
margin-bottom: 18px;
padding: 6px 1px 1px 6px;
overflow-y: auto;
text-align: left;
.tag {
border-radius: 4px;
background-color: @firm;
color: @inverse;
cursor: pointer;
margin-right: 5px;
margin-bottom: 5px;
overflow: hidden;
line-height: 15px;
padding: 6px 13px 8px 19px;
position: relative;
vertical-align: middle;
.inline-block();
.transition(0.14s linear);
&:hover {
background-color: mix(@firm, black, 85%);
color: @inverse;
padding-left: 12px;
padding-right: 20px;
.tagsinput-remove-link {
color: @inverse;
opacity: 1;
// Opacity fallback for IE
display: block\9;
}
}
}
input {
background: transparent;
border: none;
color: @base;
font-family: @base-font-family;
font-size: @base-font-size;
margin: 0px;
padding: 0 0 0 5px;
outline: 0;
margin-right: 5px;
margin-bottom: 5px;
width: 12px;
}
}
.tagsinput-remove-link {
bottom: 0;
color: @inverse;
cursor: pointer;
font-size: 12px;
opacity: 0;
padding: 7px 7px 5px 0;
position: absolute;
right: 0;
text-align: right;
text-decoration: none;
top: 0;
width: 100%;
z-index: 2;
// Opacity fallback for IE
display: none\9;
&:before {
color: @inverse;
content: "\e00b";
font-family: "Flat-UI-Icons";
}
}
.tagsinput-add-container {
vertical-align: middle;
.inline-block();
}
.tagsinput-add {
background-color: mix(@inverse, @base, 80%);
border-radius: 3px;
color: @inverse;
cursor: pointer;
margin-bottom: 5px;
padding: 6px 9px;
.inline-block();
.transition(0.25s);
&:hover {
background-color: @firm;
}
&:before {
content: "\e009";
font-family: "Flat-UI-Icons";
}
}
.tags_clear {
clear: both;
width: 100%;
height: 0px;
}
.not_valid {
background: #fbd8db !important;
color: #90111a !important;
}

View File

@ -0,0 +1,54 @@
//
// Tile
// -------------------------------------------------
.tile {
background-color: mix(@base, @inverse, 8%);
border-radius: 6px;
padding: 14px;
position: relative;
text-align: center;
&.tile-hot {
&:before {
background: url(../images/tile/ribbon.png) 0 0 no-repeat;
background-size: 82px 82px;
content: '';
height: 82px;
position: absolute;
right: -4px;
top: -4px;
width: 82px;
}
}
p {
font-size: 15px;
margin-bottom: 33px;
}
}
.tile-image {
height: 100px;
margin: 31px 0 27px;
vertical-align: bottom;
&.big-illustration {
height: 111px;
margin-top: 20px;
width: 112px;
}
}
.tile-title {
font-size: 20px;
margin: 0;
}
// Retina Support
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.tile {
&.tile-hot {
&:before {
background-image: url(../images/tile/ribbon-2x.png);
}
}
}
}

View File

@ -0,0 +1,108 @@
//
// Todo list
// --------------------------------------------------
.todo {
background-color: mix(@base, black, 85%);
color: mix(@base, @inverse, 66%);
margin-bottom: 20px;
.border-radius(8px 8px 6px 6px);
ul {
margin: 0;
list-style-type: none;
}
li {
background: @base url(../images/todo/todo.png) 92% center no-repeat;
background-size: 20px 20px;
cursor: pointer;
margin-top: 2px;
padding: 18px 42px 17px 25px;
position: relative;
.transition(.25s);
&:first-child {
margin-top: 0;
}
&:last-child {
.border-radius(0 0 6px 6px);
padding-bottom: 18px;
}
&.todo-done {
background: transparent url(../images/todo/done.png) 92% center no-repeat;
background-size: 20px 20px;
color: @firm;
.todo-name {
color: @firm;
}
}
}
}
.todo-search {
position: relative;
background: @firm;
background-size: 16px 16px;
border-radius: 6px 6px 0 0;
color: @base;
padding: 19px 25px 20px;
&:before {
position: absolute;
font-family: 'Flat-UI-Icons';
content: "\e01c";
font-size: 16px;
display: inline-block;
top: 50%;
left: 92%;
margin: -0.5em 0 0 -1em;
}
}
input.todo-search-field {
background: none;
border: none;
color: @base;
font-size: 19px;
font-weight: 700;
margin: 0;
line-height: 23px;
padding: 5px 0;
text-indent: 0;
.box-shadow(none);
.placeholder-color(@base);
}
.todo-icon {
float: left;
font-size: 24px;
padding: 11px 22px 0 0;
}
.todo-content {
padding-top: 1px;
overflow: hidden;
}
.todo-name {
color: @inverse;
font-size: 17px;
margin: 1px 0 3px;
}
// Retina Support
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
.todo {
li {
background-image: url(../images/todo/todo-2x.png);
&.todo-done {
background-image: url(../images/todo/done-2x.png);
}
}
}
.todo-search {
background-image: url(../images/todo/search-2x.png);
}
}

View File

@ -0,0 +1,55 @@
// Tooltip
// --------------------------------------------------
.tooltip {
font-size: @base-font-size;
&.in {
opacity: 1;
}
&.top {
padding-bottom: 9px;
.tooltip-arrow {
border-top-color: @base;
border-width: 9px 9px 0;
bottom: 0;
margin-left: -9px;
}
}
&.right {
.tooltip-arrow {
border-right-color: @base;
border-width: 9px 9px 9px 0;
margin-top: -9px;
left: -3px;
}
}
&.bottom {
padding-top: 8px;
.tooltip-arrow {
border-bottom-color: @base;
border-width: 0 9px 9px;
margin-left: -9px;
top: -1px;
}
}
&.left {
.tooltip-arrow {
border-left-color: @base;
border-width: 9px 0 9px 9px;
margin-top: -9px;
right: -3px;
}
}
}
.tooltip-inner {
background-color: @base;
line-height: @base-font-size * 1.285;
padding: 12px 12px;
text-align: center;
width: 183px;
.border-radius(6px);
}

View File

@ -0,0 +1,60 @@
// Typography
// --------------------------------------------------
body {
color: @base;
font-family: @base-font-family;
font-size: @base-font-size;
line-height: @base-line-height;
}
input,
button,
select,
textarea {
font-family: @base-font-family;
font-size: @base-font-size;
}
a {
color: @link-color;
text-decoration: underline;
.transition(0.25s);
&:hover {
color: @link-hover-color;
text-decoration: none;
}
}
// H1—H6 specific styling
h1 {
font-size: 32px;
font-weight: 900;
}
h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 2px;
}
h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
margin-top: 2px;
}
h4 {
font-size: 18px;
font-weight: 500;
margin-top: 4px;
}
h5 {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
}
h6 {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}

View File

@ -0,0 +1,62 @@
// Slider
// --------------------------------------------------
.ui-slider {
.progress();
margin-bottom: 20px;
position: relative;
}
.ui-slider-handle {
background-color: mix(@firm, black, 85%);
border-radius: 50%;
cursor: pointer;
height: 18px;
margin-left: -9px;
position: absolute;
top: -3px;
width: 18px;
z-index: 2;
.transition(background 0.25s);
&[style*='100'] {
margin-left: -15px;
}
&:hover,
&:focus {
background-color: mix(@firm, white, 80%);
outline: none;
}
&:active {
background-color: mix(@firm, black, 85%);
}
}
.ui-slider-range {
background-color: @firm;
border-radius: 30px 0 0 30px;
display: block;
height: 100%;
position: absolute;
z-index: 1;
}
.ui-slider-segment {
background-color: mix(desaturate(@base, 15%), white, 20%);
border-radius: 50%;
float: left;
height: 6px;
margin: 3px -6px 0 0;
width: 6px;
}
.ui-slider-value {
float: right;
font-weight: 500;
margin-top: @progress-height;
&.first {
clear: left;
float: left;
}
}

View File

@ -0,0 +1,454 @@
//
// Video Player
// --------------------------------------------------
// Module color variable
@controls-color: mix(@base, black, 75%);
.video-js {
background-color: transparent;
// Otherwise you won't see controls in Fullscreen mode
margin-top: -95px;
position: relative;
padding: 0;
font-size: 10px;
vertical-align: middle;
.border-radius(6px 6px 0 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
.vjs-tech {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.border-radius(6px 6px 0 0);
}
&:-moz-full-screen {
position: absolute;
}
}
body.vjs-full-window {
padding: 0;
margin: 0;
height: 100%;
overflow-y: auto;
}
.video-js {
&.vjs-fullscreen {
position: fixed;
overflow: hidden;
z-index: 1000;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
_position: absolute;
}
&:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
}
.vjs-poster {
margin: 0 auto;
padding: 0;
cursor: pointer;
position: relative;
width: 100%;
max-height: 100%;
.border-radius(6px 6px 0 0);
}
.video-js {
.vjs-text-track-display {
text-align: center;
position: absolute;
bottom: 4em;
left: 1em;
right: 1em;
font-family: @base-font-family;
}
.vjs-text-track {
display: none;
color: @inverse;
font-size: 1.4em;
text-align: center;
margin-bottom: .1em;
background: #000;
background: rgba(0,0,0,.5);
}
.vjs-subtitles {
color: #fff;
}
.vjs-captions {
color: #fc6;
}
}
.vjs-tt-cue {
display: block;
}
.vjs-fade-in {
visibility: visible !important;
opacity: 1 !important;
.transition(~"visibility 0s linear 0s, opacity .3s linear");
}
.vjs-fade-out {
visibility: hidden !important;
opacity: 0 !important;
.transition(~"visibility 0s linear 1.5s, opacity 1.5s linear");
}
.vjs-controls {
position: absolute;
bottom: -47px;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 47px;
color: @inverse;
background: @controls-color;
.border-radius(0 0 6px 6px);
&.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
}
}
// Video player control general style
.vjs-control {
background-position: center center;
background-repeat: no-repeat;
position: relative;
float: left;
text-align: center;
margin: 0;
padding: 0;
height: 18px;
width: 18px;
&:focus {
outline: 0
}
div {
background-position: center center;
background-repeat: no-repeat;
}
}
// Control tooltip
.vjs-control-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.vjs-play-control {
cursor: pointer !important;
height: 47px;
left: 0;
position: absolute;
top: 0;
width: 58px;
div {
position: relative;
height: 47px;
&:before,
&:after {
position: absolute;
font-family: "Flat-UI-Icons";
color: @firm;
font-size: 16px;
top: 50%;
left: 50%;
margin: -0.55em 0 0 -0.5em;
.transition(~"color .25s, opacity .25s");
}
&:after {
content: "\e03b";
}
&:before {
content: "\e03c";
}
}
}
.vjs-paused .vjs-play-control {
&:hover {
div:before {
color: mix(@firm, black, 85%);
}
}
div {
&:after {
.opacity(0);
}
&:before {
.opacity(100);
}
}
}
.vjs-playing .vjs-play-control {
&:hover {
div:after {
color: mix(@firm, black, 85%);
}
}
div {
&:after {
.opacity(100);
}
&:before {
.opacity(0);
}
}
}
.vjs-rewind-control {
width: 5em;
cursor: pointer !important;
div {
width: 19px;
height: 16px;
background: none transparent;
margin: .5em auto 0;
}
}
.vjs-mute-control {
background: url(../images/video/volume-full.png) center -48px no-repeat;
background-size: 16px 64px;
cursor: pointer !important;
position: absolute;
right: 51px;
top: 14px;
&:hover,
&:focus {
div {
opacity: 0;
}
}
// Muted state
&.vjs-vol-0 {
&,
div {
background-image: url(../images/video/volume-off.png);
}
}
div {
background: @controls-color url(../images/video/volume-full.png) no-repeat center 2px;
background-size: 16px 64px;
height: 18px;
.transition(opacity .25s);
}
}
.vjs-volume-control,
.vjs-volume-level,
.vjs-volume-handle,
.vjs-volume-bar {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 60px;
right: 180px;
height: 12px;
width: auto;
top: 18px;
background: mix(@base, @inverse, 93%);
.border-radius(32px);
}
.vjs-progress-holder {
position: relative;
cursor: pointer !important;
padding: 0;
margin: 0;
height: 12px;
}
.vjs-play-progress,
.vjs-load-progress {
position: absolute;
display: block;
height: 12px;
margin: 0;
padding: 0;
left: 0;
top: 0;
.border-radius(32px);
}
.vjs-play-progress {
background: @firm;
left: -1px;
}
.vjs-load-progress {
background: mix(@base, @inverse, 20%);
.border-radius(32px 0 0 32px);
&[style*='100%'],
&[style*='99%'] {
.border-radius(32px);
}
}
.vjs-seek-handle {
background-color: mix(@firm, black, 85%);
position: absolute;
width: 18px;
height: 18px;
margin: -3px 0 0 1px;
left: 0;
top: 0;
.transition(background-color .25s);
.border-radius(50%);
&[style*='95.'] {
margin-left: 3px;
}
&[style='left: 0%;'] {
margin-left: -2px;
}
&:hover,
&:focus {
background-color: mix(@firm, black, 75%);
}
&:active {
background-color: mix(@firm, black, 65%)
}
}
// Player time controls
.vjs-time-controls {
position: absolute;
height: 20px;
width: 50px;
top: 16px;
font: 300 13px @base-font-family;
}
.vjs-current-time {
right: 128px;
text-align: right;
}
.vjs-duration {
color: mix(@base, @inverse, 80%);
right: 69px;
text-align: left;
}
.vjs-remaining-time {
display: none;
}
.vjs-time-divider {
color: mix(@base, @inverse, 80%);
font-size: 14px;
position: absolute;
right: 121px;
top: 15px;
}
.vjs-secondary-controls {
float: right;
}
.vjs-fullscreen-control {
background-image: url(../images/video/fullscreen.png);
background-position: center -47px;
background-size: 15px 64px;
cursor: pointer !important;
position: absolute;
right: 17px;
top: 13px;
&:hover,
&:focus {
div {
opacity: 0;
}
}
div {
height: 18px;
background: url(../images/video/fullscreen.png) no-repeat center 2px;
background-size: 15px 64px;
.transition(opacity .25s);
}
}
// Subtitles menu. Hide for no need by design.
.vjs-menu-button {
display: none !important;
}
// Video preloader
.sharp-keyframes() {
0% {
background: #e74c3c;
.transform(rotate(0deg));
.border-radius(10px);
}
50% {
background: #ebedee;
.border-radius(0);
.transform(rotate(180deg));
}
100% {
background: #e74c3c;
.border-radius(10px);
.transform(rotate(360deg));
}
}
@-webkit-keyframes sharp
.sharp-keyframes();
@-moz-keyframes sharp
.sharp-keyframes();
@-o-keyframes sharp
.sharp-keyframes();
@keyframes sharp
.sharp-keyframes();
.vjs-loading-spinner {
background: #ebedee;
display: none;
height: 16px;
left: 50%;
margin: -8px 0 0 -8px;
position: absolute;
top: 50%;
width: 16px;
.animation(sharp 2s ease infinite);
.border-radius(10px);
}

View File

@ -0,0 +1,172 @@
// Should be used to modify the default spacing between objects (not between nodes of * the same object)
// p,m = padding,margin
// a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
// x,s,m,l,n = extra-small(@x),small(@s),medium(@m),large(@l),none(0px)
@x: 3px;
@s: 5px;
@m: 10px;
@l: 20px;
.last-col {
overflow: hidden;
}
.ptn, .pvn, .pan {
padding-top: 0;
}
.ptx, .pvx, .pax {
padding-top: @x;
}
.pts, .pvs, .pas {
padding-top: @s;
}
.ptm, .pvm, .pam {
padding-top: @m;
}
.ptl, .pvl, .pal {
padding-top: @l;
}
.prn, .phn, .pan {
padding-right: 0;
}
.prx, .phx, .pax {
padding-right: @x;
}
.prs, .phs, .pas {
padding-right: @s;
}
.prm, .phm, .pam {
padding-right: @m;
}
.prl, .phl, .pal {
padding-right: @l;
}
.pbn, .pvn, .pan {
padding-bottom: 0;
}
.pbx, .pvx, .pax {
padding-bottom: @x;
}
.pbs, .pvs, .pas {
padding-bottom: @s;
}
.pbm, .pvm, .pam {
padding-bottom: @m;
}
.pbl, .pvl, .pal {
padding-bottom: @l;
}
.pln, .phn, .pan {
padding-left: 0;
}
.plx, .phx, .pax {
padding-left: @x;
}
.pls, .phs, .pas {
padding-left: @s;
}
.plm, .phm, .pam {
padding-left: @m;
}
.pll, .phl, .pal {
padding-left: @l;
}
.mtn, .mvn, .man {
margin-top: 0px;
}
.mtx, .mvx, .max {
margin-top: @x;
}
.mts, .mvs, .mas {
margin-top: @s;
}
.mtm, .mvm, .mam {
margin-top: @m;
}
.mtl, .mvl, .mal {
margin-top: @l;
}
.mrn, .mhn, .man {
margin-right: 0px;
}
.mrx, .mhx, .max {
margin-right: @x;
}
.mrs, .mhs, .mas {
margin-right: @s;
}
.mrm, .mhm, .mam {
margin-right: @m;
}
.mrl, .mhl, .mal {
margin-right: @l;
}
.mbn, .mvn, .man {
margin-bottom: 0px;
}
.mbx, .mvx, .max {
margin-bottom: @x;
}
.mbs, .mvs, .mas {
margin-bottom: @s;
}
.mbm, .mvm, .mam {
margin-bottom: @m;
}
.mbl, .mvl, .mal {
margin-bottom: @l;
}
.mln, .mhn, .man {
margin-left: 0px;
}
.mlx, .mhx, .max {
margin-left: @x;
}
.mls, .mhs, .mas {
margin-left: @s;
}
.mlm, .mhm, .mam {
margin-left: @m;
}
.mll, .mhl, .mal {
margin-left: @l;
}

View File

@ -0,0 +1,10 @@
// Fixes not showing dropdowns and other stuff
.collapse
overflow: visible
// Dropdownss border radius
.dropdown-toggle
border-radius: 6px !important
//.open > .dropdown-menu
// min-height: auto !important

View File

@ -3,6 +3,6 @@ $top-margin: 60px
$workspace-width: 100%
$panel-width: 400px
$canvas-width: 700px
$canvas-width: 320px
$textures-per-row: 8

View File

@ -1,2 +1,3 @@
@import fixes.sass
@import variables.sass
@import panels.sass

View File

@ -1,19 +1,30 @@
{% extends "layout.html" %}
{% block head %}
<!-- Styles -->
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/lib/flat-ui.css" />
<link rel="stylesheet" href="/static/css/studio.css" />
{{ super() }}
<!-- jQuery -->
<script type="text/javascript" src="/static/lib/jquery.2.0.0.js"></script>
<!-- THREE -->
<script type="text/javascript" src="/static/lib/three.r58.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-transition.js"></script>
<!-- Bootstrap JS -->
<!--<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-collapse.js"></script>-->
<!-- Flat UI -->
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-radio.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-checkbox.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap-select.js"></script>
<!-- Studio -->
<script type="text/javascript" src="/static/js/studio.js"></script>
<script defer="defer">
window.onload = function() {
// Initialize Studio
mcstudio = window.Studio
mcstudio.init('.studio-canvas', 600, 600);
mcstudio.init('.studio-canvas', 320, 240);
// Texture search
$('.texture-list .item').hover(function() {
@ -40,6 +51,7 @@ window.onload = function() {
$('.texture-list .item').removeClass('hide')
}
})
$("select.flatui").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});
}
</script>
{% endblock %}
@ -48,18 +60,15 @@ window.onload = function() {
<header>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="/">
MinecraftCodex : Studio
</a>
{#<div class="nav-collapse">#}
<div class="container">
<a class="brand">MinecraftCodex : Studio</a>
<div>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
File
<b class="caret"></b>
<i class="icon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#">New</a></li>
@ -76,7 +85,7 @@ window.onload = function() {
</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div><!-- /navbar-inner -->
</div>
@ -118,7 +127,30 @@ window.onload = function() {
</button>
<h3 class="margin-none">Camera</h3>
<div id="camera" class="collapse in">
here things
<select name="select" class="flatui">
<option value="meh1">Orthogonal</option>
<option value="meh2">Perspective</option>
</select>
{#<label class="radio">
<span class="icons">
<span class="first-icon fui-radio-unchecked"></span>
<span class="second-icon fui-radio-checked"></span>
</span>
<input name="optionsRadiosDisabled" id="optionsRadios4"
value="option2" data-toggle="radio" type="radio">
Orthogonal
</label>
<label class="radio">
<span class="icons">
<span class="first-icon fui-radio-unchecked"></span>
<span class="second-icon fui-radio-checked"></span>
</span>
<input name="optionsRadiosDisabled" id="optionsRadios4"
value="option2" data-toggle="radio" type="radio">
Perpective
</label>#}
</div>
<hr />
<button type="button"