From 5a41a62c4455252081278a4fb8869e373942e1e3 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 20 Jul 2013 04:10:20 -0400 Subject: [PATCH] Somehow lost all docs? Fixed. Revisions from buglist Former-commit-id: e1991e5aeebb7d4ac7669b1125419d657f13752d Former-commit-id: e6e9d8035984b39dfa3fcb3ae5c28dbe225279ae --- build/minified/collections/grid.min.css | 2 +- build/minified/collections/menu.min.css | 2 +- build/minified/elements/button.min.css | 2 +- build/minified/elements/divider.min.css | 2 +- build/minified/elements/header.min.css | 2 +- build/minified/elements/label.min.css | 2 +- build/minified/modules/accordion.js | 14 +- build/minified/modules/accordion.min.css | 2 +- build/minified/modules/accordion.min.js | 2 +- build/minified/modules/nag.js | 22 +- build/minified/modules/nag.min.css | 2 +- build/minified/modules/nag.min.js | 2 +- build/minified/modules/popup.js | 41 +- build/minified/modules/popup.min.css | 2 +- build/minified/modules/popup.min.js | 2 +- build/minified/modules/reveal.min.css | 2 +- build/minified/modules/shape.js | 26 +- build/minified/modules/shape.min.js | 2 +- build/minified/modules/tab.js | 45 +- build/minified/modules/tab.min.js | 2 +- build/minified/views/comment.min.css | 2 +- build/minified/views/sitemap.min.css | 1 + build/packaged/modules/accordion.js | 14 +- build/packaged/modules/nag.js | 22 +- build/packaged/modules/popup.js | 41 +- build/packaged/modules/shape.js | 26 +- build/packaged/modules/tab.js | 45 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/packaged/semantic.min.js.REMOVED.git-id | 2 +- build/uncompressed/collections/grid.css | 40 +- build/uncompressed/collections/menu.css | 16 +- build/uncompressed/elements/button.css | 271 +++--- build/uncompressed/elements/divider.css | 2 +- build/uncompressed/elements/header.css | 7 - build/uncompressed/elements/label.css | 17 +- build/uncompressed/modules/accordion.css | 13 + build/uncompressed/modules/accordion.js | 14 +- build/uncompressed/modules/nag.css | 2 +- build/uncompressed/modules/nag.js | 22 +- build/uncompressed/modules/popup.css | 10 +- build/uncompressed/modules/popup.js | 41 +- build/uncompressed/modules/reveal.css | 76 +- build/uncompressed/modules/shape.js | 26 +- build/uncompressed/modules/tab.js | 45 +- build/uncompressed/views/comment.css | 9 +- build/uncompressed/views/sitemap.css | 36 + node/Gruntfile.js | 2 +- node/src/documents/collection.html | 101 ++ .../src/documents/collections/breadcrumb.html | 70 ++ node/src/documents/collections/form.html | 519 ++++++++++ node/src/documents/collections/grid.html | 719 ++++++++++++++ node/src/documents/collections/menu.html | 918 ++++++++++++++++++ node/src/documents/collections/message.html | 241 +++++ node/src/documents/collections/table.html | 599 ++++++++++++ node/src/documents/download.html | 20 + node/src/documents/element.html | 222 +++++ node/src/documents/elements/button.html | 317 ++++++ node/src/documents/elements/divider.html | 132 +++ node/src/documents/elements/header.html | 301 ++++++ node/src/documents/elements/icon.html | 289 ++++++ node/src/documents/elements/image.html | 125 +++ node/src/documents/elements/input.html | 124 +++ node/src/documents/elements/label.html | 308 ++++++ node/src/documents/elements/loader.html | 135 +++ node/src/documents/elements/progress.html | 119 +++ node/src/documents/elements/segment.html | 221 +++++ node/src/documents/elements/step.html | 139 +++ node/src/documents/index.html | 46 +- node/src/documents/intro/authoring.html | 52 + node/src/documents/intro/downloading.html | 57 ++ node/src/documents/intro/getting-started.html | 134 +++ node/src/documents/module.html | 111 +++ node/src/documents/modules/accordion.html | 263 +++++ node/src/documents/modules/carousel.html | 160 +++ node/src/documents/modules/checkbox.html | 353 +++++++ node/src/documents/modules/dimmer.html | 289 ++++++ node/src/documents/modules/dropdown.html | 475 +++++++++ node/src/documents/modules/form.html | 335 +++++++ node/src/documents/modules/popup.html | 270 ++++++ node/src/documents/modules/reveal.html | 170 ++++ node/src/documents/modules/shape.html | 373 +++++++ node/src/documents/playground.html.eco | 190 ++++ node/src/documents/sink.html | 219 +++++ node/src/documents/specification/spec.html | 138 +++ node/src/documents/views/comment.html | 542 +++++++++++ node/src/documents/views/feed.html | 268 +++++ node/src/documents/views/items.html | 313 ++++++ .../components/semantic/collections/grid.css | 16 +- .../components/semantic/elements/button.css | 271 +++--- .../components/semantic/elements/divider.css | 2 +- .../components/semantic/elements/header.css | 7 - .../components/semantic/elements/label.css | 14 +- .../files/components/semantic/modules/nag.js | 22 +- .../components/semantic/modules/popup.css | 10 +- .../components/semantic/modules/popup.js | 41 +- .../components/semantic/modules/reveal.css | 76 +- .../overrides/modules/behavior/preview.js | 308 ++++++ node/src/files/overrides/views/card.css | 17 +- node/src/files/stylesheets/semantic.css | 4 +- src/elements/label.less | 25 +- src/modules/reveal.less | 76 +- 101 files changed, 11576 insertions(+), 672 deletions(-) create mode 100644 build/minified/views/sitemap.min.css create mode 100644 build/uncompressed/views/sitemap.css create mode 100755 node/src/documents/collection.html create mode 100755 node/src/documents/collections/breadcrumb.html create mode 100755 node/src/documents/collections/form.html create mode 100755 node/src/documents/collections/grid.html create mode 100755 node/src/documents/collections/menu.html create mode 100755 node/src/documents/collections/message.html create mode 100755 node/src/documents/collections/table.html create mode 100755 node/src/documents/download.html create mode 100755 node/src/documents/element.html create mode 100755 node/src/documents/elements/button.html create mode 100755 node/src/documents/elements/divider.html create mode 100755 node/src/documents/elements/header.html create mode 100755 node/src/documents/elements/icon.html create mode 100755 node/src/documents/elements/image.html create mode 100755 node/src/documents/elements/input.html create mode 100755 node/src/documents/elements/label.html create mode 100755 node/src/documents/elements/loader.html create mode 100755 node/src/documents/elements/progress.html create mode 100755 node/src/documents/elements/segment.html create mode 100755 node/src/documents/elements/step.html create mode 100755 node/src/documents/intro/authoring.html create mode 100755 node/src/documents/intro/downloading.html create mode 100755 node/src/documents/intro/getting-started.html create mode 100755 node/src/documents/module.html create mode 100755 node/src/documents/modules/accordion.html create mode 100755 node/src/documents/modules/carousel.html create mode 100755 node/src/documents/modules/checkbox.html create mode 100755 node/src/documents/modules/dimmer.html create mode 100755 node/src/documents/modules/dropdown.html create mode 100755 node/src/documents/modules/form.html create mode 100755 node/src/documents/modules/popup.html create mode 100755 node/src/documents/modules/reveal.html create mode 100755 node/src/documents/modules/shape.html create mode 100755 node/src/documents/playground.html.eco create mode 100755 node/src/documents/sink.html create mode 100755 node/src/documents/specification/spec.html create mode 100755 node/src/documents/views/comment.html create mode 100755 node/src/documents/views/feed.html create mode 100755 node/src/documents/views/items.html create mode 100755 node/src/files/overrides/modules/behavior/preview.js diff --git a/build/minified/collections/grid.min.css b/build/minified/collections/grid.min.css index 318069e06..256c4944f 100644 --- a/build/minified/collections/grid.min.css +++ b/build/minified/collections/grid.min.css @@ -1 +1 @@ -.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%}.ui.grid>.row{margin-top:1rem;padding-top:1rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.5%;margin-right:-1.5%}.ui.page.grid{margin:0;padding:0 2%}.ui.responsive.grid{margin-left:0!important;margin-right:0!important;min-width:320px}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 25%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table;width:100%;margin-left:0!important;margin-right:0!important}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.9)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.row{display:table;width:100%}.ui.grid>.equal.row>.column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.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:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file +.ui.grid{display:block;text-align:left;font-size:0;margin:0 -1.5%;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.grid:after,.ui.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.grid>.column,.ui.grid>.row>.column{display:inline-block;text-align:left;font-size:1rem;padding-left:1.5%;padding-right:1.5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;vertical-align:top}.ui.grid>.row{display:block;width:100%!important;margin-top:1.5%;padding:1.5% 0 0;font-size:0rem}.ui.grid>.row:first-child{padding-top:0rem;margin-top:0rem}.ui.grid>.row>img,.ui.grid>.row>.column>img{max-width:100%}.ui.grid .column>.ui.segment:only-child{margin:0}.ui.grid .column>.grid{margin-left:-1.5%;margin-right:-1.5%}.ui.page.grid{margin:0;padding:0 2%}.ui.responsive.grid{margin-left:0!important;margin-right:0!important;min-width:320px}@media only screen and (max-width:1000px){.ui.responsive.grid{padding:0 5.55%}}@media only screen and (min-width:1000px){.ui.responsive.grid{padding:0 8%}}@media only screen and (min-width:1500px){.ui.responsive.grid{padding:0 13%}}@media only screen and (min-width:1750px){.ui.responsive.grid{padding:0 18%}}@media only screen and (min-width:2000px){.ui.responsive.grid{padding:0 23%}}.ui.grid .one.wide.column{width:6.25%}.ui.grid .two.wide.column{width:12.5%}.ui.grid .three.wide.column{width:18.75%}.ui.grid .four.wide.column{width:25%}.ui.grid .five.wide.column{width:31.25%}.ui.grid .six.wide.column{width:37.5%}.ui.grid .seven.wide.column{width:43.75%}.ui.grid .eight.wide.column{width:50%}.ui.grid .nine.wide.column{width:56.25%}.ui.grid .ten.wide.column{width:62.5%}.ui.grid .eleven.wide.column{width:68.75%}.ui.grid .twelve.wide.column{width:75%}.ui.grid .thirteen.wide.column{width:81.25%}.ui.grid .fourteen.wide.column{width:87.5%}.ui.grid .fifteen.wide.column{width:93.75%}.ui.grid .sixteen.wide.column{width:100%}.ui.grid>.column,.ui.grid>.row>.column{width:6.25%}.ui.one.column.grid>.row>.column,.ui.one.column.grid>.column,.ui.grid>.one.column.row>.column{width:100%}.ui.two.column.grid>.row>.column,.ui.two.column.grid>.column,.ui.grid>.two.column.row>.column{width:50%}.ui.three.column.grid>.row>.column,.ui.three.column.grid>.column,.ui.grid>.three.column.row>.column{width:33.3333%}.ui.four.column.grid>.row>.column,.ui.four.column.grid>.column,.ui.grid>.four.column.row>.column{width:25%}.ui.five.column.grid>.row>.column,.ui.five.column.grid>.column,.ui.grid>.five.column.row>.column{width:20%}.ui.six.column.grid>.row>.column,.ui.six.column.grid>.column,.ui.grid>.six.column.row>.column{width:16.66667%}.ui.seven.column.grid>.row>.column,.ui.seven.column.grid>.column,.ui.grid>.seven.column.row>.column{width:14.2857%}.ui.eight.column.grid>.row>.column,.ui.eight.column.grid>.column,.ui.grid>.eight.column.row>.column{width:12.5%}.ui.nine.column.grid>.row>.column,.ui.nine.column.grid>.column,.ui.grid>.nine.column.row>.column{width:11.1111%}.ui.ten.column.grid>.row>.column,.ui.ten.column.grid>.column,.ui.grid>.ten.column.row>.column{width:10%}.ui.eleven.column.grid>.row>.column,.ui.eleven.column.grid>.column,.ui.grid>.eleven.column.row>.column{width:9.0909%}.ui.twelve.column.grid>.row>.column,.ui.twelve.column.grid>.column,.ui.grid>.twelve.column.row>.column{width:8.3333%}.ui.thirteen.column.grid>.row>.column,.ui.thirteen.column.grid>.column,.ui.grid>.thirteen.column.row>.column{width:7.6923%}.ui.fourteen.column.grid>.row>.column,.ui.fourteen.column.grid>.column,.ui.grid>.fourteen.column.row>.column{width:7.1428%}.ui.fifteen.column.grid>.row>.column,.ui.fifteen.column.grid>.column,.ui.grid>.fifteen.column.row>.column{width:6.6666%}.ui.sixteen.column.grid>.row>.column,.ui.sixteen.column.grid>.column,.ui.grid>.sixteen.column.row>.column{width:6.25%}.ui.grid>.column:only-child,.ui.grid>.row>.column:only-child{width:100%}.ui.grid .left.floated.column{float:left}.ui.grid .right.floated.column{float:right}.ui.divided.grid,.ui.divided.grid>.row{display:table}.ui.divided.grid>.column,.ui.divided.grid>.row>.column{display:table-cell;-webkit-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);-moz-box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8);box-shadow:-1px 0 0 0 rgba(0,0,0,.1),-2px 0 0 0 rgba(255,255,255,.8)}.ui.divided.grid>.column:first-child,.ui.divided.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.vertically.divided.grid>.row{-webkit-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8);-moz-box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8);box-shadow:0 -1px 0 0 rgba(0,0,0,.1),0 -2px 0 0 rgba(255,255,255,.8)}.ui.vertically.divided.grid>.row>.column,.ui.vertically.divided.grid>.column,.ui.vertically.divided.grid>.row:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.grid{display:table;width:100%;margin-left:0!important;margin-right:0!important;-webkit-box-shadow:0 0 0 1px #DFDFDF;-moz-box-shadow:0 0 0 1px #DFDFDF;box-shadow:0 0 0 1px #DFDFDF}.ui.celled.grid>.row{display:table;width:100%;margin-top:0;padding-top:0;-webkit-box-shadow:0 -1px 0 0 #dfdfdf;-moz-box-shadow:0 -1px 0 0 #dfdfdf;box-shadow:0 -1px 0 0 #dfdfdf}.ui.celled.grid>.column,.ui.celled.grid>.row>.column{display:table-cell;padding:.75em;-webkit-box-shadow:-1px 0 0 0 #dfdfdf;-moz-box-shadow:-1px 0 0 0 #dfdfdf;box-shadow:-1px 0 0 0 #dfdfdf}.ui.celled.grid>.column:first-child,.ui.celled.grid>.row>.column:first-child{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.celled.repsonsive.grid{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.left.aligned.grid,.ui.left.aligned.grid>.row>.column,.ui.left.aligned.grid>.column,.ui.grid .left.aligned.column,.ui.grid>.left.aligned.row>.column{text-align:left}.ui.center.aligned.grid,.ui.center.aligned.grid>.row>.column,.ui.center.aligned.grid>.column,.ui.grid .center.aligned.column,.ui.grid>.center.aligned.row>.column{text-align:center}.ui.right.aligned.grid,.ui.right.aligned.grid>.row>.column,.ui.right.aligned.grid>.column,.ui.grid .right.aligned.column,.ui.grid>.right.aligned.row>.column{text-align:right}.ui.top.aligned.grid,.ui.top.aligned.grid>.row>.column,.ui.top.aligned.grid>.column,.ui.grid .top.aligned.column,.ui.grid>.top.aligned.row>.column{vertical-align:top}.ui.middle.aligned.grid,.ui.middle.aligned.grid>.row>.column,.ui.middle.aligned.grid>.column,.ui.grid .middle.aligned.column,.ui.grid>.middle.aligned.row>.column{vertical-align:middle}.ui.bottom.aligned.grid,.ui.bottom.aligned.grid>.row>.column,.ui.bottom.aligned.grid>.column,.ui.grid .bottom.aligned.column,.ui.grid>.bottom.aligned.row>.column{vertical-align:bottom}.ui.grid>.equal.row{display:table;width:100%}.ui.grid>.equal.row>.column{display:table-cell}@media only screen and (max-width:960px){.ui.stackable.grid{display:block!important;padding:0}.ui.stackable.grid .row>.column,.ui.stackable.grid>.column{display:block!important;width:auto!important;margin:1.5em 5% 0!important;padding:1.5em 0 0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.stackable.divided.grid .column,.ui.stackable.celled.grid .column{border-top:1px dotted rgba(0,0,0,.1)}.ui.stackable.grid>.row:first-child>.column:first-child,.ui.stackable.grid>.column:first-child{margin-top:0!important;padding-top:0!important}.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:first-child,.ui.stackable.celled.grid>.column:first-child{border-top:0!important}.ui.stackable.grid .vertical.pointing.menu .item:after{display:none}} \ No newline at end of file diff --git a/build/minified/collections/menu.min.css b/build/minified/collections/menu.min.css index fda5b27af..7da1b6fa7 100644 --- a/build/minified/collections/menu.min.css +++ b/build/minified/collections/menu.min.css @@ -1 +1 @@ -.ui.menu{margin:1rem 0rem;background-color:#FFF;font-size:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.1875rem;-moz-border-radius:.1875rem;border-radius:.1875rem}.ui.menu:first-child{margin-top:0rem}.ui.menu:last-child{margin-bottom:0rem}.ui.menu:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.menu>.item:first-child{border-radius:.1875em 0 0 .1875em}.ui.menu>.item:last-child{border-radius:0 .1875em .1875em 0}.ui.menu .item,.ui.menu .item>a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-moz-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-o-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-ms-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;transition:opacity .2s ease,background .2s ease,box-shadow .2s ease}.ui.menu .item,.ui.menu .item>a{color:rgba(0,0,0,.75)}.ui.menu .item>a:hover{background-color:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.menu .item .item,.ui.menu .item .item>a{color:rgba(30,30,30,.8)}.ui.menu .item .item .item,.ui.menu .item .item .item>a{color:rgba(30,30,30,.6)}.ui.menu .dropdown.item .menu .item,.ui.menu .dropdown.item .menu .item a{color:rgba(0,0,0,.75)}.ui.menu .item .menu a.item:hover,.ui.menu .item .menu a.item.hover,.ui.menu .item .menu .link.item:hover,.ui.menu .item .menu .link.item.hover{color:rgba(35,35,35,.95)}.ui.menu .dropdown.item .menu .item a:hover{color:rgba(0,0,0,.9)}.ui.menu .active.item,.ui.menu .active.item a{color:rgba(0,0,0,.95);-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.ui.menu .item{position:relative;display:inline-block;padding:.75em .95em;border-top:0 solid rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-user-select:-moz-none;-khtml-user-select:none;user-select:none}.ui.menu .item>a{display:block;margin:-.75em -.95em;padding:.75em .95em}.ui.menu .menu{margin:0}.ui.menu .menu.left,.ui.menu .item.left{float:left}.ui.menu .menu.right,.ui.menu .item.right{float:right}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;width:1px;height:100%;background-image:-webkit-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-o-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-ms-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%)}.ui.menu .menu.right .item:before,.ui.menu .item.right:before{right:auto;left:0}.ui.menu .item:last-child::before{display:none}.ui.menu .text.item>*,.ui.menu .item>p:only-child{line-height:1.3;color:rgba(0,0,0,.6)}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:only-child{margin:0}.ui.menu input{margin:.25em 0;padding-top:.55em;padding-bottom:.55em}.ui.menu .header.item{background-color:rgba(0,0,0,.04);margin:0}.ui.vertical.menu .header.item{font-weight:700}.ui.menu .dropdown.item .menu .item{color:rgba(0,0,0,.75)}.ui.menu .ui.dropdown .menu .item:before{display:none}.ui.menu .item>.label,.ui.menu .item>a>.label{font-size:.8em;margin:-.3em 0 -.3em .3em;padding:.3em .8em;vertical-align:baseline;text-transform:none}.ui.menu .item>.floating.label,.ui.menu .item>a>.floating.label{padding:.3em .8em}.ui.menu .item>img:only-child{display:block;max-width:100%;margin:0 auto}.ui.link.menu .item:hover,.ui.menu .item.hover,.ui.menu .link.item:hover,.ui.menu a.item:hover,.ui.menu .ui.dropdown .menu .item.hover,.ui.menu .ui.dropdown .menu .item:hover{cursor:pointer;background-color:rgba(0,0,0,.02)}.ui.menu .ui.dropdown.hover,.ui.menu .ui.dropdown:hover{-webkit-border-bottom-right-radius:0;-moz-border-bottom-right-radius:0;border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-bottom-left-radius:0;border-bottom-left-radius:0}.ui.link.menu .item:active,.ui.menu .item.down,.ui.menu .link.item:active,.ui.menu a.item:active,.ui.menu .item>a:active,.ui.menu .ui.dropdown .menu .item.down,.ui.menu .ui.dropdown .menu .item:active{background-color:rgba(0,0,0,.05)}.ui.menu .active.item{padding-top:.55em;border-top:.2em solid rgba(50,50,50,.8);color:rgba(0,0,0,.95);background-color:rgba(0,0,0,.01)}.ui.vertical.menu .active.item{border-left:.2em solid rgba(50,50,50,.8);padding-top:.75em;padding-left:.76em;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.vertical.menu>.active.item:first-child{-webkit-border-radius:0 .1875em 0 0;-moz-border-radius:0 .1875em 0 0;border-radius:0 .1875em 0 0}.ui.vertical.menu>.active.item:last-child{-webkit-border-radius:0 0 .1875em;-moz-border-radius:0 0 .1875em;border-radius:0 0 .1875em}.ui.vertical.menu>.active.item:only-child{-webkit-border-radius:0 .1875em .1875em 0;-moz-border-radius:0 .1875em .1875em 0;border-radius:0 .1875em .1875em 0}.ui.vertical.menu .active.item .menu .active.item{border-left:0}.ui.vertical.menu .active.item .menu .active.item{padding-left:1.5rem}.ui.vertical.menu .item .menu .active.item{background-color:rgba(0,0,0,.03);border-left:0}.ui.menu .item.disabled,.ui.menu .item.disabled:hover,.ui.menu .item.disabled.hover{cursor:default;color:rgba(0,0,0,.2);background-color:transparent}.ui.menu.loading{position:relative}.ui.menu.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/loader-large.gif) no-repeat 50% 50%;visibility:visible}.ui.vertical.menu .item{display:block;border-top:0;border-left:0 solid rgba(0,0,0,0);border-right:0}.ui.vertical.menu>.item:first-child{border-radius:.1875em .1875em 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .1875em .1875em}.ui.vertical.menu .item>.icon{float:right;width:1.22em;margin:0 0 0 .5em}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-moz-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-ms-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%)}.ui.vertical.menu .item:first-child:before{background-image:none}.ui.vertical.menu .dropdown.item>i{float:right}.ui.vertical.menu .dropdown.item .menu{top:0!important;left:100%;margin:0}.ui.vertical.menu .dropdown.item .menu .item{font-size:.9em;padding:.75em 1em}.ui.vertical.menu .dropdown.item .menu .item .icon{margin-right:0}.ui.vertical.menu .item>.menu{margin:.5em -.95em 0}.ui.vertical.menu .item>.menu>.item{padding:.5rem 1.5rem;font-size:.85em}.ui.vertical.menu .item>.menu>.item:before{display:none}.ui.vertical.menu .item>.menu>.item>a{margin:-.5rem -1.5rem;padding:.5rem 1.5rem}.ui.tiered.menu>.menu>.item{color:rgba(0,0,0,.5)}.ui.tiered.menu>.menu>.item:hover,.ui.tiered.menu>.menu>.item.hover{color:rgba(0,0,0,.8)}.ui.tiered.menu .item.active{box-shadow:0 1px 0 0 #FBFBFB;color:rgba(0,0,0,.8)}.ui.tiered.menu .sub.menu{background-color:rgba(0,0,0,.01);border-radius:0;border-top:1px solid rgba(0,0,0,.1);box-shadow:none;color:#FFF}.ui.tiered.menu .sub.menu .item{font-size:.9rem}.ui.tiered.menu .sub.menu .item:before{background-image:none}.ui.tiered.menu .sub.menu .active.item{padding-top:.75em;background-color:transparent;border-radius:0;border-top:medium none;box-shadow:none;color:rgba(0,0,0,.7)}.ui.inverted.tiered.menu>.menu>.item{color:rgba(255,255,255,.5)}.ui.inverted.tiered.menu .sub.menu{background-color:rgba(0,0,0,.2)}.ui.inverted.tiered.menu .sub.menu .item{color:rgba(255,255,255,.6)}.ui.inverted.tiered.menu>.menu>.item:hover,.ui.inverted.tiered.menu>.menu>.item.hover{color:rgba(255,255,255,.9)}.ui.inverted.tiered.menu>.sub.menu>.active.item,.ui.inverted.tiered.menu>.menu>.active.item{color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.menu .green.active.item,.ui.green.menu .active.item{border-color:#A1CF64!important}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#EF4D6D!important}.ui.menu .blue.active.item,.ui.blue.menu .active.item{border-color:#6ECFF5!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#564F8A!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#F05940!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00B5AD!important}.ui.pagination.menu{margin:0;display:inline-block}.ui.pagination.menu .item{min-width:2.7em;min-height:2.55em;text-align:center}.ui.pagination.menu.floated{display:block}.ui.pagination.menu .active.item{border-top:0;padding-top:.75em;background-color:rgba(0,0,0,.05)}.ui.inverted.menu{background-color:#333;box-shadow:none}.ui.inverted.menu .header.item{margin:0;background-color:rgba(0,0,0,.3);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a{color:#FFF}.ui.inverted.menu .item .item,.ui.inverted.menu .item .item>a{color:rgba(255,255,255,.8)}.ui.inverted.menu .item .item>a:hover{background-color:rgba(255,255,255,.03);color:rgba(255,255,255,.9)}.ui.inverted.menu .item>p:only-child{color:rgba(255,255,255,.75)}.ui.inverted.menu .dropdown.item .menu .item,.ui.inverted.menu .dropdown.item .menu .item a{color:rgba(0,0,0,.75)!important}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover,.ui.inverted.menu .item.disabled.hover{color:rgba(255,255,255,.2)}.ui.inverted.menu .item:before{background-image:-webkit-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-moz-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%)}.ui.vertical.inverted.menu .item:before{background-image:-webkit-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%)}.ui.link.inverted.menu .item:hover,.ui.inverted.menu .item.hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.inverted.menu .dropdown.item.hover,.ui.inverted.menu .dropdown.item:hover{background-color:rgba(255,255,255,.1)}.ui.inverted.menu a.item:hover,.ui.inverted.menu .item.hover,.ui.inverted.menu .item>a:hover,.ui.inverted.menu .item .menu a.item:hover,.ui.inverted.menu .item .menu a.item.hover,.ui.inverted.menu .item .menu .link.item:hover,.ui.inverted.menu .item .menu .link.item.hover{color:#fff}.ui.inverted.menu .item.down,.ui.inverted.menu a.item:active,.ui.inverted.menu .item>a:active,.ui.inverted.menu .item.down,.ui.inverted.menu .dropdown.item:active,.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background-color:rgba(255,255,255,.15)}.ui.inverted.menu .active.item{border-color:transparent!important;background-color:rgba(255,255,255,.2)}.ui.inverted.menu .active.item,.ui.inverted.menu .active.item a{color:#fff}.ui.inverted.vertical.menu .item .menu .active.item{background-color:rgba(255,255,255,.2);color:#fff}.ui.inverted.pointing.menu .active.item:after{background-color:#505050;box-shadow:none}.ui.inverted.pointing.menu .active.item:hover:after{background-color:#3B3B3B}.ui.floated.menu{float:left;margin:0rem .5rem 0rem 0rem}.ui.right.floated.menu{float:right;margin:0rem 0rem 0rem .5rem}.ui.grey.menu{background-color:#F0F0F0}.ui.inverted.green.menu{background-color:#A1CF64}.ui.inverted.green.pointing.menu .active.item:after{background-color:#A1CF64}.ui.inverted.red.menu{background-color:#EF4D6D}.ui.inverted.red.pointing.menu .active.item:after{background-color:#F16883}.ui.inverted.blue.menu{background-color:#6ECFF5}.ui.inverted.blue.pointing.menu .active.item:after{background-color:#6ECFF5}.ui.inverted.purple.menu{background-color:#564F8A}.ui.inverted.purple.pointing.menu .active.item:after{background-color:#564F8A}.ui.inverted.orange.menu{background-color:#F05940}.ui.inverted.orange.pointing.menu .active.item:after{background-color:#F05940}.ui.inverted.teal.menu{background-color:#00B5AD}.ui.inverted.teal.pointing.menu .active.item:after{background-color:#00B5AD}.ui.text.menu{background-color:transparent;margin:1rem -1rem;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.text.menu>.item{opacity:.6;margin:0 1em;padding:0;min-height:0!important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6);-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-o-transition:opacity .2s ease;-ms-transition:opacity .2s ease;transition:opacity .2s ease}.ui.text.menu>.item:before{display:none}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(50,50,50,.8);font-size:.9rem;padding:0;text-transform:uppercase;font-weight:700}.ui.text.menu .header.item>a{background-color:transparent}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1rem 0}.ui.vertical.text.menu:first-child{margin-top:0rem}.ui.vertical.text.menu:last-child{margin-bottom:0rem}.ui.vertical.text.menu .item{float:left;clear:left;margin:.5em 0}.ui.vertical.text.menu .item>.icon{float:none;margin:0 .75em 0 0}.ui.vertical.text.menu .header.item{margin:.8em 0}.ui.text.menu .item.hover,.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;padding:0;border:0;opacity:1;font-weight:700}.ui.text.pointing.menu .active.item:after{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.text.attached.menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.green.text.menu .active.item{color:#A1CF64}.ui.red.text.menu .active.item{color:#EF4D6D}.ui.blue.text.menu .active.item{color:#6ECFF5}.ui.purple.text.menu .active.item{color:#564F8A}.ui.orange.text.menu .active.item{color:#F05940}.ui.teal.text.menu .active.item{color:#00B5AD}.ui.secondary.menu{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.menu>.item{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:0;min-height:0!important;margin:0 .25em;padding:.5em 1em;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.secondary.menu>.item:before{display:none}.ui.secondary.menu .link.item,.ui.secondary.menu a.item{color:rgba(0,0,0,.4)}.ui.secondary.menu .header.item{background-color:transparent;border-right:.1em solid rgba(0,0,0,.1);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.menu>.active.item{border-top:0;padding-top:.5em;background-color:rgba(0,0,0,.08);color:rgba(0,0,0,.8)}.ui.secondary.vertical.menu>.active.item{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.secondary.inverted.menu>.active.item{background-color:rgba(255,255,255,.2)}.ui.secondary.item.menu>.item{margin:0}.ui.secondary.attached.menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.secondary.pointing.menu{border-bottom:3px solid rgba(0,0,0,.1)}.ui.secondary.pointing.menu>.item{margin:0 0 -3px;padding:.6em .95em;border-bottom:3px solid rgba(0,0,0,0);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-transition:color .2s;-moz-transition:color .2s;-o-transition:color .2s;-ms-transition:color .2s;transition:color .2s}.ui.secondary.pointing.menu>.item:after{display:none}.ui.secondary.pointing.menu>.item.hover,.ui.secondary.pointing.menu>.item:hover{background-color:transparent;color:rgba(0,0,0,.7)}.ui.secondary.pointing.menu>.item:active,.ui.secondary.pointing.menu>.item.down{background-color:transparent;border-color:rgba(0,0,0,.2)}.ui.secondary.pointing.menu>.item.active{background-color:transparent;border-color:rgba(0,0,0,.4)}.ui.secondary.vertical.pointing.menu{border:0;border-right:3px solid rgba(0,0,0,.1)}.ui.secondary.vertical.menu>.item{border:0;margin:0 0 .3em;padding:.6em .8em;-webkit-border-radius:.1875em;-moz-border-radius:.1875em;border-radius:.1875em}.ui.secondary.vertical.menu>.header.item{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.vertical.pointing.menu>.item{margin:0 -3px 0 0;border-bottom:0;border-right:3px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.vertical.pointing.menu>.item.hover,.ui.secondary.vertical.pointing.menu>.item:hover{background-color:transparent;color:rgba(0,0,0,.7)}.ui.secondary.vertical.pointing.menu>.item:active,.ui.secondary.vertical.pointing.menu>.item.down{background-color:transparent;border-color:rgba(0,0,0,.2)}.ui.secondary.vertical.pointing.menu>.item.active{background-color:transparent;border-color:rgba(0,0,0,.4);color:rgba(0,0,0,.85)}.ui.secondary.inverted.pointing.menu{border-bottom:3px solid rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu>.item{color:rgba(255,255,255,.7)}.ui.secondary.inverted.pointing.menu>.item.hover,.ui.secondary.inverted.pointing.menu>.item:hover{color:rgba(255,255,255,.85)}.ui.secondary.inverted.pointing.menu>.item:active,.ui.secondary.inverted.pointing.menu>.item.down{border-color:rgba(255,255,255,.4)}.ui.secondary.inverted.pointing.menu>.item.active{border-color:rgba(255,255,255,.8);color:#fff}.ui.secondary.inverted.vertical.pointing.menu{border-right:3px solid rgba(255,255,255,.1);border-bottom:0}.ui.secondary.inverted.vertical.pointing.menu .item:active,.ui.secondary.inverted.vertical.pointing.menu .item.down{box-shadow:.2em 0 0 0 rgba(255,255,255,.2)}.ui.secondary.inverted.vertical.pointing.menu .item.active{box-shadow:.2em 0 0 0 rgba(255,255,255,.4)}.ui.icon.menu,.ui.vertical.icon.menu{width:auto;display:inline-block;min-height:0}.ui.icon.menu .item{text-align:center;color:rgba(60,60,60,.7)}.ui.icon.menu .item .icon{display:block;float:none;opacity:1;margin:0 auto}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item .icon{margin:0}.ui.inverted.icon.menu .item{color:rgba(255,255,255,.8)}.ui.inverted.icon.menu .icon{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .icon{display:block;font-size:1.5em;margin:0 auto .3em}.ui.fitted.menu .item,.ui.fitted.menu .item>a,.ui.fitted.menu .item .menu .item,.ui.fitted.menu .item .menu .item>a,.ui.menu .fitted.item,.ui.menu .fitted.item>a{padding-top:0;padding-bottom:0}.ui.tight.menu .item,.ui.tight.menu .item>a,.ui.tight.menu .item .menu .item,.ui.tight.menu .item .menu .item>a,.ui.menu .tight.item,.ui.menu .tight.item>a{padding:0}.ui.borderless.menu .item:before,.ui.borderless.menu .item>a:before,.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item .menu .item>a:before,.ui.menu .borderless.item:before,.ui.menu .borderless.item>a:before{background-image:none}.ui.compact.menu{display:inline-block;margin:0;vertical-align:middle}.ui.vertical.compact.menu{width:auto!important}.ui.menu.fluid,.ui.vertical.menu.fluid{display:block!important;width:100%}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;text-align:center}.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:10;margin:0;border:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{-webkit-border-radius:0!important;-moz-border-radius:0!important;border-radius:0!important}.ui.menu.fixed.top{top:0;left:0;right:auto;bottom:auto}.ui.menu.fixed.right{top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui.menu.fixed.bottom{bottom:0;left:0;top:auto;right:auto}.ui.menu.fixed.left{top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.pointing.menu .active.item:after{position:absolute;bottom:-.35em;left:50%;content:"";margin-left:-.3em;width:.6em;height:.6em;border:0;border-bottom:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .2s ease;-moz-transition:background .2s ease;-o-transition:background .2s ease;-ms-transition:background .2s ease;transition:background .2s ease}.ui.vertical.pointing.menu .active.item:after{position:absolute;top:50%;right:-.4em;bottom:auto;left:auto;border:0;border-top:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);margin-top:-.3em}.ui.pointing.menu .active.item:after{background-color:#FCFCFC}.ui.pointing.menu .active.item.hover:after,.ui.pointing.menu .active.item:hover:after{background-color:#FAFAFA}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#F4F4F4}.ui.pointing.menu .active.item.down:after,.ui.pointing.menu .active.item:active:after{background-color:#F0F0F0}.ui.menu.attached{margin:0rem;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.menu{-moz-border-radius:.1875em .1875em 0 0;-webkit-border-radius:.1875em .1875em 0 0;border-radius:.1875em .1875em 0 0}.ui.menu.bottom.attached{-moz-border-radius:0 0 .1875em .1875em;-webkit-border-radius:0 0 .1875em .1875em;border-radius:0 0 .1875em .1875em}.ui.vertical.menu .item{min-height:0!important}.ui.small.menu .item{font-size:.875rem;min-height:2.25rem}.ui.small.vertical.menu{width:13rem}.ui.menu .item{font-size:1rem;min-height:2.5em}.ui.vertical.menu{width:15rem}.ui.large.menu .item{font-size:1.125rem}.ui.large.vertical.menu{width:18rem} \ No newline at end of file +.ui.menu{margin:1rem 0rem;background-color:#FFF;font-size:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1);-webkit-border-radius:.1875rem;-moz-border-radius:.1875rem;border-radius:.1875rem}.ui.menu:first-child{margin-top:0rem}.ui.menu:last-child{margin-bottom:0rem}.ui.menu:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.menu>.item:first-child{border-radius:.1875em 0 0 .1875em}.ui.menu>.item:last-child{border-radius:0 .1875em .1875em 0}.ui.menu .item,.ui.menu .item>a{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-moz-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-o-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;-ms-transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;transition:opacity .2s ease,background .2s ease,box-shadow .2s ease}.ui.menu .item,.ui.menu .item>a{color:rgba(0,0,0,.75)}.ui.menu .item>a:hover{background-color:rgba(0,0,0,.03);color:rgba(0,0,0,.8)}.ui.menu .item .item,.ui.menu .item .item>a{color:rgba(30,30,30,.8)}.ui.menu .item .item .item,.ui.menu .item .item .item>a{color:rgba(30,30,30,.6)}.ui.menu .dropdown.item .menu .item,.ui.menu .dropdown.item .menu .item a{color:rgba(0,0,0,.75)}.ui.menu .item .menu a.item:hover,.ui.menu .item .menu a.item.hover,.ui.menu .item .menu .link.item:hover,.ui.menu .item .menu .link.item.hover{color:rgba(35,35,35,.95)}.ui.menu .dropdown.item .menu .item a:hover{color:rgba(0,0,0,.9)}.ui.menu .active.item,.ui.menu .active.item a{color:rgba(0,0,0,.95);-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.ui.menu .item{position:relative;display:inline-block;padding:.75em .95em;border-top:0 solid rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-user-select:-moz-none;-khtml-user-select:none;user-select:none}.ui.menu .item>a{display:block;margin:-.75em -.95em;padding:.75em .95em}.ui.menu .menu{margin:0}.ui.menu .menu.left,.ui.menu .item.left{float:left}.ui.menu .menu.right,.ui.menu .item.right{float:right}.ui.menu .item:before{position:absolute;content:'';top:0;right:0;width:1px;height:100%;background-image:-webkit-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-o-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:-ms-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%);background-image:linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1) 50%,rgba(0,0,0,.05) 100%)}.ui.menu .menu.right .item:before,.ui.menu .item.right:before{right:auto;left:0}.ui.menu .item:last-child::before{display:none}.ui.menu .text.item>*,.ui.menu .item>p:only-child{line-height:1.3;color:rgba(0,0,0,.6)}.ui.menu .item>p:first-child{margin-top:0}.ui.menu .item>p:only-child{margin:0}.ui.menu input{margin:.25em 0;padding-top:.55em;padding-bottom:.55em}.ui.menu .header.item{background-color:rgba(0,0,0,.04);margin:0}.ui.vertical.menu .header.item{font-weight:700}.ui.menu .dropdown.item .menu .item{color:rgba(0,0,0,.75)}.ui.menu .ui.dropdown .menu .item:before{display:none}.ui.menu .item>.label,.ui.menu .item>a>.label{font-size:.875em;margin:-.3em 0 -.3em .3em;padding:.3em .8em;vertical-align:baseline;text-transform:none}.ui.menu .item>.floating.label,.ui.menu .item>a>.floating.label{padding:.3em .8em}.ui.menu .item>img:only-child{display:block;max-width:100%;margin:0 auto}.ui.link.menu .item:hover,.ui.menu .item.hover,.ui.menu .link.item:hover,.ui.menu a.item:hover,.ui.menu .ui.dropdown .menu .item.hover,.ui.menu .ui.dropdown .menu .item:hover{cursor:pointer;background-color:rgba(0,0,0,.02)}.ui.menu .ui.dropdown.hover,.ui.menu .ui.dropdown:hover{-webkit-border-bottom-right-radius:0;-moz-border-bottom-right-radius:0;border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-bottom-left-radius:0;border-bottom-left-radius:0}.ui.link.menu .item:active,.ui.menu .item.down,.ui.menu .link.item:active,.ui.menu a.item:active,.ui.menu .item>a:active,.ui.menu .ui.dropdown .menu .item.down,.ui.menu .ui.dropdown .menu .item:active{background-color:rgba(0,0,0,.05)}.ui.menu .active.item{padding-top:.55em;border-top:.2em solid rgba(50,50,50,.8);color:rgba(0,0,0,.95);background-color:rgba(0,0,0,.01)}.ui.vertical.menu .active.item{border-left:.2em solid rgba(50,50,50,.8);padding-top:.75em;padding-left:.76em;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.vertical.menu>.active.item:first-child{-webkit-border-radius:0 .1875em 0 0;-moz-border-radius:0 .1875em 0 0;border-radius:0 .1875em 0 0}.ui.vertical.menu>.active.item:last-child{-webkit-border-radius:0 0 .1875em;-moz-border-radius:0 0 .1875em;border-radius:0 0 .1875em}.ui.vertical.menu>.active.item:only-child{-webkit-border-radius:0 .1875em .1875em 0;-moz-border-radius:0 .1875em .1875em 0;border-radius:0 .1875em .1875em 0}.ui.vertical.menu .active.item .menu .active.item{border-left:0}.ui.vertical.menu .active.item .menu .active.item{padding-left:1.5rem}.ui.vertical.menu .item .menu .active.item{background-color:rgba(0,0,0,.03);border-left:0}.ui.menu .item.disabled,.ui.menu .item.disabled:hover,.ui.menu .item.disabled.hover{cursor:default;color:rgba(0,0,0,.2);background-color:transparent}.ui.menu.loading{position:relative}.ui.menu.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/loader-large.gif) no-repeat 50% 50%;visibility:visible}.ui.vertical.menu .item{display:block;border-top:0;border-left:0 solid rgba(0,0,0,0);border-right:0}.ui.vertical.menu>.item:first-child{border-radius:.1875em .1875em 0 0}.ui.vertical.menu>.item:last-child{border-radius:0 0 .1875em .1875em}.ui.vertical.menu .item>.icon{float:right;width:1.22em;margin:0 0 0 .5em}.ui.vertical.menu .item:before{position:absolute;content:'';top:0;left:0;width:100%;height:1px;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-moz-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:-ms-linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%);background-image:linear-gradient(left,rgba(0,0,0,.03) 0,rgba(0,0,0,.1) 1.5em,rgba(0,0,0,.03) 100%)}.ui.vertical.menu .item:first-child:before{background-image:none}.ui.vertical.menu .dropdown.item>i{float:right}.ui.vertical.menu .dropdown.item .menu{top:0!important;left:100%;margin:0}.ui.vertical.menu .dropdown.item .menu .item{font-size:.875em;padding:.75em 1em}.ui.vertical.menu .dropdown.item .menu .item .icon{margin-right:0}.ui.vertical.menu .item>.menu{margin:.5em -.95em 0}.ui.vertical.menu .item>.menu>.item{padding:.5rem 1.5rem;font-size:.875em}.ui.vertical.menu .item>.menu>.item:before{display:none}.ui.vertical.menu .item>.menu>.item>a{margin:-.5rem -1.5rem;padding:.5rem 1.5rem}.ui.tiered.menu>.menu>.item{color:rgba(0,0,0,.5)}.ui.tiered.menu>.menu>.item:hover,.ui.tiered.menu>.menu>.item.hover{color:rgba(0,0,0,.8)}.ui.tiered.menu .item.active{box-shadow:0 1px 0 0 #FBFBFB;color:rgba(0,0,0,.8)}.ui.tiered.menu .sub.menu{background-color:rgba(0,0,0,.01);border-radius:0;border-top:1px solid rgba(0,0,0,.1);box-shadow:none;color:#FFF}.ui.tiered.menu .sub.menu .item{font-size:.875rem}.ui.tiered.menu .sub.menu .item:before{background-image:none}.ui.tiered.menu .sub.menu .active.item{padding-top:.75em;background-color:transparent;border-radius:0;border-top:medium none;box-shadow:none;color:rgba(0,0,0,.7)}.ui.inverted.tiered.menu>.menu>.item{color:rgba(255,255,255,.5)}.ui.inverted.tiered.menu .sub.menu{background-color:rgba(0,0,0,.2)}.ui.inverted.tiered.menu .sub.menu .item{color:rgba(255,255,255,.6)}.ui.inverted.tiered.menu>.menu>.item:hover,.ui.inverted.tiered.menu>.menu>.item.hover{color:rgba(255,255,255,.9)}.ui.inverted.tiered.menu>.sub.menu>.active.item,.ui.inverted.tiered.menu>.menu>.active.item{color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.menu .green.active.item,.ui.green.menu .active.item{border-color:#A1CF64!important}.ui.menu .red.active.item,.ui.red.menu .active.item{border-color:#EF4D6D!important}.ui.menu .blue.active.item,.ui.blue.menu .active.item{border-color:#6ECFF5!important}.ui.menu .purple.active.item,.ui.purple.menu .active.item{border-color:#564F8A!important}.ui.menu .orange.active.item,.ui.orange.menu .active.item{border-color:#F05940!important}.ui.menu .teal.active.item,.ui.teal.menu .active.item{border-color:#00B5AD!important}.ui.pagination.menu{margin:0;display:inline-block}.ui.pagination.menu .item{min-width:2.7em;min-height:2.55em;text-align:center}.ui.pagination.menu.floated{display:block}.ui.pagination.menu .active.item{border-top:0;padding-top:.75em;background-color:rgba(0,0,0,.05)}.ui.inverted.menu{background-color:#333;box-shadow:none}.ui.inverted.menu .header.item{margin:0;background-color:rgba(0,0,0,.3);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.menu .item,.ui.inverted.menu .item>a{color:#FFF}.ui.inverted.menu .item .item,.ui.inverted.menu .item .item>a{color:rgba(255,255,255,.8)}.ui.inverted.menu .item .item>a:hover{background-color:rgba(255,255,255,.03);color:rgba(255,255,255,.9)}.ui.inverted.menu .item>p:only-child{color:rgba(255,255,255,.75)}.ui.inverted.menu .dropdown.item .menu .item,.ui.inverted.menu .dropdown.item .menu .item a{color:rgba(0,0,0,.75)!important}.ui.inverted.menu .item.disabled,.ui.inverted.menu .item.disabled:hover,.ui.inverted.menu .item.disabled.hover{color:rgba(255,255,255,.2)}.ui.inverted.menu .item:before{background-image:-webkit-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-moz-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:linear-gradient(top,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%)}.ui.vertical.inverted.menu .item:before{background-image:-webkit-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%);background-image:linear-gradient(left,rgba(255,255,255,.03) 0,rgba(255,255,255,.1) 50%,rgba(255,255,255,.03) 100%)}.ui.link.inverted.menu .item:hover,.ui.inverted.menu .item.hover,.ui.inverted.menu .link.item:hover,.ui.inverted.menu a.item:hover,.ui.inverted.menu .dropdown.item.hover,.ui.inverted.menu .dropdown.item:hover{background-color:rgba(255,255,255,.1)}.ui.inverted.menu a.item:hover,.ui.inverted.menu .item.hover,.ui.inverted.menu .item>a:hover,.ui.inverted.menu .item .menu a.item:hover,.ui.inverted.menu .item .menu a.item.hover,.ui.inverted.menu .item .menu .link.item:hover,.ui.inverted.menu .item .menu .link.item.hover{color:#fff}.ui.inverted.menu .item.down,.ui.inverted.menu a.item:active,.ui.inverted.menu .item>a:active,.ui.inverted.menu .item.down,.ui.inverted.menu .dropdown.item:active,.ui.inverted.menu .link.item:active,.ui.inverted.menu a.item:active{background-color:rgba(255,255,255,.15)}.ui.inverted.menu .active.item{border-color:transparent!important;background-color:rgba(255,255,255,.2)}.ui.inverted.menu .active.item,.ui.inverted.menu .active.item a{color:#fff}.ui.inverted.vertical.menu .item .menu .active.item{background-color:rgba(255,255,255,.2);color:#fff}.ui.inverted.pointing.menu .active.item:after{background-color:#505050;box-shadow:none}.ui.inverted.pointing.menu .active.item:hover:after{background-color:#3B3B3B}.ui.floated.menu{float:left;margin:0rem .5rem 0rem 0rem}.ui.right.floated.menu{float:right;margin:0rem 0rem 0rem .5rem}.ui.grey.menu{background-color:#F0F0F0}.ui.inverted.green.menu{background-color:#A1CF64}.ui.inverted.green.pointing.menu .active.item:after{background-color:#A1CF64}.ui.inverted.red.menu{background-color:#EF4D6D}.ui.inverted.red.pointing.menu .active.item:after{background-color:#F16883}.ui.inverted.blue.menu{background-color:#6ECFF5}.ui.inverted.blue.pointing.menu .active.item:after{background-color:#6ECFF5}.ui.inverted.purple.menu{background-color:#564F8A}.ui.inverted.purple.pointing.menu .active.item:after{background-color:#564F8A}.ui.inverted.orange.menu{background-color:#F05940}.ui.inverted.orange.pointing.menu .active.item:after{background-color:#F05940}.ui.inverted.teal.menu{background-color:#00B5AD}.ui.inverted.teal.pointing.menu .active.item:after{background-color:#00B5AD}.ui.text.menu{background-color:transparent;margin:1rem -1rem;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.text.menu>.item{opacity:.6;margin:0 1em;padding:0;min-height:0!important;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.6);-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-o-transition:opacity .2s ease;-ms-transition:opacity .2s ease;transition:opacity .2s ease}.ui.text.menu>.item:before{display:none}.ui.text.menu .header.item{background-color:transparent;opacity:1;color:rgba(50,50,50,.8);font-size:.875rem;padding:0;text-transform:uppercase;font-weight:700}.ui.text.menu .header.item>a{background-color:transparent}.ui.text.item.menu .item{margin:0}.ui.vertical.text.menu{margin:1rem 0}.ui.vertical.text.menu:first-child{margin-top:0rem}.ui.vertical.text.menu:last-child{margin-bottom:0rem}.ui.vertical.text.menu .item{float:left;clear:left;margin:.5em 0}.ui.vertical.text.menu .item>.icon{float:none;margin:0 .75em 0 0}.ui.vertical.text.menu .header.item{margin:.8em 0}.ui.text.menu .item.hover,.ui.text.menu .item:hover{opacity:1;background-color:transparent}.ui.text.menu .active.item{background-color:transparent;padding:0;border:0;opacity:1;font-weight:700}.ui.text.pointing.menu .active.item:after{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.text.attached.menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.green.text.menu .active.item{color:#A1CF64}.ui.red.text.menu .active.item{color:#EF4D6D}.ui.blue.text.menu .active.item{color:#6ECFF5}.ui.purple.text.menu .active.item{color:#564F8A}.ui.orange.text.menu .active.item{color:#F05940}.ui.teal.text.menu .active.item{color:#00B5AD}.ui.secondary.menu{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.menu>.item{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:0;min-height:0!important;margin:0 .25em;padding:.5em 1em;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.secondary.menu>.item:before{display:none}.ui.secondary.menu .link.item,.ui.secondary.menu a.item{color:rgba(0,0,0,.4)}.ui.secondary.menu .header.item{background-color:transparent;border-right:.1em solid rgba(0,0,0,.1);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.menu>.active.item{border-top:0;padding-top:.5em;background-color:rgba(0,0,0,.08);color:rgba(0,0,0,.8)}.ui.secondary.vertical.menu>.active.item{-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em}.ui.secondary.inverted.menu>.active.item{background-color:rgba(255,255,255,.2)}.ui.secondary.item.menu>.item{margin:0}.ui.secondary.attached.menu{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.secondary.pointing.menu{border-bottom:3px solid rgba(0,0,0,.1)}.ui.secondary.pointing.menu>.item{margin:0 0 -3px;padding:.6em .95em;border-bottom:3px solid rgba(0,0,0,0);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-transition:color .2s;-moz-transition:color .2s;-o-transition:color .2s;-ms-transition:color .2s;transition:color .2s}.ui.secondary.pointing.menu>.item:after{display:none}.ui.secondary.pointing.menu>.item.hover,.ui.secondary.pointing.menu>.item:hover{background-color:transparent;color:rgba(0,0,0,.7)}.ui.secondary.pointing.menu>.item:active,.ui.secondary.pointing.menu>.item.down{background-color:transparent;border-color:rgba(0,0,0,.2)}.ui.secondary.pointing.menu>.item.active{background-color:transparent;border-color:rgba(0,0,0,.4)}.ui.secondary.vertical.pointing.menu{border:0;border-right:3px solid rgba(0,0,0,.1)}.ui.secondary.vertical.menu>.item{border:0;margin:0 0 .3em;padding:.6em .8em;-webkit-border-radius:.1875em;-moz-border-radius:.1875em;border-radius:.1875em}.ui.secondary.vertical.menu>.header.item{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.vertical.pointing.menu>.item{margin:0 -3px 0 0;border-bottom:0;border-right:3px solid transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.secondary.vertical.pointing.menu>.item.hover,.ui.secondary.vertical.pointing.menu>.item:hover{background-color:transparent;color:rgba(0,0,0,.7)}.ui.secondary.vertical.pointing.menu>.item:active,.ui.secondary.vertical.pointing.menu>.item.down{background-color:transparent;border-color:rgba(0,0,0,.2)}.ui.secondary.vertical.pointing.menu>.item.active{background-color:transparent;border-color:rgba(0,0,0,.4);color:rgba(0,0,0,.85)}.ui.secondary.inverted.pointing.menu{border-bottom:3px solid rgba(255,255,255,.1)}.ui.secondary.inverted.pointing.menu>.item{color:rgba(255,255,255,.7)}.ui.secondary.inverted.pointing.menu>.item.hover,.ui.secondary.inverted.pointing.menu>.item:hover{color:rgba(255,255,255,.85)}.ui.secondary.inverted.pointing.menu>.item:active,.ui.secondary.inverted.pointing.menu>.item.down{border-color:rgba(255,255,255,.4)}.ui.secondary.inverted.pointing.menu>.item.active{border-color:rgba(255,255,255,.8);color:#fff}.ui.secondary.inverted.vertical.pointing.menu{border-right:3px solid rgba(255,255,255,.1);border-bottom:0}.ui.secondary.inverted.vertical.pointing.menu .item:active,.ui.secondary.inverted.vertical.pointing.menu .item.down{box-shadow:.2em 0 0 0 rgba(255,255,255,.2)}.ui.secondary.inverted.vertical.pointing.menu .item.active{box-shadow:.2em 0 0 0 rgba(255,255,255,.4)}.ui.icon.menu,.ui.vertical.icon.menu{width:auto;display:inline-block;min-height:0}.ui.icon.menu .item{text-align:center;color:rgba(60,60,60,.7)}.ui.icon.menu .item .icon{display:block;float:none;opacity:1;margin:0 auto}.ui.icon.menu .icon:before{opacity:1}.ui.menu .icon.item .icon{margin:0}.ui.inverted.icon.menu .item{color:rgba(255,255,255,.8)}.ui.inverted.icon.menu .icon{color:#fff}.ui.labeled.icon.menu{text-align:center}.ui.labeled.icon.menu .icon{display:block;font-size:1.5em;margin:0 auto .3em}.ui.fitted.menu .item,.ui.fitted.menu .item>a,.ui.fitted.menu .item .menu .item,.ui.fitted.menu .item .menu .item>a,.ui.menu .fitted.item,.ui.menu .fitted.item>a{padding-top:0;padding-bottom:0}.ui.tight.menu .item,.ui.tight.menu .item>a,.ui.tight.menu .item .menu .item,.ui.tight.menu .item .menu .item>a,.ui.menu .tight.item,.ui.menu .tight.item>a{padding:0}.ui.borderless.menu .item:before,.ui.borderless.menu .item>a:before,.ui.borderless.menu .item .menu .item:before,.ui.borderless.menu .item .menu .item>a:before,.ui.menu .borderless.item:before,.ui.menu .borderless.item>a:before{background-image:none}.ui.compact.menu{display:inline-block;margin:0;vertical-align:middle}.ui.vertical.compact.menu{width:auto!important}.ui.menu.fluid,.ui.vertical.menu.fluid{display:block!important;width:100%}.ui.item.menu,.ui.item.menu .item{width:100%;padding-left:0!important;padding-right:0!important;text-align:center}.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:10;margin:0;border:0;width:100%}.ui.menu.fixed,.ui.menu.fixed .item:first-child,.ui.menu.fixed .item:last-child{-webkit-border-radius:0!important;-moz-border-radius:0!important;border-radius:0!important}.ui.menu.fixed.top{top:0;left:0;right:auto;bottom:auto}.ui.menu.fixed.right{top:0;right:0;left:auto;bottom:auto;width:auto;height:100%}.ui.menu.fixed.bottom{bottom:0;left:0;top:auto;right:auto}.ui.menu.fixed.left{top:0;left:0;right:auto;bottom:auto;width:auto;height:100%}.ui.pointing.menu .active.item:after{position:absolute;bottom:-.35em;left:50%;content:"";margin-left:-.3em;width:.6em;height:.6em;border:0;border-bottom:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .2s ease;-moz-transition:background .2s ease;-o-transition:background .2s ease;-ms-transition:background .2s ease;transition:background .2s ease}.ui.pointing.menu .active.item .menu .active.item:after{display:none}.ui.vertical.pointing.menu .active.item:after{position:absolute;top:50%;margin-top:-.3em;right:-.4em;bottom:auto;left:auto;border:0;border-top:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1)}.ui.pointing.menu .active.item:after{background-color:#FCFCFC}.ui.pointing.menu .active.item.hover:after,.ui.pointing.menu .active.item:hover:after{background-color:#FAFAFA}.ui.vertical.pointing.menu .menu .active.item:after{background-color:#F4F4F4}.ui.pointing.menu .active.item.down:after,.ui.pointing.menu .active.item:active:after{background-color:#F0F0F0}.ui.menu.attached{margin:0rem;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.menu{-moz-border-radius:.1875em .1875em 0 0;-webkit-border-radius:.1875em .1875em 0 0;border-radius:.1875em .1875em 0 0}.ui.menu.bottom.attached{-moz-border-radius:0 0 .1875em .1875em;-webkit-border-radius:0 0 .1875em .1875em;border-radius:0 0 .1875em .1875em}.ui.vertical.menu .item{min-height:0!important}.ui.small.menu .item{font-size:.875rem;min-height:2.25rem}.ui.small.vertical.menu{width:13rem}.ui.menu .item{font-size:1rem;min-height:2.5em}.ui.vertical.menu{width:15rem}.ui.large.menu .item{font-size:1.125rem}.ui.large.vertical.menu{width:18rem} \ No newline at end of file diff --git a/build/minified/elements/button.min.css b/build/minified/elements/button.min.css index f1890cf42..b9b581e62 100644 --- a/build/minified/elements/button.min.css +++ b/build/minified/elements/button.min.css @@ -1 +1 @@ -.ui.button{cursor:pointer;display:inline-block;vertical-align:middle;min-height:1em;outline:0;border:0;background-color:#EDEDED;color:#999;padding:.8em 1.5em;font-size:1rem;text-transform:uppercase;line-height:1;font-weight:700;font-style:normal;text-align:center;text-shadow:none;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-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}.ui.button>.icon{margin-right:.5em;line-height:1;-webkit-transition:opacity .1s ease;-moz-transition:opacity .1s ease;-o-transition:opacity .1s ease;-ms-transition:opacity .1s ease;transition:opacity .1s ease}.ui.buttons .button.active,.ui.button.active{opacity:1!important;background-color:#E6E6E6;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.05)));background-image:-webkit-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:-moz-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:-o-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);-webkit-box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset;box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset}.ui.buttons .button.active,.ui.buttons .button.active a,.ui.button.active,.ui.button.active a{color:#666}.ui.button:hover,.ui.button.hover{opacity:1!important;background-color:#DEDEDE;color:#777}.ui.button:hover .icon,.ui.button.hover .icon{opacity:.85}.ui.button:active,.ui.button.down{opacity:1!important;background-color:#D8D8D8;color:#777;-webkit-box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset;box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset}.ui.button.disabled,.ui.button.disabled.hover,.ui.button.disabled.down{cursor:default;color:#DDD;background-color:rgba(50,50,50,.05)!important;background-image:none!important;text-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.buttons.black .button,.ui.button.black{background-color:#5C6166;color:#FFF}.ui.buttons.black .button.hover,.ui.buttons.black .button:hover,.ui.button.black.hover,.ui.button.black:hover{background-color:#4C4C4C;color:#FFF}.ui.buttons.black .button.down,.ui.buttons.black .button:active,.ui.button.black.down,.ui.button.black:active{background-color:#333;color:#FFF}.ui.buttons.green .button,.ui.button.green{background-color:#5BBD72;color:#FFF}.ui.buttons.green .button.hover,.ui.buttons.green .button:hover,.ui.button.green.hover,.ui.button.green:hover,.ui.buttons.green .button.active,.ui.button.green.active{background-color:#58cb73;color:#FFF}.ui.buttons.green .button.down,.ui.buttons.green .button:active,.ui.button.green.down,.ui.button.green:active{background-color:#4CB164;color:#FFF}.ui.buttons.red .button,.ui.button.red{background-color:#D95C5C;color:#FFF}.ui.buttons.red .button.hover,.ui.buttons.red .button:hover,.ui.button.red.hover,.ui.button.red:hover,.ui.buttons.red .button.active,.ui.button.red.active{background-color:#E75859;color:#FFF}.ui.buttons.red .button.down,.ui.buttons.red .button:active,.ui.button.red.down,.ui.button.red:active{background-color:#D24B4C;color:#FFF}.ui.buttons.blue .button,.ui.button.blue{background-color:#6ECFF5;color:#FFF}.ui.buttons.blue .button.hover,.ui.buttons.blue .button:hover,.ui.button.blue.hover,.ui.button.blue:hover,.ui.buttons.blue .button.active,.ui.button.blue.active{background-color:#1AB8F3;color:#FFF}.ui.buttons.blue .button.down,.ui.buttons.blue .button:active,.ui.button.blue.down,.ui.button.blue:active{background-color:#0AA5DF;color:#FFF}.ui.buttons.purple .button,.ui.button.purple{background-color:#564F8A;color:#FFF}.ui.buttons.purple .button.hover,.ui.buttons.purple .button:hover,.ui.button.purple.hover,.ui.button.purple:hover,.ui.buttons.purple .button.active,.ui.button.purple.active{background-color:#3E3773;color:#FFF}.ui.buttons.purple .button.down,.ui.buttons.purple .button:active,.ui.button.purple.down,.ui.button.purple:active{background-color:#2E2860;color:#FFF}.ui.buttons.teal .button,.ui.button.teal{background-color:#00B5AD;color:#FFF}.ui.buttons.teal .button.hover,.ui.buttons.teal .button:hover,.ui.button.teal.hover,.ui.button.teal:hover,.ui.buttons.teal .button.active,.ui.button.teal.active{background-color:#009A93;color:#FFF}.ui.buttons.teal .button.down,.ui.buttons.teal .button:active,.ui.button.teal.down,.ui.button.teal:active{background-color:#00847E;color:#FFF}.ui.buttons.positive .button,.ui.button.positive{background-color:#5BBD72!important;color:#FFF}.ui.buttons.positive .button.hover,.ui.buttons.positive .button:hover,.ui.button.positive.hover,.ui.button.positive:hover,.ui.buttons.positive .button.active,.ui.button.positive.active{background-color:#58CB73!important;color:#FFF}.ui.buttons.positive .button.down,.ui.buttons.positive .button:active,.ui.button.positive.down,.ui.button.positive:active{background-color:#4CB164!important;color:#FFF}.ui.buttons.negative .button,.ui.button.negative{background-color:#D95C5C!important;color:#FFF}.ui.buttons.negative .button.hover,.ui.buttons.negative .button:hover,.ui.button.negative.hover,.ui.button.negative:hover,.ui.buttons.negative .button.active,.ui.button.negative.active{background-color:#E75859!important;color:#FFF}.ui.buttons.negative .button.down,.ui.buttons.negative .button:active,.ui.button.negative.down,.ui.button.negative:active{background-color:#D24B4C!important;color:#FFF}.ui.buttons .button,.ui.button{font-size:1rem}.ui.buttons.mini .button,.ui.mini.button{font-size:.8rem;padding:.6em .8em}.ui.tiny.buttons .button,.ui.tiny.button{font-size:.9rem;padding:.6em .8em}.ui.small.buttons .button,.ui.small.button{font-size:.9rem}.ui.large.buttons .button,.ui.large.button{font-size:1.125rem}.ui.big.buttons .button,.ui.big.button{font-size:1.25rem}.ui.huge.buttons .button,.ui.huge.button{font-size:1.375rem;padding-left:2em;padding-right:2em}.ui.massive.buttons .button,.ui.massive.button{font-size:1.5rem;font-weight:700;padding-left:2.5em;padding-right:2.5em}.ui.huge.button.loading:after{background-image:url(../images/loader-small.gif)}.ui.massive.buttons .button.loading:after,.ui.gigantic.buttons .button.loading:after,.ui.massive.button.loading:after,.ui.gigantic.button.loading:after{background-image:url(../images/loader-medium.gif)}.ui.huge.button.loading:after,.ui.huge.button.loading.active:after{background-image:url(../images/loader-small.gif)}.ui.massive.buttons .button.loading:after,.ui.gigantic.buttons .button.loading:after,.ui.massive.button.loading:after,.ui.gigantic.button.loading:after,.ui.massive.buttons .button.loading.active:after,.ui.gigantic.buttons .button.loading.active:after,.ui.massive.button.loading.active:after,.ui.gigantic.button.loading.active:after{background-image:url(../images/loader-medium.gif)}.ui.icon.buttons .button,.ui.icon.button{padding:.8em}.ui.icon.buttons .button>.icon,.ui.icon.button>.icon{opacity:1;margin:0}.ui.buttons.secondary .button,.ui.secondary.button{font-weight:400;text-transform:none;opacity:1}.ui.buttons.tertiary .button,.ui.tertiary.button{background-color:transparent;background-image:none;color:#999;font-weight:400;text-transform:none;text-shadow:none;box-shadow:none}.ui.buttons.tertiary .button{border-left:0}.ui.button.tertiary.active{opacity:.9!important}.ui.button.tertiary.hover,.ui.button.tertiary:hover{opacity:.8!important}.ui.button.tertiary.down,.ui.button.tertiary:active{opacity:1!important}.ui.labeled.icon.buttons .button,.ui.labeled.icon.button{position:relative;padding-left:4em!important;padding-right:1.4em!important}.ui.labeled.icon.buttons>.button>.icon,.ui.labeled.icon.button>.icon{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:2.75em;height:100%;padding-top:.8em;background-color:rgba(0,0,0,.05);text-align:center;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em;line-height:1;-webkit-box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset;-moz-box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset;box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset}.ui.labeled.icon.buttons .button>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.labeled.icon.buttons .button:first-child>.icon{border-top-left-radius:.3125em;border-bottom-left-radius:.3125em}.ui.labeled.icon.buttons .button:last-child>.icon{border-top-right-radius:.3125em;border-bottom-right-radius:.3125em}.ui.vertical.labeled.icon.buttons .button:first-child>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-left-radius:.3125em}.ui.vertical.labeled.icon.buttons .button:last-child>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom-left-radius:.3125em}.ui.right.labeled.icon.button{padding-left:1.4em!important;padding-right:4em!important}.ui.left.fluid.labeled.icon.button,.ui.right.fluid.labeled.icon.button{padding-left:1.4em!important;padding-right:1.4em!important}.ui.right.labeled.icon.button .icon{left:auto;right:0}.ui.toggle.buttons .button.active,.ui.buttons .button.toggle.active,.ui.button.toggle.active{background-color:#BBF0A9;color:#1C8C21}.ui.buttons.toggle .ui.button.active.hover,.ui.buttons .ui.button.toggle.active.hover,.ui.button.toggle.active.hover{color:#FFF;background-color:#BBF0A9}.ui.circular.button{-webkit-border-radius:10em;-moz-border-radius:10em;border-radius:10em}.ui.button.attached{display:block;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.button.attached.top{-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.button.attached.bottom{-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.button.attached.left{display:inline-block;border-left:0;padding-right:.75em;text-align:right;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.button.attached.right{display:inline-block;padding-left:.75em;text-align:left;-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.buttons .or{position:relative;float:left;width:.3em;height:1em;z-index:3}.ui.buttons .or:before{position:absolute;top:50%;left:50%;content:'or';background-color:#FFF;margin-top:-.15em;margin-left:-.9em;width:1.8em;height:1.8em;line-height:1.66;color:#AAA;font-style:normal;font-weight:400;text-align:center;-moz-box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;-moz-border-radius:500px;-webkit-border-radius:500px;border-radius:500px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.buttons .or:after{position:absolute;top:0;left:0;content:' ';width:.3em;height:1.8em;background-color:transparent;border-top:.6em solid #FFF;border-bottom:.6em solid #FFF}.ui.fluid.buttons .or{width:0!important}.ui.fluid.buttons .or:after{display:none}.attached.ui.buttons{margin:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.attached.ui.buttons .button:first-child{-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.attached.ui.buttons .button:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.bottom.attached.ui.buttons{margin-top:-1px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.bottom.attached.ui.buttons .button:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.bottom.attached.ui.buttons .button:last-child{-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.left.attached.ui.buttons{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.left.attached.ui.buttons .button:first-child{margin-left:-1px;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.left.attached.ui.buttons .button:last-child{margin-left:-1px;-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.right.attached.ui.buttons,.right.attached.ui.buttons .button{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.right.attached.ui.buttons .button:first-child{margin-left:-1px;-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.right.attached.ui.buttons .button:last-child{margin-left:-1px;-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.ui.fluid.buttons,.ui.button.fluid,.ui.fluid.buttons>.button{display:block;width:100%}.ui.two.buttons>.button{width:50%}.ui.three.buttons>.button{width:33.333%}.ui.four.buttons>.button{width:25%}.ui.five.buttons>.button{width:20%}.ui.six.buttons>.button{width:16.666%}.ui.seven.buttons>.button{width:14.285%}.ui.eight.buttons>.button{width:12.5%}.ui.nine.buttons>.button{width:11.11%}.ui.ten.buttons>.button{width:10%}.ui.eleven.buttons>.button{width:9.09%}.ui.twelve.buttons>.button{width:8.3333%}.ui.fluid.vertical.buttons,.ui.fluid.vertical.buttons>.button{width:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.two.vertical.buttons>.button{height:50%}.ui.three.vertical.buttons>.button{height:33.333%}.ui.four.vertical.buttons>.button{height:25%}.ui.five.vertical.buttons>.button{height:20%}.ui.six.vertical.buttons>.button{height:16.666%}.ui.seven.vertical.buttons>.button{height:14.285%}.ui.eight.vertical.buttons>.button{height:12.5%}.ui.nine.vertical.buttons>.button{height:11.11%}.ui.ten.vertical.buttons>.button{height:10%}.ui.eleven.vertical.buttons>.button{height:9.09%}.ui.twelve.vertical.buttons>.button{height:8.3333%}.ui.buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.buttons .button{float:left;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-left:1px solid rgba(0,0,0,.05)}.ui.buttons .button:first-child{margin-left:0;border-top-left-radius:.3125em;border-bottom-left-radius:.3125em}.ui.buttons .button:last-child{border-top-right-radius:.3125em;border-bottom-right-radius:.3125em}.ui.buttons.vertical{display:inline-block}.ui.buttons.vertical .button{display:block;float:none;border-bottom:1px solid rgba(0,0,0,.05);border-left:0;box-shadow:none}.ui.buttons.vertical .button:first-child,.ui.buttons.vertical .mini.button:first-child,.ui.buttons.vertical .tiny.button:first-child,.ui.buttons.vertical .small.button:first-child,.ui.buttons.vertical .massive.button:first-child,.ui.buttons.vertical .huge.button:first-child{margin-top:0;-moz-border-radius:.3125em .3125em 0 0;-webkit-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.buttons.vertical .button:last-child,.ui.buttons.vertical .mini.button:last-child,.ui.buttons.vertical .tiny.button:last-child,.ui.buttons.vertical .small.button:last-child,.ui.buttons.vertical .massive.button:last-child,.ui.buttons.vertical .huge.button:last-child,.ui.buttons.vertical .gigantic.button:last-child{-moz-border-radius:0 0 .3125em .3125em;-webkit-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.button.loading,.ui.button.loading.hover{position:relative;cursor:default;background-color:#F3F3F3!important;color:transparent!important;text-shadow:none!important;background-image:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;-o-transition:all 0s linear;-ms-transition:all 0s linear;transition:all 0s linear}.ui.button.loading:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:transparent url(../images/loader-mini.gif) no-repeat 50% 50%}.ui.labeled.icon.button.loading .icon{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.button.error,.ui.button.error.hover,.ui.button.error.down{cursor:default;position:relative!important;background-color:#D95C5C!important;color:transparent!important;text-shadow:none;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;-o-transition:all 0s linear;-ms-transition:all 0s linear;transition:all 0s linear}.ui.button.error .icon{opacity:1;color:#FFF}.ui.button.error:after{position:absolute;left:50%;content:"Error";margin-left:-1.8em;color:#FFF;-webkit-animation:button-text .5s;-moz-animation:button-text .5s;-ms-animation:button-text .5s;-o-animation:button-text .5s;animation:button-text .5s}.ui.button.error .icon:before{font-family:Icons;content:'\26a0'}.ui.button.success,.ui.button.success.hover,.ui.button.success.down{position:relative!important;background-color:#5BBD72!important;color:transparent!important}.ui.button.success .icon{opacity:1;color:#FFF}.ui.button.success .icon:before{font-family:Icons;content:'\2611'}.ui.button.success:after{position:absolute;left:50%;content:"Success";margin-left:-2em;color:#FFF;-webkit-animation:button-text .5s;-moz-animation:button-text .5s;-ms-animation:button-text .5s;-o-animation:button-text .5s;animation:button-text .5s}@-webkit-keyframes button-text{0%{-webkit-transform:translateY(100%);opacity:0}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes button-text{0%{-moz-transform:translateY(100%);opacity:0}100%{opacity:1;-moz-transform:translateY(0)}}@keyframes button-text{0%{transform:translateY(100%);opacity:0}100%{opacity:1;transform:translateY(0)}} \ No newline at end of file +.ui.button{cursor:pointer;display:inline-block;vertical-align:middle;min-height:1em;outline:0;border:0;background-color:#EDEDED;color:#999;padding:.8em 1.5em;font-size:1rem;text-transform:uppercase;line-height:1;font-weight:700;font-style:normal;text-align:center;text-shadow:none;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;box-shadow:0 -.185rem 0 rgba(0,0,0,.1) inset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-moz-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-o-transition:opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;-ms-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}.ui.button>.icon{margin-right:.5em;line-height:1;-webkit-transition:opacity .1s ease;-moz-transition:opacity .1s ease;-o-transition:opacity .1s ease;-ms-transition:opacity .1s ease;transition:opacity .1s ease}.ui.buttons .button.active,.ui.button.active{opacity:1!important;background-color:#E6E6E6;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.05)));background-image:-webkit-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:-moz-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:-o-linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,.05) 100%);-webkit-box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset;box-shadow:0 .125em .125em 0 rgba(0,0,0,.1) inset}.ui.buttons .button.active,.ui.buttons .button.active a,.ui.button.active,.ui.button.active a{color:#666}.ui.button:hover,.ui.button.hover{opacity:1!important;background-color:#DEDEDE;color:#777}.ui.button:hover .icon,.ui.button.hover .icon{opacity:.85}.ui.button:active,.ui.button.down{opacity:1!important;background-color:#D8D8D8;color:#777;-webkit-box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset;box-shadow:0 0 .125em 1px rgba(0,0,0,.1) inset}.ui.button.error,.ui.button.error.hover,.ui.button.error.down{cursor:default;position:relative!important;background-color:#D95C5C!important;color:transparent!important;text-shadow:none;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;-o-transition:all 0s linear;-ms-transition:all 0s linear;transition:all 0s linear}.ui.button.error .icon{opacity:1;color:#FFF}.ui.button.error:after{position:absolute;left:50%;content:"Error";margin-left:-1.8em;color:#FFF;-webkit-animation:button-text .5s;-moz-animation:button-text .5s;-ms-animation:button-text .5s;-o-animation:button-text .5s;animation:button-text .5s}.ui.button.error .icon:before{font-family:Icons;content:'\26a0'}.ui.button.success,.ui.button.success.hover,.ui.button.success.down{position:relative!important;background-color:#5BBD72!important;color:transparent!important}.ui.button.success .icon{opacity:1;color:#FFF}.ui.button.success .icon:before{font-family:Icons;content:'\2611'}.ui.button.success:after{position:absolute;left:50%;content:"Success";margin-left:-2em;color:#FFF;-webkit-animation:button-text .5s;-moz-animation:button-text .5s;-ms-animation:button-text .5s;-o-animation:button-text .5s;animation:button-text .5s}@-webkit-keyframes button-text{0%{-webkit-transform:translateY(100%);opacity:0}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes button-text{0%{-moz-transform:translateY(100%);opacity:0}100%{opacity:1;-moz-transform:translateY(0)}}@keyframes button-text{0%{transform:translateY(100%);opacity:0}100%{opacity:1;transform:translateY(0)}}.ui.button.loading,.ui.button.loading.hover{position:relative;cursor:default;background-color:#F3F3F3!important;color:transparent!important;text-shadow:none!important;background-image:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important;-webkit-transition:all 0s linear;-moz-transition:all 0s linear;-o-transition:all 0s linear;-ms-transition:all 0s linear;transition:all 0s linear}.ui.button.loading:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:transparent url(../images/loader-mini.gif) no-repeat 50% 50%}.ui.labeled.icon.button.loading .icon{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.button.disabled,.ui.button.disabled.hover,.ui.button.disabled.down{cursor:default;color:#DDD;background-color:rgba(50,50,50,.05)!important;background-image:none!important;text-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.ui.buttons.black .button,.ui.button.black{background-color:#5C6166;color:#FFF}.ui.buttons.black .button.hover,.ui.buttons.black .button:hover,.ui.button.black.hover,.ui.button.black:hover{background-color:#4C4C4C;color:#FFF}.ui.buttons.black .button.down,.ui.buttons.black .button:active,.ui.button.black.down,.ui.button.black:active{background-color:#333;color:#FFF}.ui.buttons.green .button,.ui.button.green{background-color:#5BBD72;color:#FFF}.ui.buttons.green .button.hover,.ui.buttons.green .button:hover,.ui.button.green.hover,.ui.button.green:hover,.ui.buttons.green .button.active,.ui.button.green.active{background-color:#58cb73;color:#FFF}.ui.buttons.green .button.down,.ui.buttons.green .button:active,.ui.button.green.down,.ui.button.green:active{background-color:#4CB164;color:#FFF}.ui.buttons.red .button,.ui.button.red{background-color:#D95C5C;color:#FFF}.ui.buttons.red .button.hover,.ui.buttons.red .button:hover,.ui.button.red.hover,.ui.button.red:hover,.ui.buttons.red .button.active,.ui.button.red.active{background-color:#E75859;color:#FFF}.ui.buttons.red .button.down,.ui.buttons.red .button:active,.ui.button.red.down,.ui.button.red:active{background-color:#D24B4C;color:#FFF}.ui.buttons.blue .button,.ui.button.blue{background-color:#6ECFF5;color:#FFF}.ui.buttons.blue .button.hover,.ui.buttons.blue .button:hover,.ui.button.blue.hover,.ui.button.blue:hover,.ui.buttons.blue .button.active,.ui.button.blue.active{background-color:#1AB8F3;color:#FFF}.ui.buttons.blue .button.down,.ui.buttons.blue .button:active,.ui.button.blue.down,.ui.button.blue:active{background-color:#0AA5DF;color:#FFF}.ui.buttons.purple .button,.ui.button.purple{background-color:#564F8A;color:#FFF}.ui.buttons.purple .button.hover,.ui.buttons.purple .button:hover,.ui.button.purple.hover,.ui.button.purple:hover,.ui.buttons.purple .button.active,.ui.button.purple.active{background-color:#3E3773;color:#FFF}.ui.buttons.purple .button.down,.ui.buttons.purple .button:active,.ui.button.purple.down,.ui.button.purple:active{background-color:#2E2860;color:#FFF}.ui.buttons.teal .button,.ui.button.teal{background-color:#00B5AD;color:#FFF}.ui.buttons.teal .button.hover,.ui.buttons.teal .button:hover,.ui.button.teal.hover,.ui.button.teal:hover,.ui.buttons.teal .button.active,.ui.button.teal.active{background-color:#009A93;color:#FFF}.ui.buttons.teal .button.down,.ui.buttons.teal .button:active,.ui.button.teal.down,.ui.button.teal:active{background-color:#00847E;color:#FFF}.ui.buttons.positive .button,.ui.button.positive{background-color:#5BBD72!important;color:#FFF}.ui.buttons.positive .button.hover,.ui.buttons.positive .button:hover,.ui.button.positive.hover,.ui.button.positive:hover,.ui.buttons.positive .button.active,.ui.button.positive.active{background-color:#58CB73!important;color:#FFF}.ui.buttons.positive .button.down,.ui.buttons.positive .button:active,.ui.button.positive.down,.ui.button.positive:active{background-color:#4CB164!important;color:#FFF}.ui.buttons.negative .button,.ui.button.negative{background-color:#D95C5C!important;color:#FFF}.ui.buttons.negative .button.hover,.ui.buttons.negative .button:hover,.ui.button.negative.hover,.ui.button.negative:hover,.ui.buttons.negative .button.active,.ui.button.negative.active{background-color:#E75859!important;color:#FFF}.ui.buttons.negative .button.down,.ui.buttons.negative .button:active,.ui.button.negative.down,.ui.button.negative:active{background-color:#D24B4C!important;color:#FFF}.ui.buttons .button,.ui.button{font-size:1rem}.ui.buttons.mini .button,.ui.mini.button{font-size:.8rem;padding:.6em .8em}.ui.tiny.buttons .button,.ui.tiny.button{font-size:.9rem;padding:.6em .8em}.ui.small.buttons .button,.ui.small.button{font-size:.9rem}.ui.large.buttons .button,.ui.large.button{font-size:1.125rem}.ui.big.buttons .button,.ui.big.button{font-size:1.25rem}.ui.huge.buttons .button,.ui.huge.button{font-size:1.375rem;padding-left:2em;padding-right:2em}.ui.massive.buttons .button,.ui.massive.button{font-size:1.5rem;font-weight:700;padding-left:2.5em;padding-right:2.5em}.ui.huge.button.loading:after{background-image:url(../images/loader-small.gif)}.ui.massive.buttons .button.loading:after,.ui.gigantic.buttons .button.loading:after,.ui.massive.button.loading:after,.ui.gigantic.button.loading:after{background-image:url(../images/loader-medium.gif)}.ui.huge.button.loading:after,.ui.huge.button.loading.active:after{background-image:url(../images/loader-small.gif)}.ui.massive.buttons .button.loading:after,.ui.gigantic.buttons .button.loading:after,.ui.massive.button.loading:after,.ui.gigantic.button.loading:after,.ui.massive.buttons .button.loading.active:after,.ui.gigantic.buttons .button.loading.active:after,.ui.massive.button.loading.active:after,.ui.gigantic.button.loading.active:after{background-image:url(../images/loader-medium.gif)}.ui.icon.buttons .button,.ui.icon.button{padding:.8em}.ui.icon.buttons .button>.icon,.ui.icon.button>.icon{opacity:1;margin:0;vertical-align:top}.ui.buttons.secondary .button,.ui.secondary.button{font-weight:400;text-transform:none;opacity:1}.ui.buttons.tertiary .button,.ui.tertiary.button{background-color:transparent;background-image:none;color:#999;font-weight:400;text-transform:none;text-shadow:none;box-shadow:none}.ui.buttons.tertiary .button{border-left:0}.ui.button.tertiary.active{opacity:.9!important}.ui.button.tertiary.hover,.ui.button.tertiary:hover{opacity:.8!important}.ui.button.tertiary.down,.ui.button.tertiary:active{opacity:1!important}.ui.labeled.icon.buttons .button,.ui.labeled.icon.button{position:relative;padding-left:4em!important;padding-right:1.4em!important}.ui.labeled.icon.buttons>.button>.icon,.ui.labeled.icon.button>.icon{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;width:2.75em;height:100%;padding-top:.8em;background-color:rgba(0,0,0,.05);text-align:center;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em;line-height:1;-webkit-box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset;-moz-box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset;box-shadow:-2px 0 0 0 rgba(0,0,0,.05) inset}.ui.labeled.icon.buttons .button>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.labeled.icon.buttons .button:first-child>.icon{border-top-left-radius:.3125em;border-bottom-left-radius:.3125em}.ui.labeled.icon.buttons .button:last-child>.icon{border-top-right-radius:.3125em;border-bottom-right-radius:.3125em}.ui.vertical.labeled.icon.buttons .button:first-child>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-top-left-radius:.3125em}.ui.vertical.labeled.icon.buttons .button:last-child>.icon{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-bottom-left-radius:.3125em}.ui.right.labeled.icon.button{padding-left:1.4em!important;padding-right:4em!important}.ui.left.fluid.labeled.icon.button,.ui.right.fluid.labeled.icon.button{padding-left:1.4em!important;padding-right:1.4em!important}.ui.right.labeled.icon.button .icon{left:auto;right:0}.ui.toggle.buttons .button.active,.ui.buttons .button.toggle.active,.ui.button.toggle.active{background-color:#BBF0A9;color:#1C8C21}.ui.buttons.toggle .ui.button.active.hover,.ui.buttons .ui.button.toggle.active.hover,.ui.button.toggle.active.hover{color:#FFF;background-color:#BBF0A9}.ui.circular.button{-webkit-border-radius:10em;-moz-border-radius:10em;border-radius:10em}.ui.button.attached{display:block;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1)!important;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1)!important;box-shadow:0 0 0 1px rgba(0,0,0,.1)!important}.ui.button.attached.top{-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.button.attached.bottom{-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.button.attached.left{display:inline-block;border-left:0;padding-right:.75em;text-align:right;-webkit-border-radius:.3125em 0 0 .3125em;-moz-border-radius:.3125em 0 0 .3125em;border-radius:.3125em 0 0 .3125em}.ui.button.attached.right{display:inline-block;padding-left:.75em;text-align:left;-webkit-border-radius:0 .3125em .3125em 0;-moz-border-radius:0 .3125em .3125em 0;border-radius:0 .3125em .3125em 0}.ui.buttons .or{position:relative;float:left;width:.3em;height:1em;z-index:3}.ui.buttons .or:before{position:absolute;top:50%;left:50%;content:'or';background-color:#FFF;margin-top:-.15em;margin-left:-.9em;width:1.8em;height:1.8em;line-height:1.66;color:#AAA;font-style:normal;font-weight:400;text-align:center;-moz-box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;box-shadow:0 2px 1px 0 rgba(0,0,0,.2) inset;-moz-border-radius:500px;-webkit-border-radius:500px;border-radius:500px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.buttons .or:after{position:absolute;top:0;left:0;content:' ';width:.3em;height:1.8em;background-color:transparent;border-top:.6em solid #FFF;border-bottom:.6em solid #FFF}.ui.fluid.buttons .or{width:0!important}.ui.fluid.buttons .or:after{display:none}.attached.ui.buttons{margin:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.attached.ui.buttons .button:first-child{-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.attached.ui.buttons .button:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.bottom.attached.ui.buttons{margin-top:-1px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.bottom.attached.ui.buttons .button:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.bottom.attached.ui.buttons .button:last-child{-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.left.attached.ui.buttons{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0}.left.attached.ui.buttons .button:first-child{margin-left:-1px;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.left.attached.ui.buttons .button:last-child{margin-left:-1px;-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.right.attached.ui.buttons,.right.attached.ui.buttons .button{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.right.attached.ui.buttons .button:first-child{margin-left:-1px;-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.right.attached.ui.buttons .button:last-child{margin-left:-1px;-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.ui.fluid.buttons,.ui.button.fluid,.ui.fluid.buttons>.button{display:block;width:100%}.ui.two.buttons>.button{width:50%}.ui.three.buttons>.button{width:33.333%}.ui.four.buttons>.button{width:25%}.ui.five.buttons>.button{width:20%}.ui.six.buttons>.button{width:16.666%}.ui.seven.buttons>.button{width:14.285%}.ui.eight.buttons>.button{width:12.5%}.ui.nine.buttons>.button{width:11.11%}.ui.ten.buttons>.button{width:10%}.ui.eleven.buttons>.button{width:9.09%}.ui.twelve.buttons>.button{width:8.3333%}.ui.fluid.vertical.buttons,.ui.fluid.vertical.buttons>.button{width:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.two.vertical.buttons>.button{height:50%}.ui.three.vertical.buttons>.button{height:33.333%}.ui.four.vertical.buttons>.button{height:25%}.ui.five.vertical.buttons>.button{height:20%}.ui.six.vertical.buttons>.button{height:16.666%}.ui.seven.vertical.buttons>.button{height:14.285%}.ui.eight.vertical.buttons>.button{height:12.5%}.ui.nine.vertical.buttons>.button{height:11.11%}.ui.ten.vertical.buttons>.button{height:10%}.ui.eleven.vertical.buttons>.button{height:9.09%}.ui.twelve.vertical.buttons>.button{height:8.3333%}.ui.buttons:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.buttons .button{float:left;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-left:1px solid rgba(0,0,0,.05)}.ui.buttons .button:first-child{margin-left:0;border-top-left-radius:.3125em;border-bottom-left-radius:.3125em}.ui.buttons .button:last-child{border-top-right-radius:.3125em;border-bottom-right-radius:.3125em}.ui.buttons.vertical{display:inline-block}.ui.buttons.vertical .button{display:block;float:none;border-bottom:1px solid rgba(0,0,0,.05);border-left:0;box-shadow:none}.ui.buttons.vertical .button:first-child,.ui.buttons.vertical .mini.button:first-child,.ui.buttons.vertical .tiny.button:first-child,.ui.buttons.vertical .small.button:first-child,.ui.buttons.vertical .massive.button:first-child,.ui.buttons.vertical .huge.button:first-child{margin-top:0;-moz-border-radius:.3125em .3125em 0 0;-webkit-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.buttons.vertical .button:last-child,.ui.buttons.vertical .mini.button:last-child,.ui.buttons.vertical .tiny.button:last-child,.ui.buttons.vertical .small.button:last-child,.ui.buttons.vertical .massive.button:last-child,.ui.buttons.vertical .huge.button:last-child,.ui.buttons.vertical .gigantic.button:last-child{-moz-border-radius:0 0 .3125em .3125em;-webkit-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em} \ No newline at end of file diff --git a/build/minified/elements/divider.min.css b/build/minified/elements/divider.min.css index 9222d5ab6..65617872b 100644 --- a/build/minified/elements/divider.min.css +++ b/build/minified/elements/divider.min.css @@ -1 +1 @@ -.ui.divider{margin:1em 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui.vertical.divider,.ui.horizontal.divider{position:absolute;border:0;height:0;margin:0;background-color:transparent;font-size:.8rem;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.vertical.ui.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.vertical.ui.divider:before,.vertical.ui.divider:after{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.vertical.ui.divider:before{top:-100%}.vertical.ui.divider:after{top:auto;bottom:0}.horizontal.ui.divider{position:relative;top:0;left:0;margin:1rem 0rem;width:100%;height:1em;padding:0;line-height:1}.horizontal.ui.divider:before,.horizontal.ui.divider:after{position:absolute;content:" ";z-index:3;width:45%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.horizontal.ui.divider:before{left:0}.horizontal.ui.divider:after{left:auto;right:0}.ui.divider.inverted{color:#fff}.ui.vertical.inverted.divider,.ui.horizontal.inverted.divider{color:rgba(255,255,255,.9)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both} \ No newline at end of file +.ui.divider{margin:1rem 0rem;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui.vertical.divider,.ui.horizontal.divider{position:absolute;border:0;height:0;margin:0;background-color:transparent;font-size:.8rem;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.vertical.ui.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.vertical.ui.divider:before,.vertical.ui.divider:after{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.vertical.ui.divider:before{top:-100%}.vertical.ui.divider:after{top:auto;bottom:0}.horizontal.ui.divider{position:relative;top:0;left:0;margin:1rem 0rem;width:100%;height:1em;padding:0;line-height:1}.horizontal.ui.divider:before,.horizontal.ui.divider:after{position:absolute;content:" ";z-index:3;width:45%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.horizontal.ui.divider:before{left:0}.horizontal.ui.divider:after{left:auto;right:0}.ui.divider.inverted{color:#fff}.ui.vertical.inverted.divider,.ui.horizontal.inverted.divider{color:rgba(255,255,255,.9)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both} \ No newline at end of file diff --git a/build/minified/elements/header.min.css b/build/minified/elements/header.min.css index 143424ee9..583899af4 100644 --- a/build/minified/elements/header.min.css +++ b/build/minified/elements/header.min.css @@ -1 +1 @@ -.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header .content{display:inline-block;vertical-align:middle}.ui.header .icon{margin-right:.5em}.ui.header:first-child{margin-top:0}.ui.header:last-child{margin-bottom:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.dividing.header{border-bottom:3px solid #6ECFF5}.ui.black.dividing.header{border-bottom:3px solid #5C6166}.ui.green.dividing.header{border-bottom:3px solid #A1CF64}.ui.red.dividing.header{border-bottom:3px solid #EF4D6D}.ui.purple.dividing.header{border-bottom:3px solid #564F8A}.ui.teal.dividing.header{border-bottom:3px solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left;margin-top:0;margin-right:.5em}.ui.right.floated.header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:block;margin-left:auto;margin-right:auto;text-align:center}.ui.icon.header .icon{float:none;display:block;font-size:4em;margin:0 auto .2em}.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{display:block} \ No newline at end of file +.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header .content{display:inline-block;vertical-align:middle}.ui.header .icon{margin-right:.5em}.ui.header:first-child{margin-top:0}.ui.header:last-child{margin-bottom:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.dividing.header{border-bottom:3px solid #6ECFF5}.ui.black.dividing.header{border-bottom:3px solid #5C6166}.ui.green.dividing.header{border-bottom:3px solid #A1CF64}.ui.red.dividing.header{border-bottom:3px solid #EF4D6D}.ui.purple.dividing.header{border-bottom:3px solid #564F8A}.ui.teal.dividing.header{border-bottom:3px solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left;margin-top:0;margin-right:.5em}.ui.right.floated.header{float:right;margin-top:0;margin-left:.5em}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:block;margin-left:auto;margin-right:auto;text-align:center}.ui.icon.header .icon{float:none;display:block;font-size:4em;margin:0 auto .2em}.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{display:block} \ No newline at end of file diff --git a/build/minified/elements/label.min.css b/build/minified/elements/label.min.css index d7bccb641..41fa769ab 100644 --- a/build/minified/elements/label.min.css +++ b/build/minified/elements/label.min.css @@ -1 +1 @@ -.ui.label{display:inline-block;vertical-align:middle;margin:-.5em .25em 0;background-color:#E8E8E8;padding:.5em .8em;color:rgba(0,0,0,.65);text-transform:uppercase;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.label{cursor:pointer}.ui.label.disabled{opacity:.5}.ui.label .detail{display:inline-block;margin-left:.5em;font-weight:700;opacity:.8}.ui.label .icon.close{cursor:pointer;margin-left:.5em;opacity:.7;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.labels .label:hover,a.ui.label:hover{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.labels a.label:hover:before,a.ui.label:hover:before{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.label .icon.close:hover{opacity:.99}.ui.tag.labels .label,.ui.tag.label{margin-left:1em;position:relative;padding:.33em 1.3em .33em 1.4em;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}.ui.tag.labels .label:before,.ui.tag.label:before{position:absolute;top:.3em;left:.3em;content:'';margin-left:-1em;background-image:none;width:1.5em;height:1.5em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.tag.labels .label:after,.ui.tag.label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.3em;background-color:#FFF;width:.55em;height:.55em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px}.ui.top.attached.label,.ui.attached.label{width:100%;position:absolute;margin:0;top:0;left:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.ui.bottom.attached.label{top:auto;bottom:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.ui.top.left.attached.label{width:auto;margin-top:0!important;-webkit-border-radius:4px 0;-moz-border-radius:4px 0;border-radius:4px 0}.ui.top.right.attached.label{width:auto;left:auto;right:0;-webkit-border-radius:0 4px;-moz-border-radius:0 4px;border-radius:0 4px}.ui.bottom.left.attached.label{width:auto;top:auto;bottom:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.ui.bottom.right.attached.label{width:auto;-webkit-border-radius:4px 0;-moz-border-radius:4px 0;border-radius:4px 0}.ui.corner.label{background-color:transparent;position:absolute;top:0;right:0;z-index:10;margin:0;font-size:.9em;width:1.75em;height:1.75em;padding:0;text-align:center;-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;border-color:transparent #E8E8E8 transparent transparent;border-style:solid;border-width:0 2.75em 2.75em 0;-webkit-transition:border-color .2s ease;-moz-transition:border-color .2s ease;-o-transition:border-color .2s ease;-ms-transition:border-color .2s ease;transition:border-color .2s ease}.ui.corner.label .icon{margin:.35em 0;vertical-align:top}.ui.corner.label .text{display:inline-block;margin:.7em 0 0;width:2.5em;font-size:.7em;text-align:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-width:2.75em 2.75em 0 0;border-color:#E8E8E8 transparent transparent}.ui.left.corner.label .text{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.corner.label:hover{background-color:transparent}a.ui.corner.label:hover::after{border-right-color:#E0E0E0}a.ui.left.corner.label:hover::after{border-right-color:transparent;border-top-color:#E0E0E0}.ui.label.fluid,.ui.fluid.labels>.label{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.inverted.labels .label,.ui.inverted.label{color:#FFF!important}.ui.black.labels .label,.ui.black.label{background-color:#5C6166!important;color:#FFF!important}.ui.labels .black.label:before,.ui.black.labels .label:before,.ui.black.label:before{background-color:#5C6166!important}a.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#888!important}.ui.labels a.black.label:hover:before,.ui.black.labels a.label:hover:before,a.ui.black.label:hover:before{background-color:#888!important}.ui.green.labels .label,.ui.green.label{background-color:#A1CF64!important;color:#FFF!important}.ui.labels .green.label:before,.ui.green.labels .label:before,.ui.green.label:before{background-color:#A1CF64!important}a.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#89B84C!important}.ui.labels a.green.label:hover:before,.ui.green.labels a.label:hover:before,a.ui.green.label:hover:before{background-color:#89B84C!important}.ui.red.labels .label,.ui.red.label{background-color:#EF4D6D!important;color:#FFF!important}.ui.labels .red.label:before,.ui.red.labels .label:before,.ui.red.label:before{background-color:#EF4D6D!important}.ui.red.corner.label{background-color:transparent}a.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#DE3859!important;color:#FFF!important}.ui.labels a.red.label:hover:before,.ui.red.labels a.label:hover:before,a.ui.red.label:hover:before{background-color:#DE3859!important}.ui.blue.labels .label,.ui.blue.label{background-color:#6ECFF5!important;color:#FFF!important}.ui.labels .blue.label:before,.ui.blue.labels .label:before,.ui.blue.label:before{background-color:#6ECFF5!important}a.ui.blue.labels .label:hover,.ui.blue.labels a.label:hover,a.ui.blue.label:hover{background-color:#1AB8F3!important;color:#FFF!important}.ui.labels a.blue.label:hover:before,.ui.blue.labels a.label:hover:before,a.ui.blue.label:hover:before{background-color:#1AB8F3!important}.ui.purple.labels .label,.ui.purple.label{background-color:#564F8A!important;color:#FFF!important}.ui.labels .purple.label:before,.ui.purple.labels .label:before,.ui.purple.label:before{background-color:#564F8A!important}a.ui.purple.labels .label:hover,.ui.purple.labels a.label:hover,a.ui.purple.label:hover{background-color:#3E3773!important;color:#FFF!important}.ui.labels a.purple.label:hover:before,.ui.purple.labels a.label:hover:before,a.ui.purple.label:hover:before{background-color:#3E3773!important}.ui.teal.labels .label,.ui.teal.label{background-color:#00B5AD!important;color:#FFF!important}.ui.labels .teal.label:before,.ui.teal.labels .label:before,.ui.teal.label:before{background-color:#00B5AD!important}a.ui.teal.labels .label:hover,.ui.teal.labels a.label:hover,a.ui.teal.label:hover{background-color:#009A93!important;color:#FFF!important}.ui.labels a.teal.label:hover:before,.ui.teal.labels a.label:hover:before,a.ui.teal.tag.label:hover:before{background-color:#009A93!important}.ui.circular.label{margin-right:.5em;margin-top:-1em;width:2em;height:2em;padding:.5em;line-height:1em;text-align:center}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{position:absolute;content:"";width:.6em;height:.6em;background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.pointing.label:before{background-color:#E8E8E8}.ui.pointing.label,.ui.pointing.above.label{margin-top:1em}.ui.pointing.label:before,.ui.pointing.above.label:before{margin-left:-.3em;top:-.3em;left:50%}.ui.pointing.below.label{margin-top:0;margin-bottom:1em}.ui.pointing.below.label:before{margin-left:-.3em;top:auto;right:auto;bottom:-.3em;left:50%}.ui.pointing.left.label{margin-top:0;margin-left:1em}.ui.pointing.left.label:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.pointing.right.label{margin-top:0;margin-right:1em}.ui.pointing.right.label:before{margin-top:-.3em;right:-.3em;top:50%;bottom:auto;left:auto}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important;-webkit-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset}.ui.label{font-size:.8rem}.ui.small.labels .label,.ui.small.label{font-size:.7rem}.ui.large.labels .label,.ui.large.label{font-size:1rem} \ No newline at end of file +.ui.label{display:inline-block;vertical-align:middle;margin:-.5em .25em 0;background-color:#E8E8E8;padding:.5em .8em;color:rgba(0,0,0,.65);text-transform:uppercase;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.label{cursor:pointer}.ui.label.disabled{opacity:.5}.ui.label .detail{display:inline-block;margin-left:.5em;font-weight:700;opacity:.8}.ui.label .icon.close{cursor:pointer;margin:0 0 0 .5em;opacity:.7;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.labels .label:hover,a.ui.label:hover{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.labels a.label:hover:before,a.ui.label:hover:before{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.label .icon.close:hover{opacity:.99}.ui.tag.labels .label,.ui.tag.label{margin-left:1em;position:relative;padding:.33em 1.3em .33em 1.4em;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}.ui.tag.labels .label:before,.ui.tag.label:before{position:absolute;top:.3em;left:.3em;content:'';margin-left:-1em;background-image:none;width:1.5em;height:1.5em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.tag.labels .label:after,.ui.tag.label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.3em;background-color:#FFF;width:.55em;height:.55em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px}.ui.top.attached.label,.ui.attached.label{width:100%;position:absolute;margin:0;top:0;left:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.ui.bottom.attached.label{top:auto;bottom:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.ui.top.left.attached.label{width:auto;margin-top:0!important;-webkit-border-radius:4px 0;-moz-border-radius:4px 0;border-radius:4px 0}.ui.top.right.attached.label{width:auto;left:auto;right:0;-webkit-border-radius:0 4px;-moz-border-radius:0 4px;border-radius:0 4px}.ui.bottom.left.attached.label{width:auto;top:auto;bottom:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px}.ui.bottom.right.attached.label{top:auto;bottom:0;left:auto;right:0;width:auto;-webkit-border-radius:4px 0;-moz-border-radius:4px 0;border-radius:4px 0}.ui.corner.label{background-color:transparent;position:absolute;top:0;right:0;z-index:10;margin:0;font-size:.9em;width:1.75em;height:1.75em;padding:0;text-align:center;-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;border-color:transparent #E8E8E8 transparent transparent;border-style:solid;border-width:0 2.75em 2.75em 0;-webkit-transition:border-color .2s ease;-moz-transition:border-color .2s ease;-o-transition:border-color .2s ease;-ms-transition:border-color .2s ease;transition:border-color .2s ease}.ui.corner.label .icon{margin:.35em 0;vertical-align:top}.ui.corner.label .text{display:inline-block;margin:.7em 0 0;width:2.5em;font-size:.7em;text-align:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-width:2.75em 2.75em 0 0;border-color:#E8E8E8 transparent transparent}.ui.left.corner.label .text{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.corner.label:hover{background-color:transparent}a.ui.corner.label:hover::after{border-right-color:#E0E0E0}a.ui.left.corner.label:hover::after{border-right-color:transparent;border-top-color:#E0E0E0}.ui.label.fluid,.ui.fluid.labels>.label{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.inverted.labels .label,.ui.inverted.label{color:#FFF!important}.ui.black.labels .label,.ui.black.label{background-color:#5C6166!important;color:#FFF!important}.ui.labels .black.label:before,.ui.black.labels .label:before,.ui.black.label:before{background-color:#5C6166!important}a.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#888!important}.ui.labels a.black.label:hover:before,.ui.black.labels a.label:hover:before,a.ui.black.label:hover:before{background-color:#888!important}.ui.green.labels .label,.ui.green.label{background-color:#A1CF64!important;color:#FFF!important}.ui.labels .green.label:before,.ui.green.labels .label:before,.ui.green.label:before{background-color:#A1CF64!important}a.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#89B84C!important}.ui.labels a.green.label:hover:before,.ui.green.labels a.label:hover:before,a.ui.green.label:hover:before{background-color:#89B84C!important}.ui.red.labels .label,.ui.red.label{background-color:#EF4D6D!important;color:#FFF!important}.ui.labels .red.label:before,.ui.red.labels .label:before,.ui.red.label:before{background-color:#EF4D6D!important}.ui.red.corner.label{background-color:transparent}a.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#DE3859!important;color:#FFF!important}.ui.labels a.red.label:hover:before,.ui.red.labels a.label:hover:before,a.ui.red.label:hover:before{background-color:#DE3859!important}.ui.blue.labels .label,.ui.blue.label{background-color:#6ECFF5!important;color:#FFF!important}.ui.labels .blue.label:before,.ui.blue.labels .label:before,.ui.blue.label:before{background-color:#6ECFF5!important}a.ui.blue.labels .label:hover,.ui.blue.labels a.label:hover,a.ui.blue.label:hover{background-color:#1AB8F3!important;color:#FFF!important}.ui.labels a.blue.label:hover:before,.ui.blue.labels a.label:hover:before,a.ui.blue.label:hover:before{background-color:#1AB8F3!important}.ui.purple.labels .label,.ui.purple.label{background-color:#564F8A!important;color:#FFF!important}.ui.labels .purple.label:before,.ui.purple.labels .label:before,.ui.purple.label:before{background-color:#564F8A!important}a.ui.purple.labels .label:hover,.ui.purple.labels a.label:hover,a.ui.purple.label:hover{background-color:#3E3773!important;color:#FFF!important}.ui.labels a.purple.label:hover:before,.ui.purple.labels a.label:hover:before,a.ui.purple.label:hover:before{background-color:#3E3773!important}.ui.teal.labels .label,.ui.teal.label{background-color:#00B5AD!important;color:#FFF!important}.ui.labels .teal.label:before,.ui.teal.labels .label:before,.ui.teal.label:before{background-color:#00B5AD!important}a.ui.teal.labels .label:hover,.ui.teal.labels a.label:hover,a.ui.teal.label:hover{background-color:#009A93!important;color:#FFF!important}.ui.labels a.teal.label:hover:before,.ui.teal.labels a.label:hover:before,a.ui.teal.tag.label:hover:before{background-color:#009A93!important}.ui.circular.labels .label,.ui.circular.label{margin-top:-1em;height:2em;padding:.5em!important;line-height:1em;text-align:center;-webkit-border-radius:500em;-moz-border-radius:500em;border-radius:500em}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{position:absolute;content:"";width:.6em;height:.6em;background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.pointing.label:before{background-color:#E8E8E8}.ui.pointing.label,.ui.pointing.above.label{margin-top:1em}.ui.pointing.label:before,.ui.pointing.above.label:before{margin-left:-.3em;top:-.3em;left:50%}.ui.pointing.below.label{margin-top:0;margin-bottom:1em}.ui.pointing.below.label:before{margin-left:-.3em;top:auto;right:auto;bottom:-.3em;left:50%}.ui.pointing.left.label{margin-top:0;margin-left:1em}.ui.pointing.left.label:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.pointing.right.label{margin-top:0;margin-right:1em}.ui.pointing.right.label:before{margin-top:-.3em;right:-.3em;top:50%;bottom:auto;left:auto}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important}.ui.label{font-size:.8rem}.ui.small.labels .label,.ui.small.label{font-size:.7rem}.ui.large.labels .label,.ui.large.label{font-size:1rem} \ No newline at end of file diff --git a/build/minified/modules/accordion.js b/build/minified/modules/accordion.js index 02edd2a6c..de5cf14c4 100644 --- a/build/minified/modules/accordion.js +++ b/build/minified/modules/accordion.js @@ -90,6 +90,14 @@ $.fn.accordion = function(parameters) { else { module.open(activeIndex); } + }, + + resetStyle: function() { + $(this) + .removeAttr('style') + .children() + .removeAttr('style') + ; } }, @@ -113,7 +121,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed , settings.easing, function() { $previousContent @@ -161,7 +169,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed, settings.easing, function(){ $activeContent @@ -329,7 +337,7 @@ $.fn.accordion.settings = { debug : true, verbose : true, - performance : true, + performance : false, exclusive : true, collapsible : true, diff --git a/build/minified/modules/accordion.min.css b/build/minified/modules/accordion.min.css index 1c54a85e6..f10a06316 100644 --- a/build/minified/modules/accordion.min.css +++ b/build/minified/modules/accordion.min.css @@ -1 +1 @@ -.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0} \ No newline at end of file +.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.basic.accordion.menu{background-color:#FFF;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0} \ No newline at end of file diff --git a/build/minified/modules/accordion.min.js b/build/minified/modules/accordion.min.js index ed70d0828..e11bdfba4 100644 --- a/build/minified/modules/accordion.min.js +++ b/build/minified/modules/accordion.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.accordion=function(b){var c,e=a(this),f=a.isPlainObject(b)?a.extend(!0,{},a.fn.accordion.settings,b):a.fn.accordion.settings,g=("."+f.namespace,"module-"+f.namespace,e.selector||""),h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=e.find(f.selector.title),n=(e.find(f.selector.icon),e.find(f.selector.content)),o=(e.selector||"",this),p=e.data("module-"+f.namespace),q=f.className,r=(f.metadata,f.namespace),s=(f.animation,f.errors);b={initialize:function(){b.debug("Initializing accordion with bound events",e),m.on("click",b.event.click),e.data("module",b)},destroy:function(){b.debug("Destroying previous accordion for",e),e.off(r)},event:{click:function(){var c=a(this),d=m.index(c),e=c.hasClass(q.active);b.verbose("Accordion title clicked",c),e?f.collapsible?b.close(d):b.debug("Cannot close accordion content collapsing is disabled"):b.open(d)}},open:function(c){var d=m.eq(c),e=d.next(n),g=m.filter("."+q.active),h=g.next(m),i=g.size()>0;e.is(":animated")||(b.debug("Opening accordion content",d),f.exclusive&&i&&(g.removeClass(q.active),h.stop().children().animate({opacity:0},f.speed).end().slideUp(f.speed,f.easing,function(){h.removeClass(q.active).removeAttr("style").children().removeAttr("style")})),d.addClass(q.active),e.stop().children().removeAttr("style").end().slideDown(f.speed,f.easing,function(){e.addClass(q.active).removeAttr("style"),a.proxy(f.onOpen,e)(),a.proxy(f.onChange,e)()}))},close:function(c){var d=m.eq(c),e=d.next(n);b.debug("Closing accordion content",d),d.removeClass(q.active),e.removeClass(q.active).show().stop().children().animate({opacity:0},f.speed).end().slideUp(f.speed,f.easing,function(){e.removeAttr("style"),a.proxy(f.onClose,e)(),a.proxy(f.onChange,e)()})},setting:function(c,e){return b.debug("Changing setting",c,e),e===d?f[c]:(a.isPlainObject(c)?a.extend(!0,f,c):f[c]=e,void 0)},internal:function(c,e){return b.debug("Changing internal",c,e),e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.log,console,f.moduleName+":")},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:o,Name:a[0],Arguments:a[1]||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=f.moduleName+":",c=0;h=!1,a.each(i,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",g&&(b+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(b),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=o||f,"string"==typeof c&&p!==d&&(c=c.split("."),g=c.length-1,a.each(c,function(c,e){return a.isPlainObject(p[e])&&c!=g?(p=p[e],!0):p[e]!==d?(h=p[e],!0):(b.error(s.method),!1)})),a.isFunction(h)?(p.verbose("Executing invoked function",h),h.apply(f,e)):h||!1}},k?(p===d&&b.initialize(),c=b.invoke(j)):(p!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.accordion.settings={moduleName:"Accordion",debug:!0,verbose:!0,performance:!0,exclusive:!0,collapsible:!0,onOpen:function(){},onClose:function(){},onChange:function(){},errors:{method:"The method you called is not defined"},className:{active:"active",hover:"hover"},selector:{title:".title",icon:".icon",content:".content"},speed:500,easing:"easeInOutQuint"}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.accordion=function(b){var c,e=a(this),f=a.isPlainObject(b)?a.extend(!0,{},a.fn.accordion.settings,b):a.fn.accordion.settings,g=("."+f.namespace,"module-"+f.namespace,e.selector||""),h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=e.find(f.selector.title),n=(e.find(f.selector.icon),e.find(f.selector.content)),o=(e.selector||"",this),p=e.data("module-"+f.namespace),q=f.className,r=(f.metadata,f.namespace),s=(f.animation,f.errors);b={initialize:function(){b.debug("Initializing accordion with bound events",e),m.on("click",b.event.click),e.data("module",b)},destroy:function(){b.debug("Destroying previous accordion for",e),e.off(r)},event:{click:function(){var c=a(this),d=m.index(c),e=c.hasClass(q.active);b.verbose("Accordion title clicked",c),e?f.collapsible?b.close(d):b.debug("Cannot close accordion content collapsing is disabled"):b.open(d)},resetStyle:function(){a(this).removeAttr("style").children().removeAttr("style")}},open:function(c){var d=m.eq(c),e=d.next(n),g=m.filter("."+q.active),h=g.next(m),i=g.size()>0;e.is(":animated")||(b.debug("Opening accordion content",d),f.exclusive&&i&&(g.removeClass(q.active),h.stop().children().animate({opacity:0},f.speed,b.event.resetStyle).end().slideUp(f.speed,f.easing,function(){h.removeClass(q.active).removeAttr("style").children().removeAttr("style")})),d.addClass(q.active),e.stop().children().removeAttr("style").end().slideDown(f.speed,f.easing,function(){e.addClass(q.active).removeAttr("style"),a.proxy(f.onOpen,e)(),a.proxy(f.onChange,e)()}))},close:function(c){var d=m.eq(c),e=d.next(n);b.debug("Closing accordion content",d),d.removeClass(q.active),e.removeClass(q.active).show().stop().children().animate({opacity:0},f.speed,b.event.resetStyle).end().slideUp(f.speed,f.easing,function(){e.removeAttr("style"),a.proxy(f.onClose,e)(),a.proxy(f.onChange,e)()})},setting:function(c,e){return b.debug("Changing setting",c,e),e===d?f[c]:(a.isPlainObject(c)?a.extend(!0,f,c):f[c]=e,void 0)},internal:function(c,e){return b.debug("Changing internal",c,e),e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.log,console,f.moduleName+":")},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:o,Name:a[0],Arguments:a[1]||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=f.moduleName+":",c=0;h=!1,a.each(i,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",g&&(b+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(b),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=o||f,"string"==typeof c&&p!==d&&(c=c.split("."),g=c.length-1,a.each(c,function(c,e){return a.isPlainObject(p[e])&&c!=g?(p=p[e],!0):p[e]!==d?(h=p[e],!0):(b.error(s.method),!1)})),a.isFunction(h)?(p.verbose("Executing invoked function",h),h.apply(f,e)):h||!1}},k?(p===d&&b.initialize(),c=b.invoke(j)):(p!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.accordion.settings={moduleName:"Accordion",debug:!0,verbose:!0,performance:!1,exclusive:!0,collapsible:!0,onOpen:function(){},onClose:function(){},onChange:function(){},errors:{method:"The method you called is not defined"},className:{active:"active",hover:"hover"},selector:{title:".title",icon:".icon",content:".content"},speed:500,easing:"easeInOutQuint"}}(jQuery,window,document); \ No newline at end of file diff --git a/build/minified/modules/nag.js b/build/minified/modules/nag.js index 911c6a977..83792f898 100644 --- a/build/minified/modules/nag.js +++ b/build/minified/modules/nag.js @@ -116,12 +116,20 @@ ; } }, + hide: function() { $module - .fadeOut(settings.duration, settings.easing) + .fadeOut(settings.duration, settings.easing, this.onHide) ; }, + onHide: function() { + $module.remove(); + if (settings.onHide) { + settings.onHide(); + }; + }, + stick: function() { module.refresh(); @@ -144,7 +152,7 @@ else { $module .css({ - top : yPosition + top : yPosition }) ; } @@ -152,15 +160,17 @@ unStick: function() { $module .css({ - top : '' + top : '' }) ; }, - dismiss: function() { + dismiss: function(event) { if(settings.storageMethod) { module.storage.set(settings.storedKey, settings.storedValue); } module.hide(); + event.stopImmediatePropagation(); + event.preventDefault(); }, should: { @@ -321,7 +331,9 @@ }, speed : 500, - easing : 'easeOutQuad' + easing : 'easeOutQuad', + + onHide: function() {} }; diff --git a/build/minified/modules/nag.min.css b/build/minified/modules/nag.min.css index 9135ee258..75a10e3f8 100644 --- a/build/minified/modules/nag.min.css +++ b/build/minified/modules/nag.min.css @@ -1 +1 @@ -.ui.nag{display:none;opacity:.95;position:absolute;top:0;left:10%;z-index:100;width:80%;min-height:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:.75em 1em;background-color:#555;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1em;text-align:center;color:rgba(255,255,255,.8);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:.2s background;-moz-transition:.2s background;-o-transition:.2s background;-ms-transition:.2s background;transition:.2s background}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#FFF}.ui.nag>.icon.close{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;margin-top:-.5em;color:#FFF;-webkit-transition:.1s opacity;-moz-transition:.1s opacity;-o-transition:.1s opacity;-ms-transition:.1s opacity;transition:.1s opacity}.ui.nag:hover{opacity:1}.ui.nag .close:hover{opacity:1}.ui.static.nag{position:static;display:block}.ui.fixed.nag{position:fixed}.ui.nag.bottom{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.nag.bottom.fixed{top:auto;bottom:0}.ui.nag.white{background-color:#F1F1F1;text-shadow:0 1px 0 rgba(255,255,255,.8);color:#ACACAC}.ui.nag.white .close,.ui.nag.white .title{color:#333} \ No newline at end of file +.ui.nag{display:none;opacity:.95;position:absolute;top:0;left:10%;z-index:101;width:80%;min-height:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:.75em 1em;background-color:#555;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1em;text-align:center;color:rgba(255,255,255,.8);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:.2s background;-moz-transition:.2s background;-o-transition:.2s background;-ms-transition:.2s background;transition:.2s background}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#FFF}.ui.nag>.icon.close{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;margin-top:-.5em;color:#FFF;-webkit-transition:.1s opacity;-moz-transition:.1s opacity;-o-transition:.1s opacity;-ms-transition:.1s opacity;transition:.1s opacity}.ui.nag:hover{opacity:1}.ui.nag .close:hover{opacity:1}.ui.static.nag{position:static;display:block}.ui.fixed.nag{position:fixed}.ui.nag.bottom{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.nag.bottom.fixed{top:auto;bottom:0}.ui.nag.white{background-color:#F1F1F1;text-shadow:0 1px 0 rgba(255,255,255,.8);color:#ACACAC}.ui.nag.white .close,.ui.nag.white .title{color:#333} \ No newline at end of file diff --git a/build/minified/modules/nag.min.js b/build/minified/modules/nag.min.js index dc37dab58..c050b6d72 100644 --- a/build/minified/modules/nag.min.js +++ b/build/minified/modules/nag.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.nag=function(c){var e=a.extend(!0,{},a.fn.nag.settings,c),f=arguments||!1;return a(this).each(function(){var c,g,h,i,j,k,l,m,n,o=a(this),p=o.find(e.selector.close),q=a(e.context),r=o.data("module"),s=e.className,t=b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)};return n={initialize:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset(),o.data("module",n),p.on("click",n.dismiss),e.context==b&&"fixed"==e.position&&o.addClass(s.fixed),e.sticky&&("absolute"==e.position?q.on("scroll resize",n.event.scroll):a(b).on("scroll resize",n.event.scroll),a.proxy(n.event.scroll,this)()),e.displayTime>0&&setTimeout(n.hide,e.displayTime),n.should.show()?o.is(":visible")||n.show():n.hide()},refresh:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset()},show:function(){a.fn.popIn!==d?o.popIn(e.duration):o.fadeIn(e.duration,e.easing)},hide:function(){o.fadeOut(e.duration,e.easing)},stick:function(){if(n.refresh(),"fixed"==e.position){var c=a(b).prop("pageYOffset")||a(b).scrollTop(),d=o.hasClass(s.bottom)?j.top+(i-g)-c:j.top-c;o.css({position:"fixed",top:d,left:j.left,width:h-e.scrollBarWidth})}else o.css({top:l})},unStick:function(){o.css({top:""})},dismiss:function(){e.storageMethod&&n.storage.set(e.storedKey,e.storedValue),n.hide()},should:{show:function(){return e.persist||n.storage.get(e.storedKey)!=e.storedValue?!0:!1},stick:function(){return k=q.prop("pageYOffset")||q.scrollTop(),l=o.hasClass(s.bottom)?i-o.outerHeight()+k:k,l>c.top?!0:"fixed"==e.position?!0:!1}},storage:{set:function(c,f){"local"==e.storageMethod&&b.store!==d?b.store.set(c,f):a.cookie!==d?a.cookie(c,f):n.error(e.errors.noStorage)},get:function(c){return"local"==e.storageMethod&&b.store!==d?b.store.get(c):a.cookie!==d?a.cookie(c):(n.error(e.errors.noStorage),void 0)}},event:{scroll:function(){m!==d&&clearTimeout(m),m=setTimeout(function(){n.should.stick()?t(n.stick):n.unStick()},e.lag)}},error:function(a){console.log("Nag Module:"+a)},invoke:function(b,c,f){var g;return f=f||Array.prototype.slice.call(arguments,2),"string"==typeof b&&r!==d&&(b=b.split("."),a.each(b,function(b,c){return a.isPlainObject(r[c])?(r=r[c],!0):a.isFunction(r[c])?(g=r[c],!0):(n.error(e.errors.method),!1)})),a.isFunction(g)?g.apply(c,f):g}},r!==d&&f?("invoke"==f[0]&&(f=Array.prototype.slice.call(f,1)),n.invoke(f[0],this,Array.prototype.slice.call(f,1))):(n.initialize(),void 0)}),this},a.fn.nag.settings={persist:!1,displayTime:0,position:"fixed",scrollBarWidth:18,storageMethod:"cookie",storedKey:"nag",storedValue:"dismiss",sticky:!1,lag:0,context:b,errors:{noStorage:"Neither $.cookie or store is defined. A storage solution is required for storing state"},className:{bottom:"bottom",fixed:"fixed"},selector:{close:".icon.close"},speed:500,easing:"easeOutQuad"}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.nag=function(c){var e=a.extend(!0,{},a.fn.nag.settings,c),f=arguments||!1;return a(this).each(function(){var c,g,h,i,j,k,l,m,n,o=a(this),p=o.find(e.selector.close),q=a(e.context),r=o.data("module"),s=e.className,t=b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)};return n={initialize:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset(),o.data("module",n),p.on("click",n.dismiss),e.context==b&&"fixed"==e.position&&o.addClass(s.fixed),e.sticky&&("absolute"==e.position?q.on("scroll resize",n.event.scroll):a(b).on("scroll resize",n.event.scroll),a.proxy(n.event.scroll,this)()),e.displayTime>0&&setTimeout(n.hide,e.displayTime),n.should.show()?o.is(":visible")||n.show():n.hide()},refresh:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset()},show:function(){a.fn.popIn!==d?o.popIn(e.duration):o.fadeIn(e.duration,e.easing)},hide:function(){o.fadeOut(e.duration,e.easing,this.onHide)},onHide:function(){o.remove(),e.onHide&&e.onHide()},stick:function(){if(n.refresh(),"fixed"==e.position){var c=a(b).prop("pageYOffset")||a(b).scrollTop(),d=o.hasClass(s.bottom)?j.top+(i-g)-c:j.top-c;o.css({position:"fixed",top:d,left:j.left,width:h-e.scrollBarWidth})}else o.css({top:l})},unStick:function(){o.css({top:""})},dismiss:function(a){e.storageMethod&&n.storage.set(e.storedKey,e.storedValue),n.hide(),a.stopImmediatePropagation(),a.preventDefault()},should:{show:function(){return e.persist||n.storage.get(e.storedKey)!=e.storedValue?!0:!1},stick:function(){return k=q.prop("pageYOffset")||q.scrollTop(),l=o.hasClass(s.bottom)?i-o.outerHeight()+k:k,l>c.top?!0:"fixed"==e.position?!0:!1}},storage:{set:function(c,f){"local"==e.storageMethod&&b.store!==d?b.store.set(c,f):a.cookie!==d?a.cookie(c,f):n.error(e.errors.noStorage)},get:function(c){return"local"==e.storageMethod&&b.store!==d?b.store.get(c):a.cookie!==d?a.cookie(c):(n.error(e.errors.noStorage),void 0)}},event:{scroll:function(){m!==d&&clearTimeout(m),m=setTimeout(function(){n.should.stick()?t(n.stick):n.unStick()},e.lag)}},error:function(a){console.log("Nag Module:"+a)},invoke:function(b,c,f){var g;return f=f||Array.prototype.slice.call(arguments,2),"string"==typeof b&&r!==d&&(b=b.split("."),a.each(b,function(b,c){return a.isPlainObject(r[c])?(r=r[c],!0):a.isFunction(r[c])?(g=r[c],!0):(n.error(e.errors.method),!1)})),a.isFunction(g)?g.apply(c,f):g}},r!==d&&f?("invoke"==f[0]&&(f=Array.prototype.slice.call(f,1)),n.invoke(f[0],this,Array.prototype.slice.call(f,1))):(n.initialize(),void 0)}),this},a.fn.nag.settings={persist:!1,displayTime:0,position:"fixed",scrollBarWidth:18,storageMethod:"cookie",storedKey:"nag",storedValue:"dismiss",sticky:!1,lag:0,context:b,errors:{noStorage:"Neither $.cookie or store is defined. A storage solution is required for storing state"},className:{bottom:"bottom",fixed:"fixed"},selector:{close:".icon.close"},speed:500,easing:"easeOutQuad",onHide:function(){}}}(jQuery,window,document); \ No newline at end of file diff --git a/build/minified/modules/popup.js b/build/minified/modules/popup.js index 8fb910822..7e71908e8 100644 --- a/build/minified/modules/popup.js +++ b/build/minified/modules/popup.js @@ -130,7 +130,7 @@ $.fn.popup = function(parameters) { // generates popup html from metadata create: function() { - module.debug('Creating pop-up content'); + module.debug('Creating pop-up html'); var html = $module.data(metadata.html) || settings.html, variation = $module.data(metadata.variation) || settings.variation, @@ -245,14 +245,9 @@ $.fn.popup = function(parameters) { module.debug('Toggling pop-up'); // refresh state of module module.refresh(); - if($popup.size() === 0) { - module.verbose('Creating pop-up html'); - module.create(); - } if( !$module.hasClass(className.visible) ) { - if( module.position() ) { - module.show(); - } + module.hideAll(); + module.show(); } else { module.hide(); @@ -387,13 +382,10 @@ $.fn.popup = function(parameters) { show: function() { module.debug('Showing pop-up'); - $(selector.popup) - .filter(':visible') - .stop() - .fadeOut(200) - .prev($module) - .removeClass(className.visible) - ; + if($popup.size() === 0) { + module.create(); + } + module.position(); $module .addClass(className.visible) ; @@ -401,12 +393,14 @@ $.fn.popup = function(parameters) { .removeClass(className.loading) ; if(settings.animation == 'pop' && $.fn.popIn !== undefined) { + console.log($popup); $popup .stop() .popIn(settings.duration, settings.easing) ; } else { + console.log($popup); $popup .stop() .fadeIn(settings.duration, settings.easing) @@ -421,6 +415,16 @@ $.fn.popup = function(parameters) { $.proxy(settings.onShow, $popup)(); }, + hideAll: function() { + $(selector.popup) + .filter(':visible') + .stop() + .fadeOut(200) + .prev($module) + .removeClass(className.visible) + ; + }, + hide: function() { $module .removeClass(className.visible) @@ -509,7 +513,6 @@ $.fn.popup = function(parameters) { } }, error: function() { - console.log($module.next()); module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':'); }, performance: { @@ -616,9 +619,9 @@ $.fn.popup = function(parameters) { $.fn.popup.settings = { moduleName : 'Popup', - debug : false, - verbose : false, - performance : false, + debug : true, + verbose : true, + performance : true, namespace : 'popup', onInit : function(){}, diff --git a/build/minified/modules/popup.min.css b/build/minified/modules/popup.min.css index acf50b018..5416e279e 100644 --- a/build/minified/modules/popup.min.css +++ b/build/minified/modules/popup.min.css @@ -1 +1 @@ -.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;color:rgba(0,0,0,.7);-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333} \ No newline at end of file +.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} \ No newline at end of file diff --git a/build/minified/modules/popup.min.js b/build/minified/modules/popup.min.js index 32cec4ea0..2889afa2e 100644 --- a/build/minified/modules/popup.min.js +++ b/build/minified/modules/popup.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.popup=function(e){var f,g=a(this),h=a.isPlainObject(e)?a.extend(!0,{},a.fn.popup.settings,e):a.fn.popup.settings,i=("."+h.namespace,"module-"+h.namespace,g.selector||""),j=(g.size(),(new Date).getTime()),k=[],l=h.selector,m=h.className,n=h.error,o=h.metadata,p=h.namespace,q=arguments[0],r="string"==typeof q,s=[].slice.call(arguments,1);return g.each(function(){var e,g=a(this),t=a(b),u=g.offsetParent(),v=h.inline?g.next(l.popup):t.children(l.popup).last(),w=0,x=this,y=g.data("module-"+h.namespace);e={initialize:function(){e.debug("Initializing module",g),"hover"==h.on?g.on("mouseenter."+p,e.event.mouseenter).on("mouseleave."+p,e.event.mouseleave):g.on(h.on+"."+p,e.event[h.on]),t.on("resize."+p,e.event.resize),e.instantiate()},instantiate:function(){e.verbose("Storing instance of module"),y=e,g.data("module-"+p,y)},refresh:function(){v=h.inline?g.next(l.popup):t.children(l.popup).last(),u=g.offsetParent()},destroy:function(){e.debug("Destroying existing popups"),g.off("."+p)},event:{mouseenter:function(b){var c=this;e.timer=setTimeout(function(){a.proxy(e.toggle,c)(),a(c).hasClass(m.visible)&&b.stopPropagation()},h.delay)},mouseleave:function(){clearTimeout(e.timer),g.is(":visible")&&e.hide()},click:function(b){a.proxy(e.toggle,this)(),a(this).hasClass(m.visible)&&b.stopPropagation()},resize:function(){v.is(":visible")&&e.position()}},create:function(){e.debug("Creating pop-up content");var b=g.data(o.html)||h.html,c=g.data(o.variation)||h.variation,d=g.data(o.title)||h.title,f=g.data(o.content)||g.attr("title")||h.content;b||f||d?(b||(b=h.template({title:d,content:f})),v=a("
").addClass(m.popup).addClass(c).html(b),h.inline?v.insertAfter(g):v.appendTo(a("body")),a.proxy(h.onInit,v)()):e.error(n.content)},remove:function(){v.remove()},get:{offstagePosition:function(){var c={top:a(b).scrollTop(),bottom:a(b).scrollTop()+a(b).height(),left:0,right:a(b).width()},d={width:v.width(),height:v.outerHeight(),position:v.offset()},e={},f=[];return d.position&&(e={top:d.position.topc.bottom,right:d.position.left+d.width>c.right,left:d.position.left0?f.join(" "):!1},nextPosition:function(a){switch(a){case"top left":a="bottom left";break;case"bottom left":a="top right";break;case"top right":a="bottom right";break;case"bottom right":a="top center";break;case"top center":a="bottom center";break;case"bottom center":a="right center";break;case"right center":a="left center";break;case"left center":a="top center"}return a}},toggle:function(){g=a(this),e.debug("Toggling pop-up"),e.refresh(),0===v.size()&&(e.verbose("Creating pop-up html"),e.create()),g.hasClass(m.visible)?e.hide():e.position()&&e.show()},position:function(c,d){var f,i,j=(a(b).width(),a(b).height(),g.outerWidth()),k=g.outerHeight(),l=v.width(),p=v.outerHeight(),q=h.inline?g.position():g.offset(),r=h.inline?u.outerWidth():t.outerWidth(),s=h.inline?u.outerHeight():t.outerHeight();switch(c=c||g.data(o.position)||h.position,d=d||g.data(o.arrowOffset)||h.arrowOffset,e.debug("Calculating offset for position",c),c){case"top left":f={top:"auto",bottom:s-q.top+h.distanceAway,left:q.left+d};break;case"top center":f={bottom:s-q.top+h.distanceAway,left:q.left+j/2-l/2+d,top:"auto",right:"auto"};break;case"top right":f={bottom:s-q.top+h.distanceAway,right:r-q.left-j-d,top:"auto",left:"auto"};break;case"left center":f={top:q.top+k/2-p/2,right:r-q.left+h.distanceAway-d,left:"auto",bottom:"auto"};break;case"right center":f={top:q.top+k/2-p/2,left:q.left+j+h.distanceAway+d,bottom:"auto",right:"auto"};break;case"bottom left":f={top:q.top+k+h.distanceAway,left:q.left+d,bottom:"auto",right:"auto"};break;case"bottom center":f={top:q.top+k+h.distanceAway,left:q.left+j/2-l/2+d,bottom:"auto",right:"auto"};break;case"bottom right":f={top:q.top+k+h.distanceAway,right:r-q.left-j-d,left:"auto",bottom:"auto"}}return a.extend(f,{width:v.width()+1}),v.removeAttr("style").removeClass("top right bottom left center").css(f).addClass(c).addClass(m.loading),i=e.get.offstagePosition(),i?(e.debug("Element is outside boundaries ",i),w0&&(console.groupCollapsed(b),console.table?console.table(k):a.each(k,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),k=[]}},invoke:function(b,c,f){var g,h;return c=c||s,f=x||f,"string"==typeof b&&y!==d&&(b=b.split("."),g=b.length-1,a.each(b,function(b,c){a.isPlainObject(y[c])&&b!=g?y=y[c]:y[c]!==d?h=y[c]:e.error(n.method)})),a.isFunction(h)?(y.verbose("Executing invoked function",h),h.apply(f,c)):h||!1}},r?(y===d&&e.initialize(),f=e.invoke(q)):(y===d&&e.destroy(),e.initialize())}),f?f:this},a.fn.popup.settings={moduleName:"Popup",debug:!1,verbose:!1,performance:!1,namespace:"popup",onInit:function(){},onShow:function(){},onHide:function(){},variation:"",content:!1,html:!1,title:!1,on:"hover",clicktoClose:!0,position:"top center",delay:150,inline:!0,duration:250,easing:"easeOutQuint",animation:"pop",distanceAway:0,arrowOffset:0,maxSearchDepth:10,error:{content:"Your popup has no content specified",method:"The method you called is not defined.",recursion:"Popup attempted to reposition element to fit, but could not find an adequate position."},metadata:{arrowOffset:"arrowOffset",content:"content",html:"html",position:"position",title:"title",variation:"variation"},className:{popup:"ui popup",visible:"visible",loading:"loading"},selector:{popup:".ui.popup"},template:function(a){var b="";return typeof a!==d&&(typeof a.title!==d&&a.title&&(b+='
'+a.title+'
'),typeof a.content!==d&&a.content&&(b+='
'+a.content+"
")),b}}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.popup=function(e){var f,g=a(this),h=a.isPlainObject(e)?a.extend(!0,{},a.fn.popup.settings,e):a.fn.popup.settings,i=("."+h.namespace,"module-"+h.namespace,g.selector||""),j=(g.size(),(new Date).getTime()),k=[],l=h.selector,m=h.className,n=h.error,o=h.metadata,p=h.namespace,q=arguments[0],r="string"==typeof q,s=[].slice.call(arguments,1);return g.each(function(){var e,g=a(this),t=a(b),u=g.offsetParent(),v=h.inline?g.next(l.popup):t.children(l.popup).last(),w=0,x=this,y=g.data("module-"+h.namespace);e={initialize:function(){e.debug("Initializing module",g),"hover"==h.on?g.on("mouseenter."+p,e.event.mouseenter).on("mouseleave."+p,e.event.mouseleave):g.on(h.on+"."+p,e.event[h.on]),t.on("resize."+p,e.event.resize),e.instantiate()},instantiate:function(){e.verbose("Storing instance of module"),y=e,g.data("module-"+p,y)},refresh:function(){v=h.inline?g.next(l.popup):t.children(l.popup).last(),u=g.offsetParent()},destroy:function(){e.debug("Destroying existing popups"),g.off("."+p)},event:{mouseenter:function(b){var c=this;e.timer=setTimeout(function(){a.proxy(e.toggle,c)(),a(c).hasClass(m.visible)&&b.stopPropagation()},h.delay)},mouseleave:function(){clearTimeout(e.timer),g.is(":visible")&&e.hide()},click:function(b){a.proxy(e.toggle,this)(),a(this).hasClass(m.visible)&&b.stopPropagation()},resize:function(){v.is(":visible")&&e.position()}},create:function(){e.debug("Creating pop-up html");var b=g.data(o.html)||h.html,c=g.data(o.variation)||h.variation,d=g.data(o.title)||h.title,f=g.data(o.content)||g.attr("title")||h.content;b||f||d?(b||(b=h.template({title:d,content:f})),v=a("
").addClass(m.popup).addClass(c).html(b),h.inline?v.insertAfter(g):v.appendTo(a("body")),a.proxy(h.onInit,v)()):e.error(n.content)},remove:function(){v.remove()},get:{offstagePosition:function(){var c={top:a(b).scrollTop(),bottom:a(b).scrollTop()+a(b).height(),left:0,right:a(b).width()},d={width:v.width(),height:v.outerHeight(),position:v.offset()},e={},f=[];return d.position&&(e={top:d.position.topc.bottom,right:d.position.left+d.width>c.right,left:d.position.left0?f.join(" "):!1},nextPosition:function(a){switch(a){case"top left":a="bottom left";break;case"bottom left":a="top right";break;case"top right":a="bottom right";break;case"bottom right":a="top center";break;case"top center":a="bottom center";break;case"bottom center":a="right center";break;case"right center":a="left center";break;case"left center":a="top center"}return a}},toggle:function(){g=a(this),e.debug("Toggling pop-up"),e.refresh(),g.hasClass(m.visible)?e.hide():(e.hideAll(),e.show())},position:function(c,d){var f,i,j=(a(b).width(),a(b).height(),g.outerWidth()),k=g.outerHeight(),l=v.width(),p=v.outerHeight(),q=h.inline?g.position():g.offset(),r=h.inline?u.outerWidth():t.outerWidth(),s=h.inline?u.outerHeight():t.outerHeight();switch(c=c||g.data(o.position)||h.position,d=d||g.data(o.arrowOffset)||h.arrowOffset,e.debug("Calculating offset for position",c),c){case"top left":f={top:"auto",bottom:s-q.top+h.distanceAway,left:q.left+d};break;case"top center":f={bottom:s-q.top+h.distanceAway,left:q.left+j/2-l/2+d,top:"auto",right:"auto"};break;case"top right":f={bottom:s-q.top+h.distanceAway,right:r-q.left-j-d,top:"auto",left:"auto"};break;case"left center":f={top:q.top+k/2-p/2,right:r-q.left+h.distanceAway-d,left:"auto",bottom:"auto"};break;case"right center":f={top:q.top+k/2-p/2,left:q.left+j+h.distanceAway+d,bottom:"auto",right:"auto"};break;case"bottom left":f={top:q.top+k+h.distanceAway,left:q.left+d,bottom:"auto",right:"auto"};break;case"bottom center":f={top:q.top+k+h.distanceAway,left:q.left+j/2-l/2+d,bottom:"auto",right:"auto"};break;case"bottom right":f={top:q.top+k+h.distanceAway,right:r-q.left-j-d,left:"auto",bottom:"auto"}}return a.extend(f,{width:v.width()+1}),v.removeAttr("style").removeClass("top right bottom left center").css(f).addClass(c).addClass(m.loading),i=e.get.offstagePosition(),i?(e.debug("Element is outside boundaries ",i),w0&&(console.groupCollapsed(b),console.table?console.table(k):a.each(k,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),k=[]}},invoke:function(b,c,f){var g,h;return c=c||s,f=x||f,"string"==typeof b&&y!==d&&(b=b.split("."),g=b.length-1,a.each(b,function(b,c){a.isPlainObject(y[c])&&b!=g?y=y[c]:y[c]!==d?h=y[c]:e.error(n.method)})),a.isFunction(h)?(y.verbose("Executing invoked function",h),h.apply(f,c)):h||!1}},r?(y===d&&e.initialize(),f=e.invoke(q)):(y===d&&e.destroy(),e.initialize())}),f?f:this},a.fn.popup.settings={moduleName:"Popup",debug:!0,verbose:!0,performance:!0,namespace:"popup",onInit:function(){},onShow:function(){},onHide:function(){},variation:"",content:!1,html:!1,title:!1,on:"hover",clicktoClose:!0,position:"top center",delay:150,inline:!0,duration:250,easing:"easeOutQuint",animation:"pop",distanceAway:0,arrowOffset:0,maxSearchDepth:10,error:{content:"Your popup has no content specified",method:"The method you called is not defined.",recursion:"Popup attempted to reposition element to fit, but could not find an adequate position."},metadata:{arrowOffset:"arrowOffset",content:"content",html:"html",position:"position",title:"title",variation:"variation"},className:{popup:"ui popup",visible:"visible",loading:"loading"},selector:{popup:".ui.popup"},template:function(a){var b="";return typeof a!==d&&(typeof a.title!==d&&a.title&&(b+='
'+a.title+'
'),typeof a.content!==d&&a.content&&(b+='
'+a.content+"
")),b}}}(jQuery,window,document); \ No newline at end of file diff --git a/build/minified/modules/reveal.min.css b/build/minified/modules/reveal.min.css index 6b1e7ac45..e31a02e73 100644 --- a/build/minified/modules/reveal.min.css +++ b/build/minified/modules/reveal.min.css @@ -1 +1 @@ -.ui.reveal{position:relative!important;z-index:2!important}.ui.reveal>:first-child{-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>:first-child{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:4!important;-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>:last-child{position:relative!important;z-index:3!important}.ui.reveal.button{overflow:hidden}.ui.slide.reveal{position:relative!important;display:block!important;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0 1em;-webkit-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.slide.reveal>:first-child{position:relative!important}.ui.slide.reveal>:last-child{display:inline-block;position:absolute!important;top:0!important;left:100%!important;width:100%!important}.ui.slide.reveal:hover>:first-child{left:-100%!important}.ui.slide.reveal:hover>:last-child{left:0!important}.ui.right.slide.reveal>:first-child{left:0}.ui.right.slide.reveal>:last-child{left:auto!important;right:100%!important}.ui.right.slide.reveal:hover>:first-child{left:100%!important;right:auto!important}.ui.right.slide.reveal:hover>:last-child{left:auto!important;right:0!important}.ui.up.slide.reveal>:first-child{top:0!important;left:0!important;right:auto!important;bottom:auto!important}.ui.up.slide.reveal>:last-child{top:100%!important;left:0!important;right:auto!important;bottom:auto!important}.ui.slide.up.reveal:hover>:first-child{top:-100%!important;left:0!important}.ui.slide.up.reveal:hover>:last-child{top:0!important;left:0!important}.ui.down.slide.reveal>:first-child{top:auto!important;right:auto!important;bottom:auto!important;bottom:0!important}.ui.down.slide.reveal>:last-child{top:auto!important;right:auto!important;bottom:100%!important;left:0!important}.ui.slide.down.reveal:hover>:first-child{left:0!important;bottom:-100%!important}.ui.slide.down.reveal:hover>:last-child{left:0!important;bottom:0!important}.ui.fade.reveal>:first-child{opacity:1}.ui.fade.reveal:hover>:first-child{opacity:0}.ui.move.reveal>:first-child,.ui.move.left.reveal>:first-child{left:auto!important;top:auto!important;bottom:auto!important;right:0!important}.ui.move.reveal:hover>:first-child,.ui.move.left.reveal:hover>:first-child{right:100%!important}.ui.move.right.reveal>:first-child{right:auto!important;top:auto!important;bottom:auto!important;left:0!important}.ui.move.right.reveal:hover>:first-child{left:100%!important}.ui.move.up.reveal>:first-child{right:auto!important;left:auto!important;top:auto!important;bottom:0!important}.ui.move.up.reveal:hover>:first-child{bottom:100%!important}.ui.move.down.reveal>:first-child{right:auto!important;left:auto!important;top:0!important;bottom:auto!important}.ui.move.down.reveal:hover>:first-child{top:100%!important}.ui.rotate.reveal>:first-child{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}.ui.rotate.reveal>:first-child,.ui.rotate.right.reveal>:first-child{-webkit-transform-origin:bottom right;-moz-transform-origin:bottom right;-o-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>:first-child,.ui.rotate.right.reveal:hover>:first-child{-webkit-transform:rotate(110deg);-moz-transform:rotate(110deg);-o-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>:first-child{-webkit-transform-origin:bottom left;-moz-transform-origin:bottom left;-o-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>:first-child{-webkit-transform:rotate(-110deg);-moz-transform:rotate(-110deg);-o-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>*{-webkit-transition-delay:0s!important;-moz-transition-delay:0s!important;-o-transition-delay:0s!important;-ms-transition-delay:0s!important;transition-delay:0s!important} \ No newline at end of file +.ui.reveal{position:relative!important;z-index:2!important}.ui.reveal>.visible.content{-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>.visible.content{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:4!important;-webkit-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:all .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.reveal>.hidden.content{position:relative!important;z-index:3!important}.ui.reveal.button{overflow:hidden}.ui.slide.reveal{position:relative!important;display:block!important;overflow:hidden!important;white-space:nowrap}.ui.slide.reveal>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0 1em;-webkit-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;-moz-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;-ms-transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s;transition:top .8s cubic-bezier(0.175,.885,.32,1) .15s,left .8s cubic-bezier(0.175,.885,.32,1) .15s,right .8s cubic-bezier(0.175,.885,.32,1) .15s,bottom .8s cubic-bezier(0.175,.885,.32,1) .15s}.ui.slide.reveal>.visible.content{position:relative!important}.ui.slide.reveal>.hidden.content{display:inline-block;position:absolute!important;top:0!important;left:100%!important;width:100%!important}.ui.slide.reveal:hover>.visible.content{left:-100%!important}.ui.slide.reveal:hover>.hidden.content{left:0!important}.ui.right.slide.reveal>.visible.content{left:0}.ui.right.slide.reveal>.hidden.content{left:auto!important;right:100%!important}.ui.right.slide.reveal:hover>.visible.content{left:100%!important;right:auto!important}.ui.right.slide.reveal:hover>.hidden.content{left:auto!important;right:0!important}.ui.up.slide.reveal>.visible.content{top:0!important;left:0!important;right:auto!important;bottom:auto!important}.ui.up.slide.reveal>.hidden.content{top:100%!important;left:0!important;right:auto!important;bottom:auto!important}.ui.slide.up.reveal:hover>.visible.content{top:-100%!important;left:0!important}.ui.slide.up.reveal:hover>.hidden.content{top:0!important;left:0!important}.ui.down.slide.reveal>.visible.content{top:auto!important;right:auto!important;bottom:auto!important;bottom:0!important}.ui.down.slide.reveal>.hidden.content{top:auto!important;right:auto!important;bottom:100%!important;left:0!important}.ui.slide.down.reveal:hover>.visible.content{left:0!important;bottom:-100%!important}.ui.slide.down.reveal:hover>.hidden.content{left:0!important;bottom:0!important}.ui.fade.reveal>.visible.content{opacity:1}.ui.fade.reveal:hover>.visible.content{opacity:0}.ui.move.reveal>.visible.content,.ui.move.left.reveal>.visible.content{left:auto!important;top:auto!important;bottom:auto!important;right:0!important}.ui.move.reveal:hover>.visible.content,.ui.move.left.reveal:hover>.visible.content{right:100%!important}.ui.move.right.reveal>.visible.content{right:auto!important;top:auto!important;bottom:auto!important;left:0!important}.ui.move.right.reveal:hover>.visible.content{left:100%!important}.ui.move.up.reveal>.visible.content{right:auto!important;left:auto!important;top:auto!important;bottom:0!important}.ui.move.up.reveal:hover>.visible.content{bottom:100%!important}.ui.move.down.reveal>.visible.content{right:auto!important;left:auto!important;top:0!important;bottom:auto!important}.ui.move.down.reveal:hover>.visible.content{top:100%!important}.ui.rotate.reveal>.visible.content{-webkit-transition-duration:.8s;-moz-transition-duration:.8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-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;-moz-transform-origin:bottom right;-o-transform-origin:bottom right;-ms-transform-origin:bottom right;transform-origin:bottom right}.ui.rotate.reveal:hover>.visible.content,.ui.rotate.right.reveal:hover>.visible.content{-webkit-transform:rotate(110deg);-moz-transform:rotate(110deg);-o-transform:rotate(110deg);-ms-transform:rotate(110deg);transform:rotate(110deg)}.ui.rotate.left.reveal>.visible.content{-webkit-transform-origin:bottom left;-moz-transform-origin:bottom left;-o-transform-origin:bottom left;-ms-transform-origin:bottom left;transform-origin:bottom left}.ui.rotate.left.reveal:hover>.visible.content{-webkit-transform:rotate(-110deg);-moz-transform:rotate(-110deg);-o-transform:rotate(-110deg);-ms-transform:rotate(-110deg);transform:rotate(-110deg)}.ui.masked.reveal{overflow:hidden}.ui.instant.reveal>*{-webkit-transition-delay:0s!important;-moz-transition-delay:0s!important;-o-transition-delay:0s!important;-ms-transition-delay:0s!important;transition-delay:0s!important} \ No newline at end of file diff --git a/build/minified/modules/shape.js b/build/minified/modules/shape.js index 9052cc2f1..2bceb8b67 100644 --- a/build/minified/modules/shape.js +++ b/build/minified/modules/shape.js @@ -301,11 +301,22 @@ $.fn.shape = function(parameters) { module.debug('Flipping over', $nextSide); if( !module.is.animating() ) { module.stage.behind(); - module.animate(module.getTransform.behind() ); + module.animate(module.getTransform.over() ); } else { module.queue('flip.over'); } + }, + + back: function() { + module.debug('Flipping back', $nextSide); + if( !module.is.animating() ) { + module.stage.behind(); + module.animate(module.getTransform.back() ); + } + else { + module.queue('flip.back'); + } } }, @@ -360,7 +371,7 @@ $.fn.shape = function(parameters) { }; }, - behind: function() { + over: function() { var translate = { x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) @@ -369,6 +380,17 @@ $.fn.shape = function(parameters) { return { transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' }; + }, + + back: function() { + var + translate = { + x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' + }; } }, diff --git a/build/minified/modules/shape.min.js b/build/minified/modules/shape.min.js index 2fb51a2f2..102859114 100644 --- a/build/minified/modules/shape.min.js +++ b/build/minified/modules/shape.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.shape=function(b){var e,f=a(this),g=a.extend(!0,{},a.fn.shape.settings,b),h="."+g.namespace,i="module-"+g.namespace,j=f.selector||"",k=(new Date).getTime(),l=[],m=arguments[0],n="string"==typeof m,o=[].slice.call(arguments,1);return f.each(function(){var b,f,p,q=a(this),r=q.find(g.selector.sides),s=q.find(g.selector.side),t=this,u=q.data(i),v=(g.namespace,g.error),w=g.className;p={initialize:function(){p.verbose("Initializing module for",t),p.set.defaultSide(),u=p,q.data(i,u)},destroy:function(){p.verbose("Destroying previous module for",t),q.removeData(i).off(h)},refresh:function(){p.verbose("Refreshing selector cache for",t),q=a(t),r=a(this).find(g.selector.shape),s=a(this).find(g.selector.side)},repaint:function(){p.verbose("Forcing repaint event");var a=r.get(0)||c.createElement("div");a.offsetWidth},animate:function(c,d){p.verbose("Animating box with properties",c),d=d||function(b){p.verbose("Executing animation callback",b),b.stopPropagation(),p.reset(),p.set.active(),a.proxy(g.onChange,f)()},g.useCSS?(p.verbose("Starting CSS animation"),q.addClass(w.animating),p.set.stageSize(),p.repaint(),q.addClass(w.css),b.addClass(w.hidden),r.css(c).one(p.get.transitionEvent(),d)):(p.verbose("Starting javascript animation"),q.addClass(w.animating).removeClass(w.css),p.set.stageSize(),p.repaint(),b.animate({opacity:0},g.duration,g.easing),r.animate(c,g.duration,g.easing,d))},queue:function(a){p.debug("Queueing animation of",a),r.one(p.get.transitionEvent(),function(){p.debug("Executing queued animation"),setTimeout(function(){q.shape(a)},0)})},reset:function(){p.verbose("Animating states reset"),q.removeClass(w.css).removeClass(w.animating).removeAttr("style"),r.removeAttr("style"),s.removeAttr("style").removeClass(w.hidden),f.removeClass(w.animating).removeAttr("style")},is:{animating:function(){return q.hasClass(w.animating)}},get:{transitionEvent:function(){var a,b=c.createElement("element"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in e)if(b.style[a]!==d)return e[a]},nextSide:function(){return b.next(g.selector.side).size()>0?b.next(g.selector.side):q.find(g.selector.side).first()}},set:{defaultSide:function(){b=q.find("."+g.className.active),f=b.next(g.selector.side).size()>0?b.next(g.selector.side):q.find(g.selector.side).first(),p.verbose("Active side set to",b),p.verbose("Next side set to",f)},stageSize:function(){var a={width:f.outerWidth(),height:f.outerHeight()};p.verbose("Resizing stage to fit new content",a),q.css({width:a.width,height:a.height})},nextSide:function(a){f=q.find(a),0===f.size()&&p.error(v.side),p.verbose("Next side manually set to",f)},active:function(){p.verbose("Setting new side to active",f),s.removeClass(w.active),f.addClass(w.active),p.set.defaultSide()}},flip:{up:function(){p.debug("Flipping up",f),p.is.animating()?p.queue("flip.up"):(p.stage.above(),p.animate(p.getTransform.up()))},down:function(){p.debug("Flipping down",f),p.is.animating()?p.queue("flip.down"):(p.stage.below(),p.animate(p.getTransform.down()))},left:function(){p.debug("Flipping left",f),p.is.animating()?p.queue("flip.left"):(p.stage.left(),p.animate(p.getTransform.left()))},right:function(){p.debug("Flipping right",f),p.is.animating()?p.queue("flip.right"):(p.stage.right(),p.animate(p.getTransform.right()))},over:function(){p.debug("Flipping over",f),p.is.animating()?p.queue("flip.over"):(p.stage.behind(),p.animate(p.getTransform.behind()))}},getTransform:{up:function(){var a={y:-((b.outerHeight()-f.outerHeight())/2),z:-(b.outerHeight()/2)};return{transform:"translateY("+a.y+"px) translateZ("+a.z+"px) rotateX(-90deg)"}},down:function(){var a={y:-((b.outerHeight()-f.outerHeight())/2),z:-(b.outerHeight()/2)};return{transform:"translateY("+a.y+"px) translateZ("+a.z+"px) rotateX(90deg)"}},left:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2),z:-(b.outerWidth()/2)};return{transform:"translateX("+a.x+"px) translateZ("+a.z+"px) rotateY(90deg)"}},right:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2),z:-(b.outerWidth()/2)};return{transform:"translateX("+a.x+"px) translateZ("+a.z+"px) rotateY(-90deg)"}},behind:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2)};return{transform:"translateX("+a.x+"px) rotateY(180deg)"}}},stage:{above:function(){var a={origin:(b.outerHeight()-f.outerHeight())/2,depth:{active:f.outerHeight()/2,next:b.outerHeight()/2}};p.verbose("Setting the initial animation position as above",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",top:a.origin+"px",transform:"rotateX(90deg) translateZ("+a.depth.next+"px)"})},below:function(){var a={origin:(b.outerHeight()-f.outerHeight())/2,depth:{active:f.outerHeight()/2,next:b.outerHeight()/2}};p.verbose("Setting the initial animation position as below",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",top:a.origin+"px",transform:"rotateX(-90deg) translateZ("+a.depth.next+"px)"})},left:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as left",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(-90deg) translateZ("+a.depth.next+"px)"})},right:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as left",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(90deg) translateZ("+a.depth.next+"px)"})},behind:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as behind",f,a),b.css({transform:"rotateY(0deg)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(-180deg)"})}},setting:function(b,c){return c===d?g[b]:(a.isPlainObject(b)?(p.verbose("Modifying settings object",b,c),a.extend(!0,g,b)):(p.verbose("Modifying setting",b,c),g[b]=c),void 0)},setting:function(b,c){return c===d?g[b]:(a.isPlainObject(b)?a.extend(!0,g,b):g[b]=c,void 0)},internal:function(b,c){return c===d?p[b]:(a.isPlainObject(b)?a.extend(!0,p,b):p[b]=c,void 0)},debug:function(){g.debug&&(g.performance?p.performance.log(arguments):p.debug=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},verbose:function(){g.verbose&&g.debug&&(g.performance?p.performance.log(arguments):p.verbose=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},error:function(){p.error=Function.prototype.bind.call(console.error,console,g.moduleName+":")},performance:{log:function(a){var b,c,d;g.performance&&(b=(new Date).getTime(),d=k||b,c=b-d,k=b,l.push({Element:t,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":c})),clearTimeout(p.performance.timer),p.performance.timer=setTimeout(p.performance.display,100)},display:function(){var b=g.moduleName+":",c=0;k=!1,a.each(l,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",j&&(b+=" '"+j+"'"),(console.group!==d||console.table!==d)&&l.length>0&&(console.groupCollapsed(b),console.table?console.table(l):a.each(l,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(b,c,e){var f,g,h=u;return c=c||o,e=t||e,"string"==typeof b&&h!==d&&(b=b.split("."),f=b.length-1,a.each(b,function(b,c){return a.isPlainObject(h[c])&&b!=f?(h=h[c],!0):h[c]!==d?(g=h[c],!0):(p.error(v.method),!1)})),a.isFunction(g)?(u.verbose("Executing invoked function",g),g.apply(e,c)):g||!1}},n?(u===d&&p.initialize(),e=p.invoke(m)):(u!==d&&p.destroy(),p.initialize())}),e?e:this},a.fn.shape.settings={moduleName:"Shape Module",debug:!1,verbose:!1,performance:!1,namespace:"shape",beforeChange:function(){},onChange:function(){},useCSS:!0,duration:1e3,easing:"easeInOutQuad",error:{side:"You tried to switch to a side that does not exist.",method:"The method you called is not defined"},className:{css:"css",animating:"animating",hidden:"hidden",active:"active"},selector:{sides:".sides",side:".side"}}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.shape=function(b){var e,f=a(this),g=a.extend(!0,{},a.fn.shape.settings,b),h="."+g.namespace,i="module-"+g.namespace,j=f.selector||"",k=(new Date).getTime(),l=[],m=arguments[0],n="string"==typeof m,o=[].slice.call(arguments,1);return f.each(function(){var b,f,p,q=a(this),r=q.find(g.selector.sides),s=q.find(g.selector.side),t=this,u=q.data(i),v=(g.namespace,g.error),w=g.className;p={initialize:function(){p.verbose("Initializing module for",t),p.set.defaultSide(),u=p,q.data(i,u)},destroy:function(){p.verbose("Destroying previous module for",t),q.removeData(i).off(h)},refresh:function(){p.verbose("Refreshing selector cache for",t),q=a(t),r=a(this).find(g.selector.shape),s=a(this).find(g.selector.side)},repaint:function(){p.verbose("Forcing repaint event");var a=r.get(0)||c.createElement("div");a.offsetWidth},animate:function(c,d){p.verbose("Animating box with properties",c),d=d||function(b){p.verbose("Executing animation callback",b),b.stopPropagation(),p.reset(),p.set.active(),a.proxy(g.onChange,f)()},g.useCSS?(p.verbose("Starting CSS animation"),q.addClass(w.animating),p.set.stageSize(),p.repaint(),q.addClass(w.css),b.addClass(w.hidden),r.css(c).one(p.get.transitionEvent(),d)):(p.verbose("Starting javascript animation"),q.addClass(w.animating).removeClass(w.css),p.set.stageSize(),p.repaint(),b.animate({opacity:0},g.duration,g.easing),r.animate(c,g.duration,g.easing,d))},queue:function(a){p.debug("Queueing animation of",a),r.one(p.get.transitionEvent(),function(){p.debug("Executing queued animation"),setTimeout(function(){q.shape(a)},0)})},reset:function(){p.verbose("Animating states reset"),q.removeClass(w.css).removeClass(w.animating).removeAttr("style"),r.removeAttr("style"),s.removeAttr("style").removeClass(w.hidden),f.removeClass(w.animating).removeAttr("style")},is:{animating:function(){return q.hasClass(w.animating)}},get:{transitionEvent:function(){var a,b=c.createElement("element"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in e)if(b.style[a]!==d)return e[a]},nextSide:function(){return b.next(g.selector.side).size()>0?b.next(g.selector.side):q.find(g.selector.side).first()}},set:{defaultSide:function(){b=q.find("."+g.className.active),f=b.next(g.selector.side).size()>0?b.next(g.selector.side):q.find(g.selector.side).first(),p.verbose("Active side set to",b),p.verbose("Next side set to",f)},stageSize:function(){var a={width:f.outerWidth(),height:f.outerHeight()};p.verbose("Resizing stage to fit new content",a),q.css({width:a.width,height:a.height})},nextSide:function(a){f=q.find(a),0===f.size()&&p.error(v.side),p.verbose("Next side manually set to",f)},active:function(){p.verbose("Setting new side to active",f),s.removeClass(w.active),f.addClass(w.active),p.set.defaultSide()}},flip:{up:function(){p.debug("Flipping up",f),p.is.animating()?p.queue("flip.up"):(p.stage.above(),p.animate(p.getTransform.up()))},down:function(){p.debug("Flipping down",f),p.is.animating()?p.queue("flip.down"):(p.stage.below(),p.animate(p.getTransform.down()))},left:function(){p.debug("Flipping left",f),p.is.animating()?p.queue("flip.left"):(p.stage.left(),p.animate(p.getTransform.left()))},right:function(){p.debug("Flipping right",f),p.is.animating()?p.queue("flip.right"):(p.stage.right(),p.animate(p.getTransform.right()))},over:function(){p.debug("Flipping over",f),p.is.animating()?p.queue("flip.over"):(p.stage.behind(),p.animate(p.getTransform.over()))},back:function(){p.debug("Flipping back",f),p.is.animating()?p.queue("flip.back"):(p.stage.behind(),p.animate(p.getTransform.back()))}},getTransform:{up:function(){var a={y:-((b.outerHeight()-f.outerHeight())/2),z:-(b.outerHeight()/2)};return{transform:"translateY("+a.y+"px) translateZ("+a.z+"px) rotateX(-90deg)"}},down:function(){var a={y:-((b.outerHeight()-f.outerHeight())/2),z:-(b.outerHeight()/2)};return{transform:"translateY("+a.y+"px) translateZ("+a.z+"px) rotateX(90deg)"}},left:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2),z:-(b.outerWidth()/2)};return{transform:"translateX("+a.x+"px) translateZ("+a.z+"px) rotateY(90deg)"}},right:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2),z:-(b.outerWidth()/2)};return{transform:"translateX("+a.x+"px) translateZ("+a.z+"px) rotateY(-90deg)"}},over:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2)};return{transform:"translateX("+a.x+"px) rotateY(180deg)"}},back:function(){var a={x:-((b.outerWidth()-f.outerWidth())/2)};return{transform:"translateX("+a.x+"px) rotateY(-180deg)"}}},stage:{above:function(){var a={origin:(b.outerHeight()-f.outerHeight())/2,depth:{active:f.outerHeight()/2,next:b.outerHeight()/2}};p.verbose("Setting the initial animation position as above",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",top:a.origin+"px",transform:"rotateX(90deg) translateZ("+a.depth.next+"px)"})},below:function(){var a={origin:(b.outerHeight()-f.outerHeight())/2,depth:{active:f.outerHeight()/2,next:b.outerHeight()/2}};p.verbose("Setting the initial animation position as below",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",top:a.origin+"px",transform:"rotateX(-90deg) translateZ("+a.depth.next+"px)"})},left:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as left",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(-90deg) translateZ("+a.depth.next+"px)"})},right:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as left",f,a),b.css({transform:"rotateY(0deg) translateZ("+a.depth.active+"px)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(90deg) translateZ("+a.depth.next+"px)"})},behind:function(){var a={origin:(b.outerWidth()-f.outerWidth())/2,depth:{active:f.outerWidth()/2,next:b.outerWidth()/2}};p.verbose("Setting the initial animation position as behind",f,a),b.css({transform:"rotateY(0deg)"}),f.addClass(w.animating).css({display:"block",left:a.origin+"px",transform:"rotateY(-180deg)"})}},setting:function(b,c){return c===d?g[b]:(a.isPlainObject(b)?(p.verbose("Modifying settings object",b,c),a.extend(!0,g,b)):(p.verbose("Modifying setting",b,c),g[b]=c),void 0)},setting:function(b,c){return c===d?g[b]:(a.isPlainObject(b)?a.extend(!0,g,b):g[b]=c,void 0)},internal:function(b,c){return c===d?p[b]:(a.isPlainObject(b)?a.extend(!0,p,b):p[b]=c,void 0)},debug:function(){g.debug&&(g.performance?p.performance.log(arguments):p.debug=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},verbose:function(){g.verbose&&g.debug&&(g.performance?p.performance.log(arguments):p.verbose=Function.prototype.bind.call(console.info,console,g.moduleName+":"))},error:function(){p.error=Function.prototype.bind.call(console.error,console,g.moduleName+":")},performance:{log:function(a){var b,c,d;g.performance&&(b=(new Date).getTime(),d=k||b,c=b-d,k=b,l.push({Element:t,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":c})),clearTimeout(p.performance.timer),p.performance.timer=setTimeout(p.performance.display,100)},display:function(){var b=g.moduleName+":",c=0;k=!1,a.each(l,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",j&&(b+=" '"+j+"'"),(console.group!==d||console.table!==d)&&l.length>0&&(console.groupCollapsed(b),console.table?console.table(l):a.each(l,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),l=[]}},invoke:function(b,c,e){var f,g,h=u;return c=c||o,e=t||e,"string"==typeof b&&h!==d&&(b=b.split("."),f=b.length-1,a.each(b,function(b,c){return a.isPlainObject(h[c])&&b!=f?(h=h[c],!0):h[c]!==d?(g=h[c],!0):(p.error(v.method),!1)})),a.isFunction(g)?(u.verbose("Executing invoked function",g),g.apply(e,c)):g||!1}},n?(u===d&&p.initialize(),e=p.invoke(m)):(u!==d&&p.destroy(),p.initialize())}),e?e:this},a.fn.shape.settings={moduleName:"Shape Module",debug:!1,verbose:!1,performance:!1,namespace:"shape",beforeChange:function(){},onChange:function(){},useCSS:!0,duration:1e3,easing:"easeInOutQuad",error:{side:"You tried to switch to a side that does not exist.",method:"The method you called is not defined"},className:{css:"css",animating:"animating",hidden:"hidden",active:"active"},selector:{sides:".sides",side:".side"}}}(jQuery,window,document); \ No newline at end of file diff --git a/build/minified/modules/tab.js b/build/minified/modules/tab.js index 00cf72eea..829f460c6 100644 --- a/build/minified/modules/tab.js +++ b/build/minified/modules/tab.js @@ -30,7 +30,7 @@ moduleSelector = $module.selector || '', eventNamespace = '.' + settings.namespace, - moduleNamespace = settings.namespace + '-module', + moduleNamespace = settings.namespace + '-module', className = settings.className, metadata = settings.metadata, @@ -62,8 +62,7 @@ return false; } else { - if(!settings.apiSettings) { - module.debug('No API url found, using current url'); + if(settings.auto) { settings.apiSettings = { url: settings.path + '/{$tab}' }; @@ -71,7 +70,8 @@ module.verbose('Address library found adding state change event'); $.address .state(settings.path) - .change(module.event.history.change) + .unbind('change') + .bind('change', module.event.history.change) ; } } @@ -160,7 +160,14 @@ change: function(tabPath) { var - pathArray = module.get.defaultPathArray(tabPath) + pushStateAvailable = (window.history && window.history.pushState), + shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), + remoteContent = $.isPlainObject(settings.apiSettings), + // only get default path if not remote content + pathArray = (remoteContent && !shouldIgnoreLoad) + ? module.utils.pathToArray(tabPath) + : module.get.defaultPathArray(tabPath), + tabPath = module.utils.arrayToPath(pathArray) ; module.deactivate.all(); $.each(pathArray, function(index, tab) { @@ -170,10 +177,6 @@ isTab = module.is.tab(currentPath), isLastIndex = (index + 1 == pathArray.length), - - pushStateAvailable = (window.history && window.history.pushState), - shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), - remoteContent = $.isPlainObject(settings.apiSettings), $tab = module.get.tabElement(currentPath), nextPathArray, @@ -195,7 +198,9 @@ nextPathArray = pathArray.slice(0, index + 2); nextPath = module.utils.arrayToPath(nextPathArray); isLastTab = ( !module.is.tab(nextPath) ); - module.verbose('Tab parameters found', nextPathArray); + if(isLastTab) { + module.verbose('Tab parameters found', nextPathArray); + } } if(isLastTab && remoteContent) { if(!shouldIgnoreLoad) { @@ -208,14 +213,15 @@ module.cache.add(tabPath, $tab.html()); module.activate.all(currentPath); $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } + return false; } else { module.debug('Opened local tab', currentPath); module.activate.all(currentPath); $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } - return false; } else { module.error(errors.missingTab, tab); @@ -245,6 +251,7 @@ module.debug('Content loaded in background', tabPath); } $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); }, urlData: { tab: fullTabPath } }, @@ -255,7 +262,7 @@ module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); module.activate.tab(tabPath); - $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); } else if(existingRequest) { module.debug('Content is already loading', fullTabPath); @@ -297,10 +304,10 @@ }, navigation: function(tabPath) { var - $nav = module.get.navElement(tabPath) + $navigation = module.get.navElement(tabPath) ; - module.verbose('Activating tab navigation for', $nav); - $nav.addClass(className.active); + module.verbose('Activating tab navigation for', $navigation, tabPath); + $navigation.addClass(className.active); } }, @@ -354,6 +361,9 @@ } module.error(errors.recursion); } + else { + module.debug('No default tabs found for', tabPath); + } recursionDepth = 0; return tabPath; }, @@ -583,6 +593,9 @@ determineTitle: function(tabArray) {} }, + // uses pjax style endpoints fetching content from same url with remote-content headers + auto : false, + history : false, path : false, @@ -626,4 +639,4 @@ }; -})( jQuery, window , document ); \ No newline at end of file +})( jQuery, window , document ); diff --git a/build/minified/modules/tab.min.js b/build/minified/modules/tab.min.js index 5862aca42..003b266e2 100644 --- a/build/minified/modules/tab.min.js +++ b/build/minified/modules/tab.min.js @@ -1 +1 @@ -!function(a,b,c,d){a.fn.tabNavigation=function(c){var e,f,g,h,i,j=a.extend(!0,{},a.fn.tabNavigation.settings,c),k=a(this),l=a(j.context).find(j.selector.tabs),m={},n=!0,o=0,p=this,q=(new Date).getTime(),r=[],s=k.selector||"",t="."+j.namespace,u=j.namespace+"-module",v=j.className,w=j.metadata,x=j.namespace,y=j.errors,z=k.data(u),A=arguments[0],B=z!==d&&"string"==typeof A,C=[].slice.call(arguments,1);return h={initialize:function(){if(h.debug("Initializing Tabs",k),j.history){if(a.address===d)return h.error(y.state),!1;if(j.path===!1)return h.error(y.path),!1;j.apiSettings||(h.debug("No API url found, using current url"),j.apiSettings={url:j.path+"/{$tab}"}),h.verbose("Address library found adding state change event"),a.address.state(j.path).change(h.event.history.change)}a.isWindow(p)||k.on("click."+t,h.event.click),k.data(u,h)},destroy:function(){h.debug("Destroying tabs",k),k.off("."+x)},event:{click:function(){h.debug("Navigation clicked");var b=a(this).data(w.tab);b!==d?b!==e&&(j.history?a.address.value(b):h.change(b)):h.debug("No tab specified")},history:{change:function(b){var c=b.pathNames.join("/")||h.get.initialPath(),e=j.templates.determineTitle(c)||!1;h.debug("History change event",c,b),g=b,c!==d&&h.change(c),e&&a.address.title(e)}}},refresh:function(){e&&(h.debug("Refreshing tab",e),h.change(e))},cache:{read:function(a){return a!==d?m[a]:!1},add:function(a,b){a=a||e,h.debug("Adding cached content for",a),m[a]=b},remove:function(a){a=a||e,h.debug("Removing cached content for",a),delete m[a]}},change:function(c){var d=h.get.defaultPathArray(c);h.deactivate.all(),a.each(d,function(i,k){var l,m,o,p=d.slice(0,i+1),q=h.utils.arrayToPath(p),r=h.is.tab(q),s=i+1==d.length,t=b.history&&b.history.pushState,u=t&&j.ignoreFirstLoad&&n,v=a.isPlainObject(j.apiSettings),w=h.get.tabElement(q);return h.verbose("Looking for tab",k),r?(h.verbose("Tab was found",k),e=q,f=h.utils.filterArray(d,p),s?o=!0:(l=d.slice(0,i+2),m=h.utils.arrayToPath(l),o=!h.is.tab(m),h.verbose("Tab parameters found",l)),o&&v?u?(h.debug("Ignoring remote content on first tab load",q),n=!1,h.cache.add(c,w.html()),h.activate.all(q),a.proxy(j.onTabInit,w)(q,f,g)):(h.activate.navigation(q),h.content.fetch(q,c)):(h.debug("Opened local tab",q),h.activate.all(q),a.proxy(j.onTabLoad,w)(q,f,g)),!1):(h.error(y.missingTab,k),!1)})},content:{fetch:function(b,c){var i=h.get.tabElement(b),c=c||b,k=h.cache.read(c),l={dataType:"html",stateContext:i,success:function(d){h.cache.add(c,d),h.content.update(b,d),b==e?(h.debug("Content loaded",b),h.activate.tab(b)):h.debug("Content loaded in background",b),a.proxy(j.onTabInit,i)(b,f,g)},urlData:{tab:c}},m=i.data(w.promise)||!1,n=m&&"pending"===m.state();j.cache&&k?(h.debug("Showing existing content",c),h.content.update(b,k),h.activate.tab(b),a.proxy(j.onTabInit,i)(b,f,g)):n?(h.debug("Content is already loading",c),i.addClass(v.loading)):a.api!==d?(h.debug("Retrieving remote content",c),a.api(a.extend(!0,{headers:{"X-Remote":!0}},j.apiSettings,l))):h.error(y.api)},update:function(a,b){h.debug("Updating html for",a);var c=h.get.tabElement(a);c.html(b)}},activate:{all:function(a){h.activate.tab(a),h.activate.navigation(a)},tab:function(a){var b=h.get.tabElement(a);h.verbose("Showing tab content for",b),b.addClass(v.active)},navigation:function(a){var b=h.get.navElement(a);h.verbose("Activating tab navigation for",b),b.addClass(v.active)}},deactivate:{all:function(){h.deactivate.navigation(),h.deactivate.tabs()},navigation:function(){k.removeClass(v.active)},tabs:function(){l.removeClass(v.active+" "+v.loading)}},is:{tab:function(a){return a!==d?h.get.tabElement(a).size()>0:!1}},get:{initialPath:function(){return k.eq(0).data(w.tab)||l.eq(0).data(w.tab)},path:function(){return a.address.value()},defaultPathArray:function(a){return h.utils.pathToArray(h.get.defaultPath(a))},defaultPath:function(a){var b=k.filter("[data-"+w.tab+'^="'+a+'/"]').eq(0),c=b.data(w.tab)||!1;if(c){if(h.debug("Found default tab",c),o0?b:c},tab:function(){return e}},utils:{filterArray:function(b,c){return a.grep(b,function(b){return-1==a.inArray(b,c)})},last:function(b){return a.isArray(b)?b[b.length-1]:!1},pathToArray:function(a){return a===d&&(a=e),"string"==typeof a?a.split("/"):[a]},arrayToPath:function(b){return a.isArray(b)?b.join("/"):!1}},setting:function(b,c){return c===d?j[b]:(a.isPlainObject(b)?a.extend(!0,j,b):j[b]=c,void 0)},internal:function(b,c){return c===d?h[b]:(a.isPlainObject(b)?a.extend(!0,h,b):h[b]=c,void 0)},debug:function(){j.debug&&(j.performance?h.performance.log(arguments):h.debug=Function.prototype.bind.call(console.info,console,j.moduleName+":"))},verbose:function(){j.verbose&&j.debug&&(j.performance?h.performance.log(arguments):h.verbose=Function.prototype.bind.call(console.info,console,j.moduleName+":"))},error:function(){h.error=Function.prototype.bind.call(console.error,console,j.moduleName+":")},performance:{log:function(a){var b,c,d;j.performance&&(b=(new Date).getTime(),d=q||b,c=b-d,q=b,r.push({Element:p,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":c})),clearTimeout(h.performance.timer),h.performance.timer=setTimeout(h.performance.display,100)},display:function(){var b=j.moduleName+":",c=0;q=!1,a.each(r,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",s&&(b+=" '"+s+"'"),(console.group!==d||console.table!==d)&&r.length>0&&(console.groupCollapsed(b),console.table?console.table(r):a.each(r,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),r=[]}},invoke:function(b,c,e){var f,g;return c=c||C,e=p||e,"string"==typeof b&&z!==d&&(b=b.split("."),f=b.length-1,a.each(b,function(b,c){a.isPlainObject(z[c])&&b!=f?z=z[c]:z[c]!==d?g=z[c]:h.error(y.method)})),a.isFunction(g)?(h.verbose("Executing invoked function",g),g.apply(e,c)):g||!1}},B?(z===d&&h.initialize(),i=h.invoke(A)):(z!==d&&h.destroy(),h.initialize()),i!==d?i:this},a.tabNavigation=function(c){a(b).tabNavigation(c)},a.fn.tabNavigation.settings={moduleName:"Tab Module",verbose:!0,debug:!0,performance:!0,namespace:"tab",onTabInit:function(){},onTabLoad:function(){},templates:{determineTitle:function(){}},history:!1,path:!1,context:"body",maxDepth:25,ignoreFirstLoad:!0,alwaysRefresh:!1,cache:!0,apiSettings:!1,errors:{api:"You attempted to load content without API module",noContent:"The tab you specified is missing a content url.",method:"The method you called is not defined",state:"The state library has not been initialized",missingTab:"Tab cannot be found",path:"History enabled, but no path was specified",recursion:"Max recursive depth reached"},metadata:{tab:"tab",loaded:"loaded",promise:"promise"},className:{loading:"loading",active:"active"},selector:{tabs:".tab"}}}(jQuery,window,document); \ No newline at end of file +!function(a,b,c,d){a.fn.tabNavigation=function(c){var e,f,g,h,i,j=a.extend(!0,{},a.fn.tabNavigation.settings,c),k=a(this),l=a(j.context).find(j.selector.tabs),m={},n=!0,o=0,p=this,q=(new Date).getTime(),r=[],s=k.selector||"",t="."+j.namespace,u=j.namespace+"-module",v=j.className,w=j.metadata,x=j.namespace,y=j.errors,z=k.data(u),A=arguments[0],B=z!==d&&"string"==typeof A,C=[].slice.call(arguments,1);return h={initialize:function(){if(h.debug("Initializing Tabs",k),j.history){if(a.address===d)return h.error(y.state),!1;if(j.path===!1)return h.error(y.path),!1;j.auto&&(j.apiSettings={url:j.path+"/{$tab}"}),h.verbose("Address library found adding state change event"),a.address.state(j.path).unbind("change").bind("change",h.event.history.change)}a.isWindow(p)||k.on("click."+t,h.event.click),k.data(u,h)},destroy:function(){h.debug("Destroying tabs",k),k.off("."+x)},event:{click:function(){h.debug("Navigation clicked");var b=a(this).data(w.tab);b!==d?b!==e&&(j.history?a.address.value(b):h.change(b)):h.debug("No tab specified")},history:{change:function(b){var c=b.pathNames.join("/")||h.get.initialPath(),e=j.templates.determineTitle(c)||!1;h.debug("History change event",c,b),g=b,c!==d&&h.change(c),e&&a.address.title(e)}}},refresh:function(){e&&(h.debug("Refreshing tab",e),h.change(e))},cache:{read:function(a){return a!==d?m[a]:!1},add:function(a,b){a=a||e,h.debug("Adding cached content for",a),m[a]=b},remove:function(a){a=a||e,h.debug("Removing cached content for",a),delete m[a]}},change:function(c){var d=b.history&&b.history.pushState,i=d&&j.ignoreFirstLoad&&n,k=a.isPlainObject(j.apiSettings),l=k&&!i?h.utils.pathToArray(c):h.get.defaultPathArray(c),c=h.utils.arrayToPath(l);h.deactivate.all(),a.each(l,function(b,d){var m,o,p,q=l.slice(0,b+1),r=h.utils.arrayToPath(q),s=h.is.tab(r),t=b+1==l.length,u=h.get.tabElement(r);return h.verbose("Looking for tab",d),s?(h.verbose("Tab was found",d),e=r,f=h.utils.filterArray(l,q),t?p=!0:(m=l.slice(0,b+2),o=h.utils.arrayToPath(m),p=!h.is.tab(o),p&&h.verbose("Tab parameters found",m)),p&&k?(i?(h.debug("Ignoring remote content on first tab load",r),n=!1,h.cache.add(c,u.html()),h.activate.all(r),a.proxy(j.onTabInit,u)(r,f,g),a.proxy(j.onTabLoad,u)(r,f,g)):(h.activate.navigation(r),h.content.fetch(r,c)),!1):(h.debug("Opened local tab",r),h.activate.all(r),a.proxy(j.onTabLoad,u)(r,f,g),void 0)):(h.error(y.missingTab,d),!1)})},content:{fetch:function(b,c){var i=h.get.tabElement(b),c=c||b,k=h.cache.read(c),l={dataType:"html",stateContext:i,success:function(d){h.cache.add(c,d),h.content.update(b,d),b==e?(h.debug("Content loaded",b),h.activate.tab(b)):h.debug("Content loaded in background",b),a.proxy(j.onTabInit,i)(b,f,g),a.proxy(j.onTabLoad,i)(b,f,g)},urlData:{tab:c}},m=i.data(w.promise)||!1,n=m&&"pending"===m.state();j.cache&&k?(h.debug("Showing existing content",c),h.content.update(b,k),h.activate.tab(b),a.proxy(j.onTabLoad,i)(b,f,g)):n?(h.debug("Content is already loading",c),i.addClass(v.loading)):a.api!==d?(h.debug("Retrieving remote content",c),a.api(a.extend(!0,{headers:{"X-Remote":!0}},j.apiSettings,l))):h.error(y.api)},update:function(a,b){h.debug("Updating html for",a);var c=h.get.tabElement(a);c.html(b)}},activate:{all:function(a){h.activate.tab(a),h.activate.navigation(a)},tab:function(a){var b=h.get.tabElement(a);h.verbose("Showing tab content for",b),b.addClass(v.active)},navigation:function(a){var b=h.get.navElement(a);h.verbose("Activating tab navigation for",b,a),b.addClass(v.active)}},deactivate:{all:function(){h.deactivate.navigation(),h.deactivate.tabs()},navigation:function(){k.removeClass(v.active)},tabs:function(){l.removeClass(v.active+" "+v.loading)}},is:{tab:function(a){return a!==d?h.get.tabElement(a).size()>0:!1}},get:{initialPath:function(){return k.eq(0).data(w.tab)||l.eq(0).data(w.tab)},path:function(){return a.address.value()},defaultPathArray:function(a){return h.utils.pathToArray(h.get.defaultPath(a))},defaultPath:function(a){var b=k.filter("[data-"+w.tab+'^="'+a+'/"]').eq(0),c=b.data(w.tab)||!1;if(c){if(h.debug("Found default tab",c),o0?b:c},tab:function(){return e}},utils:{filterArray:function(b,c){return a.grep(b,function(b){return-1==a.inArray(b,c)})},last:function(b){return a.isArray(b)?b[b.length-1]:!1},pathToArray:function(a){return a===d&&(a=e),"string"==typeof a?a.split("/"):[a]},arrayToPath:function(b){return a.isArray(b)?b.join("/"):!1}},setting:function(b,c){return c===d?j[b]:(a.isPlainObject(b)?a.extend(!0,j,b):j[b]=c,void 0)},internal:function(b,c){return c===d?h[b]:(a.isPlainObject(b)?a.extend(!0,h,b):h[b]=c,void 0)},debug:function(){j.debug&&(j.performance?h.performance.log(arguments):h.debug=Function.prototype.bind.call(console.info,console,j.moduleName+":"))},verbose:function(){j.verbose&&j.debug&&(j.performance?h.performance.log(arguments):h.verbose=Function.prototype.bind.call(console.info,console,j.moduleName+":"))},error:function(){h.error=Function.prototype.bind.call(console.error,console,j.moduleName+":")},performance:{log:function(a){var b,c,d;j.performance&&(b=(new Date).getTime(),d=q||b,c=b-d,q=b,r.push({Element:p,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":c})),clearTimeout(h.performance.timer),h.performance.timer=setTimeout(h.performance.display,100)},display:function(){var b=j.moduleName+":",c=0;q=!1,a.each(r,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",s&&(b+=" '"+s+"'"),(console.group!==d||console.table!==d)&&r.length>0&&(console.groupCollapsed(b),console.table?console.table(r):a.each(r,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),r=[]}},invoke:function(b,c,e){var f,g;return c=c||C,e=p||e,"string"==typeof b&&z!==d&&(b=b.split("."),f=b.length-1,a.each(b,function(b,c){a.isPlainObject(z[c])&&b!=f?z=z[c]:z[c]!==d?g=z[c]:h.error(y.method)})),a.isFunction(g)?(h.verbose("Executing invoked function",g),g.apply(e,c)):g||!1}},B?(z===d&&h.initialize(),i=h.invoke(A)):(z!==d&&h.destroy(),h.initialize()),i!==d?i:this},a.tabNavigation=function(c){a(b).tabNavigation(c)},a.fn.tabNavigation.settings={moduleName:"Tab Module",verbose:!0,debug:!0,performance:!0,namespace:"tab",onTabInit:function(){},onTabLoad:function(){},templates:{determineTitle:function(){}},auto:!1,history:!1,path:!1,context:"body",maxDepth:25,ignoreFirstLoad:!0,alwaysRefresh:!1,cache:!0,apiSettings:!1,errors:{api:"You attempted to load content without API module",noContent:"The tab you specified is missing a content url.",method:"The method you called is not defined",state:"The state library has not been initialized",missingTab:"Tab cannot be found",path:"History enabled, but no path was specified",recursion:"Max recursive depth reached"},metadata:{tab:"tab",loaded:"loaded",promise:"promise"},className:{loading:"loading",active:"active"},selector:{tabs:".tab"}}}(jQuery,window,document); \ No newline at end of file diff --git a/build/minified/views/comment.min.css b/build/minified/views/comment.min.css index 1b4dab361..40b394bab 100644 --- a/build/minified/views/comment.min.css +++ b/build/minified/views/comment.min.css @@ -1 +1 @@ -.ui.comments a{cursor:pointer}.ui.comments .comment{position:relative;margin-top:.75em;padding-top:.75em}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .avatar{display:block;float:left;width:4em}.ui.comments .comment .avatar img{display:block;margin:0 auto;width:3em;height:3em;border-radius:500px}.ui.comments .comment>.content,.ui.comments .comment>.avatar{display:block}.ui.comments .comment .avatar~.content{padding:0 1em}.ui.comments .comment>.avatar~.content{padding-top:.25em;margin-left:3.5em}.ui.comments .comment .metadata{display:inline-block;margin-left:.3em;color:rgba(0,0,0,.4)}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .3em 0 0}.ui.comments .comment .text{margin:.25em 0 .5em}.ui.comments .comment .actions{font-size:.9em}.ui.comments .comment .actions a{display:inline-block;margin:0 .3em 0 0;color:rgba(0,0,0,.3)}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.6)}.ui.comments .reply.form{margin-top:.75em;width:100%;max-width:30em}.ui.comments .comment .reply.form{margin-left:2em}.ui.comments>.reply.form{margin-top:1.5em;max-width:40em}.ui.comments .reply.form textarea{height:12em}.ui.comments .comment .comments{margin-top:.25em;padding-top:.25em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments>.comment .comments{margin-left:2em}.ui.comments>.comment>.comments>.comment>.comments{margin-left:1.75em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments{margin-left:1.5em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments>.comment .comments{margin-left:.5em}.ui.threaded.comments .comment .comments{margin-left:2em!important;padding-left:2em!important;-webkit-box-shadow:-1px 0 0 rgba(0,0,0,.05);-moz-box-shadow:-1px 0 0 rgba(0,0,0,.05);box-shadow:-1px 0 0 rgba(0,0,0,.05)}.ui.minimal.comments .comment .actions{opacity:0;-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;transition:opacity .1s ease-out;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.small.comments{font-size:.875em} \ No newline at end of file +.ui.comments a{cursor:pointer}.ui.comments .comment{position:relative;margin-top:.5em;padding-top:.5em}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .avatar{display:block;float:left;width:4em}.ui.comments .comment .avatar img{display:block;margin:0 auto;width:3em;height:3em;border-radius:500px}.ui.comments .comment>.content,.ui.comments .comment>.avatar{display:block}.ui.comments .comment .avatar~.content{padding:0 1em}.ui.comments .comment>.avatar~.content{padding-top:.25em;margin-left:3.5em}.ui.comments .comment .metadata{display:inline-block;margin-left:.3em;color:rgba(0,0,0,.4)}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .3em 0 0}.ui.comments .comment .text{margin:.25em 0 .5em}.ui.comments .comment .actions{font-size:.9em}.ui.comments .comment .actions a{display:inline-block;margin:0 .3em 0 0;color:rgba(0,0,0,.3)}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.6)}.ui.comments .reply.form{margin-top:.75em;width:100%;max-width:30em}.ui.comments .comment .reply.form{margin-left:2em}.ui.comments>.reply.form{margin-top:1.5em;max-width:40em}.ui.comments .reply.form textarea{height:12em}.ui.comments .comment .comments{margin-top:.5em;padding-top:.5em;padding-bottom:1em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments>.comment .comments{margin-left:2em}.ui.comments>.comment>.comments>.comment>.comments{margin-left:1.75em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments{margin-left:1.5em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments>.comment .comments{margin-left:.5em}.ui.threaded.comments .comment .comments{margin-left:2em!important;padding-left:2em!important;-webkit-box-shadow:-1px 0 0 rgba(0,0,0,.05);-moz-box-shadow:-1px 0 0 rgba(0,0,0,.05);box-shadow:-1px 0 0 rgba(0,0,0,.05)}.ui.minimal.comments .comment .actions{opacity:0;-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;transition:opacity .1s ease-out;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.small.comments{font-size:.875em} \ No newline at end of file diff --git a/build/minified/views/sitemap.min.css b/build/minified/views/sitemap.min.css new file mode 100644 index 000000000..f21d6d0b2 --- /dev/null +++ b/build/minified/views/sitemap.min.css @@ -0,0 +1 @@ +.ui.sitemap{margin:0 -3rem;font-size:0rem;text-align:left}.ui.sitemap>.section{display:inline-block;vertical-align:top;margin:0 3rem;font-size:1rem}.ui.sitemap>.section>.header{font-size:1.125em;color:rgba(0,0,0,.8);padding-bottom:.5em}.ui.sitemap>.section>a{display:block;padding:.25em 0} \ No newline at end of file diff --git a/build/packaged/modules/accordion.js b/build/packaged/modules/accordion.js index 02edd2a6c..de5cf14c4 100644 --- a/build/packaged/modules/accordion.js +++ b/build/packaged/modules/accordion.js @@ -90,6 +90,14 @@ $.fn.accordion = function(parameters) { else { module.open(activeIndex); } + }, + + resetStyle: function() { + $(this) + .removeAttr('style') + .children() + .removeAttr('style') + ; } }, @@ -113,7 +121,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed , settings.easing, function() { $previousContent @@ -161,7 +169,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed, settings.easing, function(){ $activeContent @@ -329,7 +337,7 @@ $.fn.accordion.settings = { debug : true, verbose : true, - performance : true, + performance : false, exclusive : true, collapsible : true, diff --git a/build/packaged/modules/nag.js b/build/packaged/modules/nag.js index 911c6a977..83792f898 100644 --- a/build/packaged/modules/nag.js +++ b/build/packaged/modules/nag.js @@ -116,12 +116,20 @@ ; } }, + hide: function() { $module - .fadeOut(settings.duration, settings.easing) + .fadeOut(settings.duration, settings.easing, this.onHide) ; }, + onHide: function() { + $module.remove(); + if (settings.onHide) { + settings.onHide(); + }; + }, + stick: function() { module.refresh(); @@ -144,7 +152,7 @@ else { $module .css({ - top : yPosition + top : yPosition }) ; } @@ -152,15 +160,17 @@ unStick: function() { $module .css({ - top : '' + top : '' }) ; }, - dismiss: function() { + dismiss: function(event) { if(settings.storageMethod) { module.storage.set(settings.storedKey, settings.storedValue); } module.hide(); + event.stopImmediatePropagation(); + event.preventDefault(); }, should: { @@ -321,7 +331,9 @@ }, speed : 500, - easing : 'easeOutQuad' + easing : 'easeOutQuad', + + onHide: function() {} }; diff --git a/build/packaged/modules/popup.js b/build/packaged/modules/popup.js index 8fb910822..7e71908e8 100644 --- a/build/packaged/modules/popup.js +++ b/build/packaged/modules/popup.js @@ -130,7 +130,7 @@ $.fn.popup = function(parameters) { // generates popup html from metadata create: function() { - module.debug('Creating pop-up content'); + module.debug('Creating pop-up html'); var html = $module.data(metadata.html) || settings.html, variation = $module.data(metadata.variation) || settings.variation, @@ -245,14 +245,9 @@ $.fn.popup = function(parameters) { module.debug('Toggling pop-up'); // refresh state of module module.refresh(); - if($popup.size() === 0) { - module.verbose('Creating pop-up html'); - module.create(); - } if( !$module.hasClass(className.visible) ) { - if( module.position() ) { - module.show(); - } + module.hideAll(); + module.show(); } else { module.hide(); @@ -387,13 +382,10 @@ $.fn.popup = function(parameters) { show: function() { module.debug('Showing pop-up'); - $(selector.popup) - .filter(':visible') - .stop() - .fadeOut(200) - .prev($module) - .removeClass(className.visible) - ; + if($popup.size() === 0) { + module.create(); + } + module.position(); $module .addClass(className.visible) ; @@ -401,12 +393,14 @@ $.fn.popup = function(parameters) { .removeClass(className.loading) ; if(settings.animation == 'pop' && $.fn.popIn !== undefined) { + console.log($popup); $popup .stop() .popIn(settings.duration, settings.easing) ; } else { + console.log($popup); $popup .stop() .fadeIn(settings.duration, settings.easing) @@ -421,6 +415,16 @@ $.fn.popup = function(parameters) { $.proxy(settings.onShow, $popup)(); }, + hideAll: function() { + $(selector.popup) + .filter(':visible') + .stop() + .fadeOut(200) + .prev($module) + .removeClass(className.visible) + ; + }, + hide: function() { $module .removeClass(className.visible) @@ -509,7 +513,6 @@ $.fn.popup = function(parameters) { } }, error: function() { - console.log($module.next()); module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':'); }, performance: { @@ -616,9 +619,9 @@ $.fn.popup = function(parameters) { $.fn.popup.settings = { moduleName : 'Popup', - debug : false, - verbose : false, - performance : false, + debug : true, + verbose : true, + performance : true, namespace : 'popup', onInit : function(){}, diff --git a/build/packaged/modules/shape.js b/build/packaged/modules/shape.js index 9052cc2f1..2bceb8b67 100644 --- a/build/packaged/modules/shape.js +++ b/build/packaged/modules/shape.js @@ -301,11 +301,22 @@ $.fn.shape = function(parameters) { module.debug('Flipping over', $nextSide); if( !module.is.animating() ) { module.stage.behind(); - module.animate(module.getTransform.behind() ); + module.animate(module.getTransform.over() ); } else { module.queue('flip.over'); } + }, + + back: function() { + module.debug('Flipping back', $nextSide); + if( !module.is.animating() ) { + module.stage.behind(); + module.animate(module.getTransform.back() ); + } + else { + module.queue('flip.back'); + } } }, @@ -360,7 +371,7 @@ $.fn.shape = function(parameters) { }; }, - behind: function() { + over: function() { var translate = { x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) @@ -369,6 +380,17 @@ $.fn.shape = function(parameters) { return { transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' }; + }, + + back: function() { + var + translate = { + x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' + }; } }, diff --git a/build/packaged/modules/tab.js b/build/packaged/modules/tab.js index 00cf72eea..829f460c6 100644 --- a/build/packaged/modules/tab.js +++ b/build/packaged/modules/tab.js @@ -30,7 +30,7 @@ moduleSelector = $module.selector || '', eventNamespace = '.' + settings.namespace, - moduleNamespace = settings.namespace + '-module', + moduleNamespace = settings.namespace + '-module', className = settings.className, metadata = settings.metadata, @@ -62,8 +62,7 @@ return false; } else { - if(!settings.apiSettings) { - module.debug('No API url found, using current url'); + if(settings.auto) { settings.apiSettings = { url: settings.path + '/{$tab}' }; @@ -71,7 +70,8 @@ module.verbose('Address library found adding state change event'); $.address .state(settings.path) - .change(module.event.history.change) + .unbind('change') + .bind('change', module.event.history.change) ; } } @@ -160,7 +160,14 @@ change: function(tabPath) { var - pathArray = module.get.defaultPathArray(tabPath) + pushStateAvailable = (window.history && window.history.pushState), + shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), + remoteContent = $.isPlainObject(settings.apiSettings), + // only get default path if not remote content + pathArray = (remoteContent && !shouldIgnoreLoad) + ? module.utils.pathToArray(tabPath) + : module.get.defaultPathArray(tabPath), + tabPath = module.utils.arrayToPath(pathArray) ; module.deactivate.all(); $.each(pathArray, function(index, tab) { @@ -170,10 +177,6 @@ isTab = module.is.tab(currentPath), isLastIndex = (index + 1 == pathArray.length), - - pushStateAvailable = (window.history && window.history.pushState), - shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), - remoteContent = $.isPlainObject(settings.apiSettings), $tab = module.get.tabElement(currentPath), nextPathArray, @@ -195,7 +198,9 @@ nextPathArray = pathArray.slice(0, index + 2); nextPath = module.utils.arrayToPath(nextPathArray); isLastTab = ( !module.is.tab(nextPath) ); - module.verbose('Tab parameters found', nextPathArray); + if(isLastTab) { + module.verbose('Tab parameters found', nextPathArray); + } } if(isLastTab && remoteContent) { if(!shouldIgnoreLoad) { @@ -208,14 +213,15 @@ module.cache.add(tabPath, $tab.html()); module.activate.all(currentPath); $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } + return false; } else { module.debug('Opened local tab', currentPath); module.activate.all(currentPath); $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } - return false; } else { module.error(errors.missingTab, tab); @@ -245,6 +251,7 @@ module.debug('Content loaded in background', tabPath); } $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); }, urlData: { tab: fullTabPath } }, @@ -255,7 +262,7 @@ module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); module.activate.tab(tabPath); - $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); } else if(existingRequest) { module.debug('Content is already loading', fullTabPath); @@ -297,10 +304,10 @@ }, navigation: function(tabPath) { var - $nav = module.get.navElement(tabPath) + $navigation = module.get.navElement(tabPath) ; - module.verbose('Activating tab navigation for', $nav); - $nav.addClass(className.active); + module.verbose('Activating tab navigation for', $navigation, tabPath); + $navigation.addClass(className.active); } }, @@ -354,6 +361,9 @@ } module.error(errors.recursion); } + else { + module.debug('No default tabs found for', tabPath); + } recursionDepth = 0; return tabPath; }, @@ -583,6 +593,9 @@ determineTitle: function(tabArray) {} }, + // uses pjax style endpoints fetching content from same url with remote-content headers + auto : false, + history : false, path : false, @@ -626,4 +639,4 @@ }; -})( jQuery, window , document ); \ No newline at end of file +})( jQuery, window , document ); diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 857daa516..e2ae46754 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -81bf4b494bf4c4073269abd0fba8780a187b3d8f \ No newline at end of file +d28ce2df85ab9811336b78e674ec47f891cd6095 \ No newline at end of file diff --git a/build/packaged/semantic.min.js.REMOVED.git-id b/build/packaged/semantic.min.js.REMOVED.git-id index 9d7a835e3..d18bd96bb 100644 --- a/build/packaged/semantic.min.js.REMOVED.git-id +++ b/build/packaged/semantic.min.js.REMOVED.git-id @@ -1 +1 @@ -70f85a14c4a13624d9c72934cea67846e3211ff3 \ No newline at end of file +285c8f91c51a7e1a146de7ef602792de98242859 \ No newline at end of file diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index db65eef0b..e0f7a0e2b 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -52,11 +52,10 @@ --------------------*/ .ui.grid > .row { display: block; - width: 100%; -} -.ui.grid > .row { - margin-top: 1rem; - padding-top: 1rem; + width: 100% !important; + margin-top: 1.5%; + padding: 1.5% 0% 0%; + font-size: 0rem; } .ui.grid > .row:first-child { padding-top: 0rem; @@ -119,7 +118,7 @@ } @media only screen and (min-width: 2000px) { .ui.responsive.grid { - padding: 0% 25%; + padding: 0% 23%; } } /*------------------- @@ -320,16 +319,13 @@ .ui.divided.grid, .ui.divided.grid > .row { display: table; - width: 100%; - margin-left: 0% !important; - margin-right: 0% !important; } .ui.divided.grid > .column, .ui.divided.grid > .row > .column { display: table-cell; - -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.9); - -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.9); - box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.9); + -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); + box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); } .ui.divided.grid > .column:first-child, .ui.divided.grid > .row > .column:first-child { @@ -337,6 +333,19 @@ -moz-box-shadow: none; box-shadow: none; } +/* Vertically Divided */ +.ui.vertically.divided.grid > .row { + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); + -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); +} +.ui.vertically.divided.grid > .row > .column, +.ui.vertically.divided.grid > .column, +.ui.vertically.divided.grid > .row:first-child { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*---------------------- Celled -----------------------*/ @@ -372,6 +381,11 @@ -moz-box-shadow: none; box-shadow: none; } +.ui.celled.repsonsive.grid { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*---------------------- Horizontally Centered -----------------------*/ @@ -433,7 +447,7 @@ display: table-cell; } /*------------------- - Folding + Stackable --------------------*/ @media only screen and (max-width: 960px) { .ui.stackable.grid { diff --git a/build/uncompressed/collections/menu.css b/build/uncompressed/collections/menu.css index f856d4371..896d097cc 100644 --- a/build/uncompressed/collections/menu.css +++ b/build/uncompressed/collections/menu.css @@ -205,7 +205,7 @@ ---------------*/ .ui.menu .item > .label, .ui.menu .item > a > .label { - font-size: 0.8em; + font-size: 0.875em; margin: -0.3em 0em -0.3em 0.3em; padding: 0.3em 0.8em; vertical-align: baseline; @@ -379,7 +379,7 @@ margin: 0em; } .ui.vertical.menu .dropdown.item .menu .item { - font-size: 0.9em; + font-size: 0.875em; padding: 0.75em 1em; } .ui.vertical.menu .dropdown.item .menu .item .icon { @@ -391,7 +391,7 @@ } .ui.vertical.menu .item > .menu > .item { padding: 0.5rem 1.5rem; - font-size: 0.85em; + font-size: 0.875em; } .ui.vertical.menu .item > .menu > .item:before { display: none; @@ -422,7 +422,7 @@ color: #FFFFFF; } .ui.tiered.menu .sub.menu .item { - font-size: 0.9rem; + font-size: 0.875rem; } .ui.tiered.menu .sub.menu .item:before { background-image: none; @@ -705,7 +705,7 @@ background-color: transparent; opacity: 1; color: rgba(50, 50, 50, 0.8); - font-size: 0.9rem; + font-size: 0.875rem; padding: 0em; text-transform: uppercase; font-weight: bold; @@ -1186,16 +1186,20 @@ transition: background 0.2s ease ; } +/* Don't double up pointers */ +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} .ui.vertical.pointing.menu .active.item:after { position: absolute; top: 50%; + margin-top: -0.3em; right: -0.4em; bottom: auto; left: auto; border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1); - margin-top: -0.3em; } /* Colors */ .ui.pointing.menu .active.item:after { diff --git a/build/uncompressed/elements/button.css b/build/uncompressed/elements/button.css index 7e4169104..1b1b48577 100644 --- a/build/uncompressed/elements/button.css +++ b/build/uncompressed/elements/button.css @@ -119,6 +119,138 @@ -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset; } +/*-------------- + Error +---------------*/ +.ui.button.error, +.ui.button.error.hover, +.ui.button.error.down { + cursor: default; + position: relative !important; + background-color: #D95C5C !important; + color: transparent !important; + text-shadow: none; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.error .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.error:after { + position: absolute; + left: 50%; + content: "Error"; + margin-left: -1.8em; + color: #FFFFFF; + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} +.ui.button.error .icon:before { + font-family: 'Icons'; + content: '\26a0'; +} +/*-------------- + Success +---------------*/ +.ui.button.success, +.ui.button.success.hover, +.ui.button.success.down { + position: relative !important; + background-color: #5BBD72 !important; + color: transparent !important; +} +.ui.button.success .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.success .icon:before { + font-family: 'Icons'; + content: '\2611'; +} +.ui.button.success:after { + position: absolute; + left: 50%; + content: "Success"; + margin-left: -2em; + color: #FFFFFF; + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} +@-webkit-keyframes button-text { + 0% { + -webkit-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes button-text { + 0% { + -moz-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@keyframes button-text { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/*-------------- + Loading +---------------*/ +.ui.button.loading, +.ui.button.loading.hover { + position: relative; + cursor: default; + background-color: #F3F3F3 !important; + color: transparent !important; + text-shadow: none !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.loading:after { + position: absolute; + top: 0em; + left: 0em; + width: 100%; + height: 100%; + content: ''; + background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; +} +.ui.labeled.icon.button.loading .icon { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*------------------- Disabled --------------------*/ @@ -392,6 +524,7 @@ .ui.icon.button > .icon { opacity: 1; margin: 0em; + vertical-align: top; } /*------------------- Ordinality @@ -525,9 +658,9 @@ ---------------*/ .ui.button.attached { display: block; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; } .ui.button.attached.top { -webkit-border-radius: 0.3125em 0.3125em 0em 0em; @@ -827,135 +960,3 @@ -webkit-border-radius: 0px 0px 0.3125em 0.3125em; border-radius: 0px 0px 0.3125em 0.3125em; } -/*-------------- - Loading ----------------*/ -.ui.button.loading, -.ui.button.loading.hover { - position: relative; - cursor: default; - background-color: #F3F3F3 !important; - color: transparent !important; - text-shadow: none !important; - background-image: none !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.button.loading:after { - position: absolute; - top: 0em; - left: 0em; - width: 100%; - height: 100%; - content: ''; - background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; -} -.ui.labeled.icon.button.loading .icon { - background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -/*-------------- - Error ----------------*/ -.ui.button.error, -.ui.button.error.hover, -.ui.button.error.down { - cursor: default; - position: relative !important; - background-color: #D95C5C !important; - color: transparent !important; - text-shadow: none; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.button.error .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.error:after { - position: absolute; - left: 50%; - content: "Error"; - margin-left: -1.8em; - color: #FFFFFF; - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} -.ui.button.error .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} -/*-------------- - Success ----------------*/ -.ui.button.success, -.ui.button.success.hover, -.ui.button.success.down { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.button.success .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.success .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.button.success:after { - position: absolute; - left: 50%; - content: "Success"; - margin-left: -2em; - color: #FFFFFF; - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} -@-webkit-keyframes button-text { - 0% { - -webkit-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} -@-moz-keyframes button-text { - 0% { - -moz-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} -@keyframes button-text { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - transform: translateY(0); - } -} diff --git a/build/uncompressed/elements/divider.css b/build/uncompressed/elements/divider.css index d0c42ac82..94720e6de 100644 --- a/build/uncompressed/elements/divider.css +++ b/build/uncompressed/elements/divider.css @@ -13,7 +13,7 @@ Divider *******************************/ .ui.divider { - margin: 1em 0em; + margin: 1rem 0rem; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.8); height: 0em; diff --git a/build/uncompressed/elements/header.css b/build/uncompressed/elements/header.css index 1fa641aaa..5ef57b30d 100644 --- a/build/uncompressed/elements/header.css +++ b/build/uncompressed/elements/header.css @@ -21,13 +21,6 @@ font-weight: bold; line-height: 1.33; } -.ui.header:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} .ui.header .ui.sub.header, .ui.header .sub.header { font-size: 1rem; diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index 0a7e9257c..cf1232459 100644 --- a/build/uncompressed/elements/label.css +++ b/build/uncompressed/elements/label.css @@ -52,7 +52,7 @@ a.ui.label { } .ui.label .icon.close { cursor: pointer; - margin-left: 0.5em; + margin: 0em 0em 0em 0.5em; opacity: 0.7; -webkit-transition: background 0.1s linear ; @@ -185,6 +185,10 @@ a.ui.label:hover:before { border-radius: 4px 0em 0em 4px; } .ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; width: auto; -webkit-border-radius: 4px 0em 4px 0em; -moz-border-radius: 4px 0em 4px 0em; @@ -433,14 +437,16 @@ a.ui.teal.tag.label:hover:before { /*------------------- Circular --------------------*/ +.ui.circular.labels .label, .ui.circular.label { - margin-right: 0.5em; margin-top: -1em; - width: 2em; height: 2em; - padding: 0.5em; + padding: 0.5em !important; line-height: 1em; text-align: center; + -webkit-border-radius: 500em; + -moz-border-radius: 500em; + border-radius: 500em; } /*------------------- Pointing @@ -531,9 +537,6 @@ a.ui.teal.tag.label:hover:before { top: -1em; left: 100%; margin: 0em 0em 0em -1.5em !important; - -webkit-box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset; - box-shadow: 0px -2px 0 0px rgba(0, 0, 0, 0.1) inset; } /*------------------- Sizes diff --git a/build/uncompressed/modules/accordion.css b/build/uncompressed/modules/accordion.css index 78456a936..ecaf77477 100644 --- a/build/uncompressed/modules/accordion.css +++ b/build/uncompressed/modules/accordion.css @@ -44,6 +44,19 @@ margin: 0em; padding: 1.3em 1em; } +/*-------------- + Loose Coupling +---------------*/ +.ui.basic.accordion.menu { + background-color: #FFFFFF; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +} +.ui.basic.accordion.menu .title, +.ui.basic.accordion.menu .content { + padding: 0em; +} /******************************* States *******************************/ diff --git a/build/uncompressed/modules/accordion.js b/build/uncompressed/modules/accordion.js index 02edd2a6c..de5cf14c4 100644 --- a/build/uncompressed/modules/accordion.js +++ b/build/uncompressed/modules/accordion.js @@ -90,6 +90,14 @@ $.fn.accordion = function(parameters) { else { module.open(activeIndex); } + }, + + resetStyle: function() { + $(this) + .removeAttr('style') + .children() + .removeAttr('style') + ; } }, @@ -113,7 +121,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed , settings.easing, function() { $previousContent @@ -161,7 +169,7 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed) + }, settings.speed, module.event.resetStyle) .end() .slideUp(settings.speed, settings.easing, function(){ $activeContent @@ -329,7 +337,7 @@ $.fn.accordion.settings = { debug : true, verbose : true, - performance : true, + performance : false, exclusive : true, collapsible : true, diff --git a/build/uncompressed/modules/nag.css b/build/uncompressed/modules/nag.css index 7a79e862e..9d2b1aff9 100644 --- a/build/uncompressed/modules/nag.css +++ b/build/uncompressed/modules/nag.css @@ -18,7 +18,7 @@ position: absolute; top: 0px; left: 10%; - z-index: 100; + z-index: 101; width: 80%; min-height: 20px; -webkit-box-sizing: border-box; diff --git a/build/uncompressed/modules/nag.js b/build/uncompressed/modules/nag.js index 911c6a977..83792f898 100644 --- a/build/uncompressed/modules/nag.js +++ b/build/uncompressed/modules/nag.js @@ -116,12 +116,20 @@ ; } }, + hide: function() { $module - .fadeOut(settings.duration, settings.easing) + .fadeOut(settings.duration, settings.easing, this.onHide) ; }, + onHide: function() { + $module.remove(); + if (settings.onHide) { + settings.onHide(); + }; + }, + stick: function() { module.refresh(); @@ -144,7 +152,7 @@ else { $module .css({ - top : yPosition + top : yPosition }) ; } @@ -152,15 +160,17 @@ unStick: function() { $module .css({ - top : '' + top : '' }) ; }, - dismiss: function() { + dismiss: function(event) { if(settings.storageMethod) { module.storage.set(settings.storedKey, settings.storedValue); } module.hide(); + event.stopImmediatePropagation(); + event.preventDefault(); }, should: { @@ -321,7 +331,9 @@ }, speed : 500, - easing : 'easeOutQuad' + easing : 'easeOutQuad', + + onHide: function() {} }; diff --git a/build/uncompressed/modules/popup.css b/build/uncompressed/modules/popup.css index 37a1b35af..7083f540c 100644 --- a/build/uncompressed/modules/popup.css +++ b/build/uncompressed/modules/popup.css @@ -23,10 +23,12 @@ background-color: #FFFFFF; padding: 0.8em 1.2em; font-size: 0.875rem; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.7); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; - color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 1px 1px #DCDDDE; -moz-box-shadow: 0px 1px 1px #DCDDDE; box-shadow: 0px 1px 1px #DCDDDE; @@ -199,6 +201,9 @@ background-color: #333333; border: none; color: #FFFFFF; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .ui.inverted.popup .header { background-color: rgba(0, 0, 0, 0.2); @@ -206,4 +211,7 @@ } .ui.inverted.popup:before { background-color: #333333; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } diff --git a/build/uncompressed/modules/popup.js b/build/uncompressed/modules/popup.js index 8fb910822..7e71908e8 100644 --- a/build/uncompressed/modules/popup.js +++ b/build/uncompressed/modules/popup.js @@ -130,7 +130,7 @@ $.fn.popup = function(parameters) { // generates popup html from metadata create: function() { - module.debug('Creating pop-up content'); + module.debug('Creating pop-up html'); var html = $module.data(metadata.html) || settings.html, variation = $module.data(metadata.variation) || settings.variation, @@ -245,14 +245,9 @@ $.fn.popup = function(parameters) { module.debug('Toggling pop-up'); // refresh state of module module.refresh(); - if($popup.size() === 0) { - module.verbose('Creating pop-up html'); - module.create(); - } if( !$module.hasClass(className.visible) ) { - if( module.position() ) { - module.show(); - } + module.hideAll(); + module.show(); } else { module.hide(); @@ -387,13 +382,10 @@ $.fn.popup = function(parameters) { show: function() { module.debug('Showing pop-up'); - $(selector.popup) - .filter(':visible') - .stop() - .fadeOut(200) - .prev($module) - .removeClass(className.visible) - ; + if($popup.size() === 0) { + module.create(); + } + module.position(); $module .addClass(className.visible) ; @@ -401,12 +393,14 @@ $.fn.popup = function(parameters) { .removeClass(className.loading) ; if(settings.animation == 'pop' && $.fn.popIn !== undefined) { + console.log($popup); $popup .stop() .popIn(settings.duration, settings.easing) ; } else { + console.log($popup); $popup .stop() .fadeIn(settings.duration, settings.easing) @@ -421,6 +415,16 @@ $.fn.popup = function(parameters) { $.proxy(settings.onShow, $popup)(); }, + hideAll: function() { + $(selector.popup) + .filter(':visible') + .stop() + .fadeOut(200) + .prev($module) + .removeClass(className.visible) + ; + }, + hide: function() { $module .removeClass(className.visible) @@ -509,7 +513,6 @@ $.fn.popup = function(parameters) { } }, error: function() { - console.log($module.next()); module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':'); }, performance: { @@ -616,9 +619,9 @@ $.fn.popup = function(parameters) { $.fn.popup.settings = { moduleName : 'Popup', - debug : false, - verbose : false, - performance : false, + debug : true, + verbose : true, + performance : true, namespace : 'popup', onInit : function(){}, diff --git a/build/uncompressed/modules/reveal.css b/build/uncompressed/modules/reveal.css index 0f71813d7..d0d7dec93 100644 --- a/build/uncompressed/modules/reveal.css +++ b/build/uncompressed/modules/reveal.css @@ -16,13 +16,13 @@ position: relative !important; z-index: 2 !important; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { position: absolute !important; top: 0em !important; left: 0em !important; @@ -34,7 +34,7 @@ -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.reveal > :last-child { +.ui.reveal > .hidden.content { position: relative !important; z-index: 3 !important; } @@ -68,131 +68,131 @@ -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.slide.reveal > :first-child { +.ui.slide.reveal > .visible.content { position: relative !important; } -.ui.slide.reveal > :last-child { +.ui.slide.reveal > .hidden.content { display: inline-block; position: absolute !important; top: 0% !important; left: 100% !important; width: 100% !important; } -.ui.slide.reveal:hover > :first-child { +.ui.slide.reveal:hover > .visible.content { left: -100% !important; } -.ui.slide.reveal:hover > :last-child { +.ui.slide.reveal:hover > .hidden.content { left: 0% !important; } -.ui.right.slide.reveal > :first-child { +.ui.right.slide.reveal > .visible.content { left: 0%; } -.ui.right.slide.reveal > :last-child { +.ui.right.slide.reveal > .hidden.content { left: auto !important; right: 100% !important; } -.ui.right.slide.reveal:hover > :first-child { +.ui.right.slide.reveal:hover > .visible.content { left: 100% !important; right: auto !important; } -.ui.right.slide.reveal:hover > :last-child { +.ui.right.slide.reveal:hover > .hidden.content { left: auto !important; right: 0% !important; } -.ui.up.slide.reveal > :first-child { +.ui.up.slide.reveal > .visible.content { top: 0% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.up.slide.reveal > :last-child { +.ui.up.slide.reveal > .hidden.content { top: 100% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.slide.up.reveal:hover > :first-child { +.ui.slide.up.reveal:hover > .visible.content { top: -100% !important; left: 0% !important; } -.ui.slide.up.reveal:hover > :last-child { +.ui.slide.up.reveal:hover > .hidden.content { top: 0% !important; left: 0% !important; } -.ui.down.slide.reveal > :first-child { +.ui.down.slide.reveal > .visible.content { top: auto !important; right: auto !important; bottom: auto !important; bottom: 0% !important; } -.ui.down.slide.reveal > :last-child { +.ui.down.slide.reveal > .hidden.content { top: auto !important; right: auto !important; bottom: 100% !important; left: 0% !important; } -.ui.slide.down.reveal:hover > :first-child { +.ui.slide.down.reveal:hover > .visible.content { left: 0% !important; bottom: -100% !important; } -.ui.slide.down.reveal:hover > :last-child { +.ui.slide.down.reveal:hover > .hidden.content { left: 0% !important; bottom: 0% !important; } /*-------------- Fade ---------------*/ -.ui.fade.reveal > :first-child { +.ui.fade.reveal > .visible.content { opacity: 1; } -.ui.fade.reveal:hover > :first-child { +.ui.fade.reveal:hover > .visible.content { opacity: 0; } /*-------------- Move ---------------*/ -.ui.move.reveal > :first-child, -.ui.move.left.reveal > :first-child { +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { left: auto !important; top: auto !important; bottom: auto !important; right: 0% !important; } -.ui.move.reveal:hover > :first-child, -.ui.move.left.reveal:hover > :first-child { +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content { right: 100% !important; } -.ui.move.right.reveal > :first-child { +.ui.move.right.reveal > .visible.content { right: auto !important; top: auto !important; bottom: auto !important; left: 0% !important; } -.ui.move.right.reveal:hover > :first-child { +.ui.move.right.reveal:hover > .visible.content { left: 100% !important; } -.ui.move.up.reveal > :first-child { +.ui.move.up.reveal > .visible.content { right: auto !important; left: auto !important; top: auto !important; bottom: 0% !important; } -.ui.move.up.reveal:hover > :first-child { +.ui.move.up.reveal:hover > .visible.content { bottom: 100% !important; } -.ui.move.down.reveal > :first-child { +.ui.move.down.reveal > .visible.content { right: auto !important; left: auto !important; top: 0% !important; bottom: auto !important; } -.ui.move.down.reveal:hover > :first-child { +.ui.move.down.reveal:hover > .visible.content { top: 100% !important; } /*-------------- Rotate ---------------*/ -.ui.rotate.reveal > :first-child { +.ui.rotate.reveal > .visible.content { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; @@ -204,30 +204,30 @@ -ms-transform: rotate(0deg); transform: rotate(0deg); } -.ui.rotate.reveal > :first-child, -.ui.rotate.right.reveal > :first-child { +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -o-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; } -.ui.rotate.reveal:hover > :first-child, -.ui.rotate.right.reveal:hover > :first-child { +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -o-transform: rotate(110deg); -ms-transform: rotate(110deg); transform: rotate(110deg); } -.ui.rotate.left.reveal > :first-child { +.ui.rotate.left.reveal > .visible.content { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } -.ui.rotate.left.reveal:hover > :first-child { +.ui.rotate.left.reveal:hover > .visible.content { -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg); diff --git a/build/uncompressed/modules/shape.js b/build/uncompressed/modules/shape.js index 9052cc2f1..2bceb8b67 100644 --- a/build/uncompressed/modules/shape.js +++ b/build/uncompressed/modules/shape.js @@ -301,11 +301,22 @@ $.fn.shape = function(parameters) { module.debug('Flipping over', $nextSide); if( !module.is.animating() ) { module.stage.behind(); - module.animate(module.getTransform.behind() ); + module.animate(module.getTransform.over() ); } else { module.queue('flip.over'); } + }, + + back: function() { + module.debug('Flipping back', $nextSide); + if( !module.is.animating() ) { + module.stage.behind(); + module.animate(module.getTransform.back() ); + } + else { + module.queue('flip.back'); + } } }, @@ -360,7 +371,7 @@ $.fn.shape = function(parameters) { }; }, - behind: function() { + over: function() { var translate = { x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) @@ -369,6 +380,17 @@ $.fn.shape = function(parameters) { return { transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' }; + }, + + back: function() { + var + translate = { + x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) + } + ; + return { + transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' + }; } }, diff --git a/build/uncompressed/modules/tab.js b/build/uncompressed/modules/tab.js index 00cf72eea..829f460c6 100644 --- a/build/uncompressed/modules/tab.js +++ b/build/uncompressed/modules/tab.js @@ -30,7 +30,7 @@ moduleSelector = $module.selector || '', eventNamespace = '.' + settings.namespace, - moduleNamespace = settings.namespace + '-module', + moduleNamespace = settings.namespace + '-module', className = settings.className, metadata = settings.metadata, @@ -62,8 +62,7 @@ return false; } else { - if(!settings.apiSettings) { - module.debug('No API url found, using current url'); + if(settings.auto) { settings.apiSettings = { url: settings.path + '/{$tab}' }; @@ -71,7 +70,8 @@ module.verbose('Address library found adding state change event'); $.address .state(settings.path) - .change(module.event.history.change) + .unbind('change') + .bind('change', module.event.history.change) ; } } @@ -160,7 +160,14 @@ change: function(tabPath) { var - pathArray = module.get.defaultPathArray(tabPath) + pushStateAvailable = (window.history && window.history.pushState), + shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), + remoteContent = $.isPlainObject(settings.apiSettings), + // only get default path if not remote content + pathArray = (remoteContent && !shouldIgnoreLoad) + ? module.utils.pathToArray(tabPath) + : module.get.defaultPathArray(tabPath), + tabPath = module.utils.arrayToPath(pathArray) ; module.deactivate.all(); $.each(pathArray, function(index, tab) { @@ -170,10 +177,6 @@ isTab = module.is.tab(currentPath), isLastIndex = (index + 1 == pathArray.length), - - pushStateAvailable = (window.history && window.history.pushState), - shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), - remoteContent = $.isPlainObject(settings.apiSettings), $tab = module.get.tabElement(currentPath), nextPathArray, @@ -195,7 +198,9 @@ nextPathArray = pathArray.slice(0, index + 2); nextPath = module.utils.arrayToPath(nextPathArray); isLastTab = ( !module.is.tab(nextPath) ); - module.verbose('Tab parameters found', nextPathArray); + if(isLastTab) { + module.verbose('Tab parameters found', nextPathArray); + } } if(isLastTab && remoteContent) { if(!shouldIgnoreLoad) { @@ -208,14 +213,15 @@ module.cache.add(tabPath, $tab.html()); module.activate.all(currentPath); $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } + return false; } else { module.debug('Opened local tab', currentPath); module.activate.all(currentPath); $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); } - return false; } else { module.error(errors.missingTab, tab); @@ -245,6 +251,7 @@ module.debug('Content loaded in background', tabPath); } $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); }, urlData: { tab: fullTabPath } }, @@ -255,7 +262,7 @@ module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); module.activate.tab(tabPath); - $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); + $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); } else if(existingRequest) { module.debug('Content is already loading', fullTabPath); @@ -297,10 +304,10 @@ }, navigation: function(tabPath) { var - $nav = module.get.navElement(tabPath) + $navigation = module.get.navElement(tabPath) ; - module.verbose('Activating tab navigation for', $nav); - $nav.addClass(className.active); + module.verbose('Activating tab navigation for', $navigation, tabPath); + $navigation.addClass(className.active); } }, @@ -354,6 +361,9 @@ } module.error(errors.recursion); } + else { + module.debug('No default tabs found for', tabPath); + } recursionDepth = 0; return tabPath; }, @@ -583,6 +593,9 @@ determineTitle: function(tabArray) {} }, + // uses pjax style endpoints fetching content from same url with remote-content headers + auto : false, + history : false, path : false, @@ -626,4 +639,4 @@ }; -})( jQuery, window , document ); \ No newline at end of file +})( jQuery, window , document ); diff --git a/build/uncompressed/views/comment.css b/build/uncompressed/views/comment.css index 69de4358e..d22e39e5b 100644 --- a/build/uncompressed/views/comment.css +++ b/build/uncompressed/views/comment.css @@ -23,8 +23,8 @@ ---------------*/ .ui.comments .comment { position: relative; - margin-top: 0.75em; - padding-top: 0.75em; + margin-top: 0.5em; + padding-top: 0.5em; } .ui.comments .comment:first-child { margin-top: 0em; @@ -112,8 +112,9 @@ Nested Comments ---------------------*/ .ui.comments .comment .comments { - margin-top: 0.25em; - padding-top: 0.25em; + margin-top: 0.5em; + padding-top: 0.5em; + padding-bottom: 1em; } .ui.comments .comment .comments:before { position: absolute; diff --git a/build/uncompressed/views/sitemap.css b/build/uncompressed/views/sitemap.css new file mode 100644 index 000000000..17c7f6e3f --- /dev/null +++ b/build/uncompressed/views/sitemap.css @@ -0,0 +1,36 @@ +/* + * # Sitemap + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 17 2013 + */ +/******************************* + Sitemap +*******************************/ +.ui.sitemap { + margin: 0 -3rem; + font-size: 0rem; + text-align: left; +} +/*-------------- + Elements +---------------*/ +.ui.sitemap > .section { + display: inline-block; + vertical-align: top; + margin: 0em 3rem; + font-size: 1rem; +} +.ui.sitemap > .section > .header { + font-size: 1.125em; + color: rgba(0, 0, 0, 0.8); + padding-bottom: 0.5em; +} +.ui.sitemap > .section > a { + display: block; + padding: 0.25em 0em; +} diff --git a/node/Gruntfile.js b/node/Gruntfile.js index 7e190fedf..168e92d8e 100755 --- a/node/Gruntfile.js +++ b/node/Gruntfile.js @@ -37,7 +37,7 @@ module.exports = function(grunt) { config = { package : grunt.file.readJSON('package.json'), - server : grunt.file.readJSON('server.json'), + //server : grunt.file.readJSON('server.json'), // watches for changes in a source folder watch: { diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html new file mode 100755 index 000000000..749acf34c --- /dev/null +++ b/node/src/documents/collection.html @@ -0,0 +1,101 @@ +--- +layout : 'default' +css : 'index' + +title : 'UI Collections' +type : 'Semantic' +--- + +
+
+

UI Collection

+

UI collections are elements which contain other elements which often appear together.

+

+
+
+

Types of Collections

+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ Form +

A form is used to solicit a user response

+
+
+
+
+
+
1
+
2
+
3
+
+
+
+ Grid +

A grid helps harmonize negative space in a layout

+
+
+
+
+
+ Friends + Messages + Profile +
+
+
+ Menu +

A menu organizes related links

+
+
+
+
+ + + + + + + + + + + +
NameStatus
John Approved
+
+
+ Table +

A table collects related data into rows of content

+
+
+
+
+
+
Alert
+

You forgot your name!

+
+
+
+ Message +

Messages alert a user to something important.

+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/breadcrumb.html b/node/src/documents/collections/breadcrumb.html new file mode 100755 index 000000000..26e2e8946 --- /dev/null +++ b/node/src/documents/collections/breadcrumb.html @@ -0,0 +1,70 @@ +--- +layout : 'default' +css : 'breadcrumb' +title : 'Breadcrumb' +type : 'UI Collection' +--- + +
+
+

Breadcrumb

+

A breadcrumb is a menu to show the location of the current section in relation to other sections.

+
+
+
+ +
+
+ Collection + Elements +
+
+ +

Collection

+ +
+

A simple breadcrumb

+
+

This example uses a ui segment to add padding and background color. This is not required.

+
+
+ Food +
/
+ Fruit +
/
+
Apples
+
+
+ +

Elements

+ +
+

A divider

+

A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.

+
+ Food + + Fruit + +
Apples
+
+
+ +
+

A section

+

A breadcrumb can contain sections that can either be formatted as a link or text

+
+ Food +
/
+ Fruit +
/
+
Apples
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html new file mode 100755 index 000000000..5cd4cc01d --- /dev/null +++ b/node/src/documents/collections/form.html @@ -0,0 +1,519 @@ +--- +layout : 'default' +css : 'form' + +title : 'Form' +type : 'UI Collection' +--- + + +
+
+

Form

+

A form is a collection of user input elements

+
+ Looking for form validation? + Form input can be validated using the form behavior definition +
+
+
+
+
+
+ Collection + Elements + States + Variations +
+
+

Collection

+ +
+

Form:

+

+ Forms always include fields, and fields always contain form elements. Fields themselves may also include: + ui inputs, standard form fields, ui labels, textareas, as well as: + checkboxes, and message blocks. +

+

Validation messages use messages which are formatted for use inside forms.

+
+

This example uses a ui segment to add the padding and background color. This is not required.

+
+
+
+ +
+ + +
+ +
+
+
+
+ +
+ + +
+ +
+
+
+
+
We noticed some issues
+
+
Login
+
+
+ +

Elements

+ +
+

Field

+

A field is a form element containing a label and an input

+
+
+ + +
+
+
+ +
+

Text Area

+

A textarea uses the default form element

+
+
+ + +
+
+
+ +
+

Checkbox

+

UI Checkboxes are styled forms of standard form checkboxes.

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

Radio Box

+

Radio boxes are styled forms of standard form radio controls.

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

Text Block

+

Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.

+
+
+
We had some issues
+
    +
  • Please enter your first name
    • +
  • Please enter your last name
    • +
+
+
+
+ +

States

+ +

Form

+ +
+

Loading

+

If a form is in loading state, it will automatically show a loading indicator:

+ +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ +
+

Error

+

If a form is in an error state, it will automatically show any error message blocks:

+
+
+
Action Forbidden
+

You can only sign up for an account once with a given e-mail address.

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ +
+

Warning

+

If a form is in warning state, it will automatically show any warning message block:

+ +
+
+
Could you check something!
+
    +
  • You forgot your first name
    • +
  • And also your last name
    • +
+
+
+
+ + +
Enter a first name
+
+
+ + +
Enter a last name
+
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ +

Form Fields

+ +
+

Error

+

Individual fields may contain an error state

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

Disabled

+

Individual fields may be disabled or read only

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

Variations

+ +

Forms

+ +
+

Fluid

+

A form can take the width of its container

+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+ +
+

Size

+

A form can also be small or large

+
+
+
+ + +
+
+ + +
+
+
Submit
+
+

+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+ +
+

Inverted

+

A form on a dark background may have to invert its color scheme

+ +
+
+
+
We had some issues
+
    +
  • Please enter your first name
    • +
  • Please enter your last name
    • +
+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+
+ + +

Fields

+ +
+

Inline

+

A field can have its label next to instead of above it.

+
+
+ + +
+
+
+ +
+

Date

+

A field can let users know they are for dates

+
+
+ + +
+
+
+ + +

Groups

+ +
+

Fields

+

Fields can exist together side by side

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

Grouped Fields

+

Fields can be grouped to show related choices

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

Inline

+

Multiple fields may be inline in a row

+
+
+
+ + +
+
+ +
+
+ +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html new file mode 100755 index 000000000..0b0b0ce7a --- /dev/null +++ b/node/src/documents/collections/grid.html @@ -0,0 +1,719 @@ +--- +layout : 'default' +css : 'Grid' + +title : 'Grid' +type : 'UI Collection' +--- + +
+
+
+

Grid

+

A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.

+
+
+
+
+
+ +

Collection

+ +
+

Grid

+

A grid is made up of columns of content.

+ +
All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes 16 columns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+

Page Grid

+

A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.

+ +
+ It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.
+ +
+
+
+ + + Mail + + + + Lab + + + + Favorites + +
+
+
+
+ Inbox +

Welcome to your inbox. Would you like to see more information?

+
+
+
+
+ +
+

Rows

+

A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.

+

+

+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+ A +
+
+
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+ B +
+
+
+
+
+
+

Columns

+

Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.

+
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+ 4 +
+
+
+
+ +

Variations

+ +

Grid

+ +
+

Responsive Grid

+

A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.

+ +
+ Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals. +
+ +
+
+
+ + + Mail + + + + Lab + + + + Favorites + +
+
+
+
+ Inbox +

Welcome to your inbox. Would you like to see more information?

+
+
+
+
+ +
+

Changing grid column count

+

A grid can have a different number of columns per row

+
+
+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+ Cats +
+
+ Abysinnian +
+
+ Sphynx +
+
+
+
+
+

Log in to your account

+
+ + +
+
+ + +
+
Login
+
+
+
+
+ +
+

Stackable Grid

+

A grid can have its columns take a full column width when below a threshold to allow for content to display properly at small sizes

+
+ To see a grid stack, try resizing your browser to a small width +
+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+ +
+

Divided

+

A grid can show a division between its columns

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+
+

Celled

+

A grid can have rows divided into cells

+
+
+
+

Lorem ipsum do

+
+
+

Lorem ipsum dolor

+
+
+

Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+ +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+ +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+ +
+

Text Alignment

+

A grid can specify its text alignment

+
+
+
+
+
+ Cats +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Monkeys +
+
+
+
+
+
+ +
+

Vertical Alignment

+

A grid can specify its vertical alignment to have all its columns vertically centered.

+
+
+
+
+
+ Cats +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Monkeys +
+
+
+
+
+
+ +

Rows

+
+

Vertical Alignment

+

A row can also specify its vertical alignment to have its columns vertically centered.

+
+
+
+
+
+ Cats +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Monkeys +
+
+
+
+
+
+
+
+ Dogs +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Monkeys +
+
+
+
+
+
+
+
+ Cats +
+
+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Monkeys +
+
+
+
+
+
+ +

Columns

+ +
+

Row Alignment (Floating)

+

A column can be"floated", to either the left or right of its row.

+
+
+
+
+ Dogs +
+
+ Poodle +
+
+ Cockerspaniel +
+
+
+
+
+
+ Cats +
+
+ Abysinnian +
+
+ Sphynx +
+
+
+
+
+
+

Column Width

+

A column can span across multiple grid columns.

+
+
+
Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
+
+
+
Colume Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
+
+
+
Colume Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat.
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html new file mode 100755 index 000000000..d58f52644 --- /dev/null +++ b/node/src/documents/collections/menu.html @@ -0,0 +1,918 @@ +--- +layout : 'default' +css : 'menu' + +title : 'Menu' +type : 'UI Collection' +--- + +
+
+

Menu

+

A menu is a collection of interface elements usually showing several actions which a user can take

+
+
+
+ +
+
+ Collection + Elements + States + Variations +
+
+ +

Collection

+
+

Menu

+ +

This example uses several menu elements to display the versatility of a menu collection.

+
+ + Home + + + Messages + 22 + + + Browse + +
+
+
+
+
+ More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+
+
+ + +
+

Vertical Menu

+

A vertical menu can have its own sub menus. This example uses three levels of menu depth.

+
A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
+ +
+ + + Feed + + + Messages + + + Browse + +
+
+
+
+ More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+
+ +
+

Pagination

+

A pagination menu is specially formatted to present links to pages of content

+ +
+ +
+

Tiered Menu

+

A tiered menu can show the sub-sections available as part of an activated section.

+
+
+ + + Friends + + + Browse + + + Messages + +
+
+
+
+
+ More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+
+
+ Search + Add + Remove +
+
+
+ +
+

Tiered Vertical Menu

+

A tiered menu can show the sub-sections available as part of an activated section.

+
+
+
+
+
+ Home +
+ Search + Add + Remove +
+
+ + Browse + + + Messages + +
+ More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+
+ + +
+

Secondary Menu

+

A secondary menu allows for a section of content on a page to be activated

+
+ + + Friends + + + Messages + + + Browse + +
+
+
+

A vertical secondary menu

+
+ + + Friends + + + Messages + + + Browse + +
+ More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+
+ +
+

Pointing

+

A menu can point to content to show relationship

+
+ + Home + + + Messages + + + Browse + +
+

+
+ + Home + + + Messages + + + Browse + +
+
+
+

A pointing menu can also be vertical

+
+ + Home + + + Messages + + + Browse + +
+

+
+ + Home + + + Messages + + + Browse + +
+
+ +
+

Text

+

A menu can display simple text links

+
+ + Home + + + Messages + + + Browse + +
+
+
+

A vertical text menu

+
+ + Home + + + Messages + + + Browse + +
+
+ +

Elements

+ +
+

Header Item

+

A menu may have a header to help label sections of a menu.

+
+
+ + Communities +
+
+ College +
+ Baseball + Basketball + Golf +
+
+ + Dance + + + Aerobics + +
+ + Cities +
+ + New York + + + Montreal + + + Los Angeles + + + San Francisco + +
+ + Months +
+ + August + + + June + +
+
+ +
+

Text Item

+

A menu may have a simple text item.

+
+

Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text

+
+
+
Current Offer Exclusive
+
+

Join now and save $10 on a pro membership!

+
+
+
+ + +
+

Link Item

+

A menu may contain a link item, or an item formatted as if it is a link.

+ +
+

Items that are anchor tags will automatically be formatted as a link.

+
+
+ + Visit Google + +
+ Javascript Link +
+
+
+ +
+

Dropdown Item

+

An item may contain a nested menu in a dropdown.

+
+

Dropdowns use UI dropdown elements. To have a dropdown open without javascript, use the simple variation

+
+
+
+ Categories +
+ Electronics + Automotive + Home +
+
+
+
+
+

Menu

+

A menu may contain another menu group in the same level as menu items.

+
+ Browse + Submit +
+ Sign Up + Help +
+
+
+ +
+

Nested Menu

+

A menu item may contain another menu nested inside that acts as a grouped sub-menu.

+
+ Friends +
+ Your Profile +
+ Inbox + Activity + Groups +
+
+
+
+ + +

States

+ +
+

Hover

+

A menu item can be hovered

+
Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.
+
+
+ Link +
+
+
+ + +
+

Down

+

A menu item can be pressed in

+
+
+ Link +
+
+
+ +
+

Active

+

A menu item can be active

+
+
+ Link +
+
+
+ + +

Variations

+ +

Menu

+
+

Inverted

+

A menu may have its colors inverted to show greater contrast

+
+ + Home + + + Messages + + + Browse + +
+
+
+

Colors

+

Additional colors can be specified.

+
+ + Green + + + Red + + + Blue + + + Orange + + + Purple + + + Teal + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+

These colors can also be inverted

+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+
+ + Home + + + Messages + + + Browse + +
+
+ + +
+

Icons

+

A menu may have just icons

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

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

Icons

+

A menu may have labeled icons

+
+ + + Mail + + + + Lab + + + + Favorites + +
+

+
+ + + Mail + + + + Lab + + + + Favorites + +
+
+ + +
+

Fluid

+

A vertical menu may take the size of its container. (A horizontal menu does this by default)

+
+ Run + Walk + Bike +
+
+ +
+

Evenly sized items

+

A menu may divide its items evenly

+
+ Buy + Sell + Rent +
+
+ +
+

A vertical menu can point to content adjacent to itself to show ownership

+
+
+ Site Title +
+
+ Current section +
+
+ Grouped Section +
+ Subsection 1 + Subsection 1 + Subsection 1 +
+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+ + +
+

Attached

+

A menu may be attached to other content segments

+
+
+ Site Title +
+
+ Current section +
+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+
+ There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. +
+
+ +
+

Horizontal Sizes

+

A horizontal menu can vary in size

+
+
+ Site Title +
+
+ Current section +
+
+ Another section +
+
+

+
+
+ Site Title +
+
+ Current section +
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+
+

A vertical menu can also vary in size

+
+
+ Site Title +
+
+ Current section +
+
+ Grouped Section +
+ Subsection 1 + Subsection 1 + Subsection 1 +
+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+

+
+
+ Site Title +
+
+ Current section +
+
+ Grouped Section +
+ Subsection 1 + Subsection 1 + Subsection 1 +
+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+ +

Items

+ +
+

Fitted

+

A menu item or menu might be fitted to remove element padding

+
+
+ No vertical padding +
+
+ No padding at all +
+
+
+ + +
+

Borderless

+

A menu item or menu might might have no dividers

+
+
+ Previous +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ Next +
+
+
+ + +
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/message.html b/node/src/documents/collections/message.html new file mode 100755 index 000000000..abb016ebe --- /dev/null +++ b/node/src/documents/collections/message.html @@ -0,0 +1,241 @@ +--- +layout : 'default' +css : 'text' + +title : 'Message' +type : 'UI Collection' +--- + +
+
+

Message

+

Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.

+
+
+
+ +
+
+ Standard + States + Variations +
+
+ +

Standard

+ +
+

Text Block

+

A basic message

+
+
+ Welcome back! +
+

+ It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too. +

+

+ Perhaps we can talk about it if you have the time. +

+
+
+ +
+

List Block

+

A message with a list

+
+
+ Welcome back! +
+
    +
  • It's good to see you again.
    • +
  • Did you know it's been a while?
    • +
+
+
+ + +
+

Dismissable Block

+

A message that the user can choose to hide

+
+ +
+ Welcome back! +
+
    +
  • It's good to see you again.
    • +
  • Did you know it's been a while?
    • +
+
+
+ + +

States

+ +

Hidden

+

Text Blocks can be hidden

+ + +
+

Visible

+

Text Blocks can be set to visible if they need to force themselves to be shown.

+
+

You can always see me

+
+
+ +

Variations

+ +
+

Icon

+

A message can contain an icon.

+
+ +
+
+ Have you heard about our mailing list? +
+

Get all the best inventions in your e-mail every day. Sign up now!

+
+
+
+ +
+

Compact

+

A message that only takes up the width of its content.

+
+

Get all the best inventions in your e-mail every day. Sign up now!

+
+
+ +
+

Attached

+

A message can be formatted to attach itself to content

+
+
+ Have you heard about our mailing list? +
+

Get all the best inventions in your e-mail every day. Sign up now!

+
+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ Are you sure you know what you're doing? +
+
+
+

Colored

+

A message can be formatted to be different colors

+
Red
+
Blue
+
Green
+
Yellow
+
+ + +
+

Warning

+

A message may be formatted to display warning messages.

+
+ +
+ You must register before you can do that! +
+ Visit our registration page, then try again +
+
+ +
+

Info

+

A message may be formatted to display information.

+
+ +
+ Was this what you wanted? +
+
    +
  • It's good to see you again.
    • +
  • Did you know it's been a while?
    • +
+
+
+ +
+

Success

+

A message may be formatted to display a success message.

+
+ +
+ Congratulations, you are now a member! +
+
+
+ +
+

Error

+

A message may be formatted to display errors.

+
+ +
+ Was this what you wanted? +
+
    +
  • It's good to see you again.
    • +
  • Did you know it's been a while?
    • +
+
+
+ +
+

Sizes

+

A message can have different sizes

+
+ This is a very small message. +
+
+ This is large +
+
+ This is huge +
+
+ This is massive +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html new file mode 100755 index 000000000..91abcbbb9 --- /dev/null +++ b/node/src/documents/collections/table.html @@ -0,0 +1,599 @@ +--- +layout : 'default' +css : 'table' + +title : 'Table' +type : 'UI Collection' +--- + + + +
+
+

Tables

+

Tables display collections of data grouped into rows.

+
+
+
+ +
+
+ Standard + States + Variations +
+
+ +

Standard

+
+

Table

+

A standard table

+
+

This example uses a ui segment and to add padding and a background color. This is not required.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
+
Add User
+
+
+ +

States

+ +
+

Positive / Negative

+

A cell may let a user know whether a value is good or bad:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy ApprovedNone
JamieUnknown Requires call
JillUnknownNone
+
+ +

Cells

+
+

Error

+

A cell or row may alert the user to an error or a negative value:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
No Name SpecifiedApprovedNone
JimmyCannot pull dataNone
JamieApproved Classified
JillApprovedNone
+
+ +
+

Warning

+

A cell or row may warn a user:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
No Name SpecifiedUnknownNone
Jimmy Requires ActionNone
JamieUnknown Hostile
JillUnknownNone
+
+ +
+

Active

+

A cell or row can be active:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
+
+
+

Disabled

+

A cell can be disabled:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JamieApprovedRequires call
JohnSelectedNone
JamieApprovedRequires call
JillApprovedNone
+ +
+ +

Variations

+ +
+

Table

+

A basic table

+ + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
+
+ + +
+

Even Width

+

A table can specify its column count to divide its content evenly

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusAgeGenderNotes
JohnApproved22MaleNone
JamieApproved32MaleRequires call
JillDenied22FemaleNone
3 People2 Approved
+
+ + +
+

Collapsing

+

By default tables take the size of their container. A collapsing takes up only as much space as its rows.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+ + +
+

Inverted

+

A tables colors can be inverted

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+ +
+

Cells

+

A table may be divided each row into separate cells

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+ +
+

Sortable

+

A table may allow a user to sort contents by clicking on a table header.

+ +

Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnNo ActionNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+
+

Padded

+

A table may sometimes need to be more padded for legibility

+ + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
JamieApprovedJamie was not interested in purchasing our product.
+
+
+

Compact

+

A table may sometimes need to be more compact to make more rows visible at a time

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
JohnApprovedNone
JamieApprovedRequires call
+
+ +
+

Size

+

A table can also be small or large

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+
+

Large

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+
+ + + \ No newline at end of file diff --git a/node/src/documents/download.html b/node/src/documents/download.html new file mode 100755 index 000000000..d18441254 --- /dev/null +++ b/node/src/documents/download.html @@ -0,0 +1,20 @@ +--- +layout : 'default' +css : 'download' + +title : 'Download' +type : 'Library' +--- +
+
+

Download

+

Download semantic

+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/node/src/documents/element.html b/node/src/documents/element.html new file mode 100755 index 000000000..5365b86b4 --- /dev/null +++ b/node/src/documents/element.html @@ -0,0 +1,222 @@ +--- +layout : 'default' +css : 'element' + +title : 'UI Elements' +type : 'Semantic' +--- + +
+
+

UI Element

+

UI elements are the basic building blocks of a website. They help to structure content so that information, and possible user interactions on a website are more intuitive.

+
+
+
+ +
+
+ Definition + Types +
+
+

Definition

+

UI Elements are the smallest useful unit for describing page content, and do not contain other elements inside themselves.

+ +

Plurality

+

Element usually exist by themselves, but they my also be grouped together with other elements of their kind. This forms a plural definition of an element.

+

The look and feel of the plural may change to show a relationship, and plural definitions can often share many of the same variations as singular definitions.

+ +
+

Groups

+

The plural of button is "buttons" a button wrapped inside "buttons" will automatically apply styling appropriate for a group. Many button variations can be used on plural definitions just like they would be used in singular.

+

For example, in this case each button will be large because we understand it is a part of the large button group, but the continue button has its own variations applied as well.

+
+
+
Cancel
+
Continue
+
+
+
+
+
Cancel
+
Continue
+
+
+
+ +

Types

+ +
+ +
+
+
+ Follow +
+

+
+
+
+
+
+
+
+ Button +

A button indicates a possible user action.

+
+
+
+
+

+ Section 2 +
The second section of the website
+

+
+
+ Header +

Headers provide a short summary of content

+
+
+
+
+
+
+
+
+
+ Progress Bar +

A progress bar displays progress on a task

+
+
+
+
+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

+
+
+
+ Segment +

A segment is used to create a grouping of related content.

+
+
+
+
+
+
+ First +
+
+ Second +
+
+ Third +
+
+ Last +
+
+
+
+ Step +

Steps show the current activity in a series of steps.

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Icon +

An icon is a glyph used to represent another concept more simply

+
+
+
+
+
+
+ Label +

Labels give descriptions to sections of content.

+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html new file mode 100755 index 000000000..31e210512 --- /dev/null +++ b/node/src/documents/elements/button.html @@ -0,0 +1,317 @@ +--- +layout : 'default' +css : 'button' +title : 'Button' +type : 'UI Element' +--- + + +
+
+

+ Button +
Buttons indicate a possible user action.
+

+
+
+
+ +
+
+ Types + States + Variations + Groups +
+
+

Standard

+ +
+

Basic:

+

A standard button

+
Follow
+
+ +
+

Icon

+

Icon only button

+
+ +
+
+ +
+

Labeled Icon

+

An icon and a label

+
+ Pause +
+
+ + +

States

+ +
+

Hover

+

Changes when a user moves their cursor over it

+
Follow
+
+ +
+

Down

+

Changes when pressed using touch or mouse events

+
Follow
+
+ +
+

Active

+

Changes to show it is currently the selected user action

+
Follow
+
+ +
+

Disabled

+

Changes to show it is currently unable to be interacted with

+
Followed
+
+ +
+

Loading

+

Can show a loading indicator:

+
Loading Button
+
+ +
+

Success

+

Can alert to a succesful action:

+
+ Follow User +
+
+
+

Error

+

Can alert user of an error:

+
+ + Follow User +
+
+ +

Variations

+ +
+

Ordinality

+

A button can be formatted to appear more or less noticable

+
Add Friend
+
Change Language
+
Secondary
+
Secondary
+
+
+

Tertiary

+
Tertiary
+
Tertiary
+
Tertiary
+
+ + +
+

Sizes

+

Can have different sizes:

+
+ Mini +
+
+ Tiny +
+
+ Small +
+
+ Medium +
+
+ Large +
+
+ Big +
+
+ Huge +
+
+ Massive +
+
+ + +
+

Colors

+

Can have different colors:

+ Black Button + Green BUtton + Red Button + Blue Button +

+ Purple Button + Teal Button +
+ +
+

Toggle

+

Can be formatted to toggle on and off

+
+ Vote +
+
+ +

Feedback

+
+

Can be positive or negative:

+
Positive Button
+
Negative Button
+
+ +
+

Fluid

+

Can fit parent container:

+
Fits container
+
+ +
+

Circular

+

Can be circular:

+
Rounded
+
+
+ +
+

Vertically Attached

+

Can be attached to the top or bottom of other content

+
Top
+
+
Bottom
+
+ +
+

Horizontally Attached

+

Can be attached to the left or right of other content

+
Left
+
Right
+
+ + +

Groups

+ +

Types

+ +
+

Buttons

+

Can exist together as groups

+
+
One
+
Two
+
Three
+
+
+ +
+

Conditionals

+

Groups can be separated by conditionals

+
+
Cancel
+
+
Save
+
+
+ +

Plural Variations

+

Singular variations can be applied to groups to infer all elements share the same quality

+ + + +
+

Vertical

+

Groups can be formatted to appear vertically

+
+
Top
+
Middle
+
Bottom
+
+
+ +
+

Icon

+

Groups can be formatted as icons

+
+
+
+
+
+
+ +
+

Labeled Icon

+

Groups can be formatted as labeled icons

+
+
Pause
+
Play
+
Shuffle
+
+
+ + +
+

Fluid

+

Groups can be divided evenly to fit parent

+
+
One
+
Two
+
Three
+
Four
+
Five
+
+
+ +
+

Colors

+

Groups can have a shared color

+
+
One
+
Two
+
Three
+
+
+ +
+

Ordinality

+

A button can be formatted to appear more or less noticable

+
+
One
+
Two
+
Three
+
+
+ +
+
+
One
+
Two
+
Three
+
+
+ +
+

Sizes

+

Groups can have a shared size

+
+
One
+
Two
+
Three
+
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/divider.html b/node/src/documents/elements/divider.html new file mode 100755 index 000000000..aa54c469d --- /dev/null +++ b/node/src/documents/elements/divider.html @@ -0,0 +1,132 @@ +--- +layout : 'default' +css : 'divider' +title : 'Divider' +type : 'UI Element' +--- + +
+
+

Divider

+

A divider visually segments content into separate groups

+
+
+
+ +
+
+ Types + Variations +
+
+ +

Standard

+
+

Divider

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +
+

Vertical Divider

+

A divider can segment content vertically

+
+
+
+
+ +
+ + +
+ +
+
+
+
+ +
+ + +
+ +
+
+
+
Login
+
+
+
+ Or +
+
+
+ + Sign Up +
+
+
+
+ +
+

Horizontal Divider

+

A divider can segment content horizontally

+

Retrieve Order

+
+
+ +
+ + +
+
+
Search
+
+
+ Or +
+
+ Create New Order + +
+
+

Variations

+ +
+

Inverted

+

A divider can have its colors inverted

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +
+

Fitted

+

A divider can be fitted, without any padding above or below it.

+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. +
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. +
+
+ +
+

Clearing

+

A divider can clear the contents above it

+
+

Left Header

+

Right Header

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/header.html b/node/src/documents/elements/header.html new file mode 100755 index 000000000..c08a98754 --- /dev/null +++ b/node/src/documents/elements/header.html @@ -0,0 +1,301 @@ +--- +layout : 'default' +css : 'header' +title : 'Header' +type : 'UI Element' +--- +
+
+

Header

+

Headers provide a short summary of content

+
+
+
+ +
+
+ Types + States + Variations +
+
+

Types

+ +
+

Header

+

A simple header

+
+

+ Account Settings +

+

Welcome to your account settings, here you can change your e-mail preferences and other settings related to your account. If you have any issues with your account please feel free to e-mail us at mail@mail.com. Thanks and have a wonderful day

+
+
+ +
+

Descriptive Headers

+

Headers may have sub headers containing further context to the section

+ +
+

+ Account Settings +
Manage your account settings and set e-mail preferences.
+

+

Welcome to your account settings, here you can change your e-mail preferences and other settings related to your account. If you have any issues with your account please feel free to e-mail us at mail@mail.com. Thanks and have a wonderful day

+
+
+ +
+

Page Headings

+

Headers may be oriented to give the heirarchy of a section in the context of the page

+
+

First header

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Second header

+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+

Third header

+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Fourth header

+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
Fifth header
+

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
+
+ Base Font + Base Font +
+
+ +
+

Content Headings

+

Headers may be oriented to give the importance of a section in the context of the content that surrounds it

+
+
Huge Header
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
Large Header
+

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

+
Medium Header
+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+
Small Header
+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
Tiny Header
+

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

+
+
+ Base Font + Base Font +
+
+ +

States

+ +
+

Disabled

+

A header can show that it is inactive

+
+ Disabled Header +
+
+ +

Variations

+ +
+

Icon

+

A header can be formatted to emphasize an icon

+
+ Questions +
Have any questions? Contact Us +
+
+ +
+

Attached

+

A header can be attached to other content

+

+ Sign Up For Our Site +

+
+

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

+

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

+
+

+ Thanks +

+
+ +
+

Floating

+

A header can sit to the left or right of other content

+
+

+ Go Forward +

+

+ Go Back +

+
+
+
+

Text Alignment

+

A header can have its text aligned to a side

+
+

+ Right +

+

+ Left +

+

+ Center +

+
+
+ +
+

Colors

+

A header can be formatted with different colors

+
+ Black +
+
+ Blue +
+
+ Red +
+
+ Green +
+
+ Purple +
+
+ Teal +
+
+ +
+

Dividing

+

A header can be formatted to divide itself from the content below it

+
+ Black +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Blue +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Red +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Green +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Purple +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Teal +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+ + +
+

Block

+

A header can be formatted to create a block

+
+ Black +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Blue +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Red +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Green +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Purple +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +
+ Teal +
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+

+ Black +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

+ Blue +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

+ Red +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

+ Green +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

+ Purple +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+ +

+ Teal +

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+ + +
+

Inverted

+

A header can have its colors inverted for contrast

+
+ Black +
+
+ Blue +
+
+ Red +
+
+ Green +
+
+ Purple +
+
+ Teal +
+
+ +
\ No newline at end of file diff --git a/node/src/documents/elements/icon.html b/node/src/documents/elements/icon.html new file mode 100755 index 000000000..1cd0a5d95 --- /dev/null +++ b/node/src/documents/elements/icon.html @@ -0,0 +1,289 @@ +--- +layout : 'default' +css : 'icon' +title : 'Icon' +type : 'UI Element' +--- + +
+
+

Icon

+

An icon is a glyph used to represent another concept more simply.

+
+
+
+ +
+
+ Standard + States + Variations +
+
+ +

Standard

+ +

Icon Set

+

Icon sets contain an arbitrary number of icons

+
+ Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text. +
+ + +
+
+ This icon set was built using a custom combination of fonts using the amazing web tool Fontello +
+ +

Content

+
+
Attachment
+
Barcode
+
Bookmark
+
Cart
+
Chart
+
Bar chart
+
Pie chart
+
Date
+
Doc
+
Docs
+
Email
+
Folder
+
Open folder
+
Home
+
Mail
+
Photo
+
Photos
+
Search
+
Setting
+
Settings
+
Tag
+
Tags
+
Time
+
Top list
+
Trash
+
Community
+
URL
+
User
+
Users
+
Chat
+
+
+
+

Special Content

+
+
Trophy
+
Cloud
+
Flight
+
Gift
+
Dollar
+
Lab
+
RSS
+
+
+ +
+

User Actions

+
+
Add User
+
Block
+
Hide
+
Unhide
+
Lock
+
Unlock
+
Flag
+
Cancel
+
Close
+
Delete
+
Check
+
Edit
+
Open
+
Export
+
Forward
+
Upload
+
Like
+
Dislike
+
Pin
+
Star
+
Empty Star
+
Half Star
+
Print
+
Comment
+
+
+ +
+

View

+
+
Content
+
Grid Layout
+
Block Layout
+
List Layout
> +
Resize Full
+
Resize Horizontal
+
Resize Small
+
Resize Vertical
+
Zoom in
+
Zoom out
+
+
+
+

Media Actions

+
+
Eject
+
Fast-forward
+
Pause
+
Play
+
To-start
+
To-end
+
Forward
+
Shuffle
+
Clockwise
+
Counter clockwise
+
+
+
+

Objects

+
+
Book
+
Calendar
+
Color
+
Desk globe
+
Fire
+
Globe
+
Headphones
+
Id
+
Idea
+
Lightning
+
Money
+
Paint
+
+
+ + +
+

Indications

+
+
Cancel Circle
+
Asterisk
+
Attention Circle
+
Attention
+
Empty Heart
+
Heart
+
Thumbs Down
+
Thumbs Up
+
Terminal
+
Direction
+ +
Location
+
Help
+
Info
+
Mic
+
Off
+ +
Add
+
+
+ +
+

Symbols

+
+
Left Open
+
Left Triangle
+
Left
+
Right
+
Right Triangle
+
Right Arrow
+
Up
+
Up Triangle
+
Up Arrow
+
Down Arrow
+
Down Triangle
+
Down Arrow
+
Cube
+
Minus
+
Plus
+
+
+ +
+

Social

+
+
Facebook
+
Twitter
+
Github
+
+
+ +

States

+ +
+

Disabled

+

An icon can show that it is disabled

+ +
+ +

Variations

+ +
+

Size

+

An icon can vary in size

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

Link

+

An icon can be formatted as a link

+ +
+ +
+ + +
+

Circular

+

An icon can be formatted to appear circular

+ +
+ +
+ + +
+

Square

+

An icon can be formatted to appear square

+ +
+ +
+

Colors

+

An icon can be formatted with different colors

+ + + + + + +
+ +
+

Inverted

+

an icon can have its colors inverted for contrast

+ + + + + + +
+ + +
\ No newline at end of file diff --git a/node/src/documents/elements/image.html b/node/src/documents/elements/image.html new file mode 100755 index 000000000..d55acaf95 --- /dev/null +++ b/node/src/documents/elements/image.html @@ -0,0 +1,125 @@ +--- +layout : 'default' +css : 'image' +title : 'Image' +type : 'UI Element' +--- + +
+
+

Image

+

An image is a graphic representation of something

+
+
+
+ +
+
+ Standard + States + Variations + Groups +
+
+ +

Standard

+
+

Image

+

An image

+
Images will, by default, take up the same size as the original image. Specifying a size will force an image to only take up a specific size.
+ +
+
+

Image Link

+

An image can be formatted to link to other content

+ + + +
+ +

States

+ +
+

Disabled

+

An image can show that it is disabled and cannot be selected

+ +
+ +

Variations

+ +
+

Avatar

+

An image may be formatted to appear inline with text as an avatar

+ Dog Doggington +
+ +
+

Rounded

+

An image may appear rounded

+ +
+ +
+

Circular

+

An image may appear circular

+ +
+ +
+

Floated

+

An image can sit to the left or right of other content

+
+ +

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

+ +

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

+ +

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

+
+
+ +
+

Sizes

+

An image may be formatted to be different sizes

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

Groups

+ +
+

Sizes

+

A group of images can be formatted to have the same size.

+
+ + + + +
+
+
+
+ + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/input.html b/node/src/documents/elements/input.html new file mode 100755 index 000000000..8045f0291 --- /dev/null +++ b/node/src/documents/elements/input.html @@ -0,0 +1,124 @@ +--- +layout : 'default' +css : 'input' +title : 'Input' +type : 'UI Element' +--- +
+
+
+
Links
+
+ Download +
+ Uncompressed + Minified + LESS +
+
+ Authoring Guide +
+

+ Input +
Inputs allow a user to enter information
+

+
+
+
+ +
+
+ Standard + States + Variations +
+
+

Standard

+ +
+

Input:

+

A standard input

+
+ +
+
+ +

States

+ +
+

Focus

+

An input field can show a user is currently interacting with it

+
+ +
+
+ +
+

Error

+

An input field can show the data contains errors

+
+ +
+
+ +

Variations

+ +
+

Icon

+

An input can be formatted with an icon

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

Labeled

+

An input can be formatted with a label

+
+ +
+ +
+
+

+
+ +
+
New
+
+
+ +
+ +
+

Action

+

An input can be formatted to alert the user to an action they may perform

+
+ +
Search
+
+
+
+
+ +
Add users
+
+
+
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html new file mode 100755 index 000000000..e6536c1c0 --- /dev/null +++ b/node/src/documents/elements/label.html @@ -0,0 +1,308 @@ +--- +layout : 'default' +css : "label" +title : 'Label' +type : 'UI Element' +--- + +
+
+

Label

+

Labels give descriptions to pieces of content.

+
+
+
+ +
+
+ Types + Variations + Groups +
+
+ +

Types

+
+

Label

+

A basic label

+
+ 23 +
+
+ +
+

Linkable Label

+

If an html link tag is used, a label will be formatted as a link

+ + Fun + +
+ +
+

Label with detail

+

A tag can optionally display a detail

+
+ Dogs +
214
+
+
+ +
+

Removable label

+

A tag can also be removable

+
+ Witty + +
+
+ +
+

Corner Label

+

A label can position itself in the corner of an element

+
A corner label must be positioned inside a container with position: relative to display properly
+
+
+ +
+
+
New
+
+ This is a normal text segment +
+
+ + + + +
New
+ + These corner labels are formatted as links +
+
+ +
+

Attached Label

+

A label attached to a content segment

+
+
+
+
+
HTML
+

This is some pretend content

+
+
+
+
+
CSS
+

This is some pretend content

+
+
+
+
+
Code
+

This is some pretend content

+
+
+
+
+
+
+
View
+

This is some pretend content

+
+
+
+
+
User View
+

This is some pretend content

+
+
+
+
+
Admin View
+

This is some pretend content

+
+
+
+
+
+ +

Variations

+
+

Colors

+

A label can have different colors

+ + First + + + Fun + + + Happy + + + Smart + + + Insane + + + Exciting + +
+ +
+

Circular

+

A label can be circular

+ + 12 + + + 11 + + + 10 + + + 64 + + + 62 + + + 1 + +
+ +
+

Floating

+

A label can float above another element

+
+ + Messages +
22
+ + + Friends +
22
+ +
+
+ + + +
+

Pointing

+

A label can point to content next to it

+
+
+ +
+ Please enter a value +
+
+
+
+
+ Please enter a value +
+ +
+
+
+ +
+ That name is taken! +
+
+
+
+
+ Your password must be 6 characters or more +
+ +
+
+
+ +
+

Size

+

A label can be small or large

+
+ Fun +
+

+
+ Fun +
+
+ +

Groups

+ +
+

Size

+

Labels can share sizes together

+
+
+ Fun +
+
+ Happy +
+
+ Smart +
+
+ Witty +
+
+
+
+

Colors

+

Labels can share colors together

+
+ + Fun + + + Happy +
22
+ + + Smart + + + Insane + + + Exciting + +
+
+ +
+

Circular

+

Labels can share shapes

+
+ + 11 + + + 22 + + + 33 + + + 44 + + + 141 + +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/loader.html b/node/src/documents/elements/loader.html new file mode 100755 index 000000000..3708cd448 --- /dev/null +++ b/node/src/documents/elements/loader.html @@ -0,0 +1,135 @@ +--- +layout : 'default' +css : 'loader' +title : 'Loader' +type : 'UI Element' +--- + +
+
+

Loader

+

Loaders lets a user know to wait for activity to finish.

+
+
+
+ +
+
+ Standard + States + Variations +
+
+ +

Standard

+
+

Loader

+

A loader

+
Loaders by default are hidden unless inside of a dimmer.
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+
+ +
+

Text Loader

+

Text loader

+
If the text for a loader is larger than the size of a loader it might need to have its margins manually adjusted to center itself precisely.
+
+
+
Loading
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
If the text for a loader is larger than the size of a loader it might need to have its margins manually adjusted to center itself precisely.
+
+
+
Loading
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ + +

States

+ +
+

Active

+

A loader can be active or visible

+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. +
+
+ +
+

Disabled

+

A loader can be disabled or hidden

+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. +
+
+ + +

Variations

+ +
+

Inline

+

Loaders can appear inline with content

+
+
+
+

Size

+

Loaders can have different sizes

+ +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+ +
+

Inverted

+

Loaders can have their colors inverted.

+
Loaders will automatically be inverted inside dimmers to maintain consistency
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/node/src/documents/elements/progress.html b/node/src/documents/elements/progress.html new file mode 100755 index 000000000..fce2344e5 --- /dev/null +++ b/node/src/documents/elements/progress.html @@ -0,0 +1,119 @@ +--- +layout : 'default' +css : 'progress' +title : 'Progress' +type : 'UI Element' +--- +
+
+

Progress Bar

+

Progress bars show the percent of a task complete

+
+
+
+ +
+
+ Standard + States + Variations +
+
+

Standard

+ +
+

Progress:

+

A standard progress bar

+
+
+
+
+ +

States

+ +
+

Active

+

A progress bar can show activity

+
+
+
+
+ + +
+

Successful

+

A progress bar can show success

+
+
+
+
+ +
+

Failed

+

A progress bar can show failure

+
+
+
+
+ +
+

Disabled

+

A progress bar can be disabled

+
+
+
+
+ +

Variations

+ + +
+

Attached

+

A progress bar can show progress of an element

+
+
+
+
+

La la la la

+
+
+
+
+
+ + +
+

Color

+

Can have different colors:

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

Striped

+

A progress bar can be striped

+
+
+
+
+ +
\ No newline at end of file diff --git a/node/src/documents/elements/segment.html b/node/src/documents/elements/segment.html new file mode 100755 index 000000000..f596bb8b5 --- /dev/null +++ b/node/src/documents/elements/segment.html @@ -0,0 +1,221 @@ +--- +layout : 'default' +css : 'segment' +title : 'Segment' +type : 'UI Element' +--- +
+
+

Segment

+

A segment is used to create a grouping of related content.

+
+
+
+ +
+
+ Types + States + Variations +
+
+

Types

+ +
+

Segment

+

A segment of content

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Vertical Segment

+

A vertical segment divides content vertically

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+

Horizontal Segment

+

A horizontal segment divides content horizontally

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ + +
+

Piled

+

A segment can be formatted to look like a pile of pages

+
+

A header

+

Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

+ +

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

+ +

Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.

+
+
+ +
+

Stacked

+

A segment can be formatted to show it contains multiple pages

+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+ + + +

States

+ +
+

Disabled

+

A segment may show its content is disabled +

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +

Variations

+ +
+

Inverted

+

A segment can have its colors inverted for contrast

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+ +
+

Raised

+

A segment may be formatted to raise above the page.

+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+ +
+

Colored

+

A segment can be colored

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+
+
+
+

These colors can be inverted

+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +
+

Ordinality

+

A segment can be formatted to appear more or less noticable

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+

I am pretty noticable but you might check out other content before you look at me.

+
+
+

If you notice me you must be looking very hard.

+
+
+
+

Inverted colors may also be more or less noticable

+
+

I'm here to tell you something, and you will probably read me first.

+
+
+

I am pretty noticable but you might check out other content before you look at me.

+
+
+

If you notice me you must be looking very hard.

+
+
+
+
+

I'm here to tell you something, and you will probably read me first.

+
+
+

I am pretty noticable but you might check out other content before you look at me.

+
+
+

If you notice me you must be looking very hard.

+
+
+ +
+

Floated

+

A segment cant sit to the left or right of other content

+
+

This segment will appear to the right +

+
+ This segment will appear to the left +
+
+ +
+

Text Alignment

+

A segment cant have its text aligned to a side

+
+ Right +
+
+ Left +
+
+ Center +
+
+ +
+

Basic

+

A basic segment has no special formatting

+
+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+
+

Attached

+

A segment can be attached to other content on a page

+ +
+

This segment is on top

+
+
+

This segment is attached on both sides

+
+
+

This segment is on bottom

+
+
+ + +
\ No newline at end of file diff --git a/node/src/documents/elements/step.html b/node/src/documents/elements/step.html new file mode 100755 index 000000000..5eae1d154 --- /dev/null +++ b/node/src/documents/elements/step.html @@ -0,0 +1,139 @@ +--- +layout : 'default' +css : 'steps' +title : 'Step' +type : 'UI Element' +--- + +
+
+

Step

+

Steps show the current activity in a series of steps.

+
+
+
+ +
+
+ Element + Groups + States + Variations +
+
+ +

Standard

+
+

Step

+

A step

+
+
+ Shipping +
+
+
+ +

Groups

+
+

Steps

+

A set of step

+
+
+ Shipping +
+
+ Billing +
+
+ Confirm Order +
+
+ Complete +
+
+
+ +

States

+ +
+

Active

+

A step can be highlighted as active

+
+
+ Billing +
+
+
+ +
+

Disabled

+

A step can show that it cannot be selected

+
+
+ Billing +
+
+
+ +

Variations

+ +
+

Size

+

Steps can have different sizes

+ +
+
+ Shipping +
+
+ Billing +
+
+ Confirm Order +
+
+ Complete +
+
+

+
+
+ Shipping +
+
+ Billing +
+
+ Confirm Order +
+
+ Complete +
+
+
+ + +
+

Step

+

Steps can be divided evenly inside their parent

+
+
+ Shipping +
+
+ Billing +
+
+ Confirm Order +
+
+ Complete +
+
+
+ + +
+ + + \ No newline at end of file diff --git a/node/src/documents/index.html b/node/src/documents/index.html index 64fdf2df3..c0d95c229 100755 --- a/node/src/documents/index.html +++ b/node/src/documents/index.html @@ -17,47 +17,45 @@ type : 'Semantic'
-
-
-
- Code -
-
-
-
- View -
+
+

diff --git a/node/src/documents/intro/authoring.html b/node/src/documents/intro/authoring.html new file mode 100755 index 000000000..37f36930c --- /dev/null +++ b/node/src/documents/intro/authoring.html @@ -0,0 +1,52 @@ + --- +layout : 'default' +css : 'guide' + +title : 'Authoring UI' +type : 'UI Introduction' +--- +
+
+

Writing a Component

+
+
+
+ + +

Creating an Element

+ +

Semantic defines five categories of elements, each type of element has different definition requirements

+ +
    +
  • Element - a basic building block of a website, exists alone or in homogenous groups
    • +
  • Colleciton - a group of several elements which are usually found together
    • +
  • Module - an element where its behavior is included as part of its definition
    • +
  • Behavior - a definition of behavior that exists without any physical description
    • +
  • View - a way to present specific website content
    • +
+ +Creating Components +===================================== + +The first step after deciding what type of element you are creating is writing a spec file, these allow you to define the language for describing your interface element before beginning to write a component. The spec file can be used to generate a css and javascript stub which will give you a starting point for writing your component. Spec files content varies depending on which of the five UI types are being defined. + +Here's an example spec file for a ui element button. You can read more about creating spec files + + + +After creating a spec file you can use semantic to generate ui components. Simply specify a package name and json spec file. + + semantic generate awesome button.json + +This will create a stub css (and possibly js) file in ui/element with your definition. This will also create a stub html file in docs/, this is the visual representation of your element definition, and will appear unformatted until you begin to create your css. + +As you edit each css definition to create the look and feel of your element, you can refresh this page to verify each element appears properly. After you finish writing your UI component, if you would like to register your package to be used by others. No need to package anything up, simply type + +semantic register awesome button + +Assuming your package name is not taken, your buttons will now be available on semantic. + + + + +
\ No newline at end of file diff --git a/node/src/documents/intro/downloading.html b/node/src/documents/intro/downloading.html new file mode 100755 index 000000000..ea837cb21 --- /dev/null +++ b/node/src/documents/intro/downloading.html @@ -0,0 +1,57 @@ + --- +layout : 'default' +css : 'guide' + +title : 'Using UI' +type : 'UI Introduction' +--- +
+
+

Writing a Component

+
+
+
+ + +

Creating an Element

+ +

Semantic defines five categories of elements, each type of element has different definition requirements

+ +
    +
  • Element - a basic building block of a website, exists alone or in homogenous groups
    • +
  • Colleciton - a group of several elements which are usually found together
    • +
  • Module - an element where its behavior is included as part of its definition
    • +
  • Behavior - a definition of behavior that exists without any physical description
    • +
  • View - a way to present specific website content
    • +
+ +The first step when using semantic is to initialize a directory as using semantic +
+ semantic init +
+This will create a directory, by default, 'ui' which will hold all your element definitions. + +After initializing semantic, you may install other registered components. Each semantic component uses a css classname as a namespace. This namespace is also the name of the package on semantic. To search for a button for example, you could use the following command. + + semantic find button + +Multiple packages will appear showing possible buttons available to download. + + There are four button packages: + + 1) Fancy: A set of rounded buttons (3 types, 22 variations) + 2) Loadr: A set of buttons with expandable loaders (1 type, 10 variations) + 3) Bootstrap: Classic bootstrap buttons (2 types, 10 variations) + 4) Semantic: Semantic UI buttons (4 types, 20 variations) + +Each package that uses the button namespace also contains a name. Use this to specify what type of element you want to install. + + semantic install semantic button + +This will install semantic's core button library. Inside your ui directory, this will also generate a new file inside ui/docs, which will include an overview of the element. + +To use a button on your page, simple link to the css and js of an element + + + +
\ No newline at end of file diff --git a/node/src/documents/intro/getting-started.html b/node/src/documents/intro/getting-started.html new file mode 100755 index 000000000..f057bb554 --- /dev/null +++ b/node/src/documents/intro/getting-started.html @@ -0,0 +1,134 @@ + --- +layout : 'default' +css : 'guide' + +title : ' Getting Started' +type : 'UI Introduction' +--- +
+
+

Getting Started

+
+
+
+ +
+
+ Installing + Usage + Why Use Semantic? +
+
+ +

Installing

+

Semantic uses an eponymous package manager written in node. To begin you must install nodejs and npm for your platform.

+ +

After these dependencies are ready to go, you can install semantic using npm +

+ npm install -g semantic +
+ +

Usage

+ +

Components are given a namespace. This makes sure the css rules dont interfere with other rules on your page.

+
+ semantic add button +
+
+
Button
+
+
+ .ui.button { + font-size: 14px; + } +
+ +

If multiple components are available of the same type, you can specify which one to use by adding the package's name before. A package name is different than its namespace, for example there may be many types of buttons.

+
+ semantic search button + >> 2 buttons were found: + >> fancy button - a collection of buttons formatted for a blog - 15 variations, 3 types + >> semantic button - the official button collection of semantic - 10 variations, 5 types +
+ +

Components will download inside a directory. To use these components, simply link to their javascript and css in a web page

+
+ +
+ +

So I downloaded a component, now what?

+ +

Semantic components are self documenting, that means documentation are generated automatically after you download. You can see the element and code samples by simply opening up the corresponding html file. +

+ /ui/specification/button.html +
+ +

You can view an example of an element definition by checking out the docs for semantic's first party button definition

+ + View button definition + + +
+ +

Why Use Semantic?

+ +

+ Semantic sees website development as the coallescence of two things: Re-usable UI Components + Discardable Page Glue +

+

Semantic is a framework for writing portable UI components, which helps you and others re-use and re-skin your ui elements in their projects.

+ +

Definitions and Language

+ +

Natural language is particularly good at describing visual scenes, i.e. dogs, trees, flowers and hard at defining abstractions: behavior, emotions, etc. Where programming languages are particularly good at describing behavior, but can be more obtuse at describing layouts.

+ +

Semantic adopts concepts from natural languages like: plurals, adjectives, and tense so web developers can enjoy some of the more useful features of natural language. Semantic also aspires for developers to make decision based on common usage instead of deciding arbitrarily how to name things.

+ +

For example if a developer wants to include a set of red buttons with icons on a page he can simple grab the semantic button and icon component:

+ +
+ semantic add button + semantic add icon +
+ + and then include in html: +
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +

Authoring

+ +

Creating a component in semantic requires two steps: +

    +
  1. Defining how your element can look.
    2. +
  2. Writing code to match your definitions
    3. +
+

These steps can be completed in either order. If you enjoy Test-Driven-Development, you can write your specification before coding, or if you prefer a more ad-hoc approach you can swap the order, defining your element only after you finish describing it.

+ +

Consuming

+

Semantic is a package manager, created by other people is a simple process

+
    +
  1. Search semantic for a type of UI component
    2. +
  2. Open up its specification to see what it can do and how to use it.
    3. +
+ + Semantic components are self documenting, giving you the ability to download a component, and get working immediately. Each component contains a spec file, which describes what a component can do. This is used to generate documentation automatically that lives alongside your project, making sure you know exactly what exists in your CSS.

+ + + +
\ No newline at end of file diff --git a/node/src/documents/module.html b/node/src/documents/module.html new file mode 100755 index 000000000..1d88d3494 --- /dev/null +++ b/node/src/documents/module.html @@ -0,0 +1,111 @@ +--- +layout : 'default' +css : 'module' + +title : 'UI Modules' +type : 'Semantic' +--- + +
+
+

UI Modules

+

UI modules are interface elements whose behavior is an essential part of their definition.

+
+
+
+ +
+
+ Types + Usage +
+
+ +

Types

+ +

Usage

+ + +

Settings

+

Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins. + +

Common Settings

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUsage
moduleNameName used in debug logs to differentiate this widget from other debug statements.
debugProvides standard debug output to console.
performanceProvides performance logging to console of internal method calls.
verboseProvides extra debug output to console
namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
selectorsAn object containing all selectors used in the module, these are usually children of the module.
classNamesAn object containing all classnames used in the module.
errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements. +
+ +

Changing Settings

+
    +
  1. A settings object can be passed in when initializing the plugin +
    +
    + $('.foo') + .module({ + moduleName: 'Godzilla', + verbose: true + }) + ; +
    +
    2. +
  2. Default settings for the module can be overridden by modifying $.fn.module.settings. +
    $.fn.module.settings.moduleName = 'Godzilla';
    +
    3. +
  3. Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. +
    +
    + $('.foo') + // lets initialize that! + .module() + // oh wait forgot something + .module('setting', 'moduleName', 'Godzilla') + ; +
    +
    4. +
+

Reading Settings

+

Settings can also be read programmatically: +

+ $('.foo').module('setting', 'moduleName'); + // outputs godzilla +
+
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/accordion.html b/node/src/documents/modules/accordion.html new file mode 100755 index 000000000..d286fb199 --- /dev/null +++ b/node/src/documents/modules/accordion.html @@ -0,0 +1,263 @@ +--- +layout : 'default' +css : 'accordion' + +title : 'Accordion' +type : 'UI Module' +--- + + + + + +
+
+

Accordion

+

An accordion displays a single piece of content, while allowing the option of displaying other content.

+
+
+
+ +
+
+ Standard + Examples + Variations + Usage +
+
+ +

Standard

+
+

Accordion

+

A standard accordion

+
+
What is a dog?
+
+

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

+
+
What kinds of dogs are there?
+
+

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+
+
How do you acquire a dog?
+
+

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

+

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
+
+ +
+

Examples

+ +
+

Form

+

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

+
+
+
+ + +
+
+ + +
+
+
+ Optional Details + +
+
+
+ + +
+
+
+
+ +

Variations

+ +
+

Basic

+

A basic accordion does not add any extra formatting

+
+
+ What is a dog? + +
+
+

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

+
+
+ What kinds of dogs are there? + +
+
+

There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.

+
+
+ How do you acquire a dog? + +
+
+

Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.

+

A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.

+
+
+
+ +

Usage

+ +

Initializing an accordion

+
+ $('.ui.accordion') + .accordion() + ; +
+ + +

Settings

+ + + + + + + + + + + + + + + + +
Accordion Settings
exclusivetrueSet to false to allow multiple sections to be open at the same time
collapsibletrueSet to false to require an accordion to always have a section open
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onOpenNoneCallback after a accordion section is opened.
onCloseNoneCallback after a accordion section is closed.
onChangeNoneCallback after a accordion section is changed.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNameAccordionName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + method : 'The method you called is not defined.' + } +
+
+
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/carousel.html b/node/src/documents/modules/carousel.html new file mode 100755 index 000000000..86da52de6 --- /dev/null +++ b/node/src/documents/modules/carousel.html @@ -0,0 +1,160 @@ +--- +layout : 'default' +css : 'carousel' + +title : 'Carousel' +type : 'UI Module' +--- + + +
+
+

Carousel

+
Incomplete
+

A carousel alternates display between several pieces of content in sequence.

+
+
+
+ +
+
+ Standard + Variations + Behavior + Examples + Usage +
+
+ +

Standard

+
+

Carousel

+

A standard carousel

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

Usage

+ +

Initializing

+

Initializing a carousel

+
+ $('.ui.carousel') + .carousel() + ; +
+ +

Settings

+ + + + + + + + + + + + + + + + +
Carousel Settings
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onChangeNoneCallback after a carousel is either disabled or enabled.
onEnableNoneCallback after a carousel is enabled.
onDisableNoneCallback after a carousel is disabled.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNameCarouselName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespacecarouselEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + method : 'The method you called is not defined.' + } +
+
+
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html new file mode 100755 index 000000000..09fd6a22f --- /dev/null +++ b/node/src/documents/modules/checkbox.html @@ -0,0 +1,353 @@ +--- +layout : 'default' +css : 'checkbox' + +title : 'Checkbox' +type : 'UI Module' +--- + + +
+
+

Checkbox

+

A checkbox is a ui module which indicates a user's selection of a choice.

+
+
+
+ +
+
+ Standard + Variations + Behavior + Examples + Usage +
+
+ +

Standard

+ +
+

Check Box

+

A standard checkbox

+ +
Javascript
+
+ $('.ui.checkbox') + .checkbox() + ; +
+
HTML
+
+
+
+ +
+
+ +
+
+ +
+ +
+

Static Check Box

+

A checkbox can function without javascript

+
HTML Only
+
+
+
+ + +
+ +
+
+
+ +
+

Form Checkbox

+

A checkbox can be found inside a form

+
+
+ + +
+
+
+ +
+
+ +
+
Submit
+
+
+ +

Variations

+ +
+

Radio Box

+

A checkbox can be formatted as a radio element. This means it is an exclusive option.

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

Size

+

A checkbox can be a different size.

+

+
+ + +
+ Add a pro membership +

+

+

+
+ + +
+ Signup for our mailing list +

+
+ +

Behavior

+ +
+

A checkbox can change to show a user has selected it

+
+ $('.ui.checkbox') + .checkbox('enable') + ; +
+
+
+

A checkbox can change to show a user has not selected it

+
+ $('.ui.checkbox') + .checkbox('disable') + ; +
+
+
+

A checkbox can toggle between states

+
+ $('.ui.checkbox') + .checkbox('toggle') + ; +
+
+ +

Examples

+ +
+

Example of using checkbox states to alter multiple checkboxes

+
+ $('.enable.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('enable') + ; + }) + ; + $('.disable.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('disable') + ; + }) + ; + $('.toggle.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('toggle') + ; + }) + ; +
+
+
Enable
+
Disable
+
Toggle
+
+

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

Usage

+ +

Initializing

+

Initializing a check box

+
+ $('.ui.checkbox') + .checkbox() + ; +
+ +

Settings

+ + + + + + + + + + + + + + + + +
Checkbox Settings
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onChangeNoneCallback after a checkbox is either disabled or enabled.
onEnableNoneCallback after a checkbox is enabled.
onDisableNoneCallback after a checkbox is disabled.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNameCheckboxName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + method : 'The method you called is not defined.' + } +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/dimmer.html b/node/src/documents/modules/dimmer.html new file mode 100755 index 000000000..59e8ceee2 --- /dev/null +++ b/node/src/documents/modules/dimmer.html @@ -0,0 +1,289 @@ +--- +layout : 'default' +css : '' + +title : 'Dimmer' +type : 'UI Module' +--- + + +
+ +
+
+
+
Links
+
+ Download +
+ Uncompressed + Minified + LESS +
+
+ Authoring Guide +
+

+ Dimmer +
Dimmers focus a users attention on particular content
+

+
+
+
+ +
+
+ Usage + Standard + Behavior + States + Variations +
+
+

Usage

+ +

Initializing an popup

+
+ // can be invoked on content that needs to be dimmed + $('.ui.dimmable') + .dimmer() + ; + + // can be invoked directly on dimmer + $('.ui.dimmer') + .dimmer() + ; +
+ +

Standard

+ +
+

Dimmable

+

A dimmable section can be dimmed

+
A dimmer will automatically be inserted the first time you create a dimmer on a dimmable section
+
+

+ Dog Photos +

+ + +
+
+
+
+
+
+ +
+

Dimmer with Content

+

A dimmer can display simple messages in a content block

+
Messages that are direct descendants of a content block will be vertically centered table cell. To avoid content being stretched include it as child element.
+
+

+ Dog Photos +

+ + +
+
+
+

+ + Wait a second +
You forgot something
+

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

Page Dimmer

+

A dimmer can be formatted to be fixed to the page

+
+
Show
+
+ +
+

Stand-alone Dimmer

+

A dimmer can exist on its own without defining content that is /p> +

+

+ Dog Photos +

+ + +
+
+
+
+
+
+
+ +

Behavior

+ + +
+

Display

+

A dimmer can show or hide itself, a can show or hide a dimmer

+
+ // these two are the same + $('.ui.dimmable) + .dimmer('show') + ; + $('.ui.dimmer') + .dimmer('show') + ; + + // these two as well + $('.ui.dimmable) + .dimmer('hide') + ; + $('.ui.dimmer') + .dimmer('hide') + ; +
+
+ + +

States

+ +
+

Active

+

An active dimmer will dim its parent container

+
+
+
+
+ +
+

Disabled

+

A disabled dimmer cannot be activated

+
+
+
+
+ +

Variations

+ +

Dimmer

+
+

Simple Dimmer

+

A dimmer can be controlled without javascript

+
Having any parent element receive the class "dimmed" will trigger the dimmer to display.
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+ +
+

Inverted Dimmer

+

A dimmer can be formatted to have its colors inverted

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+
+
+ +

Settings

+ + + + + + + + + + + + + + + + +
Popup Settings
closabletrueWhether clicking on the dimmer should close it automatically
duration500Duration of dimming animation.
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onInitNoneCallback after a dimmer html is generated.
onShowNoneCallback after a dimmer section is shown.
onHideNoneCallback after a dimmer section is hidden.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNameDimmerName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespacedimmerEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + method : 'The method you called is not defined.' + } +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html new file mode 100755 index 000000000..849f1e550 --- /dev/null +++ b/node/src/documents/modules/dropdown.html @@ -0,0 +1,475 @@ +--- +layout : 'default' +css : 'dropdown' + +title : 'Dropdown' +type : 'UI Module' +--- + + + + +
+
+

Dropdown

+

A dropdown is a hidden list of selections that a user can choose to have appear.

+
+
+
+ +
+
+ Standard + Variations + States + Behavior + Usage +
+
+ +

Standard

+ +
+

Dropdown

+

The markup for a dropdown

+
+ Select + +
+
Edit
+
Remove
+
Hide
+
+
+
+ +
+

Button Dropdown

+

A button can be formatted to open a dropdown

+
+ + Settings +
+
Edit
+
Remove
+
Hide
+
+
+
+ + +
+

Combo Dropdown

+

A button group can be formatted with a dropdown

+
+
Update Post
+
+ +
+
Edit Post
+
Remove Post
+
Hide Post
+
+
+
+
+ +
+

Menu Dropdown

+

A menu element can contain a dropdown

+
+
+ + Home + + + Messages +
+
Inbox
+
Archive
+
+ + + Browse + +
+
+
Activity Feed
+
Profile
+
Events
+
+
+
+ + +
+

Select

+

A dropdown can be formatted to allow selection inside a form

+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ +
+ + +
Male
+
+
Male
+
Female
+
+
+
+
+
+ +

Variations

+
+

Fluid

+

A dropdown can take the full width of its parent

+
+ Link 1 + Link 2 +
All Sections
+
+
+ More +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+
+ +

Pointing Dropdown

+

A dropdown menu can be formatted to point to its content

+ +
+

A standard pointing dropdown

+
+
+ + Home + + + Messages +
+
Inbox
+
Archive
+
+ + + Browse + +
+
+
Activity Feed
+
Profile
+
Events
+
+
+
+
+

Top Right Pointing

+
+ + Settings +
+
Edit
+
Remove
+
Hide
+
+
+
+
+

Top Left Pointing

+
+ + Settings +
+
Edit
+
Remove
+
Hide
+
+
+
+
+

Left Pointing

+
+ +
+
Edit
+
Remove
+
Hide
+
+
+
+
+

Right Pointing

+
+ +
+
Edit
+
Remove
+
Hide
+
+
+
+ +
+

Simple

+

A dropdown can open without javascript

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+ +

States

+ +
+

Visible

+

A visible dropdown menu has its menu open

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
+
+
+
+ +
+

Disabled

+

A disabled dropdown menu will not open or close

+
+
+ Dropdown +
+
Choice 1
+
Choice 2
+
Choice 3
+
+
+
+
+ +

Behavior

+ +
+

Trigger event

+

A dropdown can trigger based on a variety of user events

+
+ // changes dropdown visibility on hover + $('.ui.dropdown') + .dropdown({ + on: 'hover' + }) + ; + // changes dropdown visibility on click + $('.ui.dropdown') + .dropdown({ + on: 'click' + }) + ; +
+
+
+

Dropdown Action

+

A dropdown can trigger different behaviors on selection

+
+ // just hides content + $('.ui.dropdown') + .dropdown({ + action: 'hide' + }) + ; + // changes text of matching text selector + $('.ui.dropdown') + .dropdown({ + action: 'changeText' + }) + ; + // changes text of matching text selector and hidden input field + $('.ui.dropdown') + .dropdown({ + action: 'form' + }) + ; + // triggers custom action + $('.ui.dropdown') + .dropdown({ + action: function() { + // custom action + } + }) + ; + // triggers a default action and a custom action + $('.ui.dropdown') + .dropdown({ + action: 'hide', + onChange: function() { + // do something + } + }) + ; +
+
+
+

Display state

+

A dropdown can show or hide itself

+
+ $('.ui.dropdown') + .dropdown('show') + ; + $('.ui.dropdown') + .dropdown('hide') + ; +
+
+
+

Toggle

+

A dropdown can toggle between states

+
+ $('.ui.dropdown') + .dropdown('toggle') + ; +
+
+ + +

Usage

+ +

Initializing a dropdown

+
+ $('.ui.dropdown') + .dropdown() + ; +
+ +

Defaults

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Dropdown Settings
onclickEvent used to trigger dropdown
gracePeriod300Time in milliseconds to allow a user to move cursor back into dropdown before hiding when on event is set to hover
animation +
+ { + show: 'slide', + hide: 'slide' + } +
+
actionhideSets a default action to occur. Possible values are 'nothing', 'form', 'changeText', 'hide'
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onChangeNoneCallback after a dropdown is either disabled or enabled, receieves name and value of selection.
onShowNoneCallback after a dropdown is shown.
onHideNoneCallback after a dropdown is hidden.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
General Settings
moduleNameDropdownName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespacedropdownEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + action : 'You called a dropdown action that was not defined', + method : 'The method you called is not defined.' + } +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/form.html b/node/src/documents/modules/form.html new file mode 100755 index 000000000..a3a82e7e4 --- /dev/null +++ b/node/src/documents/modules/form.html @@ -0,0 +1,335 @@ +--- +layout : 'default' +css : 'form' + +title : 'Validate Form' +type : 'UI Behavior' +--- + + + + +
+
+

Form Validation

+

Form validation checks user input data against a set of criteria before passing along the data to the server.

+
+
+
+ +
+
+ Usage + Settings +
+
+ +

Usage

+ +
+

Basic Validation

+

Form validation requires passing in a validation object with the rules required to validate your form.

+ +
+ $('.ui.form') + .form({ + firstName: { + identifier : 'first-name', + rules: [ + { + type : 'empty', + prompt : 'Please enter your first name' + } + ] + }, + lastName: { + identifier : 'last-name', + rules: [ + { + type : 'empty', + prompt : 'Please enter your last name' + } + ] + }, + username: { + identifier : 'username', + rules: [ + { + type : 'empty', + prompt : 'Please enter a username' + } + ] + }, + password: { + identifier : 'password', + rules: [ + { + type : 'empty', + prompt : 'Please enter a password' + }, + { + type : 'length[6]', + prompt : 'Your password must be at least 6 characters' + } + ] + } + terms: { + identifier : 'terms', + rules: [ + { + type : 'checked', + prompt : 'You must agree to the terms and conditions' + } + ] + } + }) + ; +
+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ +
+

Validation w/ Message

+

Forms that contain a ui message error block will automatically be filled in with form validation information.

+
The template for error messages can be modified by adjusting settings.template.error
+ +
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+
+
+

Custom Validation

+

Custom form validation requires passing in a validation object with the rules required to validate your form.

+
+ A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation +
+
+ $('.ui.form') + .form({ + dog: { + identifier: 'dog', + rules: [ + { + type: 'empty', + prompt: 'You must have a dog to add' + }, + { + type: 'is[fluffy dog]', + prompt: 'I only want you to add fluffy dogs!' + }, + { + type: 'not[mean]', + prompt: 'Why would you add a mean dog to the list?' + } + ] + } + }) + ; +
+
+

Let's go ahead and get you signed up.

+
+ + +
+
Add Dog
+
+
+
+ +
+

Inline Validation

+

Validation messages can also appear inline. UI Forms automatically format labels with the className prompt. These validation prompts are also set to appear on input change instead of form submission.

+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
Submit
+
+
+ +

Settings

+ +

Defaults

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Form Settings
keyboardShortcutstrueAdds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively
onclickEvent used to trigger validation. Can be either submit or change
inlineErrorfalseAdds prompt text from template on validation error
animationDuration150Fade in speed for inline prompt
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onValidNoneCallback on each valid field
onInvalidNoneCallback on each invalid field
onSuccessNoneCallback if a form is all valid
onFailureNoneCallback if any form field is invalid
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
General Settings
moduleNameFormName used in debug logs
debugFalseProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + action : 'You called a form action that was not defined', + method : 'The method you called is not defined.' + } +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/popup.html b/node/src/documents/modules/popup.html new file mode 100755 index 000000000..53e7ff2d8 --- /dev/null +++ b/node/src/documents/modules/popup.html @@ -0,0 +1,270 @@ +--- +layout : 'default' +css : 'popup' + +title : 'Popup' +type : 'UI Module' +--- + + +
+
+

Popup

+

A popup displays additional information on top of a page element.

+
+
+
+ +
+
+ Standard + Usage +
+
+ +

Standard

+
+

Popup

+

A standard popup

+ +
+ +

Variations

+ +
+

Size

+

A popup can be large or small

+ + +
+ +
+

Inverted

+

A popup can have its colors inverted

+ +
+ + +

Usage

+ +

Initializing an popup

+
+ $('.ui.popup') + .popup() + ; +
+ +

Including metadata

+

Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata

+

+ +
+
Specifying Content
+

Popups can specify content in three ways:

+

    +
  • Using html title attribute
    • +
  • Using data-content attribute
    • +
  • Using the content property in the initialization of the popup
    • +
+
+
+
+ +
+ +

Examples

+ +
+

Positioning

+

A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.

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

Title

+

A popup can be formatted with a title

+ +
+ +
+

HTML

+

A popup can be formatted with html

+ +
+ + +

Settings

+ + + + + + + + + + + + + + + + + + + + + +
Content
contentContent to display
titleTitle to display alongside content
htmlHTML content to display instead of preformatted title and content
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Popup Settings
inlinetrueIf a popup is inline it will be created next to current element, allowing for local css rules to apply. Otherwise popups will appended to body and removed after being hidden.
delay0Delay in milliseconds before showing a popup when using hover events.
variationPopup variation to use, can use multiple variations with a space delimiter
onhoverEvent used to invoke popup
clickToClosehoverWhether clicking anywhere outside a popup should close it.
positiontop centerPosition that the popup should appear
distanceAway0Distance away from element for the popup to appear.
arrowOffset0Offset to apply to arrow positioning of element
maxSearchDepth10Number of iterations before giving up search for popup position when a popup cannot fit on screen
+ + + + + + + + + + + + + + + + + + + + + + +
Animation
animationPopAnimation to use, can be set to either pop or fade.
duration250Duration of popup animation.
easingeaseOutQuintEasing equation for popup animation
+ + + + + + + + + + + + + + + + + + + + + + +
Callbacks
onInitNoneCallback after a popup html is generated.
onShowNoneCallback after a popup section is shown.
onHideNoneCallback after a popup section is hidden.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNamePopupName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides performance output to console
verboseFalseProvides ancillary debug output to console
namespacepopupEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
+ errors : { + method : 'The method you called is not defined.' + } +
+
+
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/reveal.html b/node/src/documents/modules/reveal.html new file mode 100755 index 000000000..cb6886099 --- /dev/null +++ b/node/src/documents/modules/reveal.html @@ -0,0 +1,170 @@ +--- +layout : 'default' +css : 'reveal' + +title : 'Reveal' +type : 'UI Module' +--- + +
+
+

Reveal

+

A reveal is an element that shows different content below it when hovered

+
+
+
+ +
+
+ Standard + Types + Variations + States +
+
+ +

Standard

+ +
+

Reveal

+

The markup for a reveal

+
+ A reveal will take no action unless a type of reveal is specified and has no specific styling of its own. It can be used effectively with other elements like, message blocks, segments, and images. +
+
+ + +
+
+ +

Types

+ +
+

Slide

+

An element can slide revealing content along-side it

+
+
+

Do you want to check out a call to action just hover your mouse over this text block

+

It's actually right next to this one

+

Not obvious or anything

+
+ +
+
+
+
+
Sign up for the newsletter
+ +
+
+
+
+
+

Do you want to check out a call to action just hover your mouse over this text block

+

It's actually right next to this one

+
+ +
+
+
+
+
+

Do you want to check out a call to action just hover your mouse over this text block

+

It's actually right next to this one

+
+ +
+
+ +
+

Fade

+

An element can disappear to reveal content below

+
+ + +
+
+ +
+

Move

+

An element can move in a direction to reveal content

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

Rotate

+

An element can rotate to reveal content below

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

Variations

+ +
+

Masked

+

An element can mask its content so that an element does not escape its parent

+
+ + +
+
+ +
+

Instant

+

An element can show its content without delay

+
+ + +
+
+ + +

States

+ + + +
+ + + \ No newline at end of file diff --git a/node/src/documents/modules/shape.html b/node/src/documents/modules/shape.html new file mode 100755 index 000000000..0024f109c --- /dev/null +++ b/node/src/documents/modules/shape.html @@ -0,0 +1,373 @@ +--- +layout : 'default' +css : 'shape' + +title : 'Shape' +type : 'UI Module' +--- + + + + + +
+
+

Shape

+

Shapes are three dimensional objects displayed on a 2d plane.

+
+
+
+ +
+
+ Standard + Examples + Getting Started +
+
+ + + +

Standard

+ +
The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.
+ +
+

Shape

+

A shape has multiple sides of arbitrary content. Only one is visible

+ +
+
+
This side is visible.
+
This side is not visible.
+
This side is not visible.
+
+
+
+ + +

Examples

+ +

Automatic

+
+
+
+
+
+
+ + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+
+
+
+
+ + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+
+
+
+
+ + +
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+
+
+
+
+ + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+
+
+
+
+ + +
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+
+
+
+
+ + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+
+
+
+
+ + +
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+
+
+ +
+ +

Interactive

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

Shape

+
+
Square
+
Rectangle
+
Irregular
+
+ +

Flip

+
+
Left
+
Right
+
Up
+
Down
+
Over
+
+ +

Getting Started

+ +

Initializing a shape

+
$('.shape') + .shape() +;
+ +

Transitions automatically assume next side is the next sibling (or first if last element)

+
$('.shape') + .shape('flip.up') +;
+ +

To manually set the next side to appear use a selector or jQuery object

+
$('.shape') + .shape('set.nextSide', '.second') + .shape('flip.up') +;
+ +

Any internal method can be invoked programmatically

+
$('.shape') + .shape('repaint') +;
+ +

Defaults

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Shape Settings
useCSSTrueNot currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.
duration1000msDuration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.
easingeaseInOutQuadEasing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing
selector +
{ + shape : '.shape', + side : '.side' +}
+ 		Object containing selectors used by module.
className +
{ + css : 'css', + animating : 'animating', + hidden : 'hidden', + active : 'active' +}
+ 		Object containing class names used by module.
+ + + + + + + + + + + + + + +
Callbacks
beforeChangeNoneCallback before side is changed. This context is the new side.
onChangeNoneCallback after side is changed. This context is new side.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI Module Settings
moduleNameShapeName used in debug logs
debugTrueProvides standard debug output to console
performanceFalseProvides standard debug output to console
verboseFalseProvides ancillary debug output to console
namespaceshapeEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors +
{ + side : 'You tried to switch to a side that does not exist.', + method : 'The method you called is not defined' +}
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/documents/playground.html.eco b/node/src/documents/playground.html.eco new file mode 100755 index 000000000..e95febc69 --- /dev/null +++ b/node/src/documents/playground.html.eco @@ -0,0 +1,190 @@ +--- +layout : 'default' +css : 'playground' + +title : 'Playground' +type : 'Library' +--- +<% uiElements = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %> +<% uiCollections = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %> +<% uiModules = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %> +<% uiViews = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %> + + + + + + +
+
+

+ Playground +

+
+
+
+
+
+
Choose UI
+
+
+
+ +
+ + +
Button
+
+ <% for element in uiElements: %> +
+ <%= element.title %> +
+ <% end %> +
+
+
+
+ +
+ + +
---
+
+ <% for element in uiCollections: %> +
+ <%= element.title %> +
+ <% end %> +
+
+
+
+ +
+ + +
---
+
+ <% for element in uiModules: %> +
+ <%= element.title %> +
+ <% end %> +
+
+
+
+ +
+ + +
---
+
+ <% for element in uiViews: %> +
+ <%= element.title %> +
+ <% end %> +
+
+
+
+
+
+
Types
+
+
+
+
+
+
+
Variations
+
+
+
+
+
+
+
Add
+
+
+ + +
+
+
+
+
No Designs Yet!
+ Add an element to the left to begin +
+
+
+
+ +
+
Preview
+
+
+
+
+
Text
+
+
+ +
+
Update Text
+
+
+
+
View
+
+
Preview
+
Code
+
+
Finish Up
+
Download
+
+
+ + + + + + + + \ No newline at end of file diff --git a/node/src/documents/sink.html b/node/src/documents/sink.html new file mode 100755 index 000000000..e3a7082e7 --- /dev/null +++ b/node/src/documents/sink.html @@ -0,0 +1,219 @@ +--- +layout : 'default' +css : 'sink' + +title : 'Roadmap' +type : 'Other' +--- +
+
+

Project Roadmap

+
+
+
+ +
+ +
+
+ Progress Report +
+

Current status of work on Semantic UI

+
+
+ +
+ +
+
+ Redesign Timeline +
+
+
6.5
days left
+
+
+
+
+
UI Elements
+

This is an estimate of total time left to compete reskin and docs for the following elements

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI ElementEstimatedSpentStatusNotes
Button11Complete
Text Block0.50.5
Header0.50
Grid10
Divider0.250
Tags0.250.25Complete
Labels0.50Complete + Changes:
+ - Consolidated into tags +
Icons10
Menu31Complete
Throbber10
Video0.50
Steps0.50
Segment0.50.25In Progress
Table0.51Complete
14 Elements10.5 days4 days
+
+
+
UI Collections
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEstimatedSpentStatusNotes
Activity Feed10
Forms2 days1Complete
List View0.750
Item View10
User List View0.50
5 Elements5.25 days1 days
+
+ + +
\ No newline at end of file diff --git a/node/src/documents/specification/spec.html b/node/src/documents/specification/spec.html new file mode 100755 index 000000000..f70056464 --- /dev/null +++ b/node/src/documents/specification/spec.html @@ -0,0 +1,138 @@ + --- +layout : 'default' +css : 'guide' + +title : 'Spec Files' +type : 'UI Specification' +--- +
+
+

Spec Files

+
+ This is a starting draft, check back later. +
+
+
+
+ +

Introduction

+ +

Semantic defines an exchange format for user interface. Writing your interface components to match the specifications allows others to easily use your interface components in their project.

+ + +

Writing a Spec File

+ +

Before authoring an element you should begin by writing a spec file for your element. A specification file defines the structure and names used inside your element. For more information on naming convention visit our css and html guides.

+

A spec file also allows you to provide metadata to generate code for your element, this can be used to generate visual documentation of your element.

+ +

Common Specification

+ +

A spec file is a specially formatted json file.

+
+ { + // your element name should be a single word and match to the classname of your element + "Name": "Button", + + // you may include metadata + "Author": "Jack Lukic", + "Website": "http://www.semantic-ui.com" + "Version": "2.0", + + // All elements must specify whether it is an element, collection, module, or behavior + "Type": "Element", + + // Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/ + "Types": { + "Standard" : ".ui.button", + "Icon" : ".ui.icon.button > i.icon", + } + + // States are ways which elements show an innate change in its quality. + "States": { + "Active" : "active", + "Loading" : "loading", + "Disabled" : "disabled" + }, + + + // Variations are individual classnames which your element may receive to alter its look. Variations should, for the most part, be able to be used together to create more complex styles of an element. + "Variations": { + // If a set of variations are options of a single type (for example sizing may contain, small, medium, etc) then this can be defined as an array. + "Size": [ + "mini", + "tiny", + "small", + "medium", + "large", + "huge", + "massive" + ], + "Color": [ + "black", + "green", + "red", + "blue", + "green", + "red", + "teal" + ], + "Ordinality": [ + "secondary", + "tertiary" + ], + "Attached": [ + "attached top", + "attached bottom", + "attached left", + "attached right" + ], + "Circular" : "circular", + "Fluid" : "fluid" + }, + + // You may define a list of dummy text and selectors which can be filled with them. This is used by generators to export a style guide of your interface element. If you specify an array, each item will be used in order to fill the content of each match. + "Text": { + ".ui.button": ["Button", "Click Me", "Lorem Ipsum"] + }, + + // Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations + "Definition": { + "Standard" : "A simple button", + "Icon" : "A button icon is formatted to contain only an icon", + "Size" : "A button can vary in size", + "Color" : "A button can have different colors", + "Ordinality" : "A button can blend into a page", + "Attached" : "A button can attach to other content", + "Circular" : "A button can be circular", + "Fluid" : "A button can be fluid" + } + } +
+ +

UI Elements

+ +

A UI element is a basic building block of a website. It may have a singular or group (plural) definition

+ +
+ { + // in addition to the parameters above an element may contain a definition for its singular and plural type + "Types": { + // these types can only exist for class="ui button" + "Singular": { + "Standard" : ".ui.button", + "Icon" : ".ui.icon.button > i.add.icon", + "Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" + }, + // these types can exist only for class="ui button" + "Group": { + "Standard" : ".ui.buttons > .button+.button+.button", + "Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", + "Conditional" : ".ui.buttons > .button+.or+.button", + "Vertical" : ".vertical.ui.buttons > .button+.button+.button" + } + } + } +
+ + +
\ No newline at end of file diff --git a/node/src/documents/views/comment.html b/node/src/documents/views/comment.html new file mode 100755 index 000000000..daaa5e21e --- /dev/null +++ b/node/src/documents/views/comment.html @@ -0,0 +1,542 @@ +--- +layout : 'default' +css : 'comment' + +title : 'Comment' +type : 'UI View' +--- +
+
+

Comment

+

A comment view is used to display lists of user feedback to site content.

+
+
+
+ +
+
+ Standard + Content + Variations +
+
+ +

Standard

+ +
+

Comments

+

A basic list of comments

+ +
+
+
+

+ Comments +

+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Pawfin Dog +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+
+ +
+
+ Add Reply +
+
+
+
+
+
+
+

Content

+ +

Comment

+ +
+

Avatar

+

A comment can contain an image or avatar

+
+
+ + + +
+ Dog Doggington +
+ I think this is a great idea and i am voting on it +
+
+
+
+
+ +
+

Metadata

+

A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.

+
+
+ + + +
+ Dog Doggington +
+
2 days ago
+
+ + + + + +
+
+
+ I think this is a great idea and i am voting on it +
+
+
+
+
+ +
+

Actions

+

A comment can contain an list of actions a user may perform related to this comment.

+
+
+ + + +
+ Dog Doggington +
+
2 days ago
+
+ + + + + +
+
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+
+ +
+

Reply Form

+

A comment can contain a form to reply to a comment. This may have arbitrary content.

+
+
+ + + +
+ Dog Doggington +
+
2 days ago
+
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+ +
+
+ Add Reply +
+
+
+
+
+
+
+

A comment reply form can also exist below a comment feed to reply specifically to the original content. +

+
+ + + +
+ Dog Doggington +
+
2 days ago
+
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Pawfin Dog +
+
1 day ago
+
+
+ I think this is a great idea and i am voting on it +
+
+ Reply +
+
+
+
+
+ +
+
+ Add Comment +
+
+
+
+ + +

Variations

+ +
+

Threaded

+

A comment list can be threaded to showing the relationship between conversations

+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Pawfin Dog +
+ 1 day ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Dog Doggington +
+ 20 minutes ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Dog Doggington +
+ 20 minutes ago +
+
+ Also pizza. +
+
+ Reply + Delete +
+
+
+
+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+
+
+ + + +
+ Dog Doggington +
+ 20 hours ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply +
+
+
+
+ + + +
+ Pawfin Dog +
+ 15 hours ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply +
+
+
+
+
+ + +
+

Minimal

+

Comments can hide extra information unless a user shows intent to interact with a comment.

+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Pawfin Dog +
+ 1 day ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Dog Doggington +
+ 20 minutes ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+ + + +
+ Dog Doggington +
+ 20 minutes ago +
+
+ Also pizza. +
+
+ Reply + Delete +
+
+
+
+
+
+ + + +
+ Dog Doggington +
+ 2 days ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply + Delete +
+
+
+
+
+
+ + + +
+ Dog Doggington +
+ 20 hours ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply +
+
+
+
+ + + +
+ Pawfin Dog +
+ 15 hours ago +
+
+ I think this is a great idea and i am voting on it +
+
+ Reply +
+
+
+
+
+ + +
\ No newline at end of file diff --git a/node/src/documents/views/feed.html b/node/src/documents/views/feed.html new file mode 100755 index 000000000..b72358f08 --- /dev/null +++ b/node/src/documents/views/feed.html @@ -0,0 +1,268 @@ +--- +layout : 'default' +css : 'feed' + +title : 'Feed' +type : 'UI View' +--- +
+
+

Feed

+

A feed is a collection of events that have occured in series

+
+
+
+ +
+
+ Standard + Content + Variations +
+
+ +

Standard

+ +
+

Feed

+

A standard feed with some optional elements

+
+

+ Recent Activity +

+
+
+ +
+
+
+ Just moments ago +
+
+ Sally Poodle added you as a friend +
+
+
+
+
+ +
+
+
+ 3 days ago +
+
+ You submitted a new post to the page +
+
+ I am a dog and I do not know how to make a post +
+
+
+
+
+ +
+
+
+ 3 days ago +
+
+ Sally Poodle added 2 new photos of you +
+
+ + +
+
+
+
+
+ +

Content

+ +
+

Label

+

An event can contain a label

+
In semantic's implementation a label is formatted to contain an icon or an image
+
+
+
+ +
+
+
+ Sally Poodle added you as a friend +
+
+
+
+
+ +
+
+
+ You submitted a new post to the page +
+
+
+
+
+ +
+

Date

+

An event can contain a date

+
+
+
+ +
+
+
+ 3 days ago +
+
+ Sally Poodle added you as a friend +
+
+
+
+
+ +
+

Additional information

+

An event can contain additional content explaining the event

+
+
+
+ +
+
+
+ 3 days ago +
+
+ Sally Poodle added 2 photos of you +
+
+ + +
+
+
+
+
+ +
+
+
+ 3 days ago +
+
+ Sally Poodle created a post +
+
+ I am a dog and I do not know how to make a post +
+
+
+
+
+ + +

Variations

+
+

Sizes

+

A feed can have different sizes

+ +
+
+
+

My Activity

+
+
+ +
+
+
+ Just moments ago +
+
+ Sally Poodle added you as a friend +
+
+
+
+
+ +
+
+
+ 3 days ago +
+
+ You submitted a new post to the page +
+
+ I am a dog and I do not know how to make a post +
+
+
+
+
+ +
+
+
+ 3 days ago +
+
+ Sally Poodle added 2 new photos of you +
+
+ + +
+
+
+
+
+
+
+

Followers Activity

+
+
+
+ Sally Poodle added hotpup202 as a friend +
+
+
+
+
+
+ Dally Doodle added hotpup202 as a friend +
+
+
+
+
+
+ Sally Poodle added sixpack dog as a friend +
+
+
+
+
+
+ Dally Doodle added hotpup202 as a friend +
+
+
+
+
+
+ +
+ + +
\ No newline at end of file diff --git a/node/src/documents/views/items.html b/node/src/documents/views/items.html new file mode 100755 index 000000000..cf727f413 --- /dev/null +++ b/node/src/documents/views/items.html @@ -0,0 +1,313 @@ +--- +layout : 'default' +css : 'item' + +title : 'Item' +type : 'UI View' +--- +
+
+

Item

+

An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.

+
+
+
+ +
+
+ Standard + Content + Variations +
+
+ +

Standard

+ +
+

Items

+

A basic item list.

+
+ + Items are given an arbitrary width and height which matches up to the proportions of the content it typically displays. This means item content must not be too large for the content area. +
+
+
+
+ + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+ 199 votes +
+
+
+
+
+ + +
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+ 311 votes +
+
+
+
+
+ + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+ 522 votes +
+
+
+
+
+ +

Variations

+ +
+

Stackable

+

An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes

+
+
+
+ + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+ 199 votes +
+
+
+
+
+ + +
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+ 311 votes +
+
+
+
+
+ +
+

Connected

+

An item list can be automatically sized to be even height.

+
+ + Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified. +
+
+
+
+
+ +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+ +
+
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+ +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+
+
+ +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+ +
+
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+ +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+
+ + +
+

Column count

+

An item list can list how many columns should exist in a row

+
+
+
+ + + + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+ + + + +
+
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+ + + + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+ + + + +
+
+
Happy Dog
+

Happy dogs are pretty interesting if you are an unhappy person.

+
+
+
+
+
+

A connected item list with a specified column count

+
+
+
+ + + + +
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
+
+ + + + +
+
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
+
+ + + + +
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
+
+ + + + +
+
+
Happy Dog
+

Happy dogs are pretty interesting if you are an unhappy person.

+
+
+
+
+ + + + +
+
+
Quiet Dog
+

A quiet dog is nice if you dont like a lot of upkeep for your dogs.

+
+
+
+
+ +
\ No newline at end of file diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css index 5e7f79838..e0f7a0e2b 100644 --- a/node/src/files/components/semantic/collections/grid.css +++ b/node/src/files/components/semantic/collections/grid.css @@ -52,11 +52,10 @@ --------------------*/ .ui.grid > .row { display: block; - width: 100%; -} -.ui.grid > .row { - margin-top: 1rem; - padding-top: 1rem; + width: 100% !important; + margin-top: 1.5%; + padding: 1.5% 0% 0%; + font-size: 0rem; } .ui.grid > .row:first-child { padding-top: 0rem; @@ -119,7 +118,7 @@ } @media only screen and (min-width: 2000px) { .ui.responsive.grid { - padding: 0% 25%; + padding: 0% 23%; } } /*------------------- @@ -320,9 +319,6 @@ .ui.divided.grid, .ui.divided.grid > .row { display: table; - width: 100%; - margin-left: 0% !important; - margin-right: 0% !important; } .ui.divided.grid > .column, .ui.divided.grid > .row > .column { @@ -451,7 +447,7 @@ display: table-cell; } /*------------------- - Folding + Stackable --------------------*/ @media only screen and (max-width: 960px) { .ui.stackable.grid { diff --git a/node/src/files/components/semantic/elements/button.css b/node/src/files/components/semantic/elements/button.css index 7e4169104..1b1b48577 100644 --- a/node/src/files/components/semantic/elements/button.css +++ b/node/src/files/components/semantic/elements/button.css @@ -119,6 +119,138 @@ -moz-box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset; box-shadow: 0em 0em 0.125em 1px rgba(0, 0, 0, 0.1) inset; } +/*-------------- + Error +---------------*/ +.ui.button.error, +.ui.button.error.hover, +.ui.button.error.down { + cursor: default; + position: relative !important; + background-color: #D95C5C !important; + color: transparent !important; + text-shadow: none; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.error .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.error:after { + position: absolute; + left: 50%; + content: "Error"; + margin-left: -1.8em; + color: #FFFFFF; + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} +.ui.button.error .icon:before { + font-family: 'Icons'; + content: '\26a0'; +} +/*-------------- + Success +---------------*/ +.ui.button.success, +.ui.button.success.hover, +.ui.button.success.down { + position: relative !important; + background-color: #5BBD72 !important; + color: transparent !important; +} +.ui.button.success .icon { + opacity: 1; + color: #FFFFFF; +} +.ui.button.success .icon:before { + font-family: 'Icons'; + content: '\2611'; +} +.ui.button.success:after { + position: absolute; + left: 50%; + content: "Success"; + margin-left: -2em; + color: #FFFFFF; + -webkit-animation: button-text 0.5s; + -moz-animation: button-text 0.5s; + -ms-animation: button-text 0.5s; + -o-animation: button-text 0.5s; + animation: button-text 0.5s; +} +@-webkit-keyframes button-text { + 0% { + -webkit-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes button-text { + 0% { + -moz-transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@keyframes button-text { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +/*-------------- + Loading +---------------*/ +.ui.button.loading, +.ui.button.loading.hover { + position: relative; + cursor: default; + background-color: #F3F3F3 !important; + color: transparent !important; + text-shadow: none !important; + background-image: none !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + -webkit-transition: all 0s linear; + -moz-transition: all 0s linear; + -o-transition: all 0s linear; + -ms-transition: all 0s linear; + transition: all 0s linear; +} +.ui.button.loading:after { + position: absolute; + top: 0em; + left: 0em; + width: 100%; + height: 100%; + content: ''; + background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; +} +.ui.labeled.icon.button.loading .icon { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} /*------------------- Disabled --------------------*/ @@ -392,6 +524,7 @@ .ui.icon.button > .icon { opacity: 1; margin: 0em; + vertical-align: top; } /*------------------- Ordinality @@ -525,9 +658,9 @@ ---------------*/ .ui.button.attached { display: block; - -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; } .ui.button.attached.top { -webkit-border-radius: 0.3125em 0.3125em 0em 0em; @@ -827,135 +960,3 @@ -webkit-border-radius: 0px 0px 0.3125em 0.3125em; border-radius: 0px 0px 0.3125em 0.3125em; } -/*-------------- - Loading ----------------*/ -.ui.button.loading, -.ui.button.loading.hover { - position: relative; - cursor: default; - background-color: #F3F3F3 !important; - color: transparent !important; - text-shadow: none !important; - background-image: none !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.button.loading:after { - position: absolute; - top: 0em; - left: 0em; - width: 100%; - height: 100%; - content: ''; - background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%; -} -.ui.labeled.icon.button.loading .icon { - background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -/*-------------- - Error ----------------*/ -.ui.button.error, -.ui.button.error.hover, -.ui.button.error.down { - cursor: default; - position: relative !important; - background-color: #D95C5C !important; - color: transparent !important; - text-shadow: none; - -webkit-transition: all 0s linear; - -moz-transition: all 0s linear; - -o-transition: all 0s linear; - -ms-transition: all 0s linear; - transition: all 0s linear; -} -.ui.button.error .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.error:after { - position: absolute; - left: 50%; - content: "Error"; - margin-left: -1.8em; - color: #FFFFFF; - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} -.ui.button.error .icon:before { - font-family: 'Icons'; - content: '\26a0'; -} -/*-------------- - Success ----------------*/ -.ui.button.success, -.ui.button.success.hover, -.ui.button.success.down { - position: relative !important; - background-color: #5BBD72 !important; - color: transparent !important; -} -.ui.button.success .icon { - opacity: 1; - color: #FFFFFF; -} -.ui.button.success .icon:before { - font-family: 'Icons'; - content: '\2611'; -} -.ui.button.success:after { - position: absolute; - left: 50%; - content: "Success"; - margin-left: -2em; - color: #FFFFFF; - -webkit-animation: button-text 0.5s; - -moz-animation: button-text 0.5s; - -ms-animation: button-text 0.5s; - -o-animation: button-text 0.5s; - animation: button-text 0.5s; -} -@-webkit-keyframes button-text { - 0% { - -webkit-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - } -} -@-moz-keyframes button-text { - 0% { - -moz-transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - -moz-transform: translateY(0); - } -} -@keyframes button-text { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - opacity: 1; - transform: translateY(0); - } -} diff --git a/node/src/files/components/semantic/elements/divider.css b/node/src/files/components/semantic/elements/divider.css index d0c42ac82..94720e6de 100644 --- a/node/src/files/components/semantic/elements/divider.css +++ b/node/src/files/components/semantic/elements/divider.css @@ -13,7 +13,7 @@ Divider *******************************/ .ui.divider { - margin: 1em 0em; + margin: 1rem 0rem; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.8); height: 0em; diff --git a/node/src/files/components/semantic/elements/header.css b/node/src/files/components/semantic/elements/header.css index 1fa641aaa..5ef57b30d 100644 --- a/node/src/files/components/semantic/elements/header.css +++ b/node/src/files/components/semantic/elements/header.css @@ -21,13 +21,6 @@ font-weight: bold; line-height: 1.33; } -.ui.header:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} .ui.header .ui.sub.header, .ui.header .sub.header { font-size: 1rem; diff --git a/node/src/files/components/semantic/elements/label.css b/node/src/files/components/semantic/elements/label.css index d7c722f0e..cf1232459 100644 --- a/node/src/files/components/semantic/elements/label.css +++ b/node/src/files/components/semantic/elements/label.css @@ -52,7 +52,7 @@ a.ui.label { } .ui.label .icon.close { cursor: pointer; - margin-left: 0.5em; + margin: 0em 0em 0em 0.5em; opacity: 0.7; -webkit-transition: background 0.1s linear ; @@ -185,6 +185,10 @@ a.ui.label:hover:before { border-radius: 4px 0em 0em 4px; } .ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; width: auto; -webkit-border-radius: 4px 0em 4px 0em; -moz-border-radius: 4px 0em 4px 0em; @@ -433,14 +437,16 @@ a.ui.teal.tag.label:hover:before { /*------------------- Circular --------------------*/ +.ui.circular.labels .label, .ui.circular.label { - margin-right: 0.5em; margin-top: -1em; - width: 2em; height: 2em; - padding: 0.5em; + padding: 0.5em !important; line-height: 1em; text-align: center; + -webkit-border-radius: 500em; + -moz-border-radius: 500em; + border-radius: 500em; } /*------------------- Pointing diff --git a/node/src/files/components/semantic/modules/nag.js b/node/src/files/components/semantic/modules/nag.js index 911c6a977..83792f898 100644 --- a/node/src/files/components/semantic/modules/nag.js +++ b/node/src/files/components/semantic/modules/nag.js @@ -116,12 +116,20 @@ ; } }, + hide: function() { $module - .fadeOut(settings.duration, settings.easing) + .fadeOut(settings.duration, settings.easing, this.onHide) ; }, + onHide: function() { + $module.remove(); + if (settings.onHide) { + settings.onHide(); + }; + }, + stick: function() { module.refresh(); @@ -144,7 +152,7 @@ else { $module .css({ - top : yPosition + top : yPosition }) ; } @@ -152,15 +160,17 @@ unStick: function() { $module .css({ - top : '' + top : '' }) ; }, - dismiss: function() { + dismiss: function(event) { if(settings.storageMethod) { module.storage.set(settings.storedKey, settings.storedValue); } module.hide(); + event.stopImmediatePropagation(); + event.preventDefault(); }, should: { @@ -321,7 +331,9 @@ }, speed : 500, - easing : 'easeOutQuad' + easing : 'easeOutQuad', + + onHide: function() {} }; diff --git a/node/src/files/components/semantic/modules/popup.css b/node/src/files/components/semantic/modules/popup.css index 37a1b35af..7083f540c 100644 --- a/node/src/files/components/semantic/modules/popup.css +++ b/node/src/files/components/semantic/modules/popup.css @@ -23,10 +23,12 @@ background-color: #FFFFFF; padding: 0.8em 1.2em; font-size: 0.875rem; + font-weight: normal; + font-style: normal; + color: rgba(0, 0, 0, 0.7); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; - color: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0px 1px 1px #DCDDDE; -moz-box-shadow: 0px 1px 1px #DCDDDE; box-shadow: 0px 1px 1px #DCDDDE; @@ -199,6 +201,9 @@ background-color: #333333; border: none; color: #FFFFFF; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .ui.inverted.popup .header { background-color: rgba(0, 0, 0, 0.2); @@ -206,4 +211,7 @@ } .ui.inverted.popup:before { background-color: #333333; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } diff --git a/node/src/files/components/semantic/modules/popup.js b/node/src/files/components/semantic/modules/popup.js index 8fb910822..7e71908e8 100644 --- a/node/src/files/components/semantic/modules/popup.js +++ b/node/src/files/components/semantic/modules/popup.js @@ -130,7 +130,7 @@ $.fn.popup = function(parameters) { // generates popup html from metadata create: function() { - module.debug('Creating pop-up content'); + module.debug('Creating pop-up html'); var html = $module.data(metadata.html) || settings.html, variation = $module.data(metadata.variation) || settings.variation, @@ -245,14 +245,9 @@ $.fn.popup = function(parameters) { module.debug('Toggling pop-up'); // refresh state of module module.refresh(); - if($popup.size() === 0) { - module.verbose('Creating pop-up html'); - module.create(); - } if( !$module.hasClass(className.visible) ) { - if( module.position() ) { - module.show(); - } + module.hideAll(); + module.show(); } else { module.hide(); @@ -387,13 +382,10 @@ $.fn.popup = function(parameters) { show: function() { module.debug('Showing pop-up'); - $(selector.popup) - .filter(':visible') - .stop() - .fadeOut(200) - .prev($module) - .removeClass(className.visible) - ; + if($popup.size() === 0) { + module.create(); + } + module.position(); $module .addClass(className.visible) ; @@ -401,12 +393,14 @@ $.fn.popup = function(parameters) { .removeClass(className.loading) ; if(settings.animation == 'pop' && $.fn.popIn !== undefined) { + console.log($popup); $popup .stop() .popIn(settings.duration, settings.easing) ; } else { + console.log($popup); $popup .stop() .fadeIn(settings.duration, settings.easing) @@ -421,6 +415,16 @@ $.fn.popup = function(parameters) { $.proxy(settings.onShow, $popup)(); }, + hideAll: function() { + $(selector.popup) + .filter(':visible') + .stop() + .fadeOut(200) + .prev($module) + .removeClass(className.visible) + ; + }, + hide: function() { $module .removeClass(className.visible) @@ -509,7 +513,6 @@ $.fn.popup = function(parameters) { } }, error: function() { - console.log($module.next()); module.error = Function.prototype.bind.call(console.warn, console, settings.moduleName + ':'); }, performance: { @@ -616,9 +619,9 @@ $.fn.popup = function(parameters) { $.fn.popup.settings = { moduleName : 'Popup', - debug : false, - verbose : false, - performance : false, + debug : true, + verbose : true, + performance : true, namespace : 'popup', onInit : function(){}, diff --git a/node/src/files/components/semantic/modules/reveal.css b/node/src/files/components/semantic/modules/reveal.css index 0f71813d7..d0d7dec93 100644 --- a/node/src/files/components/semantic/modules/reveal.css +++ b/node/src/files/components/semantic/modules/reveal.css @@ -16,13 +16,13 @@ position: relative !important; z-index: 2 !important; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { position: absolute !important; top: 0em !important; left: 0em !important; @@ -34,7 +34,7 @@ -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.reveal > :last-child { +.ui.reveal > .hidden.content { position: relative !important; z-index: 3 !important; } @@ -68,131 +68,131 @@ -ms-transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; transition: top 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, right 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s, bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1) 0.15s; } -.ui.slide.reveal > :first-child { +.ui.slide.reveal > .visible.content { position: relative !important; } -.ui.slide.reveal > :last-child { +.ui.slide.reveal > .hidden.content { display: inline-block; position: absolute !important; top: 0% !important; left: 100% !important; width: 100% !important; } -.ui.slide.reveal:hover > :first-child { +.ui.slide.reveal:hover > .visible.content { left: -100% !important; } -.ui.slide.reveal:hover > :last-child { +.ui.slide.reveal:hover > .hidden.content { left: 0% !important; } -.ui.right.slide.reveal > :first-child { +.ui.right.slide.reveal > .visible.content { left: 0%; } -.ui.right.slide.reveal > :last-child { +.ui.right.slide.reveal > .hidden.content { left: auto !important; right: 100% !important; } -.ui.right.slide.reveal:hover > :first-child { +.ui.right.slide.reveal:hover > .visible.content { left: 100% !important; right: auto !important; } -.ui.right.slide.reveal:hover > :last-child { +.ui.right.slide.reveal:hover > .hidden.content { left: auto !important; right: 0% !important; } -.ui.up.slide.reveal > :first-child { +.ui.up.slide.reveal > .visible.content { top: 0% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.up.slide.reveal > :last-child { +.ui.up.slide.reveal > .hidden.content { top: 100% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.slide.up.reveal:hover > :first-child { +.ui.slide.up.reveal:hover > .visible.content { top: -100% !important; left: 0% !important; } -.ui.slide.up.reveal:hover > :last-child { +.ui.slide.up.reveal:hover > .hidden.content { top: 0% !important; left: 0% !important; } -.ui.down.slide.reveal > :first-child { +.ui.down.slide.reveal > .visible.content { top: auto !important; right: auto !important; bottom: auto !important; bottom: 0% !important; } -.ui.down.slide.reveal > :last-child { +.ui.down.slide.reveal > .hidden.content { top: auto !important; right: auto !important; bottom: 100% !important; left: 0% !important; } -.ui.slide.down.reveal:hover > :first-child { +.ui.slide.down.reveal:hover > .visible.content { left: 0% !important; bottom: -100% !important; } -.ui.slide.down.reveal:hover > :last-child { +.ui.slide.down.reveal:hover > .hidden.content { left: 0% !important; bottom: 0% !important; } /*-------------- Fade ---------------*/ -.ui.fade.reveal > :first-child { +.ui.fade.reveal > .visible.content { opacity: 1; } -.ui.fade.reveal:hover > :first-child { +.ui.fade.reveal:hover > .visible.content { opacity: 0; } /*-------------- Move ---------------*/ -.ui.move.reveal > :first-child, -.ui.move.left.reveal > :first-child { +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { left: auto !important; top: auto !important; bottom: auto !important; right: 0% !important; } -.ui.move.reveal:hover > :first-child, -.ui.move.left.reveal:hover > :first-child { +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content { right: 100% !important; } -.ui.move.right.reveal > :first-child { +.ui.move.right.reveal > .visible.content { right: auto !important; top: auto !important; bottom: auto !important; left: 0% !important; } -.ui.move.right.reveal:hover > :first-child { +.ui.move.right.reveal:hover > .visible.content { left: 100% !important; } -.ui.move.up.reveal > :first-child { +.ui.move.up.reveal > .visible.content { right: auto !important; left: auto !important; top: auto !important; bottom: 0% !important; } -.ui.move.up.reveal:hover > :first-child { +.ui.move.up.reveal:hover > .visible.content { bottom: 100% !important; } -.ui.move.down.reveal > :first-child { +.ui.move.down.reveal > .visible.content { right: auto !important; left: auto !important; top: 0% !important; bottom: auto !important; } -.ui.move.down.reveal:hover > :first-child { +.ui.move.down.reveal:hover > .visible.content { top: 100% !important; } /*-------------- Rotate ---------------*/ -.ui.rotate.reveal > :first-child { +.ui.rotate.reveal > .visible.content { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; @@ -204,30 +204,30 @@ -ms-transform: rotate(0deg); transform: rotate(0deg); } -.ui.rotate.reveal > :first-child, -.ui.rotate.right.reveal > :first-child { +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -o-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; } -.ui.rotate.reveal:hover > :first-child, -.ui.rotate.right.reveal:hover > :first-child { +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -o-transform: rotate(110deg); -ms-transform: rotate(110deg); transform: rotate(110deg); } -.ui.rotate.left.reveal > :first-child { +.ui.rotate.left.reveal > .visible.content { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } -.ui.rotate.left.reveal:hover > :first-child { +.ui.rotate.left.reveal:hover > .visible.content { -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg); diff --git a/node/src/files/overrides/modules/behavior/preview.js b/node/src/files/overrides/modules/behavior/preview.js new file mode 100755 index 000000000..6eacebd33 --- /dev/null +++ b/node/src/files/overrides/modules/behavior/preview.js @@ -0,0 +1,308 @@ +/* ****************************** + Previews - Quirky Preview Component + Author: Jack Lukic + Notes: First Commit June 06, 2012 + + Tooltip Wrapper for loading + previews of ideations, concepts and users + + Will eventually rewrite to use own tooltip lib + +****************************** */ + +;(function ( $, window, document, undefined ) { + + $.fn.preview = function(parameters) { + var + settings = $.extend(true, {}, $.fn.preview.settings, parameters), + // hoist arguments + moduleArguments = arguments || false + ; + $(this) + .each(function() { + + var + $module = $(this), + + namespace = settings.namespace, + instance = $module.data('module-' + settings.namespace), + module + ; + + settings.className = (settings.className == 'auto') + ? ( typeof $.fn.preview.settings.classNames[settings.type] !== undefined) + ? $.fn.preview.settings.classNames[settings.type] + : $.fn.preview.settings.classNames.standard + : settings.className + ; + + module = { + initialize: function() { + var + throbberContent = '
' + ; + $module + .data('module', 'module-' + settings.namespace) + .data('content', throbberContent) + .on('mouseenter.' + namespace, module.throttle) + .on('mouseleave.' + namespace, module.disable) + .popover(settings) + ; + }, + + throttle: function() { + if(typeof module.timer !== undefined) { + clearTimeout(module.timer); + } + module.timer = setTimeout(module.prepare, settings.delay); + }, + + prepare: function() { + var + title = $module.data('title') || false, + content = $module.data('content') || false, + apiRequest = $module.data('promise') || false, + action = (settings.action) + ? settings.action + : settings.type + ; + // if no content lets ajax + if(!apiRequest) { + + // make sure we're not already requesting this + if($module.data('id') !== undefined) { + $.api({ + action : action, + handleState : settings.handleState, + dataType : 'json', + stateContext : $module, + error : function(error) { + console.log('Error thrown making request:' + error); + }, + success : function(response) { + var + popover = $module.data('popover'), + content, + data, + title + ; + module.debug('Server response was successful'); + // user tooltip case + if(typeof settings.create[settings.type] == 'function') { + module.debug('Creating html content'); + content = settings.create[settings.type](response); + + // prevents fade-in doubling + if(popover !== undefined) { + popover.options.animation = false; + } + $module + .data('content', content) + .data('popover', popover) + .popover('show') + ; + module.debug('Showing popup'); + popover.options.animation = settings.animation; + $module + .data('popover', popover) + ; + } + else { + module.disable(); + } + } + }); + } + } + else { + $module.popover('enable'); + } + }, + disable: function() { + if(typeof module.timer !== undefined) { + clearTimeout(module.timer); + } + // they moused away before popover appeared, dont show it while their mouse is elsewhere + $module + .popover('disable') + ; + }, + + debug: function(message) { + if(settings.debug) { + console.info(settings.moduleName + ': ' + message); + } + }, + error: function(errorMessage) { + console.warn(settings.moduleName + ': ' + errorMessage); + }, + invoke: function(methodName, context, methodArguments) { + var + method + ; + methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 ); + if(typeof methodName == 'string' && instance !== undefined) { + methodName = methodName.split('.'); + $.each(methodName, function(index, name) { + if( $.isPlainObject( instance[name] ) ) { + instance = instance[name]; + return true; + } + else if( $.isFunction( instance[name] ) ) { + method = instance[name]; + return true; + } + module.error(settings.errors.method); + return false; + }); + } + if ( $.isFunction( method ) ) { + return method.apply(context, methodArguments); + } + // return retrieved variable or chain + return method; + } + + }; + + if(instance !== undefined && moduleArguments) { + // simpler than invoke realizing to invoke itself (and losing scope due prototype.call() + if(moduleArguments[0] == 'invoke') { + moduleArguments = Array.prototype.slice.call( moduleArguments, 1 ); + } + return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) ); + } + // initializing + module.initialize(); + }) + ; + return this; + }; + + $.fn.preview.settings = { + + moduleName : 'Preview Popup', + debug : true, + namespace : 'preview', + + type : 'idea', + action : false, + handleState : 'true', + + className : 'auto', + + classNames: { + standard : 'summary', + idea : 'pictoral idea', + user : 'user summary', + + product : 'product', + productSummary : 'product summary' + }, + placement : 'top', + + animation : true, + delay : 400 + }; + + // creates tooltip from server response + $.fn.preview.settings.create = { + user: function(response) { + var + user = response.user, + content = '' + ; + content += '' + + "
" + + " " + + "
" + + "

" + user.name +"

" + ; + if(user.location) { + content += "

" + user.location + "

"; + } + content += "" + + "" + + " " + + " " + + " " + + "
Member Since:" + user.createdAt +"
Ideas Submitted:" + user.ideas + "
Total Influence:" + user.totalInfluence +"
" + ; + if(user.admin) { + content += "
"; + } + else if(user.pro) { + content += "
"; + } + return content; + }, + // flat json + productSummary: function(response) { + var + product = response.product, + content = '', + stateName + ; + // pretty names for states + switch(product.state) { + case 'presales': + stateName = 'Presales'; + break; + case 'sales': + stateName = 'On Sale Now'; + break; + case 'development': + stateName = "We're working on it"; + break; + case 'hoed': + stateName = "We're working on it"; + break; + case 'tooling': + stateName = "We're making it"; + break; + case 'quote': + stateName = "We're making it"; + break; + case 'in_production': + stateName = "We're making it"; + break; + } + if(product.state == 'development') { + content += '' + + "
" + + "
" + + "

" + product.name +"

" + + "

" + stateName + "

" + + "
" + ; + } + else { + content += '' + + "
" + + "
" + ; + if(product.images.icon !== undefined && product.images.icon !== '') { + content += " "; + } + content += '' + + "
" + + "

" + product.name +"

" + ; + if(product.tagline !== undefined) { + content += "

" + product.tagline +"

"; + } + if(stateName !== undefined) { + content += "

" + stateName + "

"; + } + content += "" + + "
" + ; + if(product.description.summary !== undefined) { + content += "

" + product.description.summary + "

"; + } + } + return content; + } + }; + +})( jQuery, window , document ); diff --git a/node/src/files/overrides/views/card.css b/node/src/files/overrides/views/card.css index 0574b0f95..92f2642c6 100755 --- a/node/src/files/overrides/views/card.css +++ b/node/src/files/overrides/views/card.css @@ -47,7 +47,6 @@ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - z-index: 100; } .ui.cards .card .dimmer .close, .ui.card .dimmer .close { @@ -70,14 +69,14 @@ padding: 0.6em; border-radius: 4px; } -.ui.cards .card .dimmer .buttons > *, -.ui.card .dimmer .buttons > * { +.ui.cards .card .dimmer .buttons .button, +.ui.card .dimmer .buttons .button { display: inline-block; margin-left: 2%; width: 48%; } -.ui.cards .card .dimmer .buttons > :first-child, -.ui.card .dimmer .buttons > :first-child { +.ui.cards .card .dimmer .buttons .button:first-child, +.ui.card .dimmer .buttons .button:first-child { margin-left: 0em; } @@ -136,14 +135,6 @@ display: block; margin: 0em -0.5em -1em; } -.ui.cards:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - .ui.cards .card { display: inline-block; margin: 0em 0.5em 1em; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index cd4dcb2ef..f44679596 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -542,10 +542,12 @@ a:hover { } #example .another.example { + margin-top: 0em; + padding-top: 2em; border-top: none; } #example .another.example i.code { - top: 15px; + top: 0px; } #example .example > p { color: #888888; diff --git a/src/elements/label.less b/src/elements/label.less index 187633880..4d71120c8 100755 --- a/src/elements/label.less +++ b/src/elements/label.less @@ -65,7 +65,7 @@ a.ui.label { } .ui.label .icon.close { cursor: pointer; - margin-left: 0.5em; + margin: 0em 0em 0em 0.5em; opacity: 0.7; -webkit-transition: @@ -237,6 +237,10 @@ a.ui.label:hover:before { border-radius: 4px 0em 0em 4px; } .ui.bottom.right.attached.label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; width: auto; -webkit-border-radius: 4px 0em 4px 0em; -moz-border-radius: 4px 0em 4px 0em; @@ -521,17 +525,20 @@ a.ui.teal.tag.label:hover:before { Circular --------------------*/ +.ui.circular.labels .label, .ui.circular.label { - margin-right: 0.5em; - margin-top: -1em; - - width: 2em; - height: 2em; + margin-top: -1em; + + height: 2em; - padding: 0.5em; + padding: 0.5em !important; - line-height: 1em; - text-align: center; + line-height: 1em; + text-align: center; + + -webkit-border-radius: 500em; + -moz-border-radius: 500em; + border-radius: 500em; } /*------------------- diff --git a/src/modules/reveal.less b/src/modules/reveal.less index dbd628436..86e663d17 100755 --- a/src/modules/reveal.less +++ b/src/modules/reveal.less @@ -20,7 +20,7 @@ z-index: 2 !important; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s ; @@ -35,7 +35,7 @@ ; } -.ui.reveal > :first-child { +.ui.reveal > .visible.content { position: absolute !important; top: 0em !important; left: 0em !important; @@ -55,7 +55,7 @@ all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s ; } -.ui.reveal > :last-child { +.ui.reveal > .hidden.content { position: relative !important; z-index: 3 !important; } @@ -120,77 +120,77 @@ bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s ; } -.ui.slide.reveal > :first-child { +.ui.slide.reveal > .visible.content { position: relative !important; } -.ui.slide.reveal > :last-child { +.ui.slide.reveal > .hidden.content { display: inline-block; position: absolute !important; top: 0% !important; left: 100% !important; width: 100% !important; } -.ui.slide.reveal:hover > :first-child { +.ui.slide.reveal:hover > .visible.content { left: -100% !important; } -.ui.slide.reveal:hover > :last-child { +.ui.slide.reveal:hover > .hidden.content { left: 0% !important; } -.ui.right.slide.reveal > :first-child { +.ui.right.slide.reveal > .visible.content { left: 0%; } -.ui.right.slide.reveal > :last-child { +.ui.right.slide.reveal > .hidden.content { left: auto !important; right: 100% !important; } -.ui.right.slide.reveal:hover > :first-child { +.ui.right.slide.reveal:hover > .visible.content { left: 100% !important; right: auto !important; } -.ui.right.slide.reveal:hover > :last-child { +.ui.right.slide.reveal:hover > .hidden.content { left: auto !important; right: 0% !important; } -.ui.up.slide.reveal > :first-child { +.ui.up.slide.reveal > .visible.content { top: 0% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.up.slide.reveal > :last-child { +.ui.up.slide.reveal > .hidden.content { top: 100% !important; left: 0% !important; right: auto !important; bottom: auto !important; } -.ui.slide.up.reveal:hover > :first-child { +.ui.slide.up.reveal:hover > .visible.content { top: -100% !important; left: 0% !important; } -.ui.slide.up.reveal:hover > :last-child { +.ui.slide.up.reveal:hover > .hidden.content { top: 0% !important; left: 0% !important; } -.ui.down.slide.reveal > :first-child { +.ui.down.slide.reveal > .visible.content { top: auto !important; right: auto !important; bottom: auto !important; bottom: 0% !important; } -.ui.down.slide.reveal > :last-child { +.ui.down.slide.reveal > .hidden.content { top: auto !important; right: auto !important; bottom: 100% !important; left: 0% !important; } -.ui.slide.down.reveal:hover > :first-child { +.ui.slide.down.reveal:hover > .visible.content { left: 0% !important; bottom: -100% !important; } -.ui.slide.down.reveal:hover > :last-child { +.ui.slide.down.reveal:hover > .hidden.content { left: 0% !important; bottom: 0% !important; } @@ -201,10 +201,10 @@ Fade ---------------*/ -.ui.fade.reveal > :first-child { +.ui.fade.reveal > .visible.content { opacity: 1; } -.ui.fade.reveal:hover > :first-child { +.ui.fade.reveal:hover > .visible.content { opacity: 0; } @@ -213,40 +213,40 @@ Move ---------------*/ -.ui.move.reveal > :first-child, -.ui.move.left.reveal > :first-child { +.ui.move.reveal > .visible.content, +.ui.move.left.reveal > .visible.content { left: auto !important; top: auto !important; bottom: auto !important; right: 0% !important; } -.ui.move.reveal:hover > :first-child, -.ui.move.left.reveal:hover > :first-child { +.ui.move.reveal:hover > .visible.content, +.ui.move.left.reveal:hover > .visible.content { right: 100% !important; } -.ui.move.right.reveal > :first-child { +.ui.move.right.reveal > .visible.content { right: auto !important; top: auto !important; bottom: auto !important; left: 0% !important; } -.ui.move.right.reveal:hover > :first-child { +.ui.move.right.reveal:hover > .visible.content { left: 100% !important; } -.ui.move.up.reveal > :first-child { +.ui.move.up.reveal > .visible.content { right: auto !important; left: auto !important; top: auto !important; bottom: 0% !important; } -.ui.move.up.reveal:hover > :first-child { +.ui.move.up.reveal:hover > .visible.content { bottom: 100% !important; } -.ui.move.down.reveal > :first-child { +.ui.move.down.reveal > .visible.content { right: auto !important; left: auto !important; bottom: auto !important; @@ -254,7 +254,7 @@ top: 0% !important; bottom: auto !important; } -.ui.move.down.reveal:hover > :first-child { +.ui.move.down.reveal:hover > .visible.content { top: 100% !important; } @@ -263,7 +263,7 @@ Rotate ---------------*/ -.ui.rotate.reveal > :first-child { +.ui.rotate.reveal > .visible.content { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; @@ -277,16 +277,16 @@ transform: rotate(0deg); } -.ui.rotate.reveal > :first-child, -.ui.rotate.right.reveal > :first-child { +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -o-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; } -.ui.rotate.reveal:hover > :first-child, -.ui.rotate.right.reveal:hover > :first-child { +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -o-transform: rotate(110deg); @@ -294,14 +294,14 @@ transform: rotate(110deg); } -.ui.rotate.left.reveal > :first-child { +.ui.rotate.left.reveal > .visible.content { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } -.ui.rotate.left.reveal:hover > :first-child { +.ui.rotate.left.reveal:hover > .visible.content { -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg);