From 8384278e4c60d0a61bd357c8684e2bfb120db874 Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Fri, 29 May 2020 15:43:51 +0200 Subject: [PATCH] premiers sketchs et premiers prototypes de page web --- NewProject.bmpr | Bin 0 -> 102400 bytes img/idea_black.png | Bin 0 -> 10475 bytes img/idea_white.png | Bin 0 -> 11264 bytes img/logiqueet.png | Bin 0 -> 1516 bytes index.html | 145 + js/basiliq keygen.txt | 10 + js/func.js | 20 + js/keygen.jar | Bin 0 -> 2798 bytes semantic/.versions | 4 + semantic/LICENSE | 22 + semantic/README.md | 7 + semantic/components/accordion.css | 253 + semantic/components/accordion.js | 613 + semantic/components/accordion.min.css | 9 + semantic/components/accordion.min.js | 1 + semantic/components/ad.css | 275 + semantic/components/ad.min.css | 10 + semantic/components/api.js | 1167 + semantic/components/api.min.js | 1 + semantic/components/breadcrumb.css | 124 + semantic/components/breadcrumb.min.css | 9 + semantic/components/button.css | 3838 ++ semantic/components/button.min.css | 9 + semantic/components/card.css | 997 + semantic/components/card.min.css | 9 + semantic/components/checkbox.css | 632 + semantic/components/checkbox.js | 831 + semantic/components/checkbox.min.css | 9 + semantic/components/checkbox.min.js | 1 + semantic/components/colorize.js | 274 + semantic/components/colorize.min.js | 11 + semantic/components/comment.css | 271 + semantic/components/comment.min.css | 9 + semantic/components/container.css | 147 + semantic/components/container.min.css | 9 + semantic/components/dimmer.css | 253 + semantic/components/dimmer.js | 733 + semantic/components/dimmer.min.css | 9 + semantic/components/dimmer.min.js | 1 + semantic/components/divider.css | 260 + semantic/components/divider.min.css | 9 + semantic/components/dropdown.css | 1516 + semantic/components/dropdown.js | 3955 ++ semantic/components/dropdown.min.css | 9 + semantic/components/dropdown.min.js | 1 + semantic/components/embed.css | 166 + semantic/components/embed.js | 706 + semantic/components/embed.min.css | 9 + semantic/components/embed.min.js | 1 + semantic/components/feed.css | 295 + semantic/components/feed.min.css | 9 + semantic/components/flag.css | 1036 + semantic/components/flag.min.css | 9 + semantic/components/form.css | 1080 + semantic/components/form.js | 1706 + semantic/components/form.min.css | 9 + semantic/components/form.min.js | 1 + semantic/components/grid.css | 2039 + semantic/components/grid.min.css | 9 + semantic/components/header.css | 727 + semantic/components/header.min.css | 9 + semantic/components/icon.css | 4806 ++ semantic/components/icon.min.css | 9 + semantic/components/image.css | 310 + semantic/components/image.min.css | 9 + semantic/components/input.css | 519 + semantic/components/input.min.css | 9 + semantic/components/item.css | 487 + semantic/components/item.min.css | 9 + semantic/components/label.css | 1313 + semantic/components/label.min.css | 9 + semantic/components/list.css | 953 + semantic/components/list.min.css | 9 + semantic/components/loader.css | 347 + semantic/components/loader.min.css | 9 + semantic/components/menu.css | 2052 + semantic/components/menu.min.css | 1 + semantic/components/message.css | 505 + semantic/components/message.min.css | 9 + semantic/components/modal.css | 619 + semantic/components/modal.js | 1034 + semantic/components/modal.min.css | 9 + semantic/components/modal.min.js | 1 + semantic/components/nag.css | 148 + semantic/components/nag.js | 507 + semantic/components/nag.min.css | 9 + semantic/components/nag.min.js | 1 + semantic/components/placeholder.css | 239 + semantic/components/placeholder.min.css | 9 + semantic/components/popup.css | 752 + semantic/components/popup.js | 1532 + semantic/components/popup.min.css | 9 + semantic/components/popup.min.js | 1 + semantic/components/progress.css | 517 + semantic/components/progress.js | 931 + semantic/components/progress.min.css | 9 + semantic/components/progress.min.js | 1 + semantic/components/rail.css | 152 + semantic/components/rail.min.css | 9 + semantic/components/rating.css | 263 + semantic/components/rating.js | 508 + semantic/components/rating.min.css | 9 + semantic/components/rating.min.js | 1 + semantic/components/reset.css | 485 + semantic/components/reset.min.css | 9 + semantic/components/reveal.css | 295 + semantic/components/reveal.min.css | 9 + semantic/components/search.css | 445 + semantic/components/search.js | 1505 + semantic/components/search.min.css | 9 + semantic/components/search.min.js | 1 + semantic/components/segment.css | 879 + semantic/components/segment.min.css | 9 + semantic/components/shape.css | 158 + semantic/components/shape.js | 921 + semantic/components/shape.min.css | 9 + semantic/components/shape.min.js | 1 + semantic/components/sidebar.css | 628 + semantic/components/sidebar.js | 1033 + semantic/components/sidebar.min.css | 9 + semantic/components/sidebar.min.js | 1 + semantic/components/site.css | 204 + semantic/components/site.js | 487 + semantic/components/site.min.css | 9 + semantic/components/site.min.js | 1 + semantic/components/state.js | 708 + semantic/components/state.min.js | 1 + semantic/components/statistic.css | 566 + semantic/components/statistic.min.css | 9 + semantic/components/step.css | 626 + semantic/components/step.min.css | 9 + semantic/components/sticky.css | 78 + semantic/components/sticky.js | 959 + semantic/components/sticky.min.css | 9 + semantic/components/sticky.min.js | 1 + semantic/components/tab.css | 92 + semantic/components/tab.js | 952 + semantic/components/tab.min.css | 9 + semantic/components/tab.min.js | 1 + semantic/components/table.css | 1138 + semantic/components/table.min.css | 9 + semantic/components/transition.css | 2059 + semantic/components/transition.js | 1095 + semantic/components/transition.min.css | 9 + semantic/components/transition.min.js | 1 + semantic/components/video.css | 125 + semantic/components/video.js | 532 + semantic/components/video.min.css | 10 + semantic/components/video.min.js | 11 + semantic/components/visibility.js | 1311 + semantic/components/visibility.min.js | 1 + semantic/components/visit.js | 517 + semantic/components/visit.min.js | 11 + semantic/package.js | 34 + semantic/package.json | 20 + semantic/semantic.css | 40304 ++++++++++++++++ semantic/semantic.js | 22515 +++++++++ semantic/semantic.min.css | 372 + semantic/semantic.min.js | 11 + .../default/assets/fonts/brand-icons.eot | Bin 0 -> 98640 bytes .../default/assets/fonts/brand-icons.svg | 1008 + .../default/assets/fonts/brand-icons.ttf | Bin 0 -> 98404 bytes .../default/assets/fonts/brand-icons.woff | Bin 0 -> 63728 bytes .../default/assets/fonts/brand-icons.woff2 | Bin 0 -> 54488 bytes .../themes/default/assets/fonts/icons.eot | Bin 0 -> 106004 bytes .../themes/default/assets/fonts/icons.otf | Bin 0 -> 93888 bytes .../themes/default/assets/fonts/icons.svg | 1518 + .../themes/default/assets/fonts/icons.ttf | Bin 0 -> 105784 bytes .../themes/default/assets/fonts/icons.woff | Bin 0 -> 50524 bytes .../themes/default/assets/fonts/icons.woff2 | Bin 0 -> 40148 bytes .../default/assets/fonts/outline-icons.eot | Bin 0 -> 31156 bytes .../default/assets/fonts/outline-icons.svg | 366 + .../default/assets/fonts/outline-icons.ttf | Bin 0 -> 30928 bytes .../default/assets/fonts/outline-icons.woff | Bin 0 -> 14712 bytes .../default/assets/fonts/outline-icons.woff2 | Bin 0 -> 12240 bytes .../themes/default/assets/images/flags.png | Bin 0 -> 28123 bytes 176 files changed, 127013 insertions(+) create mode 100644 NewProject.bmpr create mode 100644 img/idea_black.png create mode 100644 img/idea_white.png create mode 100644 img/logiqueet.png create mode 100644 index.html create mode 100644 js/basiliq keygen.txt create mode 100644 js/func.js create mode 100644 js/keygen.jar create mode 100644 semantic/.versions create mode 100644 semantic/LICENSE create mode 100644 semantic/README.md create mode 100644 semantic/components/accordion.css create mode 100644 semantic/components/accordion.js create mode 100644 semantic/components/accordion.min.css create mode 100644 semantic/components/accordion.min.js create mode 100644 semantic/components/ad.css create mode 100644 semantic/components/ad.min.css create mode 100644 semantic/components/api.js create mode 100644 semantic/components/api.min.js create mode 100644 semantic/components/breadcrumb.css create mode 100644 semantic/components/breadcrumb.min.css create mode 100644 semantic/components/button.css create mode 100644 semantic/components/button.min.css create mode 100644 semantic/components/card.css create mode 100644 semantic/components/card.min.css create mode 100644 semantic/components/checkbox.css create mode 100644 semantic/components/checkbox.js create mode 100644 semantic/components/checkbox.min.css create mode 100644 semantic/components/checkbox.min.js create mode 100644 semantic/components/colorize.js create mode 100644 semantic/components/colorize.min.js create mode 100644 semantic/components/comment.css create mode 100644 semantic/components/comment.min.css create mode 100644 semantic/components/container.css create mode 100644 semantic/components/container.min.css create mode 100644 semantic/components/dimmer.css create mode 100644 semantic/components/dimmer.js create mode 100644 semantic/components/dimmer.min.css create mode 100644 semantic/components/dimmer.min.js create mode 100644 semantic/components/divider.css create mode 100644 semantic/components/divider.min.css create mode 100644 semantic/components/dropdown.css create mode 100644 semantic/components/dropdown.js create mode 100644 semantic/components/dropdown.min.css create mode 100644 semantic/components/dropdown.min.js create mode 100644 semantic/components/embed.css create mode 100644 semantic/components/embed.js create mode 100644 semantic/components/embed.min.css create mode 100644 semantic/components/embed.min.js create mode 100644 semantic/components/feed.css create mode 100644 semantic/components/feed.min.css create mode 100644 semantic/components/flag.css create mode 100644 semantic/components/flag.min.css create mode 100644 semantic/components/form.css create mode 100644 semantic/components/form.js create mode 100644 semantic/components/form.min.css create mode 100644 semantic/components/form.min.js create mode 100644 semantic/components/grid.css create mode 100644 semantic/components/grid.min.css create mode 100644 semantic/components/header.css create mode 100644 semantic/components/header.min.css create mode 100644 semantic/components/icon.css create mode 100644 semantic/components/icon.min.css create mode 100644 semantic/components/image.css create mode 100644 semantic/components/image.min.css create mode 100644 semantic/components/input.css create mode 100644 semantic/components/input.min.css create mode 100644 semantic/components/item.css create mode 100644 semantic/components/item.min.css create mode 100644 semantic/components/label.css create mode 100644 semantic/components/label.min.css create mode 100644 semantic/components/list.css create mode 100644 semantic/components/list.min.css create mode 100644 semantic/components/loader.css create mode 100644 semantic/components/loader.min.css create mode 100644 semantic/components/menu.css create mode 100644 semantic/components/menu.min.css create mode 100644 semantic/components/message.css create mode 100644 semantic/components/message.min.css create mode 100644 semantic/components/modal.css create mode 100644 semantic/components/modal.js create mode 100644 semantic/components/modal.min.css create mode 100644 semantic/components/modal.min.js create mode 100644 semantic/components/nag.css create mode 100644 semantic/components/nag.js create mode 100644 semantic/components/nag.min.css create mode 100644 semantic/components/nag.min.js create mode 100644 semantic/components/placeholder.css create mode 100644 semantic/components/placeholder.min.css create mode 100644 semantic/components/popup.css create mode 100644 semantic/components/popup.js create mode 100644 semantic/components/popup.min.css create mode 100644 semantic/components/popup.min.js create mode 100644 semantic/components/progress.css create mode 100644 semantic/components/progress.js create mode 100644 semantic/components/progress.min.css create mode 100644 semantic/components/progress.min.js create mode 100644 semantic/components/rail.css create mode 100644 semantic/components/rail.min.css create mode 100644 semantic/components/rating.css create mode 100644 semantic/components/rating.js create mode 100644 semantic/components/rating.min.css create mode 100644 semantic/components/rating.min.js create mode 100644 semantic/components/reset.css create mode 100644 semantic/components/reset.min.css create mode 100644 semantic/components/reveal.css create mode 100644 semantic/components/reveal.min.css create mode 100644 semantic/components/search.css create mode 100644 semantic/components/search.js create mode 100644 semantic/components/search.min.css create mode 100644 semantic/components/search.min.js create mode 100644 semantic/components/segment.css create mode 100644 semantic/components/segment.min.css create mode 100644 semantic/components/shape.css create mode 100644 semantic/components/shape.js create mode 100644 semantic/components/shape.min.css create mode 100644 semantic/components/shape.min.js create mode 100644 semantic/components/sidebar.css create mode 100644 semantic/components/sidebar.js create mode 100644 semantic/components/sidebar.min.css create mode 100644 semantic/components/sidebar.min.js create mode 100644 semantic/components/site.css create mode 100644 semantic/components/site.js create mode 100644 semantic/components/site.min.css create mode 100644 semantic/components/site.min.js create mode 100644 semantic/components/state.js create mode 100644 semantic/components/state.min.js create mode 100644 semantic/components/statistic.css create mode 100644 semantic/components/statistic.min.css create mode 100644 semantic/components/step.css create mode 100644 semantic/components/step.min.css create mode 100644 semantic/components/sticky.css create mode 100644 semantic/components/sticky.js create mode 100644 semantic/components/sticky.min.css create mode 100644 semantic/components/sticky.min.js create mode 100644 semantic/components/tab.css create mode 100644 semantic/components/tab.js create mode 100644 semantic/components/tab.min.css create mode 100644 semantic/components/tab.min.js create mode 100644 semantic/components/table.css create mode 100644 semantic/components/table.min.css create mode 100644 semantic/components/transition.css create mode 100644 semantic/components/transition.js create mode 100644 semantic/components/transition.min.css create mode 100644 semantic/components/transition.min.js create mode 100644 semantic/components/video.css create mode 100644 semantic/components/video.js create mode 100644 semantic/components/video.min.css create mode 100644 semantic/components/video.min.js create mode 100644 semantic/components/visibility.js create mode 100644 semantic/components/visibility.min.js create mode 100644 semantic/components/visit.js create mode 100644 semantic/components/visit.min.js create mode 100644 semantic/package.js create mode 100644 semantic/package.json create mode 100644 semantic/semantic.css create mode 100644 semantic/semantic.js create mode 100644 semantic/semantic.min.css create mode 100644 semantic/semantic.min.js create mode 100644 semantic/themes/default/assets/fonts/brand-icons.eot create mode 100644 semantic/themes/default/assets/fonts/brand-icons.svg create mode 100644 semantic/themes/default/assets/fonts/brand-icons.ttf create mode 100644 semantic/themes/default/assets/fonts/brand-icons.woff create mode 100644 semantic/themes/default/assets/fonts/brand-icons.woff2 create mode 100644 semantic/themes/default/assets/fonts/icons.eot create mode 100644 semantic/themes/default/assets/fonts/icons.otf create mode 100644 semantic/themes/default/assets/fonts/icons.svg create mode 100644 semantic/themes/default/assets/fonts/icons.ttf create mode 100644 semantic/themes/default/assets/fonts/icons.woff create mode 100644 semantic/themes/default/assets/fonts/icons.woff2 create mode 100644 semantic/themes/default/assets/fonts/outline-icons.eot create mode 100644 semantic/themes/default/assets/fonts/outline-icons.svg create mode 100644 semantic/themes/default/assets/fonts/outline-icons.ttf create mode 100644 semantic/themes/default/assets/fonts/outline-icons.woff create mode 100644 semantic/themes/default/assets/fonts/outline-icons.woff2 create mode 100644 semantic/themes/default/assets/images/flags.png diff --git a/NewProject.bmpr b/NewProject.bmpr new file mode 100644 index 0000000000000000000000000000000000000000..5a11d50520dc91d6d02ce948d10e033083d6b814 GIT binary patch literal 102400 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 G)BI1gXp8;; literal 0 HcmV?d00001 diff --git a/img/idea_black.png b/img/idea_black.png new file mode 100644 index 0000000000000000000000000000000000000000..7e62a73350fee043111effcfbf37164a60e3984c GIT binary patch literal 10475 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 literal 0 HcmV?d00001 diff --git a/img/idea_white.png b/img/idea_white.png new file mode 100644 index 0000000000000000000000000000000000000000..62532d97e01436d6dc668ab70b08ef78f71a7dbc GIT binary patch literal 11264 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 z
}<}X-is^u=s@9b|l?99N?BPhsj)TvEu+!b4Y^mG9eiKC-`XiFS<%V4#xkB2!$ z4)-JAJ0pDAxBltAMT+nYKmYfZ2)9tyYo?C)TAaD`R_vCfbo}?zc1JROB?soS!+F^d zW*zu>|E%UNR~3&~2Fsy!5%=7KlvbYFHOo`Sf%4(~NjiD$ODlKLjviIPmp6Zst$Ave z0wm<%(0ME7Sb1*IvZA#|L9X9WWy6o@WIq}8D}Jt-wVcPslVM^5HaBkuLf(nm-&9gCC?5>3vF zpEH(4p3>{hc%xbH8ty*~<3o{0r;7d)D&~)$LWOw*x=8H%RT%_xU2ci~I(pj0-;H}# z1QXeuxGt$R^wm-S-A4Irq(L zJwf$f0g)SbYdM!Cj`iNoa<$Pm#6^7ogA)6hH05u|usIR5@2$JB>Fw1{e}am&b`H~v zE^E6LapqrN5Z-60s*V~`1%1mKMYajI$2(vv(gh3lrcGC`9FEC!3)wlJRHcPe9GCdg z>z^7|>eSXXnyByp(ygYxe@p(C>oJ-8l)ufI!(S>}C(}|1B4G`gn={rL#sT%V9fxCC zgBT_J1EVpffq%QqCe(dz`2)XU0<-B&8|A&VE&E4+wZBP>HyU|U`-n*QhW zL4Oh%cSxBk82&dWilN$1{Nytk_Z(VP7daMVyvoH z!+Oym{`~E@kE8St`6Ug+QtDr02@uf(^a@!Uz38%k8rJhcV6@ibwu}>*5s;c9_Z~2<

b* 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 G&;A#6w;uce literal 0 HcmV?d00001 diff --git a/img/logiqueet.png b/img/logiqueet.png new file mode 100644 index 0000000000000000000000000000000000000000..3bfd30ccde2f984cc71c900f47b2494d5485a2bd GIT binary patch literal 1516 zcmVQn8CHez0ssI7GD$>1RCt{2o$HpOIuJ&yhp% z<;NuTxr+S)R@^J8q;i4CC+0X0#OmO+A#YA}=1_F&V|6RiNV>_8M6+NX9Qk&V#MMT+ z)p$4$*Qsx^R~eUV(HQBLW8pkZz5gfaYL~R#H0z&aESfQ4d@*?NKV%zYqWZ9JPUWI| ze5#lp_uhZ_T?pji3sa}f@pGJ7&WnIQjZAP4Kd7r@`_U8wh6kdPtNSi*(qV{!;(_*wo58A05-=VpTDj_9DIJCoI39?~ z|E!6%&N2s*2RgZ$Q!E{Y2v8oVxmXcL=_n+?@<1Cmf7O^Hz&y}?X_K|WSreKEYV6v& z*H;OL^FSv%GWE4|6rsWMKqbS4y_nMW`B?Ks}^(IXBg`Wew_KSVd?mG@*Kk?8ww(?USZHLG?gI&b*Tj z;)SJ0`g98FVMx`fbP&({gKIdy2G>K4Hg{F(!Id|9q+|JOpVSjr5BpxxCMj&5CNc}= zCDxS5AHW`{>GkZ9B72~Yd7`BL4ei102r0SB2<^dG53O_%VSx5P3G+qAz=Z9=?L+7& ze`9;7AIuBsAcBDH!OU%RD$dYgd!UN>q2f>(xQD_na5D>&o|@4?Mm6_ply4Krm;% zNXHNWcn|LEy>tu#fcKE0UElQsx`%qJ<=I^HM{a2KNxz)pV<%x`gf_wX@c>bPz$n_Hfs+ z8As?I>}+W(9YYwPJ*2E!uC+*P_JvOJTgDvzRy=DSZ_;v zJv|HjUS*SG)t0n+NWer;$q0aya4M#*@p*EJsj+KIRlz3 z`3BU3iJ5btwS#v+Jrq~w9bQ=e0QGQY6}KL~!1S=tm81#O!|AHyag!$yJ!~@Ov#L=E z(u1*6RvnL2K7r@Kbn21=0eUcQ6HZxjAV3dg&OAXXvxWi9gS#Gj)^Swk1uPH7Y1k@w z#^EQRJQ(-*Sgzt-_3uD=aPKUss_uOOMTA1{4qO z`vS~~q7ArjKzJ}Wx8IOMoz4ghf``q@b%sn^Y3~Jj52nnVhE7?b`y0|8%)NIOdJW%r z_#Lty()-L=xXyKV29ou#KModn)+o8;@EgQDn5rE{Bz{yH-fj335*|#QR_%}D=J})? z`+{Te5b&>v(xQsH%g3qz-PjjCa2_73MF8U4tz56#$@cT=#br@QFCcMve}Fhe#S)pF`IR~K32E=p^n~mH2NPnCt(vE SPdcpt0000 + + + + + + + + + Custom Shape + + + + +

+
+
Jouer
+
+
+
Aide
+
+
+
Createur
+
+
+
Records
+
+
+
+ + + \ No newline at end of file diff --git a/js/basiliq keygen.txt b/js/basiliq keygen.txt new file mode 100644 index 0000000..b9291d4 --- /dev/null +++ b/js/basiliq keygen.txt @@ -0,0 +1,10 @@ +java -version + + +cd desktop + + +java -jar keygen.jar + + +eJzzzU/OLi0odstPdypNr6pxS8xJzs/Ly6yoMTIysDQwNjIwMKhxNgSSAEFQDaM= \ No newline at end of file diff --git a/js/func.js b/js/func.js new file mode 100644 index 0000000..8e7b5eb --- /dev/null +++ b/js/func.js @@ -0,0 +1,20 @@ +function createEtLogique(x, y, id){ + var imageObj = new Image(); + imageObj.onload = function () { + var yoda = new Konva.Image({ + x: x, + y: y, + image: imageObj, + width: 100, + height: 50, + id : "pd", + }); + + // add the shape to the layer + layer.add(yoda); + layer.batchDraw(); + }; + imageObj.src = 'img/logiqueet.png'; + + return imageObj; +} \ No newline at end of file diff --git a/js/keygen.jar b/js/keygen.jar new file mode 100644 index 0000000000000000000000000000000000000000..bcfa940d9f744922d063f84075b1ac587ff645cf GIT binary patch literal 2798 zcmZ`*TVLDe9e#ul5<)c0fe_L(Q8Kzf5+9(HCZ_9V6TCWLpfO3~WLqcO!YJ65E6Ghr zv$fgz(3}2#+vR%I-R)xQg_~cq?gR9CH``}uze3yRm5gly6ZqA8_#dDDLGR{jD69es zaOb`MHmyhEAA-VXC^VcISWY+V!mEu;SkSiEX zYuj|a_$||MExVc4=Mt$=HPal}$+V2hj;V8xhgTB|qw2C_8lG8=XZHmCl|<^T`IqD6 zxmWa=4aca|O?}yRTDD_&lsHTBy5YL!a%J`0_@fu(H0D)(eK!jQgkheXCyA z%cgErt7cU<+MeAYd&Q{N_w+LV+g80gs`eSu`fjak)Lo-ty`5O?O-I#H^&koZcwvN# zK3no2;otu{`L`TV7Qg2Y687aMD#Dj9zW(grq*%ZQD#mbK!K#YmSd&pu8ItQ_SQo>F z7&gW5hKd^~s@THKVGg$xys6?gN(%1CxU1sF_=$p_%6Ln`&lDI6$_gq9stQaQ+bT{8 zsi#m=u%p0Ia8ImuWz1g;Ze#b0% zM49vRsjI1%=6xfjWevZ_9|+>nA<+;=Lc<^NCkYcrra$w?*U9wAZ}bvS!u0;`&8FLK zvGuV#`f+AO43H@`)64F8Ci6vcO)no*LS*J{R%B>&n`P_nFu|%p!ZY;Zh{+x@o7H`g z{n%$5$JnEok&4~g+t|Lr0wlZ&$@6)?0tZ4?+;cs%LDOeuk4WwiOOWpNPBvM^9^o{N z22;Q1?!dNR0VJw31QSPf0Qz!lACPVp(Kbq~iWVf{>JdzXWf|nyQrFtS=0cE+R?7z? zeuR+29Nml%ZOgOwGjn_&h-XCamn?fo_OPfW_SYBL?!^;=Bx;l63|C3MCB7pUKZW#9 zPKGecG3sxQ;3DT*K!8iQ%+;_+G*SuXk0>m{cj{tnsDsejSoL2@;VHtUPZ3#cLua?-b9A<#o} zQ>2$^;~eH`mqx0WI2$70X@1mRrbW}-UBoN=a$O;9m{eD3bs9^7)l!^$LhE0iU}WtR zXtB`_p1Tw~7Wy1x9hQD9wk|J*$D*I(cqtScFP6fwiDD@dJ5ek}W0S>_96MPoDY2as*6S6tPT>2xXqZHJ(N(c>*iQ5o!Tql$<{zj1pew zY6$twRcUBE^#8ARq~bG%uQKA@yS)V$y*}$vS3SWXo{t}2;@D#yxcCh!7ZQB(?jWv7 u!6TH5ex5 literal 0 HcmV?d00001 diff --git a/semantic/.versions b/semantic/.versions new file mode 100644 index 0000000..6237b36 --- /dev/null +++ b/semantic/.versions @@ -0,0 +1,4 @@ +jquery@1.11.3_2 +meteor@1.1.6 +semantic:ui-css@2.0.7 +underscore@1.0.3 diff --git a/semantic/LICENSE b/semantic/LICENSE new file mode 100644 index 0000000..9818972 --- /dev/null +++ b/semantic/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015 Semantic Org + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/semantic/README.md b/semantic/README.md new file mode 100644 index 0000000..8df97d0 --- /dev/null +++ b/semantic/README.md @@ -0,0 +1,7 @@ +# CSS Distribution + +This repository is automatically synced with the main [Semantic UI](https://github.com/Semantic-Org/Semantic-UI) repository to provide lightweight CSS only version of Semantic UI. + +This package **does not support theming** and includes generated CSS files of the default theme only. + +You can view more on Semantic UI at [LearnSemantic.com](http://www.learnsemantic.com) and [Semantic-UI.com](http://www.semantic-ui.com) diff --git a/semantic/components/accordion.css b/semantic/components/accordion.css new file mode 100644 index 0000000..e9b104d --- /dev/null +++ b/semantic/components/accordion.css @@ -0,0 +1,253 @@ +/*! + * # Semantic UI 2.4.1 - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .accordion { + max-width: 100%; +} +.ui.accordion .accordion { + margin: 1em 0em 0em; + padding: 0em; +} + +/* Title */ +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; +} + +/* Default Styling */ +.ui.accordion .title:not(.ui) { + padding: 0.5em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1em; + color: rgba(0, 0, 0, 0.87); +} + +/* Content */ +.ui.accordion .title ~ .content, +.ui.accordion .accordion .title ~ .content { + display: none; +} + +/* Default Styling */ +.ui.accordion:not(.styled) .title ~ .content:not(.ui), +.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { + margin: ''; + padding: 0.5em 0em 1em; +} +.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { + padding-bottom: 0em; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: inline-block; + float: none; + opacity: 1; + width: 1.25em; + height: 1em; + margin: 0em 0.25rem 0em 0rem; + padding: 0em; + font-size: 1em; + -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: opacity 0.1s ease, -webkit-transform 0.1s ease; + transition: transform 0.1s ease, opacity 0.1s ease; + transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease; + vertical-align: baseline; + -webkit-transform: none; + transform: none; +} + +/*-------------- + Coupling +---------------*/ + + +/* Menu */ +.ui.accordion.menu .item .title { + display: block; + padding: 0em; +} +.ui.accordion.menu .item .title > .dropdown.icon { + float: right; + margin: 0.21425em 0em 0em 1em; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +/* Header */ +.ui.accordion .ui.header .dropdown.icon { + font-size: 1em; + margin: 0em 0.25rem 0em 0rem; +} + + +/******************************* + States +*******************************/ + +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.ui.accordion.menu .item .active.title > .dropdown.icon { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Styled +---------------*/ + +.ui.styled.accordion { + width: 600px; +} +.ui.styled.accordion, +.ui.styled.accordion .accordion { + border-radius: 0.28571429rem; + background: #FFFFFF; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15); +} +.ui.styled.accordion .title, +.ui.styled.accordion .accordion .title { + margin: 0em; + padding: 0.75em 1em; + color: rgba(0, 0, 0, 0.4); + font-weight: bold; + border-top: 1px solid rgba(34, 36, 38, 0.15); + -webkit-transition: background 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, color 0.1s ease; +} +.ui.styled.accordion > .title:first-child, +.ui.styled.accordion .accordion .title:first-child { + border-top: none; +} + +/* Content */ +.ui.styled.accordion .content, +.ui.styled.accordion .accordion .content { + margin: 0em; + padding: 0.5em 1em 1.5em; +} +.ui.styled.accordion .accordion .content { + padding: 0em; + padding: 0.5em 1em 1.5em; +} + +/* Hover */ +.ui.styled.accordion .title:hover, +.ui.styled.accordion .active.title, +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: transparent; + color: rgba(0, 0, 0, 0.87); +} +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: transparent; + color: rgba(0, 0, 0, 0.87); +} + +/* Active */ +.ui.styled.accordion .active.title { + background: transparent; + color: rgba(0, 0, 0, 0.95); +} +.ui.styled.accordion .accordion .active.title { + background: transparent; + color: rgba(0, 0, 0, 0.95); +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Active +---------------*/ + +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.accordion .title:not(.ui) { + color: rgba(255, 255, 255, 0.9); +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Accordion'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); + font-weight: normal; + font-style: normal; +} + +/* Dropdown Icon */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + font-family: Accordion; + line-height: 1; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} +.ui.accordion .title .dropdown.icon:before, +.ui.accordion .accordion .title .dropdown.icon:before { + content: '\f0da' /*rtl:'\f0d9'*/; +} + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/accordion.js b/semantic/components/accordion.js new file mode 100644 index 0000000..94e8830 --- /dev/null +++ b/semantic/components/accordion.js @@ -0,0 +1,613 @@ +/*! + * # Semantic UI 2.4.1 - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.accordion = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous instance', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $title = $module.find(selector.title); + $content = $module.find(selector.content); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, + + event: { + click: function() { + module.toggle.call(this); + } + }, + + toggle: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) + ; + module.debug('Toggling visibility of content', $activeTitle); + if(isOpen || isOpening) { + if(settings.collapsible) { + module.close.call($activeTitle); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open.call($activeTitle); + } + }, + + open: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) + ; + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + settings.onChanging.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; + }, + + close: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) + ; + if((isActive || isOpening) && !isClosing) { + module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); + settings.onChanging.call($activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideUp(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; + module.reset.display.call(this); + settings.onClose.call(this); + settings.onChange.call(this); + }) + ; + } + }, + + closeOthers: function(index) { + var + $activeTitle = (index !== undefined) + ? $title.eq(index) + : $(this).closest(selector.title), + $parentTitles = $activeTitle.parents(selector.content).prev(selector.title), + $activeAccordion = $activeTitle.closest(selector.accordion), + activeSelector = selector.title + '.' + className.active + ':visible', + activeContent = selector.content + '.' + className.active + ':visible', + $openTitles, + $nestedTitles, + $openContents + ; + if(settings.closeNested) { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $openContents = $openTitles.next($content); + } + else { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); + $openTitles = $openTitles.not($nestedTitles); + $openContents = $openTitles.next($content); + } + if( ($openTitles.length > 0) ) { + module.debug('Exclusive enabled, closing other content', $openTitles); + $openTitles + .removeClass(className.active) + ; + $openContents + .removeClass(className.animating) + .stop(true, true) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $openContents + .children() + .transition({ + animation : 'fade out', + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $openContents + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $openContents + .slideUp(settings.duration , settings.easing, function() { + $(this).removeClass(className.active); + module.reset.display.call(this); + }) + ; + } + }, + + reset: { + + display: function() { + module.verbose('Removing inline display from element', this); + $(this).css('display', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + opacity: function() { + module.verbose('Removing inline opacity from element', this); + $(this).css('opacity', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + module.debug('Changing internal', name, value); + if(value !== undefined) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else { + module[name] = value; + } + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + + name : 'Accordion', + namespace : 'accordion', + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // event on title that opens accordion + + observeChanges : true, // whether accordion should automatically refresh on DOM insertion + + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + onOpening : function(){}, // callback before open animation + onClosing : function(){}, // callback before closing animation + onChanging : function(){}, // callback before closing or opening animation + + onOpen : function(){}, // callback after open animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active', + animating : 'animating' + }, + + selector : { + accordion : '.accordion', + title : '.title', + trigger : '.title', + content : '.content' + } + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); + diff --git a/semantic/components/accordion.min.css b/semantic/components/accordion.min.css new file mode 100644 index 0000000..80a8e46 --- /dev/null +++ b/semantic/components/accordion.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.accordion,.ui.accordion .accordion{max-width:100%}.ui.accordion .accordion{margin:1em 0 0;padding:0}.ui.accordion .accordion .title,.ui.accordion .title{cursor:pointer}.ui.accordion .title:not(.ui){padding:.5em 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;color:rgba(0,0,0,.87)}.ui.accordion .accordion .title~.content,.ui.accordion .title~.content{display:none}.ui.accordion:not(.styled) .accordion .title~.content:not(.ui),.ui.accordion:not(.styled) .title~.content:not(.ui){margin:'';padding:.5em 0 1em}.ui.accordion:not(.styled) .title~.content:not(.ui):last-child{padding-bottom:0}.ui.accordion .accordion .title .dropdown.icon,.ui.accordion .title .dropdown.icon{display:inline-block;float:none;opacity:1;width:1.25em;height:1em;margin:0 .25rem 0 0;padding:0;font-size:1em;-webkit-transition:opacity .1s ease,-webkit-transform .1s ease;transition:opacity .1s ease,-webkit-transform .1s ease;transition:transform .1s ease,opacity .1s ease;transition:transform .1s ease,opacity .1s ease,-webkit-transform .1s ease;vertical-align:baseline;-webkit-transform:none;transform:none}.ui.accordion.menu .item .title{display:block;padding:0}.ui.accordion.menu .item .title>.dropdown.icon{float:right;margin:.21425em 0 0 1em;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui.accordion .ui.header .dropdown.icon{font-size:1em;margin:0 .25rem 0 0}.ui.accordion .accordion .active.title .dropdown.icon,.ui.accordion .active.title .dropdown.icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui.accordion.menu .item .active.title>.dropdown.icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui.styled.accordion{width:600px}.ui.styled.accordion,.ui.styled.accordion .accordion{border-radius:.28571429rem;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15)}.ui.styled.accordion .accordion .title,.ui.styled.accordion .title{margin:0;padding:.75em 1em;color:rgba(0,0,0,.4);font-weight:700;border-top:1px solid rgba(34,36,38,.15);-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease}.ui.styled.accordion .accordion .title:first-child,.ui.styled.accordion>.title:first-child{border-top:none}.ui.styled.accordion .accordion .content,.ui.styled.accordion .content{margin:0;padding:.5em 1em 1.5em}.ui.styled.accordion .accordion .content{padding:0;padding:.5em 1em 1.5em}.ui.styled.accordion .accordion .active.title,.ui.styled.accordion .accordion .title:hover,.ui.styled.accordion .active.title,.ui.styled.accordion .title:hover{background:0 0;color:rgba(0,0,0,.87)}.ui.styled.accordion .accordion .active.title,.ui.styled.accordion .accordion .title:hover{background:0 0;color:rgba(0,0,0,.87)}.ui.styled.accordion .active.title{background:0 0;color:rgba(0,0,0,.95)}.ui.styled.accordion .accordion .active.title{background:0 0;color:rgba(0,0,0,.95)}.ui.accordion .accordion .active.content,.ui.accordion .active.content{display:block}.ui.fluid.accordion,.ui.fluid.accordion .accordion{width:100%}.ui.inverted.accordion .title:not(.ui){color:rgba(255,255,255,.9)}@font-face{font-family:Accordion;src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');font-weight:400;font-style:normal}.ui.accordion .accordion .title .dropdown.icon,.ui.accordion .title .dropdown.icon{font-family:Accordion;line-height:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.ui.accordion .accordion .title .dropdown.icon:before,.ui.accordion .title .dropdown.icon:before{content:'\f0da'} \ No newline at end of file diff --git a/semantic/components/accordion.min.js b/semantic/components/accordion.min.js new file mode 100644 index 0000000..1dd73b8 --- /dev/null +++ b/semantic/components/accordion.min.js @@ -0,0 +1 @@ +!function(F,A,e,q){"use strict";A=void 0!==A&&A.Math==Math?A:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),F.fn.accordion=function(a){var v,s=F(this),b=(new Date).getTime(),y=[],C=a,O="string"==typeof C,x=[].slice.call(arguments,1);A.requestAnimationFrame||A.mozRequestAnimationFrame||A.webkitRequestAnimationFrame||A.msRequestAnimationFrame;return s.each(function(){var e,c,u=F.isPlainObject(a)?F.extend(!0,{},F.fn.accordion.settings,a):F.extend({},F.fn.accordion.settings),d=u.className,n=u.namespace,g=u.selector,l=u.error,t="."+n,i="module-"+n,o=s.selector||"",f=F(this),m=f.find(g.title),p=f.find(g.content),r=this,h=f.data(i);c={initialize:function(){c.debug("Initializing",f),c.bind.events(),u.observeChanges&&c.observeChanges(),c.instantiate()},instantiate:function(){h=c,f.data(i,c)},destroy:function(){c.debug("Destroying previous instance",f),f.off(t).removeData(i)},refresh:function(){m=f.find(g.title),p=f.find(g.content)},observeChanges:function(){"MutationObserver"in A&&((e=new MutationObserver(function(e){c.debug("DOM tree modified, updating selector cache"),c.refresh()})).observe(r,{childList:!0,subtree:!0}),c.debug("Setting up mutation observer",e))},bind:{events:function(){c.debug("Binding delegated events"),f.on(u.on+t,g.trigger,c.event.click)}},event:{click:function(){c.toggle.call(this)}},toggle:function(e){var n=e!==q?"number"==typeof e?m.eq(e):F(e).closest(g.title):F(this).closest(g.title),t=n.next(p),i=t.hasClass(d.animating),o=t.hasClass(d.active),a=o&&!i,s=!o&&i;c.debug("Toggling visibility of content",n),a||s?u.collapsible?c.close.call(n):c.debug("Cannot close accordion content collapsing is disabled"):c.open.call(n)},open:function(e){var n=e!==q?"number"==typeof e?m.eq(e):F(e).closest(g.title):F(this).closest(g.title),t=n.next(p),i=t.hasClass(d.animating);t.hasClass(d.active)||i?c.debug("Accordion already open, skipping",t):(c.debug("Opening accordion content",n),u.onOpening.call(t),u.onChanging.call(t),u.exclusive&&c.closeOthers.call(n),n.addClass(d.active),t.stop(!0,!0).addClass(d.animating),u.animateChildren&&(F.fn.transition!==q&&f.transition("is supported")?t.children().transition({animation:"fade in",queue:!1,useFailSafe:!0,debug:u.debug,verbose:u.verbose,duration:u.duration}):t.children().stop(!0,!0).animate({opacity:1},u.duration,c.resetOpacity)),t.slideDown(u.duration,u.easing,function(){t.removeClass(d.animating).addClass(d.active),c.reset.display.call(this),u.onOpen.call(this),u.onChange.call(this)}))},close:function(e){var n=e!==q?"number"==typeof e?m.eq(e):F(e).closest(g.title):F(this).closest(g.title),t=n.next(p),i=t.hasClass(d.animating),o=t.hasClass(d.active);!o&&!(!o&&i)||o&&i||(c.debug("Closing accordion content",t),u.onClosing.call(t),u.onChanging.call(t),n.removeClass(d.active),t.stop(!0,!0).addClass(d.animating),u.animateChildren&&(F.fn.transition!==q&&f.transition("is supported")?t.children().transition({animation:"fade out",queue:!1,useFailSafe:!0,debug:u.debug,verbose:u.verbose,duration:u.duration}):t.children().stop(!0,!0).animate({opacity:0},u.duration,c.resetOpacity)),t.slideUp(u.duration,u.easing,function(){t.removeClass(d.animating).removeClass(d.active),c.reset.display.call(this),u.onClose.call(this),u.onChange.call(this)}))},closeOthers:function(e){var n,t,i,o=e!==q?m.eq(e):F(this).closest(g.title),a=o.parents(g.content).prev(g.title),s=o.closest(g.accordion),l=g.title+"."+d.active+":visible",r=g.content+"."+d.active+":visible";i=u.closeNested?(n=s.find(l).not(a)).next(p):(n=s.find(l).not(a),t=s.find(r).find(l).not(a),(n=n.not(t)).next(p)),0 0); + }, + expectingJSON: function() { + return settings.dataType === 'json' || settings.dataType === 'jsonp'; + }, + form: function() { + return $module.is('form') || $context.is('form'); + }, + mocked: function() { + return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync); + }, + input: function() { + return $module.is('input'); + }, + loading: function() { + return (module.request) + ? (module.request.state() == 'pending') + : false + ; + }, + abortedRequest: function(xhr) { + if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) { + module.verbose('XHR request determined to be aborted'); + return true; + } + else { + module.verbose('XHR request was not aborted'); + return false; + } + }, + validResponse: function(response) { + if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) { + module.verbose('Response is not JSON, skipping validation', settings.successTest, response); + return true; + } + module.debug('Checking JSON returned success', settings.successTest, response); + if( settings.successTest(response) ) { + module.debug('Response passed success test', response); + return true; + } + else { + module.debug('Response failed success test', response); + return false; + } + } + }, + + was: { + cancelled: function() { + return (module.cancelled || false); + }, + succesful: function() { + return (module.request && module.request.state() == 'resolved'); + }, + failure: function() { + return (module.request && module.request.state() == 'rejected'); + }, + complete: function() { + return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') ); + } + }, + + add: { + urlData: function(url, urlData) { + var + requiredVariables, + optionalVariables + ; + if(url) { + requiredVariables = url.match(settings.regExp.required); + optionalVariables = url.match(settings.regExp.optional); + urlData = urlData || settings.urlData; + if(requiredVariables) { + module.debug('Looking for required URL variables', requiredVariables); + $.each(requiredVariables, function(index, templatedString) { + var + // allow legacy {$var} style + variable = (templatedString.indexOf('$') !== -1) + ? templatedString.substr(2, templatedString.length - 3) + : templatedString.substr(1, templatedString.length - 2), + value = ($.isPlainObject(urlData) && urlData[variable] !== undefined) + ? urlData[variable] + : ($module.data(variable) !== undefined) + ? $module.data(variable) + : ($context.data(variable) !== undefined) + ? $context.data(variable) + : urlData[variable] + ; + // remove value + if(value === undefined) { + module.error(error.requiredParameter, variable, url); + url = false; + return false; + } + else { + module.verbose('Found required variable', variable, value); + value = (settings.encodeParameters) + ? module.get.urlEncodedValue(value) + : value + ; + url = url.replace(templatedString, value); + } + }); + } + if(optionalVariables) { + module.debug('Looking for optional URL variables', requiredVariables); + $.each(optionalVariables, function(index, templatedString) { + var + // allow legacy {/$var} style + variable = (templatedString.indexOf('$') !== -1) + ? templatedString.substr(3, templatedString.length - 4) + : templatedString.substr(2, templatedString.length - 3), + value = ($.isPlainObject(urlData) && urlData[variable] !== undefined) + ? urlData[variable] + : ($module.data(variable) !== undefined) + ? $module.data(variable) + : ($context.data(variable) !== undefined) + ? $context.data(variable) + : urlData[variable] + ; + // optional replacement + if(value !== undefined) { + module.verbose('Optional variable Found', variable, value); + url = url.replace(templatedString, value); + } + else { + module.verbose('Optional variable not found', variable); + // remove preceding slash if set + if(url.indexOf('/' + templatedString) !== -1) { + url = url.replace('/' + templatedString, ''); + } + else { + url = url.replace(templatedString, ''); + } + } + }); + } + } + return url; + }, + formData: function(data) { + var + canSerialize = ($.fn.serializeObject !== undefined), + formData = (canSerialize) + ? $form.serializeObject() + : $form.serialize(), + hasOtherData + ; + data = data || settings.data; + hasOtherData = $.isPlainObject(data); + + if(hasOtherData) { + if(canSerialize) { + module.debug('Extending existing data with form data', data, formData); + data = $.extend(true, {}, data, formData); + } + else { + module.error(error.missingSerialize); + module.debug('Cant extend data. Replacing data with form data', data, formData); + data = formData; + } + } + else { + module.debug('Adding form data', formData); + data = formData; + } + return data; + } + }, + + send: { + request: function() { + module.set.loading(); + module.request = module.create.request(); + if( module.is.mocked() ) { + module.mockedXHR = module.create.mockedXHR(); + } + else { + module.xhr = module.create.xhr(); + } + settings.onRequest.call(context, module.request, module.xhr); + } + }, + + event: { + trigger: function(event) { + module.query(); + if(event.type == 'submit' || event.type == 'click') { + event.preventDefault(); + } + }, + xhr: { + always: function() { + // nothing special + }, + done: function(response, textStatus, xhr) { + var + context = this, + elapsedTime = (new Date().getTime() - requestStartTime), + timeLeft = (settings.loadingDuration - elapsedTime), + translatedResponse = ( $.isFunction(settings.onResponse) ) + ? module.is.expectingJSON() + ? settings.onResponse.call(context, $.extend(true, {}, response)) + : settings.onResponse.call(context, response) + : false + ; + timeLeft = (timeLeft > 0) + ? timeLeft + : 0 + ; + if(translatedResponse) { + module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response); + response = translatedResponse; + } + if(timeLeft > 0) { + module.debug('Response completed early delaying state change by', timeLeft); + } + setTimeout(function() { + if( module.is.validResponse(response) ) { + module.request.resolveWith(context, [response, xhr]); + } + else { + module.request.rejectWith(context, [xhr, 'invalid']); + } + }, timeLeft); + }, + fail: function(xhr, status, httpMessage) { + var + context = this, + elapsedTime = (new Date().getTime() - requestStartTime), + timeLeft = (settings.loadingDuration - elapsedTime) + ; + timeLeft = (timeLeft > 0) + ? timeLeft + : 0 + ; + if(timeLeft > 0) { + module.debug('Response completed early delaying state change by', timeLeft); + } + setTimeout(function() { + if( module.is.abortedRequest(xhr) ) { + module.request.rejectWith(context, [xhr, 'aborted', httpMessage]); + } + else { + module.request.rejectWith(context, [xhr, 'error', status, httpMessage]); + } + }, timeLeft); + } + }, + request: { + done: function(response, xhr) { + module.debug('Successful API Response', response); + if(settings.cache === 'local' && url) { + module.write.cachedResponse(url, response); + module.debug('Saving server response locally', module.cache); + } + settings.onSuccess.call(context, response, $module, xhr); + }, + complete: function(firstParameter, secondParameter) { + var + xhr, + response + ; + // have to guess callback parameters based on request success + if( module.was.succesful() ) { + response = firstParameter; + xhr = secondParameter; + } + else { + xhr = firstParameter; + response = module.get.responseFromXHR(xhr); + } + module.remove.loading(); + settings.onComplete.call(context, response, $module, xhr); + }, + fail: function(xhr, status, httpMessage) { + var + // pull response from xhr if available + response = module.get.responseFromXHR(xhr), + errorMessage = module.get.errorFromRequest(response, status, httpMessage) + ; + if(status == 'aborted') { + module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage); + settings.onAbort.call(context, status, $module, xhr); + return true; + } + else if(status == 'invalid') { + module.debug('JSON did not pass success test. A server-side error has most likely occurred', response); + } + else if(status == 'error') { + if(xhr !== undefined) { + module.debug('XHR produced a server error', status, httpMessage); + // make sure we have an error to display to console + if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { + module.error(error.statusMessage + httpMessage, ajaxSettings.url); + } + settings.onError.call(context, errorMessage, $module, xhr); + } + } + + if(settings.errorDuration && status !== 'aborted') { + module.debug('Adding error state'); + module.set.error(); + if( module.should.removeError() ) { + setTimeout(module.remove.error, settings.errorDuration); + } + } + module.debug('API Request failed', errorMessage, xhr); + settings.onFailure.call(context, response, $module, xhr); + } + } + }, + + create: { + + request: function() { + // api request promise + return $.Deferred() + .always(module.event.request.complete) + .done(module.event.request.done) + .fail(module.event.request.fail) + ; + }, + + mockedXHR: function () { + var + // xhr does not simulate these properties of xhr but must return them + textStatus = false, + status = false, + httpMessage = false, + responder = settings.mockResponse || settings.response, + asyncResponder = settings.mockResponseAsync || settings.responseAsync, + asyncCallback, + response, + mockedXHR + ; + + mockedXHR = $.Deferred() + .always(module.event.xhr.complete) + .done(module.event.xhr.done) + .fail(module.event.xhr.fail) + ; + + if(responder) { + if( $.isFunction(responder) ) { + module.debug('Using specified synchronous callback', responder); + response = responder.call(context, requestSettings); + } + else { + module.debug('Using settings specified response', responder); + response = responder; + } + // simulating response + mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]); + } + else if( $.isFunction(asyncResponder) ) { + asyncCallback = function(response) { + module.debug('Async callback returned response', response); + + if(response) { + mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]); + } + else { + mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]); + } + }; + module.debug('Using specified async response callback', asyncResponder); + asyncResponder.call(context, requestSettings, asyncCallback); + } + return mockedXHR; + }, + + xhr: function() { + var + xhr + ; + // ajax request promise + xhr = $.ajax(ajaxSettings) + .always(module.event.xhr.always) + .done(module.event.xhr.done) + .fail(module.event.xhr.fail) + ; + module.verbose('Created server request', xhr, ajaxSettings); + return xhr; + } + }, + + set: { + error: function() { + module.verbose('Adding error state to element', $context); + $context.addClass(className.error); + }, + loading: function() { + module.verbose('Adding loading state to element', $context); + $context.addClass(className.loading); + requestStartTime = new Date().getTime(); + } + }, + + remove: { + error: function() { + module.verbose('Removing error state from element', $context); + $context.removeClass(className.error); + }, + loading: function() { + module.verbose('Removing loading state from element', $context); + $context.removeClass(className.loading); + } + }, + + get: { + responseFromXHR: function(xhr) { + return $.isPlainObject(xhr) + ? (module.is.expectingJSON()) + ? module.decode.json(xhr.responseText) + : xhr.responseText + : false + ; + }, + errorFromRequest: function(response, status, httpMessage) { + return ($.isPlainObject(response) && response.error !== undefined) + ? response.error // use json error message + : (settings.error[status] !== undefined) // use server error message + ? settings.error[status] + : httpMessage + ; + }, + request: function() { + return module.request || false; + }, + xhr: function() { + return module.xhr || false; + }, + settings: function() { + var + runSettings + ; + runSettings = settings.beforeSend.call(context, settings); + if(runSettings) { + if(runSettings.success !== undefined) { + module.debug('Legacy success callback detected', runSettings); + module.error(error.legacyParameters, runSettings.success); + runSettings.onSuccess = runSettings.success; + } + if(runSettings.failure !== undefined) { + module.debug('Legacy failure callback detected', runSettings); + module.error(error.legacyParameters, runSettings.failure); + runSettings.onFailure = runSettings.failure; + } + if(runSettings.complete !== undefined) { + module.debug('Legacy complete callback detected', runSettings); + module.error(error.legacyParameters, runSettings.complete); + runSettings.onComplete = runSettings.complete; + } + } + if(runSettings === undefined) { + module.error(error.noReturnedValue); + } + if(runSettings === false) { + return runSettings; + } + return (runSettings !== undefined) + ? $.extend(true, {}, runSettings) + : $.extend(true, {}, settings) + ; + }, + urlEncodedValue: function(value) { + var + decodedValue = window.decodeURIComponent(value), + encodedValue = window.encodeURIComponent(value), + alreadyEncoded = (decodedValue !== value) + ; + if(alreadyEncoded) { + module.debug('URL value is already encoded, avoiding double encoding', value); + return value; + } + module.verbose('Encoding value using encodeURIComponent', value, encodedValue); + return encodedValue; + }, + defaultData: function() { + var + data = {} + ; + if( !$.isWindow(element) ) { + if( module.is.input() ) { + data.value = $module.val(); + } + else if( module.is.form() ) { + + } + else { + data.text = $module.text(); + } + } + return data; + }, + event: function() { + if( $.isWindow(element) || settings.on == 'now' ) { + module.debug('API called without element, no events attached'); + return false; + } + else if(settings.on == 'auto') { + if( $module.is('input') ) { + return (element.oninput !== undefined) + ? 'input' + : (element.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + } + else if( $module.is('form') ) { + return 'submit'; + } + else { + return 'click'; + } + } + else { + return settings.on; + } + }, + templatedURL: function(action) { + action = action || $module.data(metadata.action) || settings.action || false; + url = $module.data(metadata.url) || settings.url || false; + if(url) { + module.debug('Using specified url', url); + return url; + } + if(action) { + module.debug('Looking up url for action', action, settings.api); + if(settings.api[action] === undefined && !module.is.mocked()) { + module.error(error.missingAction, settings.action, settings.api); + return; + } + url = settings.api[action]; + } + else if( module.is.form() ) { + url = $module.attr('action') || $context.attr('action') || false; + module.debug('No url or action specified, defaulting to form action', url); + } + return url; + } + }, + + abort: function() { + var + xhr = module.get.xhr() + ; + if( xhr && xhr.state() !== 'resolved') { + module.debug('Cancelling API request'); + xhr.abort(); + } + }, + + // reset state + reset: function() { + module.remove.error(); + module.remove.loading(); + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + //'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.api.settings = { + + name : 'API', + namespace : 'api', + + debug : false, + verbose : false, + performance : true, + + // object containing all templates endpoints + api : {}, + + // whether to cache responses + cache : true, + + // whether new requests should abort previous requests + interruptRequests : true, + + // event binding + on : 'auto', + + // context for applying state classes + stateContext : false, + + // duration for loading state + loadingDuration : 0, + + // whether to hide errors after a period of time + hideError : 'auto', + + // duration for error state + errorDuration : 2000, + + // whether parameters should be encoded with encodeURIComponent + encodeParameters : true, + + // API action to use + action : false, + + // templated URL to use + url : false, + + // base URL to apply to all endpoints + base : '', + + // data that will + urlData : {}, + + // whether to add default data to url data + defaultData : true, + + // whether to serialize closest form + serializeForm : false, + + // how long to wait before request should occur + throttle : 0, + + // whether to throttle first request or only repeated + throttleFirstRequest : true, + + // standard ajax settings + method : 'get', + data : {}, + dataType : 'json', + + // mock response + mockResponse : false, + mockResponseAsync : false, + + // aliases for mock + response : false, + responseAsync : false, + + // callbacks before request + beforeSend : function(settings) { return settings; }, + beforeXHR : function(xhr) {}, + onRequest : function(promise, xhr) {}, + + // after request + onResponse : false, // function(response) { }, + + // response was successful, if JSON passed validation + onSuccess : function(response, $module) {}, + + // request finished without aborting + onComplete : function(response, $module) {}, + + // failed JSON success test + onFailure : function(response, $module) {}, + + // server error + onError : function(errorMessage, $module) {}, + + // request aborted + onAbort : function(errorMessage, $module) {}, + + successTest : false, + + // errors + error : { + beforeSend : 'The before send function has aborted the request', + error : 'There was an error with your request', + exitConditions : 'API Request Aborted. Exit conditions met', + JSONParse : 'JSON could not be parsed during error handling', + legacyParameters : 'You are using legacy API success callback names', + method : 'The method you called is not defined', + missingAction : 'API action used but no url was defined', + missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object', + missingURL : 'No URL specified for api event', + noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.', + noStorage : 'Caching responses locally requires session storage', + parseError : 'There was an error parsing your request', + requiredParameter : 'Missing a required URL parameter: ', + statusMessage : 'Server gave an error: ', + timeout : 'Your request timed out' + }, + + regExp : { + required : /\{\$*[A-z0-9]+\}/g, + optional : /\{\/\$*[A-z0-9]+\}/g, + }, + + className: { + loading : 'loading', + error : 'error' + }, + + selector: { + disabled : '.disabled', + form : 'form' + }, + + metadata: { + action : 'action', + url : 'url' + } +}; + + + +})( jQuery, window, document ); diff --git a/semantic/components/api.min.js b/semantic/components/api.min.js new file mode 100644 index 0000000..bc1ce08 --- /dev/null +++ b/semantic/components/api.min.js @@ -0,0 +1 @@ +!function(j,O,e,w){"use strict";O=void 0!==O&&O.Math==Math?O:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();j.api=j.fn.api=function(q){var R,e=j.isFunction(this)?j(O):j(this),x=e.selector||"",S=(new Date).getTime(),A=[],k=q,T="string"==typeof k,P=[].slice.call(arguments,1);return e.each(function(){var s,i,r,e,a,u,c=j.isPlainObject(q)?j.extend(!0,{},j.fn.api.settings,q):j.extend({},j.fn.api.settings),t=c.namespace,n=c.metadata,o=c.selector,d=c.error,l=c.className,g="."+t,f="module-"+t,p=j(this),m=p.closest(o.form),b=c.stateContext?j(c.stateContext):p,v=this,h=b[0],y=p.data(f);u={initialize:function(){T||u.bind.events(),u.instantiate()},instantiate:function(){u.verbose("Storing instance of module",u),y=u,p.data(f,y)},destroy:function(){u.verbose("Destroying previous module for",v),p.removeData(f).off(g)},bind:{events:function(){var e=u.get.event();e?(u.verbose("Attaching API events to element",e),p.on(e+g,u.event.trigger)):"now"==c.on&&(u.debug("Querying API endpoint immediately"),u.query())}},decode:{json:function(e){if(e!==w&&"string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}},read:{cachedResponse:function(e){var t;if(O.Storage!==w)return t=sessionStorage.getItem(e),u.debug("Using cached response",e,t),t=u.decode.json(t);u.error(d.noStorage)}},write:{cachedResponse:function(e,t){t&&""===t?u.debug("Response empty, not caching",t):O.Storage!==w?(j.isPlainObject(t)&&(t=JSON.stringify(t)),sessionStorage.setItem(e,t),u.verbose("Storing cached response for url",e,t)):u.error(d.noStorage)}},query:function(){if(u.is.disabled())u.debug("Element is disabled API request aborted");else{if(u.is.loading()){if(!c.interruptRequests)return void u.debug("Cancelling request, previous request is still pending");u.debug("Interrupting previous request"),u.abort()}if(c.defaultData&&j.extend(!0,c.urlData,u.get.defaultData()),c.serializeForm&&(c.data=u.add.formData(c.data)),!1===(i=u.get.settings()))return u.cancelled=!0,void u.error(d.beforeSend);if(u.cancelled=!1,(r=u.get.templatedURL())||u.is.mocked()){if((r=u.add.urlData(r))||u.is.mocked()){if(i.url=c.base+r,s=j.extend(!0,{},c,{type:c.method||c.type,data:e,url:c.base+r,beforeSend:c.beforeXHR,success:function(){},failure:function(){},complete:function(){}}),u.debug("Querying URL",s.url),u.verbose("Using AJAX settings",s),"local"===c.cache&&u.read.cachedResponse(r))return u.debug("Response returned from local cache"),u.request=u.create.request(),void u.request.resolveWith(h,[u.read.cachedResponse(r)]);c.throttle?c.throttleFirstRequest||u.timer?(u.debug("Throttling request",c.throttle),clearTimeout(u.timer),u.timer=setTimeout(function(){u.timer&&delete u.timer,u.debug("Sending throttled request",e,s.method),u.send.request()},c.throttle)):(u.debug("Sending request",e,s.method),u.send.request(),u.timer=setTimeout(function(){},c.throttle)):(u.debug("Sending request",e,s.method),u.send.request())}}else u.error(d.missingURL)}},should:{removeError:function(){return!0===c.hideError||"auto"===c.hideError&&!u.is.form()}},is:{disabled:function(){return 0 .button { + margin: 0px; +} +.ui.labeled.button > .label { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 0px 0px -1px !important; + padding: ''; + font-size: 1em; + border-color: rgba(34, 36, 38, 0.15); +} + +/* Tag */ +.ui.labeled.button > .tag.label:before { + width: 1.85em; + height: 1.85em; +} + +/* Right */ +.ui.labeled.button:not([class*="left labeled"]) > .button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.button:not([class*="left labeled"]) > .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +/* Left Side */ +.ui[class*="left labeled"].button > .button { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="left labeled"].button > .label { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +/*------------------- + Social +--------------------*/ + + +/* Facebook */ +.ui.facebook.button { + background-color: #3B5998; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.facebook.button:hover { + background-color: #304d8a; + color: #FFFFFF; + text-shadow: none; +} +.ui.facebook.button:active { + background-color: #2d4373; + color: #FFFFFF; + text-shadow: none; +} + +/* Twitter */ +.ui.twitter.button { + background-color: #55ACEE; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.twitter.button:hover { + background-color: #35a2f4; + color: #FFFFFF; + text-shadow: none; +} +.ui.twitter.button:active { + background-color: #2795e9; + color: #FFFFFF; + text-shadow: none; +} + +/* Google Plus */ +.ui.google.plus.button { + background-color: #DD4B39; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.google.plus.button:hover { + background-color: #e0321c; + color: #FFFFFF; + text-shadow: none; +} +.ui.google.plus.button:active { + background-color: #c23321; + color: #FFFFFF; + text-shadow: none; +} + +/* Linked In */ +.ui.linkedin.button { + background-color: #1F88BE; + color: #FFFFFF; + text-shadow: none; +} +.ui.linkedin.button:hover { + background-color: #147baf; + color: #FFFFFF; + text-shadow: none; +} +.ui.linkedin.button:active { + background-color: #186992; + color: #FFFFFF; + text-shadow: none; +} + +/* YouTube */ +.ui.youtube.button { + background-color: #FF0000; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.youtube.button:hover { + background-color: #e60000; + color: #FFFFFF; + text-shadow: none; +} +.ui.youtube.button:active { + background-color: #cc0000; + color: #FFFFFF; + text-shadow: none; +} + +/* Instagram */ +.ui.instagram.button { + background-color: #49769C; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.instagram.button:hover { + background-color: #3d698e; + color: #FFFFFF; + text-shadow: none; +} +.ui.instagram.button:active { + background-color: #395c79; + color: #FFFFFF; + text-shadow: none; +} + +/* Pinterest */ +.ui.pinterest.button { + background-color: #BD081C; + color: #FFFFFF; + text-shadow: none; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.pinterest.button:hover { + background-color: #ac0013; + color: #FFFFFF; + text-shadow: none; +} +.ui.pinterest.button:active { + background-color: #8c0615; + color: #FFFFFF; + text-shadow: none; +} + +/* VK */ +.ui.vk.button { + background-color: #4D7198; + color: #FFFFFF; + background-image: none; + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.vk.button:hover { + background-color: #41648a; + color: #FFFFFF; +} +.ui.vk.button:active { + background-color: #3c5876; + color: #FFFFFF; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: 0.85714286em; + opacity: 0.8; + margin: 0em 0.42857143em 0em -0.21428571em; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; + vertical-align: ''; + color: ''; +} +.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { + margin: 0em 0.42857143em 0em -0.21428571em; +} +.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { + margin: 0em -0.21428571em 0em 0.42857143em; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Floated +--------------------*/ + +.ui[class*="left floated"].buttons, +.ui[class*="left floated"].button { + float: left; + margin-left: 0em; + margin-right: 0.25em; +} +.ui[class*="right floated"].buttons, +.ui[class*="right floated"].button { + float: right; + margin-right: 0em; + margin-left: 0.25em; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.buttons .button, +.ui.compact.button { + padding: 0.58928571em 1.125em 0.58928571em; +} +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: 0.58928571em 0.58928571em 0.58928571em; +} +.ui.compact.labeled.icon.buttons .button, +.ui.compact.labeled.icon.button { + padding: 0.58928571em 3.69642857em 0.58928571em; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: 0.78571429rem; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: 0.85714286rem; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: 0.92857143rem; +} +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: 1rem; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: 1.14285714rem; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: 1.28571429rem; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: 1.42857143rem; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: 1.71428571rem; +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button { + padding: 0.78571429em 0.78571429em 0.78571429em; +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: 0.9; + margin: 0em !important; + vertical-align: top; +} + +/*------------------- + Basic +--------------------*/ + +.ui.basic.buttons .button, +.ui.basic.button { + background: transparent none !important; + color: rgba(0, 0, 0, 0.6) !important; + font-weight: normal; + border-radius: 0.28571429rem; + text-transform: none; + text-shadow: none !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} +.ui.basic.buttons { + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; +} +.ui.basic.buttons .button { + border-radius: 0em; +} +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background: #FFFFFF !important; + color: rgba(0, 0, 0, 0.8) !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + background: #FFFFFF !important; + color: rgba(0, 0, 0, 0.8) !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background: #F8F8F8 !important; + color: rgba(0, 0, 0, 0.9) !important; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.basic.buttons .active.button, +.ui.basic.active.button { + background: rgba(0, 0, 0, 0.05) !important; + -webkit-box-shadow: '' !important; + box-shadow: '' !important; + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +/* Vertical */ +.ui.basic.buttons .button:hover { + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset; +} +.ui.basic.buttons .button:active { + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset; +} +.ui.basic.buttons .active.button { + -webkit-box-shadow: '' !important; + box-shadow: '' !important; +} + +/* Standard Basic Inverted */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + background-color: transparent !important; + color: #F9FAFB !important; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; +} +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; +} +.ui.basic.inverted.buttons .button:focus, +.ui.basic.inverted.button:focus { + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; +} +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: rgba(255, 255, 255, 0.08) !important; + color: #FFFFFF !important; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important; +} +.ui.basic.inverted.buttons .active.button, +.ui.basic.inverted.active.button { + background-color: rgba(255, 255, 255, 0.08); + color: #FFFFFF; + text-shadow: none; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset; +} +.ui.basic.inverted.buttons .active.button:hover, +.ui.basic.inverted.active.button:hover { + background-color: rgba(255, 255, 255, 0.15); + -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; +} + +/* Basic Group */ +.ui.basic.buttons .button { + border-left: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.basic.vertical.buttons .button { + border-left: none; +} +.ui.basic.vertical.buttons .button { + border-left-width: 0px; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.basic.vertical.buttons .button:first-child { + border-top-width: 0px; +} + +/*-------------- + Labeled Icon +---------------*/ + +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: 4.07142857em !important; + padding-right: 1.5em !important; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + height: 100%; + line-height: 1; + border-radius: 0px; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + margin: 0em; + width: 2.57142857em; + background-color: rgba(0, 0, 0, 0.05); + color: ''; + -webkit-box-shadow: -1px 0px 0px 0px transparent inset; + box-shadow: -1px 0px 0px 0px transparent inset; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + top: 0em; + left: 0em; +} + +/* Right Labeled */ +.ui[class*="right labeled"].icon.button { + padding-right: 4.07142857em !important; + padding-left: 1.5em !important; +} +.ui[class*="right labeled"].icon.button > .icon { + left: auto; + right: 0em; + border-radius: 0px; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + -webkit-box-shadow: 1px 0px 0px 0px transparent inset; + box-shadow: 1px 0px 0px 0px transparent inset; +} +.ui.labeled.icon.buttons > .button > .icon:before, +.ui.labeled.icon.button > .icon:before, +.ui.labeled.icon.buttons > .button > .icon:after, +.ui.labeled.icon.button > .icon:after { + display: block; + position: absolute; + width: 100%; + top: 50%; + text-align: center; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: 0.28571429rem; + border-bottom-left-radius: 0.28571429rem; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: 0.28571429rem; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: 0.28571429rem; +} + +/* Fluid Labeled */ +.ui.fluid[class*="left labeled"].icon.button, +.ui.fluid[class*="right labeled"].icon.button { + padding-left: 1.5em !important; + padding-right: 1.5em !important; +} + +/*-------------- + Toggle +---------------*/ + + +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: #21BA45 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none; + color: #FFFFFF !important; +} +.ui.button.toggle.active:hover { + background-color: #16ab39 !important; + text-shadow: none; + color: #FFFFFF !important; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.button { + border-radius: 10em; +} +.ui.circular.button > .icon { + width: 1em; + vertical-align: baseline; +} + +/*------------------- + Or Buttons +--------------------*/ + +.ui.buttons .or { + position: relative; + width: 0.3em; + height: 2.57142857em; + z-index: 3; +} +.ui.buttons .or:before { + position: absolute; + text-align: center; + border-radius: 500rem; + content: 'or'; + top: 50%; + left: 50%; + background-color: #FFFFFF; + text-shadow: none; + margin-top: -0.89285714em; + margin-left: -0.89285714em; + width: 1.78571429em; + height: 1.78571429em; + line-height: 1.78571429em; + color: rgba(0, 0, 0, 0.4); + font-style: normal; + font-weight: bold; + -webkit-box-shadow: 0px 0px 0px 1px transparent inset; + box-shadow: 0px 0px 0px 1px transparent inset; +} +.ui.buttons .or[data-text]:before { + content: attr(data-text); +} + +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} + +/*------------------- + Attached +--------------------*/ + + +/* Singular */ +.ui.attached.button { + position: relative; + display: block; + margin: 0em; + border-radius: 0em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important; +} + +/* Top / Bottom */ +.ui.attached.top.button { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/* Left / Right */ +.ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + padding-right: 0.75em; + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} +.ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: 0.75em; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} + +/* Plural */ +.ui.attached.buttons { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + border-radius: 0em; + width: auto !important; + z-index: 2; + margin-left: -1px; + margin-right: -1px; +} +.ui.attached.buttons .button { + margin: 0em; +} +.ui.attached.buttons .button:first-child { + border-radius: 0em; +} +.ui.attached.buttons .button:last-child { + border-radius: 0em; +} + +/* Top / Bottom */ +.ui[class*="top attached"].buttons { + margin-bottom: -1px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui[class*="top attached"].buttons .button:first-child { + border-radius: 0.28571429rem 0em 0em 0em; +} +.ui[class*="top attached"].buttons .button:last-child { + border-radius: 0em 0.28571429rem 0em 0em; +} +.ui[class*="bottom attached"].buttons { + margin-top: -1px; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0em 0em 0em 0.28571429rem; +} +.ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0em 0em 0.28571429rem 0em; +} + +/* Left / Right */ +.ui[class*="left attached"].buttons { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + margin-right: 0em; + margin-left: -1px; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} +.ui[class*="left attached"].buttons .button:first-child { + margin-left: -1px; + border-radius: 0em 0.28571429rem 0em 0em; +} +.ui[class*="left attached"].buttons .button:last-child { + margin-left: -1px; + border-radius: 0em 0em 0.28571429rem 0em; +} +.ui[class*="right attached"].buttons { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + margin-left: 0em; + margin-right: -1px; + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} +.ui[class*="right attached"].buttons .button:first-child { + margin-left: -1px; + border-radius: 0.28571429rem 0em 0em 0em; +} +.ui[class*="right attached"].buttons .button:last-child { + margin-left: -1px; + border-radius: 0em 0em 0em 0.28571429rem; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.buttons, +.ui.fluid.button { + width: 100%; +} +.ui.fluid.button { + display: block; +} +.ui.two.buttons { + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} +.ui.three.buttons { + width: 100%; +} +.ui.three.buttons > .button { + width: 33.333%; +} +.ui.four.buttons { + width: 100%; +} +.ui.four.buttons > .button { + width: 25%; +} +.ui.five.buttons { + width: 100%; +} +.ui.five.buttons > .button { + width: 20%; +} +.ui.six.buttons { + width: 100%; +} +.ui.six.buttons > .button { + width: 16.666%; +} +.ui.seven.buttons { + width: 100%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} +.ui.eight.buttons { + width: 100%; +} +.ui.eight.buttons > .button { + width: 12.5%; +} +.ui.nine.buttons { + width: 100%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} +.ui.ten.buttons { + width: 100%; +} +.ui.ten.buttons > .button { + width: 10%; +} +.ui.eleven.buttons { + width: 100%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} +.ui.twelve.buttons { + width: 100%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: auto; +} +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.5%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} + +/*------------------- + Colors +--------------------*/ + + +/*--- Black ---*/ + +.ui.black.buttons .button, +.ui.black.button { + background-color: #1B1C1D; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.black.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: #27292a; + color: #FFFFFF; + text-shadow: none; +} +.ui.black.buttons .button:focus, +.ui.black.button:focus { + background-color: #2f3032; + color: #FFFFFF; + text-shadow: none; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: #343637; + color: #FFFFFF; + text-shadow: none; +} +.ui.black.buttons .active.button, +.ui.black.buttons .active.button:active, +.ui.black.active.button, +.ui.black.button .active.button:active { + background-color: #0f0f10; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.black.buttons .button, +.ui.basic.black.button { + -webkit-box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; + box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; + color: #1B1C1D !important; +} +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important; + box-shadow: 0px 0px 0px 1px #27292a inset !important; + color: #27292a !important; +} +.ui.basic.black.buttons .button:focus, +.ui.basic.black.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #2f3032 inset !important; + box-shadow: 0px 0px 0px 1px #2f3032 inset !important; + color: #27292a !important; +} +.ui.basic.black.buttons .active.button, +.ui.basic.black.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #0f0f10 inset !important; + box-shadow: 0px 0px 0px 1px #0f0f10 inset !important; + color: #343637 !important; +} +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #343637 inset !important; + box-shadow: 0px 0px 0px 1px #343637 inset !important; + color: #343637 !important; +} +.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.black.buttons .button, +.ui.inverted.black.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; + box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; + color: #FFFFFF; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover, +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus, +.ui.inverted.black.buttons .button.active, +.ui.inverted.black.button.active, +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover { + background-color: #000000; +} +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus { + background-color: #000000; +} +.ui.inverted.black.buttons .active.button, +.ui.inverted.black.active.button { + background-color: #000000; +} +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + background-color: #000000; +} + +/* Inverted Basic */ +.ui.inverted.black.basic.buttons .button, +.ui.inverted.black.buttons .basic.button, +.ui.inverted.black.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.black.basic.buttons .button:hover, +.ui.inverted.black.buttons .basic.button:hover, +.ui.inverted.black.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important; + box-shadow: 0px 0px 0px 2px #000000 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important; + box-shadow: 0px 0px 0px 2px #000000 inset !important; + color: #545454 !important; +} +.ui.inverted.black.basic.buttons .active.button, +.ui.inverted.black.buttons .basic.active.button, +.ui.inverted.black.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important; + box-shadow: 0px 0px 0px 2px #000000 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.black.basic.buttons .button:active, +.ui.inverted.black.buttons .basic.button:active, +.ui.inverted.black.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important; + box-shadow: 0px 0px 0px 2px #000000 inset !important; + color: #FFFFFF !important; +} + +/*--- Grey ---*/ + +.ui.grey.buttons .button, +.ui.grey.button { + background-color: #767676; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.grey.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.grey.buttons .button:hover, +.ui.grey.button:hover { + background-color: #838383; + color: #FFFFFF; + text-shadow: none; +} +.ui.grey.buttons .button:focus, +.ui.grey.button:focus { + background-color: #8a8a8a; + color: #FFFFFF; + text-shadow: none; +} +.ui.grey.buttons .button:active, +.ui.grey.button:active { + background-color: #909090; + color: #FFFFFF; + text-shadow: none; +} +.ui.grey.buttons .active.button, +.ui.grey.buttons .active.button:active, +.ui.grey.active.button, +.ui.grey.button .active.button:active { + background-color: #696969; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.grey.buttons .button, +.ui.basic.grey.button { + -webkit-box-shadow: 0px 0px 0px 1px #767676 inset !important; + box-shadow: 0px 0px 0px 1px #767676 inset !important; + color: #767676 !important; +} +.ui.basic.grey.buttons .button:hover, +.ui.basic.grey.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #838383 inset !important; + box-shadow: 0px 0px 0px 1px #838383 inset !important; + color: #838383 !important; +} +.ui.basic.grey.buttons .button:focus, +.ui.basic.grey.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #8a8a8a inset !important; + box-shadow: 0px 0px 0px 1px #8a8a8a inset !important; + color: #838383 !important; +} +.ui.basic.grey.buttons .active.button, +.ui.basic.grey.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #696969 inset !important; + box-shadow: 0px 0px 0px 1px #696969 inset !important; + color: #909090 !important; +} +.ui.basic.grey.buttons .button:active, +.ui.basic.grey.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #909090 inset !important; + box-shadow: 0px 0px 0px 1px #909090 inset !important; + color: #909090 !important; +} +.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.grey.buttons .button, +.ui.inverted.grey.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; + box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important; + color: #FFFFFF; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover, +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus, +.ui.inverted.grey.buttons .button.active, +.ui.inverted.grey.button.active, +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: rgba(0, 0, 0, 0.6); +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover { + background-color: #cfd0d2; +} +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus { + background-color: #c7c9cb; +} +.ui.inverted.grey.buttons .active.button, +.ui.inverted.grey.active.button { + background-color: #cfd0d2; +} +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + background-color: #c2c4c5; +} + +/* Inverted Basic */ +.ui.inverted.grey.basic.buttons .button, +.ui.inverted.grey.buttons .basic.button, +.ui.inverted.grey.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:hover, +.ui.inverted.grey.buttons .basic.button:hover, +.ui.inverted.grey.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #c7c9cb inset !important; + box-shadow: 0px 0px 0px 2px #c7c9cb inset !important; + color: #DCDDDE !important; +} +.ui.inverted.grey.basic.buttons .active.button, +.ui.inverted.grey.buttons .basic.active.button, +.ui.inverted.grey.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important; + color: #FFFFFF !important; +} +.ui.inverted.grey.basic.buttons .button:active, +.ui.inverted.grey.buttons .basic.button:active, +.ui.inverted.grey.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important; + box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important; + color: #FFFFFF !important; +} + +/*--- Brown ---*/ + +.ui.brown.buttons .button, +.ui.brown.button { + background-color: #A5673F; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.brown.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.brown.buttons .button:hover, +.ui.brown.button:hover { + background-color: #975b33; + color: #FFFFFF; + text-shadow: none; +} +.ui.brown.buttons .button:focus, +.ui.brown.button:focus { + background-color: #90532b; + color: #FFFFFF; + text-shadow: none; +} +.ui.brown.buttons .button:active, +.ui.brown.button:active { + background-color: #805031; + color: #FFFFFF; + text-shadow: none; +} +.ui.brown.buttons .active.button, +.ui.brown.buttons .active.button:active, +.ui.brown.active.button, +.ui.brown.button .active.button:active { + background-color: #995a31; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset !important; + box-shadow: 0px 0px 0px 1px #A5673F inset !important; + color: #A5673F !important; +} +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #975b33 inset !important; + box-shadow: 0px 0px 0px 1px #975b33 inset !important; + color: #975b33 !important; +} +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #90532b inset !important; + box-shadow: 0px 0px 0px 1px #90532b inset !important; + color: #975b33 !important; +} +.ui.basic.brown.buttons .active.button, +.ui.basic.brown.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #995a31 inset !important; + box-shadow: 0px 0px 0px 1px #995a31 inset !important; + color: #805031 !important; +} +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #805031 inset !important; + box-shadow: 0px 0px 0px 1px #805031 inset !important; + color: #805031 !important; +} +.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.brown.buttons .button, +.ui.inverted.brown.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #D67C1C inset !important; + box-shadow: 0px 0px 0px 2px #D67C1C inset !important; + color: #D67C1C; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover, +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus, +.ui.inverted.brown.buttons .button.active, +.ui.inverted.brown.button.active, +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover { + background-color: #c86f11; +} +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus { + background-color: #c16808; +} +.ui.inverted.brown.buttons .active.button, +.ui.inverted.brown.active.button { + background-color: #cc6f0d; +} +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + background-color: #a96216; +} + +/* Inverted Basic */ +.ui.inverted.brown.basic.buttons .button, +.ui.inverted.brown.buttons .basic.button, +.ui.inverted.brown.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.brown.basic.buttons .button:hover, +.ui.inverted.brown.buttons .basic.button:hover, +.ui.inverted.brown.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #c86f11 inset !important; + box-shadow: 0px 0px 0px 2px #c86f11 inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #c16808 inset !important; + box-shadow: 0px 0px 0px 2px #c16808 inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .active.button, +.ui.inverted.brown.buttons .basic.active.button, +.ui.inverted.brown.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #cc6f0d inset !important; + box-shadow: 0px 0px 0px 2px #cc6f0d inset !important; + color: #D67C1C !important; +} +.ui.inverted.brown.basic.buttons .button:active, +.ui.inverted.brown.buttons .basic.button:active, +.ui.inverted.brown.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #a96216 inset !important; + box-shadow: 0px 0px 0px 2px #a96216 inset !important; + color: #D67C1C !important; +} + +/*--- Blue ---*/ + +.ui.blue.buttons .button, +.ui.blue.button { + background-color: #2185D0; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.blue.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover { + background-color: #1678c2; + color: #FFFFFF; + text-shadow: none; +} +.ui.blue.buttons .button:focus, +.ui.blue.button:focus { + background-color: #0d71bb; + color: #FFFFFF; + text-shadow: none; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: #1a69a4; + color: #FFFFFF; + text-shadow: none; +} +.ui.blue.buttons .active.button, +.ui.blue.buttons .active.button:active, +.ui.blue.active.button, +.ui.blue.button .active.button:active { + background-color: #1279c6; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset !important; + box-shadow: 0px 0px 0px 1px #2185D0 inset !important; + color: #2185D0 !important; +} +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #1678c2 inset !important; + box-shadow: 0px 0px 0px 1px #1678c2 inset !important; + color: #1678c2 !important; +} +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #0d71bb inset !important; + box-shadow: 0px 0px 0px 1px #0d71bb inset !important; + color: #1678c2 !important; +} +.ui.basic.blue.buttons .active.button, +.ui.basic.blue.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #1279c6 inset !important; + box-shadow: 0px 0px 0px 1px #1279c6 inset !important; + color: #1a69a4 !important; +} +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; + box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; + color: #1a69a4 !important; +} +.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.blue.buttons .button, +.ui.inverted.blue.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important; + box-shadow: 0px 0px 0px 2px #54C8FF inset !important; + color: #54C8FF; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover, +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus, +.ui.inverted.blue.buttons .button.active, +.ui.inverted.blue.button.active, +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover { + background-color: #3ac0ff; +} +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus { + background-color: #2bbbff; +} +.ui.inverted.blue.buttons .active.button, +.ui.inverted.blue.active.button { + background-color: #3ac0ff; +} +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + background-color: #21b8ff; +} + +/* Inverted Basic */ +.ui.inverted.blue.basic.buttons .button, +.ui.inverted.blue.buttons .basic.button, +.ui.inverted.blue.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.blue.basic.buttons .button:hover, +.ui.inverted.blue.buttons .basic.button:hover, +.ui.inverted.blue.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + color: #54C8FF !important; +} +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important; + box-shadow: 0px 0px 0px 2px #2bbbff inset !important; + color: #54C8FF !important; +} +.ui.inverted.blue.basic.buttons .active.button, +.ui.inverted.blue.buttons .basic.active.button, +.ui.inverted.blue.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + color: #54C8FF !important; +} +.ui.inverted.blue.basic.buttons .button:active, +.ui.inverted.blue.buttons .basic.button:active, +.ui.inverted.blue.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important; + box-shadow: 0px 0px 0px 2px #21b8ff inset !important; + color: #54C8FF !important; +} + +/*--- Green ---*/ + +.ui.green.buttons .button, +.ui.green.button { + background-color: #21BA45; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.green.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background-color: #16ab39; + color: #FFFFFF; + text-shadow: none; +} +.ui.green.buttons .button:focus, +.ui.green.button:focus { + background-color: #0ea432; + color: #FFFFFF; + text-shadow: none; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: #198f35; + color: #FFFFFF; + text-shadow: none; +} +.ui.green.buttons .active.button, +.ui.green.buttons .active.button:active, +.ui.green.active.button, +.ui.green.button .active.button:active { + background-color: #13ae38; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.green.buttons .button, +.ui.basic.green.button { + -webkit-box-shadow: 0px 0px 0px 1px #21BA45 inset !important; + box-shadow: 0px 0px 0px 1px #21BA45 inset !important; + color: #21BA45 !important; +} +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #16ab39 inset !important; + box-shadow: 0px 0px 0px 1px #16ab39 inset !important; + color: #16ab39 !important; +} +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #0ea432 inset !important; + box-shadow: 0px 0px 0px 1px #0ea432 inset !important; + color: #16ab39 !important; +} +.ui.basic.green.buttons .active.button, +.ui.basic.green.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #13ae38 inset !important; + box-shadow: 0px 0px 0px 1px #13ae38 inset !important; + color: #198f35 !important; +} +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #198f35 inset !important; + box-shadow: 0px 0px 0px 1px #198f35 inset !important; + color: #198f35 !important; +} +.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.green.buttons .button, +.ui.inverted.green.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #2ECC40 inset !important; + box-shadow: 0px 0px 0px 2px #2ECC40 inset !important; + color: #2ECC40; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover, +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus, +.ui.inverted.green.buttons .button.active, +.ui.inverted.green.button.active, +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover { + background-color: #22be34; +} +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus { + background-color: #19b82b; +} +.ui.inverted.green.buttons .active.button, +.ui.inverted.green.active.button { + background-color: #1fc231; +} +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + background-color: #25a233; +} + +/* Inverted Basic */ +.ui.inverted.green.basic.buttons .button, +.ui.inverted.green.buttons .basic.button, +.ui.inverted.green.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.green.basic.buttons .button:hover, +.ui.inverted.green.buttons .basic.button:hover, +.ui.inverted.green.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #22be34 inset !important; + box-shadow: 0px 0px 0px 2px #22be34 inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #19b82b inset !important; + box-shadow: 0px 0px 0px 2px #19b82b inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .active.button, +.ui.inverted.green.buttons .basic.active.button, +.ui.inverted.green.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #1fc231 inset !important; + box-shadow: 0px 0px 0px 2px #1fc231 inset !important; + color: #2ECC40 !important; +} +.ui.inverted.green.basic.buttons .button:active, +.ui.inverted.green.buttons .basic.button:active, +.ui.inverted.green.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #25a233 inset !important; + box-shadow: 0px 0px 0px 2px #25a233 inset !important; + color: #2ECC40 !important; +} + +/*--- Orange ---*/ + +.ui.orange.buttons .button, +.ui.orange.button { + background-color: #F2711C; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.orange.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover { + background-color: #f26202; + color: #FFFFFF; + text-shadow: none; +} +.ui.orange.buttons .button:focus, +.ui.orange.button:focus { + background-color: #e55b00; + color: #FFFFFF; + text-shadow: none; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: #cf590c; + color: #FFFFFF; + text-shadow: none; +} +.ui.orange.buttons .active.button, +.ui.orange.buttons .active.button:active, +.ui.orange.active.button, +.ui.orange.button .active.button:active { + background-color: #f56100; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset !important; + box-shadow: 0px 0px 0px 1px #F2711C inset !important; + color: #F2711C !important; +} +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #f26202 inset !important; + box-shadow: 0px 0px 0px 1px #f26202 inset !important; + color: #f26202 !important; +} +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #e55b00 inset !important; + box-shadow: 0px 0px 0px 1px #e55b00 inset !important; + color: #f26202 !important; +} +.ui.basic.orange.buttons .active.button, +.ui.basic.orange.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #f56100 inset !important; + box-shadow: 0px 0px 0px 1px #f56100 inset !important; + color: #cf590c !important; +} +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #cf590c inset !important; + box-shadow: 0px 0px 0px 1px #cf590c inset !important; + color: #cf590c !important; +} +.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.orange.buttons .button, +.ui.inverted.orange.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #FF851B inset !important; + box-shadow: 0px 0px 0px 2px #FF851B inset !important; + color: #FF851B; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover, +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus, +.ui.inverted.orange.buttons .button.active, +.ui.inverted.orange.button.active, +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover { + background-color: #ff7701; +} +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus { + background-color: #f17000; +} +.ui.inverted.orange.buttons .active.button, +.ui.inverted.orange.active.button { + background-color: #ff7701; +} +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + background-color: #e76b00; +} + +/* Inverted Basic */ +.ui.inverted.orange.basic.buttons .button, +.ui.inverted.orange.buttons .basic.button, +.ui.inverted.orange.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.orange.basic.buttons .button:hover, +.ui.inverted.orange.buttons .basic.button:hover, +.ui.inverted.orange.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important; + box-shadow: 0px 0px 0px 2px #ff7701 inset !important; + color: #FF851B !important; +} +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #f17000 inset !important; + box-shadow: 0px 0px 0px 2px #f17000 inset !important; + color: #FF851B !important; +} +.ui.inverted.orange.basic.buttons .active.button, +.ui.inverted.orange.buttons .basic.active.button, +.ui.inverted.orange.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important; + box-shadow: 0px 0px 0px 2px #ff7701 inset !important; + color: #FF851B !important; +} +.ui.inverted.orange.basic.buttons .button:active, +.ui.inverted.orange.buttons .basic.button:active, +.ui.inverted.orange.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #e76b00 inset !important; + box-shadow: 0px 0px 0px 2px #e76b00 inset !important; + color: #FF851B !important; +} + +/*--- Pink ---*/ + +.ui.pink.buttons .button, +.ui.pink.button { + background-color: #E03997; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.pink.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.pink.buttons .button:hover, +.ui.pink.button:hover { + background-color: #e61a8d; + color: #FFFFFF; + text-shadow: none; +} +.ui.pink.buttons .button:focus, +.ui.pink.button:focus { + background-color: #e10f85; + color: #FFFFFF; + text-shadow: none; +} +.ui.pink.buttons .button:active, +.ui.pink.button:active { + background-color: #c71f7e; + color: #FFFFFF; + text-shadow: none; +} +.ui.pink.buttons .active.button, +.ui.pink.buttons .active.button:active, +.ui.pink.active.button, +.ui.pink.button .active.button:active { + background-color: #ea158d; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset !important; + box-shadow: 0px 0px 0px 1px #E03997 inset !important; + color: #E03997 !important; +} +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #e61a8d inset !important; + box-shadow: 0px 0px 0px 1px #e61a8d inset !important; + color: #e61a8d !important; +} +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #e10f85 inset !important; + box-shadow: 0px 0px 0px 1px #e10f85 inset !important; + color: #e61a8d !important; +} +.ui.basic.pink.buttons .active.button, +.ui.basic.pink.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #ea158d inset !important; + box-shadow: 0px 0px 0px 1px #ea158d inset !important; + color: #c71f7e !important; +} +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #c71f7e inset !important; + box-shadow: 0px 0px 0px 1px #c71f7e inset !important; + color: #c71f7e !important; +} +.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.pink.buttons .button, +.ui.inverted.pink.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #FF8EDF inset !important; + box-shadow: 0px 0px 0px 2px #FF8EDF inset !important; + color: #FF8EDF; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover, +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus, +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active, +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover { + background-color: #ff74d8; +} +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus { + background-color: #ff65d3; +} +.ui.inverted.pink.buttons .active.button, +.ui.inverted.pink.active.button { + background-color: #ff74d8; +} +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + background-color: #ff5bd1; +} + +/* Inverted Basic */ +.ui.inverted.pink.basic.buttons .button, +.ui.inverted.pink.buttons .basic.button, +.ui.inverted.pink.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.pink.basic.buttons .button:hover, +.ui.inverted.pink.buttons .basic.button:hover, +.ui.inverted.pink.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #ff65d3 inset !important; + box-shadow: 0px 0px 0px 2px #ff65d3 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .active.button, +.ui.inverted.pink.buttons .basic.active.button, +.ui.inverted.pink.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + box-shadow: 0px 0px 0px 2px #ff74d8 inset !important; + color: #FF8EDF !important; +} +.ui.inverted.pink.basic.buttons .button:active, +.ui.inverted.pink.buttons .basic.button:active, +.ui.inverted.pink.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important; + box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important; + color: #FF8EDF !important; +} + +/*--- Violet ---*/ + +.ui.violet.buttons .button, +.ui.violet.button { + background-color: #6435C9; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.violet.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.violet.buttons .button:hover, +.ui.violet.button:hover { + background-color: #5829bb; + color: #FFFFFF; + text-shadow: none; +} +.ui.violet.buttons .button:focus, +.ui.violet.button:focus { + background-color: #4f20b5; + color: #FFFFFF; + text-shadow: none; +} +.ui.violet.buttons .button:active, +.ui.violet.button:active { + background-color: #502aa1; + color: #FFFFFF; + text-shadow: none; +} +.ui.violet.buttons .active.button, +.ui.violet.buttons .active.button:active, +.ui.violet.active.button, +.ui.violet.button .active.button:active { + background-color: #5626bf; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset !important; + box-shadow: 0px 0px 0px 1px #6435C9 inset !important; + color: #6435C9 !important; +} +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #5829bb inset !important; + box-shadow: 0px 0px 0px 1px #5829bb inset !important; + color: #5829bb !important; +} +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #4f20b5 inset !important; + box-shadow: 0px 0px 0px 1px #4f20b5 inset !important; + color: #5829bb !important; +} +.ui.basic.violet.buttons .active.button, +.ui.basic.violet.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #5626bf inset !important; + box-shadow: 0px 0px 0px 1px #5626bf inset !important; + color: #502aa1 !important; +} +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #502aa1 inset !important; + box-shadow: 0px 0px 0px 1px #502aa1 inset !important; + color: #502aa1 !important; +} +.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.violet.buttons .button, +.ui.inverted.violet.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #A291FB inset !important; + box-shadow: 0px 0px 0px 2px #A291FB inset !important; + color: #A291FB; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover, +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus, +.ui.inverted.violet.buttons .button.active, +.ui.inverted.violet.button.active, +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover { + background-color: #8a73ff; +} +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus { + background-color: #7d64ff; +} +.ui.inverted.violet.buttons .active.button, +.ui.inverted.violet.active.button { + background-color: #8a73ff; +} +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + background-color: #7860f9; +} + +/* Inverted Basic */ +.ui.inverted.violet.basic.buttons .button, +.ui.inverted.violet.buttons .basic.button, +.ui.inverted.violet.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.violet.basic.buttons .button:hover, +.ui.inverted.violet.buttons .basic.button:hover, +.ui.inverted.violet.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #7d64ff inset !important; + box-shadow: 0px 0px 0px 2px #7d64ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .active.button, +.ui.inverted.violet.buttons .basic.active.button, +.ui.inverted.violet.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + box-shadow: 0px 0px 0px 2px #8a73ff inset !important; + color: #A291FB !important; +} +.ui.inverted.violet.basic.buttons .button:active, +.ui.inverted.violet.buttons .basic.button:active, +.ui.inverted.violet.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #7860f9 inset !important; + box-shadow: 0px 0px 0px 2px #7860f9 inset !important; + color: #A291FB !important; +} + +/*--- Purple ---*/ + +.ui.purple.buttons .button, +.ui.purple.button { + background-color: #A333C8; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.purple.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover { + background-color: #9627ba; + color: #FFFFFF; + text-shadow: none; +} +.ui.purple.buttons .button:focus, +.ui.purple.button:focus { + background-color: #8f1eb4; + color: #FFFFFF; + text-shadow: none; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: #82299f; + color: #FFFFFF; + text-shadow: none; +} +.ui.purple.buttons .active.button, +.ui.purple.buttons .active.button:active, +.ui.purple.active.button, +.ui.purple.button .active.button:active { + background-color: #9724be; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset !important; + box-shadow: 0px 0px 0px 1px #A333C8 inset !important; + color: #A333C8 !important; +} +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #9627ba inset !important; + box-shadow: 0px 0px 0px 1px #9627ba inset !important; + color: #9627ba !important; +} +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important; + box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important; + color: #9627ba !important; +} +.ui.basic.purple.buttons .active.button, +.ui.basic.purple.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #9724be inset !important; + box-shadow: 0px 0px 0px 1px #9724be inset !important; + color: #82299f !important; +} +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #82299f inset !important; + box-shadow: 0px 0px 0px 1px #82299f inset !important; + color: #82299f !important; +} +.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.purple.buttons .button, +.ui.inverted.purple.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #DC73FF inset !important; + box-shadow: 0px 0px 0px 2px #DC73FF inset !important; + color: #DC73FF; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover, +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus, +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active, +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover { + background-color: #d65aff; +} +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus { + background-color: #d24aff; +} +.ui.inverted.purple.buttons .active.button, +.ui.inverted.purple.active.button { + background-color: #d65aff; +} +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + background-color: #cf40ff; +} + +/* Inverted Basic */ +.ui.inverted.purple.basic.buttons .button, +.ui.inverted.purple.buttons .basic.button, +.ui.inverted.purple.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.purple.basic.buttons .button:hover, +.ui.inverted.purple.buttons .basic.button:hover, +.ui.inverted.purple.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important; + box-shadow: 0px 0px 0px 2px #d65aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #d24aff inset !important; + box-shadow: 0px 0px 0px 2px #d24aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .active.button, +.ui.inverted.purple.buttons .basic.active.button, +.ui.inverted.purple.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important; + box-shadow: 0px 0px 0px 2px #d65aff inset !important; + color: #DC73FF !important; +} +.ui.inverted.purple.basic.buttons .button:active, +.ui.inverted.purple.buttons .basic.button:active, +.ui.inverted.purple.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #cf40ff inset !important; + box-shadow: 0px 0px 0px 2px #cf40ff inset !important; + color: #DC73FF !important; +} + +/*--- Red ---*/ + +.ui.red.buttons .button, +.ui.red.button { + background-color: #DB2828; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.red.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover { + background-color: #d01919; + color: #FFFFFF; + text-shadow: none; +} +.ui.red.buttons .button:focus, +.ui.red.button:focus { + background-color: #ca1010; + color: #FFFFFF; + text-shadow: none; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: #b21e1e; + color: #FFFFFF; + text-shadow: none; +} +.ui.red.buttons .active.button, +.ui.red.buttons .active.button:active, +.ui.red.active.button, +.ui.red.button .active.button:active { + background-color: #d41515; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.red.buttons .button, +.ui.basic.red.button { + -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset !important; + box-shadow: 0px 0px 0px 1px #DB2828 inset !important; + color: #DB2828 !important; +} +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #d01919 inset !important; + box-shadow: 0px 0px 0px 1px #d01919 inset !important; + color: #d01919 !important; +} +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #ca1010 inset !important; + box-shadow: 0px 0px 0px 1px #ca1010 inset !important; + color: #d01919 !important; +} +.ui.basic.red.buttons .active.button, +.ui.basic.red.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #d41515 inset !important; + box-shadow: 0px 0px 0px 1px #d41515 inset !important; + color: #b21e1e !important; +} +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #b21e1e inset !important; + box-shadow: 0px 0px 0px 1px #b21e1e inset !important; + color: #b21e1e !important; +} +.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.red.buttons .button, +.ui.inverted.red.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #FF695E inset !important; + box-shadow: 0px 0px 0px 2px #FF695E inset !important; + color: #FF695E; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover, +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus, +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active, +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover { + background-color: #ff5144; +} +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus { + background-color: #ff4335; +} +.ui.inverted.red.buttons .active.button, +.ui.inverted.red.active.button { + background-color: #ff5144; +} +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + background-color: #ff392b; +} + +/* Inverted Basic */ +.ui.inverted.red.basic.buttons .button, +.ui.inverted.red.buttons .basic.button, +.ui.inverted.red.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.red.basic.buttons .button:hover, +.ui.inverted.red.buttons .basic.button:hover, +.ui.inverted.red.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #ff4335 inset !important; + box-shadow: 0px 0px 0px 2px #ff4335 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .active.button, +.ui.inverted.red.buttons .basic.active.button, +.ui.inverted.red.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + box-shadow: 0px 0px 0px 2px #ff5144 inset !important; + color: #FF695E !important; +} +.ui.inverted.red.basic.buttons .button:active, +.ui.inverted.red.buttons .basic.button:active, +.ui.inverted.red.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #ff392b inset !important; + box-shadow: 0px 0px 0px 2px #ff392b inset !important; + color: #FF695E !important; +} + +/*--- Teal ---*/ + +.ui.teal.buttons .button, +.ui.teal.button { + background-color: #00B5AD; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.teal.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover { + background-color: #009c95; + color: #FFFFFF; + text-shadow: none; +} +.ui.teal.buttons .button:focus, +.ui.teal.button:focus { + background-color: #008c86; + color: #FFFFFF; + text-shadow: none; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: #00827c; + color: #FFFFFF; + text-shadow: none; +} +.ui.teal.buttons .active.button, +.ui.teal.buttons .active.button:active, +.ui.teal.active.button, +.ui.teal.button .active.button:active { + background-color: #009c95; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.teal.buttons .button, +.ui.basic.teal.button { + -webkit-box-shadow: 0px 0px 0px 1px #00B5AD inset !important; + box-shadow: 0px 0px 0px 1px #00B5AD inset !important; + color: #00B5AD !important; +} +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !important; + box-shadow: 0px 0px 0px 1px #009c95 inset !important; + color: #009c95 !important; +} +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #008c86 inset !important; + box-shadow: 0px 0px 0px 1px #008c86 inset !important; + color: #009c95 !important; +} +.ui.basic.teal.buttons .active.button, +.ui.basic.teal.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !important; + box-shadow: 0px 0px 0px 1px #009c95 inset !important; + color: #00827c !important; +} +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #00827c inset !important; + box-shadow: 0px 0px 0px 1px #00827c inset !important; + color: #00827c !important; +} +.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.teal.buttons .button, +.ui.inverted.teal.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #6DFFFF inset !important; + box-shadow: 0px 0px 0px 2px #6DFFFF inset !important; + color: #6DFFFF; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover, +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus, +.ui.inverted.teal.buttons .button.active, +.ui.inverted.teal.button.active, +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: rgba(0, 0, 0, 0.6); +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover { + background-color: #54ffff; +} +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus { + background-color: #44ffff; +} +.ui.inverted.teal.buttons .active.button, +.ui.inverted.teal.active.button { + background-color: #54ffff; +} +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + background-color: #3affff; +} + +/* Inverted Basic */ +.ui.inverted.teal.basic.buttons .button, +.ui.inverted.teal.buttons .basic.button, +.ui.inverted.teal.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.teal.basic.buttons .button:hover, +.ui.inverted.teal.buttons .basic.button:hover, +.ui.inverted.teal.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important; + box-shadow: 0px 0px 0px 2px #54ffff inset !important; + color: #6DFFFF !important; +} +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #44ffff inset !important; + box-shadow: 0px 0px 0px 2px #44ffff inset !important; + color: #6DFFFF !important; +} +.ui.inverted.teal.basic.buttons .active.button, +.ui.inverted.teal.buttons .basic.active.button, +.ui.inverted.teal.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important; + box-shadow: 0px 0px 0px 2px #54ffff inset !important; + color: #6DFFFF !important; +} +.ui.inverted.teal.basic.buttons .button:active, +.ui.inverted.teal.buttons .basic.button:active, +.ui.inverted.teal.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #3affff inset !important; + box-shadow: 0px 0px 0px 2px #3affff inset !important; + color: #6DFFFF !important; +} + +/*--- Olive ---*/ + +.ui.olive.buttons .button, +.ui.olive.button { + background-color: #B5CC18; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.olive.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.olive.buttons .button:hover, +.ui.olive.button:hover { + background-color: #a7bd0d; + color: #FFFFFF; + text-shadow: none; +} +.ui.olive.buttons .button:focus, +.ui.olive.button:focus { + background-color: #a0b605; + color: #FFFFFF; + text-shadow: none; +} +.ui.olive.buttons .button:active, +.ui.olive.button:active { + background-color: #8d9e13; + color: #FFFFFF; + text-shadow: none; +} +.ui.olive.buttons .active.button, +.ui.olive.buttons .active.button:active, +.ui.olive.active.button, +.ui.olive.button .active.button:active { + background-color: #aac109; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + -webkit-box-shadow: 0px 0px 0px 1px #B5CC18 inset !important; + box-shadow: 0px 0px 0px 1px #B5CC18 inset !important; + color: #B5CC18 !important; +} +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #a7bd0d inset !important; + box-shadow: 0px 0px 0px 1px #a7bd0d inset !important; + color: #a7bd0d !important; +} +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #a0b605 inset !important; + box-shadow: 0px 0px 0px 1px #a0b605 inset !important; + color: #a7bd0d !important; +} +.ui.basic.olive.buttons .active.button, +.ui.basic.olive.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #aac109 inset !important; + box-shadow: 0px 0px 0px 1px #aac109 inset !important; + color: #8d9e13 !important; +} +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #8d9e13 inset !important; + box-shadow: 0px 0px 0px 1px #8d9e13 inset !important; + color: #8d9e13 !important; +} +.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.olive.buttons .button, +.ui.inverted.olive.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #D9E778 inset !important; + box-shadow: 0px 0px 0px 2px #D9E778 inset !important; + color: #D9E778; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover, +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus, +.ui.inverted.olive.buttons .button.active, +.ui.inverted.olive.button.active, +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: rgba(0, 0, 0, 0.6); +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover { + background-color: #d8ea5c; +} +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus { + background-color: #daef47; +} +.ui.inverted.olive.buttons .active.button, +.ui.inverted.olive.active.button { + background-color: #daed59; +} +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + background-color: #cddf4d; +} + +/* Inverted Basic */ +.ui.inverted.olive.basic.buttons .button, +.ui.inverted.olive.buttons .basic.button, +.ui.inverted.olive.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.olive.basic.buttons .button:hover, +.ui.inverted.olive.buttons .basic.button:hover, +.ui.inverted.olive.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #d8ea5c inset !important; + box-shadow: 0px 0px 0px 2px #d8ea5c inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #daef47 inset !important; + box-shadow: 0px 0px 0px 2px #daef47 inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .active.button, +.ui.inverted.olive.buttons .basic.active.button, +.ui.inverted.olive.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #daed59 inset !important; + box-shadow: 0px 0px 0px 2px #daed59 inset !important; + color: #D9E778 !important; +} +.ui.inverted.olive.basic.buttons .button:active, +.ui.inverted.olive.buttons .basic.button:active, +.ui.inverted.olive.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #cddf4d inset !important; + box-shadow: 0px 0px 0px 2px #cddf4d inset !important; + color: #D9E778 !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.buttons .button, +.ui.yellow.button { + background-color: #FBBD08; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.yellow.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.yellow.buttons .button:hover, +.ui.yellow.button:hover { + background-color: #eaae00; + color: #FFFFFF; + text-shadow: none; +} +.ui.yellow.buttons .button:focus, +.ui.yellow.button:focus { + background-color: #daa300; + color: #FFFFFF; + text-shadow: none; +} +.ui.yellow.buttons .button:active, +.ui.yellow.button:active { + background-color: #cd9903; + color: #FFFFFF; + text-shadow: none; +} +.ui.yellow.buttons .active.button, +.ui.yellow.buttons .active.button:active, +.ui.yellow.active.button, +.ui.yellow.button .active.button:active { + background-color: #eaae00; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button { + -webkit-box-shadow: 0px 0px 0px 1px #FBBD08 inset !important; + box-shadow: 0px 0px 0px 1px #FBBD08 inset !important; + color: #FBBD08 !important; +} +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !important; + box-shadow: 0px 0px 0px 1px #eaae00 inset !important; + color: #eaae00 !important; +} +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #daa300 inset !important; + box-shadow: 0px 0px 0px 1px #daa300 inset !important; + color: #eaae00 !important; +} +.ui.basic.yellow.buttons .active.button, +.ui.basic.yellow.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !important; + box-shadow: 0px 0px 0px 1px #eaae00 inset !important; + color: #cd9903 !important; +} +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #cd9903 inset !important; + box-shadow: 0px 0px 0px 1px #cd9903 inset !important; + color: #cd9903 !important; +} +.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.yellow.buttons .button, +.ui.inverted.yellow.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #FFE21F inset !important; + box-shadow: 0px 0px 0px 2px #FFE21F inset !important; + color: #FFE21F; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover, +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus, +.ui.inverted.yellow.buttons .button.active, +.ui.inverted.yellow.button.active, +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: rgba(0, 0, 0, 0.6); +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover { + background-color: #ffdf05; +} +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus { + background-color: #f5d500; +} +.ui.inverted.yellow.buttons .active.button, +.ui.inverted.yellow.active.button { + background-color: #ffdf05; +} +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + background-color: #ebcd00; +} + +/* Inverted Basic */ +.ui.inverted.yellow.basic.buttons .button, +.ui.inverted.yellow.buttons .basic.button, +.ui.inverted.yellow.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.yellow.basic.buttons .button:hover, +.ui.inverted.yellow.buttons .basic.button:hover, +.ui.inverted.yellow.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; + box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; + color: #FFE21F !important; +} +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #f5d500 inset !important; + box-shadow: 0px 0px 0px 2px #f5d500 inset !important; + color: #FFE21F !important; +} +.ui.inverted.yellow.basic.buttons .active.button, +.ui.inverted.yellow.buttons .basic.active.button, +.ui.inverted.yellow.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; + box-shadow: 0px 0px 0px 2px #ffdf05 inset !important; + color: #FFE21F !important; +} +.ui.inverted.yellow.basic.buttons .button:active, +.ui.inverted.yellow.buttons .basic.button:active, +.ui.inverted.yellow.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #ebcd00 inset !important; + box-shadow: 0px 0px 0px 2px #ebcd00 inset !important; + color: #FFE21F !important; +} + +/*------------------- + Primary +--------------------*/ + + +/*--- Standard ---*/ + +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #2185D0; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.primary.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: #1678c2; + color: #FFFFFF; + text-shadow: none; +} +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: #0d71bb; + color: #FFFFFF; + text-shadow: none; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: #1a69a4; + color: #FFFFFF; + text-shadow: none; +} +.ui.primary.buttons .active.button, +.ui.primary.buttons .active.button:active, +.ui.primary.active.button, +.ui.primary.button .active.button:active { + background-color: #1279c6; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.primary.buttons .button, +.ui.basic.primary.button { + -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset !important; + box-shadow: 0px 0px 0px 1px #2185D0 inset !important; + color: #2185D0 !important; +} +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #1678c2 inset !important; + box-shadow: 0px 0px 0px 1px #1678c2 inset !important; + color: #1678c2 !important; +} +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #0d71bb inset !important; + box-shadow: 0px 0px 0px 1px #0d71bb inset !important; + color: #1678c2 !important; +} +.ui.basic.primary.buttons .active.button, +.ui.basic.primary.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #1279c6 inset !important; + box-shadow: 0px 0px 0px 1px #1279c6 inset !important; + color: #1a69a4 !important; +} +.ui.basic.primary.buttons .button:active, +.ui.basic.primary.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; + box-shadow: 0px 0px 0px 1px #1a69a4 inset !important; + color: #1a69a4 !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.primary.buttons .button, +.ui.inverted.primary.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important; + box-shadow: 0px 0px 0px 2px #54C8FF inset !important; + color: #54C8FF; +} +.ui.inverted.primary.buttons .button:hover, +.ui.inverted.primary.button:hover, +.ui.inverted.primary.buttons .button:focus, +.ui.inverted.primary.button:focus, +.ui.inverted.primary.buttons .button.active, +.ui.inverted.primary.button.active, +.ui.inverted.primary.buttons .button:active, +.ui.inverted.primary.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.primary.buttons .button:hover, +.ui.inverted.primary.button:hover { + background-color: #3ac0ff; +} +.ui.inverted.primary.buttons .button:focus, +.ui.inverted.primary.button:focus { + background-color: #2bbbff; +} +.ui.inverted.primary.buttons .active.button, +.ui.inverted.primary.active.button { + background-color: #3ac0ff; +} +.ui.inverted.primary.buttons .button:active, +.ui.inverted.primary.button:active { + background-color: #21b8ff; +} + +/* Inverted Basic */ +.ui.inverted.primary.basic.buttons .button, +.ui.inverted.primary.buttons .basic.button, +.ui.inverted.primary.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.primary.basic.buttons .button:hover, +.ui.inverted.primary.buttons .basic.button:hover, +.ui.inverted.primary.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + color: #54C8FF !important; +} +.ui.inverted.primary.basic.buttons .button:focus, +.ui.inverted.primary.basic.buttons .button:focus, +.ui.inverted.primary.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important; + box-shadow: 0px 0px 0px 2px #2bbbff inset !important; + color: #54C8FF !important; +} +.ui.inverted.primary.basic.buttons .active.button, +.ui.inverted.primary.buttons .basic.active.button, +.ui.inverted.primary.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + box-shadow: 0px 0px 0px 2px #3ac0ff inset !important; + color: #54C8FF !important; +} +.ui.inverted.primary.basic.buttons .button:active, +.ui.inverted.primary.buttons .basic.button:active, +.ui.inverted.primary.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important; + box-shadow: 0px 0px 0px 2px #21b8ff inset !important; + color: #54C8FF !important; +} + +/*------------------- + Secondary +--------------------*/ + + +/* Standard */ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #1B1C1D; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.secondary.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover { + background-color: #27292a; + color: #FFFFFF; + text-shadow: none; +} +.ui.secondary.buttons .button:focus, +.ui.secondary.button:focus { + background-color: #2e3032; + color: #FFFFFF; + text-shadow: none; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: #343637; + color: #FFFFFF; + text-shadow: none; +} +.ui.secondary.buttons .active.button, +.ui.secondary.buttons .active.button:active, +.ui.secondary.active.button, +.ui.secondary.button .active.button:active { + background-color: #27292a; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + -webkit-box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; + box-shadow: 0px 0px 0px 1px #1B1C1D inset !important; + color: #1B1C1D !important; +} +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important; + box-shadow: 0px 0px 0px 1px #27292a inset !important; + color: #27292a !important; +} +.ui.basic.secondary.buttons .button:focus, +.ui.basic.secondary.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #2e3032 inset !important; + box-shadow: 0px 0px 0px 1px #2e3032 inset !important; + color: #27292a !important; +} +.ui.basic.secondary.buttons .active.button, +.ui.basic.secondary.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !important; + box-shadow: 0px 0px 0px 1px #27292a inset !important; + color: #343637 !important; +} +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #343637 inset !important; + box-shadow: 0px 0px 0px 1px #343637 inset !important; + color: #343637 !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -1px; +} + +/* Inverted */ +.ui.inverted.secondary.buttons .button, +.ui.inverted.secondary.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px #545454 inset !important; + box-shadow: 0px 0px 0px 2px #545454 inset !important; + color: #545454; +} +.ui.inverted.secondary.buttons .button:hover, +.ui.inverted.secondary.button:hover, +.ui.inverted.secondary.buttons .button:focus, +.ui.inverted.secondary.button:focus, +.ui.inverted.secondary.buttons .button.active, +.ui.inverted.secondary.button.active, +.ui.inverted.secondary.buttons .button:active, +.ui.inverted.secondary.button:active { + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.inverted.secondary.buttons .button:hover, +.ui.inverted.secondary.button:hover { + background-color: #616161; +} +.ui.inverted.secondary.buttons .button:focus, +.ui.inverted.secondary.button:focus { + background-color: #686868; +} +.ui.inverted.secondary.buttons .active.button, +.ui.inverted.secondary.active.button { + background-color: #616161; +} +.ui.inverted.secondary.buttons .button:active, +.ui.inverted.secondary.button:active { + background-color: #6e6e6e; +} + +/* Inverted Basic */ +.ui.inverted.secondary.basic.buttons .button, +.ui.inverted.secondary.buttons .basic.button, +.ui.inverted.secondary.basic.button { + background-color: transparent; + -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; + color: #FFFFFF !important; +} +.ui.inverted.secondary.basic.buttons .button:hover, +.ui.inverted.secondary.buttons .basic.button:hover, +.ui.inverted.secondary.basic.button:hover { + -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important; + box-shadow: 0px 0px 0px 2px #616161 inset !important; + color: #545454 !important; +} +.ui.inverted.secondary.basic.buttons .button:focus, +.ui.inverted.secondary.basic.buttons .button:focus, +.ui.inverted.secondary.basic.button:focus { + -webkit-box-shadow: 0px 0px 0px 2px #686868 inset !important; + box-shadow: 0px 0px 0px 2px #686868 inset !important; + color: #545454 !important; +} +.ui.inverted.secondary.basic.buttons .active.button, +.ui.inverted.secondary.buttons .basic.active.button, +.ui.inverted.secondary.basic.active.button { + -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important; + box-shadow: 0px 0px 0px 2px #616161 inset !important; + color: #545454 !important; +} +.ui.inverted.secondary.basic.buttons .button:active, +.ui.inverted.secondary.buttons .basic.button:active, +.ui.inverted.secondary.basic.button:active { + -webkit-box-shadow: 0px 0px 0px 2px #6e6e6e inset !important; + box-shadow: 0px 0px 0px 2px #6e6e6e inset !important; + color: #545454 !important; +} + +/*--------------- + Positive +----------------*/ + + +/* Standard */ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #21BA45; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.positive.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: #16ab39; + color: #FFFFFF; + text-shadow: none; +} +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: #0ea432; + color: #FFFFFF; + text-shadow: none; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #198f35; + color: #FFFFFF; + text-shadow: none; +} +.ui.positive.buttons .active.button, +.ui.positive.buttons .active.button:active, +.ui.positive.active.button, +.ui.positive.button .active.button:active { + background-color: #13ae38; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.positive.buttons .button, +.ui.basic.positive.button { + -webkit-box-shadow: 0px 0px 0px 1px #21BA45 inset !important; + box-shadow: 0px 0px 0px 1px #21BA45 inset !important; + color: #21BA45 !important; +} +.ui.basic.positive.buttons .button:hover, +.ui.basic.positive.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #16ab39 inset !important; + box-shadow: 0px 0px 0px 1px #16ab39 inset !important; + color: #16ab39 !important; +} +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #0ea432 inset !important; + box-shadow: 0px 0px 0px 1px #0ea432 inset !important; + color: #16ab39 !important; +} +.ui.basic.positive.buttons .active.button, +.ui.basic.positive.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #13ae38 inset !important; + box-shadow: 0px 0px 0px 1px #13ae38 inset !important; + color: #198f35 !important; +} +.ui.basic.positive.buttons .button:active, +.ui.basic.positive.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #198f35 inset !important; + box-shadow: 0px 0px 0px 1px #198f35 inset !important; + color: #198f35 !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -1px; +} + +/*--------------- + Negative +----------------*/ + + +/* Standard */ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #DB2828; + color: #FFFFFF; + text-shadow: none; + background-image: none; +} +.ui.negative.button { + -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background-color: #d01919; + color: #FFFFFF; + text-shadow: none; +} +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: #ca1010; + color: #FFFFFF; + text-shadow: none; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #b21e1e; + color: #FFFFFF; + text-shadow: none; +} +.ui.negative.buttons .active.button, +.ui.negative.buttons .active.button:active, +.ui.negative.active.button, +.ui.negative.button .active.button:active { + background-color: #d41515; + color: #FFFFFF; + text-shadow: none; +} + +/* Basic */ +.ui.basic.negative.buttons .button, +.ui.basic.negative.button { + -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset !important; + box-shadow: 0px 0px 0px 1px #DB2828 inset !important; + color: #DB2828 !important; +} +.ui.basic.negative.buttons .button:hover, +.ui.basic.negative.button:hover { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #d01919 inset !important; + box-shadow: 0px 0px 0px 1px #d01919 inset !important; + color: #d01919 !important; +} +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #ca1010 inset !important; + box-shadow: 0px 0px 0px 1px #ca1010 inset !important; + color: #d01919 !important; +} +.ui.basic.negative.buttons .active.button, +.ui.basic.negative.active.button { + background: transparent !important; + -webkit-box-shadow: 0px 0px 0px 1px #d41515 inset !important; + box-shadow: 0px 0px 0px 1px #d41515 inset !important; + color: #b21e1e !important; +} +.ui.basic.negative.buttons .button:active, +.ui.basic.negative.button:active { + -webkit-box-shadow: 0px 0px 0px 1px #b21e1e inset !important; + box-shadow: 0px 0px 0px 1px #b21e1e inset !important; + color: #b21e1e !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -1px; +} + + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + font-size: 0em; + vertical-align: baseline; + margin: 0em 0.25em 0em 0em; +} +.ui.buttons:not(.basic):not(.inverted) { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Clearfix */ +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Standard Group */ +.ui.buttons .button { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + margin: 0em; + border-radius: 0em; + margin: 0px 0px 0px 0px; +} +.ui.buttons > .ui.button:not(.basic):not(.inverted), +.ui.buttons:not(.basic):not(.inverted) > .button { + -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} +.ui.buttons .button:first-child { + border-left: none; + margin-left: 0em; + border-top-left-radius: 0.28571429rem; + border-bottom-left-radius: 0.28571429rem; +} +.ui.buttons .button:last-child { + border-top-right-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} + +/* Vertical Style */ +.ui.vertical.buttons { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: 0px 0px 0px 0px; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0em; +} +.ui.vertical.buttons .button:first-child { + border-top-left-radius: 0.28571429rem; + border-top-right-radius: 0.28571429rem; +} +.ui.vertical.buttons .button:last-child { + margin-bottom: 0px; + border-bottom-left-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} +.ui.vertical.buttons .button:only-child { + border-radius: 0.28571429rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/button.min.css b/semantic/components/button.min.css new file mode 100644 index 0000000..9e093e8 --- /dev/null +++ b/semantic/components/button.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.button{cursor:pointer;display:inline-block;min-height:1em;outline:0;border:none;vertical-align:baseline;background:#e0e1e2 none;color:rgba(0,0,0,.6);font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;margin:0 .25em 0 0;padding:.78571429em 1.5em .78571429em;text-transform:none;text-shadow:none;font-weight:700;line-height:1em;font-style:normal;text-align:center;text-decoration:none;border-radius:.28571429rem;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;will-change:'';-webkit-tap-highlight-color:transparent}.ui.button:hover{background-color:#cacbcd;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;color:rgba(0,0,0,.8)}.ui.button:hover .icon{opacity:.85}.ui.button:focus{background-color:#cacbcd;color:rgba(0,0,0,.8);background-image:''!important;-webkit-box-shadow:''!important;box-shadow:''!important}.ui.button:focus .icon{opacity:.85}.ui.active.button:active,.ui.button:active{background-color:#babbbc;background-image:'';color:rgba(0,0,0,.9);-webkit-box-shadow:0 0 0 1px transparent inset,none;box-shadow:0 0 0 1px transparent inset,none}.ui.active.button{background-color:#c0c1c2;background-image:none;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset;color:rgba(0,0,0,.95)}.ui.active.button:hover{background-color:#c0c1c2;background-image:none;color:rgba(0,0,0,.95)}.ui.active.button:active{background-color:#c0c1c2;background-image:none}.ui.loading.loading.loading.loading.loading.loading.button{position:relative;cursor:default;text-shadow:none!important;color:transparent!important;opacity:1;pointer-events:auto;-webkit-transition:all 0s linear,opacity .1s ease;transition:all 0s linear,opacity .1s ease}.ui.loading.button:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.15)}.ui.loading.button:after{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#fff transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.ui.labeled.icon.loading.button .icon{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}@-webkit-keyframes button-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes button-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.basic.loading.button:not(.inverted):before{border-color:rgba(0,0,0,.1)}.ui.basic.loading.button:not(.inverted):after{border-top-color:#767676}.ui.button:disabled,.ui.buttons .disabled.button,.ui.disabled.active.button,.ui.disabled.button,.ui.disabled.button:hover{cursor:default;opacity:.45!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;pointer-events:none!important}.ui.basic.buttons .ui.disabled.button{border-color:rgba(34,36,38,.5)}.ui.animated.button{position:relative;overflow:hidden;padding-right:0!important;vertical-align:middle;z-index:1}.ui.animated.button .content{will-change:transform,opacity}.ui.animated.button .visible.content{position:relative;margin-right:1.5em}.ui.animated.button .hidden.content{position:absolute;width:100%}.ui.animated.button .hidden.content,.ui.animated.button .visible.content{-webkit-transition:right .3s ease 0s;transition:right .3s ease 0s}.ui.animated.button .visible.content{left:auto;right:0}.ui.animated.button .hidden.content{top:50%;left:auto;right:-100%;margin-top:-.5em}.ui.animated.button:focus .visible.content,.ui.animated.button:hover .visible.content{left:auto;right:200%}.ui.animated.button:focus .hidden.content,.ui.animated.button:hover .hidden.content{left:auto;right:0}.ui.vertical.animated.button .hidden.content,.ui.vertical.animated.button .visible.content{-webkit-transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,-webkit-transform .3s ease;transition:top .3s ease,transform .3s ease;transition:top .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.vertical.animated.button .visible.content{-webkit-transform:translateY(0);transform:translateY(0);right:auto}.ui.vertical.animated.button .hidden.content{top:-50%;left:0;right:auto}.ui.vertical.animated.button:focus .visible.content,.ui.vertical.animated.button:hover .visible.content{-webkit-transform:translateY(200%);transform:translateY(200%);right:auto}.ui.vertical.animated.button:focus .hidden.content,.ui.vertical.animated.button:hover .hidden.content{top:50%;right:auto}.ui.fade.animated.button .hidden.content,.ui.fade.animated.button .visible.content{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease}.ui.fade.animated.button .visible.content{left:auto;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.fade.animated.button .hidden.content{opacity:0;left:0;right:auto;-webkit-transform:scale(1.5);transform:scale(1.5)}.ui.fade.animated.button:focus .visible.content,.ui.fade.animated.button:hover .visible.content{left:auto;right:auto;opacity:0;-webkit-transform:scale(.75);transform:scale(.75)}.ui.fade.animated.button:focus .hidden.content,.ui.fade.animated.button:hover .hidden.content{left:0;right:auto;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.ui.inverted.button{-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;background:transparent none;color:#fff;text-shadow:none!important}.ui.inverted.buttons .button{margin:0 0 0 -2px}.ui.inverted.buttons .button:first-child{margin-left:0}.ui.inverted.vertical.buttons .button{margin:0 0 -2px 0}.ui.inverted.vertical.buttons .button:first-child{margin-top:0}.ui.inverted.button:hover{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;color:rgba(0,0,0,.8)}.ui.inverted.button.active,.ui.inverted.button:focus{background:#fff;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important;color:rgba(0,0,0,.8)}.ui.inverted.button.active:focus{background:#dcddde;-webkit-box-shadow:0 0 0 2px #dcddde inset!important;box-shadow:0 0 0 2px #dcddde inset!important;color:rgba(0,0,0,.8)}.ui.labeled.button:not(.icon){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background:0 0!important;padding:0!important;border:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.labeled.button>.button{margin:0}.ui.labeled.button>.label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 0 0 -1px!important;padding:'';font-size:1em;border-color:rgba(34,36,38,.15)}.ui.labeled.button>.tag.label:before{width:1.85em;height:1.85em}.ui.labeled.button:not([class*="left labeled"])>.button{border-top-right-radius:0;border-bottom-right-radius:0}.ui.labeled.button:not([class*="left labeled"])>.label{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.button{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="left labeled"].button>.label{border-top-right-radius:0;border-bottom-right-radius:0}.ui.facebook.button{background-color:#3b5998;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.facebook.button:hover{background-color:#304d8a;color:#fff;text-shadow:none}.ui.facebook.button:active{background-color:#2d4373;color:#fff;text-shadow:none}.ui.twitter.button{background-color:#55acee;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.twitter.button:hover{background-color:#35a2f4;color:#fff;text-shadow:none}.ui.twitter.button:active{background-color:#2795e9;color:#fff;text-shadow:none}.ui.google.plus.button{background-color:#dd4b39;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.google.plus.button:hover{background-color:#e0321c;color:#fff;text-shadow:none}.ui.google.plus.button:active{background-color:#c23321;color:#fff;text-shadow:none}.ui.linkedin.button{background-color:#1f88be;color:#fff;text-shadow:none}.ui.linkedin.button:hover{background-color:#147baf;color:#fff;text-shadow:none}.ui.linkedin.button:active{background-color:#186992;color:#fff;text-shadow:none}.ui.youtube.button{background-color:red;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.youtube.button:hover{background-color:#e60000;color:#fff;text-shadow:none}.ui.youtube.button:active{background-color:#c00;color:#fff;text-shadow:none}.ui.instagram.button{background-color:#49769c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.instagram.button:hover{background-color:#3d698e;color:#fff;text-shadow:none}.ui.instagram.button:active{background-color:#395c79;color:#fff;text-shadow:none}.ui.pinterest.button{background-color:#bd081c;color:#fff;text-shadow:none;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pinterest.button:hover{background-color:#ac0013;color:#fff;text-shadow:none}.ui.pinterest.button:active{background-color:#8c0615;color:#fff;text-shadow:none}.ui.vk.button{background-color:#4d7198;color:#fff;background-image:none;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.vk.button:hover{background-color:#41648a;color:#fff}.ui.vk.button:active{background-color:#3c5876;color:#fff}.ui.button>.icon:not(.button){height:.85714286em;opacity:.8;margin:0 .42857143em 0 -.21428571em;-webkit-transition:opacity .1s ease;transition:opacity .1s ease;vertical-align:'';color:''}.ui.button:not(.icon)>.icon:not(.button):not(.dropdown){margin:0 .42857143em 0 -.21428571em}.ui.button:not(.icon)>.right.icon:not(.button):not(.dropdown){margin:0 -.21428571em 0 .42857143em}.ui[class*="left floated"].button,.ui[class*="left floated"].buttons{float:left;margin-left:0;margin-right:.25em}.ui[class*="right floated"].button,.ui[class*="right floated"].buttons{float:right;margin-right:0;margin-left:.25em}.ui.compact.button,.ui.compact.buttons .button{padding:.58928571em 1.125em .58928571em}.ui.compact.icon.button,.ui.compact.icon.buttons .button{padding:.58928571em .58928571em .58928571em}.ui.compact.labeled.icon.button,.ui.compact.labeled.icon.buttons .button{padding:.58928571em 3.69642857em .58928571em}.ui.mini.button,.ui.mini.buttons .button,.ui.mini.buttons .or{font-size:.78571429rem}.ui.tiny.button,.ui.tiny.buttons .button,.ui.tiny.buttons .or{font-size:.85714286rem}.ui.small.button,.ui.small.buttons .button,.ui.small.buttons .or{font-size:.92857143rem}.ui.button,.ui.buttons .button,.ui.buttons .or{font-size:1rem}.ui.large.button,.ui.large.buttons .button,.ui.large.buttons .or{font-size:1.14285714rem}.ui.big.button,.ui.big.buttons .button,.ui.big.buttons .or{font-size:1.28571429rem}.ui.huge.button,.ui.huge.buttons .button,.ui.huge.buttons .or{font-size:1.42857143rem}.ui.massive.button,.ui.massive.buttons .button,.ui.massive.buttons .or{font-size:1.71428571rem}.ui.icon.button,.ui.icon.buttons .button{padding:.78571429em .78571429em .78571429em}.ui.icon.button>.icon,.ui.icon.buttons .button>.icon{opacity:.9;margin:0!important;vertical-align:top}.ui.basic.button,.ui.basic.buttons .button{background:transparent none!important;color:rgba(0,0,0,.6)!important;font-weight:400;border-radius:.28571429rem;text-transform:none;text-shadow:none!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset}.ui.basic.buttons{-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem}.ui.basic.buttons .button{border-radius:0}.ui.basic.button:hover,.ui.basic.buttons .button:hover{background:#fff!important;color:rgba(0,0,0,.8)!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:focus,.ui.basic.buttons .button:focus{background:#fff!important;color:rgba(0,0,0,.8)!important;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.basic.button:active,.ui.basic.buttons .button:active{background:#f8f8f8!important;color:rgba(0,0,0,.9)!important;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset}.ui.basic.active.button,.ui.basic.buttons .active.button{background:rgba(0,0,0,.05)!important;-webkit-box-shadow:''!important;box-shadow:''!important;color:rgba(0,0,0,.95)!important}.ui.basic.active.button:hover,.ui.basic.buttons .active.button:hover{background-color:rgba(0,0,0,.05)}.ui.basic.buttons .button:hover{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(34,36,38,.35) inset,0 0 0 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .button:active{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 1px 4px 0 rgba(34,36,38,.15) inset inset}.ui.basic.buttons .active.button{-webkit-box-shadow:''!important;box-shadow:''!important}.ui.basic.inverted.button,.ui.basic.inverted.buttons .button{background-color:transparent!important;color:#f9fafb!important;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important}.ui.basic.inverted.button:hover,.ui.basic.inverted.buttons .button:hover{color:#fff!important;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.inverted.button:focus,.ui.basic.inverted.buttons .button:focus{color:#fff!important;-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.inverted.button:active,.ui.basic.inverted.buttons .button:active{background-color:rgba(255,255,255,.08)!important;color:#fff!important;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.9) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset!important}.ui.basic.inverted.active.button,.ui.basic.inverted.buttons .active.button{background-color:rgba(255,255,255,.08);color:#fff;text-shadow:none;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.7) inset;box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}.ui.basic.inverted.active.button:hover,.ui.basic.inverted.buttons .active.button:hover{background-color:rgba(255,255,255,.15);-webkit-box-shadow:0 0 0 2px #fff inset!important;box-shadow:0 0 0 2px #fff inset!important}.ui.basic.buttons .button{border-left:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.vertical.buttons .button{border-left:none}.ui.basic.vertical.buttons .button{border-left-width:0;border-top:1px solid rgba(34,36,38,.15)}.ui.basic.vertical.buttons .button:first-child{border-top-width:0}.ui.labeled.icon.button,.ui.labeled.icon.buttons .button{position:relative;padding-left:4.07142857em!important;padding-right:1.5em!important}.ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{position:absolute;height:100%;line-height:1;border-radius:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit;text-align:center;margin:0;width:2.57142857em;background-color:rgba(0,0,0,.05);color:'';-webkit-box-shadow:-1px 0 0 0 transparent inset;box-shadow:-1px 0 0 0 transparent inset}.ui.labeled.icon.button>.icon,.ui.labeled.icon.buttons>.button>.icon{top:0;left:0}.ui[class*="right labeled"].icon.button{padding-right:4.07142857em!important;padding-left:1.5em!important}.ui[class*="right labeled"].icon.button>.icon{left:auto;right:0;border-radius:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;-webkit-box-shadow:1px 0 0 0 transparent inset;box-shadow:1px 0 0 0 transparent inset}.ui.labeled.icon.button>.icon:after,.ui.labeled.icon.button>.icon:before,.ui.labeled.icon.buttons>.button>.icon:after,.ui.labeled.icon.buttons>.button>.icon:before{display:block;position:absolute;width:100%;top:50%;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.ui.labeled.icon.buttons .button>.icon{border-radius:0}.ui.labeled.icon.buttons .button:first-child>.icon{border-top-left-radius:.28571429rem;border-bottom-left-radius:.28571429rem}.ui.labeled.icon.buttons .button:last-child>.icon{border-top-right-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.vertical.labeled.icon.buttons .button:first-child>.icon{border-radius:0;border-top-left-radius:.28571429rem}.ui.vertical.labeled.icon.buttons .button:last-child>.icon{border-radius:0;border-bottom-left-radius:.28571429rem}.ui.fluid[class*="left labeled"].icon.button,.ui.fluid[class*="right labeled"].icon.button{padding-left:1.5em!important;padding-right:1.5em!important}.ui.button.toggle.active,.ui.buttons .button.toggle.active,.ui.toggle.buttons .active.button{background-color:#21ba45!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none;color:#fff!important}.ui.button.toggle.active:hover{background-color:#16ab39!important;text-shadow:none;color:#fff!important}.ui.circular.button{border-radius:10em}.ui.circular.button>.icon{width:1em;vertical-align:baseline}.ui.buttons .or{position:relative;width:.3em;height:2.57142857em;z-index:3}.ui.buttons .or:before{position:absolute;text-align:center;border-radius:500rem;content:'or';top:50%;left:50%;background-color:#fff;text-shadow:none;margin-top:-.89285714em;margin-left:-.89285714em;width:1.78571429em;height:1.78571429em;line-height:1.78571429em;color:rgba(0,0,0,.4);font-style:normal;font-weight:700;-webkit-box-shadow:0 0 0 1px transparent inset;box-shadow:0 0 0 1px transparent inset}.ui.buttons .or[data-text]:before{content:attr(data-text)}.ui.fluid.buttons .or{width:0!important}.ui.fluid.buttons .or:after{display:none}.ui.attached.button{position:relative;display:block;margin:0;border-radius:0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15)!important;box-shadow:0 0 0 1px rgba(34,36,38,.15)!important}.ui.attached.top.button{border-radius:.28571429rem .28571429rem 0 0}.ui.attached.bottom.button{border-radius:0 0 .28571429rem .28571429rem}.ui.left.attached.button{display:inline-block;border-left:none;text-align:right;padding-right:.75em;border-radius:.28571429rem 0 0 .28571429rem}.ui.right.attached.button{display:inline-block;text-align:left;padding-left:.75em;border-radius:0 .28571429rem .28571429rem 0}.ui.attached.buttons{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:auto!important;z-index:2;margin-left:-1px;margin-right:-1px}.ui.attached.buttons .button{margin:0}.ui.attached.buttons .button:first-child{border-radius:0}.ui.attached.buttons .button:last-child{border-radius:0}.ui[class*="top attached"].buttons{margin-bottom:-1px;border-radius:.28571429rem .28571429rem 0 0}.ui[class*="top attached"].buttons .button:first-child{border-radius:.28571429rem 0 0 0}.ui[class*="top attached"].buttons .button:last-child{border-radius:0 .28571429rem 0 0}.ui[class*="bottom attached"].buttons{margin-top:-1px;border-radius:0 0 .28571429rem .28571429rem}.ui[class*="bottom attached"].buttons .button:first-child{border-radius:0 0 0 .28571429rem}.ui[class*="bottom attached"].buttons .button:last-child{border-radius:0 0 .28571429rem 0}.ui[class*="left attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:0;margin-left:-1px;border-radius:0 .28571429rem .28571429rem 0}.ui[class*="left attached"].buttons .button:first-child{margin-left:-1px;border-radius:0 .28571429rem 0 0}.ui[class*="left attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 .28571429rem 0}.ui[class*="right attached"].buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-left:0;margin-right:-1px;border-radius:.28571429rem 0 0 .28571429rem}.ui[class*="right attached"].buttons .button:first-child{margin-left:-1px;border-radius:.28571429rem 0 0 0}.ui[class*="right attached"].buttons .button:last-child{margin-left:-1px;border-radius:0 0 0 .28571429rem}.ui.fluid.button,.ui.fluid.buttons{width:100%}.ui.fluid.button{display:block}.ui.two.buttons{width:100%}.ui.two.buttons>.button{width:50%}.ui.three.buttons{width:100%}.ui.three.buttons>.button{width:33.333%}.ui.four.buttons{width:100%}.ui.four.buttons>.button{width:25%}.ui.five.buttons{width:100%}.ui.five.buttons>.button{width:20%}.ui.six.buttons{width:100%}.ui.six.buttons>.button{width:16.666%}.ui.seven.buttons{width:100%}.ui.seven.buttons>.button{width:14.285%}.ui.eight.buttons{width:100%}.ui.eight.buttons>.button{width:12.5%}.ui.nine.buttons{width:100%}.ui.nine.buttons>.button{width:11.11%}.ui.ten.buttons{width:100%}.ui.ten.buttons>.button{width:10%}.ui.eleven.buttons{width:100%}.ui.eleven.buttons>.button{width:9.09%}.ui.twelve.buttons{width:100%}.ui.twelve.buttons>.button{width:8.3333%}.ui.fluid.vertical.buttons,.ui.fluid.vertical.buttons>.button{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.ui.two.vertical.buttons>.button{height:50%}.ui.three.vertical.buttons>.button{height:33.333%}.ui.four.vertical.buttons>.button{height:25%}.ui.five.vertical.buttons>.button{height:20%}.ui.six.vertical.buttons>.button{height:16.666%}.ui.seven.vertical.buttons>.button{height:14.285%}.ui.eight.vertical.buttons>.button{height:12.5%}.ui.nine.vertical.buttons>.button{height:11.11%}.ui.ten.vertical.buttons>.button{height:10%}.ui.eleven.vertical.buttons>.button{height:9.09%}.ui.twelve.vertical.buttons>.button{height:8.3333%}.ui.black.button,.ui.black.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.black.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.black.button:hover,.ui.black.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.black.button:focus,.ui.black.buttons .button:focus{background-color:#2f3032;color:#fff;text-shadow:none}.ui.black.button:active,.ui.black.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.black.active.button,.ui.black.button .active.button:active,.ui.black.buttons .active.button,.ui.black.buttons .active.button:active{background-color:#0f0f10;color:#fff;text-shadow:none}.ui.basic.black.button,.ui.basic.black.buttons .button{-webkit-box-shadow:0 0 0 1px #1b1c1d inset!important;box-shadow:0 0 0 1px #1b1c1d inset!important;color:#1b1c1d!important}.ui.basic.black.button:hover,.ui.basic.black.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#27292a!important}.ui.basic.black.button:focus,.ui.basic.black.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #2f3032 inset!important;box-shadow:0 0 0 1px #2f3032 inset!important;color:#27292a!important}.ui.basic.black.active.button,.ui.basic.black.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0f0f10 inset!important;box-shadow:0 0 0 1px #0f0f10 inset!important;color:#343637!important}.ui.basic.black.button:active,.ui.basic.black.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset!important;box-shadow:0 0 0 1px #343637 inset!important;color:#343637!important}.ui.buttons:not(.vertical)>.basic.black.button:not(:first-child){margin-left:-1px}.ui.inverted.black.button,.ui.inverted.black.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset!important;box-shadow:0 0 0 2px #d4d4d5 inset!important;color:#fff}.ui.inverted.black.button.active,.ui.inverted.black.button:active,.ui.inverted.black.button:focus,.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button.active,.ui.inverted.black.buttons .button:active,.ui.inverted.black.buttons .button:focus,.ui.inverted.black.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.black.button:hover,.ui.inverted.black.buttons .button:hover{background-color:#000}.ui.inverted.black.button:focus,.ui.inverted.black.buttons .button:focus{background-color:#000}.ui.inverted.black.active.button,.ui.inverted.black.buttons .active.button{background-color:#000}.ui.inverted.black.button:active,.ui.inverted.black.buttons .button:active{background-color:#000}.ui.inverted.black.basic.button,.ui.inverted.black.basic.buttons .button,.ui.inverted.black.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.black.basic.button:hover,.ui.inverted.black.basic.buttons .button:hover,.ui.inverted.black.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.inverted.black.basic.button:focus,.ui.inverted.black.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#545454!important}.ui.inverted.black.basic.active.button,.ui.inverted.black.basic.buttons .active.button,.ui.inverted.black.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.inverted.black.basic.button:active,.ui.inverted.black.basic.buttons .button:active,.ui.inverted.black.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #000 inset!important;box-shadow:0 0 0 2px #000 inset!important;color:#fff!important}.ui.grey.button,.ui.grey.buttons .button{background-color:#767676;color:#fff;text-shadow:none;background-image:none}.ui.grey.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.grey.button:hover,.ui.grey.buttons .button:hover{background-color:#838383;color:#fff;text-shadow:none}.ui.grey.button:focus,.ui.grey.buttons .button:focus{background-color:#8a8a8a;color:#fff;text-shadow:none}.ui.grey.button:active,.ui.grey.buttons .button:active{background-color:#909090;color:#fff;text-shadow:none}.ui.grey.active.button,.ui.grey.button .active.button:active,.ui.grey.buttons .active.button,.ui.grey.buttons .active.button:active{background-color:#696969;color:#fff;text-shadow:none}.ui.basic.grey.button,.ui.basic.grey.buttons .button{-webkit-box-shadow:0 0 0 1px #767676 inset!important;box-shadow:0 0 0 1px #767676 inset!important;color:#767676!important}.ui.basic.grey.button:hover,.ui.basic.grey.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #838383 inset!important;box-shadow:0 0 0 1px #838383 inset!important;color:#838383!important}.ui.basic.grey.button:focus,.ui.basic.grey.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #8a8a8a inset!important;box-shadow:0 0 0 1px #8a8a8a inset!important;color:#838383!important}.ui.basic.grey.active.button,.ui.basic.grey.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #696969 inset!important;box-shadow:0 0 0 1px #696969 inset!important;color:#909090!important}.ui.basic.grey.button:active,.ui.basic.grey.buttons .button:active{-webkit-box-shadow:0 0 0 1px #909090 inset!important;box-shadow:0 0 0 1px #909090 inset!important;color:#909090!important}.ui.buttons:not(.vertical)>.basic.grey.button:not(:first-child){margin-left:-1px}.ui.inverted.grey.button,.ui.inverted.grey.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d4d4d5 inset!important;box-shadow:0 0 0 2px #d4d4d5 inset!important;color:#fff}.ui.inverted.grey.button.active,.ui.inverted.grey.button:active,.ui.inverted.grey.button:focus,.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button.active,.ui.inverted.grey.buttons .button:active,.ui.inverted.grey.buttons .button:focus,.ui.inverted.grey.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.grey.button:hover,.ui.inverted.grey.buttons .button:hover{background-color:#cfd0d2}.ui.inverted.grey.button:focus,.ui.inverted.grey.buttons .button:focus{background-color:#c7c9cb}.ui.inverted.grey.active.button,.ui.inverted.grey.buttons .active.button{background-color:#cfd0d2}.ui.inverted.grey.button:active,.ui.inverted.grey.buttons .button:active{background-color:#c2c4c5}.ui.inverted.grey.basic.button,.ui.inverted.grey.basic.buttons .button,.ui.inverted.grey.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.grey.basic.button:hover,.ui.inverted.grey.basic.buttons .button:hover,.ui.inverted.grey.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #cfd0d2 inset!important;box-shadow:0 0 0 2px #cfd0d2 inset!important;color:#fff!important}.ui.inverted.grey.basic.button:focus,.ui.inverted.grey.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c7c9cb inset!important;box-shadow:0 0 0 2px #c7c9cb inset!important;color:#dcddde!important}.ui.inverted.grey.basic.active.button,.ui.inverted.grey.basic.buttons .active.button,.ui.inverted.grey.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cfd0d2 inset!important;box-shadow:0 0 0 2px #cfd0d2 inset!important;color:#fff!important}.ui.inverted.grey.basic.button:active,.ui.inverted.grey.basic.buttons .button:active,.ui.inverted.grey.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #c2c4c5 inset!important;box-shadow:0 0 0 2px #c2c4c5 inset!important;color:#fff!important}.ui.brown.button,.ui.brown.buttons .button{background-color:#a5673f;color:#fff;text-shadow:none;background-image:none}.ui.brown.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.brown.button:hover,.ui.brown.buttons .button:hover{background-color:#975b33;color:#fff;text-shadow:none}.ui.brown.button:focus,.ui.brown.buttons .button:focus{background-color:#90532b;color:#fff;text-shadow:none}.ui.brown.button:active,.ui.brown.buttons .button:active{background-color:#805031;color:#fff;text-shadow:none}.ui.brown.active.button,.ui.brown.button .active.button:active,.ui.brown.buttons .active.button,.ui.brown.buttons .active.button:active{background-color:#995a31;color:#fff;text-shadow:none}.ui.basic.brown.button,.ui.basic.brown.buttons .button{-webkit-box-shadow:0 0 0 1px #a5673f inset!important;box-shadow:0 0 0 1px #a5673f inset!important;color:#a5673f!important}.ui.basic.brown.button:hover,.ui.basic.brown.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #975b33 inset!important;box-shadow:0 0 0 1px #975b33 inset!important;color:#975b33!important}.ui.basic.brown.button:focus,.ui.basic.brown.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #90532b inset!important;box-shadow:0 0 0 1px #90532b inset!important;color:#975b33!important}.ui.basic.brown.active.button,.ui.basic.brown.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #995a31 inset!important;box-shadow:0 0 0 1px #995a31 inset!important;color:#805031!important}.ui.basic.brown.button:active,.ui.basic.brown.buttons .button:active{-webkit-box-shadow:0 0 0 1px #805031 inset!important;box-shadow:0 0 0 1px #805031 inset!important;color:#805031!important}.ui.buttons:not(.vertical)>.basic.brown.button:not(:first-child){margin-left:-1px}.ui.inverted.brown.button,.ui.inverted.brown.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d67c1c inset!important;box-shadow:0 0 0 2px #d67c1c inset!important;color:#d67c1c}.ui.inverted.brown.button.active,.ui.inverted.brown.button:active,.ui.inverted.brown.button:focus,.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button.active,.ui.inverted.brown.buttons .button:active,.ui.inverted.brown.buttons .button:focus,.ui.inverted.brown.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.brown.button:hover,.ui.inverted.brown.buttons .button:hover{background-color:#c86f11}.ui.inverted.brown.button:focus,.ui.inverted.brown.buttons .button:focus{background-color:#c16808}.ui.inverted.brown.active.button,.ui.inverted.brown.buttons .active.button{background-color:#cc6f0d}.ui.inverted.brown.button:active,.ui.inverted.brown.buttons .button:active{background-color:#a96216}.ui.inverted.brown.basic.button,.ui.inverted.brown.basic.buttons .button,.ui.inverted.brown.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.brown.basic.button:hover,.ui.inverted.brown.basic.buttons .button:hover,.ui.inverted.brown.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #c86f11 inset!important;box-shadow:0 0 0 2px #c86f11 inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.button:focus,.ui.inverted.brown.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #c16808 inset!important;box-shadow:0 0 0 2px #c16808 inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.active.button,.ui.inverted.brown.basic.buttons .active.button,.ui.inverted.brown.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #cc6f0d inset!important;box-shadow:0 0 0 2px #cc6f0d inset!important;color:#d67c1c!important}.ui.inverted.brown.basic.button:active,.ui.inverted.brown.basic.buttons .button:active,.ui.inverted.brown.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #a96216 inset!important;box-shadow:0 0 0 2px #a96216 inset!important;color:#d67c1c!important}.ui.blue.button,.ui.blue.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.blue.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.blue.button:hover,.ui.blue.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.blue.button:focus,.ui.blue.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.blue.button:active,.ui.blue.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.blue.active.button,.ui.blue.button .active.button:active,.ui.blue.buttons .active.button,.ui.blue.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.blue.button,.ui.basic.blue.buttons .button{-webkit-box-shadow:0 0 0 1px #2185d0 inset!important;box-shadow:0 0 0 1px #2185d0 inset!important;color:#2185d0!important}.ui.basic.blue.button:hover,.ui.basic.blue.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1678c2 inset!important;box-shadow:0 0 0 1px #1678c2 inset!important;color:#1678c2!important}.ui.basic.blue.button:focus,.ui.basic.blue.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0d71bb inset!important;box-shadow:0 0 0 1px #0d71bb inset!important;color:#1678c2!important}.ui.basic.blue.active.button,.ui.basic.blue.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1279c6 inset!important;box-shadow:0 0 0 1px #1279c6 inset!important;color:#1a69a4!important}.ui.basic.blue.button:active,.ui.basic.blue.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset!important;box-shadow:0 0 0 1px #1a69a4 inset!important;color:#1a69a4!important}.ui.buttons:not(.vertical)>.basic.blue.button:not(:first-child){margin-left:-1px}.ui.inverted.blue.button,.ui.inverted.blue.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset!important;box-shadow:0 0 0 2px #54c8ff inset!important;color:#54c8ff}.ui.inverted.blue.button.active,.ui.inverted.blue.button:active,.ui.inverted.blue.button:focus,.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button.active,.ui.inverted.blue.buttons .button:active,.ui.inverted.blue.buttons .button:focus,.ui.inverted.blue.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.blue.button:hover,.ui.inverted.blue.buttons .button:hover{background-color:#3ac0ff}.ui.inverted.blue.button:focus,.ui.inverted.blue.buttons .button:focus{background-color:#2bbbff}.ui.inverted.blue.active.button,.ui.inverted.blue.buttons .active.button{background-color:#3ac0ff}.ui.inverted.blue.button:active,.ui.inverted.blue.buttons .button:active{background-color:#21b8ff}.ui.inverted.blue.basic.button,.ui.inverted.blue.basic.buttons .button,.ui.inverted.blue.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.blue.basic.button:hover,.ui.inverted.blue.basic.buttons .button:hover,.ui.inverted.blue.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.button:focus,.ui.inverted.blue.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset!important;box-shadow:0 0 0 2px #2bbbff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.active.button,.ui.inverted.blue.basic.buttons .active.button,.ui.inverted.blue.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.blue.basic.button:active,.ui.inverted.blue.basic.buttons .button:active,.ui.inverted.blue.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset!important;box-shadow:0 0 0 2px #21b8ff inset!important;color:#54c8ff!important}.ui.green.button,.ui.green.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.green.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.green.button:hover,.ui.green.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.green.button:focus,.ui.green.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.green.button:active,.ui.green.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.green.active.button,.ui.green.button .active.button:active,.ui.green.buttons .active.button,.ui.green.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.green.button,.ui.basic.green.buttons .button{-webkit-box-shadow:0 0 0 1px #21ba45 inset!important;box-shadow:0 0 0 1px #21ba45 inset!important;color:#21ba45!important}.ui.basic.green.button:hover,.ui.basic.green.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #16ab39 inset!important;box-shadow:0 0 0 1px #16ab39 inset!important;color:#16ab39!important}.ui.basic.green.button:focus,.ui.basic.green.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0ea432 inset!important;box-shadow:0 0 0 1px #0ea432 inset!important;color:#16ab39!important}.ui.basic.green.active.button,.ui.basic.green.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #13ae38 inset!important;box-shadow:0 0 0 1px #13ae38 inset!important;color:#198f35!important}.ui.basic.green.button:active,.ui.basic.green.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset!important;box-shadow:0 0 0 1px #198f35 inset!important;color:#198f35!important}.ui.buttons:not(.vertical)>.basic.green.button:not(:first-child){margin-left:-1px}.ui.inverted.green.button,.ui.inverted.green.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #2ecc40 inset!important;box-shadow:0 0 0 2px #2ecc40 inset!important;color:#2ecc40}.ui.inverted.green.button.active,.ui.inverted.green.button:active,.ui.inverted.green.button:focus,.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button.active,.ui.inverted.green.buttons .button:active,.ui.inverted.green.buttons .button:focus,.ui.inverted.green.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.green.button:hover,.ui.inverted.green.buttons .button:hover{background-color:#22be34}.ui.inverted.green.button:focus,.ui.inverted.green.buttons .button:focus{background-color:#19b82b}.ui.inverted.green.active.button,.ui.inverted.green.buttons .active.button{background-color:#1fc231}.ui.inverted.green.button:active,.ui.inverted.green.buttons .button:active{background-color:#25a233}.ui.inverted.green.basic.button,.ui.inverted.green.basic.buttons .button,.ui.inverted.green.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.green.basic.button:hover,.ui.inverted.green.basic.buttons .button:hover,.ui.inverted.green.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #22be34 inset!important;box-shadow:0 0 0 2px #22be34 inset!important;color:#2ecc40!important}.ui.inverted.green.basic.button:focus,.ui.inverted.green.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #19b82b inset!important;box-shadow:0 0 0 2px #19b82b inset!important;color:#2ecc40!important}.ui.inverted.green.basic.active.button,.ui.inverted.green.basic.buttons .active.button,.ui.inverted.green.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #1fc231 inset!important;box-shadow:0 0 0 2px #1fc231 inset!important;color:#2ecc40!important}.ui.inverted.green.basic.button:active,.ui.inverted.green.basic.buttons .button:active,.ui.inverted.green.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #25a233 inset!important;box-shadow:0 0 0 2px #25a233 inset!important;color:#2ecc40!important}.ui.orange.button,.ui.orange.buttons .button{background-color:#f2711c;color:#fff;text-shadow:none;background-image:none}.ui.orange.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.orange.button:hover,.ui.orange.buttons .button:hover{background-color:#f26202;color:#fff;text-shadow:none}.ui.orange.button:focus,.ui.orange.buttons .button:focus{background-color:#e55b00;color:#fff;text-shadow:none}.ui.orange.button:active,.ui.orange.buttons .button:active{background-color:#cf590c;color:#fff;text-shadow:none}.ui.orange.active.button,.ui.orange.button .active.button:active,.ui.orange.buttons .active.button,.ui.orange.buttons .active.button:active{background-color:#f56100;color:#fff;text-shadow:none}.ui.basic.orange.button,.ui.basic.orange.buttons .button{-webkit-box-shadow:0 0 0 1px #f2711c inset!important;box-shadow:0 0 0 1px #f2711c inset!important;color:#f2711c!important}.ui.basic.orange.button:hover,.ui.basic.orange.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #f26202 inset!important;box-shadow:0 0 0 1px #f26202 inset!important;color:#f26202!important}.ui.basic.orange.button:focus,.ui.basic.orange.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e55b00 inset!important;box-shadow:0 0 0 1px #e55b00 inset!important;color:#f26202!important}.ui.basic.orange.active.button,.ui.basic.orange.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #f56100 inset!important;box-shadow:0 0 0 1px #f56100 inset!important;color:#cf590c!important}.ui.basic.orange.button:active,.ui.basic.orange.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cf590c inset!important;box-shadow:0 0 0 1px #cf590c inset!important;color:#cf590c!important}.ui.buttons:not(.vertical)>.basic.orange.button:not(:first-child){margin-left:-1px}.ui.inverted.orange.button,.ui.inverted.orange.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff851b inset!important;box-shadow:0 0 0 2px #ff851b inset!important;color:#ff851b}.ui.inverted.orange.button.active,.ui.inverted.orange.button:active,.ui.inverted.orange.button:focus,.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button.active,.ui.inverted.orange.buttons .button:active,.ui.inverted.orange.buttons .button:focus,.ui.inverted.orange.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.orange.button:hover,.ui.inverted.orange.buttons .button:hover{background-color:#ff7701}.ui.inverted.orange.button:focus,.ui.inverted.orange.buttons .button:focus{background-color:#f17000}.ui.inverted.orange.active.button,.ui.inverted.orange.buttons .active.button{background-color:#ff7701}.ui.inverted.orange.button:active,.ui.inverted.orange.buttons .button:active{background-color:#e76b00}.ui.inverted.orange.basic.button,.ui.inverted.orange.basic.buttons .button,.ui.inverted.orange.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.orange.basic.button:hover,.ui.inverted.orange.basic.buttons .button:hover,.ui.inverted.orange.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff7701 inset!important;box-shadow:0 0 0 2px #ff7701 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.button:focus,.ui.inverted.orange.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f17000 inset!important;box-shadow:0 0 0 2px #f17000 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.active.button,.ui.inverted.orange.basic.buttons .active.button,.ui.inverted.orange.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff7701 inset!important;box-shadow:0 0 0 2px #ff7701 inset!important;color:#ff851b!important}.ui.inverted.orange.basic.button:active,.ui.inverted.orange.basic.buttons .button:active,.ui.inverted.orange.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #e76b00 inset!important;box-shadow:0 0 0 2px #e76b00 inset!important;color:#ff851b!important}.ui.pink.button,.ui.pink.buttons .button{background-color:#e03997;color:#fff;text-shadow:none;background-image:none}.ui.pink.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.pink.button:hover,.ui.pink.buttons .button:hover{background-color:#e61a8d;color:#fff;text-shadow:none}.ui.pink.button:focus,.ui.pink.buttons .button:focus{background-color:#e10f85;color:#fff;text-shadow:none}.ui.pink.button:active,.ui.pink.buttons .button:active{background-color:#c71f7e;color:#fff;text-shadow:none}.ui.pink.active.button,.ui.pink.button .active.button:active,.ui.pink.buttons .active.button,.ui.pink.buttons .active.button:active{background-color:#ea158d;color:#fff;text-shadow:none}.ui.basic.pink.button,.ui.basic.pink.buttons .button{-webkit-box-shadow:0 0 0 1px #e03997 inset!important;box-shadow:0 0 0 1px #e03997 inset!important;color:#e03997!important}.ui.basic.pink.button:hover,.ui.basic.pink.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e61a8d inset!important;box-shadow:0 0 0 1px #e61a8d inset!important;color:#e61a8d!important}.ui.basic.pink.button:focus,.ui.basic.pink.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #e10f85 inset!important;box-shadow:0 0 0 1px #e10f85 inset!important;color:#e61a8d!important}.ui.basic.pink.active.button,.ui.basic.pink.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ea158d inset!important;box-shadow:0 0 0 1px #ea158d inset!important;color:#c71f7e!important}.ui.basic.pink.button:active,.ui.basic.pink.buttons .button:active{-webkit-box-shadow:0 0 0 1px #c71f7e inset!important;box-shadow:0 0 0 1px #c71f7e inset!important;color:#c71f7e!important}.ui.buttons:not(.vertical)>.basic.pink.button:not(:first-child){margin-left:-1px}.ui.inverted.pink.button,.ui.inverted.pink.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff8edf inset!important;box-shadow:0 0 0 2px #ff8edf inset!important;color:#ff8edf}.ui.inverted.pink.button.active,.ui.inverted.pink.button:active,.ui.inverted.pink.button:focus,.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button.active,.ui.inverted.pink.buttons .button:active,.ui.inverted.pink.buttons .button:focus,.ui.inverted.pink.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.pink.button:hover,.ui.inverted.pink.buttons .button:hover{background-color:#ff74d8}.ui.inverted.pink.button:focus,.ui.inverted.pink.buttons .button:focus{background-color:#ff65d3}.ui.inverted.pink.active.button,.ui.inverted.pink.buttons .active.button{background-color:#ff74d8}.ui.inverted.pink.button:active,.ui.inverted.pink.buttons .button:active{background-color:#ff5bd1}.ui.inverted.pink.basic.button,.ui.inverted.pink.basic.buttons .button,.ui.inverted.pink.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.pink.basic.button:hover,.ui.inverted.pink.basic.buttons .button:hover,.ui.inverted.pink.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff74d8 inset!important;box-shadow:0 0 0 2px #ff74d8 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.button:focus,.ui.inverted.pink.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff65d3 inset!important;box-shadow:0 0 0 2px #ff65d3 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.active.button,.ui.inverted.pink.basic.buttons .active.button,.ui.inverted.pink.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff74d8 inset!important;box-shadow:0 0 0 2px #ff74d8 inset!important;color:#ff8edf!important}.ui.inverted.pink.basic.button:active,.ui.inverted.pink.basic.buttons .button:active,.ui.inverted.pink.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff5bd1 inset!important;box-shadow:0 0 0 2px #ff5bd1 inset!important;color:#ff8edf!important}.ui.violet.button,.ui.violet.buttons .button{background-color:#6435c9;color:#fff;text-shadow:none;background-image:none}.ui.violet.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.violet.button:hover,.ui.violet.buttons .button:hover{background-color:#5829bb;color:#fff;text-shadow:none}.ui.violet.button:focus,.ui.violet.buttons .button:focus{background-color:#4f20b5;color:#fff;text-shadow:none}.ui.violet.button:active,.ui.violet.buttons .button:active{background-color:#502aa1;color:#fff;text-shadow:none}.ui.violet.active.button,.ui.violet.button .active.button:active,.ui.violet.buttons .active.button,.ui.violet.buttons .active.button:active{background-color:#5626bf;color:#fff;text-shadow:none}.ui.basic.violet.button,.ui.basic.violet.buttons .button{-webkit-box-shadow:0 0 0 1px #6435c9 inset!important;box-shadow:0 0 0 1px #6435c9 inset!important;color:#6435c9!important}.ui.basic.violet.button:hover,.ui.basic.violet.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #5829bb inset!important;box-shadow:0 0 0 1px #5829bb inset!important;color:#5829bb!important}.ui.basic.violet.button:focus,.ui.basic.violet.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #4f20b5 inset!important;box-shadow:0 0 0 1px #4f20b5 inset!important;color:#5829bb!important}.ui.basic.violet.active.button,.ui.basic.violet.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #5626bf inset!important;box-shadow:0 0 0 1px #5626bf inset!important;color:#502aa1!important}.ui.basic.violet.button:active,.ui.basic.violet.buttons .button:active{-webkit-box-shadow:0 0 0 1px #502aa1 inset!important;box-shadow:0 0 0 1px #502aa1 inset!important;color:#502aa1!important}.ui.buttons:not(.vertical)>.basic.violet.button:not(:first-child){margin-left:-1px}.ui.inverted.violet.button,.ui.inverted.violet.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #a291fb inset!important;box-shadow:0 0 0 2px #a291fb inset!important;color:#a291fb}.ui.inverted.violet.button.active,.ui.inverted.violet.button:active,.ui.inverted.violet.button:focus,.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button.active,.ui.inverted.violet.buttons .button:active,.ui.inverted.violet.buttons .button:focus,.ui.inverted.violet.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.violet.button:hover,.ui.inverted.violet.buttons .button:hover{background-color:#8a73ff}.ui.inverted.violet.button:focus,.ui.inverted.violet.buttons .button:focus{background-color:#7d64ff}.ui.inverted.violet.active.button,.ui.inverted.violet.buttons .active.button{background-color:#8a73ff}.ui.inverted.violet.button:active,.ui.inverted.violet.buttons .button:active{background-color:#7860f9}.ui.inverted.violet.basic.button,.ui.inverted.violet.basic.buttons .button,.ui.inverted.violet.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.violet.basic.button:hover,.ui.inverted.violet.basic.buttons .button:hover,.ui.inverted.violet.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #8a73ff inset!important;box-shadow:0 0 0 2px #8a73ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.button:focus,.ui.inverted.violet.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #7d64ff inset!important;box-shadow:0 0 0 2px #7d64ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.active.button,.ui.inverted.violet.basic.buttons .active.button,.ui.inverted.violet.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #8a73ff inset!important;box-shadow:0 0 0 2px #8a73ff inset!important;color:#a291fb!important}.ui.inverted.violet.basic.button:active,.ui.inverted.violet.basic.buttons .button:active,.ui.inverted.violet.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #7860f9 inset!important;box-shadow:0 0 0 2px #7860f9 inset!important;color:#a291fb!important}.ui.purple.button,.ui.purple.buttons .button{background-color:#a333c8;color:#fff;text-shadow:none;background-image:none}.ui.purple.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.purple.button:hover,.ui.purple.buttons .button:hover{background-color:#9627ba;color:#fff;text-shadow:none}.ui.purple.button:focus,.ui.purple.buttons .button:focus{background-color:#8f1eb4;color:#fff;text-shadow:none}.ui.purple.button:active,.ui.purple.buttons .button:active{background-color:#82299f;color:#fff;text-shadow:none}.ui.purple.active.button,.ui.purple.button .active.button:active,.ui.purple.buttons .active.button,.ui.purple.buttons .active.button:active{background-color:#9724be;color:#fff;text-shadow:none}.ui.basic.purple.button,.ui.basic.purple.buttons .button{-webkit-box-shadow:0 0 0 1px #a333c8 inset!important;box-shadow:0 0 0 1px #a333c8 inset!important;color:#a333c8!important}.ui.basic.purple.button:hover,.ui.basic.purple.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #9627ba inset!important;box-shadow:0 0 0 1px #9627ba inset!important;color:#9627ba!important}.ui.basic.purple.button:focus,.ui.basic.purple.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #8f1eb4 inset!important;box-shadow:0 0 0 1px #8f1eb4 inset!important;color:#9627ba!important}.ui.basic.purple.active.button,.ui.basic.purple.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #9724be inset!important;box-shadow:0 0 0 1px #9724be inset!important;color:#82299f!important}.ui.basic.purple.button:active,.ui.basic.purple.buttons .button:active{-webkit-box-shadow:0 0 0 1px #82299f inset!important;box-shadow:0 0 0 1px #82299f inset!important;color:#82299f!important}.ui.buttons:not(.vertical)>.basic.purple.button:not(:first-child){margin-left:-1px}.ui.inverted.purple.button,.ui.inverted.purple.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #dc73ff inset!important;box-shadow:0 0 0 2px #dc73ff inset!important;color:#dc73ff}.ui.inverted.purple.button.active,.ui.inverted.purple.button:active,.ui.inverted.purple.button:focus,.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button.active,.ui.inverted.purple.buttons .button:active,.ui.inverted.purple.buttons .button:focus,.ui.inverted.purple.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.purple.button:hover,.ui.inverted.purple.buttons .button:hover{background-color:#d65aff}.ui.inverted.purple.button:focus,.ui.inverted.purple.buttons .button:focus{background-color:#d24aff}.ui.inverted.purple.active.button,.ui.inverted.purple.buttons .active.button{background-color:#d65aff}.ui.inverted.purple.button:active,.ui.inverted.purple.buttons .button:active{background-color:#cf40ff}.ui.inverted.purple.basic.button,.ui.inverted.purple.basic.buttons .button,.ui.inverted.purple.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.purple.basic.button:hover,.ui.inverted.purple.basic.buttons .button:hover,.ui.inverted.purple.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #d65aff inset!important;box-shadow:0 0 0 2px #d65aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.button:focus,.ui.inverted.purple.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #d24aff inset!important;box-shadow:0 0 0 2px #d24aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.active.button,.ui.inverted.purple.basic.buttons .active.button,.ui.inverted.purple.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #d65aff inset!important;box-shadow:0 0 0 2px #d65aff inset!important;color:#dc73ff!important}.ui.inverted.purple.basic.button:active,.ui.inverted.purple.basic.buttons .button:active,.ui.inverted.purple.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cf40ff inset!important;box-shadow:0 0 0 2px #cf40ff inset!important;color:#dc73ff!important}.ui.red.button,.ui.red.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.red.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.red.button:hover,.ui.red.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.red.button:focus,.ui.red.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.red.button:active,.ui.red.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.red.active.button,.ui.red.button .active.button:active,.ui.red.buttons .active.button,.ui.red.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.red.button,.ui.basic.red.buttons .button{-webkit-box-shadow:0 0 0 1px #db2828 inset!important;box-shadow:0 0 0 1px #db2828 inset!important;color:#db2828!important}.ui.basic.red.button:hover,.ui.basic.red.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d01919 inset!important;box-shadow:0 0 0 1px #d01919 inset!important;color:#d01919!important}.ui.basic.red.button:focus,.ui.basic.red.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ca1010 inset!important;box-shadow:0 0 0 1px #ca1010 inset!important;color:#d01919!important}.ui.basic.red.active.button,.ui.basic.red.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d41515 inset!important;box-shadow:0 0 0 1px #d41515 inset!important;color:#b21e1e!important}.ui.basic.red.button:active,.ui.basic.red.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset!important;box-shadow:0 0 0 1px #b21e1e inset!important;color:#b21e1e!important}.ui.buttons:not(.vertical)>.basic.red.button:not(:first-child){margin-left:-1px}.ui.inverted.red.button,.ui.inverted.red.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ff695e inset!important;box-shadow:0 0 0 2px #ff695e inset!important;color:#ff695e}.ui.inverted.red.button.active,.ui.inverted.red.button:active,.ui.inverted.red.button:focus,.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button.active,.ui.inverted.red.buttons .button:active,.ui.inverted.red.buttons .button:focus,.ui.inverted.red.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.red.button:hover,.ui.inverted.red.buttons .button:hover{background-color:#ff5144}.ui.inverted.red.button:focus,.ui.inverted.red.buttons .button:focus{background-color:#ff4335}.ui.inverted.red.active.button,.ui.inverted.red.buttons .active.button{background-color:#ff5144}.ui.inverted.red.button:active,.ui.inverted.red.buttons .button:active{background-color:#ff392b}.ui.inverted.red.basic.button,.ui.inverted.red.basic.buttons .button,.ui.inverted.red.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.red.basic.button:hover,.ui.inverted.red.basic.buttons .button:hover,.ui.inverted.red.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ff5144 inset!important;box-shadow:0 0 0 2px #ff5144 inset!important;color:#ff695e!important}.ui.inverted.red.basic.button:focus,.ui.inverted.red.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #ff4335 inset!important;box-shadow:0 0 0 2px #ff4335 inset!important;color:#ff695e!important}.ui.inverted.red.basic.active.button,.ui.inverted.red.basic.buttons .active.button,.ui.inverted.red.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ff5144 inset!important;box-shadow:0 0 0 2px #ff5144 inset!important;color:#ff695e!important}.ui.inverted.red.basic.button:active,.ui.inverted.red.basic.buttons .button:active,.ui.inverted.red.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ff392b inset!important;box-shadow:0 0 0 2px #ff392b inset!important;color:#ff695e!important}.ui.teal.button,.ui.teal.buttons .button{background-color:#00b5ad;color:#fff;text-shadow:none;background-image:none}.ui.teal.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.teal.button:hover,.ui.teal.buttons .button:hover{background-color:#009c95;color:#fff;text-shadow:none}.ui.teal.button:focus,.ui.teal.buttons .button:focus{background-color:#008c86;color:#fff;text-shadow:none}.ui.teal.button:active,.ui.teal.buttons .button:active{background-color:#00827c;color:#fff;text-shadow:none}.ui.teal.active.button,.ui.teal.button .active.button:active,.ui.teal.buttons .active.button,.ui.teal.buttons .active.button:active{background-color:#009c95;color:#fff;text-shadow:none}.ui.basic.teal.button,.ui.basic.teal.buttons .button{-webkit-box-shadow:0 0 0 1px #00b5ad inset!important;box-shadow:0 0 0 1px #00b5ad inset!important;color:#00b5ad!important}.ui.basic.teal.button:hover,.ui.basic.teal.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #009c95 inset!important;box-shadow:0 0 0 1px #009c95 inset!important;color:#009c95!important}.ui.basic.teal.button:focus,.ui.basic.teal.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #008c86 inset!important;box-shadow:0 0 0 1px #008c86 inset!important;color:#009c95!important}.ui.basic.teal.active.button,.ui.basic.teal.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #009c95 inset!important;box-shadow:0 0 0 1px #009c95 inset!important;color:#00827c!important}.ui.basic.teal.button:active,.ui.basic.teal.buttons .button:active{-webkit-box-shadow:0 0 0 1px #00827c inset!important;box-shadow:0 0 0 1px #00827c inset!important;color:#00827c!important}.ui.buttons:not(.vertical)>.basic.teal.button:not(:first-child){margin-left:-1px}.ui.inverted.teal.button,.ui.inverted.teal.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #6dffff inset!important;box-shadow:0 0 0 2px #6dffff inset!important;color:#6dffff}.ui.inverted.teal.button.active,.ui.inverted.teal.button:active,.ui.inverted.teal.button:focus,.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button.active,.ui.inverted.teal.buttons .button:active,.ui.inverted.teal.buttons .button:focus,.ui.inverted.teal.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.teal.button:hover,.ui.inverted.teal.buttons .button:hover{background-color:#54ffff}.ui.inverted.teal.button:focus,.ui.inverted.teal.buttons .button:focus{background-color:#4ff}.ui.inverted.teal.active.button,.ui.inverted.teal.buttons .active.button{background-color:#54ffff}.ui.inverted.teal.button:active,.ui.inverted.teal.buttons .button:active{background-color:#3affff}.ui.inverted.teal.basic.button,.ui.inverted.teal.basic.buttons .button,.ui.inverted.teal.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.teal.basic.button:hover,.ui.inverted.teal.basic.buttons .button:hover,.ui.inverted.teal.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #54ffff inset!important;box-shadow:0 0 0 2px #54ffff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.button:focus,.ui.inverted.teal.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #4ff inset!important;box-shadow:0 0 0 2px #4ff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.active.button,.ui.inverted.teal.basic.buttons .active.button,.ui.inverted.teal.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #54ffff inset!important;box-shadow:0 0 0 2px #54ffff inset!important;color:#6dffff!important}.ui.inverted.teal.basic.button:active,.ui.inverted.teal.basic.buttons .button:active,.ui.inverted.teal.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #3affff inset!important;box-shadow:0 0 0 2px #3affff inset!important;color:#6dffff!important}.ui.olive.button,.ui.olive.buttons .button{background-color:#b5cc18;color:#fff;text-shadow:none;background-image:none}.ui.olive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.olive.button:hover,.ui.olive.buttons .button:hover{background-color:#a7bd0d;color:#fff;text-shadow:none}.ui.olive.button:focus,.ui.olive.buttons .button:focus{background-color:#a0b605;color:#fff;text-shadow:none}.ui.olive.button:active,.ui.olive.buttons .button:active{background-color:#8d9e13;color:#fff;text-shadow:none}.ui.olive.active.button,.ui.olive.button .active.button:active,.ui.olive.buttons .active.button,.ui.olive.buttons .active.button:active{background-color:#aac109;color:#fff;text-shadow:none}.ui.basic.olive.button,.ui.basic.olive.buttons .button{-webkit-box-shadow:0 0 0 1px #b5cc18 inset!important;box-shadow:0 0 0 1px #b5cc18 inset!important;color:#b5cc18!important}.ui.basic.olive.button:hover,.ui.basic.olive.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #a7bd0d inset!important;box-shadow:0 0 0 1px #a7bd0d inset!important;color:#a7bd0d!important}.ui.basic.olive.button:focus,.ui.basic.olive.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #a0b605 inset!important;box-shadow:0 0 0 1px #a0b605 inset!important;color:#a7bd0d!important}.ui.basic.olive.active.button,.ui.basic.olive.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #aac109 inset!important;box-shadow:0 0 0 1px #aac109 inset!important;color:#8d9e13!important}.ui.basic.olive.button:active,.ui.basic.olive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #8d9e13 inset!important;box-shadow:0 0 0 1px #8d9e13 inset!important;color:#8d9e13!important}.ui.buttons:not(.vertical)>.basic.olive.button:not(:first-child){margin-left:-1px}.ui.inverted.olive.button,.ui.inverted.olive.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #d9e778 inset!important;box-shadow:0 0 0 2px #d9e778 inset!important;color:#d9e778}.ui.inverted.olive.button.active,.ui.inverted.olive.button:active,.ui.inverted.olive.button:focus,.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button.active,.ui.inverted.olive.buttons .button:active,.ui.inverted.olive.buttons .button:focus,.ui.inverted.olive.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.olive.button:hover,.ui.inverted.olive.buttons .button:hover{background-color:#d8ea5c}.ui.inverted.olive.button:focus,.ui.inverted.olive.buttons .button:focus{background-color:#daef47}.ui.inverted.olive.active.button,.ui.inverted.olive.buttons .active.button{background-color:#daed59}.ui.inverted.olive.button:active,.ui.inverted.olive.buttons .button:active{background-color:#cddf4d}.ui.inverted.olive.basic.button,.ui.inverted.olive.basic.buttons .button,.ui.inverted.olive.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.olive.basic.button:hover,.ui.inverted.olive.basic.buttons .button:hover,.ui.inverted.olive.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #d8ea5c inset!important;box-shadow:0 0 0 2px #d8ea5c inset!important;color:#d9e778!important}.ui.inverted.olive.basic.button:focus,.ui.inverted.olive.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #daef47 inset!important;box-shadow:0 0 0 2px #daef47 inset!important;color:#d9e778!important}.ui.inverted.olive.basic.active.button,.ui.inverted.olive.basic.buttons .active.button,.ui.inverted.olive.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #daed59 inset!important;box-shadow:0 0 0 2px #daed59 inset!important;color:#d9e778!important}.ui.inverted.olive.basic.button:active,.ui.inverted.olive.basic.buttons .button:active,.ui.inverted.olive.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #cddf4d inset!important;box-shadow:0 0 0 2px #cddf4d inset!important;color:#d9e778!important}.ui.yellow.button,.ui.yellow.buttons .button{background-color:#fbbd08;color:#fff;text-shadow:none;background-image:none}.ui.yellow.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.yellow.button:hover,.ui.yellow.buttons .button:hover{background-color:#eaae00;color:#fff;text-shadow:none}.ui.yellow.button:focus,.ui.yellow.buttons .button:focus{background-color:#daa300;color:#fff;text-shadow:none}.ui.yellow.button:active,.ui.yellow.buttons .button:active{background-color:#cd9903;color:#fff;text-shadow:none}.ui.yellow.active.button,.ui.yellow.button .active.button:active,.ui.yellow.buttons .active.button,.ui.yellow.buttons .active.button:active{background-color:#eaae00;color:#fff;text-shadow:none}.ui.basic.yellow.button,.ui.basic.yellow.buttons .button{-webkit-box-shadow:0 0 0 1px #fbbd08 inset!important;box-shadow:0 0 0 1px #fbbd08 inset!important;color:#fbbd08!important}.ui.basic.yellow.button:hover,.ui.basic.yellow.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #eaae00 inset!important;box-shadow:0 0 0 1px #eaae00 inset!important;color:#eaae00!important}.ui.basic.yellow.button:focus,.ui.basic.yellow.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #daa300 inset!important;box-shadow:0 0 0 1px #daa300 inset!important;color:#eaae00!important}.ui.basic.yellow.active.button,.ui.basic.yellow.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #eaae00 inset!important;box-shadow:0 0 0 1px #eaae00 inset!important;color:#cd9903!important}.ui.basic.yellow.button:active,.ui.basic.yellow.buttons .button:active{-webkit-box-shadow:0 0 0 1px #cd9903 inset!important;box-shadow:0 0 0 1px #cd9903 inset!important;color:#cd9903!important}.ui.buttons:not(.vertical)>.basic.yellow.button:not(:first-child){margin-left:-1px}.ui.inverted.yellow.button,.ui.inverted.yellow.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #ffe21f inset!important;box-shadow:0 0 0 2px #ffe21f inset!important;color:#ffe21f}.ui.inverted.yellow.button.active,.ui.inverted.yellow.button:active,.ui.inverted.yellow.button:focus,.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button.active,.ui.inverted.yellow.buttons .button:active,.ui.inverted.yellow.buttons .button:focus,.ui.inverted.yellow.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:rgba(0,0,0,.6)}.ui.inverted.yellow.button:hover,.ui.inverted.yellow.buttons .button:hover{background-color:#ffdf05}.ui.inverted.yellow.button:focus,.ui.inverted.yellow.buttons .button:focus{background-color:#f5d500}.ui.inverted.yellow.active.button,.ui.inverted.yellow.buttons .active.button{background-color:#ffdf05}.ui.inverted.yellow.button:active,.ui.inverted.yellow.buttons .button:active{background-color:#ebcd00}.ui.inverted.yellow.basic.button,.ui.inverted.yellow.basic.buttons .button,.ui.inverted.yellow.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.yellow.basic.button:hover,.ui.inverted.yellow.basic.buttons .button:hover,.ui.inverted.yellow.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #ffdf05 inset!important;box-shadow:0 0 0 2px #ffdf05 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.button:focus,.ui.inverted.yellow.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #f5d500 inset!important;box-shadow:0 0 0 2px #f5d500 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.active.button,.ui.inverted.yellow.basic.buttons .active.button,.ui.inverted.yellow.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #ffdf05 inset!important;box-shadow:0 0 0 2px #ffdf05 inset!important;color:#ffe21f!important}.ui.inverted.yellow.basic.button:active,.ui.inverted.yellow.basic.buttons .button:active,.ui.inverted.yellow.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #ebcd00 inset!important;box-shadow:0 0 0 2px #ebcd00 inset!important;color:#ffe21f!important}.ui.primary.button,.ui.primary.buttons .button{background-color:#2185d0;color:#fff;text-shadow:none;background-image:none}.ui.primary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.primary.button:hover,.ui.primary.buttons .button:hover{background-color:#1678c2;color:#fff;text-shadow:none}.ui.primary.button:focus,.ui.primary.buttons .button:focus{background-color:#0d71bb;color:#fff;text-shadow:none}.ui.primary.button:active,.ui.primary.buttons .button:active{background-color:#1a69a4;color:#fff;text-shadow:none}.ui.primary.active.button,.ui.primary.button .active.button:active,.ui.primary.buttons .active.button,.ui.primary.buttons .active.button:active{background-color:#1279c6;color:#fff;text-shadow:none}.ui.basic.primary.button,.ui.basic.primary.buttons .button{-webkit-box-shadow:0 0 0 1px #2185d0 inset!important;box-shadow:0 0 0 1px #2185d0 inset!important;color:#2185d0!important}.ui.basic.primary.button:hover,.ui.basic.primary.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1678c2 inset!important;box-shadow:0 0 0 1px #1678c2 inset!important;color:#1678c2!important}.ui.basic.primary.button:focus,.ui.basic.primary.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0d71bb inset!important;box-shadow:0 0 0 1px #0d71bb inset!important;color:#1678c2!important}.ui.basic.primary.active.button,.ui.basic.primary.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #1279c6 inset!important;box-shadow:0 0 0 1px #1279c6 inset!important;color:#1a69a4!important}.ui.basic.primary.button:active,.ui.basic.primary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #1a69a4 inset!important;box-shadow:0 0 0 1px #1a69a4 inset!important;color:#1a69a4!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.inverted.primary.button,.ui.inverted.primary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #54c8ff inset!important;box-shadow:0 0 0 2px #54c8ff inset!important;color:#54c8ff}.ui.inverted.primary.button.active,.ui.inverted.primary.button:active,.ui.inverted.primary.button:focus,.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button.active,.ui.inverted.primary.buttons .button:active,.ui.inverted.primary.buttons .button:focus,.ui.inverted.primary.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.primary.button:hover,.ui.inverted.primary.buttons .button:hover{background-color:#3ac0ff}.ui.inverted.primary.button:focus,.ui.inverted.primary.buttons .button:focus{background-color:#2bbbff}.ui.inverted.primary.active.button,.ui.inverted.primary.buttons .active.button{background-color:#3ac0ff}.ui.inverted.primary.button:active,.ui.inverted.primary.buttons .button:active{background-color:#21b8ff}.ui.inverted.primary.basic.button,.ui.inverted.primary.basic.buttons .button,.ui.inverted.primary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.primary.basic.button:hover,.ui.inverted.primary.basic.buttons .button:hover,.ui.inverted.primary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.button:focus,.ui.inverted.primary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #2bbbff inset!important;box-shadow:0 0 0 2px #2bbbff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.active.button,.ui.inverted.primary.basic.buttons .active.button,.ui.inverted.primary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #3ac0ff inset!important;box-shadow:0 0 0 2px #3ac0ff inset!important;color:#54c8ff!important}.ui.inverted.primary.basic.button:active,.ui.inverted.primary.basic.buttons .button:active,.ui.inverted.primary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #21b8ff inset!important;box-shadow:0 0 0 2px #21b8ff inset!important;color:#54c8ff!important}.ui.secondary.button,.ui.secondary.buttons .button{background-color:#1b1c1d;color:#fff;text-shadow:none;background-image:none}.ui.secondary.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.secondary.button:hover,.ui.secondary.buttons .button:hover{background-color:#27292a;color:#fff;text-shadow:none}.ui.secondary.button:focus,.ui.secondary.buttons .button:focus{background-color:#2e3032;color:#fff;text-shadow:none}.ui.secondary.button:active,.ui.secondary.buttons .button:active{background-color:#343637;color:#fff;text-shadow:none}.ui.secondary.active.button,.ui.secondary.button .active.button:active,.ui.secondary.buttons .active.button,.ui.secondary.buttons .active.button:active{background-color:#27292a;color:#fff;text-shadow:none}.ui.basic.secondary.button,.ui.basic.secondary.buttons .button{-webkit-box-shadow:0 0 0 1px #1b1c1d inset!important;box-shadow:0 0 0 1px #1b1c1d inset!important;color:#1b1c1d!important}.ui.basic.secondary.button:hover,.ui.basic.secondary.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#27292a!important}.ui.basic.secondary.button:focus,.ui.basic.secondary.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #2e3032 inset!important;box-shadow:0 0 0 1px #2e3032 inset!important;color:#27292a!important}.ui.basic.secondary.active.button,.ui.basic.secondary.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #27292a inset!important;box-shadow:0 0 0 1px #27292a inset!important;color:#343637!important}.ui.basic.secondary.button:active,.ui.basic.secondary.buttons .button:active{-webkit-box-shadow:0 0 0 1px #343637 inset!important;box-shadow:0 0 0 1px #343637 inset!important;color:#343637!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.inverted.secondary.button,.ui.inverted.secondary.buttons .button{background-color:transparent;-webkit-box-shadow:0 0 0 2px #545454 inset!important;box-shadow:0 0 0 2px #545454 inset!important;color:#545454}.ui.inverted.secondary.button.active,.ui.inverted.secondary.button:active,.ui.inverted.secondary.button:focus,.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button.active,.ui.inverted.secondary.buttons .button:active,.ui.inverted.secondary.buttons .button:focus,.ui.inverted.secondary.buttons .button:hover{-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.inverted.secondary.button:hover,.ui.inverted.secondary.buttons .button:hover{background-color:#616161}.ui.inverted.secondary.button:focus,.ui.inverted.secondary.buttons .button:focus{background-color:#686868}.ui.inverted.secondary.active.button,.ui.inverted.secondary.buttons .active.button{background-color:#616161}.ui.inverted.secondary.button:active,.ui.inverted.secondary.buttons .button:active{background-color:#6e6e6e}.ui.inverted.secondary.basic.button,.ui.inverted.secondary.basic.buttons .button,.ui.inverted.secondary.buttons .basic.button{background-color:transparent;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;box-shadow:0 0 0 2px rgba(255,255,255,.5) inset!important;color:#fff!important}.ui.inverted.secondary.basic.button:hover,.ui.inverted.secondary.basic.buttons .button:hover,.ui.inverted.secondary.buttons .basic.button:hover{-webkit-box-shadow:0 0 0 2px #616161 inset!important;box-shadow:0 0 0 2px #616161 inset!important;color:#545454!important}.ui.inverted.secondary.basic.button:focus,.ui.inverted.secondary.basic.buttons .button:focus{-webkit-box-shadow:0 0 0 2px #686868 inset!important;box-shadow:0 0 0 2px #686868 inset!important;color:#545454!important}.ui.inverted.secondary.basic.active.button,.ui.inverted.secondary.basic.buttons .active.button,.ui.inverted.secondary.buttons .basic.active.button{-webkit-box-shadow:0 0 0 2px #616161 inset!important;box-shadow:0 0 0 2px #616161 inset!important;color:#545454!important}.ui.inverted.secondary.basic.button:active,.ui.inverted.secondary.basic.buttons .button:active,.ui.inverted.secondary.buttons .basic.button:active{-webkit-box-shadow:0 0 0 2px #6e6e6e inset!important;box-shadow:0 0 0 2px #6e6e6e inset!important;color:#545454!important}.ui.positive.button,.ui.positive.buttons .button{background-color:#21ba45;color:#fff;text-shadow:none;background-image:none}.ui.positive.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.positive.button:hover,.ui.positive.buttons .button:hover{background-color:#16ab39;color:#fff;text-shadow:none}.ui.positive.button:focus,.ui.positive.buttons .button:focus{background-color:#0ea432;color:#fff;text-shadow:none}.ui.positive.button:active,.ui.positive.buttons .button:active{background-color:#198f35;color:#fff;text-shadow:none}.ui.positive.active.button,.ui.positive.button .active.button:active,.ui.positive.buttons .active.button,.ui.positive.buttons .active.button:active{background-color:#13ae38;color:#fff;text-shadow:none}.ui.basic.positive.button,.ui.basic.positive.buttons .button{-webkit-box-shadow:0 0 0 1px #21ba45 inset!important;box-shadow:0 0 0 1px #21ba45 inset!important;color:#21ba45!important}.ui.basic.positive.button:hover,.ui.basic.positive.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #16ab39 inset!important;box-shadow:0 0 0 1px #16ab39 inset!important;color:#16ab39!important}.ui.basic.positive.button:focus,.ui.basic.positive.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #0ea432 inset!important;box-shadow:0 0 0 1px #0ea432 inset!important;color:#16ab39!important}.ui.basic.positive.active.button,.ui.basic.positive.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #13ae38 inset!important;box-shadow:0 0 0 1px #13ae38 inset!important;color:#198f35!important}.ui.basic.positive.button:active,.ui.basic.positive.buttons .button:active{-webkit-box-shadow:0 0 0 1px #198f35 inset!important;box-shadow:0 0 0 1px #198f35 inset!important;color:#198f35!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.negative.button,.ui.negative.buttons .button{background-color:#db2828;color:#fff;text-shadow:none;background-image:none}.ui.negative.button{-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 0 rgba(34,36,38,.15) inset}.ui.negative.button:hover,.ui.negative.buttons .button:hover{background-color:#d01919;color:#fff;text-shadow:none}.ui.negative.button:focus,.ui.negative.buttons .button:focus{background-color:#ca1010;color:#fff;text-shadow:none}.ui.negative.button:active,.ui.negative.buttons .button:active{background-color:#b21e1e;color:#fff;text-shadow:none}.ui.negative.active.button,.ui.negative.button .active.button:active,.ui.negative.buttons .active.button,.ui.negative.buttons .active.button:active{background-color:#d41515;color:#fff;text-shadow:none}.ui.basic.negative.button,.ui.basic.negative.buttons .button{-webkit-box-shadow:0 0 0 1px #db2828 inset!important;box-shadow:0 0 0 1px #db2828 inset!important;color:#db2828!important}.ui.basic.negative.button:hover,.ui.basic.negative.buttons .button:hover{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d01919 inset!important;box-shadow:0 0 0 1px #d01919 inset!important;color:#d01919!important}.ui.basic.negative.button:focus,.ui.basic.negative.buttons .button:focus{background:0 0!important;-webkit-box-shadow:0 0 0 1px #ca1010 inset!important;box-shadow:0 0 0 1px #ca1010 inset!important;color:#d01919!important}.ui.basic.negative.active.button,.ui.basic.negative.buttons .active.button{background:0 0!important;-webkit-box-shadow:0 0 0 1px #d41515 inset!important;box-shadow:0 0 0 1px #d41515 inset!important;color:#b21e1e!important}.ui.basic.negative.button:active,.ui.basic.negative.buttons .button:active{-webkit-box-shadow:0 0 0 1px #b21e1e inset!important;box-shadow:0 0 0 1px #b21e1e inset!important;color:#b21e1e!important}.ui.buttons:not(.vertical)>.basic.primary.button:not(:first-child){margin-left:-1px}.ui.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:0;vertical-align:baseline;margin:0 .25em 0 0}.ui.buttons:not(.basic):not(.inverted){-webkit-box-shadow:none;box-shadow:none}.ui.buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.buttons .button{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;margin:0;border-radius:0;margin:0}.ui.buttons:not(.basic):not(.inverted)>.button,.ui.buttons>.ui.button:not(.basic):not(.inverted){-webkit-box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset}.ui.buttons .button:first-child{border-left:none;margin-left:0;border-top-left-radius:.28571429rem;border-bottom-left-radius:.28571429rem}.ui.buttons .button:last-child{border-top-right-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.vertical.buttons{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.vertical.buttons .button{display:block;float:none;width:100%;margin:0;-webkit-box-shadow:none;box-shadow:none;border-radius:0}.ui.vertical.buttons .button:first-child{border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.vertical.buttons .button:last-child{margin-bottom:0;border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.vertical.buttons .button:only-child{border-radius:.28571429rem} \ No newline at end of file diff --git a/semantic/components/card.css b/semantic/components/card.css new file mode 100644 index 0000000..da7add2 --- /dev/null +++ b/semantic/components/card.css @@ -0,0 +1,997 @@ +/*! + * # Semantic UI 2.4.1 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Card +---------------*/ + +.ui.cards > .card, +.ui.card { + max-width: 100%; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 290px; + min-height: 0px; + background: #FFFFFF; + padding: 0em; + border: none; + border-radius: 0.28571429rem; + -webkit-box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; + box-shadow: 0px 1px 3px 0px #D4D4D5, 0px 0px 0px 1px #D4D4D5; + -webkit-transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease; + transition: box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease; + z-index: ''; +} +.ui.card { + margin: 1em 0em; +} +.ui.cards > .card a, +.ui.card a { + cursor: pointer; +} +.ui.card:first-child { + margin-top: 0em; +} +.ui.card:last-child { + margin-bottom: 0em; +} + +/*-------------- + Cards +---------------*/ + +.ui.cards { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: -0.875em -0.5em; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ui.cards > .card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0.875em 0.5em; + float: none; +} + +/* Clearing */ +.ui.cards:after, +.ui.card:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +/* Consecutive Card Groups Preserve Row Spacing */ +.ui.cards ~ .ui.cards { + margin-top: 0.875em; +} + +/*-------------- + Rounded Edges +---------------*/ + +.ui.cards > .card > :first-child, +.ui.card > :first-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; + border-top: none !important; +} +.ui.cards > .card > :last-child, +.ui.card > :last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; +} +.ui.cards > .card > :only-child, +.ui.card > :only-child { + border-radius: 0.28571429rem !important; +} + +/*-------------- + Images +---------------*/ + +.ui.cards > .card > .image, +.ui.card > .image { + position: relative; + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding: 0em; + background: rgba(0, 0, 0, 0.05); +} +.ui.cards > .card > .image > img, +.ui.card > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: inherit; +} +.ui.cards > .card > .image:not(.ui) > img, +.ui.card > .image:not(.ui) > img { + border: none; +} + +/*-------------- + Content +---------------*/ + +.ui.cards > .card > .content, +.ui.card > .content { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border: none; + border-top: 1px solid rgba(34, 36, 38, 0.1); + background: none; + margin: 0em; + padding: 1em 1em; + -webkit-box-shadow: none; + box-shadow: none; + font-size: 1em; + border-radius: 0em; +} +.ui.cards > .card > .content:after, +.ui.card > .content:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + display: block; + margin: ''; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: rgba(0, 0, 0, 0.85); +} + +/* Default Header Size */ +.ui.cards > .card > .content > .header:not(.ui), +.ui.card > .content > .header:not(.ui) { + font-weight: bold; + font-size: 1.28571429em; + margin-top: -0.21425em; + line-height: 1.28571429em; +} +.ui.cards > .card > .content > .meta + .description, +.ui.cards > .card > .content > .header + .description, +.ui.card > .content > .meta + .description, +.ui.card > .content > .header + .description { + margin-top: 0.5em; +} + +/*---------------- + Floated Content +-----------------*/ + +.ui.cards > .card [class*="left floated"], +.ui.card [class*="left floated"] { + float: left; +} +.ui.cards > .card [class*="right floated"], +.ui.card [class*="right floated"] { + float: right; +} + +/*-------------- + Aligned +---------------*/ + +.ui.cards > .card [class*="left aligned"], +.ui.card [class*="left aligned"] { + text-align: left; +} +.ui.cards > .card [class*="center aligned"], +.ui.card [class*="center aligned"] { + text-align: center; +} +.ui.cards > .card [class*="right aligned"], +.ui.card [class*="right aligned"] { + text-align: right; +} + +/*-------------- + Content Image +---------------*/ + +.ui.cards > .card .content img, +.ui.card .content img { + display: inline-block; + vertical-align: middle; + width: ''; +} +.ui.cards > .card img.avatar, +.ui.cards > .card .avatar img, +.ui.card img.avatar, +.ui.card .avatar img { + width: 2em; + height: 2em; + border-radius: 500rem; +} + +/*-------------- + Description +---------------*/ + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + clear: both; + color: rgba(0, 0, 0, 0.68); +} + +/*-------------- + Paragraph +---------------*/ + +.ui.cards > .card > .content p, +.ui.card > .content p { + margin: 0em 0em 0.5em; +} +.ui.cards > .card > .content p:last-child, +.ui.card > .content p:last-child { + margin-bottom: 0em; +} + +/*-------------- + Meta +---------------*/ + +.ui.cards > .card .meta, +.ui.card .meta { + font-size: 1em; + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card .meta *, +.ui.card .meta * { + margin-right: 0.3em; +} +.ui.cards > .card .meta :last-child, +.ui.card .meta :last-child { + margin-right: 0em; +} +.ui.cards > .card .meta [class*="right floated"], +.ui.card .meta [class*="right floated"] { + margin-right: 0em; + margin-left: 0.3em; +} + +/*-------------- + Links +---------------*/ + + +/* Generic */ +.ui.cards > .card > .content a:not(.ui), +.ui.card > .content a:not(.ui) { + color: ''; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content a:not(.ui):hover, +.ui.card > .content a:not(.ui):hover { + color: ''; +} + +/* Header */ +.ui.cards > .card > .content > a.header, +.ui.card > .content > a.header { + color: rgba(0, 0, 0, 0.85); +} +.ui.cards > .card > .content > a.header:hover, +.ui.card > .content > a.header:hover { + color: #1e70bf; +} + +/* Meta */ +.ui.cards > .card .meta > a:not(.ui), +.ui.card .meta > a:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card .meta > a:not(.ui):hover, +.ui.card .meta > a:not(.ui):hover { + color: rgba(0, 0, 0, 0.87); +} + +/*-------------- + Buttons +---------------*/ + +.ui.cards > .card > .buttons, +.ui.card > .buttons, +.ui.cards > .card > .button, +.ui.card > .button { + margin: 0px -1px; + width: calc(100% + 2px ); +} + +/*-------------- + Dimmer +---------------*/ + +.ui.cards > .card .dimmer, +.ui.card .dimmer { + background-color: ''; + z-index: 10; +} + +/*-------------- + Labels +---------------*/ + + +/*-----Star----- */ + + +/* Icon */ +.ui.cards > .card > .content .star.icon, +.ui.card > .content .star.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content .star.icon:hover, +.ui.card > .content .star.icon:hover { + opacity: 1; + color: #FFB70A; +} +.ui.cards > .card > .content .active.star.icon, +.ui.card > .content .active.star.icon { + color: #FFE623; +} + +/*-----Like----- */ + + +/* Icon */ +.ui.cards > .card > .content .like.icon, +.ui.card > .content .like.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .content .like.icon:hover, +.ui.card > .content .like.icon:hover { + opacity: 1; + color: #FF2733; +} +.ui.cards > .card > .content .active.like.icon, +.ui.card > .content .active.like.icon { + color: #FF2733; +} + +/*---------------- + Extra Content +-----------------*/ + +.ui.cards > .card > .extra, +.ui.card > .extra { + max-width: 100%; + min-height: 0em !important; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + border-top: 1px solid rgba(0, 0, 0, 0.05) !important; + position: static; + background: none; + width: auto; + margin: 0em 0em; + padding: 0.75em 1em; + top: 0em; + left: 0em; + color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: #1e70bf; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Raised +--------------------*/ + +.ui.raised.cards > .card, +.ui.raised.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} +.ui.raised.cards a.card:hover, +.ui.link.cards .raised.card:hover, +a.ui.raised.card:hover, +.ui.link.raised.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.15), 0px 2px 10px 0px rgba(34, 36, 38, 0.25); +} +.ui.raised.cards > .card, +.ui.raised.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} + +/*------------------- + Centered +--------------------*/ + +.ui.centered.cards { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ui.centered.card { + margin-left: auto; + margin-right: auto; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.card { + width: 100%; + max-width: 9999px; +} + +/*------------------- + Link +--------------------*/ + +.ui.cards a.card, +.ui.link.cards .card, +a.ui.card, +.ui.link.card { + -webkit-transform: none; + transform: none; +} +.ui.cards a.card:hover, +.ui.link.cards .card:hover, +a.ui.card:hover, +.ui.link.card:hover { + cursor: pointer; + z-index: 5; + background: #FFFFFF; + border: none; + -webkit-box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; + box-shadow: 0px 1px 3px 0px #BCBDBD, 0px 0px 0px 1px #D4D4D5; + -webkit-transform: translateY(-3px); + transform: translateY(-3px); +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +.ui.red.cards > .card, +.ui.cards > .red.card, +.ui.red.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #DB2828, 0px 1px 3px 0px #D4D4D5; +} +.ui.red.cards > .card:hover, +.ui.cards > .red.card:hover, +.ui.red.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #d01919, 0px 1px 3px 0px #BCBDBD; +} + +/* Orange */ +.ui.orange.cards > .card, +.ui.cards > .orange.card, +.ui.orange.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #F2711C, 0px 1px 3px 0px #D4D4D5; +} +.ui.orange.cards > .card:hover, +.ui.cards > .orange.card:hover, +.ui.orange.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #f26202, 0px 1px 3px 0px #BCBDBD; +} + +/* Yellow */ +.ui.yellow.cards > .card, +.ui.cards > .yellow.card, +.ui.yellow.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #FBBD08, 0px 1px 3px 0px #D4D4D5; +} +.ui.yellow.cards > .card:hover, +.ui.cards > .yellow.card:hover, +.ui.yellow.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #eaae00, 0px 1px 3px 0px #BCBDBD; +} + +/* Olive */ +.ui.olive.cards > .card, +.ui.cards > .olive.card, +.ui.olive.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #B5CC18, 0px 1px 3px 0px #D4D4D5; +} +.ui.olive.cards > .card:hover, +.ui.cards > .olive.card:hover, +.ui.olive.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #a7bd0d, 0px 1px 3px 0px #BCBDBD; +} + +/* Green */ +.ui.green.cards > .card, +.ui.cards > .green.card, +.ui.green.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #21BA45, 0px 1px 3px 0px #D4D4D5; +} +.ui.green.cards > .card:hover, +.ui.cards > .green.card:hover, +.ui.green.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #16ab39, 0px 1px 3px 0px #BCBDBD; +} + +/* Teal */ +.ui.teal.cards > .card, +.ui.cards > .teal.card, +.ui.teal.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #00B5AD, 0px 1px 3px 0px #D4D4D5; +} +.ui.teal.cards > .card:hover, +.ui.cards > .teal.card:hover, +.ui.teal.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #009c95, 0px 1px 3px 0px #BCBDBD; +} + +/* Blue */ +.ui.blue.cards > .card, +.ui.cards > .blue.card, +.ui.blue.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #2185D0, 0px 1px 3px 0px #D4D4D5; +} +.ui.blue.cards > .card:hover, +.ui.cards > .blue.card:hover, +.ui.blue.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1678c2, 0px 1px 3px 0px #BCBDBD; +} + +/* Violet */ +.ui.violet.cards > .card, +.ui.cards > .violet.card, +.ui.violet.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #6435C9, 0px 1px 3px 0px #D4D4D5; +} +.ui.violet.cards > .card:hover, +.ui.cards > .violet.card:hover, +.ui.violet.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #5829bb, 0px 1px 3px 0px #BCBDBD; +} + +/* Purple */ +.ui.purple.cards > .card, +.ui.cards > .purple.card, +.ui.purple.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A333C8, 0px 1px 3px 0px #D4D4D5; +} +.ui.purple.cards > .card:hover, +.ui.cards > .purple.card:hover, +.ui.purple.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #9627ba, 0px 1px 3px 0px #BCBDBD; +} + +/* Pink */ +.ui.pink.cards > .card, +.ui.cards > .pink.card, +.ui.pink.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #E03997, 0px 1px 3px 0px #D4D4D5; +} +.ui.pink.cards > .card:hover, +.ui.cards > .pink.card:hover, +.ui.pink.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #e61a8d, 0px 1px 3px 0px #BCBDBD; +} + +/* Brown */ +.ui.brown.cards > .card, +.ui.cards > .brown.card, +.ui.brown.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #A5673F, 0px 1px 3px 0px #D4D4D5; +} +.ui.brown.cards > .card:hover, +.ui.cards > .brown.card:hover, +.ui.brown.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #975b33, 0px 1px 3px 0px #BCBDBD; +} + +/* Grey */ +.ui.grey.cards > .card, +.ui.cards > .grey.card, +.ui.grey.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #767676, 0px 1px 3px 0px #D4D4D5; +} +.ui.grey.cards > .card:hover, +.ui.cards > .grey.card:hover, +.ui.grey.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #838383, 0px 1px 3px 0px #BCBDBD; +} + +/* Black */ +.ui.black.cards > .card, +.ui.cards > .black.card, +.ui.black.card { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #1B1C1D, 0px 1px 3px 0px #D4D4D5; +} +.ui.black.cards > .card:hover, +.ui.cards > .black.card:hover, +.ui.black.card:hover { + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; + box-shadow: 0px 0px 0px 1px #D4D4D5, 0px 2px 0px 0px #27292a, 0px 1px 3px 0px #BCBDBD; +} + +/*-------------- + Card Count +---------------*/ + +.ui.one.cards { + margin-left: 0em; + margin-right: 0em; +} +.ui.one.cards > .card { + width: 100%; +} +.ui.two.cards { + margin-left: -1em; + margin-right: -1em; +} +.ui.two.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; +} +.ui.three.cards { + margin-left: -1em; + margin-right: -1em; +} +.ui.three.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; +} +.ui.four.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.four.cards > .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.five.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.five.cards > .card { + width: calc( 20% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.six.cards { + margin-left: -0.75em; + margin-right: -0.75em; +} +.ui.six.cards > .card { + width: calc( 16.66666667% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; +} +.ui.seven.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.seven.cards > .card { + width: calc( 14.28571429% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; +} +.ui.eight.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.eight.cards > .card { + width: calc( 12.5% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 11px; +} +.ui.nine.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.nine.cards > .card { + width: calc( 11.11111111% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; + font-size: 10px; +} +.ui.ten.cards { + margin-left: -0.5em; + margin-right: -0.5em; +} +.ui.ten.cards > .card { + width: calc( 10% - 1em ); + margin-left: 0.5em; + margin-right: 0.5em; +} + +/*------------------- + Doubling +--------------------*/ + + +/* Mobile Only */ +@media only screen and (max-width: 767px) { + .ui.two.doubling.cards { + margin-left: 0em; + margin-right: 0em; + } + .ui.two.doubling.cards > .card { + width: 100%; + margin-left: 0em; + margin-right: 0em; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.seven.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.seven.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.nine.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.nine.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.ten.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.ten.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } +} + +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.two.doubling.cards { + margin-left: 0em; + margin-right: 0em; + } + .ui.two.doubling.cards > .card { + width: 100%; + margin-left: 0em; + margin-right: 0em; + } + .ui.three.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.three.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.four.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.four.doubling.cards > .card { + width: calc( 50% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.five.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.five.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.six.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.six.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -1em; + margin-right: -1em; + } + .ui.eight.doubling.cards > .card { + width: calc( 33.33333333% - 2em ); + margin-left: 1em; + margin-right: 1em; + } + .ui.eight.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.eight.doubling.cards > .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.nine.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.nine.doubling.cards > .card { + width: calc( 25% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } + .ui.ten.doubling.cards { + margin-left: -0.75em; + margin-right: -0.75em; + } + .ui.ten.doubling.cards > .card { + width: calc( 20% - 1.5em ); + margin-left: 0.75em; + margin-right: 0.75em; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: 767px) { + .ui.stackable.cards { + display: block !important; + } + .ui.stackable.cards .card:first-child { + margin-top: 0em !important; + } + .ui.stackable.cards > .card { + display: block !important; + height: auto !important; + margin: 1em 1em; + padding: 0 !important; + width: calc( 100% - 2em ) !important; + } +} + +/*-------------- + Size +---------------*/ + +.ui.cards > .card { + font-size: 1em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/card.min.css b/semantic/components/card.min.css new file mode 100644 index 0000000..573b260 --- /dev/null +++ b/semantic/components/card.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.card,.ui.cards>.card{max-width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:290px;min-height:0;background:#fff;padding:0;border:none;border-radius:.28571429rem;-webkit-box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #d4d4d5,0 0 0 1px #d4d4d5;-webkit-transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:-webkit-box-shadow .1s ease,-webkit-transform .1s ease;transition:box-shadow .1s ease,transform .1s ease;transition:box-shadow .1s ease,transform .1s ease,-webkit-box-shadow .1s ease,-webkit-transform .1s ease;z-index:''}.ui.card{margin:1em 0}.ui.card a,.ui.cards>.card a{cursor:pointer}.ui.card:first-child{margin-top:0}.ui.card:last-child{margin-bottom:0}.ui.cards{display:-webkit-box;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.cards:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.28571429rem .28571429rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .28571429rem .28571429rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.28571429rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em 1em;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.28571429em;margin-top:-.21425em;line-height:1.28571429em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta :last-child,.ui.cards>.card .meta :last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0 0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.link.cards .raised.card:hover,.ui.link.raised.card:hover,.ui.raised.cards a.card:hover,a.ui.raised.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.15),0 2px 10px 0 rgba(34,36,38,.25)}.ui.raised.card,.ui.raised.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px #d4d4d5,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.centered.cards{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto}.ui.fluid.card{width:100%;max-width:9999px}.ui.cards a.card,.ui.link.card,.ui.link.cards .card,a.ui.card{-webkit-transform:none;transform:none}.ui.cards a.card:hover,.ui.link.card:hover,.ui.link.cards .card:hover,a.ui.card:hover{cursor:pointer;z-index:5;background:#fff;border:none;-webkit-box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;box-shadow:0 1px 3px 0 #bcbdbd,0 0 0 1px #d4d4d5;-webkit-transform:translateY(-3px);transform:translateY(-3px)}.ui.cards>.red.card,.ui.red.card,.ui.red.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #db2828,0 1px 3px 0 #d4d4d5}.ui.cards>.red.card:hover,.ui.red.card:hover,.ui.red.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #d01919,0 1px 3px 0 #bcbdbd}.ui.cards>.orange.card,.ui.orange.card,.ui.orange.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f2711c,0 1px 3px 0 #d4d4d5}.ui.cards>.orange.card:hover,.ui.orange.card:hover,.ui.orange.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #f26202,0 1px 3px 0 #bcbdbd}.ui.cards>.yellow.card,.ui.yellow.card,.ui.yellow.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #fbbd08,0 1px 3px 0 #d4d4d5}.ui.cards>.yellow.card:hover,.ui.yellow.card:hover,.ui.yellow.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #eaae00,0 1px 3px 0 #bcbdbd}.ui.cards>.olive.card,.ui.olive.card,.ui.olive.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #b5cc18,0 1px 3px 0 #d4d4d5}.ui.cards>.olive.card:hover,.ui.olive.card:hover,.ui.olive.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a7bd0d,0 1px 3px 0 #bcbdbd}.ui.cards>.green.card,.ui.green.card,.ui.green.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #21ba45,0 1px 3px 0 #d4d4d5}.ui.cards>.green.card:hover,.ui.green.card:hover,.ui.green.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #16ab39,0 1px 3px 0 #bcbdbd}.ui.cards>.teal.card,.ui.teal.card,.ui.teal.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #00b5ad,0 1px 3px 0 #d4d4d5}.ui.cards>.teal.card:hover,.ui.teal.card:hover,.ui.teal.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #009c95,0 1px 3px 0 #bcbdbd}.ui.blue.card,.ui.blue.cards>.card,.ui.cards>.blue.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #2185d0,0 1px 3px 0 #d4d4d5}.ui.blue.card:hover,.ui.blue.cards>.card:hover,.ui.cards>.blue.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1678c2,0 1px 3px 0 #bcbdbd}.ui.cards>.violet.card,.ui.violet.card,.ui.violet.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #6435c9,0 1px 3px 0 #d4d4d5}.ui.cards>.violet.card:hover,.ui.violet.card:hover,.ui.violet.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #5829bb,0 1px 3px 0 #bcbdbd}.ui.cards>.purple.card,.ui.purple.card,.ui.purple.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a333c8,0 1px 3px 0 #d4d4d5}.ui.cards>.purple.card:hover,.ui.purple.card:hover,.ui.purple.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #9627ba,0 1px 3px 0 #bcbdbd}.ui.cards>.pink.card,.ui.pink.card,.ui.pink.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e03997,0 1px 3px 0 #d4d4d5}.ui.cards>.pink.card:hover,.ui.pink.card:hover,.ui.pink.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #e61a8d,0 1px 3px 0 #bcbdbd}.ui.brown.card,.ui.brown.cards>.card,.ui.cards>.brown.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #a5673f,0 1px 3px 0 #d4d4d5}.ui.brown.card:hover,.ui.brown.cards>.card:hover,.ui.cards>.brown.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #975b33,0 1px 3px 0 #bcbdbd}.ui.cards>.grey.card,.ui.grey.card,.ui.grey.cards>.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #767676,0 1px 3px 0 #d4d4d5}.ui.cards>.grey.card:hover,.ui.grey.card:hover,.ui.grey.cards>.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #838383,0 1px 3px 0 #bcbdbd}.ui.black.card,.ui.black.cards>.card,.ui.cards>.black.card{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #1b1c1d,0 1px 3px 0 #d4d4d5}.ui.black.card:hover,.ui.black.cards>.card:hover,.ui.cards>.black.card:hover{-webkit-box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd;box-shadow:0 0 0 1px #d4d4d5,0 2px 0 0 #27292a,0 1px 3px 0 #bcbdbd}.ui.one.cards{margin-left:0;margin-right:0}.ui.one.cards>.card{width:100%}.ui.two.cards{margin-left:-1em;margin-right:-1em}.ui.two.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.three.cards{margin-left:-1em;margin-right:-1em}.ui.three.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.four.cards{margin-left:-.75em;margin-right:-.75em}.ui.four.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.five.cards{margin-left:-.75em;margin-right:-.75em}.ui.five.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.six.cards{margin-left:-.75em;margin-right:-.75em}.ui.six.cards>.card{width:calc(16.66666667% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.seven.cards{margin-left:-.5em;margin-right:-.5em}.ui.seven.cards>.card{width:calc(14.28571429% - 1em);margin-left:.5em;margin-right:.5em}.ui.eight.cards{margin-left:-.5em;margin-right:-.5em}.ui.eight.cards>.card{width:calc(12.5% - 1em);margin-left:.5em;margin-right:.5em;font-size:11px}.ui.nine.cards{margin-left:-.5em;margin-right:-.5em}.ui.nine.cards>.card{width:calc(11.11111111% - 1em);margin-left:.5em;margin-right:.5em;font-size:10px}.ui.ten.cards{margin-left:-.5em;margin-right:-.5em}.ui.ten.cards>.card{width:calc(10% - 1em);margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.seven.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.seven.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.nine.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.nine.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.ten.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.ten.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}}@media only screen and (min-width:768px) and (max-width:991px){.ui.two.doubling.cards{margin-left:0;margin-right:0}.ui.two.doubling.cards>.card{width:100%;margin-left:0;margin-right:0}.ui.three.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.three.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.four.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.four.doubling.cards>.card{width:calc(50% - 2em);margin-left:1em;margin-right:1em}.ui.five.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.five.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.six.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.six.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-1em;margin-right:-1em}.ui.eight.doubling.cards>.card{width:calc(33.33333333% - 2em);margin-left:1em;margin-right:1em}.ui.eight.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.eight.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.nine.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.nine.doubling.cards>.card{width:calc(25% - 1.5em);margin-left:.75em;margin-right:.75em}.ui.ten.doubling.cards{margin-left:-.75em;margin-right:-.75em}.ui.ten.doubling.cards>.card{width:calc(20% - 1.5em);margin-left:.75em;margin-right:.75em}}@media only screen and (max-width:767px){.ui.stackable.cards{display:block!important}.ui.stackable.cards .card:first-child{margin-top:0!important}.ui.stackable.cards>.card{display:block!important;height:auto!important;margin:1em 1em;padding:0!important;width:calc(100% - 2em)!important}}.ui.cards>.card{font-size:1em} \ No newline at end of file diff --git a/semantic/components/checkbox.css b/semantic/components/checkbox.css new file mode 100644 index 0000000..0746f5c --- /dev/null +++ b/semantic/components/checkbox.css @@ -0,0 +1,632 @@ +/*! + * # Semantic UI 2.4.1 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Checkbox +*******************************/ + + +/*-------------- + Content +---------------*/ + +.ui.checkbox { + position: relative; + display: inline-block; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + outline: none; + vertical-align: baseline; + font-style: normal; + min-height: 17px; + font-size: 1rem; + line-height: 17px; + min-width: 17px; +} + +/* HTML Checkbox */ +.ui.checkbox input[type="checkbox"], +.ui.checkbox input[type="radio"] { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + opacity: 0 !important; + outline: none; + z-index: 3; + width: 17px; + height: 17px; +} + +/*-------------- + Box +---------------*/ + +.ui.checkbox .box, +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + padding-left: 1.85714em; + outline: none; + font-size: 1em; +} +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0px; + left: 0px; + width: 17px; + height: 17px; + content: ''; + background: #FFFFFF; + border-radius: 0.21428571rem; + -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; + border: 1px solid #D4D4D5; +} + +/*-------------- + Checkmark +---------------*/ + +.ui.checkbox .box:after, +.ui.checkbox label:after { + position: absolute; + font-size: 14px; + top: 0px; + left: 0px; + width: 17px; + height: 17px; + text-align: center; + opacity: 0; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; +} + +/*-------------- + Label +---------------*/ + + +/* Inside */ +.ui.checkbox label, +.ui.checkbox + label { + color: rgba(0, 0, 0, 0.87); + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} + +/* Outside */ +.ui.checkbox + label { + vertical-align: middle; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: #FFFFFF; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox label:hover, +.ui.checkbox + label:hover { + color: rgba(0, 0, 0, 0.8); +} + +/*-------------- + Down +---------------*/ + +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { + background: #F9FAFB; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox .box:active::after, +.ui.checkbox label:active::after { + color: rgba(0, 0, 0, 0.95); +} +.ui.checkbox input:active ~ label { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Focus +---------------*/ + +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before { + background: #FFFFFF; + border-color: #96C8DA; +} +.ui.checkbox input:focus ~ .box:after, +.ui.checkbox input:focus ~ label:after { + color: rgba(0, 0, 0, 0.95); +} +.ui.checkbox input:focus ~ label { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active +---------------*/ + +.ui.checkbox input:checked ~ .box:before, +.ui.checkbox input:checked ~ label:before { + background: #FFFFFF; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + opacity: 1; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Indeterminate +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:before { + background: #FFFFFF; + border-color: rgba(34, 36, 38, 0.35); +} +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:after { + opacity: 1; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active Focus +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, +.ui.checkbox input:checked:focus ~ .box:before, +.ui.checkbox input:checked:focus ~ label:before { + background: #FFFFFF; + border-color: #96C8DA; +} +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, +.ui.checkbox input:checked:focus ~ .box:after, +.ui.checkbox input:checked:focus ~ label:after { + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Read-Only +---------------*/ + +.ui.read-only.checkbox, +.ui.read-only.checkbox label { + cursor: default; +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.checkbox .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ .box:after, +.ui.checkbox input[disabled] ~ label { + cursor: default !important; + opacity: 0.5; + color: #000000; +} + +/*-------------- + Hidden +---------------*/ + + +/* Initialized checkbox moves input below element + to prevent manually triggering */ +.ui.checkbox input.hidden { + z-index: -1; +} + +/* Selectable Label */ +.ui.checkbox input.hidden + label { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Radio +---------------*/ + +.ui.radio.checkbox { + min-height: 15px; +} +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + padding-left: 1.85714em; +} + +/* Box */ +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + content: ''; + -webkit-transform: none; + transform: none; + width: 15px; + height: 15px; + border-radius: 500rem; + top: 1px; + left: 0px; +} + +/* Bullet */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + content: '' !important; + width: 15px; + height: 15px; + line-height: 15px; +} + +/* Radio Checkbox */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: 1px; + left: 0px; + width: 15px; + height: 15px; + border-radius: 500rem; + -webkit-transform: scale(0.46666667); + transform: scale(0.46666667); + background-color: rgba(0, 0, 0, 0.87); +} + +/* Focus */ +.ui.radio.checkbox input:focus ~ .box:before, +.ui.radio.checkbox input:focus ~ label:before { + background-color: #FFFFFF; +} +.ui.radio.checkbox input:focus ~ .box:after, +.ui.radio.checkbox input:focus ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/* Indeterminate */ +.ui.radio.checkbox input:indeterminate ~ .box:after, +.ui.radio.checkbox input:indeterminate ~ label:after { + opacity: 0; +} + +/* Active */ +.ui.radio.checkbox input:checked ~ .box:before, +.ui.radio.checkbox input:checked ~ label:before { + background-color: #FFFFFF; +} +.ui.radio.checkbox input:checked ~ .box:after, +.ui.radio.checkbox input:checked ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/* Active Focus */ +.ui.radio.checkbox input:focus:checked ~ .box:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + background-color: #FFFFFF; +} +.ui.radio.checkbox input:focus:checked ~ .box:after, +.ui.radio.checkbox input:focus:checked ~ label:after { + background-color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Slider +---------------*/ + +.ui.slider.checkbox { + min-height: 1.25rem; +} + +/* Input */ +.ui.slider.checkbox input { + width: 3.5rem; + height: 1.25rem; +} + +/* Label */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: 4.5rem; + line-height: 1rem; + color: rgba(0, 0, 0, 0.4); +} + +/* Line */ +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + display: block; + position: absolute; + content: ''; + border: none !important; + left: 0em; + z-index: 1; + top: 0.4rem; + background-color: rgba(0, 0, 0, 0.05); + width: 3.5rem; + height: 0.21428571rem; + -webkit-transform: none; + transform: none; + border-radius: 500rem; + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; +} + +/* Handle */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05))); + background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + border: none; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + width: 1.5rem; + height: 1.5rem; + top: -0.25rem; + left: 0em; + -webkit-transform: none; + transform: none; + border-radius: 500rem; + -webkit-transition: left 0.3s ease; + transition: left 0.3s ease; +} + +/* Focus */ +.ui.slider.checkbox input:focus ~ .box:before, +.ui.slider.checkbox input:focus ~ label:before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Hover */ +.ui.slider.checkbox .box:hover, +.ui.slider.checkbox label:hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.slider.checkbox .box:hover::before, +.ui.slider.checkbox label:hover::before { + background: rgba(0, 0, 0, 0.15); +} + +/* Active */ +.ui.slider.checkbox input:checked ~ .box, +.ui.slider.checkbox input:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.slider.checkbox input:checked ~ .box:before, +.ui.slider.checkbox input:checked ~ label:before { + background-color: #545454 !important; +} +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + left: 2rem; +} + +/* Active Focus */ +.ui.slider.checkbox input:focus:checked ~ .box, +.ui.slider.checkbox input:focus:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.slider.checkbox input:focus:checked ~ .box:before, +.ui.slider.checkbox input:focus:checked ~ label:before { + background-color: #000000 !important; +} + +/*-------------- + Toggle +---------------*/ + +.ui.toggle.checkbox { + min-height: 1.5rem; +} + +/* Input */ +.ui.toggle.checkbox input { + width: 3.5rem; + height: 1.5rem; +} + +/* Label */ +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + min-height: 1.5rem; + padding-left: 4.5rem; + color: rgba(0, 0, 0, 0.87); +} +.ui.toggle.checkbox label { + padding-top: 0.15em; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + display: block; + position: absolute; + content: ''; + z-index: 1; + -webkit-transform: none; + transform: none; + border: none; + top: 0rem; + background: rgba(0, 0, 0, 0.05); + -webkit-box-shadow: none; + box-shadow: none; + width: 3.5rem; + height: 1.5rem; + border-radius: 500rem; +} + +/* Handle */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05))); + background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + border: none; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + width: 1.5rem; + height: 1.5rem; + top: 0rem; + left: 0em; + border-radius: 500rem; + -webkit-transition: background 0.3s ease, left 0.3s ease; + transition: background 0.3s ease, left 0.3s ease; +} +.ui.toggle.checkbox input ~ .box:after, +.ui.toggle.checkbox input ~ label:after { + left: -0.05rem; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} + +/* Focus */ +.ui.toggle.checkbox input:focus ~ .box:before, +.ui.toggle.checkbox input:focus ~ label:before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Hover */ +.ui.toggle.checkbox .box:hover::before, +.ui.toggle.checkbox label:hover::before { + background-color: rgba(0, 0, 0, 0.15); + border: none; +} + +/* Active */ +.ui.toggle.checkbox input:checked ~ .box, +.ui.toggle.checkbox input:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.toggle.checkbox input:checked ~ .box:before, +.ui.toggle.checkbox input:checked ~ label:before { + background-color: #2185D0 !important; +} +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: 2.15rem; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} + +/* Active Focus */ +.ui.toggle.checkbox input:focus:checked ~ .box, +.ui.toggle.checkbox input:focus:checked ~ label { + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.toggle.checkbox input:focus:checked ~ .box:before, +.ui.toggle.checkbox input:focus:checked ~ label:before { + background-color: #0d71bb !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.checkbox .box, +.ui.fitted.checkbox label { + padding-left: 0em !important; +} +.ui.fitted.toggle.checkbox, +.ui.fitted.toggle.checkbox { + width: 3.5rem; +} +.ui.fitted.slider.checkbox, +.ui.fitted.slider.checkbox { + width: 3.5rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Checkbox'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); +} + +/* Checkmark */ +.ui.checkbox label:after, +.ui.checkbox .box:after { + font-family: 'Checkbox'; +} + +/* Checked */ +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + content: '\e800'; +} + +/* Indeterminate */ +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + font-size: 12px; + content: '\e801'; +} +/* UTF Reference +.check:before { content: '\e800'; } +.dash:before { content: '\e801'; } +.plus:before { content: '\e802'; } +*/ + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/checkbox.js b/semantic/components/checkbox.js new file mode 100644 index 0000000..d97d5e3 --- /dev/null +++ b/semantic/components/checkbox.js @@ -0,0 +1,831 @@ +/*! + * # Semantic UI 2.4.1 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.checkbox = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), + + observer, + element = this, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing checkbox', settings); + + module.create.label(); + module.bind.events(); + + module.set.tabbable(); + module.hide.input(); + + module.observeChanges(); + module.instantiate(); + module.setup(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying module'); + module.unbind.events(); + module.show.input(); + $module.removeData(moduleNamespace); + }, + + fix: { + reference: function() { + if( $module.is(selector.input) ) { + module.debug('Behavior called on adjusting invoked element'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + + setup: function() { + module.set.initialLoad(); + if( module.is.indeterminate() ) { + module.debug('Initial value is indeterminate'); + module.indeterminate(); + } + else if( module.is.checked() ) { + module.debug('Initial value is checked'); + module.check(); + } + else { + module.debug('Initial value is unchecked'); + module.uncheck(); + } + module.remove.initialLoad(); + }, + + refresh: function() { + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modifying z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modifying z-index to be selectable'); + $input.removeClass(className.hidden); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + attachEvents: function(selector, event) { + var + $element = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($element.length > 0) { + module.debug('Attaching checkbox events to element', selector, event); + $element + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound); + } + }, + + event: { + click: function(event) { + var + $target = $(event.target) + ; + if( $target.is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + if( $target.is(selector.link) ) { + module.debug('Clicking link inside checkbox, skipping toggle'); + return; + } + module.toggle(); + $input.focus(); + event.preventDefault(); + }, + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + space : 32, + escape : 27 + } + ; + if(key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.blur(); + shortcutPressed = true; + } + else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } + else { + shortcutPressed = false; + } + }, + keyup: function(event) { + if(shortcutPressed) { + event.preventDefault(); + } + } + }, + + check: function() { + if( !module.should.allowCheck() ) { + return; + } + module.debug('Checking checkbox', $input); + module.set.checked(); + if( !module.should.ignoreCallbacks() ) { + settings.onChecked.call(input); + settings.onChange.call(input); + } + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + settings.onChange.call(input); + } + }, + + indeterminate: function() { + if( module.should.allowIndeterminate() ) { + module.debug('Checkbox is already indeterminate'); + return; + } + module.debug('Making checkbox indeterminate'); + module.set.indeterminate(); + if( !module.should.ignoreCallbacks() ) { + settings.onIndeterminate.call(input); + settings.onChange.call(input); + } + }, + + determinate: function() { + if( module.should.allowDeterminate() ) { + module.debug('Checkbox is already determinate'); + return; + } + module.debug('Making checkbox determinate'); + module.set.determinate(); + if( !module.should.ignoreCallbacks() ) { + settings.onDeterminate.call(input); + settings.onChange.call(input); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + settings.onEnable.call(input); + // preserve legacy callbacks + settings.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisable.call(input); + // preserve legacy callbacks + settings.onDisabled.call(input); + }, + + get: { + radios: function() { + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); + }, + otherRadios: function() { + return module.get.radios().not($module); + }, + name: function() { + return $input.attr('name'); + } + }, + + is: { + initialLoad: function() { + return initialLoad; + }, + radio: function() { + return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); + }, + indeterminate: function() { + return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); + }, + checked: function() { + return $input.prop('checked') !== undefined && $input.prop('checked'); + }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, + unchecked: function() { + return !module.is.checked(); + } + }, + + should: { + allowCheck: function() { + if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(settings.beforeChecked.apply(input) === false) { + module.debug('Should not allow check, beforeChecked cancelled'); + return false; + } + return true; + }, + allowUncheck: function() { + if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + forceCallbacks: function() { + return (module.is.initialLoad() && settings.fireOnInit); + }, + ignoreCallbacks: function() { + return (initialLoad && !settings.fireOnInit); + } + }, + + can: { + change: function() { + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); + }, + uncheck: function() { + return (typeof settings.uncheckable === 'boolean') + ? settings.uncheckable + : !module.is.radio() + ; + } + }, + + set: { + initialLoad: function() { + initialLoad = true; + }, + checked: function() { + module.verbose('Setting class to checked'); + $module + .removeClass(className.indeterminate) + .addClass(className.checked) + ; + if( module.is.radio() ) { + module.uncheckOthers(); + } + if(!module.is.indeterminate() && module.is.checked()) { + module.debug('Input is already checked, skipping input property change'); + return; + } + module.verbose('Setting state to checked', input); + $input + .prop('indeterminate', false) + .prop('checked', true) + ; + module.trigger.change(); + }, + unchecked: function() { + module.verbose('Removing checked class'); + $module + .removeClass(className.indeterminate) + .removeClass(className.checked) + ; + if(!module.is.indeterminate() && module.is.unchecked() ) { + module.debug('Input is already unchecked'); + return; + } + module.debug('Setting state to unchecked'); + $input + .prop('indeterminate', false) + .prop('checked', false) + ; + module.trigger.change(); + }, + indeterminate: function() { + module.verbose('Setting class to indeterminate'); + $module + .addClass(className.indeterminate) + ; + if( module.is.indeterminate() ) { + module.debug('Input is already indeterminate, skipping input property change'); + return; + } + module.debug('Setting state to indeterminate'); + $input + .prop('indeterminate', true) + ; + module.trigger.change(); + }, + determinate: function() { + module.verbose('Removing indeterminate class'); + $module + .removeClass(className.indeterminate) + ; + if( module.is.determinate() ) { + module.debug('Input is already determinate, skipping input property change'); + return; + } + module.debug('Setting state to determinate'); + $input + .prop('indeterminate', false) + ; + }, + disabled: function() { + module.verbose('Setting class to disabled'); + $module + .addClass(className.disabled) + ; + if( module.is.disabled() ) { + module.debug('Input is already disabled, skipping input property change'); + return; + } + module.debug('Setting state to disabled'); + $input + .prop('disabled', 'disabled') + ; + module.trigger.change(); + }, + enabled: function() { + module.verbose('Removing disabled class'); + $module.removeClass(className.disabled); + if( module.is.enabled() ) { + module.debug('Input is already enabled, skipping input property change'); + return; + } + module.debug('Setting state to enabled'); + $input + .prop('disabled', false) + ; + module.trigger.change(); + }, + tabbable: function() { + module.verbose('Adding tabindex to checkbox'); + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } + } + }, + + remove: { + initialLoad: function() { + initialLoad = false; + } + }, + + trigger: { + change: function() { + var + events = document.createEvent('HTMLEvents'), + inputElement = $input[0] + ; + if(inputElement) { + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + + create: { + label: function() { + if($input.prevAll(selector.label).length > 0) { + $input.prev(selector.label).detach().insertAfter($input); + module.debug('Moving existing label', $label); + } + else if( !module.has.label() ) { + $label = $('
').attr('class', 'ui dimmer'); + } + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/dimmer.min.css b/semantic/components/dimmer.min.css new file mode 100644 index 0000000..bd72457 --- /dev/null +++ b/semantic/components/dimmer.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0!important;left:0!important;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer{border-radius:inherit!important}.ui.dimmer:not(.inverted)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.dimmed.dimmable>.ui.animating.legacy.dimmer,.dimmed.dimmable>.ui.visible.legacy.dimmer,.ui.active.legacy.dimmer{display:block}.ui[class*="top aligned"].dimmer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ui[class*="bottom aligned"].dimmer{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ui.page.dimmer{position:fixed;-webkit-transform-style:'';transform-style:'';-webkit-perspective:2000px;perspective:2000px;-webkit-transform-origin:center center;transform-origin:center center}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}.blurring.dimmable>:not(.dimmer){-webkit-filter:blur(0) grayscale(0);filter:blur(0) grayscale(0);-webkit-transition:.8s -webkit-filter ease;transition:.8s -webkit-filter ease;transition:.8s filter ease;transition:.8s filter ease,.8s -webkit-filter ease}.blurring.dimmed.dimmable>:not(.dimmer){-webkit-filter:blur(5px) grayscale(.7);filter:blur(5px) grayscale(.7)}.blurring.dimmable>.dimmer{background-color:rgba(0,0,0,.6)}.blurring.dimmable>.inverted.dimmer{background-color:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content>*{color:#fff}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;width:0%;height:0%;z-index:-100;background-color:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)} \ No newline at end of file diff --git a/semantic/components/dimmer.min.js b/semantic/components/dimmer.min.js new file mode 100644 index 0000000..219e81e --- /dev/null +++ b/semantic/components/dimmer.min.js @@ -0,0 +1 @@ +!function(x,e,F,T){"use strict";e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),x.fn.dimmer=function(p){var b,v=x(this),h=(new Date).getTime(),y=[],C=p,w="string"==typeof C,S=[].slice.call(arguments,1);return v.each(function(){var a,i,s,r=x.isPlainObject(p)?x.extend(!0,{},x.fn.dimmer.settings,p):x.extend({},x.fn.dimmer.settings),n=r.selector,e=r.namespace,t=r.className,m=r.error,o="."+e,d="module-"+e,c=v.selector||"",l="ontouchstart"in F.documentElement?"touchstart":"click",u=x(this),f=this,g=u.data(d);(s={preinitialize:function(){a=s.is.dimmer()?(i=u.parent(),u):(i=u,s.has.dimmer()?r.dimmerName?i.find(n.dimmer).filter("."+r.dimmerName):i.find(n.dimmer):s.create())},initialize:function(){s.debug("Initializing dimmer",r),s.bind.events(),s.set.dimmable(),s.instantiate()},instantiate:function(){s.verbose("Storing instance of module",s),g=s,u.data(d,g)},destroy:function(){s.verbose("Destroying previous module",a),s.unbind.events(),s.remove.variation(),i.off(o)},bind:{events:function(){"hover"==r.on?i.on("mouseenter"+o,s.show).on("mouseleave"+o,s.hide):"click"==r.on&&i.on(l+o,s.toggle),s.is.page()&&(s.debug("Setting as a page dimmer",i),s.set.pageDimmer()),s.is.closable()&&(s.verbose("Adding dimmer close event",a),i.on(l+o,n.dimmer,s.event.click))}},unbind:{events:function(){u.removeData(d),i.off(o)}},event:{click:function(e){s.verbose("Determining if event occured on dimmer",e),(0===a.find(e.target).length||x(e.target).is(n.content))&&(s.hide(),e.stopImmediatePropagation())}},addContent:function(e){var i=x(e);s.debug("Add content to dimmer",i),i.parent()[0]!==a[0]&&i.detach().appendTo(a)},create:function(){var e=x(r.template.dimmer());return r.dimmerName&&(s.debug("Creating named dimmer",r.dimmerName),e.addClass(r.dimmerName)),e.appendTo(i),e},show:function(e){e=x.isFunction(e)?e:function(){},s.debug("Showing dimmer",a,r),s.set.variation(),s.is.dimmed()&&!s.is.animating()||!s.is.enabled()?s.debug("Dimmer is already shown or disabled"):(s.animate.show(e),r.onShow.call(f),r.onChange.call(f))},hide:function(e){e=x.isFunction(e)?e:function(){},s.is.dimmed()||s.is.animating()?(s.debug("Hiding dimmer",a),s.animate.hide(e),r.onHide.call(f),r.onChange.call(f)):s.debug("Dimmer is not visible")},toggle:function(){s.verbose("Toggling dimmer visibility",a),s.is.dimmed()?s.hide():s.show()},animate:{show:function(e){e=x.isFunction(e)?e:function(){},r.useCSS&&x.fn.transition!==T&&a.transition("is supported")?(r.useFlex?(s.debug("Using flex dimmer"),s.remove.legacy()):(s.debug("Using legacy non-flex dimmer"),s.set.legacy()),"auto"!==r.opacity&&s.set.opacity(),a.transition({displayType:r.useFlex?"flex":"block",animation:r.transition+" in",queue:!1,duration:s.get.duration(),useFailSafe:!0,onStart:function(){s.set.dimmed()},onComplete:function(){s.set.active(),e()}})):(s.verbose("Showing dimmer animation with javascript"),s.set.dimmed(),"auto"==r.opacity&&(r.opacity=.8),a.stop().css({opacity:0,width:"100%",height:"100%"}).fadeTo(s.get.duration(),r.opacity,function(){a.removeAttr("style"),s.set.active(),e()}))},hide:function(e){e=x.isFunction(e)?e:function(){},r.useCSS&&x.fn.transition!==T&&a.transition("is supported")?(s.verbose("Hiding dimmer with css"),a.transition({displayType:r.useFlex?"flex":"block",animation:r.transition+" out",queue:!1,duration:s.get.duration(),useFailSafe:!0,onStart:function(){s.remove.dimmed()},onComplete:function(){s.remove.variation(),s.remove.active(),e()}})):(s.verbose("Hiding dimmer with javascript"),s.remove.dimmed(),a.stop().fadeOut(s.get.duration(),function(){s.remove.active(),a.removeAttr("style"),e()}))}},get:{dimmer:function(){return a},duration:function(){return"object"==typeof r.duration?s.is.active()?r.duration.hide:r.duration.show:r.duration}},has:{dimmer:function(){return r.dimmerName?0 .ui.dimmer",content:".ui.dimmer > .content, .ui.dimmer > .content > .center"},template:{dimmer:function(){return x("
").attr("class","ui dimmer")}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/divider.css b/semantic/components/divider.css new file mode 100644 index 0000000..bfea850 --- /dev/null +++ b/semantic/components/divider.css @@ -0,0 +1,260 @@ +/*! + * # Semantic UI 2.4.1 - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Divider +*******************************/ + +.ui.divider { + margin: 1rem 0rem; + line-height: 1; + height: 0em; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 0.05em; + color: rgba(0, 0, 0, 0.85); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*-------------- + Basic +---------------*/ + +.ui.divider:not(.vertical):not(.horizontal) { + border-top: 1px solid rgba(34, 36, 38, 0.15); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +/*-------------- + Coupling +---------------*/ + + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + display: table; + white-space: nowrap; + height: auto; + margin: ''; + line-height: 1; + text-align: center; +} +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; +} +.ui.horizontal.divider:before { + background-position: right 1em top 50%; +} +.ui.horizontal.divider:after { + background-position: left 1em top 50%; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + margin: 0rem; + padding: 0em; + width: auto; + height: 50%; + line-height: 0em; + text-align: center; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + border-left: 1px solid rgba(34, 36, 38, 0.15); + border-right: 1px solid rgba(255, 255, 255, 0.1); + width: 0%; + height: calc(100% - 1rem ); +} +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} + +/* Inside grid */ +@media only screen and (max-width: 767px) { + .ui.stackable.grid .ui.vertical.divider, + .ui.grid .stackable.row .ui.vertical.divider { + display: table; + white-space: nowrap; + height: auto; + margin: ''; + overflow: hidden; + line-height: 1; + text-align: center; + position: static; + top: 0; + left: 0; + -webkit-transform: none; + transform: none; + } + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + position: static; + left: 0; + border-left: none; + border-right: none; + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before { + background-position: right 1em top 50%; + } + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-position: left 1em top 50%; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.divider > .icon { + margin: 0rem; + font-size: 1rem; + height: 1em; + vertical-align: middle; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent !important; +} +.ui.hidden.divider:before, +.ui.hidden.divider:after { + display: none; +} + +/*-------------- + Inverted +---------------*/ + +.ui.divider.inverted, +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: #FFFFFF; +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: rgba(34, 36, 38, 0.15) !important; + border-left-color: rgba(34, 36, 38, 0.15) !important; + border-bottom-color: rgba(255, 255, 255, 0.15) !important; + border-right-color: rgba(255, 255, 255, 0.15) !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.divider { + margin: 0em; +} + +/*-------------- + Clearing +---------------*/ + +.ui.clearing.divider { + clear: both; +} + +/*-------------- + Section +---------------*/ + +.ui.section.divider { + margin-top: 2rem; + margin-bottom: 2rem; +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: 1rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); +} +@media only screen and (max-width: 767px) { + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); + } +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/divider.min.css b/semantic/components/divider.min.css new file mode 100644 index 0000000..aecd2c1 --- /dev/null +++ b/semantic/components/divider.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.divider{margin:1rem 0;line-height:1;height:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.divider:not(.vertical):not(.horizontal){border-top:1px solid rgba(34,36,38,.15);border-bottom:1px solid rgba(255,255,255,.1)}.ui.grid>.column+.divider,.ui.grid>.row>.column+.divider{left:auto}.ui.horizontal.divider{display:table;white-space:nowrap;height:auto;margin:'';line-height:1;text-align:center}.ui.horizontal.divider:after,.ui.horizontal.divider:before{content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.horizontal.divider:before{background-position:right 1em top 50%}.ui.horizontal.divider:after{background-position:left 1em top 50%}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0;padding:0;width:auto;height:50%;line-height:0;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:'';z-index:3;border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(255,255,255,.1);width:0%;height:calc(100% - 1rem)}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider,.ui.stackable.grid .ui.vertical.divider{display:table;white-space:nowrap;height:auto;margin:'';overflow:hidden;line-height:1;text-align:center;position:static;top:0;left:0;-webkit-transform:none;transform:none}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{position:static;left:0;border-left:none;border-right:none;content:'';display:table-cell;position:relative;top:50%;width:50%;background-repeat:no-repeat}.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:before{background-position:right 1em top 50%}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:after{background-position:left 1em top 50%}}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent!important}.ui.hidden.divider:after,.ui.hidden.divider:before{display:none}.ui.divider.inverted,.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:#fff}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(34,36,38,.15)!important;border-left-color:rgba(34,36,38,.15)!important;border-bottom-color:rgba(255,255,255,.15)!important;border-right-color:rgba(255,255,255,.15)!important}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}.ui.horizontal.divider:after,.ui.horizontal.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC)}} \ No newline at end of file diff --git a/semantic/components/dropdown.css b/semantic/components/dropdown.css new file mode 100644 index 0000000..11dbd0a --- /dev/null +++ b/semantic/components/dropdown.css @@ -0,0 +1,1516 @@ +/*! + * # Semantic UI 2.4.0 - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Dropdown +*******************************/ + +.ui.dropdown { + cursor: pointer; + position: relative; + display: inline-block; + outline: none; + text-align: left; + -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: box-shadow 0.1s ease, width 0.1s ease; + transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + + +/******************************* + Content +*******************************/ + + +/*-------------- + Menu +---------------*/ + +.ui.dropdown .menu { + cursor: auto; + position: absolute; + display: none; + outline: none; + top: 100%; + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + margin: 0em; + padding: 0em 0em; + background: #FFFFFF; + font-size: 1em; + text-shadow: none; + text-align: left; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; + z-index: 11; + will-change: transform, opacity; +} +.ui.dropdown .menu > * { + white-space: nowrap; +} + +/*-------------- + Hidden Input +---------------*/ + +.ui.dropdown > input:not(.search):first-child, +.ui.dropdown > select { + display: none !important; +} + +/*-------------- + Dropdown Icon +---------------*/ + +.ui.dropdown > .dropdown.icon { + position: relative; + width: auto; + font-size: 0.85714286em; + margin: 0em 0em 0em 1em; +} +.ui.dropdown .menu > .item .dropdown.icon { + width: auto; + float: right; + margin: 0em 0em 0em 1em; +} +.ui.dropdown .menu > .item .dropdown.icon + .text { + margin-right: 1em; +} + +/*-------------- + Text +---------------*/ + +.ui.dropdown > .text { + display: inline-block; + -webkit-transition: none; + transition: none; +} + +/*-------------- + Menu Item +---------------*/ + +.ui.dropdown .menu > .item { + position: relative; + cursor: pointer; + display: block; + border: none; + height: auto; + text-align: left; + border-top: none; + line-height: 1em; + color: rgba(0, 0, 0, 0.87); + padding: 0.78571429rem 1.14285714rem !important; + font-size: 1rem; + text-transform: none; + font-weight: normal; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-touch-callout: none; +} +.ui.dropdown .menu > .item:first-child { + border-top-width: 0px; +} + +/*-------------- + Floated Content +---------------*/ + +.ui.dropdown > .text > [class*="right floated"], +.ui.dropdown .menu .item > [class*="right floated"] { + float: right !important; + margin-right: 0em !important; + margin-left: 1em !important; +} +.ui.dropdown > .text > [class*="left floated"], +.ui.dropdown .menu .item > [class*="left floated"] { + float: left !important; + margin-left: 0em !important; + margin-right: 1em !important; +} +.ui.dropdown .menu .item > .icon.floated, +.ui.dropdown .menu .item > .flag.floated, +.ui.dropdown .menu .item > .image.floated, +.ui.dropdown .menu .item > img.floated { + margin-top: 0em; +} + +/*-------------- + Menu Divider +---------------*/ + +.ui.dropdown .menu > .header { + margin: 1rem 0rem 0.75rem; + padding: 0em 1.14285714rem; + color: rgba(0, 0, 0, 0.85); + font-size: 0.78571429em; + font-weight: bold; + text-transform: uppercase; +} +.ui.dropdown .menu > .divider { + border-top: 1px solid rgba(34, 36, 38, 0.1); + height: 0em; + margin: 0.5em 0em; +} +.ui.dropdown.dropdown .menu > .input { + width: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 1.14285714rem 0.78571429rem; + min-width: 10rem; +} +.ui.dropdown .menu > .header + .input { + margin-top: 0em; +} +.ui.dropdown .menu > .input:not(.transparent) input { + padding: 0.5em 1em; +} +.ui.dropdown .menu > .input:not(.transparent) .button, +.ui.dropdown .menu > .input:not(.transparent) .icon, +.ui.dropdown .menu > .input:not(.transparent) .label { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +/*----------------- + Item Description +-------------------*/ + +.ui.dropdown > .text > .description, +.ui.dropdown .menu > .item > .description { + float: right; + margin: 0em 0em 0em 1em; + color: rgba(0, 0, 0, 0.4); +} + +/*----------------- + Message +-------------------*/ + +.ui.dropdown .menu > .message { + padding: 0.78571429rem 1.14285714rem; + font-weight: normal; +} +.ui.dropdown .menu > .message:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} + +/*-------------- + Sub Menu +---------------*/ + +.ui.dropdown .menu .menu { + top: 0% !important; + left: 100%; + right: auto; + margin: 0em 0em 0em -0.5em !important; + border-radius: 0.28571429rem !important; + z-index: 21 !important; +} + +/* Hide Arrow */ +.ui.dropdown .menu .menu:after { + display: none; +} + +/*-------------- + Sub Elements +---------------*/ + + +/* Icons / Flags / Labels / Image */ +.ui.dropdown > .text > .icon, +.ui.dropdown > .text > .label, +.ui.dropdown > .text > .flag, +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image { + margin-top: 0em; +} +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-top: 0em; +} +.ui.dropdown > .text > .icon, +.ui.dropdown > .text > .label, +.ui.dropdown > .text > .flag, +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .icon, +.ui.dropdown .menu > .item > .label, +.ui.dropdown .menu > .item > .flag, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + margin-left: 0em; + float: none; + margin-right: 0.78571429rem; +} + +/*-------------- + Image +---------------*/ + +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + display: inline-block; + vertical-align: top; + width: auto; + margin-top: -0.5em; + margin-bottom: -0.5em; + max-height: 2em; +} + + +/******************************* + Coupling +*******************************/ + + +/*-------------- + Menu +---------------*/ + + +/* Remove Menu Item Divider */ +.ui.dropdown .ui.menu > .item:before, +.ui.menu .ui.dropdown .menu > .item:before { + display: none; +} + +/* Prevent Menu Item Border */ +.ui.menu .ui.dropdown .menu .active.item { + border-left: none; +} + +/* Automatically float dropdown menu right on last menu item */ +.ui.menu .right.menu .dropdown:last-child .menu, +.ui.menu .right.dropdown.item .menu, +.ui.buttons > .ui.dropdown:last-child .menu { + left: auto; + right: 0em; +} + +/*-------------- + Label +---------------*/ + + +/* Dropdown Menu */ +.ui.label.dropdown .menu { + min-width: 100%; +} + +/*-------------- + Button +---------------*/ + + +/* No Margin On Icon Button */ +.ui.dropdown.icon.button > .dropdown.icon { + margin: 0em; +} +.ui.button.dropdown .menu { + min-width: 100%; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Selection +---------------*/ + + +/* Displays like a select box */ +.ui.selection.dropdown { + cursor: pointer; + word-wrap: break-word; + line-height: 1em; + white-space: normal; + outline: 0; + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + min-width: 14em; + min-height: 2.71428571em; + background: #FFFFFF; + display: inline-block; + padding: 0.78571429em 2.1em 0.78571429em 1em; + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: box-shadow 0.1s ease, width 0.1s ease; + transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease; +} +.ui.selection.dropdown.visible, +.ui.selection.dropdown.active { + z-index: 10; +} +select.ui.dropdown { + height: 38px; + padding: 0.5em; + border: 1px solid rgba(34, 36, 38, 0.15); + visibility: visible; +} +.ui.selection.dropdown > .search.icon, +.ui.selection.dropdown > .delete.icon, +.ui.selection.dropdown > .dropdown.icon { + cursor: pointer; + position: absolute; + width: auto; + height: auto; + line-height: 1.21428571em; + top: 0.78571429em; + right: 1em; + z-index: 3; + margin: -0.78571429em; + padding: 0.91666667em; + opacity: 0.8; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} + +/* Compact */ +.ui.compact.selection.dropdown { + min-width: 0px; +} + +/* Selection Menu */ +.ui.selection.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + border-top-width: 0px !important; + width: auto; + outline: none; + margin: 0px -1px; + min-width: calc(100% + 2px ); + width: calc(100% + 2px ); + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} + +/*-------------- + Message +---------------*/ + +.ui.selection.dropdown .menu > .message { + padding: 0.78571429rem 1.14285714rem; +} +@media only screen and (max-width: 767px) { + .ui.selection.dropdown .menu { + max-height: 8.01428571rem; + } +} +@media only screen and (min-width: 768px) { + .ui.selection.dropdown .menu { + max-height: 10.68571429rem; + } +} +@media only screen and (min-width: 992px) { + .ui.selection.dropdown .menu { + max-height: 16.02857143rem; + } +} +@media only screen and (min-width: 1920px) { + .ui.selection.dropdown .menu { + max-height: 21.37142857rem; + } +} + +/* Menu Item */ +.ui.selection.dropdown .menu > .item { + border-top: 1px solid #FAFAFA; + padding: 0.78571429rem 1.14285714rem !important; + white-space: normal; + word-wrap: normal; +} + +/* User Item */ +.ui.selection.dropdown .menu > .hidden.addition.item { + display: none; +} + +/* Hover */ +.ui.selection.dropdown:hover { + border-color: rgba(34, 36, 38, 0.35); + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Active */ +.ui.selection.active.dropdown { + border-color: #96C8DA; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} +.ui.selection.active.dropdown .menu { + border-color: #96C8DA; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +/* Focus */ +.ui.selection.dropdown:focus { + border-color: #96C8DA; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.selection.dropdown:focus .menu { + border-color: #96C8DA; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +/* Visible */ +.ui.selection.visible.dropdown > .text:not(.default) { + font-weight: normal; + color: rgba(0, 0, 0, 0.8); +} + +/* Visible Hover */ +.ui.selection.active.dropdown:hover { + border-color: #96C8DA; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} +.ui.selection.active.dropdown:hover .menu { + border-color: #96C8DA; + -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +/* Dropdown Icon */ +.ui.active.selection.dropdown > .dropdown.icon, +.ui.visible.selection.dropdown > .dropdown.icon { + opacity: ''; + z-index: 3; +} + +/* Connecting Border */ +.ui.active.selection.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} + +/* Empty Connecting Border */ +.ui.active.empty.selection.dropdown { + border-radius: 0.28571429rem !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.ui.active.empty.selection.dropdown .menu { + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/*-------------- + Searchable +---------------*/ + + +/* Search Selection */ +.ui.search.dropdown { + min-width: ''; +} + +/* Search Dropdown */ +.ui.search.dropdown > input.search { + background: none transparent !important; + border: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + cursor: text; + top: 0em; + left: 1px; + width: 100%; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + padding: inherit; +} + +/* Text Layering */ +.ui.search.dropdown > input.search { + position: absolute; + z-index: 2; +} +.ui.search.dropdown > .text { + cursor: text; + position: relative; + left: 1px; + z-index: 3; +} + +/* Search Selection */ +.ui.search.selection.dropdown > input.search { + line-height: 1.21428571em; + padding: 0.67857143em 2.1em 0.67857143em 1em; +} + +/* Used to size multi select input to character width */ +.ui.search.selection.dropdown > span.sizer { + line-height: 1.21428571em; + padding: 0.67857143em 2.1em 0.67857143em 1em; + display: none; + white-space: pre; +} + +/* Active/Visible Search */ +.ui.search.dropdown.active > input.search, +.ui.search.dropdown.visible > input.search { + cursor: auto; +} +.ui.search.dropdown.active > .text, +.ui.search.dropdown.visible > .text { + pointer-events: none; +} + +/* Filtered Text */ +.ui.active.search.dropdown input.search:focus + .text .icon, +.ui.active.search.dropdown input.search:focus + .text .flag { + opacity: 0.45; +} +.ui.active.search.dropdown input.search:focus + .text { + color: rgba(115, 115, 115, 0.87) !important; +} + +/* Search Menu */ +.ui.search.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; +} +@media only screen and (max-width: 767px) { + .ui.search.dropdown .menu { + max-height: 8.01428571rem; + } +} +@media only screen and (min-width: 768px) { + .ui.search.dropdown .menu { + max-height: 10.68571429rem; + } +} +@media only screen and (min-width: 992px) { + .ui.search.dropdown .menu { + max-height: 16.02857143rem; + } +} +@media only screen and (min-width: 1920px) { + .ui.search.dropdown .menu { + max-height: 21.37142857rem; + } +} + +/*-------------- + Multiple +---------------*/ + + +/* Multiple Selection */ +.ui.multiple.dropdown { + padding: 0.22619048em 2.1em 0.22619048em 0.35714286em; +} +.ui.multiple.dropdown .menu { + cursor: auto; +} + +/* Multiple Search Selection */ +.ui.multiple.search.dropdown, +.ui.multiple.search.dropdown > input.search { + cursor: text; +} + +/* Selection Label */ +.ui.multiple.dropdown > .label { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + vertical-align: top; + white-space: normal; + font-size: 1em; + padding: 0.35714286em 0.78571429em; + margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} + +/* Dropdown Icon */ +.ui.multiple.dropdown .dropdown.icon { + margin: ''; + padding: ''; +} + +/* Text */ +.ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45238095em 0em 0.45238095em 0.64285714em; + line-height: 1.21428571em; +} +.ui.multiple.dropdown > .label ~ input.search { + margin-left: 0.14285714em !important; +} +.ui.multiple.dropdown > .label ~ .text { + display: none; +} + +/*----------------- + Multiple Search +-----------------*/ + + +/* Prompt Text */ +.ui.multiple.search.dropdown > .text { + display: inline-block; + position: absolute; + top: 0; + left: 0; + padding: inherit; + margin: 0.45238095em 0em 0.45238095em 0.64285714em; + line-height: 1.21428571em; +} +.ui.multiple.search.dropdown > .label ~ .text { + display: none; +} + +/* Search */ +.ui.multiple.search.dropdown > input.search { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45238095em 0em 0.45238095em 0.64285714em; + width: 2.2em; + line-height: 1.21428571em; +} + +/*-------------- + Inline +---------------*/ + +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: inherit; +} +.ui.inline.dropdown .dropdown.icon { + margin: 0em 0.21428571em 0em 0.21428571em; + vertical-align: baseline; +} +.ui.inline.dropdown > .text { + font-weight: bold; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: 0.21428571em; + border-radius: 0.28571429rem; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Active +----------------------*/ + + +/* Menu Item Active */ +.ui.dropdown .menu .active.item { + background: transparent; + font-weight: bold; + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: none; + box-shadow: none; + z-index: 12; +} + +/*-------------------- + Hover +----------------------*/ + + +/* Menu Item Hover */ +.ui.dropdown .menu > .item:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); + z-index: 13; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.dropdown > i.icon { + height: 1em !important; +} +.ui.loading.selection.dropdown > i.icon { + padding: 1.5em 1.28571429em !important; +} +.ui.loading.dropdown > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} +.ui.loading.dropdown > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + -webkit-box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0px 0px 0px 1px transparent; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + -webkit-animation: dropdown-spin 0.6s linear; + animation: dropdown-spin 0.6s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + border-radius: 500rem; + border-color: #767676 transparent transparent; + border-style: solid; + border-width: 0.2em; +} + +/* Coupling */ +.ui.loading.dropdown.button > i.icon:before, +.ui.loading.dropdown.button > i.icon:after { + display: none; +} +@-webkit-keyframes dropdown-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes dropdown-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/*-------------------- + Default Text +----------------------*/ + +.ui.dropdown:not(.button) > .default.text, +.ui.default.dropdown:not(.button) > .text { + color: rgba(191, 191, 191, 0.87); +} +.ui.dropdown:not(.button) > input:focus ~ .default.text, +.ui.default.dropdown:not(.button) > input:focus ~ .text { + color: rgba(115, 115, 115, 0.87); +} + +/*-------------------- + Loading +----------------------*/ + +.ui.loading.dropdown > .text { + -webkit-transition: none; + transition: none; +} + +/* Used To Check Position */ +.ui.dropdown .loading.menu { + display: block; + visibility: hidden; + z-index: -1; +} +.ui.dropdown > .loading.menu { + left: 0px !important; + right: auto !important; +} +.ui.dropdown > .menu .loading.menu { + left: 100% !important; + right: auto !important; +} + +/*-------------------- + Keyboard Select +----------------------*/ + + +/* Selected Item */ +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + background: rgba(0, 0, 0, 0.03); + color: rgba(0, 0, 0, 0.95); +} + +/*-------------------- + Search Filtered +----------------------*/ + + +/* Filtered Item */ +.ui.dropdown > .filtered.text { + visibility: hidden; +} +.ui.dropdown .filtered.item { + display: none !important; +} + +/*-------------------- + Error +----------------------*/ + +.ui.dropdown.error, +.ui.dropdown.error > .text, +.ui.dropdown.error > .default.text { + color: #9F3A38; +} +.ui.selection.dropdown.error { + background: #FFF6F6; + border-color: #E0B4B4; +} +.ui.selection.dropdown.error:hover { + border-color: #E0B4B4; +} +.ui.dropdown.error > .menu, +.ui.dropdown.error > .menu .menu { + border-color: #E0B4B4; +} +.ui.dropdown.error > .menu > .item { + color: #9F3A38; +} +.ui.multiple.selection.error.dropdown > .label { + border-color: #E0B4B4; +} + +/* Item Hover */ +.ui.dropdown.error > .menu > .item:hover { + background-color: #FFF2F2; +} + +/* Item Active */ +.ui.dropdown.error > .menu .active.item { + background-color: #FDCFCF; +} + +/*-------------------- + Clear +----------------------*/ + +.ui.dropdown > .clear.dropdown.icon { + opacity: 0.8; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +.ui.dropdown > .clear.dropdown.icon:hover { + opacity: 1; +} + +/*-------------------- + Disabled +----------------------*/ + + +/* Disabled */ +.ui.disabled.dropdown, +.ui.dropdown .menu > .disabled.item { + cursor: default; + pointer-events: none; + opacity: 0.45; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Direction +---------------*/ + + +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} + +/* Default Side (Right) */ +.ui.dropdown .right.menu > .menu, +.ui.dropdown .menu .right.menu { + left: 100% !important; + right: auto !important; + border-radius: 0.28571429rem !important; +} + +/* Leftward Opening Menu */ +.ui.dropdown > .left.menu { + left: auto !important; + right: 0px !important; +} +.ui.dropdown > .left.menu .menu, +.ui.dropdown .menu .left.menu { + left: auto; + right: 100%; + margin: 0em -0.5em 0em 0em !important; + border-radius: 0.28571429rem !important; +} +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: left; + margin: 0em 0em 0em 0em; +} +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: left; + margin: 0em 0em 0em 0em; +} +.ui.dropdown .item .left.dropdown.icon + .text, +.ui.dropdown .left.menu .item .dropdown.icon + .text { + margin-left: 1em; + margin-right: 0em; +} + +/*-------------- + Upward +---------------*/ + + +/* Upward Main Menu */ +.ui.upward.dropdown > .menu { + top: auto; + bottom: 100%; + -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +/* Upward Sub Menu */ +.ui.dropdown .upward.menu { + top: auto !important; + bottom: 0 !important; +} + +/* Active Upward */ +.ui.simple.upward.active.dropdown, +.ui.simple.upward.dropdown:hover { + border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; +} +.ui.upward.dropdown.button:not(.pointing):not(.floating).active { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +/* Selection */ +.ui.upward.selection.dropdown .menu { + border-top-width: 1px !important; + border-bottom-width: 0px !important; + -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); +} +.ui.upward.selection.dropdown:hover { + -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); + box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); +} + +/* Active Upward */ +.ui.active.upward.selection.dropdown { + border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; +} + +/* Visible Upward */ +.ui.upward.selection.dropdown.visible { + -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); + border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; +} + +/* Visible Hover Upward */ +.ui.upward.active.selection.dropdown:hover { + -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); +} +.ui.upward.active.selection.dropdown:hover .menu { + -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); +} + +/*-------------- + Simple +---------------*/ + + +/* Selection Menu */ +.ui.scrolling.dropdown .menu, +.ui.dropdown .scrolling.menu { + overflow-x: hidden; + overflow-y: auto; +} +.ui.scrolling.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-overflow-scrolling: touch; + min-width: 100% !important; + width: auto !important; +} +.ui.dropdown .scrolling.menu { + position: static; + overflow-y: auto; + border: none; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-radius: 0 !important; + margin: 0 !important; + min-width: 100% !important; + width: auto !important; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.scrolling.dropdown .menu .item.item.item, +.ui.dropdown .scrolling.menu > .item.item.item { + border-top: none; +} +.ui.scrolling.dropdown .menu .item:first-child, +.ui.dropdown .scrolling.menu .item:first-child { + border-top: none; +} +.ui.dropdown > .animating.menu .scrolling.menu, +.ui.dropdown > .visible.menu .scrolling.menu { + display: block; +} + +/* Scrollbar in IE */ +@media all and (-ms-high-contrast: none) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + min-width: calc(100% - 17px ); + } +} +@media only screen and (max-width: 767px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 10.28571429rem; + } +} +@media only screen and (min-width: 768px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 15.42857143rem; + } +} +@media only screen and (min-width: 992px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 20.57142857rem; + } +} +@media only screen and (min-width: 1920px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 20.57142857rem; + } +} + +/*-------------- + Simple +---------------*/ + + +/* Displays without javascript */ +.ui.simple.dropdown .menu:before, +.ui.simple.dropdown .menu:after { + display: none; +} +.ui.simple.dropdown .menu { + position: absolute; + display: block; + overflow: hidden; + top: -9999px !important; + opacity: 0; + width: 0; + height: 0; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +.ui.simple.active.dropdown, +.ui.simple.dropdown:hover { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} +.ui.simple.active.dropdown > .menu, +.ui.simple.dropdown:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 100% !important; + opacity: 1; +} +.ui.simple.dropdown > .menu > .item:active > .menu, +.ui.simple.dropdown:hover > .menu > .item:hover > .menu { + overflow: visible; + width: auto; + height: auto; + top: 0% !important; + left: 100% !important; + opacity: 1; +} +.ui.simple.disabled.dropdown:hover .menu { + display: none; + height: 0px; + width: 0px; + overflow: hidden; +} + +/* Visible */ +.ui.simple.visible.dropdown > .menu { + display: block; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.dropdown { + display: block; + width: 100%; + min-width: 0em; +} +.ui.fluid.dropdown > .dropdown.icon { + float: right; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.dropdown .menu { + left: 0; + right: auto; + -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; + border-radius: 0.28571429rem !important; +} +.ui.floating.dropdown > .menu { + margin-top: 0.5em !important; + border-radius: 0.28571429rem !important; +} + +/*-------------- + Pointing +---------------*/ + +.ui.pointing.dropdown > .menu { + top: 100%; + margin-top: 0.78571429rem; + border-radius: 0.28571429rem; +} +.ui.pointing.dropdown > .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: ''; + visibility: visible; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + width: 0.5em; + height: 0.5em; + -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); + background: #FFFFFF; + z-index: 2; +} +.ui.pointing.dropdown > .menu:after { + top: -0.25em; + left: 50%; + margin: 0em 0em 0em -0.25em; +} + +/* Top Left Pointing */ +.ui.top.left.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: 1em 0em 0em; +} +.ui.top.left.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + left: 0%; + right: auto; + margin: 1em 0em 0em; +} +.ui.top.left.pointing.dropdown > .menu:after { + top: -0.25em; + left: 1em; + right: auto; + margin: 0em; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +/* Top Right Pointing */ +.ui.top.right.pointing.dropdown > .menu { + top: 100%; + bottom: auto; + right: 0%; + left: auto; + margin: 1em 0em 0em; +} +.ui.top.pointing.dropdown > .left.menu:after, +.ui.top.right.pointing.dropdown > .menu:after { + top: -0.25em; + left: auto !important; + right: 1em !important; + margin: 0em; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +/* Left Pointing */ +.ui.left.pointing.dropdown > .menu { + top: 0%; + left: 100%; + right: auto; + margin: 0em 0em 0em 1em; +} +.ui.left.pointing.dropdown > .menu:after { + top: 1em; + left: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { + left: auto !important; + right: 100% !important; + margin: 0em 1em 0em 0em; +} +.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { + top: 1em; + left: auto; + right: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} + +/* Right Pointing */ +.ui.right.pointing.dropdown > .menu { + top: 0%; + left: auto; + right: 100%; + margin: 0em 1em 0em 0em; +} +.ui.right.pointing.dropdown > .menu:after { + top: 1em; + left: auto; + right: -0.25em; + margin: 0em 0em 0em 0em; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} + +/* Bottom Pointing */ +.ui.bottom.pointing.dropdown > .menu { + top: auto; + bottom: 100%; + left: 0%; + right: auto; + margin: 0em 0em 1em; +} +.ui.bottom.pointing.dropdown > .menu:after { + top: auto; + bottom: -0.25em; + right: auto; + margin: 0em; + -webkit-transform: rotate(-135deg); + transform: rotate(-135deg); +} + +/* Reverse Sub-Menu Direction */ +.ui.bottom.pointing.dropdown > .menu .menu { + top: auto !important; + bottom: 0px !important; +} + +/* Bottom Left */ +.ui.bottom.left.pointing.dropdown > .menu { + left: 0%; + right: auto; +} +.ui.bottom.left.pointing.dropdown > .menu:after { + left: 1em; + right: auto; +} + +/* Bottom Right */ +.ui.bottom.right.pointing.dropdown > .menu { + right: 0%; + left: auto; +} +.ui.bottom.right.pointing.dropdown > .menu:after { + left: auto; + right: 1em; +} + +/* Upward pointing */ +.ui.pointing.upward.dropdown .menu, +.ui.top.pointing.upward.dropdown .menu { + top: auto !important; + bottom: 100% !important; + margin: 0em 0em 0.78571429rem; + border-radius: 0.28571429rem; +} +.ui.pointing.upward.dropdown .menu:after, +.ui.top.pointing.upward.dropdown .menu:after { + top: 100% !important; + bottom: auto !important; + -webkit-box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); + margin: -0.25em 0em 0em; +} + +/* Right Pointing Upward */ +.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { + top: auto !important; + bottom: 0 !important; + margin: 0em 1em 0em 0em; +} +.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { + top: auto !important; + bottom: 0 !important; + margin: 0em 0em 1em 0em; + -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); +} + +/* Left Pointing Upward */ +.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { + top: auto !important; + bottom: 0 !important; + margin: 0em 0em 0em 1em; +} +.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { + top: auto !important; + bottom: 0 !important; + margin: 0em 0em 1em 0em; + -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); +} + + +/******************************* + Theme Overrides +*******************************/ + + +/* Dropdown Carets */ +@font-face { + font-family: 'Dropdown'; + src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff'); + font-weight: normal; + font-style: normal; +} +.ui.dropdown > .dropdown.icon { + font-family: 'Dropdown'; + line-height: 1; + height: 1em; + width: 1.23em; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .dropdown.icon:before { + content: '\f0d7'; +} + +/* Sub Menu */ +.ui.dropdown .menu .item .dropdown.icon:before { + content: '\f0da' /*rtl:'\f0d9'*/; +} +.ui.dropdown .item .left.dropdown.icon:before, +.ui.dropdown .left.menu .item .dropdown.icon:before { + content: "\f0d9" /*rtl:"\f0da"*/; +} + +/* Vertical Menu Dropdown */ +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da" /*rtl:"\f0d9"*/; +} +.ui.dropdown > .clear.icon:before { + content: "\f00d"; +} +/* Icons for Reference (Subsetted in 2.4.0) + .dropdown.down:before { content: "\f0d7"; } + .dropdown.up:before { content: "\f0d8"; } + .dropdown.left:before { content: "\f0d9"; } + .dropdown.right:before { content: "\f0da"; } + .dropdown.close:before { content: "\f00d"; } +*/ + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/dropdown.js b/semantic/components/dropdown.js new file mode 100644 index 0000000..d0cd217 --- /dev/null +++ b/semantic/components/dropdown.js @@ -0,0 +1,3955 @@ +/*! + * # Semantic UI 2.4.1 - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.dropdown = function(parameters) { + var + $allModules = $(this), + $document = $(document), + + moduleSelector = $allModules.selector || '', + + hasTouch = ('ontouchstart' in document.documentElement), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function(elementIndex) { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.dropdown.settings, parameters) + : $.extend({}, $.fn.dropdown.settings), + + className = settings.className, + message = settings.message, + fields = settings.fields, + keys = settings.keys, + metadata = settings.metadata, + namespace = settings.namespace, + regExp = settings.regExp, + selector = settings.selector, + error = settings.error, + templates = settings.templates, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $context = $(settings.context), + $text = $module.find(selector.text), + $search = $module.find(selector.search), + $sizer = $module.find(selector.sizer), + $input = $module.find(selector.input), + $icon = $module.find(selector.icon), + + $combo = ($module.prev().find(selector.text).length > 0) + ? $module.prev().find(selector.text) + : $module.prev(), + + $menu = $module.children(selector.menu), + $item = $menu.find(selector.item), + + activated = false, + itemActivated = false, + internalChange = false, + element = this, + instance = $module.data(moduleNamespace), + + initialLoad, + pageLostFocus, + willRefocus, + elementNamespace, + id, + selectObserver, + menuObserver, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing dropdown', settings); + + if( module.is.alreadySetup() ) { + module.setup.reference(); + } + else { + + module.setup.layout(); + + if(settings.values) { + module.change.values(settings.values); + } + + module.refreshData(); + + module.save.defaults(); + module.restore.selected(); + + module.create.id(); + module.bind.events(); + + module.observeChanges(); + module.instantiate(); + } + + }, + + instantiate: function() { + module.verbose('Storing instance of dropdown', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous dropdown', $module); + module.remove.tabbable(); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + $menu + .off(eventNamespace) + ; + $document + .off(elementNamespace) + ; + module.disconnect.menuObserver(); + module.disconnect.selectObserver(); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + selectObserver = new MutationObserver(module.event.select.mutation); + menuObserver = new MutationObserver(module.event.menu.mutation); + module.debug('Setting up mutation observer', selectObserver, menuObserver); + module.observe.select(); + module.observe.menu(); + } + }, + + disconnect: { + menuObserver: function() { + if(menuObserver) { + menuObserver.disconnect(); + } + }, + selectObserver: function() { + if(selectObserver) { + selectObserver.disconnect(); + } + } + }, + observe: { + select: function() { + if(module.has.input()) { + selectObserver.observe($module[0], { + childList : true, + subtree : true + }); + } + }, + menu: function() { + if(module.has.menu()) { + menuObserver.observe($menu[0], { + childList : true, + subtree : true + }); + } + } + }, + + create: { + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2, 8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + }, + userChoice: function(values) { + var + $userChoices, + $userChoice, + isUserValue, + html + ; + values = values || module.get.userValues(); + if(!values) { + return false; + } + values = $.isArray(values) + ? values + : [values] + ; + $.each(values, function(index, value) { + if(module.get.item(value) === false) { + html = settings.templates.addition( module.add.variables(message.addResult, value) ); + $userChoice = $('
') + .html(html) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) + .addClass(className.addition) + .addClass(className.item) + ; + if(settings.hideAdditions) { + $userChoice.addClass(className.hidden); + } + $userChoices = ($userChoices === undefined) + ? $userChoice + : $userChoices.add($userChoice) + ; + module.verbose('Creating user choices for value', value, $userChoice); + } + }); + return $userChoices; + }, + userLabels: function(value) { + var + userValues = module.get.userValues() + ; + if(userValues) { + module.debug('Adding user labels', userValues); + $.each(userValues, function(index, value) { + module.verbose('Adding custom user value'); + module.add.label(value, value); + }); + } + }, + menu: function() { + $menu = $('
') + .addClass(className.menu) + .appendTo($module) + ; + }, + sizer: function() { + $sizer = $('') + .addClass(className.sizer) + .insertAfter($search) + ; + } + }, + + search: function(query) { + query = (query !== undefined) + ? query + : module.get.query() + ; + module.verbose('Searching for query', query); + if(module.has.minCharacters(query)) { + module.filter(query); + } + else { + module.hide(); + } + }, + + select: { + firstUnfiltered: function() { + module.verbose('Selecting first non-filtered element'); + module.remove.selectedItem(); + $item + .not(selector.unselectable) + .not(selector.addition + selector.hidden) + .eq(0) + .addClass(className.selected) + ; + }, + nextAvailable: function($selected) { + $selected = $selected.eq(0); + var + $nextAvailable = $selected.nextAll(selector.item).not(selector.unselectable).eq(0), + $prevAvailable = $selected.prevAll(selector.item).not(selector.unselectable).eq(0), + hasNext = ($nextAvailable.length > 0) + ; + if(hasNext) { + module.verbose('Moving selection to', $nextAvailable); + $nextAvailable.addClass(className.selected); + } + else { + module.verbose('Moving selection to', $prevAvailable); + $prevAvailable.addClass(className.selected); + } + } + }, + + setup: { + api: function() { + var + apiSettings = { + debug : settings.debug, + urlData : { + value : module.get.value(), + query : module.get.query() + }, + on : false + } + ; + module.verbose('First request, initializing API'); + $module + .api(apiSettings) + ; + }, + layout: function() { + if( $module.is('select') ) { + module.setup.select(); + module.setup.returnedObject(); + } + if( !module.has.menu() ) { + module.create.menu(); + } + if( module.is.search() && !module.has.search() ) { + module.verbose('Adding search input'); + $search = $('') + .addClass(className.search) + .prop('autocomplete', 'off') + .insertBefore($text) + ; + } + if( module.is.multiple() && module.is.searchSelection() && !module.has.sizer()) { + module.create.sizer(); + } + if(settings.allowTab) { + module.set.tabbable(); + } + }, + select: function() { + var + selectValues = module.get.selectValues() + ; + module.debug('Dropdown initialized on a select', selectValues); + if( $module.is('select') ) { + $input = $module; + } + // see if select is placed correctly already + if($input.parent(selector.dropdown).length > 0) { + module.debug('UI dropdown already exists. Creating dropdown menu only'); + $module = $input.closest(selector.dropdown); + if( !module.has.menu() ) { + module.create.menu(); + } + $menu = $module.children(selector.menu); + module.setup.menu(selectValues); + } + else { + module.debug('Creating entire dropdown from select'); + $module = $('
') + .attr('class', $input.attr('class') ) + .addClass(className.selection) + .addClass(className.dropdown) + .html( templates.dropdown(selectValues) ) + .insertBefore($input) + ; + if($input.hasClass(className.multiple) && $input.prop('multiple') === false) { + module.error(error.missingMultiple); + $input.prop('multiple', true); + } + if($input.is('[multiple]')) { + module.set.multiple(); + } + if ($input.prop('disabled')) { + module.debug('Disabling dropdown'); + $module.addClass(className.disabled); + } + $input + .removeAttr('class') + .detach() + .prependTo($module) + ; + } + module.refresh(); + }, + menu: function(values) { + $menu.html( templates.menu(values, fields)); + $item = $menu.find(selector.item); + }, + reference: function() { + module.debug('Dropdown behavior was called on select, replacing with closest dropdown'); + // replace module reference + $module = $module.parent(selector.dropdown); + instance = $module.data(moduleNamespace); + element = $module.get(0); + module.refresh(); + module.setup.returnedObject(); + }, + returnedObject: function() { + var + $firstModules = $allModules.slice(0, elementIndex), + $lastModules = $allModules.slice(elementIndex + 1) + ; + // adjust all modules to use correct reference + $allModules = $firstModules.add($module).add($lastModules); + } + }, + + refresh: function() { + module.refreshSelectors(); + module.refreshData(); + }, + + refreshItems: function() { + $item = $menu.find(selector.item); + }, + + refreshSelectors: function() { + module.verbose('Refreshing selector cache'); + $text = $module.find(selector.text); + $search = $module.find(selector.search); + $input = $module.find(selector.input); + $icon = $module.find(selector.icon); + $combo = ($module.prev().find(selector.text).length > 0) + ? $module.prev().find(selector.text) + : $module.prev() + ; + $menu = $module.children(selector.menu); + $item = $menu.find(selector.item); + }, + + refreshData: function() { + module.verbose('Refreshing cached metadata'); + $item + .removeData(metadata.text) + .removeData(metadata.value) + ; + }, + + clearData: function() { + module.verbose('Clearing metadata'); + $item + .removeData(metadata.text) + .removeData(metadata.value) + ; + $module + .removeData(metadata.defaultText) + .removeData(metadata.defaultValue) + .removeData(metadata.placeholderText) + ; + }, + + toggle: function() { + module.verbose('Toggling menu visibility'); + if( !module.is.active() ) { + module.show(); + } + else { + module.hide(); + } + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(!module.can.show() && module.is.remote()) { + module.debug('No API results retrieved, searching before show'); + module.queryRemote(module.get.query(), module.show); + } + if( module.can.show() && !module.is.active() ) { + module.debug('Showing dropdown'); + if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) { + module.remove.message(); + } + if(module.is.allFiltered()) { + return true; + } + if(settings.onShow.call(element) !== false) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + if(module.has.menuSearch()) { + module.focusSearch(); + } + module.set.visible(); + callback.call(element); + }); + } + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.active() && !module.is.animatingOutward() ) { + module.debug('Hiding dropdown'); + if(settings.onHide.call(element) !== false) { + module.animate.hide(function() { + module.remove.visible(); + callback.call(element); + }); + } + } + }, + + hideOthers: function() { + module.verbose('Finding other dropdowns to hide'); + $allModules + .not($module) + .has(selector.menu + '.' + className.visible) + .dropdown('hide') + ; + }, + + hideMenu: function() { + module.verbose('Hiding menu instantaneously'); + module.remove.active(); + module.remove.visible(); + $menu.transition('hide'); + }, + + hideSubMenus: function() { + var + $subMenus = $menu.children(selector.item).find(selector.menu) + ; + module.verbose('Hiding sub menus', $subMenus); + $subMenus.transition('hide'); + }, + + bind: { + events: function() { + if(hasTouch) { + module.bind.touchEvents(); + } + module.bind.keyboardEvents(); + module.bind.inputEvents(); + module.bind.mouseEvents(); + }, + touchEvents: function() { + module.debug('Touch device detected binding additional touch events'); + if( module.is.searchSelection() ) { + // do nothing special yet + } + else if( module.is.single() ) { + $module + .on('touchstart' + eventNamespace, module.event.test.toggle) + ; + } + $menu + .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + ; + }, + keyboardEvents: function() { + module.verbose('Binding keyboard events'); + $module + .on('keydown' + eventNamespace, module.event.keydown) + ; + if( module.has.search() ) { + $module + .on(module.get.inputEvent() + eventNamespace, selector.search, module.event.input) + ; + } + if( module.is.multiple() ) { + $document + .on('keydown' + elementNamespace, module.event.document.keydown) + ; + } + }, + inputEvents: function() { + module.verbose('Binding input change events'); + $module + .on('change' + eventNamespace, selector.input, module.event.change) + ; + }, + mouseEvents: function() { + module.verbose('Binding mouse events'); + if(module.is.multiple()) { + $module + .on('click' + eventNamespace, selector.label, module.event.label.click) + .on('click' + eventNamespace, selector.remove, module.event.remove.click) + ; + } + if( module.is.searchSelection() ) { + $module + .on('mousedown' + eventNamespace, module.event.mousedown) + .on('mouseup' + eventNamespace, module.event.mouseup) + .on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown) + .on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup) + .on('click' + eventNamespace, selector.icon, module.event.icon.click) + .on('focus' + eventNamespace, selector.search, module.event.search.focus) + .on('click' + eventNamespace, selector.search, module.event.search.focus) + .on('blur' + eventNamespace, selector.search, module.event.search.blur) + .on('click' + eventNamespace, selector.text, module.event.text.focus) + ; + if(module.is.multiple()) { + $module + .on('click' + eventNamespace, module.event.click) + ; + } + } + else { + if(settings.on == 'click') { + $module + .on('click' + eventNamespace, module.event.test.toggle) + ; + } + else if(settings.on == 'hover') { + $module + .on('mouseenter' + eventNamespace, module.delay.show) + .on('mouseleave' + eventNamespace, module.delay.hide) + ; + } + else { + $module + .on(settings.on + eventNamespace, module.toggle) + ; + } + $module + .on('click' + eventNamespace, selector.icon, module.event.icon.click) + .on('mousedown' + eventNamespace, module.event.mousedown) + .on('mouseup' + eventNamespace, module.event.mouseup) + .on('focus' + eventNamespace, module.event.focus) + ; + if(module.has.menuSearch() ) { + $module + .on('blur' + eventNamespace, selector.search, module.event.search.blur) + ; + } + else { + $module + .on('blur' + eventNamespace, module.event.blur) + ; + } + } + $menu + .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter) + .on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave) + .on('click' + eventNamespace, selector.item, module.event.item.click) + ; + }, + intent: function() { + module.verbose('Binding hide intent event to document'); + if(hasTouch) { + $document + .on('touchstart' + elementNamespace, module.event.test.touch) + .on('touchmove' + elementNamespace, module.event.test.touch) + ; + } + $document + .on('click' + elementNamespace, module.event.test.hide) + ; + } + }, + + unbind: { + intent: function() { + module.verbose('Removing hide intent event from document'); + if(hasTouch) { + $document + .off('touchstart' + elementNamespace) + .off('touchmove' + elementNamespace) + ; + } + $document + .off('click' + elementNamespace) + ; + } + }, + + filter: function(query) { + var + searchTerm = (query !== undefined) + ? query + : module.get.query(), + afterFiltered = function() { + if(module.is.multiple()) { + module.filterActive(); + } + if(query || (!query && module.get.activeItem().length == 0)) { + module.select.firstUnfiltered(); + } + if( module.has.allResultsFiltered() ) { + if( settings.onNoResults.call(element, searchTerm) ) { + if(settings.allowAdditions) { + if(settings.hideAdditions) { + module.verbose('User addition with no menu, setting empty style'); + module.set.empty(); + module.hideMenu(); + } + } + else { + module.verbose('All items filtered, showing message', searchTerm); + module.add.message(message.noResults); + } + } + else { + module.verbose('All items filtered, hiding dropdown', searchTerm); + module.hideMenu(); + } + } + else { + module.remove.empty(); + module.remove.message(); + } + if(settings.allowAdditions) { + module.add.userSuggestion(query); + } + if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) { + module.show(); + } + } + ; + if(settings.useLabels && module.has.maxSelections()) { + return; + } + if(settings.apiSettings) { + if( module.can.useAPI() ) { + module.queryRemote(searchTerm, function() { + if(settings.filterRemoteData) { + module.filterItems(searchTerm); + } + afterFiltered(); + }); + } + else { + module.error(error.noAPI); + } + } + else { + module.filterItems(searchTerm); + afterFiltered(); + } + }, + + queryRemote: function(query, callback) { + var + apiSettings = { + errorDuration : false, + cache : 'local', + throttle : settings.throttle, + urlData : { + query: query + }, + onError: function() { + module.add.message(message.serverError); + callback(); + }, + onFailure: function() { + module.add.message(message.serverError); + callback(); + }, + onSuccess : function(response) { + var + values = response[fields.remoteValues], + hasRemoteValues = ($.isArray(values) && values.length > 0) + ; + if(hasRemoteValues) { + module.remove.message(); + module.setup.menu({ + values: response[fields.remoteValues] + }); + } + else { + module.add.message(message.noResults); + } + callback(); + } + } + ; + if( !$module.api('get request') ) { + module.setup.api(); + } + apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings); + $module + .api('setting', apiSettings) + .api('query') + ; + }, + + filterItems: function(query) { + var + searchTerm = (query !== undefined) + ? query + : module.get.query(), + results = null, + escapedTerm = module.escape.string(searchTerm), + beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm') + ; + // avoid loop if we're matching nothing + if( module.has.query() ) { + results = []; + + module.verbose('Searching for matching values', searchTerm); + $item + .each(function(){ + var + $choice = $(this), + text, + value + ; + if(settings.match == 'both' || settings.match == 'text') { + text = String(module.get.choiceText($choice, false)); + if(text.search(beginsWithRegExp) !== -1) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text)) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, text)) { + results.push(this); + return true; + } + } + if(settings.match == 'both' || settings.match == 'value') { + value = String(module.get.choiceValue($choice, text)); + if(value.search(beginsWithRegExp) !== -1) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, value)) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, value)) { + results.push(this); + return true; + } + } + }) + ; + } + module.debug('Showing only matched items', searchTerm); + module.remove.filteredItem(); + if(results) { + $item + .not(results) + .addClass(className.filtered) + ; + } + }, + + fuzzySearch: function(query, term) { + var + termLength = term.length, + queryLength = query.length + ; + query = query.toLowerCase(); + term = term.toLowerCase(); + if(queryLength > termLength) { + return false; + } + if(queryLength === termLength) { + return (query === term); + } + search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) { + var + queryCharacter = query.charCodeAt(characterIndex) + ; + while(nextCharacterIndex < termLength) { + if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) { + continue search; + } + } + return false; + } + return true; + }, + exactSearch: function (query, term) { + query = query.toLowerCase(); + term = term.toLowerCase(); + if(term.indexOf(query) > -1) { + return true; + } + return false; + }, + filterActive: function() { + if(settings.useLabels) { + $item.filter('.' + className.active) + .addClass(className.filtered) + ; + } + }, + + focusSearch: function(skipHandler) { + if( module.has.search() && !module.is.focusedOnSearch() ) { + if(skipHandler) { + $module.off('focus' + eventNamespace, selector.search); + $search.focus(); + $module.on('focus' + eventNamespace, selector.search, module.event.search.focus); + } + else { + $search.focus(); + } + } + }, + + forceSelection: function() { + var + $currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0), + $activeItem = $item.not(className.filtered).filter('.' + className.active).eq(0), + $selectedItem = ($currentlySelected.length > 0) + ? $currentlySelected + : $activeItem, + hasSelected = ($selectedItem.length > 0) + ; + if(hasSelected && !module.is.multiple()) { + module.debug('Forcing partial selection to selected item', $selectedItem); + module.event.item.click.call($selectedItem, {}, true); + return; + } + else { + if(settings.allowAdditions) { + module.set.selected(module.get.query()); + module.remove.searchTerm(); + } + else { + module.remove.searchTerm(); + } + } + }, + + change: { + values: function(values) { + if(!settings.allowAdditions) { + module.clear(); + } + module.debug('Creating dropdown with specified values', values); + module.setup.menu({values: values}); + $.each(values, function(index, item) { + if(item.selected == true) { + module.debug('Setting initial selection to', item.value); + module.set.selected(item.value); + return true; + } + }); + } + }, + + event: { + change: function() { + if(!internalChange) { + module.debug('Input changed, updating selection'); + module.set.selected(); + } + }, + focus: function() { + if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { + module.show(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(!activated && !pageLostFocus) { + module.remove.activeLabel(); + module.hide(); + } + }, + mousedown: function() { + if(module.is.searchSelection()) { + // prevent menu hiding on immediate re-focus + willRefocus = true; + } + else { + // prevents focus callback from occurring on mousedown + activated = true; + } + }, + mouseup: function() { + if(module.is.searchSelection()) { + // prevent menu hiding on immediate re-focus + willRefocus = false; + } + else { + activated = false; + } + }, + click: function(event) { + var + $target = $(event.target) + ; + // focus search + if($target.is($module)) { + if(!module.is.focusedOnSearch()) { + module.focusSearch(); + } + else { + module.show(); + } + } + }, + search: { + focus: function() { + activated = true; + if(module.is.multiple()) { + module.remove.activeLabel(); + } + if(settings.showOnFocus) { + module.search(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(module.is.searchSelection() && !willRefocus) { + if(!itemActivated && !pageLostFocus) { + if(settings.forceSelection) { + module.forceSelection(); + } + module.hide(); + } + } + willRefocus = false; + } + }, + icon: { + click: function(event) { + if($icon.hasClass(className.clear)) { + module.clear(); + } + else if (module.can.click()) { + module.toggle(); + } + } + }, + text: { + focus: function(event) { + activated = true; + module.focusSearch(); + } + }, + input: function(event) { + if(module.is.multiple() || module.is.searchSelection()) { + module.set.filtered(); + } + clearTimeout(module.timer); + module.timer = setTimeout(module.search, settings.delay.search); + }, + label: { + click: function(event) { + var + $label = $(this), + $labels = $module.find(selector.label), + $activeLabels = $labels.filter('.' + className.active), + $nextActive = $label.nextAll('.' + className.active), + $prevActive = $label.prevAll('.' + className.active), + $range = ($nextActive.length > 0) + ? $label.nextUntil($nextActive).add($activeLabels).add($label) + : $label.prevUntil($prevActive).add($activeLabels).add($label) + ; + if(event.shiftKey) { + $activeLabels.removeClass(className.active); + $range.addClass(className.active); + } + else if(event.ctrlKey) { + $label.toggleClass(className.active); + } + else { + $activeLabels.removeClass(className.active); + $label.addClass(className.active); + } + settings.onLabelSelect.apply(this, $labels.filter('.' + className.active)); + } + }, + remove: { + click: function() { + var + $label = $(this).parent() + ; + if( $label.hasClass(className.active) ) { + // remove all selected labels + module.remove.activeLabels(); + } + else { + // remove this label only + module.remove.activeLabels( $label ); + } + } + }, + test: { + toggle: function(event) { + var + toggleBehavior = (module.is.multiple()) + ? module.show + : module.toggle + ; + if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) { + return; + } + if( module.determine.eventOnElement(event, toggleBehavior) ) { + event.preventDefault(); + } + }, + touch: function(event) { + module.determine.eventOnElement(event, function() { + if(event.type == 'touchstart') { + module.timer = setTimeout(function() { + module.hide(); + }, settings.delay.touch); + } + else if(event.type == 'touchmove') { + clearTimeout(module.timer); + } + }); + event.stopPropagation(); + }, + hide: function(event) { + module.determine.eventInModule(event, module.hide); + } + }, + select: { + mutation: function(mutations) { + module.debug(' removing selected option', removedValue); + newValue = module.remove.arrayValue(removedValue, values); + module.remove.optionValue(removedValue); + } + else { + module.verbose('Removing from delimited values', removedValue); + newValue = module.remove.arrayValue(removedValue, values); + newValue = newValue.join(settings.delimiter); + } + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.verbose('No callback on initial load', settings.onRemove); + } + else { + settings.onRemove.call(element, removedValue, removedText, $removedItem); + } + module.set.value(newValue, removedText, $removedItem); + module.check.maxSelections(); + }, + arrayValue: function(removedValue, values) { + if( !$.isArray(values) ) { + values = [values]; + } + values = $.grep(values, function(value){ + return (removedValue != value); + }); + module.verbose('Removed value from delimited string', removedValue, values); + return values; + }, + label: function(value, shouldAnimate) { + var + $labels = $module.find(selector.label), + $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(value) +'"]') + ; + module.verbose('Removing label', $removedLabel); + $removedLabel.remove(); + }, + activeLabels: function($activeLabels) { + $activeLabels = $activeLabels || $module.find(selector.label).filter('.' + className.active); + module.verbose('Removing active label selections', $activeLabels); + module.remove.labels($activeLabels); + }, + labels: function($labels) { + $labels = $labels || $module.find(selector.label); + module.verbose('Removing labels', $labels); + $labels + .each(function(){ + var + $label = $(this), + value = $label.data(metadata.value), + stringValue = (value !== undefined) + ? String(value) + : value, + isUserValue = module.is.userValue(stringValue) + ; + if(settings.onLabelRemove.call($label, value) === false) { + module.debug('Label remove callback cancelled removal'); + return; + } + module.remove.message(); + if(isUserValue) { + module.remove.value(stringValue); + module.remove.label(stringValue); + } + else { + // selected will also remove label + module.remove.selected(stringValue); + } + }) + ; + }, + tabbable: function() { + if( module.is.searchSelection() ) { + module.debug('Searchable dropdown initialized'); + $search + .removeAttr('tabindex') + ; + $menu + .removeAttr('tabindex') + ; + } + else { + module.debug('Simple selection dropdown initialized'); + $module + .removeAttr('tabindex') + ; + $menu + .removeAttr('tabindex') + ; + } + }, + clearable: function() { + $icon.removeClass(className.clear); + } + }, + + has: { + menuSearch: function() { + return (module.has.search() && $search.closest($menu).length > 0); + }, + search: function() { + return ($search.length > 0); + }, + sizer: function() { + return ($sizer.length > 0); + }, + selectInput: function() { + return ( $input.is('select') ); + }, + minCharacters: function(searchTerm) { + if(settings.minCharacters) { + searchTerm = (searchTerm !== undefined) + ? String(searchTerm) + : String(module.get.query()) + ; + return (searchTerm.length >= settings.minCharacters); + } + return true; + }, + firstLetter: function($item, letter) { + var + text, + firstLetter + ; + if(!$item || $item.length === 0 || typeof letter !== 'string') { + return false; + } + text = module.get.choiceText($item, false); + letter = letter.toLowerCase(); + firstLetter = String(text).charAt(0).toLowerCase(); + return (letter == firstLetter); + }, + input: function() { + return ($input.length > 0); + }, + items: function() { + return ($item.length > 0); + }, + menu: function() { + return ($menu.length > 0); + }, + message: function() { + return ($menu.children(selector.message).length !== 0); + }, + label: function(value) { + var + escapedValue = module.escape.value(value), + $labels = $module.find(selector.label) + ; + if(settings.ignoreCase) { + escapedValue = escapedValue.toLowerCase(); + } + return ($labels.filter('[data-' + metadata.value + '="' + module.escape.string(escapedValue) +'"]').length > 0); + }, + maxSelections: function() { + return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections); + }, + allResultsFiltered: function() { + var + $normalResults = $item.not(selector.addition) + ; + return ($normalResults.filter(selector.unselectable).length === $normalResults.length); + }, + userSuggestion: function() { + return ($menu.children(selector.addition).length > 0); + }, + query: function() { + return (module.get.query() !== ''); + }, + value: function(value) { + return (settings.ignoreCase) + ? module.has.valueIgnoringCase(value) + : module.has.valueMatchingCase(value) + ; + }, + valueMatchingCase: function(value) { + var + values = module.get.values(), + hasValue = $.isArray(values) + ? values && ($.inArray(value, values) !== -1) + : (values == value) + ; + return (hasValue) + ? true + : false + ; + }, + valueIgnoringCase: function(value) { + var + values = module.get.values(), + hasValue = false + ; + if(!$.isArray(values)) { + values = [values]; + } + $.each(values, function(index, existingValue) { + if(String(value).toLowerCase() == String(existingValue).toLowerCase()) { + hasValue = true; + return false; + } + }); + return hasValue; + } + }, + + is: { + active: function() { + return $module.hasClass(className.active); + }, + animatingInward: function() { + return $menu.transition('is inward'); + }, + animatingOutward: function() { + return $menu.transition('is outward'); + }, + bubbledLabelClick: function(event) { + return $(event.target).is('select, input') && $module.closest('label').length > 0; + }, + bubbledIconClick: function(event) { + return $(event.target).closest($icon).length > 0; + }, + alreadySetup: function() { + return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0); + }, + animating: function($subMenu) { + return ($subMenu) + ? $subMenu.transition && $subMenu.transition('is animating') + : $menu.transition && $menu.transition('is animating') + ; + }, + leftward: function($subMenu) { + var $selectedMenu = $subMenu || $menu; + return $selectedMenu.hasClass(className.leftward); + }, + disabled: function() { + return $module.hasClass(className.disabled); + }, + focused: function() { + return (document.activeElement === $module[0]); + }, + focusedOnSearch: function() { + return (document.activeElement === $search[0]); + }, + allFiltered: function() { + return( (module.is.multiple() || module.has.search()) && !(settings.hideAdditions == false && module.has.userSuggestion()) && !module.has.message() && module.has.allResultsFiltered() ); + }, + hidden: function($subMenu) { + return !module.is.visible($subMenu); + }, + initialLoad: function() { + return initialLoad; + }, + inObject: function(needle, object) { + var + found = false + ; + $.each(object, function(index, property) { + if(property == needle) { + found = true; + return true; + } + }); + return found; + }, + multiple: function() { + return $module.hasClass(className.multiple); + }, + remote: function() { + return settings.apiSettings && module.can.useAPI(); + }, + single: function() { + return !module.is.multiple(); + }, + selectMutation: function(mutations) { + var + selectChanged = false + ; + $.each(mutations, function(index, mutation) { + if(mutation.target && $(mutation.target).is('select')) { + selectChanged = true; + return true; + } + }); + return selectChanged; + }, + search: function() { + return $module.hasClass(className.search); + }, + searchSelection: function() { + return ( module.has.search() && $search.parent(selector.dropdown).length === 1 ); + }, + selection: function() { + return $module.hasClass(className.selection); + }, + userValue: function(value) { + return ($.inArray(value, module.get.userValues()) !== -1); + }, + upward: function($menu) { + var $element = $menu || $module; + return $element.hasClass(className.upward); + }, + visible: function($subMenu) { + return ($subMenu) + ? $subMenu.hasClass(className.visible) + : $menu.hasClass(className.visible) + ; + }, + verticallyScrollableContext: function() { + var + overflowY = ($context.get(0) !== window) + ? $context.css('overflow-y') + : false + ; + return (overflowY == 'auto' || overflowY == 'scroll'); + }, + horizontallyScrollableContext: function() { + var + overflowX = ($context.get(0) !== window) + ? $context.css('overflow-X') + : false + ; + return (overflowX == 'auto' || overflowX == 'scroll'); + } + }, + + can: { + activate: function($item) { + if(settings.useLabels) { + return true; + } + if(!module.has.maxSelections()) { + return true; + } + if(module.has.maxSelections() && $item.hasClass(className.active)) { + return true; + } + return false; + }, + openDownward: function($subMenu) { + var + $currentMenu = $subMenu || $menu, + canOpenDownward = true, + onScreen = {}, + calculations + ; + $currentMenu + .addClass(className.loading) + ; + calculations = { + context: { + offset : ($context.get(0) === window) + ? { top: 0, left: 0} + : $context.offset(), + scrollTop : $context.scrollTop(), + height : $context.outerHeight() + }, + menu : { + offset: $currentMenu.offset(), + height: $currentMenu.outerHeight() + } + }; + if(module.is.verticallyScrollableContext()) { + calculations.menu.offset.top += calculations.context.scrollTop; + } + onScreen = { + above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.context.offset.top - calculations.menu.height, + below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top - calculations.context.offset.top + calculations.menu.height + }; + if(onScreen.below) { + module.verbose('Dropdown can fit in context downward', onScreen); + canOpenDownward = true; + } + else if(!onScreen.below && !onScreen.above) { + module.verbose('Dropdown cannot fit in either direction, favoring downward', onScreen); + canOpenDownward = true; + } + else { + module.verbose('Dropdown cannot fit below, opening upward', onScreen); + canOpenDownward = false; + } + $currentMenu.removeClass(className.loading); + return canOpenDownward; + }, + openRightward: function($subMenu) { + var + $currentMenu = $subMenu || $menu, + canOpenRightward = true, + isOffscreenRight = false, + calculations + ; + $currentMenu + .addClass(className.loading) + ; + calculations = { + context: { + offset : ($context.get(0) === window) + ? { top: 0, left: 0} + : $context.offset(), + scrollLeft : $context.scrollLeft(), + width : $context.outerWidth() + }, + menu: { + offset : $currentMenu.offset(), + width : $currentMenu.outerWidth() + } + }; + if(module.is.horizontallyScrollableContext()) { + calculations.menu.offset.left += calculations.context.scrollLeft; + } + isOffscreenRight = (calculations.menu.offset.left - calculations.context.offset.left + calculations.menu.width >= calculations.context.scrollLeft + calculations.context.width); + if(isOffscreenRight) { + module.verbose('Dropdown cannot fit in context rightward', isOffscreenRight); + canOpenRightward = false; + } + $currentMenu.removeClass(className.loading); + return canOpenRightward; + }, + click: function() { + return (hasTouch || settings.on == 'click'); + }, + extendSelect: function() { + return settings.allowAdditions || settings.apiSettings; + }, + show: function() { + return !module.is.disabled() && (module.has.items() || module.has.message()); + }, + useAPI: function() { + return $.fn.api !== undefined; + } + }, + + animate: { + show: function(callback, $subMenu) { + var + $currentMenu = $subMenu || $menu, + start = ($subMenu) + ? function() {} + : function() { + module.hideSubMenus(); + module.hideOthers(); + module.set.active(); + }, + transition + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.verbose('Doing menu show animation', $currentMenu); + module.set.direction($subMenu); + transition = module.get.transition($subMenu); + if( module.is.selection() ) { + module.set.scrollPosition(module.get.selectedItem(), true); + } + if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) { + if(transition == 'none') { + start(); + $currentMenu.transition('show'); + callback.call(element); + } + else if($.fn.transition !== undefined && $module.transition('is supported')) { + $currentMenu + .transition({ + animation : transition + ' in', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + queue : true, + onStart : start, + onComplete : function() { + callback.call(element); + } + }) + ; + } + else { + module.error(error.noTransition, transition); + } + } + }, + hide: function(callback, $subMenu) { + var + $currentMenu = $subMenu || $menu, + duration = ($subMenu) + ? (settings.duration * 0.9) + : settings.duration, + start = ($subMenu) + ? function() {} + : function() { + if( module.can.click() ) { + module.unbind.intent(); + } + module.remove.active(); + }, + transition = module.get.transition($subMenu) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) { + module.verbose('Doing menu hide animation', $currentMenu); + + if(transition == 'none') { + start(); + $currentMenu.transition('hide'); + callback.call(element); + } + else if($.fn.transition !== undefined && $module.transition('is supported')) { + $currentMenu + .transition({ + animation : transition + ' out', + duration : settings.duration, + debug : settings.debug, + verbose : settings.verbose, + queue : false, + onStart : start, + onComplete : function() { + callback.call(element); + } + }) + ; + } + else { + module.error(error.transition); + } + } + } + }, + + hideAndClear: function() { + module.remove.searchTerm(); + if( module.has.maxSelections() ) { + return; + } + if(module.has.search()) { + module.hide(function() { + module.remove.filteredItem(); + }); + } + else { + module.hide(); + } + }, + + delay: { + show: function() { + module.verbose('Delaying show event to ensure user intent'); + clearTimeout(module.timer); + module.timer = setTimeout(module.show, settings.delay.show); + }, + hide: function() { + module.verbose('Delaying hide event to ensure user intent'); + clearTimeout(module.timer); + module.timer = setTimeout(module.hide, settings.delay.hide); + } + }, + + escape: { + value: function(value) { + var + multipleValues = $.isArray(value), + stringValue = (typeof value === 'string'), + isUnparsable = (!stringValue && !multipleValues), + hasQuotes = (stringValue && value.search(regExp.quote) !== -1), + values = [] + ; + if(isUnparsable || !hasQuotes) { + return value; + } + module.debug('Encoding quote values for use in select', value); + if(multipleValues) { + $.each(value, function(index, value){ + values.push(value.replace(regExp.quote, '"')); + }); + return values; + } + return value.replace(regExp.quote, '"'); + }, + string: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : $allModules + ; +}; + +$.fn.dropdown.settings = { + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // what event should show menu action on item selection + action : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){}) + + values : false, // specify values to use for dropdown + + clearable : false, // whether the value of the dropdown can be cleared + + apiSettings : false, + selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used + minCharacters : 0, // Minimum characters required to trigger API call + + filterRemoteData : false, // Whether API results should be filtered after being returned for query term + saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh + + throttle : 200, // How long to wait after last user input to search remotely + + context : window, // Context to use when determining if on screen + direction : 'auto', // Whether dropdown should always open in one direction + keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing + + match : 'both', // what to match against with search selection (both, text, or label) + fullTextSearch : false, // search anywhere in value (set to 'exact' to require exact matches) + + placeholder : 'auto', // whether to convert blank the values will be delimited with this character + + showOnFocus : true, // show menu on focus + allowReselection : false, // whether current value should trigger callbacks when reselected + allowTab : true, // add tabindex to element + allowCategorySelection : false, // allow elements with sub-menus to be selected + + fireOnInit : false, // Whether callbacks should fire when initializing dropdown values + + transition : 'auto', // auto transition will slide down or up based on direction + duration : 200, // duration of transition + + glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width + + // label settings on multi-select + label: { + transition : 'scale', + duration : 200, + variation : false + }, + + // delay before event + delay : { + hide : 300, + show : 200, + search : 20, + touch : 50 + }, + + /* Callbacks */ + onChange : function(value, text, $selected){}, + onAdd : function(value, text, $selected){}, + onRemove : function(value, text, $selected){}, + + onLabelSelect : function($selectedLabels){}, + onLabelCreate : function(value, text) { return $(this); }, + onLabelRemove : function(value) { return true; }, + onNoResults : function(searchTerm) { return true; }, + onShow : function(){}, + onHide : function(){}, + + /* Component */ + name : 'Dropdown', + namespace : 'dropdown', + + message: { + addResult : 'Add {term}', + count : '{count} selected', + maxSelections : 'Max {maxCount} selections', + noResults : 'No results found.', + serverError : 'There was an error contacting the server' + }, + + error : { + action : 'You called a dropdown action that was not defined', + alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown', + labels : 'Allowing user additions currently requires the use of labels.', + missingMultiple : ' removing selected option",e),i=m.remove.arrayValue(e,a),m.remove.optionValue(e)):(m.verbose("Removing from delimited values",e),i=(i=m.remove.arrayValue(e,a)).join(h.delimiter)),!1===h.fireOnInit&&m.is.initialLoad()?m.verbose("No callback on initial load",h.onRemove):h.onRemove.call(M,e,t,n),m.set.value(i,t,n),m.check.maxSelections()},arrayValue:function(t,e){return X.isArray(e)||(e=[e]),e=X.grep(e,function(e){return t!=e}),m.verbose("Removed value from delimited string",t,e),e},label:function(e,t){var n=S.find(w.label).filter("[data-"+b.value+'="'+m.escape.string(e)+'"]');m.verbose("Removing label",n),n.remove()},activeLabels:function(e){e=e||S.find(w.label).filter("."+g.active),m.verbose("Removing active label selections",e),m.remove.labels(e)},labels:function(e){e=e||S.find(w.label),m.verbose("Removing labels",e),e.each(function(){var e=X(this),t=e.data(b.value),n=t!==J?String(t):t,i=m.is.userValue(n);!1!==h.onLabelRemove.call(e,t)?(m.remove.message(),i?(m.remove.value(n),m.remove.label(n)):m.remove.selected(n)):m.debug("Label remove callback cancelled removal")})},tabbable:function(){m.is.searchSelection()?(m.debug("Searchable dropdown initialized"),T.removeAttr("tabindex")):(m.debug("Simple selection dropdown initialized"),S.removeAttr("tabindex")),q.removeAttr("tabindex")},clearable:function(){I.removeClass(g.clear)}},has:{menuSearch:function(){return m.has.search()&&0=h.minCharacters},firstLetter:function(e,t){var n;return!(!e||0===e.length||"string"!=typeof t)&&(n=m.get.choiceText(e,!1),(t=t.toLowerCase())==String(n).charAt(0).toLowerCase())},input:function(){return 0=h.maxSelections},allResultsFiltered:function(){var e=R.not(w.addition);return e.filter(w.unselectable).length===e.length},userSuggestion:function(){return 0=n.menu.offset.top-n.context.offset.top+n.menu.height}).below?(m.verbose("Dropdown can fit in context downward",t),!0):t.below||t.above?(m.verbose("Dropdown cannot fit below, opening upward",t),!1):(m.verbose("Dropdown cannot fit in either direction, favoring downward",t),!0),i.removeClass(g.loading),a},openRightward:function(e){var t,n,i=e||q,a=!0;return i.addClass(g.loading),n={context:{offset:y.get(0)===Y?{top:0,left:0}:y.offset(),scrollLeft:y.scrollLeft(),width:y.outerWidth()},menu:{offset:i.offset(),width:i.outerWidth()}},m.is.horizontallyScrollableContext()&&(n.menu.offset.left+=n.context.scrollLeft),(t=n.menu.offset.left-n.context.offset.left+n.menu.width>=n.context.scrollLeft+n.context.width)&&(m.verbose("Dropdown cannot fit in context rightward",t),a=!1),i.removeClass(g.loading),a},click:function(){return U||"click"==h.on},extendSelect:function(){return h.allowAdditions||h.apiSettings},show:function(){return!m.is.disabled()&&(m.has.items()||m.has.message())},useAPI:function(){return X.fn.api!==J}},animate:{show:function(e,t){var n,i=t||q,a=t?function(){}:function(){m.hideSubMenus(),m.hideOthers(),m.set.active()};e=X.isFunction(e)?e:function(){},m.verbose("Doing menu show animation",i),m.set.direction(t),n=m.get.transition(t),m.is.selection()&&m.set.scrollPosition(m.get.selectedItem(),!0),(m.is.hidden(i)||m.is.animating(i))&&("none"==n?(a(),i.transition("show"),e.call(M)):X.fn.transition!==J&&S.transition("is supported")?i.transition({animation:n+" in",debug:h.debug,verbose:h.verbose,duration:h.duration,queue:!0,onStart:a,onComplete:function(){e.call(M)}}):m.error(v.noTransition,n))},hide:function(e,t){var n=t||q,i=(t?h.duration:h.duration,t?function(){}:function(){m.can.click()&&m.unbind.intent(),m.remove.active()}),a=m.get.transition(t);e=X.isFunction(e)?e:function(){},(m.is.visible(n)||m.is.animating(n))&&(m.verbose("Doing menu hide animation",n),"none"==a?(i(),n.transition("hide"),e.call(M)):X.fn.transition!==J&&S.transition("is supported")?n.transition({animation:a+" out",duration:h.duration,debug:h.debug,verbose:h.verbose,queue:!1,onStart:i,onComplete:function(){e.call(M)}}):m.error(v.transition))}},hideAndClear:function(){m.remove.searchTerm(),m.has.maxSelections()||(m.has.search()?m.hide(function(){m.remove.filteredItem()}):m.hide())},delay:{show:function(){m.verbose("Delaying show event to ensure user intent"),clearTimeout(m.timer),m.timer=setTimeout(m.show,h.delay.show)},hide:function(){m.verbose("Delaying hide event to ensure user intent"),clearTimeout(m.timer),m.timer=setTimeout(m.hide,h.delay.hide)}},escape:{value:function(e){var t=X.isArray(e),n="string"==typeof e,i=!n&&!t,a=n&&-1!==e.search(d.quote),o=[];return i||!a?e:(m.debug("Encoding quote values for use in select",e),t?(X.each(e,function(e,t){o.push(t.replace(d.quote,"""))}),o):e.replace(d.quote,"""))},string:function(e){return(e=String(e)).replace(d.escape,"\\$&")}},setting:function(e,t){if(m.debug("Changing setting",e,t),X.isPlainObject(e))X.extend(!0,h,e);else{if(t===J)return h[e];X.isPlainObject(h[e])?X.extend(!0,h[e],t):h[e]=t}},internal:function(e,t){if(X.isPlainObject(e))X.extend(!0,m,e);else{if(t===J)return m[e];m[e]=t}},debug:function(){!h.silent&&h.debug&&(h.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,h.name+":"),m.debug.apply(console,arguments)))},verbose:function(){!h.silent&&h.verbose&&h.debug&&(h.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,h.name+":"),m.verbose.apply(console,arguments)))},error:function(){h.silent||(m.error=Function.prototype.bind.call(console.error,console,h.name+":"),m.error.apply(console,arguments))},performance:{log:function(e){var t,n;h.performance&&(n=(t=(new Date).getTime())-(K||t),K=t,W.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:M,"Execution Time":n})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,500)},display:function(){var e=h.name+":",n=0;K=!1,clearTimeout(m.performance.timer),X.each(W,function(e,t){n+=t["Execution Time"]}),e+=" "+n+"ms",N&&(e+=" '"+N+"'"),(console.group!==J||console.table!==J)&&0{term}",count:"{count} selected",maxSelections:"Max {maxCount} selections",noResults:"No results found.",serverError:"There was an error contacting the server"},error:{action:"You called a dropdown action that was not defined",alreadySetup:"Once a select has been initialized behaviors must be called on the created ui dropdown",labels:"Allowing user additions currently requires the use of labels.",missingMultiple:"'); + }, + fields: function(fields) { + var + $fields = $() + ; + $.each(fields, function(index, name) { + $fields = $fields.add( module.get.field(name) ); + }); + return $fields; + }, + validation: function($field) { + var + fieldValidation, + identifier + ; + if(!validation) { + return false; + } + $.each(validation, function(fieldName, field) { + identifier = field.identifier || fieldName; + if( module.get.field(identifier)[0] == $field[0] ) { + field.identifier = identifier; + fieldValidation = field; + } + }); + return fieldValidation || false; + }, + value: function (field) { + var + fields = [], + results + ; + fields.push(field); + results = module.get.values.call(element, fields); + return results[field]; + }, + values: function (fields) { + var + $fields = $.isArray(fields) + ? module.get.fields(fields) + : $field, + values = {} + ; + $fields.each(function(index, field) { + var + $field = $(field), + type = $field.prop('type'), + name = $field.prop('name'), + value = $field.val(), + isCheckbox = $field.is(selector.checkbox), + isRadio = $field.is(selector.radio), + isMultiple = (name.indexOf('[]') !== -1), + isChecked = (isCheckbox) + ? $field.is(':checked') + : false + ; + if(name) { + if(isMultiple) { + name = name.replace('[]', ''); + if(!values[name]) { + values[name] = []; + } + if(isCheckbox) { + if(isChecked) { + values[name].push(value || true); + } + else { + values[name].push(false); + } + } + else { + values[name].push(value); + } + } + else { + if(isRadio) { + if(values[name] === undefined || values[name] == false) { + values[name] = (isChecked) + ? value || true + : false + ; + } + } + else if(isCheckbox) { + if(isChecked) { + values[name] = value || true; + } + else { + values[name] = false; + } + } + else { + values[name] = value; + } + } + } + }); + return values; + } + }, + + has: { + + field: function(identifier) { + module.verbose('Checking for existence of a field with identifier', identifier); + identifier = module.escape.string(identifier); + if(typeof identifier !== 'string') { + module.error(error.identifier, identifier); + } + if($field.filter('#' + identifier).length > 0 ) { + return true; + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return true; + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return true; + } + return false; + } + + }, + + escape: { + string: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + + add: { + // alias + rule: function(name, rules) { + module.add.field(name, rules); + }, + field: function(name, rules) { + var + newValidation = {} + ; + if(module.is.shorthandRules(rules)) { + rules = $.isArray(rules) + ? rules + : [rules] + ; + newValidation[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + newValidation[name].rules.push({ type: rule }); + }); + } + else { + newValidation[name] = rules; + } + validation = $.extend({}, validation, newValidation); + module.debug('Adding rules', newValidation, validation); + }, + fields: function(fields) { + var + newValidation + ; + if(fields && module.is.shorthandFields(fields)) { + newValidation = module.get.fieldsFromShorthand(fields); + } + else { + newValidation = fields; + } + validation = $.extend({}, validation, newValidation); + }, + prompt: function(identifier, errors) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt), + promptExists = ($prompt.length !== 0) + ; + errors = (typeof errors == 'string') + ? [errors] + : errors + ; + module.verbose('Adding field error state', identifier); + $fieldGroup + .addClass(className.error) + ; + if(settings.inline) { + if(!promptExists) { + $prompt = settings.templates.prompt(errors); + $prompt + .appendTo($fieldGroup) + ; + } + $prompt + .html(errors[0]) + ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } + } + else { + module.verbose('Inline errors are disabled, no inline error added', identifier); + } + } + }, + errors: function(errors) { + module.debug('Adding form error messages', errors); + module.set.error(); + $message + .html( settings.templates.error(errors) ) + ; + } + }, + + remove: { + rule: function(field, rule) { + var + rules = $.isArray(rule) + ? rule + : [rule] + ; + if(rule == undefined) { + module.debug('Removed all rules'); + validation[field].rules = []; + return; + } + if(validation[field] == undefined || !$.isArray(validation[field].rules)) { + return; + } + $.each(validation[field].rules, function(index, rule) { + if(rules.indexOf(rule.type) !== -1) { + module.debug('Removed rule', rule.type); + validation[field].rules.splice(index, 1); + } + }); + }, + field: function(field) { + var + fields = $.isArray(field) + ? field + : [field] + ; + $.each(fields, function(index, field) { + module.remove.rule(field); + }); + }, + // alias + rules: function(field, rules) { + if($.isArray(field)) { + $.each(fields, function(index, field) { + module.remove.rule(field, rules); + }); + } + else { + module.remove.rule(field, rules); + } + }, + fields: function(fields) { + module.remove.field(fields); + }, + prompt: function(identifier) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt) + ; + $fieldGroup + .removeClass(className.error) + ; + if(settings.inline && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', identifier); + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } + } + } + }, + + set: { + success: function() { + $module + .removeClass(className.error) + .addClass(className.success) + ; + }, + defaults: function () { + $field + .each(function () { + var + $field = $(this), + isCheckbox = ($field.filter(selector.checkbox).length > 0), + value = (isCheckbox) + ? $field.is(':checked') + : $field.val() + ; + $field.data(metadata.defaultValue, value); + }) + ; + }, + error: function() { + $module + .removeClass(className.success) + .addClass(className.error) + ; + }, + value: function (field, value) { + var + fields = {} + ; + fields[field] = value; + return module.set.values.call(element, fields); + }, + values: function (fields) { + if($.isEmptyObject(fields)) { + return; + } + $.each(fields, function(key, value) { + var + $field = module.get.field(key), + $element = $field.parent(), + isMultiple = $.isArray(value), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isRadio = ($field.is(selector.radio) && isCheckbox), + fieldExists = ($field.length > 0), + $multipleField + ; + if(fieldExists) { + if(isMultiple && isCheckbox) { + module.verbose('Selecting multiple', value, $field); + $element.checkbox('uncheck'); + $.each(value, function(index, value) { + $multipleField = $field.filter('[value="' + value + '"]'); + $element = $multipleField.parent(); + if($multipleField.length > 0) { + $element.checkbox('check'); + } + }); + } + else if(isRadio) { + module.verbose('Selecting radio value', value, $field); + $field.filter('[value="' + value + '"]') + .parent(selector.uiCheckbox) + .checkbox('check') + ; + } + else if(isCheckbox) { + module.verbose('Setting checkbox value', value, $element); + if(value === true) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else if(isDropdown) { + module.verbose('Setting dropdown value', value, $element); + $element.dropdown('set selected', value); + } + else { + module.verbose('Setting field value', value, $field); + $field.val(value); + } + } + }); + } + }, + + validate: { + + form: function(event, ignoreCallbacks) { + var + values = module.get.values(), + apiRequest + ; + + // input keydown event will fire submit repeatedly by browser default + if(keyHeldDown) { + return false; + } + + // reset errors + formErrors = []; + if( module.determine.isValid() ) { + module.debug('Form has no validation errors, submitting'); + module.set.success(); + if(ignoreCallbacks !== true) { + return settings.onSuccess.call(element, event, values); + } + } + else { + module.debug('Form has errors'); + module.set.error(); + if(!settings.inline) { + module.add.errors(formErrors); + } + // prevent ajax submit + if($module.data('moduleApi') !== undefined) { + event.stopImmediatePropagation(); + } + if(ignoreCallbacks !== true) { + return settings.onFailure.call(element, formErrors, values); + } + } + }, + + // takes a validation object and returns whether field passes validation + field: function(field, fieldName, showErrors) { + showErrors = (showErrors !== undefined) + ? showErrors + : true + ; + if(typeof field == 'string') { + module.verbose('Validating field', field); + fieldName = field; + field = validation[field]; + } + var + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), + $dependsField = (field.depends) + ? module.get.field(field.depends) + : false, + fieldValid = true, + fieldErrors = [] + ; + if(!field.identifier) { + module.debug('Using field name as identifier', identifier); + field.identifier = identifier; + } + if($field.prop('disabled')) { + module.debug('Field is disabled. Skipping', identifier); + fieldValid = true; + } + else if(field.optional && module.is.blank($field)){ + module.debug('Field is optional and blank. Skipping', identifier); + fieldValid = true; + } + else if(field.depends && module.is.empty($dependsField)) { + module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField); + fieldValid = true; + } + else if(field.rules !== undefined) { + $.each(field.rules, function(index, rule) { + if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) { + module.debug('Field is invalid', identifier, rule.type); + fieldErrors.push(module.get.prompt(rule, field)); + fieldValid = false; + } + }); + } + if(fieldValid) { + if(showErrors) { + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); + } + } + else { + if(showErrors) { + formErrors = formErrors.concat(fieldErrors); + module.add.prompt(identifier, fieldErrors); + settings.onInvalid.call($field, fieldErrors); + } + return false; + } + return true; + }, + + // takes validation rule and returns whether field passes rule + rule: function(field, rule) { + var + $field = module.get.field(field.identifier), + type = rule.type, + value = $field.val(), + isValid = true, + ancillary = module.get.ancillaryValue(rule), + ruleName = module.get.ruleName(rule), + ruleFunction = settings.rules[ruleName] + ; + if( !$.isFunction(ruleFunction) ) { + module.error(error.noRule, ruleName); + return; + } + // cast to string avoiding encoding special values + value = (value === undefined || value === '' || value === null) + ? '' + : $.trim(value + '') + ; + return ruleFunction.call($field, value, ancillary); + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + module.initialize(); + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.form.settings = { + + name : 'Form', + namespace : 'form', + + debug : false, + verbose : false, + performance : true, + + fields : false, + + keyboardShortcuts : true, + on : 'submit', + inline : false, + + delay : 200, + revalidate : true, + + transition : 'scale', + duration : 200, + + onValid : function() {}, + onInvalid : function() {}, + onSuccess : function() { return true; }, + onFailure : function() { return false; }, + + metadata : { + defaultValue : 'default', + validate : 'validate' + }, + + regExp: { + htmlID : /^[a-zA-Z][\w:.-]*$/g, + bracket : /\[(.*)\]/i, + decimal : /^\d+\.?\d*$/, + email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i, + escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, + flags : /^\/(.*)\/(.*)?/, + integer : /^\-?\d+$/, + number : /^\-?\d*(\.\d+)?$/, + url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i + }, + + text: { + unspecifiedRule : 'Please enter a valid value', + unspecifiedField : 'This field' + }, + + prompt: { + empty : '{name} must have a value', + checked : '{name} must be checked', + email : '{name} must be a valid e-mail', + url : '{name} must be a valid url', + regExp : '{name} is not formatted correctly', + integer : '{name} must be an integer', + decimal : '{name} must be a decimal number', + number : '{name} must be set to a number', + is : '{name} must be "{ruleValue}"', + isExactly : '{name} must be exactly "{ruleValue}"', + not : '{name} cannot be set to "{ruleValue}"', + notExactly : '{name} cannot be set to exactly "{ruleValue}"', + contain : '{name} must contain "{ruleValue}"', + containExactly : '{name} must contain exactly "{ruleValue}"', + doesntContain : '{name} cannot contain "{ruleValue}"', + doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"', + minLength : '{name} must be at least {ruleValue} characters', + length : '{name} must be at least {ruleValue} characters', + exactLength : '{name} must be exactly {ruleValue} characters', + maxLength : '{name} cannot be longer than {ruleValue} characters', + match : '{name} must match {ruleValue} field', + different : '{name} must have a different value than {ruleValue} field', + creditCard : '{name} must be a valid credit card number', + minCount : '{name} must have at least {ruleValue} choices', + exactCount : '{name} must have exactly {ruleValue} choices', + maxCount : '{name} must have {ruleValue} or less choices' + }, + + selector : { + checkbox : 'input[type="checkbox"], input[type="radio"]', + clear : '.clear', + field : 'input, textarea, select', + group : '.field', + input : 'input', + message : '.error.message', + prompt : '.prompt.label', + radio : 'input[type="radio"]', + reset : '.reset:not([type="reset"])', + submit : '.submit:not([type="submit"])', + uiCheckbox : '.ui.checkbox', + uiDropdown : '.ui.dropdown' + }, + + className : { + error : 'error', + label : 'ui prompt label', + pressed : 'down', + success : 'success' + }, + + error: { + identifier : 'You must specify a string identifier for each field', + method : 'The method you called is not defined.', + noRule : 'There is no rule matching the one you specified', + oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.' + }, + + templates: { + + // template that produces error message + error: function(errors) { + var + html = '
    ' + ; + $.each(errors, function(index, value) { + html += '
  • ' + value + '
    • '; + }); + html += '
'; + return $(html); + }, + + // template that produces label + prompt: function(errors) { + return $('
') + .addClass('ui basic red pointing prompt label') + .html(errors[0]) + ; + } + }, + + rules: { + + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || $.isArray(value) && value.length === 0); + }, + + // checkbox checked + checked: function() { + return ($(this).filter(':checked').length > 0); + }, + + // is most likely an email + email: function(value){ + return $.fn.form.settings.regExp.email.test(value); + }, + + // value is most likely url + url: function(value) { + return $.fn.form.settings.regExp.url.test(value); + }, + + // matches specified regExp + regExp: function(value, regExp) { + if(regExp instanceof RegExp) { + return value.match(regExp); + } + var + regExpParts = regExp.match($.fn.form.settings.regExp.flags), + flags + ; + // regular expression specified as /baz/gi (flags) + if(regExpParts) { + regExp = (regExpParts.length >= 2) + ? regExpParts[1] + : regExp + ; + flags = (regExpParts.length >= 3) + ? regExpParts[2] + : '' + ; + } + return value.match( new RegExp(regExp, flags) ); + }, + + // is valid integer or matches range + integer: function(value, range) { + var + intRegExp = $.fn.form.settings.regExp.integer, + min, + max, + parts + ; + if( !range || ['', '..'].indexOf(range) !== -1) { + // do nothing + } + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { + min = max = range - 0; + } + } + else { + parts = range.split('..', 2); + if(intRegExp.test(parts[0])) { + min = parts[0] - 0; + } + if(intRegExp.test(parts[1])) { + max = parts[1] - 0; + } + } + return ( + intRegExp.test(value) && + (min === undefined || value >= min) && + (max === undefined || value <= max) + ); + }, + + // is valid number (with decimal) + decimal: function(value) { + return $.fn.form.settings.regExp.decimal.test(value); + }, + + // is valid number + number: function(value) { + return $.fn.form.settings.regExp.number.test(value); + }, + + // is value (case insensitive) + is: function(value, text) { + text = (typeof text == 'string') + ? text.toLowerCase() + : text + ; + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + return (value == text); + }, + + // is value + isExactly: function(value, text) { + return (value == text); + }, + + // value is not another value (case insensitive) + not: function(value, notValue) { + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + notValue = (typeof notValue == 'string') + ? notValue.toLowerCase() + : notValue + ; + return (value != notValue); + }, + + // value is not another value (case sensitive) + notExactly: function(value, notValue) { + return (value != notValue); + }, + + // value contains text (insensitive) + contains: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) !== -1); + }, + + // value contains text (case sensitive) + containsExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) !== -1); + }, + + // value contains text (insensitive) + doesntContain: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) === -1); + }, + + // value contains text (case sensitive) + doesntContainExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) === -1); + }, + + // is at least string length + minLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // see rls notes for 2.0.6 (this is a duplicate of minLength) + length: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // is exactly length + exactLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length == requiredLength) + : false + ; + }, + + // is less than length + maxLength: function(value, maxLength) { + return (value !== undefined) + ? (value.length <= maxLength) + : false + ; + }, + + // matches another field + match: function(value, identifier) { + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() == matchingValue.toString() ) + : false + ; + }, + + // different than another field + different: function(value, identifier) { + // use either id or name of field + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() !== matchingValue.toString() ) + : false + ; + }, + + creditCard: function(cardNumber, cardTypes) { + var + cards = { + visa: { + pattern : /^4/, + length : [16] + }, + amex: { + pattern : /^3[47]/, + length : [15] + }, + mastercard: { + pattern : /^5[1-5]/, + length : [16] + }, + discover: { + pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/, + length : [16] + }, + unionPay: { + pattern : /^(62|88)/, + length : [16, 17, 18, 19] + }, + jcb: { + pattern : /^35(2[89]|[3-8][0-9])/, + length : [16] + }, + maestro: { + pattern : /^(5018|5020|5038|6304|6759|676[1-3])/, + length : [12, 13, 14, 15, 16, 17, 18, 19] + }, + dinersClub: { + pattern : /^(30[0-5]|^36)/, + length : [14] + }, + laser: { + pattern : /^(6304|670[69]|6771)/, + length : [16, 17, 18, 19] + }, + visaElectron: { + pattern : /^(4026|417500|4508|4844|491(3|7))/, + length : [16] + } + }, + valid = {}, + validCard = false, + requiredTypes = (typeof cardTypes == 'string') + ? cardTypes.split(',') + : false, + unionPay, + validation + ; + + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // allow dashes in card + cardNumber = cardNumber.replace(/[\-]/g, ''); + + // verify card types + if(requiredTypes) { + $.each(requiredTypes, function(index, type){ + // verify each card type + validation = cards[type]; + if(validation) { + valid = { + length : ($.inArray(cardNumber.length, validation.length) !== -1), + pattern : (cardNumber.search(validation.pattern) !== -1) + }; + if(valid.length && valid.pattern) { + validCard = true; + } + } + }); + + if(!validCard) { + return false; + } + } + + // skip luhn for UnionPay + unionPay = { + number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1), + pattern : (cardNumber.search(cards.unionPay.pattern) !== -1) + }; + if(unionPay.number && unionPay.pattern) { + return true; + } + + // verify luhn, adapted from + var + length = cardNumber.length, + multiple = 0, + producedValue = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + [0, 2, 4, 6, 8, 1, 3, 5, 7, 9] + ], + sum = 0 + ; + while (length--) { + sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)]; + multiple ^= 1; + } + return (sum % 10 === 0 && sum > 0); + }, + + minCount: function(value, minCount) { + if(minCount == 0) { + return true; + } + if(minCount == 1) { + return (value !== ''); + } + return (value.split(',').length >= minCount); + }, + + exactCount: function(value, exactCount) { + if(exactCount == 0) { + return (value === ''); + } + if(exactCount == 1) { + return (value !== '' && value.search(',') === -1); + } + return (value.split(',').length == exactCount); + }, + + maxCount: function(value, maxCount) { + if(maxCount == 0) { + return false; + } + if(maxCount == 1) { + return (value.search(',') === -1); + } + return (value.split(',').length <= maxCount); + } + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/form.min.css b/semantic/components/form.min.css new file mode 100644 index 0000000..6afcd64 --- /dev/null +++ b/semantic/components/form.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.form{position:relative;max-width:100%}.ui.form>p{margin:1em 0}.ui.form .field{clear:both;margin:0 0 1em}.ui.form .field:last-child,.ui.form .fields:last-child .field{margin-bottom:0}.ui.form .fields .field{clear:both;margin:0}.ui.form .field>label{display:block;margin:0 0 .28571429rem 0;color:rgba(0,0,0,.87);font-size:.92857143em;font-weight:700;text-transform:none}.ui.form input:not([type]),.ui.form input[type=date],.ui.form input[type=datetime-local],.ui.form input[type=email],.ui.form input[type=file],.ui.form input[type=number],.ui.form input[type=password],.ui.form input[type=search],.ui.form input[type=tel],.ui.form input[type=text],.ui.form input[type=time],.ui.form input[type=url],.ui.form textarea{width:100%;vertical-align:top}.ui.form ::-webkit-datetime-edit,.ui.form ::-webkit-inner-spin-button{height:1.21428571em}.ui.form input:not([type]),.ui.form input[type=date],.ui.form input[type=datetime-local],.ui.form input[type=email],.ui.form input[type=file],.ui.form input[type=number],.ui.form input[type=password],.ui.form input[type=search],.ui.form input[type=tel],.ui.form input[type=text],.ui.form input[type=time],.ui.form input[type=url]{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;margin:0;outline:0;-webkit-appearance:none;tap-highlight-color:rgba(255,255,255,0);line-height:1.21428571em;padding:.67857143em 1em;font-size:1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-box-shadow:0 0 0 0 transparent inset;box-shadow:0 0 0 0 transparent inset;-webkit-transition:color .1s ease,border-color .1s ease;transition:color .1s ease,border-color .1s ease}.ui.form textarea{margin:0;-webkit-appearance:none;tap-highlight-color:rgba(255,255,255,0);padding:.78571429em 1em;background:#fff;border:1px solid rgba(34,36,38,.15);outline:0;color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-box-shadow:0 0 0 0 transparent inset;box-shadow:0 0 0 0 transparent inset;-webkit-transition:color .1s ease,border-color .1s ease;transition:color .1s ease,border-color .1s ease;font-size:1em;line-height:1.2857;resize:vertical}.ui.form textarea:not([rows]){height:12em;min-height:8em;max-height:24em}.ui.form input[type=checkbox],.ui.form textarea{vertical-align:top}.ui.form input.attached{width:auto}.ui.form select{display:block;height:auto;width:100%;background:#fff;border:1px solid rgba(34,36,38,.15);border-radius:.28571429rem;-webkit-box-shadow:0 0 0 0 transparent inset;box-shadow:0 0 0 0 transparent inset;padding:.62em 1em;color:rgba(0,0,0,.87);-webkit-transition:color .1s ease,border-color .1s ease;transition:color .1s ease,border-color .1s ease}.ui.form .field>.selection.dropdown{width:100%}.ui.form .field>.selection.dropdown>.dropdown.icon{float:right}.ui.form .inline.field>.selection.dropdown,.ui.form .inline.fields .field>.selection.dropdown{width:auto}.ui.form .inline.field>.selection.dropdown>.dropdown.icon,.ui.form .inline.fields .field>.selection.dropdown>.dropdown.icon{float:none}.ui.form .field .ui.input,.ui.form .fields .field .ui.input,.ui.form .wide.field .ui.input{width:100%}.ui.form .inline.field:not(.wide) .ui.input,.ui.form .inline.fields .field:not(.wide) .ui.input{width:auto;vertical-align:middle}.ui.form .field .ui.input input,.ui.form .fields .field .ui.input input{width:auto}.ui.form .eight.fields .ui.input input,.ui.form .five.fields .ui.input input,.ui.form .four.fields .ui.input input,.ui.form .nine.fields .ui.input input,.ui.form .seven.fields .ui.input input,.ui.form .six.fields .ui.input input,.ui.form .ten.fields .ui.input input,.ui.form .three.fields .ui.input input,.ui.form .two.fields .ui.input input,.ui.form .wide.field .ui.input input{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;width:0}.ui.form .error.message,.ui.form .success.message,.ui.form .warning.message{display:none}.ui.form .message:first-child{margin-top:0}.ui.form .field .prompt.label{white-space:normal;background:#fff!important;border:1px solid #e0b4b4!important;color:#9f3a38!important}.ui.form .inline.field .prompt,.ui.form .inline.fields .field .prompt{vertical-align:top;margin:-.25em 0 -.5em .5em}.ui.form .inline.field .prompt:before,.ui.form .inline.fields .field .prompt:before{border-width:0 0 1px 1px;bottom:auto;right:auto;top:50%;left:0}.ui.form .field.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px ivory inset!important;box-shadow:0 0 0 100px ivory inset!important;border-color:#e5dfa1!important}.ui.form .field.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px ivory inset!important;box-shadow:0 0 0 100px ivory inset!important;border-color:#d5c315!important}.ui.form .error.error input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #fffaf0 inset!important;box-shadow:0 0 0 100px #fffaf0 inset!important;border-color:#e0b4b4!important}.ui.form ::-webkit-input-placeholder{color:rgba(191,191,191,.87)}.ui.form :-ms-input-placeholder{color:rgba(191,191,191,.87)!important}.ui.form ::-moz-placeholder{color:rgba(191,191,191,.87)}.ui.form :focus::-webkit-input-placeholder{color:rgba(115,115,115,.87)}.ui.form :focus:-ms-input-placeholder{color:rgba(115,115,115,.87)!important}.ui.form :focus::-moz-placeholder{color:rgba(115,115,115,.87)}.ui.form .error ::-webkit-input-placeholder{color:#e7bdbc}.ui.form .error :-ms-input-placeholder{color:#e7bdbc!important}.ui.form .error ::-moz-placeholder{color:#e7bdbc}.ui.form .error :focus::-webkit-input-placeholder{color:#da9796}.ui.form .error :focus:-ms-input-placeholder{color:#da9796!important}.ui.form .error :focus::-moz-placeholder{color:#da9796}.ui.form input:not([type]):focus,.ui.form input[type=date]:focus,.ui.form input[type=datetime-local]:focus,.ui.form input[type=email]:focus,.ui.form input[type=file]:focus,.ui.form input[type=number]:focus,.ui.form input[type=password]:focus,.ui.form input[type=search]:focus,.ui.form input[type=tel]:focus,.ui.form input[type=text]:focus,.ui.form input[type=time]:focus,.ui.form input[type=url]:focus{color:rgba(0,0,0,.95);border-color:#85b7d9;border-radius:.28571429rem;background:#fff;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.35) inset;box-shadow:0 0 0 0 rgba(34,36,38,.35) inset}.ui.form textarea:focus{color:rgba(0,0,0,.95);border-color:#85b7d9;border-radius:.28571429rem;background:#fff;-webkit-box-shadow:0 0 0 0 rgba(34,36,38,.35) inset;box-shadow:0 0 0 0 rgba(34,36,38,.35) inset;-webkit-appearance:none}.ui.form.success .success.message:not(:empty){display:block}.ui.form.success .compact.success.message:not(:empty){display:inline-block}.ui.form.success .icon.success.message:not(:empty){display:-webkit-box;display:-ms-flexbox;display:flex}.ui.form.warning .warning.message:not(:empty){display:block}.ui.form.warning .compact.warning.message:not(:empty){display:inline-block}.ui.form.warning .icon.warning.message:not(:empty){display:-webkit-box;display:-ms-flexbox;display:flex}.ui.form.error .error.message:not(:empty){display:block}.ui.form.error .compact.error.message:not(:empty){display:inline-block}.ui.form.error .icon.error.message:not(:empty){display:-webkit-box;display:-ms-flexbox;display:flex}.ui.form .field.error .input,.ui.form .field.error label,.ui.form .fields.error .field .input,.ui.form .fields.error .field label{color:#9f3a38}.ui.form .field.error .corner.label,.ui.form .fields.error .field .corner.label{border-color:#9f3a38;color:#fff}.ui.form .field.error input:not([type]),.ui.form .field.error input[type=date],.ui.form .field.error input[type=datetime-local],.ui.form .field.error input[type=email],.ui.form .field.error input[type=file],.ui.form .field.error input[type=number],.ui.form .field.error input[type=password],.ui.form .field.error input[type=search],.ui.form .field.error input[type=tel],.ui.form .field.error input[type=text],.ui.form .field.error input[type=time],.ui.form .field.error input[type=url],.ui.form .field.error select,.ui.form .field.error textarea,.ui.form .fields.error .field input:not([type]),.ui.form .fields.error .field input[type=date],.ui.form .fields.error .field input[type=datetime-local],.ui.form .fields.error .field input[type=email],.ui.form .fields.error .field input[type=file],.ui.form .fields.error .field input[type=number],.ui.form .fields.error .field input[type=password],.ui.form .fields.error .field input[type=search],.ui.form .fields.error .field input[type=tel],.ui.form .fields.error .field input[type=text],.ui.form .fields.error .field input[type=time],.ui.form .fields.error .field input[type=url],.ui.form .fields.error .field select,.ui.form .fields.error .field textarea{background:#fff6f6;border-color:#e0b4b4;color:#9f3a38;border-radius:'';-webkit-box-shadow:none;box-shadow:none}.ui.form .field.error input:not([type]):focus,.ui.form .field.error input[type=date]:focus,.ui.form .field.error input[type=datetime-local]:focus,.ui.form .field.error input[type=email]:focus,.ui.form .field.error input[type=file]:focus,.ui.form .field.error input[type=number]:focus,.ui.form .field.error input[type=password]:focus,.ui.form .field.error input[type=search]:focus,.ui.form .field.error input[type=tel]:focus,.ui.form .field.error input[type=text]:focus,.ui.form .field.error input[type=time]:focus,.ui.form .field.error input[type=url]:focus,.ui.form .field.error select:focus,.ui.form .field.error textarea:focus{background:#fff6f6;border-color:#e0b4b4;color:#9f3a38;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none}.ui.form .field.error select{-webkit-appearance:menulist-button}.ui.form .field.error .ui.dropdown,.ui.form .field.error .ui.dropdown .item,.ui.form .field.error .ui.dropdown .text,.ui.form .fields.error .field .ui.dropdown,.ui.form .fields.error .field .ui.dropdown .item{background:#fff6f6;color:#9f3a38}.ui.form .field.error .ui.dropdown,.ui.form .fields.error .field .ui.dropdown{border-color:#e0b4b4!important}.ui.form .field.error .ui.dropdown:hover,.ui.form .fields.error .field .ui.dropdown:hover{border-color:#e0b4b4!important}.ui.form .field.error .ui.dropdown:hover .menu,.ui.form .fields.error .field .ui.dropdown:hover .menu{border-color:#e0b4b4}.ui.form .field.error .ui.multiple.selection.dropdown>.label,.ui.form .fields.error .field .ui.multiple.selection.dropdown>.label{background-color:#eacbcb;color:#9f3a38}.ui.form .field.error .ui.dropdown .menu .item:hover,.ui.form .fields.error .field .ui.dropdown .menu .item:hover{background-color:#fbe7e7}.ui.form .field.error .ui.dropdown .menu .selected.item,.ui.form .fields.error .field .ui.dropdown .menu .selected.item{background-color:#fbe7e7}.ui.form .field.error .ui.dropdown .menu .active.item,.ui.form .fields.error .field .ui.dropdown .menu .active.item{background-color:#fdcfcf!important}.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box,.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label{color:#9f3a38}.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before,.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before{background:#fff6f6;border-color:#e0b4b4}.ui.form .field.error .checkbox .box:after,.ui.form .field.error .checkbox label:after,.ui.form .fields.error .field .checkbox .box:after,.ui.form .fields.error .field .checkbox label:after{color:#9f3a38}.ui.form .disabled.field,.ui.form .disabled.fields .field,.ui.form .field :disabled{pointer-events:none;opacity:.45}.ui.form .field.disabled>label,.ui.form .fields.disabled>label{opacity:.45}.ui.form .field.disabled :disabled{opacity:1}.ui.loading.form{position:relative;cursor:default;pointer-events:none}.ui.loading.form:before{position:absolute;content:'';top:0;left:0;background:rgba(255,255,255,.8);width:100%;height:100%;z-index:100}.ui.loading.form:after{position:absolute;content:'';top:50%;left:50%;margin:-1.5em 0 0 -1.5em;width:3em;height:3em;-webkit-animation:form-spin .6s linear;animation:form-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}@-webkit-keyframes form-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes form-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.form .required.field>.checkbox:after,.ui.form .required.field>label:after,.ui.form .required.fields.grouped>label:after,.ui.form .required.fields:not(.grouped)>.field>.checkbox:after,.ui.form .required.fields:not(.grouped)>.field>label:after{margin:-.2em 0 0 .2em;content:'*';color:#db2828}.ui.form .required.field>label:after,.ui.form .required.fields.grouped>label:after,.ui.form .required.fields:not(.grouped)>.field>label:after{display:inline-block;vertical-align:top}.ui.form .required.field>.checkbox:after,.ui.form .required.fields:not(.grouped)>.field>.checkbox:after{position:absolute;top:0;left:100%}.ui.form .inverted.segment .ui.checkbox .box,.ui.form .inverted.segment .ui.checkbox label,.ui.form .inverted.segment label,.ui.inverted.form .inline.field>label,.ui.inverted.form .inline.field>p,.ui.inverted.form .inline.fields .field>label,.ui.inverted.form .inline.fields .field>p,.ui.inverted.form .inline.fields>label,.ui.inverted.form .ui.checkbox .box,.ui.inverted.form .ui.checkbox label,.ui.inverted.form label{color:rgba(255,255,255,.9)}.ui.inverted.form input:not([type]),.ui.inverted.form input[type=date],.ui.inverted.form input[type=datetime-local],.ui.inverted.form input[type=email],.ui.inverted.form input[type=file],.ui.inverted.form input[type=number],.ui.inverted.form input[type=password],.ui.inverted.form input[type=search],.ui.inverted.form input[type=tel],.ui.inverted.form input[type=text],.ui.inverted.form input[type=time],.ui.inverted.form input[type=url]{background:#fff;border-color:rgba(255,255,255,.1);color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none}.ui.form .grouped.fields{display:block;margin:0 0 1em}.ui.form .grouped.fields:last-child{margin-bottom:0}.ui.form .grouped.fields>label{margin:0 0 .28571429rem 0;color:rgba(0,0,0,.87);font-size:.92857143em;font-weight:700;text-transform:none}.ui.form .grouped.fields .field,.ui.form .grouped.inline.fields .field{display:block;margin:.5em 0;padding:0}.ui.form .fields{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 -.5em 1em}.ui.form .fields>.field{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;padding-left:.5em;padding-right:.5em}.ui.form .fields>.field:first-child{border-left:none;-webkit-box-shadow:none;box-shadow:none}.ui.form .two.fields>.field,.ui.form .two.fields>.fields{width:50%}.ui.form .three.fields>.field,.ui.form .three.fields>.fields{width:33.33333333%}.ui.form .four.fields>.field,.ui.form .four.fields>.fields{width:25%}.ui.form .five.fields>.field,.ui.form .five.fields>.fields{width:20%}.ui.form .six.fields>.field,.ui.form .six.fields>.fields{width:16.66666667%}.ui.form .seven.fields>.field,.ui.form .seven.fields>.fields{width:14.28571429%}.ui.form .eight.fields>.field,.ui.form .eight.fields>.fields{width:12.5%}.ui.form .nine.fields>.field,.ui.form .nine.fields>.fields{width:11.11111111%}.ui.form .ten.fields>.field,.ui.form .ten.fields>.fields{width:10%}@media only screen and (max-width:767px){.ui.form .fields{-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.form:not(.unstackable) .eight.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .eight.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .five.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .five.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .four.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .four.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .nine.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .nine.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .seven.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .seven.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .six.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .six.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .ten.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .ten.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .three.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .three.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .two.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .two.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable)>.field,.ui[class*="equal width"].form:not(.unstackable) .fields>.field{width:100%!important;margin:0 0 1em}}.ui.form .fields .wide.field{width:6.25%;padding-left:.5em;padding-right:.5em}.ui.form .one.wide.field{width:6.25%!important}.ui.form .two.wide.field{width:12.5%!important}.ui.form .three.wide.field{width:18.75%!important}.ui.form .four.wide.field{width:25%!important}.ui.form .five.wide.field{width:31.25%!important}.ui.form .six.wide.field{width:37.5%!important}.ui.form .seven.wide.field{width:43.75%!important}.ui.form .eight.wide.field{width:50%!important}.ui.form .nine.wide.field{width:56.25%!important}.ui.form .ten.wide.field{width:62.5%!important}.ui.form .eleven.wide.field{width:68.75%!important}.ui.form .twelve.wide.field{width:75%!important}.ui.form .thirteen.wide.field{width:81.25%!important}.ui.form .fourteen.wide.field{width:87.5%!important}.ui.form .fifteen.wide.field{width:93.75%!important}.ui.form .sixteen.wide.field{width:100%!important}@media only screen and (max-width:767px){.ui.form:not(.unstackable) .fields:not(.unstackable)>.eight.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.eleven.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.fifteen.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.five.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.four.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.fourteen.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.nine.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.seven.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.six.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.sixteen.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.ten.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.thirteen.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.three.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.twelve.wide.field,.ui.form:not(.unstackable) .fields:not(.unstackable)>.two.wide.field,.ui.form:not(.unstackable) .five.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .five.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .four.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .four.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .three.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .three.fields:not(.unstackable)>.fields,.ui.form:not(.unstackable) .two.fields:not(.unstackable)>.field,.ui.form:not(.unstackable) .two.fields:not(.unstackable)>.fields{width:100%!important}.ui.form .fields{margin-bottom:0}}.ui.form [class*="equal width"].fields>.field,.ui[class*="equal width"].form .fields>.field{width:100%;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.ui.form .inline.fields{margin:0 0 1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.form .inline.fields .field{margin:0;padding:0 1em 0 0}.ui.form .inline.field>label,.ui.form .inline.field>p,.ui.form .inline.fields .field>label,.ui.form .inline.fields .field>p,.ui.form .inline.fields>label{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:baseline;font-size:.92857143em;font-weight:700;color:rgba(0,0,0,.87);text-transform:none}.ui.form .inline.fields>label{margin:.035714em 1em 0 0}.ui.form .inline.field>input,.ui.form .inline.field>select,.ui.form .inline.fields .field>input,.ui.form .inline.fields .field>select{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:middle;font-size:1em}.ui.form .inline.field>:first-child,.ui.form .inline.fields .field>:first-child{margin:0 .85714286em 0 0}.ui.form .inline.field>:only-child,.ui.form .inline.fields .field>:only-child{margin:0}.ui.form .inline.fields .wide.field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.form .inline.fields .wide.field>input,.ui.form .inline.fields .wide.field>select{width:100%}.ui.mini.form{font-size:.78571429rem}.ui.tiny.form{font-size:.85714286rem}.ui.small.form{font-size:.92857143rem}.ui.form{font-size:1rem}.ui.large.form{font-size:1.14285714rem}.ui.big.form{font-size:1.28571429rem}.ui.huge.form{font-size:1.42857143rem}.ui.massive.form{font-size:1.71428571rem} \ No newline at end of file diff --git a/semantic/components/form.min.js b/semantic/components/form.min.js new file mode 100644 index 0000000..619ba1a --- /dev/null +++ b/semantic/components/form.min.js @@ -0,0 +1 @@ +!function(T,e,D,O){"use strict";e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),T.fn.form=function(x){var k,E=T(this),w=E.selector||"",C=(new Date).getTime(),V=[],R=x,F=arguments[1],S="string"==typeof R,A=[].slice.call(arguments,1);return E.each(function(){var n,s,t,e,d,u,c,f,p,r,l,i,a,m,g,h,o=T(this),v=this,b=[],y=!1;(h={initialize:function(){h.get.settings(),S?(g===O&&h.instantiate(),h.invoke(R)):(g!==O&&g.invoke("destroy"),h.verbose("Initializing form validation",o,d),h.bindEvents(),h.set.defaults(),h.instantiate())},instantiate:function(){h.verbose("Storing instance of module",h),g=h,o.data(a,h)},destroy:function(){h.verbose("Destroying previous module",g),h.removeEvents(),o.removeData(a)},refresh:function(){h.verbose("Refreshing selector cache"),n=o.find(f.field),s=o.find(f.group),t=o.find(f.message),o.find(f.prompt),e=o.find(f.submit),o.find(f.clear),o.find(f.reset)},submit:function(){h.verbose("Submitting form",o),o.submit()},attachEvents:function(e,t){t=t||"submit",T(e).on("click"+m,function(e){h[t](),e.preventDefault()})},bindEvents:function(){h.verbose("Attaching form events"),o.on("submit"+m,h.validate.form).on("blur"+m,f.field,h.event.field.blur).on("click"+m,f.submit,h.submit).on("click"+m,f.reset,h.reset).on("click"+m,f.clear,h.clear),d.keyboardShortcuts&&o.on("keydown"+m,f.field,h.event.field.keydown),n.each(function(){var e=T(this),t=e.prop("type"),n=h.get.changeEvent(t,e);T(this).on(n+m,h.event.field.change)})},clear:function(){n.each(function(){var e=T(this),t=e.parent(),n=e.closest(s),r=n.find(f.prompt),i=e.data(c.defaultValue)||"",a=t.is(f.uiCheckbox),o=t.is(f.uiDropdown);n.hasClass(p.error)&&(h.verbose("Resetting error on field",n),n.removeClass(p.error),r.remove()),o?(h.verbose("Resetting dropdown value",t,i),t.dropdown("clear")):a?e.prop("checked",!1):(h.verbose("Resetting field value",e,i),e.val(""))})},reset:function(){n.each(function(){var e=T(this),t=e.parent(),n=e.closest(s),r=n.find(f.prompt),i=e.data(c.defaultValue),a=t.is(f.uiCheckbox),o=t.is(f.uiDropdown),l=n.hasClass(p.error);i!==O&&(l&&(h.verbose("Resetting error on field",n),n.removeClass(p.error),r.remove()),o?(h.verbose("Resetting dropdown value",t,i),t.dropdown("restore defaults")):a?(h.verbose("Resetting checkbox value",t,i),e.prop("checked",i)):(h.verbose("Resetting field value",e,i),e.val(i)))})},determine:{isValid:function(){var n=!0;return T.each(u,function(e,t){h.validate.field(t,e,!0)||(n=!1)}),n}},is:{bracketedRule:function(e){return e.type&&e.type.match(d.regExp.bracket)},shorthandFields:function(e){var t=e[Object.keys(e)[0]];return h.is.shorthandRules(t)},shorthandRules:function(e){return"string"==typeof e||T.isArray(e)},empty:function(e){return!e||0===e.length||(e.is('input[type="checkbox"]')?!e.is(":checked"):h.is.blank(e))},blank:function(e){return""===T.trim(e.val())},valid:function(e){var n=!0;return e?(h.verbose("Checking if field is valid",e),h.validate.field(u[e],e,!1)):(h.verbose("Checking if form is valid"),T.each(u,function(e,t){h.is.valid(e)||(n=!1)}),n)}},removeEvents:function(){o.off(m),n.off(m),e.off(m),n.off(m)},event:{field:{keydown:function(e){var t=T(this),n=e.which,r=t.is(f.input),i=t.is(f.checkbox),a=0")},fields:function(e){var n=T();return T.each(e,function(e,t){n=n.add(h.get.field(t))}),n},validation:function(n){var r,i;return!!u&&(T.each(u,function(e,t){i=t.identifier||e,h.get.field(i)[0]==n[0]&&(t.identifier=i,r=t)}),r||!1)},value:function(e){var t=[];return t.push(e),h.get.values.call(v,t)[e]},values:function(e){var t=T.isArray(e)?h.get.fields(e):n,u={};return t.each(function(e,t){var n=T(t),r=(n.prop("type"),n.prop("name")),i=n.val(),a=n.is(f.checkbox),o=n.is(f.radio),l=-1!==r.indexOf("[]"),s=!!a&&n.is(":checked");r&&(l?(r=r.replace("[]",""),u[r]||(u[r]=[]),a?s?u[r].push(i||!0):u[r].push(!1):u[r].push(i)):o?u[r]!==O&&0!=u[r]||(u[r]=!!s&&(i||!0)):u[r]=a?!!s&&(i||!0):i)}),u}},has:{field:function(e){return h.verbose("Checking for existence of a field with identifier",e),"string"!=typeof(e=h.escape.string(e))&&h.error(l.identifier,e),0"}),T(n+="")},prompt:function(e){return T("
").addClass("ui basic red pointing prompt label").html(e[0])}},rules:{empty:function(e){return!(e===O||""===e||T.isArray(e)&&0===e.length)},checked:function(){return 0=t},length:function(e,t){return e!==O&&e.length>=t},exactLength:function(e,t){return e!==O&&e.length==t},maxLength:function(e,t){return e!==O&&e.length<=t},match:function(e,t){var n;T(this);return 0=t)},exactCount:function(e,t){return 0==t?""===e:1==t?""!==e&&-1===e.search(","):e.split(",").length==t},maxCount:function(e,t){return 0!=t&&(1==t?-1===e.search(","):e.split(",").length<=t)}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/grid.css b/semantic/components/grid.css new file mode 100644 index 0000000..82aa7b7 --- /dev/null +++ b/semantic/components/grid.css @@ -0,0 +1,2039 @@ +/*! + * # Semantic UI 2.4.1 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + padding: 0em; +} + +/*---------------------- + Remove Gutters +-----------------------*/ + +.ui.grid { + margin-top: -1rem; + margin-bottom: -1rem; + margin-left: -1rem; + margin-right: -1rem; +} +.ui.relaxed.grid { + margin-left: -1.5rem; + margin-right: -1.5rem; +} +.ui[class*="very relaxed"].grid { + margin-left: -2.5rem; + margin-right: -2.5rem; +} + +/* Preserve Rows Spacing on Consecutive Grids */ +.ui.grid + .grid { + margin-top: 1rem; +} + +/*------------------- + Columns +--------------------*/ + + +/* Standard 16 column */ +.ui.grid > .column:not(.row), +.ui.grid > .row > .column { + position: relative; + display: inline-block; + width: 6.25%; + padding-left: 1rem; + padding-right: 1rem; + vertical-align: top; +} +.ui.grid > * { + padding-left: 1rem; + padding-right: 1rem; +} + +/*------------------- + Rows +--------------------*/ + +.ui.grid > .row { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: inherit; + -ms-flex-pack: inherit; + justify-content: inherit; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + width: 100% !important; + padding: 0rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/*------------------- + Columns +--------------------*/ + + +/* Vertical padding when no rows */ +.ui.grid > .column:not(.row) { + padding-top: 1rem; + padding-bottom: 1rem; +} +.ui.grid > .row > .column { + margin-top: 0em; + margin-bottom: 0em; +} + +/*------------------- + Content +--------------------*/ + +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: 100%; +} + +/*------------------- + Loose Coupling +--------------------*/ + + +/* Collapse Margin on Consecutive Grid */ +.ui.grid > .ui.grid:first-child { + margin-top: 0em; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0em; +} + +/* Segment inside Aligned Grid */ +.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), +.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { + width: 100%; +} + +/* Align Dividers with Gutter */ +.ui.grid .row + .ui.divider { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 1rem 1rem; +} +.ui.grid .column + .ui.vertical.divider { + height: calc(50% - (2rem / 2)); +} + +/* Remove Border on Last Horizontal Segment */ +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + -webkit-box-shadow: none; + box-shadow: none; +} + + +/******************************* + Variations +*******************************/ + + +/*----------------------- + Page Grid +-------------------------*/ + +@media only screen and (max-width: 767px) { + .ui.page.grid { + width: auto; + padding-left: 0em; + padding-right: 0em; + margin-left: 0em; + margin-right: 0em; + } +} +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.page.grid { + width: auto; + margin-left: 0em; + margin-right: 0em; + padding-left: 2em; + padding-right: 2em; + } +} +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .ui.page.grid { + width: auto; + margin-left: 0em; + margin-right: 0em; + padding-left: 3%; + padding-right: 3%; + } +} +@media only screen and (min-width: 1200px) and (max-width: 1919px) { + .ui.page.grid { + width: auto; + margin-left: 0em; + margin-right: 0em; + padding-left: 15%; + padding-right: 15%; + } +} +@media only screen and (min-width: 1920px) { + .ui.page.grid { + width: auto; + margin-left: 0em; + margin-right: 0em; + padding-left: 23%; + padding-right: 23%; + } +} + +/*------------------- + Column Count +--------------------*/ + + +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: 100%; +} + +/* Grid Based */ +.ui[class*="one column"].grid > .row > .column, +.ui[class*="one column"].grid > .column:not(.row) { + width: 100%; +} +.ui[class*="two column"].grid > .row > .column, +.ui[class*="two column"].grid > .column:not(.row) { + width: 50%; +} +.ui[class*="three column"].grid > .row > .column, +.ui[class*="three column"].grid > .column:not(.row) { + width: 33.33333333%; +} +.ui[class*="four column"].grid > .row > .column, +.ui[class*="four column"].grid > .column:not(.row) { + width: 25%; +} +.ui[class*="five column"].grid > .row > .column, +.ui[class*="five column"].grid > .column:not(.row) { + width: 20%; +} +.ui[class*="six column"].grid > .row > .column, +.ui[class*="six column"].grid > .column:not(.row) { + width: 16.66666667%; +} +.ui[class*="seven column"].grid > .row > .column, +.ui[class*="seven column"].grid > .column:not(.row) { + width: 14.28571429%; +} +.ui[class*="eight column"].grid > .row > .column, +.ui[class*="eight column"].grid > .column:not(.row) { + width: 12.5%; +} +.ui[class*="nine column"].grid > .row > .column, +.ui[class*="nine column"].grid > .column:not(.row) { + width: 11.11111111%; +} +.ui[class*="ten column"].grid > .row > .column, +.ui[class*="ten column"].grid > .column:not(.row) { + width: 10%; +} +.ui[class*="eleven column"].grid > .row > .column, +.ui[class*="eleven column"].grid > .column:not(.row) { + width: 9.09090909%; +} +.ui[class*="twelve column"].grid > .row > .column, +.ui[class*="twelve column"].grid > .column:not(.row) { + width: 8.33333333%; +} +.ui[class*="thirteen column"].grid > .row > .column, +.ui[class*="thirteen column"].grid > .column:not(.row) { + width: 7.69230769%; +} +.ui[class*="fourteen column"].grid > .row > .column, +.ui[class*="fourteen column"].grid > .column:not(.row) { + width: 7.14285714%; +} +.ui[class*="fifteen column"].grid > .row > .column, +.ui[class*="fifteen column"].grid > .column:not(.row) { + width: 6.66666667%; +} +.ui[class*="sixteen column"].grid > .row > .column, +.ui[class*="sixteen column"].grid > .column:not(.row) { + width: 6.25%; +} + +/* Row Based Overrides */ +.ui.grid > [class*="one column"].row > .column { + width: 100% !important; +} +.ui.grid > [class*="two column"].row > .column { + width: 50% !important; +} +.ui.grid > [class*="three column"].row > .column { + width: 33.33333333% !important; +} +.ui.grid > [class*="four column"].row > .column { + width: 25% !important; +} +.ui.grid > [class*="five column"].row > .column { + width: 20% !important; +} +.ui.grid > [class*="six column"].row > .column { + width: 16.66666667% !important; +} +.ui.grid > [class*="seven column"].row > .column { + width: 14.28571429% !important; +} +.ui.grid > [class*="eight column"].row > .column { + width: 12.5% !important; +} +.ui.grid > [class*="nine column"].row > .column { + width: 11.11111111% !important; +} +.ui.grid > [class*="ten column"].row > .column { + width: 10% !important; +} +.ui.grid > [class*="eleven column"].row > .column { + width: 9.09090909% !important; +} +.ui.grid > [class*="twelve column"].row > .column { + width: 8.33333333% !important; +} +.ui.grid > [class*="thirteen column"].row > .column { + width: 7.69230769% !important; +} +.ui.grid > [class*="fourteen column"].row > .column { + width: 7.14285714% !important; +} +.ui.grid > [class*="fifteen column"].row > .column { + width: 6.66666667% !important; +} +.ui.grid > [class*="sixteen column"].row > .column { + width: 6.25% !important; +} + +/* Celled Page */ +.ui.celled.page.grid { + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Column Width +--------------------*/ + + +/* Sizing Combinations */ +.ui.grid > .row > [class*="one wide"].column, +.ui.grid > .column.row > [class*="one wide"].column, +.ui.grid > [class*="one wide"].column, +.ui.column.grid > [class*="one wide"].column { + width: 6.25% !important; +} +.ui.grid > .row > [class*="two wide"].column, +.ui.grid > .column.row > [class*="two wide"].column, +.ui.grid > [class*="two wide"].column, +.ui.column.grid > [class*="two wide"].column { + width: 12.5% !important; +} +.ui.grid > .row > [class*="three wide"].column, +.ui.grid > .column.row > [class*="three wide"].column, +.ui.grid > [class*="three wide"].column, +.ui.column.grid > [class*="three wide"].column { + width: 18.75% !important; +} +.ui.grid > .row > [class*="four wide"].column, +.ui.grid > .column.row > [class*="four wide"].column, +.ui.grid > [class*="four wide"].column, +.ui.column.grid > [class*="four wide"].column { + width: 25% !important; +} +.ui.grid > .row > [class*="five wide"].column, +.ui.grid > .column.row > [class*="five wide"].column, +.ui.grid > [class*="five wide"].column, +.ui.column.grid > [class*="five wide"].column { + width: 31.25% !important; +} +.ui.grid > .row > [class*="six wide"].column, +.ui.grid > .column.row > [class*="six wide"].column, +.ui.grid > [class*="six wide"].column, +.ui.column.grid > [class*="six wide"].column { + width: 37.5% !important; +} +.ui.grid > .row > [class*="seven wide"].column, +.ui.grid > .column.row > [class*="seven wide"].column, +.ui.grid > [class*="seven wide"].column, +.ui.column.grid > [class*="seven wide"].column { + width: 43.75% !important; +} +.ui.grid > .row > [class*="eight wide"].column, +.ui.grid > .column.row > [class*="eight wide"].column, +.ui.grid > [class*="eight wide"].column, +.ui.column.grid > [class*="eight wide"].column { + width: 50% !important; +} +.ui.grid > .row > [class*="nine wide"].column, +.ui.grid > .column.row > [class*="nine wide"].column, +.ui.grid > [class*="nine wide"].column, +.ui.column.grid > [class*="nine wide"].column { + width: 56.25% !important; +} +.ui.grid > .row > [class*="ten wide"].column, +.ui.grid > .column.row > [class*="ten wide"].column, +.ui.grid > [class*="ten wide"].column, +.ui.column.grid > [class*="ten wide"].column { + width: 62.5% !important; +} +.ui.grid > .row > [class*="eleven wide"].column, +.ui.grid > .column.row > [class*="eleven wide"].column, +.ui.grid > [class*="eleven wide"].column, +.ui.column.grid > [class*="eleven wide"].column { + width: 68.75% !important; +} +.ui.grid > .row > [class*="twelve wide"].column, +.ui.grid > .column.row > [class*="twelve wide"].column, +.ui.grid > [class*="twelve wide"].column, +.ui.column.grid > [class*="twelve wide"].column { + width: 75% !important; +} +.ui.grid > .row > [class*="thirteen wide"].column, +.ui.grid > .column.row > [class*="thirteen wide"].column, +.ui.grid > [class*="thirteen wide"].column, +.ui.column.grid > [class*="thirteen wide"].column { + width: 81.25% !important; +} +.ui.grid > .row > [class*="fourteen wide"].column, +.ui.grid > .column.row > [class*="fourteen wide"].column, +.ui.grid > [class*="fourteen wide"].column, +.ui.column.grid > [class*="fourteen wide"].column { + width: 87.5% !important; +} +.ui.grid > .row > [class*="fifteen wide"].column, +.ui.grid > .column.row > [class*="fifteen wide"].column, +.ui.grid > [class*="fifteen wide"].column, +.ui.column.grid > [class*="fifteen wide"].column { + width: 93.75% !important; +} +.ui.grid > .row > [class*="sixteen wide"].column, +.ui.grid > .column.row > [class*="sixteen wide"].column, +.ui.grid > [class*="sixteen wide"].column, +.ui.column.grid > [class*="sixteen wide"].column { + width: 100% !important; +} + +/*---------------------- + Width per Device +-----------------------*/ + + +/* Mobile Sizing Combinations */ +@media only screen and (min-width: 320px) and (max-width: 767px) { + .ui.grid > .row > [class*="one wide mobile"].column, + .ui.grid > .column.row > [class*="one wide mobile"].column, + .ui.grid > [class*="one wide mobile"].column, + .ui.column.grid > [class*="one wide mobile"].column { + width: 6.25% !important; + } + .ui.grid > .row > [class*="two wide mobile"].column, + .ui.grid > .column.row > [class*="two wide mobile"].column, + .ui.grid > [class*="two wide mobile"].column, + .ui.column.grid > [class*="two wide mobile"].column { + width: 12.5% !important; + } + .ui.grid > .row > [class*="three wide mobile"].column, + .ui.grid > .column.row > [class*="three wide mobile"].column, + .ui.grid > [class*="three wide mobile"].column, + .ui.column.grid > [class*="three wide mobile"].column { + width: 18.75% !important; + } + .ui.grid > .row > [class*="four wide mobile"].column, + .ui.grid > .column.row > [class*="four wide mobile"].column, + .ui.grid > [class*="four wide mobile"].column, + .ui.column.grid > [class*="four wide mobile"].column { + width: 25% !important; + } + .ui.grid > .row > [class*="five wide mobile"].column, + .ui.grid > .column.row > [class*="five wide mobile"].column, + .ui.grid > [class*="five wide mobile"].column, + .ui.column.grid > [class*="five wide mobile"].column { + width: 31.25% !important; + } + .ui.grid > .row > [class*="six wide mobile"].column, + .ui.grid > .column.row > [class*="six wide mobile"].column, + .ui.grid > [class*="six wide mobile"].column, + .ui.column.grid > [class*="six wide mobile"].column { + width: 37.5% !important; + } + .ui.grid > .row > [class*="seven wide mobile"].column, + .ui.grid > .column.row > [class*="seven wide mobile"].column, + .ui.grid > [class*="seven wide mobile"].column, + .ui.column.grid > [class*="seven wide mobile"].column { + width: 43.75% !important; + } + .ui.grid > .row > [class*="eight wide mobile"].column, + .ui.grid > .column.row > [class*="eight wide mobile"].column, + .ui.grid > [class*="eight wide mobile"].column, + .ui.column.grid > [class*="eight wide mobile"].column { + width: 50% !important; + } + .ui.grid > .row > [class*="nine wide mobile"].column, + .ui.grid > .column.row > [class*="nine wide mobile"].column, + .ui.grid > [class*="nine wide mobile"].column, + .ui.column.grid > [class*="nine wide mobile"].column { + width: 56.25% !important; + } + .ui.grid > .row > [class*="ten wide mobile"].column, + .ui.grid > .column.row > [class*="ten wide mobile"].column, + .ui.grid > [class*="ten wide mobile"].column, + .ui.column.grid > [class*="ten wide mobile"].column { + width: 62.5% !important; + } + .ui.grid > .row > [class*="eleven wide mobile"].column, + .ui.grid > .column.row > [class*="eleven wide mobile"].column, + .ui.grid > [class*="eleven wide mobile"].column, + .ui.column.grid > [class*="eleven wide mobile"].column { + width: 68.75% !important; + } + .ui.grid > .row > [class*="twelve wide mobile"].column, + .ui.grid > .column.row > [class*="twelve wide mobile"].column, + .ui.grid > [class*="twelve wide mobile"].column, + .ui.column.grid > [class*="twelve wide mobile"].column { + width: 75% !important; + } + .ui.grid > .row > [class*="thirteen wide mobile"].column, + .ui.grid > .column.row > [class*="thirteen wide mobile"].column, + .ui.grid > [class*="thirteen wide mobile"].column, + .ui.column.grid > [class*="thirteen wide mobile"].column { + width: 81.25% !important; + } + .ui.grid > .row > [class*="fourteen wide mobile"].column, + .ui.grid > .column.row > [class*="fourteen wide mobile"].column, + .ui.grid > [class*="fourteen wide mobile"].column, + .ui.column.grid > [class*="fourteen wide mobile"].column { + width: 87.5% !important; + } + .ui.grid > .row > [class*="fifteen wide mobile"].column, + .ui.grid > .column.row > [class*="fifteen wide mobile"].column, + .ui.grid > [class*="fifteen wide mobile"].column, + .ui.column.grid > [class*="fifteen wide mobile"].column { + width: 93.75% !important; + } + .ui.grid > .row > [class*="sixteen wide mobile"].column, + .ui.grid > .column.row > [class*="sixteen wide mobile"].column, + .ui.grid > [class*="sixteen wide mobile"].column, + .ui.column.grid > [class*="sixteen wide mobile"].column { + width: 100% !important; + } +} + +/* Tablet Sizing Combinations */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.grid > .row > [class*="one wide tablet"].column, + .ui.grid > .column.row > [class*="one wide tablet"].column, + .ui.grid > [class*="one wide tablet"].column, + .ui.column.grid > [class*="one wide tablet"].column { + width: 6.25% !important; + } + .ui.grid > .row > [class*="two wide tablet"].column, + .ui.grid > .column.row > [class*="two wide tablet"].column, + .ui.grid > [class*="two wide tablet"].column, + .ui.column.grid > [class*="two wide tablet"].column { + width: 12.5% !important; + } + .ui.grid > .row > [class*="three wide tablet"].column, + .ui.grid > .column.row > [class*="three wide tablet"].column, + .ui.grid > [class*="three wide tablet"].column, + .ui.column.grid > [class*="three wide tablet"].column { + width: 18.75% !important; + } + .ui.grid > .row > [class*="four wide tablet"].column, + .ui.grid > .column.row > [class*="four wide tablet"].column, + .ui.grid > [class*="four wide tablet"].column, + .ui.column.grid > [class*="four wide tablet"].column { + width: 25% !important; + } + .ui.grid > .row > [class*="five wide tablet"].column, + .ui.grid > .column.row > [class*="five wide tablet"].column, + .ui.grid > [class*="five wide tablet"].column, + .ui.column.grid > [class*="five wide tablet"].column { + width: 31.25% !important; + } + .ui.grid > .row > [class*="six wide tablet"].column, + .ui.grid > .column.row > [class*="six wide tablet"].column, + .ui.grid > [class*="six wide tablet"].column, + .ui.column.grid > [class*="six wide tablet"].column { + width: 37.5% !important; + } + .ui.grid > .row > [class*="seven wide tablet"].column, + .ui.grid > .column.row > [class*="seven wide tablet"].column, + .ui.grid > [class*="seven wide tablet"].column, + .ui.column.grid > [class*="seven wide tablet"].column { + width: 43.75% !important; + } + .ui.grid > .row > [class*="eight wide tablet"].column, + .ui.grid > .column.row > [class*="eight wide tablet"].column, + .ui.grid > [class*="eight wide tablet"].column, + .ui.column.grid > [class*="eight wide tablet"].column { + width: 50% !important; + } + .ui.grid > .row > [class*="nine wide tablet"].column, + .ui.grid > .column.row > [class*="nine wide tablet"].column, + .ui.grid > [class*="nine wide tablet"].column, + .ui.column.grid > [class*="nine wide tablet"].column { + width: 56.25% !important; + } + .ui.grid > .row > [class*="ten wide tablet"].column, + .ui.grid > .column.row > [class*="ten wide tablet"].column, + .ui.grid > [class*="ten wide tablet"].column, + .ui.column.grid > [class*="ten wide tablet"].column { + width: 62.5% !important; + } + .ui.grid > .row > [class*="eleven wide tablet"].column, + .ui.grid > .column.row > [class*="eleven wide tablet"].column, + .ui.grid > [class*="eleven wide tablet"].column, + .ui.column.grid > [class*="eleven wide tablet"].column { + width: 68.75% !important; + } + .ui.grid > .row > [class*="twelve wide tablet"].column, + .ui.grid > .column.row > [class*="twelve wide tablet"].column, + .ui.grid > [class*="twelve wide tablet"].column, + .ui.column.grid > [class*="twelve wide tablet"].column { + width: 75% !important; + } + .ui.grid > .row > [class*="thirteen wide tablet"].column, + .ui.grid > .column.row > [class*="thirteen wide tablet"].column, + .ui.grid > [class*="thirteen wide tablet"].column, + .ui.column.grid > [class*="thirteen wide tablet"].column { + width: 81.25% !important; + } + .ui.grid > .row > [class*="fourteen wide tablet"].column, + .ui.grid > .column.row > [class*="fourteen wide tablet"].column, + .ui.grid > [class*="fourteen wide tablet"].column, + .ui.column.grid > [class*="fourteen wide tablet"].column { + width: 87.5% !important; + } + .ui.grid > .row > [class*="fifteen wide tablet"].column, + .ui.grid > .column.row > [class*="fifteen wide tablet"].column, + .ui.grid > [class*="fifteen wide tablet"].column, + .ui.column.grid > [class*="fifteen wide tablet"].column { + width: 93.75% !important; + } + .ui.grid > .row > [class*="sixteen wide tablet"].column, + .ui.grid > .column.row > [class*="sixteen wide tablet"].column, + .ui.grid > [class*="sixteen wide tablet"].column, + .ui.column.grid > [class*="sixteen wide tablet"].column { + width: 100% !important; + } +} + +/* Computer/Desktop Sizing Combinations */ +@media only screen and (min-width: 992px) { + .ui.grid > .row > [class*="one wide computer"].column, + .ui.grid > .column.row > [class*="one wide computer"].column, + .ui.grid > [class*="one wide computer"].column, + .ui.column.grid > [class*="one wide computer"].column { + width: 6.25% !important; + } + .ui.grid > .row > [class*="two wide computer"].column, + .ui.grid > .column.row > [class*="two wide computer"].column, + .ui.grid > [class*="two wide computer"].column, + .ui.column.grid > [class*="two wide computer"].column { + width: 12.5% !important; + } + .ui.grid > .row > [class*="three wide computer"].column, + .ui.grid > .column.row > [class*="three wide computer"].column, + .ui.grid > [class*="three wide computer"].column, + .ui.column.grid > [class*="three wide computer"].column { + width: 18.75% !important; + } + .ui.grid > .row > [class*="four wide computer"].column, + .ui.grid > .column.row > [class*="four wide computer"].column, + .ui.grid > [class*="four wide computer"].column, + .ui.column.grid > [class*="four wide computer"].column { + width: 25% !important; + } + .ui.grid > .row > [class*="five wide computer"].column, + .ui.grid > .column.row > [class*="five wide computer"].column, + .ui.grid > [class*="five wide computer"].column, + .ui.column.grid > [class*="five wide computer"].column { + width: 31.25% !important; + } + .ui.grid > .row > [class*="six wide computer"].column, + .ui.grid > .column.row > [class*="six wide computer"].column, + .ui.grid > [class*="six wide computer"].column, + .ui.column.grid > [class*="six wide computer"].column { + width: 37.5% !important; + } + .ui.grid > .row > [class*="seven wide computer"].column, + .ui.grid > .column.row > [class*="seven wide computer"].column, + .ui.grid > [class*="seven wide computer"].column, + .ui.column.grid > [class*="seven wide computer"].column { + width: 43.75% !important; + } + .ui.grid > .row > [class*="eight wide computer"].column, + .ui.grid > .column.row > [class*="eight wide computer"].column, + .ui.grid > [class*="eight wide computer"].column, + .ui.column.grid > [class*="eight wide computer"].column { + width: 50% !important; + } + .ui.grid > .row > [class*="nine wide computer"].column, + .ui.grid > .column.row > [class*="nine wide computer"].column, + .ui.grid > [class*="nine wide computer"].column, + .ui.column.grid > [class*="nine wide computer"].column { + width: 56.25% !important; + } + .ui.grid > .row > [class*="ten wide computer"].column, + .ui.grid > .column.row > [class*="ten wide computer"].column, + .ui.grid > [class*="ten wide computer"].column, + .ui.column.grid > [class*="ten wide computer"].column { + width: 62.5% !important; + } + .ui.grid > .row > [class*="eleven wide computer"].column, + .ui.grid > .column.row > [class*="eleven wide computer"].column, + .ui.grid > [class*="eleven wide computer"].column, + .ui.column.grid > [class*="eleven wide computer"].column { + width: 68.75% !important; + } + .ui.grid > .row > [class*="twelve wide computer"].column, + .ui.grid > .column.row > [class*="twelve wide computer"].column, + .ui.grid > [class*="twelve wide computer"].column, + .ui.column.grid > [class*="twelve wide computer"].column { + width: 75% !important; + } + .ui.grid > .row > [class*="thirteen wide computer"].column, + .ui.grid > .column.row > [class*="thirteen wide computer"].column, + .ui.grid > [class*="thirteen wide computer"].column, + .ui.column.grid > [class*="thirteen wide computer"].column { + width: 81.25% !important; + } + .ui.grid > .row > [class*="fourteen wide computer"].column, + .ui.grid > .column.row > [class*="fourteen wide computer"].column, + .ui.grid > [class*="fourteen wide computer"].column, + .ui.column.grid > [class*="fourteen wide computer"].column { + width: 87.5% !important; + } + .ui.grid > .row > [class*="fifteen wide computer"].column, + .ui.grid > .column.row > [class*="fifteen wide computer"].column, + .ui.grid > [class*="fifteen wide computer"].column, + .ui.column.grid > [class*="fifteen wide computer"].column { + width: 93.75% !important; + } + .ui.grid > .row > [class*="sixteen wide computer"].column, + .ui.grid > .column.row > [class*="sixteen wide computer"].column, + .ui.grid > [class*="sixteen wide computer"].column, + .ui.column.grid > [class*="sixteen wide computer"].column { + width: 100% !important; + } +} + +/* Large Monitor Sizing Combinations */ +@media only screen and (min-width: 1200px) and (max-width: 1919px) { + .ui.grid > .row > [class*="one wide large screen"].column, + .ui.grid > .column.row > [class*="one wide large screen"].column, + .ui.grid > [class*="one wide large screen"].column, + .ui.column.grid > [class*="one wide large screen"].column { + width: 6.25% !important; + } + .ui.grid > .row > [class*="two wide large screen"].column, + .ui.grid > .column.row > [class*="two wide large screen"].column, + .ui.grid > [class*="two wide large screen"].column, + .ui.column.grid > [class*="two wide large screen"].column { + width: 12.5% !important; + } + .ui.grid > .row > [class*="three wide large screen"].column, + .ui.grid > .column.row > [class*="three wide large screen"].column, + .ui.grid > [class*="three wide large screen"].column, + .ui.column.grid > [class*="three wide large screen"].column { + width: 18.75% !important; + } + .ui.grid > .row > [class*="four wide large screen"].column, + .ui.grid > .column.row > [class*="four wide large screen"].column, + .ui.grid > [class*="four wide large screen"].column, + .ui.column.grid > [class*="four wide large screen"].column { + width: 25% !important; + } + .ui.grid > .row > [class*="five wide large screen"].column, + .ui.grid > .column.row > [class*="five wide large screen"].column, + .ui.grid > [class*="five wide large screen"].column, + .ui.column.grid > [class*="five wide large screen"].column { + width: 31.25% !important; + } + .ui.grid > .row > [class*="six wide large screen"].column, + .ui.grid > .column.row > [class*="six wide large screen"].column, + .ui.grid > [class*="six wide large screen"].column, + .ui.column.grid > [class*="six wide large screen"].column { + width: 37.5% !important; + } + .ui.grid > .row > [class*="seven wide large screen"].column, + .ui.grid > .column.row > [class*="seven wide large screen"].column, + .ui.grid > [class*="seven wide large screen"].column, + .ui.column.grid > [class*="seven wide large screen"].column { + width: 43.75% !important; + } + .ui.grid > .row > [class*="eight wide large screen"].column, + .ui.grid > .column.row > [class*="eight wide large screen"].column, + .ui.grid > [class*="eight wide large screen"].column, + .ui.column.grid > [class*="eight wide large screen"].column { + width: 50% !important; + } + .ui.grid > .row > [class*="nine wide large screen"].column, + .ui.grid > .column.row > [class*="nine wide large screen"].column, + .ui.grid > [class*="nine wide large screen"].column, + .ui.column.grid > [class*="nine wide large screen"].column { + width: 56.25% !important; + } + .ui.grid > .row > [class*="ten wide large screen"].column, + .ui.grid > .column.row > [class*="ten wide large screen"].column, + .ui.grid > [class*="ten wide large screen"].column, + .ui.column.grid > [class*="ten wide large screen"].column { + width: 62.5% !important; + } + .ui.grid > .row > [class*="eleven wide large screen"].column, + .ui.grid > .column.row > [class*="eleven wide large screen"].column, + .ui.grid > [class*="eleven wide large screen"].column, + .ui.column.grid > [class*="eleven wide large screen"].column { + width: 68.75% !important; + } + .ui.grid > .row > [class*="twelve wide large screen"].column, + .ui.grid > .column.row > [class*="twelve wide large screen"].column, + .ui.grid > [class*="twelve wide large screen"].column, + .ui.column.grid > [class*="twelve wide large screen"].column { + width: 75% !important; + } + .ui.grid > .row > [class*="thirteen wide large screen"].column, + .ui.grid > .column.row > [class*="thirteen wide large screen"].column, + .ui.grid > [class*="thirteen wide large screen"].column, + .ui.column.grid > [class*="thirteen wide large screen"].column { + width: 81.25% !important; + } + .ui.grid > .row > [class*="fourteen wide large screen"].column, + .ui.grid > .column.row > [class*="fourteen wide large screen"].column, + .ui.grid > [class*="fourteen wide large screen"].column, + .ui.column.grid > [class*="fourteen wide large screen"].column { + width: 87.5% !important; + } + .ui.grid > .row > [class*="fifteen wide large screen"].column, + .ui.grid > .column.row > [class*="fifteen wide large screen"].column, + .ui.grid > [class*="fifteen wide large screen"].column, + .ui.column.grid > [class*="fifteen wide large screen"].column { + width: 93.75% !important; + } + .ui.grid > .row > [class*="sixteen wide large screen"].column, + .ui.grid > .column.row > [class*="sixteen wide large screen"].column, + .ui.grid > [class*="sixteen wide large screen"].column, + .ui.column.grid > [class*="sixteen wide large screen"].column { + width: 100% !important; + } +} + +/* Widescreen Sizing Combinations */ +@media only screen and (min-width: 1920px) { + .ui.grid > .row > [class*="one wide widescreen"].column, + .ui.grid > .column.row > [class*="one wide widescreen"].column, + .ui.grid > [class*="one wide widescreen"].column, + .ui.column.grid > [class*="one wide widescreen"].column { + width: 6.25% !important; + } + .ui.grid > .row > [class*="two wide widescreen"].column, + .ui.grid > .column.row > [class*="two wide widescreen"].column, + .ui.grid > [class*="two wide widescreen"].column, + .ui.column.grid > [class*="two wide widescreen"].column { + width: 12.5% !important; + } + .ui.grid > .row > [class*="three wide widescreen"].column, + .ui.grid > .column.row > [class*="three wide widescreen"].column, + .ui.grid > [class*="three wide widescreen"].column, + .ui.column.grid > [class*="three wide widescreen"].column { + width: 18.75% !important; + } + .ui.grid > .row > [class*="four wide widescreen"].column, + .ui.grid > .column.row > [class*="four wide widescreen"].column, + .ui.grid > [class*="four wide widescreen"].column, + .ui.column.grid > [class*="four wide widescreen"].column { + width: 25% !important; + } + .ui.grid > .row > [class*="five wide widescreen"].column, + .ui.grid > .column.row > [class*="five wide widescreen"].column, + .ui.grid > [class*="five wide widescreen"].column, + .ui.column.grid > [class*="five wide widescreen"].column { + width: 31.25% !important; + } + .ui.grid > .row > [class*="six wide widescreen"].column, + .ui.grid > .column.row > [class*="six wide widescreen"].column, + .ui.grid > [class*="six wide widescreen"].column, + .ui.column.grid > [class*="six wide widescreen"].column { + width: 37.5% !important; + } + .ui.grid > .row > [class*="seven wide widescreen"].column, + .ui.grid > .column.row > [class*="seven wide widescreen"].column, + .ui.grid > [class*="seven wide widescreen"].column, + .ui.column.grid > [class*="seven wide widescreen"].column { + width: 43.75% !important; + } + .ui.grid > .row > [class*="eight wide widescreen"].column, + .ui.grid > .column.row > [class*="eight wide widescreen"].column, + .ui.grid > [class*="eight wide widescreen"].column, + .ui.column.grid > [class*="eight wide widescreen"].column { + width: 50% !important; + } + .ui.grid > .row > [class*="nine wide widescreen"].column, + .ui.grid > .column.row > [class*="nine wide widescreen"].column, + .ui.grid > [class*="nine wide widescreen"].column, + .ui.column.grid > [class*="nine wide widescreen"].column { + width: 56.25% !important; + } + .ui.grid > .row > [class*="ten wide widescreen"].column, + .ui.grid > .column.row > [class*="ten wide widescreen"].column, + .ui.grid > [class*="ten wide widescreen"].column, + .ui.column.grid > [class*="ten wide widescreen"].column { + width: 62.5% !important; + } + .ui.grid > .row > [class*="eleven wide widescreen"].column, + .ui.grid > .column.row > [class*="eleven wide widescreen"].column, + .ui.grid > [class*="eleven wide widescreen"].column, + .ui.column.grid > [class*="eleven wide widescreen"].column { + width: 68.75% !important; + } + .ui.grid > .row > [class*="twelve wide widescreen"].column, + .ui.grid > .column.row > [class*="twelve wide widescreen"].column, + .ui.grid > [class*="twelve wide widescreen"].column, + .ui.column.grid > [class*="twelve wide widescreen"].column { + width: 75% !important; + } + .ui.grid > .row > [class*="thirteen wide widescreen"].column, + .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, + .ui.grid > [class*="thirteen wide widescreen"].column, + .ui.column.grid > [class*="thirteen wide widescreen"].column { + width: 81.25% !important; + } + .ui.grid > .row > [class*="fourteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, + .ui.grid > [class*="fourteen wide widescreen"].column, + .ui.column.grid > [class*="fourteen wide widescreen"].column { + width: 87.5% !important; + } + .ui.grid > .row > [class*="fifteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, + .ui.grid > [class*="fifteen wide widescreen"].column, + .ui.column.grid > [class*="fifteen wide widescreen"].column { + width: 93.75% !important; + } + .ui.grid > .row > [class*="sixteen wide widescreen"].column, + .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, + .ui.grid > [class*="sixteen wide widescreen"].column, + .ui.column.grid > [class*="sixteen wide widescreen"].column { + width: 100% !important; + } +} + +/*---------------------- + Centered +-----------------------*/ + +.ui.centered.grid, +.ui.centered.grid > .row, +.ui.grid > .centered.row { + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), +.ui.centered.grid > .row > .column:not(.aligned):not(.justified), +.ui.grid .centered.row > .column:not(.aligned):not(.justified) { + text-align: left; +} +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +/*---------------------- + Relaxed +-----------------------*/ + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.ui[class*="very relaxed"].grid > .column:not(.row), +.ui[class*="very relaxed"].grid > .row > .column, +.ui.grid > [class*="very relaxed"].row > .column { + padding-left: 2.5rem; + padding-right: 2.5rem; +} + +/* Coupling with UI Divider */ +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: 1.5rem; + margin-right: 1.5rem; +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: 2.5rem; + margin-right: 2.5rem; +} + +/*---------------------- + Padded +-----------------------*/ + +.ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0em !important; +} +[class*="horizontally padded"].ui.grid { + margin-left: 0em !important; + margin-right: 0em !important; +} +[class*="vertically padded"].ui.grid { + margin-top: 0em !important; + margin-bottom: 0em !important; +} + +/*---------------------- + "Floated" +-----------------------*/ + +.ui.grid [class*="left floated"].column { + margin-right: auto; +} +.ui.grid [class*="right floated"].column { + margin-left: auto; +} + +/*---------------------- + Divided +-----------------------*/ + +.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { + -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); +} + +/* Swap from padding to margin on columns to have dividers align */ +.ui[class*="vertically divided"].grid > .column:not(.row), +.ui[class*="vertically divided"].grid > .row > .column { + margin-top: 1rem; + margin-bottom: 1rem; + padding-top: 0rem; + padding-bottom: 0rem; +} +.ui[class*="vertically divided"].grid > .row { + margin-top: 0em; + margin-bottom: 0em; +} + +/* No divider on first column on row */ +.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* No space on top of first row */ +.ui[class*="vertically divided"].grid > .row:first-child > .column { + margin-top: 0em; +} + +/* Divided Row */ +.ui.grid > .divided.row > .column { + -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); +} +.ui.grid > .divided.row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Vertically Divided */ +.ui[class*="vertically divided"].grid > .row { + position: relative; +} +.ui[class*="vertically divided"].grid > .row:before { + position: absolute; + content: ""; + top: 0em; + left: 0px; + width: calc(100% - 2rem); + height: 1px; + margin: 0% 1rem; + -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); +} + +/* Padded Horizontally Divided */ +[class*="horizontally padded"].ui.divided.grid, +.ui.padded.divided.grid:not(.vertically):not(.horizontally) { + width: 100%; +} + +/* First Row Vertically Divided */ +.ui[class*="vertically divided"].grid > .row:first-child:before { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Inverted Divided */ +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { + -webkit-box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1); + box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1); +} +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted[class*="vertically divided"].grid > .row:before { + -webkit-box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1); + box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.1); +} + +/* Relaxed */ +.ui.relaxed[class*="vertically divided"].grid > .row:before { + margin-left: 1.5rem; + margin-right: 1.5rem; + width: calc(100% - 3rem); +} +.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: 2.5rem; + margin-right: 2.5rem; + width: calc(100% - 5rem); +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: 1em 0em; + -webkit-box-shadow: 0px 0px 0px 1px #D4D4D5; + box-shadow: 0px 0px 0px 1px #D4D4D5; +} +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + -webkit-box-shadow: 0px -1px 0px 0px #D4D4D5; + box-shadow: 0px -1px 0px 0px #D4D4D5; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5; + box-shadow: -1px 0px 0px 0px #D4D4D5; +} +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + padding: 1em; +} +.ui.relaxed.celled.grid > .column:not(.row), +.ui.relaxed.celled.grid > .row > .column { + padding: 1.5em; +} +.ui[class*="very relaxed"].celled.grid > .column:not(.row), +.ui[class*="very relaxed"].celled.grid > .row > .column { + padding: 2em; +} + +/* Internally Celled */ +.ui[class*="internally celled"].grid { + -webkit-box-shadow: none; + box-shadow: none; + margin: 0em; +} +.ui[class*="internally celled"].grid > .row:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + -webkit-box-shadow: none; + box-shadow: none; +} + +/*---------------------- + Vertically Aligned +-----------------------*/ + + +/* Top Aligned */ +.ui[class*="top aligned"].grid > .column:not(.row), +.ui[class*="top aligned"].grid > .row > .column, +.ui.grid > [class*="top aligned"].row > .column, +.ui.grid > [class*="top aligned"].column:not(.row), +.ui.grid > .row > [class*="top aligned"].column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: top; + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +/* Middle Aligned */ +.ui[class*="middle aligned"].grid > .column:not(.row), +.ui[class*="middle aligned"].grid > .row > .column, +.ui.grid > [class*="middle aligned"].row > .column, +.ui.grid > [class*="middle aligned"].column:not(.row), +.ui.grid > .row > [class*="middle aligned"].column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: middle; + -ms-flex-item-align: center !important; + align-self: center !important; +} + +/* Bottom Aligned */ +.ui[class*="bottom aligned"].grid > .column:not(.row), +.ui[class*="bottom aligned"].grid > .row > .column, +.ui.grid > [class*="bottom aligned"].row > .column, +.ui.grid > [class*="bottom aligned"].column:not(.row), +.ui.grid > .row > [class*="bottom aligned"].column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: bottom; + -ms-flex-item-align: end !important; + align-self: flex-end !important; +} + +/* Stretched */ +.ui.stretched.grid > .row > .column, +.ui.stretched.grid > .column, +.ui.grid > .stretched.row > .column, +.ui.grid > .stretched.column:not(.row), +.ui.grid > .row > .stretched.column { + display: -webkit-inline-box !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.ui.stretched.grid > .row > .column > *, +.ui.stretched.grid > .column > *, +.ui.grid > .stretched.row > .column > *, +.ui.grid > .stretched.column:not(.row) > *, +.ui.grid > .row > .stretched.column > * { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +/*---------------------- + Horizontally Centered +-----------------------*/ + + +/* Left Aligned */ +.ui[class*="left aligned"].grid > .column, +.ui[class*="left aligned"].grid > .row > .column, +.ui.grid > [class*="left aligned"].row > .column, +.ui.grid > [class*="left aligned"].column.column, +.ui.grid > .row > [class*="left aligned"].column.column { + text-align: left; + -ms-flex-item-align: inherit; + align-self: inherit; +} + +/* Center Aligned */ +.ui[class*="center aligned"].grid > .column, +.ui[class*="center aligned"].grid > .row > .column, +.ui.grid > [class*="center aligned"].row > .column, +.ui.grid > [class*="center aligned"].column.column, +.ui.grid > .row > [class*="center aligned"].column.column { + text-align: center; + -ms-flex-item-align: inherit; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +/* Right Aligned */ +.ui[class*="right aligned"].grid > .column, +.ui[class*="right aligned"].grid > .row > .column, +.ui.grid > [class*="right aligned"].row > .column, +.ui.grid > [class*="right aligned"].column.column, +.ui.grid > .row > [class*="right aligned"].column.column { + text-align: right; + -ms-flex-item-align: inherit; + align-self: inherit; +} + +/* Justified */ +.ui.justified.grid > .column, +.ui.justified.grid > .row > .column, +.ui.grid > .justified.row > .column, +.ui.grid > .justified.column.column, +.ui.grid > .row > .justified.column.column { + text-align: justify; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + +/*---------------------- + Colored +-----------------------*/ + +.ui.grid > .row > .red.column, +.ui.grid > .row > .orange.column, +.ui.grid > .row > .yellow.column, +.ui.grid > .row > .olive.column, +.ui.grid > .row > .green.column, +.ui.grid > .row > .teal.column, +.ui.grid > .row > .blue.column, +.ui.grid > .row > .violet.column, +.ui.grid > .row > .purple.column, +.ui.grid > .row > .pink.column, +.ui.grid > .row > .brown.column, +.ui.grid > .row > .grey.column, +.ui.grid > .row > .black.column { + margin-top: -1rem; + margin-bottom: -1rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +/* Red */ +.ui.grid > .red.row, +.ui.grid > .red.column, +.ui.grid > .row > .red.column { + background-color: #DB2828 !important; + color: #FFFFFF; +} + +/* Orange */ +.ui.grid > .orange.row, +.ui.grid > .orange.column, +.ui.grid > .row > .orange.column { + background-color: #F2711C !important; + color: #FFFFFF; +} + +/* Yellow */ +.ui.grid > .yellow.row, +.ui.grid > .yellow.column, +.ui.grid > .row > .yellow.column { + background-color: #FBBD08 !important; + color: #FFFFFF; +} + +/* Olive */ +.ui.grid > .olive.row, +.ui.grid > .olive.column, +.ui.grid > .row > .olive.column { + background-color: #B5CC18 !important; + color: #FFFFFF; +} + +/* Green */ +.ui.grid > .green.row, +.ui.grid > .green.column, +.ui.grid > .row > .green.column { + background-color: #21BA45 !important; + color: #FFFFFF; +} + +/* Teal */ +.ui.grid > .teal.row, +.ui.grid > .teal.column, +.ui.grid > .row > .teal.column { + background-color: #00B5AD !important; + color: #FFFFFF; +} + +/* Blue */ +.ui.grid > .blue.row, +.ui.grid > .blue.column, +.ui.grid > .row > .blue.column { + background-color: #2185D0 !important; + color: #FFFFFF; +} + +/* Violet */ +.ui.grid > .violet.row, +.ui.grid > .violet.column, +.ui.grid > .row > .violet.column { + background-color: #6435C9 !important; + color: #FFFFFF; +} + +/* Purple */ +.ui.grid > .purple.row, +.ui.grid > .purple.column, +.ui.grid > .row > .purple.column { + background-color: #A333C8 !important; + color: #FFFFFF; +} + +/* Pink */ +.ui.grid > .pink.row, +.ui.grid > .pink.column, +.ui.grid > .row > .pink.column { + background-color: #E03997 !important; + color: #FFFFFF; +} + +/* Brown */ +.ui.grid > .brown.row, +.ui.grid > .brown.column, +.ui.grid > .row > .brown.column { + background-color: #A5673F !important; + color: #FFFFFF; +} + +/* Grey */ +.ui.grid > .grey.row, +.ui.grid > .grey.column, +.ui.grid > .row > .grey.column { + background-color: #767676 !important; + color: #FFFFFF; +} + +/* Black */ +.ui.grid > .black.row, +.ui.grid > .black.column, +.ui.grid > .row > .black.column { + background-color: #1B1C1D !important; + color: #FFFFFF; +} + +/*---------------------- + Equal Width +-----------------------*/ + +.ui[class*="equal width"].grid > .column:not(.row), +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} +.ui[class*="equal width"].grid > .wide.column, +.ui[class*="equal width"].grid > .row > .wide.column, +.ui.grid > [class*="equal width"].row > .wide.column { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; +} + +/*---------------------- + Reverse +-----------------------*/ + + +/* Mobile */ +@media only screen and (max-width: 767px) { + .ui[class*="mobile reversed"].grid, + .ui[class*="mobile reversed"].grid > .row, + .ui.grid > [class*="mobile reversed"].row { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="mobile vertically reversed"].grid, + .ui.stackable[class*="mobile reversed"] { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + +/* Divided Reversed */ + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5; + box-shadow: -1px 0px 0px 0px #D4D4D5; + } + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } +} + +/* Tablet */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui[class*="tablet reversed"].grid, + .ui[class*="tablet reversed"].grid > .row, + .ui.grid > [class*="tablet reversed"].row { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + +/* Divided Reversed */ + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5; + box-shadow: -1px 0px 0px 0px #D4D4D5; + } + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } +} + +/* Computer */ +@media only screen and (min-width: 992px) { + .ui[class*="computer reversed"].grid, + .ui[class*="computer reversed"].grid > .row, + .ui.grid > [class*="computer reversed"].row { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + +/* Divided Reversed */ + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + -webkit-box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px -1px 0px 0px rgba(34, 36, 38, 0.15); + } + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + -webkit-box-shadow: -1px 0px 0px 0px #D4D4D5; + box-shadow: -1px 0px 0px 0px #D4D4D5; + } + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + -webkit-box-shadow: none; + box-shadow: none; + } +} + +/*------------------- + Doubling +--------------------*/ + + +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.doubling.grid { + width: auto; + } + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + display: inline-block !important; + padding-top: 1rem !important; + padding-bottom: 1rem !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + margin: 0em; + } + .ui[class*="two column"].doubling.grid > .row > .column, + .ui[class*="two column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling.row.row > .column { + width: 100% !important; + } + .ui[class*="three column"].doubling.grid > .row > .column, + .ui[class*="three column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling.row.row > .column { + width: 50% !important; + } + .ui[class*="four column"].doubling.grid > .row > .column, + .ui[class*="four column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling.row.row > .column { + width: 50% !important; + } + .ui[class*="five column"].doubling.grid > .row > .column, + .ui[class*="five column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling.row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="six column"].doubling.grid > .row > .column, + .ui[class*="six column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling.row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="seven column"].doubling.grid > .row > .column, + .ui[class*="seven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling.row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="eight column"].doubling.grid > .row > .column, + .ui[class*="eight column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling.row.row > .column { + width: 25% !important; + } + .ui[class*="nine column"].doubling.grid > .row > .column, + .ui[class*="nine column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling.row.row > .column { + width: 25% !important; + } + .ui[class*="ten column"].doubling.grid > .row > .column, + .ui[class*="ten column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling.row.row > .column { + width: 20% !important; + } + .ui[class*="eleven column"].doubling.grid > .row > .column, + .ui[class*="eleven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling.row.row > .column { + width: 20% !important; + } + .ui[class*="twelve column"].doubling.grid > .row > .column, + .ui[class*="twelve column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling.row.row > .column { + width: 16.66666667% !important; + } + .ui[class*="thirteen column"].doubling.grid > .row > .column, + .ui[class*="thirteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling.row.row > .column { + width: 16.66666667% !important; + } + .ui[class*="fourteen column"].doubling.grid > .row > .column, + .ui[class*="fourteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling.row.row > .column { + width: 14.28571429% !important; + } + .ui[class*="fifteen column"].doubling.grid > .row > .column, + .ui[class*="fifteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling.row.row > .column { + width: 14.28571429% !important; + } + .ui[class*="sixteen column"].doubling.grid > .row > .column, + .ui[class*="sixteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling.row.row > .column { + width: 12.5% !important; + } +} + +/* Mobile Only */ +@media only screen and (max-width: 767px) { + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + padding-top: 1rem !important; + padding-bottom: 1rem !important; + margin: 0em !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { + width: 100% !important; + } + .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { + width: 50% !important; + } + .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { + width: 33.33333333% !important; + } + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { + width: 25% !important; + } + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { + width: 25% !important; + } + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { + width: 25% !important; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: 767px) { + .ui.stackable.grid { + width: auto; + margin-left: 0em !important; + margin-right: 0em !important; + } + .ui.stackable.grid > .row > .wide.column, + .ui.stackable.grid > .wide.column, + .ui.stackable.grid > .column.grid > .column, + .ui.stackable.grid > .column.row > .column, + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column:not(.row), + .ui.grid > .stackable.stackable.row > .column { + width: 100% !important; + margin: 0em 0em !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + padding: 1rem 1rem !important; + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0em; + padding: 0em; + } + +/* Coupling */ + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + +/* Don't pad inside segment or nested grid */ + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -1rem !important; + margin-right: -1rem !important; + } + +/* Divided Stackable */ + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:not(.row):first-child, + .ui.stackable.celled.grid > .column:not(.row):first-child { + border-top: none !important; + } + .ui.inverted.stackable.celled.grid > .column:not(.row), + .ui.inverted.stackable.divided.grid > .column:not(.row), + .ui.inverted.stackable.celled.grid > .row > .column, + .ui.inverted.stackable.divided.grid > .row > .column { + border-top: 1px solid rgba(255, 255, 255, 0.1); + } + .ui.stackable.celled.grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.celled.grid > .row > .column, + .ui.stackable.divided:not(.vertically).grid > .row > .column { + border-top: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: none !important; + box-shadow: none !important; + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } + .ui.stackable.celled.grid > .row { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } +} + +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and (max-width: 767px) { + .ui[class*="tablet only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Tablet Only Hide */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Large Screen Only Hide */ +@media only screen and (min-width: 1200px) and (max-width: 1919px) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Widescreen Only Hide */ +@media only screen and (min-width: 1920px) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/grid.min.css b/semantic/components/grid.min.css new file mode 100644 index 0000000..7afcc80 --- /dev/null +++ b/semantic/components/grid.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0}.ui.grid{margin-top:-1rem;margin-bottom:-1rem;margin-left:-1rem;margin-right:-1rem}.ui.relaxed.grid{margin-left:-1.5rem;margin-right:-1.5rem}.ui[class*="very relaxed"].grid{margin-left:-2.5rem;margin-right:-2.5rem}.ui.grid+.grid{margin-top:1rem}.ui.grid>.column:not(.row),.ui.grid>.row>.column{position:relative;display:inline-block;width:6.25%;padding-left:1rem;padding-right:1rem;vertical-align:top}.ui.grid>*{padding-left:1rem;padding-right:1rem}.ui.grid>.row{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%!important;padding:0;padding-top:1rem;padding-bottom:1rem}.ui.grid>.column:not(.row){padding-top:1rem;padding-bottom:1rem}.ui.grid>.row>.column{margin-top:0;margin-bottom:0}.ui.grid>.row>.column>img,.ui.grid>.row>img{max-width:100%}.ui.grid>.ui.grid:first-child{margin-top:0}.ui.grid>.ui.grid:last-child{margin-bottom:0}.ui.aligned.grid .column>.segment:not(.compact):not(.attached),.ui.grid .aligned.row>.column>.segment:not(.compact):not(.attached){width:100%}.ui.grid .row+.ui.divider{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;margin:1rem 1rem}.ui.grid .column+.ui.vertical.divider{height:calc(50% - (2rem / 2))}.ui.grid>.column:last-child>.horizontal.segment,.ui.grid>.row>.column:last-child>.horizontal.segment{-webkit-box-shadow:none;box-shadow:none}@media only screen and (max-width:767px){.ui.page.grid{width:auto;padding-left:0;padding-right:0;margin-left:0;margin-right:0}}@media only screen and (min-width:768px) and (max-width:991px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:2em;padding-right:2em}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:3%;padding-right:3%}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:15%;padding-right:15%}}@media only screen and (min-width:1920px){.ui.page.grid{width:auto;margin-left:0;margin-right:0;padding-left:23%;padding-right:23%}}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui[class*="one column"].grid>.column:not(.row),.ui[class*="one column"].grid>.row>.column{width:100%}.ui[class*="two column"].grid>.column:not(.row),.ui[class*="two column"].grid>.row>.column{width:50%}.ui[class*="three column"].grid>.column:not(.row),.ui[class*="three column"].grid>.row>.column{width:33.33333333%}.ui[class*="four column"].grid>.column:not(.row),.ui[class*="four column"].grid>.row>.column{width:25%}.ui[class*="five column"].grid>.column:not(.row),.ui[class*="five column"].grid>.row>.column{width:20%}.ui[class*="six column"].grid>.column:not(.row),.ui[class*="six column"].grid>.row>.column{width:16.66666667%}.ui[class*="seven column"].grid>.column:not(.row),.ui[class*="seven column"].grid>.row>.column{width:14.28571429%}.ui[class*="eight column"].grid>.column:not(.row),.ui[class*="eight column"].grid>.row>.column{width:12.5%}.ui[class*="nine column"].grid>.column:not(.row),.ui[class*="nine column"].grid>.row>.column{width:11.11111111%}.ui[class*="ten column"].grid>.column:not(.row),.ui[class*="ten column"].grid>.row>.column{width:10%}.ui[class*="eleven column"].grid>.column:not(.row),.ui[class*="eleven column"].grid>.row>.column{width:9.09090909%}.ui[class*="twelve column"].grid>.column:not(.row),.ui[class*="twelve column"].grid>.row>.column{width:8.33333333%}.ui[class*="thirteen column"].grid>.column:not(.row),.ui[class*="thirteen column"].grid>.row>.column{width:7.69230769%}.ui[class*="fourteen column"].grid>.column:not(.row),.ui[class*="fourteen column"].grid>.row>.column{width:7.14285714%}.ui[class*="fifteen column"].grid>.column:not(.row),.ui[class*="fifteen column"].grid>.row>.column{width:6.66666667%}.ui[class*="sixteen column"].grid>.column:not(.row),.ui[class*="sixteen column"].grid>.row>.column{width:6.25%}.ui.grid>[class*="one column"].row>.column{width:100%!important}.ui.grid>[class*="two column"].row>.column{width:50%!important}.ui.grid>[class*="three column"].row>.column{width:33.33333333%!important}.ui.grid>[class*="four column"].row>.column{width:25%!important}.ui.grid>[class*="five column"].row>.column{width:20%!important}.ui.grid>[class*="six column"].row>.column{width:16.66666667%!important}.ui.grid>[class*="seven column"].row>.column{width:14.28571429%!important}.ui.grid>[class*="eight column"].row>.column{width:12.5%!important}.ui.grid>[class*="nine column"].row>.column{width:11.11111111%!important}.ui.grid>[class*="ten column"].row>.column{width:10%!important}.ui.grid>[class*="eleven column"].row>.column{width:9.09090909%!important}.ui.grid>[class*="twelve column"].row>.column{width:8.33333333%!important}.ui.grid>[class*="thirteen column"].row>.column{width:7.69230769%!important}.ui.grid>[class*="fourteen column"].row>.column{width:7.14285714%!important}.ui.grid>[class*="fifteen column"].row>.column{width:6.66666667%!important}.ui.grid>[class*="sixteen column"].row>.column{width:6.25%!important}.ui.celled.page.grid{-webkit-box-shadow:none;box-shadow:none}.ui.column.grid>[class*="one wide"].column,.ui.grid>.column.row>[class*="one wide"].column,.ui.grid>.row>[class*="one wide"].column,.ui.grid>[class*="one wide"].column{width:6.25%!important}.ui.column.grid>[class*="two wide"].column,.ui.grid>.column.row>[class*="two wide"].column,.ui.grid>.row>[class*="two wide"].column,.ui.grid>[class*="two wide"].column{width:12.5%!important}.ui.column.grid>[class*="three wide"].column,.ui.grid>.column.row>[class*="three wide"].column,.ui.grid>.row>[class*="three wide"].column,.ui.grid>[class*="three wide"].column{width:18.75%!important}.ui.column.grid>[class*="four wide"].column,.ui.grid>.column.row>[class*="four wide"].column,.ui.grid>.row>[class*="four wide"].column,.ui.grid>[class*="four wide"].column{width:25%!important}.ui.column.grid>[class*="five wide"].column,.ui.grid>.column.row>[class*="five wide"].column,.ui.grid>.row>[class*="five wide"].column,.ui.grid>[class*="five wide"].column{width:31.25%!important}.ui.column.grid>[class*="six wide"].column,.ui.grid>.column.row>[class*="six wide"].column,.ui.grid>.row>[class*="six wide"].column,.ui.grid>[class*="six wide"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide"].column,.ui.grid>.column.row>[class*="seven wide"].column,.ui.grid>.row>[class*="seven wide"].column,.ui.grid>[class*="seven wide"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide"].column,.ui.grid>.column.row>[class*="eight wide"].column,.ui.grid>.row>[class*="eight wide"].column,.ui.grid>[class*="eight wide"].column{width:50%!important}.ui.column.grid>[class*="nine wide"].column,.ui.grid>.column.row>[class*="nine wide"].column,.ui.grid>.row>[class*="nine wide"].column,.ui.grid>[class*="nine wide"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide"].column,.ui.grid>.column.row>[class*="ten wide"].column,.ui.grid>.row>[class*="ten wide"].column,.ui.grid>[class*="ten wide"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide"].column,.ui.grid>.column.row>[class*="eleven wide"].column,.ui.grid>.row>[class*="eleven wide"].column,.ui.grid>[class*="eleven wide"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide"].column,.ui.grid>.column.row>[class*="twelve wide"].column,.ui.grid>.row>[class*="twelve wide"].column,.ui.grid>[class*="twelve wide"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide"].column,.ui.grid>.column.row>[class*="thirteen wide"].column,.ui.grid>.row>[class*="thirteen wide"].column,.ui.grid>[class*="thirteen wide"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide"].column,.ui.grid>.column.row>[class*="fourteen wide"].column,.ui.grid>.row>[class*="fourteen wide"].column,.ui.grid>[class*="fourteen wide"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide"].column,.ui.grid>.column.row>[class*="fifteen wide"].column,.ui.grid>.row>[class*="fifteen wide"].column,.ui.grid>[class*="fifteen wide"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide"].column,.ui.grid>.column.row>[class*="sixteen wide"].column,.ui.grid>.row>[class*="sixteen wide"].column,.ui.grid>[class*="sixteen wide"].column{width:100%!important}@media only screen and (min-width:320px) and (max-width:767px){.ui.column.grid>[class*="one wide mobile"].column,.ui.grid>.column.row>[class*="one wide mobile"].column,.ui.grid>.row>[class*="one wide mobile"].column,.ui.grid>[class*="one wide mobile"].column{width:6.25%!important}.ui.column.grid>[class*="two wide mobile"].column,.ui.grid>.column.row>[class*="two wide mobile"].column,.ui.grid>.row>[class*="two wide mobile"].column,.ui.grid>[class*="two wide mobile"].column{width:12.5%!important}.ui.column.grid>[class*="three wide mobile"].column,.ui.grid>.column.row>[class*="three wide mobile"].column,.ui.grid>.row>[class*="three wide mobile"].column,.ui.grid>[class*="three wide mobile"].column{width:18.75%!important}.ui.column.grid>[class*="four wide mobile"].column,.ui.grid>.column.row>[class*="four wide mobile"].column,.ui.grid>.row>[class*="four wide mobile"].column,.ui.grid>[class*="four wide mobile"].column{width:25%!important}.ui.column.grid>[class*="five wide mobile"].column,.ui.grid>.column.row>[class*="five wide mobile"].column,.ui.grid>.row>[class*="five wide mobile"].column,.ui.grid>[class*="five wide mobile"].column{width:31.25%!important}.ui.column.grid>[class*="six wide mobile"].column,.ui.grid>.column.row>[class*="six wide mobile"].column,.ui.grid>.row>[class*="six wide mobile"].column,.ui.grid>[class*="six wide mobile"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide mobile"].column,.ui.grid>.column.row>[class*="seven wide mobile"].column,.ui.grid>.row>[class*="seven wide mobile"].column,.ui.grid>[class*="seven wide mobile"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide mobile"].column,.ui.grid>.column.row>[class*="eight wide mobile"].column,.ui.grid>.row>[class*="eight wide mobile"].column,.ui.grid>[class*="eight wide mobile"].column{width:50%!important}.ui.column.grid>[class*="nine wide mobile"].column,.ui.grid>.column.row>[class*="nine wide mobile"].column,.ui.grid>.row>[class*="nine wide mobile"].column,.ui.grid>[class*="nine wide mobile"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide mobile"].column,.ui.grid>.column.row>[class*="ten wide mobile"].column,.ui.grid>.row>[class*="ten wide mobile"].column,.ui.grid>[class*="ten wide mobile"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide mobile"].column,.ui.grid>.column.row>[class*="eleven wide mobile"].column,.ui.grid>.row>[class*="eleven wide mobile"].column,.ui.grid>[class*="eleven wide mobile"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide mobile"].column,.ui.grid>.column.row>[class*="twelve wide mobile"].column,.ui.grid>.row>[class*="twelve wide mobile"].column,.ui.grid>[class*="twelve wide mobile"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide mobile"].column,.ui.grid>.column.row>[class*="thirteen wide mobile"].column,.ui.grid>.row>[class*="thirteen wide mobile"].column,.ui.grid>[class*="thirteen wide mobile"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide mobile"].column,.ui.grid>.column.row>[class*="fourteen wide mobile"].column,.ui.grid>.row>[class*="fourteen wide mobile"].column,.ui.grid>[class*="fourteen wide mobile"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide mobile"].column,.ui.grid>.column.row>[class*="fifteen wide mobile"].column,.ui.grid>.row>[class*="fifteen wide mobile"].column,.ui.grid>[class*="fifteen wide mobile"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide mobile"].column,.ui.grid>.column.row>[class*="sixteen wide mobile"].column,.ui.grid>.row>[class*="sixteen wide mobile"].column,.ui.grid>[class*="sixteen wide mobile"].column{width:100%!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.column.grid>[class*="one wide tablet"].column,.ui.grid>.column.row>[class*="one wide tablet"].column,.ui.grid>.row>[class*="one wide tablet"].column,.ui.grid>[class*="one wide tablet"].column{width:6.25%!important}.ui.column.grid>[class*="two wide tablet"].column,.ui.grid>.column.row>[class*="two wide tablet"].column,.ui.grid>.row>[class*="two wide tablet"].column,.ui.grid>[class*="two wide tablet"].column{width:12.5%!important}.ui.column.grid>[class*="three wide tablet"].column,.ui.grid>.column.row>[class*="three wide tablet"].column,.ui.grid>.row>[class*="three wide tablet"].column,.ui.grid>[class*="three wide tablet"].column{width:18.75%!important}.ui.column.grid>[class*="four wide tablet"].column,.ui.grid>.column.row>[class*="four wide tablet"].column,.ui.grid>.row>[class*="four wide tablet"].column,.ui.grid>[class*="four wide tablet"].column{width:25%!important}.ui.column.grid>[class*="five wide tablet"].column,.ui.grid>.column.row>[class*="five wide tablet"].column,.ui.grid>.row>[class*="five wide tablet"].column,.ui.grid>[class*="five wide tablet"].column{width:31.25%!important}.ui.column.grid>[class*="six wide tablet"].column,.ui.grid>.column.row>[class*="six wide tablet"].column,.ui.grid>.row>[class*="six wide tablet"].column,.ui.grid>[class*="six wide tablet"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide tablet"].column,.ui.grid>.column.row>[class*="seven wide tablet"].column,.ui.grid>.row>[class*="seven wide tablet"].column,.ui.grid>[class*="seven wide tablet"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide tablet"].column,.ui.grid>.column.row>[class*="eight wide tablet"].column,.ui.grid>.row>[class*="eight wide tablet"].column,.ui.grid>[class*="eight wide tablet"].column{width:50%!important}.ui.column.grid>[class*="nine wide tablet"].column,.ui.grid>.column.row>[class*="nine wide tablet"].column,.ui.grid>.row>[class*="nine wide tablet"].column,.ui.grid>[class*="nine wide tablet"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide tablet"].column,.ui.grid>.column.row>[class*="ten wide tablet"].column,.ui.grid>.row>[class*="ten wide tablet"].column,.ui.grid>[class*="ten wide tablet"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide tablet"].column,.ui.grid>.column.row>[class*="eleven wide tablet"].column,.ui.grid>.row>[class*="eleven wide tablet"].column,.ui.grid>[class*="eleven wide tablet"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide tablet"].column,.ui.grid>.column.row>[class*="twelve wide tablet"].column,.ui.grid>.row>[class*="twelve wide tablet"].column,.ui.grid>[class*="twelve wide tablet"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide tablet"].column,.ui.grid>.column.row>[class*="thirteen wide tablet"].column,.ui.grid>.row>[class*="thirteen wide tablet"].column,.ui.grid>[class*="thirteen wide tablet"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide tablet"].column,.ui.grid>.column.row>[class*="fourteen wide tablet"].column,.ui.grid>.row>[class*="fourteen wide tablet"].column,.ui.grid>[class*="fourteen wide tablet"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide tablet"].column,.ui.grid>.column.row>[class*="fifteen wide tablet"].column,.ui.grid>.row>[class*="fifteen wide tablet"].column,.ui.grid>[class*="fifteen wide tablet"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide tablet"].column,.ui.grid>.column.row>[class*="sixteen wide tablet"].column,.ui.grid>.row>[class*="sixteen wide tablet"].column,.ui.grid>[class*="sixteen wide tablet"].column{width:100%!important}}@media only screen and (min-width:992px){.ui.column.grid>[class*="one wide computer"].column,.ui.grid>.column.row>[class*="one wide computer"].column,.ui.grid>.row>[class*="one wide computer"].column,.ui.grid>[class*="one wide computer"].column{width:6.25%!important}.ui.column.grid>[class*="two wide computer"].column,.ui.grid>.column.row>[class*="two wide computer"].column,.ui.grid>.row>[class*="two wide computer"].column,.ui.grid>[class*="two wide computer"].column{width:12.5%!important}.ui.column.grid>[class*="three wide computer"].column,.ui.grid>.column.row>[class*="three wide computer"].column,.ui.grid>.row>[class*="three wide computer"].column,.ui.grid>[class*="three wide computer"].column{width:18.75%!important}.ui.column.grid>[class*="four wide computer"].column,.ui.grid>.column.row>[class*="four wide computer"].column,.ui.grid>.row>[class*="four wide computer"].column,.ui.grid>[class*="four wide computer"].column{width:25%!important}.ui.column.grid>[class*="five wide computer"].column,.ui.grid>.column.row>[class*="five wide computer"].column,.ui.grid>.row>[class*="five wide computer"].column,.ui.grid>[class*="five wide computer"].column{width:31.25%!important}.ui.column.grid>[class*="six wide computer"].column,.ui.grid>.column.row>[class*="six wide computer"].column,.ui.grid>.row>[class*="six wide computer"].column,.ui.grid>[class*="six wide computer"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide computer"].column,.ui.grid>.column.row>[class*="seven wide computer"].column,.ui.grid>.row>[class*="seven wide computer"].column,.ui.grid>[class*="seven wide computer"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide computer"].column,.ui.grid>.column.row>[class*="eight wide computer"].column,.ui.grid>.row>[class*="eight wide computer"].column,.ui.grid>[class*="eight wide computer"].column{width:50%!important}.ui.column.grid>[class*="nine wide computer"].column,.ui.grid>.column.row>[class*="nine wide computer"].column,.ui.grid>.row>[class*="nine wide computer"].column,.ui.grid>[class*="nine wide computer"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide computer"].column,.ui.grid>.column.row>[class*="ten wide computer"].column,.ui.grid>.row>[class*="ten wide computer"].column,.ui.grid>[class*="ten wide computer"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide computer"].column,.ui.grid>.column.row>[class*="eleven wide computer"].column,.ui.grid>.row>[class*="eleven wide computer"].column,.ui.grid>[class*="eleven wide computer"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide computer"].column,.ui.grid>.column.row>[class*="twelve wide computer"].column,.ui.grid>.row>[class*="twelve wide computer"].column,.ui.grid>[class*="twelve wide computer"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide computer"].column,.ui.grid>.column.row>[class*="thirteen wide computer"].column,.ui.grid>.row>[class*="thirteen wide computer"].column,.ui.grid>[class*="thirteen wide computer"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide computer"].column,.ui.grid>.column.row>[class*="fourteen wide computer"].column,.ui.grid>.row>[class*="fourteen wide computer"].column,.ui.grid>[class*="fourteen wide computer"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide computer"].column,.ui.grid>.column.row>[class*="fifteen wide computer"].column,.ui.grid>.row>[class*="fifteen wide computer"].column,.ui.grid>[class*="fifteen wide computer"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide computer"].column,.ui.grid>.column.row>[class*="sixteen wide computer"].column,.ui.grid>.row>[class*="sixteen wide computer"].column,.ui.grid>[class*="sixteen wide computer"].column{width:100%!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.column.grid>[class*="one wide large screen"].column,.ui.grid>.column.row>[class*="one wide large screen"].column,.ui.grid>.row>[class*="one wide large screen"].column,.ui.grid>[class*="one wide large screen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide large screen"].column,.ui.grid>.column.row>[class*="two wide large screen"].column,.ui.grid>.row>[class*="two wide large screen"].column,.ui.grid>[class*="two wide large screen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide large screen"].column,.ui.grid>.column.row>[class*="three wide large screen"].column,.ui.grid>.row>[class*="three wide large screen"].column,.ui.grid>[class*="three wide large screen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide large screen"].column,.ui.grid>.column.row>[class*="four wide large screen"].column,.ui.grid>.row>[class*="four wide large screen"].column,.ui.grid>[class*="four wide large screen"].column{width:25%!important}.ui.column.grid>[class*="five wide large screen"].column,.ui.grid>.column.row>[class*="five wide large screen"].column,.ui.grid>.row>[class*="five wide large screen"].column,.ui.grid>[class*="five wide large screen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide large screen"].column,.ui.grid>.column.row>[class*="six wide large screen"].column,.ui.grid>.row>[class*="six wide large screen"].column,.ui.grid>[class*="six wide large screen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide large screen"].column,.ui.grid>.column.row>[class*="seven wide large screen"].column,.ui.grid>.row>[class*="seven wide large screen"].column,.ui.grid>[class*="seven wide large screen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide large screen"].column,.ui.grid>.column.row>[class*="eight wide large screen"].column,.ui.grid>.row>[class*="eight wide large screen"].column,.ui.grid>[class*="eight wide large screen"].column{width:50%!important}.ui.column.grid>[class*="nine wide large screen"].column,.ui.grid>.column.row>[class*="nine wide large screen"].column,.ui.grid>.row>[class*="nine wide large screen"].column,.ui.grid>[class*="nine wide large screen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide large screen"].column,.ui.grid>.column.row>[class*="ten wide large screen"].column,.ui.grid>.row>[class*="ten wide large screen"].column,.ui.grid>[class*="ten wide large screen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide large screen"].column,.ui.grid>.column.row>[class*="eleven wide large screen"].column,.ui.grid>.row>[class*="eleven wide large screen"].column,.ui.grid>[class*="eleven wide large screen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide large screen"].column,.ui.grid>.column.row>[class*="twelve wide large screen"].column,.ui.grid>.row>[class*="twelve wide large screen"].column,.ui.grid>[class*="twelve wide large screen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide large screen"].column,.ui.grid>.column.row>[class*="thirteen wide large screen"].column,.ui.grid>.row>[class*="thirteen wide large screen"].column,.ui.grid>[class*="thirteen wide large screen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide large screen"].column,.ui.grid>.column.row>[class*="fourteen wide large screen"].column,.ui.grid>.row>[class*="fourteen wide large screen"].column,.ui.grid>[class*="fourteen wide large screen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide large screen"].column,.ui.grid>.column.row>[class*="fifteen wide large screen"].column,.ui.grid>.row>[class*="fifteen wide large screen"].column,.ui.grid>[class*="fifteen wide large screen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide large screen"].column,.ui.grid>.column.row>[class*="sixteen wide large screen"].column,.ui.grid>.row>[class*="sixteen wide large screen"].column,.ui.grid>[class*="sixteen wide large screen"].column{width:100%!important}}@media only screen and (min-width:1920px){.ui.column.grid>[class*="one wide widescreen"].column,.ui.grid>.column.row>[class*="one wide widescreen"].column,.ui.grid>.row>[class*="one wide widescreen"].column,.ui.grid>[class*="one wide widescreen"].column{width:6.25%!important}.ui.column.grid>[class*="two wide widescreen"].column,.ui.grid>.column.row>[class*="two wide widescreen"].column,.ui.grid>.row>[class*="two wide widescreen"].column,.ui.grid>[class*="two wide widescreen"].column{width:12.5%!important}.ui.column.grid>[class*="three wide widescreen"].column,.ui.grid>.column.row>[class*="three wide widescreen"].column,.ui.grid>.row>[class*="three wide widescreen"].column,.ui.grid>[class*="three wide widescreen"].column{width:18.75%!important}.ui.column.grid>[class*="four wide widescreen"].column,.ui.grid>.column.row>[class*="four wide widescreen"].column,.ui.grid>.row>[class*="four wide widescreen"].column,.ui.grid>[class*="four wide widescreen"].column{width:25%!important}.ui.column.grid>[class*="five wide widescreen"].column,.ui.grid>.column.row>[class*="five wide widescreen"].column,.ui.grid>.row>[class*="five wide widescreen"].column,.ui.grid>[class*="five wide widescreen"].column{width:31.25%!important}.ui.column.grid>[class*="six wide widescreen"].column,.ui.grid>.column.row>[class*="six wide widescreen"].column,.ui.grid>.row>[class*="six wide widescreen"].column,.ui.grid>[class*="six wide widescreen"].column{width:37.5%!important}.ui.column.grid>[class*="seven wide widescreen"].column,.ui.grid>.column.row>[class*="seven wide widescreen"].column,.ui.grid>.row>[class*="seven wide widescreen"].column,.ui.grid>[class*="seven wide widescreen"].column{width:43.75%!important}.ui.column.grid>[class*="eight wide widescreen"].column,.ui.grid>.column.row>[class*="eight wide widescreen"].column,.ui.grid>.row>[class*="eight wide widescreen"].column,.ui.grid>[class*="eight wide widescreen"].column{width:50%!important}.ui.column.grid>[class*="nine wide widescreen"].column,.ui.grid>.column.row>[class*="nine wide widescreen"].column,.ui.grid>.row>[class*="nine wide widescreen"].column,.ui.grid>[class*="nine wide widescreen"].column{width:56.25%!important}.ui.column.grid>[class*="ten wide widescreen"].column,.ui.grid>.column.row>[class*="ten wide widescreen"].column,.ui.grid>.row>[class*="ten wide widescreen"].column,.ui.grid>[class*="ten wide widescreen"].column{width:62.5%!important}.ui.column.grid>[class*="eleven wide widescreen"].column,.ui.grid>.column.row>[class*="eleven wide widescreen"].column,.ui.grid>.row>[class*="eleven wide widescreen"].column,.ui.grid>[class*="eleven wide widescreen"].column{width:68.75%!important}.ui.column.grid>[class*="twelve wide widescreen"].column,.ui.grid>.column.row>[class*="twelve wide widescreen"].column,.ui.grid>.row>[class*="twelve wide widescreen"].column,.ui.grid>[class*="twelve wide widescreen"].column{width:75%!important}.ui.column.grid>[class*="thirteen wide widescreen"].column,.ui.grid>.column.row>[class*="thirteen wide widescreen"].column,.ui.grid>.row>[class*="thirteen wide widescreen"].column,.ui.grid>[class*="thirteen wide widescreen"].column{width:81.25%!important}.ui.column.grid>[class*="fourteen wide widescreen"].column,.ui.grid>.column.row>[class*="fourteen wide widescreen"].column,.ui.grid>.row>[class*="fourteen wide widescreen"].column,.ui.grid>[class*="fourteen wide widescreen"].column{width:87.5%!important}.ui.column.grid>[class*="fifteen wide widescreen"].column,.ui.grid>.column.row>[class*="fifteen wide widescreen"].column,.ui.grid>.row>[class*="fifteen wide widescreen"].column,.ui.grid>[class*="fifteen wide widescreen"].column{width:93.75%!important}.ui.column.grid>[class*="sixteen wide widescreen"].column,.ui.grid>.column.row>[class*="sixteen wide widescreen"].column,.ui.grid>.row>[class*="sixteen wide widescreen"].column,.ui.grid>[class*="sixteen wide widescreen"].column{width:100%!important}}.ui.centered.grid,.ui.centered.grid>.row,.ui.grid>.centered.row{text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.centered.grid>.column:not(.aligned):not(.justified):not(.row),.ui.centered.grid>.row>.column:not(.aligned):not(.justified),.ui.grid .centered.row>.column:not(.aligned):not(.justified){text-align:left}.ui.grid>.centered.column,.ui.grid>.row>.centered.column{display:block;margin-left:auto;margin-right:auto}.ui.grid>.relaxed.row>.column,.ui.relaxed.grid>.column:not(.row),.ui.relaxed.grid>.row>.column{padding-left:1.5rem;padding-right:1.5rem}.ui.grid>[class*="very relaxed"].row>.column,.ui[class*="very relaxed"].grid>.column:not(.row),.ui[class*="very relaxed"].grid>.row>.column{padding-left:2.5rem;padding-right:2.5rem}.ui.grid .relaxed.row+.ui.divider,.ui.relaxed.grid .row+.ui.divider{margin-left:1.5rem;margin-right:1.5rem}.ui.grid [class*="very relaxed"].row+.ui.divider,.ui[class*="very relaxed"].grid .row+.ui.divider{margin-left:2.5rem;margin-right:2.5rem}.ui.padded.grid:not(.vertically):not(.horizontally){margin:0!important}[class*="horizontally padded"].ui.grid{margin-left:0!important;margin-right:0!important}[class*="vertically padded"].ui.grid{margin-top:0!important;margin-bottom:0!important}.ui.grid [class*="left floated"].column{margin-right:auto}.ui.grid [class*="right floated"].column{margin-left:auto}.ui.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="vertically divided"].grid>.column:not(.row),.ui[class*="vertically divided"].grid>.row>.column{margin-top:1rem;margin-bottom:1rem;padding-top:0;padding-bottom:0}.ui[class*="vertically divided"].grid>.row{margin-top:0;margin-bottom:0}.ui.divided.grid:not([class*="vertically divided"])>.column:first-child,.ui.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row:first-child>.column{margin-top:0}.ui.grid>.divided.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui.grid>.divided.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="vertically divided"].grid>.row{position:relative}.ui[class*="vertically divided"].grid>.row:before{position:absolute;content:"";top:0;left:0;width:calc(100% - 2rem);height:1px;margin:0 1rem;-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.padded.divided.grid:not(.vertically):not(.horizontally),[class*="horizontally padded"].ui.divided.grid{width:100%}.ui[class*="vertically divided"].grid>.row:first-child:before{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column{-webkit-box-shadow:-1px 0 0 0 rgba(255,255,255,.1);box-shadow:-1px 0 0 0 rgba(255,255,255,.1)}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row):first-child,.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.inverted[class*="vertically divided"].grid>.row:before{-webkit-box-shadow:0 -1px 0 0 rgba(255,255,255,.1);box-shadow:0 -1px 0 0 rgba(255,255,255,.1)}.ui.relaxed[class*="vertically divided"].grid>.row:before{margin-left:1.5rem;margin-right:1.5rem;width:calc(100% - 3rem)}.ui[class*="very relaxed"][class*="vertically divided"].grid>.row:before{margin-left:2.5rem;margin-right:2.5rem;width:calc(100% - 5rem)}.ui.celled.grid{width:100%;margin:1em 0;-webkit-box-shadow:0 0 0 1px #d4d4d5;box-shadow:0 0 0 1px #d4d4d5}.ui.celled.grid>.row{width:100%!important;margin:0;padding:0;-webkit-box-shadow:0 -1px 0 0 #d4d4d5;box-shadow:0 -1px 0 0 #d4d4d5}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{padding:1em}.ui.relaxed.celled.grid>.column:not(.row),.ui.relaxed.celled.grid>.row>.column{padding:1.5em}.ui[class*="very relaxed"].celled.grid>.column:not(.row),.ui[class*="very relaxed"].celled.grid>.row>.column{padding:2em}.ui[class*="internally celled"].grid{-webkit-box-shadow:none;box-shadow:none;margin:0}.ui[class*="internally celled"].grid>.row:first-child{-webkit-box-shadow:none;box-shadow:none}.ui[class*="internally celled"].grid>.row>.column:first-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid>.row>[class*="top aligned"].column,.ui.grid>[class*="top aligned"].column:not(.row),.ui.grid>[class*="top aligned"].row>.column,.ui[class*="top aligned"].grid>.column:not(.row),.ui[class*="top aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:top;-ms-flex-item-align:start!important;align-self:flex-start!important}.ui.grid>.row>[class*="middle aligned"].column,.ui.grid>[class*="middle aligned"].column:not(.row),.ui.grid>[class*="middle aligned"].row>.column,.ui[class*="middle aligned"].grid>.column:not(.row),.ui[class*="middle aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:middle;-ms-flex-item-align:center!important;align-self:center!important}.ui.grid>.row>[class*="bottom aligned"].column,.ui.grid>[class*="bottom aligned"].column:not(.row),.ui.grid>[class*="bottom aligned"].row>.column,.ui[class*="bottom aligned"].grid>.column:not(.row),.ui[class*="bottom aligned"].grid>.row>.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;vertical-align:bottom;-ms-flex-item-align:end!important;align-self:flex-end!important}.ui.grid>.row>.stretched.column,.ui.grid>.stretched.column:not(.row),.ui.grid>.stretched.row>.column,.ui.stretched.grid>.column,.ui.stretched.grid>.row>.column{display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.grid>.row>.stretched.column>*,.ui.grid>.stretched.column:not(.row)>*,.ui.grid>.stretched.row>.column>*,.ui.stretched.grid>.column>*,.ui.stretched.grid>.row>.column>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>.row>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].column.column,.ui.grid>[class*="left aligned"].row>.column,.ui[class*="left aligned"].grid>.column,.ui[class*="left aligned"].grid>.row>.column{text-align:left;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.row>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].column.column,.ui.grid>[class*="center aligned"].row>.column,.ui[class*="center aligned"].grid>.column,.ui[class*="center aligned"].grid>.row>.column{text-align:center;-ms-flex-item-align:inherit;align-self:inherit}.ui[class*="center aligned"].grid{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.grid>.row>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].column.column,.ui.grid>[class*="right aligned"].row>.column,.ui[class*="right aligned"].grid>.column,.ui[class*="right aligned"].grid>.row>.column{text-align:right;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.justified.column.column,.ui.grid>.justified.row>.column,.ui.grid>.row>.justified.column.column,.ui.justified.grid>.column,.ui.justified.grid>.row>.column{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.grid>.row>.black.column,.ui.grid>.row>.blue.column,.ui.grid>.row>.brown.column,.ui.grid>.row>.green.column,.ui.grid>.row>.grey.column,.ui.grid>.row>.olive.column,.ui.grid>.row>.orange.column,.ui.grid>.row>.pink.column,.ui.grid>.row>.purple.column,.ui.grid>.row>.red.column,.ui.grid>.row>.teal.column,.ui.grid>.row>.violet.column,.ui.grid>.row>.yellow.column{margin-top:-1rem;margin-bottom:-1rem;padding-top:1rem;padding-bottom:1rem}.ui.grid>.red.column,.ui.grid>.red.row,.ui.grid>.row>.red.column{background-color:#db2828!important;color:#fff}.ui.grid>.orange.column,.ui.grid>.orange.row,.ui.grid>.row>.orange.column{background-color:#f2711c!important;color:#fff}.ui.grid>.row>.yellow.column,.ui.grid>.yellow.column,.ui.grid>.yellow.row{background-color:#fbbd08!important;color:#fff}.ui.grid>.olive.column,.ui.grid>.olive.row,.ui.grid>.row>.olive.column{background-color:#b5cc18!important;color:#fff}.ui.grid>.green.column,.ui.grid>.green.row,.ui.grid>.row>.green.column{background-color:#21ba45!important;color:#fff}.ui.grid>.row>.teal.column,.ui.grid>.teal.column,.ui.grid>.teal.row{background-color:#00b5ad!important;color:#fff}.ui.grid>.blue.column,.ui.grid>.blue.row,.ui.grid>.row>.blue.column{background-color:#2185d0!important;color:#fff}.ui.grid>.row>.violet.column,.ui.grid>.violet.column,.ui.grid>.violet.row{background-color:#6435c9!important;color:#fff}.ui.grid>.purple.column,.ui.grid>.purple.row,.ui.grid>.row>.purple.column{background-color:#a333c8!important;color:#fff}.ui.grid>.pink.column,.ui.grid>.pink.row,.ui.grid>.row>.pink.column{background-color:#e03997!important;color:#fff}.ui.grid>.brown.column,.ui.grid>.brown.row,.ui.grid>.row>.brown.column{background-color:#a5673f!important;color:#fff}.ui.grid>.grey.column,.ui.grid>.grey.row,.ui.grid>.row>.grey.column{background-color:#767676!important;color:#fff}.ui.grid>.black.column,.ui.grid>.black.row,.ui.grid>.row>.black.column{background-color:#1b1c1d!important;color:#fff}.ui.grid>[class*="equal width"].row>.column,.ui[class*="equal width"].grid>.column:not(.row),.ui[class*="equal width"].grid>.row>.column{display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>[class*="equal width"].row>.wide.column,.ui[class*="equal width"].grid>.row>.wide.column,.ui[class*="equal width"].grid>.wide.column{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}@media only screen and (max-width:767px){.ui.grid>[class*="mobile reversed"].row,.ui[class*="mobile reversed"].grid,.ui[class*="mobile reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui.stackable[class*="mobile reversed"],.ui[class*="mobile vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="mobile reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="mobile reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991px){.ui.grid>[class*="tablet reversed"].row,.ui[class*="tablet reversed"].grid,.ui[class*="tablet reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="tablet vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="tablet reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="tablet reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:992px){.ui.grid>[class*="computer reversed"].row,.ui[class*="computer reversed"].grid,.ui[class*="computer reversed"].grid>.row{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="computer vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:first-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 rgba(34,36,38,.15);box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.column:last-child,.ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"])>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:first-child:before{-webkit-box-shadow:0 -1px 0 0 rgba(34,36,38,.15);box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:last-child:before{-webkit-box-shadow:none;box-shadow:none}.ui[class*="computer reversed"].celled.grid>.row>.column:first-child{-webkit-box-shadow:-1px 0 0 0 #d4d4d5;box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="computer reversed"].celled.grid>.row>.column:last-child{-webkit-box-shadow:none;box-shadow:none}}@media only screen and (min-width:768px) and (max-width:991px){.ui.doubling.grid{width:auto}.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{display:inline-block!important;padding-top:1rem!important;padding-bottom:1rem!important;-webkit-box-shadow:none!important;box-shadow:none!important;margin:0}.ui.grid>[class*="two column"].doubling.row.row>.column,.ui[class*="two column"].doubling.grid>.column:not(.row),.ui[class*="two column"].doubling.grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling.row.row>.column,.ui[class*="three column"].doubling.grid>.column:not(.row),.ui[class*="three column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling.row.row>.column,.ui[class*="four column"].doubling.grid>.column:not(.row),.ui[class*="four column"].doubling.grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling.row.row>.column,.ui[class*="five column"].doubling.grid>.column:not(.row),.ui[class*="five column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="six column"].doubling.row.row>.column,.ui[class*="six column"].doubling.grid>.column:not(.row),.ui[class*="six column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="seven column"].doubling.row.row>.column,.ui[class*="seven column"].doubling.grid>.column:not(.row),.ui[class*="seven column"].doubling.grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eight column"].doubling.row.row>.column,.ui[class*="eight column"].doubling.grid>.column:not(.row),.ui[class*="eight column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="nine column"].doubling.row.row>.column,.ui[class*="nine column"].doubling.grid>.column:not(.row),.ui[class*="nine column"].doubling.grid>.row>.column{width:25%!important}.ui.grid>[class*="ten column"].doubling.row.row>.column,.ui[class*="ten column"].doubling.grid>.column:not(.row),.ui[class*="ten column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="eleven column"].doubling.row.row>.column,.ui[class*="eleven column"].doubling.grid>.column:not(.row),.ui[class*="eleven column"].doubling.grid>.row>.column{width:20%!important}.ui.grid>[class*="twelve column"].doubling.row.row>.column,.ui[class*="twelve column"].doubling.grid>.column:not(.row),.ui[class*="twelve column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="thirteen column"].doubling.row.row>.column,.ui[class*="thirteen column"].doubling.grid>.column:not(.row),.ui[class*="thirteen column"].doubling.grid>.row>.column{width:16.66666667%!important}.ui.grid>[class*="fourteen column"].doubling.row.row>.column,.ui[class*="fourteen column"].doubling.grid>.column:not(.row),.ui[class*="fourteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="fifteen column"].doubling.row.row>.column,.ui[class*="fifteen column"].doubling.grid>.column:not(.row),.ui[class*="fifteen column"].doubling.grid>.row>.column{width:14.28571429%!important}.ui.grid>[class*="sixteen column"].doubling.row.row>.column,.ui[class*="sixteen column"].doubling.grid>.column:not(.row),.ui[class*="sixteen column"].doubling.grid>.row>.column{width:12.5%!important}}@media only screen and (max-width:767px){.ui.doubling.grid>.row,.ui.grid>.doubling.row{margin:0!important;padding:0!important}.ui.doubling.grid>.row>.column,.ui.grid>.doubling.row>.column{padding-top:1rem!important;padding-bottom:1rem!important;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.grid>[class*="two column"].doubling:not(.stackable).row.row>.column,.ui[class*="two column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="two column"].doubling:not(.stackable).grid>.row>.column{width:100%!important}.ui.grid>[class*="three column"].doubling:not(.stackable).row.row>.column,.ui[class*="three column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="three column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="four column"].doubling:not(.stackable).row.row>.column,.ui[class*="four column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="four column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="five column"].doubling:not(.stackable).row.row>.column,.ui[class*="five column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="five column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="six column"].doubling:not(.stackable).row.row>.column,.ui[class*="six column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="six column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="seven column"].doubling:not(.stackable).row.row>.column,.ui[class*="seven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="seven column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="eight column"].doubling:not(.stackable).row.row>.column,.ui[class*="eight column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eight column"].doubling:not(.stackable).grid>.row>.column{width:50%!important}.ui.grid>[class*="nine column"].doubling:not(.stackable).row.row>.column,.ui[class*="nine column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="nine column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="ten column"].doubling:not(.stackable).row.row>.column,.ui[class*="ten column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="ten column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="eleven column"].doubling:not(.stackable).row.row>.column,.ui[class*="eleven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eleven column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="twelve column"].doubling:not(.stackable).row.row>.column,.ui[class*="twelve column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="twelve column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="thirteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="thirteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="thirteen column"].doubling:not(.stackable).grid>.row>.column{width:33.33333333%!important}.ui.grid>[class*="fourteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fourteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fourteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="fifteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="fifteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fifteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}.ui.grid>[class*="sixteen column"].doubling:not(.stackable).row.row>.column,.ui[class*="sixteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="sixteen column"].doubling:not(.stackable).grid>.row>.column{width:25%!important}}@media only screen and (max-width:767px){.ui.stackable.grid{width:auto;margin-left:0!important;margin-right:0!important}.ui.grid>.stackable.stackable.row>.column,.ui.stackable.grid>.column.grid>.column,.ui.stackable.grid>.column.row>.column,.ui.stackable.grid>.column:not(.row),.ui.stackable.grid>.row>.column,.ui.stackable.grid>.row>.wide.column,.ui.stackable.grid>.wide.column{width:100%!important;margin:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;padding:1rem 1rem!important}.ui.stackable.grid:not(.vertically)>.row{margin:0;padding:0}.ui.container>.ui.stackable.grid>.column,.ui.container>.ui.stackable.grid>.row>.column{padding-left:0!important;padding-right:0!important}.ui.grid .ui.stackable.grid,.ui.segment:not(.vertical) .ui.stackable.page.grid{margin-left:-1rem!important;margin-right:-1rem!important}.ui.stackable.celled.grid>.column:not(.row):first-child,.ui.stackable.celled.grid>.row:first-child>.column:first-child,.ui.stackable.divided.grid>.column:not(.row):first-child,.ui.stackable.divided.grid>.row:first-child>.column:first-child{border-top:none!important}.ui.inverted.stackable.celled.grid>.column:not(.row),.ui.inverted.stackable.celled.grid>.row>.column,.ui.inverted.stackable.divided.grid>.column:not(.row),.ui.inverted.stackable.divided.grid>.row>.column{border-top:1px solid rgba(255,255,255,.1)}.ui.stackable.celled.grid>.column:not(.row),.ui.stackable.celled.grid>.row>.column,.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{border-top:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none!important;box-shadow:none!important;padding-top:2rem!important;padding-bottom:2rem!important}.ui.stackable.celled.grid>.row{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided:not(.vertically).grid>.column:not(.row),.ui.stackable.divided:not(.vertically).grid>.row>.column{padding-left:0!important;padding-right:0!important}}@media only screen and (max-width:767px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>[class*="tablet only"].row:not(.mobile),.ui[class*="tablet only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].row:not(.mobile),.ui[class*="computer only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].row:not(.tablet),.ui[class*="mobile only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].column:not(.tablet),.ui.grid.grid.grid>[class*="computer only"].row:not(.tablet),.ui[class*="computer only"].grid.grid.grid:not(.tablet){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui[class*="large screen only"].grid.grid.grid:not(.mobile){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile){display:none!important}}@media only screen and (min-width:1920px){.ui.grid.grid.grid>.row>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>[class*="tablet only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer){display:none!important}} \ No newline at end of file diff --git a/semantic/components/header.css b/semantic/components/header.css new file mode 100644 index 0000000..cdebadc --- /dev/null +++ b/semantic/components/header.css @@ -0,0 +1,727 @@ +/*! + * # Semantic UI 2.4.1 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Header +*******************************/ + + +/* Standard */ +.ui.header { + border: none; + margin: calc(2rem - 0.14285714em ) 0em 1rem; + padding: 0em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + line-height: 1.28571429em; + text-transform: none; + color: rgba(0, 0, 0, 0.87); +} +.ui.header:first-child { + margin-top: -0.14285714em; +} +.ui.header:last-child { + margin-bottom: 0em; +} + +/*-------------- + Sub Header +---------------*/ + +.ui.header .sub.header { + display: block; + font-weight: normal; + padding: 0em; + margin: 0em; + font-size: 1rem; + line-height: 1.2em; + color: rgba(0, 0, 0, 0.6); +} + +/*-------------- + Icon +---------------*/ + +.ui.header > .icon { + display: table-cell; + opacity: 1; + font-size: 1.5em; + padding-top: 0em; + vertical-align: middle; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: 0.75rem; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image:not(.icon), +.ui.header > img { + display: inline-block; + margin-top: 0.14285714em; + width: 2.5em; + height: auto; + vertical-align: middle; +} +.ui.header > .image:not(.icon):only-child, +.ui.header > img:only-child { + margin-right: 0.75rem; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: top; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: 0.75rem; + vertical-align: middle; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: 0.75rem; + display: table-cell; + vertical-align: middle; +} + +/*-------------- + Loose Coupling +---------------*/ + +.ui.header .ui.label { + font-size: ''; + margin-left: 0.5rem; + vertical-align: middle; +} + +/* Positioning */ +.ui.header + p { + margin-top: 0em; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Page +---------------*/ + +h1.ui.header { + font-size: 2rem; +} +h2.ui.header { + font-size: 1.71428571rem; +} +h3.ui.header { + font-size: 1.28571429rem; +} +h4.ui.header { + font-size: 1.07142857rem; +} +h5.ui.header { + font-size: 1rem; +} + +/* Sub Header */ +h1.ui.header .sub.header { + font-size: 1.14285714rem; +} +h2.ui.header .sub.header { + font-size: 1.14285714rem; +} +h3.ui.header .sub.header { + font-size: 1rem; +} +h4.ui.header .sub.header { + font-size: 1rem; +} +h5.ui.header .sub.header { + font-size: 0.92857143rem; +} + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: 2em; +} +.ui.large.header { + font-size: 1.71428571em; +} +.ui.medium.header { + font-size: 1.28571429em; +} +.ui.small.header { + font-size: 1.07142857em; +} +.ui.tiny.header { + font-size: 1em; +} + +/* Sub Header */ +.ui.huge.header .sub.header { + font-size: 1.14285714rem; +} +.ui.large.header .sub.header { + font-size: 1.14285714rem; +} +.ui.header .sub.header { + font-size: 1rem; +} +.ui.small.header .sub.header { + font-size: 1rem; +} +.ui.tiny.header .sub.header { + font-size: 0.92857143rem; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: 0.14285714rem; + font-weight: bold; + font-size: 0.85714286em; + text-transform: uppercase; + color: ''; +} +.ui.small.sub.header { + font-size: 0.78571429em; +} +.ui.sub.header { + font-size: 0.85714286em; +} +.ui.large.sub.header { + font-size: 0.92857143em; +} +.ui.huge.sub.header { + font-size: 1em; +} + +/*------------------- + Icon +--------------------*/ + +.ui.icon.header { + display: inline-block; + text-align: center; + margin: 2rem 0em 1rem; +} +.ui.icon.header:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} +.ui.icon.header:first-child { + margin-top: 0em; +} +.ui.icon.header .icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0em; + font-size: 3em; + margin: 0em auto 0.5rem; + opacity: 1; +} +.ui.icon.header .content { + display: block; + padding: 0em; +} +.ui.icon.header .circular.icon { + font-size: 2em; +} +.ui.icon.header .square.icon { + font-size: 2em; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} + + +/******************************* + States +*******************************/ + +.ui.disabled.header { + opacity: 0.45; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.header { + color: #FFFFFF; +} +.ui.inverted.header .sub.header { + color: rgba(255, 255, 255, 0.8); +} +.ui.inverted.attached.header { + background: #545454 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05))); + background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + -webkit-box-shadow: none; + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: #545454 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05))); + background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.block.header { + border-bottom: none; +} + +/*------------------- + Colors +--------------------*/ + + +/*--- Red ---*/ + +.ui.red.header { + color: #DB2828 !important; +} +a.ui.red.header:hover { + color: #d01919 !important; +} +.ui.red.dividing.header { + border-bottom: 2px solid #DB2828; +} + +/* Inverted */ +.ui.inverted.red.header { + color: #FF695E !important; +} +a.ui.inverted.red.header:hover { + color: #ff5144 !important; +} + +/*--- Orange ---*/ + +.ui.orange.header { + color: #F2711C !important; +} +a.ui.orange.header:hover { + color: #f26202 !important; +} +.ui.orange.dividing.header { + border-bottom: 2px solid #F2711C; +} + +/* Inverted */ +.ui.inverted.orange.header { + color: #FF851B !important; +} +a.ui.inverted.orange.header:hover { + color: #ff7701 !important; +} + +/*--- Olive ---*/ + +.ui.olive.header { + color: #B5CC18 !important; +} +a.ui.olive.header:hover { + color: #a7bd0d !important; +} +.ui.olive.dividing.header { + border-bottom: 2px solid #B5CC18; +} + +/* Inverted */ +.ui.inverted.olive.header { + color: #D9E778 !important; +} +a.ui.inverted.olive.header:hover { + color: #d8ea5c !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.header { + color: #FBBD08 !important; +} +a.ui.yellow.header:hover { + color: #eaae00 !important; +} +.ui.yellow.dividing.header { + border-bottom: 2px solid #FBBD08; +} + +/* Inverted */ +.ui.inverted.yellow.header { + color: #FFE21F !important; +} +a.ui.inverted.yellow.header:hover { + color: #ffdf05 !important; +} + +/*--- Green ---*/ + +.ui.green.header { + color: #21BA45 !important; +} +a.ui.green.header:hover { + color: #16ab39 !important; +} +.ui.green.dividing.header { + border-bottom: 2px solid #21BA45; +} + +/* Inverted */ +.ui.inverted.green.header { + color: #2ECC40 !important; +} +a.ui.inverted.green.header:hover { + color: #22be34 !important; +} + +/*--- Teal ---*/ + +.ui.teal.header { + color: #00B5AD !important; +} +a.ui.teal.header:hover { + color: #009c95 !important; +} +.ui.teal.dividing.header { + border-bottom: 2px solid #00B5AD; +} + +/* Inverted */ +.ui.inverted.teal.header { + color: #6DFFFF !important; +} +a.ui.inverted.teal.header:hover { + color: #54ffff !important; +} + +/*--- Blue ---*/ + +.ui.blue.header { + color: #2185D0 !important; +} +a.ui.blue.header:hover { + color: #1678c2 !important; +} +.ui.blue.dividing.header { + border-bottom: 2px solid #2185D0; +} + +/* Inverted */ +.ui.inverted.blue.header { + color: #54C8FF !important; +} +a.ui.inverted.blue.header:hover { + color: #3ac0ff !important; +} + +/*--- Violet ---*/ + +.ui.violet.header { + color: #6435C9 !important; +} +a.ui.violet.header:hover { + color: #5829bb !important; +} +.ui.violet.dividing.header { + border-bottom: 2px solid #6435C9; +} + +/* Inverted */ +.ui.inverted.violet.header { + color: #A291FB !important; +} +a.ui.inverted.violet.header:hover { + color: #8a73ff !important; +} + +/*--- Purple ---*/ + +.ui.purple.header { + color: #A333C8 !important; +} +a.ui.purple.header:hover { + color: #9627ba !important; +} +.ui.purple.dividing.header { + border-bottom: 2px solid #A333C8; +} + +/* Inverted */ +.ui.inverted.purple.header { + color: #DC73FF !important; +} +a.ui.inverted.purple.header:hover { + color: #d65aff !important; +} + +/*--- Pink ---*/ + +.ui.pink.header { + color: #E03997 !important; +} +a.ui.pink.header:hover { + color: #e61a8d !important; +} +.ui.pink.dividing.header { + border-bottom: 2px solid #E03997; +} + +/* Inverted */ +.ui.inverted.pink.header { + color: #FF8EDF !important; +} +a.ui.inverted.pink.header:hover { + color: #ff74d8 !important; +} + +/*--- Brown ---*/ + +.ui.brown.header { + color: #A5673F !important; +} +a.ui.brown.header:hover { + color: #975b33 !important; +} +.ui.brown.dividing.header { + border-bottom: 2px solid #A5673F; +} + +/* Inverted */ +.ui.inverted.brown.header { + color: #D67C1C !important; +} +a.ui.inverted.brown.header:hover { + color: #c86f11 !important; +} + +/*--- Grey ---*/ + +.ui.grey.header { + color: #767676 !important; +} +a.ui.grey.header:hover { + color: #838383 !important; +} +.ui.grey.dividing.header { + border-bottom: 2px solid #767676; +} + +/* Inverted */ +.ui.inverted.grey.header { + color: #DCDDDE !important; +} +a.ui.inverted.grey.header:hover { + color: #cfd0d2 !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: 0.5em; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: 0.5em; +} + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: 0.21428571rem; + border-bottom: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.dividing.header .sub.header { + padding-bottom: 0.21428571rem; +} +.ui.dividing.header .icon { + margin-bottom: 0em; +} +.ui.inverted.dividing.header { + border-bottom-color: rgba(255, 255, 255, 0.1); +} + +/*------------------- + Block +--------------------*/ + +.ui.block.header { + background: #F3F4F5; + padding: 0.78571429rem 1rem; + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid #D4D4D5; + border-radius: 0.28571429rem; +} +.ui.tiny.block.header { + font-size: 0.85714286rem; +} +.ui.small.block.header { + font-size: 0.92857143rem; +} +.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: 1rem; +} +.ui.large.block.header { + font-size: 1.14285714rem; +} +.ui.huge.block.header { + font-size: 1.42857143rem; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: #FFFFFF; + padding: 0.78571429rem 1rem; + margin-left: -1px; + margin-right: -1px; + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid #D4D4D5; +} +.ui.attached.block.header { + background: #F3F4F5; +} +.ui.attached:not(.top):not(.bottom).header { + margin-top: 0em; + margin-bottom: 0em; + border-top: none; + border-radius: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: 0.85714286em; +} +.ui.small.attached.header { + font-size: 0.92857143em; +} +.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: 1em; +} +.ui.large.attached.header { + font-size: 1.14285714em; +} +.ui.huge.attached.header { + font-size: 1.42857143em; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: 1.28571429em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/header.min.css b/semantic/components/header.min.css new file mode 100644 index 0000000..a496a5a --- /dev/null +++ b/semantic/components/header.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.header{border:none;margin:calc(2rem - .14285714em) 0 1rem;padding:0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;line-height:1.28571429em;text-transform:none;color:rgba(0,0,0,.87)}.ui.header:first-child{margin-top:-.14285714em}.ui.header:last-child{margin-bottom:0}.ui.header .sub.header{display:block;font-weight:400;padding:0;margin:0;font-size:1rem;line-height:1.2em;color:rgba(0,0,0,.6)}.ui.header>.icon{display:table-cell;opacity:1;font-size:1.5em;padding-top:0;vertical-align:middle}.ui.header .icon:only-child{display:inline-block;padding:0;margin-right:.75rem}.ui.header>.image:not(.icon),.ui.header>img{display:inline-block;margin-top:.14285714em;width:2.5em;height:auto;vertical-align:middle}.ui.header>.image:not(.icon):only-child,.ui.header>img:only-child{margin-right:.75rem}.ui.header .content{display:inline-block;vertical-align:top}.ui.header>.image+.content,.ui.header>img+.content{padding-left:.75rem;vertical-align:middle}.ui.header>.icon+.content{padding-left:.75rem;display:table-cell;vertical-align:middle}.ui.header .ui.label{font-size:'';margin-left:.5rem;vertical-align:middle}.ui.header+p{margin-top:0}h1.ui.header{font-size:2rem}h2.ui.header{font-size:1.71428571rem}h3.ui.header{font-size:1.28571429rem}h4.ui.header{font-size:1.07142857rem}h5.ui.header{font-size:1rem}h1.ui.header .sub.header{font-size:1.14285714rem}h2.ui.header .sub.header{font-size:1.14285714rem}h3.ui.header .sub.header{font-size:1rem}h4.ui.header .sub.header{font-size:1rem}h5.ui.header .sub.header{font-size:.92857143rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.71428571em}.ui.medium.header{font-size:1.28571429em}.ui.small.header{font-size:1.07142857em}.ui.tiny.header{font-size:1em}.ui.huge.header .sub.header{font-size:1.14285714rem}.ui.large.header .sub.header{font-size:1.14285714rem}.ui.header .sub.header{font-size:1rem}.ui.small.header .sub.header{font-size:1rem}.ui.tiny.header .sub.header{font-size:.92857143rem}.ui.sub.header{padding:0;margin-bottom:.14285714rem;font-weight:700;font-size:.85714286em;text-transform:uppercase;color:''}.ui.small.sub.header{font-size:.78571429em}.ui.sub.header{font-size:.85714286em}.ui.large.sub.header{font-size:.92857143em}.ui.huge.sub.header{font-size:1em}.ui.icon.header{display:inline-block;text-align:center;margin:2rem 0 1rem}.ui.icon.header:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.icon.header:first-child{margin-top:0}.ui.icon.header .icon{float:none;display:block;width:auto;height:auto;line-height:1;padding:0;font-size:3em;margin:0 auto .5rem;opacity:1}.ui.icon.header .content{display:block;padding:0}.ui.icon.header .circular.icon{font-size:2em}.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{margin-left:auto;margin-right:auto;display:block}.ui.disabled.header{opacity:.45}.ui.inverted.header{color:#fff}.ui.inverted.header .sub.header{color:rgba(255,255,255,.8)}.ui.inverted.attached.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.ui.inverted.block.header{background:#545454 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#545454 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#545454 linear-gradient(transparent,rgba(0,0,0,.05));-webkit-box-shadow:none;box-shadow:none}.ui.inverted.block.header{border-bottom:none}.ui.red.header{color:#db2828!important}a.ui.red.header:hover{color:#d01919!important}.ui.red.dividing.header{border-bottom:2px solid #db2828}.ui.inverted.red.header{color:#ff695e!important}a.ui.inverted.red.header:hover{color:#ff5144!important}.ui.orange.header{color:#f2711c!important}a.ui.orange.header:hover{color:#f26202!important}.ui.orange.dividing.header{border-bottom:2px solid #f2711c}.ui.inverted.orange.header{color:#ff851b!important}a.ui.inverted.orange.header:hover{color:#ff7701!important}.ui.olive.header{color:#b5cc18!important}a.ui.olive.header:hover{color:#a7bd0d!important}.ui.olive.dividing.header{border-bottom:2px solid #b5cc18}.ui.inverted.olive.header{color:#d9e778!important}a.ui.inverted.olive.header:hover{color:#d8ea5c!important}.ui.yellow.header{color:#fbbd08!important}a.ui.yellow.header:hover{color:#eaae00!important}.ui.yellow.dividing.header{border-bottom:2px solid #fbbd08}.ui.inverted.yellow.header{color:#ffe21f!important}a.ui.inverted.yellow.header:hover{color:#ffdf05!important}.ui.green.header{color:#21ba45!important}a.ui.green.header:hover{color:#16ab39!important}.ui.green.dividing.header{border-bottom:2px solid #21ba45}.ui.inverted.green.header{color:#2ecc40!important}a.ui.inverted.green.header:hover{color:#22be34!important}.ui.teal.header{color:#00b5ad!important}a.ui.teal.header:hover{color:#009c95!important}.ui.teal.dividing.header{border-bottom:2px solid #00b5ad}.ui.inverted.teal.header{color:#6dffff!important}a.ui.inverted.teal.header:hover{color:#54ffff!important}.ui.blue.header{color:#2185d0!important}a.ui.blue.header:hover{color:#1678c2!important}.ui.blue.dividing.header{border-bottom:2px solid #2185d0}.ui.inverted.blue.header{color:#54c8ff!important}a.ui.inverted.blue.header:hover{color:#3ac0ff!important}.ui.violet.header{color:#6435c9!important}a.ui.violet.header:hover{color:#5829bb!important}.ui.violet.dividing.header{border-bottom:2px solid #6435c9}.ui.inverted.violet.header{color:#a291fb!important}a.ui.inverted.violet.header:hover{color:#8a73ff!important}.ui.purple.header{color:#a333c8!important}a.ui.purple.header:hover{color:#9627ba!important}.ui.purple.dividing.header{border-bottom:2px solid #a333c8}.ui.inverted.purple.header{color:#dc73ff!important}a.ui.inverted.purple.header:hover{color:#d65aff!important}.ui.pink.header{color:#e03997!important}a.ui.pink.header:hover{color:#e61a8d!important}.ui.pink.dividing.header{border-bottom:2px solid #e03997}.ui.inverted.pink.header{color:#ff8edf!important}a.ui.inverted.pink.header:hover{color:#ff74d8!important}.ui.brown.header{color:#a5673f!important}a.ui.brown.header:hover{color:#975b33!important}.ui.brown.dividing.header{border-bottom:2px solid #a5673f}.ui.inverted.brown.header{color:#d67c1c!important}a.ui.inverted.brown.header:hover{color:#c86f11!important}.ui.grey.header{color:#767676!important}a.ui.grey.header:hover{color:#838383!important}.ui.grey.dividing.header{border-bottom:2px solid #767676}.ui.inverted.grey.header{color:#dcddde!important}a.ui.inverted.grey.header:hover{color:#cfd0d2!important}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header,.ui.centered.header{text-align:center}.ui.justified.header{text-align:justify}.ui.justified.header:after{display:inline-block;content:'';width:100%}.ui.floated.header,.ui[class*="left floated"].header{float:left;margin-top:0;margin-right:.5em}.ui[class*="right floated"].header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.21428571rem;border-bottom:1px solid rgba(34,36,38,.15)}.ui.dividing.header .sub.header{padding-bottom:.21428571rem}.ui.dividing.header .icon{margin-bottom:0}.ui.inverted.dividing.header{border-bottom-color:rgba(255,255,255,.1)}.ui.block.header{background:#f3f4f5;padding:.78571429rem 1rem;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5;border-radius:.28571429rem}.ui.tiny.block.header{font-size:.85714286rem}.ui.small.block.header{font-size:.92857143rem}.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1rem}.ui.large.block.header{font-size:1.14285714rem}.ui.huge.block.header{font-size:1.42857143rem}.ui.attached.header{background:#fff;padding:.78571429rem 1rem;margin-left:-1px;margin-right:-1px;-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached.block.header{background:#f3f4f5}.ui.attached:not(.top):not(.bottom).header{margin-top:0;margin-bottom:0;border-top:none;border-radius:0}.ui.top.attached.header{margin-bottom:0;border-radius:.28571429rem .28571429rem 0 0}.ui.bottom.attached.header{margin-top:0;border-top:none;border-radius:0 0 .28571429rem .28571429rem}.ui.tiny.attached.header{font-size:.85714286em}.ui.small.attached.header{font-size:.92857143em}.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1em}.ui.large.attached.header{font-size:1.14285714em}.ui.huge.attached.header{font-size:1.42857143em}.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){font-size:1.28571429em} \ No newline at end of file diff --git a/semantic/components/icon.css b/semantic/components/icon.css new file mode 100644 index 0000000..188dd2d --- /dev/null +++ b/semantic/components/icon.css @@ -0,0 +1,4806 @@ +/*! + * # Semantic UI 2.4.1 - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Icon +*******************************/ + +@font-face { + font-family: 'Icons'; + src: url("./../themes/default/assets/fonts/icons.eot"); + src: url("./../themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("./../themes/default/assets/fonts/icons.woff2") format('woff2'), url("./../themes/default/assets/fonts/icons.woff") format('woff'), url("./../themes/default/assets/fonts/icons.ttf") format('truetype'), url("./../themes/default/assets/fonts/icons.svg#icons") format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon { + display: inline-block; + opacity: 1; + margin: 0em 0.25rem 0em 0em; + width: 1.18em; + height: 1em; + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + text-align: center; + speak: none; + font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +i.icon:before { + background: none !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Loading +---------------*/ + +i.icon.loading { + height: 1em; + line-height: 1; + -webkit-animation: icon-loading 2s linear infinite; + animation: icon-loading 2s linear infinite; +} +@-webkit-keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes icon-loading { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +/******************************* + States +*******************************/ + +i.icon.hover { + opacity: 1 !important; +} +i.icon.active { + opacity: 1 !important; +} +i.emphasized.icon { + opacity: 1 !important; +} +i.disabled.icon { + opacity: 0.45 !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Fitted +--------------------*/ + +i.fitted.icon { + width: auto; + margin: 0em !important; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon, +i.link.icons { + cursor: pointer; + opacity: 0.8; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +i.link.icon:hover, +i.link.icons:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + padding: 0.5em 0em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + width: 2em !important; + height: 2em !important; +} +i.circular.inverted.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + width: 2em; + height: 2em; + padding: 0.5em 0em !important; + -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; +} +i.bordered.inverted.icon { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + + +/* Inverted Shapes */ +i.inverted.bordered.icon, +i.inverted.circular.icon { + background-color: #1B1C1D !important; + color: #FFFFFF !important; +} +i.inverted.icon { + color: #FFFFFF; +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +i.red.icon { + color: #DB2828 !important; +} +i.inverted.red.icon { + color: #FF695E !important; +} +i.inverted.bordered.red.icon, +i.inverted.circular.red.icon { + background-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Orange */ +i.orange.icon { + color: #F2711C !important; +} +i.inverted.orange.icon { + color: #FF851B !important; +} +i.inverted.bordered.orange.icon, +i.inverted.circular.orange.icon { + background-color: #F2711C !important; + color: #FFFFFF !important; +} + +/* Yellow */ +i.yellow.icon { + color: #FBBD08 !important; +} +i.inverted.yellow.icon { + color: #FFE21F !important; +} +i.inverted.bordered.yellow.icon, +i.inverted.circular.yellow.icon { + background-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Olive */ +i.olive.icon { + color: #B5CC18 !important; +} +i.inverted.olive.icon { + color: #D9E778 !important; +} +i.inverted.bordered.olive.icon, +i.inverted.circular.olive.icon { + background-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Green */ +i.green.icon { + color: #21BA45 !important; +} +i.inverted.green.icon { + color: #2ECC40 !important; +} +i.inverted.bordered.green.icon, +i.inverted.circular.green.icon { + background-color: #21BA45 !important; + color: #FFFFFF !important; +} + +/* Teal */ +i.teal.icon { + color: #00B5AD !important; +} +i.inverted.teal.icon { + color: #6DFFFF !important; +} +i.inverted.bordered.teal.icon, +i.inverted.circular.teal.icon { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Blue */ +i.blue.icon { + color: #2185D0 !important; +} +i.inverted.blue.icon { + color: #54C8FF !important; +} +i.inverted.bordered.blue.icon, +i.inverted.circular.blue.icon { + background-color: #2185D0 !important; + color: #FFFFFF !important; +} + +/* Violet */ +i.violet.icon { + color: #6435C9 !important; +} +i.inverted.violet.icon { + color: #A291FB !important; +} +i.inverted.bordered.violet.icon, +i.inverted.circular.violet.icon { + background-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Purple */ +i.purple.icon { + color: #A333C8 !important; +} +i.inverted.purple.icon { + color: #DC73FF !important; +} +i.inverted.bordered.purple.icon, +i.inverted.circular.purple.icon { + background-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Pink */ +i.pink.icon { + color: #E03997 !important; +} +i.inverted.pink.icon { + color: #FF8EDF !important; +} +i.inverted.bordered.pink.icon, +i.inverted.circular.pink.icon { + background-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Brown */ +i.brown.icon { + color: #A5673F !important; +} +i.inverted.brown.icon { + color: #D67C1C !important; +} +i.inverted.bordered.brown.icon, +i.inverted.circular.brown.icon { + background-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Grey */ +i.grey.icon { + color: #767676 !important; +} +i.inverted.grey.icon { + color: #DCDDDE !important; +} +i.inverted.bordered.grey.icon, +i.inverted.circular.grey.icon { + background-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Black */ +i.black.icon { + color: #1B1C1D !important; +} +i.inverted.black.icon { + color: #545454 !important; +} +i.inverted.bordered.black.icon, +i.inverted.circular.black.icon { + background-color: #1B1C1D !important; + color: #FFFFFF !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.mini.icon, +i.mini.icons { + line-height: 1; + font-size: 0.4em; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: 0.5em; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: 0.75em; +} +i.icon, +i.icons { + font-size: 1em; +} +i.large.icon, +i.large.icons { + line-height: 1; + vertical-align: middle; + font-size: 1.5em; +} +i.big.icon, +i.big.icons { + line-height: 1; + vertical-align: middle; + font-size: 2em; +} +i.huge.icon, +i.huge.icons { + line-height: 1; + vertical-align: middle; + font-size: 4em; +} +i.massive.icon, +i.massive.icons { + line-height: 1; + vertical-align: middle; + font-size: 8em; +} + + +/******************************* + Groups +*******************************/ + +i.icons { + display: inline-block; + position: relative; + line-height: 1; +} +i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + margin: 0em; + margin: 0; +} +i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + -webkit-transform: none; + transform: none; + margin-right: 0.25rem; +} + +/* Corner Icon */ +i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + -webkit-transform: none; + transform: none; + font-size: 0.45em; + text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; +} +i.icons .top.right.corner.icon { + top: 0; + left: auto; + right: 0; + bottom: auto; +} +i.icons .top.left.corner.icon { + top: 0; + left: 0; + right: auto; + bottom: auto; +} +i.icons .bottom.left.corner.icon { + top: auto; + left: 0; + right: auto; + bottom: 0; +} +i.icons .bottom.right.corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; +} +i.icons .inverted.corner.icon { + text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D; +} +/* + * Font Awesome 5.0.8 by @fontawesome - http://fontawesome.io - @fontawesome + * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License) + */ + + +/******************************* + +Semantic-UI integration of font-awesome : + +///class names are separated +i.icon.circle => i.icon.circle +i.icon.circle-o => i.icon.circle.outline + +//abbreviation are replaced by full letters: +i.icon.ellipsis-h => i.icon.ellipsis.horizontal +i.icon.ellipsis-v => i.icon.ellipsis.vertical +.alpha => .i.icon.alphabet +.asc => .i.icon.ascending +.desc => .i.icon.descending +.alt =>.alternate + +ASCII order is conserved for easier maintenance. + +Icons that only have one style 'outline', 'square' etc do not require this class +for instance `lemon icon` not `lemon outline icon` since there is only one lemon + +*******************************/ + + + +/******************************* + Icons +*******************************/ + + +/* Deprecated *In/Out Naming Conflict) */ +i.icon.linkedin.in:before { + content: "\f0e1"; +} +i.icon.zoom.in:before { + content: "\f00e"; +} +i.icon.zoom.out:before { + content: "\f010"; +} +i.icon.sign.in:before { + content: "\f2f6"; +} +i.icon.in.cart:before { + content: "\f218"; +} +i.icon.log.out:before { + content: "\f2f5"; +} +i.icon.sign.out:before { + content: "\f2f5"; +} + +/* Icons */ +i.icon.\35 00px:before { + content: "\f26e"; +} +i.icon.accessible.icon:before { + content: "\f368"; +} +i.icon.accusoft:before { + content: "\f369"; +} +i.icon.address.book:before { + content: "\f2b9"; +} +i.icon.address.card:before { + content: "\f2bb"; +} +i.icon.adjust:before { + content: "\f042"; +} +i.icon.adn:before { + content: "\f170"; +} +i.icon.adversal:before { + content: "\f36a"; +} +i.icon.affiliatetheme:before { + content: "\f36b"; +} +i.icon.algolia:before { + content: "\f36c"; +} +i.icon.align.center:before { + content: "\f037"; +} +i.icon.align.justify:before { + content: "\f039"; +} +i.icon.align.left:before { + content: "\f036"; +} +i.icon.align.right:before { + content: "\f038"; +} +i.icon.amazon:before { + content: "\f270"; +} +i.icon.amazon.pay:before { + content: "\f42c"; +} +i.icon.ambulance:before { + content: "\f0f9"; +} +i.icon.american.sign.language.interpreting:before { + content: "\f2a3"; +} +i.icon.amilia:before { + content: "\f36d"; +} +i.icon.anchor:before { + content: "\f13d"; +} +i.icon.android:before { + content: "\f17b"; +} +i.icon.angellist:before { + content: "\f209"; +} +i.icon.angle.double.down:before { + content: "\f103"; +} +i.icon.angle.double.left:before { + content: "\f100"; +} +i.icon.angle.double.right:before { + content: "\f101"; +} +i.icon.angle.double.up:before { + content: "\f102"; +} +i.icon.angle.down:before { + content: "\f107"; +} +i.icon.angle.left:before { + content: "\f104"; +} +i.icon.angle.right:before { + content: "\f105"; +} +i.icon.angle.up:before { + content: "\f106"; +} +i.icon.angrycreative:before { + content: "\f36e"; +} +i.icon.angular:before { + content: "\f420"; +} +i.icon.app.store:before { + content: "\f36f"; +} +i.icon.app.store.ios:before { + content: "\f370"; +} +i.icon.apper:before { + content: "\f371"; +} +i.icon.apple:before { + content: "\f179"; +} +i.icon.apple.pay:before { + content: "\f415"; +} +i.icon.archive:before { + content: "\f187"; +} +i.icon.arrow.alternate.circle.down:before { + content: "\f358"; +} +i.icon.arrow.alternate.circle.left:before { + content: "\f359"; +} +i.icon.arrow.alternate.circle.right:before { + content: "\f35a"; +} +i.icon.arrow.alternate.circle.up:before { + content: "\f35b"; +} +i.icon.arrow.circle.down:before { + content: "\f0ab"; +} +i.icon.arrow.circle.left:before { + content: "\f0a8"; +} +i.icon.arrow.circle.right:before { + content: "\f0a9"; +} +i.icon.arrow.circle.up:before { + content: "\f0aa"; +} +i.icon.arrow.down:before { + content: "\f063"; +} +i.icon.arrow.left:before { + content: "\f060"; +} +i.icon.arrow.right:before { + content: "\f061"; +} +i.icon.arrow.up:before { + content: "\f062"; +} +i.icon.arrows.alternate:before { + content: "\f0b2"; +} +i.icon.arrows.alternate.horizontal:before { + content: "\f337"; +} +i.icon.arrows.alternate.vertical:before { + content: "\f338"; +} +i.icon.assistive.listening.systems:before { + content: "\f2a2"; +} +i.icon.asterisk:before { + content: "\f069"; +} +i.icon.asymmetrik:before { + content: "\f372"; +} +i.icon.at:before { + content: "\f1fa"; +} +i.icon.audible:before { + content: "\f373"; +} +i.icon.audio.description:before { + content: "\f29e"; +} +i.icon.autoprefixer:before { + content: "\f41c"; +} +i.icon.avianex:before { + content: "\f374"; +} +i.icon.aviato:before { + content: "\f421"; +} +i.icon.aws:before { + content: "\f375"; +} +i.icon.backward:before { + content: "\f04a"; +} +i.icon.balance.scale:before { + content: "\f24e"; +} +i.icon.ban:before { + content: "\f05e"; +} +i.icon.band.aid:before { + content: "\f462"; +} +i.icon.bandcamp:before { + content: "\f2d5"; +} +i.icon.barcode:before { + content: "\f02a"; +} +i.icon.bars:before { + content: "\f0c9"; +} +i.icon.baseball.ball:before { + content: "\f433"; +} +i.icon.basketball.ball:before { + content: "\f434"; +} +i.icon.bath:before { + content: "\f2cd"; +} +i.icon.battery.empty:before { + content: "\f244"; +} +i.icon.battery.full:before { + content: "\f240"; +} +i.icon.battery.half:before { + content: "\f242"; +} +i.icon.battery.quarter:before { + content: "\f243"; +} +i.icon.battery.three.quarters:before { + content: "\f241"; +} +i.icon.bed:before { + content: "\f236"; +} +i.icon.beer:before { + content: "\f0fc"; +} +i.icon.behance:before { + content: "\f1b4"; +} +i.icon.behance.square:before { + content: "\f1b5"; +} +i.icon.bell:before { + content: "\f0f3"; +} +i.icon.bell.slash:before { + content: "\f1f6"; +} +i.icon.bicycle:before { + content: "\f206"; +} +i.icon.bimobject:before { + content: "\f378"; +} +i.icon.binoculars:before { + content: "\f1e5"; +} +i.icon.birthday.cake:before { + content: "\f1fd"; +} +i.icon.bitbucket:before { + content: "\f171"; +} +i.icon.bitcoin:before { + content: "\f379"; +} +i.icon.bity:before { + content: "\f37a"; +} +i.icon.black.tie:before { + content: "\f27e"; +} +i.icon.blackberry:before { + content: "\f37b"; +} +i.icon.blind:before { + content: "\f29d"; +} +i.icon.blogger:before { + content: "\f37c"; +} +i.icon.blogger.b:before { + content: "\f37d"; +} +i.icon.bluetooth:before { + content: "\f293"; +} +i.icon.bluetooth.b:before { + content: "\f294"; +} +i.icon.bold:before { + content: "\f032"; +} +i.icon.bolt:before { + content: "\f0e7"; +} +i.icon.bomb:before { + content: "\f1e2"; +} +i.icon.book:before { + content: "\f02d"; +} +i.icon.bookmark:before { + content: "\f02e"; +} +i.icon.bowling.ball:before { + content: "\f436"; +} +i.icon.box:before { + content: "\f466"; +} +i.icon.boxes:before { + content: "\f468"; +} +i.icon.braille:before { + content: "\f2a1"; +} +i.icon.briefcase:before { + content: "\f0b1"; +} +i.icon.btc:before { + content: "\f15a"; +} +i.icon.bug:before { + content: "\f188"; +} +i.icon.building:before { + content: "\f1ad"; +} +i.icon.bullhorn:before { + content: "\f0a1"; +} +i.icon.bullseye:before { + content: "\f140"; +} +i.icon.buromobelexperte:before { + content: "\f37f"; +} +i.icon.bus:before { + content: "\f207"; +} +i.icon.buysellads:before { + content: "\f20d"; +} +i.icon.calculator:before { + content: "\f1ec"; +} +i.icon.calendar:before { + content: "\f133"; +} +i.icon.calendar.alternate:before { + content: "\f073"; +} +i.icon.calendar.check:before { + content: "\f274"; +} +i.icon.calendar.minus:before { + content: "\f272"; +} +i.icon.calendar.plus:before { + content: "\f271"; +} +i.icon.calendar.times:before { + content: "\f273"; +} +i.icon.camera:before { + content: "\f030"; +} +i.icon.camera.retro:before { + content: "\f083"; +} +i.icon.car:before { + content: "\f1b9"; +} +i.icon.caret.down:before { + content: "\f0d7"; +} +i.icon.caret.left:before { + content: "\f0d9"; +} +i.icon.caret.right:before { + content: "\f0da"; +} +i.icon.caret.square.down:before { + content: "\f150"; +} +i.icon.caret.square.left:before { + content: "\f191"; +} +i.icon.caret.square.right:before { + content: "\f152"; +} +i.icon.caret.square.up:before { + content: "\f151"; +} +i.icon.caret.up:before { + content: "\f0d8"; +} +i.icon.cart.arrow.down:before { + content: "\f218"; +} +i.icon.cart.plus:before { + content: "\f217"; +} +i.icon.cc.amazon.pay:before { + content: "\f42d"; +} +i.icon.cc.amex:before { + content: "\f1f3"; +} +i.icon.cc.apple.pay:before { + content: "\f416"; +} +i.icon.cc.diners.club:before { + content: "\f24c"; +} +i.icon.cc.discover:before { + content: "\f1f2"; +} +i.icon.cc.jcb:before { + content: "\f24b"; +} +i.icon.cc.mastercard:before { + content: "\f1f1"; +} +i.icon.cc.paypal:before { + content: "\f1f4"; +} +i.icon.cc.stripe:before { + content: "\f1f5"; +} +i.icon.cc.visa:before { + content: "\f1f0"; +} +i.icon.centercode:before { + content: "\f380"; +} +i.icon.certificate:before { + content: "\f0a3"; +} +i.icon.chart.area:before { + content: "\f1fe"; +} +i.icon.chart.bar:before { + content: "\f080"; +} +i.icon.chart.line:before { + content: "\f201"; +} +i.icon.chart.pie:before { + content: "\f200"; +} +i.icon.check:before { + content: "\f00c"; +} +i.icon.check.circle:before { + content: "\f058"; +} +i.icon.check.square:before { + content: "\f14a"; +} +i.icon.chess:before { + content: "\f439"; +} +i.icon.chess.bishop:before { + content: "\f43a"; +} +i.icon.chess.board:before { + content: "\f43c"; +} +i.icon.chess.king:before { + content: "\f43f"; +} +i.icon.chess.knight:before { + content: "\f441"; +} +i.icon.chess.pawn:before { + content: "\f443"; +} +i.icon.chess.queen:before { + content: "\f445"; +} +i.icon.chess.rook:before { + content: "\f447"; +} +i.icon.chevron.circle.down:before { + content: "\f13a"; +} +i.icon.chevron.circle.left:before { + content: "\f137"; +} +i.icon.chevron.circle.right:before { + content: "\f138"; +} +i.icon.chevron.circle.up:before { + content: "\f139"; +} +i.icon.chevron.down:before { + content: "\f078"; +} +i.icon.chevron.left:before { + content: "\f053"; +} +i.icon.chevron.right:before { + content: "\f054"; +} +i.icon.chevron.up:before { + content: "\f077"; +} +i.icon.child:before { + content: "\f1ae"; +} +i.icon.chrome:before { + content: "\f268"; +} +i.icon.circle:before { + content: "\f111"; +} +i.icon.circle.notch:before { + content: "\f1ce"; +} +i.icon.clipboard:before { + content: "\f328"; +} +i.icon.clipboard.check:before { + content: "\f46c"; +} +i.icon.clipboard.list:before { + content: "\f46d"; +} +i.icon.clock:before { + content: "\f017"; +} +i.icon.clone:before { + content: "\f24d"; +} +i.icon.closed.captioning:before { + content: "\f20a"; +} +i.icon.cloud:before { + content: "\f0c2"; +} +i.icon.cloudscale:before { + content: "\f383"; +} +i.icon.cloudsmith:before { + content: "\f384"; +} +i.icon.cloudversify:before { + content: "\f385"; +} +i.icon.code:before { + content: "\f121"; +} +i.icon.code.branch:before { + content: "\f126"; +} +i.icon.codepen:before { + content: "\f1cb"; +} +i.icon.codiepie:before { + content: "\f284"; +} +i.icon.coffee:before { + content: "\f0f4"; +} +i.icon.cog:before { + content: "\f013"; +} +i.icon.cogs:before { + content: "\f085"; +} +i.icon.columns:before { + content: "\f0db"; +} +i.icon.comment:before { + content: "\f075"; +} +i.icon.comment.alternate:before { + content: "\f27a"; +} +i.icon.comments:before { + content: "\f086"; +} +i.icon.compass:before { + content: "\f14e"; +} +i.icon.compress:before { + content: "\f066"; +} +i.icon.connectdevelop:before { + content: "\f20e"; +} +i.icon.contao:before { + content: "\f26d"; +} +i.icon.copy:before { + content: "\f0c5"; +} +i.icon.copyright:before { + content: "\f1f9"; +} +i.icon.cpanel:before { + content: "\f388"; +} +i.icon.creative.commons:before { + content: "\f25e"; +} +i.icon.credit.card:before { + content: "\f09d"; +} +i.icon.crop:before { + content: "\f125"; +} +i.icon.crosshairs:before { + content: "\f05b"; +} +i.icon.css3:before { + content: "\f13c"; +} +i.icon.css3.alternate:before { + content: "\f38b"; +} +i.icon.cube:before { + content: "\f1b2"; +} +i.icon.cubes:before { + content: "\f1b3"; +} +i.icon.cut:before { + content: "\f0c4"; +} +i.icon.cuttlefish:before { + content: "\f38c"; +} +i.icon.d.and.d:before { + content: "\f38d"; +} +i.icon.dashcube:before { + content: "\f210"; +} +i.icon.database:before { + content: "\f1c0"; +} +i.icon.deaf:before { + content: "\f2a4"; +} +i.icon.delicious:before { + content: "\f1a5"; +} +i.icon.deploydog:before { + content: "\f38e"; +} +i.icon.deskpro:before { + content: "\f38f"; +} +i.icon.desktop:before { + content: "\f108"; +} +i.icon.deviantart:before { + content: "\f1bd"; +} +i.icon.digg:before { + content: "\f1a6"; +} +i.icon.digital.ocean:before { + content: "\f391"; +} +i.icon.discord:before { + content: "\f392"; +} +i.icon.discourse:before { + content: "\f393"; +} +i.icon.dna:before { + content: "\f471"; +} +i.icon.dochub:before { + content: "\f394"; +} +i.icon.docker:before { + content: "\f395"; +} +i.icon.dollar.sign:before { + content: "\f155"; +} +i.icon.dolly:before { + content: "\f472"; +} +i.icon.dolly.flatbed:before { + content: "\f474"; +} +i.icon.dot.circle:before { + content: "\f192"; +} +i.icon.download:before { + content: "\f019"; +} +i.icon.draft2digital:before { + content: "\f396"; +} +i.icon.dribbble:before { + content: "\f17d"; +} +i.icon.dribbble.square:before { + content: "\f397"; +} +i.icon.dropbox:before { + content: "\f16b"; +} +i.icon.drupal:before { + content: "\f1a9"; +} +i.icon.dyalog:before { + content: "\f399"; +} +i.icon.earlybirds:before { + content: "\f39a"; +} +i.icon.edge:before { + content: "\f282"; +} +i.icon.edit:before { + content: "\f044"; +} +i.icon.eject:before { + content: "\f052"; +} +i.icon.elementor:before { + content: "\f430"; +} +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} +i.icon.ellipsis.vertical:before { + content: "\f142"; +} +i.icon.ember:before { + content: "\f423"; +} +i.icon.empire:before { + content: "\f1d1"; +} +i.icon.envelope:before { + content: "\f0e0"; +} +i.icon.envelope.open:before { + content: "\f2b6"; +} +i.icon.envelope.square:before { + content: "\f199"; +} +i.icon.envira:before { + content: "\f299"; +} +i.icon.eraser:before { + content: "\f12d"; +} +i.icon.erlang:before { + content: "\f39d"; +} +i.icon.ethereum:before { + content: "\f42e"; +} +i.icon.etsy:before { + content: "\f2d7"; +} +i.icon.euro.sign:before { + content: "\f153"; +} +i.icon.exchange.alternate:before { + content: "\f362"; +} +i.icon.exclamation:before { + content: "\f12a"; +} +i.icon.exclamation.circle:before { + content: "\f06a"; +} +i.icon.exclamation.triangle:before { + content: "\f071"; +} +i.icon.expand:before { + content: "\f065"; +} +i.icon.expand.arrows.alternate:before { + content: "\f31e"; +} +i.icon.expeditedssl:before { + content: "\f23e"; +} +i.icon.external.alternate:before { + content: "\f35d"; +} +i.icon.external.square.alternate:before { + content: "\f360"; +} +i.icon.eye:before { + content: "\f06e"; +} +i.icon.eye.dropper:before { + content: "\f1fb"; +} +i.icon.eye.slash:before { + content: "\f070"; +} +i.icon.facebook:before { + content: "\f09a"; +} +i.icon.facebook.f:before { + content: "\f39e"; +} +i.icon.facebook.messenger:before { + content: "\f39f"; +} +i.icon.facebook.square:before { + content: "\f082"; +} +i.icon.fast.backward:before { + content: "\f049"; +} +i.icon.fast.forward:before { + content: "\f050"; +} +i.icon.fax:before { + content: "\f1ac"; +} +i.icon.female:before { + content: "\f182"; +} +i.icon.fighter.jet:before { + content: "\f0fb"; +} +i.icon.file:before { + content: "\f15b"; +} +i.icon.file.alternate:before { + content: "\f15c"; +} +i.icon.file.archive:before { + content: "\f1c6"; +} +i.icon.file.audio:before { + content: "\f1c7"; +} +i.icon.file.code:before { + content: "\f1c9"; +} +i.icon.file.excel:before { + content: "\f1c3"; +} +i.icon.file.image:before { + content: "\f1c5"; +} +i.icon.file.pdf:before { + content: "\f1c1"; +} +i.icon.file.powerpoint:before { + content: "\f1c4"; +} +i.icon.file.video:before { + content: "\f1c8"; +} +i.icon.file.word:before { + content: "\f1c2"; +} +i.icon.film:before { + content: "\f008"; +} +i.icon.filter:before { + content: "\f0b0"; +} +i.icon.fire:before { + content: "\f06d"; +} +i.icon.fire.extinguisher:before { + content: "\f134"; +} +i.icon.firefox:before { + content: "\f269"; +} +i.icon.first.aid:before { + content: "\f479"; +} +i.icon.first.order:before { + content: "\f2b0"; +} +i.icon.firstdraft:before { + content: "\f3a1"; +} +i.icon.flag:before { + content: "\f024"; +} +i.icon.flag.checkered:before { + content: "\f11e"; +} +i.icon.flask:before { + content: "\f0c3"; +} +i.icon.flickr:before { + content: "\f16e"; +} +i.icon.flipboard:before { + content: "\f44d"; +} +i.icon.fly:before { + content: "\f417"; +} +i.icon.folder:before { + content: "\f07b"; +} +i.icon.folder.open:before { + content: "\f07c"; +} +i.icon.font:before { + content: "\f031"; +} +i.icon.font.awesome:before { + content: "\f2b4"; +} +i.icon.font.awesome.alternate:before { + content: "\f35c"; +} +i.icon.font.awesome.flag:before { + content: "\f425"; +} +i.icon.fonticons:before { + content: "\f280"; +} +i.icon.fonticons.fi:before { + content: "\f3a2"; +} +i.icon.football.ball:before { + content: "\f44e"; +} +i.icon.fort.awesome:before { + content: "\f286"; +} +i.icon.fort.awesome.alternate:before { + content: "\f3a3"; +} +i.icon.forumbee:before { + content: "\f211"; +} +i.icon.forward:before { + content: "\f04e"; +} +i.icon.foursquare:before { + content: "\f180"; +} +i.icon.free.code.camp:before { + content: "\f2c5"; +} +i.icon.freebsd:before { + content: "\f3a4"; +} +i.icon.frown:before { + content: "\f119"; +} +i.icon.futbol:before { + content: "\f1e3"; +} +i.icon.gamepad:before { + content: "\f11b"; +} +i.icon.gavel:before { + content: "\f0e3"; +} +i.icon.gem:before { + content: "\f3a5"; +} +i.icon.genderless:before { + content: "\f22d"; +} +i.icon.get.pocket:before { + content: "\f265"; +} +i.icon.gg:before { + content: "\f260"; +} +i.icon.gg.circle:before { + content: "\f261"; +} +i.icon.gift:before { + content: "\f06b"; +} +i.icon.git:before { + content: "\f1d3"; +} +i.icon.git.square:before { + content: "\f1d2"; +} +i.icon.github:before { + content: "\f09b"; +} +i.icon.github.alternate:before { + content: "\f113"; +} +i.icon.github.square:before { + content: "\f092"; +} +i.icon.gitkraken:before { + content: "\f3a6"; +} +i.icon.gitlab:before { + content: "\f296"; +} +i.icon.gitter:before { + content: "\f426"; +} +i.icon.glass.martini:before { + content: "\f000"; +} +i.icon.glide:before { + content: "\f2a5"; +} +i.icon.glide.g:before { + content: "\f2a6"; +} +i.icon.globe:before { + content: "\f0ac"; +} +i.icon.gofore:before { + content: "\f3a7"; +} +i.icon.golf.ball:before { + content: "\f450"; +} +i.icon.goodreads:before { + content: "\f3a8"; +} +i.icon.goodreads.g:before { + content: "\f3a9"; +} +i.icon.google:before { + content: "\f1a0"; +} +i.icon.google.drive:before { + content: "\f3aa"; +} +i.icon.google.play:before { + content: "\f3ab"; +} +i.icon.google.plus:before { + content: "\f2b3"; +} +i.icon.google.plus.g:before { + content: "\f0d5"; +} +i.icon.google.plus.square:before { + content: "\f0d4"; +} +i.icon.google.wallet:before { + content: "\f1ee"; +} +i.icon.graduation.cap:before { + content: "\f19d"; +} +i.icon.gratipay:before { + content: "\f184"; +} +i.icon.grav:before { + content: "\f2d6"; +} +i.icon.gripfire:before { + content: "\f3ac"; +} +i.icon.grunt:before { + content: "\f3ad"; +} +i.icon.gulp:before { + content: "\f3ae"; +} +i.icon.h.square:before { + content: "\f0fd"; +} +i.icon.hacker.news:before { + content: "\f1d4"; +} +i.icon.hacker.news.square:before { + content: "\f3af"; +} +i.icon.hand.lizard:before { + content: "\f258"; +} +i.icon.hand.paper:before { + content: "\f256"; +} +i.icon.hand.peace:before { + content: "\f25b"; +} +i.icon.hand.point.down:before { + content: "\f0a7"; +} +i.icon.hand.point.left:before { + content: "\f0a5"; +} +i.icon.hand.point.right:before { + content: "\f0a4"; +} +i.icon.hand.point.up:before { + content: "\f0a6"; +} +i.icon.hand.pointer:before { + content: "\f25a"; +} +i.icon.hand.rock:before { + content: "\f255"; +} +i.icon.hand.scissors:before { + content: "\f257"; +} +i.icon.hand.spock:before { + content: "\f259"; +} +i.icon.handshake:before { + content: "\f2b5"; +} +i.icon.hashtag:before { + content: "\f292"; +} +i.icon.hdd:before { + content: "\f0a0"; +} +i.icon.heading:before { + content: "\f1dc"; +} +i.icon.headphones:before { + content: "\f025"; +} +i.icon.heart:before { + content: "\f004"; +} +i.icon.heartbeat:before { + content: "\f21e"; +} +i.icon.hips:before { + content: "\f452"; +} +i.icon.hire.a.helper:before { + content: "\f3b0"; +} +i.icon.history:before { + content: "\f1da"; +} +i.icon.hockey.puck:before { + content: "\f453"; +} +i.icon.home:before { + content: "\f015"; +} +i.icon.hooli:before { + content: "\f427"; +} +i.icon.hospital:before { + content: "\f0f8"; +} +i.icon.hospital.symbol:before { + content: "\f47e"; +} +i.icon.hotjar:before { + content: "\f3b1"; +} +i.icon.hourglass:before { + content: "\f254"; +} +i.icon.hourglass.end:before { + content: "\f253"; +} +i.icon.hourglass.half:before { + content: "\f252"; +} +i.icon.hourglass.start:before { + content: "\f251"; +} +i.icon.houzz:before { + content: "\f27c"; +} +i.icon.html5:before { + content: "\f13b"; +} +i.icon.hubspot:before { + content: "\f3b2"; +} +i.icon.i.cursor:before { + content: "\f246"; +} +i.icon.id.badge:before { + content: "\f2c1"; +} +i.icon.id.card:before { + content: "\f2c2"; +} +i.icon.image:before { + content: "\f03e"; +} +i.icon.images:before { + content: "\f302"; +} +i.icon.imdb:before { + content: "\f2d8"; +} +i.icon.inbox:before { + content: "\f01c"; +} +i.icon.indent:before { + content: "\f03c"; +} +i.icon.industry:before { + content: "\f275"; +} +i.icon.info:before { + content: "\f129"; +} +i.icon.info.circle:before { + content: "\f05a"; +} +i.icon.instagram:before { + content: "\f16d"; +} +i.icon.internet.explorer:before { + content: "\f26b"; +} +i.icon.ioxhost:before { + content: "\f208"; +} +i.icon.italic:before { + content: "\f033"; +} +i.icon.itunes:before { + content: "\f3b4"; +} +i.icon.itunes.note:before { + content: "\f3b5"; +} +i.icon.jenkins:before { + content: "\f3b6"; +} +i.icon.joget:before { + content: "\f3b7"; +} +i.icon.joomla:before { + content: "\f1aa"; +} +i.icon.js:before { + content: "\f3b8"; +} +i.icon.js.square:before { + content: "\f3b9"; +} +i.icon.jsfiddle:before { + content: "\f1cc"; +} +i.icon.key:before { + content: "\f084"; +} +i.icon.keyboard:before { + content: "\f11c"; +} +i.icon.keycdn:before { + content: "\f3ba"; +} +i.icon.kickstarter:before { + content: "\f3bb"; +} +i.icon.kickstarter.k:before { + content: "\f3bc"; +} +i.icon.korvue:before { + content: "\f42f"; +} +i.icon.language:before { + content: "\f1ab"; +} +i.icon.laptop:before { + content: "\f109"; +} +i.icon.laravel:before { + content: "\f3bd"; +} +i.icon.lastfm:before { + content: "\f202"; +} +i.icon.lastfm.square:before { + content: "\f203"; +} +i.icon.leaf:before { + content: "\f06c"; +} +i.icon.leanpub:before { + content: "\f212"; +} +i.icon.lemon:before { + content: "\f094"; +} +i.icon.less:before { + content: "\f41d"; +} +i.icon.level.down.alternate:before { + content: "\f3be"; +} +i.icon.level.up.alternate:before { + content: "\f3bf"; +} +i.icon.life.ring:before { + content: "\f1cd"; +} +i.icon.lightbulb:before { + content: "\f0eb"; +} +i.icon.linechat:before { + content: "\f3c0"; +} +i.icon.linkify:before { + content: "\f0c1"; +} +i.icon.linkedin:before { + content: "\f08c"; +} +i.icon.linkedin.alt:before { + content: "\f0e1"; +} +i.icon.linode:before { + content: "\f2b8"; +} +i.icon.linux:before { + content: "\f17c"; +} +i.icon.lira.sign:before { + content: "\f195"; +} +i.icon.list:before { + content: "\f03a"; +} +i.icon.list.alternate:before { + content: "\f022"; +} +i.icon.list.ol:before { + content: "\f0cb"; +} +i.icon.list.ul:before { + content: "\f0ca"; +} +i.icon.location.arrow:before { + content: "\f124"; +} +i.icon.lock:before { + content: "\f023"; +} +i.icon.lock.open:before { + content: "\f3c1"; +} +i.icon.long.arrow.alternate.down:before { + content: "\f309"; +} +i.icon.long.arrow.alternate.left:before { + content: "\f30a"; +} +i.icon.long.arrow.alternate.right:before { + content: "\f30b"; +} +i.icon.long.arrow.alternate.up:before { + content: "\f30c"; +} +i.icon.low.vision:before { + content: "\f2a8"; +} +i.icon.lyft:before { + content: "\f3c3"; +} +i.icon.magento:before { + content: "\f3c4"; +} +i.icon.magic:before { + content: "\f0d0"; +} +i.icon.magnet:before { + content: "\f076"; +} +i.icon.male:before { + content: "\f183"; +} +i.icon.map:before { + content: "\f279"; +} +i.icon.map.marker:before { + content: "\f041"; +} +i.icon.map.marker.alternate:before { + content: "\f3c5"; +} +i.icon.map.pin:before { + content: "\f276"; +} +i.icon.map.signs:before { + content: "\f277"; +} +i.icon.mars:before { + content: "\f222"; +} +i.icon.mars.double:before { + content: "\f227"; +} +i.icon.mars.stroke:before { + content: "\f229"; +} +i.icon.mars.stroke.horizontal:before { + content: "\f22b"; +} +i.icon.mars.stroke.vertical:before { + content: "\f22a"; +} +i.icon.maxcdn:before { + content: "\f136"; +} +i.icon.medapps:before { + content: "\f3c6"; +} +i.icon.medium:before { + content: "\f23a"; +} +i.icon.medium.m:before { + content: "\f3c7"; +} +i.icon.medkit:before { + content: "\f0fa"; +} +i.icon.medrt:before { + content: "\f3c8"; +} +i.icon.meetup:before { + content: "\f2e0"; +} +i.icon.meh:before { + content: "\f11a"; +} +i.icon.mercury:before { + content: "\f223"; +} +i.icon.microchip:before { + content: "\f2db"; +} +i.icon.microphone:before { + content: "\f130"; +} +i.icon.microphone.slash:before { + content: "\f131"; +} +i.icon.microsoft:before { + content: "\f3ca"; +} +i.icon.minus:before { + content: "\f068"; +} +i.icon.minus.circle:before { + content: "\f056"; +} +i.icon.minus.square:before { + content: "\f146"; +} +i.icon.mix:before { + content: "\f3cb"; +} +i.icon.mixcloud:before { + content: "\f289"; +} +i.icon.mizuni:before { + content: "\f3cc"; +} +i.icon.mobile:before { + content: "\f10b"; +} +i.icon.mobile.alternate:before { + content: "\f3cd"; +} +i.icon.modx:before { + content: "\f285"; +} +i.icon.monero:before { + content: "\f3d0"; +} +i.icon.money.bill.alternate:before { + content: "\f3d1"; +} +i.icon.moon:before { + content: "\f186"; +} +i.icon.motorcycle:before { + content: "\f21c"; +} +i.icon.mouse.pointer:before { + content: "\f245"; +} +i.icon.music:before { + content: "\f001"; +} +i.icon.napster:before { + content: "\f3d2"; +} +i.icon.neuter:before { + content: "\f22c"; +} +i.icon.newspaper:before { + content: "\f1ea"; +} +i.icon.nintendo.switch:before { + content: "\f418"; +} +i.icon.node:before { + content: "\f419"; +} +i.icon.node.js:before { + content: "\f3d3"; +} +i.icon.npm:before { + content: "\f3d4"; +} +i.icon.ns8:before { + content: "\f3d5"; +} +i.icon.nutritionix:before { + content: "\f3d6"; +} +i.icon.object.group:before { + content: "\f247"; +} +i.icon.object.ungroup:before { + content: "\f248"; +} +i.icon.odnoklassniki:before { + content: "\f263"; +} +i.icon.odnoklassniki.square:before { + content: "\f264"; +} +i.icon.opencart:before { + content: "\f23d"; +} +i.icon.openid:before { + content: "\f19b"; +} +i.icon.opera:before { + content: "\f26a"; +} +i.icon.optin.monster:before { + content: "\f23c"; +} +i.icon.osi:before { + content: "\f41a"; +} +i.icon.outdent:before { + content: "\f03b"; +} +i.icon.page4:before { + content: "\f3d7"; +} +i.icon.pagelines:before { + content: "\f18c"; +} +i.icon.paint.brush:before { + content: "\f1fc"; +} +i.icon.palfed:before { + content: "\f3d8"; +} +i.icon.pallet:before { + content: "\f482"; +} +i.icon.paper.plane:before { + content: "\f1d8"; +} +i.icon.paperclip:before { + content: "\f0c6"; +} +i.icon.paragraph:before { + content: "\f1dd"; +} +i.icon.paste:before { + content: "\f0ea"; +} +i.icon.patreon:before { + content: "\f3d9"; +} +i.icon.pause:before { + content: "\f04c"; +} +i.icon.pause.circle:before { + content: "\f28b"; +} +i.icon.paw:before { + content: "\f1b0"; +} +i.icon.paypal:before { + content: "\f1ed"; +} +i.icon.pen.square:before { + content: "\f14b"; +} +i.icon.pencil.alternate:before { + content: "\f303"; +} +i.icon.percent:before { + content: "\f295"; +} +i.icon.periscope:before { + content: "\f3da"; +} +i.icon.phabricator:before { + content: "\f3db"; +} +i.icon.phoenix.framework:before { + content: "\f3dc"; +} +i.icon.phone:before { + content: "\f095"; +} +i.icon.phone.square:before { + content: "\f098"; +} +i.icon.phone.volume:before { + content: "\f2a0"; +} +i.icon.php:before { + content: "\f457"; +} +i.icon.pied.piper:before { + content: "\f2ae"; +} +i.icon.pied.piper.alternate:before { + content: "\f1a8"; +} +i.icon.pied.piper.pp:before { + content: "\f1a7"; +} +i.icon.pills:before { + content: "\f484"; +} +i.icon.pinterest:before { + content: "\f0d2"; +} +i.icon.pinterest.p:before { + content: "\f231"; +} +i.icon.pinterest.square:before { + content: "\f0d3"; +} +i.icon.plane:before { + content: "\f072"; +} +i.icon.play:before { + content: "\f04b"; +} +i.icon.play.circle:before { + content: "\f144"; +} +i.icon.playstation:before { + content: "\f3df"; +} +i.icon.plug:before { + content: "\f1e6"; +} +i.icon.plus:before { + content: "\f067"; +} +i.icon.plus.circle:before { + content: "\f055"; +} +i.icon.plus.square:before { + content: "\f0fe"; +} +i.icon.podcast:before { + content: "\f2ce"; +} +i.icon.pound.sign:before { + content: "\f154"; +} +i.icon.power.off:before { + content: "\f011"; +} +i.icon.print:before { + content: "\f02f"; +} +i.icon.product.hunt:before { + content: "\f288"; +} +i.icon.pushed:before { + content: "\f3e1"; +} +i.icon.puzzle.piece:before { + content: "\f12e"; +} +i.icon.python:before { + content: "\f3e2"; +} +i.icon.qq:before { + content: "\f1d6"; +} +i.icon.qrcode:before { + content: "\f029"; +} +i.icon.question:before { + content: "\f128"; +} +i.icon.question.circle:before { + content: "\f059"; +} +i.icon.quidditch:before { + content: "\f458"; +} +i.icon.quinscape:before { + content: "\f459"; +} +i.icon.quora:before { + content: "\f2c4"; +} +i.icon.quote.left:before { + content: "\f10d"; +} +i.icon.quote.right:before { + content: "\f10e"; +} +i.icon.random:before { + content: "\f074"; +} +i.icon.ravelry:before { + content: "\f2d9"; +} +i.icon.react:before { + content: "\f41b"; +} +i.icon.rebel:before { + content: "\f1d0"; +} +i.icon.recycle:before { + content: "\f1b8"; +} +i.icon.redriver:before { + content: "\f3e3"; +} +i.icon.reddit:before { + content: "\f1a1"; +} +i.icon.reddit.alien:before { + content: "\f281"; +} +i.icon.reddit.square:before { + content: "\f1a2"; +} +i.icon.redo:before { + content: "\f01e"; +} +i.icon.redo.alternate:before { + content: "\f2f9"; +} +i.icon.registered:before { + content: "\f25d"; +} +i.icon.rendact:before { + content: "\f3e4"; +} +i.icon.renren:before { + content: "\f18b"; +} +i.icon.reply:before { + content: "\f3e5"; +} +i.icon.reply.all:before { + content: "\f122"; +} +i.icon.replyd:before { + content: "\f3e6"; +} +i.icon.resolving:before { + content: "\f3e7"; +} +i.icon.retweet:before { + content: "\f079"; +} +i.icon.road:before { + content: "\f018"; +} +i.icon.rocket:before { + content: "\f135"; +} +i.icon.rocketchat:before { + content: "\f3e8"; +} +i.icon.rockrms:before { + content: "\f3e9"; +} +i.icon.rss:before { + content: "\f09e"; +} +i.icon.rss.square:before { + content: "\f143"; +} +i.icon.ruble.sign:before { + content: "\f158"; +} +i.icon.rupee.sign:before { + content: "\f156"; +} +i.icon.safari:before { + content: "\f267"; +} +i.icon.sass:before { + content: "\f41e"; +} +i.icon.save:before { + content: "\f0c7"; +} +i.icon.schlix:before { + content: "\f3ea"; +} +i.icon.scribd:before { + content: "\f28a"; +} +i.icon.search:before { + content: "\f002"; +} +i.icon.search.minus:before { + content: "\f010"; +} +i.icon.search.plus:before { + content: "\f00e"; +} +i.icon.searchengin:before { + content: "\f3eb"; +} +i.icon.sellcast:before { + content: "\f2da"; +} +i.icon.sellsy:before { + content: "\f213"; +} +i.icon.server:before { + content: "\f233"; +} +i.icon.servicestack:before { + content: "\f3ec"; +} +i.icon.share:before { + content: "\f064"; +} +i.icon.share.alternate:before { + content: "\f1e0"; +} +i.icon.share.alternate.square:before { + content: "\f1e1"; +} +i.icon.share.square:before { + content: "\f14d"; +} +i.icon.shekel.sign:before { + content: "\f20b"; +} +i.icon.shield.alternate:before { + content: "\f3ed"; +} +i.icon.ship:before { + content: "\f21a"; +} +i.icon.shipping.fast:before { + content: "\f48b"; +} +i.icon.shirtsinbulk:before { + content: "\f214"; +} +i.icon.shopping.bag:before { + content: "\f290"; +} +i.icon.shopping.basket:before { + content: "\f291"; +} +i.icon.shopping.cart:before { + content: "\f07a"; +} +i.icon.shower:before { + content: "\f2cc"; +} +i.icon.sign.language:before { + content: "\f2a7"; +} +i.icon.signal:before { + content: "\f012"; +} +i.icon.simplybuilt:before { + content: "\f215"; +} +i.icon.sistrix:before { + content: "\f3ee"; +} +i.icon.sitemap:before { + content: "\f0e8"; +} +i.icon.skyatlas:before { + content: "\f216"; +} +i.icon.skype:before { + content: "\f17e"; +} +i.icon.slack:before { + content: "\f198"; +} +i.icon.slack.hash:before { + content: "\f3ef"; +} +i.icon.sliders.horizontal:before { + content: "\f1de"; +} +i.icon.slideshare:before { + content: "\f1e7"; +} +i.icon.smile:before { + content: "\f118"; +} +i.icon.snapchat:before { + content: "\f2ab"; +} +i.icon.snapchat.ghost:before { + content: "\f2ac"; +} +i.icon.snapchat.square:before { + content: "\f2ad"; +} +i.icon.snowflake:before { + content: "\f2dc"; +} +i.icon.sort:before { + content: "\f0dc"; +} +i.icon.sort.alphabet.down:before { + content: "\f15d"; +} +i.icon.sort.alphabet.up:before { + content: "\f15e"; +} +i.icon.sort.amount.down:before { + content: "\f160"; +} +i.icon.sort.amount.up:before { + content: "\f161"; +} +i.icon.sort.down:before { + content: "\f0dd"; +} +i.icon.sort.numeric.down:before { + content: "\f162"; +} +i.icon.sort.numeric.up:before { + content: "\f163"; +} +i.icon.sort.up:before { + content: "\f0de"; +} +i.icon.soundcloud:before { + content: "\f1be"; +} +i.icon.space.shuttle:before { + content: "\f197"; +} +i.icon.speakap:before { + content: "\f3f3"; +} +i.icon.spinner:before { + content: "\f110"; +} +i.icon.spotify:before { + content: "\f1bc"; +} +i.icon.square:before { + content: "\f0c8"; +} +i.icon.square.full:before { + content: "\f45c"; +} +i.icon.stack.exchange:before { + content: "\f18d"; +} +i.icon.stack.overflow:before { + content: "\f16c"; +} +i.icon.star:before { + content: "\f005"; +} +i.icon.star.half:before { + content: "\f089"; +} +i.icon.staylinked:before { + content: "\f3f5"; +} +i.icon.steam:before { + content: "\f1b6"; +} +i.icon.steam.square:before { + content: "\f1b7"; +} +i.icon.steam.symbol:before { + content: "\f3f6"; +} +i.icon.step.backward:before { + content: "\f048"; +} +i.icon.step.forward:before { + content: "\f051"; +} +i.icon.stethoscope:before { + content: "\f0f1"; +} +i.icon.sticker.mule:before { + content: "\f3f7"; +} +i.icon.sticky.note:before { + content: "\f249"; +} +i.icon.stop:before { + content: "\f04d"; +} +i.icon.stop.circle:before { + content: "\f28d"; +} +i.icon.stopwatch:before { + content: "\f2f2"; +} +i.icon.strava:before { + content: "\f428"; +} +i.icon.street.view:before { + content: "\f21d"; +} +i.icon.strikethrough:before { + content: "\f0cc"; +} +i.icon.stripe:before { + content: "\f429"; +} +i.icon.stripe.s:before { + content: "\f42a"; +} +i.icon.studiovinari:before { + content: "\f3f8"; +} +i.icon.stumbleupon:before { + content: "\f1a4"; +} +i.icon.stumbleupon.circle:before { + content: "\f1a3"; +} +i.icon.subscript:before { + content: "\f12c"; +} +i.icon.subway:before { + content: "\f239"; +} +i.icon.suitcase:before { + content: "\f0f2"; +} +i.icon.sun:before { + content: "\f185"; +} +i.icon.superpowers:before { + content: "\f2dd"; +} +i.icon.superscript:before { + content: "\f12b"; +} +i.icon.supple:before { + content: "\f3f9"; +} +i.icon.sync:before { + content: "\f021"; +} +i.icon.sync.alternate:before { + content: "\f2f1"; +} +i.icon.syringe:before { + content: "\f48e"; +} +i.icon.table:before { + content: "\f0ce"; +} +i.icon.table.tennis:before { + content: "\f45d"; +} +i.icon.tablet:before { + content: "\f10a"; +} +i.icon.tablet.alternate:before { + content: "\f3fa"; +} +i.icon.tachometer.alternate:before { + content: "\f3fd"; +} +i.icon.tag:before { + content: "\f02b"; +} +i.icon.tags:before { + content: "\f02c"; +} +i.icon.tasks:before { + content: "\f0ae"; +} +i.icon.taxi:before { + content: "\f1ba"; +} +i.icon.telegram:before { + content: "\f2c6"; +} +i.icon.telegram.plane:before { + content: "\f3fe"; +} +i.icon.tencent.weibo:before { + content: "\f1d5"; +} +i.icon.terminal:before { + content: "\f120"; +} +i.icon.text.height:before { + content: "\f034"; +} +i.icon.text.width:before { + content: "\f035"; +} +i.icon.th:before { + content: "\f00a"; +} +i.icon.th.large:before { + content: "\f009"; +} +i.icon.th.list:before { + content: "\f00b"; +} +i.icon.themeisle:before { + content: "\f2b2"; +} +i.icon.thermometer:before { + content: "\f491"; +} +i.icon.thermometer.empty:before { + content: "\f2cb"; +} +i.icon.thermometer.full:before { + content: "\f2c7"; +} +i.icon.thermometer.half:before { + content: "\f2c9"; +} +i.icon.thermometer.quarter:before { + content: "\f2ca"; +} +i.icon.thermometer.three.quarters:before { + content: "\f2c8"; +} +i.icon.thumbs.down:before { + content: "\f165"; +} +i.icon.thumbs.up:before { + content: "\f164"; +} +i.icon.thumbtack:before { + content: "\f08d"; +} +i.icon.ticket.alternate:before { + content: "\f3ff"; +} +i.icon.times:before { + content: "\f00d"; +} +i.icon.times.circle:before { + content: "\f057"; +} +i.icon.tint:before { + content: "\f043"; +} +i.icon.toggle.off:before { + content: "\f204"; +} +i.icon.toggle.on:before { + content: "\f205"; +} +i.icon.trademark:before { + content: "\f25c"; +} +i.icon.train:before { + content: "\f238"; +} +i.icon.transgender:before { + content: "\f224"; +} +i.icon.transgender.alternate:before { + content: "\f225"; +} +i.icon.trash:before { + content: "\f1f8"; +} +i.icon.trash.alternate:before { + content: "\f2ed"; +} +i.icon.tree:before { + content: "\f1bb"; +} +i.icon.trello:before { + content: "\f181"; +} +i.icon.tripadvisor:before { + content: "\f262"; +} +i.icon.trophy:before { + content: "\f091"; +} +i.icon.truck:before { + content: "\f0d1"; +} +i.icon.tty:before { + content: "\f1e4"; +} +i.icon.tumblr:before { + content: "\f173"; +} +i.icon.tumblr.square:before { + content: "\f174"; +} +i.icon.tv:before { + content: "\f26c"; +} +i.icon.twitch:before { + content: "\f1e8"; +} +i.icon.twitter:before { + content: "\f099"; +} +i.icon.twitter.square:before { + content: "\f081"; +} +i.icon.typo3:before { + content: "\f42b"; +} +i.icon.uber:before { + content: "\f402"; +} +i.icon.uikit:before { + content: "\f403"; +} +i.icon.umbrella:before { + content: "\f0e9"; +} +i.icon.underline:before { + content: "\f0cd"; +} +i.icon.undo:before { + content: "\f0e2"; +} +i.icon.undo.alternate:before { + content: "\f2ea"; +} +i.icon.uniregistry:before { + content: "\f404"; +} +i.icon.universal.access:before { + content: "\f29a"; +} +i.icon.university:before { + content: "\f19c"; +} +i.icon.unlink:before { + content: "\f127"; +} +i.icon.unlock:before { + content: "\f09c"; +} +i.icon.unlock.alternate:before { + content: "\f13e"; +} +i.icon.untappd:before { + content: "\f405"; +} +i.icon.upload:before { + content: "\f093"; +} +i.icon.usb:before { + content: "\f287"; +} +i.icon.user:before { + content: "\f007"; +} +i.icon.user.circle:before { + content: "\f2bd"; +} +i.icon.user.md:before { + content: "\f0f0"; +} +i.icon.user.plus:before { + content: "\f234"; +} +i.icon.user.secret:before { + content: "\f21b"; +} +i.icon.user.times:before { + content: "\f235"; +} +i.icon.users:before { + content: "\f0c0"; +} +i.icon.ussunnah:before { + content: "\f407"; +} +i.icon.utensil.spoon:before { + content: "\f2e5"; +} +i.icon.utensils:before { + content: "\f2e7"; +} +i.icon.vaadin:before { + content: "\f408"; +} +i.icon.venus:before { + content: "\f221"; +} +i.icon.venus.double:before { + content: "\f226"; +} +i.icon.venus.mars:before { + content: "\f228"; +} +i.icon.viacoin:before { + content: "\f237"; +} +i.icon.viadeo:before { + content: "\f2a9"; +} +i.icon.viadeo.square:before { + content: "\f2aa"; +} +i.icon.viber:before { + content: "\f409"; +} +i.icon.video:before { + content: "\f03d"; +} +i.icon.vimeo:before { + content: "\f40a"; +} +i.icon.vimeo.square:before { + content: "\f194"; +} +i.icon.vimeo.v:before { + content: "\f27d"; +} +i.icon.vine:before { + content: "\f1ca"; +} +i.icon.vk:before { + content: "\f189"; +} +i.icon.vnv:before { + content: "\f40b"; +} +i.icon.volleyball.ball:before { + content: "\f45f"; +} +i.icon.volume.down:before { + content: "\f027"; +} +i.icon.volume.off:before { + content: "\f026"; +} +i.icon.volume.up:before { + content: "\f028"; +} +i.icon.vuejs:before { + content: "\f41f"; +} +i.icon.warehouse:before { + content: "\f494"; +} +i.icon.weibo:before { + content: "\f18a"; +} +i.icon.weight:before { + content: "\f496"; +} +i.icon.weixin:before { + content: "\f1d7"; +} +i.icon.whatsapp:before { + content: "\f232"; +} +i.icon.whatsapp.square:before { + content: "\f40c"; +} +i.icon.wheelchair:before { + content: "\f193"; +} +i.icon.whmcs:before { + content: "\f40d"; +} +i.icon.wifi:before { + content: "\f1eb"; +} +i.icon.wikipedia.w:before { + content: "\f266"; +} +i.icon.window.close:before { + content: "\f410"; +} +i.icon.window.maximize:before { + content: "\f2d0"; +} +i.icon.window.minimize:before { + content: "\f2d1"; +} +i.icon.window.restore:before { + content: "\f2d2"; +} +i.icon.windows:before { + content: "\f17a"; +} +i.icon.won.sign:before { + content: "\f159"; +} +i.icon.wordpress:before { + content: "\f19a"; +} +i.icon.wordpress.simple:before { + content: "\f411"; +} +i.icon.wpbeginner:before { + content: "\f297"; +} +i.icon.wpexplorer:before { + content: "\f2de"; +} +i.icon.wpforms:before { + content: "\f298"; +} +i.icon.wrench:before { + content: "\f0ad"; +} +i.icon.xbox:before { + content: "\f412"; +} +i.icon.xing:before { + content: "\f168"; +} +i.icon.xing.square:before { + content: "\f169"; +} +i.icon.y.combinator:before { + content: "\f23b"; +} +i.icon.yahoo:before { + content: "\f19e"; +} +i.icon.yandex:before { + content: "\f413"; +} +i.icon.yandex.international:before { + content: "\f414"; +} +i.icon.yelp:before { + content: "\f1e9"; +} +i.icon.yen.sign:before { + content: "\f157"; +} +i.icon.yoast:before { + content: "\f2b1"; +} +i.icon.youtube:before { + content: "\f167"; +} +i.icon.youtube.square:before { + content: "\f431"; +} + +/* Aliases */ +i.icon.chess.rock:before { + content: "\f447"; +} +i.icon.ordered.list:before { + content: "\f0cb"; +} +i.icon.unordered.list:before { + content: "\f0ca"; +} +i.icon.user.doctor:before { + content: "\f0f0"; +} +i.icon.shield:before { + content: "\f3ed"; +} +i.icon.puzzle:before { + content: "\f12e"; +} +i.icon.credit.card.amazon.pay:before { + content: "\f42d"; +} +i.icon.credit.card.american.express:before { + content: "\f1f3"; +} +i.icon.credit.card.diners.club:before { + content: "\f24c"; +} +i.icon.credit.card.discover:before { + content: "\f1f2"; +} +i.icon.credit.card.jcb:before { + content: "\f24b"; +} +i.icon.credit.card.mastercard:before { + content: "\f1f1"; +} +i.icon.credit.card.paypal:before { + content: "\f1f4"; +} +i.icon.credit.card.stripe:before { + content: "\f1f5"; +} +i.icon.credit.card.visa:before { + content: "\f1f0"; +} +i.icon.add.circle:before { + content: "\f055"; +} +i.icon.add.square:before { + content: "\f0fe"; +} +i.icon.add.to.calendar:before { + content: "\f271"; +} +i.icon.add.to.cart:before { + content: "\f217"; +} +i.icon.add.user:before { + content: "\f234"; +} +i.icon.add:before { + content: "\f067"; +} +i.icon.alarm.mute:before { + content: "\f1f6"; +} +i.icon.alarm:before { + content: "\f0f3"; +} +i.icon.ald:before { + content: "\f2a2"; +} +i.icon.als:before { + content: "\f2a2"; +} +i.icon.american.express.card:before { + content: "\f1f3"; +} +i.icon.american.express:before { + content: "\f1f3"; +} +i.icon.amex:before { + content: "\f1f3"; +} +i.icon.announcement:before { + content: "\f0a1"; +} +i.icon.area.chart:before { + content: "\f1fe"; +} +i.icon.area.graph:before { + content: "\f1fe"; +} +i.icon.arrow.down.cart:before { + content: "\f218"; +} +i.icon.asexual:before { + content: "\f22d"; +} +i.icon.asl.interpreting:before { + content: "\f2a3"; +} +i.icon.asl:before { + content: "\f2a3"; +} +i.icon.assistive.listening.devices:before { + content: "\f2a2"; +} +i.icon.attach:before { + content: "\f0c6"; +} +i.icon.attention:before { + content: "\f06a"; +} +i.icon.balance:before { + content: "\f24e"; +} +i.icon.bar:before { + content: "\f0fc"; +} +i.icon.bathtub:before { + content: "\f2cd"; +} +i.icon.battery.four:before { + content: "\f240"; +} +i.icon.battery.high:before { + content: "\f241"; +} +i.icon.battery.low:before { + content: "\f243"; +} +i.icon.battery.medium:before { + content: "\f242"; +} +i.icon.battery.one:before { + content: "\f243"; +} +i.icon.battery.three:before { + content: "\f241"; +} +i.icon.battery.two:before { + content: "\f242"; +} +i.icon.battery.zero:before { + content: "\f244"; +} +i.icon.birthday:before { + content: "\f1fd"; +} +i.icon.block.layout:before { + content: "\f009"; +} +i.icon.bluetooth.alternative:before { + content: "\f294"; +} +i.icon.broken.chain:before { + content: "\f127"; +} +i.icon.browser:before { + content: "\f022"; +} +i.icon.call.square:before { + content: "\f098"; +} +i.icon.call:before { + content: "\f095"; +} +i.icon.cancel:before { + content: "\f00d"; +} +i.icon.cart:before { + content: "\f07a"; +} +i.icon.cc:before { + content: "\f20a"; +} +i.icon.chain:before { + content: "\f0c1"; +} +i.icon.chat:before { + content: "\f075"; +} +i.icon.checked.calendar:before { + content: "\f274"; +} +i.icon.checkmark:before { + content: "\f00c"; +} +i.icon.circle.notched:before { + content: "\f1ce"; +} +i.icon.close:before { + content: "\f00d"; +} +i.icon.cny:before { + content: "\f157"; +} +i.icon.cocktail:before { + content: "\f000"; +} +i.icon.commenting:before { + content: "\f27a"; +} +i.icon.computer:before { + content: "\f108"; +} +i.icon.configure:before { + content: "\f0ad"; +} +i.icon.content:before { + content: "\f0c9"; +} +i.icon.deafness:before { + content: "\f2a4"; +} +i.icon.delete.calendar:before { + content: "\f273"; +} +i.icon.delete:before { + content: "\f00d"; +} +i.icon.detective:before { + content: "\f21b"; +} +i.icon.diners.club.card:before { + content: "\f24c"; +} +i.icon.diners.club:before { + content: "\f24c"; +} +i.icon.discover.card:before { + content: "\f1f2"; +} +i.icon.discover:before { + content: "\f1f2"; +} +i.icon.discussions:before { + content: "\f086"; +} +i.icon.doctor:before { + content: "\f0f0"; +} +i.icon.dollar:before { + content: "\f155"; +} +i.icon.dont:before { + content: "\f05e"; +} +i.icon.dribble:before { + content: "\f17d"; +} +i.icon.drivers.license:before { + content: "\f2c2"; +} +i.icon.dropdown:before { + content: "\f0d7"; +} +i.icon.eercast:before { + content: "\f2da"; +} +i.icon.emergency:before { + content: "\f0f9"; +} +i.icon.envira.gallery:before { + content: "\f299"; +} +i.icon.erase:before { + content: "\f12d"; +} +i.icon.eur:before { + content: "\f153"; +} +i.icon.euro:before { + content: "\f153"; +} +i.icon.eyedropper:before { + content: "\f1fb"; +} +i.icon.fa:before { + content: "\f2b4"; +} +i.icon.factory:before { + content: "\f275"; +} +i.icon.favorite:before { + content: "\f005"; +} +i.icon.feed:before { + content: "\f09e"; +} +i.icon.female.homosexual:before { + content: "\f226"; +} +i.icon.file.text:before { + content: "\f15c"; +} +i.icon.find:before { + content: "\f1e5"; +} +i.icon.first.aid:before { + content: "\f0fa"; +} +i.icon.five.hundred.pixels:before { + content: "\f26e"; +} +i.icon.fork:before { + content: "\f126"; +} +i.icon.game:before { + content: "\f11b"; +} +i.icon.gay:before { + content: "\f227"; +} +i.icon.gbp:before { + content: "\f154"; +} +i.icon.gittip:before { + content: "\f184"; +} +i.icon.google.plus.circle:before { + content: "\f2b3"; +} +i.icon.google.plus.official:before { + content: "\f2b3"; +} +i.icon.grab:before { + content: "\f255"; +} +i.icon.graduation:before { + content: "\f19d"; +} +i.icon.grid.layout:before { + content: "\f00a"; +} +i.icon.group:before { + content: "\f0c0"; +} +i.icon.h:before { + content: "\f0fd"; +} +i.icon.hand.victory:before { + content: "\f25b"; +} +i.icon.handicap:before { + content: "\f193"; +} +i.icon.hard.of.hearing:before { + content: "\f2a4"; +} +i.icon.header:before { + content: "\f1dc"; +} +i.icon.help.circle:before { + content: "\f059"; +} +i.icon.help:before { + content: "\f128"; +} +i.icon.heterosexual:before { + content: "\f228"; +} +i.icon.hide:before { + content: "\f070"; +} +i.icon.hotel:before { + content: "\f236"; +} +i.icon.hourglass.four:before { + content: "\f254"; +} +i.icon.hourglass.full:before { + content: "\f254"; +} +i.icon.hourglass.one:before { + content: "\f251"; +} +i.icon.hourglass.three:before { + content: "\f253"; +} +i.icon.hourglass.two:before { + content: "\f252"; +} +i.icon.idea:before { + content: "\f0eb"; +} +i.icon.ils:before { + content: "\f20b"; +} +i.icon.in-cart:before { + content: "\f218"; +} +i.icon.inr:before { + content: "\f156"; +} +i.icon.intergender:before { + content: "\f224"; +} +i.icon.intersex:before { + content: "\f224"; +} +i.icon.japan.credit.bureau.card:before { + content: "\f24b"; +} +i.icon.japan.credit.bureau:before { + content: "\f24b"; +} +i.icon.jcb:before { + content: "\f24b"; +} +i.icon.jpy:before { + content: "\f157"; +} +i.icon.krw:before { + content: "\f159"; +} +i.icon.lab:before { + content: "\f0c3"; +} +i.icon.law:before { + content: "\f24e"; +} +i.icon.legal:before { + content: "\f0e3"; +} +i.icon.lesbian:before { + content: "\f226"; +} +i.icon.lightning:before { + content: "\f0e7"; +} +i.icon.like:before { + content: "\f004"; +} +i.icon.line.graph:before { + content: "\f201"; +} +i.icon.linkedin.square:before { + content: "\f08c"; +} +i.icon.linkify:before { + content: "\f0c1"; +} +i.icon.lira:before { + content: "\f195"; +} +i.icon.list.layout:before { + content: "\f00b"; +} +i.icon.magnify:before { + content: "\f00e"; +} +i.icon.mail.forward:before { + content: "\f064"; +} +i.icon.mail.square:before { + content: "\f199"; +} +i.icon.mail:before { + content: "\f0e0"; +} +i.icon.male.homosexual:before { + content: "\f227"; +} +i.icon.man:before { + content: "\f222"; +} +i.icon.marker:before { + content: "\f041"; +} +i.icon.mars.alternate:before { + content: "\f229"; +} +i.icon.mars.horizontal:before { + content: "\f22b"; +} +i.icon.mars.vertical:before { + content: "\f22a"; +} +i.icon.mastercard.card:before { + content: "\f1f1"; +} +i.icon.mastercard:before { + content: "\f1f1"; +} +i.icon.microsoft.edge:before { + content: "\f282"; +} +i.icon.military:before { + content: "\f0fb"; +} +i.icon.ms.edge:before { + content: "\f282"; +} +i.icon.mute:before { + content: "\f131"; +} +i.icon.new.pied.piper:before { + content: "\f2ae"; +} +i.icon.non.binary.transgender:before { + content: "\f223"; +} +i.icon.numbered.list:before { + content: "\f0cb"; +} +i.icon.optinmonster:before { + content: "\f23c"; +} +i.icon.options:before { + content: "\f1de"; +} +i.icon.other.gender.horizontal:before { + content: "\f22b"; +} +i.icon.other.gender.vertical:before { + content: "\f22a"; +} +i.icon.other.gender:before { + content: "\f229"; +} +i.icon.payment:before { + content: "\f09d"; +} +i.icon.paypal.card:before { + content: "\f1f4"; +} +i.icon.pencil.square:before { + content: "\f14b"; +} +i.icon.photo:before { + content: "\f030"; +} +i.icon.picture:before { + content: "\f03e"; +} +i.icon.pie.chart:before { + content: "\f200"; +} +i.icon.pie.graph:before { + content: "\f200"; +} +i.icon.pied.piper.hat:before { + content: "\f2ae"; +} +i.icon.pin:before { + content: "\f08d"; +} +i.icon.plus.cart:before { + content: "\f217"; +} +i.icon.pocket:before { + content: "\f265"; +} +i.icon.point:before { + content: "\f041"; +} +i.icon.pointing.down:before { + content: "\f0a7"; +} +i.icon.pointing.left:before { + content: "\f0a5"; +} +i.icon.pointing.right:before { + content: "\f0a4"; +} +i.icon.pointing.up:before { + content: "\f0a6"; +} +i.icon.pound:before { + content: "\f154"; +} +i.icon.power.cord:before { + content: "\f1e6"; +} +i.icon.power:before { + content: "\f011"; +} +i.icon.privacy:before { + content: "\f084"; +} +i.icon.r.circle:before { + content: "\f25d"; +} +i.icon.rain:before { + content: "\f0e9"; +} +i.icon.record:before { + content: "\f03d"; +} +i.icon.refresh:before { + content: "\f021"; +} +i.icon.remove.circle:before { + content: "\f057"; +} +i.icon.remove.from.calendar:before { + content: "\f272"; +} +i.icon.remove.user:before { + content: "\f235"; +} +i.icon.remove:before { + content: "\f00d"; +} +i.icon.repeat:before { + content: "\f01e"; +} +i.icon.rmb:before { + content: "\f157"; +} +i.icon.rouble:before { + content: "\f158"; +} +i.icon.rub:before { + content: "\f158"; +} +i.icon.ruble:before { + content: "\f158"; +} +i.icon.rupee:before { + content: "\f156"; +} +i.icon.s15:before { + content: "\f2cd"; +} +i.icon.selected.radio:before { + content: "\f192"; +} +i.icon.send:before { + content: "\f1d8"; +} +i.icon.setting:before { + content: "\f013"; +} +i.icon.settings:before { + content: "\f085"; +} +i.icon.shekel:before { + content: "\f20b"; +} +i.icon.sheqel:before { + content: "\f20b"; +} +i.icon.shipping:before { + content: "\f0d1"; +} +i.icon.shop:before { + content: "\f07a"; +} +i.icon.shuffle:before { + content: "\f074"; +} +i.icon.shutdown:before { + content: "\f011"; +} +i.icon.sidebar:before { + content: "\f0c9"; +} +i.icon.signing:before { + content: "\f2a7"; +} +i.icon.signup:before { + content: "\f044"; +} +i.icon.sliders:before { + content: "\f1de"; +} +i.icon.soccer:before { + content: "\f1e3"; +} +i.icon.sort.alphabet.ascending:before { + content: "\f15d"; +} +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} +i.icon.sort.ascending:before { + content: "\f0de"; +} +i.icon.sort.content.ascending:before { + content: "\f160"; +} +i.icon.sort.content.descending:before { + content: "\f161"; +} +i.icon.sort.descending:before { + content: "\f0dd"; +} +i.icon.sort.numeric.ascending:before { + content: "\f162"; +} +i.icon.sort.numeric.descending:before { + content: "\f163"; +} +i.icon.sound:before { + content: "\f025"; +} +i.icon.spy:before { + content: "\f21b"; +} +i.icon.stripe.card:before { + content: "\f1f5"; +} +i.icon.student:before { + content: "\f19d"; +} +i.icon.talk:before { + content: "\f27a"; +} +i.icon.target:before { + content: "\f140"; +} +i.icon.teletype:before { + content: "\f1e4"; +} +i.icon.television:before { + content: "\f26c"; +} +i.icon.text.cursor:before { + content: "\f246"; +} +i.icon.text.telephone:before { + content: "\f1e4"; +} +i.icon.theme.isle:before { + content: "\f2b2"; +} +i.icon.theme:before { + content: "\f043"; +} +i.icon.thermometer:before { + content: "\f2c7"; +} +i.icon.thumb.tack:before { + content: "\f08d"; +} +i.icon.time:before { + content: "\f017"; +} +i.icon.tm:before { + content: "\f25c"; +} +i.icon.toggle.down:before { + content: "\f150"; +} +i.icon.toggle.left:before { + content: "\f191"; +} +i.icon.toggle.right:before { + content: "\f152"; +} +i.icon.toggle.up:before { + content: "\f151"; +} +i.icon.translate:before { + content: "\f1ab"; +} +i.icon.travel:before { + content: "\f0b1"; +} +i.icon.treatment:before { + content: "\f0f1"; +} +i.icon.triangle.down:before { + content: "\f0d7"; +} +i.icon.triangle.left:before { + content: "\f0d9"; +} +i.icon.triangle.right:before { + content: "\f0da"; +} +i.icon.triangle.up:before { + content: "\f0d8"; +} +i.icon.try:before { + content: "\f195"; +} +i.icon.unhide:before { + content: "\f06e"; +} +i.icon.unlinkify:before { + content: "\f127"; +} +i.icon.unmute:before { + content: "\f130"; +} +i.icon.usd:before { + content: "\f155"; +} +i.icon.user.cancel:before { + content: "\f235"; +} +i.icon.user.close:before { + content: "\f235"; +} +i.icon.user.delete:before { + content: "\f235"; +} +i.icon.user.x:before { + content: "\f235"; +} +i.icon.vcard:before { + content: "\f2bb"; +} +i.icon.video.camera:before { + content: "\f03d"; +} +i.icon.video.play:before { + content: "\f144"; +} +i.icon.visa.card:before { + content: "\f1f0"; +} +i.icon.visa:before { + content: "\f1f0"; +} +i.icon.volume.control.phone:before { + content: "\f2a0"; +} +i.icon.wait:before { + content: "\f017"; +} +i.icon.warning.circle:before { + content: "\f06a"; +} +i.icon.warning.sign:before { + content: "\f071"; +} +i.icon.warning:before { + content: "\f12a"; +} +i.icon.wechat:before { + content: "\f1d7"; +} +i.icon.wi-fi:before { + content: "\f1eb"; +} +i.icon.wikipedia:before { + content: "\f266"; +} +i.icon.winner:before { + content: "\f091"; +} +i.icon.wizard:before { + content: "\f0d0"; +} +i.icon.woman:before { + content: "\f221"; +} +i.icon.won:before { + content: "\f159"; +} +i.icon.wordpress.beginner:before { + content: "\f297"; +} +i.icon.wordpress.forms:before { + content: "\f298"; +} +i.icon.world:before { + content: "\f0ac"; +} +i.icon.write.square:before { + content: "\f14b"; +} +i.icon.x:before { + content: "\f00d"; +} +i.icon.yc:before { + content: "\f23b"; +} +i.icon.ycombinator:before { + content: "\f23b"; +} +i.icon.yen:before { + content: "\f157"; +} +i.icon.zip:before { + content: "\f187"; +} +i.icon.zoom-in:before { + content: "\f00e"; +} +i.icon.zoom-out:before { + content: "\f010"; +} +i.icon.zoom:before { + content: "\f00e"; +} +i.icon.bitbucket.square:before { + content: "\f171"; +} +i.icon.checkmark.box:before { + content: "\f14a"; +} +i.icon.circle.thin:before { + content: "\f111"; +} +i.icon.cloud.download:before { + content: "\f381"; +} +i.icon.cloud.upload:before { + content: "\f382"; +} +i.icon.compose:before { + content: "\f303"; +} +i.icon.conversation:before { + content: "\f086"; +} +i.icon.credit.card.alternative:before { + content: "\f09d"; +} +i.icon.currency:before { + content: "\f3d1"; +} +i.icon.dashboard:before { + content: "\f3fd"; +} +i.icon.diamond:before { + content: "\f3a5"; +} +i.icon.disk:before { + content: "\f0a0"; +} +i.icon.exchange:before { + content: "\f362"; +} +i.icon.external.share:before { + content: "\f14d"; +} +i.icon.external.square:before { + content: "\f360"; +} +i.icon.external:before { + content: "\f35d"; +} +i.icon.facebook.official:before { + content: "\f082"; +} +i.icon.food:before { + content: "\f2e7"; +} +i.icon.hourglass.zero:before { + content: "\f253"; +} +i.icon.level.down:before { + content: "\f3be"; +} +i.icon.level.up:before { + content: "\f3bf"; +} +i.icon.logout:before { + content: "\f2f5"; +} +i.icon.meanpath:before { + content: "\f0c8"; +} +i.icon.money:before { + content: "\f3d1"; +} +i.icon.move:before { + content: "\f0b2"; +} +i.icon.pencil:before { + content: "\f303"; +} +i.icon.protect:before { + content: "\f023"; +} +i.icon.radio:before { + content: "\f192"; +} +i.icon.remove.bookmark:before { + content: "\f02e"; +} +i.icon.resize.horizontal:before { + content: "\f337"; +} +i.icon.resize.vertical:before { + content: "\f338"; +} +i.icon.sign-in:before { + content: "\f2f6"; +} +i.icon.sign-out:before { + content: "\f2f5"; +} +i.icon.spoon:before { + content: "\f2e5"; +} +i.icon.star.half.empty:before { + content: "\f089"; +} +i.icon.star.half.full:before { + content: "\f089"; +} +i.icon.ticket:before { + content: "\f3ff"; +} +i.icon.times.rectangle:before { + content: "\f410"; +} +i.icon.write:before { + content: "\f303"; +} +i.icon.youtube.play:before { + content: "\f167"; +} + + +/******************************* + Outline Icons +*******************************/ + + +/* Outline Icon */ + +/* Load & Define Icon Font */ +@font-face { + font-family: 'outline-icons'; + src: url("./../themes/default/assets/fonts/outline-icons.eot"); + src: url("./../themes/default/assets/fonts/outline-icons.eot?#iefix") format('embedded-opentype'), url("./../themes/default/assets/fonts/outline-icons.woff2") format('woff2'), url("./../themes/default/assets/fonts/outline-icons.woff") format('woff'), url("./../themes/default/assets/fonts/outline-icons.ttf") format('truetype'), url("./../themes/default/assets/fonts/outline-icons.svg#icons") format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} +i.icon.outline { + font-family: 'outline-icons'; +} + +/* Icon Definitions */ +i.icon.address.book.outline:before { + content: "\f2b9"; +} +i.icon.address.card.outline:before { + content: "\f2bb"; +} +i.icon.arrow.alternate.circle.down.outline:before { + content: "\f358"; +} +i.icon.arrow.alternate.circle.left.outline:before { + content: "\f359"; +} +i.icon.arrow.alternate.circle.right.outline:before { + content: "\f35a"; +} +i.icon.arrow.alternate.circle.up.outline:before { + content: "\f35b"; +} +i.icon.bell.outline:before { + content: "\f0f3"; +} +i.icon.bell.slash.outline:before { + content: "\f1f6"; +} +i.icon.bookmark.outline:before { + content: "\f02e"; +} +i.icon.building.outline:before { + content: "\f1ad"; +} +i.icon.calendar.outline:before { + content: "\f133"; +} +i.icon.calendar.alternate.outline:before { + content: "\f073"; +} +i.icon.calendar.check.outline:before { + content: "\f274"; +} +i.icon.calendar.minus.outline:before { + content: "\f272"; +} +i.icon.calendar.plus.outline:before { + content: "\f271"; +} +i.icon.calendar.times.outline:before { + content: "\f273"; +} +i.icon.caret.square.down.outline:before { + content: "\f150"; +} +i.icon.caret.square.left.outline:before { + content: "\f191"; +} +i.icon.caret.square.right.outline:before { + content: "\f152"; +} +i.icon.caret.square.up.outline:before { + content: "\f151"; +} +i.icon.chart.bar.outline:before { + content: "\f080"; +} +i.icon.check.circle.outline:before { + content: "\f058"; +} +i.icon.check.square.outline:before { + content: "\f14a"; +} +i.icon.circle.outline:before { + content: "\f111"; +} +i.icon.clipboard.outline:before { + content: "\f328"; +} +i.icon.clock.outline:before { + content: "\f017"; +} +i.icon.clone.outline:before { + content: "\f24d"; +} +i.icon.closed.captioning.outline:before { + content: "\f20a"; +} +i.icon.comment.outline:before { + content: "\f075"; +} +i.icon.comment.alternate.outline:before { + content: "\f27a"; +} +i.icon.comments.outline:before { + content: "\f086"; +} +i.icon.compass.outline:before { + content: "\f14e"; +} +i.icon.copy.outline:before { + content: "\f0c5"; +} +i.icon.copyright.outline:before { + content: "\f1f9"; +} +i.icon.credit.card.outline:before { + content: "\f09d"; +} +i.icon.dot.circle.outline:before { + content: "\f192"; +} +i.icon.edit.outline:before { + content: "\f044"; +} +i.icon.envelope.outline:before { + content: "\f0e0"; +} +i.icon.envelope.open.outline:before { + content: "\f2b6"; +} +i.icon.eye.slash.outline:before { + content: "\f070"; +} +i.icon.file.outline:before { + content: "\f15b"; +} +i.icon.file.alternate.outline:before { + content: "\f15c"; +} +i.icon.file.archive.outline:before { + content: "\f1c6"; +} +i.icon.file.audio.outline:before { + content: "\f1c7"; +} +i.icon.file.code.outline:before { + content: "\f1c9"; +} +i.icon.file.excel.outline:before { + content: "\f1c3"; +} +i.icon.file.image.outline:before { + content: "\f1c5"; +} +i.icon.file.pdf.outline:before { + content: "\f1c1"; +} +i.icon.file.powerpoint.outline:before { + content: "\f1c4"; +} +i.icon.file.video.outline:before { + content: "\f1c8"; +} +i.icon.file.word.outline:before { + content: "\f1c2"; +} +i.icon.flag.outline:before { + content: "\f024"; +} +i.icon.folder.outline:before { + content: "\f07b"; +} +i.icon.folder.open.outline:before { + content: "\f07c"; +} +i.icon.frown.outline:before { + content: "\f119"; +} +i.icon.futbol.outline:before { + content: "\f1e3"; +} +i.icon.gem.outline:before { + content: "\f3a5"; +} +i.icon.hand.lizard.outline:before { + content: "\f258"; +} +i.icon.hand.paper.outline:before { + content: "\f256"; +} +i.icon.hand.peace.outline:before { + content: "\f25b"; +} +i.icon.hand.point.down.outline:before { + content: "\f0a7"; +} +i.icon.hand.point.left.outline:before { + content: "\f0a5"; +} +i.icon.hand.point.right.outline:before { + content: "\f0a4"; +} +i.icon.hand.point.up.outline:before { + content: "\f0a6"; +} +i.icon.hand.pointer.outline:before { + content: "\f25a"; +} +i.icon.hand.rock.outline:before { + content: "\f255"; +} +i.icon.hand.scissors.outline:before { + content: "\f257"; +} +i.icon.hand.spock.outline:before { + content: "\f259"; +} +i.icon.handshake.outline:before { + content: "\f2b5"; +} +i.icon.hdd.outline:before { + content: "\f0a0"; +} +i.icon.heart.outline:before { + content: "\f004"; +} +i.icon.hospital.outline:before { + content: "\f0f8"; +} +i.icon.hourglass.outline:before { + content: "\f254"; +} +i.icon.id.badge.outline:before { + content: "\f2c1"; +} +i.icon.id.card.outline:before { + content: "\f2c2"; +} +i.icon.image.outline:before { + content: "\f03e"; +} +i.icon.images.outline:before { + content: "\f302"; +} +i.icon.keyboard.outline:before { + content: "\f11c"; +} +i.icon.lemon.outline:before { + content: "\f094"; +} +i.icon.life.ring.outline:before { + content: "\f1cd"; +} +i.icon.lightbulb.outline:before { + content: "\f0eb"; +} +i.icon.list.alternate.outline:before { + content: "\f022"; +} +i.icon.map.outline:before { + content: "\f279"; +} +i.icon.meh.outline:before { + content: "\f11a"; +} +i.icon.minus.square.outline:before { + content: "\f146"; +} +i.icon.money.bill.alternate.outline:before { + content: "\f3d1"; +} +i.icon.moon.outline:before { + content: "\f186"; +} +i.icon.newspaper.outline:before { + content: "\f1ea"; +} +i.icon.object.group.outline:before { + content: "\f247"; +} +i.icon.object.ungroup.outline:before { + content: "\f248"; +} +i.icon.paper.plane.outline:before { + content: "\f1d8"; +} +i.icon.pause.circle.outline:before { + content: "\f28b"; +} +i.icon.play.circle.outline:before { + content: "\f144"; +} +i.icon.plus.square.outline:before { + content: "\f0fe"; +} +i.icon.question.circle.outline:before { + content: "\f059"; +} +i.icon.registered.outline:before { + content: "\f25d"; +} +i.icon.save.outline:before { + content: "\f0c7"; +} +i.icon.share.square.outline:before { + content: "\f14d"; +} +i.icon.smile.outline:before { + content: "\f118"; +} +i.icon.snowflake.outline:before { + content: "\f2dc"; +} +i.icon.square.outline:before { + content: "\f0c8"; +} +i.icon.star.outline:before { + content: "\f005"; +} +i.icon.star.half.outline:before { + content: "\f089"; +} +i.icon.sticky.note.outline:before { + content: "\f249"; +} +i.icon.stop.circle.outline:before { + content: "\f28d"; +} +i.icon.sun.outline:before { + content: "\f185"; +} +i.icon.thumbs.down.outline:before { + content: "\f165"; +} +i.icon.thumbs.up.outline:before { + content: "\f164"; +} +i.icon.times.circle.outline:before { + content: "\f057"; +} +i.icon.trash.alternate.outline:before { + content: "\f2ed"; +} +i.icon.user.outline:before { + content: "\f007"; +} +i.icon.user.circle.outline:before { + content: "\f2bd"; +} +i.icon.window.close.outline:before { + content: "\f410"; +} +i.icon.window.maximize.outline:before { + content: "\f2d0"; +} +i.icon.window.minimize.outline:before { + content: "\f2d1"; +} +i.icon.window.restore.outline:before { + content: "\f2d2"; +} + +/* Outline Aliases */ +i.icon.disk.outline:before { + content: "\f0a0"; +} +i.icon.heart.empty, +i.icon.star.empty { + font-family: 'outline-icons'; +} +i.icon.heart.empty:before { + content: "\f004"; +} +i.icon.star.empty:before { + content: "\f089"; +} + + +/******************************* + Brand Icons +*******************************/ + + +/* Load & Define Brand Font */ +@font-face { + font-family: 'brand-icons'; + src: url("./../themes/default/assets/fonts/brand-icons.eot"); + src: url("./../themes/default/assets/fonts/brand-icons.eot?#iefix") format('embedded-opentype'), url("./../themes/default/assets/fonts/brand-icons.woff2") format('woff2'), url("./../themes/default/assets/fonts/brand-icons.woff") format('woff'), url("./../themes/default/assets/fonts/brand-icons.ttf") format('truetype'), url("./../themes/default/assets/fonts/brand-icons.svg#icons") format('svg'); + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +/* Brand Icon Font Family */ +i.icon.\35 00px, +i.icon.accessible.icon, +i.icon.accusoft, +i.icon.adn, +i.icon.adversal, +i.icon.affiliatetheme, +i.icon.algolia, +i.icon.amazon, +i.icon.amazon.pay, +i.icon.amilia, +i.icon.android, +i.icon.angellist, +i.icon.angrycreative, +i.icon.angular, +i.icon.app.store, +i.icon.app.store.ios, +i.icon.apper, +i.icon.apple, +i.icon.apple.pay, +i.icon.asymmetrik, +i.icon.audible, +i.icon.autoprefixer, +i.icon.avianex, +i.icon.aviato, +i.icon.aws, +i.icon.bandcamp, +i.icon.behance, +i.icon.behance.square, +i.icon.bimobject, +i.icon.bitbucket, +i.icon.bitcoin, +i.icon.bity, +i.icon.black.tie, +i.icon.blackberry, +i.icon.blogger, +i.icon.blogger.b, +i.icon.bluetooth, +i.icon.bluetooth.b, +i.icon.btc, +i.icon.buromobelexperte, +i.icon.buysellads, +i.icon.cc.amazon.pay, +i.icon.cc.amex, +i.icon.cc.apple.pay, +i.icon.cc.diners.club, +i.icon.cc.discover, +i.icon.cc.jcb, +i.icon.cc.mastercard, +i.icon.cc.paypal, +i.icon.cc.stripe, +i.icon.cc.visa, +i.icon.centercode, +i.icon.chrome, +i.icon.cloudscale, +i.icon.cloudsmith, +i.icon.cloudversify, +i.icon.codepen, +i.icon.codiepie, +i.icon.connectdevelop, +i.icon.contao, +i.icon.cpanel, +i.icon.creative.commons, +i.icon.css3, +i.icon.css3.alternate, +i.icon.cuttlefish, +i.icon.d.and.d, +i.icon.dashcube, +i.icon.delicious, +i.icon.deploydog, +i.icon.deskpro, +i.icon.deviantart, +i.icon.digg, +i.icon.digital.ocean, +i.icon.discord, +i.icon.discourse, +i.icon.dochub, +i.icon.docker, +i.icon.draft2digital, +i.icon.dribbble, +i.icon.dribbble.square, +i.icon.dropbox, +i.icon.drupal, +i.icon.dyalog, +i.icon.earlybirds, +i.icon.edge, +i.icon.elementor, +i.icon.ember, +i.icon.empire, +i.icon.envira, +i.icon.erlang, +i.icon.ethereum, +i.icon.etsy, +i.icon.expeditedssl, +i.icon.facebook, +i.icon.facebook.f, +i.icon.facebook.messenger, +i.icon.facebook.square, +i.icon.firefox, +i.icon.first.order, +i.icon.firstdraft, +i.icon.flickr, +i.icon.flipboard, +i.icon.fly, +i.icon.font.awesome, +i.icon.font.awesome.alternate, +i.icon.font.awesome.flag, +i.icon.fonticons, +i.icon.fonticons.fi, +i.icon.fort.awesome, +i.icon.fort.awesome.alternate, +i.icon.forumbee, +i.icon.foursquare, +i.icon.free.code.camp, +i.icon.freebsd, +i.icon.get.pocket, +i.icon.gg, +i.icon.gg.circle, +i.icon.git, +i.icon.git.square, +i.icon.github, +i.icon.github.alternate, +i.icon.github.square, +i.icon.gitkraken, +i.icon.gitlab, +i.icon.gitter, +i.icon.glide, +i.icon.glide.g, +i.icon.gofore, +i.icon.goodreads, +i.icon.goodreads.g, +i.icon.google, +i.icon.google.drive, +i.icon.google.play, +i.icon.google.plus, +i.icon.google.plus.g, +i.icon.google.plus.square, +i.icon.google.wallet, +i.icon.gratipay, +i.icon.grav, +i.icon.gripfire, +i.icon.grunt, +i.icon.gulp, +i.icon.hacker.news, +i.icon.hacker.news.square, +i.icon.hips, +i.icon.hire.a.helper, +i.icon.hooli, +i.icon.hotjar, +i.icon.houzz, +i.icon.html5, +i.icon.hubspot, +i.icon.imdb, +i.icon.instagram, +i.icon.internet.explorer, +i.icon.ioxhost, +i.icon.itunes, +i.icon.itunes.note, +i.icon.jenkins, +i.icon.joget, +i.icon.joomla, +i.icon.js, +i.icon.js.square, +i.icon.jsfiddle, +i.icon.keycdn, +i.icon.kickstarter, +i.icon.kickstarter.k, +i.icon.korvue, +i.icon.laravel, +i.icon.lastfm, +i.icon.lastfm.square, +i.icon.leanpub, +i.icon.less, +i.icon.linechat, +i.icon.linkedin, +i.icon.linkedin.alternate, +i.icon.linkedin.in, +i.icon.linode, +i.icon.linux, +i.icon.lyft, +i.icon.magento, +i.icon.maxcdn, +i.icon.medapps, +i.icon.medium, +i.icon.medium.m, +i.icon.medrt, +i.icon.meetup, +i.icon.microsoft, +i.icon.mix, +i.icon.mixcloud, +i.icon.mizuni, +i.icon.modx, +i.icon.monero, +i.icon.napster, +i.icon.nintendo.switch, +i.icon.node, +i.icon.node.js, +i.icon.npm, +i.icon.ns8, +i.icon.nutritionix, +i.icon.odnoklassniki, +i.icon.odnoklassniki.square, +i.icon.opencart, +i.icon.openid, +i.icon.opera, +i.icon.optin.monster, +i.icon.osi, +i.icon.page4, +i.icon.pagelines, +i.icon.palfed, +i.icon.patreon, +i.icon.paypal, +i.icon.periscope, +i.icon.phabricator, +i.icon.phoenix.framework, +i.icon.php, +i.icon.pied.piper, +i.icon.pied.piper.alternate, +i.icon.pied.piper.pp, +i.icon.pinterest, +i.icon.pinterest.p, +i.icon.pinterest.square, +i.icon.playstation, +i.icon.product.hunt, +i.icon.pushed, +i.icon.python, +i.icon.qq, +i.icon.quinscape, +i.icon.quora, +i.icon.ravelry, +i.icon.react, +i.icon.rebel, +i.icon.redriver, +i.icon.reddit, +i.icon.reddit.alien, +i.icon.reddit.square, +i.icon.rendact, +i.icon.renren, +i.icon.replyd, +i.icon.resolving, +i.icon.rocketchat, +i.icon.rockrms, +i.icon.safari, +i.icon.sass, +i.icon.schlix, +i.icon.scribd, +i.icon.searchengin, +i.icon.sellcast, +i.icon.sellsy, +i.icon.servicestack, +i.icon.shirtsinbulk, +i.icon.simplybuilt, +i.icon.sistrix, +i.icon.skyatlas, +i.icon.skype, +i.icon.slack, +i.icon.slack.hash, +i.icon.slideshare, +i.icon.snapchat, +i.icon.snapchat.ghost, +i.icon.snapchat.square, +i.icon.soundcloud, +i.icon.speakap, +i.icon.spotify, +i.icon.stack.exchange, +i.icon.stack.overflow, +i.icon.staylinked, +i.icon.steam, +i.icon.steam.square, +i.icon.steam.symbol, +i.icon.sticker.mule, +i.icon.strava, +i.icon.stripe, +i.icon.stripe.s, +i.icon.studiovinari, +i.icon.stumbleupon, +i.icon.stumbleupon.circle, +i.icon.superpowers, +i.icon.supple, +i.icon.telegram, +i.icon.telegram.plane, +i.icon.tencent.weibo, +i.icon.themeisle, +i.icon.trello, +i.icon.tripadvisor, +i.icon.tumblr, +i.icon.tumblr.square, +i.icon.twitch, +i.icon.twitter, +i.icon.twitter.square, +i.icon.typo3, +i.icon.uber, +i.icon.uikit, +i.icon.uniregistry, +i.icon.untappd, +i.icon.usb, +i.icon.ussunnah, +i.icon.vaadin, +i.icon.viacoin, +i.icon.viadeo, +i.icon.viadeo.square, +i.icon.viber, +i.icon.vimeo, +i.icon.vimeo.square, +i.icon.vimeo.v, +i.icon.vine, +i.icon.vk, +i.icon.vnv, +i.icon.vuejs, +i.icon.wechat, +i.icon.weibo, +i.icon.weixin, +i.icon.whatsapp, +i.icon.whatsapp.square, +i.icon.whmcs, +i.icon.wikipedia.w, +i.icon.windows, +i.icon.wordpress, +i.icon.wordpress.simple, +i.icon.wpbeginner, +i.icon.wpexplorer, +i.icon.wpforms, +i.icon.xbox, +i.icon.xing, +i.icon.xing.square, +i.icon.y.combinator, +i.icon.yahoo, +i.icon.yandex, +i.icon.yandex.international, +i.icon.yelp, +i.icon.yoast, +i.icon.youtube, +i.icon.youtube.square { + font-family: 'brand-icons'; +} + +/* Brand Icons Ideally Would Be Defined Here */ + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/icon.min.css b/semantic/components/icon.min.css new file mode 100644 index 0000000..1f6e8d7 --- /dev/null +++ b/semantic/components/icon.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */@font-face{font-family:Icons;src:url(../themes/default/assets/fonts/icons.eot);src:url(../themes/default/assets/fonts/icons.eot?#iefix) format('embedded-opentype'),url(../themes/default/assets/fonts/icons.woff2) format('woff2'),url(../themes/default/assets/fonts/icons.woff) format('woff'),url(../themes/default/assets/fonts/icons.ttf) format('truetype'),url(../themes/default/assets/fonts/icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon{display:inline-block;opacity:1;margin:0 .25rem 0 0;width:1.18em;height:1em;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;text-align:center;speak:none;font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-backface-visibility:hidden;backface-visibility:hidden}i.icon:before{background:0 0!important}i.icon.loading{height:1em;line-height:1;-webkit-animation:icon-loading 2s linear infinite;animation:icon-loading 2s linear infinite}@-webkit-keyframes icon-loading{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-loading{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}i.icon.hover{opacity:1!important}i.icon.active{opacity:1!important}i.emphasized.icon{opacity:1!important}i.disabled.icon{opacity:.45!important}i.fitted.icon{width:auto;margin:0!important}i.link.icon,i.link.icons{cursor:pointer;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}i.link.icon:hover,i.link.icons:hover{opacity:1!important}i.circular.icon{border-radius:500em!important;line-height:1!important;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:2em!important;height:2em!important}i.circular.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.flipped.icon,i.horizontally.flipped.icon{-webkit-transform:scale(-1,1);transform:scale(-1,1)}i.vertically.flipped.icon{-webkit-transform:scale(1,-1);transform:scale(1,-1)}i.clockwise.rotated.icon,i.right.rotated.icon,i.rotated.icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}i.counterclockwise.rotated.icon,i.left.rotated.icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}i.bordered.icon{line-height:1;vertical-align:baseline;width:2em;height:2em;padding:.5em 0!important;-webkit-box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset}i.bordered.inverted.icon{border:none;-webkit-box-shadow:none;box-shadow:none}i.inverted.bordered.icon,i.inverted.circular.icon{background-color:#1b1c1d!important;color:#fff!important}i.inverted.icon{color:#fff}i.red.icon{color:#db2828!important}i.inverted.red.icon{color:#ff695e!important}i.inverted.bordered.red.icon,i.inverted.circular.red.icon{background-color:#db2828!important;color:#fff!important}i.orange.icon{color:#f2711c!important}i.inverted.orange.icon{color:#ff851b!important}i.inverted.bordered.orange.icon,i.inverted.circular.orange.icon{background-color:#f2711c!important;color:#fff!important}i.yellow.icon{color:#fbbd08!important}i.inverted.yellow.icon{color:#ffe21f!important}i.inverted.bordered.yellow.icon,i.inverted.circular.yellow.icon{background-color:#fbbd08!important;color:#fff!important}i.olive.icon{color:#b5cc18!important}i.inverted.olive.icon{color:#d9e778!important}i.inverted.bordered.olive.icon,i.inverted.circular.olive.icon{background-color:#b5cc18!important;color:#fff!important}i.green.icon{color:#21ba45!important}i.inverted.green.icon{color:#2ecc40!important}i.inverted.bordered.green.icon,i.inverted.circular.green.icon{background-color:#21ba45!important;color:#fff!important}i.teal.icon{color:#00b5ad!important}i.inverted.teal.icon{color:#6dffff!important}i.inverted.bordered.teal.icon,i.inverted.circular.teal.icon{background-color:#00b5ad!important;color:#fff!important}i.blue.icon{color:#2185d0!important}i.inverted.blue.icon{color:#54c8ff!important}i.inverted.bordered.blue.icon,i.inverted.circular.blue.icon{background-color:#2185d0!important;color:#fff!important}i.violet.icon{color:#6435c9!important}i.inverted.violet.icon{color:#a291fb!important}i.inverted.bordered.violet.icon,i.inverted.circular.violet.icon{background-color:#6435c9!important;color:#fff!important}i.purple.icon{color:#a333c8!important}i.inverted.purple.icon{color:#dc73ff!important}i.inverted.bordered.purple.icon,i.inverted.circular.purple.icon{background-color:#a333c8!important;color:#fff!important}i.pink.icon{color:#e03997!important}i.inverted.pink.icon{color:#ff8edf!important}i.inverted.bordered.pink.icon,i.inverted.circular.pink.icon{background-color:#e03997!important;color:#fff!important}i.brown.icon{color:#a5673f!important}i.inverted.brown.icon{color:#d67c1c!important}i.inverted.bordered.brown.icon,i.inverted.circular.brown.icon{background-color:#a5673f!important;color:#fff!important}i.grey.icon{color:#767676!important}i.inverted.grey.icon{color:#dcddde!important}i.inverted.bordered.grey.icon,i.inverted.circular.grey.icon{background-color:#767676!important;color:#fff!important}i.black.icon{color:#1b1c1d!important}i.inverted.black.icon{color:#545454!important}i.inverted.bordered.black.icon,i.inverted.circular.black.icon{background-color:#1b1c1d!important;color:#fff!important}i.mini.icon,i.mini.icons{line-height:1;font-size:.4em}i.tiny.icon,i.tiny.icons{line-height:1;font-size:.5em}i.small.icon,i.small.icons{line-height:1;font-size:.75em}i.icon,i.icons{font-size:1em}i.large.icon,i.large.icons{line-height:1;vertical-align:middle;font-size:1.5em}i.big.icon,i.big.icons{line-height:1;vertical-align:middle;font-size:2em}i.huge.icon,i.huge.icons{line-height:1;vertical-align:middle;font-size:4em}i.massive.icon,i.massive.icons{line-height:1;vertical-align:middle;font-size:8em}i.icons{display:inline-block;position:relative;line-height:1}i.icons .icon{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);margin:0;margin:0}i.icons .icon:first-child{position:static;width:auto;height:auto;vertical-align:top;-webkit-transform:none;transform:none;margin-right:.25rem}i.icons .corner.icon{top:auto;left:auto;right:0;bottom:0;-webkit-transform:none;transform:none;font-size:.45em;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff}i.icons .top.right.corner.icon{top:0;left:auto;right:0;bottom:auto}i.icons .top.left.corner.icon{top:0;left:0;right:auto;bottom:auto}i.icons .bottom.left.corner.icon{top:auto;left:0;right:auto;bottom:0}i.icons .bottom.right.corner.icon{top:auto;left:auto;right:0;bottom:0}i.icons .inverted.corner.icon{text-shadow:-1px -1px 0 #1b1c1d,1px -1px 0 #1b1c1d,-1px 1px 0 #1b1c1d,1px 1px 0 #1b1c1d}i.icon.linkedin.in:before{content:"\f0e1"}i.icon.zoom.in:before{content:"\f00e"}i.icon.zoom.out:before{content:"\f010"}i.icon.sign.in:before{content:"\f2f6"}i.icon.in.cart:before{content:"\f218"}i.icon.log.out:before{content:"\f2f5"}i.icon.sign.out:before{content:"\f2f5"}i.icon.\35 00px:before{content:"\f26e"}i.icon.accessible.icon:before{content:"\f368"}i.icon.accusoft:before{content:"\f369"}i.icon.address.book:before{content:"\f2b9"}i.icon.address.card:before{content:"\f2bb"}i.icon.adjust:before{content:"\f042"}i.icon.adn:before{content:"\f170"}i.icon.adversal:before{content:"\f36a"}i.icon.affiliatetheme:before{content:"\f36b"}i.icon.algolia:before{content:"\f36c"}i.icon.align.center:before{content:"\f037"}i.icon.align.justify:before{content:"\f039"}i.icon.align.left:before{content:"\f036"}i.icon.align.right:before{content:"\f038"}i.icon.amazon:before{content:"\f270"}i.icon.amazon.pay:before{content:"\f42c"}i.icon.ambulance:before{content:"\f0f9"}i.icon.american.sign.language.interpreting:before{content:"\f2a3"}i.icon.amilia:before{content:"\f36d"}i.icon.anchor:before{content:"\f13d"}i.icon.android:before{content:"\f17b"}i.icon.angellist:before{content:"\f209"}i.icon.angle.double.down:before{content:"\f103"}i.icon.angle.double.left:before{content:"\f100"}i.icon.angle.double.right:before{content:"\f101"}i.icon.angle.double.up:before{content:"\f102"}i.icon.angle.down:before{content:"\f107"}i.icon.angle.left:before{content:"\f104"}i.icon.angle.right:before{content:"\f105"}i.icon.angle.up:before{content:"\f106"}i.icon.angrycreative:before{content:"\f36e"}i.icon.angular:before{content:"\f420"}i.icon.app.store:before{content:"\f36f"}i.icon.app.store.ios:before{content:"\f370"}i.icon.apper:before{content:"\f371"}i.icon.apple:before{content:"\f179"}i.icon.apple.pay:before{content:"\f415"}i.icon.archive:before{content:"\f187"}i.icon.arrow.alternate.circle.down:before{content:"\f358"}i.icon.arrow.alternate.circle.left:before{content:"\f359"}i.icon.arrow.alternate.circle.right:before{content:"\f35a"}i.icon.arrow.alternate.circle.up:before{content:"\f35b"}i.icon.arrow.circle.down:before{content:"\f0ab"}i.icon.arrow.circle.left:before{content:"\f0a8"}i.icon.arrow.circle.right:before{content:"\f0a9"}i.icon.arrow.circle.up:before{content:"\f0aa"}i.icon.arrow.down:before{content:"\f063"}i.icon.arrow.left:before{content:"\f060"}i.icon.arrow.right:before{content:"\f061"}i.icon.arrow.up:before{content:"\f062"}i.icon.arrows.alternate:before{content:"\f0b2"}i.icon.arrows.alternate.horizontal:before{content:"\f337"}i.icon.arrows.alternate.vertical:before{content:"\f338"}i.icon.assistive.listening.systems:before{content:"\f2a2"}i.icon.asterisk:before{content:"\f069"}i.icon.asymmetrik:before{content:"\f372"}i.icon.at:before{content:"\f1fa"}i.icon.audible:before{content:"\f373"}i.icon.audio.description:before{content:"\f29e"}i.icon.autoprefixer:before{content:"\f41c"}i.icon.avianex:before{content:"\f374"}i.icon.aviato:before{content:"\f421"}i.icon.aws:before{content:"\f375"}i.icon.backward:before{content:"\f04a"}i.icon.balance.scale:before{content:"\f24e"}i.icon.ban:before{content:"\f05e"}i.icon.band.aid:before{content:"\f462"}i.icon.bandcamp:before{content:"\f2d5"}i.icon.barcode:before{content:"\f02a"}i.icon.bars:before{content:"\f0c9"}i.icon.baseball.ball:before{content:"\f433"}i.icon.basketball.ball:before{content:"\f434"}i.icon.bath:before{content:"\f2cd"}i.icon.battery.empty:before{content:"\f244"}i.icon.battery.full:before{content:"\f240"}i.icon.battery.half:before{content:"\f242"}i.icon.battery.quarter:before{content:"\f243"}i.icon.battery.three.quarters:before{content:"\f241"}i.icon.bed:before{content:"\f236"}i.icon.beer:before{content:"\f0fc"}i.icon.behance:before{content:"\f1b4"}i.icon.behance.square:before{content:"\f1b5"}i.icon.bell:before{content:"\f0f3"}i.icon.bell.slash:before{content:"\f1f6"}i.icon.bicycle:before{content:"\f206"}i.icon.bimobject:before{content:"\f378"}i.icon.binoculars:before{content:"\f1e5"}i.icon.birthday.cake:before{content:"\f1fd"}i.icon.bitbucket:before{content:"\f171"}i.icon.bitcoin:before{content:"\f379"}i.icon.bity:before{content:"\f37a"}i.icon.black.tie:before{content:"\f27e"}i.icon.blackberry:before{content:"\f37b"}i.icon.blind:before{content:"\f29d"}i.icon.blogger:before{content:"\f37c"}i.icon.blogger.b:before{content:"\f37d"}i.icon.bluetooth:before{content:"\f293"}i.icon.bluetooth.b:before{content:"\f294"}i.icon.bold:before{content:"\f032"}i.icon.bolt:before{content:"\f0e7"}i.icon.bomb:before{content:"\f1e2"}i.icon.book:before{content:"\f02d"}i.icon.bookmark:before{content:"\f02e"}i.icon.bowling.ball:before{content:"\f436"}i.icon.box:before{content:"\f466"}i.icon.boxes:before{content:"\f468"}i.icon.braille:before{content:"\f2a1"}i.icon.briefcase:before{content:"\f0b1"}i.icon.btc:before{content:"\f15a"}i.icon.bug:before{content:"\f188"}i.icon.building:before{content:"\f1ad"}i.icon.bullhorn:before{content:"\f0a1"}i.icon.bullseye:before{content:"\f140"}i.icon.buromobelexperte:before{content:"\f37f"}i.icon.bus:before{content:"\f207"}i.icon.buysellads:before{content:"\f20d"}i.icon.calculator:before{content:"\f1ec"}i.icon.calendar:before{content:"\f133"}i.icon.calendar.alternate:before{content:"\f073"}i.icon.calendar.check:before{content:"\f274"}i.icon.calendar.minus:before{content:"\f272"}i.icon.calendar.plus:before{content:"\f271"}i.icon.calendar.times:before{content:"\f273"}i.icon.camera:before{content:"\f030"}i.icon.camera.retro:before{content:"\f083"}i.icon.car:before{content:"\f1b9"}i.icon.caret.down:before{content:"\f0d7"}i.icon.caret.left:before{content:"\f0d9"}i.icon.caret.right:before{content:"\f0da"}i.icon.caret.square.down:before{content:"\f150"}i.icon.caret.square.left:before{content:"\f191"}i.icon.caret.square.right:before{content:"\f152"}i.icon.caret.square.up:before{content:"\f151"}i.icon.caret.up:before{content:"\f0d8"}i.icon.cart.arrow.down:before{content:"\f218"}i.icon.cart.plus:before{content:"\f217"}i.icon.cc.amazon.pay:before{content:"\f42d"}i.icon.cc.amex:before{content:"\f1f3"}i.icon.cc.apple.pay:before{content:"\f416"}i.icon.cc.diners.club:before{content:"\f24c"}i.icon.cc.discover:before{content:"\f1f2"}i.icon.cc.jcb:before{content:"\f24b"}i.icon.cc.mastercard:before{content:"\f1f1"}i.icon.cc.paypal:before{content:"\f1f4"}i.icon.cc.stripe:before{content:"\f1f5"}i.icon.cc.visa:before{content:"\f1f0"}i.icon.centercode:before{content:"\f380"}i.icon.certificate:before{content:"\f0a3"}i.icon.chart.area:before{content:"\f1fe"}i.icon.chart.bar:before{content:"\f080"}i.icon.chart.line:before{content:"\f201"}i.icon.chart.pie:before{content:"\f200"}i.icon.check:before{content:"\f00c"}i.icon.check.circle:before{content:"\f058"}i.icon.check.square:before{content:"\f14a"}i.icon.chess:before{content:"\f439"}i.icon.chess.bishop:before{content:"\f43a"}i.icon.chess.board:before{content:"\f43c"}i.icon.chess.king:before{content:"\f43f"}i.icon.chess.knight:before{content:"\f441"}i.icon.chess.pawn:before{content:"\f443"}i.icon.chess.queen:before{content:"\f445"}i.icon.chess.rook:before{content:"\f447"}i.icon.chevron.circle.down:before{content:"\f13a"}i.icon.chevron.circle.left:before{content:"\f137"}i.icon.chevron.circle.right:before{content:"\f138"}i.icon.chevron.circle.up:before{content:"\f139"}i.icon.chevron.down:before{content:"\f078"}i.icon.chevron.left:before{content:"\f053"}i.icon.chevron.right:before{content:"\f054"}i.icon.chevron.up:before{content:"\f077"}i.icon.child:before{content:"\f1ae"}i.icon.chrome:before{content:"\f268"}i.icon.circle:before{content:"\f111"}i.icon.circle.notch:before{content:"\f1ce"}i.icon.clipboard:before{content:"\f328"}i.icon.clipboard.check:before{content:"\f46c"}i.icon.clipboard.list:before{content:"\f46d"}i.icon.clock:before{content:"\f017"}i.icon.clone:before{content:"\f24d"}i.icon.closed.captioning:before{content:"\f20a"}i.icon.cloud:before{content:"\f0c2"}i.icon.cloudscale:before{content:"\f383"}i.icon.cloudsmith:before{content:"\f384"}i.icon.cloudversify:before{content:"\f385"}i.icon.code:before{content:"\f121"}i.icon.code.branch:before{content:"\f126"}i.icon.codepen:before{content:"\f1cb"}i.icon.codiepie:before{content:"\f284"}i.icon.coffee:before{content:"\f0f4"}i.icon.cog:before{content:"\f013"}i.icon.cogs:before{content:"\f085"}i.icon.columns:before{content:"\f0db"}i.icon.comment:before{content:"\f075"}i.icon.comment.alternate:before{content:"\f27a"}i.icon.comments:before{content:"\f086"}i.icon.compass:before{content:"\f14e"}i.icon.compress:before{content:"\f066"}i.icon.connectdevelop:before{content:"\f20e"}i.icon.contao:before{content:"\f26d"}i.icon.copy:before{content:"\f0c5"}i.icon.copyright:before{content:"\f1f9"}i.icon.cpanel:before{content:"\f388"}i.icon.creative.commons:before{content:"\f25e"}i.icon.credit.card:before{content:"\f09d"}i.icon.crop:before{content:"\f125"}i.icon.crosshairs:before{content:"\f05b"}i.icon.css3:before{content:"\f13c"}i.icon.css3.alternate:before{content:"\f38b"}i.icon.cube:before{content:"\f1b2"}i.icon.cubes:before{content:"\f1b3"}i.icon.cut:before{content:"\f0c4"}i.icon.cuttlefish:before{content:"\f38c"}i.icon.d.and.d:before{content:"\f38d"}i.icon.dashcube:before{content:"\f210"}i.icon.database:before{content:"\f1c0"}i.icon.deaf:before{content:"\f2a4"}i.icon.delicious:before{content:"\f1a5"}i.icon.deploydog:before{content:"\f38e"}i.icon.deskpro:before{content:"\f38f"}i.icon.desktop:before{content:"\f108"}i.icon.deviantart:before{content:"\f1bd"}i.icon.digg:before{content:"\f1a6"}i.icon.digital.ocean:before{content:"\f391"}i.icon.discord:before{content:"\f392"}i.icon.discourse:before{content:"\f393"}i.icon.dna:before{content:"\f471"}i.icon.dochub:before{content:"\f394"}i.icon.docker:before{content:"\f395"}i.icon.dollar.sign:before{content:"\f155"}i.icon.dolly:before{content:"\f472"}i.icon.dolly.flatbed:before{content:"\f474"}i.icon.dot.circle:before{content:"\f192"}i.icon.download:before{content:"\f019"}i.icon.draft2digital:before{content:"\f396"}i.icon.dribbble:before{content:"\f17d"}i.icon.dribbble.square:before{content:"\f397"}i.icon.dropbox:before{content:"\f16b"}i.icon.drupal:before{content:"\f1a9"}i.icon.dyalog:before{content:"\f399"}i.icon.earlybirds:before{content:"\f39a"}i.icon.edge:before{content:"\f282"}i.icon.edit:before{content:"\f044"}i.icon.eject:before{content:"\f052"}i.icon.elementor:before{content:"\f430"}i.icon.ellipsis.horizontal:before{content:"\f141"}i.icon.ellipsis.vertical:before{content:"\f142"}i.icon.ember:before{content:"\f423"}i.icon.empire:before{content:"\f1d1"}i.icon.envelope:before{content:"\f0e0"}i.icon.envelope.open:before{content:"\f2b6"}i.icon.envelope.square:before{content:"\f199"}i.icon.envira:before{content:"\f299"}i.icon.eraser:before{content:"\f12d"}i.icon.erlang:before{content:"\f39d"}i.icon.ethereum:before{content:"\f42e"}i.icon.etsy:before{content:"\f2d7"}i.icon.euro.sign:before{content:"\f153"}i.icon.exchange.alternate:before{content:"\f362"}i.icon.exclamation:before{content:"\f12a"}i.icon.exclamation.circle:before{content:"\f06a"}i.icon.exclamation.triangle:before{content:"\f071"}i.icon.expand:before{content:"\f065"}i.icon.expand.arrows.alternate:before{content:"\f31e"}i.icon.expeditedssl:before{content:"\f23e"}i.icon.external.alternate:before{content:"\f35d"}i.icon.external.square.alternate:before{content:"\f360"}i.icon.eye:before{content:"\f06e"}i.icon.eye.dropper:before{content:"\f1fb"}i.icon.eye.slash:before{content:"\f070"}i.icon.facebook:before{content:"\f09a"}i.icon.facebook.f:before{content:"\f39e"}i.icon.facebook.messenger:before{content:"\f39f"}i.icon.facebook.square:before{content:"\f082"}i.icon.fast.backward:before{content:"\f049"}i.icon.fast.forward:before{content:"\f050"}i.icon.fax:before{content:"\f1ac"}i.icon.female:before{content:"\f182"}i.icon.fighter.jet:before{content:"\f0fb"}i.icon.file:before{content:"\f15b"}i.icon.file.alternate:before{content:"\f15c"}i.icon.file.archive:before{content:"\f1c6"}i.icon.file.audio:before{content:"\f1c7"}i.icon.file.code:before{content:"\f1c9"}i.icon.file.excel:before{content:"\f1c3"}i.icon.file.image:before{content:"\f1c5"}i.icon.file.pdf:before{content:"\f1c1"}i.icon.file.powerpoint:before{content:"\f1c4"}i.icon.file.video:before{content:"\f1c8"}i.icon.file.word:before{content:"\f1c2"}i.icon.film:before{content:"\f008"}i.icon.filter:before{content:"\f0b0"}i.icon.fire:before{content:"\f06d"}i.icon.fire.extinguisher:before{content:"\f134"}i.icon.firefox:before{content:"\f269"}i.icon.first.aid:before{content:"\f479"}i.icon.first.order:before{content:"\f2b0"}i.icon.firstdraft:before{content:"\f3a1"}i.icon.flag:before{content:"\f024"}i.icon.flag.checkered:before{content:"\f11e"}i.icon.flask:before{content:"\f0c3"}i.icon.flickr:before{content:"\f16e"}i.icon.flipboard:before{content:"\f44d"}i.icon.fly:before{content:"\f417"}i.icon.folder:before{content:"\f07b"}i.icon.folder.open:before{content:"\f07c"}i.icon.font:before{content:"\f031"}i.icon.font.awesome:before{content:"\f2b4"}i.icon.font.awesome.alternate:before{content:"\f35c"}i.icon.font.awesome.flag:before{content:"\f425"}i.icon.fonticons:before{content:"\f280"}i.icon.fonticons.fi:before{content:"\f3a2"}i.icon.football.ball:before{content:"\f44e"}i.icon.fort.awesome:before{content:"\f286"}i.icon.fort.awesome.alternate:before{content:"\f3a3"}i.icon.forumbee:before{content:"\f211"}i.icon.forward:before{content:"\f04e"}i.icon.foursquare:before{content:"\f180"}i.icon.free.code.camp:before{content:"\f2c5"}i.icon.freebsd:before{content:"\f3a4"}i.icon.frown:before{content:"\f119"}i.icon.futbol:before{content:"\f1e3"}i.icon.gamepad:before{content:"\f11b"}i.icon.gavel:before{content:"\f0e3"}i.icon.gem:before{content:"\f3a5"}i.icon.genderless:before{content:"\f22d"}i.icon.get.pocket:before{content:"\f265"}i.icon.gg:before{content:"\f260"}i.icon.gg.circle:before{content:"\f261"}i.icon.gift:before{content:"\f06b"}i.icon.git:before{content:"\f1d3"}i.icon.git.square:before{content:"\f1d2"}i.icon.github:before{content:"\f09b"}i.icon.github.alternate:before{content:"\f113"}i.icon.github.square:before{content:"\f092"}i.icon.gitkraken:before{content:"\f3a6"}i.icon.gitlab:before{content:"\f296"}i.icon.gitter:before{content:"\f426"}i.icon.glass.martini:before{content:"\f000"}i.icon.glide:before{content:"\f2a5"}i.icon.glide.g:before{content:"\f2a6"}i.icon.globe:before{content:"\f0ac"}i.icon.gofore:before{content:"\f3a7"}i.icon.golf.ball:before{content:"\f450"}i.icon.goodreads:before{content:"\f3a8"}i.icon.goodreads.g:before{content:"\f3a9"}i.icon.google:before{content:"\f1a0"}i.icon.google.drive:before{content:"\f3aa"}i.icon.google.play:before{content:"\f3ab"}i.icon.google.plus:before{content:"\f2b3"}i.icon.google.plus.g:before{content:"\f0d5"}i.icon.google.plus.square:before{content:"\f0d4"}i.icon.google.wallet:before{content:"\f1ee"}i.icon.graduation.cap:before{content:"\f19d"}i.icon.gratipay:before{content:"\f184"}i.icon.grav:before{content:"\f2d6"}i.icon.gripfire:before{content:"\f3ac"}i.icon.grunt:before{content:"\f3ad"}i.icon.gulp:before{content:"\f3ae"}i.icon.h.square:before{content:"\f0fd"}i.icon.hacker.news:before{content:"\f1d4"}i.icon.hacker.news.square:before{content:"\f3af"}i.icon.hand.lizard:before{content:"\f258"}i.icon.hand.paper:before{content:"\f256"}i.icon.hand.peace:before{content:"\f25b"}i.icon.hand.point.down:before{content:"\f0a7"}i.icon.hand.point.left:before{content:"\f0a5"}i.icon.hand.point.right:before{content:"\f0a4"}i.icon.hand.point.up:before{content:"\f0a6"}i.icon.hand.pointer:before{content:"\f25a"}i.icon.hand.rock:before{content:"\f255"}i.icon.hand.scissors:before{content:"\f257"}i.icon.hand.spock:before{content:"\f259"}i.icon.handshake:before{content:"\f2b5"}i.icon.hashtag:before{content:"\f292"}i.icon.hdd:before{content:"\f0a0"}i.icon.heading:before{content:"\f1dc"}i.icon.headphones:before{content:"\f025"}i.icon.heart:before{content:"\f004"}i.icon.heartbeat:before{content:"\f21e"}i.icon.hips:before{content:"\f452"}i.icon.hire.a.helper:before{content:"\f3b0"}i.icon.history:before{content:"\f1da"}i.icon.hockey.puck:before{content:"\f453"}i.icon.home:before{content:"\f015"}i.icon.hooli:before{content:"\f427"}i.icon.hospital:before{content:"\f0f8"}i.icon.hospital.symbol:before{content:"\f47e"}i.icon.hotjar:before{content:"\f3b1"}i.icon.hourglass:before{content:"\f254"}i.icon.hourglass.end:before{content:"\f253"}i.icon.hourglass.half:before{content:"\f252"}i.icon.hourglass.start:before{content:"\f251"}i.icon.houzz:before{content:"\f27c"}i.icon.html5:before{content:"\f13b"}i.icon.hubspot:before{content:"\f3b2"}i.icon.i.cursor:before{content:"\f246"}i.icon.id.badge:before{content:"\f2c1"}i.icon.id.card:before{content:"\f2c2"}i.icon.image:before{content:"\f03e"}i.icon.images:before{content:"\f302"}i.icon.imdb:before{content:"\f2d8"}i.icon.inbox:before{content:"\f01c"}i.icon.indent:before{content:"\f03c"}i.icon.industry:before{content:"\f275"}i.icon.info:before{content:"\f129"}i.icon.info.circle:before{content:"\f05a"}i.icon.instagram:before{content:"\f16d"}i.icon.internet.explorer:before{content:"\f26b"}i.icon.ioxhost:before{content:"\f208"}i.icon.italic:before{content:"\f033"}i.icon.itunes:before{content:"\f3b4"}i.icon.itunes.note:before{content:"\f3b5"}i.icon.jenkins:before{content:"\f3b6"}i.icon.joget:before{content:"\f3b7"}i.icon.joomla:before{content:"\f1aa"}i.icon.js:before{content:"\f3b8"}i.icon.js.square:before{content:"\f3b9"}i.icon.jsfiddle:before{content:"\f1cc"}i.icon.key:before{content:"\f084"}i.icon.keyboard:before{content:"\f11c"}i.icon.keycdn:before{content:"\f3ba"}i.icon.kickstarter:before{content:"\f3bb"}i.icon.kickstarter.k:before{content:"\f3bc"}i.icon.korvue:before{content:"\f42f"}i.icon.language:before{content:"\f1ab"}i.icon.laptop:before{content:"\f109"}i.icon.laravel:before{content:"\f3bd"}i.icon.lastfm:before{content:"\f202"}i.icon.lastfm.square:before{content:"\f203"}i.icon.leaf:before{content:"\f06c"}i.icon.leanpub:before{content:"\f212"}i.icon.lemon:before{content:"\f094"}i.icon.less:before{content:"\f41d"}i.icon.level.down.alternate:before{content:"\f3be"}i.icon.level.up.alternate:before{content:"\f3bf"}i.icon.life.ring:before{content:"\f1cd"}i.icon.lightbulb:before{content:"\f0eb"}i.icon.linechat:before{content:"\f3c0"}i.icon.linkify:before{content:"\f0c1"}i.icon.linkedin:before{content:"\f08c"}i.icon.linkedin.alt:before{content:"\f0e1"}i.icon.linode:before{content:"\f2b8"}i.icon.linux:before{content:"\f17c"}i.icon.lira.sign:before{content:"\f195"}i.icon.list:before{content:"\f03a"}i.icon.list.alternate:before{content:"\f022"}i.icon.list.ol:before{content:"\f0cb"}i.icon.list.ul:before{content:"\f0ca"}i.icon.location.arrow:before{content:"\f124"}i.icon.lock:before{content:"\f023"}i.icon.lock.open:before{content:"\f3c1"}i.icon.long.arrow.alternate.down:before{content:"\f309"}i.icon.long.arrow.alternate.left:before{content:"\f30a"}i.icon.long.arrow.alternate.right:before{content:"\f30b"}i.icon.long.arrow.alternate.up:before{content:"\f30c"}i.icon.low.vision:before{content:"\f2a8"}i.icon.lyft:before{content:"\f3c3"}i.icon.magento:before{content:"\f3c4"}i.icon.magic:before{content:"\f0d0"}i.icon.magnet:before{content:"\f076"}i.icon.male:before{content:"\f183"}i.icon.map:before{content:"\f279"}i.icon.map.marker:before{content:"\f041"}i.icon.map.marker.alternate:before{content:"\f3c5"}i.icon.map.pin:before{content:"\f276"}i.icon.map.signs:before{content:"\f277"}i.icon.mars:before{content:"\f222"}i.icon.mars.double:before{content:"\f227"}i.icon.mars.stroke:before{content:"\f229"}i.icon.mars.stroke.horizontal:before{content:"\f22b"}i.icon.mars.stroke.vertical:before{content:"\f22a"}i.icon.maxcdn:before{content:"\f136"}i.icon.medapps:before{content:"\f3c6"}i.icon.medium:before{content:"\f23a"}i.icon.medium.m:before{content:"\f3c7"}i.icon.medkit:before{content:"\f0fa"}i.icon.medrt:before{content:"\f3c8"}i.icon.meetup:before{content:"\f2e0"}i.icon.meh:before{content:"\f11a"}i.icon.mercury:before{content:"\f223"}i.icon.microchip:before{content:"\f2db"}i.icon.microphone:before{content:"\f130"}i.icon.microphone.slash:before{content:"\f131"}i.icon.microsoft:before{content:"\f3ca"}i.icon.minus:before{content:"\f068"}i.icon.minus.circle:before{content:"\f056"}i.icon.minus.square:before{content:"\f146"}i.icon.mix:before{content:"\f3cb"}i.icon.mixcloud:before{content:"\f289"}i.icon.mizuni:before{content:"\f3cc"}i.icon.mobile:before{content:"\f10b"}i.icon.mobile.alternate:before{content:"\f3cd"}i.icon.modx:before{content:"\f285"}i.icon.monero:before{content:"\f3d0"}i.icon.money.bill.alternate:before{content:"\f3d1"}i.icon.moon:before{content:"\f186"}i.icon.motorcycle:before{content:"\f21c"}i.icon.mouse.pointer:before{content:"\f245"}i.icon.music:before{content:"\f001"}i.icon.napster:before{content:"\f3d2"}i.icon.neuter:before{content:"\f22c"}i.icon.newspaper:before{content:"\f1ea"}i.icon.nintendo.switch:before{content:"\f418"}i.icon.node:before{content:"\f419"}i.icon.node.js:before{content:"\f3d3"}i.icon.npm:before{content:"\f3d4"}i.icon.ns8:before{content:"\f3d5"}i.icon.nutritionix:before{content:"\f3d6"}i.icon.object.group:before{content:"\f247"}i.icon.object.ungroup:before{content:"\f248"}i.icon.odnoklassniki:before{content:"\f263"}i.icon.odnoklassniki.square:before{content:"\f264"}i.icon.opencart:before{content:"\f23d"}i.icon.openid:before{content:"\f19b"}i.icon.opera:before{content:"\f26a"}i.icon.optin.monster:before{content:"\f23c"}i.icon.osi:before{content:"\f41a"}i.icon.outdent:before{content:"\f03b"}i.icon.page4:before{content:"\f3d7"}i.icon.pagelines:before{content:"\f18c"}i.icon.paint.brush:before{content:"\f1fc"}i.icon.palfed:before{content:"\f3d8"}i.icon.pallet:before{content:"\f482"}i.icon.paper.plane:before{content:"\f1d8"}i.icon.paperclip:before{content:"\f0c6"}i.icon.paragraph:before{content:"\f1dd"}i.icon.paste:before{content:"\f0ea"}i.icon.patreon:before{content:"\f3d9"}i.icon.pause:before{content:"\f04c"}i.icon.pause.circle:before{content:"\f28b"}i.icon.paw:before{content:"\f1b0"}i.icon.paypal:before{content:"\f1ed"}i.icon.pen.square:before{content:"\f14b"}i.icon.pencil.alternate:before{content:"\f303"}i.icon.percent:before{content:"\f295"}i.icon.periscope:before{content:"\f3da"}i.icon.phabricator:before{content:"\f3db"}i.icon.phoenix.framework:before{content:"\f3dc"}i.icon.phone:before{content:"\f095"}i.icon.phone.square:before{content:"\f098"}i.icon.phone.volume:before{content:"\f2a0"}i.icon.php:before{content:"\f457"}i.icon.pied.piper:before{content:"\f2ae"}i.icon.pied.piper.alternate:before{content:"\f1a8"}i.icon.pied.piper.pp:before{content:"\f1a7"}i.icon.pills:before{content:"\f484"}i.icon.pinterest:before{content:"\f0d2"}i.icon.pinterest.p:before{content:"\f231"}i.icon.pinterest.square:before{content:"\f0d3"}i.icon.plane:before{content:"\f072"}i.icon.play:before{content:"\f04b"}i.icon.play.circle:before{content:"\f144"}i.icon.playstation:before{content:"\f3df"}i.icon.plug:before{content:"\f1e6"}i.icon.plus:before{content:"\f067"}i.icon.plus.circle:before{content:"\f055"}i.icon.plus.square:before{content:"\f0fe"}i.icon.podcast:before{content:"\f2ce"}i.icon.pound.sign:before{content:"\f154"}i.icon.power.off:before{content:"\f011"}i.icon.print:before{content:"\f02f"}i.icon.product.hunt:before{content:"\f288"}i.icon.pushed:before{content:"\f3e1"}i.icon.puzzle.piece:before{content:"\f12e"}i.icon.python:before{content:"\f3e2"}i.icon.qq:before{content:"\f1d6"}i.icon.qrcode:before{content:"\f029"}i.icon.question:before{content:"\f128"}i.icon.question.circle:before{content:"\f059"}i.icon.quidditch:before{content:"\f458"}i.icon.quinscape:before{content:"\f459"}i.icon.quora:before{content:"\f2c4"}i.icon.quote.left:before{content:"\f10d"}i.icon.quote.right:before{content:"\f10e"}i.icon.random:before{content:"\f074"}i.icon.ravelry:before{content:"\f2d9"}i.icon.react:before{content:"\f41b"}i.icon.rebel:before{content:"\f1d0"}i.icon.recycle:before{content:"\f1b8"}i.icon.redriver:before{content:"\f3e3"}i.icon.reddit:before{content:"\f1a1"}i.icon.reddit.alien:before{content:"\f281"}i.icon.reddit.square:before{content:"\f1a2"}i.icon.redo:before{content:"\f01e"}i.icon.redo.alternate:before{content:"\f2f9"}i.icon.registered:before{content:"\f25d"}i.icon.rendact:before{content:"\f3e4"}i.icon.renren:before{content:"\f18b"}i.icon.reply:before{content:"\f3e5"}i.icon.reply.all:before{content:"\f122"}i.icon.replyd:before{content:"\f3e6"}i.icon.resolving:before{content:"\f3e7"}i.icon.retweet:before{content:"\f079"}i.icon.road:before{content:"\f018"}i.icon.rocket:before{content:"\f135"}i.icon.rocketchat:before{content:"\f3e8"}i.icon.rockrms:before{content:"\f3e9"}i.icon.rss:before{content:"\f09e"}i.icon.rss.square:before{content:"\f143"}i.icon.ruble.sign:before{content:"\f158"}i.icon.rupee.sign:before{content:"\f156"}i.icon.safari:before{content:"\f267"}i.icon.sass:before{content:"\f41e"}i.icon.save:before{content:"\f0c7"}i.icon.schlix:before{content:"\f3ea"}i.icon.scribd:before{content:"\f28a"}i.icon.search:before{content:"\f002"}i.icon.search.minus:before{content:"\f010"}i.icon.search.plus:before{content:"\f00e"}i.icon.searchengin:before{content:"\f3eb"}i.icon.sellcast:before{content:"\f2da"}i.icon.sellsy:before{content:"\f213"}i.icon.server:before{content:"\f233"}i.icon.servicestack:before{content:"\f3ec"}i.icon.share:before{content:"\f064"}i.icon.share.alternate:before{content:"\f1e0"}i.icon.share.alternate.square:before{content:"\f1e1"}i.icon.share.square:before{content:"\f14d"}i.icon.shekel.sign:before{content:"\f20b"}i.icon.shield.alternate:before{content:"\f3ed"}i.icon.ship:before{content:"\f21a"}i.icon.shipping.fast:before{content:"\f48b"}i.icon.shirtsinbulk:before{content:"\f214"}i.icon.shopping.bag:before{content:"\f290"}i.icon.shopping.basket:before{content:"\f291"}i.icon.shopping.cart:before{content:"\f07a"}i.icon.shower:before{content:"\f2cc"}i.icon.sign.language:before{content:"\f2a7"}i.icon.signal:before{content:"\f012"}i.icon.simplybuilt:before{content:"\f215"}i.icon.sistrix:before{content:"\f3ee"}i.icon.sitemap:before{content:"\f0e8"}i.icon.skyatlas:before{content:"\f216"}i.icon.skype:before{content:"\f17e"}i.icon.slack:before{content:"\f198"}i.icon.slack.hash:before{content:"\f3ef"}i.icon.sliders.horizontal:before{content:"\f1de"}i.icon.slideshare:before{content:"\f1e7"}i.icon.smile:before{content:"\f118"}i.icon.snapchat:before{content:"\f2ab"}i.icon.snapchat.ghost:before{content:"\f2ac"}i.icon.snapchat.square:before{content:"\f2ad"}i.icon.snowflake:before{content:"\f2dc"}i.icon.sort:before{content:"\f0dc"}i.icon.sort.alphabet.down:before{content:"\f15d"}i.icon.sort.alphabet.up:before{content:"\f15e"}i.icon.sort.amount.down:before{content:"\f160"}i.icon.sort.amount.up:before{content:"\f161"}i.icon.sort.down:before{content:"\f0dd"}i.icon.sort.numeric.down:before{content:"\f162"}i.icon.sort.numeric.up:before{content:"\f163"}i.icon.sort.up:before{content:"\f0de"}i.icon.soundcloud:before{content:"\f1be"}i.icon.space.shuttle:before{content:"\f197"}i.icon.speakap:before{content:"\f3f3"}i.icon.spinner:before{content:"\f110"}i.icon.spotify:before{content:"\f1bc"}i.icon.square:before{content:"\f0c8"}i.icon.square.full:before{content:"\f45c"}i.icon.stack.exchange:before{content:"\f18d"}i.icon.stack.overflow:before{content:"\f16c"}i.icon.star:before{content:"\f005"}i.icon.star.half:before{content:"\f089"}i.icon.staylinked:before{content:"\f3f5"}i.icon.steam:before{content:"\f1b6"}i.icon.steam.square:before{content:"\f1b7"}i.icon.steam.symbol:before{content:"\f3f6"}i.icon.step.backward:before{content:"\f048"}i.icon.step.forward:before{content:"\f051"}i.icon.stethoscope:before{content:"\f0f1"}i.icon.sticker.mule:before{content:"\f3f7"}i.icon.sticky.note:before{content:"\f249"}i.icon.stop:before{content:"\f04d"}i.icon.stop.circle:before{content:"\f28d"}i.icon.stopwatch:before{content:"\f2f2"}i.icon.strava:before{content:"\f428"}i.icon.street.view:before{content:"\f21d"}i.icon.strikethrough:before{content:"\f0cc"}i.icon.stripe:before{content:"\f429"}i.icon.stripe.s:before{content:"\f42a"}i.icon.studiovinari:before{content:"\f3f8"}i.icon.stumbleupon:before{content:"\f1a4"}i.icon.stumbleupon.circle:before{content:"\f1a3"}i.icon.subscript:before{content:"\f12c"}i.icon.subway:before{content:"\f239"}i.icon.suitcase:before{content:"\f0f2"}i.icon.sun:before{content:"\f185"}i.icon.superpowers:before{content:"\f2dd"}i.icon.superscript:before{content:"\f12b"}i.icon.supple:before{content:"\f3f9"}i.icon.sync:before{content:"\f021"}i.icon.sync.alternate:before{content:"\f2f1"}i.icon.syringe:before{content:"\f48e"}i.icon.table:before{content:"\f0ce"}i.icon.table.tennis:before{content:"\f45d"}i.icon.tablet:before{content:"\f10a"}i.icon.tablet.alternate:before{content:"\f3fa"}i.icon.tachometer.alternate:before{content:"\f3fd"}i.icon.tag:before{content:"\f02b"}i.icon.tags:before{content:"\f02c"}i.icon.tasks:before{content:"\f0ae"}i.icon.taxi:before{content:"\f1ba"}i.icon.telegram:before{content:"\f2c6"}i.icon.telegram.plane:before{content:"\f3fe"}i.icon.tencent.weibo:before{content:"\f1d5"}i.icon.terminal:before{content:"\f120"}i.icon.text.height:before{content:"\f034"}i.icon.text.width:before{content:"\f035"}i.icon.th:before{content:"\f00a"}i.icon.th.large:before{content:"\f009"}i.icon.th.list:before{content:"\f00b"}i.icon.themeisle:before{content:"\f2b2"}i.icon.thermometer:before{content:"\f491"}i.icon.thermometer.empty:before{content:"\f2cb"}i.icon.thermometer.full:before{content:"\f2c7"}i.icon.thermometer.half:before{content:"\f2c9"}i.icon.thermometer.quarter:before{content:"\f2ca"}i.icon.thermometer.three.quarters:before{content:"\f2c8"}i.icon.thumbs.down:before{content:"\f165"}i.icon.thumbs.up:before{content:"\f164"}i.icon.thumbtack:before{content:"\f08d"}i.icon.ticket.alternate:before{content:"\f3ff"}i.icon.times:before{content:"\f00d"}i.icon.times.circle:before{content:"\f057"}i.icon.tint:before{content:"\f043"}i.icon.toggle.off:before{content:"\f204"}i.icon.toggle.on:before{content:"\f205"}i.icon.trademark:before{content:"\f25c"}i.icon.train:before{content:"\f238"}i.icon.transgender:before{content:"\f224"}i.icon.transgender.alternate:before{content:"\f225"}i.icon.trash:before{content:"\f1f8"}i.icon.trash.alternate:before{content:"\f2ed"}i.icon.tree:before{content:"\f1bb"}i.icon.trello:before{content:"\f181"}i.icon.tripadvisor:before{content:"\f262"}i.icon.trophy:before{content:"\f091"}i.icon.truck:before{content:"\f0d1"}i.icon.tty:before{content:"\f1e4"}i.icon.tumblr:before{content:"\f173"}i.icon.tumblr.square:before{content:"\f174"}i.icon.tv:before{content:"\f26c"}i.icon.twitch:before{content:"\f1e8"}i.icon.twitter:before{content:"\f099"}i.icon.twitter.square:before{content:"\f081"}i.icon.typo3:before{content:"\f42b"}i.icon.uber:before{content:"\f402"}i.icon.uikit:before{content:"\f403"}i.icon.umbrella:before{content:"\f0e9"}i.icon.underline:before{content:"\f0cd"}i.icon.undo:before{content:"\f0e2"}i.icon.undo.alternate:before{content:"\f2ea"}i.icon.uniregistry:before{content:"\f404"}i.icon.universal.access:before{content:"\f29a"}i.icon.university:before{content:"\f19c"}i.icon.unlink:before{content:"\f127"}i.icon.unlock:before{content:"\f09c"}i.icon.unlock.alternate:before{content:"\f13e"}i.icon.untappd:before{content:"\f405"}i.icon.upload:before{content:"\f093"}i.icon.usb:before{content:"\f287"}i.icon.user:before{content:"\f007"}i.icon.user.circle:before{content:"\f2bd"}i.icon.user.md:before{content:"\f0f0"}i.icon.user.plus:before{content:"\f234"}i.icon.user.secret:before{content:"\f21b"}i.icon.user.times:before{content:"\f235"}i.icon.users:before{content:"\f0c0"}i.icon.ussunnah:before{content:"\f407"}i.icon.utensil.spoon:before{content:"\f2e5"}i.icon.utensils:before{content:"\f2e7"}i.icon.vaadin:before{content:"\f408"}i.icon.venus:before{content:"\f221"}i.icon.venus.double:before{content:"\f226"}i.icon.venus.mars:before{content:"\f228"}i.icon.viacoin:before{content:"\f237"}i.icon.viadeo:before{content:"\f2a9"}i.icon.viadeo.square:before{content:"\f2aa"}i.icon.viber:before{content:"\f409"}i.icon.video:before{content:"\f03d"}i.icon.vimeo:before{content:"\f40a"}i.icon.vimeo.square:before{content:"\f194"}i.icon.vimeo.v:before{content:"\f27d"}i.icon.vine:before{content:"\f1ca"}i.icon.vk:before{content:"\f189"}i.icon.vnv:before{content:"\f40b"}i.icon.volleyball.ball:before{content:"\f45f"}i.icon.volume.down:before{content:"\f027"}i.icon.volume.off:before{content:"\f026"}i.icon.volume.up:before{content:"\f028"}i.icon.vuejs:before{content:"\f41f"}i.icon.warehouse:before{content:"\f494"}i.icon.weibo:before{content:"\f18a"}i.icon.weight:before{content:"\f496"}i.icon.weixin:before{content:"\f1d7"}i.icon.whatsapp:before{content:"\f232"}i.icon.whatsapp.square:before{content:"\f40c"}i.icon.wheelchair:before{content:"\f193"}i.icon.whmcs:before{content:"\f40d"}i.icon.wifi:before{content:"\f1eb"}i.icon.wikipedia.w:before{content:"\f266"}i.icon.window.close:before{content:"\f410"}i.icon.window.maximize:before{content:"\f2d0"}i.icon.window.minimize:before{content:"\f2d1"}i.icon.window.restore:before{content:"\f2d2"}i.icon.windows:before{content:"\f17a"}i.icon.won.sign:before{content:"\f159"}i.icon.wordpress:before{content:"\f19a"}i.icon.wordpress.simple:before{content:"\f411"}i.icon.wpbeginner:before{content:"\f297"}i.icon.wpexplorer:before{content:"\f2de"}i.icon.wpforms:before{content:"\f298"}i.icon.wrench:before{content:"\f0ad"}i.icon.xbox:before{content:"\f412"}i.icon.xing:before{content:"\f168"}i.icon.xing.square:before{content:"\f169"}i.icon.y.combinator:before{content:"\f23b"}i.icon.yahoo:before{content:"\f19e"}i.icon.yandex:before{content:"\f413"}i.icon.yandex.international:before{content:"\f414"}i.icon.yelp:before{content:"\f1e9"}i.icon.yen.sign:before{content:"\f157"}i.icon.yoast:before{content:"\f2b1"}i.icon.youtube:before{content:"\f167"}i.icon.youtube.square:before{content:"\f431"}i.icon.chess.rock:before{content:"\f447"}i.icon.ordered.list:before{content:"\f0cb"}i.icon.unordered.list:before{content:"\f0ca"}i.icon.user.doctor:before{content:"\f0f0"}i.icon.shield:before{content:"\f3ed"}i.icon.puzzle:before{content:"\f12e"}i.icon.credit.card.amazon.pay:before{content:"\f42d"}i.icon.credit.card.american.express:before{content:"\f1f3"}i.icon.credit.card.diners.club:before{content:"\f24c"}i.icon.credit.card.discover:before{content:"\f1f2"}i.icon.credit.card.jcb:before{content:"\f24b"}i.icon.credit.card.mastercard:before{content:"\f1f1"}i.icon.credit.card.paypal:before{content:"\f1f4"}i.icon.credit.card.stripe:before{content:"\f1f5"}i.icon.credit.card.visa:before{content:"\f1f0"}i.icon.add.circle:before{content:"\f055"}i.icon.add.square:before{content:"\f0fe"}i.icon.add.to.calendar:before{content:"\f271"}i.icon.add.to.cart:before{content:"\f217"}i.icon.add.user:before{content:"\f234"}i.icon.add:before{content:"\f067"}i.icon.alarm.mute:before{content:"\f1f6"}i.icon.alarm:before{content:"\f0f3"}i.icon.ald:before{content:"\f2a2"}i.icon.als:before{content:"\f2a2"}i.icon.american.express.card:before{content:"\f1f3"}i.icon.american.express:before{content:"\f1f3"}i.icon.amex:before{content:"\f1f3"}i.icon.announcement:before{content:"\f0a1"}i.icon.area.chart:before{content:"\f1fe"}i.icon.area.graph:before{content:"\f1fe"}i.icon.arrow.down.cart:before{content:"\f218"}i.icon.asexual:before{content:"\f22d"}i.icon.asl.interpreting:before{content:"\f2a3"}i.icon.asl:before{content:"\f2a3"}i.icon.assistive.listening.devices:before{content:"\f2a2"}i.icon.attach:before{content:"\f0c6"}i.icon.attention:before{content:"\f06a"}i.icon.balance:before{content:"\f24e"}i.icon.bar:before{content:"\f0fc"}i.icon.bathtub:before{content:"\f2cd"}i.icon.battery.four:before{content:"\f240"}i.icon.battery.high:before{content:"\f241"}i.icon.battery.low:before{content:"\f243"}i.icon.battery.medium:before{content:"\f242"}i.icon.battery.one:before{content:"\f243"}i.icon.battery.three:before{content:"\f241"}i.icon.battery.two:before{content:"\f242"}i.icon.battery.zero:before{content:"\f244"}i.icon.birthday:before{content:"\f1fd"}i.icon.block.layout:before{content:"\f009"}i.icon.bluetooth.alternative:before{content:"\f294"}i.icon.broken.chain:before{content:"\f127"}i.icon.browser:before{content:"\f022"}i.icon.call.square:before{content:"\f098"}i.icon.call:before{content:"\f095"}i.icon.cancel:before{content:"\f00d"}i.icon.cart:before{content:"\f07a"}i.icon.cc:before{content:"\f20a"}i.icon.chain:before{content:"\f0c1"}i.icon.chat:before{content:"\f075"}i.icon.checked.calendar:before{content:"\f274"}i.icon.checkmark:before{content:"\f00c"}i.icon.circle.notched:before{content:"\f1ce"}i.icon.close:before{content:"\f00d"}i.icon.cny:before{content:"\f157"}i.icon.cocktail:before{content:"\f000"}i.icon.commenting:before{content:"\f27a"}i.icon.computer:before{content:"\f108"}i.icon.configure:before{content:"\f0ad"}i.icon.content:before{content:"\f0c9"}i.icon.deafness:before{content:"\f2a4"}i.icon.delete.calendar:before{content:"\f273"}i.icon.delete:before{content:"\f00d"}i.icon.detective:before{content:"\f21b"}i.icon.diners.club.card:before{content:"\f24c"}i.icon.diners.club:before{content:"\f24c"}i.icon.discover.card:before{content:"\f1f2"}i.icon.discover:before{content:"\f1f2"}i.icon.discussions:before{content:"\f086"}i.icon.doctor:before{content:"\f0f0"}i.icon.dollar:before{content:"\f155"}i.icon.dont:before{content:"\f05e"}i.icon.dribble:before{content:"\f17d"}i.icon.drivers.license:before{content:"\f2c2"}i.icon.dropdown:before{content:"\f0d7"}i.icon.eercast:before{content:"\f2da"}i.icon.emergency:before{content:"\f0f9"}i.icon.envira.gallery:before{content:"\f299"}i.icon.erase:before{content:"\f12d"}i.icon.eur:before{content:"\f153"}i.icon.euro:before{content:"\f153"}i.icon.eyedropper:before{content:"\f1fb"}i.icon.fa:before{content:"\f2b4"}i.icon.factory:before{content:"\f275"}i.icon.favorite:before{content:"\f005"}i.icon.feed:before{content:"\f09e"}i.icon.female.homosexual:before{content:"\f226"}i.icon.file.text:before{content:"\f15c"}i.icon.find:before{content:"\f1e5"}i.icon.first.aid:before{content:"\f0fa"}i.icon.five.hundred.pixels:before{content:"\f26e"}i.icon.fork:before{content:"\f126"}i.icon.game:before{content:"\f11b"}i.icon.gay:before{content:"\f227"}i.icon.gbp:before{content:"\f154"}i.icon.gittip:before{content:"\f184"}i.icon.google.plus.circle:before{content:"\f2b3"}i.icon.google.plus.official:before{content:"\f2b3"}i.icon.grab:before{content:"\f255"}i.icon.graduation:before{content:"\f19d"}i.icon.grid.layout:before{content:"\f00a"}i.icon.group:before{content:"\f0c0"}i.icon.h:before{content:"\f0fd"}i.icon.hand.victory:before{content:"\f25b"}i.icon.handicap:before{content:"\f193"}i.icon.hard.of.hearing:before{content:"\f2a4"}i.icon.header:before{content:"\f1dc"}i.icon.help.circle:before{content:"\f059"}i.icon.help:before{content:"\f128"}i.icon.heterosexual:before{content:"\f228"}i.icon.hide:before{content:"\f070"}i.icon.hotel:before{content:"\f236"}i.icon.hourglass.four:before{content:"\f254"}i.icon.hourglass.full:before{content:"\f254"}i.icon.hourglass.one:before{content:"\f251"}i.icon.hourglass.three:before{content:"\f253"}i.icon.hourglass.two:before{content:"\f252"}i.icon.idea:before{content:"\f0eb"}i.icon.ils:before{content:"\f20b"}i.icon.in-cart:before{content:"\f218"}i.icon.inr:before{content:"\f156"}i.icon.intergender:before{content:"\f224"}i.icon.intersex:before{content:"\f224"}i.icon.japan.credit.bureau.card:before{content:"\f24b"}i.icon.japan.credit.bureau:before{content:"\f24b"}i.icon.jcb:before{content:"\f24b"}i.icon.jpy:before{content:"\f157"}i.icon.krw:before{content:"\f159"}i.icon.lab:before{content:"\f0c3"}i.icon.law:before{content:"\f24e"}i.icon.legal:before{content:"\f0e3"}i.icon.lesbian:before{content:"\f226"}i.icon.lightning:before{content:"\f0e7"}i.icon.like:before{content:"\f004"}i.icon.line.graph:before{content:"\f201"}i.icon.linkedin.square:before{content:"\f08c"}i.icon.linkify:before{content:"\f0c1"}i.icon.lira:before{content:"\f195"}i.icon.list.layout:before{content:"\f00b"}i.icon.magnify:before{content:"\f00e"}i.icon.mail.forward:before{content:"\f064"}i.icon.mail.square:before{content:"\f199"}i.icon.mail:before{content:"\f0e0"}i.icon.male.homosexual:before{content:"\f227"}i.icon.man:before{content:"\f222"}i.icon.marker:before{content:"\f041"}i.icon.mars.alternate:before{content:"\f229"}i.icon.mars.horizontal:before{content:"\f22b"}i.icon.mars.vertical:before{content:"\f22a"}i.icon.mastercard.card:before{content:"\f1f1"}i.icon.mastercard:before{content:"\f1f1"}i.icon.microsoft.edge:before{content:"\f282"}i.icon.military:before{content:"\f0fb"}i.icon.ms.edge:before{content:"\f282"}i.icon.mute:before{content:"\f131"}i.icon.new.pied.piper:before{content:"\f2ae"}i.icon.non.binary.transgender:before{content:"\f223"}i.icon.numbered.list:before{content:"\f0cb"}i.icon.optinmonster:before{content:"\f23c"}i.icon.options:before{content:"\f1de"}i.icon.other.gender.horizontal:before{content:"\f22b"}i.icon.other.gender.vertical:before{content:"\f22a"}i.icon.other.gender:before{content:"\f229"}i.icon.payment:before{content:"\f09d"}i.icon.paypal.card:before{content:"\f1f4"}i.icon.pencil.square:before{content:"\f14b"}i.icon.photo:before{content:"\f030"}i.icon.picture:before{content:"\f03e"}i.icon.pie.chart:before{content:"\f200"}i.icon.pie.graph:before{content:"\f200"}i.icon.pied.piper.hat:before{content:"\f2ae"}i.icon.pin:before{content:"\f08d"}i.icon.plus.cart:before{content:"\f217"}i.icon.pocket:before{content:"\f265"}i.icon.point:before{content:"\f041"}i.icon.pointing.down:before{content:"\f0a7"}i.icon.pointing.left:before{content:"\f0a5"}i.icon.pointing.right:before{content:"\f0a4"}i.icon.pointing.up:before{content:"\f0a6"}i.icon.pound:before{content:"\f154"}i.icon.power.cord:before{content:"\f1e6"}i.icon.power:before{content:"\f011"}i.icon.privacy:before{content:"\f084"}i.icon.r.circle:before{content:"\f25d"}i.icon.rain:before{content:"\f0e9"}i.icon.record:before{content:"\f03d"}i.icon.refresh:before{content:"\f021"}i.icon.remove.circle:before{content:"\f057"}i.icon.remove.from.calendar:before{content:"\f272"}i.icon.remove.user:before{content:"\f235"}i.icon.remove:before{content:"\f00d"}i.icon.repeat:before{content:"\f01e"}i.icon.rmb:before{content:"\f157"}i.icon.rouble:before{content:"\f158"}i.icon.rub:before{content:"\f158"}i.icon.ruble:before{content:"\f158"}i.icon.rupee:before{content:"\f156"}i.icon.s15:before{content:"\f2cd"}i.icon.selected.radio:before{content:"\f192"}i.icon.send:before{content:"\f1d8"}i.icon.setting:before{content:"\f013"}i.icon.settings:before{content:"\f085"}i.icon.shekel:before{content:"\f20b"}i.icon.sheqel:before{content:"\f20b"}i.icon.shipping:before{content:"\f0d1"}i.icon.shop:before{content:"\f07a"}i.icon.shuffle:before{content:"\f074"}i.icon.shutdown:before{content:"\f011"}i.icon.sidebar:before{content:"\f0c9"}i.icon.signing:before{content:"\f2a7"}i.icon.signup:before{content:"\f044"}i.icon.sliders:before{content:"\f1de"}i.icon.soccer:before{content:"\f1e3"}i.icon.sort.alphabet.ascending:before{content:"\f15d"}i.icon.sort.alphabet.descending:before{content:"\f15e"}i.icon.sort.ascending:before{content:"\f0de"}i.icon.sort.content.ascending:before{content:"\f160"}i.icon.sort.content.descending:before{content:"\f161"}i.icon.sort.descending:before{content:"\f0dd"}i.icon.sort.numeric.ascending:before{content:"\f162"}i.icon.sort.numeric.descending:before{content:"\f163"}i.icon.sound:before{content:"\f025"}i.icon.spy:before{content:"\f21b"}i.icon.stripe.card:before{content:"\f1f5"}i.icon.student:before{content:"\f19d"}i.icon.talk:before{content:"\f27a"}i.icon.target:before{content:"\f140"}i.icon.teletype:before{content:"\f1e4"}i.icon.television:before{content:"\f26c"}i.icon.text.cursor:before{content:"\f246"}i.icon.text.telephone:before{content:"\f1e4"}i.icon.theme.isle:before{content:"\f2b2"}i.icon.theme:before{content:"\f043"}i.icon.thermometer:before{content:"\f2c7"}i.icon.thumb.tack:before{content:"\f08d"}i.icon.time:before{content:"\f017"}i.icon.tm:before{content:"\f25c"}i.icon.toggle.down:before{content:"\f150"}i.icon.toggle.left:before{content:"\f191"}i.icon.toggle.right:before{content:"\f152"}i.icon.toggle.up:before{content:"\f151"}i.icon.translate:before{content:"\f1ab"}i.icon.travel:before{content:"\f0b1"}i.icon.treatment:before{content:"\f0f1"}i.icon.triangle.down:before{content:"\f0d7"}i.icon.triangle.left:before{content:"\f0d9"}i.icon.triangle.right:before{content:"\f0da"}i.icon.triangle.up:before{content:"\f0d8"}i.icon.try:before{content:"\f195"}i.icon.unhide:before{content:"\f06e"}i.icon.unlinkify:before{content:"\f127"}i.icon.unmute:before{content:"\f130"}i.icon.usd:before{content:"\f155"}i.icon.user.cancel:before{content:"\f235"}i.icon.user.close:before{content:"\f235"}i.icon.user.delete:before{content:"\f235"}i.icon.user.x:before{content:"\f235"}i.icon.vcard:before{content:"\f2bb"}i.icon.video.camera:before{content:"\f03d"}i.icon.video.play:before{content:"\f144"}i.icon.visa.card:before{content:"\f1f0"}i.icon.visa:before{content:"\f1f0"}i.icon.volume.control.phone:before{content:"\f2a0"}i.icon.wait:before{content:"\f017"}i.icon.warning.circle:before{content:"\f06a"}i.icon.warning.sign:before{content:"\f071"}i.icon.warning:before{content:"\f12a"}i.icon.wechat:before{content:"\f1d7"}i.icon.wi-fi:before{content:"\f1eb"}i.icon.wikipedia:before{content:"\f266"}i.icon.winner:before{content:"\f091"}i.icon.wizard:before{content:"\f0d0"}i.icon.woman:before{content:"\f221"}i.icon.won:before{content:"\f159"}i.icon.wordpress.beginner:before{content:"\f297"}i.icon.wordpress.forms:before{content:"\f298"}i.icon.world:before{content:"\f0ac"}i.icon.write.square:before{content:"\f14b"}i.icon.x:before{content:"\f00d"}i.icon.yc:before{content:"\f23b"}i.icon.ycombinator:before{content:"\f23b"}i.icon.yen:before{content:"\f157"}i.icon.zip:before{content:"\f187"}i.icon.zoom-in:before{content:"\f00e"}i.icon.zoom-out:before{content:"\f010"}i.icon.zoom:before{content:"\f00e"}i.icon.bitbucket.square:before{content:"\f171"}i.icon.checkmark.box:before{content:"\f14a"}i.icon.circle.thin:before{content:"\f111"}i.icon.cloud.download:before{content:"\f381"}i.icon.cloud.upload:before{content:"\f382"}i.icon.compose:before{content:"\f303"}i.icon.conversation:before{content:"\f086"}i.icon.credit.card.alternative:before{content:"\f09d"}i.icon.currency:before{content:"\f3d1"}i.icon.dashboard:before{content:"\f3fd"}i.icon.diamond:before{content:"\f3a5"}i.icon.disk:before{content:"\f0a0"}i.icon.exchange:before{content:"\f362"}i.icon.external.share:before{content:"\f14d"}i.icon.external.square:before{content:"\f360"}i.icon.external:before{content:"\f35d"}i.icon.facebook.official:before{content:"\f082"}i.icon.food:before{content:"\f2e7"}i.icon.hourglass.zero:before{content:"\f253"}i.icon.level.down:before{content:"\f3be"}i.icon.level.up:before{content:"\f3bf"}i.icon.logout:before{content:"\f2f5"}i.icon.meanpath:before{content:"\f0c8"}i.icon.money:before{content:"\f3d1"}i.icon.move:before{content:"\f0b2"}i.icon.pencil:before{content:"\f303"}i.icon.protect:before{content:"\f023"}i.icon.radio:before{content:"\f192"}i.icon.remove.bookmark:before{content:"\f02e"}i.icon.resize.horizontal:before{content:"\f337"}i.icon.resize.vertical:before{content:"\f338"}i.icon.sign-in:before{content:"\f2f6"}i.icon.sign-out:before{content:"\f2f5"}i.icon.spoon:before{content:"\f2e5"}i.icon.star.half.empty:before{content:"\f089"}i.icon.star.half.full:before{content:"\f089"}i.icon.ticket:before{content:"\f3ff"}i.icon.times.rectangle:before{content:"\f410"}i.icon.write:before{content:"\f303"}i.icon.youtube.play:before{content:"\f167"}@font-face{font-family:outline-icons;src:url(../themes/default/assets/fonts/outline-icons.eot);src:url(../themes/default/assets/fonts/outline-icons.eot?#iefix) format('embedded-opentype'),url(../themes/default/assets/fonts/outline-icons.woff2) format('woff2'),url(../themes/default/assets/fonts/outline-icons.woff) format('woff'),url(../themes/default/assets/fonts/outline-icons.ttf) format('truetype'),url(../themes/default/assets/fonts/outline-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.outline{font-family:outline-icons}i.icon.address.book.outline:before{content:"\f2b9"}i.icon.address.card.outline:before{content:"\f2bb"}i.icon.arrow.alternate.circle.down.outline:before{content:"\f358"}i.icon.arrow.alternate.circle.left.outline:before{content:"\f359"}i.icon.arrow.alternate.circle.right.outline:before{content:"\f35a"}i.icon.arrow.alternate.circle.up.outline:before{content:"\f35b"}i.icon.bell.outline:before{content:"\f0f3"}i.icon.bell.slash.outline:before{content:"\f1f6"}i.icon.bookmark.outline:before{content:"\f02e"}i.icon.building.outline:before{content:"\f1ad"}i.icon.calendar.outline:before{content:"\f133"}i.icon.calendar.alternate.outline:before{content:"\f073"}i.icon.calendar.check.outline:before{content:"\f274"}i.icon.calendar.minus.outline:before{content:"\f272"}i.icon.calendar.plus.outline:before{content:"\f271"}i.icon.calendar.times.outline:before{content:"\f273"}i.icon.caret.square.down.outline:before{content:"\f150"}i.icon.caret.square.left.outline:before{content:"\f191"}i.icon.caret.square.right.outline:before{content:"\f152"}i.icon.caret.square.up.outline:before{content:"\f151"}i.icon.chart.bar.outline:before{content:"\f080"}i.icon.check.circle.outline:before{content:"\f058"}i.icon.check.square.outline:before{content:"\f14a"}i.icon.circle.outline:before{content:"\f111"}i.icon.clipboard.outline:before{content:"\f328"}i.icon.clock.outline:before{content:"\f017"}i.icon.clone.outline:before{content:"\f24d"}i.icon.closed.captioning.outline:before{content:"\f20a"}i.icon.comment.outline:before{content:"\f075"}i.icon.comment.alternate.outline:before{content:"\f27a"}i.icon.comments.outline:before{content:"\f086"}i.icon.compass.outline:before{content:"\f14e"}i.icon.copy.outline:before{content:"\f0c5"}i.icon.copyright.outline:before{content:"\f1f9"}i.icon.credit.card.outline:before{content:"\f09d"}i.icon.dot.circle.outline:before{content:"\f192"}i.icon.edit.outline:before{content:"\f044"}i.icon.envelope.outline:before{content:"\f0e0"}i.icon.envelope.open.outline:before{content:"\f2b6"}i.icon.eye.slash.outline:before{content:"\f070"}i.icon.file.outline:before{content:"\f15b"}i.icon.file.alternate.outline:before{content:"\f15c"}i.icon.file.archive.outline:before{content:"\f1c6"}i.icon.file.audio.outline:before{content:"\f1c7"}i.icon.file.code.outline:before{content:"\f1c9"}i.icon.file.excel.outline:before{content:"\f1c3"}i.icon.file.image.outline:before{content:"\f1c5"}i.icon.file.pdf.outline:before{content:"\f1c1"}i.icon.file.powerpoint.outline:before{content:"\f1c4"}i.icon.file.video.outline:before{content:"\f1c8"}i.icon.file.word.outline:before{content:"\f1c2"}i.icon.flag.outline:before{content:"\f024"}i.icon.folder.outline:before{content:"\f07b"}i.icon.folder.open.outline:before{content:"\f07c"}i.icon.frown.outline:before{content:"\f119"}i.icon.futbol.outline:before{content:"\f1e3"}i.icon.gem.outline:before{content:"\f3a5"}i.icon.hand.lizard.outline:before{content:"\f258"}i.icon.hand.paper.outline:before{content:"\f256"}i.icon.hand.peace.outline:before{content:"\f25b"}i.icon.hand.point.down.outline:before{content:"\f0a7"}i.icon.hand.point.left.outline:before{content:"\f0a5"}i.icon.hand.point.right.outline:before{content:"\f0a4"}i.icon.hand.point.up.outline:before{content:"\f0a6"}i.icon.hand.pointer.outline:before{content:"\f25a"}i.icon.hand.rock.outline:before{content:"\f255"}i.icon.hand.scissors.outline:before{content:"\f257"}i.icon.hand.spock.outline:before{content:"\f259"}i.icon.handshake.outline:before{content:"\f2b5"}i.icon.hdd.outline:before{content:"\f0a0"}i.icon.heart.outline:before{content:"\f004"}i.icon.hospital.outline:before{content:"\f0f8"}i.icon.hourglass.outline:before{content:"\f254"}i.icon.id.badge.outline:before{content:"\f2c1"}i.icon.id.card.outline:before{content:"\f2c2"}i.icon.image.outline:before{content:"\f03e"}i.icon.images.outline:before{content:"\f302"}i.icon.keyboard.outline:before{content:"\f11c"}i.icon.lemon.outline:before{content:"\f094"}i.icon.life.ring.outline:before{content:"\f1cd"}i.icon.lightbulb.outline:before{content:"\f0eb"}i.icon.list.alternate.outline:before{content:"\f022"}i.icon.map.outline:before{content:"\f279"}i.icon.meh.outline:before{content:"\f11a"}i.icon.minus.square.outline:before{content:"\f146"}i.icon.money.bill.alternate.outline:before{content:"\f3d1"}i.icon.moon.outline:before{content:"\f186"}i.icon.newspaper.outline:before{content:"\f1ea"}i.icon.object.group.outline:before{content:"\f247"}i.icon.object.ungroup.outline:before{content:"\f248"}i.icon.paper.plane.outline:before{content:"\f1d8"}i.icon.pause.circle.outline:before{content:"\f28b"}i.icon.play.circle.outline:before{content:"\f144"}i.icon.plus.square.outline:before{content:"\f0fe"}i.icon.question.circle.outline:before{content:"\f059"}i.icon.registered.outline:before{content:"\f25d"}i.icon.save.outline:before{content:"\f0c7"}i.icon.share.square.outline:before{content:"\f14d"}i.icon.smile.outline:before{content:"\f118"}i.icon.snowflake.outline:before{content:"\f2dc"}i.icon.square.outline:before{content:"\f0c8"}i.icon.star.outline:before{content:"\f005"}i.icon.star.half.outline:before{content:"\f089"}i.icon.sticky.note.outline:before{content:"\f249"}i.icon.stop.circle.outline:before{content:"\f28d"}i.icon.sun.outline:before{content:"\f185"}i.icon.thumbs.down.outline:before{content:"\f165"}i.icon.thumbs.up.outline:before{content:"\f164"}i.icon.times.circle.outline:before{content:"\f057"}i.icon.trash.alternate.outline:before{content:"\f2ed"}i.icon.user.outline:before{content:"\f007"}i.icon.user.circle.outline:before{content:"\f2bd"}i.icon.window.close.outline:before{content:"\f410"}i.icon.window.maximize.outline:before{content:"\f2d0"}i.icon.window.minimize.outline:before{content:"\f2d1"}i.icon.window.restore.outline:before{content:"\f2d2"}i.icon.disk.outline:before{content:"\f0a0"}i.icon.heart.empty,i.icon.star.empty{font-family:outline-icons}i.icon.heart.empty:before{content:"\f004"}i.icon.star.empty:before{content:"\f089"}@font-face{font-family:brand-icons;src:url(../themes/default/assets/fonts/brand-icons.eot);src:url(../themes/default/assets/fonts/brand-icons.eot?#iefix) format('embedded-opentype'),url(../themes/default/assets/fonts/brand-icons.woff2) format('woff2'),url(../themes/default/assets/fonts/brand-icons.woff) format('woff'),url(../themes/default/assets/fonts/brand-icons.ttf) format('truetype'),url(../themes/default/assets/fonts/brand-icons.svg#icons) format('svg');font-style:normal;font-weight:400;font-variant:normal;text-decoration:inherit;text-transform:none}i.icon.\35 00px,i.icon.accessible.icon,i.icon.accusoft,i.icon.adn,i.icon.adversal,i.icon.affiliatetheme,i.icon.algolia,i.icon.amazon,i.icon.amazon.pay,i.icon.amilia,i.icon.android,i.icon.angellist,i.icon.angrycreative,i.icon.angular,i.icon.app.store,i.icon.app.store.ios,i.icon.apper,i.icon.apple,i.icon.apple.pay,i.icon.asymmetrik,i.icon.audible,i.icon.autoprefixer,i.icon.avianex,i.icon.aviato,i.icon.aws,i.icon.bandcamp,i.icon.behance,i.icon.behance.square,i.icon.bimobject,i.icon.bitbucket,i.icon.bitcoin,i.icon.bity,i.icon.black.tie,i.icon.blackberry,i.icon.blogger,i.icon.blogger.b,i.icon.bluetooth,i.icon.bluetooth.b,i.icon.btc,i.icon.buromobelexperte,i.icon.buysellads,i.icon.cc.amazon.pay,i.icon.cc.amex,i.icon.cc.apple.pay,i.icon.cc.diners.club,i.icon.cc.discover,i.icon.cc.jcb,i.icon.cc.mastercard,i.icon.cc.paypal,i.icon.cc.stripe,i.icon.cc.visa,i.icon.centercode,i.icon.chrome,i.icon.cloudscale,i.icon.cloudsmith,i.icon.cloudversify,i.icon.codepen,i.icon.codiepie,i.icon.connectdevelop,i.icon.contao,i.icon.cpanel,i.icon.creative.commons,i.icon.css3,i.icon.css3.alternate,i.icon.cuttlefish,i.icon.d.and.d,i.icon.dashcube,i.icon.delicious,i.icon.deploydog,i.icon.deskpro,i.icon.deviantart,i.icon.digg,i.icon.digital.ocean,i.icon.discord,i.icon.discourse,i.icon.dochub,i.icon.docker,i.icon.draft2digital,i.icon.dribbble,i.icon.dribbble.square,i.icon.dropbox,i.icon.drupal,i.icon.dyalog,i.icon.earlybirds,i.icon.edge,i.icon.elementor,i.icon.ember,i.icon.empire,i.icon.envira,i.icon.erlang,i.icon.ethereum,i.icon.etsy,i.icon.expeditedssl,i.icon.facebook,i.icon.facebook.f,i.icon.facebook.messenger,i.icon.facebook.square,i.icon.firefox,i.icon.first.order,i.icon.firstdraft,i.icon.flickr,i.icon.flipboard,i.icon.fly,i.icon.font.awesome,i.icon.font.awesome.alternate,i.icon.font.awesome.flag,i.icon.fonticons,i.icon.fonticons.fi,i.icon.fort.awesome,i.icon.fort.awesome.alternate,i.icon.forumbee,i.icon.foursquare,i.icon.free.code.camp,i.icon.freebsd,i.icon.get.pocket,i.icon.gg,i.icon.gg.circle,i.icon.git,i.icon.git.square,i.icon.github,i.icon.github.alternate,i.icon.github.square,i.icon.gitkraken,i.icon.gitlab,i.icon.gitter,i.icon.glide,i.icon.glide.g,i.icon.gofore,i.icon.goodreads,i.icon.goodreads.g,i.icon.google,i.icon.google.drive,i.icon.google.play,i.icon.google.plus,i.icon.google.plus.g,i.icon.google.plus.square,i.icon.google.wallet,i.icon.gratipay,i.icon.grav,i.icon.gripfire,i.icon.grunt,i.icon.gulp,i.icon.hacker.news,i.icon.hacker.news.square,i.icon.hips,i.icon.hire.a.helper,i.icon.hooli,i.icon.hotjar,i.icon.houzz,i.icon.html5,i.icon.hubspot,i.icon.imdb,i.icon.instagram,i.icon.internet.explorer,i.icon.ioxhost,i.icon.itunes,i.icon.itunes.note,i.icon.jenkins,i.icon.joget,i.icon.joomla,i.icon.js,i.icon.js.square,i.icon.jsfiddle,i.icon.keycdn,i.icon.kickstarter,i.icon.kickstarter.k,i.icon.korvue,i.icon.laravel,i.icon.lastfm,i.icon.lastfm.square,i.icon.leanpub,i.icon.less,i.icon.linechat,i.icon.linkedin,i.icon.linkedin.alternate,i.icon.linkedin.in,i.icon.linode,i.icon.linux,i.icon.lyft,i.icon.magento,i.icon.maxcdn,i.icon.medapps,i.icon.medium,i.icon.medium.m,i.icon.medrt,i.icon.meetup,i.icon.microsoft,i.icon.mix,i.icon.mixcloud,i.icon.mizuni,i.icon.modx,i.icon.monero,i.icon.napster,i.icon.nintendo.switch,i.icon.node,i.icon.node.js,i.icon.npm,i.icon.ns8,i.icon.nutritionix,i.icon.odnoklassniki,i.icon.odnoklassniki.square,i.icon.opencart,i.icon.openid,i.icon.opera,i.icon.optin.monster,i.icon.osi,i.icon.page4,i.icon.pagelines,i.icon.palfed,i.icon.patreon,i.icon.paypal,i.icon.periscope,i.icon.phabricator,i.icon.phoenix.framework,i.icon.php,i.icon.pied.piper,i.icon.pied.piper.alternate,i.icon.pied.piper.pp,i.icon.pinterest,i.icon.pinterest.p,i.icon.pinterest.square,i.icon.playstation,i.icon.product.hunt,i.icon.pushed,i.icon.python,i.icon.qq,i.icon.quinscape,i.icon.quora,i.icon.ravelry,i.icon.react,i.icon.rebel,i.icon.reddit,i.icon.reddit.alien,i.icon.reddit.square,i.icon.redriver,i.icon.rendact,i.icon.renren,i.icon.replyd,i.icon.resolving,i.icon.rocketchat,i.icon.rockrms,i.icon.safari,i.icon.sass,i.icon.schlix,i.icon.scribd,i.icon.searchengin,i.icon.sellcast,i.icon.sellsy,i.icon.servicestack,i.icon.shirtsinbulk,i.icon.simplybuilt,i.icon.sistrix,i.icon.skyatlas,i.icon.skype,i.icon.slack,i.icon.slack.hash,i.icon.slideshare,i.icon.snapchat,i.icon.snapchat.ghost,i.icon.snapchat.square,i.icon.soundcloud,i.icon.speakap,i.icon.spotify,i.icon.stack.exchange,i.icon.stack.overflow,i.icon.staylinked,i.icon.steam,i.icon.steam.square,i.icon.steam.symbol,i.icon.sticker.mule,i.icon.strava,i.icon.stripe,i.icon.stripe.s,i.icon.studiovinari,i.icon.stumbleupon,i.icon.stumbleupon.circle,i.icon.superpowers,i.icon.supple,i.icon.telegram,i.icon.telegram.plane,i.icon.tencent.weibo,i.icon.themeisle,i.icon.trello,i.icon.tripadvisor,i.icon.tumblr,i.icon.tumblr.square,i.icon.twitch,i.icon.twitter,i.icon.twitter.square,i.icon.typo3,i.icon.uber,i.icon.uikit,i.icon.uniregistry,i.icon.untappd,i.icon.usb,i.icon.ussunnah,i.icon.vaadin,i.icon.viacoin,i.icon.viadeo,i.icon.viadeo.square,i.icon.viber,i.icon.vimeo,i.icon.vimeo.square,i.icon.vimeo.v,i.icon.vine,i.icon.vk,i.icon.vnv,i.icon.vuejs,i.icon.wechat,i.icon.weibo,i.icon.weixin,i.icon.whatsapp,i.icon.whatsapp.square,i.icon.whmcs,i.icon.wikipedia.w,i.icon.windows,i.icon.wordpress,i.icon.wordpress.simple,i.icon.wpbeginner,i.icon.wpexplorer,i.icon.wpforms,i.icon.xbox,i.icon.xing,i.icon.xing.square,i.icon.y.combinator,i.icon.yahoo,i.icon.yandex,i.icon.yandex.international,i.icon.yelp,i.icon.yoast,i.icon.youtube,i.icon.youtube.square{font-family:brand-icons} \ No newline at end of file diff --git a/semantic/components/image.css b/semantic/components/image.css new file mode 100644 index 0000000..9d358ed --- /dev/null +++ b/semantic/components/image.css @@ -0,0 +1,310 @@ +/*! + * # Semantic UI 2.4.1 - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Image +*******************************/ + +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: transparent; +} +img.ui.image { + display: block; +} +.ui.image svg, +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} + + +/******************************* + States +*******************************/ + +.ui.hidden.images, +.ui.hidden.image { + display: none; +} +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} +.ui.images > .hidden.transition { + display: inline-block; + visibility: hidden; +} +.ui.disabled.images, +.ui.disabled.image { + cursor: default; + opacity: 0.45; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inline +---------------*/ + +.ui.inline.image, +.ui.inline.image svg, +.ui.inline.image img { + display: inline-block; +} + +/*------------------ + Vertical Aligned +-------------------*/ + +.ui.top.aligned.images .image, +.ui.top.aligned.image, +.ui.top.aligned.image svg, +.ui.top.aligned.image img { + display: inline-block; + vertical-align: top; +} +.ui.middle.aligned.images .image, +.ui.middle.aligned.image, +.ui.middle.aligned.image svg, +.ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; +} +.ui.bottom.aligned.images .image, +.ui.bottom.aligned.image, +.ui.bottom.aligned.image svg, +.ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; +} + +/*-------------- + Rounded +---------------*/ + +.ui.rounded.images .image, +.ui.rounded.image, +.ui.rounded.images .image > *, +.ui.rounded.image > * { + border-radius: 0.3125em; +} + +/*-------------- + Bordered +---------------*/ + +.ui.bordered.images .image, +.ui.bordered.images img, +.ui.bordered.images svg, +.ui.bordered.image img, +.ui.bordered.image svg, +img.ui.bordered.image { + border: 1px solid rgba(0, 0, 0, 0.1); +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images, +.ui.circular.image { + overflow: hidden; +} +.ui.circular.images .image, +.ui.circular.image, +.ui.circular.images .image > *, +.ui.circular.image > * { + border-radius: 500rem; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.images svg, +.ui.fluid.image svg, +.ui.fluid.image img { + display: block; + width: 100%; + height: auto; +} + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.images svg, +.ui.avatar.image img, +.ui.avatar.image svg, +.ui.avatar.image { + margin-right: 0.25em; + display: inline-block; + width: 2em; + height: 2em; + border-radius: 500rem; +} + +/*------------------- + Spaced +--------------------*/ + +.ui.spaced.image { + display: inline-block !important; + margin-left: 0.5em; + margin-right: 0.5em; +} +.ui[class*="left spaced"].image { + margin-left: 0.5em; + margin-right: 0em; +} +.ui[class*="right spaced"].image { + margin-left: 0em; + margin-right: 0.5em; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: 1em; + margin-bottom: 1em; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-right: 0em; + margin-bottom: 1em; + margin-left: 1em; +} +.ui.floated.images:last-child, +.ui.floated.image:last-child { + margin-bottom: 0em; +} +.ui.centered.images, +.ui.centered.image { + margin-left: auto; + margin-right: auto; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.images svg, +.ui.mini.image { + width: 35px; + height: auto; + font-size: 0.78571429rem; +} +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.images svg, +.ui.tiny.image { + width: 80px; + height: auto; + font-size: 0.85714286rem; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.images svg, +.ui.small.image { + width: 150px; + height: auto; + font-size: 0.92857143rem; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: 300px; + height: auto; + font-size: 1rem; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.images svg, +.ui.large.image { + width: 450px; + height: auto; + font-size: 1.14285714rem; +} +.ui.big.images .image, +.ui.big.images img, +.ui.big.images svg, +.ui.big.image { + width: 600px; + height: auto; + font-size: 1.28571429rem; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.images svg, +.ui.huge.image { + width: 800px; + height: auto; + font-size: 1.42857143rem; +} +.ui.massive.images .image, +.ui.massive.images img, +.ui.massive.images svg, +.ui.massive.image { + width: 960px; + height: auto; + font-size: 1.71428571rem; +} + + +/******************************* + Groups +*******************************/ + +.ui.images { + font-size: 0em; + margin: 0em -0.25rem 0rem; +} +.ui.images .image, +.ui.images > img, +.ui.images > svg { + display: inline-block; + margin: 0em 0.25rem 0.5rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/image.min.css b/semantic/components/image.min.css new file mode 100644 index 0000000..7da57a0 --- /dev/null +++ b/semantic/components/image.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.image,.ui.hidden.images{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.78571429rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem} \ No newline at end of file diff --git a/semantic/components/input.css b/semantic/components/input.css new file mode 100644 index 0000000..36c0c62 --- /dev/null +++ b/semantic/components/input.css @@ -0,0 +1,519 @@ +/*! + * # Semantic UI 2.4.1 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: normal; + font-style: normal; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + color: rgba(0, 0, 0, 0.87); +} +.ui.input > input { + margin: 0em; + max-width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: left; + line-height: 1.21428571em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + padding: 0.67857143em 1em; + background: #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: box-shadow 0.1s ease, border-color 0.1s ease; + transition: box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------------- + Placeholder +---------------------*/ + + +/* browsers require these rules separate */ +.ui.input > input::-webkit-input-placeholder { + color: rgba(191, 191, 191, 0.87); +} +.ui.input > input::-moz-placeholder { + color: rgba(191, 191, 191, 0.87); +} +.ui.input > input:-ms-input-placeholder { + color: rgba(191, 191, 191, 0.87); +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input:not(.disabled) input[disabled] { + opacity: 0.45; +} +.ui.disabled.input > input, +.ui.input:not(.disabled) input[disabled] { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input > input:active, +.ui.input.down input { + border-color: rgba(0, 0, 0, 0.3); + background: #FAFAFA; + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} +.ui.loading.loading.input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + -webkit-animation: button-spin 0.6s linear; + animation: button-spin 0.6s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + border-radius: 500rem; + border-color: #767676 transparent transparent; + border-style: solid; + border-width: 0.2em; + -webkit-box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0px 0px 0px 1px transparent; +} + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus > input, +.ui.input > input:focus { + border-color: #85B7D9; + background: #FFFFFF; + color: rgba(0, 0, 0, 0.8); + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.input.focus > input::-webkit-input-placeholder, +.ui.input > input:focus::-webkit-input-placeholder { + color: rgba(115, 115, 115, 0.87); +} +.ui.input.focus > input::-moz-placeholder, +.ui.input > input:focus::-moz-placeholder { + color: rgba(115, 115, 115, 0.87); +} +.ui.input.focus > input:-ms-input-placeholder, +.ui.input > input:focus:-ms-input-placeholder { + color: rgba(115, 115, 115, 0.87); +} + +/*-------------------- + Error +---------------------*/ + +.ui.input.error > input { + background-color: #FFF6F6; + border-color: #E0B4B4; + color: #9F3A38; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Error Placeholder */ +.ui.input.error > input::-webkit-input-placeholder { + color: #e7bdbc; +} +.ui.input.error > input::-moz-placeholder { + color: #e7bdbc; +} +.ui.input.error > input:-ms-input-placeholder { + color: #e7bdbc !important; +} + +/* Focused Error Placeholder */ +.ui.input.error > input:focus::-webkit-input-placeholder { + color: #da9796; +} +.ui.input.error > input:focus::-moz-placeholder { + color: #da9796; +} +.ui.input.error > input:focus:-ms-input-placeholder { + color: #da9796 !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Transparent +---------------------*/ + +.ui.transparent.input > input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-radius: 0px !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: 1.1em; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: 2em !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: 2em !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: #FFFFFF; +} +.ui.transparent.inverted.input > input { + color: inherit; +} +.ui.transparent.inverted.input > input::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} +.ui.transparent.inverted.input > input::-moz-placeholder { + color: rgba(255, 255, 255, 0.5); +} +.ui.transparent.inverted.input > input:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.5); +} + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + width: 2.67142857em; + opacity: 0.5; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input > input { + padding-right: 2.67142857em !important; +} +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: -0.5em; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: 0.35em; + right: 0.5em; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: 1px; + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: 0.5em; +} +.ui[class*="left icon"].input > input { + padding-left: 2.67142857em !important; + padding-right: 1em !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + + +/* Adjacent Label */ +.ui.labeled.input > .label { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin: 0; + font-size: 1em; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: 0.78571429em; + padding-bottom: 0.78571429em; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: #85B7D9; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input > input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="right labeled"].input > input:focus { + border-right-color: #85B7D9 !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: 1px; + right: 1px; + font-size: 0.64285714em; + border-radius: 0em 0.28571429rem 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { + padding-right: 2.5em !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: 3.25em !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: 1.25em; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input > input { + padding-left: 2.5em !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: 3.25em !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: 1.25em; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: 1px; + right: 1px; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: 1px; +} + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: 0.78571429em; + padding-bottom: 0.78571429em; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), +.ui.action.input:not([class*="left action"]) > .button:not(:first-child), +.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px 0.28571429rem 0.28571429rem 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: #85B7D9 !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: 0.28571429rem 0px 0px 0.28571429rem; +} + +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: #85B7D9 !important; +} + +/*-------------------- + Inverted +---------------------*/ + + +/* Standard */ +.ui.inverted.input > input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: 0.78571429em; +} +.ui.small.input { + font-size: 0.92857143em; +} +.ui.input { + font-size: 1em; +} +.ui.large.input { + font-size: 1.14285714em; +} +.ui.big.input { + font-size: 1.28571429em; +} +.ui.huge.input { + font-size: 1.42857143em; +} +.ui.massive.input { + font-size: 1.71428571em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/input.min.css b/semantic/components/input.min.css new file mode 100644 index 0000000..ed6b60d --- /dev/null +++ b/semantic/components/input.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.input{position:relative;font-weight:400;font-style:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;color:rgba(0,0,0,.87)}.ui.input>input{margin:0;max-width:100%;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);text-align:left;line-height:1.21428571em;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;padding:.67857143em 1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-transition:border-color .1s ease,-webkit-box-shadow .1s ease;transition:border-color .1s ease,-webkit-box-shadow .1s ease;transition:box-shadow .1s ease,border-color .1s ease;transition:box-shadow .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease;-webkit-box-shadow:none;box-shadow:none}.ui.input>input::-webkit-input-placeholder{color:rgba(191,191,191,.87)}.ui.input>input::-moz-placeholder{color:rgba(191,191,191,.87)}.ui.input>input:-ms-input-placeholder{color:rgba(191,191,191,.87)}.ui.disabled.input,.ui.input:not(.disabled) input[disabled]{opacity:.45}.ui.disabled.input>input,.ui.input:not(.disabled) input[disabled]{pointer-events:none}.ui.input.down input,.ui.input>input:active{border-color:rgba(0,0,0,.3);background:#fafafa;color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none}.ui.loading.loading.input>i.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.loading.input>i.icon:after{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.ui.input.focus>input,.ui.input>input:focus{border-color:#85b7d9;background:#fff;color:rgba(0,0,0,.8);-webkit-box-shadow:none;box-shadow:none}.ui.input.focus>input::-webkit-input-placeholder,.ui.input>input:focus::-webkit-input-placeholder{color:rgba(115,115,115,.87)}.ui.input.focus>input::-moz-placeholder,.ui.input>input:focus::-moz-placeholder{color:rgba(115,115,115,.87)}.ui.input.focus>input:-ms-input-placeholder,.ui.input>input:focus:-ms-input-placeholder{color:rgba(115,115,115,.87)}.ui.input.error>input{background-color:#fff6f6;border-color:#e0b4b4;color:#9f3a38;-webkit-box-shadow:none;box-shadow:none}.ui.input.error>input::-webkit-input-placeholder{color:#e7bdbc}.ui.input.error>input::-moz-placeholder{color:#e7bdbc}.ui.input.error>input:-ms-input-placeholder{color:#e7bdbc!important}.ui.input.error>input:focus::-webkit-input-placeholder{color:#da9796}.ui.input.error>input:focus::-moz-placeholder{color:#da9796}.ui.input.error>input:focus:-ms-input-placeholder{color:#da9796!important}.ui.transparent.input>input{border-color:transparent!important;background-color:transparent!important;padding:0!important;-webkit-box-shadow:none!important;box-shadow:none!important;border-radius:0!important}.ui.transparent.icon.input>i.icon{width:1.1em}.ui.transparent.icon.input>input{padding-left:0!important;padding-right:2em!important}.ui.transparent[class*="left icon"].input>input{padding-left:2em!important;padding-right:0!important}.ui.transparent.inverted.input{color:#fff}.ui.transparent.inverted.input>input{color:inherit}.ui.transparent.inverted.input>input::-webkit-input-placeholder{color:rgba(255,255,255,.5)}.ui.transparent.inverted.input>input::-moz-placeholder{color:rgba(255,255,255,.5)}.ui.transparent.inverted.input>input:-ms-input-placeholder{color:rgba(255,255,255,.5)}.ui.icon.input>i.icon{cursor:default;position:absolute;line-height:1;text-align:center;top:0;right:0;margin:0;height:100%;width:2.67142857em;opacity:.5;border-radius:0 .28571429rem .28571429rem 0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.ui.icon.input>i.icon:not(.link){pointer-events:none}.ui.icon.input>input{padding-right:2.67142857em!important}.ui.icon.input>i.icon:after,.ui.icon.input>i.icon:before{left:0;position:absolute;text-align:center;top:50%;width:100%;margin-top:-.5em}.ui.icon.input>i.link.icon{cursor:pointer}.ui.icon.input>i.circular.icon{top:.35em;right:.5em}.ui[class*="left icon"].input>i.icon{right:auto;left:1px;border-radius:.28571429rem 0 0 .28571429rem}.ui[class*="left icon"].input>i.circular.icon{right:auto;left:.5em}.ui[class*="left icon"].input>input{padding-left:2.67142857em!important;padding-right:1em!important}.ui.icon.input>input:focus~i.icon{opacity:1}.ui.labeled.input>.label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:0;font-size:1em}.ui.labeled.input>.label:not(.corner){padding-top:.78571429em;padding-bottom:.78571429em}.ui.labeled.input:not([class*="corner labeled"]) .label:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.ui.labeled.input:not([class*="corner labeled"]) .label:first-child+input{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:transparent}.ui.labeled.input:not([class*="corner labeled"]) .label:first-child+input:focus{border-left-color:#85b7d9}.ui[class*="right labeled"].input>input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right-color:transparent!important}.ui[class*="right labeled"].input>input+.label{border-top-left-radius:0;border-bottom-left-radius:0}.ui[class*="right labeled"].input>input:focus{border-right-color:#85b7d9!important}.ui.labeled.input .corner.label{top:1px;right:1px;font-size:.64285714em;border-radius:0 .28571429rem 0 0}.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input>input{padding-right:2.5em!important}.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"])>input{padding-right:3.25em!important}.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"])>.icon{margin-right:1.25em}.ui[class*="left corner labeled"].labeled.input>input{padding-left:2.5em!important}.ui[class*="left corner labeled"].icon.input>input{padding-left:3.25em!important}.ui[class*="left corner labeled"].icon.input>.icon{margin-left:1.25em}.ui.input>.ui.corner.label{top:1px;right:1px}.ui.input>.ui.left.corner.label{right:auto;left:1px}.ui.action.input>.button,.ui.action.input>.buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.ui.action.input>.button,.ui.action.input>.buttons>.button{padding-top:.78571429em;padding-bottom:.78571429em;margin:0}.ui.action.input:not([class*="left action"])>input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right-color:transparent!important}.ui.action.input:not([class*="left action"])>.button:not(:first-child),.ui.action.input:not([class*="left action"])>.buttons:not(:first-child)>.button,.ui.action.input:not([class*="left action"])>.dropdown:not(:first-child){border-radius:0}.ui.action.input:not([class*="left action"])>.button:last-child,.ui.action.input:not([class*="left action"])>.buttons:last-child>.button,.ui.action.input:not([class*="left action"])>.dropdown:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.action.input:not([class*="left action"])>input:focus{border-right-color:#85b7d9!important}.ui[class*="left action"].input>input{border-top-left-radius:0!important;border-bottom-left-radius:0!important;border-left-color:transparent!important}.ui[class*="left action"].input>.button,.ui[class*="left action"].input>.buttons>.button,.ui[class*="left action"].input>.dropdown{border-radius:0}.ui[class*="left action"].input>.button:first-child,.ui[class*="left action"].input>.buttons:first-child>.button,.ui[class*="left action"].input>.dropdown:first-child{border-radius:.28571429rem 0 0 .28571429rem}.ui[class*="left action"].input>input:focus{border-left-color:#85b7d9!important}.ui.inverted.input>input{border:none}.ui.fluid.input{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.fluid.input>input{width:0!important}.ui.mini.input{font-size:.78571429em}.ui.small.input{font-size:.92857143em}.ui.input{font-size:1em}.ui.large.input{font-size:1.14285714em}.ui.big.input{font-size:1.28571429em}.ui.huge.input{font-size:1.42857143em}.ui.massive.input{font-size:1.71428571em} \ No newline at end of file diff --git a/semantic/components/item.css b/semantic/components/item.css new file mode 100644 index 0000000..4c86494 --- /dev/null +++ b/semantic/components/item.css @@ -0,0 +1,487 @@ +/*! + * # Semantic UI 2.4.1 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Item +---------------*/ + +.ui.items > .item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 1em 0em; + width: 100%; + min-height: 0px; + background: transparent; + padding: 0em; + border: none; + border-radius: 0rem; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: -webkit-box-shadow 0.1s ease; + transition: -webkit-box-shadow 0.1s ease; + transition: box-shadow 0.1s ease; + transition: box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease; + z-index: ''; +} +.ui.items > .item a { + cursor: pointer; +} + +/*-------------- + Items +---------------*/ + +.ui.items { + margin: 1.5em 0em; +} +.ui.items:first-child { + margin-top: 0em !important; +} +.ui.items:last-child { + margin-bottom: 0em !important; +} + +/*-------------- + Item +---------------*/ + +.ui.items > .item:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.items > .item:first-child { + margin-top: 0em; +} +.ui.items > .item:last-child { + margin-bottom: 0em; +} + +/*-------------- + Images +---------------*/ + +.ui.items > .item > .image { + position: relative; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: block; + float: none; + margin: 0em; + padding: 0em; + max-height: ''; + -ms-flex-item-align: top; + align-self: top; +} +.ui.items > .item > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: 0.125rem; + border: none; +} +.ui.items > .item > .image:only-child > img { + border-radius: 0rem; +} + +/*-------------- + Content +---------------*/ + +.ui.items > .item > .content { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background: none; + margin: 0em; + padding: 0em; + -webkit-box-shadow: none; + box-shadow: none; + font-size: 1em; + border: none; + border-radius: 0em; +} +.ui.items > .item > .content:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.items > .item > .image + .content { + min-width: 0; + width: auto; + display: block; + margin-left: 0em; + -ms-flex-item-align: top; + align-self: top; + padding-left: 1.5em; +} +.ui.items > .item > .content > .header { + display: inline-block; + margin: -0.21425em 0em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + color: rgba(0, 0, 0, 0.85); +} + +/* Default Header Size */ +.ui.items > .item > .content > .header:not(.ui) { + font-size: 1.28571429em; +} + +/*-------------- + Floated +---------------*/ + +.ui.items > .item [class*="left floated"] { + float: left; +} +.ui.items > .item [class*="right floated"] { + float: right; +} + +/*-------------- + Content Image +---------------*/ + +.ui.items > .item .content img { + -ms-flex-item-align: middle; + align-self: middle; + width: ''; +} +.ui.items > .item img.avatar, +.ui.items > .item .avatar img { + width: ''; + height: ''; + border-radius: 500rem; +} + +/*-------------- + Description +---------------*/ + +.ui.items > .item > .content > .description { + margin-top: 0.6em; + max-width: auto; + font-size: 1em; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); +} + +/*-------------- + Paragraph +---------------*/ + +.ui.items > .item > .content p { + margin: 0em 0em 0.5em; +} +.ui.items > .item > .content p:last-child { + margin-bottom: 0em; +} + +/*-------------- + Meta +---------------*/ + +.ui.items > .item .meta { + margin: 0.5em 0em 0.5em; + font-size: 1em; + line-height: 1em; + color: rgba(0, 0, 0, 0.6); +} +.ui.items > .item .meta * { + margin-right: 0.3em; +} +.ui.items > .item .meta :last-child { + margin-right: 0em; +} +.ui.items > .item .meta [class*="right floated"] { + margin-right: 0em; + margin-left: 0.3em; +} + +/*-------------- + Links +---------------*/ + + +/* Generic */ +.ui.items > .item > .content a:not(.ui) { + color: ''; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.items > .item > .content a:not(.ui):hover { + color: ''; +} + +/* Header */ +.ui.items > .item > .content > a.header { + color: rgba(0, 0, 0, 0.85); +} +.ui.items > .item > .content > a.header:hover { + color: #1e70bf; +} + +/* Meta */ +.ui.items > .item .meta > a:not(.ui) { + color: rgba(0, 0, 0, 0.4); +} +.ui.items > .item .meta > a:not(.ui):hover { + color: rgba(0, 0, 0, 0.87); +} + +/*-------------- + Labels +---------------*/ + + +/*-----Star----- */ + + +/* Icon */ +.ui.items > .item > .content .favorite.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.items > .item > .content .favorite.icon:hover { + opacity: 1; + color: #FFB70A; +} +.ui.items > .item > .content .active.favorite.icon { + color: #FFE623; +} + +/*-----Like----- */ + + +/* Icon */ +.ui.items > .item > .content .like.icon { + cursor: pointer; + opacity: 0.75; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.items > .item > .content .like.icon:hover { + opacity: 1; + color: #FF2733; +} +.ui.items > .item > .content .active.like.icon { + color: #FF2733; +} + +/*---------------- + Extra Content +-----------------*/ + +.ui.items > .item .extra { + display: block; + position: relative; + background: none; + margin: 0.5rem 0em 0em; + width: 100%; + padding: 0em 0em 0em; + top: 0em; + left: 0em; + color: rgba(0, 0, 0, 0.4); + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; + border-top: none; +} +.ui.items > .item .extra > * { + margin: 0.25rem 0.5rem 0.25rem 0em; +} +.ui.items > .item .extra > [class*="right floated"] { + margin: 0.25rem 0em 0.25rem 0.5rem; +} +.ui.items > .item .extra:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + + +/******************************* + Responsive +*******************************/ + + +/* Default Image Width */ +.ui.items > .item > .image:not(.ui) { + width: 175px; +} + +/* Tablet Only */ +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.items > .item { + margin: 1em 0em; + } + .ui.items > .item > .image:not(.ui) { + width: 150px; + } + .ui.items > .item > .image + .content { + display: block; + padding: 0em 0em 0em 1em; + } +} + +/* Mobile Only */ +@media only screen and (max-width: 767px) { + .ui.items:not(.unstackable) > .item { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 2em 0em; + } + .ui.items:not(.unstackable) > .item > .image { + display: block; + margin-left: auto; + margin-right: auto; + } + .ui.items:not(.unstackable) > .item > .image, + .ui.items:not(.unstackable) > .item > .image > img { + max-width: 100% !important; + width: auto !important; + max-height: 250px !important; + } + .ui.items:not(.unstackable) > .item > .image + .content { + display: block; + padding: 1.5em 0em 0em; + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Aligned +--------------------*/ + +.ui.items > .item > .image + [class*="top aligned"].content { + -ms-flex-item-align: start; + align-self: flex-start; +} +.ui.items > .item > .image + [class*="middle aligned"].content { + -ms-flex-item-align: center; + align-self: center; +} +.ui.items > .item > .image + [class*="bottom aligned"].content { + -ms-flex-item-align: end; + align-self: flex-end; +} + +/*-------------- + Relaxed +---------------*/ + +.ui.relaxed.items > .item { + margin: 1.5em 0em; +} +.ui[class*="very relaxed"].items > .item { + margin: 2em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.items > .item { + border-top: 1px solid rgba(34, 36, 38, 0.15); + margin: 0em; + padding: 1em 0em; +} +.ui.divided.items > .item:first-child { + border-top: none; + margin-top: 0em !important; + padding-top: 0em !important; +} +.ui.divided.items > .item:last-child { + margin-bottom: 0em !important; + padding-bottom: 0em !important; +} + +/* Relaxed Divided */ +.ui.relaxed.divided.items > .item { + margin: 0em; + padding: 1.5em 0em; +} +.ui[class*="very relaxed"].divided.items > .item { + margin: 0em; + padding: 2em 0em; +} + +/*------------------- + Link +--------------------*/ + +.ui.items a.item:hover, +.ui.link.items > .item:hover { + cursor: pointer; +} +.ui.items a.item:hover .content .header, +.ui.link.items > .item:hover .content .header { + color: #1e70bf; +} + +/*-------------- + Size +---------------*/ + +.ui.items > .item { + font-size: 1em; +} + +/*--------------- + Unstackable +----------------*/ + +@media only screen and (max-width: 767px) { + .ui.unstackable.items > .item > .image, + .ui.unstackable.items > .item > .image > img { + width: 125px !important; + } +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/item.min.css b/semantic/components/item.min.css new file mode 100644 index 0000000..2bba2cf --- /dev/null +++ b/semantic/components/item.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.items>.item{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em 0;width:100%;min-height:0;background:0 0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:-webkit-box-shadow .1s ease;transition:-webkit-box-shadow .1s ease;transition:box-shadow .1s ease;transition:box-shadow .1s ease,-webkit-box-shadow .1s ease;z-index:''}.ui.items>.item a{cursor:pointer}.ui.items{margin:1.5em 0}.ui.items:first-child{margin-top:0!important}.ui.items:last-child{margin-bottom:0!important}.ui.items>.item:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item:first-child{margin-top:0}.ui.items>.item:last-child{margin-bottom:0}.ui.items>.item>.image{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:block;float:none;margin:0;padding:0;max-height:'';-ms-flex-item-align:top;align-self:top}.ui.items>.item>.image>img{display:block;width:100%;height:auto;border-radius:.125rem;border:none}.ui.items>.item>.image:only-child>img{border-radius:0}.ui.items>.item>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:0 0;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;font-size:1em;border:none;border-radius:0}.ui.items>.item>.content:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image+.content{min-width:0;width:auto;display:block;margin-left:0;-ms-flex-item-align:top;align-self:top;padding-left:1.5em}.ui.items>.item>.content>.header{display:inline-block;margin:-.21425em 0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.85)}.ui.items>.item>.content>.header:not(.ui){font-size:1.28571429em}.ui.items>.item [class*="left floated"]{float:left}.ui.items>.item [class*="right floated"]{float:right}.ui.items>.item .content img{-ms-flex-item-align:middle;align-self:middle;width:''}.ui.items>.item .avatar img,.ui.items>.item img.avatar{width:'';height:'';border-radius:500rem}.ui.items>.item>.content>.description{margin-top:.6em;max-width:auto;font-size:1em;line-height:1.4285em;color:rgba(0,0,0,.87)}.ui.items>.item>.content p{margin:0 0 .5em}.ui.items>.item>.content p:last-child{margin-bottom:0}.ui.items>.item .meta{margin:.5em 0 .5em;font-size:1em;line-height:1em;color:rgba(0,0,0,.6)}.ui.items>.item .meta *{margin-right:.3em}.ui.items>.item .meta :last-child{margin-right:0}.ui.items>.item .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.items>.item>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content a:not(.ui):hover{color:''}.ui.items>.item>.content>a.header{color:rgba(0,0,0,.85)}.ui.items>.item>.content>a.header:hover{color:#1e70bf}.ui.items>.item .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.items>.item .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.items>.item>.content .favorite.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .favorite.icon:hover{opacity:1;color:#ffb70a}.ui.items>.item>.content .active.favorite.icon{color:#ffe623}.ui.items>.item>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.items>.item>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.items>.item>.content .active.like.icon{color:#ff2733}.ui.items>.item .extra{display:block;position:relative;background:0 0;margin:.5rem 0 0;width:100%;padding:0 0 0;top:0;left:0;color:rgba(0,0,0,.4);-webkit-box-shadow:none;box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease;border-top:none}.ui.items>.item .extra>*{margin:.25rem .5rem .25rem 0}.ui.items>.item .extra>[class*="right floated"]{margin:.25rem 0 .25rem .5rem}.ui.items>.item .extra:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.items>.item>.image:not(.ui){width:175px}@media only screen and (min-width:768px) and (max-width:991px){.ui.items>.item{margin:1em 0}.ui.items>.item>.image:not(.ui){width:150px}.ui.items>.item>.image+.content{display:block;padding:0 0 0 1em}}@media only screen and (max-width:767px){.ui.items:not(.unstackable)>.item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:2em 0}.ui.items:not(.unstackable)>.item>.image{display:block;margin-left:auto;margin-right:auto}.ui.items:not(.unstackable)>.item>.image,.ui.items:not(.unstackable)>.item>.image>img{max-width:100%!important;width:auto!important;max-height:250px!important}.ui.items:not(.unstackable)>.item>.image+.content{display:block;padding:1.5em 0 0}}.ui.items>.item>.image+[class*="top aligned"].content{-ms-flex-item-align:start;align-self:flex-start}.ui.items>.item>.image+[class*="middle aligned"].content{-ms-flex-item-align:center;align-self:center}.ui.items>.item>.image+[class*="bottom aligned"].content{-ms-flex-item-align:end;align-self:flex-end}.ui.relaxed.items>.item{margin:1.5em 0}.ui[class*="very relaxed"].items>.item{margin:2em 0}.ui.divided.items>.item{border-top:1px solid rgba(34,36,38,.15);margin:0;padding:1em 0}.ui.divided.items>.item:first-child{border-top:none;margin-top:0!important;padding-top:0!important}.ui.divided.items>.item:last-child{margin-bottom:0!important;padding-bottom:0!important}.ui.relaxed.divided.items>.item{margin:0;padding:1.5em 0}.ui[class*="very relaxed"].divided.items>.item{margin:0;padding:2em 0}.ui.items a.item:hover,.ui.link.items>.item:hover{cursor:pointer}.ui.items a.item:hover .content .header,.ui.link.items>.item:hover .content .header{color:#1e70bf}.ui.items>.item{font-size:1em}@media only screen and (max-width:767px){.ui.unstackable.items>.item>.image,.ui.unstackable.items>.item>.image>img{width:125px!important}} \ No newline at end of file diff --git a/semantic/components/label.css b/semantic/components/label.css new file mode 100644 index 0000000..c8be42b --- /dev/null +++ b/semantic/components/label.css @@ -0,0 +1,1313 @@ +/*! + * # Semantic UI 2.4.1 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: baseline; + margin: 0em 0.14285714em; + background-color: #E8E8E8; + background-image: none; + padding: 0.5833em 0.833em; + color: rgba(0, 0, 0, 0.6); + text-transform: none; + font-weight: bold; + border: 0px solid transparent; + border-radius: 0.28571429rem; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: 0.5; + -webkit-transition: 0.1s opacity ease; + transition: 0.1s opacity ease; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: 2.1666em !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em 0.75em 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: bold; + margin-left: 1em; + opacity: 0.8; +} +.ui.label > .detail .icon { + margin: 0em 0.25em 0em 0em; +} + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: 0.5em; + font-size: 0.92857143em; + opacity: 0.5; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em 0.5em 0.5em 0em; +} + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: -0.29165em; +} + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached), +.ui.top.attached.label + [class*="right floated"] + * { + margin-top: 2rem !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: 2rem !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + background: #E8E8E8; + padding: 0.5833em 0.833em 0.5833em 0.5em; + border-radius: 0.28571429rem; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.image.label img { + display: inline-block; + vertical-align: top; + height: 2.1666em; + margin: -0.5833em 0.5em -0.5833em -0.5em; + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} +.ui.image.label .detail { + background: rgba(0, 0, 0, 0.1); + margin: -0.5833em -0.833em -0.5833em 0.5em; + padding: 0.5833em 0.833em; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: 1.5em; + padding-right: 1.5em; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; + -webkit-transition: none; + transition: none; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg); + transform: translateY(-50%) translateX(50%) rotate(-45deg); + top: 50%; + right: 100%; + content: ''; + background-color: inherit; + background-image: none; + width: 1.56em; + height: 1.56em; + -webkit-transition: none; + transition: none; +} +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -0.25em; + margin-top: -0.25em; + background-color: #FFFFFF !important; + width: 0.5em; + height: 0.5em; + -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + border-radius: 500rem; +} + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + border-color: #E8E8E8; + width: 4em; + height: 4em; + z-index: 1; + -webkit-transition: border-color 0.1s ease; + transition: border-color 0.1s ease; +} + +/* Icon Label */ +.ui.corner.label { + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + width: 0em; + height: 0em; + background-color: transparent !important; + border-top: 0em solid transparent; + border-right: 4em solid transparent; + border-bottom: 4em solid transparent; + border-left: 0em solid transparent; + border-right-color: inherit; + -webkit-transition: border-color 0.1s ease; + transition: border-color 0.1s ease; +} +.ui.corner.label .icon { + cursor: default; + position: relative; + top: 0.64285714em; + left: 0.78571429em; + font-size: 1.14285714em; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: 4em solid transparent; + border-right: 4em solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -0.78571429em; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + border-radius: 0em 0.28571429rem 0.28571429rem 0em; + border-color: rgba(0, 0, 0, 0.15); +} +.ui.ribbon.label:after { + position: absolute; + content: ''; + top: 100%; + left: 0%; + background-color: transparent !important; + border-style: solid; + border-width: 0em 1.2em 1.2em 0em; + border-color: transparent; + border-right-color: inherit; + width: 0em; + height: 0em; +} + +/* Positioning */ +.ui.ribbon.label { + left: calc(-1rem - 1.2em); + margin-right: -1.2em; + padding-left: calc(1rem + 1.2em); + padding-right: 1.2em; +} +.ui[class*="right ribbon"].label { + left: calc(100% + 1rem + 1.2em); + padding-left: 1.2em; + padding-right: calc(1rem + 1.2em); +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + border-style: solid; + border-width: 1.2em 1.2em 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: 1rem; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: calc(--0.05rem - 1.2em); +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: calc(100% + -0.05rem + 1.2em); + padding-left: 0.833em; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: calc(-0.78571429em - 1.2em); +} +.ui.table td > .ui[class*="right ribbon"].label { + left: calc(100% + 0.78571429em + 1.2em); + padding-left: 0.833em; +} + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + padding: 0.75em 1em; + border-radius: 0.21428571rem 0.21428571rem 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em 0.21428571rem 0.21428571rem; +} +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: 0.21428571rem 0em 0.28571429rem 0em; +} +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em 0.21428571rem 0em 0.28571429rem; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em 0.28571429rem 0em 0.21428571rem; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: 0.28571429rem 0em 0.21428571rem 0em; +} + + +/******************************* + States +*******************************/ + + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: #E0E0E0; + border-color: #E0E0E0; + background-image: none; + color: rgba(0, 0, 0, 0.8); +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: rgba(0, 0, 0, 0.8); +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: #D0D0D0; + border-color: #D0D0D0; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} +.ui.active.label:before { + background-color: #D0D0D0; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: #C8C8C8; + border-color: #C8C8C8; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: #C8C8C8; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + + +/*--- Red ---*/ + +.ui.red.labels .label, +.ui.red.label { + background-color: #DB2828 !important; + border-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover { + background-color: #d01919 !important; + border-color: #d01919 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.red.ribbon.label { + border-color: #b21e1e !important; +} + +/* Basic */ +.ui.basic.red.label { + background: none #FFFFFF !important; + color: #DB2828 !important; + border-color: #DB2828 !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: #FFFFFF !important; + color: #d01919 !important; + border-color: #d01919 !important; +} + +/*--- Orange ---*/ + +.ui.orange.labels .label, +.ui.orange.label { + background-color: #F2711C !important; + border-color: #F2711C !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover { + background-color: #f26202 !important; + border-color: #f26202 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: #cf590c !important; +} + +/* Basic */ +.ui.basic.orange.label { + background: none #FFFFFF !important; + color: #F2711C !important; + border-color: #F2711C !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: #FFFFFF !important; + color: #f26202 !important; + border-color: #f26202 !important; +} + +/*--- Yellow ---*/ + +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: #FBBD08 !important; + border-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover { + background-color: #eaae00 !important; + border-color: #eaae00 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: #cd9903 !important; +} + +/* Basic */ +.ui.basic.yellow.label { + background: none #FFFFFF !important; + color: #FBBD08 !important; + border-color: #FBBD08 !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: #FFFFFF !important; + color: #eaae00 !important; + border-color: #eaae00 !important; +} + +/*--- Olive ---*/ + +.ui.olive.labels .label, +.ui.olive.label { + background-color: #B5CC18 !important; + border-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover { + background-color: #a7bd0d !important; + border-color: #a7bd0d !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: #198f35 !important; +} + +/* Basic */ +.ui.basic.olive.label { + background: none #FFFFFF !important; + color: #B5CC18 !important; + border-color: #B5CC18 !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: #FFFFFF !important; + color: #a7bd0d !important; + border-color: #a7bd0d !important; +} + +/*--- Green ---*/ + +.ui.green.labels .label, +.ui.green.label { + background-color: #21BA45 !important; + border-color: #21BA45 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover { + background-color: #16ab39 !important; + border-color: #16ab39 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.green.ribbon.label { + border-color: #198f35 !important; +} + +/* Basic */ +.ui.basic.green.label { + background: none #FFFFFF !important; + color: #21BA45 !important; + border-color: #21BA45 !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: #FFFFFF !important; + color: #16ab39 !important; + border-color: #16ab39 !important; +} + +/*--- Teal ---*/ + +.ui.teal.labels .label, +.ui.teal.label { + background-color: #00B5AD !important; + border-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover { + background-color: #009c95 !important; + border-color: #009c95 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: #00827c !important; +} + +/* Basic */ +.ui.basic.teal.label { + background: none #FFFFFF !important; + color: #00B5AD !important; + border-color: #00B5AD !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: #FFFFFF !important; + color: #009c95 !important; + border-color: #009c95 !important; +} + +/*--- Blue ---*/ + +.ui.blue.labels .label, +.ui.blue.label { + background-color: #2185D0 !important; + border-color: #2185D0 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover { + background-color: #1678c2 !important; + border-color: #1678c2 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: #1a69a4 !important; +} + +/* Basic */ +.ui.basic.blue.label { + background: none #FFFFFF !important; + color: #2185D0 !important; + border-color: #2185D0 !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: #FFFFFF !important; + color: #1678c2 !important; + border-color: #1678c2 !important; +} + +/*--- Violet ---*/ + +.ui.violet.labels .label, +.ui.violet.label { + background-color: #6435C9 !important; + border-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover { + background-color: #5829bb !important; + border-color: #5829bb !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: #502aa1 !important; +} + +/* Basic */ +.ui.basic.violet.label { + background: none #FFFFFF !important; + color: #6435C9 !important; + border-color: #6435C9 !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: #FFFFFF !important; + color: #5829bb !important; + border-color: #5829bb !important; +} + +/*--- Purple ---*/ + +.ui.purple.labels .label, +.ui.purple.label { + background-color: #A333C8 !important; + border-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover { + background-color: #9627ba !important; + border-color: #9627ba !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: #82299f !important; +} + +/* Basic */ +.ui.basic.purple.label { + background: none #FFFFFF !important; + color: #A333C8 !important; + border-color: #A333C8 !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: #FFFFFF !important; + color: #9627ba !important; + border-color: #9627ba !important; +} + +/*--- Pink ---*/ + +.ui.pink.labels .label, +.ui.pink.label { + background-color: #E03997 !important; + border-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover { + background-color: #e61a8d !important; + border-color: #e61a8d !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: #c71f7e !important; +} + +/* Basic */ +.ui.basic.pink.label { + background: none #FFFFFF !important; + color: #E03997 !important; + border-color: #E03997 !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: #FFFFFF !important; + color: #e61a8d !important; + border-color: #e61a8d !important; +} + +/*--- Brown ---*/ + +.ui.brown.labels .label, +.ui.brown.label { + background-color: #A5673F !important; + border-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover { + background-color: #975b33 !important; + border-color: #975b33 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.brown.label { + background: none #FFFFFF !important; + color: #A5673F !important; + border-color: #A5673F !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: #FFFFFF !important; + color: #975b33 !important; + border-color: #975b33 !important; +} + +/*--- Grey ---*/ + +.ui.grey.labels .label, +.ui.grey.label { + background-color: #767676 !important; + border-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover { + background-color: #838383 !important; + border-color: #838383 !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.grey.label { + background: none #FFFFFF !important; + color: #767676 !important; + border-color: #767676 !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: #FFFFFF !important; + color: #838383 !important; + border-color: #838383 !important; +} + +/*--- Black ---*/ + +.ui.black.labels .label, +.ui.black.label { + background-color: #1B1C1D !important; + border-color: #1B1C1D !important; + color: #FFFFFF !important; +} + +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover { + background-color: #27292a !important; + border-color: #27292a !important; + color: #FFFFFF !important; +} + +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} + +/* Ribbon */ +.ui.black.ribbon.label { + border-color: #805031 !important; +} + +/* Basic */ +.ui.basic.black.label { + background: none #FFFFFF !important; + color: #1B1C1D !important; + border-color: #1B1C1D !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: #FFFFFF !important; + color: #27292a !important; + border-color: #27292a !important; +} + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: none #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: none #FFFFFF; + color: #1e70bf; + -webkit-box-shadow: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: rgba(255, 255, 255, 0.9) !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em 0.5em 0em 0em; + padding: 0.4em 0.833em; + min-width: 3em; + text-align: center; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: 2em; + min-height: 2em; + padding: 0.5em !important; + line-height: 1em; + text-align: center; + border-radius: 500rem; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: 0.5em; + height: 0.5em; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} +.ui.attached.pointing.label { + position: absolute; +} +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: inherit; +} + +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + background-image: none; + z-index: 2; + width: 0.6666em; + height: 0.6666em; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} + +/*--- Above ---*/ + +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: 1em; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: 1px 0px 0px 1px; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} + +/*--- Below ---*/ + +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: 1em; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px 1px 1px 0px; + top: auto; + right: auto; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} + +/*--- Left ---*/ + +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: 0.6666em; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px 1px 1px; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + +/*--- Right ---*/ + +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: 0.6666em; +} +.ui[class*="right pointing"].label:before { + border-width: 1px 1px 0px 0px; + -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ + +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: -1px; +} + +/*--- Below ---*/ + +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: 1px; +} + +/*--- Left ---*/ + +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: -1px; +} + +/*--- Right ---*/ + +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: -1px; +} + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: 100; + top: -1em; + left: 100%; + margin: 0em 0em 0em -1.5em !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: 0.64285714rem; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: 0.71428571rem; +} +.ui.small.labels .label, +.ui.small.label { + font-size: 0.78571429rem; +} +.ui.labels .label, +.ui.label { + font-size: 0.85714286rem; +} +.ui.large.labels .label, +.ui.large.label { + font-size: 1rem; +} +.ui.big.labels .label, +.ui.big.label { + font-size: 1.28571429rem; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: 1.42857143rem; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/label.min.css b/semantic/components/label.min.css new file mode 100644 index 0000000..57de2c4 --- /dev/null +++ b/semantic/components/label.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.label{display:inline-block;line-height:1;vertical-align:baseline;margin:0 .14285714em;background-color:#e8e8e8;background-image:none;padding:.5833em .833em;color:rgba(0,0,0,.6);text-transform:none;font-weight:700;border:0 solid transparent;border-radius:.28571429rem;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label:first-child{margin-left:0}.ui.label:last-child{margin-right:0}a.ui.label{cursor:pointer}.ui.label>a{cursor:pointer;color:inherit;opacity:.5;-webkit-transition:.1s opacity ease;transition:.1s opacity ease}.ui.label>a:hover{opacity:1}.ui.label>img{width:auto!important;vertical-align:middle;height:2.1666em!important}.ui.label>.icon{width:auto;margin:0 .75em 0 0}.ui.label>.detail{display:inline-block;vertical-align:top;font-weight:700;margin-left:1em;opacity:.8}.ui.label>.detail .icon{margin:0 .25em 0 0}.ui.label>.close.icon,.ui.label>.delete.icon{cursor:pointer;margin-right:0;margin-left:.5em;font-size:.92857143em;opacity:.5;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.label>.delete.icon:hover{opacity:1}.ui.labels>.label{margin:0 .5em .5em 0}.ui.header>.ui.label{margin-top:-.29165em}.ui.attached.segment>.ui.top.left.attached.label,.ui.bottom.attached.segment>.ui.top.left.attached.label{border-top-left-radius:0}.ui.attached.segment>.ui.top.right.attached.label,.ui.bottom.attached.segment>.ui.top.right.attached.label{border-top-right-radius:0}.ui.top.attached.segment>.ui.bottom.left.attached.label{border-bottom-left-radius:0}.ui.top.attached.segment>.ui.bottom.right.attached.label{border-bottom-right-radius:0}.ui.top.attached.label+[class*="right floated"]+*,.ui.top.attached.label:first-child+:not(.attached){margin-top:2rem!important}.ui.bottom.attached.label:first-child~:last-child:not(.attached){margin-top:0;margin-bottom:2rem!important}.ui.image.label{width:auto!important;margin-top:0;margin-bottom:0;max-width:9999px;vertical-align:baseline;text-transform:none;background:#e8e8e8;padding:.5833em .833em .5833em .5em;border-radius:.28571429rem;-webkit-box-shadow:none;box-shadow:none}.ui.image.label img{display:inline-block;vertical-align:top;height:2.1666em;margin:-.5833em .5em -.5833em -.5em;border-radius:.28571429rem 0 0 .28571429rem}.ui.image.label .detail{background:rgba(0,0,0,.1);margin:-.5833em -.833em -.5833em .5em;padding:.5833em .833em;border-radius:0 .28571429rem .28571429rem 0}.ui.tag.label,.ui.tag.labels .label{margin-left:1em;position:relative;padding-left:1.5em;padding-right:1.5em;border-radius:0 .28571429rem .28571429rem 0;-webkit-transition:none;transition:none}.ui.tag.label:before,.ui.tag.labels .label:before{position:absolute;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);transform:translateY(-50%) translateX(50%) rotate(-45deg);top:50%;right:100%;content:'';background-color:inherit;background-image:none;width:1.56em;height:1.56em;-webkit-transition:none;transition:none}.ui.tag.label:after,.ui.tag.labels .label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.25em;background-color:#fff!important;width:.5em;height:.5em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);border-radius:500rem}.ui.corner.label{position:absolute;top:0;right:0;margin:0;padding:0;text-align:center;border-color:#e8e8e8;width:4em;height:4em;z-index:1;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label{background-color:transparent!important}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;background-color:transparent!important;border-top:0 solid transparent;border-right:4em solid transparent;border-bottom:4em solid transparent;border-left:0 solid transparent;border-right-color:inherit;-webkit-transition:border-color .1s ease;transition:border-color .1s ease}.ui.corner.label .icon{cursor:default;position:relative;top:.64285714em;left:.78571429em;font-size:1.14285714em;margin:0}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-top:4em solid transparent;border-right:4em solid transparent;border-bottom:0 solid transparent;border-left:0 solid transparent;border-top-color:inherit}.ui.left.corner.label .icon{left:-.78571429em}.ui.segment>.ui.corner.label{top:-1px;right:-1px}.ui.segment>.ui.left.corner.label{right:auto;left:-1px}.ui.ribbon.label{position:relative;margin:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;border-radius:0 .28571429rem .28571429rem 0;border-color:rgba(0,0,0,.15)}.ui.ribbon.label:after{position:absolute;content:'';top:100%;left:0;background-color:transparent!important;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent;border-right-color:inherit;width:0;height:0}.ui.ribbon.label{left:calc(-1rem - 1.2em);margin-right:-1.2em;padding-left:calc(1rem + 1.2em);padding-right:1.2em}.ui[class*="right ribbon"].label{left:calc(100% + 1rem + 1.2em);padding-left:1.2em;padding-right:calc(1rem + 1.2em)}.ui[class*="right ribbon"].label{text-align:left;-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:.28571429rem 0 0 .28571429rem}.ui[class*="right ribbon"].label:after{left:auto;right:0;border-style:solid;border-width:1.2em 1.2em 0 0;border-color:transparent;border-top-color:inherit}.ui.card .image>.ribbon.label,.ui.image>.ribbon.label{position:absolute;top:1rem}.ui.card .image>.ui.ribbon.label,.ui.image>.ui.ribbon.label{left:calc(--.05rem - 1.2em)}.ui.card .image>.ui[class*="right ribbon"].label,.ui.image>.ui[class*="right ribbon"].label{left:calc(100% + -.05rem + 1.2em);padding-left:.833em}.ui.table td>.ui.ribbon.label{left:calc(-.78571429em - 1.2em)}.ui.table td>.ui[class*="right ribbon"].label{left:calc(100% + .78571429em + 1.2em);padding-left:.833em}.ui.attached.label,.ui[class*="top attached"].label{width:100%;position:absolute;margin:0;top:0;left:0;padding:.75em 1em;border-radius:.21428571rem .21428571rem 0 0}.ui[class*="bottom attached"].label{top:auto;bottom:0;border-radius:0 0 .21428571rem .21428571rem}.ui[class*="top left attached"].label{width:auto;margin-top:0!important;border-radius:.21428571rem 0 .28571429rem 0}.ui[class*="top right attached"].label{width:auto;left:auto;right:0;border-radius:0 .21428571rem 0 .28571429rem}.ui[class*="bottom left attached"].label{width:auto;top:auto;bottom:0;border-radius:0 .28571429rem 0 .21428571rem}.ui[class*="bottom right attached"].label{top:auto;bottom:0;left:auto;right:0;width:auto;border-radius:.28571429rem 0 .21428571rem 0}.ui.label.disabled{opacity:.5}a.ui.label:hover,a.ui.labels .label:hover{background-color:#e0e0e0;border-color:#e0e0e0;background-image:none;color:rgba(0,0,0,.8)}.ui.labels a.label:hover:before,a.ui.label:hover:before{color:rgba(0,0,0,.8)}.ui.active.label{background-color:#d0d0d0;border-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}.ui.active.label:before{background-color:#d0d0d0;background-image:none;color:rgba(0,0,0,.95)}a.ui.active.label:hover,a.ui.labels .active.label:hover{background-color:#c8c8c8;border-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.labels a.active.label:ActiveHover:before,a.ui.active.label:ActiveHover:before{background-color:#c8c8c8;background-image:none;color:rgba(0,0,0,.95)}.ui.label.visible:not(.dropdown),.ui.labels.visible .label{display:inline-block!important}.ui.label.hidden,.ui.labels.hidden .label{display:none!important}.ui.red.label,.ui.red.labels .label{background-color:#db2828!important;border-color:#db2828!important;color:#fff!important}.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#d01919!important;border-color:#d01919!important;color:#fff!important}.ui.red.corner.label,.ui.red.corner.label:hover{background-color:transparent!important}.ui.red.ribbon.label{border-color:#b21e1e!important}.ui.basic.red.label{background:none #fff!important;color:#db2828!important;border-color:#db2828!important}.ui.basic.red.labels a.label:hover,a.ui.basic.red.label:hover{background-color:#fff!important;color:#d01919!important;border-color:#d01919!important}.ui.orange.label,.ui.orange.labels .label{background-color:#f2711c!important;border-color:#f2711c!important;color:#fff!important}.ui.orange.labels .label:hover,a.ui.orange.label:hover{background-color:#f26202!important;border-color:#f26202!important;color:#fff!important}.ui.orange.corner.label,.ui.orange.corner.label:hover{background-color:transparent!important}.ui.orange.ribbon.label{border-color:#cf590c!important}.ui.basic.orange.label{background:none #fff!important;color:#f2711c!important;border-color:#f2711c!important}.ui.basic.orange.labels a.label:hover,a.ui.basic.orange.label:hover{background-color:#fff!important;color:#f26202!important;border-color:#f26202!important}.ui.yellow.label,.ui.yellow.labels .label{background-color:#fbbd08!important;border-color:#fbbd08!important;color:#fff!important}.ui.yellow.labels .label:hover,a.ui.yellow.label:hover{background-color:#eaae00!important;border-color:#eaae00!important;color:#fff!important}.ui.yellow.corner.label,.ui.yellow.corner.label:hover{background-color:transparent!important}.ui.yellow.ribbon.label{border-color:#cd9903!important}.ui.basic.yellow.label{background:none #fff!important;color:#fbbd08!important;border-color:#fbbd08!important}.ui.basic.yellow.labels a.label:hover,a.ui.basic.yellow.label:hover{background-color:#fff!important;color:#eaae00!important;border-color:#eaae00!important}.ui.olive.label,.ui.olive.labels .label{background-color:#b5cc18!important;border-color:#b5cc18!important;color:#fff!important}.ui.olive.labels .label:hover,a.ui.olive.label:hover{background-color:#a7bd0d!important;border-color:#a7bd0d!important;color:#fff!important}.ui.olive.corner.label,.ui.olive.corner.label:hover{background-color:transparent!important}.ui.olive.ribbon.label{border-color:#198f35!important}.ui.basic.olive.label{background:none #fff!important;color:#b5cc18!important;border-color:#b5cc18!important}.ui.basic.olive.labels a.label:hover,a.ui.basic.olive.label:hover{background-color:#fff!important;color:#a7bd0d!important;border-color:#a7bd0d!important}.ui.green.label,.ui.green.labels .label{background-color:#21ba45!important;border-color:#21ba45!important;color:#fff!important}.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#16ab39!important;border-color:#16ab39!important;color:#fff!important}.ui.green.corner.label,.ui.green.corner.label:hover{background-color:transparent!important}.ui.green.ribbon.label{border-color:#198f35!important}.ui.basic.green.label{background:none #fff!important;color:#21ba45!important;border-color:#21ba45!important}.ui.basic.green.labels a.label:hover,a.ui.basic.green.label:hover{background-color:#fff!important;color:#16ab39!important;border-color:#16ab39!important}.ui.teal.label,.ui.teal.labels .label{background-color:#00b5ad!important;border-color:#00b5ad!important;color:#fff!important}.ui.teal.labels .label:hover,a.ui.teal.label:hover{background-color:#009c95!important;border-color:#009c95!important;color:#fff!important}.ui.teal.corner.label,.ui.teal.corner.label:hover{background-color:transparent!important}.ui.teal.ribbon.label{border-color:#00827c!important}.ui.basic.teal.label{background:none #fff!important;color:#00b5ad!important;border-color:#00b5ad!important}.ui.basic.teal.labels a.label:hover,a.ui.basic.teal.label:hover{background-color:#fff!important;color:#009c95!important;border-color:#009c95!important}.ui.blue.label,.ui.blue.labels .label{background-color:#2185d0!important;border-color:#2185d0!important;color:#fff!important}.ui.blue.labels .label:hover,a.ui.blue.label:hover{background-color:#1678c2!important;border-color:#1678c2!important;color:#fff!important}.ui.blue.corner.label,.ui.blue.corner.label:hover{background-color:transparent!important}.ui.blue.ribbon.label{border-color:#1a69a4!important}.ui.basic.blue.label{background:none #fff!important;color:#2185d0!important;border-color:#2185d0!important}.ui.basic.blue.labels a.label:hover,a.ui.basic.blue.label:hover{background-color:#fff!important;color:#1678c2!important;border-color:#1678c2!important}.ui.violet.label,.ui.violet.labels .label{background-color:#6435c9!important;border-color:#6435c9!important;color:#fff!important}.ui.violet.labels .label:hover,a.ui.violet.label:hover{background-color:#5829bb!important;border-color:#5829bb!important;color:#fff!important}.ui.violet.corner.label,.ui.violet.corner.label:hover{background-color:transparent!important}.ui.violet.ribbon.label{border-color:#502aa1!important}.ui.basic.violet.label{background:none #fff!important;color:#6435c9!important;border-color:#6435c9!important}.ui.basic.violet.labels a.label:hover,a.ui.basic.violet.label:hover{background-color:#fff!important;color:#5829bb!important;border-color:#5829bb!important}.ui.purple.label,.ui.purple.labels .label{background-color:#a333c8!important;border-color:#a333c8!important;color:#fff!important}.ui.purple.labels .label:hover,a.ui.purple.label:hover{background-color:#9627ba!important;border-color:#9627ba!important;color:#fff!important}.ui.purple.corner.label,.ui.purple.corner.label:hover{background-color:transparent!important}.ui.purple.ribbon.label{border-color:#82299f!important}.ui.basic.purple.label{background:none #fff!important;color:#a333c8!important;border-color:#a333c8!important}.ui.basic.purple.labels a.label:hover,a.ui.basic.purple.label:hover{background-color:#fff!important;color:#9627ba!important;border-color:#9627ba!important}.ui.pink.label,.ui.pink.labels .label{background-color:#e03997!important;border-color:#e03997!important;color:#fff!important}.ui.pink.labels .label:hover,a.ui.pink.label:hover{background-color:#e61a8d!important;border-color:#e61a8d!important;color:#fff!important}.ui.pink.corner.label,.ui.pink.corner.label:hover{background-color:transparent!important}.ui.pink.ribbon.label{border-color:#c71f7e!important}.ui.basic.pink.label{background:none #fff!important;color:#e03997!important;border-color:#e03997!important}.ui.basic.pink.labels a.label:hover,a.ui.basic.pink.label:hover{background-color:#fff!important;color:#e61a8d!important;border-color:#e61a8d!important}.ui.brown.label,.ui.brown.labels .label{background-color:#a5673f!important;border-color:#a5673f!important;color:#fff!important}.ui.brown.labels .label:hover,a.ui.brown.label:hover{background-color:#975b33!important;border-color:#975b33!important;color:#fff!important}.ui.brown.corner.label,.ui.brown.corner.label:hover{background-color:transparent!important}.ui.brown.ribbon.label{border-color:#805031!important}.ui.basic.brown.label{background:none #fff!important;color:#a5673f!important;border-color:#a5673f!important}.ui.basic.brown.labels a.label:hover,a.ui.basic.brown.label:hover{background-color:#fff!important;color:#975b33!important;border-color:#975b33!important}.ui.grey.label,.ui.grey.labels .label{background-color:#767676!important;border-color:#767676!important;color:#fff!important}.ui.grey.labels .label:hover,a.ui.grey.label:hover{background-color:#838383!important;border-color:#838383!important;color:#fff!important}.ui.grey.corner.label,.ui.grey.corner.label:hover{background-color:transparent!important}.ui.grey.ribbon.label{border-color:#805031!important}.ui.basic.grey.label{background:none #fff!important;color:#767676!important;border-color:#767676!important}.ui.basic.grey.labels a.label:hover,a.ui.basic.grey.label:hover{background-color:#fff!important;color:#838383!important;border-color:#838383!important}.ui.black.label,.ui.black.labels .label{background-color:#1b1c1d!important;border-color:#1b1c1d!important;color:#fff!important}.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#27292a!important;border-color:#27292a!important;color:#fff!important}.ui.black.corner.label,.ui.black.corner.label:hover{background-color:transparent!important}.ui.black.ribbon.label{border-color:#805031!important}.ui.basic.black.label{background:none #fff!important;color:#1b1c1d!important;border-color:#1b1c1d!important}.ui.basic.black.labels a.label:hover,a.ui.basic.black.label:hover{background-color:#fff!important;color:#27292a!important;border-color:#27292a!important}.ui.basic.label{background:none #fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none}a.ui.basic.label:hover{text-decoration:none;background:none #fff;color:#1e70bf;-webkit-box-shadow:1px solid rgba(34,36,38,.15);box-shadow:1px solid rgba(34,36,38,.15);-webkit-box-shadow:none;box-shadow:none}.ui.basic.pointing.label:before{border-color:inherit}.ui.fluid.labels>.label,.ui.label.fluid{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ui.inverted.label,.ui.inverted.labels .label{color:rgba(255,255,255,.9)!important}.ui.horizontal.label,.ui.horizontal.labels .label{margin:0 .5em 0 0;padding:.4em .833em;min-width:3em;text-align:center}.ui.circular.label,.ui.circular.labels .label{min-width:2em;min-height:2em;padding:.5em!important;line-height:1em;text-align:center;border-radius:500rem}.ui.empty.circular.label,.ui.empty.circular.labels .label{min-width:0;min-height:0;overflow:hidden;width:.5em;height:.5em;vertical-align:baseline}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{background-color:inherit;background-image:inherit;border-width:none;border-style:solid;border-color:inherit}.ui.pointing.label:before{position:absolute;content:'';-webkit-transform:rotate(45deg);transform:rotate(45deg);background-image:none;z-index:2;width:.6666em;height:.6666em;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.pointing.label,.ui[class*="pointing above"].label{margin-top:1em}.ui.pointing.label:before,.ui[class*="pointing above"].label:before{border-width:1px 0 0 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:0;left:50%}.ui[class*="bottom pointing"].label,.ui[class*="pointing below"].label{margin-top:0;margin-bottom:1em}.ui[class*="bottom pointing"].label:before,.ui[class*="pointing below"].label:before{border-width:0 1px 1px 0;top:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);top:100%;left:50%}.ui[class*="left pointing"].label{margin-top:0;margin-left:.6666em}.ui[class*="left pointing"].label:before{border-width:0 0 1px 1px;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);bottom:auto;right:auto;top:50%;left:0}.ui[class*="right pointing"].label{margin-top:0;margin-right:.6666em}.ui[class*="right pointing"].label:before{border-width:1px 1px 0 0;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);top:50%;right:0;bottom:auto;left:auto}.ui.basic.pointing.label:before,.ui.basic[class*="pointing above"].label:before{margin-top:-1px}.ui.basic[class*="bottom pointing"].label:before,.ui.basic[class*="pointing below"].label:before{bottom:auto;top:100%;margin-top:1px}.ui.basic[class*="left pointing"].label:before{top:50%;left:-1px}.ui.basic[class*="right pointing"].label:before{top:50%;right:-1px}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important}.ui.mini.label,.ui.mini.labels .label{font-size:.64285714rem}.ui.tiny.label,.ui.tiny.labels .label{font-size:.71428571rem}.ui.small.label,.ui.small.labels .label{font-size:.78571429rem}.ui.label,.ui.labels .label{font-size:.85714286rem}.ui.large.label,.ui.large.labels .label{font-size:1rem}.ui.big.label,.ui.big.labels .label{font-size:1.28571429rem}.ui.huge.label,.ui.huge.labels .label{font-size:1.42857143rem}.ui.massive.label,.ui.massive.labels .label{font-size:1.71428571rem} \ No newline at end of file diff --git a/semantic/components/list.css b/semantic/components/list.css new file mode 100644 index 0000000..998a000 --- /dev/null +++ b/semantic/components/list.css @@ -0,0 +1,953 @@ +/*! + * # Semantic UI 2.4.1 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: none; + margin: 1em 0em; + padding: 0em 0em; +} +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + + +/******************************* + Content +*******************************/ + + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list > .item, +.ui.list .list > .item { + display: list-item; + table-layout: fixed; + list-style-type: none; + list-style-position: outside; + padding: 0.21428571em 0em; + line-height: 1.14285714em; +} +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list > .list > .item, +.ui.list > .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: 0.75em 0em 0.25em 0.5em; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: 0.14285714em 0em; + line-height: inherit; +} + +/* Icon */ +.ui.list .list > .item > i.icon, +.ui.list > .item > i.icon { + display: table-cell; + margin: 0em; + padding-top: 0em; + padding-right: 0.28571429em; + vertical-align: top; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.list .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + vertical-align: top; +} + +/* Image */ +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + vertical-align: top; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: 0.5em; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: top; +} +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { + display: inline-block; +} + +/* Content */ +.ui.list .list > .item > .content, +.ui.list > .item > .content { + line-height: 1.14285714em; +} +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { + display: table-cell; + width: 100%; + padding: 0em 0em 0em 0.5em; + vertical-align: top; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; + width: auto; +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); +} + +/* Description */ +.ui.list .list > .item .description, +.ui.list > .item .description { + display: block; + color: rgba(0, 0, 0, 0.7); +} + +/* Child Link */ +.ui.list > .item a, +.ui.list .list > .item a { + cursor: pointer; +} + +/* Linking Item */ +.ui.list .list > a.item, +.ui.list > a.item { + cursor: pointer; + color: #4183C4; +} +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: #1e70bf; +} + +/* Linked Item Icons */ +.ui.list .list > a.item i.icon, +.ui.list > a.item i.icon { + color: rgba(0, 0, 0, 0.4); +} + +/* Header Link */ +.ui.list .list > .item a.header, +.ui.list > .item a.header { + cursor: pointer; + color: #4183C4 !important; +} +.ui.list .list > .item a.header:hover, +.ui.list > .item a.header:hover { + color: #1e70bf !important; +} + +/* Floated Content */ +.ui[class*="left floated"].list { + float: left; +} +.ui[class*="right floated"].list { + float: right; +} +.ui.list .list > .item [class*="left floated"], +.ui.list > .item [class*="left floated"] { + float: left; + margin: 0em 1em 0em 0em; +} +.ui.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: 0em 0em 0em 1em; +} + + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list > .item, +.ui.menu .ui.list .list > .item { + display: list-item; + table-layout: fixed; + background-color: transparent; + list-style-type: none; + list-style-position: outside; + padding: 0.21428571em 0em; + line-height: 1.14285714em; +} +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0em; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0em; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: 1em; + font-size: 1rem; +} +.ui.horizontal.list:not(.celled) > .item:first-child { + margin-left: 0em !important; + padding-left: 0em !important; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} +.ui.horizontal.list > .item > .image, +.ui.horizontal.list .list > .item > .image, +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list .list > .item > .icon, +.ui.horizontal.list > .item > .content, +.ui.horizontal.list .list > .item > .content { + vertical-align: middle; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: 0.21428571em; + padding-bottom: 0.21428571em; +} + +/* Horizontal List */ +.ui.horizontal.list > .item > i.icon { + margin: 0em; + padding: 0em 0.25em 0em 0em; +} +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + + +/*------------------- + Disabled +--------------------*/ + +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { + pointer-events: none; + color: rgba(40, 40, 40, 0.3) !important; +} +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { + color: rgba(225, 225, 225, 0.3) !important; +} + +/*------------------- + Hover +--------------------*/ + +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { + color: rgba(0, 0, 0, 0.87); +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { + color: rgba(255, 255, 255, 0.7); +} +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { + color: rgba(255, 255, 255, 0.7); +} + +/* Item Link */ +.ui.inverted.list .list > a.item, +.ui.inverted.list > a.item { + cursor: pointer; + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.list .list > a.item:hover, +.ui.inverted.list > a.item:hover { + color: #1e70bf; +} + +/* Linking Content */ +.ui.inverted.list .item a:not(.ui) { + color: rgba(255, 255, 255, 0.9) !important; +} +.ui.inverted.list .item a:not(.ui):hover { + color: #1e70bf !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.list[class*="top aligned"] .image, +.ui.list[class*="top aligned"] .content, +.ui.list [class*="top aligned"] { + vertical-align: top !important; +} +.ui.list[class*="middle aligned"] .image, +.ui.list[class*="middle aligned"] .content, +.ui.list [class*="middle aligned"] { + vertical-align: middle !important; +} +.ui.list[class*="bottom aligned"] .image, +.ui.list[class*="bottom aligned"] .content, +.ui.list [class*="bottom aligned"] { + vertical-align: bottom !important; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: rgba(0, 0, 0, 0.4); + -webkit-transition: 0.1s color ease; + transition: 0.1s color ease; +} +.ui.link.list.list a.item:hover, +.ui.link.list.list .item a:not(.ui):hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.link.list.list a.item:active, +.ui.link.list.list .item a:not(.ui):active { + color: rgba(0, 0, 0, 0.9); +} +.ui.link.list.list .active.item, +.ui.link.list.list .active.item a:not(.ui) { + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a:not(.ui) { + color: rgba(255, 255, 255, 0.5); +} +.ui.inverted.link.list.list a.item:hover, +.ui.inverted.link.list.list .item a:not(.ui):hover { + color: #ffffff; +} +.ui.inverted.link.list.list a.item:active, +.ui.inverted.link.list.list .item a:not(.ui):active { + color: #ffffff; +} +.ui.inverted.link.list.list a.active.item, +.ui.inverted.link.list.list .active.item a:not(.ui) { + color: #ffffff; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .list > .item, +.ui.selection.list > .item { + cursor: pointer; + background: transparent; + padding: 0.5em 0.5em; + margin: 0em; + color: rgba(0, 0, 0, 0.4); + border-radius: 0.5em; + -webkit-transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; + transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; +} +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { + margin-bottom: 0em; +} +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { + background: rgba(0, 0, 0, 0.03); + color: rgba(0, 0, 0, 0.8); +} +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.9); +} +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { + background: transparent; + color: rgba(255, 255, 255, 0.5); +} +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { + background: rgba(255, 255, 255, 0.02); + color: #ffffff; +} +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { + background: rgba(255, 255, 255, 0.08); + color: #ffffff; +} +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { + background: rgba(255, 255, 255, 0.08); + color: #ffffff; +} + +/* Celled / Divided Selection List */ +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { + border-radius: 0em; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list > .item { + -webkit-transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; + transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; +} +.ui.animated.list:not(.horizontal) > .item:hover { + padding-left: 1em; +} + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { + padding-left: 0em; + padding-right: 0em; +} +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { + margin-left: -0.5em; + margin-right: -0.5em; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: 1.25rem; +} +ul.ui.list li, +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + position: absolute; + top: auto; + left: auto; + font-weight: normal; + margin-left: -1.25rem; + content: '•'; + opacity: 1; + color: inherit; + vertical-align: top; +} +ul.ui.list li:before, +.ui.bulleted.list .list > a.item:before, +.ui.bulleted.list > a.item:before { + color: rgba(0, 0, 0, 0.87); +} +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: 1.25rem; +} + +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list > .item { + margin-left: 1.75rem; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list > .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li::before, +.ui.horizontal.bulleted.list > .item::before { + color: rgba(0, 0, 0, 0.87); +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list > .item:first-child::before { + display: none; +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +.ui.ordered.list, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: 1.25rem; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { + position: absolute; + top: auto; + left: auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + margin-left: -1.25rem; + counter-increment: ordered; + content: counters(ordered, ".") " "; + text-align: right; + color: rgba(0, 0, 0, 0.87); + vertical-align: middle; + opacity: 0.8; +} +ol.ui.inverted.list li:before, +.ui.ordered.inverted.list .list > .item:before, +.ui.ordered.inverted.list > .item:before { + color: rgba(255, 255, 255, 0.7); +} + +/* Value */ +.ui.ordered.list > .list > .item[data-value], +.ui.ordered.list > .item[data-value] { + content: attr(data-value); +} +ol.ui.list li[value]:before { + content: attr(value); +} + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: 1em; +} +ol.ui.list ol li:before, +.ui.ordered.list .list > .item:before { + margin-left: -2em; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0em 0.5em 0em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list > .item { + border-top: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.divided.list .list > .item { + border-top: none; +} +.ui.divided.list .item .list > .item { + border-top: none; +} +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list > .item:first-child { + border-top-width: 1px; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: 1.25rem; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { + padding-left: 1.25rem; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: 0.21428571em; +} +.ui.divided.ordered.list .item .list > .item { + padding-left: 1em; +} + +/* Divided Selection */ +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { + margin: 0em; + border-radius: 0em; +} + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item:not(:first-child) { + padding-left: 0.5em; +} +.ui.divided.horizontal.list > .item:not(:last-child) { + padding-right: 0.5em; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: 1px solid rgba(34, 36, 38, 0.15); + margin: 0em; + line-height: 0.6; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; +} + +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list > .item { + border-color: rgba(255, 255, 255, 0.1); +} + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: 1px solid rgba(34, 36, 38, 0.15); + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.celled.list > .item:last-child { + border-bottom: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: 0.21428571em; + padding-bottom: 0.21428571em; +} + +/* Sub Menu */ +.ui.celled.list .item .list > .item { + border-width: 0px; +} +.ui.celled.list .list > .item:first-child { + border-top-width: 0px; +} + +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list .list > .item, +.ui.celled.bulleted.list > .item { + padding-left: 1.25rem; +} +.ui.celled.bulleted.list .item .list { + margin-left: -1.25rem; + margin-right: -1.25rem; + padding-bottom: 0.21428571em; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { + padding-left: 1.25rem; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: 0.21428571em; +} +.ui.celled.ordered.list .list > .item { + padding-left: 1em; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { + border-top: none; + border-left: 1px solid rgba(34, 36, 38, 0.15); + margin: 0em; + padding-left: 0.5em; + padding-right: 0.5em; + line-height: 0.6; +} +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { + border-bottom: none; + border-right: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: 1px solid rgba(255, 255, 255, 0.1); +} +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { + border-color: 1px solid rgba(255, 255, 255, 0.1); +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { + padding-top: 0.42857143em; +} +.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: 0.42857143em; +} +.ui.horizontal.relaxed.list .list > .item:not(:first-child), +.ui.horizontal.relaxed.list > .item:not(:first-child) { + padding-left: 1rem; +} +.ui.horizontal.relaxed.list .list > .item:not(:last-child), +.ui.horizontal.relaxed.list > .item:not(:last-child) { + padding-right: 1rem; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { + padding-top: 0.85714286em; +} +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: 0.85714286em; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { + padding-left: 1.5rem; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { + padding-right: 1.5rem; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: 0.78571429em; +} +.ui.tiny.list { + font-size: 0.85714286em; +} +.ui.small.list { + font-size: 0.92857143em; +} +.ui.list { + font-size: 1em; +} +.ui.large.list { + font-size: 1.14285714em; +} +.ui.big.list { + font-size: 1.28571429em; +} +.ui.huge.list { + font-size: 1.42857143em; +} +.ui.massive.list { + font-size: 1.71428571em; +} +.ui.mini.horizontal.list .list > .item, +.ui.mini.horizontal.list > .item { + font-size: 0.78571429rem; +} +.ui.tiny.horizontal.list .list > .item, +.ui.tiny.horizontal.list > .item { + font-size: 0.85714286rem; +} +.ui.small.horizontal.list .list > .item, +.ui.small.horizontal.list > .item { + font-size: 0.92857143rem; +} +.ui.horizontal.list .list > .item, +.ui.horizontal.list > .item { + font-size: 1rem; +} +.ui.large.horizontal.list .list > .item, +.ui.large.horizontal.list > .item { + font-size: 1.14285714rem; +} +.ui.big.horizontal.list .list > .item, +.ui.big.horizontal.list > .item { + font-size: 1.28571429rem; +} +.ui.huge.horizontal.list .list > .item, +.ui.huge.horizontal.list > .item { + font-size: 1.42857143rem; +} +.ui.massive.horizontal.list .list > .item, +.ui.massive.horizontal.list > .item { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/list.min.css b/semantic/components/list.min.css new file mode 100644 index 0000000..cc1ba73 --- /dev/null +++ b/semantic/components/list.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.list,ol.ui.list,ul.ui.list{list-style-type:none;margin:1em 0;padding:0 0}.ui.list:first-child,ol.ui.list:first-child,ul.ui.list:first-child{margin-top:0;padding-top:0}.ui.list:last-child,ol.ui.list:last-child,ul.ui.list:last-child{margin-bottom:0;padding-bottom:0}.ui.list .list>.item,.ui.list>.item,ol.ui.list li,ul.ui.list li{display:list-item;table-layout:fixed;list-style-type:none;list-style-position:outside;padding:.21428571em 0;line-height:1.14285714em}.ui.list>.item:after,.ui.list>.list>.item,ol.ui.list>li:first-child:after,ul.ui.list>li:first-child:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.list .list>.item:first-child,.ui.list>.item:first-child,ol.ui.list li:first-child,ul.ui.list li:first-child{padding-top:0}.ui.list .list>.item:last-child,.ui.list>.item:last-child,ol.ui.list li:last-child,ul.ui.list li:last-child{padding-bottom:0}.ui.list .list,ol.ui.list ol,ul.ui.list ul{clear:both;margin:0;padding:.75em 0 .25em .5em}.ui.list .list>.item,ol.ui.list ol li,ul.ui.list ul li{padding:.14285714em 0;line-height:inherit}.ui.list .list>.item>i.icon,.ui.list>.item>i.icon{display:table-cell;margin:0;padding-top:0;padding-right:.28571429em;vertical-align:top;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.list .list>.item>i.icon:only-child,.ui.list>.item>i.icon:only-child{display:inline-block;vertical-align:top}.ui.list .list>.item>.image,.ui.list>.item>.image{display:table-cell;background-color:transparent;margin:0;vertical-align:top}.ui.list .list>.item>.image:not(:only-child):not(img),.ui.list>.item>.image:not(:only-child):not(img){padding-right:.5em}.ui.list .list>.item>.image img,.ui.list>.item>.image img{vertical-align:top}.ui.list .list>.item>.image:only-child,.ui.list .list>.item>img.image,.ui.list>.item>.image:only-child,.ui.list>.item>img.image{display:inline-block}.ui.list .list>.item>.content,.ui.list>.item>.content{line-height:1.14285714em}.ui.list .list>.item>.icon+.content,.ui.list .list>.item>.image+.content,.ui.list>.item>.icon+.content,.ui.list>.item>.image+.content{display:table-cell;width:100%;padding:0 0 0 .5em;vertical-align:top}.ui.list .list>.item>img.image+.content,.ui.list>.item>img.image+.content{display:inline-block;width:auto}.ui.list .list>.item>.content>.list,.ui.list>.item>.content>.list{margin-left:0;padding-left:0}.ui.list .list>.item .header,.ui.list>.item .header{display:block;margin:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;color:rgba(0,0,0,.87)}.ui.list .list>.item .description,.ui.list>.item .description{display:block;color:rgba(0,0,0,.7)}.ui.list .list>.item a,.ui.list>.item a{cursor:pointer}.ui.list .list>a.item,.ui.list>a.item{cursor:pointer;color:#4183c4}.ui.list .list>a.item:hover,.ui.list>a.item:hover{color:#1e70bf}.ui.list .list>a.item i.icon,.ui.list>a.item i.icon{color:rgba(0,0,0,.4)}.ui.list .list>.item a.header,.ui.list>.item a.header{cursor:pointer;color:#4183c4!important}.ui.list .list>.item a.header:hover,.ui.list>.item a.header:hover{color:#1e70bf!important}.ui[class*="left floated"].list{float:left}.ui[class*="right floated"].list{float:right}.ui.list .list>.item [class*="left floated"],.ui.list>.item [class*="left floated"]{float:left;margin:0 1em 0 0}.ui.list .list>.item [class*="right floated"],.ui.list>.item [class*="right floated"]{float:right;margin:0 0 0 1em}.ui.menu .ui.list .list>.item,.ui.menu .ui.list>.item{display:list-item;table-layout:fixed;background-color:transparent;list-style-type:none;list-style-position:outside;padding:.21428571em 0;line-height:1.14285714em}.ui.menu .ui.list .list>.item:before,.ui.menu .ui.list>.item:before{border:none;background:0 0}.ui.menu .ui.list .list>.item:first-child,.ui.menu .ui.list>.item:first-child{padding-top:0}.ui.menu .ui.list .list>.item:last-child,.ui.menu .ui.list>.item:last-child{padding-bottom:0}.ui.horizontal.list{display:inline-block;font-size:0}.ui.horizontal.list>.item{display:inline-block;margin-left:1em;font-size:1rem}.ui.horizontal.list:not(.celled)>.item:first-child{margin-left:0!important;padding-left:0!important}.ui.horizontal.list .list{padding-left:0;padding-bottom:0}.ui.horizontal.list .list>.item>.content,.ui.horizontal.list .list>.item>.icon,.ui.horizontal.list .list>.item>.image,.ui.horizontal.list>.item>.content,.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.image{vertical-align:middle}.ui.horizontal.list>.item:first-child,.ui.horizontal.list>.item:last-child{padding-top:.21428571em;padding-bottom:.21428571em}.ui.horizontal.list>.item>i.icon{margin:0;padding:0 .25em 0 0}.ui.horizontal.list>.item>.icon,.ui.horizontal.list>.item>.icon+.content{float:none;display:inline-block}.ui.list .list>.disabled.item,.ui.list>.disabled.item{pointer-events:none;color:rgba(40,40,40,.3)!important}.ui.inverted.list .list>.disabled.item,.ui.inverted.list>.disabled.item{color:rgba(225,225,225,.3)!important}.ui.list .list>a.item:hover .icon,.ui.list>a.item:hover .icon{color:rgba(0,0,0,.87)}.ui.inverted.list .list>a.item>.icon,.ui.inverted.list>a.item>.icon{color:rgba(255,255,255,.7)}.ui.inverted.list .list>.item .header,.ui.inverted.list>.item .header{color:rgba(255,255,255,.9)}.ui.inverted.list .list>.item .description,.ui.inverted.list>.item .description{color:rgba(255,255,255,.7)}.ui.inverted.list .list>a.item,.ui.inverted.list>a.item{cursor:pointer;color:rgba(255,255,255,.9)}.ui.inverted.list .list>a.item:hover,.ui.inverted.list>a.item:hover{color:#1e70bf}.ui.inverted.list .item a:not(.ui){color:rgba(255,255,255,.9)!important}.ui.inverted.list .item a:not(.ui):hover{color:#1e70bf!important}.ui.list [class*="top aligned"],.ui.list[class*="top aligned"] .content,.ui.list[class*="top aligned"] .image{vertical-align:top!important}.ui.list [class*="middle aligned"],.ui.list[class*="middle aligned"] .content,.ui.list[class*="middle aligned"] .image{vertical-align:middle!important}.ui.list [class*="bottom aligned"],.ui.list[class*="bottom aligned"] .content,.ui.list[class*="bottom aligned"] .image{vertical-align:bottom!important}.ui.link.list .item,.ui.link.list .item a:not(.ui),.ui.link.list a.item{color:rgba(0,0,0,.4);-webkit-transition:.1s color ease;transition:.1s color ease}.ui.link.list.list .item a:not(.ui):hover,.ui.link.list.list a.item:hover{color:rgba(0,0,0,.8)}.ui.link.list.list .item a:not(.ui):active,.ui.link.list.list a.item:active{color:rgba(0,0,0,.9)}.ui.link.list.list .active.item,.ui.link.list.list .active.item a:not(.ui){color:rgba(0,0,0,.95)}.ui.inverted.link.list .item,.ui.inverted.link.list .item a:not(.ui),.ui.inverted.link.list a.item{color:rgba(255,255,255,.5)}.ui.inverted.link.list.list .item a:not(.ui):hover,.ui.inverted.link.list.list a.item:hover{color:#fff}.ui.inverted.link.list.list .item a:not(.ui):active,.ui.inverted.link.list.list a.item:active{color:#fff}.ui.inverted.link.list.list .active.item a:not(.ui),.ui.inverted.link.list.list a.active.item{color:#fff}.ui.selection.list .list>.item,.ui.selection.list>.item{cursor:pointer;background:0 0;padding:.5em .5em;margin:0;color:rgba(0,0,0,.4);border-radius:.5em;-webkit-transition:.1s color ease,.1s padding-left ease,.1s background-color ease;transition:.1s color ease,.1s padding-left ease,.1s background-color ease}.ui.selection.list .list>.item:last-child,.ui.selection.list>.item:last-child{margin-bottom:0}.ui.selection.list.list>.item:hover,.ui.selection.list>.item:hover{background:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.selection.list .list>.item:active,.ui.selection.list>.item:active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.9)}.ui.selection.list .list>.item.active,.ui.selection.list>.item.active{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.selection.list>.item{background:0 0;color:rgba(255,255,255,.5)}.ui.inverted.selection.list>.item:hover{background:rgba(255,255,255,.02);color:#fff}.ui.inverted.selection.list>.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.selection.list>.item.active{background:rgba(255,255,255,.08);color:#fff}.ui.celled.selection.list .list>.item,.ui.celled.selection.list>.item,.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{border-radius:0}.ui.animated.list>.item{-webkit-transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s;transition:.25s color ease .1s,.25s padding-left ease .1s,.25s background-color ease .1s}.ui.animated.list:not(.horizontal)>.item:hover{padding-left:1em}.ui.fitted.list:not(.selection) .list>.item,.ui.fitted.list:not(.selection)>.item{padding-left:0;padding-right:0}.ui.fitted.selection.list .list>.item,.ui.fitted.selection.list>.item{margin-left:-.5em;margin-right:-.5em}.ui.bulleted.list,ul.ui.list{margin-left:1.25rem}.ui.bulleted.list .list>.item,.ui.bulleted.list>.item,ul.ui.list li{position:relative}.ui.bulleted.list .list>.item:before,.ui.bulleted.list>.item:before,ul.ui.list li:before{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;top:auto;left:auto;font-weight:400;margin-left:-1.25rem;content:'•';opacity:1;color:inherit;vertical-align:top}.ui.bulleted.list .list>a.item:before,.ui.bulleted.list>a.item:before,ul.ui.list li:before{color:rgba(0,0,0,.87)}.ui.bulleted.list .list,ul.ui.list ul{padding-left:1.25rem}.ui.horizontal.bulleted.list,ul.ui.horizontal.bulleted.list{margin-left:0}.ui.horizontal.bulleted.list>.item,ul.ui.horizontal.bulleted.list li{margin-left:1.75rem}.ui.horizontal.bulleted.list>.item:first-child,ul.ui.horizontal.bulleted.list li:first-child{margin-left:0}.ui.horizontal.bulleted.list>.item::before,ul.ui.horizontal.bulleted.list li::before{color:rgba(0,0,0,.87)}.ui.horizontal.bulleted.list>.item:first-child::before,ul.ui.horizontal.bulleted.list li:first-child::before{display:none}.ui.ordered.list,.ui.ordered.list .list,ol.ui.list,ol.ui.list ol{counter-reset:ordered;margin-left:1.25rem;list-style-type:none}.ui.ordered.list .list>.item,.ui.ordered.list>.item,ol.ui.list li{list-style-type:none;position:relative}.ui.ordered.list .list>.item:before,.ui.ordered.list>.item:before,ol.ui.list li:before{position:absolute;top:auto;left:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;margin-left:-1.25rem;counter-increment:ordered;content:counters(ordered, ".") " ";text-align:right;color:rgba(0,0,0,.87);vertical-align:middle;opacity:.8}.ui.ordered.inverted.list .list>.item:before,.ui.ordered.inverted.list>.item:before,ol.ui.inverted.list li:before{color:rgba(255,255,255,.7)}.ui.ordered.list>.item[data-value],.ui.ordered.list>.list>.item[data-value]{content:attr(data-value)}ol.ui.list li[value]:before{content:attr(value)}.ui.ordered.list .list,ol.ui.list ol{margin-left:1em}.ui.ordered.list .list>.item:before,ol.ui.list ol li:before{margin-left:-2em}.ui.ordered.horizontal.list,ol.ui.horizontal.list{margin-left:0}.ui.ordered.horizontal.list .list>.item:before,.ui.ordered.horizontal.list>.item:before,ol.ui.horizontal.list li:before{position:static;margin:0 .5em 0 0}.ui.divided.list>.item{border-top:1px solid rgba(34,36,38,.15)}.ui.divided.list .list>.item{border-top:none}.ui.divided.list .item .list>.item{border-top:none}.ui.divided.list .list>.item:first-child,.ui.divided.list>.item:first-child{border-top:none}.ui.divided.list:not(.horizontal) .list>.item:first-child{border-top-width:1px}.ui.divided.bulleted.list .list,.ui.divided.bulleted.list:not(.horizontal){margin-left:0;padding-left:0}.ui.divided.bulleted.list>.item:not(.horizontal){padding-left:1.25rem}.ui.divided.ordered.list{margin-left:0}.ui.divided.ordered.list .list>.item,.ui.divided.ordered.list>.item{padding-left:1.25rem}.ui.divided.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.21428571em}.ui.divided.ordered.list .item .list>.item{padding-left:1em}.ui.divided.selection.list .list>.item,.ui.divided.selection.list>.item{margin:0;border-radius:0}.ui.divided.horizontal.list{margin-left:0}.ui.divided.horizontal.list>.item:not(:first-child){padding-left:.5em}.ui.divided.horizontal.list>.item:not(:last-child){padding-right:.5em}.ui.divided.horizontal.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;line-height:.6}.ui.horizontal.divided.list>.item:first-child{border-left:none}.ui.divided.inverted.horizontal.list>.item,.ui.divided.inverted.list>.item,.ui.divided.inverted.list>.list{border-color:rgba(255,255,255,.1)}.ui.celled.list>.item,.ui.celled.list>.list{border-top:1px solid rgba(34,36,38,.15);padding-left:.5em;padding-right:.5em}.ui.celled.list>.item:last-child{border-bottom:1px solid rgba(34,36,38,.15)}.ui.celled.list>.item:first-child,.ui.celled.list>.item:last-child{padding-top:.21428571em;padding-bottom:.21428571em}.ui.celled.list .item .list>.item{border-width:0}.ui.celled.list .list>.item:first-child{border-top-width:0}.ui.celled.bulleted.list{margin-left:0}.ui.celled.bulleted.list .list>.item,.ui.celled.bulleted.list>.item{padding-left:1.25rem}.ui.celled.bulleted.list .item .list{margin-left:-1.25rem;margin-right:-1.25rem;padding-bottom:.21428571em}.ui.celled.ordered.list{margin-left:0}.ui.celled.ordered.list .list>.item,.ui.celled.ordered.list>.item{padding-left:1.25rem}.ui.celled.ordered.list .item .list{margin-left:0;margin-right:0;padding-bottom:.21428571em}.ui.celled.ordered.list .list>.item{padding-left:1em}.ui.horizontal.celled.list{margin-left:0}.ui.horizontal.celled.list .list>.item,.ui.horizontal.celled.list>.item{border-top:none;border-left:1px solid rgba(34,36,38,.15);margin:0;padding-left:.5em;padding-right:.5em;line-height:.6}.ui.horizontal.celled.list .list>.item:last-child,.ui.horizontal.celled.list>.item:last-child{border-bottom:none;border-right:1px solid rgba(34,36,38,.15)}.ui.celled.inverted.list>.item,.ui.celled.inverted.list>.list{border-color:1px solid rgba(255,255,255,.1)}.ui.celled.inverted.horizontal.list .list>.item,.ui.celled.inverted.horizontal.list>.item{border-color:1px solid rgba(255,255,255,.1)}.ui.relaxed.list:not(.horizontal)>.item:not(:first-child){padding-top:.42857143em}.ui.relaxed.list:not(.horizontal)>.item:not(:last-child){padding-bottom:.42857143em}.ui.horizontal.relaxed.list .list>.item:not(:first-child),.ui.horizontal.relaxed.list>.item:not(:first-child){padding-left:1rem}.ui.horizontal.relaxed.list .list>.item:not(:last-child),.ui.horizontal.relaxed.list>.item:not(:last-child){padding-right:1rem}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:first-child){padding-top:.85714286em}.ui[class*="very relaxed"].list:not(.horizontal)>.item:not(:last-child){padding-bottom:.85714286em}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:first-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:first-child){padding-left:1.5rem}.ui.horizontal[class*="very relaxed"].list .list>.item:not(:last-child),.ui.horizontal[class*="very relaxed"].list>.item:not(:last-child){padding-right:1.5rem}.ui.mini.list{font-size:.78571429em}.ui.tiny.list{font-size:.85714286em}.ui.small.list{font-size:.92857143em}.ui.list{font-size:1em}.ui.large.list{font-size:1.14285714em}.ui.big.list{font-size:1.28571429em}.ui.huge.list{font-size:1.42857143em}.ui.massive.list{font-size:1.71428571em}.ui.mini.horizontal.list .list>.item,.ui.mini.horizontal.list>.item{font-size:.78571429rem}.ui.tiny.horizontal.list .list>.item,.ui.tiny.horizontal.list>.item{font-size:.85714286rem}.ui.small.horizontal.list .list>.item,.ui.small.horizontal.list>.item{font-size:.92857143rem}.ui.horizontal.list .list>.item,.ui.horizontal.list>.item{font-size:1rem}.ui.large.horizontal.list .list>.item,.ui.large.horizontal.list>.item{font-size:1.14285714rem}.ui.big.horizontal.list .list>.item,.ui.big.horizontal.list>.item{font-size:1.28571429rem}.ui.huge.horizontal.list .list>.item,.ui.huge.horizontal.list>.item{font-size:1.42857143rem}.ui.massive.horizontal.list .list>.item,.ui.massive.horizontal.list>.item{font-size:1.71428571rem} \ No newline at end of file diff --git a/semantic/components/loader.css b/semantic/components/loader.css new file mode 100644 index 0000000..0cb5041 --- /dev/null +++ b/semantic/components/loader.css @@ -0,0 +1,347 @@ +/*! + * # Semantic UI 2.4.1 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Loader +*******************************/ + + +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: 50%; + left: 50%; + margin: 0px; + text-align: center; + z-index: 1000; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} + +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + -webkit-animation: loader 0.6s linear; + animation: loader 0.6s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + border-radius: 500rem; + border-color: #767676 transparent transparent; + border-style: solid; + border-width: 0.2em; + -webkit-box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0px 0px 0px 1px transparent; +} + +/* Active Animation */ +@-webkit-keyframes loader { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes loader { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/* Sizes */ +.ui.mini.loader:before, +.ui.mini.loader:after { + width: 1rem; + height: 1rem; + margin: 0em 0em 0em -0.5rem; +} +.ui.tiny.loader:before, +.ui.tiny.loader:after { + width: 1.14285714rem; + height: 1.14285714rem; + margin: 0em 0em 0em -0.57142857rem; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: 1.71428571rem; + height: 1.71428571rem; + margin: 0em 0em 0em -0.85714286rem; +} +.ui.loader:before, +.ui.loader:after { + width: 2.28571429rem; + height: 2.28571429rem; + margin: 0em 0em 0em -1.14285714rem; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: 3.42857143rem; + height: 3.42857143rem; + margin: 0em 0em 0em -1.71428571rem; +} +.ui.big.loader:before, +.ui.big.loader:after { + width: 3.71428571rem; + height: 3.71428571rem; + margin: 0em 0em 0em -1.85714286rem; +} +.ui.huge.loader:before, +.ui.huge.loader:after { + width: 4.14285714rem; + height: 4.14285714rem; + margin: 0em 0em 0em -2.07142857rem; +} +.ui.massive.loader:before, +.ui.massive.loader:after { + width: 4.57142857rem; + height: 4.57142857rem; + margin: 0em 0em 0em -2.28571429rem; +} + +/*------------------- + Coupling +--------------------*/ + + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: rgba(255, 255, 255, 0.9); +} +.ui.dimmer .ui.loader:before { + border-color: rgba(255, 255, 255, 0.15); +} +.ui.dimmer .ui.loader:after { + border-color: #FFFFFF transparent transparent; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: rgba(0, 0, 0, 0.87); +} +.ui.inverted.dimmer .ui.loader:before { + border-color: rgba(0, 0, 0, 0.1); +} +.ui.inverted.dimmer .ui.loader:after { + border-color: #767676 transparent transparent; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Text +--------------------*/ + +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} + + +/******************************* + States +*******************************/ + +.ui.indeterminate.loader:after { + animation-direction: reverse; + -webkit-animation-duration: 1.2s; + animation-duration: 1.2s; +} +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + + +/* Loader */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: 1rem; + height: 1rem; + font-size: 0.78571429em; +} +.ui.inverted.dimmer .ui.tiny.loader, +.ui.tiny.loader { + width: 1.14285714rem; + height: 1.14285714rem; + font-size: 0.85714286em; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 1.71428571rem; + height: 1.71428571rem; + font-size: 0.92857143em; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 2.28571429rem; + height: 2.28571429rem; + font-size: 1em; +} +.ui.inverted.dimmer .ui.large.loader, +.ui.large.loader { + width: 3.42857143rem; + height: 3.42857143rem; + font-size: 1.14285714em; +} +.ui.inverted.dimmer .ui.big.loader, +.ui.big.loader { + width: 3.71428571rem; + height: 3.71428571rem; + font-size: 1.28571429em; +} +.ui.inverted.dimmer .ui.huge.loader, +.ui.huge.loader { + width: 4.14285714rem; + height: 4.14285714rem; + font-size: 1.42857143em; +} +.ui.inverted.dimmer .ui.massive.loader, +.ui.massive.loader { + width: 4.57142857rem; + height: 4.57142857rem; + font-size: 1.71428571em; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: 1rem; + padding-top: 1.78571429rem; +} +.ui.tiny.text.loader { + min-width: 1.14285714rem; + padding-top: 1.92857143rem; +} +.ui.small.text.loader { + min-width: 1.71428571rem; + padding-top: 2.5rem; +} +.ui.text.loader { + min-width: 2.28571429rem; + padding-top: 3.07142857rem; +} +.ui.large.text.loader { + min-width: 3.42857143rem; + padding-top: 4.21428571rem; +} +.ui.big.text.loader { + min-width: 3.71428571rem; + padding-top: 4.5rem; +} +.ui.huge.text.loader { + min-width: 4.14285714rem; + padding-top: 4.92857143rem; +} +.ui.massive.text.loader { + min-width: 4.57142857rem; + padding-top: 5.35714286rem; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.loader { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.loader:before { + border-color: rgba(255, 255, 255, 0.15); +} +.ui.inverted.loader:after { + border-top-color: #FFFFFF; +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: relative; + vertical-align: middle; + margin: 0em; + left: 0em; + top: 0em; + -webkit-transform: none; + transform: none; +} +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* Centered Inline */ +.ui.centered.inline.loader.active, +.ui.centered.inline.loader.visible { + display: block; + margin-left: auto; + margin-right: auto; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/loader.min.css b/semantic/components/loader.min.css new file mode 100644 index 0000000..7e1e095 --- /dev/null +++ b/semantic/components/loader.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.loader{display:none;position:absolute;top:50%;left:50%;margin:0;text-align:center;z-index:1000;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.ui.loader:before{position:absolute;content:'';top:0;left:50%;width:100%;height:100%;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loader:after{position:absolute;content:'';top:0;left:50%;width:100%;height:100%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}@-webkit-keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.mini.loader:after,.ui.mini.loader:before{width:1rem;height:1rem;margin:0 0 0 -.5rem}.ui.tiny.loader:after,.ui.tiny.loader:before{width:1.14285714rem;height:1.14285714rem;margin:0 0 0 -.57142857rem}.ui.small.loader:after,.ui.small.loader:before{width:1.71428571rem;height:1.71428571rem;margin:0 0 0 -.85714286rem}.ui.loader:after,.ui.loader:before{width:2.28571429rem;height:2.28571429rem;margin:0 0 0 -1.14285714rem}.ui.large.loader:after,.ui.large.loader:before{width:3.42857143rem;height:3.42857143rem;margin:0 0 0 -1.71428571rem}.ui.big.loader:after,.ui.big.loader:before{width:3.71428571rem;height:3.71428571rem;margin:0 0 0 -1.85714286rem}.ui.huge.loader:after,.ui.huge.loader:before{width:4.14285714rem;height:4.14285714rem;margin:0 0 0 -2.07142857rem}.ui.massive.loader:after,.ui.massive.loader:before{width:4.57142857rem;height:4.57142857rem;margin:0 0 0 -2.28571429rem}.ui.dimmer .loader{display:block}.ui.dimmer .ui.loader{color:rgba(255,255,255,.9)}.ui.dimmer .ui.loader:before{border-color:rgba(255,255,255,.15)}.ui.dimmer .ui.loader:after{border-color:#fff transparent transparent}.ui.inverted.dimmer .ui.loader{color:rgba(0,0,0,.87)}.ui.inverted.dimmer .ui.loader:before{border-color:rgba(0,0,0,.1)}.ui.inverted.dimmer .ui.loader:after{border-color:#767676 transparent transparent}.ui.text.loader{width:auto!important;height:auto!important;text-align:center;font-style:normal}.ui.indeterminate.loader:after{animation-direction:reverse;-webkit-animation-duration:1.2s;animation-duration:1.2s}.ui.loader.active,.ui.loader.visible{display:block}.ui.loader.disabled,.ui.loader.hidden{display:none}.ui.inverted.dimmer .ui.mini.loader,.ui.mini.loader{width:1rem;height:1rem;font-size:.78571429em}.ui.inverted.dimmer .ui.tiny.loader,.ui.tiny.loader{width:1.14285714rem;height:1.14285714rem;font-size:.85714286em}.ui.inverted.dimmer .ui.small.loader,.ui.small.loader{width:1.71428571rem;height:1.71428571rem;font-size:.92857143em}.ui.inverted.dimmer .ui.loader,.ui.loader{width:2.28571429rem;height:2.28571429rem;font-size:1em}.ui.inverted.dimmer .ui.large.loader,.ui.large.loader{width:3.42857143rem;height:3.42857143rem;font-size:1.14285714em}.ui.big.loader,.ui.inverted.dimmer .ui.big.loader{width:3.71428571rem;height:3.71428571rem;font-size:1.28571429em}.ui.huge.loader,.ui.inverted.dimmer .ui.huge.loader{width:4.14285714rem;height:4.14285714rem;font-size:1.42857143em}.ui.inverted.dimmer .ui.massive.loader,.ui.massive.loader{width:4.57142857rem;height:4.57142857rem;font-size:1.71428571em}.ui.mini.text.loader{min-width:1rem;padding-top:1.78571429rem}.ui.tiny.text.loader{min-width:1.14285714rem;padding-top:1.92857143rem}.ui.small.text.loader{min-width:1.71428571rem;padding-top:2.5rem}.ui.text.loader{min-width:2.28571429rem;padding-top:3.07142857rem}.ui.large.text.loader{min-width:3.42857143rem;padding-top:4.21428571rem}.ui.big.text.loader{min-width:3.71428571rem;padding-top:4.5rem}.ui.huge.text.loader{min-width:4.14285714rem;padding-top:4.92857143rem}.ui.massive.text.loader{min-width:4.57142857rem;padding-top:5.35714286rem}.ui.inverted.loader{color:rgba(255,255,255,.9)}.ui.inverted.loader:before{border-color:rgba(255,255,255,.15)}.ui.inverted.loader:after{border-top-color:#fff}.ui.inline.loader{position:relative;vertical-align:middle;margin:0;left:0;top:0;-webkit-transform:none;transform:none}.ui.inline.loader.active,.ui.inline.loader.visible{display:inline-block}.ui.centered.inline.loader.active,.ui.centered.inline.loader.visible{display:block;margin-left:auto;margin-right:auto} \ No newline at end of file diff --git a/semantic/components/menu.css b/semantic/components/menu.css new file mode 100644 index 0000000..714675f --- /dev/null +++ b/semantic/components/menu.css @@ -0,0 +1,2052 @@ +/* + * # Semantic - Menu + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Menu +---------------*/ + +.ui.menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 1rem 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + background: #FFFFFF; + font-weight: normal; + border: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + min-height: 2.85714286em; +} +.ui.menu:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} + +/*-------------- + Sub-Menu +---------------*/ + +.ui.menu .menu { + margin: 0em; +} +.ui.menu:not(.vertical) > .menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: none; + padding: 0.92857143em 1.14285714em; + text-transform: none; + color: rgba(0, 0, 0, 0.87); + font-weight: normal; + -webkit-transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; +} +.ui.menu > .item:first-child { + border-radius: 0.28571429rem 0px 0px 0.28571429rem; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + height: 100%; + width: 1px; + background: rgba(34, 36, 38, 0.1); +} + +/*-------------- + Text Content +---------------*/ + +.ui.menu .text.item > *, +.ui.menu .item > a:not(.ui), +.ui.menu .item > p:only-child { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + line-height: 1.3; +} +.ui.menu .item > p:first-child { + margin-top: 0; +} +.ui.menu .item > p:last-child { + margin-bottom: 0; +} + +/*-------------- + Icons +---------------*/ + +.ui.menu .item > i.icon { + opacity: 0.9; + float: none; + margin: 0em 0.35714286em 0em 0em; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: 0em; + margin: -0.5em 0em; + padding-bottom: 0.78571429em; + padding-top: 0.78571429em; + font-size: 1em; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: inherit; + -ms-flex-align: inherit; + align-items: inherit; + -webkit-box-orient: inherit; + -webkit-box-direction: inherit; + -ms-flex-direction: inherit; + flex-direction: inherit; +} + +/*-------------- + Inputs +---------------*/ + +.ui.menu .item > .input { + width: 100%; +} +.ui.menu:not(.vertical) .item > .input { + position: relative; + top: 0em; + margin: -0.5em 0em; +} +.ui.menu .item > .input input { + font-size: 1em; + padding-top: 0.57142857em; + padding-bottom: 0.57142857em; +} + +/*-------------- + Header +---------------*/ + +.ui.menu .header.item, +.ui.vertical.menu .header.item { + margin: 0em; + background: ''; + text-transform: normal; + font-weight: bold; +} +.ui.vertical.menu .item > .header:not(.ui) { + margin: 0em 0em 0.5em; + font-size: 1em; + font-weight: bold; +} + +/*-------------- + Dropdowns +---------------*/ + + +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: right; + margin: 0em 0em 0em 1em; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + min-width: calc(100% - 1px); + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + background: #FFFFFF; + margin: 0em 0px 0px; + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; +} + +/* Menu Items */ +.ui.menu .ui.dropdown .menu > .item { + margin: 0; + text-align: left; + font-size: 1em !important; + padding: 0.78571429em 1.14285714em !important; + background: transparent !important; + color: rgba(0, 0, 0, 0.87) !important; + text-transform: none !important; + font-weight: normal !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + -webkit-transition: none !important; + transition: none !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + background: rgba(0, 0, 0, 0.05) !important; + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.menu .ui.dropdown .menu > .selected.item { + background: rgba(0, 0, 0, 0.05) !important; + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + background: rgba(0, 0, 0, 0.03) !important; + font-weight: bold !important; + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { + display: block; +} +.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { + display: inline-block; + font-size: 1em !important; + float: none; + margin: 0em 0.75em 0em 0em !important; +} + +/* Secondary */ +.ui.secondary.menu .dropdown.item > .menu, +.ui.text.menu .dropdown.item > .menu { + border-radius: 0.28571429rem; + margin-top: 0.35714286em; +} + +/* Pointing */ +.ui.menu .pointing.dropdown.item .menu { + margin-top: 0.75em; +} + +/* Inverted */ +.ui.inverted.menu .search.dropdown.item > .search, +.ui.inverted.menu .search.dropdown.item > .text { + color: rgba(255, 255, 255, 0.9); +} + +/* Vertical */ +.ui.vertical.menu .dropdown.item > .icon { + float: right; + content: "\f0da"; + margin-left: 1em; +} +.ui.vertical.menu .dropdown.item .menu { + left: 100%; + min-width: 0; + margin: 0em 0em 0em 0em; + -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); + border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem; +} +.ui.vertical.menu .dropdown.item.upward .menu { + bottom: 0; +} +.ui.vertical.menu .dropdown.item:not(.upward) .menu { + top: 0; +} +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.active.item { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; +} + +/*-------------- + Labels +---------------*/ + +.ui.menu .item > .label { + background: #999999; + color: #FFFFFF; + margin-left: 1em; + padding: 0.3em 0.78571429em; +} +.ui.vertical.menu .item > .label { + background: #999999; + color: #FFFFFF; + margin-top: -0.15em; + margin-bottom: -0.15em; + padding: 0.3em 0.78571429em; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.78571429em; +} + +/*-------------- + Images +---------------*/ + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: -0.3em 0em; + width: 2.5em; +} +.ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: auto; +} + + +/******************************* + Coupling +*******************************/ + + +/*-------------- + List +---------------*/ + + +/* Menu divider shouldnt apply */ +.ui.menu .list .item:before { + background: none !important; +} + +/*-------------- + Sidebar +---------------*/ + + +/* Show vertical dividers below last */ +.ui.vertical.sidebar.menu > .item:first-child:before { + display: block !important; +} +.ui.vertical.sidebar.menu > .item::before { + top: auto; + bottom: 0px; +} + +/*-------------- + Container +---------------*/ + +@media only screen and (max-width: 767px) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0em !important; + margin-right: 0em !important; + } +} +@media only screen and (min-width: 768px) { + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { + border-left: 1px solid rgba(34, 36, 38, 0.1); + } +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.03); + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Pressed +---------------*/ + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + background: rgba(0, 0, 0, 0.03); + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active +---------------*/ + +.ui.menu .active.item { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); + font-weight: normal; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.menu .active.item > i.icon { + opacity: 1; +} + +/*-------------- + Active Hover +---------------*/ + +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item:hover { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Disabled +---------------*/ + +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover { + cursor: default !important; + background-color: transparent !important; + color: rgba(40, 40, 40, 0.3) !important; +} + + +/******************************* + Types +*******************************/ + + +/*------------------ +Floated Menu / Item +-------------------*/ + + +/* Left Floated */ +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) :not(.dropdown) > .left.menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-right: auto !important; +} + +/* Right Floated */ +.ui.menu:not(.vertical) .right.item, +.ui.menu:not(.vertical) .right.menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-left: auto !important; +} + +/* Swapped Borders */ +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.menu { + display: block; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + background: #FFFFFF; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); +} + +/*--- Item ---*/ + +.ui.vertical.menu .item { + display: block; + background: none; + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: 0.28571429rem 0.28571429rem 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px 0.28571429rem 0.28571429rem; +} + +/*--- Label ---*/ + +.ui.vertical.menu .item > .label { + float: right; + text-align: center; +} + +/*--- Icon ---*/ + +.ui.vertical.menu .item > i.icon { + width: 1.18em; + float: right; + margin: 0em 0em 0em 0.5em; +} +.ui.vertical.menu .item > .label + i.icon { + float: none; + margin: 0em 0.5em 0em 0em; +} + +/*--- Border ---*/ + +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: 1px; + background: rgba(34, 36, 38, 0.1); +} +.ui.vertical.menu .item:first-child:before { + display: none !important; +} + +/*--- Sub Menu ---*/ + +.ui.vertical.menu .item > .menu { + margin: 0.5em -1.14285714em 0em; +} +.ui.vertical.menu .menu .item { + background: none; + padding: 0.5em 1.33333333em; + font-size: 0.85714286em; + color: rgba(0, 0, 0, 0.5); +} +.ui.vertical.menu .item .menu a.item:hover, +.ui.vertical.menu .item .menu .link.item:hover { + color: rgba(0, 0, 0, 0.85); +} +.ui.vertical.menu .menu .item:before { + display: none; +} + +/* Vertical Active */ +.ui.vertical.menu .active.item { + background: rgba(0, 0, 0, 0.05); + border-radius: 0em; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: 0.28571429rem; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .item .menu .active.item { + background-color: transparent; + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Tabular +---------------*/ + +.ui.tabular.menu { + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border: none; + background: none transparent; + border-bottom: 1px solid #D4D4D5; +} +.ui.tabular.fluid.menu { + width: calc(100% + (1px * 2)) !important; +} +.ui.tabular.menu .item { + background: transparent; + border-bottom: none; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 2px solid transparent; + padding: 0.92857143em 1.42857143em; + color: rgba(0, 0, 0, 0.87); +} +.ui.tabular.menu .item:before { + display: none; +} + +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.8); +} + +/* Active */ +.ui.tabular.menu .active.item { + background: none #FFFFFF; + color: rgba(0, 0, 0, 0.95); + border-top-width: 1px; + border-color: #D4D4D5; + font-weight: bold; + margin-bottom: -1px; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0.28571429rem 0.28571429rem 0px 0px !important; +} + +/* Coupling with segment for attachment */ +.ui.tabular.menu + .attached:not(.top).segment, +.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { + border-top: none; + margin-left: 0px; + margin-top: 0px; + margin-right: 0px; + width: 100%; +} +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: calc(100% + (1px * 2)); + left: -1px; +} + +/* Bottom Vertical Tabular */ +.ui.bottom.tabular.menu { + background: none transparent; + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-bottom: none; + border-top: 1px solid #D4D4D5; +} +.ui.bottom.tabular.menu .item { + background: none; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-bottom: 1px solid transparent; + border-top: none; +} +.ui.bottom.tabular.menu .active.item { + background: none #FFFFFF; + color: rgba(0, 0, 0, 0.95); + border-color: #D4D4D5; + margin: -1px 0px 0px 0px; + border-radius: 0px 0px 0.28571429rem 0.28571429rem !important; +} + +/* Vertical Tabular (Left) */ +.ui.vertical.tabular.menu { + background: none transparent; + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-bottom: none; + border-right: 1px solid #D4D4D5; +} +.ui.vertical.tabular.menu .item { + background: none; + border-left: 1px solid transparent; + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + border-right: none; +} +.ui.vertical.tabular.menu .active.item { + background: none #FFFFFF; + color: rgba(0, 0, 0, 0.95); + border-color: #D4D4D5; + margin: 0px -1px 0px 0px; + border-radius: 0.28571429rem 0px 0px 0.28571429rem !important; +} + +/* Vertical Right Tabular */ +.ui.vertical.right.tabular.menu { + background: none transparent; + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-bottom: none; + border-right: none; + border-left: 1px solid #D4D4D5; +} +.ui.vertical.right.tabular.menu .item { + background: none; + border-right: 1px solid transparent; + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + border-left: none; +} +.ui.vertical.right.tabular.menu .active.item { + background: none #FFFFFF; + color: rgba(0, 0, 0, 0.95); + border-color: #D4D4D5; + margin: 0px 0px 0px -1px; + border-radius: 0px 0.28571429rem 0.28571429rem 0px !important; +} + +/* Dropdown */ +.ui.tabular.menu .active.dropdown.item { + margin-bottom: 0px; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-top: 2px solid transparent; + border-bottom: none; +} + +/*-------------- + Pagination +---------------*/ + +.ui.pagination.menu { + margin: 0em; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} +.ui.compact.menu .item:last-child { + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} +.ui.pagination.menu .item:last-child:before { + display: none; +} +.ui.pagination.menu .item { + min-width: 3em; + text-align: center; +} +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; +} + +/* Active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: 0.92857143em; + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: none; + margin-left: -0.35714286em; + margin-right: -0.35714286em; + border-radius: 0em; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + -ms-flex-item-align: center; + align-self: center; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + padding: 0.78571429em 0.92857143em; + margin: 0em 0.35714286em; + background: none; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; + border-radius: 0.28571429rem; +} + +/* No Divider */ +.ui.secondary.menu .item:before { + display: none !important; +} + +/* Header */ +.ui.secondary.menu .header.item { + border-radius: 0em; + border-right: none; + background: none transparent; +} + +/* Image */ +.ui.secondary.menu .item > img:not(.ui) { + margin: 0em; +} + +/* Hover */ +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Active */ +.ui.secondary.menu .active.item { + -webkit-box-shadow: none; + box-shadow: none; + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); + border-radius: 0.28571429rem; +} + +/* Active Hover */ +.ui.secondary.menu .active.item:hover { + -webkit-box-shadow: none; + box-shadow: none; + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: rgba(255, 255, 255, 0.7) !important; +} +.ui.secondary.inverted.menu .dropdown.item:hover, +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + background: rgba(255, 255, 255, 0.08); + color: #ffffff !important; +} +.ui.secondary.inverted.menu .active.item { + background: rgba(255, 255, 255, 0.15); + color: #ffffff !important; +} + +/* Fix item margins */ +.ui.secondary.item.menu { + margin-left: 0em; + margin-right: 0em; +} +.ui.secondary.item.menu .item:last-child { + margin-right: 0em; +} +.ui.secondary.attached.menu { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { + margin: 0em -0.92857143em; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: 0em; + padding: 0.5em 1.33333333em; +} + +/*--------------------- + Secondary Vertical +-----------------------*/ + +.ui.secondary.vertical.menu > .item { + border: none; + margin: 0em 0em 0.35714286em; + border-radius: 0.28571429rem !important; +} +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; +} + +/* Inverted */ +.ui.secondary.inverted.menu { + background-color: transparent; +} + +/*--------------------- + Secondary Pointing +-----------------------*/ + +.ui.secondary.pointing.menu { + margin-left: 0em; + margin-right: 0em; + border-bottom: 2px solid rgba(34, 36, 38, 0.15); +} +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0em; + -ms-flex-item-align: end; + align-self: flex-end; + margin: 0em 0em -2px; + padding: 0.85714286em 1.14285714em; + border-bottom-width: 2px; + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} + +/* Item Types */ +.ui.secondary.pointing.menu .header.item { + color: rgba(0, 0, 0, 0.85) !important; +} +.ui.secondary.pointing.menu .text.item { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} +.ui.secondary.pointing.menu .item:after { + display: none; +} + +/* Hover */ +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: rgba(0, 0, 0, 0.87); +} + +/* Pressed */ +.ui.secondary.pointing.menu .dropdown.item:active, +.ui.secondary.pointing.menu .link.item:active, +.ui.secondary.pointing.menu a.item:active { + background-color: transparent; + border-color: rgba(34, 36, 38, 0.15); +} + +/* Active */ +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + border-color: #1B1C1D; + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/* Active Hover */ +.ui.secondary.pointing.menu .active.item:hover { + border-color: #1B1C1D; + color: rgba(0, 0, 0, 0.95); +} + +/* Active Dropdown */ +.ui.secondary.pointing.menu .active.dropdown.item { + border-color: transparent; +} + +/* Vertical Pointing */ +.ui.secondary.vertical.pointing.menu { + border-bottom-width: 0px; + border-right-width: 2px; + border-right-style: solid; + border-right-color: rgba(34, 36, 38, 0.15); +} +.ui.secondary.vertical.pointing.menu .item { + border-bottom: none; + border-right-style: solid; + border-right-color: transparent; + border-radius: 0em !important; + margin: 0em -2px 0em 0em; + border-right-width: 2px; +} + +/* Vertical Active */ +.ui.secondary.vertical.pointing.menu .active.item { + border-color: #1B1C1D; +} + +/* Inverted */ +.ui.secondary.inverted.pointing.menu { + border-color: rgba(255, 255, 255, 0.1); +} +.ui.secondary.inverted.pointing.menu { + border-width: 2px; + border-color: rgba(34, 36, 38, 0.15); +} +.ui.secondary.inverted.pointing.menu .item { + color: rgba(255, 255, 255, 0.9); +} +.ui.secondary.inverted.pointing.menu .header.item { + color: #FFFFFF !important; +} + +/* Hover */ +.ui.secondary.inverted.pointing.menu .link.item:hover, +.ui.secondary.inverted.pointing.menu a.item:hover { + color: rgba(0, 0, 0, 0.95); +} + +/* Active */ +.ui.secondary.inverted.pointing.menu .active.item { + border-color: #FFFFFF; + color: #ffffff; +} + +/*-------------- + Text Menu +---------------*/ + +.ui.text.menu { + background: none transparent; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + margin: 1em -0.5em; +} +.ui.text.menu .item { + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; + -ms-flex-item-align: center; + align-self: center; + margin: 0em 0em; + padding: 0.35714286em 0.5em; + font-weight: normal; + color: rgba(0, 0, 0, 0.6); + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} + +/* Border */ +.ui.text.menu .item:before, +.ui.text.menu .menu .item:before { + display: none !important; +} + +/* Header */ +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: rgba(0, 0, 0, 0.85); + font-size: 0.92857143em; + text-transform: uppercase; + font-weight: bold; +} + +/* Image */ +.ui.text.menu .item > img:not(.ui) { + margin: 0em; +} + +/*--- fluid text ---*/ + +.ui.text.item.menu .item { + margin: 0em; +} + +/*--- vertical text ---*/ + +.ui.vertical.text.menu { + margin: 1em 0em; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + margin: 0.57142857em 0em; + padding-left: 0em; + padding-right: 0em; +} +.ui.vertical.text.menu .item > i.icon { + float: none; + margin: 0em 0.35714286em 0em 0em; +} +.ui.vertical.text.menu .header.item { + margin: 0.57142857em 0em 0.71428571em; +} + +/* Vertical Sub Menu */ +.ui.vertical.text.menu .item:not(.dropdown) > .menu { + margin: 0em; +} +.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { + margin: 0em; + padding: 0.5em 0em; +} + +/*--- hover ---*/ + +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} + +/*--- active ---*/ + +.ui.text.menu .active.item { + background-color: transparent; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + font-weight: normal; + color: rgba(0, 0, 0, 0.95); +} + +/*--- active hover ---*/ + +.ui.text.menu .active.item:hover { + background-color: transparent; +} + +/* Disable Bariations */ +.ui.text.pointing.menu .active.item:after { + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.text.attached.menu { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Inverted */ +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .active.item { + background-color: transparent !important; +} + +/* Fluid */ +.ui.fluid.text.menu { + margin-left: 0em; + margin-right: 0em; +} + +/*-------------- + Icon Only +---------------*/ + + +/* Vertical Menu */ +.ui.vertical.icon.menu { + display: inline-block; + width: auto; +} + +/* Item */ +.ui.icon.menu .item { + height: auto; + text-align: center; + color: #1B1C1D; +} + +/* Icon */ +.ui.icon.menu .item > .icon:not(.dropdown) { + margin: 0; + opacity: 1; +} + +/* Icon Gylph */ +.ui.icon.menu .icon:before { + opacity: 1; +} + +/* (x) Item Icon */ +.ui.menu .icon.item > .icon { + width: auto; + margin: 0em auto; +} + +/* Vertical Icon */ +.ui.vertical.icon.menu .item > .icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0em auto; + float: none; +} + +/* Inverted */ +.ui.inverted.icon.menu .item { + color: #FFFFFF; +} + +/*-------------- + Labeled Icon +---------------*/ + + +/* Menu */ +.ui.labeled.icon.menu { + text-align: center; +} + +/* Item */ +.ui.labeled.icon.menu .item { + min-width: 6em; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +/* Icon */ +.ui.labeled.icon.menu .item > .icon:not(.dropdown) { + height: 1em; + display: block; + font-size: 1.71428571em !important; + margin: 0em auto 0.5rem !important; +} + +/* Fluid */ +.ui.fluid.labeled.icon.menu > .item { + min-width: 0em; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: 767px) { + .ui.stackable.menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .ui.stackable.menu .item { + width: 100% !important; + } + .ui.stackable.menu .item:before { + position: absolute; + content: ''; + top: auto; + bottom: 0px; + left: 0px; + width: 100%; + height: 1px; + background: rgba(34, 36, 38, 0.1); + } + .ui.stackable.menu .left.menu, + .ui.stackable.menu .left.item { + margin-right: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .right.item { + margin-left: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .left.menu { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } +} + +/*-------------- + Colors +---------------*/ + + +/*--- Standard Colors ---*/ + +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: #DB2828 !important; + color: #DB2828 !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: #F2711C !important; + color: #F2711C !important; +} +.ui.menu .yellow.active.item, +.ui.yellow.menu .active.item { + border-color: #FBBD08 !important; + color: #FBBD08 !important; +} +.ui.menu .olive.active.item, +.ui.olive.menu .active.item { + border-color: #B5CC18 !important; + color: #B5CC18 !important; +} +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: #21BA45 !important; + color: #21BA45 !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: #00B5AD !important; + color: #00B5AD !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: #2185D0 !important; + color: #2185D0 !important; +} +.ui.menu .violet.active.item, +.ui.violet.menu .active.item { + border-color: #6435C9 !important; + color: #6435C9 !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: #A333C8 !important; + color: #A333C8 !important; +} +.ui.menu .pink.active.item, +.ui.pink.menu .active.item { + border-color: #E03997 !important; + color: #E03997 !important; +} +.ui.menu .brown.active.item, +.ui.brown.menu .active.item { + border-color: #A5673F !important; + color: #A5673F !important; +} +.ui.menu .grey.active.item, +.ui.grey.menu .active.item { + border-color: #767676 !important; + color: #767676 !important; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.menu { + border: 0px solid transparent; + background: #1B1C1D; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Menu Item */ +.ui.inverted.menu .item, +.ui.inverted.menu .item > a:not(.ui) { + background: transparent; + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.menu .item.menu { + background: transparent; +} + +/*--- Border ---*/ + +.ui.inverted.menu .item:before { + background: rgba(255, 255, 255, 0.08); +} +.ui.vertical.inverted.menu .item:before { + background: rgba(255, 255, 255, 0.08); +} + +/* Sub Menu */ +.ui.vertical.inverted.menu .menu .item, +.ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: rgba(255, 255, 255, 0.5); +} + +/* Header */ +.ui.inverted.menu .header.item { + margin: 0em; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Disabled */ +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover { + color: rgba(225, 225, 225, 0.3); +} + +/*--- Hover ---*/ + +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .dropdown.item:hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover { + background: rgba(255, 255, 255, 0.08); + color: #ffffff; +} +.ui.vertical.inverted.menu .item .menu a.item:hover, +.ui.vertical.inverted.menu .item .menu .link.item:hover { + background: transparent; + color: #ffffff; +} + +/*--- Pressed ---*/ + +.ui.inverted.menu a.item:active, +.ui.inverted.menu .link.item:active { + background: rgba(255, 255, 255, 0.08); + color: #ffffff; +} + +/*--- Active ---*/ + +.ui.inverted.menu .active.item { + background: rgba(255, 255, 255, 0.15); + color: #ffffff !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background: transparent; + color: #FFFFFF; +} +.ui.inverted.pointing.menu .active.item:after { + background: #3D3E3F !important; + margin: 0em !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border: none !important; +} + +/*--- Active Hover ---*/ + +.ui.inverted.menu .active.item:hover { + background: rgba(255, 255, 255, 0.15); + color: #FFFFFF !important; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background: #3D3E3F !important; +} + +/*-------------- + Floated +---------------*/ + +.ui.floated.menu { + float: left; + margin: 0rem 0.5rem 0rem 0rem; +} +.ui.floated.menu .item:last-child:before { + display: none; +} +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem 0.5rem; +} + +/*-------------- + Inverted +---------------*/ + + +/* Red */ +.ui.inverted.menu .red.active.item, +.ui.inverted.red.menu { + background-color: #DB2828; +} +.ui.inverted.red.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.red.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Orange */ +.ui.inverted.menu .orange.active.item, +.ui.inverted.orange.menu { + background-color: #F2711C; +} +.ui.inverted.orange.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.orange.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Yellow */ +.ui.inverted.menu .yellow.active.item, +.ui.inverted.yellow.menu { + background-color: #FBBD08; +} +.ui.inverted.yellow.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.yellow.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Olive */ +.ui.inverted.menu .olive.active.item, +.ui.inverted.olive.menu { + background-color: #B5CC18; +} +.ui.inverted.olive.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.olive.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Green */ +.ui.inverted.menu .green.active.item, +.ui.inverted.green.menu { + background-color: #21BA45; +} +.ui.inverted.green.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.green.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Teal */ +.ui.inverted.menu .teal.active.item, +.ui.inverted.teal.menu { + background-color: #00B5AD; +} +.ui.inverted.teal.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.teal.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Blue */ +.ui.inverted.menu .blue.active.item, +.ui.inverted.blue.menu { + background-color: #2185D0; +} +.ui.inverted.blue.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.blue.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Violet */ +.ui.inverted.menu .violet.active.item, +.ui.inverted.violet.menu { + background-color: #6435C9; +} +.ui.inverted.violet.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.violet.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Purple */ +.ui.inverted.menu .purple.active.item, +.ui.inverted.purple.menu { + background-color: #A333C8; +} +.ui.inverted.purple.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.purple.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Pink */ +.ui.inverted.menu .pink.active.item, +.ui.inverted.pink.menu { + background-color: #E03997; +} +.ui.inverted.pink.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.pink.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Brown */ +.ui.inverted.menu .brown.active.item, +.ui.inverted.brown.menu { + background-color: #A5673F; +} +.ui.inverted.brown.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.brown.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/* Grey */ +.ui.inverted.menu .grey.active.item, +.ui.inverted.grey.menu { + background-color: #767676; +} +.ui.inverted.grey.menu .item:before { + background-color: rgba(34, 36, 38, 0.1); +} +.ui.inverted.grey.menu .active.item { + background-color: rgba(0, 0, 0, 0.1) !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: 0.92857143em; + padding-bottom: 0.92857143em; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: 1.14285714em; + padding-right: 1.14285714em; +} + +/*-------------- + Borderless +---------------*/ + +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background: none !important; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.menu { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + display: inline-block; +} +.ui.compact.menu .item:last-child { + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} +.ui.compact.menu .item:last-child:before { + display: none; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.menu.fluid, +.ui.vertical.menu.fluid { + width: 100% !important; +} + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0em !important; + padding-right: 0em !important; + margin-left: 0em !important; + margin-right: 0em !important; + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.ui.attached.item.menu { + margin: 0em -1px !important; +} +.ui.item.menu .item:last-child:before { + display: none; +} +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.5%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} + +/*-------------- + Fixed +---------------*/ + +.ui.menu.fixed { + position: fixed; + z-index: 101; + margin: 0em; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + border-radius: 0px !important; +} +.ui.fixed.menu, +.ui[class*="top fixed"].menu { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui[class*="top fixed"].menu { + border-top: none; + border-left: none; + border-right: none; +} +.ui[class*="right fixed"].menu { + border-top: none; + border-bottom: none; + border-right: none; + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui[class*="bottom fixed"].menu { + border-bottom: none; + border-left: none; + border-right: none; + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui[class*="left fixed"].menu { + border-top: none; + border-bottom: none; + border-left: none; + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} + +/* Coupling with Grid */ +.ui.fixed.menu + .ui.grid { + padding-top: 2.75rem; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.menu .item:after { + visibility: hidden; + position: absolute; + content: ''; + top: 100%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + background: none; + margin: 0.5px 0em 0em; + width: 0.57142857em; + height: 0.57142857em; + border: none; + border-bottom: 1px solid #D4D4D5; + border-right: 1px solid #D4D4D5; + z-index: 2; + -webkit-transition: background 0.1s ease; + transition: background 0.1s ease; +} +.ui.vertical.pointing.menu .item:after { + position: absolute; + top: 50%; + right: 0%; + bottom: auto; + left: auto; + -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); + transform: translateX(50%) translateY(-50%) rotate(45deg); + margin: 0em -0.5px 0em 0em; + border: none; + border-top: 1px solid #D4D4D5; + border-right: 1px solid #D4D4D5; +} + +/* Active */ +.ui.pointing.menu .active.item:after { + visibility: visible; +} +.ui.pointing.menu .active.dropdown.item:after { + visibility: hidden; +} + +/* Don't double up pointers */ +.ui.pointing.menu .dropdown.active.item:after, +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} + +/* Colors */ +.ui.pointing.menu .active.item:hover:after { + background-color: #F2F2F2; +} +.ui.pointing.menu .active.item:after { + background-color: #F2F2F2; +} +.ui.pointing.menu .active.item:hover:after { + background-color: #F2F2F2; +} +.ui.vertical.pointing.menu .active.item:hover:after { + background-color: #F2F2F2; +} +.ui.vertical.pointing.menu .active.item:after { + background-color: #F2F2F2; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: #FFFFFF; +} + +/*-------------- + Attached +---------------*/ + + +/* Middle */ +.ui.attached.menu { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em -1px; + width: calc(100% - (-1px * 2)); + max-width: calc(100% - (-1px * 2)); + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.attached + .ui.attached.menu:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].menu { + bottom: 0px; + margin-bottom: 0em; + top: 0px; + margin-top: 1rem; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.menu[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].menu { + bottom: 0px; + margin-top: 0em; + top: 0px; + margin-bottom: 1rem; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0em; +} + +/* Attached Menu Item */ +.ui.top.attached.menu > .item:first-child { + border-radius: 0.28571429rem 0em 0em 0em; +} +.ui.bottom.attached.menu > .item:first-child { + border-radius: 0em 0em 0em 0.28571429rem; +} + +/* Tabular Attached */ +.ui.attached.menu:not(.tabular) { + border: 1px solid #D4D4D5; +} +.ui.attached.inverted.menu { + border: none; +} +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +/*-------------- + Sizes +---------------*/ + + +/* Mini */ +.ui.mini.menu { + font-size: 0.78571429rem; +} +.ui.mini.vertical.menu { + width: 9rem; +} + +/* Tiny */ +.ui.tiny.menu { + font-size: 0.85714286rem; +} +.ui.tiny.vertical.menu { + width: 11rem; +} + +/* Small */ +.ui.small.menu { + font-size: 0.92857143rem; +} +.ui.small.vertical.menu { + width: 13rem; +} + +/* Medium */ +.ui.menu { + font-size: 1rem; +} +.ui.vertical.menu { + width: 15rem; +} + +/* Large */ +.ui.large.menu { + font-size: 1.07142857rem; +} +.ui.large.vertical.menu { + width: 18rem; +} + +/* Huge */ +.ui.huge.menu { + font-size: 1.21428571rem; +} +.ui.huge.vertical.menu { + width: 22rem; +} + +/* Big */ +.ui.big.menu { + font-size: 1.14285714rem; +} +.ui.big.vertical.menu { + width: 20rem; +} + +/* Massive */ +.ui.massive.menu { + font-size: 1.28571429rem; +} +.ui.massive.vertical.menu { + width: 25rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/menu.min.css b/semantic/components/menu.min.css new file mode 100644 index 0000000..34b921c --- /dev/null +++ b/semantic/components/menu.min.css @@ -0,0 +1 @@ +.ui.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1rem 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;font-weight:400;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.28571429rem;min-height:2.85714286em}.ui.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.ui.menu:first-child{margin-top:0}.ui.menu:last-child{margin-bottom:0}.ui.menu .menu{margin:0}.ui.menu:not(.vertical)>.menu{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.menu:not(.vertical) .item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.menu .item{position:relative;vertical-align:middle;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;padding:.92857143em 1.14285714em;text-transform:none;color:rgba(0,0,0,.87);font-weight:400;-webkit-transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease;transition:background .1s ease,box-shadow .1s ease,color .1s ease,-webkit-box-shadow .1s ease}.ui.menu>.item:first-child{border-radius:.28571429rem 0 0 .28571429rem}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;height:100%;width:1px;background:rgba(34,36,38,.1)}.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child,.ui.menu .text.item>*{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;line-height:1.3}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:last-child{margin-bottom:0}.ui.menu .item>i.icon{opacity:.9;float:none;margin:0 .35714286em 0 0}.ui.menu:not(.vertical) .item>.button{position:relative;top:0;margin:-.5em 0;padding-bottom:.78571429em;padding-top:.78571429em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-orient:inherit;-webkit-box-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.ui.menu .item>.input{width:100%}.ui.menu:not(.vertical) .item>.input{position:relative;top:0;margin:-.5em 0}.ui.menu .item>.input input{font-size:1em;padding-top:.57142857em;padding-bottom:.57142857em}.ui.menu .header.item,.ui.vertical.menu .header.item{margin:0;background:'';text-transform:normal;font-weight:700}.ui.vertical.menu .item>.header:not(.ui){margin:0 0 .5em;font-size:1em;font-weight:700}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{min-width:calc(100% - 1px);border-radius:0 0 .28571429rem .28571429rem;background:#fff;margin:0 0 0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.ui.menu .ui.dropdown .menu>.item{margin:0;text-align:left;font-size:1em!important;padding:.78571429em 1.14285714em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;-webkit-box-shadow:none!important;box-shadow:none!important;-webkit-transition:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.selected.item{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown .menu>.active.item{background:rgba(0,0,0,.03)!important;font-weight:700!important;color:rgba(0,0,0,.95)!important}.ui.menu .ui.dropdown.item .menu .item:not(.filtered){display:block}.ui.menu .ui.dropdown .menu>.item .icon:not(.dropdown){display:inline-block;font-size:1em!important;float:none;margin:0 .75em 0 0!important}.ui.secondary.menu .dropdown.item>.menu,.ui.text.menu .dropdown.item>.menu{border-radius:.28571429rem;margin-top:.35714286em}.ui.menu .pointing.dropdown.item .menu{margin-top:.75em}.ui.inverted.menu .search.dropdown.item>.search,.ui.inverted.menu .search.dropdown.item>.text{color:rgba(255,255,255,.9)}.ui.vertical.menu .dropdown.item>.icon{float:right;content:"\f0da";margin-left:1em}.ui.vertical.menu .dropdown.item .menu{left:100%;min-width:0;margin:0;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.08);box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .28571429rem .28571429rem .28571429rem}.ui.vertical.menu .dropdown.item.upward .menu{bottom:0}.ui.vertical.menu .dropdown.item:not(.upward) .menu{top:0}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{-webkit-box-shadow:none;box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label{background:#999;color:#fff;margin-left:1em;padding:.3em .78571429em}.ui.vertical.menu .item>.label{background:#999;color:#fff;margin-top:-.15em;margin-bottom:-.15em;padding:.3em .78571429em}.ui.menu .item>.floating.label{padding:.3em .78571429em}.ui.menu .item>img:not(.ui){display:inline-block;vertical-align:middle;margin:-.3em 0;width:2.5em}.ui.vertical.menu .item>img:not(.ui):only-child{display:block;max-width:100%;width:auto}.ui.menu .list .item:before{background:0 0!important}.ui.vertical.sidebar.menu>.item:first-child:before{display:block!important}.ui.vertical.sidebar.menu>.item::before{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.menu>.ui.container{width:100%!important;margin-left:0!important;margin-right:0!important}}@media only screen and (min-width:768px){.ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child{border-left:1px solid rgba(34,36,38,.1)}}.ui.link.menu .item:hover,.ui.menu .dropdown.item:hover,.ui.menu .link.item:hover,.ui.menu a.item:hover{cursor:pointer;background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.link.menu .item:active,.ui.menu .link.item:active,.ui.menu a.item:active{background:rgba(0,0,0,.03);color:rgba(0,0,0,.95)}.ui.menu .active.item{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);font-weight:400;-webkit-box-shadow:none;box-shadow:none}.ui.menu .active.item>i.icon{opacity:1}.ui.menu .active.item:hover,.ui.vertical.menu .active.item:hover{background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.menu .item.disabled,.ui.menu .item.disabled:hover{cursor:default!important;background-color:transparent!important;color:rgba(40,40,40,.3)!important}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) :not(.dropdown)>.left.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto!important}.ui.menu:not(.vertical) .right.item,.ui.menu:not(.vertical) .right.menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto!important}.ui.menu .right.item::before,.ui.menu .right.menu>.item::before{right:auto;left:0}.ui.vertical.menu{display:block;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui.vertical.menu .item{display:block;background:0 0;border-top:none;border-right:none}.ui.vertical.menu>.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu .item>.label{float:right;text-align:center}.ui.vertical.menu .item>i.icon{width:1.18em;float:right;margin:0 0 0 .5em}.ui.vertical.menu .item>.label+i.icon{float:none;margin:0 .5em 0 0}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.vertical.menu .item:first-child:before{display:none!important}.ui.vertical.menu .item>.menu{margin:.5em -1.14285714em 0}.ui.vertical.menu .menu .item{background:0 0;padding:.5em 1.33333333em;font-size:.85714286em;color:rgba(0,0,0,.5)}.ui.vertical.menu .item .menu .link.item:hover,.ui.vertical.menu .item .menu a.item:hover{color:rgba(0,0,0,.85)}.ui.vertical.menu .menu .item:before{display:none}.ui.vertical.menu .active.item{background:rgba(0,0,0,.05);border-radius:0;-webkit-box-shadow:none;box-shadow:none}.ui.vertical.menu>.active.item:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.menu>.active.item:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.menu>.active.item:only-child{border-radius:.28571429rem}.ui.vertical.menu .active.item .menu .active.item{border-left:none}.ui.vertical.menu .item .menu .active.item{background-color:transparent;font-weight:700;color:rgba(0,0,0,.95)}.ui.tabular.menu{border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border:none;background:none transparent;border-bottom:1px solid #d4d4d5}.ui.tabular.fluid.menu{width:calc(100% + (1px * 2))!important}.ui.tabular.menu .item{background:0 0;border-bottom:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;padding:.92857143em 1.42857143em;color:rgba(0,0,0,.87)}.ui.tabular.menu .item:before{display:none}.ui.tabular.menu .item:hover{background-color:transparent;color:rgba(0,0,0,.8)}.ui.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#d4d4d5;font-weight:700;margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none;border-radius:.28571429rem .28571429rem 0 0!important}.ui.tabular.menu+.attached:not(.top).segment,.ui.tabular.menu+.attached:not(.top).segment+.attached:not(.top).segment{border-top:none;margin-left:0;margin-top:0;margin-right:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + (1px * 2));left:-1px}.ui.bottom.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-top:1px solid #d4d4d5}.ui.bottom.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:none}.ui.bottom.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:-1px 0 0 0;border-radius:0 0 .28571429rem .28571429rem!important}.ui.vertical.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:1px solid #d4d4d5}.ui.vertical.tabular.menu .item{background:0 0;border-left:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-right:none}.ui.vertical.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 -1px 0 0;border-radius:.28571429rem 0 0 .28571429rem!important}.ui.vertical.right.tabular.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;border-bottom:none;border-right:none;border-left:1px solid #d4d4d5}.ui.vertical.right.tabular.menu .item{background:0 0;border-right:1px solid transparent;border-bottom:1px solid transparent;border-top:1px solid transparent;border-left:none}.ui.vertical.right.tabular.menu .active.item{background:none #fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:0 0 0 -1px;border-radius:0 .28571429rem .28571429rem 0!important}.ui.tabular.menu .active.dropdown.item{margin-bottom:0;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent;border-bottom:none}.ui.pagination.menu{margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.ui.pagination.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.compact.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.pagination.menu .item:last-child:before{display:none}.ui.pagination.menu .item{min-width:3em;text-align:center}.ui.pagination.menu .icon.item i.icon{vertical-align:top}.ui.pagination.menu .active.item{border-top:none;padding-top:.92857143em;background-color:rgba(0,0,0,.05);color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.35714286em;margin-right:-.35714286em;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none}.ui.secondary.menu .item{-ms-flex-item-align:center;align-self:center;-webkit-box-shadow:none;box-shadow:none;border:none;padding:.78571429em .92857143em;margin:0 .35714286em;background:0 0;-webkit-transition:color .1s ease;transition:color .1s ease;border-radius:.28571429rem}.ui.secondary.menu .item:before{display:none!important}.ui.secondary.menu .header.item{border-radius:0;border-right:none;background:none transparent}.ui.secondary.menu .item>img:not(.ui){margin:0}.ui.secondary.menu .dropdown.item:hover,.ui.secondary.menu .link.item:hover,.ui.secondary.menu a.item:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.menu .active.item{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.28571429rem}.ui.secondary.menu .active.item:hover{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.secondary.inverted.menu .link.item,.ui.secondary.inverted.menu a.item{color:rgba(255,255,255,.7)!important}.ui.secondary.inverted.menu .dropdown.item:hover,.ui.secondary.inverted.menu .link.item:hover,.ui.secondary.inverted.menu a.item:hover{background:rgba(255,255,255,.08);color:#fff!important}.ui.secondary.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.secondary.item.menu{margin-left:0;margin-right:0}.ui.secondary.item.menu .item:last-child{margin-right:0}.ui.secondary.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu{margin:0 -.92857143em}.ui.vertical.secondary.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 1.33333333em}.ui.secondary.vertical.menu>.item{border:none;margin:0 0 .35714286em;border-radius:.28571429rem!important}.ui.secondary.vertical.menu>.header.item{border-radius:0}.ui.vertical.secondary.menu .item>.menu .item{background-color:transparent}.ui.secondary.inverted.menu{background-color:transparent}.ui.secondary.pointing.menu{margin-left:0;margin-right:0;border-bottom:2px solid rgba(34,36,38,.15)}.ui.secondary.pointing.menu .item{border-bottom-color:transparent;border-bottom-style:solid;border-radius:0;-ms-flex-item-align:end;align-self:flex-end;margin:0 0 -2px;padding:.85714286em 1.14285714em;border-bottom-width:2px;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.secondary.pointing.menu .header.item{color:rgba(0,0,0,.85)!important}.ui.secondary.pointing.menu .text.item{-webkit-box-shadow:none!important;box-shadow:none!important}.ui.secondary.pointing.menu .item:after{display:none}.ui.secondary.pointing.menu .dropdown.item:hover,.ui.secondary.pointing.menu .link.item:hover,.ui.secondary.pointing.menu a.item:hover{background-color:transparent;color:rgba(0,0,0,.87)}.ui.secondary.pointing.menu .dropdown.item:active,.ui.secondary.pointing.menu .link.item:active,.ui.secondary.pointing.menu a.item:active{background-color:transparent;border-color:rgba(34,36,38,.15)}.ui.secondary.pointing.menu .active.item{background-color:transparent;-webkit-box-shadow:none;box-shadow:none;border-color:#1b1c1d;font-weight:700;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.item:hover{border-color:#1b1c1d;color:rgba(0,0,0,.95)}.ui.secondary.pointing.menu .active.dropdown.item{border-color:transparent}.ui.secondary.vertical.pointing.menu{border-bottom-width:0;border-right-width:2px;border-right-style:solid;border-right-color:rgba(34,36,38,.15)}.ui.secondary.vertical.pointing.menu .item{border-bottom:none;border-right-style:solid;border-right-color:transparent;border-radius:0!important;margin:0 -2px 0 0;border-right-width:2px}.ui.secondary.vertical.pointing.menu .active.item{border-color:#1b1c1d}.ui.secondary.inverted.pointing.menu{border-color:rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu{border-width:2px;border-color:rgba(34,36,38,.15)}.ui.secondary.inverted.pointing.menu .item{color:rgba(255,255,255,.9)}.ui.secondary.inverted.pointing.menu .header.item{color:#fff!important}.ui.secondary.inverted.pointing.menu .link.item:hover,.ui.secondary.inverted.pointing.menu a.item:hover{color:rgba(0,0,0,.95)}.ui.secondary.inverted.pointing.menu .active.item{border-color:#fff;color:#fff}.ui.text.menu{background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;margin:1em -.5em}.ui.text.menu .item{border-radius:0;-webkit-box-shadow:none;box-shadow:none;-ms-flex-item-align:center;align-self:center;margin:0 0;padding:.35714286em .5em;font-weight:400;color:rgba(0,0,0,.6);-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.text.menu .item:before,.ui.text.menu .menu .item:before{display:none!important}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(0,0,0,.85);font-size:.92857143em;text-transform:uppercase;font-weight:700}.ui.text.menu .item>img:not(.ui){margin:0}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1em 0}.ui.vertical.text.menu:first-child{margin-top:0}.ui.vertical.text.menu:last-child{margin-bottom:0}.ui.vertical.text.menu .item{margin:.57142857em 0;padding-left:0;padding-right:0}.ui.vertical.text.menu .item>i.icon{float:none;margin:0 .35714286em 0 0}.ui.vertical.text.menu .header.item{margin:.57142857em 0 .71428571em}.ui.vertical.text.menu .item:not(.dropdown)>.menu{margin:0}.ui.vertical.text.menu .item:not(.dropdown)>.menu>.item{margin:0;padding:.5em 0}.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.pointing.menu .active.item:after{-webkit-box-shadow:none;box-shadow:none}.ui.text.attached.menu{-webkit-box-shadow:none;box-shadow:none}.ui.inverted.text.menu,.ui.inverted.text.menu .active.item,.ui.inverted.text.menu .item,.ui.inverted.text.menu .item:hover{background-color:transparent!important}.ui.fluid.text.menu{margin-left:0;margin-right:0}.ui.vertical.icon.menu{display:inline-block;width:auto}.ui.icon.menu .item{height:auto;text-align:center;color:#1b1c1d}.ui.icon.menu .item>.icon:not(.dropdown){margin:0;opacity:1}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item>.icon{width:auto;margin:0 auto}.ui.vertical.icon.menu .item>.icon:not(.dropdown){display:block;opacity:1;margin:0 auto;float:none}.ui.inverted.icon.menu .item{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .item{min-width:6em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.labeled.icon.menu .item>.icon:not(.dropdown){height:1em;display:block;font-size:1.71428571em!important;margin:0 auto .5rem!important}.ui.fluid.labeled.icon.menu>.item{min-width:0}@media only screen and (max-width:767px){.ui.stackable.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.stackable.menu .item{width:100%!important}.ui.stackable.menu .item:before{position:absolute;content:'';top:auto;bottom:0;left:0;width:100%;height:1px;background:rgba(34,36,38,.1)}.ui.stackable.menu .left.item,.ui.stackable.menu .left.menu{margin-right:0!important}.ui.stackable.menu .right.item,.ui.stackable.menu .right.menu{margin-left:0!important}.ui.stackable.menu .left.menu,.ui.stackable.menu .right.menu{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#db2828!important;color:#db2828!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#f2711c!important;color:#f2711c!important}.ui.menu .yellow.active.item,.ui.yellow.menu .active.item{border-color:#fbbd08!important;color:#fbbd08!important}.ui.menu .olive.active.item,.ui.olive.menu .active.item{border-color:#b5cc18!important;color:#b5cc18!important}.ui.green.menu .active.item,.ui.menu .green.active.item{border-color:#21ba45!important;color:#21ba45!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00b5ad!important;color:#00b5ad!important}.ui.blue.menu .active.item,.ui.menu .blue.active.item{border-color:#2185d0!important;color:#2185d0!important}.ui.menu .violet.active.item,.ui.violet.menu .active.item{border-color:#6435c9!important;color:#6435c9!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#a333c8!important;color:#a333c8!important}.ui.menu .pink.active.item,.ui.pink.menu .active.item{border-color:#e03997!important;color:#e03997!important}.ui.brown.menu .active.item,.ui.menu .brown.active.item{border-color:#a5673f!important;color:#a5673f!important}.ui.grey.menu .active.item,.ui.menu .grey.active.item{border-color:#767676!important;color:#767676!important}.ui.inverted.menu{border:0 solid transparent;background:#1b1c1d;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a:not(.ui){background:0 0;color:rgba(255,255,255,.9)}.ui.inverted.menu .item.menu{background:0 0}.ui.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .item:before{background:rgba(255,255,255,.08)}.ui.vertical.inverted.menu .menu .item,.ui.vertical.inverted.menu .menu .item a:not(.ui){color:rgba(255,255,255,.5)}.ui.inverted.menu .header.item{margin:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover{color:rgba(225,225,225,.3)}.ui.inverted.menu .dropdown.item:hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.link.inverted.menu .item:hover{background:rgba(255,255,255,.08);color:#fff}.ui.vertical.inverted.menu .item .menu .link.item:hover,.ui.vertical.inverted.menu .item .menu a.item:hover{background:0 0;color:#fff}.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background:rgba(255,255,255,.08);color:#fff}.ui.inverted.menu .active.item{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.vertical.menu .item .menu .active.item{background:0 0;color:#fff}.ui.inverted.pointing.menu .active.item:after{background:#3d3e3f!important;margin:0!important;-webkit-box-shadow:none!important;box-shadow:none!important;border:none!important}.ui.inverted.menu .active.item:hover{background:rgba(255,255,255,.15);color:#fff!important}.ui.inverted.pointing.menu .active.item:hover:after{background:#3d3e3f!important}.ui.floated.menu{float:left;margin:0 .5rem 0 0}.ui.floated.menu .item:last-child:before{display:none}.ui.right.floated.menu{float:right;margin:0 0 0 .5rem}.ui.inverted.menu .red.active.item,.ui.inverted.red.menu{background-color:#db2828}.ui.inverted.red.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.red.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .orange.active.item,.ui.inverted.orange.menu{background-color:#f2711c}.ui.inverted.orange.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.orange.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .yellow.active.item,.ui.inverted.yellow.menu{background-color:#fbbd08}.ui.inverted.yellow.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.yellow.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .olive.active.item,.ui.inverted.olive.menu{background-color:#b5cc18}.ui.inverted.olive.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.olive.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.green.menu,.ui.inverted.menu .green.active.item{background-color:#21ba45}.ui.inverted.green.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.green.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .teal.active.item,.ui.inverted.teal.menu{background-color:#00b5ad}.ui.inverted.teal.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.teal.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.blue.menu,.ui.inverted.menu .blue.active.item{background-color:#2185d0}.ui.inverted.blue.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.blue.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .violet.active.item,.ui.inverted.violet.menu{background-color:#6435c9}.ui.inverted.violet.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.violet.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .purple.active.item,.ui.inverted.purple.menu{background-color:#a333c8}.ui.inverted.purple.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.purple.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.menu .pink.active.item,.ui.inverted.pink.menu{background-color:#e03997}.ui.inverted.pink.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.pink.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.brown.menu,.ui.inverted.menu .brown.active.item{background-color:#a5673f}.ui.inverted.brown.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.brown.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.inverted.grey.menu,.ui.inverted.menu .grey.active.item{background-color:#767676}.ui.inverted.grey.menu .item:before{background-color:rgba(34,36,38,.1)}.ui.inverted.grey.menu .active.item{background-color:rgba(0,0,0,.1)!important}.ui.fitted.menu .item,.ui.fitted.menu .item .menu .item,.ui.menu .fitted.item{padding:0}.ui.horizontally.fitted.menu .item,.ui.horizontally.fitted.menu .item .menu .item,.ui.menu .horizontally.fitted.item{padding-top:.92857143em;padding-bottom:.92857143em}.ui.menu .vertically.fitted.item,.ui.vertically.fitted.menu .item,.ui.vertically.fitted.menu .item .menu .item{padding-left:1.14285714em;padding-right:1.14285714em}.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item:before,.ui.menu .borderless.item:before{background:0 0!important}.ui.compact.menu{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:inline-block}.ui.compact.menu .item:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.compact.menu .item:last-child:before{display:none}.ui.compact.vertical.menu{width:auto!important}.ui.compact.vertical.menu .item:last-child::before{display:block}.ui.menu.fluid,.ui.vertical.menu.fluid{width:100%!important}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.attached.item.menu{margin:0 -1px!important}.ui.item.menu .item:last-child:before{display:none}.ui.menu.two.item .item{width:50%}.ui.menu.three.item .item{width:33.333%}.ui.menu.four.item .item{width:25%}.ui.menu.five.item .item{width:20%}.ui.menu.six.item .item{width:16.666%}.ui.menu.seven.item .item{width:14.285%}.ui.menu.eight.item .item{width:12.5%}.ui.menu.nine.item .item{width:11.11%}.ui.menu.ten.item .item{width:10%}.ui.menu.eleven.item .item{width:9.09%}.ui.menu.twelve.item .item{width:8.333%}.ui.menu.fixed{position:fixed;z-index:101;margin:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{border-radius:0!important}.ui.fixed.menu,.ui[class*="top fixed"].menu{top:0;left:0;right:auto;bottom:auto}.ui[class*="top fixed"].menu{border-top:none;border-left:none;border-right:none}.ui[class*="right fixed"].menu{border-top:none;border-bottom:none;border-right:none;top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui[class*="bottom fixed"].menu{border-bottom:none;border-left:none;border-right:none;bottom:0;left:0;top:auto;right:auto}.ui[class*="left fixed"].menu{border-top:none;border-bottom:none;border-left:none;top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.fixed.menu+.ui.grid{padding-top:2.75rem}.ui.pointing.menu .item:after{visibility:hidden;position:absolute;content:'';top:100%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);background:0 0;margin:.5px 0 0;width:.57142857em;height:.57142857em;border:none;border-bottom:1px solid #d4d4d5;border-right:1px solid #d4d4d5;z-index:2;-webkit-transition:background .1s ease;transition:background .1s ease}.ui.vertical.pointing.menu .item:after{position:absolute;top:50%;right:0;bottom:auto;left:auto;-webkit-transform:translateX(50%) translateY(-50%) rotate(45deg);transform:translateX(50%) translateY(-50%) rotate(45deg);margin:0 -.5px 0 0;border:none;border-top:1px solid #d4d4d5;border-right:1px solid #d4d4d5}.ui.pointing.menu .active.item:after{visibility:visible}.ui.pointing.menu .active.dropdown.item:after{visibility:hidden}.ui.pointing.menu .active.item .menu .active.item:after,.ui.pointing.menu .dropdown.active.item:after{display:none}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:hover:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .active.item:after{background-color:#f2f2f2}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#fff}.ui.attached.menu{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% - (-1px * 2));max-width:calc(100% - (-1px * 2));-webkit-box-shadow:none;box-shadow:none}.ui.attached+.ui.attached.menu:not(.top){border-top:none}.ui[class*="top attached"].menu{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.28571429rem .28571429rem 0 0}.ui.menu[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].menu{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui[class*="bottom attached"].menu:last-child{margin-bottom:0}.ui.top.attached.menu>.item:first-child{border-radius:.28571429rem 0 0 0}.ui.bottom.attached.menu>.item:first-child{border-radius:0 0 0 .28571429rem}.ui.attached.menu:not(.tabular){border:1px solid #d4d4d5}.ui.attached.inverted.menu{border:none}.ui.attached.tabular.menu{margin-left:0;margin-right:0;width:100%}.ui.mini.menu{font-size:.78571429rem}.ui.mini.vertical.menu{width:9rem}.ui.tiny.menu{font-size:.85714286rem}.ui.tiny.vertical.menu{width:11rem}.ui.small.menu{font-size:.92857143rem}.ui.small.vertical.menu{width:13rem}.ui.menu{font-size:1rem}.ui.vertical.menu{width:15rem}.ui.large.menu{font-size:1.07142857rem}.ui.large.vertical.menu{width:18rem}.ui.huge.menu{font-size:1.21428571rem}.ui.huge.vertical.menu{width:22rem}.ui.big.menu{font-size:1.14285714rem}.ui.big.vertical.menu{width:20rem}.ui.massive.menu{font-size:1.28571429rem}.ui.massive.vertical.menu{width:25rem} \ No newline at end of file diff --git a/semantic/components/message.css b/semantic/components/message.css new file mode 100644 index 0000000..d91ce17 --- /dev/null +++ b/semantic/components/message.css @@ -0,0 +1,505 @@ +/*! + * # Semantic UI 2.4.1 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Message +*******************************/ + +.ui.message { + position: relative; + min-height: 1em; + margin: 1em 0em; + background: #F8F8F9; + padding: 1em 1.5em; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease; + border-radius: 0.28571429rem; + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} + +/*-------------- + Content +---------------*/ + + +/* Header */ +.ui.message .header { + display: block; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + margin: -0.14285714em 0em 0rem 0em; +} + +/* Default font size */ +.ui.message .header:not(.ui) { + font-size: 1.14285714em; +} + +/* Paragraph */ +.ui.message p { + opacity: 0.85; + margin: 0.75em 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: 0.25em; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0em; + opacity: 0.85; + list-style-position: inside; + margin: 0.5em 0em 0em; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0em; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0em; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0em 0em 0.3em 1em; + padding: 0em; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0em; +} + +/* Icon */ +.ui.message > .icon { + margin-right: 0.6em; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0em; + top: 0.78575em; + right: 0.5em; + opacity: 0.7; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} + + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0px -1px; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Visible +---------------*/ + +.ui.visible.visible.visible.visible.message { + display: block; +} +.ui.icon.visible.visible.visible.visible.message { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} +.ui.compact.icon.message { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: -1px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset; + box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset; + margin-left: -1px; + margin-right: -1px; +} +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: -1px; + border-radius: 0em; +} +.ui.bottom.attached.message { + margin-top: -1px; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + -webkit-box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0em 0em 0em 1px rgba(34, 36, 38, 0.15) inset, 0px 1px 2px 0 rgba(34, 36, 38, 0.15); +} +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: 1em; +} +.ui.attached.icon.message { + width: auto; +} + +/*-------------- + Icon +---------------*/ + +.ui.icon.message { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + line-height: 1; + vertical-align: middle; + font-size: 3em; + opacity: 0.8; +} +.ui.icon.message > .content { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + vertical-align: middle; +} +.ui.icon.message .icon:not(.close) + .content { + padding-left: 0rem; +} +.ui.icon.message .circular.icon { + width: 1em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.message { + -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} + +/*-------------- + Colors +---------------*/ + +.ui.black.message { + background-color: #1B1C1D; + color: rgba(255, 255, 255, 0.9); +} + +/*-------------- + Types +---------------*/ + + +/* Positive */ +.ui.positive.message { + background-color: #FCFFF5; + color: #2C662D; +} +.ui.positive.message, +.ui.attached.positive.message { + -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.positive.message .header { + color: #1A531B; +} + +/* Negative */ +.ui.negative.message { + background-color: #FFF6F6; + color: #9F3A38; +} +.ui.negative.message, +.ui.attached.negative.message { + -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.negative.message .header { + color: #912D2B; +} + +/* Info */ +.ui.info.message { + background-color: #F8FFFF; + color: #276F86; +} +.ui.info.message, +.ui.attached.info.message { + -webkit-box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #A9D5DE inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.info.message .header { + color: #0E566C; +} + +/* Warning */ +.ui.warning.message { + background-color: #FFFAF3; + color: #573A08; +} +.ui.warning.message, +.ui.attached.warning.message { + -webkit-box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #C9BA9B inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.warning.message .header { + color: #794B02; +} + +/* Error */ +.ui.error.message { + background-color: #FFF6F6; + color: #9F3A38; +} +.ui.error.message, +.ui.attached.error.message { + -webkit-box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.error.message .header { + color: #912D2B; +} + +/* Success */ +.ui.success.message { + background-color: #FCFFF5; + color: #2C662D; +} +.ui.success.message, +.ui.attached.success.message { + -webkit-box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.success.message .header { + color: #1A531B; +} + +/* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: #1B1C1D; + color: rgba(255, 255, 255, 0.9); +} +.ui.red.message { + background-color: #FFE8E6; + color: #DB2828; + -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #DB2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.red.message .header { + color: #c82121; +} +.ui.orange.message { + background-color: #FFEDDE; + color: #F2711C; + -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #F2711C inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.orange.message .header { + color: #e7640d; +} +.ui.yellow.message { + background-color: #FFF8DB; + color: #B58105; + -webkit-box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #B58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.yellow.message .header { + color: #9c6f04; +} +.ui.olive.message { + background-color: #FBFDEF; + color: #8ABC1E; + -webkit-box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #8ABC1E inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.olive.message .header { + color: #7aa61a; +} +.ui.green.message { + background-color: #E5F9E7; + color: #1EBC30; + -webkit-box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #1EBC30 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.green.message .header { + color: #1aa62a; +} +.ui.teal.message { + background-color: #E1F7F7; + color: #10A3A3; + -webkit-box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #10A3A3 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.teal.message .header { + color: #0e8c8c; +} +.ui.blue.message { + background-color: #DFF0FF; + color: #2185D0; + -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #2185D0 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.blue.message .header { + color: #1e77ba; +} +.ui.violet.message { + background-color: #EAE7FF; + color: #6435C9; + -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #6435C9 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.violet.message .header { + color: #5a30b5; +} +.ui.purple.message { + background-color: #F6E7FF; + color: #A333C8; + -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #A333C8 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.purple.message .header { + color: #922eb4; +} +.ui.pink.message { + background-color: #FFE3FB; + color: #E03997; + -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #E03997 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.pink.message .header { + color: #dd238b; +} +.ui.brown.message { + background-color: #F1E2D3; + color: #A5673F; + -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); + box-shadow: 0px 0px 0px 1px #A5673F inset, 0px 0px 0px 0px rgba(0, 0, 0, 0); +} +.ui.brown.message .header { + color: #935b38; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.message { + font-size: 0.78571429em; +} +.ui.tiny.message { + font-size: 0.85714286em; +} +.ui.small.message { + font-size: 0.92857143em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.14285714em; +} +.ui.big.message { + font-size: 1.28571429em; +} +.ui.huge.message { + font-size: 1.42857143em; +} +.ui.massive.message { + font-size: 1.71428571em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/message.min.css b/semantic/components/message.min.css new file mode 100644 index 0000000..3828a9f --- /dev/null +++ b/semantic/components/message.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.message{position:relative;min-height:1em;margin:1em 0;background:#f8f8f9;padding:1em 1.5em;line-height:1.4285em;color:rgba(0,0,0,.87);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;border-radius:.28571429rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent;box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 0 0 0 transparent}.ui.message:first-child{margin-top:0}.ui.message:last-child{margin-bottom:0}.ui.message .header{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;margin:-.14285714em 0 0 0}.ui.message .header:not(.ui){font-size:1.14285714em}.ui.message p{opacity:.85;margin:.75em 0}.ui.message p:first-child{margin-top:0}.ui.message p:last-child{margin-bottom:0}.ui.message .header+p{margin-top:.25em}.ui.message .list:not(.ui){text-align:left;padding:0;opacity:.85;list-style-position:inside;margin:.5em 0 0}.ui.message .list:not(.ui):first-child{margin-top:0}.ui.message .list:not(.ui):last-child{margin-bottom:0}.ui.message .list:not(.ui) li{position:relative;list-style-type:none;margin:0 0 .3em 1em;padding:0}.ui.message .list:not(.ui) li:before{position:absolute;content:'•';left:-1em;height:100%;vertical-align:baseline}.ui.message .list:not(.ui) li:last-child{margin-bottom:0}.ui.message>.icon{margin-right:.6em}.ui.message>.close.icon{cursor:pointer;position:absolute;margin:0;top:.78575em;right:.5em;opacity:.7;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}.ui.message>.close.icon:hover{opacity:1}.ui.message>:first-child{margin-top:0}.ui.message>:last-child{margin-bottom:0}.ui.dropdown .menu>.message{margin:0 -1px}.ui.visible.visible.visible.visible.message{display:block}.ui.icon.visible.visible.visible.visible.message{display:-webkit-box;display:-ms-flexbox;display:flex}.ui.hidden.hidden.hidden.hidden.message{display:none}.ui.compact.message{display:inline-block}.ui.compact.icon.message{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ui.attached.message{margin-bottom:-1px;border-radius:.28571429rem .28571429rem 0 0;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 0 0 1px rgba(34,36,38,.15) inset;margin-left:-1px;margin-right:-1px}.ui.attached+.ui.attached.message:not(.top):not(.bottom){margin-top:-1px;border-radius:0}.ui.bottom.attached.message{margin-top:-1px;border-radius:0 0 .28571429rem .28571429rem;-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.15) inset,0 1px 2px 0 rgba(34,36,38,.15)}.ui.bottom.attached.message:not(:last-child){margin-bottom:1em}.ui.attached.icon.message{width:auto}.ui.icon.message{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.icon.message>.icon:not(.close){display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;line-height:1;vertical-align:middle;font-size:3em;opacity:.8}.ui.icon.message>.content{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;vertical-align:middle}.ui.icon.message .icon:not(.close)+.content{padding-left:0}.ui.icon.message .circular.icon{width:1em}.ui.floating.message{-webkit-box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 0 0 1px rgba(34,36,38,.22) inset,0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.black.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.positive.message{background-color:#fcfff5;color:#2c662d}.ui.attached.positive.message,.ui.positive.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.positive.message .header{color:#1a531b}.ui.negative.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.negative.message,.ui.negative.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.negative.message .header{color:#912d2b}.ui.info.message{background-color:#f8ffff;color:#276f86}.ui.attached.info.message,.ui.info.message{-webkit-box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a9d5de inset,0 0 0 0 transparent}.ui.info.message .header{color:#0e566c}.ui.warning.message{background-color:#fffaf3;color:#573a08}.ui.attached.warning.message,.ui.warning.message{-webkit-box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #c9ba9b inset,0 0 0 0 transparent}.ui.warning.message .header{color:#794b02}.ui.error.message{background-color:#fff6f6;color:#9f3a38}.ui.attached.error.message,.ui.error.message{-webkit-box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e0b4b4 inset,0 0 0 0 transparent}.ui.error.message .header{color:#912d2b}.ui.success.message{background-color:#fcfff5;color:#2c662d}.ui.attached.success.message,.ui.success.message{-webkit-box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a3c293 inset,0 0 0 0 transparent}.ui.success.message .header{color:#1a531b}.ui.black.message,.ui.inverted.message{background-color:#1b1c1d;color:rgba(255,255,255,.9)}.ui.red.message{background-color:#ffe8e6;color:#db2828;-webkit-box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #db2828 inset,0 0 0 0 transparent}.ui.red.message .header{color:#c82121}.ui.orange.message{background-color:#ffedde;color:#f2711c;-webkit-box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #f2711c inset,0 0 0 0 transparent}.ui.orange.message .header{color:#e7640d}.ui.yellow.message{background-color:#fff8db;color:#b58105;-webkit-box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #b58105 inset,0 0 0 0 transparent}.ui.yellow.message .header{color:#9c6f04}.ui.olive.message{background-color:#fbfdef;color:#8abc1e;-webkit-box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #8abc1e inset,0 0 0 0 transparent}.ui.olive.message .header{color:#7aa61a}.ui.green.message{background-color:#e5f9e7;color:#1ebc30;-webkit-box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #1ebc30 inset,0 0 0 0 transparent}.ui.green.message .header{color:#1aa62a}.ui.teal.message{background-color:#e1f7f7;color:#10a3a3;-webkit-box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #10a3a3 inset,0 0 0 0 transparent}.ui.teal.message .header{color:#0e8c8c}.ui.blue.message{background-color:#dff0ff;color:#2185d0;-webkit-box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #2185d0 inset,0 0 0 0 transparent}.ui.blue.message .header{color:#1e77ba}.ui.violet.message{background-color:#eae7ff;color:#6435c9;-webkit-box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #6435c9 inset,0 0 0 0 transparent}.ui.violet.message .header{color:#5a30b5}.ui.purple.message{background-color:#f6e7ff;color:#a333c8;-webkit-box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a333c8 inset,0 0 0 0 transparent}.ui.purple.message .header{color:#922eb4}.ui.pink.message{background-color:#ffe3fb;color:#e03997;-webkit-box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #e03997 inset,0 0 0 0 transparent}.ui.pink.message .header{color:#dd238b}.ui.brown.message{background-color:#f1e2d3;color:#a5673f;-webkit-box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent;box-shadow:0 0 0 1px #a5673f inset,0 0 0 0 transparent}.ui.brown.message .header{color:#935b38}.ui.mini.message{font-size:.78571429em}.ui.tiny.message{font-size:.85714286em}.ui.small.message{font-size:.92857143em}.ui.message{font-size:1em}.ui.large.message{font-size:1.14285714em}.ui.big.message{font-size:1.28571429em}.ui.huge.message{font-size:1.42857143em}.ui.massive.message{font-size:1.71428571em} \ No newline at end of file diff --git a/semantic/components/modal.css b/semantic/components/modal.css new file mode 100644 index 0000000..f9d8357 --- /dev/null +++ b/semantic/components/modal.css @@ -0,0 +1,619 @@ +/*! + * # Semantic UI 2.4.0 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Modal +*******************************/ + +.ui.modal { + position: absolute; + display: none; + z-index: 1001; + text-align: left; + background: #FFFFFF; + border: none; + -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); + box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); + -webkit-transform-origin: 50% 25%; + transform-origin: 50% 25%; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + border-radius: 0.28571429rem; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + will-change: top, left, margin, transform, opacity; +} +.ui.modal > :first-child:not(.icon), +.ui.modal > .icon:first-child + * { + border-top-left-radius: 0.28571429rem; + border-top-right-radius: 0.28571429rem; +} +.ui.modal > :last-child { + border-bottom-left-radius: 0.28571429rem; + border-bottom-right-radius: 0.28571429rem; +} + + +/******************************* + Content +*******************************/ + + +/*-------------- + Close +---------------*/ + +.ui.modal > .close { + cursor: pointer; + position: absolute; + top: -2.5rem; + right: -2.5rem; + z-index: 1; + opacity: 0.8; + font-size: 1.25em; + color: #FFFFFF; + width: 2.25rem; + height: 2.25rem; + padding: 0.625rem 0rem 0rem 0rem; +} +.ui.modal > .close:hover { + opacity: 1; +} + +/*-------------- + Header +---------------*/ + +.ui.modal > .header { + display: block; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + background: #FFFFFF; + margin: 0em; + padding: 1.25rem 1.5rem; + -webkit-box-shadow: none; + box-shadow: none; + color: rgba(0, 0, 0, 0.85); + border-bottom: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.modal > .header:not(.ui) { + font-size: 1.42857143rem; + line-height: 1.28571429em; + font-weight: bold; +} + +/*-------------- + Content +---------------*/ + +.ui.modal > .content { + display: block; + width: 100%; + font-size: 1em; + line-height: 1.4; + padding: 1.5rem; + background: #FFFFFF; +} +.ui.modal > .image.content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +/* Image */ +.ui.modal > .content > .image { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: ''; + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > [class*="top aligned"] { + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > [class*="middle aligned"] { + -ms-flex-item-align: middle; + align-self: middle; +} +.ui.modal > [class*="stretched"] { + -ms-flex-item-align: stretch; + align-self: stretch; +} + +/* Description */ +.ui.modal > .content > .description { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + min-width: 0px; + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > .content > .icon + .description, +.ui.modal > .content > .image + .description { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + min-width: ''; + width: auto; + padding-left: 2em; +} +/*rtl:ignore*/ +.ui.modal > .content > .image > i.icon { + margin: 0em; + opacity: 1; + width: auto; + line-height: 1; + font-size: 8rem; +} + +/*-------------- + Actions +---------------*/ + +.ui.modal > .actions { + background: #F9FAFB; + padding: 1rem 1rem; + border-top: 1px solid rgba(34, 36, 38, 0.15); + text-align: right; +} +.ui.modal .actions > .button { + margin-left: 0.75em; +} + +/*------------------- + Responsive +--------------------*/ + + +/* Modal Width */ +@media only screen and (max-width: 767px) { + .ui.modal { + width: 95%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 768px) { + .ui.modal { + width: 88%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 992px) { + .ui.modal { + width: 850px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1200px) { + .ui.modal { + width: 900px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1920px) { + .ui.modal { + width: 950px; + margin: 0em 0em 0em 0em; + } +} + +/* Tablet and Mobile */ +@media only screen and (max-width: 991px) { + .ui.modal > .header { + padding-right: 2.25rem; + } + .ui.modal > .close { + top: 1.0535rem; + right: 1rem; + color: rgba(0, 0, 0, 0.87); + } +} + +/* Mobile */ +@media only screen and (max-width: 767px) { + .ui.modal > .header { + padding: 0.75rem 1rem !important; + padding-right: 2.25rem !important; + } + .ui.modal > .content { + display: block; + padding: 1rem !important; + } + .ui.modal > .close { + top: 0.5rem !important; + right: 0.5rem !important; + } + /*rtl:ignore*/ + .ui.modal .image.content { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .ui.modal .content > .image { + display: block; + max-width: 100%; + margin: 0em auto !important; + text-align: center; + padding: 0rem 0rem 1rem !important; + } + .ui.modal > .content > .image > i.icon { + font-size: 5rem; + text-align: center; + } + /*rtl:ignore*/ + .ui.modal .content > .description { + display: block; + width: 100% !important; + margin: 0em !important; + padding: 1rem 0rem !important; + -webkit-box-shadow: none; + box-shadow: none; + } + +/* Let Buttons Stack */ + .ui.modal > .actions { + padding: 1rem 1rem 0rem !important; + } + .ui.modal .actions > .buttons, + .ui.modal .actions > .button { + margin-bottom: 1rem; + } +} + +/*-------------- + Coupling +---------------*/ + +.ui.inverted.dimmer > .ui.modal { + -webkit-box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); + box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); +} + + +/******************************* + Types +*******************************/ + +.ui.basic.modal { + background-color: transparent; + border: none; + border-radius: 0em; + -webkit-box-shadow: none !important; + box-shadow: none !important; + color: #FFFFFF; +} +.ui.basic.modal > .header, +.ui.basic.modal > .content, +.ui.basic.modal > .actions { + background-color: transparent; +} +.ui.basic.modal > .header { + color: #FFFFFF; +} +.ui.basic.modal > .close { + top: 1rem; + right: 1.5rem; +} +.ui.inverted.dimmer > .basic.modal { + color: rgba(0, 0, 0, 0.87); +} +.ui.inverted.dimmer > .ui.basic.modal > .header { + color: rgba(0, 0, 0, 0.85); +} + +/* Resort to margin positioning if legacy */ +.ui.legacy.modal, +.ui.legacy.page.dimmer > .ui.modal { + top: 50%; + left: 50%; +} +.ui.legacy.page.dimmer > .ui.scrolling.modal, +.ui.page.dimmer > .ui.scrolling.legacy.modal, +.ui.top.aligned.legacy.page.dimmer > .ui.modal, +.ui.top.aligned.dimmer > .ui.legacy.modal { + top: auto; +} + +/* Tablet and Mobile */ +@media only screen and (max-width: 991px) { + .ui.basic.modal > .close { + color: #FFFFFF; + } +} + + +/******************************* + States +*******************************/ + +.ui.loading.modal { + display: block; + visibility: hidden; + z-index: -1; +} +.ui.active.modal { + display: block; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Top Aligned +---------------*/ + + +/* Top Aligned Modal */ +.modals.dimmer[class*="top aligned"] .modal { + margin: 5vh auto; +} +@media only screen and (max-width: 767px) { + .modals.dimmer[class*="top aligned"] .modal { + margin: 1rem auto; + } +} + +/* Legacy Top Aligned */ +.legacy.modals.dimmer[class*="top aligned"] { + padding-top: 5vh; +} +@media only screen and (max-width: 767px) { + .legacy.modals.dimmer[class*="top aligned"] { + padding-top: 1rem; + } +} + +/*-------------- + Scrolling +---------------*/ + + +/* Scrolling Dimmer */ +.scrolling.dimmable.dimmed { + overflow: hidden; +} +.scrolling.dimmable > .dimmer { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.scrolling.dimmable.dimmed > .dimmer { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.scrolling.dimmable > .dimmer { + position: fixed; +} +.modals.dimmer .ui.scrolling.modal { + margin: 1rem auto; +} + +/* Undetached Scrolling */ +.scrolling.undetached.dimmable.dimmed { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.scrolling.undetached.dimmable.dimmed > .dimmer { + overflow: hidden; +} +.scrolling.undetached.dimmable .ui.scrolling.modal { + position: absolute; + left: 50%; + margin-top: 1rem !important; +} + +/* Scrolling Content */ +.ui.modal .scrolling.content { + max-height: calc(70vh); + overflow: auto; +} + +/*-------------- + Full Screen +---------------*/ + +.ui.fullscreen.modal { + width: 95% !important; + left: 0em !important; + margin: 1em auto; +} +.ui.fullscreen.scrolling.modal { + left: 0em !important; +} +.ui.fullscreen.modal > .header { + padding-right: 2.25rem; +} +.ui.fullscreen.modal > .close { + top: 1.0535rem; + right: 1rem; + color: rgba(0, 0, 0, 0.87); +} + +/*-------------- + Size +---------------*/ + +.ui.modal { + font-size: 1rem; +} + +/* Mini */ +.ui.mini.modal > .header:not(.ui) { + font-size: 1.3em; +} + +/* Mini Modal Width */ +@media only screen and (max-width: 767px) { + .ui.mini.modal { + width: 95%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 768px) { + .ui.mini.modal { + width: 35.2%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 992px) { + .ui.mini.modal { + width: 340px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1200px) { + .ui.mini.modal { + width: 360px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1920px) { + .ui.mini.modal { + width: 380px; + margin: 0em 0em 0em 0em; + } +} + +/* mini */ +.ui.small.modal > .header:not(.ui) { + font-size: 1.3em; +} + +/* Tiny Modal Width */ +@media only screen and (max-width: 767px) { + .ui.tiny.modal { + width: 95%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 768px) { + .ui.tiny.modal { + width: 52.8%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 992px) { + .ui.tiny.modal { + width: 510px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1200px) { + .ui.tiny.modal { + width: 540px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1920px) { + .ui.tiny.modal { + width: 570px; + margin: 0em 0em 0em 0em; + } +} + +/* Small */ +.ui.small.modal > .header:not(.ui) { + font-size: 1.3em; +} + +/* Small Modal Width */ +@media only screen and (max-width: 767px) { + .ui.small.modal { + width: 95%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 768px) { + .ui.small.modal { + width: 70.4%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 992px) { + .ui.small.modal { + width: 680px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1200px) { + .ui.small.modal { + width: 720px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1920px) { + .ui.small.modal { + width: 760px; + margin: 0em 0em 0em 0em; + } +} + +/* Large Modal Width */ +.ui.large.modal > .header { + font-size: 1.6em; +} +@media only screen and (max-width: 767px) { + .ui.large.modal { + width: 95%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 768px) { + .ui.large.modal { + width: 88%; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 992px) { + .ui.large.modal { + width: 1020px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1200px) { + .ui.large.modal { + width: 1080px; + margin: 0em 0em 0em 0em; + } +} +@media only screen and (min-width: 1920px) { + .ui.large.modal { + width: 1140px; + margin: 0em 0em 0em 0em; + } +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/modal.js b/semantic/components/modal.js new file mode 100644 index 0000000..febc7cd --- /dev/null +++ b/semantic/components/modal.js @@ -0,0 +1,1034 @@ +/*! + * # Semantic UI 2.4.1 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.modal = function(parameters) { + var + $allModules = $(this), + $window = $(window), + $document = $(document), + $body = $('body'), + + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.modal.settings, parameters) + : $.extend({}, $.fn.modal.settings), + + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $context = $(settings.context), + $close = $module.find(selector.close), + + $allModals, + $otherModals, + $focusedElement, + $dimmable, + $dimmer, + + element = this, + instance = $module.data(moduleNamespace), + + ignoreRepeatedEvents = false, + + elementEventNamespace, + id, + observer, + module + ; + module = { + + initialize: function() { + module.verbose('Initializing dimmer', $context); + + module.create.id(); + module.create.dimmer(); + module.refreshModals(); + + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of modal'); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + create: { + dimmer: function() { + var + defaultSettings = { + debug : settings.debug, + variation : settings.centered + ? false + : 'top aligned', + dimmerName : 'modals' + }, + dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) + ; + if($.fn.dimmer === undefined) { + module.error(error.dimmer); + return; + } + module.debug('Creating dimmer'); + $dimmable = $context.dimmer(dimmerSettings); + if(settings.detachable) { + module.verbose('Modal is detachable, moving content into dimmer'); + $dimmable.dimmer('add content', $module); + } + else { + module.set.undetached(); + } + $dimmer = $dimmable.dimmer('get dimmer'); + }, + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2, 8); + elementEventNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + } + }, + + destroy: function() { + module.verbose('Destroying previous modal'); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + $window.off(elementEventNamespace); + $dimmer.off(elementEventNamespace); + $close.off(eventNamespace); + $context.dimmer('destroy'); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, refreshing'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + refresh: function() { + module.remove.scrolling(); + module.cacheSizes(); + if(!module.can.useFlex()) { + module.set.modalOffset(); + } + module.set.screenHeight(); + module.set.type(); + }, + + refreshModals: function() { + $otherModals = $module.siblings(selector.modal); + $allModals = $otherModals.add($module); + }, + + attachEvents: function(selector, event) { + var + $toggle = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($toggle.length > 0) { + module.debug('Attaching modal events to element', selector, event); + $toggle + .off(eventNamespace) + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound, selector); + } + }, + + bind: { + events: function() { + module.verbose('Attaching events'); + $module + .on('click' + eventNamespace, selector.close, module.event.close) + .on('click' + eventNamespace, selector.approve, module.event.approve) + .on('click' + eventNamespace, selector.deny, module.event.deny) + ; + $window + .on('resize' + elementEventNamespace, module.event.resize) + ; + }, + scrollLock: function() { + // touch events default to passive, due to changes in chrome to optimize mobile perf + $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false }); + } + }, + + unbind: { + scrollLock: function() { + $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false }); + } + }, + + get: { + id: function() { + return (Math.random().toString(16) + '000000000').substr(2, 8); + } + }, + + event: { + approve: function() { + if(ignoreRepeatedEvents || settings.onApprove.call(element, $(this)) === false) { + module.verbose('Approve callback returned false cancelling hide'); + return; + } + ignoreRepeatedEvents = true; + module.hide(function() { + ignoreRepeatedEvents = false; + }); + }, + preventScroll: function(event) { + event.preventDefault(); + }, + deny: function() { + if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) { + module.verbose('Deny callback returned false cancelling hide'); + return; + } + ignoreRepeatedEvents = true; + module.hide(function() { + ignoreRepeatedEvents = false; + }); + }, + close: function() { + module.hide(); + }, + click: function(event) { + if(!settings.closable) { + module.verbose('Dimmer clicked but closable setting is disabled'); + return; + } + var + $target = $(event.target), + isInModal = ($target.closest(selector.modal).length > 0), + isInDOM = $.contains(document.documentElement, event.target) + ; + if(!isInModal && isInDOM && module.is.active()) { + module.debug('Dimmer clicked, hiding all modals'); + module.remove.clickaway(); + if(settings.allowMultiple) { + module.hide(); + } + else { + module.hideAll(); + } + } + }, + debounce: function(method, delay) { + clearTimeout(module.timer); + module.timer = setTimeout(method, delay); + }, + keyboard: function(event) { + var + keyCode = event.which, + escapeKey = 27 + ; + if(keyCode == escapeKey) { + if(settings.closable) { + module.debug('Escape key pressed hiding modal'); + module.hide(); + } + else { + module.debug('Escape key pressed, but closable is set to false'); + } + event.preventDefault(); + } + }, + resize: function() { + if( $dimmable.dimmer('is active') && ( module.is.animating() || module.is.active() ) ) { + requestAnimationFrame(module.refresh); + } + } + }, + + toggle: function() { + if( module.is.active() || module.is.animating() ) { + module.hide(); + } + else { + module.show(); + } + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.refreshModals(); + module.set.dimmerSettings(); + module.set.dimmerStyles(); + + module.showModal(callback); + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.refreshModals(); + module.hideModal(callback); + }, + + showModal: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.animating() || !module.is.active() ) { + module.showDimmer(); + module.cacheSizes(); + if(module.can.useFlex()) { + module.remove.legacy(); + } + else { + module.set.legacy(); + module.set.modalOffset(); + module.debug('Using non-flex legacy modal positioning.'); + } + module.set.screenHeight(); + module.set.type(); + module.set.clickaway(); + + if( !settings.allowMultiple && module.others.active() ) { + module.hideOthers(module.showModal); + } + else { + if(settings.allowMultiple && settings.detachable) { + $module.detach().appendTo($dimmer); + } + settings.onShow.call(element); + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.debug('Showing modal with css animations'); + $module + .transition({ + debug : settings.debug, + animation : settings.transition + ' in', + queue : settings.queue, + duration : settings.duration, + useFailSafe : true, + onComplete : function() { + settings.onVisible.apply(element); + if(settings.keyboardShortcuts) { + module.add.keyboardShortcuts(); + } + module.save.focus(); + module.set.active(); + if(settings.autofocus) { + module.set.autofocus(); + } + callback(); + } + }) + ; + } + else { + module.error(error.noTransition); + } + } + } + else { + module.debug('Modal is already visible'); + } + }, + + hideModal: function(callback, keepDimmed) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Hiding modal'); + if(settings.onHide.call(element, $(this)) === false) { + module.verbose('Hide callback returned false cancelling hide'); + return; + } + + if( module.is.animating() || module.is.active() ) { + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.remove.active(); + $module + .transition({ + debug : settings.debug, + animation : settings.transition + ' out', + queue : settings.queue, + duration : settings.duration, + useFailSafe : true, + onStart : function() { + if(!module.others.active() && !keepDimmed) { + module.hideDimmer(); + } + if(settings.keyboardShortcuts) { + module.remove.keyboardShortcuts(); + } + }, + onComplete : function() { + settings.onHidden.call(element); + module.remove.dimmerStyles(); + module.restore.focus(); + callback(); + } + }) + ; + } + else { + module.error(error.noTransition); + } + } + }, + + showDimmer: function() { + if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) { + module.debug('Showing dimmer'); + $dimmable.dimmer('show'); + } + else { + module.debug('Dimmer already visible'); + } + }, + + hideDimmer: function() { + if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) { + module.unbind.scrollLock(); + $dimmable.dimmer('hide', function() { + module.remove.clickaway(); + module.remove.screenHeight(); + }); + } + else { + module.debug('Dimmer is not visible cannot hide'); + return; + } + }, + + hideAll: function(callback) { + var + $visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( $visibleModals.length > 0 ) { + module.debug('Hiding all visible modals'); + module.hideDimmer(); + $visibleModals + .modal('hide modal', callback) + ; + } + }, + + hideOthers: function(callback) { + var + $visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( $visibleModals.length > 0 ) { + module.debug('Hiding other modals', $otherModals); + $visibleModals + .modal('hide modal', callback, true) + ; + } + }, + + others: { + active: function() { + return ($otherModals.filter('.' + className.active).length > 0); + }, + animating: function() { + return ($otherModals.filter('.' + className.animating).length > 0); + } + }, + + + add: { + keyboardShortcuts: function() { + module.verbose('Adding keyboard shortcuts'); + $document + .on('keyup' + eventNamespace, module.event.keyboard) + ; + } + }, + + save: { + focus: function() { + var + $activeElement = $(document.activeElement), + inCurrentModal = $activeElement.closest($module).length > 0 + ; + if(!inCurrentModal) { + $focusedElement = $(document.activeElement).blur(); + } + } + }, + + restore: { + focus: function() { + if($focusedElement && $focusedElement.length > 0) { + $focusedElement.focus(); + } + } + }, + + remove: { + active: function() { + $module.removeClass(className.active); + }, + legacy: function() { + $module.removeClass(className.legacy); + }, + clickaway: function() { + $dimmer + .off('click' + elementEventNamespace) + ; + }, + dimmerStyles: function() { + $dimmer.removeClass(className.inverted); + $dimmable.removeClass(className.blurring); + }, + bodyStyle: function() { + if($body.attr('style') === '') { + module.verbose('Removing style attribute'); + $body.removeAttr('style'); + } + }, + screenHeight: function() { + module.debug('Removing page height'); + $body + .css('height', '') + ; + }, + keyboardShortcuts: function() { + module.verbose('Removing keyboard shortcuts'); + $document + .off('keyup' + eventNamespace) + ; + }, + scrolling: function() { + $dimmable.removeClass(className.scrolling); + $module.removeClass(className.scrolling); + } + }, + + cacheSizes: function() { + $module.addClass(className.loading); + var + scrollHeight = $module.prop('scrollHeight'), + modalWidth = $module.outerWidth(), + modalHeight = $module.outerHeight() + ; + if(module.cache === undefined || modalHeight !== 0) { + module.cache = { + pageHeight : $(document).outerHeight(), + width : modalWidth, + height : modalHeight + settings.offset, + scrollHeight : scrollHeight + settings.offset, + contextHeight : (settings.context == 'body') + ? $(window).height() + : $dimmable.height(), + }; + module.cache.topOffset = -(module.cache.height / 2); + } + $module.removeClass(className.loading); + module.debug('Caching modal and container sizes', module.cache); + }, + + can: { + useFlex: function() { + return (settings.useFlex == 'auto') + ? settings.detachable && !module.is.ie() + : settings.useFlex + ; + }, + fit: function() { + var + contextHeight = module.cache.contextHeight, + verticalCenter = module.cache.contextHeight / 2, + topOffset = module.cache.topOffset, + scrollHeight = module.cache.scrollHeight, + height = module.cache.height, + paddingHeight = settings.padding, + startPosition = (verticalCenter + topOffset) + ; + return (scrollHeight > height) + ? (startPosition + scrollHeight + paddingHeight < contextHeight) + : (height + (paddingHeight * 2) < contextHeight) + ; + } + }, + + is: { + active: function() { + return $module.hasClass(className.active); + }, + ie: function() { + var + isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window), + isIE = ('ActiveXObject' in window) + ; + return (isIE11 || isIE); + }, + animating: function() { + return $module.transition('is supported') + ? $module.transition('is animating') + : $module.is(':visible') + ; + }, + scrolling: function() { + return $dimmable.hasClass(className.scrolling); + }, + modernBrowser: function() { + // appName for IE11 reports 'Netscape' can no longer use + return !(window.ActiveXObject || 'ActiveXObject' in window); + } + }, + + set: { + autofocus: function() { + var + $inputs = $module.find('[tabindex], :input').filter(':visible'), + $autofocus = $inputs.filter('[autofocus]'), + $input = ($autofocus.length > 0) + ? $autofocus.first() + : $inputs.first() + ; + if($input.length > 0) { + $input.focus(); + } + }, + clickaway: function() { + $dimmer + .on('click' + elementEventNamespace, module.event.click) + ; + }, + dimmerSettings: function() { + if($.fn.dimmer === undefined) { + module.error(error.dimmer); + return; + } + var + defaultSettings = { + debug : settings.debug, + dimmerName : 'modals', + closable : 'auto', + useFlex : module.can.useFlex(), + variation : settings.centered + ? false + : 'top aligned', + duration : { + show : settings.duration, + hide : settings.duration + } + }, + dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) + ; + if(settings.inverted) { + dimmerSettings.variation = (dimmerSettings.variation !== undefined) + ? dimmerSettings.variation + ' inverted' + : 'inverted' + ; + } + $context.dimmer('setting', dimmerSettings); + }, + dimmerStyles: function() { + if(settings.inverted) { + $dimmer.addClass(className.inverted); + } + else { + $dimmer.removeClass(className.inverted); + } + if(settings.blurring) { + $dimmable.addClass(className.blurring); + } + else { + $dimmable.removeClass(className.blurring); + } + }, + modalOffset: function() { + var + width = module.cache.width, + height = module.cache.height + ; + $module + .css({ + marginTop: (settings.centered && module.can.fit()) + ? -(height / 2) + : 0, + marginLeft: -(width / 2) + }) + ; + module.verbose('Setting modal offset for legacy mode'); + }, + screenHeight: function() { + if( module.can.fit() ) { + $body.css('height', ''); + } + else { + module.debug('Modal is taller than page content, resizing page height'); + $body + .css('height', module.cache.height + (settings.padding * 2) ) + ; + } + }, + active: function() { + $module.addClass(className.active); + }, + scrolling: function() { + $dimmable.addClass(className.scrolling); + $module.addClass(className.scrolling); + module.unbind.scrollLock(); + }, + legacy: function() { + $module.addClass(className.legacy); + }, + type: function() { + if(module.can.fit()) { + module.verbose('Modal fits on screen'); + if(!module.others.active() && !module.others.animating()) { + module.remove.scrolling(); + module.bind.scrollLock(); + } + } + else { + module.verbose('Modal cannot fit on screen setting to scrolling'); + module.set.scrolling(); + } + }, + undetached: function() { + $dimmable.addClass(className.undetached); + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.modal.settings = { + + name : 'Modal', + namespace : 'modal', + + useFlex : 'auto', + offset : 0, + + silent : false, + debug : false, + verbose : false, + performance : true, + + observeChanges : false, + + allowMultiple : false, + detachable : true, + closable : true, + autofocus : true, + + inverted : false, + blurring : false, + + centered : true, + + dimmerSettings : { + closable : false, + useCSS : true + }, + + // whether to use keyboard shortcuts + keyboardShortcuts: true, + + context : 'body', + + queue : false, + duration : 500, + transition : 'scale', + + // padding with edge of page + padding : 50, + + // called before show animation + onShow : function(){}, + + // called after show animation + onVisible : function(){}, + + // called before hide animation + onHide : function(){ return true; }, + + // called after hide animation + onHidden : function(){}, + + // called after approve selector match + onApprove : function(){ return true; }, + + // called after deny selector match + onDeny : function(){ return true; }, + + selector : { + close : '> .close', + approve : '.actions .positive, .actions .approve, .actions .ok', + deny : '.actions .negative, .actions .deny, .actions .cancel', + modal : '.ui.modal' + }, + error : { + dimmer : 'UI Dimmer, a required component is not included in this page', + method : 'The method you called is not defined.', + notFound : 'The element you specified could not be found' + }, + className : { + active : 'active', + animating : 'animating', + blurring : 'blurring', + inverted : 'inverted', + legacy : 'legacy', + loading : 'loading', + scrolling : 'scrolling', + undetached : 'undetached' + } +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/modal.min.css b/semantic/components/modal.min.css new file mode 100644 index 0000000..0026ebc --- /dev/null +++ b/semantic/components/modal.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.modal{position:absolute;display:none;z-index:1001;text-align:left;background:#fff;border:none;-webkit-box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);-webkit-transform-origin:50% 25%;transform-origin:50% 25%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:.28571429rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;will-change:top,left,margin,transform,opacity}.ui.modal>.icon:first-child+*,.ui.modal>:first-child:not(.icon){border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.modal>:last-child{border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5rem;right:-2.5rem;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25rem;height:2.25rem;padding:.625rem 0 0 0}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;margin:0;padding:1.25rem 1.5rem;-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(34,36,38,.15)}.ui.modal>.header:not(.ui){font-size:1.42857143rem;line-height:1.28571429em;font-weight:700}.ui.modal>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.modal>.image.content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.ui.modal>.content>.image{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:'';-ms-flex-item-align:top;align-self:top}.ui.modal>[class*="top aligned"]{-ms-flex-item-align:top;align-self:top}.ui.modal>[class*="middle aligned"]{-ms-flex-item-align:middle;align-self:middle}.ui.modal>[class*=stretched]{-ms-flex-item-align:stretch;align-self:stretch}.ui.modal>.content>.description{display:block;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;min-width:0;-ms-flex-item-align:top;align-self:top}.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:'';width:auto;padding-left:2em}.ui.modal>.content>.image>i.icon{margin:0;opacity:1;width:auto;line-height:1;font-size:8rem}.ui.modal>.actions{background:#f9fafb;padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.modal .actions>.button{margin-left:.75em}@media only screen and (max-width:767px){.ui.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.modal{width:850px;margin:0}}@media only screen and (min-width:1200px){.ui.modal{width:900px;margin:0}}@media only screen and (min-width:1920px){.ui.modal{width:950px;margin:0}}@media only screen and (max-width:991px){.ui.modal>.header{padding-right:2.25rem}.ui.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}}@media only screen and (max-width:767px){.ui.modal>.header{padding:.75rem 1rem!important;padding-right:2.25rem!important}.ui.modal>.content{display:block;padding:1rem!important}.ui.modal>.close{top:.5rem!important;right:.5rem!important}.ui.modal .image.content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.modal .content>.image{display:block;max-width:100%;margin:0 auto!important;text-align:center;padding:0 0 1rem!important}.ui.modal>.content>.image>i.icon{font-size:5rem;text-align:center}.ui.modal .content>.description{display:block;width:100%!important;margin:0!important;padding:1rem 0!important;-webkit-box-shadow:none;box-shadow:none}.ui.modal>.actions{padding:1rem 1rem 0!important}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1rem}}.ui.inverted.dimmer>.ui.modal{-webkit-box-shadow:1px 3px 10px 2px rgba(0,0,0,.2);box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)}.ui.basic.modal{background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{background-color:transparent}.ui.basic.modal>.header{color:#fff}.ui.basic.modal>.close{top:1rem;right:1.5rem}.ui.inverted.dimmer>.basic.modal{color:rgba(0,0,0,.87)}.ui.inverted.dimmer>.ui.basic.modal>.header{color:rgba(0,0,0,.85)}.ui.legacy.modal,.ui.legacy.page.dimmer>.ui.modal{top:50%;left:50%}.ui.legacy.page.dimmer>.ui.scrolling.modal,.ui.page.dimmer>.ui.scrolling.legacy.modal,.ui.top.aligned.dimmer>.ui.legacy.modal,.ui.top.aligned.legacy.page.dimmer>.ui.modal{top:auto}@media only screen and (max-width:991px){.ui.basic.modal>.close{color:#fff}}.ui.loading.modal{display:block;visibility:hidden;z-index:-1}.ui.active.modal{display:block}.modals.dimmer[class*="top aligned"] .modal{margin:5vh auto}@media only screen and (max-width:767px){.modals.dimmer[class*="top aligned"] .modal{margin:1rem auto}}.legacy.modals.dimmer[class*="top aligned"]{padding-top:5vh}@media only screen and (max-width:767px){.legacy.modals.dimmer[class*="top aligned"]{padding-top:1rem}}.scrolling.dimmable.dimmed{overflow:hidden}.scrolling.dimmable>.dimmer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.scrolling.dimmable.dimmed>.dimmer{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.dimmable>.dimmer{position:fixed}.modals.dimmer .ui.scrolling.modal{margin:1rem auto}.scrolling.undetached.dimmable.dimmed{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.undetached.dimmable.dimmed>.dimmer{overflow:hidden}.scrolling.undetached.dimmable .ui.scrolling.modal{position:absolute;left:50%;margin-top:1rem!important}.ui.modal .scrolling.content{max-height:calc(70vh);overflow:auto}.ui.fullscreen.modal{width:95%!important;left:0!important;margin:1em auto}.ui.fullscreen.scrolling.modal{left:0!important}.ui.fullscreen.modal>.header{padding-right:2.25rem}.ui.fullscreen.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}.ui.modal{font-size:1rem}.ui.mini.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.mini.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.mini.modal{width:35.2%;margin:0}}@media only screen and (min-width:992px){.ui.mini.modal{width:340px;margin:0}}@media only screen and (min-width:1200px){.ui.mini.modal{width:360px;margin:0}}@media only screen and (min-width:1920px){.ui.mini.modal{width:380px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.tiny.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.tiny.modal{width:52.8%;margin:0}}@media only screen and (min-width:992px){.ui.tiny.modal{width:510px;margin:0}}@media only screen and (min-width:1200px){.ui.tiny.modal{width:540px;margin:0}}@media only screen and (min-width:1920px){.ui.tiny.modal{width:570px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.small.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.small.modal{width:70.4%;margin:0}}@media only screen and (min-width:992px){.ui.small.modal{width:680px;margin:0}}@media only screen and (min-width:1200px){.ui.small.modal{width:720px;margin:0}}@media only screen and (min-width:1920px){.ui.small.modal{width:760px;margin:0}}.ui.large.modal>.header{font-size:1.6em}@media only screen and (max-width:767px){.ui.large.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.large.modal{width:1020px;margin:0}}@media only screen and (min-width:1200px){.ui.large.modal{width:1080px;margin:0}}@media only screen and (min-width:1920px){.ui.large.modal{width:1140px;margin:0}} \ No newline at end of file diff --git a/semantic/components/modal.min.js b/semantic/components/modal.min.js new file mode 100644 index 0000000..c00f6b1 --- /dev/null +++ b/semantic/components/modal.min.js @@ -0,0 +1 @@ +!function(j,q,L,N){"use strict";q=void 0!==q&&q.Math==Math?q:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),j.fn.modal=function(w){var C,e=j(this),F=j(q),M=j(L),x=j("body"),H=e.selector||"",A=(new Date).getTime(),O=[],D=w,T="string"==typeof D,z=[].slice.call(arguments,1),E=q.requestAnimationFrame||q.mozRequestAnimationFrame||q.webkitRequestAnimationFrame||q.msRequestAnimationFrame||function(e){setTimeout(e,0)};return e.each(function(){var i,t,e,o,a,n,r,s,c,l=j.isPlainObject(w)?j.extend(!0,{},j.fn.modal.settings,w):j.extend({},j.fn.modal.settings),d=l.selector,u=l.className,m=l.namespace,f=l.error,g="."+m,h="module-"+m,v=j(this),b=j(l.context),p=v.find(d.close),y=this,k=v.data(h),S=!1;c={initialize:function(){c.verbose("Initializing dimmer",b),c.create.id(),c.create.dimmer(),c.refreshModals(),c.bind.events(),l.observeChanges&&c.observeChanges(),c.instantiate()},instantiate:function(){c.verbose("Storing instance of modal"),k=c,v.data(h,k)},create:{dimmer:function(){var e={debug:l.debug,variation:!l.centered&&"top aligned",dimmerName:"modals"},n=j.extend(!0,e,l.dimmerSettings);j.fn.dimmer!==N?(c.debug("Creating dimmer"),o=b.dimmer(n),l.detachable?(c.verbose("Modal is detachable, moving content into dimmer"),o.dimmer("add content",v)):c.set.undetached(),a=o.dimmer("get dimmer")):c.error(f.dimmer)},id:function(){r=(Math.random().toString(16)+"000000000").substr(2,8),n="."+r,c.verbose("Creating unique id for element",r)}},destroy:function(){c.verbose("Destroying previous modal"),v.removeData(h).off(g),F.off(n),a.off(n),p.off(g),b.dimmer("destroy")},observeChanges:function(){"MutationObserver"in q&&((s=new MutationObserver(function(e){c.debug("DOM tree modified, refreshing"),c.refresh()})).observe(y,{childList:!0,subtree:!0}),c.debug("Setting up mutation observer",s))},refresh:function(){c.remove.scrolling(),c.cacheSizes(),c.can.useFlex()||c.set.modalOffset(),c.set.screenHeight(),c.set.type()},refreshModals:function(){t=v.siblings(d.modal),i=t.add(v)},attachEvents:function(e,n){var i=j(e);n=j.isFunction(c[n])?c[n]:c.toggle,0 .close",approve:".actions .positive, .actions .approve, .actions .ok",deny:".actions .negative, .actions .deny, .actions .cancel",modal:".ui.modal"},error:{dimmer:"UI Dimmer, a required component is not included in this page",method:"The method you called is not defined.",notFound:"The element you specified could not be found"},className:{active:"active",animating:"animating",blurring:"blurring",inverted:"inverted",legacy:"legacy",loading:"loading",scrolling:"scrolling",undetached:"undetached"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/nag.css b/semantic/components/nag.css new file mode 100644 index 0000000..134b34d --- /dev/null +++ b/semantic/components/nag.css @@ -0,0 +1,148 @@ +/*! + * # Semantic UI 2.4.0 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Nag +*******************************/ + +.ui.nag { + display: none; + opacity: 0.95; + position: relative; + top: 0em; + left: 0px; + z-index: 999; + min-height: 0em; + width: 100%; + margin: 0em; + padding: 0.75em 1em; + background: #555555; + -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + font-size: 1rem; + text-align: center; + color: rgba(0, 0, 0, 0.87); + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + -webkit-transition: 0.2s background ease; + transition: 0.2s background ease; +} +a.ui.nag { + cursor: pointer; +} +.ui.nag > .title { + display: inline-block; + margin: 0em 0.5em; + color: #FFFFFF; +} +.ui.nag > .close.icon { + cursor: pointer; + opacity: 0.4; + position: absolute; + top: 50%; + right: 1em; + font-size: 1em; + margin: -0.5em 0em 0em; + color: #FFFFFF; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; +} + + +/******************************* + States +*******************************/ + + +/* Hover */ +.ui.nag:hover { + background: #555555; + opacity: 1; +} +.ui.nag .close:hover { + opacity: 1; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Static +---------------*/ + +.ui.overlay.nag { + position: absolute; + display: block; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.nag { + position: fixed; +} + +/*-------------- + Bottom +---------------*/ + +.ui.bottom.nags, +.ui.bottom.nag { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + top: auto; + bottom: 0em; +} + +/*-------------- + White +---------------*/ + +.ui.inverted.nags .nag, +.ui.inverted.nag { + background-color: #F3F4F5; + color: rgba(0, 0, 0, 0.85); +} +.ui.inverted.nags .nag .close, +.ui.inverted.nags .nag .title, +.ui.inverted.nag .close, +.ui.inverted.nag .title { + color: rgba(0, 0, 0, 0.4); +} + + +/******************************* + Groups +*******************************/ + +.ui.nags .nag { + border-radius: 0em !important; +} +.ui.nags .nag:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.bottom.nags .nag:last-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/nag.js b/semantic/components/nag.js new file mode 100644 index 0000000..c6085f0 --- /dev/null +++ b/semantic/components/nag.js @@ -0,0 +1,507 @@ +/*! + * # Semantic UI 2.4.1 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.nag = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.nag.settings, parameters) + : $.extend({}, $.fn.nag.settings), + + className = settings.className, + selector = settings.selector, + error = settings.error, + namespace = settings.namespace, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $module = $(this), + + $close = $module.find(selector.close), + $context = (settings.context) + ? $(settings.context) + : $('body'), + + element = this, + instance = $module.data(moduleNamespace), + + moduleOffset, + moduleHeight, + + contextWidth, + contextHeight, + contextOffset, + + yOffset, + yPosition, + + timer, + module, + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + module = { + + initialize: function() { + module.verbose('Initializing element'); + + $module + .on('click' + eventNamespace, selector.close, module.dismiss) + .data(moduleNamespace, module) + ; + + if(settings.detachable && $module.parent()[0] !== $context[0]) { + $module + .detach() + .prependTo($context) + ; + } + + if(settings.displayTime > 0) { + setTimeout(module.hide, settings.displayTime); + } + module.show(); + }, + + destroy: function() { + module.verbose('Destroying instance'); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + }, + + show: function() { + if( module.should.show() && !$module.is(':visible') ) { + module.debug('Showing nag', settings.animation.show); + if(settings.animation.show == 'fade') { + $module + .fadeIn(settings.duration, settings.easing) + ; + } + else { + $module + .slideDown(settings.duration, settings.easing) + ; + } + } + }, + + hide: function() { + module.debug('Showing nag', settings.animation.hide); + if(settings.animation.show == 'fade') { + $module + .fadeIn(settings.duration, settings.easing) + ; + } + else { + $module + .slideUp(settings.duration, settings.easing) + ; + } + }, + + onHide: function() { + module.debug('Removing nag', settings.animation.hide); + $module.remove(); + if (settings.onHide) { + settings.onHide(); + } + }, + + dismiss: function(event) { + if(settings.storageMethod) { + module.storage.set(settings.key, settings.value); + } + module.hide(); + event.stopImmediatePropagation(); + event.preventDefault(); + }, + + should: { + show: function() { + if(settings.persist) { + module.debug('Persistent nag is set, can show nag'); + return true; + } + if( module.storage.get(settings.key) != settings.value.toString() ) { + module.debug('Stored value is not set, can show nag', module.storage.get(settings.key)); + return true; + } + module.debug('Stored value is set, cannot show nag', module.storage.get(settings.key)); + return false; + } + }, + + get: { + storageOptions: function() { + var + options = {} + ; + if(settings.expires) { + options.expires = settings.expires; + } + if(settings.domain) { + options.domain = settings.domain; + } + if(settings.path) { + options.path = settings.path; + } + return options; + } + }, + + clear: function() { + module.storage.remove(settings.key); + }, + + storage: { + set: function(key, value) { + var + options = module.get.storageOptions() + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + window.localStorage.setItem(key, value); + module.debug('Value stored using local storage', key, value); + } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + window.sessionStorage.setItem(key, value); + module.debug('Value stored using session storage', key, value); + } + else if($.cookie !== undefined) { + $.cookie(key, value, options); + module.debug('Value stored using cookie', key, value, options); + } + else { + module.error(error.noCookieStorage); + return; + } + }, + get: function(key, value) { + var + storedValue + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + storedValue = window.localStorage.getItem(key); + } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + storedValue = window.sessionStorage.getItem(key); + } + // get by cookie + else if($.cookie !== undefined) { + storedValue = $.cookie(key); + } + else { + module.error(error.noCookieStorage); + } + if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) { + storedValue = undefined; + } + return storedValue; + }, + remove: function(key) { + var + options = module.get.storageOptions() + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + window.localStorage.removeItem(key); + } + else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) { + window.sessionStorage.removeItem(key); + } + // store by cookie + else if($.cookie !== undefined) { + $.removeCookie(key, options); + } + else { + module.error(error.noStorage); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.nag.settings = { + + name : 'Nag', + + silent : false, + debug : false, + verbose : false, + performance : true, + + namespace : 'Nag', + + // allows cookie to be overridden + persist : false, + + // set to zero to require manually dismissal, otherwise hides on its own + displayTime : 0, + + animation : { + show : 'slide', + hide : 'slide' + }, + + context : false, + detachable : false, + + expires : 30, + domain : false, + path : '/', + + // type of storage to use + storageMethod : 'cookie', + + // value to store in dismissed localstorage/cookie + key : 'nag', + value : 'dismiss', + + error: { + noCookieStorage : '$.cookie is not included. A storage solution is required.', + noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state', + method : 'The method you called is not defined.' + }, + + className : { + bottom : 'bottom', + fixed : 'fixed' + }, + + selector : { + close : '.close.icon' + }, + + speed : 500, + easing : 'easeOutQuad', + + onHide: function() {} + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); diff --git a/semantic/components/nag.min.css b/semantic/components/nag.min.css new file mode 100644 index 0000000..3782cb5 --- /dev/null +++ b/semantic/components/nag.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.nag{display:none;opacity:.95;position:relative;top:0;left:0;z-index:999;min-height:0;width:100%;margin:0;padding:.75em 1em;background:#555;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1rem;text-align:center;color:rgba(0,0,0,.87);border-radius:0 0 .28571429rem .28571429rem;-webkit-transition:.2s background ease;transition:.2s background ease}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#fff}.ui.nag>.close.icon{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;font-size:1em;margin:-.5em 0 0;color:#fff;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.ui.nag:hover{background:#555;opacity:1}.ui.nag .close:hover{opacity:1}.ui.overlay.nag{position:absolute;display:block}.ui.fixed.nag{position:fixed}.ui.bottom.nag,.ui.bottom.nags{border-radius:.28571429rem .28571429rem 0 0;top:auto;bottom:0}.ui.inverted.nag,.ui.inverted.nags .nag{background-color:#f3f4f5;color:rgba(0,0,0,.85)}.ui.inverted.nag .close,.ui.inverted.nag .title,.ui.inverted.nags .nag .close,.ui.inverted.nags .nag .title{color:rgba(0,0,0,.4)}.ui.nags .nag{border-radius:0!important}.ui.nags .nag:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.bottom.nags .nag:last-child{border-radius:.28571429rem .28571429rem 0 0} \ No newline at end of file diff --git a/semantic/components/nag.min.js b/semantic/components/nag.min.js new file mode 100644 index 0000000..9d9e82c --- /dev/null +++ b/semantic/components/nag.min.js @@ -0,0 +1 @@ +!function(y,k,e,S){"use strict";k=void 0!==k&&k.Math==Math?k:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),y.fn.nag=function(u){var d,e=y(this),m=e.selector||"",f=(new Date).getTime(),p=[],h=u,b="string"==typeof h,v=[].slice.call(arguments,1);return e.each(function(){var r,n=y.isPlainObject(u)?y.extend(!0,{},y.fn.nag.settings,u):y.extend({},y.fn.nag.settings),e=(n.className,n.selector),l=n.error,o=n.namespace,t="."+o,i=o+"-module",s=y(this),a=(s.find(e.close),n.context?y(n.context):y("body")),c=this,g=s.data(i);k.requestAnimationFrame||k.mozRequestAnimationFrame||k.webkitRequestAnimationFrame||k.msRequestAnimationFrame;r={initialize:function(){r.verbose("Initializing element"),s.on("click"+t,e.close,r.dismiss).data(i,r),n.detachable&&s.parent()[0]!==a[0]&&s.detach().prependTo(a),0 :before, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after { + background-color: #FFFFFF; +} + +/* Image */ +.ui.placeholder .image:not(.header):not(.ui) { + height: 100px; +} +.ui.placeholder .square.image:not(.header) { + height: 0px; + overflow: hidden; + +/* 1/1 aspect ratio */ + padding-top: 100%; +} +.ui.placeholder .rectangular.image:not(.header) { + height: 0px; + overflow: hidden; + +/* 4/3 aspect ratio */ + padding-top: 75%; +} + +/* Lines */ +.ui.placeholder .line { + position: relative; + height: 0.85714286em; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + top: 100%; + position: absolute; + content: ''; + background-color: inherit; +} +.ui.placeholder .line:before { + left: 0px; +} +.ui.placeholder .line:after { + right: 0px; +} + +/* Any Lines */ +.ui.placeholder .line { + margin-bottom: 0.5em; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + height: 0.5em; +} +.ui.placeholder .line:not(:first-child) { + margin-top: 0.5em; +} + +/* Header Image + 2 Lines */ +.ui.placeholder .header { + position: relative; + overflow: hidden; +} + +/* Line Outdent */ +.ui.placeholder .line:nth-child(1):after { + width: 0%; +} +.ui.placeholder .line:nth-child(2):after { + width: 50%; +} +.ui.placeholder .line:nth-child(3):after { + width: 10%; +} +.ui.placeholder .line:nth-child(4):after { + width: 35%; +} +.ui.placeholder .line:nth-child(5):after { + width: 65%; +} + +/* Header Line 1 & 2*/ +.ui.placeholder .header .line { + margin-bottom: 0.64285714em; +} +.ui.placeholder .header .line:before, +.ui.placeholder .header .line:after { + height: 0.64285714em; +} +.ui.placeholder .header .line:not(:first-child) { + margin-top: 0.64285714em; +} +.ui.placeholder .header .line:after { + width: 20%; +} +.ui.placeholder .header .line:nth-child(2):after { + width: 60%; +} +/* Image Header */ +.ui.placeholder .image.header .line { + margin-left: 3em; +} +.ui.placeholder .image.header .line:before { + width: 0.71428571rem; +} +.ui.placeholder .image.header:after { + display: block; + height: 0.85714286em; + content: ''; + margin-left: 3em; +} + +/* Spacing */ +.ui.placeholder .image .line:first-child, +.ui.placeholder .paragraph .line:first-child, +.ui.placeholder .header .line:first-child { + height: 0.01px; +} +.ui.placeholder .image:not(:first-child):before, +.ui.placeholder .paragraph:not(:first-child):before, +.ui.placeholder .header:not(:first-child):before { + height: 1.42857143em; + content: ''; + display: block; +} + +/* Inverted Content Loader */ +.ui.inverted.placeholder { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.08)), color-stop(15%, rgba(255, 255, 255, 0.14)), color-stop(30%, rgba(255, 255, 255, 0.08))); + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%); + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%); +} +.ui.inverted.placeholder, +.ui.inverted.placeholder > :before, +.ui.inverted.placeholder .image.header:after, +.ui.inverted.placeholder .line, +.ui.inverted.placeholder .line:after { + background-color: #1B1C1D; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + +.ui.placeholder .full.line.line.line:after { + width: 0%; +} +.ui.placeholder .very.long.line.line.line:after { + width: 10%; +} +.ui.placeholder .long.line.line.line:after { + width: 35%; +} +.ui.placeholder .medium.line.line.line:after { + width: 50%; +} +.ui.placeholder .short.line.line.line:after { + width: 65%; +} +.ui.placeholder .very.short.line.line.line:after { + width: 80%; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.placeholder { + max-width: none; +} diff --git a/semantic/components/placeholder.min.css b/semantic/components/placeholder.min.css new file mode 100644 index 0000000..7096606 --- /dev/null +++ b/semantic/components/placeholder.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.placeholder{position:static;overflow:hidden;-webkit-animation:placeholderShimmer 2s linear;animation:placeholderShimmer 2s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.08)),color-stop(15%,rgba(0,0,0,.15)),color-stop(30%,rgba(0,0,0,.08)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@-webkit-keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.15s;animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.3s;animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.45s;animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.6s;animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header:after,.ui.placeholder .line,.ui.placeholder .line:after,.ui.placeholder>:before{background-color:#fff}.ui.placeholder .image:not(.header):not(.ui){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:.85714286em}.ui.placeholder .line:after,.ui.placeholder .line:before{top:100%;position:absolute;content:'';background-color:inherit}.ui.placeholder .line:before{left:0}.ui.placeholder .line:after{right:0}.ui.placeholder .line{margin-bottom:.5em}.ui.placeholder .line:after,.ui.placeholder .line:before{height:.5em}.ui.placeholder .line:not(:first-child){margin-top:.5em}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .line:nth-child(1):after{width:0%}.ui.placeholder .line:nth-child(2):after{width:50%}.ui.placeholder .line:nth-child(3):after{width:10%}.ui.placeholder .line:nth-child(4):after{width:35%}.ui.placeholder .line:nth-child(5):after{width:65%}.ui.placeholder .header .line{margin-bottom:.64285714em}.ui.placeholder .header .line:after,.ui.placeholder .header .line:before{height:.64285714em}.ui.placeholder .header .line:not(:first-child){margin-top:.64285714em}.ui.placeholder .header .line:after{width:20%}.ui.placeholder .header .line:nth-child(2):after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line:before{width:.71428571rem}.ui.placeholder .image.header:after{display:block;height:.85714286em;content:'';margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child):before,.ui.placeholder .image:not(:first-child):before,.ui.placeholder .paragraph:not(:first-child):before{height:1.42857143em;content:'';display:block}.ui.inverted.placeholder{background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,.08)),color-stop(15%,rgba(255,255,255,.14)),color-stop(30%,rgba(255,255,255,.08)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%);background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header:after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line:after,.ui.inverted.placeholder>:before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line:after{width:0%}.ui.placeholder .very.long.line.line.line:after{width:10%}.ui.placeholder .long.line.line.line:after{width:35%}.ui.placeholder .medium.line.line.line:after{width:50%}.ui.placeholder .short.line.line.line:after{width:65%}.ui.placeholder .very.short.line.line.line:after{width:80%}.ui.fluid.placeholder{max-width:none} \ No newline at end of file diff --git a/semantic/components/popup.css b/semantic/components/popup.css new file mode 100644 index 0000000..5129201 --- /dev/null +++ b/semantic/components/popup.css @@ -0,0 +1,752 @@ +/*! + * # Semantic UI 2.4.0 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Popup +*******************************/ + +.ui.popup { + display: none; + position: absolute; + top: 0px; + right: 0px; + +/* Fixes content being squished when inline (moz only) */ + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + z-index: 1900; + border: 1px solid #D4D4D5; + line-height: 1.4285em; + max-width: 250px; + background: #FFFFFF; + padding: 0.833em 1em; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} +.ui.popup > .header { + padding: 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.14285714em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup > .header + .content { + padding-top: 0.5em; +} +.ui.popup:before { + position: absolute; + content: ''; + width: 0.71428571em; + height: 0.71428571em; + background: #FFFFFF; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-box-shadow: 1px 1px 0px 0px #bababc; + box-shadow: 1px 1px 0px 0px #bababc; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Tooltip +---------------*/ + + +/* Content */ +[data-tooltip] { + position: relative; +} + +/* Arrow */ +[data-tooltip]:before { + pointer-events: none; + position: absolute; + content: ''; + font-size: 1rem; + width: 0.71428571em; + height: 0.71428571em; + background: #FFFFFF; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + -webkit-box-shadow: 1px 1px 0px 0px #bababc; + box-shadow: 1px 1px 0px 0px #bababc; +} + +/* Popup */ +[data-tooltip]:after { + pointer-events: none; + content: attr(data-tooltip); + position: absolute; + text-transform: none; + text-align: left; + white-space: nowrap; + font-size: 1rem; + border: 1px solid #D4D4D5; + line-height: 1.4285em; + max-width: none; + background: #FFFFFF; + padding: 0.833em 1em; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + z-index: 1; +} + +/* Default Position (Top Center) */ +[data-tooltip]:not([data-position]):before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: #FFFFFF; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} +[data-tooltip]:not([data-position]):after { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + bottom: 100%; + margin-bottom: 0.5em; +} + +/* Animation */ +[data-tooltip]:before, +[data-tooltip]:after { + pointer-events: none; + visibility: hidden; +} +[data-tooltip]:before { + opacity: 0; + -webkit-transform: rotate(45deg) scale(0) !important; + transform: rotate(45deg) scale(0) !important; + -webkit-transform-origin: center top; + transform-origin: center top; + -webkit-transition: all 0.1s ease; + transition: all 0.1s ease; +} +[data-tooltip]:after { + opacity: 1; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + -webkit-transition: all 0.1s ease; + transition: all 0.1s ease; +} +[data-tooltip]:hover:before, +[data-tooltip]:hover:after { + visibility: visible; + pointer-events: auto; +} +[data-tooltip]:hover:before { + -webkit-transform: rotate(45deg) scale(1) !important; + transform: rotate(45deg) scale(1) !important; + opacity: 1; +} + +/* Animation Position */ +[data-tooltip]:after, +[data-tooltip][data-position="top center"]:after, +[data-tooltip][data-position="bottom center"]:after { + -webkit-transform: translateX(-50%) scale(0) !important; + transform: translateX(-50%) scale(0) !important; +} +[data-tooltip]:hover:after, +[data-tooltip][data-position="bottom center"]:hover:after { + -webkit-transform: translateX(-50%) scale(1) !important; + transform: translateX(-50%) scale(1) !important; +} +[data-tooltip][data-position="left center"]:after, +[data-tooltip][data-position="right center"]:after { + -webkit-transform: translateY(-50%) scale(0) !important; + transform: translateY(-50%) scale(0) !important; +} +[data-tooltip][data-position="left center"]:hover:after, +[data-tooltip][data-position="right center"]:hover:after { + -webkit-transform: translateY(-50%) scale(1) !important; + transform: translateY(-50%) scale(1) !important; +} +[data-tooltip][data-position="top left"]:after, +[data-tooltip][data-position="top right"]:after, +[data-tooltip][data-position="bottom left"]:after, +[data-tooltip][data-position="bottom right"]:after { + -webkit-transform: scale(0) !important; + transform: scale(0) !important; +} +[data-tooltip][data-position="top left"]:hover:after, +[data-tooltip][data-position="top right"]:hover:after, +[data-tooltip][data-position="bottom left"]:hover:after, +[data-tooltip][data-position="bottom right"]:hover:after { + -webkit-transform: scale(1) !important; + transform: scale(1) !important; +} + +/*-------------- + Inverted +---------------*/ + + +/* Arrow */ +[data-tooltip][data-inverted]:before { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/* Arrow Position */ +[data-tooltip][data-inverted]:before { + background: #1B1C1D; +} + +/* Popup */ +[data-tooltip][data-inverted]:after { + background: #1B1C1D; + color: #FFFFFF; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +[data-tooltip][data-inverted]:after .header { + background-color: none; + color: #FFFFFF; +} + +/*-------------- + Position +---------------*/ + + +/* Top Center */ +[data-position="top center"][data-tooltip]:after { + top: auto; + right: auto; + left: 50%; + bottom: 100%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + margin-bottom: 0.5em; +} +[data-position="top center"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: 50%; + background: #FFFFFF; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} + +/* Top Left */ +[data-position="top left"][data-tooltip]:after { + top: auto; + right: auto; + left: 0; + bottom: 100%; + margin-bottom: 0.5em; +} +[data-position="top left"][data-tooltip]:before { + top: auto; + right: auto; + bottom: 100%; + left: 1em; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} + +/* Top Right */ +[data-position="top right"][data-tooltip]:after { + top: auto; + left: auto; + right: 0; + bottom: 100%; + margin-bottom: 0.5em; +} +[data-position="top right"][data-tooltip]:before { + top: auto; + left: auto; + bottom: 100%; + right: 1em; + margin-left: -0.07142857rem; + margin-bottom: 0.14285714rem; +} + +/* Bottom Center */ +[data-position="bottom center"][data-tooltip]:after { + bottom: auto; + right: auto; + left: 50%; + top: 100%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + margin-top: 0.5em; +} +[data-position="bottom center"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: 50%; + margin-left: -0.07142857rem; + margin-top: 0.14285714rem; +} + +/* Bottom Left */ +[data-position="bottom left"][data-tooltip]:after { + left: 0; + top: 100%; + margin-top: 0.5em; +} +[data-position="bottom left"][data-tooltip]:before { + bottom: auto; + right: auto; + top: 100%; + left: 1em; + margin-left: -0.07142857rem; + margin-top: 0.14285714rem; +} + +/* Bottom Right */ +[data-position="bottom right"][data-tooltip]:after { + right: 0; + top: 100%; + margin-top: 0.5em; +} +[data-position="bottom right"][data-tooltip]:before { + bottom: auto; + left: auto; + top: 100%; + right: 1em; + margin-left: -0.14285714rem; + margin-top: 0.07142857rem; +} + +/* Left Center */ +[data-position="left center"][data-tooltip]:after { + right: 100%; + top: 50%; + margin-right: 0.5em; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +[data-position="left center"][data-tooltip]:before { + right: 100%; + top: 50%; + margin-top: -0.14285714rem; + margin-right: -0.07142857rem; +} + +/* Right Center */ +[data-position="right center"][data-tooltip]:after { + left: 100%; + top: 50%; + margin-left: 0.5em; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +[data-position="right center"][data-tooltip]:before { + left: 100%; + top: 50%; + margin-top: -0.07142857rem; + margin-left: 0.14285714rem; +} + +/* Arrow */ +[data-position~="bottom"][data-tooltip]:before { + background: #FFFFFF; + -webkit-box-shadow: -1px -1px 0px 0px #bababc; + box-shadow: -1px -1px 0px 0px #bababc; +} +[data-position="left center"][data-tooltip]:before { + background: #FFFFFF; + -webkit-box-shadow: 1px -1px 0px 0px #bababc; + box-shadow: 1px -1px 0px 0px #bababc; +} +[data-position="right center"][data-tooltip]:before { + background: #FFFFFF; + -webkit-box-shadow: -1px 1px 0px 0px #bababc; + box-shadow: -1px 1px 0px 0px #bababc; +} +[data-position~="top"][data-tooltip]:before { + background: #FFFFFF; +} + +/* Inverted Arrow Color */ +[data-inverted][data-position~="bottom"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: -1px -1px 0px 0px #bababc; + box-shadow: -1px -1px 0px 0px #bababc; +} +[data-inverted][data-position="left center"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: 1px -1px 0px 0px #bababc; + box-shadow: 1px -1px 0px 0px #bababc; +} +[data-inverted][data-position="right center"][data-tooltip]:before { + background: #1B1C1D; + -webkit-box-shadow: -1px 1px 0px 0px #bababc; + box-shadow: -1px 1px 0px 0px #bababc; +} +[data-inverted][data-position~="top"][data-tooltip]:before { + background: #1B1C1D; +} +[data-position~="bottom"][data-tooltip]:before { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +[data-position~="bottom"][data-tooltip]:after { + -webkit-transform-origin: center top; + transform-origin: center top; +} +[data-position="left center"][data-tooltip]:before { + -webkit-transform-origin: top center; + transform-origin: top center; +} +[data-position="left center"][data-tooltip]:after { + -webkit-transform-origin: right center; + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:before { + -webkit-transform-origin: right center; + transform-origin: right center; +} +[data-position="right center"][data-tooltip]:after { + -webkit-transform-origin: left center; + transform-origin: left center; +} + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0em; +} + +/* Extending from Top */ +.ui.top.popup { + margin: 0em 0em 0.71428571em; +} +.ui.top.left.popup { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; +} +.ui.top.center.popup { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +.ui.top.right.popup { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { + margin: 0em 0.71428571em 0em 0em; + -webkit-transform-origin: right 50%; + transform-origin: right 50%; +} +.ui.right.center.popup { + margin: 0em 0em 0em 0.71428571em; + -webkit-transform-origin: left 50%; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: 0.71428571em 0em 0em; +} +.ui.bottom.left.popup { + -webkit-transform-origin: left top; + transform-origin: left top; +} +.ui.bottom.center.popup { + -webkit-transform-origin: center top; + transform-origin: center top; +} +.ui.bottom.right.popup { + -webkit-transform-origin: right top; + transform-origin: right top; +} + +/*-------------- + Pointer +---------------*/ + + +/*--- Below ---*/ + +.ui.bottom.center.popup:before { + margin-left: -0.30714286em; + top: -0.30714286em; + left: 50%; + right: auto; + bottom: auto; + -webkit-box-shadow: -1px -1px 0px 0px #bababc; + box-shadow: -1px -1px 0px 0px #bababc; +} +.ui.bottom.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.bottom.left.popup:before { + top: -0.30714286em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 0px 0px #bababc; + box-shadow: -1px -1px 0px 0px #bababc; +} +.ui.bottom.right.popup { + margin-right: 0em; +} +/*rtl:rename*/ +.ui.bottom.right.popup:before { + top: -0.30714286em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + -webkit-box-shadow: -1px -1px 0px 0px #bababc; + box-shadow: -1px -1px 0px 0px #bababc; +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.30714286em; + left: 50%; + margin-left: -0.30714286em; +} +.ui.top.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.top.left.popup:before { + bottom: -0.30714286em; + left: 1em; + top: auto; + right: auto; + margin-left: 0em; +} +.ui.top.right.popup { + margin-right: 0em; +} +/*rtl:rename*/ +.ui.top.right.popup:before { + bottom: -0.30714286em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ + +/*rtl:rename*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.30714286em; + bottom: auto; + left: auto; + margin-top: -0.30714286em; + -webkit-box-shadow: 1px -1px 0px 0px #bababc; + box-shadow: 1px -1px 0px 0px #bababc; +} + +/*--- Right Center ---*/ + +/*rtl:rename*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.30714286em; + bottom: auto; + right: auto; + margin-top: -0.30714286em; + -webkit-box-shadow: -1px 1px 0px 0px #bababc; + box-shadow: -1px 1px 0px 0px #bababc; +} + +/* Arrow Color By Location */ +.ui.bottom.popup:before { + background: #FFFFFF; +} +.ui.right.center.popup:before, +.ui.left.center.popup:before { + background: #FFFFFF; +} +.ui.top.popup:before { + background: #FFFFFF; +} + +/* Inverted Arrow Color */ +.ui.inverted.bottom.popup:before { + background: #1B1C1D; +} +.ui.inverted.right.center.popup:before, +.ui.inverted.left.center.popup:before { + background: #1B1C1D; +} +.ui.inverted.top.popup:before { + background: #1B1C1D; +} + + +/******************************* + Coupling +*******************************/ + + +/* Immediate Nested Grid */ +.ui.popup > .ui.grid:not(.padded) { + width: calc(100% + 1.75rem); + margin: -0.7rem -0.875rem; +} + + +/******************************* + States +*******************************/ + +.ui.loading.popup { + display: block; + visibility: hidden; + z-index: -1; +} +.ui.animating.popup, +.ui.visible.popup { + display: block; +} +.ui.visible.popup { + -webkit-transform: translateZ(0px); + transform: translateZ(0px); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Basic +---------------*/ + +.ui.basic.popup:before { + display: none; +} + +/*-------------- + Wide +---------------*/ + +.ui.wide.popup { + max-width: 350px; +} +.ui[class*="very wide"].popup { + max-width: 550px; +} +@media only screen and (max-width: 767px) { + .ui.wide.popup, + .ui[class*="very wide"].popup { + max-width: 250px; + } +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.popup { + width: 100%; + max-width: none; +} + +/*-------------- + Colors +---------------*/ + + +/* Inverted colors */ +.ui.inverted.popup { + background: #1B1C1D; + color: #FFFFFF; + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: none; + color: #FFFFFF; +} +.ui.inverted.popup:before { + background-color: #1B1C1D; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +/*-------------- + Flowing +---------------*/ + +.ui.flowing.popup { + max-width: none; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.popup { + font-size: 0.78571429rem; +} +.ui.tiny.popup { + font-size: 0.85714286rem; +} +.ui.small.popup { + font-size: 0.92857143rem; +} +.ui.popup { + font-size: 1rem; +} +.ui.large.popup { + font-size: 1.14285714rem; +} +.ui.huge.popup { + font-size: 1.42857143rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/popup.js b/semantic/components/popup.js new file mode 100644 index 0000000..3f9ca68 --- /dev/null +++ b/semantic/components/popup.js @@ -0,0 +1,1532 @@ +/*! + * # Semantic UI 2.4.1 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.popup = function(parameters) { + var + $allModules = $(this), + $document = $(document), + $window = $(window), + $body = $('body'), + + moduleSelector = $allModules.selector || '', + + hasTouch = (true), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.popup.settings, parameters) + : $.extend({}, $.fn.popup.settings), + + selector = settings.selector, + className = settings.className, + error = settings.error, + metadata = settings.metadata, + namespace = settings.namespace, + + eventNamespace = '.' + settings.namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $context = $(settings.context), + $scrollContext = $(settings.scrollContext), + $boundary = $(settings.boundary), + $target = (settings.target) + ? $(settings.target) + : $module, + + $popup, + $offsetParent, + + searchDepth = 0, + triedPositions = false, + openedWithTouch = false, + + element = this, + instance = $module.data(moduleNamespace), + + documentObserver, + elementNamespace, + id, + module + ; + + module = { + + // binds events + initialize: function() { + module.debug('Initializing', $module); + module.createID(); + module.bind.events(); + if(!module.exists() && settings.preserve) { + module.create(); + } + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + observeChanges: function() { + if('MutationObserver' in window) { + documentObserver = new MutationObserver(module.event.documentChanged); + documentObserver.observe(document, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', documentObserver); + } + }, + + refresh: function() { + if(settings.popup) { + $popup = $(settings.popup).eq(0); + } + else { + if(settings.inline) { + $popup = $target.nextAll(selector.popup).eq(0); + settings.popup = $popup; + } + } + if(settings.popup) { + $popup.addClass(className.loading); + $offsetParent = module.get.offsetParent(); + $popup.removeClass(className.loading); + if(settings.movePopup && module.has.popup() && module.get.offsetParent($popup)[0] !== $offsetParent[0]) { + module.debug('Moving popup to the same offset parent as target'); + $popup + .detach() + .appendTo($offsetParent) + ; + } + } + else { + $offsetParent = (settings.inline) + ? module.get.offsetParent($target) + : module.has.popup() + ? module.get.offsetParent($popup) + : $body + ; + } + if( $offsetParent.is('html') && $offsetParent[0] !== $body[0] ) { + module.debug('Setting page as offset parent'); + $offsetParent = $body; + } + if( module.get.variation() ) { + module.set.variation(); + } + }, + + reposition: function() { + module.refresh(); + module.set.position(); + }, + + destroy: function() { + module.debug('Destroying previous module'); + if(documentObserver) { + documentObserver.disconnect(); + } + // remove element only if was created dynamically + if($popup && !settings.preserve) { + module.removePopup(); + } + // clear all timeouts + clearTimeout(module.hideTimer); + clearTimeout(module.showTimer); + // remove events + module.unbind.close(); + module.unbind.events(); + $module + .removeData(moduleNamespace) + ; + }, + + event: { + start: function(event) { + var + delay = ($.isPlainObject(settings.delay)) + ? settings.delay.show + : settings.delay + ; + clearTimeout(module.hideTimer); + if(!openedWithTouch) { + module.showTimer = setTimeout(module.show, delay); + } + }, + end: function() { + var + delay = ($.isPlainObject(settings.delay)) + ? settings.delay.hide + : settings.delay + ; + clearTimeout(module.showTimer); + module.hideTimer = setTimeout(module.hide, delay); + }, + touchstart: function(event) { + openedWithTouch = true; + module.show(); + }, + resize: function() { + if( module.is.visible() ) { + module.set.position(); + } + }, + documentChanged: function(mutations) { + [].forEach.call(mutations, function(mutation) { + if(mutation.removedNodes) { + [].forEach.call(mutation.removedNodes, function(node) { + if(node == element || $(node).find(element).length > 0) { + module.debug('Element removed from DOM, tearing down events'); + module.destroy(); + } + }); + } + }); + }, + hideGracefully: function(event) { + var + $target = $(event.target), + isInDOM = $.contains(document.documentElement, event.target), + inPopup = ($target.closest(selector.popup).length > 0) + ; + // don't close on clicks inside popup + if(event && !inPopup && isInDOM) { + module.debug('Click occurred outside popup hiding popup'); + module.hide(); + } + else { + module.debug('Click was inside popup, keeping popup open'); + } + } + }, + + // generates popup html from metadata + create: function() { + var + html = module.get.html(), + title = module.get.title(), + content = module.get.content() + ; + + if(html || content || title) { + module.debug('Creating pop-up html'); + if(!html) { + html = settings.templates.popup({ + title : title, + content : content + }); + } + $popup = $('
') + .addClass(className.popup) + .data(metadata.activator, $module) + .html(html) + ; + if(settings.inline) { + module.verbose('Inserting popup element inline', $popup); + $popup + .insertAfter($module) + ; + } + else { + module.verbose('Appending popup element to body', $popup); + $popup + .appendTo( $context ) + ; + } + module.refresh(); + module.set.variation(); + + if(settings.hoverable) { + module.bind.popup(); + } + settings.onCreate.call($popup, element); + } + else if($target.next(selector.popup).length !== 0) { + module.verbose('Pre-existing popup found'); + settings.inline = true; + settings.popup = $target.next(selector.popup).data(metadata.activator, $module); + module.refresh(); + if(settings.hoverable) { + module.bind.popup(); + } + } + else if(settings.popup) { + $(settings.popup).data(metadata.activator, $module); + module.verbose('Used popup specified in settings'); + module.refresh(); + if(settings.hoverable) { + module.bind.popup(); + } + } + else { + module.debug('No content specified skipping display', element); + } + }, + + createID: function() { + id = (Math.random().toString(16) + '000000000').substr(2, 8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + }, + + // determines popup state + toggle: function() { + module.debug('Toggling pop-up'); + if( module.is.hidden() ) { + module.debug('Popup is hidden, showing pop-up'); + module.unbind.close(); + module.show(); + } + else { + module.debug('Popup is visible, hiding pop-up'); + module.hide(); + } + }, + + show: function(callback) { + callback = callback || function(){}; + module.debug('Showing pop-up', settings.transition); + if(module.is.hidden() && !( module.is.active() && module.is.dropdown()) ) { + if( !module.exists() ) { + module.create(); + } + if(settings.onShow.call($popup, element) === false) { + module.debug('onShow callback returned false, cancelling popup animation'); + return; + } + else if(!settings.preserve && !settings.popup) { + module.refresh(); + } + if( $popup && module.set.position() ) { + module.save.conditions(); + if(settings.exclusive) { + module.hideAll(); + } + module.animate.show(callback); + } + } + }, + + + hide: function(callback) { + callback = callback || function(){}; + if( module.is.visible() || module.is.animating() ) { + if(settings.onHide.call($popup, element) === false) { + module.debug('onHide callback returned false, cancelling popup animation'); + return; + } + module.remove.visible(); + module.unbind.close(); + module.restore.conditions(); + module.animate.hide(callback); + } + }, + + hideAll: function() { + $(selector.popup) + .filter('.' + className.popupVisible) + .each(function() { + $(this) + .data(metadata.activator) + .popup('hide') + ; + }) + ; + }, + exists: function() { + if(!$popup) { + return false; + } + if(settings.inline || settings.popup) { + return ( module.has.popup() ); + } + else { + return ( $popup.closest($context).length >= 1 ) + ? true + : false + ; + } + }, + + removePopup: function() { + if( module.has.popup() && !settings.popup) { + module.debug('Removing popup', $popup); + $popup.remove(); + $popup = undefined; + settings.onRemove.call($popup, element); + } + }, + + save: { + conditions: function() { + module.cache = { + title: $module.attr('title') + }; + if (module.cache.title) { + $module.removeAttr('title'); + } + module.verbose('Saving original attributes', module.cache.title); + } + }, + restore: { + conditions: function() { + if(module.cache && module.cache.title) { + $module.attr('title', module.cache.title); + module.verbose('Restoring original attributes', module.cache.title); + } + return true; + } + }, + supports: { + svg: function() { + return (typeof SVGGraphicsElement === 'undefined'); + } + }, + animate: { + show: function(callback) { + callback = $.isFunction(callback) ? callback : function(){}; + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.set.visible(); + $popup + .transition({ + animation : settings.transition + ' in', + queue : false, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + onComplete : function() { + module.bind.close(); + callback.call($popup, element); + settings.onVisible.call($popup, element); + } + }) + ; + } + else { + module.error(error.noTransition); + } + }, + hide: function(callback) { + callback = $.isFunction(callback) ? callback : function(){}; + module.debug('Hiding pop-up'); + if(settings.onHide.call($popup, element) === false) { + module.debug('onHide callback returned false, cancelling popup animation'); + return; + } + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $popup + .transition({ + animation : settings.transition + ' out', + queue : false, + duration : settings.duration, + debug : settings.debug, + verbose : settings.verbose, + onComplete : function() { + module.reset(); + callback.call($popup, element); + settings.onHidden.call($popup, element); + } + }) + ; + } + else { + module.error(error.noTransition); + } + } + }, + + change: { + content: function(html) { + $popup.html(html); + } + }, + + get: { + html: function() { + $module.removeData(metadata.html); + return $module.data(metadata.html) || settings.html; + }, + title: function() { + $module.removeData(metadata.title); + return $module.data(metadata.title) || settings.title; + }, + content: function() { + $module.removeData(metadata.content); + return $module.data(metadata.content) || settings.content || $module.attr('title'); + }, + variation: function() { + $module.removeData(metadata.variation); + return $module.data(metadata.variation) || settings.variation; + }, + popup: function() { + return $popup; + }, + popupOffset: function() { + return $popup.offset(); + }, + calculations: function() { + var + $popupOffsetParent = module.get.offsetParent($popup), + targetElement = $target[0], + isWindow = ($boundary[0] == window), + targetPosition = (settings.inline || (settings.popup && settings.movePopup)) + ? $target.position() + : $target.offset(), + screenPosition = (isWindow) + ? { top: 0, left: 0 } + : $boundary.offset(), + calculations = {}, + scroll = (isWindow) + ? { top: $window.scrollTop(), left: $window.scrollLeft() } + : { top: 0, left: 0}, + screen + ; + calculations = { + // element which is launching popup + target : { + element : $target[0], + width : $target.outerWidth(), + height : $target.outerHeight(), + top : targetPosition.top, + left : targetPosition.left, + margin : {} + }, + // popup itself + popup : { + width : $popup.outerWidth(), + height : $popup.outerHeight() + }, + // offset container (or 3d context) + parent : { + width : $offsetParent.outerWidth(), + height : $offsetParent.outerHeight() + }, + // screen boundaries + screen : { + top : screenPosition.top, + left : screenPosition.left, + scroll: { + top : scroll.top, + left : scroll.left + }, + width : $boundary.width(), + height : $boundary.height() + } + }; + + // if popup offset context is not same as target, then adjust calculations + if($popupOffsetParent.get(0) !== $offsetParent.get(0)) { + var + popupOffset = $popupOffsetParent.offset() + ; + calculations.target.top -= popupOffset.top; + calculations.target.left -= popupOffset.left; + calculations.parent.width = $popupOffsetParent.outerWidth(); + calculations.parent.height = $popupOffsetParent.outerHeight(); + } + + // add in container calcs if fluid + if( settings.setFluidWidth && module.is.fluid() ) { + calculations.container = { + width: $popup.parent().outerWidth() + }; + calculations.popup.width = calculations.container.width; + } + + // add in margins if inline + calculations.target.margin.top = (settings.inline) + ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10) + : 0 + ; + calculations.target.margin.left = (settings.inline) + ? module.is.rtl() + ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-right'), 10) + : parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left'), 10) + : 0 + ; + // calculate screen boundaries + screen = calculations.screen; + calculations.boundary = { + top : screen.top + screen.scroll.top, + bottom : screen.top + screen.scroll.top + screen.height, + left : screen.left + screen.scroll.left, + right : screen.left + screen.scroll.left + screen.width + }; + return calculations; + }, + id: function() { + return id; + }, + startEvent: function() { + if(settings.on == 'hover') { + return 'mouseenter'; + } + else if(settings.on == 'focus') { + return 'focus'; + } + return false; + }, + scrollEvent: function() { + return 'scroll'; + }, + endEvent: function() { + if(settings.on == 'hover') { + return 'mouseleave'; + } + else if(settings.on == 'focus') { + return 'blur'; + } + return false; + }, + distanceFromBoundary: function(offset, calculations) { + var + distanceFromBoundary = {}, + popup, + boundary + ; + calculations = calculations || module.get.calculations(); + + // shorthand + popup = calculations.popup; + boundary = calculations.boundary; + + if(offset) { + distanceFromBoundary = { + top : (offset.top - boundary.top), + left : (offset.left - boundary.left), + right : (boundary.right - (offset.left + popup.width) ), + bottom : (boundary.bottom - (offset.top + popup.height) ) + }; + module.verbose('Distance from boundaries determined', offset, distanceFromBoundary); + } + return distanceFromBoundary; + }, + offsetParent: function($element) { + var + element = ($element !== undefined) + ? $element[0] + : $target[0], + parentNode = element.parentNode, + $node = $(parentNode) + ; + if(parentNode) { + var + is2D = ($node.css('transform') === 'none'), + isStatic = ($node.css('position') === 'static'), + isBody = $node.is('body') + ; + while(parentNode && !isBody && isStatic && is2D) { + parentNode = parentNode.parentNode; + $node = $(parentNode); + is2D = ($node.css('transform') === 'none'); + isStatic = ($node.css('position') === 'static'); + isBody = $node.is('body'); + } + } + return ($node && $node.length > 0) + ? $node + : $() + ; + }, + positions: function() { + return { + 'top left' : false, + 'top center' : false, + 'top right' : false, + 'bottom left' : false, + 'bottom center' : false, + 'bottom right' : false, + 'left center' : false, + 'right center' : false + }; + }, + nextPosition: function(position) { + var + positions = position.split(' '), + verticalPosition = positions[0], + horizontalPosition = positions[1], + opposite = { + top : 'bottom', + bottom : 'top', + left : 'right', + right : 'left' + }, + adjacent = { + left : 'center', + center : 'right', + right : 'left' + }, + backup = { + 'top left' : 'top center', + 'top center' : 'top right', + 'top right' : 'right center', + 'right center' : 'bottom right', + 'bottom right' : 'bottom center', + 'bottom center' : 'bottom left', + 'bottom left' : 'left center', + 'left center' : 'top left' + }, + adjacentsAvailable = (verticalPosition == 'top' || verticalPosition == 'bottom'), + oppositeTried = false, + adjacentTried = false, + nextPosition = false + ; + if(!triedPositions) { + module.verbose('All available positions available'); + triedPositions = module.get.positions(); + } + + module.debug('Recording last position tried', position); + triedPositions[position] = true; + + if(settings.prefer === 'opposite') { + nextPosition = [opposite[verticalPosition], horizontalPosition]; + nextPosition = nextPosition.join(' '); + oppositeTried = (triedPositions[nextPosition] === true); + module.debug('Trying opposite strategy', nextPosition); + } + if((settings.prefer === 'adjacent') && adjacentsAvailable ) { + nextPosition = [verticalPosition, adjacent[horizontalPosition]]; + nextPosition = nextPosition.join(' '); + adjacentTried = (triedPositions[nextPosition] === true); + module.debug('Trying adjacent strategy', nextPosition); + } + if(adjacentTried || oppositeTried) { + module.debug('Using backup position', nextPosition); + nextPosition = backup[position]; + } + return nextPosition; + } + }, + + set: { + position: function(position, calculations) { + + // exit conditions + if($target.length === 0 || $popup.length === 0) { + module.error(error.notFound); + return; + } + var + offset, + distanceAway, + target, + popup, + parent, + positioning, + popupOffset, + distanceFromBoundary + ; + + calculations = calculations || module.get.calculations(); + position = position || $module.data(metadata.position) || settings.position; + + offset = $module.data(metadata.offset) || settings.offset; + distanceAway = settings.distanceAway; + + // shorthand + target = calculations.target; + popup = calculations.popup; + parent = calculations.parent; + + if(module.should.centerArrow(calculations)) { + module.verbose('Adjusting offset to center arrow on small target element'); + if(position == 'top left' || position == 'bottom left') { + offset += (target.width / 2) + offset -= settings.arrowPixelsFromEdge; + } + if(position == 'top right' || position == 'bottom right') { + offset -= (target.width / 2) + offset += settings.arrowPixelsFromEdge; + } + } + + if(target.width === 0 && target.height === 0 && !module.is.svg(target.element)) { + module.debug('Popup target is hidden, no action taken'); + return false; + } + + if(settings.inline) { + module.debug('Adding margin to calculation', target.margin); + if(position == 'left center' || position == 'right center') { + offset += target.margin.top; + distanceAway += -target.margin.left; + } + else if (position == 'top left' || position == 'top center' || position == 'top right') { + offset += target.margin.left; + distanceAway -= target.margin.top; + } + else { + offset += target.margin.left; + distanceAway += target.margin.top; + } + } + + module.debug('Determining popup position from calculations', position, calculations); + + if (module.is.rtl()) { + position = position.replace(/left|right/g, function (match) { + return (match == 'left') + ? 'right' + : 'left' + ; + }); + module.debug('RTL: Popup position updated', position); + } + + // if last attempt use specified last resort position + if(searchDepth == settings.maxSearchDepth && typeof settings.lastResort === 'string') { + position = settings.lastResort; + } + + switch (position) { + case 'top left': + positioning = { + top : 'auto', + bottom : parent.height - target.top + distanceAway, + left : target.left + offset, + right : 'auto' + }; + break; + case 'top center': + positioning = { + bottom : parent.height - target.top + distanceAway, + left : target.left + (target.width / 2) - (popup.width / 2) + offset, + top : 'auto', + right : 'auto' + }; + break; + case 'top right': + positioning = { + bottom : parent.height - target.top + distanceAway, + right : parent.width - target.left - target.width - offset, + top : 'auto', + left : 'auto' + }; + break; + case 'left center': + positioning = { + top : target.top + (target.height / 2) - (popup.height / 2) + offset, + right : parent.width - target.left + distanceAway, + left : 'auto', + bottom : 'auto' + }; + break; + case 'right center': + positioning = { + top : target.top + (target.height / 2) - (popup.height / 2) + offset, + left : target.left + target.width + distanceAway, + bottom : 'auto', + right : 'auto' + }; + break; + case 'bottom left': + positioning = { + top : target.top + target.height + distanceAway, + left : target.left + offset, + bottom : 'auto', + right : 'auto' + }; + break; + case 'bottom center': + positioning = { + top : target.top + target.height + distanceAway, + left : target.left + (target.width / 2) - (popup.width / 2) + offset, + bottom : 'auto', + right : 'auto' + }; + break; + case 'bottom right': + positioning = { + top : target.top + target.height + distanceAway, + right : parent.width - target.left - target.width - offset, + left : 'auto', + bottom : 'auto' + }; + break; + } + if(positioning === undefined) { + module.error(error.invalidPosition, position); + } + + module.debug('Calculated popup positioning values', positioning); + + // tentatively place on stage + $popup + .css(positioning) + .removeClass(className.position) + .addClass(position) + .addClass(className.loading) + ; + + popupOffset = module.get.popupOffset(); + + // see if any boundaries are surpassed with this tentative position + distanceFromBoundary = module.get.distanceFromBoundary(popupOffset, calculations); + + if( module.is.offstage(distanceFromBoundary, position) ) { + module.debug('Position is outside viewport', position); + if(searchDepth < settings.maxSearchDepth) { + searchDepth++; + position = module.get.nextPosition(position); + module.debug('Trying new position', position); + return ($popup) + ? module.set.position(position, calculations) + : false + ; + } + else { + if(settings.lastResort) { + module.debug('No position found, showing with last position'); + } + else { + module.debug('Popup could not find a position to display', $popup); + module.error(error.cannotPlace, element); + module.remove.attempts(); + module.remove.loading(); + module.reset(); + settings.onUnplaceable.call($popup, element); + return false; + } + } + } + module.debug('Position is on stage', position); + module.remove.attempts(); + module.remove.loading(); + if( settings.setFluidWidth && module.is.fluid() ) { + module.set.fluidWidth(calculations); + } + return true; + }, + + fluidWidth: function(calculations) { + calculations = calculations || module.get.calculations(); + module.debug('Automatically setting element width to parent width', calculations.parent.width); + $popup.css('width', calculations.container.width); + }, + + variation: function(variation) { + variation = variation || module.get.variation(); + if(variation && module.has.popup() ) { + module.verbose('Adding variation to popup', variation); + $popup.addClass(variation); + } + }, + + visible: function() { + $module.addClass(className.visible); + } + }, + + remove: { + loading: function() { + $popup.removeClass(className.loading); + }, + variation: function(variation) { + variation = variation || module.get.variation(); + if(variation) { + module.verbose('Removing variation', variation); + $popup.removeClass(variation); + } + }, + visible: function() { + $module.removeClass(className.visible); + }, + attempts: function() { + module.verbose('Resetting all searched positions'); + searchDepth = 0; + triedPositions = false; + } + }, + + bind: { + events: function() { + module.debug('Binding popup events to module'); + if(settings.on == 'click') { + $module + .on('click' + eventNamespace, module.toggle) + ; + } + if(settings.on == 'hover' && hasTouch) { + $module + .on('touchstart' + eventNamespace, module.event.touchstart) + ; + } + if( module.get.startEvent() ) { + $module + .on(module.get.startEvent() + eventNamespace, module.event.start) + .on(module.get.endEvent() + eventNamespace, module.event.end) + ; + } + if(settings.target) { + module.debug('Target set to element', $target); + } + $window.on('resize' + elementNamespace, module.event.resize); + }, + popup: function() { + module.verbose('Allowing hover events on popup to prevent closing'); + if( $popup && module.has.popup() ) { + $popup + .on('mouseenter' + eventNamespace, module.event.start) + .on('mouseleave' + eventNamespace, module.event.end) + ; + } + }, + close: function() { + if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { + module.bind.closeOnScroll(); + } + if(module.is.closable()) { + module.bind.clickaway(); + } + else if(settings.on == 'hover' && openedWithTouch) { + module.bind.touchClose(); + } + }, + closeOnScroll: function() { + module.verbose('Binding scroll close event to document'); + $scrollContext + .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully) + ; + }, + touchClose: function() { + module.verbose('Binding popup touchclose event to document'); + $document + .on('touchstart' + elementNamespace, function(event) { + module.verbose('Touched away from popup'); + module.event.hideGracefully.call(element, event); + }) + ; + }, + clickaway: function() { + module.verbose('Binding popup close event to document'); + $document + .on('click' + elementNamespace, function(event) { + module.verbose('Clicked away from popup'); + module.event.hideGracefully.call(element, event); + }) + ; + } + }, + + unbind: { + events: function() { + $window + .off(elementNamespace) + ; + $module + .off(eventNamespace) + ; + }, + close: function() { + $document + .off(elementNamespace) + ; + $scrollContext + .off(elementNamespace) + ; + }, + }, + + has: { + popup: function() { + return ($popup && $popup.length > 0); + } + }, + + should: { + centerArrow: function(calculations) { + return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2); + }, + }, + + is: { + closable: function() { + if(settings.closable == 'auto') { + if(settings.on == 'hover') { + return false; + } + return true; + } + return settings.closable; + }, + offstage: function(distanceFromBoundary, position) { + var + offstage = [] + ; + // return boundaries that have been surpassed + $.each(distanceFromBoundary, function(direction, distance) { + if(distance < -settings.jitter) { + module.debug('Position exceeds allowable distance from edge', direction, distance, position); + offstage.push(direction); + } + }); + if(offstage.length > 0) { + return true; + } + else { + return false; + } + }, + svg: function(element) { + return module.supports.svg() && (element instanceof SVGGraphicsElement); + }, + basic: function() { + return $module.hasClass(className.basic); + }, + active: function() { + return $module.hasClass(className.active); + }, + animating: function() { + return ($popup !== undefined && $popup.hasClass(className.animating) ); + }, + fluid: function() { + return ($popup !== undefined && $popup.hasClass(className.fluid)); + }, + visible: function() { + return ($popup !== undefined && $popup.hasClass(className.popupVisible)); + }, + dropdown: function() { + return $module.hasClass(className.dropdown); + }, + hidden: function() { + return !module.is.visible(); + }, + rtl: function () { + return $module.css('direction') == 'rtl'; + } + }, + + reset: function() { + module.remove.visible(); + if(settings.preserve) { + if($.fn.transition !== undefined) { + $popup + .transition('remove transition') + ; + } + } + else { + module.removePopup(); + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.popup.settings = { + + name : 'Popup', + + // module settings + silent : false, + debug : false, + verbose : false, + performance : true, + namespace : 'popup', + + // whether it should use dom mutation observers + observeChanges : true, + + // callback only when element added to dom + onCreate : function(){}, + + // callback before element removed from dom + onRemove : function(){}, + + // callback before show animation + onShow : function(){}, + + // callback after show animation + onVisible : function(){}, + + // callback before hide animation + onHide : function(){}, + + // callback when popup cannot be positioned in visible screen + onUnplaceable : function(){}, + + // callback after hide animation + onHidden : function(){}, + + // when to show popup + on : 'hover', + + // element to use to determine if popup is out of boundary + boundary : window, + + // whether to add touchstart events when using hover + addTouchEvents : true, + + // default position relative to element + position : 'top left', + + // name of variation to use + variation : '', + + // whether popup should be moved to context + movePopup : true, + + // element which popup should be relative to + target : false, + + // jq selector or element that should be used as popup + popup : false, + + // popup should remain inline next to activator + inline : false, + + // popup should be removed from page on hide + preserve : false, + + // popup should not close when being hovered on + hoverable : false, + + // explicitly set content + content : false, + + // explicitly set html + html : false, + + // explicitly set title + title : false, + + // whether automatically close on clickaway when on click + closable : true, + + // automatically hide on scroll + hideOnScroll : 'auto', + + // hide other popups on show + exclusive : false, + + // context to attach popups + context : 'body', + + // context for binding scroll events + scrollContext : window, + + // position to prefer when calculating new position + prefer : 'opposite', + + // specify position to appear even if it doesn't fit + lastResort : false, + + // number of pixels from edge of popup to pointing arrow center (used from centering) + arrowPixelsFromEdge: 20, + + // delay used to prevent accidental refiring of animations due to user error + delay : { + show : 50, + hide : 70 + }, + + // whether fluid variation should assign width explicitly + setFluidWidth : true, + + // transition settings + duration : 200, + transition : 'scale', + + // distance away from activating element in px + distanceAway : 0, + + // number of pixels an element is allowed to be "offstage" for a position to be chosen (allows for rounding) + jitter : 2, + + // offset on aligning axis from calculated position + offset : 0, + + // maximum times to look for a position before failing (9 positions total) + maxSearchDepth : 15, + + error: { + invalidPosition : 'The position you specified is not a valid position', + cannotPlace : 'Popup does not fit within the boundaries of the viewport', + method : 'The method you called is not defined.', + noTransition : 'This module requires ui transitions ', + notFound : 'The target or popup you specified does not exist on the page' + }, + + metadata: { + activator : 'activator', + content : 'content', + html : 'html', + offset : 'offset', + position : 'position', + title : 'title', + variation : 'variation' + }, + + className : { + active : 'active', + basic : 'basic', + animating : 'animating', + dropdown : 'dropdown', + fluid : 'fluid', + loading : 'loading', + popup : 'ui popup', + position : 'top left center bottom right', + visible : 'visible', + popupVisible : 'visible' + }, + + selector : { + popup : '.ui.popup' + }, + + templates: { + escape: function(string) { + var + badChars = /[&<>"'`]/g, + shouldEscape = /[&<>"'`]/, + escape = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'", + "`": "`" + }, + escapedChar = function(chr) { + return escape[chr]; + } + ; + if(shouldEscape.test(string)) { + return string.replace(badChars, escapedChar); + } + return string; + }, + popup: function(text) { + var + html = '', + escape = $.fn.popup.settings.templates.escape + ; + if(typeof text !== undefined) { + if(typeof text.title !== undefined && text.title) { + text.title = escape(text.title); + html += '
' + text.title + '
'; + } + if(typeof text.content !== undefined && text.content) { + text.content = escape(text.content); + html += '
' + text.content + '
'; + } + } + return html; + } + } + +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/popup.min.css b/semantic/components/popup.min.css new file mode 100644 index 0000000..81fb202 --- /dev/null +++ b/semantic/components/popup.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.popup{display:none;position:absolute;top:0;right:0;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;z-index:1900;border:1px solid #d4d4d5;line-height:1.4285em;max-width:250px;background:#fff;padding:.833em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.popup>.header{padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.14285714em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup:before{position:absolute;content:'';width:.71428571em;height:.71428571em;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-shadow:1px 1px 0 0 #bababc;box-shadow:1px 1px 0 0 #bababc}[data-tooltip]{position:relative}[data-tooltip]:before{pointer-events:none;position:absolute;content:'';font-size:1rem;width:.71428571em;height:.71428571em;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-shadow:1px 1px 0 0 #bababc;box-shadow:1px 1px 0 0 #bababc}[data-tooltip]:after{pointer-events:none;content:attr(data-tooltip);position:absolute;text-transform:none;text-align:left;white-space:nowrap;font-size:1rem;border:1px solid #d4d4d5;line-height:1.4285em;max-width:none;background:#fff;padding:.833em 1em;font-weight:400;font-style:normal;color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);z-index:1}[data-tooltip]:not([data-position]):before{top:auto;right:auto;bottom:100%;left:50%;background:#fff;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-tooltip]:not([data-position]):after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:100%;margin-bottom:.5em}[data-tooltip]:after,[data-tooltip]:before{pointer-events:none;visibility:hidden}[data-tooltip]:before{opacity:0;-webkit-transform:rotate(45deg) scale(0)!important;transform:rotate(45deg) scale(0)!important;-webkit-transform-origin:center top;transform-origin:center top;-webkit-transition:all .1s ease;transition:all .1s ease}[data-tooltip]:after{opacity:1;-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transition:all .1s ease;transition:all .1s ease}[data-tooltip]:hover:after,[data-tooltip]:hover:before{visibility:visible;pointer-events:auto}[data-tooltip]:hover:before{-webkit-transform:rotate(45deg) scale(1)!important;transform:rotate(45deg) scale(1)!important;opacity:1}[data-tooltip]:after,[data-tooltip][data-position="bottom center"]:after,[data-tooltip][data-position="top center"]:after{-webkit-transform:translateX(-50%) scale(0)!important;transform:translateX(-50%) scale(0)!important}[data-tooltip]:hover:after,[data-tooltip][data-position="bottom center"]:hover:after{-webkit-transform:translateX(-50%) scale(1)!important;transform:translateX(-50%) scale(1)!important}[data-tooltip][data-position="left center"]:after,[data-tooltip][data-position="right center"]:after{-webkit-transform:translateY(-50%) scale(0)!important;transform:translateY(-50%) scale(0)!important}[data-tooltip][data-position="left center"]:hover:after,[data-tooltip][data-position="right center"]:hover:after{-webkit-transform:translateY(-50%) scale(1)!important;transform:translateY(-50%) scale(1)!important}[data-tooltip][data-position="bottom left"]:after,[data-tooltip][data-position="bottom right"]:after,[data-tooltip][data-position="top left"]:after,[data-tooltip][data-position="top right"]:after{-webkit-transform:scale(0)!important;transform:scale(0)!important}[data-tooltip][data-position="bottom left"]:hover:after,[data-tooltip][data-position="bottom right"]:hover:after,[data-tooltip][data-position="top left"]:hover:after,[data-tooltip][data-position="top right"]:hover:after{-webkit-transform:scale(1)!important;transform:scale(1)!important}[data-tooltip][data-inverted]:before{-webkit-box-shadow:none!important;box-shadow:none!important}[data-tooltip][data-inverted]:before{background:#1b1c1d}[data-tooltip][data-inverted]:after{background:#1b1c1d;color:#fff;border:none;-webkit-box-shadow:none;box-shadow:none}[data-tooltip][data-inverted]:after .header{background-color:none;color:#fff}[data-position="top center"][data-tooltip]:after{top:auto;right:auto;left:50%;bottom:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin-bottom:.5em}[data-position="top center"][data-tooltip]:before{top:auto;right:auto;bottom:100%;left:50%;background:#fff;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position="top left"][data-tooltip]:after{top:auto;right:auto;left:0;bottom:100%;margin-bottom:.5em}[data-position="top left"][data-tooltip]:before{top:auto;right:auto;bottom:100%;left:1em;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position="top right"][data-tooltip]:after{top:auto;left:auto;right:0;bottom:100%;margin-bottom:.5em}[data-position="top right"][data-tooltip]:before{top:auto;left:auto;bottom:100%;right:1em;margin-left:-.07142857rem;margin-bottom:.14285714rem}[data-position="bottom center"][data-tooltip]:after{bottom:auto;right:auto;left:50%;top:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin-top:.5em}[data-position="bottom center"][data-tooltip]:before{bottom:auto;right:auto;top:100%;left:50%;margin-left:-.07142857rem;margin-top:.14285714rem}[data-position="bottom left"][data-tooltip]:after{left:0;top:100%;margin-top:.5em}[data-position="bottom left"][data-tooltip]:before{bottom:auto;right:auto;top:100%;left:1em;margin-left:-.07142857rem;margin-top:.14285714rem}[data-position="bottom right"][data-tooltip]:after{right:0;top:100%;margin-top:.5em}[data-position="bottom right"][data-tooltip]:before{bottom:auto;left:auto;top:100%;right:1em;margin-left:-.14285714rem;margin-top:.07142857rem}[data-position="left center"][data-tooltip]:after{right:100%;top:50%;margin-right:.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-position="left center"][data-tooltip]:before{right:100%;top:50%;margin-top:-.14285714rem;margin-right:-.07142857rem}[data-position="right center"][data-tooltip]:after{left:100%;top:50%;margin-left:.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-position="right center"][data-tooltip]:before{left:100%;top:50%;margin-top:-.07142857rem;margin-left:.14285714rem}[data-position~=bottom][data-tooltip]:before{background:#fff;-webkit-box-shadow:-1px -1px 0 0 #bababc;box-shadow:-1px -1px 0 0 #bababc}[data-position="left center"][data-tooltip]:before{background:#fff;-webkit-box-shadow:1px -1px 0 0 #bababc;box-shadow:1px -1px 0 0 #bababc}[data-position="right center"][data-tooltip]:before{background:#fff;-webkit-box-shadow:-1px 1px 0 0 #bababc;box-shadow:-1px 1px 0 0 #bababc}[data-position~=top][data-tooltip]:before{background:#fff}[data-inverted][data-position~=bottom][data-tooltip]:before{background:#1b1c1d;-webkit-box-shadow:-1px -1px 0 0 #bababc;box-shadow:-1px -1px 0 0 #bababc}[data-inverted][data-position="left center"][data-tooltip]:before{background:#1b1c1d;-webkit-box-shadow:1px -1px 0 0 #bababc;box-shadow:1px -1px 0 0 #bababc}[data-inverted][data-position="right center"][data-tooltip]:before{background:#1b1c1d;-webkit-box-shadow:-1px 1px 0 0 #bababc;box-shadow:-1px 1px 0 0 #bababc}[data-inverted][data-position~=top][data-tooltip]:before{background:#1b1c1d}[data-position~=bottom][data-tooltip]:before{-webkit-transform-origin:center bottom;transform-origin:center bottom}[data-position~=bottom][data-tooltip]:after{-webkit-transform-origin:center top;transform-origin:center top}[data-position="left center"][data-tooltip]:before{-webkit-transform-origin:top center;transform-origin:top center}[data-position="left center"][data-tooltip]:after{-webkit-transform-origin:right center;transform-origin:right center}[data-position="right center"][data-tooltip]:before{-webkit-transform-origin:right center;transform-origin:right center}[data-position="right center"][data-tooltip]:after{-webkit-transform-origin:left center;transform-origin:left center}.ui.popup{margin:0}.ui.top.popup{margin:0 0 .71428571em}.ui.top.left.popup{-webkit-transform-origin:left bottom;transform-origin:left bottom}.ui.top.center.popup{-webkit-transform-origin:center bottom;transform-origin:center bottom}.ui.top.right.popup{-webkit-transform-origin:right bottom;transform-origin:right bottom}.ui.left.center.popup{margin:0 .71428571em 0 0;-webkit-transform-origin:right 50%;transform-origin:right 50%}.ui.right.center.popup{margin:0 0 0 .71428571em;-webkit-transform-origin:left 50%;transform-origin:left 50%}.ui.bottom.popup{margin:.71428571em 0 0}.ui.bottom.left.popup{-webkit-transform-origin:left top;transform-origin:left top}.ui.bottom.center.popup{-webkit-transform-origin:center top;transform-origin:center top}.ui.bottom.right.popup{-webkit-transform-origin:right top;transform-origin:right top}.ui.bottom.center.popup:before{margin-left:-.30714286em;top:-.30714286em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 0 0 #bababc;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup:before{top:-.30714286em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 0 0 #bababc;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.right.popup{margin-right:0}.ui.bottom.right.popup:before{top:-.30714286em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 0 0 #bababc;box-shadow:-1px -1px 0 0 #bababc}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.30714286em;left:50%;margin-left:-.30714286em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup:before{bottom:-.30714286em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup:before{bottom:-.30714286em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.30714286em;bottom:auto;left:auto;margin-top:-.30714286em;-webkit-box-shadow:1px -1px 0 0 #bababc;box-shadow:1px -1px 0 0 #bababc}.ui.right.center.popup:before{top:50%;left:-.30714286em;bottom:auto;right:auto;margin-top:-.30714286em;-webkit-box-shadow:-1px 1px 0 0 #bababc;box-shadow:-1px 1px 0 0 #bababc}.ui.bottom.popup:before{background:#fff}.ui.left.center.popup:before,.ui.right.center.popup:before{background:#fff}.ui.top.popup:before{background:#fff}.ui.inverted.bottom.popup:before{background:#1b1c1d}.ui.inverted.left.center.popup:before,.ui.inverted.right.center.popup:before{background:#1b1c1d}.ui.inverted.top.popup:before{background:#1b1c1d}.ui.popup>.ui.grid:not(.padded){width:calc(100% + 1.75rem);margin:-.7rem -.875rem}.ui.loading.popup{display:block;visibility:hidden;z-index:-1}.ui.animating.popup,.ui.visible.popup{display:block}.ui.visible.popup{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.basic.popup:before{display:none}.ui.wide.popup{max-width:350px}.ui[class*="very wide"].popup{max-width:550px}@media only screen and (max-width:767px){.ui.wide.popup,.ui[class*="very wide"].popup{max-width:250px}}.ui.fluid.popup{width:100%;max-width:none}.ui.inverted.popup{background:#1b1c1d;color:#fff;border:none;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:none;color:#fff}.ui.inverted.popup:before{background-color:#1b1c1d;-webkit-box-shadow:none!important;box-shadow:none!important}.ui.flowing.popup{max-width:none}.ui.mini.popup{font-size:.78571429rem}.ui.tiny.popup{font-size:.85714286rem}.ui.small.popup{font-size:.92857143rem}.ui.popup{font-size:1rem}.ui.large.popup{font-size:1.14285714rem}.ui.huge.popup{font-size:1.42857143rem} \ No newline at end of file diff --git a/semantic/components/popup.min.js b/semantic/components/popup.min.js new file mode 100644 index 0000000..ecd7334 --- /dev/null +++ b/semantic/components/popup.min.js @@ -0,0 +1 @@ +!function(N,V,W,M){"use strict";V=void 0!==V&&V.Math==Math?V:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),N.fn.popup=function(x){var k,t=N(this),E=N(W),S=N(V),A=N("body"),F=t.selector||"",O=(new Date).getTime(),D=[],j=x,H="string"==typeof j,R=[].slice.call(arguments,1);return t.each(function(){var u,p,t,e,o,c,d=N.isPlainObject(x)?N.extend(!0,{},N.fn.popup.settings,x):N.extend({},N.fn.popup.settings),i=d.selector,f=d.className,g=d.error,h=d.metadata,n=d.namespace,r="."+d.namespace,a="module-"+n,m=N(this),s=N(d.context),l=N(d.scrollContext),v=N(d.boundary),b=d.target?N(d.target):m,w=0,y=!1,P=!1,C=this,T=m.data(a);c={initialize:function(){c.debug("Initializing",m),c.createID(),c.bind.events(),!c.exists()&&d.preserve&&c.create(),d.observeChanges&&c.observeChanges(),c.instantiate()},instantiate:function(){c.verbose("Storing instance",c),T=c,m.data(a,T)},observeChanges:function(){"MutationObserver"in V&&((t=new MutationObserver(c.event.documentChanged)).observe(W,{childList:!0,subtree:!0}),c.debug("Setting up mutation observer",t))},refresh:function(){d.popup?u=N(d.popup).eq(0):d.inline&&(u=b.nextAll(i.popup).eq(0),d.popup=u),d.popup?(u.addClass(f.loading),p=c.get.offsetParent(),u.removeClass(f.loading),d.movePopup&&c.has.popup()&&c.get.offsetParent(u)[0]!==p[0]&&(c.debug("Moving popup to the same offset parent as target"),u.detach().appendTo(p))):p=d.inline?c.get.offsetParent(b):c.has.popup()?c.get.offsetParent(u):A,p.is("html")&&p[0]!==A[0]&&(c.debug("Setting page as offset parent"),p=A),c.get.variation()&&c.set.variation()},reposition:function(){c.refresh(),c.set.position()},destroy:function(){c.debug("Destroying previous module"),t&&t.disconnect(),u&&!d.preserve&&c.removePopup(),clearTimeout(c.hideTimer),clearTimeout(c.showTimer),c.unbind.close(),c.unbind.events(),m.removeData(a)},event:{start:function(t){var e=N.isPlainObject(d.delay)?d.delay.show:d.delay;clearTimeout(c.hideTimer),P||(c.showTimer=setTimeout(c.show,e))},end:function(){var t=N.isPlainObject(d.delay)?d.delay.hide:d.delay;clearTimeout(c.showTimer),c.hideTimer=setTimeout(c.hide,t)},touchstart:function(t){P=!0,c.show()},resize:function(){c.is.visible()&&c.set.position()},documentChanged:function(t){[].forEach.call(t,function(t){t.removedNodes&&[].forEach.call(t.removedNodes,function(t){(t==C||0").addClass(f.popup).data(h.activator,m).html(t),d.inline?(c.verbose("Inserting popup element inline",u),u.insertAfter(m)):(c.verbose("Appending popup element to body",u),u.appendTo(s)),c.refresh(),c.set.variation(),d.hoverable&&c.bind.popup(),d.onCreate.call(u,C)):0!==b.next(i.popup).length?(c.verbose("Pre-existing popup found"),d.inline=!0,d.popup=b.next(i.popup).data(h.activator,m),c.refresh(),d.hoverable&&c.bind.popup()):d.popup?(N(d.popup).data(h.activator,m),c.verbose("Used popup specified in settings"),c.refresh(),d.hoverable&&c.bind.popup()):c.debug("No content specified skipping display",C)},createID:function(){o=(Math.random().toString(16)+"000000000").substr(2,8),e="."+o,c.verbose("Creating unique id for element",o)},toggle:function(){c.debug("Toggling pop-up"),c.is.hidden()?(c.debug("Popup is hidden, showing pop-up"),c.unbind.close(),c.show()):(c.debug("Popup is visible, hiding pop-up"),c.hide())},show:function(t){if(t=t||function(){},c.debug("Showing pop-up",d.transition),c.is.hidden()&&(!c.is.active()||!c.is.dropdown())){if(c.exists()||c.create(),!1===d.onShow.call(u,C))return void c.debug("onShow callback returned false, cancelling popup animation");d.preserve||d.popup||c.refresh(),u&&c.set.position()&&(c.save.conditions(),d.exclusive&&c.hideAll(),c.animate.show(t))}},hide:function(t){if(t=t||function(){},c.is.visible()||c.is.animating()){if(!1===d.onHide.call(u,C))return void c.debug("onHide callback returned false, cancelling popup animation");c.remove.visible(),c.unbind.close(),c.restore.conditions(),c.animate.hide(t)}},hideAll:function(){N(i.popup).filter("."+f.popupVisible).each(function(){N(this).data(h.activator).popup("hide")})},exists:function(){return!!u&&(d.inline||d.popup?c.has.popup():1<=u.closest(s).length)},removePopup:function(){c.has.popup()&&!d.popup&&(c.debug("Removing popup",u),u.remove(),u=M,d.onRemove.call(u,C))},save:{conditions:function(){c.cache={title:m.attr("title")},c.cache.title&&m.removeAttr("title"),c.verbose("Saving original attributes",c.cache.title)}},restore:{conditions:function(){return c.cache&&c.cache.title&&(m.attr("title",c.cache.title),c.verbose("Restoring original attributes",c.cache.title)),!0}},supports:{svg:function(){return"undefined"==typeof SVGGraphicsElement}},animate:{show:function(t){t=N.isFunction(t)?t:function(){},d.transition&&N.fn.transition!==M&&m.transition("is supported")?(c.set.visible(),u.transition({animation:d.transition+" in",queue:!1,debug:d.debug,verbose:d.verbose,duration:d.duration,onComplete:function(){c.bind.close(),t.call(u,C),d.onVisible.call(u,C)}})):c.error(g.noTransition)},hide:function(t){t=N.isFunction(t)?t:function(){},c.debug("Hiding pop-up"),!1!==d.onHide.call(u,C)?d.transition&&N.fn.transition!==M&&m.transition("is supported")?u.transition({animation:d.transition+" out",queue:!1,duration:d.duration,debug:d.debug,verbose:d.verbose,onComplete:function(){c.reset(),t.call(u,C),d.onHidden.call(u,C)}}):c.error(g.noTransition):c.debug("onHide callback returned false, cancelling popup animation")}},change:{content:function(t){u.html(t)}},get:{html:function(){return m.removeData(h.html),m.data(h.html)||d.html},title:function(){return m.removeData(h.title),m.data(h.title)||d.title},content:function(){return m.removeData(h.content),m.data(h.content)||d.content||m.attr("title")},variation:function(){return m.removeData(h.variation),m.data(h.variation)||d.variation},popup:function(){return u},popupOffset:function(){return u.offset()},calculations:function(){var t,e=c.get.offsetParent(u),o=b[0],n=v[0]==V,i=d.inline||d.popup&&d.movePopup?b.position():b.offset(),r=n?{top:0,left:0}:v.offset(),a={},s=n?{top:S.scrollTop(),left:S.scrollLeft()}:{top:0,left:0};if(a={target:{element:b[0],width:b.outerWidth(),height:b.outerHeight(),top:i.top,left:i.left,margin:{}},popup:{width:u.outerWidth(),height:u.outerHeight()},parent:{width:p.outerWidth(),height:p.outerHeight()},screen:{top:r.top,left:r.left,scroll:{top:s.top,left:s.left},width:v.width(),height:v.height()}},e.get(0)!==p.get(0)){var l=e.offset();a.target.top-=l.top,a.target.left-=l.left,a.parent.width=e.outerWidth(),a.parent.height=e.outerHeight()}return d.setFluidWidth&&c.is.fluid()&&(a.container={width:u.parent().outerWidth()},a.popup.width=a.container.width),a.target.margin.top=d.inline?parseInt(V.getComputedStyle(o).getPropertyValue("margin-top"),10):0,a.target.margin.left=d.inline?c.is.rtl()?parseInt(V.getComputedStyle(o).getPropertyValue("margin-right"),10):parseInt(V.getComputedStyle(o).getPropertyValue("margin-left"),10):0,t=a.screen,a.boundary={top:t.top+t.scroll.top,bottom:t.top+t.scroll.top+t.height,left:t.left+t.scroll.left,right:t.left+t.scroll.left+t.width},a},id:function(){return o},startEvent:function(){return"hover"==d.on?"mouseenter":"focus"==d.on&&"focus"},scrollEvent:function(){return"scroll"},endEvent:function(){return"hover"==d.on?"mouseleave":"focus"==d.on&&"blur"},distanceFromBoundary:function(t,e){var o,n,i={};return o=(e=e||c.get.calculations()).popup,n=e.boundary,t&&(i={top:t.top-n.top,left:t.left-n.left,right:n.right-(t.left+o.width),bottom:n.bottom-(t.top+o.height)},c.verbose("Distance from boundaries determined",t,i)),i},offsetParent:function(t){var e=(t!==M?t[0]:b[0]).parentNode,o=N(e);if(e)for(var n="none"===o.css("transform"),i="static"===o.css("position"),r=o.is("body");e&&!r&&i&&n;)e=e.parentNode,n="none"===(o=N(e)).css("transform"),i="static"===o.css("position"),r=o.is("body");return o&&0",notFound:"The target or popup you specified does not exist on the page"},metadata:{activator:"activator",content:"content",html:"html",offset:"offset",position:"position",title:"title",variation:"variation"},className:{active:"active",basic:"basic",animating:"animating",dropdown:"dropdown",fluid:"fluid",loading:"loading",popup:"ui popup",position:"top left center bottom right",visible:"visible",popupVisible:"visible"},selector:{popup:".ui.popup"},templates:{escape:function(t){var e={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"};return/[&<>"'`]/.test(t)?t.replace(/[&<>"'`]/g,function(t){return e[t]}):t},popup:function(t){var e="",o=N.fn.popup.settings.templates.escape;return typeof t!==M&&(typeof t.title!==M&&t.title&&(t.title=o(t.title),e+='
'+t.title+"
"),typeof t.content!==M&&t.content&&(t.content=o(t.content),e+='
'+t.content+"
")),e}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/progress.css b/semantic/components/progress.css new file mode 100644 index 0000000..c479d26 --- /dev/null +++ b/semantic/components/progress.css @@ -0,0 +1,517 @@ +/*! + * # Semantic UI 2.4.0 - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Progress +*******************************/ + +.ui.progress { + position: relative; + display: block; + max-width: 100%; + border: none; + margin: 1em 0em 2.5em; + -webkit-box-shadow: none; + box-shadow: none; + background: rgba(0, 0, 0, 0.1); + padding: 0em; + border-radius: 0.28571429rem; +} +.ui.progress:first-child { + margin: 0em 0em 2.5em; +} +.ui.progress:last-child { + margin: 0em 0em 1.5em; +} + + +/******************************* + Content +*******************************/ + + +/* Activity Bar */ +.ui.progress .bar { + display: block; + line-height: 1; + position: relative; + width: 0%; + min-width: 2em; + background: #888888; + border-radius: 0.28571429rem; + -webkit-transition: width 0.1s ease, background-color 0.1s ease; + transition: width 0.1s ease, background-color 0.1s ease; +} + +/* Percent Complete */ +.ui.progress .bar > .progress { + white-space: nowrap; + position: absolute; + width: auto; + font-size: 0.92857143em; + top: 50%; + right: 0.5em; + left: auto; + bottom: auto; + color: rgba(255, 255, 255, 0.7); + text-shadow: none; + margin-top: -0.5em; + font-weight: bold; + text-align: left; +} + +/* Label */ +.ui.progress > .label { + position: absolute; + width: 100%; + font-size: 1em; + top: 100%; + right: auto; + left: 0%; + bottom: auto; + color: rgba(0, 0, 0, 0.87); + font-weight: bold; + text-shadow: none; + margin-top: 0.2em; + text-align: center; + -webkit-transition: color 0.4s ease; + transition: color 0.4s ease; +} + + +/******************************* + Types +*******************************/ + + +/* Indicating */ +.ui.indicating.progress[data-percent^="1"] .bar, +.ui.indicating.progress[data-percent^="2"] .bar { + background-color: #D95C5C; +} +.ui.indicating.progress[data-percent^="3"] .bar { + background-color: #EFBC72; +} +.ui.indicating.progress[data-percent^="4"] .bar, +.ui.indicating.progress[data-percent^="5"] .bar { + background-color: #E6BB48; +} +.ui.indicating.progress[data-percent^="6"] .bar { + background-color: #DDC928; +} +.ui.indicating.progress[data-percent^="7"] .bar, +.ui.indicating.progress[data-percent^="8"] .bar { + background-color: #B4D95C; +} +.ui.indicating.progress[data-percent^="9"] .bar, +.ui.indicating.progress[data-percent^="100"] .bar { + background-color: #66DA81; +} + +/* Indicating Label */ +.ui.indicating.progress[data-percent^="1"] .label, +.ui.indicating.progress[data-percent^="2"] .label { + color: rgba(0, 0, 0, 0.87); +} +.ui.indicating.progress[data-percent^="3"] .label { + color: rgba(0, 0, 0, 0.87); +} +.ui.indicating.progress[data-percent^="4"] .label, +.ui.indicating.progress[data-percent^="5"] .label { + color: rgba(0, 0, 0, 0.87); +} +.ui.indicating.progress[data-percent^="6"] .label { + color: rgba(0, 0, 0, 0.87); +} +.ui.indicating.progress[data-percent^="7"] .label, +.ui.indicating.progress[data-percent^="8"] .label { + color: rgba(0, 0, 0, 0.87); +} +.ui.indicating.progress[data-percent^="9"] .label, +.ui.indicating.progress[data-percent^="100"] .label { + color: rgba(0, 0, 0, 0.87); +} + +/* Single Digits */ +.ui.indicating.progress[data-percent="1"] .bar, +.ui.indicating.progress[data-percent="2"] .bar, +.ui.indicating.progress[data-percent="3"] .bar, +.ui.indicating.progress[data-percent="4"] .bar, +.ui.indicating.progress[data-percent="5"] .bar, +.ui.indicating.progress[data-percent="6"] .bar, +.ui.indicating.progress[data-percent="7"] .bar, +.ui.indicating.progress[data-percent="8"] .bar, +.ui.indicating.progress[data-percent="9"] .bar { + background-color: #D95C5C; +} +.ui.indicating.progress[data-percent="1"] .label, +.ui.indicating.progress[data-percent="2"] .label, +.ui.indicating.progress[data-percent="3"] .label, +.ui.indicating.progress[data-percent="4"] .label, +.ui.indicating.progress[data-percent="5"] .label, +.ui.indicating.progress[data-percent="6"] .label, +.ui.indicating.progress[data-percent="7"] .label, +.ui.indicating.progress[data-percent="8"] .label, +.ui.indicating.progress[data-percent="9"] .label { + color: rgba(0, 0, 0, 0.87); +} + +/* Indicating Success */ +.ui.indicating.progress.success .label { + color: #1A531B; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Success +---------------*/ + +.ui.progress.success .bar { + background-color: #21BA45 !important; +} +.ui.progress.success .bar, +.ui.progress.success .bar::after { + -webkit-animation: none !important; + animation: none !important; +} +.ui.progress.success > .label { + color: #1A531B; +} + +/*-------------- + Warning +---------------*/ + +.ui.progress.warning .bar { + background-color: #F2C037 !important; +} +.ui.progress.warning .bar, +.ui.progress.warning .bar::after { + -webkit-animation: none !important; + animation: none !important; +} +.ui.progress.warning > .label { + color: #794B02; +} + +/*-------------- + Error +---------------*/ + +.ui.progress.error .bar { + background-color: #DB2828 !important; +} +.ui.progress.error .bar, +.ui.progress.error .bar::after { + -webkit-animation: none !important; + animation: none !important; +} +.ui.progress.error > .label { + color: #912D2B; +} + +/*-------------- + Active +---------------*/ + +.ui.active.progress .bar { + position: relative; + min-width: 2em; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFFFFF; + border-radius: 0.28571429rem; + -webkit-animation: progress-active 2s ease infinite; + animation: progress-active 2s ease infinite; +} +@-webkit-keyframes progress-active { + 0% { + opacity: 0.3; + width: 0; + } + 100% { + opacity: 0; + width: 100%; + } +} +@keyframes progress-active { + 0% { + opacity: 0.3; + width: 0; + } + 100% { + opacity: 0; + width: 100%; + } +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + -webkit-animation: none !important; + animation: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.progress { + background: rgba(255, 255, 255, 0.08); + border: none; +} +.ui.inverted.progress .bar { + background: #888888; +} +.ui.inverted.progress .bar > .progress { + color: #F9FAFB; +} +.ui.inverted.progress > .label { + color: #FFFFFF; +} +.ui.inverted.progress.success > .label { + color: #21BA45; +} +.ui.inverted.progress.warning > .label { + color: #F2C037; +} +.ui.inverted.progress.error > .label { + color: #DB2828; +} + +/*-------------- + Attached +---------------*/ + + +/* bottom attached */ +.ui.progress.attached { + background: transparent; + position: relative; + border: none; + margin: 0em; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: 0.2rem; + padding: 0px; + overflow: hidden; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.progress.attached .bar { + border-radius: 0em; +} + +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: 0px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.progress.top.attached .bar { + border-radius: 0em; +} + +/* Coupling */ +.ui.segment > .ui.attached.progress, +.ui.card > .ui.attached.progress { + position: absolute; + top: auto; + left: 0; + bottom: 100%; + width: 100%; +} +.ui.segment > .ui.bottom.attached.progress, +.ui.card > .ui.bottom.attached.progress { + top: 100%; + bottom: auto; +} + +/*-------------- + Colors +---------------*/ + + +/* Red */ +.ui.red.progress .bar { + background-color: #DB2828; +} +.ui.red.inverted.progress .bar { + background-color: #FF695E; +} + +/* Orange */ +.ui.orange.progress .bar { + background-color: #F2711C; +} +.ui.orange.inverted.progress .bar { + background-color: #FF851B; +} + +/* Yellow */ +.ui.yellow.progress .bar { + background-color: #FBBD08; +} +.ui.yellow.inverted.progress .bar { + background-color: #FFE21F; +} + +/* Olive */ +.ui.olive.progress .bar { + background-color: #B5CC18; +} +.ui.olive.inverted.progress .bar { + background-color: #D9E778; +} + +/* Green */ +.ui.green.progress .bar { + background-color: #21BA45; +} +.ui.green.inverted.progress .bar { + background-color: #2ECC40; +} + +/* Teal */ +.ui.teal.progress .bar { + background-color: #00B5AD; +} +.ui.teal.inverted.progress .bar { + background-color: #6DFFFF; +} + +/* Blue */ +.ui.blue.progress .bar { + background-color: #2185D0; +} +.ui.blue.inverted.progress .bar { + background-color: #54C8FF; +} + +/* Violet */ +.ui.violet.progress .bar { + background-color: #6435C9; +} +.ui.violet.inverted.progress .bar { + background-color: #A291FB; +} + +/* Purple */ +.ui.purple.progress .bar { + background-color: #A333C8; +} +.ui.purple.inverted.progress .bar { + background-color: #DC73FF; +} + +/* Pink */ +.ui.pink.progress .bar { + background-color: #E03997; +} +.ui.pink.inverted.progress .bar { + background-color: #FF8EDF; +} + +/* Brown */ +.ui.brown.progress .bar { + background-color: #A5673F; +} +.ui.brown.inverted.progress .bar { + background-color: #D67C1C; +} + +/* Grey */ +.ui.grey.progress .bar { + background-color: #767676; +} +.ui.grey.inverted.progress .bar { + background-color: #DCDDDE; +} + +/* Black */ +.ui.black.progress .bar { + background-color: #1B1C1D; +} +.ui.black.inverted.progress .bar { + background-color: #545454; +} + +/*-------------- + Sizes +---------------*/ + +.ui.tiny.progress { + font-size: 0.85714286rem; +} +.ui.tiny.progress .bar { + height: 0.5em; +} +.ui.small.progress { + font-size: 0.92857143rem; +} +.ui.small.progress .bar { + height: 1em; +} +.ui.progress { + font-size: 1rem; +} +.ui.progress .bar { + height: 1.75em; +} +.ui.large.progress { + font-size: 1.14285714rem; +} +.ui.large.progress .bar { + height: 2.5em; +} +.ui.big.progress { + font-size: 1.28571429rem; +} +.ui.big.progress .bar { + height: 3.5em; +} + + +/******************************* + Progress +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/progress.js b/semantic/components/progress.js new file mode 100644 index 0000000..d727f77 --- /dev/null +++ b/semantic/components/progress.js @@ -0,0 +1,931 @@ +/*! + * # Semantic UI 2.4.1 - Progress + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +var + global = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.progress = function(parameters) { + var + $allModules = $(this), + + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.progress.settings, parameters) + : $.extend({}, $.fn.progress.settings), + + className = settings.className, + metadata = settings.metadata, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $bar = $(this).find(selector.bar), + $progress = $(this).find(selector.progress), + $label = $(this).find(selector.label), + + element = this, + instance = $module.data(moduleNamespace), + + animating = false, + transitionEnd, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing progress bar', settings); + + module.set.duration(); + module.set.transitionEvent(); + + module.read.metadata(); + module.read.settings(); + + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of progress', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + destroy: function() { + module.verbose('Destroying previous progress for', $module); + clearInterval(instance.interval); + module.remove.state(); + $module.removeData(moduleNamespace); + instance = undefined; + }, + + reset: function() { + module.remove.nextValue(); + module.update.progress(0); + }, + + complete: function() { + if(module.percent === undefined || module.percent < 100) { + module.remove.progressPoll(); + module.set.percent(100); + } + }, + + read: { + metadata: function() { + var + data = { + percent : $module.data(metadata.percent), + total : $module.data(metadata.total), + value : $module.data(metadata.value) + } + ; + if(data.percent) { + module.debug('Current percent value set from metadata', data.percent); + module.set.percent(data.percent); + } + if(data.total) { + module.debug('Total value set from metadata', data.total); + module.set.total(data.total); + } + if(data.value) { + module.debug('Current value set from metadata', data.value); + module.set.value(data.value); + module.set.progress(data.value); + } + }, + settings: function() { + if(settings.total !== false) { + module.debug('Current total set in settings', settings.total); + module.set.total(settings.total); + } + if(settings.value !== false) { + module.debug('Current value set in settings', settings.value); + module.set.value(settings.value); + module.set.progress(module.value); + } + if(settings.percent !== false) { + module.debug('Current percent set in settings', settings.percent); + module.set.percent(settings.percent); + } + } + }, + + bind: { + transitionEnd: function(callback) { + var + transitionEnd = module.get.transitionEnd() + ; + $bar + .one(transitionEnd + eventNamespace, function(event) { + clearTimeout(module.failSafeTimer); + callback.call(this, event); + }) + ; + module.failSafeTimer = setTimeout(function() { + $bar.triggerHandler(transitionEnd); + }, settings.duration + settings.failSafeDelay); + module.verbose('Adding fail safe timer', module.timer); + } + }, + + increment: function(incrementValue) { + var + maxValue, + startValue, + newValue + ; + if( module.has.total() ) { + startValue = module.get.value(); + incrementValue = incrementValue || 1; + newValue = startValue + incrementValue; + } + else { + startValue = module.get.percent(); + incrementValue = incrementValue || module.get.randomValue(); + + newValue = startValue + incrementValue; + maxValue = 100; + module.debug('Incrementing percentage by', startValue, newValue); + } + newValue = module.get.normalizedValue(newValue); + module.set.progress(newValue); + }, + decrement: function(decrementValue) { + var + total = module.get.total(), + startValue, + newValue + ; + if(total) { + startValue = module.get.value(); + decrementValue = decrementValue || 1; + newValue = startValue - decrementValue; + module.debug('Decrementing value by', decrementValue, startValue); + } + else { + startValue = module.get.percent(); + decrementValue = decrementValue || module.get.randomValue(); + newValue = startValue - decrementValue; + module.debug('Decrementing percentage by', decrementValue, startValue); + } + newValue = module.get.normalizedValue(newValue); + module.set.progress(newValue); + }, + + has: { + progressPoll: function() { + return module.progressPoll; + }, + total: function() { + return (module.get.total() !== false); + } + }, + + get: { + text: function(templateText) { + var + value = module.value || 0, + total = module.total || 0, + percent = (animating) + ? module.get.displayPercent() + : module.percent || 0, + left = (module.total > 0) + ? (total - value) + : (100 - percent) + ; + templateText = templateText || ''; + templateText = templateText + .replace('{value}', value) + .replace('{total}', total) + .replace('{left}', left) + .replace('{percent}', percent) + ; + module.verbose('Adding variables to progress bar text', templateText); + return templateText; + }, + + normalizedValue: function(value) { + if(value < 0) { + module.debug('Value cannot decrement below 0'); + return 0; + } + if(module.has.total()) { + if(value > module.total) { + module.debug('Value cannot increment above total', module.total); + return module.total; + } + } + else if(value > 100 ) { + module.debug('Value cannot increment above 100 percent'); + return 100; + } + return value; + }, + + updateInterval: function() { + if(settings.updateInterval == 'auto') { + return settings.duration; + } + return settings.updateInterval; + }, + + randomValue: function() { + module.debug('Generating random increment percentage'); + return Math.floor((Math.random() * settings.random.max) + settings.random.min); + }, + + numericValue: function(value) { + return (typeof value === 'string') + ? (value.replace(/[^\d.]/g, '') !== '') + ? +(value.replace(/[^\d.]/g, '')) + : false + : value + ; + }, + + transitionEnd: function() { + var + element = document.createElement('element'), + transitions = { + 'transition' :'transitionend', + 'OTransition' :'oTransitionEnd', + 'MozTransition' :'transitionend', + 'WebkitTransition' :'webkitTransitionEnd' + }, + transition + ; + for(transition in transitions){ + if( element.style[transition] !== undefined ){ + return transitions[transition]; + } + } + }, + + // gets current displayed percentage (if animating values this is the intermediary value) + displayPercent: function() { + var + barWidth = $bar.width(), + totalWidth = $module.width(), + minDisplay = parseInt($bar.css('min-width'), 10), + displayPercent = (barWidth > minDisplay) + ? (barWidth / totalWidth * 100) + : module.percent + ; + return (settings.precision > 0) + ? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(displayPercent) + ; + }, + + percent: function() { + return module.percent || 0; + }, + value: function() { + return module.nextValue || module.value || 0; + }, + total: function() { + return module.total || false; + } + }, + + create: { + progressPoll: function() { + module.progressPoll = setTimeout(function() { + module.update.toNextValue(); + module.remove.progressPoll(); + }, module.get.updateInterval()); + }, + }, + + is: { + complete: function() { + return module.is.success() || module.is.warning() || module.is.error(); + }, + success: function() { + return $module.hasClass(className.success); + }, + warning: function() { + return $module.hasClass(className.warning); + }, + error: function() { + return $module.hasClass(className.error); + }, + active: function() { + return $module.hasClass(className.active); + }, + visible: function() { + return $module.is(':visible'); + } + }, + + remove: { + progressPoll: function() { + module.verbose('Removing progress poll timer'); + if(module.progressPoll) { + clearTimeout(module.progressPoll); + delete module.progressPoll; + } + }, + nextValue: function() { + module.verbose('Removing progress value stored for next update'); + delete module.nextValue; + }, + state: function() { + module.verbose('Removing stored state'); + delete module.total; + delete module.percent; + delete module.value; + }, + active: function() { + module.verbose('Removing active state'); + $module.removeClass(className.active); + }, + success: function() { + module.verbose('Removing success state'); + $module.removeClass(className.success); + }, + warning: function() { + module.verbose('Removing warning state'); + $module.removeClass(className.warning); + }, + error: function() { + module.verbose('Removing error state'); + $module.removeClass(className.error); + } + }, + + set: { + barWidth: function(value) { + if(value > 100) { + module.error(error.tooHigh, value); + } + else if (value < 0) { + module.error(error.tooLow, value); + } + else { + $bar + .css('width', value + '%') + ; + $module + .attr('data-percent', parseInt(value, 10)) + ; + } + }, + duration: function(duration) { + duration = duration || settings.duration; + duration = (typeof duration == 'number') + ? duration + 'ms' + : duration + ; + module.verbose('Setting progress bar transition duration', duration); + $bar + .css({ + 'transition-duration': duration + }) + ; + }, + percent: function(percent) { + percent = (typeof percent == 'string') + ? +(percent.replace('%', '')) + : percent + ; + // round display percentage + percent = (settings.precision > 0) + ? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(percent) + ; + module.percent = percent; + if( !module.has.total() ) { + module.value = (settings.precision > 0) + ? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision) + : Math.round( (percent / 100) * module.total * 10) / 10 + ; + if(settings.limitValues) { + module.value = (module.value > 100) + ? 100 + : (module.value < 0) + ? 0 + : module.value + ; + } + } + module.set.barWidth(percent); + module.set.labelInterval(); + module.set.labels(); + settings.onChange.call(element, percent, module.value, module.total); + }, + labelInterval: function() { + var + animationCallback = function() { + module.verbose('Bar finished animating, removing continuous label updates'); + clearInterval(module.interval); + animating = false; + module.set.labels(); + } + ; + clearInterval(module.interval); + module.bind.transitionEnd(animationCallback); + animating = true; + module.interval = setInterval(function() { + var + isInDOM = $.contains(document.documentElement, element) + ; + if(!isInDOM) { + clearInterval(module.interval); + animating = false; + } + module.set.labels(); + }, settings.framerate); + }, + labels: function() { + module.verbose('Setting both bar progress and outer label text'); + module.set.barLabel(); + module.set.state(); + }, + label: function(text) { + text = text || ''; + if(text) { + text = module.get.text(text); + module.verbose('Setting label to text', text); + $label.text(text); + } + }, + state: function(percent) { + percent = (percent !== undefined) + ? percent + : module.percent + ; + if(percent === 100) { + if(settings.autoSuccess && !(module.is.warning() || module.is.error() || module.is.success())) { + module.set.success(); + module.debug('Automatically triggering success at 100%'); + } + else { + module.verbose('Reached 100% removing active state'); + module.remove.active(); + module.remove.progressPoll(); + } + } + else if(percent > 0) { + module.verbose('Adjusting active progress bar label', percent); + module.set.active(); + } + else { + module.remove.active(); + module.set.label(settings.text.active); + } + }, + barLabel: function(text) { + if(text !== undefined) { + $progress.text( module.get.text(text) ); + } + else if(settings.label == 'ratio' && module.total) { + module.verbose('Adding ratio to bar label'); + $progress.text( module.get.text(settings.text.ratio) ); + } + else if(settings.label == 'percent') { + module.verbose('Adding percentage to bar label'); + $progress.text( module.get.text(settings.text.percent) ); + } + }, + active: function(text) { + text = text || settings.text.active; + module.debug('Setting active state'); + if(settings.showActivity && !module.is.active() ) { + $module.addClass(className.active); + } + module.remove.warning(); + module.remove.error(); + module.remove.success(); + text = settings.onLabelUpdate('active', text, module.value, module.total); + if(text) { + module.set.label(text); + } + module.bind.transitionEnd(function() { + settings.onActive.call(element, module.value, module.total); + }); + }, + success : function(text) { + text = text || settings.text.success || settings.text.active; + module.debug('Setting success state'); + $module.addClass(className.success); + module.remove.active(); + module.remove.warning(); + module.remove.error(); + module.complete(); + if(settings.text.success) { + text = settings.onLabelUpdate('success', text, module.value, module.total); + module.set.label(text); + } + else { + text = settings.onLabelUpdate('active', text, module.value, module.total); + module.set.label(text); + } + module.bind.transitionEnd(function() { + settings.onSuccess.call(element, module.total); + }); + }, + warning : function(text) { + text = text || settings.text.warning; + module.debug('Setting warning state'); + $module.addClass(className.warning); + module.remove.active(); + module.remove.success(); + module.remove.error(); + module.complete(); + text = settings.onLabelUpdate('warning', text, module.value, module.total); + if(text) { + module.set.label(text); + } + module.bind.transitionEnd(function() { + settings.onWarning.call(element, module.value, module.total); + }); + }, + error : function(text) { + text = text || settings.text.error; + module.debug('Setting error state'); + $module.addClass(className.error); + module.remove.active(); + module.remove.success(); + module.remove.warning(); + module.complete(); + text = settings.onLabelUpdate('error', text, module.value, module.total); + if(text) { + module.set.label(text); + } + module.bind.transitionEnd(function() { + settings.onError.call(element, module.value, module.total); + }); + }, + transitionEvent: function() { + transitionEnd = module.get.transitionEnd(); + }, + total: function(totalValue) { + module.total = totalValue; + }, + value: function(value) { + module.value = value; + }, + progress: function(value) { + if(!module.has.progressPoll()) { + module.debug('First update in progress update interval, immediately updating', value); + module.update.progress(value); + module.create.progressPoll(); + } + else { + module.debug('Updated within interval, setting next update to use new value', value); + module.set.nextValue(value); + } + }, + nextValue: function(value) { + module.nextValue = value; + } + }, + + update: { + toNextValue: function() { + var + nextValue = module.nextValue + ; + if(nextValue) { + module.debug('Update interval complete using last updated value', nextValue); + module.update.progress(nextValue); + module.remove.nextValue(); + } + }, + progress: function(value) { + var + percentComplete + ; + value = module.get.numericValue(value); + if(value === false) { + module.error(error.nonNumeric, value); + } + value = module.get.normalizedValue(value); + if( module.has.total() ) { + module.set.value(value); + percentComplete = (value / module.total) * 100; + module.debug('Calculating percent complete from total', percentComplete); + module.set.percent( percentComplete ); + } + else { + percentComplete = value; + module.debug('Setting value to exact percentage value', percentComplete); + module.set.percent( percentComplete ); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.progress.settings = { + + name : 'Progress', + namespace : 'progress', + + silent : false, + debug : false, + verbose : false, + performance : true, + + random : { + min : 2, + max : 5 + }, + + duration : 300, + + updateInterval : 'auto', + + autoSuccess : true, + showActivity : true, + limitValues : true, + + label : 'percent', + precision : 0, + framerate : (1000 / 30), /// 30 fps + + percent : false, + total : false, + value : false, + + // delay in ms for fail safe animation callback + failSafeDelay : 100, + + onLabelUpdate : function(state, text, value, total){ + return text; + }, + onChange : function(percent, value, total){}, + onSuccess : function(total){}, + onActive : function(value, total){}, + onError : function(value, total){}, + onWarning : function(value, total){}, + + error : { + method : 'The method you called is not defined.', + nonNumeric : 'Progress value is non numeric', + tooHigh : 'Value specified is above 100%', + tooLow : 'Value specified is below 0%' + }, + + regExp: { + variable: /\{\$*[A-z0-9]+\}/g + }, + + metadata: { + percent : 'percent', + total : 'total', + value : 'value' + }, + + selector : { + bar : '> .bar', + label : '> .label', + progress : '.bar > .progress' + }, + + text : { + active : false, + error : false, + success : false, + warning : false, + percent : '{percent}%', + ratio : '{value} of {total}' + }, + + className : { + active : 'active', + error : 'error', + success : 'success', + warning : 'warning' + } + +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/progress.min.css b/semantic/components/progress.min.css new file mode 100644 index 0000000..9328a2d --- /dev/null +++ b/semantic/components/progress.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.progress{position:relative;display:block;max-width:100%;border:none;margin:1em 0 2.5em;-webkit-box-shadow:none;box-shadow:none;background:rgba(0,0,0,.1);padding:0;border-radius:.28571429rem}.ui.progress:first-child{margin:0 0 2.5em}.ui.progress:last-child{margin:0 0 1.5em}.ui.progress .bar{display:block;line-height:1;position:relative;width:0%;min-width:2em;background:#888;border-radius:.28571429rem;-webkit-transition:width .1s ease,background-color .1s ease;transition:width .1s ease,background-color .1s ease}.ui.progress .bar>.progress{white-space:nowrap;position:absolute;width:auto;font-size:.92857143em;top:50%;right:.5em;left:auto;bottom:auto;color:rgba(255,255,255,.7);text-shadow:none;margin-top:-.5em;font-weight:700;text-align:left}.ui.progress>.label{position:absolute;width:100%;font-size:1em;top:100%;right:auto;left:0;bottom:auto;color:rgba(0,0,0,.87);font-weight:700;text-shadow:none;margin-top:.2em;text-align:center;-webkit-transition:color .4s ease;transition:color .4s ease}.ui.indicating.progress[data-percent^="1"] .bar,.ui.indicating.progress[data-percent^="2"] .bar{background-color:#d95c5c}.ui.indicating.progress[data-percent^="3"] .bar{background-color:#efbc72}.ui.indicating.progress[data-percent^="4"] .bar,.ui.indicating.progress[data-percent^="5"] .bar{background-color:#e6bb48}.ui.indicating.progress[data-percent^="6"] .bar{background-color:#ddc928}.ui.indicating.progress[data-percent^="7"] .bar,.ui.indicating.progress[data-percent^="8"] .bar{background-color:#b4d95c}.ui.indicating.progress[data-percent^="100"] .bar,.ui.indicating.progress[data-percent^="9"] .bar{background-color:#66da81}.ui.indicating.progress[data-percent^="1"] .label,.ui.indicating.progress[data-percent^="2"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="3"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="4"] .label,.ui.indicating.progress[data-percent^="5"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="6"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="7"] .label,.ui.indicating.progress[data-percent^="8"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent^="100"] .label,.ui.indicating.progress[data-percent^="9"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress[data-percent="1"] .bar,.ui.indicating.progress[data-percent="2"] .bar,.ui.indicating.progress[data-percent="3"] .bar,.ui.indicating.progress[data-percent="4"] .bar,.ui.indicating.progress[data-percent="5"] .bar,.ui.indicating.progress[data-percent="6"] .bar,.ui.indicating.progress[data-percent="7"] .bar,.ui.indicating.progress[data-percent="8"] .bar,.ui.indicating.progress[data-percent="9"] .bar{background-color:#d95c5c}.ui.indicating.progress[data-percent="1"] .label,.ui.indicating.progress[data-percent="2"] .label,.ui.indicating.progress[data-percent="3"] .label,.ui.indicating.progress[data-percent="4"] .label,.ui.indicating.progress[data-percent="5"] .label,.ui.indicating.progress[data-percent="6"] .label,.ui.indicating.progress[data-percent="7"] .label,.ui.indicating.progress[data-percent="8"] .label,.ui.indicating.progress[data-percent="9"] .label{color:rgba(0,0,0,.87)}.ui.indicating.progress.success .label{color:#1a531b}.ui.progress.success .bar{background-color:#21ba45!important}.ui.progress.success .bar,.ui.progress.success .bar::after{-webkit-animation:none!important;animation:none!important}.ui.progress.success>.label{color:#1a531b}.ui.progress.warning .bar{background-color:#f2c037!important}.ui.progress.warning .bar,.ui.progress.warning .bar::after{-webkit-animation:none!important;animation:none!important}.ui.progress.warning>.label{color:#794b02}.ui.progress.error .bar{background-color:#db2828!important}.ui.progress.error .bar,.ui.progress.error .bar::after{-webkit-animation:none!important;animation:none!important}.ui.progress.error>.label{color:#912d2b}.ui.active.progress .bar{position:relative;min-width:2em}.ui.active.progress .bar::after{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:.28571429rem;-webkit-animation:progress-active 2s ease infinite;animation:progress-active 2s ease infinite}@-webkit-keyframes progress-active{0%{opacity:.3;width:0}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:.3;width:0}100%{opacity:0;width:100%}}.ui.disabled.progress{opacity:.35}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after{-webkit-animation:none!important;animation:none!important}.ui.inverted.progress{background:rgba(255,255,255,.08);border:none}.ui.inverted.progress .bar{background:#888}.ui.inverted.progress .bar>.progress{color:#f9fafb}.ui.inverted.progress>.label{color:#fff}.ui.inverted.progress.success>.label{color:#21ba45}.ui.inverted.progress.warning>.label{color:#f2c037}.ui.inverted.progress.error>.label{color:#db2828}.ui.progress.attached{background:0 0;position:relative;border:none;margin:0}.ui.progress.attached,.ui.progress.attached .bar{display:block;height:.2rem;padding:0;overflow:hidden;border-radius:0 0 .28571429rem .28571429rem}.ui.progress.attached .bar{border-radius:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{top:0;border-radius:.28571429rem .28571429rem 0 0}.ui.progress.top.attached .bar{border-radius:0}.ui.card>.ui.attached.progress,.ui.segment>.ui.attached.progress{position:absolute;top:auto;left:0;bottom:100%;width:100%}.ui.card>.ui.bottom.attached.progress,.ui.segment>.ui.bottom.attached.progress{top:100%;bottom:auto}.ui.red.progress .bar{background-color:#db2828}.ui.red.inverted.progress .bar{background-color:#ff695e}.ui.orange.progress .bar{background-color:#f2711c}.ui.orange.inverted.progress .bar{background-color:#ff851b}.ui.yellow.progress .bar{background-color:#fbbd08}.ui.yellow.inverted.progress .bar{background-color:#ffe21f}.ui.olive.progress .bar{background-color:#b5cc18}.ui.olive.inverted.progress .bar{background-color:#d9e778}.ui.green.progress .bar{background-color:#21ba45}.ui.green.inverted.progress .bar{background-color:#2ecc40}.ui.teal.progress .bar{background-color:#00b5ad}.ui.teal.inverted.progress .bar{background-color:#6dffff}.ui.blue.progress .bar{background-color:#2185d0}.ui.blue.inverted.progress .bar{background-color:#54c8ff}.ui.violet.progress .bar{background-color:#6435c9}.ui.violet.inverted.progress .bar{background-color:#a291fb}.ui.purple.progress .bar{background-color:#a333c8}.ui.purple.inverted.progress .bar{background-color:#dc73ff}.ui.pink.progress .bar{background-color:#e03997}.ui.pink.inverted.progress .bar{background-color:#ff8edf}.ui.brown.progress .bar{background-color:#a5673f}.ui.brown.inverted.progress .bar{background-color:#d67c1c}.ui.grey.progress .bar{background-color:#767676}.ui.grey.inverted.progress .bar{background-color:#dcddde}.ui.black.progress .bar{background-color:#1b1c1d}.ui.black.inverted.progress .bar{background-color:#545454}.ui.tiny.progress{font-size:.85714286rem}.ui.tiny.progress .bar{height:.5em}.ui.small.progress{font-size:.92857143rem}.ui.small.progress .bar{height:1em}.ui.progress{font-size:1rem}.ui.progress .bar{height:1.75em}.ui.large.progress{font-size:1.14285714rem}.ui.large.progress .bar{height:2.5em}.ui.big.progress{font-size:1.28571429rem}.ui.big.progress .bar{height:3.5em} \ No newline at end of file diff --git a/semantic/components/progress.min.js b/semantic/components/progress.min.js new file mode 100644 index 0000000..3b82edf --- /dev/null +++ b/semantic/components/progress.min.js @@ -0,0 +1 @@ +!function(E,e,P,T){"use strict";void 0!==(e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")())&&e.Math==Math||("undefined"!=typeof self&&self.Math==Math?self:Function("return this")());E.fn.progress=function(m){var b,e=E(this),h=e.selector||"",x=(new Date).getTime(),w=[],y=m,V="string"==typeof y,C=[].slice.call(arguments,1);return e.each(function(){var s,r=E.isPlainObject(m)?E.extend(!0,{},E.fn.progress.settings,m):E.extend({},E.fn.progress.settings),t=r.className,n=r.metadata,e=r.namespace,a=r.selector,l=r.error,o="."+e,i="module-"+e,c=E(this),u=E(this).find(a.bar),d=E(this).find(a.progress),g=E(this).find(a.label),v=this,p=c.data(i),f=!1;s={initialize:function(){s.debug("Initializing progress bar",r),s.set.duration(),s.set.transitionEvent(),s.read.metadata(),s.read.settings(),s.instantiate()},instantiate:function(){s.verbose("Storing instance of progress",s),p=s,c.data(i,s)},destroy:function(){s.verbose("Destroying previous progress for",c),clearInterval(p.interval),s.remove.state(),c.removeData(i),p=T},reset:function(){s.remove.nextValue(),s.update.progress(0)},complete:function(){(s.percent===T||s.percent<100)&&(s.remove.progressPoll(),s.set.percent(100))},read:{metadata:function(){var e={percent:c.data(n.percent),total:c.data(n.total),value:c.data(n.value)};e.percent&&(s.debug("Current percent value set from metadata",e.percent),s.set.percent(e.percent)),e.total&&(s.debug("Total value set from metadata",e.total),s.set.total(e.total)),e.value&&(s.debug("Current value set from metadata",e.value),s.set.value(e.value),s.set.progress(e.value))},settings:function(){!1!==r.total&&(s.debug("Current total set in settings",r.total),s.set.total(r.total)),!1!==r.value&&(s.debug("Current value set in settings",r.value),s.set.value(r.value),s.set.progress(s.value)),!1!==r.percent&&(s.debug("Current percent set in settings",r.percent),s.set.percent(r.percent))}},bind:{transitionEnd:function(t){var e=s.get.transitionEnd();u.one(e+o,function(e){clearTimeout(s.failSafeTimer),t.call(this,e)}),s.failSafeTimer=setTimeout(function(){u.triggerHandler(e)},r.duration+r.failSafeDelay),s.verbose("Adding fail safe timer",s.timer)}},increment:function(e){var t,n;s.has.total()?n=(t=s.get.value())+(e=e||1):(n=(t=s.get.percent())+(e=e||s.get.randomValue()),100,s.debug("Incrementing percentage by",t,n)),n=s.get.normalizedValue(n),s.set.progress(n)},decrement:function(e){var t,n;s.get.total()?(n=(t=s.get.value())-(e=e||1),s.debug("Decrementing value by",e,t)):(n=(t=s.get.percent())-(e=e||s.get.randomValue()),s.debug("Decrementing percentage by",e,t)),n=s.get.normalizedValue(n),s.set.progress(n)},has:{progressPoll:function(){return s.progressPoll},total:function(){return!1!==s.get.total()}},get:{text:function(e){var t=s.value||0,n=s.total||0,r=f?s.get.displayPercent():s.percent||0,a=0s.total)return s.debug("Value cannot increment above total",s.total),s.total}else if(100 .bar",label:"> .label",progress:".bar > .progress"},text:{active:!1,error:!1,success:!1,warning:!1,percent:"{percent}%",ratio:"{value} of {total}"},className:{active:"active",error:"error",success:"success",warning:"warning"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/rail.css b/semantic/components/rail.css new file mode 100644 index 0000000..fdf4694 --- /dev/null +++ b/semantic/components/rail.css @@ -0,0 +1,152 @@ +/*! + * # Semantic UI 2.4.1 - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Rails +*******************************/ + +.ui.rail { + position: absolute; + top: 0%; + width: 300px; + height: 100%; +} +.ui.left.rail { + left: auto; + right: 100%; + padding: 0em 2rem 0em 0em; + margin: 0em 2rem 0em 0em; +} +.ui.right.rail { + left: 100%; + right: auto; + padding: 0em 0em 0em 2rem; + margin: 0em 0em 0em 2rem; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Internal +---------------*/ + +.ui.left.internal.rail { + left: 0%; + right: auto; + padding: 0em 0em 0em 2rem; + margin: 0em 0em 0em 2rem; +} +.ui.right.internal.rail { + left: auto; + right: 0%; + padding: 0em 2rem 0em 0em; + margin: 0em 2rem 0em 0em; +} + +/*-------------- + Dividing +---------------*/ + +.ui.dividing.rail { + width: 302.5px; +} +.ui.left.dividing.rail { + padding: 0em 2.5rem 0em 0em; + margin: 0em 2.5rem 0em 0em; + border-right: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.right.dividing.rail { + border-left: 1px solid rgba(34, 36, 38, 0.15); + padding: 0em 0em 0em 2.5rem; + margin: 0em 0em 0em 2.5rem; +} + +/*-------------- + Distance +---------------*/ + +.ui.close.rail { + width: calc( 300px + 1em ); +} +.ui.close.left.rail { + padding: 0em 1em 0em 0em; + margin: 0em 1em 0em 0em; +} +.ui.close.right.rail { + padding: 0em 0em 0em 1em; + margin: 0em 0em 0em 1em; +} +.ui.very.close.rail { + width: calc( 300px + 0.5em ); +} +.ui.very.close.left.rail { + padding: 0em 0.5em 0em 0em; + margin: 0em 0.5em 0em 0em; +} +.ui.very.close.right.rail { + padding: 0em 0em 0em 0.5em; + margin: 0em 0em 0em 0.5em; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.left.rail, +.ui.attached.right.rail { + padding: 0em; + margin: 0em; +} + +/*-------------- + Sizing +---------------*/ + +.ui.mini.rail { + font-size: 0.78571429rem; +} +.ui.tiny.rail { + font-size: 0.85714286rem; +} +.ui.small.rail { + font-size: 0.92857143rem; +} +.ui.rail { + font-size: 1rem; +} +.ui.large.rail { + font-size: 1.14285714rem; +} +.ui.big.rail { + font-size: 1.28571429rem; +} +.ui.huge.rail { + font-size: 1.42857143rem; +} +.ui.massive.rail { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/rail.min.css b/semantic/components/rail.min.css new file mode 100644 index 0000000..3291463 --- /dev/null +++ b/semantic/components/rail.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.rail{position:absolute;top:0;width:300px;height:100%}.ui.left.rail{left:auto;right:100%;padding:0 2rem 0 0;margin:0 2rem 0 0}.ui.right.rail{left:100%;right:auto;padding:0 0 0 2rem;margin:0 0 0 2rem}.ui.left.internal.rail{left:0;right:auto;padding:0 0 0 2rem;margin:0 0 0 2rem}.ui.right.internal.rail{left:auto;right:0;padding:0 2rem 0 0;margin:0 2rem 0 0}.ui.dividing.rail{width:302.5px}.ui.left.dividing.rail{padding:0 2.5rem 0 0;margin:0 2.5rem 0 0;border-right:1px solid rgba(34,36,38,.15)}.ui.right.dividing.rail{border-left:1px solid rgba(34,36,38,.15);padding:0 0 0 2.5rem;margin:0 0 0 2.5rem}.ui.close.rail{width:calc(300px + 1em)}.ui.close.left.rail{padding:0 1em 0 0;margin:0 1em 0 0}.ui.close.right.rail{padding:0 0 0 1em;margin:0 0 0 1em}.ui.very.close.rail{width:calc(300px + .5em)}.ui.very.close.left.rail{padding:0 .5em 0 0;margin:0 .5em 0 0}.ui.very.close.right.rail{padding:0 0 0 .5em;margin:0 0 0 .5em}.ui.attached.left.rail,.ui.attached.right.rail{padding:0;margin:0}.ui.mini.rail{font-size:.78571429rem}.ui.tiny.rail{font-size:.85714286rem}.ui.small.rail{font-size:.92857143rem}.ui.rail{font-size:1rem}.ui.large.rail{font-size:1.14285714rem}.ui.big.rail{font-size:1.28571429rem}.ui.huge.rail{font-size:1.42857143rem}.ui.massive.rail{font-size:1.71428571rem} \ No newline at end of file diff --git a/semantic/components/rating.css b/semantic/components/rating.css new file mode 100644 index 0000000..5de6a2a --- /dev/null +++ b/semantic/components/rating.css @@ -0,0 +1,263 @@ +/*! + * # Semantic UI 2.4.0 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Rating +*******************************/ + +.ui.rating { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + white-space: nowrap; + vertical-align: baseline; +} +.ui.rating:last-child { + margin-right: 0em; +} + +/* Icon */ +.ui.rating .icon { + padding: 0em; + margin: 0em; + text-align: center; + font-weight: normal; + font-style: normal; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + cursor: pointer; + width: 1.25em; + height: auto; + -webkit-transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease; + transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Standard +--------------------*/ + + +/* Inactive Icon */ +.ui.rating .icon { + background: transparent; + color: rgba(0, 0, 0, 0.15); +} + +/* Active Icon */ +.ui.rating .active.icon { + background: transparent; + color: rgba(0, 0, 0, 0.85); +} + +/* Selected Icon */ +.ui.rating .icon.selected, +.ui.rating .icon.selected.active { + background: transparent; + color: rgba(0, 0, 0, 0.87); +} + +/*------------------- + Star +--------------------*/ + + +/* Inactive */ +.ui.star.rating .icon { + width: 1.25em; + height: auto; + background: transparent; + color: rgba(0, 0, 0, 0.15); + text-shadow: none; +} + +/* Active Star */ +.ui.star.rating .active.icon { + background: transparent !important; + color: #FFE623 !important; + text-shadow: 0px -1px 0px #DDC507, -1px 0px 0px #DDC507, 0px 1px 0px #DDC507, 1px 0px 0px #DDC507 !important; +} + +/* Selected Star */ +.ui.star.rating .icon.selected, +.ui.star.rating .icon.selected.active { + background: transparent !important; + color: #FFCC00 !important; + text-shadow: 0px -1px 0px #E6A200, -1px 0px 0px #E6A200, 0px 1px 0px #E6A200, 1px 0px 0px #E6A200 !important; +} + +/*------------------- + Heart +--------------------*/ + +.ui.heart.rating .icon { + width: 1.4em; + height: auto; + background: transparent; + color: rgba(0, 0, 0, 0.15); + text-shadow: none !important; +} + +/* Active Heart */ +.ui.heart.rating .active.icon { + background: transparent !important; + color: #FF6D75 !important; + text-shadow: 0px -1px 0px #CD0707, -1px 0px 0px #CD0707, 0px 1px 0px #CD0707, 1px 0px 0px #CD0707 !important; +} + +/* Selected Heart */ +.ui.heart.rating .icon.selected, +.ui.heart.rating .icon.selected.active { + background: transparent !important; + color: #FF3000 !important; + text-shadow: 0px -1px 0px #AA0101, -1px 0px 0px #AA0101, 0px 1px 0px #AA0101, 1px 0px 0px #AA0101 !important; +} + + +/******************************* + States +*******************************/ + + +/*------------------- + Disabled +--------------------*/ + + +/* disabled rating */ +.ui.disabled.rating .icon { + cursor: default; +} + +/*------------------- + User Interactive +--------------------*/ + + +/* Selected Rating */ +.ui.rating.selected .active.icon { + opacity: 1; +} +.ui.rating.selected .icon.selected, +.ui.rating .icon.selected { + opacity: 1; +} + + +/******************************* + Variations +*******************************/ + +.ui.mini.rating { + font-size: 0.78571429rem; +} +.ui.tiny.rating { + font-size: 0.85714286rem; +} +.ui.small.rating { + font-size: 0.92857143rem; +} +.ui.rating { + font-size: 1rem; +} +.ui.large.rating { + font-size: 1.14285714rem; +} +.ui.huge.rating { + font-size: 1.42857143rem; +} +.ui.massive.rating { + font-size: 2rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Rating'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,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kIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOE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) format('woff'); + font-weight: normal; + font-style: normal; +} +.ui.rating .icon { + font-family: 'Rating'; + line-height: 1; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +/* Empty Star */ +.ui.rating .icon:before { + content: '\f005'; +} + +/* Active Star */ +.ui.rating .active.icon:before { + content: '\f005'; +} + +/*------------------- + Star +--------------------*/ + + +/* Unfilled Star */ +.ui.star.rating .icon:before { + content: '\f005'; +} + +/* Active Star */ +.ui.star.rating .active.icon:before { + content: '\f005'; +} + +/* Partial */ +.ui.star.rating .partial.icon:before { + content: '\f006'; +} +.ui.star.rating .partial.icon { + content: '\f005'; +} + +/*------------------- + Heart +--------------------*/ + + +/* Empty Heart +.ui.heart.rating .icon:before { + content: '\f08a'; +} +*/ +.ui.heart.rating .icon:before { + content: '\f004'; +} +/* Active */ +.ui.heart.rating .active.icon:before { + content: '\f004'; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/rating.js b/semantic/components/rating.js new file mode 100644 index 0000000..2a7f672 --- /dev/null +++ b/semantic/components/rating.js @@ -0,0 +1,508 @@ +/*! + * # Semantic UI 2.4.1 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.rating = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.rating.settings, parameters) + : $.extend({}, $.fn.rating.settings), + + namespace = settings.namespace, + className = settings.className, + metadata = settings.metadata, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + element = this, + instance = $(this).data(moduleNamespace), + + $module = $(this), + $icon = $module.find(selector.icon), + + initialLoad, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing rating module', settings); + + if($icon.length === 0) { + module.setup.layout(); + } + + if(settings.interactive) { + module.enable(); + } + else { + module.disable(); + } + module.set.initialLoad(); + module.set.rating( module.get.initialRating() ); + module.remove.initialLoad(); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Instantiating module', settings); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous instance', instance); + module.remove.events(); + $module + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $icon = $module.find(selector.icon); + }, + + setup: { + layout: function() { + var + maxRating = module.get.maxRating(), + html = $.fn.rating.settings.templates.icon(maxRating) + ; + module.debug('Generating icon html dynamically'); + $module + .html(html) + ; + module.refresh(); + } + }, + + event: { + mouseenter: function() { + var + $activeIcon = $(this) + ; + $activeIcon + .nextAll() + .removeClass(className.selected) + ; + $module + .addClass(className.selected) + ; + $activeIcon + .addClass(className.selected) + .prevAll() + .addClass(className.selected) + ; + }, + mouseleave: function() { + $module + .removeClass(className.selected) + ; + $icon + .removeClass(className.selected) + ; + }, + click: function() { + var + $activeIcon = $(this), + currentRating = module.get.rating(), + rating = $icon.index($activeIcon) + 1, + canClear = (settings.clearable == 'auto') + ? ($icon.length === 1) + : settings.clearable + ; + if(canClear && currentRating == rating) { + module.clearRating(); + } + else { + module.set.rating( rating ); + } + } + }, + + clearRating: function() { + module.debug('Clearing current rating'); + module.set.rating(0); + }, + + bind: { + events: function() { + module.verbose('Binding events'); + $module + .on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter) + .on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave) + .on('click' + eventNamespace, selector.icon, module.event.click) + ; + } + }, + + remove: { + events: function() { + module.verbose('Removing events'); + $module + .off(eventNamespace) + ; + }, + initialLoad: function() { + initialLoad = false; + } + }, + + enable: function() { + module.debug('Setting rating to interactive mode'); + module.bind.events(); + $module + .removeClass(className.disabled) + ; + }, + + disable: function() { + module.debug('Setting rating to read-only mode'); + module.remove.events(); + $module + .addClass(className.disabled) + ; + }, + + is: { + initialLoad: function() { + return initialLoad; + } + }, + + get: { + initialRating: function() { + if($module.data(metadata.rating) !== undefined) { + $module.removeData(metadata.rating); + return $module.data(metadata.rating); + } + return settings.initialRating; + }, + maxRating: function() { + if($module.data(metadata.maxRating) !== undefined) { + $module.removeData(metadata.maxRating); + return $module.data(metadata.maxRating); + } + return settings.maxRating; + }, + rating: function() { + var + currentRating = $icon.filter('.' + className.active).length + ; + module.verbose('Current rating retrieved', currentRating); + return currentRating; + } + }, + + set: { + rating: function(rating) { + var + ratingIndex = (rating - 1 >= 0) + ? (rating - 1) + : 0, + $activeIcon = $icon.eq(ratingIndex) + ; + $module + .removeClass(className.selected) + ; + $icon + .removeClass(className.selected) + .removeClass(className.active) + ; + if(rating > 0) { + module.verbose('Setting current rating to', rating); + $activeIcon + .prevAll() + .addBack() + .addClass(className.active) + ; + } + if(!module.is.initialLoad()) { + settings.onRate.call(element, rating); + } + }, + initialLoad: function() { + initialLoad = true; + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.rating.settings = { + + name : 'Rating', + namespace : 'rating', + + slent : false, + debug : false, + verbose : false, + performance : true, + + initialRating : 0, + interactive : true, + maxRating : 4, + clearable : 'auto', + + fireOnInit : false, + + onRate : function(rating){}, + + error : { + method : 'The method you called is not defined', + noMaximum : 'No maximum rating specified. Cannot generate HTML automatically' + }, + + + metadata: { + rating : 'rating', + maxRating : 'maxRating' + }, + + className : { + active : 'active', + disabled : 'disabled', + selected : 'selected', + loading : 'loading' + }, + + selector : { + icon : '.icon' + }, + + templates: { + icon: function(maxRating) { + var + icon = 1, + html = '' + ; + while(icon <= maxRating) { + html += ''; + icon++; + } + return html; + } + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/rating.min.css b/semantic/components/rating.min.css new file mode 100644 index 0000000..e30415b --- /dev/null +++ b/semantic/components/rating.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.rating{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap;vertical-align:baseline}.ui.rating:last-child{margin-right:0}.ui.rating .icon{padding:0;margin:0;text-align:center;font-weight:400;font-style:normal;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;cursor:pointer;width:1.25em;height:auto;-webkit-transition:opacity .1s ease,background .1s ease,text-shadow .1s ease,color .1s ease;transition:opacity .1s ease,background .1s ease,text-shadow .1s ease,color .1s ease}.ui.rating .icon{background:0 0;color:rgba(0,0,0,.15)}.ui.rating .active.icon{background:0 0;color:rgba(0,0,0,.85)}.ui.rating .icon.selected,.ui.rating .icon.selected.active{background:0 0;color:rgba(0,0,0,.87)}.ui.star.rating .icon{width:1.25em;height:auto;background:0 0;color:rgba(0,0,0,.15);text-shadow:none}.ui.star.rating .active.icon{background:0 0!important;color:#ffe623!important;text-shadow:0 -1px 0 #ddc507,-1px 0 0 #ddc507,0 1px 0 #ddc507,1px 0 0 #ddc507!important}.ui.star.rating .icon.selected,.ui.star.rating .icon.selected.active{background:0 0!important;color:#fc0!important;text-shadow:0 -1px 0 #e6a200,-1px 0 0 #e6a200,0 1px 0 #e6a200,1px 0 0 #e6a200!important}.ui.heart.rating .icon{width:1.4em;height:auto;background:0 0;color:rgba(0,0,0,.15);text-shadow:none!important}.ui.heart.rating .active.icon{background:0 0!important;color:#ff6d75!important;text-shadow:0 -1px 0 #cd0707,-1px 0 0 #cd0707,0 1px 0 #cd0707,1px 0 0 #cd0707!important}.ui.heart.rating .icon.selected,.ui.heart.rating .icon.selected.active{background:0 0!important;color:#ff3000!important;text-shadow:0 -1px 0 #aa0101,-1px 0 0 #aa0101,0 1px 0 #aa0101,1px 0 0 #aa0101!important}.ui.disabled.rating .icon{cursor:default}.ui.rating.selected .active.icon{opacity:1}.ui.rating .icon.selected,.ui.rating.selected .icon.selected{opacity:1}.ui.mini.rating{font-size:.78571429rem}.ui.tiny.rating{font-size:.85714286rem}.ui.small.rating{font-size:.92857143rem}.ui.rating{font-size:1rem}.ui.large.rating{font-size:1.14285714rem}.ui.huge.rating{font-size:1.42857143rem}.ui.massive.rating{font-size:2rem}@font-face{font-family:Rating;src:url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,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kIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOEkoWShJKSkpGTkpKRlJGWkgiWkpaRl4+Yj5eNlou2i61/o3OjdJdqi2GLYXVgYGAI+0b7QAWHiIeJhouGi4eNh44I+0b3QAWJjYmNh4+IjoaRg5SElIWVhZSFlYaWh5mGmImYi5gIsIsVi2ucaa9oCPc6+zT3OvczBa+vnK2Lq4ubiZiHl4eXhpSFkoSSg5GCj4KQgo2CjYONgYuBi4KLgIl/hoCGgIWChAiBg4OFhISEhYaFhoaIhoaJhYuFi4aNiJCGkIaRhJGEkoORgZOCkoCRgJB/kICNgosIgYuBi4OJgomCiYKGgoeDhYSEhYSGgod/h3+Jfot7CA77JouyFYv4BAWLkY2Rj5GOkJCPko2PjY+Mj4sI98CLBY+Lj4qPiZGJkIePho+FjYWLhQiL/AQFi4SJhYeGh4aGh4WIiIqGioeLgYuEjoSRCPsS9w37EvsNBYSFg4iCi4eLh4uHjYSOho+IkIeQiZGLkgiwkxX3JvchpHL3DfsIi/f3+7iLi/v3BQ5ni8sVi/c5BYuSjpKQkJCQko6Siwj3VIuLwgWLrpippKSkpKmYrouvi6l+pHKkcpdti2gIi0IFi4aKhoeIh4eHiYaLCHmLBYaLh42Hj4eOipCLkAiL1AWLn4OcfZp9mXqSdot3i3qEfX18fIR6i3cIi1SniwWSi5KIkIaQho6Ei4QIi/s5BYuDiIWGhoaFhImEiwj7p4sFhIuEjYaRhpCIkYuTCA5njPe6FYyQkI6UjQj3I6DM9xYFj5KPj5GLkIuQh4+ECMv7FvcjdgWUiZCIjYaNhoiFhYUIIyak+yMFjIWKhomHiYiIiYaLiIuHjIeNCPsUz/sVRwWHiYeKiIuHi4eNiY6Jj4uQjJEIo/cjI/AFhZGJkY2QCPeB+z0VnILlW3rxiJ6ZmNTS+wydgpxe54v7pwUOZ4vCFYv3SwWLkI2Pjo+Pjo+NkIsI3osFkIuPiY6Ij4eNh4uGCIv7SwWLhomHh4eIh4eKhosIOIsFhouHjIePiI+Jj4uQCLCvFYuGjIePh46IkImQi5CLj42Pjo6PjY+LkIuQiZCIjoePh42Gi4aLhomIh4eIioaLhgjvZxWL90sFi5CNj46Oj4+PjZCLj4ySkJWWlZaVl5SXmJuVl5GRjo6OkI6RjZCNkIyPjI6MkY2TCIySjJGMj4yPjZCOkY6RjpCPjo6Pj42Qi5SLk4qSiZKJkYiPiJCIjoiPho6GjYeMhwiNh4yGjIaMhYuHi4iLiIuHi4eLg4uEiYSJhImFiYeJh4mFh4WLioqJiomJiIqJiokIi4qKiIqJCNqLBZqLmIWWgJaAkH+LfIt6hn2Af46DjYSLhIt9h36Cf4+Bi3+HgImAhYKEhI12hnmAfgh/fXiDcosIZosFfot+jHyOfI5/joOOg41/j32Qc5N8j4SMhouHjYiOh4+Jj4uQCA5ni/c5FYuGjYaOiI+Hj4mQiwjeiwWQi4+Njo+Pjo2Qi5AIi/dKBYuQiZCHjoiPh42Giwg4iwWGi4eJh4eIiImGi4YIi/tKBbD3JhWLkIyPj4+OjpCNkIuQi4+Jj4iOh42Hi4aLhomHiIeHh4eKhouGi4aMiI+Hj4qPi5AI7/snFYv3SwWLkI2Qj46Oj4+NkIuSi5qPo5OZkJePk46TjZeOmo6ajpiMmIsIsIsFpIueg5d9ln6Qeol1koSRgo2Aj4CLgIeAlH+Pfot9i4WJhIiCloCQfIt7i3yFfoGACICAfoZ8iwg8iwWMiIyJi4mMiYyJjYmMiIyKi4mPhI2GjYeNh42GjYOMhIyEi4SLhouHi4iLiYuGioYIioWKhomHioeJh4iGh4eIh4aIh4iFiISJhImDioKLhouHjYiPh4+Ij4iRiJGJkIqPCIqPipGKkomTipGKj4qOiZCJkYiQiJCIjoWSgZZ+nIKXgZaBloGWhJGHi4aLh42HjwiIjomQi48IDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAPFlAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAkAAAACAAIAAEAAAAAQAg5gXwBvAN8CPwLvBu8HDwivCX8JzxI/Fl//3//wAAAAAAIOYA8ATwDPAj8C7wbvBw8Ifwl/Cc8SPxZP/9//8AAf/jGgQQBhABD+wP4g+jD6IPjA+AD3wO9g62AAMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAJrVlLJfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAFAAABwAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');font-weight:400;font-style:normal}.ui.rating .icon{font-family:Rating;line-height:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.ui.rating .icon:before{content:'\f005'}.ui.rating .active.icon:before{content:'\f005'}.ui.star.rating .icon:before{content:'\f005'}.ui.star.rating .active.icon:before{content:'\f005'}.ui.star.rating .partial.icon:before{content:'\f006'}.ui.star.rating .partial.icon{content:'\f005'}.ui.heart.rating .icon:before{content:'\f004'}.ui.heart.rating .active.icon:before{content:'\f004'} \ No newline at end of file diff --git a/semantic/components/rating.min.js b/semantic/components/rating.min.js new file mode 100644 index 0000000..d9efc5a --- /dev/null +++ b/semantic/components/rating.min.js @@ -0,0 +1 @@ +!function(C,e,n,T){"use strict";e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),C.fn.rating=function(m){var f,v=C(this),p=v.selector||"",b=(new Date).getTime(),h=[],y=m,x="string"==typeof y,R=[].slice.call(arguments,1);return v.each(function(){var e,i,a=C.isPlainObject(m)?C.extend(!0,{},C.fn.rating.settings,m):C.extend({},C.fn.rating.settings),n=a.namespace,o=a.className,t=a.metadata,r=a.selector,s=(a.error,"."+n),l="module-"+n,c=this,u=C(this).data(l),d=C(this),g=d.find(r.icon);i={initialize:function(){i.verbose("Initializing rating module",a),0===g.length&&i.setup.layout(),a.interactive?i.enable():i.disable(),i.set.initialLoad(),i.set.rating(i.get.initialRating()),i.remove.initialLoad(),i.instantiate()},instantiate:function(){i.verbose("Instantiating module",a),u=i,d.data(l,i)},destroy:function(){i.verbose("Destroying previous instance",u),i.remove.events(),d.removeData(l)},refresh:function(){g=d.find(r.icon)},setup:{layout:function(){var e=i.get.maxRating(),n=C.fn.rating.settings.templates.icon(e);i.debug("Generating icon html dynamically"),d.html(n),i.refresh()}},event:{mouseenter:function(){var e=C(this);e.nextAll().removeClass(o.selected),d.addClass(o.selected),e.addClass(o.selected).prevAll().addClass(o.selected)},mouseleave:function(){d.removeClass(o.selected),g.removeClass(o.selected)},click:function(){var e=C(this),n=i.get.rating(),t=g.index(e)+1;("auto"==a.clearable?1===g.length:a.clearable)&&n==t?i.clearRating():i.set.rating(t)}},clearRating:function(){i.debug("Clearing current rating"),i.set.rating(0)},bind:{events:function(){i.verbose("Binding events"),d.on("mouseenter"+s,r.icon,i.event.mouseenter).on("mouseleave"+s,r.icon,i.event.mouseleave).on("click"+s,r.icon,i.event.click)}},remove:{events:function(){i.verbose("Removing events"),d.off(s)},initialLoad:function(){e=!1}},enable:function(){i.debug("Setting rating to interactive mode"),i.bind.events(),d.removeClass(o.disabled)},disable:function(){i.debug("Setting rating to read-only mode"),i.remove.events(),d.addClass(o.disabled)},is:{initialLoad:function(){return e}},get:{initialRating:function(){return d.data(t.rating)!==T?(d.removeData(t.rating),d.data(t.rating)):a.initialRating},maxRating:function(){return d.data(t.maxRating)!==T?(d.removeData(t.maxRating),d.data(t.maxRating)):a.maxRating},rating:function(){var e=g.filter("."+o.active).length;return i.verbose("Current rating retrieved",e),e}},set:{rating:function(e){var n=0<=e-1?e-1:0,t=g.eq(n);d.removeClass(o.selected),g.removeClass(o.selected).removeClass(o.active),0',n++;return t}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/reset.css b/semantic/components/reset.css new file mode 100644 index 0000000..2fcd32d --- /dev/null +++ b/semantic/components/reset.css @@ -0,0 +1,485 @@ +/*! + * # Semantic UI 2.4.1 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Reset +*******************************/ + + +/* Border-Box */ +*, +*:before, +*:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* iPad Input Shadows */ +input[type="text"], +input[type="email"], +input[type="search"], +input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; + +/* mobile firefox too! */ +} +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + line-height: 1.15; + +/* 1 */ + -ms-text-size-adjust: 100%; + +/* 2 */ + -webkit-text-size-adjust: 100%; + +/* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; +} +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; +} +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ +figcaption, +figure, +main { + +/* 1 */ + display: block; +} +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; +} +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; + +/* 1 */ + height: 0; + +/* 1 */ + overflow: visible; + +/* 2 */ +} +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + +/* 1 */ + font-size: 1em; + +/* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + +/* 1 */ + -webkit-text-decoration-skip: objects; + +/* 2 */ +} +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + +/* 1 */ + text-decoration: underline; + +/* 2 */ + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + +/* 2 */ +} +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; +} +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + +/* 1 */ + font-size: 1em; + +/* 2 */ +} +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; +} +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; +} +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; +} +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; +} +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + +/* 1 */ + font-size: 100%; + +/* 1 */ + line-height: 1.15; + +/* 1 */ + margin: 0; + +/* 2 */ +} +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + +/* 1 */ + overflow: visible; +} +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + +/* 1 */ + text-transform: none; +} +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + +/* 2 */ +} +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; + +/* 1 */ + color: inherit; + +/* 2 */ + display: table; + +/* 1 */ + max-width: 100%; + +/* 1 */ + padding: 0; + +/* 3 */ + white-space: normal; + +/* 1 */ +} +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + +/* 1 */ + vertical-align: baseline; + +/* 2 */ +} +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; +} +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + +/* 1 */ + padding: 0; + +/* 2 */ +} +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + +/* 1 */ + outline-offset: -2px; + +/* 2 */ +} +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + +/* 1 */ + font: inherit; + +/* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ +details, +menu { + display: block; +} +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; +} +/** + * Add the correct display in IE. + */ +template { + display: none; +} + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/reset.min.css b/semantic/components/reset.min.css new file mode 100644 index 0000000..1ace3d3 --- /dev/null +++ b/semantic/components/reset.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none} \ No newline at end of file diff --git a/semantic/components/reveal.css b/semantic/components/reveal.css new file mode 100644 index 0000000..e2eb897 --- /dev/null +++ b/semantic/components/reveal.css @@ -0,0 +1,295 @@ +/*! + * # Semantic UI 2.4.1 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: 3 !important; + -webkit-transition: all 0.5s ease 0.1s; + transition: all 0.5s ease 0.1s; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: 2 !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: 4 !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} +.ui.slide.reveal > .content { + display: block; + width: 100%; + white-space: normal; + float: left; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s ease 0.1s; + transition: -webkit-transform 0.5s ease 0.1s; + transition: transform 0.5s ease 0.1s; + transition: transform 0.5s ease 0.1s, -webkit-transform 0.5s ease 0.1s; +} +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .visible.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + -webkit-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.up.reveal > .hidden.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + -webkit-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} +.ui.slide.down.reveal > .hidden.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + -webkit-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} +.ui.move.reveal > .content { + display: block; + float: left; + white-space: normal; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; + transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s; +} +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + -webkit-transform: translateX(-100%) !important; + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + -webkit-transform: translateX(100%) !important; + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + -webkit-transform: translateY(-100%) !important; + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + -webkit-transform: translateY(100%) !important; + transform: translateY(100%) !important; +} + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.content, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + -webkit-transform: rotate(-110deg); + transform: rotate(-110deg); +} + + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + -webkit-transform: none !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + Coupling +*******************************/ + +.ui.reveal > .ui.ribbon.label { + z-index: 5; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + -webkit-transition-delay: 0s !important; + transition-delay: 0s !important; +} + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: 1rem !important; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/reveal.min.css b/semantic/components/reveal.min.css new file mode 100644 index 0000000..ed1f248 --- /dev/null +++ b/semantic/components/reveal.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.reveal{display:inherit;position:relative!important;font-size:0!important}.ui.reveal>.visible.content{position:absolute!important;top:0!important;left:0!important;z-index:3!important;-webkit-transition:all .5s ease .1s;transition:all .5s ease .1s}.ui.reveal>.hidden.content{position:relative!important;z-index:2!important}.ui.active.reveal .visible.content,.ui.reveal:hover .visible.content{z-index:4!important}.ui.slide.reveal{position:relative!important;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>.content{display:block;width:100%;white-space:normal;float:left;margin:0;-webkit-transition:-webkit-transform .5s ease .1s;transition:-webkit-transform .5s ease .1s;transition:transform .5s ease .1s;transition:transform .5s ease .1s,-webkit-transform .5s ease .1s}.ui.slide.reveal>.visible.content{position:relative!important}.ui.slide.reveal>.hidden.content{position:absolute!important;left:0!important;width:100%!important;-webkit-transform:translateX(100%)!important;transform:translateX(100%)!important}.ui.slide.active.reveal>.visible.content,.ui.slide.reveal:hover>.visible.content{-webkit-transform:translateX(-100%)!important;transform:translateX(-100%)!important}.ui.slide.active.reveal>.hidden.content,.ui.slide.reveal:hover>.hidden.content{-webkit-transform:translateX(0)!important;transform:translateX(0)!important}.ui.slide.right.reveal>.visible.content{-webkit-transform:translateX(0)!important;transform:translateX(0)!important}.ui.slide.right.reveal>.hidden.content{-webkit-transform:translateX(-100%)!important;transform:translateX(-100%)!important}.ui.slide.right.active.reveal>.visible.content,.ui.slide.right.reveal:hover>.visible.content{-webkit-transform:translateX(100%)!important;transform:translateX(100%)!important}.ui.slide.right.active.reveal>.hidden.content,.ui.slide.right.reveal:hover>.hidden.content{-webkit-transform:translateX(0)!important;transform:translateX(0)!important}.ui.slide.up.reveal>.hidden.content{-webkit-transform:translateY(100%)!important;transform:translateY(100%)!important}.ui.slide.up.active.reveal>.visible.content,.ui.slide.up.reveal:hover>.visible.content{-webkit-transform:translateY(-100%)!important;transform:translateY(-100%)!important}.ui.slide.up.active.reveal>.hidden.content,.ui.slide.up.reveal:hover>.hidden.content{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}.ui.slide.down.reveal>.hidden.content{-webkit-transform:translateY(-100%)!important;transform:translateY(-100%)!important}.ui.slide.down.active.reveal>.visible.content,.ui.slide.down.reveal:hover>.visible.content{-webkit-transform:translateY(100%)!important;transform:translateY(100%)!important}.ui.slide.down.active.reveal>.hidden.content,.ui.slide.down.reveal:hover>.hidden.content{-webkit-transform:translateY(0)!important;transform:translateY(0)!important}.ui.fade.reveal>.visible.content{opacity:1}.ui.fade.active.reveal>.visible.content,.ui.fade.reveal:hover>.visible.content{opacity:0}.ui.move.reveal{position:relative!important;overflow:hidden!important;white-space:nowrap}.ui.move.reveal>.content{display:block;float:left;white-space:normal;margin:0;-webkit-transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1) .1s;transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1) .1s;transition:transform .5s cubic-bezier(.175,.885,.32,1) .1s;transition:transform .5s cubic-bezier(.175,.885,.32,1) .1s,-webkit-transform .5s cubic-bezier(.175,.885,.32,1) .1s}.ui.move.reveal>.visible.content{position:relative!important}.ui.move.reveal>.hidden.content{position:absolute!important;left:0!important;width:100%!important}.ui.move.active.reveal>.visible.content,.ui.move.reveal:hover>.visible.content{-webkit-transform:translateX(-100%)!important;transform:translateX(-100%)!important}.ui.move.right.active.reveal>.visible.content,.ui.move.right.reveal:hover>.visible.content{-webkit-transform:translateX(100%)!important;transform:translateX(100%)!important}.ui.move.up.active.reveal>.visible.content,.ui.move.up.reveal:hover>.visible.content{-webkit-transform:translateY(-100%)!important;transform:translateY(-100%)!important}.ui.move.down.active.reveal>.visible.content,.ui.move.down.reveal:hover>.visible.content{-webkit-transform:translateY(100%)!important;transform:translateY(100%)!important}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transform:rotate(0);transform:rotate(0)}.ui.rotate.reveal>.visible.content,.ui.rotate.right.reveal>.visible.content{-webkit-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.active.reveal>.visible.content,.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.active.reveal>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.active.reveal>.visible.content,.ui.rotate.left.reveal:hover>.visible.content{-webkit-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.disabled.reveal:hover>.visible.visible.content{position:static!important;display:block!important;opacity:1!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;-webkit-transform:none!important;transform:none!important}.ui.disabled.reveal:hover>.hidden.hidden.content{display:none!important}.ui.reveal>.ui.ribbon.label{z-index:5}.ui.visible.reveal{overflow:visible}.ui.instant.reveal>.content{-webkit-transition-delay:0s!important;transition-delay:0s!important}.ui.reveal>.content{font-size:1rem!important} \ No newline at end of file diff --git a/semantic/components/search.css b/semantic/components/search.css new file mode 100644 index 0000000..bda3276 --- /dev/null +++ b/semantic/components/search.css @@ -0,0 +1,445 @@ +/*! + * # Semantic UI 2.4.0 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Search +*******************************/ + +.ui.search { + position: relative; +} +.ui.search > .prompt { + margin: 0em; + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-shadow: none; + font-style: normal; + font-weight: normal; + line-height: 1.21428571em; + padding: 0.67857143em 1em; + font-size: 1em; + background: #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: 0em 0em 0em 0em transparent inset; + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; + transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease; +} +.ui.search .prompt { + border-radius: 500rem; +} + +/*-------------- + Icon +---------------*/ + +.ui.search .prompt ~ .search.icon { + cursor: pointer; +} + +/*-------------- + Results +---------------*/ + +.ui.search > .results { + display: none; + position: absolute; + top: 100%; + left: 0%; + -webkit-transform-origin: center top; + transform-origin: center top; + white-space: normal; + text-align: left; + text-transform: none; + background: #FFFFFF; + margin-top: 0.5em; + width: 18em; + border-radius: 0.28571429rem; + -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + border: 1px solid #D4D4D5; + z-index: 998; +} +.ui.search > .results > :first-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.search > .results > :last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/*-------------- + Result +---------------*/ + +.ui.search > .results .result { + cursor: pointer; + display: block; + overflow: hidden; + font-size: 1em; + padding: 0.85714286em 1.14285714em; + color: rgba(0, 0, 0, 0.87); + line-height: 1.33; + border-bottom: 1px solid rgba(34, 36, 38, 0.1); +} +.ui.search > .results .result:last-child { + border-bottom: none !important; +} + +/* Image */ +.ui.search > .results .result .image { + float: right; + overflow: hidden; + background: none; + width: 5em; + height: 3em; + border-radius: 0.25em; +} +.ui.search > .results .result .image img { + display: block; + width: auto; + height: 100%; +} + +/*-------------- + Info +---------------*/ + +.ui.search > .results .result .image + .content { + margin: 0em 6em 0em 0em; +} +.ui.search > .results .result .title { + margin: -0.14285714em 0em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 1em; + color: rgba(0, 0, 0, 0.85); +} +.ui.search > .results .result .description { + margin-top: 0; + font-size: 0.92857143em; + color: rgba(0, 0, 0, 0.4); +} +.ui.search > .results .result .price { + float: right; + color: #21BA45; +} + +/*-------------- + Message +---------------*/ + +.ui.search > .results > .message { + padding: 1em 1em; +} +.ui.search > .results > .message .header { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1rem; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); +} +.ui.search > .results > .message .description { + margin-top: 0.25rem; + font-size: 1em; + color: rgba(0, 0, 0, 0.87); +} + +/* View All Results */ +.ui.search > .results > .action { + display: block; + border-top: none; + background: #F3F4F5; + padding: 0.92857143em 1em; + color: rgba(0, 0, 0, 0.87); + font-weight: bold; + text-align: center; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Focus +---------------------*/ + +.ui.search > .prompt:focus { + border-color: rgba(34, 36, 38, 0.35); + background: #FFFFFF; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.search .input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} +.ui.loading.search .input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -0.64285714em 0em 0em -0.64285714em; + width: 1.28571429em; + height: 1.28571429em; + -webkit-animation: button-spin 0.6s linear; + animation: button-spin 0.6s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + border-radius: 500rem; + border-color: #767676 transparent transparent; + border-style: solid; + border-width: 0.2em; + -webkit-box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0px 0px 0px 1px transparent; +} + +/*-------------- + Hover +---------------*/ + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: #F9FAFB; +} +.ui.search .action:hover { + background: #E0E0E0; +} + +/*-------------- + Active +---------------*/ + +.ui.category.search > .results .category.active { + background: #F3F4F5; +} +.ui.category.search > .results .category.active > .name { + color: rgba(0, 0, 0, 0.87); +} +.ui.search > .results .result.active, +.ui.category.search > .results .category .result.active { + position: relative; + border-left-color: rgba(34, 36, 38, 0.1); + background: #F3F4F5; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.search > .results .result.active .title { + color: rgba(0, 0, 0, 0.85); +} +.ui.search > .results .result.active .description { + color: rgba(0, 0, 0, 0.85); +} + +/*-------------------- + Disabled +----------------------*/ + + +/* Disabled */ +.ui.disabled.search { + cursor: default; + pointer-events: none; + opacity: 0.45; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Selection +---------------*/ + +.ui.search.selection .prompt { + border-radius: 0.28571429rem; +} + +/* Remove input */ +.ui.search.selection > .icon.input > .remove.icon { + pointer-events: none; + position: absolute; + left: auto; + opacity: 0; + color: ''; + top: 0em; + right: 0em; + -webkit-transition: color 0.1s ease, opacity 0.1s ease; + transition: color 0.1s ease, opacity 0.1s ease; +} +.ui.search.selection > .icon.input > .active.remove.icon { + cursor: pointer; + opacity: 0.8; + pointer-events: auto; +} +.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { + right: 1.85714em; +} +.ui.search.selection > .icon.input > .remove.icon:hover { + opacity: 1; + color: #DB2828; +} + +/*-------------- + Category +---------------*/ + +.ui.category.search .results { + width: 28em; +} +.ui.category.search .results.animating, +.ui.category.search .results.visible { + display: table; +} + +/* Category */ +.ui.category.search > .results .category { + display: table-row; + background: #F3F4F5; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: background 0.1s ease, border-color 0.1s ease; + transition: background 0.1s ease, border-color 0.1s ease; +} + +/* Last Category */ +.ui.category.search > .results .category:last-child { + border-bottom: none; +} + +/* First / Last */ +.ui.category.search > .results .category:first-child .name + .result { + border-radius: 0em 0.28571429rem 0em 0em; +} +.ui.category.search > .results .category:last-child .result:last-child { + border-radius: 0em 0em 0.28571429rem 0em; +} + +/* Category Result Name */ +.ui.category.search > .results .category > .name { + display: table-cell; + text-overflow: ellipsis; + width: 100px; + white-space: nowrap; + background: transparent; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1em; + padding: 0.4em 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.4); + border-bottom: 1px solid rgba(34, 36, 38, 0.1); +} + +/* Category Result */ +.ui.category.search > .results .category .results { + display: table-cell; + background: #FFFFFF; + border-left: 1px solid rgba(34, 36, 38, 0.15); + border-bottom: 1px solid rgba(34, 36, 38, 0.1); +} +.ui.category.search > .results .category .result { + border-bottom: 1px solid rgba(34, 36, 38, 0.1); + -webkit-transition: background 0.1s ease, border-color 0.1s ease; + transition: background 0.1s ease, border-color 0.1s ease; + padding: 0.85714286em 1.14285714em; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Left / Right +--------------------*/ + +.ui[class*="left aligned"].search > .results { + right: auto; + left: 0%; +} +.ui[class*="right aligned"].search > .results { + right: 0%; + left: auto; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.search .results { + width: 100%; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.search { + font-size: 0.78571429em; +} +.ui.small.search { + font-size: 0.92857143em; +} +.ui.search { + font-size: 1em; +} +.ui.large.search { + font-size: 1.14285714em; +} +.ui.big.search { + font-size: 1.28571429em; +} +.ui.huge.search { + font-size: 1.42857143em; +} +.ui.massive.search { + font-size: 1.71428571em; +} + +/*-------------- + Mobile +---------------*/ + +@media only screen and (max-width: 767px) { + .ui.search .results { + max-width: calc(100vw - 2rem); + } +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/search.js b/semantic/components/search.js new file mode 100644 index 0000000..bd92d9e --- /dev/null +++ b/semantic/components/search.js @@ -0,0 +1,1505 @@ +/*! + * # Semantic UI 2.4.1 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.search = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $(this) + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.search.settings, parameters) + : $.extend({}, $.fn.search.settings), + + className = settings.className, + metadata = settings.metadata, + regExp = settings.regExp, + fields = settings.fields, + selector = settings.selector, + error = settings.error, + namespace = settings.namespace, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $module = $(this), + $prompt = $module.find(selector.prompt), + $searchButton = $module.find(selector.searchButton), + $results = $module.find(selector.results), + $result = $module.find(selector.result), + $category = $module.find(selector.category), + + element = this, + instance = $module.data(moduleNamespace), + + disabledBubbled = false, + resultsDismissed = false, + + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing module'); + module.get.settings(); + module.determine.searchFields(); + module.bind.events(); + module.set.type(); + module.create.results(); + module.instantiate(); + }, + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + destroy: function() { + module.verbose('Destroying instance'); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.debug('Refreshing selector cache'); + $prompt = $module.find(selector.prompt); + $searchButton = $module.find(selector.searchButton); + $category = $module.find(selector.category); + $results = $module.find(selector.results); + $result = $module.find(selector.result); + }, + + refreshResults: function() { + $results = $module.find(selector.results); + $result = $module.find(selector.result); + }, + + bind: { + events: function() { + module.verbose('Binding events to search'); + if(settings.automatic) { + $module + .on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input) + ; + $prompt + .attr('autocomplete', 'off') + ; + } + $module + // prompt + .on('focus' + eventNamespace, selector.prompt, module.event.focus) + .on('blur' + eventNamespace, selector.prompt, module.event.blur) + .on('keydown' + eventNamespace, selector.prompt, module.handleKeyboard) + // search button + .on('click' + eventNamespace, selector.searchButton, module.query) + // results + .on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown) + .on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup) + .on('click' + eventNamespace, selector.result, module.event.result.click) + ; + } + }, + + determine: { + searchFields: function() { + // this makes sure $.extend does not add specified search fields to default fields + // this is the only setting which should not extend defaults + if(parameters && parameters.searchFields !== undefined) { + settings.searchFields = parameters.searchFields; + } + } + }, + + event: { + input: function() { + if(settings.searchDelay) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + if(module.is.focused()) { + module.query(); + } + }, settings.searchDelay); + } + else { + module.query(); + } + }, + focus: function() { + module.set.focus(); + if(settings.searchOnFocus && module.has.minimumCharacters() ) { + module.query(function() { + if(module.can.show() ) { + module.showResults(); + } + }); + } + }, + blur: function(event) { + var + pageLostFocus = (document.activeElement === this), + callback = function() { + module.cancel.query(); + module.remove.focus(); + module.timer = setTimeout(module.hideResults, settings.hideDelay); + } + ; + if(pageLostFocus) { + return; + } + resultsDismissed = false; + if(module.resultsClicked) { + module.debug('Determining if user action caused search to close'); + $module + .one('click.close' + eventNamespace, selector.results, function(event) { + if(module.is.inMessage(event) || disabledBubbled) { + $prompt.focus(); + return; + } + disabledBubbled = false; + if( !module.is.animating() && !module.is.hidden()) { + callback(); + } + }) + ; + } + else { + module.debug('Input blurred without user action, closing results'); + callback(); + } + }, + result: { + mousedown: function() { + module.resultsClicked = true; + }, + mouseup: function() { + module.resultsClicked = false; + }, + click: function(event) { + module.debug('Search result selected'); + var + $result = $(this), + $title = $result.find(selector.title).eq(0), + $link = $result.is('a[href]') + ? $result + : $result.find('a[href]').eq(0), + href = $link.attr('href') || false, + target = $link.attr('target') || false, + title = $title.html(), + // title is used for result lookup + value = ($title.length > 0) + ? $title.text() + : false, + results = module.get.results(), + result = $result.data(metadata.result) || module.get.result(value, results), + returnedValue + ; + if( $.isFunction(settings.onSelect) ) { + if(settings.onSelect.call(element, result, results) === false) { + module.debug('Custom onSelect callback cancelled default select action'); + disabledBubbled = true; + return; + } + } + module.hideResults(); + if(value) { + module.set.value(value); + } + if(href) { + module.verbose('Opening search link found in result', $link); + if(target == '_blank' || event.ctrlKey) { + window.open(href); + } + else { + window.location.href = (href); + } + } + } + } + }, + handleKeyboard: function(event) { + var + // force selector refresh + $result = $module.find(selector.result), + $category = $module.find(selector.category), + $activeResult = $result.filter('.' + className.active), + currentIndex = $result.index( $activeResult ), + resultSize = $result.length, + hasActiveResult = $activeResult.length > 0, + + keyCode = event.which, + keys = { + backspace : 8, + enter : 13, + escape : 27, + upArrow : 38, + downArrow : 40 + }, + newIndex + ; + // search shortcuts + if(keyCode == keys.escape) { + module.verbose('Escape key pressed, blurring search field'); + module.hideResults(); + resultsDismissed = true; + } + if( module.is.visible() ) { + if(keyCode == keys.enter) { + module.verbose('Enter key pressed, selecting active result'); + if( $result.filter('.' + className.active).length > 0 ) { + module.event.result.click.call($result.filter('.' + className.active), event); + event.preventDefault(); + return false; + } + } + else if(keyCode == keys.upArrow && hasActiveResult) { + module.verbose('Up key pressed, changing active result'); + newIndex = (currentIndex - 1 < 0) + ? currentIndex + : currentIndex - 1 + ; + $category + .removeClass(className.active) + ; + $result + .removeClass(className.active) + .eq(newIndex) + .addClass(className.active) + .closest($category) + .addClass(className.active) + ; + event.preventDefault(); + } + else if(keyCode == keys.downArrow) { + module.verbose('Down key pressed, changing active result'); + newIndex = (currentIndex + 1 >= resultSize) + ? currentIndex + : currentIndex + 1 + ; + $category + .removeClass(className.active) + ; + $result + .removeClass(className.active) + .eq(newIndex) + .addClass(className.active) + .closest($category) + .addClass(className.active) + ; + event.preventDefault(); + } + } + else { + // query shortcuts + if(keyCode == keys.enter) { + module.verbose('Enter key pressed, executing query'); + module.query(); + module.set.buttonPressed(); + $prompt.one('keyup', module.remove.buttonFocus); + } + } + }, + + setup: { + api: function(searchTerm, callback) { + var + apiSettings = { + debug : settings.debug, + on : false, + cache : settings.cache, + action : 'search', + urlData : { + query : searchTerm + }, + onSuccess : function(response) { + module.parse.response.call(element, response, searchTerm); + callback(); + }, + onFailure : function() { + module.displayMessage(error.serverError); + callback(); + }, + onAbort : function(response) { + }, + onError : module.error + }, + searchHTML + ; + $.extend(true, apiSettings, settings.apiSettings); + module.verbose('Setting up API request', apiSettings); + $module.api(apiSettings); + } + }, + + can: { + useAPI: function() { + return $.fn.api !== undefined; + }, + show: function() { + return module.is.focused() && !module.is.visible() && !module.is.empty(); + }, + transition: function() { + return settings.transition && $.fn.transition !== undefined && $module.transition('is supported'); + } + }, + + is: { + animating: function() { + return $results.hasClass(className.animating); + }, + hidden: function() { + return $results.hasClass(className.hidden); + }, + inMessage: function(event) { + if(!event.target) { + return; + } + var + $target = $(event.target), + isInDOM = $.contains(document.documentElement, event.target) + ; + return (isInDOM && $target.closest(selector.message).length > 0); + }, + empty: function() { + return ($results.html() === ''); + }, + visible: function() { + return ($results.filter(':visible').length > 0); + }, + focused: function() { + return ($prompt.filter(':focus').length > 0); + } + }, + + get: { + settings: function() { + if($.isPlainObject(parameters) && parameters.searchFullText) { + settings.fullTextSearch = parameters.searchFullText; + module.error(settings.error.oldSearchSyntax, element); + } + }, + inputEvent: function() { + var + prompt = $prompt[0], + inputEvent = (prompt !== undefined && prompt.oninput !== undefined) + ? 'input' + : (prompt !== undefined && prompt.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + return inputEvent; + }, + value: function() { + return $prompt.val(); + }, + results: function() { + var + results = $module.data(metadata.results) + ; + return results; + }, + result: function(value, results) { + var + lookupFields = ['title', 'id'], + result = false + ; + value = (value !== undefined) + ? value + : module.get.value() + ; + results = (results !== undefined) + ? results + : module.get.results() + ; + if(settings.type === 'category') { + module.debug('Finding result that matches', value); + $.each(results, function(index, category) { + if($.isArray(category.results)) { + result = module.search.object(value, category.results, lookupFields)[0]; + // don't continue searching if a result is found + if(result) { + return false; + } + } + }); + } + else { + module.debug('Finding result in results object', value); + result = module.search.object(value, results, lookupFields)[0]; + } + return result || false; + }, + }, + + select: { + firstResult: function() { + module.verbose('Selecting first result'); + $result.first().addClass(className.active); + } + }, + + set: { + focus: function() { + $module.addClass(className.focus); + }, + loading: function() { + $module.addClass(className.loading); + }, + value: function(value) { + module.verbose('Setting search input value', value); + $prompt + .val(value) + ; + }, + type: function(type) { + type = type || settings.type; + if(settings.type == 'category') { + $module.addClass(settings.type); + } + }, + buttonPressed: function() { + $searchButton.addClass(className.pressed); + } + }, + + remove: { + loading: function() { + $module.removeClass(className.loading); + }, + focus: function() { + $module.removeClass(className.focus); + }, + buttonPressed: function() { + $searchButton.removeClass(className.pressed); + } + }, + + query: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + var + searchTerm = module.get.value(), + cache = module.read.cache(searchTerm) + ; + callback = callback || function() {}; + if( module.has.minimumCharacters() ) { + if(cache) { + module.debug('Reading result from cache', searchTerm); + module.save.results(cache.results); + module.addResults(cache.html); + module.inject.id(cache.results); + callback(); + } + else { + module.debug('Querying for', searchTerm); + if($.isPlainObject(settings.source) || $.isArray(settings.source)) { + module.search.local(searchTerm); + callback(); + } + else if( module.can.useAPI() ) { + module.search.remote(searchTerm, callback); + } + else { + module.error(error.source); + callback(); + } + } + settings.onSearchQuery.call(element, searchTerm); + } + else { + module.hideResults(); + } + }, + + search: { + local: function(searchTerm) { + var + results = module.search.object(searchTerm, settings.content), + searchHTML + ; + module.set.loading(); + module.save.results(results); + module.debug('Returned full local search results', results); + if(settings.maxResults > 0) { + module.debug('Using specified max results', results); + results = results.slice(0, settings.maxResults); + } + if(settings.type == 'category') { + results = module.create.categoryResults(results); + } + searchHTML = module.generateResults({ + results: results + }); + module.remove.loading(); + module.addResults(searchHTML); + module.inject.id(results); + module.write.cache(searchTerm, { + html : searchHTML, + results : results + }); + }, + remote: function(searchTerm, callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if($module.api('is loading')) { + $module.api('abort'); + } + module.setup.api(searchTerm, callback); + $module + .api('query') + ; + }, + object: function(searchTerm, source, searchFields) { + var + results = [], + exactResults = [], + fuzzyResults = [], + searchExp = searchTerm.toString().replace(regExp.escape, '\\$&'), + matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'), + + // avoid duplicates when pushing results + addResult = function(array, result) { + var + notResult = ($.inArray(result, results) == -1), + notFuzzyResult = ($.inArray(result, fuzzyResults) == -1), + notExactResults = ($.inArray(result, exactResults) == -1) + ; + if(notResult && notFuzzyResult && notExactResults) { + array.push(result); + } + } + ; + source = source || settings.source; + searchFields = (searchFields !== undefined) + ? searchFields + : settings.searchFields + ; + + // search fields should be array to loop correctly + if(!$.isArray(searchFields)) { + searchFields = [searchFields]; + } + + // exit conditions if no source + if(source === undefined || source === false) { + module.error(error.source); + return []; + } + // iterate through search fields looking for matches + $.each(searchFields, function(index, field) { + $.each(source, function(label, content) { + var + fieldExists = (typeof content[field] == 'string') + ; + if(fieldExists) { + if( content[field].search(matchRegExp) !== -1) { + // content starts with value (first in results) + addResult(results, content); + } + else if(settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, content[field]) ) { + // content fuzzy matches (last in results) + addResult(exactResults, content); + } + else if(settings.fullTextSearch == true && module.fuzzySearch(searchTerm, content[field]) ) { + // content fuzzy matches (last in results) + addResult(fuzzyResults, content); + } + } + }); + }); + $.merge(exactResults, fuzzyResults) + $.merge(results, exactResults); + return results; + } + }, + exactSearch: function (query, term) { + query = query.toLowerCase(); + term = term.toLowerCase(); + if(term.indexOf(query) > -1) { + return true; + } + return false; + }, + fuzzySearch: function(query, term) { + var + termLength = term.length, + queryLength = query.length + ; + if(typeof query !== 'string') { + return false; + } + query = query.toLowerCase(); + term = term.toLowerCase(); + if(queryLength > termLength) { + return false; + } + if(queryLength === termLength) { + return (query === term); + } + search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) { + var + queryCharacter = query.charCodeAt(characterIndex) + ; + while(nextCharacterIndex < termLength) { + if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) { + continue search; + } + } + return false; + } + return true; + }, + + parse: { + response: function(response, searchTerm) { + var + searchHTML = module.generateResults(response) + ; + module.verbose('Parsing server response', response); + if(response !== undefined) { + if(searchTerm !== undefined && response[fields.results] !== undefined) { + module.addResults(searchHTML); + module.inject.id(response[fields.results]); + module.write.cache(searchTerm, { + html : searchHTML, + results : response[fields.results] + }); + module.save.results(response[fields.results]); + } + } + } + }, + + cancel: { + query: function() { + if( module.can.useAPI() ) { + $module.api('abort'); + } + } + }, + + has: { + minimumCharacters: function() { + var + searchTerm = module.get.value(), + numCharacters = searchTerm.length + ; + return (numCharacters >= settings.minCharacters); + }, + results: function() { + if($results.length === 0) { + return false; + } + var + html = $results.html() + ; + return html != ''; + } + }, + + clear: { + cache: function(value) { + var + cache = $module.data(metadata.cache) + ; + if(!value) { + module.debug('Clearing cache', value); + $module.removeData(metadata.cache); + } + else if(value && cache && cache[value]) { + module.debug('Removing value from cache', value); + delete cache[value]; + $module.data(metadata.cache, cache); + } + } + }, + + read: { + cache: function(name) { + var + cache = $module.data(metadata.cache) + ; + if(settings.cache) { + module.verbose('Checking cache for generated html for query', name); + return (typeof cache == 'object') && (cache[name] !== undefined) + ? cache[name] + : false + ; + } + return false; + } + }, + + create: { + categoryResults: function(results) { + var + categoryResults = {} + ; + $.each(results, function(index, result) { + if(!result.category) { + return; + } + if(categoryResults[result.category] === undefined) { + module.verbose('Creating new category of results', result.category); + categoryResults[result.category] = { + name : result.category, + results : [result] + } + } + else { + categoryResults[result.category].results.push(result); + } + }); + return categoryResults; + }, + id: function(resultIndex, categoryIndex) { + var + resultID = (resultIndex + 1), // not zero indexed + categoryID = (categoryIndex + 1), + firstCharCode, + letterID, + id + ; + if(categoryIndex !== undefined) { + // start char code for "A" + letterID = String.fromCharCode(97 + categoryIndex); + id = letterID + resultID; + module.verbose('Creating category result id', id); + } + else { + id = resultID; + module.verbose('Creating result id', id); + } + return id; + }, + results: function() { + if($results.length === 0) { + $results = $('
') + .addClass(className.results) + .appendTo($module) + ; + } + } + }, + + inject: { + result: function(result, resultIndex, categoryIndex) { + module.verbose('Injecting result into results'); + var + $selectedResult = (categoryIndex !== undefined) + ? $results + .children().eq(categoryIndex) + .children(selector.results) + .first() + .children(selector.result) + .eq(resultIndex) + : $results + .children(selector.result).eq(resultIndex) + ; + module.verbose('Injecting results metadata', $selectedResult); + $selectedResult + .data(metadata.result, result) + ; + }, + id: function(results) { + module.debug('Injecting unique ids into results'); + var + // since results may be object, we must use counters + categoryIndex = 0, + resultIndex = 0 + ; + if(settings.type === 'category') { + // iterate through each category result + $.each(results, function(index, category) { + resultIndex = 0; + $.each(category.results, function(index, value) { + var + result = category.results[index] + ; + if(result.id === undefined) { + result.id = module.create.id(resultIndex, categoryIndex); + } + module.inject.result(result, resultIndex, categoryIndex); + resultIndex++; + }); + categoryIndex++; + }); + } + else { + // top level + $.each(results, function(index, value) { + var + result = results[index] + ; + if(result.id === undefined) { + result.id = module.create.id(resultIndex); + } + module.inject.result(result, resultIndex); + resultIndex++; + }); + } + return results; + } + }, + + save: { + results: function(results) { + module.verbose('Saving current search results to metadata', results); + $module.data(metadata.results, results); + } + }, + + write: { + cache: function(name, value) { + var + cache = ($module.data(metadata.cache) !== undefined) + ? $module.data(metadata.cache) + : {} + ; + if(settings.cache) { + module.verbose('Writing generated html to cache', name, value); + cache[name] = value; + $module + .data(metadata.cache, cache) + ; + } + } + }, + + addResults: function(html) { + if( $.isFunction(settings.onResultsAdd) ) { + if( settings.onResultsAdd.call($results, html) === false ) { + module.debug('onResultsAdd callback cancelled default action'); + return false; + } + } + if(html) { + $results + .html(html) + ; + module.refreshResults(); + if(settings.selectFirstResult) { + module.select.firstResult(); + } + module.showResults(); + } + else { + module.hideResults(function() { + $results.empty(); + }); + } + }, + + showResults: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(resultsDismissed) { + return; + } + if(!module.is.visible() && module.has.results()) { + if( module.can.transition() ) { + module.debug('Showing results with css animations'); + $results + .transition({ + animation : settings.transition + ' in', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + onComplete : function() { + callback(); + }, + queue : true + }) + ; + } + else { + module.debug('Showing results with javascript'); + $results + .stop() + .fadeIn(settings.duration, settings.easing) + ; + } + settings.onResultsOpen.call($results); + } + }, + hideResults: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.visible() ) { + if( module.can.transition() ) { + module.debug('Hiding results with css animations'); + $results + .transition({ + animation : settings.transition + ' out', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + onComplete : function() { + callback(); + }, + queue : true + }) + ; + } + else { + module.debug('Hiding results with javascript'); + $results + .stop() + .fadeOut(settings.duration, settings.easing) + ; + } + settings.onResultsClose.call($results); + } + }, + + generateResults: function(response) { + module.debug('Generating html from response', response); + var + template = settings.templates[settings.type], + isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])), + isProperArray = ($.isArray(response[fields.results]) && response[fields.results].length > 0), + html = '' + ; + if(isProperObject || isProperArray ) { + if(settings.maxResults > 0) { + if(isProperObject) { + if(settings.type == 'standard') { + module.error(error.maxResults); + } + } + else { + response[fields.results] = response[fields.results].slice(0, settings.maxResults); + } + } + if($.isFunction(template)) { + html = template(response, fields); + } + else { + module.error(error.noTemplate, false); + } + } + else if(settings.showNoResults) { + html = module.displayMessage(error.noResults, 'empty'); + } + settings.onResults.call(element, response); + return html; + }, + + displayMessage: function(text, type) { + type = type || 'standard'; + module.debug('Displaying message', text, type); + module.addResults( settings.templates.message(text, type) ); + return settings.templates.message(text, type); + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.search.settings = { + + name : 'Search', + namespace : 'search', + + silent : false, + debug : false, + verbose : false, + performance : true, + + // template to use (specified in settings.templates) + type : 'standard', + + // minimum characters required to search + minCharacters : 1, + + // whether to select first result after searching automatically + selectFirstResult : false, + + // API config + apiSettings : false, + + // object to search + source : false, + + // Whether search should query current term on focus + searchOnFocus : true, + + // fields to search + searchFields : [ + 'title', + 'description' + ], + + // field to display in standard results template + displayField : '', + + // search anywhere in value (set to 'exact' to require exact matches + fullTextSearch : 'exact', + + // whether to add events to prompt automatically + automatic : true, + + // delay before hiding menu after blur + hideDelay : 0, + + // delay before searching + searchDelay : 200, + + // maximum results returned from search + maxResults : 7, + + // whether to store lookups in local cache + cache : true, + + // whether no results errors should be shown + showNoResults : true, + + // transition settings + transition : 'scale', + duration : 200, + easing : 'easeOutExpo', + + // callbacks + onSelect : false, + onResultsAdd : false, + + onSearchQuery : function(query){}, + onResults : function(response){}, + + onResultsOpen : function(){}, + onResultsClose : function(){}, + + className: { + animating : 'animating', + active : 'active', + empty : 'empty', + focus : 'focus', + hidden : 'hidden', + loading : 'loading', + results : 'results', + pressed : 'down' + }, + + error : { + source : 'Cannot search. No source used, and Semantic API module was not included', + noResults : 'Your search returned no results', + logging : 'Error in debug logging, exiting.', + noEndpoint : 'No search endpoint was specified', + noTemplate : 'A valid template name was not specified.', + oldSearchSyntax : 'searchFullText setting has been renamed fullTextSearch for consistency, please adjust your settings.', + serverError : 'There was an issue querying the server.', + maxResults : 'Results must be an array to use maxResults setting', + method : 'The method you called is not defined.' + }, + + metadata: { + cache : 'cache', + results : 'results', + result : 'result' + }, + + regExp: { + escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, + beginsWith : '(?:\s|^)' + }, + + // maps api response attributes to internal representation + fields: { + categories : 'results', // array of categories (category view) + categoryName : 'name', // name of category (category view) + categoryResults : 'results', // array of results (category view) + description : 'description', // result description + image : 'image', // result image + price : 'price', // result price + results : 'results', // array of results (standard) + title : 'title', // result title + url : 'url', // result url + action : 'action', // "view more" object name + actionText : 'text', // "view more" text + actionURL : 'url' // "view more" url + }, + + selector : { + prompt : '.prompt', + searchButton : '.search.button', + results : '.results', + message : '.results > .message', + category : '.category', + result : '.result', + title : '.title, .name' + }, + + templates: { + escape: function(string) { + var + badChars = /[&<>"'`]/g, + shouldEscape = /[&<>"'`]/, + escape = { + "&": "&", + "<": "<", + ">": ">", + '"': """, + "'": "'", + "`": "`" + }, + escapedChar = function(chr) { + return escape[chr]; + } + ; + if(shouldEscape.test(string)) { + return string.replace(badChars, escapedChar); + } + return string; + }, + message: function(message, type) { + var + html = '' + ; + if(message !== undefined && type !== undefined) { + html += '' + + '
' + ; + // message type + if(type == 'empty') { + html += '' + + '
No Results
' + + '
' + message + '
' + ; + } + else { + html += '
' + message + '
'; + } + html += '
'; + } + return html; + }, + category: function(response, fields) { + var + html = '', + escape = $.fn.search.settings.templates.escape + ; + if(response[fields.categoryResults] !== undefined) { + + // each category + $.each(response[fields.categoryResults], function(index, category) { + if(category[fields.results] !== undefined && category.results.length > 0) { + + html += '
'; + + if(category[fields.categoryName] !== undefined) { + html += '
' + category[fields.categoryName] + '
'; + } + + // each item inside category + html += '
'; + $.each(category.results, function(index, result) { + if(result[fields.url]) { + html += ''; + } + else { + html += ''; + } + if(result[fields.image] !== undefined) { + html += '' + + '
' + + ' ' + + '
' + ; + } + html += '
'; + if(result[fields.price] !== undefined) { + html += '
' + result[fields.price] + '
'; + } + if(result[fields.title] !== undefined) { + html += '
' + result[fields.title] + '
'; + } + if(result[fields.description] !== undefined) { + html += '
' + result[fields.description] + '
'; + } + html += '' + + '
' + ; + html += ''; + }); + html += '
'; + html += '' + + '
' + ; + } + }); + if(response[fields.action]) { + html += '' + + '' + + response[fields.action][fields.actionText] + + ''; + } + return html; + } + return false; + }, + standard: function(response, fields) { + var + html = '' + ; + if(response[fields.results] !== undefined) { + + // each result + $.each(response[fields.results], function(index, result) { + if(result[fields.url]) { + html += ''; + } + else { + html += ''; + } + if(result[fields.image] !== undefined) { + html += '' + + '
' + + ' ' + + '
' + ; + } + html += '
'; + if(result[fields.price] !== undefined) { + html += '
' + result[fields.price] + '
'; + } + if(result[fields.title] !== undefined) { + html += '
' + result[fields.title] + '
'; + } + if(result[fields.description] !== undefined) { + html += '
' + result[fields.description] + '
'; + } + html += '' + + '
' + ; + html += ''; + }); + + if(response[fields.action]) { + html += '' + + '' + + response[fields.action][fields.actionText] + + ''; + } + return html; + } + return false; + } + } +}; + +})( jQuery, window, document ); diff --git a/semantic/components/search.min.css b/semantic/components/search.min.css new file mode 100644 index 0000000..fd72ace --- /dev/null +++ b/semantic/components/search.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.search{position:relative}.ui.search>.prompt{margin:0;outline:0;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,255,255,0);text-shadow:none;font-style:normal;font-weight:400;line-height:1.21428571em;padding:.67857143em 1em;font-size:1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);-webkit-box-shadow:0 0 0 0 transparent inset;box-shadow:0 0 0 0 transparent inset;-webkit-transition:background-color .1s ease,color .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,color .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,color .1s ease,box-shadow .1s ease,border-color .1s ease;transition:background-color .1s ease,color .1s ease,box-shadow .1s ease,border-color .1s ease,-webkit-box-shadow .1s ease}.ui.search .prompt{border-radius:500rem}.ui.search .prompt~.search.icon{cursor:pointer}.ui.search>.results{display:none;position:absolute;top:100%;left:0;-webkit-transform-origin:center top;transform-origin:center top;white-space:normal;text-align:left;text-transform:none;background:#fff;margin-top:.5em;width:18em;border-radius:.28571429rem;-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);border:1px solid #d4d4d5;z-index:998}.ui.search>.results>:first-child{border-radius:.28571429rem .28571429rem 0 0}.ui.search>.results>:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.search>.results .result{cursor:pointer;display:block;overflow:hidden;font-size:1em;padding:.85714286em 1.14285714em;color:rgba(0,0,0,.87);line-height:1.33;border-bottom:1px solid rgba(34,36,38,.1)}.ui.search>.results .result:last-child{border-bottom:none!important}.ui.search>.results .result .image{float:right;overflow:hidden;background:0 0;width:5em;height:3em;border-radius:.25em}.ui.search>.results .result .image img{display:block;width:auto;height:100%}.ui.search>.results .result .image+.content{margin:0 6em 0 0}.ui.search>.results .result .title{margin:-.14285714em 0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;font-size:1em;color:rgba(0,0,0,.85)}.ui.search>.results .result .description{margin-top:0;font-size:.92857143em;color:rgba(0,0,0,.4)}.ui.search>.results .result .price{float:right;color:#21ba45}.ui.search>.results>.message{padding:1em 1em}.ui.search>.results>.message .header{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1rem;font-weight:700;color:rgba(0,0,0,.87)}.ui.search>.results>.message .description{margin-top:.25rem;font-size:1em;color:rgba(0,0,0,.87)}.ui.search>.results>.action{display:block;border-top:none;background:#f3f4f5;padding:.92857143em 1em;color:rgba(0,0,0,.87);font-weight:700;text-align:center}.ui.search>.prompt:focus{border-color:rgba(34,36,38,.35);background:#fff;color:rgba(0,0,0,.95)}.ui.loading.search .input>i.icon:before{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loading.search .input>i.icon:after{position:absolute;content:'';top:50%;left:50%;margin:-.64285714em 0 0 -.64285714em;width:1.28571429em;height:1.28571429em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}.ui.category.search>.results .category .result:hover,.ui.search>.results .result:hover{background:#f9fafb}.ui.search .action:hover{background:#e0e0e0}.ui.category.search>.results .category.active{background:#f3f4f5}.ui.category.search>.results .category.active>.name{color:rgba(0,0,0,.87)}.ui.category.search>.results .category .result.active,.ui.search>.results .result.active{position:relative;border-left-color:rgba(34,36,38,.1);background:#f3f4f5;-webkit-box-shadow:none;box-shadow:none}.ui.search>.results .result.active .title{color:rgba(0,0,0,.85)}.ui.search>.results .result.active .description{color:rgba(0,0,0,.85)}.ui.disabled.search{cursor:default;pointer-events:none;opacity:.45}.ui.search.selection .prompt{border-radius:.28571429rem}.ui.search.selection>.icon.input>.remove.icon{pointer-events:none;position:absolute;left:auto;opacity:0;color:'';top:0;right:0;-webkit-transition:color .1s ease,opacity .1s ease;transition:color .1s ease,opacity .1s ease}.ui.search.selection>.icon.input>.active.remove.icon{cursor:pointer;opacity:.8;pointer-events:auto}.ui.search.selection>.icon.input:not([class*="left icon"])>.icon~.remove.icon{right:1.85714em}.ui.search.selection>.icon.input>.remove.icon:hover{opacity:1;color:#db2828}.ui.category.search .results{width:28em}.ui.category.search .results.animating,.ui.category.search .results.visible{display:table}.ui.category.search>.results .category{display:table-row;background:#f3f4f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background .1s ease,border-color .1s ease;transition:background .1s ease,border-color .1s ease}.ui.category.search>.results .category:last-child{border-bottom:none}.ui.category.search>.results .category:first-child .name+.result{border-radius:0 .28571429rem 0 0}.ui.category.search>.results .category:last-child .result:last-child{border-radius:0 0 .28571429rem 0}.ui.category.search>.results .category>.name{display:table-cell;text-overflow:ellipsis;width:100px;white-space:nowrap;background:0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;padding:.4em 1em;font-weight:700;color:rgba(0,0,0,.4);border-bottom:1px solid rgba(34,36,38,.1)}.ui.category.search>.results .category .results{display:table-cell;background:#fff;border-left:1px solid rgba(34,36,38,.15);border-bottom:1px solid rgba(34,36,38,.1)}.ui.category.search>.results .category .result{border-bottom:1px solid rgba(34,36,38,.1);-webkit-transition:background .1s ease,border-color .1s ease;transition:background .1s ease,border-color .1s ease;padding:.85714286em 1.14285714em}.ui[class*="left aligned"].search>.results{right:auto;left:0}.ui[class*="right aligned"].search>.results{right:0;left:auto}.ui.fluid.search .results{width:100%}.ui.mini.search{font-size:.78571429em}.ui.small.search{font-size:.92857143em}.ui.search{font-size:1em}.ui.large.search{font-size:1.14285714em}.ui.big.search{font-size:1.28571429em}.ui.huge.search{font-size:1.42857143em}.ui.massive.search{font-size:1.71428571em}@media only screen and (max-width:767px){.ui.search .results{max-width:calc(100vw - 2rem)}} \ No newline at end of file diff --git a/semantic/components/search.min.js b/semantic/components/search.min.js new file mode 100644 index 0000000..439fa98 --- /dev/null +++ b/semantic/components/search.min.js @@ -0,0 +1 @@ +!function(q,A,E,D){"use strict";A=void 0!==A&&A.Math==Math?A:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),q.fn.search=function(o){var C,x=q(this),w=x.selector||"",S=(new Date).getTime(),F=[],j=o,T="string"==typeof j,k=[].slice.call(arguments,1);return q(this).each(function(){var f,u=q.isPlainObject(o)?q.extend(!0,{},q.fn.search.settings,o):q.extend({},q.fn.search.settings),g=u.className,l=u.metadata,d=u.regExp,i=u.fields,h=u.selector,p=u.error,e=u.namespace,n="."+e,t=e+"-module",m=q(this),v=m.find(h.prompt),s=m.find(h.searchButton),r=m.find(h.results),a=m.find(h.result),y=(m.find(h.category),this),c=m.data(t),b=!1,R=!1;f={initialize:function(){f.verbose("Initializing module"),f.get.settings(),f.determine.searchFields(),f.bind.events(),f.set.type(),f.create.results(),f.instantiate()},instantiate:function(){f.verbose("Storing instance of module",f),c=f,m.data(t,f)},destroy:function(){f.verbose("Destroying instance"),m.off(n).removeData(t)},refresh:function(){f.debug("Refreshing selector cache"),v=m.find(h.prompt),s=m.find(h.searchButton),m.find(h.category),r=m.find(h.results),a=m.find(h.result)},refreshResults:function(){r=m.find(h.results),a=m.find(h.result)},bind:{events:function(){f.verbose("Binding events to search"),u.automatic&&(m.on(f.get.inputEvent()+n,h.prompt,f.event.input),v.attr("autocomplete","off")),m.on("focus"+n,h.prompt,f.event.focus).on("blur"+n,h.prompt,f.event.blur).on("keydown"+n,h.prompt,f.handleKeyboard).on("click"+n,h.searchButton,f.query).on("mousedown"+n,h.results,f.event.result.mousedown).on("mouseup"+n,h.results,f.event.result.mouseup).on("click"+n,h.result,f.event.result.click)}},determine:{searchFields:function(){o&&o.searchFields!==D&&(u.searchFields=o.searchFields)}},event:{input:function(){u.searchDelay?(clearTimeout(f.timer),f.timer=setTimeout(function(){f.is.focused()&&f.query()},u.searchDelay)):f.query()},focus:function(){f.set.focus(),u.searchOnFocus&&f.has.minimumCharacters()&&f.query(function(){f.can.show()&&f.showResults()})},blur:function(e){var t=E.activeElement===this,s=function(){f.cancel.query(),f.remove.focus(),f.timer=setTimeout(f.hideResults,u.hideDelay)};t||(R=!1,f.resultsClicked?(f.debug("Determining if user action caused search to close"),m.one("click.close"+n,h.results,function(e){f.is.inMessage(e)||b?v.focus():(b=!1,f.is.animating()||f.is.hidden()||s())})):(f.debug("Input blurred without user action, closing results"),s()))},result:{mousedown:function(){f.resultsClicked=!0},mouseup:function(){f.resultsClicked=!1},click:function(e){f.debug("Search result selected");var t=q(this),s=t.find(h.title).eq(0),n=t.is("a[href]")?t:t.find("a[href]").eq(0),r=n.attr("href")||!1,i=n.attr("target")||!1,a=(s.html(),0=u.minCharacters},results:function(){return 0!==r.length&&""!=r.html()}},clear:{cache:function(e){var t=m.data(l.cache);e?e&&t&&t[e]&&(f.debug("Removing value from cache",e),delete t[e],m.data(l.cache,t)):(f.debug("Clearing cache",e),m.removeData(l.cache))}},read:{cache:function(e){var t=m.data(l.cache);return!!u.cache&&(f.verbose("Checking cache for generated html for query",e),"object"==typeof t&&t[e]!==D&&t[e])}},create:{categoryResults:function(e){var s={};return q.each(e,function(e,t){t.category&&(s[t.category]===D?(f.verbose("Creating new category of results",t.category),s[t.category]={name:t.category,results:[t]}):s[t.category].results.push(t))}),s},id:function(e,t){var s,n=e+1;return t!==D?(s=String.fromCharCode(97+t)+n,f.verbose("Creating category result id",s)):(s=n,f.verbose("Creating result id",s)),s},results:function(){0===r.length&&(r=q("
").addClass(g.results).appendTo(m))}},inject:{result:function(e,t,s){f.verbose("Injecting result into results");var n=s!==D?r.children().eq(s).children(h.results).first().children(h.result).eq(t):r.children(h.result).eq(t);f.verbose("Injecting results metadata",n),n.data(l.result,e)},id:function(n){f.debug("Injecting unique ids into results");var r=0,i=0;return"category"===u.type?q.each(n,function(e,n){i=0,q.each(n.results,function(e,t){var s=n.results[e];s.id===D&&(s.id=f.create.id(i,r)),f.inject.result(s,i,r),i++}),r++}):q.each(n,function(e,t){var s=n[e];s.id===D&&(s.id=f.create.id(i)),f.inject.result(s,i),i++}),n}},save:{results:function(e){f.verbose("Saving current search results to metadata",e),m.data(l.results,e)}},write:{cache:function(e,t){var s=m.data(l.cache)!==D?m.data(l.cache):{};u.cache&&(f.verbose("Writing generated html to cache",e,t),s[e]=t,m.data(l.cache,s))}},addResults:function(e){if(q.isFunction(u.onResultsAdd)&&!1===u.onResultsAdd.call(r,e))return f.debug("onResultsAdd callback cancelled default action"),!1;e?(r.html(e),f.refreshResults(),u.selectFirstResult&&f.select.firstResult(),f.showResults()):f.hideResults(function(){r.empty()})},showResults:function(e){e=q.isFunction(e)?e:function(){},R||!f.is.visible()&&f.has.results()&&(f.can.transition()?(f.debug("Showing results with css animations"),r.transition({animation:u.transition+" in",debug:u.debug,verbose:u.verbose,duration:u.duration,onComplete:function(){e()},queue:!0})):(f.debug("Showing results with javascript"),r.stop().fadeIn(u.duration,u.easing)),u.onResultsOpen.call(r))},hideResults:function(e){e=q.isFunction(e)?e:function(){},f.is.visible()&&(f.can.transition()?(f.debug("Hiding results with css animations"),r.transition({animation:u.transition+" out",debug:u.debug,verbose:u.verbose,duration:u.duration,onComplete:function(){e()},queue:!0})):(f.debug("Hiding results with javascript"),r.stop().fadeOut(u.duration,u.easing)),u.onResultsClose.call(r))},generateResults:function(e){f.debug("Generating html from response",e);var t=u.templates[u.type],s=q.isPlainObject(e[i.results])&&!q.isEmptyObject(e[i.results]),n=q.isArray(e[i.results])&&0 .message",category:".category",result:".result",title:".title, .name"},templates:{escape:function(e){var t={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"};return/[&<>"'`]/.test(e)?e.replace(/[&<>"'`]/g,function(e){return t[e]}):e},message:function(e,t){var s="";return e!==D&&t!==D&&(s+='
',s+="empty"==t?'
No Results
'+e+'
':'
'+e+"
",s+="
"),s},category:function(e,s){var n="";q.fn.search.settings.templates.escape;return e[s.categoryResults]!==D&&(q.each(e[s.categoryResults],function(e,t){t[s.results]!==D&&0',t[s.categoryName]!==D&&(n+='
'+t[s.categoryName]+"
"),n+='
',q.each(t.results,function(e,t){t[s.url]?n+='':n+='',t[s.image]!==D&&(n+='
'),n+='
',t[s.price]!==D&&(n+='
'+t[s.price]+"
"),t[s.title]!==D&&(n+='
'+t[s.title]+"
"),t[s.description]!==D&&(n+='
'+t[s.description]+"
"),n+="
",n+=""}),n+="
",n+="
")}),e[s.action]&&(n+=''+e[s.action][s.actionText]+""),n)},standard:function(e,s){var n="";return e[s.results]!==D&&(q.each(e[s.results],function(e,t){t[s.url]?n+='':n+='',t[s.image]!==D&&(n+='
'),n+='
',t[s.price]!==D&&(n+='
'+t[s.price]+"
"),t[s.title]!==D&&(n+='
'+t[s.title]+"
"),t[s.description]!==D&&(n+='
'+t[s.description]+"
"),n+="
",n+=""}),e[s.action]&&(n+=''+e[s.action][s.actionText]+""),n)}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/segment.css b/semantic/components/segment.css new file mode 100644 index 0000000..08ced92 --- /dev/null +++ b/semantic/components/segment.css @@ -0,0 +1,879 @@ +/*! + * # Semantic UI 2.4.1 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: #FFFFFF; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + margin: 1rem 0em; + padding: 1em 1em; + border-radius: 0.28571429rem; + border: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} + +/* Vertical */ +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + background: none transparent; + border-radius: 0px; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + border-bottom: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.vertical.segment:last-child { + border-bottom: none; +} + +/*------------------- + Loose Coupling +--------------------*/ + + +/* Header */ +.ui.inverted.segment > .ui.header { + color: #FFFFFF; +} + +/* Label */ +.ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} + +/* Grid */ +.ui.page.grid.segment, +.ui.grid > .row > .ui.segment.column, +.ui.grid > .ui.segment.column { + padding-top: 2em; + padding-bottom: 2em; +} +.ui.grid.segment { + margin: 1rem 0em; + border-radius: 0.28571429rem; +} + +/* Table */ +.ui.basic.table.segment { + background: #FFFFFF; + border: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); +} +.ui[class*="very basic"].table.segment { + padding: 1em 1em; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Placeholder +--------------------*/ + +.ui.placeholder.segment { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + max-width: initial; + -webkit-animation: none; + animation: none; + overflow: visible; + padding: 1em 1em; + min-height: 18rem; + background: #F9FAFB; + border-color: rgba(34, 36, 38, 0.15); + -webkit-box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; + box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; +} +.ui.placeholder.segment .button, +.ui.placeholder.segment textarea { + display: block; +} +.ui.placeholder.segment .field, +.ui.placeholder.segment textarea, +.ui.placeholder.segment > .ui.input, +.ui.placeholder.segment .button { + max-width: 15rem; + margin-left: auto; + margin-right: auto; +} +.ui.placeholder.segment .column .button, +.ui.placeholder.segment .column .field, +.ui.placeholder.segment .column textarea, +.ui.placeholder.segment .column > .ui.input { + max-width: 15rem; + margin-left: auto; + margin-right: auto; +} +.ui.placeholder.segment > .inline { + -ms-flex-item-align: center; + align-self: center; +} +.ui.placeholder.segment > .inline > .button { + display: inline-block; + width: auto; + margin: 0px 0.35714286rem 0px 0px; +} +.ui.placeholder.segment > .inline > .button:last-child { + margin-right: 0px; +} + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: 3em 0em; + -webkit-box-shadow: ''; + box-shadow: ''; + z-index: auto; +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: #FFFFFF; + visibility: visible; + content: ''; + display: block; + height: 100%; + left: 0px; + position: absolute; + width: 100%; + border: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: ''; + box-shadow: ''; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + transform: rotate(-1.2deg); + top: 0; + z-index: -2; +} +.ui.piled.segments:after, +.ui.piled.segment:after { + -webkit-transform: rotate(1.2deg); + transform: rotate(1.2deg); + top: 0; + z-index: -1; +} + +/* Piled Attached */ +.ui[class*="top attached"].piled.segment { + margin-top: 3em; + margin-bottom: 0em; +} +.ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0em; +} +.ui.piled.segment[class*="bottom attached"] { + margin-top: 0em; + margin-bottom: 3em; +} +.ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Stacked +--------------------*/ + +.ui.stacked.segment { + padding-bottom: 1.4em; +} +.ui.stacked.segments:before, +.ui.stacked.segments:after, +.ui.stacked.segment:before, +.ui.stacked.segment:after { + content: ''; + position: absolute; + bottom: -3px; + left: 0%; + border-top: 1px solid rgba(34, 36, 38, 0.15); + background: rgba(0, 0, 0, 0.03); + width: 100%; + height: 6px; + visibility: visible; +} +.ui.stacked.segments:before, +.ui.stacked.segment:before { + display: none; +} + +/* Add additional page */ +.ui.tall.stacked.segments:before, +.ui.tall.stacked.segment:before { + display: block; + bottom: 0px; +} + +/* Inverted */ +.ui.stacked.inverted.segments:before, +.ui.stacked.inverted.segments:after, +.ui.stacked.inverted.segment:before, +.ui.stacked.inverted.segment:after { + background-color: rgba(0, 0, 0, 0.03); + border-top: 1px solid rgba(34, 36, 38, 0.35); +} + +/*------------------- + Padded +--------------------*/ + +.ui.padded.segment { + padding: 1.5em; +} +.ui[class*="very padded"].segment { + padding: 3em; +} + +/* Padded vertical */ +.ui.padded.segment.vertical.segment, +.ui[class*="very padded"].vertical.segment { + padding-left: 0px; + padding-right: 0px; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.segment { + display: table-cell; + padding: 2em; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segments, +.ui.raised.segment { + -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15); +} + + +/******************************* + Groups +*******************************/ + + +/* Group */ +.ui.segments { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + margin: 1rem 0em; + border: 1px solid rgba(34, 36, 38, 0.15); + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; +} +.ui.segments:first-child { + margin-top: 0em; +} +.ui.segments:last-child { + margin-bottom: 0em; +} + +/* Nested Segment */ +.ui.segments > .segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em; + width: auto; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.segments:not(.horizontal) > .segment:first-child { + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: 0px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: 0px; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/* Only */ +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: 0.28571429rem; +} + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: 1px solid rgba(34, 36, 38, 0.15); + margin: 1rem 1rem; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0em; +} + +/* Horizontal Group */ +.ui.horizontal.segments { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); + margin: 1rem 0em; + border-radius: 0.28571429rem; + border: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + -webkit-box-flex: 1; + flex: 1 1 auto; + -ms-flex: 1 1 0px; + +/* Solves #2550 MS Flex */ + margin: 0em; + min-width: 0px; + background-color: transparent; + border-radius: 0px; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-left: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Border Fixes */ +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments > .segment:first-child { + border-left: none; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.segment { + opacity: 0.45; + color: rgba(40, 40, 40, 0.3); +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + text-shadow: none !important; + color: transparent !important; + -webkit-transition: all 0s linear; + transition: all 0s linear; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: rgba(255, 255, 255, 0.8); + width: 100%; + height: 100%; + border-radius: 0.28571429rem; + z-index: 100; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -1.5em 0em 0em -1.5em; + width: 3em; + height: 3em; + -webkit-animation: segment-spin 0.6s linear; + animation: segment-spin 0.6s linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + border-radius: 500rem; + border-color: #767676 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); + border-style: solid; + border-width: 0.2em; + -webkit-box-shadow: 0px 0px 0px 1px transparent; + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: 101; +} +@-webkit-keyframes segment-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes segment-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + background: none transparent; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + border-radius: 0px; +} + +/*------------------- + Clearing +--------------------*/ + +.ui.clearing.segment:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: 2px solid #DB2828 !important; +} +.ui.inverted.red.segment { + background-color: #DB2828 !important; + color: #FFFFFF !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: 2px solid #F2711C !important; +} +.ui.inverted.orange.segment { + background-color: #F2711C !important; + color: #FFFFFF !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: 2px solid #FBBD08 !important; +} +.ui.inverted.yellow.segment { + background-color: #FBBD08 !important; + color: #FFFFFF !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: 2px solid #B5CC18 !important; +} +.ui.inverted.olive.segment { + background-color: #B5CC18 !important; + color: #FFFFFF !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: 2px solid #21BA45 !important; +} +.ui.inverted.green.segment { + background-color: #21BA45 !important; + color: #FFFFFF !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: 2px solid #00B5AD !important; +} +.ui.inverted.teal.segment { + background-color: #00B5AD !important; + color: #FFFFFF !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: 2px solid #2185D0 !important; +} +.ui.inverted.blue.segment { + background-color: #2185D0 !important; + color: #FFFFFF !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: 2px solid #6435C9 !important; +} +.ui.inverted.violet.segment { + background-color: #6435C9 !important; + color: #FFFFFF !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: 2px solid #A333C8 !important; +} +.ui.inverted.purple.segment { + background-color: #A333C8 !important; + color: #FFFFFF !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: 2px solid #E03997 !important; +} +.ui.inverted.pink.segment { + background-color: #E03997 !important; + color: #FFFFFF !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: 2px solid #A5673F !important; +} +.ui.inverted.brown.segment { + background-color: #A5673F !important; + color: #FFFFFF !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: 2px solid #767676 !important; +} +.ui.inverted.grey.segment { + background-color: #767676 !important; + color: #FFFFFF !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: 2px solid #1B1C1D !important; +} +.ui.inverted.black.segment { + background-color: #1B1C1D !important; + color: #FFFFFF !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="right aligned"].segment { + text-align: right; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui[class*="left floated"].segment { + float: left; + margin-right: 1em; +} +.ui[class*="right floated"].segment { + float: right; + margin-left: 1em; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + border: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background: #1B1C1D; + color: rgba(255, 255, 255, 0.9); +} + +/* Nested */ +.ui.inverted.segment .segment { + color: rgba(0, 0, 0, 0.87); +} +.ui.inverted.segment .inverted.segment { + color: rgba(255, 255, 255, 0.9); +} + +/* Attached */ +.ui.inverted.attached.segment { + border-color: #555555; +} + +/*------------------- + Emphasis +--------------------*/ + + +/* Secondary */ +.ui.secondary.segment { + background: #F3F4F5; + color: rgba(0, 0, 0, 0.6); +} +.ui.secondary.inverted.segment { + background: #4c4f52 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0.2))); + background: #4c4f52 -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); + background: #4c4f52 linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); + color: rgba(255, 255, 255, 0.8); +} + +/* Tertiary */ +.ui.tertiary.segment { + background: #DCDDDE; + color: rgba(0, 0, 0, 0.6); +} +.ui.tertiary.inverted.segment { + background: #717579 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.35))); + background: #717579 -webkit-linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%); + background: #717579 linear-gradient(rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%); + color: rgba(255, 255, 255, 0.8); +} + +/*------------------- + Attached +--------------------*/ + + +/* Middle */ +.ui.attached.segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em -1px; + width: calc(100% - (-1px * 2)); + max-width: calc(100% - (-1px * 2)); + -webkit-box-shadow: none; + box-shadow: none; + border: 1px solid #D4D4D5; +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].segment { + bottom: 0px; + margin-bottom: 0em; + top: 0px; + margin-top: 1rem; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui.segment[class*="bottom attached"] { + bottom: 0px; + margin-top: 0em; + top: 0px; + margin-bottom: 1rem; + -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Size +--------------------*/ + +.ui.mini.segments .segment, +.ui.mini.segment { + font-size: 0.78571429rem; +} +.ui.tiny.segments .segment, +.ui.tiny.segment { + font-size: 0.85714286rem; +} +.ui.small.segments .segment, +.ui.small.segment { + font-size: 0.92857143rem; +} +.ui.segments .segment, +.ui.segment { + font-size: 1rem; +} +.ui.large.segments .segment, +.ui.large.segment { + font-size: 1.14285714rem; +} +.ui.big.segments .segment, +.ui.big.segment { + font-size: 1.28571429rem; +} +.ui.huge.segments .segment, +.ui.huge.segment { + font-size: 1.42857143rem; +} +.ui.massive.segments .segment, +.ui.massive.segment { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/segment.min.css b/semantic/components/segment.min.css new file mode 100644 index 0000000..61ba350 --- /dev/null +++ b/semantic/components/segment.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.segment{position:relative;background:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;padding:1em 1em;border-radius:.28571429rem;border:1px solid rgba(34,36,38,.15)}.ui.segment:first-child{margin-top:0}.ui.segment:last-child{margin-bottom:0}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background:none transparent;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none;border-bottom:1px solid rgba(34,36,38,.15)}.ui.vertical.segment:last-child{border-bottom:none}.ui.inverted.segment>.ui.header{color:#fff}.ui[class*="bottom attached"].segment>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui[class*="top attached"].segment>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="top attached"].label{border-top-left-radius:0;border-top-right-radius:0}.ui.attached.segment:not(.top):not(.bottom)>[class*="bottom attached"].label{border-bottom-left-radius:0;border-bottom-right-radius:0}.ui.grid>.row>.ui.segment.column,.ui.grid>.ui.segment.column,.ui.page.grid.segment{padding-top:2em;padding-bottom:2em}.ui.grid.segment{margin:1rem 0;border-radius:.28571429rem}.ui.basic.table.segment{background:#fff;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui[class*="very basic"].table.segment{padding:1em 1em}.ui.placeholder.segment{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;max-width:initial;-webkit-animation:none;animation:none;overflow:visible;padding:1em 1em;min-height:18rem;background:#f9fafb;border-color:rgba(34,36,38,.15);-webkit-box-shadow:0 2px 25px 0 rgba(34,36,38,.05) inset;box-shadow:0 2px 25px 0 rgba(34,36,38,.05) inset}.ui.placeholder.segment .button,.ui.placeholder.segment textarea{display:block}.ui.placeholder.segment .button,.ui.placeholder.segment .field,.ui.placeholder.segment textarea,.ui.placeholder.segment>.ui.input{max-width:15rem;margin-left:auto;margin-right:auto}.ui.placeholder.segment .column .button,.ui.placeholder.segment .column .field,.ui.placeholder.segment .column textarea,.ui.placeholder.segment .column>.ui.input{max-width:15rem;margin-left:auto;margin-right:auto}.ui.placeholder.segment>.inline{-ms-flex-item-align:center;align-self:center}.ui.placeholder.segment>.inline>.button{display:inline-block;width:auto;margin:0 .35714286rem 0 0}.ui.placeholder.segment>.inline>.button:last-child{margin-right:0}.ui.piled.segment,.ui.piled.segments{margin:3em 0;-webkit-box-shadow:'';box-shadow:'';z-index:auto}.ui.piled.segment:first-child{margin-top:0}.ui.piled.segment:last-child{margin-bottom:0}.ui.piled.segment:after,.ui.piled.segment:before,.ui.piled.segments:after,.ui.piled.segments:before{background-color:#fff;visibility:visible;content:'';display:block;height:100%;left:0;position:absolute;width:100%;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:'';box-shadow:''}.ui.piled.segment:before,.ui.piled.segments:before{-webkit-transform:rotate(-1.2deg);transform:rotate(-1.2deg);top:0;z-index:-2}.ui.piled.segment:after,.ui.piled.segments:after{-webkit-transform:rotate(1.2deg);transform:rotate(1.2deg);top:0;z-index:-1}.ui[class*="top attached"].piled.segment{margin-top:3em;margin-bottom:0}.ui.piled.segment[class*="top attached"]:first-child{margin-top:0}.ui.piled.segment[class*="bottom attached"]{margin-top:0;margin-bottom:3em}.ui.piled.segment[class*="bottom attached"]:last-child{margin-bottom:0}.ui.stacked.segment{padding-bottom:1.4em}.ui.stacked.segment:after,.ui.stacked.segment:before,.ui.stacked.segments:after,.ui.stacked.segments:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(34,36,38,.15);background:rgba(0,0,0,.03);width:100%;height:6px;visibility:visible}.ui.stacked.segment:before,.ui.stacked.segments:before{display:none}.ui.tall.stacked.segment:before,.ui.tall.stacked.segments:before{display:block;bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before,.ui.stacked.inverted.segments:after,.ui.stacked.inverted.segments:before{background-color:rgba(0,0,0,.03);border-top:1px solid rgba(34,36,38,.35)}.ui.padded.segment{padding:1.5em}.ui[class*="very padded"].segment{padding:3em}.ui.padded.segment.vertical.segment,.ui[class*="very padded"].vertical.segment{padding-left:0;padding-right:0}.ui.compact.segment{display:table}.ui.compact.segments{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ui.compact.segments .segment,.ui.segments .compact.segment{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ui.circular.segment{display:table-cell;padding:2em;text-align:center;vertical-align:middle;border-radius:500em}.ui.raised.segment,.ui.raised.segments{-webkit-box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15)}.ui.segments{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;margin:1rem 0;border:1px solid rgba(34,36,38,.15);-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);border-radius:.28571429rem}.ui.segments:first-child{margin-top:0}.ui.segments:last-child{margin-bottom:0}.ui.segments>.segment{top:0;bottom:0;border-radius:0;margin:0;width:auto;-webkit-box-shadow:none;box-shadow:none;border:none;border-top:1px solid rgba(34,36,38,.15)}.ui.segments:not(.horizontal)>.segment:first-child{border-top:none;margin-top:0;bottom:0;margin-bottom:0;top:0;border-radius:.28571429rem .28571429rem 0 0}.ui.segments:not(.horizontal)>.segment:last-child{top:0;bottom:0;margin-top:0;margin-bottom:0;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui.segments:not(.horizontal)>.segment:only-child{border-radius:.28571429rem}.ui.segments>.ui.segments{border-top:1px solid rgba(34,36,38,.15);margin:1rem 1rem}.ui.segments>.segments:first-child{border-top:none}.ui.segments>.segment+.segments:not(.horizontal){margin-top:0}.ui.horizontal.segments{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;background-color:transparent;border-radius:0;padding:0;background-color:#fff;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15);box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;border-radius:.28571429rem;border:1px solid rgba(34,36,38,.15)}.ui.segments>.horizontal.segments{margin:0;background-color:transparent;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-top:1px solid rgba(34,36,38,.15)}.ui.horizontal.segments>.segment{-webkit-box-flex:1;flex:1 1 auto;-ms-flex:1 1 0px;margin:0;min-width:0;background-color:transparent;border-radius:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-left:1px solid rgba(34,36,38,.15)}.ui.segments>.horizontal.segments:first-child{border-top:none}.ui.horizontal.segments>.segment:first-child{border-left:none}.ui.disabled.segment{opacity:.45;color:rgba(40,40,40,.3)}.ui.loading.segment{position:relative;cursor:default;pointer-events:none;text-shadow:none!important;color:transparent!important;-webkit-transition:all 0s linear;transition:all 0s linear}.ui.loading.segment:before{position:absolute;content:'';top:0;left:0;background:rgba(255,255,255,.8);width:100%;height:100%;border-radius:.28571429rem;z-index:100}.ui.loading.segment:after{position:absolute;content:'';top:50%;left:50%;margin:-1.5em 0 0 -1.5em;width:3em;height:3em;-webkit-animation:segment-spin .6s linear;animation:segment-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent;visibility:visible;z-index:101}@-webkit-keyframes segment-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes segment-spin{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ui.basic.segment{background:none transparent;-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:0}.ui.clearing.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.red.segment:not(.inverted){border-top:2px solid #db2828!important}.ui.inverted.red.segment{background-color:#db2828!important;color:#fff!important}.ui.orange.segment:not(.inverted){border-top:2px solid #f2711c!important}.ui.inverted.orange.segment{background-color:#f2711c!important;color:#fff!important}.ui.yellow.segment:not(.inverted){border-top:2px solid #fbbd08!important}.ui.inverted.yellow.segment{background-color:#fbbd08!important;color:#fff!important}.ui.olive.segment:not(.inverted){border-top:2px solid #b5cc18!important}.ui.inverted.olive.segment{background-color:#b5cc18!important;color:#fff!important}.ui.green.segment:not(.inverted){border-top:2px solid #21ba45!important}.ui.inverted.green.segment{background-color:#21ba45!important;color:#fff!important}.ui.teal.segment:not(.inverted){border-top:2px solid #00b5ad!important}.ui.inverted.teal.segment{background-color:#00b5ad!important;color:#fff!important}.ui.blue.segment:not(.inverted){border-top:2px solid #2185d0!important}.ui.inverted.blue.segment{background-color:#2185d0!important;color:#fff!important}.ui.violet.segment:not(.inverted){border-top:2px solid #6435c9!important}.ui.inverted.violet.segment{background-color:#6435c9!important;color:#fff!important}.ui.purple.segment:not(.inverted){border-top:2px solid #a333c8!important}.ui.inverted.purple.segment{background-color:#a333c8!important;color:#fff!important}.ui.pink.segment:not(.inverted){border-top:2px solid #e03997!important}.ui.inverted.pink.segment{background-color:#e03997!important;color:#fff!important}.ui.brown.segment:not(.inverted){border-top:2px solid #a5673f!important}.ui.inverted.brown.segment{background-color:#a5673f!important;color:#fff!important}.ui.grey.segment:not(.inverted){border-top:2px solid #767676!important}.ui.inverted.grey.segment{background-color:#767676!important;color:#fff!important}.ui.black.segment:not(.inverted){border-top:2px solid #1b1c1d!important}.ui.inverted.black.segment{background-color:#1b1c1d!important;color:#fff!important}.ui[class*="left aligned"].segment{text-align:left}.ui[class*="right aligned"].segment{text-align:right}.ui[class*="center aligned"].segment{text-align:center}.ui.floated.segment,.ui[class*="left floated"].segment{float:left;margin-right:1em}.ui[class*="right floated"].segment{float:right;margin-left:1em}.ui.inverted.segment{border:none;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background:#1b1c1d;color:rgba(255,255,255,.9)}.ui.inverted.segment .segment{color:rgba(0,0,0,.87)}.ui.inverted.segment .inverted.segment{color:rgba(255,255,255,.9)}.ui.inverted.attached.segment{border-color:#555}.ui.secondary.segment{background:#f3f4f5;color:rgba(0,0,0,.6)}.ui.secondary.inverted.segment{background:#4c4f52 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.2)),to(rgba(255,255,255,.2)));background:#4c4f52 -webkit-linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);background:#4c4f52 linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%);color:rgba(255,255,255,.8)}.ui.tertiary.segment{background:#dcddde;color:rgba(0,0,0,.6)}.ui.tertiary.inverted.segment{background:#717579 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.35)),to(rgba(255,255,255,.35)));background:#717579 -webkit-linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);background:#717579 linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%);color:rgba(255,255,255,.8)}.ui.attached.segment{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% - (-1px * 2));max-width:calc(100% - (-1px * 2));-webkit-box-shadow:none;box-shadow:none;border:1px solid #d4d4d5}.ui.attached:not(.message)+.ui.attached.segment:not(.top){border-top:none}.ui[class*="top attached"].segment{bottom:0;margin-bottom:0;top:0;margin-top:1rem;border-radius:.28571429rem .28571429rem 0 0}.ui.segment[class*="top attached"]:first-child{margin-top:0}.ui.segment[class*="bottom attached"]{bottom:0;margin-top:0;top:0;margin-bottom:1rem;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui.segment[class*="bottom attached"]:last-child{margin-bottom:0}.ui.mini.segment,.ui.mini.segments .segment{font-size:.78571429rem}.ui.tiny.segment,.ui.tiny.segments .segment{font-size:.85714286rem}.ui.small.segment,.ui.small.segments .segment{font-size:.92857143rem}.ui.segment,.ui.segments .segment{font-size:1rem}.ui.large.segment,.ui.large.segments .segment{font-size:1.14285714rem}.ui.big.segment,.ui.big.segments .segment{font-size:1.28571429rem}.ui.huge.segment,.ui.huge.segments .segment{font-size:1.42857143rem}.ui.massive.segment,.ui.massive.segments .segment{font-size:1.71428571rem} \ No newline at end of file diff --git a/semantic/components/shape.css b/semantic/components/shape.css new file mode 100644 index 0000000..1c2386e --- /dev/null +++ b/semantic/components/shape.css @@ -0,0 +1,158 @@ +/*! + * # Semantic UI 2.4.0 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Shape +*******************************/ + +.ui.shape { + position: relative; + vertical-align: top; + display: inline-block; + -webkit-perspective: 2000px; + perspective: 2000px; + -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; + transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; +} +.ui.shape .sides { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.ui.shape .side { + opacity: 1; + width: 100%; + margin: 0em !important; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.ui.shape .side { + display: none; +} +.ui.shape .side * { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + + +/******************************* + Types +*******************************/ + +.ui.cube.shape .side { + min-width: 15em; + height: 15em; + padding: 2em; + background-color: #E6E6E6; + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} +.ui.cube.shape .side > .content { + width: 100%; + height: 100%; + display: table; + text-align: center; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.ui.cube.shape .side > .content > div { + display: table-cell; + vertical-align: middle; + font-size: 2em; +} + + +/******************************* + Variations +*******************************/ + +.ui.text.shape.animating .sides { + position: static; +} +.ui.text.shape .side { + white-space: nowrap; +} +.ui.text.shape .side > * { + white-space: normal; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Loading +---------------*/ + +.ui.loading.shape { + position: absolute; + top: -9999px; + left: -9999px; +} + +/*-------------- + Animating +---------------*/ + +.ui.shape .animating.side { + position: absolute; + top: 0px; + left: 0px; + display: block; + z-index: 100; +} +.ui.shape .hidden.side { + opacity: 0.6; +} + +/*-------------- + CSS +---------------*/ + +.ui.shape.animating .sides { + position: absolute; +} +.ui.shape.animating .sides { + -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; + transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out; + transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; +} +.ui.shape.animating .side { + -webkit-transition: opacity 0.6s ease-in-out; + transition: opacity 0.6s ease-in-out; +} + +/*-------------- + Active +---------------*/ + +.ui.shape .active.side { + display: block; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/shape.js b/semantic/components/shape.js new file mode 100644 index 0000000..97010cf --- /dev/null +++ b/semantic/components/shape.js @@ -0,0 +1,921 @@ +/*! + * # Semantic UI 2.4.1 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.shape = function(parameters) { + var + $allModules = $(this), + $body = $('body'), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + + $allModules + .each(function() { + var + moduleSelector = $allModules.selector || '', + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.shape.settings, parameters) + : $.extend({}, $.fn.shape.settings), + + // internal aliases + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + className = settings.className, + + // define namespaces for modules + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + // selector cache + $module = $(this), + $sides = $module.find(selector.sides), + $side = $module.find(selector.side), + + // private variables + nextIndex = false, + $activeSide, + $nextSide, + + // standard module + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing module for', element); + module.set.defaultSide(); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module for', element); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache for', element); + $module = $(element); + $sides = $(this).find(selector.shape); + $side = $(this).find(selector.side); + }, + + repaint: function() { + module.verbose('Forcing repaint event'); + var + shape = $sides[0] || document.createElement('div'), + fakeAssignment = shape.offsetWidth + ; + }, + + animate: function(propertyObject, callback) { + module.verbose('Animating box with properties', propertyObject); + callback = callback || function(event) { + module.verbose('Executing animation callback'); + if(event !== undefined) { + event.stopPropagation(); + } + module.reset(); + module.set.active(); + }; + settings.beforeChange.call($nextSide[0]); + if(module.get.transitionEvent()) { + module.verbose('Starting CSS animation'); + $module + .addClass(className.animating) + ; + $sides + .css(propertyObject) + .one(module.get.transitionEvent(), callback) + ; + module.set.duration(settings.duration); + requestAnimationFrame(function() { + $module + .addClass(className.animating) + ; + $activeSide + .addClass(className.hidden) + ; + }); + } + else { + callback(); + } + }, + + queue: function(method) { + module.debug('Queueing animation of', method); + $sides + .one(module.get.transitionEvent(), function() { + module.debug('Executing queued animation'); + setTimeout(function(){ + $module.shape(method); + }, 0); + }) + ; + }, + + reset: function() { + module.verbose('Animating states reset'); + $module + .removeClass(className.animating) + .attr('style', '') + .removeAttr('style') + ; + // removeAttr style does not consistently work in safari + $sides + .attr('style', '') + .removeAttr('style') + ; + $side + .attr('style', '') + .removeAttr('style') + .removeClass(className.hidden) + ; + $nextSide + .removeClass(className.animating) + .attr('style', '') + .removeAttr('style') + ; + }, + + is: { + complete: function() { + return ($side.filter('.' + className.active)[0] == $nextSide[0]); + }, + animating: function() { + return $module.hasClass(className.animating); + } + }, + + set: { + + defaultSide: function() { + $activeSide = $module.find('.' + settings.className.active); + $nextSide = ( $activeSide.next(selector.side).length > 0 ) + ? $activeSide.next(selector.side) + : $module.find(selector.side).first() + ; + nextIndex = false; + module.verbose('Active side set to', $activeSide); + module.verbose('Next side set to', $nextSide); + }, + + duration: function(duration) { + duration = duration || settings.duration; + duration = (typeof duration == 'number') + ? duration + 'ms' + : duration + ; + module.verbose('Setting animation duration', duration); + if(settings.duration || settings.duration === 0) { + $sides.add($side) + .css({ + '-webkit-transition-duration': duration, + '-moz-transition-duration': duration, + '-ms-transition-duration': duration, + '-o-transition-duration': duration, + 'transition-duration': duration + }) + ; + } + }, + + currentStageSize: function() { + var + $activeSide = $module.find('.' + settings.className.active), + width = $activeSide.outerWidth(true), + height = $activeSide.outerHeight(true) + ; + $module + .css({ + width: width, + height: height + }) + ; + }, + + stageSize: function() { + var + $clone = $module.clone().addClass(className.loading), + $activeSide = $clone.find('.' + settings.className.active), + $nextSide = (nextIndex) + ? $clone.find(selector.side).eq(nextIndex) + : ( $activeSide.next(selector.side).length > 0 ) + ? $activeSide.next(selector.side) + : $clone.find(selector.side).first(), + newWidth = (settings.width == 'next') + ? $nextSide.outerWidth(true) + : (settings.width == 'initial') + ? $module.width() + : settings.width, + newHeight = (settings.height == 'next') + ? $nextSide.outerHeight(true) + : (settings.height == 'initial') + ? $module.height() + : settings.height + ; + $activeSide.removeClass(className.active); + $nextSide.addClass(className.active); + $clone.insertAfter($module); + $clone.remove(); + if(settings.width != 'auto') { + $module.css('width', newWidth + settings.jitter); + module.verbose('Specifying width during animation', newWidth); + } + if(settings.height != 'auto') { + $module.css('height', newHeight + settings.jitter); + module.verbose('Specifying height during animation', newHeight); + } + }, + + nextSide: function(selector) { + nextIndex = selector; + $nextSide = $side.filter(selector); + nextIndex = $side.index($nextSide); + if($nextSide.length === 0) { + module.set.defaultSide(); + module.error(error.side); + } + module.verbose('Next side manually set to', $nextSide); + }, + + active: function() { + module.verbose('Setting new side to active', $nextSide); + $side + .removeClass(className.active) + ; + $nextSide + .addClass(className.active) + ; + settings.onChange.call($nextSide[0]); + module.set.defaultSide(); + } + }, + + flip: { + + up: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping up', $nextSide); + var + transform = module.get.transform.up() + ; + module.set.stageSize(); + module.stage.above(); + module.animate(transform); + } + else { + module.queue('flip up'); + } + }, + + down: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping down', $nextSide); + var + transform = module.get.transform.down() + ; + module.set.stageSize(); + module.stage.below(); + module.animate(transform); + } + else { + module.queue('flip down'); + } + }, + + left: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping left', $nextSide); + var + transform = module.get.transform.left() + ; + module.set.stageSize(); + module.stage.left(); + module.animate(transform); + } + else { + module.queue('flip left'); + } + }, + + right: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping right', $nextSide); + var + transform = module.get.transform.right() + ; + module.set.stageSize(); + module.stage.right(); + module.animate(transform); + } + else { + module.queue('flip right'); + } + }, + + over: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping over', $nextSide); + module.set.stageSize(); + module.stage.behind(); + module.animate(module.get.transform.over() ); + } + else { + module.queue('flip over'); + } + }, + + back: function() { + if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { + module.debug('Side already visible', $nextSide); + return; + } + if( !module.is.animating()) { + module.debug('Flipping back', $nextSide); + module.set.stageSize(); + module.stage.behind(); + module.animate(module.get.transform.back() ); + } + else { + module.queue('flip back'); + } + } + + }, + + get: { + + transform: { + up: function() { + var + translate = { + y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + z: -($activeSide.outerHeight(true) / 2) + } + ; + return { + transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' + }; + }, + + down: function() { + var + translate = { + y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + z: -($activeSide.outerHeight(true) / 2) + } + ; + return { + transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' + }; + }, + + left: function() { + var + translate = { + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), + z : -($activeSide.outerWidth(true) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' + }; + }, + + right: function() { + var + translate = { + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), + z : -($activeSide.outerWidth(true) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' + }; + }, + + over: function() { + var + translate = { + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' + }; + }, + + back: function() { + var + translate = { + x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' + }; + } + }, + + transitionEvent: function() { + var + element = document.createElement('element'), + transitions = { + 'transition' :'transitionend', + 'OTransition' :'oTransitionEnd', + 'MozTransition' :'transitionend', + 'WebkitTransition' :'webkitTransitionEnd' + }, + transition + ; + for(transition in transitions){ + if( element.style[transition] !== undefined ){ + return transitions[transition]; + } + } + }, + + nextSide: function() { + return ( $activeSide.next(selector.side).length > 0 ) + ? $activeSide.next(selector.side) + : $module.find(selector.side).first() + ; + } + + }, + + stage: { + + above: function() { + var + box = { + origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + depth : { + active : ($nextSide.outerHeight(true) / 2), + next : ($activeSide.outerHeight(true) / 2) + } + } + ; + module.verbose('Setting the initial animation position as above', $nextSide, box); + $sides + .css({ + 'transform' : 'translateZ(-' + box.depth.active + 'px)' + }) + ; + $activeSide + .css({ + 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + }) + ; + $nextSide + .addClass(className.animating) + .css({ + 'top' : box.origin + 'px', + 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' + }) + ; + }, + + below: function() { + var + box = { + origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), + depth : { + active : ($nextSide.outerHeight(true) / 2), + next : ($activeSide.outerHeight(true) / 2) + } + } + ; + module.verbose('Setting the initial animation position as below', $nextSide, box); + $sides + .css({ + 'transform' : 'translateZ(-' + box.depth.active + 'px)' + }) + ; + $activeSide + .css({ + 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + }) + ; + $nextSide + .addClass(className.animating) + .css({ + 'top' : box.origin + 'px', + 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' + }) + ; + }, + + left: function() { + var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, + box = { + origin : ( ( height.active - height.next ) / 2), + depth : { + active : (height.next / 2), + next : (height.active / 2) + } + } + ; + module.verbose('Setting the initial animation position as left', $nextSide, box); + $sides + .css({ + 'transform' : 'translateZ(-' + box.depth.active + 'px)' + }) + ; + $activeSide + .css({ + 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + }) + ; + $nextSide + .addClass(className.animating) + .css({ + 'left' : box.origin + 'px', + 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' + }) + ; + }, + + right: function() { + var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, + box = { + origin : ( ( height.active - height.next ) / 2), + depth : { + active : (height.next / 2), + next : (height.active / 2) + } + } + ; + module.verbose('Setting the initial animation position as left', $nextSide, box); + $sides + .css({ + 'transform' : 'translateZ(-' + box.depth.active + 'px)' + }) + ; + $activeSide + .css({ + 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + }) + ; + $nextSide + .addClass(className.animating) + .css({ + 'left' : box.origin + 'px', + 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' + }) + ; + }, + + behind: function() { + var + height = { + active : $activeSide.outerWidth(true), + next : $nextSide.outerWidth(true) + }, + box = { + origin : ( ( height.active - height.next ) / 2), + depth : { + active : (height.next / 2), + next : (height.active / 2) + } + } + ; + module.verbose('Setting the initial animation position as behind', $nextSide, box); + $activeSide + .css({ + 'transform' : 'rotateY(0deg)' + }) + ; + $nextSide + .addClass(className.animating) + .css({ + 'left' : box.origin + 'px', + 'transform' : 'rotateY(-180deg)' + }) + ; + } + }, + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.shape.settings = { + + // module info + name : 'Shape', + + // hide all debug content + silent : false, + + // debug content outputted to console + debug : false, + + // verbose debug output + verbose : false, + + // fudge factor in pixels when swapping from 2d to 3d (can be useful to correct rounding errors) + jitter : 0, + + // performance data output + performance: true, + + // event namespace + namespace : 'shape', + + // width during animation, can be set to 'auto', initial', 'next' or pixel amount + width: 'initial', + + // height during animation, can be set to 'auto', 'initial', 'next' or pixel amount + height: 'initial', + + // callback occurs on side change + beforeChange : function() {}, + onChange : function() {}, + + // allow animation to same side + allowRepeats: false, + + // animation duration + duration : false, + + // possible errors + error: { + side : 'You tried to switch to a side that does not exist.', + method : 'The method you called is not defined' + }, + + // classnames used + className : { + animating : 'animating', + hidden : 'hidden', + loading : 'loading', + active : 'active' + }, + + // selectors used + selector : { + sides : '.sides', + side : '.side' + } + +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/shape.min.css b/semantic/components/shape.min.css new file mode 100644 index 0000000..a7d491f --- /dev/null +++ b/semantic/components/shape.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.shape{position:relative;vertical-align:top;display:inline-block;-webkit-perspective:2000px;perspective:2000px;-webkit-transition:left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out;transition:left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out,left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out;transition:transform .6s ease-in-out,left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out}.ui.shape .sides{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.ui.shape .side{opacity:1;width:100%;margin:0!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.shape .side{display:none}.ui.shape .side *{-webkit-backface-visibility:visible!important;backface-visibility:visible!important}.ui.cube.shape .side{min-width:15em;height:15em;padding:2em;background-color:#e6e6e6;color:rgba(0,0,0,.87);-webkit-box-shadow:0 0 2px rgba(0,0,0,.3);box-shadow:0 0 2px rgba(0,0,0,.3)}.ui.cube.shape .side>.content{width:100%;height:100%;display:table;text-align:center;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.cube.shape .side>.content>div{display:table-cell;vertical-align:middle;font-size:2em}.ui.text.shape.animating .sides{position:static}.ui.text.shape .side{white-space:nowrap}.ui.text.shape .side>*{white-space:normal}.ui.loading.shape{position:absolute;top:-9999px;left:-9999px}.ui.shape .animating.side{position:absolute;top:0;left:0;display:block;z-index:100}.ui.shape .hidden.side{opacity:.6}.ui.shape.animating .sides{position:absolute}.ui.shape.animating .sides{-webkit-transition:left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out;transition:left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out,left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out;transition:transform .6s ease-in-out,left .6s ease-in-out,width .6s ease-in-out,height .6s ease-in-out,-webkit-transform .6s ease-in-out}.ui.shape.animating .side{-webkit-transition:opacity .6s ease-in-out;transition:opacity .6s ease-in-out}.ui.shape .active.side{display:block} \ No newline at end of file diff --git a/semantic/components/shape.min.js b/semantic/components/shape.min.js new file mode 100644 index 0000000..c50c05d --- /dev/null +++ b/semantic/components/shape.min.js @@ -0,0 +1 @@ +!function(H,e,T,Z){"use strict";e=void 0!==e&&e.Math==Math?e:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),H.fn.shape=function(v){var b,x=H(this),y=(H("body"),(new Date).getTime()),S=[],w=v,C="string"==typeof w,W=[].slice.call(arguments,1),F=e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,0)};return x.each(function(){var n,a,o,t=x.selector||"",s=H.isPlainObject(v)?H.extend(!0,{},H.fn.shape.settings,v):H.extend({},H.fn.shape.settings),e=s.namespace,r=s.selector,i=s.error,l=s.className,d="."+e,u="module-"+e,c=H(this),g=c.find(r.sides),f=c.find(r.side),m=!1,h=this,p=c.data(u);o={initialize:function(){o.verbose("Initializing module for",h),o.set.defaultSide(),o.instantiate()},instantiate:function(){o.verbose("Storing instance of module",o),p=o,c.data(u,p)},destroy:function(){o.verbose("Destroying previous module for",h),c.removeData(u).off(d)},refresh:function(){o.verbose("Refreshing selector cache for",h),c=H(h),g=H(this).find(r.shape),f=H(this).find(r.side)},repaint:function(){o.verbose("Forcing repaint event");(g[0]||T.createElement("div")).offsetWidth},animate:function(e,t){o.verbose("Animating box with properties",e),t=t||function(e){o.verbose("Executing animation callback"),e!==Z&&e.stopPropagation(),o.reset(),o.set.active()},s.beforeChange.call(a[0]),o.get.transitionEvent()?(o.verbose("Starting CSS animation"),c.addClass(l.animating),g.css(e).one(o.get.transitionEvent(),t),o.set.duration(s.duration),F(function(){c.addClass(l.animating),n.addClass(l.hidden)})):t()},queue:function(e){o.debug("Queueing animation of",e),g.one(o.get.transitionEvent(),function(){o.debug("Executing queued animation"),setTimeout(function(){c.shape(e)},0)})},reset:function(){o.verbose("Animating states reset"),c.removeClass(l.animating).attr("style","").removeAttr("style"),g.attr("style","").removeAttr("style"),f.attr("style","").removeAttr("style").removeClass(l.hidden),a.removeClass(l.animating).attr("style","").removeAttr("style")},is:{complete:function(){return f.filter("."+l.active)[0]==a[0]},animating:function(){return c.hasClass(l.animating)}},set:{defaultSide:function(){n=c.find("."+s.className.active),a=0 * { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/*-------------- + Direction +---------------*/ + +.ui.left.sidebar { + right: auto; + left: 0px; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.ui.right.sidebar { + right: 0px !important; + left: auto !important; + -webkit-transform: translate3d(100%, 0%, 0); + transform: translate3d(100%, 0%, 0); +} +.ui.top.sidebar, +.ui.bottom.sidebar { + width: 100% !important; + height: auto !important; +} +.ui.top.sidebar { + top: 0px !important; + bottom: auto !important; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} +.ui.bottom.sidebar { + top: auto !important; + bottom: 0px !important; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} + +/*-------------- + Pushable +---------------*/ + +.pushable { + height: 100%; + overflow-x: hidden; + padding: 0em !important; +} + +/* Whole Page */ +body.pushable { + background: #545454 !important; +} + +/* Page Context */ +.pushable:not(body) { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.pushable:not(body) > .ui.sidebar, +.pushable:not(body) > .fixed, +.pushable:not(body) > .pusher:after { + position: absolute; +} + +/*-------------- + Fixed +---------------*/ + +.pushable > .fixed { + position: fixed; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; + will-change: transform; + z-index: 101; +} + +/*-------------- + Page +---------------*/ + +.pushable > .pusher { + position: relative; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + overflow: hidden; + min-height: 100%; + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; + z-index: 2; +} +body.pushable > .pusher { + background: #FFFFFF; +} + +/* Pusher should inherit background from context */ +.pushable > .pusher { + background: inherit; +} + +/*-------------- + Dimmer +---------------*/ + +.pushable > .pusher:after { + position: fixed; + top: 0px; + right: 0px; + content: ''; + background-color: rgba(0, 0, 0, 0.4); + overflow: hidden; + opacity: 0; + -webkit-transition: opacity 500ms; + transition: opacity 500ms; + will-change: opacity; + z-index: 1000; +} + +/*-------------- + Coupling +---------------*/ + +.ui.sidebar.menu .item { + border-radius: 0em !important; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Dimmed +---------------*/ + +.pushable > .pusher.dimmed:after { + width: 100% !important; + height: 100% !important; + opacity: 1 !important; +} + +/*-------------- + Animating +---------------*/ + +.ui.animating.sidebar { + visibility: visible; +} + +/*-------------- + Visible +---------------*/ + +.ui.visible.sidebar { + visibility: visible; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/* Shadow Direction */ +.ui.left.visible.sidebar, +.ui.right.visible.sidebar { + -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); +} +.ui.top.visible.sidebar, +.ui.bottom.visible.sidebar { + -webkit-box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); +} + +/* Visible On Load */ +.ui.visible.left.sidebar ~ .fixed, +.ui.visible.left.sidebar ~ .pusher { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +.ui.visible.right.sidebar ~ .fixed, +.ui.visible.right.sidebar ~ .pusher { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +.ui.visible.top.sidebar ~ .fixed, +.ui.visible.top.sidebar ~ .pusher { + -webkit-transform: translate3d(0, 36px, 0); + transform: translate3d(0, 36px, 0); +} +.ui.visible.bottom.sidebar ~ .fixed, +.ui.visible.bottom.sidebar ~ .pusher { + -webkit-transform: translate3d(0, -36px, 0); + transform: translate3d(0, -36px, 0); +} + +/* opposite sides visible forces content overlay */ +.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed, +.ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher, +.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .fixed, +.ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +/*-------------- + iOS +---------------*/ + + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Width +---------------*/ + + +/* Left / Right */ +.ui.thin.left.sidebar, +.ui.thin.right.sidebar { + width: 150px; +} +.ui[class*="very thin"].left.sidebar, +.ui[class*="very thin"].right.sidebar { + width: 60px; +} +.ui.left.sidebar, +.ui.right.sidebar { + width: 260px; +} +.ui.wide.left.sidebar, +.ui.wide.right.sidebar { + width: 350px; +} +.ui[class*="very wide"].left.sidebar, +.ui[class*="very wide"].right.sidebar { + width: 475px; +} + +/* Left Visible */ +.ui.visible.thin.left.sidebar ~ .fixed, +.ui.visible.thin.left.sidebar ~ .pusher { + -webkit-transform: translate3d(150px, 0, 0); + transform: translate3d(150px, 0, 0); +} +.ui.visible[class*="very thin"].left.sidebar ~ .fixed, +.ui.visible[class*="very thin"].left.sidebar ~ .pusher { + -webkit-transform: translate3d(60px, 0, 0); + transform: translate3d(60px, 0, 0); +} +.ui.visible.wide.left.sidebar ~ .fixed, +.ui.visible.wide.left.sidebar ~ .pusher { + -webkit-transform: translate3d(350px, 0, 0); + transform: translate3d(350px, 0, 0); +} +.ui.visible[class*="very wide"].left.sidebar ~ .fixed, +.ui.visible[class*="very wide"].left.sidebar ~ .pusher { + -webkit-transform: translate3d(475px, 0, 0); + transform: translate3d(475px, 0, 0); +} + +/* Right Visible */ +.ui.visible.thin.right.sidebar ~ .fixed, +.ui.visible.thin.right.sidebar ~ .pusher { + -webkit-transform: translate3d(-150px, 0, 0); + transform: translate3d(-150px, 0, 0); +} +.ui.visible[class*="very thin"].right.sidebar ~ .fixed, +.ui.visible[class*="very thin"].right.sidebar ~ .pusher { + -webkit-transform: translate3d(-60px, 0, 0); + transform: translate3d(-60px, 0, 0); +} +.ui.visible.wide.right.sidebar ~ .fixed, +.ui.visible.wide.right.sidebar ~ .pusher { + -webkit-transform: translate3d(-350px, 0, 0); + transform: translate3d(-350px, 0, 0); +} +.ui.visible[class*="very wide"].right.sidebar ~ .fixed, +.ui.visible[class*="very wide"].right.sidebar ~ .pusher { + -webkit-transform: translate3d(-475px, 0, 0); + transform: translate3d(-475px, 0, 0); +} + + +/******************************* + Animations +*******************************/ + + +/*-------------- + Overlay +---------------*/ + + +/* Set-up */ +.ui.overlay.sidebar { + z-index: 102; +} + +/* Initial */ +.ui.left.overlay.sidebar { + -webkit-transform: translate3d(-100%, 0%, 0); + transform: translate3d(-100%, 0%, 0); +} +.ui.right.overlay.sidebar { + -webkit-transform: translate3d(100%, 0%, 0); + transform: translate3d(100%, 0%, 0); +} +.ui.top.overlay.sidebar { + -webkit-transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.overlay.sidebar { + -webkit-transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); +} + +/* Animation */ +.animating.ui.overlay.sidebar, +.ui.visible.overlay.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; +} + +/* End - Sidebar */ +.ui.visible.left.overlay.sidebar { + -webkit-transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); +} +.ui.visible.right.overlay.sidebar { + -webkit-transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); +} +.ui.visible.top.overlay.sidebar { + -webkit-transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); +} +.ui.visible.bottom.overlay.sidebar { + -webkit-transform: translate3d(0%, 0%, 0); + transform: translate3d(0%, 0%, 0); +} + +/* End - Pusher */ +.ui.visible.overlay.sidebar ~ .fixed, +.ui.visible.overlay.sidebar ~ .pusher { + -webkit-transform: none !important; + transform: none !important; +} + +/*-------------- + Push +---------------*/ + + +/* Initial */ +.ui.push.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; + z-index: 102; +} + +/* Sidebar - Initial */ +.ui.left.push.sidebar { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.ui.right.push.sidebar { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} +.ui.top.push.sidebar { + -webkit-transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.push.sidebar { + -webkit-transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); +} + +/* End */ +.ui.visible.push.sidebar { + -webkit-transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); +} + +/*-------------- + Uncover +---------------*/ + + +/* Initial */ +.ui.uncover.sidebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + z-index: 1; +} + +/* End */ +.ui.visible.uncover.sidebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; +} + +/*-------------- + Slide Along +---------------*/ + + +/* Initial */ +.ui.slide.along.sidebar { + z-index: 1; +} + +/* Sidebar - Initial */ +.ui.left.slide.along.sidebar { + -webkit-transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); +} +.ui.right.slide.along.sidebar { + -webkit-transform: translate3d(50%, 0, 0); + transform: translate3d(50%, 0, 0); +} +.ui.top.slide.along.sidebar { + -webkit-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); +} +.ui.bottom.slide.along.sidebar { + -webkit-transform: translate3d(0%, 50%, 0); + transform: translate3d(0%, 50%, 0); +} + +/* Animation */ +.ui.animating.slide.along.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; +} + +/* End */ +.ui.visible.slide.along.sidebar { + -webkit-transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); +} + +/*-------------- + Slide Out +---------------*/ + + +/* Initial */ +.ui.slide.out.sidebar { + z-index: 1; +} + +/* Sidebar - Initial */ +.ui.left.slide.out.sidebar { + -webkit-transform: translate3d(50%, 0, 0); + transform: translate3d(50%, 0, 0); +} +.ui.right.slide.out.sidebar { + -webkit-transform: translate3d(-50%, 0, 0); + transform: translate3d(-50%, 0, 0); +} +.ui.top.slide.out.sidebar { + -webkit-transform: translate3d(0%, 50%, 0); + transform: translate3d(0%, 50%, 0); +} +.ui.bottom.slide.out.sidebar { + -webkit-transform: translate3d(0%, -50%, 0); + transform: translate3d(0%, -50%, 0); +} + +/* Animation */ +.ui.animating.slide.out.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; +} + +/* End */ +.ui.visible.slide.out.sidebar { + -webkit-transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); +} + +/*-------------- + Scale Down +---------------*/ + + +/* Initial */ +.ui.scale.down.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; + z-index: 102; +} + +/* Sidebar - Initial */ +.ui.left.scale.down.sidebar { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.ui.right.scale.down.sidebar { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} +.ui.top.scale.down.sidebar { + -webkit-transform: translate3d(0%, -100%, 0); + transform: translate3d(0%, -100%, 0); +} +.ui.bottom.scale.down.sidebar { + -webkit-transform: translate3d(0%, 100%, 0); + transform: translate3d(0%, 100%, 0); +} + +/* Pusher - Initial */ +.ui.scale.down.left.sidebar ~ .pusher { + -webkit-transform-origin: 75% 50%; + transform-origin: 75% 50%; +} +.ui.scale.down.right.sidebar ~ .pusher { + -webkit-transform-origin: 25% 50%; + transform-origin: 25% 50%; +} +.ui.scale.down.top.sidebar ~ .pusher { + -webkit-transform-origin: 50% 75%; + transform-origin: 50% 75%; +} +.ui.scale.down.bottom.sidebar ~ .pusher { + -webkit-transform-origin: 50% 25%; + transform-origin: 50% 25%; +} + +/* Animation */ +.ui.animating.scale.down > .visible.ui.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: -webkit-transform 500ms ease; + transition: transform 500ms ease; + transition: transform 500ms ease, -webkit-transform 500ms ease; +} +.ui.visible.scale.down.sidebar ~ .pusher, +.ui.animating.scale.down.sidebar ~ .pusher { + display: block !important; + width: 100%; + height: 100%; + overflow: hidden !important; +} + +/* End */ +.ui.visible.scale.down.sidebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.ui.visible.scale.down.sidebar ~ .pusher { + -webkit-transform: scale(0.75); + transform: scale(0.75); +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/sidebar.js b/semantic/components/sidebar.js new file mode 100644 index 0000000..cfdefa1 --- /dev/null +++ b/semantic/components/sidebar.js @@ -0,0 +1,1033 @@ +/*! + * # Semantic UI 2.4.1 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.sidebar = function(parameters) { + var + $allModules = $(this), + $window = $(window), + $document = $(document), + $html = $('html'), + $head = $('head'), + + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.sidebar.settings, parameters) + : $.extend({}, $.fn.sidebar.settings), + + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + regExp = settings.regExp, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $context = $(settings.context), + + $sidebars = $module.children(selector.sidebar), + $fixed = $context.children(selector.fixed), + $pusher = $context.children(selector.pusher), + $style, + + element = this, + instance = $module.data(moduleNamespace), + + elementNamespace, + id, + currentScroll, + transitionEvent, + + module + ; + + module = { + + initialize: function() { + module.debug('Initializing sidebar', parameters); + + module.create.id(); + + transitionEvent = module.get.transitionEvent(); + + // avoids locking rendering if initialized in onReady + if(settings.delaySetup) { + requestAnimationFrame(module.setup.layout); + } + else { + module.setup.layout(); + } + + requestAnimationFrame(function() { + module.setup.cache(); + }); + + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + create: { + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2,8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + } + }, + + destroy: function() { + module.verbose('Destroying previous module for', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + if(module.is.ios()) { + module.remove.ios(); + } + // bound by uuid + $context.off(elementNamespace); + $window.off(elementNamespace); + $document.off(elementNamespace); + }, + + event: { + clickaway: function(event) { + var + clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)), + clickedContext = ($context.is(event.target)) + ; + if(clickedInPusher) { + module.verbose('User clicked on dimmed page'); + module.hide(); + } + if(clickedContext) { + module.verbose('User clicked on dimmable context (scaled out page)'); + module.hide(); + } + }, + touch: function(event) { + //event.stopPropagation(); + }, + containScroll: function(event) { + if(element.scrollTop <= 0) { + element.scrollTop = 1; + } + if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) { + element.scrollTop = element.scrollHeight - element.offsetHeight - 1; + } + }, + scroll: function(event) { + if( $(event.target).closest(selector.sidebar).length === 0 ) { + event.preventDefault(); + } + } + }, + + bind: { + clickaway: function() { + module.verbose('Adding clickaway events to context', $context); + if(settings.closable) { + $context + .on('click' + elementNamespace, module.event.clickaway) + .on('touchend' + elementNamespace, module.event.clickaway) + ; + } + }, + scrollLock: function() { + if(settings.scrollLock) { + module.debug('Disabling page scroll'); + $window + .on('DOMMouseScroll' + elementNamespace, module.event.scroll) + ; + } + module.verbose('Adding events to contain sidebar scroll'); + $document + .on('touchmove' + elementNamespace, module.event.touch) + ; + $module + .on('scroll' + eventNamespace, module.event.containScroll) + ; + } + }, + unbind: { + clickaway: function() { + module.verbose('Removing clickaway events from context', $context); + $context.off(elementNamespace); + }, + scrollLock: function() { + module.verbose('Removing scroll lock from page'); + $document.off(elementNamespace); + $window.off(elementNamespace); + $module.off('scroll' + eventNamespace); + } + }, + + add: { + inlineCSS: function() { + var + width = module.cache.width || $module.outerWidth(), + height = module.cache.height || $module.outerHeight(), + isRTL = module.is.rtl(), + direction = module.get.direction(), + distance = { + left : width, + right : -width, + top : height, + bottom : -height + }, + style + ; + + if(isRTL){ + module.verbose('RTL detected, flipping widths'); + distance.left = -width; + distance.right = width; + } + + style = ''; + $style = $(style) + .appendTo($head) + ; + module.debug('Adding sizing css to head', $style); + } + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $context = $(settings.context); + $sidebars = $context.children(selector.sidebar); + $pusher = $context.children(selector.pusher); + $fixed = $context.children(selector.fixed); + module.clear.cache(); + }, + + refreshSidebars: function() { + module.verbose('Refreshing other sidebars'); + $sidebars = $context.children(selector.sidebar); + }, + + repaint: function() { + module.verbose('Forcing repaint event'); + element.style.display = 'none'; + var ignored = element.offsetHeight; + element.scrollTop = element.scrollTop; + element.style.display = ''; + }, + + setup: { + cache: function() { + module.cache = { + width : $module.outerWidth(), + height : $module.outerHeight(), + rtl : ($module.css('direction') == 'rtl') + }; + }, + layout: function() { + if( $context.children(selector.pusher).length === 0 ) { + module.debug('Adding wrapper element for sidebar'); + module.error(error.pusher); + $pusher = $('
'); + $context + .children() + .not(selector.omitted) + .not($sidebars) + .wrapAll($pusher) + ; + module.refresh(); + } + if($module.nextAll(selector.pusher).length === 0 || $module.nextAll(selector.pusher)[0] !== $pusher[0]) { + module.debug('Moved sidebar to correct parent element'); + module.error(error.movedSidebar, element); + $module.detach().prependTo($context); + module.refresh(); + } + module.clear.cache(); + module.set.pushable(); + module.set.direction(); + } + }, + + attachEvents: function(selector, event) { + var + $toggle = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($toggle.length > 0) { + module.debug('Attaching sidebar events to element', selector, event); + $toggle + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound, selector); + } + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(module.is.hidden()) { + module.refreshSidebars(); + if(settings.overlay) { + module.error(error.overlay); + settings.transition = 'overlay'; + } + module.refresh(); + if(module.othersActive()) { + module.debug('Other sidebars currently visible'); + if(settings.exclusive) { + // if not overlay queue animation after hide + if(settings.transition != 'overlay') { + module.hideOthers(module.show); + return; + } + else { + module.hideOthers(); + } + } + else { + settings.transition = 'overlay'; + } + } + module.pushPage(function() { + callback.call(element); + settings.onShow.call(element); + }); + settings.onChange.call(element); + settings.onVisible.call(element); + } + else { + module.debug('Sidebar is already visible'); + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(module.is.visible() || module.is.animating()) { + module.debug('Hiding sidebar', callback); + module.refreshSidebars(); + module.pullPage(function() { + callback.call(element); + settings.onHidden.call(element); + }); + settings.onChange.call(element); + settings.onHide.call(element); + } + }, + + othersAnimating: function() { + return ($sidebars.not($module).filter('.' + className.animating).length > 0); + }, + othersVisible: function() { + return ($sidebars.not($module).filter('.' + className.visible).length > 0); + }, + othersActive: function() { + return(module.othersVisible() || module.othersAnimating()); + }, + + hideOthers: function(callback) { + var + $otherSidebars = $sidebars.not($module).filter('.' + className.visible), + sidebarCount = $otherSidebars.length, + callbackCount = 0 + ; + callback = callback || function(){}; + $otherSidebars + .sidebar('hide', function() { + callbackCount++; + if(callbackCount == sidebarCount) { + callback(); + } + }) + ; + }, + + toggle: function() { + module.verbose('Determining toggled direction'); + if(module.is.hidden()) { + module.show(); + } + else { + module.hide(); + } + }, + + pushPage: function(callback) { + var + transition = module.get.transition(), + $transition = (transition === 'overlay' || module.othersActive()) + ? $module + : $pusher, + animate, + dim, + transitionEnd + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(settings.transition == 'scale down') { + module.scrollToTop(); + } + module.set.transition(transition); + module.repaint(); + animate = function() { + module.bind.clickaway(); + module.add.inlineCSS(); + module.set.animating(); + module.set.visible(); + }; + dim = function() { + module.set.dimmed(); + }; + transitionEnd = function(event) { + if( event.target == $transition[0] ) { + $transition.off(transitionEvent + elementNamespace, transitionEnd); + module.remove.animating(); + module.bind.scrollLock(); + callback.call(element); + } + }; + $transition.off(transitionEvent + elementNamespace); + $transition.on(transitionEvent + elementNamespace, transitionEnd); + requestAnimationFrame(animate); + if(settings.dimPage && !module.othersVisible()) { + requestAnimationFrame(dim); + } + }, + + pullPage: function(callback) { + var + transition = module.get.transition(), + $transition = (transition == 'overlay' || module.othersActive()) + ? $module + : $pusher, + animate, + transitionEnd + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.verbose('Removing context push state', module.get.direction()); + + module.unbind.clickaway(); + module.unbind.scrollLock(); + + animate = function() { + module.set.transition(transition); + module.set.animating(); + module.remove.visible(); + if(settings.dimPage && !module.othersVisible()) { + $pusher.removeClass(className.dimmed); + } + }; + transitionEnd = function(event) { + if( event.target == $transition[0] ) { + $transition.off(transitionEvent + elementNamespace, transitionEnd); + module.remove.animating(); + module.remove.transition(); + module.remove.inlineCSS(); + if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) { + module.scrollBack(); + } + callback.call(element); + } + }; + $transition.off(transitionEvent + elementNamespace); + $transition.on(transitionEvent + elementNamespace, transitionEnd); + requestAnimationFrame(animate); + }, + + scrollToTop: function() { + module.verbose('Scrolling to top of page to avoid animation issues'); + currentScroll = $(window).scrollTop(); + $module.scrollTop(0); + window.scrollTo(0, 0); + }, + + scrollBack: function() { + module.verbose('Scrolling back to original page position'); + window.scrollTo(0, currentScroll); + }, + + clear: { + cache: function() { + module.verbose('Clearing cached dimensions'); + module.cache = {}; + } + }, + + set: { + + // ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios + // (This is no longer necessary in latest iOS) + ios: function() { + $html.addClass(className.ios); + }, + + // container + pushed: function() { + $context.addClass(className.pushed); + }, + pushable: function() { + $context.addClass(className.pushable); + }, + + // pusher + dimmed: function() { + $pusher.addClass(className.dimmed); + }, + + // sidebar + active: function() { + $module.addClass(className.active); + }, + animating: function() { + $module.addClass(className.animating); + }, + transition: function(transition) { + transition = transition || module.get.transition(); + $module.addClass(transition); + }, + direction: function(direction) { + direction = direction || module.get.direction(); + $module.addClass(className[direction]); + }, + visible: function() { + $module.addClass(className.visible); + }, + overlay: function() { + $module.addClass(className.overlay); + } + }, + remove: { + + inlineCSS: function() { + module.debug('Removing inline css styles', $style); + if($style && $style.length > 0) { + $style.remove(); + } + }, + + // ios scroll on html not document + ios: function() { + $html.removeClass(className.ios); + }, + + // context + pushed: function() { + $context.removeClass(className.pushed); + }, + pushable: function() { + $context.removeClass(className.pushable); + }, + + // sidebar + active: function() { + $module.removeClass(className.active); + }, + animating: function() { + $module.removeClass(className.animating); + }, + transition: function(transition) { + transition = transition || module.get.transition(); + $module.removeClass(transition); + }, + direction: function(direction) { + direction = direction || module.get.direction(); + $module.removeClass(className[direction]); + }, + visible: function() { + $module.removeClass(className.visible); + }, + overlay: function() { + $module.removeClass(className.overlay); + } + }, + + get: { + direction: function() { + if($module.hasClass(className.top)) { + return className.top; + } + else if($module.hasClass(className.right)) { + return className.right; + } + else if($module.hasClass(className.bottom)) { + return className.bottom; + } + return className.left; + }, + transition: function() { + var + direction = module.get.direction(), + transition + ; + transition = ( module.is.mobile() ) + ? (settings.mobileTransition == 'auto') + ? settings.defaultTransition.mobile[direction] + : settings.mobileTransition + : (settings.transition == 'auto') + ? settings.defaultTransition.computer[direction] + : settings.transition + ; + module.verbose('Determined transition', transition); + return transition; + }, + transitionEvent: function() { + var + element = document.createElement('element'), + transitions = { + 'transition' :'transitionend', + 'OTransition' :'oTransitionEnd', + 'MozTransition' :'transitionend', + 'WebkitTransition' :'webkitTransitionEnd' + }, + transition + ; + for(transition in transitions){ + if( element.style[transition] !== undefined ){ + return transitions[transition]; + } + } + } + }, + + is: { + + ie: function() { + var + isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window), + isIE = ('ActiveXObject' in window) + ; + return (isIE11 || isIE); + }, + + ios: function() { + var + userAgent = navigator.userAgent, + isIOS = userAgent.match(regExp.ios), + isMobileChrome = userAgent.match(regExp.mobileChrome) + ; + if(isIOS && !isMobileChrome) { + module.verbose('Browser was found to be iOS', userAgent); + return true; + } + else { + return false; + } + }, + mobile: function() { + var + userAgent = navigator.userAgent, + isMobile = userAgent.match(regExp.mobile) + ; + if(isMobile) { + module.verbose('Browser was found to be mobile', userAgent); + return true; + } + else { + module.verbose('Browser is not mobile, using regular transition', userAgent); + return false; + } + }, + hidden: function() { + return !module.is.visible(); + }, + visible: function() { + return $module.hasClass(className.visible); + }, + // alias + open: function() { + return module.is.visible(); + }, + closed: function() { + return module.is.hidden(); + }, + vertical: function() { + return $module.hasClass(className.top); + }, + animating: function() { + return $context.hasClass(className.animating); + }, + rtl: function () { + if(module.cache.rtl === undefined) { + module.cache.rtl = ($module.css('direction') == 'rtl'); + } + return module.cache.rtl; + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + } + ; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.invoke('destroy'); + } + module.initialize(); + } + }); + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.sidebar.settings = { + + name : 'Sidebar', + namespace : 'sidebar', + + silent : false, + debug : false, + verbose : false, + performance : true, + + transition : 'auto', + mobileTransition : 'auto', + + defaultTransition : { + computer: { + left : 'uncover', + right : 'uncover', + top : 'overlay', + bottom : 'overlay' + }, + mobile: { + left : 'uncover', + right : 'uncover', + top : 'overlay', + bottom : 'overlay' + } + }, + + context : 'body', + exclusive : false, + closable : true, + dimPage : true, + scrollLock : false, + returnScroll : false, + delaySetup : false, + + duration : 500, + + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, + + onHidden : function(){}, + onVisible : function(){}, + + className : { + active : 'active', + animating : 'animating', + dimmed : 'dimmed', + ios : 'ios', + pushable : 'pushable', + pushed : 'pushed', + right : 'right', + top : 'top', + left : 'left', + bottom : 'bottom', + visible : 'visible' + }, + + selector: { + fixed : '.fixed', + omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed', + pusher : '.pusher', + sidebar : '.ui.sidebar' + }, + + regExp: { + ios : /(iPad|iPhone|iPod)/g, + mobileChrome : /(CriOS)/g, + mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g + }, + + error : { + method : 'The method you called is not defined.', + pusher : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element', + movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag', + overlay : 'The overlay setting is no longer supported, use animation: overlay', + notFound : 'There were no elements that matched the specified selector' + } + +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/sidebar.min.css b/semantic/components/sidebar.min.css new file mode 100644 index 0000000..2abeab6 --- /dev/null +++ b/semantic/components/sidebar.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.sidebar{position:fixed;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:none;transition:none;will-change:transform;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;-webkit-overflow-scrolling:touch;height:100%!important;max-height:100%;border-radius:0!important;margin:0!important;overflow-y:auto!important;z-index:102}.ui.sidebar>*{-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.left.sidebar{right:auto;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.sidebar{right:0!important;left:auto!important;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.bottom.sidebar,.ui.top.sidebar{width:100%!important;height:auto!important}.ui.top.sidebar{top:0!important;bottom:auto!important;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.sidebar{top:auto!important;bottom:0!important;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.pushable{height:100%;overflow-x:hidden;padding:0!important}body.pushable{background:#545454!important}.pushable:not(body){-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.pushable:not(body)>.fixed,.pushable:not(body)>.pusher:after,.pushable:not(body)>.ui.sidebar{position:absolute}.pushable>.fixed{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;will-change:transform;z-index:101}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;min-height:100%;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:2}body.pushable>.pusher{background:#fff}.pushable>.pusher{background:inherit}.pushable>.pusher:after{position:fixed;top:0;right:0;content:'';background-color:rgba(0,0,0,.4);overflow:hidden;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s;will-change:opacity;z-index:1000}.ui.sidebar.menu .item{border-radius:0!important}.pushable>.pusher.dimmed:after{width:100%!important;height:100%!important;opacity:1!important}.ui.animating.sidebar{visibility:visible}.ui.visible.sidebar{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.left.visible.sidebar,.ui.right.visible.sidebar{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.bottom.visible.sidebar,.ui.top.visible.sidebar{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.visible.left.sidebar~.fixed,.ui.visible.left.sidebar~.pusher{-webkit-transform:translate3d(260px,0,0);transform:translate3d(260px,0,0)}.ui.visible.right.sidebar~.fixed,.ui.visible.right.sidebar~.pusher{-webkit-transform:translate3d(-260px,0,0);transform:translate3d(-260px,0,0)}.ui.visible.top.sidebar~.fixed,.ui.visible.top.sidebar~.pusher{-webkit-transform:translate3d(0,36px,0);transform:translate3d(0,36px,0)}.ui.visible.bottom.sidebar~.fixed,.ui.visible.bottom.sidebar~.pusher{-webkit-transform:translate3d(0,-36px,0);transform:translate3d(0,-36px,0)}.ui.visible.left.sidebar~.ui.visible.right.sidebar~.fixed,.ui.visible.left.sidebar~.ui.visible.right.sidebar~.pusher,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.fixed,.ui.visible.right.sidebar~.ui.visible.left.sidebar~.pusher{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.thin.left.sidebar,.ui.thin.right.sidebar{width:150px}.ui[class*="very thin"].left.sidebar,.ui[class*="very thin"].right.sidebar{width:60px}.ui.left.sidebar,.ui.right.sidebar{width:260px}.ui.wide.left.sidebar,.ui.wide.right.sidebar{width:350px}.ui[class*="very wide"].left.sidebar,.ui[class*="very wide"].right.sidebar{width:475px}.ui.visible.thin.left.sidebar~.fixed,.ui.visible.thin.left.sidebar~.pusher{-webkit-transform:translate3d(150px,0,0);transform:translate3d(150px,0,0)}.ui.visible[class*="very thin"].left.sidebar~.fixed,.ui.visible[class*="very thin"].left.sidebar~.pusher{-webkit-transform:translate3d(60px,0,0);transform:translate3d(60px,0,0)}.ui.visible.wide.left.sidebar~.fixed,.ui.visible.wide.left.sidebar~.pusher{-webkit-transform:translate3d(350px,0,0);transform:translate3d(350px,0,0)}.ui.visible[class*="very wide"].left.sidebar~.fixed,.ui.visible[class*="very wide"].left.sidebar~.pusher{-webkit-transform:translate3d(475px,0,0);transform:translate3d(475px,0,0)}.ui.visible.thin.right.sidebar~.fixed,.ui.visible.thin.right.sidebar~.pusher{-webkit-transform:translate3d(-150px,0,0);transform:translate3d(-150px,0,0)}.ui.visible[class*="very thin"].right.sidebar~.fixed,.ui.visible[class*="very thin"].right.sidebar~.pusher{-webkit-transform:translate3d(-60px,0,0);transform:translate3d(-60px,0,0)}.ui.visible.wide.right.sidebar~.fixed,.ui.visible.wide.right.sidebar~.pusher{-webkit-transform:translate3d(-350px,0,0);transform:translate3d(-350px,0,0)}.ui.visible[class*="very wide"].right.sidebar~.fixed,.ui.visible[class*="very wide"].right.sidebar~.pusher{-webkit-transform:translate3d(-475px,0,0);transform:translate3d(-475px,0,0)}.ui.overlay.sidebar{z-index:102}.ui.left.overlay.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.overlay.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.overlay.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.overlay.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.animating.ui.overlay.sidebar,.ui.visible.overlay.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.left.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.right.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.top.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.bottom.overlay.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.overlay.sidebar~.fixed,.ui.visible.overlay.sidebar~.pusher{-webkit-transform:none!important;transform:none!important}.ui.push.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:102}.ui.left.push.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.push.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.push.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.push.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.ui.visible.push.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.uncover.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:1}.ui.visible.uncover.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.slide.along.sidebar{z-index:1}.ui.left.slide.along.sidebar{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui.right.slide.along.sidebar{-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}.ui.top.slide.along.sidebar{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.ui.bottom.slide.along.sidebar{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.ui.animating.slide.along.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.slide.along.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.slide.out.sidebar{z-index:1}.ui.left.slide.out.sidebar{-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}.ui.right.slide.out.sidebar{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui.top.slide.out.sidebar{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.ui.bottom.slide.out.sidebar{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.ui.animating.slide.out.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.slide.out.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.scale.down.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:102}.ui.left.scale.down.sidebar{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.scale.down.sidebar{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.scale.down.sidebar{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.scale.down.sidebar{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.ui.scale.down.left.sidebar~.pusher{-webkit-transform-origin:75% 50%;transform-origin:75% 50%}.ui.scale.down.right.sidebar~.pusher{-webkit-transform-origin:25% 50%;transform-origin:25% 50%}.ui.scale.down.top.sidebar~.pusher{-webkit-transform-origin:50% 75%;transform-origin:50% 75%}.ui.scale.down.bottom.sidebar~.pusher{-webkit-transform-origin:50% 25%;transform-origin:50% 25%}.ui.animating.scale.down>.visible.ui.sidebar{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.animating.scale.down.sidebar~.pusher,.ui.visible.scale.down.sidebar~.pusher{display:block!important;width:100%;height:100%;overflow:hidden!important}.ui.visible.scale.down.sidebar{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.scale.down.sidebar~.pusher{-webkit-transform:scale(.75);transform:scale(.75)} \ No newline at end of file diff --git a/semantic/components/sidebar.min.js b/semantic/components/sidebar.min.js new file mode 100644 index 0000000..3aa8535 --- /dev/null +++ b/semantic/components/sidebar.min.js @@ -0,0 +1 @@ +!function(D,j,R,z){"use strict";j=void 0!==j&&j.Math==Math?j:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),D.fn.sidebar=function(C){var k,e=D(this),w=D(j),T=D(R),x=D("html"),S=D("head"),A=e.selector||"",F=(new Date).getTime(),O=[],P=C,E="string"==typeof P,H=[].slice.call(arguments,1),M=j.requestAnimationFrame||j.mozRequestAnimationFrame||j.webkitRequestAnimationFrame||j.msRequestAnimationFrame||function(e){setTimeout(e,0)};return e.each(function(){var s,a,e,i,l,c,d=D.isPlainObject(C)?D.extend(!0,{},D.fn.sidebar.settings,C):D.extend({},D.fn.sidebar.settings),n=d.selector,r=d.className,t=d.namespace,o=d.regExp,u=d.error,f="."+t,b="module-"+t,h=D(this),m=D(d.context),g=h.children(n.sidebar),v=(m.children(n.fixed),m.children(n.pusher)),p=this,y=h.data(b);c={initialize:function(){c.debug("Initializing sidebar",C),c.create.id(),l=c.get.transitionEvent(),d.delaySetup?M(c.setup.layout):c.setup.layout(),M(function(){c.setup.cache()}),c.instantiate()},instantiate:function(){c.verbose("Storing instance of module",c),y=c,h.data(b,c)},create:{id:function(){e=(Math.random().toString(16)+"000000000").substr(2,8),a="."+e,c.verbose("Creating unique id for element",e)}},destroy:function(){c.verbose("Destroying previous module for",h),h.off(f).removeData(b),c.is.ios()&&c.remove.ios(),m.off(a),w.off(a),T.off(a)},event:{clickaway:function(e){var i=0=p.scrollHeight&&(p.scrollTop=p.scrollHeight-p.offsetHeight-1)},scroll:function(e){0===D(e.target).closest(n.sidebar).length&&e.preventDefault()}},bind:{clickaway:function(){c.verbose("Adding clickaway events to context",m),d.closable&&m.on("click"+a,c.event.clickaway).on("touchend"+a,c.event.clickaway)},scrollLock:function(){d.scrollLock&&(c.debug("Disabling page scroll"),w.on("DOMMouseScroll"+a,c.event.scroll)),c.verbose("Adding events to contain sidebar scroll"),T.on("touchmove"+a,c.event.touch),h.on("scroll"+f,c.event.containScroll)}},unbind:{clickaway:function(){c.verbose("Removing clickaway events from context",m),m.off(a)},scrollLock:function(){c.verbose("Removing scroll lock from page"),T.off(a),w.off(a),h.off("scroll"+f)}},add:{inlineCSS:function(){var e,i=c.cache.width||h.outerWidth(),n=c.cache.height||h.outerHeight(),t=c.is.rtl(),o=c.get.direction(),r={left:i,right:-i,top:n,bottom:-n};t&&(c.verbose("RTL detected, flipping widths"),r.left=-i,r.right=i),e="").appendTo(S),c.debug("Adding sizing css to head",s)}},refresh:function(){c.verbose("Refreshing selector cache"),m=D(d.context),g=m.children(n.sidebar),v=m.children(n.pusher),m.children(n.fixed),c.clear.cache()},refreshSidebars:function(){c.verbose("Refreshing other sidebars"),g=m.children(n.sidebar)},repaint:function(){c.verbose("Forcing repaint event"),p.style.display="none";p.offsetHeight;p.scrollTop=p.scrollTop,p.style.display=""},setup:{cache:function(){c.cache={width:h.outerWidth(),height:h.outerHeight(),rtl:"rtl"==h.css("direction")}},layout:function(){0===m.children(n.pusher).length&&(c.debug("Adding wrapper element for sidebar"),c.error(u.pusher),v=D('
'),m.children().not(n.omitted).not(g).wrapAll(v),c.refresh()),0!==h.nextAll(n.pusher).length&&h.nextAll(n.pusher)[0]===v[0]||(c.debug("Moved sidebar to correct parent element"),c.error(u.movedSidebar,p),h.detach().prependTo(m),c.refresh()),c.clear.cache(),c.set.pushable(),c.set.direction()}},attachEvents:function(e,i){var n=D(e);i=D.isFunction(c[i])?c[i]:c.toggle,0 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', setting, value); + } + } + } + }); + }, + settings: function(newSettings, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', newSettings, name); + $.extend(true, $.fn[name].settings, newSettings); + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', newSettings); + } + } + } + }); + } + }, + + enable: { + console: function() { + module.console(true); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling debug for modules', modules); + module.change.setting('debug', true, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling verbose debug for modules', modules); + module.change.setting('verbose', true, modules, modifyExisting); + } + }, + disable: { + console: function() { + module.console(false); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling debug for modules', modules); + module.change.setting('debug', false, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling verbose debug for modules', modules); + module.change.setting('verbose', false, modules, modifyExisting); + } + }, + + console: function(enable) { + if(enable) { + if(instance.cache.console === undefined) { + module.error(error.console); + return; + } + module.debug('Restoring console function'); + window.console = instance.cache.console; + } + else { + module.debug('Disabling console function'); + instance.cache.console = window.console; + window.console = { + clear : function(){}, + error : function(){}, + group : function(){}, + groupCollapsed : function(){}, + groupEnd : function(){}, + info : function(){}, + log : function(){}, + markTimeline : function(){}, + warn : function(){} + }; + } + }, + + destroy: function() { + module.verbose('Destroying previous site for', $module); + $module + .removeData(moduleNamespace) + ; + }, + + cache: {}, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.site.settings = { + + name : 'Site', + namespace : 'site', + + error : { + console : 'Console cannot be restored, most likely it was overwritten outside of module', + method : 'The method you called is not defined.' + }, + + debug : false, + verbose : false, + performance : true, + + modules: [ + 'accordion', + 'api', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'form', + 'modal', + 'nag', + 'popup', + 'rating', + 'shape', + 'sidebar', + 'state', + 'sticky', + 'tab', + 'transition', + 'visit', + 'visibility' + ], + + siteNamespace : 'site', + namespaceStub : { + cache : {}, + config : {}, + sections : {}, + section : {}, + utilities : {} + } + +}; + +// allows for selection of elements with data attributes +$.extend($.expr[ ":" ], { + data: ($.expr.createPseudo) + ? $.expr.createPseudo(function(dataName) { + return function(elem) { + return !!$.data(elem, dataName); + }; + }) + : function(elem, i, match) { + // support: jQuery < 1.8 + return !!$.data(elem, match[ 3 ]); + } +}); + + +})( jQuery, window, document ); diff --git a/semantic/components/site.min.css b/semantic/components/site.min.css new file mode 100644 index 0000000..bc2e2ef --- /dev/null +++ b/semantic/components/site.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);body,html{height:100%}html{font-size:14px}body{margin:0;padding:0;overflow-x:hidden;min-width:320px;background:#fff;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4285em;color:rgba(0,0,0,.87);font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;line-height:1.28571429em;margin:calc(2rem - .14285714em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.71428571rem}h3{font-size:1.28571429rem}h4{font-size:1.07142857rem}h5{font-size:1rem}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child{margin-bottom:0}p{margin:0 0 1em;line-height:1.4285em}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#4183c4;text-decoration:none}a:hover{color:#1e70bf;text-decoration:none}::-webkit-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::-moz-selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}::selection{background-color:#cce2ff;color:rgba(0,0,0,.87)}input::-webkit-selection,textarea::-webkit-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::-moz-selection,textarea::-moz-selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}input::selection,textarea::selection{background-color:rgba(100,100,100,.4);color:rgba(0,0,0,.87)}body ::-webkit-scrollbar{-webkit-appearance:none;width:10px;height:10px}body ::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}body ::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:rgba(0,0,0,.25);-webkit-transition:color .2s ease;transition:color .2s ease}body ::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.15)}body ::-webkit-scrollbar-thumb:hover{background:rgba(128,135,139,.8)}body .ui.inverted::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}body .ui.inverted::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}body .ui.inverted::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}body .ui.inverted::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)} \ No newline at end of file diff --git a/semantic/components/site.min.js b/semantic/components/site.min.js new file mode 100644 index 0000000..263af03 --- /dev/null +++ b/semantic/components/site.min.js @@ -0,0 +1 @@ +!function(b,p,v,h){b.site=b.fn.site=function(e){var a,c,i=(new Date).getTime(),t=[],n=e,o="string"==typeof n,l=[].slice.call(arguments,1),u=b.isPlainObject(e)?b.extend(!0,{},b.site.settings,e):b.extend({},b.site.settings),s=u.namespace,m=u.error,r="module-"+s,d=b(v),g=this,f=d.data(r);return a={initialize:function(){a.instantiate()},instantiate:function(){a.verbose("Storing instance of site",a),f=a,d.data(r,a)},normalize:function(){a.fix.console(),a.fix.requestAnimationFrame()},fix:{console:function(){a.debug("Normalizing window.console"),console!==h&&console.log!==h||(a.verbose("Console not available, normalizing events"),a.disable.console()),void 0!==console.group&&void 0!==console.groupEnd&&void 0!==console.groupCollapsed||(a.verbose("Console group not available, normalizing events"),p.console.group=function(){},p.console.groupEnd=function(){},p.console.groupCollapsed=function(){}),void 0===console.markTimeline&&(a.verbose("Mark timeline not available, normalizing events"),p.console.markTimeline=function(){})},consoleClear:function(){a.debug("Disabling programmatic console clearing"),p.console.clear=function(){}},requestAnimationFrame:function(){a.debug("Normalizing requestAnimationFrame"),p.requestAnimationFrame===h&&(a.debug("RequestAnimationFrame not available, normalizing event"),p.requestAnimationFrame=p.requestAnimationFrame||p.mozRequestAnimationFrame||p.webkitRequestAnimationFrame||p.msRequestAnimationFrame||function(e){setTimeout(e,0)})}},moduleExists:function(e){return b.fn[e]!==h&&b.fn[e].settings!==h},enabled:{modules:function(e){var o=[];return e=e||u.modules,b.each(e,function(e,n){a.moduleExists(n)&&o.push(n)}),o}},disabled:{modules:function(e){var o=[];return e=e||u.modules,b.each(e,function(e,n){a.moduleExists(n)||o.push(n)}),o}},change:{setting:function(t,s,e,r){e="string"==typeof e?"all"===e?u.modules:[e]:e||u.modules,r=r===h||r,b.each(e,function(e,n){var o,i=!a.moduleExists(n)||(b.fn[n].settings.namespace||!1);a.moduleExists(n)&&(a.verbose("Changing default setting",t,s,n),b.fn[n].settings[t]=s,r&&i&&0<(o=b(":data(module-"+i+")")).length&&(a.verbose("Modifying existing settings",o),o[n]("setting",t,s)))})},settings:function(i,e,t){e="string"==typeof e?[e]:e||u.modules,t=t===h||t,b.each(e,function(e,n){var o;a.moduleExists(n)&&(a.verbose("Changing default setting",i,n),b.extend(!0,b.fn[n].settings,i),t&&s&&0<(o=b(":data(module-"+s+")")).length&&(a.verbose("Modifying existing settings",o),o[n]("setting",i)))})}},enable:{console:function(){a.console(!0)},debug:function(e,n){e=e||u.modules,a.debug("Enabling debug for modules",e),a.change.setting("debug",!0,e,n)},verbose:function(e,n){e=e||u.modules,a.debug("Enabling verbose debug for modules",e),a.change.setting("verbose",!0,e,n)}},disable:{console:function(){a.console(!1)},debug:function(e,n){e=e||u.modules,a.debug("Disabling debug for modules",e),a.change.setting("debug",!1,e,n)},verbose:function(e,n){e=e||u.modules,a.debug("Disabling verbose debug for modules",e),a.change.setting("verbose",!1,e,n)}},console:function(e){if(e){if(f.cache.console===h)return void a.error(m.console);a.debug("Restoring console function"),p.console=f.cache.console}else a.debug("Disabling console function"),f.cache.console=p.console,p.console={clear:function(){},error:function(){},group:function(){},groupCollapsed:function(){},groupEnd:function(){},info:function(){},log:function(){},markTimeline:function(){},warn:function(){}}},destroy:function(){a.verbose("Destroying previous site for",d),d.removeData(r)},cache:{},setting:function(e,n){if(b.isPlainObject(e))b.extend(!0,u,e);else{if(n===h)return u[e];u[e]=n}},internal:function(e,n){if(b.isPlainObject(e))b.extend(!0,a,e);else{if(n===h)return a[e];a[e]=n}},debug:function(){u.debug&&(u.performance?a.performance.log(arguments):(a.debug=Function.prototype.bind.call(console.info,console,u.name+":"),a.debug.apply(console,arguments)))},verbose:function(){u.verbose&&u.debug&&(u.performance?a.performance.log(arguments):(a.verbose=Function.prototype.bind.call(console.info,console,u.name+":"),a.verbose.apply(console,arguments)))},error:function(){a.error=Function.prototype.bind.call(console.error,console,u.name+":"),a.error.apply(console,arguments)},performance:{log:function(e){var n,o;u.performance&&(o=(n=(new Date).getTime())-(i||n),i=n,t.push({Element:g,Name:e[0],Arguments:[].slice.call(e,1)||"","Execution Time":o})),clearTimeout(a.performance.timer),a.performance.timer=setTimeout(a.performance.display,500)},display:function(){var e=u.name+":",o=0;i=!1,clearTimeout(a.performance.timer),b.each(t,function(e,n){o+=n["Execution Time"]}),e+=" "+o+"ms",(console.group!==h||console.table!==h)&&0 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.state.settings = { + + // module info + name : 'State', + + // debug output + debug : false, + + // verbose debug output + verbose : false, + + // namespace for events + namespace : 'state', + + // debug data includes performance + performance : true, + + // callback occurs on state change + onActivate : function() {}, + onDeactivate : function() {}, + onChange : function() {}, + + // state test functions + activateTest : function() { return true; }, + deactivateTest : function() { return true; }, + + // whether to automatically map default states + automatic : true, + + // activate / deactivate changes all elements instantiated at same time + sync : false, + + // default flash text duration, used for temporarily changing text of an element + flashDuration : 1000, + + // selector filter + filter : { + text : '.loading, .disabled', + active : '.disabled' + }, + + context : false, + + // error + error: { + beforeSend : 'The before send function has cancelled state change', + method : 'The method you called is not defined.' + }, + + // metadata + metadata: { + promise : 'promise', + storedText : 'stored-text' + }, + + // change class on state + className: { + active : 'active', + disabled : 'disabled', + error : 'error', + loading : 'loading', + success : 'success', + warning : 'warning' + }, + + selector: { + // selector for text node + text: false + }, + + defaults : { + input: { + disabled : true, + loading : true, + active : true + }, + button: { + disabled : true, + loading : true, + active : true, + }, + progress: { + active : true, + success : true, + warning : true, + error : true + } + }, + + states : { + active : true, + disabled : true, + error : true, + loading : true, + success : true, + warning : true + }, + + text : { + disabled : false, + flash : false, + hover : false, + active : false, + inactive : false, + activate : false, + deactivate : false + } + +}; + + + +})( jQuery, window, document ); diff --git a/semantic/components/state.min.js b/semantic/components/state.min.js new file mode 100644 index 0000000..d2d4a29 --- /dev/null +++ b/semantic/components/state.min.js @@ -0,0 +1 @@ +!function(e,t,n,a){"use strict";t=void 0!==t&&t.Math==Math?t:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),e.fn.state=function(t){var i,o=e(this),s=o.selector||"",c=(n.documentElement,(new Date).getTime()),r=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1);return o.each(function(){var n,f=e.isPlainObject(t)?e.extend(!0,{},e.fn.state.settings,t):e.extend({},e.fn.state.settings),v=f.error,g=f.metadata,b=f.className,x=f.namespace,h=f.states,m=f.text,p="."+x,T=x+"-module",y=e(this),w=this,C=y.data(T);n={initialize:function(){n.verbose("Initializing module"),f.automatic&&n.add.defaults(),f.context&&""!==s?e(f.context).on(s,"mouseenter"+p,n.change.text).on(s,"mouseleave"+p,n.reset.text).on(s,"click"+p,n.toggle.state):y.on("mouseenter"+p,n.change.text).on("mouseleave"+p,n.reset.text).on("click"+p,n.toggle.state),n.instantiate()},instantiate:function(){n.verbose("Storing instance of module",n),C=n,y.data(T,n)},destroy:function(){n.verbose("Destroying previous module",C),y.off(p).removeData(T)},refresh:function(){n.verbose("Refreshing selector cache"),y=e(w)},add:{defaults:function(){var i=t&&e.isPlainObject(t.states)?t.states:{};e.each(f.defaults,function(t,o){n.is[t]!==a&&n.is[t]()&&(n.verbose("Adding default states",t,w),e.extend(f.states,o,i))})}},is:{active:function(){return y.hasClass(b.active)},loading:function(){return y.hasClass(b.loading)},inactive:function(){return!y.hasClass(b.active)},state:function(e){return b[e]!==a&&y.hasClass(b[e])},enabled:function(){return!y.is(f.filter.active)},disabled:function(){return y.is(f.filter.active)},textEnabled:function(){return!y.is(f.filter.text)},button:function(){return y.is(".button:not(a, .submit)")},input:function(){return y.is("input")},progress:function(){return y.is(".ui.progress")}},allow:function(e){n.debug("Now allowing state",e),h[e]=!0},disallow:function(e){n.debug("No longer allowing",e),h[e]=!1},allows:function(e){return h[e]||!1},enable:function(){y.removeClass(b.disabled)},disable:function(){y.addClass(b.disabled)},setState:function(e){n.allows(e)&&y.addClass(b[e])},removeState:function(e){n.allows(e)&&y.removeClass(b[e])},toggle:{state:function(){var t;if(n.allows("active")&&n.is.enabled()){if(n.refresh(),e.fn.api!==a)if(t=y.api("get request"),y.api("was cancelled"))n.debug("API Request cancelled by beforesend"),f.activateTest=function(){return!1},f.deactivateTest=function(){return!1};else if(t)return void n.listenTo(t);n.change.state()}}},listenTo:function(t){n.debug("API request detected, waiting for state signal",t),t&&(m.loading&&n.update.text(m.loading),e.when(t).then(function(){"resolved"==t.state()?(n.debug("API request succeeded"),f.activateTest=function(){return!0},f.deactivateTest=function(){return!0}):(n.debug("API request failed"),f.activateTest=function(){return!1},f.deactivateTest=function(){return!1}),n.change.state()}))},change:{state:function(){n.debug("Determining state change direction"),n.is.inactive()?n.activate():n.deactivate(),f.sync&&n.sync(),f.onChange.call(w)},text:function(){n.is.textEnabled()&&(n.is.disabled()?(n.verbose("Changing text to disabled text",m.hover),n.update.text(m.disabled)):n.is.active()?m.hover?(n.verbose("Changing text to hover text",m.hover),n.update.text(m.hover)):m.deactivate&&(n.verbose("Changing text to deactivating text",m.deactivate),n.update.text(m.deactivate)):m.hover?(n.verbose("Changing text to hover text",m.hover),n.update.text(m.hover)):m.activate&&(n.verbose("Changing text to activating text",m.activate),n.update.text(m.activate)))}},activate:function(){f.activateTest.call(w)&&(n.debug("Setting state to active"),y.addClass(b.active),n.update.text(m.active),f.onActivate.call(w))},deactivate:function(){f.deactivateTest.call(w)&&(n.debug("Setting state to inactive"),y.removeClass(b.active),n.update.text(m.inactive),f.onDeactivate.call(w))},sync:function(){n.verbose("Syncing other buttons to current state"),n.is.active()?o.not(y).state("activate"):o.not(y).state("deactivate")},get:{text:function(){return f.selector.text?y.find(f.selector.text).text():y.html()},textFor:function(e){return m[e]||!1}},flash:{text:function(e,t,a){var i=n.get.text();n.debug("Flashing text message",e,t),e=e||f.text.flash,t=t||f.flashDuration,a=a||function(){},n.update.text(e),setTimeout(function(){n.update.text(i),a.call(w)},t)}},reset:{text:function(){var e=m.active||y.data(g.storedText),t=m.inactive||y.data(g.storedText);n.is.textEnabled()&&(n.is.active()&&e?(n.verbose("Resetting active text",e),n.update.text(e)):t&&(n.verbose("Resetting inactive text",e),n.update.text(t)))}},update:{text:function(e){var t=n.get.text();e&&e!==t?(n.debug("Updating text",e),f.selector.text?y.data(g.storedText,e).find(f.selector.text).text(e):y.data(g.storedText,e).html(e)):n.debug("Text is already set, ignoring update",e)}},setting:function(t,i){if(n.debug("Changing setting",t,i),e.isPlainObject(t))e.extend(!0,f,t);else{if(i===a)return f[t];e.isPlainObject(f[t])?e.extend(!0,f[t],i):f[t]=i}},internal:function(t,i){if(e.isPlainObject(t))e.extend(!0,n,t);else{if(i===a)return n[t];n[t]=i}},debug:function(){!f.silent&&f.debug&&(f.performance?n.performance.log(arguments):(n.debug=Function.prototype.bind.call(console.info,console,f.name+":"),n.debug.apply(console,arguments)))},verbose:function(){!f.silent&&f.verbose&&f.debug&&(f.performance?n.performance.log(arguments):(n.verbose=Function.prototype.bind.call(console.info,console,f.name+":"),n.verbose.apply(console,arguments)))},error:function(){f.silent||(n.error=Function.prototype.bind.call(console.error,console,f.name+":"),n.error.apply(console,arguments))},performance:{log:function(e){var t,a;f.performance&&(a=(t=(new Date).getTime())-(c||t),c=t,r.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:w,"Execution Time":a})),clearTimeout(n.performance.timer),n.performance.timer=setTimeout(n.performance.display,500)},display:function(){var t=f.name+":",i=0;c=!1,clearTimeout(n.performance.timer),e.each(r,function(e,t){i+=t["Execution Time"]}),t+=" "+i+"ms",s&&(t+=" '"+s+"'"),(console.group!==a||console.table!==a)&&r.length>0&&(console.groupCollapsed(t),console.table?console.table(r):e.each(r,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),r=[]}},invoke:function(t,o,s){var c,r,l,u=C;return o=o||d,s=w||s,"string"==typeof t&&u!==a&&(t=t.split(/[\. ]/),c=t.length-1,e.each(t,function(i,o){var s=i!=c?o+t[i+1].charAt(0).toUpperCase()+t[i+1].slice(1):t;if(e.isPlainObject(u[s])&&i!=c)u=u[s];else{if(u[s]!==a)return r=u[s],!1;if(!e.isPlainObject(u[o])||i==c)return u[o]!==a?(r=u[o],!1):(n.error(v.method,t),!1);u=u[o]}})),e.isFunction(r)?l=r.apply(s,o):r!==a&&(l=r),e.isArray(i)?i.push(l):i!==a?i=[i,l]:l!==a&&(i=l),r}},u?(C===a&&n.initialize(),n.invoke(l)):(C!==a&&C.invoke("destroy"),n.initialize())}),i!==a?i:this},e.fn.state.settings={name:"State",debug:!1,verbose:!1,namespace:"state",performance:!0,onActivate:function(){},onDeactivate:function(){},onChange:function(){},activateTest:function(){return!0},deactivateTest:function(){return!0},automatic:!0,sync:!1,flashDuration:1e3,filter:{text:".loading, .disabled",active:".disabled"},context:!1,error:{beforeSend:"The before send function has cancelled state change",method:"The method you called is not defined."},metadata:{promise:"promise",storedText:"stored-text"},className:{active:"active",disabled:"disabled",error:"error",loading:"loading",success:"success",warning:"warning"},selector:{text:!1},defaults:{input:{disabled:!0,loading:!0,active:!0},button:{disabled:!0,loading:!0,active:!0},progress:{active:!0,success:!0,warning:!0,error:!0}},states:{active:!0,disabled:!0,error:!0,loading:!0,success:!0,warning:!0},text:{disabled:!1,flash:!1,hover:!1,active:!1,inactive:!1,activate:!1,deactivate:!1}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/statistic.css b/semantic/components/statistic.css new file mode 100644 index 0000000..fb2bb59 --- /dev/null +++ b/semantic/components/statistic.css @@ -0,0 +1,566 @@ +/*! + * # Semantic UI 2.4.1 - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Statistic +*******************************/ + + +/* Standalone */ +.ui.statistic { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 1em 0em; + max-width: auto; +} +.ui.statistic + .ui.statistic { + margin: 0em 0em 0em 1.5em; +} +.ui.statistic:first-child { + margin-top: 0em; +} +.ui.statistic:last-child { + margin-bottom: 0em; +} + + +/******************************* + Group +*******************************/ + + +/* Grouped */ +.ui.statistics { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ui.statistics > .statistic { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em 1.5em 1em; + max-width: auto; +} +.ui.statistics { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 1em -1.5em -1em; +} + +/* Clearing */ +.ui.statistics:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.statistics:first-child { + margin-top: 0em; +} + + +/******************************* + Content +*******************************/ + + +/*-------------- + Value +---------------*/ + +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 4rem; + font-weight: normal; + line-height: 1em; + color: #1B1C1D; + text-transform: uppercase; + text-align: center; +} + +/*-------------- + Label +---------------*/ + +.ui.statistics .statistic > .label, +.ui.statistic > .label { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); + text-transform: uppercase; + text-align: center; +} + +/* Top Label */ +.ui.statistics .statistic > .label ~ .value, +.ui.statistic > .label ~ .value { + margin-top: 0rem; +} + +/* Bottom Label */ +.ui.statistics .statistic > .value ~ .label, +.ui.statistic > .value ~ .label { + margin-top: 0rem; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Icon Value +---------------*/ + +.ui.statistics .statistic > .value .icon, +.ui.statistic > .value .icon { + opacity: 1; + width: auto; + margin: 0em; +} + +/*-------------- + Text Value +---------------*/ + +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + line-height: 1em; + min-height: 2em; + font-weight: bold; + text-align: center; +} +.ui.statistics .statistic > .text.value + .label, +.ui.statistic > .text.value + .label { + text-align: center; +} + +/*-------------- + Image Value +---------------*/ + +.ui.statistics .statistic > .value img, +.ui.statistic > .value img { + max-height: 3rem; + vertical-align: baseline; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Count +---------------*/ + +.ui.ten.statistics { + margin: 0em 0em -1em; +} +.ui.ten.statistics .statistic { + min-width: 10%; + margin: 0em 0em 1em; +} +.ui.nine.statistics { + margin: 0em 0em -1em; +} +.ui.nine.statistics .statistic { + min-width: 11.11111111%; + margin: 0em 0em 1em; +} +.ui.eight.statistics { + margin: 0em 0em -1em; +} +.ui.eight.statistics .statistic { + min-width: 12.5%; + margin: 0em 0em 1em; +} +.ui.seven.statistics { + margin: 0em 0em -1em; +} +.ui.seven.statistics .statistic { + min-width: 14.28571429%; + margin: 0em 0em 1em; +} +.ui.six.statistics { + margin: 0em 0em -1em; +} +.ui.six.statistics .statistic { + min-width: 16.66666667%; + margin: 0em 0em 1em; +} +.ui.five.statistics { + margin: 0em 0em -1em; +} +.ui.five.statistics .statistic { + min-width: 20%; + margin: 0em 0em 1em; +} +.ui.four.statistics { + margin: 0em 0em -1em; +} +.ui.four.statistics .statistic { + min-width: 25%; + margin: 0em 0em 1em; +} +.ui.three.statistics { + margin: 0em 0em -1em; +} +.ui.three.statistics .statistic { + min-width: 33.33333333%; + margin: 0em 0em 1em; +} +.ui.two.statistics { + margin: 0em 0em -1em; +} +.ui.two.statistics .statistic { + min-width: 50%; + margin: 0em 0em 1em; +} +.ui.one.statistics { + margin: 0em 0em -1em; +} +.ui.one.statistics .statistic { + min-width: 100%; + margin: 0em 0em 1em; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.ui.horizontal.statistics { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em; + max-width: none; +} +.ui.horizontal.statistics .statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + max-width: none; + margin: 1em 0em; +} +.ui.horizontal.statistic > .text.value, +.ui.horizontal.statistics > .statistic > .text.value { + min-height: 0em !important; +} +.ui.horizontal.statistics .statistic > .value .icon, +.ui.horizontal.statistic > .value .icon { + width: 1.18em; +} +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + display: inline-block; + vertical-align: middle; +} +.ui.horizontal.statistics .statistic > .label, +.ui.horizontal.statistic > .label { + display: inline-block; + vertical-align: middle; + margin: 0em 0em 0em 0.75em; +} + +/*-------------- + Colors +---------------*/ + +.ui.red.statistics .statistic > .value, +.ui.statistics .red.statistic > .value, +.ui.red.statistic > .value { + color: #DB2828; +} +.ui.orange.statistics .statistic > .value, +.ui.statistics .orange.statistic > .value, +.ui.orange.statistic > .value { + color: #F2711C; +} +.ui.yellow.statistics .statistic > .value, +.ui.statistics .yellow.statistic > .value, +.ui.yellow.statistic > .value { + color: #FBBD08; +} +.ui.olive.statistics .statistic > .value, +.ui.statistics .olive.statistic > .value, +.ui.olive.statistic > .value { + color: #B5CC18; +} +.ui.green.statistics .statistic > .value, +.ui.statistics .green.statistic > .value, +.ui.green.statistic > .value { + color: #21BA45; +} +.ui.teal.statistics .statistic > .value, +.ui.statistics .teal.statistic > .value, +.ui.teal.statistic > .value { + color: #00B5AD; +} +.ui.blue.statistics .statistic > .value, +.ui.statistics .blue.statistic > .value, +.ui.blue.statistic > .value { + color: #2185D0; +} +.ui.violet.statistics .statistic > .value, +.ui.statistics .violet.statistic > .value, +.ui.violet.statistic > .value { + color: #6435C9; +} +.ui.purple.statistics .statistic > .value, +.ui.statistics .purple.statistic > .value, +.ui.purple.statistic > .value { + color: #A333C8; +} +.ui.pink.statistics .statistic > .value, +.ui.statistics .pink.statistic > .value, +.ui.pink.statistic > .value { + color: #E03997; +} +.ui.brown.statistics .statistic > .value, +.ui.statistics .brown.statistic > .value, +.ui.brown.statistic > .value { + color: #A5673F; +} +.ui.grey.statistics .statistic > .value, +.ui.statistics .grey.statistic > .value, +.ui.grey.statistic > .value { + color: #767676; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.statistics .statistic > .value, +.ui.inverted.statistic .value { + color: #FFFFFF; +} +.ui.inverted.statistics .statistic > .label, +.ui.inverted.statistic .label { + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.red.statistics .statistic > .value, +.ui.statistics .inverted.red.statistic > .value, +.ui.inverted.red.statistic > .value { + color: #FF695E; +} +.ui.inverted.orange.statistics .statistic > .value, +.ui.statistics .inverted.orange.statistic > .value, +.ui.inverted.orange.statistic > .value { + color: #FF851B; +} +.ui.inverted.yellow.statistics .statistic > .value, +.ui.statistics .inverted.yellow.statistic > .value, +.ui.inverted.yellow.statistic > .value { + color: #FFE21F; +} +.ui.inverted.olive.statistics .statistic > .value, +.ui.statistics .inverted.olive.statistic > .value, +.ui.inverted.olive.statistic > .value { + color: #D9E778; +} +.ui.inverted.green.statistics .statistic > .value, +.ui.statistics .inverted.green.statistic > .value, +.ui.inverted.green.statistic > .value { + color: #2ECC40; +} +.ui.inverted.teal.statistics .statistic > .value, +.ui.statistics .inverted.teal.statistic > .value, +.ui.inverted.teal.statistic > .value { + color: #6DFFFF; +} +.ui.inverted.blue.statistics .statistic > .value, +.ui.statistics .inverted.blue.statistic > .value, +.ui.inverted.blue.statistic > .value { + color: #54C8FF; +} +.ui.inverted.violet.statistics .statistic > .value, +.ui.statistics .inverted.violet.statistic > .value, +.ui.inverted.violet.statistic > .value { + color: #A291FB; +} +.ui.inverted.purple.statistics .statistic > .value, +.ui.statistics .inverted.purple.statistic > .value, +.ui.inverted.purple.statistic > .value { + color: #DC73FF; +} +.ui.inverted.pink.statistics .statistic > .value, +.ui.statistics .inverted.pink.statistic > .value, +.ui.inverted.pink.statistic > .value { + color: #FF8EDF; +} +.ui.inverted.brown.statistics .statistic > .value, +.ui.statistics .inverted.brown.statistic > .value, +.ui.inverted.brown.statistic > .value { + color: #D67C1C; +} +.ui.inverted.grey.statistics .statistic > .value, +.ui.statistics .inverted.grey.statistic > .value, +.ui.inverted.grey.statistic > .value { + color: #DCDDDE; +} + +/*-------------- + Floated +---------------*/ + +.ui[class*="left floated"].statistic { + float: left; + margin: 0em 2em 1em 0em; +} +.ui[class*="right floated"].statistic { + float: right; + margin: 0em 0em 1em 2em; +} +.ui.floated.statistic:last-child { + margin-bottom: 0em; +} + +/*-------------- + Sizes +---------------*/ + + +/* Mini */ +.ui.mini.statistics .statistic > .value, +.ui.mini.statistic > .value { + font-size: 1.5rem !important; +} +.ui.mini.horizontal.statistics .statistic > .value, +.ui.mini.horizontal.statistic > .value { + font-size: 1.5rem !important; +} +.ui.mini.statistics .statistic > .text.value, +.ui.mini.statistic > .text.value { + font-size: 1rem !important; +} + +/* Tiny */ +.ui.tiny.statistics .statistic > .value, +.ui.tiny.statistic > .value { + font-size: 2rem !important; +} +.ui.tiny.horizontal.statistics .statistic > .value, +.ui.tiny.horizontal.statistic > .value { + font-size: 2rem !important; +} +.ui.tiny.statistics .statistic > .text.value, +.ui.tiny.statistic > .text.value { + font-size: 1rem !important; +} + +/* Small */ +.ui.small.statistics .statistic > .value, +.ui.small.statistic > .value { + font-size: 3rem !important; +} +.ui.small.horizontal.statistics .statistic > .value, +.ui.small.horizontal.statistic > .value { + font-size: 2rem !important; +} +.ui.small.statistics .statistic > .text.value, +.ui.small.statistic > .text.value { + font-size: 1rem !important; +} + +/* Medium */ +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-size: 4rem !important; +} +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + font-size: 3rem !important; +} +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + font-size: 2rem !important; +} + +/* Large */ +.ui.large.statistics .statistic > .value, +.ui.large.statistic > .value { + font-size: 5rem !important; +} +.ui.large.horizontal.statistics .statistic > .value, +.ui.large.horizontal.statistic > .value { + font-size: 4rem !important; +} +.ui.large.statistics .statistic > .text.value, +.ui.large.statistic > .text.value { + font-size: 2.5rem !important; +} + +/* Huge */ +.ui.huge.statistics .statistic > .value, +.ui.huge.statistic > .value { + font-size: 6rem !important; +} +.ui.huge.horizontal.statistics .statistic > .value, +.ui.huge.horizontal.statistic > .value { + font-size: 5rem !important; +} +.ui.huge.statistics .statistic > .text.value, +.ui.huge.statistic > .text.value { + font-size: 2.5rem !important; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/statistic.min.css b/semantic/components/statistic.min.css new file mode 100644 index 0000000..57c16f4 --- /dev/null +++ b/semantic/components/statistic.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:1em 0;max-width:auto}.ui.statistic+.ui.statistic{margin:0 0 0 1.5em}.ui.statistic:first-child{margin-top:0}.ui.statistic:last-child{margin-bottom:0}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.statistics>.statistic{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 1.5em 1em;max-width:auto}.ui.statistics{display:-webkit-box;display:-ms-flexbox;display:flex;margin:1em -1.5em -1em}.ui.statistics:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.statistics:first-child{margin-top:0}.ui.statistic>.value,.ui.statistics .statistic>.value{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:4rem;font-weight:400;line-height:1em;color:#1b1c1d;text-transform:uppercase;text-align:center}.ui.statistic>.label,.ui.statistics .statistic>.label{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;font-weight:700;color:rgba(0,0,0,.87);text-transform:uppercase;text-align:center}.ui.statistic>.label~.value,.ui.statistics .statistic>.label~.value{margin-top:0}.ui.statistic>.value~.label,.ui.statistics .statistic>.value~.label{margin-top:0}.ui.statistic>.value .icon,.ui.statistics .statistic>.value .icon{opacity:1;width:auto;margin:0}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{line-height:1em;min-height:2em;font-weight:700;text-align:center}.ui.statistic>.text.value+.label,.ui.statistics .statistic>.text.value+.label{text-align:center}.ui.statistic>.value img,.ui.statistics .statistic>.value img{max-height:3rem;vertical-align:baseline}.ui.ten.statistics{margin:0 0 -1em}.ui.ten.statistics .statistic{min-width:10%;margin:0 0 1em}.ui.nine.statistics{margin:0 0 -1em}.ui.nine.statistics .statistic{min-width:11.11111111%;margin:0 0 1em}.ui.eight.statistics{margin:0 0 -1em}.ui.eight.statistics .statistic{min-width:12.5%;margin:0 0 1em}.ui.seven.statistics{margin:0 0 -1em}.ui.seven.statistics .statistic{min-width:14.28571429%;margin:0 0 1em}.ui.six.statistics{margin:0 0 -1em}.ui.six.statistics .statistic{min-width:16.66666667%;margin:0 0 1em}.ui.five.statistics{margin:0 0 -1em}.ui.five.statistics .statistic{min-width:20%;margin:0 0 1em}.ui.four.statistics{margin:0 0 -1em}.ui.four.statistics .statistic{min-width:25%;margin:0 0 1em}.ui.three.statistics{margin:0 0 -1em}.ui.three.statistics .statistic{min-width:33.33333333%;margin:0 0 1em}.ui.two.statistics{margin:0 0 -1em}.ui.two.statistics .statistic{min-width:50%;margin:0 0 1em}.ui.one.statistics{margin:0 0 -1em}.ui.one.statistics .statistic{min-width:100%;margin:0 0 1em}.ui.horizontal.statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ui.horizontal.statistics{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;max-width:none}.ui.horizontal.statistics .statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:none;margin:1em 0}.ui.horizontal.statistic>.text.value,.ui.horizontal.statistics>.statistic>.text.value{min-height:0!important}.ui.horizontal.statistic>.value .icon,.ui.horizontal.statistics .statistic>.value .icon{width:1.18em}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{display:inline-block;vertical-align:middle}.ui.horizontal.statistic>.label,.ui.horizontal.statistics .statistic>.label{display:inline-block;vertical-align:middle;margin:0 0 0 .75em}.ui.red.statistic>.value,.ui.red.statistics .statistic>.value,.ui.statistics .red.statistic>.value{color:#db2828}.ui.orange.statistic>.value,.ui.orange.statistics .statistic>.value,.ui.statistics .orange.statistic>.value{color:#f2711c}.ui.statistics .yellow.statistic>.value,.ui.yellow.statistic>.value,.ui.yellow.statistics .statistic>.value{color:#fbbd08}.ui.olive.statistic>.value,.ui.olive.statistics .statistic>.value,.ui.statistics .olive.statistic>.value{color:#b5cc18}.ui.green.statistic>.value,.ui.green.statistics .statistic>.value,.ui.statistics .green.statistic>.value{color:#21ba45}.ui.statistics .teal.statistic>.value,.ui.teal.statistic>.value,.ui.teal.statistics .statistic>.value{color:#00b5ad}.ui.blue.statistic>.value,.ui.blue.statistics .statistic>.value,.ui.statistics .blue.statistic>.value{color:#2185d0}.ui.statistics .violet.statistic>.value,.ui.violet.statistic>.value,.ui.violet.statistics .statistic>.value{color:#6435c9}.ui.purple.statistic>.value,.ui.purple.statistics .statistic>.value,.ui.statistics .purple.statistic>.value{color:#a333c8}.ui.pink.statistic>.value,.ui.pink.statistics .statistic>.value,.ui.statistics .pink.statistic>.value{color:#e03997}.ui.brown.statistic>.value,.ui.brown.statistics .statistic>.value,.ui.statistics .brown.statistic>.value{color:#a5673f}.ui.grey.statistic>.value,.ui.grey.statistics .statistic>.value,.ui.statistics .grey.statistic>.value{color:#767676}.ui.inverted.statistic .value,.ui.inverted.statistics .statistic>.value{color:#fff}.ui.inverted.statistic .label,.ui.inverted.statistics .statistic>.label{color:rgba(255,255,255,.9)}.ui.inverted.red.statistic>.value,.ui.inverted.red.statistics .statistic>.value,.ui.statistics .inverted.red.statistic>.value{color:#ff695e}.ui.inverted.orange.statistic>.value,.ui.inverted.orange.statistics .statistic>.value,.ui.statistics .inverted.orange.statistic>.value{color:#ff851b}.ui.inverted.yellow.statistic>.value,.ui.inverted.yellow.statistics .statistic>.value,.ui.statistics .inverted.yellow.statistic>.value{color:#ffe21f}.ui.inverted.olive.statistic>.value,.ui.inverted.olive.statistics .statistic>.value,.ui.statistics .inverted.olive.statistic>.value{color:#d9e778}.ui.inverted.green.statistic>.value,.ui.inverted.green.statistics .statistic>.value,.ui.statistics .inverted.green.statistic>.value{color:#2ecc40}.ui.inverted.teal.statistic>.value,.ui.inverted.teal.statistics .statistic>.value,.ui.statistics .inverted.teal.statistic>.value{color:#6dffff}.ui.inverted.blue.statistic>.value,.ui.inverted.blue.statistics .statistic>.value,.ui.statistics .inverted.blue.statistic>.value{color:#54c8ff}.ui.inverted.violet.statistic>.value,.ui.inverted.violet.statistics .statistic>.value,.ui.statistics .inverted.violet.statistic>.value{color:#a291fb}.ui.inverted.purple.statistic>.value,.ui.inverted.purple.statistics .statistic>.value,.ui.statistics .inverted.purple.statistic>.value{color:#dc73ff}.ui.inverted.pink.statistic>.value,.ui.inverted.pink.statistics .statistic>.value,.ui.statistics .inverted.pink.statistic>.value{color:#ff8edf}.ui.inverted.brown.statistic>.value,.ui.inverted.brown.statistics .statistic>.value,.ui.statistics .inverted.brown.statistic>.value{color:#d67c1c}.ui.inverted.grey.statistic>.value,.ui.inverted.grey.statistics .statistic>.value,.ui.statistics .inverted.grey.statistic>.value{color:#dcddde}.ui[class*="left floated"].statistic{float:left;margin:0 2em 1em 0}.ui[class*="right floated"].statistic{float:right;margin:0 0 1em 2em}.ui.floated.statistic:last-child{margin-bottom:0}.ui.mini.statistic>.value,.ui.mini.statistics .statistic>.value{font-size:1.5rem!important}.ui.mini.horizontal.statistic>.value,.ui.mini.horizontal.statistics .statistic>.value{font-size:1.5rem!important}.ui.mini.statistic>.text.value,.ui.mini.statistics .statistic>.text.value{font-size:1rem!important}.ui.tiny.statistic>.value,.ui.tiny.statistics .statistic>.value{font-size:2rem!important}.ui.tiny.horizontal.statistic>.value,.ui.tiny.horizontal.statistics .statistic>.value{font-size:2rem!important}.ui.tiny.statistic>.text.value,.ui.tiny.statistics .statistic>.text.value{font-size:1rem!important}.ui.small.statistic>.value,.ui.small.statistics .statistic>.value{font-size:3rem!important}.ui.small.horizontal.statistic>.value,.ui.small.horizontal.statistics .statistic>.value{font-size:2rem!important}.ui.small.statistic>.text.value,.ui.small.statistics .statistic>.text.value{font-size:1rem!important}.ui.statistic>.value,.ui.statistics .statistic>.value{font-size:4rem!important}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{font-size:3rem!important}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{font-size:2rem!important}.ui.large.statistic>.value,.ui.large.statistics .statistic>.value{font-size:5rem!important}.ui.large.horizontal.statistic>.value,.ui.large.horizontal.statistics .statistic>.value{font-size:4rem!important}.ui.large.statistic>.text.value,.ui.large.statistics .statistic>.text.value{font-size:2.5rem!important}.ui.huge.statistic>.value,.ui.huge.statistics .statistic>.value{font-size:6rem!important}.ui.huge.horizontal.statistic>.value,.ui.huge.horizontal.statistics .statistic>.value{font-size:5rem!important}.ui.huge.statistic>.text.value,.ui.huge.statistics .statistic>.text.value{font-size:2.5rem!important} \ No newline at end of file diff --git a/semantic/components/step.css b/semantic/components/step.css new file mode 100644 index 0000000..a720b4d --- /dev/null +++ b/semantic/components/step.css @@ -0,0 +1,626 @@ +/*! + * # Semantic UI 2.4.1 - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 1em 0em; + background: ''; + -webkit-box-shadow: none; + box-shadow: none; + line-height: 1.14285714em; + border-radius: 0.28571429rem; + border: 1px solid rgba(34, 36, 38, 0.15); +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0em; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0em; +} + + +/******************************* + Singular +*******************************/ + +.ui.steps .step { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + vertical-align: middle; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0em 0em; + padding: 1.14285714em 2em; + background: #FFFFFF; + color: rgba(0, 0, 0, 0.87); + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0em; + border: none; + border-right: 1px solid rgba(34, 36, 38, 0.15); + -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease; +} + +/* Arrow */ +.ui.steps .step:after { + display: none; + position: absolute; + z-index: 2; + content: ''; + top: 50%; + right: 0%; + border: medium none; + background-color: #FFFFFF; + width: 1.14285714em; + height: 1.14285714em; + border-style: solid; + border-color: rgba(34, 36, 38, 0.15); + border-width: 0px 1px 1px 0px; + -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease; + -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg); + transform: translateY(-50%) translateX(50%) rotate(-45deg); +} + +/* First Step */ +.ui.steps .step:first-child { + padding-left: 2em; + border-radius: 0.28571429rem 0em 0em 0.28571429rem; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0em 0.28571429rem 0.28571429rem 0em; +} +.ui.steps .step:last-child { + border-right: none; + margin-right: 0em; +} + +/* Only Step */ +.ui.steps .step:only-child { + border-radius: 0.28571429rem; +} + + +/******************************* + Content +*******************************/ + + +/* Title */ +.ui.steps .step .title { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.14285714em; + font-weight: bold; +} +.ui.steps .step > .title { + width: 100%; +} + +/* Description */ +.ui.steps .step .description { + font-weight: normal; + font-size: 0.92857143em; + color: rgba(0, 0, 0, 0.87); +} +.ui.steps .step > .description { + width: 100%; +} +.ui.steps .step .title ~ .description { + margin-top: 0.25em; +} + +/* Icon */ +.ui.steps .step > .icon { + line-height: 1; + font-size: 2.5em; + margin: 0em 1rem 0em 0em; +} +.ui.steps .step > .icon, +.ui.steps .step > .icon ~ .content { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -ms-flex-item-align: middle; + align-self: middle; +} +.ui.steps .step > .icon ~ .content { + -webkit-box-flex: 1 0 auto; + -ms-flex-positive: 1 0 auto; + flex-grow: 1 0 auto; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > .icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Ordered +---------------*/ + +.ui.ordered.steps { + counter-reset: ordered; +} +.ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counters(ordered, "."); + -ms-flex-item-align: middle; + align-self: middle; + margin-right: 1rem; + font-size: 2.5em; + counter-increment: ordered; + font-family: inherit; + font-weight: bold; +} +.ui.ordered.steps .step > * { + display: block; + -ms-flex-item-align: middle; + align-self: middle; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + border-radius: 0em; + padding: 1.14285714em 2em; + border-right: none; + border-bottom: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.vertical.steps .step:first-child { + padding: 1.14285714em 2em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.vertical.steps .step:only-child { + border-radius: 0.28571429rem; +} + +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .step:after { + top: 50%; + right: 0%; + border-width: 0px 1px 1px 0px; +} +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .active.step:after { + display: block; +} +.ui.vertical.steps .step:last-child:after { + display: none; +} +.ui.vertical.steps .active.step:last-child:after { + display: block; +} + +/*--------------- + Responsive +----------------*/ + + +/* Mobile (Default) */ +@media only screen and (max-width: 767px) { + .ui.steps:not(.unstackable) { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .ui.steps:not(.unstackable) .step { + width: 100% !important; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0em; + padding: 1.14285714em 2em; + } + .ui.steps:not(.unstackable) .step:first-child { + padding: 1.14285714em 2em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + } + .ui.steps:not(.unstackable) .step:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + } + +/* Arrow */ + .ui.steps:not(.unstackable) .step:after { + display: none !important; + } + +/* Content */ + .ui.steps:not(.unstackable) .step .content { + text-align: center; + } + +/* Icon */ + .ui.steps:not(.unstackable) .step > .icon, + .ui.ordered.steps:not(.unstackable) .step:before { + margin: 0em 0em 1rem 0em; + } +} + + +/******************************* + States +*******************************/ + + +/* Link Hover */ +.ui.steps .link.step:hover::after, +.ui.steps .link.step:hover, +.ui.steps a.step:hover::after, +.ui.steps a.step:hover { + background: #F9FAFB; + color: rgba(0, 0, 0, 0.8); +} + +/* Link Down */ +.ui.steps .link.step:active::after, +.ui.steps .link.step:active, +.ui.steps a.step:active::after, +.ui.steps a.step:active { + background: #F3F4F5; + color: rgba(0, 0, 0, 0.9); +} + +/* Active */ +.ui.steps .step.active { + cursor: auto; + background: #F3F4F5; +} +.ui.steps .step.active:after { + background: #F3F4F5; +} +.ui.steps .step.active .title { + color: #4183C4; +} +.ui.ordered.steps .step.active:before, +.ui.steps .active.step .icon { + color: rgba(0, 0, 0, 0.85); +} + +/* Active Arrow */ +.ui.steps .step:after { + display: block; +} +.ui.steps .active.step:after { + display: block; +} +.ui.steps .step:last-child:after { + display: none; +} +.ui.steps .active.step:last-child:after { + display: none; +} + +/* Active Hover */ +.ui.steps .link.active.step:hover::after, +.ui.steps .link.active.step:hover, +.ui.steps a.active.step:hover::after, +.ui.steps a.active.step:hover { + cursor: pointer; + background: #DCDDDE; + color: rgba(0, 0, 0, 0.87); +} + +/* Completed */ +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: #21BA45; +} + +/* Disabled */ +.ui.steps .disabled.step { + cursor: auto; + background: #FFFFFF; + pointer-events: none; +} +.ui.steps .disabled.step, +.ui.steps .disabled.step .title, +.ui.steps .disabled.step .description { + color: rgba(40, 40, 40, 0.3); +} +.ui.steps .disabled.step:after { + background: #FFFFFF; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + + +/* Tablet Or Below */ +@media only screen and (max-width: 991px) { + .ui[class*="tablet stackable"].steps { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + +/* Steps */ + .ui[class*="tablet stackable"].steps .step { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0em; + padding: 1.14285714em 2em; + } + .ui[class*="tablet stackable"].steps .step:first-child { + padding: 1.14285714em 2em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + } + .ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + } + +/* Arrow */ + .ui[class*="tablet stackable"].steps .step:after { + display: none !important; + } + +/* Content */ + .ui[class*="tablet stackable"].steps .step .content { + text-align: center; + } + +/* Icon */ + .ui[class*="tablet stackable"].steps .step > .icon, + .ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0em 0em 1rem 0em; + } +} + +/*-------------- + Fluid +---------------*/ + + +/* Fluid */ +.ui.fluid.steps { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + + +/* Top */ +.ui.attached.steps { + width: calc(100% + (--1px * 2)) !important; + margin: 0em -1px 0; + max-width: calc(100% + (--1px * 2)); + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.attached.steps .step:first-child { + border-radius: 0.28571429rem 0em 0em 0em; +} +.ui.attached.steps .step:last-child { + border-radius: 0em 0.28571429rem 0em 0em; +} + +/* Bottom */ +.ui.bottom.attached.steps { + margin: 0 -1px 0em; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui.bottom.attached.steps .step:first-child { + border-radius: 0em 0em 0em 0.28571429rem; +} +.ui.bottom.attached.steps .step:last-child { + border-radius: 0em 0em 0.28571429rem 0em; +} + +/*------------------- + Evenly Divided +--------------------*/ + +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + width: 100%; +} +.ui.one.steps > .step, +.ui.two.steps > .step, +.ui.three.steps > .step, +.ui.four.steps > .step, +.ui.five.steps > .step, +.ui.six.steps > .step, +.ui.seven.steps > .step, +.ui.eight.steps > .step { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.5%; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.steps .step, +.ui.mini.step { + font-size: 0.78571429rem; +} +.ui.tiny.steps .step, +.ui.tiny.step { + font-size: 0.85714286rem; +} +.ui.small.steps .step, +.ui.small.step { + font-size: 0.92857143rem; +} +.ui.steps .step, +.ui.step { + font-size: 1rem; +} +.ui.large.steps .step, +.ui.large.step { + font-size: 1.14285714rem; +} +.ui.big.steps .step, +.ui.big.step { + font-size: 1.28571429rem; +} +.ui.huge.steps .step, +.ui.huge.step { + font-size: 1.42857143rem; +} +.ui.massive.steps .step, +.ui.massive.step { + font-size: 1.71428571rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: url(data:application/x-font-ttf;charset=utf-8;;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); +} +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + font-family: 'Step'; + content: '\e800'; + +/* 'î €' */ +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/step.min.css b/semantic/components/step.min.css new file mode 100644 index 0000000..6f82825 --- /dev/null +++ b/semantic/components/step.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.1 - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.steps{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin:1em 0;background:'';-webkit-box-shadow:none;box-shadow:none;line-height:1.14285714em;border-radius:.28571429rem;border:1px solid rgba(34,36,38,.15)}.ui.steps:first-child{margin-top:0}.ui.steps:last-child{margin-bottom:0}.ui.steps .step{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 0;padding:1.14285714em 2em;background:#fff;color:rgba(0,0,0,.87);-webkit-box-shadow:none;box-shadow:none;border-radius:0;border:none;border-right:1px solid rgba(34,36,38,.15);-webkit-transition:background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease}.ui.steps .step:after{display:none;position:absolute;z-index:2;content:'';top:50%;right:0;border:medium none;background-color:#fff;width:1.14285714em;height:1.14285714em;border-style:solid;border-color:rgba(34,36,38,.15);border-width:0 1px 1px 0;-webkit-transition:background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);transform:translateY(-50%) translateX(50%) rotate(-45deg)}.ui.steps .step:first-child{padding-left:2em;border-radius:.28571429rem 0 0 .28571429rem}.ui.steps .step:last-child{border-radius:0 .28571429rem .28571429rem 0}.ui.steps .step:last-child{border-right:none;margin-right:0}.ui.steps .step:only-child{border-radius:.28571429rem}.ui.steps .step .title{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.14285714em;font-weight:700}.ui.steps .step>.title{width:100%}.ui.steps .step .description{font-weight:400;font-size:.92857143em;color:rgba(0,0,0,.87)}.ui.steps .step>.description{width:100%}.ui.steps .step .title~.description{margin-top:.25em}.ui.steps .step>.icon{line-height:1;font-size:2.5em;margin:0 1rem 0 0}.ui.steps .step>.icon,.ui.steps .step>.icon~.content{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:middle;align-self:middle}.ui.steps .step>.icon~.content{-webkit-box-flex:1 0 auto;-ms-flex-positive:1 0 auto;flex-grow:1 0 auto}.ui.steps:not(.vertical) .step>.icon{width:auto}.ui.steps .link.step,.ui.steps a.step{cursor:pointer}.ui.ordered.steps{counter-reset:ordered}.ui.ordered.steps .step:before{display:block;position:static;text-align:center;content:counters(ordered, ".");-ms-flex-item-align:middle;align-self:middle;margin-right:1rem;font-size:2.5em;counter-increment:ordered;font-family:inherit;font-weight:700}.ui.ordered.steps .step>*{display:block;-ms-flex-item-align:middle;align-self:middle}.ui.vertical.steps{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:visible}.ui.vertical.steps .step{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;border-radius:0;padding:1.14285714em 2em;border-right:none;border-bottom:1px solid rgba(34,36,38,.15)}.ui.vertical.steps .step:first-child{padding:1.14285714em 2em;border-radius:.28571429rem .28571429rem 0 0}.ui.vertical.steps .step:last-child{border-bottom:none;border-radius:0 0 .28571429rem .28571429rem}.ui.vertical.steps .step:only-child{border-radius:.28571429rem}.ui.vertical.steps .step:after{display:none}.ui.vertical.steps .step:after{top:50%;right:0;border-width:0 1px 1px 0}.ui.vertical.steps .step:after{display:none}.ui.vertical.steps .active.step:after{display:block}.ui.vertical.steps .step:last-child:after{display:none}.ui.vertical.steps .active.step:last-child:after{display:block}@media only screen and (max-width:767px){.ui.steps:not(.unstackable){display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.steps:not(.unstackable) .step{width:100%!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:0;padding:1.14285714em 2em}.ui.steps:not(.unstackable) .step:first-child{padding:1.14285714em 2em;border-radius:.28571429rem .28571429rem 0 0}.ui.steps:not(.unstackable) .step:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.steps:not(.unstackable) .step:after{display:none!important}.ui.steps:not(.unstackable) .step .content{text-align:center}.ui.ordered.steps:not(.unstackable) .step:before,.ui.steps:not(.unstackable) .step>.icon{margin:0 0 1rem 0}}.ui.steps .link.step:hover,.ui.steps .link.step:hover::after,.ui.steps a.step:hover,.ui.steps a.step:hover::after{background:#f9fafb;color:rgba(0,0,0,.8)}.ui.steps .link.step:active,.ui.steps .link.step:active::after,.ui.steps a.step:active,.ui.steps a.step:active::after{background:#f3f4f5;color:rgba(0,0,0,.9)}.ui.steps .step.active{cursor:auto;background:#f3f4f5}.ui.steps .step.active:after{background:#f3f4f5}.ui.steps .step.active .title{color:#4183c4}.ui.ordered.steps .step.active:before,.ui.steps .active.step .icon{color:rgba(0,0,0,.85)}.ui.steps .step:after{display:block}.ui.steps .active.step:after{display:block}.ui.steps .step:last-child:after{display:none}.ui.steps .active.step:last-child:after{display:none}.ui.steps .link.active.step:hover,.ui.steps .link.active.step:hover::after,.ui.steps a.active.step:hover,.ui.steps a.active.step:hover::after{cursor:pointer;background:#dcddde;color:rgba(0,0,0,.87)}.ui.ordered.steps .step.completed:before,.ui.steps .step.completed>.icon:before{color:#21ba45}.ui.steps .disabled.step{cursor:auto;background:#fff;pointer-events:none}.ui.steps .disabled.step,.ui.steps .disabled.step .description,.ui.steps .disabled.step .title{color:rgba(40,40,40,.3)}.ui.steps .disabled.step:after{background:#fff}@media only screen and (max-width:991px){.ui[class*="tablet stackable"].steps{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui[class*="tablet stackable"].steps .step{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:0;padding:1.14285714em 2em}.ui[class*="tablet stackable"].steps .step:first-child{padding:1.14285714em 2em;border-radius:.28571429rem .28571429rem 0 0}.ui[class*="tablet stackable"].steps .step:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui[class*="tablet stackable"].steps .step:after{display:none!important}.ui[class*="tablet stackable"].steps .step .content{text-align:center}.ui[class*="tablet stackable"].ordered.steps .step:before,.ui[class*="tablet stackable"].steps .step>.icon{margin:0 0 1rem 0}}.ui.fluid.steps{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.ui.attached.steps{width:calc(100% + (--1px * 2))!important;margin:0 -1px 0;max-width:calc(100% + (--1px * 2));border-radius:.28571429rem .28571429rem 0 0}.ui.attached.steps .step:first-child{border-radius:.28571429rem 0 0 0}.ui.attached.steps .step:last-child{border-radius:0 .28571429rem 0 0}.ui.bottom.attached.steps{margin:0 -1px 0;border-radius:0 0 .28571429rem .28571429rem}.ui.bottom.attached.steps .step:first-child{border-radius:0 0 0 .28571429rem}.ui.bottom.attached.steps .step:last-child{border-radius:0 0 .28571429rem 0}.ui.eight.steps,.ui.five.steps,.ui.four.steps,.ui.one.steps,.ui.seven.steps,.ui.six.steps,.ui.three.steps,.ui.two.steps{width:100%}.ui.eight.steps>.step,.ui.five.steps>.step,.ui.four.steps>.step,.ui.one.steps>.step,.ui.seven.steps>.step,.ui.six.steps>.step,.ui.three.steps>.step,.ui.two.steps>.step{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.ui.one.steps>.step{width:100%}.ui.two.steps>.step{width:50%}.ui.three.steps>.step{width:33.333%}.ui.four.steps>.step{width:25%}.ui.five.steps>.step{width:20%}.ui.six.steps>.step{width:16.666%}.ui.seven.steps>.step{width:14.285%}.ui.eight.steps>.step{width:12.5%}.ui.mini.step,.ui.mini.steps .step{font-size:.78571429rem}.ui.tiny.step,.ui.tiny.steps .step{font-size:.85714286rem}.ui.small.step,.ui.small.steps .step{font-size:.92857143rem}.ui.step,.ui.steps .step{font-size:1rem}.ui.large.step,.ui.large.steps .step{font-size:1.14285714rem}.ui.big.step,.ui.big.steps .step{font-size:1.28571429rem}.ui.huge.step,.ui.huge.steps .step{font-size:1.42857143rem}.ui.massive.step,.ui.massive.steps .step{font-size:1.71428571rem}@font-face{font-family:Step;src:url(data:application/x-font-ttf;charset=utf-8;;base64,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) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAoUAA4AAAAAEPQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPeFJAWNtYXAAAAGIAAAAOgAAAUrQEhm3Y3Z0IAAAAcQAAAAUAAAAHAZJ/5RmcGdtAAAB2AAABPkAAAmRigp4O2dhc3AAAAbUAAAACAAAAAgAAAAQZ2x5ZgAABtwAAACuAAAAtt9nBHZoZWFkAAAHjAAAADUAAAA2ASs8e2hoZWEAAAfEAAAAIAAAACQHUwNNaG10eAAAB+QAAAAMAAAADAspAABsb2NhAAAH8AAAAAgAAAAIADgAW21heHAAAAf4AAAAIAAAACAApgm8bmFtZQAACBgAAAF3AAACzcydGhxwb3N0AAAJkAAAACoAAAA7rr1AmHByZXAAAAm8AAAAVgAAAFaSoZr/eJxjYGTewTiBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHIHPQ/iyGKmZvBHyjMCJIDAPe9C2B4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/v8PUvCCAURLMELVAwEjG8OIBwBk5AavAAB4nGNgQANGDEbM3P83gjAAELQD4XicnVXZdtNWFJU8ZHASOmSgoA7X3DhQ68qEKRgwaSrFdiEdHAitBB2kDHTkncc+62uOQrtWH/m07n09JLR0rbYsls++R1tn2DrnRhwjKn0aiGvUoZKXA6msPZZK90lc13Uvj5UMBnFdthJPSZuonSRKat3sUC7xWOsqWSdYJ+PlIFZPVZ5noAziFB5lSUQbRBuplyZJ4onjJ4kWZxAfJUkgJaMQp9LIUEI1GsRS1aFM6dCr1xNx00DKRqMedVhU90PFJ8c1p9SsA0YqVznCFevVRr4bpwMve5DEOsGzrYcxHnisfpQqkIqR6cg/dkpOlIaBVHHUoVbi6DCTX/eRTCrNQKaMYkWl7oG43f102xYxPXQ6vi5KlUaqurnOKJrt0fGogygP2cbppNzQ2fbw5RlTVKtdcbPtQGYNXErJbHSfRAAdJlLj6QFONZwCqRn1R8XZ588BEslclKo8VTKHegOZMzt7cTHtbiersnCknwcyb3Z2452HQ6dXh3/R+hdM4cxHj+Jifj5C+lBqfiJOJKVGWMzyp4YfcVcgQrkxiAsXyuBThDl0RdrZZl3jtTH2hs/5SqlhPQna6KP4fgr9TiQrHGdRo/VInM1j13Wt3GdQS7W7Fzsyr0OVIu7vCwuuM+eEYZ4WC1VfnvneBTT/Bohn/EDeNIVL+5YpSrRvm6JMu2iKCu0SVKVdNsUU7YoppmnPmmKG9h1TzNKeMzLj/8vc55H7HN7xkJv2XeSmfQ+5ad9HbtoPkJtWITdtHblpLyA3rUZu2lWjOnYEGgZpF1IVQdA0svph3Fab9UDWjDR8aWDyLmLI+upER521tcofxX914gsHcmmip7siF5viLq/bFj483e6rj5pG3bDV+MaR8jAeRnocmtBZ+c3hv+1N3S6a7jKqMugBFUwKwABl7UAC0zrbCaT1mqf48gdgXIZ4zkpDtVSfO4am7+V5X/exOfG+x+3GLrdcd3kJWdYNcmP28N9SZKrrH+UtrVQnR6wrJ49VaxhDKrwour6SlHu0tRu/KKmy8l6U1srnk5CbPYMbQlu27mGwI0xpyiUeXlOlKD3UUo6yQyxvKco84JSLC1qGxLgOdQ9qa8TpoXoYGwshhqG0vRBwSCldFd+0ynfxHqtr2Oj4xRXh6XpyEhGf4ir7UfBU10b96A7avGbdMoMpVaqn+4xPsa/b9lFZaaSOsxe3VAfXNOsaORXTT+Rr4HRvOGjdAz1UfDRBI1U1x+jGKGM0ljXl3wR0MVZ+w2jVYvs93E+dpFWsuUuY7JsT9+C0u/0q+7WcW0bW/dcGvW3kip8jMb8tCvw7B2K3ZA3UO5OBGAvIWdAYxhYmdxiug23EbfY/Jqf/34aFRXJXOxq7eerD1ZNRJXfZ8rjLTXZZ16M2R9VOGvsIjS0PN+bY4XIstsRgQbb+wf8x7gF3aVEC4NDIZZiI2nShnurh6h6rsW04VxIBds2x43QAegAuQd8cu9bzCYD13CPnLsB9cgh2yCH4lByCz8i5BfA5OQRfkEMwIIdgl5w7AA/IIXhIDsEeOQSPyNkE+JIcgq/IIYjJIUjIuQ3wmByCJ+QQfE0OwTdGrk5k/pYH2QD6zqKbQKmdGhzaOGRGrk3Y+zxY9oFFZB9aROqRkesT6lMeLPV7i0j9wSJSfzRyY0L9iQdL/dkiUn+xiNRnxpeZIymvDp7zjg7+BJfqrV4AAAAAAQAB//8AD3icY2BkAALmJUwzGEQZZBwk+RkZGBmdGJgYmbIYgMwsoGSiiLgIs5A2owg7I5uSOqOaiT2jmZE8I5gQY17C/09BQEfg3yt+fh8gvYQxD0j68DOJiQn8U+DnZxQDcQUEljLmCwBpBgbG/3//b2SOZ+Zm4GEQcuAH2sblDLSEm8FFVJhJEGgLH6OSHpMdo5EcI3Nk0bEXJ/LYqvZ82VXHGFd6pKTkyCsQwQAAq+QkqAAAeJxjYGRgYADiw5VSsfH8Nl8ZuJlfAEUYzpvO6IXQCb7///7fyLyEmRvI5WBgAokCAFb/DJAAAAB4nGNgZGBgDvqfxRDF/IKB4f935iUMQBEUwAwAi5YFpgPoAAAD6AAAA1kAAAAAAAAAOABbAAEAAAADABYAAQAAAAAAAgAGABMAbgAAAC0JkQAAAAB4nHWQy2rCQBSG//HSi0JbWui2sypKabxgN4IgWHTTbqS4LTHGJBIzMhkFX6Pv0IfpS/RZ+puMpShNmMx3vjlz5mQAXOMbAvnzxJGzwBmjnAs4Rc9ykf7Zcon8YrmMKt4sn9C/W67gAYHlKm7wwQqidM5ogU/LAlfi0nIBF+LOcpH+0XKJ3LNcxq14tXxC71muYCJSy1Xci6+BWm11FIRG1gZ12W62OnK6lYoqStxYumsTKp3KvpyrxPhxrBxPLfc89oN17Op9uJ8nvk4jlciW09yrkZ/42jX+bFc93QRtY+ZyrtVSDm2GXGm18D3jhMasuo3G3/MwgMIKW2hEvKoQBhI12jrnNppooUOaMkMyM8+KkMBFTONizR1htpIy7nPMGSW0PjNisgOP3+WRH5MC7o9ZRR+tHsYT0u6MKPOSfTns7jBrREqyTDezs9/eU2x4WpvWcNeuS511JTE8qCF5H7u1BY1H72S3Ymi7aPD95/9+AN1fhEsAeJxjYGKAAC4G7ICZgYGRiZGZMzkjNTk7N7Eomy05syg5J5WBAQBE1QZBAABLuADIUlixAQGOWbkIAAgAYyCwASNEsAMjcLIEKAlFUkSyCgIHKrEGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAA) format('woff')}.ui.ordered.steps .step.completed:before,.ui.steps .step.completed>.icon:before{font-family:Step;content:'\e800'} \ No newline at end of file diff --git a/semantic/components/sticky.css b/semantic/components/sticky.css new file mode 100644 index 0000000..19aca17 --- /dev/null +++ b/semantic/components/sticky.css @@ -0,0 +1,78 @@ +/*! + * # Semantic UI 2.4.0 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Sticky +*******************************/ + +.ui.sticky { + position: static; + -webkit-transition: none; + transition: none; + z-index: 800; +} + + +/******************************* + States +*******************************/ + + +/* Bound */ +.ui.sticky.bound { + position: absolute; + left: auto; + right: auto; +} + +/* Fixed */ +.ui.sticky.fixed { + position: fixed; + left: auto; + right: auto; +} + +/* Bound/Fixed Position */ +.ui.sticky.bound.top, +.ui.sticky.fixed.top { + top: 0px; + bottom: auto; +} +.ui.sticky.bound.bottom, +.ui.sticky.fixed.bottom { + top: auto; + bottom: 0px; +} + + +/******************************* + Types +*******************************/ + +.ui.native.sticky { + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; + position: sticky; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/sticky.js b/semantic/components/sticky.js new file mode 100644 index 0000000..6b7773a --- /dev/null +++ b/semantic/components/sticky.js @@ -0,0 +1,959 @@ +/*! + * # Semantic UI 2.4.1 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.sticky = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.sticky.settings, parameters) + : $.extend({}, $.fn.sticky.settings), + + className = settings.className, + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $window = $(window), + $scroll = $(settings.scrollContext), + $container, + $context, + + selector = $module.selector || '', + instance = $module.data(moduleNamespace), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + element = this, + + documentObserver, + observer, + module + ; + + module = { + + initialize: function() { + + module.determineContainer(); + module.determineContext(); + module.verbose('Initializing sticky', settings, $container); + + module.save.positions(); + module.checkErrors(); + module.bind.events(); + + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous instance'); + module.reset(); + if(documentObserver) { + documentObserver.disconnect(); + } + if(observer) { + observer.disconnect(); + } + $window + .off('load' + eventNamespace, module.event.load) + .off('resize' + eventNamespace, module.event.resize) + ; + $scroll + .off('scrollchange' + eventNamespace, module.event.scrollchange) + ; + $module.removeData(moduleNamespace); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + documentObserver = new MutationObserver(module.event.documentChanged); + observer = new MutationObserver(module.event.changed); + documentObserver.observe(document, { + childList : true, + subtree : true + }); + observer.observe(element, { + childList : true, + subtree : true + }); + observer.observe($context[0], { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + determineContainer: function() { + if(settings.container) { + $container = $(settings.container); + } + else { + $container = $module.offsetParent(); + } + }, + + determineContext: function() { + if(settings.context) { + $context = $(settings.context); + } + else { + $context = $container; + } + if($context.length === 0) { + module.error(error.invalidContext, settings.context, $module); + return; + } + }, + + checkErrors: function() { + if( module.is.hidden() ) { + module.error(error.visible, $module); + } + if(module.cache.element.height > module.cache.context.height) { + module.reset(); + module.error(error.elementSize, $module); + return; + } + }, + + bind: { + events: function() { + $window + .on('load' + eventNamespace, module.event.load) + .on('resize' + eventNamespace, module.event.resize) + ; + // pub/sub pattern + $scroll + .off('scroll' + eventNamespace) + .on('scroll' + eventNamespace, module.event.scroll) + .on('scrollchange' + eventNamespace, module.event.scrollchange) + ; + } + }, + + event: { + changed: function(mutations) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + module.verbose('DOM tree modified, updating sticky menu', mutations); + module.refresh(); + }, 100); + }, + documentChanged: function(mutations) { + [].forEach.call(mutations, function(mutation) { + if(mutation.removedNodes) { + [].forEach.call(mutation.removedNodes, function(node) { + if(node == element || $(node).find(element).length > 0) { + module.debug('Element removed from DOM, tearing down events'); + module.destroy(); + } + }); + } + }); + }, + load: function() { + module.verbose('Page contents finished loading'); + requestAnimationFrame(module.refresh); + }, + resize: function() { + module.verbose('Window resized'); + requestAnimationFrame(module.refresh); + }, + scroll: function() { + requestAnimationFrame(function() { + $scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() ); + }); + }, + scrollchange: function(event, scrollPosition) { + module.stick(scrollPosition); + settings.onScroll.call(element); + } + }, + + refresh: function(hardRefresh) { + module.reset(); + if(!settings.context) { + module.determineContext(); + } + if(hardRefresh) { + module.determineContainer(); + } + module.save.positions(); + module.stick(); + settings.onReposition.call(element); + }, + + supports: { + sticky: function() { + var + $element = $('
'), + element = $element[0] + ; + $element.addClass(className.supported); + return($element.css('position').match('sticky')); + } + }, + + save: { + lastScroll: function(scroll) { + module.lastScroll = scroll; + }, + elementScroll: function(scroll) { + module.elementScroll = scroll; + }, + positions: function() { + var + scrollContext = { + height : $scroll.height() + }, + element = { + margin: { + top : parseInt($module.css('margin-top'), 10), + bottom : parseInt($module.css('margin-bottom'), 10), + }, + offset : $module.offset(), + width : $module.outerWidth(), + height : $module.outerHeight() + }, + context = { + offset : $context.offset(), + height : $context.outerHeight() + }, + container = { + height: $container.outerHeight() + } + ; + if( !module.is.standardScroll() ) { + module.debug('Non-standard scroll. Removing scroll offset from element offset'); + + scrollContext.top = $scroll.scrollTop(); + scrollContext.left = $scroll.scrollLeft(); + + element.offset.top += scrollContext.top; + context.offset.top += scrollContext.top; + element.offset.left += scrollContext.left; + context.offset.left += scrollContext.left; + } + module.cache = { + fits : ( (element.height + settings.offset) <= scrollContext.height), + sameHeight : (element.height == context.height), + scrollContext : { + height : scrollContext.height + }, + element: { + margin : element.margin, + top : element.offset.top - element.margin.top, + left : element.offset.left, + width : element.width, + height : element.height, + bottom : element.offset.top + element.height + }, + context: { + top : context.offset.top, + height : context.height, + bottom : context.offset.top + context.height + } + }; + module.set.containerSize(); + + module.stick(); + module.debug('Caching element positions', module.cache); + } + }, + + get: { + direction: function(scroll) { + var + direction = 'down' + ; + scroll = scroll || $scroll.scrollTop(); + if(module.lastScroll !== undefined) { + if(module.lastScroll < scroll) { + direction = 'down'; + } + else if(module.lastScroll > scroll) { + direction = 'up'; + } + } + return direction; + }, + scrollChange: function(scroll) { + scroll = scroll || $scroll.scrollTop(); + return (module.lastScroll) + ? (scroll - module.lastScroll) + : 0 + ; + }, + currentElementScroll: function() { + if(module.elementScroll) { + return module.elementScroll; + } + return ( module.is.top() ) + ? Math.abs(parseInt($module.css('top'), 10)) || 0 + : Math.abs(parseInt($module.css('bottom'), 10)) || 0 + ; + }, + + elementScroll: function(scroll) { + scroll = scroll || $scroll.scrollTop(); + var + element = module.cache.element, + scrollContext = module.cache.scrollContext, + delta = module.get.scrollChange(scroll), + maxScroll = (element.height - scrollContext.height + settings.offset), + elementScroll = module.get.currentElementScroll(), + possibleScroll = (elementScroll + delta) + ; + if(module.cache.fits || possibleScroll < 0) { + elementScroll = 0; + } + else if(possibleScroll > maxScroll ) { + elementScroll = maxScroll; + } + else { + elementScroll = possibleScroll; + } + return elementScroll; + } + }, + + remove: { + lastScroll: function() { + delete module.lastScroll; + }, + elementScroll: function(scroll) { + delete module.elementScroll; + }, + minimumSize: function() { + $container + .css('min-height', '') + ; + }, + offset: function() { + $module.css('margin-top', ''); + } + }, + + set: { + offset: function() { + module.verbose('Setting offset on element', settings.offset); + $module + .css('margin-top', settings.offset) + ; + }, + containerSize: function() { + var + tagName = $container.get(0).tagName + ; + if(tagName === 'HTML' || tagName == 'body') { + // this can trigger for too many reasons + //module.error(error.container, tagName, $module); + module.determineContainer(); + } + else { + if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) { + module.debug('Context has padding, specifying exact height for container', module.cache.context.height); + $container.css({ + height: module.cache.context.height + }); + } + } + }, + minimumSize: function() { + var + element = module.cache.element + ; + $container + .css('min-height', element.height) + ; + }, + scroll: function(scroll) { + module.debug('Setting scroll on element', scroll); + if(module.elementScroll == scroll) { + return; + } + if( module.is.top() ) { + $module + .css('bottom', '') + .css('top', -scroll) + ; + } + if( module.is.bottom() ) { + $module + .css('top', '') + .css('bottom', scroll) + ; + } + }, + size: function() { + if(module.cache.element.height !== 0 && module.cache.element.width !== 0) { + element.style.setProperty('width', module.cache.element.width + 'px', 'important'); + element.style.setProperty('height', module.cache.element.height + 'px', 'important'); + } + } + }, + + is: { + standardScroll: function() { + return ($scroll[0] == window); + }, + top: function() { + return $module.hasClass(className.top); + }, + bottom: function() { + return $module.hasClass(className.bottom); + }, + initialPosition: function() { + return (!module.is.fixed() && !module.is.bound()); + }, + hidden: function() { + return (!$module.is(':visible')); + }, + bound: function() { + return $module.hasClass(className.bound); + }, + fixed: function() { + return $module.hasClass(className.fixed); + } + }, + + stick: function(scroll) { + var + cachedPosition = scroll || $scroll.scrollTop(), + cache = module.cache, + fits = cache.fits, + sameHeight = cache.sameHeight, + element = cache.element, + scrollContext = cache.scrollContext, + context = cache.context, + offset = (module.is.bottom() && settings.pushing) + ? settings.bottomOffset + : settings.offset, + scroll = { + top : cachedPosition + offset, + bottom : cachedPosition + offset + scrollContext.height + }, + direction = module.get.direction(scroll.top), + elementScroll = (fits) + ? 0 + : module.get.elementScroll(scroll.top), + + // shorthand + doesntFit = !fits, + elementVisible = (element.height !== 0) + ; + if(elementVisible && !sameHeight) { + + if( module.is.initialPosition() ) { + if(scroll.top >= context.bottom) { + module.debug('Initial element position is bottom of container'); + module.bindBottom(); + } + else if(scroll.top > element.top) { + if( (element.height + scroll.top - elementScroll) >= context.bottom ) { + module.debug('Initial element position is bottom of container'); + module.bindBottom(); + } + else { + module.debug('Initial element position is fixed'); + module.fixTop(); + } + } + + } + else if( module.is.fixed() ) { + + // currently fixed top + if( module.is.top() ) { + if( scroll.top <= element.top ) { + module.debug('Fixed element reached top of container'); + module.setInitialPosition(); + } + else if( (element.height + scroll.top - elementScroll) >= context.bottom ) { + module.debug('Fixed element reached bottom of container'); + module.bindBottom(); + } + // scroll element if larger than screen + else if(doesntFit) { + module.set.scroll(elementScroll); + module.save.lastScroll(scroll.top); + module.save.elementScroll(elementScroll); + } + } + + // currently fixed bottom + else if(module.is.bottom() ) { + + // top edge + if( (scroll.bottom - element.height) <= element.top) { + module.debug('Bottom fixed rail has reached top of container'); + module.setInitialPosition(); + } + // bottom edge + else if(scroll.bottom >= context.bottom) { + module.debug('Bottom fixed rail has reached bottom of container'); + module.bindBottom(); + } + // scroll element if larger than screen + else if(doesntFit) { + module.set.scroll(elementScroll); + module.save.lastScroll(scroll.top); + module.save.elementScroll(elementScroll); + } + + } + } + else if( module.is.bottom() ) { + if( scroll.top <= element.top ) { + module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button'); + module.setInitialPosition(); + } + else { + if(settings.pushing) { + if(module.is.bound() && scroll.bottom <= context.bottom ) { + module.debug('Fixing bottom attached element to bottom of browser.'); + module.fixBottom(); + } + } + else { + if(module.is.bound() && (scroll.top <= context.bottom - element.height) ) { + module.debug('Fixing bottom attached element to top of browser.'); + module.fixTop(); + } + } + } + } + } + }, + + bindTop: function() { + module.debug('Binding element to top of parent container'); + module.remove.offset(); + $module + .css({ + left : '', + top : '', + marginBottom : '' + }) + .removeClass(className.fixed) + .removeClass(className.bottom) + .addClass(className.bound) + .addClass(className.top) + ; + settings.onTop.call(element); + settings.onUnstick.call(element); + }, + bindBottom: function() { + module.debug('Binding element to bottom of parent container'); + module.remove.offset(); + $module + .css({ + left : '', + top : '' + }) + .removeClass(className.fixed) + .removeClass(className.top) + .addClass(className.bound) + .addClass(className.bottom) + ; + settings.onBottom.call(element); + settings.onUnstick.call(element); + }, + + setInitialPosition: function() { + module.debug('Returning to initial position'); + module.unfix(); + module.unbind(); + }, + + + fixTop: function() { + module.debug('Fixing element to top of page'); + if(settings.setSize) { + module.set.size(); + } + module.set.minimumSize(); + module.set.offset(); + $module + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) + .removeClass(className.bound) + .removeClass(className.bottom) + .addClass(className.fixed) + .addClass(className.top) + ; + settings.onStick.call(element); + }, + + fixBottom: function() { + module.debug('Sticking element to bottom of page'); + if(settings.setSize) { + module.set.size(); + } + module.set.minimumSize(); + module.set.offset(); + $module + .css({ + left : module.cache.element.left, + bottom : '', + marginBottom : '' + }) + .removeClass(className.bound) + .removeClass(className.top) + .addClass(className.fixed) + .addClass(className.bottom) + ; + settings.onStick.call(element); + }, + + unbind: function() { + if( module.is.bound() ) { + module.debug('Removing container bound position on element'); + module.remove.offset(); + $module + .removeClass(className.bound) + .removeClass(className.top) + .removeClass(className.bottom) + ; + } + }, + + unfix: function() { + if( module.is.fixed() ) { + module.debug('Removing fixed position on element'); + module.remove.minimumSize(); + module.remove.offset(); + $module + .removeClass(className.fixed) + .removeClass(className.top) + .removeClass(className.bottom) + ; + settings.onUnstick.call(element); + } + }, + + reset: function() { + module.debug('Resetting elements position'); + module.unbind(); + module.unfix(); + module.resetCSS(); + module.remove.offset(); + module.remove.lastScroll(); + }, + + resetCSS: function() { + $module + .css({ + width : '', + height : '' + }) + ; + $container + .css({ + height: '' + }) + ; + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 0); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.sticky.settings = { + + name : 'Sticky', + namespace : 'sticky', + + silent : false, + debug : false, + verbose : true, + performance : true, + + // whether to stick in the opposite direction on scroll up + pushing : false, + + context : false, + container : false, + + // Context to watch scroll events + scrollContext : window, + + // Offset to adjust scroll + offset : 0, + + // Offset to adjust scroll when attached to bottom of screen + bottomOffset : 0, + + // will only set container height if difference between context and container is larger than this number + jitter : 5, + + // set width of sticky element when it is fixed to page (used to make sure 100% width is maintained if no fixed size set) + setSize : true, + + // Whether to automatically observe changes with Mutation Observers + observeChanges : false, + + // Called when position is recalculated + onReposition : function(){}, + + // Called on each scroll + onScroll : function(){}, + + // Called when element is stuck to viewport + onStick : function(){}, + + // Called when element is unstuck from viewport + onUnstick : function(){}, + + // Called when element reaches top of context + onTop : function(){}, + + // Called when element reaches bottom of context + onBottom : function(){}, + + error : { + container : 'Sticky element must be inside a relative container', + visible : 'Element is hidden, you must call refresh after element becomes visible. Use silent setting to surpress this warning in production.', + method : 'The method you called is not defined.', + invalidContext : 'Context specified does not exist', + elementSize : 'Sticky element is larger than its container, cannot create sticky.' + }, + + className : { + bound : 'bound', + fixed : 'fixed', + supported : 'native', + top : 'top', + bottom : 'bottom' + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/sticky.min.css b/semantic/components/sticky.min.css new file mode 100644 index 0000000..2fcb95b --- /dev/null +++ b/semantic/components/sticky.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.sticky{position:static;-webkit-transition:none;transition:none;z-index:800}.ui.sticky.bound{position:absolute;left:auto;right:auto}.ui.sticky.fixed{position:fixed;left:auto;right:auto}.ui.sticky.bound.top,.ui.sticky.fixed.top{top:0;bottom:auto}.ui.sticky.bound.bottom,.ui.sticky.fixed.bottom{top:auto;bottom:0}.ui.native.sticky{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky} \ No newline at end of file diff --git a/semantic/components/sticky.min.js b/semantic/components/sticky.min.js new file mode 100644 index 0000000..cf831ca --- /dev/null +++ b/semantic/components/sticky.min.js @@ -0,0 +1 @@ +!function(T,w,B,P){"use strict";w=void 0!==w&&w.Math==Math?w:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),T.fn.sticky=function(b){var v,e=T(this),x=e.selector||"",C=(new Date).getTime(),S=[],y=b,k="string"==typeof y,z=[].slice.call(arguments,1);return e.each(function(){var n,i,e,t,m,u=T.isPlainObject(b)?T.extend(!0,{},T.fn.sticky.settings,b):T.extend({},T.fn.sticky.settings),o=u.className,s=u.namespace,r=u.error,c="."+s,l="module-"+s,a=T(this),f=T(w),d=T(u.scrollContext),h=(a.selector,a.data(l)),g=w.requestAnimationFrame||w.mozRequestAnimationFrame||w.webkitRequestAnimationFrame||w.msRequestAnimationFrame||function(e){setTimeout(e,0)},p=this;m={initialize:function(){m.determineContainer(),m.determineContext(),m.verbose("Initializing sticky",u,n),m.save.positions(),m.checkErrors(),m.bind.events(),u.observeChanges&&m.observeChanges(),m.instantiate()},instantiate:function(){m.verbose("Storing instance of module",m),h=m,a.data(l,m)},destroy:function(){m.verbose("Destroying previous instance"),m.reset(),e&&e.disconnect(),t&&t.disconnect(),f.off("load"+c,m.event.load).off("resize"+c,m.event.resize),d.off("scrollchange"+c,m.event.scrollchange),a.removeData(l)},observeChanges:function(){"MutationObserver"in w&&(e=new MutationObserver(m.event.documentChanged),t=new MutationObserver(m.event.changed),e.observe(B,{childList:!0,subtree:!0}),t.observe(p,{childList:!0,subtree:!0}),t.observe(i[0],{childList:!0,subtree:!0}),m.debug("Setting up mutation observer",t))},determineContainer:function(){n=u.container?T(u.container):a.offsetParent()},determineContext:function(){0!==(i=u.context?T(u.context):n).length||m.error(r.invalidContext,u.context,a)},checkErrors:function(){if(m.is.hidden()&&m.error(r.visible,a),m.cache.element.height>m.cache.context.height)return m.reset(),void m.error(r.elementSize,a)},bind:{events:function(){f.on("load"+c,m.event.load).on("resize"+c,m.event.resize),d.off("scroll"+c).on("scroll"+c,m.event.scroll).on("scrollchange"+c,m.event.scrollchange)}},event:{changed:function(e){clearTimeout(m.timer),m.timer=setTimeout(function(){m.verbose("DOM tree modified, updating sticky menu",e),m.refresh()},100)},documentChanged:function(e){[].forEach.call(e,function(e){e.removedNodes&&[].forEach.call(e.removedNodes,function(e){(e==p||0");e[0];return e.addClass(o.supported),e.css("position").match("sticky")}},save:{lastScroll:function(e){m.lastScroll=e},elementScroll:function(e){m.elementScroll=e},positions:function(){var e={height:d.height()},t={margin:{top:parseInt(a.css("margin-top"),10),bottom:parseInt(a.css("margin-bottom"),10)},offset:a.offset(),width:a.outerWidth(),height:a.outerHeight()},o={offset:i.offset(),height:i.outerHeight()};n.outerHeight();m.is.standardScroll()||(m.debug("Non-standard scroll. Removing scroll offset from element offset"),e.top=d.scrollTop(),e.left=d.scrollLeft(),t.offset.top+=e.top,o.offset.top+=e.top,t.offset.left+=e.left,o.offset.left+=e.left),m.cache={fits:t.height+u.offset<=e.height,sameHeight:t.height==o.height,scrollContext:{height:e.height},element:{margin:t.margin,top:t.offset.top-t.margin.top,left:t.offset.left,width:t.width,height:t.height,bottom:t.offset.top+t.height},context:{top:o.offset.top,height:o.height,bottom:o.offset.top+o.height}},m.set.containerSize(),m.stick(),m.debug("Caching element positions",m.cache)}},get:{direction:function(e){var t="down";return e=e||d.scrollTop(),m.lastScroll!==P&&(m.lastScrolle&&(t="up")),t},scrollChange:function(e){return e=e||d.scrollTop(),m.lastScroll?e-m.lastScroll:0},currentElementScroll:function(){return m.elementScroll?m.elementScroll:m.is.top()?Math.abs(parseInt(a.css("top"),10))||0:Math.abs(parseInt(a.css("bottom"),10))||0},elementScroll:function(e){e=e||d.scrollTop();var t=m.cache.element,o=m.cache.scrollContext,n=m.get.scrollChange(e),i=t.height-o.height+u.offset,s=m.get.currentElementScroll(),r=s+n;return s=m.cache.fits||r<0?0:iu.jitter&&(m.debug("Context has padding, specifying exact height for container",m.cache.context.height),n.css({height:m.cache.context.height}))},minimumSize:function(){var e=m.cache.element;n.css("min-height",e.height)},scroll:function(e){m.debug("Setting scroll on element",e),m.elementScroll!=e&&(m.is.top()&&a.css("bottom","").css("top",-e),m.is.bottom()&&a.css("top","").css("bottom",e))},size:function(){0!==m.cache.element.height&&0!==m.cache.element.width&&(p.style.setProperty("width",m.cache.element.width+"px","important"),p.style.setProperty("height",m.cache.element.height+"px","important"))}},is:{standardScroll:function(){return d[0]==w},top:function(){return a.hasClass(o.top)},bottom:function(){return a.hasClass(o.bottom)},initialPosition:function(){return!m.is.fixed()&&!m.is.bound()},hidden:function(){return!a.is(":visible")},bound:function(){return a.hasClass(o.bound)},fixed:function(){return a.hasClass(o.fixed)}},stick:function(e){var t=e||d.scrollTop(),o=m.cache,n=o.fits,i=o.sameHeight,s=o.element,r=o.scrollContext,c=o.context,l=m.is.bottom()&&u.pushing?u.bottomOffset:u.offset,a=(e={top:t+l,bottom:t+l+r.height},m.get.direction(e.top),n?0:m.get.elementScroll(e.top)),f=!n;0!==s.height&&!i&&(m.is.initialPosition()?e.top>=c.bottom?(m.debug("Initial element position is bottom of container"),m.bindBottom()):e.top>s.top&&(s.height+e.top-a>=c.bottom?(m.debug("Initial element position is bottom of container"),m.bindBottom()):(m.debug("Initial element position is fixed"),m.fixTop())):m.is.fixed()?m.is.top()?e.top<=s.top?(m.debug("Fixed element reached top of container"),m.setInitialPosition()):s.height+e.top-a>=c.bottom?(m.debug("Fixed element reached bottom of container"),m.bindBottom()):f&&(m.set.scroll(a),m.save.lastScroll(e.top),m.save.elementScroll(a)):m.is.bottom()&&(e.bottom-s.height<=s.top?(m.debug("Bottom fixed rail has reached top of container"),m.setInitialPosition()):e.bottom>=c.bottom?(m.debug("Bottom fixed rail has reached bottom of container"),m.bindBottom()):f&&(m.set.scroll(a),m.save.lastScroll(e.top),m.save.elementScroll(a))):m.is.bottom()&&(e.top<=s.top?(m.debug("Jumped from bottom fixed to top fixed, most likely used home/end button"),m.setInitialPosition()):u.pushing?m.is.bound()&&e.bottom<=c.bottom&&(m.debug("Fixing bottom attached element to bottom of browser."),m.fixBottom()):m.is.bound()&&e.top<=c.bottom-s.height&&(m.debug("Fixing bottom attached element to top of browser."),m.fixTop())))},bindTop:function(){m.debug("Binding element to top of parent container"),m.remove.offset(),a.css({left:"",top:"",marginBottom:""}).removeClass(o.fixed).removeClass(o.bottom).addClass(o.bound).addClass(o.top),u.onTop.call(p),u.onUnstick.call(p)},bindBottom:function(){m.debug("Binding element to bottom of parent container"),m.remove.offset(),a.css({left:"",top:""}).removeClass(o.fixed).removeClass(o.top).addClass(o.bound).addClass(o.bottom),u.onBottom.call(p),u.onUnstick.call(p)},setInitialPosition:function(){m.debug("Returning to initial position"),m.unfix(),m.unbind()},fixTop:function(){m.debug("Fixing element to top of page"),u.setSize&&m.set.size(),m.set.minimumSize(),m.set.offset(),a.css({left:m.cache.element.left,bottom:"",marginBottom:""}).removeClass(o.bound).removeClass(o.bottom).addClass(o.fixed).addClass(o.top),u.onStick.call(p)},fixBottom:function(){m.debug("Sticking element to bottom of page"),u.setSize&&m.set.size(),m.set.minimumSize(),m.set.offset(),a.css({left:m.cache.element.left,bottom:"",marginBottom:""}).removeClass(o.bound).removeClass(o.top).addClass(o.fixed).addClass(o.bottom),u.onStick.call(p)},unbind:function(){m.is.bound()&&(m.debug("Removing container bound position on element"),m.remove.offset(),a.removeClass(o.bound).removeClass(o.top).removeClass(o.bottom))},unfix:function(){m.is.fixed()&&(m.debug("Removing fixed position on element"),m.remove.minimumSize(),m.remove.offset(),a.removeClass(o.fixed).removeClass(o.top).removeClass(o.bottom),u.onUnstick.call(p))},reset:function(){m.debug("Resetting elements position"),m.unbind(),m.unfix(),m.resetCSS(),m.remove.offset(),m.remove.lastScroll()},resetCSS:function(){a.css({width:"",height:""}),n.css({height:""})},setting:function(e,t){if(T.isPlainObject(e))T.extend(!0,u,e);else{if(t===P)return u[e];u[e]=t}},internal:function(e,t){if(T.isPlainObject(e))T.extend(!0,m,e);else{if(t===P)return m[e];m[e]=t}},debug:function(){!u.silent&&u.debug&&(u.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,u.name+":"),m.debug.apply(console,arguments)))},verbose:function(){!u.silent&&u.verbose&&u.debug&&(u.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,u.name+":"),m.verbose.apply(console,arguments)))},error:function(){u.silent||(m.error=Function.prototype.bind.call(console.error,console,u.name+":"),m.error.apply(console,arguments))},performance:{log:function(e){var t,o;u.performance&&(o=(t=(new Date).getTime())-(C||t),C=t,S.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:p,"Execution Time":o})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,0)},display:function(){var e=u.name+":",o=0;C=!1,clearTimeout(m.performance.timer),T.each(S,function(e,t){o+=t["Execution Time"]}),e+=" "+o+"ms",x&&(e+=" '"+x+"'"),(console.group!==P||console.table!==P)&&0 0) { + $reference = $module.closest(selector.ui); + module.verbose('Using closest UI element as parent', $reference); + } + else { + $reference = $module; + } + $context = $reference.parent(); + module.verbose('Determined parent element for creating context', $context); + } + else if(settings.context) { + $context = $(settings.context); + module.verbose('Using selector for tab context', settings.context, $context); + } + else { + $context = $('body'); + } + // find tabs + if(settings.childrenOnly) { + $tabs = $context.children(selector.tabs); + module.debug('Searching tab context children for tabs', $context, $tabs); + } + else { + $tabs = $context.find(selector.tabs); + module.debug('Searching tab context for tabs', $context, $tabs); + } + }, + + fix: { + callbacks: function() { + if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) { + if(parameters.onTabLoad) { + parameters.onLoad = parameters.onTabLoad; + delete parameters.onTabLoad; + module.error(error.legacyLoad, parameters.onLoad); + } + if(parameters.onTabInit) { + parameters.onFirstLoad = parameters.onTabInit; + delete parameters.onTabInit; + module.error(error.legacyInit, parameters.onFirstLoad); + } + settings = $.extend(true, {}, $.fn.tab.settings, parameters); + } + } + }, + + initializeHistory: function() { + module.debug('Initializing page state'); + if( $.address === undefined ) { + module.error(error.state); + return false; + } + else { + if(settings.historyType == 'state') { + module.debug('Using HTML5 to manage state'); + if(settings.path !== false) { + $.address + .history(true) + .state(settings.path) + ; + } + else { + module.error(error.path); + return false; + } + } + $.address + .bind('change', module.event.history.change) + ; + } + }, + + event: { + click: function(event) { + var + tabPath = $(this).data(metadata.tab) + ; + if(tabPath !== undefined) { + if(settings.history) { + module.verbose('Updating page state', event); + $.address.value(tabPath); + } + else { + module.verbose('Changing tab', event); + module.changeTab(tabPath); + } + event.preventDefault(); + } + else { + module.debug('No tab specified'); + } + }, + history: { + change: function(event) { + var + tabPath = event.pathNames.join('/') || module.get.initialPath(), + pageTitle = settings.templates.determineTitle(tabPath) || false + ; + module.performance.display(); + module.debug('History change event', tabPath, event); + historyEvent = event; + if(tabPath !== undefined) { + module.changeTab(tabPath); + } + if(pageTitle) { + $.address.title(pageTitle); + } + } + } + }, + + refresh: function() { + if(activeTabPath) { + module.debug('Refreshing tab', activeTabPath); + module.changeTab(activeTabPath); + } + }, + + cache: { + + read: function(cacheKey) { + return (cacheKey !== undefined) + ? cache[cacheKey] + : false + ; + }, + add: function(cacheKey, content) { + cacheKey = cacheKey || activeTabPath; + module.debug('Adding cached content for', cacheKey); + cache[cacheKey] = content; + }, + remove: function(cacheKey) { + cacheKey = cacheKey || activeTabPath; + module.debug('Removing cached content for', cacheKey); + delete cache[cacheKey]; + } + }, + + set: { + auto: function() { + var + url = (typeof settings.path == 'string') + ? settings.path.replace(/\/$/, '') + '/{$tab}' + : '/{$tab}' + ; + module.verbose('Setting up automatic tab retrieval from server', url); + if($.isPlainObject(settings.apiSettings)) { + settings.apiSettings.url = url; + } + else { + settings.apiSettings = { + url: url + }; + } + }, + loading: function(tabPath) { + var + $tab = module.get.tabElement(tabPath), + isLoading = $tab.hasClass(className.loading) + ; + if(!isLoading) { + module.verbose('Setting loading state for', $tab); + $tab + .addClass(className.loading) + .siblings($tabs) + .removeClass(className.active + ' ' + className.loading) + ; + if($tab.length > 0) { + settings.onRequest.call($tab[0], tabPath); + } + } + }, + state: function(state) { + $.address.value(state); + } + }, + + changeTab: function(tabPath) { + var + pushStateAvailable = (window.history && window.history.pushState), + shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), + remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ), + // only add default path if not remote content + pathArray = (remoteContent && !shouldIgnoreLoad) + ? module.utilities.pathToArray(tabPath) + : module.get.defaultPathArray(tabPath) + ; + tabPath = module.utilities.arrayToPath(pathArray); + $.each(pathArray, function(index, tab) { + var + currentPathArray = pathArray.slice(0, index + 1), + currentPath = module.utilities.arrayToPath(currentPathArray), + + isTab = module.is.tab(currentPath), + isLastIndex = (index + 1 == pathArray.length), + + $tab = module.get.tabElement(currentPath), + $anchor, + nextPathArray, + nextPath, + isLastTab + ; + module.verbose('Looking for tab', tab); + if(isTab) { + module.verbose('Tab was found', tab); + // scope up + activeTabPath = currentPath; + parameterArray = module.utilities.filterArray(pathArray, currentPathArray); + + if(isLastIndex) { + isLastTab = true; + } + else { + nextPathArray = pathArray.slice(0, index + 2); + nextPath = module.utilities.arrayToPath(nextPathArray); + isLastTab = ( !module.is.tab(nextPath) ); + if(isLastTab) { + module.verbose('Tab parameters found', nextPathArray); + } + } + if(isLastTab && remoteContent) { + if(!shouldIgnoreLoad) { + module.activate.navigation(currentPath); + module.fetch.content(currentPath, tabPath); + } + else { + module.debug('Ignoring remote content on first tab load', currentPath); + firstLoad = false; + module.cache.add(tabPath, $tab.html()); + module.activate.all(currentPath); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); + } + return false; + } + else { + module.debug('Opened local tab', currentPath); + module.activate.all(currentPath); + if( !module.cache.read(currentPath) ) { + module.cache.add(currentPath, true); + module.debug('First time tab loaded calling tab init'); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); + } + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); + } + + } + else if(tabPath.search('/') == -1 && tabPath !== '') { + // look for in page anchor + $anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'); + currentPath = $anchor.closest('[data-tab]').data(metadata.tab); + $tab = module.get.tabElement(currentPath); + // if anchor exists use parent tab + if($anchor && $anchor.length > 0 && currentPath) { + module.debug('Anchor link used, opening parent tab', $tab, $anchor); + if( !$tab.hasClass(className.active) ) { + setTimeout(function() { + module.scrollTo($anchor); + }, 0); + } + module.activate.all(currentPath); + if( !module.cache.read(currentPath) ) { + module.cache.add(currentPath, true); + module.debug('First time tab loaded calling tab init'); + settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent); + } + settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent); + return false; + } + } + else { + module.error(error.missingTab, $module, $context, currentPath); + return false; + } + }); + }, + + scrollTo: function($element) { + var + scrollOffset = ($element && $element.length > 0) + ? $element.offset().top + : false + ; + if(scrollOffset !== false) { + module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element); + $(document).scrollTop(scrollOffset); + } + }, + + update: { + content: function(tabPath, html, evaluateScripts) { + var + $tab = module.get.tabElement(tabPath), + tab = $tab[0] + ; + evaluateScripts = (evaluateScripts !== undefined) + ? evaluateScripts + : settings.evaluateScripts + ; + if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && typeof html !== 'string') { + $tab + .empty() + .append($(html).clone(true)) + ; + } + else { + if(evaluateScripts) { + module.debug('Updating HTML and evaluating inline scripts', tabPath, html); + $tab.html(html); + } + else { + module.debug('Updating HTML', tabPath, html); + tab.innerHTML = html; + } + } + } + }, + + fetch: { + + content: function(tabPath, fullTabPath) { + var + $tab = module.get.tabElement(tabPath), + apiSettings = { + dataType : 'html', + encodeParameters : false, + on : 'now', + cache : settings.alwaysRefresh, + headers : { + 'X-Remote': true + }, + onSuccess : function(response) { + if(settings.cacheType == 'response') { + module.cache.add(fullTabPath, response); + } + module.update.content(tabPath, response); + if(tabPath == activeTabPath) { + module.debug('Content loaded', tabPath); + module.activate.tab(tabPath); + } + else { + module.debug('Content loaded in background', tabPath); + } + settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent); + settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent); + + if(settings.loadOnce) { + module.cache.add(fullTabPath, true); + } + else if(typeof settings.cacheType == 'string' && settings.cacheType.toLowerCase() == 'dom' && $tab.children().length > 0) { + setTimeout(function() { + var + $clone = $tab.children().clone(true) + ; + $clone = $clone.not('script'); + module.cache.add(fullTabPath, $clone); + }, 0); + } + else { + module.cache.add(fullTabPath, $tab.html()); + } + }, + urlData: { + tab: fullTabPath + } + }, + request = $tab.api('get request') || false, + existingRequest = ( request && request.state() === 'pending' ), + requestSettings, + cachedContent + ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + + + if(settings.cache && cachedContent) { + module.activate.tab(tabPath); + module.debug('Adding cached content', fullTabPath); + if(!settings.loadOnce) { + if(settings.evaluateScripts == 'once') { + module.update.content(tabPath, cachedContent, false); + } + else { + module.update.content(tabPath, cachedContent); + } + } + settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent); + } + else if(existingRequest) { + module.set.loading(tabPath); + module.debug('Content is already loading', fullTabPath); + } + else if($.api !== undefined) { + requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings); + module.debug('Retrieving remote content', fullTabPath, requestSettings); + module.set.loading(tabPath); + $tab.api(requestSettings); + } + else { + module.error(error.api); + } + } + }, + + activate: { + all: function(tabPath) { + module.activate.tab(tabPath); + module.activate.navigation(tabPath); + }, + tab: function(tabPath) { + var + $tab = module.get.tabElement(tabPath), + $deactiveTabs = (settings.deactivate == 'siblings') + ? $tab.siblings($tabs) + : $tabs.not($tab), + isActive = $tab.hasClass(className.active) + ; + module.verbose('Showing tab content for', $tab); + if(!isActive) { + $tab + .addClass(className.active) + ; + $deactiveTabs + .removeClass(className.active + ' ' + className.loading) + ; + if($tab.length > 0) { + settings.onVisible.call($tab[0], tabPath); + } + } + }, + navigation: function(tabPath) { + var + $navigation = module.get.navElement(tabPath), + $deactiveNavigation = (settings.deactivate == 'siblings') + ? $navigation.siblings($allModules) + : $allModules.not($navigation), + isActive = $navigation.hasClass(className.active) + ; + module.verbose('Activating tab navigation for', $navigation, tabPath); + if(!isActive) { + $navigation + .addClass(className.active) + ; + $deactiveNavigation + .removeClass(className.active + ' ' + className.loading) + ; + } + } + }, + + deactivate: { + all: function() { + module.deactivate.navigation(); + module.deactivate.tabs(); + }, + navigation: function() { + $allModules + .removeClass(className.active) + ; + }, + tabs: function() { + $tabs + .removeClass(className.active + ' ' + className.loading) + ; + } + }, + + is: { + tab: function(tabName) { + return (tabName !== undefined) + ? ( module.get.tabElement(tabName).length > 0 ) + : false + ; + } + }, + + get: { + initialPath: function() { + return $allModules.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab); + }, + path: function() { + return $.address.value(); + }, + // adds default tabs to tab path + defaultPathArray: function(tabPath) { + return module.utilities.pathToArray( module.get.defaultPath(tabPath) ); + }, + defaultPath: function(tabPath) { + var + $defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0), + defaultTab = $defaultNav.data(metadata.tab) || false + ; + if( defaultTab ) { + module.debug('Found default tab', defaultTab); + if(recursionDepth < settings.maxDepth) { + recursionDepth++; + return module.get.defaultPath(defaultTab); + } + module.error(error.recursion); + } + else { + module.debug('No default tabs found for', tabPath, $tabs); + } + recursionDepth = 0; + return tabPath; + }, + navElement: function(tabPath) { + tabPath = tabPath || activeTabPath; + return $allModules.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); + }, + tabElement: function(tabPath) { + var + $fullPathTab, + $simplePathTab, + tabPathArray, + lastTab + ; + tabPath = tabPath || activeTabPath; + tabPathArray = module.utilities.pathToArray(tabPath); + lastTab = module.utilities.last(tabPathArray); + $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); + $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); + return ($fullPathTab.length > 0) + ? $fullPathTab + : $simplePathTab + ; + }, + tab: function() { + return activeTabPath; + } + }, + + utilities: { + filterArray: function(keepArray, removeArray) { + return $.grep(keepArray, function(keepValue) { + return ( $.inArray(keepValue, removeArray) == -1); + }); + }, + last: function(array) { + return $.isArray(array) + ? array[ array.length - 1] + : false + ; + }, + pathToArray: function(pathName) { + if(pathName === undefined) { + pathName = activeTabPath; + } + return typeof pathName == 'string' + ? pathName.split('/') + : [pathName] + ; + }, + arrayToPath: function(pathArray) { + return $.isArray(pathArray) + ? pathArray.join('/') + : false + ; + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; + +}; + +// shortcut for tabbed content with no defined navigation +$.tab = function() { + $(window).tab.apply(this, arguments); +}; + +$.fn.tab.settings = { + + name : 'Tab', + namespace : 'tab', + + silent : false, + debug : false, + verbose : false, + performance : true, + + auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers + history : false, // use browser history + historyType : 'hash', // #/ or html5 state + path : false, // base path of url + + context : false, // specify a context that tabs must appear inside + childrenOnly : false, // use only tabs that are children of context + maxDepth : 25, // max depth a tab can be nested + + deactivate : 'siblings', // whether tabs should deactivate sibling menu elements or all elements initialized together + + alwaysRefresh : false, // load tab content new every tab click + cache : true, // cache the content requests to pull locally + loadOnce : false, // Whether tab data should only be loaded once when using remote content + cacheType : 'response', // Whether to cache exact response, or to html cache contents after scripts execute + ignoreFirstLoad : false, // don't load remote content on first load + + apiSettings : false, // settings for api call + evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content + + onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded + onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load + onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible + onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content + + templates : { + determineTitle: function(tabArray) {} // returns page title for path + }, + + error: { + api : 'You attempted to load content without API module', + method : 'The method you called is not defined', + missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.', + noContent : 'The tab you specified is missing a content url.', + path : 'History enabled, but no path was specified', + recursion : 'Max recursive depth reached', + legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.', + legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code', + state : 'History requires Asual\'s Address library ' + }, + + metadata : { + tab : 'tab', + loaded : 'loaded', + promise: 'promise' + }, + + className : { + loading : 'loading', + active : 'active' + }, + + selector : { + tabs : '.ui.tab', + ui : '.ui' + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/tab.min.css b/semantic/components/tab.min.css new file mode 100644 index 0000000..a1f92a8 --- /dev/null +++ b/semantic/components/tab.min.css @@ -0,0 +1,9 @@ +/*! + * # Semantic UI 2.4.0 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.tab{display:none}.ui.tab.active,.ui.tab.open{display:block}.ui.tab.loading{position:relative;overflow:hidden;display:block;min-height:250px}.ui.tab.loading *{position:relative!important;left:-10000px!important}.ui.tab.loading.segment:before,.ui.tab.loading:before{position:absolute;content:'';top:100px;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.tab.loading.segment:after,.ui.tab.loading:after{position:absolute;content:'';top:100px;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;-webkit-animation:button-spin .6s linear;animation:button-spin .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border-radius:500rem;border-color:#767676 transparent transparent;border-style:solid;border-width:.2em;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent} \ No newline at end of file diff --git a/semantic/components/tab.min.js b/semantic/components/tab.min.js new file mode 100644 index 0000000..b7a1e7b --- /dev/null +++ b/semantic/components/tab.min.js @@ -0,0 +1 @@ +!function(E,O,w,k){"use strict";O=void 0!==O&&O.Math==Math?O:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),E.fn.tab=function(r){var l,d=E.isFunction(this)?E(O):E(this),u=d.selector||"",b=(new Date).getTime(),g=[],f=r,F="string"==typeof f,S=[].slice.call(arguments,1),j=!1;return d.each(function(){var h,o,p,m,v,y,T=E.isPlainObject(r)?E.extend(!0,{},E.fn.tab.settings,r):E.extend({},E.fn.tab.settings),L=T.className,x=T.metadata,t=T.selector,A=T.error,e="."+T.namespace,a="module-"+T.namespace,P=E(this),n={},C=!0,i=0,s=this,c=P.data(a);v={initialize:function(){v.debug("Initializing tab menu item",P),v.fix.callbacks(),v.determineTabs(),v.debug("Determining tabs",T.context,o),T.auto&&v.set.auto(),v.bind.events(),T.history&&!j&&(v.initializeHistory(),j=!0),v.instantiate()},instantiate:function(){v.verbose("Storing instance of module",v),c=v,P.data(a,v)},destroy:function(){v.debug("Destroying tabs",P),P.removeData(a).off(e)},bind:{events:function(){E.isWindow(s)||(v.debug("Attaching tab activation events to element",P),P.on("click"+e,v.event.click))}},determineTabs:function(){var e;"parent"===T.context?(0