diff --git a/000_objectives/index.html b/000_objectives/index.html new file mode 100644 index 0000000..a8e0e6a --- /dev/null +++ b/000_objectives/index.html @@ -0,0 +1,343 @@ + + + + + + + + + + + + + About · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +

+ + + +

+
+ + + +

+ +

+ + + +

+ +

Students/Researchers/Practitioners who want to complement their learning with hands-on homework assignments focused with distributed-memory programming, message-passing, MPI, and high performance computing

Instructors who want to provide students with tested and compelling homework assignments as part of the coursework they develop

+ +

+ + + +

Have Docker installed or have access to a Linux system/vm/container)

Some Computer Science background (i.e., a few courses)

Some C programming (i.e., a 1-semester course)

Elementary Linux command-line skills

Knowledge of MPI (or access to tutorial or course materials)

+ +

+ + + +The broad learning objective of SMPI CourseWare is to learn how to write efficient message-passing +programs that run on distributed-memory architectures, using the MPI standard. + +Specific learning objectives include: +

Understand general distributed-memory programming techniques and learn standard solutions to common problems

Learn how to implement distributed-memory programs, going from traditional "rigid" programs to more "dynamic" programs

Understand and experience performance trade-offs when implementing and executing distributed-memory programs on ranges of distributed-memory platforms

+ +

+ + + +While many curricular materials have been developed homework assignments to be executed +on parallel platforms, SMPI CourseWare relies on simulation. This approach has the following advantages: + + +

No need to have access to a distributed-memory platform, such as a cluster

Ability to run many experiments quickly and reproducibly on one's own computer

Ability to explore arbitrary "what if?" scenarios, in particular to experience performance trade-offs first-hand

+ +The above is accomplished using +SMPI (Simulated MPI), +which is provided as part of the SimGrid project. SMPI simulates the execution of unmodified MPI applications.

+ +

+ +

+ + + +SMPI CourseWare is distributed under the CC-BY-SA license, which +basically means that you can freely reuse and extend its content, +provided that you don't reduce the rights of your readers. Check the +full +license for the exact legal terms of this license. + +

+ + +
+ +

+ + + + + diff --git a/00_topic/index.html b/00_topic/index.html new file mode 100644 index 0000000..03518e3 --- /dev/null +++ b/00_topic/index.html @@ -0,0 +1,301 @@ + + + + + + + + + + + + + Topic #0 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

This topic shows you how to install SimGrid/SMPI, introduces you to the main concepts, + have you run a Hello World example, + and gives limitations of SMPI simulations. The goal is for you to be prepared for the other + topics and their hands-on activities. +

+ +

+ + +

+ +

+ + +

+ +

+ + + +

+ +

+ + +

+ +

+ + + +
+ +

+ + + + + diff --git a/01_topic/index.html b/01_topic/index.html new file mode 100644 index 0000000..c6c9eb4 --- /dev/null +++ b/01_topic/index.html @@ -0,0 +1,283 @@ + + + + + + + + + + + + + Topic #1 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

This topic introduces basic but essential concepts for distributed-memory programming + (Single-Program Multiple-Data (SPMD) programming style, the use of process rank to distribute work among processes, + local vs. global indices for 1-D and 2-D data distribution of arrays, simple message-passing to coordinate processes). + The focus is mostly on correctness, and only a tiny bit on performance. +

+ +

+ + +

+ +

+ + +
+ +

+ + + + + diff --git a/02_topic/index.html b/02_topic/index.html new file mode 100644 index 0000000..73f604b --- /dev/null +++ b/02_topic/index.html @@ -0,0 +1,296 @@ + + + + + + + + + + + + + Topic #2 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

This topic focuses on essential message-passing concepts: + point-to-point and collective communications, + communication pipelining, + asynchronous communications, + logical topologies and impact of physical network topologies. + The focus is both on correctness and on performance. +

+ +

+ + +

+ +

+ + +

+ +

+ + + +
+ +

+ + + + + diff --git a/03_topic/index.html b/03_topic/index.html new file mode 100644 index 0000000..ed67ab1 --- /dev/null +++ b/03_topic/index.html @@ -0,0 +1,293 @@ + + + + + + + + + + + + + Topic #3 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

This topic focuses on implementation of "rigid" parallel program, i.e., + programs in which the data distribution schemes and the communication patterns + are regular and static. The learning objectives are similar to those in Topic #1, + but on steroids. The focus is mostly on correctness. +

+ +

+ + +

+ +

+ + + +

+ +

+ + + +
+ +

+ + + + + diff --git a/04_topic/index.html b/04_topic/index.html new file mode 100644 index 0000000..ac433e6 --- /dev/null +++ b/04_topic/index.html @@ -0,0 +1,293 @@ + + + + + + + + + + + + + Topic #4 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

This topic focuses on performance and scalability analysis + of rigid distributed memory programs, and on simple techniques to + improve performance. The focus is mostly on + performance, and programs written in modules from Topic #3 are used as + starting points. +

+ +

+ + +

+ +

+ + +

+ +

+ + + +
+ +

+ + + + + diff --git a/05_topic/index.html b/05_topic/index.html new file mode 100644 index 0000000..0287929 --- /dev/null +++ b/05_topic/index.html @@ -0,0 +1,266 @@ + + + + + + + + + + + + + Topic #5 · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

+ +

+ + + +
+ +

+ + + + + diff --git a/404.html b/404.html new file mode 100644 index 0000000..22fa70a --- /dev/null +++ b/404.html @@ -0,0 +1,254 @@ + + + + + + + + + + + + + 404: Page not found · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

404: Page not found

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

+ +

+ + + + + diff --git a/License.txt b/License.txt new file mode 100644 index 0000000..8e0cf19 --- /dev/null +++ b/License.txt @@ -0,0 +1,6 @@ +This CourseWare is distributed under the CC-BY-SA license, which +basically means that you can freely reuse and extend its content, +provided that you don't reduce the rights of your readers. Check the +Full License online for the exact legal terms of this license. + +This license can be found at: https://creativecommons.org/licenses/by-sa/4.0/ diff --git a/README.md b/README.md index af80dbe..4f9030f 100644 --- a/README.md +++ b/README.md @@ -1 +1,14 @@ # SMPI_CourseWare + +Set of hands-on pedagogic activities centered on teaching +high performance computing and distributed memory computing +_in simulation_, using Simulated MPI (SMPI) provided as part of the +[SimGrid project](http://simgrid.gforge.inria.fr/)). + +This repository (master branch) contains the source (i.e., jekyll configuration files and mardown files) as well as a script to generate the Web content (gh-pages branch). + +The Web content can be seen +[on this github.io page](https://simgrid.github.io/SMPI_CourseWare/). + +The Jekyll theme is based on +[Hyde](https://github.com/poole/hyde) diff --git a/TODO.txt b/TODO.txt new file mode 100644 index 0000000..90cfc08 --- /dev/null +++ b/TODO.txt @@ -0,0 +1,27 @@ +Topic #1: + +# Activity 1 +# Step 1 +-> I would add a second argument for the tint (unless it never changes). Set the output filename to sprintf("./julia-%d-%.2f", n, tint)? (that will make sense later) +-> I would also mention the compilation flags (-Wall., possibly -g), memory leaks and valgrind +-> Storing 2-D data in a row-major 1-D array + +# Step2 +-> Verify that your program outputs the expected Julia set [...] + +Give a few expected samples, 100, 201, ... or better provide a docker image to verify them +$ docker run [...] julia-1000-0.5.bmp +PASS +$ docker run [...] julia-1003-0.5.bmp +FAIL + + +Topic #3/4: Stencil application? + + +Topic #4 (Performance): + - Add asynchronous broadcast to the MM application (once SMPI supports it? or + have the students implement it by hand?? likely the former option is better) + + +Topic #5: come up with ideas diff --git a/generate_and_publish_html.sh b/generate_and_publish_html.sh new file mode 100755 index 0000000..f5a5ae1 --- /dev/null +++ b/generate_and_publish_html.sh @@ -0,0 +1,20 @@ +#!/bin/bash +# +# This script should be executed on a checkout of the master branch and it: +# - creates a gh-pages directory +# - does a check out of the gh-pages branch in that directory +# - runs jekyll to generate content into the gh-pages directory +# - pushes the changes to the gh-pages branch +# - the gh-branch content is magically seen at: https://simgrid.github.io/SMPI_CourseWare/ + +TARGETDIR=/tmp/SMPI_CourseWare + +( set -x ; /bin/rm -rf $TARGETDIR ) +( set -x ;\ + cd /tmp;\ + git clone --depth 1 --branch gh-pages git@github.com:simgrid/SMPI_CourseWare.git $TARGETDIR;\ + cd $TARGETDIR;\ + git branch -u origin/gh-pages; ) +( set -x ; jekyll build --source . --destination $TARGETDIR; ) +( set -x; cd $TARGETDIR; git add --all .; git commit -a -m "Re-generating HTML"; git push; ) +( set -x; /bin/rm -rf $TARGETDIR; ) diff --git a/generate_html.sh b/generate_html.sh deleted file mode 100755 index 6e38c58..0000000 --- a/generate_html.sh +++ /dev/null @@ -1,8 +0,0 @@ -#!/bin/bash - -( set -x ; /bin/rm -rf ./gh-pages ) -( set -x ; mkdir ./gh-pages ) -( set -x ; cd ./gh-pages; git clone -b gh-pages https://github.com/simgrid/SMPI_CourseWare.git ; ) -( set -x ; jekyll build --source ./site --destination ./gh-pages) -( set -x; cd gh-pages; git pull; git add --all . ; git commit -a -m "updated content"; git push origin gh-pages) -( set -x; /bin/rm -rf ./gh-pages ) diff --git a/index.html b/index.html new file mode 100644 index 0000000..e133192 --- /dev/null +++ b/index.html @@ -0,0 +1,286 @@ + + + + + + + + + + + + + Welcome to SMPI CourseWare · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ +

+SMPI CourseWare is a set of homework assignments focused on teaching high +performance computing and distributed memory programming. These assignments use +simulation. More specifically, the modules use + SMPI (Simulated MPI), + a simulator for MPI applications provided as part of + SimGrid. +

+ +

+This not a self-contained MPI course. Although some tutorial information is provided, the intent is for this material +to be used as part of existing curricula (university courses, training programs, etc.). If you are an independent +learner, you need to learn about MPI before doing these assignments. +

+ +

+ Using the navigation bar on the left you can see the specific learning objectives, + and explore the covered topics. Each topic consists on hands-on modules, which each + include brief tutorial information as well as homework activities. Topic #0 is obviously + a good place to start. +

+ +

+ + +
+ +

+ + + + + diff --git a/jquery/jquery.min.js b/jquery/jquery.min.js new file mode 100644 index 0000000..5cb0acf --- /dev/null +++ b/jquery/jquery.min.js @@ -0,0 +1,5 @@ +/*! jQuery v1.12.2 | (c) jQuery Foundation | jquery.org/license */ +!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="1.12.2",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(n.isPlainObject(c)||(b=n.isArray(c)))?(b?(b=!1,f=a&&n.isArray(a)?a:[]):f=a&&n.isPlainObject(a)?a:{},g[d]=n.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray||function(a){return"array"===n.type(a)},isWindow:function(a){return null!=a&&a==a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},isPlainObject:function(a){var b;if(!a||"object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;try{if(a.constructor&&!k.call(a,"constructor")&&!k.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}if(!l.ownFirst)for(b in a)return k.call(a,b);for(b in a);return void 0===b||k.call(a,b)},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(b){b&&n.trim(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){var d;if(b){if(h)return h.call(b,a,c);for(d=b.length,c=c?0>c?Math.max(0,d+c):c:0;d>c;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,b){var c=+b.length,d=0,e=a.length;while(c>d)a[e++]=b[d++];if(c!==c)while(void 0!==b[d])a[e++]=b[d++];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(f=a[b],b=a,a=f),n.isFunction(a)?(c=e.call(arguments,2),d=function(){return a.apply(b||this,c.concat(e.call(arguments)))},d.guid=a.guid=a.guid||n.guid++,d):void 0},now:function(){return+new Date},support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\$(('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\$|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\$"+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\$|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\$"+L+"*((?:-\\d)?\\d*)"+L+"*\$|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(c&&!c(f,d,e)||(g.push(f),j&&b.push(h)));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return n.inArray(a,b)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=[],d=this,e=d.length;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;e>b;b++)if(n.contains(d[b],this))return!0}));for(b=0;e>b;b++)n.find(a,d[b],c);return c=this.pushStack(e>1?n.unique(c):c),c.selector=this.selector?this.selector+" "+a:a,c},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a.charAt(0)&&">"===a.charAt(a.length-1)&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}if(f=d.getElementById(e[2]),f&&f.parentNode){if(f.id!==e[2])return A.find(a);this.length=1,this[0]=f}return this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b,c=n(a,this),d=c.length;return this.filter(function(){for(b=0;d>b;b++)if(n.contains(this,c[b]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?n.inArray(this[0],n(a)):n.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){do a=a[b];while(a&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return n.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||(e=n.uniqueSort(e)),D.test(a)&&(e=e.reverse())),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=!0,c||j.disable(),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.addEventListener?(d.removeEventListener("DOMContentLoaded",K),a.removeEventListener("load",K)):(d.detachEvent("onreadystatechange",K),a.detachEvent("onload",K))}function K(){(d.addEventListener||"load"===a.event.type||"complete"===d.readyState)&&(J(),n.ready())}n.ready.promise=function(b){if(!I)if(I=n.Deferred(),"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll)a.setTimeout(n.ready);else if(d.addEventListener)d.addEventListener("DOMContentLoaded",K),a.addEventListener("load",K);else{d.attachEvent("onreadystatechange",K),a.attachEvent("onload",K);var c=!1;try{c=null==a.frameElement&&d.documentElement}catch(e){}c&&c.doScroll&&!function f(){if(!n.isReady){try{c.doScroll("left")}catch(b){return a.setTimeout(f,50)}J(),n.ready()}}()}return I.promise(b)},n.ready.promise();var L;for(L in n(l))break;l.ownFirst="0"===L,l.inlineBlockNeedsLayout=!1,n(function(){var a,b,c,e;c=d.getElementsByTagName("body")[0],c&&c.style&&(b=d.createElement("div"),e=d.createElement("div"),e.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(e).appendChild(b),"undefined"!=typeof b.style.zoom&&(b.style.cssText="display:inline;margin:0;border:0;padding:1px;width:1px;zoom:1",l.inlineBlockNeedsLayout=a=3===b.offsetWidth,a&&(c.style.zoom=1)),c.removeChild(e))}),function(){var a=d.createElement("div");l.deleteExpando=!0;try{delete a.test}catch(b){l.deleteExpando=!1}a=null}();var M=function(a){var b=n.noData[(a.nodeName+" ").toLowerCase()],c=+a.nodeType||1;return 1!==c&&9!==c?!1:!b||b!==!0&&a.getAttribute("classid")===b},N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){if(void 0===c&&1===a.nodeType){var d="data-"+b.replace(O,"-$1").toLowerCase();if(c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}n.data(a,b,c)}else c=void 0; +}return c}function Q(a){var b;for(b in a)if(("data"!==b||!n.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function R(a,b,d,e){if(M(a)){var f,g,h=n.expando,i=a.nodeType,j=i?n.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||n.guid++:h),j[k]||(j[k]=i?{}:{toJSON:n.noop}),"object"!=typeof b&&"function"!=typeof b||(e?j[k]=n.extend(j[k],b):j[k].data=n.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void 0!==d&&(g[n.camelCase(b)]=d),"string"==typeof b?(f=g[b],null==f&&(f=g[n.camelCase(b)])):f=g,f}}function S(a,b,c){if(M(a)){var d,e,f=a.nodeType,g=f?n.cache:a,h=f?a[n.expando]:n.expando;if(g[h]){if(b&&(d=c?g[h]:g[h].data)){n.isArray(b)?b=b.concat(n.map(b,n.camelCase)):b in d?b=[b]:(b=n.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;while(e--)delete d[b[e]];if(c?!Q(d):!n.isEmptyObject(d))return}(c||(delete g[h].data,Q(g[h])))&&(f?n.cleanData([a],!0):l.deleteExpando||g!=g.window?delete g[h]:g[h]=void 0)}}}n.extend({cache:{},noData:{"applet ":!0,"embed ":!0,"object ":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(a){return a=a.nodeType?n.cache[a[n.expando]]:a[n.expando],!!a&&!Q(a)},data:function(a,b,c){return R(a,b,c)},removeData:function(a,b){return S(a,b)},_data:function(a,b,c){return R(a,b,c,!0)},_removeData:function(a,b){return S(a,b,!0)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=n.data(f),1===f.nodeType&&!n._data(f,"parsedAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));n._data(f,"parsedAttrs",!0)}return e}return"object"==typeof a?this.each(function(){n.data(this,a)}):arguments.length>1?this.each(function(){n.data(this,a,b)}):f?P(f,a,n.data(f,a)):void 0},removeData:function(a){return this.each(function(){n.removeData(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=n._data(a,b),c&&(!d||n.isArray(c)?d=n._data(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return n._data(a,c)||n._data(a,c,{empty:n.Callbacks("once memory").add(function(){n._removeData(a,b+"queue"),n._removeData(a,c)})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthh;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},Z=/^(?:checkbox|radio)$/i,$=/<([\w:-]+)/,_=/^$|\/(?:java|ecma)script/i,aa=/^\s+/,ba="abbr|article|aside|audio|bdi|canvas|data|datalist|details|dialog|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|picture|progress|section|summary|template|time|video";function ca(a){var b=ba.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}!function(){var a=d.createElement("div"),b=d.createDocumentFragment(),c=d.createElement("input");a.innerHTML="

a",l.leadingWhitespace=3===a.firstChild.nodeType,l.tbody=!a.getElementsByTagName("tbody").length,l.htmlSerialize=!!a.getElementsByTagName("link").length,l.html5Clone="<:nav>"!==d.createElement("nav").cloneNode(!0).outerHTML,c.type="checkbox",c.checked=!0,b.appendChild(c),l.appendChecked=c.checked,a.innerHTML="",l.noCloneChecked=!!a.cloneNode(!0).lastChild.defaultValue,b.appendChild(a),c=d.createElement("input"),c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),a.appendChild(c),l.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,l.noCloneEvent=!!a.addEventListener,a[n.expando]=1,l.attributes=!a.getAttribute(n.expando)}();var da={option:[1,""],legend:[1,"

","

"],area:[1,"",""],param:[1,"

"],thead:[1,"","

"],tr:[2,"","

"],col:[2,"","

"],td:[3,"","

"],_default:l.htmlSerialize?[0,"",""]:[1,"X

","

"]};da.optgroup=da.option,da.tbody=da.tfoot=da.colgroup=da.caption=da.thead,da.th=da.td;function ea(a,b){var c,d,e=0,f="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||n.nodeName(d,b)?f.push(d):n.merge(f,ea(d,b));return void 0===b||b&&n.nodeName(a,b)?n.merge([a],f):f}function fa(a,b){for(var c,d=0;null!=(c=a[d]);d++)n._data(c,"globalEval",!b||n._data(b[d],"globalEval"))}var ga=/<|&#?\w+;/,ha=/r;r++)if(g=a[r],g||0===g)if("object"===n.type(g))n.merge(q,g.nodeType?[g]:g);else if(ga.test(g)){i=i||p.appendChild(b.createElement("div")),j=($.exec(g)||["",""])[1].toLowerCase(),m=da[j]||da._default,i.innerHTML=m[1]+n.htmlPrefilter(g)+m[2],f=m[0];while(f--)i=i.lastChild;if(!l.leadingWhitespace&&aa.test(g)&&q.push(b.createTextNode(aa.exec(g)[0])),!l.tbody){g="table"!==j||ha.test(g)?""!==m[1]||ha.test(g)?0:i:i.firstChild,f=g&&g.childNodes.length;while(f--)n.nodeName(k=g.childNodes[f],"tbody")&&!k.childNodes.length&&g.removeChild(k)}n.merge(q,i.childNodes),i.textContent="";while(i.firstChild)i.removeChild(i.firstChild);i=p.lastChild}else q.push(b.createTextNode(g));i&&p.removeChild(i),l.appendChecked||n.grep(ea(q,"input"),ia),r=0;while(g=q[r++])if(d&&n.inArray(g,d)>-1)e&&e.push(g);else if(h=n.contains(g.ownerDocument,g),i=ea(p.appendChild(g),"script"),h&&fa(i),c){f=0;while(g=i[f++])_.test(g.type||"")&&c.push(g)}return i=null,p}!function(){var b,c,e=d.createElement("div");for(b in{submit:!0,change:!0,focusin:!0})c="on"+b,(l[b]=c in a)||(e.setAttribute(c,"t"),l[b]=e.attributes[c].expando===!1);e=null}();var ka=/^(?:input|select|textarea)$/i,la=/^key/,ma=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,na=/^(?:focusinfocus|focusoutblur)$/,oa=/^([^.]*)(?:\.(.+)|)/;function pa(){return!0}function qa(){return!1}function ra(){try{return d.activeElement}catch(a){}}function sa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)sa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=qa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n._data(a);if(r){c.handler&&(i=c,c=i.handler,e=i.selector),c.guid||(c.guid=n.guid++),(g=r.events)||(g=r.events={}),(k=r.handle)||(k=r.handle=function(a){return"undefined"==typeof n||a&&n.event.triggered===a.type?void 0:n.event.dispatch.apply(k.elem,arguments)},k.elem=a),b=(b||"").match(G)||[""],h=b.length;while(h--)f=oa.exec(b[h])||[],o=q=f[1],p=(f[2]||"").split(".").sort(),o&&(j=n.event.special[o]||{},o=(e?j.delegateType:j.bindType)||o,j=n.event.special[o]||{},l=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},i),(m=g[o])||(m=g[o]=[],m.delegateCount=0,j.setup&&j.setup.call(a,d,p,k)!==!1||(a.addEventListener?a.addEventListener(o,k,!1):a.attachEvent&&a.attachEvent("on"+o,k))),j.add&&(j.add.call(a,l),l.handler.guid||(l.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,l):m.push(l),n.event.global[o]=!0);a=null}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n.hasData(a)&&n._data(a);if(r&&(k=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=oa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=k[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),i=f=m.length;while(f--)g=m[f],!e&&q!==g.origType||c&&c.guid!==g.guid||h&&!h.test(g.namespace)||d&&d!==g.selector&&("**"!==d||!g.selector)||(m.splice(f,1),g.selector&&m.delegateCount--,l.remove&&l.remove.call(a,g));i&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete k[o])}else for(o in k)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(k)&&(delete r.handle,n._removeData(a,"events"))}},trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(i=m=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!na.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),h=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),l=n.event.special[q]||{},f||!l.trigger||l.trigger.apply(e,c)!==!1)){if(!f&&!l.noBubble&&!n.isWindow(e)){for(j=l.delegateType||q,na.test(j+q)||(i=i.parentNode);i;i=i.parentNode)p.push(i),m=i;m===(e.ownerDocument||d)&&p.push(m.defaultView||m.parentWindow||a)}o=0;while((i=p[o++])&&!b.isPropagationStopped())b.type=o>1?j:l.bindType||q,g=(n._data(i,"events")||{})[b.type]&&n._data(i,"handle"),g&&g.apply(i,c),g=h&&i[h],g&&g.apply&&M(i)&&(b.result=g.apply(i,c),b.result===!1&&b.preventDefault());if(b.type=q,!f&&!b.isDefaultPrevented()&&(!l._default||l._default.apply(p.pop(),c)===!1)&&M(e)&&h&&e[q]&&!n.isWindow(e)){m=e[h],m&&(e[h]=null),n.event.triggered=q;try{e[q]()}catch(s){}n.event.triggered=void 0,m&&(e[h]=m)}return b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(n._data(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())a.rnamespace&&!a.rnamespace.test(g.namespace)||(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!=this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]","i"),va=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,wa=/\s*$/g,Aa=ca(d),Ba=Aa.appendChild(d.createElement("div"));function Ca(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function Da(a){return a.type=(null!==n.find.attr(a,"type"))+"/"+a.type,a}function Ea(a){var b=ya.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Fa(a,b){if(1===b.nodeType&&n.hasData(a)){var c,d,e,f=n._data(a),g=n._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)n.event.add(b,c,h[c][d])}g.data&&(g.data=n.extend({},g.data))}}function Ga(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!l.noCloneEvent&&b[n.expando]){e=n._data(b);for(d in e.events)n.removeEvent(b,d,e.handle);b.removeAttribute(n.expando)}"script"===c&&b.text!==a.text?(Da(b).text=a.text,Ea(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),l.html5Clone&&a.innerHTML&&!n.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&Z.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:"input"!==c&&"textarea"!==c||(b.defaultValue=a.defaultValue)}}function Ha(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&xa.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),Ha(f,b,c,d)});if(o&&(k=ja(b,a[0].ownerDocument,!1,a,d),e=k.firstChild,1===k.childNodes.length&&(k=e),e||d)){for(i=n.map(ea(k,"script"),Da),h=i.length;o>m;m++)g=k,m!==p&&(g=n.clone(g,!0,!0),h&&n.merge(i,ea(g,"script"))),c.call(a[m],g,m);if(h)for(j=i[i.length-1].ownerDocument,n.map(i,Ea),m=0;h>m;m++)g=i[m],_.test(g.type||"")&&!n._data(g,"globalEval")&&n.contains(j,g)&&(g.src?n._evalUrl&&n._evalUrl(g.src):n.globalEval((g.text||g.textContent||g.innerHTML||"").replace(za,"")));k=e=null}return a}function Ia(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(ea(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&fa(ea(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(va,"<$1>")},clone:function(a,b,c){var d,e,f,g,h,i=n.contains(a.ownerDocument,a);if(l.html5Clone||n.isXMLDoc(a)||!ua.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(Ba.innerHTML=a.outerHTML,Ba.removeChild(f=Ba.firstChild)),!(l.noCloneEvent&&l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(d=ea(f),h=ea(a),g=0;null!=(e=h[g]);++g)d[g]&&Ga(e,d[g]);if(b)if(c)for(h=h||ea(a),d=d||ea(f),g=0;null!=(e=h[g]);g++)Fa(e,d[g]);else Fa(a,f);return d=ea(f,"script"),d.length>0&&fa(d,!i&&ea(a,"script")),d=h=e=null,f},cleanData:function(a,b){for(var d,e,f,g,h=0,i=n.expando,j=n.cache,k=l.attributes,m=n.event.special;null!=(d=a[h]);h++)if((b||M(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)m[e]?n.event.remove(d,e):n.removeEvent(d,e,g.handle);j[f]&&(delete j[f],k||"undefined"==typeof d.removeAttribute?d[i]=void 0:d.removeAttribute(i),c.push(f))}}}),n.fn.extend({domManip:Ha,detach:function(a){return Ia(this,a,!0)},remove:function(a){return Ia(this,a)},text:function(a){return Y(this,function(a){return void 0===a?n.text(this):this.empty().append((this[0]&&this[0].ownerDocument||d).createTextNode(a))},null,a,arguments.length)},append:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.appendChild(a)}})},prepend:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&n.cleanData(ea(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&n.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return Y(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(ta,""):void 0;if("string"==typeof a&&!wa.test(a)&&(l.htmlSerialize||!ua.test(a))&&(l.leadingWhitespace||!aa.test(a))&&!da[($.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ea(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ha(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(ea(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=0,e=[],f=n(a),h=f.length-1;h>=d;d++)c=d===h?this:this.clone(!0),n(f[d])[b](c),g.apply(e,c.get());return this.pushStack(e)}});var Ja,Ka={HTML:"block",BODY:"block"};function La(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function Ma(a){var b=d,c=Ka[a];return c||(c=La(a,b),"none"!==c&&c||(Ja=(Ja||n("' + ; + }, + placeholder : function(image, icon) { + var + html = '' + ; + if(icon) { + html += ''; + } + if(image) { + html += '

'; + } + return html; + } + }, + + // NOT YET IMPLEMENTED + api : true, + onPause : function() {}, + onPlay : function() {}, + onStop : function() {} + +}; + + + +})( jQuery, window, document ); diff --git a/semantic/components/embed.min.css b/semantic/components/embed.min.css new file mode 100755 index 0000000..92e4556 --- /dev/null +++ b/semantic/components/embed.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.embed{position:relative;max-width:100%;height:0;overflow:hidden;background:#dcddde;padding-bottom:56.25%}.ui.embed embed,.ui.embed iframe,.ui.embed object{position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0}.ui.embed>.embed{display:none}.ui.embed>.placeholder{position:absolute;cursor:pointer;top:0;left:0;display:block;width:100%;height:100%;background-color:radial-gradient(transparent 45%,rgba(0,0,0,.3))}.ui.embed>.icon{cursor:pointer;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.ui.embed>.icon:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;content:'';background:-webkit-radial-gradient(transparent 45%,rgba(0,0,0,.3));background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:.5;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.ui.embed>.icon:before{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);color:#fff;font-size:6rem;text-shadow:0 2px 10px rgba(34,36,38,.2);-webkit-transition:opacity .5s ease,color .5s ease;transition:opacity .5s ease,color .5s ease;z-index:10}.ui.embed .icon:hover:after{background:-webkit-radial-gradient(transparent 45%,rgba(0,0,0,.3));background:radial-gradient(transparent 45%,rgba(0,0,0,.3));opacity:1}.ui.embed .icon:hover:before{color:#fff}.ui.active.embed>.icon,.ui.active.embed>.placeholder{display:none}.ui.active.embed>.embed{display:block}.ui.square.embed{padding-bottom:100%}.ui[class*="4:3"].embed{padding-bottom:75%}.ui[class*="16:9"].embed{padding-bottom:56.25%}.ui[class*="21:9"].embed{padding-bottom:42.85714286%} \ No newline at end of file diff --git a/semantic/components/embed.min.js b/semantic/components/embed.min.js new file mode 100755 index 0000000..7cf4b6d --- /dev/null +++ b/semantic/components/embed.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,n,o,r){"use strict";e.fn.embed=function(o){var t,a=e(this),i=a.selector||"",c=(new Date).getTime(),l=[],d=arguments[0],u="string"==typeof d,s=[].slice.call(arguments,1);return a.each(function(){var m,p=e.isPlainObject(o)?e.extend(!0,{},e.fn.embed.settings,o):e.extend({},e.fn.embed.settings),f=p.selector,h=p.className,b=p.sources,g=p.error,v=p.metadata,y=p.namespace,w=p.templates,C="."+y,P="module-"+y,U=(e(n),e(this)),E=U.find(f.placeholder),S=U.find(f.icon),T=U.find(f.embed),j=this,A=U.data(P);m={initialize:function(){m.debug("Initializing embed"),m.determine.autoplay(),m.create(),m.bind.events(),m.instantiate()},instantiate:function(){m.verbose("Storing instance of module",m),A=m,U.data(P,m)},destroy:function(){m.verbose("Destroying previous instance of embed"),m.reset(),U.removeData(P).off(C)},refresh:function(){m.verbose("Refreshing selector cache"),E=U.find(f.placeholder),S=U.find(f.icon),T=U.find(f.embed)},bind:{events:function(){m.has.placeholder()&&(m.debug("Adding placeholder events"),U.on("click"+C,f.placeholder,m.createAndShow).on("click"+C,f.icon,m.createAndShow))}},create:function(){var e=m.get.placeholder();e?m.createPlaceholder():m.createAndShow()},createPlaceholder:function(e){{var n=m.get.icon(),o=m.get.url();m.generate.embed(o)}e=e||m.get.placeholder(),U.html(w.placeholder(e,n)),m.debug("Creating placeholder for embed",e,n)},createEmbed:function(n){m.refresh(),n=n||m.get.url(),T=e("

").addClass(h.embed).html(m.generate.embed(n)).appendTo(U),p.onCreate.call(j,n),m.debug("Creating embed object",T)},createAndShow:function(){m.createEmbed(),m.show()},change:function(e,n,o){m.debug("Changing video to ",e,n,o),U.data(v.source,e).data(v.id,n).data(v.url,o),m.create()},reset:function(){m.debug("Clearing embed and showing placeholder"),m.remove.active(),m.remove.embed(),m.showPlaceholder(),p.onReset.call(j)},show:function(){m.debug("Showing embed"),m.set.active(),p.onDisplay.call(j)},hide:function(){m.debug("Hiding embed"),m.showPlaceholder()},showPlaceholder:function(){m.debug("Showing placeholder image"),m.remove.active(),p.onPlaceholderDisplay.call(j)},get:{id:function(){return p.id||U.data(v.id)},placeholder:function(){return p.placeholder||U.data(v.placeholder)},icon:function(){return p.icon?p.icon:U.data(v.icon)!==r?U.data(v.icon):m.determine.icon()},source:function(e){return p.source?p.source:U.data(v.source)!==r?U.data(v.source):m.determine.source()},type:function(){var e=m.get.source();return b[e]!==r?b[e].type:!1},url:function(){return p.url?p.url:U.data(v.url)!==r?U.data(v.url):m.determine.url()}},determine:{autoplay:function(){m.should.autoplay()&&(p.autoplay=!0)},source:function(n){var o=!1;return n=n||m.get.url(),n&&e.each(b,function(e,r){return-1!==n.search(r.domain)?(o=e,!1):void 0}),o},icon:function(){var e=m.get.source();return b[e]!==r?b[e].icon:!1},url:function(){var e,n=p.id||U.data(v.id),o=p.source||U.data(v.source);return e=b[o]!==r?b[o].url.replace("{id}",n):!1,e&&U.data(v.url,e),e}},set:{active:function(){U.addClass(h.active)}},remove:{active:function(){U.removeClass(h.active)},embed:function(){T.empty()}},encode:{parameters:function(e){var n,o=[];for(n in e)o.push(encodeURIComponent(n)+"="+encodeURIComponent(e[n]));return o.join("&")}},generate:{embed:function(e){m.debug("Generating embed html");var n,o,r=m.get.source();return e=m.get.url(e),e?(o=m.generate.parameters(r),n=w.iframe(e,o)):m.error(g.noURL,U),n},parameters:function(n,o){var t=b[n]&&b[n].parameters!==r?b[n].parameters(p):{};return o=o||p.parameters,o&&(t=e.extend({},t,o)),t=p.onEmbed(t),m.encode.parameters(t)}},has:{placeholder:function(){return p.placeholder||U.data(v.placeholder)}},should:{autoplay:function(){return"auto"===p.autoplay?p.placeholder||U.data(v.placeholder)!==r:p.autoplay}},is:{video:function(){return"video"==m.get.type()}},setting:function(n,o){if(m.debug("Changing setting",n,o),e.isPlainObject(n))e.extend(!0,p,n);else{if(o===r)return p[n];p[n]=o}},internal:function(n,o){if(e.isPlainObject(n))e.extend(!0,m,n);else{if(o===r)return m[n];m[n]=o}},debug:function(){p.debug&&(p.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,p.name+":"),m.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),m.verbose.apply(console,arguments)))},error:function(){m.error=Function.prototype.bind.call(console.error,console,p.name+":"),m.error.apply(console,arguments)},performance:{log:function(e){var n,o,r;p.performance&&(n=(new Date).getTime(),r=c||n,o=n-r,c=n,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:j,"Execution Time":o})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,500)},display:function(){var n=p.name+":",o=0;c=!1,clearTimeout(m.performance.timer),e.each(l,function(e,n){o+=n["Execution Time"]}),n+=" "+o+"ms",i&&(n+=" '"+i+"'"),a.length>1&&(n+=" ("+a.length+")"),(console.group!==r||console.table!==r)&&l.length>0&&(console.groupCollapsed(n),console.table?console.table(l):e.each(l,function(e,n){console.log(n.Name+": "+n["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(n,o,a){var i,c,l,d=A;return o=o||s,a=j||a,"string"==typeof n&&d!==r&&(n=n.split(/[\. ]/),i=n.length-1,e.each(n,function(o,t){var a=o!=i?t+n[o+1].charAt(0).toUpperCase()+n[o+1].slice(1):n;if(e.isPlainObject(d[a])&&o!=i)d=d[a];else{if(d[a]!==r)return c=d[a],!1;if(!e.isPlainObject(d[t])||o==i)return d[t]!==r?(c=d[t],!1):(m.error(g.method,n),!1);d=d[t]}})),e.isFunction(c)?l=c.apply(a,o):c!==r&&(l=c),e.isArray(t)?t.push(l):t!==r?t=[t,l]:l!==r&&(t=l),c}},u?(A===r&&m.initialize(),m.invoke(d)):(A!==r&&A.invoke("destroy"),m.initialize())}),t!==r?t:this},e.fn.embed.settings={name:"Embed",namespace:"embed",debug:!1,verbose:!1,performance:!0,icon:!1,source:!1,url:!1,id:!1,autoplay:"auto",color:"#444444",hd:!0,brandedUI:!1,parameters:!1,onDisplay:function(){},onPlaceholderDisplay:function(){},onReset:function(){},onCreate:function(e){},onEmbed:function(e){return e},metadata:{id:"id",icon:"icon",placeholder:"placeholder",source:"source",url:"url"},error:{noURL:"No URL specified",method:"The method you called is not defined"},className:{active:"active",embed:"embed"},selector:{embed:".embed",placeholder:".placeholder",icon:".icon"},sources:{youtube:{name:"youtube",type:"video",icon:"video play",domain:"youtube.com",url:"//www.youtube.com/embed/{id}",parameters:function(e){return{autohide:!e.brandedUI,autoplay:e.autoplay,color:e.colors||r,hq:e.hd,jsapi:e.api,modestbranding:!e.brandedUI}}},vimeo:{name:"vimeo",type:"video",icon:"video play",domain:"vimeo.com",url:"//player.vimeo.com/video/{id}",parameters:function(e){return{api:e.api,autoplay:e.autoplay,byline:e.brandedUI,color:e.colors||r,portrait:e.brandedUI,title:e.brandedUI}}}},templates:{iframe:function(e,n){return''},placeholder:function(e,n){var o="";return n&&(o+=''),e&&(o+='

'),o}},api:!0,onPause:function(){},onPlay:function(){},onStop:function(){}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/feed.css b/semantic/components/feed.css new file mode 100755 index 0000000..e669c10 --- /dev/null +++ b/semantic/components/feed.css @@ -0,0 +1,301 @@ +/*! + * # Semantic UI 2.1.7 - Feed + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Activity Feed +*******************************/ + +.ui.feed { + margin: 1em 0em; +} +.ui.feed:first-child { + margin-top: 0em; +} +.ui.feed:last-child { + margin-bottom: 0em; +} + + +/******************************* + Content +*******************************/ + + +/* Event */ +.ui.feed > .event { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + padding: 0.21428571rem 0em; + margin: 0em; + background: none; + border-top: none; +} +.ui.feed > .event:first-child { + border-top: 0px; + padding-top: 0em; +} +.ui.feed > .event:last-child { + padding-bottom: 0em; +} + +/* Event Label */ +.ui.feed > .event > .label { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 2.5em; + height: auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + text-align: left; +} +.ui.feed > .event > .label .icon { + opacity: 1; + font-size: 1.5em; + width: 100%; + padding: 0.25em; + background: none; + border: none; + border-radius: none; + color: rgba(0, 0, 0, 0.6); +} +.ui.feed > .event > .label img { + width: 100%; + height: auto; + border-radius: 500rem; +} +.ui.feed > .event > .label + .content { + margin: 0.5em 0em 0.35714286em 1.14285714em; +} + +/*-------------- + Content +---------------*/ + + +/* Content */ +.ui.feed > .event > .content { + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + text-align: left; + word-wrap: break-word; +} +.ui.feed > .event:last-child > .content { + padding-bottom: 0em; +} + +/* Link */ +.ui.feed > .event > .content a { + cursor: pointer; +} + +/*-------------- + Date +---------------*/ + +.ui.feed > .event > .content .date { + margin: -0.5rem 0em 0em; + padding: 0em; + font-weight: normal; + font-size: 1em; + font-style: normal; + color: rgba(0, 0, 0, 0.4); +} + +/*-------------- + Summary +---------------*/ + +.ui.feed > .event > .content .summary { + margin: 0em; + font-size: 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); +} + +/* Summary Image */ +.ui.feed > .event > .content .summary img { + display: inline-block; + width: auto; + height: 10em; + margin: -0.25em 0.25em 0em 0em; + border-radius: 0.25em; + vertical-align: middle; +} + +/*-------------- + User +---------------*/ + +.ui.feed > .event > .content .user { + display: inline-block; + font-weight: bold; + margin-right: 0em; + vertical-align: baseline; +} +.ui.feed > .event > .content .user img { + margin: -0.25em 0.25em 0em 0em; + width: auto; + height: 10em; + vertical-align: middle; +} + +/*-------------- + Inline Date +---------------*/ + + +/* Date inside Summary */ +.ui.feed > .event > .content .summary > .date { + display: inline-block; + float: none; + font-weight: normal; + font-size: 0.85714286em; + font-style: normal; + margin: 0em 0em 0em 0.5em; + padding: 0em; + color: rgba(0, 0, 0, 0.4); +} + +/*-------------- + Extra Summary +---------------*/ + +.ui.feed > .event > .content .extra { + margin: 0.5em 0em 0em; + background: none; + padding: 0em; + color: rgba(0, 0, 0, 0.87); +} + +/* Images */ +.ui.feed > .event > .content .extra.images img { + display: inline-block; + margin: 0em 0.25em 0em 0em; + width: 6em; +} + +/* Text */ +.ui.feed > .event > .content .extra.text { + padding: 0em; + border-left: none; + font-size: 1em; + max-width: 500px; + line-height: 1.4285em; +} + +/*-------------- + Meta +---------------*/ + +.ui.feed > .event > .content .meta { + display: inline-block; + font-size: 0.85714286em; + margin: 0.5em 0em 0em; + background: none; + border: none; + border-radius: 0; + box-shadow: none; + padding: 0em; + color: rgba(0, 0, 0, 0.6); +} +.ui.feed > .event > .content .meta > * { + position: relative; + margin-left: 0.75em; +} +.ui.feed > .event > .content .meta > *:after { + content: ''; + color: rgba(0, 0, 0, 0.2); + top: 0em; + left: -1em; + opacity: 1; + position: absolute; + vertical-align: top; +} +.ui.feed > .event > .content .meta .like { + color: ''; + -webkit-transition: 0.2s color ease; + transition: 0.2s color ease; +} +.ui.feed > .event > .content .meta .like:hover .icon { + color: #ff2733; +} +.ui.feed > .event > .content .meta .active.like .icon { + color: #ef404a; +} + +/* First element */ +.ui.feed > .event > .content .meta > :first-child { + margin-left: 0em; +} +.ui.feed > .event > .content .meta > :first-child::after { + display: none; +} + +/* Action */ +.ui.feed > .event > .content .meta a, +.ui.feed > .event > .content .meta > .icon { + cursor: pointer; + opacity: 1; + color: rgba(0, 0, 0, 0.5); + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} +.ui.feed > .event > .content .meta a:hover, +.ui.feed > .event > .content .meta a:hover .icon, +.ui.feed > .event > .content .meta > .icon:hover { + color: rgba(0, 0, 0, 0.95); +} + + +/******************************* + Variations +*******************************/ + +.ui.small.feed { + font-size: 0.92857143rem; +} +.ui.feed { + font-size: 1rem; +} +.ui.large.feed { + font-size: 1.14285714rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/feed.min.css b/semantic/components/feed.min.css new file mode 100755 index 0000000..4eab97f --- /dev/null +++ b/semantic/components/feed.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Feed + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.feed{margin:1em 0}.ui.feed:first-child{margin-top:0}.ui.feed:last-child{margin-bottom:0}.ui.feed>.event{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;padding:.21428571rem 0;margin:0;background:0 0;border-top:none}.ui.feed>.event:first-child{border-top:0;padding-top:0}.ui.feed>.event:last-child{padding-bottom:0}.ui.feed>.event>.label{display:block;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:2.5em;height:auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;text-align:left}.ui.feed>.event>.label .icon{opacity:1;font-size:1.5em;width:100%;padding:.25em;background:0 0;border:none;border-radius:none;color:rgba(0,0,0,.6)}.ui.feed>.event>.label img{width:100%;height:auto;border-radius:500rem}.ui.feed>.event>.label+.content{margin:.5em 0 .35714286em 1.14285714em}.ui.feed>.event>.content{display:block;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;text-align:left;word-wrap:break-word}.ui.feed>.event:last-child>.content{padding-bottom:0}.ui.feed>.event>.content a{cursor:pointer}.ui.feed>.event>.content .date{margin:-.5rem 0 0;padding:0;font-weight:400;font-size:1em;font-style:normal;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .summary{margin:0;font-size:1em;font-weight:700;color:rgba(0,0,0,.87)}.ui.feed>.event>.content .summary img{display:inline-block;width:auto;height:10em;margin:-.25em .25em 0 0;border-radius:.25em;vertical-align:middle}.ui.feed>.event>.content .user{display:inline-block;font-weight:700;margin-right:0;vertical-align:baseline}.ui.feed>.event>.content .user img{margin:-.25em .25em 0 0;width:auto;height:10em;vertical-align:middle}.ui.feed>.event>.content .summary>.date{display:inline-block;float:none;font-weight:400;font-size:.85714286em;font-style:normal;margin:0 0 0 .5em;padding:0;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .extra{margin:.5em 0 0;background:0 0;padding:0;color:rgba(0,0,0,.87)}.ui.feed>.event>.content .extra.images img{display:inline-block;margin:0 .25em 0 0;width:6em}.ui.feed>.event>.content .extra.text{padding:0;border-left:none;font-size:1em;max-width:500px;line-height:1.4285em}.ui.feed>.event>.content .meta{display:inline-block;font-size:.85714286em;margin:.5em 0 0;background:0 0;border:none;border-radius:0;box-shadow:none;padding:0;color:rgba(0,0,0,.6)}.ui.feed>.event>.content .meta>*{position:relative;margin-left:.75em}.ui.feed>.event>.content .meta>:after{content:'';color:rgba(0,0,0,.2);top:0;left:-1em;opacity:1;position:absolute;vertical-align:top}.ui.feed>.event>.content .meta .like{color:'';-webkit-transition:.2s color ease;transition:.2s color ease}.ui.feed>.event>.content .meta .like:hover .icon{color:#ff2733}.ui.feed>.event>.content .meta .active.like .icon{color:#ef404a}.ui.feed>.event>.content .meta>:first-child{margin-left:0}.ui.feed>.event>.content .meta>:first-child::after{display:none}.ui.feed>.event>.content .meta a,.ui.feed>.event>.content .meta>.icon{cursor:pointer;opacity:1;color:rgba(0,0,0,.5);-webkit-transition:color .1s ease;transition:color .1s ease}.ui.feed>.event>.content .meta a:hover,.ui.feed>.event>.content .meta a:hover .icon,.ui.feed>.event>.content .meta>.icon:hover{color:rgba(0,0,0,.95)}.ui.small.feed{font-size:.92857143rem}.ui.feed{font-size:1rem}.ui.large.feed{font-size:1.14285714rem} \ No newline at end of file diff --git a/semantic/components/flag.css b/semantic/components/flag.css new file mode 100755 index 0000000..950a5b9 --- /dev/null +++ b/semantic/components/flag.css @@ -0,0 +1,1032 @@ +/*! + * # Semantic UI 2.1.7 - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + width: 16px; + height: 11px; + line-height: 11px; + vertical-align: baseline; + margin: 0em 0.5em 0em 0em; + text-decoration: inherit; + speak: none; + font-smoothing: antialiased; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* Sprite */ +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url("../themes/default/assets/images/flags.png") no-repeat -108px -1976px; + width: 16px; + height: 11px; +} + +/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */ + + +/******************************* + Theme Overrides +*******************************/ + +i.flag.ad:before, +i.flag.andorra:before { + background-position: 0px 0px; +} +i.flag.ae:before, +i.flag.united.arab.emirates:before, +i.flag.uae:before { + background-position: 0px -26px; +} +i.flag.af:before, +i.flag.afghanistan:before { + background-position: 0px -52px; +} +i.flag.ag:before, +i.flag.antigua:before { + background-position: 0px -78px; +} +i.flag.ai:before, +i.flag.anguilla:before { + background-position: 0px -104px; +} +i.flag.al:before, +i.flag.albania:before { + background-position: 0px -130px; +} +i.flag.am:before, +i.flag.armenia:before { + background-position: 0px -156px; +} +i.flag.an:before, +i.flag.netherlands.antilles:before { + background-position: 0px -182px; +} +i.flag.ao:before, +i.flag.angola:before { + background-position: 0px -208px; +} +i.flag.ar:before, +i.flag.argentina:before { + background-position: 0px -234px; +} +i.flag.as:before, +i.flag.american.samoa:before { + background-position: 0px -260px; +} +i.flag.at:before, +i.flag.austria:before { + background-position: 0px -286px; +} +i.flag.au:before, +i.flag.australia:before { + background-position: 0px -312px; +} +i.flag.aw:before, +i.flag.aruba:before { + background-position: 0px -338px; +} +i.flag.ax:before, +i.flag.aland.islands:before { + background-position: 0px -364px; +} +i.flag.az:before, +i.flag.azerbaijan:before { + background-position: 0px -390px; +} +i.flag.ba:before, +i.flag.bosnia:before { + background-position: 0px -416px; +} +i.flag.bb:before, +i.flag.barbados:before { + background-position: 0px -442px; +} +i.flag.bd:before, +i.flag.bangladesh:before { + background-position: 0px -468px; +} +i.flag.be:before, +i.flag.belgium:before { + background-position: 0px -494px; +} +i.flag.bf:before, +i.flag.burkina.faso:before { + background-position: 0px -520px; +} +i.flag.bg:before, +i.flag.bulgaria:before { + background-position: 0px -546px; +} +i.flag.bh:before, +i.flag.bahrain:before { + background-position: 0px -572px; +} +i.flag.bi:before, +i.flag.burundi:before { + background-position: 0px -598px; +} +i.flag.bj:before, +i.flag.benin:before { + background-position: 0px -624px; +} +i.flag.bm:before, +i.flag.bermuda:before { + background-position: 0px -650px; +} +i.flag.bn:before, +i.flag.brunei:before { + background-position: 0px -676px; +} +i.flag.bo:before, +i.flag.bolivia:before { + background-position: 0px -702px; +} +i.flag.br:before, +i.flag.brazil:before { + background-position: 0px -728px; +} +i.flag.bs:before, +i.flag.bahamas:before { + background-position: 0px -754px; +} +i.flag.bt:before, +i.flag.bhutan:before { + background-position: 0px -780px; +} +i.flag.bv:before, +i.flag.bouvet.island:before { + background-position: 0px -806px; +} +i.flag.bw:before, +i.flag.botswana:before { + background-position: 0px -832px; +} +i.flag.by:before, +i.flag.belarus:before { + background-position: 0px -858px; +} +i.flag.bz:before, +i.flag.belize:before { + background-position: 0px -884px; +} +i.flag.ca:before, +i.flag.canada:before { + background-position: 0px -910px; +} +i.flag.cc:before, +i.flag.cocos.islands:before { + background-position: 0px -962px; +} +i.flag.cd:before, +i.flag.congo:before { + background-position: 0px -988px; +} +i.flag.cf:before, +i.flag.central.african.republic:before { + background-position: 0px -1014px; +} +i.flag.cg:before, +i.flag.congo.brazzaville:before { + background-position: 0px -1040px; +} +i.flag.ch:before, +i.flag.switzerland:before { + background-position: 0px -1066px; +} +i.flag.ci:before, +i.flag.cote.divoire:before { + background-position: 0px -1092px; +} +i.flag.ck:before, +i.flag.cook.islands:before { + background-position: 0px -1118px; +} +i.flag.cl:before, +i.flag.chile:before { + background-position: 0px -1144px; +} +i.flag.cm:before, +i.flag.cameroon:before { + background-position: 0px -1170px; +} +i.flag.cn:before, +i.flag.china:before { + background-position: 0px -1196px; +} +i.flag.co:before, +i.flag.colombia:before { + background-position: 0px -1222px; +} +i.flag.cr:before, +i.flag.costa.rica:before { + background-position: 0px -1248px; +} +i.flag.cs:before, +i.flag.serbia:before { + background-position: 0px -1274px; +} +i.flag.cu:before, +i.flag.cuba:before { + background-position: 0px -1300px; +} +i.flag.cv:before, +i.flag.cape.verde:before { + background-position: 0px -1326px; +} +i.flag.cx:before, +i.flag.christmas.island:before { + background-position: 0px -1352px; +} +i.flag.cy:before, +i.flag.cyprus:before { + background-position: 0px -1378px; +} +i.flag.cz:before, +i.flag.czech.republic:before { + background-position: 0px -1404px; +} +i.flag.de:before, +i.flag.germany:before { + background-position: 0px -1430px; +} +i.flag.dj:before, +i.flag.djibouti:before { + background-position: 0px -1456px; +} +i.flag.dk:before, +i.flag.denmark:before { + background-position: 0px -1482px; +} +i.flag.dm:before, +i.flag.dominica:before { + background-position: 0px -1508px; +} +i.flag.do:before, +i.flag.dominican.republic:before { + background-position: 0px -1534px; +} +i.flag.dz:before, +i.flag.algeria:before { + background-position: 0px -1560px; +} +i.flag.ec:before, +i.flag.ecuador:before { + background-position: 0px -1586px; +} +i.flag.ee:before, +i.flag.estonia:before { + background-position: 0px -1612px; +} +i.flag.eg:before, +i.flag.egypt:before { + background-position: 0px -1638px; +} +i.flag.eh:before, +i.flag.western.sahara:before { + background-position: 0px -1664px; +} +i.flag.er:before, +i.flag.eritrea:before { + background-position: 0px -1716px; +} +i.flag.es:before, +i.flag.spain:before { + background-position: 0px -1742px; +} +i.flag.et:before, +i.flag.ethiopia:before { + background-position: 0px -1768px; +} +i.flag.eu:before, +i.flag.european.union:before { + background-position: 0px -1794px; +} +i.flag.fi:before, +i.flag.finland:before { + background-position: 0px -1846px; +} +i.flag.fj:before, +i.flag.fiji:before { + background-position: 0px -1872px; +} +i.flag.fk:before, +i.flag.falkland.islands:before { + background-position: 0px -1898px; +} +i.flag.fm:before, +i.flag.micronesia:before { + background-position: 0px -1924px; +} +i.flag.fo:before, +i.flag.faroe.islands:before { + background-position: 0px -1950px; +} +i.flag.fr:before, +i.flag.france:before { + background-position: 0px -1976px; +} +i.flag.ga:before, +i.flag.gabon:before { + background-position: -36px 0px; +} +i.flag.gb:before, +i.flag.united.kingdom:before { + background-position: -36px -26px; +} +i.flag.gd:before, +i.flag.grenada:before { + background-position: -36px -52px; +} +i.flag.ge:before, +i.flag.georgia:before { + background-position: -36px -78px; +} +i.flag.gf:before, +i.flag.french.guiana:before { + background-position: -36px -104px; +} +i.flag.gh:before, +i.flag.ghana:before { + background-position: -36px -130px; +} +i.flag.gi:before, +i.flag.gibraltar:before { + background-position: -36px -156px; +} +i.flag.gl:before, +i.flag.greenland:before { + background-position: -36px -182px; +} +i.flag.gm:before, +i.flag.gambia:before { + background-position: -36px -208px; +} +i.flag.gn:before, +i.flag.guinea:before { + background-position: -36px -234px; +} +i.flag.gp:before, +i.flag.guadeloupe:before { + background-position: -36px -260px; +} +i.flag.gq:before, +i.flag.equatorial.guinea:before { + background-position: -36px -286px; +} +i.flag.gr:before, +i.flag.greece:before { + background-position: -36px -312px; +} +i.flag.gs:before, +i.flag.sandwich.islands:before { + background-position: -36px -338px; +} +i.flag.gt:before, +i.flag.guatemala:before { + background-position: -36px -364px; +} +i.flag.gu:before, +i.flag.guam:before { + background-position: -36px -390px; +} +i.flag.gw:before, +i.flag.guinea-bissau:before { + background-position: -36px -416px; +} +i.flag.gy:before, +i.flag.guyana:before { + background-position: -36px -442px; +} +i.flag.hk:before, +i.flag.hong.kong:before { + background-position: -36px -468px; +} +i.flag.hm:before, +i.flag.heard.island:before { + background-position: -36px -494px; +} +i.flag.hn:before, +i.flag.honduras:before { + background-position: -36px -520px; +} +i.flag.hr:before, +i.flag.croatia:before { + background-position: -36px -546px; +} +i.flag.ht:before, +i.flag.haiti:before { + background-position: -36px -572px; +} +i.flag.hu:before, +i.flag.hungary:before { + background-position: -36px -598px; +} +i.flag.id:before, +i.flag.indonesia:before { + background-position: -36px -624px; +} +i.flag.ie:before, +i.flag.ireland:before { + background-position: -36px -650px; +} +i.flag.il:before, +i.flag.israel:before { + background-position: -36px -676px; +} +i.flag.in:before, +i.flag.india:before { + background-position: -36px -702px; +} +i.flag.io:before, +i.flag.indian.ocean.territory:before { + background-position: -36px -728px; +} +i.flag.iq:before, +i.flag.iraq:before { + background-position: -36px -754px; +} +i.flag.ir:before, +i.flag.iran:before { + background-position: -36px -780px; +} +i.flag.is:before, +i.flag.iceland:before { + background-position: -36px -806px; +} +i.flag.it:before, +i.flag.italy:before { + background-position: -36px -832px; +} +i.flag.jm:before, +i.flag.jamaica:before { + background-position: -36px -858px; +} +i.flag.jo:before, +i.flag.jordan:before { + background-position: -36px -884px; +} +i.flag.jp:before, +i.flag.japan:before { + background-position: -36px -910px; +} +i.flag.ke:before, +i.flag.kenya:before { + background-position: -36px -936px; +} +i.flag.kg:before, +i.flag.kyrgyzstan:before { + background-position: -36px -962px; +} +i.flag.kh:before, +i.flag.cambodia:before { + background-position: -36px -988px; +} +i.flag.ki:before, +i.flag.kiribati:before { + background-position: -36px -1014px; +} +i.flag.km:before, +i.flag.comoros:before { + background-position: -36px -1040px; +} +i.flag.kn:before, +i.flag.saint.kitts.and.nevis:before { + background-position: -36px -1066px; +} +i.flag.kp:before, +i.flag.north.korea:before { + background-position: -36px -1092px; +} +i.flag.kr:before, +i.flag.south.korea:before { + background-position: -36px -1118px; +} +i.flag.kw:before, +i.flag.kuwait:before { + background-position: -36px -1144px; +} +i.flag.ky:before, +i.flag.cayman.islands:before { + background-position: -36px -1170px; +} +i.flag.kz:before, +i.flag.kazakhstan:before { + background-position: -36px -1196px; +} +i.flag.la:before, +i.flag.laos:before { + background-position: -36px -1222px; +} +i.flag.lb:before, +i.flag.lebanon:before { + background-position: -36px -1248px; +} +i.flag.lc:before, +i.flag.saint.lucia:before { + background-position: -36px -1274px; +} +i.flag.li:before, +i.flag.liechtenstein:before { + background-position: -36px -1300px; +} +i.flag.lk:before, +i.flag.sri.lanka:before { + background-position: -36px -1326px; +} +i.flag.lr:before, +i.flag.liberia:before { + background-position: -36px -1352px; +} +i.flag.ls:before, +i.flag.lesotho:before { + background-position: -36px -1378px; +} +i.flag.lt:before, +i.flag.lithuania:before { + background-position: -36px -1404px; +} +i.flag.lu:before, +i.flag.luxembourg:before { + background-position: -36px -1430px; +} +i.flag.lv:before, +i.flag.latvia:before { + background-position: -36px -1456px; +} +i.flag.ly:before, +i.flag.libya:before { + background-position: -36px -1482px; +} +i.flag.ma:before, +i.flag.morocco:before { + background-position: -36px -1508px; +} +i.flag.mc:before, +i.flag.monaco:before { + background-position: -36px -1534px; +} +i.flag.md:before, +i.flag.moldova:before { + background-position: -36px -1560px; +} +i.flag.me:before, +i.flag.montenegro:before { + background-position: -36px -1586px; +} +i.flag.mg:before, +i.flag.madagascar:before { + background-position: -36px -1613px; +} +i.flag.mh:before, +i.flag.marshall.islands:before { + background-position: -36px -1639px; +} +i.flag.mk:before, +i.flag.macedonia:before { + background-position: -36px -1665px; +} +i.flag.ml:before, +i.flag.mali:before { + background-position: -36px -1691px; +} +i.flag.mm:before, +i.flag.myanmar:before, +i.flag.burma:before { + background-position: -36px -1717px; +} +i.flag.mn:before, +i.flag.mongolia:before { + background-position: -36px -1743px; +} +i.flag.mo:before, +i.flag.macau:before { + background-position: -36px -1769px; +} +i.flag.mp:before, +i.flag.northern.mariana.islands:before { + background-position: -36px -1795px; +} +i.flag.mq:before, +i.flag.martinique:before { + background-position: -36px -1821px; +} +i.flag.mr:before, +i.flag.mauritania:before { + background-position: -36px -1847px; +} +i.flag.ms:before, +i.flag.montserrat:before { + background-position: -36px -1873px; +} +i.flag.mt:before, +i.flag.malta:before { + background-position: -36px -1899px; +} +i.flag.mu:before, +i.flag.mauritius:before { + background-position: -36px -1925px; +} +i.flag.mv:before, +i.flag.maldives:before { + background-position: -36px -1951px; +} +i.flag.mw:before, +i.flag.malawi:before { + background-position: -36px -1977px; +} +i.flag.mx:before, +i.flag.mexico:before { + background-position: -72px 0px; +} +i.flag.my:before, +i.flag.malaysia:before { + background-position: -72px -26px; +} +i.flag.mz:before, +i.flag.mozambique:before { + background-position: -72px -52px; +} +i.flag.na:before, +i.flag.namibia:before { + background-position: -72px -78px; +} +i.flag.nc:before, +i.flag.new.caledonia:before { + background-position: -72px -104px; +} +i.flag.ne:before, +i.flag.niger:before { + background-position: -72px -130px; +} +i.flag.nf:before, +i.flag.norfolk.island:before { + background-position: -72px -156px; +} +i.flag.ng:before, +i.flag.nigeria:before { + background-position: -72px -182px; +} +i.flag.ni:before, +i.flag.nicaragua:before { + background-position: -72px -208px; +} +i.flag.nl:before, +i.flag.netherlands:before { + background-position: -72px -234px; +} +i.flag.no:before, +i.flag.norway:before { + background-position: -72px -260px; +} +i.flag.np:before, +i.flag.nepal:before { + background-position: -72px -286px; +} +i.flag.nr:before, +i.flag.nauru:before { + background-position: -72px -312px; +} +i.flag.nu:before, +i.flag.niue:before { + background-position: -72px -338px; +} +i.flag.nz:before, +i.flag.new.zealand:before { + background-position: -72px -364px; +} +i.flag.om:before, +i.flag.oman:before { + background-position: -72px -390px; +} +i.flag.pa:before, +i.flag.panama:before { + background-position: -72px -416px; +} +i.flag.pe:before, +i.flag.peru:before { + background-position: -72px -442px; +} +i.flag.pf:before, +i.flag.french.polynesia:before { + background-position: -72px -468px; +} +i.flag.pg:before, +i.flag.new.guinea:before { + background-position: -72px -494px; +} +i.flag.ph:before, +i.flag.philippines:before { + background-position: -72px -520px; +} +i.flag.pk:before, +i.flag.pakistan:before { + background-position: -72px -546px; +} +i.flag.pl:before, +i.flag.poland:before { + background-position: -72px -572px; +} +i.flag.pm:before, +i.flag.saint.pierre:before { + background-position: -72px -598px; +} +i.flag.pn:before, +i.flag.pitcairn.islands:before { + background-position: -72px -624px; +} +i.flag.pr:before, +i.flag.puerto.rico:before { + background-position: -72px -650px; +} +i.flag.ps:before, +i.flag.palestine:before { + background-position: -72px -676px; +} +i.flag.pt:before, +i.flag.portugal:before { + background-position: -72px -702px; +} +i.flag.pw:before, +i.flag.palau:before { + background-position: -72px -728px; +} +i.flag.py:before, +i.flag.paraguay:before { + background-position: -72px -754px; +} +i.flag.qa:before, +i.flag.qatar:before { + background-position: -72px -780px; +} +i.flag.re:before, +i.flag.reunion:before { + background-position: -72px -806px; +} +i.flag.ro:before, +i.flag.romania:before { + background-position: -72px -832px; +} +i.flag.rs:before, +i.flag.serbia:before { + background-position: -72px -858px; +} +i.flag.ru:before, +i.flag.russia:before { + background-position: -72px -884px; +} +i.flag.rw:before, +i.flag.rwanda:before { + background-position: -72px -910px; +} +i.flag.sa:before, +i.flag.saudi.arabia:before { + background-position: -72px -936px; +} +i.flag.sb:before, +i.flag.solomon.islands:before { + background-position: -72px -962px; +} +i.flag.sc:before, +i.flag.seychelles:before { + background-position: -72px -988px; +} +i.flag.gb.sct:before, +i.flag.scotland:before { + background-position: -72px -1014px; +} +i.flag.sd:before, +i.flag.sudan:before { + background-position: -72px -1040px; +} +i.flag.se:before, +i.flag.sweden:before { + background-position: -72px -1066px; +} +i.flag.sg:before, +i.flag.singapore:before { + background-position: -72px -1092px; +} +i.flag.sh:before, +i.flag.saint.helena:before { + background-position: -72px -1118px; +} +i.flag.si:before, +i.flag.slovenia:before { + background-position: -72px -1144px; +} +i.flag.sj:before, +i.flag.svalbard:before, +i.flag.jan.mayen:before { + background-position: -72px -1170px; +} +i.flag.sk:before, +i.flag.slovakia:before { + background-position: -72px -1196px; +} +i.flag.sl:before, +i.flag.sierra.leone:before { + background-position: -72px -1222px; +} +i.flag.sm:before, +i.flag.san.marino:before { + background-position: -72px -1248px; +} +i.flag.sn:before, +i.flag.senegal:before { + background-position: -72px -1274px; +} +i.flag.so:before, +i.flag.somalia:before { + background-position: -72px -1300px; +} +i.flag.sr:before, +i.flag.suriname:before { + background-position: -72px -1326px; +} +i.flag.st:before, +i.flag.sao.tome:before { + background-position: -72px -1352px; +} +i.flag.sv:before, +i.flag.el.salvador:before { + background-position: -72px -1378px; +} +i.flag.sy:before, +i.flag.syria:before { + background-position: -72px -1404px; +} +i.flag.sz:before, +i.flag.swaziland:before { + background-position: -72px -1430px; +} +i.flag.tc:before, +i.flag.caicos.islands:before { + background-position: -72px -1456px; +} +i.flag.td:before, +i.flag.chad:before { + background-position: -72px -1482px; +} +i.flag.tf:before, +i.flag.french.territories:before { + background-position: -72px -1508px; +} +i.flag.tg:before, +i.flag.togo:before { + background-position: -72px -1534px; +} +i.flag.th:before, +i.flag.thailand:before { + background-position: -72px -1560px; +} +i.flag.tj:before, +i.flag.tajikistan:before { + background-position: -72px -1586px; +} +i.flag.tk:before, +i.flag.tokelau:before { + background-position: -72px -1612px; +} +i.flag.tl:before, +i.flag.timorleste:before { + background-position: -72px -1638px; +} +i.flag.tm:before, +i.flag.turkmenistan:before { + background-position: -72px -1664px; +} +i.flag.tn:before, +i.flag.tunisia:before { + background-position: -72px -1690px; +} +i.flag.to:before, +i.flag.tonga:before { + background-position: -72px -1716px; +} +i.flag.tr:before, +i.flag.turkey:before { + background-position: -72px -1742px; +} +i.flag.tt:before, +i.flag.trinidad:before { + background-position: -72px -1768px; +} +i.flag.tv:before, +i.flag.tuvalu:before { + background-position: -72px -1794px; +} +i.flag.tw:before, +i.flag.taiwan:before { + background-position: -72px -1820px; +} +i.flag.tz:before, +i.flag.tanzania:before { + background-position: -72px -1846px; +} +i.flag.ua:before, +i.flag.ukraine:before { + background-position: -72px -1872px; +} +i.flag.ug:before, +i.flag.uganda:before { + background-position: -72px -1898px; +} +i.flag.um:before, +i.flag.us.minor.islands:before { + background-position: -72px -1924px; +} +i.flag.us:before, +i.flag.america:before, +i.flag.united.states:before { + background-position: -72px -1950px; +} +i.flag.uy:before, +i.flag.uruguay:before { + background-position: -72px -1976px; +} +i.flag.uz:before, +i.flag.uzbekistan:before { + background-position: -108px 0px; +} +i.flag.va:before, +i.flag.vatican.city:before { + background-position: -108px -26px; +} +i.flag.vc:before, +i.flag.saint.vincent:before { + background-position: -108px -52px; +} +i.flag.ve:before, +i.flag.venezuela:before { + background-position: -108px -78px; +} +i.flag.vg:before, +i.flag.british.virgin.islands:before { + background-position: -108px -104px; +} +i.flag.vi:before, +i.flag.us.virgin.islands:before { + background-position: -108px -130px; +} +i.flag.vn:before, +i.flag.vietnam:before { + background-position: -108px -156px; +} +i.flag.vu:before, +i.flag.vanuatu:before { + background-position: -108px -182px; +} +i.flag.gb.wls:before, +i.flag.wales:before { + background-position: -108px -208px; +} +i.flag.wf:before, +i.flag.wallis.and.futuna:before { + background-position: -108px -234px; +} +i.flag.ws:before, +i.flag.samoa:before { + background-position: -108px -260px; +} +i.flag.ye:before, +i.flag.yemen:before { + background-position: -108px -286px; +} +i.flag.yt:before, +i.flag.mayotte:before { + background-position: -108px -312px; +} +i.flag.za:before, +i.flag.south.africa:before { + background-position: -108px -338px; +} +i.flag.zm:before, +i.flag.zambia:before { + background-position: -108px -364px; +} +i.flag.zw:before, +i.flag.zimbabwe:before { + background-position: -108px -390px; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/flag.min.css b/semantic/components/flag.min.css new file mode 100755 index 0000000..27d417c --- /dev/null +++ b/semantic/components/flag.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */i.flag:not(.icon){display:inline-block;width:16px;height:11px;line-height:11px;vertical-align:baseline;margin:0 .5em 0 0;text-decoration:inherit;speak:none;font-smoothing:antialiased;-webkit-backface-visibility:hidden;backface-visibility:hidden}i.flag:not(.icon):before{display:inline-block;content:'';background:url(../themes/default/assets/images/flags.png) -108px -1976px no-repeat;width:16px;height:11px}i.flag.ad:before,i.flag.andorra:before{background-position:0 0}i.flag.ae:before,i.flag.uae:before,i.flag.united.arab.emirates:before{background-position:0 -26px}i.flag.af:before,i.flag.afghanistan:before{background-position:0 -52px}i.flag.ag:before,i.flag.antigua:before{background-position:0 -78px}i.flag.ai:before,i.flag.anguilla:before{background-position:0 -104px}i.flag.al:before,i.flag.albania:before{background-position:0 -130px}i.flag.am:before,i.flag.armenia:before{background-position:0 -156px}i.flag.an:before,i.flag.netherlands.antilles:before{background-position:0 -182px}i.flag.angola:before,i.flag.ao:before{background-position:0 -208px}i.flag.ar:before,i.flag.argentina:before{background-position:0 -234px}i.flag.american.samoa:before,i.flag.as:before{background-position:0 -260px}i.flag.at:before,i.flag.austria:before{background-position:0 -286px}i.flag.au:before,i.flag.australia:before{background-position:0 -312px}i.flag.aruba:before,i.flag.aw:before{background-position:0 -338px}i.flag.aland.islands:before,i.flag.ax:before{background-position:0 -364px}i.flag.az:before,i.flag.azerbaijan:before{background-position:0 -390px}i.flag.ba:before,i.flag.bosnia:before{background-position:0 -416px}i.flag.barbados:before,i.flag.bb:before{background-position:0 -442px}i.flag.bangladesh:before,i.flag.bd:before{background-position:0 -468px}i.flag.be:before,i.flag.belgium:before{background-position:0 -494px}i.flag.bf:before,i.flag.burkina.faso:before{background-position:0 -520px}i.flag.bg:before,i.flag.bulgaria:before{background-position:0 -546px}i.flag.bahrain:before,i.flag.bh:before{background-position:0 -572px}i.flag.bi:before,i.flag.burundi:before{background-position:0 -598px}i.flag.benin:before,i.flag.bj:before{background-position:0 -624px}i.flag.bermuda:before,i.flag.bm:before{background-position:0 -650px}i.flag.bn:before,i.flag.brunei:before{background-position:0 -676px}i.flag.bo:before,i.flag.bolivia:before{background-position:0 -702px}i.flag.br:before,i.flag.brazil:before{background-position:0 -728px}i.flag.bahamas:before,i.flag.bs:before{background-position:0 -754px}i.flag.bhutan:before,i.flag.bt:before{background-position:0 -780px}i.flag.bouvet.island:before,i.flag.bv:before{background-position:0 -806px}i.flag.botswana:before,i.flag.bw:before{background-position:0 -832px}i.flag.belarus:before,i.flag.by:before{background-position:0 -858px}i.flag.belize:before,i.flag.bz:before{background-position:0 -884px}i.flag.ca:before,i.flag.canada:before{background-position:0 -910px}i.flag.cc:before,i.flag.cocos.islands:before{background-position:0 -962px}i.flag.cd:before,i.flag.congo:before{background-position:0 -988px}i.flag.central.african.republic:before,i.flag.cf:before{background-position:0 -1014px}i.flag.cg:before,i.flag.congo.brazzaville:before{background-position:0 -1040px}i.flag.ch:before,i.flag.switzerland:before{background-position:0 -1066px}i.flag.ci:before,i.flag.cote.divoire:before{background-position:0 -1092px}i.flag.ck:before,i.flag.cook.islands:before{background-position:0 -1118px}i.flag.chile:before,i.flag.cl:before{background-position:0 -1144px}i.flag.cameroon:before,i.flag.cm:before{background-position:0 -1170px}i.flag.china:before,i.flag.cn:before{background-position:0 -1196px}i.flag.co:before,i.flag.colombia:before{background-position:0 -1222px}i.flag.costa.rica:before,i.flag.cr:before{background-position:0 -1248px}i.flag.cs:before,i.flag.serbia:before{background-position:0 -1274px}i.flag.cu:before,i.flag.cuba:before{background-position:0 -1300px}i.flag.cape.verde:before,i.flag.cv:before{background-position:0 -1326px}i.flag.christmas.island:before,i.flag.cx:before{background-position:0 -1352px}i.flag.cy:before,i.flag.cyprus:before{background-position:0 -1378px}i.flag.cz:before,i.flag.czech.republic:before{background-position:0 -1404px}i.flag.de:before,i.flag.germany:before{background-position:0 -1430px}i.flag.dj:before,i.flag.djibouti:before{background-position:0 -1456px}i.flag.denmark:before,i.flag.dk:before{background-position:0 -1482px}i.flag.dm:before,i.flag.dominica:before{background-position:0 -1508px}i.flag.do:before,i.flag.dominican.republic:before{background-position:0 -1534px}i.flag.algeria:before,i.flag.dz:before{background-position:0 -1560px}i.flag.ec:before,i.flag.ecuador:before{background-position:0 -1586px}i.flag.ee:before,i.flag.estonia:before{background-position:0 -1612px}i.flag.eg:before,i.flag.egypt:before{background-position:0 -1638px}i.flag.eh:before,i.flag.western.sahara:before{background-position:0 -1664px}i.flag.er:before,i.flag.eritrea:before{background-position:0 -1716px}i.flag.es:before,i.flag.spain:before{background-position:0 -1742px}i.flag.et:before,i.flag.ethiopia:before{background-position:0 -1768px}i.flag.eu:before,i.flag.european.union:before{background-position:0 -1794px}i.flag.fi:before,i.flag.finland:before{background-position:0 -1846px}i.flag.fiji:before,i.flag.fj:before{background-position:0 -1872px}i.flag.falkland.islands:before,i.flag.fk:before{background-position:0 -1898px}i.flag.fm:before,i.flag.micronesia:before{background-position:0 -1924px}i.flag.faroe.islands:before,i.flag.fo:before{background-position:0 -1950px}i.flag.fr:before,i.flag.france:before{background-position:0 -1976px}i.flag.ga:before,i.flag.gabon:before{background-position:-36px 0}i.flag.gb:before,i.flag.united.kingdom:before{background-position:-36px -26px}i.flag.gd:before,i.flag.grenada:before{background-position:-36px -52px}i.flag.ge:before,i.flag.georgia:before{background-position:-36px -78px}i.flag.french.guiana:before,i.flag.gf:before{background-position:-36px -104px}i.flag.gh:before,i.flag.ghana:before{background-position:-36px -130px}i.flag.gi:before,i.flag.gibraltar:before{background-position:-36px -156px}i.flag.gl:before,i.flag.greenland:before{background-position:-36px -182px}i.flag.gambia:before,i.flag.gm:before{background-position:-36px -208px}i.flag.gn:before,i.flag.guinea:before{background-position:-36px -234px}i.flag.gp:before,i.flag.guadeloupe:before{background-position:-36px -260px}i.flag.equatorial.guinea:before,i.flag.gq:before{background-position:-36px -286px}i.flag.gr:before,i.flag.greece:before{background-position:-36px -312px}i.flag.gs:before,i.flag.sandwich.islands:before{background-position:-36px -338px}i.flag.gt:before,i.flag.guatemala:before{background-position:-36px -364px}i.flag.gu:before,i.flag.guam:before{background-position:-36px -390px}i.flag.guinea-bissau:before,i.flag.gw:before{background-position:-36px -416px}i.flag.guyana:before,i.flag.gy:before{background-position:-36px -442px}i.flag.hk:before,i.flag.hong.kong:before{background-position:-36px -468px}i.flag.heard.island:before,i.flag.hm:before{background-position:-36px -494px}i.flag.hn:before,i.flag.honduras:before{background-position:-36px -520px}i.flag.croatia:before,i.flag.hr:before{background-position:-36px -546px}i.flag.haiti:before,i.flag.ht:before{background-position:-36px -572px}i.flag.hu:before,i.flag.hungary:before{background-position:-36px -598px}i.flag.id:before,i.flag.indonesia:before{background-position:-36px -624px}i.flag.ie:before,i.flag.ireland:before{background-position:-36px -650px}i.flag.il:before,i.flag.israel:before{background-position:-36px -676px}i.flag.in:before,i.flag.india:before{background-position:-36px -702px}i.flag.indian.ocean.territory:before,i.flag.io:before{background-position:-36px -728px}i.flag.iq:before,i.flag.iraq:before{background-position:-36px -754px}i.flag.ir:before,i.flag.iran:before{background-position:-36px -780px}i.flag.iceland:before,i.flag.is:before{background-position:-36px -806px}i.flag.it:before,i.flag.italy:before{background-position:-36px -832px}i.flag.jamaica:before,i.flag.jm:before{background-position:-36px -858px}i.flag.jo:before,i.flag.jordan:before{background-position:-36px -884px}i.flag.japan:before,i.flag.jp:before{background-position:-36px -910px}i.flag.ke:before,i.flag.kenya:before{background-position:-36px -936px}i.flag.kg:before,i.flag.kyrgyzstan:before{background-position:-36px -962px}i.flag.cambodia:before,i.flag.kh:before{background-position:-36px -988px}i.flag.ki:before,i.flag.kiribati:before{background-position:-36px -1014px}i.flag.comoros:before,i.flag.km:before{background-position:-36px -1040px}i.flag.kn:before,i.flag.saint.kitts.and.nevis:before{background-position:-36px -1066px}i.flag.kp:before,i.flag.north.korea:before{background-position:-36px -1092px}i.flag.kr:before,i.flag.south.korea:before{background-position:-36px -1118px}i.flag.kuwait:before,i.flag.kw:before{background-position:-36px -1144px}i.flag.cayman.islands:before,i.flag.ky:before{background-position:-36px -1170px}i.flag.kazakhstan:before,i.flag.kz:before{background-position:-36px -1196px}i.flag.la:before,i.flag.laos:before{background-position:-36px -1222px}i.flag.lb:before,i.flag.lebanon:before{background-position:-36px -1248px}i.flag.lc:before,i.flag.saint.lucia:before{background-position:-36px -1274px}i.flag.li:before,i.flag.liechtenstein:before{background-position:-36px -1300px}i.flag.lk:before,i.flag.sri.lanka:before{background-position:-36px -1326px}i.flag.liberia:before,i.flag.lr:before{background-position:-36px -1352px}i.flag.lesotho:before,i.flag.ls:before{background-position:-36px -1378px}i.flag.lithuania:before,i.flag.lt:before{background-position:-36px -1404px}i.flag.lu:before,i.flag.luxembourg:before{background-position:-36px -1430px}i.flag.latvia:before,i.flag.lv:before{background-position:-36px -1456px}i.flag.libya:before,i.flag.ly:before{background-position:-36px -1482px}i.flag.ma:before,i.flag.morocco:before{background-position:-36px -1508px}i.flag.mc:before,i.flag.monaco:before{background-position:-36px -1534px}i.flag.md:before,i.flag.moldova:before{background-position:-36px -1560px}i.flag.me:before,i.flag.montenegro:before{background-position:-36px -1586px}i.flag.madagascar:before,i.flag.mg:before{background-position:-36px -1613px}i.flag.marshall.islands:before,i.flag.mh:before{background-position:-36px -1639px}i.flag.macedonia:before,i.flag.mk:before{background-position:-36px -1665px}i.flag.mali:before,i.flag.ml:before{background-position:-36px -1691px}i.flag.burma:before,i.flag.mm:before,i.flag.myanmar:before{background-position:-36px -1717px}i.flag.mn:before,i.flag.mongolia:before{background-position:-36px -1743px}i.flag.macau:before,i.flag.mo:before{background-position:-36px -1769px}i.flag.mp:before,i.flag.northern.mariana.islands:before{background-position:-36px -1795px}i.flag.martinique:before,i.flag.mq:before{background-position:-36px -1821px}i.flag.mauritania:before,i.flag.mr:before{background-position:-36px -1847px}i.flag.montserrat:before,i.flag.ms:before{background-position:-36px -1873px}i.flag.malta:before,i.flag.mt:before{background-position:-36px -1899px}i.flag.mauritius:before,i.flag.mu:before{background-position:-36px -1925px}i.flag.maldives:before,i.flag.mv:before{background-position:-36px -1951px}i.flag.malawi:before,i.flag.mw:before{background-position:-36px -1977px}i.flag.mexico:before,i.flag.mx:before{background-position:-72px 0}i.flag.malaysia:before,i.flag.my:before{background-position:-72px -26px}i.flag.mozambique:before,i.flag.mz:before{background-position:-72px -52px}i.flag.na:before,i.flag.namibia:before{background-position:-72px -78px}i.flag.nc:before,i.flag.new.caledonia:before{background-position:-72px -104px}i.flag.ne:before,i.flag.niger:before{background-position:-72px -130px}i.flag.nf:before,i.flag.norfolk.island:before{background-position:-72px -156px}i.flag.ng:before,i.flag.nigeria:before{background-position:-72px -182px}i.flag.ni:before,i.flag.nicaragua:before{background-position:-72px -208px}i.flag.netherlands:before,i.flag.nl:before{background-position:-72px -234px}i.flag.no:before,i.flag.norway:before{background-position:-72px -260px}i.flag.nepal:before,i.flag.np:before{background-position:-72px -286px}i.flag.nauru:before,i.flag.nr:before{background-position:-72px -312px}i.flag.niue:before,i.flag.nu:before{background-position:-72px -338px}i.flag.new.zealand:before,i.flag.nz:before{background-position:-72px -364px}i.flag.om:before,i.flag.oman:before{background-position:-72px -390px}i.flag.pa:before,i.flag.panama:before{background-position:-72px -416px}i.flag.pe:before,i.flag.peru:before{background-position:-72px -442px}i.flag.french.polynesia:before,i.flag.pf:before{background-position:-72px -468px}i.flag.new.guinea:before,i.flag.pg:before{background-position:-72px -494px}i.flag.ph:before,i.flag.philippines:before{background-position:-72px -520px}i.flag.pakistan:before,i.flag.pk:before{background-position:-72px -546px}i.flag.pl:before,i.flag.poland:before{background-position:-72px -572px}i.flag.pm:before,i.flag.saint.pierre:before{background-position:-72px -598px}i.flag.pitcairn.islands:before,i.flag.pn:before{background-position:-72px -624px}i.flag.pr:before,i.flag.puerto.rico:before{background-position:-72px -650px}i.flag.palestine:before,i.flag.ps:before{background-position:-72px -676px}i.flag.portugal:before,i.flag.pt:before{background-position:-72px -702px}i.flag.palau:before,i.flag.pw:before{background-position:-72px -728px}i.flag.paraguay:before,i.flag.py:before{background-position:-72px -754px}i.flag.qa:before,i.flag.qatar:before{background-position:-72px -780px}i.flag.re:before,i.flag.reunion:before{background-position:-72px -806px}i.flag.ro:before,i.flag.romania:before{background-position:-72px -832px}i.flag.rs:before,i.flag.serbia:before{background-position:-72px -858px}i.flag.ru:before,i.flag.russia:before{background-position:-72px -884px}i.flag.rw:before,i.flag.rwanda:before{background-position:-72px -910px}i.flag.sa:before,i.flag.saudi.arabia:before{background-position:-72px -936px}i.flag.sb:before,i.flag.solomon.islands:before{background-position:-72px -962px}i.flag.sc:before,i.flag.seychelles:before{background-position:-72px -988px}i.flag.gb.sct:before,i.flag.scotland:before{background-position:-72px -1014px}i.flag.sd:before,i.flag.sudan:before{background-position:-72px -1040px}i.flag.se:before,i.flag.sweden:before{background-position:-72px -1066px}i.flag.sg:before,i.flag.singapore:before{background-position:-72px -1092px}i.flag.saint.helena:before,i.flag.sh:before{background-position:-72px -1118px}i.flag.si:before,i.flag.slovenia:before{background-position:-72px -1144px}i.flag.jan.mayen:before,i.flag.sj:before,i.flag.svalbard:before{background-position:-72px -1170px}i.flag.sk:before,i.flag.slovakia:before{background-position:-72px -1196px}i.flag.sierra.leone:before,i.flag.sl:before{background-position:-72px -1222px}i.flag.san.marino:before,i.flag.sm:before{background-position:-72px -1248px}i.flag.senegal:before,i.flag.sn:before{background-position:-72px -1274px}i.flag.so:before,i.flag.somalia:before{background-position:-72px -1300px}i.flag.sr:before,i.flag.suriname:before{background-position:-72px -1326px}i.flag.sao.tome:before,i.flag.st:before{background-position:-72px -1352px}i.flag.el.salvador:before,i.flag.sv:before{background-position:-72px -1378px}i.flag.sy:before,i.flag.syria:before{background-position:-72px -1404px}i.flag.swaziland:before,i.flag.sz:before{background-position:-72px -1430px}i.flag.caicos.islands:before,i.flag.tc:before{background-position:-72px -1456px}i.flag.chad:before,i.flag.td:before{background-position:-72px -1482px}i.flag.french.territories:before,i.flag.tf:before{background-position:-72px -1508px}i.flag.tg:before,i.flag.togo:before{background-position:-72px -1534px}i.flag.th:before,i.flag.thailand:before{background-position:-72px -1560px}i.flag.tajikistan:before,i.flag.tj:before{background-position:-72px -1586px}i.flag.tk:before,i.flag.tokelau:before{background-position:-72px -1612px}i.flag.timorleste:before,i.flag.tl:before{background-position:-72px -1638px}i.flag.tm:before,i.flag.turkmenistan:before{background-position:-72px -1664px}i.flag.tn:before,i.flag.tunisia:before{background-position:-72px -1690px}i.flag.to:before,i.flag.tonga:before{background-position:-72px -1716px}i.flag.tr:before,i.flag.turkey:before{background-position:-72px -1742px}i.flag.trinidad:before,i.flag.tt:before{background-position:-72px -1768px}i.flag.tuvalu:before,i.flag.tv:before{background-position:-72px -1794px}i.flag.taiwan:before,i.flag.tw:before{background-position:-72px -1820px}i.flag.tanzania:before,i.flag.tz:before{background-position:-72px -1846px}i.flag.ua:before,i.flag.ukraine:before{background-position:-72px -1872px}i.flag.ug:before,i.flag.uganda:before{background-position:-72px -1898px}i.flag.um:before,i.flag.us.minor.islands:before{background-position:-72px -1924px}i.flag.america:before,i.flag.united.states:before,i.flag.us:before{background-position:-72px -1950px}i.flag.uruguay:before,i.flag.uy:before{background-position:-72px -1976px}i.flag.uz:before,i.flag.uzbekistan:before{background-position:-108px 0}i.flag.va:before,i.flag.vatican.city:before{background-position:-108px -26px}i.flag.saint.vincent:before,i.flag.vc:before{background-position:-108px -52px}i.flag.ve:before,i.flag.venezuela:before{background-position:-108px -78px}i.flag.british.virgin.islands:before,i.flag.vg:before{background-position:-108px -104px}i.flag.us.virgin.islands:before,i.flag.vi:before{background-position:-108px -130px}i.flag.vietnam:before,i.flag.vn:before{background-position:-108px -156px}i.flag.vanuatu:before,i.flag.vu:before{background-position:-108px -182px}i.flag.gb.wls:before,i.flag.wales:before{background-position:-108px -208px}i.flag.wallis.and.futuna:before,i.flag.wf:before{background-position:-108px -234px}i.flag.samoa:before,i.flag.ws:before{background-position:-108px -260px}i.flag.ye:before,i.flag.yemen:before{background-position:-108px -286px}i.flag.mayotte:before,i.flag.yt:before{background-position:-108px -312px}i.flag.south.africa:before,i.flag.za:before{background-position:-108px -338px}i.flag.zambia:before,i.flag.zm:before{background-position:-108px -364px}i.flag.zimbabwe:before,i.flag.zw:before{background-position:-108px -390px} \ No newline at end of file diff --git a/semantic/components/form.css b/semantic/components/form.css new file mode 100755 index 0000000..b68e531 --- /dev/null +++ b/semantic/components/form.css @@ -0,0 +1,1065 @@ +/*! + * # Semantic UI 2.1.7 - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Elements +*******************************/ + + +/*-------------------- + Form +---------------------*/ + +.ui.form { + position: relative; + max-width: 100%; +} + +/*-------------------- + Content +---------------------*/ + +.ui.form > p { + margin: 1em 0em; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: 0em 0em 1em; +} +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0em; +} +.ui.form .fields .field { + clear: both; + margin: 0em 0em 1em; +} + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: 0em 0em 0.28571429rem 0em; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: bold; + text-transform: none; +} + +/*-------------------- + Standard Inputs +---------------------*/ + +.ui.form textarea, +.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="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + width: 100%; + vertical-align: top; +} + +/* Set max height on unusual input */ +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: 1.2142em; +} +.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="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + margin: 0em; + outline: none; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + line-height: 1.2142em; + padding: 0.67861429em 1em; + font-size: 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/* Text Area */ +.ui.form textarea { + margin: 0em; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + padding: 0.78571429em 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.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 textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + +.ui.form input.attached { + width: auto; +} + +/*-------------------- + Basic Select +---------------------*/ + +.ui.form select { + display: block; + height: auto; + width: 100%; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + padding: 0.62em 1em; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/*-------------------- + Dropdown +---------------------*/ + + +/* Block */ +.ui.form .field > .selection.dropdown { + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + + +/* Block */ +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.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; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + width: 0px; +} + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .success.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} + +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: #ffffff !important; + border: 1px solid #e0b4b4 !important; + color: #9f3a38 !important; +} +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: -0.25em 0em -0.5em 0.5em; +} +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0px 0px 1px 1px; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px #fffff0 inset !important; + border-color: #e5dfa1 !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0px 0px 0px 100px #fffff0 inset !important; + border-color: #d5c315 !important; +} + +/* Error */ +.ui.form .error.error input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px #fffaf0 inset !important; + border-color: #e0b4b4 !important; +} + +/*-------------------- + Placeholder +---------------------*/ + + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: rgba(140, 140, 140, 0.87); +} +.ui.form ::-ms-input-placeholder { + color: rgba(140, 140, 140, 0.87); +} +.ui.form ::-moz-placeholder { + color: rgba(140, 140, 140, 0.87); +} +.ui.form :focus::-webkit-input-placeholder { + color: rgba(89, 89, 89, 0.87); +} +.ui.form :focus::-ms-input-placeholder { + color: rgba(89, 89, 89, 0.87); +} +.ui.form :focus::-moz-placeholder { + color: rgba(89, 89, 89, 0.87); +} + +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: #e7bdbc; +} +.ui.form .error ::-ms-input-placeholder { + color: #e7bdbc; +} +.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; +} +.ui.form .error :focus::-moz-placeholder { + color: #da9796; +} + +/*-------------------- + Focus +---------------------*/ + +.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="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="url"]:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85b7d9; + border-radius: 0.28571429rem; + background: #ffffff; + box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; +} +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85b7d9; + border-radius: 0.28571429rem; + background: #ffffff; + box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; + -webkit-appearance: none; +} + +/*-------------------- + Success +---------------------*/ + + +/* On Form */ +.ui.form.success .success.message:not(:empty) { + display: block; +} +.ui.form.success .icon.success.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------------- + Warning +---------------------*/ + + +/* On Form */ +.ui.form.warning .warning.message:not(:empty) { + display: block; +} +.ui.form.warning .icon.warning.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------------- + Error +---------------------*/ + + +/* On Form */ +.ui.form.error .error.message:not(:empty) { + display: block; +} +.ui.form.error .icon.error.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: #9f3a38; +} +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: #9f3a38; + color: #ffffff; +} +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.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="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="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.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="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="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="url"] { + background: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + border-radius: ''; + box-shadow: none; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error select:focus, +.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="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="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + -webkit-appearance: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Dropdown Error +--------------------*/ + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item { + background: #fff6f6; + color: #9f3a38; +} +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + border-color: #e0b4b4 !important; +} +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: #e0b4b4 !important; +} +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + border-color: #e0b4b4; +} +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: #eacbcb; + color: #9f3a38; +} + +/* Hover */ +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: #fbe7e7; +} + +/* Selected */ +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + background-color: #fbe7e7; +} + +/* Active */ +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: #fdcfcf !important; +} + +/*-------------------- + Checkbox Error +---------------------*/ + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { + color: #9f3a38; +} +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label: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 .field.error .checkbox:not(.toggle):not(.slider) .box:before { + background: #fff6f6; + border-color: #e0b4b4; +} +.ui.form .fields.error .field .checkbox label:after, +.ui.form .field.error .checkbox label:after, +.ui.form .fields.error .field .checkbox .box:after, +.ui.form .field.error .checkbox .box:after { + color: #9f3a38; +} + +/*-------------------- + Disabled +---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: 0.45; +} +.ui.form .field.disabled label { + opacity: 0.45; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + point-events: none; +} +.ui.loading.form:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: rgba(255, 255, 255, 0.8); + width: 100%; + height: 100%; + z-index: 100; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -1.5em 0em 0em -1.5em; + width: 3em; + height: 3em; + -webkit-animation: form-spin 0.6s linear; + animation: form-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; + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: 101; +} +@-webkit-keyframes form-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes form-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +/******************************* + Element Types +*******************************/ + + +/*-------------------- + Required Field +---------------------*/ + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + margin: -0.2em 0em 0em 0.2em; + content: '*'; + color: #db2828; +} +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after { + display: inline-block; + vertical-align: top; +} +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + position: absolute; + top: 0%; + left: 100%; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Inverted Colors +---------------------*/ + +.ui.inverted.form label, +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box { + color: rgba(255, 255, 255, 0.9); +} + +/* Inverted Field */ +.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="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="url"] { + background: #ffffff; + border-color: rgba(255, 255, 255, 0.1); + color: rgba(0, 0, 0, 0.87); + box-shadow: none; +} + +/*-------------------- + Field Groups +---------------------*/ + + +/* Grouped Vertically */ +.ui.form .grouped.fields { + display: block; + margin: 0em 0em 1em; +} +.ui.form .grouped.fields:last-child { + margin-bottom: 0em; +} +.ui.form .grouped.fields > label { + margin: 0em 0em 0.28571429rem 0em; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: bold; + text-transform: none; +} +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: 0.5em 0em; + padding: 0em; +} + +/*-------------------- + Fields +---------------------*/ + + +/* Split fields */ +.ui.form .fields { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.ui.form .fields > .field { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.form .fields > .field:first-child { + border-left: none; + box-shadow: none; +} + +/* Other Combinations */ +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: 50%; +} +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: 33.33333333%; +} +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: 25%; +} +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: 20%; +} +.ui.form .six.fields > .fields, +.ui.form .six.fields > .field { + width: 16.66666667%; +} +.ui.form .seven.fields > .fields, +.ui.form .seven.fields > .field { + width: 14.28571429%; +} +.ui.form .eight.fields > .fields, +.ui.form .eight.fields > .field { + width: 12.5%; +} +.ui.form .nine.fields > .fields, +.ui.form .nine.fields > .field { + width: 11.11111111%; +} +.ui.form .ten.fields > .fields, +.ui.form .ten.fields > .field { + width: 10%; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width: 767px) { + .ui.form .fields { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .six.fields > .fields, + .ui.form .six.fields > .field, + .ui.form .seven.fields > .fields, + .ui.form .seven.fields > .field, + .ui.form .eight.fields > .fields, + .ui.form .eight.fields > .field, + .ui.form .nine.fields > .fields, + .ui.form .nine.fields > .field, + .ui.form .ten.fields > .fields, + .ui.form .ten.fields > .field { + width: 100% !important; + margin: 0em 0em 1em; + padding-left: 0%; + padding-right: 0%; + } +} +.ui.form .fields .field:first-child { + padding-left: 0%; +} +.ui.form .fields .field:last-child { + padding-right: 0%; +} + +/* Sizing Combinations */ +.ui.form .fields .wide.field { + width: 6.25%; + padding-left: 0.5em; + padding-right: 0.5em; +} +.ui.form .fields .wide.field:first-child { + padding-left: 0%; +} +.ui.form .fields .wide.field:last-child { + padding-right: 0%; +} +.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; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width: 767px) { + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .fields > .two.wide.field, + .ui.form .fields > .three.wide.field, + .ui.form .fields > .four.wide.field, + .ui.form .fields > .five.wide.field, + .ui.form .fields > .six.wide.field, + .ui.form .fields > .seven.wide.field, + .ui.form .fields > .eight.wide.field, + .ui.form .fields > .nine.wide.field, + .ui.form .fields > .ten.wide.field, + .ui.form .fields > .eleven.wide.field, + .ui.form .fields > .twelve.wide.field, + .ui.form .fields > .thirteen.wide.field, + .ui.form .fields > .fourteen.wide.field, + .ui.form .fields > .fifteen.wide.field, + .ui.form .fields > .sixteen.wide.field { + width: 100% !important; + margin: 0em 0em 1em; + padding-left: 0%; + padding-right: 0%; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields +---------------------*/ + +.ui.form .inline.fields { + margin: 0em 0em 1em; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.form .inline.fields .field { + margin: 0em; + padding: 0em 1em 0em 0em; +} + +/* Inline Label */ +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: baseline; + font-size: 0.92857143em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); + text-transform: none; +} + +/* Grouped Inline Label */ +.ui.form .inline.fields > label { + margin: 0.035714em 1em 0em 0em; +} + +/* Inline Input */ +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; + font-size: 1em; +} + +/* Label */ +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em 0.85714286em 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} + +/* Wide */ +.ui.form .inline.fields .wide.field { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + +/*-------------------- + Sizes +---------------------*/ + + +/* Standard */ +.ui.small.form { + font-size: 0.92857143rem; +} + +/* Medium */ +.ui.form { + font-size: 1rem; +} + +/* Large */ +.ui.large.form { + font-size: 1.14285714rem; +} + +/* Huge */ +.ui.huge.form { + font-size: 1.42857143rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/form.js b/semantic/components/form.js new file mode 100755 index 0000000..aa6dff6 --- /dev/null +++ b/semantic/components/form.js @@ -0,0 +1,1517 @@ +/*! + * # Semantic UI 2.1.7 - Form Validation + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.form = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + legacyParameters = arguments[1], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + $module = $(this), + element = this, + + formErrors = [], + keyHeldDown = false, + + // set at run-time + $field, + $group, + $message, + $prompt, + $submit, + $clear, + $reset, + + settings, + validation, + + metadata, + selector, + className, + error, + + namespace, + moduleNamespace, + eventNamespace, + + instance, + module + ; + + module = { + + initialize: function() { + + // settings grabbed at run time + module.get.settings(); + if(methodInvoked) { + if(instance === undefined) { + module.instantiate(); + } + module.invoke(query); + } + else { + module.verbose('Initializing form validation', $module, settings); + module.bindEvents(); + module.set.defaults(); + module.instantiate(); + } + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', instance); + module.removeEvents(); + $module + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $field = $module.find(selector.field); + $group = $module.find(selector.group); + $message = $module.find(selector.message); + $prompt = $module.find(selector.prompt); + + $submit = $module.find(selector.submit); + $clear = $module.find(selector.clear); + $reset = $module.find(selector.reset); + }, + + submit: function() { + module.verbose('Submitting form', $module); + $module + .submit() + ; + }, + + attachEvents: function(selector, action) { + action = action || 'submit'; + $(selector) + .on('click' + eventNamespace, function(event) { + module[action](); + event.preventDefault(); + }) + ; + }, + + bindEvents: function() { + module.verbose('Attaching form events'); + $module + .on('submit' + eventNamespace, module.validate.form) + .on('blur' + eventNamespace, selector.field, module.event.field.blur) + .on('click' + eventNamespace, selector.submit, module.submit) + .on('click' + eventNamespace, selector.reset, module.reset) + .on('click' + eventNamespace, selector.clear, module.clear) + ; + if(settings.keyboardShortcuts) { + $module + .on('keydown' + eventNamespace, selector.field, module.event.field.keydown) + ; + } + $field + .each(function() { + var + $input = $(this), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) + ; + $(this) + .on(inputEvent + eventNamespace, module.event.field.change) + ; + }) + ; + }, + + clear: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue) || '', + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('clear'); + } + else if(isCheckbox) { + $field.prop('checked', false); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(''); + } + }) + ; + }, + + reset: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(defaultValue === undefined) { + return; + } + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('restore defaults'); + } + else if(isCheckbox) { + module.verbose('Resetting checkbox value', $element, defaultValue); + $field.prop('checked', defaultValue); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(defaultValue); + } + }) + ; + }, + + is: { + bracketedRule: function(rule) { + return (rule.type && rule.type.match(settings.regExp.bracket)); + }, + valid: function() { + var + allValid = true + ; + module.verbose('Checking if form is valid'); + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field, fieldName) ) ) { + allValid = false; + } + }); + return allValid; + } + }, + + removeEvents: function() { + $module + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + $submit + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + }, + + event: { + field: { + keydown: function(event) { + var + $field = $(this), + key = event.which, + keyCode = { + enter : 13, + escape : 27 + } + ; + if( key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $field + .blur() + ; + } + if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).length > 0 ) { + if(!keyHeldDown) { + $field + .one('keyup' + eventNamespace, module.event.field.keyup) + ; + module.submit(); + module.debug('Enter pressed on input submitting form'); + } + keyHeldDown = true; + } + }, + keyup: function() { + keyHeldDown = false; + }, + blur: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group), + validationRules = module.get.validation($field) + ; + if( $fieldGroup.hasClass(className.error) ) { + module.debug('Revalidating field', $field, validationRules); + module.validate.form.call(module, event, true); + } + else if(settings.on == 'blur' || settings.on == 'change') { + if(validationRules) { + module.validate.field( validationRules ); + } + } + }, + change: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group) + ; + if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + module.debug('Revalidating field', $field, module.get.validation($field)); + module.validate.form.call(module, event, true); + }, settings.delay); + } + } + } + + }, + + get: { + ancillaryValue: function(rule) { + if(!rule.type || !module.is.bracketedRule(rule)) { + return false; + } + return rule.type.match(settings.regExp.bracket)[1] + ''; + }, + ruleName: function(rule) { + if( module.is.bracketedRule(rule) ) { + return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], ''); + } + return rule.type; + }, + changeEvent: function(type, $input) { + if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) { + return 'change'; + } + else { + return module.get.inputEvent(); + } + }, + inputEvent: function() { + return (document.createElement('input').oninput !== undefined) + ? 'input' + : (document.createElement('input').onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + }, + prompt: function(rule, field) { + var + ruleName = module.get.ruleName(rule), + ancillary = module.get.ancillaryValue(rule), + prompt = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule, + requiresValue = (prompt.search('{value}') !== -1), + requiresName = (prompt.search('{name}') !== -1), + $label, + $field, + name + ; + if(requiresName || requiresValue) { + $field = module.get.field(field.identifier); + } + if(requiresValue) { + prompt = prompt.replace('{value}', $field.val()); + } + if(requiresName) { + $label = $field.closest(selector.group).find('label').eq(0); + name = ($label.size() == 1) + ? $label.text() + : $field.prop('placeholder') || settings.text.unspecifiedField + ; + prompt = prompt.replace('{name}', name); + } + prompt = prompt.replace('{identifier}', field.identifier); + prompt = prompt.replace('{ruleValue}', ancillary); + if(!rule.prompt) { + module.verbose('Using default validation prompt for type', prompt, ruleName); + } + return prompt; + }, + settings: function() { + if($.isPlainObject(parameters)) { + var + keys = Object.keys(parameters), + isLegacySettings = (keys.length > 0) + ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined) + : false, + ruleKeys + ; + if(isLegacySettings) { + // 1.x (ducktyped) + settings = $.extend(true, {}, $.fn.form.settings, legacyParameters); + validation = $.extend({}, $.fn.form.settings.defaults, parameters); + module.error(settings.error.oldSyntax, element); + module.verbose('Extending settings from legacy parameters', validation, settings); + } + else { + // 2.x + if(parameters.fields) { + ruleKeys = Object.keys(parameters.fields); + if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) { + $.each(parameters.fields, function(name, rules) { + if(typeof rules == 'string') { + rules = [rules]; + } + parameters.fields[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + parameters.fields[name].rules.push({ type: rule }); + }); + }); + } + } + + settings = $.extend(true, {}, $.fn.form.settings, parameters); + validation = $.extend({}, $.fn.form.settings.defaults, settings.fields); + module.verbose('Extending settings', validation, settings); + } + } + else { + settings = $.fn.form.settings; + validation = $.fn.form.settings.defaults; + module.verbose('Using default form validation', validation, settings); + } + + // shorthand + namespace = settings.namespace; + metadata = settings.metadata; + selector = settings.selector; + className = settings.className; + error = settings.error; + moduleNamespace = 'module-' + namespace; + eventNamespace = '.' + namespace; + + // grab instance + instance = $module.data(moduleNamespace); + + // refresh selector cache + module.refresh(); + }, + field: function(identifier) { + module.verbose('Finding field with identifier', identifier); + if( $field.filter('#' + identifier).length > 0 ) { + return $field.filter('#' + identifier); + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return $field.filter('[name="' + identifier +'"]'); + } + else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) { + return $field.filter('[name="' + identifier +'[]"]'); + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); + } + return $(''); + }, + 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(isChecked) { + values[name] = value; + } + } + 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); + 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; + } + + }, + + add: { + 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: { + 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.is.valid() ) { + 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) { + var + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), + 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 && $.trim($field.val()) === ''){ + module.debug('Field is optional and empty. Skipping', identifier); + 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) { + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); + } + else { + 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.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({ + '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: { + 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-]*[a-z0-9])?", + 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} cannot contain "{ruleValue}"', + containExactly : '{name} cannot contain exactly "{ruleValue}"', + doesntContain : '{name} must contain "{ruleValue}"', + doesntContainExactly : '{name} must 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 = '

' + value + '

'; + 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){ + var + emailRegExp = new RegExp($.fn.form.settings.regExp.email, 'i') + ; + return emailRegExp.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) { + 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; + } + + // 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 100755 index 0000000..d54336f --- /dev/null +++ b/semantic/components/form.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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 0 1em}.ui.form .field>label{display:block;margin:0 0 .28571429rem;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=number],.ui.form input[type=password],.ui.form input[type=search],.ui.form input[type=tel],.ui.form input[type=time],.ui.form input[type=text],.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.2142em}.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=number],.ui.form input[type=password],.ui.form input[type=search],.ui.form input[type=tel],.ui.form input[type=time],.ui.form input[type=text],.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.2142em;padding:.67861429em 1em;font-size:1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);border-radius:.28571429rem;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;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;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;-webkit-flex:1 0 auto;-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{box-shadow:0 0 0 100px ivory inset!important;border-color:#e5dfa1!important}.ui.form .field.field input:-webkit-autofill:focus{box-shadow:0 0 0 100px ivory inset!important;border-color:#d5c315!important}.ui.form .error.error input:-webkit-autofill{box-shadow:0 0 0 100px #fffaf0 inset!important;border-color:#e0b4b4!important}.ui.form ::-webkit-input-placeholder{color:rgba(140,140,140,.87)}.ui.form ::-ms-input-placeholder{color:rgba(140,140,140,.87)}.ui.form ::-moz-placeholder{color:rgba(140,140,140,.87)}.ui.form :focus::-webkit-input-placeholder{color:rgba(89,89,89,.87)}.ui.form :focus::-ms-input-placeholder{color:rgba(89,89,89,.87)}.ui.form :focus::-moz-placeholder{color:rgba(89,89,89,.87)}.ui.form .error ::-webkit-input-placeholder{color:#e7bdbc}.ui.form .error ::-ms-input-placeholder{color:#e7bdbc}.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}.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=number]:focus,.ui.form input[type=password]:focus,.ui.form input[type=search]:focus,.ui.form input[type=tel]:focus,.ui.form input[type=time]:focus,.ui.form input[type=text]:focus,.ui.form input[type=url]:focus{color:rgba(0,0,0,.95);border-color:#85b7d9;border-radius:.28571429rem;background:#fff;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;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 .icon.success.message:not(:empty){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.ui.form.warning .warning.message:not(:empty){display:block}.ui.form.warning .icon.warning.message:not(:empty){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.ui.form.error .error.message:not(:empty){display:block}.ui.form.error .icon.error.message:not(:empty){display:-webkit-box;display:-webkit-flex;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=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=time],.ui.form .field.error input[type=text],.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=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=time],.ui.form .fields.error .field input[type=text],.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:'';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=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=time]:focus,.ui.form .field.error input[type=text]: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;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 .field.error .ui.dropdown:hover,.ui.form .fields.error .field .ui.dropdown,.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 .field.error .ui.dropdown .menu .selected.item,.ui.form .fields.error .field .ui.dropdown .menu .item:hover,.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{opacity:.45}.ui.form .field.disabled :disabled{opacity:1}.ui.loading.form{position:relative;cursor:default;point-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);border-style:solid;border-width:.2em;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 .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=number],.ui.inverted.form input[type=password],.ui.inverted.form input[type=search],.ui.inverted.form input[type=tel],.ui.inverted.form input[type=time],.ui.inverted.form input[type=text],.ui.inverted.form input[type=url]{background:#fff;border-color:rgba(255,255,255,.1);color:rgba(0,0,0,.87);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;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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.ui.form .fields>.field{-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;padding-left:.5em;padding-right:.5em}.ui.form .fields>.field:first-child{border-left: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{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.form .eight.fields>.field,.ui.form .eight.fields>.fields,.ui.form .five.fields>.field,.ui.form .five.fields>.fields,.ui.form .four.fields>.field,.ui.form .four.fields>.fields,.ui.form .nine.fields>.field,.ui.form .nine.fields>.fields,.ui.form .seven.fields>.field,.ui.form .seven.fields>.fields,.ui.form .six.fields>.field,.ui.form .six.fields>.fields,.ui.form .ten.fields>.field,.ui.form .ten.fields>.fields,.ui.form .three.fields>.field,.ui.form .three.fields>.fields,.ui.form .two.fields>.field,.ui.form .two.fields>.fields{width:100%!important;margin:0 0 1em;padding-left:0;padding-right:0}}.ui.form .fields .field:first-child{padding-left:0}.ui.form .fields .field:last-child{padding-right:0}.ui.form .fields .wide.field{width:6.25%;padding-left:.5em;padding-right:.5em}.ui.form .fields .wide.field:first-child{padding-left:0}.ui.form .fields .wide.field:last-child{padding-right:0}.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 .fields>.eight.wide.field,.ui.form .fields>.eleven.wide.field,.ui.form .fields>.fifteen.wide.field,.ui.form .fields>.five.wide.field,.ui.form .fields>.four.wide.field,.ui.form .fields>.fourteen.wide.field,.ui.form .fields>.nine.wide.field,.ui.form .fields>.seven.wide.field,.ui.form .fields>.six.wide.field,.ui.form .fields>.sixteen.wide.field,.ui.form .fields>.ten.wide.field,.ui.form .fields>.thirteen.wide.field,.ui.form .fields>.three.wide.field,.ui.form .fields>.twelve.wide.field,.ui.form .fields>.two.wide.field,.ui.form .five.fields>.field,.ui.form .five.fields>.fields,.ui.form .four.fields>.field,.ui.form .four.fields>.fields,.ui.form .three.fields>.field,.ui.form .three.fields>.fields,.ui.form .two.fields>.field,.ui.form .two.fields>.fields{width:100%!important;margin:0 0 1em;padding-left:0;padding-right:0}}.ui.form [class*="equal width"].fields>.field,.ui[class*="equal width"].form .fields>.field{width:100%;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.ui.form .inline.fields{margin:0 0 1em;-webkit-box-align:center;-webkit-align-items: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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items: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.small.form{font-size:.92857143rem}.ui.form{font-size:1rem}.ui.large.form{font-size:1.14285714rem}.ui.huge.form{font-size:1.42857143rem} \ No newline at end of file diff --git a/semantic/components/form.min.js b/semantic/components/form.min.js new file mode 100755 index 0000000..b6b26ce --- /dev/null +++ b/semantic/components/form.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Form Validation + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,n,r){"use strict";e.fn.form=function(t){var i,a=e(this),o=a.selector||"",l=(new Date).getTime(),s=[],u=arguments[0],c=arguments[1],f="string"==typeof u,d=[].slice.call(arguments,1);return a.each(function(){var m,p,g,h,v,b,y,x,k,E,w,C,V,R,S,F,A,T,j=e(this),z=this,O=[],D=!1;T={initialize:function(){T.get.settings(),f?(A===r&&T.instantiate(),T.invoke(u)):(T.verbose("Initializing form validation",j,x),T.bindEvents(),T.set.defaults(),T.instantiate())},instantiate:function(){T.verbose("Storing instance of module",T),A=T,j.data(S,T)},destroy:function(){T.verbose("Destroying previous module",A),T.removeEvents(),j.removeData(S)},refresh:function(){T.verbose("Refreshing selector cache"),m=j.find(w.field),p=j.find(w.group),g=j.find(w.message),h=j.find(w.prompt),v=j.find(w.submit),b=j.find(w.clear),y=j.find(w.reset)},submit:function(){T.verbose("Submitting form",j),j.submit()},attachEvents:function(t,n){n=n||"submit",e(t).on("click"+F,function(e){T[n](),e.preventDefault()})},bindEvents:function(){T.verbose("Attaching form events"),j.on("submit"+F,T.validate.form).on("blur"+F,w.field,T.event.field.blur).on("click"+F,w.submit,T.submit).on("click"+F,w.reset,T.reset).on("click"+F,w.clear,T.clear),x.keyboardShortcuts&&j.on("keydown"+F,w.field,T.event.field.keydown),m.each(function(){var t=e(this),n=t.prop("type"),r=T.get.changeEvent(n,t);e(this).on(r+F,T.event.field.change)})},clear:function(){m.each(function(){var t=e(this),n=t.parent(),r=t.closest(p),i=r.find(w.prompt),a=t.data(E.defaultValue)||"",o=n.is(w.uiCheckbox),l=n.is(w.uiDropdown),s=r.hasClass(C.error);s&&(T.verbose("Resetting error on field",r),r.removeClass(C.error),i.remove()),l?(T.verbose("Resetting dropdown value",n,a),n.dropdown("clear")):o?t.prop("checked",!1):(T.verbose("Resetting field value",t,a),t.val(""))})},reset:function(){m.each(function(){var t=e(this),n=t.parent(),i=t.closest(p),a=i.find(w.prompt),o=t.data(E.defaultValue),l=n.is(w.uiCheckbox),s=n.is(w.uiDropdown),u=i.hasClass(C.error);o!==r&&(u&&(T.verbose("Resetting error on field",i),i.removeClass(C.error),a.remove()),s?(T.verbose("Resetting dropdown value",n,o),n.dropdown("restore defaults")):l?(T.verbose("Resetting checkbox value",n,o),t.prop("checked",o)):(T.verbose("Resetting field value",t,o),t.val(o)))})},is:{bracketedRule:function(e){return e.type&&e.type.match(x.regExp.bracket)},valid:function(){var t=!0;return T.verbose("Checking if form is valid"),e.each(k,function(e,n){T.validate.field(n,e)||(t=!1)}),t}},removeEvents:function(){j.off(F),m.off(F),v.off(F),m.off(F)},event:{field:{keydown:function(t){var n=e(this),r=t.which,i={enter:13,escape:27};r==i.escape&&(T.verbose("Escape key pressed blurring field"),n.blur()),!t.ctrlKey&&r==i.enter&&n.is(w.input)&&n.not(w.checkbox).length>0&&(D||(n.one("keyup"+F,T.event.field.keyup),T.submit(),T.debug("Enter pressed on input submitting form")),D=!0)},keyup:function(){D=!1},blur:function(t){var n=e(this),r=n.closest(p),i=T.get.validation(n);r.hasClass(C.error)?(T.debug("Revalidating field",n,i),T.validate.form.call(T,t,!0)):("blur"==x.on||"change"==x.on)&&i&&T.validate.field(i)},change:function(t){var n=e(this),r=n.closest(p);("change"==x.on||r.hasClass(C.error)&&x.revalidate)&&(clearTimeout(T.timer),T.timer=setTimeout(function(){T.debug("Revalidating field",n,T.get.validation(n)),T.validate.form.call(T,t,!0)},x.delay))}}},get:{ancillaryValue:function(e){return e.type&&T.is.bracketedRule(e)?e.type.match(x.regExp.bracket)[1]+"":!1},ruleName:function(e){return T.is.bracketedRule(e)?e.type.replace(e.type.match(x.regExp.bracket)[0],""):e.type},changeEvent:function(e,t){return"checkbox"==e||"radio"==e||"hidden"==e||t.is("select")?"change":T.get.inputEvent()},inputEvent:function(){return n.createElement("input").oninput!==r?"input":n.createElement("input").onpropertychange!==r?"propertychange":"keyup"},prompt:function(e,t){var n,r,i,a=T.get.ruleName(e),o=T.get.ancillaryValue(e),l=e.prompt||x.prompt[a]||x.text.unspecifiedRule,s=-1!==l.search("{value}"),u=-1!==l.search("{name}");return(u||s)&&(r=T.get.field(t.identifier)),s&&(l=l.replace("{value}",r.val())),u&&(n=r.closest(w.group).find("label").eq(0),i=1==n.size()?n.text():r.prop("placeholder")||x.text.unspecifiedField,l=l.replace("{name}",i)),l=l.replace("{identifier}",t.identifier),l=l.replace("{ruleValue}",o),e.prompt||T.verbose("Using default validation prompt for type",l,a),l},settings:function(){if(e.isPlainObject(t)){var n,i=Object.keys(t),a=i.length>0?t[i[0]].identifier!==r&&t[i[0]].rules!==r:!1;a?(x=e.extend(!0,{},e.fn.form.settings,c),k=e.extend({},e.fn.form.settings.defaults,t),T.error(x.error.oldSyntax,z),T.verbose("Extending settings from legacy parameters",k,x)):(t.fields&&(n=Object.keys(t.fields),("string"==typeof t.fields[n[0]]||e.isArray(t.fields[n[0]]))&&e.each(t.fields,function(n,r){"string"==typeof r&&(r=[r]),t.fields[n]={rules:[]},e.each(r,function(e,r){t.fields[n].rules.push({type:r})})})),x=e.extend(!0,{},e.fn.form.settings,t),k=e.extend({},e.fn.form.settings.defaults,x.fields),T.verbose("Extending settings",k,x))}else x=e.fn.form.settings,k=e.fn.form.settings.defaults,T.verbose("Using default form validation",k,x);R=x.namespace,E=x.metadata,w=x.selector,C=x.className,V=x.error,S="module-"+R,F="."+R,A=j.data(S),T.refresh()},field:function(t){return T.verbose("Finding field with identifier",t),m.filter("#"+t).length>0?m.filter("#"+t):m.filter('[name="'+t+'"]').length>0?m.filter('[name="'+t+'"]'):m.filter('[name="'+t+'[]"]').length>0?m.filter('[name="'+t+'[]"]'):m.filter("[data-"+E.validate+'="'+t+'"]').length>0?m.filter("[data-"+E.validate+'="'+t+'"]'):e("")},fields:function(t){var n=e();return e.each(t,function(e,t){n=n.add(T.get.field(t))}),n},validation:function(t){var n,r;return k?(e.each(k,function(e,i){r=i.identifier||e,T.get.field(r)[0]==t[0]&&(i.identifier=r,n=i)}),n||!1):!1},value:function(e){var t,n=[];return n.push(e),t=T.get.values.call(z,n),t[e]},values:function(t){var n=e.isArray(t)?T.get.fields(t):m,r={};return n.each(function(t,n){var i=e(n),a=(i.prop("type"),i.prop("name")),o=i.val(),l=i.is(w.checkbox),s=i.is(w.radio),u=-1!==a.indexOf("[]"),c=l?i.is(":checked"):!1;a&&(u?(a=a.replace("[]",""),r[a]||(r[a]=[]),r[a].push(l?c?o||!0:!1:o)):s?c&&(r[a]=o):r[a]=l?c?o||!0:!1:o)}),r}},has:{field:function(e){return T.verbose("Checking for existence of a field with identifier",e),"string"!=typeof e&&T.error(V.identifier,e),m.filter("#"+e).length>0?!0:m.filter('[name="'+e+'"]').length>0?!0:m.filter("[data-"+E.validate+'="'+e+'"]').length>0?!0:!1}},add:{prompt:function(t,n){var i=T.get.field(t),a=i.closest(p),o=a.children(w.prompt),l=0!==o.length;n="string"==typeof n?[n]:n,T.verbose("Adding field error state",t),a.addClass(C.error),x.inline&&(l||(o=x.templates.prompt(n),o.appendTo(a)),o.html(n[0]),l?T.verbose("Inline errors are disabled, no inline error added",t):x.transition&&e.fn.transition!==r&&j.transition("is supported")?(T.verbose("Displaying error with css transition",x.transition),o.transition(x.transition+" in",x.duration)):(T.verbose("Displaying error with fallback javascript animation"),o.fadeIn(x.duration)))},errors:function(e){T.debug("Adding form error messages",e),T.set.error(),g.html(x.templates.error(e))}},remove:{prompt:function(t){var n=T.get.field(t),i=n.closest(p),a=i.children(w.prompt);i.removeClass(C.error),x.inline&&a.is(":visible")&&(T.verbose("Removing prompt for field",t),x.transition&&e.fn.transition!==r&&j.transition("is supported")?a.transition(x.transition+" out",x.duration,function(){a.remove()}):a.fadeOut(x.duration,function(){a.remove()}))}},set:{success:function(){j.removeClass(C.error).addClass(C.success)},defaults:function(){m.each(function(){var t=e(this),n=t.filter(w.checkbox).length>0,r=n?t.is(":checked"):t.val();t.data(E.defaultValue,r)})},error:function(){j.removeClass(C.success).addClass(C.error)},value:function(e,t){var n={};return n[e]=t,T.set.values.call(z,n)},values:function(t){e.isEmptyObject(t)||e.each(t,function(t,n){var r,i=T.get.field(t),a=i.parent(),o=e.isArray(n),l=a.is(w.uiCheckbox),s=a.is(w.uiDropdown),u=i.is(w.radio)&&l,c=i.length>0;c&&(o&&l?(T.verbose("Selecting multiple",n,i),a.checkbox("uncheck"),e.each(n,function(e,t){r=i.filter('[value="'+t+'"]'),a=r.parent(),r.length>0&&a.checkbox("check")})):u?(T.verbose("Selecting radio value",n,i),i.filter('[value="'+n+'"]').parent(w.uiCheckbox).checkbox("check")):l?(T.verbose("Setting checkbox value",n,a),a.checkbox(n===!0?"check":"uncheck")):s?(T.verbose("Setting dropdown value",n,a),a.dropdown("set selected",n)):(T.verbose("Setting field value",n,i),i.val(n)))})}},validate:{form:function(e,t){var n=T.get.values();if(D)return!1;if(O=[],T.is.valid()){if(T.debug("Form has no validation errors, submitting"),T.set.success(),t!==!0)return x.onSuccess.call(z,e,n)}else if(T.debug("Form has errors"),T.set.error(),x.inline||T.add.errors(O),j.data("moduleApi")!==r&&e.stopImmediatePropagation(),t!==!0)return x.onFailure.call(z,O,n)},field:function(t,n){var i=t.identifier||n,a=T.get.field(i),o=!0,l=[];return t.identifier||(T.debug("Using field name as identifier",i),t.identifier=i),a.prop("disabled")?(T.debug("Field is disabled. Skipping",i),o=!0):t.optional&&""===e.trim(a.val())?(T.debug("Field is optional and empty. Skipping",i),o=!0):t.rules!==r&&e.each(t.rules,function(e,n){T.has.field(i)&&!T.validate.rule(t,n)&&(T.debug("Field is invalid",i,n.type),l.push(T.get.prompt(n,t)),o=!1)}),o?(T.remove.prompt(i,l),x.onValid.call(a),!0):(O=O.concat(l),T.add.prompt(i,l),x.onInvalid.call(a,l),!1)},rule:function(t,n){var i=T.get.field(t.identifier),a=(n.type,i.val()),o=T.get.ancillaryValue(n),l=T.get.ruleName(n),s=x.rules[l];return e.isFunction(s)?(a=a===r||""===a||null===a?"":e.trim(a+""),s.call(i,a,o)):void T.error(V.noRule,l)}},setting:function(t,n){if(e.isPlainObject(t))e.extend(!0,x,t);else{if(n===r)return x[t];x[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,T,t);else{if(n===r)return T[t];T[t]=n}},debug:function(){x.debug&&(x.performance?T.performance.log(arguments):(T.debug=Function.prototype.bind.call(console.info,console,x.name+":"),T.debug.apply(console,arguments)))},verbose:function(){x.verbose&&x.debug&&(x.performance?T.performance.log(arguments):(T.verbose=Function.prototype.bind.call(console.info,console,x.name+":"),T.verbose.apply(console,arguments)))},error:function(){T.error=Function.prototype.bind.call(console.error,console,x.name+":"),T.error.apply(console,arguments)},performance:{log:function(e){var t,n,r;x.performance&&(t=(new Date).getTime(),r=l||t,n=t-r,l=t,s.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:z,"Execution Time":n})),clearTimeout(T.performance.timer),T.performance.timer=setTimeout(T.performance.display,500)},display:function(){var t=x.name+":",n=0;l=!1,clearTimeout(T.performance.timer),e.each(s,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",o&&(t+=" '"+o+"'"),a.length>1&&(t+=" ("+a.length+")"),(console.group!==r||console.table!==r)&&s.length>0&&(console.groupCollapsed(t),console.table?console.table(s):e.each(s,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),s=[]}},invoke:function(t,n,a){var o,l,s,u=A;return n=n||d,a=z||a,"string"==typeof t&&u!==r&&(t=t.split(/[\. ]/),o=t.length-1,e.each(t,function(n,i){var a=n!=o?i+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(u[a])&&n!=o)u=u[a];else{if(u[a]!==r)return l=u[a],!1;if(!e.isPlainObject(u[i])||n==o)return u[i]!==r?(l=u[i],!1):!1;u=u[i]}})),e.isFunction(l)?s=l.apply(a,n):l!==r&&(s=l),e.isArray(i)?i.push(s):i!==r?i=[i,s]:s!==r&&(i=s),l}},T.initialize()}),i!==r?i:this},e.fn.form.settings={name:"Form",namespace:"form",debug:!1,verbose:!1,performance:!0,fields:!1,keyboardShortcuts:!0,on:"submit",inline:!1,delay:200,revalidate:!0,transition:"scale",duration:200,onValid:function(){},onInvalid:function(){},onSuccess:function(){return!0},onFailure:function(){return!1},metadata:{defaultValue:"default",validate:"validate"},regExp:{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-]*[a-z0-9])?",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} cannot contain "{ruleValue}"',containExactly:'{name} cannot contain exactly "{ruleValue}"',doesntContain:'{name} must contain "{ruleValue}"',doesntContainExactly:'{name} must 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:{error:function(t){var n='

"+t+"

",e(n)},prompt:function(t){return e("

").addClass("ui basic red pointing prompt label").html(t[0])}},rules:{empty:function(t){return!(t===r||""===t||e.isArray(t)&&0===t.length)},checked:function(){return e(this).filter(":checked").length>0},email:function(t){var n=new RegExp(e.fn.form.settings.regExp.email,"i");return n.test(t)},url:function(t){return e.fn.form.settings.regExp.url.test(t)},regExp:function(t,n){var r,i=n.match(e.fn.form.settings.regExp.flags);return i&&(n=i.length>=2?i[1]:n,r=i.length>=3?i[2]:""),t.match(new RegExp(n,r))},integer:function(t,n){var i,a,o,l=e.fn.form.settings.regExp.integer;return n&&-1===["",".."].indexOf(n)&&(-1==n.indexOf("..")?l.test(n)&&(i=a=n-0):(o=n.split("..",2),l.test(o[0])&&(i=o[0]-0),l.test(o[1])&&(a=o[1]-0))),l.test(t)&&(i===r||t>=i)&&(a===r||a>=t)},decimal:function(t){return e.fn.form.settings.regExp.decimal.test(t)},number:function(t){return e.fn.form.settings.regExp.number.test(t)},is:function(e,t){return t="string"==typeof t?t.toLowerCase():t,e="string"==typeof e?e.toLowerCase():e,e==t},isExactly:function(e,t){return e==t},not:function(e,t){return e="string"==typeof e?e.toLowerCase():e,t="string"==typeof t?t.toLowerCase():t,e!=t},notExactly:function(e,t){return e!=t},contains:function(t,n){return n=n.replace(e.fn.form.settings.regExp.escape,"\\$&"),-1!==t.search(new RegExp(n,"i"))},containsExactly:function(t,n){return n=n.replace(e.fn.form.settings.regExp.escape,"\\$&"),-1!==t.search(new RegExp(n))},doesntContain:function(t,n){return n=n.replace(e.fn.form.settings.regExp.escape,"\\$&"),-1===t.search(new RegExp(n,"i"))},doesntContainExactly:function(t,n){return n=n.replace(e.fn.form.settings.regExp.escape,"\\$&"),-1===t.search(new RegExp(n))},minLength:function(e,t){return e!==r?e.length>=t:!1},length:function(e,t){return e!==r?e.length>=t:!1},exactLength:function(e,t){return e!==r?e.length==t:!1},maxLength:function(e,t){return e!==r?e.length<=t:!1},match:function(t,n){{var i;e(this)}return e('[data-validate="'+n+'"]').length>0?i=e('[data-validate="'+n+'"]').val():e("#"+n).length>0?i=e("#"+n).val():e('[name="'+n+'"]').length>0?i=e('[name="'+n+'"]').val():e('[name="'+n+'[]"]').length>0&&(i=e('[name="'+n+'[]"]')),i!==r?t.toString()==i.toString():!1},different:function(t,n){{var i;e(this)}return e('[data-validate="'+n+'"]').length>0?i=e('[data-validate="'+n+'"]').val():e("#"+n).length>0?i=e("#"+n).val():e('[name="'+n+'"]').length>0?i=e('[name="'+n+'"]').val():e('[name="'+n+'[]"]').length>0&&(i=e('[name="'+n+'[]"]')),i!==r?t.toString()!==i.toString():!1},creditCard:function(t,n){var r,i,a={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]}},o={},l=!1,s="string"==typeof n?n.split(","):!1;if("string"==typeof t&&0!==t.length){if(s&&(e.each(s,function(n,r){i=a[r],i&&(o={length:-1!==e.inArray(t.length,i.length),pattern:-1!==t.search(i.pattern)},o.length&&o.pattern&&(l=!0))}),!l))return!1;if(r={number:-1!==e.inArray(t.length,a.unionPay.length),pattern:-1!==t.search(a.unionPay.pattern)},r.number&&r.pattern)return!0;for(var u=t.length,c=0,f=[[0,1,2,3,4,5,6,7,8,9],[0,2,4,6,8,1,3,5,7,9]],d=0;u--;)d+=f[c][parseInt(t.charAt(u),10)],c^=1;return d%10===0&&d>0}},minCount:function(e,t){return 0==t?!0:1==t?""!==e:e.split(",").length>=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: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 100755 index 0000000..0137e07 --- /dev/null +++ b/semantic/components/grid.css @@ -0,0 +1,2028 @@ +/*! + * # Semantic UI 2.1.7 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: stretch; + -webkit-align-items: 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: inherit; + -webkit-justify-content: inherit; + -ms-flex-pack: inherit; + justify-content: inherit; + -webkit-box-align: stretch; + -webkit-align-items: 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; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 1rem 1rem; +} +.ui.grid .column + .ui.vertical.divider { + height: calc(50% - 1rem ); +} + +/* Remove Border on Last Horizontal Segment */ +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + 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 { + 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; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.row), +.ui.centered.grid > .row > .column:not(.aligned), +.ui.grid .centered.row > .column:not(.aligned) { + 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 { + 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 { + box-shadow: none; +} + +/* Divided Row */ +.ui.grid > .divided.row > .column { + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); +} +.ui.grid > .divided.row > .column:first-child { + 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; + 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 { + 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 { + 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 { + box-shadow: none; +} +.ui.inverted[class*="vertically divided"].grid > .row:before { + 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: 5rem; + margin-right: 5rem; + width: calc(100% - 5rem ); +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: 1em 0em; + box-shadow: 0px 0px 0px 1px #d4d4d5; +} +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + box-shadow: 0px -1px 0px 0px #d4d4d5; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + box-shadow: -1px 0px 0px 0px #d4d4d5; +} +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + 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 { + box-shadow: none; + margin: 0em; +} +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: top; + -webkit-align-self: flex-start !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: middle; + -webkit-align-self: center !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: bottom; + -webkit-align-self: flex-end !important; + -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: -webkit-inline-flex !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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; + -webkit-flex-grow: 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 { + text-align: left; + -webkit-align-self: inherit; + -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 { + text-align: center; + -webkit-align-self: inherit; + -ms-flex-item-align: inherit; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + -webkit-box-pack: center; + -webkit-justify-content: 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 { + text-align: right; + -webkit-align-self: inherit; + -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 { + text-align: justify; + -webkit-hyphens: auto; + -moz-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; + -webkit-flex-grow: 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; + -webkit-flex-grow: 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; + -webkit-flex-direction: row-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; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + 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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + 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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + +/* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + +/* Celled Reversed */ + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + 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; + 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; + } +} + +/* Mobily 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; + 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; + 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); + box-shadow: none !important; + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } + .ui.stackable.celled.grid > .row { + 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 100755 index 0000000..de70849 --- /dev/null +++ b/semantic/components/grid.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0;margin:-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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:inherit;-webkit-justify-content:inherit;-ms-flex-pack:inherit;justify-content:inherit;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%!important;padding:1rem 0}.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;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin:1rem}.ui.grid .column+.ui.vertical.divider{height:calc(50% - 1rem)}.ui.grid>.column:last-child>.horizontal.segment,.ui.grid>.row>.column:last-child>.horizontal.segment{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,.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{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;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ui.centered.grid>.column:not(.aligned):not(.row),.ui.centered.grid>.row>.column:not(.aligned),.ui.grid .centered.row>.column:not(.aligned){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{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;position:relative}.ui.divided.grid:not([class*="vertically divided"])>.column:first-child,.ui.divided.grid:not([class*="vertically divided"])>.row>.column:first-child{box-shadow:none}.ui.grid>.divided.row>.column{box-shadow:-1px 0 0 0 rgba(34,36,38,.15)}.ui.grid>.divided.row>.column:first-child{box-shadow:none}.ui[class*="vertically divided"].grid>.row:before{position:absolute;content:"";top:0;left:0;width:calc(100% - 2rem);height:1px;margin:0 1rem;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{box-shadow:none}.ui.inverted.divided.grid:not([class*="vertically divided"])>.column:not(.row),.ui.inverted.divided.grid:not([class*="vertically divided"])>.row>.column{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{box-shadow:none}.ui.inverted[class*="vertically divided"].grid>.row:before{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:5rem;margin-right:5rem;width:calc(100% - 5rem)}.ui.celled.grid{width:100%;margin:1em 0;box-shadow:0 0 0 1px #d4d4d5}.ui.celled.grid>.row{width:100%!important;margin:0;padding:0;box-shadow:0 -1px 0 0 #d4d4d5}.ui.celled.grid>.column:not(.row),.ui.celled.grid>.row>.column{box-shadow:-1px 0 0 0 #d4d4d5;padding:1em}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{box-shadow:none}.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{box-shadow:none;margin:0}.ui[class*="internally celled"].grid>.row:first-child,.ui[class*="internally celled"].grid>.row>.column:first-child{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;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;vertical-align:top;-webkit-align-self:flex-start!important;-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;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;vertical-align:middle;-webkit-align-self:center!important;-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;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;vertical-align:bottom;-webkit-align-self:flex-end!important;-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:-webkit-inline-flex!important;display:-ms-inline-flexbox!important;display:inline-flex!important;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-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;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.ui.grid>.row>[class*="left aligned"].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;-webkit-align-self:inherit;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.row>[class*="center aligned"].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;-webkit-align-self:inherit;-ms-flex-item-align:inherit;align-self:inherit}.ui[class*="center aligned"].grid{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ui.grid>.row>[class*="right aligned"].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;-webkit-align-self:inherit;-ms-flex-item-align:inherit;align-self:inherit}.ui.grid>.justified.column.column,.ui.grid>.justified.row>.column,.ui.grid>.row>.justified.column,.ui.justified.grid>.column,.ui.justified.grid>.row>.column{text-align:justify;-webkit-hyphens:auto;-moz-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;-webkit-flex-grow: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;-webkit-flex-grow: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;-webkit-flex-direction:row-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;-webkit-flex-direction:column-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{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{box-shadow:none}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:first-child:before{box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"]>.row:last-child:before{box-shadow:none}.ui[class*="mobile reversed"].celled.grid>.row>.column:first-child{box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="mobile reversed"].celled.grid>.row>.column:last-child{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;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="tablet vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-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{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{box-shadow:none}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:first-child:before{box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"]>.row:last-child:before{box-shadow:none}.ui[class*="tablet reversed"].celled.grid>.row>.column:first-child{box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="tablet reversed"].celled.grid>.row>.column:last-child{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;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.ui[class*="computer vertically reversed"].grid{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-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{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{box-shadow:none}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:first-child:before{box-shadow:0 -1px 0 0 rgba(34,36,38,.15)}.ui.grid[class*="vertically divided"][class*="computer vertically reversed"]>.row:last-child:before{box-shadow:none}.ui[class*="computer reversed"].celled.grid>.row>.column:first-child{box-shadow:-1px 0 0 0 #d4d4d5}.ui[class*="computer reversed"].celled.grid>.row>.column:last-child{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;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.grid>[class*="four column"].doubling.row.row>.column,.ui[class*="three column"].doubling.grid>.column:not(.row),.ui[class*="three column"].doubling.grid>.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.grid>[class*="six column"].doubling.row.row>.column,.ui.grid>[class*="seven column"].doubling.row.row>.column,.ui[class*="five column"].doubling.grid>.column:not(.row),.ui[class*="five column"].doubling.grid>.row>.column,.ui[class*="six column"].doubling.grid>.column:not(.row),.ui[class*="six column"].doubling.grid>.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.grid>[class*="nine column"].doubling.row.row>.column,.ui[class*="eight column"].doubling.grid>.column:not(.row),.ui[class*="eight column"].doubling.grid>.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.grid>[class*="eleven column"].doubling.row.row>.column,.ui[class*="ten column"].doubling.grid>.column:not(.row),.ui[class*="ten column"].doubling.grid>.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.grid>[class*="thirteen column"].doubling.row.row>.column,.ui[class*="twelve column"].doubling.grid>.column:not(.row),.ui[class*="twelve column"].doubling.grid>.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.grid>[class*="fifteen column"].doubling.row.row>.column,.ui[class*="fourteen column"].doubling.grid>.column:not(.row),.ui[class*="fourteen column"].doubling.grid>.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;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.grid>[class*="four column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="five column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="six column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="seven column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="eight 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,.ui[class*="four column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="four column"].doubling:not(.stackable).grid>.row>.column,.ui[class*="five column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="five column"].doubling:not(.stackable).grid>.row>.column,.ui[class*="six column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="six column"].doubling:not(.stackable).grid>.row>.column,.ui[class*="seven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="seven column"].doubling:not(.stackable).grid>.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*="ten column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="eleven column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="twelve column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="thirteen column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="nine 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,.ui[class*="eleven column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="eleven column"].doubling:not(.stackable).grid>.row>.column,.ui[class*="twelve column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="twelve column"].doubling:not(.stackable).grid>.row>.column,.ui[class*="thirteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="thirteen column"].doubling:not(.stackable).grid>.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*="fourteen column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="fifteen column"].doubling:not(.stackable).row.row>.column,.ui.grid>[class*="sixteen 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,.ui[class*="fifteen column"].doubling:not(.stackable).grid>.column:not(.row),.ui[class*="fifteen column"].doubling:not(.stackable).grid>.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}.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!important;box-shadow:none!important;padding: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);box-shadow:none!important;padding-top:2rem!important;padding-bottom:2rem!important}.ui.stackable.celled.grid>.row{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}.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="widescreen 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.grid.grid.grid>[class*="computer only"].column:not(.mobile),.ui.grid.grid.grid>[class*="computer only"].row: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.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui[class*="tablet only"].grid.grid.grid:not(.mobile),.ui[class*="computer only"].grid.grid.grid:not(.mobile),.ui[class*="large screen only"].grid.grid.grid: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*="computer only"].column:not(.tablet),.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="mobile 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.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui.grid.grid.grid>[class*="mobile only"].column:not(.tablet),.ui.grid.grid.grid>[class*="mobile only"].row:not(.tablet),.ui[class*="computer only"].grid.grid.grid:not(.tablet),.ui[class*="large screen only"].grid.grid.grid:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),.ui[class*="mobile only"].grid.grid.grid:not(.tablet){display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>.row>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="mobile 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.grid.grid.grid>[class*="large screen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="large screen only"].row:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer),.ui[class*="large screen only"].grid.grid.grid:not(.mobile),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>.row>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>.row>[class*="mobile 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.grid.grid.grid>[class*="widescreen only"].column:not(.mobile),.ui.grid.grid.grid>[class*="widescreen only"].row:not(.mobile),.ui.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer),.ui[class*="widescreen only"].grid.grid.grid:not(.mobile),.ui[class*="mobile only"].grid.grid.grid:not(.computer){display:none!important}}@media only screen and (min-width:1920px){.ui.grid.grid.grid>.row>[class*="tablet only"].column:not(.computer),.ui.grid.grid.grid>.row>[class*="mobile 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.grid.grid.grid>[class*="mobile only"].column:not(.computer),.ui.grid.grid.grid>[class*="mobile only"].row:not(.computer),.ui[class*="tablet only"].grid.grid.grid:not(.computer),.ui[class*="mobile 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 100755 index 0000000..29a3623 --- /dev/null +++ b/semantic/components/header.css @@ -0,0 +1,721 @@ +/*! + * # Semantic UI 2.1.7 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Header +*******************************/ + + +/* Standard */ +.ui.header { + border: none; + margin: calc(2rem - 0.14285em ) 0em 1rem; + padding: 0em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + line-height: 1.2857em; + text-transform: none; + color: rgba(0, 0, 0, 0.87); +} +.ui.header:first-child { + margin-top: -0.14285em; +} +.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: 0.14285em; + vertical-align: middle; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: 0.75rem; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image, +.ui.header > img { + display: inline-block; + margin-top: 0.14285em; + width: 2.5em; + height: auto; + vertical-align: middle; +} +.ui.header > .image: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.714rem; +} +h3.ui.header { + font-size: 1.28rem; +} +h4.ui.header { + font-size: 1.071rem; +} +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.714em; +} +.ui.medium.header { + font-size: 1.28em; +} +.ui.small.header { + font-size: 1.071em; +} +.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.71428571em; +} +.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; +} +.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-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + 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; +} + +/*------------------- + Fittted +--------------------*/ + +.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.71428571rem 1rem; + 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.71428571rem 1rem; + margin-left: -1px; + margin-right: -1px; + 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.28em; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/header.min.css b/semantic/components/header.min.css new file mode 100755 index 0000000..be3944e --- /dev/null +++ b/semantic/components/header.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.header{border:none;margin:calc(2rem - .14285em) 0 1rem;padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:700;line-height:1.2857em;text-transform:none;color:rgba(0,0,0,.87)}.ui.header:first-child{margin-top:-.14285em}.ui.header:last-child{margin-bottom:0}.ui.header .sub.header{display:block;font-weight:400;padding:0;margin:0;line-height:1.2em;color:rgba(0,0,0,.6)}.ui.header>.icon{display:table-cell;opacity:1;font-size:1.5em;padding-top:.14285em;vertical-align:middle}.ui.header .icon:only-child{display:inline-block;padding:0;margin-right:.75rem}.ui.header>.image,.ui.header>img{display:inline-block;margin-top:.14285em;width:2.5em;height:auto;vertical-align:middle}.ui.header>.image: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.714rem}h3.ui.header{font-size:1.28rem}h4.ui.header{font-size:1.071rem}h5.ui.header{font-size:1rem}h1.ui.header .sub.header,h2.ui.header .sub.header{font-size:1.14285714rem}h3.ui.header .sub.header,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.714em}.ui.medium.header{font-size:1.28em}.ui.small.header{font-size:1.071em}.ui.tiny.header{font-size:1em}.ui.huge.header .sub.header,.ui.large.header .sub.header{font-size:1.14285714rem}.ui.header .sub.header,.ui.small.header .sub.header{font-size:1rem}.ui.tiny.header .sub.header{font-size:.92857143rem}.ui.small.sub.header{font-size:.71428571em}.ui.sub.header{padding:0;margin-bottom:.14285714rem;font-weight:700;text-transform:uppercase;color:'';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}.ui.icon.header .circular.icon,.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:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) #545454;background:linear-gradient(transparent,rgba(0,0,0,.05)) #545454;box-shadow:none;border-color:transparent}.ui.inverted.block.header{background:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) #545454;background:linear-gradient(transparent,rgba(0,0,0,.05)) #545454;box-shadow:none;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:.71428571rem 1rem;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:.71428571rem 1rem;margin-left:-1px;margin-right:-1px;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.28em} \ No newline at end of file diff --git a/semantic/components/icon.css b/semantic/components/icon.css new file mode 100755 index 0000000..de5ef62 --- /dev/null +++ b/semantic/components/icon.css @@ -0,0 +1,2590 @@ +/*! + * # Semantic UI 2.1.7 - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon { + cursor: pointer; + opacity: 0.8; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} +i.link.icon:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + padding: 0.5em 0.5em !important; + 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; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + width: 2em; + height: 2em; + padding: 0.5em 0.41em !important; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; +} +i.bordered.inverted.icon { + border: 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.bordeblack.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.71428571rem; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: 0.85714286rem; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: 0.92857143em; +} +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%); + -ms-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; + -ms-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; + -ms-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 .inverted.corner.icon { + text-shadow: -1px -1px 0 #1b1c1d, 1px -1px 0 #1b1c1d, -1px 1px 0 #1b1c1d, 1px 1px 0 #1b1c1d; +} +/* + * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, 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 +*******************************/ + + +/* Web Content */ +i.icon.search:before { + content: "\f002"; +} +i.icon.mail.outline:before { + content: "\f003"; +} +i.icon.external:before { + content: "\f08e"; +} +i.icon.signal:before { + content: "\f012"; +} +i.icon.setting:before { + content: "\f013"; +} +i.icon.home:before { + content: "\f015"; +} +i.icon.inbox:before { + content: "\f01c"; +} +i.icon.browser:before { + content: "\f022"; +} +i.icon.tag:before { + content: "\f02b"; +} +i.icon.tags:before { + content: "\f02c"; +} +i.icon.calendar:before { + content: "\f073"; +} +i.icon.comment:before { + content: "\f075"; +} +i.icon.comments:before { + content: "\f086"; +} +i.icon.shop:before { + content: "\f07a"; +} +i.icon.privacy:before { + content: "\f084"; +} +i.icon.settings:before { + content: "\f085"; +} +i.icon.trophy:before { + content: "\f091"; +} +i.icon.payment:before { + content: "\f09d"; +} +i.icon.feed:before { + content: "\f09e"; +} +i.icon.alarm.outline:before { + content: "\f0a2"; +} +i.icon.tasks:before { + content: "\f0ae"; +} +i.icon.cloud:before { + content: "\f0c2"; +} +i.icon.lab:before { + content: "\f0c3"; +} +i.icon.mail:before { + content: "\f0e0"; +} +i.icon.idea:before { + content: "\f0eb"; +} +i.icon.dashboard:before { + content: "\f0e4"; +} +i.icon.sitemap:before { + content: "\f0e8"; +} +i.icon.alarm:before { + content: "\f0f3"; +} +i.icon.terminal:before { + content: "\f120"; +} +i.icon.code:before { + content: "\f121"; +} +i.icon.protect:before { + content: "\f132"; +} +i.icon.calendar.outline:before { + content: "\f133"; +} +i.icon.ticket:before { + content: "\f145"; +} +i.icon.external.square:before { + content: "\f14c"; +} +i.icon.map:before { + content: "\f14e"; +} +i.icon.bug:before { + content: "\f188"; +} +i.icon.mail.square:before { + content: "\f199"; +} +i.icon.history:before { + content: "\f1da"; +} +i.icon.options:before { + content: "\f1de"; +} +i.icon.comment.outline:before { + content: "\f0e5"; +} +i.icon.comments.outline:before { + content: "\f0e6"; +} +i.icon.text.telephone:before { + content: "\f1e4"; +} +i.icon.find:before { + content: "\f1e5"; +} +i.icon.wifi:before { + content: "\f1eb"; +} +i.icon.alarm.slash:before { + content: "\f1f6"; +} +i.icon.alarm.slash.outline:before { + content: "\f1f7"; +} +i.icon.copyright:before { + content: "\f1f9"; +} +i.icon.at:before { + content: "\f1fa"; +} +i.icon.eyedropper:before { + content: "\f1fb"; +} +i.icon.paint.brush:before { + content: "\f1fc"; +} +i.icon.heartbeat:before { + content: "\f21e"; +} + +/* User Actions */ +i.icon.download:before { + content: "\f019"; +} +i.icon.repeat:before { + content: "\f01e"; +} +i.icon.refresh:before { + content: "\f021"; +} +i.icon.lock:before { + content: "\f023"; +} +i.icon.bookmark:before { + content: "\f02e"; +} +i.icon.print:before { + content: "\f02f"; +} +i.icon.write:before { + content: "\f040"; +} +i.icon.theme:before { + content: "\f043"; +} +i.icon.adjust:before { + content: "\f042"; +} +i.icon.edit:before { + content: "\f044"; +} +i.icon.external.share:before { + content: "\f045"; +} +i.icon.ban:before { + content: "\f05e"; +} +i.icon.mail.forward:before { + content: "\f064"; +} +i.icon.share:before { + content: "\f064"; +} +i.icon.expand:before { + content: "\f065"; +} +i.icon.compress:before { + content: "\f066"; +} +i.icon.unhide:before { + content: "\f06e"; +} +i.icon.hide:before { + content: "\f070"; +} +i.icon.random:before { + content: "\f074"; +} +i.icon.retweet:before { + content: "\f079"; +} +i.icon.sign.out:before { + content: "\f08b"; +} +i.icon.pin:before { + content: "\f08d"; +} +i.icon.sign.in:before { + content: "\f090"; +} +i.icon.upload:before { + content: "\f093"; +} +i.icon.call:before { + content: "\f095"; +} +i.icon.call.square:before { + content: "\f098"; +} +i.icon.remove.bookmark:before { + content: "\f097"; +} +i.icon.unlock:before { + content: "\f09c"; +} +i.icon.configure:before { + content: "\f0ad"; +} +i.icon.filter:before { + content: "\f0b0"; +} +i.icon.wizard:before { + content: "\f0d0"; +} +i.icon.undo:before { + content: "\f0e2"; +} +i.icon.exchange:before { + content: "\f0ec"; +} +i.icon.cloud.download:before { + content: "\f0ed"; +} +i.icon.cloud.upload:before { + content: "\f0ee"; +} +i.icon.reply:before { + content: "\f112"; +} +i.icon.reply.all:before { + content: "\f122"; +} +i.icon.erase:before { + content: "\f12d"; +} +i.icon.unlock.alternate:before { + content: "\f13e"; +} +i.icon.archive:before { + content: "\f187"; +} +i.icon.translate:before { + content: "\f1ab"; +} +i.icon.recycle:before { + content: "\f1b8"; +} +i.icon.send:before { + content: "\f1d8"; +} +i.icon.send.outline:before { + content: "\f1d9"; +} +i.icon.share.alternate:before { + content: "\f1e0"; +} +i.icon.share.alternate.square:before { + content: "\f1e1"; +} +i.icon.wait:before { + content: "\f017"; +} +i.icon.write.square:before { + content: "\f14b"; +} +i.icon.share.square:before { + content: "\f14d"; +} +i.icon.add.to.cart:before { + content: "\f217"; +} +i.icon.in.cart:before { + content: "\f218"; +} +i.icon.add.user:before { + content: "\f234"; +} +i.icon.remove.user:before { + content: "\f235"; +} + +/* Messages */ +i.icon.help.circle:before { + content: "\f059"; +} +i.icon.info.circle:before { + content: "\f05a"; +} +i.icon.warning:before { + content: "\f12a"; +} +i.icon.warning.circle:before { + content: "\f06a"; +} +i.icon.warning.sign:before { + content: "\f071"; +} +i.icon.help:before { + content: "\f128"; +} +i.icon.info:before { + content: "\f129"; +} +i.icon.announcement:before { + content: "\f0a1"; +} +i.icon.birthday:before { + content: "\f1fd"; +} + +/* Users */ +i.icon.users:before { + content: "\f0c0"; +} +i.icon.doctor:before { + content: "\f0f0"; +} +i.icon.child:before { + content: "\f1ae"; +} +i.icon.user:before { + content: "\f007"; +} +i.icon.handicap:before { + content: "\f193"; +} +i.icon.student:before { + content: "\f19d"; +} +i.icon.spy:before { + content: "\f21b"; +} + +/* Gender & Sexuality */ +i.icon.female:before { + content: "\f182"; +} +i.icon.male:before { + content: "\f183"; +} +i.icon.woman:before { + content: "\f221"; +} +i.icon.man:before { + content: "\f222"; +} +i.icon.non.binary.transgender:before { + content: "\f223"; +} +i.icon.intergender:before { + content: "\f224"; +} +i.icon.transgender:before { + content: "\f225"; +} +i.icon.lesbian:before { + content: "\f226"; +} +i.icon.gay:before { + content: "\f227"; +} +i.icon.heterosexual:before { + content: "\f228"; +} +i.icon.other.gender:before { + content: "\f229"; +} +i.icon.other.gender.vertical:before { + content: "\f22a"; +} +i.icon.other.gender.horizontal:before { + content: "\f22b"; +} +i.icon.neuter:before { + content: "\f22c"; +} + +/* View Adjustment */ +i.icon.grid.layout:before { + content: "\f00a"; +} +i.icon.list.layout:before { + content: "\f00b"; +} +i.icon.block.layout:before { + content: "\f009"; +} +i.icon.zoom:before { + content: "\f00e"; +} +i.icon.zoom.out:before { + content: "\f010"; +} +i.icon.resize.vertical:before { + content: "\f07d"; +} +i.icon.resize.horizontal:before { + content: "\f07e"; +} +i.icon.maximize:before { + content: "\f0b2"; +} +i.icon.crop:before { + content: "\f125"; +} + +/* Literal Objects */ +i.icon.cocktail:before { + content: "\f000"; +} +i.icon.road:before { + content: "\f018"; +} +i.icon.flag:before { + content: "\f024"; +} +i.icon.book:before { + content: "\f02d"; +} +i.icon.gift:before { + content: "\f06b"; +} +i.icon.leaf:before { + content: "\f06c"; +} +i.icon.fire:before { + content: "\f06d"; +} +i.icon.plane:before { + content: "\f072"; +} +i.icon.magnet:before { + content: "\f076"; +} +i.icon.legal:before { + content: "\f0e3"; +} +i.icon.lemon:before { + content: "\f094"; +} +i.icon.world:before { + content: "\f0ac"; +} +i.icon.travel:before { + content: "\f0b1"; +} +i.icon.shipping:before { + content: "\f0d1"; +} +i.icon.money:before { + content: "\f0d6"; +} +i.icon.lightning:before { + content: "\f0e7"; +} +i.icon.rain:before { + content: "\f0e9"; +} +i.icon.treatment:before { + content: "\f0f1"; +} +i.icon.suitcase:before { + content: "\f0f2"; +} +i.icon.bar:before { + content: "\f0fc"; +} +i.icon.flag.outline:before { + content: "\f11d"; +} +i.icon.flag.checkered:before { + content: "\f11e"; +} +i.icon.puzzle:before { + content: "\f12e"; +} +i.icon.fire.extinguisher:before { + content: "\f134"; +} +i.icon.rocket:before { + content: "\f135"; +} +i.icon.anchor:before { + content: "\f13d"; +} +i.icon.bullseye:before { + content: "\f140"; +} +i.icon.sun:before { + content: "\f185"; +} +i.icon.moon:before { + content: "\f186"; +} +i.icon.fax:before { + content: "\f1ac"; +} +i.icon.life.ring:before { + content: "\f1cd"; +} +i.icon.bomb:before { + content: "\f1e2"; +} +i.icon.soccer:before { + content: "\f1e3"; +} +i.icon.calculator:before { + content: "\f1ec"; +} +i.icon.diamond:before { + content: "\f219"; +} + +/* Shapes */ +i.icon.crosshairs:before { + content: "\f05b"; +} +i.icon.asterisk:before { + content: "\f069"; +} +i.icon.certificate:before { + content: "\f0a3"; +} +i.icon.circle:before { + content: "\f111"; +} +i.icon.quote.left:before { + content: "\f10d"; +} +i.icon.quote.right:before { + content: "\f10e"; +} +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} +i.icon.ellipsis.vertical:before { + content: "\f142"; +} +i.icon.cube:before { + content: "\f1b2"; +} +i.icon.cubes:before { + content: "\f1b3"; +} +i.icon.circle.notched:before { + content: "\f1ce"; +} +i.icon.circle.thin:before { + content: "\f1db"; +} +i.icon.square.outline:before { + content: "\f096"; +} +i.icon.square:before { + content: "\f0c8"; +} + +/* Item Selection */ +i.icon.checkmark:before { + content: "\f00c"; +} +i.icon.remove:before { + content: "\f00d"; +} +i.icon.checkmark.box:before { + content: "\f046"; +} +i.icon.move:before { + content: "\f047"; +} +i.icon.add.circle:before { + content: "\f055"; +} +i.icon.minus.circle:before { + content: "\f056"; +} +i.icon.remove.circle:before { + content: "\f057"; +} +i.icon.check.circle:before { + content: "\f058"; +} +i.icon.remove.circle.outline:before { + content: "\f05c"; +} +i.icon.check.circle.outline:before { + content: "\f05d"; +} +i.icon.plus:before { + content: "\f067"; +} +i.icon.minus:before { + content: "\f068"; +} +i.icon.add.square:before { + content: "\f0fe"; +} +i.icon.radio:before { + content: "\f10c"; +} +i.icon.selected.radio:before { + content: "\f192"; +} +i.icon.minus.square:before { + content: "\f146"; +} +i.icon.minus.square.outline:before { + content: "\f147"; +} +i.icon.check.square:before { + content: "\f14a"; +} +i.icon.plus.square.outline:before { + content: "\f196"; +} +i.icon.toggle.off:before { + content: "\f204"; +} +i.icon.toggle.on:before { + content: "\f205"; +} + +/* Media */ +i.icon.film:before { + content: "\f008"; +} +i.icon.sound:before { + content: "\f025"; +} +i.icon.photo:before { + content: "\f030"; +} +i.icon.bar.chart:before { + content: "\f080"; +} +i.icon.camera.retro:before { + content: "\f083"; +} +i.icon.newspaper:before { + content: "\f1ea"; +} +i.icon.area.chart:before { + content: "\f1fe"; +} +i.icon.pie.chart:before { + content: "\f200"; +} +i.icon.line.chart:before { + content: "\f201"; +} + +/* Pointers */ +i.icon.arrow.circle.outline.down:before { + content: "\f01a"; +} +i.icon.arrow.circle.outline.up:before { + content: "\f01b"; +} +i.icon.chevron.left:before { + content: "\f053"; +} +i.icon.chevron.right:before { + content: "\f054"; +} +i.icon.arrow.left:before { + content: "\f060"; +} +i.icon.arrow.right:before { + content: "\f061"; +} +i.icon.arrow.up:before { + content: "\f062"; +} +i.icon.arrow.down:before { + content: "\f063"; +} +i.icon.chevron.up:before { + content: "\f077"; +} +i.icon.chevron.down:before { + content: "\f078"; +} +i.icon.pointing.right:before { + content: "\f0a4"; +} +i.icon.pointing.left:before { + content: "\f0a5"; +} +i.icon.pointing.up:before { + content: "\f0a6"; +} +i.icon.pointing.down:before { + content: "\f0a7"; +} +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.circle.down:before { + content: "\f0ab"; +} +i.icon.caret.down:before { + content: "\f0d7"; +} +i.icon.caret.up:before { + content: "\f0d8"; +} +i.icon.caret.left:before { + content: "\f0d9"; +} +i.icon.caret.right:before { + content: "\f0da"; +} +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.double.down:before { + content: "\f103"; +} +i.icon.angle.left:before { + content: "\f104"; +} +i.icon.angle.right:before { + content: "\f105"; +} +i.icon.angle.up:before { + content: "\f106"; +} +i.icon.angle.down:before { + content: "\f107"; +} +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.circle.down:before { + content: "\f13a"; +} +i.icon.toggle.down:before { + content: "\f150"; +} +i.icon.toggle.up:before { + content: "\f151"; +} +i.icon.toggle.right:before { + content: "\f152"; +} +i.icon.long.arrow.down:before { + content: "\f175"; +} +i.icon.long.arrow.up:before { + content: "\f176"; +} +i.icon.long.arrow.left:before { + content: "\f177"; +} +i.icon.long.arrow.right:before { + content: "\f178"; +} +i.icon.arrow.circle.outline.right:before { + content: "\f18e"; +} +i.icon.arrow.circle.outline.left:before { + content: "\f190"; +} +i.icon.toggle.left:before { + content: "\f191"; +} + +/* Computer */ +i.icon.power:before { + content: "\f011"; +} +i.icon.trash:before { + content: "\f1f8"; +} +i.icon.trash.outline:before { + content: "\f014"; +} +i.icon.disk.outline:before { + content: "\f0a0"; +} +i.icon.desktop:before { + content: "\f108"; +} +i.icon.laptop:before { + content: "\f109"; +} +i.icon.tablet:before { + content: "\f10a"; +} +i.icon.mobile:before { + content: "\f10b"; +} +i.icon.game:before { + content: "\f11b"; +} +i.icon.keyboard:before { + content: "\f11c"; +} +i.icon.plug:before { + content: "\f1e6"; +} + +/* File System */ +i.icon.folder:before { + content: "\f07b"; +} +i.icon.folder.open:before { + content: "\f07c"; +} +i.icon.level.up:before { + content: "\f148"; +} +i.icon.level.down:before { + content: "\f149"; +} +i.icon.file:before { + content: "\f15b"; +} +i.icon.file.outline:before { + content: "\f016"; +} +i.icon.file.text:before { + content: "\f15c"; +} +i.icon.file.text.outline:before { + content: "\f0f6"; +} +i.icon.folder.outline:before { + content: "\f114"; +} +i.icon.folder.open.outline:before { + content: "\f115"; +} +i.icon.file.pdf.outline:before { + content: "\f1c1"; +} +i.icon.file.word.outline:before { + content: "\f1c2"; +} +i.icon.file.excel.outline:before { + content: "\f1c3"; +} +i.icon.file.powerpoint.outline:before { + content: "\f1c4"; +} +i.icon.file.image.outline:before { + content: "\f1c5"; +} +i.icon.file.archive.outline:before { + content: "\f1c6"; +} +i.icon.file.audio.outline:before { + content: "\f1c7"; +} +i.icon.file.video.outline:before { + content: "\f1c8"; +} +i.icon.file.code.outline:before { + content: "\f1c9"; +} + +/* Technologies */ +i.icon.barcode:before { + content: "\f02a"; +} +i.icon.qrcode:before { + content: "\f029"; +} +i.icon.fork:before { + content: "\f126"; +} +i.icon.html5:before { + content: "\f13b"; +} +i.icon.css3:before { + content: "\f13c"; +} +i.icon.rss:before { + content: "\f09e"; +} +i.icon.rss.square:before { + content: "\f143"; +} +i.icon.openid:before { + content: "\f19b"; +} +i.icon.database:before { + content: "\f1c0"; +} +i.icon.server:before { + content: "\f233"; +} + +/* Rating */ +i.icon.heart:before { + content: "\f004"; +} +i.icon.star:before { + content: "\f005"; +} +i.icon.empty.star:before { + content: "\f006"; +} +i.icon.thumbs.outline.up:before { + content: "\f087"; +} +i.icon.thumbs.outline.down:before { + content: "\f088"; +} +i.icon.star.half:before { + content: "\f089"; +} +i.icon.empty.heart:before { + content: "\f08a"; +} +i.icon.smile:before { + content: "\f118"; +} +i.icon.frown:before { + content: "\f119"; +} +i.icon.meh:before { + content: "\f11a"; +} +i.icon.star.half.empty:before { + content: "\f123"; +} +i.icon.thumbs.up:before { + content: "\f164"; +} +i.icon.thumbs.down:before { + content: "\f165"; +} + +/* Audio */ +i.icon.music:before { + content: "\f001"; +} +i.icon.video.play.outline:before { + content: "\f01d"; +} +i.icon.volume.off:before { + content: "\f026"; +} +i.icon.volume.down:before { + content: "\f027"; +} +i.icon.volume.up:before { + content: "\f028"; +} +i.icon.record:before { + content: "\f03d"; +} +i.icon.step.backward:before { + content: "\f048"; +} +i.icon.fast.backward:before { + content: "\f049"; +} +i.icon.backward:before { + content: "\f04a"; +} +i.icon.play:before { + content: "\f04b"; +} +i.icon.pause:before { + content: "\f04c"; +} +i.icon.stop:before { + content: "\f04d"; +} +i.icon.forward:before { + content: "\f04e"; +} +i.icon.fast.forward:before { + content: "\f050"; +} +i.icon.step.forward:before { + content: "\f051"; +} +i.icon.eject:before { + content: "\f052"; +} +i.icon.unmute:before { + content: "\f130"; +} +i.icon.mute:before { + content: "\f131"; +} +i.icon.video.play:before { + content: "\f144"; +} +i.icon.closed.captioning:before { + content: "\f20a"; +} + +/* Map, Locations, & Transportation */ +i.icon.marker:before { + content: "\f041"; +} +i.icon.coffee:before { + content: "\f0f4"; +} +i.icon.food:before { + content: "\f0f5"; +} +i.icon.building.outline:before { + content: "\f0f7"; +} +i.icon.hospital:before { + content: "\f0f8"; +} +i.icon.emergency:before { + content: "\f0f9"; +} +i.icon.first.aid:before { + content: "\f0fa"; +} +i.icon.military:before { + content: "\f0fb"; +} +i.icon.h:before { + content: "\f0fd"; +} +i.icon.location.arrow:before { + content: "\f124"; +} +i.icon.space.shuttle:before { + content: "\f197"; +} +i.icon.university:before { + content: "\f19c"; +} +i.icon.building:before { + content: "\f1ad"; +} +i.icon.paw:before { + content: "\f1b0"; +} +i.icon.spoon:before { + content: "\f1b1"; +} +i.icon.car:before { + content: "\f1b9"; +} +i.icon.taxi:before { + content: "\f1ba"; +} +i.icon.tree:before { + content: "\f1bb"; +} +i.icon.bicycle:before { + content: "\f206"; +} +i.icon.bus:before { + content: "\f207"; +} +i.icon.ship:before { + content: "\f21a"; +} +i.icon.motorcycle:before { + content: "\f21c"; +} +i.icon.street.view:before { + content: "\f21d"; +} +i.icon.hotel:before { + content: "\f236"; +} +i.icon.train:before { + content: "\f238"; +} +i.icon.subway:before { + content: "\f239"; +} + +/* Tables */ +i.icon.table:before { + content: "\f0ce"; +} +i.icon.columns:before { + content: "\f0db"; +} +i.icon.sort:before { + content: "\f0dc"; +} +i.icon.sort.ascending:before { + content: "\f0de"; +} +i.icon.sort.descending:before { + content: "\f0dd"; +} +i.icon.sort.alphabet.ascending:before { + content: "\f15d"; +} +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} +i.icon.sort.content.ascending:before { + content: "\f160"; +} +i.icon.sort.content.descending:before { + content: "\f161"; +} +i.icon.sort.numeric.ascending:before { + content: "\f162"; +} +i.icon.sort.numeric.descending:before { + content: "\f163"; +} + +/* Text Editor */ +i.icon.font:before { + content: "\f031"; +} +i.icon.bold:before { + content: "\f032"; +} +i.icon.italic:before { + content: "\f033"; +} +i.icon.text.height:before { + content: "\f034"; +} +i.icon.text.width:before { + content: "\f035"; +} +i.icon.align.left:before { + content: "\f036"; +} +i.icon.align.center:before { + content: "\f037"; +} +i.icon.align.right:before { + content: "\f038"; +} +i.icon.align.justify:before { + content: "\f039"; +} +i.icon.list:before { + content: "\f03a"; +} +i.icon.outdent:before { + content: "\f03b"; +} +i.icon.indent:before { + content: "\f03c"; +} +i.icon.linkify:before { + content: "\f0c1"; +} +i.icon.cut:before { + content: "\f0c4"; +} +i.icon.copy:before { + content: "\f0c5"; +} +i.icon.attach:before { + content: "\f0c6"; +} +i.icon.save:before { + content: "\f0c7"; +} +i.icon.content:before { + content: "\f0c9"; +} +i.icon.unordered.list:before { + content: "\f0ca"; +} +i.icon.ordered.list:before { + content: "\f0cb"; +} +i.icon.strikethrough:before { + content: "\f0cc"; +} +i.icon.underline:before { + content: "\f0cd"; +} +i.icon.paste:before { + content: "\f0ea"; +} +i.icon.unlink:before { + content: "\f127"; +} +i.icon.superscript:before { + content: "\f12b"; +} +i.icon.subscript:before { + content: "\f12c"; +} +i.icon.header:before { + content: "\f1dc"; +} +i.icon.paragraph:before { + content: "\f1dd"; +} + +/* Currency */ +i.icon.euro:before { + content: "\f153"; +} +i.icon.pound:before { + content: "\f154"; +} +i.icon.dollar:before { + content: "\f155"; +} +i.icon.rupee:before { + content: "\f156"; +} +i.icon.yen:before { + content: "\f157"; +} +i.icon.ruble:before { + content: "\f158"; +} +i.icon.won:before { + content: "\f159"; +} +i.icon.lira:before { + content: "\f195"; +} +i.icon.shekel:before { + content: "\f20b"; +} + +/* Payment Options */ +i.icon.paypal:before { + content: "\f1ed"; +} +i.icon.paypal.card:before { + content: "\f1f4"; +} +i.icon.google.wallet:before { + content: "\f1ee"; +} +i.icon.visa:before { + content: "\f1f0"; +} +i.icon.mastercard:before { + content: "\f1f1"; +} +i.icon.discover:before { + content: "\f1f2"; +} +i.icon.american.express:before { + content: "\f1f3"; +} +i.icon.stripe:before { + content: "\f1f5"; +} +/* Networks and Websites*/ +i.icon.twitter.square:before { + content: "\f081"; +} +i.icon.facebook.square:before { + content: "\f082"; +} +i.icon.linkedin.square:before { + content: "\f08c"; +} +i.icon.github.square:before { + content: "\f092"; +} +i.icon.twitter:before { + content: "\f099"; +} +i.icon.facebook:before { + content: "\f09a"; +} +i.icon.github:before { + content: "\f09b"; +} +i.icon.pinterest:before { + content: "\f0d2"; +} +i.icon.pinterest.square:before { + content: "\f0d3"; +} +i.icon.google.plus.square:before { + content: "\f0d4"; +} +i.icon.google.plus:before { + content: "\f0d5"; +} +i.icon.linkedin:before { + content: "\f0e1"; +} +i.icon.github.alternate:before { + content: "\f113"; +} +i.icon.maxcdn:before { + content: "\f136"; +} +i.icon.bitcoin:before { + content: "\f15a"; +} +i.icon.youtube.square:before { + content: "\f166"; +} +i.icon.youtube:before { + content: "\f167"; +} +i.icon.xing:before { + content: "\f168"; +} +i.icon.xing.square:before { + content: "\f169"; +} +i.icon.youtube.play:before { + content: "\f16a"; +} +i.icon.dropbox:before { + content: "\f16b"; +} +i.icon.stack.overflow:before { + content: "\f16c"; +} +i.icon.instagram:before { + content: "\f16d"; +} +i.icon.flickr:before { + content: "\f16e"; +} +i.icon.adn:before { + content: "\f170"; +} +i.icon.bitbucket:before { + content: "\f171"; +} +i.icon.bitbucket.square:before { + content: "\f172"; +} +i.icon.tumblr:before { + content: "\f173"; +} +i.icon.tumblr.square:before { + content: "\f174"; +} +i.icon.apple:before { + content: "\f179"; +} +i.icon.windows:before { + content: "\f17a"; +} +i.icon.android:before { + content: "\f17b"; +} +i.icon.linux:before { + content: "\f17c"; +} +i.icon.dribbble:before { + content: "\f17d"; +} +i.icon.skype:before { + content: "\f17e"; +} +i.icon.foursquare:before { + content: "\f180"; +} +i.icon.trello:before { + content: "\f181"; +} +i.icon.gittip:before { + content: "\f184"; +} +i.icon.vk:before { + content: "\f189"; +} +i.icon.weibo:before { + content: "\f18a"; +} +i.icon.renren:before { + content: "\f18b"; +} +i.icon.pagelines:before { + content: "\f18c"; +} +i.icon.stack.exchange:before { + content: "\f18d"; +} +i.icon.vimeo:before { + content: "\f194"; +} +i.icon.slack:before { + content: "\f198"; +} +i.icon.wordpress:before { + content: "\f19a"; +} +i.icon.yahoo:before { + content: "\f19e"; +} +i.icon.google:before { + content: "\f1a0"; +} +i.icon.reddit:before { + content: "\f1a1"; +} +i.icon.reddit.square:before { + content: "\f1a2"; +} +i.icon.stumbleupon.circle:before { + content: "\f1a3"; +} +i.icon.stumbleupon:before { + content: "\f1a4"; +} +i.icon.delicious:before { + content: "\f1a5"; +} +i.icon.digg:before { + content: "\f1a6"; +} +i.icon.pied.piper:before { + content: "\f1a7"; +} +i.icon.pied.piper.alternate:before { + content: "\f1a8"; +} +i.icon.drupal:before { + content: "\f1a9"; +} +i.icon.joomla:before { + content: "\f1aa"; +} +i.icon.behance:before { + content: "\f1b4"; +} +i.icon.behance.square:before { + content: "\f1b5"; +} +i.icon.steam:before { + content: "\f1b6"; +} +i.icon.steam.square:before { + content: "\f1b7"; +} +i.icon.spotify:before { + content: "\f1bc"; +} +i.icon.deviantart:before { + content: "\f1bd"; +} +i.icon.soundcloud:before { + content: "\f1be"; +} +i.icon.vine:before { + content: "\f1ca"; +} +i.icon.codepen:before { + content: "\f1cb"; +} +i.icon.jsfiddle:before { + content: "\f1cc"; +} +i.icon.rebel:before { + content: "\f1d0"; +} +i.icon.empire:before { + content: "\f1d1"; +} +i.icon.git.square:before { + content: "\f1d2"; +} +i.icon.git:before { + content: "\f1d3"; +} +i.icon.hacker.news:before { + content: "\f1d4"; +} +i.icon.tencent.weibo:before { + content: "\f1d5"; +} +i.icon.qq:before { + content: "\f1d6"; +} +i.icon.wechat:before { + content: "\f1d7"; +} +i.icon.slideshare:before { + content: "\f1e7"; +} +i.icon.twitch:before { + content: "\f1e8"; +} +i.icon.yelp:before { + content: "\f1e9"; +} +i.icon.lastfm:before { + content: "\f202"; +} +i.icon.lastfm.square:before { + content: "\f203"; +} +i.icon.ioxhost:before { + content: "\f208"; +} +i.icon.angellist:before { + content: "\f209"; +} +i.icon.meanpath:before { + content: "\f20c"; +} +i.icon.buysellads:before { + content: "\f20d"; +} +i.icon.connectdevelop:before { + content: "\f20e"; +} +i.icon.dashcube:before { + content: "\f210"; +} +i.icon.forumbee:before { + content: "\f211"; +} +i.icon.leanpub:before { + content: "\f212"; +} +i.icon.sellsy:before { + content: "\f213"; +} +i.icon.shirtsinbulk:before { + content: "\f214"; +} +i.icon.simplybuilt:before { + content: "\f215"; +} +i.icon.skyatlas:before { + content: "\f216"; +} +i.icon.whatsapp:before { + content: "\f232"; +} +i.icon.viacoin:before { + content: "\f237"; +} +i.icon.medium:before { + content: "\f23a"; +} + + +/******************************* + Aliases +*******************************/ + +i.icon.like:before { + content: "\f004"; +} +i.icon.favorite:before { + content: "\f005"; +} +i.icon.video:before { + content: "\f008"; +} +i.icon.check:before { + content: "\f00c"; +} +i.icon.close:before { + content: "\f00d"; +} +i.icon.cancel:before { + content: "\f00d"; +} +i.icon.delete:before { + content: "\f00d"; +} +i.icon.x:before { + content: "\f00d"; +} +i.icon.user.times:before { + content: "\f235"; +} +i.icon.user.close:before { + content: "\f235"; +} +i.icon.user.cancel:before { + content: "\f235"; +} +i.icon.user.delete:before { + content: "\f235"; +} +i.icon.user.x:before { + content: "\f235"; +} +i.icon.zoom.in:before { + content: "\f00e"; +} +i.icon.magnify:before { + content: "\f00e"; +} +i.icon.shutdown:before { + content: "\f011"; +} +i.icon.clock:before { + content: "\f017"; +} +i.icon.time:before { + content: "\f017"; +} +i.icon.play.circle.outline:before { + content: "\f01d"; +} +i.icon.headphone:before { + content: "\f025"; +} +i.icon.camera:before { + content: "\f030"; +} +i.icon.video.camera:before { + content: "\f03d"; +} +i.icon.picture:before { + content: "\f03e"; +} +i.icon.pencil:before { + content: "\f040"; +} +i.icon.compose:before { + content: "\f040"; +} +i.icon.point:before { + content: "\f041"; +} +i.icon.tint:before { + content: "\f043"; +} +i.icon.signup:before { + content: "\f044"; +} +i.icon.plus.circle:before { + content: "\f055"; +} +i.icon.dont:before { + content: "\f05e"; +} +i.icon.minimize:before { + content: "\f066"; +} +i.icon.add:before { + content: "\f067"; +} +i.icon.eye:before { + content: "\f06e"; +} +i.icon.attention:before { + content: "\f06a"; +} +i.icon.cart:before { + content: "\f07a"; +} +i.icon.shuffle:before { + content: "\f074"; +} +i.icon.talk:before { + content: "\f075"; +} +i.icon.chat:before { + content: "\f075"; +} +i.icon.shopping.cart:before { + content: "\f07a"; +} +i.icon.bar.graph:before { + content: "\f080"; +} +i.icon.area.graph:before { + content: "\f1fe"; +} +i.icon.pie.graph:before { + content: "\f200"; +} +i.icon.line.graph:before { + content: "\f201"; +} +i.icon.key:before { + content: "\f084"; +} +i.icon.cogs:before { + content: "\f085"; +} +i.icon.discussions:before { + content: "\f086"; +} +i.icon.like.outline:before { + content: "\f087"; +} +i.icon.dislike.outline:before { + content: "\f088"; +} +i.icon.heart.outline:before { + content: "\f08a"; +} +i.icon.log.out:before { + content: "\f08b"; +} +i.icon.thumb.tack:before { + content: "\f08d"; +} +i.icon.winner:before { + content: "\f091"; +} +i.icon.bookmark.outline:before { + content: "\f097"; +} +i.icon.phone:before { + content: "\f095"; +} +i.icon.phone.square:before { + content: "\f098"; +} +i.icon.credit.card:before { + content: "\f09d"; +} +i.icon.hdd.outline:before { + content: "\f0a0"; +} +i.icon.bullhorn:before { + content: "\f0a1"; +} +i.icon.bell:before { + content: "\f0f3"; +} +i.icon.bell.outline:before { + content: "\f0a2"; +} +i.icon.bell.slash:before { + content: "\f1f6"; +} +i.icon.bell.slash.outline:before { + content: "\f1f7"; +} +i.icon.hand.outline.right:before { + content: "\f0a4"; +} +i.icon.hand.outline.left:before { + content: "\f0a5"; +} +i.icon.hand.outline.up:before { + content: "\f0a6"; +} +i.icon.hand.outline.down:before { + content: "\f0a7"; +} +i.icon.globe:before { + content: "\f0ac"; +} +i.icon.wrench:before { + content: "\f0ad"; +} +i.icon.briefcase:before { + content: "\f0b1"; +} +i.icon.group:before { + content: "\f0c0"; +} +i.icon.flask:before { + content: "\f0c3"; +} +i.icon.sidebar:before { + content: "\f0c9"; +} +i.icon.bars:before { + content: "\f0c9"; +} +i.icon.list.ul:before { + content: "\f0ca"; +} +i.icon.list.ol:before { + content: "\f0cb"; +} +i.icon.numbered.list:before { + content: "\f0cb"; +} +i.icon.magic:before { + content: "\f0d0"; +} +i.icon.truck:before { + content: "\f0d1"; +} +i.icon.currency:before { + content: "\f0d6"; +} +i.icon.triangle.down:before { + content: "\f0d7"; +} +i.icon.dropdown:before { + content: "\f0d7"; +} +i.icon.triangle.up:before { + content: "\f0d8"; +} +i.icon.triangle.left:before { + content: "\f0d9"; +} +i.icon.triangle.right:before { + content: "\f0da"; +} +i.icon.envelope:before { + content: "\f0e0"; +} +i.icon.conversation:before { + content: "\f0e6"; +} +i.icon.umbrella:before { + content: "\f0e9"; +} +i.icon.clipboard:before { + content: "\f0ea"; +} +i.icon.lightbulb:before { + content: "\f0eb"; +} +i.icon.ambulance:before { + content: "\f0f9"; +} +i.icon.medkit:before { + content: "\f0fa"; +} +i.icon.fighter.jet:before { + content: "\f0fb"; +} +i.icon.beer:before { + content: "\f0fc"; +} +i.icon.plus.square:before { + content: "\f0fe"; +} +i.icon.computer:before { + content: "\f108"; +} +i.icon.circle.outline:before { + content: "\f10c"; +} +i.icon.intersex:before { + content: "\f10c"; +} +i.icon.asexual:before { + content: "\f10c"; +} +i.icon.spinner:before { + content: "\f110"; +} +i.icon.gamepad:before { + content: "\f11b"; +} +i.icon.star.half.full:before { + content: "\f123"; +} +i.icon.question:before { + content: "\f128"; +} +i.icon.eraser:before { + content: "\f12d"; +} +i.icon.microphone:before { + content: "\f130"; +} +i.icon.microphone.slash:before { + content: "\f131"; +} +i.icon.shield:before { + content: "\f132"; +} +i.icon.target:before { + content: "\f140"; +} +i.icon.play.circle:before { + content: "\f144"; +} +i.icon.pencil.square:before { + content: "\f14b"; +} +i.icon.compass:before { + content: "\f14e"; +} +i.icon.amex:before { + content: "\f1f3"; +} +i.icon.eur:before { + content: "\f153"; +} +i.icon.gbp:before { + content: "\f154"; +} +i.icon.usd:before { + content: "\f155"; +} +i.icon.inr:before { + content: "\f156"; +} +i.icon.cny:before, +i.icon.rmb:before, +i.icon.jpy:before { + content: "\f157"; +} +i.icon.rouble:before, +i.icon.rub:before { + content: "\f158"; +} +i.icon.krw:before { + content: "\f159"; +} +i.icon.btc:before { + content: "\f15a"; +} +i.icon.sheqel:before, +i.icon.ils:before { + content: "\f20b"; +} +i.icon.try:before { + content: "\f195"; +} +i.icon.zip:before { + content: "\f187"; +} +i.icon.dot.circle.outline:before { + content: "\f192"; +} +i.icon.sliders:before { + content: "\f1de"; +} +i.icon.wi-fi:before { + content: "\f1eb"; +} +i.icon.graduation:before { + content: "\f19d"; +} +i.icon.weixin:before { + content: "\f1d7"; +} +i.icon.binoculars:before { + content: "\f1e5"; +} +i.icon.gratipay:before { + content: "\f184"; +} +i.icon.genderless:before { + content: "\f1db"; +} +i.icon.teletype:before { + content: "\f1e4"; +} +i.icon.power.cord:before { + content: "\f1e6"; +} +i.icon.tty:before { + content: "\f1e4"; +} +i.icon.cc:before { + content: "\f20a"; +} +i.icon.plus.cart:before { + content: "\f217"; +} +i.icon.arrow.down.cart:before { + content: "\f218"; +} +i.icon.detective:before { + content: "\f21b"; +} +i.icon.venus:before { + content: "\f221"; +} +i.icon.mars:before { + content: "\f222"; +} +i.icon.mercury:before { + content: "\f223"; +} +i.icon.venus.double:before { + content: "\f226"; +} +i.icon.female.homosexual:before { + content: "\f226"; +} +i.icon.mars.double:before { + content: "\f227"; +} +i.icon.male.homosexual:before { + content: "\f227"; +} +i.icon.venus.mars:before { + content: "\f228"; +} +i.icon.mars.stroke:before { + content: "\f229"; +} +i.icon.mars.alternate:before { + content: "\f229"; +} +i.icon.mars.vertical:before { + content: "\f22a"; +} +i.icon.mars.horizontal:before { + content: "\f22b"; +} +i.icon.mars.stroke.vertical:before { + content: "\f22a"; +} +i.icon.mars.stroke.horizontal:before { + content: "\f22b"; +} +i.icon.facebook.official { + content: "\f230"; +} +i.icon.pinterest.official { + content: "\f231"; +} +i.icon.bed:before { + content: "\f236"; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/icon.min.css b/semantic/components/icon.min.css new file mode 100755 index 0000000..d2e98c6 --- /dev/null +++ b/semantic/components/icon.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.emphasized.icon,i.icon.active,i.icon.hover{opacity:1!important}i.disabled.icon{opacity:.45!important}i.fitted.icon{width:auto;margin:0}i.link.icon{cursor:pointer;opacity:.8;-webkit-transition:opacity .1s ease;transition:opacity .1s ease}i.link.icon:hover{opacity:1!important}i.circular.icon{border-radius:500em!important;line-height:1!important;padding:.5em!important;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset;width:2em!important;height:2em!important}i.circular.inverted.icon{border:none;box-shadow:none}i.flipped.icon,i.horizontally.flipped.icon{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}i.vertically.flipped.icon{-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}i.clockwise.rotated.icon,i.right.rotated.icon,i.rotated.icon{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}i.counterclockwise.rotated.icon,i.left.rotated.icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}i.bordered.icon{line-height:1;vertical-align:baseline;width:2em;height:2em;padding:.5em .41em!important;box-shadow:0 0 0 .1em rgba(0,0,0,.1) inset}i.bordered.inverted.icon{border: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.bordeblack.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:.71428571rem}i.tiny.icon,i.tiny.icons{line-height:1;font-size:.85714286rem}i.small.icon,i.small.icons{line-height:1;font-size:.92857143em}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%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);margin:0}i.icons .icon:first-child{position:static;width:auto;height:auto;vertical-align:top;-webkit-transform:none;-ms-transform:none;transform:none;margin-right:.25rem}i.icons .corner.icon{top:auto;left:auto;right:0;bottom:0;-webkit-transform:none;-ms-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 .inverted.corner.icon{text-shadow:-1px -1px 0 #1b1c1d,1px -1px 0 #1b1c1d,-1px 1px 0 #1b1c1d,1px 1px 0 #1b1c1d}i.icon.search:before{content:"\f002"}i.icon.mail.outline:before{content:"\f003"}i.icon.external:before{content:"\f08e"}i.icon.signal:before{content:"\f012"}i.icon.setting:before{content:"\f013"}i.icon.home:before{content:"\f015"}i.icon.inbox:before{content:"\f01c"}i.icon.browser:before{content:"\f022"}i.icon.tag:before{content:"\f02b"}i.icon.tags:before{content:"\f02c"}i.icon.calendar:before{content:"\f073"}i.icon.comment:before{content:"\f075"}i.icon.comments:before{content:"\f086"}i.icon.shop:before{content:"\f07a"}i.icon.privacy:before{content:"\f084"}i.icon.settings:before{content:"\f085"}i.icon.trophy:before{content:"\f091"}i.icon.payment:before{content:"\f09d"}i.icon.feed:before{content:"\f09e"}i.icon.alarm.outline:before{content:"\f0a2"}i.icon.tasks:before{content:"\f0ae"}i.icon.cloud:before{content:"\f0c2"}i.icon.lab:before{content:"\f0c3"}i.icon.mail:before{content:"\f0e0"}i.icon.idea:before{content:"\f0eb"}i.icon.dashboard:before{content:"\f0e4"}i.icon.sitemap:before{content:"\f0e8"}i.icon.alarm:before{content:"\f0f3"}i.icon.terminal:before{content:"\f120"}i.icon.code:before{content:"\f121"}i.icon.protect:before{content:"\f132"}i.icon.calendar.outline:before{content:"\f133"}i.icon.ticket:before{content:"\f145"}i.icon.external.square:before{content:"\f14c"}i.icon.map:before{content:"\f14e"}i.icon.bug:before{content:"\f188"}i.icon.mail.square:before{content:"\f199"}i.icon.history:before{content:"\f1da"}i.icon.options:before{content:"\f1de"}i.icon.comment.outline:before{content:"\f0e5"}i.icon.comments.outline:before{content:"\f0e6"}i.icon.text.telephone:before{content:"\f1e4"}i.icon.find:before{content:"\f1e5"}i.icon.wifi:before{content:"\f1eb"}i.icon.alarm.slash:before{content:"\f1f6"}i.icon.alarm.slash.outline:before{content:"\f1f7"}i.icon.copyright:before{content:"\f1f9"}i.icon.at:before{content:"\f1fa"}i.icon.eyedropper:before{content:"\f1fb"}i.icon.paint.brush:before{content:"\f1fc"}i.icon.heartbeat:before{content:"\f21e"}i.icon.download:before{content:"\f019"}i.icon.repeat:before{content:"\f01e"}i.icon.refresh:before{content:"\f021"}i.icon.lock:before{content:"\f023"}i.icon.bookmark:before{content:"\f02e"}i.icon.print:before{content:"\f02f"}i.icon.write:before{content:"\f040"}i.icon.theme:before{content:"\f043"}i.icon.adjust:before{content:"\f042"}i.icon.edit:before{content:"\f044"}i.icon.external.share:before{content:"\f045"}i.icon.ban:before{content:"\f05e"}i.icon.mail.forward:before,i.icon.share:before{content:"\f064"}i.icon.expand:before{content:"\f065"}i.icon.compress:before{content:"\f066"}i.icon.unhide:before{content:"\f06e"}i.icon.hide:before{content:"\f070"}i.icon.random:before{content:"\f074"}i.icon.retweet:before{content:"\f079"}i.icon.sign.out:before{content:"\f08b"}i.icon.pin:before{content:"\f08d"}i.icon.sign.in:before{content:"\f090"}i.icon.upload:before{content:"\f093"}i.icon.call:before{content:"\f095"}i.icon.call.square:before{content:"\f098"}i.icon.remove.bookmark:before{content:"\f097"}i.icon.unlock:before{content:"\f09c"}i.icon.configure:before{content:"\f0ad"}i.icon.filter:before{content:"\f0b0"}i.icon.wizard:before{content:"\f0d0"}i.icon.undo:before{content:"\f0e2"}i.icon.exchange:before{content:"\f0ec"}i.icon.cloud.download:before{content:"\f0ed"}i.icon.cloud.upload:before{content:"\f0ee"}i.icon.reply:before{content:"\f112"}i.icon.reply.all:before{content:"\f122"}i.icon.erase:before{content:"\f12d"}i.icon.unlock.alternate:before{content:"\f13e"}i.icon.archive:before{content:"\f187"}i.icon.translate:before{content:"\f1ab"}i.icon.recycle:before{content:"\f1b8"}i.icon.send:before{content:"\f1d8"}i.icon.send.outline:before{content:"\f1d9"}i.icon.share.alternate:before{content:"\f1e0"}i.icon.share.alternate.square:before{content:"\f1e1"}i.icon.wait:before{content:"\f017"}i.icon.write.square:before{content:"\f14b"}i.icon.share.square:before{content:"\f14d"}i.icon.add.to.cart:before{content:"\f217"}i.icon.in.cart:before{content:"\f218"}i.icon.add.user:before{content:"\f234"}i.icon.remove.user:before{content:"\f235"}i.icon.help.circle:before{content:"\f059"}i.icon.info.circle:before{content:"\f05a"}i.icon.warning:before{content:"\f12a"}i.icon.warning.circle:before{content:"\f06a"}i.icon.warning.sign:before{content:"\f071"}i.icon.help:before{content:"\f128"}i.icon.info:before{content:"\f129"}i.icon.announcement:before{content:"\f0a1"}i.icon.birthday:before{content:"\f1fd"}i.icon.users:before{content:"\f0c0"}i.icon.doctor:before{content:"\f0f0"}i.icon.child:before{content:"\f1ae"}i.icon.user:before{content:"\f007"}i.icon.handicap:before{content:"\f193"}i.icon.student:before{content:"\f19d"}i.icon.spy:before{content:"\f21b"}i.icon.female:before{content:"\f182"}i.icon.male:before{content:"\f183"}i.icon.woman:before{content:"\f221"}i.icon.man:before{content:"\f222"}i.icon.non.binary.transgender:before{content:"\f223"}i.icon.intergender:before{content:"\f224"}i.icon.transgender:before{content:"\f225"}i.icon.lesbian:before{content:"\f226"}i.icon.gay:before{content:"\f227"}i.icon.heterosexual:before{content:"\f228"}i.icon.other.gender:before{content:"\f229"}i.icon.other.gender.vertical:before{content:"\f22a"}i.icon.other.gender.horizontal:before{content:"\f22b"}i.icon.neuter:before{content:"\f22c"}i.icon.grid.layout:before{content:"\f00a"}i.icon.list.layout:before{content:"\f00b"}i.icon.block.layout:before{content:"\f009"}i.icon.zoom:before{content:"\f00e"}i.icon.zoom.out:before{content:"\f010"}i.icon.resize.vertical:before{content:"\f07d"}i.icon.resize.horizontal:before{content:"\f07e"}i.icon.maximize:before{content:"\f0b2"}i.icon.crop:before{content:"\f125"}i.icon.cocktail:before{content:"\f000"}i.icon.road:before{content:"\f018"}i.icon.flag:before{content:"\f024"}i.icon.book:before{content:"\f02d"}i.icon.gift:before{content:"\f06b"}i.icon.leaf:before{content:"\f06c"}i.icon.fire:before{content:"\f06d"}i.icon.plane:before{content:"\f072"}i.icon.magnet:before{content:"\f076"}i.icon.legal:before{content:"\f0e3"}i.icon.lemon:before{content:"\f094"}i.icon.world:before{content:"\f0ac"}i.icon.travel:before{content:"\f0b1"}i.icon.shipping:before{content:"\f0d1"}i.icon.money:before{content:"\f0d6"}i.icon.lightning:before{content:"\f0e7"}i.icon.rain:before{content:"\f0e9"}i.icon.treatment:before{content:"\f0f1"}i.icon.suitcase:before{content:"\f0f2"}i.icon.bar:before{content:"\f0fc"}i.icon.flag.outline:before{content:"\f11d"}i.icon.flag.checkered:before{content:"\f11e"}i.icon.puzzle:before{content:"\f12e"}i.icon.fire.extinguisher:before{content:"\f134"}i.icon.rocket:before{content:"\f135"}i.icon.anchor:before{content:"\f13d"}i.icon.bullseye:before{content:"\f140"}i.icon.sun:before{content:"\f185"}i.icon.moon:before{content:"\f186"}i.icon.fax:before{content:"\f1ac"}i.icon.life.ring:before{content:"\f1cd"}i.icon.bomb:before{content:"\f1e2"}i.icon.soccer:before{content:"\f1e3"}i.icon.calculator:before{content:"\f1ec"}i.icon.diamond:before{content:"\f219"}i.icon.crosshairs:before{content:"\f05b"}i.icon.asterisk:before{content:"\f069"}i.icon.certificate:before{content:"\f0a3"}i.icon.circle:before{content:"\f111"}i.icon.quote.left:before{content:"\f10d"}i.icon.quote.right:before{content:"\f10e"}i.icon.ellipsis.horizontal:before{content:"\f141"}i.icon.ellipsis.vertical:before{content:"\f142"}i.icon.cube:before{content:"\f1b2"}i.icon.cubes:before{content:"\f1b3"}i.icon.circle.notched:before{content:"\f1ce"}i.icon.circle.thin:before{content:"\f1db"}i.icon.square.outline:before{content:"\f096"}i.icon.square:before{content:"\f0c8"}i.icon.checkmark:before{content:"\f00c"}i.icon.remove:before{content:"\f00d"}i.icon.checkmark.box:before{content:"\f046"}i.icon.move:before{content:"\f047"}i.icon.add.circle:before{content:"\f055"}i.icon.minus.circle:before{content:"\f056"}i.icon.remove.circle:before{content:"\f057"}i.icon.check.circle:before{content:"\f058"}i.icon.remove.circle.outline:before{content:"\f05c"}i.icon.check.circle.outline:before{content:"\f05d"}i.icon.plus:before{content:"\f067"}i.icon.minus:before{content:"\f068"}i.icon.add.square:before{content:"\f0fe"}i.icon.radio:before{content:"\f10c"}i.icon.selected.radio:before{content:"\f192"}i.icon.minus.square:before{content:"\f146"}i.icon.minus.square.outline:before{content:"\f147"}i.icon.check.square:before{content:"\f14a"}i.icon.plus.square.outline:before{content:"\f196"}i.icon.toggle.off:before{content:"\f204"}i.icon.toggle.on:before{content:"\f205"}i.icon.film:before{content:"\f008"}i.icon.sound:before{content:"\f025"}i.icon.photo:before{content:"\f030"}i.icon.bar.chart:before{content:"\f080"}i.icon.camera.retro:before{content:"\f083"}i.icon.newspaper:before{content:"\f1ea"}i.icon.area.chart:before{content:"\f1fe"}i.icon.pie.chart:before{content:"\f200"}i.icon.line.chart:before{content:"\f201"}i.icon.arrow.circle.outline.down:before{content:"\f01a"}i.icon.arrow.circle.outline.up:before{content:"\f01b"}i.icon.chevron.left:before{content:"\f053"}i.icon.chevron.right:before{content:"\f054"}i.icon.arrow.left:before{content:"\f060"}i.icon.arrow.right:before{content:"\f061"}i.icon.arrow.up:before{content:"\f062"}i.icon.arrow.down:before{content:"\f063"}i.icon.chevron.up:before{content:"\f077"}i.icon.chevron.down:before{content:"\f078"}i.icon.pointing.right:before{content:"\f0a4"}i.icon.pointing.left:before{content:"\f0a5"}i.icon.pointing.up:before{content:"\f0a6"}i.icon.pointing.down:before{content:"\f0a7"}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.circle.down:before{content:"\f0ab"}i.icon.caret.down:before{content:"\f0d7"}i.icon.caret.up:before{content:"\f0d8"}i.icon.caret.left:before{content:"\f0d9"}i.icon.caret.right:before{content:"\f0da"}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.double.down:before{content:"\f103"}i.icon.angle.left:before{content:"\f104"}i.icon.angle.right:before{content:"\f105"}i.icon.angle.up:before{content:"\f106"}i.icon.angle.down:before{content:"\f107"}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.circle.down:before{content:"\f13a"}i.icon.toggle.down:before{content:"\f150"}i.icon.toggle.up:before{content:"\f151"}i.icon.toggle.right:before{content:"\f152"}i.icon.long.arrow.down:before{content:"\f175"}i.icon.long.arrow.up:before{content:"\f176"}i.icon.long.arrow.left:before{content:"\f177"}i.icon.long.arrow.right:before{content:"\f178"}i.icon.arrow.circle.outline.right:before{content:"\f18e"}i.icon.arrow.circle.outline.left:before{content:"\f190"}i.icon.toggle.left:before{content:"\f191"}i.icon.power:before{content:"\f011"}i.icon.trash:before{content:"\f1f8"}i.icon.trash.outline:before{content:"\f014"}i.icon.disk.outline:before{content:"\f0a0"}i.icon.desktop:before{content:"\f108"}i.icon.laptop:before{content:"\f109"}i.icon.tablet:before{content:"\f10a"}i.icon.mobile:before{content:"\f10b"}i.icon.game:before{content:"\f11b"}i.icon.keyboard:before{content:"\f11c"}i.icon.plug:before{content:"\f1e6"}i.icon.folder:before{content:"\f07b"}i.icon.folder.open:before{content:"\f07c"}i.icon.level.up:before{content:"\f148"}i.icon.level.down:before{content:"\f149"}i.icon.file:before{content:"\f15b"}i.icon.file.outline:before{content:"\f016"}i.icon.file.text:before{content:"\f15c"}i.icon.file.text.outline:before{content:"\f0f6"}i.icon.folder.outline:before{content:"\f114"}i.icon.folder.open.outline:before{content:"\f115"}i.icon.file.pdf.outline:before{content:"\f1c1"}i.icon.file.word.outline:before{content:"\f1c2"}i.icon.file.excel.outline:before{content:"\f1c3"}i.icon.file.powerpoint.outline:before{content:"\f1c4"}i.icon.file.image.outline:before{content:"\f1c5"}i.icon.file.archive.outline:before{content:"\f1c6"}i.icon.file.audio.outline:before{content:"\f1c7"}i.icon.file.video.outline:before{content:"\f1c8"}i.icon.file.code.outline:before{content:"\f1c9"}i.icon.barcode:before{content:"\f02a"}i.icon.qrcode:before{content:"\f029"}i.icon.fork:before{content:"\f126"}i.icon.html5:before{content:"\f13b"}i.icon.css3:before{content:"\f13c"}i.icon.rss:before{content:"\f09e"}i.icon.rss.square:before{content:"\f143"}i.icon.openid:before{content:"\f19b"}i.icon.database:before{content:"\f1c0"}i.icon.server:before{content:"\f233"}i.icon.heart:before{content:"\f004"}i.icon.star:before{content:"\f005"}i.icon.empty.star:before{content:"\f006"}i.icon.thumbs.outline.up:before{content:"\f087"}i.icon.thumbs.outline.down:before{content:"\f088"}i.icon.star.half:before{content:"\f089"}i.icon.empty.heart:before{content:"\f08a"}i.icon.smile:before{content:"\f118"}i.icon.frown:before{content:"\f119"}i.icon.meh:before{content:"\f11a"}i.icon.star.half.empty:before{content:"\f123"}i.icon.thumbs.up:before{content:"\f164"}i.icon.thumbs.down:before{content:"\f165"}i.icon.music:before{content:"\f001"}i.icon.video.play.outline:before{content:"\f01d"}i.icon.volume.off:before{content:"\f026"}i.icon.volume.down:before{content:"\f027"}i.icon.volume.up:before{content:"\f028"}i.icon.record:before{content:"\f03d"}i.icon.step.backward:before{content:"\f048"}i.icon.fast.backward:before{content:"\f049"}i.icon.backward:before{content:"\f04a"}i.icon.play:before{content:"\f04b"}i.icon.pause:before{content:"\f04c"}i.icon.stop:before{content:"\f04d"}i.icon.forward:before{content:"\f04e"}i.icon.fast.forward:before{content:"\f050"}i.icon.step.forward:before{content:"\f051"}i.icon.eject:before{content:"\f052"}i.icon.unmute:before{content:"\f130"}i.icon.mute:before{content:"\f131"}i.icon.video.play:before{content:"\f144"}i.icon.closed.captioning:before{content:"\f20a"}i.icon.marker:before{content:"\f041"}i.icon.coffee:before{content:"\f0f4"}i.icon.food:before{content:"\f0f5"}i.icon.building.outline:before{content:"\f0f7"}i.icon.hospital:before{content:"\f0f8"}i.icon.emergency:before{content:"\f0f9"}i.icon.first.aid:before{content:"\f0fa"}i.icon.military:before{content:"\f0fb"}i.icon.h:before{content:"\f0fd"}i.icon.location.arrow:before{content:"\f124"}i.icon.space.shuttle:before{content:"\f197"}i.icon.university:before{content:"\f19c"}i.icon.building:before{content:"\f1ad"}i.icon.paw:before{content:"\f1b0"}i.icon.spoon:before{content:"\f1b1"}i.icon.car:before{content:"\f1b9"}i.icon.taxi:before{content:"\f1ba"}i.icon.tree:before{content:"\f1bb"}i.icon.bicycle:before{content:"\f206"}i.icon.bus:before{content:"\f207"}i.icon.ship:before{content:"\f21a"}i.icon.motorcycle:before{content:"\f21c"}i.icon.street.view:before{content:"\f21d"}i.icon.hotel:before{content:"\f236"}i.icon.train:before{content:"\f238"}i.icon.subway:before{content:"\f239"}i.icon.table:before{content:"\f0ce"}i.icon.columns:before{content:"\f0db"}i.icon.sort:before{content:"\f0dc"}i.icon.sort.ascending:before{content:"\f0de"}i.icon.sort.descending:before{content:"\f0dd"}i.icon.sort.alphabet.ascending:before{content:"\f15d"}i.icon.sort.alphabet.descending:before{content:"\f15e"}i.icon.sort.content.ascending:before{content:"\f160"}i.icon.sort.content.descending:before{content:"\f161"}i.icon.sort.numeric.ascending:before{content:"\f162"}i.icon.sort.numeric.descending:before{content:"\f163"}i.icon.font:before{content:"\f031"}i.icon.bold:before{content:"\f032"}i.icon.italic:before{content:"\f033"}i.icon.text.height:before{content:"\f034"}i.icon.text.width:before{content:"\f035"}i.icon.align.left:before{content:"\f036"}i.icon.align.center:before{content:"\f037"}i.icon.align.right:before{content:"\f038"}i.icon.align.justify:before{content:"\f039"}i.icon.list:before{content:"\f03a"}i.icon.outdent:before{content:"\f03b"}i.icon.indent:before{content:"\f03c"}i.icon.linkify:before{content:"\f0c1"}i.icon.cut:before{content:"\f0c4"}i.icon.copy:before{content:"\f0c5"}i.icon.attach:before{content:"\f0c6"}i.icon.save:before{content:"\f0c7"}i.icon.content:before{content:"\f0c9"}i.icon.unordered.list:before{content:"\f0ca"}i.icon.ordered.list:before{content:"\f0cb"}i.icon.strikethrough:before{content:"\f0cc"}i.icon.underline:before{content:"\f0cd"}i.icon.paste:before{content:"\f0ea"}i.icon.unlink:before{content:"\f127"}i.icon.superscript:before{content:"\f12b"}i.icon.subscript:before{content:"\f12c"}i.icon.header:before{content:"\f1dc"}i.icon.paragraph:before{content:"\f1dd"}i.icon.euro:before{content:"\f153"}i.icon.pound:before{content:"\f154"}i.icon.dollar:before{content:"\f155"}i.icon.rupee:before{content:"\f156"}i.icon.yen:before{content:"\f157"}i.icon.ruble:before{content:"\f158"}i.icon.won:before{content:"\f159"}i.icon.lira:before{content:"\f195"}i.icon.shekel:before{content:"\f20b"}i.icon.paypal:before{content:"\f1ed"}i.icon.paypal.card:before{content:"\f1f4"}i.icon.google.wallet:before{content:"\f1ee"}i.icon.visa:before{content:"\f1f0"}i.icon.mastercard:before{content:"\f1f1"}i.icon.discover:before{content:"\f1f2"}i.icon.american.express:before{content:"\f1f3"}i.icon.stripe:before{content:"\f1f5"}i.icon.twitter.square:before{content:"\f081"}i.icon.facebook.square:before{content:"\f082"}i.icon.linkedin.square:before{content:"\f08c"}i.icon.github.square:before{content:"\f092"}i.icon.twitter:before{content:"\f099"}i.icon.facebook:before{content:"\f09a"}i.icon.github:before{content:"\f09b"}i.icon.pinterest:before{content:"\f0d2"}i.icon.pinterest.square:before{content:"\f0d3"}i.icon.google.plus.square:before{content:"\f0d4"}i.icon.google.plus:before{content:"\f0d5"}i.icon.linkedin:before{content:"\f0e1"}i.icon.github.alternate:before{content:"\f113"}i.icon.maxcdn:before{content:"\f136"}i.icon.bitcoin:before{content:"\f15a"}i.icon.youtube.square:before{content:"\f166"}i.icon.youtube:before{content:"\f167"}i.icon.xing:before{content:"\f168"}i.icon.xing.square:before{content:"\f169"}i.icon.youtube.play:before{content:"\f16a"}i.icon.dropbox:before{content:"\f16b"}i.icon.stack.overflow:before{content:"\f16c"}i.icon.instagram:before{content:"\f16d"}i.icon.flickr:before{content:"\f16e"}i.icon.adn:before{content:"\f170"}i.icon.bitbucket:before{content:"\f171"}i.icon.bitbucket.square:before{content:"\f172"}i.icon.tumblr:before{content:"\f173"}i.icon.tumblr.square:before{content:"\f174"}i.icon.apple:before{content:"\f179"}i.icon.windows:before{content:"\f17a"}i.icon.android:before{content:"\f17b"}i.icon.linux:before{content:"\f17c"}i.icon.dribbble:before{content:"\f17d"}i.icon.skype:before{content:"\f17e"}i.icon.foursquare:before{content:"\f180"}i.icon.trello:before{content:"\f181"}i.icon.gittip:before{content:"\f184"}i.icon.vk:before{content:"\f189"}i.icon.weibo:before{content:"\f18a"}i.icon.renren:before{content:"\f18b"}i.icon.pagelines:before{content:"\f18c"}i.icon.stack.exchange:before{content:"\f18d"}i.icon.vimeo:before{content:"\f194"}i.icon.slack:before{content:"\f198"}i.icon.wordpress:before{content:"\f19a"}i.icon.yahoo:before{content:"\f19e"}i.icon.google:before{content:"\f1a0"}i.icon.reddit:before{content:"\f1a1"}i.icon.reddit.square:before{content:"\f1a2"}i.icon.stumbleupon.circle:before{content:"\f1a3"}i.icon.stumbleupon:before{content:"\f1a4"}i.icon.delicious:before{content:"\f1a5"}i.icon.digg:before{content:"\f1a6"}i.icon.pied.piper:before{content:"\f1a7"}i.icon.pied.piper.alternate:before{content:"\f1a8"}i.icon.drupal:before{content:"\f1a9"}i.icon.joomla:before{content:"\f1aa"}i.icon.behance:before{content:"\f1b4"}i.icon.behance.square:before{content:"\f1b5"}i.icon.steam:before{content:"\f1b6"}i.icon.steam.square:before{content:"\f1b7"}i.icon.spotify:before{content:"\f1bc"}i.icon.deviantart:before{content:"\f1bd"}i.icon.soundcloud:before{content:"\f1be"}i.icon.vine:before{content:"\f1ca"}i.icon.codepen:before{content:"\f1cb"}i.icon.jsfiddle:before{content:"\f1cc"}i.icon.rebel:before{content:"\f1d0"}i.icon.empire:before{content:"\f1d1"}i.icon.git.square:before{content:"\f1d2"}i.icon.git:before{content:"\f1d3"}i.icon.hacker.news:before{content:"\f1d4"}i.icon.tencent.weibo:before{content:"\f1d5"}i.icon.qq:before{content:"\f1d6"}i.icon.wechat:before{content:"\f1d7"}i.icon.slideshare:before{content:"\f1e7"}i.icon.twitch:before{content:"\f1e8"}i.icon.yelp:before{content:"\f1e9"}i.icon.lastfm:before{content:"\f202"}i.icon.lastfm.square:before{content:"\f203"}i.icon.ioxhost:before{content:"\f208"}i.icon.angellist:before{content:"\f209"}i.icon.meanpath:before{content:"\f20c"}i.icon.buysellads:before{content:"\f20d"}i.icon.connectdevelop:before{content:"\f20e"}i.icon.dashcube:before{content:"\f210"}i.icon.forumbee:before{content:"\f211"}i.icon.leanpub:before{content:"\f212"}i.icon.sellsy:before{content:"\f213"}i.icon.shirtsinbulk:before{content:"\f214"}i.icon.simplybuilt:before{content:"\f215"}i.icon.skyatlas:before{content:"\f216"}i.icon.whatsapp:before{content:"\f232"}i.icon.viacoin:before{content:"\f237"}i.icon.medium:before{content:"\f23a"}i.icon.like:before{content:"\f004"}i.icon.favorite:before{content:"\f005"}i.icon.video:before{content:"\f008"}i.icon.check:before{content:"\f00c"}i.icon.cancel:before,i.icon.close:before,i.icon.delete:before,i.icon.x:before{content:"\f00d"}i.icon.user.cancel:before,i.icon.user.close:before,i.icon.user.delete:before,i.icon.user.times:before,i.icon.user.x:before{content:"\f235"}i.icon.magnify:before,i.icon.zoom.in:before{content:"\f00e"}i.icon.shutdown:before{content:"\f011"}i.icon.clock:before,i.icon.time:before{content:"\f017"}i.icon.play.circle.outline:before{content:"\f01d"}i.icon.headphone:before{content:"\f025"}i.icon.camera:before{content:"\f030"}i.icon.video.camera:before{content:"\f03d"}i.icon.picture:before{content:"\f03e"}i.icon.compose:before,i.icon.pencil:before{content:"\f040"}i.icon.point:before{content:"\f041"}i.icon.tint:before{content:"\f043"}i.icon.signup:before{content:"\f044"}i.icon.plus.circle:before{content:"\f055"}i.icon.dont:before{content:"\f05e"}i.icon.minimize:before{content:"\f066"}i.icon.add:before{content:"\f067"}i.icon.eye:before{content:"\f06e"}i.icon.attention:before{content:"\f06a"}i.icon.cart:before{content:"\f07a"}i.icon.shuffle:before{content:"\f074"}i.icon.chat:before,i.icon.talk:before{content:"\f075"}i.icon.shopping.cart:before{content:"\f07a"}i.icon.bar.graph:before{content:"\f080"}i.icon.area.graph:before{content:"\f1fe"}i.icon.pie.graph:before{content:"\f200"}i.icon.line.graph:before{content:"\f201"}i.icon.key:before{content:"\f084"}i.icon.cogs:before{content:"\f085"}i.icon.discussions:before{content:"\f086"}i.icon.like.outline:before{content:"\f087"}i.icon.dislike.outline:before{content:"\f088"}i.icon.heart.outline:before{content:"\f08a"}i.icon.log.out:before{content:"\f08b"}i.icon.thumb.tack:before{content:"\f08d"}i.icon.winner:before{content:"\f091"}i.icon.bookmark.outline:before{content:"\f097"}i.icon.phone:before{content:"\f095"}i.icon.phone.square:before{content:"\f098"}i.icon.credit.card:before{content:"\f09d"}i.icon.hdd.outline:before{content:"\f0a0"}i.icon.bullhorn:before{content:"\f0a1"}i.icon.bell:before{content:"\f0f3"}i.icon.bell.outline:before{content:"\f0a2"}i.icon.bell.slash:before{content:"\f1f6"}i.icon.bell.slash.outline:before{content:"\f1f7"}i.icon.hand.outline.right:before{content:"\f0a4"}i.icon.hand.outline.left:before{content:"\f0a5"}i.icon.hand.outline.up:before{content:"\f0a6"}i.icon.hand.outline.down:before{content:"\f0a7"}i.icon.globe:before{content:"\f0ac"}i.icon.wrench:before{content:"\f0ad"}i.icon.briefcase:before{content:"\f0b1"}i.icon.group:before{content:"\f0c0"}i.icon.flask:before{content:"\f0c3"}i.icon.bars:before,i.icon.sidebar:before{content:"\f0c9"}i.icon.list.ul:before{content:"\f0ca"}i.icon.list.ol:before,i.icon.numbered.list:before{content:"\f0cb"}i.icon.magic:before{content:"\f0d0"}i.icon.truck:before{content:"\f0d1"}i.icon.currency:before{content:"\f0d6"}i.icon.dropdown:before,i.icon.triangle.down:before{content:"\f0d7"}i.icon.triangle.up:before{content:"\f0d8"}i.icon.triangle.left:before{content:"\f0d9"}i.icon.triangle.right:before{content:"\f0da"}i.icon.envelope:before{content:"\f0e0"}i.icon.conversation:before{content:"\f0e6"}i.icon.umbrella:before{content:"\f0e9"}i.icon.clipboard:before{content:"\f0ea"}i.icon.lightbulb:before{content:"\f0eb"}i.icon.ambulance:before{content:"\f0f9"}i.icon.medkit:before{content:"\f0fa"}i.icon.fighter.jet:before{content:"\f0fb"}i.icon.beer:before{content:"\f0fc"}i.icon.plus.square:before{content:"\f0fe"}i.icon.computer:before{content:"\f108"}i.icon.asexual:before,i.icon.circle.outline:before,i.icon.intersex:before{content:"\f10c"}i.icon.spinner:before{content:"\f110"}i.icon.gamepad:before{content:"\f11b"}i.icon.star.half.full:before{content:"\f123"}i.icon.question:before{content:"\f128"}i.icon.eraser:before{content:"\f12d"}i.icon.microphone:before{content:"\f130"}i.icon.microphone.slash:before{content:"\f131"}i.icon.shield:before{content:"\f132"}i.icon.target:before{content:"\f140"}i.icon.play.circle:before{content:"\f144"}i.icon.pencil.square:before{content:"\f14b"}i.icon.compass:before{content:"\f14e"}i.icon.amex:before{content:"\f1f3"}i.icon.eur:before{content:"\f153"}i.icon.gbp:before{content:"\f154"}i.icon.usd:before{content:"\f155"}i.icon.inr:before{content:"\f156"}i.icon.cny:before,i.icon.jpy:before,i.icon.rmb:before{content:"\f157"}i.icon.rouble:before,i.icon.rub:before{content:"\f158"}i.icon.krw:before{content:"\f159"}i.icon.btc:before{content:"\f15a"}i.icon.ils:before,i.icon.sheqel:before{content:"\f20b"}i.icon.try:before{content:"\f195"}i.icon.zip:before{content:"\f187"}i.icon.dot.circle.outline:before{content:"\f192"}i.icon.sliders:before{content:"\f1de"}i.icon.wi-fi:before{content:"\f1eb"}i.icon.graduation:before{content:"\f19d"}i.icon.weixin:before{content:"\f1d7"}i.icon.binoculars:before{content:"\f1e5"}i.icon.gratipay:before{content:"\f184"}i.icon.genderless:before{content:"\f1db"}i.icon.teletype:before{content:"\f1e4"}i.icon.power.cord:before{content:"\f1e6"}i.icon.tty:before{content:"\f1e4"}i.icon.cc:before{content:"\f20a"}i.icon.plus.cart:before{content:"\f217"}i.icon.arrow.down.cart:before{content:"\f218"}i.icon.detective:before{content:"\f21b"}i.icon.venus:before{content:"\f221"}i.icon.mars:before{content:"\f222"}i.icon.mercury:before{content:"\f223"}i.icon.female.homosexual:before,i.icon.venus.double:before{content:"\f226"}i.icon.male.homosexual:before,i.icon.mars.double:before{content:"\f227"}i.icon.venus.mars:before{content:"\f228"}i.icon.mars.alternate:before,i.icon.mars.stroke:before{content:"\f229"}i.icon.mars.vertical:before{content:"\f22a"}i.icon.mars.horizontal:before{content:"\f22b"}i.icon.mars.stroke.vertical:before{content:"\f22a"}i.icon.mars.stroke.horizontal:before{content:"\f22b"}i.icon.facebook.official{content:"\f230"}i.icon.pinterest.official{content:"\f231"}i.icon.bed:before{content:"\f236"} \ No newline at end of file diff --git a/semantic/components/image.css b/semantic/components/image.css new file mode 100755 index 0000000..8bf186f --- /dev/null +++ b/semantic/components/image.css @@ -0,0 +1,302 @@ +/*! + * # Semantic UI 2.1.7 - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.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.71428571rem; +} +.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 100755 index 0000000..4be3fe6 --- /dev/null +++ b/semantic/components/image.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.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:.71428571rem}.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}.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 100755 index 0000000..2e58f4e --- /dev/null +++ b/semantic/components/input.css @@ -0,0 +1,517 @@ +/*! + * # Semantic UI 2.1.7 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-inline-flex; + 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; + -webkit-flex: 1 0 auto; + -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.2142em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + padding: 0.67861429em 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: box-shadow 0.1s ease, border-color 0.1s ease; + transition: box-shadow 0.1s ease, border-color 0.1s ease; + box-shadow: none; +} + +/*-------------------- + Placeholder +---------------------*/ + + +/* browsers require these rules separate */ +.ui.input input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} +.ui.input input::-moz-placeholder { + color: rgba(0, 0, 0, 0.4); +} +.ui.input input::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input input[disabled] { + opacity: 0.45; +} +.ui.disabled.input input { + 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); + 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; + 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); + box-shadow: none; +} +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: rgba(0, 0, 0, 0.87); +} +.ui.input.focus input::-ms-input-placeholder, +.ui.input input:focus::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + 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; +} + +/* 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; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Transparent +---------------------*/ + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !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; + -webkit-flex: 0 0 auto; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -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, +.ui.action.input:not([class*="left action"]) > .button, +.ui.action.input:not([class*="left action"]) > .buttons > .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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: 0.71428571em; +} +.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 100755 index 0000000..1645b73 --- /dev/null +++ b/semantic/components/input.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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:-webkit-inline-flex;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;-webkit-flex:1 0 auto;-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.2142em;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;padding:.67861429em 1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);border-radius:.28571429rem;-webkit-transition:box-shadow .1s ease,border-color .1s ease;transition:box-shadow .1s ease,border-color .1s ease;box-shadow:none}.ui.input input::-webkit-input-placeholder{color:rgba(0,0,0,.4)}.ui.input input::-moz-placeholder{color:rgba(0,0,0,.4)}.ui.input input::-ms-input-placeholder{color:rgba(0,0,0,.4)}.ui.disabled.input,.ui.input input[disabled]{opacity:.45}.ui.disabled.input input{pointer-events:none}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background:#fafafa;color:rgba(0,0,0,.87);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;box-shadow:0 0 0 1px transparent}.ui.input input:focus,.ui.input.focus input{border-color:#85b7d9;background:#fff;color:rgba(0,0,0,.8);box-shadow:none}.ui.input input:focus::-webkit-input-placeholder,.ui.input.focus input::-webkit-input-placeholder{color:rgba(0,0,0,.87)}.ui.input input:focus::-moz-placeholder,.ui.input.focus input::-moz-placeholder{color:rgba(0,0,0,.87)}.ui.input input:focus::-ms-input-placeholder,.ui.input.focus input::-ms-input-placeholder{color:rgba(0,0,0,.87)}.ui.input.error input{background-color:#fff6f6;border-color:#e0b4b4;color:#9f3a38;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}.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}.ui.transparent.input input{border-color:transparent!important;background-color:transparent!important;padding:0!important;box-shadow:none!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;-webkit-flex:0 0 auto;-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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-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,.ui.action.input:not([class*="left action"])>.buttons>.button,.ui.action.input:not([class*="left action"])>.dropdown{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:-webkit-flex;display:-ms-flexbox;display:flex}.ui.fluid.input>input{width:0!important}.ui.mini.input{font-size:.71428571em}.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 100755 index 0000000..41e1123 --- /dev/null +++ b/semantic/components/item.css @@ -0,0 +1,482 @@ +/*! + * # Semantic UI 2.1.7 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Standard +*******************************/ + + +/*-------------- + Item +---------------*/ + +.ui.items > .item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1em 0em; + width: 100%; + min-height: 0px; + background: transparent; + padding: 0em; + border: none; + border-radius: 0rem; + box-shadow: none; + -webkit-transition: box-shadow 0.1s ease; + transition: 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; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: block; + float: none; + margin: 0em; + padding: 0em; + max-height: ''; + -webkit-align-self: top; + -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; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background: none; + margin: 0em; + padding: 0em; + 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; + -webkit-align-self: top; + -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 { + -webkit-align-self: middle; + -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); + 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; + } +} + +/* Mobily Only */ +@media only screen and (max-width: 767px) { + .ui.items > .item { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 2em 0em; + } + .ui.items > .item > .image { + display: block; + margin-left: auto; + margin-right: auto; + } + .ui.items > .item > .image, + .ui.items > .item > .image > img { + max-width: 100% !important; + width: auto !important; + max-height: 250px !important; + } + .ui.items > .item > .image + .content { + display: block; + padding: 1.5em 0em 0em; + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Aligned +--------------------*/ + +.ui.items > .item > .image + [class*="top aligned"].content { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} +.ui.items > .item > .image + [class*="middle aligned"].content { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +.ui.items > .item > .image + [class*="bottom aligned"].content { + -webkit-align-self: flex-end; + -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; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/item.min.css b/semantic/components/item.min.css new file mode 100755 index 0000000..78967b5 --- /dev/null +++ b/semantic/components/item.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.items>.item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1em 0;width:100%;min-height:0;background:0 0;padding:0;border:none;border-radius:0;box-shadow:none;-webkit-transition:box-shadow .1s ease;transition: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;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;display:block;float:none;margin:0;padding:0;max-height:'';-webkit-align-self:top;-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;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;background:0 0;margin:0;padding:0;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;-webkit-align-self:top;-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{-webkit-align-self:middle;-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;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;top:0;left:0;color:rgba(0,0,0,.4);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>.item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:2em 0}.ui.items>.item>.image{display:block;margin-left:auto;margin-right:auto}.ui.items>.item>.image,.ui.items>.item>.image>img{max-width:100%!important;width:auto!important;max-height:250px!important}.ui.items>.item>.image+.content{display:block;padding:1.5em 0 0}}.ui.items>.item>.image+[class*="top aligned"].content{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.ui.items>.item>.image+[class*="middle aligned"].content{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.ui.items>.item>.image+[class*="bottom aligned"].content{-webkit-align-self:flex-end;-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} \ No newline at end of file diff --git a/semantic/components/label.css b/semantic/components/label.css new file mode 100755 index 0000000..4fbba01 --- /dev/null +++ b/semantic/components/label.css @@ -0,0 +1,1314 @@ +/*! + * # Semantic UI 2.1.7 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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) { + 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; + 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); + -ms-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; + 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%); + -ms-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.71428571em - 1.2em ); +} +.ui.table td > .ui[class*="right ribbon"].label { + left: calc(100% + 0.71428571em + 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 { + 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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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); + box-shadow: none; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: none #ffffff; + color: #1e70bf; + box-shadow: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + 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); + -ms-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); + -ms-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); + -ms-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); + -ms-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); + -ms-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 100755 index 0000000..05a47c2 --- /dev/null +++ b/semantic/components/label.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: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;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);-ms-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;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;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);text-align:left;-webkit-transform:translateX(-100%);-ms-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(-.71428571em - 1.2em)}.ui.table td>.ui[class*="right ribbon"].label{left:calc(100% + .71428571em + 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}.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}.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,.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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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-color:#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:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);box-shadow:none}a.ui.basic.label:hover{text-decoration:none;background:#fff;color:#1e70bf;box-shadow:1px solid rgba(34,36,38,.15);box-shadow:none}.ui.basic.pointing.label:before{border-color:inherit}.ui.fluid.labels>.label,.ui.label.fluid{width:100%;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;border-style:solid;border-color:inherit;position:absolute;content:'';-webkit-transform:rotate(45deg);-ms-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);-ms-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;right:auto;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-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);-ms-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);-ms-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 100755 index 0000000..36e9ab7 --- /dev/null +++ b/semantic/components/list.css @@ -0,0 +1,939 @@ +/*! + * # Semantic UI 2.1.7 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: 0.07142857em; + 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; + 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; +} +.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 a.item:hover, +.ui.link.list .item a:not(.ui):hover { + color: rgba(0, 0, 0, 0.8); +} +.ui.link.list a.item:active, +.ui.link.list .item a:not(.ui):active { + color: rgba(0, 0, 0, 0.9); +} +.ui.link.list .active.item, +.ui.link.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 a.item:hover, +.ui.inverted.link.list .item a:not(.ui):hover { + color: #ffffff; +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:not(.ui):active { + color: #ffffff; +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.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; + margin-left: -1.25rem; + content: '•'; + opacity: 1; + color: inherit; + vertical-align: top; +} +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 { + 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.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 { + padding-top: 0.42857143em; + padding-bottom: 0.42857143em; +} +.ui.relaxed.list:not(.horizontal) .list > .item { + padding-top: 0.21428571em; + padding-bottom: 0.21428571em; +} +.ui.horizontal.relaxed.list > .item { + padding-left: 1rem; + padding-right: 1rem; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item { + padding-top: 0.85714286em; + padding-bottom: 0.85714286em; +} +.ui[class*="very relaxed"].list:not(.horizontal) .list > .item { + padding-top: 0.28571429em; + padding-bottom: 0.28571429em; +} +.ui.horizontal[class*="very relaxed"].list .list > .item, +.ui.horizontal[class*="very relaxed"].list > .item { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: 0.71428571em; +} +.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.71428571rem; +} +.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 100755 index 0000000..306df8f --- /dev/null +++ b/semantic/components/list.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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}.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:.07142857em;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;padding:0 0 0 .5em;vertical-align:top}.ui.list .list>.item>img.image+.content,.ui.list>.item>img.image+.content{display:inline-block}.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 .item a:not(.ui):hover,.ui.link.list a.item:hover{color:rgba(0,0,0,.8)}.ui.link.list .item a:not(.ui):active,.ui.link.list a.item:active{color:rgba(0,0,0,.9)}.ui.link.list .active.item,.ui.link.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 .active.item a:not(.ui),.ui.inverted.link.list .item a:not(.ui):active,.ui.inverted.link.list .item a:not(.ui):hover,.ui.inverted.link.list a.active.item,.ui.inverted.link.list a.item:active,.ui.inverted.link.list a.item:hover{color:#fff}.ui.selection.list .list>.item,.ui.selection.list>.item{cursor:pointer;background:0 0;padding:.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,.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;margin-left:-1.25rem;content:'•';opacity:1;color:inherit;vertical-align:top}.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 .item .list>.item,.ui.divided.list .list>.item,.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{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.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.horizontal.list .list>.item,.ui.celled.inverted.horizontal.list>.item,.ui.celled.inverted.list>.item,.ui.celled.inverted.list>.list{border-color:1px solid rgba(255,255,255,.1)}.ui.relaxed.list:not(.horizontal)>.item{padding-top:.42857143em;padding-bottom:.42857143em}.ui.relaxed.list:not(.horizontal) .list>.item{padding-top:.21428571em;padding-bottom:.21428571em}.ui.horizontal.relaxed.list>.item{padding-left:1rem;padding-right:1rem}.ui[class*="very relaxed"].list:not(.horizontal)>.item{padding-top:.85714286em;padding-bottom:.85714286em}.ui[class*="very relaxed"].list:not(.horizontal) .list>.item{padding-top:.28571429em;padding-bottom:.28571429em}.ui.horizontal[class*="very relaxed"].list .list>.item,.ui.horizontal[class*="very relaxed"].list>.item{padding-left:1.5rem;padding-right:1.5rem}.ui.mini.list{font-size:.71428571em}.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:.71428571rem}.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 100755 index 0000000..9083b76 --- /dev/null +++ b/semantic/components/loader.css @@ -0,0 +1,286 @@ +/*! + * # Semantic UI 2.1.7 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%); + -ms-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; + 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.loader:before, +.ui.loader:after { + width: 2.2585em; + height: 2.2585em; + margin: 0em 0em 0em -1.12925em; +} +.ui.mini.loader:before, +.ui.mini.loader:after { + width: 1.2857em; + height: 1.2857em; + margin: 0em 0em 0em -0.64285em; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: 1.7142em; + height: 1.7142em; + margin: 0em 0em 0em -0.8571em; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: 4.5714em; + height: 4.5714em; + margin: 0em 0em 0em -2.2857em; +} + +/*------------------- + 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 { + -webkit-animation-direction: reverse; + 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: 1.2857em; + height: 1.2857em; + font-size: 0.71428571em; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 1.7142em; + height: 1.7142em; + font-size: 0.92857143em; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 2.2585em; + height: 2.2585em; + font-size: 1em; +} +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: 4.5714em; + height: 4.5714em; + font-size: 1.14285714em; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: 1.2857em; + padding-top: 1.99998571em; +} +.ui.small.text.loader { + min-width: 1.7142em; + padding-top: 2.42848571em; +} +.ui.text.loader { + min-width: 2.2585em; + padding-top: 2.97278571em; +} +.ui.large.text.loader { + min-width: 4.5714em; + padding-top: 5.28568571em; +} + +/*------------------- + 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; + -ms-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 100755 index 0000000..eaa77ee --- /dev/null +++ b/semantic/components/loader.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.ui.loader:before{position:absolute;content:'';top:0;left:50%;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.loader:after{position:absolute;content:'';top:0;left:50%;-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;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.loader:after,.ui.loader:before{width:2.2585em;height:2.2585em;margin:0 0 0 -1.12925em}.ui.mini.loader:after,.ui.mini.loader:before{width:1.2857em;height:1.2857em;margin:0 0 0 -.64285em}.ui.small.loader:after,.ui.small.loader:before{width:1.7142em;height:1.7142em;margin:0 0 0 -.8571em}.ui.large.loader:after,.ui.large.loader:before{width:4.5714em;height:4.5714em;margin:0 0 0 -2.2857em}.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{-webkit-animation-direction:reverse;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:1.2857em;height:1.2857em;font-size:.71428571em}.ui.inverted.dimmer .ui.small.loader,.ui.small.loader{width:1.7142em;height:1.7142em;font-size:.92857143em}.ui.inverted.dimmer .ui.loader,.ui.loader{width:2.2585em;height:2.2585em;font-size:1em}.ui.inverted.dimmer .ui.loader.large,.ui.loader.large{width:4.5714em;height:4.5714em;font-size:1.14285714em}.ui.mini.text.loader{min-width:1.2857em;padding-top:1.99998571em}.ui.small.text.loader{min-width:1.7142em;padding-top:2.42848571em}.ui.text.loader{min-width:2.2585em;padding-top:2.97278571em}.ui.large.text.loader{min-width:4.5714em;padding-top:5.28568571em}.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;-ms-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 100755 index 0000000..4fe7645 --- /dev/null +++ b/semantic/components/menu.css @@ -0,0 +1,1984 @@ +/* + * # 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: -webkit-flex; + 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); + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: 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; + -webkit-flex: 0 0 auto; + -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, box-shadow 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, box-shadow 0.1s ease, color 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.71428571em; + padding-top: 0.71428571em; + font-size: 1em; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: inherit; + -webkit-align-items: inherit; + -ms-flex-align: inherit; + align-items: inherit; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-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; +} + +/*-------------- + Popup +---------------*/ + +.ui.menu .ui.popup { + display: none; +} +.ui.menu .ui.visible.popup { + display: block; +} + +/*-------------- + Dropdowns +---------------*/ + + +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: right; + margin: 0em 0em 0em 1em; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + left: 0px; + min-width: calc(100% - 1px); + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + background: #ffffff; + margin: 0em 0px 0px; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -webkit-flex-direction: column !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.71428571em 1.14285714em !important; + background: transparent !important; + color: rgba(0, 0, 0, 0.87) !important; + text-transform: none !important; + font-weight: normal !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; +} + +/* 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 { + top: 0% !important; + left: 100%; + min-width: 0; + margin: 0em 0em 0em 0em; + box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); + border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem; +} +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.active.item { + 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.71428571em; +} +.ui.vertical.menu .item > .label { + background: #999999; + color: #ffffff; + margin-top: -0.15em; + margin-bottom: -0.15em; + padding: 0.3em 0.71428571em; +} +.ui.menu .item > .floating.label { + padding: 0.3em 0.71428571em; +} + +/*-------------- + 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 +*******************************/ + + +/*-------------- + 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; + 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; + background-color: transparent !important; + color: rgba(40, 40, 40, 0.3); +} + + +/******************************* + Types +*******************************/ + + +/*------------------ +Floated Menu / Item +-------------------*/ + + +/* Left Floated */ +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) .left.menu { + display: -webkit-box; + display: -webkit-flex; + 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: -webkit-flex; + 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #ffffff; + 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%; + background: rgba(34, 36, 38, 0.1); + height: 1px; +} +.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; + 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; + box-shadow: none !important; + border: none; + background: none transparent; + border-bottom: 1px solid #d4d4d5; +} +.ui.tabular.fluid.menu { + width: calc(100% + 2px ) !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; + 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: 0px; + width: 100%; +} +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: calc(100% + 2px ); + left: -1px; +} + +/* Bottom Vertical Tabular */ +.ui.bottom.tabular.menu { + background: none transparent; + border-radius: 0em; + 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; + 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; + 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: -webkit-inline-flex; + 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); + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: none; + margin-left: -0.35714286em; + margin-right: -0.35714286em; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + box-shadow: none; + border: none; + padding: 0.71428571em 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 { + 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 { + 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 { + 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; + -webkit-align-self: flex-end; + -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 { + 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; + 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 .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; + box-shadow: none; + border: none; + margin: 1em -0.5em; +} +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + -webkit-align-self: center; + -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; +} +.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; + 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 { + box-shadow: none; +} +.ui.text.attached.menu { + 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; + -webkit-flex-direction: column; + -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; + -webkit-flex-direction: column; + -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%; + background: rgba(34, 36, 38, 0.1); + height: 1px; + } +} + +/*-------------- + 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; + 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; + 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, +.ui.inverted.menu a.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; + 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: -webkit-inline-flex; + 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; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} +.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.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.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); + -ms-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); + -ms-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% + 2px ); + max-width: calc(100% + 2px ); + 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; + 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 +---------------*/ + + +/* 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.14285714rem; +} +.ui.large.vertical.menu { + width: 18rem; +} + +/* Huge */ +.ui.huge.menu { + font-size: 1.42857143rem; +} +.ui.huge.vertical.menu { + width: 20rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/menu.min.css b/semantic/components/menu.min.css new file mode 100755 index 0000000..04ff86f --- /dev/null +++ b/semantic/components/menu.min.css @@ -0,0 +1 @@ +.ui.menu{display:-webkit-box;display:-webkit-flex;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);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:-webkit-flex;display:-ms-flexbox;display:flex}.ui.menu:not(.vertical) .item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items: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;-webkit-flex:0 0 auto;-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,box-shadow .1s ease,color .1s ease;transition:background .1s ease,box-shadow .1s ease,color .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:.71428571em;padding-top:.71428571em;font-size:1em}.ui.menu>.container,.ui.menu>.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:inherit;-webkit-align-items:inherit;-ms-flex-align:inherit;align-items:inherit;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-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:0 0;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 .ui.popup{display:none}.ui.menu .ui.visible.popup{display:block}.ui.menu .item>i.dropdown.icon{padding:0;float:right;margin:0 0 0 1em}.ui.menu .dropdown.item .menu{left:0;min-width:calc(100% - 1px);border-radius:0 0 .28571429rem .28571429rem;background:#fff;margin:0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!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:.71428571em 1.14285714em!important;background:0 0!important;color:rgba(0,0,0,.87)!important;text-transform:none!important;font-weight:400!important;box-shadow:none!important;-webkit-transition:none!important;transition:none!important}.ui.menu .ui.dropdown .menu>.item:hover,.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}.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{top:0!important;left:100%;min-width:0;margin:0;box-shadow:0 1px 3px 0 rgba(0,0,0,.08);border-radius:0 .28571429rem .28571429rem}.ui.vertical.menu .active.dropdown.item{border-top-right-radius:0;border-bottom-right-radius:0}.ui.vertical.menu .dropdown.active.item{box-shadow:none}.ui.item.menu .dropdown .menu .item{width:100%}.ui.menu .item>.label{background:#999;color:#fff;margin-left:1em;padding:.3em .71428571em}.ui.vertical.menu .item>.label{background:#999;color:#fff;margin-top:-.15em;margin-bottom:-.15em;padding:.3em .71428571em;float:right;text-align:center}.ui.menu .item>.floating.label{padding:.3em .71428571em}.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.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;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;background-color:transparent!important;color:rgba(40,40,40,.3)}.ui.menu:not(.vertical) .left.item,.ui.menu:not(.vertical) .left.menu{display:-webkit-box;display:-webkit-flex;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:-webkit-flex;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;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:#fff;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>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%;background:rgba(34,36,38,.1);height:1px}.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;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;box-shadow:none!important;border:none;background:none;border-bottom:1px solid #d4d4d5}.ui.tabular.fluid.menu{width:calc(100% + 2px)!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:#fff;color:rgba(0,0,0,.95);border-top-width:1px;border-color:#d4d4d5;font-weight:700;margin-bottom:-1px;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:0;width:100%}.top.attached.segment+.ui.bottom.tabular.menu{position:relative;width:calc(100% + 2px);left:-1px}.ui.bottom.tabular.menu{background:none;border-radius:0;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:#fff;color:rgba(0,0,0,.95);border-color:#d4d4d5;margin:-1px 0 0;border-radius:0 0 .28571429rem .28571429rem!important}.ui.vertical.tabular.menu{background:none;border-radius:0;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:#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;border-radius:0;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:#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:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.ui.pagination.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);box-shadow:none}.ui.secondary.menu{background:0 0;margin-left:-.35714286em;margin-right:-.35714286em;border-radius:0;border:none;box-shadow:none}.ui.secondary.menu .item{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;box-shadow:none;border:none;padding:.71428571em .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}.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{box-shadow:none;background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);border-radius:.28571429rem}.ui.secondary.menu .active.item:hover{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{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.secondary.inverted.menu,.ui.vertical.secondary.menu .item>.menu .item{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;-webkit-align-self:flex-end;-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{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;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-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 .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;border-radius:0;box-shadow:none;border:none;margin:1em -.5em}.ui.text.menu .item{border-radius:0;box-shadow:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;margin: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.item.menu .item,.ui.text.menu .item>img:not(.ui){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}.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;box-shadow:none;font-weight:400;color:rgba(0,0,0,.95)}.ui.text.menu .active.item:hover{background-color:transparent}.ui.text.attached.menu,.ui.text.pointing.menu .active.item:after{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;-webkit-flex-direction:column;-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;-webkit-flex-direction:column;-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%;background:rgba(34,36,38,.1);height:1px}}.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;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,.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;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;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:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;vertical-align:middle}.ui.compact.vertical.menu{display:inline-block;width:auto!important}.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 .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;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.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);-ms-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);-ms-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:after,.ui.pointing.menu .active.item:hover:after,.ui.vertical.pointing.menu .active.item:after,.ui.vertical.pointing.menu .active.item:hover: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% + 2px);max-width:calc(100% + 2px);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;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}.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.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.14285714rem}.ui.large.vertical.menu{width:18rem}.ui.huge.menu{font-size:1.42857143rem}.ui.huge.vertical.menu{width:20rem} \ No newline at end of file diff --git a/semantic/components/message.css b/semantic/components/message.css new file mode 100755 index 0000000..3e039c3 --- /dev/null +++ b/semantic/components/message.css @@ -0,0 +1,463 @@ +/*! + * # Semantic UI 2.1.7 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + border-radius: 0.28571429rem; + 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.14285em 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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: -1px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + 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; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -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; + -webkit-flex: 1 1 auto; + -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 { + 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.08); +} + +/*-------------- + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; +} +.ui.red.message .header { + color: #c82121; +} +.ui.orange.message { + background-color: #ffedde; + color: #f2711c; +} +.ui.orange.message .header { + color: #e7640d; +} +.ui.yellow.message { + background-color: #fff8db; + color: #b58105; +} +.ui.yellow.message .header { + color: #9c6f04; +} +.ui.olive.message { + background-color: #fbfdef; + color: #8abc1e; +} +.ui.olive.message .header { + color: #7aa61a; +} +.ui.green.message { + background-color: #e5f9e7; + color: #1ebc30; +} +.ui.green.message .header { + color: #1aa62a; +} +.ui.teal.message { + background-color: #e1f7f7; + color: #10a3a3; +} +.ui.teal.message .header { + color: #0e8c8c; +} +.ui.blue.message { + background-color: #dff0ff; + color: #2185d0; +} +.ui.blue.message .header { + color: #1e77ba; +} +.ui.violet.message { + background-color: #eae7ff; + color: #6435c9; +} +.ui.violet.message .header { + color: #5a30b5; +} +.ui.purple.message { + background-color: #f6e7ff; + color: #a333c8; +} +.ui.purple.message .header { + color: #922eb4; +} +.ui.pink.message { + background-color: #ffe3fb; + color: #e03997; +} +.ui.pink.message .header { + color: #dd238b; +} +.ui.brown.message { + background-color: #f1e2d3; + color: #a5673f; +} +.ui.brown.message .header { + color: #935b38; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.message { + font-size: 0.92857143em; +} +.ui.message { + font-size: 1em; +} +.ui.large.message { + font-size: 1.14285714em; +} +.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 100755 index 0000000..c8a4dff --- /dev/null +++ b/semantic/components/message.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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,box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;border-radius:.28571429rem;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:-.14285em 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:-webkit-flex;display:-ms-flexbox;display:flex}.ui.hidden.hidden.hidden.hidden.message{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:-1px;border-radius:.28571429rem .28571429rem 0 0;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;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:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.ui.icon.message>.icon:not(.close){display:block;-webkit-box-flex:0;-webkit-flex:0 0 auto;-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;-webkit-flex:1 1 auto;-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{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,.08)}.ui.positive.message{background-color:#fcfff5;color:#2c662d}.ui.attached.positive.message,.ui.positive.message{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{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{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{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{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{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}.ui.red.message .header{color:#c82121}.ui.orange.message{background-color:#ffedde;color:#f2711c}.ui.orange.message .header{color:#e7640d}.ui.yellow.message{background-color:#fff8db;color:#b58105}.ui.yellow.message .header{color:#9c6f04}.ui.olive.message{background-color:#fbfdef;color:#8abc1e}.ui.olive.message .header{color:#7aa61a}.ui.green.message{background-color:#e5f9e7;color:#1ebc30}.ui.green.message .header{color:#1aa62a}.ui.teal.message{background-color:#e1f7f7;color:#10a3a3}.ui.teal.message .header{color:#0e8c8c}.ui.blue.message{background-color:#dff0ff;color:#2185d0}.ui.blue.message .header{color:#1e77ba}.ui.violet.message{background-color:#eae7ff;color:#6435c9}.ui.violet.message .header{color:#5a30b5}.ui.purple.message{background-color:#f6e7ff;color:#a333c8}.ui.purple.message .header{color:#922eb4}.ui.pink.message{background-color:#ffe3fb;color:#e03997}.ui.pink.message .header{color:#dd238b}.ui.brown.message{background-color:#f1e2d3;color:#a5673f}.ui.brown.message .header{color:#935b38}.ui.small.message{font-size:.92857143em}.ui.message{font-size:1em}.ui.large.message{font-size:1.14285714em}.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 100755 index 0000000..da43bf3 --- /dev/null +++ b/semantic/components/modal.css @@ -0,0 +1,510 @@ +/*! + * # Semantic UI 2.1.7 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Modal +*******************************/ + +.ui.modal { + display: none; + position: fixed; + z-index: 1001; + top: 50%; + left: 50%; + text-align: left; + background: #ffffff; + border: none; + 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%; + -ms-transform-origin: 50% 25%; + transform-origin: 50% 25%; + 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; + 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.2857em; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +/* Image */ +.ui.modal > .content > .image { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: ''; + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > [class*="top aligned"] { + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > [class*="middle aligned"] { + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} +.ui.modal > [class*="stretched"] { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +/* Description */ +.ui.modal > .content > .description { + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + min-width: 0px; + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} +.ui.modal > .content > .icon + .description, +.ui.modal > .content > .image + .description { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -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 -47.5%; + } +} +@media only screen and (min-width: 768px) { + .ui.modal { + width: 88%; + margin: 0em 0em 0em -44%; + } +} +@media only screen and (min-width: 992px) { + .ui.modal { + width: 850px; + margin: 0em 0em 0em -425px; + } +} +@media only screen and (min-width: 1200px) { + .ui.modal { + width: 900px; + margin: 0em 0em 0em -450px; + } +} +@media only screen and (min-width: 1920px) { + .ui.modal { + width: 950px; + margin: 0em 0em 0em -475px; + } +} + +/* 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; + -webkit-flex-direction: column; + -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; + 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 { + box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); +} + + +/******************************* + Types +*******************************/ + +.ui.basic.modal { + background-color: transparent; + border: none; + border-radius: 0em; + 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); +} + +/* Tablet and Mobile */ +@media only screen and (max-width: 991px) { + .ui.basic.modal > .close { + color: #ffffff; + } +} + + +/******************************* + States +*******************************/ + +.ui.active.modal { + display: block; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Scrolling +---------------*/ + + +/* A modal that cannot fit on the page */ +.scrolling.dimmable.dimmed { + overflow: hidden; +} +.scrolling.dimmable.dimmed > .dimmer { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.scrolling.dimmable > .dimmer { + position: fixed; +} +.modals.dimmer .ui.scrolling.modal { + position: static !important; + margin: 3.5rem auto !important; +} + +/* 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: 3.5rem !important; +} + +/* Coupling with Sidebar */ +.undetached.dimmable.dimmed > .pusher { + z-index: auto; +} +@media only screen and (max-width: 991px) { + .modals.dimmer .ui.scrolling.modal { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } +} + +/*-------------- + Full Screen +---------------*/ + +.ui.fullscreen.modal { + width: 95% !important; + left: 2.5% !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; +} + +/* 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 -47.5%; + } +} +@media only screen and (min-width: 768px) { + .ui.small.modal { + width: 70.4%; + margin: 0em 0em 0em -35.2%; + } +} +@media only screen and (min-width: 992px) { + .ui.small.modal { + width: 680px; + margin: 0em 0em 0em -340px; + } +} +@media only screen and (min-width: 1200px) { + .ui.small.modal { + width: 720px; + margin: 0em 0em 0em -360px; + } +} +@media only screen and (min-width: 1920px) { + .ui.small.modal { + width: 760px; + margin: 0em 0em 0em -380px; + } +} + +/* 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 -47.5%; + } +} +@media only screen and (min-width: 768px) { + .ui.large.modal { + width: 88%; + margin: 0em 0em 0em -44%; + } +} +@media only screen and (min-width: 992px) { + .ui.large.modal { + width: 1020px; + margin: 0em 0em 0em -510px; + } +} +@media only screen and (min-width: 1200px) { + .ui.large.modal { + width: 1080px; + margin: 0em 0em 0em -540px; + } +} +@media only screen and (min-width: 1920px) { + .ui.large.modal { + width: 1140px; + margin: 0em 0em 0em -570px; + } +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/modal.js b/semantic/components/modal.js new file mode 100755 index 0000000..5b3dfb5 --- /dev/null +++ b/semantic/components/modal.js @@ -0,0 +1,892 @@ +/*! + * # Semantic UI 2.1.7 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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), + + elementNamespace, + 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, + dimmerName : 'modals', + 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' + ; + } + if($.fn.dimmer === undefined) { + module.error(error.dimmer); + return; + } + module.debug('Creating dimmer with settings', dimmerSettings); + $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(); + } + if(settings.blurring) { + $dimmable.addClass(className.blurring); + } + $dimmer = $dimmable.dimmer('get dimmer'); + }, + 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 modal'); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + $window.off(elementNamespace); + $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(); + module.set.screenHeight(); + module.set.type(); + module.set.position(); + }, + + 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' + elementNamespace, module.event.resize) + ; + } + }, + + get: { + id: function() { + return (Math.random().toString(16) + '000000000').substr(2,8); + } + }, + + event: { + approve: function() { + if(settings.onApprove.call(element, $(this)) === false) { + module.verbose('Approve callback returned false cancelling hide'); + return; + } + module.hide(); + }, + deny: function() { + if(settings.onDeny.call(element, $(this)) === false) { + module.verbose('Deny callback returned false cancelling hide'); + return; + } + module.hide(); + }, + close: function() { + module.hide(); + }, + click: function(event) { + var + $target = $(event.target), + isInModal = ($target.closest(selector.modal).length > 0), + isInDOM = $.contains(document.documentElement, event.target) + ; + if(!isInModal && isInDOM) { + module.debug('Dimmer clicked, hiding all modals'); + if( module.is.active() ) { + 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') ) { + 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.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(); + module.set.position(); + module.set.screenHeight(); + module.set.type(); + module.set.clickaway(); + + if( !settings.allowMultiple && module.others.active() ) { + module.hideOthers(module.showModal); + } + else { + 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); + 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(); + } + module.remove.keyboardShortcuts(); + }, + onComplete : function() { + settings.onHidden.call(element); + 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')) ) { + $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() { + $focusedElement = $(document.activeElement).blur(); + } + }, + + restore: { + focus: function() { + if($focusedElement && $focusedElement.length > 0) { + $focusedElement.focus(); + } + } + }, + + remove: { + active: function() { + $module.removeClass(className.active); + }, + clickaway: function() { + if(settings.closable) { + $dimmer + .off('click' + elementNamespace) + ; + } + }, + 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() { + var + modalHeight = $module.outerHeight() + ; + if(module.cache === undefined || modalHeight !== 0) { + module.cache = { + pageHeight : $(document).outerHeight(), + height : modalHeight + settings.offset, + contextHeight : (settings.context == 'body') + ? $(window).height() + : $dimmable.height() + }; + } + module.debug('Caching modal and container sizes', module.cache); + }, + + can: { + fit: function() { + return ( ( module.cache.height + (settings.padding * 2) ) < module.cache.contextHeight); + } + }, + + is: { + active: function() { + return $module.hasClass(className.active); + }, + 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(':input').filter(':visible'), + $autofocus = $inputs.filter('[autofocus]'), + $input = ($autofocus.length > 0) + ? $autofocus.first() + : $inputs.first() + ; + if($input.length > 0) { + $input.focus(); + } + }, + clickaway: function() { + if(settings.closable) { + $dimmer + .on('click' + elementNamespace, module.event.click) + ; + } + }, + 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); + }, + type: function() { + if(module.can.fit()) { + module.verbose('Modal fits on screen'); + if(!module.others.active() && !module.others.animating()) { + module.remove.scrolling(); + } + } + else { + module.verbose('Modal cannot fit on screen setting to scrolling'); + module.set.scrolling(); + } + }, + position: function() { + module.verbose('Centering modal on page', module.cache); + if(module.can.fit()) { + $module + .css({ + top: '', + marginTop: -(module.cache.height / 2) + }) + ; + } + else { + $module + .css({ + marginTop : '', + top : $document.scrollTop() + }) + ; + } + }, + 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) { + 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({ + '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', + + debug : false, + verbose : false, + performance : true, + + observeChanges : false, + + allowMultiple : false, + detachable : true, + closable : true, + autofocus : true, + + inverted : false, + blurring : false, + + dimmerSettings : { + closable : false, + useCSS : true + }, + + + context : 'body', + + queue : false, + duration : 500, + offset : 0, + 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', + scrolling : 'scrolling', + undetached : 'undetached' + } +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/modal.min.css b/semantic/components/modal.min.css new file mode 100755 index 0000000..084e505 --- /dev/null +++ b/semantic/components/modal.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.modal{display:none;position:fixed;z-index:1001;top:50%;left:50%;text-align:left;background:#fff;border:none;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%;-ms-transform-origin:50% 25%;transform-origin:50% 25%;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}.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;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.2857em;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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.ui.modal>.content>.image{display:block;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;width:'';-webkit-align-self:top;-ms-flex-item-align:top;align-self:top}.ui.modal>[class*="top aligned"]{-webkit-align-self:top;-ms-flex-item-align:top;align-self:top}.ui.modal>[class*="middle aligned"]{-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle}.ui.modal>[class*=stretched]{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.ui.modal>.content>.description{display:block;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;min-width:0;-webkit-align-self:top;-ms-flex-item-align:top;align-self:top}.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{-webkit-box-flex:0;-webkit-flex:0 1 auto;-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;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 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.modal{width:850px;margin:0 0 0 -425px}}@media only screen and (min-width:1200px){.ui.modal{width:900px;margin:0 0 0 -450px}}@media only screen and (min-width:1920px){.ui.modal{width:950px;margin:0 0 0 -475px}}@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 2.25rem .75rem 1rem!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;-webkit-flex-direction:column;-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;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{box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)}.ui.basic.modal{background-color:transparent;border:none;border-radius:0;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.active.modal{display:block}.scrolling.dimmable.dimmed{overflow:hidden}.scrolling.dimmable.dimmed>.dimmer{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.dimmable>.dimmer{position:fixed}.modals.dimmer .ui.scrolling.modal{position:static!important;margin:3.5rem auto!important}.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:3.5rem!important}.undetached.dimmable.dimmed>.pusher{z-index:auto}@media only screen and (max-width:991px){.ui.basic.modal>.close{color:#fff}.modals.dimmer .ui.scrolling.modal{margin-top:1rem!important;margin-bottom:1rem!important}}.ui.fullscreen.modal{width:95%!important;left:2.5%!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.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.small.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.small.modal{width:70.4%;margin:0 0 0 -35.2%}}@media only screen and (min-width:992px){.ui.small.modal{width:680px;margin:0 0 0 -340px}}@media only screen and (min-width:1200px){.ui.small.modal{width:720px;margin:0 0 0 -360px}}@media only screen and (min-width:1920px){.ui.small.modal{width:760px;margin:0 0 0 -380px}}.ui.large.modal>.header{font-size:1.6em}@media only screen and (max-width:767px){.ui.large.modal{width:95%;margin:0 0 0 -47.5%}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0 0 0 -44%}}@media only screen and (min-width:992px){.ui.large.modal{width:1020px;margin:0 0 0 -510px}}@media only screen and (min-width:1200px){.ui.large.modal{width:1080px;margin:0 0 0 -540px}}@media only screen and (min-width:1920px){.ui.large.modal{width:1140px;margin:0 0 0 -570px}} \ No newline at end of file diff --git a/semantic/components/modal.min.js b/semantic/components/modal.min.js new file mode 100755 index 0000000..19f8358 --- /dev/null +++ b/semantic/components/modal.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,n,i,t){"use strict";e.fn.modal=function(o){var a,r=e(this),s=e(n),c=e(i),l=e("body"),u=r.selector||"",d=(new Date).getTime(),m=[],g=arguments[0],f="string"==typeof g,h=[].slice.call(arguments,1),v=n.requestAnimationFrame||n.mozRequestAnimationFrame||n.webkitRequestAnimationFrame||n.msRequestAnimationFrame||function(e){setTimeout(e,0)};return r.each(function(){var r,b,p,y,k,w,C,M,S,F=e.isPlainObject(o)?e.extend(!0,{},e.fn.modal.settings,o):e.extend({},e.fn.modal.settings),A=F.selector,D=F.className,H=F.namespace,T=F.error,x="."+H,z="module-"+H,O=e(this),q=e(F.context),E=O.find(A.close),j=this,R=O.data(z);S={initialize:function(){S.verbose("Initializing dimmer",q),S.create.id(),S.create.dimmer(),S.refreshModals(),S.bind.events(),F.observeChanges&&S.observeChanges(),S.instantiate()},instantiate:function(){S.verbose("Storing instance of modal"),R=S,O.data(z,R)},create:{dimmer:function(){var n={debug:F.debug,dimmerName:"modals",duration:{show:F.duration,hide:F.duration}},i=e.extend(!0,n,F.dimmerSettings);return F.inverted&&(i.variation=i.variation!==t?i.variation+" inverted":"inverted"),e.fn.dimmer===t?void S.error(T.dimmer):(S.debug("Creating dimmer with settings",i),y=q.dimmer(i),F.detachable?(S.verbose("Modal is detachable, moving content into dimmer"),y.dimmer("add content",O)):S.set.undetached(),F.blurring&&y.addClass(D.blurring),void(k=y.dimmer("get dimmer")))},id:function(){C=(Math.random().toString(16)+"000000000").substr(2,8),w="."+C,S.verbose("Creating unique id for element",C)}},destroy:function(){S.verbose("Destroying previous modal"),O.removeData(z).off(x),s.off(w),E.off(x),q.dimmer("destroy")},observeChanges:function(){"MutationObserver"in n&&(M=new MutationObserver(function(e){S.debug("DOM tree modified, refreshing"),S.refresh()}),M.observe(j,{childList:!0,subtree:!0}),S.debug("Setting up mutation observer",M))},refresh:function(){S.remove.scrolling(),S.cacheSizes(),S.set.screenHeight(),S.set.type(),S.set.position()},refreshModals:function(){b=O.siblings(A.modal),r=b.add(O)},attachEvents:function(n,i){var t=e(n);i=e.isFunction(S[i])?S[i]:S.toggle,t.length>0?(S.debug("Attaching modal events to element",n,i),t.off(x).on("click"+x,i)):S.error(T.notFound,n)},bind:{events:function(){S.verbose("Attaching events"),O.on("click"+x,A.close,S.event.close).on("click"+x,A.approve,S.event.approve).on("click"+x,A.deny,S.event.deny),s.on("resize"+w,S.event.resize)}},get:{id:function(){return(Math.random().toString(16)+"000000000").substr(2,8)}},event:{approve:function(){return F.onApprove.call(j,e(this))===!1?void S.verbose("Approve callback returned false cancelling hide"):void S.hide()},deny:function(){return F.onDeny.call(j,e(this))===!1?void S.verbose("Deny callback returned false cancelling hide"):void S.hide()},close:function(){S.hide()},click:function(n){var t=e(n.target),o=t.closest(A.modal).length>0,a=e.contains(i.documentElement,n.target);!o&&a&&(S.debug("Dimmer clicked, hiding all modals"),S.is.active()&&(S.remove.clickaway(),F.allowMultiple?S.hide():S.hideAll()))},debounce:function(e,n){clearTimeout(S.timer),S.timer=setTimeout(e,n)},keyboard:function(e){var n=e.which,i=27;n==i&&(F.closable?(S.debug("Escape key pressed hiding modal"),S.hide()):S.debug("Escape key pressed, but closable is set to false"),e.preventDefault())},resize:function(){y.dimmer("is active")&&v(S.refresh)}},toggle:function(){S.is.active()||S.is.animating()?S.hide():S.show()},show:function(n){n=e.isFunction(n)?n:function(){},S.refreshModals(),S.showModal(n)},hide:function(n){n=e.isFunction(n)?n:function(){},S.refreshModals(),S.hideModal(n)},showModal:function(n){n=e.isFunction(n)?n:function(){},S.is.animating()||!S.is.active()?(S.showDimmer(),S.cacheSizes(),S.set.position(),S.set.screenHeight(),S.set.type(),S.set.clickaway(),!F.allowMultiple&&S.others.active()?S.hideOthers(S.showModal):(F.onShow.call(j),F.transition&&e.fn.transition!==t&&O.transition("is supported")?(S.debug("Showing modal with css animations"),O.transition({debug:F.debug,animation:F.transition+" in",queue:F.queue,duration:F.duration,useFailSafe:!0,onComplete:function(){F.onVisible.apply(j),S.add.keyboardShortcuts(),S.save.focus(),S.set.active(),F.autofocus&&S.set.autofocus(),n()}})):S.error(T.noTransition))):S.debug("Modal is already visible")},hideModal:function(n,i){return n=e.isFunction(n)?n:function(){},S.debug("Hiding modal"),F.onHide.call(j,e(this))===!1?void S.verbose("Hide callback returned false cancelling hide"):void((S.is.animating()||S.is.active())&&(F.transition&&e.fn.transition!==t&&O.transition("is supported")?(S.remove.active(),O.transition({debug:F.debug,animation:F.transition+" out",queue:F.queue,duration:F.duration,useFailSafe:!0,onStart:function(){S.others.active()||i||S.hideDimmer(),S.remove.keyboardShortcuts()},onComplete:function(){F.onHidden.call(j),S.restore.focus(),n()}})):S.error(T.noTransition)))},showDimmer:function(){y.dimmer("is animating")||!y.dimmer("is active")?(S.debug("Showing dimmer"),y.dimmer("show")):S.debug("Dimmer already visible")},hideDimmer:function(){return y.dimmer("is animating")||y.dimmer("is active")?void y.dimmer("hide",function(){S.remove.clickaway(),S.remove.screenHeight()}):void S.debug("Dimmer is not visible cannot hide")},hideAll:function(n){var i=r.filter("."+D.active+", ."+D.animating);n=e.isFunction(n)?n:function(){},i.length>0&&(S.debug("Hiding all visible modals"),S.hideDimmer(),i.modal("hide modal",n))},hideOthers:function(n){var i=b.filter("."+D.active+", ."+D.animating);n=e.isFunction(n)?n:function(){},i.length>0&&(S.debug("Hiding other modals",b),i.modal("hide modal",n,!0))},others:{active:function(){return b.filter("."+D.active).length>0},animating:function(){return b.filter("."+D.animating).length>0}},add:{keyboardShortcuts:function(){S.verbose("Adding keyboard shortcuts"),c.on("keyup"+x,S.event.keyboard)}},save:{focus:function(){p=e(i.activeElement).blur()}},restore:{focus:function(){p&&p.length>0&&p.focus()}},remove:{active:function(){O.removeClass(D.active)},clickaway:function(){F.closable&&k.off("click"+w)},bodyStyle:function(){""===l.attr("style")&&(S.verbose("Removing style attribute"),l.removeAttr("style"))},screenHeight:function(){S.debug("Removing page height"),l.css("height","")},keyboardShortcuts:function(){S.verbose("Removing keyboard shortcuts"),c.off("keyup"+x)},scrolling:function(){y.removeClass(D.scrolling),O.removeClass(D.scrolling)}},cacheSizes:function(){var o=O.outerHeight();(S.cache===t||0!==o)&&(S.cache={pageHeight:e(i).outerHeight(),height:o+F.offset,contextHeight:"body"==F.context?e(n).height():y.height()}),S.debug("Caching modal and container sizes",S.cache)},can:{fit:function(){return S.cache.height+2*F.padding0?n.first():e.first();i.length>0&&i.focus()},clickaway:function(){F.closable&&k.on("click"+w,S.event.click)},screenHeight:function(){S.can.fit()?l.css("height",""):(S.debug("Modal is taller than page content, resizing page height"),l.css("height",S.cache.height+2*F.padding))},active:function(){O.addClass(D.active)},scrolling:function(){y.addClass(D.scrolling),O.addClass(D.scrolling)},type:function(){S.can.fit()?(S.verbose("Modal fits on screen"),S.others.active()||S.others.animating()||S.remove.scrolling()):(S.verbose("Modal cannot fit on screen setting to scrolling"),S.set.scrolling())},position:function(){S.verbose("Centering modal on page",S.cache),O.css(S.can.fit()?{top:"",marginTop:-(S.cache.height/2)}:{marginTop:"",top:c.scrollTop()})},undetached:function(){y.addClass(D.undetached)}},setting:function(n,i){if(S.debug("Changing setting",n,i),e.isPlainObject(n))e.extend(!0,F,n);else{if(i===t)return F[n];F[n]=i}},internal:function(n,i){if(e.isPlainObject(n))e.extend(!0,S,n);else{if(i===t)return S[n];S[n]=i}},debug:function(){F.debug&&(F.performance?S.performance.log(arguments):(S.debug=Function.prototype.bind.call(console.info,console,F.name+":"),S.debug.apply(console,arguments)))},verbose:function(){F.verbose&&F.debug&&(F.performance?S.performance.log(arguments):(S.verbose=Function.prototype.bind.call(console.info,console,F.name+":"),S.verbose.apply(console,arguments)))},error:function(){S.error=Function.prototype.bind.call(console.error,console,F.name+":"),S.error.apply(console,arguments)},performance:{log:function(e){var n,i,t;F.performance&&(n=(new Date).getTime(),t=d||n,i=n-t,d=n,m.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:j,"Execution Time":i})),clearTimeout(S.performance.timer),S.performance.timer=setTimeout(S.performance.display,500)},display:function(){var n=F.name+":",i=0;d=!1,clearTimeout(S.performance.timer),e.each(m,function(e,n){i+=n["Execution Time"]}),n+=" "+i+"ms",u&&(n+=" '"+u+"'"),(console.group!==t||console.table!==t)&&m.length>0&&(console.groupCollapsed(n),console.table?console.table(m):e.each(m,function(e,n){console.log(n.Name+": "+n["Execution Time"]+"ms")}),console.groupEnd()),m=[]}},invoke:function(n,i,o){var r,s,c,l=R;return i=i||h,o=j||o,"string"==typeof n&&l!==t&&(n=n.split(/[\. ]/),r=n.length-1,e.each(n,function(i,o){var a=i!=r?o+n[i+1].charAt(0).toUpperCase()+n[i+1].slice(1):n;if(e.isPlainObject(l[a])&&i!=r)l=l[a];else{if(l[a]!==t)return s=l[a],!1;if(!e.isPlainObject(l[o])||i==r)return l[o]!==t?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(o,i):s!==t&&(c=s),e.isArray(a)?a.push(c):a!==t?a=[a,c]:c!==t&&(a=c),s}},f?(R===t&&S.initialize(),S.invoke(g)):(R!==t&&R.invoke("destroy"),S.initialize())}),a!==t?a:this},e.fn.modal.settings={name:"Modal",namespace:"modal",debug:!1,verbose:!1,performance:!0,observeChanges:!1,allowMultiple:!1,detachable:!0,closable:!0,autofocus:!0,inverted:!1,blurring:!1,dimmerSettings:{closable:!1,useCSS:!0},context:"body",queue:!1,duration:500,offset:0,transition:"scale",padding:50,onShow:function(){},onVisible:function(){},onHide:function(){return!0},onHidden:function(){},onApprove:function(){return!0},onDeny:function(){return!0},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",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 100755 index 0000000..8252239 --- /dev/null +++ b/semantic/components/nag.css @@ -0,0 +1,148 @@ +/*! + * # Semantic UI 2.1.7 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + 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 100755 index 0000000..de1d003 --- /dev/null +++ b/semantic/components/nag.js @@ -0,0 +1,486 @@ +/*! + * # Semantic UI 2.1.7 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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) { + 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({ + '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', + + debug : false, + verbose : false, + performance : true, + + namespace : 'Nag', + + // allows cookie to be overriden + 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() {} + +}; + +})( jQuery, window, document ); diff --git a/semantic/components/nag.min.css b/semantic/components/nag.min.css new file mode 100755 index 0000000..404fa4d --- /dev/null +++ b/semantic/components/nag.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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;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 100755 index 0000000..6665705 --- /dev/null +++ b/semantic/components/nag.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,o,t,n){"use strict";e.fn.nag=function(t){var i,s=e(this),a=s.selector||"",r=(new Date).getTime(),c=[],l=arguments[0],g="string"==typeof l,u=[].slice.call(arguments,1);return s.each(function(){{var s,d=e.isPlainObject(t)?e.extend(!0,{},e.fn.nag.settings,t):e.extend({},e.fn.nag.settings),m=(d.className,d.selector),f=d.error,p=d.namespace,h="."+p,b=p+"-module",v=e(this),y=(v.find(m.close),e(d.context?d.context:"body")),k=this,S=v.data(b);o.requestAnimationFrame||o.mozRequestAnimationFrame||o.webkitRequestAnimationFrame||o.msRequestAnimationFrame||function(e){setTimeout(e,0)}}s={initialize:function(){s.verbose("Initializing element"),v.on("click"+h,m.close,s.dismiss).data(b,s),d.detachable&&v.parent()[0]!==y[0]&&v.detach().prependTo(y),d.displayTime>0&&setTimeout(s.hide,d.displayTime),s.show()},destroy:function(){s.verbose("Destroying instance"),v.removeData(b).off(h)},show:function(){s.should.show()&&!v.is(":visible")&&(s.debug("Showing nag",d.animation.show),"fade"==d.animation.show?v.fadeIn(d.duration,d.easing):v.slideDown(d.duration,d.easing))},hide:function(){s.debug("Showing nag",d.animation.hide),"fade"==d.animation.show?v.fadeIn(d.duration,d.easing):v.slideUp(d.duration,d.easing)},onHide:function(){s.debug("Removing nag",d.animation.hide),v.remove(),d.onHide&&d.onHide()},dismiss:function(e){d.storageMethod&&s.storage.set(d.key,d.value),s.hide(),e.stopImmediatePropagation(),e.preventDefault()},should:{show:function(){return d.persist?(s.debug("Persistent nag is set, can show nag"),!0):s.storage.get(d.key)!=d.value.toString()?(s.debug("Stored value is not set, can show nag",s.storage.get(d.key)),!0):(s.debug("Stored value is set, cannot show nag",s.storage.get(d.key)),!1)}},get:{storageOptions:function(){var e={};return d.expires&&(e.expires=d.expires),d.domain&&(e.domain=d.domain),d.path&&(e.path=d.path),e}},clear:function(){s.storage.remove(d.key)},storage:{set:function(t,i){var a=s.get.storageOptions();if("localstorage"==d.storageMethod&&o.localStorage!==n)o.localStorage.setItem(t,i),s.debug("Value stored using local storage",t,i);else if("sessionstorage"==d.storageMethod&&o.sessionStorage!==n)o.sessionStorage.setItem(t,i),s.debug("Value stored using session storage",t,i);else{if(e.cookie===n)return void s.error(f.noCookieStorage);e.cookie(t,i,a),s.debug("Value stored using cookie",t,i,a)}},get:function(t,i){var a;return"localstorage"==d.storageMethod&&o.localStorage!==n?a=o.localStorage.getItem(t):"sessionstorage"==d.storageMethod&&o.sessionStorage!==n?a=o.sessionStorage.getItem(t):e.cookie!==n?a=e.cookie(t):s.error(f.noCookieStorage),("undefined"==a||"null"==a||a===n||null===a)&&(a=n),a},remove:function(t){var i=s.get.storageOptions();"localstorage"==d.storageMethod&&o.localStorage!==n?o.localStorage.removeItem(t):"sessionstorage"==d.storageMethod&&o.sessionStorage!==n?o.sessionStorage.removeItem(t):e.cookie!==n?e.removeCookie(t,i):s.error(f.noStorage)}},setting:function(o,t){if(s.debug("Changing setting",o,t),e.isPlainObject(o))e.extend(!0,d,o);else{if(t===n)return d[o];d[o]=t}},internal:function(o,t){if(e.isPlainObject(o))e.extend(!0,s,o);else{if(t===n)return s[o];s[o]=t}},debug:function(){d.debug&&(d.performance?s.performance.log(arguments):(s.debug=Function.prototype.bind.call(console.info,console,d.name+":"),s.debug.apply(console,arguments)))},verbose:function(){d.verbose&&d.debug&&(d.performance?s.performance.log(arguments):(s.verbose=Function.prototype.bind.call(console.info,console,d.name+":"),s.verbose.apply(console,arguments)))},error:function(){s.error=Function.prototype.bind.call(console.error,console,d.name+":"),s.error.apply(console,arguments)},performance:{log:function(e){var o,t,n;d.performance&&(o=(new Date).getTime(),n=r||o,t=o-n,r=o,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:k,"Execution Time":t})),clearTimeout(s.performance.timer),s.performance.timer=setTimeout(s.performance.display,500)},display:function(){var o=d.name+":",t=0;r=!1,clearTimeout(s.performance.timer),e.each(c,function(e,o){t+=o["Execution Time"]}),o+=" "+t+"ms",a&&(o+=" '"+a+"'"),(console.group!==n||console.table!==n)&&c.length>0&&(console.groupCollapsed(o),console.table?console.table(c):e.each(c,function(e,o){console.log(o.Name+": "+o["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(o,t,a){var r,c,l,g=S;return t=t||u,a=k||a,"string"==typeof o&&g!==n&&(o=o.split(/[\. ]/),r=o.length-1,e.each(o,function(t,i){var a=t!=r?i+o[t+1].charAt(0).toUpperCase()+o[t+1].slice(1):o;if(e.isPlainObject(g[a])&&t!=r)g=g[a];else{if(g[a]!==n)return c=g[a],!1;if(!e.isPlainObject(g[i])||t==r)return g[i]!==n?(c=g[i],!1):(s.error(f.method,o),!1);g=g[i]}})),e.isFunction(c)?l=c.apply(a,t):c!==n&&(l=c),e.isArray(i)?i.push(l):i!==n?i=[i,l]:l!==n&&(i=l),c}},g?(S===n&&s.initialize(),s.invoke(l)):(S!==n&&S.invoke("destroy"),s.initialize())}),i!==n?i:this},e.fn.nag.settings={name:"Nag",debug:!1,verbose:!1,performance:!0,namespace:"Nag",persist:!1,displayTime:0,animation:{show:"slide",hide:"slide"},context:!1,detachable:!1,expires:30,domain:!1,path:"/",storageMethod:"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(){}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/popup.css b/semantic/components/popup.css new file mode 100755 index 0000000..bd5e84a --- /dev/null +++ b/semantic/components/popup.css @@ -0,0 +1,385 @@ +/*! + * # Semantic UI 2.1.7 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); +} +.ui.popup > .header { + padding: 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} +.ui.popup > .header + .content { + padding-top: 0.5em; +} +.ui.popup:before { + position: absolute; + content: ''; + width: 0.75em; + height: 0.75em; + background: #ffffff; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + box-shadow: 1px 1px 0px 0px #bababc; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0em; +} + +/* Extending from Top */ +.ui.top.popup { + margin: 0em 0em 0.75em; +} +.ui.top.left.popup { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; +} +.ui.top.center.popup { + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; +} +.ui.top.right.popup { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ +.ui.left.center.popup { + margin: 0em 0.75em 0em 0em; + -webkit-transform-origin: right 50%; + -ms-transform-origin: right 50%; + transform-origin: right 50%; +} +.ui.right.center.popup { + margin: 0em 0em 0em 0.75em; + -webkit-transform-origin: left 50%; + -ms-transform-origin: left 50%; + transform-origin: left 50%; +} + +/* Extending from Bottom */ +.ui.bottom.popup { + margin: 0.75em 0em 0em; +} +.ui.bottom.left.popup { + -webkit-transform-origin: left top; + -ms-transform-origin: left top; + transform-origin: left top; +} +.ui.bottom.center.popup { + -webkit-transform-origin: center top; + -ms-transform-origin: center top; + transform-origin: center top; +} +.ui.bottom.right.popup { + -webkit-transform-origin: right top; + -ms-transform-origin: right top; + transform-origin: right top; +} + +/*-------------- + Pointer +---------------*/ + + +/*--- Below ---*/ + +.ui.bottom.center.popup:before { + margin-left: -0.325em; + top: -0.325em; + left: 50%; + right: auto; + bottom: auto; + box-shadow: -1px -1px 0px 0px #bababc; +} +.ui.bottom.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.bottom.left.popup:before { + top: -0.325em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #bababc; +} +.ui.bottom.right.popup { + margin-right: 0em; +} +/*rtl:rename*/ +.ui.bottom.right.popup:before { + top: -0.325em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #bababc; +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.325em; + left: 50%; + margin-left: -0.325em; +} +.ui.top.left.popup { + margin-left: 0em; +} +/*rtl:rename*/ +.ui.top.left.popup:before { + bottom: -0.325em; + 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.325em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ + +/*rtl:rename*/ +.ui.left.center.popup:before { + top: 50%; + right: -0.325em; + bottom: auto; + left: auto; + margin-top: -0.325em; + box-shadow: 1px -1px 0px 0px #bababc; +} + +/*--- Right Center ---*/ + +/*rtl:rename*/ +.ui.right.center.popup:before { + top: 50%; + left: -0.325em; + bottom: auto; + right: auto; + margin-top: -0.325em; + 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; + box-shadow: none; +} +.ui.inverted.popup .header { + background-color: none; + color: #ffffff; +} +.ui.inverted.popup:before { + background-color: #1b1c1d; + box-shadow: none !important; +} + +/*-------------- + Flowing +---------------*/ + +.ui.flowing.popup { + max-width: none; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.popup { + font-size: 0.71428571rem; +} +.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 100755 index 0000000..18f4a5f --- /dev/null +++ b/semantic/components/popup.js @@ -0,0 +1,1413 @@ +/*! + * # Semantic UI 2.1.7 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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), + $target = (settings.target) + ? $(settings.target) + : $module, + + $popup, + $offsetParent, + + searchDepth = 0, + triedPositions = false, + openedWithTouch = false, + + element = this, + instance = $module.data(moduleNamespace), + + elementNamespace, + id, + module + ; + + module = { + + // binds events + initialize: function() { + module.debug('Initializing', $module); + module.createID(); + module.bind.events(); + if( !module.exists() && settings.preserve) { + module.create(); + } + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + 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 activating element'); + $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'); + // remove element only if was created dynamically + if($popup && !settings.preserve) { + module.removePopup(); + } + // clear all timeouts + clearTimeout(module.hideTimer); + clearTimeout(module.showTimer); + // remove events + $window.off(elementNamespace); + $module + .off(eventNamespace) + .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(); + } + }, + hideGracefully: function(event) { + // don't close on clicks inside popup + if(event && $(event.target).closest(selector.popup).length === 0) { + 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.popups = $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.visible) + .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; + } + }, + 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) || $module.attr('title') || settings.content; + }, + 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 + targetElement = $target[0], + targetPosition = (settings.inline || (settings.popup && settings.movePopup)) + ? $target.position() + : $target.offset(), + calculations = {}, + 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 : { + scroll: { + top : $window.scrollTop(), + left : $window.scrollLeft() + }, + width : $window.width(), + height : $window.height() + } + }; + + // 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.scroll.top, + bottom : screen.scroll.top + screen.height, + left : screen.scroll.left, + right : 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 + ; + offset = offset || module.get.offset(); + 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($target) { + var + element = ($target !== undefined) + ? $target[0] + : $module[0], + parentNode = element.parentNode, + $node = $(parentNode) + ; + if(parentNode) { + var + is2D = ($node.css('transform') === 'none'), + isStatic = ($node.css('position') === 'static'), + isHTML = $node.is('html') + ; + while(parentNode && !isHTML && isStatic && is2D) { + parentNode = parentNode.parentNode; + $node = $(parentNode); + is2D = ($node.css('transform') === 'none'); + isStatic = ($node.css('position') === 'static'); + isHTML = $node.is('html'); + } + } + 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(target.width === 0 && target.height === 0 && !(target.element instanceof SVGGraphicsElement)) { + 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')) { + $document + .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully) + ; + $context + .one(module.get.scrollEvent() + elementNamespace, module.event.hideGracefully) + ; + } + if(settings.on == 'hover' && openedWithTouch) { + module.verbose('Binding popup close event to document'); + $document + .on('touchstart' + elementNamespace, function(event) { + module.verbose('Touched away from popup'); + module.event.hideGracefully.call(element, event); + }) + ; + } + if(settings.on == 'click' && settings.closable) { + 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: { + close: function() { + if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { + $document + .off('scroll' + elementNamespace, module.hide) + ; + $context + .off('scroll' + elementNamespace, module.hide) + ; + } + if(settings.on == 'hover' && openedWithTouch) { + $document + .off('touchstart' + elementNamespace) + ; + openedWithTouch = false; + } + if(settings.on == 'click' && settings.closable) { + module.verbose('Removing close event from document'); + $document + .off('click' + elementNamespace) + ; + } + } + }, + + has: { + popup: function() { + return ($popup && $popup.length > 0); + } + }, + + is: { + 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; + } + }, + 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.visible)); + }, + 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.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({ + '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 + debug : false, + verbose : false, + performance : true, + namespace : 'popup', + + // 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', + + // 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', + + // position to prefer when calculating new position + prefer : 'opposite', + + // specify position to appear even if it doesn't fit + lastResort : false, + + // 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', + animating : 'animating', + dropdown : 'dropdown', + fluid : 'fluid', + loading : 'loading', + popup : 'ui popup', + position : 'top left center bottom right', + visible : '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 += ''; + } + 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 100755 index 0000000..cd949df --- /dev/null +++ b/semantic/components/popup.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);margin:0}.ui.popup>.header{padding:0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1.125em;line-height:1.2;font-weight:700}.ui.popup>.header+.content{padding-top:.5em}.ui.popup:before{position:absolute;content:'';width:.75em;height:.75em;background:#fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);z-index:2;box-shadow:1px 1px 0 0 #bababc}.ui.top.popup{margin:0 0 .75em}.ui.top.left.popup{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom}.ui.top.center.popup{-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}.ui.top.right.popup{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom}.ui.left.center.popup{margin:0 .75em 0 0;-webkit-transform-origin:right 50%;-ms-transform-origin:right 50%;transform-origin:right 50%}.ui.right.center.popup{margin:0 0 0 .75em;-webkit-transform-origin:left 50%;-ms-transform-origin:left 50%;transform-origin:left 50%}.ui.bottom.popup{margin:.75em 0 0}.ui.bottom.left.popup{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.ui.bottom.center.popup{-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top}.ui.bottom.right.popup{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top;margin-right:0}.ui.bottom.center.popup:before{margin-left:-.325em;top:-.325em;left:50%;right:auto;bottom:auto;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.left.popup{margin-left:0}.ui.bottom.left.popup:before{top:-.325em;left:1em;right:auto;bottom:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.bottom.right.popup:before{top:-.325em;right:1em;bottom:auto;left:auto;margin-left:0;box-shadow:-1px -1px 0 0 #bababc}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.325em;left:50%;margin-left:-.325em}.ui.top.left.popup{margin-left:0}.ui.top.left.popup:before{bottom:-.325em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup{margin-right:0}.ui.top.right.popup:before{bottom:-.325em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.325em;bottom:auto;left:auto;margin-top:-.325em;box-shadow:1px -1px 0 0 #bababc}.ui.right.center.popup:before{top:50%;left:-.325em;bottom:auto;right:auto;margin-top:-.325em;box-shadow:-1px 1px 0 0 #bababc}.ui.bottom.popup:before,.ui.left.center.popup:before,.ui.right.center.popup:before,.ui.top.popup:before{background:#fff}.ui.inverted.bottom.popup:before,.ui.inverted.left.center.popup:before,.ui.inverted.right.center.popup:before,.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;box-shadow:none}.ui.inverted.popup .header{background-color:none;color:#fff}.ui.inverted.popup:before{background-color:#1b1c1d;box-shadow:none!important}.ui.flowing.popup{max-width:none}.ui.mini.popup{font-size:.71428571rem}.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 100755 index 0000000..d5a7c54 --- /dev/null +++ b/semantic/components/popup.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(t,e,o,n){"use strict";t.fn.popup=function(i){var r,a=t(this),s=t(o),p=t(e),l=t("body"),u=a.selector||"",c=!0,d=(new Date).getTime(),f=[],g=arguments[0],h="string"==typeof g,m=[].slice.call(arguments,1);return a.each(function(){var o,a,v,b,w,y=t.isPlainObject(i)?t.extend(!0,{},t.fn.popup.settings,i):t.extend({},t.fn.popup.settings),T=y.selector,P=y.className,C=y.error,k=y.metadata,x=y.namespace,S="."+y.namespace,A="module-"+x,D=t(this),E=t(y.context),O=y.target?t(y.target):D,j=0,F=!1,R=!1,H=this,W=D.data(A);w={initialize:function(){w.debug("Initializing",D),w.createID(),w.bind.events(),!w.exists()&&y.preserve&&w.create(),w.instantiate()},instantiate:function(){w.verbose("Storing instance",w),W=w,D.data(A,W)},refresh:function(){y.popup?o=t(y.popup).eq(0):y.inline&&(o=O.nextAll(T.popup).eq(0),y.popup=o),y.popup?(o.addClass(P.loading),a=w.get.offsetParent(),o.removeClass(P.loading),y.movePopup&&w.has.popup()&&w.get.offsetParent(o)[0]!==a[0]&&(w.debug("Moving popup to the same offset parent as activating element"),o.detach().appendTo(a))):a=y.inline?w.get.offsetParent(O):w.has.popup()?w.get.offsetParent(o):l,a.is("html")&&a[0]!==l[0]&&(w.debug("Setting page as offset parent"),a=l),w.get.variation()&&w.set.variation()},reposition:function(){w.refresh(),w.set.position()},destroy:function(){w.debug("Destroying previous module"),o&&!y.preserve&&w.removePopup(),clearTimeout(w.hideTimer),clearTimeout(w.showTimer),p.off(v),D.off(S).removeData(A)},event:{start:function(e){var o=t.isPlainObject(y.delay)?y.delay.show:y.delay;clearTimeout(w.hideTimer),R||(w.showTimer=setTimeout(w.show,o))},end:function(){var e=t.isPlainObject(y.delay)?y.delay.hide:y.delay;clearTimeout(w.showTimer),w.hideTimer=setTimeout(w.hide,e)},touchstart:function(t){R=!0,w.show()},resize:function(){w.is.visible()&&w.set.position()},hideGracefully:function(e){e&&0===t(e.target).closest(T.popup).length?(w.debug("Click occurred outside popup hiding popup"),w.hide()):w.debug("Click was inside popup, keeping popup open")}},create:function(){var e=w.get.html(),n=w.get.title(),i=w.get.content();e||i||n?(w.debug("Creating pop-up html"),e||(e=y.templates.popup({title:n,content:i})),o=t("

").addClass(P.popup).data(k.activator,D).html(e),y.inline?(w.verbose("Inserting popup element inline",o),o.insertAfter(D)):(w.verbose("Appending popup element to body",o),o.appendTo(E)),w.refresh(),w.set.variation(),y.hoverable&&w.bind.popup(),y.onCreate.call(o,H)):0!==O.next(T.popup).length?(w.verbose("Pre-existing popup found"),y.inline=!0,y.popups=O.next(T.popup).data(k.activator,D),w.refresh(),y.hoverable&&w.bind.popup()):y.popup?(t(y.popup).data(k.activator,D),w.verbose("Used popup specified in settings"),w.refresh(),y.hoverable&&w.bind.popup()):w.debug("No content specified skipping display",H)},createID:function(){b=(Math.random().toString(16)+"000000000").substr(2,8),v="."+b,w.verbose("Creating unique id for element",b)},toggle:function(){w.debug("Toggling pop-up"),w.is.hidden()?(w.debug("Popup is hidden, showing pop-up"),w.unbind.close(),w.show()):(w.debug("Popup is visible, hiding pop-up"),w.hide())},show:function(t){if(t=t||function(){},w.debug("Showing pop-up",y.transition),w.is.hidden()&&(!w.is.active()||!w.is.dropdown())){if(w.exists()||w.create(),y.onShow.call(o,H)===!1)return void w.debug("onShow callback returned false, cancelling popup animation");y.preserve||y.popup||w.refresh(),o&&w.set.position()&&(w.save.conditions(),y.exclusive&&w.hideAll(),w.animate.show(t))}},hide:function(t){if(t=t||function(){},w.is.visible()||w.is.animating()){if(y.onHide.call(o,H)===!1)return void w.debug("onHide callback returned false, cancelling popup animation");w.remove.visible(),w.unbind.close(),w.restore.conditions(),w.animate.hide(t)}},hideAll:function(){t(T.popup).filter("."+P.visible).each(function(){t(this).data(k.activator).popup("hide")})},exists:function(){return o?y.inline||y.popup?w.has.popup():o.closest(E).length>=1?!0:!1:!1},removePopup:function(){w.has.popup()&&!y.popup&&(w.debug("Removing popup",o),o.remove(),o=n,y.onRemove.call(o,H))},save:{conditions:function(){w.cache={title:D.attr("title")},w.cache.title&&D.removeAttr("title"),w.verbose("Saving original attributes",w.cache.title)}},restore:{conditions:function(){return w.cache&&w.cache.title&&(D.attr("title",w.cache.title),w.verbose("Restoring original attributes",w.cache.title)),!0}},animate:{show:function(e){e=t.isFunction(e)?e:function(){},y.transition&&t.fn.transition!==n&&D.transition("is supported")?(w.set.visible(),o.transition({animation:y.transition+" in",queue:!1,debug:y.debug,verbose:y.verbose,duration:y.duration,onComplete:function(){w.bind.close(),e.call(o,H),y.onVisible.call(o,H)}})):w.error(C.noTransition)},hide:function(e){return e=t.isFunction(e)?e:function(){},w.debug("Hiding pop-up"),y.onHide.call(o,H)===!1?void w.debug("onHide callback returned false, cancelling popup animation"):void(y.transition&&t.fn.transition!==n&&D.transition("is supported")?o.transition({animation:y.transition+" out",queue:!1,duration:y.duration,debug:y.debug,verbose:y.verbose,onComplete:function(){w.reset(),e.call(o,H),y.onHidden.call(o,H)}}):w.error(C.noTransition))}},change:{content:function(t){o.html(t)}},get:{html:function(){return D.removeData(k.html),D.data(k.html)||y.html},title:function(){return D.removeData(k.title),D.data(k.title)||y.title},content:function(){return D.removeData(k.content),D.data(k.content)||D.attr("title")||y.content},variation:function(){return D.removeData(k.variation),D.data(k.variation)||y.variation},popup:function(){return o},popupOffset:function(){return o.offset()},calculations:function(){var t,n=O[0],i=y.inline||y.popup&&y.movePopup?O.position():O.offset(),r={};return r={target:{element:O[0],width:O.outerWidth(),height:O.outerHeight(),top:i.top,left:i.left,margin:{}},popup:{width:o.outerWidth(),height:o.outerHeight()},parent:{width:a.outerWidth(),height:a.outerHeight()},screen:{scroll:{top:p.scrollTop(),left:p.scrollLeft()},width:p.width(),height:p.height()}},y.setFluidWidth&&w.is.fluid()&&(r.container={width:o.parent().outerWidth()},r.popup.width=r.container.width),r.target.margin.top=y.inline?parseInt(e.getComputedStyle(n).getPropertyValue("margin-top"),10):0,r.target.margin.left=y.inline?w.is.rtl()?parseInt(e.getComputedStyle(n).getPropertyValue("margin-right"),10):parseInt(e.getComputedStyle(n).getPropertyValue("margin-left"),10):0,t=r.screen,r.boundary={top:t.scroll.top,bottom:t.scroll.top+t.height,left:t.scroll.left,right:t.scroll.left+t.width},r},id:function(){return b},startEvent:function(){return"hover"==y.on?"mouseenter":"focus"==y.on?"focus":!1},scrollEvent:function(){return"scroll"},endEvent:function(){return"hover"==y.on?"mouseleave":"focus"==y.on?"blur":!1},distanceFromBoundary:function(t,e){var o,n,i={};return t=t||w.get.offset(),e=e||w.get.calculations(),o=e.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)},w.verbose("Distance from boundaries determined",t,i)),i},offsetParent:function(e){var o=e!==n?e[0]:D[0],i=o.parentNode,r=t(i);if(i)for(var a="none"===r.css("transform"),s="static"===r.css("position"),p=r.is("html");i&&!p&&s&&a;)i=i.parentNode,r=t(i),a="none"===r.css("transform"),s="static"===r.css("position"),p=r.is("html");return r&&r.length>0?r:t()},positions:function(){return{"top left":!1,"top center":!1,"top right":!1,"bottom left":!1,"bottom center":!1,"bottom right":!1,"left center":!1,"right center":!1}},nextPosition:function(t){var e=t.split(" "),o=e[0],n=e[1],i={top:"bottom",bottom:"top",left:"right",right:"left"},r={left:"center",center:"right",right:"left"},a={"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"},s="top"==o||"bottom"==o,p=!1,l=!1,u=!1;return F||(w.verbose("All available positions available"),F=w.get.positions()),w.debug("Recording last position tried",t),F[t]=!0,"opposite"===y.prefer&&(u=[i[o],n],u=u.join(" "),p=F[u]===!0,w.debug("Trying opposite strategy",u)),"adjacent"===y.prefer&&s&&(u=[o,r[n]],u=u.join(" "),l=F[u]===!0,w.debug("Trying adjacent strategy",u)),(l||p)&&(w.debug("Using backup position",u),u=a[t]),u}},set:{position:function(t,e){if(0===O.length||0===o.length)return void w.error(C.notFound);var i,r,a,s,p,l,u,c;if(e=e||w.get.calculations(),t=t||D.data(k.position)||y.position,i=D.data(k.offset)||y.offset,r=y.distanceAway,a=e.target,s=e.popup,p=e.parent,0===a.width&&0===a.height&&!(a.element instanceof SVGGraphicsElement))return w.debug("Popup target is hidden, no action taken"),!1;switch(y.inline&&(w.debug("Adding margin to calculation",a.margin),"left center"==t||"right center"==t?(i+=a.margin.top,r+=-a.margin.left):"top left"==t||"top center"==t||"top right"==t?(i+=a.margin.left,r-=a.margin.top):(i+=a.margin.left,r+=a.margin.top)),w.debug("Determining popup position from calculations",t,e),w.is.rtl()&&(t=t.replace(/left|right/g,function(t){return"left"==t?"right":"left"}),w.debug("RTL: Popup position updated",t)),j==y.maxSearchDepth&&"string"==typeof y.lastResort&&(t=y.lastResort),t){case"top left":l={top:"auto",bottom:p.height-a.top+r,left:a.left+i,right:"auto"};break;case"top center":l={bottom:p.height-a.top+r,left:a.left+a.width/2-s.width/2+i,top:"auto",right:"auto"};break;case"top right":l={bottom:p.height-a.top+r,right:p.width-a.left-a.width-i,top:"auto",left:"auto"};break;case"left center":l={top:a.top+a.height/2-s.height/2+i,right:p.width-a.left+r,left:"auto",bottom:"auto"};break;case"right center":l={top:a.top+a.height/2-s.height/2+i,left:a.left+a.width+r,bottom:"auto",right:"auto"};break;case"bottom left":l={top:a.top+a.height+r,left:a.left+i,bottom:"auto",right:"auto"};break;case"bottom center":l={top:a.top+a.height+r,left:a.left+a.width/2-s.width/2+i,bottom:"auto",right:"auto"};break;case"bottom right":l={top:a.top+a.height+r,right:p.width-a.left-a.width-i,left:"auto",bottom:"auto"}}if(l===n&&w.error(C.invalidPosition,t),w.debug("Calculated popup positioning values",l),o.css(l).removeClass(P.position).addClass(t).addClass(P.loading),u=w.get.popupOffset(),c=w.get.distanceFromBoundary(u,e),w.is.offstage(c,t)){if(w.debug("Position is outside viewport",t),j0}},is:{offstage:function(e,o){var n=[];return t.each(e,function(t,e){e<-y.jitter&&(w.debug("Position exceeds allowable distance from edge",t,e,o),n.push(t))}),n.length>0?!0:!1},active:function(){return D.hasClass(P.active)},animating:function(){return o!==n&&o.hasClass(P.animating)},fluid:function(){return o!==n&&o.hasClass(P.fluid)},visible:function(){return o!==n&&o.hasClass(P.visible)},dropdown:function(){return D.hasClass(P.dropdown)},hidden:function(){return!w.is.visible()},rtl:function(){return"rtl"==D.css("direction")}},reset:function(){w.remove.visible(),y.preserve?t.fn.transition!==n&&o.transition("remove transition"):w.removePopup()},setting:function(e,o){if(t.isPlainObject(e))t.extend(!0,y,e);else{if(o===n)return y[e];y[e]=o}},internal:function(e,o){if(t.isPlainObject(e))t.extend(!0,w,e);else{if(o===n)return w[e];w[e]=o}},debug:function(){y.debug&&(y.performance?w.performance.log(arguments):(w.debug=Function.prototype.bind.call(console.info,console,y.name+":"),w.debug.apply(console,arguments)))},verbose:function(){y.verbose&&y.debug&&(y.performance?w.performance.log(arguments):(w.verbose=Function.prototype.bind.call(console.info,console,y.name+":"),w.verbose.apply(console,arguments)))},error:function(){w.error=Function.prototype.bind.call(console.error,console,y.name+":"),w.error.apply(console,arguments)},performance:{log:function(t){var e,o,n;y.performance&&(e=(new Date).getTime(),n=d||e,o=e-n,d=e,f.push({Name:t[0],Arguments:[].slice.call(t,1)||"",Element:H,"Execution Time":o})),clearTimeout(w.performance.timer),w.performance.timer=setTimeout(w.performance.display,500)},display:function(){var e=y.name+":",o=0;d=!1,clearTimeout(w.performance.timer),t.each(f,function(t,e){o+=e["Execution Time"]}),e+=" "+o+"ms",u&&(e+=" '"+u+"'"),(console.group!==n||console.table!==n)&&f.length>0&&(console.groupCollapsed(e),console.table?console.table(f):t.each(f,function(t,e){console.log(e.Name+": "+e["Execution Time"]+"ms")}),console.groupEnd()),f=[]}},invoke:function(e,o,i){var a,s,p,l=W;return o=o||m,i=H||i,"string"==typeof e&&l!==n&&(e=e.split(/[\. ]/),a=e.length-1,t.each(e,function(o,i){var r=o!=a?i+e[o+1].charAt(0).toUpperCase()+e[o+1].slice(1):e;if(t.isPlainObject(l[r])&&o!=a)l=l[r];else{if(l[r]!==n)return s=l[r],!1;if(!t.isPlainObject(l[i])||o==a)return l[i]!==n?(s=l[i],!1):!1;l=l[i]}})),t.isFunction(s)?p=s.apply(i,o):s!==n&&(p=s),t.isArray(r)?r.push(p):r!==n?r=[r,p]:p!==n&&(r=p),s}},h?(W===n&&w.initialize(),w.invoke(g)):(W!==n&&W.invoke("destroy"),w.initialize())}),r!==n?r:this},t.fn.popup.settings={name:"Popup",debug:!1,verbose:!1,performance:!0,namespace:"popup",onCreate:function(){},onRemove:function(){},onShow:function(){},onVisible:function(){},onHide:function(){},onUnplaceable:function(){},onHidden:function(){},on:"hover",addTouchEvents:!0,position:"top left",variation:"",movePopup:!0,target:!1,popup:!1,inline:!1,preserve:!1,hoverable:!1,content:!1,html:!1,title:!1,closable:!0,hideOnScroll:"auto",exclusive:!1,context:"body",prefer:"opposite",lastResort:!1,delay:{show:50,hide:70},setFluidWidth:!0,duration:200,transition:"scale",distanceAway:0,jitter:2,offset:0,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",animating:"animating",dropdown:"dropdown",fluid:"fluid",loading:"loading",popup:"ui popup",position:"top left center bottom right",visible:"visible"},selector:{popup:".ui.popup"},templates:{escape:function(t){var e=/[&<>"'`]/g,o=/[&<>"'`]/,n={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},i=function(t){return n[t]};return o.test(t)?t.replace(e,i):t},popup:function(e){var o="",i=t.fn.popup.settings.templates.escape;return typeof e!==n&&(typeof e.title!==n&&e.title&&(e.title=i(e.title),o+='"),typeof e.content!==n&&e.content&&(e.content=i(e.content),o+='

'+e.content+"

")),o}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/progress.css b/semantic/components/progress.css new file mode 100755 index 0000000..e09b115 --- /dev/null +++ b/semantic/components/progress.css @@ -0,0 +1,517 @@ +/*! + * # Semantic UI 2.1.7 - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + 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 100755 index 0000000..aa0ec29 --- /dev/null +++ b/semantic/components/progress.js @@ -0,0 +1,795 @@ +/*! + * # Semantic UI 2.1.7 - Progress + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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.set.percent(0); + module.set.value(0); + }, + + complete: function() { + if(module.percent === undefined || module.percent < 100) { + 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); + } + } + }, + + increment: function(incrementValue) { + var + maxValue, + startValue, + newValue + ; + if( module.has.total() ) { + startValue = module.get.value(); + incrementValue = incrementValue || 1; + + newValue = startValue + incrementValue; + maxValue = module.get.total(); + + module.debug('Incrementing value', startValue, newValue, maxValue); + if(newValue > maxValue ) { + module.debug('Value cannot increment above total', maxValue); + newValue = maxValue; + } + } + else { + startValue = module.get.percent(); + incrementValue = incrementValue || module.get.randomValue(); + + newValue = startValue + incrementValue; + maxValue = 100; + + module.debug('Incrementing percentage by', startValue, newValue); + if(newValue > maxValue ) { + module.debug('Value cannot increment above 100 percent'); + newValue = maxValue; + } + } + 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); + } + + if(newValue < 0) { + module.debug('Value cannot decrement below 0'); + newValue = 0; + } + module.set.progress(newValue); + }, + + has: { + 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.debug('Adding variables to progress bar text', templateText); + return templateText; + }, + + + 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.value || 0; + }, + total: function() { + return module.total || false; + } + }, + + is: { + 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: { + 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); + $bar.one(transitionEnd + eventNamespace, animationCallback); + module.timer = setTimeout(animationCallback, settings.duration + 100); + animating = true; + module.interval = setInterval(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.debug('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.set.success(); + module.debug('Automatically triggering success at 100%'); + } + else { + module.verbose('Reached 100% removing active state'); + module.remove.active(); + } + } + 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.debug('Adding ratio to bar label'); + $progress.text( module.get.text(settings.text.ratio) ); + } + else if(settings.label == 'percent') { + module.debug('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(); + if(text) { + module.set.label(text); + } + settings.onActive.call(element, module.value, module.total); + }, + success : function(text) { + text = text || settings.text.success; + module.debug('Setting success state'); + $module.addClass(className.success); + module.remove.active(); + module.remove.warning(); + module.remove.error(); + module.complete(); + if(text) { + module.set.label(text); + } + 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(); + if(text) { + module.set.label(text); + } + 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(); + if(text) { + module.set.label(text); + } + 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) { + var + numericValue = module.get.numericValue(value), + percentComplete + ; + if(numericValue === false) { + module.error(error.nonNumeric, value); + } + if( module.has.total() ) { + module.set.value(numericValue); + percentComplete = (numericValue / module.total) * 100; + module.debug('Calculating percent complete from total', percentComplete); + module.set.percent( percentComplete ); + } + else { + percentComplete = numericValue; + 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) { + 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({ + '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', + + debug : false, + verbose : false, + performance : true, + + random : { + min : 2, + max : 5 + }, + + duration : 300, + + autoSuccess : true, + showActivity : true, + limitValues : true, + + label : 'percent', + precision : 0, + framerate : (1000 / 30), /// 30 fps + + percent : false, + total : false, + value : false, + + 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 ); \ No newline at end of file diff --git a/semantic/components/progress.min.css b/semantic/components/progress.min.css new file mode 100755 index 0000000..824047c --- /dev/null +++ b/semantic/components/progress.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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;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^="9"] .bar,.ui.indicating.progress[data-percent^="100"] .bar{background-color:#66da81}.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,.ui.indicating.progress[data-percent^="100"] .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 100755 index 0000000..258bac6 --- /dev/null +++ b/semantic/components/progress.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Progress + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,n,r){"use strict";e.fn.progress=function(t){var a,o=e(this),s=o.selector||"",i=(new Date).getTime(),c=[],l=arguments[0],u="string"==typeof l,g=[].slice.call(arguments,1);return o.each(function(){var o,v,p=e.isPlainObject(t)?e.extend(!0,{},e.fn.progress.settings,t):e.extend({},e.fn.progress.settings),d=p.className,m=p.metadata,b=p.namespace,f=p.selector,h=p.error,w="."+b,x="module-"+b,y=e(this),C=e(this).find(f.bar),T=e(this).find(f.progress),E=e(this).find(f.label),A=this,S=y.data(x),V=!1;v={initialize:function(){v.debug("Initializing progress bar",p),v.set.duration(),v.set.transitionEvent(),v.read.metadata(),v.read.settings(),v.instantiate()},instantiate:function(){v.verbose("Storing instance of progress",v),S=v,y.data(x,v)},destroy:function(){v.verbose("Destroying previous progress for",y),clearInterval(S.interval),v.remove.state(),y.removeData(x),S=r},reset:function(){v.set.percent(0),v.set.value(0)},complete:function(){(v.percent===r||v.percent<100)&&v.set.percent(100)},read:{metadata:function(){var e={percent:y.data(m.percent),total:y.data(m.total),value:y.data(m.value)};e.percent&&(v.debug("Current percent value set from metadata",e.percent),v.set.percent(e.percent)),e.total&&(v.debug("Total value set from metadata",e.total),v.set.total(e.total)),e.value&&(v.debug("Current value set from metadata",e.value),v.set.value(e.value),v.set.progress(e.value))},settings:function(){p.total!==!1&&(v.debug("Current total set in settings",p.total),v.set.total(p.total)),p.value!==!1&&(v.debug("Current value set in settings",p.value),v.set.value(p.value),v.set.progress(v.value)),p.percent!==!1&&(v.debug("Current percent set in settings",p.percent),v.set.percent(p.percent))}},increment:function(e){var t,n,r;v.has.total()?(n=v.get.value(),e=e||1,r=n+e,t=v.get.total(),v.debug("Incrementing value",n,r,t),r>t&&(v.debug("Value cannot increment above total",t),r=t)):(n=v.get.percent(),e=e||v.get.randomValue(),r=n+e,t=100,v.debug("Incrementing percentage by",n,r),r>t&&(v.debug("Value cannot increment above 100 percent"),r=t)),v.set.progress(r)},decrement:function(e){var t,n,r=v.get.total();r?(t=v.get.value(),e=e||1,n=t-e,v.debug("Decrementing value by",e,t)):(t=v.get.percent(),e=e||v.get.randomValue(),n=t-e,v.debug("Decrementing percentage by",e,t)),0>n&&(v.debug("Value cannot decrement below 0"),n=0),v.set.progress(n)},has:{total:function(){return v.get.total()!==!1}},get:{text:function(e){var t=v.value||0,n=v.total||0,r=V?v.get.displayPercent():v.percent||0,a=v.total>0?n-t:100-r;return e=e||"",e=e.replace("{value}",t).replace("{total}",n).replace("{left}",a).replace("{percent}",r),v.debug("Adding variables to progress bar text",e),e},randomValue:function(){return v.debug("Generating random increment percentage"),Math.floor(Math.random()*p.random.max+p.random.min)},numericValue:function(e){return"string"==typeof e?""!==e.replace(/[^\d.]/g,"")?+e.replace(/[^\d.]/g,""):!1:e},transitionEnd:function(){var e,t=n.createElement("element"),a={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in a)if(t.style[e]!==r)return a[e]},displayPercent:function(){var e=C.width(),t=y.width(),n=parseInt(C.css("min-width"),10),r=e>n?e/t*100:v.percent;return p.precision>0?Math.round(10*r*p.precision)/(10*p.precision):Math.round(r)},percent:function(){return v.percent||0},value:function(){return v.value||0},total:function(){return v.total||!1}},is:{success:function(){return y.hasClass(d.success)},warning:function(){return y.hasClass(d.warning)},error:function(){return y.hasClass(d.error)},active:function(){return y.hasClass(d.active)},visible:function(){return y.is(":visible")}},remove:{state:function(){v.verbose("Removing stored state"),delete v.total,delete v.percent,delete v.value},active:function(){v.verbose("Removing active state"),y.removeClass(d.active)},success:function(){v.verbose("Removing success state"),y.removeClass(d.success)},warning:function(){v.verbose("Removing warning state"),y.removeClass(d.warning)},error:function(){v.verbose("Removing error state"),y.removeClass(d.error)}},set:{barWidth:function(e){e>100?v.error(h.tooHigh,e):0>e?v.error(h.tooLow,e):(C.css("width",e+"%"),y.attr("data-percent",parseInt(e,10)))},duration:function(e){e=e||p.duration,e="number"==typeof e?e+"ms":e,v.verbose("Setting progress bar transition duration",e),C.css({"transition-duration":e})},percent:function(e){e="string"==typeof e?+e.replace("%",""):e,e=p.precision>0?Math.round(10*e*p.precision)/(10*p.precision):Math.round(e),v.percent=e,v.has.total()||(v.value=p.precision>0?Math.round(e/100*v.total*10*p.precision)/(10*p.precision):Math.round(e/100*v.total*10)/10,p.limitValues&&(v.value=v.value>100?100:v.value<0?0:v.value)),v.set.barWidth(e),v.set.labelInterval(),v.set.labels(),p.onChange.call(A,e,v.value,v.total)},labelInterval:function(){var e=function(){v.verbose("Bar finished animating, removing continuous label updates"),clearInterval(v.interval),V=!1,v.set.labels()};clearInterval(v.interval),C.one(o+w,e),v.timer=setTimeout(e,p.duration+100),V=!0,v.interval=setInterval(v.set.labels,p.framerate)},labels:function(){v.verbose("Setting both bar progress and outer label text"),v.set.barLabel(),v.set.state()},label:function(e){e=e||"",e&&(e=v.get.text(e),v.debug("Setting label to text",e),E.text(e))},state:function(e){e=e!==r?e:v.percent,100===e?!p.autoSuccess||v.is.warning()||v.is.error()?(v.verbose("Reached 100% removing active state"),v.remove.active()):(v.set.success(),v.debug("Automatically triggering success at 100%")):e>0?(v.verbose("Adjusting active progress bar label",e),v.set.active()):(v.remove.active(),v.set.label(p.text.active))},barLabel:function(e){e!==r?T.text(v.get.text(e)):"ratio"==p.label&&v.total?(v.debug("Adding ratio to bar label"),T.text(v.get.text(p.text.ratio))):"percent"==p.label&&(v.debug("Adding percentage to bar label"),T.text(v.get.text(p.text.percent)))},active:function(e){e=e||p.text.active,v.debug("Setting active state"),p.showActivity&&!v.is.active()&&y.addClass(d.active),v.remove.warning(),v.remove.error(),v.remove.success(),e&&v.set.label(e),p.onActive.call(A,v.value,v.total)},success:function(e){e=e||p.text.success,v.debug("Setting success state"),y.addClass(d.success),v.remove.active(),v.remove.warning(),v.remove.error(),v.complete(),e&&v.set.label(e),p.onSuccess.call(A,v.total)},warning:function(e){e=e||p.text.warning,v.debug("Setting warning state"),y.addClass(d.warning),v.remove.active(),v.remove.success(),v.remove.error(),v.complete(),e&&v.set.label(e),p.onWarning.call(A,v.value,v.total)},error:function(e){e=e||p.text.error,v.debug("Setting error state"),y.addClass(d.error),v.remove.active(),v.remove.success(),v.remove.warning(),v.complete(),e&&v.set.label(e),p.onError.call(A,v.value,v.total)},transitionEvent:function(){o=v.get.transitionEnd()},total:function(e){v.total=e},value:function(e){v.value=e},progress:function(e){var t,n=v.get.numericValue(e);n===!1&&v.error(h.nonNumeric,e),v.has.total()?(v.set.value(n),t=n/v.total*100,v.debug("Calculating percent complete from total",t),v.set.percent(t)):(t=n,v.debug("Setting value to exact percentage value",t),v.set.percent(t))}},setting:function(t,n){if(v.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,p,t);else{if(n===r)return p[t];p[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,v,t);else{if(n===r)return v[t];v[t]=n}},debug:function(){p.debug&&(p.performance?v.performance.log(arguments):(v.debug=Function.prototype.bind.call(console.info,console,p.name+":"),v.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?v.performance.log(arguments):(v.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),v.verbose.apply(console,arguments)))},error:function(){v.error=Function.prototype.bind.call(console.error,console,p.name+":"),v.error.apply(console,arguments)},performance:{log:function(e){var t,n,r;p.performance&&(t=(new Date).getTime(),r=i||t,n=t-r,i=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:A,"Execution Time":n})),clearTimeout(v.performance.timer),v.performance.timer=setTimeout(v.performance.display,500)},display:function(){var t=p.name+":",n=0;i=!1,clearTimeout(v.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),(console.group!==r||console.table!==r)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,o){var s,i,c,l=S;return n=n||g,o=A||o,"string"==typeof t&&l!==r&&(t=t.split(/[\. ]/),s=t.length-1,e.each(t,function(n,a){var o=n!=s?a+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[o])&&n!=s)l=l[o];else{if(l[o]!==r)return i=l[o],!1;if(!e.isPlainObject(l[a])||n==s)return l[a]!==r?(i=l[a],!1):(v.error(h.method,t),!1);l=l[a]}})),e.isFunction(i)?c=i.apply(o,n):i!==r&&(c=i),e.isArray(a)?a.push(c):a!==r?a=[a,c]:c!==r&&(a=c),i}},u?(S===r&&v.initialize(),v.invoke(l)):(S!==r&&S.invoke("destroy"),v.initialize())}),a!==r?a:this},e.fn.progress.settings={name:"Progress",namespace:"progress",debug:!1,verbose:!1,performance:!0,random:{min:2,max:5},duration:300,autoSuccess:!0,showActivity:!0,limitValues:!0,label:"percent",precision:0,framerate:1e3/30,percent:!1,total:!1,value:!1,onChange:function(e,t,n){},onSuccess:function(e){},onActive:function(e,t){},onError:function(e,t){},onWarning:function(e,t){},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:!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 100755 index 0000000..30b72b0 --- /dev/null +++ b/semantic/components/rail.css @@ -0,0 +1,132 @@ +/*! + * # Semantic UI 2.1.7 - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: 301px; +} +.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: 300.5px; +} +.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.rail { + font-size: 1rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/rail.min.css b/semantic/components/rail.min.css new file mode 100755 index 0000000..0b3f3be --- /dev/null +++ b/semantic/components/rail.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.rail{position:absolute;top:0;width:300px;height:100%;font-size:1rem}.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:301px}.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:300.5px}.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} \ No newline at end of file diff --git a/semantic/components/rating.css b/semantic/components/rating.css new file mode 100755 index 0000000..2cbef60 --- /dev/null +++ b/semantic/components/rating.css @@ -0,0 +1,266 @@ +/*! + * # Semantic UI 2.1.7 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Rating +*******************************/ + +.ui.rating { + display: -webkit-inline-box; + display: -webkit-inline-flex; + 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; + -webkit-flex: 1 0 auto; + -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.71428571rem; +} +.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,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtYXCj2pm8AAABHAAAAKRnYXNwAAAAEAAAAcAAAAAIZ2x5ZlJbXMYAAAHIAAARnGhlYWQBGAe5AAATZAAAADZoaGVhA+IB/QAAE5wAAAAkaG10eCzgAEMAABPAAAAAcGxvY2EwXCxOAAAUMAAAADptYXhwACIAnAAAFGwAAAAgbmFtZfC1n04AABSMAAABPHBvc3QAAwAAAAAVyAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxZQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAJAAAAAgACAABAAAAAEAIOYF8AbwDfAj8C7wbvBw8Irwl/Cc8SPxZf/9//8AAAAAACDmAPAE8AzwI/Au8G7wcPCH8JfwnPEj8WT//f//AAH/4xoEEAYQAQ/sD+IPow+iD4wPgA98DvYOtgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAP/tAgAB0wAKABUAAAEvAQ8BFwc3Fyc3BQc3Jz8BHwEHFycCALFPT7GAHp6eHoD/AHAWW304OH1bFnABGRqgoBp8sFNTsHyyOnxYEnFxElh8OgAAAAACAAD/7QIAAdMACgASAAABLwEPARcHNxcnNwUxER8BBxcnAgCxT0+xgB6enh6A/wA4fVsWcAEZGqCgGnywU1OwfLIBHXESWHw6AAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAEAAAAAAgABwAArAAABFA4CBzEHDgMjIi4CLwEuAzU0PgIzMh4CFz4DMzIeAhUCAAcMEgugBgwMDAYGDAwMBqALEgwHFyg2HhAfGxkKChkbHxAeNigXAS0QHxsZCqAGCwkGBQkLBqAKGRsfEB42KBcHDBILCxIMBxcoNh4AAAAAAgAAAAACAAHAACsAWAAAATQuAiMiDgIHLgMjIg4CFRQeAhcxFx4DMzI+Aj8BPgM1DwEiFCIGMTAmIjQjJy4DNTQ+AjMyHgIfATc+AzMyHgIVFA4CBwIAFyg2HhAfGxkKChkbHxAeNigXBwwSC6AGDAwMBgYMDAwGoAsSDAdbogEBAQEBAaIGCgcEDRceEQkREA4GLy8GDhARCREeFw0EBwoGAS0eNigXBwwSCwsSDAcXKDYeEB8bGQqgBgsJBgUJCwagChkbHxA+ogEBAQGiBg4QEQkRHhcNBAcKBjQ0BgoHBA0XHhEJERAOBgABAAAAAAIAAcAAMQAAARQOAgcxBw4DIyIuAi8BLgM1ND4CMzIeAhcHFwc3Jzc+AzMyHgIVAgAHDBILoAYMDAwGBgwMDAagCxIMBxcoNh4KFRMSCC9wQLBwJwUJCgkFHjYoFwEtEB8bGQqgBgsJBgUJCwagChkbHxAeNigXAwUIBUtAoMBAOwECAQEXKDYeAAABAAAAAAIAAbcAKgAAEzQ3NjMyFxYXFhcWFzY3Njc2NzYzMhcWFRQPAQYjIi8BJicmJyYnJicmNQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGBwExPyMkBgYLCgkKCgoKCQoLBgYkIz8/QawFBawCBgUNDg4OFRQTAAAAAQAAAA0B2wHSACYAABM0PwI2FzYfAhYVFA8BFxQVFAcGByYvAQcGByYnJjU0PwEnJjUAEI9BBQkIBkCPEAdoGQMDBgUGgIEGBQYDAwEYaAcBIwsCFoEMAQEMgRYCCwYIZJABBQUFAwEBAkVFAgEBAwUFAwOQZAkFAAAAAAIAAAANAdsB0gAkAC4AABM0PwI2FzYfAhYVFA8BFxQVFAcmLwEHBgcmJyY1ND8BJyY1HwEHNxcnNy8BBwAQj0EFCQgGQI8QB2gZDAUGgIEGBQYDAwEYaAc/WBVsaxRXeDY2ASMLAhaBDAEBDIEWAgsGCGSQAQUNAQECRUUCAQEDBQUDA5BkCQURVXg4OHhVEW5uAAABACMAKQHdAXwAGgAANzQ/ATYXNh8BNzYXNh8BFhUUDwEGByYvASY1IwgmCAwLCFS8CAsMCCYICPUIDAsIjgjSCwkmCQEBCVS7CQEBCSYJCg0H9gcBAQePBwwAAAEAHwAfAXMBcwAsAAA3ND8BJyY1ND8BNjMyHwE3NjMyHwEWFRQPARcWFRQPAQYjIi8BBwYjIi8BJjUfCFRUCAgnCAwLCFRUCAwLCCcICFRUCAgnCAsMCFRUCAsMCCcIYgsIVFQIDAsIJwgIVFQICCcICwwIVFQICwwIJwgIVFQICCcIDAAAAAACAAAAJQFJAbcAHwArAAA3NTQ3NjsBNTQ3NjMyFxYdATMyFxYdARQHBiMhIicmNTczNTQnJiMiBwYdAQAICAsKJSY1NCYmCQsICAgIC/7tCwgIW5MWFR4fFRZApQsICDc0JiYmJjQ3CAgLpQsICAgIC8A3HhYVFRYeNwAAAQAAAAcBbgG3ACEAADcRNDc2NzYzITIXFhcWFREUBwYHBiMiLwEHBiMiJyYnJjUABgUKBgYBLAYGCgUGBgUKBQcOCn5+Cg4GBgoFBicBcAoICAMDAwMICAr+kAoICAQCCXl5CQIECAgKAAAAAwAAACUCAAFuABgAMQBKAAA3NDc2NzYzMhcWFxYVFAcGBwYjIicmJyY1MxYXFjMyNzY3JicWFRQHBiMiJyY1NDcGBzcUFxYzMjc2NTQ3NjMyNzY1NCcmIyIHBhUABihDREtLREMoBgYoQ0RLS0RDKAYlJjk5Q0M5OSYrQREmJTU1JSYRQSuEBAQGBgQEEREZBgQEBAQGJBkayQoKQSgoKChBCgoKCkEoJycoQQoKOiMjIyM6RCEeIjUmJSUmNSIeIUQlBgQEBAQGGBIRBAQGBgQEGhojAAAABQAAAAkCAAGJACwAOABRAGgAcAAANzQ3Njc2MzIXNzYzMhcWFxYXFhcWFxYVFDEGBwYPAQYjIicmNTQ3JicmJyY1MxYXNyYnJjU0NwYHNxQXFjMyNzY1NDc2MzI3NjU0JyYjIgcGFRc3Njc2NyYnNxYXFhcWFRQHBgcGBwYjPwEWFRQHBgcABitBQU0ZGhADBQEEBAUFBAUEBQEEHjw8Hg4DBQQiBQ0pIyIZBiUvSxYZDg4RQSuEBAQGBgQEEREZBgQEBAQGJBkaVxU9MzQiIDASGxkZEAYGCxQrODk/LlACFxYlyQsJQycnBRwEAgEDAwIDAwIBAwUCNmxsNhkFFAMFBBUTHh8nCQtKISgSHBsfIh4hRCUGBAQEBAYYEhEEBAYGBAQaGiPJJQUiIjYzISASGhkbCgoKChIXMRsbUZANCyghIA8AAAMAAAAAAbcB2wA5AEoAlAAANzU0NzY7ATY3Njc2NzY3Njc2MzIXFhcWFRQHMzIXFhUUBxYVFAcUFRQHFgcGKwEiJyYnJisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzMyFxYXFhcWFxYXFhcWOwEyNTQnNjc2NTQnNjU0JyYnNjc2NTQnJisBNDc2NTQnJiMGBwYHBgcGBwYHBgcGBwYHBgcGBwYrARUACwoQTgodEQ4GBAMFBgwLDxgTEwoKDjMdFhYOAgoRARkZKCUbGxsjIQZSEAoLJQUFCAcGBQUGBwgFBUkJBAUFBAQHBwMDBwcCPCUjNwIJBQUFDwMDBAkGBgsLDmUODgoJGwgDAwYFDAYQAQUGAwQGBgYFBgUGBgQJSbcPCwsGJhUPCBERExMMCgkJFBQhGxwWFR4ZFQoKFhMGBh0WKBcXBgcMDAoLDxIHBQYGBQcIBQYGBQgSAQEBAQICAQEDAgEULwgIBQoLCgsJDhQHCQkEAQ0NCg8LCxAdHREcDQ4IEBETEw0GFAEHBwUECAgFBQUFAgO3AAADAAD/2wG3AbcAPABNAJkAADc1NDc2OwEyNzY3NjsBMhcWBxUWFRQVFhUUBxYVFAcGKwEWFRQHBgcGIyInJicmJyYnJicmJyYnIyInJjU3FBcWMzI3NjU0JyYjIgcGFRczMhcWFxYXFhcWFxYXFhcWFxYXFhcWFzI3NjU0JyY1MzI3NjU0JyYjNjc2NTQnNjU0JyYnNjU0JyYrASIHIgcGBwYHBgcGIwYrARUACwoQUgYhJRsbHiAoGRkBEQoCDhYWHTMOCgoTExgPCwoFBgIBBAMFDhEdCk4QCgslBQUIBwYFBQYHCAUFSQkEBgYFBgUGBgYEAwYFARAGDAUGAwMIGwkKDg5lDgsLBgYJBAMDDwUFBQkCDg4ZJSU8AgcHAwMHBwQEBQUECbe3DwsKDAwHBhcWJwIWHQYGExYKChUZHhYVHRoiExQJCgsJDg4MDAwNBg4WJQcLCw+kBwUGBgUHCAUGBgUIpAMCBQYFBQcIBAUHBwITBwwTExERBw0OHBEdHRALCw8KDQ0FCQkHFA4JCwoLCgUICBgMCxUDAgEBAgMBAQG3AAAAAQAAAA0A7gHSABQAABM0PwI2FxEHBgcmJyY1ND8BJyY1ABCPQQUJgQYFBgMDARhoBwEjCwIWgQwB/oNFAgEBAwUFAwOQZAkFAAAAAAIAAAAAAgABtwAqAFkAABM0NzYzMhcWFxYXFhc2NzY3Njc2MzIXFhUUDwEGIyIvASYnJicmJyYnJjUzFB8BNzY1NCcmJyYnJicmIyIHBgcGBwYHBiMiJyYnJicmJyYjIgcGBwYHBgcGFQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGByU1pqY1BgYJCg4NDg0PDhIRDg8KCgcFCQkFBwoKDw4REg4PDQ4NDgoJBgYBMT8jJAYGCwoJCgoKCgkKCwYGJCM/P0GsBQWsAgYFDQ4ODhUUEzA1oJ82MBcSEgoLBgcCAgcHCwsKCQgHBwgJCgsLBwcCAgcGCwoSEhcAAAACAAAABwFuAbcAIQAoAAA3ETQ3Njc2MyEyFxYXFhURFAcGBwYjIi8BBwYjIicmJyY1PwEfAREhEQAGBQoGBgEsBgYKBQYGBQoFBw4Kfn4KDgYGCgUGJZIZef7cJwFwCggIAwMDAwgICv6QCggIBAIJeXkJAgQICAoIjRl0AWP+nQAAAAABAAAAJQHbAbcAMgAANzU0NzY7ATU0NzYzMhcWHQEUBwYrASInJj0BNCcmIyIHBh0BMzIXFh0BFAcGIyEiJyY1AAgIC8AmJjQ1JiUFBQgSCAUFFhUfHhUWHAsICAgIC/7tCwgIQKULCAg3NSUmJiU1SQgFBgYFCEkeFhUVFh43CAgLpQsICAgICwAAAAIAAQANAdsB0gAiAC0AABM2PwI2MzIfAhYXFg8BFxYHBiMiLwEHBiMiJyY/AScmNx8CLwE/AS8CEwEDDJBABggJBUGODgIDCmcYAgQCCAMIf4IFBgYEAgEZaQgC7hBbEgINSnkILgEBJggCFYILC4IVAggICWWPCgUFA0REAwUFCo9lCQipCTBmEw1HEhFc/u0AAAADAAAAAAHJAbcAFAAlAHkAADc1NDc2OwEyFxYdARQHBisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzU0NzYzNjc2NzY3Njc2NzY3Njc2NzY3NjMyFxYXFhcWFxYXFhUUFRQHBgcGBxQHBgcGBzMyFxYVFAcWFRYHFgcGBxYHBgcjIicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQFBQgGDw8OFAkFBAQBAQMCAQIEBAYFBw4KCgcHBQQCAwEBAgMDAgYCAgIBAU8XEBAQBQEOBQUECwMREiYlExYXDAwWJAoHBQY3twcGBQUGB7cIBQUFBQgkBwYFBQYHCAUGBgUIJLcHBQYBEBATGQkFCQgGBQwLBgcICQUGAwMFBAcHBgYICQQEBwsLCwYGCgIDBAMCBBEQFhkSDAoVEhAREAsgFBUBBAUEBAcMAQUFCAAAAAADAAD/2wHJAZIAFAAlAHkAADcUFxYXNxY3Nj0BNCcmBycGBwYdATc0NzY3FhcWFRQHBicGJyY1FzU0NzY3Fjc2NzY3NjcXNhcWBxYXFgcWBxQHFhUUBwYHJxYXFhcWFRYXFhcWFRQVFAcGBwYHBgcGBwYnBicmJyYnJicmJyYnJicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQGBQcKJBYMDBcWEyUmEhEDCwQFBQ4BBRAQEBdPAQECAgIGAgMDAgEBAwIEBQcHCgoOBwUGBAQCAQIDAQEEBAUJFA4PDwYIBQWlBwYFAQEBBwQJtQkEBwEBAQUGB7eTBwYEAQEEBgcJBAYBAQYECZS4BwYEAgENBwUCBgMBAQEXEyEJEhAREBcIDhAaFhEPAQEFAgQCBQELBQcKDAkIBAUHCgUGBwgDBgIEAQEHBQkIBwUMCwcECgcGCRoREQ8CBgQIAAAAAQAAAAEAAJth57dfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAAAAAAoAFAAeAEoAcACKAMoBQAGIAcwCCgJUAoICxgMEAzoDpgRKBRgF7AYSBpgG2gcgB2oIGAjOAAAAAQAAABwAmgAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+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: 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: '\f006'; +} + +/* 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 100755 index 0000000..f47f17d --- /dev/null +++ b/semantic/components/rating.js @@ -0,0 +1,475 @@ +/*! + * # Semantic UI 2.1.7 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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), + + 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.rating( module.get.initialRating() ); + 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) + ; + } + }, + + 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) + ; + }, + + 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() + .andSelf() + .addClass(className.active) + ; + } + settings.onRate.call(element, rating); + } + }, + + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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', + + debug : false, + verbose : false, + performance : true, + + initialRating : 0, + interactive : true, + maxRating : 4, + clearable : 'auto', + + 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 100755 index 0000000..d32bb0a --- /dev/null +++ b/semantic/components/rating.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.rating:last-child{margin-right:0}.ui.rating .icon{padding:0;margin:0;-webkit-box-flex:1;-webkit-flex:1 0 auto;-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;background:0 0;color:rgba(0,0,0,.15);font-family:Rating;line-height:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-weight:400;font-style:normal;text-align:center}.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 .icon.selected,.ui.rating.selected .active.icon,.ui.rating.selected .icon.selected{opacity:1}.ui.mini.rating{font-size:.71428571rem}.ui.tiny.rating{font-size:.85714286rem}.ui.small.rating{font-size:.92857143rem}.ui.rating{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap;vertical-align:baseline;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,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtYXCj2pm8AAABHAAAAKRnYXNwAAAAEAAAAcAAAAAIZ2x5ZlJbXMYAAAHIAAARnGhlYWQBGAe5AAATZAAAADZoaGVhA+IB/QAAE5wAAAAkaG10eCzgAEMAABPAAAAAcGxvY2EwXCxOAAAUMAAAADptYXhwACIAnAAAFGwAAAAgbmFtZfC1n04AABSMAAABPHBvc3QAAwAAAAAVyAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxZQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAJAAAAAgACAABAAAAAEAIOYF8AbwDfAj8C7wbvBw8Irwl/Cc8SPxZf/9//8AAAAAACDmAPAE8AzwI/Au8G7wcPCH8JfwnPEj8WT//f//AAH/4xoEEAYQAQ/sD+IPow+iD4wPgA98DvYOtgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAP/tAgAB0wAKABUAAAEvAQ8BFwc3Fyc3BQc3Jz8BHwEHFycCALFPT7GAHp6eHoD/AHAWW304OH1bFnABGRqgoBp8sFNTsHyyOnxYEnFxElh8OgAAAAACAAD/7QIAAdMACgASAAABLwEPARcHNxcnNwUxER8BBxcnAgCxT0+xgB6enh6A/wA4fVsWcAEZGqCgGnywU1OwfLIBHXESWHw6AAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAEAAAAAAgABwAArAAABFA4CBzEHDgMjIi4CLwEuAzU0PgIzMh4CFz4DMzIeAhUCAAcMEgugBgwMDAYGDAwMBqALEgwHFyg2HhAfGxkKChkbHxAeNigXAS0QHxsZCqAGCwkGBQkLBqAKGRsfEB42KBcHDBILCxIMBxcoNh4AAAAAAgAAAAACAAHAACsAWAAAATQuAiMiDgIHLgMjIg4CFRQeAhcxFx4DMzI+Aj8BPgM1DwEiFCIGMTAmIjQjJy4DNTQ+AjMyHgIfATc+AzMyHgIVFA4CBwIAFyg2HhAfGxkKChkbHxAeNigXBwwSC6AGDAwMBgYMDAwGoAsSDAdbogEBAQEBAaIGCgcEDRceEQkREA4GLy8GDhARCREeFw0EBwoGAS0eNigXBwwSCwsSDAcXKDYeEB8bGQqgBgsJBgUJCwagChkbHxA+ogEBAQGiBg4QEQkRHhcNBAcKBjQ0BgoHBA0XHhEJERAOBgABAAAAAAIAAcAAMQAAARQOAgcxBw4DIyIuAi8BLgM1ND4CMzIeAhcHFwc3Jzc+AzMyHgIVAgAHDBILoAYMDAwGBgwMDAagCxIMBxcoNh4KFRMSCC9wQLBwJwUJCgkFHjYoFwEtEB8bGQqgBgsJBgUJCwagChkbHxAeNigXAwUIBUtAoMBAOwECAQEXKDYeAAABAAAAAAIAAbcAKgAAEzQ3NjMyFxYXFhcWFzY3Njc2NzYzMhcWFRQPAQYjIi8BJicmJyYnJicmNQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGBwExPyMkBgYLCgkKCgoKCQoLBgYkIz8/QawFBawCBgUNDg4OFRQTAAAAAQAAAA0B2wHSACYAABM0PwI2FzYfAhYVFA8BFxQVFAcGByYvAQcGByYnJjU0PwEnJjUAEI9BBQkIBkCPEAdoGQMDBgUGgIEGBQYDAwEYaAcBIwsCFoEMAQEMgRYCCwYIZJABBQUFAwEBAkVFAgEBAwUFAwOQZAkFAAAAAAIAAAANAdsB0gAkAC4AABM0PwI2FzYfAhYVFA8BFxQVFAcmLwEHBgcmJyY1ND8BJyY1HwEHNxcnNy8BBwAQj0EFCQgGQI8QB2gZDAUGgIEGBQYDAwEYaAc/WBVsaxRXeDY2ASMLAhaBDAEBDIEWAgsGCGSQAQUNAQECRUUCAQEDBQUDA5BkCQURVXg4OHhVEW5uAAABACMAKQHdAXwAGgAANzQ/ATYXNh8BNzYXNh8BFhUUDwEGByYvASY1IwgmCAwLCFS8CAsMCCYICPUIDAsIjgjSCwkmCQEBCVS7CQEBCSYJCg0H9gcBAQePBwwAAAEAHwAfAXMBcwAsAAA3ND8BJyY1ND8BNjMyHwE3NjMyHwEWFRQPARcWFRQPAQYjIi8BBwYjIi8BJjUfCFRUCAgnCAwLCFRUCAwLCCcICFRUCAgnCAsMCFRUCAsMCCcIYgsIVFQIDAsIJwgIVFQICCcICwwIVFQICwwIJwgIVFQICCcIDAAAAAACAAAAJQFJAbcAHwArAAA3NTQ3NjsBNTQ3NjMyFxYdATMyFxYdARQHBiMhIicmNTczNTQnJiMiBwYdAQAICAsKJSY1NCYmCQsICAgIC/7tCwgIW5MWFR4fFRZApQsICDc0JiYmJjQ3CAgLpQsICAgIC8A3HhYVFRYeNwAAAQAAAAcBbgG3ACEAADcRNDc2NzYzITIXFhcWFREUBwYHBiMiLwEHBiMiJyYnJjUABgUKBgYBLAYGCgUGBgUKBQcOCn5+Cg4GBgoFBicBcAoICAMDAwMICAr+kAoICAQCCXl5CQIECAgKAAAAAwAAACUCAAFuABgAMQBKAAA3NDc2NzYzMhcWFxYVFAcGBwYjIicmJyY1MxYXFjMyNzY3JicWFRQHBiMiJyY1NDcGBzcUFxYzMjc2NTQ3NjMyNzY1NCcmIyIHBhUABihDREtLREMoBgYoQ0RLS0RDKAYlJjk5Q0M5OSYrQREmJTU1JSYRQSuEBAQGBgQEEREZBgQEBAQGJBkayQoKQSgoKChBCgoKCkEoJycoQQoKOiMjIyM6RCEeIjUmJSUmNSIeIUQlBgQEBAQGGBIRBAQGBgQEGhojAAAABQAAAAkCAAGJACwAOABRAGgAcAAANzQ3Njc2MzIXNzYzMhcWFxYXFhcWFxYVFDEGBwYPAQYjIicmNTQ3JicmJyY1MxYXNyYnJjU0NwYHNxQXFjMyNzY1NDc2MzI3NjU0JyYjIgcGFRc3Njc2NyYnNxYXFhcWFRQHBgcGBwYjPwEWFRQHBgcABitBQU0ZGhADBQEEBAUFBAUEBQEEHjw8Hg4DBQQiBQ0pIyIZBiUvSxYZDg4RQSuEBAQGBgQEEREZBgQEBAQGJBkaVxU9MzQiIDASGxkZEAYGCxQrODk/LlACFxYlyQsJQycnBRwEAgEDAwIDAwIBAwUCNmxsNhkFFAMFBBUTHh8nCQtKISgSHBsfIh4hRCUGBAQEBAYYEhEEBAYGBAQaGiPJJQUiIjYzISASGhkbCgoKChIXMRsbUZANCyghIA8AAAMAAAAAAbcB2wA5AEoAlAAANzU0NzY7ATY3Njc2NzY3Njc2MzIXFhcWFRQHMzIXFhUUBxYVFAcUFRQHFgcGKwEiJyYnJisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzMyFxYXFhcWFxYXFhcWOwEyNTQnNjc2NTQnNjU0JyYnNjc2NTQnJisBNDc2NTQnJiMGBwYHBgcGBwYHBgcGBwYHBgcGBwYrARUACwoQTgodEQ4GBAMFBgwLDxgTEwoKDjMdFhYOAgoRARkZKCUbGxsjIQZSEAoLJQUFCAcGBQUGBwgFBUkJBAUFBAQHBwMDBwcCPCUjNwIJBQUFDwMDBAkGBgsLDmUODgoJGwgDAwYFDAYQAQUGAwQGBgYFBgUGBgQJSbcPCwsGJhUPCBERExMMCgkJFBQhGxwWFR4ZFQoKFhMGBh0WKBcXBgcMDAoLDxIHBQYGBQcIBQYGBQgSAQEBAQICAQEDAgEULwgIBQoLCgsJDhQHCQkEAQ0NCg8LCxAdHREcDQ4IEBETEw0GFAEHBwUECAgFBQUFAgO3AAADAAD/2wG3AbcAPABNAJkAADc1NDc2OwEyNzY3NjsBMhcWBxUWFRQVFhUUBxYVFAcGKwEWFRQHBgcGIyInJicmJyYnJicmJyYnIyInJjU3FBcWMzI3NjU0JyYjIgcGFRczMhcWFxYXFhcWFxYXFhcWFxYXFhcWFzI3NjU0JyY1MzI3NjU0JyYjNjc2NTQnNjU0JyYnNjU0JyYrASIHIgcGBwYHBgcGIwYrARUACwoQUgYhJRsbHiAoGRkBEQoCDhYWHTMOCgoTExgPCwoFBgIBBAMFDhEdCk4QCgslBQUIBwYFBQYHCAUFSQkEBgYFBgUGBgYEAwYFARAGDAUGAwMIGwkKDg5lDgsLBgYJBAMDDwUFBQkCDg4ZJSU8AgcHAwMHBwQEBQUECbe3DwsKDAwHBhcWJwIWHQYGExYKChUZHhYVHRoiExQJCgsJDg4MDAwNBg4WJQcLCw+kBwUGBgUHCAUGBgUIpAMCBQYFBQcIBAUHBwITBwwTExERBw0OHBEdHRALCw8KDQ0FCQkHFA4JCwoLCgUICBgMCxUDAgEBAgMBAQG3AAAAAQAAAA0A7gHSABQAABM0PwI2FxEHBgcmJyY1ND8BJyY1ABCPQQUJgQYFBgMDARhoBwEjCwIWgQwB/oNFAgEBAwUFAwOQZAkFAAAAAAIAAAAAAgABtwAqAFkAABM0NzYzMhcWFxYXFhc2NzY3Njc2MzIXFhUUDwEGIyIvASYnJicmJyYnJjUzFB8BNzY1NCcmJyYnJicmIyIHBgcGBwYHBiMiJyYnJicmJyYjIgcGBwYHBgcGFQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGByU1pqY1BgYJCg4NDg0PDhIRDg8KCgcFCQkFBwoKDw4REg4PDQ4NDgoJBgYBMT8jJAYGCwoJCgoKCgkKCwYGJCM/P0GsBQWsAgYFDQ4ODhUUEzA1oJ82MBcSEgoLBgcCAgcHCwsKCQgHBwgJCgsLBwcCAgcGCwoSEhcAAAACAAAABwFuAbcAIQAoAAA3ETQ3Njc2MyEyFxYXFhURFAcGBwYjIi8BBwYjIicmJyY1PwEfAREhEQAGBQoGBgEsBgYKBQYGBQoFBw4Kfn4KDgYGCgUGJZIZef7cJwFwCggIAwMDAwgICv6QCggIBAIJeXkJAgQICAoIjRl0AWP+nQAAAAABAAAAJQHbAbcAMgAANzU0NzY7ATU0NzYzMhcWHQEUBwYrASInJj0BNCcmIyIHBh0BMzIXFh0BFAcGIyEiJyY1AAgIC8AmJjQ1JiUFBQgSCAUFFhUfHhUWHAsICAgIC/7tCwgIQKULCAg3NSUmJiU1SQgFBgYFCEkeFhUVFh43CAgLpQsICAgICwAAAAIAAQANAdsB0gAiAC0AABM2PwI2MzIfAhYXFg8BFxYHBiMiLwEHBiMiJyY/AScmNx8CLwE/AS8CEwEDDJBABggJBUGODgIDCmcYAgQCCAMIf4IFBgYEAgEZaQgC7hBbEgINSnkILgEBJggCFYILC4IVAggICWWPCgUFA0REAwUFCo9lCQipCTBmEw1HEhFc/u0AAAADAAAAAAHJAbcAFAAlAHkAADc1NDc2OwEyFxYdARQHBisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzU0NzYzNjc2NzY3Njc2NzY3Njc2NzY3NjMyFxYXFhcWFxYXFhUUFRQHBgcGBxQHBgcGBzMyFxYVFAcWFRYHFgcGBxYHBgcjIicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQFBQgGDw8OFAkFBAQBAQMCAQIEBAYFBw4KCgcHBQQCAwEBAgMDAgYCAgIBAU8XEBAQBQEOBQUECwMREiYlExYXDAwWJAoHBQY3twcGBQUGB7cIBQUFBQgkBwYFBQYHCAUGBgUIJLcHBQYBEBATGQkFCQgGBQwLBgcICQUGAwMFBAcHBgYICQQEBwsLCwYGCgIDBAMCBBEQFhkSDAoVEhAREAsgFBUBBAUEBAcMAQUFCAAAAAADAAD/2wHJAZIAFAAlAHkAADcUFxYXNxY3Nj0BNCcmBycGBwYdATc0NzY3FhcWFRQHBicGJyY1FzU0NzY3Fjc2NzY3NjcXNhcWBxYXFgcWBxQHFhUUBwYHJxYXFhcWFRYXFhcWFRQVFAcGBwYHBgcGBwYnBicmJyYnJicmJyYnJicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQGBQcKJBYMDBcWEyUmEhEDCwQFBQ4BBRAQEBdPAQECAgIGAgMDAgEBAwIEBQcHCgoOBwUGBAQCAQIDAQEEBAUJFA4PDwYIBQWlBwYFAQEBBwQJtQkEBwEBAQUGB7eTBwYEAQEEBgcJBAYBAQYECZS4BwYEAgENBwUCBgMBAQEXEyEJEhAREBcIDhAaFhEPAQEFAgQCBQELBQcKDAkIBAUHCgUGBwgDBgIEAQEHBQkIBwUMCwcECgcGCRoREQ8CBgQIAAAAAQAAAAEAAJth57dfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAAAAAAoAFAAeAEoAcACKAMoBQAGIAcwCCgJUAoICxgMEAzoDpgRKBRgF7AYSBpgG2gcgB2oIGAjOAAAAAQAAABwAmgAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'),url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+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:before{content:'\f006'}.ui.rating .active.icon:before,.ui.star.rating .active.icon:before,.ui.star.rating .icon:before{content:'\f005'}.ui.star.rating .partial.icon:before{content:'\f006'}.ui.star.rating .partial.icon{content:'\f005'}.ui.heart.rating .active.icon:before,.ui.heart.rating .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 100755 index 0000000..d968d1a --- /dev/null +++ b/semantic/components/rating.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,n,t,i){"use strict";e.fn.rating=function(n){var t,a=e(this),o=a.selector||"",r=(new Date).getTime(),s=[],l=arguments[0],c="string"==typeof l,u=[].slice.call(arguments,1);return a.each(function(){var g,m=e.isPlainObject(n)?e.extend(!0,{},e.fn.rating.settings,n):e.extend({},e.fn.rating.settings),d=m.namespace,f=m.className,v=m.metadata,p=m.selector,b=(m.error,"."+d),h="module-"+d,y=this,x=e(this).data(h),R=e(this),C=R.find(p.icon);g={initialize:function(){g.verbose("Initializing rating module",m),0===C.length&&g.setup.layout(),m.interactive?g.enable():g.disable(),g.set.rating(g.get.initialRating()),g.instantiate()},instantiate:function(){g.verbose("Instantiating module",m),x=g,R.data(h,g)},destroy:function(){g.verbose("Destroying previous instance",x),g.remove.events(),R.removeData(h)},refresh:function(){C=R.find(p.icon)},setup:{layout:function(){var n=g.get.maxRating(),t=e.fn.rating.settings.templates.icon(n);g.debug("Generating icon html dynamically"),R.html(t),g.refresh()}},event:{mouseenter:function(){var n=e(this);n.nextAll().removeClass(f.selected),R.addClass(f.selected),n.addClass(f.selected).prevAll().addClass(f.selected)},mouseleave:function(){R.removeClass(f.selected),C.removeClass(f.selected)},click:function(){var n=e(this),t=g.get.rating(),i=C.index(n)+1,a="auto"==m.clearable?1===C.length:m.clearable;a&&t==i?g.clearRating():g.set.rating(i)}},clearRating:function(){g.debug("Clearing current rating"),g.set.rating(0)},bind:{events:function(){g.verbose("Binding events"),R.on("mouseenter"+b,p.icon,g.event.mouseenter).on("mouseleave"+b,p.icon,g.event.mouseleave).on("click"+b,p.icon,g.event.click)}},remove:{events:function(){g.verbose("Removing events"),R.off(b)}},enable:function(){g.debug("Setting rating to interactive mode"),g.bind.events(),R.removeClass(f.disabled)},disable:function(){g.debug("Setting rating to read-only mode"),g.remove.events(),R.addClass(f.disabled)},get:{initialRating:function(){return R.data(v.rating)!==i?(R.removeData(v.rating),R.data(v.rating)):m.initialRating},maxRating:function(){return R.data(v.maxRating)!==i?(R.removeData(v.maxRating),R.data(v.maxRating)):m.maxRating},rating:function(){var e=C.filter("."+f.active).length;return g.verbose("Current rating retrieved",e),e}},set:{rating:function(e){var n=e-1>=0?e-1:0,t=C.eq(n);R.removeClass(f.selected),C.removeClass(f.selected).removeClass(f.active),e>0&&(g.verbose("Setting current rating to",e),t.prevAll().andSelf().addClass(f.active)),m.onRate.call(y,e)}},setting:function(n,t){if(g.debug("Changing setting",n,t),e.isPlainObject(n))e.extend(!0,m,n);else{if(t===i)return m[n];m[n]=t}},internal:function(n,t){if(e.isPlainObject(n))e.extend(!0,g,n);else{if(t===i)return g[n];g[n]=t}},debug:function(){m.debug&&(m.performance?g.performance.log(arguments):(g.debug=Function.prototype.bind.call(console.info,console,m.name+":"),g.debug.apply(console,arguments)))},verbose:function(){m.verbose&&m.debug&&(m.performance?g.performance.log(arguments):(g.verbose=Function.prototype.bind.call(console.info,console,m.name+":"),g.verbose.apply(console,arguments)))},error:function(){g.error=Function.prototype.bind.call(console.error,console,m.name+":"),g.error.apply(console,arguments)},performance:{log:function(e){var n,t,i;m.performance&&(n=(new Date).getTime(),i=r||n,t=n-i,r=n,s.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:y,"Execution Time":t})),clearTimeout(g.performance.timer),g.performance.timer=setTimeout(g.performance.display,500)},display:function(){var n=m.name+":",t=0;r=!1,clearTimeout(g.performance.timer),e.each(s,function(e,n){t+=n["Execution Time"]}),n+=" "+t+"ms",o&&(n+=" '"+o+"'"),a.length>1&&(n+=" ("+a.length+")"),(console.group!==i||console.table!==i)&&s.length>0&&(console.groupCollapsed(n),console.table?console.table(s):e.each(s,function(e,n){console.log(n.Name+": "+n["Execution Time"]+"ms")}),console.groupEnd()),s=[]}},invoke:function(n,a,o){var r,s,l,c=x;return a=a||u,o=y||o,"string"==typeof n&&c!==i&&(n=n.split(/[\. ]/),r=n.length-1,e.each(n,function(t,a){var o=t!=r?a+n[t+1].charAt(0).toUpperCase()+n[t+1].slice(1):n;if(e.isPlainObject(c[o])&&t!=r)c=c[o];else{if(c[o]!==i)return s=c[o],!1;if(!e.isPlainObject(c[a])||t==r)return c[a]!==i?(s=c[a],!1):!1;c=c[a]}})),e.isFunction(s)?l=s.apply(o,a):s!==i&&(l=s),e.isArray(t)?t.push(l):t!==i?t=[t,l]:l!==i&&(t=l),s}},c?(x===i&&g.initialize(),g.invoke(l)):(x!==i&&x.invoke("destroy"),g.initialize())}),t!==i?t:this},e.fn.rating.settings={name:"Rating",namespace:"rating",debug:!1,verbose:!1,performance:!0,initialRating:0,interactive:!0,maxRating:4,clearable:"auto",onRate:function(e){},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(e){for(var n=1,t="";e>=n;)t+='',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 100755 index 0000000..710fef3 --- /dev/null +++ b/semantic/components/reset.css @@ -0,0 +1,429 @@ +/*! + * # Semantic UI 2.1.7 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Reset +*******************************/ + + +/* Border-Box */ +*, +*:before, +*:after { + box-sizing: inherit; +} +html { + 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! */ +} + + +/******************************* + Theme Overrides +*******************************/ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/** + * Correct `block` display not defined in IE 8/9. + */ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + font-family: sans-serif; + +/* 1 */ + -ms-text-size-adjust: 100%; + +/* 2 */ + -webkit-text-size-adjust: 100%; + +/* 2 */ +} +/** + * Remove default margin. + */ +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + +/* 1 */ + vertical-align: baseline; + +/* 2 */ +} +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background: transparent; +} +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; +} +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; +} +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; +} +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; +} +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; +} +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; +} +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; +} +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; +} +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; +} +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + +/* 1 */ + font: inherit; + +/* 2 */ + margin: 0; + +/* 3 */ +} +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; +} +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; +} +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + +/* 2 */ + cursor: pointer; + +/* 3 */ +} +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; +} +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; +} +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + +/* 1 */ + padding: 0; + +/* 2 */ +} +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-appearance: textfield; + +/* 1 */ + +/* 2 */ + box-sizing: content-box; +} +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + +/* 1 */ + padding: 0; + +/* 2 */ +} +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; +} +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/reset.min.css b/semantic/components/reset.min.css new file mode 100755 index 0000000..71820f4 --- /dev/null +++ b/semantic/components/reset.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}input[type=text],input[type=email],input[type=search],input[type=password]{-webkit-appearance:none;-moz-appearance:none}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} \ No newline at end of file diff --git a/semantic/components/reveal.css b/semantic/components/reveal.css new file mode 100755 index 0000000..c614800 --- /dev/null +++ b/semantic/components/reveal.css @@ -0,0 +1,304 @@ +/*! + * # Semantic UI 2.1.7 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%; + float: left; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s ease 0.1s; + transition: 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; + -ms-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; + -ms-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; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .visible.content { + -webkit-transform: translateX(0%) !important; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + -webkit-transform: translateX(-100%) !important; + -ms-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; + -ms-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; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} +.ui.slide.up.reveal > .hidden.content { + -webkit-transform: translateY(100%) !important; + -ms-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; + -ms-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; + -ms-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} +.ui.slide.down.reveal > .hidden.content { + -webkit-transform: translateY(-100%) !important; + -ms-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; + -ms-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; + -ms-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; + margin: 0em; + -webkit-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; +} +.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; + -ms-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; + -ms-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; + -ms-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; + -ms-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); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + -ms-transform-origin: bottom right; + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.conten, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -ms-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); + -ms-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; + -ms-transform: none !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + 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 100755 index 0000000..a807969 --- /dev/null +++ b/semantic/components/reveal.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%;float:left;margin:0;-webkit-transition:-webkit-transform .5s ease .1s;transition: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;-ms-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;-ms-transform:translateX(-100%)!important;transform:translateX(-100%)!important}.ui.slide.active.reveal>.hidden.content,.ui.slide.reveal:hover>.hidden.content,.ui.slide.right.reveal>.visible.content{-webkit-transform:translateX(0)!important;-ms-transform:translateX(0)!important;transform:translateX(0)!important}.ui.slide.right.reveal>.hidden.content{-webkit-transform:translateX(-100%)!important;-ms-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;-ms-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;-ms-transform:translateX(0)!important;transform:translateX(0)!important}.ui.slide.up.reveal>.hidden.content{-webkit-transform:translateY(100%)!important;-ms-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;-ms-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;-ms-transform:translateY(0)!important;transform:translateY(0)!important}.ui.slide.down.reveal>.hidden.content{-webkit-transform:translateY(-100%)!important;-ms-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;-ms-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;-ms-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;margin:0;-webkit-transition:-webkit-transform .5s cubic-bezier(.175,.885,.32,1) .1s;transition: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;-ms-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;-ms-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;-ms-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;-ms-transform:translateY(100%)!important;transform:translateY(100%)!important}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.ui.rotate.reveal>.visible.content,.ui.rotate.right.reveal>.visible.content{-webkit-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.active.reveal>.visible.conten,.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.active.reveal>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;-ms-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);-ms-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;-ms-transform:none!important;transform:none!important}.ui.disabled.reveal:hover>.hidden.hidden.content{display:none!important}.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 100755 index 0000000..c51d499 --- /dev/null +++ b/semantic/components/search.css @@ -0,0 +1,409 @@ +/*! + * # Semantic UI 2.1.7 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.2142em; + padding: 0.67861429em 1em; + font-size: 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-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; +} +.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; + -ms-transform-origin: center top; + transform-origin: center top; + background: #ffffff; + margin-top: 0.5em; + width: 18em; + border-radius: 0.28571429rem; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); + 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.14285em 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; + 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; + 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); +} + + +/******************************* + 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; +} + +/* Category */ +.ui.category.search > .results .category { + background: #f3f4f5; + box-shadow: none; + 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; +} + +/* 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 */ +.ui.category.search > .results .category .result { + background: #ffffff; + margin-left: 100px; + border-left: 1px solid rgba(34, 36, 38, 0.15); + 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; +} +.ui.category.search > .results .category:last-child .result:last-child { + border-bottom: none; +} + +/* Category Result Name */ +.ui.category.search > .results .category > .name { + width: 100px; + background: transparent; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1em; + float: 1em; + float: left; + padding: 0.4em 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.4); +} + + +/******************************* + 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.71428571em; +} +.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; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/search.js b/semantic/components/search.js new file mode 100755 index 0000000..483b68f --- /dev/null +++ b/semantic/components/search.js @@ -0,0 +1,1345 @@ +/*! + * # Semantic UI 2.1.7 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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), + + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing module'); + 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) + ; + }, + + 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() { + clearTimeout(module.timer); + module.timer = setTimeout(module.query, settings.searchDelay); + }, + focus: function() { + module.set.focus(); + if( module.has.minimumCharacters() ) { + module.query(); + 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; + } + if(module.resultsClicked) { + module.debug('Determining if user action caused search to close'); + $module + .one('click', selector.results, function(event) { + 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.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'); + 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), + currentIndex = $result.index( $result.filter('.' + className.active) ), + resultSize = $result.length, + + 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.trigger.blur(); + } + 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) { + 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() { + var + apiSettings = { + debug : settings.debug, + on : false, + cache : 'local', + action : 'search', + onError : module.error + }, + searchHTML + ; + module.verbose('First request, initializing API'); + $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); + }, + empty: function() { + return ($results.html() === ''); + }, + visible: function() { + return ($results.filter(':visible').length > 0); + }, + focused: function() { + return ($prompt.filter(':focus').length > 0); + } + }, + + trigger: { + blur: function() { + var + events = document.createEvent('HTMLEvents'), + promptElement = $prompt[0] + ; + if(promptElement) { + module.verbose('Triggering native blur event'); + events.initEvent('blur', false, false); + promptElement.dispatchEvent(events); + } + } + }, + + get: { + 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; + }, + }, + + 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() { + var + searchTerm = module.get.value(), + cache = module.read.cache(searchTerm) + ; + 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); + } + else { + module.debug('Querying for', searchTerm); + if($.isPlainObject(settings.source) || $.isArray(settings.source)) { + module.search.local(searchTerm); + } + else if( module.can.useAPI() ) { + module.search.remote(searchTerm); + } + else { + module.error(error.source); + } + } + 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 local search results', 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) { + var + apiSettings = { + onSuccess : function(response) { + module.parse.response.call(element, response, searchTerm); + }, + onFailure: function() { + module.displayMessage(error.serverError); + }, + urlData: { + query: searchTerm + } + } + ; + if( !$module.api('get request') ) { + module.setup.api(); + } + $.extend(true, apiSettings, settings.apiSettings); + module.debug('Executing search', apiSettings); + module.cancel.query(); + $module + .api('setting', apiSettings) + .api('query') + ; + }, + object: function(searchTerm, source, searchFields) { + var + results = [], + 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) + ; + if(notResult && notFuzzyResult) { + 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.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) { + // content fuzzy matches (last in results) + addResult(fuzzyResults, content); + } + } + }); + }); + return $.merge(results, fuzzyResults); + } + }, + + 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); + } + }, + + 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: { + 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.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; + } + } + $results + .html(html) + ; + if( module.can.show() ) { + module.showResults(); + } + }, + + showResults: function() { + if(!module.is.visible()) { + 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, + queue : true + }) + ; + } + else { + module.debug('Showing results with javascript'); + $results + .stop() + .fadeIn(settings.duration, settings.easing) + ; + } + settings.onResultsOpen.call($results); + } + }, + hideResults: 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, + 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 { + 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.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({ + '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', + + debug : false, + verbose : false, + performance : true, + + type : 'standard', + // template to use (specified in settings.templates) + + minCharacters : 1, + // minimum characters required to search + + apiSettings : false, + // API config + + source : false, + // object to search + + searchFields : [ + 'title', + 'description' + ], + // fields to search + + displayField : '', + // field to display in standard results template + + searchFullText : true, + // whether to include fuzzy results in local search + + automatic : true, + // whether to add events to prompt automatically + + hideDelay : 0, + // delay before hiding menu after blur + + searchDelay : 200, + // delay before searching + + maxResults : 7, + // maximum results returned from local + + cache : true, + // whether to store lookups in local cache + + // 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.', + 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', + 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 += '' + + '' + + '

' + 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 + $.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 += '' + + '

' + ; + } + }); + 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 100755 index 0000000..bd890cc --- /dev/null +++ b/semantic/components/search.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.2142em;padding:.67861429em 1em;font-size:1em;background:#fff;border:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87);box-shadow:0 0 0 0 transparent inset;-webkit-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}.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;-ms-transform-origin:center top;transform-origin:center top;background:#fff;margin-top:.5em;width:18em;border-radius:.28571429rem;box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);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:-.14285em 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}.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;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;box-shadow:none}.ui.search>.results .result.active .description,.ui.search>.results .result.active .title{color:rgba(0,0,0,.85)}.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 .category{background:#f3f4f5;box-shadow:none;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}.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 .result{background:#fff;margin-left:100px;border-left:1px solid rgba(34,36,38,.15);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.category.search>.results .category:last-child .result:last-child{border-radius:0 0 .28571429rem;border-bottom:none}.ui.category.search>.results .category>.name{width:100px;background:0 0;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;font-size:1em;float:1em;float:left;padding:.4em 1em;font-weight:700;color:rgba(0,0,0,.4)}.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:.71428571em}.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} \ No newline at end of file diff --git a/semantic/components/search.min.js b/semantic/components/search.min.js new file mode 100755 index 0000000..2011aa7 --- /dev/null +++ b/semantic/components/search.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,s,n){"use strict";e.fn.search=function(r){var i,a=e(this),c=a.selector||"",o=(new Date).getTime(),u=[],l=arguments[0],d="string"==typeof l,g=[].slice.call(arguments,1);return e(this).each(function(){var f,p=e.isPlainObject(r)?e.extend(!0,{},e.fn.search.settings,r):e.extend({},e.fn.search.settings),v=p.className,h=p.metadata,m=p.regExp,b=p.fields,y=p.selector,R=p.error,C=p.namespace,w="."+C,x=C+"-module",j=e(this),k=j.find(y.prompt),q=j.find(y.searchButton),E=j.find(y.results),A=(j.find(y.result),j.find(y.category),this),T=j.data(x);f={initialize:function(){f.verbose("Initializing module"),f.determine.searchFields(),f.bind.events(),f.set.type(),f.create.results(),f.instantiate()},instantiate:function(){f.verbose("Storing instance of module",f),T=f,j.data(x,f)},destroy:function(){f.verbose("Destroying instance"),j.off(w).removeData(x)},bind:{events:function(){f.verbose("Binding events to search"),p.automatic&&(j.on(f.get.inputEvent()+w,y.prompt,f.event.input),k.attr("autocomplete","off")),j.on("focus"+w,y.prompt,f.event.focus).on("blur"+w,y.prompt,f.event.blur).on("keydown"+w,y.prompt,f.handleKeyboard).on("click"+w,y.searchButton,f.query).on("mousedown"+w,y.results,f.event.result.mousedown).on("mouseup"+w,y.results,f.event.result.mouseup).on("click"+w,y.result,f.event.result.click)}},determine:{searchFields:function(){r&&r.searchFields!==n&&(p.searchFields=r.searchFields)}},event:{input:function(){clearTimeout(f.timer),f.timer=setTimeout(f.query,p.searchDelay)},focus:function(){f.set.focus(),f.has.minimumCharacters()&&(f.query(),f.can.show()&&f.showResults())},blur:function(e){var t=s.activeElement===this,n=function(){f.cancel.query(),f.remove.focus(),f.timer=setTimeout(f.hideResults,p.hideDelay)};t||(f.resultsClicked?(f.debug("Determining if user action caused search to close"),j.one("click",y.results,function(e){f.is.animating()||f.is.hidden()||n()})):(f.debug("Input blurred without user action, closing results"),n()))},result:{mousedown:function(){f.resultsClicked=!0},mouseup:function(){f.resultsClicked=!1},click:function(s){f.debug("Search result selected");var n=e(this),r=n.find(y.title).eq(0),i=n.find("a[href]").eq(0),a=i.attr("href")||!1,c=i.attr("target")||!1,o=(r.html(),r.length>0?r.text():!1),u=f.get.results(),l=n.data(h.result)||f.get.result(o,u);return e.isFunction(p.onSelect)&&p.onSelect.call(A,l,u)===!1?void f.debug("Custom onSelect callback cancelled default select action"):(f.hideResults(),o&&f.set.value(o),void(a&&(f.verbose("Opening search link found in result",i),"_blank"==c||s.ctrlKey?t.open(a):t.location.href=a)))}}},handleKeyboard:function(e){var t,s=j.find(y.result),n=j.find(y.category),r=s.index(s.filter("."+v.active)),i=s.length,a=e.which,c={backspace:8,enter:13,escape:27,upArrow:38,downArrow:40};if(a==c.escape&&(f.verbose("Escape key pressed, blurring search field"),f.trigger.blur()),f.is.visible())if(a==c.enter){if(f.verbose("Enter key pressed, selecting active result"),s.filter("."+v.active).length>0)return f.event.result.click.call(s.filter("."+v.active),e),e.preventDefault(),!1}else a==c.upArrow?(f.verbose("Up key pressed, changing active result"),t=0>r-1?r:r-1,n.removeClass(v.active),s.removeClass(v.active).eq(t).addClass(v.active).closest(n).addClass(v.active),e.preventDefault()):a==c.downArrow&&(f.verbose("Down key pressed, changing active result"),t=r+1>=i?r:r+1,n.removeClass(v.active),s.removeClass(v.active).eq(t).addClass(v.active).closest(n).addClass(v.active),e.preventDefault());else a==c.enter&&(f.verbose("Enter key pressed, executing query"),f.query(),f.set.buttonPressed(),k.one("keyup",f.remove.buttonFocus))},setup:{api:function(){var e={debug:p.debug,on:!1,cache:"local",action:"search",onError:f.error};f.verbose("First request, initializing API"),j.api(e)}},can:{useAPI:function(){return e.fn.api!==n},show:function(){return f.is.focused()&&!f.is.visible()&&!f.is.empty()},transition:function(){return p.transition&&e.fn.transition!==n&&j.transition("is supported")}},is:{animating:function(){return E.hasClass(v.animating)},hidden:function(){return E.hasClass(v.hidden)},empty:function(){return""===E.html()},visible:function(){return E.filter(":visible").length>0},focused:function(){return k.filter(":focus").length>0}},trigger:{blur:function(){var e=s.createEvent("HTMLEvents"),t=k[0];t&&(f.verbose("Triggering native blur event"),e.initEvent("blur",!1,!1),t.dispatchEvent(e))}},get:{inputEvent:function(){var e=k[0],t=e!==n&&e.oninput!==n?"input":e!==n&&e.onpropertychange!==n?"propertychange":"keyup";return t},value:function(){return k.val()},results:function(){var e=j.data(h.results);return e},result:function(t,s){var r=["title","id"],i=!1;return t=t!==n?t:f.get.value(),s=s!==n?s:f.get.results(),"category"===p.type?(f.debug("Finding result that matches",t),e.each(s,function(s,n){return e.isArray(n.results)&&(i=f.search.object(t,n.results,r)[0])?!1:void 0})):(f.debug("Finding result in results object",t),i=f.search.object(t,s,r)[0]),i||!1}},set:{focus:function(){j.addClass(v.focus)},loading:function(){j.addClass(v.loading)},value:function(e){f.verbose("Setting search input value",e),k.val(e)},type:function(e){e=e||p.type,"category"==p.type&&j.addClass(p.type)},buttonPressed:function(){q.addClass(v.pressed)}},remove:{loading:function(){j.removeClass(v.loading)},focus:function(){j.removeClass(v.focus)},buttonPressed:function(){q.removeClass(v.pressed)}},query:function(){var t=f.get.value(),s=f.read.cache(t);f.has.minimumCharacters()?(s?(f.debug("Reading result from cache",t),f.save.results(s.results),f.addResults(s.html),f.inject.id(s.results)):(f.debug("Querying for",t),e.isPlainObject(p.source)||e.isArray(p.source)?f.search.local(t):f.can.useAPI()?f.search.remote(t):f.error(R.source)),p.onSearchQuery.call(A,t)):f.hideResults()},search:{local:function(e){var t,s=f.search.object(e,p.content);f.set.loading(),f.save.results(s),f.debug("Returned local search results",s),t=f.generateResults({results:s}),f.remove.loading(),f.addResults(t),f.inject.id(s),f.write.cache(e,{html:t,results:s})},remote:function(t){var s={onSuccess:function(e){f.parse.response.call(A,e,t)},onFailure:function(){f.displayMessage(R.serverError)},urlData:{query:t}};j.api("get request")||f.setup.api(),e.extend(!0,s,p.apiSettings),f.debug("Executing search",s),f.cancel.query(),j.api("setting",s).api("query")},object:function(t,s,r){var i=[],a=[],c=t.toString().replace(m.escape,"\\$&"),o=new RegExp(m.beginsWith+c,"i"),u=function(t,s){var n=-1==e.inArray(s,i),r=-1==e.inArray(s,a);n&&r&&t.push(s)};return s=s||p.source,r=r!==n?r:p.searchFields,e.isArray(r)||(r=[r]),s===n||s===!1?(f.error(R.source),[]):(e.each(r,function(n,r){e.each(s,function(e,s){var n="string"==typeof s[r];n&&(-1!==s[r].search(o)?u(i,s):p.searchFullText&&f.fuzzySearch(t,s[r])&&u(a,s))})}),e.merge(i,a))}},fuzzySearch:function(e,t){var s=t.length,n=e.length;if("string"!=typeof e)return!1;if(e=e.toLowerCase(),t=t.toLowerCase(),n>s)return!1;if(n===s)return e===t;e:for(var r=0,i=0;n>r;r++){for(var a=e.charCodeAt(r);s>i;)if(t.charCodeAt(i++)===a)continue e;return!1}return!0},parse:{response:function(e,t){var s=f.generateResults(e);f.verbose("Parsing server response",e),e!==n&&t!==n&&e[b.results]!==n&&(f.addResults(s),f.inject.id(e[b.results]),f.write.cache(t,{html:s,results:e[b.results]}),f.save.results(e[b.results]))}},cancel:{query:function(){f.can.useAPI()&&j.api("abort")}},has:{minimumCharacters:function(){var e=f.get.value(),t=e.length;return t>=p.minCharacters}},clear:{cache:function(e){var t=j.data(h.cache);e?e&&t&&t[e]&&(f.debug("Removing value from cache",e),delete t[e],j.data(h.cache,t)):(f.debug("Clearing cache",e),j.removeData(h.cache))}},read:{cache:function(e){var t=j.data(h.cache);return p.cache?(f.verbose("Checking cache for generated html for query",e),"object"==typeof t&&t[e]!==n?t[e]:!1):!1}},create:{id:function(e,t){var s,r,i=e+1;return t!==n?(s=String.fromCharCode(97+t),r=s+i,f.verbose("Creating category result id",r)):(r=i,f.verbose("Creating result id",r)),r},results:function(){0===E.length&&(E=e("

").addClass(v.results).appendTo(j))}},inject:{result:function(e,t,s){f.verbose("Injecting result into results");var r=s!==n?E.children().eq(s).children(y.result).eq(t):E.children(y.result).eq(t);f.verbose("Injecting results metadata",r),r.data(h.result,e)},id:function(t){f.debug("Injecting unique ids into results");var s=0,r=0;return"category"===p.type?e.each(t,function(t,i){r=0,e.each(i.results,function(e,t){var a=i.results[e];a.id===n&&(a.id=f.create.id(r,s)),f.inject.result(a,r,s),r++}),s++}):e.each(t,function(e,s){var i=t[e];i.id===n&&(i.id=f.create.id(r)),f.inject.result(i,r),r++}),t}},save:{results:function(e){f.verbose("Saving current search results to metadata",e),j.data(h.results,e)}},write:{cache:function(e,t){var s=j.data(h.cache)!==n?j.data(h.cache):{};p.cache&&(f.verbose("Writing generated html to cache",e,t),s[e]=t,j.data(h.cache,s))}},addResults:function(t){return e.isFunction(p.onResultsAdd)&&p.onResultsAdd.call(E,t)===!1?(f.debug("onResultsAdd callback cancelled default action"),!1):(E.html(t),void(f.can.show()&&f.showResults()))},showResults:function(){f.is.visible()||(f.can.transition()?(f.debug("Showing results with css animations"),E.transition({animation:p.transition+" in",debug:p.debug,verbose:p.verbose,duration:p.duration,queue:!0})):(f.debug("Showing results with javascript"),E.stop().fadeIn(p.duration,p.easing)),p.onResultsOpen.call(E))},hideResults:function(){f.is.visible()&&(f.can.transition()?(f.debug("Hiding results with css animations"),E.transition({animation:p.transition+" out",debug:p.debug,verbose:p.verbose,duration:p.duration,queue:!0})):(f.debug("Hiding results with javascript"),E.stop().fadeOut(p.duration,p.easing)),p.onResultsClose.call(E))},generateResults:function(t){f.debug("Generating html from response",t);var s=p.templates[p.type],n=e.isPlainObject(t[b.results])&&!e.isEmptyObject(t[b.results]),r=e.isArray(t[b.results])&&t[b.results].length>0,i="";return n||r?(p.maxResults>0&&(n?"standard"==p.type&&f.error(R.maxResults):t[b.results]=t[b.results].slice(0,p.maxResults)),e.isFunction(s)?i=s(t,b):f.error(R.noTemplate,!1)):i=f.displayMessage(R.noResults,"empty"),p.onResults.call(A,t),i},displayMessage:function(e,t){return t=t||"standard",f.debug("Displaying message",e,t),f.addResults(p.templates.message(e,t)),p.templates.message(e,t)},setting:function(t,s){if(e.isPlainObject(t))e.extend(!0,p,t);else{if(s===n)return p[t];p[t]=s}},internal:function(t,s){if(e.isPlainObject(t))e.extend(!0,f,t);else{if(s===n)return f[t];f[t]=s}},debug:function(){p.debug&&(p.performance?f.performance.log(arguments):(f.debug=Function.prototype.bind.call(console.info,console,p.name+":"),f.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?f.performance.log(arguments):(f.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),f.verbose.apply(console,arguments)))},error:function(){f.error=Function.prototype.bind.call(console.error,console,p.name+":"),f.error.apply(console,arguments)},performance:{log:function(e){var t,s,n;p.performance&&(t=(new Date).getTime(),n=o||t,s=t-n,o=t,u.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:A,"Execution Time":s})),clearTimeout(f.performance.timer),f.performance.timer=setTimeout(f.performance.display,500)},display:function(){var t=p.name+":",s=0;o=!1,clearTimeout(f.performance.timer),e.each(u,function(e,t){s+=t["Execution Time"]}),t+=" "+s+"ms",c&&(t+=" '"+c+"'"),a.length>1&&(t+=" ("+a.length+")"),(console.group!==n||console.table!==n)&&u.length>0&&(console.groupCollapsed(t),console.table?console.table(u):e.each(u,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),u=[]}},invoke:function(t,s,r){var a,c,o,u=T;return s=s||g,r=A||r,"string"==typeof t&&u!==n&&(t=t.split(/[\. ]/),a=t.length-1,e.each(t,function(s,r){var i=s!=a?r+t[s+1].charAt(0).toUpperCase()+t[s+1].slice(1):t;if(e.isPlainObject(u[i])&&s!=a)u=u[i];else{if(u[i]!==n)return c=u[i],!1;if(!e.isPlainObject(u[r])||s==a)return u[r]!==n?(c=u[r],!1):!1;u=u[r]}})),e.isFunction(c)?o=c.apply(r,s):c!==n&&(o=c),e.isArray(i)?i.push(o):i!==n?i=[i,o]:o!==n&&(i=o),c}},d?(T===n&&f.initialize(),f.invoke(l)):(T!==n&&T.invoke("destroy"),f.initialize())}),i!==n?i:this},e.fn.search.settings={name:"Search",namespace:"search",debug:!1,verbose:!1,performance:!0,type:"standard",minCharacters:1,apiSettings:!1,source:!1,searchFields:["title","description"],displayField:"",searchFullText:!0,automatic:!0,hideDelay:0,searchDelay:200,maxResults:7,cache:!0,transition:"scale",duration:200,easing:"easeOutExpo",onSelect:!1,onResultsAdd:!1,onSearchQuery:function(e){},onResults:function(e){},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.",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|^)"},fields:{categories:"results",categoryName:"name",categoryResults:"results",description:"description",image:"image",price:"price",results:"results",title:"title",url:"url",action:"action",actionText:"text",actionURL:"url"},selector:{prompt:".prompt",searchButton:".search.button",results:".results",category:".category",result:".result",title:".title, .name"},templates:{escape:function(e){var t=/[&<>"'`]/g,s=/[&<>"'`]/,n={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},r=function(e){return n[e]};return s.test(e)?e.replace(t,r):e},message:function(e,t){var s="";return e!==n&&t!==n&&(s+='

',s+="empty"==t?'

'+e+'

':'

'+e+"

",s+="

"),s},category:function(t,s){{var r="";e.fn.search.settings.templates.escape}return t[s.categoryResults]!==n?(e.each(t[s.categoryResults],function(t,i){i[s.results]!==n&&i.results.length>0&&(r+='

',i[s.categoryName]!==n&&(r+='

'+i[s.categoryName]+"

"),e.each(i.results,function(e,t){r+=t[s.url]?'':'',t[s.image]!==n&&(r+='

'),r+='

',t[s.price]!==n&&(r+='

'+t[s.price]+"

"),t[s.title]!==n&&(r+='

'+t[s.title]+"

"),t[s.description]!==n&&(r+='

'+t[s.description]+"

"),r+="

",r+=""}),r+="

")}),t[s.action]&&(r+=''+t[s.action][s.actionText]+""),r):!1},standard:function(t,s){var r="";return t[s.results]!==n?(e.each(t[s.results],function(e,t){r+=t[s.url]?'':'',t[s.image]!==n&&(r+='

'),r+='

',t[s.price]!==n&&(r+='

'+t[s.price]+"

"),t[s.title]!==n&&(r+='

'+t[s.title]+"

"),t[s.description]!==n&&(r+='

'+t[s.description]+"

"),r+="

",r+=""}),t[s.action]&&(r+=''+t[s.action][s.actionText]+""),r):!1}}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/segment.css b/semantic/components/segment.css new file mode 100755 index 0000000..a0c40d7 --- /dev/null +++ b/semantic/components/segment.css @@ -0,0 +1,758 @@ +/*! + * # Semantic UI 2.1.7 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: #ffffff; + 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; + 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); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); +} +.ui[class*="very basic"].table.segment { + padding: 1em 1em; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: 3em 0em; + 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); + box-shadow: ''; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -ms-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); + -ms-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; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -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 { + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); +} + + +/******************************* + Groups +*******************************/ + + +/* Group */ +.ui.segments { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + margin: 1rem 0em; + border: 1px solid 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; + 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; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + border-radius: 0em 0em 0.28571429rem 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: #ffffff; + 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; + box-shadow: none; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + 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; + 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; + point-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; + 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; + 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; +} +.ui.inverted.red.segment { + background-color: #db2828 !important; + color: #ffffff !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: 2px solid #f2711c; +} +.ui.inverted.orange.segment { + background-color: #f2711c !important; + color: #ffffff !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: 2px solid #fbbd08; +} +.ui.inverted.yellow.segment { + background-color: #fbbd08 !important; + color: #ffffff !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: 2px solid #b5cc18; +} +.ui.inverted.olive.segment { + background-color: #b5cc18 !important; + color: #ffffff !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: 2px solid #21ba45; +} +.ui.inverted.green.segment { + background-color: #21ba45 !important; + color: #ffffff !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: 2px solid #00b5ad; +} +.ui.inverted.teal.segment { + background-color: #00b5ad !important; + color: #ffffff !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: 2px solid #2185d0; +} +.ui.inverted.blue.segment { + background-color: #2185d0 !important; + color: #ffffff !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: 2px solid #6435c9; +} +.ui.inverted.violet.segment { + background-color: #6435c9 !important; + color: #ffffff !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: 2px solid #a333c8; +} +.ui.inverted.purple.segment { + background-color: #a333c8 !important; + color: #ffffff !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: 2px solid #e03997; +} +.ui.inverted.pink.segment { + background-color: #e03997 !important; + color: #ffffff !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: 2px solid #a5673f; +} +.ui.inverted.brown.segment { + background-color: #a5673f !important; + color: #ffffff !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: 2px solid #767676; +} +.ui.inverted.grey.segment { + background-color: #767676 !important; + color: #ffffff !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: 2px solid #1b1c1d; +} +.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; + 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-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-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% + 2px ); + max-width: calc(100% + 2px ); + box-shadow: none; + border: 1px solid #d4d4d5; +} +.ui.attached + .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; + 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; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/segment.min.css b/semantic/components/segment.min.css new file mode 100755 index 0000000..35e24d6 --- /dev/null +++ b/semantic/components/segment.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.segment{position:relative;background:#fff;box-shadow:0 1px 2px 0 rgba(34,36,38,.15);margin:1rem 0;padding: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;border-radius:0;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);box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.ui[class*="very basic"].table.segment{padding:1em}.ui.piled.segment,.ui.piled.segments{margin:3em 0;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);box-shadow:''}.ui.piled.segment:before,.ui.piled.segments:before{-webkit-transform:rotate(-1.2deg);-ms-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);-ms-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.compact.segment{display:table}.ui.compact.segments{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex}.ui.compact.segments .segment,.ui.segments .compact.segment{display:block;-webkit-box-flex:0;-webkit-flex:0 1 auto;-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{box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08)}.ui.segments{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;margin:1rem 0;border:1px solid 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;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;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),none;border-radius:0 0 .28571429rem .28571429rem}.ui.segments>.ui.segments{border-top:1px solid rgba(34,36,38,.15);margin: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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;padding:0;background-color:#fff;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;box-shadow:none;border-top:1px solid rgba(34,36,38,.15)}.ui.horizontal.segments>.segment{-webkit-box-flex:1;-webkit-flex:1 1 auto;flex:1 1 auto;-ms-flex:1 1 0;margin:0;min-width:0;background-color:transparent;border-radius:0;border: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;point-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);border-style:solid;border-width:.2em;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;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}.ui.inverted.red.segment{background-color:#db2828!important;color:#fff!important}.ui.orange.segment:not(.inverted){border-top:2px solid #f2711c}.ui.inverted.orange.segment{background-color:#f2711c!important;color:#fff!important}.ui.yellow.segment:not(.inverted){border-top:2px solid #fbbd08}.ui.inverted.yellow.segment{background-color:#fbbd08!important;color:#fff!important}.ui.olive.segment:not(.inverted){border-top:2px solid #b5cc18}.ui.inverted.olive.segment{background-color:#b5cc18!important;color:#fff!important}.ui.green.segment:not(.inverted){border-top:2px solid #21ba45}.ui.inverted.green.segment{background-color:#21ba45!important;color:#fff!important}.ui.teal.segment:not(.inverted){border-top:2px solid #00b5ad}.ui.inverted.teal.segment{background-color:#00b5ad!important;color:#fff!important}.ui.blue.segment:not(.inverted){border-top:2px solid #2185d0}.ui.inverted.blue.segment{background-color:#2185d0!important;color:#fff!important}.ui.violet.segment:not(.inverted){border-top:2px solid #6435c9}.ui.inverted.violet.segment{background-color:#6435c9!important;color:#fff!important}.ui.purple.segment:not(.inverted){border-top:2px solid #a333c8}.ui.inverted.purple.segment{background-color:#a333c8!important;color:#fff!important}.ui.pink.segment:not(.inverted){border-top:2px solid #e03997}.ui.inverted.pink.segment{background-color:#e03997!important;color:#fff!important}.ui.brown.segment:not(.inverted){border-top:2px solid #a5673f}.ui.inverted.brown.segment{background-color:#a5673f!important;color:#fff!important}.ui.grey.segment:not(.inverted){border-top:2px solid #767676}.ui.inverted.grey.segment{background-color:#767676!important;color:#fff!important}.ui.black.segment:not(.inverted){border-top:2px solid #1b1c1d}.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;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:-webkit-linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%) #4c4f52;background:linear-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%) #4c4f52;color:rgba(255,255,255,.8)}.ui.tertiary.segment{background:#dcddde;color:rgba(0,0,0,.6)}.ui.tertiary.inverted.segment{background:-webkit-linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%) #717579;background:linear-gradient(rgba(255,255,255,.35) 0,rgba(255,255,255,.35) 100%) #717579;color:rgba(255,255,255,.8)}.ui.attached.segment{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);box-shadow:none;border:1px solid #d4d4d5}.ui.attached+.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;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} \ No newline at end of file diff --git a/semantic/components/shape.css b/semantic/components/shape.css new file mode 100755 index 0000000..439f726 --- /dev/null +++ b/semantic/components/shape.css @@ -0,0 +1,154 @@ +/*! + * # Semantic UI 2.1.7 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-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; +} +.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); + 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: -webkit-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; +} +.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 100755 index 0000000..cc23827 --- /dev/null +++ b/semantic/components/shape.js @@ -0,0 +1,876 @@ +/*! + * # Semantic UI 2.1.7 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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(), + newSize = {} + ; + module.set.currentStageSize(); + $activeSide.removeClass(className.active); + $nextSide.addClass(className.active); + $clone.insertAfter($module); + newSize = { + width : $nextSide.outerWidth(true), + height : $nextSide.outerHeight(true) + }; + $clone.remove(); + $module + .css(newSize) + ; + module.verbose('Resizing stage to fit new content', newSize); + }, + + 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); + module.set.stageSize(); + module.stage.above(); + module.animate( module.get.transform.up() ); + } + 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); + module.set.stageSize(); + module.stage.below(); + module.animate( module.get.transform.down() ); + } + 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); + module.set.stageSize(); + module.stage.left(); + module.animate(module.get.transform.left() ); + } + 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); + module.set.stageSize(); + module.stage.right(); + module.animate(module.get.transform.right() ); + } + 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) { + 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({ + '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', + + // debug content outputted to console + debug : false, + + // verbose debug output + verbose : false, + + // performance data output + performance: true, + + // event namespace + namespace : 'shape', + + // 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 ); \ No newline at end of file diff --git a/semantic/components/shape.min.css b/semantic/components/shape.min.css new file mode 100755 index 0000000..4babb94 --- /dev/null +++ b/semantic/components/shape.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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:-webkit-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}.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;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);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;-webkit-transition:-webkit-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}.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 100755 index 0000000..f918323 --- /dev/null +++ b/semantic/components/shape.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,i,n){"use strict";e.fn.shape=function(a){var o,r=e(this),s=(e("body"),(new Date).getTime()),d=[],l=arguments[0],u="string"==typeof l,c=[].slice.call(arguments,1),g=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)};return r.each(function(){var t,f,m,p=r.selector||"",v=e.isPlainObject(a)?e.extend(!0,{},e.fn.shape.settings,a):e.extend({},e.fn.shape.settings),h=v.namespace,b=v.selector,x=v.error,y=v.className,S="."+h,w="module-"+h,z=e(this),C=z.find(b.sides),W=z.find(b.side),H=!1,T=this,Z=z.data(w);m={initialize:function(){m.verbose("Initializing module for",T),m.set.defaultSide(),m.instantiate()},instantiate:function(){m.verbose("Storing instance of module",m),Z=m,z.data(w,Z)},destroy:function(){m.verbose("Destroying previous module for",T),z.removeData(w).off(S)},refresh:function(){m.verbose("Refreshing selector cache for",T),z=e(T),C=e(this).find(b.shape),W=e(this).find(b.side)},repaint:function(){m.verbose("Forcing repaint event");{var e=C[0]||i.createElement("div");e.offsetWidth}},animate:function(e,i){m.verbose("Animating box with properties",e),i=i||function(e){m.verbose("Executing animation callback"),e!==n&&e.stopPropagation(),m.reset(),m.set.active()},v.beforeChange.call(f[0]),m.get.transitionEvent()?(m.verbose("Starting CSS animation"),z.addClass(y.animating),C.css(e).one(m.get.transitionEvent(),i),m.set.duration(v.duration),g(function(){z.addClass(y.animating),t.addClass(y.hidden)})):i()},queue:function(e){m.debug("Queueing animation of",e),C.one(m.get.transitionEvent(),function(){m.debug("Executing queued animation"),setTimeout(function(){z.shape(e)},0)})},reset:function(){m.verbose("Animating states reset"),z.removeClass(y.animating).attr("style","").removeAttr("style"),C.attr("style","").removeAttr("style"),W.attr("style","").removeAttr("style").removeClass(y.hidden),f.removeClass(y.animating).attr("style","").removeAttr("style")},is:{complete:function(){return W.filter("."+y.active)[0]==f[0]},animating:function(){return z.hasClass(y.animating)}},set:{defaultSide:function(){t=z.find("."+v.className.active),f=t.next(b.side).length>0?t.next(b.side):z.find(b.side).first(),H=!1,m.verbose("Active side set to",t),m.verbose("Next side set to",f)},duration:function(e){e=e||v.duration,e="number"==typeof e?e+"ms":e,m.verbose("Setting animation duration",e),(v.duration||0===v.duration)&&C.add(W).css({"-webkit-transition-duration":e,"-moz-transition-duration":e,"-ms-transition-duration":e,"-o-transition-duration":e,"transition-duration":e})},currentStageSize:function(){var e=z.find("."+v.className.active),t=e.outerWidth(!0),i=e.outerHeight(!0);z.css({width:t,height:i})},stageSize:function(){var e=z.clone().addClass(y.loading),t=e.find("."+v.className.active),i=H?e.find(b.side).eq(H):t.next(b.side).length>0?t.next(b.side):e.find(b.side).first(),n={};m.set.currentStageSize(),t.removeClass(y.active),i.addClass(y.active),e.insertAfter(z),n={width:i.outerWidth(!0),height:i.outerHeight(!0)},e.remove(),z.css(n),m.verbose("Resizing stage to fit new content",n)},nextSide:function(e){H=e,f=W.filter(e),H=W.index(f),0===f.length&&(m.set.defaultSide(),m.error(x.side)),m.verbose("Next side manually set to",f)},active:function(){m.verbose("Setting new side to active",f),W.removeClass(y.active),f.addClass(y.active),v.onChange.call(f[0]),m.set.defaultSide()}},flip:{up:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip up"):(m.debug("Flipping up",f),m.set.stageSize(),m.stage.above(),m.animate(m.get.transform.up()))):void m.debug("Side already visible",f)},down:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip down"):(m.debug("Flipping down",f),m.set.stageSize(),m.stage.below(),m.animate(m.get.transform.down()))):void m.debug("Side already visible",f)},left:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip left"):(m.debug("Flipping left",f),m.set.stageSize(),m.stage.left(),m.animate(m.get.transform.left()))):void m.debug("Side already visible",f)},right:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip right"):(m.debug("Flipping right",f),m.set.stageSize(),m.stage.right(),m.animate(m.get.transform.right()))):void m.debug("Side already visible",f)},over:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip over"):(m.debug("Flipping over",f),m.set.stageSize(),m.stage.behind(),m.animate(m.get.transform.over()))):void m.debug("Side already visible",f)},back:function(){return!m.is.complete()||m.is.animating()||v.allowRepeats?void(m.is.animating()?m.queue("flip back"):(m.debug("Flipping back",f),m.set.stageSize(),m.stage.behind(),m.animate(m.get.transform.back()))):void m.debug("Side already visible",f)}},get:{transform:{up:function(){var e={y:-((t.outerHeight(!0)-f.outerHeight(!0))/2),z:-(t.outerHeight(!0)/2)};return{transform:"translateY("+e.y+"px) translateZ("+e.z+"px) rotateX(-90deg)"}},down:function(){var e={y:-((t.outerHeight(!0)-f.outerHeight(!0))/2),z:-(t.outerHeight(!0)/2)};return{transform:"translateY("+e.y+"px) translateZ("+e.z+"px) rotateX(90deg)"}},left:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2),z:-(t.outerWidth(!0)/2)};return{transform:"translateX("+e.x+"px) translateZ("+e.z+"px) rotateY(90deg)"}},right:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2),z:-(t.outerWidth(!0)/2)};return{transform:"translateX("+e.x+"px) translateZ("+e.z+"px) rotateY(-90deg)"}},over:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2)};return{transform:"translateX("+e.x+"px) rotateY(180deg)"}},back:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2)};return{transform:"translateX("+e.x+"px) rotateY(-180deg)"}}},transitionEvent:function(){var e,t=i.createElement("element"),a={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in a)if(t.style[e]!==n)return a[e]},nextSide:function(){return t.next(b.side).length>0?t.next(b.side):z.find(b.side).first()}},stage:{above:function(){var e={origin:(t.outerHeight(!0)-f.outerHeight(!0))/2,depth:{active:f.outerHeight(!0)/2,next:t.outerHeight(!0)/2}};m.verbose("Setting the initial animation position as above",f,e),C.css({transform:"translateZ(-"+e.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+e.depth.active+"px)"}),f.addClass(y.animating).css({top:e.origin+"px",transform:"rotateX(90deg) translateZ("+e.depth.next+"px)"})},below:function(){var e={origin:(t.outerHeight(!0)-f.outerHeight(!0))/2,depth:{active:f.outerHeight(!0)/2,next:t.outerHeight(!0)/2}};m.verbose("Setting the initial animation position as below",f,e),C.css({transform:"translateZ(-"+e.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+e.depth.active+"px)"}),f.addClass(y.animating).css({top:e.origin+"px",transform:"rotateX(-90deg) translateZ("+e.depth.next+"px)"})},left:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},i={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};m.verbose("Setting the initial animation position as left",f,i),C.css({transform:"translateZ(-"+i.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+i.depth.active+"px)"}),f.addClass(y.animating).css({left:i.origin+"px",transform:"rotateY(-90deg) translateZ("+i.depth.next+"px)"})},right:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},i={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};m.verbose("Setting the initial animation position as left",f,i),C.css({transform:"translateZ(-"+i.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+i.depth.active+"px)"}),f.addClass(y.animating).css({left:i.origin+"px",transform:"rotateY(90deg) translateZ("+i.depth.next+"px)"})},behind:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},i={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};m.verbose("Setting the initial animation position as behind",f,i),t.css({transform:"rotateY(0deg)"}),f.addClass(y.animating).css({left:i.origin+"px",transform:"rotateY(-180deg)"})}},setting:function(t,i){if(m.debug("Changing setting",t,i),e.isPlainObject(t))e.extend(!0,v,t);else{if(i===n)return v[t];v[t]=i}},internal:function(t,i){if(e.isPlainObject(t))e.extend(!0,m,t);else{if(i===n)return m[t];m[t]=i}},debug:function(){v.debug&&(v.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,v.name+":"),m.debug.apply(console,arguments)))},verbose:function(){v.verbose&&v.debug&&(v.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,v.name+":"),m.verbose.apply(console,arguments)))},error:function(){m.error=Function.prototype.bind.call(console.error,console,v.name+":"),m.error.apply(console,arguments)},performance:{log:function(e){var t,i,n;v.performance&&(t=(new Date).getTime(),n=s||t,i=t-n,s=t,d.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:T,"Execution Time":i})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,500)},display:function(){var t=v.name+":",i=0;s=!1,clearTimeout(m.performance.timer),e.each(d,function(e,t){i+=t["Execution Time"]}),t+=" "+i+"ms",p&&(t+=" '"+p+"'"),r.length>1&&(t+=" ("+r.length+")"),(console.group!==n||console.table!==n)&&d.length>0&&(console.groupCollapsed(t),console.table?console.table(d):e.each(d,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),d=[]}},invoke:function(t,i,a){var r,s,d,l=Z;return i=i||c,a=T||a,"string"==typeof t&&l!==n&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(i,a){var o=i!=r?a+t[i+1].charAt(0).toUpperCase()+t[i+1].slice(1):t;if(e.isPlainObject(l[o])&&i!=r)l=l[o];else{if(l[o]!==n)return s=l[o],!1;if(!e.isPlainObject(l[a])||i==r)return l[a]!==n?(s=l[a],!1):!1;l=l[a]}})),e.isFunction(s)?d=s.apply(a,i):s!==n&&(d=s),e.isArray(o)?o.push(d):o!==n?o=[o,d]:d!==n&&(o=d),s}},u?(Z===n&&m.initialize(),m.invoke(l)):(Z!==n&&Z.invoke("destroy"),m.initialize())}),o!==n?o:this},e.fn.shape.settings={name:"Shape",debug:!1,verbose:!1,performance:!0,namespace:"shape",beforeChange:function(){},onChange:function(){},allowRepeats:!1,duration:!1,error:{side:"You tried to switch to a side that does not exist.",method:"The method you called is not defined"},className:{animating:"animating",hidden:"hidden",loading:"loading",active:"active"},selector:{sides:".sides",side:".side"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/sidebar.css b/semantic/components/sidebar.css new file mode 100755 index 0000000..fad6ecf --- /dev/null +++ b/semantic/components/sidebar.css @@ -0,0 +1,627 @@ +/*! + * # Semantic UI 2.1.7 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Sidebar +*******************************/ + + +/* Sidebar Menu */ +.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: 0em !important; + margin: 0em !important; + overflow-y: auto !important; + z-index: 102; +} + +/* GPU Layers for Child Elements */ +.ui.sidebar > * { + -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: 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: 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 { + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); +} +.ui.top.visible.sidebar, +.ui.bottom.visible.sidebar { + 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 +---------------*/ + +/* + iOS incorrectly sizes document when content + is presented outside of view with 2Dtranslate +*/ +html.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} +html.ios, +html.ios body { + height: initial !important; +} + + +/******************************* + 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: 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; + -ms-transform: none !important; + transform: none !important; +} + +/*-------------- + Push +---------------*/ + + +/* Initial */ +.ui.push.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: 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: 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: 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: 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: 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%; + -ms-transform-origin: 75% 50%; + transform-origin: 75% 50%; +} +.ui.scale.down.right.sidebar ~ .pusher { + -webkit-transform-origin: 25% 50%; + -ms-transform-origin: 25% 50%; + transform-origin: 25% 50%; +} +.ui.scale.down.top.sidebar ~ .pusher { + -webkit-transform-origin: 50% 75%; + -ms-transform-origin: 50% 75%; + transform-origin: 50% 75%; +} +.ui.scale.down.bottom.sidebar ~ .pusher { + -webkit-transform-origin: 50% 25%; + -ms-transform-origin: 50% 25%; + transform-origin: 50% 25%; +} + +/* Animation */ +.ui.animating.scale.down > .visible.ui.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: 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); + -ms-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 100755 index 0000000..31a27d6 --- /dev/null +++ b/semantic/components/sidebar.js @@ -0,0 +1,1022 @@ +/*! + * # Semantic UI 2.1.7 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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(); + + if(module.is.ios()) { + module.set.ios(); + } + + // 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 + 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) { + 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({ + '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', + + 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 100755 index 0000000..a4f38f4 --- /dev/null +++ b/semantic/components/sidebar.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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 500ms ease;transition:transform 500ms ease;will-change:transform;z-index:101}body.pushable>.pusher{background:#fff}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;min-height:100%;-webkit-transition:-webkit-transform 500ms ease;transition:transform 500ms ease;z-index:2;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 500ms;transition:opacity 500ms;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.bottom.visible.sidebar,.ui.left.visible.sidebar,.ui.right.visible.sidebar,.ui.top.visible.sidebar{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)}html.ios{overflow-x:hidden;-webkit-overflow-scrolling:touch}html.ios,html.ios body{height:initial!important}.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 500ms ease;transition:transform 500ms ease}.ui.visible.bottom.overlay.sidebar,.ui.visible.left.overlay.sidebar,.ui.visible.right.overlay.sidebar,.ui.visible.top.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;-ms-transform:none!important;transform:none!important}.ui.push.sidebar{-webkit-transition:-webkit-transform 500ms ease;transition:transform 500ms 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 500ms ease;transition:transform 500ms 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 500ms ease;transition:transform 500ms 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 500ms ease;transition:transform 500ms 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 500ms ease;transition:transform 500ms 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%;-ms-transform-origin:75% 50%;transform-origin:75% 50%}.ui.scale.down.right.sidebar~.pusher{-webkit-transform-origin:25% 50%;-ms-transform-origin:25% 50%;transform-origin:25% 50%}.ui.scale.down.top.sidebar~.pusher{-webkit-transform-origin:50% 75%;-ms-transform-origin:50% 75%;transform-origin:50% 75%}.ui.scale.down.bottom.sidebar~.pusher{-webkit-transform-origin:50% 25%;-ms-transform-origin:50% 25%;transform-origin:50% 25%}.ui.animating.scale.down>.visible.ui.sidebar{-webkit-transition:-webkit-transform 500ms ease;transition:transform 500ms 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);-ms-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 100755 index 0000000..2b8cd16 --- /dev/null +++ b/semantic/components/sidebar.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,i,n,t){"use strict";e.fn.sidebar=function(o){var r,s=e(this),a=e(i),l=e(n),c=e("html"),u=e("head"),d=s.selector||"",f=(new Date).getTime(),b=[],m=arguments[0],h="string"==typeof m,g=[].slice.call(arguments,1),v=i.requestAnimationFrame||i.mozRequestAnimationFrame||i.webkitRequestAnimationFrame||i.msRequestAnimationFrame||function(e){setTimeout(e,0)};return s.each(function(){var s,p,y,C,k,w,T=e.isPlainObject(o)?e.extend(!0,{},e.fn.sidebar.settings,o):e.extend({},e.fn.sidebar.settings),x=T.selector,S=T.className,A=T.namespace,F=T.regExp,O=T.error,P="."+A,E="module-"+A,H=e(this),D=e(T.context),R=H.children(x.sidebar),j=D.children(x.fixed),M=D.children(x.pusher),z=this,B=H.data(E);w={initialize:function(){w.debug("Initializing sidebar",o),w.create.id(),k=w.get.transitionEvent(),w.is.ios()&&w.set.ios(),T.delaySetup?v(w.setup.layout):w.setup.layout(),v(function(){w.setup.cache()}),w.instantiate()},instantiate:function(){w.verbose("Storing instance of module",w),B=w,H.data(E,w)},create:{id:function(){y=(Math.random().toString(16)+"000000000").substr(2,8),p="."+y,w.verbose("Creating unique id for element",y)}},destroy:function(){w.verbose("Destroying previous module for",H),H.off(P).removeData(E),w.is.ios()&&w.remove.ios(),D.off(p),a.off(p),l.off(p)},event:{clickaway:function(e){var i=M.find(e.target).length>0||M.is(e.target),n=D.is(e.target);i&&(w.verbose("User clicked on dimmed page"),w.hide()),n&&(w.verbose("User clicked on dimmable context (scaled out page)"),w.hide())},touch:function(e){},containScroll:function(e){z.scrollTop<=0&&(z.scrollTop=1),z.scrollTop+z.offsetHeight>=z.scrollHeight&&(z.scrollTop=z.scrollHeight-z.offsetHeight-1)},scroll:function(i){0===e(i.target).closest(x.sidebar).length&&i.preventDefault()}},bind:{clickaway:function(){w.verbose("Adding clickaway events to context",D),T.closable&&D.on("click"+p,w.event.clickaway).on("touchend"+p,w.event.clickaway)},scrollLock:function(){T.scrollLock&&(w.debug("Disabling page scroll"),a.on("DOMMouseScroll"+p,w.event.scroll)),w.verbose("Adding events to contain sidebar scroll"),l.on("touchmove"+p,w.event.touch),H.on("scroll"+P,w.event.containScroll)}},unbind:{clickaway:function(){w.verbose("Removing clickaway events from context",D),D.off(p)},scrollLock:function(){w.verbose("Removing scroll lock from page"),l.off(p),a.off(p),H.off("scroll"+P)}},add:{inlineCSS:function(){var i,n=w.cache.width||H.outerWidth(),t=w.cache.height||H.outerHeight(),o=w.is.rtl(),r=w.get.direction(),a={left:n,right:-n,top:t,bottom:-t};o&&(w.verbose("RTL detected, flipping widths"),a.left=-n,a.right=n),i="",s=e(i).appendTo(u),w.debug("Adding sizing css to head",s)}},refresh:function(){w.verbose("Refreshing selector cache"),D=e(T.context),R=D.children(x.sidebar),M=D.children(x.pusher),j=D.children(x.fixed),w.clear.cache()},refreshSidebars:function(){w.verbose("Refreshing other sidebars"),R=D.children(x.sidebar)},repaint:function(){w.verbose("Forcing repaint event"),z.style.display="none";z.offsetHeight;z.scrollTop=z.scrollTop,z.style.display=""},setup:{cache:function(){w.cache={width:H.outerWidth(),height:H.outerHeight(),rtl:"rtl"==H.css("direction")}},layout:function(){0===D.children(x.pusher).length&&(w.debug("Adding wrapper element for sidebar"),w.error(O.pusher),M=e('

'),D.children().not(x.omitted).not(R).wrapAll(M),w.refresh()),(0===H.nextAll(x.pusher).length||H.nextAll(x.pusher)[0]!==M[0])&&(w.debug("Moved sidebar to correct parent element"),w.error(O.movedSidebar,z),H.detach().prependTo(D),w.refresh()),w.clear.cache(),w.set.pushable(),w.set.direction()}},attachEvents:function(i,n){var t=e(i);n=e.isFunction(w[n])?w[n]:w.toggle,t.length>0?(w.debug("Attaching sidebar events to element",i,n),t.on("click"+P,n)):w.error(O.notFound,i)},show:function(i){if(i=e.isFunction(i)?i:function(){},w.is.hidden()){if(w.refreshSidebars(),T.overlay&&(w.error(O.overlay),T.transition="overlay"),w.refresh(),w.othersActive())if(w.debug("Other sidebars currently visible"),T.exclusive){if("overlay"!=T.transition)return void w.hideOthers(w.show);w.hideOthers()}else T.transition="overlay";w.pushPage(function(){i.call(z),T.onShow.call(z)}),T.onChange.call(z),T.onVisible.call(z)}else w.debug("Sidebar is already visible")},hide:function(i){i=e.isFunction(i)?i:function(){},(w.is.visible()||w.is.animating())&&(w.debug("Hiding sidebar",i),w.refreshSidebars(),w.pullPage(function(){i.call(z),T.onHidden.call(z)}),T.onChange.call(z),T.onHide.call(z))},othersAnimating:function(){return R.not(H).filter("."+S.animating).length>0},othersVisible:function(){return R.not(H).filter("."+S.visible).length>0},othersActive:function(){return w.othersVisible()||w.othersAnimating()},hideOthers:function(e){var i=R.not(H).filter("."+S.visible),n=i.length,t=0;e=e||function(){},i.sidebar("hide",function(){t++,t==n&&e()})},toggle:function(){w.verbose("Determining toggled direction"),w.is.hidden()?w.show():w.hide()},pushPage:function(i){var n,t,o,r=w.get.transition(),s="overlay"===r||w.othersActive()?H:M;i=e.isFunction(i)?i:function(){},"scale down"==T.transition&&w.scrollToTop(),w.set.transition(r),w.repaint(),n=function(){w.bind.clickaway(),w.add.inlineCSS(),w.set.animating(),w.set.visible()},t=function(){w.set.dimmed()},o=function(e){e.target==s[0]&&(s.off(k+p,o),w.remove.animating(),w.bind.scrollLock(),i.call(z))},s.off(k+p),s.on(k+p,o),v(n),T.dimPage&&!w.othersVisible()&&v(t)},pullPage:function(i){var n,t,o=w.get.transition(),r="overlay"==o||w.othersActive()?H:M;i=e.isFunction(i)?i:function(){},w.verbose("Removing context push state",w.get.direction()),w.unbind.clickaway(),w.unbind.scrollLock(),n=function(){w.set.transition(o),w.set.animating(),w.remove.visible(),T.dimPage&&!w.othersVisible()&&M.removeClass(S.dimmed)},t=function(e){e.target==r[0]&&(r.off(k+p,t),w.remove.animating(),w.remove.transition(),w.remove.inlineCSS(),("scale down"==o||T.returnScroll&&w.is.mobile())&&w.scrollBack(),i.call(z))},r.off(k+p),r.on(k+p,t),v(n)},scrollToTop:function(){w.verbose("Scrolling to top of page to avoid animation issues"),C=e(i).scrollTop(),H.scrollTop(0),i.scrollTo(0,0)},scrollBack:function(){w.verbose("Scrolling back to original page position"),i.scrollTo(0,C)},clear:{cache:function(){w.verbose("Clearing cached dimensions"),w.cache={}}},set:{ios:function(){c.addClass(S.ios)},pushed:function(){D.addClass(S.pushed)},pushable:function(){D.addClass(S.pushable)},dimmed:function(){M.addClass(S.dimmed)},active:function(){H.addClass(S.active)},animating:function(){H.addClass(S.animating)},transition:function(e){e=e||w.get.transition(),H.addClass(e)},direction:function(e){e=e||w.get.direction(),H.addClass(S[e])},visible:function(){H.addClass(S.visible)},overlay:function(){H.addClass(S.overlay)}},remove:{inlineCSS:function(){w.debug("Removing inline css styles",s),s&&s.length>0&&s.remove()},ios:function(){c.removeClass(S.ios)},pushed:function(){D.removeClass(S.pushed)},pushable:function(){D.removeClass(S.pushable)},active:function(){H.removeClass(S.active)},animating:function(){H.removeClass(S.animating)},transition:function(e){e=e||w.get.transition(),H.removeClass(e)},direction:function(e){e=e||w.get.direction(),H.removeClass(S[e])},visible:function(){H.removeClass(S.visible)},overlay:function(){H.removeClass(S.overlay)}},get:{direction:function(){return H.hasClass(S.top)?S.top:H.hasClass(S.right)?S.right:H.hasClass(S.bottom)?S.bottom:S.left},transition:function(){var e,i=w.get.direction();return e=w.is.mobile()?"auto"==T.mobileTransition?T.defaultTransition.mobile[i]:T.mobileTransition:"auto"==T.transition?T.defaultTransition.computer[i]:T.transition,w.verbose("Determined transition",e),e},transitionEvent:function(){var e,i=n.createElement("element"),o={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in o)if(i.style[e]!==t)return o[e]}},is:{ie:function(){var e=!i.ActiveXObject&&"ActiveXObject"in i,n="ActiveXObject"in i;return e||n},ios:function(){var e=navigator.userAgent,i=e.match(F.ios),n=e.match(F.mobileChrome);return i&&!n?(w.verbose("Browser was found to be iOS",e),!0):!1},mobile:function(){var e=navigator.userAgent,i=e.match(F.mobile);return i?(w.verbose("Browser was found to be mobile",e),!0):(w.verbose("Browser is not mobile, using regular transition",e),!1)},hidden:function(){return!w.is.visible()},visible:function(){return H.hasClass(S.visible)},open:function(){return w.is.visible()},closed:function(){return w.is.hidden()},vertical:function(){return H.hasClass(S.top)},animating:function(){return D.hasClass(S.animating)},rtl:function(){return w.cache.rtl===t&&(w.cache.rtl="rtl"==H.css("direction")),w.cache.rtl}},setting:function(i,n){if(w.debug("Changing setting",i,n),e.isPlainObject(i))e.extend(!0,T,i);else{if(n===t)return T[i];T[i]=n}},internal:function(i,n){if(e.isPlainObject(i))e.extend(!0,w,i);else{if(n===t)return w[i];w[i]=n}},debug:function(){T.debug&&(T.performance?w.performance.log(arguments):(w.debug=Function.prototype.bind.call(console.info,console,T.name+":"),w.debug.apply(console,arguments)))},verbose:function(){T.verbose&&T.debug&&(T.performance?w.performance.log(arguments):(w.verbose=Function.prototype.bind.call(console.info,console,T.name+":"),w.verbose.apply(console,arguments)))},error:function(){w.error=Function.prototype.bind.call(console.error,console,T.name+":"),w.error.apply(console,arguments)},performance:{log:function(e){var i,n,t;T.performance&&(i=(new Date).getTime(),t=f||i,n=i-t,f=i,b.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:z,"Execution Time":n})),clearTimeout(w.performance.timer),w.performance.timer=setTimeout(w.performance.display,500)},display:function(){var i=T.name+":",n=0;f=!1,clearTimeout(w.performance.timer),e.each(b,function(e,i){n+=i["Execution Time"]}),i+=" "+n+"ms",d&&(i+=" '"+d+"'"),(console.group!==t||console.table!==t)&&b.length>0&&(console.groupCollapsed(i),console.table?console.table(b):e.each(b,function(e,i){console.log(i.Name+": "+i["Execution Time"]+"ms")}),console.groupEnd()),b=[]}},invoke:function(i,n,o){var s,a,l,c=B;return n=n||g,o=z||o,"string"==typeof i&&c!==t&&(i=i.split(/[\. ]/),s=i.length-1,e.each(i,function(n,o){var r=n!=s?o+i[n+1].charAt(0).toUpperCase()+i[n+1].slice(1):i;if(e.isPlainObject(c[r])&&n!=s)c=c[r];else{if(c[r]!==t)return a=c[r],!1;if(!e.isPlainObject(c[o])||n==s)return c[o]!==t?(a=c[o],!1):(w.error(O.method,i),!1);c=c[o]}})),e.isFunction(a)?l=a.apply(o,n):a!==t&&(l=a),e.isArray(r)?r.push(l):r!==t?r=[r,l]:l!==t&&(r=l),a}},h?(B===t&&w.initialize(),w.invoke(m)):(B!==t&&w.invoke("destroy"),w.initialize())}),r!==t?r:this},e.fn.sidebar.settings={name:"Sidebar",namespace:"sidebar",debug:!1,verbose:!1,performance:!0,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:!1,closable:!0,dimPage:!0,scrollLock:!1,returnScroll:!1,delaySetup:!1,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); \ No newline at end of file diff --git a/semantic/components/site.css b/semantic/components/site.css new file mode 100755 index 0000000..2377bae --- /dev/null +++ b/semantic/components/site.css @@ -0,0 +1,161 @@ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Page +*******************************/ + +@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'); +html, +body { + height: 100%; +} +html { + font-size: 14px; +} +body { + margin: 0px; + padding: 0px; + overflow-x: hidden; + min-width: 320px; + background: #ffffff; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); + font-smoothing: antialiased; +} + + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + line-height: 1.2857em; + margin: calc(2rem - 0.14285em ) 0em 1rem; + font-weight: bold; + padding: 0em; +} +h1 { + min-height: 1rem; + font-size: 2rem; +} +h2 { + font-size: 1.714rem; +} +h3 { + font-size: 1.28rem; +} +h4 { + font-size: 1.071rem; +} +h5 { + font-size: 1rem; +} +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + + +/******************************* + Text +*******************************/ + +p { + margin: 0em 0em 1em; + line-height: 1.4285em; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: #4183c4; + text-decoration: none; +} +a:hover { + color: #1e70bf; + text-decoration: none; +} + + +/******************************* + Highlighting +*******************************/ + + +/* Site */ +::-webkit-selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} +::-moz-selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} +::selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} + +/* Form */ +textarea::-webkit-selection, +input::-webkit-selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} +textarea::-moz-selection, +input::-moz-selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} +textarea::selection, +input::selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} + + +/******************************* + Global Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/site.js b/semantic/components/site.js new file mode 100755 index 0000000..5b15af2 --- /dev/null +++ b/semantic/components/site.js @@ -0,0 +1,487 @@ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +;(function ( $, window, document, undefined ) { + +$.site = $.fn.site = function(parameters) { + var + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.site.settings, parameters) + : $.extend({}, $.site.settings), + + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $document = $(document), + $module = $document, + element = this, + instance = $module.data(moduleNamespace), + + module, + returnedValue + ; + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function() { + module.fix.console(); + module.fix.requestAnimationFrame(); + }, + + fix: { + console: function() { + module.debug('Normalizing window.console'); + if (console === undefined || console.log === undefined) { + module.verbose('Console not available, normalizing events'); + module.disable.console(); + } + if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') { + module.verbose('Console group not available, normalizing events'); + window.console.group = function() {}; + window.console.groupEnd = function() {}; + window.console.groupCollapsed = function() {}; + } + if (typeof console.markTimeline == 'undefined') { + module.verbose('Mark timeline not available, normalizing events'); + window.console.markTimeline = function() {}; + } + }, + consoleClear: function() { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function() {}; + }, + requestAnimationFrame: function() { + module.debug('Normalizing requestAnimationFrame'); + if(window.requestAnimationFrame === undefined) { + module.debug('RequestAnimationFrame not available, normalizing event'); + window.requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + } + } + }, + + moduleExists: function(name) { + return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); + }, + + enabled: { + modules: function(modules) { + var + enabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(module.moduleExists(name)) { + enabledModules.push(name); + } + }); + return enabledModules; + } + }, + + disabled: { + modules: function(modules) { + var + disabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(!module.moduleExists(name)) { + disabledModules.push(name); + } + }); + return disabledModules; + } + }, + + change: { + setting: function(setting, value, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? (modules === 'all') + ? settings.modules + : [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + namespace = (module.moduleExists(name)) + ? $.fn[name].settings.namespace || false + : true, + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', setting, value, name); + $.fn[name].settings[setting] = value; + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 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 100755 index 0000000..9bb3f4e --- /dev/null +++ b/semantic/components/site.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.2857em;margin:calc(2rem - .14285em) 0 1rem;font-weight:700;padding:0}h1{min-height:1rem;font-size:2rem}h2{font-size:1.714rem}h3{font-size:1.28rem}h4{font-size:1.071rem}h5{font-size:1rem}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,p:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,p:last-child{margin-bottom:0}p{margin:0 0 1em;line-height:1.4285em}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)} \ No newline at end of file diff --git a/semantic/components/site.min.js b/semantic/components/site.min.js new file mode 100755 index 0000000..6bc892e --- /dev/null +++ b/semantic/components/site.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,n,o,t){e.site=e.fn.site=function(i){var s,r,a=(new Date).getTime(),c=[],u=arguments[0],l="string"==typeof u,m=[].slice.call(arguments,1),d=e.isPlainObject(i)?e.extend(!0,{},e.site.settings,i):e.extend({},e.site.settings),f=d.namespace,g=d.error,b="module-"+f,p=e(o),v=p,h=this,y=v.data(b);return s={initialize:function(){s.instantiate()},instantiate:function(){s.verbose("Storing instance of site",s),y=s,v.data(b,s)},normalize:function(){s.fix.console(),s.fix.requestAnimationFrame()},fix:{console:function(){s.debug("Normalizing window.console"),(console===t||console.log===t)&&(s.verbose("Console not available, normalizing events"),s.disable.console()),("undefined"==typeof console.group||"undefined"==typeof console.groupEnd||"undefined"==typeof console.groupCollapsed)&&(s.verbose("Console group not available, normalizing events"),n.console.group=function(){},n.console.groupEnd=function(){},n.console.groupCollapsed=function(){}),"undefined"==typeof console.markTimeline&&(s.verbose("Mark timeline not available, normalizing events"),n.console.markTimeline=function(){})},consoleClear:function(){s.debug("Disabling programmatic console clearing"),n.console.clear=function(){}},requestAnimationFrame:function(){s.debug("Normalizing requestAnimationFrame"),n.requestAnimationFrame===t&&(s.debug("RequestAnimationFrame not available, normalizing event"),n.requestAnimationFrame=n.requestAnimationFrame||n.mozRequestAnimationFrame||n.webkitRequestAnimationFrame||n.msRequestAnimationFrame||function(e){setTimeout(e,0)})}},moduleExists:function(n){return e.fn[n]!==t&&e.fn[n].settings!==t},enabled:{modules:function(n){var o=[];return n=n||d.modules,e.each(n,function(e,n){s.moduleExists(n)&&o.push(n)}),o}},disabled:{modules:function(n){var o=[];return n=n||d.modules,e.each(n,function(e,n){s.moduleExists(n)||o.push(n)}),o}},change:{setting:function(n,o,i,r){i="string"==typeof i?"all"===i?d.modules:[i]:i||d.modules,r=r!==t?r:!0,e.each(i,function(t,i){var a,c=s.moduleExists(i)?e.fn[i].settings.namespace||!1:!0;s.moduleExists(i)&&(s.verbose("Changing default setting",n,o,i),e.fn[i].settings[n]=o,r&&c&&(a=e(":data(module-"+c+")"),a.length>0&&(s.verbose("Modifying existing settings",a),a[i]("setting",n,o))))})},settings:function(n,o,i){o="string"==typeof o?[o]:o||d.modules,i=i!==t?i:!0,e.each(o,function(o,t){var r;s.moduleExists(t)&&(s.verbose("Changing default setting",n,t),e.extend(!0,e.fn[t].settings,n),i&&f&&(r=e(":data(module-"+f+")"),r.length>0&&(s.verbose("Modifying existing settings",r),r[t]("setting",n))))})}},enable:{console:function(){s.console(!0)},debug:function(e,n){e=e||d.modules,s.debug("Enabling debug for modules",e),s.change.setting("debug",!0,e,n)},verbose:function(e,n){e=e||d.modules,s.debug("Enabling verbose debug for modules",e),s.change.setting("verbose",!0,e,n)}},disable:{console:function(){s.console(!1)},debug:function(e,n){e=e||d.modules,s.debug("Disabling debug for modules",e),s.change.setting("debug",!1,e,n)},verbose:function(e,n){e=e||d.modules,s.debug("Disabling verbose debug for modules",e),s.change.setting("verbose",!1,e,n)}},console:function(e){if(e){if(y.cache.console===t)return void s.error(g.console);s.debug("Restoring console function"),n.console=y.cache.console}else s.debug("Disabling console function"),y.cache.console=n.console,n.console={clear:function(){},error:function(){},group:function(){},groupCollapsed:function(){},groupEnd:function(){},info:function(){},log:function(){},markTimeline:function(){},warn:function(){}}},destroy:function(){s.verbose("Destroying previous site for",v),v.removeData(b)},cache:{},setting:function(n,o){if(e.isPlainObject(n))e.extend(!0,d,n);else{if(o===t)return d[n];d[n]=o}},internal:function(n,o){if(e.isPlainObject(n))e.extend(!0,s,n);else{if(o===t)return s[n];s[n]=o}},debug:function(){d.debug&&(d.performance?s.performance.log(arguments):(s.debug=Function.prototype.bind.call(console.info,console,d.name+":"),s.debug.apply(console,arguments)))},verbose:function(){d.verbose&&d.debug&&(d.performance?s.performance.log(arguments):(s.verbose=Function.prototype.bind.call(console.info,console,d.name+":"),s.verbose.apply(console,arguments)))},error:function(){s.error=Function.prototype.bind.call(console.error,console,d.name+":"),s.error.apply(console,arguments)},performance:{log:function(e){var n,o,t;d.performance&&(n=(new Date).getTime(),t=a||n,o=n-t,a=n,c.push({Element:h,Name:e[0],Arguments:[].slice.call(e,1)||"","Execution Time":o})),clearTimeout(s.performance.timer),s.performance.timer=setTimeout(s.performance.display,500)},display:function(){var n=d.name+":",o=0;a=!1,clearTimeout(s.performance.timer),e.each(c,function(e,n){o+=n["Execution Time"]}),n+=" "+o+"ms",(console.group!==t||console.table!==t)&&c.length>0&&(console.groupCollapsed(n),console.table?console.table(c):e.each(c,function(e,n){console.log(n.Name+": "+n["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(n,o,i){var a,c,u,l=y;return o=o||m,i=h||i,"string"==typeof n&&l!==t&&(n=n.split(/[\. ]/),a=n.length-1,e.each(n,function(o,i){var r=o!=a?i+n[o+1].charAt(0).toUpperCase()+n[o+1].slice(1):n;if(e.isPlainObject(l[r])&&o!=a)l=l[r];else{if(l[r]!==t)return c=l[r],!1;if(!e.isPlainObject(l[i])||o==a)return l[i]!==t?(c=l[i],!1):(s.error(g.method,n),!1);l=l[i]}})),e.isFunction(c)?u=c.apply(i,o):c!==t&&(u=c),e.isArray(r)?r.push(u):r!==t?r=[r,u]:u!==t&&(r=u),c}},l?(y===t&&s.initialize(),s.invoke(u)):(y!==t&&s.destroy(),s.initialize()),r!==t?r:this},e.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:!1,verbose:!1,performance:!0,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:{}}},e.extend(e.expr[":"],{data:e.expr.createPseudo?e.expr.createPseudo(function(n){return function(o){return!!e.data(o,n)}}):function(n,o,t){return!!e.data(n,t[3])}})}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/state.js b/semantic/components/state.js new file mode 100755 index 0000000..dc5b59f --- /dev/null +++ b/semantic/components/state.js @@ -0,0 +1,695 @@ +/*! + * # Semantic UI 2.1.7 - State + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.state = function(parameters) { + var + $allModules = $(this), + + 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() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.state.settings, parameters) + : $.extend({}, $.fn.state.settings), + + error = settings.error, + metadata = settings.metadata, + className = settings.className, + namespace = settings.namespace, + states = settings.states, + text = settings.text, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $module = $(this), + + element = this, + instance = $module.data(moduleNamespace), + + module + ; + module = { + + initialize: function() { + module.verbose('Initializing module'); + + // allow module to guess desired state based on element + if(settings.automatic) { + module.add.defaults(); + } + + // bind events with delegated events + if(settings.context && moduleSelector !== '') { + $(settings.context) + .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) + .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) + .on(moduleSelector, 'click' + eventNamespace, module.toggle.state) + ; + } + else { + $module + .on('mouseenter' + eventNamespace, module.change.text) + .on('mouseleave' + eventNamespace, module.reset.text) + .on('click' + eventNamespace, module.toggle.state) + ; + } + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', instance); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $module = $(element); + }, + + add: { + defaults: function() { + var + userStates = parameters && $.isPlainObject(parameters.states) + ? parameters.states + : {} + ; + $.each(settings.defaults, function(type, typeStates) { + if( module.is[type] !== undefined && module.is[type]() ) { + module.verbose('Adding default states', type, element); + $.extend(settings.states, typeStates, userStates); + } + }); + } + }, + + is: { + + active: function() { + return $module.hasClass(className.active); + }, + loading: function() { + return $module.hasClass(className.loading); + }, + inactive: function() { + return !( $module.hasClass(className.active) ); + }, + state: function(state) { + if(className[state] === undefined) { + return false; + } + return $module.hasClass( className[state] ); + }, + + enabled: function() { + return !( $module.is(settings.filter.active) ); + }, + disabled: function() { + return ( $module.is(settings.filter.active) ); + }, + textEnabled: function() { + return !( $module.is(settings.filter.text) ); + }, + + // definitions for automatic type detection + button: function() { + return $module.is('.button:not(a, .submit)'); + }, + input: function() { + return $module.is('input'); + }, + progress: function() { + return $module.is('.ui.progress'); + } + }, + + allow: function(state) { + module.debug('Now allowing state', state); + states[state] = true; + }, + disallow: function(state) { + module.debug('No longer allowing', state); + states[state] = false; + }, + + allows: function(state) { + return states[state] || false; + }, + + enable: function() { + $module.removeClass(className.disabled); + }, + + disable: function() { + $module.addClass(className.disabled); + }, + + setState: function(state) { + if(module.allows(state)) { + $module.addClass( className[state] ); + } + }, + + removeState: function(state) { + if(module.allows(state)) { + $module.removeClass( className[state] ); + } + }, + + toggle: { + state: function() { + var + apiRequest, + requestCancelled + ; + if( module.allows('active') && module.is.enabled() ) { + module.refresh(); + if($.fn.api !== undefined) { + apiRequest = $module.api('get request'); + requestCancelled = $module.api('was cancelled'); + if( requestCancelled ) { + module.debug('API Request cancelled by beforesend'); + settings.activateTest = function(){ return false; }; + settings.deactivateTest = function(){ return false; }; + } + else if(apiRequest) { + module.listenTo(apiRequest); + return; + } + } + module.change.state(); + } + } + }, + + listenTo: function(apiRequest) { + module.debug('API request detected, waiting for state signal', apiRequest); + if(apiRequest) { + if(text.loading) { + module.update.text(text.loading); + } + $.when(apiRequest) + .then(function() { + if(apiRequest.state() == 'resolved') { + module.debug('API request succeeded'); + settings.activateTest = function(){ return true; }; + settings.deactivateTest = function(){ return true; }; + } + else { + module.debug('API request failed'); + settings.activateTest = function(){ return false; }; + settings.deactivateTest = function(){ return false; }; + } + module.change.state(); + }) + ; + } + }, + + // checks whether active/inactive state can be given + change: { + + state: function() { + module.debug('Determining state change direction'); + // inactive to active change + if( module.is.inactive() ) { + module.activate(); + } + else { + module.deactivate(); + } + if(settings.sync) { + module.sync(); + } + settings.onChange.call(element); + }, + + text: function() { + if( module.is.textEnabled() ) { + if(module.is.disabled() ) { + module.verbose('Changing text to disabled text', text.hover); + module.update.text(text.disabled); + } + else if( module.is.active() ) { + if(text.hover) { + module.verbose('Changing text to hover text', text.hover); + module.update.text(text.hover); + } + else if(text.deactivate) { + module.verbose('Changing text to deactivating text', text.deactivate); + module.update.text(text.deactivate); + } + } + else { + if(text.hover) { + module.verbose('Changing text to hover text', text.hover); + module.update.text(text.hover); + } + else if(text.activate){ + module.verbose('Changing text to activating text', text.activate); + module.update.text(text.activate); + } + } + } + } + + }, + + activate: function() { + if( settings.activateTest.call(element) ) { + module.debug('Setting state to active'); + $module + .addClass(className.active) + ; + module.update.text(text.active); + settings.onActivate.call(element); + } + }, + + deactivate: function() { + if( settings.deactivateTest.call(element) ) { + module.debug('Setting state to inactive'); + $module + .removeClass(className.active) + ; + module.update.text(text.inactive); + settings.onDeactivate.call(element); + } + }, + + sync: function() { + module.verbose('Syncing other buttons to current state'); + if( module.is.active() ) { + $allModules + .not($module) + .state('activate'); + } + else { + $allModules + .not($module) + .state('deactivate') + ; + } + }, + + get: { + text: function() { + return (settings.selector.text) + ? $module.find(settings.selector.text).text() + : $module.html() + ; + }, + textFor: function(state) { + return text[state] || false; + } + }, + + flash: { + text: function(text, duration, callback) { + var + previousText = module.get.text() + ; + module.debug('Flashing text message', text, duration); + text = text || settings.text.flash; + duration = duration || settings.flashDuration; + callback = callback || function() {}; + module.update.text(text); + setTimeout(function(){ + module.update.text(previousText); + callback.call(element); + }, duration); + } + }, + + reset: { + // on mouseout sets text to previous value + text: function() { + var + activeText = text.active || $module.data(metadata.storedText), + inactiveText = text.inactive || $module.data(metadata.storedText) + ; + if( module.is.textEnabled() ) { + if( module.is.active() && activeText) { + module.verbose('Resetting active text', activeText); + module.update.text(activeText); + } + else if(inactiveText) { + module.verbose('Resetting inactive text', activeText); + module.update.text(inactiveText); + } + } + } + }, + + update: { + text: function(text) { + var + currentText = module.get.text() + ; + if(text && text !== currentText) { + module.debug('Updating text', text); + if(settings.selector.text) { + $module + .data(metadata.storedText, text) + .find(settings.selector.text) + .text(text) + ; + } + else { + $module + .data(metadata.storedText, text) + .html(text) + ; + } + } + else { + module.debug('Text is already set, ignoring update', text); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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.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 100755 index 0000000..623fab2 --- /dev/null +++ b/semantic/components/state.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - State + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,n,a){"use strict";e.fn.state=function(t){var i,o=e(this),s=o.selector||"",r=("ontouchstart"in n.documentElement,(new Date).getTime()),c=[],u=arguments[0],l="string"==typeof u,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),g=f.error,v=f.metadata,b=f.className,m=f.namespace,x=f.states,p=f.text,h="."+m,T=m+"-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"+h,n.change.text).on(s,"mouseleave"+h,n.reset.text).on(s,"click"+h,n.toggle.state):y.on("mouseenter"+h,n.change.text).on("mouseleave"+h,n.reset.text).on("click"+h,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(h).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?!1: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),x[e]=!0},disallow:function(e){n.debug("No longer allowing",e),x[e]=!1},allows:function(e){return x[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,i;if(n.allows("active")&&n.is.enabled()){if(n.refresh(),e.fn.api!==a)if(t=y.api("get request"),i=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&&(p.loading&&n.update.text(p.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",p.hover),n.update.text(p.disabled)):n.is.active()?p.hover?(n.verbose("Changing text to hover text",p.hover),n.update.text(p.hover)):p.deactivate&&(n.verbose("Changing text to deactivating text",p.deactivate),n.update.text(p.deactivate)):p.hover?(n.verbose("Changing text to hover text",p.hover),n.update.text(p.hover)):p.activate&&(n.verbose("Changing text to activating text",p.activate),n.update.text(p.activate)))}},activate:function(){f.activateTest.call(w)&&(n.debug("Setting state to active"),y.addClass(b.active),n.update.text(p.active),f.onActivate.call(w))},deactivate:function(){f.deactivateTest.call(w)&&(n.debug("Setting state to inactive"),y.removeClass(b.active),n.update.text(p.inactive),f.onDeactivate.call(w))},sync:function(){n.verbose("Syncing other buttons to current state"),o.not(y).state(n.is.active()?"activate":"deactivate")},get:{text:function(){return f.selector.text?y.find(f.selector.text).text():y.html()},textFor:function(e){return p[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=p.active||y.data(v.storedText),t=p.inactive||y.data(v.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(v.storedText,e).find(f.selector.text).text(e):y.data(v.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];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.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.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(){n.error=Function.prototype.bind.call(console.error,console,f.name+":"),n.error.apply(console,arguments)},performance:{log:function(e){var t,a,i;f.performance&&(t=(new Date).getTime(),i=r||t,a=t-i,r=t,c.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;r=!1,clearTimeout(n.performance.timer),e.each(c,function(e,t){i+=t["Execution Time"]}),t+=" "+i+"ms",s&&(t+=" '"+s+"'"),(console.group!==a||console.table!==a)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,o,s){var r,c,u,l=C;return o=o||d,s=w||s,"string"==typeof t&&l!==a&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(i,o){var s=i!=r?o+t[i+1].charAt(0).toUpperCase()+t[i+1].slice(1):t;if(e.isPlainObject(l[s])&&i!=r)l=l[s];else{if(l[s]!==a)return c=l[s],!1;if(!e.isPlainObject(l[o])||i==r)return l[o]!==a?(c=l[o],!1):(n.error(g.method,t),!1);l=l[o]}})),e.isFunction(c)?u=c.apply(s,o):c!==a&&(u=c),e.isArray(i)?i.push(u):i!==a?i=[i,u]:u!==a&&(i=u),c}},l?(C===a&&n.initialize(),n.invoke(u)):(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 100755 index 0000000..a43e9c6 --- /dev/null +++ b/semantic/components/statistic.css @@ -0,0 +1,584 @@ +/*! + * # Semantic UI 2.1.7 - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Statistic +*******************************/ + + +/* Standalone */ +.ui.statistic { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.ui.statistics > .statistic { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em 1.5em 2em; + max-width: auto; +} +.ui.statistics { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1em -1.5em -2em; +} + +/* Clearing */ +.ui.statistics:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} +.ui.statistics:first-child { + margin-top: 0em; +} +.ui.statistics:last-child { + margin-bottom: 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 -2em; +} +.ui.ten.statistics .statistic { + min-width: 10%; + margin: 0em 0em 2em; +} +.ui.nine.statistics { + margin: 0em 0em -2em; +} +.ui.nine.statistics .statistic { + min-width: 11.11111111%; + margin: 0em 0em 2em; +} +.ui.eight.statistics { + margin: 0em 0em -2em; +} +.ui.eight.statistics .statistic { + min-width: 12.5%; + margin: 0em 0em 2em; +} +.ui.seven.statistics { + margin: 0em 0em -2em; +} +.ui.seven.statistics .statistic { + min-width: 14.28571429%; + margin: 0em 0em 2em; +} +.ui.six.statistics { + margin: 0em 0em -2em; +} +.ui.six.statistics .statistic { + min-width: 16.66666667%; + margin: 0em 0em 2em; +} +.ui.five.statistics { + margin: 0em 0em -2em; +} +.ui.five.statistics .statistic { + min-width: 20%; + margin: 0em 0em 2em; +} +.ui.four.statistics { + margin: 0em 0em -2em; +} +.ui.four.statistics .statistic { + min-width: 25%; + margin: 0em 0em 2em; +} +.ui.three.statistics { + margin: 0em 0em -2em; +} +.ui.three.statistics .statistic { + min-width: 33.33333333%; + margin: 0em 0em 2em; +} +.ui.two.statistics { + margin: 0em 0em -2em; +} +.ui.two.statistics .statistic { + min-width: 50%; + margin: 0em 0em 2em; +} +.ui.one.statistics { + margin: 0em 0em -2em; +} +.ui.one.statistics .statistic { + min-width: 100%; + margin: 0em 0em 2em; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.ui.horizontal.statistics { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em; + max-width: none; +} +.ui.horizontal.statistics .statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -webkit-align-items: 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; +} +.ui.mini.horizontal.statistics .statistic > .value, +.ui.mini.horizontal.statistic > .value { + font-size: 1.5rem; +} +.ui.mini.statistics .statistic > .text.value, +.ui.mini.statistic > .text.value { + font-size: 1rem; +} + +/* Tiny */ +.ui.tiny.statistics .statistic > .value, +.ui.tiny.statistic > .value { + font-size: 2rem; +} +.ui.tiny.horizontal.statistics .statistic > .value, +.ui.tiny.horizontal.statistic > .value { + font-size: 2rem; +} +.ui.tiny.statistics .statistic > .text.value, +.ui.tiny.statistic > .text.value { + font-size: 1rem; +} + +/* Small */ +.ui.small.statistics .statistic > .value, +.ui.small.statistic > .value { + font-size: 3rem; +} +.ui.small.horizontal.statistics .statistic > .value, +.ui.small.horizontal.statistic > .value { + font-size: 2rem; +} +.ui.small.statistics .statistic > .text.value, +.ui.small.statistic > .text.value { + font-size: 1rem; +} + +/* Medium */ +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-size: 4rem; +} +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + font-size: 3rem; +} +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + font-size: 2rem; +} + +/* Large */ +.ui.large.statistics .statistic > .value, +.ui.large.statistic > .value { + font-size: 5rem; +} +.ui.large.horizontal.statistics .statistic > .value, +.ui.large.horizontal.statistic > .value { + font-size: 4rem; +} +.ui.large.statistics .statistic > .text.value, +.ui.large.statistic > .text.value { + font-size: 2.5rem; +} + +/* Huge */ +.ui.huge.statistics .statistic > .value, +.ui.huge.statistic > .value { + font-size: 6rem; +} +.ui.huge.horizontal.statistics .statistic > .value, +.ui.huge.horizontal.statistic > .value { + font-size: 5rem; +} +.ui.huge.statistics .statistic > .text.value, +.ui.huge.statistic > .text.value { + font-size: 2.5rem; +} + + +/******************************* + Theme Overrides +*******************************/ + + + +/******************************* + User Variable Overrides +*******************************/ + diff --git a/semantic/components/statistic.min.css b/semantic/components/statistic.min.css new file mode 100755 index 0000000..495cee4 --- /dev/null +++ b/semantic/components/statistic.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.statistic{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-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{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.statistics>.statistic{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0 1.5em 2em;max-width:auto}.ui.statistics{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1em -1.5em -2em}.ui.statistics:after{display:block;content:' ';height:0;clear:both;overflow:hidden;visibility:hidden}.ui.statistics:first-child{margin-top:0}.ui.statistics:last-child{margin-bottom:0}.ui.statistic>.value,.ui.statistics .statistic>.value{font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;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.statistic>.value~.label,.ui.statistics .statistic>.label~.value,.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 -2em}.ui.ten.statistics .statistic{min-width:10%;margin:0 0 2em}.ui.nine.statistics{margin:0 0 -2em}.ui.nine.statistics .statistic{min-width:11.11111111%;margin:0 0 2em}.ui.eight.statistics{margin:0 0 -2em}.ui.eight.statistics .statistic{min-width:12.5%;margin:0 0 2em}.ui.seven.statistics{margin:0 0 -2em}.ui.seven.statistics .statistic{min-width:14.28571429%;margin:0 0 2em}.ui.six.statistics{margin:0 0 -2em}.ui.six.statistics .statistic{min-width:16.66666667%;margin:0 0 2em}.ui.five.statistics{margin:0 0 -2em}.ui.five.statistics .statistic{min-width:20%;margin:0 0 2em}.ui.four.statistics{margin:0 0 -2em}.ui.four.statistics .statistic{min-width:25%;margin:0 0 2em}.ui.three.statistics{margin:0 0 -2em}.ui.three.statistics .statistic{min-width:33.33333333%;margin:0 0 2em}.ui.two.statistics{margin:0 0 -2em}.ui.two.statistics .statistic{min-width:50%;margin:0 0 2em}.ui.one.statistics{margin:0 0 -2em}.ui.one.statistics .statistic{min-width:100%;margin:0 0 2em}.ui.horizontal.statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.ui.horizontal.statistics{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin:0;max-width:none}.ui.horizontal.statistics .statistic{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items: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>.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.horizontal.statistic>.value,.ui.mini.horizontal.statistics .statistic>.value,.ui.mini.statistic>.value,.ui.mini.statistics .statistic>.value{font-size:1.5rem}.ui.mini.statistic>.text.value,.ui.mini.statistics .statistic>.text.value{font-size:1rem}.ui.tiny.horizontal.statistic>.value,.ui.tiny.horizontal.statistics .statistic>.value,.ui.tiny.statistic>.value,.ui.tiny.statistics .statistic>.value{font-size:2rem}.ui.tiny.statistic>.text.value,.ui.tiny.statistics .statistic>.text.value{font-size:1rem}.ui.small.statistic>.value,.ui.small.statistics .statistic>.value{font-size:3rem}.ui.small.horizontal.statistic>.value,.ui.small.horizontal.statistics .statistic>.value{font-size:2rem}.ui.small.statistic>.text.value,.ui.small.statistics .statistic>.text.value{font-size:1rem}.ui.statistic>.value,.ui.statistics .statistic>.value{font-size:4rem}.ui.horizontal.statistic>.value,.ui.horizontal.statistics .statistic>.value{display:inline-block;vertical-align:middle;font-size:3rem}.ui.statistic>.text.value,.ui.statistics .statistic>.text.value{font-size:2rem}.ui.large.statistic>.value,.ui.large.statistics .statistic>.value{font-size:5rem}.ui.large.horizontal.statistic>.value,.ui.large.horizontal.statistics .statistic>.value{font-size:4rem}.ui.large.statistic>.text.value,.ui.large.statistics .statistic>.text.value{font-size:2.5rem}.ui.huge.statistic>.value,.ui.huge.statistics .statistic>.value{font-size:6rem}.ui.huge.horizontal.statistic>.value,.ui.huge.horizontal.statistics .statistic>.value{font-size:5rem}.ui.huge.statistic>.text.value,.ui.huge.statistics .statistic>.text.value{font-size:2.5rem} \ No newline at end of file diff --git a/semantic/components/step.css b/semantic/components/step.css new file mode 100755 index 0000000..5fe2e59 --- /dev/null +++ b/semantic/components/step.css @@ -0,0 +1,627 @@ +/*! + * # Semantic UI 2.1.7 - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 1em 0em; + background: ''; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + vertical-align: middle; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0em 0em; + padding: 1.14285714em 2em; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + 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, box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, 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, 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-transform: translateY(-50%) translateX(50%) rotate(-45deg); + -ms-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; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} +.ui.steps .step > .icon ~ .content { + -webkit-box-flex: 1 0 auto; + -webkit-flex-grow: 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, "."); + -webkit-align-self: middle; + -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; + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + -webkit-box-pack: start; + -webkit-justify-content: flex-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 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + .ui.steps .step { + width: 100% !important; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0em; + padding: 1.14285714em 2em; + } + .ui.steps .step:first-child { + padding: 1.14285714em 2em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + } + .ui.steps .step:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + } + +/* Arrow */ + .ui.steps .step:after { + display: none !important; + } + +/* Content */ + .ui.steps .step .content { + text-align: center; + } + +/* Icon */ + .ui.steps .step > .icon, + .ui.ordered.steps .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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + +/* Steps */ + .ui[class*="tablet stackable"].steps .step { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + + +/* Top */ +.ui.attached.steps { + width: calc(100% + 2px ) !important; + margin: 0em -1px -1px; + max-width: calc(100% + 2px ); + 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: -1px -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 { + -webkit-flex-wrap: nowrap; + -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.500%; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.small.step, +.ui.small.steps .step { + font-size: 0.92857143rem; +} +.ui.step, +.ui.steps .step { + font-size: 1rem; +} +.ui.large.step, +.ui.large.steps .step { + font-size: 1.14285714rem; +} + + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjILAIQyCKI0cjRyNhI0ZgsARDsIBiYCCwACsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsIBiYSMgILAEJiNGYTgbI7AIQ0awAiWwCENHI0cjYWAgsARDsIBiYCMgsAArI7AEQ2CwACuwBSVhsAUlsIBisAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wMiywABYgICCwBSYgLkcjRyNhIzw4LbAzLLAAFiCwCCNCICAgRiNHsAArI2E4LbA0LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWGwAUVjIyBYYhshWWOwAUViYCMuIyAgPIo4IyFZLbA1LLAAFiCwCEMgLkcjRyNhIGCwIGBmsIBiIyAgPIo4LbA2LCMgLkawAiVGUlggPFkusSYBFCstsDcsIyAuRrACJUZQWCA8WS6xJgEUKy2wOCwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xJgEUKy2wOSywMCsjIC5GsAIlRlJYIDxZLrEmARQrLbA6LLAxK4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrEmARQrsARDLrAmKy2wOyywABawBCWwBCYgLkcjRyNhsAZFKyMgPCAuIzixJgEUKy2wPCyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhsAIlRmE4IyA8IzgbISAgRiNHsAArI2E4IVmxJgEUKy2wPSywMCsusSYBFCstsD4ssDErISMgIDywBCNCIzixJgEUK7AEQy6wJistsD8ssAAVIEewACNCsgABARUUEy6wLCotsEAssAAVIEewACNCsgABARUUEy6wLCotsEEssQABFBOwLSotsEIssC8qLbBDLLAAFkUjIC4gRoojYTixJgEUKy2wRCywCCNCsEMrLbBFLLIAADwrLbBGLLIAATwrLbBHLLIBADwrLbBILLIBATwrLbBJLLIAAD0rLbBKLLIAAT0rLbBLLLIBAD0rLbBMLLIBAT0rLbBNLLIAADkrLbBOLLIAATkrLbBPLLIBADkrLbBQLLIBATkrLbBRLLIAADsrLbBSLLIAATsrLbBTLLIBADsrLbBULLIBATsrLbBVLLIAAD4rLbBWLLIAAT4rLbBXLLIBAD4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=) 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.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 100755 index 0000000..6405f62 --- /dev/null +++ b/semantic/components/step.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;margin:1em 0;background:0 0;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:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;vertical-align:middle;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:1.14285714em 2em;background:#fff;color:rgba(0,0,0,.87);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,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease}.ui.steps .step:after{position:absolute;z-index:2;content:'';top:50%;right:0;border:solid;background-color:#fff;width:1.14285714em;height:1.14285714em;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,box-shadow .1s ease;transition:background-color .1s ease,opacity .1s ease,color .1s ease,box-shadow .1s ease;-webkit-transform:translateY(-50%) translateX(50%) rotate(-45deg);-ms-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;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;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle}.ui.steps .step>.icon~.content{-webkit-box-flex:1 0 auto;-webkit-flex-grow: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,".");-webkit-align-self:middle;-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;-webkit-align-self:middle;-ms-flex-item-align:middle;align-self:middle}.ui.vertical.steps{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:visible}.ui.vertical.steps .step{-webkit-box-pack:start;-webkit-justify-content:flex-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{top:50%;right:0;border-width:0 1px 1px 0;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{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui.steps .step{width:100%!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:0;padding:1.14285714em 2em}.ui.steps .step:first-child{padding:1.14285714em 2em;border-radius:.28571429rem .28571429rem 0 0}.ui.steps .step:last-child{border-radius:0 0 .28571429rem .28571429rem}.ui.steps .step:after{display:none!important}.ui.steps .step .content{text-align:center}.ui.ordered.steps .step:before,.ui.steps .step>.icon{margin:0 0 1rem}}.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 .active.step:after,.ui.steps .step:after{display:block}.ui.steps .active.step:last-child:after,.ui.steps .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;font-family:Step;content:'\e800'}.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:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;overflow:visible;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.ui[class*="tablet stackable"].steps .step{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-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}}.ui.fluid.steps{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%}.ui.attached.steps{width:calc(100% + 2px)!important;margin:0 -1px -1px;max-width:calc(100% + 2px);border-radius:.28571429rem .28571429rem 0 0}.ui.attached.steps .step:first-child{border-radius:.28571429rem 0 0}.ui.attached.steps .step:last-child{border-radius:0 .28571429rem 0 0}.ui.bottom.attached.steps{margin:-1px -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}.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{-webkit-flex-wrap:nowrap;-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.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}@font-face{font-family:Step;src:url(data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjILAIQyCKI0cjRyNhI0ZgsARDsIBiYCCwACsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsIBiYSMgILAEJiNGYTgbI7AIQ0awAiWwCENHI0cjYWAgsARDsIBiYCMgsAArI7AEQ2CwACuwBSVhsAUlsIBisAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wMiywABYgICCwBSYgLkcjRyNhIzw4LbAzLLAAFiCwCCNCICAgRiNHsAArI2E4LbA0LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWGwAUVjIyBYYhshWWOwAUViYCMuIyAgPIo4IyFZLbA1LLAAFiCwCEMgLkcjRyNhIGCwIGBmsIBiIyAgPIo4LbA2LCMgLkawAiVGUlggPFkusSYBFCstsDcsIyAuRrACJUZQWCA8WS6xJgEUKy2wOCwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xJgEUKy2wOSywMCsjIC5GsAIlRlJYIDxZLrEmARQrLbA6LLAxK4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrEmARQrsARDLrAmKy2wOyywABawBCWwBCYgLkcjRyNhsAZFKyMgPCAuIzixJgEUKy2wPCyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhsAIlRmE4IyA8IzgbISAgRiNHsAArI2E4IVmxJgEUKy2wPSywMCsusSYBFCstsD4ssDErISMgIDywBCNCIzixJgEUK7AEQy6wJistsD8ssAAVIEewACNCsgABARUUEy6wLCotsEAssAAVIEewACNCsgABARUUEy6wLCotsEEssQABFBOwLSotsEIssC8qLbBDLLAAFkUjIC4gRoojYTixJgEUKy2wRCywCCNCsEMrLbBFLLIAADwrLbBGLLIAATwrLbBHLLIBADwrLbBILLIBATwrLbBJLLIAAD0rLbBKLLIAAT0rLbBLLLIBAD0rLbBMLLIBAT0rLbBNLLIAADkrLbBOLLIAATkrLbBPLLIBADkrLbBQLLIBATkrLbBRLLIAADsrLbBSLLIAATsrLbBTLLIBADsrLbBULLIBATsrLbBVLLIAAD4rLbBWLLIAAT4rLbBXLLIBAD4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=) 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')} \ No newline at end of file diff --git a/semantic/components/sticky.css b/semantic/components/sticky.css new file mode 100755 index 0000000..bd76bcf --- /dev/null +++ b/semantic/components/sticky.css @@ -0,0 +1,79 @@ +/*! + * # Semantic UI 2.1.7 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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 100755 index 0000000..cda0e11 --- /dev/null +++ b/semantic/components/sticky.js @@ -0,0 +1,907 @@ +/*! + * # Semantic UI 2.1.7 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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, + 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(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() { + var + context = $context[0] + ; + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + module.verbose('DOM tree modified, updating sticky menu', mutations); + module.refresh(); + }, 100); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + observer.observe(context, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + determineContainer: function() { + $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: { + 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 < scrollContext.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.set.size(); + 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; + }, + 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, + 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) { + + 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'); + 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'); + 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.offset(); + $module + .removeClass(className.fixed) + .removeClass(className.top) + .removeClass(className.bottom) + ; + settings.onUnstick.call(element); + } + }, + + reset: function() { + module.debug('Reseting 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.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({ + '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', + + debug : false, + verbose : true, + performance : true, + + // whether to stick in the opposite direction on scroll up + pushing : false, + + context : 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, + + jitter : 5, // will only set container height if difference between context and container is larger than this number + + // 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', + 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 ); \ No newline at end of file diff --git a/semantic/components/sticky.min.css b/semantic/components/sticky.min.css new file mode 100755 index 0000000..32d93af --- /dev/null +++ b/semantic/components/sticky.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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 100755 index 0000000..f454e3e --- /dev/null +++ b/semantic/components/sticky.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,o,n){"use strict";e.fn.sticky=function(o){var i,s=e(this),r=s.selector||"",l=(new Date).getTime(),c=[],a=arguments[0],f="string"==typeof a,m=[].slice.call(arguments,1);return s.each(function(){var s,u,d,h,g=e.isPlainObject(o)?e.extend(!0,{},e.fn.sticky.settings,o):e.extend({},e.fn.sticky.settings),p=g.className,b=g.namespace,v=g.error,x="."+b,C="module-"+b,S=e(this),y=e(t),k=e(g.scrollContext),T=(S.selector||"",S.data(C)),z=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)},w=this;h={initialize:function(){h.determineContainer(),h.determineContext(),h.verbose("Initializing sticky",g,s),h.save.positions(),h.checkErrors(),h.bind.events(),g.observeChanges&&h.observeChanges(),h.instantiate()},instantiate:function(){h.verbose("Storing instance of module",h),T=h,S.data(C,h)},destroy:function(){h.verbose("Destroying previous instance"),h.reset(),d&&d.disconnect(),y.off("load"+x,h.event.load).off("resize"+x,h.event.resize),k.off("scrollchange"+x,h.event.scrollchange),S.removeData(C)},observeChanges:function(){var e=u[0];"MutationObserver"in t&&(d=new MutationObserver(function(e){clearTimeout(h.timer),h.timer=setTimeout(function(){h.verbose("DOM tree modified, updating sticky menu",e),h.refresh()},100)}),d.observe(w,{childList:!0,subtree:!0}),d.observe(e,{childList:!0,subtree:!0}),h.debug("Setting up mutation observer",d))},determineContainer:function(){s=S.offsetParent()},determineContext:function(){return u=g.context?e(g.context):s,0===u.length?void h.error(v.invalidContext,g.context,S):void 0},checkErrors:function(){return h.is.hidden()&&h.error(v.visible,S),h.cache.element.height>h.cache.context.height?(h.reset(),void h.error(v.elementSize,S)):void 0},bind:{events:function(){y.on("load"+x,h.event.load).on("resize"+x,h.event.resize),k.off("scroll"+x).on("scroll"+x,h.event.scroll).on("scrollchange"+x,h.event.scrollchange)}},event:{load:function(){h.verbose("Page contents finished loading"),z(h.refresh)},resize:function(){h.verbose("Window resized"),z(h.refresh)},scroll:function(){z(function(){k.triggerHandler("scrollchange"+x,k.scrollTop())})},scrollchange:function(e,t){h.stick(t),g.onScroll.call(w)}},refresh:function(e){h.reset(),g.context||h.determineContext(),e&&h.determineContainer(),h.save.positions(),h.stick(),g.onReposition.call(w)},supports:{sticky:function(){{var t=e("

");t[0]}return t.addClass(p.supported),t.css("position").match("sticky")}},save:{lastScroll:function(e){h.lastScroll=e},elementScroll:function(e){h.elementScroll=e},positions:function(){{var e={height:k.height()},t={margin:{top:parseInt(S.css("margin-top"),10),bottom:parseInt(S.css("margin-bottom"),10)},offset:S.offset(),width:S.outerWidth(),height:S.outerHeight()},o={offset:u.offset(),height:u.outerHeight()};({height:s.outerHeight()})}h.is.standardScroll()||(h.debug("Non-standard scroll. Removing scroll offset from element offset"),e.top=k.scrollTop(),e.left=k.scrollLeft(),t.offset.top+=e.top,o.offset.top+=e.top,t.offset.left+=e.left,o.offset.left+=e.left),h.cache={fits:t.heighte&&(t="up")),t},scrollChange:function(e){return e=e||k.scrollTop(),h.lastScroll?e-h.lastScroll:0},currentElementScroll:function(){return h.elementScroll?h.elementScroll:h.is.top()?Math.abs(parseInt(S.css("top"),10))||0:Math.abs(parseInt(S.css("bottom"),10))||0},elementScroll:function(e){e=e||k.scrollTop();var t=h.cache.element,o=h.cache.scrollContext,n=h.get.scrollChange(e),i=t.height-o.height+g.offset,s=h.get.currentElementScroll(),r=s+n;return s=h.cache.fits||0>r?0:r>i?i:r}},remove:{lastScroll:function(){delete h.lastScroll},elementScroll:function(e){delete h.elementScroll},offset:function(){S.css("margin-top","")}},set:{offset:function(){h.verbose("Setting offset on element",g.offset),S.css("margin-top",g.offset)},containerSize:function(){var e=s.get(0).tagName;"HTML"===e||"body"==e?h.determineContainer():Math.abs(s.outerHeight()-h.cache.context.height)>g.jitter&&(h.debug("Context has padding, specifying exact height for container",h.cache.context.height),s.css({height:h.cache.context.height}))},minimumSize:function(){var e=h.cache.element;s.css("min-height",e.height)},scroll:function(e){h.debug("Setting scroll on element",e),h.elementScroll!=e&&(h.is.top()&&S.css("bottom","").css("top",-e),h.is.bottom()&&S.css("top","").css("bottom",e))},size:function(){0!==h.cache.element.height&&0!==h.cache.element.width&&(w.style.setProperty("width",h.cache.element.width+"px","important"),w.style.setProperty("height",h.cache.element.height+"px","important"))}},is:{standardScroll:function(){return k[0]==t},top:function(){return S.hasClass(p.top)},bottom:function(){return S.hasClass(p.bottom)},initialPosition:function(){return!h.is.fixed()&&!h.is.bound()},hidden:function(){return!S.is(":visible")},bound:function(){return S.hasClass(p.bound)},fixed:function(){return S.hasClass(p.fixed)}},stick:function(e){var t=e||k.scrollTop(),o=h.cache,n=o.fits,i=o.element,s=o.scrollContext,r=o.context,l=h.is.bottom()&&g.pushing?g.bottomOffset:g.offset,e={top:t+l,bottom:t+l+s.height},c=(h.get.direction(e.top),n?0:h.get.elementScroll(e.top)),a=!n,f=0!==i.height;f&&(h.is.initialPosition()?e.top>=r.bottom?(h.debug("Initial element position is bottom of container"),h.bindBottom()):e.top>i.top&&(i.height+e.top-c>=r.bottom?(h.debug("Initial element position is bottom of container"),h.bindBottom()):(h.debug("Initial element position is fixed"),h.fixTop())):h.is.fixed()?h.is.top()?e.top<=i.top?(h.debug("Fixed element reached top of container"),h.setInitialPosition()):i.height+e.top-c>=r.bottom?(h.debug("Fixed element reached bottom of container"),h.bindBottom()):a&&(h.set.scroll(c),h.save.lastScroll(e.top),h.save.elementScroll(c)):h.is.bottom()&&(e.bottom-i.height<=i.top?(h.debug("Bottom fixed rail has reached top of container"),h.setInitialPosition()):e.bottom>=r.bottom?(h.debug("Bottom fixed rail has reached bottom of container"),h.bindBottom()):a&&(h.set.scroll(c),h.save.lastScroll(e.top),h.save.elementScroll(c))):h.is.bottom()&&(e.top<=i.top?(h.debug("Jumped from bottom fixed to top fixed, most likely used home/end button"),h.setInitialPosition()):g.pushing?h.is.bound()&&e.bottom<=r.bottom&&(h.debug("Fixing bottom attached element to bottom of browser."),h.fixBottom()):h.is.bound()&&e.top<=r.bottom-i.height&&(h.debug("Fixing bottom attached element to top of browser."),h.fixTop())))},bindTop:function(){h.debug("Binding element to top of parent container"),h.remove.offset(),S.css({left:"",top:"",marginBottom:""}).removeClass(p.fixed).removeClass(p.bottom).addClass(p.bound).addClass(p.top),g.onTop.call(w),g.onUnstick.call(w)},bindBottom:function(){h.debug("Binding element to bottom of parent container"),h.remove.offset(),S.css({left:"",top:""}).removeClass(p.fixed).removeClass(p.top).addClass(p.bound).addClass(p.bottom),g.onBottom.call(w),g.onUnstick.call(w)},setInitialPosition:function(){h.debug("Returning to initial position"),h.unfix(),h.unbind()},fixTop:function(){h.debug("Fixing element to top of page"),h.set.minimumSize(),h.set.offset(),S.css({left:h.cache.element.left,bottom:"",marginBottom:""}).removeClass(p.bound).removeClass(p.bottom).addClass(p.fixed).addClass(p.top),g.onStick.call(w)},fixBottom:function(){h.debug("Sticking element to bottom of page"),h.set.minimumSize(),h.set.offset(),S.css({left:h.cache.element.left,bottom:"",marginBottom:""}).removeClass(p.bound).removeClass(p.top).addClass(p.fixed).addClass(p.bottom),g.onStick.call(w)},unbind:function(){h.is.bound()&&(h.debug("Removing container bound position on element"),h.remove.offset(),S.removeClass(p.bound).removeClass(p.top).removeClass(p.bottom))},unfix:function(){h.is.fixed()&&(h.debug("Removing fixed position on element"),h.remove.offset(),S.removeClass(p.fixed).removeClass(p.top).removeClass(p.bottom),g.onUnstick.call(w))},reset:function(){h.debug("Reseting elements position"),h.unbind(),h.unfix(),h.resetCSS(),h.remove.offset(),h.remove.lastScroll()},resetCSS:function(){S.css({width:"",height:""}),s.css({height:""})},setting:function(t,o){if(e.isPlainObject(t))e.extend(!0,g,t);else{if(o===n)return g[t];g[t]=o}},internal:function(t,o){if(e.isPlainObject(t))e.extend(!0,h,t);else{if(o===n)return h[t];h[t]=o}},debug:function(){g.debug&&(g.performance?h.performance.log(arguments):(h.debug=Function.prototype.bind.call(console.info,console,g.name+":"),h.debug.apply(console,arguments)))},verbose:function(){g.verbose&&g.debug&&(g.performance?h.performance.log(arguments):(h.verbose=Function.prototype.bind.call(console.info,console,g.name+":"),h.verbose.apply(console,arguments)))},error:function(){h.error=Function.prototype.bind.call(console.error,console,g.name+":"),h.error.apply(console,arguments)},performance:{log:function(e){var t,o,n;g.performance&&(t=(new Date).getTime(),n=l||t,o=t-n,l=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:w,"Execution Time":o})),clearTimeout(h.performance.timer),h.performance.timer=setTimeout(h.performance.display,0)},display:function(){var t=g.name+":",o=0;l=!1,clearTimeout(h.performance.timer),e.each(c,function(e,t){o+=t["Execution Time"]}),t+=" "+o+"ms",r&&(t+=" '"+r+"'"),(console.group!==n||console.table!==n)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,o,s){var r,l,c,a=T;return o=o||m,s=w||s,"string"==typeof t&&a!==n&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(o,i){var s=o!=r?i+t[o+1].charAt(0).toUpperCase()+t[o+1].slice(1):t;if(e.isPlainObject(a[s])&&o!=r)a=a[s];else{if(a[s]!==n)return l=a[s],!1;if(!e.isPlainObject(a[i])||o==r)return a[i]!==n?(l=a[i],!1):!1;a=a[i]}})),e.isFunction(l)?c=l.apply(s,o):l!==n&&(c=l),e.isArray(i)?i.push(c):i!==n?i=[i,c]:c!==n&&(i=c),l}},f?(T===n&&h.initialize(),h.invoke(a)):(T!==n&&T.invoke("destroy"),h.initialize())}),i!==n?i:this},e.fn.sticky.settings={name:"Sticky",namespace:"sticky",debug:!1,verbose:!0,performance:!0,pushing:!1,context:!1,scrollContext:t,offset:0,bottomOffset:0,jitter:5,observeChanges:!1,onReposition:function(){},onScroll:function(){},onStick:function(){},onUnstick:function(){},onTop:function(){},onBottom:function(){},error:{container:"Sticky element must be inside a relative container",visible:"Element is hidden, you must call refresh after element becomes visible",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); \ No newline at end of file diff --git a/semantic/components/tab.css b/semantic/components/tab.css new file mode 100755 index 0000000..dfd66fc --- /dev/null +++ b/semantic/components/tab.css @@ -0,0 +1,92 @@ +/*! + * # Semantic UI 2.1.7 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + UI Tabs +*******************************/ + +.ui.tab { + display: none; +} + + +/******************************* + States +*******************************/ + + +/*-------------------- + Active +---------------------*/ + +.ui.tab.active, +.ui.tab.open { + display: block; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: 250px; +} +.ui.tab.loading * { + position: relative !important; + left: -10000px !important; +} +.ui.tab.loading:before, +.ui.tab.loading.segment:before { + position: absolute; + content: ''; + top: 100px; + left: 50%; + margin: -1.25em 0em 0em -1.25em; + width: 2.5em; + height: 2.5em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} +.ui.tab.loading:after, +.ui.tab.loading.segment:after { + position: absolute; + content: ''; + top: 100px; + left: 50%; + margin: -1.25em 0em 0em -1.25em; + width: 2.5em; + height: 2.5em; + -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; + box-shadow: 0px 0px 0px 1px transparent; +} + + +/******************************* + Tab Overrides +*******************************/ + + + +/******************************* + User Overrides +*******************************/ + diff --git a/semantic/components/tab.js b/semantic/components/tab.js new file mode 100755 index 0000000..d659091 --- /dev/null +++ b/semantic/components/tab.js @@ -0,0 +1,898 @@ +/*! + * # Semantic UI 2.1.7 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.fn.tab = function(parameters) { + + var + // use window context if none specified + $allModules = $.isFunction(this) + ? $(window) + : $(this), + + moduleSelector = $allModules.selector || '', + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + initializedHistory = false, + returnedValue + ; + + $allModules + .each(function() { + var + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.tab.settings, parameters) + : $.extend({}, $.fn.tab.settings), + + className = settings.className, + metadata = settings.metadata, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + settings.namespace, + moduleNamespace = 'module-' + settings.namespace, + + $module = $(this), + $context, + $tabs, + + cache = {}, + firstLoad = true, + recursionDepth = 0, + element = this, + instance = $module.data(moduleNamespace), + + activeTabPath, + parameterArray, + module, + + historyEvent + + ; + + module = { + + initialize: function() { + module.debug('Initializing tab menu item', $module); + module.fix.callbacks(); + module.determineTabs(); + + module.debug('Determining tabs', settings.context, $tabs); + // set up automatic routing + if(settings.auto) { + module.set.auto(); + } + module.bind.events(); + + if(settings.history && !initializedHistory) { + module.initializeHistory(); + initializedHistory = true; + } + + module.instantiate(); + }, + + instantiate: function () { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying tabs', $module); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + }, + + bind: { + events: function() { + // if using $.tab don't add events + if( !$.isWindow( element ) ) { + module.debug('Attaching tab activation events to element', $module); + $module + .on('click' + eventNamespace, module.event.click) + ; + } + } + }, + + determineTabs: function() { + var + $reference + ; + + // determine tab context + if(settings.context === 'parent') { + if($module.closest(selector.ui).length > 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(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) { + 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); + }, + 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.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), + isActive = $tab.hasClass(className.active) + ; + module.verbose('Showing tab content for', $tab); + if(!isActive) { + $tab + .addClass(className.active) + .siblings($tabs) + .removeClass(className.active + ' ' + className.loading) + ; + if($tab.length > 0) { + settings.onVisible.call($tab[0], tabPath); + } + } + }, + navigation: function(tabPath) { + var + $navigation = module.get.navElement(tabPath), + isActive = $navigation.hasClass(className.active) + ; + module.verbose('Activating tab navigation for', $navigation, tabPath); + if(!isActive) { + $navigation + .addClass(className.active) + .siblings($allModules) + .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) { + 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({ + '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', + + 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 + + alwaysRefresh : false, // load tab content new every tab click + cache : true, // cache the content requests to pull locally + 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 100755 index 0000000..5bc831e --- /dev/null +++ b/semantic/components/tab.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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;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 100755 index 0000000..c9c6a58 --- /dev/null +++ b/semantic/components/tab.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,a,n){"use strict";e.fn.tab=function(i){var o,r=e(e.isFunction(this)?t:this),s=r.selector||"",c=(new Date).getTime(),l=[],d=arguments[0],u="string"==typeof d,b=[].slice.call(arguments,1),g=!1;return r.each(function(){var f,h,p,m,v,y,T=e.isPlainObject(i)?e.extend(!0,{},e.fn.tab.settings,i):e.extend({},e.fn.tab.settings),L=T.className,x=T.metadata,A=T.selector,P=T.error,C="."+T.namespace,F="module-"+T.namespace,S=e(this),E={},j=!0,k=0,w=this,I=S.data(F);v={initialize:function(){v.debug("Initializing tab menu item",S),v.fix.callbacks(),v.determineTabs(),v.debug("Determining tabs",T.context,h),T.auto&&v.set.auto(),v.bind.events(),T.history&&!g&&(v.initializeHistory(),g=!0),v.instantiate()},instantiate:function(){v.verbose("Storing instance of module",v),I=v,S.data(F,v)},destroy:function(){v.debug("Destroying tabs",S),S.removeData(F).off(C)},bind:{events:function(){e.isWindow(w)||(v.debug("Attaching tab activation events to element",S),S.on("click"+C,v.event.click))}},determineTabs:function(){var t;"parent"===T.context?(S.closest(A.ui).length>0?(t=S.closest(A.ui),v.verbose("Using closest UI element as parent",t)):t=S,f=t.parent(),v.verbose("Determined parent element for creating context",f)):T.context?(f=e(T.context),v.verbose("Using selector for tab context",T.context,f)):f=e("body"),T.childrenOnly?(h=f.children(A.tabs),v.debug("Searching tab context children for tabs",f,h)):(h=f.find(A.tabs),v.debug("Searching tab context for tabs",f,h))},fix:{callbacks:function(){e.isPlainObject(i)&&(i.onTabLoad||i.onTabInit)&&(i.onTabLoad&&(i.onLoad=i.onTabLoad,delete i.onTabLoad,v.error(P.legacyLoad,i.onLoad)),i.onTabInit&&(i.onFirstLoad=i.onTabInit,delete i.onTabInit,v.error(P.legacyInit,i.onFirstLoad)),T=e.extend(!0,{},e.fn.tab.settings,i))}},initializeHistory:function(){if(v.debug("Initializing page state"),e.address===n)return v.error(P.state),!1;if("state"==T.historyType){if(v.debug("Using HTML5 to manage state"),T.path===!1)return v.error(P.path),!1;e.address.history(!0).state(T.path)}e.address.bind("change",v.event.history.change)},event:{click:function(t){var a=e(this).data(x.tab);a!==n?(T.history?(v.verbose("Updating page state",t),e.address.value(a)):(v.verbose("Changing tab",t),v.changeTab(a)),t.preventDefault()):v.debug("No tab specified")},history:{change:function(t){var a=t.pathNames.join("/")||v.get.initialPath(),i=T.templates.determineTitle(a)||!1;v.performance.display(),v.debug("History change event",a,t),y=t,a!==n&&v.changeTab(a),i&&e.address.title(i)}}},refresh:function(){p&&(v.debug("Refreshing tab",p),v.changeTab(p))},cache:{read:function(e){return e!==n?E[e]:!1},add:function(e,t){e=e||p,v.debug("Adding cached content for",e),E[e]=t},remove:function(e){e=e||p,v.debug("Removing cached content for",e),delete E[e]}},set:{auto:function(){var t="string"==typeof T.path?T.path.replace(/\/$/,"")+"/{$tab}":"/{$tab}";v.verbose("Setting up automatic tab retrieval from server",t),e.isPlainObject(T.apiSettings)?T.apiSettings.url=t:T.apiSettings={url:t}},loading:function(e){var t=v.get.tabElement(e),a=t.hasClass(L.loading);a||(v.verbose("Setting loading state for",t),t.addClass(L.loading).siblings(h).removeClass(L.active+" "+L.loading),t.length>0&&T.onRequest.call(t[0],e))},state:function(t){e.address.value(t)}},changeTab:function(a){var n=t.history&&t.history.pushState,i=n&&T.ignoreFirstLoad&&j,o=T.auto||e.isPlainObject(T.apiSettings),r=o&&!i?v.utilities.pathToArray(a):v.get.defaultPathArray(a);a=v.utilities.arrayToPath(r),e.each(r,function(t,n){var s,c,l,d,u=r.slice(0,t+1),b=v.utilities.arrayToPath(u),g=v.is.tab(b),h=t+1==r.length,A=v.get.tabElement(b);if(v.verbose("Looking for tab",n),g){if(v.verbose("Tab was found",n),p=b,m=v.utilities.filterArray(r,u),h?d=!0:(c=r.slice(0,t+2),l=v.utilities.arrayToPath(c),d=!v.is.tab(l),d&&v.verbose("Tab parameters found",c)),d&&o)return i?(v.debug("Ignoring remote content on first tab load",b),j=!1,v.cache.add(a,A.html()),v.activate.all(b),T.onFirstLoad.call(A[0],b,m,y),T.onLoad.call(A[0],b,m,y)):(v.activate.navigation(b),v.fetch.content(b,a)),!1;v.debug("Opened local tab",b),v.activate.all(b),v.cache.read(b)||(v.cache.add(b,!0),v.debug("First time tab loaded calling tab init"),T.onFirstLoad.call(A[0],b,m,y)),T.onLoad.call(A[0],b,m,y)}else{if(-1!=a.search("/")||""===a)return v.error(P.missingTab,S,f,b),!1;if(s=e("#"+a+', a[name="'+a+'"]'),b=s.closest("[data-tab]").data(x.tab),A=v.get.tabElement(b),s&&s.length>0&&b)return v.debug("Anchor link used, opening parent tab",A,s),A.hasClass(L.active)||setTimeout(function(){v.scrollTo(s)},0),v.activate.all(b),v.cache.read(b)||(v.cache.add(b,!0),v.debug("First time tab loaded calling tab init"),T.onFirstLoad.call(A[0],b,m,y)),T.onLoad.call(A[0],b,m,y),!1}})},scrollTo:function(t){var n=t&&t.length>0?t.offset().top:!1;n!==!1&&(v.debug("Forcing scroll to an in-page link in a hidden tab",n,t),e(a).scrollTop(n))},update:{content:function(e,t,a){var i=v.get.tabElement(e),o=i[0];a=a!==n?a:T.evaluateScripts,a?(v.debug("Updating HTML and evaluating inline scripts",e,t),i.html(t)):(v.debug("Updating HTML",e,t),o.innerHTML=t)}},fetch:{content:function(t,a){var i,o,r=v.get.tabElement(t),s={dataType:"html",encodeParameters:!1,on:"now",cache:T.alwaysRefresh,headers:{"X-Remote":!0},onSuccess:function(e){v.cache.add(a,e),v.update.content(t,e),t==p?(v.debug("Content loaded",t),v.activate.tab(t)):v.debug("Content loaded in background",t),T.onFirstLoad.call(r[0],t,m,y),T.onLoad.call(r[0],t,m,y)},urlData:{tab:a}},c=r.api("get request")||!1,l=c&&"pending"===c.state();a=a||t,o=v.cache.read(a),T.cache&&o?(v.activate.tab(t),v.debug("Adding cached content",a),"once"==T.evaluateScripts?v.update.content(t,o,!1):v.update.content(t,o),T.onLoad.call(r[0],t,m,y)):l?(v.set.loading(t),v.debug("Content is already loading",a)):e.api!==n?(i=e.extend(!0,{},T.apiSettings,s),v.debug("Retrieving remote content",a,i),v.set.loading(t),r.api(i)):v.error(P.api)}},activate:{all:function(e){v.activate.tab(e),v.activate.navigation(e)},tab:function(e){var t=v.get.tabElement(e),a=t.hasClass(L.active);v.verbose("Showing tab content for",t),a||(t.addClass(L.active).siblings(h).removeClass(L.active+" "+L.loading),t.length>0&&T.onVisible.call(t[0],e))},navigation:function(e){var t=v.get.navElement(e),a=t.hasClass(L.active);v.verbose("Activating tab navigation for",t,e),a||t.addClass(L.active).siblings(r).removeClass(L.active+" "+L.loading)}},deactivate:{all:function(){v.deactivate.navigation(),v.deactivate.tabs()},navigation:function(){r.removeClass(L.active)},tabs:function(){h.removeClass(L.active+" "+L.loading)}},is:{tab:function(e){return e!==n?v.get.tabElement(e).length>0:!1}},get:{initialPath:function(){return r.eq(0).data(x.tab)||h.eq(0).data(x.tab)},path:function(){return e.address.value()},defaultPathArray:function(e){return v.utilities.pathToArray(v.get.defaultPath(e))},defaultPath:function(e){var t=r.filter("[data-"+x.tab+'^="'+e+'/"]').eq(0),a=t.data(x.tab)||!1;if(a){if(v.debug("Found default tab",a),k0?t:a},tab:function(){return p}},utilities:{filterArray:function(t,a){return e.grep(t,function(t){return-1==e.inArray(t,a)})},last:function(t){return e.isArray(t)?t[t.length-1]:!1},pathToArray:function(e){return e===n&&(e=p),"string"==typeof e?e.split("/"):[e]},arrayToPath:function(t){return e.isArray(t)?t.join("/"):!1}},setting:function(t,a){if(v.debug("Changing setting",t,a),e.isPlainObject(t))e.extend(!0,T,t);else{if(a===n)return T[t];T[t]=a}},internal:function(t,a){if(e.isPlainObject(t))e.extend(!0,v,t);else{if(a===n)return v[t];v[t]=a}},debug:function(){T.debug&&(T.performance?v.performance.log(arguments):(v.debug=Function.prototype.bind.call(console.info,console,T.name+":"),v.debug.apply(console,arguments)))},verbose:function(){T.verbose&&T.debug&&(T.performance?v.performance.log(arguments):(v.verbose=Function.prototype.bind.call(console.info,console,T.name+":"),v.verbose.apply(console,arguments)))},error:function(){v.error=Function.prototype.bind.call(console.error,console,T.name+":"),v.error.apply(console,arguments)},performance:{log:function(e){var t,a,n;T.performance&&(t=(new Date).getTime(),n=c||t,a=t-n,c=t,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:w,"Execution Time":a})),clearTimeout(v.performance.timer),v.performance.timer=setTimeout(v.performance.display,500)},display:function(){var t=T.name+":",a=0;c=!1,clearTimeout(v.performance.timer),e.each(l,function(e,t){a+=t["Execution Time"]}),t+=" "+a+"ms",s&&(t+=" '"+s+"'"),(console.group!==n||console.table!==n)&&l.length>0&&(console.groupCollapsed(t),console.table?console.table(l):e.each(l,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(t,a,i){var r,s,c,l=I;return a=a||b,i=w||i,"string"==typeof t&&l!==n&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(a,i){var o=a!=r?i+t[a+1].charAt(0).toUpperCase()+t[a+1].slice(1):t;if(e.isPlainObject(l[o])&&a!=r)l=l[o];else{if(l[o]!==n)return s=l[o],!1;if(!e.isPlainObject(l[i])||a==r)return l[i]!==n?(s=l[i],!1):(v.error(P.method,t),!1);l=l[i]}})),e.isFunction(s)?c=s.apply(i,a):s!==n&&(c=s),e.isArray(o)?o.push(c):o!==n?o=[o,c]:c!==n&&(o=c),s}},u?(I===n&&v.initialize(),v.invoke(d)):(I!==n&&I.invoke("destroy"),v.initialize())}),o!==n?o:this},e.tab=function(){e(t).tab.apply(this,arguments)},e.fn.tab.settings={name:"Tab",namespace:"tab",debug:!1,verbose:!1,performance:!0,auto:!1,history:!1,historyType:"hash",path:!1,context:!1,childrenOnly:!1,maxDepth:25,alwaysRefresh:!1,cache:!0,ignoreFirstLoad:!1,apiSettings:!1,evaluateScripts:"once",onFirstLoad:function(e,t,a){},onLoad:function(e,t,a){},onVisible:function(e,t,a){},onRequest:function(e,t,a){},templates:{determineTitle:function(e){}},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); \ No newline at end of file diff --git a/semantic/components/table.css b/semantic/components/table.css new file mode 100755 index 0000000..c758209 --- /dev/null +++ b/semantic/components/table.css @@ -0,0 +1,1096 @@ +/*! + * # Semantic UI 2.1.7 - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Table +*******************************/ + + +/* Prototype */ +.ui.table { + width: 100%; + background: #ffffff; + margin: 1em 0em; + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; + border-radius: 0.28571429rem; + text-align: left; + color: rgba(0, 0, 0, 0.87); + border-collapse: separate; + border-spacing: 0px; +} +.ui.table:first-child { + margin-top: 0em; +} +.ui.table:last-child { + margin-bottom: 0em; +} + + +/******************************* + Parts +*******************************/ + + +/* Table Content */ +.ui.table th, +.ui.table td { + -webkit-transition: background 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, color 0.1s ease; +} + +/* Headers */ +.ui.table thead { + box-shadow: none; +} +.ui.table thead th { + cursor: auto; + background: #f9fafb; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.92857143em 0.71428571em; + vertical-align: inherit; + font-style: none; + font-weight: bold; + text-transform: none; + border-bottom: 1px solid rgba(34, 36, 38, 0.1); + border-left: none; +} +.ui.table thead tr > th:first-child { + border-left: none; +} +.ui.table thead tr:first-child > th:first-child { + border-radius: 0.28571429rem 0em 0em 0em; +} +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em 0.28571429rem 0em 0em; +} +.ui.table thead tr:first-child > th:only-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +/* Footer */ +.ui.table tfoot { + box-shadow: none; +} +.ui.table tfoot th { + cursor: auto; + border-top: 1px solid rgba(34, 36, 38, 0.15); + background: #f9fafb; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.71428571em 0.71428571em; + vertical-align: middle; + font-style: normal; + font-weight: normal; + text-transform: none; +} +.ui.table tfoot tr > th:first-child { + border-left: none; +} +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em 0.28571429rem; +} +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em 0.28571429rem 0em; +} +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/* Table Row */ +.ui.table tr td { + border-top: 1px solid rgba(34, 36, 38, 0.1); +} +.ui.table tr:first-child td { + border-top: none; +} + +/* Table Cells */ +.ui.table td { + padding: 0.71428571em 0.71428571em; + text-align: inherit; +} + +/* Icons */ +.ui.table > .icon { + vertical-align: baseline; +} +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0em; +} +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} + +/* Responsive */ +@media only screen and (max-width: 767px) { + .ui.table:not(.unstackable) { + width: 100%; + } + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + width: auto !important; + display: block !important; + } + .ui.table:not(.unstackable) { + padding: 0em; + } + .ui.table:not(.unstackable) thead { + display: block; + } + .ui.table:not(.unstackable) tfoot { + display: block; + } + .ui.table:not(.unstackable) tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em !important; + box-shadow: none !important; + } + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: bold; + } + +/* Definition Table */ + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + + +/******************************* + Coupling +*******************************/ + + +/* UI Image */ +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} +.ui.structured.table thead th { + border-left: none; + border-right: none; +} +.ui.structured.sortable.table thead th { + border-left: 1px solid rgba(34, 36, 38, 0.15); + border-right: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.structured.basic.table th { + border-left: none; + border-right: none; +} +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: 1px solid rgba(34, 36, 38, 0.1); + border-right: 1px solid rgba(34, 36, 38, 0.1); +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: normal; + color: rgba(0, 0, 0, 0.4); + box-shadow: -1px -1px 0px 1px #ffffff; +} +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: rgba(0, 0, 0, 0.4); + color: normal; + box-shadow: 1px 1px 0px 1px #ffffff; +} + +/* Remove Border */ +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -1px 0px 1px #ffffff; +} +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px 1px 0px 1px #ffffff; +} + +/* Highlight Defining Column */ +.ui.definition.table tr td:first-child { + background: rgba(0, 0, 0, 0.03); + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/* Fix 2nd Column */ +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} +.ui.definition.table td:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: 0px 0px 0px #a3c293 inset; +} +.ui.table tr.positive, +.ui.table td.positive { + background: #fcfff5 !important; + color: #2c662d !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: 0px 0px 0px #e0b4b4 inset; +} +.ui.table tr.negative, +.ui.table td.negative { + background: #fff6f6 !important; + color: #9f3a38 !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: 0px 0px 0px #e0b4b4 inset; +} +.ui.table tr.error, +.ui.table td.error { + background: #fff6f6 !important; + color: #9f3a38 !important; +} + +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: 0px 0px 0px #c9ba9b inset; +} +.ui.table tr.warning, +.ui.table td.warning { + background: #fffaf3 !important; + color: #573a08 !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset; +} +.ui.table tr.active, +.ui.table td.active { + background: #e0e0e0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: rgba(40, 40, 40, 0.3); +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: 991px) { + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + width: 100% !important; + display: block !important; + } + .ui[class*="tablet stackable"].table { + padding: 0em; + } + .ui[class*="tablet stackable"].table thead { + display: block; + } + .ui[class*="tablet stackable"].table tfoot { + display: block; + } + .ui[class*="tablet stackable"].table tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em; + box-shadow: none !important; + } + +/* Definition Table */ + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: rgba(0, 0, 0, 0.05) !important; + color: rgba(0, 0, 0, 0.95) !important; +} +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: rgba(255, 255, 255, 0.08) !important; + color: #ffffff !important; +} + +/* Selectable Cell Link */ +.ui.table tbody tr td.selectable { + padding: 0em; +} +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: 0.71428571em 0.71428571em; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: #ffe7e7 !important; + color: #943634 !important; +} +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: #fff4e4 !important; + color: #493107 !important; +} +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: #e0e0e0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: #f7ffe6 !important; + color: #275b28 !important; +} +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: #ffe7e7 !important; + color: #943634 !important; +} + +/*------------------- + Attached +--------------------*/ + + +/* Middle */ +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em -1px; + width: calc(100% + 2px ); + max-width: calc(100% + 2px ); + box-shadow: none; + border: 1px solid #d4d4d5; +} +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: 0px; + margin-top: 1em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: 0px; + margin-bottom: 1em; + box-shadow: none, none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); +} + +/* Stripes */ +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.05); +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + + +/* Red */ +.ui.red.table { + border-top: 0.2em solid #db2828; +} +.ui.inverted.red.table { + background-color: #db2828 !important; + color: #ffffff !important; +} + +/* Orange */ +.ui.orange.table { + border-top: 0.2em solid #f2711c; +} +.ui.inverted.orange.table { + background-color: #f2711c !important; + color: #ffffff !important; +} + +/* Yellow */ +.ui.yellow.table { + border-top: 0.2em solid #fbbd08; +} +.ui.inverted.yellow.table { + background-color: #fbbd08 !important; + color: #ffffff !important; +} + +/* Olive */ +.ui.olive.table { + border-top: 0.2em solid #b5cc18; +} +.ui.inverted.olive.table { + background-color: #b5cc18 !important; + color: #ffffff !important; +} + +/* Green */ +.ui.green.table { + border-top: 0.2em solid #21ba45; +} +.ui.inverted.green.table { + background-color: #21ba45 !important; + color: #ffffff !important; +} + +/* Teal */ +.ui.teal.table { + border-top: 0.2em solid #00b5ad; +} +.ui.inverted.teal.table { + background-color: #00b5ad !important; + color: #ffffff !important; +} + +/* Blue */ +.ui.blue.table { + border-top: 0.2em solid #2185d0; +} +.ui.inverted.blue.table { + background-color: #2185d0 !important; + color: #ffffff !important; +} + +/* Violet */ +.ui.violet.table { + border-top: 0.2em solid #6435c9; +} +.ui.inverted.violet.table { + background-color: #6435c9 !important; + color: #ffffff !important; +} + +/* Purple */ +.ui.purple.table { + border-top: 0.2em solid #a333c8; +} +.ui.inverted.purple.table { + background-color: #a333c8 !important; + color: #ffffff !important; +} + +/* Pink */ +.ui.pink.table { + border-top: 0.2em solid #e03997; +} +.ui.inverted.pink.table { + background-color: #e03997 !important; + color: #ffffff !important; +} + +/* Brown */ +.ui.brown.table { + border-top: 0.2em solid #a5673f; +} +.ui.inverted.brown.table { + background-color: #a5673f !important; + color: #ffffff !important; +} + +/* Grey */ +.ui.grey.table { + border-top: 0.2em solid #767676; +} +.ui.inverted.grey.table { + background-color: #767676 !important; + color: #ffffff !important; +} + +/* Black */ +.ui.black.table { + border-top: 0.2em solid #1b1c1d; +} +.ui.inverted.black.table { + background-color: #1b1c1d !important; + color: #ffffff !important; +} + +/*-------------- + Column Count +---------------*/ + + +/* Grid Based */ +.ui.one.column.table td { + width: 100%; +} +.ui.two.column.table td { + width: 50%; +} +.ui.three.column.table td { + width: 33.33333333%; +} +.ui.four.column.table td { + width: 25%; +} +.ui.five.column.table td { + width: 20%; +} +.ui.six.column.table td { + width: 16.66666667%; +} +.ui.seven.column.table td { + width: 14.28571429%; +} +.ui.eight.column.table td { + width: 12.5%; +} +.ui.nine.column.table td { + width: 11.11111111%; +} +.ui.ten.column.table td { + width: 10%; +} +.ui.eleven.column.table td { + width: 9.09090909%; +} +.ui.twelve.column.table td { + width: 8.33333333%; +} +.ui.thirteen.column.table td { + width: 7.69230769%; +} +.ui.fourteen.column.table td { + width: 7.14285714%; +} +.ui.fifteen.column.table td { + width: 6.66666667%; +} +.ui.sixteen.column.table td { + width: 6.25%; +} + +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); +} +.ui.sortable.table thead th:first-child { + border-left: none; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: auto; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; +} +.ui.sortable.table thead th.ascending:after { + content: '\f0d8'; +} +.ui.sortable.table thead th.descending:after { + content: '\f0d7'; +} + +/* Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: rgba(40, 40, 40, 0.3); +} +.ui.sortable.table thead th:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.8); +} + +/* Sorted */ +.ui.sortable.table thead th.sorted { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ +.ui.sortable.table thead th.sorted:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ +.ui.inverted.sortable.table thead th.sorted { + background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} +.ui.inverted.sortable.table thead th:hover { + background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} +.ui.inverted.sortable.table thead th { + border-left-color: transparent; + border-right-color: transparent; +} + +/*-------------- + Inverted +---------------*/ + + +/* Text Color */ +.ui.inverted.table { + background: #333333; + color: rgba(255, 255, 255, 0.9); + border: none; +} +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + border-color: rgba(255, 255, 255, 0.1) !important; + color: rgba(255, 255, 255, 0.9); +} +.ui.inverted.table tr td { + border-color: rgba(255, 255, 255, 0.1) !important; +} +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: rgba(225, 225, 225, 0.3); +} + +/* Definition */ +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: #ffffff; +} +.ui.inverted.definition.table tr td:first-child { + background: rgba(255, 255, 255, 0.02); + color: #ffffff; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: transparent; + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; +} +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} +.ui.basic.table th { + background: transparent; + border-left: none; +} +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.basic.table td { + background: transparent; +} +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +/* Very Basic */ +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: ''; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: 1px solid rgba(34, 36, 38, 0.1); +} +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: 1em; + padding-right: 1em; +} +.ui.padded.table th, +.ui.padded.table td { + padding: 1em 1em; +} + +/* Very */ +.ui[class*="very padded"].table th { + padding-left: 1.5em; + padding-right: 1.5em; +} +.ui[class*="very padded"].table td { + padding: 1.5em 1.5em; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: 0.7em; + padding-right: 0.7em; +} +.ui.compact.table td { + padding: 0.5em 0.7em; +} + +/* Very */ +.ui[class*="very compact"].table th { + padding-left: 0.6em; + padding-right: 0.6em; +} +.ui[class*="very compact"].table td { + padding: 0.4em 0.6em; +} + +/*-------------- + Sizes +---------------*/ + + +/* Small */ +.ui.small.table { + font-size: 0.9em; +} + +/* Standard */ +.ui.table { + font-size: 1em; +} + +/* Large */ +.ui.large.table { + font-size: 1.1em; +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/table.min.css b/semantic/components/table.min.css new file mode 100755 index 0000000..bf13bef --- /dev/null +++ b/semantic/components/table.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.table{width:100%;background:#fff;margin:1em 0;border:1px solid rgba(34,36,38,.15);box-shadow:none;border-radius:.28571429rem;text-align:left;color:rgba(0,0,0,.87);border-collapse:separate;border-spacing:0}.ui.table:first-child{margin-top:0}.ui.table:last-child{margin-bottom:0}.ui.table td,.ui.table th{-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease}.ui.table thead{box-shadow:none}.ui.table thead th{cursor:auto;background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.92857143em .71428571em;vertical-align:inherit;font-style:none;font-weight:700;text-transform:none;border-bottom:1px solid rgba(34,36,38,.1);border-left:none}.ui.table thead tr>th:first-child{border-left:none}.ui.table thead tr:first-child>th:first-child{border-radius:.28571429rem 0 0}.ui.table thead tr:first-child>th:last-child{border-radius:0 .28571429rem 0 0}.ui.table thead tr:first-child>th:only-child{border-radius:.28571429rem .28571429rem 0 0}.ui.table tfoot{box-shadow:none}.ui.table tfoot th{cursor:auto;border-top:1px solid rgba(34,36,38,.15);background:#f9fafb;text-align:inherit;color:rgba(0,0,0,.87);padding:.71428571em;vertical-align:middle;font-style:normal;font-weight:400;text-transform:none}.ui.table tfoot tr>th:first-child{border-left:none}.ui.table tfoot tr:first-child>th:first-child{border-radius:0 0 0 .28571429rem}.ui.table tfoot tr:first-child>th:last-child{border-radius:0 0 .28571429rem}.ui.table tfoot tr:first-child>th:only-child{border-radius:0 0 .28571429rem .28571429rem}.ui.table tr td{border-top:1px solid rgba(34,36,38,.1)}.ui.table tr:first-child td{border-top:none}.ui.table td{padding:.71428571em;text-align:inherit}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.table.segment{padding:0}.ui.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}@media only screen and (max-width:767px){.ui.table:not(.unstackable){width:100%;padding:0}.ui.table:not(.unstackable) tbody,.ui.table:not(.unstackable) tr,.ui.table:not(.unstackable) tr>td,.ui.table:not(.unstackable) tr>th{width:auto!important;display:block!important}.ui.table:not(.unstackable) tfoot,.ui.table:not(.unstackable) thead{display:block}.ui.table:not(.unstackable) tr{padding-top:1em;padding-bottom:1em;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important}.ui.table:not(.unstackable) tr>td,.ui.table:not(.unstackable) tr>th{background:0 0;border:none!important;padding:.25em .75em!important;box-shadow:none!important}.ui.table:not(.unstackable) td:first-child,.ui.table:not(.unstackable) th:first-child{font-weight:700}.ui.definition.table:not(.unstackable) thead th:first-child{box-shadow:none!important}}.ui.table td .image,.ui.table td .image img,.ui.table th .image,.ui.table th .image img{max-width:none}.ui.structured.table{border-collapse:collapse}.ui.structured.table thead th{border-left:none;border-right:none}.ui.structured.sortable.table thead th{border-left:1px solid rgba(34,36,38,.15);border-right:1px solid rgba(34,36,38,.15)}.ui.structured.basic.table th{border-left:none;border-right:none}.ui.structured.celled.table tr td,.ui.structured.celled.table tr th{border-left:1px solid rgba(34,36,38,.1);border-right:1px solid rgba(34,36,38,.1)}.ui.definition.table thead:not(.full-width) th:first-child{pointer-events:none;background:0 0;font-weight:400;color:rgba(0,0,0,.4);box-shadow:-1px -1px 0 1px #fff}.ui.definition.table tfoot:not(.full-width) th:first-child{pointer-events:none;background:0 0;font-weight:rgba(0,0,0,.4);color:normal;box-shadow:1px 1px 0 1px #fff}.ui.celled.definition.table thead:not(.full-width) th:first-child{box-shadow:0 -1px 0 1px #fff}.ui.celled.definition.table tfoot:not(.full-width) th:first-child{box-shadow:0 1px 0 1px #fff}.ui.definition.table tr td:first-child{background:rgba(0,0,0,.03);font-weight:700;color:rgba(0,0,0,.95)}.ui.definition.table td:nth-child(2),.ui.definition.table tfoot:not(.full-width) th:nth-child(2),.ui.definition.table thead:not(.full-width) th:nth-child(2){border-left:1px solid rgba(34,36,38,.15)}.ui.table td.positive,.ui.table tr.positive{box-shadow:0 0 0 #a3c293 inset;background:#fcfff5!important;color:#2c662d!important}.ui.table td.negative,.ui.table tr.negative{box-shadow:0 0 0 #e0b4b4 inset;background:#fff6f6!important;color:#9f3a38!important}.ui.table td.error,.ui.table tr.error{box-shadow:0 0 0 #e0b4b4 inset;background:#fff6f6!important;color:#9f3a38!important}.ui.table td.warning,.ui.table tr.warning{box-shadow:0 0 0 #c9ba9b inset;background:#fffaf3!important;color:#573a08!important}.ui.table td.active,.ui.table tr.active{box-shadow:0 0 0 rgba(0,0,0,.87) inset;background:#e0e0e0!important;color:rgba(0,0,0,.87)!important}.ui.table tr td.disabled,.ui.table tr.disabled td,.ui.table tr.disabled:hover,.ui.table tr:hover td.disabled{pointer-events:none;color:rgba(40,40,40,.3)}@media only screen and (max-width:991px){.ui[class*="tablet stackable"].table,.ui[class*="tablet stackable"].table tbody,.ui[class*="tablet stackable"].table tr,.ui[class*="tablet stackable"].table tr>td,.ui[class*="tablet stackable"].table tr>th{width:100%!important;display:block!important}.ui[class*="tablet stackable"].table{padding:0}.ui[class*="tablet stackable"].table tfoot,.ui[class*="tablet stackable"].table thead{display:block}.ui[class*="tablet stackable"].table tr{padding-top:1em;padding-bottom:1em;box-shadow:0 -1px 0 0 rgba(0,0,0,.1) inset!important}.ui[class*="tablet stackable"].table tr>td,.ui[class*="tablet stackable"].table tr>th{background:0 0;border:none!important;padding:.25em .75em;box-shadow:none!important}.ui.definition[class*="tablet stackable"].table thead th:first-child{box-shadow:none!important}}.ui.table [class*="left aligned"],.ui.table[class*="left aligned"]{text-align:left}.ui.table [class*="center aligned"],.ui.table[class*="center aligned"]{text-align:center}.ui.table [class*="right aligned"],.ui.table[class*="right aligned"]{text-align:right}.ui.table [class*="top aligned"],.ui.table[class*="top aligned"]{vertical-align:top}.ui.table [class*="middle aligned"],.ui.table[class*="middle aligned"]{vertical-align:middle}.ui.table [class*="bottom aligned"],.ui.table[class*="bottom aligned"]{vertical-align:bottom}.ui.table td.collapsing,.ui.table th.collapsing{width:1px;white-space:nowrap}.ui.fixed.table{table-layout:fixed}.ui.fixed.table td,.ui.fixed.table th{overflow:hidden;text-overflow:ellipsis}.ui.selectable.table tbody tr:hover,.ui.table tbody tr td.selectable:hover{background:rgba(0,0,0,.05)!important;color:rgba(0,0,0,.95)!important}.ui.inverted.table tbody tr td.selectable:hover,.ui.selectable.inverted.table tbody tr:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}.ui.table tbody tr td.selectable{padding:0}.ui.table tbody tr td.selectable>a:not(.ui){display:block;color:inherit;padding:.71428571em}.ui.selectable.table tr.error:hover,.ui.selectable.table tr:hover td.error,.ui.table tr td.selectable.error:hover{background:#ffe7e7!important;color:#943634!important}.ui.selectable.table tr.warning:hover,.ui.selectable.table tr:hover td.warning,.ui.table tr td.selectable.warning:hover{background:#fff4e4!important;color:#493107!important}.ui.selectable.table tr.active:hover,.ui.selectable.table tr:hover td.active,.ui.table tr td.selectable.active:hover{background:#e0e0e0!important;color:rgba(0,0,0,.87)!important}.ui.selectable.table tr.positive:hover,.ui.selectable.table tr:hover td.positive,.ui.table tr td.selectable.positive:hover{background:#f7ffe6!important;color:#275b28!important}.ui.selectable.table tr.negative:hover,.ui.selectable.table tr:hover td.negative,.ui.table tr td.selectable.negative:hover{background:#ffe7e7!important;color:#943634!important}.ui.attached.table{top:0;bottom:0;border-radius:0;margin:0 -1px;width:calc(100% + 2px);max-width:calc(100% + 2px);box-shadow:none;border:1px solid #d4d4d5}.ui.attached+.ui.attached.table:not(.top){border-top:none}.ui[class*="top attached"].table{bottom:0;margin-bottom:0;top:0;margin-top:1em;border-radius:.28571429rem .28571429rem 0 0}.ui.table[class*="top attached"]:first-child{margin-top:0}.ui[class*="bottom attached"].table{bottom:0;margin-top:0;top:0;margin-bottom:1em;box-shadow:none,none;border-radius:0 0 .28571429rem .28571429rem}.ui[class*="bottom attached"].table:last-child{margin-bottom:0}.ui.striped.table tbody tr:nth-child(2n),.ui.striped.table>tr:nth-child(2n){background-color:rgba(0,0,50,.02)}.ui.inverted.striped.table tbody tr:nth-child(2n),.ui.inverted.striped.table>tr:nth-child(2n){background-color:rgba(255,255,255,.05)}.ui.table [class*="single line"],.ui.table[class*="single line"]{white-space:nowrap}.ui.red.table{border-top:.2em solid #db2828}.ui.inverted.red.table{background-color:#db2828!important;color:#fff!important}.ui.orange.table{border-top:.2em solid #f2711c}.ui.inverted.orange.table{background-color:#f2711c!important;color:#fff!important}.ui.yellow.table{border-top:.2em solid #fbbd08}.ui.inverted.yellow.table{background-color:#fbbd08!important;color:#fff!important}.ui.olive.table{border-top:.2em solid #b5cc18}.ui.inverted.olive.table{background-color:#b5cc18!important;color:#fff!important}.ui.green.table{border-top:.2em solid #21ba45}.ui.inverted.green.table{background-color:#21ba45!important;color:#fff!important}.ui.teal.table{border-top:.2em solid #00b5ad}.ui.inverted.teal.table{background-color:#00b5ad!important;color:#fff!important}.ui.blue.table{border-top:.2em solid #2185d0}.ui.inverted.blue.table{background-color:#2185d0!important;color:#fff!important}.ui.violet.table{border-top:.2em solid #6435c9}.ui.inverted.violet.table{background-color:#6435c9!important;color:#fff!important}.ui.purple.table{border-top:.2em solid #a333c8}.ui.inverted.purple.table{background-color:#a333c8!important;color:#fff!important}.ui.pink.table{border-top:.2em solid #e03997}.ui.inverted.pink.table{background-color:#e03997!important;color:#fff!important}.ui.brown.table{border-top:.2em solid #a5673f}.ui.inverted.brown.table{background-color:#a5673f!important;color:#fff!important}.ui.grey.table{border-top:.2em solid #767676}.ui.inverted.grey.table{background-color:#767676!important;color:#fff!important}.ui.black.table{border-top:.2em solid #1b1c1d}.ui.inverted.black.table{background-color:#1b1c1d!important;color:#fff!important}.ui.one.column.table td{width:100%}.ui.two.column.table td{width:50%}.ui.three.column.table td{width:33.33333333%}.ui.four.column.table td{width:25%}.ui.five.column.table td{width:20%}.ui.six.column.table td{width:16.66666667%}.ui.seven.column.table td{width:14.28571429%}.ui.eight.column.table td{width:12.5%}.ui.nine.column.table td{width:11.11111111%}.ui.ten.column.table td{width:10%}.ui.eleven.column.table td{width:9.09090909%}.ui.twelve.column.table td{width:8.33333333%}.ui.thirteen.column.table td{width:7.69230769%}.ui.fourteen.column.table td{width:7.14285714%}.ui.fifteen.column.table td{width:6.66666667%}.ui.sixteen.column.table td,.ui.table td.one.wide,.ui.table th.one.wide{width:6.25%}.ui.table td.two.wide,.ui.table th.two.wide{width:12.5%}.ui.table td.three.wide,.ui.table th.three.wide{width:18.75%}.ui.table td.four.wide,.ui.table th.four.wide{width:25%}.ui.table td.five.wide,.ui.table th.five.wide{width:31.25%}.ui.table td.six.wide,.ui.table th.six.wide{width:37.5%}.ui.table td.seven.wide,.ui.table th.seven.wide{width:43.75%}.ui.table td.eight.wide,.ui.table th.eight.wide{width:50%}.ui.table td.nine.wide,.ui.table th.nine.wide{width:56.25%}.ui.table td.ten.wide,.ui.table th.ten.wide{width:62.5%}.ui.table td.eleven.wide,.ui.table th.eleven.wide{width:68.75%}.ui.table td.twelve.wide,.ui.table th.twelve.wide{width:75%}.ui.table td.thirteen.wide,.ui.table th.thirteen.wide{width:81.25%}.ui.table td.fourteen.wide,.ui.table th.fourteen.wide{width:87.5%}.ui.table td.fifteen.wide,.ui.table th.fifteen.wide{width:93.75%}.ui.table td.sixteen.wide,.ui.table th.sixteen.wide{width:100%}.ui.sortable.table thead th{cursor:pointer;white-space:nowrap;border-left:1px solid rgba(34,36,38,.15);color:rgba(0,0,0,.87)}.ui.sortable.table thead th:first-child{border-left:none}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.sortable.table thead th:after{display:none;font-style:normal;font-weight:400;text-decoration:inherit;content:'';height:1em;width:auto;opacity:.8;margin:0 0 0 .5em;font-family:Icons}.ui.sortable.table thead th.ascending:after{content:'\f0d8'}.ui.sortable.table thead th.descending:after{content:'\f0d7'}.ui.sortable.table th.disabled:hover{cursor:auto;color:rgba(40,40,40,.3)}.ui.sortable.table thead th:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.8)}.ui.sortable.table thead th.sorted{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.sortable.table thead th.sorted:after{display:inline-block}.ui.sortable.table thead th.sorted:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95)}.ui.inverted.sortable.table thead th.sorted{background:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) rgba(255,255,255,.15);background:linear-gradient(transparent,rgba(0,0,0,.05)) rgba(255,255,255,.15);color:#fff}.ui.inverted.sortable.table thead th:hover{background:-webkit-linear-gradient(transparent,rgba(0,0,0,.05)) rgba(255,255,255,.08);background:linear-gradient(transparent,rgba(0,0,0,.05)) rgba(255,255,255,.08);color:#fff}.ui.inverted.sortable.table thead th{border-left-color:transparent;border-right-color:transparent}.ui.inverted.table{background:#333;color:rgba(255,255,255,.9);border:none}.ui.inverted.table th{background-color:rgba(0,0,0,.15);border-color:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.9)}.ui.inverted.table tr td{border-color:rgba(255,255,255,.1)!important}.ui.inverted.table tr td.disabled,.ui.inverted.table tr.disabled td,.ui.inverted.table tr.disabled:hover td,.ui.inverted.table tr:hover td.disabled{pointer-events:none;color:rgba(225,225,225,.3)}.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,.ui.inverted.definition.table thead:not(.full-width) th:first-child{background:#fff}.ui.inverted.definition.table tr td:first-child{background:rgba(255,255,255,.02);color:#fff}.ui.collapsing.table{width:auto}.ui.basic.table{background:0 0;border:1px solid rgba(34,36,38,.15);box-shadow:none}.ui.basic.table tfoot,.ui.basic.table thead{box-shadow:none}.ui.basic.table th{background:0 0;border-left:none}.ui.basic.table tbody tr{border-bottom:1px solid rgba(0,0,0,.1)}.ui.basic.table td{background:0 0}.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.05)!important}.ui[class*="very basic"].table{border:none}.ui[class*="very basic"].table:not(.sortable):not(.striped) td,.ui[class*="very basic"].table:not(.sortable):not(.striped) th{padding:''}.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child,.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child{padding-left:0}.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child,.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child{padding-right:0}.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th{padding-top:0}.ui.celled.table tr td,.ui.celled.table tr th{border-left:1px solid rgba(34,36,38,.1)}.ui.celled.table tr td:first-child,.ui.celled.table tr th:first-child{border-left:none}.ui.padded.table th{padding-left:1em;padding-right:1em}.ui.padded.table td,.ui.padded.table th{padding:1em}.ui[class*="very padded"].table th{padding-left:1.5em;padding-right:1.5em}.ui[class*="very padded"].table td{padding:1.5em}.ui.compact.table th{padding-left:.7em;padding-right:.7em}.ui.compact.table td{padding:.5em .7em}.ui[class*="very compact"].table th{padding-left:.6em;padding-right:.6em}.ui[class*="very compact"].table td{padding:.4em .6em}.ui.small.table{font-size:.9em}.ui.table{font-size:1em}.ui.large.table{font-size:1.1em} \ No newline at end of file diff --git a/semantic/components/transition.css b/semantic/components/transition.css new file mode 100755 index 0000000..8e74edd --- /dev/null +++ b/semantic/components/transition.css @@ -0,0 +1,1982 @@ +/*! + * # Semantic UI 2.1.7 - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Transitions +*******************************/ + +.transition { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 300ms; + animation-duration: 300ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + + +/******************************* + States +*******************************/ + + +/* Animating */ +.animating.transition { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + visibility: visible !important; +} + +/* Loading */ +.loading.transition { + position: absolute; + top: -99999px; + left: -99999px; +} + +/* Hidden */ +.hidden.transition { + display: none; + visibility: hidden; +} + +/* Visible */ +.visible.transition { + display: block !important; + visibility: visible !important; + +/* backface-visibility: @backfaceVisibility; + transform: @use3DAcceleration;*/ +} +/* Disabled */ +.disabled.transition { + -webkit-animation-play-state: paused; + animation-play-state: paused; +} + + +/******************************* + Variations +*******************************/ + +.looping.transition { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + + +/******************************* + Transitions +*******************************/ + +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css + + Additional transitions adapted from Glide + by Nick Pettit - https://github.com/nickpettit/glide +*/ + +/*-------------- + Browse +---------------*/ + +.transition.browse { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; +} +.transition.browse.in { + -webkit-animation-name: browseIn; + animation-name: browseIn; +} +.transition.browse.out, +.transition.browse.left.out { + -webkit-animation-name: browseOutLeft; + animation-name: browseOutLeft; +} +.transition.browse.right.out { + -webkit-animation-name: browseOutRight; + animation-name: browseOutRight; +} + +/* In */ +@-webkit-keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} +@keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} + +/* Out */ +@-webkit-keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@-webkit-keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +/*-------------- + Drop +---------------*/ + +.drop.transition { + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; + -webkit-animation-duration: 400ms; + animation-duration: 400ms; + -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); + animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); +} +.drop.transition.in { + -webkit-animation-name: dropIn; + animation-name: dropIn; +} +.drop.transition.out { + -webkit-animation-name: dropOut; + animation-name: dropOut; +} + +/* Drop */ +@-webkit-keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} +@keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} + +/*-------------- + Fade +---------------*/ + +.transition.fade.in { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +.transition[class*="fade up"].in { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} +.transition[class*="fade down"].in { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} +.transition[class*="fade left"].in { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} +.transition[class*="fade right"].in { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} +.transition.fade.out { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} +.transition[class*="fade up"].out { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} +.transition[class*="fade down"].out { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} +.transition[class*="fade left"].out { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} +.transition[class*="fade right"].out { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +/* In */ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +/* Out */ +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} + +/*-------------- + Flips +---------------*/ + +.flip.transition.in, +.flip.transition.out { + -webkit-animation-duration: 600ms; + animation-duration: 600ms; +} +.horizontal.flip.transition.in { + -webkit-animation-name: horizontalFlipIn; + animation-name: horizontalFlipIn; +} +.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} +.vertical.flip.transition.in { + -webkit-animation-name: verticalFlipIn; + animation-name: verticalFlipIn; +} +.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} + +/* In */ +@-webkit-keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} +@keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} +@-webkit-keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} +@keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} + +/* Out */ +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} +@keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} +@keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} + +/*-------------- + Scale +---------------*/ + +.scale.transition.in { + -webkit-animation-name: scaleIn; + animation-name: scaleIn; +} +.scale.transition.out { + -webkit-animation-name: scaleOut; + animation-name: scaleOut; +} +@-webkit-keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* Out */ +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} +@keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +/*-------------- + Fly +---------------*/ + + +/* Inward */ +.transition.fly { + -webkit-animation-duration: 0.6s; + animation-duration: 0.6s; + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); +} +.transition.fly.in { + -webkit-animation-name: flyIn; + animation-name: flyIn; +} +.transition[class*="fly up"].in { + -webkit-animation-name: flyInUp; + animation-name: flyInUp; +} +.transition[class*="fly down"].in { + -webkit-animation-name: flyInDown; + animation-name: flyInDown; +} +.transition[class*="fly left"].in { + -webkit-animation-name: flyInLeft; + animation-name: flyInLeft; +} +.transition[class*="fly right"].in { + -webkit-animation-name: flyInRight; + animation-name: flyInRight; +} + +/* Outward */ +.transition.fly.out { + -webkit-animation-name: flyOut; + animation-name: flyOut; +} +.transition[class*="fly up"].out { + -webkit-animation-name: flyOutUp; + animation-name: flyOutUp; +} +.transition[class*="fly down"].out { + -webkit-animation-name: flyOutDown; + animation-name: flyOutDown; +} +.transition[class*="fly left"].out { + -webkit-animation-name: flyOutLeft; + animation-name: flyOutLeft; +} +.transition[class*="fly right"].out { + -webkit-animation-name: flyOutRight; + animation-name: flyOutRight; +} + +/* In */ +@-webkit-keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@-webkit-keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@-webkit-keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@-webkit-keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} +@keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + 100% { + -webkit-transform: none; + transform: none; + } +} + +/* Out */ +@-webkit-keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} +@keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} +@-webkit-keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +@keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} +@-webkit-keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +@keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} +@-webkit-keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} +@-webkit-keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} +@keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +/*-------------- + Slide +---------------*/ + +.transition.slide.in, +.transition[class*="slide down"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="slide up"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="slide left"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="slide right"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} +.transition.slide.out, +.transition[class*="slide down"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="slide up"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="slide left"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="slide right"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +/* In */ +@-webkit-keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@-webkit-keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} +@keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} + +/* Out */ +@-webkit-keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} +@-webkit-keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} +@keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} + +/*-------------- + Swing +---------------*/ + +.transition.swing { + -webkit-animation-duration: 800ms; + animation-duration: 800ms; +} +.transition[class*="swing down"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="swing up"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="swing left"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="swing right"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} +.transition.swing.out, +.transition[class*="swing down"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} +.transition[class*="swing up"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} +.transition[class*="swing left"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} +.transition[class*="swing right"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +/* In */ +@-webkit-keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} +@keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} +@-webkit-keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} +@keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} + +/* Out */ +@-webkit-keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} +@keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} +@-webkit-keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} +@keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} + + +/******************************* + Static Animations +*******************************/ + + +/*-------------- + Emphasis +---------------*/ + +.flash.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: flash; + animation-name: flash; +} +.shake.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: shake; + animation-name: shake; +} +.bounce.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: bounce; + animation-name: bounce; +} +.tada.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: tada; + animation-name: tada; +} +.pulse.transition { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-name: pulse; + animation-name: pulse; +} +.jiggle.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: jiggle; + animation-name: jiggle; +} + +/* Flash */ +@-webkit-keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} +@keyframes flash { + 0%, + 50%, + 100% { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } +} + +/* Shake */ +@-webkit-keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} +@keyframes shake { + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +/* Bounce */ +@-webkit-keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} +@keyframes bounce { + 0%, + 20%, + 50%, + 80%, + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +/* Tada */ +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} +@keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 10%, + 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + 30%, + 50%, + 70%, + 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + 40%, + 60%, + 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +/* Pulse */ +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +/* Rubberband */ +@-webkit-keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +@keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/transition.js b/semantic/components/transition.js new file mode 100755 index 0000000..c1e3528 --- /dev/null +++ b/semantic/components/transition.js @@ -0,0 +1,1074 @@ +/*! + * # Semantic UI 2.1.7 - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.transition = function() { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + moduleArguments = arguments, + query = moduleArguments[0], + queryArguments = [].slice.call(arguments, 1), + methodInvoked = (typeof query === 'string'), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + $allModules + .each(function(index) { + var + $module = $(this), + element = this, + + // set at run time + settings, + instance, + + error, + className, + metadata, + animationEnd, + animationName, + + namespace, + moduleNamespace, + eventNamespace, + module + ; + + module = { + + initialize: function() { + + // get full settings + settings = module.get.settings.apply(element, moduleArguments); + + // shorthand + className = settings.className; + error = settings.error; + metadata = settings.metadata; + + // define namespace + eventNamespace = '.' + settings.namespace; + moduleNamespace = 'module-' + settings.namespace; + instance = $module.data(moduleNamespace) || module; + + // get vendor specific events + animationEnd = module.get.animationEndEvent(); + + if(methodInvoked) { + methodInvoked = module.invoke(query); + } + + // method not invoked, lets run an animation + if(methodInvoked === false) { + module.verbose('Converted arguments into settings object', settings); + if(settings.interval) { + module.delay(settings.animate); + } + else { + module.animate(); + } + 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) + ; + }, + + refresh: function() { + module.verbose('Refreshing display type on next animation'); + delete module.displayType; + }, + + forceRepaint: function() { + module.verbose('Forcing element repaint'); + var + $parentElement = $module.parent(), + $nextElement = $module.next() + ; + if($nextElement.length === 0) { + $module.detach().appendTo($parentElement); + } + else { + $module.detach().insertBefore($nextElement); + } + }, + + repaint: function() { + module.verbose('Repainting element'); + var + fakeAssignment = element.offsetWidth + ; + }, + + delay: function(interval) { + var + direction = module.get.animationDirection(), + shouldReverse, + delay + ; + if(!direction) { + direction = module.can.transition() + ? module.get.direction() + : 'static' + ; + } + interval = (interval !== undefined) + ? interval + : settings.interval + ; + shouldReverse = (settings.reverse == 'auto' && direction == className.outward); + delay = (shouldReverse || settings.reverse == true) + ? ($allModules.length - index) * settings.interval + : index * settings.interval + ; + module.debug('Delaying animation by', delay); + setTimeout(module.animate, delay); + }, + + animate: function(overrideSettings) { + settings = overrideSettings || settings; + if(!module.is.supported()) { + module.error(error.support); + return false; + } + module.debug('Preparing animation', settings.animation); + if(module.is.animating()) { + if(settings.queue) { + if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) { + module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation); + } + else { + module.queue(settings.animation); + } + return false; + } + else if(!settings.allowRepeats && module.is.occurring()) { + module.debug('Animation is already occurring, will not execute repeated animation', settings.animation); + return false; + } + else { + module.debug('New animation started, completing previous early', settings.animation); + instance.complete(); + } + } + if( module.can.animate() ) { + module.set.animating(settings.animation); + } + else { + module.error(error.noAnimation, settings.animation, element); + } + }, + + reset: function() { + module.debug('Resetting animation to beginning conditions'); + module.remove.animationCallbacks(); + module.restore.conditions(); + module.remove.animating(); + }, + + queue: function(animation) { + module.debug('Queueing animation of', animation); + module.queuing = true; + $module + .one(animationEnd + '.queue' + eventNamespace, function() { + module.queuing = false; + module.repaint(); + module.animate.apply(this, settings); + }) + ; + }, + + complete: function (event) { + module.debug('Animation complete', settings.animation); + module.remove.completeCallback(); + module.remove.failSafe(); + if(!module.is.looping()) { + if( module.is.outward() ) { + module.verbose('Animation is outward, hiding element'); + module.restore.conditions(); + module.hide(); + } + else if( module.is.inward() ) { + module.verbose('Animation is outward, showing element'); + module.restore.conditions(); + module.show(); + } + else { + module.verbose('Static animation completed'); + module.restore.conditions(); + settings.onComplete.call(element); + } + } + }, + + force: { + visible: function() { + var + style = $module.attr('style'), + userStyle = module.get.userStyle(), + displayType = module.get.displayType(), + overrideStyle = userStyle + 'display: ' + displayType + ' !important;', + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== displayType) { + module.verbose('Overriding default display to show element', displayType); + $module + .attr('style', overrideStyle) + ; + } + else if(emptyStyle) { + $module.removeAttr('style'); + } + }, + hidden: function() { + var + style = $module.attr('style'), + currentDisplay = $module.css('display'), + emptyStyle = (style === undefined || style === '') + ; + if(currentDisplay !== 'none' && !module.is.hidden()) { + module.verbose('Overriding default display to hide element'); + $module + .css('display', 'none') + ; + } + else if(emptyStyle) { + $module + .removeAttr('style') + ; + } + } + }, + + has: { + direction: function(animation) { + var + hasDirection = false + ; + animation = animation || settings.animation; + if(typeof animation === 'string') { + animation = animation.split(' '); + $.each(animation, function(index, word){ + if(word === className.inward || word === className.outward) { + hasDirection = true; + } + }); + } + return hasDirection; + }, + inlineDisplay: function() { + var + style = $module.attr('style') || '' + ; + return $.isArray(style.match(/display.*?;/, '')); + } + }, + + set: { + animating: function(animation) { + var + animationClass, + direction + ; + // remove previous callbacks + module.remove.completeCallback(); + + // determine exact animation + animation = animation || settings.animation; + animationClass = module.get.animationClass(animation); + + // save animation class in cache to restore class names + module.save.animation(animationClass); + + // override display if necessary so animation appears visibly + module.force.visible(); + + module.remove.hidden(); + module.remove.direction(); + + module.start.animation(animationClass); + + }, + duration: function(animationName, duration) { + duration = duration || settings.duration; + duration = (typeof duration == 'number') + ? duration + 'ms' + : duration + ; + if(duration || duration === 0) { + module.verbose('Setting animation duration', duration); + $module + .css({ + 'animation-duration': duration + }) + ; + } + }, + direction: function(direction) { + direction = direction || module.get.direction(); + if(direction == className.inward) { + module.set.inward(); + } + else { + module.set.outward(); + } + }, + looping: function() { + module.debug('Transition set to loop'); + $module + .addClass(className.looping) + ; + }, + hidden: function() { + $module + .addClass(className.transition) + .addClass(className.hidden) + ; + }, + inward: function() { + module.debug('Setting direction to inward'); + $module + .removeClass(className.outward) + .addClass(className.inward) + ; + }, + outward: function() { + module.debug('Setting direction to outward'); + $module + .removeClass(className.inward) + .addClass(className.outward) + ; + }, + visible: function() { + $module + .addClass(className.transition) + .addClass(className.visible) + ; + } + }, + + start: { + animation: function(animationClass) { + animationClass = animationClass || module.get.animationClass(); + module.debug('Starting tween', animationClass); + $module + .addClass(animationClass) + .one(animationEnd + '.complete' + eventNamespace, module.complete) + ; + if(settings.useFailSafe) { + module.add.failSafe(); + } + module.set.duration(settings.duration); + settings.onStart.call(element); + } + }, + + save: { + animation: function(animation) { + if(!module.cache) { + module.cache = {}; + } + module.cache.animation = animation; + }, + displayType: function(displayType) { + if(displayType !== 'none') { + $module.data(metadata.displayType, displayType); + } + }, + transitionExists: function(animation, exists) { + $.fn.transition.exists[animation] = exists; + module.verbose('Saving existence of transition', animation, exists); + } + }, + + restore: { + conditions: function() { + var + animation = module.get.currentAnimation() + ; + if(animation) { + $module + .removeClass(animation) + ; + module.verbose('Removing animation class', module.cache); + } + module.remove.duration(); + } + }, + + add: { + failSafe: function() { + var + duration = module.get.duration() + ; + module.timer = setTimeout(function() { + $module.triggerHandler(animationEnd); + }, duration + settings.failSafeDelay); + module.verbose('Adding fail safe timer', module.timer); + } + }, + + remove: { + animating: function() { + $module.removeClass(className.animating); + }, + animationCallbacks: function() { + module.remove.queueCallback(); + module.remove.completeCallback(); + }, + queueCallback: function() { + $module.off('.queue' + eventNamespace); + }, + completeCallback: function() { + $module.off('.complete' + eventNamespace); + }, + display: function() { + $module.css('display', ''); + }, + direction: function() { + $module + .removeClass(className.inward) + .removeClass(className.outward) + ; + }, + duration: function() { + $module + .css('animation-duration', '') + ; + }, + failSafe: function() { + module.verbose('Removing fail safe timer', module.timer); + if(module.timer) { + clearTimeout(module.timer); + } + }, + hidden: function() { + $module.removeClass(className.hidden); + }, + visible: function() { + $module.removeClass(className.visible); + }, + looping: function() { + module.debug('Transitions are no longer looping'); + if( module.is.looping() ) { + module.reset(); + $module + .removeClass(className.looping) + ; + } + }, + transition: function() { + $module + .removeClass(className.visible) + .removeClass(className.hidden) + ; + } + }, + get: { + settings: function(animation, duration, onComplete) { + // single settings object + if(typeof animation == 'object') { + return $.extend(true, {}, $.fn.transition.settings, animation); + } + // all arguments provided + else if(typeof onComplete == 'function') { + return $.extend({}, $.fn.transition.settings, { + animation : animation, + onComplete : onComplete, + duration : duration + }); + } + // only duration provided + else if(typeof duration == 'string' || typeof duration == 'number') { + return $.extend({}, $.fn.transition.settings, { + animation : animation, + duration : duration + }); + } + // duration is actually settings object + else if(typeof duration == 'object') { + return $.extend({}, $.fn.transition.settings, duration, { + animation : animation + }); + } + // duration is actually callback + else if(typeof duration == 'function') { + return $.extend({}, $.fn.transition.settings, { + animation : animation, + onComplete : duration + }); + } + // only animation provided + else { + return $.extend({}, $.fn.transition.settings, { + animation : animation + }); + } + return $.fn.transition.settings; + }, + animationClass: function(animation) { + var + animationClass = animation || settings.animation, + directionClass = (module.can.transition() && !module.has.direction()) + ? module.get.direction() + ' ' + : '' + ; + return className.animating + ' ' + + className.transition + ' ' + + directionClass + + animationClass + ; + }, + currentAnimation: function() { + return (module.cache && module.cache.animation !== undefined) + ? module.cache.animation + : false + ; + }, + currentDirection: function() { + return module.is.inward() + ? className.inward + : className.outward + ; + }, + direction: function() { + return module.is.hidden() || !module.is.visible() + ? className.inward + : className.outward + ; + }, + animationDirection: function(animation) { + var + direction + ; + animation = animation || settings.animation; + if(typeof animation === 'string') { + animation = animation.split(' '); + // search animation name for out/in class + $.each(animation, function(index, word){ + if(word === className.inward) { + direction = className.inward; + } + else if(word === className.outward) { + direction = className.outward; + } + }); + } + // return found direction + if(direction) { + return direction; + } + return false; + }, + duration: function(duration) { + duration = duration || settings.duration; + if(duration === false) { + duration = $module.css('animation-duration') || 0; + } + return (typeof duration === 'string') + ? (duration.indexOf('ms') > -1) + ? parseFloat(duration) + : parseFloat(duration) * 1000 + : duration + ; + }, + displayType: function() { + if(settings.displayType) { + return settings.displayType; + } + if($module.data(metadata.displayType) === undefined) { + // create fake element to determine display state + module.can.transition(true); + } + return $module.data(metadata.displayType); + }, + userStyle: function(style) { + style = style || $module.attr('style') || ''; + return style.replace(/display.*?;/, ''); + }, + transitionExists: function(animation) { + return $.fn.transition.exists[animation]; + }, + animationStartEvent: function() { + var + element = document.createElement('div'), + animations = { + 'animation' :'animationstart', + 'OAnimation' :'oAnimationStart', + 'MozAnimation' :'mozAnimationStart', + 'WebkitAnimation' :'webkitAnimationStart' + }, + animation + ; + for(animation in animations){ + if( element.style[animation] !== undefined ){ + return animations[animation]; + } + } + return false; + }, + animationEndEvent: function() { + var + element = document.createElement('div'), + animations = { + 'animation' :'animationend', + 'OAnimation' :'oAnimationEnd', + 'MozAnimation' :'mozAnimationEnd', + 'WebkitAnimation' :'webkitAnimationEnd' + }, + animation + ; + for(animation in animations){ + if( element.style[animation] !== undefined ){ + return animations[animation]; + } + } + return false; + } + + }, + + can: { + transition: function(forced) { + var + animation = settings.animation, + transitionExists = module.get.transitionExists(animation), + elementClass, + tagName, + $clone, + currentAnimation, + inAnimation, + directionExists, + displayType + ; + if( transitionExists === undefined || forced) { + module.verbose('Determining whether animation exists'); + elementClass = $module.attr('class'); + tagName = $module.prop('tagName'); + + $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module); + currentAnimation = $clone + .addClass(animation) + .removeClass(className.inward) + .removeClass(className.outward) + .addClass(className.animating) + .addClass(className.transition) + .css('animationName') + ; + inAnimation = $clone + .addClass(className.inward) + .css('animationName') + ; + displayType = $clone + .attr('class', elementClass) + .removeAttr('style') + .removeClass(className.hidden) + .removeClass(className.visible) + .show() + .css('display') + ; + module.verbose('Determining final display state', displayType); + module.save.displayType(displayType); + + $clone.remove(); + if(currentAnimation != inAnimation) { + module.debug('Direction exists for animation', animation); + directionExists = true; + } + else if(currentAnimation == 'none' || !currentAnimation) { + module.debug('No animation defined in css', animation); + return; + } + else { + module.debug('Static animation found', animation, displayType); + directionExists = false; + } + module.save.transitionExists(animation, directionExists); + } + return (transitionExists !== undefined) + ? transitionExists + : directionExists + ; + }, + animate: function() { + // can transition does not return a value if animation does not exist + return (module.can.transition() !== undefined); + } + }, + + is: { + animating: function() { + return $module.hasClass(className.animating); + }, + inward: function() { + return $module.hasClass(className.inward); + }, + outward: function() { + return $module.hasClass(className.outward); + }, + looping: function() { + return $module.hasClass(className.looping); + }, + occurring: function(animation) { + animation = animation || settings.animation; + animation = '.' + animation.replace(' ', '.'); + return ( $module.filter(animation).length > 0 ); + }, + visible: function() { + return $module.is(':visible'); + }, + hidden: function() { + return $module.css('visibility') === 'hidden'; + }, + supported: function() { + return(animationEnd !== false); + } + }, + + hide: function() { + module.verbose('Hiding element'); + if( module.is.animating() ) { + module.reset(); + } + element.blur(); // IE will trigger focus change if element is not blurred before hiding + module.remove.display(); + module.remove.visible(); + module.set.hidden(); + module.force.hidden(); + settings.onHide.call(element); + settings.onComplete.call(element); + // module.repaint(); + }, + + show: function(display) { + module.verbose('Showing element', display); + module.remove.hidden(); + module.set.visible(); + module.force.visible(); + settings.onShow.call(element); + settings.onComplete.call(element); + // module.repaint(); + }, + + toggle: function() { + if( module.is.visible() ) { + module.hide(); + } + else { + module.show(); + } + }, + + stop: function() { + module.debug('Stopping current animation'); + $module.triggerHandler(animationEnd); + }, + + stopAll: function() { + module.debug('Stopping all animation'); + module.remove.queueCallback(); + $module.triggerHandler(animationEnd); + }, + + clear: { + queue: function() { + module.debug('Clearing animation queue'); + module.remove.queueCallback(); + } + }, + + enable: function() { + module.verbose('Starting animation'); + $module.removeClass(className.disabled); + }, + + disable: function() { + module.debug('Stopping animation'); + $module.addClass(className.disabled); + }, + + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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 = []; + } + }, + // modified for transition to return invoke success + 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 !== undefined) + ? found + : false + ; + } + }; + module.initialize(); + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +// Records if CSS transition is available +$.fn.transition.exists = {}; + +$.fn.transition.settings = { + + // module info + name : 'Transition', + + // debug content outputted to console + debug : false, + + // verbose debug output + verbose : false, + + // performance data output + performance : true, + + // event namespace + namespace : 'transition', + + // delay between animations in group + interval : 0, + + // whether group animations should be reversed + reverse : 'auto', + + // animation callback event + onStart : function() {}, + onComplete : function() {}, + onShow : function() {}, + onHide : function() {}, + + // whether timeout should be used to ensure callback fires in cases animationend does not + useFailSafe : true, + + // delay in ms for fail safe + failSafeDelay : 100, + + // whether EXACT animation can occur twice in a row + allowRepeats : false, + + // Override final display type on visible + displayType : false, + + // animation duration + animation : 'fade', + duration : false, + + // new animations will occur after previous ones + queue : true, + + metadata : { + displayType: 'display' + }, + + className : { + animating : 'animating', + disabled : 'disabled', + hidden : 'hidden', + inward : 'in', + loading : 'loading', + looping : 'looping', + outward : 'out', + transition : 'transition', + visible : 'visible' + }, + + // possible errors + error: { + noAnimation : 'Element is no longer attached to DOM. Unable to animate.', + repeated : 'That animation is already occurring, cancelling repeated animation', + method : 'The method you called is not defined', + support : 'This browser does not support CSS animations' + } + +}; + + +})( jQuery, window, document ); diff --git a/semantic/components/transition.min.css b/semantic/components/transition.min.css new file mode 100755 index 0000000..d142aa7 --- /dev/null +++ b/semantic/components/transition.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.1.7 - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.transition{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:300ms;animation-duration:300ms;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animating.transition{-webkit-backface-visibility:hidden;backface-visibility:hidden;visibility:visible!important}.loading.transition{position:absolute;top:-99999px;left:-99999px}.hidden.transition{display:none;visibility:hidden}.visible.transition{display:block!important;visibility:visible!important}.disabled.transition{-webkit-animation-play-state:paused;animation-play-state:paused}.looping.transition{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.transition.browse{-webkit-animation-duration:500ms;animation-duration:500ms}.transition.browse.in{-webkit-animation-name:browseIn;animation-name:browseIn}.transition.browse.left.out,.transition.browse.out{-webkit-animation-name:browseOutLeft;animation-name:browseOutLeft}.transition.browse.right.out{-webkit-animation-name:browseOutRight;animation-name:browseOutRight}@-webkit-keyframes browseIn{0%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1}10%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{-webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);z-index:999}}@keyframes browseIn{0%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1}10%{-webkit-transform:scale(.8) translateZ(0);transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{-webkit-transform:scale(1.05) translateZ(0);transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0);z-index:999}}@-webkit-keyframes browseOutLeft{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;-webkit-transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutLeft{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;-webkit-transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@-webkit-keyframes browseOutRight{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;-webkit-transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutRight{0%{z-index:999;-webkit-transform:translateX(0) rotateY(0) rotateX(0);transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;-webkit-transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;-webkit-transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}.drop.transition{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-duration:400ms;animation-duration:400ms;-webkit-animation-timing-function:cubic-bezier(.34,1.61,.7,1);animation-timing-function:cubic-bezier(.34,1.61,.7,1)}.drop.transition.in{-webkit-animation-name:dropIn;animation-name:dropIn}.drop.transition.out{-webkit-animation-name:dropOut;animation-name:dropOut}@-webkit-keyframes dropIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes dropIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes dropOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes dropOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}.transition.fade.in{-webkit-animation-name:fadeIn;animation-name:fadeIn}.transition[class*="fade up"].in{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.transition[class*="fade down"].in{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}.transition[class*="fade left"].in{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.transition[class*="fade right"].in{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.transition.fade.out{-webkit-animation-name:fadeOut;animation-name:fadeOut}.transition[class*="fade up"].out{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}.transition[class*="fade down"].out{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}.transition[class*="fade left"].out{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.transition[class*="fade right"].out{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(10%);transform:translateY(10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-10%);transform:translateY(-10%)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(10%);transform:translateX(10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(10%);transform:translateX(10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-10%);transform:translateX(-10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(-10%);transform:translateX(-10%)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(5%);transform:translateY(5%)}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-5%);transform:translateY(-5%)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-5%);transform:translateY(-5%)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(5%);transform:translateX(5%)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(5%);transform:translateX(5%)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-5%);transform:translateX(-5%)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-5%);transform:translateX(-5%)}}.flip.transition.in,.flip.transition.out{-webkit-animation-duration:600ms;animation-duration:600ms}.horizontal.flip.transition.in{-webkit-animation-name:horizontalFlipIn;animation-name:horizontalFlipIn}.horizontal.flip.transition.out{-webkit-animation-name:horizontalFlipOut;animation-name:horizontalFlipOut}.vertical.flip.transition.in{-webkit-animation-name:verticalFlipIn;animation-name:verticalFlipIn}.vertical.flip.transition.out{-webkit-animation-name:verticalFlipOut;animation-name:verticalFlipOut}@-webkit-keyframes horizontalFlipIn{0%{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}}@keyframes horizontalFlipIn{0%{-webkit-transform:perspective(2000px) rotateY(-90deg);transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}}@-webkit-keyframes verticalFlipIn{0%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}}@keyframes verticalFlipIn{0%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}}@-webkit-keyframes horizontalFlipOut{0%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}}@keyframes horizontalFlipOut{0%{-webkit-transform:perspective(2000px) rotateY(0);transform:perspective(2000px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateY(90deg);transform:perspective(2000px) rotateY(90deg);opacity:0}}@-webkit-keyframes verticalFlipOut{0%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}}@keyframes verticalFlipOut{0%{-webkit-transform:perspective(2000px) rotateX(0);transform:perspective(2000px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(2000px) rotateX(-90deg);transform:perspective(2000px) rotateX(-90deg);opacity:0}}.scale.transition.in{-webkit-animation-name:scaleIn;animation-name:scaleIn}.scale.transition.out{-webkit-animation-name:scaleOut;animation-name:scaleOut}@-webkit-keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes scaleIn{0%{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes scaleOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes scaleOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)}}.transition.fly{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}.transition.fly.in{-webkit-animation-name:flyIn;animation-name:flyIn}.transition[class*="fly up"].in{-webkit-animation-name:flyInUp;animation-name:flyInUp}.transition[class*="fly down"].in{-webkit-animation-name:flyInDown;animation-name:flyInDown}.transition[class*="fly left"].in{-webkit-animation-name:flyInLeft;animation-name:flyInLeft}.transition[class*="fly right"].in{-webkit-animation-name:flyInRight;animation-name:flyInRight}.transition.fly.out{-webkit-animation-name:flyOut;animation-name:flyOut}.transition[class*="fly up"].out{-webkit-animation-name:flyOutUp;animation-name:flyOutUp}.transition[class*="fly down"].out{-webkit-animation-name:flyOutDown;animation-name:flyOutDown}.transition[class*="fly left"].out{-webkit-animation-name:flyOutLeft;animation-name:flyOutLeft}.transition[class*="fly right"].out{-webkit-animation-name:flyOutRight;animation-name:flyOutRight}@-webkit-keyframes flyIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes flyIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes flyInUp{0%{opacity:0;-webkit-transform:translate3d(0,1500px,0);transform:translate3d(0,1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes flyInUp{0%{opacity:0;-webkit-transform:translate3d(0,1500px,0);transform:translate3d(0,1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes flyInDown{0%{opacity:0;-webkit-transform:translate3d(0,-1500px,0);transform:translate3d(0,-1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInDown{0%{opacity:0;-webkit-transform:translate3d(0,-1500px,0);transform:translate3d(0,-1500px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyInLeft{0%{opacity:0;-webkit-transform:translate3d(1500px,0,0);transform:translate3d(1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInLeft{0%{opacity:0;-webkit-transform:translate3d(1500px,0,0);transform:translate3d(1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyInRight{0%{opacity:0;-webkit-transform:translate3d(-1500px,0,0);transform:translate3d(-1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes flyInRight{0%{opacity:0;-webkit-transform:translate3d(-1500px,0,0);transform:translate3d(-1500px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@-webkit-keyframes flyOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes flyOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes flyOutUp{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes flyOutUp{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes flyOutDown{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes flyOutDown{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@-webkit-keyframes flyOutRight{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes flyOutRight{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes flyOutLeft{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes flyOutLeft{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.transition.slide.in,.transition[class*="slide down"].in{-webkit-animation-name:slideInY;animation-name:slideInY;-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center}.transition[class*="slide up"].in{-webkit-animation-name:slideInY;animation-name:slideInY;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="slide left"].in{-webkit-animation-name:slideInX;animation-name:slideInX;-webkit-transform-origin:center right;-ms-transform-origin:center right;transform-origin:center right}.transition[class*="slide right"].in{-webkit-animation-name:slideInX;animation-name:slideInX;-webkit-transform-origin:center left;-ms-transform-origin:center left;transform-origin:center left}.transition.slide.out,.transition[class*="slide down"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center}.transition[class*="slide up"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="slide left"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;-webkit-transform-origin:center right;-ms-transform-origin:center right;transform-origin:center right}.transition[class*="slide right"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;-webkit-transform-origin:center left;-ms-transform-origin:center left;transform-origin:center left}@-webkit-keyframes slideInY{0%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}100%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes slideInY{0%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}100%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}@-webkit-keyframes slideInX{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}100%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes slideInX{0%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}100%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes slideOutY{0%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}100%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}@keyframes slideOutY{0%{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}100%{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}}@-webkit-keyframes slideOutX{0%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}100%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}}@keyframes slideOutX{0%{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}100%{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}}.transition.swing{-webkit-animation-duration:800ms;animation-duration:800ms}.transition[class*="swing down"].in{-webkit-animation-name:swingInX;animation-name:swingInX;-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center}.transition[class*="swing up"].in{-webkit-animation-name:swingInX;animation-name:swingInX;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="swing left"].in{-webkit-animation-name:swingInY;animation-name:swingInY;-webkit-transform-origin:center right;-ms-transform-origin:center right;transform-origin:center right}.transition[class*="swing right"].in{-webkit-animation-name:swingInY;animation-name:swingInY;-webkit-transform-origin:center left;-ms-transform-origin:center left;transform-origin:center left}.transition.swing.out,.transition[class*="swing down"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center}.transition[class*="swing up"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;-webkit-transform-origin:bottom center;-ms-transform-origin:bottom center;transform-origin:bottom center}.transition[class*="swing left"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;-webkit-transform-origin:center right;-ms-transform-origin:center right;transform-origin:center right}.transition[class*="swing right"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;-webkit-transform-origin:center left;-ms-transform-origin:center left;transform-origin:center left}@-webkit-keyframes swingInX{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateX(15deg);transform:perspective(1000px) rotateX(15deg)}80%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}100%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}}@keyframes swingInX{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateX(15deg);transform:perspective(1000px) rotateX(15deg)}80%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}100%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}}@-webkit-keyframes swingInY{0%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateY(-17.5deg);transform:perspective(1000px) rotateY(-17.5deg)}80%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}100%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}}@keyframes swingInY{0%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}60%{-webkit-transform:perspective(1000px) rotateY(-17.5deg);transform:perspective(1000px) rotateY(-17.5deg)}80%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}100%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}}@-webkit-keyframes swingOutX{0%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}40%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}60%{-webkit-transform:perspective(1000px) rotateX(17.5deg);transform:perspective(1000px) rotateX(17.5deg)}80%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes swingOutX{0%{-webkit-transform:perspective(1000px) rotateX(0);transform:perspective(1000px) rotateX(0)}40%{-webkit-transform:perspective(1000px) rotateX(-7.5deg);transform:perspective(1000px) rotateX(-7.5deg)}60%{-webkit-transform:perspective(1000px) rotateX(17.5deg);transform:perspective(1000px) rotateX(17.5deg)}80%{-webkit-transform:perspective(1000px) rotateX(-30deg);transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@-webkit-keyframes swingOutY{0%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}40%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}60%{-webkit-transform:perspective(1000px) rotateY(-10deg);transform:perspective(1000px) rotateY(-10deg)}80%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}}@keyframes swingOutY{0%{-webkit-transform:perspective(1000px) rotateY(0);transform:perspective(1000px) rotateY(0)}40%{-webkit-transform:perspective(1000px) rotateY(7.5deg);transform:perspective(1000px) rotateY(7.5deg)}60%{-webkit-transform:perspective(1000px) rotateY(-10deg);transform:perspective(1000px) rotateY(-10deg)}80%{-webkit-transform:perspective(1000px) rotateY(30deg);transform:perspective(1000px) rotateY(30deg);opacity:1}100%{-webkit-transform:perspective(1000px) rotateY(-90deg);transform:perspective(1000px) rotateY(-90deg);opacity:0}}.flash.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:flash;animation-name:flash}.shake.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:shake;animation-name:shake}.bounce.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:bounce;animation-name:bounce}.tada.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:tada;animation-name:tada}.pulse.transition{-webkit-animation-duration:500ms;animation-duration:500ms;-webkit-animation-name:pulse;animation-name:pulse}.jiggle.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:jiggle;animation-name:jiggle}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-3deg);transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@-webkit-keyframes pulse{0%,100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}}@keyframes pulse{0%,100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}}@-webkit-keyframes jiggle{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}}@keyframes jiggle{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}} \ No newline at end of file diff --git a/semantic/components/transition.min.js b/semantic/components/transition.min.js new file mode 100755 index 0000000..1c5970b --- /dev/null +++ b/semantic/components/transition.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(n,e,i,t){"use strict";n.fn.transition=function(){{var a,o=n(this),r=o.selector||"",s=(new Date).getTime(),l=[],u=arguments,c=u[0],d=[].slice.call(arguments,1),m="string"==typeof c;e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame||e.msRequestAnimationFrame||function(n){setTimeout(n,0)}}return o.each(function(e){var f,p,g,v,b,y,h,w,C,A=n(this),S=this;C={initialize:function(){f=C.get.settings.apply(S,u),v=f.className,g=f.error,b=f.metadata,w="."+f.namespace,h="module-"+f.namespace,p=A.data(h)||C,y=C.get.animationEndEvent(),m&&(m=C.invoke(c)),m===!1&&(C.verbose("Converted arguments into settings object",f),f.interval?C.delay(f.animate):C.animate(),C.instantiate())},instantiate:function(){C.verbose("Storing instance of module",C),p=C,A.data(h,p)},destroy:function(){C.verbose("Destroying previous module for",S),A.removeData(h)},refresh:function(){C.verbose("Refreshing display type on next animation"),delete C.displayType},forceRepaint:function(){C.verbose("Forcing element repaint");var n=A.parent(),e=A.next();0===e.length?A.detach().appendTo(n):A.detach().insertBefore(e)},repaint:function(){C.verbose("Repainting element");S.offsetWidth},delay:function(n){var i,a,r=C.get.animationDirection();r||(r=C.can.transition()?C.get.direction():"static"),n=n!==t?n:f.interval,i="auto"==f.reverse&&r==v.outward,a=i||1==f.reverse?(o.length-e)*f.interval:e*f.interval,C.debug("Delaying animation by",a),setTimeout(C.animate,a)},animate:function(n){if(f=n||f,!C.is.supported())return C.error(g.support),!1;if(C.debug("Preparing animation",f.animation),C.is.animating()){if(f.queue)return!f.allowRepeats&&C.has.direction()&&C.is.occurring()&&C.queuing!==!0?C.debug("Animation is currently occurring, preventing queueing same animation",f.animation):C.queue(f.animation),!1;if(!f.allowRepeats&&C.is.occurring())return C.debug("Animation is already occurring, will not execute repeated animation",f.animation),!1;C.debug("New animation started, completing previous early",f.animation),p.complete()}C.can.animate()?C.set.animating(f.animation):C.error(g.noAnimation,f.animation,S)},reset:function(){C.debug("Resetting animation to beginning conditions"),C.remove.animationCallbacks(),C.restore.conditions(),C.remove.animating()},queue:function(n){C.debug("Queueing animation of",n),C.queuing=!0,A.one(y+".queue"+w,function(){C.queuing=!1,C.repaint(),C.animate.apply(this,f)})},complete:function(n){C.debug("Animation complete",f.animation),C.remove.completeCallback(),C.remove.failSafe(),C.is.looping()||(C.is.outward()?(C.verbose("Animation is outward, hiding element"),C.restore.conditions(),C.hide()):C.is.inward()?(C.verbose("Animation is outward, showing element"),C.restore.conditions(),C.show()):(C.verbose("Static animation completed"),C.restore.conditions(),f.onComplete.call(S)))},force:{visible:function(){var n=A.attr("style"),e=C.get.userStyle(),i=C.get.displayType(),a=e+"display: "+i+" !important;",o=A.css("display"),r=n===t||""===n;o!==i?(C.verbose("Overriding default display to show element",i),A.attr("style",a)):r&&A.removeAttr("style")},hidden:function(){var n=A.attr("style"),e=A.css("display"),i=n===t||""===n;"none"===e||C.is.hidden()?i&&A.removeAttr("style"):(C.verbose("Overriding default display to hide element"),A.css("display","none"))}},has:{direction:function(e){var i=!1;return e=e||f.animation,"string"==typeof e&&(e=e.split(" "),n.each(e,function(n,e){(e===v.inward||e===v.outward)&&(i=!0)})),i},inlineDisplay:function(){var e=A.attr("style")||"";return n.isArray(e.match(/display.*?;/,""))}},set:{animating:function(n){var e;C.remove.completeCallback(),n=n||f.animation,e=C.get.animationClass(n),C.save.animation(e),C.force.visible(),C.remove.hidden(),C.remove.direction(),C.start.animation(e)},duration:function(n,e){e=e||f.duration,e="number"==typeof e?e+"ms":e,(e||0===e)&&(C.verbose("Setting animation duration",e),A.css({"animation-duration":e}))},direction:function(n){n=n||C.get.direction(),n==v.inward?C.set.inward():C.set.outward()},looping:function(){C.debug("Transition set to loop"),A.addClass(v.looping)},hidden:function(){A.addClass(v.transition).addClass(v.hidden)},inward:function(){C.debug("Setting direction to inward"),A.removeClass(v.outward).addClass(v.inward)},outward:function(){C.debug("Setting direction to outward"),A.removeClass(v.inward).addClass(v.outward)},visible:function(){A.addClass(v.transition).addClass(v.visible)}},start:{animation:function(n){n=n||C.get.animationClass(),C.debug("Starting tween",n),A.addClass(n).one(y+".complete"+w,C.complete),f.useFailSafe&&C.add.failSafe(),C.set.duration(f.duration),f.onStart.call(S)}},save:{animation:function(n){C.cache||(C.cache={}),C.cache.animation=n},displayType:function(n){"none"!==n&&A.data(b.displayType,n)},transitionExists:function(e,i){n.fn.transition.exists[e]=i,C.verbose("Saving existence of transition",e,i)}},restore:{conditions:function(){var n=C.get.currentAnimation();n&&(A.removeClass(n),C.verbose("Removing animation class",C.cache)),C.remove.duration()}},add:{failSafe:function(){var n=C.get.duration();C.timer=setTimeout(function(){A.triggerHandler(y)},n+f.failSafeDelay),C.verbose("Adding fail safe timer",C.timer)}},remove:{animating:function(){A.removeClass(v.animating)},animationCallbacks:function(){C.remove.queueCallback(),C.remove.completeCallback()},queueCallback:function(){A.off(".queue"+w)},completeCallback:function(){A.off(".complete"+w)},display:function(){A.css("display","")},direction:function(){A.removeClass(v.inward).removeClass(v.outward)},duration:function(){A.css("animation-duration","")},failSafe:function(){C.verbose("Removing fail safe timer",C.timer),C.timer&&clearTimeout(C.timer)},hidden:function(){A.removeClass(v.hidden)},visible:function(){A.removeClass(v.visible)},looping:function(){C.debug("Transitions are no longer looping"),C.is.looping()&&(C.reset(),A.removeClass(v.looping))},transition:function(){A.removeClass(v.visible).removeClass(v.hidden)}},get:{settings:function(e,i,t){return"object"==typeof e?n.extend(!0,{},n.fn.transition.settings,e):"function"==typeof t?n.extend({},n.fn.transition.settings,{animation:e,onComplete:t,duration:i}):"string"==typeof i||"number"==typeof i?n.extend({},n.fn.transition.settings,{animation:e,duration:i}):"object"==typeof i?n.extend({},n.fn.transition.settings,i,{animation:e}):"function"==typeof i?n.extend({},n.fn.transition.settings,{animation:e,onComplete:i}):n.extend({},n.fn.transition.settings,{animation:e})},animationClass:function(n){var e=n||f.animation,i=C.can.transition()&&!C.has.direction()?C.get.direction()+" ":"";return v.animating+" "+v.transition+" "+i+e},currentAnimation:function(){return C.cache&&C.cache.animation!==t?C.cache.animation:!1},currentDirection:function(){return C.is.inward()?v.inward:v.outward},direction:function(){return C.is.hidden()||!C.is.visible()?v.inward:v.outward},animationDirection:function(e){var i;return e=e||f.animation,"string"==typeof e&&(e=e.split(" "),n.each(e,function(n,e){e===v.inward?i=v.inward:e===v.outward&&(i=v.outward)})),i?i:!1},duration:function(n){return n=n||f.duration,n===!1&&(n=A.css("animation-duration")||0),"string"==typeof n?n.indexOf("ms")>-1?parseFloat(n):1e3*parseFloat(n):n},displayType:function(){return f.displayType?f.displayType:(A.data(b.displayType)===t&&C.can.transition(!0),A.data(b.displayType))},userStyle:function(n){return n=n||A.attr("style")||"",n.replace(/display.*?;/,"")},transitionExists:function(e){return n.fn.transition.exists[e]},animationStartEvent:function(){var n,e=i.createElement("div"),a={animation:"animationstart",OAnimation:"oAnimationStart",MozAnimation:"mozAnimationStart",WebkitAnimation:"webkitAnimationStart"};for(n in a)if(e.style[n]!==t)return a[n];return!1},animationEndEvent:function(){var n,e=i.createElement("div"),a={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"mozAnimationEnd",WebkitAnimation:"webkitAnimationEnd"};for(n in a)if(e.style[n]!==t)return a[n];return!1}},can:{transition:function(e){var i,a,o,r,s,l,u,c=f.animation,d=C.get.transitionExists(c);if(d===t||e){if(C.verbose("Determining whether animation exists"),i=A.attr("class"),a=A.prop("tagName"),o=n("<"+a+" />").addClass(i).insertAfter(A),r=o.addClass(c).removeClass(v.inward).removeClass(v.outward).addClass(v.animating).addClass(v.transition).css("animationName"),s=o.addClass(v.inward).css("animationName"),u=o.attr("class",i).removeAttr("style").removeClass(v.hidden).removeClass(v.visible).show().css("display"),C.verbose("Determining final display state",u),C.save.displayType(u),o.remove(),r!=s)C.debug("Direction exists for animation",c),l=!0;else{if("none"==r||!r)return void C.debug("No animation defined in css",c);C.debug("Static animation found",c,u),l=!1}C.save.transitionExists(c,l)}return d!==t?d:l},animate:function(){return C.can.transition()!==t}},is:{animating:function(){return A.hasClass(v.animating)},inward:function(){return A.hasClass(v.inward)},outward:function(){return A.hasClass(v.outward)},looping:function(){return A.hasClass(v.looping)},occurring:function(n){return n=n||f.animation,n="."+n.replace(" ","."),A.filter(n).length>0},visible:function(){return A.is(":visible")},hidden:function(){return"hidden"===A.css("visibility")},supported:function(){return y!==!1}},hide:function(){C.verbose("Hiding element"),C.is.animating()&&C.reset(),S.blur(),C.remove.display(),C.remove.visible(),C.set.hidden(),C.force.hidden(),f.onHide.call(S),f.onComplete.call(S)},show:function(n){C.verbose("Showing element",n),C.remove.hidden(),C.set.visible(),C.force.visible(),f.onShow.call(S),f.onComplete.call(S)},toggle:function(){C.is.visible()?C.hide():C.show()},stop:function(){C.debug("Stopping current animation"),A.triggerHandler(y)},stopAll:function(){C.debug("Stopping all animation"),C.remove.queueCallback(),A.triggerHandler(y)},clear:{queue:function(){C.debug("Clearing animation queue"),C.remove.queueCallback()}},enable:function(){C.verbose("Starting animation"),A.removeClass(v.disabled)},disable:function(){C.debug("Stopping animation"),A.addClass(v.disabled)},setting:function(e,i){if(C.debug("Changing setting",e,i),n.isPlainObject(e))n.extend(!0,f,e);else{if(i===t)return f[e];f[e]=i}},internal:function(e,i){if(n.isPlainObject(e))n.extend(!0,C,e);else{if(i===t)return C[e];C[e]=i}},debug:function(){f.debug&&(f.performance?C.performance.log(arguments):(C.debug=Function.prototype.bind.call(console.info,console,f.name+":"),C.debug.apply(console,arguments)))},verbose:function(){f.verbose&&f.debug&&(f.performance?C.performance.log(arguments):(C.verbose=Function.prototype.bind.call(console.info,console,f.name+":"),C.verbose.apply(console,arguments)))},error:function(){C.error=Function.prototype.bind.call(console.error,console,f.name+":"),C.error.apply(console,arguments)},performance:{log:function(n){var e,i,t;f.performance&&(e=(new Date).getTime(),t=s||e,i=e-t,s=e,l.push({Name:n[0],Arguments:[].slice.call(n,1)||"",Element:S,"Execution Time":i})),clearTimeout(C.performance.timer),C.performance.timer=setTimeout(C.performance.display,500)},display:function(){var e=f.name+":",i=0;s=!1,clearTimeout(C.performance.timer),n.each(l,function(n,e){i+=e["Execution Time"]}),e+=" "+i+"ms",r&&(e+=" '"+r+"'"),o.length>1&&(e+=" ("+o.length+")"),(console.group!==t||console.table!==t)&&l.length>0&&(console.groupCollapsed(e),console.table?console.table(l):n.each(l,function(n,e){console.log(e.Name+": "+e["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(e,i,o){var r,s,l,u=p;return i=i||d,o=S||o,"string"==typeof e&&u!==t&&(e=e.split(/[\. ]/),r=e.length-1,n.each(e,function(i,a){var o=i!=r?a+e[i+1].charAt(0).toUpperCase()+e[i+1].slice(1):e;if(n.isPlainObject(u[o])&&i!=r)u=u[o];else{if(u[o]!==t)return s=u[o],!1;if(!n.isPlainObject(u[a])||i==r)return u[a]!==t?(s=u[a],!1):!1;u=u[a]}})),n.isFunction(s)?l=s.apply(o,i):s!==t&&(l=s),n.isArray(a)?a.push(l):a!==t?a=[a,l]:l!==t&&(a=l),s!==t?s:!1}},C.initialize()}),a!==t?a:this},n.fn.transition.exists={},n.fn.transition.settings={name:"Transition",debug:!1,verbose:!1,performance:!0,namespace:"transition",interval:0,reverse:"auto",onStart:function(){},onComplete:function(){},onShow:function(){},onHide:function(){},useFailSafe:!0,failSafeDelay:100,allowRepeats:!1,displayType:!1,animation:"fade",duration:!1,queue:!0,metadata:{displayType:"display"},className:{animating:"animating",disabled:"disabled",hidden:"hidden",inward:"in",loading:"loading",looping:"looping",outward:"out",transition:"transition",visible:"visible"},error:{noAnimation:"Element is no longer attached to DOM. Unable to animate.",repeated:"That animation is already occurring, cancelling repeated animation",method:"The method you called is not defined",support:"This browser does not support CSS animations"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/video.css b/semantic/components/video.css new file mode 100755 index 0000000..79254cb --- /dev/null +++ b/semantic/components/video.css @@ -0,0 +1,125 @@ +/*! + * # Semantic UI 2.0.0 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Video +*******************************/ + +.ui.video { + background-color: #dddddd; + position: relative; + max-width: 100%; + padding-bottom: 56.25%; + height: 0px; + overflow: hidden; +} + +/*-------------- + Content +---------------*/ + + +/* Placeholder Image */ +.ui.video .placeholder { + background-color: #333333; +} + +/* Play Icon Overlay */ +.ui.video .play { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + z-index: 10; + width: 100%; + height: 100%; + background: transparent; + -webkit-transition: background 0.2s ease; + transition: background 0.2s ease; +} +.ui.video .play.icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 11; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + color: rgba(255, 255, 255, 0.7); + font-size: 7rem; + text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15); + -webkit-transition: color 0.2s ease; + transition: color 0.2s ease; +} +.ui.video .placeholder { + position: absolute; + top: 0px; + left: 0px; + display: block; + width: 100%; + height: 100%; +} + +/* IFrame Embed */ +.ui.video .embed iframe, +.ui.video .embed embed, +.ui.video .embed object { + position: absolute; + border: none; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + margin: 0em; + padding: 0em; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.video .play:hover { + background: rgba(0, 0, 0, 0); +} +.ui.video .play:hover:before { + color: #ffffff; +} + +/*-------------- + Active +---------------*/ + +.ui.active.video .play, +.ui.active.video .placeholder { + display: none; +} +.ui.active.video .embed { + display: inline; +} + + +/******************************* + Video Overrides +*******************************/ + + + +/******************************* + Site Overrides +*******************************/ + diff --git a/semantic/components/video.js b/semantic/components/video.js new file mode 100755 index 0000000..0ed27bb --- /dev/null +++ b/semantic/components/video.js @@ -0,0 +1,532 @@ +/*! + * # Semantic UI 2.0.0 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributorss + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.fn.video = 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), + + 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.video.settings, parameters) + : $.extend({}, $.fn.video.settings), + + selector = settings.selector, + className = settings.className, + error = settings.error, + metadata = settings.metadata, + namespace = settings.namespace, + templates = settings.templates, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $window = $(window), + $module = $(this), + $placeholder = $module.find(selector.placeholder), + $playButton = $module.find(selector.playButton), + $embed = $module.find(selector.embed), + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + module.debug('Initializing video'); + module.create(); + $module + .on('click' + eventNamespace, selector.placeholder, module.play) + .on('click' + eventNamespace, selector.playButton, module.play) + ; + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + create: function() { + var + image = $module.data(metadata.image), + html = templates.video(image) + ; + $module.html(html); + module.refresh(); + if(!image) { + module.play(); + } + module.debug('Creating html for video element', html); + }, + + destroy: function() { + module.verbose('Destroying previous instance of video'); + module.reset(); + $module + .removeData(moduleNamespace) + .off(eventNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $placeholder = $module.find(selector.placeholder); + $playButton = $module.find(selector.playButton); + $embed = $module.find(selector.embed); + }, + + // sets new video + change: function(source, id, url) { + module.debug('Changing video to ', source, id, url); + $module + .data(metadata.source, source) + .data(metadata.id, id) + .data(metadata.url, url) + ; + settings.onChange(); + }, + + // clears video embed + reset: function() { + module.debug('Clearing video embed and showing placeholder'); + $module + .removeClass(className.active) + ; + $embed + .html(' ') + ; + $placeholder + .show() + ; + settings.onReset(); + }, + + // plays current video + play: function() { + module.debug('Playing video'); + var + source = $module.data(metadata.source) || false, + url = $module.data(metadata.url) || false, + id = $module.data(metadata.id) || false + ; + $embed + .html( module.generate.html(source, id, url) ) + ; + $module + .addClass(className.active) + ; + settings.onPlay(); + }, + + get: { + source: function(url) { + if(typeof url !== 'string') { + return false; + } + if(url.search('youtube.com') !== -1) { + return 'youtube'; + } + else if(url.search('vimeo.com') !== -1) { + return 'vimeo'; + } + return false; + }, + id: function(url) { + if(url.match(settings.regExp.youtube)) { + return url.match(settings.regExp.youtube)[1]; + } + else if(url.match(settings.regExp.vimeo)) { + return url.match(settings.regExp.vimeo)[2]; + } + return false; + } + }, + + generate: { + // generates iframe html + html: function(source, id, url) { + module.debug('Generating embed html'); + var + html + ; + // allow override of settings + source = source || settings.source; + id = id || settings.id; + if((source && id) || url) { + if(!source || !id) { + source = module.get.source(url); + id = module.get.id(url); + } + if(source == 'vimeo') { + html = '' + + '' + ; + } + else if(source == 'youtube') { + html = '' + + '' + ; + } + } + else { + module.error(error.noVideo); + } + return html; + }, + + // generate url parameters + url: function(source) { + var + api = (settings.api) + ? 1 + : 0, + autoplay = (settings.autoplay === 'auto') + ? ($module.data('image') !== undefined) + : settings.autoplay, + hd = (settings.hd) + ? 1 + : 0, + showUI = (settings.showUI) + ? 1 + : 0, + // opposite used for some params + hideUI = !(settings.showUI) + ? 1 + : 0, + url = '' + ; + if(source == 'vimeo') { + url = '' + + 'api=' + api + + '&title=' + showUI + + '&byline=' + showUI + + '&portrait=' + showUI + + '&autoplay=' + autoplay + ; + if(settings.color) { + url += '&color=' + settings.color; + } + } + if(source == 'ustream') { + url = '' + + 'autoplay=' + autoplay + ; + if(settings.color) { + url += '&color=' + settings.color; + } + } + else if(source == 'youtube') { + url = '' + + 'enablejsapi=' + api + + '&autoplay=' + autoplay + + '&autohide=' + hideUI + + '&hq=' + hd + + '&modestbranding=1' + ; + if(settings.color) { + url += '&color=' + settings.color; + } + } + return url; + } + }, + + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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 { + 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.video.settings = { + + name : 'Video', + namespace : 'video', + + debug : false, + verbose : false, + performance : true, + + metadata : { + id : 'id', + image : 'image', + source : 'source', + url : 'url' + }, + + source : false, + url : false, + id : false, + + aspectRatio : (16/9), + + onPlay : function(){}, + onReset : function(){}, + onChange : function(){}, + + // callbacks not coded yet (needs to use jsapi) + onPause : function() {}, + onStop : function() {}, + + width : 'auto', + height : 'auto', + + autoplay : 'auto', + color : '#442359', + hd : true, + showUI : false, + api : true, + + regExp : { + youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/, + vimeo : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/ + }, + + error : { + noVideo : 'No video specified', + method : 'The method you called is not defined' + }, + + className : { + active : 'active' + }, + + selector : { + embed : '.embed', + placeholder : '.placeholder', + playButton : '.play' + } +}; + +$.fn.video.settings.templates = { + video: function(image) { + var + html = '' + ; + if(image) { + html += '' + + '' + + '

' + ; + } + html += '

'; + return html; + } +}; + + +})( jQuery, window , document ); diff --git a/semantic/components/video.min.css b/semantic/components/video.min.css new file mode 100755 index 0000000..517736c --- /dev/null +++ b/semantic/components/video.min.css @@ -0,0 +1,10 @@ +/*! + * # Semantic UI 2.0.0 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */.ui.video{background-color:#ddd;position:relative;max-width:100%;padding-bottom:56.25%;height:0;overflow:hidden}.ui.video .placeholder{background-color:#333}.ui.video .play{cursor:pointer;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:0 0;-webkit-transition:background .2s ease;transition:background .2s ease}.ui.video .play.icon:before{position:absolute;top:50%;left:50%;z-index:11;-webkit-transform:translateX(-50%)translateY(-50%);-ms-transform:translateX(-50%)translateY(-50%);transform:translateX(-50%)translateY(-50%);color:rgba(255,255,255,.7);font-size:7rem;text-shadow:2px 2px 0 rgba(0,0,0,.15);-webkit-transition:color .2s ease;transition:color .2s ease}.ui.video .placeholder{position:absolute;top:0;left:0;display:block;width:100%;height:100%}.ui.video .embed embed,.ui.video .embed iframe,.ui.video .embed object{position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0}.ui.video .play:hover{background:0 0}.ui.video .play:hover:before{color:#fff}.ui.active.video .placeholder,.ui.active.video .play{display:none}.ui.active.video .embed{display:inline} \ No newline at end of file diff --git a/semantic/components/video.min.js b/semantic/components/video.min.js new file mode 100755 index 0000000..683eccf --- /dev/null +++ b/semantic/components/video.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.0.0 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributorss + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,o,t,n){"use strict";e.fn.video=function(t){{var a,i=e(this),r=i.selector||"",l=(new Date).getTime(),c=[],u=arguments[0],s="string"==typeof u,m=[].slice.call(arguments,1);o.requestAnimationFrame||o.mozRequestAnimationFrame||o.webkitRequestAnimationFrame||o.msRequestAnimationFrame||function(e){setTimeout(e,0)}}return i.each(function(){var d,p=e.isPlainObject(t)?e.extend(!0,{},e.fn.video.settings,t):e.extend({},e.fn.video.settings),f=p.selector,g=p.className,h=p.error,v=p.metadata,b=p.namespace,y=p.templates,w="."+b,x="module-"+b,F=(e(o),e(this)),C=F.find(f.placeholder),E=F.find(f.playButton),T=F.find(f.embed),A=this,P=F.data(x);d={initialize:function(){d.debug("Initializing video"),d.create(),F.on("click"+w,f.placeholder,d.play).on("click"+w,f.playButton,d.play),d.instantiate()},instantiate:function(){d.verbose("Storing instance of module",d),P=d,F.data(x,d)},create:function(){var e=F.data(v.image),o=y.video(e);F.html(o),d.refresh(),e||d.play(),d.debug("Creating html for video element",o)},destroy:function(){d.verbose("Destroying previous instance of video"),d.reset(),F.removeData(x).off(w)},refresh:function(){d.verbose("Refreshing selector cache"),C=F.find(f.placeholder),E=F.find(f.playButton),T=F.find(f.embed)},change:function(e,o,t){d.debug("Changing video to ",e,o,t),F.data(v.source,e).data(v.id,o).data(v.url,t),p.onChange()},reset:function(){d.debug("Clearing video embed and showing placeholder"),F.removeClass(g.active),T.html(" "),C.show(),p.onReset()},play:function(){d.debug("Playing video");var e=F.data(v.source)||!1,o=F.data(v.url)||!1,t=F.data(v.id)||!1;T.html(d.generate.html(e,t,o)),F.addClass(g.active),p.onPlay()},get:{source:function(e){return"string"!=typeof e?!1:-1!==e.search("youtube.com")?"youtube":-1!==e.search("vimeo.com")?"vimeo":!1},id:function(e){return e.match(p.regExp.youtube)?e.match(p.regExp.youtube)[1]:e.match(p.regExp.vimeo)?e.match(p.regExp.vimeo)[2]:!1}},generate:{html:function(e,o,t){d.debug("Generating embed html");var n;return e=e||p.source,o=o||p.id,e&&o||t?(e&&o||(e=d.get.source(t),o=d.get.id(t)),"vimeo"==e?n='':"youtube"==e&&(n='')):d.error(h.noVideo),n},url:function(e){var o=p.api?1:0,t="auto"===p.autoplay?F.data("image")!==n:p.autoplay,a=p.hd?1:0,i=p.showUI?1:0,r=p.showUI?0:1,l="";return"vimeo"==e&&(l="api="+o+"&title="+i+"&byline="+i+"&portrait="+i+"&autoplay="+t,p.color&&(l+="&color="+p.color)),"ustream"==e?(l="autoplay="+t,p.color&&(l+="&color="+p.color)):"youtube"==e&&(l="enablejsapi="+o+"&autoplay="+t+"&autohide="+r+"&hq="+a+"&modestbranding=1",p.color&&(l+="&color="+p.color)),l}},setting:function(o,t){if(d.debug("Changing setting",o,t),e.isPlainObject(o))e.extend(!0,p,o);else{if(t===n)return p[o];p[o]=t}},internal:function(o,t){if(e.isPlainObject(o))e.extend(!0,d,o);else{if(t===n)return d[o];d[o]=t}},debug:function(){p.debug&&(p.performance?d.performance.log(arguments):(d.debug=Function.prototype.bind.call(console.info,console,p.name+":"),d.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?d.performance.log(arguments):(d.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),d.verbose.apply(console,arguments)))},error:function(){d.error=Function.prototype.bind.call(console.error,console,p.name+":"),d.error.apply(console,arguments)},performance:{log:function(e){var o,t,n;p.performance&&(o=(new Date).getTime(),n=l||o,t=o-n,l=o,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:A,"Execution Time":t})),clearTimeout(d.performance.timer),d.performance.timer=setTimeout(d.performance.display,500)},display:function(){var o=p.name+":",t=0;l=!1,clearTimeout(d.performance.timer),e.each(c,function(e,o){t+=o["Execution Time"]}),o+=" "+t+"ms",r&&(o+=" '"+r+"'"),i.length>1&&(o+=" ("+i.length+")"),(console.group!==n||console.table!==n)&&c.length>0&&(console.groupCollapsed(o),console.table?console.table(c):e.each(c,function(e,o){console.log(o.Name+": "+o["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(o,t,i){var r,l,c,u=P;return t=t||m,i=A||i,"string"==typeof o&&u!==n&&(o=o.split(/[\. ]/),r=o.length-1,e.each(o,function(t,a){var i=t!=r?a+o[t+1].charAt(0).toUpperCase()+o[t+1].slice(1):o;if(e.isPlainObject(u[i])&&t!=r)u=u[i];else{if(u[i]!==n)return l=u[i],!1;if(!e.isPlainObject(u[a])||t==r)return u[a]!==n?(l=u[a],!1):(d.error(h.method,o),!1);u=u[a]}})),e.isFunction(l)?c=l.apply(i,t):l!==n&&(c=l),e.isArray(a)?a.push(c):a!==n?a=[a,c]:c!==n&&(a=c),l}},s?(P===n&&d.initialize(),d.invoke(u)):(P!==n&&P.invoke("destroy"),d.initialize())}),a!==n?a:this},e.fn.video.settings={name:"Video",namespace:"video",debug:!1,verbose:!1,performance:!0,metadata:{id:"id",image:"image",source:"source",url:"url"},source:!1,url:!1,id:!1,aspectRatio:16/9,onPlay:function(){},onReset:function(){},onChange:function(){},onPause:function(){},onStop:function(){},width:"auto",height:"auto",autoplay:"auto",color:"#442359",hd:!0,showUI:!1,api:!0,regExp:{youtube:/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,vimeo:/http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/},error:{noVideo:"No video specified",method:"The method you called is not defined"},className:{active:"active"},selector:{embed:".embed",placeholder:".placeholder",playButton:".play"}},e.fn.video.settings.templates={video:function(e){var o="";return e&&(o+='

'),o+='

'}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/visibility.js b/semantic/components/visibility.js new file mode 100755 index 0000000..d75f886 --- /dev/null +++ b/semantic/components/visibility.js @@ -0,0 +1,1216 @@ +/*! + * # Semantic UI 2.1.7 - Visibility + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.visibility = 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.visibility.settings, parameters) + : $.extend({}, $.fn.visibility.settings), + + className = settings.className, + namespace = settings.namespace, + error = settings.error, + metadata = settings.metadata, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $window = $(window), + + $module = $(this), + $context = $(settings.context), + + $placeholder, + + selector = $module.selector || '', + instance = $module.data(moduleNamespace), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + element = this, + disabled = false, + + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', settings); + + module.setup.cache(); + + if( module.should.trackChanges() ) { + + if(settings.type == 'image') { + module.setup.image(); + } + if(settings.type == 'fixed') { + module.setup.fixed(); + } + + if(settings.observeChanges) { + module.observeChanges(); + } + module.bind.events(); + } + + module.save.position(); + if( !module.is.visible() ) { + module.error(error.visible, $module); + } + + if(settings.initialCheck) { + module.checkVisibility(); + } + module.instantiate(); + }, + + instantiate: function() { + module.debug('Storing instance', module); + $module + .data(moduleNamespace, module) + ; + instance = module; + }, + + destroy: function() { + module.verbose('Destroying previous module'); + if(observer) { + observer.disconnect(); + } + $window + .off('load' + eventNamespace, module.event.load) + .off('resize' + eventNamespace, module.event.resize) + ; + $context + .off('scrollchange' + eventNamespace, module.event.scrollchange) + ; + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.verbose('DOM tree modified, updating visibility calculations'); + module.timer = setTimeout(function() { + module.verbose('DOM tree modified, updating sticky menu'); + module.refresh(); + }, 100); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.verbose('Binding visibility events to scroll and resize'); + if(settings.refreshOnLoad) { + $window + .on('load' + eventNamespace, module.event.load) + ; + } + $window + .on('resize' + eventNamespace, module.event.resize) + ; + // pub/sub pattern + $context + .off('scroll' + eventNamespace) + .on('scroll' + eventNamespace, module.event.scroll) + .on('scrollchange' + eventNamespace, module.event.scrollchange) + ; + } + }, + + event: { + resize: function() { + module.debug('Window resized'); + if(settings.refreshOnResize) { + requestAnimationFrame(module.refresh); + } + }, + load: function() { + module.debug('Page finished loading'); + requestAnimationFrame(module.refresh); + }, + // publishes scrollchange event on one scroll + scroll: function() { + if(settings.throttle) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }, settings.throttle); + } + else { + requestAnimationFrame(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }); + } + }, + // subscribes to scrollchange + scrollchange: function(event, scrollPosition) { + module.checkVisibility(scrollPosition); + }, + }, + + precache: function(images, callback) { + if (!(images instanceof Array)) { + images = [images]; + } + var + imagesLength = images.length, + loadedCounter = 0, + cache = [], + cacheImage = document.createElement('img'), + handleLoad = function() { + loadedCounter++; + if (loadedCounter >= images.length) { + if ($.isFunction(callback)) { + callback(); + } + } + } + ; + while (imagesLength--) { + cacheImage = document.createElement('img'); + cacheImage.onload = handleLoad; + cacheImage.onerror = handleLoad; + cacheImage.src = images[imagesLength]; + cache.push(cacheImage); + } + }, + + enableCallbacks: function() { + module.debug('Allowing callbacks to occur'); + disabled = false; + }, + + disableCallbacks: function() { + module.debug('Disabling all callbacks temporarily'); + disabled = true; + }, + + should: { + trackChanges: function() { + if(methodInvoked) { + module.debug('One time query, no need to bind events'); + return false; + } + module.debug('Callbacks being attached'); + return true; + } + }, + + setup: { + cache: function() { + module.cache = { + occurred : {}, + screen : {}, + element : {}, + }; + }, + image: function() { + var + src = $module.data(metadata.src) + ; + if(src) { + module.verbose('Lazy loading image', src); + settings.once = true; + settings.observeChanges = false; + + // show when top visible + settings.onOnScreen = function() { + module.debug('Image on screen', element); + module.precache(src, function() { + module.set.image(src); + }); + }; + } + }, + fixed: function() { + module.debug('Setting up fixed'); + settings.once = false; + settings.observeChanges = false; + settings.initialCheck = true; + settings.refreshOnLoad = true; + if(!parameters.transition) { + settings.transition = false; + } + module.create.placeholder(); + module.debug('Added placeholder', $placeholder); + settings.onTopPassed = function() { + module.debug('Element passed, adding fixed position', $module); + module.show.placeholder(); + module.set.fixed(); + if(settings.transition) { + if($.fn.transition !== undefined) { + $module.transition(settings.transition, settings.duration); + } + } + }; + settings.onTopPassedReverse = function() { + module.debug('Element returned to position, removing fixed', $module); + module.hide.placeholder(); + module.remove.fixed(); + }; + } + }, + + create: { + placeholder: function() { + module.verbose('Creating fixed position placeholder'); + $placeholder = $module + .clone(false) + .css('display', 'none') + .addClass(className.placeholder) + .insertAfter($module) + ; + } + }, + + show: { + placeholder: function() { + module.verbose('Showing placeholder'); + $placeholder + .css('display', 'block') + .css('visibility', 'hidden') + ; + } + }, + hide: { + placeholder: function() { + module.verbose('Hiding placeholder'); + $placeholder + .css('display', 'none') + .css('visibility', '') + ; + } + }, + + set: { + fixed: function() { + module.verbose('Setting element to fixed position'); + $module + .addClass(className.fixed) + .css({ + position : 'fixed', + top : settings.offset + 'px', + left : 'auto', + zIndex : '1' + }) + ; + }, + image: function(src) { + $module + .attr('src', src) + ; + if(settings.transition) { + if( $.fn.transition !== undefined ) { + $module.transition(settings.transition, settings.duration); + } + else { + $module.fadeIn(settings.duration); + } + } + else { + $module.show(); + } + } + }, + + is: { + onScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.onScreen; + }, + offScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.offScreen; + }, + visible: function() { + if(module.cache && module.cache.element) { + return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0); + } + return false; + } + }, + + refresh: function() { + module.debug('Refreshing constants (width/height)'); + if(settings.type == 'fixed') { + module.remove.fixed(); + module.remove.occurred(); + } + module.reset(); + module.save.position(); + if(settings.checkOnRefresh) { + module.checkVisibility(); + } + settings.onRefresh.call(element); + }, + + reset: function() { + module.verbose('Reseting all cached values'); + if( $.isPlainObject(module.cache) ) { + module.cache.screen = {}; + module.cache.element = {}; + } + }, + + checkVisibility: function(scroll) { + module.verbose('Checking visibility of element', module.cache.element); + + if( !disabled && module.is.visible() ) { + + // save scroll position + module.save.scroll(scroll); + + // update calculations derived from scroll + module.save.calculations(); + + // percentage + module.passed(); + + // reverse (must be first) + module.passingReverse(); + module.topVisibleReverse(); + module.bottomVisibleReverse(); + module.topPassedReverse(); + module.bottomPassedReverse(); + + // one time + module.onScreen(); + module.offScreen(); + module.passing(); + module.topVisible(); + module.bottomVisible(); + module.topPassed(); + module.bottomPassed(); + + // on update callback + if(settings.onUpdate) { + settings.onUpdate.call(element, module.get.elementCalculations()); + } + } + }, + + passed: function(amount, newCallback) { + var + calculations = module.get.elementCalculations(), + amountInPixels + ; + // assign callback + if(amount && newCallback) { + settings.onPassed[amount] = newCallback; + } + else if(amount !== undefined) { + return (module.get.pixelsPassed(amount) > calculations.pixelsPassed); + } + else if(calculations.passing) { + $.each(settings.onPassed, function(amount, callback) { + if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) { + module.execute(callback, amount); + } + else if(!settings.once) { + module.remove.occurred(callback); + } + }); + } + }, + + onScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOnScreen, + callbackName = 'onScreen' + ; + if(newCallback) { + module.debug('Adding callback for onScreen', newCallback); + settings.onOnScreen = newCallback; + } + if(calculations.onScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOnScreen; + } + }, + + offScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOffScreen, + callbackName = 'offScreen' + ; + if(newCallback) { + module.debug('Adding callback for offScreen', newCallback); + settings.onOffScreen = newCallback; + } + if(calculations.offScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOffScreen; + } + }, + + passing: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassing, + callbackName = 'passing' + ; + if(newCallback) { + module.debug('Adding callback for passing', newCallback); + settings.onPassing = newCallback; + } + if(calculations.passing) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.passing; + } + }, + + + topVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisible, + callbackName = 'topVisible' + ; + if(newCallback) { + module.debug('Adding callback for top visible', newCallback); + settings.onTopVisible = newCallback; + } + if(calculations.topVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topVisible; + } + }, + + bottomVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisible, + callbackName = 'bottomVisible' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible', newCallback); + settings.onBottomVisible = newCallback; + } + if(calculations.bottomVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomVisible; + } + }, + + topPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassed, + callbackName = 'topPassed' + ; + if(newCallback) { + module.debug('Adding callback for top passed', newCallback); + settings.onTopPassed = newCallback; + } + if(calculations.topPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topPassed; + } + }, + + bottomPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassed, + callbackName = 'bottomPassed' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed', newCallback); + settings.onBottomPassed = newCallback; + } + if(calculations.bottomPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomPassed; + } + }, + + passingReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassingReverse, + callbackName = 'passingReverse' + ; + if(newCallback) { + module.debug('Adding callback for passing reverse', newCallback); + settings.onPassingReverse = newCallback; + } + if(!calculations.passing) { + if(module.get.occurred('passing')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return !calculations.passing; + } + }, + + + topVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisibleReverse, + callbackName = 'topVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for top visible reverse', newCallback); + settings.onTopVisibleReverse = newCallback; + } + if(!calculations.topVisible) { + if(module.get.occurred('topVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.topVisible; + } + }, + + bottomVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisibleReverse, + callbackName = 'bottomVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible reverse', newCallback); + settings.onBottomVisibleReverse = newCallback; + } + if(!calculations.bottomVisible) { + if(module.get.occurred('bottomVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomVisible; + } + }, + + topPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassedReverse, + callbackName = 'topPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for top passed reverse', newCallback); + settings.onTopPassedReverse = newCallback; + } + if(!calculations.topPassed) { + if(module.get.occurred('topPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.onTopPassed; + } + }, + + bottomPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassedReverse, + callbackName = 'bottomPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed reverse', newCallback); + settings.onBottomPassedReverse = newCallback; + } + if(!calculations.bottomPassed) { + if(module.get.occurred('bottomPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomPassed; + } + }, + + execute: function(callback, callbackName) { + var + calculations = module.get.elementCalculations(), + screen = module.get.screenCalculations() + ; + callback = callback || false; + if(callback) { + if(settings.continuous) { + module.debug('Callback being called continuously', callbackName, calculations); + callback.call(element, calculations, screen); + } + else if(!module.get.occurred(callbackName)) { + module.debug('Conditions met', callbackName, calculations); + callback.call(element, calculations, screen); + } + } + module.save.occurred(callbackName); + }, + + remove: { + fixed: function() { + module.debug('Removing fixed position'); + $module + .removeClass(className.fixed) + .css({ + position : '', + top : '', + left : '', + zIndex : '' + }) + ; + }, + occurred: function(callback) { + if(callback) { + var + occurred = module.cache.occurred + ; + if(occurred[callback] !== undefined && occurred[callback] === true) { + module.debug('Callback can now be called again', callback); + module.cache.occurred[callback] = false; + } + } + else { + module.cache.occurred = {}; + } + } + }, + + save: { + calculations: function() { + module.verbose('Saving all calculations necessary to determine positioning'); + module.save.direction(); + module.save.screenCalculations(); + module.save.elementCalculations(); + }, + occurred: function(callback) { + if(callback) { + if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) { + module.verbose('Saving callback occurred', callback); + module.cache.occurred[callback] = true; + } + } + }, + scroll: function(scrollPosition) { + scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset; + module.cache.scroll = scrollPosition; + }, + direction: function() { + var + scroll = module.get.scroll(), + lastScroll = module.get.lastScroll(), + direction + ; + if(scroll > lastScroll && lastScroll) { + direction = 'down'; + } + else if(scroll < lastScroll && lastScroll) { + direction = 'up'; + } + else { + direction = 'static'; + } + module.cache.direction = direction; + return module.cache.direction; + }, + elementPosition: function() { + var + element = module.cache.element, + screen = module.get.screenSize() + ; + module.verbose('Saving element position'); + // (quicker than $.extend) + element.fits = (element.height < screen.height); + element.offset = $module.offset(); + element.width = $module.outerWidth(); + element.height = $module.outerHeight(); + // store + module.cache.element = element; + return element; + }, + elementCalculations: function() { + var + screen = module.get.screenCalculations(), + element = module.get.elementPosition() + ; + // offset + if(settings.includeMargin) { + element.margin = {}; + element.margin.top = parseInt($module.css('margin-top'), 10); + element.margin.bottom = parseInt($module.css('margin-bottom'), 10); + element.top = element.offset.top - element.margin.top; + element.bottom = element.offset.top + element.height + element.margin.bottom; + } + else { + element.top = element.offset.top; + element.bottom = element.offset.top + element.height; + } + + // visibility + element.topVisible = (screen.bottom >= element.top); + element.topPassed = (screen.top >= element.top); + element.bottomVisible = (screen.bottom >= element.bottom); + element.bottomPassed = (screen.top >= element.bottom); + element.pixelsPassed = 0; + element.percentagePassed = 0; + + // meta calculations + element.onScreen = (element.topVisible && !element.bottomPassed); + element.passing = (element.topPassed && !element.bottomPassed); + element.offScreen = (!element.onScreen); + + // passing calculations + if(element.passing) { + element.pixelsPassed = (screen.top - element.top); + element.percentagePassed = (screen.top - element.top) / element.height; + } + module.cache.element = element; + module.verbose('Updated element calculations', element); + return element; + }, + screenCalculations: function() { + var + scroll = module.get.scroll() + ; + module.save.direction(); + module.cache.screen.top = scroll; + module.cache.screen.bottom = scroll + module.cache.screen.height; + return module.cache.screen; + }, + screenSize: function() { + module.verbose('Saving window position'); + module.cache.screen = { + height: $context.height() + }; + }, + position: function() { + module.save.screenSize(); + module.save.elementPosition(); + } + }, + + get: { + pixelsPassed: function(amount) { + var + element = module.get.elementCalculations() + ; + if(amount.search('%') > -1) { + return ( element.height * (parseInt(amount, 10) / 100) ); + } + return parseInt(amount, 10); + }, + occurred: function(callback) { + return (module.cache.occurred !== undefined) + ? module.cache.occurred[callback] || false + : false + ; + }, + direction: function() { + if(module.cache.direction === undefined) { + module.save.direction(); + } + return module.cache.direction; + }, + elementPosition: function() { + if(module.cache.element === undefined) { + module.save.elementPosition(); + } + return module.cache.element; + }, + elementCalculations: function() { + if(module.cache.element === undefined) { + module.save.elementCalculations(); + } + return module.cache.element; + }, + screenCalculations: function() { + if(module.cache.screen === undefined) { + module.save.screenCalculations(); + } + return module.cache.screen; + }, + screenSize: function() { + if(module.cache.screen === undefined) { + module.save.screenSize(); + } + return module.cache.screen; + }, + scroll: function() { + if(module.cache.scroll === undefined) { + module.save.scroll(); + } + return module.cache.scroll; + }, + lastScroll: function() { + if(module.cache.screen === undefined) { + module.debug('First scroll event, no last scroll could be found'); + return false; + } + return module.cache.screen.top; + } + }, + + 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({ + '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(); + } + instance.save.scroll(); + instance.save.calculations(); + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.visibility.settings = { + + name : 'Visibility', + namespace : 'visibility', + + debug : false, + verbose : false, + performance : true, + + // whether to use mutation observers to follow changes + observeChanges : true, + + // check position immediately on init + initialCheck : true, + + // whether to refresh calculations after all page images load + refreshOnLoad : true, + + // whether to refresh calculations after page resize event + refreshOnResize : true, + + // should call callbacks on refresh event (resize, etc) + checkOnRefresh : true, + + // callback should only occur one time + once : true, + + // callback should fire continuously whe evaluates to true + continuous : false, + + // offset to use with scroll top + offset : 0, + + // whether to include margin in elements position + includeMargin : false, + + // scroll context for visibility checks + context : window, + + // visibility check delay in ms (defaults to animationFrame) + throttle : false, + + // special visibility type (image, fixed) + type : false, + + // image only animation settings + transition : 'fade in', + duration : 1000, + + // array of callbacks for percentage + onPassed : {}, + + // standard callbacks + onOnScreen : false, + onOffScreen : false, + onPassing : false, + onTopVisible : false, + onBottomVisible : false, + onTopPassed : false, + onBottomPassed : false, + + // reverse callbacks + onPassingReverse : false, + onTopVisibleReverse : false, + onBottomVisibleReverse : false, + onTopPassedReverse : false, + onBottomPassedReverse : false, + + // utility callbacks + onUpdate : false, // disabled by default for performance + onRefresh : function(){}, + + metadata : { + src: 'src' + }, + + className: { + fixed : 'fixed', + placeholder : 'placeholder' + }, + + error : { + method : 'The method you called is not defined.', + visible : 'Element is hidden, you must call refresh after element becomes visible' + } + +}; + +})( jQuery, window, document ); \ No newline at end of file diff --git a/semantic/components/visibility.min.js b/semantic/components/visibility.min.js new file mode 100755 index 0000000..349a361 --- /dev/null +++ b/semantic/components/visibility.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.1.7 - Visibility + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,o,n,t){"use strict";e.fn.visibility=function(i){var s,c=e(this),r=c.selector||"",a=(new Date).getTime(),l=[],u=arguments[0],d="string"==typeof u,f=[].slice.call(arguments,1);return c.each(function(){var c,b,m,g=e.isPlainObject(i)?e.extend(!0,{},e.fn.visibility.settings,i):e.extend({},e.fn.visibility.settings),p=g.className,v=g.namespace,h=g.error,P=g.metadata,x="."+v,C="module-"+v,y=e(o),R=e(this),V=e(g.context),S=(R.selector||"",R.data(C)),k=o.requestAnimationFrame||o.mozRequestAnimationFrame||o.webkitRequestAnimationFrame||o.msRequestAnimationFrame||function(e){setTimeout(e,0)},T=this,O=!1;m={initialize:function(){m.debug("Initializing",g),m.setup.cache(),m.should.trackChanges()&&("image"==g.type&&m.setup.image(),"fixed"==g.type&&m.setup.fixed(),g.observeChanges&&m.observeChanges(),m.bind.events()),m.save.position(),m.is.visible()||m.error(h.visible,R),g.initialCheck&&m.checkVisibility(),m.instantiate()},instantiate:function(){m.debug("Storing instance",m),R.data(C,m),S=m},destroy:function(){m.verbose("Destroying previous module"),b&&b.disconnect(),y.off("load"+x,m.event.load).off("resize"+x,m.event.resize),V.off("scrollchange"+x,m.event.scrollchange),R.off(x).removeData(C)},observeChanges:function(){"MutationObserver"in o&&(b=new MutationObserver(function(e){m.verbose("DOM tree modified, updating visibility calculations"),m.timer=setTimeout(function(){m.verbose("DOM tree modified, updating sticky menu"),m.refresh()},100)}),b.observe(T,{childList:!0,subtree:!0}),m.debug("Setting up mutation observer",b))},bind:{events:function(){m.verbose("Binding visibility events to scroll and resize"),g.refreshOnLoad&&y.on("load"+x,m.event.load),y.on("resize"+x,m.event.resize),V.off("scroll"+x).on("scroll"+x,m.event.scroll).on("scrollchange"+x,m.event.scrollchange)}},event:{resize:function(){m.debug("Window resized"),g.refreshOnResize&&k(m.refresh)},load:function(){m.debug("Page finished loading"),k(m.refresh)},scroll:function(){g.throttle?(clearTimeout(m.timer),m.timer=setTimeout(function(){V.triggerHandler("scrollchange"+x,[V.scrollTop()])},g.throttle)):k(function(){V.triggerHandler("scrollchange"+x,[V.scrollTop()])})},scrollchange:function(e,o){m.checkVisibility(o)}},precache:function(o,t){o instanceof Array||(o=[o]);for(var i=o.length,s=0,c=[],r=n.createElement("img"),a=function(){s++,s>=o.length&&e.isFunction(t)&&t()};i--;)r=n.createElement("img"),r.onload=a,r.onerror=a,r.src=o[i],c.push(r)},enableCallbacks:function(){m.debug("Allowing callbacks to occur"),O=!1},disableCallbacks:function(){m.debug("Disabling all callbacks temporarily"),O=!0},should:{trackChanges:function(){return d?(m.debug("One time query, no need to bind events"),!1):(m.debug("Callbacks being attached"),!0)}},setup:{cache:function(){m.cache={occurred:{},screen:{},element:{}}},image:function(){var e=R.data(P.src);e&&(m.verbose("Lazy loading image",e),g.once=!0,g.observeChanges=!1,g.onOnScreen=function(){m.debug("Image on screen",T),m.precache(e,function(){m.set.image(e)})})},fixed:function(){m.debug("Setting up fixed"),g.once=!1,g.observeChanges=!1,g.initialCheck=!0,g.refreshOnLoad=!0,i.transition||(g.transition=!1),m.create.placeholder(),m.debug("Added placeholder",c),g.onTopPassed=function(){m.debug("Element passed, adding fixed position",R),m.show.placeholder(),m.set.fixed(),g.transition&&e.fn.transition!==t&&R.transition(g.transition,g.duration)},g.onTopPassedReverse=function(){m.debug("Element returned to position, removing fixed",R),m.hide.placeholder(),m.remove.fixed()}}},create:{placeholder:function(){m.verbose("Creating fixed position placeholder"),c=R.clone(!1).css("display","none").addClass(p.placeholder).insertAfter(R)}},show:{placeholder:function(){m.verbose("Showing placeholder"),c.css("display","block").css("visibility","hidden")}},hide:{placeholder:function(){m.verbose("Hiding placeholder"),c.css("display","none").css("visibility","")}},set:{fixed:function(){m.verbose("Setting element to fixed position"),R.addClass(p.fixed).css({position:"fixed",top:g.offset+"px",left:"auto",zIndex:"1"})},image:function(o){R.attr("src",o),g.transition?e.fn.transition!==t?R.transition(g.transition,g.duration):R.fadeIn(g.duration):R.show()}},is:{onScreen:function(){var e=m.get.elementCalculations();return e.onScreen},offScreen:function(){var e=m.get.elementCalculations();return e.offScreen},visible:function(){return m.cache&&m.cache.element?!(0===m.cache.element.width&&0===m.cache.element.offset.top):!1}},refresh:function(){m.debug("Refreshing constants (width/height)"),"fixed"==g.type&&(m.remove.fixed(),m.remove.occurred()),m.reset(),m.save.position(),g.checkOnRefresh&&m.checkVisibility(),g.onRefresh.call(T)},reset:function(){m.verbose("Reseting all cached values"),e.isPlainObject(m.cache)&&(m.cache.screen={},m.cache.element={})},checkVisibility:function(e){m.verbose("Checking visibility of element",m.cache.element),!O&&m.is.visible()&&(m.save.scroll(e),m.save.calculations(),m.passed(),m.passingReverse(),m.topVisibleReverse(),m.bottomVisibleReverse(),m.topPassedReverse(),m.bottomPassedReverse(),m.onScreen(),m.offScreen(),m.passing(),m.topVisible(),m.bottomVisible(),m.topPassed(),m.bottomPassed(),g.onUpdate&&g.onUpdate.call(T,m.get.elementCalculations()))},passed:function(o,n){var i=m.get.elementCalculations();if(o&&n)g.onPassed[o]=n;else{if(o!==t)return m.get.pixelsPassed(o)>i.pixelsPassed;i.passing&&e.each(g.onPassed,function(e,o){i.bottomVisible||i.pixelsPassed>m.get.pixelsPassed(e)?m.execute(o,e):g.once||m.remove.occurred(o)})}},onScreen:function(e){var o=m.get.elementCalculations(),n=e||g.onOnScreen,i="onScreen";return e&&(m.debug("Adding callback for onScreen",e),g.onOnScreen=e),o.onScreen?m.execute(n,i):g.once||m.remove.occurred(i),e!==t?o.onOnScreen:void 0},offScreen:function(e){var o=m.get.elementCalculations(),n=e||g.onOffScreen,i="offScreen";return e&&(m.debug("Adding callback for offScreen",e),g.onOffScreen=e),o.offScreen?m.execute(n,i):g.once||m.remove.occurred(i),e!==t?o.onOffScreen:void 0},passing:function(e){var o=m.get.elementCalculations(),n=e||g.onPassing,i="passing";return e&&(m.debug("Adding callback for passing",e),g.onPassing=e),o.passing?m.execute(n,i):g.once||m.remove.occurred(i),e!==t?o.passing:void 0},topVisible:function(e){var o=m.get.elementCalculations(),n=e||g.onTopVisible,i="topVisible";return e&&(m.debug("Adding callback for top visible",e),g.onTopVisible=e),o.topVisible?m.execute(n,i):g.once||m.remove.occurred(i),e===t?o.topVisible:void 0},bottomVisible:function(e){var o=m.get.elementCalculations(),n=e||g.onBottomVisible,i="bottomVisible";return e&&(m.debug("Adding callback for bottom visible",e),g.onBottomVisible=e),o.bottomVisible?m.execute(n,i):g.once||m.remove.occurred(i),e===t?o.bottomVisible:void 0},topPassed:function(e){var o=m.get.elementCalculations(),n=e||g.onTopPassed,i="topPassed";return e&&(m.debug("Adding callback for top passed",e),g.onTopPassed=e),o.topPassed?m.execute(n,i):g.once||m.remove.occurred(i),e===t?o.topPassed:void 0},bottomPassed:function(e){var o=m.get.elementCalculations(),n=e||g.onBottomPassed,i="bottomPassed";return e&&(m.debug("Adding callback for bottom passed",e),g.onBottomPassed=e),o.bottomPassed?m.execute(n,i):g.once||m.remove.occurred(i),e===t?o.bottomPassed:void 0},passingReverse:function(e){var o=m.get.elementCalculations(),n=e||g.onPassingReverse,i="passingReverse";return e&&(m.debug("Adding callback for passing reverse",e),g.onPassingReverse=e),o.passing?g.once||m.remove.occurred(i):m.get.occurred("passing")&&m.execute(n,i),e!==t?!o.passing:void 0},topVisibleReverse:function(e){var o=m.get.elementCalculations(),n=e||g.onTopVisibleReverse,i="topVisibleReverse";return e&&(m.debug("Adding callback for top visible reverse",e),g.onTopVisibleReverse=e),o.topVisible?g.once||m.remove.occurred(i):m.get.occurred("topVisible")&&m.execute(n,i),e===t?!o.topVisible:void 0},bottomVisibleReverse:function(e){var o=m.get.elementCalculations(),n=e||g.onBottomVisibleReverse,i="bottomVisibleReverse";return e&&(m.debug("Adding callback for bottom visible reverse",e),g.onBottomVisibleReverse=e),o.bottomVisible?g.once||m.remove.occurred(i):m.get.occurred("bottomVisible")&&m.execute(n,i),e===t?!o.bottomVisible:void 0},topPassedReverse:function(e){var o=m.get.elementCalculations(),n=e||g.onTopPassedReverse,i="topPassedReverse";return e&&(m.debug("Adding callback for top passed reverse",e),g.onTopPassedReverse=e),o.topPassed?g.once||m.remove.occurred(i):m.get.occurred("topPassed")&&m.execute(n,i),e===t?!o.onTopPassed:void 0},bottomPassedReverse:function(e){var o=m.get.elementCalculations(),n=e||g.onBottomPassedReverse,i="bottomPassedReverse";return e&&(m.debug("Adding callback for bottom passed reverse",e),g.onBottomPassedReverse=e),o.bottomPassed?g.once||m.remove.occurred(i):m.get.occurred("bottomPassed")&&m.execute(n,i),e===t?!o.bottomPassed:void 0},execute:function(e,o){var n=m.get.elementCalculations(),t=m.get.screenCalculations();e=e||!1,e&&(g.continuous?(m.debug("Callback being called continuously",o,n),e.call(T,n,t)):m.get.occurred(o)||(m.debug("Conditions met",o,n),e.call(T,n,t))),m.save.occurred(o)},remove:{fixed:function(){m.debug("Removing fixed position"),R.removeClass(p.fixed).css({position:"",top:"",left:"",zIndex:""})},occurred:function(e){if(e){var o=m.cache.occurred;o[e]!==t&&o[e]===!0&&(m.debug("Callback can now be called again",e),m.cache.occurred[e]=!1)}else m.cache.occurred={}}},save:{calculations:function(){m.verbose("Saving all calculations necessary to determine positioning"),m.save.direction(),m.save.screenCalculations(),m.save.elementCalculations()},occurred:function(e){e&&(m.cache.occurred[e]===t||m.cache.occurred[e]!==!0)&&(m.verbose("Saving callback occurred",e),m.cache.occurred[e]=!0)},scroll:function(e){e=e+g.offset||V.scrollTop()+g.offset,m.cache.scroll=e},direction:function(){var e,o=m.get.scroll(),n=m.get.lastScroll();return e=o>n&&n?"down":n>o&&n?"up":"static",m.cache.direction=e,m.cache.direction},elementPosition:function(){var e=m.cache.element,o=m.get.screenSize();return m.verbose("Saving element position"),e.fits=e.height=o.top,o.topPassed=e.top>=o.top,o.bottomVisible=e.bottom>=o.bottom,o.bottomPassed=e.top>=o.bottom,o.pixelsPassed=0,o.percentagePassed=0,o.onScreen=o.topVisible&&!o.bottomPassed,o.passing=o.topPassed&&!o.bottomPassed,o.offScreen=!o.onScreen,o.passing&&(o.pixelsPassed=e.top-o.top,o.percentagePassed=(e.top-o.top)/o.height),m.cache.element=o,m.verbose("Updated element calculations",o),o},screenCalculations:function(){var e=m.get.scroll();return m.save.direction(),m.cache.screen.top=e,m.cache.screen.bottom=e+m.cache.screen.height,m.cache.screen},screenSize:function(){m.verbose("Saving window position"),m.cache.screen={height:V.height()}},position:function(){m.save.screenSize(),m.save.elementPosition()}},get:{pixelsPassed:function(e){var o=m.get.elementCalculations();return e.search("%")>-1?o.height*(parseInt(e,10)/100):parseInt(e,10)},occurred:function(e){return m.cache.occurred!==t?m.cache.occurred[e]||!1:!1},direction:function(){return m.cache.direction===t&&m.save.direction(),m.cache.direction},elementPosition:function(){return m.cache.element===t&&m.save.elementPosition(),m.cache.element},elementCalculations:function(){return m.cache.element===t&&m.save.elementCalculations(),m.cache.element},screenCalculations:function(){return m.cache.screen===t&&m.save.screenCalculations(),m.cache.screen},screenSize:function(){return m.cache.screen===t&&m.save.screenSize(),m.cache.screen},scroll:function(){return m.cache.scroll===t&&m.save.scroll(),m.cache.scroll},lastScroll:function(){return m.cache.screen===t?(m.debug("First scroll event, no last scroll could be found"),!1):m.cache.screen.top}},setting:function(o,n){if(e.isPlainObject(o))e.extend(!0,g,o);else{if(n===t)return g[o];g[o]=n}},internal:function(o,n){if(e.isPlainObject(o))e.extend(!0,m,o);else{if(n===t)return m[o];m[o]=n}},debug:function(){g.debug&&(g.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,g.name+":"),m.debug.apply(console,arguments)))},verbose:function(){g.verbose&&g.debug&&(g.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,g.name+":"),m.verbose.apply(console,arguments)))},error:function(){m.error=Function.prototype.bind.call(console.error,console,g.name+":"),m.error.apply(console,arguments)},performance:{log:function(e){var o,n,t;g.performance&&(o=(new Date).getTime(),t=a||o,n=o-t,a=o,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:T,"Execution Time":n})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,500)},display:function(){var o=g.name+":",n=0;a=!1,clearTimeout(m.performance.timer),e.each(l,function(e,o){n+=o["Execution Time"]}),o+=" "+n+"ms",r&&(o+=" '"+r+"'"),(console.group!==t||console.table!==t)&&l.length>0&&(console.groupCollapsed(o),console.table?console.table(l):e.each(l,function(e,o){console.log(o.Name+": "+o["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(o,n,i){var c,r,a,l=S;return n=n||f,i=T||i,"string"==typeof o&&l!==t&&(o=o.split(/[\. ]/),c=o.length-1,e.each(o,function(n,i){var s=n!=c?i+o[n+1].charAt(0).toUpperCase()+o[n+1].slice(1):o;if(e.isPlainObject(l[s])&&n!=c)l=l[s];else{if(l[s]!==t)return r=l[s],!1;if(!e.isPlainObject(l[i])||n==c)return l[i]!==t?(r=l[i],!1):(m.error(h.method,o),!1);l=l[i]}})),e.isFunction(r)?a=r.apply(i,n):r!==t&&(a=r),e.isArray(s)?s.push(a):s!==t?s=[s,a]:a!==t&&(s=a),r}},d?(S===t&&m.initialize(),S.save.scroll(),S.save.calculations(),m.invoke(u)):(S!==t&&S.invoke("destroy"),m.initialize())}),s!==t?s:this},e.fn.visibility.settings={name:"Visibility",namespace:"visibility",debug:!1,verbose:!1,performance:!0,observeChanges:!0,initialCheck:!0,refreshOnLoad:!0,refreshOnResize:!0,checkOnRefresh:!0,once:!0,continuous:!1,offset:0,includeMargin:!1,context:o,throttle:!1,type:!1,transition:"fade in",duration:1e3,onPassed:{},onOnScreen:!1,onOffScreen:!1,onPassing:!1,onTopVisible:!1,onBottomVisible:!1,onTopPassed:!1,onBottomPassed:!1,onPassingReverse:!1,onTopVisibleReverse:!1,onBottomVisibleReverse:!1,onTopPassedReverse:!1,onBottomPassedReverse:!1,onUpdate:!1,onRefresh:function(){},metadata:{src:"src"},className:{fixed:"fixed",placeholder:"placeholder"},error:{method:"The method you called is not defined.",visible:"Element is hidden, you must call refresh after element becomes visible"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/components/visit.js b/semantic/components/visit.js new file mode 100755 index 0000000..13c0ff4 --- /dev/null +++ b/semantic/components/visit.js @@ -0,0 +1,517 @@ +/*! + * # Semantic UI 2.0.0 - Visit + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.visit = $.fn.visit = function(parameters) { + var + $allModules = $.isFunction(this) + ? $(window) + : $(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.visit.settings, parameters) + : $.extend({}, $.fn.visit.settings), + + error = settings.error, + namespace = settings.namespace, + + eventNamespace = '.' + namespace, + moduleNamespace = namespace + '-module', + + $module = $(this), + $displays = $(), + + element = this, + instance = $module.data(moduleNamespace), + module + ; + module = { + + initialize: function() { + if(settings.count) { + module.store(settings.key.count, settings.count); + } + else if(settings.id) { + module.add.id(settings.id); + } + else if(settings.increment && methodInvoked !== 'increment') { + module.increment(); + } + module.add.display($module); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of visit module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying instance'); + $module + .removeData(moduleNamespace) + ; + }, + + increment: function(id) { + var + currentValue = module.get.count(), + newValue = +(currentValue) + 1 + ; + if(id) { + module.add.id(id); + } + else { + if(newValue > settings.limit && !settings.surpass) { + newValue = settings.limit; + } + module.debug('Incrementing visits', newValue); + module.store(settings.key.count, newValue); + } + }, + + decrement: function(id) { + var + currentValue = module.get.count(), + newValue = +(currentValue) - 1 + ; + if(id) { + module.remove.id(id); + } + else { + module.debug('Removing visit'); + module.store(settings.key.count, newValue); + } + }, + + get: { + count: function() { + return +(module.retrieve(settings.key.count)) || 0; + }, + idCount: function(ids) { + ids = ids || module.get.ids(); + return ids.length; + }, + ids: function(delimitedIDs) { + var + idArray = [] + ; + delimitedIDs = delimitedIDs || module.retrieve(settings.key.ids); + if(typeof delimitedIDs === 'string') { + idArray = delimitedIDs.split(settings.delimiter); + } + module.verbose('Found visited ID list', idArray); + return idArray; + }, + storageOptions: function(data) { + 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; + } + }, + + has: { + visited: function(id, ids) { + var + visited = false + ; + ids = ids || module.get.ids(); + if(id !== undefined && ids) { + $.each(ids, function(index, value){ + if(value == id) { + visited = true; + } + }); + } + return visited; + } + }, + + set: { + count: function(value) { + module.store(settings.key.count, value); + }, + ids: function(value) { + module.store(settings.key.ids, value); + } + }, + + reset: function() { + module.store(settings.key.count, 0); + module.store(settings.key.ids, null); + }, + + add: { + id: function(id) { + var + currentIDs = module.retrieve(settings.key.ids), + newIDs = (currentIDs === undefined || currentIDs === '') + ? id + : currentIDs + settings.delimiter + id + ; + if( module.has.visited(id) ) { + module.debug('Unique content already visited, not adding visit', id, currentIDs); + } + else if(id === undefined) { + module.debug('ID is not defined'); + } + else { + module.debug('Adding visit to unique content', id); + module.store(settings.key.ids, newIDs); + } + module.set.count( module.get.idCount() ); + }, + display: function(selector) { + var + $element = $(selector) + ; + if($element.length > 0 && !$.isWindow($element[0])) { + module.debug('Updating visit count for element', $element); + $displays = ($displays.length > 0) + ? $displays.add($element) + : $element + ; + } + } + }, + + remove: { + id: function(id) { + var + currentIDs = module.get.ids(), + newIDs = [] + ; + if(id !== undefined && currentIDs !== undefined) { + module.debug('Removing visit to unique content', id, currentIDs); + $.each(currentIDs, function(index, value){ + if(value !== id) { + newIDs.push(value); + } + }); + newIDs = newIDs.join(settings.delimiter); + module.store(settings.key.ids, newIDs ); + } + module.set.count( module.get.idCount() ); + } + }, + + check: { + limit: function(value) { + value = value || module.get.count(); + if(settings.limit) { + if(value >= settings.limit) { + module.debug('Pages viewed exceeded limit, firing callback', value, settings.limit); + settings.onLimit.call(element, value); + } + module.debug('Limit not reached', value, settings.limit); + settings.onChange.call(element, value); + } + module.update.display(value); + } + }, + + update: { + display: function(value) { + value = value || module.get.count(); + if($displays.length > 0) { + module.debug('Updating displayed view count', $displays); + $displays.html(value); + } + } + }, + + store: function(key, value) { + var + options = module.get.storageOptions(value) + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + window.localStorage.setItem(key, value); + module.debug('Value stored using local 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; + } + if(key == settings.key.count) { + module.check.limit(value); + } + }, + retrieve: function(key, value) { + var + storedValue + ; + if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) { + storedValue = window.localStorage.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; + }, + + 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) { + 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.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({ + '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.visit.settings = { + + name : 'Visit', + + debug : false, + verbose : false, + performance : true, + + namespace : 'visit', + + increment : false, + surpass : false, + count : false, + limit : false, + + delimiter : '&', + storageMethod : 'localstorage', + + key : { + count : 'visit-count', + ids : 'visit-ids' + }, + + expires : 30, + domain : false, + path : '/', + + onLimit : function() {}, + onChange : function() {}, + + error : { + method : 'The method you called is not defined', + missingPersist : 'Using the persist setting requires the inclusion of PersistJS', + noCookieStorage : 'The default storage cookie requires $.cookie to be included.' + } + +}; + +})( jQuery, window , document ); diff --git a/semantic/components/visit.min.js b/semantic/components/visit.min.js new file mode 100755 index 0000000..1b734d7 --- /dev/null +++ b/semantic/components/visit.min.js @@ -0,0 +1,11 @@ +/*! + * # Semantic UI 2.0.0 - Visit + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +!function(e,t,i,n){"use strict";e.visit=e.fn.visit=function(i){var o,r=e(e.isFunction(this)?t:this),s=r.selector||"",a=(new Date).getTime(),c=[],u=arguments[0],l="string"==typeof u,d=[].slice.call(arguments,1);return r.each(function(){var g,m=e.isPlainObject(i)?e.extend(!0,{},e.fn.visit.settings,i):e.extend({},e.fn.visit.settings),f=m.error,p=m.namespace,v=p+"-module",h=e(this),b=e(),y=this,k=h.data(v);g={initialize:function(){m.count?g.store(m.key.count,m.count):m.id?g.add.id(m.id):m.increment&&"increment"!==l&&g.increment(),g.add.display(h),g.instantiate()},instantiate:function(){g.verbose("Storing instance of visit module",g),k=g,h.data(v,g)},destroy:function(){g.verbose("Destroying instance"),h.removeData(v)},increment:function(e){var t=g.get.count(),i=+t+1;e?g.add.id(e):(i>m.limit&&!m.surpass&&(i=m.limit),g.debug("Incrementing visits",i),g.store(m.key.count,i))},decrement:function(e){var t=g.get.count(),i=+t-1;e?g.remove.id(e):(g.debug("Removing visit"),g.store(m.key.count,i))},get:{count:function(){return+g.retrieve(m.key.count)||0},idCount:function(e){return e=e||g.get.ids(),e.length},ids:function(e){var t=[];return e=e||g.retrieve(m.key.ids),"string"==typeof e&&(t=e.split(m.delimiter)),g.verbose("Found visited ID list",t),t},storageOptions:function(e){var t={};return m.expires&&(t.expires=m.expires),m.domain&&(t.domain=m.domain),m.path&&(t.path=m.path),t}},has:{visited:function(t,i){var o=!1;return i=i||g.get.ids(),t!==n&&i&&e.each(i,function(e,i){i==t&&(o=!0)}),o}},set:{count:function(e){g.store(m.key.count,e)},ids:function(e){g.store(m.key.ids,e)}},reset:function(){g.store(m.key.count,0),g.store(m.key.ids,null)},add:{id:function(e){var t=g.retrieve(m.key.ids),i=t===n||""===t?e:t+m.delimiter+e;g.has.visited(e)?g.debug("Unique content already visited, not adding visit",e,t):e===n?g.debug("ID is not defined"):(g.debug("Adding visit to unique content",e),g.store(m.key.ids,i)),g.set.count(g.get.idCount())},display:function(t){var i=e(t);i.length>0&&!e.isWindow(i[0])&&(g.debug("Updating visit count for element",i),b=b.length>0?b.add(i):i)}},remove:{id:function(t){var i=g.get.ids(),o=[];t!==n&&i!==n&&(g.debug("Removing visit to unique content",t,i),e.each(i,function(e,i){i!==t&&o.push(i)}),o=o.join(m.delimiter),g.store(m.key.ids,o)),g.set.count(g.get.idCount())}},check:{limit:function(e){e=e||g.get.count(),m.limit&&(e>=m.limit&&(g.debug("Pages viewed exceeded limit, firing callback",e,m.limit),m.onLimit.call(y,e)),g.debug("Limit not reached",e,m.limit),m.onChange.call(y,e)),g.update.display(e)}},update:{display:function(e){e=e||g.get.count(),b.length>0&&(g.debug("Updating displayed view count",b),b.html(e))}},store:function(i,o){var r=g.get.storageOptions(o);if("localstorage"==m.storageMethod&&t.localStorage!==n)t.localStorage.setItem(i,o),g.debug("Value stored using local storage",i,o);else{if(e.cookie===n)return void g.error(f.noCookieStorage);e.cookie(i,o,r),g.debug("Value stored using cookie",i,o,r)}i==m.key.count&&g.check.limit(o)},retrieve:function(i,o){var r;return"localstorage"==m.storageMethod&&t.localStorage!==n?r=t.localStorage.getItem(i):e.cookie!==n?r=e.cookie(i):g.error(f.noCookieStorage),("undefined"==r||"null"==r||r===n||null===r)&&(r=n),r},setting:function(t,i){if(e.isPlainObject(t))e.extend(!0,m,t);else{if(i===n)return m[t];m[t]=i}},internal:function(t,i){return g.debug("Changing internal",t,i),i===n?g[t]:void(e.isPlainObject(t)?e.extend(!0,g,t):g[t]=i)},debug:function(){m.debug&&(m.performance?g.performance.log(arguments):(g.debug=Function.prototype.bind.call(console.info,console,m.name+":"),g.debug.apply(console,arguments)))},verbose:function(){m.verbose&&m.debug&&(m.performance?g.performance.log(arguments):(g.verbose=Function.prototype.bind.call(console.info,console,m.name+":"),g.verbose.apply(console,arguments)))},error:function(){g.error=Function.prototype.bind.call(console.error,console,m.name+":"),g.error.apply(console,arguments)},performance:{log:function(e){var t,i,n;m.performance&&(t=(new Date).getTime(),n=a||t,i=t-n,a=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:y,"Execution Time":i})),clearTimeout(g.performance.timer),g.performance.timer=setTimeout(g.performance.display,500)},display:function(){var t=m.name+":",i=0;a=!1,clearTimeout(g.performance.timer),e.each(c,function(e,t){i+=t["Execution Time"]}),t+=" "+i+"ms",s&&(t+=" '"+s+"'"),r.length>1&&(t+=" ("+r.length+")"),(console.group!==n||console.table!==n)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,i,r){var s,a,c,u=k;return i=i||d,r=y||r,"string"==typeof t&&u!==n&&(t=t.split(/[\. ]/),s=t.length-1,e.each(t,function(i,o){var r=i!=s?o+t[i+1].charAt(0).toUpperCase()+t[i+1].slice(1):t;if(e.isPlainObject(u[r])&&i!=s)u=u[r];else{if(u[r]!==n)return a=u[r],!1;if(!e.isPlainObject(u[o])||i==s)return u[o]!==n?(a=u[o],!1):!1;u=u[o]}})),e.isFunction(a)?c=a.apply(r,i):a!==n&&(c=a),e.isArray(o)?o.push(c):o!==n?o=[o,c]:c!==n&&(o=c),a}},l?(k===n&&g.initialize(),g.invoke(u)):(k!==n&&k.invoke("destroy"),g.initialize())}),o!==n?o:this},e.fn.visit.settings={name:"Visit",debug:!1,verbose:!1,performance:!0,namespace:"visit",increment:!1,surpass:!1,count:!1,limit:!1,delimiter:"&",storageMethod:"localstorage",key:{count:"visit-count",ids:"visit-ids"},expires:30,domain:!1,path:"/",onLimit:function(){},onChange:function(){},error:{method:"The method you called is not defined",missingPersist:"Using the persist setting requires the inclusion of PersistJS",noCookieStorage:"The default storage cookie requires $.cookie to be included."}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/package.js b/semantic/package.js new file mode 100755 index 0000000..3639705 --- /dev/null +++ b/semantic/package.js @@ -0,0 +1,34 @@ +var + where = 'client' // Adds files only to the client +; + +Package.describe({ + name : 'semantic:ui-css', + summary : 'Semantic UI - CSS Release of Semantic UI', + version : '2.1.8', + git : 'git://github.com/Semantic-Org/Semantic-UI-CSS.git', +}); + +Package.onUse(function(api) { + + api.versionsFrom('1.0'); + + api.use('jquery', 'client'); + + api.addFiles([ + // icons + 'themes/default/assets/fonts/icons.eot', + 'themes/default/assets/fonts/icons.svg', + 'themes/default/assets/fonts/icons.ttf', + 'themes/default/assets/fonts/icons.woff', + 'themes/default/assets/fonts/icons.woff2', + + // flags + 'themes/default/assets/images/flags.png', + + // release + 'semantic.css', + 'semantic.js' + ], 'client'); + +}); diff --git a/semantic/package.json b/semantic/package.json new file mode 100755 index 0000000..15691f8 --- /dev/null +++ b/semantic/package.json @@ -0,0 +1,19 @@ +{ + "name": "semantic-ui-css", + "version": "2.1.8", + "title": "Semantic UI", + "description": "CSS Only distribution of Semantic UI", + "homepage": "http://www.semantic-ui.com", + "author": "Jack Lukic ", + "license": "MIT", + "repository": { + "type": "git", + "url": "git://github.com/Semantic-Org/Semantic-UI-CSS.git" + }, + "bugs": { + "url": "https://github.com/Semantic-Org/Semantic-UI/issues" + }, + "dependencies": { + "jquery": "x.*" + } +} \ No newline at end of file diff --git a/semantic/semantic.css b/semantic/semantic.css new file mode 100755 index 0000000..a3820eb --- /dev/null +++ b/semantic/semantic.css @@ -0,0 +1,35170 @@ + /* + * # Semantic UI - 2.1.7 + * https://github.com/Semantic-Org/Semantic-UI + * http://www.semantic-ui.com/ + * + * Copyright 2014 Contributors + * 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'); +/*! + * # Semantic UI 2.1.7 - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Reset +*******************************/ + +/* Border-Box */ + +*, +*:before, +*:after { + box-sizing: inherit; +} + +html { + 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! */ +} + +/******************************* + Theme Overrides +*******************************/ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Page +*******************************/ + +html, +body { + height: 100%; +} + +html { + font-size: 14px; +} + +body { + margin: 0px; + padding: 0px; + overflow-x: hidden; + min-width: 320px; + background: #ffffff; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 14px; + line-height: 1.4285em; + color: rgba(0, 0, 0, 0.87); + font-smoothing: antialiased; +} + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + line-height: 1.2857em; + margin: calc(2rem - 0.14285em ) 0em 1rem; + font-weight: bold; + padding: 0em; +} + +h1 { + min-height: 1rem; + font-size: 2rem; +} + +h2 { + font-size: 1.714rem; +} + +h3 { + font-size: 1.28rem; +} + +h4 { + font-size: 1.071rem; +} + +h5 { + font-size: 1rem; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + +/******************************* + Text +*******************************/ + +p { + margin: 0em 0em 1em; + line-height: 1.4285em; +} + +p:first-child { + margin-top: 0em; +} + +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: #4183c4; + text-decoration: none; +} + +a:hover { + color: #1e70bf; + text-decoration: none; +} + +/******************************* + Highlighting +*******************************/ + +/* Site */ + +::-webkit-selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} + +::-moz-selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} + +::selection { + background-color: #cce2ff; + color: rgba(0, 0, 0, 0.87); +} + +/* Form */ + +textarea::-webkit-selection, +input::-webkit-selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} + +textarea::-moz-selection, +input::-moz-selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} + +textarea::selection, +input::selection { + background-color: rgba(100, 100, 100, 0.4); + color: rgba(0, 0, 0, 0.87); +} + +/******************************* + Global Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Button +*******************************/ + +.ui.button { + cursor: pointer; + display: inline-block; + min-height: 1em; + outline: none; + border: none; + vertical-align: baseline; + background: #e0e1e2 none; + color: rgba(0, 0, 0, 0.6); + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + margin: 0em 0.25em 0em 0em; + padding: 0.78571429em 1.5em 0.78571429em; + text-transform: none; + text-shadow: none; + font-weight: bold; + line-height: 1em; + font-style: normal; + text-align: center; + text-decoration: none; + border-radius: 0.28571429rem; + box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; + transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; + will-change: ''; + -webkit-tap-highlight-color: transparent; +} + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-color: #cacbcd; + background-image: none; + box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; + color: rgba(0, 0, 0, 0.8); +} + +.ui.button:hover .icon { + opacity: 0.85; +} + +/*-------------- + Focus +---------------*/ + +.ui.button:focus { + background-color: #cacbcd; + color: rgba(0, 0, 0, 0.8); + background-image: '' !important; + box-shadow: '' !important; +} + +.ui.button:focus .icon { + opacity: 0.85; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: #babbbc; + background-image: ''; + color: rgba(0, 0, 0, 0.9); + box-shadow: 0px 0px 0px 1px transparent inset, none; +} + +/*-------------- + Active +---------------*/ + +.ui.active.button { + background-color: #c0c1c2; + background-image: none; + box-shadow: 0px 0px 0px 1px transparent inset; + color: rgba(0, 0, 0, 0.95); +} + +.ui.active.button:hover { + background-color: #c0c1c2; + background-image: none; + color: rgba(0, 0, 0, 0.95); +} + +.ui.active.button:active { + background-color: #c0c1c2; + background-image: none; +} + +/*-------------- + Loading +---------------*/ + +/* Specificity hack */ + +.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 0.1s ease; + transition: all 0s linear, opacity 0.1s ease; +} + +.ui.loading.button: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.15); +} + +.ui.loading.button: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: #ffffff transparent transparent; + border-style: solid; + border-width: 0.2em; + box-shadow: 0px 0px 0px 1px transparent; +} + +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + box-shadow: none; +} + +@-webkit-keyframes button-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes button-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.ui.basic.loading.button:not(.inverted):before { + border-color: rgba(0, 0, 0, 0.1); +} + +.ui.basic.loading.button:not(.inverted):after { + border-top-color: #767676; +} + +/*------------------- + Disabled +--------------------*/ + +.ui.buttons .disabled.button, +.ui.disabled.button, +.ui.button:disabled, +.ui.disabled.button:hover, +.ui.disabled.active.button { + cursor: default; + opacity: 0.45 !important; + background-image: none !important; + box-shadow: none !important; + pointer-events: none; +} + +/* Basic Group With Disabled */ + +.ui.basic.buttons .ui.disabled.button { + border-color: rgba(34, 36, 38, 0.5); +} + +/******************************* + Types +*******************************/ + +/*------------------- + Animated +--------------------*/ + +.ui.animated.button { + position: relative; + overflow: hidden; + padding-right: 0em !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%; +} + +/* Horizontal */ + +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + -webkit-transition: right 0.3s ease 0s; + transition: right 0.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: -0.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%; +} + +/* Vertical */ + +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease; + transition: top 0.3s ease, transform 0.3s ease; +} + +.ui.vertical.animated.button .visible.content { + -webkit-transform: translateY(0%); + -ms-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%); + -ms-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; +} + +/* Fade */ + +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + -webkit-transform: scale(1.5); + -ms-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(0.75); + -ms-transform: scale(0.75); + transform: scale(0.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); + -ms-transform: scale(1); + transform: scale(1); +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.button { + box-shadow: 0px 0px 0px 2px #ffffff inset !important; + background: transparent none; + color: #ffffff; + text-shadow: none !important; +} + +/* Group */ + +.ui.inverted.buttons .button { + margin: 0px 0px 0px -2px; +} + +.ui.inverted.buttons .button:first-child { + margin-left: 0em; +} + +.ui.inverted.vertical.buttons .button { + margin: 0px 0px -2px 0px; +} + +.ui.inverted.vertical.buttons .button:first-child { + margin-top: 0em; +} + +/* States */ + +/* Hover */ + +.ui.inverted.button:hover { + background: #ffffff; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; + color: rgba(0, 0, 0, 0.8); +} + +/* Active / Focus */ + +.ui.inverted.button:focus, +.ui.inverted.button.active { + background: #ffffff; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; + color: rgba(0, 0, 0, 0.8); +} + +/* Active Focus */ + +.ui.inverted.button.active:focus { + background: #dcddde; + box-shadow: 0px 0px 0px 2px #dcddde inset !important; + color: rgba(0, 0, 0, 0.8); +} + +/*------------------- + Labeled Button +--------------------*/ + +.ui.labeled.button:not(.icon) { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + background: none !important; + padding: 0px !important; + border: none !important; + box-shadow: none !important; +} + +.ui.labeled.button > .button { + margin: 0px; +} + +.ui.labeled.button > .label { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: 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; + 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: #0084b4; + color: #ffffff; + text-shadow: none; + background-image: none; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} + +.ui.twitter.button:hover { + background-color: #00719b; + color: #ffffff; + text-shadow: none; +} + +.ui.twitter.button:active { + background-color: #005f81; + color: #ffffff; + text-shadow: none; +} + +/* Google Plus */ + +.ui.google.plus.button { + background-color: #dc4a38; + color: #ffffff; + text-shadow: none; + background-image: none; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} + +.ui.google.plus.button:hover { + background-color: #de321d; + color: #ffffff; + text-shadow: none; +} + +.ui.google.plus.button:active { + background-color: #bf3322; + 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: #cc181e; + color: #ffffff; + text-shadow: none; + background-image: none; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} + +.ui.youtube.button:hover { + background-color: #bd0d13; + color: #ffffff; + text-shadow: none; +} + +.ui.youtube.button:active { + background-color: #9e1317; + color: #ffffff; + text-shadow: none; +} + +/* Instagram */ + +.ui.instagram.button { + background-color: #49769c; + color: #ffffff; + text-shadow: none; + background-image: none; + 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: #00aced; + color: #ffffff; + text-shadow: none; + background-image: none; + box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; +} + +.ui.pinterest.button:hover { + background-color: #0099d4; + color: #ffffff; + text-shadow: none; +} + +.ui.pinterest.button:active { + background-color: #0087ba; + color: #ffffff; + text-shadow: none; +} + +/* VK */ + +.ui.vk.button { + background-color: #4D7198; + color: #ffffff; + background-image: none; + 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 > .right.icon:not(.button) { + 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.71428571rem; +} + +.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; + 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; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} + +.ui.basic.buttons { + 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; + 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; + 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; + 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; + box-shadow: '' !important; + color: rgba(0, 0, 0, 0.95); + box-shadow: rgba(34, 36, 38, 0.35); +} + +.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 { + 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 { + 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 { + box-shadow: rgba(34, 36, 38, 0.35) inset; +} + +/* Standard Basic Inverted */ + +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + background-color: transparent !important; + color: #f9fafb !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; + box-shadow: 0px 0px 0px 2px #ffffff inset !important; +} + +.ui.basic.inverted.buttons .button:focus, +.ui.basic.inverted.button:focus { + color: #ffffff !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; + 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; + 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); + 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); + 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: ''; + 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; + 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%); + -ms-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; + 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; + 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; + 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: -webkit-flex; + 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: -webkit-inline-flex; + 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: -webkit-inline-flex; + 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.500%; +} + +.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: -webkit-flex; + 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.500%; +} + +.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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #0f0f10 inset !important; + color: #343637 !important; +} + +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #696969 inset !important; + color: #909090 !important; +} + +.ui.basic.grey.buttons .button:active, +.ui.basic.grey.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #995a31 inset !important; + color: #805031 !important; +} + +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #1279c6 inset !important; + color: #1a69a4 !important; +} + +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #13ae38 inset !important; + color: #198f35 !important; +} + +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + 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; + 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 { + box-shadlightOw: 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #f56100 inset !important; + color: #cf590c !important; +} + +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #ea158d inset !important; + color: #c71f7e !important; +} + +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #5626bf inset !important; + color: #502aa1 !important; +} + +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #9724be inset !important; + color: #82299f !important; +} + +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #d41515 inset !important; + color: #b21e1e !important; +} + +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #009c95 inset !important; + color: #00827c !important; +} + +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #aac109 inset !important; + color: #8d9e13 !important; +} + +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; + 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; + 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; + box-shadow: 0px 0px 0px 1px #eaae00 inset !important; + color: #cd9903 !important; +} + +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + 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; + 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 { + 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; + 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 { + 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 { + 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 { + 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 { + box-shadow: 0px 0px 0px 2px #ebcd00 inset !important; + color: #ffe21f !important; +} + +/*------------------- + Primary +--------------------*/ + +.ui.primary.buttons .button, +.ui.primary.button { + background-color: #2185d0; + color: #ffffff; + text-shadow: none; + background-image: none; +} + +.ui.primary.button { + 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.active.button { + background-color: #1279c6; + color: #ffffff; + text-shadow: none; +} + +/*------------------- + Secondary +--------------------*/ + +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: #1b1c1d; + color: #ffffff; + text-shadow: none; + background-image: none; +} + +.ui.secondary.button { + 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.active.button { + background-color: #27292a; + color: #ffffff; + text-shadow: none; +} + +/*--------------- + Positive +----------------*/ + +.ui.positive.buttons .button, +.ui.positive.button { + background-color: #21ba45 !important; + color: #ffffff; + text-shadow: none; + background-image: none; +} + +.ui.positive.button { + 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 !important; + color: #ffffff; + text-shadow: none; +} + +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: #0ea432 !important; + color: #ffffff; + text-shadow: none; +} + +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: #198f35 !important; + color: #ffffff; + text-shadow: none; +} + +.ui.positive.buttons .active.button, +.ui.positive.active.button, +.ui.positive.buttons .active.button:active { + background-color: #13ae38; + color: #ffffff; + text-shadow: none; +} + +/*--------------- + Negative +----------------*/ + +.ui.negative.buttons .button, +.ui.negative.button { + background-color: #db2828 !important; + color: #ffffff; + text-shadow: none; + background-image: none; +} + +.ui.negative.button { + 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 !important; + color: #ffffff; + text-shadow: none; +} + +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: #ca1010 !important; + color: #ffffff; + text-shadow: none; +} + +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: #b21e1e !important; + color: #ffffff; + text-shadow: none; +} + +.ui.negative.buttons .active.button, +.ui.negative.active.button, +.ui.negative.buttons .active.button:active { + background-color: #d41515; + color: #ffffff; + text-shadow: none; +} + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -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) { + 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; + -webkit-flex: 1 0 auto; + -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 { + 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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: 0px 0px 0px 0px; + box-shadow: none; +} + +.ui.vertical.buttons .button:first-child, +.ui.vertical.buttons .mini.button:first-child, +.ui.vertical.buttons .tiny.button:first-child, +.ui.vertical.buttons .small.button:first-child, +.ui.vertical.buttons .massive.button:first-child, +.ui.vertical.buttons .huge.button:first-child { + border-radius: 0.28571429rem 0.28571429rem 0px 0px; +} + +.ui.vertical.buttons .button:last-child, +.ui.vertical.buttons .mini.button:last-child, +.ui.vertical.buttons .tiny.button:last-child, +.ui.vertical.buttons .small.button:last-child, +.ui.vertical.buttons .massive.button:last-child, +.ui.vertical.buttons .huge.button:last-child, +.ui.vertical.buttons .gigantic.button:last-child { + margin-bottom: 0px; + border-radius: 0px 0px 0.28571429rem 0.28571429rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Container +*******************************/ + +/* All Sizes */ + +.ui.container { + display: block; + max-width: 100% !important; +} + +/* Mobile */ + +@media only screen and (max-width: 767px) { + .ui.container { + width: auto !important; + margin-left: 1em !important; + margin-right: 1em !important; + } + + .ui.grid.container { + width: auto !important; + } + + .ui.relaxed.grid.container { + width: auto !important; + } + + .ui.very.relaxed.grid.container { + width: auto !important; + } +} + +/* Tablet */ + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .ui.container { + width: 723px; + margin-left: auto !important; + margin-right: auto !important; + } + + .ui.grid.container { + width: calc( 723px + 2rem ) !important; + } + + .ui.relaxed.grid.container { + width: calc( 723px + 3rem ) !important; + } + + .ui.very.relaxed.grid.container { + width: calc( 723px + 5rem ) !important; + } +} + +/* Small Monitor */ + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .ui.container { + width: 933px; + margin-left: auto !important; + margin-right: auto !important; + } + + .ui.grid.container { + width: calc( 933px + 2rem ) !important; + } + + .ui.relaxed.grid.container { + width: calc( 933px + 3rem ) !important; + } + + .ui.very.relaxed.grid.container { + width: calc( 933px + 5rem ) !important; + } +} + +/* Large Monitor */ + +@media only screen and (min-width: 1200px) { + .ui.container { + width: 1127px; + margin-left: auto !important; + margin-right: auto !important; + } + + .ui.grid.container { + width: calc( 1127px + 2rem ) !important; + } + + .ui.relaxed.grid.container { + width: calc( 1127px + 3rem ) !important; + } + + .ui.very.relaxed.grid.container { + width: calc( 1127px + 5rem ) !important; + } +} + +/******************************* + Types +*******************************/ + +/* Text Container */ + +.ui.text.container { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + max-width: 700px !important; + line-height: 1.5; +} + +.ui.text.container { + font-size: 1.14285714rem; +} + +/* Fluid */ + +.ui.fluid.container { + width: 100%; +} + +/******************************* + Variations +*******************************/ + +.ui[class*="left aligned"].container { + text-align: left; +} + +.ui[class*="center aligned"].container { + text-align: center; +} + +.ui[class*="right aligned"].container { + text-align: right; +} + +.ui.justified.container { + text-align: justify; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: ''; + overflow: hidden; + 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%); + -ms-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; + -ms-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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + width: 16px; + height: 11px; + line-height: 11px; + vertical-align: baseline; + margin: 0em 0.5em 0em 0em; + text-decoration: inherit; + speak: none; + font-smoothing: antialiased; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +/* Sprite */ + +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url("themes/default/assets/images/flags.png") no-repeat -108px -1976px; + width: 16px; + height: 11px; +} + +/* Flag Sprite Based On http://www.famfamfam.com/lab/icons/flags/ */ + +/******************************* + Theme Overrides +*******************************/ + +i.flag.ad:before, +i.flag.andorra:before { + background-position: 0px 0px; +} + +i.flag.ae:before, +i.flag.united.arab.emirates:before, +i.flag.uae:before { + background-position: 0px -26px; +} + +i.flag.af:before, +i.flag.afghanistan:before { + background-position: 0px -52px; +} + +i.flag.ag:before, +i.flag.antigua:before { + background-position: 0px -78px; +} + +i.flag.ai:before, +i.flag.anguilla:before { + background-position: 0px -104px; +} + +i.flag.al:before, +i.flag.albania:before { + background-position: 0px -130px; +} + +i.flag.am:before, +i.flag.armenia:before { + background-position: 0px -156px; +} + +i.flag.an:before, +i.flag.netherlands.antilles:before { + background-position: 0px -182px; +} + +i.flag.ao:before, +i.flag.angola:before { + background-position: 0px -208px; +} + +i.flag.ar:before, +i.flag.argentina:before { + background-position: 0px -234px; +} + +i.flag.as:before, +i.flag.american.samoa:before { + background-position: 0px -260px; +} + +i.flag.at:before, +i.flag.austria:before { + background-position: 0px -286px; +} + +i.flag.au:before, +i.flag.australia:before { + background-position: 0px -312px; +} + +i.flag.aw:before, +i.flag.aruba:before { + background-position: 0px -338px; +} + +i.flag.ax:before, +i.flag.aland.islands:before { + background-position: 0px -364px; +} + +i.flag.az:before, +i.flag.azerbaijan:before { + background-position: 0px -390px; +} + +i.flag.ba:before, +i.flag.bosnia:before { + background-position: 0px -416px; +} + +i.flag.bb:before, +i.flag.barbados:before { + background-position: 0px -442px; +} + +i.flag.bd:before, +i.flag.bangladesh:before { + background-position: 0px -468px; +} + +i.flag.be:before, +i.flag.belgium:before { + background-position: 0px -494px; +} + +i.flag.bf:before, +i.flag.burkina.faso:before { + background-position: 0px -520px; +} + +i.flag.bg:before, +i.flag.bulgaria:before { + background-position: 0px -546px; +} + +i.flag.bh:before, +i.flag.bahrain:before { + background-position: 0px -572px; +} + +i.flag.bi:before, +i.flag.burundi:before { + background-position: 0px -598px; +} + +i.flag.bj:before, +i.flag.benin:before { + background-position: 0px -624px; +} + +i.flag.bm:before, +i.flag.bermuda:before { + background-position: 0px -650px; +} + +i.flag.bn:before, +i.flag.brunei:before { + background-position: 0px -676px; +} + +i.flag.bo:before, +i.flag.bolivia:before { + background-position: 0px -702px; +} + +i.flag.br:before, +i.flag.brazil:before { + background-position: 0px -728px; +} + +i.flag.bs:before, +i.flag.bahamas:before { + background-position: 0px -754px; +} + +i.flag.bt:before, +i.flag.bhutan:before { + background-position: 0px -780px; +} + +i.flag.bv:before, +i.flag.bouvet.island:before { + background-position: 0px -806px; +} + +i.flag.bw:before, +i.flag.botswana:before { + background-position: 0px -832px; +} + +i.flag.by:before, +i.flag.belarus:before { + background-position: 0px -858px; +} + +i.flag.bz:before, +i.flag.belize:before { + background-position: 0px -884px; +} + +i.flag.ca:before, +i.flag.canada:before { + background-position: 0px -910px; +} + +i.flag.cc:before, +i.flag.cocos.islands:before { + background-position: 0px -962px; +} + +i.flag.cd:before, +i.flag.congo:before { + background-position: 0px -988px; +} + +i.flag.cf:before, +i.flag.central.african.republic:before { + background-position: 0px -1014px; +} + +i.flag.cg:before, +i.flag.congo.brazzaville:before { + background-position: 0px -1040px; +} + +i.flag.ch:before, +i.flag.switzerland:before { + background-position: 0px -1066px; +} + +i.flag.ci:before, +i.flag.cote.divoire:before { + background-position: 0px -1092px; +} + +i.flag.ck:before, +i.flag.cook.islands:before { + background-position: 0px -1118px; +} + +i.flag.cl:before, +i.flag.chile:before { + background-position: 0px -1144px; +} + +i.flag.cm:before, +i.flag.cameroon:before { + background-position: 0px -1170px; +} + +i.flag.cn:before, +i.flag.china:before { + background-position: 0px -1196px; +} + +i.flag.co:before, +i.flag.colombia:before { + background-position: 0px -1222px; +} + +i.flag.cr:before, +i.flag.costa.rica:before { + background-position: 0px -1248px; +} + +i.flag.cs:before, +i.flag.serbia:before { + background-position: 0px -1274px; +} + +i.flag.cu:before, +i.flag.cuba:before { + background-position: 0px -1300px; +} + +i.flag.cv:before, +i.flag.cape.verde:before { + background-position: 0px -1326px; +} + +i.flag.cx:before, +i.flag.christmas.island:before { + background-position: 0px -1352px; +} + +i.flag.cy:before, +i.flag.cyprus:before { + background-position: 0px -1378px; +} + +i.flag.cz:before, +i.flag.czech.republic:before { + background-position: 0px -1404px; +} + +i.flag.de:before, +i.flag.germany:before { + background-position: 0px -1430px; +} + +i.flag.dj:before, +i.flag.djibouti:before { + background-position: 0px -1456px; +} + +i.flag.dk:before, +i.flag.denmark:before { + background-position: 0px -1482px; +} + +i.flag.dm:before, +i.flag.dominica:before { + background-position: 0px -1508px; +} + +i.flag.do:before, +i.flag.dominican.republic:before { + background-position: 0px -1534px; +} + +i.flag.dz:before, +i.flag.algeria:before { + background-position: 0px -1560px; +} + +i.flag.ec:before, +i.flag.ecuador:before { + background-position: 0px -1586px; +} + +i.flag.ee:before, +i.flag.estonia:before { + background-position: 0px -1612px; +} + +i.flag.eg:before, +i.flag.egypt:before { + background-position: 0px -1638px; +} + +i.flag.eh:before, +i.flag.western.sahara:before { + background-position: 0px -1664px; +} + +i.flag.er:before, +i.flag.eritrea:before { + background-position: 0px -1716px; +} + +i.flag.es:before, +i.flag.spain:before { + background-position: 0px -1742px; +} + +i.flag.et:before, +i.flag.ethiopia:before { + background-position: 0px -1768px; +} + +i.flag.eu:before, +i.flag.european.union:before { + background-position: 0px -1794px; +} + +i.flag.fi:before, +i.flag.finland:before { + background-position: 0px -1846px; +} + +i.flag.fj:before, +i.flag.fiji:before { + background-position: 0px -1872px; +} + +i.flag.fk:before, +i.flag.falkland.islands:before { + background-position: 0px -1898px; +} + +i.flag.fm:before, +i.flag.micronesia:before { + background-position: 0px -1924px; +} + +i.flag.fo:before, +i.flag.faroe.islands:before { + background-position: 0px -1950px; +} + +i.flag.fr:before, +i.flag.france:before { + background-position: 0px -1976px; +} + +i.flag.ga:before, +i.flag.gabon:before { + background-position: -36px 0px; +} + +i.flag.gb:before, +i.flag.united.kingdom:before { + background-position: -36px -26px; +} + +i.flag.gd:before, +i.flag.grenada:before { + background-position: -36px -52px; +} + +i.flag.ge:before, +i.flag.georgia:before { + background-position: -36px -78px; +} + +i.flag.gf:before, +i.flag.french.guiana:before { + background-position: -36px -104px; +} + +i.flag.gh:before, +i.flag.ghana:before { + background-position: -36px -130px; +} + +i.flag.gi:before, +i.flag.gibraltar:before { + background-position: -36px -156px; +} + +i.flag.gl:before, +i.flag.greenland:before { + background-position: -36px -182px; +} + +i.flag.gm:before, +i.flag.gambia:before { + background-position: -36px -208px; +} + +i.flag.gn:before, +i.flag.guinea:before { + background-position: -36px -234px; +} + +i.flag.gp:before, +i.flag.guadeloupe:before { + background-position: -36px -260px; +} + +i.flag.gq:before, +i.flag.equatorial.guinea:before { + background-position: -36px -286px; +} + +i.flag.gr:before, +i.flag.greece:before { + background-position: -36px -312px; +} + +i.flag.gs:before, +i.flag.sandwich.islands:before { + background-position: -36px -338px; +} + +i.flag.gt:before, +i.flag.guatemala:before { + background-position: -36px -364px; +} + +i.flag.gu:before, +i.flag.guam:before { + background-position: -36px -390px; +} + +i.flag.gw:before, +i.flag.guinea-bissau:before { + background-position: -36px -416px; +} + +i.flag.gy:before, +i.flag.guyana:before { + background-position: -36px -442px; +} + +i.flag.hk:before, +i.flag.hong.kong:before { + background-position: -36px -468px; +} + +i.flag.hm:before, +i.flag.heard.island:before { + background-position: -36px -494px; +} + +i.flag.hn:before, +i.flag.honduras:before { + background-position: -36px -520px; +} + +i.flag.hr:before, +i.flag.croatia:before { + background-position: -36px -546px; +} + +i.flag.ht:before, +i.flag.haiti:before { + background-position: -36px -572px; +} + +i.flag.hu:before, +i.flag.hungary:before { + background-position: -36px -598px; +} + +i.flag.id:before, +i.flag.indonesia:before { + background-position: -36px -624px; +} + +i.flag.ie:before, +i.flag.ireland:before { + background-position: -36px -650px; +} + +i.flag.il:before, +i.flag.israel:before { + background-position: -36px -676px; +} + +i.flag.in:before, +i.flag.india:before { + background-position: -36px -702px; +} + +i.flag.io:before, +i.flag.indian.ocean.territory:before { + background-position: -36px -728px; +} + +i.flag.iq:before, +i.flag.iraq:before { + background-position: -36px -754px; +} + +i.flag.ir:before, +i.flag.iran:before { + background-position: -36px -780px; +} + +i.flag.is:before, +i.flag.iceland:before { + background-position: -36px -806px; +} + +i.flag.it:before, +i.flag.italy:before { + background-position: -36px -832px; +} + +i.flag.jm:before, +i.flag.jamaica:before { + background-position: -36px -858px; +} + +i.flag.jo:before, +i.flag.jordan:before { + background-position: -36px -884px; +} + +i.flag.jp:before, +i.flag.japan:before { + background-position: -36px -910px; +} + +i.flag.ke:before, +i.flag.kenya:before { + background-position: -36px -936px; +} + +i.flag.kg:before, +i.flag.kyrgyzstan:before { + background-position: -36px -962px; +} + +i.flag.kh:before, +i.flag.cambodia:before { + background-position: -36px -988px; +} + +i.flag.ki:before, +i.flag.kiribati:before { + background-position: -36px -1014px; +} + +i.flag.km:before, +i.flag.comoros:before { + background-position: -36px -1040px; +} + +i.flag.kn:before, +i.flag.saint.kitts.and.nevis:before { + background-position: -36px -1066px; +} + +i.flag.kp:before, +i.flag.north.korea:before { + background-position: -36px -1092px; +} + +i.flag.kr:before, +i.flag.south.korea:before { + background-position: -36px -1118px; +} + +i.flag.kw:before, +i.flag.kuwait:before { + background-position: -36px -1144px; +} + +i.flag.ky:before, +i.flag.cayman.islands:before { + background-position: -36px -1170px; +} + +i.flag.kz:before, +i.flag.kazakhstan:before { + background-position: -36px -1196px; +} + +i.flag.la:before, +i.flag.laos:before { + background-position: -36px -1222px; +} + +i.flag.lb:before, +i.flag.lebanon:before { + background-position: -36px -1248px; +} + +i.flag.lc:before, +i.flag.saint.lucia:before { + background-position: -36px -1274px; +} + +i.flag.li:before, +i.flag.liechtenstein:before { + background-position: -36px -1300px; +} + +i.flag.lk:before, +i.flag.sri.lanka:before { + background-position: -36px -1326px; +} + +i.flag.lr:before, +i.flag.liberia:before { + background-position: -36px -1352px; +} + +i.flag.ls:before, +i.flag.lesotho:before { + background-position: -36px -1378px; +} + +i.flag.lt:before, +i.flag.lithuania:before { + background-position: -36px -1404px; +} + +i.flag.lu:before, +i.flag.luxembourg:before { + background-position: -36px -1430px; +} + +i.flag.lv:before, +i.flag.latvia:before { + background-position: -36px -1456px; +} + +i.flag.ly:before, +i.flag.libya:before { + background-position: -36px -1482px; +} + +i.flag.ma:before, +i.flag.morocco:before { + background-position: -36px -1508px; +} + +i.flag.mc:before, +i.flag.monaco:before { + background-position: -36px -1534px; +} + +i.flag.md:before, +i.flag.moldova:before { + background-position: -36px -1560px; +} + +i.flag.me:before, +i.flag.montenegro:before { + background-position: -36px -1586px; +} + +i.flag.mg:before, +i.flag.madagascar:before { + background-position: -36px -1613px; +} + +i.flag.mh:before, +i.flag.marshall.islands:before { + background-position: -36px -1639px; +} + +i.flag.mk:before, +i.flag.macedonia:before { + background-position: -36px -1665px; +} + +i.flag.ml:before, +i.flag.mali:before { + background-position: -36px -1691px; +} + +i.flag.mm:before, +i.flag.myanmar:before, +i.flag.burma:before { + background-position: -36px -1717px; +} + +i.flag.mn:before, +i.flag.mongolia:before { + background-position: -36px -1743px; +} + +i.flag.mo:before, +i.flag.macau:before { + background-position: -36px -1769px; +} + +i.flag.mp:before, +i.flag.northern.mariana.islands:before { + background-position: -36px -1795px; +} + +i.flag.mq:before, +i.flag.martinique:before { + background-position: -36px -1821px; +} + +i.flag.mr:before, +i.flag.mauritania:before { + background-position: -36px -1847px; +} + +i.flag.ms:before, +i.flag.montserrat:before { + background-position: -36px -1873px; +} + +i.flag.mt:before, +i.flag.malta:before { + background-position: -36px -1899px; +} + +i.flag.mu:before, +i.flag.mauritius:before { + background-position: -36px -1925px; +} + +i.flag.mv:before, +i.flag.maldives:before { + background-position: -36px -1951px; +} + +i.flag.mw:before, +i.flag.malawi:before { + background-position: -36px -1977px; +} + +i.flag.mx:before, +i.flag.mexico:before { + background-position: -72px 0px; +} + +i.flag.my:before, +i.flag.malaysia:before { + background-position: -72px -26px; +} + +i.flag.mz:before, +i.flag.mozambique:before { + background-position: -72px -52px; +} + +i.flag.na:before, +i.flag.namibia:before { + background-position: -72px -78px; +} + +i.flag.nc:before, +i.flag.new.caledonia:before { + background-position: -72px -104px; +} + +i.flag.ne:before, +i.flag.niger:before { + background-position: -72px -130px; +} + +i.flag.nf:before, +i.flag.norfolk.island:before { + background-position: -72px -156px; +} + +i.flag.ng:before, +i.flag.nigeria:before { + background-position: -72px -182px; +} + +i.flag.ni:before, +i.flag.nicaragua:before { + background-position: -72px -208px; +} + +i.flag.nl:before, +i.flag.netherlands:before { + background-position: -72px -234px; +} + +i.flag.no:before, +i.flag.norway:before { + background-position: -72px -260px; +} + +i.flag.np:before, +i.flag.nepal:before { + background-position: -72px -286px; +} + +i.flag.nr:before, +i.flag.nauru:before { + background-position: -72px -312px; +} + +i.flag.nu:before, +i.flag.niue:before { + background-position: -72px -338px; +} + +i.flag.nz:before, +i.flag.new.zealand:before { + background-position: -72px -364px; +} + +i.flag.om:before, +i.flag.oman:before { + background-position: -72px -390px; +} + +i.flag.pa:before, +i.flag.panama:before { + background-position: -72px -416px; +} + +i.flag.pe:before, +i.flag.peru:before { + background-position: -72px -442px; +} + +i.flag.pf:before, +i.flag.french.polynesia:before { + background-position: -72px -468px; +} + +i.flag.pg:before, +i.flag.new.guinea:before { + background-position: -72px -494px; +} + +i.flag.ph:before, +i.flag.philippines:before { + background-position: -72px -520px; +} + +i.flag.pk:before, +i.flag.pakistan:before { + background-position: -72px -546px; +} + +i.flag.pl:before, +i.flag.poland:before { + background-position: -72px -572px; +} + +i.flag.pm:before, +i.flag.saint.pierre:before { + background-position: -72px -598px; +} + +i.flag.pn:before, +i.flag.pitcairn.islands:before { + background-position: -72px -624px; +} + +i.flag.pr:before, +i.flag.puerto.rico:before { + background-position: -72px -650px; +} + +i.flag.ps:before, +i.flag.palestine:before { + background-position: -72px -676px; +} + +i.flag.pt:before, +i.flag.portugal:before { + background-position: -72px -702px; +} + +i.flag.pw:before, +i.flag.palau:before { + background-position: -72px -728px; +} + +i.flag.py:before, +i.flag.paraguay:before { + background-position: -72px -754px; +} + +i.flag.qa:before, +i.flag.qatar:before { + background-position: -72px -780px; +} + +i.flag.re:before, +i.flag.reunion:before { + background-position: -72px -806px; +} + +i.flag.ro:before, +i.flag.romania:before { + background-position: -72px -832px; +} + +i.flag.rs:before, +i.flag.serbia:before { + background-position: -72px -858px; +} + +i.flag.ru:before, +i.flag.russia:before { + background-position: -72px -884px; +} + +i.flag.rw:before, +i.flag.rwanda:before { + background-position: -72px -910px; +} + +i.flag.sa:before, +i.flag.saudi.arabia:before { + background-position: -72px -936px; +} + +i.flag.sb:before, +i.flag.solomon.islands:before { + background-position: -72px -962px; +} + +i.flag.sc:before, +i.flag.seychelles:before { + background-position: -72px -988px; +} + +i.flag.gb.sct:before, +i.flag.scotland:before { + background-position: -72px -1014px; +} + +i.flag.sd:before, +i.flag.sudan:before { + background-position: -72px -1040px; +} + +i.flag.se:before, +i.flag.sweden:before { + background-position: -72px -1066px; +} + +i.flag.sg:before, +i.flag.singapore:before { + background-position: -72px -1092px; +} + +i.flag.sh:before, +i.flag.saint.helena:before { + background-position: -72px -1118px; +} + +i.flag.si:before, +i.flag.slovenia:before { + background-position: -72px -1144px; +} + +i.flag.sj:before, +i.flag.svalbard:before, +i.flag.jan.mayen:before { + background-position: -72px -1170px; +} + +i.flag.sk:before, +i.flag.slovakia:before { + background-position: -72px -1196px; +} + +i.flag.sl:before, +i.flag.sierra.leone:before { + background-position: -72px -1222px; +} + +i.flag.sm:before, +i.flag.san.marino:before { + background-position: -72px -1248px; +} + +i.flag.sn:before, +i.flag.senegal:before { + background-position: -72px -1274px; +} + +i.flag.so:before, +i.flag.somalia:before { + background-position: -72px -1300px; +} + +i.flag.sr:before, +i.flag.suriname:before { + background-position: -72px -1326px; +} + +i.flag.st:before, +i.flag.sao.tome:before { + background-position: -72px -1352px; +} + +i.flag.sv:before, +i.flag.el.salvador:before { + background-position: -72px -1378px; +} + +i.flag.sy:before, +i.flag.syria:before { + background-position: -72px -1404px; +} + +i.flag.sz:before, +i.flag.swaziland:before { + background-position: -72px -1430px; +} + +i.flag.tc:before, +i.flag.caicos.islands:before { + background-position: -72px -1456px; +} + +i.flag.td:before, +i.flag.chad:before { + background-position: -72px -1482px; +} + +i.flag.tf:before, +i.flag.french.territories:before { + background-position: -72px -1508px; +} + +i.flag.tg:before, +i.flag.togo:before { + background-position: -72px -1534px; +} + +i.flag.th:before, +i.flag.thailand:before { + background-position: -72px -1560px; +} + +i.flag.tj:before, +i.flag.tajikistan:before { + background-position: -72px -1586px; +} + +i.flag.tk:before, +i.flag.tokelau:before { + background-position: -72px -1612px; +} + +i.flag.tl:before, +i.flag.timorleste:before { + background-position: -72px -1638px; +} + +i.flag.tm:before, +i.flag.turkmenistan:before { + background-position: -72px -1664px; +} + +i.flag.tn:before, +i.flag.tunisia:before { + background-position: -72px -1690px; +} + +i.flag.to:before, +i.flag.tonga:before { + background-position: -72px -1716px; +} + +i.flag.tr:before, +i.flag.turkey:before { + background-position: -72px -1742px; +} + +i.flag.tt:before, +i.flag.trinidad:before { + background-position: -72px -1768px; +} + +i.flag.tv:before, +i.flag.tuvalu:before { + background-position: -72px -1794px; +} + +i.flag.tw:before, +i.flag.taiwan:before { + background-position: -72px -1820px; +} + +i.flag.tz:before, +i.flag.tanzania:before { + background-position: -72px -1846px; +} + +i.flag.ua:before, +i.flag.ukraine:before { + background-position: -72px -1872px; +} + +i.flag.ug:before, +i.flag.uganda:before { + background-position: -72px -1898px; +} + +i.flag.um:before, +i.flag.us.minor.islands:before { + background-position: -72px -1924px; +} + +i.flag.us:before, +i.flag.america:before, +i.flag.united.states:before { + background-position: -72px -1950px; +} + +i.flag.uy:before, +i.flag.uruguay:before { + background-position: -72px -1976px; +} + +i.flag.uz:before, +i.flag.uzbekistan:before { + background-position: -108px 0px; +} + +i.flag.va:before, +i.flag.vatican.city:before { + background-position: -108px -26px; +} + +i.flag.vc:before, +i.flag.saint.vincent:before { + background-position: -108px -52px; +} + +i.flag.ve:before, +i.flag.venezuela:before { + background-position: -108px -78px; +} + +i.flag.vg:before, +i.flag.british.virgin.islands:before { + background-position: -108px -104px; +} + +i.flag.vi:before, +i.flag.us.virgin.islands:before { + background-position: -108px -130px; +} + +i.flag.vn:before, +i.flag.vietnam:before { + background-position: -108px -156px; +} + +i.flag.vu:before, +i.flag.vanuatu:before { + background-position: -108px -182px; +} + +i.flag.gb.wls:before, +i.flag.wales:before { + background-position: -108px -208px; +} + +i.flag.wf:before, +i.flag.wallis.and.futuna:before { + background-position: -108px -234px; +} + +i.flag.ws:before, +i.flag.samoa:before { + background-position: -108px -260px; +} + +i.flag.ye:before, +i.flag.yemen:before { + background-position: -108px -286px; +} + +i.flag.yt:before, +i.flag.mayotte:before { + background-position: -108px -312px; +} + +i.flag.za:before, +i.flag.south.africa:before { + background-position: -108px -338px; +} + +i.flag.zm:before, +i.flag.zambia:before { + background-position: -108px -364px; +} + +i.flag.zw:before, +i.flag.zimbabwe:before { + background-position: -108px -390px; +} + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Header +*******************************/ + +/* Standard */ + +.ui.header { + border: none; + margin: calc(2rem - 0.14285em ) 0em 1rem; + padding: 0em 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-weight: bold; + line-height: 1.2857em; + text-transform: none; + color: rgba(0, 0, 0, 0.87); +} + +.ui.header:first-child { + margin-top: -0.14285em; +} + +.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: 0.14285em; + vertical-align: middle; +} + +/* With Text Node */ + +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: 0.75rem; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image, +.ui.header > img { + display: inline-block; + margin-top: 0.14285em; + width: 2.5em; + height: auto; + vertical-align: middle; +} + +.ui.header > .image: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.714rem; +} + +h3.ui.header { + font-size: 1.28rem; +} + +h4.ui.header { + font-size: 1.071rem; +} + +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.714em; +} + +.ui.medium.header { + font-size: 1.28em; +} + +.ui.small.header { + font-size: 1.071em; +} + +.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.71428571em; +} + +.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; +} + +.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-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + box-shadow: none; + border-color: transparent; +} + +.ui.inverted.block.header { + background: #545454 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: #545454 linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + 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; +} + +/*------------------- + Fittted +--------------------*/ + +.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.71428571rem 1rem; + 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.71428571rem 1rem; + margin-left: -1px; + margin-right: -1px; + 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.28em; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon { + cursor: pointer; + opacity: 0.8; + -webkit-transition: opacity 0.1s ease; + transition: opacity 0.1s ease; +} + +i.link.icon:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + padding: 0.5em 0.5em !important; + 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; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + -webkit-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +i.vertically.flipped.icon { + -webkit-transform: scale(1, -1); + -ms-transform: scale(1, -1); + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + width: 2em; + height: 2em; + padding: 0.5em 0.41em !important; + box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset; +} + +i.bordered.inverted.icon { + border: 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.bordeblack.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.71428571rem; +} + +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: 0.85714286rem; +} + +i.small.icon, +i.small.icons { + line-height: 1; + font-size: 0.92857143em; +} + +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%); + -ms-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; + -ms-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; + -ms-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 .inverted.corner.icon { + text-shadow: -1px -1px 0 #1b1c1d, 1px -1px 0 #1b1c1d, -1px 1px 0 #1b1c1d, 1px 1px 0 #1b1c1d; +} + +/* + * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome + * License - http://fontawesome.io/license (Font: SIL OFL 1.1, 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 +*******************************/ + +/* Web Content */ + +i.icon.search:before { + content: "\f002"; +} + +i.icon.mail.outline:before { + content: "\f003"; +} + +i.icon.external:before { + content: "\f08e"; +} + +i.icon.signal:before { + content: "\f012"; +} + +i.icon.setting:before { + content: "\f013"; +} + +i.icon.home:before { + content: "\f015"; +} + +i.icon.inbox:before { + content: "\f01c"; +} + +i.icon.browser:before { + content: "\f022"; +} + +i.icon.tag:before { + content: "\f02b"; +} + +i.icon.tags:before { + content: "\f02c"; +} + +i.icon.calendar:before { + content: "\f073"; +} + +i.icon.comment:before { + content: "\f075"; +} + +i.icon.comments:before { + content: "\f086"; +} + +i.icon.shop:before { + content: "\f07a"; +} + +i.icon.privacy:before { + content: "\f084"; +} + +i.icon.settings:before { + content: "\f085"; +} + +i.icon.trophy:before { + content: "\f091"; +} + +i.icon.payment:before { + content: "\f09d"; +} + +i.icon.feed:before { + content: "\f09e"; +} + +i.icon.alarm.outline:before { + content: "\f0a2"; +} + +i.icon.tasks:before { + content: "\f0ae"; +} + +i.icon.cloud:before { + content: "\f0c2"; +} + +i.icon.lab:before { + content: "\f0c3"; +} + +i.icon.mail:before { + content: "\f0e0"; +} + +i.icon.idea:before { + content: "\f0eb"; +} + +i.icon.dashboard:before { + content: "\f0e4"; +} + +i.icon.sitemap:before { + content: "\f0e8"; +} + +i.icon.alarm:before { + content: "\f0f3"; +} + +i.icon.terminal:before { + content: "\f120"; +} + +i.icon.code:before { + content: "\f121"; +} + +i.icon.protect:before { + content: "\f132"; +} + +i.icon.calendar.outline:before { + content: "\f133"; +} + +i.icon.ticket:before { + content: "\f145"; +} + +i.icon.external.square:before { + content: "\f14c"; +} + +i.icon.map:before { + content: "\f14e"; +} + +i.icon.bug:before { + content: "\f188"; +} + +i.icon.mail.square:before { + content: "\f199"; +} + +i.icon.history:before { + content: "\f1da"; +} + +i.icon.options:before { + content: "\f1de"; +} + +i.icon.comment.outline:before { + content: "\f0e5"; +} + +i.icon.comments.outline:before { + content: "\f0e6"; +} + +i.icon.text.telephone:before { + content: "\f1e4"; +} + +i.icon.find:before { + content: "\f1e5"; +} + +i.icon.wifi:before { + content: "\f1eb"; +} + +i.icon.alarm.slash:before { + content: "\f1f6"; +} + +i.icon.alarm.slash.outline:before { + content: "\f1f7"; +} + +i.icon.copyright:before { + content: "\f1f9"; +} + +i.icon.at:before { + content: "\f1fa"; +} + +i.icon.eyedropper:before { + content: "\f1fb"; +} + +i.icon.paint.brush:before { + content: "\f1fc"; +} + +i.icon.heartbeat:before { + content: "\f21e"; +} + +/* User Actions */ + +i.icon.download:before { + content: "\f019"; +} + +i.icon.repeat:before { + content: "\f01e"; +} + +i.icon.refresh:before { + content: "\f021"; +} + +i.icon.lock:before { + content: "\f023"; +} + +i.icon.bookmark:before { + content: "\f02e"; +} + +i.icon.print:before { + content: "\f02f"; +} + +i.icon.write:before { + content: "\f040"; +} + +i.icon.theme:before { + content: "\f043"; +} + +i.icon.adjust:before { + content: "\f042"; +} + +i.icon.edit:before { + content: "\f044"; +} + +i.icon.external.share:before { + content: "\f045"; +} + +i.icon.ban:before { + content: "\f05e"; +} + +i.icon.mail.forward:before { + content: "\f064"; +} + +i.icon.share:before { + content: "\f064"; +} + +i.icon.expand:before { + content: "\f065"; +} + +i.icon.compress:before { + content: "\f066"; +} + +i.icon.unhide:before { + content: "\f06e"; +} + +i.icon.hide:before { + content: "\f070"; +} + +i.icon.random:before { + content: "\f074"; +} + +i.icon.retweet:before { + content: "\f079"; +} + +i.icon.sign.out:before { + content: "\f08b"; +} + +i.icon.pin:before { + content: "\f08d"; +} + +i.icon.sign.in:before { + content: "\f090"; +} + +i.icon.upload:before { + content: "\f093"; +} + +i.icon.call:before { + content: "\f095"; +} + +i.icon.call.square:before { + content: "\f098"; +} + +i.icon.remove.bookmark:before { + content: "\f097"; +} + +i.icon.unlock:before { + content: "\f09c"; +} + +i.icon.configure:before { + content: "\f0ad"; +} + +i.icon.filter:before { + content: "\f0b0"; +} + +i.icon.wizard:before { + content: "\f0d0"; +} + +i.icon.undo:before { + content: "\f0e2"; +} + +i.icon.exchange:before { + content: "\f0ec"; +} + +i.icon.cloud.download:before { + content: "\f0ed"; +} + +i.icon.cloud.upload:before { + content: "\f0ee"; +} + +i.icon.reply:before { + content: "\f112"; +} + +i.icon.reply.all:before { + content: "\f122"; +} + +i.icon.erase:before { + content: "\f12d"; +} + +i.icon.unlock.alternate:before { + content: "\f13e"; +} + +i.icon.archive:before { + content: "\f187"; +} + +i.icon.translate:before { + content: "\f1ab"; +} + +i.icon.recycle:before { + content: "\f1b8"; +} + +i.icon.send:before { + content: "\f1d8"; +} + +i.icon.send.outline:before { + content: "\f1d9"; +} + +i.icon.share.alternate:before { + content: "\f1e0"; +} + +i.icon.share.alternate.square:before { + content: "\f1e1"; +} + +i.icon.wait:before { + content: "\f017"; +} + +i.icon.write.square:before { + content: "\f14b"; +} + +i.icon.share.square:before { + content: "\f14d"; +} + +i.icon.add.to.cart:before { + content: "\f217"; +} + +i.icon.in.cart:before { + content: "\f218"; +} + +i.icon.add.user:before { + content: "\f234"; +} + +i.icon.remove.user:before { + content: "\f235"; +} + +/* Messages */ + +i.icon.help.circle:before { + content: "\f059"; +} + +i.icon.info.circle:before { + content: "\f05a"; +} + +i.icon.warning:before { + content: "\f12a"; +} + +i.icon.warning.circle:before { + content: "\f06a"; +} + +i.icon.warning.sign:before { + content: "\f071"; +} + +i.icon.help:before { + content: "\f128"; +} + +i.icon.info:before { + content: "\f129"; +} + +i.icon.announcement:before { + content: "\f0a1"; +} + +i.icon.birthday:before { + content: "\f1fd"; +} + +/* Users */ + +i.icon.users:before { + content: "\f0c0"; +} + +i.icon.doctor:before { + content: "\f0f0"; +} + +i.icon.child:before { + content: "\f1ae"; +} + +i.icon.user:before { + content: "\f007"; +} + +i.icon.handicap:before { + content: "\f193"; +} + +i.icon.student:before { + content: "\f19d"; +} + +i.icon.spy:before { + content: "\f21b"; +} + +/* Gender & Sexuality */ + +i.icon.female:before { + content: "\f182"; +} + +i.icon.male:before { + content: "\f183"; +} + +i.icon.woman:before { + content: "\f221"; +} + +i.icon.man:before { + content: "\f222"; +} + +i.icon.non.binary.transgender:before { + content: "\f223"; +} + +i.icon.intergender:before { + content: "\f224"; +} + +i.icon.transgender:before { + content: "\f225"; +} + +i.icon.lesbian:before { + content: "\f226"; +} + +i.icon.gay:before { + content: "\f227"; +} + +i.icon.heterosexual:before { + content: "\f228"; +} + +i.icon.other.gender:before { + content: "\f229"; +} + +i.icon.other.gender.vertical:before { + content: "\f22a"; +} + +i.icon.other.gender.horizontal:before { + content: "\f22b"; +} + +i.icon.neuter:before { + content: "\f22c"; +} + +/* View Adjustment */ + +i.icon.grid.layout:before { + content: "\f00a"; +} + +i.icon.list.layout:before { + content: "\f00b"; +} + +i.icon.block.layout:before { + content: "\f009"; +} + +i.icon.zoom:before { + content: "\f00e"; +} + +i.icon.zoom.out:before { + content: "\f010"; +} + +i.icon.resize.vertical:before { + content: "\f07d"; +} + +i.icon.resize.horizontal:before { + content: "\f07e"; +} + +i.icon.maximize:before { + content: "\f0b2"; +} + +i.icon.crop:before { + content: "\f125"; +} + +/* Literal Objects */ + +i.icon.cocktail:before { + content: "\f000"; +} + +i.icon.road:before { + content: "\f018"; +} + +i.icon.flag:before { + content: "\f024"; +} + +i.icon.book:before { + content: "\f02d"; +} + +i.icon.gift:before { + content: "\f06b"; +} + +i.icon.leaf:before { + content: "\f06c"; +} + +i.icon.fire:before { + content: "\f06d"; +} + +i.icon.plane:before { + content: "\f072"; +} + +i.icon.magnet:before { + content: "\f076"; +} + +i.icon.legal:before { + content: "\f0e3"; +} + +i.icon.lemon:before { + content: "\f094"; +} + +i.icon.world:before { + content: "\f0ac"; +} + +i.icon.travel:before { + content: "\f0b1"; +} + +i.icon.shipping:before { + content: "\f0d1"; +} + +i.icon.money:before { + content: "\f0d6"; +} + +i.icon.lightning:before { + content: "\f0e7"; +} + +i.icon.rain:before { + content: "\f0e9"; +} + +i.icon.treatment:before { + content: "\f0f1"; +} + +i.icon.suitcase:before { + content: "\f0f2"; +} + +i.icon.bar:before { + content: "\f0fc"; +} + +i.icon.flag.outline:before { + content: "\f11d"; +} + +i.icon.flag.checkered:before { + content: "\f11e"; +} + +i.icon.puzzle:before { + content: "\f12e"; +} + +i.icon.fire.extinguisher:before { + content: "\f134"; +} + +i.icon.rocket:before { + content: "\f135"; +} + +i.icon.anchor:before { + content: "\f13d"; +} + +i.icon.bullseye:before { + content: "\f140"; +} + +i.icon.sun:before { + content: "\f185"; +} + +i.icon.moon:before { + content: "\f186"; +} + +i.icon.fax:before { + content: "\f1ac"; +} + +i.icon.life.ring:before { + content: "\f1cd"; +} + +i.icon.bomb:before { + content: "\f1e2"; +} + +i.icon.soccer:before { + content: "\f1e3"; +} + +i.icon.calculator:before { + content: "\f1ec"; +} + +i.icon.diamond:before { + content: "\f219"; +} + +/* Shapes */ + +i.icon.crosshairs:before { + content: "\f05b"; +} + +i.icon.asterisk:before { + content: "\f069"; +} + +i.icon.certificate:before { + content: "\f0a3"; +} + +i.icon.circle:before { + content: "\f111"; +} + +i.icon.quote.left:before { + content: "\f10d"; +} + +i.icon.quote.right:before { + content: "\f10e"; +} + +i.icon.ellipsis.horizontal:before { + content: "\f141"; +} + +i.icon.ellipsis.vertical:before { + content: "\f142"; +} + +i.icon.cube:before { + content: "\f1b2"; +} + +i.icon.cubes:before { + content: "\f1b3"; +} + +i.icon.circle.notched:before { + content: "\f1ce"; +} + +i.icon.circle.thin:before { + content: "\f1db"; +} + +i.icon.square.outline:before { + content: "\f096"; +} + +i.icon.square:before { + content: "\f0c8"; +} + +/* Item Selection */ + +i.icon.checkmark:before { + content: "\f00c"; +} + +i.icon.remove:before { + content: "\f00d"; +} + +i.icon.checkmark.box:before { + content: "\f046"; +} + +i.icon.move:before { + content: "\f047"; +} + +i.icon.add.circle:before { + content: "\f055"; +} + +i.icon.minus.circle:before { + content: "\f056"; +} + +i.icon.remove.circle:before { + content: "\f057"; +} + +i.icon.check.circle:before { + content: "\f058"; +} + +i.icon.remove.circle.outline:before { + content: "\f05c"; +} + +i.icon.check.circle.outline:before { + content: "\f05d"; +} + +i.icon.plus:before { + content: "\f067"; +} + +i.icon.minus:before { + content: "\f068"; +} + +i.icon.add.square:before { + content: "\f0fe"; +} + +i.icon.radio:before { + content: "\f10c"; +} + +i.icon.selected.radio:before { + content: "\f192"; +} + +i.icon.minus.square:before { + content: "\f146"; +} + +i.icon.minus.square.outline:before { + content: "\f147"; +} + +i.icon.check.square:before { + content: "\f14a"; +} + +i.icon.plus.square.outline:before { + content: "\f196"; +} + +i.icon.toggle.off:before { + content: "\f204"; +} + +i.icon.toggle.on:before { + content: "\f205"; +} + +/* Media */ + +i.icon.film:before { + content: "\f008"; +} + +i.icon.sound:before { + content: "\f025"; +} + +i.icon.photo:before { + content: "\f030"; +} + +i.icon.bar.chart:before { + content: "\f080"; +} + +i.icon.camera.retro:before { + content: "\f083"; +} + +i.icon.newspaper:before { + content: "\f1ea"; +} + +i.icon.area.chart:before { + content: "\f1fe"; +} + +i.icon.pie.chart:before { + content: "\f200"; +} + +i.icon.line.chart:before { + content: "\f201"; +} + +/* Pointers */ + +i.icon.arrow.circle.outline.down:before { + content: "\f01a"; +} + +i.icon.arrow.circle.outline.up:before { + content: "\f01b"; +} + +i.icon.chevron.left:before { + content: "\f053"; +} + +i.icon.chevron.right:before { + content: "\f054"; +} + +i.icon.arrow.left:before { + content: "\f060"; +} + +i.icon.arrow.right:before { + content: "\f061"; +} + +i.icon.arrow.up:before { + content: "\f062"; +} + +i.icon.arrow.down:before { + content: "\f063"; +} + +i.icon.chevron.up:before { + content: "\f077"; +} + +i.icon.chevron.down:before { + content: "\f078"; +} + +i.icon.pointing.right:before { + content: "\f0a4"; +} + +i.icon.pointing.left:before { + content: "\f0a5"; +} + +i.icon.pointing.up:before { + content: "\f0a6"; +} + +i.icon.pointing.down:before { + content: "\f0a7"; +} + +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.circle.down:before { + content: "\f0ab"; +} + +i.icon.caret.down:before { + content: "\f0d7"; +} + +i.icon.caret.up:before { + content: "\f0d8"; +} + +i.icon.caret.left:before { + content: "\f0d9"; +} + +i.icon.caret.right:before { + content: "\f0da"; +} + +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.double.down:before { + content: "\f103"; +} + +i.icon.angle.left:before { + content: "\f104"; +} + +i.icon.angle.right:before { + content: "\f105"; +} + +i.icon.angle.up:before { + content: "\f106"; +} + +i.icon.angle.down:before { + content: "\f107"; +} + +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.circle.down:before { + content: "\f13a"; +} + +i.icon.toggle.down:before { + content: "\f150"; +} + +i.icon.toggle.up:before { + content: "\f151"; +} + +i.icon.toggle.right:before { + content: "\f152"; +} + +i.icon.long.arrow.down:before { + content: "\f175"; +} + +i.icon.long.arrow.up:before { + content: "\f176"; +} + +i.icon.long.arrow.left:before { + content: "\f177"; +} + +i.icon.long.arrow.right:before { + content: "\f178"; +} + +i.icon.arrow.circle.outline.right:before { + content: "\f18e"; +} + +i.icon.arrow.circle.outline.left:before { + content: "\f190"; +} + +i.icon.toggle.left:before { + content: "\f191"; +} + +/* Computer */ + +i.icon.power:before { + content: "\f011"; +} + +i.icon.trash:before { + content: "\f1f8"; +} + +i.icon.trash.outline:before { + content: "\f014"; +} + +i.icon.disk.outline:before { + content: "\f0a0"; +} + +i.icon.desktop:before { + content: "\f108"; +} + +i.icon.laptop:before { + content: "\f109"; +} + +i.icon.tablet:before { + content: "\f10a"; +} + +i.icon.mobile:before { + content: "\f10b"; +} + +i.icon.game:before { + content: "\f11b"; +} + +i.icon.keyboard:before { + content: "\f11c"; +} + +i.icon.plug:before { + content: "\f1e6"; +} + +/* File System */ + +i.icon.folder:before { + content: "\f07b"; +} + +i.icon.folder.open:before { + content: "\f07c"; +} + +i.icon.level.up:before { + content: "\f148"; +} + +i.icon.level.down:before { + content: "\f149"; +} + +i.icon.file:before { + content: "\f15b"; +} + +i.icon.file.outline:before { + content: "\f016"; +} + +i.icon.file.text:before { + content: "\f15c"; +} + +i.icon.file.text.outline:before { + content: "\f0f6"; +} + +i.icon.folder.outline:before { + content: "\f114"; +} + +i.icon.folder.open.outline:before { + content: "\f115"; +} + +i.icon.file.pdf.outline:before { + content: "\f1c1"; +} + +i.icon.file.word.outline:before { + content: "\f1c2"; +} + +i.icon.file.excel.outline:before { + content: "\f1c3"; +} + +i.icon.file.powerpoint.outline:before { + content: "\f1c4"; +} + +i.icon.file.image.outline:before { + content: "\f1c5"; +} + +i.icon.file.archive.outline:before { + content: "\f1c6"; +} + +i.icon.file.audio.outline:before { + content: "\f1c7"; +} + +i.icon.file.video.outline:before { + content: "\f1c8"; +} + +i.icon.file.code.outline:before { + content: "\f1c9"; +} + +/* Technologies */ + +i.icon.barcode:before { + content: "\f02a"; +} + +i.icon.qrcode:before { + content: "\f029"; +} + +i.icon.fork:before { + content: "\f126"; +} + +i.icon.html5:before { + content: "\f13b"; +} + +i.icon.css3:before { + content: "\f13c"; +} + +i.icon.rss:before { + content: "\f09e"; +} + +i.icon.rss.square:before { + content: "\f143"; +} + +i.icon.openid:before { + content: "\f19b"; +} + +i.icon.database:before { + content: "\f1c0"; +} + +i.icon.server:before { + content: "\f233"; +} + +/* Rating */ + +i.icon.heart:before { + content: "\f004"; +} + +i.icon.star:before { + content: "\f005"; +} + +i.icon.empty.star:before { + content: "\f006"; +} + +i.icon.thumbs.outline.up:before { + content: "\f087"; +} + +i.icon.thumbs.outline.down:before { + content: "\f088"; +} + +i.icon.star.half:before { + content: "\f089"; +} + +i.icon.empty.heart:before { + content: "\f08a"; +} + +i.icon.smile:before { + content: "\f118"; +} + +i.icon.frown:before { + content: "\f119"; +} + +i.icon.meh:before { + content: "\f11a"; +} + +i.icon.star.half.empty:before { + content: "\f123"; +} + +i.icon.thumbs.up:before { + content: "\f164"; +} + +i.icon.thumbs.down:before { + content: "\f165"; +} + +/* Audio */ + +i.icon.music:before { + content: "\f001"; +} + +i.icon.video.play.outline:before { + content: "\f01d"; +} + +i.icon.volume.off:before { + content: "\f026"; +} + +i.icon.volume.down:before { + content: "\f027"; +} + +i.icon.volume.up:before { + content: "\f028"; +} + +i.icon.record:before { + content: "\f03d"; +} + +i.icon.step.backward:before { + content: "\f048"; +} + +i.icon.fast.backward:before { + content: "\f049"; +} + +i.icon.backward:before { + content: "\f04a"; +} + +i.icon.play:before { + content: "\f04b"; +} + +i.icon.pause:before { + content: "\f04c"; +} + +i.icon.stop:before { + content: "\f04d"; +} + +i.icon.forward:before { + content: "\f04e"; +} + +i.icon.fast.forward:before { + content: "\f050"; +} + +i.icon.step.forward:before { + content: "\f051"; +} + +i.icon.eject:before { + content: "\f052"; +} + +i.icon.unmute:before { + content: "\f130"; +} + +i.icon.mute:before { + content: "\f131"; +} + +i.icon.video.play:before { + content: "\f144"; +} + +i.icon.closed.captioning:before { + content: "\f20a"; +} + +/* Map, Locations, & Transportation */ + +i.icon.marker:before { + content: "\f041"; +} + +i.icon.coffee:before { + content: "\f0f4"; +} + +i.icon.food:before { + content: "\f0f5"; +} + +i.icon.building.outline:before { + content: "\f0f7"; +} + +i.icon.hospital:before { + content: "\f0f8"; +} + +i.icon.emergency:before { + content: "\f0f9"; +} + +i.icon.first.aid:before { + content: "\f0fa"; +} + +i.icon.military:before { + content: "\f0fb"; +} + +i.icon.h:before { + content: "\f0fd"; +} + +i.icon.location.arrow:before { + content: "\f124"; +} + +i.icon.space.shuttle:before { + content: "\f197"; +} + +i.icon.university:before { + content: "\f19c"; +} + +i.icon.building:before { + content: "\f1ad"; +} + +i.icon.paw:before { + content: "\f1b0"; +} + +i.icon.spoon:before { + content: "\f1b1"; +} + +i.icon.car:before { + content: "\f1b9"; +} + +i.icon.taxi:before { + content: "\f1ba"; +} + +i.icon.tree:before { + content: "\f1bb"; +} + +i.icon.bicycle:before { + content: "\f206"; +} + +i.icon.bus:before { + content: "\f207"; +} + +i.icon.ship:before { + content: "\f21a"; +} + +i.icon.motorcycle:before { + content: "\f21c"; +} + +i.icon.street.view:before { + content: "\f21d"; +} + +i.icon.hotel:before { + content: "\f236"; +} + +i.icon.train:before { + content: "\f238"; +} + +i.icon.subway:before { + content: "\f239"; +} + +/* Tables */ + +i.icon.table:before { + content: "\f0ce"; +} + +i.icon.columns:before { + content: "\f0db"; +} + +i.icon.sort:before { + content: "\f0dc"; +} + +i.icon.sort.ascending:before { + content: "\f0de"; +} + +i.icon.sort.descending:before { + content: "\f0dd"; +} + +i.icon.sort.alphabet.ascending:before { + content: "\f15d"; +} + +i.icon.sort.alphabet.descending:before { + content: "\f15e"; +} + +i.icon.sort.content.ascending:before { + content: "\f160"; +} + +i.icon.sort.content.descending:before { + content: "\f161"; +} + +i.icon.sort.numeric.ascending:before { + content: "\f162"; +} + +i.icon.sort.numeric.descending:before { + content: "\f163"; +} + +/* Text Editor */ + +i.icon.font:before { + content: "\f031"; +} + +i.icon.bold:before { + content: "\f032"; +} + +i.icon.italic:before { + content: "\f033"; +} + +i.icon.text.height:before { + content: "\f034"; +} + +i.icon.text.width:before { + content: "\f035"; +} + +i.icon.align.left:before { + content: "\f036"; +} + +i.icon.align.center:before { + content: "\f037"; +} + +i.icon.align.right:before { + content: "\f038"; +} + +i.icon.align.justify:before { + content: "\f039"; +} + +i.icon.list:before { + content: "\f03a"; +} + +i.icon.outdent:before { + content: "\f03b"; +} + +i.icon.indent:before { + content: "\f03c"; +} + +i.icon.linkify:before { + content: "\f0c1"; +} + +i.icon.cut:before { + content: "\f0c4"; +} + +i.icon.copy:before { + content: "\f0c5"; +} + +i.icon.attach:before { + content: "\f0c6"; +} + +i.icon.save:before { + content: "\f0c7"; +} + +i.icon.content:before { + content: "\f0c9"; +} + +i.icon.unordered.list:before { + content: "\f0ca"; +} + +i.icon.ordered.list:before { + content: "\f0cb"; +} + +i.icon.strikethrough:before { + content: "\f0cc"; +} + +i.icon.underline:before { + content: "\f0cd"; +} + +i.icon.paste:before { + content: "\f0ea"; +} + +i.icon.unlink:before { + content: "\f127"; +} + +i.icon.superscript:before { + content: "\f12b"; +} + +i.icon.subscript:before { + content: "\f12c"; +} + +i.icon.header:before { + content: "\f1dc"; +} + +i.icon.paragraph:before { + content: "\f1dd"; +} + +/* Currency */ + +i.icon.euro:before { + content: "\f153"; +} + +i.icon.pound:before { + content: "\f154"; +} + +i.icon.dollar:before { + content: "\f155"; +} + +i.icon.rupee:before { + content: "\f156"; +} + +i.icon.yen:before { + content: "\f157"; +} + +i.icon.ruble:before { + content: "\f158"; +} + +i.icon.won:before { + content: "\f159"; +} + +i.icon.lira:before { + content: "\f195"; +} + +i.icon.shekel:before { + content: "\f20b"; +} + +/* Payment Options */ + +i.icon.paypal:before { + content: "\f1ed"; +} + +i.icon.paypal.card:before { + content: "\f1f4"; +} + +i.icon.google.wallet:before { + content: "\f1ee"; +} + +i.icon.visa:before { + content: "\f1f0"; +} + +i.icon.mastercard:before { + content: "\f1f1"; +} + +i.icon.discover:before { + content: "\f1f2"; +} + +i.icon.american.express:before { + content: "\f1f3"; +} + +i.icon.stripe:before { + content: "\f1f5"; +} + +/* Networks and Websites*/ + +i.icon.twitter.square:before { + content: "\f081"; +} + +i.icon.facebook.square:before { + content: "\f082"; +} + +i.icon.linkedin.square:before { + content: "\f08c"; +} + +i.icon.github.square:before { + content: "\f092"; +} + +i.icon.twitter:before { + content: "\f099"; +} + +i.icon.facebook:before { + content: "\f09a"; +} + +i.icon.github:before { + content: "\f09b"; +} + +i.icon.pinterest:before { + content: "\f0d2"; +} + +i.icon.pinterest.square:before { + content: "\f0d3"; +} + +i.icon.google.plus.square:before { + content: "\f0d4"; +} + +i.icon.google.plus:before { + content: "\f0d5"; +} + +i.icon.linkedin:before { + content: "\f0e1"; +} + +i.icon.github.alternate:before { + content: "\f113"; +} + +i.icon.maxcdn:before { + content: "\f136"; +} + +i.icon.bitcoin:before { + content: "\f15a"; +} + +i.icon.youtube.square:before { + content: "\f166"; +} + +i.icon.youtube:before { + content: "\f167"; +} + +i.icon.xing:before { + content: "\f168"; +} + +i.icon.xing.square:before { + content: "\f169"; +} + +i.icon.youtube.play:before { + content: "\f16a"; +} + +i.icon.dropbox:before { + content: "\f16b"; +} + +i.icon.stack.overflow:before { + content: "\f16c"; +} + +i.icon.instagram:before { + content: "\f16d"; +} + +i.icon.flickr:before { + content: "\f16e"; +} + +i.icon.adn:before { + content: "\f170"; +} + +i.icon.bitbucket:before { + content: "\f171"; +} + +i.icon.bitbucket.square:before { + content: "\f172"; +} + +i.icon.tumblr:before { + content: "\f173"; +} + +i.icon.tumblr.square:before { + content: "\f174"; +} + +i.icon.apple:before { + content: "\f179"; +} + +i.icon.windows:before { + content: "\f17a"; +} + +i.icon.android:before { + content: "\f17b"; +} + +i.icon.linux:before { + content: "\f17c"; +} + +i.icon.dribbble:before { + content: "\f17d"; +} + +i.icon.skype:before { + content: "\f17e"; +} + +i.icon.foursquare:before { + content: "\f180"; +} + +i.icon.trello:before { + content: "\f181"; +} + +i.icon.gittip:before { + content: "\f184"; +} + +i.icon.vk:before { + content: "\f189"; +} + +i.icon.weibo:before { + content: "\f18a"; +} + +i.icon.renren:before { + content: "\f18b"; +} + +i.icon.pagelines:before { + content: "\f18c"; +} + +i.icon.stack.exchange:before { + content: "\f18d"; +} + +i.icon.vimeo:before { + content: "\f194"; +} + +i.icon.slack:before { + content: "\f198"; +} + +i.icon.wordpress:before { + content: "\f19a"; +} + +i.icon.yahoo:before { + content: "\f19e"; +} + +i.icon.google:before { + content: "\f1a0"; +} + +i.icon.reddit:before { + content: "\f1a1"; +} + +i.icon.reddit.square:before { + content: "\f1a2"; +} + +i.icon.stumbleupon.circle:before { + content: "\f1a3"; +} + +i.icon.stumbleupon:before { + content: "\f1a4"; +} + +i.icon.delicious:before { + content: "\f1a5"; +} + +i.icon.digg:before { + content: "\f1a6"; +} + +i.icon.pied.piper:before { + content: "\f1a7"; +} + +i.icon.pied.piper.alternate:before { + content: "\f1a8"; +} + +i.icon.drupal:before { + content: "\f1a9"; +} + +i.icon.joomla:before { + content: "\f1aa"; +} + +i.icon.behance:before { + content: "\f1b4"; +} + +i.icon.behance.square:before { + content: "\f1b5"; +} + +i.icon.steam:before { + content: "\f1b6"; +} + +i.icon.steam.square:before { + content: "\f1b7"; +} + +i.icon.spotify:before { + content: "\f1bc"; +} + +i.icon.deviantart:before { + content: "\f1bd"; +} + +i.icon.soundcloud:before { + content: "\f1be"; +} + +i.icon.vine:before { + content: "\f1ca"; +} + +i.icon.codepen:before { + content: "\f1cb"; +} + +i.icon.jsfiddle:before { + content: "\f1cc"; +} + +i.icon.rebel:before { + content: "\f1d0"; +} + +i.icon.empire:before { + content: "\f1d1"; +} + +i.icon.git.square:before { + content: "\f1d2"; +} + +i.icon.git:before { + content: "\f1d3"; +} + +i.icon.hacker.news:before { + content: "\f1d4"; +} + +i.icon.tencent.weibo:before { + content: "\f1d5"; +} + +i.icon.qq:before { + content: "\f1d6"; +} + +i.icon.wechat:before { + content: "\f1d7"; +} + +i.icon.slideshare:before { + content: "\f1e7"; +} + +i.icon.twitch:before { + content: "\f1e8"; +} + +i.icon.yelp:before { + content: "\f1e9"; +} + +i.icon.lastfm:before { + content: "\f202"; +} + +i.icon.lastfm.square:before { + content: "\f203"; +} + +i.icon.ioxhost:before { + content: "\f208"; +} + +i.icon.angellist:before { + content: "\f209"; +} + +i.icon.meanpath:before { + content: "\f20c"; +} + +i.icon.buysellads:before { + content: "\f20d"; +} + +i.icon.connectdevelop:before { + content: "\f20e"; +} + +i.icon.dashcube:before { + content: "\f210"; +} + +i.icon.forumbee:before { + content: "\f211"; +} + +i.icon.leanpub:before { + content: "\f212"; +} + +i.icon.sellsy:before { + content: "\f213"; +} + +i.icon.shirtsinbulk:before { + content: "\f214"; +} + +i.icon.simplybuilt:before { + content: "\f215"; +} + +i.icon.skyatlas:before { + content: "\f216"; +} + +i.icon.whatsapp:before { + content: "\f232"; +} + +i.icon.viacoin:before { + content: "\f237"; +} + +i.icon.medium:before { + content: "\f23a"; +} + +/******************************* + Aliases +*******************************/ + +i.icon.like:before { + content: "\f004"; +} + +i.icon.favorite:before { + content: "\f005"; +} + +i.icon.video:before { + content: "\f008"; +} + +i.icon.check:before { + content: "\f00c"; +} + +i.icon.close:before { + content: "\f00d"; +} + +i.icon.cancel:before { + content: "\f00d"; +} + +i.icon.delete:before { + content: "\f00d"; +} + +i.icon.x:before { + content: "\f00d"; +} + +i.icon.user.times:before { + content: "\f235"; +} + +i.icon.user.close:before { + content: "\f235"; +} + +i.icon.user.cancel:before { + content: "\f235"; +} + +i.icon.user.delete:before { + content: "\f235"; +} + +i.icon.user.x:before { + content: "\f235"; +} + +i.icon.zoom.in:before { + content: "\f00e"; +} + +i.icon.magnify:before { + content: "\f00e"; +} + +i.icon.shutdown:before { + content: "\f011"; +} + +i.icon.clock:before { + content: "\f017"; +} + +i.icon.time:before { + content: "\f017"; +} + +i.icon.play.circle.outline:before { + content: "\f01d"; +} + +i.icon.headphone:before { + content: "\f025"; +} + +i.icon.camera:before { + content: "\f030"; +} + +i.icon.video.camera:before { + content: "\f03d"; +} + +i.icon.picture:before { + content: "\f03e"; +} + +i.icon.pencil:before { + content: "\f040"; +} + +i.icon.compose:before { + content: "\f040"; +} + +i.icon.point:before { + content: "\f041"; +} + +i.icon.tint:before { + content: "\f043"; +} + +i.icon.signup:before { + content: "\f044"; +} + +i.icon.plus.circle:before { + content: "\f055"; +} + +i.icon.dont:before { + content: "\f05e"; +} + +i.icon.minimize:before { + content: "\f066"; +} + +i.icon.add:before { + content: "\f067"; +} + +i.icon.eye:before { + content: "\f06e"; +} + +i.icon.attention:before { + content: "\f06a"; +} + +i.icon.cart:before { + content: "\f07a"; +} + +i.icon.shuffle:before { + content: "\f074"; +} + +i.icon.talk:before { + content: "\f075"; +} + +i.icon.chat:before { + content: "\f075"; +} + +i.icon.shopping.cart:before { + content: "\f07a"; +} + +i.icon.bar.graph:before { + content: "\f080"; +} + +i.icon.area.graph:before { + content: "\f1fe"; +} + +i.icon.pie.graph:before { + content: "\f200"; +} + +i.icon.line.graph:before { + content: "\f201"; +} + +i.icon.key:before { + content: "\f084"; +} + +i.icon.cogs:before { + content: "\f085"; +} + +i.icon.discussions:before { + content: "\f086"; +} + +i.icon.like.outline:before { + content: "\f087"; +} + +i.icon.dislike.outline:before { + content: "\f088"; +} + +i.icon.heart.outline:before { + content: "\f08a"; +} + +i.icon.log.out:before { + content: "\f08b"; +} + +i.icon.thumb.tack:before { + content: "\f08d"; +} + +i.icon.winner:before { + content: "\f091"; +} + +i.icon.bookmark.outline:before { + content: "\f097"; +} + +i.icon.phone:before { + content: "\f095"; +} + +i.icon.phone.square:before { + content: "\f098"; +} + +i.icon.credit.card:before { + content: "\f09d"; +} + +i.icon.hdd.outline:before { + content: "\f0a0"; +} + +i.icon.bullhorn:before { + content: "\f0a1"; +} + +i.icon.bell:before { + content: "\f0f3"; +} + +i.icon.bell.outline:before { + content: "\f0a2"; +} + +i.icon.bell.slash:before { + content: "\f1f6"; +} + +i.icon.bell.slash.outline:before { + content: "\f1f7"; +} + +i.icon.hand.outline.right:before { + content: "\f0a4"; +} + +i.icon.hand.outline.left:before { + content: "\f0a5"; +} + +i.icon.hand.outline.up:before { + content: "\f0a6"; +} + +i.icon.hand.outline.down:before { + content: "\f0a7"; +} + +i.icon.globe:before { + content: "\f0ac"; +} + +i.icon.wrench:before { + content: "\f0ad"; +} + +i.icon.briefcase:before { + content: "\f0b1"; +} + +i.icon.group:before { + content: "\f0c0"; +} + +i.icon.flask:before { + content: "\f0c3"; +} + +i.icon.sidebar:before { + content: "\f0c9"; +} + +i.icon.bars:before { + content: "\f0c9"; +} + +i.icon.list.ul:before { + content: "\f0ca"; +} + +i.icon.list.ol:before { + content: "\f0cb"; +} + +i.icon.numbered.list:before { + content: "\f0cb"; +} + +i.icon.magic:before { + content: "\f0d0"; +} + +i.icon.truck:before { + content: "\f0d1"; +} + +i.icon.currency:before { + content: "\f0d6"; +} + +i.icon.triangle.down:before { + content: "\f0d7"; +} + +i.icon.dropdown:before { + content: "\f0d7"; +} + +i.icon.triangle.up:before { + content: "\f0d8"; +} + +i.icon.triangle.left:before { + content: "\f0d9"; +} + +i.icon.triangle.right:before { + content: "\f0da"; +} + +i.icon.envelope:before { + content: "\f0e0"; +} + +i.icon.conversation:before { + content: "\f0e6"; +} + +i.icon.umbrella:before { + content: "\f0e9"; +} + +i.icon.clipboard:before { + content: "\f0ea"; +} + +i.icon.lightbulb:before { + content: "\f0eb"; +} + +i.icon.ambulance:before { + content: "\f0f9"; +} + +i.icon.medkit:before { + content: "\f0fa"; +} + +i.icon.fighter.jet:before { + content: "\f0fb"; +} + +i.icon.beer:before { + content: "\f0fc"; +} + +i.icon.plus.square:before { + content: "\f0fe"; +} + +i.icon.computer:before { + content: "\f108"; +} + +i.icon.circle.outline:before { + content: "\f10c"; +} + +i.icon.intersex:before { + content: "\f10c"; +} + +i.icon.asexual:before { + content: "\f10c"; +} + +i.icon.spinner:before { + content: "\f110"; +} + +i.icon.gamepad:before { + content: "\f11b"; +} + +i.icon.star.half.full:before { + content: "\f123"; +} + +i.icon.question:before { + content: "\f128"; +} + +i.icon.eraser:before { + content: "\f12d"; +} + +i.icon.microphone:before { + content: "\f130"; +} + +i.icon.microphone.slash:before { + content: "\f131"; +} + +i.icon.shield:before { + content: "\f132"; +} + +i.icon.target:before { + content: "\f140"; +} + +i.icon.play.circle:before { + content: "\f144"; +} + +i.icon.pencil.square:before { + content: "\f14b"; +} + +i.icon.compass:before { + content: "\f14e"; +} + +i.icon.amex:before { + content: "\f1f3"; +} + +i.icon.eur:before { + content: "\f153"; +} + +i.icon.gbp:before { + content: "\f154"; +} + +i.icon.usd:before { + content: "\f155"; +} + +i.icon.inr:before { + content: "\f156"; +} + +i.icon.cny:before, +i.icon.rmb:before, +i.icon.jpy:before { + content: "\f157"; +} + +i.icon.rouble:before, +i.icon.rub:before { + content: "\f158"; +} + +i.icon.krw:before { + content: "\f159"; +} + +i.icon.btc:before { + content: "\f15a"; +} + +i.icon.sheqel:before, +i.icon.ils:before { + content: "\f20b"; +} + +i.icon.try:before { + content: "\f195"; +} + +i.icon.zip:before { + content: "\f187"; +} + +i.icon.dot.circle.outline:before { + content: "\f192"; +} + +i.icon.sliders:before { + content: "\f1de"; +} + +i.icon.wi-fi:before { + content: "\f1eb"; +} + +i.icon.graduation:before { + content: "\f19d"; +} + +i.icon.weixin:before { + content: "\f1d7"; +} + +i.icon.binoculars:before { + content: "\f1e5"; +} + +i.icon.gratipay:before { + content: "\f184"; +} + +i.icon.genderless:before { + content: "\f1db"; +} + +i.icon.teletype:before { + content: "\f1e4"; +} + +i.icon.power.cord:before { + content: "\f1e6"; +} + +i.icon.tty:before { + content: "\f1e4"; +} + +i.icon.cc:before { + content: "\f20a"; +} + +i.icon.plus.cart:before { + content: "\f217"; +} + +i.icon.arrow.down.cart:before { + content: "\f218"; +} + +i.icon.detective:before { + content: "\f21b"; +} + +i.icon.venus:before { + content: "\f221"; +} + +i.icon.mars:before { + content: "\f222"; +} + +i.icon.mercury:before { + content: "\f223"; +} + +i.icon.venus.double:before { + content: "\f226"; +} + +i.icon.female.homosexual:before { + content: "\f226"; +} + +i.icon.mars.double:before { + content: "\f227"; +} + +i.icon.male.homosexual:before { + content: "\f227"; +} + +i.icon.venus.mars:before { + content: "\f228"; +} + +i.icon.mars.stroke:before { + content: "\f229"; +} + +i.icon.mars.alternate:before { + content: "\f229"; +} + +i.icon.mars.vertical:before { + content: "\f22a"; +} + +i.icon.mars.horizontal:before { + content: "\f22b"; +} + +i.icon.mars.stroke.vertical:before { + content: "\f22a"; +} + +i.icon.mars.stroke.horizontal:before { + content: "\f22b"; +} + +i.icon.facebook.official { + content: "\f230"; +} + +i.icon.pinterest.official { + content: "\f231"; +} + +i.icon.bed:before { + content: "\f236"; +} + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.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.71428571rem; +} + +.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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-inline-flex; + 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; + -webkit-flex: 1 0 auto; + -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.2142em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + padding: 0.67861429em 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: box-shadow 0.1s ease, border-color 0.1s ease; + transition: box-shadow 0.1s ease, border-color 0.1s ease; + box-shadow: none; +} + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.input input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} + +.ui.input input::-moz-placeholder { + color: rgba(0, 0, 0, 0.4); +} + +.ui.input input::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.4); +} + +/******************************* + States +*******************************/ + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input input[disabled] { + opacity: 0.45; +} + +.ui.disabled.input input { + 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); + 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; + 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); + box-shadow: none; +} + +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} + +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: rgba(0, 0, 0, 0.87); +} + +.ui.input.focus input::-ms-input-placeholder, +.ui.input input:focus::-ms-input-placeholder { + color: rgba(0, 0, 0, 0.87); +} + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + 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; +} + +/* 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; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !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; + -webkit-flex: 0 0 auto; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -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, +.ui.action.input:not([class*="left action"]) > .button, +.ui.action.input:not([class*="left action"]) > .buttons > .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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: 0.71428571em; +} + +.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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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) { + 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; + 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); + -ms-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; + 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%); + -ms-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.71428571em - 1.2em ); +} + +.ui.table td > .ui[class*="right ribbon"].label { + left: calc(100% + 0.71428571em + 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 { + 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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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-color: #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); + box-shadow: none; +} + +/* Link */ + +a.ui.basic.label:hover { + text-decoration: none; + background: none #ffffff; + color: #1e70bf; + box-shadow: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; +} + +/* Pointing */ + +.ui.basic.pointing.label:before { + border-color: inherit; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + 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); + -ms-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); + -ms-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); + -ms-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); + -ms-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); + -ms-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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: 0.07142857em; + 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; + 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; +} + +.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 a.item:hover, +.ui.link.list .item a:not(.ui):hover { + color: rgba(0, 0, 0, 0.8); +} + +.ui.link.list a.item:active, +.ui.link.list .item a:not(.ui):active { + color: rgba(0, 0, 0, 0.9); +} + +.ui.link.list .active.item, +.ui.link.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 a.item:hover, +.ui.inverted.link.list .item a:not(.ui):hover { + color: #ffffff; +} + +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:not(.ui):active { + color: #ffffff; +} + +.ui.inverted.link.list a.active.item, +.ui.inverted.link.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; + margin-left: -1.25rem; + content: '•'; + opacity: 1; + color: inherit; + vertical-align: top; +} + +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 { + 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.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 { + padding-top: 0.42857143em; + padding-bottom: 0.42857143em; +} + +.ui.relaxed.list:not(.horizontal) .list > .item { + padding-top: 0.21428571em; + padding-bottom: 0.21428571em; +} + +.ui.horizontal.relaxed.list > .item { + padding-left: 1rem; + padding-right: 1rem; +} + +/* Very Relaxed */ + +.ui[class*="very relaxed"].list:not(.horizontal) > .item { + padding-top: 0.85714286em; + padding-bottom: 0.85714286em; +} + +.ui[class*="very relaxed"].list:not(.horizontal) .list > .item { + padding-top: 0.28571429em; + padding-bottom: 0.28571429em; +} + +.ui.horizontal[class*="very relaxed"].list .list > .item, +.ui.horizontal[class*="very relaxed"].list > .item { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: 0.71428571em; +} + +.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.71428571rem; +} + +.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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%); + -ms-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; + 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.loader:before, +.ui.loader:after { + width: 2.2585em; + height: 2.2585em; + margin: 0em 0em 0em -1.12925em; +} + +.ui.mini.loader:before, +.ui.mini.loader:after { + width: 1.2857em; + height: 1.2857em; + margin: 0em 0em 0em -0.64285em; +} + +.ui.small.loader:before, +.ui.small.loader:after { + width: 1.7142em; + height: 1.7142em; + margin: 0em 0em 0em -0.8571em; +} + +.ui.large.loader:before, +.ui.large.loader:after { + width: 4.5714em; + height: 4.5714em; + margin: 0em 0em 0em -2.2857em; +} + +/*------------------- + 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 { + -webkit-animation-direction: reverse; + 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: 1.2857em; + height: 1.2857em; + font-size: 0.71428571em; +} + +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: 1.7142em; + height: 1.7142em; + font-size: 0.92857143em; +} + +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: 2.2585em; + height: 2.2585em; + font-size: 1em; +} + +.ui.inverted.dimmer .ui.loader.large, +.ui.loader.large { + width: 4.5714em; + height: 4.5714em; + font-size: 1.14285714em; +} + +/* Text Loader */ + +.ui.mini.text.loader { + min-width: 1.2857em; + padding-top: 1.99998571em; +} + +.ui.small.text.loader { + min-width: 1.7142em; + padding-top: 2.42848571em; +} + +.ui.text.loader { + min-width: 2.2585em; + padding-top: 2.97278571em; +} + +.ui.large.text.loader { + min-width: 4.5714em; + padding-top: 5.28568571em; +} + +/*------------------- + 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; + -ms-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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: 301px; +} + +.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: 300.5px; +} + +.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.rail { + font-size: 1rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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%; + float: left; + margin: 0em; + -webkit-transition: -webkit-transform 0.5s ease 0.1s; + transition: 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; + -ms-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; + -ms-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; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .visible.content { + -webkit-transform: translateX(0%) !important; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .hidden.content { + -webkit-transform: translateX(-100%) !important; + -ms-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; + -ms-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; + -ms-transform: translateX(0%) !important; + transform: translateX(0%) !important; +} + +.ui.slide.up.reveal > .hidden.content { + -webkit-transform: translateY(100%) !important; + -ms-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; + -ms-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; + -ms-transform: translateY(0%) !important; + transform: translateY(0%) !important; +} + +.ui.slide.down.reveal > .hidden.content { + -webkit-transform: translateY(-100%) !important; + -ms-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; + -ms-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; + -ms-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; + margin: 0em; + -webkit-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; +} + +.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; + -ms-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; + -ms-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; + -ms-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; + -ms-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); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} + +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + -webkit-transform-origin: bottom right; + -ms-transform-origin: bottom right; + transform-origin: bottom right; +} + +.ui.rotate.active.reveal > .visible.conten, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + -webkit-transform: rotate(110deg); + -ms-transform: rotate(110deg); + transform: rotate(110deg); +} + +.ui.rotate.left.reveal > .visible.content { + -webkit-transform-origin: bottom left; + -ms-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); + -ms-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; + -ms-transform: none !important; + transform: none !important; +} + +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + +/******************************* + 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: #ffffff; + 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; + 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); + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); +} + +.ui[class*="very basic"].table.segment { + padding: 1em 1em; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: 3em 0em; + 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); + box-shadow: ''; +} + +.ui.piled.segments:before, +.ui.piled.segment:before { + -webkit-transform: rotate(-1.2deg); + -ms-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); + -ms-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; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ + +.ui.compact.segments { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -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 { + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); +} + +/******************************* + Groups +*******************************/ + +/* Group */ + +.ui.segments { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + margin: 1rem 0em; + border: 1px solid 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; + 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; + box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none; + border-radius: 0em 0em 0.28571429rem 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: #ffffff; + 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; + box-shadow: none; + border-top: 1px solid rgba(34, 36, 38, 0.15); +} + +/* Horizontal Segment */ + +.ui.horizontal.segments > .segment { + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + 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; + 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; + point-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; + 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; + 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; +} + +.ui.inverted.red.segment { + background-color: #db2828 !important; + color: #ffffff !important; +} + +/* Orange */ + +.ui.orange.segment:not(.inverted) { + border-top: 2px solid #f2711c; +} + +.ui.inverted.orange.segment { + background-color: #f2711c !important; + color: #ffffff !important; +} + +/* Yellow */ + +.ui.yellow.segment:not(.inverted) { + border-top: 2px solid #fbbd08; +} + +.ui.inverted.yellow.segment { + background-color: #fbbd08 !important; + color: #ffffff !important; +} + +/* Olive */ + +.ui.olive.segment:not(.inverted) { + border-top: 2px solid #b5cc18; +} + +.ui.inverted.olive.segment { + background-color: #b5cc18 !important; + color: #ffffff !important; +} + +/* Green */ + +.ui.green.segment:not(.inverted) { + border-top: 2px solid #21ba45; +} + +.ui.inverted.green.segment { + background-color: #21ba45 !important; + color: #ffffff !important; +} + +/* Teal */ + +.ui.teal.segment:not(.inverted) { + border-top: 2px solid #00b5ad; +} + +.ui.inverted.teal.segment { + background-color: #00b5ad !important; + color: #ffffff !important; +} + +/* Blue */ + +.ui.blue.segment:not(.inverted) { + border-top: 2px solid #2185d0; +} + +.ui.inverted.blue.segment { + background-color: #2185d0 !important; + color: #ffffff !important; +} + +/* Violet */ + +.ui.violet.segment:not(.inverted) { + border-top: 2px solid #6435c9; +} + +.ui.inverted.violet.segment { + background-color: #6435c9 !important; + color: #ffffff !important; +} + +/* Purple */ + +.ui.purple.segment:not(.inverted) { + border-top: 2px solid #a333c8; +} + +.ui.inverted.purple.segment { + background-color: #a333c8 !important; + color: #ffffff !important; +} + +/* Pink */ + +.ui.pink.segment:not(.inverted) { + border-top: 2px solid #e03997; +} + +.ui.inverted.pink.segment { + background-color: #e03997 !important; + color: #ffffff !important; +} + +/* Brown */ + +.ui.brown.segment:not(.inverted) { + border-top: 2px solid #a5673f; +} + +.ui.inverted.brown.segment { + background-color: #a5673f !important; + color: #ffffff !important; +} + +/* Grey */ + +.ui.grey.segment:not(.inverted) { + border-top: 2px solid #767676; +} + +.ui.inverted.grey.segment { + background-color: #767676 !important; + color: #ffffff !important; +} + +/* Black */ + +.ui.black.segment:not(.inverted) { + border-top: 2px solid #1b1c1d; +} + +.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; + 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-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-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% + 2px ); + max-width: calc(100% + 2px ); + box-shadow: none; + border: 1px solid #d4d4d5; +} + +.ui.attached + .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; + 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; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin: 1em 0em; + background: ''; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + vertical-align: middle; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0em 0em; + padding: 1.14285714em 2em; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + 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, box-shadow 0.1s ease; + transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, 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, 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-transform: translateY(-50%) translateX(50%) rotate(-45deg); + -ms-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; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} + +.ui.steps .step > .icon ~ .content { + -webkit-box-flex: 1 0 auto; + -webkit-flex-grow: 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, "."); + -webkit-align-self: middle; + -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; + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: visible; +} + +.ui.vertical.steps .step { + -webkit-box-pack: start; + -webkit-justify-content: flex-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 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + .ui.steps .step { + width: 100% !important; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0em; + padding: 1.14285714em 2em; + } + + .ui.steps .step:first-child { + padding: 1.14285714em 2em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + } + + .ui.steps .step:last-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + } + + /* Arrow */ + + .ui.steps .step:after { + display: none !important; + } + + /* Content */ + + .ui.steps .step .content { + text-align: center; + } + + /* Icon */ + + .ui.steps .step > .icon, + .ui.ordered.steps .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: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + overflow: visible; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } + + /* Steps */ + + .ui[class*="tablet stackable"].steps .step { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + +/* Top */ + +.ui.attached.steps { + width: calc(100% + 2px ) !important; + margin: 0em -1px -1px; + max-width: calc(100% + 2px ); + 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: -1px -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 { + -webkit-flex-wrap: nowrap; + -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.500%; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.small.step, +.ui.small.steps .step { + font-size: 0.92857143rem; +} + +.ui.step, +.ui.steps .step { + font-size: 1rem; +} + +.ui.large.step, +.ui.large.steps .step { + font-size: 1.14285714rem; +} + +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Step'; + src: url("data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjILAIQyCKI0cjRyNhI0ZgsARDsIBiYCCwACsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsIBiYSMgILAEJiNGYTgbI7AIQ0awAiWwCENHI0cjYWAgsARDsIBiYCMgsAArI7AEQ2CwACuwBSVhsAUlsIBisAQmYSCwBCVgZCOwAyVgZFBYIRsjIVkjICCwBCYjRmE4WS2wMiywABYgICCwBSYgLkcjRyNhIzw4LbAzLLAAFiCwCCNCICAgRiNHsAArI2E4LbA0LLAAFrADJbACJUcjRyNhsABUWC4gPCMhG7ACJbACJUcjRyNhILAFJbAEJUcjRyNhsAYlsAUlSbACJWGwAUVjIyBYYhshWWOwAUViYCMuIyAgPIo4IyFZLbA1LLAAFiCwCEMgLkcjRyNhIGCwIGBmsIBiIyAgPIo4LbA2LCMgLkawAiVGUlggPFkusSYBFCstsDcsIyAuRrACJUZQWCA8WS6xJgEUKy2wOCwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xJgEUKy2wOSywMCsjIC5GsAIlRlJYIDxZLrEmARQrLbA6LLAxK4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrEmARQrsARDLrAmKy2wOyywABawBCWwBCYgLkcjRyNhsAZFKyMgPCAuIzixJgEUKy2wPCyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwgGJgILAAKyCKimEgsAJDYGQjsANDYWRQWLACQ2EbsANDYFmwAyWwgGJhsAIlRmE4IyA8IzgbISAgRiNHsAArI2E4IVmxJgEUKy2wPSywMCsusSYBFCstsD4ssDErISMgIDywBCNCIzixJgEUK7AEQy6wJistsD8ssAAVIEewACNCsgABARUUEy6wLCotsEAssAAVIEewACNCsgABARUUEy6wLCotsEEssQABFBOwLSotsEIssC8qLbBDLLAAFkUjIC4gRoojYTixJgEUKy2wRCywCCNCsEMrLbBFLLIAADwrLbBGLLIAATwrLbBHLLIBADwrLbBILLIBATwrLbBJLLIAAD0rLbBKLLIAAT0rLbBLLLIBAD0rLbBMLLIBAT0rLbBNLLIAADkrLbBOLLIAATkrLbBPLLIBADkrLbBQLLIBATkrLbBRLLIAADsrLbBSLLIAATsrLbBTLLIBADsrLbBULLIBATsrLbBVLLIAAD4rLbBWLLIAAT4rLbBXLLIBAD4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=") 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.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + font-family: 'Step'; + content: '\e800'; + /* '' */ +} + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Breadcrumb + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Breadcrumb +*******************************/ + +.ui.breadcrumb { + line-height: 1; + display: inline-block; + margin: 0em 0em; + vertical-align: middle; +} + +.ui.breadcrumb:first-child { + margin-top: 0em; +} + +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* Divider */ + +.ui.breadcrumb .divider { + display: inline-block; + opacity: 0.7; + margin: 0em 0.21428571rem 0em; + font-size: 0.92857143em; + color: rgba(0, 0, 0, 0.4); + vertical-align: baseline; +} + +/* Link */ + +.ui.breadcrumb a { + color: #4183c4; +} + +.ui.breadcrumb a:hover { + color: #1e70bf; +} + +/* Icon Divider */ + +.ui.breadcrumb .icon.divider { + font-size: 0.85714286em; + vertical-align: baseline; +} + +/* Section */ + +.ui.breadcrumb a.section { + cursor: pointer; +} + +.ui.breadcrumb .section { + display: inline-block; + margin: 0em; + padding: 0em; +} + +/* Loose Coupling */ + +.ui.breadcrumb.segment { + display: inline-block; + padding: 0.71428571em 1em; +} + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: bold; +} + +/******************************* + Variations +*******************************/ + +.ui.mini.breadcrumb { + font-size: 0.71428571rem; +} + +.ui.tiny.breadcrumb { + font-size: 0.85714286rem; +} + +.ui.small.breadcrumb { + font-size: 0.92857143rem; +} + +.ui.breadcrumb { + font-size: 1rem; +} + +.ui.large.breadcrumb { + font-size: 1.14285714rem; +} + +.ui.big.breadcrumb { + font-size: 1.28571429rem; +} + +.ui.huge.breadcrumb { + font-size: 1.42857143rem; +} + +.ui.massive.breadcrumb { + font-size: 1.71428571rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Elements +*******************************/ + +/*-------------------- + Form +---------------------*/ + +.ui.form { + position: relative; + max-width: 100%; +} + +/*-------------------- + Content +---------------------*/ + +.ui.form > p { + margin: 1em 0em; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: 0em 0em 1em; +} + +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0em; +} + +.ui.form .fields .field { + clear: both; + margin: 0em 0em 1em; +} + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: 0em 0em 0.28571429rem 0em; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: bold; + text-transform: none; +} + +/*-------------------- + Standard Inputs +---------------------*/ + +.ui.form textarea, +.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="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + width: 100%; + vertical-align: top; +} + +/* Set max height on unusual input */ + +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: 1.2142em; +} + +.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="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="url"] { + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + margin: 0em; + outline: none; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + line-height: 1.2142em; + padding: 0.67861429em 1em; + font-size: 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/* Text Area */ + +.ui.form textarea { + margin: 0em; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + padding: 0.78571429em 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + outline: none; + color: rgba(0, 0, 0, 0.87); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.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 textarea, +.ui.form input[type="checkbox"] { + vertical-align: top; +} + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + +.ui.form input.attached { + width: auto; +} + +/*-------------------- + Basic Select +---------------------*/ + +.ui.form select { + display: block; + height: auto; + width: 100%; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + box-shadow: 0em 0em 0em 0em transparent inset; + padding: 0.62em 1em; + color: rgba(0, 0, 0, 0.87); + -webkit-transition: color 0.1s ease, border-color 0.1s ease; + transition: color 0.1s ease, border-color 0.1s ease; +} + +/*-------------------- + Dropdown +---------------------*/ + +/* Block */ + +.ui.form .field > .selection.dropdown { + width: 100%; +} + +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ + +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} + +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + +/* Block */ + +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ + +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ + +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ + +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.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; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + width: 0px; +} + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .success.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} + +/* Assumptions */ + +.ui.form .message:first-child { + margin-top: 0px; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: #ffffff !important; + border: 1px solid #e0b4b4 !important; + color: #9f3a38 !important; +} + +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: -0.25em 0em -0.5em 0.5em; +} + +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0px 0px 1px 1px; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + +/******************************* + States +*******************************/ + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px #fffff0 inset !important; + border-color: #e5dfa1 !important; +} + +/* Focus */ + +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0px 0px 0px 100px #fffff0 inset !important; + border-color: #d5c315 !important; +} + +/* Error */ + +.ui.form .error.error input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px #fffaf0 inset !important; + border-color: #e0b4b4 !important; +} + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.form ::-webkit-input-placeholder { + color: rgba(140, 140, 140, 0.87); +} + +.ui.form ::-ms-input-placeholder { + color: rgba(140, 140, 140, 0.87); +} + +.ui.form ::-moz-placeholder { + color: rgba(140, 140, 140, 0.87); +} + +.ui.form :focus::-webkit-input-placeholder { + color: rgba(89, 89, 89, 0.87); +} + +.ui.form :focus::-ms-input-placeholder { + color: rgba(89, 89, 89, 0.87); +} + +.ui.form :focus::-moz-placeholder { + color: rgba(89, 89, 89, 0.87); +} + +/* Error Placeholder */ + +.ui.form .error ::-webkit-input-placeholder { + color: #e7bdbc; +} + +.ui.form .error ::-ms-input-placeholder { + color: #e7bdbc; +} + +.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; +} + +.ui.form .error :focus::-moz-placeholder { + color: #da9796; +} + +/*-------------------- + Focus +---------------------*/ + +.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="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="url"]:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85b7d9; + border-radius: 0.28571429rem; + background: #ffffff; + box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; +} + +.ui.form textarea:focus { + color: rgba(0, 0, 0, 0.95); + border-color: #85b7d9; + border-radius: 0.28571429rem; + background: #ffffff; + box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; + -webkit-appearance: none; +} + +/*-------------------- + Success +---------------------*/ + +/* On Form */ + +.ui.form.success .success.message:not(:empty) { + display: block; +} + +.ui.form.success .icon.success.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------------- + Warning +---------------------*/ + +/* On Form */ + +.ui.form.warning .warning.message:not(:empty) { + display: block; +} + +.ui.form.warning .icon.warning.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------------- + Error +---------------------*/ + +/* On Form */ + +.ui.form.error .error.message:not(:empty) { + display: block; +} + +.ui.form.error .icon.error.message:not(:empty) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/* On Field(s) */ + +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: #9f3a38; +} + +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: #9f3a38; + color: #ffffff; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.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="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="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.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="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="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="url"] { + background: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + border-radius: ''; + box-shadow: none; +} + +.ui.form .field.error textarea:focus, +.ui.form .field.error select:focus, +.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="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="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: #fff6f6; + border-color: #e0b4b4; + color: #9f3a38; + -webkit-appearance: none; + box-shadow: none; +} + +/* Preserve Native Select Stylings */ + +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Dropdown Error +--------------------*/ + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item { + background: #fff6f6; + color: #9f3a38; +} + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + border-color: #e0b4b4 !important; +} + +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: #e0b4b4 !important; +} + +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + border-color: #e0b4b4; +} + +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: #eacbcb; + color: #9f3a38; +} + +/* Hover */ + +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: #fbe7e7; +} + +/* Selected */ + +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + background-color: #fbe7e7; +} + +/* Active */ + +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: #fdcfcf !important; +} + +/*-------------------- + Checkbox Error +---------------------*/ + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { + color: #9f3a38; +} + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label: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 .field.error .checkbox:not(.toggle):not(.slider) .box:before { + background: #fff6f6; + border-color: #e0b4b4; +} + +.ui.form .fields.error .field .checkbox label:after, +.ui.form .field.error .checkbox label:after, +.ui.form .fields.error .field .checkbox .box:after, +.ui.form .field.error .checkbox .box:after { + color: #9f3a38; +} + +/*-------------------- + Disabled +---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: 0.45; +} + +.ui.form .field.disabled label { + opacity: 0.45; +} + +.ui.form .field.disabled :disabled { + opacity: 1; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + point-events: none; +} + +.ui.loading.form:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: rgba(255, 255, 255, 0.8); + width: 100%; + height: 100%; + z-index: 100; +} + +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + margin: -1.5em 0em 0em -1.5em; + width: 3em; + height: 3em; + -webkit-animation: form-spin 0.6s linear; + animation: form-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; + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: 101; +} + +@-webkit-keyframes form-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes form-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/******************************* + Element Types +*******************************/ + +/*-------------------- + Required Field +---------------------*/ + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + margin: -0.2em 0em 0em 0.2em; + content: '*'; + color: #db2828; +} + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after { + display: inline-block; + vertical-align: top; +} + +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + position: absolute; + top: 0%; + left: 100%; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Inverted Colors +---------------------*/ + +.ui.inverted.form label, +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box { + color: rgba(255, 255, 255, 0.9); +} + +/* Inverted Field */ + +.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="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="url"] { + background: #ffffff; + border-color: rgba(255, 255, 255, 0.1); + color: rgba(0, 0, 0, 0.87); + box-shadow: none; +} + +/*-------------------- + Field Groups +---------------------*/ + +/* Grouped Vertically */ + +.ui.form .grouped.fields { + display: block; + margin: 0em 0em 1em; +} + +.ui.form .grouped.fields:last-child { + margin-bottom: 0em; +} + +.ui.form .grouped.fields > label { + margin: 0em 0em 0.28571429rem 0em; + color: rgba(0, 0, 0, 0.87); + font-size: 0.92857143em; + font-weight: bold; + text-transform: none; +} + +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: 0.5em 0em; + padding: 0em; +} + +/*-------------------- + Fields +---------------------*/ + +/* Split fields */ + +.ui.form .fields { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.ui.form .fields > .field { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + padding-left: 0.5em; + padding-right: 0.5em; +} + +.ui.form .fields > .field:first-child { + border-left: none; + box-shadow: none; +} + +/* Other Combinations */ + +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: 50%; +} + +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: 33.33333333%; +} + +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: 25%; +} + +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: 20%; +} + +.ui.form .six.fields > .fields, +.ui.form .six.fields > .field { + width: 16.66666667%; +} + +.ui.form .seven.fields > .fields, +.ui.form .seven.fields > .field { + width: 14.28571429%; +} + +.ui.form .eight.fields > .fields, +.ui.form .eight.fields > .field { + width: 12.5%; +} + +.ui.form .nine.fields > .fields, +.ui.form .nine.fields > .field { + width: 11.11111111%; +} + +.ui.form .ten.fields > .fields, +.ui.form .ten.fields > .field { + width: 10%; +} + +/* Swap to full width on mobile */ + +@media only screen and (max-width: 767px) { + .ui.form .fields { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .six.fields > .fields, + .ui.form .six.fields > .field, + .ui.form .seven.fields > .fields, + .ui.form .seven.fields > .field, + .ui.form .eight.fields > .fields, + .ui.form .eight.fields > .field, + .ui.form .nine.fields > .fields, + .ui.form .nine.fields > .field, + .ui.form .ten.fields > .fields, + .ui.form .ten.fields > .field { + width: 100% !important; + margin: 0em 0em 1em; + padding-left: 0%; + padding-right: 0%; + } +} + +.ui.form .fields .field:first-child { + padding-left: 0%; +} + +.ui.form .fields .field:last-child { + padding-right: 0%; +} + +/* Sizing Combinations */ + +.ui.form .fields .wide.field { + width: 6.25%; + padding-left: 0.5em; + padding-right: 0.5em; +} + +.ui.form .fields .wide.field:first-child { + padding-left: 0%; +} + +.ui.form .fields .wide.field:last-child { + padding-right: 0%; +} + +.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; +} + +/* Swap to full width on mobile */ + +@media only screen and (max-width: 767px) { + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field, + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field, + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field, + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field, + .ui.form .fields > .two.wide.field, + .ui.form .fields > .three.wide.field, + .ui.form .fields > .four.wide.field, + .ui.form .fields > .five.wide.field, + .ui.form .fields > .six.wide.field, + .ui.form .fields > .seven.wide.field, + .ui.form .fields > .eight.wide.field, + .ui.form .fields > .nine.wide.field, + .ui.form .fields > .ten.wide.field, + .ui.form .fields > .eleven.wide.field, + .ui.form .fields > .twelve.wide.field, + .ui.form .fields > .thirteen.wide.field, + .ui.form .fields > .fourteen.wide.field, + .ui.form .fields > .fifteen.wide.field, + .ui.form .fields > .sixteen.wide.field { + width: 100% !important; + margin: 0em 0em 1em; + padding-left: 0%; + padding-right: 0%; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields +---------------------*/ + +.ui.form .inline.fields { + margin: 0em 0em 1em; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.ui.form .inline.fields .field { + margin: 0em; + padding: 0em 1em 0em 0em; +} + +/* Inline Label */ + +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: baseline; + font-size: 0.92857143em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); + text-transform: none; +} + +/* Grouped Inline Label */ + +.ui.form .inline.fields > label { + margin: 0.035714em 1em 0em 0em; +} + +/* Inline Input */ + +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: middle; + font-size: 1em; +} + +/* Label */ + +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em 0.85714286em 0em 0em; +} + +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} + +/* Wide */ + +.ui.form .inline.fields .wide.field { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + +/*-------------------- + Sizes +---------------------*/ + +/* Standard */ + +.ui.small.form { + font-size: 0.92857143rem; +} + +/* Medium */ + +.ui.form { + font-size: 1rem; +} + +/* Large */ + +.ui.large.form { + font-size: 1.14285714rem; +} + +/* Huge */ + +.ui.huge.form { + font-size: 1.42857143rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: stretch; + -webkit-align-items: 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: inherit; + -webkit-justify-content: inherit; + -ms-flex-pack: inherit; + justify-content: inherit; + -webkit-box-align: stretch; + -webkit-align-items: 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; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin: 1rem 1rem; +} + +.ui.grid .column + .ui.vertical.divider { + height: calc(50% - 1rem ); +} + +/* Remove Border on Last Horizontal Segment */ + +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + 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 { + 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; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.ui.centered.grid > .column:not(.aligned):not(.row), +.ui.centered.grid > .row > .column:not(.aligned), +.ui.grid .centered.row > .column:not(.aligned) { + 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 { + 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 { + box-shadow: none; +} + +/* Divided Row */ + +.ui.grid > .divided.row > .column { + box-shadow: -1px 0px 0px 0px rgba(34, 36, 38, 0.15); +} + +.ui.grid > .divided.row > .column:first-child { + 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; + 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 { + 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 { + 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 { + box-shadow: none; +} + +.ui.inverted[class*="vertically divided"].grid > .row:before { + 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: 5rem; + margin-right: 5rem; + width: calc(100% - 5rem ); +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: 1em 0em; + box-shadow: 0px 0px 0px 1px #d4d4d5; +} + +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + box-shadow: 0px -1px 0px 0px #d4d4d5; +} + +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + box-shadow: -1px 0px 0px 0px #d4d4d5; +} + +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + 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 { + box-shadow: none; + margin: 0em; +} + +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} + +.ui[class*="internally celled"].grid > .row > .column:first-child { + 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: top; + -webkit-align-self: flex-start !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: middle; + -webkit-align-self: center !important; + -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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + vertical-align: bottom; + -webkit-align-self: flex-end !important; + -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: -webkit-inline-flex !important; + display: -ms-inline-flexbox !important; + display: inline-flex !important; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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; + -webkit-flex-grow: 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 { + text-align: left; + -webkit-align-self: inherit; + -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 { + text-align: center; + -webkit-align-self: inherit; + -ms-flex-item-align: inherit; + align-self: inherit; +} + +.ui[class*="center aligned"].grid { + -webkit-box-pack: center; + -webkit-justify-content: 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 { + text-align: right; + -webkit-align-self: inherit; + -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 { + text-align: justify; + -webkit-hyphens: auto; + -moz-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; + -webkit-flex-grow: 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; + -webkit-flex-grow: 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; + -webkit-flex-direction: row-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; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + + /* Vertically Divided Reversed */ + + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + + /* Celled Reversed */ + + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + 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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .ui[class*="tablet vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + + /* Vertically Divided Reversed */ + + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + + /* Celled Reversed */ + + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + 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; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .ui[class*="computer vertically reversed"].grid { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-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 { + 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 { + box-shadow: none; + } + + /* Vertically Divided Reversed */ + + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + 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 { + box-shadow: none; + } + + /* Celled Reversed */ + + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + box-shadow: -1px 0px 0px 0px #d4d4d5; + } + + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + 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; + 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; + } +} + +/* Mobily 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; + 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; + 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); + box-shadow: none !important; + padding-top: 2rem !important; + padding-bottom: 2rem !important; + } + + .ui.stackable.celled.grid > .row { + 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 +*******************************/ +/* + * # 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: -webkit-flex; + 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); + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: 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; + -webkit-flex: 0 0 auto; + -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, box-shadow 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, box-shadow 0.1s ease, color 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.71428571em; + padding-top: 0.71428571em; + font-size: 1em; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: inherit; + -webkit-align-items: inherit; + -ms-flex-align: inherit; + align-items: inherit; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-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; +} + +/*-------------- + Popup +---------------*/ + +.ui.menu .ui.popup { + display: none; +} + +.ui.menu .ui.visible.popup { + display: block; +} + +/*-------------- + Dropdowns +---------------*/ + +/* Dropdown Icon */ + +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: right; + margin: 0em 0em 0em 1em; +} + +/* Menu */ + +.ui.menu .dropdown.item .menu { + left: 0px; + min-width: calc(100% - 1px); + border-radius: 0em 0em 0.28571429rem 0.28571429rem; + background: #ffffff; + margin: 0em 0px 0px; + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -webkit-flex-direction: column !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.71428571em 1.14285714em !important; + background: transparent !important; + color: rgba(0, 0, 0, 0.87) !important; + text-transform: none !important; + font-weight: normal !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; +} + +/* 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 { + top: 0% !important; + left: 100%; + min-width: 0; + margin: 0em 0em 0em 0em; + box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); + border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem; +} + +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} + +.ui.vertical.menu .dropdown.active.item { + 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.71428571em; +} + +.ui.vertical.menu .item > .label { + background: #999999; + color: #ffffff; + margin-top: -0.15em; + margin-bottom: -0.15em; + padding: 0.3em 0.71428571em; +} + +.ui.menu .item > .floating.label { + padding: 0.3em 0.71428571em; +} + +/*-------------- + 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 +*******************************/ + +/*-------------- + 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; + 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; + background-color: transparent !important; + color: rgba(40, 40, 40, 0.3); +} + +/******************************* + Types +*******************************/ + +/*------------------ +Floated Menu / Item +-------------------*/ + +/* Left Floated */ + +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) .left.menu { + display: -webkit-box; + display: -webkit-flex; + 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: -webkit-flex; + 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; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #ffffff; + 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%; + background: rgba(34, 36, 38, 0.1); + height: 1px; +} + +.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; + 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; + box-shadow: none !important; + border: none; + background: none transparent; + border-bottom: 1px solid #d4d4d5; +} + +.ui.tabular.fluid.menu { + width: calc(100% + 2px ) !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; + 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: 0px; + width: 100%; +} + +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: calc(100% + 2px ); + left: -1px; +} + +/* Bottom Vertical Tabular */ + +.ui.bottom.tabular.menu { + background: none transparent; + border-radius: 0em; + 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; + 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; + 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: -webkit-inline-flex; + 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); + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: none; + margin-left: -0.35714286em; + margin-right: -0.35714286em; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ + +.ui.secondary.menu .item { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + box-shadow: none; + border: none; + padding: 0.71428571em 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 { + 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 { + 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 { + 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; + -webkit-align-self: flex-end; + -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 { + 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; + 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 .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; + box-shadow: none; + border: none; + margin: 1em -0.5em; +} + +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + -webkit-align-self: center; + -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; +} + +.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; + 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 { + box-shadow: none; +} + +.ui.text.attached.menu { + 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; + -webkit-flex-direction: column; + -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; + -webkit-flex-direction: column; + -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%; + background: rgba(34, 36, 38, 0.1); + height: 1px; + } +} + +/*-------------- + 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; + 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; + 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, +.ui.inverted.menu a.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; + 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: -webkit-inline-flex; + 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; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.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.500%; +} + +.ui.menu.nine.item .item { + width: 11.11%; +} + +.ui.menu.ten.item .item { + width: 10.0%; +} + +.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); + -ms-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); + -ms-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% + 2px ); + max-width: calc(100% + 2px ); + 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; + 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 +---------------*/ + +/* 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.14285714rem; +} + +.ui.large.vertical.menu { + width: 18rem; +} + +/* Huge */ + +.ui.huge.menu { + font-size: 1.42857143rem; +} + +.ui.huge.vertical.menu { + width: 20rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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, box-shadow 0.1s ease; + transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; + border-radius: 0.28571429rem; + 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.14285em 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: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: -1px; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; + 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; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.ui.icon.message > .icon:not(.close) { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -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; + -webkit-flex: 1 1 auto; + -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 { + 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.08); +} + +/*-------------- + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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; +} + +.ui.red.message .header { + color: #c82121; +} + +.ui.orange.message { + background-color: #ffedde; + color: #f2711c; +} + +.ui.orange.message .header { + color: #e7640d; +} + +.ui.yellow.message { + background-color: #fff8db; + color: #b58105; +} + +.ui.yellow.message .header { + color: #9c6f04; +} + +.ui.olive.message { + background-color: #fbfdef; + color: #8abc1e; +} + +.ui.olive.message .header { + color: #7aa61a; +} + +.ui.green.message { + background-color: #e5f9e7; + color: #1ebc30; +} + +.ui.green.message .header { + color: #1aa62a; +} + +.ui.teal.message { + background-color: #e1f7f7; + color: #10a3a3; +} + +.ui.teal.message .header { + color: #0e8c8c; +} + +.ui.blue.message { + background-color: #dff0ff; + color: #2185d0; +} + +.ui.blue.message .header { + color: #1e77ba; +} + +.ui.violet.message { + background-color: #eae7ff; + color: #6435c9; +} + +.ui.violet.message .header { + color: #5a30b5; +} + +.ui.purple.message { + background-color: #f6e7ff; + color: #a333c8; +} + +.ui.purple.message .header { + color: #922eb4; +} + +.ui.pink.message { + background-color: #ffe3fb; + color: #e03997; +} + +.ui.pink.message .header { + color: #dd238b; +} + +.ui.brown.message { + background-color: #f1e2d3; + color: #a5673f; +} + +.ui.brown.message .header { + color: #935b38; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.message { + font-size: 0.92857143em; +} + +.ui.message { + font-size: 1em; +} + +.ui.large.message { + font-size: 1.14285714em; +} + +.ui.huge.message { + font-size: 1.42857143em; +} + +.ui.massive.message { + font-size: 1.71428571em; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Table +*******************************/ + +/* Prototype */ + +.ui.table { + width: 100%; + background: #ffffff; + margin: 1em 0em; + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; + border-radius: 0.28571429rem; + text-align: left; + color: rgba(0, 0, 0, 0.87); + border-collapse: separate; + border-spacing: 0px; +} + +.ui.table:first-child { + margin-top: 0em; +} + +.ui.table:last-child { + margin-bottom: 0em; +} + +/******************************* + Parts +*******************************/ + +/* Table Content */ + +.ui.table th, +.ui.table td { + -webkit-transition: background 0.1s ease, color 0.1s ease; + transition: background 0.1s ease, color 0.1s ease; +} + +/* Headers */ + +.ui.table thead { + box-shadow: none; +} + +.ui.table thead th { + cursor: auto; + background: #f9fafb; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.92857143em 0.71428571em; + vertical-align: inherit; + font-style: none; + font-weight: bold; + text-transform: none; + border-bottom: 1px solid rgba(34, 36, 38, 0.1); + border-left: none; +} + +.ui.table thead tr > th:first-child { + border-left: none; +} + +.ui.table thead tr:first-child > th:first-child { + border-radius: 0.28571429rem 0em 0em 0em; +} + +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em 0.28571429rem 0em 0em; +} + +.ui.table thead tr:first-child > th:only-child { + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +/* Footer */ + +.ui.table tfoot { + box-shadow: none; +} + +.ui.table tfoot th { + cursor: auto; + border-top: 1px solid rgba(34, 36, 38, 0.15); + background: #f9fafb; + text-align: inherit; + color: rgba(0, 0, 0, 0.87); + padding: 0.71428571em 0.71428571em; + vertical-align: middle; + font-style: normal; + font-weight: normal; + text-transform: none; +} + +.ui.table tfoot tr > th:first-child { + border-left: none; +} + +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em 0.28571429rem; +} + +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em 0.28571429rem 0em; +} + +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +/* Table Row */ + +.ui.table tr td { + border-top: 1px solid rgba(34, 36, 38, 0.1); +} + +.ui.table tr:first-child td { + border-top: none; +} + +/* Table Cells */ + +.ui.table td { + padding: 0.71428571em 0.71428571em; + text-align: inherit; +} + +/* Icons */ + +.ui.table > .icon { + vertical-align: baseline; +} + +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ + +.ui.table.segment { + padding: 0em; +} + +.ui.table.segment:after { + display: none; +} + +.ui.table.segment.stacked:after { + display: block; +} + +/* Responsive */ + +@media only screen and (max-width: 767px) { + .ui.table:not(.unstackable) { + width: 100%; + } + + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + width: auto !important; + display: block !important; + } + + .ui.table:not(.unstackable) { + padding: 0em; + } + + .ui.table:not(.unstackable) thead { + display: block; + } + + .ui.table:not(.unstackable) tfoot { + display: block; + } + + .ui.table:not(.unstackable) tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em !important; + box-shadow: none !important; + } + + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: bold; + } + + /* Definition Table */ + + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + +/******************************* + Coupling +*******************************/ + +/* UI Image */ + +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} + +.ui.structured.table thead th { + border-left: none; + border-right: none; +} + +.ui.structured.sortable.table thead th { + border-left: 1px solid rgba(34, 36, 38, 0.15); + border-right: 1px solid rgba(34, 36, 38, 0.15); +} + +.ui.structured.basic.table th { + border-left: none; + border-right: none; +} + +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: 1px solid rgba(34, 36, 38, 0.1); + border-right: 1px solid rgba(34, 36, 38, 0.1); +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: normal; + color: rgba(0, 0, 0, 0.4); + box-shadow: -1px -1px 0px 1px #ffffff; +} + +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: transparent; + font-weight: rgba(0, 0, 0, 0.4); + color: normal; + box-shadow: 1px 1px 0px 1px #ffffff; +} + +/* Remove Border */ + +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -1px 0px 1px #ffffff; +} + +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px 1px 0px 1px #ffffff; +} + +/* Highlight Defining Column */ + +.ui.definition.table tr td:first-child { + background: rgba(0, 0, 0, 0.03); + font-weight: bold; + color: rgba(0, 0, 0, 0.95); +} + +/* Fix 2nd Column */ + +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} + +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} + +.ui.definition.table td:nth-child(2) { + border-left: 1px solid rgba(34, 36, 38, 0.15); +} + +/******************************* + States +*******************************/ + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: 0px 0px 0px #a3c293 inset; +} + +.ui.table tr.positive, +.ui.table td.positive { + background: #fcfff5 !important; + color: #2c662d !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: 0px 0px 0px #e0b4b4 inset; +} + +.ui.table tr.negative, +.ui.table td.negative { + background: #fff6f6 !important; + color: #9f3a38 !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: 0px 0px 0px #e0b4b4 inset; +} + +.ui.table tr.error, +.ui.table td.error { + background: #fff6f6 !important; + color: #9f3a38 !important; +} + +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: 0px 0px 0px #c9ba9b inset; +} + +.ui.table tr.warning, +.ui.table td.warning { + background: #fffaf3 !important; + color: #573a08 !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.87) inset; +} + +.ui.table tr.active, +.ui.table td.active { + background: #e0e0e0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: rgba(40, 40, 40, 0.3); +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: 991px) { + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + width: 100% !important; + display: block !important; + } + + .ui[class*="tablet stackable"].table { + padding: 0em; + } + + .ui[class*="tablet stackable"].table thead { + display: block; + } + + .ui[class*="tablet stackable"].table tfoot { + display: block; + } + + .ui[class*="tablet stackable"].table tr { + padding-top: 1em; + padding-bottom: 1em; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + } + + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: 0.25em 0.75em; + box-shadow: none !important; + } + + /* Definition Table */ + + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} + +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} + +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} + +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} + +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} + +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: rgba(0, 0, 0, 0.05) !important; + color: rgba(0, 0, 0, 0.95) !important; +} + +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: rgba(255, 255, 255, 0.08) !important; + color: #ffffff !important; +} + +/* Selectable Cell Link */ + +.ui.table tbody tr td.selectable { + padding: 0em; +} + +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: 0.71428571em 0.71428571em; +} + +/* Other States */ + +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: #ffe7e7 !important; + color: #943634 !important; +} + +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: #fff4e4 !important; + color: #493107 !important; +} + +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: #e0e0e0 !important; + color: rgba(0, 0, 0, 0.87) !important; +} + +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: #f7ffe6 !important; + color: #275b28 !important; +} + +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: #ffe7e7 !important; + color: #943634 !important; +} + +/*------------------- + Attached +--------------------*/ + +/* Middle */ + +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em -1px; + width: calc(100% + 2px ); + max-width: calc(100% + 2px ); + box-shadow: none; + border: 1px solid #d4d4d5; +} + +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ + +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: 0px; + margin-top: 1em; + border-radius: 0.28571429rem 0.28571429rem 0em 0em; +} + +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ + +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: 0px; + margin-bottom: 1em; + box-shadow: none, none; + border-radius: 0em 0em 0.28571429rem 0.28571429rem; +} + +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + +/* Table Striping */ + +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 50, 0.02); +} + +/* Stripes */ + +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: rgba(255, 255, 255, 0.05); +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ + +.ui.red.table { + border-top: 0.2em solid #db2828; +} + +.ui.inverted.red.table { + background-color: #db2828 !important; + color: #ffffff !important; +} + +/* Orange */ + +.ui.orange.table { + border-top: 0.2em solid #f2711c; +} + +.ui.inverted.orange.table { + background-color: #f2711c !important; + color: #ffffff !important; +} + +/* Yellow */ + +.ui.yellow.table { + border-top: 0.2em solid #fbbd08; +} + +.ui.inverted.yellow.table { + background-color: #fbbd08 !important; + color: #ffffff !important; +} + +/* Olive */ + +.ui.olive.table { + border-top: 0.2em solid #b5cc18; +} + +.ui.inverted.olive.table { + background-color: #b5cc18 !important; + color: #ffffff !important; +} + +/* Green */ + +.ui.green.table { + border-top: 0.2em solid #21ba45; +} + +.ui.inverted.green.table { + background-color: #21ba45 !important; + color: #ffffff !important; +} + +/* Teal */ + +.ui.teal.table { + border-top: 0.2em solid #00b5ad; +} + +.ui.inverted.teal.table { + background-color: #00b5ad !important; + color: #ffffff !important; +} + +/* Blue */ + +.ui.blue.table { + border-top: 0.2em solid #2185d0; +} + +.ui.inverted.blue.table { + background-color: #2185d0 !important; + color: #ffffff !important; +} + +/* Violet */ + +.ui.violet.table { + border-top: 0.2em solid #6435c9; +} + +.ui.inverted.violet.table { + background-color: #6435c9 !important; + color: #ffffff !important; +} + +/* Purple */ + +.ui.purple.table { + border-top: 0.2em solid #a333c8; +} + +.ui.inverted.purple.table { + background-color: #a333c8 !important; + color: #ffffff !important; +} + +/* Pink */ + +.ui.pink.table { + border-top: 0.2em solid #e03997; +} + +.ui.inverted.pink.table { + background-color: #e03997 !important; + color: #ffffff !important; +} + +/* Brown */ + +.ui.brown.table { + border-top: 0.2em solid #a5673f; +} + +.ui.inverted.brown.table { + background-color: #a5673f !important; + color: #ffffff !important; +} + +/* Grey */ + +.ui.grey.table { + border-top: 0.2em solid #767676; +} + +.ui.inverted.grey.table { + background-color: #767676 !important; + color: #ffffff !important; +} + +/* Black */ + +.ui.black.table { + border-top: 0.2em solid #1b1c1d; +} + +.ui.inverted.black.table { + background-color: #1b1c1d !important; + color: #ffffff !important; +} + +/*-------------- + Column Count +---------------*/ + +/* Grid Based */ + +.ui.one.column.table td { + width: 100%; +} + +.ui.two.column.table td { + width: 50%; +} + +.ui.three.column.table td { + width: 33.33333333%; +} + +.ui.four.column.table td { + width: 25%; +} + +.ui.five.column.table td { + width: 20%; +} + +.ui.six.column.table td { + width: 16.66666667%; +} + +.ui.seven.column.table td { + width: 14.28571429%; +} + +.ui.eight.column.table td { + width: 12.5%; +} + +.ui.nine.column.table td { + width: 11.11111111%; +} + +.ui.ten.column.table td { + width: 10%; +} + +.ui.eleven.column.table td { + width: 9.09090909%; +} + +.ui.twelve.column.table td { + width: 8.33333333%; +} + +.ui.thirteen.column.table td { + width: 7.69230769%; +} + +.ui.fourteen.column.table td { + width: 7.14285714%; +} + +.ui.fifteen.column.table td { + width: 6.66666667%; +} + +.ui.sixteen.column.table td { + width: 6.25%; +} + +/* Column Width */ + +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} + +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} + +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} + +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} + +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} + +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} + +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} + +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} + +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} + +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} + +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} + +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} + +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} + +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} + +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} + +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); +} + +.ui.sortable.table thead th:first-child { + border-left: none; +} + +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: auto; + opacity: 0.8; + margin: 0em 0em 0em 0.5em; + font-family: 'Icons'; +} + +.ui.sortable.table thead th.ascending:after { + content: '\f0d8'; +} + +.ui.sortable.table thead th.descending:after { + content: '\f0d7'; +} + +/* Hover */ + +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: rgba(40, 40, 40, 0.3); +} + +.ui.sortable.table thead th:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.8); +} + +/* Sorted */ + +.ui.sortable.table thead th.sorted { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ + +.ui.sortable.table thead th.sorted:hover { + background: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.95); +} + +/* Inverted */ + +.ui.inverted.sortable.table thead th.sorted { + background: rgba(255, 255, 255, 0.15) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.15) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} + +.ui.inverted.sortable.table thead th:hover { + background: rgba(255, 255, 255, 0.08) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + background: rgba(255, 255, 255, 0.08) linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + color: #ffffff; +} + +.ui.inverted.sortable.table thead th { + border-left-color: transparent; + border-right-color: transparent; +} + +/*-------------- + Inverted +---------------*/ + +/* Text Color */ + +.ui.inverted.table { + background: #333333; + color: rgba(255, 255, 255, 0.9); + border: none; +} + +.ui.inverted.table th { + background-color: rgba(0, 0, 0, 0.15); + border-color: rgba(255, 255, 255, 0.1) !important; + color: rgba(255, 255, 255, 0.9); +} + +.ui.inverted.table tr td { + border-color: rgba(255, 255, 255, 0.1) !important; +} + +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: rgba(225, 225, 225, 0.3); +} + +/* Definition */ + +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: #ffffff; +} + +.ui.inverted.definition.table tr td:first-child { + background: rgba(255, 255, 255, 0.02); + color: #ffffff; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: transparent; + border: 1px solid rgba(34, 36, 38, 0.15); + box-shadow: none; +} + +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} + +.ui.basic.table th { + background: transparent; + border-left: none; +} + +.ui.basic.table tbody tr { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.ui.basic.table td { + background: transparent; +} + +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +/* Very Basic */ + +.ui[class*="very basic"].table { + border: none; +} + +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: ''; +} + +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} + +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} + +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: 1px solid rgba(34, 36, 38, 0.1); +} + +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: 1em; + padding-right: 1em; +} + +.ui.padded.table th, +.ui.padded.table td { + padding: 1em 1em; +} + +/* Very */ + +.ui[class*="very padded"].table th { + padding-left: 1.5em; + padding-right: 1.5em; +} + +.ui[class*="very padded"].table td { + padding: 1.5em 1.5em; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: 0.7em; + padding-right: 0.7em; +} + +.ui.compact.table td { + padding: 0.5em 0.7em; +} + +/* Very */ + +.ui[class*="very compact"].table th { + padding-left: 0.6em; + padding-right: 0.6em; +} + +.ui[class*="very compact"].table td { + padding: 0.4em 0.6em; +} + +/*-------------- + Sizes +---------------*/ + +/* Small */ + +.ui.small.table { + font-size: 0.9em; +} + +/* Standard */ + +.ui.table { + font-size: 1em; +} + +/* Large */ + +.ui.large.table { + font-size: 1.1em; +} + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Ad + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Advertisement +*******************************/ + +.ui.ad { + display: block; + overflow: hidden; + margin: 1em 0em; +} + +.ui.ad:first-child { + margin: 0em; +} + +.ui.ad:last-child { + margin: 0em; +} + +.ui.ad iframe { + margin: 0em; + padding: 0em; + border: none; + overflow: hidden; +} + +/*-------------- + Common +---------------*/ + +/* Leaderboard */ + +.ui.leaderboard.ad { + width: 728px; + height: 90px; +} + +/* Medium Rectangle */ + +.ui[class*="medium rectangle"].ad { + width: 300px; + height: 250px; +} + +/* Large Rectangle */ + +.ui[class*="large rectangle"].ad { + width: 336px; + height: 280px; +} + +/* Half Page */ + +.ui[class*="half page"].ad { + width: 300px; + height: 600px; +} + +/*-------------- + Square +---------------*/ + +/* Square */ + +.ui.square.ad { + width: 250px; + height: 250px; +} + +/* Small Square */ + +.ui[class*="small square"].ad { + width: 200px; + height: 200px; +} + +/*-------------- + Rectangle +---------------*/ + +/* Small Rectangle */ + +.ui[class*="small rectangle"].ad { + width: 180px; + height: 150px; +} + +/* Vertical Rectangle */ + +.ui[class*="vertical rectangle"].ad { + width: 240px; + height: 400px; +} + +/*-------------- + Button +---------------*/ + +.ui.button.ad { + width: 120px; + height: 90px; +} + +.ui[class*="square button"].ad { + width: 125px; + height: 125px; +} + +.ui[class*="small button"].ad { + width: 120px; + height: 60px; +} + +/*-------------- + Skyscrapers +---------------*/ + +/* Skyscraper */ + +.ui.skyscraper.ad { + width: 120px; + height: 600px; +} + +/* Wide Skyscraper */ + +.ui[class*="wide skyscraper"].ad { + width: 160px; +} + +/*-------------- + Banners +---------------*/ + +/* Banner */ + +.ui.banner.ad { + width: 468px; + height: 60px; +} + +/* Vertical Banner */ + +.ui[class*="vertical banner"].ad { + width: 120px; + height: 240px; +} + +/* Top Banner */ + +.ui[class*="top banner"].ad { + width: 930px; + height: 180px; +} + +/* Half Banner */ + +.ui[class*="half banner"].ad { + width: 234px; + height: 60px; +} + +/*-------------- + Boards +---------------*/ + +/* Leaderboard */ + +.ui[class*="large leaderboard"].ad { + width: 970px; + height: 90px; +} + +/* Billboard */ + +.ui.billboard.ad { + width: 970px; + height: 250px; +} + +/*-------------- + Panorama +---------------*/ + +/* Panorama */ + +.ui.panorama.ad { + width: 980px; + height: 120px; +} + +/*-------------- + Netboard +---------------*/ + +/* Netboard */ + +.ui.netboard.ad { + width: 580px; + height: 400px; +} + +/*-------------- + Mobile +---------------*/ + +/* Large Mobile Banner */ + +.ui[class*="large mobile banner"].ad { + width: 320px; + height: 100px; +} + +/* Mobile Leaderboard */ + +.ui[class*="mobile leaderboard"].ad { + width: 320px; + height: 50px; +} + +/******************************* + Types +*******************************/ + +/* Mobile Sizes */ + +.ui.mobile.ad { + display: none; +} + +@media only screen and (max-width: 767px) { + .ui.mobile.ad { + display: block; + } +} + +/******************************* + Variations +*******************************/ + +.ui.centered.ad { + margin-left: auto; + margin-right: auto; +} + +.ui.test.ad { + position: relative; + background: #545454; +} + +.ui.test.ad:after { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + text-align: center; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + content: 'Ad'; + color: #ffffff; + font-size: 1em; + font-weight: bold; +} + +.ui.mobile.test.ad:after { + font-size: 0.85714286em; +} + +.ui.test.ad[data-text]:after { + content: attr(data-text); +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Variable Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 290px; + min-height: 0px; + background: #ffffff; + padding: 0em; + border: none; + border-radius: 0.28571429rem; + box-shadow: 0px 1px 3px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5; + -webkit-transition: box-shadow 0.1s ease, -webkit-transform 0.1s ease; + transition: box-shadow 0.1s ease, 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: -0.875em -0.5em; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.ui.cards > .card { + display: -webkit-box; + display: -webkit-flex; + 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; + -webkit-flex: 0 0 auto; + -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; + -webkit-flex-grow: 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; + 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.2857em; +} + +.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; + -webkit-flex-grow: 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); + 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 +*******************************/ + +/*------------------- + Centered +--------------------*/ + +.ui.centered.cards { + -webkit-box-pack: center; + -webkit-justify-content: 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; + -ms-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; + box-shadow: 0px 1px 3px 0px #bcbdbd, 0px 0px 0px 1px #d4d4d5; + -webkit-transform: translateY(-3px); + -ms-transform: translateY(-3px); + transform: translateY(-3px); +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ + +.ui.red.cards > .card, +.ui.cards > .red.card, +.ui.red.card { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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 +--------------------*/ + +/* Mobily 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Comment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Standard +*******************************/ + +/*-------------- + Comments +---------------*/ + +.ui.comments { + margin: 1.5em 0em; + max-width: 650px; +} + +.ui.comments:first-child { + margin-top: 0em; +} + +.ui.comments:last-child { + margin-bottom: 0em; +} + +/*-------------- + Comment +---------------*/ + +.ui.comments .comment { + position: relative; + background: none; + margin: 0.5em 0em 0em; + padding: 0.5em 0em 0em; + border: none; + border-top: none; + line-height: 1.2; +} + +.ui.comments .comment:first-child { + margin-top: 0em; + padding-top: 0em; +} + +/*-------------------- + Nested Comments +---------------------*/ + +.ui.comments .comment .comments { + margin: 0em 0em 0.5em 0.5em; + padding: 1em 0em 1em 1em; +} + +.ui.comments .comment .comments:before { + position: absolute; + top: 0px; + left: 0px; +} + +.ui.comments .comment .comments .comment { + border: none; + border-top: none; + background: none; +} + +/*-------------- + Avatar +---------------*/ + +.ui.comments .comment .avatar { + display: block; + width: 2.5em; + height: auto; + float: left; + margin: 0.2em 0em 0em; +} + +.ui.comments .comment img.avatar, +.ui.comments .comment .avatar img { + display: block; + margin: 0em auto; + width: 100%; + height: 100%; + border-radius: 0.25rem; +} + +/*-------------- + Content +---------------*/ + +.ui.comments .comment > .content { + display: block; +} + +/* If there is an avatar move content over */ + +.ui.comments .comment > .avatar ~ .content { + margin-left: 3.5em; +} + +/*-------------- + Author +---------------*/ + +.ui.comments .comment .author { + font-size: 1em; + color: rgba(0, 0, 0, 0.87); + font-weight: bold; +} + +.ui.comments .comment a.author { + cursor: pointer; +} + +.ui.comments .comment a.author:hover { + color: #1e70bf; +} + +/*-------------- + Metadata +---------------*/ + +.ui.comments .comment .metadata { + display: inline-block; + margin-left: 0.5em; + color: rgba(0, 0, 0, 0.4); + font-size: 0.875em; +} + +.ui.comments .comment .metadata > * { + display: inline-block; + margin: 0em 0.5em 0em 0em; +} + +.ui.comments .comment .metadata > :last-child { + margin-right: 0em; +} + +/*-------------------- + Comment Text +---------------------*/ + +.ui.comments .comment .text { + margin: 0.25em 0em 0.5em; + font-size: 1em; + word-wrap: break-word; + color: rgba(0, 0, 0, 0.87); + line-height: 1.3; +} + +/*-------------------- + User Actions +---------------------*/ + +.ui.comments .comment .actions { + font-size: 0.875em; +} + +.ui.comments .comment .actions a { + cursor: pointer; + display: inline-block; + margin: 0em 0.75em 0em 0em; + color: rgba(0, 0, 0, 0.4); +} + +.ui.comments .comment .actions a:last-child { + margin-right: 0em; +} + +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: rgba(0, 0, 0, 0.8); +} + +/*-------------------- + Reply Form +---------------------*/ + +.ui.comments > .reply.form { + margin-top: 1em; +} + +.ui.comments .comment .reply.form { + width: 100%; + margin-top: 1em; +} + +.ui.comments .reply.form textarea { + font-size: 1em; + height: 12em; +} + +/******************************* + State +*******************************/ + +.ui.collapsed.comments, +.ui.comments .collapsed.comments, +.ui.comments .collapsed.comment { + display: none; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Threaded +---------------------*/ + +.ui.threaded.comments .comment .comments { + margin: -1.5em 0 -1em 1.25em; + padding: 3em 0em 2em 2.25em; + box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15); +} + +/*-------------------- + Minimal +---------------------*/ + +.ui.minimal.comments .comment .actions { + opacity: 0; + position: absolute; + top: 0px; + right: 0px; + left: auto; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + -webkit-transition-delay: 0.1s; + transition-delay: 0.1s; +} + +.ui.minimal.comments .comment > .content:hover > .actions { + opacity: 1; +} + +/*-------------------- + Sizes +---------------------*/ + +.ui.small.comments { + font-size: 0.9em; +} + +.ui.comments { + font-size: 1em; +} + +.ui.large.comments { + font-size: 1.1em; +} + +.ui.huge.comments { + font-size: 1.2em; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Variable Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Feed + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Activity Feed +*******************************/ + +.ui.feed { + margin: 1em 0em; +} + +.ui.feed:first-child { + margin-top: 0em; +} + +.ui.feed:last-child { + margin-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* Event */ + +.ui.feed > .event { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + padding: 0.21428571rem 0em; + margin: 0em; + background: none; + border-top: none; +} + +.ui.feed > .event:first-child { + border-top: 0px; + padding-top: 0em; +} + +.ui.feed > .event:last-child { + padding-bottom: 0em; +} + +/* Event Label */ + +.ui.feed > .event > .label { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 2.5em; + height: auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + text-align: left; +} + +.ui.feed > .event > .label .icon { + opacity: 1; + font-size: 1.5em; + width: 100%; + padding: 0.25em; + background: none; + border: none; + border-radius: none; + color: rgba(0, 0, 0, 0.6); +} + +.ui.feed > .event > .label img { + width: 100%; + height: auto; + border-radius: 500rem; +} + +.ui.feed > .event > .label + .content { + margin: 0.5em 0em 0.35714286em 1.14285714em; +} + +/*-------------- + Content +---------------*/ + +/* Content */ + +.ui.feed > .event > .content { + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + text-align: left; + word-wrap: break-word; +} + +.ui.feed > .event:last-child > .content { + padding-bottom: 0em; +} + +/* Link */ + +.ui.feed > .event > .content a { + cursor: pointer; +} + +/*-------------- + Date +---------------*/ + +.ui.feed > .event > .content .date { + margin: -0.5rem 0em 0em; + padding: 0em; + font-weight: normal; + font-size: 1em; + font-style: normal; + color: rgba(0, 0, 0, 0.4); +} + +/*-------------- + Summary +---------------*/ + +.ui.feed > .event > .content .summary { + margin: 0em; + font-size: 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.87); +} + +/* Summary Image */ + +.ui.feed > .event > .content .summary img { + display: inline-block; + width: auto; + height: 10em; + margin: -0.25em 0.25em 0em 0em; + border-radius: 0.25em; + vertical-align: middle; +} + +/*-------------- + User +---------------*/ + +.ui.feed > .event > .content .user { + display: inline-block; + font-weight: bold; + margin-right: 0em; + vertical-align: baseline; +} + +.ui.feed > .event > .content .user img { + margin: -0.25em 0.25em 0em 0em; + width: auto; + height: 10em; + vertical-align: middle; +} + +/*-------------- + Inline Date +---------------*/ + +/* Date inside Summary */ + +.ui.feed > .event > .content .summary > .date { + display: inline-block; + float: none; + font-weight: normal; + font-size: 0.85714286em; + font-style: normal; + margin: 0em 0em 0em 0.5em; + padding: 0em; + color: rgba(0, 0, 0, 0.4); +} + +/*-------------- + Extra Summary +---------------*/ + +.ui.feed > .event > .content .extra { + margin: 0.5em 0em 0em; + background: none; + padding: 0em; + color: rgba(0, 0, 0, 0.87); +} + +/* Images */ + +.ui.feed > .event > .content .extra.images img { + display: inline-block; + margin: 0em 0.25em 0em 0em; + width: 6em; +} + +/* Text */ + +.ui.feed > .event > .content .extra.text { + padding: 0em; + border-left: none; + font-size: 1em; + max-width: 500px; + line-height: 1.4285em; +} + +/*-------------- + Meta +---------------*/ + +.ui.feed > .event > .content .meta { + display: inline-block; + font-size: 0.85714286em; + margin: 0.5em 0em 0em; + background: none; + border: none; + border-radius: 0; + box-shadow: none; + padding: 0em; + color: rgba(0, 0, 0, 0.6); +} + +.ui.feed > .event > .content .meta > * { + position: relative; + margin-left: 0.75em; +} + +.ui.feed > .event > .content .meta > *:after { + content: ''; + color: rgba(0, 0, 0, 0.2); + top: 0em; + left: -1em; + opacity: 1; + position: absolute; + vertical-align: top; +} + +.ui.feed > .event > .content .meta .like { + color: ''; + -webkit-transition: 0.2s color ease; + transition: 0.2s color ease; +} + +.ui.feed > .event > .content .meta .like:hover .icon { + color: #ff2733; +} + +.ui.feed > .event > .content .meta .active.like .icon { + color: #ef404a; +} + +/* First element */ + +.ui.feed > .event > .content .meta > :first-child { + margin-left: 0em; +} + +.ui.feed > .event > .content .meta > :first-child::after { + display: none; +} + +/* Action */ + +.ui.feed > .event > .content .meta a, +.ui.feed > .event > .content .meta > .icon { + cursor: pointer; + opacity: 1; + color: rgba(0, 0, 0, 0.5); + -webkit-transition: color 0.1s ease; + transition: color 0.1s ease; +} + +.ui.feed > .event > .content .meta a:hover, +.ui.feed > .event > .content .meta a:hover .icon, +.ui.feed > .event > .content .meta > .icon:hover { + color: rgba(0, 0, 0, 0.95); +} + +/******************************* + Variations +*******************************/ + +.ui.small.feed { + font-size: 0.92857143rem; +} + +.ui.feed { + font-size: 1rem; +} + +.ui.large.feed { + font-size: 1.14285714rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Variable Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Item + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Standard +*******************************/ + +/*-------------- + Item +---------------*/ + +.ui.items > .item { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1em 0em; + width: 100%; + min-height: 0px; + background: transparent; + padding: 0em; + border: none; + border-radius: 0rem; + box-shadow: none; + -webkit-transition: box-shadow 0.1s ease; + transition: 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; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: block; + float: none; + margin: 0em; + padding: 0em; + max-height: ''; + -webkit-align-self: top; + -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; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background: none; + margin: 0em; + padding: 0em; + 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; + -webkit-align-self: top; + -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 { + -webkit-align-self: middle; + -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); + 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; + } +} + +/* Mobily Only */ + +@media only screen and (max-width: 767px) { + .ui.items > .item { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 2em 0em; + } + + .ui.items > .item > .image { + display: block; + margin-left: auto; + margin-right: auto; + } + + .ui.items > .item > .image, + .ui.items > .item > .image > img { + max-width: 100% !important; + width: auto !important; + max-height: 250px !important; + } + + .ui.items > .item > .image + .content { + display: block; + padding: 1.5em 0em 0em; + } +} + +/******************************* + Variations +*******************************/ + +/*------------------- + Aligned +--------------------*/ + +.ui.items > .item > .image + [class*="top aligned"].content { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +.ui.items > .item > .image + [class*="middle aligned"].content { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.ui.items > .item > .image + [class*="bottom aligned"].content { + -webkit-align-self: flex-end; + -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; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Variable Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Statistic + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Statistic +*******************************/ + +/* Standalone */ + +.ui.statistic { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.ui.statistics > .statistic { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em 1.5em 2em; + max-width: auto; +} + +.ui.statistics { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1em -1.5em -2em; +} + +/* Clearing */ + +.ui.statistics:after { + display: block; + content: ' '; + height: 0px; + clear: both; + overflow: hidden; + visibility: hidden; +} + +.ui.statistics:first-child { + margin-top: 0em; +} + +.ui.statistics:last-child { + margin-bottom: 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 -2em; +} + +.ui.ten.statistics .statistic { + min-width: 10%; + margin: 0em 0em 2em; +} + +.ui.nine.statistics { + margin: 0em 0em -2em; +} + +.ui.nine.statistics .statistic { + min-width: 11.11111111%; + margin: 0em 0em 2em; +} + +.ui.eight.statistics { + margin: 0em 0em -2em; +} + +.ui.eight.statistics .statistic { + min-width: 12.5%; + margin: 0em 0em 2em; +} + +.ui.seven.statistics { + margin: 0em 0em -2em; +} + +.ui.seven.statistics .statistic { + min-width: 14.28571429%; + margin: 0em 0em 2em; +} + +.ui.six.statistics { + margin: 0em 0em -2em; +} + +.ui.six.statistics .statistic { + min-width: 16.66666667%; + margin: 0em 0em 2em; +} + +.ui.five.statistics { + margin: 0em 0em -2em; +} + +.ui.five.statistics .statistic { + min-width: 20%; + margin: 0em 0em 2em; +} + +.ui.four.statistics { + margin: 0em 0em -2em; +} + +.ui.four.statistics .statistic { + min-width: 25%; + margin: 0em 0em 2em; +} + +.ui.three.statistics { + margin: 0em 0em -2em; +} + +.ui.three.statistics .statistic { + min-width: 33.33333333%; + margin: 0em 0em 2em; +} + +.ui.two.statistics { + margin: 0em 0em -2em; +} + +.ui.two.statistics .statistic { + min-width: 50%; + margin: 0em 0em 2em; +} + +.ui.one.statistics { + margin: 0em 0em -2em; +} + +.ui.one.statistics .statistic { + min-width: 100%; + margin: 0em 0em 2em; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.ui.horizontal.statistics { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin: 0em; + max-width: none; +} + +.ui.horizontal.statistics .statistic { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -webkit-align-items: 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; +} + +.ui.mini.horizontal.statistics .statistic > .value, +.ui.mini.horizontal.statistic > .value { + font-size: 1.5rem; +} + +.ui.mini.statistics .statistic > .text.value, +.ui.mini.statistic > .text.value { + font-size: 1rem; +} + +/* Tiny */ + +.ui.tiny.statistics .statistic > .value, +.ui.tiny.statistic > .value { + font-size: 2rem; +} + +.ui.tiny.horizontal.statistics .statistic > .value, +.ui.tiny.horizontal.statistic > .value { + font-size: 2rem; +} + +.ui.tiny.statistics .statistic > .text.value, +.ui.tiny.statistic > .text.value { + font-size: 1rem; +} + +/* Small */ + +.ui.small.statistics .statistic > .value, +.ui.small.statistic > .value { + font-size: 3rem; +} + +.ui.small.horizontal.statistics .statistic > .value, +.ui.small.horizontal.statistic > .value { + font-size: 2rem; +} + +.ui.small.statistics .statistic > .text.value, +.ui.small.statistic > .text.value { + font-size: 1rem; +} + +/* Medium */ + +.ui.statistics .statistic > .value, +.ui.statistic > .value { + font-size: 4rem; +} + +.ui.horizontal.statistics .statistic > .value, +.ui.horizontal.statistic > .value { + font-size: 3rem; +} + +.ui.statistics .statistic > .text.value, +.ui.statistic > .text.value { + font-size: 2rem; +} + +/* Large */ + +.ui.large.statistics .statistic > .value, +.ui.large.statistic > .value { + font-size: 5rem; +} + +.ui.large.horizontal.statistics .statistic > .value, +.ui.large.horizontal.statistic > .value { + font-size: 4rem; +} + +.ui.large.statistics .statistic > .text.value, +.ui.large.statistic > .text.value { + font-size: 2.5rem; +} + +/* Huge */ + +.ui.huge.statistics .statistic > .value, +.ui.huge.statistic > .value { + font-size: 6rem; +} + +.ui.huge.horizontal.statistics .statistic > .value, +.ui.huge.horizontal.statistic > .value { + font-size: 5rem; +} + +.ui.huge.statistics .statistic > .text.value, +.ui.huge.statistic > .text.value { + font-size: 2.5rem; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Variable Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-transform 0.1s ease, opacity 0.1s ease; + transition: transform 0.1s ease, opacity 0.1s ease; + vertical-align: baseline; + -webkit-transform: none; + -ms-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); + -ms-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); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} + +.ui.accordion.menu .item .active.title > .dropdown.icon { + -webkit-transform: rotate(90deg); + -ms-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; + 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' ; +} + +/******************************* + User Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, 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, box-shadow 0.1s ease; + transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, 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:indeterminate ~ .box:before, +.ui.checkbox input:indeterminate ~ label:before { + background: #ffffff; + border-color: rgba(34, 36, 38, 0.35); +} + +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + opacity: 1; + color: rgba(0, 0, 0, 0.95); +} + +/*-------------- + Active Focus +---------------*/ + +.ui.checkbox input:indeterminate:focus ~ .box:before, +.ui.checkbox input: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:indeterminate:focus ~ .box:after, +.ui.checkbox input: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; + 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; + -ms-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); + -ms-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; + -ms-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-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; + 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; + -ms-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; + -ms-transform: none; + transform: none; + border: none; + top: 0rem; + background: rgba(0, 0, 0, 0.05); + width: 3.5rem; + height: 1.5rem; + border-radius: 500rem; +} + +/* Handle */ + +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + 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; + 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; +} + +/* 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; +} + +/* 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Dimmer +*******************************/ + +.dimmable { + position: relative; +} + +.ui.dimmer { + display: none; + position: absolute; + top: 0em !important; + left: 0em !important; + width: 100%; + height: 100%; + text-align: center; + vertical-align: middle; + background-color: rgba(0, 0, 0, 0.85); + opacity: 0; + line-height: 1; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-transition: background-color 0.5s linear; + transition: background-color 0.5s linear; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + will-change: opacity; + z-index: 1000; +} + +/* Dimmer Content */ + +.ui.dimmer > .content { + width: 100%; + height: 100%; + display: table; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +.ui.dimmer > .content > * { + display: table-cell; + vertical-align: middle; + color: #ffffff; +} + +/* Loose Coupling */ + +.ui.segment > .ui.dimmer { + border-radius: inherit !important; +} + +/******************************* + States +*******************************/ + +.animating.dimmable:not(body), +.dimmed.dimmable:not(body) { + overflow: hidden; +} + +.dimmed.dimmable > .ui.animating.dimmer, +.dimmed.dimmable > .ui.visible.dimmer, +.ui.active.dimmer { + display: block; + opacity: 1; +} + +.ui.disabled.dimmer { + width: 0 !important; + height: 0 !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Page +---------------*/ + +.ui.page.dimmer { + position: fixed; + -webkit-transform-style: ''; + transform-style: ''; + -webkit-perspective: 2000px; + perspective: 2000px; + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; +} + +body.animating.in.dimmable, +body.dimmed.dimmable { + overflow: hidden; +} + +body.dimmable > .dimmer { + position: fixed; +} + +/*-------------- + Blurring +---------------*/ + +.blurring.dimmable > :not(.dimmer) { + -webkit-filter: blur(0px) grayscale(0); + filter: blur(0px) grayscale(0); + -webkit-transition: 800ms -webkit-filter ease, 800ms filter ease; + transition: 800ms filter ease; +} + +.blurring.dimmed.dimmable > :not(.dimmer) { + -webkit-filter: blur(5px) grayscale(0.7); + filter: blur(5px) grayscale(0.7); +} + +/* Dimmer Color */ + +.blurring.dimmable > .dimmer { + background-color: rgba(0, 0, 0, 0.6); +} + +.blurring.dimmable > .inverted.dimmer { + background-color: rgba(255, 255, 255, 0.6); +} + +/*-------------- + Aligned +---------------*/ + +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} + +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.dimmer { + background-color: rgba(255, 255, 255, 0.85); +} + +.ui.inverted.dimmer > .content > * { + color: #ffffff; +} + +/*-------------- + Simple +---------------*/ + +/* Displays without javascript */ + +.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, 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, 0.85); +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + User Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: box-shadow 0.1s ease, width 0.1s ease; + transition: box-shadow 0.1s ease, width 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; + 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.71428571rem 1.14285714rem !important; + font-size: 1rem; + text-transform: none; + font-weight: normal; + 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 .menu > .input { + width: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin: 1.14285714rem 0.71428571rem; + 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.71428571rem 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% !important; + right: auto !important; + 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.71428571rem; +} + +/*-------------- + Image +---------------*/ + +.ui.dropdown > .text > img, +.ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > .image, +.ui.dropdown .menu > .item > img { + display: inline-block; + vertical-align: middle; + width: auto; + 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.7142em; + background: #ffffff; + display: inline-block; + padding: 0.78571429em 2.6em 0.78571429em 1em; + color: rgba(0, 0, 0, 0.87); + box-shadow: none; + border: 1px solid rgba(34, 36, 38, 0.15); + border-radius: 0.28571429rem; + -webkit-transition: box-shadow 0.1s ease, width 0.1s ease; + transition: box-shadow 0.1s ease, width 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; + top: auto; + width: auto; + z-index: 3; + margin: -0.78571429em; + padding: 0.78571429em; + right: 1em; + 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; + 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.71428571rem 1.14285714rem; +} + +@media only screen and (max-width: 767px) { + .ui.selection.dropdown .menu { + max-height: 7.58571429rem; + } +} + +@media only screen and (min-width: 768px) { + .ui.selection.dropdown .menu { + max-height: 10.11428571rem; + } +} + +@media only screen and (min-width: 992px) { + .ui.selection.dropdown .menu { + max-height: 15.17142857rem; + } +} + +@media only screen and (min-width: 1920px) { + .ui.selection.dropdown .menu { + max-height: 20.22857143rem; + } +} + +/* Menu Item */ + +.ui.selection.dropdown .menu > .item { + border-top: 1px solid #fafafa; + padding: 0.71428571rem 1.14285714rem !important; + white-space: normal; + word-wrap: normal; +} + +/* Hover */ + +.ui.selection.dropdown:hover { + border-color: rgba(34, 36, 38, 0.35); + box-shadow: none; +} + +/* Active */ + +.ui.selection.active.dropdown { + border-color: #96c8da; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +.ui.selection.active.dropdown .menu { + border-color: #96c8da; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +/* Focus */ + +.ui.selection.dropdown:focus { + border-color: #96c8da; + box-shadow: none; +} + +.ui.selection.dropdown:focus .menu { + border-color: #96c8da; + 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; + box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); +} + +.ui.selection.active.dropdown:hover .menu { + border-color: #96c8da; + 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: 1; + z-index: 3; +} + +/* Connecting Border */ + +.ui.active.selection.dropdown { + border-bottom-left-radius: 0em !important; + border-bottom-right-radius: 0em !important; +} + +/*-------------- + Searchable +---------------*/ + +/* Search Selection */ + +.ui.search.dropdown { + min-width: ''; +} + +/* Search Dropdown */ + +.ui.search.dropdown > input.search { + background: none transparent !important; + border: none !important; + box-shadow: none !important; + cursor: pointer; + top: 0em; + left: 0em; + 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; + z-index: 3; +} + +/* Search Selection */ + +.ui.search.selection.dropdown > input.search { + line-height: 1.2142em; + padding: 0.67861429em 2.6em 0.67861429em 1em; +} + +/* 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(0, 0, 0, 0.4) !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: 7.58571429rem; + } +} + +@media only screen and (min-width: 768px) { + .ui.search.dropdown .menu { + max-height: 10.11428571rem; + } +} + +@media only screen and (min-width: 992px) { + .ui.search.dropdown .menu { + max-height: 15.17142857rem; + } +} + +@media only screen and (min-width: 1920px) { + .ui.search.dropdown .menu { + max-height: 20.22857143rem; + } +} + +/*-------------- + Multiple +---------------*/ + +/* Multiple Selection */ + +.ui.multiple.dropdown { + padding: 0.22620476em 2.6em 0.22620476em 0.28571429em; +} + +.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.71428571em; + margin: 0.21428571em 0.28571429rem 0.21428571em 0em; + box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; +} + +/* Dropdown Icon */ + +.ui.multiple.dropdown .dropdown.icon { + margin: 0em -0.71428571em 0em 0em; + padding: 0.5em; +} + +/* Text */ + +.ui.multiple.dropdown > .text { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45240952em 0em 0.45240952em 0.71428571em; + line-height: 1.2142em; +} + +.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.45240952em 0em 0.45240952em 0.71428571em; + line-height: 1.2142em; +} + +.ui.multiple.search.dropdown > .label ~ .text { + display: none; +} + +/* Search */ + +.ui.multiple.search.dropdown > input.search { + position: static; + padding: 0; + max-width: 100%; + margin: 0.45240952em 0em 0.45240952em 0.71428571em; + width: 2.2em; + line-height: 1.2142em; +} + +/*-------------- + Inline +---------------*/ + +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: inherit; +} + +.ui.inline.dropdown .dropdown.icon { + margin: 0em 0.5em 0em 0.25em; + vertical-align: baseline; +} + +.ui.inline.dropdown > .text { + font-weight: bold; +} + +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: 0.25em; + 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); + 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 +---------------------*/ + +/* Positioning */ + +.ui.loading.dropdown > i.icon:before, +.ui.loading.dropdown > i.icon:after { + left: 30% !important; +} + +.ui.loading.dropdown > i.icon { + top: 50% !important; +} + +.ui.multiple.loading.dropdown > i.icon:before, +.ui.multiple.loading.dropdown > i.icon:after { + top: 0% !important; + left: 0% !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%; + 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 > .default.text, +.ui.default.dropdown > .text { + color: rgba(179, 179, 179, 0.7); +} + +.ui.dropdown:hover > .default.text, +.ui.default.dropdown:hover > .text { + color: rgba(179, 179, 179, 0.7); +} + +/*-------------------- + 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; +} + +/*-------------------- + 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; +} + +/*-------------------- + 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; +} + +/* Left Flyout Menu */ + +.ui.dropdown > .left.menu .menu, +.ui.dropdown .menu .left.menu { + left: auto !important; + right: 100% !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 0.71428571rem 0em 0em; +} + +.ui.dropdown .item .left.dropdown.icon, +.ui.dropdown .left.menu .item .dropdown.icon { + width: auto; + float: left; + margin: 0em 0.71428571rem 0em 0em; +} + +.ui.dropdown .item .left.dropdown.icon + .text, +.ui.dropdown .left.menu .item .dropdown.icon + .text { + margin-left: 1em; +} + +/*-------------- + Upward +---------------*/ + +/* Upward Main Menu */ + +.ui.upward.dropdown > .menu { + top: auto; + bottom: 100%; + 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; + box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); +} + +.ui.upward.selection.dropdown:hover { + 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 { + 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 { + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); +} + +.ui.upward.active.selection.dropdown:hover .menu { + 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; + 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; + padding-right: calc( 1.14285714rem + 17px ) !important; +} + +.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: 9.71428571rem; + } +} + +@media only screen and (min-width: 768px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 14.57142857rem; + } +} + +@media only screen and (min-width: 992px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 19.42857143rem; + } +} + +@media only screen and (min-width: 1920px) { + .ui.scrolling.dropdown .menu, + .ui.dropdown .scrolling.menu { + max-height: 19.42857143rem; + } +} + +/*-------------- + 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; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08) !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.71428571rem; + border-radius: 0.28571429rem; +} + +.ui.pointing.dropdown > .menu:after { + display: block; + position: absolute; + pointer-events: none; + content: ''; + visibility: visible; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + width: 0.5em; + height: 0.5em; + box-shadow: -1px -1px 0px 1px 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); + -ms-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.right.pointing.dropdown > .menu:after { + top: -0.25em; + left: auto; + right: 1em; + margin: 0em; + -webkit-transform: rotate(45deg); + -ms-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); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +/* 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); + -ms-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); + -ms-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.upward.pointing.dropdown > .menu, +.ui.upward.top.pointing.dropdown > .menu { + top: auto; + bottom: 100%; + margin: 0em 0em 0.71428571rem; + border-radius: 0.28571429rem; +} + +.ui.upward.pointing.dropdown > .menu:after, +.ui.upward.top.pointing.dropdown > .menu:after { + top: 100%; + bottom: auto; + box-shadow: 1px 1px 0px 1px rgba(34, 36, 38, 0.15); + margin: -0.25em 0em 0em; +} + +/******************************* + Theme Overrides +*******************************/ + +/* Dropdown Carets */ + +@font-face { + font-family: 'Dropdown'; + src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format('truetype'), url("data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") 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' ; +} + +.ui.dropdown .item .left.dropdown.icon:before, +.ui.dropdown .left.menu .item .dropdown.icon:before { + content: "\f0d9" ; +} + +/* Vertical Menu Dropdown */ + +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da" ; +} + +/* Icons for Reference +.dropdown.down.icon { + content: "\f0d7"; +} +.dropdown.up.icon { + content: "\f0d8"; +} +.dropdown.left.icon { + content: "\f0d9"; +} +.dropdown.icon.icon { + content: "\f0da"; +} +*/ + +/******************************* + User Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Video + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Types +*******************************/ + +.ui.embed { + position: relative; + max-width: 100%; + height: 0px; + overflow: hidden; + background: #dcddde; + padding-bottom: 56.25%; +} + +/*----------------- + Embedded Content +------------------*/ + +.ui.embed iframe, +.ui.embed embed, +.ui.embed object { + position: absolute; + border: none; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + margin: 0em; + padding: 0em; +} + +/*----------------- + Embed +------------------*/ + +.ui.embed > .embed { + display: none; +} + +/*-------------- + Placeholder +---------------*/ + +.ui.embed > .placeholder { + position: absolute; + cursor: pointer; + top: 0px; + left: 0px; + display: block; + width: 100%; + height: 100%; + background-color: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); +} + +/*-------------- + Icon +---------------*/ + +.ui.embed > .icon { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 2; +} + +.ui.embed > .icon:after { + position: absolute; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + z-index: 3; + content: ''; + background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); + background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); + opacity: 0.5; + -webkit-transition: opacity 0.5s ease; + transition: opacity 0.5s ease; +} + +.ui.embed > .icon:before { + position: absolute; + top: 50%; + left: 50%; + z-index: 4; + -webkit-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + color: #ffffff; + font-size: 6rem; + text-shadow: 0px 2px 10px rgba(34, 36, 38, 0.2); + -webkit-transition: opacity 0.5s ease, color 0.5s ease; + transition: opacity 0.5s ease, color 0.5s ease; + z-index: 10; +} + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.embed .icon:hover:after { + background: -webkit-radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); + background: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); + opacity: 1; +} + +.ui.embed .icon:hover:before { + color: #ffffff; +} + +/*-------------- + Active +---------------*/ + +.ui.active.embed > .icon, +.ui.active.embed > .placeholder { + display: none; +} + +.ui.active.embed > .embed { + display: block; +} + +/******************************* + Video Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ + +/******************************* + Variations +*******************************/ + +.ui.square.embed { + padding-bottom: 100%; +} + +.ui[class*="4:3"].embed { + padding-bottom: 75%; +} + +.ui[class*="16:9"].embed { + padding-bottom: 56.25%; +} + +.ui[class*="21:9"].embed { + padding-bottom: 42.85714286%; +} +/*! + * # Semantic UI 2.1.7 - Modal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Modal +*******************************/ + +.ui.modal { + display: none; + position: fixed; + z-index: 1001; + top: 50%; + left: 50%; + text-align: left; + background: #ffffff; + border: none; + 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%; + -ms-transform-origin: 50% 25%; + transform-origin: 50% 25%; + 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; + 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.2857em; + 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: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +/* Image */ + +.ui.modal > .content > .image { + display: block; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: ''; + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} + +.ui.modal > [class*="top aligned"] { + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} + +.ui.modal > [class*="middle aligned"] { + -webkit-align-self: middle; + -ms-flex-item-align: middle; + align-self: middle; +} + +.ui.modal > [class*="stretched"] { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +/* Description */ + +.ui.modal > .content > .description { + display: block; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + min-width: 0px; + -webkit-align-self: top; + -ms-flex-item-align: top; + align-self: top; +} + +.ui.modal > .content > .icon + .description, +.ui.modal > .content > .image + .description { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -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 -47.5%; + } +} + +@media only screen and (min-width: 768px) { + .ui.modal { + width: 88%; + margin: 0em 0em 0em -44%; + } +} + +@media only screen and (min-width: 992px) { + .ui.modal { + width: 850px; + margin: 0em 0em 0em -425px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.modal { + width: 900px; + margin: 0em 0em 0em -450px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.modal { + width: 950px; + margin: 0em 0em 0em -475px; + } +} + +/* 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; + -webkit-flex-direction: column; + -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; + 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 { + box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); +} + +/******************************* + Types +*******************************/ + +.ui.basic.modal { + background-color: transparent; + border: none; + border-radius: 0em; + 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); +} + +/* Tablet and Mobile */ + +@media only screen and (max-width: 991px) { + .ui.basic.modal > .close { + color: #ffffff; + } +} + +/******************************* + States +*******************************/ + +.ui.active.modal { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Scrolling +---------------*/ + +/* A modal that cannot fit on the page */ + +.scrolling.dimmable.dimmed { + overflow: hidden; +} + +.scrolling.dimmable.dimmed > .dimmer { + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.scrolling.dimmable > .dimmer { + position: fixed; +} + +.modals.dimmer .ui.scrolling.modal { + position: static !important; + margin: 3.5rem auto !important; +} + +/* 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: 3.5rem !important; +} + +/* Coupling with Sidebar */ + +.undetached.dimmable.dimmed > .pusher { + z-index: auto; +} + +@media only screen and (max-width: 991px) { + .modals.dimmer .ui.scrolling.modal { + margin-top: 1rem !important; + margin-bottom: 1rem !important; + } +} + +/*-------------- + Full Screen +---------------*/ + +.ui.fullscreen.modal { + width: 95% !important; + left: 2.5% !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; +} + +/* 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 -47.5%; + } +} + +@media only screen and (min-width: 768px) { + .ui.small.modal { + width: 70.4%; + margin: 0em 0em 0em -35.2%; + } +} + +@media only screen and (min-width: 992px) { + .ui.small.modal { + width: 680px; + margin: 0em 0em 0em -340px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.small.modal { + width: 720px; + margin: 0em 0em 0em -360px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.small.modal { + width: 760px; + margin: 0em 0em 0em -380px; + } +} + +/* 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 -47.5%; + } +} + +@media only screen and (min-width: 768px) { + .ui.large.modal { + width: 88%; + margin: 0em 0em 0em -44%; + } +} + +@media only screen and (min-width: 992px) { + .ui.large.modal { + width: 1020px; + margin: 0em 0em 0em -510px; + } +} + +@media only screen and (min-width: 1200px) { + .ui.large.modal { + width: 1080px; + margin: 0em 0em 0em -540px; + } +} + +@media only screen and (min-width: 1920px) { + .ui.large.modal { + width: 1140px; + margin: 0em 0em 0em -570px; + } +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Nag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Popup + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); +} + +.ui.popup > .header { + padding: 0em; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1.125em; + line-height: 1.2; + font-weight: bold; +} + +.ui.popup > .header + .content { + padding-top: 0.5em; +} + +.ui.popup:before { + position: absolute; + content: ''; + width: 0.75em; + height: 0.75em; + background: #ffffff; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + z-index: 2; + box-shadow: 1px 1px 0px 0px #bababc; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Spacing +---------------*/ + +.ui.popup { + margin: 0em; +} + +/* Extending from Top */ + +.ui.top.popup { + margin: 0em 0em 0.75em; +} + +.ui.top.left.popup { + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; +} + +.ui.top.center.popup { + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; +} + +.ui.top.right.popup { + -webkit-transform-origin: right bottom; + -ms-transform-origin: right bottom; + transform-origin: right bottom; +} + +/* Extending from Vertical Center */ + +.ui.left.center.popup { + margin: 0em 0.75em 0em 0em; + -webkit-transform-origin: right 50%; + -ms-transform-origin: right 50%; + transform-origin: right 50%; +} + +.ui.right.center.popup { + margin: 0em 0em 0em 0.75em; + -webkit-transform-origin: left 50%; + -ms-transform-origin: left 50%; + transform-origin: left 50%; +} + +/* Extending from Bottom */ + +.ui.bottom.popup { + margin: 0.75em 0em 0em; +} + +.ui.bottom.left.popup { + -webkit-transform-origin: left top; + -ms-transform-origin: left top; + transform-origin: left top; +} + +.ui.bottom.center.popup { + -webkit-transform-origin: center top; + -ms-transform-origin: center top; + transform-origin: center top; +} + +.ui.bottom.right.popup { + -webkit-transform-origin: right top; + -ms-transform-origin: right top; + transform-origin: right top; +} + +/*-------------- + Pointer +---------------*/ + +/*--- Below ---*/ + +.ui.bottom.center.popup:before { + margin-left: -0.325em; + top: -0.325em; + left: 50%; + right: auto; + bottom: auto; + box-shadow: -1px -1px 0px 0px #bababc; +} + +.ui.bottom.left.popup { + margin-left: 0em; +} + +/*rtl:rename*/ + +.ui.bottom.left.popup:before { + top: -0.325em; + left: 1em; + right: auto; + bottom: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #bababc; +} + +.ui.bottom.right.popup { + margin-right: 0em; +} + +/*rtl:rename*/ + +.ui.bottom.right.popup:before { + top: -0.325em; + right: 1em; + bottom: auto; + left: auto; + margin-left: 0em; + box-shadow: -1px -1px 0px 0px #bababc; +} + +/*--- Above ---*/ + +.ui.top.center.popup:before { + top: auto; + right: auto; + bottom: -0.325em; + left: 50%; + margin-left: -0.325em; +} + +.ui.top.left.popup { + margin-left: 0em; +} + +/*rtl:rename*/ + +.ui.top.left.popup:before { + bottom: -0.325em; + 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.325em; + right: 1em; + top: auto; + left: auto; + margin-left: 0em; +} + +/*--- Left Center ---*/ + +/*rtl:rename*/ + +.ui.left.center.popup:before { + top: 50%; + right: -0.325em; + bottom: auto; + left: auto; + margin-top: -0.325em; + box-shadow: 1px -1px 0px 0px #bababc; +} + +/*--- Right Center ---*/ + +/*rtl:rename*/ + +.ui.right.center.popup:before { + top: 50%; + left: -0.325em; + bottom: auto; + right: auto; + margin-top: -0.325em; + 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; + box-shadow: none; +} + +.ui.inverted.popup .header { + background-color: none; + color: #ffffff; +} + +.ui.inverted.popup:before { + background-color: #1b1c1d; + box-shadow: none !important; +} + +/*-------------- + Flowing +---------------*/ + +.ui.flowing.popup { + max-width: none; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.popup { + font-size: 0.71428571rem; +} + +.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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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; + 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Rating + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Rating +*******************************/ + +.ui.rating { + display: -webkit-inline-box; + display: -webkit-inline-flex; + 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; + -webkit-flex: 1 0 auto; + -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.71428571rem; +} + +.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,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtYXCj2pm8AAABHAAAAKRnYXNwAAAAEAAAAcAAAAAIZ2x5ZlJbXMYAAAHIAAARnGhlYWQBGAe5AAATZAAAADZoaGVhA+IB/QAAE5wAAAAkaG10eCzgAEMAABPAAAAAcGxvY2EwXCxOAAAUMAAAADptYXhwACIAnAAAFGwAAAAgbmFtZfC1n04AABSMAAABPHBvc3QAAwAAAAAVyAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxZQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAJAAAAAgACAABAAAAAEAIOYF8AbwDfAj8C7wbvBw8Irwl/Cc8SPxZf/9//8AAAAAACDmAPAE8AzwI/Au8G7wcPCH8JfwnPEj8WT//f//AAH/4xoEEAYQAQ/sD+IPow+iD4wPgA98DvYOtgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAP/tAgAB0wAKABUAAAEvAQ8BFwc3Fyc3BQc3Jz8BHwEHFycCALFPT7GAHp6eHoD/AHAWW304OH1bFnABGRqgoBp8sFNTsHyyOnxYEnFxElh8OgAAAAACAAD/7QIAAdMACgASAAABLwEPARcHNxcnNwUxER8BBxcnAgCxT0+xgB6enh6A/wA4fVsWcAEZGqCgGnywU1OwfLIBHXESWHw6AAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAEAAAAAAgABwAArAAABFA4CBzEHDgMjIi4CLwEuAzU0PgIzMh4CFz4DMzIeAhUCAAcMEgugBgwMDAYGDAwMBqALEgwHFyg2HhAfGxkKChkbHxAeNigXAS0QHxsZCqAGCwkGBQkLBqAKGRsfEB42KBcHDBILCxIMBxcoNh4AAAAAAgAAAAACAAHAACsAWAAAATQuAiMiDgIHLgMjIg4CFRQeAhcxFx4DMzI+Aj8BPgM1DwEiFCIGMTAmIjQjJy4DNTQ+AjMyHgIfATc+AzMyHgIVFA4CBwIAFyg2HhAfGxkKChkbHxAeNigXBwwSC6AGDAwMBgYMDAwGoAsSDAdbogEBAQEBAaIGCgcEDRceEQkREA4GLy8GDhARCREeFw0EBwoGAS0eNigXBwwSCwsSDAcXKDYeEB8bGQqgBgsJBgUJCwagChkbHxA+ogEBAQGiBg4QEQkRHhcNBAcKBjQ0BgoHBA0XHhEJERAOBgABAAAAAAIAAcAAMQAAARQOAgcxBw4DIyIuAi8BLgM1ND4CMzIeAhcHFwc3Jzc+AzMyHgIVAgAHDBILoAYMDAwGBgwMDAagCxIMBxcoNh4KFRMSCC9wQLBwJwUJCgkFHjYoFwEtEB8bGQqgBgsJBgUJCwagChkbHxAeNigXAwUIBUtAoMBAOwECAQEXKDYeAAABAAAAAAIAAbcAKgAAEzQ3NjMyFxYXFhcWFzY3Njc2NzYzMhcWFRQPAQYjIi8BJicmJyYnJicmNQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGBwExPyMkBgYLCgkKCgoKCQoLBgYkIz8/QawFBawCBgUNDg4OFRQTAAAAAQAAAA0B2wHSACYAABM0PwI2FzYfAhYVFA8BFxQVFAcGByYvAQcGByYnJjU0PwEnJjUAEI9BBQkIBkCPEAdoGQMDBgUGgIEGBQYDAwEYaAcBIwsCFoEMAQEMgRYCCwYIZJABBQUFAwEBAkVFAgEBAwUFAwOQZAkFAAAAAAIAAAANAdsB0gAkAC4AABM0PwI2FzYfAhYVFA8BFxQVFAcmLwEHBgcmJyY1ND8BJyY1HwEHNxcnNy8BBwAQj0EFCQgGQI8QB2gZDAUGgIEGBQYDAwEYaAc/WBVsaxRXeDY2ASMLAhaBDAEBDIEWAgsGCGSQAQUNAQECRUUCAQEDBQUDA5BkCQURVXg4OHhVEW5uAAABACMAKQHdAXwAGgAANzQ/ATYXNh8BNzYXNh8BFhUUDwEGByYvASY1IwgmCAwLCFS8CAsMCCYICPUIDAsIjgjSCwkmCQEBCVS7CQEBCSYJCg0H9gcBAQePBwwAAAEAHwAfAXMBcwAsAAA3ND8BJyY1ND8BNjMyHwE3NjMyHwEWFRQPARcWFRQPAQYjIi8BBwYjIi8BJjUfCFRUCAgnCAwLCFRUCAwLCCcICFRUCAgnCAsMCFRUCAsMCCcIYgsIVFQIDAsIJwgIVFQICCcICwwIVFQICwwIJwgIVFQICCcIDAAAAAACAAAAJQFJAbcAHwArAAA3NTQ3NjsBNTQ3NjMyFxYdATMyFxYdARQHBiMhIicmNTczNTQnJiMiBwYdAQAICAsKJSY1NCYmCQsICAgIC/7tCwgIW5MWFR4fFRZApQsICDc0JiYmJjQ3CAgLpQsICAgIC8A3HhYVFRYeNwAAAQAAAAcBbgG3ACEAADcRNDc2NzYzITIXFhcWFREUBwYHBiMiLwEHBiMiJyYnJjUABgUKBgYBLAYGCgUGBgUKBQcOCn5+Cg4GBgoFBicBcAoICAMDAwMICAr+kAoICAQCCXl5CQIECAgKAAAAAwAAACUCAAFuABgAMQBKAAA3NDc2NzYzMhcWFxYVFAcGBwYjIicmJyY1MxYXFjMyNzY3JicWFRQHBiMiJyY1NDcGBzcUFxYzMjc2NTQ3NjMyNzY1NCcmIyIHBhUABihDREtLREMoBgYoQ0RLS0RDKAYlJjk5Q0M5OSYrQREmJTU1JSYRQSuEBAQGBgQEEREZBgQEBAQGJBkayQoKQSgoKChBCgoKCkEoJycoQQoKOiMjIyM6RCEeIjUmJSUmNSIeIUQlBgQEBAQGGBIRBAQGBgQEGhojAAAABQAAAAkCAAGJACwAOABRAGgAcAAANzQ3Njc2MzIXNzYzMhcWFxYXFhcWFxYVFDEGBwYPAQYjIicmNTQ3JicmJyY1MxYXNyYnJjU0NwYHNxQXFjMyNzY1NDc2MzI3NjU0JyYjIgcGFRc3Njc2NyYnNxYXFhcWFRQHBgcGBwYjPwEWFRQHBgcABitBQU0ZGhADBQEEBAUFBAUEBQEEHjw8Hg4DBQQiBQ0pIyIZBiUvSxYZDg4RQSuEBAQGBgQEEREZBgQEBAQGJBkaVxU9MzQiIDASGxkZEAYGCxQrODk/LlACFxYlyQsJQycnBRwEAgEDAwIDAwIBAwUCNmxsNhkFFAMFBBUTHh8nCQtKISgSHBsfIh4hRCUGBAQEBAYYEhEEBAYGBAQaGiPJJQUiIjYzISASGhkbCgoKChIXMRsbUZANCyghIA8AAAMAAAAAAbcB2wA5AEoAlAAANzU0NzY7ATY3Njc2NzY3Njc2MzIXFhcWFRQHMzIXFhUUBxYVFAcUFRQHFgcGKwEiJyYnJisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzMyFxYXFhcWFxYXFhcWOwEyNTQnNjc2NTQnNjU0JyYnNjc2NTQnJisBNDc2NTQnJiMGBwYHBgcGBwYHBgcGBwYHBgcGBwYrARUACwoQTgodEQ4GBAMFBgwLDxgTEwoKDjMdFhYOAgoRARkZKCUbGxsjIQZSEAoLJQUFCAcGBQUGBwgFBUkJBAUFBAQHBwMDBwcCPCUjNwIJBQUFDwMDBAkGBgsLDmUODgoJGwgDAwYFDAYQAQUGAwQGBgYFBgUGBgQJSbcPCwsGJhUPCBERExMMCgkJFBQhGxwWFR4ZFQoKFhMGBh0WKBcXBgcMDAoLDxIHBQYGBQcIBQYGBQgSAQEBAQICAQEDAgEULwgIBQoLCgsJDhQHCQkEAQ0NCg8LCxAdHREcDQ4IEBETEw0GFAEHBwUECAgFBQUFAgO3AAADAAD/2wG3AbcAPABNAJkAADc1NDc2OwEyNzY3NjsBMhcWBxUWFRQVFhUUBxYVFAcGKwEWFRQHBgcGIyInJicmJyYnJicmJyYnIyInJjU3FBcWMzI3NjU0JyYjIgcGFRczMhcWFxYXFhcWFxYXFhcWFxYXFhcWFzI3NjU0JyY1MzI3NjU0JyYjNjc2NTQnNjU0JyYnNjU0JyYrASIHIgcGBwYHBgcGIwYrARUACwoQUgYhJRsbHiAoGRkBEQoCDhYWHTMOCgoTExgPCwoFBgIBBAMFDhEdCk4QCgslBQUIBwYFBQYHCAUFSQkEBgYFBgUGBgYEAwYFARAGDAUGAwMIGwkKDg5lDgsLBgYJBAMDDwUFBQkCDg4ZJSU8AgcHAwMHBwQEBQUECbe3DwsKDAwHBhcWJwIWHQYGExYKChUZHhYVHRoiExQJCgsJDg4MDAwNBg4WJQcLCw+kBwUGBgUHCAUGBgUIpAMCBQYFBQcIBAUHBwITBwwTExERBw0OHBEdHRALCw8KDQ0FCQkHFA4JCwoLCgUICBgMCxUDAgEBAgMBAQG3AAAAAQAAAA0A7gHSABQAABM0PwI2FxEHBgcmJyY1ND8BJyY1ABCPQQUJgQYFBgMDARhoBwEjCwIWgQwB/oNFAgEBAwUFAwOQZAkFAAAAAAIAAAAAAgABtwAqAFkAABM0NzYzMhcWFxYXFhc2NzY3Njc2MzIXFhUUDwEGIyIvASYnJicmJyYnJjUzFB8BNzY1NCcmJyYnJicmIyIHBgcGBwYHBiMiJyYnJicmJyYjIgcGBwYHBgcGFQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGByU1pqY1BgYJCg4NDg0PDhIRDg8KCgcFCQkFBwoKDw4REg4PDQ4NDgoJBgYBMT8jJAYGCwoJCgoKCgkKCwYGJCM/P0GsBQWsAgYFDQ4ODhUUEzA1oJ82MBcSEgoLBgcCAgcHCwsKCQgHBwgJCgsLBwcCAgcGCwoSEhcAAAACAAAABwFuAbcAIQAoAAA3ETQ3Njc2MyEyFxYXFhURFAcGBwYjIi8BBwYjIicmJyY1PwEfAREhEQAGBQoGBgEsBgYKBQYGBQoFBw4Kfn4KDgYGCgUGJZIZef7cJwFwCggIAwMDAwgICv6QCggIBAIJeXkJAgQICAoIjRl0AWP+nQAAAAABAAAAJQHbAbcAMgAANzU0NzY7ATU0NzYzMhcWHQEUBwYrASInJj0BNCcmIyIHBh0BMzIXFh0BFAcGIyEiJyY1AAgIC8AmJjQ1JiUFBQgSCAUFFhUfHhUWHAsICAgIC/7tCwgIQKULCAg3NSUmJiU1SQgFBgYFCEkeFhUVFh43CAgLpQsICAgICwAAAAIAAQANAdsB0gAiAC0AABM2PwI2MzIfAhYXFg8BFxYHBiMiLwEHBiMiJyY/AScmNx8CLwE/AS8CEwEDDJBABggJBUGODgIDCmcYAgQCCAMIf4IFBgYEAgEZaQgC7hBbEgINSnkILgEBJggCFYILC4IVAggICWWPCgUFA0REAwUFCo9lCQipCTBmEw1HEhFc/u0AAAADAAAAAAHJAbcAFAAlAHkAADc1NDc2OwEyFxYdARQHBisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzU0NzYzNjc2NzY3Njc2NzY3Njc2NzY3NjMyFxYXFhcWFxYXFhUUFRQHBgcGBxQHBgcGBzMyFxYVFAcWFRYHFgcGBxYHBgcjIicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQFBQgGDw8OFAkFBAQBAQMCAQIEBAYFBw4KCgcHBQQCAwEBAgMDAgYCAgIBAU8XEBAQBQEOBQUECwMREiYlExYXDAwWJAoHBQY3twcGBQUGB7cIBQUFBQgkBwYFBQYHCAUGBgUIJLcHBQYBEBATGQkFCQgGBQwLBgcICQUGAwMFBAcHBgYICQQEBwsLCwYGCgIDBAMCBBEQFhkSDAoVEhAREAsgFBUBBAUEBAcMAQUFCAAAAAADAAD/2wHJAZIAFAAlAHkAADcUFxYXNxY3Nj0BNCcmBycGBwYdATc0NzY3FhcWFRQHBicGJyY1FzU0NzY3Fjc2NzY3NjcXNhcWBxYXFgcWBxQHFhUUBwYHJxYXFhcWFRYXFhcWFRQVFAcGBwYHBgcGBwYnBicmJyYnJicmJyYnJicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQGBQcKJBYMDBcWEyUmEhEDCwQFBQ4BBRAQEBdPAQECAgIGAgMDAgEBAwIEBQcHCgoOBwUGBAQCAQIDAQEEBAUJFA4PDwYIBQWlBwYFAQEBBwQJtQkEBwEBAQUGB7eTBwYEAQEEBgcJBAYBAQYECZS4BwYEAgENBwUCBgMBAQEXEyEJEhAREBcIDhAaFhEPAQEFAgQCBQELBQcKDAkIBAUHCgUGBwgDBgIEAQEHBQkIBwUMCwcECgcGCRoREQ8CBgQIAAAAAQAAAAEAAJth57dfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAAAAAAoAFAAeAEoAcACKAMoBQAGIAcwCCgJUAoICxgMEAzoDpgRKBRgF7AYSBpgG2gcgB2oIGAjOAAAAAQAAABwAmgAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype'), url("data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+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: 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: '\f006'; +} + +/* 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Search + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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.2142em; + padding: 0.67861429em 1em; + font-size: 1em; + background: #ffffff; + border: 1px solid rgba(34, 36, 38, 0.15); + color: rgba(0, 0, 0, 0.87); + box-shadow: 0em 0em 0em 0em transparent inset; + -webkit-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; +} + +.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; + -ms-transform-origin: center top; + transform-origin: center top; + background: #ffffff; + margin-top: 0.5em; + width: 18em; + border-radius: 0.28571429rem; + box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08); + 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.14285em 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; + 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; + 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); +} + +/******************************* + 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; +} + +/* Category */ + +.ui.category.search > .results .category { + background: #f3f4f5; + box-shadow: none; + 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; +} + +/* 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 */ + +.ui.category.search > .results .category .result { + background: #ffffff; + margin-left: 100px; + border-left: 1px solid rgba(34, 36, 38, 0.15); + 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; +} + +.ui.category.search > .results .category:last-child .result:last-child { + border-bottom: none; +} + +/* Category Result Name */ + +.ui.category.search > .results .category > .name { + width: 100px; + background: transparent; + font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-size: 1em; + float: 1em; + float: left; + padding: 0.4em 1em; + font-weight: bold; + color: rgba(0, 0, 0, 0.4); +} + +/******************************* + 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.71428571em; +} + +.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; +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Shape + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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: -webkit-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; +} + +.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); + 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: -webkit-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; +} + +.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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Sidebar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Sidebar +*******************************/ + +/* Sidebar Menu */ + +.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: 0em !important; + margin: 0em !important; + overflow-y: auto !important; + z-index: 102; +} + +/* GPU Layers for Child Elements */ + +.ui.sidebar > * { + -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: 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: 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 { + box-shadow: 0px 0px 20px rgba(34, 36, 38, 0.15); +} + +.ui.top.visible.sidebar, +.ui.bottom.visible.sidebar { + 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 +---------------*/ + +/* + iOS incorrectly sizes document when content + is presented outside of view with 2Dtranslate +*/ + +html.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} + +html.ios, +html.ios body { + height: initial !important; +} + +/******************************* + 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: 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; + -ms-transform: none !important; + transform: none !important; +} + +/*-------------- + Push +---------------*/ + +/* Initial */ + +.ui.push.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: 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: 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: 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: 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: 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%; + -ms-transform-origin: 75% 50%; + transform-origin: 75% 50%; +} + +.ui.scale.down.right.sidebar ~ .pusher { + -webkit-transform-origin: 25% 50%; + -ms-transform-origin: 25% 50%; + transform-origin: 25% 50%; +} + +.ui.scale.down.top.sidebar ~ .pusher { + -webkit-transform-origin: 50% 75%; + -ms-transform-origin: 50% 75%; + transform-origin: 50% 75%; +} + +.ui.scale.down.bottom.sidebar ~ .pusher { + -webkit-transform-origin: 50% 25%; + -ms-transform-origin: 50% 25%; + transform-origin: 50% 25%; +} + +/* Animation */ + +.ui.animating.scale.down > .visible.ui.sidebar { + -webkit-transition: -webkit-transform 500ms ease; + transition: 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); + -ms-transform: scale(0.75); + transform: scale(0.75); +} + +/******************************* + Theme Overrides +*******************************/ + +/******************************* + Site Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Sticky + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * 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 +*******************************/ +/*! + * # Semantic UI 2.1.7 - Tab + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + UI Tabs +*******************************/ + +.ui.tab { + display: none; +} + +/******************************* + States +*******************************/ + +/*-------------------- + Active +---------------------*/ + +.ui.tab.active, +.ui.tab.open { + display: block; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.tab.loading { + position: relative; + overflow: hidden; + display: block; + min-height: 250px; +} + +.ui.tab.loading * { + position: relative !important; + left: -10000px !important; +} + +.ui.tab.loading:before, +.ui.tab.loading.segment:before { + position: absolute; + content: ''; + top: 100px; + left: 50%; + margin: -1.25em 0em 0em -1.25em; + width: 2.5em; + height: 2.5em; + border-radius: 500rem; + border: 0.2em solid rgba(0, 0, 0, 0.1); +} + +.ui.tab.loading:after, +.ui.tab.loading.segment:after { + position: absolute; + content: ''; + top: 100px; + left: 50%; + margin: -1.25em 0em 0em -1.25em; + width: 2.5em; + height: 2.5em; + -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; + box-shadow: 0px 0px 0px 1px transparent; +} + +/******************************* + Tab Overrides +*******************************/ + +/******************************* + User Overrides +*******************************/ +/*! + * # Semantic UI 2.1.7 - Transition + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Transitions +*******************************/ + +.transition { + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 300ms; + animation-duration: 300ms; + -webkit-animation-timing-function: ease; + animation-timing-function: ease; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +/******************************* + States +*******************************/ + +/* Animating */ + +.animating.transition { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + visibility: visible !important; +} + +/* Loading */ + +.loading.transition { + position: absolute; + top: -99999px; + left: -99999px; +} + +/* Hidden */ + +.hidden.transition { + display: none; + visibility: hidden; +} + +/* Visible */ + +.visible.transition { + display: block !important; + visibility: visible !important; + /* backface-visibility: @backfaceVisibility; + transform: @use3DAcceleration;*/ +} + +/* Disabled */ + +.disabled.transition { + -webkit-animation-play-state: paused; + animation-play-state: paused; +} + +/******************************* + Variations +*******************************/ + +.looping.transition { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/******************************* + Transitions +*******************************/ + +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css + + Additional transitions adapted from Glide + by Nick Pettit - https://github.com/nickpettit/glide +*/ + +/*-------------- + Browse +---------------*/ + +.transition.browse { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; +} + +.transition.browse.in { + -webkit-animation-name: browseIn; + animation-name: browseIn; +} + +.transition.browse.out, +.transition.browse.left.out { + -webkit-animation-name: browseOutLeft; + animation-name: browseOutLeft; +} + +.transition.browse.right.out { + -webkit-animation-name: browseOutRight; + animation-name: browseOutRight; +} + +/* In */ + +@-webkit-keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} + +@keyframes browseIn { + 0% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + + 10% { + -webkit-transform: scale(0.8) translateZ(0px); + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + + 80% { + -webkit-transform: scale(1.05) translateZ(0px); + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + + 100% { + -webkit-transform: scale(1) translateZ(0px); + transform: scale(1) translateZ(0px); + z-index: 999; + } +} + +/* Out */ + +@-webkit-keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + + 80% { + opacity: 1; + } + + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +@keyframes browseOutLeft { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + + 50% { + z-index: -1; + -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + + 80% { + opacity: 1; + } + + 100% { + z-index: -1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +@-webkit-keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + + 80% { + opacity: 1; + } + + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +@keyframes browseOutRight { + 0% { + z-index: 999; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + + 50% { + z-index: 1; + -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + + 80% { + opacity: 1; + } + + 100% { + z-index: 1; + -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + +/*-------------- + Drop +---------------*/ + +.drop.transition { + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; + -webkit-animation-duration: 400ms; + animation-duration: 400ms; + -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); + animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); +} + +.drop.transition.in { + -webkit-animation-name: dropIn; + animation-name: dropIn; +} + +.drop.transition.out { + -webkit-animation-name: dropOut; + animation-name: dropOut; +} + +/* Drop */ + +@-webkit-keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes dropIn { + 0% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@-webkit-keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} + +@keyframes dropOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + } +} + +/*-------------- + Fade +---------------*/ + +.transition.fade.in { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +.transition[class*="fade up"].in { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; +} + +.transition[class*="fade down"].in { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +.transition[class*="fade left"].in { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; +} + +.transition[class*="fade right"].in { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; +} + +.transition.fade.out { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +.transition[class*="fade up"].out { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} + +.transition[class*="fade down"].out { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +.transition[class*="fade left"].out { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; +} + +.transition[class*="fade right"].out { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; +} + +/* In */ + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(10%); + transform: translateY(10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-10%); + transform: translateY(-10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } +} + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(10%); + transform: translateX(10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(-10%); + transform: translateX(-10%); + } + + 100% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } +} + +/* Out */ + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(5%); + transform: translateY(5%); + } +} + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0%); + transform: translateY(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-5%); + transform: translateY(-5%); + } +} + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(5%); + transform: translateX(5%); + } +} + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0%); + transform: translateX(0%); + } + + 100% { + opacity: 0; + -webkit-transform: translateX(-5%); + transform: translateX(-5%); + } +} + +/*-------------- + Flips +---------------*/ + +.flip.transition.in, +.flip.transition.out { + -webkit-animation-duration: 600ms; + animation-duration: 600ms; +} + +.horizontal.flip.transition.in { + -webkit-animation-name: horizontalFlipIn; + animation-name: horizontalFlipIn; +} + +.horizontal.flip.transition.out { + -webkit-animation-name: horizontalFlipOut; + animation-name: horizontalFlipOut; +} + +.vertical.flip.transition.in { + -webkit-animation-name: verticalFlipIn; + animation-name: verticalFlipIn; +} + +.vertical.flip.transition.out { + -webkit-animation-name: verticalFlipOut; + animation-name: verticalFlipOut; +} + +/* In */ + +@-webkit-keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} + +@keyframes horizontalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateY(-90deg); + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} + +@-webkit-keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} + +@keyframes verticalFlipIn { + 0% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + + 100% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} + +/* Out */ + +@-webkit-keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} + +@keyframes horizontalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateY(0deg); + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(2000px) rotateY(90deg); + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} + +@-webkit-keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} + +@keyframes verticalFlipOut { + 0% { + -webkit-transform: perspective(2000px) rotateX(0deg); + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(2000px) rotateX(-90deg); + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} + +/*-------------- + Scale +---------------*/ + +.scale.transition.in { + -webkit-animation-name: scaleIn; + animation-name: scaleIn; +} + +.scale.transition.out { + -webkit-animation-name: scaleOut; + animation-name: scaleOut; +} + +@-webkit-keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes scaleIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* Out */ + +@-webkit-keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +@keyframes scaleOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +/*-------------- + Fly +---------------*/ + +/* Inward */ + +.transition.fly { + -webkit-animation-duration: 0.6s; + animation-duration: 0.6s; + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.transition.fly.in { + -webkit-animation-name: flyIn; + animation-name: flyIn; +} + +.transition[class*="fly up"].in { + -webkit-animation-name: flyInUp; + animation-name: flyInUp; +} + +.transition[class*="fly down"].in { + -webkit-animation-name: flyInDown; + animation-name: flyInDown; +} + +.transition[class*="fly left"].in { + -webkit-animation-name: flyInLeft; + animation-name: flyInLeft; +} + +.transition[class*="fly right"].in { + -webkit-animation-name: flyInRight; + animation-name: flyInRight; +} + +/* Outward */ + +.transition.fly.out { + -webkit-animation-name: flyOut; + animation-name: flyOut; +} + +.transition[class*="fly up"].out { + -webkit-animation-name: flyOutUp; + animation-name: flyOutUp; +} + +.transition[class*="fly down"].out { + -webkit-animation-name: flyOutDown; + animation-name: flyOutDown; +} + +.transition[class*="fly left"].out { + -webkit-animation-name: flyOutLeft; + animation-name: flyOutLeft; +} + +.transition[class*="fly right"].out { + -webkit-animation-name: flyOutRight; + animation-name: flyOutRight; +} + +/* In */ + +@-webkit-keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes flyIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@-webkit-keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes flyInUp { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, 1500px, 0); + transform: translate3d(0, 1500px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@-webkit-keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes flyInDown { + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -1500px, 0); + transform: translate3d(0, -1500px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@-webkit-keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes flyInLeft { + 0% { + opacity: 0; + -webkit-transform: translate3d(1500px, 0, 0); + transform: translate3d(1500px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@-webkit-keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +@keyframes flyInRight { + 0% { + opacity: 0; + -webkit-transform: translate3d(-1500px, 0, 0); + transform: translate3d(-1500px, 0, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + + 100% { + -webkit-transform: none; + transform: none; + } +} + +/* Out */ + +@-webkit-keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +@keyframes flyOut { + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + + 50%, 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } +} + +@-webkit-keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@keyframes flyOutUp { + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } +} + +@-webkit-keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes flyOutDown { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@-webkit-keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@keyframes flyOutRight { + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } +} + +@-webkit-keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +@keyframes flyOutLeft { + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } +} + +/*-------------- + Slide +---------------*/ + +.transition.slide.in, +.transition[class*="slide down"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} + +.transition[class*="slide up"].in { + -webkit-animation-name: slideInY; + animation-name: slideInY; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} + +.transition[class*="slide left"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} + +.transition[class*="slide right"].in { + -webkit-animation-name: slideInX; + animation-name: slideInX; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +.transition.slide.out, +.transition[class*="slide down"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} + +.transition[class*="slide up"].out { + -webkit-animation-name: slideOutY; + animation-name: slideOutY; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} + +.transition[class*="slide left"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} + +.transition[class*="slide right"].out { + -webkit-animation-name: slideOutX; + animation-name: slideOutX; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +/* In */ + +@-webkit-keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} + +@keyframes slideInY { + 0% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} + +@-webkit-keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} + +@keyframes slideInX { + 0% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } + + 100% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } +} + +/* Out */ + +@-webkit-keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} + +@keyframes slideOutY { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + } +} + +@-webkit-keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} + +@keyframes slideOutX { + 0% { + opacity: 1; + -webkit-transform: scaleX(1); + transform: scaleX(1); + } + + 100% { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0); + } +} + +/*-------------- + Swing +---------------*/ + +.transition.swing { + -webkit-animation-duration: 800ms; + animation-duration: 800ms; +} + +.transition[class*="swing down"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} + +.transition[class*="swing up"].in { + -webkit-animation-name: swingInX; + animation-name: swingInX; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} + +.transition[class*="swing left"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} + +.transition[class*="swing right"].in { + -webkit-animation-name: swingInY; + animation-name: swingInY; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +.transition.swing.out, +.transition[class*="swing down"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: top center; + -ms-transform-origin: top center; + transform-origin: top center; +} + +.transition[class*="swing up"].out { + -webkit-animation-name: swingOutX; + animation-name: swingOutX; + -webkit-transform-origin: bottom center; + -ms-transform-origin: bottom center; + transform-origin: bottom center; +} + +.transition[class*="swing left"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center right; + -ms-transform-origin: center right; + transform-origin: center right; +} + +.transition[class*="swing right"].out { + -webkit-animation-name: swingOutY; + animation-name: swingOutY; + -webkit-transform-origin: center left; + -ms-transform-origin: center left; + transform-origin: center left; +} + +/* In */ + +@-webkit-keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} + +@keyframes swingInX { + 0% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + + 60% { + -webkit-transform: perspective(1000px) rotateX(15deg); + transform: perspective(1000px) rotateX(15deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + + 100% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } +} + +@-webkit-keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} + +@keyframes swingInY { + 0% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + + 40% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + + 60% { + -webkit-transform: perspective(1000px) rotateY(-17.5deg); + transform: perspective(1000px) rotateY(-17.5deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + + 100% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } +} + +/* Out */ + +@-webkit-keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} + +@keyframes swingOutX { + 0% { + -webkit-transform: perspective(1000px) rotateX(0deg); + transform: perspective(1000px) rotateX(0deg); + } + + 40% { + -webkit-transform: perspective(1000px) rotateX(-7.5deg); + transform: perspective(1000px) rotateX(-7.5deg); + } + + 60% { + -webkit-transform: perspective(1000px) rotateX(17.5deg); + transform: perspective(1000px) rotateX(17.5deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateX(-30deg); + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(1000px) rotateX(90deg); + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} + +@-webkit-keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} + +@keyframes swingOutY { + 0% { + -webkit-transform: perspective(1000px) rotateY(0deg); + transform: perspective(1000px) rotateY(0deg); + } + + 40% { + -webkit-transform: perspective(1000px) rotateY(7.5deg); + transform: perspective(1000px) rotateY(7.5deg); + } + + 60% { + -webkit-transform: perspective(1000px) rotateY(-10deg); + transform: perspective(1000px) rotateY(-10deg); + } + + 80% { + -webkit-transform: perspective(1000px) rotateY(30deg); + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + + 100% { + -webkit-transform: perspective(1000px) rotateY(-90deg); + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} + +/******************************* + Static Animations +*******************************/ + +/*-------------- + Emphasis +---------------*/ + +.flash.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: flash; + animation-name: flash; +} + +.shake.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: shake; + animation-name: shake; +} + +.bounce.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: bounce; + animation-name: bounce; +} + +.tada.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: tada; + animation-name: tada; +} + +.pulse.transition { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; + -webkit-animation-name: pulse; + animation-name: pulse; +} + +.jiggle.transition { + -webkit-animation-duration: 750ms; + animation-duration: 750ms; + -webkit-animation-name: jiggle; + animation-name: jiggle; +} + +/* Flash */ + +@-webkit-keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +/* Shake */ + +@-webkit-keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +@keyframes shake { + 0%, 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translateX(10px); + transform: translateX(10px); + } +} + +/* Bounce */ + +@-webkit-keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + + 60% { + -webkit-transform: translateY(-15px); + transform: translateY(-15px); + } +} + +/* Tada */ + +@-webkit-keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +@keyframes tada { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 10%, 20% { + -webkit-transform: scale(0.9) rotate(-3deg); + transform: scale(0.9) rotate(-3deg); + } + + 30%, 50%, 70%, 90% { + -webkit-transform: scale(1.1) rotate(3deg); + transform: scale(1.1) rotate(3deg); + } + + 40%, 60%, 80% { + -webkit-transform: scale(1.1) rotate(-3deg); + transform: scale(1.1) rotate(-3deg); + } + + 100% { + -webkit-transform: scale(1) rotate(0); + transform: scale(1) rotate(0); + } +} + +/* Pulse */ + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } + + 50% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + opacity: 0.7; + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} + +/* Rubberband */ + +@-webkit-keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes jiggle { + 0% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + + 100% { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +/******************************* + Site Overrides +*******************************/ \ No newline at end of file diff --git a/semantic/semantic.js b/semantic/semantic.js new file mode 100755 index 0000000..b6904b6 --- /dev/null +++ b/semantic/semantic.js @@ -0,0 +1,21465 @@ + /* + * # Semantic UI - 2.1.7 + * https://github.com/Semantic-Org/Semantic-UI + * http://www.semantic-ui.com/ + * + * Copyright 2014 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/*! + * # Semantic UI 2.1.7 - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +;(function ( $, window, document, undefined ) { + +$.site = $.fn.site = function(parameters) { + var + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.site.settings, parameters) + : $.extend({}, $.site.settings), + + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $document = $(document), + $module = $document, + element = this, + instance = $module.data(moduleNamespace), + + module, + returnedValue + ; + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function() { + module.fix.console(); + module.fix.requestAnimationFrame(); + }, + + fix: { + console: function() { + module.debug('Normalizing window.console'); + if (console === undefined || console.log === undefined) { + module.verbose('Console not available, normalizing events'); + module.disable.console(); + } + if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') { + module.verbose('Console group not available, normalizing events'); + window.console.group = function() {}; + window.console.groupEnd = function() {}; + window.console.groupCollapsed = function() {}; + } + if (typeof console.markTimeline == 'undefined') { + module.verbose('Mark timeline not available, normalizing events'); + window.console.markTimeline = function() {}; + } + }, + consoleClear: function() { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function() {}; + }, + requestAnimationFrame: function() { + module.debug('Normalizing requestAnimationFrame'); + if(window.requestAnimationFrame === undefined) { + module.debug('RequestAnimationFrame not available, normalizing event'); + window.requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + } + } + }, + + moduleExists: function(name) { + return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); + }, + + enabled: { + modules: function(modules) { + var + enabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(module.moduleExists(name)) { + enabledModules.push(name); + } + }); + return enabledModules; + } + }, + + disabled: { + modules: function(modules) { + var + disabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(!module.moduleExists(name)) { + disabledModules.push(name); + } + }); + return disabledModules; + } + }, + + change: { + setting: function(setting, value, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? (modules === 'all') + ? settings.modules + : [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + namespace = (module.moduleExists(name)) + ? $.fn[name].settings.namespace || false + : true, + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', setting, value, name); + $.fn[name].settings[setting] = value; + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 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 ); + +/*! + * # Semantic UI 2.1.7 - Form Validation + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.form = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + legacyParameters = arguments[1], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + $allModules + .each(function() { + var + $module = $(this), + element = this, + + formErrors = [], + keyHeldDown = false, + + // set at run-time + $field, + $group, + $message, + $prompt, + $submit, + $clear, + $reset, + + settings, + validation, + + metadata, + selector, + className, + error, + + namespace, + moduleNamespace, + eventNamespace, + + instance, + module + ; + + module = { + + initialize: function() { + + // settings grabbed at run time + module.get.settings(); + if(methodInvoked) { + if(instance === undefined) { + module.instantiate(); + } + module.invoke(query); + } + else { + module.verbose('Initializing form validation', $module, settings); + module.bindEvents(); + module.set.defaults(); + module.instantiate(); + } + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', instance); + module.removeEvents(); + $module + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + module.verbose('Refreshing selector cache'); + $field = $module.find(selector.field); + $group = $module.find(selector.group); + $message = $module.find(selector.message); + $prompt = $module.find(selector.prompt); + + $submit = $module.find(selector.submit); + $clear = $module.find(selector.clear); + $reset = $module.find(selector.reset); + }, + + submit: function() { + module.verbose('Submitting form', $module); + $module + .submit() + ; + }, + + attachEvents: function(selector, action) { + action = action || 'submit'; + $(selector) + .on('click' + eventNamespace, function(event) { + module[action](); + event.preventDefault(); + }) + ; + }, + + bindEvents: function() { + module.verbose('Attaching form events'); + $module + .on('submit' + eventNamespace, module.validate.form) + .on('blur' + eventNamespace, selector.field, module.event.field.blur) + .on('click' + eventNamespace, selector.submit, module.submit) + .on('click' + eventNamespace, selector.reset, module.reset) + .on('click' + eventNamespace, selector.clear, module.clear) + ; + if(settings.keyboardShortcuts) { + $module + .on('keydown' + eventNamespace, selector.field, module.event.field.keydown) + ; + } + $field + .each(function() { + var + $input = $(this), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) + ; + $(this) + .on(inputEvent + eventNamespace, module.event.field.change) + ; + }) + ; + }, + + clear: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue) || '', + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('clear'); + } + else if(isCheckbox) { + $field.prop('checked', false); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(''); + } + }) + ; + }, + + reset: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(defaultValue === undefined) { + return; + } + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + $prompt.remove(); + } + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('restore defaults'); + } + else if(isCheckbox) { + module.verbose('Resetting checkbox value', $element, defaultValue); + $field.prop('checked', defaultValue); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(defaultValue); + } + }) + ; + }, + + is: { + bracketedRule: function(rule) { + return (rule.type && rule.type.match(settings.regExp.bracket)); + }, + valid: function() { + var + allValid = true + ; + module.verbose('Checking if form is valid'); + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field, fieldName) ) ) { + allValid = false; + } + }); + return allValid; + } + }, + + removeEvents: function() { + $module + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + $submit + .off(eventNamespace) + ; + $field + .off(eventNamespace) + ; + }, + + event: { + field: { + keydown: function(event) { + var + $field = $(this), + key = event.which, + keyCode = { + enter : 13, + escape : 27 + } + ; + if( key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $field + .blur() + ; + } + if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).length > 0 ) { + if(!keyHeldDown) { + $field + .one('keyup' + eventNamespace, module.event.field.keyup) + ; + module.submit(); + module.debug('Enter pressed on input submitting form'); + } + keyHeldDown = true; + } + }, + keyup: function() { + keyHeldDown = false; + }, + blur: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group), + validationRules = module.get.validation($field) + ; + if( $fieldGroup.hasClass(className.error) ) { + module.debug('Revalidating field', $field, validationRules); + module.validate.form.call(module, event, true); + } + else if(settings.on == 'blur' || settings.on == 'change') { + if(validationRules) { + module.validate.field( validationRules ); + } + } + }, + change: function(event) { + var + $field = $(this), + $fieldGroup = $field.closest($group) + ; + if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + module.debug('Revalidating field', $field, module.get.validation($field)); + module.validate.form.call(module, event, true); + }, settings.delay); + } + } + } + + }, + + get: { + ancillaryValue: function(rule) { + if(!rule.type || !module.is.bracketedRule(rule)) { + return false; + } + return rule.type.match(settings.regExp.bracket)[1] + ''; + }, + ruleName: function(rule) { + if( module.is.bracketedRule(rule) ) { + return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], ''); + } + return rule.type; + }, + changeEvent: function(type, $input) { + if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) { + return 'change'; + } + else { + return module.get.inputEvent(); + } + }, + inputEvent: function() { + return (document.createElement('input').oninput !== undefined) + ? 'input' + : (document.createElement('input').onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + }, + prompt: function(rule, field) { + var + ruleName = module.get.ruleName(rule), + ancillary = module.get.ancillaryValue(rule), + prompt = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule, + requiresValue = (prompt.search('{value}') !== -1), + requiresName = (prompt.search('{name}') !== -1), + $label, + $field, + name + ; + if(requiresName || requiresValue) { + $field = module.get.field(field.identifier); + } + if(requiresValue) { + prompt = prompt.replace('{value}', $field.val()); + } + if(requiresName) { + $label = $field.closest(selector.group).find('label').eq(0); + name = ($label.size() == 1) + ? $label.text() + : $field.prop('placeholder') || settings.text.unspecifiedField + ; + prompt = prompt.replace('{name}', name); + } + prompt = prompt.replace('{identifier}', field.identifier); + prompt = prompt.replace('{ruleValue}', ancillary); + if(!rule.prompt) { + module.verbose('Using default validation prompt for type', prompt, ruleName); + } + return prompt; + }, + settings: function() { + if($.isPlainObject(parameters)) { + var + keys = Object.keys(parameters), + isLegacySettings = (keys.length > 0) + ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined) + : false, + ruleKeys + ; + if(isLegacySettings) { + // 1.x (ducktyped) + settings = $.extend(true, {}, $.fn.form.settings, legacyParameters); + validation = $.extend({}, $.fn.form.settings.defaults, parameters); + module.error(settings.error.oldSyntax, element); + module.verbose('Extending settings from legacy parameters', validation, settings); + } + else { + // 2.x + if(parameters.fields) { + ruleKeys = Object.keys(parameters.fields); + if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) { + $.each(parameters.fields, function(name, rules) { + if(typeof rules == 'string') { + rules = [rules]; + } + parameters.fields[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + parameters.fields[name].rules.push({ type: rule }); + }); + }); + } + } + + settings = $.extend(true, {}, $.fn.form.settings, parameters); + validation = $.extend({}, $.fn.form.settings.defaults, settings.fields); + module.verbose('Extending settings', validation, settings); + } + } + else { + settings = $.fn.form.settings; + validation = $.fn.form.settings.defaults; + module.verbose('Using default form validation', validation, settings); + } + + // shorthand + namespace = settings.namespace; + metadata = settings.metadata; + selector = settings.selector; + className = settings.className; + error = settings.error; + moduleNamespace = 'module-' + namespace; + eventNamespace = '.' + namespace; + + // grab instance + instance = $module.data(moduleNamespace); + + // refresh selector cache + module.refresh(); + }, + field: function(identifier) { + module.verbose('Finding field with identifier', identifier); + if( $field.filter('#' + identifier).length > 0 ) { + return $field.filter('#' + identifier); + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return $field.filter('[name="' + identifier +'"]'); + } + else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) { + return $field.filter('[name="' + identifier +'[]"]'); + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); + } + return $(''); + }, + 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(isChecked) { + values[name] = value; + } + } + 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); + 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; + } + + }, + + add: { + 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: { + 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.is.valid() ) { + 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) { + var + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), + 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 && $.trim($field.val()) === ''){ + module.debug('Field is optional and empty. Skipping', identifier); + 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) { + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); + } + else { + 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.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({ + '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: { + 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-]*[a-z0-9])?", + 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} cannot contain "{ruleValue}"', + containExactly : '{name} cannot contain exactly "{ruleValue}"', + doesntContain : '{name} must contain "{ruleValue}"', + doesntContainExactly : '{name} must 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 = '

' + value + '

'; + 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){ + var + emailRegExp = new RegExp($.fn.form.settings.regExp.email, 'i') + ; + return emailRegExp.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) { + 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; + } + + // 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 ); + +/*! + * # Semantic UI 2.1.7 - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.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); + 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); + $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) { + 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.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({ + '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', + + 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 + onOpen : function(){}, // callback after open animation + onClosing : function(){}, // callback before closing 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 ); + + +/*! + * # Semantic UI 2.1.7 - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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('Modfying z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modfying 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.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + 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 = $('').insertAfter($input); + module.debug('Creating label', $label); + } + } + }, + + has: { + label: function() { + return ($label.length > 0); + } + }, + + bind: { + events: function() { + module.verbose('Attaching checkbox events'); + $module + .on('click' + eventNamespace, module.event.click) + .on('keydown' + eventNamespace, selector.input, module.event.keydown) + .on('keyup' + eventNamespace, selector.input, module.event.keyup) + ; + } + }, + + unbind: { + events: function() { + module.debug('Removing events'); + $module + .off(eventNamespace) + ; + } + }, + + uncheckOthers: function() { + var + $radios = module.get.otherRadios() + ; + module.debug('Unchecking other radios', $radios); + $radios.removeClass(className.checked); + }, + + toggle: function() { + if( !module.can.change() ) { + if(!module.is.radio()) { + module.debug('Checkbox is read-only or disabled, ignoring toggle'); + } + return; + } + if( module.is.indeterminate() || module.is.unchecked() ) { + module.debug('Currently unchecked'); + module.check(); + } + else if( module.is.checked() && module.can.uncheck() ) { + module.debug('Currently checked'); + module.uncheck(); + } + }, + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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.checkbox.settings = { + + name : 'Checkbox', + namespace : 'checkbox', + + debug : false, + verbose : true, + performance : true, + + // delegated event context + uncheckable : 'auto', + fireOnInit : false, + + onChange : function(){}, + + beforeChecked : function(){}, + beforeUnchecked : function(){}, + beforeDeterminate : function(){}, + beforeIndeterminate : function(){}, + + onChecked : function(){}, + onUnchecked : function(){}, + + onDeterminate : function() {}, + onIndeterminate : function() {}, + + onEnable : function(){}, + onDisable : function(){}, + + className : { + checked : 'checked', + indeterminate : 'indeterminate', + disabled : 'disabled', + hidden : 'hidden', + radio : 'radio', + readOnly : 'read-only' + }, + + error : { + method : 'The method you called is not defined' + }, + + selector : { + checkbox : '.ui.checkbox', + label : 'label, .box', + input : 'input[type="checkbox"], input[type="radio"]', + link : 'a[href]' + } + +}; + +})( jQuery, window, document ); + +/*! + * # Semantic UI 2.1.7 - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.dimmer = function(parameters) { + var + $allModules = $(this), + + 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.dimmer.settings, parameters) + : $.extend({}, $.fn.dimmer.settings), + + selector = settings.selector, + namespace = settings.namespace, + className = settings.className, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + clickEvent = ('ontouchstart' in document.documentElement) + ? 'touchstart' + : 'click', + + $module = $(this), + $dimmer, + $dimmable, + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + preinitialize: function() { + if( module.is.dimmer() ) { + + $dimmable = $module.parent(); + $dimmer = $module; + } + else { + $dimmable = $module; + if( module.has.dimmer() ) { + if(settings.dimmerName) { + $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); + } + else { + $dimmer = $dimmable.find(selector.dimmer); + } + } + else { + $dimmer = module.create(); + } + } + }, + + initialize: function() { + module.debug('Initializing dimmer', settings); + + module.bind.events(); + module.set.dimmable(); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', $dimmer); + module.unbind.events(); + module.remove.variation(); + $dimmable + .off(eventNamespace) + ; + }, + + bind: { + events: function() { + if(settings.on == 'hover') { + $dimmable + .on('mouseenter' + eventNamespace, module.show) + .on('mouseleave' + eventNamespace, module.hide) + ; + } + else if(settings.on == 'click') { + $dimmable + .on(clickEvent + eventNamespace, module.toggle) + ; + } + if( module.is.page() ) { + module.debug('Setting as a page dimmer', $dimmable); + module.set.pageDimmer(); + } + + if( module.is.closable() ) { + module.verbose('Adding dimmer close event', $dimmer); + $dimmable + .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) + ; + } + } + }, + + unbind: { + events: function() { + $module + .removeData(moduleNamespace) + ; + } + }, + + event: { + click: function(event) { + module.verbose('Determining if event occured on dimmer', event); + if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { + module.hide(); + event.stopImmediatePropagation(); + } + } + }, + + addContent: function(element) { + var + $content = $(element) + ; + module.debug('Add content to dimmer', $content); + if($content.parent()[0] !== $dimmer[0]) { + $content.detach().appendTo($dimmer); + } + }, + + create: function() { + var + $element = $( settings.template.dimmer() ) + ; + if(settings.variation) { + module.debug('Creating dimmer with variation', settings.variation); + $element.addClass(settings.variation); + } + if(settings.dimmerName) { + module.debug('Creating named dimmer', settings.dimmerName); + $element.addClass(settings.dimmerName); + } + $element + .appendTo($dimmable) + ; + return $element; + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Showing dimmer', $dimmer, settings); + if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { + module.animate.show(callback); + settings.onShow.call(element); + settings.onChange.call(element); + } + else { + module.debug('Dimmer is already shown or disabled'); + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.dimmed() || module.is.animating() ) { + module.debug('Hiding dimmer', $dimmer); + module.animate.hide(callback); + settings.onHide.call(element); + settings.onChange.call(element); + } + else { + module.debug('Dimmer is not visible'); + } + }, + + toggle: function() { + module.verbose('Toggling dimmer visibility', $dimmer); + if( !module.is.dimmed() ) { + module.show(); + } + else { + module.hide(); + } + }, + + animate: { + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + if(settings.opacity !== 'auto') { + module.set.opacity(); + } + $dimmer + .transition({ + animation : settings.transition + ' in', + queue : false, + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { + module.set.dimmed(); + }, + onComplete : function() { + module.set.active(); + callback(); + } + }) + ; + } + else { + module.verbose('Showing dimmer animation with javascript'); + module.set.dimmed(); + if(settings.opacity == 'auto') { + settings.opacity = 0.8; + } + $dimmer + .stop() + .css({ + opacity : 0, + width : '100%', + height : '100%' + }) + .fadeTo(module.get.duration(), settings.opacity, function() { + $dimmer.removeAttr('style'); + module.set.active(); + callback(); + }) + ; + } + }, + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + module.verbose('Hiding dimmer with css'); + $dimmer + .transition({ + animation : settings.transition + ' out', + queue : false, + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { + module.remove.dimmed(); + }, + onComplete : function() { + module.remove.active(); + callback(); + } + }) + ; + } + else { + module.verbose('Hiding dimmer with javascript'); + module.remove.dimmed(); + $dimmer + .stop() + .fadeOut(module.get.duration(), function() { + module.remove.active(); + $dimmer.removeAttr('style'); + callback(); + }) + ; + } + } + }, + + get: { + dimmer: function() { + return $dimmer; + }, + duration: function() { + if(typeof settings.duration == 'object') { + if( module.is.active() ) { + return settings.duration.hide; + } + else { + return settings.duration.show; + } + } + return settings.duration; + } + }, + + has: { + dimmer: function() { + if(settings.dimmerName) { + return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0); + } + else { + return ( $module.find(selector.dimmer).length > 0 ); + } + } + }, + + is: { + active: function() { + return $dimmer.hasClass(className.active); + }, + animating: function() { + return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) ); + }, + closable: function() { + if(settings.closable == 'auto') { + if(settings.on == 'hover') { + return false; + } + return true; + } + return settings.closable; + }, + dimmer: function() { + return $module.hasClass(className.dimmer); + }, + dimmable: function() { + return $module.hasClass(className.dimmable); + }, + dimmed: function() { + return $dimmable.hasClass(className.dimmed); + }, + disabled: function() { + return $dimmable.hasClass(className.disabled); + }, + enabled: function() { + return !module.is.disabled(); + }, + page: function () { + return $dimmable.is('body'); + }, + pageDimmer: function() { + return $dimmer.hasClass(className.pageDimmer); + } + }, + + can: { + show: function() { + return !$dimmer.hasClass(className.disabled); + } + }, + + set: { + opacity: function(opacity) { + var + color = $dimmer.css('background-color'), + colorArray = color.split(','), + isRGBA = (colorArray && colorArray.length == 4) + ; + opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity; + if(isRGBA) { + colorArray[3] = opacity + ')'; + color = colorArray.join(','); + } + else { + color = 'rgba(0, 0, 0, ' + opacity + ')'; + } + module.debug('Setting opacity to', opacity); + $dimmer.css('background-color', color); + }, + active: function() { + $dimmer.addClass(className.active); + }, + dimmable: function() { + $dimmable.addClass(className.dimmable); + }, + dimmed: function() { + $dimmable.addClass(className.dimmed); + }, + pageDimmer: function() { + $dimmer.addClass(className.pageDimmer); + }, + disabled: function() { + $dimmer.addClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.addClass(variation); + } + } + }, + + remove: { + active: function() { + $dimmer + .removeClass(className.active) + ; + }, + dimmed: function() { + $dimmable.removeClass(className.dimmed); + }, + disabled: function() { + $dimmer.removeClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.removeClass(variation); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', 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({ + '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 { + 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; + } + }; + + module.preinitialize(); + + 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.dimmer.settings = { + + name : 'Dimmer', + namespace : 'dimmer', + + debug : false, + verbose : false, + performance : true, + + // name to distinguish between multiple dimmers in context + dimmerName : false, + + // whether to add a variation type + variation : false, + + // whether to bind close events + closable : 'auto', + + // whether to use css animations + useCSS : true, + + // css animation to use + transition : 'fade', + + // event to bind to + on : false, + + // overriding opacity value + opacity : 'auto', + + // transition durations + duration : { + show : 500, + hide : 500 + }, + + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, + + error : { + method : 'The method you called is not defined.' + }, + + className : { + active : 'active', + animating : 'animating', + dimmable : 'dimmable', + dimmed : 'dimmed', + dimmer : 'dimmer', + disabled : 'disabled', + hide : 'hide', + pageDimmer : 'page', + show : 'show' + }, + + selector: { + dimmer : '> .ui.dimmer', + content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' + }, + + template: { + dimmer: function() { + return $('

').attr('class', 'ui dimmer'); + } + } + +}; + +})( jQuery, window, document ); +/*! + * # Semantic UI 2.1.7 - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.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), + $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, + elementNamespace, + id, + selectObserver, + menuObserver, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing dropdown', settings); + + if( module.is.alreadySetup() ) { + module.setup.reference(); + } + else { + module.setup.layout(); + 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) + ; + if(selectObserver) { + selectObserver.disconnect(); + } + if(menuObserver) { + menuObserver.disconnect(); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + selectObserver = new MutationObserver(function(mutations) { + module.debug('') + .addClass(className.search) + .prop('autocomplete', 'off') + .insertBefore($text) + ; + } + 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); + module.refresh(); + module.setup.returnedObject(); + // invoke method in context of current instance + if(methodInvoked) { + instance = module; + module.invoke(query); + } + }, + 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(); + }, + + 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) + ; + $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.active() ) { + module.debug('Showing dropdown'); + if(module.is.multiple() && !module.has.search() && module.is.allFiltered()) { + return true; + } + if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) { + module.remove.message(); + } + if(settings.onShow.call(element) !== false) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + module.set.visible(); + callback.call(element); + }); + } + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.active() ) { + 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, 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('click' + eventNamespace, selector.search, module.show) + .on('focus' + 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, selector.icon, module.event.icon.click) + .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('mousedown' + eventNamespace, module.event.mousedown) + .on('mouseup' + eventNamespace, module.event.mouseup) + .on('focus' + eventNamespace, module.event.focus) + .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(); + } + module.select.firstUnfiltered(); + if( module.has.allResultsFiltered() ) { + if( settings.onNoResults.call(element, searchTerm) ) { + if(!settings.allowAdditions) { + 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.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() { + afterFiltered(); + }); + } + else { + module.error(error.noAPI); + } + } + else { + module.filterItems(searchTerm); + afterFiltered(); + } + }, + + queryRemote: function(query, callback) { + var + apiSettings = { + errorDuration : false, + 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) { + module.remove.message(); + module.setup.menu({ + values: response[fields.remoteValues] + }); + 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.regExp(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 && 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 && 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; + }, + + filterActive: function() { + if(settings.useLabels) { + $item.filter('.' + className.active) + .addClass(className.filtered) + ; + } + }, + + focusSearch: function() { + if( module.is.search() && !module.is.focusedOnSearch() ) { + $search[0].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.size() > 0) + ; + if( module.has.query() ) { + if(hasSelected) { + module.debug('Forcing partial selection to selected item', $selectedItem); + module.event.item.click.call($selectedItem); + return; + } + else { + module.remove.searchTerm(); + } + } + module.hide(); + }, + + 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(); + } + }, + click: function(event) { + var + $target = $(event.target) + ; + // focus search + if($target.is($module) && !module.is.focusedOnSearch()) { + module.focusSearch(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(!activated && !pageLostFocus) { + module.remove.activeLabel(); + module.hide(); + } + }, + // prevents focus callback from occurring on mousedown + mousedown: function() { + activated = true; + }, + mouseup: function() { + activated = false; + }, + search: { + focus: function() { + activated = true; + if(module.is.multiple()) { + module.remove.activeLabel(); + } + if(settings.showOnFocus) { + module.search(); + module.show(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(!itemActivated && !pageLostFocus) { + if(module.is.multiple()) { + module.remove.activeLabel(); + module.hide(); + } + else if(settings.forceSelection) { + module.forceSelection(); + } + else { + module.hide(); + } + } + else if(pageLostFocus) { + if(settings.forceSelection) { + module.forceSelection(); + } + } + } + }, + icon: { + click: function(event) { + module.toggle(); + event.stopPropagation(); + } + }, + 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.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); + } + }, + menu: { + mousedown: function() { + itemActivated = true; + }, + mouseup: function() { + itemActivated = false; + } + }, + item: { + mouseenter: function(event) { + var + $subMenu = $(this).children(selector.menu), + $otherMenus = $(this).siblings(selector.item).children(selector.menu) + ; + if( $subMenu.length > 0 ) { + clearTimeout(module.itemTimer); + module.itemTimer = setTimeout(function() { + module.verbose('Showing sub-menu', $subMenu); + $.each($otherMenus, function() { + module.animate.hide(false, $(this)); + }); + module.animate.show(false, $subMenu); + }, settings.delay.show); + event.preventDefault(); + } + }, + mouseleave: function(event) { + var + $subMenu = $(this).children(selector.menu) + ; + if($subMenu.length > 0) { + clearTimeout(module.itemTimer); + module.itemTimer = setTimeout(function() { + module.verbose('Hiding sub-menu', $subMenu); + module.animate.hide(false, $subMenu); + }, settings.delay.hide); + } + }, + touchend: function() { + }, + click: function (event) { + var + $choice = $(this), + $target = (event) + ? $(event.target) + : $(''), + $subMenu = $choice.find(selector.menu), + text = module.get.choiceText($choice), + value = module.get.choiceValue($choice, text), + hasSubMenu = ($subMenu.length > 0), + isBubbledEvent = ($subMenu.find($target).length > 0) + ; + if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) { + if(!settings.useLabels) { + module.remove.filteredItem(); + module.remove.searchTerm(); + module.set.scrollPosition($choice); + } + module.determine.selectAction.call(this, text, value); + } + } + }, + + document: { + // label selection should occur even when element has no focus + keydown: function(event) { + var + pressedKey = event.which, + isShortcutKey = module.is.inObject(pressedKey, keys) + ; + if(isShortcutKey) { + var + $label = $module.find(selector.label), + $activeLabel = $label.filter('.' + className.active), + activeValue = $activeLabel.data(metadata.value), + labelIndex = $label.index($activeLabel), + labelCount = $label.length, + hasActiveLabel = ($activeLabel.length > 0), + hasMultipleActive = ($activeLabel.length > 1), + isFirstLabel = (labelIndex === 0), + isLastLabel = (labelIndex + 1 == labelCount), + isSearch = module.is.searchSelection(), + isFocusedOnSearch = module.is.focusedOnSearch(), + isFocused = module.is.focused(), + caretAtStart = (isFocusedOnSearch && module.get.caretPosition() === 0), + $nextLabel + ; + if(isSearch && !hasActiveLabel && !isFocusedOnSearch) { + return; + } + + if(pressedKey == keys.leftArrow) { + // activate previous label + if((isFocused || caretAtStart) && !hasActiveLabel) { + module.verbose('Selecting previous label'); + $label.last().addClass(className.active); + } + else if(hasActiveLabel) { + if(!event.shiftKey) { + module.verbose('Selecting previous label'); + $label.removeClass(className.active); + } + else { + module.verbose('Adding previous label to selection'); + } + if(isFirstLabel && !hasMultipleActive) { + $activeLabel.addClass(className.active); + } + else { + $activeLabel.prev(selector.siblingLabel) + .addClass(className.active) + .end() + ; + } + event.preventDefault(); + } + } + else if(pressedKey == keys.rightArrow) { + // activate first label + if(isFocused && !hasActiveLabel) { + $label.first().addClass(className.active); + } + // activate next label + if(hasActiveLabel) { + if(!event.shiftKey) { + module.verbose('Selecting next label'); + $label.removeClass(className.active); + } + else { + module.verbose('Adding next label to selection'); + } + if(isLastLabel) { + if(isSearch) { + if(!isFocusedOnSearch) { + module.focusSearch(); + } + else { + $label.removeClass(className.active); + } + } + else if(hasMultipleActive) { + $activeLabel.next(selector.siblingLabel).addClass(className.active); + } + else { + $activeLabel.addClass(className.active); + } + } + else { + $activeLabel.next(selector.siblingLabel).addClass(className.active); + } + event.preventDefault(); + } + } + else if(pressedKey == keys.deleteKey || pressedKey == keys.backspace) { + if(hasActiveLabel) { + module.verbose('Removing active labels'); + if(isLastLabel) { + if(isSearch && !isFocusedOnSearch) { + module.focusSearch(); + } + } + $activeLabel.last().next(selector.siblingLabel).addClass(className.active); + module.remove.activeLabels($activeLabel); + event.preventDefault(); + } + else if(caretAtStart && !hasActiveLabel && pressedKey == keys.backspace) { + module.verbose('Removing last label on input backspace'); + $activeLabel = $label.last().addClass(className.active); + module.remove.activeLabels($activeLabel); + } + } + else { + $activeLabel.removeClass(className.active); + } + } + } + }, + + keydown: function(event) { + var + pressedKey = event.which, + isShortcutKey = module.is.inObject(pressedKey, keys) + ; + if(isShortcutKey) { + var + $currentlySelected = $item.not(selector.unselectable).filter('.' + className.selected).eq(0), + $activeItem = $menu.children('.' + className.active).eq(0), + $selectedItem = ($currentlySelected.length > 0) + ? $currentlySelected + : $activeItem, + $visibleItems = ($selectedItem.length > 0) + ? $selectedItem.siblings(':not(.' + className.filtered +')').andSelf() + : $menu.children(':not(.' + className.filtered +')'), + $subMenu = $selectedItem.children(selector.menu), + $parentMenu = $selectedItem.closest(selector.menu), + inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating) || $parentMenu.parent(selector.menu).length > 0), + hasSubMenu = ($subMenu.length> 0), + hasSelectedItem = ($selectedItem.length > 0), + selectedIsSelectable = ($selectedItem.not(selector.unselectable).length > 0), + delimiterPressed = (pressedKey == keys.delimiter && settings.allowAdditions && module.is.multiple()), + $nextItem, + isSubMenuItem, + newIndex + ; + // visible menu keyboard shortcuts + if( module.is.visible() ) { + + // enter (select or open sub-menu) + if(pressedKey == keys.enter || delimiterPressed) { + if(pressedKey == keys.enter && hasSelectedItem && hasSubMenu && !settings.allowCategorySelection) { + module.verbose('Pressed enter on unselectable category, opening sub menu'); + pressedKey = keys.rightArrow; + } + else if(selectedIsSelectable) { + module.verbose('Selecting item from keyboard shortcut', $selectedItem); + module.event.item.click.call($selectedItem, event); + if(module.is.searchSelection()) { + module.remove.searchTerm(); + } + } + event.preventDefault(); + } + + // left arrow (hide sub-menu) + if(pressedKey == keys.leftArrow) { + + isSubMenuItem = ($parentMenu[0] !== $menu[0]); + + if(isSubMenuItem) { + module.verbose('Left key pressed, closing sub-menu'); + module.animate.hide(false, $parentMenu); + $selectedItem + .removeClass(className.selected) + ; + $parentMenu + .closest(selector.item) + .addClass(className.selected) + ; + event.preventDefault(); + } + } + + // right arrow (show sub-menu) + if(pressedKey == keys.rightArrow) { + if(hasSubMenu) { + module.verbose('Right key pressed, opening sub-menu'); + module.animate.show(false, $subMenu); + $selectedItem + .removeClass(className.selected) + ; + $subMenu + .find(selector.item).eq(0) + .addClass(className.selected) + ; + event.preventDefault(); + } + } + + // up arrow (traverse menu up) + if(pressedKey == keys.upArrow) { + $nextItem = (hasSelectedItem && inVisibleMenu) + ? $selectedItem.prevAll(selector.item + ':not(' + selector.unselectable + ')').eq(0) + : $item.eq(0) + ; + if($visibleItems.index( $nextItem ) < 0) { + module.verbose('Up key pressed but reached top of current menu'); + event.preventDefault(); + return; + } + else { + module.verbose('Up key pressed, changing active item'); + $selectedItem + .removeClass(className.selected) + ; + $nextItem + .addClass(className.selected) + ; + module.set.scrollPosition($nextItem); + } + event.preventDefault(); + } + + // down arrow (traverse menu down) + if(pressedKey == keys.downArrow) { + $nextItem = (hasSelectedItem && inVisibleMenu) + ? $nextItem = $selectedItem.nextAll(selector.item + ':not(' + selector.unselectable + ')').eq(0) + : $item.eq(0) + ; + if($nextItem.length === 0) { + module.verbose('Down key pressed but reached bottom of current menu'); + event.preventDefault(); + return; + } + else { + module.verbose('Down key pressed, changing active item'); + $item + .removeClass(className.selected) + ; + $nextItem + .addClass(className.selected) + ; + module.set.scrollPosition($nextItem); + } + event.preventDefault(); + } + + // page down (show next page) + if(pressedKey == keys.pageUp) { + module.scrollPage('up'); + event.preventDefault(); + } + if(pressedKey == keys.pageDown) { + module.scrollPage('down'); + event.preventDefault(); + } + + // escape (close menu) + if(pressedKey == keys.escape) { + module.verbose('Escape key pressed, closing dropdown'); + module.hide(); + } + + } + else { + // delimiter key + if(delimiterPressed) { + event.preventDefault(); + } + // down arrow (open menu) + if(pressedKey == keys.downArrow) { + module.verbose('Down key pressed, showing dropdown'); + module.show(); + event.preventDefault(); + } + } + } + else { + if( module.is.selection() && !module.is.search() ) { + module.set.selectedLetter( String.fromCharCode(pressedKey) ); + } + } + } + }, + + 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); + } + } + }, + + determine: { + selectAction: function(text, value) { + module.verbose('Determining action', settings.action); + if( $.isFunction( module.action[settings.action] ) ) { + module.verbose('Triggering preset action', settings.action, text, value); + module.action[ settings.action ].call(this, text, value); + } + else if( $.isFunction(settings.action) ) { + module.verbose('Triggering user action', settings.action, text, value); + settings.action.call(this, text, value); + } + else { + module.error(error.action, settings.action); + } + }, + eventInModule: function(event, callback) { + var + $target = $(event.target), + inDocument = ($target.closest(document.documentElement).length > 0), + inModule = ($target.closest($module).length > 0) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(inDocument && !inModule) { + module.verbose('Triggering event', callback); + callback(); + return true; + } + else { + module.verbose('Event occurred in dropdown, canceling callback'); + return false; + } + }, + eventOnElement: function(event, callback) { + var + $target = $(event.target), + $label = $target.closest(selector.siblingLabel), + notOnLabel = ($module.find($label).length === 0), + notInMenu = ($target.closest($menu).length === 0) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(notOnLabel && notInMenu) { + module.verbose('Triggering event', callback); + callback(); + return true; + } + else { + module.verbose('Event occurred in dropdown menu, canceling callback'); + return false; + } + } + }, + + action: { + + nothing: function() {}, + + activate: function(text, value) { + value = (value !== undefined) + ? value + : text + ; + if( module.can.activate( $(this) ) ) { + module.set.selected(value, $(this)); + if(module.is.multiple() && !module.is.allFiltered()) { + return; + } + else { + module.hideAndClear(); + } + } + }, + + select: function(text, value) { + // mimics action.activate but does not select text + module.action.activate.call(this); + }, + + combo: function(text, value) { + value = (value !== undefined) + ? value + : text + ; + module.set.selected(value, $(this)); + module.hideAndClear(); + }, + + hide: function(text, value) { + module.set.value(value); + module.hideAndClear(); + } + + }, + + get: { + id: function() { + return id; + }, + defaultText: function() { + return $module.data(metadata.defaultText); + }, + defaultValue: function() { + return $module.data(metadata.defaultValue); + }, + placeholderText: function() { + return $module.data(metadata.placeholderText) || ''; + }, + text: function() { + return $text.text(); + }, + query: function() { + return $.trim($search.val()); + }, + searchWidth: function(characterCount) { + return (characterCount * settings.glyphWidth) + 'em'; + }, + selectionCount: function() { + var + values = module.get.values(), + count + ; + count = ( module.is.multiple() ) + ? $.isArray(values) + ? values.length + : 0 + : (module.get.value() !== '') + ? 1 + : 0 + ; + return count; + }, + transition: function($subMenu) { + return (settings.transition == 'auto') + ? module.is.upward($subMenu) + ? 'slide up' + : 'slide down' + : settings.transition + ; + }, + userValues: function() { + var + values = module.get.values() + ; + if(!values) { + return false; + } + values = $.isArray(values) + ? values + : [values] + ; + return $.grep(values, function(value) { + return (module.get.item(value) === false); + }); + }, + uniqueArray: function(array) { + return $.grep(array, function (value, index) { + return $.inArray(value, array) === index; + }); + }, + caretPosition: function() { + var + input = $search.get(0), + range, + rangeLength + ; + if('selectionStart' in input) { + return input.selectionStart; + } + else if (document.selection) { + input.focus(); + range = document.selection.createRange(); + rangeLength = range.text.length; + range.moveStart('character', -input.value.length); + return range.text.length - rangeLength; + } + }, + value: function() { + var + value = ($input.length > 0) + ? $input.val() + : $module.data(metadata.value) + ; + // prevents placeholder element from being selected when multiple + if($.isArray(value) && value.length === 1 && value[0] === '') { + return ''; + } + return value; + }, + values: function() { + var + value = module.get.value() + ; + if(value === '') { + return ''; + } + return ( !module.has.selectInput() && module.is.multiple() ) + ? (typeof value == 'string') // delimited string + ? value.split(settings.delimiter) + : '' + : value + ; + }, + remoteValues: function() { + var + values = module.get.values(), + remoteValues = false + ; + if(values) { + if(typeof values == 'string') { + values = [values]; + } + remoteValues = {}; + $.each(values, function(index, value) { + var + name = module.read.remoteData(value) + ; + module.verbose('Restoring value from session data', name, value); + remoteValues[value] = (name) + ? name + : value + ; + }); + } + return remoteValues; + }, + choiceText: function($choice, preserveHTML) { + preserveHTML = (preserveHTML !== undefined) + ? preserveHTML + : settings.preserveHTML + ; + if($choice) { + if($choice.find(selector.menu).length > 0) { + module.verbose('Retreiving text of element with sub-menu'); + $choice = $choice.clone(); + $choice.find(selector.menu).remove(); + $choice.find(selector.menuIcon).remove(); + } + return ($choice.data(metadata.text) !== undefined) + ? $choice.data(metadata.text) + : (preserveHTML) + ? $.trim($choice.html()) + : $.trim($choice.text()) + ; + } + }, + choiceValue: function($choice, choiceText) { + choiceText = choiceText || module.get.choiceText($choice); + if(!$choice) { + return false; + } + return ($choice.data(metadata.value) !== undefined) + ? String( $choice.data(metadata.value) ) + : (typeof choiceText === 'string') + ? $.trim(choiceText.toLowerCase()) + : String(choiceText) + ; + }, + inputEvent: function() { + var + input = $search[0] + ; + if(input) { + return (input.oninput !== undefined) + ? 'input' + : (input.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + } + return false; + }, + selectValues: function() { + var + select = {} + ; + select.values = []; + $module + .find('option') + .each(function() { + var + $option = $(this), + name = $option.html(), + disabled = $option.attr('disabled'), + value = ( $option.attr('value') !== undefined ) + ? $option.attr('value') + : name + ; + if(settings.placeholder === 'auto' && value === '') { + select.placeholder = name; + } + else { + select.values.push({ + name : name, + value : value, + disabled : disabled + }); + } + }) + ; + if(settings.placeholder && settings.placeholder !== 'auto') { + module.debug('Setting placeholder value to', settings.placeholder); + select.placeholder = settings.placeholder; + } + if(settings.sortSelect) { + select.values.sort(function(a, b) { + return (a.name > b.name) + ? 1 + : -1 + ; + }); + module.debug('Retrieved and sorted values from select', select); + } + else { + module.debug('Retreived values from select', select); + } + return select; + }, + activeItem: function() { + return $item.filter('.' + className.active); + }, + selectedItem: function() { + var + $selectedItem = $item.not(selector.unselectable).filter('.' + className.selected) + ; + return ($selectedItem.length > 0) + ? $selectedItem + : $item.eq(0) + ; + }, + itemWithAdditions: function(value) { + var + $items = module.get.item(value), + $userItems = module.create.userChoice(value), + hasUserItems = ($userItems && $userItems.length > 0) + ; + if(hasUserItems) { + $items = ($items.length > 0) + ? $items.add($userItems) + : $userItems + ; + } + return $items; + }, + item: function(value, strict) { + var + $selectedItem = false, + shouldSearch, + isMultiple + ; + value = (value !== undefined) + ? value + : ( module.get.values() !== undefined) + ? module.get.values() + : module.get.text() + ; + shouldSearch = (isMultiple) + ? (value.length > 0) + : (value !== undefined && value !== null) + ; + isMultiple = (module.is.multiple() && $.isArray(value)); + strict = (value === '' || value === 0) + ? true + : strict || false + ; + if(shouldSearch) { + $item + .each(function() { + var + $choice = $(this), + optionText = module.get.choiceText($choice), + optionValue = module.get.choiceValue($choice, optionText) + ; + // safe early exit + if(optionValue === null || optionValue === undefined) { + return; + } + if(isMultiple) { + if($.inArray( String(optionValue), value) !== -1 || $.inArray(optionText, value) !== -1) { + $selectedItem = ($selectedItem) + ? $selectedItem.add($choice) + : $choice + ; + } + } + else if(strict) { + module.verbose('Ambiguous dropdown value using strict type check', $choice, value); + if( optionValue === value || optionText === value) { + $selectedItem = $choice; + return true; + } + } + else { + if( String(optionValue) == String(value) || optionText == value) { + module.verbose('Found select item by value', optionValue, value); + $selectedItem = $choice; + return true; + } + } + }) + ; + } + return $selectedItem; + } + }, + + check: { + maxSelections: function(selectionCount) { + if(settings.maxSelections) { + selectionCount = (selectionCount !== undefined) + ? selectionCount + : module.get.selectionCount() + ; + if(selectionCount >= settings.maxSelections) { + module.debug('Maximum selection count reached'); + if(settings.useLabels) { + $item.addClass(className.filtered); + module.add.message(message.maxSelections); + } + return true; + } + else { + module.verbose('No longer at maximum selection count'); + module.remove.message(); + module.remove.filteredItem(); + if(module.is.searchSelection()) { + module.filterItems(); + } + return false; + } + } + return true; + } + }, + + restore: { + defaults: function() { + module.clear(); + module.restore.defaultText(); + module.restore.defaultValue(); + }, + defaultText: function() { + var + defaultText = module.get.defaultText(), + placeholderText = module.get.placeholderText + ; + if(defaultText === placeholderText) { + module.debug('Restoring default placeholder text', defaultText); + module.set.placeholderText(defaultText); + } + else { + module.debug('Restoring default text', defaultText); + module.set.text(defaultText); + } + }, + defaultValue: function() { + var + defaultValue = module.get.defaultValue() + ; + if(defaultValue !== undefined) { + module.debug('Restoring default value', defaultValue); + if(defaultValue !== '') { + module.set.value(defaultValue); + module.set.selected(); + } + else { + module.remove.activeItem(); + module.remove.selectedItem(); + } + } + }, + labels: function() { + if(settings.allowAdditions) { + if(!settings.useLabels) { + module.error(error.labels); + settings.useLabels = true; + } + module.debug('Restoring selected values'); + module.create.userLabels(); + } + module.check.maxSelections(); + }, + selected: function() { + module.restore.values(); + if(module.is.multiple()) { + module.debug('Restoring previously selected values and labels'); + module.restore.labels(); + } + else { + module.debug('Restoring previously selected values'); + } + }, + values: function() { + // prevents callbacks from occuring on initial load + module.set.initialLoad(); + if(settings.apiSettings) { + if(settings.saveRemoteData) { + module.restore.remoteValues(); + } + else { + module.clearValue(); + } + } + else { + module.set.selected(); + } + module.remove.initialLoad(); + }, + remoteValues: function() { + var + values = module.get.remoteValues() + ; + module.debug('Recreating selected from session data', values); + if(values) { + if( module.is.single() ) { + $.each(values, function(value, name) { + module.set.text(name); + }); + } + else { + $.each(values, function(value, name) { + module.add.label(value, name); + }); + } + } + } + }, + + read: { + remoteData: function(value) { + var + name + ; + if(window.Storage === undefined) { + module.error(error.noStorage); + return; + } + name = sessionStorage.getItem(value); + return (name !== undefined) + ? name + : false + ; + } + }, + + save: { + defaults: function() { + module.save.defaultText(); + module.save.placeholderText(); + module.save.defaultValue(); + }, + defaultValue: function() { + var + value = module.get.value() + ; + module.verbose('Saving default value as', value); + $module.data(metadata.defaultValue, value); + }, + defaultText: function() { + var + text = module.get.text() + ; + module.verbose('Saving default text as', text); + $module.data(metadata.defaultText, text); + }, + placeholderText: function() { + var + text + ; + if(settings.placeholder !== false && $text.hasClass(className.placeholder)) { + text = module.get.text(); + module.verbose('Saving placeholder text as', text); + $module.data(metadata.placeholderText, text); + } + }, + remoteData: function(name, value) { + if(window.Storage === undefined) { + module.error(error.noStorage); + return; + } + module.verbose('Saving remote data to session storage', value, name); + sessionStorage.setItem(value, name); + } + }, + + clear: function() { + if(module.is.multiple()) { + module.remove.labels(); + } + else { + module.remove.activeItem(); + module.remove.selectedItem(); + } + module.set.placeholderText(); + module.clearValue(); + }, + + clearValue: function() { + module.set.value(''); + }, + + scrollPage: function(direction, $selectedItem) { + var + $currentItem = $selectedItem || module.get.selectedItem(), + $menu = $currentItem.closest(selector.menu), + menuHeight = $menu.outerHeight(), + currentScroll = $menu.scrollTop(), + itemHeight = $item.eq(0).outerHeight(), + itemsPerPage = Math.floor(menuHeight / itemHeight), + maxScroll = $menu.prop('scrollHeight'), + newScroll = (direction == 'up') + ? currentScroll - (itemHeight * itemsPerPage) + : currentScroll + (itemHeight * itemsPerPage), + $selectableItem = $item.not(selector.unselectable), + isWithinRange, + $nextSelectedItem, + elementIndex + ; + elementIndex = (direction == 'up') + ? $selectableItem.index($currentItem) - itemsPerPage + : $selectableItem.index($currentItem) + itemsPerPage + ; + isWithinRange = (direction == 'up') + ? (elementIndex >= 0) + : (elementIndex < $selectableItem.length) + ; + $nextSelectedItem = (isWithinRange) + ? $selectableItem.eq(elementIndex) + : (direction == 'up') + ? $selectableItem.first() + : $selectableItem.last() + ; + if($nextSelectedItem.length > 0) { + module.debug('Scrolling page', direction, $nextSelectedItem); + $currentItem + .removeClass(className.selected) + ; + $nextSelectedItem + .addClass(className.selected) + ; + $menu + .scrollTop(newScroll) + ; + } + }, + + set: { + filtered: function() { + var + isMultiple = module.is.multiple(), + isSearch = module.is.searchSelection(), + isSearchMultiple = (isMultiple && isSearch), + searchValue = (isSearch) + ? module.get.query() + : '', + hasSearchValue = (typeof searchValue === 'string' && searchValue.length > 0), + searchWidth = module.get.searchWidth(searchValue.length), + valueIsSet = searchValue !== '' + ; + if(isMultiple && hasSearchValue) { + module.verbose('Adjusting input width', searchWidth, settings.glyphWidth); + $search.css('width', searchWidth); + } + if(hasSearchValue || (isSearchMultiple && valueIsSet)) { + module.verbose('Hiding placeholder text'); + $text.addClass(className.filtered); + } + else if(!isMultiple || (isSearchMultiple && !valueIsSet)) { + module.verbose('Showing placeholder text'); + $text.removeClass(className.filtered); + } + }, + loading: function() { + $module.addClass(className.loading); + }, + placeholderText: function(text) { + text = text || module.get.placeholderText(); + module.debug('Setting placeholder text', text); + module.set.text(text); + $text.addClass(className.placeholder); + }, + tabbable: function() { + if( module.has.search() ) { + module.debug('Added tabindex to searchable dropdown'); + $search + .val('') + .attr('tabindex', 0) + ; + $menu + .attr('tabindex', -1) + ; + } + else { + module.debug('Added tabindex to dropdown'); + if( $module.attr('tabindex') === undefined) { + $module + .attr('tabindex', 0) + ; + $menu + .attr('tabindex', -1) + ; + } + } + }, + initialLoad: function() { + module.verbose('Setting initial load'); + initialLoad = true; + }, + activeItem: function($item) { + if( settings.allowAdditions && $item.filter(selector.addition).length > 0 ) { + $item.addClass(className.filtered); + } + else { + $item.addClass(className.active); + } + }, + scrollPosition: function($item, forceScroll) { + var + edgeTolerance = 5, + $menu, + hasActive, + offset, + itemHeight, + itemOffset, + menuOffset, + menuScroll, + menuHeight, + abovePage, + belowPage + ; + + $item = $item || module.get.selectedItem(); + $menu = $item.closest(selector.menu); + hasActive = ($item && $item.length > 0); + forceScroll = (forceScroll !== undefined) + ? forceScroll + : false + ; + if($item && $menu.length > 0 && hasActive) { + itemOffset = $item.position().top; + + $menu.addClass(className.loading); + menuScroll = $menu.scrollTop(); + menuOffset = $menu.offset().top; + itemOffset = $item.offset().top; + offset = menuScroll - menuOffset + itemOffset; + if(!forceScroll) { + menuHeight = $menu.height(); + belowPage = menuScroll + menuHeight < (offset + edgeTolerance); + abovePage = ((offset - edgeTolerance) < menuScroll); + } + module.debug('Scrolling to active item', offset); + if(forceScroll || abovePage || belowPage) { + $menu.scrollTop(offset); + } + $menu.removeClass(className.loading); + } + }, + text: function(text) { + if(settings.action !== 'select') { + if(settings.action == 'combo') { + module.debug('Changing combo button text', text, $combo); + if(settings.preserveHTML) { + $combo.html(text); + } + else { + $combo.text(text); + } + } + else { + if(text !== module.get.placeholderText()) { + $text.removeClass(className.placeholder); + } + module.debug('Changing text', text, $text); + $text + .removeClass(className.filtered) + ; + if(settings.preserveHTML) { + $text.html(text); + } + else { + $text.text(text); + } + } + } + }, + selectedLetter: function(letter) { + var + $selectedItem = $item.filter('.' + className.selected), + alreadySelectedLetter = $selectedItem.length > 0 && module.has.firstLetter($selectedItem, letter), + $nextValue = false, + $nextItem + ; + // check next of same letter + if(alreadySelectedLetter) { + $nextItem = $selectedItem.nextAll($item).eq(0); + if( module.has.firstLetter($nextItem, letter) ) { + $nextValue = $nextItem; + } + } + // check all values + if(!$nextValue) { + $item + .each(function(){ + if(module.has.firstLetter($(this), letter)) { + $nextValue = $(this); + return false; + } + }) + ; + } + // set next value + if($nextValue) { + module.verbose('Scrolling to next value with letter', letter); + module.set.scrollPosition($nextValue); + $selectedItem.removeClass(className.selected); + $nextValue.addClass(className.selected); + } + }, + direction: function($menu) { + if(settings.direction == 'auto') { + if(module.is.onScreen($menu)) { + module.remove.upward($menu); + } + else { + module.set.upward($menu); + } + } + else if(settings.direction == 'upward') { + module.set.upward($menu); + } + }, + upward: function($menu) { + var $element = $menu || $module; + $element.addClass(className.upward); + }, + value: function(value, text, $selected) { + var + hasInput = ($input.length > 0), + isAddition = !module.has.value(value), + currentValue = module.get.values(), + stringValue = (value !== undefined) + ? String(value) + : value, + newValue + ; + if(hasInput) { + if(stringValue == currentValue) { + module.verbose('Skipping value update already same value', value, currentValue); + if(!module.is.initialLoad()) { + return; + } + } + + if( module.is.single() && module.has.selectInput() && module.can.extendSelect() ) { + module.debug('Adding user option', value); + module.add.optionValue(value); + } + module.debug('Updating input value', value, currentValue); + internalChange = true; + $input + .val(value) + ; + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.debug('Input native change event ignored on initial load'); + } + else { + module.trigger.change(); + } + internalChange = false; + } + else { + module.verbose('Storing value in metadata', value, $input); + if(value !== currentValue) { + $module.data(metadata.value, stringValue); + } + } + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.verbose('No callback on initial load', settings.onChange); + } + else { + settings.onChange.call(element, value, text, $selected); + } + }, + active: function() { + $module + .addClass(className.active) + ; + }, + multiple: function() { + $module.addClass(className.multiple); + }, + visible: function() { + $module.addClass(className.visible); + }, + exactly: function(value, $selectedItem) { + module.debug('Setting selected to exact values'); + module.clear(); + module.set.selected(value, $selectedItem); + }, + selected: function(value, $selectedItem) { + var + isMultiple = module.is.multiple(), + $userSelectedItem + ; + $selectedItem = (settings.allowAdditions) + ? $selectedItem || module.get.itemWithAdditions(value) + : $selectedItem || module.get.item(value) + ; + if(!$selectedItem) { + return; + } + module.debug('Setting selected menu item to', $selectedItem); + if(module.is.single()) { + module.remove.activeItem(); + module.remove.selectedItem(); + } + else if(settings.useLabels) { + module.remove.selectedItem(); + } + // select each item + $selectedItem + .each(function() { + var + $selected = $(this), + selectedText = module.get.choiceText($selected), + selectedValue = module.get.choiceValue($selected, selectedText), + + isFiltered = $selected.hasClass(className.filtered), + isActive = $selected.hasClass(className.active), + isUserValue = $selected.hasClass(className.addition), + shouldAnimate = (isMultiple && $selectedItem.length == 1) + ; + if(isMultiple) { + if(!isActive || isUserValue) { + if(settings.apiSettings && settings.saveRemoteData) { + module.save.remoteData(selectedText, selectedValue); + } + if(settings.useLabels) { + module.add.value(selectedValue, selectedText, $selected); + module.add.label(selectedValue, selectedText, shouldAnimate); + module.set.activeItem($selected); + module.filterActive(); + module.select.nextAvailable($selectedItem); + } + else { + module.add.value(selectedValue, selectedText, $selected); + module.set.text(module.add.variables(message.count)); + module.set.activeItem($selected); + } + } + else if(!isFiltered) { + module.debug('Selected active value, removing label'); + module.remove.selected(selectedValue); + } + } + else { + if(settings.apiSettings && settings.saveRemoteData) { + module.save.remoteData(selectedText, selectedValue); + } + module.set.text(selectedText); + module.set.value(selectedValue, selectedText, $selected); + $selected + .addClass(className.active) + .addClass(className.selected) + ; + } + }) + ; + } + }, + + add: { + label: function(value, text, shouldAnimate) { + var + $next = module.is.searchSelection() + ? $search + : $text, + $label + ; + $label = $('') + .addClass(className.label) + .attr('data-value', value) + .html(templates.label(value, text)) + ; + $label = settings.onLabelCreate.call($label, value, text); + + if(module.has.label(value)) { + module.debug('Label already exists, skipping', value); + return; + } + if(settings.label.variation) { + $label.addClass(settings.label.variation); + } + if(shouldAnimate === true) { + module.debug('Animating in label', $label); + $label + .addClass(className.hidden) + .insertBefore($next) + .transition(settings.label.transition, settings.label.duration) + ; + } + else { + module.debug('Adding selection label', $label); + $label + .insertBefore($next) + ; + } + }, + message: function(message) { + var + $message = $menu.children(selector.message), + html = settings.templates.message(module.add.variables(message)) + ; + if($message.length > 0) { + $message + .html(html) + ; + } + else { + $message = $('

') + .html(html) + .addClass(className.message) + .appendTo($menu) + ; + } + }, + optionValue: function(value) { + var + $option = $input.find('option[value="' + value + '"]'), + hasOption = ($option.length > 0) + ; + if(hasOption) { + return; + } + // temporarily disconnect observer + if(selectObserver) { + selectObserver.disconnect(); + module.verbose('Temporarily disconnecting mutation observer', value); + } + if( module.is.single() ) { + module.verbose('Removing previous user addition'); + $input.find('option.' + className.addition).remove(); + } + $('

").attr("class","ui dimmer")}}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.dropdown=function(o){var a,r=e(this),s=e(n),c=r.selector||"",l="ontouchstart"in n.documentElement,u=(new Date).getTime(),d=[],m=arguments[0],f="string"==typeof m,g=[].slice.call(arguments,1);return r.each(function(p){var v,h,b,y,x,C,w,k=e.isPlainObject(o)?e.extend(!0,{},e.fn.dropdown.settings,o):e.extend({},e.fn.dropdown.settings),S=k.className,T=k.message,A=k.fields,R=k.keys,E=k.metadata,P=k.namespace,F=k.regExp,D=k.selector,O=k.error,q=k.templates,j="."+P,z="module-"+P,I=e(this),L=e(k.context),N=I.find(D.text),V=I.find(D.search),H=I.find(D.input),M=I.find(D.icon),U=I.prev().find(D.text).length>0?I.prev().find(D.text):I.prev(),W=I.children(D.menu),B=W.find(D.item),Q=!1,X=!1,$=!1,Y=this,Z=I.data(z);w={initialize:function(){w.debug("Initializing dropdown",k),w.is.alreadySetup()?w.setup.reference():(w.setup.layout(),w.refreshData(),w.save.defaults(),w.restore.selected(),w.create.id(),w.bind.events(),w.observeChanges(),w.instantiate())},instantiate:function(){w.verbose("Storing instance of dropdown",w),Z=w,I.data(z,w)},destroy:function(){w.verbose("Destroying previous dropdown",I),w.remove.tabbable(),I.off(j).removeData(z),W.off(j),s.off(b),x&&x.disconnect(),C&&C.disconnect()},observeChanges:function(){"MutationObserver"in t&&(x=new MutationObserver(function(e){w.debug("").addClass(S.search).prop("autocomplete","off").insertBefore(N)),k.allowTab&&w.set.tabbable()},select:function(){var t=w.get.selectValues();w.debug("Dropdown initialized on a select",t),I.is("select")&&(H=I),H.parent(D.dropdown).length>0?(w.debug("UI dropdown already exists. Creating dropdown menu only"),I=H.closest(D.dropdown),w.has.menu()||w.create.menu(),W=I.children(D.menu),w.setup.menu(t)):(w.debug("Creating entire dropdown from select"),I=e("

").attr("class",H.attr("class")).addClass(S.selection).addClass(S.dropdown).html(q.dropdown(t)).insertBefore(H),H.hasClass(S.multiple)&&H.prop("multiple")===!1&&(w.error(O.missingMultiple),H.prop("multiple",!0)),H.is("[multiple]")&&w.set.multiple(),H.prop("disabled")&&(w.debug("Disabling dropdown"),I.addClass(S.disabled)),H.removeAttr("class").detach().prependTo(I)),w.refresh()},menu:function(e){W.html(q.menu(e,A)),B=W.find(D.item)},reference:function(){w.debug("Dropdown behavior was called on select, replacing with closest dropdown"),I=I.parent(D.dropdown),w.refresh(),w.setup.returnedObject(),f&&(Z=w,w.invoke(m))},returnedObject:function(){var e=r.slice(0,p),t=r.slice(p+1);r=e.add(I).add(t)}},refresh:function(){w.refreshSelectors(),w.refreshData()},refreshSelectors:function(){w.verbose("Refreshing selector cache"),N=I.find(D.text),V=I.find(D.search),H=I.find(D.input),M=I.find(D.icon),U=I.prev().find(D.text).length>0?I.prev().find(D.text):I.prev(),W=I.children(D.menu),B=W.find(D.item)},refreshData:function(){w.verbose("Refreshing cached metadata"),B.removeData(E.text).removeData(E.value),I.removeData(E.defaultText).removeData(E.defaultValue).removeData(E.placeholderText)},toggle:function(){w.verbose("Toggling menu visibility"),w.is.active()?w.hide():w.show()},show:function(t){if(t=e.isFunction(t)?t:function(){},w.can.show()&&!w.is.active()){if(w.debug("Showing dropdown"),w.is.multiple()&&!w.has.search()&&w.is.allFiltered())return!0;!w.has.message()||w.has.maxSelections()||w.has.allResultsFiltered()||w.remove.message(),k.onShow.call(Y)!==!1&&w.animate.show(function(){w.can.click()&&w.bind.intent(),w.set.visible(),t.call(Y)})}},hide:function(t){t=e.isFunction(t)?t:function(){},w.is.active()&&(w.debug("Hiding dropdown"),k.onHide.call(Y)!==!1&&w.animate.hide(function(){w.remove.visible(),t.call(Y)}))},hideOthers:function(){w.verbose("Finding other dropdowns to hide"),r.not(I).has(D.menu+"."+S.visible).dropdown("hide")},hideMenu:function(){w.verbose("Hiding menu instantaneously"),w.remove.active(),w.remove.visible(),W.transition("hide")},hideSubMenus:function(){var e=W.children(D.item).find(D.menu);w.verbose("Hiding sub menus",e),e.transition("hide")},bind:{events:function(){l&&w.bind.touchEvents(),w.bind.keyboardEvents(),w.bind.inputEvents(),w.bind.mouseEvents()},touchEvents:function(){w.debug("Touch device detected binding additional touch events"),w.is.searchSelection()||w.is.single()&&I.on("touchstart"+j,w.event.test.toggle),W.on("touchstart"+j,D.item,w.event.item.mouseenter)},keyboardEvents:function(){w.verbose("Binding keyboard events"),I.on("keydown"+j,w.event.keydown),w.has.search()&&I.on(w.get.inputEvent()+j,D.search,w.event.input),w.is.multiple()&&s.on("keydown"+b,w.event.document.keydown)},inputEvents:function(){w.verbose("Binding input change events"),I.on("change"+j,D.input,w.event.change)},mouseEvents:function(){w.verbose("Binding mouse events"),w.is.multiple()&&I.on("click"+j,D.label,w.event.label.click).on("click"+j,D.remove,w.event.remove.click),w.is.searchSelection()?(I.on("mousedown"+j,D.menu,w.event.menu.mousedown).on("mouseup"+j,D.menu,w.event.menu.mouseup).on("click"+j,D.icon,w.event.icon.click).on("click"+j,D.search,w.show).on("focus"+j,D.search,w.event.search.focus).on("blur"+j,D.search,w.event.search.blur).on("click"+j,D.text,w.event.text.focus),w.is.multiple()&&I.on("click"+j,w.event.click)):("click"==k.on?I.on("click"+j,D.icon,w.event.icon.click).on("click"+j,w.event.test.toggle):"hover"==k.on?I.on("mouseenter"+j,w.delay.show).on("mouseleave"+j,w.delay.hide):I.on(k.on+j,w.toggle),I.on("mousedown"+j,w.event.mousedown).on("mouseup"+j,w.event.mouseup).on("focus"+j,w.event.focus).on("blur"+j,w.event.blur)),W.on("mouseenter"+j,D.item,w.event.item.mouseenter).on("mouseleave"+j,D.item,w.event.item.mouseleave).on("click"+j,D.item,w.event.item.click)},intent:function(){w.verbose("Binding hide intent event to document"),l&&s.on("touchstart"+b,w.event.test.touch).on("touchmove"+b,w.event.test.touch),s.on("click"+b,w.event.test.hide)}},unbind:{intent:function(){w.verbose("Removing hide intent event from document"),l&&s.off("touchstart"+b).off("touchmove"+b),s.off("click"+b)}},filter:function(e){var t=e!==i?e:w.get.query(),n=function(){w.is.multiple()&&w.filterActive(),w.select.firstUnfiltered(),w.has.allResultsFiltered()?k.onNoResults.call(Y,t)?k.allowAdditions||(w.verbose("All items filtered, showing message",t),w.add.message(T.noResults)):(w.verbose("All items filtered, hiding dropdown",t),w.hideMenu()):w.remove.message(),k.allowAdditions&&w.add.userSuggestion(e),w.is.searchSelection()&&w.can.show()&&w.is.focusedOnSearch()&&w.show()};k.useLabels&&w.has.maxSelections()||(k.apiSettings?w.can.useAPI()?w.queryRemote(t,function(){n()}):w.error(O.noAPI):(w.filterItems(t),n()))},queryRemote:function(t,n){var i={errorDuration:!1,throttle:k.throttle,urlData:{query:t},onError:function(){w.add.message(T.serverError),n()},onFailure:function(){w.add.message(T.serverError),n()},onSuccess:function(e){w.remove.message(),w.setup.menu({values:e[A.remoteValues]}),n()}};I.api("get request")||w.setup.api(),i=e.extend(!0,{},i,k.apiSettings),I.api("setting",i).api("query")},filterItems:function(t){var n=t!==i?t:w.get.query(),o=null,a=w.escape.regExp(n),r=new RegExp("^"+a,"igm");w.has.query()&&(o=[],w.verbose("Searching for matching values",n),B.each(function(){var t,i,a=e(this);if("both"==k.match||"text"==k.match){if(t=String(w.get.choiceText(a,!1)),-1!==t.search(r))return o.push(this),!0;if(k.fullTextSearch&&w.fuzzySearch(n,t))return o.push(this),!0}if("both"==k.match||"value"==k.match){if(i=String(w.get.choiceValue(a,t)),-1!==i.search(r))return o.push(this),!0;if(k.fullTextSearch&&w.fuzzySearch(n,i))return o.push(this),!0}})),w.debug("Showing only matched items",n),w.remove.filteredItem(),o&&B.not(o).addClass(S.filtered)},fuzzySearch:function(e,t){var n=t.length,i=e.length;if(e=e.toLowerCase(),t=t.toLowerCase(),i>n)return!1;if(i===n)return e===t;e:for(var o=0,a=0;i>o;o++){for(var r=e.charCodeAt(o);n>a;)if(t.charCodeAt(a++)===r)continue e;return!1}return!0},filterActive:function(){k.useLabels&&B.filter("."+S.active).addClass(S.filtered)},focusSearch:function(){w.is.search()&&!w.is.focusedOnSearch()&&V[0].focus()},forceSelection:function(){var e=B.not(S.filtered).filter("."+S.selected).eq(0),t=B.not(S.filtered).filter("."+S.active).eq(0),n=e.length>0?e:t,i=n.size()>0;if(w.has.query()){if(i)return w.debug("Forcing partial selection to selected item",n),void w.event.item.click.call(n);w.remove.searchTerm()}w.hide()},event:{change:function(){$||(w.debug("Input changed, updating selection"),w.set.selected())},focus:function(){k.showOnFocus&&!Q&&w.is.hidden()&&!h&&w.show()},click:function(t){var n=e(t.target);n.is(I)&&!w.is.focusedOnSearch()&&w.focusSearch()},blur:function(e){h=n.activeElement===this,Q||h||(w.remove.activeLabel(),w.hide())},mousedown:function(){Q=!0},mouseup:function(){Q=!1},search:{focus:function(){Q=!0,w.is.multiple()&&w.remove.activeLabel(),k.showOnFocus&&(w.search(),w.show())},blur:function(e){h=n.activeElement===this,X||h?h&&k.forceSelection&&w.forceSelection():w.is.multiple()?(w.remove.activeLabel(),w.hide()):k.forceSelection?w.forceSelection():w.hide()}},icon:{click:function(e){w.toggle(),e.stopPropagation()}},text:{focus:function(e){Q=!0,w.focusSearch()}},input:function(e){(w.is.multiple()||w.is.searchSelection())&&w.set.filtered(),clearTimeout(w.timer),w.timer=setTimeout(w.search,k.delay.search)},label:{click:function(t){var n=e(this),i=I.find(D.label),o=i.filter("."+S.active),a=n.nextAll("."+S.active),r=n.prevAll("."+S.active),s=a.length>0?n.nextUntil(a).add(o).add(n):n.prevUntil(r).add(o).add(n);t.shiftKey?(o.removeClass(S.active),s.addClass(S.active)):t.ctrlKey?n.toggleClass(S.active):(o.removeClass(S.active),n.addClass(S.active)),k.onLabelSelect.apply(this,i.filter("."+S.active))}},remove:{click:function(){var t=e(this).parent();t.hasClass(S.active)?w.remove.activeLabels():w.remove.activeLabels(t)}},test:{toggle:function(e){var t=w.is.multiple()?w.show:w.toggle;w.determine.eventOnElement(e,t)&&e.preventDefault()},touch:function(e){w.determine.eventOnElement(e,function(){"touchstart"==e.type?w.timer=setTimeout(function(){w.hide()},k.delay.touch):"touchmove"==e.type&&clearTimeout(w.timer)}),e.stopPropagation()},hide:function(e){w.determine.eventInModule(e,w.hide)}},menu:{mousedown:function(){X=!0},mouseup:function(){X=!1}},item:{mouseenter:function(t){var n=e(this).children(D.menu),i=e(this).siblings(D.item).children(D.menu);n.length>0&&(clearTimeout(w.itemTimer),w.itemTimer=setTimeout(function(){w.verbose("Showing sub-menu",n),e.each(i,function(){w.animate.hide(!1,e(this))}),w.animate.show(!1,n)},k.delay.show),t.preventDefault())},mouseleave:function(t){var n=e(this).children(D.menu);n.length>0&&(clearTimeout(w.itemTimer),w.itemTimer=setTimeout(function(){w.verbose("Hiding sub-menu",n),w.animate.hide(!1,n)},k.delay.hide))},touchend:function(){},click:function(t){var n=e(this),i=e(t?t.target:""),o=n.find(D.menu),a=w.get.choiceText(n),r=w.get.choiceValue(n,a),s=o.length>0,c=o.find(i).length>0;c||s&&!k.allowCategorySelection||(k.useLabels||(w.remove.filteredItem(),w.remove.searchTerm(),w.set.scrollPosition(n)),w.determine.selectAction.call(this,a,r))}},document:{keydown:function(e){var t=e.which,n=w.is.inObject(t,R);if(n){var i=I.find(D.label),o=i.filter("."+S.active),a=(o.data(E.value),i.index(o)),r=i.length,s=o.length>0,c=o.length>1,l=0===a,u=a+1==r,d=w.is.searchSelection(),m=w.is.focusedOnSearch(),f=w.is.focused(),g=m&&0===w.get.caretPosition();if(d&&!s&&!m)return;t==R.leftArrow?!f&&!g||s?s&&(e.shiftKey?w.verbose("Adding previous label to selection"):(w.verbose("Selecting previous label"),i.removeClass(S.active)),l&&!c?o.addClass(S.active):o.prev(D.siblingLabel).addClass(S.active).end(), +e.preventDefault()):(w.verbose("Selecting previous label"),i.last().addClass(S.active)):t==R.rightArrow?(f&&!s&&i.first().addClass(S.active),s&&(e.shiftKey?w.verbose("Adding next label to selection"):(w.verbose("Selecting next label"),i.removeClass(S.active)),u?d?m?i.removeClass(S.active):w.focusSearch():c?o.next(D.siblingLabel).addClass(S.active):o.addClass(S.active):o.next(D.siblingLabel).addClass(S.active),e.preventDefault())):t==R.deleteKey||t==R.backspace?s?(w.verbose("Removing active labels"),u&&d&&!m&&w.focusSearch(),o.last().next(D.siblingLabel).addClass(S.active),w.remove.activeLabels(o),e.preventDefault()):g&&!s&&t==R.backspace&&(w.verbose("Removing last label on input backspace"),o=i.last().addClass(S.active),w.remove.activeLabels(o)):o.removeClass(S.active)}}},keydown:function(e){var t=e.which,n=w.is.inObject(t,R);if(n){var i,o,a=B.not(D.unselectable).filter("."+S.selected).eq(0),r=W.children("."+S.active).eq(0),s=a.length>0?a:r,c=s.length>0?s.siblings(":not(."+S.filtered+")").andSelf():W.children(":not(."+S.filtered+")"),l=s.children(D.menu),u=s.closest(D.menu),d=u.hasClass(S.visible)||u.hasClass(S.animating)||u.parent(D.menu).length>0,m=l.length>0,f=s.length>0,g=s.not(D.unselectable).length>0,p=t==R.delimiter&&k.allowAdditions&&w.is.multiple();if(w.is.visible()){if((t==R.enter||p)&&(t==R.enter&&f&&m&&!k.allowCategorySelection?(w.verbose("Pressed enter on unselectable category, opening sub menu"),t=R.rightArrow):g&&(w.verbose("Selecting item from keyboard shortcut",s),w.event.item.click.call(s,e),w.is.searchSelection()&&w.remove.searchTerm()),e.preventDefault()),t==R.leftArrow&&(o=u[0]!==W[0],o&&(w.verbose("Left key pressed, closing sub-menu"),w.animate.hide(!1,u),s.removeClass(S.selected),u.closest(D.item).addClass(S.selected),e.preventDefault())),t==R.rightArrow&&m&&(w.verbose("Right key pressed, opening sub-menu"),w.animate.show(!1,l),s.removeClass(S.selected),l.find(D.item).eq(0).addClass(S.selected),e.preventDefault()),t==R.upArrow){if(i=f&&d?s.prevAll(D.item+":not("+D.unselectable+")").eq(0):B.eq(0),c.index(i)<0)return w.verbose("Up key pressed but reached top of current menu"),void e.preventDefault();w.verbose("Up key pressed, changing active item"),s.removeClass(S.selected),i.addClass(S.selected),w.set.scrollPosition(i),e.preventDefault()}if(t==R.downArrow){if(i=f&&d?i=s.nextAll(D.item+":not("+D.unselectable+")").eq(0):B.eq(0),0===i.length)return w.verbose("Down key pressed but reached bottom of current menu"),void e.preventDefault();w.verbose("Down key pressed, changing active item"),B.removeClass(S.selected),i.addClass(S.selected),w.set.scrollPosition(i),e.preventDefault()}t==R.pageUp&&(w.scrollPage("up"),e.preventDefault()),t==R.pageDown&&(w.scrollPage("down"),e.preventDefault()),t==R.escape&&(w.verbose("Escape key pressed, closing dropdown"),w.hide())}else p&&e.preventDefault(),t==R.downArrow&&(w.verbose("Down key pressed, showing dropdown"),w.show(),e.preventDefault())}else w.is.selection()&&!w.is.search()&&w.set.selectedLetter(String.fromCharCode(t))}},trigger:{change:function(){var e=n.createEvent("HTMLEvents"),t=H[0];t&&(w.verbose("Triggering native change event"),e.initEvent("change",!0,!1),t.dispatchEvent(e))}},determine:{selectAction:function(t,n){w.verbose("Determining action",k.action),e.isFunction(w.action[k.action])?(w.verbose("Triggering preset action",k.action,t,n),w.action[k.action].call(this,t,n)):e.isFunction(k.action)?(w.verbose("Triggering user action",k.action,t,n),k.action.call(this,t,n)):w.error(O.action,k.action)},eventInModule:function(t,i){var o=e(t.target),a=o.closest(n.documentElement).length>0,r=o.closest(I).length>0;return i=e.isFunction(i)?i:function(){},a&&!r?(w.verbose("Triggering event",i),i(),!0):(w.verbose("Event occurred in dropdown, canceling callback"),!1)},eventOnElement:function(t,n){var i=e(t.target),o=i.closest(D.siblingLabel),a=0===I.find(o).length,r=0===i.closest(W).length;return n=e.isFunction(n)?n:function(){},a&&r?(w.verbose("Triggering event",n),n(),!0):(w.verbose("Event occurred in dropdown menu, canceling callback"),!1)}},action:{nothing:function(){},activate:function(t,n){if(n=n!==i?n:t,w.can.activate(e(this))){if(w.set.selected(n,e(this)),w.is.multiple()&&!w.is.allFiltered())return;w.hideAndClear()}},select:function(e,t){w.action.activate.call(this)},combo:function(t,n){n=n!==i?n:t,w.set.selected(n,e(this)),w.hideAndClear()},hide:function(e,t){w.set.value(t),w.hideAndClear()}},get:{id:function(){return y},defaultText:function(){return I.data(E.defaultText)},defaultValue:function(){return I.data(E.defaultValue)},placeholderText:function(){return I.data(E.placeholderText)||""},text:function(){return N.text()},query:function(){return e.trim(V.val())},searchWidth:function(e){return e*k.glyphWidth+"em"},selectionCount:function(){var t,n=w.get.values();return t=w.is.multiple()?e.isArray(n)?n.length:0:""!==w.get.value()?1:0},transition:function(e){return"auto"==k.transition?w.is.upward(e)?"slide up":"slide down":k.transition},userValues:function(){var t=w.get.values();return t?(t=e.isArray(t)?t:[t],e.grep(t,function(e){return w.get.item(e)===!1})):!1},uniqueArray:function(t){return e.grep(t,function(n,i){return e.inArray(n,t)===i})},caretPosition:function(){var e,t,i=V.get(0);return"selectionStart"in i?i.selectionStart:n.selection?(i.focus(),e=n.selection.createRange(),t=e.text.length,e.moveStart("character",-i.value.length),e.text.length-t):void 0},value:function(){var t=H.length>0?H.val():I.data(E.value);return e.isArray(t)&&1===t.length&&""===t[0]?"":t},values:function(){var e=w.get.value();return""===e?"":!w.has.selectInput()&&w.is.multiple()?"string"==typeof e?e.split(k.delimiter):"":e},remoteValues:function(){var t=w.get.values(),n=!1;return t&&("string"==typeof t&&(t=[t]),n={},e.each(t,function(e,t){var i=w.read.remoteData(t);w.verbose("Restoring value from session data",i,t),n[t]=i?i:t})),n},choiceText:function(t,n){return n=n!==i?n:k.preserveHTML,t?(t.find(D.menu).length>0&&(w.verbose("Retreiving text of element with sub-menu"),t=t.clone(),t.find(D.menu).remove(),t.find(D.menuIcon).remove()),t.data(E.text)!==i?t.data(E.text):e.trim(n?t.html():t.text())):void 0},choiceValue:function(t,n){return n=n||w.get.choiceText(t),t?t.data(E.value)!==i?String(t.data(E.value)):"string"==typeof n?e.trim(n.toLowerCase()):String(n):!1},inputEvent:function(){var e=V[0];return e?e.oninput!==i?"input":e.onpropertychange!==i?"propertychange":"keyup":!1},selectValues:function(){var t={};return t.values=[],I.find("option").each(function(){var n=e(this),o=n.html(),a=n.attr("disabled"),r=n.attr("value")!==i?n.attr("value"):o;"auto"===k.placeholder&&""===r?t.placeholder=o:t.values.push({name:o,value:r,disabled:a})}),k.placeholder&&"auto"!==k.placeholder&&(w.debug("Setting placeholder value to",k.placeholder),t.placeholder=k.placeholder),k.sortSelect?(t.values.sort(function(e,t){return e.name>t.name?1:-1}),w.debug("Retrieved and sorted values from select",t)):w.debug("Retreived values from select",t),t},activeItem:function(){return B.filter("."+S.active)},selectedItem:function(){var e=B.not(D.unselectable).filter("."+S.selected);return e.length>0?e:B.eq(0)},itemWithAdditions:function(e){var t=w.get.item(e),n=w.create.userChoice(e),i=n&&n.length>0;return i&&(t=t.length>0?t.add(n):n),t},item:function(t,n){var o,a,r=!1;return t=t!==i?t:w.get.values()!==i?w.get.values():w.get.text(),o=a?t.length>0:t!==i&&null!==t,a=w.is.multiple()&&e.isArray(t),n=""===t||0===t?!0:n||!1,o&&B.each(function(){var o=e(this),s=w.get.choiceText(o),c=w.get.choiceValue(o,s);if(null!==c&&c!==i)if(a)(-1!==e.inArray(String(c),t)||-1!==e.inArray(s,t))&&(r=r?r.add(o):o);else if(n){if(w.verbose("Ambiguous dropdown value using strict type check",o,t),c===t||s===t)return r=o,!0}else if(String(c)==String(t)||s==t)return w.verbose("Found select item by value",c,t),r=o,!0}),r}},check:{maxSelections:function(e){return k.maxSelections?(e=e!==i?e:w.get.selectionCount(),e>=k.maxSelections?(w.debug("Maximum selection count reached"),k.useLabels&&(B.addClass(S.filtered),w.add.message(T.maxSelections)),!0):(w.verbose("No longer at maximum selection count"),w.remove.message(),w.remove.filteredItem(),w.is.searchSelection()&&w.filterItems(),!1)):!0}},restore:{defaults:function(){w.clear(),w.restore.defaultText(),w.restore.defaultValue()},defaultText:function(){var e=w.get.defaultText(),t=w.get.placeholderText;e===t?(w.debug("Restoring default placeholder text",e),w.set.placeholderText(e)):(w.debug("Restoring default text",e),w.set.text(e))},defaultValue:function(){var e=w.get.defaultValue();e!==i&&(w.debug("Restoring default value",e),""!==e?(w.set.value(e),w.set.selected()):(w.remove.activeItem(),w.remove.selectedItem()))},labels:function(){k.allowAdditions&&(k.useLabels||(w.error(O.labels),k.useLabels=!0),w.debug("Restoring selected values"),w.create.userLabels()),w.check.maxSelections()},selected:function(){w.restore.values(),w.is.multiple()?(w.debug("Restoring previously selected values and labels"),w.restore.labels()):w.debug("Restoring previously selected values")},values:function(){w.set.initialLoad(),k.apiSettings?k.saveRemoteData?w.restore.remoteValues():w.clearValue():w.set.selected(),w.remove.initialLoad()},remoteValues:function(){var t=w.get.remoteValues();w.debug("Recreating selected from session data",t),t&&(w.is.single()?e.each(t,function(e,t){w.set.text(t)}):e.each(t,function(e,t){w.add.label(e,t)}))}},read:{remoteData:function(e){var n;return t.Storage===i?void w.error(O.noStorage):(n=sessionStorage.getItem(e),n!==i?n:!1)}},save:{defaults:function(){w.save.defaultText(),w.save.placeholderText(),w.save.defaultValue()},defaultValue:function(){var e=w.get.value();w.verbose("Saving default value as",e),I.data(E.defaultValue,e)},defaultText:function(){var e=w.get.text();w.verbose("Saving default text as",e),I.data(E.defaultText,e)},placeholderText:function(){var e;k.placeholder!==!1&&N.hasClass(S.placeholder)&&(e=w.get.text(),w.verbose("Saving placeholder text as",e),I.data(E.placeholderText,e))},remoteData:function(e,n){return t.Storage===i?void w.error(O.noStorage):(w.verbose("Saving remote data to session storage",n,e),void sessionStorage.setItem(n,e))}},clear:function(){w.is.multiple()?w.remove.labels():(w.remove.activeItem(),w.remove.selectedItem()),w.set.placeholderText(),w.clearValue()},clearValue:function(){w.set.value("")},scrollPage:function(e,t){var n,i,o,a=t||w.get.selectedItem(),r=a.closest(D.menu),s=r.outerHeight(),c=r.scrollTop(),l=B.eq(0).outerHeight(),u=Math.floor(s/l),d=(r.prop("scrollHeight"),"up"==e?c-l*u:c+l*u),m=B.not(D.unselectable);o="up"==e?m.index(a)-u:m.index(a)+u,n="up"==e?o>=0:o0&&(w.debug("Scrolling page",e,i),a.removeClass(S.selected),i.addClass(S.selected),r.scrollTop(d))},set:{filtered:function(){var e=w.is.multiple(),t=w.is.searchSelection(),n=e&&t,i=t?w.get.query():"",o="string"==typeof i&&i.length>0,a=w.get.searchWidth(i.length),r=""!==i;e&&o&&(w.verbose("Adjusting input width",a,k.glyphWidth),V.css("width",a)),o||n&&r?(w.verbose("Hiding placeholder text"),N.addClass(S.filtered)):(!e||n&&!r)&&(w.verbose("Showing placeholder text"),N.removeClass(S.filtered))},loading:function(){I.addClass(S.loading)},placeholderText:function(e){e=e||w.get.placeholderText(),w.debug("Setting placeholder text",e),w.set.text(e),N.addClass(S.placeholder)},tabbable:function(){w.has.search()?(w.debug("Added tabindex to searchable dropdown"),V.val("").attr("tabindex",0),W.attr("tabindex",-1)):(w.debug("Added tabindex to dropdown"),I.attr("tabindex")===i&&(I.attr("tabindex",0),W.attr("tabindex",-1)))},initialLoad:function(){w.verbose("Setting initial load"),v=!0},activeItem:function(e){e.addClass(k.allowAdditions&&e.filter(D.addition).length>0?S.filtered:S.active)},scrollPosition:function(e,t){var n,o,a,r,s,c,l,u,d,m=5;e=e||w.get.selectedItem(),n=e.closest(D.menu),o=e&&e.length>0,t=t!==i?t:!1,e&&n.length>0&&o&&(r=e.position().top,n.addClass(S.loading),c=n.scrollTop(),s=n.offset().top,r=e.offset().top,a=c-s+r,t||(l=n.height(),d=a+m>c+l,u=c>a-m),w.debug("Scrolling to active item",a),(t||u||d)&&n.scrollTop(a),n.removeClass(S.loading))},text:function(e){"select"!==k.action&&("combo"==k.action?(w.debug("Changing combo button text",e,U),k.preserveHTML?U.html(e):U.text(e)):(e!==w.get.placeholderText()&&N.removeClass(S.placeholder),w.debug("Changing text",e,N),N.removeClass(S.filtered),k.preserveHTML?N.html(e):N.text(e)))},selectedLetter:function(t){var n,i=B.filter("."+S.selected),o=i.length>0&&w.has.firstLetter(i,t),a=!1;o&&(n=i.nextAll(B).eq(0),w.has.firstLetter(n,t)&&(a=n)),a||B.each(function(){return w.has.firstLetter(e(this),t)?(a=e(this),!1):void 0}),a&&(w.verbose("Scrolling to next value with letter",t),w.set.scrollPosition(a),i.removeClass(S.selected),a.addClass(S.selected))},direction:function(e){"auto"==k.direction?w.is.onScreen(e)?w.remove.upward(e):w.set.upward(e):"upward"==k.direction&&w.set.upward(e)},upward:function(e){var t=e||I;t.addClass(S.upward)},value:function(e,t,n){var o=H.length>0,a=(!w.has.value(e),w.get.values()),r=e!==i?String(e):e;if(o){if(r==a&&(w.verbose("Skipping value update already same value",e,a),!w.is.initialLoad()))return;w.is.single()&&w.has.selectInput()&&w.can.extendSelect()&&(w.debug("Adding user option",e),w.add.optionValue(e)),w.debug("Updating input value",e,a),$=!0,H.val(e),k.fireOnInit===!1&&w.is.initialLoad()?w.debug("Input native change event ignored on initial load"):w.trigger.change(),$=!1}else w.verbose("Storing value in metadata",e,H),e!==a&&I.data(E.value,r);k.fireOnInit===!1&&w.is.initialLoad()?w.verbose("No callback on initial load",k.onChange):k.onChange.call(Y,e,t,n)},active:function(){I.addClass(S.active)},multiple:function(){I.addClass(S.multiple)},visible:function(){I.addClass(S.visible)},exactly:function(e,t){w.debug("Setting selected to exact values"),w.clear(),w.set.selected(e,t)},selected:function(t,n){var i=w.is.multiple();n=k.allowAdditions?n||w.get.itemWithAdditions(t):n||w.get.item(t),n&&(w.debug("Setting selected menu item to",n),w.is.single()?(w.remove.activeItem(),w.remove.selectedItem()):k.useLabels&&w.remove.selectedItem(),n.each(function(){var t=e(this),o=w.get.choiceText(t),a=w.get.choiceValue(t,o),r=t.hasClass(S.filtered),s=t.hasClass(S.active),c=t.hasClass(S.addition),l=i&&1==n.length;i?!s||c?(k.apiSettings&&k.saveRemoteData&&w.save.remoteData(o,a),k.useLabels?(w.add.value(a,o,t),w.add.label(a,o,l),w.set.activeItem(t),w.filterActive(),w.select.nextAvailable(n)):(w.add.value(a,o,t),w.set.text(w.add.variables(T.count)),w.set.activeItem(t))):r||(w.debug("Selected active value, removing label"),w.remove.selected(a)):(k.apiSettings&&k.saveRemoteData&&w.save.remoteData(o,a),w.set.text(o),w.set.value(a,o,t),t.addClass(S.active).addClass(S.selected))}))}},add:{label:function(t,n,i){var o,a=w.is.searchSelection()?V:N;return o=e("").addClass(S.label).attr("data-value",t).html(q.label(t,n)),o=k.onLabelCreate.call(o,t,n),w.has.label(t)?void w.debug("Label already exists, skipping",t):(k.label.variation&&o.addClass(k.label.variation),void(i===!0?(w.debug("Animating in label",o),o.addClass(S.hidden).insertBefore(a).transition(k.label.transition,k.label.duration)):(w.debug("Adding selection label",o),o.insertBefore(a))))},message:function(t){var n=W.children(D.message),i=k.templates.message(w.add.variables(t));n.length>0?n.html(i):n=e("

").html(i).addClass(S.message).appendTo(W)},optionValue:function(t){var n=H.find('option[value="'+t+'"]'),i=n.length>0;i||(x&&(x.disconnect(),w.verbose("Temporarily disconnecting mutation observer",t)),w.is.single()&&(w.verbose("Removing previous user addition"),H.find("option."+S.addition).remove()),e("

").addClass(p.embed).html(m.generate.embed(t)).appendTo(k),f.onCreate.call(R,t),m.debug("Creating embed object",A)},createAndShow:function(){m.createEmbed(),m.show()},change:function(e,t,n){m.debug("Changing video to ",e,t,n),k.data(b.source,e).data(b.id,t).data(b.url,n), +m.create()},reset:function(){m.debug("Clearing embed and showing placeholder"),m.remove.active(),m.remove.embed(),m.showPlaceholder(),f.onReset.call(R)},show:function(){m.debug("Showing embed"),m.set.active(),f.onDisplay.call(R)},hide:function(){m.debug("Hiding embed"),m.showPlaceholder()},showPlaceholder:function(){m.debug("Showing placeholder image"),m.remove.active(),f.onPlaceholderDisplay.call(R)},get:{id:function(){return f.id||k.data(b.id)},placeholder:function(){return f.placeholder||k.data(b.placeholder)},icon:function(){return f.icon?f.icon:k.data(b.icon)!==i?k.data(b.icon):m.determine.icon()},source:function(e){return f.source?f.source:k.data(b.source)!==i?k.data(b.source):m.determine.source()},type:function(){var e=m.get.source();return v[e]!==i?v[e].type:!1},url:function(){return f.url?f.url:k.data(b.url)!==i?k.data(b.url):m.determine.url()}},determine:{autoplay:function(){m.should.autoplay()&&(f.autoplay=!0)},source:function(t){var n=!1;return t=t||m.get.url(),t&&e.each(v,function(e,i){return-1!==t.search(i.domain)?(n=e,!1):void 0}),n},icon:function(){var e=m.get.source();return v[e]!==i?v[e].icon:!1},url:function(){var e,t=f.id||k.data(b.id),n=f.source||k.data(b.source);return e=v[n]!==i?v[n].url.replace("{id}",t):!1,e&&k.data(b.url,e),e}},set:{active:function(){k.addClass(p.active)}},remove:{active:function(){k.removeClass(p.active)},embed:function(){A.empty()}},encode:{parameters:function(e){var t,n=[];for(t in e)n.push(encodeURIComponent(t)+"="+encodeURIComponent(e[t]));return n.join("&")}},generate:{embed:function(e){m.debug("Generating embed html");var t,n,i=m.get.source();return e=m.get.url(e),e?(n=m.generate.parameters(i),t=x.iframe(e,n)):m.error(h.noURL,k),t},parameters:function(t,n){var o=v[t]&&v[t].parameters!==i?v[t].parameters(f):{};return n=n||f.parameters,n&&(o=e.extend({},o,n)),o=f.onEmbed(o),m.encode.parameters(o)}},has:{placeholder:function(){return f.placeholder||k.data(b.placeholder)}},should:{autoplay:function(){return"auto"===f.autoplay?f.placeholder||k.data(b.placeholder)!==i:f.autoplay}},is:{video:function(){return"video"==m.get.type()}},setting:function(t,n){if(m.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,f,t);else{if(n===i)return f[t];f[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,m,t);else{if(n===i)return m[t];m[t]=n}},debug:function(){f.debug&&(f.performance?m.performance.log(arguments):(m.debug=Function.prototype.bind.call(console.info,console,f.name+":"),m.debug.apply(console,arguments)))},verbose:function(){f.verbose&&f.debug&&(f.performance?m.performance.log(arguments):(m.verbose=Function.prototype.bind.call(console.info,console,f.name+":"),m.verbose.apply(console,arguments)))},error:function(){m.error=Function.prototype.bind.call(console.error,console,f.name+":"),m.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;f.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:R,"Execution Time":n})),clearTimeout(m.performance.timer),m.performance.timer=setTimeout(m.performance.display,500)},display:function(){var t=f.name+":",n=0;s=!1,clearTimeout(m.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",r&&(t+=" '"+r+"'"),a.length>1&&(t+=" ("+a.length+")"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,a){var r,s,c,l=E;return n=n||d,a=R||a,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):(m.error(h.method,t),!1);l=l[o]}})),e.isFunction(s)?c=s.apply(a,n):s!==i&&(c=s),e.isArray(o)?o.push(c):o!==i?o=[o,c]:c!==i&&(o=c),s}},u?(E===i&&m.initialize(),m.invoke(l)):(E!==i&&E.invoke("destroy"),m.initialize())}),o!==i?o:this},e.fn.embed.settings={name:"Embed",namespace:"embed",debug:!1,verbose:!1,performance:!0,icon:!1,source:!1,url:!1,id:!1,autoplay:"auto",color:"#444444",hd:!0,brandedUI:!1,parameters:!1,onDisplay:function(){},onPlaceholderDisplay:function(){},onReset:function(){},onCreate:function(e){},onEmbed:function(e){return e},metadata:{id:"id",icon:"icon",placeholder:"placeholder",source:"source",url:"url"},error:{noURL:"No URL specified",method:"The method you called is not defined"},className:{active:"active",embed:"embed"},selector:{embed:".embed",placeholder:".placeholder",icon:".icon"},sources:{youtube:{name:"youtube",type:"video",icon:"video play",domain:"youtube.com",url:"//www.youtube.com/embed/{id}",parameters:function(e){return{autohide:!e.brandedUI,autoplay:e.autoplay,color:e.colors||i,hq:e.hd,jsapi:e.api,modestbranding:!e.brandedUI}}},vimeo:{name:"vimeo",type:"video",icon:"video play",domain:"vimeo.com",url:"//player.vimeo.com/video/{id}",parameters:function(e){return{api:e.api,autoplay:e.autoplay,byline:e.brandedUI,color:e.colors||i,portrait:e.brandedUI,title:e.brandedUI}}}},templates:{iframe:function(e,t){return''},placeholder:function(e,t){var n="";return t&&(n+=''),e&&(n+='

'),n}},api:!0,onPause:function(){},onPlay:function(){},onStop:function(){}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.modal=function(o){var a,r=e(this),s=e(t),c=e(n),l=e("body"),u=r.selector||"",d=(new Date).getTime(),m=[],f=arguments[0],g="string"==typeof f,p=[].slice.call(arguments,1),v=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)};return r.each(function(){var r,h,b,y,x,C,w,k,S,T=e.isPlainObject(o)?e.extend(!0,{},e.fn.modal.settings,o):e.extend({},e.fn.modal.settings),A=T.selector,R=T.className,E=T.namespace,P=T.error,F="."+E,D="module-"+E,O=e(this),q=e(T.context),j=O.find(A.close),z=this,I=O.data(D);S={initialize:function(){S.verbose("Initializing dimmer",q),S.create.id(),S.create.dimmer(),S.refreshModals(),S.bind.events(),T.observeChanges&&S.observeChanges(),S.instantiate()},instantiate:function(){S.verbose("Storing instance of modal"),I=S,O.data(D,I)},create:{dimmer:function(){var t={debug:T.debug,dimmerName:"modals",duration:{show:T.duration,hide:T.duration}},n=e.extend(!0,t,T.dimmerSettings);return T.inverted&&(n.variation=n.variation!==i?n.variation+" inverted":"inverted"),e.fn.dimmer===i?void S.error(P.dimmer):(S.debug("Creating dimmer with settings",n),y=q.dimmer(n),T.detachable?(S.verbose("Modal is detachable, moving content into dimmer"),y.dimmer("add content",O)):S.set.undetached(),T.blurring&&y.addClass(R.blurring),void(x=y.dimmer("get dimmer")))},id:function(){w=(Math.random().toString(16)+"000000000").substr(2,8),C="."+w,S.verbose("Creating unique id for element",w)}},destroy:function(){S.verbose("Destroying previous modal"),O.removeData(D).off(F),s.off(C),j.off(F),q.dimmer("destroy")},observeChanges:function(){"MutationObserver"in t&&(k=new MutationObserver(function(e){S.debug("DOM tree modified, refreshing"),S.refresh()}),k.observe(z,{childList:!0,subtree:!0}),S.debug("Setting up mutation observer",k))},refresh:function(){S.remove.scrolling(),S.cacheSizes(),S.set.screenHeight(),S.set.type(),S.set.position()},refreshModals:function(){h=O.siblings(A.modal),r=h.add(O)},attachEvents:function(t,n){var i=e(t);n=e.isFunction(S[n])?S[n]:S.toggle,i.length>0?(S.debug("Attaching modal events to element",t,n),i.off(F).on("click"+F,n)):S.error(P.notFound,t)},bind:{events:function(){S.verbose("Attaching events"),O.on("click"+F,A.close,S.event.close).on("click"+F,A.approve,S.event.approve).on("click"+F,A.deny,S.event.deny),s.on("resize"+C,S.event.resize)}},get:{id:function(){return(Math.random().toString(16)+"000000000").substr(2,8)}},event:{approve:function(){return T.onApprove.call(z,e(this))===!1?void S.verbose("Approve callback returned false cancelling hide"):void S.hide()},deny:function(){return T.onDeny.call(z,e(this))===!1?void S.verbose("Deny callback returned false cancelling hide"):void S.hide()},close:function(){S.hide()},click:function(t){var i=e(t.target),o=i.closest(A.modal).length>0,a=e.contains(n.documentElement,t.target);!o&&a&&(S.debug("Dimmer clicked, hiding all modals"),S.is.active()&&(S.remove.clickaway(),T.allowMultiple?S.hide():S.hideAll()))},debounce:function(e,t){clearTimeout(S.timer),S.timer=setTimeout(e,t)},keyboard:function(e){var t=e.which,n=27;t==n&&(T.closable?(S.debug("Escape key pressed hiding modal"),S.hide()):S.debug("Escape key pressed, but closable is set to false"),e.preventDefault())},resize:function(){y.dimmer("is active")&&v(S.refresh)}},toggle:function(){S.is.active()||S.is.animating()?S.hide():S.show()},show:function(t){t=e.isFunction(t)?t:function(){},S.refreshModals(),S.showModal(t)},hide:function(t){t=e.isFunction(t)?t:function(){},S.refreshModals(),S.hideModal(t)},showModal:function(t){t=e.isFunction(t)?t:function(){},S.is.animating()||!S.is.active()?(S.showDimmer(),S.cacheSizes(),S.set.position(),S.set.screenHeight(),S.set.type(),S.set.clickaway(),!T.allowMultiple&&S.others.active()?S.hideOthers(S.showModal):(T.onShow.call(z),T.transition&&e.fn.transition!==i&&O.transition("is supported")?(S.debug("Showing modal with css animations"),O.transition({debug:T.debug,animation:T.transition+" in",queue:T.queue,duration:T.duration,useFailSafe:!0,onComplete:function(){T.onVisible.apply(z),S.add.keyboardShortcuts(),S.save.focus(),S.set.active(),T.autofocus&&S.set.autofocus(),t()}})):S.error(P.noTransition))):S.debug("Modal is already visible")},hideModal:function(t,n){return t=e.isFunction(t)?t:function(){},S.debug("Hiding modal"),T.onHide.call(z,e(this))===!1?void S.verbose("Hide callback returned false cancelling hide"):void((S.is.animating()||S.is.active())&&(T.transition&&e.fn.transition!==i&&O.transition("is supported")?(S.remove.active(),O.transition({debug:T.debug,animation:T.transition+" out",queue:T.queue,duration:T.duration,useFailSafe:!0,onStart:function(){S.others.active()||n||S.hideDimmer(),S.remove.keyboardShortcuts()},onComplete:function(){T.onHidden.call(z),S.restore.focus(),t()}})):S.error(P.noTransition)))},showDimmer:function(){y.dimmer("is animating")||!y.dimmer("is active")?(S.debug("Showing dimmer"),y.dimmer("show")):S.debug("Dimmer already visible")},hideDimmer:function(){return y.dimmer("is animating")||y.dimmer("is active")?void y.dimmer("hide",function(){S.remove.clickaway(),S.remove.screenHeight()}):void S.debug("Dimmer is not visible cannot hide")},hideAll:function(t){var n=r.filter("."+R.active+", ."+R.animating);t=e.isFunction(t)?t:function(){},n.length>0&&(S.debug("Hiding all visible modals"),S.hideDimmer(),n.modal("hide modal",t))},hideOthers:function(t){var n=h.filter("."+R.active+", ."+R.animating);t=e.isFunction(t)?t:function(){},n.length>0&&(S.debug("Hiding other modals",h),n.modal("hide modal",t,!0))},others:{active:function(){return h.filter("."+R.active).length>0},animating:function(){return h.filter("."+R.animating).length>0}},add:{keyboardShortcuts:function(){S.verbose("Adding keyboard shortcuts"),c.on("keyup"+F,S.event.keyboard)}},save:{focus:function(){b=e(n.activeElement).blur()}},restore:{focus:function(){b&&b.length>0&&b.focus()}},remove:{active:function(){O.removeClass(R.active)},clickaway:function(){T.closable&&x.off("click"+C)},bodyStyle:function(){""===l.attr("style")&&(S.verbose("Removing style attribute"),l.removeAttr("style"))},screenHeight:function(){S.debug("Removing page height"),l.css("height","")},keyboardShortcuts:function(){S.verbose("Removing keyboard shortcuts"),c.off("keyup"+F)},scrolling:function(){y.removeClass(R.scrolling),O.removeClass(R.scrolling)}},cacheSizes:function(){var o=O.outerHeight();(S.cache===i||0!==o)&&(S.cache={pageHeight:e(n).outerHeight(),height:o+T.offset,contextHeight:"body"==T.context?e(t).height():y.height()}),S.debug("Caching modal and container sizes",S.cache)},can:{fit:function(){return S.cache.height+2*T.padding0?t.first():e.first();n.length>0&&n.focus()},clickaway:function(){T.closable&&x.on("click"+C,S.event.click)},screenHeight:function(){S.can.fit()?l.css("height",""):(S.debug("Modal is taller than page content, resizing page height"),l.css("height",S.cache.height+2*T.padding))},active:function(){O.addClass(R.active)},scrolling:function(){y.addClass(R.scrolling),O.addClass(R.scrolling)},type:function(){S.can.fit()?(S.verbose("Modal fits on screen"),S.others.active()||S.others.animating()||S.remove.scrolling()):(S.verbose("Modal cannot fit on screen setting to scrolling"),S.set.scrolling())},position:function(){S.verbose("Centering modal on page",S.cache),O.css(S.can.fit()?{top:"",marginTop:-(S.cache.height/2)}:{marginTop:"",top:c.scrollTop()})},undetached:function(){y.addClass(R.undetached)}},setting:function(t,n){if(S.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,T,t);else{if(n===i)return T[t];T[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,S,t);else{if(n===i)return S[t];S[t]=n}},debug:function(){T.debug&&(T.performance?S.performance.log(arguments):(S.debug=Function.prototype.bind.call(console.info,console,T.name+":"),S.debug.apply(console,arguments)))},verbose:function(){T.verbose&&T.debug&&(T.performance?S.performance.log(arguments):(S.verbose=Function.prototype.bind.call(console.info,console,T.name+":"),S.verbose.apply(console,arguments)))},error:function(){S.error=Function.prototype.bind.call(console.error,console,T.name+":"),S.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;T.performance&&(t=(new Date).getTime(),i=d||t,n=t-i,d=t,m.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:z,"Execution Time":n})),clearTimeout(S.performance.timer),S.performance.timer=setTimeout(S.performance.display,500)},display:function(){var t=T.name+":",n=0;d=!1,clearTimeout(S.performance.timer),e.each(m,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",u&&(t+=" '"+u+"'"),(console.group!==i||console.table!==i)&&m.length>0&&(console.groupCollapsed(t),console.table?console.table(m):e.each(m,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),m=[]}},invoke:function(t,n,o){var r,s,c,l=I;return n=n||p,o=z||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},g?(I===i&&S.initialize(),S.invoke(f)):(I!==i&&I.invoke("destroy"),S.initialize())}),a!==i?a:this},e.fn.modal.settings={name:"Modal",namespace:"modal",debug:!1,verbose:!1,performance:!0,observeChanges:!1,allowMultiple:!1,detachable:!0,closable:!0,autofocus:!0,inverted:!1,blurring:!1,dimmerSettings:{closable:!1,useCSS:!0},context:"body",queue:!1,duration:500,offset:0,transition:"scale",padding:50,onShow:function(){},onVisible:function(){},onHide:function(){return!0},onHidden:function(){},onApprove:function(){return!0},onDeny:function(){return!0},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",scrolling:"scrolling",undetached:"undetached"}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.nag=function(n){var o,a=e(this),r=a.selector||"",s=(new Date).getTime(),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1);return a.each(function(){{var a,m=e.isPlainObject(n)?e.extend(!0,{},e.fn.nag.settings,n):e.extend({},e.fn.nag.settings),f=(m.className,m.selector),g=m.error,p=m.namespace,v="."+p,h=p+"-module",b=e(this),y=(b.find(f.close),e(m.context?m.context:"body")),x=this,C=b.data(h);t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)}}a={initialize:function(){a.verbose("Initializing element"),b.on("click"+v,f.close,a.dismiss).data(h,a),m.detachable&&b.parent()[0]!==y[0]&&b.detach().prependTo(y),m.displayTime>0&&setTimeout(a.hide,m.displayTime),a.show()},destroy:function(){a.verbose("Destroying instance"),b.removeData(h).off(v)},show:function(){a.should.show()&&!b.is(":visible")&&(a.debug("Showing nag",m.animation.show),"fade"==m.animation.show?b.fadeIn(m.duration,m.easing):b.slideDown(m.duration,m.easing))},hide:function(){a.debug("Showing nag",m.animation.hide),"fade"==m.animation.show?b.fadeIn(m.duration,m.easing):b.slideUp(m.duration,m.easing)},onHide:function(){a.debug("Removing nag",m.animation.hide),b.remove(),m.onHide&&m.onHide()},dismiss:function(e){m.storageMethod&&a.storage.set(m.key,m.value),a.hide(),e.stopImmediatePropagation(),e.preventDefault()},should:{show:function(){return m.persist?(a.debug("Persistent nag is set, can show nag"),!0):a.storage.get(m.key)!=m.value.toString()?(a.debug("Stored value is not set, can show nag",a.storage.get(m.key)),!0):(a.debug("Stored value is set, cannot show nag",a.storage.get(m.key)),!1)}},get:{storageOptions:function(){var e={};return m.expires&&(e.expires=m.expires),m.domain&&(e.domain=m.domain),m.path&&(e.path=m.path),e}},clear:function(){a.storage.remove(m.key)},storage:{set:function(n,o){var r=a.get.storageOptions();if("localstorage"==m.storageMethod&&t.localStorage!==i)t.localStorage.setItem(n,o),a.debug("Value stored using local storage",n,o);else if("sessionstorage"==m.storageMethod&&t.sessionStorage!==i)t.sessionStorage.setItem(n,o),a.debug("Value stored using session storage",n,o);else{if(e.cookie===i)return void a.error(g.noCookieStorage);e.cookie(n,o,r),a.debug("Value stored using cookie",n,o,r)}},get:function(n,o){var r;return"localstorage"==m.storageMethod&&t.localStorage!==i?r=t.localStorage.getItem(n):"sessionstorage"==m.storageMethod&&t.sessionStorage!==i?r=t.sessionStorage.getItem(n):e.cookie!==i?r=e.cookie(n):a.error(g.noCookieStorage),("undefined"==r||"null"==r||r===i||null===r)&&(r=i),r},remove:function(n){var o=a.get.storageOptions();"localstorage"==m.storageMethod&&t.localStorage!==i?t.localStorage.removeItem(n):"sessionstorage"==m.storageMethod&&t.sessionStorage!==i?t.sessionStorage.removeItem(n):e.cookie!==i?e.removeCookie(n,o):a.error(g.noStorage)}},setting:function(t,n){if(a.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,m,t);else{if(n===i)return m[t];m[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,a,t);else{if(n===i)return a[t];a[t]=n}},debug:function(){m.debug&&(m.performance?a.performance.log(arguments):(a.debug=Function.prototype.bind.call(console.info,console,m.name+":"),a.debug.apply(console,arguments)))},verbose:function(){m.verbose&&m.debug&&(m.performance?a.performance.log(arguments):(a.verbose=Function.prototype.bind.call(console.info,console,m.name+":"),a.verbose.apply(console,arguments)))},error:function(){a.error=Function.prototype.bind.call(console.error,console,m.name+":"),a.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;m.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:x,"Execution Time":n})),clearTimeout(a.performance.timer),a.performance.timer=setTimeout(a.performance.display,500)},display:function(){var t=m.name+":",n=0;s=!1,clearTimeout(a.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",r&&(t+=" '"+r+"'"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,r){var s,c,l,u=C;return n=n||d,r=x||r,"string"==typeof t&&u!==i&&(t=t.split(/[\. ]/),s=t.length-1,e.each(t,function(n,o){var r=n!=s?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(u[r])&&n!=s)u=u[r];else{if(u[r]!==i)return c=u[r],!1;if(!e.isPlainObject(u[o])||n==s)return u[o]!==i?(c=u[o],!1):(a.error(g.method,t),!1);u=u[o]}})),e.isFunction(c)?l=c.apply(r,n):c!==i&&(l=c),e.isArray(o)?o.push(l):o!==i?o=[o,l]:l!==i&&(o=l),c}},u?(C===i&&a.initialize(),a.invoke(l)):(C!==i&&C.invoke("destroy"),a.initialize())}),o!==i?o:this},e.fn.nag.settings={name:"Nag",debug:!1,verbose:!1,performance:!0,namespace:"Nag",persist:!1,displayTime:0,animation:{show:"slide",hide:"slide"},context:!1,detachable:!1,expires:30,domain:!1,path:"/",storageMethod:"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(){}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.popup=function(o){var a,r=e(this),s=e(n),c=e(t),l=e("body"),u=r.selector||"",d=!0,m=(new Date).getTime(),f=[],g=arguments[0],p="string"==typeof g,v=[].slice.call(arguments,1);return r.each(function(){var n,r,h,b,y,x=e.isPlainObject(o)?e.extend(!0,{},e.fn.popup.settings,o):e.extend({},e.fn.popup.settings),C=x.selector,w=x.className,k=x.error,S=x.metadata,T=x.namespace,A="."+x.namespace,R="module-"+T,E=e(this),P=e(x.context),F=x.target?e(x.target):E,D=0,O=!1,q=!1,j=this,z=E.data(R);y={initialize:function(){y.debug("Initializing",E),y.createID(),y.bind.events(),!y.exists()&&x.preserve&&y.create(),y.instantiate()},instantiate:function(){y.verbose("Storing instance",y),z=y,E.data(R,z)},refresh:function(){x.popup?n=e(x.popup).eq(0):x.inline&&(n=F.nextAll(C.popup).eq(0),x.popup=n),x.popup?(n.addClass(w.loading),r=y.get.offsetParent(),n.removeClass(w.loading),x.movePopup&&y.has.popup()&&y.get.offsetParent(n)[0]!==r[0]&&(y.debug("Moving popup to the same offset parent as activating element"),n.detach().appendTo(r))):r=x.inline?y.get.offsetParent(F):y.has.popup()?y.get.offsetParent(n):l,r.is("html")&&r[0]!==l[0]&&(y.debug("Setting page as offset parent"),r=l),y.get.variation()&&y.set.variation()},reposition:function(){y.refresh(),y.set.position()},destroy:function(){y.debug("Destroying previous module"),n&&!x.preserve&&y.removePopup(),clearTimeout(y.hideTimer),clearTimeout(y.showTimer),c.off(h),E.off(A).removeData(R)},event:{start:function(t){var n=e.isPlainObject(x.delay)?x.delay.show:x.delay;clearTimeout(y.hideTimer),q||(y.showTimer=setTimeout(y.show,n))},end:function(){var t=e.isPlainObject(x.delay)?x.delay.hide:x.delay;clearTimeout(y.showTimer),y.hideTimer=setTimeout(y.hide,t)},touchstart:function(e){q=!0,y.show()},resize:function(){y.is.visible()&&y.set.position()},hideGracefully:function(t){t&&0===e(t.target).closest(C.popup).length?(y.debug("Click occurred outside popup hiding popup"),y.hide()):y.debug("Click was inside popup, keeping popup open")}},create:function(){var t=y.get.html(),i=y.get.title(),o=y.get.content();t||o||i?(y.debug("Creating pop-up html"),t||(t=x.templates.popup({title:i,content:o})),n=e("

").addClass(w.popup).data(S.activator,E).html(t),x.inline?(y.verbose("Inserting popup element inline",n),n.insertAfter(E)):(y.verbose("Appending popup element to body",n),n.appendTo(P)),y.refresh(),y.set.variation(),x.hoverable&&y.bind.popup(),x.onCreate.call(n,j)):0!==F.next(C.popup).length?(y.verbose("Pre-existing popup found"),x.inline=!0,x.popups=F.next(C.popup).data(S.activator,E),y.refresh(),x.hoverable&&y.bind.popup()):x.popup?(e(x.popup).data(S.activator,E),y.verbose("Used popup specified in settings"),y.refresh(),x.hoverable&&y.bind.popup()):y.debug("No content specified skipping display",j)},createID:function(){b=(Math.random().toString(16)+"000000000").substr(2,8),h="."+b,y.verbose("Creating unique id for element",b)},toggle:function(){y.debug("Toggling pop-up"),y.is.hidden()?(y.debug("Popup is hidden, showing pop-up"),y.unbind.close(),y.show()):(y.debug("Popup is visible, hiding pop-up"),y.hide())},show:function(e){if(e=e||function(){},y.debug("Showing pop-up",x.transition),y.is.hidden()&&(!y.is.active()||!y.is.dropdown())){if(y.exists()||y.create(),x.onShow.call(n,j)===!1)return void y.debug("onShow callback returned false, cancelling popup animation");x.preserve||x.popup||y.refresh(),n&&y.set.position()&&(y.save.conditions(),x.exclusive&&y.hideAll(),y.animate.show(e))}},hide:function(e){if(e=e||function(){},y.is.visible()||y.is.animating()){if(x.onHide.call(n,j)===!1)return void y.debug("onHide callback returned false, cancelling popup animation");y.remove.visible(),y.unbind.close(),y.restore.conditions(),y.animate.hide(e)}},hideAll:function(){e(C.popup).filter("."+w.visible).each(function(){e(this).data(S.activator).popup("hide")})},exists:function(){return n?x.inline||x.popup?y.has.popup():n.closest(P).length>=1?!0:!1:!1},removePopup:function(){y.has.popup()&&!x.popup&&(y.debug("Removing popup",n),n.remove(),n=i,x.onRemove.call(n,j))},save:{conditions:function(){y.cache={title:E.attr("title")},y.cache.title&&E.removeAttr("title"),y.verbose("Saving original attributes",y.cache.title)}},restore:{conditions:function(){return y.cache&&y.cache.title&&(E.attr("title",y.cache.title),y.verbose("Restoring original attributes",y.cache.title)),!0}},animate:{show:function(t){t=e.isFunction(t)?t:function(){},x.transition&&e.fn.transition!==i&&E.transition("is supported")?(y.set.visible(),n.transition({animation:x.transition+" in",queue:!1,debug:x.debug,verbose:x.verbose,duration:x.duration,onComplete:function(){y.bind.close(),t.call(n,j),x.onVisible.call(n,j)}})):y.error(k.noTransition)},hide:function(t){return t=e.isFunction(t)?t:function(){},y.debug("Hiding pop-up"),x.onHide.call(n,j)===!1?void y.debug("onHide callback returned false, cancelling popup animation"):void(x.transition&&e.fn.transition!==i&&E.transition("is supported")?n.transition({animation:x.transition+" out",queue:!1,duration:x.duration,debug:x.debug,verbose:x.verbose,onComplete:function(){y.reset(),t.call(n,j),x.onHidden.call(n,j)}}):y.error(k.noTransition))}},change:{content:function(e){n.html(e)}},get:{html:function(){return E.removeData(S.html),E.data(S.html)||x.html},title:function(){return E.removeData(S.title),E.data(S.title)||x.title},content:function(){return E.removeData(S.content),E.data(S.content)||E.attr("title")||x.content},variation:function(){return E.removeData(S.variation),E.data(S.variation)||x.variation},popup:function(){return n},popupOffset:function(){return n.offset()},calculations:function(){var e,i=F[0],o=x.inline||x.popup&&x.movePopup?F.position():F.offset(),a={};return a={target:{element:F[0],width:F.outerWidth(),height:F.outerHeight(),top:o.top,left:o.left,margin:{}},popup:{width:n.outerWidth(),height:n.outerHeight()},parent:{width:r.outerWidth(),height:r.outerHeight()},screen:{scroll:{top:c.scrollTop(),left:c.scrollLeft()},width:c.width(),height:c.height()}},x.setFluidWidth&&y.is.fluid()&&(a.container={width:n.parent().outerWidth()},a.popup.width=a.container.width),a.target.margin.top=x.inline?parseInt(t.getComputedStyle(i).getPropertyValue("margin-top"),10):0,a.target.margin.left=x.inline?y.is.rtl()?parseInt(t.getComputedStyle(i).getPropertyValue("margin-right"),10):parseInt(t.getComputedStyle(i).getPropertyValue("margin-left"),10):0,e=a.screen,a.boundary={top:e.scroll.top,bottom:e.scroll.top+e.height,left:e.scroll.left,right:e.scroll.left+e.width},a},id:function(){return b},startEvent:function(){return"hover"==x.on?"mouseenter":"focus"==x.on?"focus":!1},scrollEvent:function(){return"scroll"},endEvent:function(){return"hover"==x.on?"mouseleave":"focus"==x.on?"blur":!1},distanceFromBoundary:function(e,t){var n,i,o={};return e=e||y.get.offset(),t=t||y.get.calculations(),n=t.popup,i=t.boundary,e&&(o={top:e.top-i.top,left:e.left-i.left,right:i.right-(e.left+n.width),bottom:i.bottom-(e.top+n.height)},y.verbose("Distance from boundaries determined",e,o)),o},offsetParent:function(t){var n=t!==i?t[0]:E[0],o=n.parentNode,a=e(o);if(o)for(var r="none"===a.css("transform"),s="static"===a.css("position"),c=a.is("html");o&&!c&&s&&r;)o=o.parentNode,a=e(o),r="none"===a.css("transform"),s="static"===a.css("position"),c=a.is("html");return a&&a.length>0?a:e()},positions:function(){return{"top left":!1,"top center":!1,"top right":!1,"bottom left":!1,"bottom center":!1,"bottom right":!1,"left center":!1,"right center":!1}},nextPosition:function(e){var t=e.split(" "),n=t[0],i=t[1],o={top:"bottom",bottom:"top",left:"right",right:"left"},a={left:"center",center:"right",right:"left"},r={"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"},s="top"==n||"bottom"==n,c=!1,l=!1,u=!1;return O||(y.verbose("All available positions available"),O=y.get.positions()),y.debug("Recording last position tried",e),O[e]=!0,"opposite"===x.prefer&&(u=[o[n],i],u=u.join(" "),c=O[u]===!0,y.debug("Trying opposite strategy",u)),"adjacent"===x.prefer&&s&&(u=[n,a[i]],u=u.join(" "),l=O[u]===!0,y.debug("Trying adjacent strategy",u)),(l||c)&&(y.debug("Using backup position",u),u=r[e]),u}},set:{position:function(e,t){if(0===F.length||0===n.length)return void y.error(k.notFound);var o,a,r,s,c,l,u,d;if(t=t||y.get.calculations(),e=e||E.data(S.position)||x.position,o=E.data(S.offset)||x.offset,a=x.distanceAway,r=t.target,s=t.popup,c=t.parent,0===r.width&&0===r.height&&!(r.element instanceof SVGGraphicsElement))return y.debug("Popup target is hidden, no action taken"),!1;switch(x.inline&&(y.debug("Adding margin to calculation",r.margin),"left center"==e||"right center"==e?(o+=r.margin.top,a+=-r.margin.left):"top left"==e||"top center"==e||"top right"==e?(o+=r.margin.left,a-=r.margin.top):(o+=r.margin.left,a+=r.margin.top)),y.debug("Determining popup position from calculations",e,t),y.is.rtl()&&(e=e.replace(/left|right/g,function(e){return"left"==e?"right":"left"}),y.debug("RTL: Popup position updated",e)),D==x.maxSearchDepth&&"string"==typeof x.lastResort&&(e=x.lastResort),e){case"top left":l={top:"auto",bottom:c.height-r.top+a,left:r.left+o,right:"auto"};break;case"top center":l={bottom:c.height-r.top+a,left:r.left+r.width/2-s.width/2+o,top:"auto",right:"auto"};break;case"top right":l={bottom:c.height-r.top+a,right:c.width-r.left-r.width-o,top:"auto",left:"auto"};break;case"left center":l={top:r.top+r.height/2-s.height/2+o,right:c.width-r.left+a,left:"auto",bottom:"auto"};break;case"right center":l={top:r.top+r.height/2-s.height/2+o,left:r.left+r.width+a,bottom:"auto",right:"auto"};break;case"bottom left":l={top:r.top+r.height+a,left:r.left+o,bottom:"auto",right:"auto"};break;case"bottom center":l={top:r.top+r.height+a,left:r.left+r.width/2-s.width/2+o,bottom:"auto",right:"auto"};break;case"bottom right":l={top:r.top+r.height+a,right:c.width-r.left-r.width-o,left:"auto",bottom:"auto"}}if(l===i&&y.error(k.invalidPosition,e),y.debug("Calculated popup positioning values",l),n.css(l).removeClass(w.position).addClass(e).addClass(w.loading),u=y.get.popupOffset(), +d=y.get.distanceFromBoundary(u,t),y.is.offstage(d,e)){if(y.debug("Position is outside viewport",e),D0}},is:{offstage:function(t,n){var i=[];return e.each(t,function(e,t){t<-x.jitter&&(y.debug("Position exceeds allowable distance from edge",e,t,n),i.push(e))}),i.length>0?!0:!1},active:function(){return E.hasClass(w.active)},animating:function(){return n!==i&&n.hasClass(w.animating)},fluid:function(){return n!==i&&n.hasClass(w.fluid)},visible:function(){return n!==i&&n.hasClass(w.visible)},dropdown:function(){return E.hasClass(w.dropdown)},hidden:function(){return!y.is.visible()},rtl:function(){return"rtl"==E.css("direction")}},reset:function(){y.remove.visible(),x.preserve?e.fn.transition!==i&&n.transition("remove transition"):y.removePopup()},setting:function(t,n){if(e.isPlainObject(t))e.extend(!0,x,t);else{if(n===i)return x[t];x[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,y,t);else{if(n===i)return y[t];y[t]=n}},debug:function(){x.debug&&(x.performance?y.performance.log(arguments):(y.debug=Function.prototype.bind.call(console.info,console,x.name+":"),y.debug.apply(console,arguments)))},verbose:function(){x.verbose&&x.debug&&(x.performance?y.performance.log(arguments):(y.verbose=Function.prototype.bind.call(console.info,console,x.name+":"),y.verbose.apply(console,arguments)))},error:function(){y.error=Function.prototype.bind.call(console.error,console,x.name+":"),y.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;x.performance&&(t=(new Date).getTime(),i=m||t,n=t-i,m=t,f.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:j,"Execution Time":n})),clearTimeout(y.performance.timer),y.performance.timer=setTimeout(y.performance.display,500)},display:function(){var t=x.name+":",n=0;m=!1,clearTimeout(y.performance.timer),e.each(f,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",u&&(t+=" '"+u+"'"),(console.group!==i||console.table!==i)&&f.length>0&&(console.groupCollapsed(t),console.table?console.table(f):e.each(f,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),f=[]}},invoke:function(t,n,o){var r,s,c,l=z;return n=n||v,o=j||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},p?(z===i&&y.initialize(),y.invoke(g)):(z!==i&&z.invoke("destroy"),y.initialize())}),a!==i?a:this},e.fn.popup.settings={name:"Popup",debug:!1,verbose:!1,performance:!0,namespace:"popup",onCreate:function(){},onRemove:function(){},onShow:function(){},onVisible:function(){},onHide:function(){},onUnplaceable:function(){},onHidden:function(){},on:"hover",addTouchEvents:!0,position:"top left",variation:"",movePopup:!0,target:!1,popup:!1,inline:!1,preserve:!1,hoverable:!1,content:!1,html:!1,title:!1,closable:!0,hideOnScroll:"auto",exclusive:!1,context:"body",prefer:"opposite",lastResort:!1,delay:{show:50,hide:70},setFluidWidth:!0,duration:200,transition:"scale",distanceAway:0,jitter:2,offset:0,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",animating:"animating",dropdown:"dropdown",fluid:"fluid",loading:"loading",popup:"ui popup",position:"top left center bottom right",visible:"visible"},selector:{popup:".ui.popup"},templates:{escape:function(e){var t=/[&<>"'`]/g,n=/[&<>"'`]/,i={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},o=function(e){return i[e]};return n.test(e)?e.replace(t,o):e},popup:function(t){var n="",o=e.fn.popup.settings.templates.escape;return typeof t!==i&&(typeof t.title!==i&&t.title&&(t.title=o(t.title),n+='"),typeof t.content!==i&&t.content&&(t.content=o(t.content),n+='

'+t.content+"

").addClass(p.results).appendTo(S))}},inject:{result:function(e,t,n){f.verbose("Injecting result into results");var o=n!==i?R.children().eq(n).children(y.result).eq(t):R.children(y.result).eq(t);f.verbose("Injecting results metadata",o),o.data(v.result,e)},id:function(t){f.debug("Injecting unique ids into results");var n=0,o=0;return"category"===g.type?e.each(t,function(t,a){o=0,e.each(a.results,function(e,t){var r=a.results[e];r.id===i&&(r.id=f.create.id(o,n)),f.inject.result(r,o,n),o++}),n++}):e.each(t,function(e,n){var a=t[e];a.id===i&&(a.id=f.create.id(o)),f.inject.result(a,o),o++}),t}},save:{results:function(e){f.verbose("Saving current search results to metadata",e),S.data(v.results,e)}},write:{cache:function(e,t){var n=S.data(v.cache)!==i?S.data(v.cache):{};g.cache&&(f.verbose("Writing generated html to cache",e,t),n[e]=t,S.data(v.cache,n))}},addResults:function(t){return e.isFunction(g.onResultsAdd)&&g.onResultsAdd.call(R,t)===!1?(f.debug("onResultsAdd callback cancelled default action"),!1):(R.html(t),void(f.can.show()&&f.showResults()))},showResults:function(){f.is.visible()||(f.can.transition()?(f.debug("Showing results with css animations"),R.transition({animation:g.transition+" in",debug:g.debug,verbose:g.verbose,duration:g.duration,queue:!0})):(f.debug("Showing results with javascript"),R.stop().fadeIn(g.duration,g.easing)),g.onResultsOpen.call(R))},hideResults:function(){f.is.visible()&&(f.can.transition()?(f.debug("Hiding results with css animations"),R.transition({animation:g.transition+" out",debug:g.debug,verbose:g.verbose,duration:g.duration,queue:!0})):(f.debug("Hiding results with javascript"),R.stop().fadeOut(g.duration,g.easing)),g.onResultsClose.call(R))},generateResults:function(t){f.debug("Generating html from response",t);var n=g.templates[g.type],i=e.isPlainObject(t[b.results])&&!e.isEmptyObject(t[b.results]),o=e.isArray(t[b.results])&&t[b.results].length>0,a="";return i||o?(g.maxResults>0&&(i?"standard"==g.type&&f.error(x.maxResults):t[b.results]=t[b.results].slice(0,g.maxResults)), +e.isFunction(n)?a=n(t,b):f.error(x.noTemplate,!1)):a=f.displayMessage(x.noResults,"empty"),g.onResults.call(E,t),a},displayMessage:function(e,t){return t=t||"standard",f.debug("Displaying message",e,t),f.addResults(g.templates.message(e,t)),g.templates.message(e,t)},setting:function(t,n){if(e.isPlainObject(t))e.extend(!0,g,t);else{if(n===i)return g[t];g[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,f,t);else{if(n===i)return f[t];f[t]=n}},debug:function(){g.debug&&(g.performance?f.performance.log(arguments):(f.debug=Function.prototype.bind.call(console.info,console,g.name+":"),f.debug.apply(console,arguments)))},verbose:function(){g.verbose&&g.debug&&(g.performance?f.performance.log(arguments):(f.verbose=Function.prototype.bind.call(console.info,console,g.name+":"),f.verbose.apply(console,arguments)))},error:function(){f.error=Function.prototype.bind.call(console.error,console,g.name+":"),f.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;g.performance&&(t=(new Date).getTime(),i=c||t,n=t-i,c=t,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:E,"Execution Time":n})),clearTimeout(f.performance.timer),f.performance.timer=setTimeout(f.performance.display,500)},display:function(){var t=g.name+":",n=0;c=!1,clearTimeout(f.performance.timer),e.each(l,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),r.length>1&&(t+=" ("+r.length+")"),(console.group!==i||console.table!==i)&&l.length>0&&(console.groupCollapsed(t),console.table?console.table(l):e.each(l,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(t,n,o){var r,s,c,l=P;return n=n||m,o=E||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},d?(P===i&&f.initialize(),f.invoke(u)):(P!==i&&P.invoke("destroy"),f.initialize())}),a!==i?a:this},e.fn.search.settings={name:"Search",namespace:"search",debug:!1,verbose:!1,performance:!0,type:"standard",minCharacters:1,apiSettings:!1,source:!1,searchFields:["title","description"],displayField:"",searchFullText:!0,automatic:!0,hideDelay:0,searchDelay:200,maxResults:7,cache:!0,transition:"scale",duration:200,easing:"easeOutExpo",onSelect:!1,onResultsAdd:!1,onSearchQuery:function(e){},onResults:function(e){},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.",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|^)"},fields:{categories:"results",categoryName:"name",categoryResults:"results",description:"description",image:"image",price:"price",results:"results",title:"title",url:"url",action:"action",actionText:"text",actionURL:"url"},selector:{prompt:".prompt",searchButton:".search.button",results:".results",category:".category",result:".result",title:".title, .name"},templates:{escape:function(e){var t=/[&<>"'`]/g,n=/[&<>"'`]/,i={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},o=function(e){return i[e]};return n.test(e)?e.replace(t,o):e},message:function(e,t){var n="";return e!==i&&t!==i&&(n+='

"),n},category:function(t,n){{var o="";e.fn.search.settings.templates.escape}return t[n.categoryResults]!==i?(e.each(t[n.categoryResults],function(t,a){a[n.results]!==i&&a.results.length>0&&(o+='

',a[n.categoryName]!==i&&(o+='

'+a[n.categoryName]+"

"),e.each(a.results,function(e,t){o+=t[n.url]?'':'',t[n.image]!==i&&(o+='

'),o+='

',t[n.price]!==i&&(o+='

'+t[n.price]+"

"),t[n.title]!==i&&(o+='

'+t[n.title]+"

"),t[n.description]!==i&&(o+='

'+t[n.description]+"

"),o+="

",o+=""}),o+="

")}),t[n.action]&&(o+=''+t[n.action][n.actionText]+""),o):!1},standard:function(t,n){var o="";return t[n.results]!==i?(e.each(t[n.results],function(e,t){o+=t[n.url]?'':'',t[n.image]!==i&&(o+='

'),o+='

',t[n.price]!==i&&(o+='

'+t[n.price]+"

"),t[n.title]!==i&&(o+='

'+t[n.title]+"

"),t[n.description]!==i&&(o+='

'+t[n.description]+"

"),o+="

",o+=""}),t[n.action]&&(o+=''+t[n.action][n.actionText]+""),o):!1}}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.shape=function(o){var a,r=e(this),s=(e("body"),(new Date).getTime()),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1),m=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)};return r.each(function(){var t,f,g,p=r.selector||"",v=e.isPlainObject(o)?e.extend(!0,{},e.fn.shape.settings,o):e.extend({},e.fn.shape.settings),h=v.namespace,b=v.selector,y=v.error,x=v.className,C="."+h,w="module-"+h,k=e(this),S=k.find(b.sides),T=k.find(b.side),A=!1,R=this,E=k.data(w);g={initialize:function(){g.verbose("Initializing module for",R),g.set.defaultSide(),g.instantiate()},instantiate:function(){g.verbose("Storing instance of module",g),E=g,k.data(w,E)},destroy:function(){g.verbose("Destroying previous module for",R),k.removeData(w).off(C)},refresh:function(){g.verbose("Refreshing selector cache for",R),k=e(R),S=e(this).find(b.shape),T=e(this).find(b.side)},repaint:function(){g.verbose("Forcing repaint event");{var e=S[0]||n.createElement("div");e.offsetWidth}},animate:function(e,n){g.verbose("Animating box with properties",e),n=n||function(e){g.verbose("Executing animation callback"),e!==i&&e.stopPropagation(),g.reset(),g.set.active()},v.beforeChange.call(f[0]),g.get.transitionEvent()?(g.verbose("Starting CSS animation"),k.addClass(x.animating),S.css(e).one(g.get.transitionEvent(),n),g.set.duration(v.duration),m(function(){k.addClass(x.animating),t.addClass(x.hidden)})):n()},queue:function(e){g.debug("Queueing animation of",e),S.one(g.get.transitionEvent(),function(){g.debug("Executing queued animation"),setTimeout(function(){k.shape(e)},0)})},reset:function(){g.verbose("Animating states reset"),k.removeClass(x.animating).attr("style","").removeAttr("style"),S.attr("style","").removeAttr("style"),T.attr("style","").removeAttr("style").removeClass(x.hidden),f.removeClass(x.animating).attr("style","").removeAttr("style")},is:{complete:function(){return T.filter("."+x.active)[0]==f[0]},animating:function(){return k.hasClass(x.animating)}},set:{defaultSide:function(){t=k.find("."+v.className.active),f=t.next(b.side).length>0?t.next(b.side):k.find(b.side).first(),A=!1,g.verbose("Active side set to",t),g.verbose("Next side set to",f)},duration:function(e){e=e||v.duration,e="number"==typeof e?e+"ms":e,g.verbose("Setting animation duration",e),(v.duration||0===v.duration)&&S.add(T).css({"-webkit-transition-duration":e,"-moz-transition-duration":e,"-ms-transition-duration":e,"-o-transition-duration":e,"transition-duration":e})},currentStageSize:function(){var e=k.find("."+v.className.active),t=e.outerWidth(!0),n=e.outerHeight(!0);k.css({width:t,height:n})},stageSize:function(){var e=k.clone().addClass(x.loading),t=e.find("."+v.className.active),n=A?e.find(b.side).eq(A):t.next(b.side).length>0?t.next(b.side):e.find(b.side).first(),i={};g.set.currentStageSize(),t.removeClass(x.active),n.addClass(x.active),e.insertAfter(k),i={width:n.outerWidth(!0),height:n.outerHeight(!0)},e.remove(),k.css(i),g.verbose("Resizing stage to fit new content",i)},nextSide:function(e){A=e,f=T.filter(e),A=T.index(f),0===f.length&&(g.set.defaultSide(),g.error(y.side)),g.verbose("Next side manually set to",f)},active:function(){g.verbose("Setting new side to active",f),T.removeClass(x.active),f.addClass(x.active),v.onChange.call(f[0]),g.set.defaultSide()}},flip:{up:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip up"):(g.debug("Flipping up",f),g.set.stageSize(),g.stage.above(),g.animate(g.get.transform.up()))):void g.debug("Side already visible",f)},down:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip down"):(g.debug("Flipping down",f),g.set.stageSize(),g.stage.below(),g.animate(g.get.transform.down()))):void g.debug("Side already visible",f)},left:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip left"):(g.debug("Flipping left",f),g.set.stageSize(),g.stage.left(),g.animate(g.get.transform.left()))):void g.debug("Side already visible",f)},right:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip right"):(g.debug("Flipping right",f),g.set.stageSize(),g.stage.right(),g.animate(g.get.transform.right()))):void g.debug("Side already visible",f)},over:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip over"):(g.debug("Flipping over",f),g.set.stageSize(),g.stage.behind(),g.animate(g.get.transform.over()))):void g.debug("Side already visible",f)},back:function(){return!g.is.complete()||g.is.animating()||v.allowRepeats?void(g.is.animating()?g.queue("flip back"):(g.debug("Flipping back",f),g.set.stageSize(),g.stage.behind(),g.animate(g.get.transform.back()))):void g.debug("Side already visible",f)}},get:{transform:{up:function(){var e={y:-((t.outerHeight(!0)-f.outerHeight(!0))/2),z:-(t.outerHeight(!0)/2)};return{transform:"translateY("+e.y+"px) translateZ("+e.z+"px) rotateX(-90deg)"}},down:function(){var e={y:-((t.outerHeight(!0)-f.outerHeight(!0))/2),z:-(t.outerHeight(!0)/2)};return{transform:"translateY("+e.y+"px) translateZ("+e.z+"px) rotateX(90deg)"}},left:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2),z:-(t.outerWidth(!0)/2)};return{transform:"translateX("+e.x+"px) translateZ("+e.z+"px) rotateY(90deg)"}},right:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2),z:-(t.outerWidth(!0)/2)};return{transform:"translateX("+e.x+"px) translateZ("+e.z+"px) rotateY(-90deg)"}},over:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2)};return{transform:"translateX("+e.x+"px) rotateY(180deg)"}},back:function(){var e={x:-((t.outerWidth(!0)-f.outerWidth(!0))/2)};return{transform:"translateX("+e.x+"px) rotateY(-180deg)"}}},transitionEvent:function(){var e,t=n.createElement("element"),o={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in o)if(t.style[e]!==i)return o[e]},nextSide:function(){return t.next(b.side).length>0?t.next(b.side):k.find(b.side).first()}},stage:{above:function(){var e={origin:(t.outerHeight(!0)-f.outerHeight(!0))/2,depth:{active:f.outerHeight(!0)/2,next:t.outerHeight(!0)/2}};g.verbose("Setting the initial animation position as above",f,e),S.css({transform:"translateZ(-"+e.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+e.depth.active+"px)"}),f.addClass(x.animating).css({top:e.origin+"px",transform:"rotateX(90deg) translateZ("+e.depth.next+"px)"})},below:function(){var e={origin:(t.outerHeight(!0)-f.outerHeight(!0))/2,depth:{active:f.outerHeight(!0)/2,next:t.outerHeight(!0)/2}};g.verbose("Setting the initial animation position as below",f,e),S.css({transform:"translateZ(-"+e.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+e.depth.active+"px)"}),f.addClass(x.animating).css({top:e.origin+"px",transform:"rotateX(-90deg) translateZ("+e.depth.next+"px)"})},left:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},n={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};g.verbose("Setting the initial animation position as left",f,n),S.css({transform:"translateZ(-"+n.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+n.depth.active+"px)"}),f.addClass(x.animating).css({left:n.origin+"px",transform:"rotateY(-90deg) translateZ("+n.depth.next+"px)"})},right:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},n={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};g.verbose("Setting the initial animation position as left",f,n),S.css({transform:"translateZ(-"+n.depth.active+"px)"}),t.css({transform:"rotateY(0deg) translateZ("+n.depth.active+"px)"}),f.addClass(x.animating).css({left:n.origin+"px",transform:"rotateY(90deg) translateZ("+n.depth.next+"px)"})},behind:function(){var e={active:t.outerWidth(!0),next:f.outerWidth(!0)},n={origin:(e.active-e.next)/2,depth:{active:e.next/2,next:e.active/2}};g.verbose("Setting the initial animation position as behind",f,n),t.css({transform:"rotateY(0deg)"}),f.addClass(x.animating).css({left:n.origin+"px",transform:"rotateY(-180deg)"})}},setting:function(t,n){if(g.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,v,t);else{if(n===i)return v[t];v[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,g,t);else{if(n===i)return g[t];g[t]=n}},debug:function(){v.debug&&(v.performance?g.performance.log(arguments):(g.debug=Function.prototype.bind.call(console.info,console,v.name+":"),g.debug.apply(console,arguments)))},verbose:function(){v.verbose&&v.debug&&(v.performance?g.performance.log(arguments):(g.verbose=Function.prototype.bind.call(console.info,console,v.name+":"),g.verbose.apply(console,arguments)))},error:function(){g.error=Function.prototype.bind.call(console.error,console,v.name+":"),g.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;v.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:R,"Execution Time":n})),clearTimeout(g.performance.timer),g.performance.timer=setTimeout(g.performance.display,500)},display:function(){var t=v.name+":",n=0;s=!1,clearTimeout(g.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",p&&(t+=" '"+p+"'"),r.length>1&&(t+=" ("+r.length+")"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,o){var r,s,c,l=E;return n=n||d,o=R||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},u?(E===i&&g.initialize(),g.invoke(l)):(E!==i&&E.invoke("destroy"),g.initialize())}),a!==i?a:this},e.fn.shape.settings={name:"Shape",debug:!1,verbose:!1,performance:!0,namespace:"shape",beforeChange:function(){},onChange:function(){},allowRepeats:!1,duration:!1,error:{side:"You tried to switch to a side that does not exist.",method:"The method you called is not defined"},className:{animating:"animating",hidden:"hidden",loading:"loading",active:"active"},selector:{sides:".sides",side:".side"}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.fn.sidebar=function(o){var a,r=e(this),s=e(t),c=e(n),l=e("html"),u=e("head"),d=r.selector||"",m=(new Date).getTime(),f=[],g=arguments[0],p="string"==typeof g,v=[].slice.call(arguments,1),h=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)};return r.each(function(){var r,b,y,x,C,w,k=e.isPlainObject(o)?e.extend(!0,{},e.fn.sidebar.settings,o):e.extend({},e.fn.sidebar.settings),S=k.selector,T=k.className,A=k.namespace,R=k.regExp,E=k.error,P="."+A,F="module-"+A,D=e(this),O=e(k.context),q=D.children(S.sidebar),j=O.children(S.fixed),z=O.children(S.pusher),I=this,L=D.data(F);w={initialize:function(){w.debug("Initializing sidebar",o),w.create.id(),C=w.get.transitionEvent(),w.is.ios()&&w.set.ios(),k.delaySetup?h(w.setup.layout):w.setup.layout(),h(function(){w.setup.cache()}),w.instantiate()},instantiate:function(){w.verbose("Storing instance of module",w),L=w,D.data(F,w)},create:{id:function(){y=(Math.random().toString(16)+"000000000").substr(2,8),b="."+y,w.verbose("Creating unique id for element",y)}},destroy:function(){w.verbose("Destroying previous module for",D),D.off(P).removeData(F),w.is.ios()&&w.remove.ios(),O.off(b),s.off(b),c.off(b)},event:{clickaway:function(e){var t=z.find(e.target).length>0||z.is(e.target),n=O.is(e.target);t&&(w.verbose("User clicked on dimmed page"),w.hide()),n&&(w.verbose("User clicked on dimmable context (scaled out page)"),w.hide())},touch:function(e){},containScroll:function(e){I.scrollTop<=0&&(I.scrollTop=1),I.scrollTop+I.offsetHeight>=I.scrollHeight&&(I.scrollTop=I.scrollHeight-I.offsetHeight-1)},scroll:function(t){0===e(t.target).closest(S.sidebar).length&&t.preventDefault()}},bind:{clickaway:function(){w.verbose("Adding clickaway events to context",O),k.closable&&O.on("click"+b,w.event.clickaway).on("touchend"+b,w.event.clickaway)},scrollLock:function(){k.scrollLock&&(w.debug("Disabling page scroll"),s.on("DOMMouseScroll"+b,w.event.scroll)),w.verbose("Adding events to contain sidebar scroll"),c.on("touchmove"+b,w.event.touch),D.on("scroll"+P,w.event.containScroll)}},unbind:{clickaway:function(){w.verbose("Removing clickaway events from context",O),O.off(b)},scrollLock:function(){w.verbose("Removing scroll lock from page"),c.off(b),s.off(b),D.off("scroll"+P)}},add:{inlineCSS:function(){var t,n=w.cache.width||D.outerWidth(),i=w.cache.height||D.outerHeight(),o=w.is.rtl(),a=w.get.direction(),s={left:n,right:-n,top:i,bottom:-i};o&&(w.verbose("RTL detected, flipping widths"),s.left=-n,s.right=n),t="",r=e(t).appendTo(u),w.debug("Adding sizing css to head",r)}},refresh:function(){w.verbose("Refreshing selector cache"),O=e(k.context),q=O.children(S.sidebar),z=O.children(S.pusher),j=O.children(S.fixed),w.clear.cache()},refreshSidebars:function(){w.verbose("Refreshing other sidebars"),q=O.children(S.sidebar)},repaint:function(){w.verbose("Forcing repaint event"),I.style.display="none";I.offsetHeight;I.scrollTop=I.scrollTop,I.style.display=""},setup:{cache:function(){w.cache={width:D.outerWidth(),height:D.outerHeight(),rtl:"rtl"==D.css("direction")}},layout:function(){0===O.children(S.pusher).length&&(w.debug("Adding wrapper element for sidebar"),w.error(E.pusher),z=e('

'),O.children().not(S.omitted).not(q).wrapAll(z),w.refresh()),(0===D.nextAll(S.pusher).length||D.nextAll(S.pusher)[0]!==z[0])&&(w.debug("Moved sidebar to correct parent element"),w.error(E.movedSidebar,I),D.detach().prependTo(O),w.refresh()),w.clear.cache(),w.set.pushable(),w.set.direction()}},attachEvents:function(t,n){var i=e(t);n=e.isFunction(w[n])?w[n]:w.toggle,i.length>0?(w.debug("Attaching sidebar events to element",t,n),i.on("click"+P,n)):w.error(E.notFound,t)},show:function(t){if(t=e.isFunction(t)?t:function(){},w.is.hidden()){if(w.refreshSidebars(),k.overlay&&(w.error(E.overlay),k.transition="overlay"),w.refresh(),w.othersActive())if(w.debug("Other sidebars currently visible"),k.exclusive){if("overlay"!=k.transition)return void w.hideOthers(w.show);w.hideOthers()}else k.transition="overlay";w.pushPage(function(){t.call(I),k.onShow.call(I)}),k.onChange.call(I),k.onVisible.call(I)}else w.debug("Sidebar is already visible")},hide:function(t){t=e.isFunction(t)?t:function(){},(w.is.visible()||w.is.animating())&&(w.debug("Hiding sidebar",t),w.refreshSidebars(),w.pullPage(function(){t.call(I),k.onHidden.call(I)}),k.onChange.call(I),k.onHide.call(I))},othersAnimating:function(){return q.not(D).filter("."+T.animating).length>0},othersVisible:function(){return q.not(D).filter("."+T.visible).length>0},othersActive:function(){return w.othersVisible()||w.othersAnimating()},hideOthers:function(e){var t=q.not(D).filter("."+T.visible),n=t.length,i=0;e=e||function(){},t.sidebar("hide",function(){i++,i==n&&e()})},toggle:function(){w.verbose("Determining toggled direction"),w.is.hidden()?w.show():w.hide()},pushPage:function(t){var n,i,o,a=w.get.transition(),r="overlay"===a||w.othersActive()?D:z;t=e.isFunction(t)?t:function(){},"scale down"==k.transition&&w.scrollToTop(),w.set.transition(a),w.repaint(),n=function(){w.bind.clickaway(),w.add.inlineCSS(),w.set.animating(),w.set.visible()},i=function(){w.set.dimmed()},o=function(e){e.target==r[0]&&(r.off(C+b,o),w.remove.animating(),w.bind.scrollLock(),t.call(I))},r.off(C+b),r.on(C+b,o),h(n),k.dimPage&&!w.othersVisible()&&h(i)},pullPage:function(t){var n,i,o=w.get.transition(),a="overlay"==o||w.othersActive()?D:z;t=e.isFunction(t)?t:function(){},w.verbose("Removing context push state",w.get.direction()),w.unbind.clickaway(),w.unbind.scrollLock(),n=function(){w.set.transition(o),w.set.animating(),w.remove.visible(),k.dimPage&&!w.othersVisible()&&z.removeClass(T.dimmed)},i=function(e){e.target==a[0]&&(a.off(C+b,i),w.remove.animating(),w.remove.transition(),w.remove.inlineCSS(),("scale down"==o||k.returnScroll&&w.is.mobile())&&w.scrollBack(),t.call(I))},a.off(C+b),a.on(C+b,i),h(n)},scrollToTop:function(){w.verbose("Scrolling to top of page to avoid animation issues"),x=e(t).scrollTop(),D.scrollTop(0),t.scrollTo(0,0)},scrollBack:function(){w.verbose("Scrolling back to original page position"),t.scrollTo(0,x)},clear:{cache:function(){w.verbose("Clearing cached dimensions"),w.cache={}}},set:{ios:function(){l.addClass(T.ios)},pushed:function(){O.addClass(T.pushed)},pushable:function(){O.addClass(T.pushable)},dimmed:function(){z.addClass(T.dimmed)},active:function(){D.addClass(T.active)},animating:function(){D.addClass(T.animating)},transition:function(e){e=e||w.get.transition(),D.addClass(e)},direction:function(e){e=e||w.get.direction(),D.addClass(T[e])},visible:function(){D.addClass(T.visible)},overlay:function(){D.addClass(T.overlay)}},remove:{inlineCSS:function(){w.debug("Removing inline css styles",r),r&&r.length>0&&r.remove()},ios:function(){l.removeClass(T.ios)},pushed:function(){O.removeClass(T.pushed)},pushable:function(){O.removeClass(T.pushable)},active:function(){D.removeClass(T.active)},animating:function(){D.removeClass(T.animating)},transition:function(e){e=e||w.get.transition(),D.removeClass(e)},direction:function(e){e=e||w.get.direction(),D.removeClass(T[e])},visible:function(){D.removeClass(T.visible)},overlay:function(){D.removeClass(T.overlay)}},get:{direction:function(){return D.hasClass(T.top)?T.top:D.hasClass(T.right)?T.right:D.hasClass(T.bottom)?T.bottom:T.left},transition:function(){var e,t=w.get.direction();return e=w.is.mobile()?"auto"==k.mobileTransition?k.defaultTransition.mobile[t]:k.mobileTransition:"auto"==k.transition?k.defaultTransition.computer[t]:k.transition,w.verbose("Determined transition",e),e},transitionEvent:function(){var e,t=n.createElement("element"),o={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in o)if(t.style[e]!==i)return o[e]}},is:{ie:function(){var e=!t.ActiveXObject&&"ActiveXObject"in t,n="ActiveXObject"in t;return e||n},ios:function(){var e=navigator.userAgent,t=e.match(R.ios),n=e.match(R.mobileChrome);return t&&!n?(w.verbose("Browser was found to be iOS",e),!0):!1},mobile:function(){var e=navigator.userAgent,t=e.match(R.mobile);return t?(w.verbose("Browser was found to be mobile",e),!0):(w.verbose("Browser is not mobile, using regular transition",e),!1)},hidden:function(){return!w.is.visible()},visible:function(){return D.hasClass(T.visible)},open:function(){return w.is.visible()},closed:function(){return w.is.hidden()},vertical:function(){return D.hasClass(T.top)},animating:function(){return O.hasClass(T.animating)},rtl:function(){return w.cache.rtl===i&&(w.cache.rtl="rtl"==D.css("direction")),w.cache.rtl}},setting:function(t,n){if(w.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,k,t);else{if(n===i)return k[t];k[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,w,t);else{if(n===i)return w[t];w[t]=n}},debug:function(){k.debug&&(k.performance?w.performance.log(arguments):(w.debug=Function.prototype.bind.call(console.info,console,k.name+":"),w.debug.apply(console,arguments)))},verbose:function(){k.verbose&&k.debug&&(k.performance?w.performance.log(arguments):(w.verbose=Function.prototype.bind.call(console.info,console,k.name+":"),w.verbose.apply(console,arguments)))},error:function(){w.error=Function.prototype.bind.call(console.error,console,k.name+":"),w.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;k.performance&&(t=(new Date).getTime(),i=m||t,n=t-i,m=t,f.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:I,"Execution Time":n})),clearTimeout(w.performance.timer),w.performance.timer=setTimeout(w.performance.display,500)},display:function(){var t=k.name+":",n=0;m=!1,clearTimeout(w.performance.timer),e.each(f,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",d&&(t+=" '"+d+"'"),(console.group!==i||console.table!==i)&&f.length>0&&(console.groupCollapsed(t),console.table?console.table(f):e.each(f,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),f=[]}},invoke:function(t,n,o){var r,s,c,l=L;return n=n||v,o=I||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):(w.error(E.method,t),!1);l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},p?(L===i&&w.initialize(),w.invoke(g)):(L!==i&&w.invoke("destroy"),w.initialize())}),a!==i?a:this},e.fn.sidebar.settings={name:"Sidebar",namespace:"sidebar",debug:!1,verbose:!1,performance:!0,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:!1,closable:!0,dimPage:!0,scrollLock:!1,returnScroll:!1,delaySetup:!1,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),function(e,t,n,i){"use strict";e.fn.sticky=function(n){var o,a=e(this),r=a.selector||"",s=(new Date).getTime(),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1);return a.each(function(){var a,m,f,g,p=e.isPlainObject(n)?e.extend(!0,{},e.fn.sticky.settings,n):e.extend({},e.fn.sticky.settings),v=p.className,h=p.namespace,b=p.error,y="."+h,x="module-"+h,C=e(this),w=e(t),k=e(p.scrollContext),S=(C.selector||"",C.data(x)),T=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)},A=this;g={initialize:function(){g.determineContainer(),g.determineContext(),g.verbose("Initializing sticky",p,a),g.save.positions(),g.checkErrors(),g.bind.events(),p.observeChanges&&g.observeChanges(),g.instantiate()},instantiate:function(){g.verbose("Storing instance of module",g),S=g,C.data(x,g)},destroy:function(){g.verbose("Destroying previous instance"),g.reset(),f&&f.disconnect(),w.off("load"+y,g.event.load).off("resize"+y,g.event.resize),k.off("scrollchange"+y,g.event.scrollchange),C.removeData(x)},observeChanges:function(){var e=m[0];"MutationObserver"in t&&(f=new MutationObserver(function(e){clearTimeout(g.timer),g.timer=setTimeout(function(){g.verbose("DOM tree modified, updating sticky menu",e),g.refresh()},100)}),f.observe(A,{childList:!0,subtree:!0}),f.observe(e,{childList:!0,subtree:!0}),g.debug("Setting up mutation observer",f))},determineContainer:function(){a=C.offsetParent()},determineContext:function(){return m=p.context?e(p.context):a,0===m.length?void g.error(b.invalidContext,p.context,C):void 0},checkErrors:function(){return g.is.hidden()&&g.error(b.visible,C),g.cache.element.height>g.cache.context.height?(g.reset(),void g.error(b.elementSize,C)):void 0},bind:{events:function(){w.on("load"+y,g.event.load).on("resize"+y,g.event.resize),k.off("scroll"+y).on("scroll"+y,g.event.scroll).on("scrollchange"+y,g.event.scrollchange)}},event:{load:function(){g.verbose("Page contents finished loading"),T(g.refresh)},resize:function(){g.verbose("Window resized"),T(g.refresh)},scroll:function(){T(function(){k.triggerHandler("scrollchange"+y,k.scrollTop())})},scrollchange:function(e,t){g.stick(t),p.onScroll.call(A)}},refresh:function(e){g.reset(),p.context||g.determineContext(),e&&g.determineContainer(), +g.save.positions(),g.stick(),p.onReposition.call(A)},supports:{sticky:function(){{var t=e("

");t[0]}return t.addClass(v.supported),t.css("position").match("sticky")}},save:{lastScroll:function(e){g.lastScroll=e},elementScroll:function(e){g.elementScroll=e},positions:function(){{var e={height:k.height()},t={margin:{top:parseInt(C.css("margin-top"),10),bottom:parseInt(C.css("margin-bottom"),10)},offset:C.offset(),width:C.outerWidth(),height:C.outerHeight()},n={offset:m.offset(),height:m.outerHeight()};({height:a.outerHeight()})}g.is.standardScroll()||(g.debug("Non-standard scroll. Removing scroll offset from element offset"),e.top=k.scrollTop(),e.left=k.scrollLeft(),t.offset.top+=e.top,n.offset.top+=e.top,t.offset.left+=e.left,n.offset.left+=e.left),g.cache={fits:t.heighte&&(t="up")),t},scrollChange:function(e){return e=e||k.scrollTop(),g.lastScroll?e-g.lastScroll:0},currentElementScroll:function(){return g.elementScroll?g.elementScroll:g.is.top()?Math.abs(parseInt(C.css("top"),10))||0:Math.abs(parseInt(C.css("bottom"),10))||0},elementScroll:function(e){e=e||k.scrollTop();var t=g.cache.element,n=g.cache.scrollContext,i=g.get.scrollChange(e),o=t.height-n.height+p.offset,a=g.get.currentElementScroll(),r=a+i;return a=g.cache.fits||0>r?0:r>o?o:r}},remove:{lastScroll:function(){delete g.lastScroll},elementScroll:function(e){delete g.elementScroll},offset:function(){C.css("margin-top","")}},set:{offset:function(){g.verbose("Setting offset on element",p.offset),C.css("margin-top",p.offset)},containerSize:function(){var e=a.get(0).tagName;"HTML"===e||"body"==e?g.determineContainer():Math.abs(a.outerHeight()-g.cache.context.height)>p.jitter&&(g.debug("Context has padding, specifying exact height for container",g.cache.context.height),a.css({height:g.cache.context.height}))},minimumSize:function(){var e=g.cache.element;a.css("min-height",e.height)},scroll:function(e){g.debug("Setting scroll on element",e),g.elementScroll!=e&&(g.is.top()&&C.css("bottom","").css("top",-e),g.is.bottom()&&C.css("top","").css("bottom",e))},size:function(){0!==g.cache.element.height&&0!==g.cache.element.width&&(A.style.setProperty("width",g.cache.element.width+"px","important"),A.style.setProperty("height",g.cache.element.height+"px","important"))}},is:{standardScroll:function(){return k[0]==t},top:function(){return C.hasClass(v.top)},bottom:function(){return C.hasClass(v.bottom)},initialPosition:function(){return!g.is.fixed()&&!g.is.bound()},hidden:function(){return!C.is(":visible")},bound:function(){return C.hasClass(v.bound)},fixed:function(){return C.hasClass(v.fixed)}},stick:function(e){var t=e||k.scrollTop(),n=g.cache,i=n.fits,o=n.element,a=n.scrollContext,r=n.context,s=g.is.bottom()&&p.pushing?p.bottomOffset:p.offset,e={top:t+s,bottom:t+s+a.height},c=(g.get.direction(e.top),i?0:g.get.elementScroll(e.top)),l=!i,u=0!==o.height;u&&(g.is.initialPosition()?e.top>=r.bottom?(g.debug("Initial element position is bottom of container"),g.bindBottom()):e.top>o.top&&(o.height+e.top-c>=r.bottom?(g.debug("Initial element position is bottom of container"),g.bindBottom()):(g.debug("Initial element position is fixed"),g.fixTop())):g.is.fixed()?g.is.top()?e.top<=o.top?(g.debug("Fixed element reached top of container"),g.setInitialPosition()):o.height+e.top-c>=r.bottom?(g.debug("Fixed element reached bottom of container"),g.bindBottom()):l&&(g.set.scroll(c),g.save.lastScroll(e.top),g.save.elementScroll(c)):g.is.bottom()&&(e.bottom-o.height<=o.top?(g.debug("Bottom fixed rail has reached top of container"),g.setInitialPosition()):e.bottom>=r.bottom?(g.debug("Bottom fixed rail has reached bottom of container"),g.bindBottom()):l&&(g.set.scroll(c),g.save.lastScroll(e.top),g.save.elementScroll(c))):g.is.bottom()&&(e.top<=o.top?(g.debug("Jumped from bottom fixed to top fixed, most likely used home/end button"),g.setInitialPosition()):p.pushing?g.is.bound()&&e.bottom<=r.bottom&&(g.debug("Fixing bottom attached element to bottom of browser."),g.fixBottom()):g.is.bound()&&e.top<=r.bottom-o.height&&(g.debug("Fixing bottom attached element to top of browser."),g.fixTop())))},bindTop:function(){g.debug("Binding element to top of parent container"),g.remove.offset(),C.css({left:"",top:"",marginBottom:""}).removeClass(v.fixed).removeClass(v.bottom).addClass(v.bound).addClass(v.top),p.onTop.call(A),p.onUnstick.call(A)},bindBottom:function(){g.debug("Binding element to bottom of parent container"),g.remove.offset(),C.css({left:"",top:""}).removeClass(v.fixed).removeClass(v.top).addClass(v.bound).addClass(v.bottom),p.onBottom.call(A),p.onUnstick.call(A)},setInitialPosition:function(){g.debug("Returning to initial position"),g.unfix(),g.unbind()},fixTop:function(){g.debug("Fixing element to top of page"),g.set.minimumSize(),g.set.offset(),C.css({left:g.cache.element.left,bottom:"",marginBottom:""}).removeClass(v.bound).removeClass(v.bottom).addClass(v.fixed).addClass(v.top),p.onStick.call(A)},fixBottom:function(){g.debug("Sticking element to bottom of page"),g.set.minimumSize(),g.set.offset(),C.css({left:g.cache.element.left,bottom:"",marginBottom:""}).removeClass(v.bound).removeClass(v.top).addClass(v.fixed).addClass(v.bottom),p.onStick.call(A)},unbind:function(){g.is.bound()&&(g.debug("Removing container bound position on element"),g.remove.offset(),C.removeClass(v.bound).removeClass(v.top).removeClass(v.bottom))},unfix:function(){g.is.fixed()&&(g.debug("Removing fixed position on element"),g.remove.offset(),C.removeClass(v.fixed).removeClass(v.top).removeClass(v.bottom),p.onUnstick.call(A))},reset:function(){g.debug("Reseting elements position"),g.unbind(),g.unfix(),g.resetCSS(),g.remove.offset(),g.remove.lastScroll()},resetCSS:function(){C.css({width:"",height:""}),a.css({height:""})},setting:function(t,n){if(e.isPlainObject(t))e.extend(!0,p,t);else{if(n===i)return p[t];p[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,g,t);else{if(n===i)return g[t];g[t]=n}},debug:function(){p.debug&&(p.performance?g.performance.log(arguments):(g.debug=Function.prototype.bind.call(console.info,console,p.name+":"),g.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?g.performance.log(arguments):(g.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),g.verbose.apply(console,arguments)))},error:function(){g.error=Function.prototype.bind.call(console.error,console,p.name+":"),g.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;p.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:A,"Execution Time":n})),clearTimeout(g.performance.timer),g.performance.timer=setTimeout(g.performance.display,0)},display:function(){var t=p.name+":",n=0;s=!1,clearTimeout(g.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",r&&(t+=" '"+r+"'"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,a){var r,s,c,l=S;return n=n||d,a=A||a,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(a,n):s!==i&&(c=s),e.isArray(o)?o.push(c):o!==i?o=[o,c]:c!==i&&(o=c),s}},u?(S===i&&g.initialize(),g.invoke(l)):(S!==i&&S.invoke("destroy"),g.initialize())}),o!==i?o:this},e.fn.sticky.settings={name:"Sticky",namespace:"sticky",debug:!1,verbose:!0,performance:!0,pushing:!1,context:!1,scrollContext:t,offset:0,bottomOffset:0,jitter:5,observeChanges:!1,onReposition:function(){},onScroll:function(){},onStick:function(){},onUnstick:function(){},onTop:function(){},onBottom:function(){},error:{container:"Sticky element must be inside a relative container",visible:"Element is hidden, you must call refresh after element becomes visible",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),function(e,t,n,i){"use strict";e.fn.tab=function(o){var a,r=e(e.isFunction(this)?t:this),s=r.selector||"",c=(new Date).getTime(),l=[],u=arguments[0],d="string"==typeof u,m=[].slice.call(arguments,1),f=!1;return r.each(function(){var g,p,v,h,b,y,x=e.isPlainObject(o)?e.extend(!0,{},e.fn.tab.settings,o):e.extend({},e.fn.tab.settings),C=x.className,w=x.metadata,k=x.selector,S=x.error,T="."+x.namespace,A="module-"+x.namespace,R=e(this),E={},P=!0,F=0,D=this,O=R.data(A);b={initialize:function(){b.debug("Initializing tab menu item",R),b.fix.callbacks(),b.determineTabs(),b.debug("Determining tabs",x.context,p),x.auto&&b.set.auto(),b.bind.events(),x.history&&!f&&(b.initializeHistory(),f=!0),b.instantiate()},instantiate:function(){b.verbose("Storing instance of module",b),O=b,R.data(A,b)},destroy:function(){b.debug("Destroying tabs",R),R.removeData(A).off(T)},bind:{events:function(){e.isWindow(D)||(b.debug("Attaching tab activation events to element",R),R.on("click"+T,b.event.click))}},determineTabs:function(){var t;"parent"===x.context?(R.closest(k.ui).length>0?(t=R.closest(k.ui),b.verbose("Using closest UI element as parent",t)):t=R,g=t.parent(),b.verbose("Determined parent element for creating context",g)):x.context?(g=e(x.context),b.verbose("Using selector for tab context",x.context,g)):g=e("body"),x.childrenOnly?(p=g.children(k.tabs),b.debug("Searching tab context children for tabs",g,p)):(p=g.find(k.tabs),b.debug("Searching tab context for tabs",g,p))},fix:{callbacks:function(){e.isPlainObject(o)&&(o.onTabLoad||o.onTabInit)&&(o.onTabLoad&&(o.onLoad=o.onTabLoad,delete o.onTabLoad,b.error(S.legacyLoad,o.onLoad)),o.onTabInit&&(o.onFirstLoad=o.onTabInit,delete o.onTabInit,b.error(S.legacyInit,o.onFirstLoad)),x=e.extend(!0,{},e.fn.tab.settings,o))}},initializeHistory:function(){if(b.debug("Initializing page state"),e.address===i)return b.error(S.state),!1;if("state"==x.historyType){if(b.debug("Using HTML5 to manage state"),x.path===!1)return b.error(S.path),!1;e.address.history(!0).state(x.path)}e.address.bind("change",b.event.history.change)},event:{click:function(t){var n=e(this).data(w.tab);n!==i?(x.history?(b.verbose("Updating page state",t),e.address.value(n)):(b.verbose("Changing tab",t),b.changeTab(n)),t.preventDefault()):b.debug("No tab specified")},history:{change:function(t){var n=t.pathNames.join("/")||b.get.initialPath(),o=x.templates.determineTitle(n)||!1;b.performance.display(),b.debug("History change event",n,t),y=t,n!==i&&b.changeTab(n),o&&e.address.title(o)}}},refresh:function(){v&&(b.debug("Refreshing tab",v),b.changeTab(v))},cache:{read:function(e){return e!==i?E[e]:!1},add:function(e,t){e=e||v,b.debug("Adding cached content for",e),E[e]=t},remove:function(e){e=e||v,b.debug("Removing cached content for",e),delete E[e]}},set:{auto:function(){var t="string"==typeof x.path?x.path.replace(/\/$/,"")+"/{$tab}":"/{$tab}";b.verbose("Setting up automatic tab retrieval from server",t),e.isPlainObject(x.apiSettings)?x.apiSettings.url=t:x.apiSettings={url:t}},loading:function(e){var t=b.get.tabElement(e),n=t.hasClass(C.loading);n||(b.verbose("Setting loading state for",t),t.addClass(C.loading).siblings(p).removeClass(C.active+" "+C.loading),t.length>0&&x.onRequest.call(t[0],e))},state:function(t){e.address.value(t)}},changeTab:function(n){var i=t.history&&t.history.pushState,o=i&&x.ignoreFirstLoad&&P,a=x.auto||e.isPlainObject(x.apiSettings),r=a&&!o?b.utilities.pathToArray(n):b.get.defaultPathArray(n);n=b.utilities.arrayToPath(r),e.each(r,function(t,i){var s,c,l,u,d=r.slice(0,t+1),m=b.utilities.arrayToPath(d),f=b.is.tab(m),p=t+1==r.length,k=b.get.tabElement(m);if(b.verbose("Looking for tab",i),f){if(b.verbose("Tab was found",i),v=m,h=b.utilities.filterArray(r,d),p?u=!0:(c=r.slice(0,t+2),l=b.utilities.arrayToPath(c),u=!b.is.tab(l),u&&b.verbose("Tab parameters found",c)),u&&a)return o?(b.debug("Ignoring remote content on first tab load",m),P=!1,b.cache.add(n,k.html()),b.activate.all(m),x.onFirstLoad.call(k[0],m,h,y),x.onLoad.call(k[0],m,h,y)):(b.activate.navigation(m),b.fetch.content(m,n)),!1;b.debug("Opened local tab",m),b.activate.all(m),b.cache.read(m)||(b.cache.add(m,!0),b.debug("First time tab loaded calling tab init"),x.onFirstLoad.call(k[0],m,h,y)),x.onLoad.call(k[0],m,h,y)}else{if(-1!=n.search("/")||""===n)return b.error(S.missingTab,R,g,m),!1;if(s=e("#"+n+', a[name="'+n+'"]'),m=s.closest("[data-tab]").data(w.tab),k=b.get.tabElement(m),s&&s.length>0&&m)return b.debug("Anchor link used, opening parent tab",k,s),k.hasClass(C.active)||setTimeout(function(){b.scrollTo(s)},0),b.activate.all(m),b.cache.read(m)||(b.cache.add(m,!0),b.debug("First time tab loaded calling tab init"),x.onFirstLoad.call(k[0],m,h,y)),x.onLoad.call(k[0],m,h,y),!1}})},scrollTo:function(t){var i=t&&t.length>0?t.offset().top:!1;i!==!1&&(b.debug("Forcing scroll to an in-page link in a hidden tab",i,t),e(n).scrollTop(i))},update:{content:function(e,t,n){var o=b.get.tabElement(e),a=o[0];n=n!==i?n:x.evaluateScripts,n?(b.debug("Updating HTML and evaluating inline scripts",e,t),o.html(t)):(b.debug("Updating HTML",e,t),a.innerHTML=t)}},fetch:{content:function(t,n){var o,a,r=b.get.tabElement(t),s={dataType:"html",encodeParameters:!1,on:"now",cache:x.alwaysRefresh,headers:{"X-Remote":!0},onSuccess:function(e){b.cache.add(n,e),b.update.content(t,e),t==v?(b.debug("Content loaded",t),b.activate.tab(t)):b.debug("Content loaded in background",t),x.onFirstLoad.call(r[0],t,h,y),x.onLoad.call(r[0],t,h,y)},urlData:{tab:n}},c=r.api("get request")||!1,l=c&&"pending"===c.state();n=n||t,a=b.cache.read(n),x.cache&&a?(b.activate.tab(t),b.debug("Adding cached content",n),"once"==x.evaluateScripts?b.update.content(t,a,!1):b.update.content(t,a),x.onLoad.call(r[0],t,h,y)):l?(b.set.loading(t),b.debug("Content is already loading",n)):e.api!==i?(o=e.extend(!0,{},x.apiSettings,s),b.debug("Retrieving remote content",n,o),b.set.loading(t),r.api(o)):b.error(S.api)}},activate:{all:function(e){b.activate.tab(e),b.activate.navigation(e)},tab:function(e){var t=b.get.tabElement(e),n=t.hasClass(C.active);b.verbose("Showing tab content for",t),n||(t.addClass(C.active).siblings(p).removeClass(C.active+" "+C.loading),t.length>0&&x.onVisible.call(t[0],e))},navigation:function(e){var t=b.get.navElement(e),n=t.hasClass(C.active);b.verbose("Activating tab navigation for",t,e),n||t.addClass(C.active).siblings(r).removeClass(C.active+" "+C.loading)}},deactivate:{all:function(){b.deactivate.navigation(),b.deactivate.tabs()},navigation:function(){r.removeClass(C.active)},tabs:function(){p.removeClass(C.active+" "+C.loading)}},is:{tab:function(e){return e!==i?b.get.tabElement(e).length>0:!1}},get:{initialPath:function(){return r.eq(0).data(w.tab)||p.eq(0).data(w.tab)},path:function(){return e.address.value()},defaultPathArray:function(e){return b.utilities.pathToArray(b.get.defaultPath(e))},defaultPath:function(e){var t=r.filter("[data-"+w.tab+'^="'+e+'/"]').eq(0),n=t.data(w.tab)||!1;if(n){if(b.debug("Found default tab",n),F0?t:n},tab:function(){return v}},utilities:{filterArray:function(t,n){return e.grep(t,function(t){return-1==e.inArray(t,n)})},last:function(t){return e.isArray(t)?t[t.length-1]:!1},pathToArray:function(e){return e===i&&(e=v),"string"==typeof e?e.split("/"):[e]},arrayToPath:function(t){return e.isArray(t)?t.join("/"):!1}},setting:function(t,n){if(b.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,x,t);else{if(n===i)return x[t];x[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,b,t);else{if(n===i)return b[t];b[t]=n}},debug:function(){x.debug&&(x.performance?b.performance.log(arguments):(b.debug=Function.prototype.bind.call(console.info,console,x.name+":"),b.debug.apply(console,arguments)))},verbose:function(){x.verbose&&x.debug&&(x.performance?b.performance.log(arguments):(b.verbose=Function.prototype.bind.call(console.info,console,x.name+":"),b.verbose.apply(console,arguments)))},error:function(){b.error=Function.prototype.bind.call(console.error,console,x.name+":"),b.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;x.performance&&(t=(new Date).getTime(),i=c||t,n=t-i,c=t,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:D,"Execution Time":n})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,500)},display:function(){var t=x.name+":",n=0;c=!1,clearTimeout(b.performance.timer),e.each(l,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),(console.group!==i||console.table!==i)&&l.length>0&&(console.groupCollapsed(t),console.table?console.table(l):e.each(l,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(t,n,o){var r,s,c,l=O;return n=n||m,o=D||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):(b.error(S.method,t),!1);l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},d?(O===i&&b.initialize(),b.invoke(u)):(O!==i&&O.invoke("destroy"),b.initialize())}),a!==i?a:this},e.tab=function(){e(t).tab.apply(this,arguments)},e.fn.tab.settings={name:"Tab",namespace:"tab",debug:!1,verbose:!1,performance:!0,auto:!1,history:!1,historyType:"hash",path:!1,context:!1,childrenOnly:!1,maxDepth:25,alwaysRefresh:!1,cache:!0,ignoreFirstLoad:!1,apiSettings:!1,evaluateScripts:"once",onFirstLoad:function(e,t,n){},onLoad:function(e,t,n){},onVisible:function(e,t,n){},onRequest:function(e,t,n){},templates:{determineTitle:function(e){}},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),function(e,t,n,i){"use strict";e.fn.transition=function(){{var o,a=e(this),r=a.selector||"",s=(new Date).getTime(),c=[],l=arguments,u=l[0],d=[].slice.call(arguments,1),m="string"==typeof u;t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)}}return a.each(function(t){var f,g,p,v,h,b,y,x,C,w=e(this),k=this;C={initialize:function(){f=C.get.settings.apply(k,l),v=f.className,p=f.error,h=f.metadata,x="."+f.namespace,y="module-"+f.namespace,g=w.data(y)||C,b=C.get.animationEndEvent(),m&&(m=C.invoke(u)),m===!1&&(C.verbose("Converted arguments into settings object",f),f.interval?C.delay(f.animate):C.animate(),C.instantiate())},instantiate:function(){C.verbose("Storing instance of module",C),g=C,w.data(y,g)},destroy:function(){C.verbose("Destroying previous module for",k),w.removeData(y)},refresh:function(){C.verbose("Refreshing display type on next animation"),delete C.displayType},forceRepaint:function(){C.verbose("Forcing element repaint");var e=w.parent(),t=w.next();0===t.length?w.detach().appendTo(e):w.detach().insertBefore(t)},repaint:function(){C.verbose("Repainting element");k.offsetWidth},delay:function(e){var n,o,r=C.get.animationDirection();r||(r=C.can.transition()?C.get.direction():"static"),e=e!==i?e:f.interval,n="auto"==f.reverse&&r==v.outward,o=n||1==f.reverse?(a.length-t)*f.interval:t*f.interval,C.debug("Delaying animation by",o),setTimeout(C.animate,o)},animate:function(e){if(f=e||f,!C.is.supported())return C.error(p.support),!1;if(C.debug("Preparing animation",f.animation),C.is.animating()){if(f.queue)return!f.allowRepeats&&C.has.direction()&&C.is.occurring()&&C.queuing!==!0?C.debug("Animation is currently occurring, preventing queueing same animation",f.animation):C.queue(f.animation),!1;if(!f.allowRepeats&&C.is.occurring())return C.debug("Animation is already occurring, will not execute repeated animation",f.animation),!1;C.debug("New animation started, completing previous early",f.animation),g.complete()}C.can.animate()?C.set.animating(f.animation):C.error(p.noAnimation,f.animation,k)},reset:function(){C.debug("Resetting animation to beginning conditions"),C.remove.animationCallbacks(),C.restore.conditions(),C.remove.animating()},queue:function(e){C.debug("Queueing animation of",e),C.queuing=!0,w.one(b+".queue"+x,function(){C.queuing=!1,C.repaint(),C.animate.apply(this,f)})},complete:function(e){C.debug("Animation complete",f.animation),C.remove.completeCallback(),C.remove.failSafe(),C.is.looping()||(C.is.outward()?(C.verbose("Animation is outward, hiding element"),C.restore.conditions(),C.hide()):C.is.inward()?(C.verbose("Animation is outward, showing element"),C.restore.conditions(),C.show()):(C.verbose("Static animation completed"),C.restore.conditions(),f.onComplete.call(k)))},force:{visible:function(){var e=w.attr("style"),t=C.get.userStyle(),n=C.get.displayType(),o=t+"display: "+n+" !important;",a=w.css("display"),r=e===i||""===e;a!==n?(C.verbose("Overriding default display to show element",n),w.attr("style",o)):r&&w.removeAttr("style")},hidden:function(){var e=w.attr("style"),t=w.css("display"),n=e===i||""===e;"none"===t||C.is.hidden()?n&&w.removeAttr("style"):(C.verbose("Overriding default display to hide element"),w.css("display","none"))}},has:{direction:function(t){var n=!1;return t=t||f.animation,"string"==typeof t&&(t=t.split(" "),e.each(t,function(e,t){(t===v.inward||t===v.outward)&&(n=!0)})),n},inlineDisplay:function(){var t=w.attr("style")||"";return e.isArray(t.match(/display.*?;/,""))}},set:{animating:function(e){var t;C.remove.completeCallback(),e=e||f.animation,t=C.get.animationClass(e),C.save.animation(t),C.force.visible(),C.remove.hidden(),C.remove.direction(),C.start.animation(t)},duration:function(e,t){t=t||f.duration,t="number"==typeof t?t+"ms":t,(t||0===t)&&(C.verbose("Setting animation duration",t),w.css({"animation-duration":t}))},direction:function(e){e=e||C.get.direction(),e==v.inward?C.set.inward():C.set.outward()},looping:function(){C.debug("Transition set to loop"),w.addClass(v.looping)},hidden:function(){w.addClass(v.transition).addClass(v.hidden)},inward:function(){C.debug("Setting direction to inward"),w.removeClass(v.outward).addClass(v.inward)},outward:function(){C.debug("Setting direction to outward"),w.removeClass(v.inward).addClass(v.outward)},visible:function(){w.addClass(v.transition).addClass(v.visible)}},start:{animation:function(e){e=e||C.get.animationClass(),C.debug("Starting tween",e),w.addClass(e).one(b+".complete"+x,C.complete),f.useFailSafe&&C.add.failSafe(),C.set.duration(f.duration),f.onStart.call(k)}},save:{animation:function(e){C.cache||(C.cache={}),C.cache.animation=e},displayType:function(e){"none"!==e&&w.data(h.displayType,e)},transitionExists:function(t,n){e.fn.transition.exists[t]=n,C.verbose("Saving existence of transition",t,n)}},restore:{conditions:function(){var e=C.get.currentAnimation();e&&(w.removeClass(e),C.verbose("Removing animation class",C.cache)),C.remove.duration()}},add:{failSafe:function(){var e=C.get.duration();C.timer=setTimeout(function(){w.triggerHandler(b)},e+f.failSafeDelay),C.verbose("Adding fail safe timer",C.timer)}},remove:{animating:function(){w.removeClass(v.animating)},animationCallbacks:function(){C.remove.queueCallback(),C.remove.completeCallback()},queueCallback:function(){w.off(".queue"+x)},completeCallback:function(){w.off(".complete"+x)},display:function(){w.css("display","")},direction:function(){w.removeClass(v.inward).removeClass(v.outward)},duration:function(){w.css("animation-duration","")},failSafe:function(){C.verbose("Removing fail safe timer",C.timer),C.timer&&clearTimeout(C.timer)},hidden:function(){w.removeClass(v.hidden)},visible:function(){w.removeClass(v.visible)},looping:function(){C.debug("Transitions are no longer looping"),C.is.looping()&&(C.reset(),w.removeClass(v.looping))},transition:function(){w.removeClass(v.visible).removeClass(v.hidden)}},get:{settings:function(t,n,i){return"object"==typeof t?e.extend(!0,{},e.fn.transition.settings,t):"function"==typeof i?e.extend({},e.fn.transition.settings,{animation:t,onComplete:i,duration:n}):"string"==typeof n||"number"==typeof n?e.extend({},e.fn.transition.settings,{animation:t,duration:n}):"object"==typeof n?e.extend({},e.fn.transition.settings,n,{animation:t}):"function"==typeof n?e.extend({},e.fn.transition.settings,{animation:t,onComplete:n}):e.extend({},e.fn.transition.settings,{animation:t})},animationClass:function(e){var t=e||f.animation,n=C.can.transition()&&!C.has.direction()?C.get.direction()+" ":"";return v.animating+" "+v.transition+" "+n+t},currentAnimation:function(){return C.cache&&C.cache.animation!==i?C.cache.animation:!1},currentDirection:function(){return C.is.inward()?v.inward:v.outward},direction:function(){return C.is.hidden()||!C.is.visible()?v.inward:v.outward},animationDirection:function(t){var n;return t=t||f.animation,"string"==typeof t&&(t=t.split(" "),e.each(t,function(e,t){t===v.inward?n=v.inward:t===v.outward&&(n=v.outward)})),n?n:!1},duration:function(e){return e=e||f.duration,e===!1&&(e=w.css("animation-duration")||0),"string"==typeof e?e.indexOf("ms")>-1?parseFloat(e):1e3*parseFloat(e):e},displayType:function(){return f.displayType?f.displayType:(w.data(h.displayType)===i&&C.can.transition(!0),w.data(h.displayType))},userStyle:function(e){return e=e||w.attr("style")||"",e.replace(/display.*?;/,"")},transitionExists:function(t){return e.fn.transition.exists[t]},animationStartEvent:function(){var e,t=n.createElement("div"),o={animation:"animationstart",OAnimation:"oAnimationStart",MozAnimation:"mozAnimationStart",WebkitAnimation:"webkitAnimationStart"};for(e in o)if(t.style[e]!==i)return o[e];return!1},animationEndEvent:function(){var e,t=n.createElement("div"),o={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"mozAnimationEnd",WebkitAnimation:"webkitAnimationEnd"};for(e in o)if(t.style[e]!==i)return o[e];return!1}},can:{transition:function(t){var n,o,a,r,s,c,l,u=f.animation,d=C.get.transitionExists(u);if(d===i||t){if(C.verbose("Determining whether animation exists"),n=w.attr("class"),o=w.prop("tagName"),a=e("<"+o+" />").addClass(n).insertAfter(w),r=a.addClass(u).removeClass(v.inward).removeClass(v.outward).addClass(v.animating).addClass(v.transition).css("animationName"),s=a.addClass(v.inward).css("animationName"),l=a.attr("class",n).removeAttr("style").removeClass(v.hidden).removeClass(v.visible).show().css("display"),C.verbose("Determining final display state",l),C.save.displayType(l),a.remove(),r!=s)C.debug("Direction exists for animation",u),c=!0;else{if("none"==r||!r)return void C.debug("No animation defined in css",u);C.debug("Static animation found",u,l),c=!1}C.save.transitionExists(u,c)}return d!==i?d:c},animate:function(){return C.can.transition()!==i}},is:{animating:function(){return w.hasClass(v.animating)},inward:function(){return w.hasClass(v.inward)},outward:function(){return w.hasClass(v.outward)},looping:function(){return w.hasClass(v.looping)},occurring:function(e){return e=e||f.animation,e="."+e.replace(" ","."),w.filter(e).length>0},visible:function(){return w.is(":visible")},hidden:function(){return"hidden"===w.css("visibility")},supported:function(){return b!==!1}},hide:function(){C.verbose("Hiding element"),C.is.animating()&&C.reset(),k.blur(),C.remove.display(),C.remove.visible(),C.set.hidden(),C.force.hidden(),f.onHide.call(k),f.onComplete.call(k)},show:function(e){C.verbose("Showing element",e),C.remove.hidden(),C.set.visible(),C.force.visible(),f.onShow.call(k),f.onComplete.call(k)},toggle:function(){C.is.visible()?C.hide():C.show()},stop:function(){C.debug("Stopping current animation"),w.triggerHandler(b)},stopAll:function(){C.debug("Stopping all animation"),C.remove.queueCallback(),w.triggerHandler(b)},clear:{queue:function(){C.debug("Clearing animation queue"),C.remove.queueCallback()}},enable:function(){C.verbose("Starting animation"),w.removeClass(v.disabled)},disable:function(){C.debug("Stopping animation"),w.addClass(v.disabled)},setting:function(t,n){if(C.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,f,t);else{if(n===i)return f[t];f[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,C,t);else{if(n===i)return C[t];C[t]=n}},debug:function(){f.debug&&(f.performance?C.performance.log(arguments):(C.debug=Function.prototype.bind.call(console.info,console,f.name+":"),C.debug.apply(console,arguments)))},verbose:function(){f.verbose&&f.debug&&(f.performance?C.performance.log(arguments):(C.verbose=Function.prototype.bind.call(console.info,console,f.name+":"),C.verbose.apply(console,arguments)))},error:function(){C.error=Function.prototype.bind.call(console.error,console,f.name+":"),C.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;f.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:k,"Execution Time":n})),clearTimeout(C.performance.timer),C.performance.timer=setTimeout(C.performance.display,500)},display:function(){var t=f.name+":",n=0;s=!1,clearTimeout(C.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",r&&(t+=" '"+r+"'"),a.length>1&&(t+=" ("+a.length+")"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,a){var r,s,c,l=g;return n=n||d,a=k||a,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):!1;l=l[o]}})),e.isFunction(s)?c=s.apply(a,n):s!==i&&(c=s),e.isArray(o)?o.push(c):o!==i?o=[o,c]:c!==i&&(o=c),s!==i?s:!1}},C.initialize()}),o!==i?o:this},e.fn.transition.exists={},e.fn.transition.settings={name:"Transition",debug:!1,verbose:!1,performance:!0,namespace:"transition",interval:0,reverse:"auto",onStart:function(){},onComplete:function(){},onShow:function(){},onHide:function(){},useFailSafe:!0,failSafeDelay:100,allowRepeats:!1,displayType:!1,animation:"fade",duration:!1,queue:!0,metadata:{displayType:"display"},className:{animating:"animating",disabled:"disabled", +hidden:"hidden",inward:"in",loading:"loading",looping:"looping",outward:"out",transition:"transition",visible:"visible"},error:{noAnimation:"Element is no longer attached to DOM. Unable to animate.",repeated:"That animation is already occurring, cancelling repeated animation",method:"The method you called is not defined",support:"This browser does not support CSS animations"}}}(jQuery,window,document),function(e,t,n,i){"use strict";e.api=e.fn.api=function(n){var o,a=e(e.isFunction(this)?t:this),r=a.selector||"",s=(new Date).getTime(),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1);return a.each(function(){var a,m,f,g,p,v,h=e.isPlainObject(n)?e.extend(!0,{},e.fn.api.settings,n):e.extend({},e.fn.api.settings),b=h.namespace,y=h.metadata,x=h.selector,C=h.error,w=h.className,k="."+b,S="module-"+b,T=e(this),A=T.closest(x.form),R=h.stateContext?e(h.stateContext):T,E=this,P=R[0],F=T.data(S);v={initialize:function(){u||v.bind.events(),v.instantiate()},instantiate:function(){v.verbose("Storing instance of module",v),F=v,T.data(S,F)},destroy:function(){v.verbose("Destroying previous module for",E),T.removeData(S).off(k)},bind:{events:function(){var e=v.get.event();e?(v.verbose("Attaching API events to element",e),T.on(e+k,v.event.trigger)):"now"==h.on&&(v.debug("Querying API endpoint immediately"),v.query())}},decode:{json:function(e){if(e!==i&&"string"==typeof e)try{e=JSON.parse(e)}catch(t){}return e}},read:{cachedResponse:function(e){var n;return t.Storage===i?void v.error(C.noStorage):(n=sessionStorage.getItem(e),v.debug("Using cached response",e,n),n=v.decode.json(n),!1)}},write:{cachedResponse:function(n,o){return o&&""===o?void v.debug("Response empty, not caching",o):t.Storage===i?void v.error(C.noStorage):(e.isPlainObject(o)&&(o=JSON.stringify(o)),sessionStorage.setItem(n,o),void v.verbose("Storing cached response for url",n,o))}},query:function(){if(v.is.disabled())return void v.debug("Element is disabled API request aborted");if(v.is.loading()){if(!h.interruptRequests)return void v.debug("Cancelling request, previous request is still pending");v.debug("Interrupting previous request"),v.abort()}return h.defaultData&&e.extend(!0,h.urlData,v.get.defaultData()),h.serializeForm&&(h.data=v.add.formData(h.data)),m=v.get.settings(),m===!1?(v.cancelled=!0,void v.error(C.beforeSend)):(v.cancelled=!1,f=v.get.templatedURL(),f||v.is.mocked()?(f=v.add.urlData(f),f||v.is.mocked()?(m.url=h.base+f,a=e.extend(!0,{},h,{type:h.method||h.type,data:g,url:h.base+f,beforeSend:h.beforeXHR,success:function(){},failure:function(){},complete:function(){}}),v.debug("Querying URL",a.url),v.verbose("Using AJAX settings",a),"local"===h.cache&&v.read.cachedResponse(f)?(v.debug("Response returned from local cache"),v.request=v.create.request(),void v.request.resolveWith(P,[v.read.cachedResponse(f)])):void(h.throttle?h.throttleFirstRequest||v.timer?(v.debug("Throttling request",h.throttle),clearTimeout(v.timer),v.timer=setTimeout(function(){v.timer&&delete v.timer,v.debug("Sending throttled request",g,a.method),v.send.request()},h.throttle)):(v.debug("Sending request",g,a.method),v.send.request(),v.timer=setTimeout(function(){},h.throttle)):(v.debug("Sending request",g,a.method),v.send.request()))):void 0):void v.error(C.missingURL))},should:{removeError:function(){return h.hideError===!0||"auto"===h.hideError&&!v.is.form()}},is:{disabled:function(){return T.filter(x.disabled).length>0},form:function(){return T.is("form")||R.is("form")},mocked:function(){return h.mockResponse||h.mockResponseAsync||h.response||h.responseAsync},input:function(){return T.is("input")},loading:function(){return v.request&&"pending"==v.request.state()},abortedRequest:function(e){return e&&e.readyState!==i&&0===e.readyState?(v.verbose("XHR request determined to be aborted"),!0):(v.verbose("XHR request was not aborted"),!1)},validResponse:function(t){return"json"!==h.dataType&&"jsonp"!==h.dataType||!e.isFunction(h.successTest)?(v.verbose("Response is not JSON, skipping validation",h.successTest,t),!0):(v.debug("Checking JSON returned success",h.successTest,t),h.successTest(t)?(v.debug("Response passed success test",t),!0):(v.debug("Response failed success test",t),!1))}},was:{cancelled:function(){return v.cancelled||!1},succesful:function(){return v.request&&"resolved"==v.request.state()},failure:function(){return v.request&&"rejected"==v.request.state()},complete:function(){return v.request&&("resolved"==v.request.state()||"rejected"==v.request.state())}},add:{urlData:function(t,n){var o,a;return t&&(o=t.match(h.regExp.required),a=t.match(h.regExp.optional),n=n||h.urlData,o&&(v.debug("Looking for required URL variables",o),e.each(o,function(o,a){var r=-1!==a.indexOf("$")?a.substr(2,a.length-3):a.substr(1,a.length-2),s=e.isPlainObject(n)&&n[r]!==i?n[r]:T.data(r)!==i?T.data(r):R.data(r)!==i?R.data(r):n[r];return s===i?(v.error(C.requiredParameter,r,t),t=!1,!1):(v.verbose("Found required variable",r,s),s=h.encodeParameters?v.get.urlEncodedValue(s):s,t=t.replace(a,s),void 0)})),a&&(v.debug("Looking for optional URL variables",o),e.each(a,function(o,a){var r=-1!==a.indexOf("$")?a.substr(3,a.length-4):a.substr(2,a.length-3),s=e.isPlainObject(n)&&n[r]!==i?n[r]:T.data(r)!==i?T.data(r):R.data(r)!==i?R.data(r):n[r];s!==i?(v.verbose("Optional variable Found",r,s),t=t.replace(a,s)):(v.verbose("Optional variable not found",r),t=-1!==t.indexOf("/"+a)?t.replace("/"+a,""):t.replace(a,""))}))),t},formData:function(t){var n,o=e.fn.serializeObject!==i,a=o?A.serializeObject():A.serialize();return t=t||h.data,n=e.isPlainObject(t),n?o?(v.debug("Extending existing data with form data",t,a),t=e.extend(!0,{},t,a)):(v.error(C.missingSerialize),v.debug("Cant extend data. Replacing data with form data",t,a),t=a):(v.debug("Adding form data",a),t=a),t}},send:{request:function(){v.set.loading(),v.request=v.create.request(),v.is.mocked()?v.mockedXHR=v.create.mockedXHR():v.xhr=v.create.xhr(),h.onRequest.call(P,v.request,v.xhr)}},event:{trigger:function(e){v.query(),("submit"==e.type||"click"==e.type)&&e.preventDefault()},xhr:{always:function(){},done:function(t,n,i){var o=this,a=(new Date).getTime()-p,r=h.loadingDuration-a,s=e.isFunction(h.onResponse)?h.onResponse.call(o,e.extend(!0,{},t)):!1;r=r>0?r:0,s&&(v.debug("Modified API response in onResponse callback",h.onResponse,s,t),t=s),r>0&&v.debug("Response completed early delaying state change by",r),setTimeout(function(){v.is.validResponse(t)?v.request.resolveWith(o,[t,i]):v.request.rejectWith(o,[i,"invalid"])},r)},fail:function(e,t,n){var i=this,o=(new Date).getTime()-p,a=h.loadingDuration-o;a=a>0?a:0,a>0&&v.debug("Response completed early delaying state change by",a),setTimeout(function(){v.is.abortedRequest(e)?v.request.rejectWith(i,[e,"aborted",n]):v.request.rejectWith(i,[e,"error",t,n])},a)}},request:{done:function(e,t){v.debug("Successful API Response",e),"local"===h.cache&&f&&(v.write.cachedResponse(f,e),v.debug("Saving server response locally",v.cache)),h.onSuccess.call(P,e,T,t)},complete:function(e,t){var n,i;v.was.succesful()?(i=e,n=t):(n=e,i=v.get.responseFromXHR(n)),v.remove.loading(),h.onComplete.call(P,i,T,n)},fail:function(e,t,n){var o=v.get.responseFromXHR(e),r=v.get.errorFromRequest(o,t,n);"aborted"==t?(v.debug("XHR Aborted (Most likely caused by page navigation or CORS Policy)",t,n),h.onAbort.call(P,t,T,e)):"invalid"==t?v.debug("JSON did not pass success test. A server-side error has most likely occurred",o):"error"==t&&e!==i&&(v.debug("XHR produced a server error",t,n),200!=e.status&&n!==i&&""!==n&&v.error(C.statusMessage+n,a.url),h.onError.call(P,r,T,e)),h.errorDuration&&"aborted"!==t&&(v.debug("Adding error state"),v.set.error(),v.should.removeError()&&setTimeout(v.remove.error,h.errorDuration)),v.debug("API Request failed",r,e),h.onFailure.call(P,o,T,e)}}},create:{request:function(){return e.Deferred().always(v.event.request.complete).done(v.event.request.done).fail(v.event.request.fail)},mockedXHR:function(){var t,n,i,o=!1,a=!1,r=!1,s=h.mockResponse||h.response,c=h.mockResponseAsync||h.responseAsync;return i=e.Deferred().always(v.event.xhr.complete).done(v.event.xhr.done).fail(v.event.xhr.fail),s?(e.isFunction(s)?(v.debug("Using specified synchronous callback",s),n=s.call(P,m)):(v.debug("Using settings specified response",s),n=s),i.resolveWith(P,[n,o,{responseText:n}])):e.isFunction(c)&&(t=function(e){v.debug("Async callback returned response",e),e?i.resolveWith(P,[e,o,{responseText:e}]):i.rejectWith(P,[{responseText:e},a,r])},v.debug("Using specified async response callback",c),c.call(P,m,t)),i},xhr:function(){var t;return t=e.ajax(a).always(v.event.xhr.always).done(v.event.xhr.done).fail(v.event.xhr.fail),v.verbose("Created server request",t),t}},set:{error:function(){v.verbose("Adding error state to element",R),R.addClass(w.error)},loading:function(){v.verbose("Adding loading state to element",R),R.addClass(w.loading),p=(new Date).getTime()}},remove:{error:function(){v.verbose("Removing error state from element",R),R.removeClass(w.error)},loading:function(){v.verbose("Removing loading state from element",R),R.removeClass(w.loading)}},get:{responseFromXHR:function(t){return e.isPlainObject(t)?"json"==h.dataType||"jsonp"==h.dataType?v.decode.json(t.responseText):t.responseText:!1},errorFromRequest:function(t,n,o){return e.isPlainObject(t)&&t.error!==i?t.error:h.error[n]!==i?h.error[n]:o},request:function(){return v.request||!1},xhr:function(){return v.xhr||!1},settings:function(){var t;return t=h.beforeSend.call(P,h),t&&(t.success!==i&&(v.debug("Legacy success callback detected",t),v.error(C.legacyParameters,t.success),t.onSuccess=t.success),t.failure!==i&&(v.debug("Legacy failure callback detected",t),v.error(C.legacyParameters,t.failure),t.onFailure=t.failure),t.complete!==i&&(v.debug("Legacy complete callback detected",t),v.error(C.legacyParameters,t.complete),t.onComplete=t.complete)),t===i&&v.error(C.noReturnedValue),t!==i?e.extend(!0,{},t):e.extend(!0,{},h)},urlEncodedValue:function(e){var n=t.decodeURIComponent(e),i=t.encodeURIComponent(e),o=n!==e;return o?(v.debug("URL value is already encoded, avoiding double encoding",e),e):(v.verbose("Encoding value using encodeURIComponent",e,i),i)},defaultData:function(){var t={};return e.isWindow(E)||(v.is.input()?t.value=T.val():v.is.form()&&(t.text=T.text())),t},event:function(){return e.isWindow(E)||"now"==h.on?(v.debug("API called without element, no events attached"),!1):"auto"==h.on?T.is("input")?E.oninput!==i?"input":E.onpropertychange!==i?"propertychange":"keyup":T.is("form")?"submit":"click":h.on},templatedURL:function(e){if(e=e||T.data(y.action)||h.action||!1,f=T.data(y.url)||h.url||!1)return v.debug("Using specified url",f),f;if(e){if(v.debug("Looking up url for action",e,h.api),h.api[e]===i&&!v.is.mocked())return void v.error(C.missingAction,h.action,h.api);f=h.api[e]}else v.is.form()&&(f=T.attr("action")||R.attr("action")||!1,v.debug("No url or action specified, defaulting to form action",f));return f}},abort:function(){var e=v.get.xhr();e&&"resolved"!==e.state()&&(v.debug("Cancelling API request"),e.abort())},reset:function(){v.remove.error(),v.remove.loading()},setting:function(t,n){if(v.debug("Changing setting",t,n),e.isPlainObject(t))e.extend(!0,h,t);else{if(n===i)return h[t];h[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,v,t);else{if(n===i)return v[t];v[t]=n}},debug:function(){h.debug&&(h.performance?v.performance.log(arguments):(v.debug=Function.prototype.bind.call(console.info,console,h.name+":"),v.debug.apply(console,arguments)))},verbose:function(){h.verbose&&h.debug&&(h.performance?v.performance.log(arguments):(v.verbose=Function.prototype.bind.call(console.info,console,h.name+":"),v.verbose.apply(console,arguments)))},error:function(){v.error=Function.prototype.bind.call(console.error,console,h.name+":"),v.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;h.performance&&(t=(new Date).getTime(),i=s||t,n=t-i,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"","Execution Time":n})),clearTimeout(v.performance.timer),v.performance.timer=setTimeout(v.performance.display,500)},display:function(){var t=h.name+":",n=0;s=!1,clearTimeout(v.performance.timer),e.each(c,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",r&&(t+=" '"+r+"'"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,n,a){var r,s,c,l=F;return n=n||d,a=E||a,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):(v.error(C.method,t),!1);l=l[o]}})),e.isFunction(s)?c=s.apply(a,n):s!==i&&(c=s),e.isArray(o)?o.push(c):o!==i?o=[o,c]:c!==i&&(o=c),s}},u?(F===i&&v.initialize(),v.invoke(l)):(F!==i&&F.invoke("destroy"),v.initialize())}),o!==i?o:this},e.api.settings={name:"API",namespace:"api",debug:!1,verbose:!1,performance:!0,api:{},cache:!0,interruptRequests:!0,on:"auto",stateContext:!1,loadingDuration:0,hideError:"auto",errorDuration:2e3,encodeParameters:!0,action:!1,url:!1,base:"",urlData:{},defaultData:!0,serializeForm:!1,throttle:0,throttleFirstRequest:!0,method:"get",data:{},dataType:"json",mockResponse:!1,mockResponseAsync:!1,response:!1,responseAsync:!1,beforeSend:function(e){return e},beforeXHR:function(e){},onRequest:function(e,t){},onResponse:!1,onSuccess:function(e,t){},onComplete:function(e,t){},onFailure:function(e,t){},onError:function(e,t){},onAbort:function(e,t){},successTest:!1,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),function(e,t,n,i){"use strict";e.fn.state=function(t){var o,a=e(this),r=a.selector||"",s=("ontouchstart"in n.documentElement,(new Date).getTime()),c=[],l=arguments[0],u="string"==typeof l,d=[].slice.call(arguments,1);return a.each(function(){var n,m=e.isPlainObject(t)?e.extend(!0,{},e.fn.state.settings,t):e.extend({},e.fn.state.settings),f=m.error,g=m.metadata,p=m.className,v=m.namespace,h=m.states,b=m.text,y="."+v,x=v+"-module",C=e(this),w=this,k=C.data(x);n={initialize:function(){n.verbose("Initializing module"),m.automatic&&n.add.defaults(),m.context&&""!==r?e(m.context).on(r,"mouseenter"+y,n.change.text).on(r,"mouseleave"+y,n.reset.text).on(r,"click"+y,n.toggle.state):C.on("mouseenter"+y,n.change.text).on("mouseleave"+y,n.reset.text).on("click"+y,n.toggle.state),n.instantiate()},instantiate:function(){n.verbose("Storing instance of module",n),k=n,C.data(x,n)},destroy:function(){n.verbose("Destroying previous module",k),C.off(y).removeData(x)},refresh:function(){n.verbose("Refreshing selector cache"),C=e(w)},add:{defaults:function(){var o=t&&e.isPlainObject(t.states)?t.states:{};e.each(m.defaults,function(t,a){n.is[t]!==i&&n.is[t]()&&(n.verbose("Adding default states",t,w),e.extend(m.states,a,o))})}},is:{active:function(){return C.hasClass(p.active)},loading:function(){return C.hasClass(p.loading)},inactive:function(){return!C.hasClass(p.active)},state:function(e){return p[e]===i?!1:C.hasClass(p[e])},enabled:function(){return!C.is(m.filter.active)},disabled:function(){return C.is(m.filter.active)},textEnabled:function(){return!C.is(m.filter.text)},button:function(){return C.is(".button:not(a, .submit)")},input:function(){return C.is("input")},progress:function(){return C.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(){C.removeClass(p.disabled)},disable:function(){C.addClass(p.disabled)},setState:function(e){n.allows(e)&&C.addClass(p[e])},removeState:function(e){n.allows(e)&&C.removeClass(p[e])},toggle:{state:function(){var t,o;if(n.allows("active")&&n.is.enabled()){if(n.refresh(),e.fn.api!==i)if(t=C.api("get request"),o=C.api("was cancelled"))n.debug("API Request cancelled by beforesend"),m.activateTest=function(){return!1},m.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&&(b.loading&&n.update.text(b.loading),e.when(t).then(function(){"resolved"==t.state()?(n.debug("API request succeeded"),m.activateTest=function(){return!0},m.deactivateTest=function(){return!0}):(n.debug("API request failed"),m.activateTest=function(){return!1},m.deactivateTest=function(){return!1}),n.change.state()}))},change:{state:function(){n.debug("Determining state change direction"),n.is.inactive()?n.activate():n.deactivate(),m.sync&&n.sync(),m.onChange.call(w)},text:function(){n.is.textEnabled()&&(n.is.disabled()?(n.verbose("Changing text to disabled text",b.hover),n.update.text(b.disabled)):n.is.active()?b.hover?(n.verbose("Changing text to hover text",b.hover),n.update.text(b.hover)):b.deactivate&&(n.verbose("Changing text to deactivating text",b.deactivate),n.update.text(b.deactivate)):b.hover?(n.verbose("Changing text to hover text",b.hover),n.update.text(b.hover)):b.activate&&(n.verbose("Changing text to activating text",b.activate),n.update.text(b.activate)))}},activate:function(){m.activateTest.call(w)&&(n.debug("Setting state to active"),C.addClass(p.active),n.update.text(b.active),m.onActivate.call(w))},deactivate:function(){m.deactivateTest.call(w)&&(n.debug("Setting state to inactive"),C.removeClass(p.active),n.update.text(b.inactive),m.onDeactivate.call(w))},sync:function(){n.verbose("Syncing other buttons to current state"),a.not(C).state(n.is.active()?"activate":"deactivate")},get:{text:function(){return m.selector.text?C.find(m.selector.text).text():C.html()},textFor:function(e){return b[e]||!1}},flash:{text:function(e,t,i){var o=n.get.text();n.debug("Flashing text message",e,t),e=e||m.text.flash,t=t||m.flashDuration,i=i||function(){},n.update.text(e),setTimeout(function(){n.update.text(o),i.call(w)},t)}},reset:{text:function(){var e=b.active||C.data(g.storedText),t=b.inactive||C.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),m.selector.text?C.data(g.storedText,e).find(m.selector.text).text(e):C.data(g.storedText,e).html(e)):n.debug("Text is already set, ignoring update",e)}},setting:function(t,o){if(n.debug("Changing setting",t,o),e.isPlainObject(t))e.extend(!0,m,t);else{if(o===i)return m[t];m[t]=o}},internal:function(t,o){if(e.isPlainObject(t))e.extend(!0,n,t);else{if(o===i)return n[t];n[t]=o}},debug:function(){m.debug&&(m.performance?n.performance.log(arguments):(n.debug=Function.prototype.bind.call(console.info,console,m.name+":"),n.debug.apply(console,arguments)))},verbose:function(){m.verbose&&m.debug&&(m.performance?n.performance.log(arguments):(n.verbose=Function.prototype.bind.call(console.info,console,m.name+":"),n.verbose.apply(console,arguments)))},error:function(){n.error=Function.prototype.bind.call(console.error,console,m.name+":"),n.error.apply(console,arguments)},performance:{log:function(e){var t,i,o;m.performance&&(t=(new Date).getTime(),o=s||t,i=t-o,s=t,c.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:w,"Execution Time":i})),clearTimeout(n.performance.timer),n.performance.timer=setTimeout(n.performance.display,500)},display:function(){var t=m.name+":",o=0;s=!1,clearTimeout(n.performance.timer),e.each(c,function(e,t){o+=t["Execution Time"]}),t+=" "+o+"ms",r&&(t+=" '"+r+"'"),(console.group!==i||console.table!==i)&&c.length>0&&(console.groupCollapsed(t),console.table?console.table(c):e.each(c,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),c=[]}},invoke:function(t,a,r){var s,c,l,u=k;return a=a||d,r=w||r,"string"==typeof t&&u!==i&&(t=t.split(/[\. ]/),s=t.length-1,e.each(t,function(o,a){var r=o!=s?a+t[o+1].charAt(0).toUpperCase()+t[o+1].slice(1):t;if(e.isPlainObject(u[r])&&o!=s)u=u[r];else{if(u[r]!==i)return c=u[r],!1;if(!e.isPlainObject(u[a])||o==s)return u[a]!==i?(c=u[a],!1):(n.error(f.method,t),!1);u=u[a]}})),e.isFunction(c)?l=c.apply(r,a):c!==i&&(l=c),e.isArray(o)?o.push(l):o!==i?o=[o,l]:l!==i&&(o=l),c}},u?(k===i&&n.initialize(),n.invoke(l)):(k!==i&&k.invoke("destroy"),n.initialize())}),o!==i?o: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),function(e,t,n,i){"use strict";e.fn.visibility=function(o){var a,r=e(this),s=r.selector||"",c=(new Date).getTime(),l=[],u=arguments[0],d="string"==typeof u,m=[].slice.call(arguments,1);return r.each(function(){var r,f,g,p=e.isPlainObject(o)?e.extend(!0,{},e.fn.visibility.settings,o):e.extend({},e.fn.visibility.settings),v=p.className,h=p.namespace,b=p.error,y=p.metadata,x="."+h,C="module-"+h,w=e(t),k=e(this),S=e(p.context),T=(k.selector||"",k.data(C)),A=t.requestAnimationFrame||t.mozRequestAnimationFrame||t.webkitRequestAnimationFrame||t.msRequestAnimationFrame||function(e){setTimeout(e,0)},R=this,E=!1;g={initialize:function(){g.debug("Initializing",p),g.setup.cache(),g.should.trackChanges()&&("image"==p.type&&g.setup.image(),"fixed"==p.type&&g.setup.fixed(),p.observeChanges&&g.observeChanges(),g.bind.events()),g.save.position(),g.is.visible()||g.error(b.visible,k),p.initialCheck&&g.checkVisibility(),g.instantiate()},instantiate:function(){g.debug("Storing instance",g),k.data(C,g),T=g},destroy:function(){g.verbose("Destroying previous module"),f&&f.disconnect(),w.off("load"+x,g.event.load).off("resize"+x,g.event.resize),S.off("scrollchange"+x,g.event.scrollchange),k.off(x).removeData(C)},observeChanges:function(){"MutationObserver"in t&&(f=new MutationObserver(function(e){g.verbose("DOM tree modified, updating visibility calculations"),g.timer=setTimeout(function(){g.verbose("DOM tree modified, updating sticky menu"),g.refresh()},100)}),f.observe(R,{childList:!0,subtree:!0}),g.debug("Setting up mutation observer",f))},bind:{events:function(){g.verbose("Binding visibility events to scroll and resize"),p.refreshOnLoad&&w.on("load"+x,g.event.load),w.on("resize"+x,g.event.resize),S.off("scroll"+x).on("scroll"+x,g.event.scroll).on("scrollchange"+x,g.event.scrollchange)}},event:{resize:function(){g.debug("Window resized"),p.refreshOnResize&&A(g.refresh)},load:function(){g.debug("Page finished loading"),A(g.refresh)},scroll:function(){p.throttle?(clearTimeout(g.timer),g.timer=setTimeout(function(){S.triggerHandler("scrollchange"+x,[S.scrollTop()])},p.throttle)):A(function(){S.triggerHandler("scrollchange"+x,[S.scrollTop()])})},scrollchange:function(e,t){g.checkVisibility(t)}},precache:function(t,i){t instanceof Array||(t=[t]);for(var o=t.length,a=0,r=[],s=n.createElement("img"),c=function(){a++,a>=t.length&&e.isFunction(i)&&i()};o--;)s=n.createElement("img"),s.onload=c,s.onerror=c,s.src=t[o],r.push(s)},enableCallbacks:function(){g.debug("Allowing callbacks to occur"),E=!1},disableCallbacks:function(){g.debug("Disabling all callbacks temporarily"),E=!0},should:{trackChanges:function(){return d?(g.debug("One time query, no need to bind events"),!1):(g.debug("Callbacks being attached"),!0)}},setup:{cache:function(){g.cache={occurred:{},screen:{},element:{}}},image:function(){var e=k.data(y.src);e&&(g.verbose("Lazy loading image",e),p.once=!0,p.observeChanges=!1,p.onOnScreen=function(){g.debug("Image on screen",R),g.precache(e,function(){g.set.image(e)})})},fixed:function(){g.debug("Setting up fixed"),p.once=!1,p.observeChanges=!1,p.initialCheck=!0,p.refreshOnLoad=!0,o.transition||(p.transition=!1),g.create.placeholder(),g.debug("Added placeholder",r),p.onTopPassed=function(){g.debug("Element passed, adding fixed position",k),g.show.placeholder(),g.set.fixed(),p.transition&&e.fn.transition!==i&&k.transition(p.transition,p.duration)},p.onTopPassedReverse=function(){g.debug("Element returned to position, removing fixed",k),g.hide.placeholder(),g.remove.fixed()}}},create:{placeholder:function(){g.verbose("Creating fixed position placeholder"),r=k.clone(!1).css("display","none").addClass(v.placeholder).insertAfter(k)}},show:{placeholder:function(){g.verbose("Showing placeholder"),r.css("display","block").css("visibility","hidden")}},hide:{placeholder:function(){g.verbose("Hiding placeholder"),r.css("display","none").css("visibility","")}},set:{fixed:function(){g.verbose("Setting element to fixed position"),k.addClass(v.fixed).css({position:"fixed",top:p.offset+"px",left:"auto",zIndex:"1"})},image:function(t){k.attr("src",t),p.transition?e.fn.transition!==i?k.transition(p.transition,p.duration):k.fadeIn(p.duration):k.show()}},is:{onScreen:function(){var e=g.get.elementCalculations();return e.onScreen},offScreen:function(){var e=g.get.elementCalculations();return e.offScreen},visible:function(){return g.cache&&g.cache.element?!(0===g.cache.element.width&&0===g.cache.element.offset.top):!1}},refresh:function(){g.debug("Refreshing constants (width/height)"),"fixed"==p.type&&(g.remove.fixed(),g.remove.occurred()),g.reset(),g.save.position(),p.checkOnRefresh&&g.checkVisibility(),p.onRefresh.call(R)},reset:function(){g.verbose("Reseting all cached values"),e.isPlainObject(g.cache)&&(g.cache.screen={},g.cache.element={})},checkVisibility:function(e){g.verbose("Checking visibility of element",g.cache.element),!E&&g.is.visible()&&(g.save.scroll(e),g.save.calculations(),g.passed(),g.passingReverse(),g.topVisibleReverse(),g.bottomVisibleReverse(),g.topPassedReverse(),g.bottomPassedReverse(),g.onScreen(),g.offScreen(),g.passing(),g.topVisible(),g.bottomVisible(),g.topPassed(),g.bottomPassed(),p.onUpdate&&p.onUpdate.call(R,g.get.elementCalculations()))},passed:function(t,n){var o=g.get.elementCalculations();if(t&&n)p.onPassed[t]=n;else{if(t!==i)return g.get.pixelsPassed(t)>o.pixelsPassed;o.passing&&e.each(p.onPassed,function(e,t){o.bottomVisible||o.pixelsPassed>g.get.pixelsPassed(e)?g.execute(t,e):p.once||g.remove.occurred(t)})}},onScreen:function(e){var t=g.get.elementCalculations(),n=e||p.onOnScreen,o="onScreen";return e&&(g.debug("Adding callback for onScreen",e),p.onOnScreen=e),t.onScreen?g.execute(n,o):p.once||g.remove.occurred(o),e!==i?t.onOnScreen:void 0},offScreen:function(e){var t=g.get.elementCalculations(),n=e||p.onOffScreen,o="offScreen";return e&&(g.debug("Adding callback for offScreen",e),p.onOffScreen=e),t.offScreen?g.execute(n,o):p.once||g.remove.occurred(o),e!==i?t.onOffScreen:void 0},passing:function(e){var t=g.get.elementCalculations(),n=e||p.onPassing,o="passing";return e&&(g.debug("Adding callback for passing",e),p.onPassing=e),t.passing?g.execute(n,o):p.once||g.remove.occurred(o),e!==i?t.passing:void 0},topVisible:function(e){var t=g.get.elementCalculations(),n=e||p.onTopVisible,o="topVisible";return e&&(g.debug("Adding callback for top visible",e),p.onTopVisible=e),t.topVisible?g.execute(n,o):p.once||g.remove.occurred(o),e===i?t.topVisible:void 0},bottomVisible:function(e){var t=g.get.elementCalculations(),n=e||p.onBottomVisible,o="bottomVisible";return e&&(g.debug("Adding callback for bottom visible",e),p.onBottomVisible=e),t.bottomVisible?g.execute(n,o):p.once||g.remove.occurred(o),e===i?t.bottomVisible:void 0},topPassed:function(e){var t=g.get.elementCalculations(),n=e||p.onTopPassed,o="topPassed";return e&&(g.debug("Adding callback for top passed",e),p.onTopPassed=e),t.topPassed?g.execute(n,o):p.once||g.remove.occurred(o),e===i?t.topPassed:void 0},bottomPassed:function(e){var t=g.get.elementCalculations(),n=e||p.onBottomPassed,o="bottomPassed";return e&&(g.debug("Adding callback for bottom passed",e),p.onBottomPassed=e),t.bottomPassed?g.execute(n,o):p.once||g.remove.occurred(o),e===i?t.bottomPassed:void 0},passingReverse:function(e){var t=g.get.elementCalculations(),n=e||p.onPassingReverse,o="passingReverse";return e&&(g.debug("Adding callback for passing reverse",e),p.onPassingReverse=e),t.passing?p.once||g.remove.occurred(o):g.get.occurred("passing")&&g.execute(n,o),e!==i?!t.passing:void 0},topVisibleReverse:function(e){var t=g.get.elementCalculations(),n=e||p.onTopVisibleReverse,o="topVisibleReverse";return e&&(g.debug("Adding callback for top visible reverse",e),p.onTopVisibleReverse=e),t.topVisible?p.once||g.remove.occurred(o):g.get.occurred("topVisible")&&g.execute(n,o),e===i?!t.topVisible:void 0},bottomVisibleReverse:function(e){var t=g.get.elementCalculations(),n=e||p.onBottomVisibleReverse,o="bottomVisibleReverse";return e&&(g.debug("Adding callback for bottom visible reverse",e),p.onBottomVisibleReverse=e),t.bottomVisible?p.once||g.remove.occurred(o):g.get.occurred("bottomVisible")&&g.execute(n,o),e===i?!t.bottomVisible:void 0},topPassedReverse:function(e){var t=g.get.elementCalculations(),n=e||p.onTopPassedReverse,o="topPassedReverse";return e&&(g.debug("Adding callback for top passed reverse",e),p.onTopPassedReverse=e),t.topPassed?p.once||g.remove.occurred(o):g.get.occurred("topPassed")&&g.execute(n,o),e===i?!t.onTopPassed:void 0},bottomPassedReverse:function(e){var t=g.get.elementCalculations(),n=e||p.onBottomPassedReverse,o="bottomPassedReverse";return e&&(g.debug("Adding callback for bottom passed reverse",e),p.onBottomPassedReverse=e),t.bottomPassed?p.once||g.remove.occurred(o):g.get.occurred("bottomPassed")&&g.execute(n,o),e===i?!t.bottomPassed:void 0},execute:function(e,t){var n=g.get.elementCalculations(),i=g.get.screenCalculations();e=e||!1,e&&(p.continuous?(g.debug("Callback being called continuously",t,n),e.call(R,n,i)):g.get.occurred(t)||(g.debug("Conditions met",t,n),e.call(R,n,i))),g.save.occurred(t)},remove:{fixed:function(){g.debug("Removing fixed position"),k.removeClass(v.fixed).css({position:"",top:"",left:"",zIndex:""})},occurred:function(e){if(e){var t=g.cache.occurred;t[e]!==i&&t[e]===!0&&(g.debug("Callback can now be called again",e),g.cache.occurred[e]=!1)}else g.cache.occurred={}}},save:{calculations:function(){g.verbose("Saving all calculations necessary to determine positioning"),g.save.direction(),g.save.screenCalculations(),g.save.elementCalculations(); + +},occurred:function(e){e&&(g.cache.occurred[e]===i||g.cache.occurred[e]!==!0)&&(g.verbose("Saving callback occurred",e),g.cache.occurred[e]=!0)},scroll:function(e){e=e+p.offset||S.scrollTop()+p.offset,g.cache.scroll=e},direction:function(){var e,t=g.get.scroll(),n=g.get.lastScroll();return e=t>n&&n?"down":n>t&&n?"up":"static",g.cache.direction=e,g.cache.direction},elementPosition:function(){var e=g.cache.element,t=g.get.screenSize();return g.verbose("Saving element position"),e.fits=e.height=t.top,t.topPassed=e.top>=t.top,t.bottomVisible=e.bottom>=t.bottom,t.bottomPassed=e.top>=t.bottom,t.pixelsPassed=0,t.percentagePassed=0,t.onScreen=t.topVisible&&!t.bottomPassed,t.passing=t.topPassed&&!t.bottomPassed,t.offScreen=!t.onScreen,t.passing&&(t.pixelsPassed=e.top-t.top,t.percentagePassed=(e.top-t.top)/t.height),g.cache.element=t,g.verbose("Updated element calculations",t),t},screenCalculations:function(){var e=g.get.scroll();return g.save.direction(),g.cache.screen.top=e,g.cache.screen.bottom=e+g.cache.screen.height,g.cache.screen},screenSize:function(){g.verbose("Saving window position"),g.cache.screen={height:S.height()}},position:function(){g.save.screenSize(),g.save.elementPosition()}},get:{pixelsPassed:function(e){var t=g.get.elementCalculations();return e.search("%")>-1?t.height*(parseInt(e,10)/100):parseInt(e,10)},occurred:function(e){return g.cache.occurred!==i?g.cache.occurred[e]||!1:!1},direction:function(){return g.cache.direction===i&&g.save.direction(),g.cache.direction},elementPosition:function(){return g.cache.element===i&&g.save.elementPosition(),g.cache.element},elementCalculations:function(){return g.cache.element===i&&g.save.elementCalculations(),g.cache.element},screenCalculations:function(){return g.cache.screen===i&&g.save.screenCalculations(),g.cache.screen},screenSize:function(){return g.cache.screen===i&&g.save.screenSize(),g.cache.screen},scroll:function(){return g.cache.scroll===i&&g.save.scroll(),g.cache.scroll},lastScroll:function(){return g.cache.screen===i?(g.debug("First scroll event, no last scroll could be found"),!1):g.cache.screen.top}},setting:function(t,n){if(e.isPlainObject(t))e.extend(!0,p,t);else{if(n===i)return p[t];p[t]=n}},internal:function(t,n){if(e.isPlainObject(t))e.extend(!0,g,t);else{if(n===i)return g[t];g[t]=n}},debug:function(){p.debug&&(p.performance?g.performance.log(arguments):(g.debug=Function.prototype.bind.call(console.info,console,p.name+":"),g.debug.apply(console,arguments)))},verbose:function(){p.verbose&&p.debug&&(p.performance?g.performance.log(arguments):(g.verbose=Function.prototype.bind.call(console.info,console,p.name+":"),g.verbose.apply(console,arguments)))},error:function(){g.error=Function.prototype.bind.call(console.error,console,p.name+":"),g.error.apply(console,arguments)},performance:{log:function(e){var t,n,i;p.performance&&(t=(new Date).getTime(),i=c||t,n=t-i,c=t,l.push({Name:e[0],Arguments:[].slice.call(e,1)||"",Element:R,"Execution Time":n})),clearTimeout(g.performance.timer),g.performance.timer=setTimeout(g.performance.display,500)},display:function(){var t=p.name+":",n=0;c=!1,clearTimeout(g.performance.timer),e.each(l,function(e,t){n+=t["Execution Time"]}),t+=" "+n+"ms",s&&(t+=" '"+s+"'"),(console.group!==i||console.table!==i)&&l.length>0&&(console.groupCollapsed(t),console.table?console.table(l):e.each(l,function(e,t){console.log(t.Name+": "+t["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(t,n,o){var r,s,c,l=T;return n=n||m,o=R||o,"string"==typeof t&&l!==i&&(t=t.split(/[\. ]/),r=t.length-1,e.each(t,function(n,o){var a=n!=r?o+t[n+1].charAt(0).toUpperCase()+t[n+1].slice(1):t;if(e.isPlainObject(l[a])&&n!=r)l=l[a];else{if(l[a]!==i)return s=l[a],!1;if(!e.isPlainObject(l[o])||n==r)return l[o]!==i?(s=l[o],!1):(g.error(b.method,t),!1);l=l[o]}})),e.isFunction(s)?c=s.apply(o,n):s!==i&&(c=s),e.isArray(a)?a.push(c):a!==i?a=[a,c]:c!==i&&(a=c),s}},d?(T===i&&g.initialize(),T.save.scroll(),T.save.calculations(),g.invoke(u)):(T!==i&&T.invoke("destroy"),g.initialize())}),a!==i?a:this},e.fn.visibility.settings={name:"Visibility",namespace:"visibility",debug:!1,verbose:!1,performance:!0,observeChanges:!0,initialCheck:!0,refreshOnLoad:!0,refreshOnResize:!0,checkOnRefresh:!0,once:!0,continuous:!1,offset:0,includeMargin:!1,context:t,throttle:!1,type:!1,transition:"fade in",duration:1e3,onPassed:{},onOnScreen:!1,onOffScreen:!1,onPassing:!1,onTopVisible:!1,onBottomVisible:!1,onTopPassed:!1,onBottomPassed:!1,onPassingReverse:!1,onTopVisibleReverse:!1,onBottomVisibleReverse:!1,onTopPassedReverse:!1,onBottomPassedReverse:!1,onUpdate:!1,onRefresh:function(){},metadata:{src:"src"},className:{fixed:"fixed",placeholder:"placeholder"},error:{method:"The method you called is not defined.",visible:"Element is hidden, you must call refresh after element becomes visible"}}}(jQuery,window,document); \ No newline at end of file diff --git a/semantic/themes/default/assets/fonts/icons.eot b/semantic/themes/default/assets/fonts/icons.eot new file mode 100755 index 0000000..33b2bb8 Binary files /dev/null and b/semantic/themes/default/assets/fonts/icons.eot differ diff --git a/semantic/themes/default/assets/fonts/icons.otf b/semantic/themes/default/assets/fonts/icons.otf new file mode 100755 index 0000000..f7936cc Binary files /dev/null and b/semantic/themes/default/assets/fonts/icons.otf differ diff --git a/semantic/themes/default/assets/fonts/icons.svg b/semantic/themes/default/assets/fonts/icons.svg new file mode 100755 index 0000000..1ee89d4 --- /dev/null +++ b/semantic/themes/default/assets/fonts/icons.svg @@ -0,0 +1,565 @@ + + + \ No newline at end of file diff --git a/semantic/themes/default/assets/fonts/icons.ttf b/semantic/themes/default/assets/fonts/icons.ttf new file mode 100755 index 0000000..ed9372f Binary files /dev/null and b/semantic/themes/default/assets/fonts/icons.ttf differ diff --git a/semantic/themes/default/assets/fonts/icons.woff b/semantic/themes/default/assets/fonts/icons.woff new file mode 100755 index 0000000..8b280b9 Binary files /dev/null and b/semantic/themes/default/assets/fonts/icons.woff differ diff --git a/semantic/themes/default/assets/fonts/icons.woff2 b/semantic/themes/default/assets/fonts/icons.woff2 new file mode 100755 index 0000000..3311d58 Binary files /dev/null and b/semantic/themes/default/assets/fonts/icons.woff2 differ diff --git a/semantic/themes/default/assets/images/flags.png b/semantic/themes/default/assets/images/flags.png new file mode 100755 index 0000000..cdd33c3 Binary files /dev/null and b/semantic/themes/default/assets/images/flags.png differ diff --git a/serve_local.sh b/serve_local.sh new file mode 100755 index 0000000..8b09c05 --- /dev/null +++ b/serve_local.sh @@ -0,0 +1,7 @@ +#!/bin/bash +# +# This script simply serves the site locally + + +( set -x ; jekyll serve --source . --destination /tmp/gh-pages) +( set -x ; /bin/rm -rf /tmp/gh-pages ) diff --git a/site/_config.yml b/site/_config.yml deleted file mode 100755 index 228f630..0000000 --- a/site/_config.yml +++ /dev/null @@ -1,8 +0,0 @@ -name: SMPI_CourseWare -markdown: kramdown -kramdown: - hard_wrap: false - input: GFM - syntax_highlighter: rouge -mathjax: true -baseurl: /SMPI_CourseWare diff --git a/site/_includes/footer.html b/site/_includes/footer.html deleted file mode 100644 index 16cd064..0000000 --- a/site/_includes/footer.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/site/_includes/head.html b/site/_includes/head.html deleted file mode 100644 index 4dedb08..0000000 --- a/site/_includes/head.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - - - - - - - diff --git a/site/_includes/header.html b/site/_includes/header.html deleted file mode 100644 index e4083f3..0000000 --- a/site/_includes/header.html +++ /dev/null @@ -1,3 +0,0 @@ -

diff --git a/site/_layouts/default.html b/site/_layouts/default.html deleted file mode 100644 index 4b2210d..0000000 --- a/site/_layouts/default.html +++ /dev/null @@ -1,15 +0,0 @@ - - -{% include head.html %} - - - {% include header.html %} -

- {{ content }} -

- {% include footer.html %} -

- - - diff --git a/site/content/foo.md b/site/content/foo.md deleted file mode 100644 index 172a137..0000000 --- a/site/content/foo.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: default ---- - -FOO!!! diff --git a/site/index.md b/site/index.md deleted file mode 100644 index 7e6c156..0000000 --- a/site/index.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: default ---- - -INDEX FILE: [GO TO FOO](./content/foo.html) diff --git a/topic_basics_of_distributed_memory_programming/index.md b/topic_basics_of_distributed_memory_programming/index.md new file mode 100644 index 0000000..f0200de --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/index.md @@ -0,0 +1,23 @@ + +

+ + +

+ +

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/1D.html b/topic_basics_of_distributed_memory_programming/julia_set/1D.html new file mode 100644 index 0000000..7c4daa2 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/1D.html @@ -0,0 +1,33 @@ +In this activity we develop a parallel implementation of the program using +a simple 1-D data distribution. We break it down into the three steps below: +
+ + + +

+ + {% include_relative 1D_step1.html %} + +

+ + + +

+ + {% include_relative 1D_step2.html %} + + +

+ + + +

+ + {% include_relative 1D_step3.html %} + + +

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/1D_step1.html b/topic_basics_of_distributed_memory_programming/julia_set/1D_step1.html new file mode 100644 index 0000000..9f39a55 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/1D_step1.html @@ -0,0 +1,144 @@ +

+ The first step when designing a distributed-memory program is to pick a particular + "data distribution", i.e., a way in which the data (input and or output) is + split across the participating processes. In our Julia set program, the only data + is the output image, and we opt for a simple and popular data-distribution scheme: + a 1-D data-distribution. Simply put, we logically split our image into slabs + and each process computes one slab. +

+ +

Because in the previous activity we used + a row-major storing scheme for our image, it makes sense to pick horizontal + slabs. Our image has n rows of pixels (recall that n is the integer + command-line argument). Let us first compute the data distribution, + without computing the Julia set at all. The idea is that, based on its rank, each + process must figure out which rows it will compute. +

+ + +

+ Implement a C (or C++) MPI program called 1D_parallel_julia (source file 1D_parallel_julia.c) + that: +

+ +

Takes a single command-line argument, n, an integer that's strictly positive.

Has each process print out its rank (out of how many processes in total), and + which rows of the image (as a range) it should compute (but actually do nothing for now). See the sample + executions below to see what kind of output is expected. +

The intended data distribution should be in as many "slabs" as there are processes, where + each process is in charge of a set of contiguous rows.

+ +

+ For simplicity, you can assume that the number of processes divides n, so that all processes have the same exact number of rows to compute. + For more of a challenge, you may want to make sure that the distribution is as balanced as possible (at most + a difference of one row between two processes). This can be done using discrete math so that everything is computed by a single formula, + but can also be done programmatically with a loop (i.e., "counting by hand"). +

+ +

+ Run your program on this simple simulated 64-node cluster + (download simple_cluster.xml and + simple_cluster_hostfile.txt). +

+ +
+

+ + +

+ Below are a few sample executions of the program (this version of the program does not assume that the number of processes divides n, and enforces a "as balanced as possible" data distribution): +

+ +

+ + See a sample execution with 5 processes for n=1000 ... +

+ +

As expected, each process process should process 200 rows:

+{% highlight text %} +% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia +% smpirun -np 5 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 1000 +[Process 0 out of 5]: I should compute pixel rows 0 to 199, for a total of 200 rows +[Process 1 out of 5]: I should compute pixel rows 200 to 399, for a total of 200 rows +[Process 2 out of 5]: I should compute pixel rows 400 to 599, for a total of 200 rows +[Process 3 out of 5]: I should compute pixel rows 600 to 799, for a total of 200 rows +[Process 4 out of 5]: I should compute pixel rows 800 to 999, for a total of 200 rows +{% endhighlight %} +

+ +

+ + See a sample execution with 16 processes for n=100 ... +

+ +

Note that the distribution is balanced, meaning that the number of rows + differs by at most 1 across processors. This is not the only possible balanced data distribution (e.g., + process 0 could compute only 6 rows, while process 15 could compute 7 rows).

+{% highlight text %} +% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia +% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 100 +[Process 0 out of 16]: I should compute pixel rows 0 to 6, for a total of 7 rows +[Process 1 out of 16]: I should compute pixel rows 7 to 13, for a total of 7 rows +[Process 2 out of 16]: I should compute pixel rows 14 to 20, for a total of 7 rows +[Process 3 out of 16]: I should compute pixel rows 21 to 27, for a total of 7 rows +[Process 4 out of 16]: I should compute pixel rows 28 to 33, for a total of 6 rows +[Process 5 out of 16]: I should compute pixel rows 34 to 39, for a total of 6 rows +[Process 6 out of 16]: I should compute pixel rows 40 to 45, for a total of 6 rows +[Process 7 out of 16]: I should compute pixel rows 46 to 51, for a total of 6 rows +[Process 8 out of 16]: I should compute pixel rows 52 to 57, for a total of 6 rows +[Process 9 out of 16]: I should compute pixel rows 58 to 63, for a total of 6 rows +[Process 10 out of 16]: I should compute pixel rows 64 to 69, for a total of 6 rows +[Process 11 out of 16]: I should compute pixel rows 70 to 75, for a total of 6 rows +[Process 12 out of 16]: I should compute pixel rows 76 to 81, for a total of 6 rows +[Process 13 out of 16]: I should compute pixel rows 82 to 87, for a total of 6 rows +[Process 14 out of 16]: I should compute pixel rows 88 to 93, for a total of 6 rows +[Process 15 out of 16]: I should compute pixel rows 94 to 99, for a total of 6 rows +{% endhighlight %} +

+ + +

+ + See a sample execution with 16 processes for n=12 ... +

+ +

Note that because n is small, some processes have nothing to do. (We don't care what + these processes print as their range of rows).

+{% highlight text %} +% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia +% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 100 +[Process 1 out of 16]: I should compute pixel rows 1 to 1, for a total of 1 rows +[Process 2 out of 16]: I should compute pixel rows 2 to 2, for a total of 1 rows +[Process 3 out of 16]: I should compute pixel rows 3 to 3, for a total of 1 rows +[Process 4 out of 16]: I should compute pixel rows 4 to 4, for a total of 1 rows +[Process 5 out of 16]: I should compute pixel rows 5 to 5, for a total of 1 rows +[Process 6 out of 16]: I should compute pixel rows 6 to 6, for a total of 1 rows +[Process 7 out of 16]: I should compute pixel rows 7 to 7, for a total of 1 rows +[Process 8 out of 16]: I should compute pixel rows 8 to 8, for a total of 1 rows +[Process 9 out of 16]: I should compute pixel rows 9 to 9, for a total of 1 rows +[Process 10 out of 16]: I should compute pixel rows 10 to 10, for a total of 1 rows +[Process 11 out of 16]: I should compute pixel rows 11 to 11, for a total of 1 rows +[Process 12 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows +[Process 13 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows +[Process 14 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows +[Process 15 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows +{% endhighlight %} +

diff --git a/topic_basics_of_distributed_memory_programming/julia_set/1D_step2.html b/topic_basics_of_distributed_memory_programming/julia_set/1D_step2.html new file mode 100644 index 0000000..503085c --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/1D_step2.html @@ -0,0 +1,66 @@ +

+ Augment your program so that each process allocates space to store the pixels it needs to compute, and + then computes them. A process must only allocate space for the pixels it needs to compute. In practice, + each process runs on a different hosts, and one wishes to compute a large image that does not fit in the + memory of a single host (which is one of the main motivations for going the "distributed-memory computing" route). +

+ +

+ Have each process print its rank and time (using MPI_Wtime(), which returns a double) right before + performing the computation and right after performing the computation!. Our cluster is not completely +homogeneous, and these (simulated) times will show it. +

+ +

+ The main difficulty here is keeping local vs. global indexing straight. That is, although as programmers + we think of the image as an array of, say, N pixels, no N-pixel array is ever allocated in the program (only + smaller arrays allocated by each process). +

+ +

+ + See more details about this local/global indexing thing ... +

+ +

One of the difficulties of distributed-memory computing is just that... well... memory is distributed. + Say my sequential non-distributed-memory program processes 2000 items. I can simply store them + in a 2000-item array. Say now that I need to use distributed-memory computing (perhaps 2000 items don't + fit in the memory of a single host, perhaps I just want to compute faster). I now use 20 hosts instead + of 1, and on each host one process runs and allocates memory for 100 items. So, at each process I allocate + a 100-item array. So far, so good.

+ +

The problem is that when my sequential program says "process item #i", for some i between 0 + and 1999, I need to figure out two things: +

+ +

Which process holds item #i?

In that process' item array, at which index is item #i stored?

+ +

+ The answer to the above depends on the data distribution! Say that process 0 (i.e., process with + rank 0) holds items 0 to 99 (global indices), process 1 holds items 100 to 199 (global indices), etc. + So, for a given i between 0 and 1999, with this data distribution, I have: +

Item #i is held by process with rank i/100

At that process, item #i is store at index i%100 of the item array

+ +

i%100 ("i modulo 100") above is called the local index (i.e., where the element is stored + in the array declared locally in the process), as opposed to i which is the global index.

+ +

The more complicated the distribution, the more intricate the global-to-local or local-to-global + conversion. 1-D data distributions, like the one above, are the simplest. In the next activity we'll deal with a 2-D + data distribution.

+ +

diff --git a/topic_basics_of_distributed_memory_programming/julia_set/1D_step3.html b/topic_basics_of_distributed_memory_programming/julia_set/1D_step3.html new file mode 100644 index 0000000..8d4ce6e --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/1D_step3.html @@ -0,0 +1,57 @@ +

+ Augment your program so that the Julia set is saved to a bmp file. This requires some coordination between the + processes: +

Only one process must create the file and write the header

Processes need to write pixel rows in sequence, one after the other

It's probably a good idea to have the file opened in only a single process at a time

+ +

+ First you must pick one process to create the file and write the header to it + (it is typical to pick process of rank 0). Second, each process, after its done computing + its pixels, waits for a "go ahead!" message from its predecessor, writes to the file, and then sends a "go ahead!" + message to its successor. The exceptions are the process with rank 0, which does not need to wait for + a message, and the last process, which does not need to send a message. It doesn't really matter + what these messages contain (e.g., they can be a single byte, or even zero-byte messages), + as the whole purpose is to just have processes wait for their predecessors, not really receive + meaningful data from them. +

+ +

+ Warning: Make sure that your processes compute in parallel. That is, all processes compute together, and then + they take turn writing what they have computed to the file. +

+ + +

+ Experiment with different numbers of processors and different values of n, and check that your bmp file + is correct (valid, and contains the correct image). +

+ + + + + +

+ +

+ + What are logical topologies??? +

+ +

+ Although the above scheme is pretty simple, what we are really doing is creating a logical topology. That is, + based on process rank, we impose structure on our set of processes. In this case, a "linear chain" in which process #i communicates + with process #i+1. Probably the simplest structure. We will see examples of more complex logical topologies. + Different applications lend themselves naturally to different logical topologies (rings, grids, trees, etc.). + One interesting question, which is outside + the score of this topic, is how well the logical topology matches the physical topology of the actual + parallel platform in use (a good match typically boosts performance). Ideally, one can define a logical topology + that makes writing the application easy, and that is also well-matched to the physical platform. +

+ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D.html b/topic_basics_of_distributed_memory_programming/julia_set/2D.html new file mode 100644 index 0000000..bc92c0f --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/2D.html @@ -0,0 +1,34 @@ +In this activity we develop a parallel implementation of the program using +a "2-D data distribution". Just like for the previous activity, +we break it down into the three steps below: +
+ + + +

+ + {% include_relative 2D_step1.html %} + +

+ + + +

+ + {% include_relative 2D_step2.html %} + + +

+ + + +

+ + {% include_relative 2D_step3.html %} + + +

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.jpg b/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.jpg new file mode 100644 index 0000000..1e18df5 Binary files /dev/null and b/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.jpg differ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.odg b/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.odg new file mode 100644 index 0000000..2de57f2 Binary files /dev/null and b/topic_basics_of_distributed_memory_programming/julia_set/2D_file_writing_pattern_figure.odg differ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D_step1.html b/topic_basics_of_distributed_memory_programming/julia_set/2D_step1.html new file mode 100644 index 0000000..cf47a5c --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/2D_step1.html @@ -0,0 +1,185 @@ +

+ We now implement our parallel Julia set application using a 2-D data distribution. This means + that each process now is in charge of a tile of the image in a logical checkerboard pattern. To + make things simple we assume two things: + +

the total number of processes used is always a perfect square, p²

n, the image height, is perfectly divisible by p

+ +

+ These assumptions will not change the spirit of the program, but simplify its implementation + significantly. This is because each process is responsible for a tile of the image + with height n/p and width 2n/p. This is the amount of memory each process should allocate. +

+ +

+ This 2-D data distribution complicates the global vs. local indexing issue that was + discussed in Activity #2. The first thing to do is to figure out which process is responsible + for which tile. A common approach is to use a row-major view of the processes. In other words, + we think of a logical topology in which the processes are organized in a square grid (because + our number of processes is a perfect square). By default, MPI gives us only a linear (i.e., 1-D) rank. + We "transform" this rank into a 2-D rank where each process has a "row" and a "column", using a row-major + scheme. This can be done with a little bit of discrete math (alternately, MPI provides + a MPI_Cart_coords function that does this for you). Based on its 2-D coordinates, a process + now knows which tile is is responsible for. +

+ +

+ + See an example... +

+ +

+ Let's say our image has height 300 and width 600, and that we are using 9 processes. Each process + then is responsible for a 100x200 tile. Let's see this on a "picture": +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

global index ranges	cols [0-199]	cols [200-399]	cols [400-599]
rows [0-99]	rank: 0 2-D rank: (0,0)	rank: 1 2-D rank: (0,1)	rank: 2 2-D rank: (0,2)
rows [100-199]	rank: 3 2-D rank: (1,0)	rank: 4 2-D rank: (1,1)	rank: 5 2-D rank: (1,2)
rows [200-299]	Rank: 6 2-D rank: (2,0)	Rank: 7 2-D rank: (2,1)	Rank: 8 2-D rank: (2,2)

+ + +

+ +
+ +

+ Every white cell above represents a tile. The (global) row + and column index ranges for the pixels in the tile are shown + in the first row/column. In each tile is shown the rank of the process + that owns it, and the 2-D rank of this process (computed based + in the process rank and p). For instance, process of rank 5 + has 2-D rank (1,2), meaning that it is in the 2nd row and the 3rd + column of the logical 3x3 process grid. As such, it is responsible + for image pixels between rows 100 and 199 and between columns 400 and 599. In + "array slice notation, this would be [100:199, 400:599]. +

+ + + + + + +

+ Implement a program called 2D_parallel_julia (source 2D_parallel_julia.c) + that does not allocate memory or compute anything for now, but + that merely has each process print out its rank, it's 2-D rank, and the pixel row + and column ranges for which it is responsible. +

+ +

+ Run your program on this simple simulated 64-node cluster + (download simple_cluster.xml and + simple_cluster_hostfile.txt). These + are the same files are for Activity #1. +

+ +
+

+ + +

+ Below are a few sample executions of the program: +

+ +

+ + See a sample execution with 9 processes for n=30 ... +

+ +

+{% highlight text %} +% smpicc -O3 2D_parallel_julia.c -o 2D_parallel_julia +% smpirun -np 9 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 30 +[Process rank 0]: my 2-D rank is (0, 0), my tile is [0:9, 0:19] +[Process rank 1]: my 2-D rank is (0, 1), my tile is [0:9, 20:39] +[Process rank 2]: my 2-D rank is (0, 2), my tile is [0:9, 40:59] +[Process rank 3]: my 2-D rank is (1, 0), my tile is [10:19, 0:19] +[Process rank 4]: my 2-D rank is (1, 1), my tile is [10:19, 20:39] +[Process rank 5]: my 2-D rank is (1, 2), my tile is [10:19, 40:59] +[Process rank 6]: my 2-D rank is (2, 0), my tile is [20:29, 0:19] +[Process rank 7]: my 2-D rank is (2, 1), my tile is [20:29, 20:39] +[Process rank 8]: my 2-D rank is (2, 2), my tile is [20:29, 40:59] +{% endhighlight %} +

+ +

+ + See a sample execution with 16 processes for n=200 ... +

+ +

+{% highlight text %} +% smpicc -O3 2D_parallel_julia.c -o 2D_parallel_julia +% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./2D_parallel_julia 200 +[Process rank 0]: my 2-D rank is (0, 0), my tile is [0:49, 0:99] +[Process rank 1]: my 2-D rank is (0, 1), my tile is [0:49, 100:199] +[Process rank 2]: my 2-D rank is (0, 2), my tile is [0:49, 200:299] +[Process rank 3]: my 2-D rank is (0, 3), my tile is [0:49, 300:399] +[Process rank 4]: my 2-D rank is (1, 0), my tile is [50:99, 0:99] +[Process rank 5]: my 2-D rank is (1, 1), my tile is [50:99, 100:199] +[Process rank 6]: my 2-D rank is (1, 2), my tile is [50:99, 200:299] +[Process rank 7]: my 2-D rank is (1, 3), my tile is [50:99, 300:399] +[Process rank 8]: my 2-D rank is (2, 0), my tile is [100:149, 0:99] +[Process rank 9]: my 2-D rank is (2, 1), my tile is [100:149, 100:199] +[Process rank 10]: my 2-D rank is (2, 2), my tile is [100:149, 200:299] +[Process rank 11]: my 2-D rank is (2, 3), my tile is [100:149, 300:399] +[Process rank 12]: my 2-D rank is (3, 0), my tile is [150:199, 0:99] +[Process rank 13]: my 2-D rank is (3, 1), my tile is [150:199, 100:199] +[Process rank 14]: my 2-D rank is (3, 2), my tile is [150:199, 200:299] +[Process rank 15]: my 2-D rank is (3, 3), my tile is [150:199, 300:399] +{% endhighlight %} +

+ +

+ + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D_step2.html b/topic_basics_of_distributed_memory_programming/julia_set/2D_step2.html new file mode 100644 index 0000000..c84ff60 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/2D_step2.html @@ -0,0 +1,14 @@ +

+ Augment your program so that each process allocates space to store the pixels it needs to compute, and + then computes them. As in the previous activity, the main difficulty here is + keeping local vs. global indexing straight. It is a bit more complex + than for Activity #2 due to the use of a 2-D data distribution. +

+ +

+ Have each process apply a tint to the pixels it handles, by passing + value rank² (i.e., the square of the rank) as the 5th argument to + function compute_julia_pixel() (instead of passing the default + 1.0 value). +

+ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/2D_step3.html b/topic_basics_of_distributed_memory_programming/julia_set/2D_step3.html new file mode 100644 index 0000000..d5be68f --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/2D_step3.html @@ -0,0 +1,52 @@ +

+ Augment your program so that the Julia set is saved to a bmp file. + The difference with Activity #2 is that now each process holds a tile, and + yet the file must contain the pixels in row major order. So each process + will have to append many times to the file, writing one piece of a row at a time. + As a result, more complex coordination is required compared to + Activity #2. +

+ + +

+ + See a visual example/explanation ... +

+ +

+ The figure above shows an example with 9 processes (2-D rank coordinates are shown + in red), where each process holds a 4x8 tile (4 row segments). The numbers on + each segment indicate the sequence in which the pixels must be written to the + file. In this example, there are 36 row segments. First process (0,0) + writes its first segment, then process (0,1) writes its first segment, etc. + For instance, at step 20, process (1,1) writes its third segment. You must implement + the "go ahead!" messaging scheme so that the processes write to the file in + the correct order. +

+ +

+ +Using a tint of 1.0 at each process, this program should produce the +same images as that in Activity #2 (which can be useful for debugging). When using +rank², one sees a checkered pattern. Here is a sample +image generated +with 9 processors for n=300: +
+
+ +

+ +

diff --git a/topic_basics_of_distributed_memory_programming/julia_set/compute_julia_pixel.c b/topic_basics_of_distributed_memory_programming/julia_set/compute_julia_pixel.c new file mode 100644 index 0000000..6dbb9e1 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/compute_julia_pixel.c @@ -0,0 +1,56 @@ + +/* + * compute_julia_pixel(): compute RBG values of a pixel in a + * particular Julia set image. + * + * In: + * (x,y): pixel coordinates + * (width, height): image dimensions + * tint_bias: a float to "tweak" the tint (1.0 is "no tint") + * Out: + * rgb: an already-allocated 3-byte array into which R, G, and B + * values are written. + * + * Return: + * 0 in success, -1 on failure + * + */ + +int compute_julia_pixel(int x, int y, int width, int height, float tint_bias, unsigned char *rgb) { + + // Check coordinates + if ((x < 0) || (x >= width) || (y < 0) || (y >= height)) { + fprintf(stderr,"Invalid (%d,%d) pixel coordinates in a %d x %d image\n", x, y, width, height); + return -1; + } + + // "Zoom in" to a pleasing view of the Julia set + float X_MIN = -1.6, X_MAX = 1.6, Y_MIN = -0.9, Y_MAX = +0.9; + float float_y = (Y_MAX - Y_MIN) * (float)y / height + Y_MIN ; + float float_x = (X_MAX - X_MIN) * (float)x / width + X_MIN ; + + // Point that defines the Julia set + float julia_real = -.79; + float julia_img = .15; + + // Maximum number of iteration + int max_iter = 300; + + // Compute the complex series convergence + float real=float_y, img=float_x; + int num_iter = max_iter; + while (( img * img + real * real < 2 * 2 ) && ( num_iter > 0 )) { + float xtemp = img * img - real * real + julia_real; + real = 2 * img * real + julia_img; + img = xtemp; + num_iter--; + } + + // Paint pixel based on how many iterations were used, using some funky colors + float color_bias = (float) num_iter / max_iter; + rgb[0] = (num_iter == 0 ? 200 : - 500.0 * pow(tint_bias, 1.2) * pow(color_bias, 1.6)); + rgb[1] = (num_iter == 0 ? 100 : -255.0 * pow(color_bias, 0.3)); + rgb[2] = (num_iter == 0 ? 100 : 255 - 255.0 * pow(tint_bias, 1.2) * pow(color_bias, 3.0)); + + return 0; +} \ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/conclusion.html b/topic_basics_of_distributed_memory_programming/julia_set/conclusion.html new file mode 100644 index 0000000..2bfefaf --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/conclusion.html @@ -0,0 +1,48 @@ +

+ + + +

+ Congratulations for making it this far. At this point you have learned how + to design a distributed-memory application as an SMPD program using SMPI, have been + exposed to both 1-D and 2-D data distributions, and have + learned how to use communication to orchestrate the executions of MPI + processes. You may also have learned about memory layouts of 2-D arrays. +

+ +

+ Our Julia set computation is a "toy application". Admittedly, our use of + a 2-D data distribution made the application more complicated to write without + any clear benefit. We will see other examples for which 2-D data distributions + provide significant performance advantages. Also, we handled all file I/O + "by hand". In practice, MPI provides a set of abstractions and functions to perform parallel + I/O, called MPI IO, that could be used to achieve better performance on a real + systems with high-performance parallel file systems. +

+ + + +

+ +

+ + + +

+ In a README file write a brief "essay" explaining what you found + surprising/challenging, and what solutions you used to solve + your difficulties. Are you happy with your implementations? Do you + see room for improvement? +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/generate_xml_hetero_pseudo_cluster.py b/topic_basics_of_distributed_memory_programming/julia_set/generate_xml_hetero_pseudo_cluster.py new file mode 100755 index 0000000..71022cd --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/generate_xml_hetero_pseudo_cluster.py @@ -0,0 +1,93 @@ +#!/usr/bin/env python3 +import sys +import os +import math +import random + +# Link parameters +link_latency = "10us" +link_bandwidth = 100 +link_bandwidth_unit = "Gbps" + +# XML generation functions +def issueHead(): + head = ("\n" + "\n" + "\n\n") + + config_clause = ( + "\n" + #"\n" + "\n" + "\n\n") + + AS_head = "\n" + + return head + config_clause + AS_head + + +def issueTail(): + return "\n\n" + +def issueLink(): + return " \n" + +def issueHost(index): + if index == 0: + speed = 210 + else: + speed = 199 + random.randint(0,10)/10.0 + return " \n" + +def issueRouteHead(index1, index2): + return " \n" +def issueRouteTail(): + return " \n" + +def issueRouteLink(): + return "\t\n" + +###################################################################### +# Parse command-line arguments +if (len(sys.argv) != 2): + sys.stderr.write("Usage: "+sys.argv[0]+" \n") + sys.stderr.write(" Will generate a cluster_.xml and hostfile_.txt file\n") + exit(1) + +num_hosts = int(sys.argv[1]) + +############################################################### +# Generate XML file +filename = "./cluster_"+str(num_hosts)+".xml" +fh = open(filename, 'w') +fh.write(issueHead()) + +# Create hosts +for i in range(0,num_hosts): + fh.write(issueHost(i)) + +# Create link +fh.write(issueLink()) + +## Create all one-hop routes +for src in range (0,num_hosts): + for dst in range (src+1,num_hosts): + fh.write(issueRouteHead(src,dst)) + fh.write(issueRouteLink()) + fh.write(issueRouteTail()) + +fh.write(issueTail()) +fh.close() +sys.stderr.write("Cluster XML platform file created: "+filename+"\n") + +############################################################### +## Generate host file +filename = "./hostfile_"+str(num_hosts)+".txt" +fh = open(filename, 'w') + +for i in range(0,num_hosts): + fh.write("host-"+str(i)+".hawaii.edu\n") + +fh.close() +sys.stderr.write("Hostfile created: "+filename+"\n") + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/index.html b/topic_basics_of_distributed_memory_programming/julia_set/index.html new file mode 100644 index 0000000..362ce90 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/index.html @@ -0,0 +1,1269 @@ + + + + + + + + + + + + + Topic #1 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To implement several versions of a "toy" parallel application that + computes the Julia set displayed below and saves it as a bitmap file: +

+ +

+ + + + + +

+ + What is a Julia set? +

A Julia set is a fractal, i.e., an object that is self-similar across scales (you "zoom in" + and you keep seeing similar structures/features). It is a generalization + of the famous Mandelbrot set^[Wikipedia], + which adorns many T-shirts (search for "Mandelbrot zoom" for psychedelic videos).

+ +

The particular Julia set + that we compute here is defined as follows. Given z a point in the 2-D complex plane, we compute the + series defined as: +

z₀ = z
z_n+1 = z_n² + c

+ where c = -0.79 + i * 0.15. Different + values of c lead to different images, and we know many values that produce "pretty" images. +

+ The color of a pixel corresponding to point z is determined based on the number of iterations + before the modulus of z_n is above 2 (or until a maximum number of iterations + is reached). +

+ Not to worry, code is provided for you for the above. However, feel free to tweak it to create different + images and to find out more about Julia sets^[Wikipedia]. +

+ + +

+ +

This module consists of 3 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Realize a sequential implementation of a program that computes the Julia set + and + outputs it to a bmp file. +
Activity #2: Realize a parallel implementation the program with MPI, using a 1-D data + distribution. +
Activity #3: Realize a parallel implementation the program with MPI, using a 2-D data + distribution. +

+ +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and host files (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

A README file with answers to the questions asked in the activities

+ +

+ In this activity we develop a simple sequential (i.e., non-parallel) program that computes a +Julia set and saves it to a bitmap file. We break it down into the two steps below: +
+ + + +

+ + Implement a C (or C++) program called sequential_julia (source file sequential_julia.c) that: + +

Takes a single command-line argument, n, an integer that's strictly positive.

Allocates an 1-D unsigned char array of n*(2*n)*3 elements. This array is used to store + the pixels of an image with height (in pixels) of n width (in pixels) of 2n, where each pixel is encoded using 3 bytes (RGB + values). +

Fills this array with pixel values corresponding to the Julia set.

+ +

+ To make the above easier you are provided with one helper C function, compute_julia_pixel(), to which + you pass the (x,y) coordinates of a pixed, the (width, height) dimensions of the image, a "tint" float (pass 1.0 + for now), and a pointer to 3 contiguous bytes (unsigned char *). These bytes are set to appropriate + RGB values (Red Green Blue) for displaying the Julia set. + [Download + source of compute_julia_pixel()] +

+ +

+ + See the source of compute_julia_pixel()... +

+ +

/*
+ * compute_julia_pixel(): compute RBG values of a pixel in a
+ *                        particular Julia set image.
+ *
+ *  In:
+ *      (x,y):            pixel coordinates
+ *      (width, height):  image dimensions
+ *      tint_bias:        a float to "tweak" the tint (1.0 is "no tint")
+ *  Out:
+ *      rgb: an already-allocated 3-byte array into which R, G, and B
+ *           values are written.
+ *
+ *  Return:
+ *      0 in success, -1 on failure
+ *
+ */
+
+int compute_julia_pixel(int x, int y, int width, int height, float tint_bias, unsigned char *rgb) {
+
+  // Check coordinates
+  if ((x < 0) || (x >= width) || (y < 0) || (y >= height)) {
+    fprintf(stderr,"Invalid (%d,%d) pixel coordinates in a %d x %d image\n", x, y, width, height);
+    return -1;
+  }
+
+  // "Zoom in" to a pleasing view of the Julia set
+  float X_MIN = -1.6, X_MAX = 1.6, Y_MIN = -0.9, Y_MAX = +0.9;
+  float float_y = (Y_MAX - Y_MIN) * (float)y / height + Y_MIN ;
+  float float_x = (X_MAX - X_MIN) * (float)x / width  + X_MIN ;
+
+  // Point that defines the Julia set
+  float julia_real = -.79;
+  float julia_img = .15;
+
+  // Maximum number of iteration
+  int max_iter = 300;
+
+  // Compute the complex series convergence
+  float real=float_y, img=float_x;
+  int num_iter = max_iter;
+  while (( img * img + real * real < 2 * 2 ) && ( num_iter > 0 )) {
+    float xtemp = img * img - real * real + julia_real;
+    real = 2 * img * real + julia_img;
+    img = xtemp;
+    num_iter--;
+  }
+
+  // Paint pixel based on how many iterations were used, using some funky colors
+  float color_bias = (float) num_iter / max_iter;
+  rgb[0] = (num_iter == 0 ? 200 : - 500.0 * pow(tint_bias, 1.2) *  pow(color_bias, 1.6));
+  rgb[1] = (num_iter == 0 ? 100 : -255.0 *  pow(color_bias, 0.3));
+  rgb[2] = (num_iter == 0 ? 100 : 255 - 255.0 * pow(tint_bias, 1.2) * pow(color_bias, 3.0));
+
+  return 0;
+}

+ +

+ +
+ +

+ The program must store the pixels of the 2-D image into the 1-D array using a row-major scheme. +

+ + +

+ + See more details about this "row-major" business... +

+ +

+ You may find the use of a 1-D array to store the pixels surprising, since after all the image is 2-D. However, it is + common to use 1-D arrays, especially when they are dynamically allocated. One option would be to allocate an array + of pointers to + 1-D arrays, where each 1-D array represents a pixel row. This would make it possible to access elements with the convenient syntax Array[i][j]. + But this is typically a bad idea as it reduces locality (i.e., the efficient use of the cache), which in turns harms + performance. +

Therefore, we instead store 2-D data into a 1-D array of contiguous elements. The "row-major" scheme consists in storing rows in sequence. In other + terms, if the width of the image is N, then pixel (i,j) is stored as Array[i * N + j]. This is actually + the scheme used by the C language to store 2-D arrays. +

+ + + +

+ +

+Augment your program so that it saves the image to a file called julia.bmp, which stores +the image in the bmp format. A bmp file consists of two parts: +

A header

The 3-byte pixels of the image, in a row-major fashion

+ +

+ To make the above easier you are first provided with a helper C function, write_bmp_header(), which + writes to a file the 40-byte header required for a bmp file. + [Download + source of write_bmp_header()] +

+ +

+ + See the source of write_bmp_header()... +

+ +

/* write_bmp_header():
+ *
+ *   In:
+ *      f: A file open for writing ('w') 
+ *      (width, height): image dimensions
+ *   
+ *   Return:
+ *      0 on success, -1 on failure
+ *
+ */
+
+int write_bmp_header(FILE *f, int width, int height) {
+
+  unsigned int row_size_in_bytes = width * 3 + 
+	  ((width * 3) % 4 == 0 ? 0 : (4 - (width * 3) % 4));
+
+  // Define all fields in the bmp header
+  char id[3] = "BM";
+  unsigned int filesize = 54 + (int)(row_size_in_bytes * height * sizeof(char));
+  short reserved[2] = {0,0};
+  unsigned int offset = 54;
+
+  unsigned int size = 40;
+  unsigned short planes = 1;
+  unsigned short bits = 24;
+  unsigned int compression = 0;
+  unsigned int image_size = width * height * 3 * sizeof(char);
+  int x_res = 0;
+  int y_res = 0;
+  unsigned int ncolors = 0;
+  unsigned int importantcolors = 0;
+
+  // Write the bytes to the file, keeping track of the
+  // number of written "objects"
+  size_t ret = 0;
+  ret += fwrite(id, sizeof(char), 2, f);
+  ret += fwrite(&filesize, sizeof(int), 1, f);
+  ret += fwrite(reserved, sizeof(short), 2, f);
+  ret += fwrite(&offset, sizeof(int), 1, f);
+  ret += fwrite(&size, sizeof(int), 1, f);
+  ret += fwrite(&width, sizeof(int), 1, f);
+  ret += fwrite(&height, sizeof(int), 1, f);
+  ret += fwrite(&planes, sizeof(short), 1, f);
+  ret += fwrite(&bits, sizeof(short), 1, f);
+  ret += fwrite(&compression, sizeof(int), 1, f);
+  ret += fwrite(&image_size, sizeof(int), 1, f);
+  ret += fwrite(&x_res, sizeof(int), 1, f);
+  ret += fwrite(&y_res, sizeof(int), 1, f);
+  ret += fwrite(&ncolors, sizeof(int), 1, f);
+  ret += fwrite(&importantcolors, sizeof(int), 1, f);
+
+  // Success means that we wrote 17 "objects" successfully
+  return (ret != 17);
+}

+ +

+ + +

+ Second, here is a code fragment that shows how to write the pixels in a 1-D pixed array to + a bpm file (opened as file output_file) after the header has been written: +

+ + +

// Writing the pixels after the header
+for (y=0; y < height; y++) {
+  for (x=0; x < width; x++) {
+    fwrite(&(pixels[y * 3 * width + x * 3]), sizeof(char), 3, output_file);
+  }
+  // padding in case of an even number of pixels per row
+  unsigned char padding[3] = {0,0,0};
+  fwrite(padding, sizeof(char), ((width * 3) % 4), output_file);
+}

+ + +

+ Given the above, it should be straightforward to augment your program so + that it produces a bmp file of the Julia set. Verify that the produced image is as shown below (by opening in whatever image viewing application, or a Web browser): +

+ +

+ + +

Once this is done, you are ready + to go on to Activity #2, in which we make the program parallel! +

+ + + +

+ +

+ In this activity we develop a parallel implementation of the program using +a simple 1-D data distribution. We break it down into the three steps below: +
+ + + +

+ +

+ + +

+ Implement a C (or C++) MPI program called 1D_parallel_julia (source file 1D_parallel_julia.c) + that: +

+ +

Takes a single command-line argument, n, an integer that's strictly positive.

The intended data distribution should be in as many "slabs" as there are processes, where + each process is in charge of a set of contiguous rows.

+ +

+ Run your program on this simple simulated 64-node cluster + (download simple_cluster.xml and + simple_cluster_hostfile.txt). +

+ +
+

+ + +

+ +

+ + See a sample execution with 5 processes for n=1000 ... +

+ +

As expected, each process process should process 200 rows:

+ +

% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia
+% smpirun -np 5 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 1000
+[Process 0 out of 5]: I should compute pixel rows 0 to 199, for a total of 200 rows
+[Process 1 out of 5]: I should compute pixel rows 200 to 399, for a total of 200 rows
+[Process 2 out of 5]: I should compute pixel rows 400 to 599, for a total of 200 rows
+[Process 3 out of 5]: I should compute pixel rows 600 to 799, for a total of 200 rows
+[Process 4 out of 5]: I should compute pixel rows 800 to 999, for a total of 200 rows

+ +

+ + See a sample execution with 16 processes for n=100 ... +

+ +

Note that the distribution is balanced, meaning that the number of rows + differs by at most 1 across processors. This is not the only possible balanced data distribution (e.g., + process 0 could compute only 6 rows, while process 15 could compute 7 rows).

+ +

% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia
+% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 100
+[Process 0 out of 16]: I should compute pixel rows 0 to 6, for a total of 7 rows
+[Process 1 out of 16]: I should compute pixel rows 7 to 13, for a total of 7 rows
+[Process 2 out of 16]: I should compute pixel rows 14 to 20, for a total of 7 rows
+[Process 3 out of 16]: I should compute pixel rows 21 to 27, for a total of 7 rows
+[Process 4 out of 16]: I should compute pixel rows 28 to 33, for a total of 6 rows
+[Process 5 out of 16]: I should compute pixel rows 34 to 39, for a total of 6 rows
+[Process 6 out of 16]: I should compute pixel rows 40 to 45, for a total of 6 rows
+[Process 7 out of 16]: I should compute pixel rows 46 to 51, for a total of 6 rows
+[Process 8 out of 16]: I should compute pixel rows 52 to 57, for a total of 6 rows
+[Process 9 out of 16]: I should compute pixel rows 58 to 63, for a total of 6 rows
+[Process 10 out of 16]: I should compute pixel rows 64 to 69, for a total of 6 rows
+[Process 11 out of 16]: I should compute pixel rows 70 to 75, for a total of 6 rows
+[Process 12 out of 16]: I should compute pixel rows 76 to 81, for a total of 6 rows
+[Process 13 out of 16]: I should compute pixel rows 82 to 87, for a total of 6 rows
+[Process 14 out of 16]: I should compute pixel rows 88 to 93, for a total of 6 rows
+[Process 15 out of 16]: I should compute pixel rows 94 to 99, for a total of 6 rows

+ +

+ + +

+ + See a sample execution with 16 processes for n=12 ... +

+ +

Note that because n is small, some processes have nothing to do. (We don't care what + these processes print as their range of rows).

+ +

% smpicc -O3 1D_parallel_julia.c -o 1D_parallel_julia
+% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 100
+[Process 1 out of 16]: I should compute pixel rows 1 to 1, for a total of 1 rows
+[Process 2 out of 16]: I should compute pixel rows 2 to 2, for a total of 1 rows
+[Process 3 out of 16]: I should compute pixel rows 3 to 3, for a total of 1 rows
+[Process 4 out of 16]: I should compute pixel rows 4 to 4, for a total of 1 rows
+[Process 5 out of 16]: I should compute pixel rows 5 to 5, for a total of 1 rows
+[Process 6 out of 16]: I should compute pixel rows 6 to 6, for a total of 1 rows
+[Process 7 out of 16]: I should compute pixel rows 7 to 7, for a total of 1 rows
+[Process 8 out of 16]: I should compute pixel rows 8 to 8, for a total of 1 rows
+[Process 9 out of 16]: I should compute pixel rows 9 to 9, for a total of 1 rows
+[Process 10 out of 16]: I should compute pixel rows 10 to 10, for a total of 1 rows
+[Process 11 out of 16]: I should compute pixel rows 11 to 11, for a total of 1 rows
+[Process 12 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows
+[Process 13 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows
+[Process 14 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows
+[Process 15 out of 16]: I should compute pixel rows 12 to 11, for a total of 0 rows

+ +

+ + +

+ + + +

+ +

+ + See more details about this local/global indexing thing ... +

+ +

The problem is that when my sequential program says "process item #i", for some i between 0 + and 1999, I need to figure out two things: +

+ +

Which process holds item #i?

In that process' item array, at which index is item #i stored?

+ +

Item #i is held by process with rank i/100

At that process, item #i is store at index i%100 of the item array

+ +

i%100 ("i modulo 100") above is called the local index (i.e., where the element is stored + in the array declared locally in the process), as opposed to i which is the global index.

+ +

+ + + +

+ +

+ Augment your program so that the Julia set is saved to a bmp file. This requires some coordination between the + processes: +

Only one process must create the file and write the header

Processes need to write pixel rows in sequence, one after the other

It's probably a good idea to have the file opened in only a single process at a time

+ +

+ Warning: Make sure that your processes compute in parallel. That is, all processes compute together, and then + they take turn writing what they have computed to the file. +

+ + +

+ Experiment with different numbers of processors and different values of n, and check that your bmp file + is correct (valid, and contains the correct image). +

+ + + + + +

+ +

+ + What are logical topologies??? +

+ +

+ + + + +

+ +

+ In this activity we develop a parallel implementation of the program using +a "2-D data distribution". Just like for the previous activity, +we break it down into the three steps below: +
+ + + +

+ +

the total number of processes used is always a perfect square, p²

n, the image height, is perfectly divisible by p

+ +

+ + See an example... +

+ +

+ Let's say our image has height 300 and width 600, and that we are using 9 processes. Each process + then is responsible for a 100x200 tile. Let's see this on a "picture": +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

global index ranges	cols [0-199]	cols [200-399]	cols [400-599]
rows [0-99]	rank: 0 2-D rank: (0,0)	rank: 1 2-D rank: (0,1)	rank: 2 2-D rank: (0,2)
rows [100-199]	rank: 3 2-D rank: (1,0)	rank: 4 2-D rank: (1,1)	rank: 5 2-D rank: (1,2)
rows [200-299]	Rank: 6 2-D rank: (2,0)	Rank: 7 2-D rank: (2,1)	Rank: 8 2-D rank: (2,2)

+ +

+
+ +

+ +

+ Run your program on this simple simulated 64-node cluster + (download simple_cluster.xml and + simple_cluster_hostfile.txt). These + are the same files are for Activity #1. +

+ +
+

+ + +

+ Below are a few sample executions of the program: +

+ +

+ + See a sample execution with 9 processes for n=30 ... +

+ +

% smpicc -O3 2D_parallel_julia.c -o 2D_parallel_julia
+% smpirun -np 9 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./1D_parallel_julia 30
+[Process rank 0]: my 2-D rank is (0, 0), my tile is [0:9, 0:19]
+[Process rank 1]: my 2-D rank is (0, 1), my tile is [0:9, 20:39]
+[Process rank 2]: my 2-D rank is (0, 2), my tile is [0:9, 40:59]
+[Process rank 3]: my 2-D rank is (1, 0), my tile is [10:19, 0:19]
+[Process rank 4]: my 2-D rank is (1, 1), my tile is [10:19, 20:39]
+[Process rank 5]: my 2-D rank is (1, 2), my tile is [10:19, 40:59]
+[Process rank 6]: my 2-D rank is (2, 0), my tile is [20:29, 0:19]
+[Process rank 7]: my 2-D rank is (2, 1), my tile is [20:29, 20:39]
+[Process rank 8]: my 2-D rank is (2, 2), my tile is [20:29, 40:59]

+ +

+ + See a sample execution with 16 processes for n=200 ... +

+ +

% smpicc -O3 2D_parallel_julia.c -o 2D_parallel_julia
+% smpirun -np 16 -hostfile ./simple_cluster_hostfile.txt -platform ./simple_cluster.xml ./2D_parallel_julia 200
+[Process rank 0]: my 2-D rank is (0, 0), my tile is [0:49, 0:99]
+[Process rank 1]: my 2-D rank is (0, 1), my tile is [0:49, 100:199]
+[Process rank 2]: my 2-D rank is (0, 2), my tile is [0:49, 200:299]
+[Process rank 3]: my 2-D rank is (0, 3), my tile is [0:49, 300:399]
+[Process rank 4]: my 2-D rank is (1, 0), my tile is [50:99, 0:99]
+[Process rank 5]: my 2-D rank is (1, 1), my tile is [50:99, 100:199]
+[Process rank 6]: my 2-D rank is (1, 2), my tile is [50:99, 200:299]
+[Process rank 7]: my 2-D rank is (1, 3), my tile is [50:99, 300:399]
+[Process rank 8]: my 2-D rank is (2, 0), my tile is [100:149, 0:99]
+[Process rank 9]: my 2-D rank is (2, 1), my tile is [100:149, 100:199]
+[Process rank 10]: my 2-D rank is (2, 2), my tile is [100:149, 200:299]
+[Process rank 11]: my 2-D rank is (2, 3), my tile is [100:149, 300:399]
+[Process rank 12]: my 2-D rank is (3, 0), my tile is [150:199, 0:99]
+[Process rank 13]: my 2-D rank is (3, 1), my tile is [150:199, 100:199]
+[Process rank 14]: my 2-D rank is (3, 2), my tile is [150:199, 200:299]
+[Process rank 15]: my 2-D rank is (3, 3), my tile is [150:199, 300:399]

+ +

+ + + + +

+ + + +

+ +

+ + + + +

+ + + +

+ +

+ + +

+ + See a visual example/explanation ... +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/introduction.html b/topic_basics_of_distributed_memory_programming/julia_set/introduction.html new file mode 100644 index 0000000..215fd56 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/introduction.html @@ -0,0 +1,49 @@ +

+ + + +

+ Objective: To implement several versions of a "toy" parallel application that + computes the Julia set displayed below and saves it as a bitmap file: +

+ +

+ + {% include_relative julia_accordion.html %} + +

+ +

This module consists of 3 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Realize a sequential implementation of a program that computes the Julia set + and + outputs it to a bmp file. +
Activity #2: Realize a parallel implementation the program with MPI, using a 1-D data + distribution. +
Activity #3: Realize a parallel implementation the program with MPI, using a 2-D data + distribution. +

+ +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and host files (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

A README file with answers to the questions asked in the activities

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/julia_accordion.html b/topic_basics_of_distributed_memory_programming/julia_set/julia_accordion.html new file mode 100644 index 0000000..2c5280d --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/julia_accordion.html @@ -0,0 +1,38 @@ + + + + +

+ + What is a Julia set? +

+ +

The particular Julia set + that we compute here is defined as follows. Given z a point in the 2-D complex plane, we compute the + series defined as: +

z₀ = z
z_n+1 = z_n² + c

+ where c = -0.79 + i * 0.15. Different + values of c lead to different images, and we know many values that produce "pretty" images. +

+ The color of a pixel corresponding to point z is determined based on the number of iterations + before the modulus of z_n is above 2 (or until a maximum number of iterations + is reached). +

+ Not to worry, code is provided for you for the above. However, feel free to tweak it to create different + images and to find out more about Julia sets^[Wikipedia]. +

diff --git a/topic_basics_of_distributed_memory_programming/julia_set/julia_small.jpg b/topic_basics_of_distributed_memory_programming/julia_set/julia_small.jpg new file mode 100644 index 0000000..8880a18 Binary files /dev/null and b/topic_basics_of_distributed_memory_programming/julia_set/julia_small.jpg differ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/julia_small_checkered.jpg b/topic_basics_of_distributed_memory_programming/julia_set/julia_small_checkered.jpg new file mode 100644 index 0000000..70113d1 Binary files /dev/null and b/topic_basics_of_distributed_memory_programming/julia_set/julia_small_checkered.jpg differ diff --git a/topic_basics_of_distributed_memory_programming/julia_set/sequential.html b/topic_basics_of_distributed_memory_programming/julia_set/sequential.html new file mode 100644 index 0000000..332dddb --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/sequential.html @@ -0,0 +1,23 @@ +In this activity we develop a simple sequential (i.e., non-parallel) program that computes a +Julia set and saves it to a bitmap file. We break it down into the two steps below: +
+ + + +

+ + {% include_relative sequential_step1.html %} + +

+ + + +

+ + {% include_relative sequential_step2.html %} + + +

\ No newline at end of file diff --git a/topic_basics_of_distributed_memory_programming/julia_set/sequential_step1.html b/topic_basics_of_distributed_memory_programming/julia_set/sequential_step1.html new file mode 100644 index 0000000..d9a34dd --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/sequential_step1.html @@ -0,0 +1,73 @@ +Implement a C (or C++) program called sequential_julia (source file sequential_julia.c) that: + +

Takes a single command-line argument, n, an integer that's strictly positive.

Fills this array with pixel values corresponding to the Julia set.

+ +

+ + See the source of compute_julia_pixel()... +

+{% highlight C %} +{% include_relative compute_julia_pixel.c %} +{% endhighlight %} +

+ +
+ +

+ The program must store the pixels of the 2-D image into the 1-D array using a row-major scheme. +

+ + +

+ + See more details about this "row-major" business... +

+ +

+
+ + +Now that the program computes the Julia set pixels as a 1-D array of 3-byte elements, it would be nice to see them (if only to check +that they're set correctly). So let's move on to Step #2... + + + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/sequential_step2.html b/topic_basics_of_distributed_memory_programming/julia_set/sequential_step2.html new file mode 100644 index 0000000..12f32e6 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/sequential_step2.html @@ -0,0 +1,62 @@ +

+Augment your program so that it saves the image to a file called julia.bmp, which stores +the image in the bmp format. A bmp file consists of two parts: +

A header

The 3-byte pixels of the image, in a row-major fashion

+ +

+ + See the source of write_bmp_header()... +

+{% highlight c %} +{% include_relative write_bmp_header.c %} +{% endhighlight %} +

+ + +

+ Second, here is a code fragment that shows how to write the pixels in a 1-D pixed array to + a bpm file (opened as file output_file) after the header has been written: +

+ +{% highlight c %} +// Writing the pixels after the header +for (y=0; y < height; y++) { + for (x=0; x < width; x++) { + fwrite(&(pixels[y * 3 * width + x * 3]), sizeof(char), 3, output_file); + } + // padding in case of an even number of pixels per row + unsigned char padding[3] = {0,0,0}; + fwrite(padding, sizeof(char), ((width * 3) % 4), output_file); +} +{% endhighlight %} + +

+ +

+ + +

Once this is done, you are ready + to go on to Activity #2, in which we make the program parallel! +

diff --git a/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster.xml b/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster.xml new file mode 100644 index 0000000..6d12a64 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster.xml @@ -0,0 +1,6124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster_hostfile.txt b/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster_hostfile.txt new file mode 100644 index 0000000..e3f01bf --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/simple_cluster_hostfile.txt @@ -0,0 +1,64 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu diff --git a/topic_basics_of_distributed_memory_programming/julia_set/simple_spmd_program.html b/topic_basics_of_distributed_memory_programming/julia_set/simple_spmd_program.html new file mode 100644 index 0000000..a5a89a4 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/simple_spmd_program.html @@ -0,0 +1,15 @@ + + + + +

+ TBD +

+ + diff --git a/topic_basics_of_distributed_memory_programming/julia_set/write_bmp_header.c b/topic_basics_of_distributed_memory_programming/julia_set/write_bmp_header.c new file mode 100644 index 0000000..3d1e666 --- /dev/null +++ b/topic_basics_of_distributed_memory_programming/julia_set/write_bmp_header.c @@ -0,0 +1,54 @@ +/* write_bmp_header(): + * + * In: + * f: A file open for writing ('w') + * (width, height): image dimensions + * + * Return: + * 0 on success, -1 on failure + * + */ + +int write_bmp_header(FILE *f, int width, int height) { + + unsigned int row_size_in_bytes = width * 3 + + ((width * 3) % 4 == 0 ? 0 : (4 - (width * 3) % 4)); + + // Define all fields in the bmp header + char id[3] = "BM"; + unsigned int filesize = 54 + (int)(row_size_in_bytes * height * sizeof(char)); + short reserved[2] = {0,0}; + unsigned int offset = 54; + + unsigned int size = 40; + unsigned short planes = 1; + unsigned short bits = 24; + unsigned int compression = 0; + unsigned int image_size = width * height * 3 * sizeof(char); + int x_res = 0; + int y_res = 0; + unsigned int ncolors = 0; + unsigned int importantcolors = 0; + + // Write the bytes to the file, keeping track of the + // number of written "objects" + size_t ret = 0; + ret += fwrite(id, sizeof(char), 2, f); + ret += fwrite(&filesize, sizeof(int), 1, f); + ret += fwrite(reserved, sizeof(short), 2, f); + ret += fwrite(&offset, sizeof(int), 1, f); + ret += fwrite(&size, sizeof(int), 1, f); + ret += fwrite(&width, sizeof(int), 1, f); + ret += fwrite(&height, sizeof(int), 1, f); + ret += fwrite(&planes, sizeof(short), 1, f); + ret += fwrite(&bits, sizeof(short), 1, f); + ret += fwrite(&compression, sizeof(int), 1, f); + ret += fwrite(&image_size, sizeof(int), 1, f); + ret += fwrite(&x_res, sizeof(int), 1, f); + ret += fwrite(&y_res, sizeof(int), 1, f); + ret += fwrite(&ncolors, sizeof(int), 1, f); + ret += fwrite(&importantcolors, sizeof(int), 1, f); + + // Success means that we wrote 17 "objects" successfully + return (ret != 17); +} diff --git a/topic_communication/broadcast/asynchronous.html b/topic_communication/broadcast/asynchronous.html new file mode 100644 index 0000000..fe060f0 --- /dev/null +++ b/topic_communication/broadcast/asynchronous.html @@ -0,0 +1,23 @@ +

In this activity we enhance the ring-based pipelined broadcast + so that it uses asynchronous communication, +to use network links even better. +

+ + + + +

+ + {% include_relative asynchronous_broadcast.html %} + +

+ + +

+ + {% include_relative asynchronous_broadcast_evaluation.html %} + +

diff --git a/topic_communication/broadcast/asynchronous_broadcast.html b/topic_communication/broadcast/asynchronous_broadcast.html new file mode 100644 index 0000000..8577709 --- /dev/null +++ b/topic_communication/broadcast/asynchronous_broadcast.html @@ -0,0 +1,37 @@ +

+ In our current implementation of the broadcast, we use MPI_Send and + MPI_Recv. One drawback of this approach is that a process can only + send or receive data at a time. However, it would make sense for a process + to send chunk #i to its successor while receiving chunk #i+1 from its predecessor. Intuitively, + it should make it possible to hide network overheads better and + perhaps to achieve higher data transfer rates. + Augment your code in bcast_solution.c program with a new broadcast implementation + called asynchronous_pipelined_ring_bcast. This implementation builds on the + pipelined_ring_bcast implementation but uses the following MPI asynchronous communication primitives: + MPI_Isend and MPI_Wait. +

+ +

+ Although in principle simple, adding asynchronous communication is often not done correctly + by beginner MPI programmers. Here are common mistakes to avoid when implementing asynchronous_pipelined_ring_bcast: +

Each call to MPI_Isend must have a matching MPI_Wait call.

+ +

+ The call to MPI_Isend for chunk #i must be issued only after the + call to MPI_Recv for chunk #i (since one must wait to have received a chunk to forward it + to one's successor).

+ +

Having a call to MPI_Isend immediately followed by its matching + MPI_Wait call is equivalent to a single MPI_Send call, i.e., it + does not implement asynchronous communication!

+ +

Given the above, and given that the intent is that one asynchronously sends chunk #i to one's + successor while receiving chunk #i+1 from one's predecessor, you should be able to determine + the sequence of communication operations at each process. Note that in all the above + the root process is a special case because it only sends and never receives. And so + is the last process since it only receives and never sends.

+ +

+ diff --git a/topic_communication/broadcast/asynchronous_broadcast_evaluation.html b/topic_communication/broadcast/asynchronous_broadcast_evaluation.html new file mode 100644 index 0000000..1452601 --- /dev/null +++ b/topic_communication/broadcast/asynchronous_broadcast_evaluation.html @@ -0,0 +1,32 @@ +

+ Run asynchronous_pipelined_ring_bcast using chunk sizes of 100,000 bytes, + 500,000 bytes, + 1,000,000 bytes, + 5,000,000 bytes, + 10,000,000 bytes, + 50,000,000 bytes, and + 100,000,000 (i.e., 1 chunk) + on a 50-processor ring. Report the + simulated execution times. Remember that the generate_xml_ring_and_hostfile.py + Python script can be used to generate platform files and hostfiles. +

+ +

+ Answer the following questions: +

+ Is the best chunk size the same as that for pipelined_ring_bcast? +

+ When using the best chunk size for each of the two + implementations (which may be the same if the answer to the previous question is "yes"), + does the use of MPI_Isend help? By how much?

+ +

Is asynchronous_pipelined_ring_bcast faster than default_bcast or slower? By how much?

What do you conclude about the use of asynchronous communications for the purpose + of a ring-based broadcast on a ring-shaped physical platform?

+ +

+ + diff --git a/topic_communication/broadcast/bcast_skeleton.c b/topic_communication/broadcast/bcast_skeleton.c new file mode 100644 index 0000000..d95c61e --- /dev/null +++ b/topic_communication/broadcast/bcast_skeleton.c @@ -0,0 +1,191 @@ +#include +#include +#include +#include +#include + +// See for the (bad) default random number generator +#define RAND_SEED 842270 + +// Number of bytes to broadcast + +#define NUM_BYTES 100000000 + +/////////////////////////////////////////////////////// +//// program_abort() and print_usage() functions ////// +/////////////////////////////////////////////////////// + +static void program_abort(char *exec_name, char *message); +static void print_usage(); + +// Abort, printing the usage information only if the +// first argument is non-NULL (and hopefully set to argv[0]), and +// printing the second argument regardless. +static void program_abort(char *exec_name, char *message) { + int my_rank; + MPI_Comm_rank(MPI_COMM_WORLD,&my_rank); + if (my_rank == 0) { + if (message) { + fprintf(stderr,"%s",message); + } + if (exec_name) { + print_usage(exec_name); + } + } + MPI_Finalize(); + //MPI_Abort(MPI_COMM_WORLD, 1); + exit(1); +} + +// Print the usage information +static void print_usage(char *exec_name) { + int my_rank; + MPI_Comm_rank(MPI_COMM_WORLD,&my_rank); + + if (my_rank == 0) { + fprintf(stderr,"Usage: smpirun --cfg=smpi/bcast:mpich -np \n"); + fprintf(stderr," -platform -hostfile \n"); + fprintf(stderr," %s [-c ]\n",exec_name); + fprintf(stderr,"MPIRUN arguments:\n"); + fprintf(stderr,"\t: number of MPI processes\n"); + fprintf(stderr,"\t: a Simgrid platform description file\n"); + fprintf(stderr,"\t: MPI host file with host names from the platform file\n"); + fprintf(stderr,"PROGRAM arguments:\n"); + fprintf(stderr,"\t: the name of the broadcast implementation (e.g., naive_bcast)\n"); + fprintf(stderr,"\t[-c ]: chunk size in bytes for message splitting (optional)\n"); + fprintf(stderr,"\n"); + } + return; +} + +/////////////////////////// +////// Main function ////// +/////////////////////////// + +int main(int argc, char *argv[]) +{ + int i,j; + int chunk_size = NUM_BYTES; + char *bcast_implementation_name; + + // Parse command-line arguments (not using getopt because not thread-safe + // and annoying anyway). The code below ignores extraneous command-line + // arguments, which is lame, but we're not in the business of developing + // a cool thread-safe command-line argument parser. + + MPI_Init(&argc, &argv); + + // Bcast implementation name + if (argc < 2) { + program_abort(argv[0],"Missing argument\n"); + } else { + bcast_implementation_name = argv[1]; + } + + // Check that the implementation name is valid + if (strcmp(bcast_implementation_name, "naive_bcast") && + strcmp(bcast_implementation_name, "default_bcast") && + strcmp(bcast_implementation_name, "ring_bcast") && + strcmp(bcast_implementation_name, "pipelined_ring_bcast") && + strcmp(bcast_implementation_name, "asynchronous_pipelined_ring_bcast") && + strcmp(bcast_implementation_name, "asynchronous_pipelined_bintree_bcast")) { + char message[256]; + sprintf(message, "Unknown bcast implementation name '%s'\n",bcast_implementation_name); + program_abort(NULL,message); + } + + // Chunk size optional argument + for (i=1; i < argc; i++) { + if (!strcmp(argv[i],"-c")) { + if ((i+1 >= argc) || (sscanf(argv[i+1],"%d",&chunk_size) != 1)) { + program_abort(argv[0],"Invalid argument\n"); + } + } + } + + // Determine rank and number of processes + int num_procs; + int rank; + MPI_Comm_rank(MPI_COMM_WORLD, &rank); + MPI_Comm_size(MPI_COMM_WORLD, &num_procs); + + // Allocate buffer + int checksum; + char *buffer; + + if ((buffer = malloc(sizeof(char) * NUM_BYTES)) == NULL) { + program_abort(argv[0],"Out of memory!"); + } + + // On rank 0 fill the buffer with random data + if (0 == rank) { + checksum = 0; + srandom(RAND_SEED); + for (j = 0; j < NUM_BYTES; j++) { + buffer[j] = (char) (random() % 256); + checksum += buffer[j]; + } + } + + // Start the timer + double start_time; + MPI_Barrier(MPI_COMM_WORLD); + if (rank == 0) { + start_time = MPI_Wtime(); + } + + ///////////////////////////////////////////////////////////////////////////// + //////////////////////////// TO IMPLEMENT: BEGIN //////////////////////////// + ///////////////////////////////////////////////////////////////////////////// + + // char *bcast_implementation_name: the bcast implementation name (argument #1) + // int chunk_size: the chunk size (optional argument #2) + // int NUM_BYTES: the number of bytes to broadcast + // char *buffer: the buffer to broadcast + + // Process rank 0 should be the source of the broadcast + +#include "bcast_solution.c" + + ///////////////////////////////////////////////////////////////////////////// + ///////////////////////////// TO IMPLEMENT: END ///////////////////////////// + ///////////////////////////////////////////////////////////////////////////// + + // All processes send checksums back to the root, which checks for consistency + char all_ok = 1; + if (0 == rank) { + for (j = 1; j < num_procs; j++) { + int received_checksum; + MPI_Recv(&received_checksum, 1, MPI_INT, MPI_ANY_SOURCE, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE); + // Print a single message in case of a mismatch, but continue + // receiving other checksums to ensure that all processes + // reach the MPI_Finalize() + if ((all_ok == 1) && (checksum != received_checksum)) { + fprintf(stderr,"\t** Non-matching checksum! **\n"); + all_ok = 0; + break; + } + } + } else { + int checksum=0; + for (j = 0; j < NUM_BYTES; j++) { + checksum += buffer[j]; + } + MPI_Send(&checksum, 1, MPI_INT, 0, 1, MPI_COMM_WORLD); + } + + // Print out bcast implementation name and wall-clock time, only if the bcast was successful + MPI_Barrier(MPI_COMM_WORLD); + if ((0 == rank) && (all_ok)) { + fprintf(stdout,"implementation: %s | chunksize: %d | time: %.3lf seconds\n", + bcast_implementation_name, + chunk_size, + MPI_Wtime() - start_time); + } + + // Clean-up + free(buffer); + MPI_Finalize(); + + return 0; +} diff --git a/topic_communication/broadcast/bintree.html b/topic_communication/broadcast/bintree.html new file mode 100644 index 0000000..f58b3c1 --- /dev/null +++ b/topic_communication/broadcast/bintree.html @@ -0,0 +1,26 @@ +

In this activity we shift gear completely and abandon the idea of a ring-based broadcast. Instead +we organize the processes as a logical binary tree. The root of the broadcast is also at +the root of the tree. In practice, many broadcast algorithms are tree-based. + And several real-world systems comprise tree-shaped network topologies. + We will +evaluate this new broadcast implementation on both a ring-shaped physical platform +and a tree-shaped physical platform.

+ + + + +

+ + {% include_relative bintree_broadcast.html %} + +

+ + +

+ + {% include_relative bintree_broadcast_evaluation.html %} + +

diff --git a/topic_communication/broadcast/bintree_50.xml b/topic_communication/broadcast/bintree_50.xml new file mode 100644 index 0000000..03283de --- /dev/null +++ b/topic_communication/broadcast/bintree_50.xml @@ -0,0 +1,265 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/topic_communication/broadcast/bintree_broadcast.html b/topic_communication/broadcast/bintree_broadcast.html new file mode 100644 index 0000000..fe23189 --- /dev/null +++ b/topic_communication/broadcast/bintree_broadcast.html @@ -0,0 +1,22 @@ +

+Augment your code in bcast_solution.c with an implementation called + asynchronous_pipelined_bintree_bcast that + implements the broadcast along a binary tree, splitting the message into chunks for + pipelining and using asynchronous communication. The root of the broadcast, + process of rank #0, is also the root of the binary tree. Note that the binary tree may + not be complete if the number of processors is not of the form 2ⁿ − 1. +

+ + +

+ Use a level order traversal numbering of the nodes in your tree: + rank 0 has rank 1 as its left child and rank 2 as its right child, + rank 1 has rank 3 as its left child and rank 4 as its right child, + etc. The reason why we impose this order is that this is also the order used to number + processes in the platform description file used for experimental evaluations (see Step #2). The idea + is that the logical binary tree of processes is identical to the physical binary tree of processors + (process #i runs on processor #i). +

+ + + diff --git a/topic_communication/broadcast/bintree_broadcast_evaluation.html b/topic_communication/broadcast/bintree_broadcast_evaluation.html new file mode 100644 index 0000000..9f7f5a9 --- /dev/null +++ b/topic_communication/broadcast/bintree_broadcast_evaluation.html @@ -0,0 +1,39 @@ +

+ Report the (simulated) wall-clock time of + default_bcast, + asynchronous_pipelined_ring_bcast, and + asynchronous_pipelined_bintree_bcast, on + a 50-processor ring platform and a 50-processor binary tree platform. + For asynchronous_pipelined_ring_bcast and + asynchronous_pipelined_bintree_bcast use the "best chunksize" you determined + in Activity #3 for the 50-processor ring platform. +

+ +

+ You are provided with a Python script + (generate_xml_bintree_and_hostfile.py) + that generates the XML file (and hostfile) for the binary tree platform. As for + the generate_xml_bintree_and_hostfile.py script, + the number of processors is passed as a command-line + argument. Just in case, + here are the files generated using this script for 50 processors: bintree_50.xml and + hostfile_50.txt. +

+ +

+ Answer the following questions: +

+ On the 50-processor ring platform, how does asynchronous_pipelined_bintree_bcast compare + to asynchronous_pipelined_ring_bcast? Is it unexpected? +

+ On the 50-processor binary tree platform, how do the three implementations compare? + Does it seem worth it to implement your own binary tree broadcast on a binary tree physical + platform? +

+ +

+ + diff --git a/topic_communication/broadcast/cluster.html b/topic_communication/broadcast/cluster.html new file mode 100644 index 0000000..a17b529 --- /dev/null +++ b/topic_communication/broadcast/cluster.html @@ -0,0 +1,19 @@ +

+ Many high-performance computing platforms these days are built using crossbar switches. Although + the topology of these switches can itself be a ring, a tree, or anything else, in many cases + sizeable platforms are deployed with only a small number of swicthes. In this activity + we evaluate our broadcast implementation on two commonplace cluster platform configurations. + +

+ + + + +

+ + {% include_relative cluster_evaluation.html %} + +

+ diff --git a/topic_communication/broadcast/cluster_backbone_64.xml b/topic_communication/broadcast/cluster_backbone_64.xml new file mode 100644 index 0000000..15841a7 --- /dev/null +++ b/topic_communication/broadcast/cluster_backbone_64.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/topic_communication/broadcast/cluster_crossbar_64.xml b/topic_communication/broadcast/cluster_crossbar_64.xml new file mode 100644 index 0000000..ebc1c71 --- /dev/null +++ b/topic_communication/broadcast/cluster_crossbar_64.xml @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + diff --git a/topic_communication/broadcast/cluster_evaluation.html b/topic_communication/broadcast/cluster_evaluation.html new file mode 100644 index 0000000..a26b132 --- /dev/null +++ b/topic_communication/broadcast/cluster_evaluation.html @@ -0,0 +1,40 @@ +

+ Report the (simulated) wall-clock time of + default_bcast, + asynchronous_pipelined_ring_bcast, and + asynchronous_pipelined_bintree_bcast, on the following two + platforms: + +

+ +

A 64-processor cluster based on a single crossbar switch: + cluster_crossbar_64.xml. +

+ +

A 64-processor cluster with a shared backbone: + cluster_backbone_64.xml. +

+ + You can use this hostfile: hostfile_64.txt. + + For asynchronous_pipelined_ring_bcast and + asynchronous_pipelined_bintree_bcast use the "best chunksize" you determined + in Activity #3 for the 50-processor ring platform. +

+ + +

+ Answer the following question: +

+ Overall, does it seem like it's a good idea to use the default MPI broadcast on these more standard platforms, + or should one implement one's own? + Note that the default broadcast has to pick a particular chunk size while we are "cheating" by picking + an empirically good chunk size for our implementations! +

+ +

+ + diff --git a/topic_communication/broadcast/conclusion.html b/topic_communication/broadcast/conclusion.html new file mode 100644 index 0000000..a3feeaf --- /dev/null +++ b/topic_communication/broadcast/conclusion.html @@ -0,0 +1,49 @@ +

+ + + +

+ Congratulations for completing this module. At this point you have learned how + to use point-to-point MPI communication, both synchronous and asynchronous; + you have learned about the most common collective communication primitive, + the broadcast; you have observed first hand the connection between communication + patterns and the underlying network topology; you have learned how pipelining + and asynchronous communication can boost communication performance. +

+ +

+ As part of our experimental evaluations, you have observed the overall good + performance of the default MPI_Bcast implementation. It would be very + enlightening to look at open source MPI implementations and inspect the code + (although it is intricate) to understand how the broadcast is implemented. In general, + few developers implement broadcast by hand. However, in some cases (see upcoming modules), + it can be useful to use a by-hand implementation of a broadcast to achieve better + performance (in general, better overlap of communication and computation). +

+ + + +

+ +

+ + + +

+ At the end of your report, write a brief "essay" explaining what you found + surprising/challenging, and what solutions you used to solve + your difficulties. Are you happy with your implementations? Do you + see room for improvement? +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_communication/broadcast/generate_xml_bintree_and_hostfile.py b/topic_communication/broadcast/generate_xml_bintree_and_hostfile.py new file mode 100755 index 0000000..c42ecb5 --- /dev/null +++ b/topic_communication/broadcast/generate_xml_bintree_and_hostfile.py @@ -0,0 +1,122 @@ +#!/usr/bin/env python3 +import sys +import os +import math + +# Link parameters +link_latency = "10us" +link_bandwidth = 10 +link_bandwidth_unit = "Gbps" + + +# Convenient math wrappers +def floor(x): + return int(math.floor(x)) +def ceil(x): + return int(math.ceil(x)) +def pow2(x): + return int(math.pow(2,x)) + +# XML generation functions +def issueHead(): + head = ("\n" + "\n" + "\n\n") + + config_clause = ("\n" + "\n" + "\n" + "\n" + "\n\n") + + AS_head = "\n" + + return head + config_clause + AS_head + + +def issueTail(): + return "\n\n" + +def issueLink1(x): + return " \n" + +def issueLink2(x,y): + return " \n" + +def issueLink3(x,y,bw): + return " \n" + +def issueHost(index): + return " \n" + +def issueRouteHead(index1, index2): + return " \n" +def issueRouteTail(): + return " \n" + +def issueRouteLink1(x): + return "\t\n" + +def issueRouteLink2(x,y): + return "\t\n" + +###################################################################### +# Parse command-line arguments +if (len(sys.argv) != 2): + sys.stderr.write("Usage: "+sys.argv[0]+" \n") + sys.stderr.write(" Will generate a bintree_.xml and hostfile_.txt file\n") + sys.exit(1) + +num_hosts = int(sys.argv[1]) + + +############################################################### +# Generate Binary Tree XML file + +filename = "./bintree_"+str(num_hosts)+".xml" +fh = open(filename, 'w') +fh.write(issueHead()) + +# Create all hosts and links +for i in range(0,num_hosts): + fh.write(issueHost(i)) + if (i*2+1 < num_hosts): + fh.write(issueLink2(i,i*2+1)) + if (i*2+2 < num_hosts): + fh.write(issueLink2(i,i*2+2)) + +# Create all routes +for i in range(0,num_hosts): + level_i = floor(math.log(1+i,2)) + left_child = 2*i+1 + right_child = 2*i+2 + if (left_child < num_hosts): + fh.write(issueRouteHead(i, left_child)) + fh.write(issueRouteLink2(i,left_child)) + fh.write(issueRouteTail()) + if (right_child < num_hosts): + fh.write(issueRouteHead(i, right_child)) + fh.write(issueRouteLink2(i,right_child)) + fh.write(issueRouteTail()) + +fh.write(issueTail()) +fh.close() +sys.stderr("BinTree XML platform description file created: "+filename+"\n") + +############################################################### +## Generate host file +filename = "./hostfile_"+str(num_hosts)+".txt" +fh = open(filename, 'w') + +for i in range(0,num_hosts): + fh.write("host-"+str(i)+".hawaii.edu\n") + +fh.close() +sys.stderr("Hostfile created: "+filename +"\n") + diff --git a/topic_communication/broadcast/generate_xml_ring_and_hostfile.py b/topic_communication/broadcast/generate_xml_ring_and_hostfile.py new file mode 100755 index 0000000..18f2478 --- /dev/null +++ b/topic_communication/broadcast/generate_xml_ring_and_hostfile.py @@ -0,0 +1,107 @@ +#!/usr/bin/env python3 +import sys +import os +import math + +# Link parameters +link_latency = "10us" +link_bandwidth = 10 +link_bandwidth_unit = "Gbps" + +# XML generation functions +def issueHead(): + head = ("\n" + "\n" + "\n\n") + + config_clause = ("\n" + "\n" + "\n" + "\n" + "\n\n") + + AS_head = "\n" + + return head + config_clause + AS_head + + +def issueTail(): + return "\n\n" + +def issueLink1(x): + return " \n" + +def issueLink2(x,y): + return " \n" + +def issueLink3(x,y,bw): + return " \n" + +def issueHost(index): + return " \n" + +def issueRouteHead(index1, index2): + return " \n" +def issueRouteTail(): + return " \n" + +def issueRouteLink1(x): + return "\t\n" + +def issueRouteLink2(x,y): + return "\t\n" + +###################################################################### +# Parse command-line arguments +if (len(sys.argv) != 2): + sys.stderr.write("Usage: "+sys.argv[0]+" \n") + sys.stderr.write(" Will generate a ring_.xml and hostfile_.txt file\n") + exit(1) + +num_hosts = int(sys.argv[1]) + +############################################################### +# Generate RING XML file +filename = "./ring_"+str(num_hosts)+".xml" +fh = open(filename, 'w') +fh.write(issueHead()) + +# Create hosts +for i in range(0,num_hosts): + fh.write(issueHost(i)) + +# Create links +for i in range(0,num_hosts): + fh.write(issueLink1(i)) + +## Create one-hop routes +for i in range (0,num_hosts): + src = i + dst = i+1 + if (dst == num_hosts): + dst = 0; + fh.write(issueRouteHead(src,dst)) + fh.write(issueRouteLink1(src)) + fh.write(issueRouteTail()) + +fh.write(issueTail()) +fh.close() +sys.stderr.write("Ring XML platform file created: "+filename+"\n") + +############################################################### +## Generate host file +filename = "./hostfile_"+str(num_hosts)+".txt" +fh = open(filename, 'w') + +for i in range(0,num_hosts): + fh.write("host-"+str(i)+".hawaii.edu\n") + +fh.close() +sys.stderr.write("Hostfile created: "+filename+"\n") + diff --git a/topic_communication/broadcast/hostfile_50.txt b/topic_communication/broadcast/hostfile_50.txt new file mode 100644 index 0000000..7050a95 --- /dev/null +++ b/topic_communication/broadcast/hostfile_50.txt @@ -0,0 +1,50 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu diff --git a/topic_communication/broadcast/hostfile_64.txt b/topic_communication/broadcast/hostfile_64.txt new file mode 100644 index 0000000..e3f01bf --- /dev/null +++ b/topic_communication/broadcast/hostfile_64.txt @@ -0,0 +1,64 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu diff --git a/topic_communication/broadcast/index.html b/topic_communication/broadcast/index.html new file mode 100644 index 0000000..38aca5d --- /dev/null +++ b/topic_communication/broadcast/index.html @@ -0,0 +1,1095 @@ + + + + + + + + + + + + + Topic #2 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To implement several versions of a broadcast collective (i.e., a one-to-many communication), + and to compare them in various platform setups. +

+ +

This module consists of 4 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Realize a naive and a ring-based implementation. +
Activity #2: Enhance the ring-based implementation with pipelining. +
Activity #3: Enhance the ring-based implementation further using asynchronous communication. +
Activity #4: Implement a binary-tree-based implementation (with pipelining and asynchronous communication). +

In all activities above you will compare your implementation with MPI_Bcast, for different platform configurations.

+ +

+ + +

+ +

+ Throughout this module, you will be adding code to a "skeleton program" (download bcast_skeleton.c): + +

+ + See the source code of bcast_skeleton.c ... +

+ +

#include <stdio.h>
+#include <stdlib.h>
+#include <unistd.h>
+#include <mpi.h>
+#include <string.h>
+
+// See for the (bad) default random number generator
+#define RAND_SEED 842270
+
+// Number of bytes to broadcast
+
+#define NUM_BYTES 100000000
+
+///////////////////////////////////////////////////////
+//// program_abort() and print_usage() functions //////
+///////////////////////////////////////////////////////
+
+static void program_abort(char *exec_name, char *message);
+static void print_usage();
+
+// Abort, printing the usage information only if the
+// first argument is non-NULL (and hopefully set to argv[0]), and
+// printing the second argument regardless.
+static void program_abort(char *exec_name, char *message) {
+  int my_rank;
+  MPI_Comm_rank(MPI_COMM_WORLD,&my_rank);
+  if (my_rank == 0) {
+    if (message) {
+      fprintf(stderr,"%s",message);
+    }
+    if (exec_name) {
+      print_usage(exec_name);
+    }
+  }
+  MPI_Finalize();
+  //MPI_Abort(MPI_COMM_WORLD, 1);
+  exit(1);
+}
+
+// Print the usage information
+static void print_usage(char *exec_name) {
+  int my_rank;
+  MPI_Comm_rank(MPI_COMM_WORLD,&my_rank);
+
+  if (my_rank == 0) {
+    fprintf(stderr,"Usage: smpirun --cfg=smpi/bcast:mpich -np <num processes>\n");
+    fprintf(stderr,"              -platform <XML platform file> -hostfile <host file>\n");
+    fprintf(stderr,"              %s <bcast implementation name> [-c <chunk size>]\n",exec_name);
+    fprintf(stderr,"MPIRUN arguments:\n");
+    fprintf(stderr,"\t<num processes>: number of MPI processes\n");
+    fprintf(stderr,"\t<XML platform file>: a Simgrid platform description file\n");
+    fprintf(stderr,"\t<host file>: MPI host file with host names from the platform file\n");
+    fprintf(stderr,"PROGRAM arguments:\n");
+    fprintf(stderr,"\t<bcast implementation name>: the name of the broadcast implementation (e.g., naive_bcast)\n");
+    fprintf(stderr,"\t[-c <chunk size>]: chunk size in bytes for message splitting (optional)\n");
+    fprintf(stderr,"\n");
+  }
+  return;
+}
+
+///////////////////////////
+////// Main function //////
+///////////////////////////
+
+int main(int argc, char *argv[])
+{
+  int i,j;
+  int chunk_size = NUM_BYTES;
+  char *bcast_implementation_name;
+
+  // Parse command-line arguments (not using getopt because not thread-safe
+  // and annoying anyway). The code below ignores extraneous command-line
+  // arguments, which is lame, but we're not in the business of developing
+  // a cool thread-safe command-line argument parser.
+
+  MPI_Init(&argc, &argv);
+
+  // Bcast implementation name
+  if (argc < 2) {
+    program_abort(argv[0],"Missing <bcast implementation name> argument\n");
+  } else {
+    bcast_implementation_name = argv[1];
+  }
+
+  // Check that the implementation name is valid
+  if (strcmp(bcast_implementation_name, "naive_bcast") &&
+      strcmp(bcast_implementation_name, "default_bcast") &&
+      strcmp(bcast_implementation_name, "ring_bcast") &&
+      strcmp(bcast_implementation_name, "pipelined_ring_bcast") &&
+      strcmp(bcast_implementation_name, "asynchronous_pipelined_ring_bcast") &&
+      strcmp(bcast_implementation_name, "asynchronous_pipelined_bintree_bcast")) {
+    char message[256];
+    sprintf(message, "Unknown bcast implementation name '%s'\n",bcast_implementation_name);
+    program_abort(NULL,message);
+  }
+
+  // Chunk size optional argument
+  for (i=1; i < argc; i++) {
+    if (!strcmp(argv[i],"-c")) {
+      if ((i+1 >= argc) || (sscanf(argv[i+1],"%d",&chunk_size) != 1)) {
+        program_abort(argv[0],"Invalid <chunk size> argument\n");
+      }
+    }
+  }
+  
+  // Determine rank and number of processes
+  int num_procs;
+  int rank;
+  MPI_Comm_rank(MPI_COMM_WORLD, &rank);
+  MPI_Comm_size(MPI_COMM_WORLD, &num_procs);
+
+  // Allocate buffer
+  int checksum;
+  char *buffer;
+  
+  if ((buffer = malloc(sizeof(char) * NUM_BYTES)) == NULL) {
+    program_abort(argv[0],"Out of memory!");
+  }
+
+  // On rank 0 fill the buffer with random data 
+  if (0 == rank) { 
+    checksum = 0;
+    srandom(RAND_SEED);
+    for (j = 0; j < NUM_BYTES; j++) {
+      buffer[j] = (char) (random() % 256); 
+      checksum += buffer[j];
+    }
+  }
+
+  // Start the timer
+  double start_time;
+  MPI_Barrier(MPI_COMM_WORLD);
+  if (rank == 0) {  
+    start_time = MPI_Wtime();
+  }
+
+  /////////////////////////////////////////////////////////////////////////////
+  //////////////////////////// TO IMPLEMENT: BEGIN ////////////////////////////
+  /////////////////////////////////////////////////////////////////////////////
+
+  // char *bcast_implementation_name:   the bcast implementation name (argument #1)
+  // int chunk_size:                    the chunk size (optional argument #2)
+  // int NUM_BYTES:                     the number of bytes to broadcast
+  // char *buffer:                      the buffer to broadcast
+
+  // Process rank 0 should be  the source of the broadcast
+
+#include "bcast_solution.c"
+
+  /////////////////////////////////////////////////////////////////////////////
+  ///////////////////////////// TO IMPLEMENT: END /////////////////////////////
+  /////////////////////////////////////////////////////////////////////////////
+ 
+  // All processes send checksums back to the root, which checks for consistency
+  char all_ok = 1;
+  if (0 == rank) {
+    for (j = 1; j < num_procs; j++) {
+      int received_checksum;
+      MPI_Recv(&received_checksum, 1, MPI_INT, MPI_ANY_SOURCE, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE);
+      // Print a single message in case of a mismatch, but continue
+      // receiving other checksums to ensure that all processes
+      // reach the MPI_Finalize()
+      if ((all_ok == 1) && (checksum != received_checksum)) {
+	    fprintf(stderr,"\t** Non-matching checksum! **\n");
+	    all_ok = 0;
+	    break;
+      }
+    }
+  } else {
+    int checksum=0;
+    for (j = 0; j < NUM_BYTES; j++) {
+      checksum += buffer[j];
+    }
+    MPI_Send(&checksum, 1, MPI_INT, 0, 1, MPI_COMM_WORLD);
+  }
+
+  // Print out bcast implementation name and wall-clock time, only if the bcast was successful
+  MPI_Barrier(MPI_COMM_WORLD);
+  if ((0 == rank) && (all_ok)) {
+    fprintf(stdout,"implementation: %s | chunksize: %d |  time: %.3lf seconds\n",
+		    bcast_implementation_name, 
+		    chunk_size,
+		    MPI_Wtime() - start_time);
+  }
+
+  // Clean-up
+  free(buffer);
+  MPI_Finalize();
+
+  return 0;
+}

+ +

+ This program performs a broadcast of a 10⁸ bytes (~ 95 MiB) and takes the following command-line arguments: +

required argument #1: a string that is the name of the broadcast implementation (see each activity)

optional argument #2 ( [-c chunksize]): an integer that specifies a "chunk size" (see activity #2)

+ You should not modify bcast_skeleton.c outside of the "TO IMPLEMENT: BEGIN" and + "TO IMPLEMENT: END" comments. See comments therein for all needed information to implement + your code. Note that you can opt to write your code directly in between these two comments, + or #include it, up to you. Regardless, the goal is to have a single program, + bcast_skeleton, that is executed with different command-line arguments for + all activities in this module. +

+ +

+ The skeleton program does the following for you: parsing of command-line arguments, creation of broadcast data, + checking that the broadcast operation was done correctly, timing of the broadcast operation. +

+ +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

A README file with answers to the questions asked in the activities

+ +

In this activity we develop two simple broadcast implementations, + in the first two steps below. +You can verify correctness of your broadcast implementations using any SimGrid platform file +and corresponding MPI hostfile. In the third step below we evaluate performance for a particular +platform file. +

+ + + + +

+Look at the section of code in bcast_skeleton.c between the TO IMPLEMENT: BEGIN +and TO IMPLEMENT: END comments. The comments list the relevant variables that you will use +in your code. You will note, in that section, that bcast_skeleton.c does an #include bcast_solution.c. So you should create a file bcast_solution.c in which you will write all the code for this assignment. This is more convenient that modifying the bcast_skeleton.c directly. +

+ +

+ In bcast_solution.c, implement a broadcast implementation named + naive_bcast (first command-line argument). This implementation simply + has the root of the broadcast (process with rank 0) perform a single + point-to-point MPI_Send of the whole buffer to each other process (which performs an MPI_Recv). + In other words, the processes are logically organized as + a mono-directional star with process of rank 0 at the center. + The second command-line argument (chunk size) is ignored. +

+ + + + +

+ + +

+ +

+ Augment your code in file bcast_solution.c with + a broadcast implementation named + ring_bcast (first command-line argument). In this implementation, + the process of rank 0 (the root of the broadcast) does a single MPI_Send of the + whole buffer to the process of rank 1, the process of rank 1 then does a single MPI_Send + to the process of rank 2, etc. In other words, the processes are logically organized as + a mono-directional ring. The last process should not send the buffer back to the root process (the root process + does not call MPI_Recv). + The second command-line argument (chunk size) is ignored. +

+ + +

+ +

+ Before you proceed with the evaluation of your two implementations, implement + a third broadcast implementation, named default_bcast, that simply has all processes + call MPI_Bcast. This is the MPI implementation of the broadcast collective communication, + which in this module we implement "by hand" using point-to-point communications. +

+ +

+ We compare the performance of the three implementations on a 50-processor physical ring. Although some + supercomputers + in the old days were designed with a ring network topology, this is no longer the case. The main drawback of a + physical + ring is that it has very large diameter (i.e., there can be ~n/2 hops between two processors in an n-processor ring). + The main advantages + is that the degree is low (2), which implies low cost, and that routing is straightforward. For now we assume a simple + physical ring + so as to better understand broadcast performance. +

+ +

+ It is pretty simple to generate a Simgrid platform file for a ring and the corresponding hostfile. + You can download a Python script (generate_xml_ring_and_hostfile.py) + that generates + these two files given a number of processors passed as a command-line argument. Just in case, + here are the files generated using this script for 50 processors: ring_50.xml and + hostfile_50.txt. +

+ +

+ The way to invoke the program is as follows: +

+ +

  smpirun --cfg=smpi/bcast:mpich -np 50 
+  -platform ring_50.xml -hostfile hostfile_50.txt
+  ./bcast_skeleton <implementation name>
+

+ +

+ The --cfg=smpi/bcase:mpich flag above specifies that we simulate MPI_Bcast (for the + default_bcast implementation) as implemented + in MPICH. Other options are possible, but it's okay to stick with this implementation +

+ +

+ Answer the following questions: +

What are the (simulated) wall-clock time of the three implementations on the 50-processor + ring? +

How far are your "by hand" implementations from the default + broadcast? +

You may observe that ring_bcast does not improve a lot over naive_bcast, which should + be surprising to you. After all, naive_bcast sends long-haul messages while ring_bcast doesn't + What do you think the reason + is? To answer this question, you can instrument your code and run it on smaller rings to see when events happen and + try to understand what's going on. Given that we're using simulation, you should take advantage of it and + experiment with all kinds of platform configurations to gain understanding of the performance behavior. For + instance, + you can modify link latencies and bandwidths. + The MPI_Wtime function is convenient to determine the current (simulated) date. This + function returns the date as a double precision number (and is in fact already used in bcast_skeleton.c). +

+ +

+ Warning: SMPI implements sophisticated simulation models that capture many real-world effects (network + protocol idiosyncrasies, MPI implementation idiosyncrasies). + These effects will be seen in your experiments, just as they would on a real-world platform, + and they tend to make performance behavior more difficult to understand. For instance, if you modify + the buffer size, you will see non-linear effects on performance (e.g., broadcasting a buffer twice as large + will not require exactly twice as much time, broadcasting a buffer 1 byte larger may increase broadcast time significantly). +

+ + +

+ +

In this activity we enhance the ring-based broadcast so that it + uses pipelining to better +utilize the network links. +

+ + + + +

+ +

+ One of the reasons why the default MPI broadcast is fast is that it does pipelining + of communication. Augment your code in bcast_solution.c with a new broadcast implementation + called pipelined_ring_bcast. +

+ +

This implementation uses the chunk size passed as the second command-line argument + to split the broadcast data buffer into multiple chunks. These chunks are communicated in sequence along + the ring. In the first step, process #0 sends chunk #0 to process #1; in the second step, process #1 sends chunk #0 to + process #2 + and process #0 sends chunk #1 to process #1; and so on. As a result of this pipelining, provided the chunk size is + small + enough, all network links can be utilized simultaneously. As in the previous activity, + use MPI_Send and MPI_Recv for + communications. +

+ +

+ Note that the chunk size may not divide the message size, in which case the last chunk will be smaller. +

+ + + + +

+ + +

+ +

+ Run pipelined_ring_bcast using chunk sizes of + 100,000 bytes, + 500,000 bytes, + 1,000,000 bytes, + 5,000,000 bytes, + 10,000,000 bytes, + 50,000,000 bytes, and + 100,000,000 (i.e., 1 chunk), + on a 20-processor ring, a 35-processor ring, and a 50-processor ring. Report the + simulated execution times. Remember that the generate_xml_ring_and_hostfile.py + Python script can be used to generate platform files and hostfiles. +

+ +

+ Answer the following questions: +

+ What is the best chunk size for each of the three platforms? +

Does this chunk size depend on the platform size?

You should observe that the wall-clock time is minimized for a chunk size that is neither the + smallest nor the largest. + Discuss why you think that is. +

For a 50-processor ring, with the best chunk size determined above, + by how much does pipelining help when compared to using a single chunk? +

How does the performance compare to that of the default MPI broadcast for that platform as seen in + the previous question? +

What do you conclude about the use of pipelined communications for the purpose + of a ring-based broadcast on a ring-shaped physical platform?

+ +

+ Warning: You will likely see some "odd" behavior. For instance, as the chunk size increases you may + see the broadcast time decrease, increase, and then decrease again. Or, if ou try very small chunk sizes, + smaller than the ones above, you could see that for some particular chunk sizes the broadcast time is + pretty low, if perhaps not the lowest across the board. These effects are because our simulated MPI captures + many effects of network protocols and MPI implementations. These effects take us away from simple analytical models of communication + performance, in which there is no weirdness, but that simply don't match the reality of communication + behavior in real-world parallel platforms. As a result, experimental results are often confusing and it is difficult + to draw valid conclusions without looking at a lot of results. +

+ + + + +

+ +

In this activity we enhance the ring-based pipelined broadcast + so that it uses asynchronous communication, +to use network links even better. +

+ + + + +

+ +

Each call to MPI_Isend must have a matching MPI_Wait call.

+ +

+ The call to MPI_Isend for chunk #i must be issued only after the + call to MPI_Recv for chunk #i (since one must wait to have received a chunk to forward it + to one's successor).

+ +

Having a call to MPI_Isend immediately followed by its matching + MPI_Wait call is equivalent to a single MPI_Send call, i.e., it + does not implement asynchronous communication!

+ +

+ + + +

+ + +

+ +

+ Answer the following questions: +

+ Is the best chunk size the same as that for pipelined_ring_bcast? +

+ When using the best chunk size for each of the two + implementations (which may be the same if the answer to the previous question is "yes"), + does the use of MPI_Isend help? By how much?

+ +

Is asynchronous_pipelined_ring_bcast faster than default_bcast or slower? By how much?

What do you conclude about the use of asynchronous communications for the purpose + of a ring-based broadcast on a ring-shaped physical platform?

+ +

+ + + + +

+ +

+ + + + +

+ +

+ + +

+ + + + + +

+ + +

+ +

+ Answer the following questions: +

+ On the 50-processor ring platform, how does asynchronous_pipelined_bintree_bcast compare + to asynchronous_pipelined_ring_bcast? Is it unexpected? +

+ On the 50-processor binary tree platform, how do the three implementations compare? + Does it seem worth it to implement your own binary tree broadcast on a binary tree physical + platform? +

+ +

+ + + + +

+ +

+ + + + +

+ +

+ Report the (simulated) wall-clock time of + default_bcast, + asynchronous_pipelined_ring_bcast, and + asynchronous_pipelined_bintree_bcast, on the following two + platforms: + +

+ +

A 64-processor cluster based on a single crossbar switch: + cluster_crossbar_64.xml. +

+ +

A 64-processor cluster with a shared backbone: + cluster_backbone_64.xml. +

+ + +

+ Answer the following question: +

+ +

+ + + + +

+ + +

+ +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_communication/broadcast/introduction.html b/topic_communication/broadcast/introduction.html new file mode 100644 index 0000000..1ac9793 --- /dev/null +++ b/topic_communication/broadcast/introduction.html @@ -0,0 +1,86 @@ +

+ + + +

+ Objective: To implement several versions of a broadcast collective (i.e., a one-to-many communication), + and to compare them in various platform setups. +

+ +

This module consists of 4 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Realize a naive and a ring-based implementation. +
Activity #2: Enhance the ring-based implementation with pipelining. +
Activity #3: Enhance the ring-based implementation further using asynchronous communication. +
Activity #4: Implement a binary-tree-based implementation (with pipelining and asynchronous communication). +

In all activities above you will compare your implementation with MPI_Bcast, for different platform configurations.

+ +

+ + +

+ +

+ Throughout this module, you will be adding code to a "skeleton program" (download bcast_skeleton.c): + +

+ + See the source code of bcast_skeleton.c ... +

+{% highlight C %} +{% include_relative bcast_skeleton.c %} +{% endhighlight %} +

+ +

+ This program performs a broadcast of a 10⁸ bytes (~ 95 MiB) and takes the following command-line arguments: +

required argument #1: a string that is the name of the broadcast implementation (see each activity)

optional argument #2 ( [-c chunksize]): an integer that specifies a "chunk size" (see activity #2)

+ +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

A README file with answers to the questions asked in the activities

\ No newline at end of file diff --git a/topic_communication/broadcast/naive_and_ring.html b/topic_communication/broadcast/naive_and_ring.html new file mode 100644 index 0000000..424e86a --- /dev/null +++ b/topic_communication/broadcast/naive_and_ring.html @@ -0,0 +1,33 @@ +

+ + + + +

+ + {% include_relative naive_broadcast.html %} + +

+ + +

+ + {% include_relative ring_broadcast.html %} + +

+ + +

+ + {% include_relative naive_ring_broadcast_evaluation.html %} + +

diff --git a/topic_communication/broadcast/naive_broadcast.html b/topic_communication/broadcast/naive_broadcast.html new file mode 100644 index 0000000..9bef0fe --- /dev/null +++ b/topic_communication/broadcast/naive_broadcast.html @@ -0,0 +1,20 @@ + + + +

+ +

+ + diff --git a/topic_communication/broadcast/naive_ring_broadcast_evaluation.html b/topic_communication/broadcast/naive_ring_broadcast_evaluation.html new file mode 100644 index 0000000..cd9c7bc --- /dev/null +++ b/topic_communication/broadcast/naive_ring_broadcast_evaluation.html @@ -0,0 +1,77 @@ +

+ +

+ The way to invoke the program is as follows: +

+ +

+ {% highlight text %} + smpirun --cfg=smpi/bcast:mpich -np 50 + -platform ring_50.xml -hostfile hostfile_50.txt + ./bcast_skeleton + {% endhighlight %} +

+ +

+ Answer the following questions: +

What are the (simulated) wall-clock time of the three implementations on the 50-processor + ring? +

How far are your "by hand" implementations from the default + broadcast? +

+ +

diff --git a/topic_communication/broadcast/pipelined_broadcast.html b/topic_communication/broadcast/pipelined_broadcast.html new file mode 100644 index 0000000..7e1c6fb --- /dev/null +++ b/topic_communication/broadcast/pipelined_broadcast.html @@ -0,0 +1,22 @@ +

+ +

+ Note that the chunk size may not divide the message size, in which case the last chunk will be smaller. +

+ + diff --git a/topic_communication/broadcast/pipelined_broadcast_evaluation.html b/topic_communication/broadcast/pipelined_broadcast_evaluation.html new file mode 100644 index 0000000..c8957ef --- /dev/null +++ b/topic_communication/broadcast/pipelined_broadcast_evaluation.html @@ -0,0 +1,48 @@ +

+ +

+ Answer the following questions: +

+ What is the best chunk size for each of the three platforms? +

Does this chunk size depend on the platform size?

You should observe that the wall-clock time is minimized for a chunk size that is neither the + smallest nor the largest. + Discuss why you think that is. +

For a 50-processor ring, with the best chunk size determined above, + by how much does pipelining help when compared to using a single chunk? +

How does the performance compare to that of the default MPI broadcast for that platform as seen in + the previous question? +

What do you conclude about the use of pipelined communications for the purpose + of a ring-based broadcast on a ring-shaped physical platform?

+ +

+ + diff --git a/topic_communication/broadcast/pipelining.html b/topic_communication/broadcast/pipelining.html new file mode 100644 index 0000000..0622f45 --- /dev/null +++ b/topic_communication/broadcast/pipelining.html @@ -0,0 +1,23 @@ +

In this activity we enhance the ring-based broadcast so that it + uses pipelining to better +utilize the network links. +

+ + + + +

+ + {% include_relative pipelined_broadcast.html %} + +

+ + +

+ + {% include_relative pipelined_broadcast_evaluation.html %} + +

diff --git a/topic_communication/broadcast/ring_50.xml b/topic_communication/broadcast/ring_50.xml new file mode 100644 index 0000000..28d2f01 --- /dev/null +++ b/topic_communication/broadcast/ring_50.xml @@ -0,0 +1,269 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/topic_communication/broadcast/ring_broadcast.html b/topic_communication/broadcast/ring_broadcast.html new file mode 100644 index 0000000..5435c28 --- /dev/null +++ b/topic_communication/broadcast/ring_broadcast.html @@ -0,0 +1,11 @@ +

diff --git a/topic_communication/index.md b/topic_communication/index.md new file mode 100644 index 0000000..a7c90ff --- /dev/null +++ b/topic_communication/index.md @@ -0,0 +1,38 @@ + + + +

+ + +

+ +

+ + +

+ +

\ No newline at end of file diff --git a/topic_communication/reduction/index.html b/topic_communication/reduction/index.html new file mode 100644 index 0000000..79b3522 --- /dev/null +++ b/topic_communication/reduction/index.html @@ -0,0 +1,344 @@ + + + + + + + + + + + + + Topic #2 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

A "reduce" operation is essentially the inverse of a broadcast plus some computation: +an associative/commutative operator is applied to data items located at each process, +and a final combined result is eventually available at a root process (e.g., process +of rank 0).

+ +

An interesting module would consist +in exploring efficient reduction algorithms, i.e., efficient orchestration of communications +(the time to apply the operator can be ignored for simplicity). +

+ +

Here is a possible setting: +

Processors are interconnected via a crossbar switch

At a give time step a process (one per processor) can either send or receive, but not both

There are m data items at each process, and these can be split into chunks for pipelining +

A seemingly simply, yet still interesting case, is to assume uniform chunks. +

Interesting effects may be achieved by allowing chunks of different sizes. +

+ +

+Here are three approaches that could be considered: +

+ +

+Binomial tree without chunking: +

Step 0: Each odd numbered process sends to its left neighbor

Step 1: Each even-numbered process sends to its 2nd left neighbor

...

+ +

+Pipeline tree: +

Chunk the data

Step 0: process n sends chunk 0 to process n − 1

Step 1: process n − 1 sends chunk 0 to process n − 2, and process n sends chunk 1 to process n − 1

...

+ +

+Binary reduction tree: +

Chunk the data

Step 0: processes n and n−1 send chunk 0 to process n−2 (two communications that happen in sequence), processes n−3 and n−4 send chunk 0 to process n−5, ...

Step 1: processes n and n−1 send chunk 1 to process n−2 (two communications that happen in sequence), processes n−3 and n-4 send chunk 0 to process n−5, ...

...

+ +

There are many other options to explore and compare. +The comparison could be both analytical (wall-clock time as of the number of processors, the number of messages, the chunk size, +the communication latency, and the communication bandwidth) and in simulation with an MPI implementation.

+ +

+In his research, Brad Lowery (see +these slides), +proposes another strategy he calls a Greedy Tree, which is optimal for uniform segmentation (based on previous work). +A great activity option for this module would be to implement the Greedy Tree +and to reproduce Lowery's findings.

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_communication/reduction/overview.html b/topic_communication/reduction/overview.html new file mode 100644 index 0000000..b46506e --- /dev/null +++ b/topic_communication/reduction/overview.html @@ -0,0 +1,74 @@ +

+ +

An interesting module would consist +in exploring efficient reduction algorithms, i.e., efficient orchestration of communications +(the time to apply the operator can be ignored for simplicity). +

+ +

Here is a possible setting: +

Processors are interconnected via a crossbar switch

At a give time step a process (one per processor) can either send or receive, but not both

There are m data items at each process, and these can be split into chunks for pipelining +

A seemingly simply, yet still interesting case, is to assume uniform chunks. +

Interesting effects may be achieved by allowing chunks of different sizes. +

+ +

+Here are three approaches that could be considered: +

+ +

+Binomial tree without chunking: +

Step 0: Each odd numbered process sends to its left neighbor

Step 1: Each even-numbered process sends to its 2nd left neighbor

...

+ +

+Pipeline tree: +

Chunk the data

Step 0: process n sends chunk 0 to process n − 1

Step 1: process n − 1 sends chunk 0 to process n − 2, and process n sends chunk 1 to process n − 1

...

+ +

+Binary reduction tree: +

Chunk the data

Step 0: processes n and n−1 send chunk 0 to process n−2 (two communications that happen in sequence), processes n−3 and n−4 send chunk 0 to process n−5, ...

Step 1: processes n and n−1 send chunk 1 to process n−2 (two communications that happen in sequence), processes n−3 and n-4 send chunk 0 to process n−5, ...

...

+ +

diff --git a/topic_flexible_programs/index.md b/topic_flexible_programs/index.md new file mode 100644 index 0000000..479ac49 --- /dev/null +++ b/topic_flexible_programs/index.md @@ -0,0 +1,5 @@ + + +

+ +

\ No newline at end of file diff --git a/topic_getting_started/hello_world/cluster_crossbar.xml b/topic_getting_started/hello_world/cluster_crossbar.xml new file mode 100644 index 0000000..8ba3b5f --- /dev/null +++ b/topic_getting_started/hello_world/cluster_crossbar.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/topic_getting_started/hello_world/cluster_hostfile.txt b/topic_getting_started/hello_world/cluster_hostfile.txt new file mode 100644 index 0000000..f24db7f --- /dev/null +++ b/topic_getting_started/hello_world/cluster_hostfile.txt @@ -0,0 +1,256 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu +host-64.hawaii.edu +host-65.hawaii.edu +host-66.hawaii.edu +host-67.hawaii.edu +host-68.hawaii.edu +host-69.hawaii.edu +host-70.hawaii.edu +host-71.hawaii.edu +host-72.hawaii.edu +host-73.hawaii.edu +host-74.hawaii.edu +host-75.hawaii.edu +host-76.hawaii.edu +host-77.hawaii.edu +host-78.hawaii.edu +host-79.hawaii.edu +host-80.hawaii.edu +host-81.hawaii.edu +host-82.hawaii.edu +host-83.hawaii.edu +host-84.hawaii.edu +host-85.hawaii.edu +host-86.hawaii.edu +host-87.hawaii.edu +host-88.hawaii.edu +host-89.hawaii.edu +host-90.hawaii.edu +host-91.hawaii.edu +host-92.hawaii.edu +host-93.hawaii.edu +host-94.hawaii.edu +host-95.hawaii.edu +host-96.hawaii.edu +host-97.hawaii.edu +host-98.hawaii.edu +host-99.hawaii.edu +host-100.hawaii.edu +host-101.hawaii.edu +host-102.hawaii.edu +host-103.hawaii.edu +host-104.hawaii.edu +host-105.hawaii.edu +host-106.hawaii.edu +host-107.hawaii.edu +host-108.hawaii.edu +host-109.hawaii.edu +host-110.hawaii.edu +host-111.hawaii.edu +host-112.hawaii.edu +host-113.hawaii.edu +host-114.hawaii.edu +host-115.hawaii.edu +host-116.hawaii.edu +host-117.hawaii.edu +host-118.hawaii.edu +host-119.hawaii.edu +host-120.hawaii.edu +host-121.hawaii.edu +host-122.hawaii.edu +host-123.hawaii.edu +host-124.hawaii.edu +host-125.hawaii.edu +host-126.hawaii.edu +host-127.hawaii.edu +host-128.hawaii.edu +host-129.hawaii.edu +host-130.hawaii.edu +host-131.hawaii.edu +host-132.hawaii.edu +host-133.hawaii.edu +host-134.hawaii.edu +host-135.hawaii.edu +host-136.hawaii.edu +host-137.hawaii.edu +host-138.hawaii.edu +host-139.hawaii.edu +host-140.hawaii.edu +host-141.hawaii.edu +host-142.hawaii.edu +host-143.hawaii.edu +host-144.hawaii.edu +host-145.hawaii.edu +host-146.hawaii.edu +host-147.hawaii.edu +host-148.hawaii.edu +host-149.hawaii.edu +host-150.hawaii.edu +host-151.hawaii.edu +host-152.hawaii.edu +host-153.hawaii.edu +host-154.hawaii.edu +host-155.hawaii.edu +host-156.hawaii.edu +host-157.hawaii.edu +host-158.hawaii.edu +host-159.hawaii.edu +host-160.hawaii.edu +host-161.hawaii.edu +host-162.hawaii.edu +host-163.hawaii.edu +host-164.hawaii.edu +host-165.hawaii.edu +host-166.hawaii.edu +host-167.hawaii.edu +host-168.hawaii.edu +host-169.hawaii.edu +host-170.hawaii.edu +host-171.hawaii.edu +host-172.hawaii.edu +host-173.hawaii.edu +host-174.hawaii.edu +host-175.hawaii.edu +host-176.hawaii.edu +host-177.hawaii.edu +host-178.hawaii.edu +host-179.hawaii.edu +host-180.hawaii.edu +host-181.hawaii.edu +host-182.hawaii.edu +host-183.hawaii.edu +host-184.hawaii.edu +host-185.hawaii.edu +host-186.hawaii.edu +host-187.hawaii.edu +host-188.hawaii.edu +host-189.hawaii.edu +host-190.hawaii.edu +host-191.hawaii.edu +host-192.hawaii.edu +host-193.hawaii.edu +host-194.hawaii.edu +host-195.hawaii.edu +host-196.hawaii.edu +host-197.hawaii.edu +host-198.hawaii.edu +host-199.hawaii.edu +host-200.hawaii.edu +host-201.hawaii.edu +host-202.hawaii.edu +host-203.hawaii.edu +host-204.hawaii.edu +host-205.hawaii.edu +host-206.hawaii.edu +host-207.hawaii.edu +host-208.hawaii.edu +host-209.hawaii.edu +host-210.hawaii.edu +host-211.hawaii.edu +host-212.hawaii.edu +host-213.hawaii.edu +host-214.hawaii.edu +host-215.hawaii.edu +host-216.hawaii.edu +host-217.hawaii.edu +host-218.hawaii.edu +host-219.hawaii.edu +host-220.hawaii.edu +host-221.hawaii.edu +host-222.hawaii.edu +host-223.hawaii.edu +host-224.hawaii.edu +host-225.hawaii.edu +host-226.hawaii.edu +host-227.hawaii.edu +host-228.hawaii.edu +host-229.hawaii.edu +host-230.hawaii.edu +host-231.hawaii.edu +host-232.hawaii.edu +host-233.hawaii.edu +host-234.hawaii.edu +host-235.hawaii.edu +host-236.hawaii.edu +host-237.hawaii.edu +host-238.hawaii.edu +host-239.hawaii.edu +host-240.hawaii.edu +host-241.hawaii.edu +host-242.hawaii.edu +host-243.hawaii.edu +host-244.hawaii.edu +host-245.hawaii.edu +host-246.hawaii.edu +host-247.hawaii.edu +host-248.hawaii.edu +host-249.hawaii.edu +host-250.hawaii.edu +host-251.hawaii.edu +host-252.hawaii.edu +host-253.hawaii.edu +host-254.hawaii.edu +host-255.hawaii.edu diff --git a/topic_getting_started/hello_world/hello_world.html b/topic_getting_started/hello_world/hello_world.html new file mode 100644 index 0000000..101f453 --- /dev/null +++ b/topic_getting_started/hello_world/hello_world.html @@ -0,0 +1,66 @@ +

+We are now ready to simulate the execution of an MPI program using SMPI. Let us use the following simple + MPI program, + roundtrip.c, in which the processes pass around a message and + print the elpased time: +

+ + +

+ + See the code of roundtrip.c... +

+ {% highlight C %} +{% include_relative roundtrip.c %} + {% endhighlight %} +

+ + +

+ Say we want to simulate the execution of this program on a homogeneous cluster, such as the one we saw + in the "XML Platforms" tab: cluster_crossbar.xml. + We need an "MPI host file", that is a simple text file that lists all hosts on which we wish to + start an MPI process: cluster_hostfile.txt. +

+ +

Compiling the program is straightforward:

+{% highlight text %} + % smpicc -O4 roundtrip.c -o roundtrip +{% endhighlight %} +

+ +

Running (simulating) it using 16 hosts on the cluster is done as follows:

+ +

+{% highlight text %} + % smpirun -np 16 -hostfile ./cluster_hostfile.txt -platform ./cluster_crossbar.xml ./roundtrip +{% endhighlight %} +

+ +

The -np 16 option, just like in regular MPI, specifies the number of MPI processes to use.

The -hostfile ./cluster_hostfile.txt option, just like in regular MPI, specifies the host file.

The -platform ./cluster_crossbar.xml option, which doesn't exist in regular MPI, specifies the platform configuration to be simulated.

At the end of the command, one finds the executable name and command-line arguments (in this case there are none).

+ +

+ + +

+You will see some warnings/information regarding setting some SMPI configuration parameters. Ignore them for now. One of them will say something about not setting the power of the host running the simulation. This is fine here because in this small example we wish only to simulate the network. +

+ +

+ Feel free to tweak the content of the XML platform file and the program to see the effect on the simulated execution time. Note that + the simulation accounts for realistic network protocol effects and MPI implementation effects. As a result, you may see + "unexpected behavior" like in the real world (e.g., sending a message 1 byte larger may lead to significant higher + execution time). +

+ diff --git a/topic_getting_started/hello_world/index.html b/topic_getting_started/hello_world/index.html new file mode 100644 index 0000000..f75f160 --- /dev/null +++ b/topic_getting_started/hello_world/index.html @@ -0,0 +1,368 @@ + + + + + + + + + + + + + Topic #0 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ +

+ + See the code of roundtrip.c... +

+ +

#include <stdio.h>
+#include <stdlib.h>
+#include <mpi.h>
+
+#define N (1024 * 1024 * 1)
+
+int main(int argc, char *argv[])
+{
+  int size, rank;
+  struct timeval start, end;
+  char hostname[256];
+  int hostname_len;
+
+  MPI_Init(&argc, &argv);
+
+  MPI_Comm_rank(MPI_COMM_WORLD, &rank);
+  MPI_Comm_size(MPI_COMM_WORLD, &size);
+  MPI_Get_processor_name(hostname,&hostname_len);
+
+  // Allocate a 10MiB buffer
+  char *buffer = malloc(sizeof(char) * N);
+
+
+  // Communicate along the ring
+  if (rank == 0) {
+        gettimeofday(&start,NULL);
+        printf("Rank %d (running on '%s'): sending the message rank %d\n",rank,hostname,1);
+	MPI_Send(buffer, N, MPI_BYTE, 1, 1, MPI_COMM_WORLD);
+       	MPI_Recv(buffer, N, MPI_BYTE, size-1, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE);
+        printf("Rank %d (running on '%s'): received the message from rank %d\n",rank,hostname,size-1);
+  	gettimeofday(&end,NULL);
+  	printf("%f\n",(end.tv_sec*1000000.0 + end.tv_usec -
+		 	start.tv_sec*1000000.0 - start.tv_usec) / 1000000.0);
+
+  } else {
+       	MPI_Recv(buffer, N, MPI_BYTE, rank-1, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE);
+        printf("Rank %d (running on '%s'): receive the message and sending it to rank %d\n",rank,hostname,(rank+1)%size);
+	MPI_Send(buffer, N, MPI_BYTE, (rank+1)%size, 1, MPI_COMM_WORLD);
+  }
+
+  MPI_Finalize();
+  return 0;
+}
+
+

+ +

Compiling the program is straightforward:

+ +

  % smpicc -O4 roundtrip.c -o roundtrip

+ +

Running (simulating) it using 16 hosts on the cluster is done as follows:

+ +

  % smpirun -np 16 -hostfile ./cluster_hostfile.txt -platform ./cluster_crossbar.xml ./roundtrip

+ +

The -np 16 option, just like in regular MPI, specifies the number of MPI processes to use.

The -hostfile ./cluster_hostfile.txt option, just like in regular MPI, specifies the host file.

The -platform ./cluster_crossbar.xml option, which doesn't exist in regular MPI, specifies the platform configuration to be simulated.

At the end of the command, one finds the executable name and command-line arguments (in this case there are none).

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_getting_started/hello_world/roundtrip.c b/topic_getting_started/hello_world/roundtrip.c new file mode 100644 index 0000000..2aefec5 --- /dev/null +++ b/topic_getting_started/hello_world/roundtrip.c @@ -0,0 +1,43 @@ +#include +#include +#include + +#define N (1024 * 1024 * 1) + +int main(int argc, char *argv[]) +{ + int size, rank; + struct timeval start, end; + char hostname[256]; + int hostname_len; + + MPI_Init(&argc, &argv); + + MPI_Comm_rank(MPI_COMM_WORLD, &rank); + MPI_Comm_size(MPI_COMM_WORLD, &size); + MPI_Get_processor_name(hostname,&hostname_len); + + // Allocate a 10MiB buffer + char *buffer = malloc(sizeof(char) * N); + + + // Communicate along the ring + if (rank == 0) { + gettimeofday(&start,NULL); + printf("Rank %d (running on '%s'): sending the message rank %d\n",rank,hostname,1); + MPI_Send(buffer, N, MPI_BYTE, 1, 1, MPI_COMM_WORLD); + MPI_Recv(buffer, N, MPI_BYTE, size-1, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE); + printf("Rank %d (running on '%s'): received the message from rank %d\n",rank,hostname,size-1); + gettimeofday(&end,NULL); + printf("%f\n",(end.tv_sec*1000000.0 + end.tv_usec - + start.tv_sec*1000000.0 - start.tv_usec) / 1000000.0); + + } else { + MPI_Recv(buffer, N, MPI_BYTE, rank-1, 1, MPI_COMM_WORLD, MPI_STATUS_IGNORE); + printf("Rank %d (running on '%s'): receive the message and sending it to rank %d\n",rank,hostname,(rank+1)%size); + MPI_Send(buffer, N, MPI_BYTE, (rank+1)%size, 1, MPI_COMM_WORLD); + } + + MPI_Finalize(); + return 0; +} diff --git a/topic_getting_started/index.md b/topic_getting_started/index.md new file mode 100644 index 0000000..7b3a51f --- /dev/null +++ b/topic_getting_started/index.md @@ -0,0 +1,43 @@ + + + +

+ + +

+ +

+ + +

+ +

+ + + +

+ +

+ + +

+ +

+ diff --git a/topic_getting_started/installing_simgrid/index.html b/topic_getting_started/installing_simgrid/index.html new file mode 100644 index 0000000..8804090 --- /dev/null +++ b/topic_getting_started/installing_simgrid/index.html @@ -0,0 +1,365 @@ + + + + + + + + + + + + + Topic #0 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + +

+ + This CourseWare was tested with SimGrid + version 3.27 (small changes may be needed with later versions). + +

+ +

Two options

+ +

You need to have access to the smpicc (compiler for MPI +code in C), smpicxx (compiler for MPI code in C++), and +smpirun (tool to execute compiled MPI code) SimGrid +executables to go through the CourseWare. To get access to these +executables you have two options:

Easiest Option: Run SimGrid from a Docker container; or

Not-as-Easy Option: Install SimGrid yourself on a Linux machine/VM/Container.

+ +

Easiest Option: Using a Docker container

+ +

Provided you have Docker installed on +your system, you can use the henricasanova/ics632_smpi +container.

+ +

You can of course run this container and connect to it via a shell, like +with any other Docker container, and do all your work within the container.

+ +

Alternately, you can run the smpicc +and smpirun commands in the container but from your host. That is, on your host (in your shell/command-prompt), +instead of typing smpicc or smpirun (which would require SimGrid to be +installed on your host), instead you type the commands below.

+ +

On Linux or MacOS

+ +

smpicc is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpicc

smpicxx is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpicxx

smpirun is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpirun

+ +

On MacOS: If you get exit code 137 for any of these commands, you may want to increase the memory allocated to Docker (e.g., through the Docker Dashboard preferences)

+ +

On Windows

+ +

smpicc is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpicc

smpicxx is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpicxx

smpirun is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpirun

+ +

Not-as-Easy Option: Installing SimGrid by hand

+ +

+ On a recent Debian/Ubuntu (virtual) machine, you can retrieve SimGrid directly from the + package manager: + +

sudo apt update && apt upgrade -y

sudo apt install simgrid

+ + Do not forget to check that you have installed a sufficiently recent version, e.g., by doing apt-cache show libsimgrid-dev. + If the version you obtain is too old (see the top of this page), we recommend you manually install SimGrid following the instructions bellow. +

+ +

+ For instructions regarding installation, please refer to the The SimGrid page. But just in case, here is + a typical way to install SimGrid manually on a Linux system: +

+ +

Install the dependencies: sudo apt install -y g++ libboost-all-dev cmake

Download the .tar.gz of the latest stable version of SimGrid

Extract the archive: tar -xvf simgrid-x.y.tar.gz

Go to the extracted directory: cd simgrid-x.y

Generate all makefiles: cmake -DCMAKE_INSTALL_PREFIX=/usr/local -Denable_smpi=on -Denable_documentation=off
(Assuming you want to install in /usr/local/)

Build (using 4 cores for compilation): make -j4

Run the tests (for the paranoid): make check

Install libraries and executables: sudo make install

+ +

+ Assuming your path includes /usr/local/bin (which it should), you now can invoke two new + commands: smpicc and smpirun. +

+ +

+If you are not a superuser on your system (i.e., sudo access is denied), but the dependencies are installed, then you can install SimGrid in your home directory, say in a directory + called local. Do do so, modify the cmake invocation above using + -DCMAKE_INSTALL_PREFIX=$HOME/local. You can then do make install + instead of sudo make install, and binaries will be available as + ~/local/bin/smpicc and ~/local/bin/smpirun. +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_getting_started/installing_simgrid/installing_simgrid.html b/topic_getting_started/installing_simgrid/installing_simgrid.html new file mode 100644 index 0000000..8243b06 --- /dev/null +++ b/topic_getting_started/installing_simgrid/installing_simgrid.html @@ -0,0 +1,105 @@ + +

+ + This CourseWare was tested with SimGrid + version 3.27 (small changes may be needed with later versions). + +

+ +--- + + +

Two options

+ +You need to have access to the smpicc (compiler for MPI +code in C), smpicxx (compiler for MPI code in C++), and +smpirun (tool to execute compiled MPI code) SimGrid +executables to go through the CourseWare. To get access to these +executables you have two options: +

Easiest Option: Run SimGrid from a Docker container; or

Not-as-Easy Option: Install SimGrid yourself on a Linux machine/VM/Container.

+ +--- + +

Easiest Option: Using a Docker container

+ +Provided you have Docker installed on +your system, you can use the henricasanova/ics632_smpi +container. + +You can of course run this container and connect to it via a shell, like +with any other Docker container, and do all your work within the container. + +Alternately, you can run the smpicc +and smpirun commands in the container but from your host. That is, on your host (in your shell/command-prompt), +instead of typing smpicc or smpirun (which would require SimGrid to be +installed on your host), instead you type the commands below. + +

On Linux or MacOS

+ +

smpicc is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpicc

smpicxx is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpicxx

smpirun is executed by running:
docker run --rm -it -v $(pwd):/home/smpi --user $(id -u):$(id -g) henricasanova/ics632_smpi smpirun

+ +On MacOS: If you get exit code 137 for any of these commands, you may want to increase the memory allocated to Docker (e.g., through the Docker Dashboard preferences) + +

On Windows

+ +

smpicc is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpicc

smpicxx is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpicxx

smpirun is executed by running:
docker run --rm -it -v "%cd%:/home/smpi" henricasanova/ics632_smpi smpirun

+ + +--- + +

Not-as-Easy Option: Installing SimGrid by hand

+ +

+ On a recent Debian/Ubuntu (virtual) machine, you can retrieve SimGrid directly from the + package manager: + +

sudo apt update && apt upgrade -y

sudo apt install simgrid

+ +

+ For instructions regarding installation, please refer to the The SimGrid page. But just in case, here is + a typical way to install SimGrid manually on a Linux system: +

+ +

Install the dependencies: sudo apt install -y g++ libboost-all-dev cmake

Download the .tar.gz of the latest stable version of SimGrid

Extract the archive: tar -xvf simgrid-x.y.tar.gz

Go to the extracted directory: cd simgrid-x.y

Generate all makefiles: cmake -DCMAKE_INSTALL_PREFIX=/usr/local -Denable_smpi=on -Denable_documentation=off
(Assuming you want to install in /usr/local/)

Build (using 4 cores for compilation): make -j4

Run the tests (for the paranoid): make check

Install libraries and executables: sudo make install

+ +

+ Assuming your path includes /usr/local/bin (which it should), you now can invoke two new + commands: smpicc and smpirun. +

+ +

diff --git a/topic_getting_started/limitations/index.html b/topic_getting_started/limitations/index.html new file mode 100644 index 0000000..9444a87 --- /dev/null +++ b/topic_getting_started/limitations/index.html @@ -0,0 +1,320 @@ + + + + + + + + + + + + + Topic #0 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ +

+ SMPI is robust, but it still has some limitations, as listed (and further explained) below: +

+ +

+ SMPI runs your MPI processes as threads within a single process. So when you declare a global variable in your + program + (which is rarely a good idea anyway), all the threads will share it, as threads do. That's likely not what you + want + in terms of your MPI processes. Use local variables instead. +

+ +

+ Because SMPI already uses multithreading to simulate your MPI program's execution, if your MPI program uses + threads + as well, mayhem can occur. In practice, i.e., with real MPI, you typically want to use threads to exploit + multi-core + machines. In these pedagogic modules, simply pretend that each host is single-core and that you don't need to use + threads. + This has no impact on your learning MPI, and if/when you transition to real (as opposed to simulated) MPI + executions, you + can then simply multi-thread computational sections of your code. +

+ +

+ Yes, this is vague. smpicc compiles your code, and is fairly robust. But if you go crazy with + tons of macros and C oddness, smpicc may get confused. It should happen only in rather extreme + cases, but you are now warned. +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_getting_started/limitations/limitations.html b/topic_getting_started/limitations/limitations.html new file mode 100644 index 0000000..4c1fcb8 --- /dev/null +++ b/topic_getting_started/limitations/limitations.html @@ -0,0 +1,59 @@ +

+ SMPI is robust, but it still has some limitations, as listed (and further explained) below: +

+ + +

+ +

diff --git a/topic_getting_started/platforms/2_clusters.jpg b/topic_getting_started/platforms/2_clusters.jpg new file mode 100644 index 0000000..19b4cef Binary files /dev/null and b/topic_getting_started/platforms/2_clusters.jpg differ diff --git a/topic_getting_started/platforms/2_clusters.xml b/topic_getting_started/platforms/2_clusters.xml new file mode 100644 index 0000000..aad6359 --- /dev/null +++ b/topic_getting_started/platforms/2_clusters.xml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/topic_getting_started/platforms/3_hosts.jpg b/topic_getting_started/platforms/3_hosts.jpg new file mode 100644 index 0000000..af3901e Binary files /dev/null and b/topic_getting_started/platforms/3_hosts.jpg differ diff --git a/topic_getting_started/platforms/3_hosts.xml b/topic_getting_started/platforms/3_hosts.xml new file mode 100644 index 0000000..6fe28ee --- /dev/null +++ b/topic_getting_started/platforms/3_hosts.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/topic_getting_started/platforms/cluster_backbone.jpg b/topic_getting_started/platforms/cluster_backbone.jpg new file mode 100644 index 0000000..f867139 Binary files /dev/null and b/topic_getting_started/platforms/cluster_backbone.jpg differ diff --git a/topic_getting_started/platforms/cluster_backbone.xml b/topic_getting_started/platforms/cluster_backbone.xml new file mode 100644 index 0000000..1a6a47f --- /dev/null +++ b/topic_getting_started/platforms/cluster_backbone.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/topic_getting_started/platforms/cluster_crossbar.jpg b/topic_getting_started/platforms/cluster_crossbar.jpg new file mode 100644 index 0000000..81bb789 Binary files /dev/null and b/topic_getting_started/platforms/cluster_crossbar.jpg differ diff --git a/topic_getting_started/platforms/cluster_crossbar.xml b/topic_getting_started/platforms/cluster_crossbar.xml new file mode 100644 index 0000000..8ba3b5f --- /dev/null +++ b/topic_getting_started/platforms/cluster_crossbar.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/topic_getting_started/platforms/index.html b/topic_getting_started/platforms/index.html new file mode 100644 index 0000000..4e38e3f --- /dev/null +++ b/topic_getting_started/platforms/index.html @@ -0,0 +1,460 @@ + + + + + + + + + + + + + Topic #0 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ +

+SMPI simulates the execution of MPI applications by relying on the fast and accurate simulation +core provided by SimGrid. The SMPI + user (you!) must describe simulated platforms (i.e., sets of simulated hosts and network links, with + some performance characteristics). The SimGrid documentation provides ample information + on platform descriptions, which are written in XML. Below we simply show a series of examples, + which should be sufficient for our purpose. Note that platform files are typically provided + in each pedagogic module, but you may have to modify them. +

+ +

+ A simple 3-host example: At the most basic level, you can describe your simulated platform + as a graph of hosts and network links. For instance: +

+ +

+ + See the XML platform description file... +

+ +

<?xml version='1.0'?>
+<!DOCTYPE platform SYSTEM "http://simgrid.gforge.inria.fr/simgrid/simgrid.dtd">
+<platform version="4.1">
+   <zone id="AS0" routing="Full">
+     <host id="host0" speed="1Gf"/>
+     <host id="host1" speed="2Gf"/>
+     <host id="host2" speed="40Gf"/>
+     <link id="link0" bandwidth="125MBps" latency="100us"/>
+     <link id="link1" bandwidth="50MBps" latency="150us"/>
+     <link id="link2" bandwidth="250MBps" latency="50us"/>
+     <route src="host0" dst="host1"><link_ctn id="link0"/><link_ctn id="link1"/></route>
+     <route src="host1" dst="host2"><link_ctn id="link1"/><link_ctn id="link2"/></route>
+    <route src="host0" dst="host2"><link_ctn id="link0"/><link_ctn id="link2"/></route>
+  </zone>
+</platform>
+
+

+ +

+ In the above XML, note the way in which hosts, links, and routes are defined. Note that all hosts are defined + with a power (i.e., compute speed in Gflops), and links with a latency (in us) + and bandwidth (in Mbit/sec). Other units are possible and written as expected. + By default, routes are symmetrical. See more information on the + SimGrid Web site. +

+ +

+ This XML file is intended for SimGrid v3.21 or earlier. To + use it with more recent versions, you may have to convert it using the + simgrid_update_xml program, as follows: +

simgrid_update_xml 3_hosts.xml

+ +

+ A homogeneous cluster with a crossbar switch: A very common parallel computing platform is a homogeneous + cluster in which hosts are interconnected via a crossbar switch with as many ports as hosts, so that any disjoint + pairs of hosts can communicate concurrently at full speed. For instance: +

+ +

+ + See the XML platform description file... +

+ +

<?xml version='1.0'?>
+<!DOCTYPE platform SYSTEM "http://simgrid.gforge.inria.fr/simgrid/simgrid.dtd">
+<platform version="4.1">
+    <zone id="AS0" routing="Full">
+        <cluster id="my_cluster" prefix="host-" suffix=".hawaii.edu" radical="0-255" speed="1Gf" bw="125Mbps" lat="5us"/>
+    </zone>
+</platform>
+
+

+ +

+ In the above XML, note that one simply specifies a name prefix and suffix for each host, and then give an integer + range (in the example the cluster contains 256 hosts). All hosts have the same power (1 Gflop/sec) and are connected to the switch via links with same latency (5 microseconds) and + bandwidth (125 Mbit/sec). See more information on the + SimGrid Web site. + +

+ +

+ A homogeneous cluster with a shared backbone: Another popular model for a parallel platform is that of a set of homogeneous + hosts connected to a shared communication medium, a backbone, with some finite bandwidth capacity and on which communicating host pairs can + experience contention. For instance: +

+ +

+ + See the XML platform description file... +

+ +

<?xml version='1.0'?>
+<!DOCTYPE platform SYSTEM "http://simgrid.gforge.inria.fr/simgrid/simgrid.dtd">
+<platform version="4.1">
+  <zone id="AS0" routing="Full">
+    <cluster id="my_cluster" prefix="host−" suffix=".hawaii.edu" radical="0−255" speed="1Gf" bw="125Mbps" lat="50us" bb_bw="2.25Gbps" bb_lat="500us"/>
+  </zone>
+</platform>
+
+

+ +

+ In the above XML, note that one specifies the latency and bandwidth of the link that connects a host to the backbone (in this + example 50 microsec and 125 Mbit/sec), as well + as the latency and bandwidth of the backbone itself (in this example + 500 microsec and 2.25 Gbit/sec). See more information on the + SimGrid Web site. + +

+ +

+ Two interconnected clusters: One can connect clusters together and in fact build simulated platforms + hierarchically in arbitrary fashions. For instance: +

+ +

+ + See the XML platform description file... +

+ +

    <?xml version='1.0'?>
+<!DOCTYPE platform SYSTEM "http://simgrid.gforge.inria.fr/simgrid/simgrid.dtd">
+<platform version="4.1">
+  <zone id="AS0" routing="Full">
+    <cluster id="my_cluster_1" prefix="C1−" suffix=".hawaii.edu" radical="0−15" speed="1Gf" bw="125Mbps" lat="50us" bb_bw="2.25Gbps" bb_lat="500us" />
+    <cluster id="my_cluster_2" prefix="C2−" suffix=".hawaii.edu" radical="0−31" speed="2Gf" bw="125Mbps" lat="50us" />
+    <link id="internet_backbone" bandwidth="0.01Gbps" latency="22500us" />
+    <zoneRoute src="my_cluster_1" dst="my_cluster_2" gw_src="C1−my_cluster_1_router.hawaii.edu" gw_dst="C2−my_cluster_2_router.hawaii.edu" symmetrical="YES">
+      <link_ctn id="internet_backbone" />
+    </zoneRoute>
+  </zone>
+</platform>
+
+

+ +

+ The above XML is a bit more involved. See all details and documentation on the + SimGrid Web site. + +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_getting_started/platforms/platform_xml.html b/topic_getting_started/platforms/platform_xml.html new file mode 100644 index 0000000..8fb1760 --- /dev/null +++ b/topic_getting_started/platforms/platform_xml.html @@ -0,0 +1,162 @@ +

+ +

+ A simple 3-host example: At the most basic level, you can describe your simulated platform + as a graph of hosts and network links. For instance: +

+ +

+ + +

+ + See the XML platform description file... +

+ {% highlight XML %} +{% include_relative 3_hosts.xml %} + {% endhighlight %} +

+ +

+ This XML file is intended for SimGrid v3.21 or earlier. To + use it with more recent versions, you may have to convert it using the + simgrid_update_xml program, as follows: +

simgrid_update_xml 3_hosts.xml

+ + +

+ +

+ + +

+ + See the XML platform description file... +

+ {% highlight XML %} +{% include_relative cluster_crossbar.xml %} + {% endhighlight %} +

+ +

+ + +

+ +

+ + +

+ + See the XML platform description file... +

+ {% highlight XML %} +{% include_relative cluster_backbone.xml %} + {% endhighlight %} +

+ +

+ + +

+ Two interconnected clusters: One can connect clusters together and in fact build simulated platforms + hierarchically in arbitrary fashions. For instance: +

+ +

+ + +

+ + See the XML platform description file... +

+ {% highlight XML %} + {% include_relative 2_clusters.xml %} + {% endhighlight %} +

+ +

+ The above XML is a bit more involved. See all details and documentation on the + SimGrid Web site. + +

+ +

+ diff --git a/topic_rigid_programs/index.md b/topic_rigid_programs/index.md new file mode 100644 index 0000000..e365989 --- /dev/null +++ b/topic_rigid_programs/index.md @@ -0,0 +1,37 @@ + + + +

+ + +

+ +

+ + + +

+ +

+ + + diff --git a/topic_rigid_programs/lufactorization/cluster_crossbar_64.xml b/topic_rigid_programs/lufactorization/cluster_crossbar_64.xml new file mode 100644 index 0000000..85acc73 --- /dev/null +++ b/topic_rigid_programs/lufactorization/cluster_crossbar_64.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + diff --git a/topic_rigid_programs/lufactorization/conclusion.html b/topic_rigid_programs/lufactorization/conclusion.html new file mode 100644 index 0000000..cbe2314 --- /dev/null +++ b/topic_rigid_programs/lufactorization/conclusion.html @@ -0,0 +1,36 @@ +

+ + + +

+ Congratulations for making it this far. You have learned to implement + a moderately complex algorithm using a 1-D data distribution . This algorithm and its implementation + are very typical of parallel numerical linear algebra implementations, but it's a bit simplistic. In fact, + many optimization techniques are known to make the parallelization of LU factorization more efficient, in particular to + hide the communication latencies. Hiding these latencies one of the themes of Topic #4. +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_rigid_programs/lufactorization/hostfile_64.txt b/topic_rigid_programs/lufactorization/hostfile_64.txt new file mode 100644 index 0000000..b260ec1 --- /dev/null +++ b/topic_rigid_programs/lufactorization/hostfile_64.txt @@ -0,0 +1,64 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu \ No newline at end of file diff --git a/topic_rigid_programs/lufactorization/index.html b/topic_rigid_programs/lufactorization/index.html new file mode 100644 index 0000000..1ad3556 --- /dev/null +++ b/topic_rigid_programs/lufactorization/index.html @@ -0,0 +1,424 @@ + + + + + + + + + + + + + Topic #3 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To implement a Gaussian elimination algorithm (without pivoting) to perform a LU factorization + of a square matrix in a distributed + memory manner using message passing. +

+ +

+ + +

+ + + +

+ For this algorithm we use a simple 1-D block data distribution. + We consider a NxN matrix, A. This matrix + contains single precision elements (float). + The execution takes place on p processes, where p + divides N. Each process thus holds a + N × N/p block column of the matrix. In other words, + the process with rank 0 holds columns 0 to N/p − 1, the process with + rank 1 holds columns N/p to 2N/p − 1, etc. +

+ + +

+ +

This module consists of 1 activity: +

Activity #1: Have each MPI process allocate and initialize its own + block column of matrix A, and have the processes perform the LU factorization. +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

+ +

+ Implement a program called lu (lu.c), that implements the + Gaussian elimination (without pivoting) algorithm. You may have covered this algorithm in a course, + and it is of course well-document in various texts. Regardless, a sequential implementation, + sequential_lu.c, is provided. So you can use it as a starting point + in a "let's parallelize an existing sequential implementation" scenario. The overall algorithm for iteration + k is: +

If I hold column k (global) of the matrix, + update the column and broadcast it to all other processes.

For all the columns I hold that are after column k, update their lower portion.

+ + + +

+ To make it easy to test your implementation, we compute the LU factorization of a particular + matrix defined as follows: + +

+ +

+(note that the indices start at 0). +

+ +

+ The matrix, once the Gaussian Elimination is complete, will have all 1’s in its lower triangular portion, + and i² values on its diagonal and in its upper triangular portion. + Run lu_sequential.c with a small value of N to see this structure. Your code should check + that these are the values computed by your implementation (each process can do its own check, and the number of + errors can be "MPI_Reduced" as the process of rank 0 to print and overall "success" or "failure" message). +

+ +

+ You can use any XML platform file and accompanying hostfile to run your MPI program, + since this module is solely about correctness and not performance. For instance, + you can use + cluster_crossbar_64.xml as a platform file + and hostfile_64.txt as a hostfile. +

+ +

For debugging purposes, remember that it's a good idea to insert calls to MPI_Barrier + so that debugging output from the program can be structured step-by-step. +

+ +

Hints: +

Use the standard MPI_Bcast() function to perform the broadcasts

It's a very good idea to implement local2global() and global2local() + functions that do the translations between local and global indices.

Recall that sending a column is not very convenient because matrices are traditionally stored + in row-major fashion in C, thus requiring either the use of an additional buffer or of an MPI data type. Or you + store your matrix in column-major fashion and do the necessary mental gymnastic to parallelize the row-major + sequential program...

+ +

+ + + +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_rigid_programs/lufactorization/introduction.html b/topic_rigid_programs/lufactorization/introduction.html new file mode 100644 index 0000000..92ad003 --- /dev/null +++ b/topic_rigid_programs/lufactorization/introduction.html @@ -0,0 +1,54 @@ +

+ + + +

+ Objective: To implement a Gaussian elimination algorithm (without pivoting) to perform a LU factorization + of a square matrix in a distributed + memory manner using message passing. +

+ +

+ + +

+ + + +

+ + +

+ +

This module consists of 1 activity: +

Activity #1: Have each MPI process allocate and initialize its own + block column of matrix A, and have the processes perform the LU factorization. +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

\ No newline at end of file diff --git a/topic_rigid_programs/lufactorization/lu_factorization_algorithm.html b/topic_rigid_programs/lufactorization/lu_factorization_algorithm.html new file mode 100644 index 0000000..6012336 --- /dev/null +++ b/topic_rigid_programs/lufactorization/lu_factorization_algorithm.html @@ -0,0 +1,57 @@ +

If I hold column k (global) of the matrix, + update the column and broadcast it to all other processes.

For all the columns I hold that are after column k, update their lower portion.

+ + + +

+ To make it easy to test your implementation, we compute the LU factorization of a particular + matrix defined as follows: + +

+ +

+(note that the indices start at 0). +

+ +

For debugging purposes, remember that it's a good idea to insert calls to MPI_Barrier + so that debugging output from the program can be structured step-by-step. +

+ +

Hints: +

Use the standard MPI_Bcast() function to perform the broadcasts

It's a very good idea to implement local2global() and global2local() + functions that do the translations between local and global indices.

diff --git a/topic_rigid_programs/lufactorization/lu_matrix.jpg b/topic_rigid_programs/lufactorization/lu_matrix.jpg new file mode 100644 index 0000000..1ee1170 Binary files /dev/null and b/topic_rigid_programs/lufactorization/lu_matrix.jpg differ diff --git a/topic_rigid_programs/lufactorization/sequential_lu.c b/topic_rigid_programs/lufactorization/sequential_lu.c new file mode 100644 index 0000000..aec842d --- /dev/null +++ b/topic_rigid_programs/lufactorization/sequential_lu.c @@ -0,0 +1,96 @@ +#include +#include + +// Matrix printing routine +void print_matrix(double *A,int n) { + int i,j; + + for (i=0; i < n; i++) { + printf(" "); + for (j=0; j < n; j++) { + printf("%2.0lf ",A[i*n+j]); + } + printf("\n"); + } + printf("-------------------------------\n"); + return; +} + +// Main routine +int main(int argc, char **argv) { + int N; + int i,j,k; + + // Parse command-line arguments + if (argc != 2) { + fprintf(stderr,"Usage: %s \n",argv[0]); + exit(1); + } + + if (sscanf(argv[1],"%d",&N) != 1) { + fprintf(stderr,"Invalid argument\n"); + exit(1); + } + + // Allocate matrix + double *A = (double *)malloc(N*N*sizeof(double)); + + // Fill-in matrix elements with particular + // values so that the Gaussian elimination can + // be easily computed analytically + for (i=0; i < N; i++) { + for (j=0; j < N; j++) { + A[i*N+j] = 0.0; + int min_i_j = (i < j ? i : j); + for (k=0; k < min_i_j+1; k++) { + A[i*N+j] += (double)(k+1)*(k+1); + } + } + } + + // Print the matrix + if (N < 10) { + printf("Initial Matrix:\n"); + print_matrix(A,N); + } + + // Do the Gaussian elimination + for (k=0; k j) && (A[i*N+j] != 1.0)) { + fprintf(stderr,"** MISMATCH ** A(%d,%d) = %.2lf but should be %.2lf\n", i,j, A[i*N+j],1.0); + } + if ((i <= j) && (A[i*N+j] != (double)(i+1)*(i+1))) { + fprintf(stderr,"** MISMATCH ** A(%d,%d) = %.2lf but should be %.2lf\n",i,j, A[i*N+j],(double)(i+1)*(i+1)); + } + } + } + + + + return 0; +} + diff --git a/topic_rigid_programs/matrixmultiplication/2d_matrices.html b/topic_rigid_programs/matrixmultiplication/2d_matrices.html new file mode 100644 index 0000000..ee06077 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/2d_matrices.html @@ -0,0 +1,16 @@ +

In this activity we distribute the matrices across the MPI processes, which + entails dealing with local vs. global indexing. Recall that we consider 3 NxN matrices (A, B, and C). This + activity consists of a single step, as described below. +

+ + + + +

+ + {% include_relative data_distribution.html %} + +

+ diff --git a/topic_rigid_programs/matrixmultiplication/cluster_crossbar_64.xml b/topic_rigid_programs/matrixmultiplication/cluster_crossbar_64.xml new file mode 100644 index 0000000..85acc73 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/cluster_crossbar_64.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + diff --git a/topic_rigid_programs/matrixmultiplication/conclusion.html b/topic_rigid_programs/matrixmultiplication/conclusion.html new file mode 100644 index 0000000..966f849 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/conclusion.html @@ -0,0 +1,38 @@ +

+ + + +

+ Congratulations for making it this far. You have learned to implement + a moderately complex algorithm using 2-D data distribution and communication + patterns that involve subset of the processes. This algorithm and its implementation + are very typical of parallel numerical linear algebra implementations, and is + among the simplest. Topic #4 contains a module in which we use your implementation + as a starting point and explore performance issues, with the goal of reducing + the performance penalty of communications. +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_rigid_programs/matrixmultiplication/data_distribution.html b/topic_rigid_programs/matrixmultiplication/data_distribution.html new file mode 100644 index 0000000..e25c371 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/data_distribution.html @@ -0,0 +1,92 @@ +

+ Implement an MPI program called matmul_init (matmul_init.c) that takes a + single command-line argument, N, which is a strictly positive integer. N is the + dimension of the square matrices that we multiply. Your program should check that the number of processes + is a perfect square, and that its square root divides N (printing an error message and exiting if this is + not the case). +

+ +

+ The objective of the program is for each process to allocate and initialize its block of each matrix. + We multiply particular matrices, defined by: +

+ A_i,j = i and B_i,j = i + j. +

+ + + +

+ The above is with global indices, which go from 0 to N-1. +

+ + +

+Given the above definitions of A and B, there is a simple analytical solution + for C. There is thus a closed-form expression for the sum of the + elements of C: N³ (N - 1)² / 2. + You will use this formula to check the validity of your matrix + multiplication implementation in Activity #2. +

+ +

+ Have each process allocate its blocks of A, B, and C, initialize its blocks + of A and B to the appropriate values, and then print out the content of + these blocks. Each process should print its MPI rank (the "linear rank") + as well as its + 2-D rank, which is easy to determine based on the linear rank. +

+ +

+ For instance, here is an excerpt from the output (that generated by the process of rank 2) + for p=4 and N=8, using + cluster_crossbar_64.xml as a platform file + and hostfile_64.txt as a hostfile (since this module is + about correctness, you can use pretty much any such valid files). +

+ +

+ {% highlight text %} +% smpirun -np 4 \ + -platform cluster_crossbar_64.xml \ + -hostfile hostfile_64.txt \ + ./matmul_init 8 +[...] +Process rank 2 (coordinates: 1,0), block of A: +4.0 4.0 4.0 4.0 +5.0 5.0 5.0 5.0 +6.0 6.0 6.0 6.0 +7.0 7.0 7.0 7.0 +Process rank 2 (coordinates: 1,0), block of B: +4.0 5.0 6.0 7.0 +5.0 6.0 7.0 8.0 +6.0 7.0 8.0 9.0 +7.0 8.0 9.0 10.0 +[...] +{% endhighlight %} +

+ + + +

+ Note that due to the convenience of simulation, + the output from one process will never be interleaved with the output of + another process. If you run this code "for real" with MPI, instead of SMPI, + output will be interleaved and additional synchronization will be needed + to make the output look nice. + The order in which the processes output their blocks is inconsequential. + You may want to use a barrier synchronization + to first see all blocks of A and then all blocks of B though. + +

+ +

+ Obviously, we won’t run this program for large N. + The goal is simply to make sure that matrix blocks are initialized + correctly on all processes. + +

+ + + + diff --git a/topic_rigid_programs/matrixmultiplication/hostfile_64.txt b/topic_rigid_programs/matrixmultiplication/hostfile_64.txt new file mode 100644 index 0000000..b260ec1 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/hostfile_64.txt @@ -0,0 +1,64 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu \ No newline at end of file diff --git a/topic_rigid_programs/matrixmultiplication/index.html b/topic_rigid_programs/matrixmultiplication/index.html new file mode 100644 index 0000000..a4352cd --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/index.html @@ -0,0 +1,674 @@ + + + + + + + + + + + + + Topic #3 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To implement the "outer product" matrix multiplication algorithm in a distributed + memory manner using message passing. +

+ +

+ + +

+ + + +

+ For this module, we use a 2-D block data distribution. + More precisely, we consider the C = A×B multiplication + where all three matrices are square of dimensions N×N. All matrices + contain double precision elements (double). + The execution takes place on p processors, where p is a perfect square and √p + divides N. Each processor thus holds a + N/√p × N/√p square block of each matrix.

+ +

+ For instance, with N=6, consider the example matrix A as shown below: +

+ +

+        10 20 30 40 50 60
+        11 21 31 41 51 61
+        12 22 32 42 52 62
+        13 23 33 43 53 63
+        14 24 34 44 54 64
+        15 25 35 45 55 65
+

+ +

+ Now let's assume that p=4. The 4 processes are logically organized in a 2x2 grid (hence the name of the data + distribution) in row-major order as follows: +

+ +

+ + + + + + + + + + + + +
process #0 process #1
process #2 process #3
+ +

+ +

+ In this setup, for instance, process #0 holds the following 3x3 block of matrix A: +

+ +

+        10 20 30
+        11 21 31
+        12 22 32
+

+ +

+ and process #3 holds the following 3x3 block of matrix A: +

+ +

+        43 53 63
+        44 54 64
+        45 55 65
+

+ +

At process #3, element with value 54 has local indices (1,1), but its global indices are (4,4), assuming that + indices start at 0. +

+ + + +

+ + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Have each MPI process allocate and initialize its own + block of particular matrices, using the 2-D distribution scheme. +
Activity #2: Implement the outer product matrix multiplication algorithm. +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

+ +

+ + + + +

+ +

+ The objective of the program is for each process to allocate and initialize its block of each matrix. + We multiply particular matrices, defined by: +

+ A_i,j = i and B_i,j = i + j. +

+ + + +

+ The above is with global indices, which go from 0 to N-1. +

+ + +

+ +

% smpirun -np 4 \
+          -platform cluster_crossbar_64.xml \
+          -hostfile hostfile_64.txt \
+          ./matmul_init 8
+[...]
+Process rank 2 (coordinates: 1,0), block of A:
+4.0 4.0 4.0 4.0
+5.0 5.0 5.0 5.0
+6.0 6.0 6.0 6.0
+7.0 7.0 7.0 7.0
+Process rank 2 (coordinates: 1,0), block of B:
+4.0 5.0 6.0 7.0
+5.0 6.0 7.0 8.0
+6.0 7.0 8.0 9.0
+7.0 8.0 9.0 10.0
+[...]

+ +

+ + + +

+ +

+ Obviously, we won’t run this program for large N. + The goal is simply to make sure that matrix blocks are initialized + correctly on all processes. + +

+ + + + + + +

+ + +

+ +

In this activity we implement the matrix multiplication algorithm. + Recall that we consider 3 NxN matrices (A, B, and C), and that we compute C = AxB. This + activity consists in a single step, as described below. +

+ + + + +

+ +

+ Implement a program called matmul (matmul.c), which builds on your matmul_init + program from the previous activity and implements the outer-product matrix multiplication algorithm. +

+ +

+The principle of the outer-product algorithm, as might be expected, is that a matrix multiplication + can be performed as a sequence of outer-products. You may have covered this algorithm in a course, + and it is of course well-document in various texts. You may expand below to get a brief description + of the algorithm, which should be sufficient for you do do this step even if you've never seen + the outer-product algorithm before. +

+ + +

+ + How does the outer-product algorithm work? +

+ +

+ Consider the execution with p² processes, where each process is identified + by 2-D coordinates between 0 and p-1. For the duration of the algorithm, + process p_i,j holds a block of matrix A, a block of matrix B, and a block of + matrix C, which it computes. The algorithm proceeds in p steps, and at each step each process + updates its block of matrix C. +

+ +

+ Let us refer to the block of matrices A, B, and C held by process p_i,j as + A_i,j, B_i,j, and C_i,j. The principle of the algorithm + is simply stated as: + + At step k, each process p_i,j computes: + C_i,j += A_i,k x B_k,j. + + You can easily verify that this makes sense, meaning that after p steps matrix C + is equal to AxB. +

+ +

+ Because process p_i,j only holds A_i,j and B_i,j, the above + implies communication. More specifically, at step k: +

Each process p_i,k must broadcast A_i,k to all processes p_i,*

Each process p_k,j must broadcast B_k,j to all processes p_*,j

+ +

+ As a result, at each iteration, each process is involved in 2 broadcasts (either as a sender or as a receiver). + Blocks of A + are broadcasted along rows of the process grid, and blocks of B are broadcasted along columns of the process grid. This is + typically depicted in a figure as follows (recall that block indices are identical to the indices of the processes that hold them). This + figure is for the second step k=1: +

+ +

+ Given the above, the high-level pseudo-code of the algorithm is straightforward: + +

+        // For process p_i,j
+        for k = 0 to p-1
+                participate in a broadcast in my process row for block A_i,k
+                  // (I am the source if k==j)
+                participate in a broadcast in my process column for block B_k,j
+                  // (I am the source if k==i)
+                C += A_i,k * B_k,j
+

+ + +
+ +

+ Implementing "broadcasts": The algorithm involves broadcasts in process rows and process columns. In MPI, a broadcast + must involve all processes in a communicator. Thus, one option to implement the + algorithm is to create 2p communicators, one for each process row and one for each + process column. MPI_Bcast can then be used for these communicators. Communicators + can be easily created using the MPI_Comm_split function (see the MPI documentation). The alternative + is to rely on sequences of point-to-point communications, which isn't as pretty and likely not as efficient. +

+ +

+ Result validation: Recall that we compute a particular matrix product. To validate the result once the outer-product algorithm + has finished, each process must compute the sum of all the elements in its block of C. These sums are then + all added up together (using MPI_Reduce is the way to go), and the process of rank 0 prints out + the sum. This process then computes the difference with the analytical formula: + N³ (N - 1)² / 2. This process should print out an error message if the + two values don't match (beware of casts and round-off; you likely want to do everything in double precision + and check that the absolute value of the difference of the two values is below some small epsilon, instead + of testing for equality with the '==' operator). + +

+ +

For debugging purposes, remember that it's a good idea to insert calls to MPI_Barrier + so that debugging output from the program can be structured step-by-step. +

+ + +

+ +

+ + + +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_rigid_programs/matrixmultiplication/introduction.html b/topic_rigid_programs/matrixmultiplication/introduction.html new file mode 100644 index 0000000..288eab2 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/introduction.html @@ -0,0 +1,120 @@ +

+ + + +

+ Objective: To implement the "outer product" matrix multiplication algorithm in a distributed + memory manner using message passing. +

+ +

+ + +

+ + + +

+ +

+ For instance, with N=6, consider the example matrix A as shown below: +

+ +

+        10 20 30 40 50 60
+        11 21 31 41 51 61
+        12 22 32 42 52 62
+        13 23 33 43 53 63
+        14 24 34 44 54 64
+        15 25 35 45 55 65
+

+ +

+ Now let's assume that p=4. The 4 processes are logically organized in a 2x2 grid (hence the name of the data + distribution) in row-major order as follows: +

+ +

+ + + + + + + + + + + + +
process #0 process #1
process #2 process #3
+ +

+ +

+ In this setup, for instance, process #0 holds the following 3x3 block of matrix A: +

+ +

+        10 20 30
+        11 21 31
+        12 22 32
+

+ +

+ and process #3 holds the following 3x3 block of matrix A: +

+ +

+        43 53 63
+        44 54 64
+        45 55 65
+

+ +

At process #3, element with value 54 has local indices (1,1), but its global indices are (4,4), assuming that + indices start at 0. +

+ + + +

+ + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Have each MPI process allocate and initialize its own + block of particular matrices, using the 2-D distribution scheme. +
Activity #2: Implement the outer product matrix multiplication algorithm. +

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

diff --git a/topic_rigid_programs/matrixmultiplication/outer_product.html b/topic_rigid_programs/matrixmultiplication/outer_product.html new file mode 100644 index 0000000..6d9f8ae --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/outer_product.html @@ -0,0 +1,16 @@ +

+ + + + +

+ + {% include_relative outer_product_algorithm.html %} + +

+ diff --git a/topic_rigid_programs/matrixmultiplication/outer_product.jpg b/topic_rigid_programs/matrixmultiplication/outer_product.jpg new file mode 100644 index 0000000..fbda679 Binary files /dev/null and b/topic_rigid_programs/matrixmultiplication/outer_product.jpg differ diff --git a/topic_rigid_programs/matrixmultiplication/outer_product_algorithm.html b/topic_rigid_programs/matrixmultiplication/outer_product_algorithm.html new file mode 100644 index 0000000..e95bbc6 --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/outer_product_algorithm.html @@ -0,0 +1,41 @@ +

+ Implement a program called matmul (matmul.c), which builds on your matmul_init + program from the previous activity and implements the outer-product matrix multiplication algorithm. +

+ +

+ +{% include_relative outer_product_algorithm_accordion.html %} + +
+ +

+ +

For debugging purposes, remember that it's a good idea to insert calls to MPI_Barrier + so that debugging output from the program can be structured step-by-step. +

diff --git a/topic_rigid_programs/matrixmultiplication/outer_product_algorithm_accordion.html b/topic_rigid_programs/matrixmultiplication/outer_product_algorithm_accordion.html new file mode 100644 index 0000000..6ca529e --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/outer_product_algorithm_accordion.html @@ -0,0 +1,68 @@ + +

+ + How does the outer-product algorithm work? +

+ +

+ Because process p_i,j only holds A_i,j and B_i,j, the above + implies communication. More specifically, at step k: +

Each process p_i,k must broadcast A_i,k to all processes p_i,*

Each process p_k,j must broadcast B_k,j to all processes p_*,j

+ +

+ Given the above, the high-level pseudo-code of the algorithm is straightforward: + +

+        // For process p_i,j
+        for k = 0 to p-1
+                participate in a broadcast in my process row for block A_i,k
+                  // (I am the source if k==j)
+                participate in a broadcast in my process column for block B_k,j
+                  // (I am the source if k==i)
+                C += A_i,k * B_k,j
+

diff --git a/topic_rigid_programs/matrixmultiplication/tbd.html b/topic_rigid_programs/matrixmultiplication/tbd.html new file mode 100644 index 0000000..f4700fb --- /dev/null +++ b/topic_rigid_programs/matrixmultiplication/tbd.html @@ -0,0 +1,6 @@ +

+ + + + +

diff --git a/topic_understanding_performance/index.md b/topic_understanding_performance/index.md new file mode 100644 index 0000000..4ca7b42 --- /dev/null +++ b/topic_understanding_performance/index.md @@ -0,0 +1,37 @@ + + + +

+ + +

+ +

+ + +

+ +

+ + + diff --git a/topic_understanding_performance/lufactorization/calibrate_flops.py b/topic_understanding_performance/lufactorization/calibrate_flops.py new file mode 100755 index 0000000..a1d0ca6 --- /dev/null +++ b/topic_understanding_performance/lufactorization/calibrate_flops.py @@ -0,0 +1,163 @@ +#!/usr/bin/env python3 +import sys +import os +import subprocess +import math + + +########################################### +# Compile callibrating code +########################################### + +callibrating_C_code = """ +#include +#include +#include +#include +#include + +#ifndef SIZE +#define SIZE 2000 +#endif + +static void matmult(double *A, double *B, double *C, int n) { + int i,j,k; + + for (i=0; i < n; i++) { + for (k=0; k < n; k++) { + for (j=0; j < n; j++) { + C[i*n+j] = A[i*n+k] * B[k*n+j]; + } + } + } + return; +} + + +int main(int argc, char *argv[]) +{ + MPI_Init(&argc, &argv); + + int my_rank; + MPI_Comm_rank(MPI_COMM_WORLD,&my_rank); + + // Only process of rank 0 does something + double sum; + double start; + double elapsed; + + if (my_rank == 0) { + + // Allocate matrices + double *A = (double *)malloc(SIZE*SIZE*sizeof(double)); + double *B = (double *)malloc(SIZE*SIZE*sizeof(double)); + double *C = (double *)malloc(SIZE*SIZE*sizeof(double)); + + // Fill in matrix values + int i; + for (i=0; i < SIZE*SIZE; i++) { + A[i] = 2.0*i/(SIZE*SIZE); + B[i] = -1.0*i/(SIZE*SIZE); + C[i] = 0.0; + } + + // Multiply matrices + start = MPI_Wtime(); + matmult(A,B,C,SIZE); + + // Compute the sum (to avoid compiler optimization) + sum=0; + for (i=0; i < SIZE*SIZE; i++) { + sum += C[i]; + } + elapsed = MPI_Wtime() - start; + + } + MPI_Barrier(MPI_COMM_WORLD); + + if (my_rank == 0) { + // Print the wall-clock time and the sum + printf("%.5lf\\t%0.2lf\\n", elapsed, sum); + } + + // Clean-up + MPI_Finalize(); + + return 0; +} +""" + +SIZE=2000 + +callibrating_code_filename = "/tmp/callibrating_code.c" +fh = open(callibrating_code_filename, 'w') +fh.write(callibrating_C_code) +fh.close() +error_code = os.system("smpicc -Ofast "+"-DSIZE="+str(SIZE)+" "+callibrating_code_filename+" -o /tmp/callibration_code") +if (error_code != 0): + sys.stderr.write("Can't compile '"+callibrating_code_filename+"'... aborting\n") + exit(1) +sys.stderr.write("Callibrating code compiled\n") + + +########################################### +# Create XML platform file (one host) +########################################### +platform_filename = "/tmp/platform_one_host.xml" +fh = open(platform_filename, 'w') +fh.write("\n\n\n\n") +fh.write(" \n") +fh.write("\n\n") +fh.close() +sys.stderr.write("One-host XML platform file generated\n") + +########################################### +# Create host file (one host) +########################################### +hostfile_filename = "/tmp/hostfile_one_host" +fh = open(hostfile_filename, 'w') +fh.write("host-0\n") +fh.close() +sys.stderr.write("One-host hostfile generated\n") + +########################################### +# Binary search to find the running power +########################################### + +sys.stderr.write("Initiating binary search...\n") + +# Coarse approximation of the traget simulated time +desired_simulated_gflops_rate=200.0 +number_gflop = (3.0 * SIZE * SIZE * SIZE + SIZE * SIZE) / (1000000000.0) +target = number_gflop / desired_simulated_gflops_rate + +# Initial bounds for the binary search +low = 0 +high = 500000000000.0 + +while (True): + + attempt = (low + high) / 2 + + # Run the code + FNULL = open(os.devnull, 'w') + output = subprocess.check_output(["smpirun","--cfg=smpi/host-speed:"+str(attempt)+"f","-platform",platform_filename,"-hostfile",hostfile_filename,"-np","1","/tmp/callibration_code"],stderr = FNULL, encoding='UTF-8') + FNULL.close() + + # Get the wall-clock time + simulated_wallclock = float(output.split('\t')[0]) + + print("candidate value: "+str(("%.3f" % attempt))+"\t--> wallclock = "+str(("%.3f" % simulated_wallclock))+" (target ="+str(("%.3f" % target))+")") + + if (simulated_wallclock < target): + low = attempt + else: + high = attempt + + + if ((abs(simulated_wallclock - target) < 0.001) or (abs(high - low) < 100)): + break + +print("Run smpirun with --cfg=smpi/host-speed:"+str(("%.3f" % attempt))+"\n") +print(" (and run smpicc with -Ofast)\n") + diff --git a/topic_understanding_performance/lufactorization/cluster_1600.xml b/topic_understanding_performance/lufactorization/cluster_1600.xml new file mode 100644 index 0000000..667e86c --- /dev/null +++ b/topic_understanding_performance/lufactorization/cluster_1600.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/topic_understanding_performance/lufactorization/conclusion.html b/topic_understanding_performance/lufactorization/conclusion.html new file mode 100644 index 0000000..1f9c326 --- /dev/null +++ b/topic_understanding_performance/lufactorization/conclusion.html @@ -0,0 +1,41 @@ +

+ + + +

+ Congratulations for making it this far. You have learned how to measure + the load imbalance in a + message passing application, have learned how to implement a cyclic data distribution, + and have learn how to look at performance results + and draw conclusions about the scalability of the application, and have + learned how to use simulation to run large-scale experiments without need for + a large-scale machine. The performance of the application can be further improve, + for instance by overlapping communication and computation. In fact, many + techniques have been developed to improve the performance of this + particular application. +

+ + +

+ +

+ + + +

+ In your README file write a brief "essay" explaining what you found + surprising/challenging, and what solutions you used to solve + your difficulties. Are you happy with your implementations? Do you + see room for improvement? +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_understanding_performance/lufactorization/cyclic_distribution.html b/topic_understanding_performance/lufactorization/cyclic_distribution.html new file mode 100644 index 0000000..3436c20 --- /dev/null +++ b/topic_understanding_performance/lufactorization/cyclic_distribution.html @@ -0,0 +1,10 @@ +

+ The reason for poor load balance in the original implementation is that after some point, a process runs out of + work to do (because the application proceeds from left to right along the columns of the matrix). This is an + artifact of our data distribution. A solution + is to use a cyclic distribution. More precisely, modify your program, calling it lu_roundrobin.c, + so that the columns of the matrix are assigned to the processors in Round-Robin fashion + (rank 0 processes columns 0, p, 2p, 3p,..., rank 1 processes columns 1, p + 1, 2p + 1, 3p + 1,...). + Of course you must still check that the computed results are correct before moving on to the + experiments in the next step (i.e., disable the "simulation tricks" for testing correctness). +

diff --git a/topic_understanding_performance/lufactorization/cyclic_runs.html b/topic_understanding_performance/lufactorization/cyclic_runs.html new file mode 100644 index 0000000..0c04d07 --- /dev/null +++ b/topic_understanding_performance/lufactorization/cyclic_runs.html @@ -0,0 +1,18 @@ +

+ With the "simulation tricks" from Activity #1 enabled, we can now re-run the same experiments as that + in Step #4 of Activity #1. That is, + run your code using + cluster_1600.xml and + hostfile_1600.txt, but + edit cluster_1600.xml to make the network very fast (zero latency, huge bandwidth). + Run your code for a + 32000x32000 matrix with p = 1, 4, 8, 16, and 32 processes. On the same graph plot + the elapsed time and the percentage idle time (using two different left and right vertical axes). It would + be likely useful to plot the results from Activity #1, Step #4 on this same graph as well for easy comparison. +

+ + +

+ In your README file describe what you observe. Does the cyclic distribution reduce + idle time significantly? +

diff --git a/topic_understanding_performance/lufactorization/hostfile_1600.txt b/topic_understanding_performance/lufactorization/hostfile_1600.txt new file mode 100644 index 0000000..f9a6bc1 --- /dev/null +++ b/topic_understanding_performance/lufactorization/hostfile_1600.txt @@ -0,0 +1,1600 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu +host-64.hawaii.edu +host-65.hawaii.edu +host-66.hawaii.edu +host-67.hawaii.edu +host-68.hawaii.edu +host-69.hawaii.edu +host-70.hawaii.edu +host-71.hawaii.edu +host-72.hawaii.edu +host-73.hawaii.edu +host-74.hawaii.edu +host-75.hawaii.edu +host-76.hawaii.edu +host-77.hawaii.edu +host-78.hawaii.edu +host-79.hawaii.edu +host-80.hawaii.edu +host-81.hawaii.edu +host-82.hawaii.edu +host-83.hawaii.edu +host-84.hawaii.edu +host-85.hawaii.edu +host-86.hawaii.edu +host-87.hawaii.edu +host-88.hawaii.edu +host-89.hawaii.edu +host-90.hawaii.edu +host-91.hawaii.edu +host-92.hawaii.edu +host-93.hawaii.edu +host-94.hawaii.edu +host-95.hawaii.edu +host-96.hawaii.edu +host-97.hawaii.edu +host-98.hawaii.edu +host-99.hawaii.edu +host-100.hawaii.edu +host-101.hawaii.edu +host-102.hawaii.edu +host-103.hawaii.edu +host-104.hawaii.edu +host-105.hawaii.edu +host-106.hawaii.edu +host-107.hawaii.edu +host-108.hawaii.edu +host-109.hawaii.edu +host-110.hawaii.edu +host-111.hawaii.edu +host-112.hawaii.edu +host-113.hawaii.edu +host-114.hawaii.edu +host-115.hawaii.edu +host-116.hawaii.edu +host-117.hawaii.edu +host-118.hawaii.edu +host-119.hawaii.edu +host-120.hawaii.edu +host-121.hawaii.edu +host-122.hawaii.edu +host-123.hawaii.edu +host-124.hawaii.edu +host-125.hawaii.edu +host-126.hawaii.edu +host-127.hawaii.edu +host-128.hawaii.edu +host-129.hawaii.edu +host-130.hawaii.edu +host-131.hawaii.edu +host-132.hawaii.edu +host-133.hawaii.edu +host-134.hawaii.edu +host-135.hawaii.edu +host-136.hawaii.edu +host-137.hawaii.edu +host-138.hawaii.edu +host-139.hawaii.edu +host-140.hawaii.edu +host-141.hawaii.edu +host-142.hawaii.edu +host-143.hawaii.edu +host-144.hawaii.edu +host-145.hawaii.edu +host-146.hawaii.edu +host-147.hawaii.edu +host-148.hawaii.edu +host-149.hawaii.edu +host-150.hawaii.edu +host-151.hawaii.edu +host-152.hawaii.edu +host-153.hawaii.edu +host-154.hawaii.edu +host-155.hawaii.edu +host-156.hawaii.edu +host-157.hawaii.edu +host-158.hawaii.edu +host-159.hawaii.edu +host-160.hawaii.edu +host-161.hawaii.edu +host-162.hawaii.edu +host-163.hawaii.edu +host-164.hawaii.edu +host-165.hawaii.edu +host-166.hawaii.edu +host-167.hawaii.edu +host-168.hawaii.edu +host-169.hawaii.edu +host-170.hawaii.edu +host-171.hawaii.edu +host-172.hawaii.edu +host-173.hawaii.edu +host-174.hawaii.edu +host-175.hawaii.edu +host-176.hawaii.edu +host-177.hawaii.edu +host-178.hawaii.edu +host-179.hawaii.edu +host-180.hawaii.edu +host-181.hawaii.edu +host-182.hawaii.edu +host-183.hawaii.edu +host-184.hawaii.edu +host-185.hawaii.edu +host-186.hawaii.edu +host-187.hawaii.edu +host-188.hawaii.edu +host-189.hawaii.edu +host-190.hawaii.edu +host-191.hawaii.edu +host-192.hawaii.edu +host-193.hawaii.edu +host-194.hawaii.edu +host-195.hawaii.edu +host-196.hawaii.edu +host-197.hawaii.edu +host-198.hawaii.edu +host-199.hawaii.edu +host-200.hawaii.edu +host-201.hawaii.edu +host-202.hawaii.edu +host-203.hawaii.edu +host-204.hawaii.edu +host-205.hawaii.edu +host-206.hawaii.edu +host-207.hawaii.edu +host-208.hawaii.edu +host-209.hawaii.edu +host-210.hawaii.edu +host-211.hawaii.edu +host-212.hawaii.edu +host-213.hawaii.edu +host-214.hawaii.edu +host-215.hawaii.edu +host-216.hawaii.edu +host-217.hawaii.edu +host-218.hawaii.edu +host-219.hawaii.edu +host-220.hawaii.edu +host-221.hawaii.edu +host-222.hawaii.edu +host-223.hawaii.edu +host-224.hawaii.edu +host-225.hawaii.edu +host-226.hawaii.edu +host-227.hawaii.edu +host-228.hawaii.edu +host-229.hawaii.edu +host-230.hawaii.edu +host-231.hawaii.edu +host-232.hawaii.edu +host-233.hawaii.edu +host-234.hawaii.edu +host-235.hawaii.edu +host-236.hawaii.edu +host-237.hawaii.edu +host-238.hawaii.edu +host-239.hawaii.edu +host-240.hawaii.edu +host-241.hawaii.edu +host-242.hawaii.edu +host-243.hawaii.edu +host-244.hawaii.edu +host-245.hawaii.edu +host-246.hawaii.edu +host-247.hawaii.edu +host-248.hawaii.edu +host-249.hawaii.edu +host-250.hawaii.edu +host-251.hawaii.edu +host-252.hawaii.edu +host-253.hawaii.edu +host-254.hawaii.edu +host-255.hawaii.edu +host-256.hawaii.edu +host-257.hawaii.edu +host-258.hawaii.edu +host-259.hawaii.edu +host-260.hawaii.edu +host-261.hawaii.edu +host-262.hawaii.edu +host-263.hawaii.edu +host-264.hawaii.edu +host-265.hawaii.edu +host-266.hawaii.edu +host-267.hawaii.edu +host-268.hawaii.edu +host-269.hawaii.edu +host-270.hawaii.edu +host-271.hawaii.edu +host-272.hawaii.edu +host-273.hawaii.edu +host-274.hawaii.edu +host-275.hawaii.edu +host-276.hawaii.edu +host-277.hawaii.edu +host-278.hawaii.edu +host-279.hawaii.edu +host-280.hawaii.edu +host-281.hawaii.edu +host-282.hawaii.edu +host-283.hawaii.edu +host-284.hawaii.edu +host-285.hawaii.edu +host-286.hawaii.edu +host-287.hawaii.edu +host-288.hawaii.edu +host-289.hawaii.edu +host-290.hawaii.edu +host-291.hawaii.edu +host-292.hawaii.edu +host-293.hawaii.edu +host-294.hawaii.edu +host-295.hawaii.edu +host-296.hawaii.edu +host-297.hawaii.edu +host-298.hawaii.edu +host-299.hawaii.edu +host-300.hawaii.edu +host-301.hawaii.edu +host-302.hawaii.edu +host-303.hawaii.edu +host-304.hawaii.edu +host-305.hawaii.edu +host-306.hawaii.edu +host-307.hawaii.edu +host-308.hawaii.edu +host-309.hawaii.edu +host-310.hawaii.edu +host-311.hawaii.edu +host-312.hawaii.edu +host-313.hawaii.edu +host-314.hawaii.edu +host-315.hawaii.edu +host-316.hawaii.edu +host-317.hawaii.edu +host-318.hawaii.edu +host-319.hawaii.edu +host-320.hawaii.edu +host-321.hawaii.edu +host-322.hawaii.edu +host-323.hawaii.edu +host-324.hawaii.edu +host-325.hawaii.edu +host-326.hawaii.edu +host-327.hawaii.edu +host-328.hawaii.edu +host-329.hawaii.edu +host-330.hawaii.edu +host-331.hawaii.edu +host-332.hawaii.edu +host-333.hawaii.edu +host-334.hawaii.edu +host-335.hawaii.edu +host-336.hawaii.edu +host-337.hawaii.edu +host-338.hawaii.edu +host-339.hawaii.edu +host-340.hawaii.edu +host-341.hawaii.edu +host-342.hawaii.edu +host-343.hawaii.edu +host-344.hawaii.edu +host-345.hawaii.edu +host-346.hawaii.edu +host-347.hawaii.edu +host-348.hawaii.edu +host-349.hawaii.edu +host-350.hawaii.edu +host-351.hawaii.edu +host-352.hawaii.edu +host-353.hawaii.edu +host-354.hawaii.edu +host-355.hawaii.edu +host-356.hawaii.edu +host-357.hawaii.edu +host-358.hawaii.edu +host-359.hawaii.edu +host-360.hawaii.edu +host-361.hawaii.edu +host-362.hawaii.edu +host-363.hawaii.edu +host-364.hawaii.edu +host-365.hawaii.edu +host-366.hawaii.edu +host-367.hawaii.edu +host-368.hawaii.edu +host-369.hawaii.edu +host-370.hawaii.edu +host-371.hawaii.edu +host-372.hawaii.edu +host-373.hawaii.edu +host-374.hawaii.edu +host-375.hawaii.edu +host-376.hawaii.edu +host-377.hawaii.edu +host-378.hawaii.edu +host-379.hawaii.edu +host-380.hawaii.edu +host-381.hawaii.edu +host-382.hawaii.edu +host-383.hawaii.edu +host-384.hawaii.edu +host-385.hawaii.edu +host-386.hawaii.edu +host-387.hawaii.edu +host-388.hawaii.edu +host-389.hawaii.edu +host-390.hawaii.edu +host-391.hawaii.edu +host-392.hawaii.edu +host-393.hawaii.edu +host-394.hawaii.edu +host-395.hawaii.edu +host-396.hawaii.edu +host-397.hawaii.edu +host-398.hawaii.edu +host-399.hawaii.edu +host-400.hawaii.edu +host-401.hawaii.edu +host-402.hawaii.edu +host-403.hawaii.edu +host-404.hawaii.edu +host-405.hawaii.edu +host-406.hawaii.edu +host-407.hawaii.edu +host-408.hawaii.edu +host-409.hawaii.edu +host-410.hawaii.edu +host-411.hawaii.edu +host-412.hawaii.edu +host-413.hawaii.edu +host-414.hawaii.edu +host-415.hawaii.edu +host-416.hawaii.edu +host-417.hawaii.edu +host-418.hawaii.edu +host-419.hawaii.edu +host-420.hawaii.edu +host-421.hawaii.edu +host-422.hawaii.edu +host-423.hawaii.edu +host-424.hawaii.edu +host-425.hawaii.edu +host-426.hawaii.edu +host-427.hawaii.edu +host-428.hawaii.edu +host-429.hawaii.edu +host-430.hawaii.edu +host-431.hawaii.edu +host-432.hawaii.edu +host-433.hawaii.edu +host-434.hawaii.edu +host-435.hawaii.edu +host-436.hawaii.edu +host-437.hawaii.edu +host-438.hawaii.edu +host-439.hawaii.edu +host-440.hawaii.edu +host-441.hawaii.edu +host-442.hawaii.edu +host-443.hawaii.edu +host-444.hawaii.edu +host-445.hawaii.edu +host-446.hawaii.edu +host-447.hawaii.edu +host-448.hawaii.edu +host-449.hawaii.edu +host-450.hawaii.edu +host-451.hawaii.edu +host-452.hawaii.edu +host-453.hawaii.edu +host-454.hawaii.edu +host-455.hawaii.edu +host-456.hawaii.edu +host-457.hawaii.edu +host-458.hawaii.edu +host-459.hawaii.edu +host-460.hawaii.edu +host-461.hawaii.edu +host-462.hawaii.edu +host-463.hawaii.edu +host-464.hawaii.edu +host-465.hawaii.edu +host-466.hawaii.edu +host-467.hawaii.edu +host-468.hawaii.edu +host-469.hawaii.edu +host-470.hawaii.edu +host-471.hawaii.edu +host-472.hawaii.edu +host-473.hawaii.edu +host-474.hawaii.edu +host-475.hawaii.edu +host-476.hawaii.edu +host-477.hawaii.edu +host-478.hawaii.edu +host-479.hawaii.edu +host-480.hawaii.edu +host-481.hawaii.edu +host-482.hawaii.edu +host-483.hawaii.edu +host-484.hawaii.edu +host-485.hawaii.edu +host-486.hawaii.edu +host-487.hawaii.edu +host-488.hawaii.edu +host-489.hawaii.edu +host-490.hawaii.edu +host-491.hawaii.edu +host-492.hawaii.edu +host-493.hawaii.edu +host-494.hawaii.edu +host-495.hawaii.edu +host-496.hawaii.edu +host-497.hawaii.edu +host-498.hawaii.edu +host-499.hawaii.edu +host-500.hawaii.edu +host-501.hawaii.edu +host-502.hawaii.edu +host-503.hawaii.edu +host-504.hawaii.edu +host-505.hawaii.edu +host-506.hawaii.edu +host-507.hawaii.edu +host-508.hawaii.edu +host-509.hawaii.edu +host-510.hawaii.edu +host-511.hawaii.edu +host-512.hawaii.edu +host-513.hawaii.edu +host-514.hawaii.edu +host-515.hawaii.edu +host-516.hawaii.edu +host-517.hawaii.edu +host-518.hawaii.edu +host-519.hawaii.edu +host-520.hawaii.edu +host-521.hawaii.edu +host-522.hawaii.edu +host-523.hawaii.edu +host-524.hawaii.edu +host-525.hawaii.edu +host-526.hawaii.edu +host-527.hawaii.edu +host-528.hawaii.edu +host-529.hawaii.edu +host-530.hawaii.edu +host-531.hawaii.edu +host-532.hawaii.edu +host-533.hawaii.edu +host-534.hawaii.edu +host-535.hawaii.edu +host-536.hawaii.edu +host-537.hawaii.edu +host-538.hawaii.edu +host-539.hawaii.edu +host-540.hawaii.edu +host-541.hawaii.edu +host-542.hawaii.edu +host-543.hawaii.edu +host-544.hawaii.edu +host-545.hawaii.edu +host-546.hawaii.edu +host-547.hawaii.edu +host-548.hawaii.edu +host-549.hawaii.edu +host-550.hawaii.edu +host-551.hawaii.edu +host-552.hawaii.edu +host-553.hawaii.edu +host-554.hawaii.edu +host-555.hawaii.edu +host-556.hawaii.edu +host-557.hawaii.edu +host-558.hawaii.edu +host-559.hawaii.edu +host-560.hawaii.edu +host-561.hawaii.edu +host-562.hawaii.edu +host-563.hawaii.edu +host-564.hawaii.edu +host-565.hawaii.edu +host-566.hawaii.edu +host-567.hawaii.edu +host-568.hawaii.edu +host-569.hawaii.edu +host-570.hawaii.edu +host-571.hawaii.edu +host-572.hawaii.edu +host-573.hawaii.edu +host-574.hawaii.edu +host-575.hawaii.edu +host-576.hawaii.edu +host-577.hawaii.edu +host-578.hawaii.edu +host-579.hawaii.edu +host-580.hawaii.edu +host-581.hawaii.edu +host-582.hawaii.edu +host-583.hawaii.edu +host-584.hawaii.edu +host-585.hawaii.edu +host-586.hawaii.edu +host-587.hawaii.edu +host-588.hawaii.edu +host-589.hawaii.edu +host-590.hawaii.edu +host-591.hawaii.edu +host-592.hawaii.edu +host-593.hawaii.edu +host-594.hawaii.edu +host-595.hawaii.edu +host-596.hawaii.edu +host-597.hawaii.edu +host-598.hawaii.edu +host-599.hawaii.edu +host-600.hawaii.edu +host-601.hawaii.edu +host-602.hawaii.edu +host-603.hawaii.edu +host-604.hawaii.edu +host-605.hawaii.edu +host-606.hawaii.edu +host-607.hawaii.edu +host-608.hawaii.edu +host-609.hawaii.edu +host-610.hawaii.edu +host-611.hawaii.edu +host-612.hawaii.edu +host-613.hawaii.edu +host-614.hawaii.edu +host-615.hawaii.edu +host-616.hawaii.edu +host-617.hawaii.edu +host-618.hawaii.edu +host-619.hawaii.edu +host-620.hawaii.edu +host-621.hawaii.edu +host-622.hawaii.edu +host-623.hawaii.edu +host-624.hawaii.edu +host-625.hawaii.edu +host-626.hawaii.edu +host-627.hawaii.edu +host-628.hawaii.edu +host-629.hawaii.edu +host-630.hawaii.edu +host-631.hawaii.edu +host-632.hawaii.edu +host-633.hawaii.edu +host-634.hawaii.edu +host-635.hawaii.edu +host-636.hawaii.edu +host-637.hawaii.edu +host-638.hawaii.edu +host-639.hawaii.edu +host-640.hawaii.edu +host-641.hawaii.edu +host-642.hawaii.edu +host-643.hawaii.edu +host-644.hawaii.edu +host-645.hawaii.edu +host-646.hawaii.edu +host-647.hawaii.edu +host-648.hawaii.edu +host-649.hawaii.edu +host-650.hawaii.edu +host-651.hawaii.edu +host-652.hawaii.edu +host-653.hawaii.edu +host-654.hawaii.edu +host-655.hawaii.edu +host-656.hawaii.edu +host-657.hawaii.edu +host-658.hawaii.edu +host-659.hawaii.edu +host-660.hawaii.edu +host-661.hawaii.edu +host-662.hawaii.edu +host-663.hawaii.edu +host-664.hawaii.edu +host-665.hawaii.edu +host-666.hawaii.edu +host-667.hawaii.edu +host-668.hawaii.edu +host-669.hawaii.edu +host-670.hawaii.edu +host-671.hawaii.edu +host-672.hawaii.edu +host-673.hawaii.edu +host-674.hawaii.edu +host-675.hawaii.edu +host-676.hawaii.edu +host-677.hawaii.edu +host-678.hawaii.edu +host-679.hawaii.edu +host-680.hawaii.edu +host-681.hawaii.edu +host-682.hawaii.edu +host-683.hawaii.edu +host-684.hawaii.edu +host-685.hawaii.edu +host-686.hawaii.edu +host-687.hawaii.edu +host-688.hawaii.edu +host-689.hawaii.edu +host-690.hawaii.edu +host-691.hawaii.edu +host-692.hawaii.edu +host-693.hawaii.edu +host-694.hawaii.edu +host-695.hawaii.edu +host-696.hawaii.edu +host-697.hawaii.edu +host-698.hawaii.edu +host-699.hawaii.edu +host-700.hawaii.edu +host-701.hawaii.edu +host-702.hawaii.edu +host-703.hawaii.edu +host-704.hawaii.edu +host-705.hawaii.edu +host-706.hawaii.edu +host-707.hawaii.edu +host-708.hawaii.edu +host-709.hawaii.edu +host-710.hawaii.edu +host-711.hawaii.edu +host-712.hawaii.edu +host-713.hawaii.edu +host-714.hawaii.edu +host-715.hawaii.edu +host-716.hawaii.edu +host-717.hawaii.edu +host-718.hawaii.edu +host-719.hawaii.edu +host-720.hawaii.edu +host-721.hawaii.edu +host-722.hawaii.edu +host-723.hawaii.edu +host-724.hawaii.edu +host-725.hawaii.edu +host-726.hawaii.edu +host-727.hawaii.edu +host-728.hawaii.edu +host-729.hawaii.edu +host-730.hawaii.edu +host-731.hawaii.edu +host-732.hawaii.edu +host-733.hawaii.edu +host-734.hawaii.edu +host-735.hawaii.edu +host-736.hawaii.edu +host-737.hawaii.edu +host-738.hawaii.edu +host-739.hawaii.edu +host-740.hawaii.edu +host-741.hawaii.edu +host-742.hawaii.edu +host-743.hawaii.edu +host-744.hawaii.edu +host-745.hawaii.edu +host-746.hawaii.edu +host-747.hawaii.edu +host-748.hawaii.edu +host-749.hawaii.edu +host-750.hawaii.edu +host-751.hawaii.edu +host-752.hawaii.edu +host-753.hawaii.edu +host-754.hawaii.edu +host-755.hawaii.edu +host-756.hawaii.edu +host-757.hawaii.edu +host-758.hawaii.edu +host-759.hawaii.edu +host-760.hawaii.edu +host-761.hawaii.edu +host-762.hawaii.edu +host-763.hawaii.edu +host-764.hawaii.edu +host-765.hawaii.edu +host-766.hawaii.edu +host-767.hawaii.edu +host-768.hawaii.edu +host-769.hawaii.edu +host-770.hawaii.edu +host-771.hawaii.edu +host-772.hawaii.edu +host-773.hawaii.edu +host-774.hawaii.edu +host-775.hawaii.edu +host-776.hawaii.edu +host-777.hawaii.edu +host-778.hawaii.edu +host-779.hawaii.edu +host-780.hawaii.edu +host-781.hawaii.edu +host-782.hawaii.edu +host-783.hawaii.edu +host-784.hawaii.edu +host-785.hawaii.edu +host-786.hawaii.edu +host-787.hawaii.edu +host-788.hawaii.edu +host-789.hawaii.edu +host-790.hawaii.edu +host-791.hawaii.edu +host-792.hawaii.edu +host-793.hawaii.edu +host-794.hawaii.edu +host-795.hawaii.edu +host-796.hawaii.edu +host-797.hawaii.edu +host-798.hawaii.edu +host-799.hawaii.edu +host-800.hawaii.edu +host-801.hawaii.edu +host-802.hawaii.edu +host-803.hawaii.edu +host-804.hawaii.edu +host-805.hawaii.edu +host-806.hawaii.edu +host-807.hawaii.edu +host-808.hawaii.edu +host-809.hawaii.edu +host-810.hawaii.edu +host-811.hawaii.edu +host-812.hawaii.edu +host-813.hawaii.edu +host-814.hawaii.edu +host-815.hawaii.edu +host-816.hawaii.edu +host-817.hawaii.edu +host-818.hawaii.edu +host-819.hawaii.edu +host-820.hawaii.edu +host-821.hawaii.edu +host-822.hawaii.edu +host-823.hawaii.edu +host-824.hawaii.edu +host-825.hawaii.edu +host-826.hawaii.edu +host-827.hawaii.edu +host-828.hawaii.edu +host-829.hawaii.edu +host-830.hawaii.edu +host-831.hawaii.edu +host-832.hawaii.edu +host-833.hawaii.edu +host-834.hawaii.edu +host-835.hawaii.edu +host-836.hawaii.edu +host-837.hawaii.edu +host-838.hawaii.edu +host-839.hawaii.edu +host-840.hawaii.edu +host-841.hawaii.edu +host-842.hawaii.edu +host-843.hawaii.edu +host-844.hawaii.edu +host-845.hawaii.edu +host-846.hawaii.edu +host-847.hawaii.edu +host-848.hawaii.edu +host-849.hawaii.edu +host-850.hawaii.edu +host-851.hawaii.edu +host-852.hawaii.edu +host-853.hawaii.edu +host-854.hawaii.edu +host-855.hawaii.edu +host-856.hawaii.edu +host-857.hawaii.edu +host-858.hawaii.edu +host-859.hawaii.edu +host-860.hawaii.edu +host-861.hawaii.edu +host-862.hawaii.edu +host-863.hawaii.edu +host-864.hawaii.edu +host-865.hawaii.edu +host-866.hawaii.edu +host-867.hawaii.edu +host-868.hawaii.edu +host-869.hawaii.edu +host-870.hawaii.edu +host-871.hawaii.edu +host-872.hawaii.edu +host-873.hawaii.edu +host-874.hawaii.edu +host-875.hawaii.edu +host-876.hawaii.edu +host-877.hawaii.edu +host-878.hawaii.edu +host-879.hawaii.edu +host-880.hawaii.edu +host-881.hawaii.edu +host-882.hawaii.edu +host-883.hawaii.edu +host-884.hawaii.edu +host-885.hawaii.edu +host-886.hawaii.edu +host-887.hawaii.edu +host-888.hawaii.edu +host-889.hawaii.edu +host-890.hawaii.edu +host-891.hawaii.edu +host-892.hawaii.edu +host-893.hawaii.edu +host-894.hawaii.edu +host-895.hawaii.edu +host-896.hawaii.edu +host-897.hawaii.edu +host-898.hawaii.edu +host-899.hawaii.edu +host-900.hawaii.edu +host-901.hawaii.edu +host-902.hawaii.edu +host-903.hawaii.edu +host-904.hawaii.edu +host-905.hawaii.edu +host-906.hawaii.edu +host-907.hawaii.edu +host-908.hawaii.edu +host-909.hawaii.edu +host-910.hawaii.edu +host-911.hawaii.edu +host-912.hawaii.edu +host-913.hawaii.edu +host-914.hawaii.edu +host-915.hawaii.edu +host-916.hawaii.edu +host-917.hawaii.edu +host-918.hawaii.edu +host-919.hawaii.edu +host-920.hawaii.edu +host-921.hawaii.edu +host-922.hawaii.edu +host-923.hawaii.edu +host-924.hawaii.edu +host-925.hawaii.edu +host-926.hawaii.edu +host-927.hawaii.edu +host-928.hawaii.edu +host-929.hawaii.edu +host-930.hawaii.edu +host-931.hawaii.edu +host-932.hawaii.edu +host-933.hawaii.edu +host-934.hawaii.edu +host-935.hawaii.edu +host-936.hawaii.edu +host-937.hawaii.edu +host-938.hawaii.edu +host-939.hawaii.edu +host-940.hawaii.edu +host-941.hawaii.edu +host-942.hawaii.edu +host-943.hawaii.edu +host-944.hawaii.edu +host-945.hawaii.edu +host-946.hawaii.edu +host-947.hawaii.edu +host-948.hawaii.edu +host-949.hawaii.edu +host-950.hawaii.edu +host-951.hawaii.edu +host-952.hawaii.edu +host-953.hawaii.edu +host-954.hawaii.edu +host-955.hawaii.edu +host-956.hawaii.edu +host-957.hawaii.edu +host-958.hawaii.edu +host-959.hawaii.edu +host-960.hawaii.edu +host-961.hawaii.edu +host-962.hawaii.edu +host-963.hawaii.edu +host-964.hawaii.edu +host-965.hawaii.edu +host-966.hawaii.edu +host-967.hawaii.edu +host-968.hawaii.edu +host-969.hawaii.edu +host-970.hawaii.edu +host-971.hawaii.edu +host-972.hawaii.edu +host-973.hawaii.edu +host-974.hawaii.edu +host-975.hawaii.edu +host-976.hawaii.edu +host-977.hawaii.edu +host-978.hawaii.edu +host-979.hawaii.edu +host-980.hawaii.edu +host-981.hawaii.edu +host-982.hawaii.edu +host-983.hawaii.edu +host-984.hawaii.edu +host-985.hawaii.edu +host-986.hawaii.edu +host-987.hawaii.edu +host-988.hawaii.edu +host-989.hawaii.edu +host-990.hawaii.edu +host-991.hawaii.edu +host-992.hawaii.edu +host-993.hawaii.edu +host-994.hawaii.edu +host-995.hawaii.edu +host-996.hawaii.edu +host-997.hawaii.edu +host-998.hawaii.edu +host-999.hawaii.edu +host-1000.hawaii.edu +host-1001.hawaii.edu +host-1002.hawaii.edu +host-1003.hawaii.edu +host-1004.hawaii.edu +host-1005.hawaii.edu +host-1006.hawaii.edu +host-1007.hawaii.edu +host-1008.hawaii.edu +host-1009.hawaii.edu +host-1010.hawaii.edu +host-1011.hawaii.edu +host-1012.hawaii.edu +host-1013.hawaii.edu +host-1014.hawaii.edu +host-1015.hawaii.edu +host-1016.hawaii.edu +host-1017.hawaii.edu +host-1018.hawaii.edu +host-1019.hawaii.edu +host-1020.hawaii.edu +host-1021.hawaii.edu +host-1022.hawaii.edu +host-1023.hawaii.edu +host-1024.hawaii.edu +host-1025.hawaii.edu +host-1026.hawaii.edu +host-1027.hawaii.edu +host-1028.hawaii.edu +host-1029.hawaii.edu +host-1030.hawaii.edu +host-1031.hawaii.edu +host-1032.hawaii.edu +host-1033.hawaii.edu +host-1034.hawaii.edu +host-1035.hawaii.edu +host-1036.hawaii.edu +host-1037.hawaii.edu +host-1038.hawaii.edu +host-1039.hawaii.edu +host-1040.hawaii.edu +host-1041.hawaii.edu +host-1042.hawaii.edu +host-1043.hawaii.edu +host-1044.hawaii.edu +host-1045.hawaii.edu +host-1046.hawaii.edu +host-1047.hawaii.edu +host-1048.hawaii.edu +host-1049.hawaii.edu +host-1050.hawaii.edu +host-1051.hawaii.edu +host-1052.hawaii.edu +host-1053.hawaii.edu +host-1054.hawaii.edu +host-1055.hawaii.edu +host-1056.hawaii.edu +host-1057.hawaii.edu +host-1058.hawaii.edu +host-1059.hawaii.edu +host-1060.hawaii.edu +host-1061.hawaii.edu +host-1062.hawaii.edu +host-1063.hawaii.edu +host-1064.hawaii.edu +host-1065.hawaii.edu +host-1066.hawaii.edu +host-1067.hawaii.edu +host-1068.hawaii.edu +host-1069.hawaii.edu +host-1070.hawaii.edu +host-1071.hawaii.edu +host-1072.hawaii.edu +host-1073.hawaii.edu +host-1074.hawaii.edu +host-1075.hawaii.edu +host-1076.hawaii.edu +host-1077.hawaii.edu +host-1078.hawaii.edu +host-1079.hawaii.edu +host-1080.hawaii.edu +host-1081.hawaii.edu +host-1082.hawaii.edu +host-1083.hawaii.edu +host-1084.hawaii.edu +host-1085.hawaii.edu +host-1086.hawaii.edu +host-1087.hawaii.edu +host-1088.hawaii.edu +host-1089.hawaii.edu +host-1090.hawaii.edu +host-1091.hawaii.edu +host-1092.hawaii.edu +host-1093.hawaii.edu +host-1094.hawaii.edu +host-1095.hawaii.edu +host-1096.hawaii.edu +host-1097.hawaii.edu +host-1098.hawaii.edu +host-1099.hawaii.edu +host-1100.hawaii.edu +host-1101.hawaii.edu +host-1102.hawaii.edu +host-1103.hawaii.edu +host-1104.hawaii.edu +host-1105.hawaii.edu +host-1106.hawaii.edu +host-1107.hawaii.edu +host-1108.hawaii.edu +host-1109.hawaii.edu +host-1110.hawaii.edu +host-1111.hawaii.edu +host-1112.hawaii.edu +host-1113.hawaii.edu +host-1114.hawaii.edu +host-1115.hawaii.edu +host-1116.hawaii.edu +host-1117.hawaii.edu +host-1118.hawaii.edu +host-1119.hawaii.edu +host-1120.hawaii.edu +host-1121.hawaii.edu +host-1122.hawaii.edu +host-1123.hawaii.edu +host-1124.hawaii.edu +host-1125.hawaii.edu +host-1126.hawaii.edu +host-1127.hawaii.edu +host-1128.hawaii.edu +host-1129.hawaii.edu +host-1130.hawaii.edu +host-1131.hawaii.edu +host-1132.hawaii.edu +host-1133.hawaii.edu +host-1134.hawaii.edu +host-1135.hawaii.edu +host-1136.hawaii.edu +host-1137.hawaii.edu +host-1138.hawaii.edu +host-1139.hawaii.edu +host-1140.hawaii.edu +host-1141.hawaii.edu +host-1142.hawaii.edu +host-1143.hawaii.edu +host-1144.hawaii.edu +host-1145.hawaii.edu +host-1146.hawaii.edu +host-1147.hawaii.edu +host-1148.hawaii.edu +host-1149.hawaii.edu +host-1150.hawaii.edu +host-1151.hawaii.edu +host-1152.hawaii.edu +host-1153.hawaii.edu +host-1154.hawaii.edu +host-1155.hawaii.edu +host-1156.hawaii.edu +host-1157.hawaii.edu +host-1158.hawaii.edu +host-1159.hawaii.edu +host-1160.hawaii.edu +host-1161.hawaii.edu +host-1162.hawaii.edu +host-1163.hawaii.edu +host-1164.hawaii.edu +host-1165.hawaii.edu +host-1166.hawaii.edu +host-1167.hawaii.edu +host-1168.hawaii.edu +host-1169.hawaii.edu +host-1170.hawaii.edu +host-1171.hawaii.edu +host-1172.hawaii.edu +host-1173.hawaii.edu +host-1174.hawaii.edu +host-1175.hawaii.edu +host-1176.hawaii.edu +host-1177.hawaii.edu +host-1178.hawaii.edu +host-1179.hawaii.edu +host-1180.hawaii.edu +host-1181.hawaii.edu +host-1182.hawaii.edu +host-1183.hawaii.edu +host-1184.hawaii.edu +host-1185.hawaii.edu +host-1186.hawaii.edu +host-1187.hawaii.edu +host-1188.hawaii.edu +host-1189.hawaii.edu +host-1190.hawaii.edu +host-1191.hawaii.edu +host-1192.hawaii.edu +host-1193.hawaii.edu +host-1194.hawaii.edu +host-1195.hawaii.edu +host-1196.hawaii.edu +host-1197.hawaii.edu +host-1198.hawaii.edu +host-1199.hawaii.edu +host-1200.hawaii.edu +host-1201.hawaii.edu +host-1202.hawaii.edu +host-1203.hawaii.edu +host-1204.hawaii.edu +host-1205.hawaii.edu +host-1206.hawaii.edu +host-1207.hawaii.edu +host-1208.hawaii.edu +host-1209.hawaii.edu +host-1210.hawaii.edu +host-1211.hawaii.edu +host-1212.hawaii.edu +host-1213.hawaii.edu +host-1214.hawaii.edu +host-1215.hawaii.edu +host-1216.hawaii.edu +host-1217.hawaii.edu +host-1218.hawaii.edu +host-1219.hawaii.edu +host-1220.hawaii.edu +host-1221.hawaii.edu +host-1222.hawaii.edu +host-1223.hawaii.edu +host-1224.hawaii.edu +host-1225.hawaii.edu +host-1226.hawaii.edu +host-1227.hawaii.edu +host-1228.hawaii.edu +host-1229.hawaii.edu +host-1230.hawaii.edu +host-1231.hawaii.edu +host-1232.hawaii.edu +host-1233.hawaii.edu +host-1234.hawaii.edu +host-1235.hawaii.edu +host-1236.hawaii.edu +host-1237.hawaii.edu +host-1238.hawaii.edu +host-1239.hawaii.edu +host-1240.hawaii.edu +host-1241.hawaii.edu +host-1242.hawaii.edu +host-1243.hawaii.edu +host-1244.hawaii.edu +host-1245.hawaii.edu +host-1246.hawaii.edu +host-1247.hawaii.edu +host-1248.hawaii.edu +host-1249.hawaii.edu +host-1250.hawaii.edu +host-1251.hawaii.edu +host-1252.hawaii.edu +host-1253.hawaii.edu +host-1254.hawaii.edu +host-1255.hawaii.edu +host-1256.hawaii.edu +host-1257.hawaii.edu +host-1258.hawaii.edu +host-1259.hawaii.edu +host-1260.hawaii.edu +host-1261.hawaii.edu +host-1262.hawaii.edu +host-1263.hawaii.edu +host-1264.hawaii.edu +host-1265.hawaii.edu +host-1266.hawaii.edu +host-1267.hawaii.edu +host-1268.hawaii.edu +host-1269.hawaii.edu +host-1270.hawaii.edu +host-1271.hawaii.edu +host-1272.hawaii.edu +host-1273.hawaii.edu +host-1274.hawaii.edu +host-1275.hawaii.edu +host-1276.hawaii.edu +host-1277.hawaii.edu +host-1278.hawaii.edu +host-1279.hawaii.edu +host-1280.hawaii.edu +host-1281.hawaii.edu +host-1282.hawaii.edu +host-1283.hawaii.edu +host-1284.hawaii.edu +host-1285.hawaii.edu +host-1286.hawaii.edu +host-1287.hawaii.edu +host-1288.hawaii.edu +host-1289.hawaii.edu +host-1290.hawaii.edu +host-1291.hawaii.edu +host-1292.hawaii.edu +host-1293.hawaii.edu +host-1294.hawaii.edu +host-1295.hawaii.edu +host-1296.hawaii.edu +host-1297.hawaii.edu +host-1298.hawaii.edu +host-1299.hawaii.edu +host-1300.hawaii.edu +host-1301.hawaii.edu +host-1302.hawaii.edu +host-1303.hawaii.edu +host-1304.hawaii.edu +host-1305.hawaii.edu +host-1306.hawaii.edu +host-1307.hawaii.edu +host-1308.hawaii.edu +host-1309.hawaii.edu +host-1310.hawaii.edu +host-1311.hawaii.edu +host-1312.hawaii.edu +host-1313.hawaii.edu +host-1314.hawaii.edu +host-1315.hawaii.edu +host-1316.hawaii.edu +host-1317.hawaii.edu +host-1318.hawaii.edu +host-1319.hawaii.edu +host-1320.hawaii.edu +host-1321.hawaii.edu +host-1322.hawaii.edu +host-1323.hawaii.edu +host-1324.hawaii.edu +host-1325.hawaii.edu +host-1326.hawaii.edu +host-1327.hawaii.edu +host-1328.hawaii.edu +host-1329.hawaii.edu +host-1330.hawaii.edu +host-1331.hawaii.edu +host-1332.hawaii.edu +host-1333.hawaii.edu +host-1334.hawaii.edu +host-1335.hawaii.edu +host-1336.hawaii.edu +host-1337.hawaii.edu +host-1338.hawaii.edu +host-1339.hawaii.edu +host-1340.hawaii.edu +host-1341.hawaii.edu +host-1342.hawaii.edu +host-1343.hawaii.edu +host-1344.hawaii.edu +host-1345.hawaii.edu +host-1346.hawaii.edu +host-1347.hawaii.edu +host-1348.hawaii.edu +host-1349.hawaii.edu +host-1350.hawaii.edu +host-1351.hawaii.edu +host-1352.hawaii.edu +host-1353.hawaii.edu +host-1354.hawaii.edu +host-1355.hawaii.edu +host-1356.hawaii.edu +host-1357.hawaii.edu +host-1358.hawaii.edu +host-1359.hawaii.edu +host-1360.hawaii.edu +host-1361.hawaii.edu +host-1362.hawaii.edu +host-1363.hawaii.edu +host-1364.hawaii.edu +host-1365.hawaii.edu +host-1366.hawaii.edu +host-1367.hawaii.edu +host-1368.hawaii.edu +host-1369.hawaii.edu +host-1370.hawaii.edu +host-1371.hawaii.edu +host-1372.hawaii.edu +host-1373.hawaii.edu +host-1374.hawaii.edu +host-1375.hawaii.edu +host-1376.hawaii.edu +host-1377.hawaii.edu +host-1378.hawaii.edu +host-1379.hawaii.edu +host-1380.hawaii.edu +host-1381.hawaii.edu +host-1382.hawaii.edu +host-1383.hawaii.edu +host-1384.hawaii.edu +host-1385.hawaii.edu +host-1386.hawaii.edu +host-1387.hawaii.edu +host-1388.hawaii.edu +host-1389.hawaii.edu +host-1390.hawaii.edu +host-1391.hawaii.edu +host-1392.hawaii.edu +host-1393.hawaii.edu +host-1394.hawaii.edu +host-1395.hawaii.edu +host-1396.hawaii.edu +host-1397.hawaii.edu +host-1398.hawaii.edu +host-1399.hawaii.edu +host-1400.hawaii.edu +host-1401.hawaii.edu +host-1402.hawaii.edu +host-1403.hawaii.edu +host-1404.hawaii.edu +host-1405.hawaii.edu +host-1406.hawaii.edu +host-1407.hawaii.edu +host-1408.hawaii.edu +host-1409.hawaii.edu +host-1410.hawaii.edu +host-1411.hawaii.edu +host-1412.hawaii.edu +host-1413.hawaii.edu +host-1414.hawaii.edu +host-1415.hawaii.edu +host-1416.hawaii.edu +host-1417.hawaii.edu +host-1418.hawaii.edu +host-1419.hawaii.edu +host-1420.hawaii.edu +host-1421.hawaii.edu +host-1422.hawaii.edu +host-1423.hawaii.edu +host-1424.hawaii.edu +host-1425.hawaii.edu +host-1426.hawaii.edu +host-1427.hawaii.edu +host-1428.hawaii.edu +host-1429.hawaii.edu +host-1430.hawaii.edu +host-1431.hawaii.edu +host-1432.hawaii.edu +host-1433.hawaii.edu +host-1434.hawaii.edu +host-1435.hawaii.edu +host-1436.hawaii.edu +host-1437.hawaii.edu +host-1438.hawaii.edu +host-1439.hawaii.edu +host-1440.hawaii.edu +host-1441.hawaii.edu +host-1442.hawaii.edu +host-1443.hawaii.edu +host-1444.hawaii.edu +host-1445.hawaii.edu +host-1446.hawaii.edu +host-1447.hawaii.edu +host-1448.hawaii.edu +host-1449.hawaii.edu +host-1450.hawaii.edu +host-1451.hawaii.edu +host-1452.hawaii.edu +host-1453.hawaii.edu +host-1454.hawaii.edu +host-1455.hawaii.edu +host-1456.hawaii.edu +host-1457.hawaii.edu +host-1458.hawaii.edu +host-1459.hawaii.edu +host-1460.hawaii.edu +host-1461.hawaii.edu +host-1462.hawaii.edu +host-1463.hawaii.edu +host-1464.hawaii.edu +host-1465.hawaii.edu +host-1466.hawaii.edu +host-1467.hawaii.edu +host-1468.hawaii.edu +host-1469.hawaii.edu +host-1470.hawaii.edu +host-1471.hawaii.edu +host-1472.hawaii.edu +host-1473.hawaii.edu +host-1474.hawaii.edu +host-1475.hawaii.edu +host-1476.hawaii.edu +host-1477.hawaii.edu +host-1478.hawaii.edu +host-1479.hawaii.edu +host-1480.hawaii.edu +host-1481.hawaii.edu +host-1482.hawaii.edu +host-1483.hawaii.edu +host-1484.hawaii.edu +host-1485.hawaii.edu +host-1486.hawaii.edu +host-1487.hawaii.edu +host-1488.hawaii.edu +host-1489.hawaii.edu +host-1490.hawaii.edu +host-1491.hawaii.edu +host-1492.hawaii.edu +host-1493.hawaii.edu +host-1494.hawaii.edu +host-1495.hawaii.edu +host-1496.hawaii.edu +host-1497.hawaii.edu +host-1498.hawaii.edu +host-1499.hawaii.edu +host-1500.hawaii.edu +host-1501.hawaii.edu +host-1502.hawaii.edu +host-1503.hawaii.edu +host-1504.hawaii.edu +host-1505.hawaii.edu +host-1506.hawaii.edu +host-1507.hawaii.edu +host-1508.hawaii.edu +host-1509.hawaii.edu +host-1510.hawaii.edu +host-1511.hawaii.edu +host-1512.hawaii.edu +host-1513.hawaii.edu +host-1514.hawaii.edu +host-1515.hawaii.edu +host-1516.hawaii.edu +host-1517.hawaii.edu +host-1518.hawaii.edu +host-1519.hawaii.edu +host-1520.hawaii.edu +host-1521.hawaii.edu +host-1522.hawaii.edu +host-1523.hawaii.edu +host-1524.hawaii.edu +host-1525.hawaii.edu +host-1526.hawaii.edu +host-1527.hawaii.edu +host-1528.hawaii.edu +host-1529.hawaii.edu +host-1530.hawaii.edu +host-1531.hawaii.edu +host-1532.hawaii.edu +host-1533.hawaii.edu +host-1534.hawaii.edu +host-1535.hawaii.edu +host-1536.hawaii.edu +host-1537.hawaii.edu +host-1538.hawaii.edu +host-1539.hawaii.edu +host-1540.hawaii.edu +host-1541.hawaii.edu +host-1542.hawaii.edu +host-1543.hawaii.edu +host-1544.hawaii.edu +host-1545.hawaii.edu +host-1546.hawaii.edu +host-1547.hawaii.edu +host-1548.hawaii.edu +host-1549.hawaii.edu +host-1550.hawaii.edu +host-1551.hawaii.edu +host-1552.hawaii.edu +host-1553.hawaii.edu +host-1554.hawaii.edu +host-1555.hawaii.edu +host-1556.hawaii.edu +host-1557.hawaii.edu +host-1558.hawaii.edu +host-1559.hawaii.edu +host-1560.hawaii.edu +host-1561.hawaii.edu +host-1562.hawaii.edu +host-1563.hawaii.edu +host-1564.hawaii.edu +host-1565.hawaii.edu +host-1566.hawaii.edu +host-1567.hawaii.edu +host-1568.hawaii.edu +host-1569.hawaii.edu +host-1570.hawaii.edu +host-1571.hawaii.edu +host-1572.hawaii.edu +host-1573.hawaii.edu +host-1574.hawaii.edu +host-1575.hawaii.edu +host-1576.hawaii.edu +host-1577.hawaii.edu +host-1578.hawaii.edu +host-1579.hawaii.edu +host-1580.hawaii.edu +host-1581.hawaii.edu +host-1582.hawaii.edu +host-1583.hawaii.edu +host-1584.hawaii.edu +host-1585.hawaii.edu +host-1586.hawaii.edu +host-1587.hawaii.edu +host-1588.hawaii.edu +host-1589.hawaii.edu +host-1590.hawaii.edu +host-1591.hawaii.edu +host-1592.hawaii.edu +host-1593.hawaii.edu +host-1594.hawaii.edu +host-1595.hawaii.edu +host-1596.hawaii.edu +host-1597.hawaii.edu +host-1598.hawaii.edu +host-1599.hawaii.edu diff --git a/topic_understanding_performance/lufactorization/index.html b/topic_understanding_performance/lufactorization/index.html new file mode 100644 index 0000000..dcd0eae --- /dev/null +++ b/topic_understanding_performance/lufactorization/index.html @@ -0,0 +1,665 @@ + + + + + + + + + + + + + Topic #4 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To analyze (mostly experimentally) the performance of an implementation + of the LU factorization algorithm and try to improve it. +

+ +

+ + +

+ + + +

+ This module uses the program developed in the LU Factorization module in Topic #3. You must + have completed that module to do this one. +

+ +

+ + + +

+ + To make the simulation results consistent regardless of your computer we first calibrate the simulation. + More specifically, we simulate a parallel platform in which each processor computes at a rate of 400Gflops. Since + SMPI measures compute times on your own machine, we need to tell SMPI how fast your machine is, which is + SMPI is done by passing a particular floating point value to + smpirun using the --cfg=smpi/running-power:VALUE command-line option. + +

+ +

+ A python script called calibrate_flops.py is provided, which you should run once + on your idle computer. This script performs a binary search to find the necessary calibration factor, which is printed + to the screen and should be passed to the --cfg=smpi/running-power command-line option. + Of course, if you change computer, you'll have to re-run the script to find a new calibration factor. + +

+ + +

+ + + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Quantify the load imbalance the implementation at large scale.
Activity #2: Improve the load imbalance.
Activity #3: Determine the impact of network communication on scalability.

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

+ +

In this activity we investigate whether the original implementation + achieves good load balance, i.e., do the processes have close to the same amounts of work to do. We wish + to do this investigation for large matrices, to better observe load balancing behaviors. + In steps #1 and #2 below we play "simulation tricks" to avoid + running too memory-intensive / cpu-intensive simulations. In step #3 we re-calibrate the simulation, and + in step #4 we run experiments to quantify load imbalance. +

+ + + + +

+ +

+ Experiments with large matrices are necessary to study scalability, but unfortunately these experiments are cpu-intensive, + whether on a real platform or in simulation. One advantage of simulation is that one can play tricks to reduce cpu expenses, essentially + by not performing actual computation. + This is something researchers often do in simulation and in this module you're doing it too. +

+ +

+ When SMPI encounters a basic block of computation in your program, it executes the block + and times it to generate the correct delay in simulation. If this + code takes 1 hour to run on your machine, then the simulation will then take at least 1 + hour. If you are simulating 100 processes each computing for 1 + hour, then the simulation will take 100 hours! This is because SMPI runs on a single core, running + MPI processes in round-robin fashion. This sounds bad, but SMPI provides several ways + to mitigate this problem. For instance, one can tell the simulator: + "Execute/time the code only the first time you encounter it". A more radical + option is to tell the simulator: "When you encounter this basic + block, don't run it at all. Instead, I am telling you how many flops it involves + and simply compute the delay by dividing this number of flops by the compute speed." + In both cases, the code no longer computes correct results. But the idea is that for + deterministic basic blocks, such as the computation and updates in columns in the LU factorization + implementation, the general performance behavior is preserved, + and a simple re-calibration will lead to sufficiently accurate simulation results (this has been shown in SMPI research papers and + by other researchers before SMPI even existed). +

+ +

+In this step we use the second option above, i.e., avoiding computation altogether. Consider the sample + basic block below: +

+ +

for (i=0; i < N; i++) {
+  sum = sum * 3.0 * x * y;
+}

+ +

+ +This loop performs O(N) floating point operations, and in your SMPI code you can replace it by: + +

+ +

  double flops = (double)N * (double)FLOP_CALIBRATION_FACTOR ;
+  SMPI_SAMPLE_FLOPS(flops) {
+    // for (i=0; i < N; i++) {
+    //   sum = sum * 3.0 * x * y;
+  }
+

+ +

+(note that the original code is simply commented-out without the SMPI_SAMPLE_FLOPS macro / basic block, which is +likely a good idea instead of simply deleting it. The FLOP_CALIBRATION_FACTOR constant +is the constant factor hidden in the O(N) asymptotic complexity. In step #3 we use calibration to determine +an appropriate value. + +

+Modify your program to do the above, for the basic block that computes the k-th column and + the basic block that updated the lower-right part of the matrix (i.e., the two computational + for loops in the sequential version of the code, which you have parallelized when completing + the LU Factorization module in Topic #3). At this point, +since your code doesn't compute anything useful, you can also comment out the part of the code that +initializes the matrices and checks the validity of the results (in fact you really want to comment out the latter +to avoid "invalid results" messages). For now use an arbitrary value for FLOP_CALIBRATION_FACTOR so +that you can compile and debug your program, and pay no attention to the simulated performance. +

+ + +

+ +

+ Besides cpu time, another limiting factor for scalable simulation is memory space. If + I want to use SMPI to simulate 100 processes that each uses 1GiB of heap space, + then I need a single machine with 100GiB of RAM! Again, this sounds bad, which is why + SMPI allows simulated processes to use the same heap allocations!! This leads to + nonsensical computation since processes overwrite each other's updates in the same + allocated memory zones. But, for deterministic application such as matrix multiply, + overall performance behavior is sufficiently preserved to lead to sufficiently accurate + simulation results (again, see SMPI research papers and those referenced therein). +

+ +

+ The above is straightforward with SMPI: +

Replace malloc by SMPI_SHARED_MALLOC;

Replace free by SMPI_SHARED_FREE.

+ +

+ Do the above in your program. You now have a program that computes + nothing useful at all, but still outputs a simulated wallclock time that research shows + is sufficiently accurate to draw meaningful conclusions for our purpose! + The point is that this program can be executed faster and for larger matrices. + We now have an interesting simulation performance trade-off. With a lot of processes, we can scale the memory up. + For instance, say the memory space needed for the (sequential) matrix multiplication is 100GiB. + You can’t run the simulation of this computation on your laptop. However, if you simulate a parallel + execution with 100 processes, the above memory trick makes it so that you only need 1GiB of RAM to run the simulation. + However, with a lot of processes, the time to simulate the broadcasts with large data sizes is large + (due to the sheer number of individual point-to-point messages). + So, some simulations will take too much space, and some simulations will take too much time. + Nevertheless, our CPU and memory simulation "tricks" significantly widens the range of simulation experiments + that can be done in practice. +

+ +

+ + +

+ +

+ One problem with our CPU trick is that the simulated wall-clock time will no longer be coherent with our simulation platform, i.e., it + no longer match with our --cfg=smpi/running-power command-line option since we use the + SMPI_SAMPLE_FLOPS macro. Instead, we need + to determine a reasonable value for FLOP_CALIBRATION_FACTOR. +

+ +

+ Run your original (i.e., without the "simulation tricks") program from the LU Factorization module in Topic #3, + using + cluster_1600.xml and + hostfile_1600.txt, for a matrix of size 2000x2000, with p=4 process. + Then empirically determine a value of FLOP_CALIBRATION_FACTOR + that leads to the same (or close) simulated elapsed time for your program with the "simulation tricks". + Doing a binary search on FLOP_CALIBRATION_FACTOR, via a script, is great of course, but you + can probably just do a quick trial-and-error manual search. Once you've found this value, hard-code it into your + program, and voila. +

+ + +

+ +

+ Now that your simulation is fully calibrated, augment your implementation (in lu.c) so that at the + end of the execution the program prints out the elapsed time as well as the percentage idle time. + The idle time corresponds to the column updates phase + (i.e., at a given iteration some processors will have fewer columns to update than others, and will thus remain idle + until all processors are ready to move on). As usual, it's a good idea to use MPI_Wtime to measure + time, and it's ok to add calls to MPI_Barrier to make it easier to measure idle time at + each process. The percentage idle time is computed as the sum of all the individual idle times (which you can + obtain using MPI_Reduce), divided by the product of the number of processes and the elapsed time. +

+ +

+ Run your code using + cluster_1600.xml and + hostfile_1600.txt, but + edit cluster_1600.xml to make the network very fast (zero latency, huge bandwidth). This + will allow us to take the network out of the equation for now. Run your code for a + 32000x32000 matrix with p = 1, 4, 8, 16, and 32 processes. On the same graph plot + the elapsed time and the percentage idle time (using two different left and right vertical axes). + +

+ +

+ In your README file describe what you observe. Is the idle time significant? Does the + performance scale well as the number of processors increase? Can you explain why that is given + what the implementation is doing? +

+ + +

+ +

In this activity we modify our implementation to improve + the load balancing, and re-run simulations to see the performance benefit. +

+ + + + +

+ +

+ + +

+ +

+ + +

+ In your README file describe what you observe. Does the cyclic distribution reduce + idle time significantly? +

+ + +

+ + + +

+ +

In this activity we see the effect of communication + on overall application performance. +

+ + + + +

+ +

+ Using your last implementation, i.e., the one that achieves good load balancing, run + your program for a 32000x32000 matrix, p = 1, 4, 8, 16, 32, 64, and 128 processes , using the original + cluster_1600.xml platform (with a non-ideal network). Plot the + parallel efficiency vs. the number of processors. In your README file describe what you observe. + What do you conclude in terms of the scalability of your application? Would you say there is work that remains + to be done? Any ideas? +

+ + +

+ + + + +

+ +

+ + + +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_understanding_performance/lufactorization/introduction.html b/topic_understanding_performance/lufactorization/introduction.html new file mode 100644 index 0000000..6d73683 --- /dev/null +++ b/topic_understanding_performance/lufactorization/introduction.html @@ -0,0 +1,72 @@ +

+ + + +

+ Objective: To analyze (mostly experimentally) the performance of an implementation + of the LU factorization algorithm and try to improve it. +

+ +

+ + +

+ + + +

+ This module uses the program developed in the LU Factorization module in Topic #3. You must + have completed that module to do this one. +

+ +

+ + + +

+ +

+ + +

+ + + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Quantify the load imbalance the implementation at large scale.
Activity #2: Improve the load imbalance.
Activity #3: Determine the impact of network communication on scalability.

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

diff --git a/topic_understanding_performance/lufactorization/load_imbalance.html b/topic_understanding_performance/lufactorization/load_imbalance.html new file mode 100644 index 0000000..387a106 --- /dev/null +++ b/topic_understanding_performance/lufactorization/load_imbalance.html @@ -0,0 +1,43 @@ +

+ + + + +

+ + {% include_relative simulation_tricks_cpu.html %} + +

+ + +

+ + {% include_relative simulation_tricks_mem.html %} + +

+ + +

+ + {% include_relative recalibration.html %} + +

+ + +

+ + {% include_relative load_imbalance_runs.html %} + +

+ diff --git a/topic_understanding_performance/lufactorization/load_imbalance_runs.html b/topic_understanding_performance/lufactorization/load_imbalance_runs.html new file mode 100644 index 0000000..f0fbdb4 --- /dev/null +++ b/topic_understanding_performance/lufactorization/load_imbalance_runs.html @@ -0,0 +1,27 @@ +

+ +

diff --git a/topic_understanding_performance/lufactorization/network_performance.html b/topic_understanding_performance/lufactorization/network_performance.html new file mode 100644 index 0000000..734dae0 --- /dev/null +++ b/topic_understanding_performance/lufactorization/network_performance.html @@ -0,0 +1,8 @@ +

diff --git a/topic_understanding_performance/lufactorization/recalibration.html b/topic_understanding_performance/lufactorization/recalibration.html new file mode 100644 index 0000000..e810d5f --- /dev/null +++ b/topic_understanding_performance/lufactorization/recalibration.html @@ -0,0 +1,18 @@ +

+ +

diff --git a/topic_understanding_performance/lufactorization/roundrobin.html b/topic_understanding_performance/lufactorization/roundrobin.html new file mode 100644 index 0000000..3646c57 --- /dev/null +++ b/topic_understanding_performance/lufactorization/roundrobin.html @@ -0,0 +1,24 @@ +

In this activity we modify our implementation to improve + the load balancing, and re-run simulations to see the performance benefit. +

+ + + + +

+ + {% include_relative cyclic_distribution.html %} + +

+ + +

+ + {% include_relative cyclic_runs.html %} + +

+ + diff --git a/topic_understanding_performance/lufactorization/scalability.html b/topic_understanding_performance/lufactorization/scalability.html new file mode 100644 index 0000000..7dd155b --- /dev/null +++ b/topic_understanding_performance/lufactorization/scalability.html @@ -0,0 +1,17 @@ +

In this activity we see the effect of communication + on overall application performance. +

+ + + + +

+ + {% include_relative network_performance.html %} + +

+ + + diff --git a/topic_understanding_performance/lufactorization/simulation_tricks_cpu.html b/topic_understanding_performance/lufactorization/simulation_tricks_cpu.html new file mode 100644 index 0000000..0c7a988 --- /dev/null +++ b/topic_understanding_performance/lufactorization/simulation_tricks_cpu.html @@ -0,0 +1,65 @@ +

+ +

+In this step we use the second option above, i.e., avoiding computation altogether. Consider the sample + basic block below: +

+ +

+{% highlight C %} +for (i=0; i < N; i++) { + sum = sum * 3.0 * x * y; +} +{% endhighlight %} +

+ +This loop performs O(N) floating point operations, and in your SMPI code you can replace it by: + +

+ {% highlight C %} + double flops = (double)N * (double)FLOP_CALIBRATION_FACTOR ; + SMPI_SAMPLE_FLOPS(flops) { + // for (i=0; i < N; i++) { + // sum = sum * 3.0 * x * y; + } + {% endhighlight %} +

diff --git a/topic_understanding_performance/lufactorization/simulation_tricks_mem.html b/topic_understanding_performance/lufactorization/simulation_tricks_mem.html new file mode 100644 index 0000000..29499fe --- /dev/null +++ b/topic_understanding_performance/lufactorization/simulation_tricks_mem.html @@ -0,0 +1,34 @@ +

+ +

+ The above is straightforward with SMPI: +

Replace malloc by SMPI_SHARED_MALLOC;

Replace free by SMPI_SHARED_FREE.

+ +

\ No newline at end of file diff --git a/topic_understanding_performance/matrixmultiplication/calibrate_flops.py b/topic_understanding_performance/matrixmultiplication/calibrate_flops.py new file mode 100755 index 0000000..a1d0ca6 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/calibrate_flops.py @@ -0,0 +1,163 @@ +#!/usr/bin/env python3 +import sys +import os +import subprocess +import math + + +########################################### +# Compile callibrating code +########################################### + +callibrating_C_code = """ +#include +#include +#include +#include +#include + +#ifndef SIZE +#define SIZE 2000 +#endif + +static void matmult(double *A, double *B, double *C, int n) { + int i,j,k; + + for (i=0; i < n; i++) { + for (k=0; k < n; k++) { + for (j=0; j < n; j++) { + C[i*n+j] = A[i*n+k] * B[k*n+j]; + } + } + } + return; +} + + +int main(int argc, char *argv[]) +{ + MPI_Init(&argc, &argv); + + int my_rank; + MPI_Comm_rank(MPI_COMM_WORLD,&my_rank); + + // Only process of rank 0 does something + double sum; + double start; + double elapsed; + + if (my_rank == 0) { + + // Allocate matrices + double *A = (double *)malloc(SIZE*SIZE*sizeof(double)); + double *B = (double *)malloc(SIZE*SIZE*sizeof(double)); + double *C = (double *)malloc(SIZE*SIZE*sizeof(double)); + + // Fill in matrix values + int i; + for (i=0; i < SIZE*SIZE; i++) { + A[i] = 2.0*i/(SIZE*SIZE); + B[i] = -1.0*i/(SIZE*SIZE); + C[i] = 0.0; + } + + // Multiply matrices + start = MPI_Wtime(); + matmult(A,B,C,SIZE); + + // Compute the sum (to avoid compiler optimization) + sum=0; + for (i=0; i < SIZE*SIZE; i++) { + sum += C[i]; + } + elapsed = MPI_Wtime() - start; + + } + MPI_Barrier(MPI_COMM_WORLD); + + if (my_rank == 0) { + // Print the wall-clock time and the sum + printf("%.5lf\\t%0.2lf\\n", elapsed, sum); + } + + // Clean-up + MPI_Finalize(); + + return 0; +} +""" + +SIZE=2000 + +callibrating_code_filename = "/tmp/callibrating_code.c" +fh = open(callibrating_code_filename, 'w') +fh.write(callibrating_C_code) +fh.close() +error_code = os.system("smpicc -Ofast "+"-DSIZE="+str(SIZE)+" "+callibrating_code_filename+" -o /tmp/callibration_code") +if (error_code != 0): + sys.stderr.write("Can't compile '"+callibrating_code_filename+"'... aborting\n") + exit(1) +sys.stderr.write("Callibrating code compiled\n") + + +########################################### +# Create XML platform file (one host) +########################################### +platform_filename = "/tmp/platform_one_host.xml" +fh = open(platform_filename, 'w') +fh.write("\n\n\n\n") +fh.write(" \n") +fh.write("\n\n") +fh.close() +sys.stderr.write("One-host XML platform file generated\n") + +########################################### +# Create host file (one host) +########################################### +hostfile_filename = "/tmp/hostfile_one_host" +fh = open(hostfile_filename, 'w') +fh.write("host-0\n") +fh.close() +sys.stderr.write("One-host hostfile generated\n") + +########################################### +# Binary search to find the running power +########################################### + +sys.stderr.write("Initiating binary search...\n") + +# Coarse approximation of the traget simulated time +desired_simulated_gflops_rate=200.0 +number_gflop = (3.0 * SIZE * SIZE * SIZE + SIZE * SIZE) / (1000000000.0) +target = number_gflop / desired_simulated_gflops_rate + +# Initial bounds for the binary search +low = 0 +high = 500000000000.0 + +while (True): + + attempt = (low + high) / 2 + + # Run the code + FNULL = open(os.devnull, 'w') + output = subprocess.check_output(["smpirun","--cfg=smpi/host-speed:"+str(attempt)+"f","-platform",platform_filename,"-hostfile",hostfile_filename,"-np","1","/tmp/callibration_code"],stderr = FNULL, encoding='UTF-8') + FNULL.close() + + # Get the wall-clock time + simulated_wallclock = float(output.split('\t')[0]) + + print("candidate value: "+str(("%.3f" % attempt))+"\t--> wallclock = "+str(("%.3f" % simulated_wallclock))+" (target ="+str(("%.3f" % target))+")") + + if (simulated_wallclock < target): + low = attempt + else: + high = attempt + + + if ((abs(simulated_wallclock - target) < 0.001) or (abs(high - low) < 100)): + break + +print("Run smpirun with --cfg=smpi/host-speed:"+str(("%.3f" % attempt))+"\n") +print(" (and run smpicc with -Ofast)\n") + diff --git a/topic_understanding_performance/matrixmultiplication/cluster_1600.xml b/topic_understanding_performance/matrixmultiplication/cluster_1600.xml new file mode 100644 index 0000000..18544e3 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/cluster_1600.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/topic_understanding_performance/matrixmultiplication/communication_share.html b/topic_understanding_performance/matrixmultiplication/communication_share.html new file mode 100644 index 0000000..93d376b --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/communication_share.html @@ -0,0 +1,14 @@ +

+Instrument your code so that at the end of execution, in addition to wallclock time, + it also reports the time spent in communication (which you measure via additional calls + to MPI_Wtime). Using p=16 processes, run experiments with the original (i.e., with + the original network) platform file for N = 8X for X ∈ {100,110,120,...,400}, with 5 trials per experiment. + This runs in about 10 minutes on the author's laptop. +

+ +

+On the same plot show the computation time and the communication time vs. the matrix size. + What do the trends look like? Do they make sense w.r.t. to some asymptotic models of + computation and communication volumes? + Is this good news or bad news for multiplying large matrices on our platform? +

\ No newline at end of file diff --git a/topic_understanding_performance/matrixmultiplication/conclusion.html b/topic_understanding_performance/matrixmultiplication/conclusion.html new file mode 100644 index 0000000..fa52433 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/conclusion.html @@ -0,0 +1,37 @@ +

+ + + +

+ Congratulations for making it this far. You have learned how to measure + the computation and the communication performance shares of a + message passing application, have learn how to look at performance results + and draw conclusions about the scalability of the application, and have + learned how to use simulation to run large-scale experiments without need for + a large-scale machine. +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

\ No newline at end of file diff --git a/topic_understanding_performance/matrixmultiplication/hostfile_1600.txt b/topic_understanding_performance/matrixmultiplication/hostfile_1600.txt new file mode 100644 index 0000000..f9a6bc1 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/hostfile_1600.txt @@ -0,0 +1,1600 @@ +host-0.hawaii.edu +host-1.hawaii.edu +host-2.hawaii.edu +host-3.hawaii.edu +host-4.hawaii.edu +host-5.hawaii.edu +host-6.hawaii.edu +host-7.hawaii.edu +host-8.hawaii.edu +host-9.hawaii.edu +host-10.hawaii.edu +host-11.hawaii.edu +host-12.hawaii.edu +host-13.hawaii.edu +host-14.hawaii.edu +host-15.hawaii.edu +host-16.hawaii.edu +host-17.hawaii.edu +host-18.hawaii.edu +host-19.hawaii.edu +host-20.hawaii.edu +host-21.hawaii.edu +host-22.hawaii.edu +host-23.hawaii.edu +host-24.hawaii.edu +host-25.hawaii.edu +host-26.hawaii.edu +host-27.hawaii.edu +host-28.hawaii.edu +host-29.hawaii.edu +host-30.hawaii.edu +host-31.hawaii.edu +host-32.hawaii.edu +host-33.hawaii.edu +host-34.hawaii.edu +host-35.hawaii.edu +host-36.hawaii.edu +host-37.hawaii.edu +host-38.hawaii.edu +host-39.hawaii.edu +host-40.hawaii.edu +host-41.hawaii.edu +host-42.hawaii.edu +host-43.hawaii.edu +host-44.hawaii.edu +host-45.hawaii.edu +host-46.hawaii.edu +host-47.hawaii.edu +host-48.hawaii.edu +host-49.hawaii.edu +host-50.hawaii.edu +host-51.hawaii.edu +host-52.hawaii.edu +host-53.hawaii.edu +host-54.hawaii.edu +host-55.hawaii.edu +host-56.hawaii.edu +host-57.hawaii.edu +host-58.hawaii.edu +host-59.hawaii.edu +host-60.hawaii.edu +host-61.hawaii.edu +host-62.hawaii.edu +host-63.hawaii.edu +host-64.hawaii.edu +host-65.hawaii.edu +host-66.hawaii.edu +host-67.hawaii.edu +host-68.hawaii.edu +host-69.hawaii.edu +host-70.hawaii.edu +host-71.hawaii.edu +host-72.hawaii.edu +host-73.hawaii.edu +host-74.hawaii.edu +host-75.hawaii.edu +host-76.hawaii.edu +host-77.hawaii.edu +host-78.hawaii.edu +host-79.hawaii.edu +host-80.hawaii.edu +host-81.hawaii.edu +host-82.hawaii.edu +host-83.hawaii.edu +host-84.hawaii.edu +host-85.hawaii.edu +host-86.hawaii.edu +host-87.hawaii.edu +host-88.hawaii.edu +host-89.hawaii.edu +host-90.hawaii.edu +host-91.hawaii.edu +host-92.hawaii.edu +host-93.hawaii.edu +host-94.hawaii.edu +host-95.hawaii.edu +host-96.hawaii.edu +host-97.hawaii.edu +host-98.hawaii.edu +host-99.hawaii.edu +host-100.hawaii.edu +host-101.hawaii.edu +host-102.hawaii.edu +host-103.hawaii.edu +host-104.hawaii.edu +host-105.hawaii.edu +host-106.hawaii.edu +host-107.hawaii.edu +host-108.hawaii.edu +host-109.hawaii.edu +host-110.hawaii.edu +host-111.hawaii.edu +host-112.hawaii.edu +host-113.hawaii.edu +host-114.hawaii.edu +host-115.hawaii.edu +host-116.hawaii.edu +host-117.hawaii.edu +host-118.hawaii.edu +host-119.hawaii.edu +host-120.hawaii.edu +host-121.hawaii.edu +host-122.hawaii.edu +host-123.hawaii.edu +host-124.hawaii.edu +host-125.hawaii.edu +host-126.hawaii.edu +host-127.hawaii.edu +host-128.hawaii.edu +host-129.hawaii.edu +host-130.hawaii.edu +host-131.hawaii.edu +host-132.hawaii.edu +host-133.hawaii.edu +host-134.hawaii.edu +host-135.hawaii.edu +host-136.hawaii.edu +host-137.hawaii.edu +host-138.hawaii.edu +host-139.hawaii.edu +host-140.hawaii.edu +host-141.hawaii.edu +host-142.hawaii.edu +host-143.hawaii.edu +host-144.hawaii.edu +host-145.hawaii.edu +host-146.hawaii.edu +host-147.hawaii.edu +host-148.hawaii.edu +host-149.hawaii.edu +host-150.hawaii.edu +host-151.hawaii.edu +host-152.hawaii.edu +host-153.hawaii.edu +host-154.hawaii.edu +host-155.hawaii.edu +host-156.hawaii.edu +host-157.hawaii.edu +host-158.hawaii.edu +host-159.hawaii.edu +host-160.hawaii.edu +host-161.hawaii.edu +host-162.hawaii.edu +host-163.hawaii.edu +host-164.hawaii.edu +host-165.hawaii.edu +host-166.hawaii.edu +host-167.hawaii.edu +host-168.hawaii.edu +host-169.hawaii.edu +host-170.hawaii.edu +host-171.hawaii.edu +host-172.hawaii.edu +host-173.hawaii.edu +host-174.hawaii.edu +host-175.hawaii.edu +host-176.hawaii.edu +host-177.hawaii.edu +host-178.hawaii.edu +host-179.hawaii.edu +host-180.hawaii.edu +host-181.hawaii.edu +host-182.hawaii.edu +host-183.hawaii.edu +host-184.hawaii.edu +host-185.hawaii.edu +host-186.hawaii.edu +host-187.hawaii.edu +host-188.hawaii.edu +host-189.hawaii.edu +host-190.hawaii.edu +host-191.hawaii.edu +host-192.hawaii.edu +host-193.hawaii.edu +host-194.hawaii.edu +host-195.hawaii.edu +host-196.hawaii.edu +host-197.hawaii.edu +host-198.hawaii.edu +host-199.hawaii.edu +host-200.hawaii.edu +host-201.hawaii.edu +host-202.hawaii.edu +host-203.hawaii.edu +host-204.hawaii.edu +host-205.hawaii.edu +host-206.hawaii.edu +host-207.hawaii.edu +host-208.hawaii.edu +host-209.hawaii.edu +host-210.hawaii.edu +host-211.hawaii.edu +host-212.hawaii.edu +host-213.hawaii.edu +host-214.hawaii.edu +host-215.hawaii.edu +host-216.hawaii.edu +host-217.hawaii.edu +host-218.hawaii.edu +host-219.hawaii.edu +host-220.hawaii.edu +host-221.hawaii.edu +host-222.hawaii.edu +host-223.hawaii.edu +host-224.hawaii.edu +host-225.hawaii.edu +host-226.hawaii.edu +host-227.hawaii.edu +host-228.hawaii.edu +host-229.hawaii.edu +host-230.hawaii.edu +host-231.hawaii.edu +host-232.hawaii.edu +host-233.hawaii.edu +host-234.hawaii.edu +host-235.hawaii.edu +host-236.hawaii.edu +host-237.hawaii.edu +host-238.hawaii.edu +host-239.hawaii.edu +host-240.hawaii.edu +host-241.hawaii.edu +host-242.hawaii.edu +host-243.hawaii.edu +host-244.hawaii.edu +host-245.hawaii.edu +host-246.hawaii.edu +host-247.hawaii.edu +host-248.hawaii.edu +host-249.hawaii.edu +host-250.hawaii.edu +host-251.hawaii.edu +host-252.hawaii.edu +host-253.hawaii.edu +host-254.hawaii.edu +host-255.hawaii.edu +host-256.hawaii.edu +host-257.hawaii.edu +host-258.hawaii.edu +host-259.hawaii.edu +host-260.hawaii.edu +host-261.hawaii.edu +host-262.hawaii.edu +host-263.hawaii.edu +host-264.hawaii.edu +host-265.hawaii.edu +host-266.hawaii.edu +host-267.hawaii.edu +host-268.hawaii.edu +host-269.hawaii.edu +host-270.hawaii.edu +host-271.hawaii.edu +host-272.hawaii.edu +host-273.hawaii.edu +host-274.hawaii.edu +host-275.hawaii.edu +host-276.hawaii.edu +host-277.hawaii.edu +host-278.hawaii.edu +host-279.hawaii.edu +host-280.hawaii.edu +host-281.hawaii.edu +host-282.hawaii.edu +host-283.hawaii.edu +host-284.hawaii.edu +host-285.hawaii.edu +host-286.hawaii.edu +host-287.hawaii.edu +host-288.hawaii.edu +host-289.hawaii.edu +host-290.hawaii.edu +host-291.hawaii.edu +host-292.hawaii.edu +host-293.hawaii.edu +host-294.hawaii.edu +host-295.hawaii.edu +host-296.hawaii.edu +host-297.hawaii.edu +host-298.hawaii.edu +host-299.hawaii.edu +host-300.hawaii.edu +host-301.hawaii.edu +host-302.hawaii.edu +host-303.hawaii.edu +host-304.hawaii.edu +host-305.hawaii.edu +host-306.hawaii.edu +host-307.hawaii.edu +host-308.hawaii.edu +host-309.hawaii.edu +host-310.hawaii.edu +host-311.hawaii.edu +host-312.hawaii.edu +host-313.hawaii.edu +host-314.hawaii.edu +host-315.hawaii.edu +host-316.hawaii.edu +host-317.hawaii.edu +host-318.hawaii.edu +host-319.hawaii.edu +host-320.hawaii.edu +host-321.hawaii.edu +host-322.hawaii.edu +host-323.hawaii.edu +host-324.hawaii.edu +host-325.hawaii.edu +host-326.hawaii.edu +host-327.hawaii.edu +host-328.hawaii.edu +host-329.hawaii.edu +host-330.hawaii.edu +host-331.hawaii.edu +host-332.hawaii.edu +host-333.hawaii.edu +host-334.hawaii.edu +host-335.hawaii.edu +host-336.hawaii.edu +host-337.hawaii.edu +host-338.hawaii.edu +host-339.hawaii.edu +host-340.hawaii.edu +host-341.hawaii.edu +host-342.hawaii.edu +host-343.hawaii.edu +host-344.hawaii.edu +host-345.hawaii.edu +host-346.hawaii.edu +host-347.hawaii.edu +host-348.hawaii.edu +host-349.hawaii.edu +host-350.hawaii.edu +host-351.hawaii.edu +host-352.hawaii.edu +host-353.hawaii.edu +host-354.hawaii.edu +host-355.hawaii.edu +host-356.hawaii.edu +host-357.hawaii.edu +host-358.hawaii.edu +host-359.hawaii.edu +host-360.hawaii.edu +host-361.hawaii.edu +host-362.hawaii.edu +host-363.hawaii.edu +host-364.hawaii.edu +host-365.hawaii.edu +host-366.hawaii.edu +host-367.hawaii.edu +host-368.hawaii.edu +host-369.hawaii.edu +host-370.hawaii.edu +host-371.hawaii.edu +host-372.hawaii.edu +host-373.hawaii.edu +host-374.hawaii.edu +host-375.hawaii.edu +host-376.hawaii.edu +host-377.hawaii.edu +host-378.hawaii.edu +host-379.hawaii.edu +host-380.hawaii.edu +host-381.hawaii.edu +host-382.hawaii.edu +host-383.hawaii.edu +host-384.hawaii.edu +host-385.hawaii.edu +host-386.hawaii.edu +host-387.hawaii.edu +host-388.hawaii.edu +host-389.hawaii.edu +host-390.hawaii.edu +host-391.hawaii.edu +host-392.hawaii.edu +host-393.hawaii.edu +host-394.hawaii.edu +host-395.hawaii.edu +host-396.hawaii.edu +host-397.hawaii.edu +host-398.hawaii.edu +host-399.hawaii.edu +host-400.hawaii.edu +host-401.hawaii.edu +host-402.hawaii.edu +host-403.hawaii.edu +host-404.hawaii.edu +host-405.hawaii.edu +host-406.hawaii.edu +host-407.hawaii.edu +host-408.hawaii.edu +host-409.hawaii.edu +host-410.hawaii.edu +host-411.hawaii.edu +host-412.hawaii.edu +host-413.hawaii.edu +host-414.hawaii.edu +host-415.hawaii.edu +host-416.hawaii.edu +host-417.hawaii.edu +host-418.hawaii.edu +host-419.hawaii.edu +host-420.hawaii.edu +host-421.hawaii.edu +host-422.hawaii.edu +host-423.hawaii.edu +host-424.hawaii.edu +host-425.hawaii.edu +host-426.hawaii.edu +host-427.hawaii.edu +host-428.hawaii.edu +host-429.hawaii.edu +host-430.hawaii.edu +host-431.hawaii.edu +host-432.hawaii.edu +host-433.hawaii.edu +host-434.hawaii.edu +host-435.hawaii.edu +host-436.hawaii.edu +host-437.hawaii.edu +host-438.hawaii.edu +host-439.hawaii.edu +host-440.hawaii.edu +host-441.hawaii.edu +host-442.hawaii.edu +host-443.hawaii.edu +host-444.hawaii.edu +host-445.hawaii.edu +host-446.hawaii.edu +host-447.hawaii.edu +host-448.hawaii.edu +host-449.hawaii.edu +host-450.hawaii.edu +host-451.hawaii.edu +host-452.hawaii.edu +host-453.hawaii.edu +host-454.hawaii.edu +host-455.hawaii.edu +host-456.hawaii.edu +host-457.hawaii.edu +host-458.hawaii.edu +host-459.hawaii.edu +host-460.hawaii.edu +host-461.hawaii.edu +host-462.hawaii.edu +host-463.hawaii.edu +host-464.hawaii.edu +host-465.hawaii.edu +host-466.hawaii.edu +host-467.hawaii.edu +host-468.hawaii.edu +host-469.hawaii.edu +host-470.hawaii.edu +host-471.hawaii.edu +host-472.hawaii.edu +host-473.hawaii.edu +host-474.hawaii.edu +host-475.hawaii.edu +host-476.hawaii.edu +host-477.hawaii.edu +host-478.hawaii.edu +host-479.hawaii.edu +host-480.hawaii.edu +host-481.hawaii.edu +host-482.hawaii.edu +host-483.hawaii.edu +host-484.hawaii.edu +host-485.hawaii.edu +host-486.hawaii.edu +host-487.hawaii.edu +host-488.hawaii.edu +host-489.hawaii.edu +host-490.hawaii.edu +host-491.hawaii.edu +host-492.hawaii.edu +host-493.hawaii.edu +host-494.hawaii.edu +host-495.hawaii.edu +host-496.hawaii.edu +host-497.hawaii.edu +host-498.hawaii.edu +host-499.hawaii.edu +host-500.hawaii.edu +host-501.hawaii.edu +host-502.hawaii.edu +host-503.hawaii.edu +host-504.hawaii.edu +host-505.hawaii.edu +host-506.hawaii.edu +host-507.hawaii.edu +host-508.hawaii.edu +host-509.hawaii.edu +host-510.hawaii.edu +host-511.hawaii.edu +host-512.hawaii.edu +host-513.hawaii.edu +host-514.hawaii.edu +host-515.hawaii.edu +host-516.hawaii.edu +host-517.hawaii.edu +host-518.hawaii.edu +host-519.hawaii.edu +host-520.hawaii.edu +host-521.hawaii.edu +host-522.hawaii.edu +host-523.hawaii.edu +host-524.hawaii.edu +host-525.hawaii.edu +host-526.hawaii.edu +host-527.hawaii.edu +host-528.hawaii.edu +host-529.hawaii.edu +host-530.hawaii.edu +host-531.hawaii.edu +host-532.hawaii.edu +host-533.hawaii.edu +host-534.hawaii.edu +host-535.hawaii.edu +host-536.hawaii.edu +host-537.hawaii.edu +host-538.hawaii.edu +host-539.hawaii.edu +host-540.hawaii.edu +host-541.hawaii.edu +host-542.hawaii.edu +host-543.hawaii.edu +host-544.hawaii.edu +host-545.hawaii.edu +host-546.hawaii.edu +host-547.hawaii.edu +host-548.hawaii.edu +host-549.hawaii.edu +host-550.hawaii.edu +host-551.hawaii.edu +host-552.hawaii.edu +host-553.hawaii.edu +host-554.hawaii.edu +host-555.hawaii.edu +host-556.hawaii.edu +host-557.hawaii.edu +host-558.hawaii.edu +host-559.hawaii.edu +host-560.hawaii.edu +host-561.hawaii.edu +host-562.hawaii.edu +host-563.hawaii.edu +host-564.hawaii.edu +host-565.hawaii.edu +host-566.hawaii.edu +host-567.hawaii.edu +host-568.hawaii.edu +host-569.hawaii.edu +host-570.hawaii.edu +host-571.hawaii.edu +host-572.hawaii.edu +host-573.hawaii.edu +host-574.hawaii.edu +host-575.hawaii.edu +host-576.hawaii.edu +host-577.hawaii.edu +host-578.hawaii.edu +host-579.hawaii.edu +host-580.hawaii.edu +host-581.hawaii.edu +host-582.hawaii.edu +host-583.hawaii.edu +host-584.hawaii.edu +host-585.hawaii.edu +host-586.hawaii.edu +host-587.hawaii.edu +host-588.hawaii.edu +host-589.hawaii.edu +host-590.hawaii.edu +host-591.hawaii.edu +host-592.hawaii.edu +host-593.hawaii.edu +host-594.hawaii.edu +host-595.hawaii.edu +host-596.hawaii.edu +host-597.hawaii.edu +host-598.hawaii.edu +host-599.hawaii.edu +host-600.hawaii.edu +host-601.hawaii.edu +host-602.hawaii.edu +host-603.hawaii.edu +host-604.hawaii.edu +host-605.hawaii.edu +host-606.hawaii.edu +host-607.hawaii.edu +host-608.hawaii.edu +host-609.hawaii.edu +host-610.hawaii.edu +host-611.hawaii.edu +host-612.hawaii.edu +host-613.hawaii.edu +host-614.hawaii.edu +host-615.hawaii.edu +host-616.hawaii.edu +host-617.hawaii.edu +host-618.hawaii.edu +host-619.hawaii.edu +host-620.hawaii.edu +host-621.hawaii.edu +host-622.hawaii.edu +host-623.hawaii.edu +host-624.hawaii.edu +host-625.hawaii.edu +host-626.hawaii.edu +host-627.hawaii.edu +host-628.hawaii.edu +host-629.hawaii.edu +host-630.hawaii.edu +host-631.hawaii.edu +host-632.hawaii.edu +host-633.hawaii.edu +host-634.hawaii.edu +host-635.hawaii.edu +host-636.hawaii.edu +host-637.hawaii.edu +host-638.hawaii.edu +host-639.hawaii.edu +host-640.hawaii.edu +host-641.hawaii.edu +host-642.hawaii.edu +host-643.hawaii.edu +host-644.hawaii.edu +host-645.hawaii.edu +host-646.hawaii.edu +host-647.hawaii.edu +host-648.hawaii.edu +host-649.hawaii.edu +host-650.hawaii.edu +host-651.hawaii.edu +host-652.hawaii.edu +host-653.hawaii.edu +host-654.hawaii.edu +host-655.hawaii.edu +host-656.hawaii.edu +host-657.hawaii.edu +host-658.hawaii.edu +host-659.hawaii.edu +host-660.hawaii.edu +host-661.hawaii.edu +host-662.hawaii.edu +host-663.hawaii.edu +host-664.hawaii.edu +host-665.hawaii.edu +host-666.hawaii.edu +host-667.hawaii.edu +host-668.hawaii.edu +host-669.hawaii.edu +host-670.hawaii.edu +host-671.hawaii.edu +host-672.hawaii.edu +host-673.hawaii.edu +host-674.hawaii.edu +host-675.hawaii.edu +host-676.hawaii.edu +host-677.hawaii.edu +host-678.hawaii.edu +host-679.hawaii.edu +host-680.hawaii.edu +host-681.hawaii.edu +host-682.hawaii.edu +host-683.hawaii.edu +host-684.hawaii.edu +host-685.hawaii.edu +host-686.hawaii.edu +host-687.hawaii.edu +host-688.hawaii.edu +host-689.hawaii.edu +host-690.hawaii.edu +host-691.hawaii.edu +host-692.hawaii.edu +host-693.hawaii.edu +host-694.hawaii.edu +host-695.hawaii.edu +host-696.hawaii.edu +host-697.hawaii.edu +host-698.hawaii.edu +host-699.hawaii.edu +host-700.hawaii.edu +host-701.hawaii.edu +host-702.hawaii.edu +host-703.hawaii.edu +host-704.hawaii.edu +host-705.hawaii.edu +host-706.hawaii.edu +host-707.hawaii.edu +host-708.hawaii.edu +host-709.hawaii.edu +host-710.hawaii.edu +host-711.hawaii.edu +host-712.hawaii.edu +host-713.hawaii.edu +host-714.hawaii.edu +host-715.hawaii.edu +host-716.hawaii.edu +host-717.hawaii.edu +host-718.hawaii.edu +host-719.hawaii.edu +host-720.hawaii.edu +host-721.hawaii.edu +host-722.hawaii.edu +host-723.hawaii.edu +host-724.hawaii.edu +host-725.hawaii.edu +host-726.hawaii.edu +host-727.hawaii.edu +host-728.hawaii.edu +host-729.hawaii.edu +host-730.hawaii.edu +host-731.hawaii.edu +host-732.hawaii.edu +host-733.hawaii.edu +host-734.hawaii.edu +host-735.hawaii.edu +host-736.hawaii.edu +host-737.hawaii.edu +host-738.hawaii.edu +host-739.hawaii.edu +host-740.hawaii.edu +host-741.hawaii.edu +host-742.hawaii.edu +host-743.hawaii.edu +host-744.hawaii.edu +host-745.hawaii.edu +host-746.hawaii.edu +host-747.hawaii.edu +host-748.hawaii.edu +host-749.hawaii.edu +host-750.hawaii.edu +host-751.hawaii.edu +host-752.hawaii.edu +host-753.hawaii.edu +host-754.hawaii.edu +host-755.hawaii.edu +host-756.hawaii.edu +host-757.hawaii.edu +host-758.hawaii.edu +host-759.hawaii.edu +host-760.hawaii.edu +host-761.hawaii.edu +host-762.hawaii.edu +host-763.hawaii.edu +host-764.hawaii.edu +host-765.hawaii.edu +host-766.hawaii.edu +host-767.hawaii.edu +host-768.hawaii.edu +host-769.hawaii.edu +host-770.hawaii.edu +host-771.hawaii.edu +host-772.hawaii.edu +host-773.hawaii.edu +host-774.hawaii.edu +host-775.hawaii.edu +host-776.hawaii.edu +host-777.hawaii.edu +host-778.hawaii.edu +host-779.hawaii.edu +host-780.hawaii.edu +host-781.hawaii.edu +host-782.hawaii.edu +host-783.hawaii.edu +host-784.hawaii.edu +host-785.hawaii.edu +host-786.hawaii.edu +host-787.hawaii.edu +host-788.hawaii.edu +host-789.hawaii.edu +host-790.hawaii.edu +host-791.hawaii.edu +host-792.hawaii.edu +host-793.hawaii.edu +host-794.hawaii.edu +host-795.hawaii.edu +host-796.hawaii.edu +host-797.hawaii.edu +host-798.hawaii.edu +host-799.hawaii.edu +host-800.hawaii.edu +host-801.hawaii.edu +host-802.hawaii.edu +host-803.hawaii.edu +host-804.hawaii.edu +host-805.hawaii.edu +host-806.hawaii.edu +host-807.hawaii.edu +host-808.hawaii.edu +host-809.hawaii.edu +host-810.hawaii.edu +host-811.hawaii.edu +host-812.hawaii.edu +host-813.hawaii.edu +host-814.hawaii.edu +host-815.hawaii.edu +host-816.hawaii.edu +host-817.hawaii.edu +host-818.hawaii.edu +host-819.hawaii.edu +host-820.hawaii.edu +host-821.hawaii.edu +host-822.hawaii.edu +host-823.hawaii.edu +host-824.hawaii.edu +host-825.hawaii.edu +host-826.hawaii.edu +host-827.hawaii.edu +host-828.hawaii.edu +host-829.hawaii.edu +host-830.hawaii.edu +host-831.hawaii.edu +host-832.hawaii.edu +host-833.hawaii.edu +host-834.hawaii.edu +host-835.hawaii.edu +host-836.hawaii.edu +host-837.hawaii.edu +host-838.hawaii.edu +host-839.hawaii.edu +host-840.hawaii.edu +host-841.hawaii.edu +host-842.hawaii.edu +host-843.hawaii.edu +host-844.hawaii.edu +host-845.hawaii.edu +host-846.hawaii.edu +host-847.hawaii.edu +host-848.hawaii.edu +host-849.hawaii.edu +host-850.hawaii.edu +host-851.hawaii.edu +host-852.hawaii.edu +host-853.hawaii.edu +host-854.hawaii.edu +host-855.hawaii.edu +host-856.hawaii.edu +host-857.hawaii.edu +host-858.hawaii.edu +host-859.hawaii.edu +host-860.hawaii.edu +host-861.hawaii.edu +host-862.hawaii.edu +host-863.hawaii.edu +host-864.hawaii.edu +host-865.hawaii.edu +host-866.hawaii.edu +host-867.hawaii.edu +host-868.hawaii.edu +host-869.hawaii.edu +host-870.hawaii.edu +host-871.hawaii.edu +host-872.hawaii.edu +host-873.hawaii.edu +host-874.hawaii.edu +host-875.hawaii.edu +host-876.hawaii.edu +host-877.hawaii.edu +host-878.hawaii.edu +host-879.hawaii.edu +host-880.hawaii.edu +host-881.hawaii.edu +host-882.hawaii.edu +host-883.hawaii.edu +host-884.hawaii.edu +host-885.hawaii.edu +host-886.hawaii.edu +host-887.hawaii.edu +host-888.hawaii.edu +host-889.hawaii.edu +host-890.hawaii.edu +host-891.hawaii.edu +host-892.hawaii.edu +host-893.hawaii.edu +host-894.hawaii.edu +host-895.hawaii.edu +host-896.hawaii.edu +host-897.hawaii.edu +host-898.hawaii.edu +host-899.hawaii.edu +host-900.hawaii.edu +host-901.hawaii.edu +host-902.hawaii.edu +host-903.hawaii.edu +host-904.hawaii.edu +host-905.hawaii.edu +host-906.hawaii.edu +host-907.hawaii.edu +host-908.hawaii.edu +host-909.hawaii.edu +host-910.hawaii.edu +host-911.hawaii.edu +host-912.hawaii.edu +host-913.hawaii.edu +host-914.hawaii.edu +host-915.hawaii.edu +host-916.hawaii.edu +host-917.hawaii.edu +host-918.hawaii.edu +host-919.hawaii.edu +host-920.hawaii.edu +host-921.hawaii.edu +host-922.hawaii.edu +host-923.hawaii.edu +host-924.hawaii.edu +host-925.hawaii.edu +host-926.hawaii.edu +host-927.hawaii.edu +host-928.hawaii.edu +host-929.hawaii.edu +host-930.hawaii.edu +host-931.hawaii.edu +host-932.hawaii.edu +host-933.hawaii.edu +host-934.hawaii.edu +host-935.hawaii.edu +host-936.hawaii.edu +host-937.hawaii.edu +host-938.hawaii.edu +host-939.hawaii.edu +host-940.hawaii.edu +host-941.hawaii.edu +host-942.hawaii.edu +host-943.hawaii.edu +host-944.hawaii.edu +host-945.hawaii.edu +host-946.hawaii.edu +host-947.hawaii.edu +host-948.hawaii.edu +host-949.hawaii.edu +host-950.hawaii.edu +host-951.hawaii.edu +host-952.hawaii.edu +host-953.hawaii.edu +host-954.hawaii.edu +host-955.hawaii.edu +host-956.hawaii.edu +host-957.hawaii.edu +host-958.hawaii.edu +host-959.hawaii.edu +host-960.hawaii.edu +host-961.hawaii.edu +host-962.hawaii.edu +host-963.hawaii.edu +host-964.hawaii.edu +host-965.hawaii.edu +host-966.hawaii.edu +host-967.hawaii.edu +host-968.hawaii.edu +host-969.hawaii.edu +host-970.hawaii.edu +host-971.hawaii.edu +host-972.hawaii.edu +host-973.hawaii.edu +host-974.hawaii.edu +host-975.hawaii.edu +host-976.hawaii.edu +host-977.hawaii.edu +host-978.hawaii.edu +host-979.hawaii.edu +host-980.hawaii.edu +host-981.hawaii.edu +host-982.hawaii.edu +host-983.hawaii.edu +host-984.hawaii.edu +host-985.hawaii.edu +host-986.hawaii.edu +host-987.hawaii.edu +host-988.hawaii.edu +host-989.hawaii.edu +host-990.hawaii.edu +host-991.hawaii.edu +host-992.hawaii.edu +host-993.hawaii.edu +host-994.hawaii.edu +host-995.hawaii.edu +host-996.hawaii.edu +host-997.hawaii.edu +host-998.hawaii.edu +host-999.hawaii.edu +host-1000.hawaii.edu +host-1001.hawaii.edu +host-1002.hawaii.edu +host-1003.hawaii.edu +host-1004.hawaii.edu +host-1005.hawaii.edu +host-1006.hawaii.edu +host-1007.hawaii.edu +host-1008.hawaii.edu +host-1009.hawaii.edu +host-1010.hawaii.edu +host-1011.hawaii.edu +host-1012.hawaii.edu +host-1013.hawaii.edu +host-1014.hawaii.edu +host-1015.hawaii.edu +host-1016.hawaii.edu +host-1017.hawaii.edu +host-1018.hawaii.edu +host-1019.hawaii.edu +host-1020.hawaii.edu +host-1021.hawaii.edu +host-1022.hawaii.edu +host-1023.hawaii.edu +host-1024.hawaii.edu +host-1025.hawaii.edu +host-1026.hawaii.edu +host-1027.hawaii.edu +host-1028.hawaii.edu +host-1029.hawaii.edu +host-1030.hawaii.edu +host-1031.hawaii.edu +host-1032.hawaii.edu +host-1033.hawaii.edu +host-1034.hawaii.edu +host-1035.hawaii.edu +host-1036.hawaii.edu +host-1037.hawaii.edu +host-1038.hawaii.edu +host-1039.hawaii.edu +host-1040.hawaii.edu +host-1041.hawaii.edu +host-1042.hawaii.edu +host-1043.hawaii.edu +host-1044.hawaii.edu +host-1045.hawaii.edu +host-1046.hawaii.edu +host-1047.hawaii.edu +host-1048.hawaii.edu +host-1049.hawaii.edu +host-1050.hawaii.edu +host-1051.hawaii.edu +host-1052.hawaii.edu +host-1053.hawaii.edu +host-1054.hawaii.edu +host-1055.hawaii.edu +host-1056.hawaii.edu +host-1057.hawaii.edu +host-1058.hawaii.edu +host-1059.hawaii.edu +host-1060.hawaii.edu +host-1061.hawaii.edu +host-1062.hawaii.edu +host-1063.hawaii.edu +host-1064.hawaii.edu +host-1065.hawaii.edu +host-1066.hawaii.edu +host-1067.hawaii.edu +host-1068.hawaii.edu +host-1069.hawaii.edu +host-1070.hawaii.edu +host-1071.hawaii.edu +host-1072.hawaii.edu +host-1073.hawaii.edu +host-1074.hawaii.edu +host-1075.hawaii.edu +host-1076.hawaii.edu +host-1077.hawaii.edu +host-1078.hawaii.edu +host-1079.hawaii.edu +host-1080.hawaii.edu +host-1081.hawaii.edu +host-1082.hawaii.edu +host-1083.hawaii.edu +host-1084.hawaii.edu +host-1085.hawaii.edu +host-1086.hawaii.edu +host-1087.hawaii.edu +host-1088.hawaii.edu +host-1089.hawaii.edu +host-1090.hawaii.edu +host-1091.hawaii.edu +host-1092.hawaii.edu +host-1093.hawaii.edu +host-1094.hawaii.edu +host-1095.hawaii.edu +host-1096.hawaii.edu +host-1097.hawaii.edu +host-1098.hawaii.edu +host-1099.hawaii.edu +host-1100.hawaii.edu +host-1101.hawaii.edu +host-1102.hawaii.edu +host-1103.hawaii.edu +host-1104.hawaii.edu +host-1105.hawaii.edu +host-1106.hawaii.edu +host-1107.hawaii.edu +host-1108.hawaii.edu +host-1109.hawaii.edu +host-1110.hawaii.edu +host-1111.hawaii.edu +host-1112.hawaii.edu +host-1113.hawaii.edu +host-1114.hawaii.edu +host-1115.hawaii.edu +host-1116.hawaii.edu +host-1117.hawaii.edu +host-1118.hawaii.edu +host-1119.hawaii.edu +host-1120.hawaii.edu +host-1121.hawaii.edu +host-1122.hawaii.edu +host-1123.hawaii.edu +host-1124.hawaii.edu +host-1125.hawaii.edu +host-1126.hawaii.edu +host-1127.hawaii.edu +host-1128.hawaii.edu +host-1129.hawaii.edu +host-1130.hawaii.edu +host-1131.hawaii.edu +host-1132.hawaii.edu +host-1133.hawaii.edu +host-1134.hawaii.edu +host-1135.hawaii.edu +host-1136.hawaii.edu +host-1137.hawaii.edu +host-1138.hawaii.edu +host-1139.hawaii.edu +host-1140.hawaii.edu +host-1141.hawaii.edu +host-1142.hawaii.edu +host-1143.hawaii.edu +host-1144.hawaii.edu +host-1145.hawaii.edu +host-1146.hawaii.edu +host-1147.hawaii.edu +host-1148.hawaii.edu +host-1149.hawaii.edu +host-1150.hawaii.edu +host-1151.hawaii.edu +host-1152.hawaii.edu +host-1153.hawaii.edu +host-1154.hawaii.edu +host-1155.hawaii.edu +host-1156.hawaii.edu +host-1157.hawaii.edu +host-1158.hawaii.edu +host-1159.hawaii.edu +host-1160.hawaii.edu +host-1161.hawaii.edu +host-1162.hawaii.edu +host-1163.hawaii.edu +host-1164.hawaii.edu +host-1165.hawaii.edu +host-1166.hawaii.edu +host-1167.hawaii.edu +host-1168.hawaii.edu +host-1169.hawaii.edu +host-1170.hawaii.edu +host-1171.hawaii.edu +host-1172.hawaii.edu +host-1173.hawaii.edu +host-1174.hawaii.edu +host-1175.hawaii.edu +host-1176.hawaii.edu +host-1177.hawaii.edu +host-1178.hawaii.edu +host-1179.hawaii.edu +host-1180.hawaii.edu +host-1181.hawaii.edu +host-1182.hawaii.edu +host-1183.hawaii.edu +host-1184.hawaii.edu +host-1185.hawaii.edu +host-1186.hawaii.edu +host-1187.hawaii.edu +host-1188.hawaii.edu +host-1189.hawaii.edu +host-1190.hawaii.edu +host-1191.hawaii.edu +host-1192.hawaii.edu +host-1193.hawaii.edu +host-1194.hawaii.edu +host-1195.hawaii.edu +host-1196.hawaii.edu +host-1197.hawaii.edu +host-1198.hawaii.edu +host-1199.hawaii.edu +host-1200.hawaii.edu +host-1201.hawaii.edu +host-1202.hawaii.edu +host-1203.hawaii.edu +host-1204.hawaii.edu +host-1205.hawaii.edu +host-1206.hawaii.edu +host-1207.hawaii.edu +host-1208.hawaii.edu +host-1209.hawaii.edu +host-1210.hawaii.edu +host-1211.hawaii.edu +host-1212.hawaii.edu +host-1213.hawaii.edu +host-1214.hawaii.edu +host-1215.hawaii.edu +host-1216.hawaii.edu +host-1217.hawaii.edu +host-1218.hawaii.edu +host-1219.hawaii.edu +host-1220.hawaii.edu +host-1221.hawaii.edu +host-1222.hawaii.edu +host-1223.hawaii.edu +host-1224.hawaii.edu +host-1225.hawaii.edu +host-1226.hawaii.edu +host-1227.hawaii.edu +host-1228.hawaii.edu +host-1229.hawaii.edu +host-1230.hawaii.edu +host-1231.hawaii.edu +host-1232.hawaii.edu +host-1233.hawaii.edu +host-1234.hawaii.edu +host-1235.hawaii.edu +host-1236.hawaii.edu +host-1237.hawaii.edu +host-1238.hawaii.edu +host-1239.hawaii.edu +host-1240.hawaii.edu +host-1241.hawaii.edu +host-1242.hawaii.edu +host-1243.hawaii.edu +host-1244.hawaii.edu +host-1245.hawaii.edu +host-1246.hawaii.edu +host-1247.hawaii.edu +host-1248.hawaii.edu +host-1249.hawaii.edu +host-1250.hawaii.edu +host-1251.hawaii.edu +host-1252.hawaii.edu +host-1253.hawaii.edu +host-1254.hawaii.edu +host-1255.hawaii.edu +host-1256.hawaii.edu +host-1257.hawaii.edu +host-1258.hawaii.edu +host-1259.hawaii.edu +host-1260.hawaii.edu +host-1261.hawaii.edu +host-1262.hawaii.edu +host-1263.hawaii.edu +host-1264.hawaii.edu +host-1265.hawaii.edu +host-1266.hawaii.edu +host-1267.hawaii.edu +host-1268.hawaii.edu +host-1269.hawaii.edu +host-1270.hawaii.edu +host-1271.hawaii.edu +host-1272.hawaii.edu +host-1273.hawaii.edu +host-1274.hawaii.edu +host-1275.hawaii.edu +host-1276.hawaii.edu +host-1277.hawaii.edu +host-1278.hawaii.edu +host-1279.hawaii.edu +host-1280.hawaii.edu +host-1281.hawaii.edu +host-1282.hawaii.edu +host-1283.hawaii.edu +host-1284.hawaii.edu +host-1285.hawaii.edu +host-1286.hawaii.edu +host-1287.hawaii.edu +host-1288.hawaii.edu +host-1289.hawaii.edu +host-1290.hawaii.edu +host-1291.hawaii.edu +host-1292.hawaii.edu +host-1293.hawaii.edu +host-1294.hawaii.edu +host-1295.hawaii.edu +host-1296.hawaii.edu +host-1297.hawaii.edu +host-1298.hawaii.edu +host-1299.hawaii.edu +host-1300.hawaii.edu +host-1301.hawaii.edu +host-1302.hawaii.edu +host-1303.hawaii.edu +host-1304.hawaii.edu +host-1305.hawaii.edu +host-1306.hawaii.edu +host-1307.hawaii.edu +host-1308.hawaii.edu +host-1309.hawaii.edu +host-1310.hawaii.edu +host-1311.hawaii.edu +host-1312.hawaii.edu +host-1313.hawaii.edu +host-1314.hawaii.edu +host-1315.hawaii.edu +host-1316.hawaii.edu +host-1317.hawaii.edu +host-1318.hawaii.edu +host-1319.hawaii.edu +host-1320.hawaii.edu +host-1321.hawaii.edu +host-1322.hawaii.edu +host-1323.hawaii.edu +host-1324.hawaii.edu +host-1325.hawaii.edu +host-1326.hawaii.edu +host-1327.hawaii.edu +host-1328.hawaii.edu +host-1329.hawaii.edu +host-1330.hawaii.edu +host-1331.hawaii.edu +host-1332.hawaii.edu +host-1333.hawaii.edu +host-1334.hawaii.edu +host-1335.hawaii.edu +host-1336.hawaii.edu +host-1337.hawaii.edu +host-1338.hawaii.edu +host-1339.hawaii.edu +host-1340.hawaii.edu +host-1341.hawaii.edu +host-1342.hawaii.edu +host-1343.hawaii.edu +host-1344.hawaii.edu +host-1345.hawaii.edu +host-1346.hawaii.edu +host-1347.hawaii.edu +host-1348.hawaii.edu +host-1349.hawaii.edu +host-1350.hawaii.edu +host-1351.hawaii.edu +host-1352.hawaii.edu +host-1353.hawaii.edu +host-1354.hawaii.edu +host-1355.hawaii.edu +host-1356.hawaii.edu +host-1357.hawaii.edu +host-1358.hawaii.edu +host-1359.hawaii.edu +host-1360.hawaii.edu +host-1361.hawaii.edu +host-1362.hawaii.edu +host-1363.hawaii.edu +host-1364.hawaii.edu +host-1365.hawaii.edu +host-1366.hawaii.edu +host-1367.hawaii.edu +host-1368.hawaii.edu +host-1369.hawaii.edu +host-1370.hawaii.edu +host-1371.hawaii.edu +host-1372.hawaii.edu +host-1373.hawaii.edu +host-1374.hawaii.edu +host-1375.hawaii.edu +host-1376.hawaii.edu +host-1377.hawaii.edu +host-1378.hawaii.edu +host-1379.hawaii.edu +host-1380.hawaii.edu +host-1381.hawaii.edu +host-1382.hawaii.edu +host-1383.hawaii.edu +host-1384.hawaii.edu +host-1385.hawaii.edu +host-1386.hawaii.edu +host-1387.hawaii.edu +host-1388.hawaii.edu +host-1389.hawaii.edu +host-1390.hawaii.edu +host-1391.hawaii.edu +host-1392.hawaii.edu +host-1393.hawaii.edu +host-1394.hawaii.edu +host-1395.hawaii.edu +host-1396.hawaii.edu +host-1397.hawaii.edu +host-1398.hawaii.edu +host-1399.hawaii.edu +host-1400.hawaii.edu +host-1401.hawaii.edu +host-1402.hawaii.edu +host-1403.hawaii.edu +host-1404.hawaii.edu +host-1405.hawaii.edu +host-1406.hawaii.edu +host-1407.hawaii.edu +host-1408.hawaii.edu +host-1409.hawaii.edu +host-1410.hawaii.edu +host-1411.hawaii.edu +host-1412.hawaii.edu +host-1413.hawaii.edu +host-1414.hawaii.edu +host-1415.hawaii.edu +host-1416.hawaii.edu +host-1417.hawaii.edu +host-1418.hawaii.edu +host-1419.hawaii.edu +host-1420.hawaii.edu +host-1421.hawaii.edu +host-1422.hawaii.edu +host-1423.hawaii.edu +host-1424.hawaii.edu +host-1425.hawaii.edu +host-1426.hawaii.edu +host-1427.hawaii.edu +host-1428.hawaii.edu +host-1429.hawaii.edu +host-1430.hawaii.edu +host-1431.hawaii.edu +host-1432.hawaii.edu +host-1433.hawaii.edu +host-1434.hawaii.edu +host-1435.hawaii.edu +host-1436.hawaii.edu +host-1437.hawaii.edu +host-1438.hawaii.edu +host-1439.hawaii.edu +host-1440.hawaii.edu +host-1441.hawaii.edu +host-1442.hawaii.edu +host-1443.hawaii.edu +host-1444.hawaii.edu +host-1445.hawaii.edu +host-1446.hawaii.edu +host-1447.hawaii.edu +host-1448.hawaii.edu +host-1449.hawaii.edu +host-1450.hawaii.edu +host-1451.hawaii.edu +host-1452.hawaii.edu +host-1453.hawaii.edu +host-1454.hawaii.edu +host-1455.hawaii.edu +host-1456.hawaii.edu +host-1457.hawaii.edu +host-1458.hawaii.edu +host-1459.hawaii.edu +host-1460.hawaii.edu +host-1461.hawaii.edu +host-1462.hawaii.edu +host-1463.hawaii.edu +host-1464.hawaii.edu +host-1465.hawaii.edu +host-1466.hawaii.edu +host-1467.hawaii.edu +host-1468.hawaii.edu +host-1469.hawaii.edu +host-1470.hawaii.edu +host-1471.hawaii.edu +host-1472.hawaii.edu +host-1473.hawaii.edu +host-1474.hawaii.edu +host-1475.hawaii.edu +host-1476.hawaii.edu +host-1477.hawaii.edu +host-1478.hawaii.edu +host-1479.hawaii.edu +host-1480.hawaii.edu +host-1481.hawaii.edu +host-1482.hawaii.edu +host-1483.hawaii.edu +host-1484.hawaii.edu +host-1485.hawaii.edu +host-1486.hawaii.edu +host-1487.hawaii.edu +host-1488.hawaii.edu +host-1489.hawaii.edu +host-1490.hawaii.edu +host-1491.hawaii.edu +host-1492.hawaii.edu +host-1493.hawaii.edu +host-1494.hawaii.edu +host-1495.hawaii.edu +host-1496.hawaii.edu +host-1497.hawaii.edu +host-1498.hawaii.edu +host-1499.hawaii.edu +host-1500.hawaii.edu +host-1501.hawaii.edu +host-1502.hawaii.edu +host-1503.hawaii.edu +host-1504.hawaii.edu +host-1505.hawaii.edu +host-1506.hawaii.edu +host-1507.hawaii.edu +host-1508.hawaii.edu +host-1509.hawaii.edu +host-1510.hawaii.edu +host-1511.hawaii.edu +host-1512.hawaii.edu +host-1513.hawaii.edu +host-1514.hawaii.edu +host-1515.hawaii.edu +host-1516.hawaii.edu +host-1517.hawaii.edu +host-1518.hawaii.edu +host-1519.hawaii.edu +host-1520.hawaii.edu +host-1521.hawaii.edu +host-1522.hawaii.edu +host-1523.hawaii.edu +host-1524.hawaii.edu +host-1525.hawaii.edu +host-1526.hawaii.edu +host-1527.hawaii.edu +host-1528.hawaii.edu +host-1529.hawaii.edu +host-1530.hawaii.edu +host-1531.hawaii.edu +host-1532.hawaii.edu +host-1533.hawaii.edu +host-1534.hawaii.edu +host-1535.hawaii.edu +host-1536.hawaii.edu +host-1537.hawaii.edu +host-1538.hawaii.edu +host-1539.hawaii.edu +host-1540.hawaii.edu +host-1541.hawaii.edu +host-1542.hawaii.edu +host-1543.hawaii.edu +host-1544.hawaii.edu +host-1545.hawaii.edu +host-1546.hawaii.edu +host-1547.hawaii.edu +host-1548.hawaii.edu +host-1549.hawaii.edu +host-1550.hawaii.edu +host-1551.hawaii.edu +host-1552.hawaii.edu +host-1553.hawaii.edu +host-1554.hawaii.edu +host-1555.hawaii.edu +host-1556.hawaii.edu +host-1557.hawaii.edu +host-1558.hawaii.edu +host-1559.hawaii.edu +host-1560.hawaii.edu +host-1561.hawaii.edu +host-1562.hawaii.edu +host-1563.hawaii.edu +host-1564.hawaii.edu +host-1565.hawaii.edu +host-1566.hawaii.edu +host-1567.hawaii.edu +host-1568.hawaii.edu +host-1569.hawaii.edu +host-1570.hawaii.edu +host-1571.hawaii.edu +host-1572.hawaii.edu +host-1573.hawaii.edu +host-1574.hawaii.edu +host-1575.hawaii.edu +host-1576.hawaii.edu +host-1577.hawaii.edu +host-1578.hawaii.edu +host-1579.hawaii.edu +host-1580.hawaii.edu +host-1581.hawaii.edu +host-1582.hawaii.edu +host-1583.hawaii.edu +host-1584.hawaii.edu +host-1585.hawaii.edu +host-1586.hawaii.edu +host-1587.hawaii.edu +host-1588.hawaii.edu +host-1589.hawaii.edu +host-1590.hawaii.edu +host-1591.hawaii.edu +host-1592.hawaii.edu +host-1593.hawaii.edu +host-1594.hawaii.edu +host-1595.hawaii.edu +host-1596.hawaii.edu +host-1597.hawaii.edu +host-1598.hawaii.edu +host-1599.hawaii.edu diff --git a/topic_understanding_performance/matrixmultiplication/index.html b/topic_understanding_performance/matrixmultiplication/index.html new file mode 100644 index 0000000..6556fb1 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/index.html @@ -0,0 +1,648 @@ + + + + + + + + + + + + + Topic #4 Module · SMPI CourseWare + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
+ +

+ +

+ + + +

+
+ + + +

+ + + +

+ Objective: To analyze (mostly experimentally) the performance and + scalability of an implementation + of the outer-product algorithm for multiplying matrices. +

+ +

+ + + +

+ This module uses the program developed in the Matrix Multiplication module in Topic #3. You must + have completed that module to do this one. +

+ + +

+ + + +

+ + To make the simulation results consistent regardless of your computer we first calibrate the simulation. + More specifically, we simulate a parallel platform in which each processor computes at a rate of 200Gflops. Since + SMPI measures compute times on your own machine, we need to tell SMPI how fast your machine is, which is + SMPI is done by passing a particular floating point value to + smpirun using the --cfg=smpi/host-speed:VALUE command-line option. + +

+ +

+ A python script called calibrate_flops.py is + provided, which you should run once on your idle computer (or on your Docker container). This script + performs a binary search to find the necessary calibration factor, + which is printed to the screen and should be passed to the + --cfg=smpi/host-speed command-line option. Of course, + if you change computer, you'll have to re-run the script to find a new + calibration factor. + +

+ + +

+ + + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Observe the impact of network performance on application performance.
Activity #2: Quantify algorithm scalability.

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

+ +

In this activity we measure and understand the impact of network communication + on application performance. This activity consists of the two steps below. +

+ + + + +

+ +

+ In this step we run experiments on a simulated 1600-host cluster with the + cluster_1600.xml platform file and accompanying + hostfile_1600.txt hostfile. +

+ +

+ First, augment your matmul program so that it prints out the wallclock time to perform the + matrix multiplication, in seconds (Using MPI_Wtime is a good idea). +

+ +

+ Run your program for N = 1600 on the above platform using p = 1, 4, 16, 64, 100, and 400 processes. For each + number of processes, record the simulated wallclock time, averaged over 5 trials. +

+ +

+ Now, modify the platform file to set the network latency to 0 and the bandwidth to a very large value, + so as to simulate an ideal platform in which the network is close to infinitely fast. Re-run the experiments above. +

+ +

+Plot speed-up curves (speedup vs. number of processors) for the two series of experiments above. +What parallel efficiency can you achieve with p = 400 processes on the ideal vs. the non-ideal platform? + What do you conclude about the application’s prospects for this matrix size on a real machine? +

+ +

+ Note: +The simulations takes time and memory. You can decrease the scale as needed in case you can't run it on your machine. + Just for reference, these simulations run well under 10 minutes minutes on the author's laptop. +

+ + +

+ +

+ + +

+ +

In this activity we experiment with large matrices, to see if performance + can scale reasonably well with large numbers of processors. In steps #1 and #2 below we play "simulation tricks" to avoid + running too memory-intensive / cpu-intensive simulations. In step #3 we re-calibrate the simulation, and + in step #4 we re-run experiments to quantify application scalability. +

+ + + + +

+ +

+ When SMPI encounters a basic block of computation in your program, it executes the block + and times it to generate the correct delay in simulation. If this + code takes 1 hour to run on your machine, then the simulation will then take at least 1 + hour. If you are simulating 100 processes each computing for 1 + hour, then the simulation will take 100 hours! This is because SMPI runs on a single core, running + MPI processes in round-robin fashion. This sounds bad, but SMPI provides several ways + to mitigate this problem. For instance, one can tell the simulator: + "Execute/time the code only the first time you encounter it". A more radical + option is to tell the simulator: "When you encounter this basic + block, don't run it at all. Instead, I am telling you how many flops it involves + and simply compute the delay by dividing this number of flops by the compute speed." + In both cases, the code no longer computes correct results. But the idea is that for + deterministic basic blocks, such as the computational part of matrix multiplication, the general performance behavior is preserved, + and a simple re-calibration will lead to sufficiently accurate simulation results (this has been shown in SMPI research papers and + by other researchers before SMPI even existed). +

+ +

+In this step we use the second option above, i.e., avoiding computation altogether. Consider the sample + basic block below: +

+ +

for (i=0; i < N; i++) {
+  sum = sum * 3.0 * x * y;
+}

+ +

+ +This loop performs O(N) floating point operations, and in your SMPI code you can replace it by: + +

+ +

  double flops = (double)N * (double)FLOP_CALIBRATION_FACTOR ;
+  SMPI_SAMPLE_FLOPS(flops) {
+    // for (i=0; i < N; i++) {
+    //   sum = sum * 3.0 * x * y;
+  }
+

+ +

+Modify your program to do the above, for the basic block that multiplies matrix blocks. At this point, +since your code doesn't compute anything useful, you can also comment out the part of the code that +initializes the matrices and checks the validity of the results (in fact you really want to comment out the latter +to avoid "invalid results" messages). For now use an arbitrary value for FLOP_CALIBRATION_FACTOR so +that you can compile and debug your program, and pay no attention to the simulated performance. +

+ + +

+ +

+ The above is straightforward with SMPI: +

Replace malloc by SMPI_SHARED_MALLOC;

Replace free by SMPI_SHARED_FREE.

+ +

+ Do the above in your program. You now have a program that computes + nothing useful at all, but still outputs a simulated wallclock time that research shows + is sufficiently accurate to draw meaningful conclusions for our purpose! + The point is that this program can be executed faster and for larger matrices. + We now have an interesting simulation performance trade-off. With a lot of processes, we can scale the memory up. + For instance, say the memory space needed for the (sequential) matrix multiplication is 100GiB. + You can't run the simulation of this computation on your laptop. However, if you simulate a parallel + execution with 100 processes, the above memory trick makes it so that you only need 1GiB of RAM to run the simulation. + However, with a lot of processes, the time to simulate the broadcasts with large data sizes is large + (due to the sheer number of individual point-to-point messages). + So, some simulations will take too much space, and some simulations will take too much time. + Nevertheless, our CPU and memory simulation "tricks" significantly widens the range of simulation experiments + that can be done in practice. +

+ + +

+ +

+ One problem with our CPU trick is that the simulated wall-clock time will no longer be coherent with our simulation platform, i.e., it + no longer match with our --cfg=smpi/host-speed command-line option since we use the + SMPI_SAMPLE_FLOPS macro. Instead, we need + to determine a reasonable value for FLOP_CALIBRATION_FACTOR. +

+ +

+ Run your original (i.e., without the "simulation tricks") program from the matrix multiplication module in Topic #3, + using + cluster_1600.xml and + hostfile_1600.txt, for a matrix of size 2000x2000, with p=4 process. + Then empirically determine a value of FLOP_CALIBRATION_FACTOR + that leads to the same (or close) simulated elapsed time for your program with the "simulation tricks". + Doing a binary search on FLOP_CALIBRATION_FACTOR, via a script, is great of course, but you + can probably just do a quick trial-and-error manual search. Once you've found this value, hard-code it into your + program, and voila. +

+ + +

+ +

+ Now that your simulation is fully calibrated, + run simulations, using + cluster_1600.xml and + hostfile_1600.txt, with p=100 processors, + using matrices of increasing sizes up to as large as you can run them on your machine (in terms of memory and time), with 5 trials + per matrix size. + It may be a good idea to do a quick back-of-the-envelope memory footprint calculation to make sure you don’t exceed your RAM. + +

+ +

+ Plot an average efficiency vs. matrix size curve. + What do you conclude in terms of the scalability of the application? Are we in good shape if matrices are large? +

+ + +

+ + + +

+ + +

+ +

+ + + +

+ + +

+ +

+ The End +

+ +

+ + + +
+ +

+ + + + + diff --git a/topic_understanding_performance/matrixmultiplication/introduction.html b/topic_understanding_performance/matrixmultiplication/introduction.html new file mode 100644 index 0000000..0dfefb8 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/introduction.html @@ -0,0 +1,79 @@ +

+ + + +

+ Objective: To analyze (mostly experimentally) the performance and + scalability of an implementation + of the outer-product algorithm for multiplying matrices. +

+ +

+ + + +

+ This module uses the program developed in the Matrix Multiplication module in Topic #3. You must + have completed that module to do this one. +

+ + +

+ + + +

+ + To make the simulation results consistent regardless of your computer we first calibrate the simulation. + More specifically, we simulate a parallel platform in which each processor computes at a rate of 200Gflops. Since + SMPI measures compute times on your own machine, we need to tell SMPI how fast your machine is, which is + SMPI is done by passing a particular floating point value to + smpirun using the --cfg=smpi/host-speed:VALUE command-line option. + +

+ +

+ + +

+ + + +

+ +

This module consists of 2 activities, each described in its own tab above, which should be done in + sequence: +

Activity #1: Observe the impact of network performance on application performance.
Activity #2: Quantify algorithm scalability.

+ + +

+ +

You should turn in a single archive (or a github repo) with: +

All source code

XML platform files and hostfiles (see details in the activities)

A Makefile that compiles all executables (and has a 'clean' target!)

diff --git a/topic_understanding_performance/matrixmultiplication/network_impact.html b/topic_understanding_performance/matrixmultiplication/network_impact.html new file mode 100644 index 0000000..4ed4ddc --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/network_impact.html @@ -0,0 +1,32 @@ +

+ In this step we run experiments on a simulated 1600-host cluster with the + cluster_1600.xml platform file and accompanying + hostfile_1600.txt hostfile. +

+ +

+ First, augment your matmul program so that it prints out the wallclock time to perform the + matrix multiplication, in seconds (Using MPI_Wtime is a good idea). +

+ +

+ Run your program for N = 1600 on the above platform using p = 1, 4, 16, 64, 100, and 400 processes. For each + number of processes, record the simulated wallclock time, averaged over 5 trials. +

+ +

diff --git a/topic_understanding_performance/matrixmultiplication/network_speed.html b/topic_understanding_performance/matrixmultiplication/network_speed.html new file mode 100644 index 0000000..0a1cd54 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/network_speed.html @@ -0,0 +1,23 @@ +

In this activity we measure and understand the impact of network communication + on application performance. This activity consists of the two steps below. +

+ + + + +

+ + {% include_relative network_impact.html %} + +

+ + +

+ + {% include_relative communication_share.html %} + +

+ diff --git a/topic_understanding_performance/matrixmultiplication/recalibration.html b/topic_understanding_performance/matrixmultiplication/recalibration.html new file mode 100644 index 0000000..1e3912f --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/recalibration.html @@ -0,0 +1,18 @@ +

+ +

diff --git a/topic_understanding_performance/matrixmultiplication/scalability.html b/topic_understanding_performance/matrixmultiplication/scalability.html new file mode 100644 index 0000000..d27d434 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/scalability.html @@ -0,0 +1,41 @@ +

+ + + + +

+ + {% include_relative simulation_tricks_cpu.html %} + +

+ + +

+ + {% include_relative simulation_tricks_mem.html %} + +

+ + +

+ + {% include_relative recalibration.html %} + +

+ + +

+ + {% include_relative scalability_runs.html %} + +

+ diff --git a/topic_understanding_performance/matrixmultiplication/scalability_runs.html b/topic_understanding_performance/matrixmultiplication/scalability_runs.html new file mode 100644 index 0000000..8327f29 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/scalability_runs.html @@ -0,0 +1,15 @@ +

+ +

+ Plot an average efficiency vs. matrix size curve. + What do you conclude in terms of the scalability of the application? Are we in good shape if matrices are large? +

diff --git a/topic_understanding_performance/matrixmultiplication/simulation_tricks_cpu.html b/topic_understanding_performance/matrixmultiplication/simulation_tricks_cpu.html new file mode 100644 index 0000000..68420ea --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/simulation_tricks_cpu.html @@ -0,0 +1,61 @@ +

+ +

+ When SMPI encounters a basic block of computation in your program, it executes the block + and times it to generate the correct delay in simulation. If this + code takes 1 hour to run on your machine, then the simulation will then take at least 1 + hour. If you are simulating 100 processes each computing for 1 + hour, then the simulation will take 100 hours! This is because SMPI runs on a single core, running + MPI processes in round-robin fashion. This sounds bad, but SMPI provides several ways + to mitigate this problem. For instance, one can tell the simulator: + "Execute/time the code only the first time you encounter it". A more radical + option is to tell the simulator: "When you encounter this basic + block, don't run it at all. Instead, I am telling you how many flops it involves + and simply compute the delay by dividing this number of flops by the compute speed." + In both cases, the code no longer computes correct results. But the idea is that for + deterministic basic blocks, such as the computational part of matrix multiplication, the general performance behavior is preserved, + and a simple re-calibration will lead to sufficiently accurate simulation results (this has been shown in SMPI research papers and + by other researchers before SMPI even existed). +

+ +

+In this step we use the second option above, i.e., avoiding computation altogether. Consider the sample + basic block below: +

+ +

+{% highlight C %} +for (i=0; i < N; i++) { + sum = sum * 3.0 * x * y; +} +{% endhighlight %} +

+ +This loop performs O(N) floating point operations, and in your SMPI code you can replace it by: + +

+ {% highlight C %} + double flops = (double)N * (double)FLOP_CALIBRATION_FACTOR ; + SMPI_SAMPLE_FLOPS(flops) { + // for (i=0; i < N; i++) { + // sum = sum * 3.0 * x * y; + } + {% endhighlight %} +

diff --git a/topic_understanding_performance/matrixmultiplication/simulation_tricks_mem.html b/topic_understanding_performance/matrixmultiplication/simulation_tricks_mem.html new file mode 100644 index 0000000..6798b7d --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/simulation_tricks_mem.html @@ -0,0 +1,34 @@ +

+ +

+ The above is straightforward with SMPI: +

Replace malloc by SMPI_SHARED_MALLOC;

Replace free by SMPI_SHARED_FREE.

+ +

+ Do the above in your program. You now have a program that computes + nothing useful at all, but still outputs a simulated wallclock time that research shows + is sufficiently accurate to draw meaningful conclusions for our purpose! + The point is that this program can be executed faster and for larger matrices. + We now have an interesting simulation performance trade-off. With a lot of processes, we can scale the memory up. + For instance, say the memory space needed for the (sequential) matrix multiplication is 100GiB. + You can't run the simulation of this computation on your laptop. However, if you simulate a parallel + execution with 100 processes, the above memory trick makes it so that you only need 1GiB of RAM to run the simulation. + However, with a lot of processes, the time to simulate the broadcasts with large data sizes is large + (due to the sheer number of individual point-to-point messages). + So, some simulations will take too much space, and some simulations will take too much time. + Nevertheless, our CPU and memory simulation "tricks" significantly widens the range of simulation experiments + that can be done in practice. +

diff --git a/topic_understanding_performance/matrixmultiplication/tbd.html b/topic_understanding_performance/matrixmultiplication/tbd.html new file mode 100644 index 0000000..fb4e317 --- /dev/null +++ b/topic_understanding_performance/matrixmultiplication/tbd.html @@ -0,0 +1,4 @@ + +

+ +

\ No newline at end of file

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

About: Curricular information

+Target audience +

+Prerequisites +

+Learning Objectives +

+Approach +

+License +

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

Topic #0: Getting started with SMPI

Overview

Available content

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

Topic #1: Basics of distributed memory programming

Overview

Available hands-on modules

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

Topic #2: Communication on distributed platforms

Overview

Available hands-on modules

Modules under construction

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

Topic #3: Rigid distributed memory programs

Overview

Available hands-on modules

Matrix Multiplication (2-D data distribution, implementing the algorithm from scratch)

LU Factorization (1-D data distribution, + sequential implementation given as a possible starting point)

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +

Topic #4 +

Topic #5 +

Topic #4: Understanding performance

Overview

Available hands-on modules

Matrix Multiplication + (uses module from Topic #3 as a starting point)

LU Factorization + (uses module from Topic #3 as a starting point)

Home

About +

Topic #0 +

Topic #1 +

Topic #2 +

Topic #3 +