summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJan Dittberner <jandd@cacert.org>2017-04-22 21:24:52 +0200
committerJan Dittberner <jandd@cacert.org>2017-04-22 21:24:52 +0200
commit2a38b6bcadfc5676d98446f47dc7c9c87bca727b (patch)
tree394ba75c3c439b68b802fbabe3ddb6430f80693d
parent4d23b6a48f26485f6c33d7948970191bd9357471 (diff)
downloadcacert-boardvoting-2a38b6bcadfc5676d98446f47dc7c9c87bca727b.tar.gz
cacert-boardvoting-2a38b6bcadfc5676d98446f47dc7c9c87bca727b.tar.xz
cacert-boardvoting-2a38b6bcadfc5676d98446f47dc7c9c87bca727b.zip
Add jQuery and Semantic-UI for theming
-rw-r--r--semantic.json73
-rw-r--r--semantic/.gitignore1
-rw-r--r--semantic/gulpfile.js72
-rw-r--r--semantic/src/definitions/behaviors/api.js1167
-rw-r--r--semantic/src/definitions/behaviors/colorize.js280
-rw-r--r--semantic/src/definitions/behaviors/form.js1606
-rw-r--r--semantic/src/definitions/behaviors/state.js708
-rw-r--r--semantic/src/definitions/behaviors/visibility.js1311
-rw-r--r--semantic/src/definitions/behaviors/visit.js525
-rw-r--r--semantic/src/definitions/collections/breadcrumb.less122
-rw-r--r--semantic/src/definitions/collections/form.less1053
-rw-r--r--semantic/src/definitions/collections/grid.less1920
-rw-r--r--semantic/src/definitions/collections/menu.less1965
-rw-r--r--semantic/src/definitions/collections/message.less478
-rw-r--r--semantic/src/definitions/collections/table.less1114
-rw-r--r--semantic/src/definitions/elements/button.less3426
-rw-r--r--semantic/src/definitions/elements/container.less143
-rw-r--r--semantic/src/definitions/elements/divider.less255
-rw-r--r--semantic/src/definitions/elements/flag.less52
-rw-r--r--semantic/src/definitions/elements/header.less708
-rw-r--r--semantic/src/definitions/elements/icon.less477
-rw-r--r--semantic/src/definitions/elements/image.less324
-rw-r--r--semantic/src/definitions/elements/input.less507
-rw-r--r--semantic/src/definitions/elements/label.less1257
-rw-r--r--semantic/src/definitions/elements/list.less951
-rw-r--r--semantic/src/definitions/elements/loader.less332
-rw-r--r--semantic/src/definitions/elements/rail.less154
-rw-r--r--semantic/src/definitions/elements/reveal.less265
-rw-r--r--semantic/src/definitions/elements/segment.less775
-rw-r--r--semantic/src/definitions/elements/step.less562
-rw-r--r--semantic/src/definitions/globals/reset.less40
-rw-r--r--semantic/src/definitions/globals/site.js487
-rw-r--r--semantic/src/definitions/globals/site.less166
-rw-r--r--semantic/src/definitions/modules/accordion.js610
-rw-r--r--semantic/src/definitions/modules/accordion.less219
-rw-r--r--semantic/src/definitions/modules/checkbox.js831
-rw-r--r--semantic/src/definitions/modules/checkbox.less598
-rw-r--r--semantic/src/definitions/modules/dimmer.js708
-rw-r--r--semantic/src/definitions/modules/dimmer.less189
-rw-r--r--semantic/src/definitions/modules/dropdown.js3782
-rw-r--r--semantic/src/definitions/modules/dropdown.less1377
-rw-r--r--semantic/src/definitions/modules/embed.js696
-rw-r--r--semantic/src/definitions/modules/embed.less163
-rw-r--r--semantic/src/definitions/modules/modal.js921
-rw-r--r--semantic/src/definitions/modules/modal.less484
-rw-r--r--semantic/src/definitions/modules/nag.js507
-rw-r--r--semantic/src/definitions/modules/nag.less158
-rw-r--r--semantic/src/definitions/modules/popup.js1475
-rw-r--r--semantic/src/definitions/modules/popup.less712
-rw-r--r--semantic/src/definitions/modules/progress.js931
-rw-r--r--semantic/src/definitions/modules/progress.less503
-rw-r--r--semantic/src/definitions/modules/rating.js508
-rw-r--r--semantic/src/definitions/modules/rating.less191
-rw-r--r--semantic/src/definitions/modules/search.js1442
-rw-r--r--semantic/src/definitions/modules/search.less417
-rw-r--r--semantic/src/definitions/modules/shape.js921
-rw-r--r--semantic/src/definitions/modules/shape.less150
-rw-r--r--semantic/src/definitions/modules/sidebar.js1036
-rw-r--r--semantic/src/definitions/modules/sidebar.less548
-rw-r--r--semantic/src/definitions/modules/sticky.js942
-rw-r--r--semantic/src/definitions/modules/sticky.less74
-rw-r--r--semantic/src/definitions/modules/tab.js952
-rw-r--r--semantic/src/definitions/modules/tab.less94
-rw-r--r--semantic/src/definitions/modules/transition.js1095
-rw-r--r--semantic/src/definitions/modules/transition.less78
-rw-r--r--semantic/src/definitions/views/ad.less268
-rw-r--r--semantic/src/definitions/views/card.less1059
-rw-r--r--semantic/src/definitions/views/comment.less269
-rw-r--r--semantic/src/definitions/views/feed.less278
-rw-r--r--semantic/src/definitions/views/item.less474
-rw-r--r--semantic/src/definitions/views/statistic.less557
-rw-r--r--semantic/src/semantic.less66
-rw-r--r--semantic/src/site/collections/breadcrumb.overrides3
-rw-r--r--semantic/src/site/collections/breadcrumb.variables3
-rw-r--r--semantic/src/site/collections/form.overrides3
-rw-r--r--semantic/src/site/collections/form.variables3
-rw-r--r--semantic/src/site/collections/grid.overrides3
-rw-r--r--semantic/src/site/collections/grid.variables3
-rw-r--r--semantic/src/site/collections/menu.overrides3
-rw-r--r--semantic/src/site/collections/menu.variables3
-rw-r--r--semantic/src/site/collections/message.overrides3
-rw-r--r--semantic/src/site/collections/message.variables3
-rw-r--r--semantic/src/site/collections/table.overrides3
-rw-r--r--semantic/src/site/collections/table.variables3
-rw-r--r--semantic/src/site/elements/button.overrides3
-rw-r--r--semantic/src/site/elements/button.variables3
-rw-r--r--semantic/src/site/elements/container.overrides3
-rw-r--r--semantic/src/site/elements/container.variables3
-rw-r--r--semantic/src/site/elements/divider.overrides3
-rw-r--r--semantic/src/site/elements/divider.variables3
-rw-r--r--semantic/src/site/elements/flag.overrides3
-rw-r--r--semantic/src/site/elements/flag.variables3
-rw-r--r--semantic/src/site/elements/header.overrides3
-rw-r--r--semantic/src/site/elements/header.variables3
-rw-r--r--semantic/src/site/elements/icon.overrides3
-rw-r--r--semantic/src/site/elements/icon.variables3
-rw-r--r--semantic/src/site/elements/image.overrides3
-rw-r--r--semantic/src/site/elements/image.variables3
-rw-r--r--semantic/src/site/elements/input.overrides3
-rw-r--r--semantic/src/site/elements/input.variables3
-rw-r--r--semantic/src/site/elements/label.overrides3
-rw-r--r--semantic/src/site/elements/label.variables3
-rw-r--r--semantic/src/site/elements/list.overrides3
-rw-r--r--semantic/src/site/elements/list.variables3
-rw-r--r--semantic/src/site/elements/loader.overrides3
-rw-r--r--semantic/src/site/elements/loader.variables3
-rw-r--r--semantic/src/site/elements/rail.overrides3
-rw-r--r--semantic/src/site/elements/rail.variables3
-rw-r--r--semantic/src/site/elements/reveal.overrides3
-rw-r--r--semantic/src/site/elements/reveal.variables3
-rw-r--r--semantic/src/site/elements/segment.overrides3
-rw-r--r--semantic/src/site/elements/segment.variables3
-rw-r--r--semantic/src/site/elements/step.overrides3
-rw-r--r--semantic/src/site/elements/step.variables3
-rw-r--r--semantic/src/site/globals/reset.overrides3
-rw-r--r--semantic/src/site/globals/reset.variables3
-rw-r--r--semantic/src/site/globals/site.overrides3
-rw-r--r--semantic/src/site/globals/site.variables3
-rw-r--r--semantic/src/site/modules/accordion.overrides3
-rw-r--r--semantic/src/site/modules/accordion.variables3
-rw-r--r--semantic/src/site/modules/chatroom.overrides3
-rw-r--r--semantic/src/site/modules/chatroom.variables3
-rw-r--r--semantic/src/site/modules/checkbox.overrides3
-rw-r--r--semantic/src/site/modules/checkbox.variables3
-rw-r--r--semantic/src/site/modules/dimmer.overrides3
-rw-r--r--semantic/src/site/modules/dimmer.variables3
-rw-r--r--semantic/src/site/modules/dropdown.overrides3
-rw-r--r--semantic/src/site/modules/dropdown.variables3
-rw-r--r--semantic/src/site/modules/embed.overrides3
-rw-r--r--semantic/src/site/modules/embed.variables0
-rw-r--r--semantic/src/site/modules/modal.overrides3
-rw-r--r--semantic/src/site/modules/modal.variables3
-rw-r--r--semantic/src/site/modules/nag.overrides3
-rw-r--r--semantic/src/site/modules/nag.variables3
-rw-r--r--semantic/src/site/modules/popup.overrides3
-rw-r--r--semantic/src/site/modules/popup.variables3
-rw-r--r--semantic/src/site/modules/progress.overrides3
-rw-r--r--semantic/src/site/modules/progress.variables3
-rw-r--r--semantic/src/site/modules/rating.overrides3
-rw-r--r--semantic/src/site/modules/rating.variables3
-rw-r--r--semantic/src/site/modules/search.overrides3
-rw-r--r--semantic/src/site/modules/search.variables3
-rw-r--r--semantic/src/site/modules/shape.overrides3
-rw-r--r--semantic/src/site/modules/shape.variables3
-rw-r--r--semantic/src/site/modules/sidebar.overrides3
-rw-r--r--semantic/src/site/modules/sidebar.variables3
-rw-r--r--semantic/src/site/modules/sticky.overrides3
-rw-r--r--semantic/src/site/modules/sticky.variables3
-rw-r--r--semantic/src/site/modules/tab.overrides3
-rw-r--r--semantic/src/site/modules/tab.variables3
-rw-r--r--semantic/src/site/modules/transition.overrides3
-rw-r--r--semantic/src/site/modules/transition.variables3
-rw-r--r--semantic/src/site/views/ad.overrides3
-rw-r--r--semantic/src/site/views/ad.variables3
-rw-r--r--semantic/src/site/views/card.overrides3
-rw-r--r--semantic/src/site/views/card.variables3
-rw-r--r--semantic/src/site/views/comment.overrides3
-rw-r--r--semantic/src/site/views/comment.variables3
-rw-r--r--semantic/src/site/views/feed.overrides3
-rw-r--r--semantic/src/site/views/feed.variables3
-rw-r--r--semantic/src/site/views/item.overrides3
-rw-r--r--semantic/src/site/views/item.variables3
-rw-r--r--semantic/src/site/views/statistic.overrides3
-rw-r--r--semantic/src/site/views/statistic.variables3
-rw-r--r--semantic/src/theme.config92
-rw-r--r--semantic/src/theme.less61
-rw-r--r--semantic/src/themes/amazon/elements/button.overrides46
-rw-r--r--semantic/src/themes/amazon/elements/button.variables58
-rw-r--r--semantic/src/themes/amazon/globals/site.variables43
-rw-r--r--semantic/src/themes/basic/assets/fonts/icons.eotbin0 -> 40166 bytes
-rw-r--r--semantic/src/themes/basic/assets/fonts/icons.svg450
-rw-r--r--semantic/src/themes/basic/assets/fonts/icons.ttfbin0 -> 39924 bytes
-rw-r--r--semantic/src/themes/basic/assets/fonts/icons.woffbin0 -> 24676 bytes
-rw-r--r--semantic/src/themes/basic/collections/table.overrides4
-rw-r--r--semantic/src/themes/basic/collections/table.variables11
-rw-r--r--semantic/src/themes/basic/elements/button.overrides4
-rw-r--r--semantic/src/themes/basic/elements/button.variables44
-rw-r--r--semantic/src/themes/basic/elements/icon.overrides189
-rw-r--r--semantic/src/themes/basic/elements/icon.variables12
-rw-r--r--semantic/src/themes/basic/elements/step.overrides10
-rw-r--r--semantic/src/themes/basic/elements/step.variables18
-rw-r--r--semantic/src/themes/basic/globals/reset.overrides5
-rw-r--r--semantic/src/themes/basic/globals/reset.variables3
-rw-r--r--semantic/src/themes/basic/modules/progress.overrides3
-rw-r--r--semantic/src/themes/basic/modules/progress.variables15
-rw-r--r--semantic/src/themes/basic/views/card.overrides4
-rw-r--r--semantic/src/themes/basic/views/card.variables35
-rw-r--r--semantic/src/themes/bookish/elements/header.overrides15
-rw-r--r--semantic/src/themes/bookish/elements/header.variables37
-rw-r--r--semantic/src/themes/bootstrap3/elements/button.overrides0
-rw-r--r--semantic/src/themes/bootstrap3/elements/button.variables63
-rw-r--r--semantic/src/themes/chubby/collections/form.overrides16
-rw-r--r--semantic/src/themes/chubby/collections/form.variables9
-rw-r--r--semantic/src/themes/chubby/collections/menu.overrides0
-rw-r--r--semantic/src/themes/chubby/collections/menu.variables40
-rw-r--r--semantic/src/themes/chubby/elements/button.overrides21
-rw-r--r--semantic/src/themes/chubby/elements/button.variables57
-rw-r--r--semantic/src/themes/chubby/elements/header.overrides5
-rw-r--r--semantic/src/themes/chubby/elements/header.variables21
-rw-r--r--semantic/src/themes/chubby/modules/accordion.overrides7
-rw-r--r--semantic/src/themes/chubby/modules/accordion.variables15
-rw-r--r--semantic/src/themes/chubby/views/comment.overrides12
-rw-r--r--semantic/src/themes/chubby/views/comment.variables46
-rw-r--r--semantic/src/themes/classic/collections/table.overrides3
-rw-r--r--semantic/src/themes/classic/collections/table.variables14
-rw-r--r--semantic/src/themes/classic/elements/button.overrides3
-rw-r--r--semantic/src/themes/classic/elements/button.variables96
-rw-r--r--semantic/src/themes/classic/elements/header.overrides3
-rw-r--r--semantic/src/themes/classic/elements/header.variables12
-rw-r--r--semantic/src/themes/classic/modules/progress.overrides3
-rw-r--r--semantic/src/themes/classic/modules/progress.variables9
-rw-r--r--semantic/src/themes/classic/views/card.overrides98
-rw-r--r--semantic/src/themes/classic/views/card.variables22
-rw-r--r--semantic/src/themes/colored/modules/checkbox.overrides0
-rw-r--r--semantic/src/themes/colored/modules/checkbox.variables29
-rw-r--r--semantic/src/themes/default/assets/fonts/icons.eotbin0 -> 165742 bytes
-rw-r--r--semantic/src/themes/default/assets/fonts/icons.svg2671
-rw-r--r--semantic/src/themes/default/assets/fonts/icons.ttfbin0 -> 165548 bytes
-rw-r--r--semantic/src/themes/default/assets/fonts/icons.woffbin0 -> 98024 bytes
-rw-r--r--semantic/src/themes/default/assets/fonts/icons.woff2bin0 -> 77160 bytes
-rw-r--r--semantic/src/themes/default/assets/images/flags.pngbin0 -> 28123 bytes
-rw-r--r--semantic/src/themes/default/collections/breadcrumb.overrides3
-rw-r--r--semantic/src/themes/default/collections/breadcrumb.variables33
-rw-r--r--semantic/src/themes/default/collections/form.overrides3
-rw-r--r--semantic/src/themes/default/collections/form.variables195
-rw-r--r--semantic/src/themes/default/collections/grid.overrides4
-rw-r--r--semantic/src/themes/default/collections/grid.variables103
-rw-r--r--semantic/src/themes/default/collections/menu.overrides3
-rw-r--r--semantic/src/themes/default/collections/menu.variables458
-rw-r--r--semantic/src/themes/default/collections/message.overrides3
-rw-r--r--semantic/src/themes/default/collections/message.variables158
-rw-r--r--semantic/src/themes/default/collections/table.overrides0
-rw-r--r--semantic/src/themes/default/collections/table.variables246
-rw-r--r--semantic/src/themes/default/elements/button.overrides3
-rw-r--r--semantic/src/themes/default/elements/button.variables358
-rw-r--r--semantic/src/themes/default/elements/container.overrides3
-rw-r--r--semantic/src/themes/default/elements/container.variables58
-rw-r--r--semantic/src/themes/default/elements/divider.overrides18
-rw-r--r--semantic/src/themes/default/elements/divider.variables53
-rw-r--r--semantic/src/themes/default/elements/flag.overrides986
-rw-r--r--semantic/src/themes/default/elements/flag.variables13
-rw-r--r--semantic/src/themes/default/elements/header.overrides4
-rw-r--r--semantic/src/themes/default/elements/header.variables151
-rw-r--r--semantic/src/themes/default/elements/icon.overrides991
-rw-r--r--semantic/src/themes/default/elements/icon.variables62
-rw-r--r--semantic/src/themes/default/elements/image.overrides3
-rw-r--r--semantic/src/themes/default/elements/image.variables44
-rw-r--r--semantic/src/themes/default/elements/input.overrides3
-rw-r--r--semantic/src/themes/default/elements/input.variables101
-rw-r--r--semantic/src/themes/default/elements/label.overrides3
-rw-r--r--semantic/src/themes/default/elements/label.variables254
-rw-r--r--semantic/src/themes/default/elements/list.overrides3
-rw-r--r--semantic/src/themes/default/elements/list.variables224
-rw-r--r--semantic/src/themes/default/elements/loader.overrides3
-rw-r--r--semantic/src/themes/default/elements/loader.variables72
-rw-r--r--semantic/src/themes/default/elements/rail.overrides3
-rw-r--r--semantic/src/themes/default/elements/rail.variables34
-rw-r--r--semantic/src/themes/default/elements/reveal.overrides3
-rw-r--r--semantic/src/themes/default/elements/reveal.variables17
-rw-r--r--semantic/src/themes/default/elements/segment.overrides3
-rw-r--r--semantic/src/themes/default/elements/segment.variables139
-rw-r--r--semantic/src/themes/default/elements/step.overrides16
-rw-r--r--semantic/src/themes/default/elements/step.variables130
-rw-r--r--semantic/src/themes/default/globals/reset.overrides429
-rw-r--r--semantic/src/themes/default/globals/reset.variables3
-rw-r--r--semantic/src/themes/default/globals/site.overrides3
-rw-r--r--semantic/src/themes/default/globals/site.variables936
-rw-r--r--semantic/src/themes/default/modules/accordion.overrides28
-rw-r--r--semantic/src/themes/default/modules/accordion.variables100
-rw-r--r--semantic/src/themes/default/modules/chatroom.overrides3
-rw-r--r--semantic/src/themes/default/modules/chatroom.variables3
-rw-r--r--semantic/src/themes/default/modules/checkbox.overrides36
-rw-r--r--semantic/src/themes/default/modules/checkbox.variables193
-rw-r--r--semantic/src/themes/default/modules/dimmer.overrides3
-rw-r--r--semantic/src/themes/default/modules/dimmer.variables61
-rw-r--r--semantic/src/themes/default/modules/dropdown.overrides62
-rw-r--r--semantic/src/themes/default/modules/dropdown.variables373
-rw-r--r--semantic/src/themes/default/modules/embed.overrides3
-rw-r--r--semantic/src/themes/default/modules/embed.variables53
-rw-r--r--semantic/src/themes/default/modules/modal.overrides3
-rw-r--r--semantic/src/themes/default/modules/modal.variables151
-rw-r--r--semantic/src/themes/default/modules/nag.overrides3
-rw-r--r--semantic/src/themes/default/modules/nag.variables74
-rw-r--r--semantic/src/themes/default/modules/popup.overrides3
-rw-r--r--semantic/src/themes/default/modules/popup.variables137
-rw-r--r--semantic/src/themes/default/modules/progress.overrides3
-rw-r--r--semantic/src/themes/default/modules/progress.variables113
-rw-r--r--semantic/src/themes/default/modules/rating.overrides68
-rw-r--r--semantic/src/themes/default/modules/rating.variables103
-rw-r--r--semantic/src/themes/default/modules/search.overrides3
-rw-r--r--semantic/src/themes/default/modules/search.variables158
-rw-r--r--semantic/src/themes/default/modules/shape.overrides3
-rw-r--r--semantic/src/themes/default/modules/shape.variables40
-rw-r--r--semantic/src/themes/default/modules/sidebar.overrides3
-rw-r--r--semantic/src/themes/default/modules/sidebar.variables45
-rw-r--r--semantic/src/themes/default/modules/sticky.overrides3
-rw-r--r--semantic/src/themes/default/modules/sticky.variables7
-rw-r--r--semantic/src/themes/default/modules/tab.overrides3
-rw-r--r--semantic/src/themes/default/modules/tab.variables11
-rw-r--r--semantic/src/themes/default/modules/transition.overrides910
-rw-r--r--semantic/src/themes/default/modules/transition.variables10
-rw-r--r--semantic/src/themes/default/views/ad.overrides3
-rw-r--r--semantic/src/themes/default/views/ad.variables13
-rw-r--r--semantic/src/themes/default/views/card.overrides3
-rw-r--r--semantic/src/themes/default/views/card.variables220
-rw-r--r--semantic/src/themes/default/views/comment.overrides3
-rw-r--r--semantic/src/themes/default/views/comment.variables98
-rw-r--r--semantic/src/themes/default/views/feed.overrides3
-rw-r--r--semantic/src/themes/default/views/feed.variables141
-rw-r--r--semantic/src/themes/default/views/item.overrides3
-rw-r--r--semantic/src/themes/default/views/item.variables157
-rw-r--r--semantic/src/themes/default/views/statistic.overrides3
-rw-r--r--semantic/src/themes/default/views/statistic.variables98
-rw-r--r--semantic/src/themes/duo/elements/loader.overrides3
-rw-r--r--semantic/src/themes/duo/elements/loader.variables6
-rw-r--r--semantic/src/themes/fixed-width/collections/grid.overrides3
-rw-r--r--semantic/src/themes/fixed-width/collections/grid.variables23
-rw-r--r--semantic/src/themes/fixed-width/modules/modal.overrides3
-rw-r--r--semantic/src/themes/fixed-width/modules/modal.variables37
-rw-r--r--semantic/src/themes/flat/collections/form.overrides28
-rw-r--r--semantic/src/themes/flat/collections/form.variables74
-rw-r--r--semantic/src/themes/flat/globals/site.overrides3
-rw-r--r--semantic/src/themes/flat/globals/site.variables107
-rw-r--r--semantic/src/themes/github/assets/fonts/octicons-local.ttfbin0 -> 53604 bytes
-rw-r--r--semantic/src/themes/github/assets/fonts/octicons.svg200
-rw-r--r--semantic/src/themes/github/assets/fonts/octicons.ttfbin0 -> 31740 bytes
-rw-r--r--semantic/src/themes/github/assets/fonts/octicons.woffbin0 -> 17772 bytes
-rw-r--r--semantic/src/themes/github/collections/breadcrumb.variables11
-rw-r--r--semantic/src/themes/github/collections/form.overrides16
-rw-r--r--semantic/src/themes/github/collections/form.variables40
-rw-r--r--semantic/src/themes/github/collections/grid.variables2
-rw-r--r--semantic/src/themes/github/collections/menu.overrides7
-rw-r--r--semantic/src/themes/github/collections/menu.variables61
-rw-r--r--semantic/src/themes/github/collections/message.overrides11
-rw-r--r--semantic/src/themes/github/collections/message.variables29
-rw-r--r--semantic/src/themes/github/collections/table.variables8
-rw-r--r--semantic/src/themes/github/elements/button.overrides4
-rw-r--r--semantic/src/themes/github/elements/button.variables77
-rw-r--r--semantic/src/themes/github/elements/header.variables9
-rw-r--r--semantic/src/themes/github/elements/icon.overrides208
-rw-r--r--semantic/src/themes/github/elements/icon.variables13
-rw-r--r--semantic/src/themes/github/elements/image.variables5
-rw-r--r--semantic/src/themes/github/elements/input.overrides32
-rw-r--r--semantic/src/themes/github/elements/input.variables16
-rw-r--r--semantic/src/themes/github/elements/label.overrides9
-rw-r--r--semantic/src/themes/github/elements/label.variables4
-rw-r--r--semantic/src/themes/github/elements/segment.overrides3
-rw-r--r--semantic/src/themes/github/elements/segment.variables40
-rw-r--r--semantic/src/themes/github/elements/step.overrides26
-rw-r--r--semantic/src/themes/github/elements/step.variables26
-rw-r--r--semantic/src/themes/github/globals/site.variables47
-rw-r--r--semantic/src/themes/github/modules/dropdown.overrides53
-rw-r--r--semantic/src/themes/github/modules/dropdown.variables35
-rw-r--r--semantic/src/themes/github/modules/popup.variables12
-rw-r--r--semantic/src/themes/gmail/collections/message.overrides0
-rw-r--r--semantic/src/themes/gmail/collections/message.variables15
-rw-r--r--semantic/src/themes/instagram/views/card.overrides12
-rw-r--r--semantic/src/themes/instagram/views/card.variables23
-rw-r--r--semantic/src/themes/material/assets/fonts/icons.eotbin0 -> 143258 bytes
-rw-r--r--semantic/src/themes/material/assets/fonts/icons.svg2373
-rw-r--r--semantic/src/themes/material/assets/fonts/icons.ttfbin0 -> 128180 bytes
-rw-r--r--semantic/src/themes/material/assets/fonts/icons.woffbin0 -> 57620 bytes
-rw-r--r--semantic/src/themes/material/collections/menu.overrides1
-rw-r--r--semantic/src/themes/material/collections/menu.variables10
-rw-r--r--semantic/src/themes/material/elements/button.overrides15
-rw-r--r--semantic/src/themes/material/elements/button.variables97
-rw-r--r--semantic/src/themes/material/elements/header.overrides15
-rw-r--r--semantic/src/themes/material/elements/header.variables21
-rw-r--r--semantic/src/themes/material/elements/icon.overrides934
-rw-r--r--semantic/src/themes/material/elements/icon.variables11
-rw-r--r--semantic/src/themes/material/globals/site.overrides0
-rw-r--r--semantic/src/themes/material/globals/site.variables128
-rw-r--r--semantic/src/themes/material/modules/dropdown.overrides5
-rw-r--r--semantic/src/themes/material/modules/dropdown.variables20
-rw-r--r--semantic/src/themes/material/modules/modal.overrides6
-rw-r--r--semantic/src/themes/material/modules/modal.variables15
-rw-r--r--semantic/src/themes/pulsar/elements/loader.overrides70
-rw-r--r--semantic/src/themes/pulsar/elements/loader.variables7
-rw-r--r--semantic/src/themes/raised/elements/button.overrides3
-rw-r--r--semantic/src/themes/raised/elements/button.variables27
-rw-r--r--semantic/src/themes/resetcss/globals/reset.overrides52
-rw-r--r--semantic/src/themes/resetcss/globals/reset.variables3
-rw-r--r--semantic/src/themes/round/elements/button.overrides0
-rw-r--r--semantic/src/themes/round/elements/button.variables138
-rw-r--r--semantic/src/themes/rtl/globals/site.overrides6
-rw-r--r--semantic/src/themes/rtl/globals/site.variables14
-rw-r--r--semantic/src/themes/striped/modules/progress.overrides29
-rw-r--r--semantic/src/themes/striped/modules/progress.variables3
-rw-r--r--semantic/src/themes/timeline/views/feed.overrides27
-rw-r--r--semantic/src/themes/timeline/views/feed.variables36
-rw-r--r--semantic/src/themes/twitter/elements/button.overrides13
-rw-r--r--semantic/src/themes/twitter/elements/button.variables44
-rw-r--r--semantic/tasks/README.md17
-rw-r--r--semantic/tasks/admin/components/create.js332
-rw-r--r--semantic/tasks/admin/components/init.js170
-rw-r--r--semantic/tasks/admin/components/update.js184
-rw-r--r--semantic/tasks/admin/distributions/create.js219
-rw-r--r--semantic/tasks/admin/distributions/init.js169
-rw-r--r--semantic/tasks/admin/distributions/update.js179
-rw-r--r--semantic/tasks/admin/publish.js25
-rw-r--r--semantic/tasks/admin/register.js55
-rw-r--r--semantic/tasks/admin/release.js29
-rw-r--r--semantic/tasks/build.js50
-rw-r--r--semantic/tasks/build/assets.js35
-rw-r--r--semantic/tasks/build/css.js113
-rw-r--r--semantic/tasks/build/javascript.js77
-rw-r--r--semantic/tasks/check-install.js28
-rw-r--r--semantic/tasks/clean.js14
-rw-r--r--semantic/tasks/collections/README.md16
-rw-r--r--semantic/tasks/collections/admin.js49
-rw-r--r--semantic/tasks/collections/build.js19
-rw-r--r--semantic/tasks/collections/internal.js227
-rw-r--r--semantic/tasks/collections/rtl.js16
-rw-r--r--semantic/tasks/config/admin/github.js37
-rw-r--r--semantic/tasks/config/admin/oauth.example.js11
-rw-r--r--semantic/tasks/config/admin/release.js111
-rw-r--r--semantic/tasks/config/admin/templates/README.md32
-rw-r--r--semantic/tasks/config/admin/templates/bower.json29
-rw-r--r--semantic/tasks/config/admin/templates/component-package.js14
-rw-r--r--semantic/tasks/config/admin/templates/composer.json20
-rw-r--r--semantic/tasks/config/admin/templates/css-package.js34
-rw-r--r--semantic/tasks/config/admin/templates/less-package.js21
-rw-r--r--semantic/tasks/config/admin/templates/package.json17
-rw-r--r--semantic/tasks/config/defaults.js117
-rw-r--r--semantic/tasks/config/docs.js32
-rw-r--r--semantic/tasks/config/npm/gulpfile.js72
-rw-r--r--semantic/tasks/config/project/config.js141
-rw-r--r--semantic/tasks/config/project/install.js763
-rw-r--r--semantic/tasks/config/project/release.js65
-rw-r--r--semantic/tasks/config/tasks.js166
-rw-r--r--semantic/tasks/config/user.js57
-rw-r--r--semantic/tasks/docs/build.js189
-rw-r--r--semantic/tasks/docs/metadata.js138
-rw-r--r--semantic/tasks/docs/serve.js255
-rw-r--r--semantic/tasks/install.js459
-rw-r--r--semantic/tasks/rtl/build.js132
-rw-r--r--semantic/tasks/rtl/watch.js221
-rw-r--r--semantic/tasks/version.js11
-rw-r--r--semantic/tasks/watch.js231
-rw-r--r--static/js/jquery.js10253
-rw-r--r--static/js/jquery.min.js4
-rw-r--r--static/js/jquery.min.map1
442 files changed, 85238 insertions, 0 deletions
diff --git a/semantic.json b/semantic.json
new file mode 100644
index 0000000..df8cf48
--- /dev/null
+++ b/semantic.json
@@ -0,0 +1,73 @@
+{
+ "base": "semantic/",
+ "paths": {
+ "source": {
+ "config": "src/theme.config",
+ "definitions": "src/definitions/",
+ "site": "src/site/",
+ "themes": "src/themes/"
+ },
+ "output": {
+ "packaged": "../static/",
+ "uncompressed": "dist/components/",
+ "compressed": "dist/components/",
+ "themes": "../static/themes/"
+ },
+ "clean": "dist/"
+ },
+ "permission": false,
+ "autoInstall": false,
+ "rtl": false,
+ "components": [
+ "reset",
+ "site",
+ "button",
+ "container",
+ "divider",
+ "flag",
+ "header",
+ "icon",
+ "image",
+ "input",
+ "label",
+ "list",
+ "loader",
+ "rail",
+ "reveal",
+ "segment",
+ "step",
+ "breadcrumb",
+ "form",
+ "grid",
+ "menu",
+ "message",
+ "table",
+ "ad",
+ "card",
+ "comment",
+ "feed",
+ "item",
+ "statistic",
+ "accordion",
+ "checkbox",
+ "dimmer",
+ "dropdown",
+ "embed",
+ "modal",
+ "nag",
+ "popup",
+ "progress",
+ "rating",
+ "search",
+ "shape",
+ "sidebar",
+ "sticky",
+ "tab",
+ "transition",
+ "api",
+ "form",
+ "state",
+ "visibility"
+ ],
+ "version": "2.2.10"
+}
diff --git a/semantic/.gitignore b/semantic/.gitignore
new file mode 100644
index 0000000..1521c8b
--- /dev/null
+++ b/semantic/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/semantic/gulpfile.js b/semantic/gulpfile.js
new file mode 100644
index 0000000..bde1960
--- /dev/null
+++ b/semantic/gulpfile.js
@@ -0,0 +1,72 @@
+/*******************************
+ Set-up
+*******************************/
+
+var
+ gulp = require('gulp-help')(require('gulp')),
+
+ // read user config to know what task to load
+ config = require('./tasks/config/user'),
+
+ // watch changes
+ watch = require('./tasks/watch'),
+
+ // build all files
+ build = require('./tasks/build'),
+ buildJS = require('./tasks/build/javascript'),
+ buildCSS = require('./tasks/build/css'),
+ buildAssets = require('./tasks/build/assets'),
+
+ // utility
+ clean = require('./tasks/clean'),
+ version = require('./tasks/version'),
+
+ // docs tasks
+ serveDocs = require('./tasks/docs/serve'),
+ buildDocs = require('./tasks/docs/build'),
+
+ // rtl
+ buildRTL = require('./tasks/rtl/build'),
+ watchRTL = require('./tasks/rtl/watch')
+;
+
+
+/*******************************
+ Tasks
+*******************************/
+
+gulp.task('default', false, [
+ 'watch'
+]);
+
+gulp.task('watch', 'Watch for site/theme changes', watch);
+
+gulp.task('build', 'Builds all files from source', build);
+gulp.task('build-javascript', 'Builds all javascript from source', buildJS);
+gulp.task('build-css', 'Builds all css from source', buildCSS);
+gulp.task('build-assets', 'Copies all assets from source', buildAssets);
+
+gulp.task('clean', 'Clean dist folder', clean);
+gulp.task('version', 'Displays current version of Semantic', version);
+
+/*--------------
+ Docs
+---------------*/
+
+/*
+ Lets you serve files to a local documentation instance
+ https://github.com/Semantic-Org/Semantic-UI-Docs/
+*/
+
+gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);
+gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);
+
+
+/*--------------
+ RTL
+---------------*/
+
+if(config.rtl) {
+ gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);
+ gulp.task('build-rtl', 'Build all files as RTL', buildRTL);
+}
diff --git a/semantic/src/definitions/behaviors/api.js b/semantic/src/definitions/behaviors/api.js
new file mode 100644
index 0000000..578e201
--- /dev/null
+++ b/semantic/src/definitions/behaviors/api.js
@@ -0,0 +1,1167 @@
+/*!
+ * # Semantic UI - API
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+var
+ window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.api = $.fn.api = function(parameters) {
+
+ var
+ // use window context if none specified
+ $allModules = $.isFunction(this)
+ ? $(window)
+ : $(this),
+ moduleSelector = $allModules.selector || '',
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+
+ returnedValue
+ ;
+
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.api.settings, parameters)
+ : $.extend({}, $.fn.api.settings),
+
+ // internal aliases
+ namespace = settings.namespace,
+ metadata = settings.metadata,
+ selector = settings.selector,
+ error = settings.error,
+ className = settings.className,
+
+ // define namespaces for modules
+ eventNamespace = '.' + namespace,
+ moduleNamespace = 'module-' + namespace,
+
+ // element that creates request
+ $module = $(this),
+ $form = $module.closest(selector.form),
+
+ // context used for state
+ $context = (settings.stateContext)
+ ? $(settings.stateContext)
+ : $module,
+
+ // request details
+ ajaxSettings,
+ requestSettings,
+ url,
+ data,
+ requestStartTime,
+
+ // standard module
+ element = this,
+ context = $context[0],
+ instance = $module.data(moduleNamespace),
+ module
+ ;
+
+ module = {
+
+ initialize: function() {
+ if(!methodInvoked) {
+ module.bind.events();
+ }
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, instance)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module for', element);
+ $module
+ .removeData(moduleNamespace)
+ .off(eventNamespace)
+ ;
+ },
+
+ bind: {
+ events: function() {
+ var
+ triggerEvent = module.get.event()
+ ;
+ if( triggerEvent ) {
+ module.verbose('Attaching API events to element', triggerEvent);
+ $module
+ .on(triggerEvent + eventNamespace, module.event.trigger)
+ ;
+ }
+ else if(settings.on == 'now') {
+ module.debug('Querying API endpoint immediately');
+ module.query();
+ }
+ }
+ },
+
+ decode: {
+ json: function(response) {
+ if(response !== undefined && typeof response == 'string') {
+ try {
+ response = JSON.parse(response);
+ }
+ catch(e) {
+ // isnt json string
+ }
+ }
+ return response;
+ }
+ },
+
+ read: {
+ cachedResponse: function(url) {
+ var
+ response
+ ;
+ if(window.Storage === undefined) {
+ module.error(error.noStorage);
+ return;
+ }
+ response = sessionStorage.getItem(url);
+ module.debug('Using cached response', url, response);
+ response = module.decode.json(response);
+ return response;
+ }
+ },
+ write: {
+ cachedResponse: function(url, response) {
+ if(response && response === '') {
+ module.debug('Response empty, not caching', response);
+ return;
+ }
+ if(window.Storage === undefined) {
+ module.error(error.noStorage);
+ return;
+ }
+ if( $.isPlainObject(response) ) {
+ response = JSON.stringify(response);
+ }
+ sessionStorage.setItem(url, response);
+ module.verbose('Storing cached response for url', url, response);
+ }
+ },
+
+ query: function() {
+
+ if(module.is.disabled()) {
+ module.debug('Element is disabled API request aborted');
+ return;
+ }
+
+ if(module.is.loading()) {
+ if(settings.interruptRequests) {
+ module.debug('Interrupting previous request');
+ module.abort();
+ }
+ else {
+ module.debug('Cancelling request, previous request is still pending');
+ return;
+ }
+ }
+
+ // pass element metadata to url (value, text)
+ if(settings.defaultData) {
+ $.extend(true, settings.urlData, module.get.defaultData());
+ }
+
+ // Add form content
+ if(settings.serializeForm) {
+ settings.data = module.add.formData(settings.data);
+ }
+
+ // call beforesend and get any settings changes
+ requestSettings = module.get.settings();
+
+ // check if before send cancelled request
+ if(requestSettings === false) {
+ module.cancelled = true;
+ module.error(error.beforeSend);
+ return;
+ }
+ else {
+ module.cancelled = false;
+ }
+
+ // get url
+ url = module.get.templatedURL();
+
+ if(!url && !module.is.mocked()) {
+ module.error(error.missingURL);
+ return;
+ }
+
+ // replace variables
+ url = module.add.urlData( url );
+ // missing url parameters
+ if( !url && !module.is.mocked()) {
+ return;
+ }
+
+ requestSettings.url = settings.base + url;
+
+ // look for jQuery ajax parameters in settings
+ ajaxSettings = $.extend(true, {}, settings, {
+ type : settings.method || settings.type,
+ data : data,
+ url : settings.base + url,
+ beforeSend : settings.beforeXHR,
+ success : function() {},
+ failure : function() {},
+ complete : function() {}
+ });
+
+ module.debug('Querying URL', ajaxSettings.url);
+ module.verbose('Using AJAX settings', ajaxSettings);
+ if(settings.cache === 'local' && module.read.cachedResponse(url)) {
+ module.debug('Response returned from local cache');
+ module.request = module.create.request();
+ module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
+ return;
+ }
+
+ if( !settings.throttle ) {
+ module.debug('Sending request', data, ajaxSettings.method);
+ module.send.request();
+ }
+ else {
+ if(!settings.throttleFirstRequest && !module.timer) {
+ module.debug('Sending request', data, ajaxSettings.method);
+ module.send.request();
+ module.timer = setTimeout(function(){}, settings.throttle);
+ }
+ else {
+ module.debug('Throttling request', settings.throttle);
+ clearTimeout(module.timer);
+ module.timer = setTimeout(function() {
+ if(module.timer) {
+ delete module.timer;
+ }
+ module.debug('Sending throttled request', data, ajaxSettings.method);
+ module.send.request();
+ }, settings.throttle);
+ }
+ }
+
+ },
+
+ should: {
+ removeError: function() {
+ return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );
+ }
+ },
+
+ is: {
+ disabled: function() {
+ return ($module.filter(selector.disabled).length > 0);
+ },
+ expectingJSON: function() {
+ return settings.dataType === 'json' || settings.dataType === 'jsonp';
+ },
+ form: function() {
+ return $module.is('form') || $context.is('form');
+ },
+ mocked: function() {
+ return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);
+ },
+ input: function() {
+ return $module.is('input');
+ },
+ loading: function() {
+ return (module.request)
+ ? (module.request.state() == 'pending')
+ : false
+ ;
+ },
+ abortedRequest: function(xhr) {
+ if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {
+ module.verbose('XHR request determined to be aborted');
+ return true;
+ }
+ else {
+ module.verbose('XHR request was not aborted');
+ return false;
+ }
+ },
+ validResponse: function(response) {
+ if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {
+ module.verbose('Response is not JSON, skipping validation', settings.successTest, response);
+ return true;
+ }
+ module.debug('Checking JSON returned success', settings.successTest, response);
+ if( settings.successTest(response) ) {
+ module.debug('Response passed success test', response);
+ return true;
+ }
+ else {
+ module.debug('Response failed success test', response);
+ return false;
+ }
+ }
+ },
+
+ was: {
+ cancelled: function() {
+ return (module.cancelled || false);
+ },
+ succesful: function() {
+ return (module.request && module.request.state() == 'resolved');
+ },
+ failure: function() {
+ return (module.request && module.request.state() == 'rejected');
+ },
+ complete: function() {
+ return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );
+ }
+ },
+
+ add: {
+ urlData: function(url, urlData) {
+ var
+ requiredVariables,
+ optionalVariables
+ ;
+ if(url) {
+ requiredVariables = url.match(settings.regExp.required);
+ optionalVariables = url.match(settings.regExp.optional);
+ urlData = urlData || settings.urlData;
+ if(requiredVariables) {
+ module.debug('Looking for required URL variables', requiredVariables);
+ $.each(requiredVariables, function(index, templatedString) {
+ var
+ // allow legacy {$var} style
+ variable = (templatedString.indexOf('$') !== -1)
+ ? templatedString.substr(2, templatedString.length - 3)
+ : templatedString.substr(1, templatedString.length - 2),
+ value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
+ ? urlData[variable]
+ : ($module.data(variable) !== undefined)
+ ? $module.data(variable)
+ : ($context.data(variable) !== undefined)
+ ? $context.data(variable)
+ : urlData[variable]
+ ;
+ // remove value
+ if(value === undefined) {
+ module.error(error.requiredParameter, variable, url);
+ url = false;
+ return false;
+ }
+ else {
+ module.verbose('Found required variable', variable, value);
+ value = (settings.encodeParameters)
+ ? module.get.urlEncodedValue(value)
+ : value
+ ;
+ url = url.replace(templatedString, value);
+ }
+ });
+ }
+ if(optionalVariables) {
+ module.debug('Looking for optional URL variables', requiredVariables);
+ $.each(optionalVariables, function(index, templatedString) {
+ var
+ // allow legacy {/$var} style
+ variable = (templatedString.indexOf('$') !== -1)
+ ? templatedString.substr(3, templatedString.length - 4)
+ : templatedString.substr(2, templatedString.length - 3),
+ value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
+ ? urlData[variable]
+ : ($module.data(variable) !== undefined)
+ ? $module.data(variable)
+ : ($context.data(variable) !== undefined)
+ ? $context.data(variable)
+ : urlData[variable]
+ ;
+ // optional replacement
+ if(value !== undefined) {
+ module.verbose('Optional variable Found', variable, value);
+ url = url.replace(templatedString, value);
+ }
+ else {
+ module.verbose('Optional variable not found', variable);
+ // remove preceding slash if set
+ if(url.indexOf('/' + templatedString) !== -1) {
+ url = url.replace('/' + templatedString, '');
+ }
+ else {
+ url = url.replace(templatedString, '');
+ }
+ }
+ });
+ }
+ }
+ return url;
+ },
+ formData: function(data) {
+ var
+ canSerialize = ($.fn.serializeObject !== undefined),
+ formData = (canSerialize)
+ ? $form.serializeObject()
+ : $form.serialize(),
+ hasOtherData
+ ;
+ data = data || settings.data;
+ hasOtherData = $.isPlainObject(data);
+
+ if(hasOtherData) {
+ if(canSerialize) {
+ module.debug('Extending existing data with form data', data, formData);
+ data = $.extend(true, {}, data, formData);
+ }
+ else {
+ module.error(error.missingSerialize);
+ module.debug('Cant extend data. Replacing data with form data', data, formData);
+ data = formData;
+ }
+ }
+ else {
+ module.debug('Adding form data', formData);
+ data = formData;
+ }
+ return data;
+ }
+ },
+
+ send: {
+ request: function() {
+ module.set.loading();
+ module.request = module.create.request();
+ if( module.is.mocked() ) {
+ module.mockedXHR = module.create.mockedXHR();
+ }
+ else {
+ module.xhr = module.create.xhr();
+ }
+ settings.onRequest.call(context, module.request, module.xhr);
+ }
+ },
+
+ event: {
+ trigger: function(event) {
+ module.query();
+ if(event.type == 'submit' || event.type == 'click') {
+ event.preventDefault();
+ }
+ },
+ xhr: {
+ always: function() {
+ // nothing special
+ },
+ done: function(response, textStatus, xhr) {
+ var
+ context = this,
+ elapsedTime = (new Date().getTime() - requestStartTime),
+ timeLeft = (settings.loadingDuration - elapsedTime),
+ translatedResponse = ( $.isFunction(settings.onResponse) )
+ ? module.is.expectingJSON()
+ ? settings.onResponse.call(context, $.extend(true, {}, response))
+ : settings.onResponse.call(context, response)
+ : false
+ ;
+ timeLeft = (timeLeft > 0)
+ ? timeLeft
+ : 0
+ ;
+ if(translatedResponse) {
+ module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);
+ response = translatedResponse;
+ }
+ if(timeLeft > 0) {
+ module.debug('Response completed early delaying state change by', timeLeft);
+ }
+ setTimeout(function() {
+ if( module.is.validResponse(response) ) {
+ module.request.resolveWith(context, [response, xhr]);
+ }
+ else {
+ module.request.rejectWith(context, [xhr, 'invalid']);
+ }
+ }, timeLeft);
+ },
+ fail: function(xhr, status, httpMessage) {
+ var
+ context = this,
+ elapsedTime = (new Date().getTime() - requestStartTime),
+ timeLeft = (settings.loadingDuration - elapsedTime)
+ ;
+ timeLeft = (timeLeft > 0)
+ ? timeLeft
+ : 0
+ ;
+ if(timeLeft > 0) {
+ module.debug('Response completed early delaying state change by', timeLeft);
+ }
+ setTimeout(function() {
+ if( module.is.abortedRequest(xhr) ) {
+ module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);
+ }
+ else {
+ module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);
+ }
+ }, timeLeft);
+ }
+ },
+ request: {
+ done: function(response, xhr) {
+ module.debug('Successful API Response', response);
+ if(settings.cache === 'local' && url) {
+ module.write.cachedResponse(url, response);
+ module.debug('Saving server response locally', module.cache);
+ }
+ settings.onSuccess.call(context, response, $module, xhr);
+ },
+ complete: function(firstParameter, secondParameter) {
+ var
+ xhr,
+ response
+ ;
+ // have to guess callback parameters based on request success
+ if( module.was.succesful() ) {
+ response = firstParameter;
+ xhr = secondParameter;
+ }
+ else {
+ xhr = firstParameter;
+ response = module.get.responseFromXHR(xhr);
+ }
+ module.remove.loading();
+ settings.onComplete.call(context, response, $module, xhr);
+ },
+ fail: function(xhr, status, httpMessage) {
+ var
+ // pull response from xhr if available
+ response = module.get.responseFromXHR(xhr),
+ errorMessage = module.get.errorFromRequest(response, status, httpMessage)
+ ;
+ if(status == 'aborted') {
+ module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);
+ settings.onAbort.call(context, status, $module, xhr);
+ return true;
+ }
+ else if(status == 'invalid') {
+ module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);
+ }
+ else if(status == 'error') {
+ if(xhr !== undefined) {
+ module.debug('XHR produced a server error', status, httpMessage);
+ // make sure we have an error to display to console
+ if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {
+ module.error(error.statusMessage + httpMessage, ajaxSettings.url);
+ }
+ settings.onError.call(context, errorMessage, $module, xhr);
+ }
+ }
+
+ if(settings.errorDuration && status !== 'aborted') {
+ module.debug('Adding error state');
+ module.set.error();
+ if( module.should.removeError() ) {
+ setTimeout(module.remove.error, settings.errorDuration);
+ }
+ }
+ module.debug('API Request failed', errorMessage, xhr);
+ settings.onFailure.call(context, response, $module, xhr);
+ }
+ }
+ },
+
+ create: {
+
+ request: function() {
+ // api request promise
+ return $.Deferred()
+ .always(module.event.request.complete)
+ .done(module.event.request.done)
+ .fail(module.event.request.fail)
+ ;
+ },
+
+ mockedXHR: function () {
+ var
+ // xhr does not simulate these properties of xhr but must return them
+ textStatus = false,
+ status = false,
+ httpMessage = false,
+ responder = settings.mockResponse || settings.response,
+ asyncResponder = settings.mockResponseAsync || settings.responseAsync,
+ asyncCallback,
+ response,
+ mockedXHR
+ ;
+
+ mockedXHR = $.Deferred()
+ .always(module.event.xhr.complete)
+ .done(module.event.xhr.done)
+ .fail(module.event.xhr.fail)
+ ;
+
+ if(responder) {
+ if( $.isFunction(responder) ) {
+ module.debug('Using specified synchronous callback', responder);
+ response = responder.call(context, requestSettings);
+ }
+ else {
+ module.debug('Using settings specified response', responder);
+ response = responder;
+ }
+ // simulating response
+ mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
+ }
+ else if( $.isFunction(asyncResponder) ) {
+ asyncCallback = function(response) {
+ module.debug('Async callback returned response', response);
+
+ if(response) {
+ mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
+ }
+ else {
+ mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);
+ }
+ };
+ module.debug('Using specified async response callback', asyncResponder);
+ asyncResponder.call(context, requestSettings, asyncCallback);
+ }
+ return mockedXHR;
+ },
+
+ xhr: function() {
+ var
+ xhr
+ ;
+ // ajax request promise
+ xhr = $.ajax(ajaxSettings)
+ .always(module.event.xhr.always)
+ .done(module.event.xhr.done)
+ .fail(module.event.xhr.fail)
+ ;
+ module.verbose('Created server request', xhr, ajaxSettings);
+ return xhr;
+ }
+ },
+
+ set: {
+ error: function() {
+ module.verbose('Adding error state to element', $context);
+ $context.addClass(className.error);
+ },
+ loading: function() {
+ module.verbose('Adding loading state to element', $context);
+ $context.addClass(className.loading);
+ requestStartTime = new Date().getTime();
+ }
+ },
+
+ remove: {
+ error: function() {
+ module.verbose('Removing error state from element', $context);
+ $context.removeClass(className.error);
+ },
+ loading: function() {
+ module.verbose('Removing loading state from element', $context);
+ $context.removeClass(className.loading);
+ }
+ },
+
+ get: {
+ responseFromXHR: function(xhr) {
+ return $.isPlainObject(xhr)
+ ? (module.is.expectingJSON())
+ ? module.decode.json(xhr.responseText)
+ : xhr.responseText
+ : false
+ ;
+ },
+ errorFromRequest: function(response, status, httpMessage) {
+ return ($.isPlainObject(response) && response.error !== undefined)
+ ? response.error // use json error message
+ : (settings.error[status] !== undefined) // use server error message
+ ? settings.error[status]
+ : httpMessage
+ ;
+ },
+ request: function() {
+ return module.request || false;
+ },
+ xhr: function() {
+ return module.xhr || false;
+ },
+ settings: function() {
+ var
+ runSettings
+ ;
+ runSettings = settings.beforeSend.call(context, settings);
+ if(runSettings) {
+ if(runSettings.success !== undefined) {
+ module.debug('Legacy success callback detected', runSettings);
+ module.error(error.legacyParameters, runSettings.success);
+ runSettings.onSuccess = runSettings.success;
+ }
+ if(runSettings.failure !== undefined) {
+ module.debug('Legacy failure callback detected', runSettings);
+ module.error(error.legacyParameters, runSettings.failure);
+ runSettings.onFailure = runSettings.failure;
+ }
+ if(runSettings.complete !== undefined) {
+ module.debug('Legacy complete callback detected', runSettings);
+ module.error(error.legacyParameters, runSettings.complete);
+ runSettings.onComplete = runSettings.complete;
+ }
+ }
+ if(runSettings === undefined) {
+ module.error(error.noReturnedValue);
+ }
+ if(runSettings === false) {
+ return runSettings;
+ }
+ return (runSettings !== undefined)
+ ? $.extend(true, {}, runSettings)
+ : $.extend(true, {}, settings)
+ ;
+ },
+ urlEncodedValue: function(value) {
+ var
+ decodedValue = window.decodeURIComponent(value),
+ encodedValue = window.encodeURIComponent(value),
+ alreadyEncoded = (decodedValue !== value)
+ ;
+ if(alreadyEncoded) {
+ module.debug('URL value is already encoded, avoiding double encoding', value);
+ return value;
+ }
+ module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
+ return encodedValue;
+ },
+ defaultData: function() {
+ var
+ data = {}
+ ;
+ if( !$.isWindow(element) ) {
+ if( module.is.input() ) {
+ data.value = $module.val();
+ }
+ else if( module.is.form() ) {
+
+ }
+ else {
+ data.text = $module.text();
+ }
+ }
+ return data;
+ },
+ event: function() {
+ if( $.isWindow(element) || settings.on == 'now' ) {
+ module.debug('API called without element, no events attached');
+ return false;
+ }
+ else if(settings.on == 'auto') {
+ if( $module.is('input') ) {
+ return (element.oninput !== undefined)
+ ? 'input'
+ : (element.onpropertychange !== undefined)
+ ? 'propertychange'
+ : 'keyup'
+ ;
+ }
+ else if( $module.is('form') ) {
+ return 'submit';
+ }
+ else {
+ return 'click';
+ }
+ }
+ else {
+ return settings.on;
+ }
+ },
+ templatedURL: function(action) {
+ action = action || $module.data(metadata.action) || settings.action || false;
+ url = $module.data(metadata.url) || settings.url || false;
+ if(url) {
+ module.debug('Using specified url', url);
+ return url;
+ }
+ if(action) {
+ module.debug('Looking up url for action', action, settings.api);
+ if(settings.api[action] === undefined && !module.is.mocked()) {
+ module.error(error.missingAction, settings.action, settings.api);
+ return;
+ }
+ url = settings.api[action];
+ }
+ else if( module.is.form() ) {
+ url = $module.attr('action') || $context.attr('action') || false;
+ module.debug('No url or action specified, defaulting to form action', url);
+ }
+ return url;
+ }
+ },
+
+ abort: function() {
+ var
+ xhr = module.get.xhr()
+ ;
+ if( xhr && xhr.state() !== 'resolved') {
+ module.debug('Cancelling API request');
+ xhr.abort();
+ }
+ },
+
+ // reset state
+ reset: function() {
+ module.remove.error();
+ module.remove.loading();
+ },
+
+ setting: function(name, value) {
+ module.debug('Changing setting', name, value);
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ if($.isPlainObject(settings[name])) {
+ $.extend(true, settings[name], value);
+ }
+ else {
+ settings[name] = value;
+ }
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ //'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.api.settings = {
+
+ name : 'API',
+ namespace : 'api',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ // object containing all templates endpoints
+ api : {},
+
+ // whether to cache responses
+ cache : true,
+
+ // whether new requests should abort previous requests
+ interruptRequests : true,
+
+ // event binding
+ on : 'auto',
+
+ // context for applying state classes
+ stateContext : false,
+
+ // duration for loading state
+ loadingDuration : 0,
+
+ // whether to hide errors after a period of time
+ hideError : 'auto',
+
+ // duration for error state
+ errorDuration : 2000,
+
+ // whether parameters should be encoded with encodeURIComponent
+ encodeParameters : true,
+
+ // API action to use
+ action : false,
+
+ // templated URL to use
+ url : false,
+
+ // base URL to apply to all endpoints
+ base : '',
+
+ // data that will
+ urlData : {},
+
+ // whether to add default data to url data
+ defaultData : true,
+
+ // whether to serialize closest form
+ serializeForm : false,
+
+ // how long to wait before request should occur
+ throttle : 0,
+
+ // whether to throttle first request or only repeated
+ throttleFirstRequest : true,
+
+ // standard ajax settings
+ method : 'get',
+ data : {},
+ dataType : 'json',
+
+ // mock response
+ mockResponse : false,
+ mockResponseAsync : false,
+
+ // aliases for mock
+ response : false,
+ responseAsync : false,
+
+ // callbacks before request
+ beforeSend : function(settings) { return settings; },
+ beforeXHR : function(xhr) {},
+ onRequest : function(promise, xhr) {},
+
+ // after request
+ onResponse : false, // function(response) { },
+
+ // response was successful, if JSON passed validation
+ onSuccess : function(response, $module) {},
+
+ // request finished without aborting
+ onComplete : function(response, $module) {},
+
+ // failed JSON success test
+ onFailure : function(response, $module) {},
+
+ // server error
+ onError : function(errorMessage, $module) {},
+
+ // request aborted
+ onAbort : function(errorMessage, $module) {},
+
+ successTest : false,
+
+ // errors
+ error : {
+ beforeSend : 'The before send function has aborted the request',
+ error : 'There was an error with your request',
+ exitConditions : 'API Request Aborted. Exit conditions met',
+ JSONParse : 'JSON could not be parsed during error handling',
+ legacyParameters : 'You are using legacy API success callback names',
+ method : 'The method you called is not defined',
+ missingAction : 'API action used but no url was defined',
+ missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',
+ missingURL : 'No URL specified for api event',
+ noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
+ noStorage : 'Caching responses locally requires session storage',
+ parseError : 'There was an error parsing your request',
+ requiredParameter : 'Missing a required URL parameter: ',
+ statusMessage : 'Server gave an error: ',
+ timeout : 'Your request timed out'
+ },
+
+ regExp : {
+ required : /\{\$*[A-z0-9]+\}/g,
+ optional : /\{\/\$*[A-z0-9]+\}/g,
+ },
+
+ className: {
+ loading : 'loading',
+ error : 'error'
+ },
+
+ selector: {
+ disabled : '.disabled',
+ form : 'form'
+ },
+
+ metadata: {
+ action : 'action',
+ url : 'url'
+ }
+};
+
+
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/colorize.js b/semantic/src/definitions/behaviors/colorize.js
new file mode 100644
index 0000000..31efb1c
--- /dev/null
+++ b/semantic/src/definitions/behaviors/colorize.js
@@ -0,0 +1,280 @@
+/*!
+ * # Semantic UI - Colorize
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.colorize = function(parameters) {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.colorize.settings, parameters)
+ : $.extend({}, $.fn.colorize.settings),
+ // hoist arguments
+ moduleArguments = arguments || false
+ ;
+ $(this)
+ .each(function(instanceIndex) {
+
+ var
+ $module = $(this),
+
+ mainCanvas = $('<canvas />')[0],
+ imageCanvas = $('<canvas />')[0],
+ overlayCanvas = $('<canvas />')[0],
+
+ backgroundImage = new Image(),
+
+ // defs
+ mainContext,
+ imageContext,
+ overlayContext,
+
+ image,
+ imageName,
+
+ width,
+ height,
+
+ // shortcuts
+ colors = settings.colors,
+ paths = settings.paths,
+ namespace = settings.namespace,
+ error = settings.error,
+
+ // boilerplate
+ instance = $module.data('module-' + namespace),
+ module
+ ;
+
+ module = {
+
+ checkPreconditions: function() {
+ module.debug('Checking pre-conditions');
+
+ if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) {
+ module.error(error.undefinedColors);
+ return false;
+ }
+ return true;
+ },
+
+ async: function(callback) {
+ if(settings.async) {
+ setTimeout(callback, 0);
+ }
+ else {
+ callback();
+ }
+ },
+
+ getMetadata: function() {
+ module.debug('Grabbing metadata');
+ image = $module.data('image') || settings.image || undefined;
+ imageName = $module.data('name') || settings.name || instanceIndex;
+ width = settings.width || $module.width();
+ height = settings.height || $module.height();
+ if(width === 0 || height === 0) {
+ module.error(error.undefinedSize);
+ }
+ },
+
+ initialize: function() {
+ module.debug('Initializing with colors', colors);
+ if( module.checkPreconditions() ) {
+
+ module.async(function() {
+ module.getMetadata();
+ module.canvas.create();
+
+ module.draw.image(function() {
+ module.draw.colors();
+ module.canvas.merge();
+ });
+ $module
+ .data('module-' + namespace, module)
+ ;
+ });
+ }
+ },
+
+ redraw: function() {
+ module.debug('Redrawing image');
+ module.async(function() {
+ module.canvas.clear();
+ module.draw.colors();
+ module.canvas.merge();
+ });
+ },
+
+ change: {
+ color: function(colorName, color) {
+ module.debug('Changing color', colorName);
+ if(colors[colorName] === undefined) {
+ module.error(error.missingColor);
+ return false;
+ }
+ colors[colorName] = color;
+ module.redraw();
+ }
+ },
+
+ canvas: {
+ create: function() {
+ module.debug('Creating canvases');
+
+ mainCanvas.width = width;
+ mainCanvas.height = height;
+ imageCanvas.width = width;
+ imageCanvas.height = height;
+ overlayCanvas.width = width;
+ overlayCanvas.height = height;
+
+ mainContext = mainCanvas.getContext('2d');
+ imageContext = imageCanvas.getContext('2d');
+ overlayContext = overlayCanvas.getContext('2d');
+
+ $module
+ .append( mainCanvas )
+ ;
+ mainContext = $module.children('canvas')[0].getContext('2d');
+ },
+ clear: function(context) {
+ module.debug('Clearing canvas');
+ overlayContext.fillStyle = '#FFFFFF';
+ overlayContext.fillRect(0, 0, width, height);
+ },
+ merge: function() {
+ if( !$.isFunction(mainContext.blendOnto) ) {
+ module.error(error.missingPlugin);
+ return;
+ }
+ mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0);
+ overlayContext.blendOnto(mainContext, 'multiply');
+ }
+ },
+
+ draw: {
+
+ image: function(callback) {
+ module.debug('Drawing image');
+ callback = callback || function(){};
+ if(image) {
+ backgroundImage.src = image;
+ backgroundImage.onload = function() {
+ imageContext.drawImage(backgroundImage, 0, 0);
+ callback();
+ };
+ }
+ else {
+ module.error(error.noImage);
+ callback();
+ }
+ },
+
+ colors: function() {
+ module.debug('Drawing color overlays', colors);
+ $.each(colors, function(colorName, color) {
+ settings.onDraw(overlayContext, imageName, colorName, color);
+ });
+ }
+
+ },
+
+ debug: function(message, variableName) {
+ if(settings.debug) {
+ if(variableName !== undefined) {
+ console.info(settings.name + ': ' + message, variableName);
+ }
+ else {
+ console.info(settings.name + ': ' + message);
+ }
+ }
+ },
+ error: function(errorMessage) {
+ console.warn(settings.name + ': ' + 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.error.method);
+ return false;
+ });
+ }
+ return ( $.isFunction( method ) )
+ ? method.apply(context, methodArguments)
+ : false
+ ;
+ }
+
+ };
+ 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.colorize.settings = {
+ name : 'Image Colorizer',
+ debug : true,
+ namespace : 'colorize',
+
+ onDraw : function(overlayContext, imageName, colorName, color) {},
+
+ // whether to block execution while updating canvas
+ async : true,
+ // object containing names and default values of color regions
+ colors : {},
+
+ metadata: {
+ image : 'image',
+ name : 'name'
+ },
+
+ error: {
+ noImage : 'No tracing image specified',
+ undefinedColors : 'No default colors specified.',
+ missingColor : 'Attempted to change color that does not exist',
+ missingPlugin : 'Blend onto plug-in must be included',
+ undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.'
+ }
+
+};
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/form.js b/semantic/src/definitions/behaviors/form.js
new file mode 100644
index 0000000..0176455
--- /dev/null
+++ b/semantic/src/definitions/behaviors/form.js
@@ -0,0 +1,1606 @@
+/*!
+ * # Semantic UI - Form Validation
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.form = function(parameters) {
+ var
+ $allModules = $(this),
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ legacyParameters = arguments[1],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue
+ ;
+ $allModules
+ .each(function() {
+ var
+ $module = $(this),
+ element = this,
+
+ formErrors = [],
+ keyHeldDown = false,
+
+ // set at run-time
+ $field,
+ $group,
+ $message,
+ $prompt,
+ $submit,
+ $clear,
+ $reset,
+
+ settings,
+ validation,
+
+ metadata,
+ selector,
+ className,
+ regExp,
+ error,
+
+ namespace,
+ moduleNamespace,
+ eventNamespace,
+
+ instance,
+ module
+ ;
+
+ module = {
+
+ initialize: function() {
+
+ // settings grabbed at run time
+ module.get.settings();
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.instantiate();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.verbose('Initializing form validation', $module, settings);
+ module.bindEvents();
+ module.set.defaults();
+ module.instantiate();
+ }
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, module)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module', instance);
+ module.removeEvents();
+ $module
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ refresh: function() {
+ module.verbose('Refreshing selector cache');
+ $field = $module.find(selector.field);
+ $group = $module.find(selector.group);
+ $message = $module.find(selector.message);
+ $prompt = $module.find(selector.prompt);
+
+ $submit = $module.find(selector.submit);
+ $clear = $module.find(selector.clear);
+ $reset = $module.find(selector.reset);
+ },
+
+ submit: function() {
+ module.verbose('Submitting form', $module);
+ $module
+ .submit()
+ ;
+ },
+
+ attachEvents: function(selector, action) {
+ action = action || 'submit';
+ $(selector)
+ .on('click' + eventNamespace, function(event) {
+ module[action]();
+ event.preventDefault();
+ })
+ ;
+ },
+
+ bindEvents: function() {
+ module.verbose('Attaching form events');
+ $module
+ .on('submit' + eventNamespace, module.validate.form)
+ .on('blur' + eventNamespace, selector.field, module.event.field.blur)
+ .on('click' + eventNamespace, selector.submit, module.submit)
+ .on('click' + eventNamespace, selector.reset, module.reset)
+ .on('click' + eventNamespace, selector.clear, module.clear)
+ ;
+ if(settings.keyboardShortcuts) {
+ $module
+ .on('keydown' + eventNamespace, selector.field, module.event.field.keydown)
+ ;
+ }
+ $field
+ .each(function() {
+ var
+ $input = $(this),
+ type = $input.prop('type'),
+ inputEvent = module.get.changeEvent(type, $input)
+ ;
+ $(this)
+ .on(inputEvent + eventNamespace, module.event.field.change)
+ ;
+ })
+ ;
+ },
+
+ clear: function() {
+ $field
+ .each(function () {
+ var
+ $field = $(this),
+ $element = $field.parent(),
+ $fieldGroup = $field.closest($group),
+ $prompt = $fieldGroup.find(selector.prompt),
+ defaultValue = $field.data(metadata.defaultValue) || '',
+ isCheckbox = $element.is(selector.uiCheckbox),
+ isDropdown = $element.is(selector.uiDropdown),
+ isErrored = $fieldGroup.hasClass(className.error)
+ ;
+ if(isErrored) {
+ module.verbose('Resetting error on field', $fieldGroup);
+ $fieldGroup.removeClass(className.error);
+ $prompt.remove();
+ }
+ if(isDropdown) {
+ module.verbose('Resetting dropdown value', $element, defaultValue);
+ $element.dropdown('clear');
+ }
+ else if(isCheckbox) {
+ $field.prop('checked', false);
+ }
+ else {
+ module.verbose('Resetting field value', $field, defaultValue);
+ $field.val('');
+ }
+ })
+ ;
+ },
+
+ reset: function() {
+ $field
+ .each(function () {
+ var
+ $field = $(this),
+ $element = $field.parent(),
+ $fieldGroup = $field.closest($group),
+ $prompt = $fieldGroup.find(selector.prompt),
+ defaultValue = $field.data(metadata.defaultValue),
+ isCheckbox = $element.is(selector.uiCheckbox),
+ isDropdown = $element.is(selector.uiDropdown),
+ isErrored = $fieldGroup.hasClass(className.error)
+ ;
+ if(defaultValue === undefined) {
+ return;
+ }
+ if(isErrored) {
+ module.verbose('Resetting error on field', $fieldGroup);
+ $fieldGroup.removeClass(className.error);
+ $prompt.remove();
+ }
+ if(isDropdown) {
+ module.verbose('Resetting dropdown value', $element, defaultValue);
+ $element.dropdown('restore defaults');
+ }
+ else if(isCheckbox) {
+ module.verbose('Resetting checkbox value', $element, defaultValue);
+ $field.prop('checked', defaultValue);
+ }
+ else {
+ module.verbose('Resetting field value', $field, defaultValue);
+ $field.val(defaultValue);
+ }
+ })
+ ;
+ },
+
+ determine: {
+ isValid: function() {
+ var
+ allValid = true
+ ;
+ $.each(validation, function(fieldName, field) {
+ if( !( module.validate.field(field, fieldName, true) ) ) {
+ allValid = false;
+ }
+ });
+ return allValid;
+ }
+ },
+
+ is: {
+ bracketedRule: function(rule) {
+ return (rule.type && rule.type.match(settings.regExp.bracket));
+ },
+ empty: function($field) {
+ if(!$field || $field.length === 0) {
+ return true;
+ }
+ else if($field.is('input[type="checkbox"]')) {
+ return !$field.is(':checked');
+ }
+ else {
+ return module.is.blank($field);
+ }
+ },
+ blank: function($field) {
+ return $.trim($field.val()) === '';
+ },
+ valid: function(field) {
+ var
+ allValid = true
+ ;
+ if(field) {
+ module.verbose('Checking if field is valid', field);
+ return module.validate.field(validation[field], field, false);
+ }
+ else {
+ module.verbose('Checking if form is valid');
+ $.each(validation, function(fieldName, field) {
+ if( !module.is.valid(fieldName) ) {
+ allValid = false;
+ }
+ });
+ return allValid;
+ }
+ }
+ },
+
+ removeEvents: function() {
+ $module
+ .off(eventNamespace)
+ ;
+ $field
+ .off(eventNamespace)
+ ;
+ $submit
+ .off(eventNamespace)
+ ;
+ $field
+ .off(eventNamespace)
+ ;
+ },
+
+ event: {
+ field: {
+ keydown: function(event) {
+ var
+ $field = $(this),
+ key = event.which,
+ isInput = $field.is(selector.input),
+ isCheckbox = $field.is(selector.checkbox),
+ isInDropdown = ($field.closest(selector.uiDropdown).length > 0),
+ keyCode = {
+ enter : 13,
+ escape : 27
+ }
+ ;
+ if( key == keyCode.escape) {
+ module.verbose('Escape key pressed blurring field');
+ $field
+ .blur()
+ ;
+ }
+ if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {
+ if(!keyHeldDown) {
+ $field
+ .one('keyup' + eventNamespace, module.event.field.keyup)
+ ;
+ module.submit();
+ module.debug('Enter pressed on input submitting form');
+ }
+ keyHeldDown = true;
+ }
+ },
+ keyup: function() {
+ keyHeldDown = false;
+ },
+ blur: function(event) {
+ var
+ $field = $(this),
+ $fieldGroup = $field.closest($group),
+ validationRules = module.get.validation($field)
+ ;
+ if( $fieldGroup.hasClass(className.error) ) {
+ module.debug('Revalidating field', $field, validationRules);
+ if(validationRules) {
+ module.validate.field( validationRules );
+ }
+ }
+ else if(settings.on == 'blur' || settings.on == 'change') {
+ if(validationRules) {
+ module.validate.field( validationRules );
+ }
+ }
+ },
+ change: function(event) {
+ var
+ $field = $(this),
+ $fieldGroup = $field.closest($group),
+ validationRules = module.get.validation($field)
+ ;
+ if(validationRules && (settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) {
+ clearTimeout(module.timer);
+ module.timer = setTimeout(function() {
+ module.debug('Revalidating field', $field, module.get.validation($field));
+ module.validate.field( validationRules );
+ }, settings.delay);
+ }
+ }
+ }
+
+ },
+
+ get: {
+ ancillaryValue: function(rule) {
+ if(!rule.type || (!rule.value && !module.is.bracketedRule(rule))) {
+ return false;
+ }
+ return (rule.value !== undefined)
+ ? rule.value
+ : rule.type.match(settings.regExp.bracket)[1] + ''
+ ;
+ },
+ ruleName: function(rule) {
+ if( module.is.bracketedRule(rule) ) {
+ return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], '');
+ }
+ return rule.type;
+ },
+ changeEvent: function(type, $input) {
+ if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) {
+ return 'change';
+ }
+ else {
+ return module.get.inputEvent();
+ }
+ },
+ inputEvent: function() {
+ return (document.createElement('input').oninput !== undefined)
+ ? 'input'
+ : (document.createElement('input').onpropertychange !== undefined)
+ ? 'propertychange'
+ : 'keyup'
+ ;
+ },
+ prompt: function(rule, field) {
+ var
+ ruleName = module.get.ruleName(rule),
+ ancillary = module.get.ancillaryValue(rule),
+ prompt = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
+ requiresValue = (prompt.search('{value}') !== -1),
+ requiresName = (prompt.search('{name}') !== -1),
+ $label,
+ $field,
+ name
+ ;
+ if(requiresName || requiresValue) {
+ $field = module.get.field(field.identifier);
+ }
+ if(requiresValue) {
+ prompt = prompt.replace('{value}', $field.val());
+ }
+ if(requiresName) {
+ $label = $field.closest(selector.group).find('label').eq(0);
+ name = ($label.length == 1)
+ ? $label.text()
+ : $field.prop('placeholder') || settings.text.unspecifiedField
+ ;
+ prompt = prompt.replace('{name}', name);
+ }
+ prompt = prompt.replace('{identifier}', field.identifier);
+ prompt = prompt.replace('{ruleValue}', ancillary);
+ if(!rule.prompt) {
+ module.verbose('Using default validation prompt for type', prompt, ruleName);
+ }
+ return prompt;
+ },
+ settings: function() {
+ if($.isPlainObject(parameters)) {
+ var
+ keys = Object.keys(parameters),
+ isLegacySettings = (keys.length > 0)
+ ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)
+ : false,
+ ruleKeys
+ ;
+ if(isLegacySettings) {
+ // 1.x (ducktyped)
+ settings = $.extend(true, {}, $.fn.form.settings, legacyParameters);
+ validation = $.extend({}, $.fn.form.settings.defaults, parameters);
+ module.error(settings.error.oldSyntax, element);
+ module.verbose('Extending settings from legacy parameters', validation, settings);
+ }
+ else {
+ // 2.x
+ if(parameters.fields) {
+ ruleKeys = Object.keys(parameters.fields);
+ if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) {
+ $.each(parameters.fields, function(name, rules) {
+ if(typeof rules == 'string') {
+ rules = [rules];
+ }
+ parameters.fields[name] = {
+ rules: []
+ };
+ $.each(rules, function(index, rule) {
+ parameters.fields[name].rules.push({ type: rule });
+ });
+ });
+ }
+ }
+
+ settings = $.extend(true, {}, $.fn.form.settings, parameters);
+ validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);
+ module.verbose('Extending settings', validation, settings);
+ }
+ }
+ else {
+ settings = $.fn.form.settings;
+ validation = $.fn.form.settings.defaults;
+ module.verbose('Using default form validation', validation, settings);
+ }
+
+ // shorthand
+ namespace = settings.namespace;
+ metadata = settings.metadata;
+ selector = settings.selector;
+ className = settings.className;
+ regExp = settings.regExp;
+ error = settings.error;
+ moduleNamespace = 'module-' + namespace;
+ eventNamespace = '.' + namespace;
+
+ // grab instance
+ instance = $module.data(moduleNamespace);
+
+ // refresh selector cache
+ module.refresh();
+ },
+ field: function(identifier) {
+ module.verbose('Finding field with identifier', identifier);
+ identifier = module.escape.string(identifier);
+ if($field.filter('#' + identifier).length > 0 ) {
+ return $field.filter('#' + identifier);
+ }
+ else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
+ return $field.filter('[name="' + identifier +'"]');
+ }
+ else if( $field.filter('[name="' + identifier +'[]"]').length > 0 ) {
+ return $field.filter('[name="' + identifier +'[]"]');
+ }
+ else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
+ return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]');
+ }
+ return $('<input/>');
+ },
+ fields: function(fields) {
+ var
+ $fields = $()
+ ;
+ $.each(fields, function(index, name) {
+ $fields = $fields.add( module.get.field(name) );
+ });
+ return $fields;
+ },
+ validation: function($field) {
+ var
+ fieldValidation,
+ identifier
+ ;
+ if(!validation) {
+ return false;
+ }
+ $.each(validation, function(fieldName, field) {
+ identifier = field.identifier || fieldName;
+ if( module.get.field(identifier)[0] == $field[0] ) {
+ field.identifier = identifier;
+ fieldValidation = field;
+ }
+ });
+ return fieldValidation || false;
+ },
+ value: function (field) {
+ var
+ fields = [],
+ results
+ ;
+ fields.push(field);
+ results = module.get.values.call(element, fields);
+ return results[field];
+ },
+ values: function (fields) {
+ var
+ $fields = $.isArray(fields)
+ ? module.get.fields(fields)
+ : $field,
+ values = {}
+ ;
+ $fields.each(function(index, field) {
+ var
+ $field = $(field),
+ type = $field.prop('type'),
+ name = $field.prop('name'),
+ value = $field.val(),
+ isCheckbox = $field.is(selector.checkbox),
+ isRadio = $field.is(selector.radio),
+ isMultiple = (name.indexOf('[]') !== -1),
+ isChecked = (isCheckbox)
+ ? $field.is(':checked')
+ : false
+ ;
+ if(name) {
+ if(isMultiple) {
+ name = name.replace('[]', '');
+ if(!values[name]) {
+ values[name] = [];
+ }
+ if(isCheckbox) {
+ if(isChecked) {
+ values[name].push(value || true);
+ }
+ else {
+ values[name].push(false);
+ }
+ }
+ else {
+ values[name].push(value);
+ }
+ }
+ else {
+ if(isRadio) {
+ if(isChecked) {
+ values[name] = value;
+ }
+ }
+ else if(isCheckbox) {
+ if(isChecked) {
+ values[name] = value || true;
+ }
+ else {
+ values[name] = false;
+ }
+ }
+ else {
+ values[name] = value;
+ }
+ }
+ }
+ });
+ return values;
+ }
+ },
+
+ has: {
+
+ field: function(identifier) {
+ module.verbose('Checking for existence of a field with identifier', identifier);
+ identifier = module.escape.string(identifier);
+ if(typeof identifier !== 'string') {
+ module.error(error.identifier, identifier);
+ }
+ if($field.filter('#' + identifier).length > 0 ) {
+ return true;
+ }
+ else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
+ return true;
+ }
+ else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
+ return true;
+ }
+ return false;
+ }
+
+ },
+
+ escape: {
+ string: function(text) {
+ text = String(text);
+ return text.replace(regExp.escape, '\\$&');
+ }
+ },
+
+ add: {
+ prompt: function(identifier, errors) {
+ var
+ $field = module.get.field(identifier),
+ $fieldGroup = $field.closest($group),
+ $prompt = $fieldGroup.children(selector.prompt),
+ promptExists = ($prompt.length !== 0)
+ ;
+ errors = (typeof errors == 'string')
+ ? [errors]
+ : errors
+ ;
+ module.verbose('Adding field error state', identifier);
+ $fieldGroup
+ .addClass(className.error)
+ ;
+ if(settings.inline) {
+ if(!promptExists) {
+ $prompt = settings.templates.prompt(errors);
+ $prompt
+ .appendTo($fieldGroup)
+ ;
+ }
+ $prompt
+ .html(errors[0])
+ ;
+ if(!promptExists) {
+ if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ module.verbose('Displaying error with css transition', settings.transition);
+ $prompt.transition(settings.transition + ' in', settings.duration);
+ }
+ else {
+ module.verbose('Displaying error with fallback javascript animation');
+ $prompt
+ .fadeIn(settings.duration)
+ ;
+ }
+ }
+ else {
+ module.verbose('Inline errors are disabled, no inline error added', identifier);
+ }
+ }
+ },
+ errors: function(errors) {
+ module.debug('Adding form error messages', errors);
+ module.set.error();
+ $message
+ .html( settings.templates.error(errors) )
+ ;
+ }
+ },
+
+ remove: {
+ prompt: function(identifier) {
+ var
+ $field = module.get.field(identifier),
+ $fieldGroup = $field.closest($group),
+ $prompt = $fieldGroup.children(selector.prompt)
+ ;
+ $fieldGroup
+ .removeClass(className.error)
+ ;
+ if(settings.inline && $prompt.is(':visible')) {
+ module.verbose('Removing prompt for field', identifier);
+ if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+ $prompt.transition(settings.transition + ' out', settings.duration, function() {
+ $prompt.remove();
+ });
+ }
+ else {
+ $prompt
+ .fadeOut(settings.duration, function(){
+ $prompt.remove();
+ })
+ ;
+ }
+ }
+ }
+ },
+
+ set: {
+ success: function() {
+ $module
+ .removeClass(className.error)
+ .addClass(className.success)
+ ;
+ },
+ defaults: function () {
+ $field
+ .each(function () {
+ var
+ $field = $(this),
+ isCheckbox = ($field.filter(selector.checkbox).length > 0),
+ value = (isCheckbox)
+ ? $field.is(':checked')
+ : $field.val()
+ ;
+ $field.data(metadata.defaultValue, value);
+ })
+ ;
+ },
+ error: function() {
+ $module
+ .removeClass(className.success)
+ .addClass(className.error)
+ ;
+ },
+ value: function (field, value) {
+ var
+ fields = {}
+ ;
+ fields[field] = value;
+ return module.set.values.call(element, fields);
+ },
+ values: function (fields) {
+ if($.isEmptyObject(fields)) {
+ return;
+ }
+ $.each(fields, function(key, value) {
+ var
+ $field = module.get.field(key),
+ $element = $field.parent(),
+ isMultiple = $.isArray(value),
+ isCheckbox = $element.is(selector.uiCheckbox),
+ isDropdown = $element.is(selector.uiDropdown),
+ isRadio = ($field.is(selector.radio) && isCheckbox),
+ fieldExists = ($field.length > 0),
+ $multipleField
+ ;
+ if(fieldExists) {
+ if(isMultiple && isCheckbox) {
+ module.verbose('Selecting multiple', value, $field);
+ $element.checkbox('uncheck');
+ $.each(value, function(index, value) {
+ $multipleField = $field.filter('[value="' + value + '"]');
+ $element = $multipleField.parent();
+ if($multipleField.length > 0) {
+ $element.checkbox('check');
+ }
+ });
+ }
+ else if(isRadio) {
+ module.verbose('Selecting radio value', value, $field);
+ $field.filter('[value="' + value + '"]')
+ .parent(selector.uiCheckbox)
+ .checkbox('check')
+ ;
+ }
+ else if(isCheckbox) {
+ module.verbose('Setting checkbox value', value, $element);
+ if(value === true) {
+ $element.checkbox('check');
+ }
+ else {
+ $element.checkbox('uncheck');
+ }
+ }
+ else if(isDropdown) {
+ module.verbose('Setting dropdown value', value, $element);
+ $element.dropdown('set selected', value);
+ }
+ else {
+ module.verbose('Setting field value', value, $field);
+ $field.val(value);
+ }
+ }
+ });
+ }
+ },
+
+ validate: {
+
+ form: function(event, ignoreCallbacks) {
+ var
+ values = module.get.values(),
+ apiRequest
+ ;
+
+ // input keydown event will fire submit repeatedly by browser default
+ if(keyHeldDown) {
+ return false;
+ }
+
+ // reset errors
+ formErrors = [];
+ if( module.determine.isValid() ) {
+ module.debug('Form has no validation errors, submitting');
+ module.set.success();
+ if(ignoreCallbacks !== true) {
+ return settings.onSuccess.call(element, event, values);
+ }
+ }
+ else {
+ module.debug('Form has errors');
+ module.set.error();
+ if(!settings.inline) {
+ module.add.errors(formErrors);
+ }
+ // prevent ajax submit
+ if($module.data('moduleApi') !== undefined) {
+ event.stopImmediatePropagation();
+ }
+ if(ignoreCallbacks !== true) {
+ return settings.onFailure.call(element, formErrors, values);
+ }
+ }
+ },
+
+ // takes a validation object and returns whether field passes validation
+ field: function(field, fieldName, showErrors) {
+ showErrors = (showErrors !== undefined)
+ ? showErrors
+ : true
+ ;
+ if(typeof field == 'string') {
+ module.verbose('Validating field', field);
+ fieldName = field;
+ field = validation[field];
+ }
+ var
+ identifier = field.identifier || fieldName,
+ $field = module.get.field(identifier),
+ $dependsField = (field.depends)
+ ? module.get.field(field.depends)
+ : false,
+ fieldValid = true,
+ fieldErrors = []
+ ;
+ if(!field.identifier) {
+ module.debug('Using field name as identifier', identifier);
+ field.identifier = identifier;
+ }
+ if($field.prop('disabled')) {
+ module.debug('Field is disabled. Skipping', identifier);
+ fieldValid = true;
+ }
+ else if(field.optional && module.is.blank($field)){
+ module.debug('Field is optional and blank. Skipping', identifier);
+ fieldValid = true;
+ }
+ else if(field.depends && module.is.empty($dependsField)) {
+ module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);
+ fieldValid = true;
+ }
+ else if(field.rules !== undefined) {
+ $.each(field.rules, function(index, rule) {
+ if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) {
+ module.debug('Field is invalid', identifier, rule.type);
+ fieldErrors.push(module.get.prompt(rule, field));
+ fieldValid = false;
+ }
+ });
+ }
+ if(fieldValid) {
+ if(showErrors) {
+ module.remove.prompt(identifier, fieldErrors);
+ settings.onValid.call($field);
+ }
+ }
+ else {
+ if(showErrors) {
+ formErrors = formErrors.concat(fieldErrors);
+ module.add.prompt(identifier, fieldErrors);
+ settings.onInvalid.call($field, fieldErrors);
+ }
+ return false;
+ }
+ return true;
+ },
+
+ // takes validation rule and returns whether field passes rule
+ rule: function(field, rule) {
+ var
+ $field = module.get.field(field.identifier),
+ type = rule.type,
+ value = $field.val(),
+ isValid = true,
+ ancillary = module.get.ancillaryValue(rule),
+ ruleName = module.get.ruleName(rule),
+ ruleFunction = settings.rules[ruleName]
+ ;
+ if( !$.isFunction(ruleFunction) ) {
+ module.error(error.noRule, ruleName);
+ return;
+ }
+ // cast to string avoiding encoding special values
+ value = (value === undefined || value === '' || value === null)
+ ? ''
+ : $.trim(value + '')
+ ;
+ return ruleFunction.call($field, value, ancillary);
+ }
+ },
+
+ setting: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if($allModules.length > 1) {
+ title += ' ' + '(' + $allModules.length + ')';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ return false;
+ }
+ });
+ }
+ if( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+ module.initialize();
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.form.settings = {
+
+ name : 'Form',
+ namespace : 'form',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ fields : false,
+
+ keyboardShortcuts : true,
+ on : 'submit',
+ inline : false,
+
+ delay : 200,
+ revalidate : true,
+
+ transition : 'scale',
+ duration : 200,
+
+ onValid : function() {},
+ onInvalid : function() {},
+ onSuccess : function() { return true; },
+ onFailure : function() { return false; },
+
+ metadata : {
+ defaultValue : 'default',
+ validate : 'validate'
+ },
+
+ regExp: {
+ htmlID : /^[a-zA-Z][\w:.-]*$/g,
+ bracket : /\[(.*)\]/i,
+ decimal : /^\d+\.?\d*$/,
+ email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,
+ escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
+ flags : /^\/(.*)\/(.*)?/,
+ integer : /^\-?\d+$/,
+ number : /^\-?\d*(\.\d+)?$/,
+ url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i
+ },
+
+ text: {
+ unspecifiedRule : 'Please enter a valid value',
+ unspecifiedField : 'This field'
+ },
+
+ prompt: {
+ empty : '{name} must have a value',
+ checked : '{name} must be checked',
+ email : '{name} must be a valid e-mail',
+ url : '{name} must be a valid url',
+ regExp : '{name} is not formatted correctly',
+ integer : '{name} must be an integer',
+ decimal : '{name} must be a decimal number',
+ number : '{name} must be set to a number',
+ is : '{name} must be "{ruleValue}"',
+ isExactly : '{name} must be exactly "{ruleValue}"',
+ not : '{name} cannot be set to "{ruleValue}"',
+ notExactly : '{name} cannot be set to exactly "{ruleValue}"',
+ contain : '{name} cannot contain "{ruleValue}"',
+ containExactly : '{name} cannot contain exactly "{ruleValue}"',
+ doesntContain : '{name} must contain "{ruleValue}"',
+ doesntContainExactly : '{name} must contain exactly "{ruleValue}"',
+ minLength : '{name} must be at least {ruleValue} characters',
+ length : '{name} must be at least {ruleValue} characters',
+ exactLength : '{name} must be exactly {ruleValue} characters',
+ maxLength : '{name} cannot be longer than {ruleValue} characters',
+ match : '{name} must match {ruleValue} field',
+ different : '{name} must have a different value than {ruleValue} field',
+ creditCard : '{name} must be a valid credit card number',
+ minCount : '{name} must have at least {ruleValue} choices',
+ exactCount : '{name} must have exactly {ruleValue} choices',
+ maxCount : '{name} must have {ruleValue} or less choices'
+ },
+
+ selector : {
+ checkbox : 'input[type="checkbox"], input[type="radio"]',
+ clear : '.clear',
+ field : 'input, textarea, select',
+ group : '.field',
+ input : 'input',
+ message : '.error.message',
+ prompt : '.prompt.label',
+ radio : 'input[type="radio"]',
+ reset : '.reset:not([type="reset"])',
+ submit : '.submit:not([type="submit"])',
+ uiCheckbox : '.ui.checkbox',
+ uiDropdown : '.ui.dropdown'
+ },
+
+ className : {
+ error : 'error',
+ label : 'ui prompt label',
+ pressed : 'down',
+ success : 'success'
+ },
+
+ error: {
+ identifier : 'You must specify a string identifier for each field',
+ method : 'The method you called is not defined.',
+ noRule : 'There is no rule matching the one you specified',
+ oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'
+ },
+
+ templates: {
+
+ // template that produces error message
+ error: function(errors) {
+ var
+ html = '<ul class="list">'
+ ;
+ $.each(errors, function(index, value) {
+ html += '<li>' + value + '</li>';
+ });
+ html += '</ul>';
+ return $(html);
+ },
+
+ // template that produces label
+ prompt: function(errors) {
+ return $('<div/>')
+ .addClass('ui basic red pointing prompt label')
+ .html(errors[0])
+ ;
+ }
+ },
+
+ rules: {
+
+ // is not empty or blank string
+ empty: function(value) {
+ return !(value === undefined || '' === value || $.isArray(value) && value.length === 0);
+ },
+
+ // checkbox checked
+ checked: function() {
+ return ($(this).filter(':checked').length > 0);
+ },
+
+ // is most likely an email
+ email: function(value){
+ return $.fn.form.settings.regExp.email.test(value);
+ },
+
+ // value is most likely url
+ url: function(value) {
+ return $.fn.form.settings.regExp.url.test(value);
+ },
+
+ // matches specified regExp
+ regExp: function(value, regExp) {
+ if(regExp instanceof RegExp) {
+ return value.match(regExp);
+ }
+ var
+ regExpParts = regExp.match($.fn.form.settings.regExp.flags),
+ flags
+ ;
+ // regular expression specified as /baz/gi (flags)
+ if(regExpParts) {
+ regExp = (regExpParts.length >= 2)
+ ? regExpParts[1]
+ : regExp
+ ;
+ flags = (regExpParts.length >= 3)
+ ? regExpParts[2]
+ : ''
+ ;
+ }
+ return value.match( new RegExp(regExp, flags) );
+ },
+
+ // is valid integer or matches range
+ integer: function(value, range) {
+ var
+ intRegExp = $.fn.form.settings.regExp.integer,
+ min,
+ max,
+ parts
+ ;
+ if( !range || ['', '..'].indexOf(range) !== -1) {
+ // do nothing
+ }
+ else if(range.indexOf('..') == -1) {
+ if(intRegExp.test(range)) {
+ min = max = range - 0;
+ }
+ }
+ else {
+ parts = range.split('..', 2);
+ if(intRegExp.test(parts[0])) {
+ min = parts[0] - 0;
+ }
+ if(intRegExp.test(parts[1])) {
+ max = parts[1] - 0;
+ }
+ }
+ return (
+ intRegExp.test(value) &&
+ (min === undefined || value >= min) &&
+ (max === undefined || value <= max)
+ );
+ },
+
+ // is valid number (with decimal)
+ decimal: function(value) {
+ return $.fn.form.settings.regExp.decimal.test(value);
+ },
+
+ // is valid number
+ number: function(value) {
+ return $.fn.form.settings.regExp.number.test(value);
+ },
+
+ // is value (case insensitive)
+ is: function(value, text) {
+ text = (typeof text == 'string')
+ ? text.toLowerCase()
+ : text
+ ;
+ value = (typeof value == 'string')
+ ? value.toLowerCase()
+ : value
+ ;
+ return (value == text);
+ },
+
+ // is value
+ isExactly: function(value, text) {
+ return (value == text);
+ },
+
+ // value is not another value (case insensitive)
+ not: function(value, notValue) {
+ value = (typeof value == 'string')
+ ? value.toLowerCase()
+ : value
+ ;
+ notValue = (typeof notValue == 'string')
+ ? notValue.toLowerCase()
+ : notValue
+ ;
+ return (value != notValue);
+ },
+
+ // value is not another value (case sensitive)
+ notExactly: function(value, notValue) {
+ return (value != notValue);
+ },
+
+ // value contains text (insensitive)
+ contains: function(value, text) {
+ // escape regex characters
+ text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
+ return (value.search( new RegExp(text, 'i') ) !== -1);
+ },
+
+ // value contains text (case sensitive)
+ containsExactly: function(value, text) {
+ // escape regex characters
+ text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
+ return (value.search( new RegExp(text) ) !== -1);
+ },
+
+ // value contains text (insensitive)
+ doesntContain: function(value, text) {
+ // escape regex characters
+ text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
+ return (value.search( new RegExp(text, 'i') ) === -1);
+ },
+
+ // value contains text (case sensitive)
+ doesntContainExactly: function(value, text) {
+ // escape regex characters
+ text = text.replace($.fn.form.settings.regExp.escape, "\\$&");
+ return (value.search( new RegExp(text) ) === -1);
+ },
+
+ // is at least string length
+ minLength: function(value, requiredLength) {
+ return (value !== undefined)
+ ? (value.length >= requiredLength)
+ : false
+ ;
+ },
+
+ // see rls notes for 2.0.6 (this is a duplicate of minLength)
+ length: function(value, requiredLength) {
+ return (value !== undefined)
+ ? (value.length >= requiredLength)
+ : false
+ ;
+ },
+
+ // is exactly length
+ exactLength: function(value, requiredLength) {
+ return (value !== undefined)
+ ? (value.length == requiredLength)
+ : false
+ ;
+ },
+
+ // is less than length
+ maxLength: function(value, maxLength) {
+ return (value !== undefined)
+ ? (value.length <= maxLength)
+ : false
+ ;
+ },
+
+ // matches another field
+ match: function(value, identifier) {
+ var
+ $form = $(this),
+ matchingValue
+ ;
+ if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
+ matchingValue = $('[data-validate="'+ identifier +'"]').val();
+ }
+ else if($('#' + identifier).length > 0) {
+ matchingValue = $('#' + identifier).val();
+ }
+ else if($('[name="' + identifier +'"]').length > 0) {
+ matchingValue = $('[name="' + identifier + '"]').val();
+ }
+ else if( $('[name="' + identifier +'[]"]').length > 0 ) {
+ matchingValue = $('[name="' + identifier +'[]"]');
+ }
+ return (matchingValue !== undefined)
+ ? ( value.toString() == matchingValue.toString() )
+ : false
+ ;
+ },
+
+ // different than another field
+ different: function(value, identifier) {
+ // use either id or name of field
+ var
+ $form = $(this),
+ matchingValue
+ ;
+ if( $('[data-validate="'+ identifier +'"]').length > 0 ) {
+ matchingValue = $('[data-validate="'+ identifier +'"]').val();
+ }
+ else if($('#' + identifier).length > 0) {
+ matchingValue = $('#' + identifier).val();
+ }
+ else if($('[name="' + identifier +'"]').length > 0) {
+ matchingValue = $('[name="' + identifier + '"]').val();
+ }
+ else if( $('[name="' + identifier +'[]"]').length > 0 ) {
+ matchingValue = $('[name="' + identifier +'[]"]');
+ }
+ return (matchingValue !== undefined)
+ ? ( value.toString() !== matchingValue.toString() )
+ : false
+ ;
+ },
+
+ creditCard: function(cardNumber, cardTypes) {
+ var
+ cards = {
+ visa: {
+ pattern : /^4/,
+ length : [16]
+ },
+ amex: {
+ pattern : /^3[47]/,
+ length : [15]
+ },
+ mastercard: {
+ pattern : /^5[1-5]/,
+ length : [16]
+ },
+ discover: {
+ pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/,
+ length : [16]
+ },
+ unionPay: {
+ pattern : /^(62|88)/,
+ length : [16, 17, 18, 19]
+ },
+ jcb: {
+ pattern : /^35(2[89]|[3-8][0-9])/,
+ length : [16]
+ },
+ maestro: {
+ pattern : /^(5018|5020|5038|6304|6759|676[1-3])/,
+ length : [12, 13, 14, 15, 16, 17, 18, 19]
+ },
+ dinersClub: {
+ pattern : /^(30[0-5]|^36)/,
+ length : [14]
+ },
+ laser: {
+ pattern : /^(6304|670[69]|6771)/,
+ length : [16, 17, 18, 19]
+ },
+ visaElectron: {
+ pattern : /^(4026|417500|4508|4844|491(3|7))/,
+ length : [16]
+ }
+ },
+ valid = {},
+ validCard = false,
+ requiredTypes = (typeof cardTypes == 'string')
+ ? cardTypes.split(',')
+ : false,
+ unionPay,
+ validation
+ ;
+
+ if(typeof cardNumber !== 'string' || cardNumber.length === 0) {
+ return;
+ }
+
+ // allow dashes in card
+ cardNumber = cardNumber.replace(/[\-]/g, '');
+
+ // verify card types
+ if(requiredTypes) {
+ $.each(requiredTypes, function(index, type){
+ // verify each card type
+ validation = cards[type];
+ if(validation) {
+ valid = {
+ length : ($.inArray(cardNumber.length, validation.length) !== -1),
+ pattern : (cardNumber.search(validation.pattern) !== -1)
+ };
+ if(valid.length && valid.pattern) {
+ validCard = true;
+ }
+ }
+ });
+
+ if(!validCard) {
+ return false;
+ }
+ }
+
+ // skip luhn for UnionPay
+ unionPay = {
+ number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1),
+ pattern : (cardNumber.search(cards.unionPay.pattern) !== -1)
+ };
+ if(unionPay.number && unionPay.pattern) {
+ return true;
+ }
+
+ // verify luhn, adapted from <https://gist.github.com/2134376>
+ var
+ length = cardNumber.length,
+ multiple = 0,
+ producedValue = [
+ [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+ [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]
+ ],
+ sum = 0
+ ;
+ while (length--) {
+ sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)];
+ multiple ^= 1;
+ }
+ return (sum % 10 === 0 && sum > 0);
+ },
+
+ minCount: function(value, minCount) {
+ if(minCount == 0) {
+ return true;
+ }
+ if(minCount == 1) {
+ return (value !== '');
+ }
+ return (value.split(',').length >= minCount);
+ },
+
+ exactCount: function(value, exactCount) {
+ if(exactCount == 0) {
+ return (value === '');
+ }
+ if(exactCount == 1) {
+ return (value !== '' && value.search(',') === -1);
+ }
+ return (value.split(',').length == exactCount);
+ },
+
+ maxCount: function(value, maxCount) {
+ if(maxCount == 0) {
+ return false;
+ }
+ if(maxCount == 1) {
+ return (value.search(',') === -1);
+ }
+ return (value.split(',').length <= maxCount);
+ }
+ }
+
+};
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/state.js b/semantic/src/definitions/behaviors/state.js
new file mode 100644
index 0000000..83f9ae7
--- /dev/null
+++ b/semantic/src/definitions/behaviors/state.js
@@ -0,0 +1,708 @@
+/*!
+ * # Semantic UI - State
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.state = function(parameters) {
+ var
+ $allModules = $(this),
+
+ moduleSelector = $allModules.selector || '',
+
+ hasTouch = ('ontouchstart' in document.documentElement),
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+
+ returnedValue
+ ;
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.state.settings, parameters)
+ : $.extend({}, $.fn.state.settings),
+
+ error = settings.error,
+ metadata = settings.metadata,
+ className = settings.className,
+ namespace = settings.namespace,
+ states = settings.states,
+ text = settings.text,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = namespace + '-module',
+
+ $module = $(this),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
+
+ module
+ ;
+ module = {
+
+ initialize: function() {
+ module.verbose('Initializing module');
+
+ // allow module to guess desired state based on element
+ if(settings.automatic) {
+ module.add.defaults();
+ }
+
+ // bind events with delegated events
+ if(settings.context && moduleSelector !== '') {
+ $(settings.context)
+ .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
+ .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
+ .on(moduleSelector, 'click' + eventNamespace, module.toggle.state)
+ ;
+ }
+ else {
+ $module
+ .on('mouseenter' + eventNamespace, module.change.text)
+ .on('mouseleave' + eventNamespace, module.reset.text)
+ .on('click' + eventNamespace, module.toggle.state)
+ ;
+ }
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, module)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module', instance);
+ $module
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ refresh: function() {
+ module.verbose('Refreshing selector cache');
+ $module = $(element);
+ },
+
+ add: {
+ defaults: function() {
+ var
+ userStates = parameters && $.isPlainObject(parameters.states)
+ ? parameters.states
+ : {}
+ ;
+ $.each(settings.defaults, function(type, typeStates) {
+ if( module.is[type] !== undefined && module.is[type]() ) {
+ module.verbose('Adding default states', type, element);
+ $.extend(settings.states, typeStates, userStates);
+ }
+ });
+ }
+ },
+
+ is: {
+
+ active: function() {
+ return $module.hasClass(className.active);
+ },
+ loading: function() {
+ return $module.hasClass(className.loading);
+ },
+ inactive: function() {
+ return !( $module.hasClass(className.active) );
+ },
+ state: function(state) {
+ if(className[state] === undefined) {
+ return false;
+ }
+ return $module.hasClass( className[state] );
+ },
+
+ enabled: function() {
+ return !( $module.is(settings.filter.active) );
+ },
+ disabled: function() {
+ return ( $module.is(settings.filter.active) );
+ },
+ textEnabled: function() {
+ return !( $module.is(settings.filter.text) );
+ },
+
+ // definitions for automatic type detection
+ button: function() {
+ return $module.is('.button:not(a, .submit)');
+ },
+ input: function() {
+ return $module.is('input');
+ },
+ progress: function() {
+ return $module.is('.ui.progress');
+ }
+ },
+
+ allow: function(state) {
+ module.debug('Now allowing state', state);
+ states[state] = true;
+ },
+ disallow: function(state) {
+ module.debug('No longer allowing', state);
+ states[state] = false;
+ },
+
+ allows: function(state) {
+ return states[state] || false;
+ },
+
+ enable: function() {
+ $module.removeClass(className.disabled);
+ },
+
+ disable: function() {
+ $module.addClass(className.disabled);
+ },
+
+ setState: function(state) {
+ if(module.allows(state)) {
+ $module.addClass( className[state] );
+ }
+ },
+
+ removeState: function(state) {
+ if(module.allows(state)) {
+ $module.removeClass( className[state] );
+ }
+ },
+
+ toggle: {
+ state: function() {
+ var
+ apiRequest,
+ requestCancelled
+ ;
+ if( module.allows('active') && module.is.enabled() ) {
+ module.refresh();
+ if($.fn.api !== undefined) {
+ apiRequest = $module.api('get request');
+ requestCancelled = $module.api('was cancelled');
+ if( requestCancelled ) {
+ module.debug('API Request cancelled by beforesend');
+ settings.activateTest = function(){ return false; };
+ settings.deactivateTest = function(){ return false; };
+ }
+ else if(apiRequest) {
+ module.listenTo(apiRequest);
+ return;
+ }
+ }
+ module.change.state();
+ }
+ }
+ },
+
+ listenTo: function(apiRequest) {
+ module.debug('API request detected, waiting for state signal', apiRequest);
+ if(apiRequest) {
+ if(text.loading) {
+ module.update.text(text.loading);
+ }
+ $.when(apiRequest)
+ .then(function() {
+ if(apiRequest.state() == 'resolved') {
+ module.debug('API request succeeded');
+ settings.activateTest = function(){ return true; };
+ settings.deactivateTest = function(){ return true; };
+ }
+ else {
+ module.debug('API request failed');
+ settings.activateTest = function(){ return false; };
+ settings.deactivateTest = function(){ return false; };
+ }
+ module.change.state();
+ })
+ ;
+ }
+ },
+
+ // checks whether active/inactive state can be given
+ change: {
+
+ state: function() {
+ module.debug('Determining state change direction');
+ // inactive to active change
+ if( module.is.inactive() ) {
+ module.activate();
+ }
+ else {
+ module.deactivate();
+ }
+ if(settings.sync) {
+ module.sync();
+ }
+ settings.onChange.call(element);
+ },
+
+ text: function() {
+ if( module.is.textEnabled() ) {
+ if(module.is.disabled() ) {
+ module.verbose('Changing text to disabled text', text.hover);
+ module.update.text(text.disabled);
+ }
+ else if( module.is.active() ) {
+ if(text.hover) {
+ module.verbose('Changing text to hover text', text.hover);
+ module.update.text(text.hover);
+ }
+ else if(text.deactivate) {
+ module.verbose('Changing text to deactivating text', text.deactivate);
+ module.update.text(text.deactivate);
+ }
+ }
+ else {
+ if(text.hover) {
+ module.verbose('Changing text to hover text', text.hover);
+ module.update.text(text.hover);
+ }
+ else if(text.activate){
+ module.verbose('Changing text to activating text', text.activate);
+ module.update.text(text.activate);
+ }
+ }
+ }
+ }
+
+ },
+
+ activate: function() {
+ if( settings.activateTest.call(element) ) {
+ module.debug('Setting state to active');
+ $module
+ .addClass(className.active)
+ ;
+ module.update.text(text.active);
+ settings.onActivate.call(element);
+ }
+ },
+
+ deactivate: function() {
+ if( settings.deactivateTest.call(element) ) {
+ module.debug('Setting state to inactive');
+ $module
+ .removeClass(className.active)
+ ;
+ module.update.text(text.inactive);
+ settings.onDeactivate.call(element);
+ }
+ },
+
+ sync: function() {
+ module.verbose('Syncing other buttons to current state');
+ if( module.is.active() ) {
+ $allModules
+ .not($module)
+ .state('activate');
+ }
+ else {
+ $allModules
+ .not($module)
+ .state('deactivate')
+ ;
+ }
+ },
+
+ get: {
+ text: function() {
+ return (settings.selector.text)
+ ? $module.find(settings.selector.text).text()
+ : $module.html()
+ ;
+ },
+ textFor: function(state) {
+ return text[state] || false;
+ }
+ },
+
+ flash: {
+ text: function(text, duration, callback) {
+ var
+ previousText = module.get.text()
+ ;
+ module.debug('Flashing text message', text, duration);
+ text = text || settings.text.flash;
+ duration = duration || settings.flashDuration;
+ callback = callback || function() {};
+ module.update.text(text);
+ setTimeout(function(){
+ module.update.text(previousText);
+ callback.call(element);
+ }, duration);
+ }
+ },
+
+ reset: {
+ // on mouseout sets text to previous value
+ text: function() {
+ var
+ activeText = text.active || $module.data(metadata.storedText),
+ inactiveText = text.inactive || $module.data(metadata.storedText)
+ ;
+ if( module.is.textEnabled() ) {
+ if( module.is.active() && activeText) {
+ module.verbose('Resetting active text', activeText);
+ module.update.text(activeText);
+ }
+ else if(inactiveText) {
+ module.verbose('Resetting inactive text', activeText);
+ module.update.text(inactiveText);
+ }
+ }
+ }
+ },
+
+ update: {
+ text: function(text) {
+ var
+ currentText = module.get.text()
+ ;
+ if(text && text !== currentText) {
+ module.debug('Updating text', text);
+ if(settings.selector.text) {
+ $module
+ .data(metadata.storedText, text)
+ .find(settings.selector.text)
+ .text(text)
+ ;
+ }
+ else {
+ $module
+ .data(metadata.storedText, text)
+ .html(text)
+ ;
+ }
+ }
+ else {
+ module.debug('Text is already set, ignoring update', text);
+ }
+ }
+ },
+
+ setting: function(name, value) {
+ module.debug('Changing setting', name, value);
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ if($.isPlainObject(settings[name])) {
+ $.extend(true, settings[name], value);
+ }
+ else {
+ settings[name] = value;
+ }
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.state.settings = {
+
+ // module info
+ name : 'State',
+
+ // debug output
+ debug : false,
+
+ // verbose debug output
+ verbose : false,
+
+ // namespace for events
+ namespace : 'state',
+
+ // debug data includes performance
+ performance : true,
+
+ // callback occurs on state change
+ onActivate : function() {},
+ onDeactivate : function() {},
+ onChange : function() {},
+
+ // state test functions
+ activateTest : function() { return true; },
+ deactivateTest : function() { return true; },
+
+ // whether to automatically map default states
+ automatic : true,
+
+ // activate / deactivate changes all elements instantiated at same time
+ sync : false,
+
+ // default flash text duration, used for temporarily changing text of an element
+ flashDuration : 1000,
+
+ // selector filter
+ filter : {
+ text : '.loading, .disabled',
+ active : '.disabled'
+ },
+
+ context : false,
+
+ // error
+ error: {
+ beforeSend : 'The before send function has cancelled state change',
+ method : 'The method you called is not defined.'
+ },
+
+ // metadata
+ metadata: {
+ promise : 'promise',
+ storedText : 'stored-text'
+ },
+
+ // change class on state
+ className: {
+ active : 'active',
+ disabled : 'disabled',
+ error : 'error',
+ loading : 'loading',
+ success : 'success',
+ warning : 'warning'
+ },
+
+ selector: {
+ // selector for text node
+ text: false
+ },
+
+ defaults : {
+ input: {
+ disabled : true,
+ loading : true,
+ active : true
+ },
+ button: {
+ disabled : true,
+ loading : true,
+ active : true,
+ },
+ progress: {
+ active : true,
+ success : true,
+ warning : true,
+ error : true
+ }
+ },
+
+ states : {
+ active : true,
+ disabled : true,
+ error : true,
+ loading : true,
+ success : true,
+ warning : true
+ },
+
+ text : {
+ disabled : false,
+ flash : false,
+ hover : false,
+ active : false,
+ inactive : false,
+ activate : false,
+ deactivate : false
+ }
+
+};
+
+
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/visibility.js b/semantic/src/definitions/behaviors/visibility.js
new file mode 100644
index 0000000..fcffbd8
--- /dev/null
+++ b/semantic/src/definitions/behaviors/visibility.js
@@ -0,0 +1,1311 @@
+/*!
+ * # Semantic UI - Visibility
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.fn.visibility = function(parameters) {
+ var
+ $allModules = $(this),
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue,
+
+ moduleCount = $allModules.length,
+ loadedCount = 0
+ ;
+
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.visibility.settings, parameters)
+ : $.extend({}, $.fn.visibility.settings),
+
+ className = settings.className,
+ namespace = settings.namespace,
+ error = settings.error,
+ metadata = settings.metadata,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = 'module-' + namespace,
+
+ $window = $(window),
+
+ $module = $(this),
+ $context = $(settings.context),
+
+ $placeholder,
+
+ selector = $module.selector || '',
+ instance = $module.data(moduleNamespace),
+
+ requestAnimationFrame = window.requestAnimationFrame
+ || window.mozRequestAnimationFrame
+ || window.webkitRequestAnimationFrame
+ || window.msRequestAnimationFrame
+ || function(callback) { setTimeout(callback, 0); },
+
+ element = this,
+ disabled = false,
+
+ contextObserver,
+ observer,
+ module
+ ;
+
+ module = {
+
+ initialize: function() {
+ module.debug('Initializing', settings);
+
+ module.setup.cache();
+
+ if( module.should.trackChanges() ) {
+
+ if(settings.type == 'image') {
+ module.setup.image();
+ }
+ if(settings.type == 'fixed') {
+ module.setup.fixed();
+ }
+
+ if(settings.observeChanges) {
+ module.observeChanges();
+ }
+ module.bind.events();
+ }
+
+ module.save.position();
+ if( !module.is.visible() ) {
+ module.error(error.visible, $module);
+ }
+
+ if(settings.initialCheck) {
+ module.checkVisibility();
+ }
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.debug('Storing instance', module);
+ $module
+ .data(moduleNamespace, module)
+ ;
+ instance = module;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying previous module');
+ if(observer) {
+ observer.disconnect();
+ }
+ if(contextObserver) {
+ contextObserver.disconnect();
+ }
+ $window
+ .off('load' + eventNamespace, module.event.load)
+ .off('resize' + eventNamespace, module.event.resize)
+ ;
+ $context
+ .off('scroll' + eventNamespace, module.event.scroll)
+ .off('scrollchange' + eventNamespace, module.event.scrollchange)
+ ;
+ if(settings.type == 'fixed') {
+ module.resetFixed();
+ module.remove.placeholder();
+ }
+ $module
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ observeChanges: function() {
+ if('MutationObserver' in window) {
+ contextObserver = new MutationObserver(module.event.contextChanged);
+ observer = new MutationObserver(module.event.changed);
+ contextObserver.observe(document, {
+ childList : true,
+ subtree : true
+ });
+ observer.observe(element, {
+ childList : true,
+ subtree : true
+ });
+ module.debug('Setting up mutation observer', observer);
+ }
+ },
+
+ bind: {
+ events: function() {
+ module.verbose('Binding visibility events to scroll and resize');
+ if(settings.refreshOnLoad) {
+ $window
+ .on('load' + eventNamespace, module.event.load)
+ ;
+ }
+ $window
+ .on('resize' + eventNamespace, module.event.resize)
+ ;
+ // pub/sub pattern
+ $context
+ .off('scroll' + eventNamespace)
+ .on('scroll' + eventNamespace, module.event.scroll)
+ .on('scrollchange' + eventNamespace, module.event.scrollchange)
+ ;
+ }
+ },
+
+ event: {
+ changed: function(mutations) {
+ module.verbose('DOM tree modified, updating visibility calculations');
+ module.timer = setTimeout(function() {
+ module.verbose('DOM tree modified, updating sticky menu');
+ module.refresh();
+ }, 100);
+ },
+ contextChanged: function(mutations) {
+ [].forEach.call(mutations, function(mutation) {
+ if(mutation.removedNodes) {
+ [].forEach.call(mutation.removedNodes, function(node) {
+ if(node == element || $(node).find(element).length > 0) {
+ module.debug('Element removed from DOM, tearing down events');
+ module.destroy();
+ }
+ });
+ }
+ });
+ },
+ resize: function() {
+ module.debug('Window resized');
+ if(settings.refreshOnResize) {
+ requestAnimationFrame(module.refresh);
+ }
+ },
+ load: function() {
+ module.debug('Page finished loading');
+ requestAnimationFrame(module.refresh);
+ },
+ // publishes scrollchange event on one scroll
+ scroll: function() {
+ if(settings.throttle) {
+ clearTimeout(module.timer);
+ module.timer = setTimeout(function() {
+ $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
+ }, settings.throttle);
+ }
+ else {
+ requestAnimationFrame(function() {
+ $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
+ });
+ }
+ },
+ // subscribes to scrollchange
+ scrollchange: function(event, scrollPosition) {
+ module.checkVisibility(scrollPosition);
+ },
+ },
+
+ precache: function(images, callback) {
+ if (!(images instanceof Array)) {
+ images = [images];
+ }
+ var
+ imagesLength = images.length,
+ loadedCounter = 0,
+ cache = [],
+ cacheImage = document.createElement('img'),
+ handleLoad = function() {
+ loadedCounter++;
+ if (loadedCounter >= images.length) {
+ if ($.isFunction(callback)) {
+ callback();
+ }
+ }
+ }
+ ;
+ while (imagesLength--) {
+ cacheImage = document.createElement('img');
+ cacheImage.onload = handleLoad;
+ cacheImage.onerror = handleLoad;
+ cacheImage.src = images[imagesLength];
+ cache.push(cacheImage);
+ }
+ },
+
+ enableCallbacks: function() {
+ module.debug('Allowing callbacks to occur');
+ disabled = false;
+ },
+
+ disableCallbacks: function() {
+ module.debug('Disabling all callbacks temporarily');
+ disabled = true;
+ },
+
+ should: {
+ trackChanges: function() {
+ if(methodInvoked) {
+ module.debug('One time query, no need to bind events');
+ return false;
+ }
+ module.debug('Callbacks being attached');
+ return true;
+ }
+ },
+
+ setup: {
+ cache: function() {
+ module.cache = {
+ occurred : {},
+ screen : {},
+ element : {},
+ };
+ },
+ image: function() {
+ var
+ src = $module.data(metadata.src)
+ ;
+ if(src) {
+ module.verbose('Lazy loading image', src);
+ settings.once = true;
+ settings.observeChanges = false;
+
+ // show when top visible
+ settings.onOnScreen = function() {
+ module.debug('Image on screen', element);
+ module.precache(src, function() {
+ module.set.image(src, function() {
+ loadedCount++;
+ if(loadedCount == moduleCount) {
+ settings.onAllLoaded.call(this);
+ }
+ settings.onLoad.call(this);
+ });
+ });
+ };
+ }
+ },
+ fixed: function() {
+ module.debug('Setting up fixed');
+ settings.once = false;
+ settings.observeChanges = false;
+ settings.initialCheck = true;
+ settings.refreshOnLoad = true;
+ if(!parameters.transition) {
+ settings.transition = false;
+ }
+ module.create.placeholder();
+ module.debug('Added placeholder', $placeholder);
+ settings.onTopPassed = function() {
+ module.debug('Element passed, adding fixed position', $module);
+ module.show.placeholder();
+ module.set.fixed();
+ if(settings.transition) {
+ if($.fn.transition !== undefined) {
+ $module.transition(settings.transition, settings.duration);
+ }
+ }
+ };
+ settings.onTopPassedReverse = function() {
+ module.debug('Element returned to position, removing fixed', $module);
+ module.hide.placeholder();
+ module.remove.fixed();
+ };
+ }
+ },
+
+ create: {
+ placeholder: function() {
+ module.verbose('Creating fixed position placeholder');
+ $placeholder = $module
+ .clone(false)
+ .css('display', 'none')
+ .addClass(className.placeholder)
+ .insertAfter($module)
+ ;
+ }
+ },
+
+ show: {
+ placeholder: function() {
+ module.verbose('Showing placeholder');
+ $placeholder
+ .css('display', 'block')
+ .css('visibility', 'hidden')
+ ;
+ }
+ },
+ hide: {
+ placeholder: function() {
+ module.verbose('Hiding placeholder');
+ $placeholder
+ .css('display', 'none')
+ .css('visibility', '')
+ ;
+ }
+ },
+
+ set: {
+ fixed: function() {
+ module.verbose('Setting element to fixed position');
+ $module
+ .addClass(className.fixed)
+ .css({
+ position : 'fixed',
+ top : settings.offset + 'px',
+ left : 'auto',
+ zIndex : settings.zIndex
+ })
+ ;
+ settings.onFixed.call(element);
+ },
+ image: function(src, callback) {
+ $module
+ .attr('src', src)
+ ;
+ if(settings.transition) {
+ if( $.fn.transition !== undefined) {
+ if($module.hasClass(className.visible)) {
+ module.debug('Transition already occurred on this image, skipping animation');
+ return;
+ }
+ $module.transition(settings.transition, settings.duration, callback);
+ }
+ else {
+ $module.fadeIn(settings.duration, callback);
+ }
+ }
+ else {
+ $module.show();
+ }
+ }
+ },
+
+ is: {
+ onScreen: function() {
+ var
+ calculations = module.get.elementCalculations()
+ ;
+ return calculations.onScreen;
+ },
+ offScreen: function() {
+ var
+ calculations = module.get.elementCalculations()
+ ;
+ return calculations.offScreen;
+ },
+ visible: function() {
+ if(module.cache && module.cache.element) {
+ return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);
+ }
+ return false;
+ },
+ verticallyScrollableContext: function() {
+ var
+ overflowY = ($context.get(0) !== window)
+ ? $context.css('overflow-y')
+ : false
+ ;
+ return (overflowY == 'auto' || overflowY == 'scroll');
+ },
+ horizontallyScrollableContext: function() {
+ var
+ overflowX = ($context.get(0) !== window)
+ ? $context.css('overflow-x')
+ : false
+ ;
+ return (overflowX == 'auto' || overflowX == 'scroll');
+ }
+ },
+
+ refresh: function() {
+ module.debug('Refreshing constants (width/height)');
+ if(settings.type == 'fixed') {
+ module.resetFixed();
+ }
+ module.reset();
+ module.save.position();
+ if(settings.checkOnRefresh) {
+ module.checkVisibility();
+ }
+ settings.onRefresh.call(element);
+ },
+
+ resetFixed: function () {
+ module.remove.fixed();
+ module.remove.occurred();
+ },
+
+ reset: function() {
+ module.verbose('Resetting all cached values');
+ if( $.isPlainObject(module.cache) ) {
+ module.cache.screen = {};
+ module.cache.element = {};
+ }
+ },
+
+ checkVisibility: function(scroll) {
+ module.verbose('Checking visibility of element', module.cache.element);
+
+ if( !disabled && module.is.visible() ) {
+
+ // save scroll position
+ module.save.scroll(scroll);
+
+ // update calculations derived from scroll
+ module.save.calculations();
+
+ // percentage
+ module.passed();
+
+ // reverse (must be first)
+ module.passingReverse();
+ module.topVisibleReverse();
+ module.bottomVisibleReverse();
+ module.topPassedReverse();
+ module.bottomPassedReverse();
+
+ // one time
+ module.onScreen();
+ module.offScreen();
+ module.passing();
+ module.topVisible();
+ module.bottomVisible();
+ module.topPassed();
+ module.bottomPassed();
+
+ // on update callback
+ if(settings.onUpdate) {
+ settings.onUpdate.call(element, module.get.elementCalculations());
+ }
+ }
+ },
+
+ passed: function(amount, newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ amountInPixels
+ ;
+ // assign callback
+ if(amount && newCallback) {
+ settings.onPassed[amount] = newCallback;
+ }
+ else if(amount !== undefined) {
+ return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);
+ }
+ else if(calculations.passing) {
+ $.each(settings.onPassed, function(amount, callback) {
+ if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {
+ module.execute(callback, amount);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callback);
+ }
+ });
+ }
+ },
+
+ onScreen: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onOnScreen,
+ callbackName = 'onScreen'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for onScreen', newCallback);
+ settings.onOnScreen = newCallback;
+ }
+ if(calculations.onScreen) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.onOnScreen;
+ }
+ },
+
+ offScreen: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onOffScreen,
+ callbackName = 'offScreen'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for offScreen', newCallback);
+ settings.onOffScreen = newCallback;
+ }
+ if(calculations.offScreen) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.onOffScreen;
+ }
+ },
+
+ passing: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onPassing,
+ callbackName = 'passing'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for passing', newCallback);
+ settings.onPassing = newCallback;
+ }
+ if(calculations.passing) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return calculations.passing;
+ }
+ },
+
+
+ topVisible: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopVisible,
+ callbackName = 'topVisible'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top visible', newCallback);
+ settings.onTopVisible = newCallback;
+ }
+ if(calculations.topVisible) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.topVisible;
+ }
+ },
+
+ bottomVisible: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomVisible,
+ callbackName = 'bottomVisible'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom visible', newCallback);
+ settings.onBottomVisible = newCallback;
+ }
+ if(calculations.bottomVisible) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.bottomVisible;
+ }
+ },
+
+ topPassed: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopPassed,
+ callbackName = 'topPassed'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top passed', newCallback);
+ settings.onTopPassed = newCallback;
+ }
+ if(calculations.topPassed) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.topPassed;
+ }
+ },
+
+ bottomPassed: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomPassed,
+ callbackName = 'bottomPassed'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom passed', newCallback);
+ settings.onBottomPassed = newCallback;
+ }
+ if(calculations.bottomPassed) {
+ module.execute(callback, callbackName);
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return calculations.bottomPassed;
+ }
+ },
+
+ passingReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onPassingReverse,
+ callbackName = 'passingReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for passing reverse', newCallback);
+ settings.onPassingReverse = newCallback;
+ }
+ if(!calculations.passing) {
+ if(module.get.occurred('passing')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback !== undefined) {
+ return !calculations.passing;
+ }
+ },
+
+
+ topVisibleReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopVisibleReverse,
+ callbackName = 'topVisibleReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top visible reverse', newCallback);
+ settings.onTopVisibleReverse = newCallback;
+ }
+ if(!calculations.topVisible) {
+ if(module.get.occurred('topVisible')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.topVisible;
+ }
+ },
+
+ bottomVisibleReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomVisibleReverse,
+ callbackName = 'bottomVisibleReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom visible reverse', newCallback);
+ settings.onBottomVisibleReverse = newCallback;
+ }
+ if(!calculations.bottomVisible) {
+ if(module.get.occurred('bottomVisible')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.bottomVisible;
+ }
+ },
+
+ topPassedReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onTopPassedReverse,
+ callbackName = 'topPassedReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for top passed reverse', newCallback);
+ settings.onTopPassedReverse = newCallback;
+ }
+ if(!calculations.topPassed) {
+ if(module.get.occurred('topPassed')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.onTopPassed;
+ }
+ },
+
+ bottomPassedReverse: function(newCallback) {
+ var
+ calculations = module.get.elementCalculations(),
+ callback = newCallback || settings.onBottomPassedReverse,
+ callbackName = 'bottomPassedReverse'
+ ;
+ if(newCallback) {
+ module.debug('Adding callback for bottom passed reverse', newCallback);
+ settings.onBottomPassedReverse = newCallback;
+ }
+ if(!calculations.bottomPassed) {
+ if(module.get.occurred('bottomPassed')) {
+ module.execute(callback, callbackName);
+ }
+ }
+ else if(!settings.once) {
+ module.remove.occurred(callbackName);
+ }
+ if(newCallback === undefined) {
+ return !calculations.bottomPassed;
+ }
+ },
+
+ execute: function(callback, callbackName) {
+ var
+ calculations = module.get.elementCalculations(),
+ screen = module.get.screenCalculations()
+ ;
+ callback = callback || false;
+ if(callback) {
+ if(settings.continuous) {
+ module.debug('Callback being called continuously', callbackName, calculations);
+ callback.call(element, calculations, screen);
+ }
+ else if(!module.get.occurred(callbackName)) {
+ module.debug('Conditions met', callbackName, calculations);
+ callback.call(element, calculations, screen);
+ }
+ }
+ module.save.occurred(callbackName);
+ },
+
+ remove: {
+ fixed: function() {
+ module.debug('Removing fixed position');
+ $module
+ .removeClass(className.fixed)
+ .css({
+ position : '',
+ top : '',
+ left : '',
+ zIndex : ''
+ })
+ ;
+ settings.onUnfixed.call(element);
+ },
+ placeholder: function() {
+ module.debug('Removing placeholder content');
+ if($placeholder) {
+ $placeholder.remove();
+ }
+ },
+ occurred: function(callback) {
+ if(callback) {
+ var
+ occurred = module.cache.occurred
+ ;
+ if(occurred[callback] !== undefined && occurred[callback] === true) {
+ module.debug('Callback can now be called again', callback);
+ module.cache.occurred[callback] = false;
+ }
+ }
+ else {
+ module.cache.occurred = {};
+ }
+ }
+ },
+
+ save: {
+ calculations: function() {
+ module.verbose('Saving all calculations necessary to determine positioning');
+ module.save.direction();
+ module.save.screenCalculations();
+ module.save.elementCalculations();
+ },
+ occurred: function(callback) {
+ if(callback) {
+ if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {
+ module.verbose('Saving callback occurred', callback);
+ module.cache.occurred[callback] = true;
+ }
+ }
+ },
+ scroll: function(scrollPosition) {
+ scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;
+ module.cache.scroll = scrollPosition;
+ },
+ direction: function() {
+ var
+ scroll = module.get.scroll(),
+ lastScroll = module.get.lastScroll(),
+ direction
+ ;
+ if(scroll > lastScroll && lastScroll) {
+ direction = 'down';
+ }
+ else if(scroll < lastScroll && lastScroll) {
+ direction = 'up';
+ }
+ else {
+ direction = 'static';
+ }
+ module.cache.direction = direction;
+ return module.cache.direction;
+ },
+ elementPosition: function() {
+ var
+ element = module.cache.element,
+ screen = module.get.screenSize()
+ ;
+ module.verbose('Saving element position');
+ // (quicker than $.extend)
+ element.fits = (element.height < screen.height);
+ element.offset = $module.offset();
+ element.width = $module.outerWidth();
+ element.height = $module.outerHeight();
+ // compensate for scroll in context
+ if(module.is.verticallyScrollableContext()) {
+ element.offset.top += $context.scrollTop() - $context.offset().top;
+ }
+ if(module.is.horizontallyScrollableContext()) {
+ element.offset.left += $context.scrollLeft - $context.offset().left;
+ }
+ // store
+ module.cache.element = element;
+ return element;
+ },
+ elementCalculations: function() {
+ var
+ screen = module.get.screenCalculations(),
+ element = module.get.elementPosition()
+ ;
+ // offset
+ if(settings.includeMargin) {
+ element.margin = {};
+ element.margin.top = parseInt($module.css('margin-top'), 10);
+ element.margin.bottom = parseInt($module.css('margin-bottom'), 10);
+ element.top = element.offset.top - element.margin.top;
+ element.bottom = element.offset.top + element.height + element.margin.bottom;
+ }
+ else {
+ element.top = element.offset.top;
+ element.bottom = element.offset.top + element.height;
+ }
+
+ // visibility
+ element.topPassed = (screen.top >= element.top);
+ element.bottomPassed = (screen.top >= element.bottom);
+ element.topVisible = (screen.bottom >= element.top) && !element.bottomPassed;
+ element.bottomVisible = (screen.bottom >= element.bottom) && !element.topPassed;
+ element.pixelsPassed = 0;
+ element.percentagePassed = 0;
+
+ // meta calculations
+ element.onScreen = (element.topVisible && !element.bottomPassed);
+ element.passing = (element.topPassed && !element.bottomPassed);
+ element.offScreen = (!element.onScreen);
+
+ // passing calculations
+ if(element.passing) {
+ element.pixelsPassed = (screen.top - element.top);
+ element.percentagePassed = (screen.top - element.top) / element.height;
+ }
+ module.cache.element = element;
+ module.verbose('Updated element calculations', element);
+ return element;
+ },
+ screenCalculations: function() {
+ var
+ scroll = module.get.scroll()
+ ;
+ module.save.direction();
+ module.cache.screen.top = scroll;
+ module.cache.screen.bottom = scroll + module.cache.screen.height;
+ return module.cache.screen;
+ },
+ screenSize: function() {
+ module.verbose('Saving window position');
+ module.cache.screen = {
+ height: $context.height()
+ };
+ },
+ position: function() {
+ module.save.screenSize();
+ module.save.elementPosition();
+ }
+ },
+
+ get: {
+ pixelsPassed: function(amount) {
+ var
+ element = module.get.elementCalculations()
+ ;
+ if(amount.search('%') > -1) {
+ return ( element.height * (parseInt(amount, 10) / 100) );
+ }
+ return parseInt(amount, 10);
+ },
+ occurred: function(callback) {
+ return (module.cache.occurred !== undefined)
+ ? module.cache.occurred[callback] || false
+ : false
+ ;
+ },
+ direction: function() {
+ if(module.cache.direction === undefined) {
+ module.save.direction();
+ }
+ return module.cache.direction;
+ },
+ elementPosition: function() {
+ if(module.cache.element === undefined) {
+ module.save.elementPosition();
+ }
+ return module.cache.element;
+ },
+ elementCalculations: function() {
+ if(module.cache.element === undefined) {
+ module.save.elementCalculations();
+ }
+ return module.cache.element;
+ },
+ screenCalculations: function() {
+ if(module.cache.screen === undefined) {
+ module.save.screenCalculations();
+ }
+ return module.cache.screen;
+ },
+ screenSize: function() {
+ if(module.cache.screen === undefined) {
+ module.save.screenSize();
+ }
+ return module.cache.screen;
+ },
+ scroll: function() {
+ if(module.cache.scroll === undefined) {
+ module.save.scroll();
+ }
+ return module.cache.scroll;
+ },
+ lastScroll: function() {
+ if(module.cache.screen === undefined) {
+ module.debug('First scroll event, no last scroll could be found');
+ return false;
+ }
+ return module.cache.screen.top;
+ }
+ },
+
+ setting: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ instance.save.scroll();
+ instance.save.calculations();
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.visibility.settings = {
+
+ name : 'Visibility',
+ namespace : 'visibility',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ // whether to use mutation observers to follow changes
+ observeChanges : true,
+
+ // check position immediately on init
+ initialCheck : true,
+
+ // whether to refresh calculations after all page images load
+ refreshOnLoad : true,
+
+ // whether to refresh calculations after page resize event
+ refreshOnResize : true,
+
+ // should call callbacks on refresh event (resize, etc)
+ checkOnRefresh : true,
+
+ // callback should only occur one time
+ once : true,
+
+ // callback should fire continuously whe evaluates to true
+ continuous : false,
+
+ // offset to use with scroll top
+ offset : 0,
+
+ // whether to include margin in elements position
+ includeMargin : false,
+
+ // scroll context for visibility checks
+ context : window,
+
+ // visibility check delay in ms (defaults to animationFrame)
+ throttle : false,
+
+ // special visibility type (image, fixed)
+ type : false,
+
+ // z-index to use with visibility 'fixed'
+ zIndex : '10',
+
+ // image only animation settings
+ transition : 'fade in',
+ duration : 1000,
+
+ // array of callbacks for percentage
+ onPassed : {},
+
+ // standard callbacks
+ onOnScreen : false,
+ onOffScreen : false,
+ onPassing : false,
+ onTopVisible : false,
+ onBottomVisible : false,
+ onTopPassed : false,
+ onBottomPassed : false,
+
+ // reverse callbacks
+ onPassingReverse : false,
+ onTopVisibleReverse : false,
+ onBottomVisibleReverse : false,
+ onTopPassedReverse : false,
+ onBottomPassedReverse : false,
+
+ // special callbacks for image
+ onLoad : function() {},
+ onAllLoaded : function() {},
+
+ // special callbacks for fixed position
+ onFixed : function() {},
+ onUnfixed : function() {},
+
+ // utility callbacks
+ onUpdate : false, // disabled by default for performance
+ onRefresh : function(){},
+
+ metadata : {
+ src: 'src'
+ },
+
+ className: {
+ fixed : 'fixed',
+ placeholder : 'placeholder',
+ visible : 'visible'
+ },
+
+ error : {
+ method : 'The method you called is not defined.',
+ visible : 'Element is hidden, you must call refresh after element becomes visible'
+ }
+
+};
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/behaviors/visit.js b/semantic/src/definitions/behaviors/visit.js
new file mode 100644
index 0000000..df88d0b
--- /dev/null
+++ b/semantic/src/definitions/behaviors/visit.js
@@ -0,0 +1,525 @@
+/*!
+ * # Semantic UI - Visit
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+window = (typeof window != 'undefined' && window.Math == Math)
+ ? window
+ : (typeof self != 'undefined' && self.Math == Math)
+ ? self
+ : Function('return this')()
+;
+
+$.visit = $.fn.visit = function(parameters) {
+ var
+ $allModules = $.isFunction(this)
+ ? $(window)
+ : $(this),
+ moduleSelector = $allModules.selector || '',
+
+ time = new Date().getTime(),
+ performance = [],
+
+ query = arguments[0],
+ methodInvoked = (typeof query == 'string'),
+ queryArguments = [].slice.call(arguments, 1),
+ returnedValue
+ ;
+ $allModules
+ .each(function() {
+ var
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.visit.settings, parameters)
+ : $.extend({}, $.fn.visit.settings),
+
+ error = settings.error,
+ namespace = settings.namespace,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = namespace + '-module',
+
+ $module = $(this),
+ $displays = $(),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
+ module
+ ;
+ module = {
+
+ initialize: function() {
+ if(settings.count) {
+ module.store(settings.key.count, settings.count);
+ }
+ else if(settings.id) {
+ module.add.id(settings.id);
+ }
+ else if(settings.increment && methodInvoked !== 'increment') {
+ module.increment();
+ }
+ module.add.display($module);
+ module.instantiate();
+ },
+
+ instantiate: function() {
+ module.verbose('Storing instance of visit module', module);
+ instance = module;
+ $module
+ .data(moduleNamespace, module)
+ ;
+ },
+
+ destroy: function() {
+ module.verbose('Destroying instance');
+ $module
+ .removeData(moduleNamespace)
+ ;
+ },
+
+ increment: function(id) {
+ var
+ currentValue = module.get.count(),
+ newValue = +(currentValue) + 1
+ ;
+ if(id) {
+ module.add.id(id);
+ }
+ else {
+ if(newValue > settings.limit && !settings.surpass) {
+ newValue = settings.limit;
+ }
+ module.debug('Incrementing visits', newValue);
+ module.store(settings.key.count, newValue);
+ }
+ },
+
+ decrement: function(id) {
+ var
+ currentValue = module.get.count(),
+ newValue = +(currentValue) - 1
+ ;
+ if(id) {
+ module.remove.id(id);
+ }
+ else {
+ module.debug('Removing visit');
+ module.store(settings.key.count, newValue);
+ }
+ },
+
+ get: {
+ count: function() {
+ return +(module.retrieve(settings.key.count)) || 0;
+ },
+ idCount: function(ids) {
+ ids = ids || module.get.ids();
+ return ids.length;
+ },
+ ids: function(delimitedIDs) {
+ var
+ idArray = []
+ ;
+ delimitedIDs = delimitedIDs || module.retrieve(settings.key.ids);
+ if(typeof delimitedIDs === 'string') {
+ idArray = delimitedIDs.split(settings.delimiter);
+ }
+ module.verbose('Found visited ID list', idArray);
+ return idArray;
+ },
+ storageOptions: function(data) {
+ var
+ options = {}
+ ;
+ if(settings.expires) {
+ options.expires = settings.expires;
+ }
+ if(settings.domain) {
+ options.domain = settings.domain;
+ }
+ if(settings.path) {
+ options.path = settings.path;
+ }
+ return options;
+ }
+ },
+
+ has: {
+ visited: function(id, ids) {
+ var
+ visited = false
+ ;
+ ids = ids || module.get.ids();
+ if(id !== undefined && ids) {
+ $.each(ids, function(index, value){
+ if(value == id) {
+ visited = true;
+ }
+ });
+ }
+ return visited;
+ }
+ },
+
+ set: {
+ count: function(value) {
+ module.store(settings.key.count, value);
+ },
+ ids: function(value) {
+ module.store(settings.key.ids, value);
+ }
+ },
+
+ reset: function() {
+ module.store(settings.key.count, 0);
+ module.store(settings.key.ids, null);
+ },
+
+ add: {
+ id: function(id) {
+ var
+ currentIDs = module.retrieve(settings.key.ids),
+ newIDs = (currentIDs === undefined || currentIDs === '')
+ ? id
+ : currentIDs + settings.delimiter + id
+ ;
+ if( module.has.visited(id) ) {
+ module.debug('Unique content already visited, not adding visit', id, currentIDs);
+ }
+ else if(id === undefined) {
+ module.debug('ID is not defined');
+ }
+ else {
+ module.debug('Adding visit to unique content', id);
+ module.store(settings.key.ids, newIDs);
+ }
+ module.set.count( module.get.idCount() );
+ },
+ display: function(selector) {
+ var
+ $element = $(selector)
+ ;
+ if($element.length > 0 && !$.isWindow($element[0])) {
+ module.debug('Updating visit count for element', $element);
+ $displays = ($displays.length > 0)
+ ? $displays.add($element)
+ : $element
+ ;
+ }
+ }
+ },
+
+ remove: {
+ id: function(id) {
+ var
+ currentIDs = module.get.ids(),
+ newIDs = []
+ ;
+ if(id !== undefined && currentIDs !== undefined) {
+ module.debug('Removing visit to unique content', id, currentIDs);
+ $.each(currentIDs, function(index, value){
+ if(value !== id) {
+ newIDs.push(value);
+ }
+ });
+ newIDs = newIDs.join(settings.delimiter);
+ module.store(settings.key.ids, newIDs );
+ }
+ module.set.count( module.get.idCount() );
+ }
+ },
+
+ check: {
+ limit: function(value) {
+ value = value || module.get.count();
+ if(settings.limit) {
+ if(value >= settings.limit) {
+ module.debug('Pages viewed exceeded limit, firing callback', value, settings.limit);
+ settings.onLimit.call(element, value);
+ }
+ module.debug('Limit not reached', value, settings.limit);
+ settings.onChange.call(element, value);
+ }
+ module.update.display(value);
+ }
+ },
+
+ update: {
+ display: function(value) {
+ value = value || module.get.count();
+ if($displays.length > 0) {
+ module.debug('Updating displayed view count', $displays);
+ $displays.html(value);
+ }
+ }
+ },
+
+ store: function(key, value) {
+ var
+ options = module.get.storageOptions(value)
+ ;
+ if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
+ window.localStorage.setItem(key, value);
+ module.debug('Value stored using local storage', key, value);
+ }
+ else if($.cookie !== undefined) {
+ $.cookie(key, value, options);
+ module.debug('Value stored using cookie', key, value, options);
+ }
+ else {
+ module.error(error.noCookieStorage);
+ return;
+ }
+ if(key == settings.key.count) {
+ module.check.limit(value);
+ }
+ },
+ retrieve: function(key, value) {
+ var
+ storedValue
+ ;
+ if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
+ storedValue = window.localStorage.getItem(key);
+ }
+ // get by cookie
+ else if($.cookie !== undefined) {
+ storedValue = $.cookie(key);
+ }
+ else {
+ module.error(error.noCookieStorage);
+ }
+ if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
+ storedValue = undefined;
+ }
+ return storedValue;
+ },
+
+ setting: function(name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function(name, value) {
+ module.debug('Changing internal', name, value);
+ if(value !== undefined) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else {
+ module[name] = value;
+ }
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function() {
+ if(!settings.silent && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function() {
+ if(!settings.silent && settings.verbose && settings.debug) {
+ if(settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function() {
+ if(!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function(message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if(settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name' : message[0],
+ 'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
+ 'Execution Time' : executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function() {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function(index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if(moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if($allModules.length > 1) {
+ title += ' ' + '(' + $allModules.length + ')';
+ }
+ if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if(console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function(index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function(query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if(typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function(depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+ object = object[camelCaseValue];
+ }
+ else if( object[camelCaseValue] !== undefined ) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+ object = object[value];
+ }
+ else if( object[value] !== undefined ) {
+ found = object[value];
+ return false;
+ }
+ else {
+ return false;
+ }
+ });
+ }
+ if ( $.isFunction( found ) ) {
+ response = found.apply(context, passedArguments);
+ }
+ else if(found !== undefined) {
+ response = found;
+ }
+ if($.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if(returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if(response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+ if(methodInvoked) {
+ if(instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if(instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+
+ })
+ ;
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.visit.settings = {
+
+ name : 'Visit',
+
+ debug : false,
+ verbose : false,
+ performance : true,
+
+ namespace : 'visit',
+
+ increment : false,
+ surpass : false,
+ count : false,
+ limit : false,
+
+ delimiter : '&',
+ storageMethod : 'localstorage',
+
+ key : {
+ count : 'visit-count',
+ ids : 'visit-ids'
+ },
+
+ expires : 30,
+ domain : false,
+ path : '/',
+
+ onLimit : function() {},
+ onChange : function() {},
+
+ error : {
+ method : 'The method you called is not defined',
+ missingPersist : 'Using the persist setting requires the inclusion of PersistJS',
+ noCookieStorage : 'The default storage cookie requires $.cookie to be included.'
+ }
+
+};
+
+})( jQuery, window, document );
diff --git a/semantic/src/definitions/collections/breadcrumb.less b/semantic/src/definitions/collections/breadcrumb.less
new file mode 100644
index 0000000..67a4e31
--- /dev/null
+++ b/semantic/src/definitions/collections/breadcrumb.less
@@ -0,0 +1,122 @@
+/*!
+ * # Semantic UI - Breadcrumb
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'breadcrumb';
+
+@import (multiple) '../../theme.config';
+
+
+/*******************************
+ Breadcrumb
+*******************************/
+
+.ui.breadcrumb {
+ line-height: 1;
+ display: @display;
+ margin: @verticalMargin 0em;
+ vertical-align: @verticalAlign;
+}
+.ui.breadcrumb:first-child {
+ margin-top: 0em;
+}
+.ui.breadcrumb:last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Content
+*******************************/
+
+/* Divider */
+.ui.breadcrumb .divider {
+ display: inline-block;
+ opacity: @dividerOpacity;
+ margin: 0em @dividerSpacing 0em;
+
+ font-size: @dividerSize;
+ color: @dividerColor;
+ vertical-align: @dividerVerticalAlign;
+}
+
+/* Link */
+.ui.breadcrumb a {
+ color: @linkColor;
+}
+.ui.breadcrumb a:hover {
+ color: @linkHoverColor;
+}
+
+
+/* Icon Divider */
+.ui.breadcrumb .icon.divider {
+ font-size: @iconDividerSize;
+ vertical-align: @iconDividerVerticalAlign;
+}
+
+/* Section */
+.ui.breadcrumb a.section {
+ cursor: pointer;
+}
+.ui.breadcrumb .section {
+ display: inline-block;
+ margin: @sectionMargin;
+ padding: @sectionPadding;
+}
+
+/* Loose Coupling */
+.ui.breadcrumb.segment {
+ display: inline-block;
+ padding: @segmentPadding;
+}
+
+/*******************************
+ States
+*******************************/
+
+.ui.breadcrumb .active.section {
+ font-weight: @activeFontWeight;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+.ui.mini.breadcrumb {
+ font-size: @mini;
+}
+.ui.tiny.breadcrumb {
+ font-size: @tiny;
+}
+.ui.small.breadcrumb {
+ font-size: @small;
+}
+.ui.breadcrumb {
+ font-size: @medium;
+}
+.ui.large.breadcrumb {
+ font-size: @large;
+}
+.ui.big.breadcrumb {
+ font-size: @big;
+}
+.ui.huge.breadcrumb {
+ font-size: @huge;
+}
+.ui.massive.breadcrumb {
+ font-size: @massive;
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/form.less b/semantic/src/definitions/collections/form.less
new file mode 100644
index 0000000..0504601
--- /dev/null
+++ b/semantic/src/definitions/collections/form.less
@@ -0,0 +1,1053 @@
+/*!
+ * # Semantic UI - Form
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'form';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Elements
+*******************************/
+
+/*--------------------
+ Form
+---------------------*/
+
+.ui.form {
+ position: relative;
+ max-width: 100%;
+}
+
+/*--------------------
+ Content
+---------------------*/
+
+.ui.form > p {
+ margin: @paragraphMargin;
+}
+
+/*--------------------
+ Field
+---------------------*/
+
+.ui.form .field {
+ clear: both;
+ margin: @fieldMargin;
+}
+
+.ui.form .field:last-child,
+.ui.form .fields:last-child .field {
+ margin-bottom: 0em;
+}
+
+.ui.form .fields .field {
+ clear: both;
+ margin: 0em;
+}
+
+
+/*--------------------
+ Labels
+---------------------*/
+
+.ui.form .field > label {
+ display: block;
+ margin: @labelMargin;
+ color: @labelColor;
+ font-size: @labelFontSize;
+ font-weight: @labelFontWeight;
+ text-transform: @labelTextTransform;
+}
+
+/*--------------------
+ Standard Inputs
+---------------------*/
+
+
+.ui.form textarea,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="file"],
+.ui.form input[type="url"] {
+ width: @inputWidth;
+ vertical-align: top;
+}
+
+/* Set max height on unusual input */
+.ui.form ::-webkit-datetime-edit,
+.ui.form ::-webkit-inner-spin-button {
+ height: @inputLineHeight;
+}
+
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="file"],
+.ui.form input[type="url"] {
+ font-family: @inputFont;
+ margin: 0em;
+ outline: none;
+ -webkit-appearance: none;
+ tap-highlight-color: rgba(255, 255, 255, 0);
+
+ line-height: @inputLineHeight;
+ padding: @inputPadding;
+ font-size: @inputFontSize;
+
+ background: @inputBackground;
+ border: @inputBorder;
+ color: @inputColor;
+ border-radius: @inputBorderRadius;
+ box-shadow: @inputBoxShadow;
+ transition: @inputTransition;
+}
+
+/* Text Area */
+.ui.form textarea {
+ margin: 0em;
+ -webkit-appearance: none;
+ tap-highlight-color: rgba(255, 255, 255, 0);
+
+ padding: @textAreaPadding;
+ font-size: @textAreaFontSize;
+ background: @textAreaBackground;
+ border: @textAreaBorder;
+ outline: none;
+ color: @inputColor;
+ border-radius: @inputBorderRadius;
+ box-shadow: @inputBoxShadow;
+ transition: @textAreaTransition;
+ font-size: @textAreaFontSize;
+ line-height: @textAreaLineHeight;
+ resize: @textAreaResize;
+}
+.ui.form textarea:not([rows]) {
+ height: @textAreaHeight;
+ min-height: @textAreaMinHeight;
+ max-height: @textAreaMaxHeight;
+}
+
+.ui.form textarea,
+.ui.form input[type="checkbox"] {
+ vertical-align: @checkboxVerticalAlign;
+}
+
+/*--------------------------
+ Input w/ attached Button
+---------------------------*/
+
+.ui.form input.attached {
+ width: auto;
+}
+
+
+/*--------------------
+ Basic Select
+---------------------*/
+
+.ui.form select {
+ display: block;
+ height: auto;
+ width: 100%;
+ background: @selectBackground;
+ border: @selectBorder;
+ border-radius: @selectBorderRadius;
+ box-shadow: @selectBoxShadow;
+ padding: @selectPadding;
+ color: @selectColor;
+ transition: @selectTransition;
+}
+
+/*--------------------
+ Dropdown
+---------------------*/
+
+/* Block */
+.ui.form .field > .selection.dropdown {
+ width: 100%;
+}
+.ui.form .field > .selection.dropdown > .dropdown.icon {
+ float: right;
+}
+
+/* Inline */
+.ui.form .inline.fields .field > .selection.dropdown,
+.ui.form .inline.field > .selection.dropdown {
+ width: auto;
+}
+.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
+.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
+ float: none;
+}
+
+/*--------------------
+ UI Input
+---------------------*/
+
+/* Block */
+.ui.form .field .ui.input,
+.ui.form .fields .field .ui.input,
+.ui.form .wide.field .ui.input {
+ width: 100%;
+}
+
+/* Inline */
+.ui.form .inline.fields .field:not(.wide) .ui.input,
+.ui.form .inline.field:not(.wide) .ui.input {
+ width: auto;
+ vertical-align: middle;
+}
+
+/* Auto Input */
+.ui.form .fields .field .ui.input input,
+.ui.form .field .ui.input input {
+ width: auto;
+}
+
+/* Full Width Input */
+.ui.form .ten.fields .ui.input input,
+.ui.form .nine.fields .ui.input input,
+.ui.form .eight.fields .ui.input input,
+.ui.form .seven.fields .ui.input input,
+.ui.form .six.fields .ui.input input,
+.ui.form .five.fields .ui.input input,
+.ui.form .four.fields .ui.input input,
+.ui.form .three.fields .ui.input input,
+.ui.form .two.fields .ui.input input,
+.ui.form .wide.field .ui.input input {
+ flex: 1 0 auto;
+ width: 0px;
+}
+
+
+/*--------------------
+ Types of Messages
+---------------------*/
+
+.ui.form .success.message,
+.ui.form .warning.message,
+.ui.form .error.message {
+ display: none;
+}
+
+/* Assumptions */
+.ui.form .message:first-child {
+ margin-top: 0px;
+}
+
+/*--------------------
+ Validation Prompt
+---------------------*/
+
+.ui.form .field .prompt.label {
+ white-space: normal;
+ background: @promptBackground !important;
+ border: @promptBorder !important;
+ color: @promptTextColor !important;
+}
+.ui.form .inline.fields .field .prompt,
+.ui.form .inline.field .prompt {
+ vertical-align: top;
+ margin: @inlinePromptMargin;
+}
+.ui.form .inline.fields .field .prompt:before,
+.ui.form .inline.field .prompt:before {
+ border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
+ bottom: auto;
+ right: auto;
+ top: 50%;
+ left: 0em;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------------
+ Autofilled
+---------------------*/
+
+.ui.form .field.field input:-webkit-autofill {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
+ border-color: @inputAutoFillBorder !important;
+}
+
+/* Focus */
+.ui.form .field.field input:-webkit-autofill:focus {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
+ border-color: @inputAutoFillFocusBorder !important;
+}
+
+/* Error */
+.ui.form .error.error input:-webkit-autofill {
+ box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
+ border-color: @inputAutoFillErrorBorder !important;
+}
+
+
+
+/*--------------------
+ Placeholder
+---------------------*/
+
+/* browsers require these rules separate */
+.ui.form ::-webkit-input-placeholder {
+ color: @inputPlaceholderColor;
+}
+.ui.form :-ms-input-placeholder {
+ color: @inputPlaceholderColor;
+}
+.ui.form ::-moz-placeholder {
+ color: @inputPlaceholderColor;
+}
+
+.ui.form :focus::-webkit-input-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+.ui.form :focus:-ms-input-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+.ui.form :focus::-moz-placeholder {
+ color: @inputPlaceholderFocusColor;
+}
+
+/* Error Placeholder */
+.ui.form .error ::-webkit-input-placeholder {
+ color: @inputErrorPlaceholderColor;
+}
+.ui.form .error :-ms-input-placeholder {
+ color: @inputErrorPlaceholderColor !important;
+}
+.ui.form .error ::-moz-placeholder {
+ color: @inputErrorPlaceholderColor;
+}
+
+.ui.form .error :focus::-webkit-input-placeholder {
+ color: @inputErrorPlaceholderFocusColor;
+}
+.ui.form .error :focus:-ms-input-placeholder {
+ color: @inputErrorPlaceholderFocusColor !important;
+}
+.ui.form .error :focus::-moz-placeholder {
+ color: @inputErrorPlaceholderFocusColor;
+}
+
+
+/*--------------------
+ Focus
+---------------------*/
+
+.ui.form input:not([type]):focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="url"]:focus {
+ color: @inputFocusColor;
+ border-color: @inputFocusBorderColor;
+ border-radius: @inputFocusBorderRadius;
+ background: @inputFocusBackground;
+ box-shadow: @inputFocusBoxShadow;
+}
+.ui.form textarea:focus {
+ color: @textAreaFocusColor;
+ border-color: @textAreaFocusBorderColor;
+ border-radius: @textAreaFocusBorderRadius;
+ background: @textAreaFocusBackground;
+ box-shadow: @textAreaFocusBoxShadow;
+ -webkit-appearance: none;
+}
+
+
+/*--------------------
+ Success
+---------------------*/
+
+/* On Form */
+.ui.form.success .success.message:not(:empty) {
+ display: block;
+}
+.ui.form.success .compact.success.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.success .icon.success.message:not(:empty) {
+ display: flex;
+}
+
+/*--------------------
+ Warning
+---------------------*/
+
+/* On Form */
+.ui.form.warning .warning.message:not(:empty) {
+ display: block;
+}
+.ui.form.warning .compact.warning.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.warning .icon.warning.message:not(:empty) {
+ display: flex;
+}
+
+/*--------------------
+ Error
+---------------------*/
+
+/* On Form */
+.ui.form.error .error.message:not(:empty) {
+ display: block;
+}
+.ui.form.error .compact.error.message:not(:empty) {
+ display: inline-block;
+}
+.ui.form.error .icon.error.message:not(:empty) {
+ display: flex;
+}
+
+/* On Field(s) */
+.ui.form .fields.error .field label,
+.ui.form .field.error label,
+.ui.form .fields.error .field .input,
+.ui.form .field.error .input {
+ color: @formErrorColor;
+}
+
+.ui.form .fields.error .field .corner.label,
+.ui.form .field.error .corner.label {
+ border-color: @formErrorColor;
+ color: @white;
+}
+
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="date"],
+.ui.form .fields.error .field input[type="datetime-local"],
+.ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="number"],
+.ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
+.ui.form .fields.error .field input[type="tel"],
+.ui.form .fields.error .field input[type="time"],
+.ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="file"],
+.ui.form .fields.error .field input[type="url"],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="date"],
+.ui.form .field.error input[type="datetime-local"],
+.ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="number"],
+.ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
+.ui.form .field.error input[type="tel"],
+.ui.form .field.error input[type="time"],
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="file"],
+.ui.form .field.error input[type="url"] {
+ background: @formErrorBackground;
+ border-color: @formErrorBorder;
+ color: @formErrorColor;
+ border-radius: @inputErrorBorderRadius;
+ box-shadow: @inputErrorBoxShadow;
+}
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="date"]:focus,
+.ui.form .field.error input[type="datetime-local"]:focus,
+.ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="number"]:focus,
+.ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
+.ui.form .field.error input[type="tel"]:focus,
+.ui.form .field.error input[type="time"]:focus,
+.ui.form .field.error input[type="text"]:focus,
+.ui.form .field.error input[type="file"]:focus,
+.ui.form .field.error input[type="url"]:focus {
+ background: @inputErrorFocusBackground;
+ border-color: @inputErrorFocusBorder;
+ color: @inputErrorFocusColor;
+
+ -webkit-appearance: none;
+ box-shadow: @inputErrorFocusBoxShadow;
+}
+
+/* Preserve Native Select Stylings */
+.ui.form .field.error select {
+ -webkit-appearance: menulist-button;
+}
+
+/*------------------
+ Dropdown Error
+--------------------*/
+
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .fields.error .field .ui.dropdown .item,
+.ui.form .field.error .ui.dropdown,
+.ui.form .field.error .ui.dropdown .text,
+.ui.form .field.error .ui.dropdown .item {
+ background: @formErrorBackground;
+ color: @formErrorColor;
+}
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .field.error .ui.dropdown {
+ border-color: @formErrorBorder !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover,
+.ui.form .field.error .ui.dropdown:hover {
+ border-color: @formErrorBorder !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover .menu,
+.ui.form .field.error .ui.dropdown:hover .menu {
+ border-color: @formErrorBorder;
+}
+.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.error .ui.multiple.selection.dropdown > .label {
+ background-color: @dropdownErrorLabelBackground;
+ color: @dropdownErrorLabelColor;
+}
+
+/* Hover */
+.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
+.ui.form .field.error .ui.dropdown .menu .item:hover {
+ background-color: @dropdownErrorHoverBackground;
+}
+
+/* Selected */
+.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
+.ui.form .field.error .ui.dropdown .menu .selected.item {
+ background-color: @dropdownErrorSelectedBackground;
+}
+
+
+/* Active */
+.ui.form .fields.error .field .ui.dropdown .menu .active.item,
+.ui.form .field.error .ui.dropdown .menu .active.item {
+ background-color: @dropdownErrorActiveBackground !important;
+}
+
+/*--------------------
+ Checkbox Error
+---------------------*/
+
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
+ color: @formErrorColor;
+}
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
+ background: @formErrorBackground;
+ border-color: @formErrorBorder;
+}
+.ui.form .fields.error .field .checkbox label:after,
+.ui.form .field.error .checkbox label:after,
+.ui.form .fields.error .field .checkbox .box:after,
+.ui.form .field.error .checkbox .box:after {
+ color: @formErrorColor;
+}
+
+/*--------------------
+ Disabled
+---------------------*/
+
+.ui.form .disabled.fields .field,
+.ui.form .disabled.field,
+.ui.form .field :disabled {
+ pointer-events: none;
+ opacity: @disabledOpacity;
+}
+.ui.form .field.disabled > label,
+.ui.form .fields.disabled > label {
+ opacity: @disabledLabelOpacity;
+}
+.ui.form .field.disabled :disabled {
+ opacity: 1;
+}
+
+
+/*--------------
+ Loading
+---------------*/
+
+.ui.loading.form {
+ position: relative;
+ cursor: default;
+ pointer-events: none;
+}
+.ui.loading.form:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ left: 0%;
+ background: @loaderDimmerColor;
+ width: 100%;
+ height: 100%;
+ z-index: @loaderDimmerZIndex;
+}
+.ui.loading.form:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
+
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
+
+ animation: form-spin @loaderSpeed linear;
+ animation-iteration-count: infinite;
+
+ border-radius: @circularRadius;
+
+ border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
+ border-style: solid;
+ border-width: @loaderLineWidth;
+
+ box-shadow: 0px 0px 0px 1px transparent;
+ visibility: visible;
+ z-index: @loaderLineZIndex;
+}
+
+@keyframes form-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+
+/*******************************
+ Element Types
+*******************************/
+
+/*--------------------
+ Required Field
+---------------------*/
+
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+ margin: @requiredMargin;
+ content: @requiredContent;
+ color: @requiredColor;
+}
+
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+ position: absolute;
+ top: 0%;
+ left: 100%;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+
+/*--------------------
+ Inverted Colors
+---------------------*/
+
+.ui.inverted.form label,
+.ui.form .inverted.segment label,
+.ui.form .inverted.segment .ui.checkbox label,
+.ui.form .inverted.segment .ui.checkbox .box,
+.ui.inverted.form .ui.checkbox label,
+.ui.inverted.form .ui.checkbox .box,
+.ui.inverted.form .inline.fields > label,
+.ui.inverted.form .inline.fields .field > label,
+.ui.inverted.form .inline.fields .field > p,
+.ui.inverted.form .inline.field > label,
+.ui.inverted.form .inline.field > p {
+ color: @invertedLabelColor;
+}
+
+/* Inverted Field */
+.ui.inverted.form input:not([type]),
+.ui.inverted.form input[type="date"],
+.ui.inverted.form input[type="datetime-local"],
+.ui.inverted.form input[type="email"],
+.ui.inverted.form input[type="number"],
+.ui.inverted.form input[type="password"],
+.ui.inverted.form input[type="search"],
+.ui.inverted.form input[type="tel"],
+.ui.inverted.form input[type="time"],
+.ui.inverted.form input[type="text"],
+.ui.inverted.form input[type="file"],
+.ui.inverted.form input[type="url"] {
+ background: @invertedInputBackground;
+ border-color: @invertedInputBorderColor;
+ color: @invertedInputColor;
+ box-shadow: @invertedInputBoxShadow;
+}
+
+
+/*--------------------
+ Field Groups
+---------------------*/
+
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+ display: block;
+ margin: @groupedMargin;
+}
+.ui.form .grouped.fields:last-child {
+ margin-bottom: 0em;
+}
+
+.ui.form .grouped.fields > label {
+ margin: @groupedLabelMargin;
+ color: @groupedLabelColor;
+ font-size: @groupedLabelFontSize;
+ font-weight: @groupedLabelFontWeight;
+ text-transform: @groupedLabelTextTransform;
+}
+
+.ui.form .grouped.fields .field,
+.ui.form .grouped.inline.fields .field {
+ display: block;
+ margin: @groupedFieldMargin;
+ padding: 0em;
+}
+
+/*--------------------
+ Fields
+---------------------*/
+
+/* Split fields */
+.ui.form .fields {
+ display: flex;
+ flex-direction: row;
+ margin: @fieldsMargin;
+}
+.ui.form .fields > .field {
+ flex: 0 1 auto;
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+}
+.ui.form .fields > .field:first-child {
+ border-left: none;
+ box-shadow: none;
+}
+
+/* Other Combinations */
+.ui.form .two.fields > .fields,
+.ui.form .two.fields > .field {
+ width: @twoColumn;
+}
+.ui.form .three.fields > .fields,
+.ui.form .three.fields > .field {
+ width: @threeColumn;
+}
+.ui.form .four.fields > .fields,
+.ui.form .four.fields > .field {
+ width: @fourColumn;
+}
+.ui.form .five.fields > .fields,
+.ui.form .five.fields > .field {
+ width: @fiveColumn;
+}
+.ui.form .six.fields > .fields,
+.ui.form .six.fields > .field {
+ width: @sixColumn;
+}
+.ui.form .seven.fields > .fields,
+.ui.form .seven.fields > .field {
+ width: @sevenColumn;
+}
+.ui.form .eight.fields > .fields,
+.ui.form .eight.fields > .field {
+ width: @eightColumn;
+}
+.ui.form .nine.fields > .fields,
+.ui.form .nine.fields > .field {
+ width: @nineColumn;
+}
+.ui.form .ten.fields > .fields,
+.ui.form .ten.fields > .field {
+ width: @tenColumn;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.form .fields {
+ flex-wrap: wrap;
+ }
+
+ .ui[class*="equal width"].form .fields > .field,
+ .ui.form [class*="equal width"].fields > .field,
+ .ui.form .two.fields > .fields,
+ .ui.form .two.fields > .field,
+ .ui.form .three.fields > .fields,
+ .ui.form .three.fields > .field,
+ .ui.form .four.fields > .fields,
+ .ui.form .four.fields > .field,
+ .ui.form .five.fields > .fields,
+ .ui.form .five.fields > .field,
+ .ui.form .six.fields > .fields,
+ .ui.form .six.fields > .field,
+ .ui.form .seven.fields > .fields,
+ .ui.form .seven.fields > .field,
+ .ui.form .eight.fields > .fields,
+ .ui.form .eight.fields > .field,
+ .ui.form .nine.fields > .fields,
+ .ui.form .nine.fields > .field,
+ .ui.form .ten.fields > .fields,
+ .ui.form .ten.fields > .field {
+ width: @oneColumn !important;
+ margin: 0em 0em @rowDistance;
+ }
+}
+
+
+/* Sizing Combinations */
+.ui.form .fields .wide.field {
+ width: @oneWide;
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+}
+
+.ui.form .one.wide.field {
+ width: @oneWide !important;
+}
+.ui.form .two.wide.field {
+ width: @twoWide !important;
+}
+.ui.form .three.wide.field {
+ width: @threeWide !important;
+}
+.ui.form .four.wide.field {
+ width: @fourWide !important;
+}
+.ui.form .five.wide.field {
+ width: @fiveWide !important;
+}
+.ui.form .six.wide.field {
+ width: @sixWide !important;
+}
+.ui.form .seven.wide.field {
+ width: @sevenWide !important;
+}
+.ui.form .eight.wide.field {
+ width: @eightWide !important;
+}
+.ui.form .nine.wide.field {
+ width: @nineWide !important;
+}
+.ui.form .ten.wide.field {
+ width: @tenWide !important;
+}
+.ui.form .eleven.wide.field {
+ width: @elevenWide !important;
+}
+.ui.form .twelve.wide.field {
+ width: @twelveWide !important;
+}
+.ui.form .thirteen.wide.field {
+ width: @thirteenWide !important;
+}
+.ui.form .fourteen.wide.field {
+ width: @fourteenWide !important;
+}
+.ui.form .fifteen.wide.field {
+ width: @fifteenWide !important;
+}
+.ui.form .sixteen.wide.field {
+ width: @sixteenWide !important;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.form .two.fields > .fields,
+ .ui.form .two.fields > .field,
+ .ui.form .three.fields > .fields,
+ .ui.form .three.fields > .field,
+ .ui.form .four.fields > .fields,
+ .ui.form .four.fields > .field,
+ .ui.form .five.fields > .fields,
+ .ui.form .five.fields > .field,
+ .ui.form .fields > .two.wide.field,
+ .ui.form .fields > .three.wide.field,
+ .ui.form .fields > .four.wide.field,
+ .ui.form .fields > .five.wide.field,
+ .ui.form .fields > .six.wide.field,
+ .ui.form .fields > .seven.wide.field,
+ .ui.form .fields > .eight.wide.field,
+ .ui.form .fields > .nine.wide.field,
+ .ui.form .fields > .ten.wide.field,
+ .ui.form .fields > .eleven.wide.field,
+ .ui.form .fields > .twelve.wide.field,
+ .ui.form .fields > .thirteen.wide.field,
+ .ui.form .fields > .fourteen.wide.field,
+ .ui.form .fields > .fifteen.wide.field,
+ .ui.form .fields > .sixteen.wide.field {
+ width: @oneColumn !important;
+ }
+ .ui.form .fields {
+ margin-bottom: 0em;
+ }
+}
+
+/*--------------------
+ Equal Width
+---------------------*/
+
+.ui[class*="equal width"].form .fields > .field,
+.ui.form [class*="equal width"].fields > .field {
+ width: 100%;
+ flex: 1 1 auto;
+}
+
+/*--------------------
+ Inline Fields
+---------------------*/
+
+.ui.form .inline.fields {
+ margin: @fieldMargin;
+ align-items: center;
+}
+.ui.form .inline.fields .field {
+ margin: 0em;
+ padding: @inlineFieldsMargin;
+}
+
+/* Inline Label */
+.ui.form .inline.fields > label,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p {
+ display: inline-block;
+ width: auto;
+ margin-top: 0em;
+ margin-bottom: 0em;
+ vertical-align: baseline;
+ font-size: @inlineLabelFontSize;
+ font-weight: @inlineLabelFontWeight;
+ color: @inlineLabelColor;
+ text-transform: @inlineLabelTextTransform;
+}
+
+/* Grouped Inline Label */
+.ui.form .inline.fields > label {
+ margin: @groupedInlineLabelMargin;
+}
+
+/* Inline Input */
+.ui.form .inline.fields .field > input,
+.ui.form .inline.fields .field > select,
+.ui.form .inline.field > input,
+.ui.form .inline.field > select {
+ display: inline-block;
+ width: auto;
+
+ margin-top: 0em;
+ margin-bottom: 0em;
+
+ vertical-align: middle;
+ font-size: @inlineInputSize;
+}
+
+/* Label */
+.ui.form .inline.fields .field > :first-child,
+.ui.form .inline.field > :first-child {
+ margin: 0em @inlineLabelDistance 0em 0em;
+}
+.ui.form .inline.fields .field > :only-child,
+.ui.form .inline.field > :only-child {
+ margin: 0em;
+}
+
+/* Wide */
+.ui.form .inline.fields .wide.field {
+ display: flex;
+ align-items: center;
+}
+.ui.form .inline.fields .wide.field > input,
+.ui.form .inline.fields .wide.field > select {
+ width: 100%;
+}
+
+
+/*--------------------
+ Sizes
+---------------------*/
+
+.ui.mini.form {
+ font-size: @mini;
+}
+.ui.tiny.form {
+ font-size: @tiny;
+}
+.ui.small.form {
+ font-size: @small;
+}
+.ui.form {
+ font-size: @medium;
+}
+.ui.large.form {
+ font-size: @large;
+}
+.ui.big.form {
+ font-size: @big;
+}
+.ui.huge.form {
+ font-size: @huge;
+}
+.ui.massive.form {
+ font-size: @massive;
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/grid.less b/semantic/src/definitions/collections/grid.less
new file mode 100644
index 0000000..ba1b535
--- /dev/null
+++ b/semantic/src/definitions/collections/grid.less
@@ -0,0 +1,1920 @@
+/*!
+ * # Semantic UI - Grid
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'grid';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Standard
+*******************************/
+
+.ui.grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: stretch;
+ padding: 0em;
+}
+
+/*----------------------
+ Remove Gutters
+-----------------------*/
+
+.ui.grid {
+ margin-top: -(@rowSpacing / 2);
+ margin-bottom: -(@rowSpacing / 2);
+ margin-left: -(@gutterWidth / 2);
+ margin-right: -(@gutterWidth / 2);
+}
+.ui.relaxed.grid {
+ margin-left: -(@relaxedGutterWidth / 2);
+ margin-right: -(@relaxedGutterWidth / 2);
+}
+.ui[class*="very relaxed"].grid {
+ margin-left: -(@veryRelaxedGutterWidth / 2);
+ margin-right: -(@veryRelaxedGutterWidth / 2);
+}
+
+
+/* Preserve Rows Spacing on Consecutive Grids */
+.ui.grid + .grid {
+ margin-top: @consecutiveGridDistance;
+}
+
+/*-------------------
+ Columns
+--------------------*/
+
+/* Standard 16 column */
+.ui.grid > .column:not(.row),
+.ui.grid > .row > .column {
+ position: relative;
+ display: inline-block;
+
+ width: @oneWide;
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+ vertical-align: top;
+}
+
+.ui.grid > * {
+ padding-left: (@gutterWidth / 2);
+ padding-right: (@gutterWidth / 2);
+}
+
+/*-------------------
+ Rows
+--------------------*/
+
+.ui.grid > .row {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: inherit;
+ align-items: stretch;
+ width: 100% !important;
+ padding: 0rem;
+ padding-top: (@rowSpacing / 2);
+ padding-bottom: (@rowSpacing / 2);
+}
+
+/*-------------------
+ Columns
+--------------------*/
+
+/* Vertical padding when no rows */
+.ui.grid > .column:not(.row) {
+ padding-top: (@rowSpacing / 2);
+ padding-bottom: (@rowSpacing / 2);
+}
+.ui.grid > .row > .column {
+ margin-top: 0em;
+ margin-bottom: 0em;
+}
+
+/*-------------------
+ Content
+--------------------*/
+
+.ui.grid > .row > img,
+.ui.grid > .row > .column > img {
+ max-width: @columnMaxImageWidth;
+}
+
+/*-------------------
+ Loose Coupling
+--------------------*/
+
+/* Collapse Margin on Consecutive Grid */
+.ui.grid > .ui.grid:first-child {
+ margin-top: 0em;
+}
+.ui.grid > .ui.grid:last-child {
+ margin-bottom: 0em;
+}
+
+/* Segment inside Aligned Grid */
+.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
+.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
+ width: 100%;
+}
+
+/* Align Dividers with Gutter */
+.ui.grid .row + .ui.divider {
+ flex-grow: 1;
+ margin: (@rowSpacing / 2) (@gutterWidth / 2);
+}
+.ui.grid .column + .ui.vertical.divider {
+ height: ~"calc(50% - "(@rowSpacing/2)~")";
+}
+
+/* Remove Border on Last Horizontal Segment */
+.ui.grid > .row > .column:last-child > .horizontal.segment,
+.ui.grid > .column:last-child > .horizontal.segment {
+ box-shadow: none;
+}
+
+/*******************************
+ Variations
+*******************************/
+
+
+/*-----------------------
+ Page Grid
+-------------------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.page.grid {
+ width: @mobileWidth;
+ padding-left: @mobileGutter;
+ padding-right: @mobileGutter;
+ margin-left: 0em;
+ margin-right: 0em;
+ }
+}
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui.page.grid {
+ width: @tabletWidth;
+ margin-left: @tabletMargin;
+ margin-right: @tabletMargin;
+ padding-left: @tabletGutter;
+ padding-right: @tabletGutter;
+ }
+}
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+ .ui.page.grid {
+ width: @computerWidth;
+ margin-left: @computerMargin;
+ margin-right: @computerMargin;
+ padding-left: @computerGutter;
+ padding-right: @computerGutter;
+ }
+}
+@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
+ .ui.page.grid {
+ width: @largeMonitorWidth;
+ margin-left: @largeMonitorMargin;
+ margin-right: @largeMonitorMargin;
+ padding-left: @largeMonitorGutter;
+ padding-right: @largeMonitorGutter;
+ }
+}
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+ .ui.page.grid {
+ width: @widescreenMonitorWidth;
+ margin-left: @widescreenMargin;
+ margin-right: @widescreenMargin;
+ padding-left: @widescreenMonitorGutter;
+ padding-right: @widescreenMonitorGutter;
+ }
+}
+
+
+/*-------------------
+ Column Count
+--------------------*/
+
+/* Assume full width with one column */
+.ui.grid > .column:only-child,
+.ui.grid > .row > .column:only-child {
+ width: @oneColumn;
+}
+
+/* Grid Based */
+.ui[class*="one column"].grid > .row > .column,
+.ui[class*="one column"].grid > .column:not(.row) {
+ width: @oneColumn;
+}
+.ui[class*="two column"].grid > .row > .column,
+.ui[class*="two column"].grid > .column:not(.row) {
+ width: @twoColumn;
+}
+.ui[class*="three column"].grid > .row > .column,
+.ui[class*="three column"].grid > .column:not(.row) {
+ width: @threeColumn;
+}
+.ui[class*="four column"].grid > .row > .column,
+.ui[class*="four column"].grid > .column:not(.row) {
+ width: @fourColumn;
+}
+.ui[class*="five column"].grid > .row > .column,
+.ui[class*="five column"].grid > .column:not(.row) {
+ width: @fiveColumn;
+}
+.ui[class*="six column"].grid > .row > .column,
+.ui[class*="six column"].grid > .column:not(.row) {
+ width: @sixColumn;
+}
+.ui[class*="seven column"].grid > .row > .column,
+.ui[class*="seven column"].grid > .column:not(.row) {
+ width: @sevenColumn;
+}
+.ui[class*="eight column"].grid > .row > .column,
+.ui[class*="eight column"].grid > .column:not(.row) {
+ width: @eightColumn;
+}
+.ui[class*="nine column"].grid > .row > .column,
+.ui[class*="nine column"].grid > .column:not(.row) {
+ width: @nineColumn;
+}
+.ui[class*="ten column"].grid > .row > .column,
+.ui[class*="ten column"].grid > .column:not(.row) {
+ width: @tenColumn;
+}
+.ui[class*="eleven column"].grid > .row > .column,
+.ui[class*="eleven column"].grid > .column:not(.row) {
+ width: @elevenColumn;
+}
+.ui[class*="twelve column"].grid > .row > .column,
+.ui[class*="twelve column"].grid > .column:not(.row) {
+ width: @twelveColumn;
+}
+.ui[class*="thirteen column"].grid > .row > .column,
+.ui[class*="thirteen column"].grid > .column:not(.row) {
+ width: @thirteenColumn;
+}
+.ui[class*="fourteen column"].grid > .row > .column,
+.ui[class*="fourteen column"].grid > .column:not(.row) {
+ width: @fourteenColumn;
+}
+.ui[class*="fifteen column"].grid > .row > .column,
+.ui[class*="fifteen column"].grid > .column:not(.row) {
+ width: @fifteenColumn;
+}
+.ui[class*="sixteen column"].grid > .row > .column,
+.ui[class*="sixteen column"].grid > .column:not(.row) {
+ width: @sixteenColumn;
+}
+
+/* Row Based Overrides */
+.ui.grid > [class*="one column"].row > .column {
+ width: @oneColumn !important;
+}
+.ui.grid > [class*="two column"].row > .column {
+ width: @twoColumn !important;
+}
+.ui.grid > [class*="three column"].row > .column {
+ width: @threeColumn !important;
+}
+.ui.grid > [class*="four column"].row > .column {
+ width: @fourColumn !important;
+}
+.ui.grid > [class*="five column"].row > .column {
+ width: @fiveColumn !important;
+}
+.ui.grid > [class*="six column"].row > .column {
+ width: @sixColumn !important;
+}
+.ui.grid > [class*="seven column"].row > .column {
+ width: @sevenColumn !important;
+}
+.ui.grid > [class*="eight column"].row > .column {
+ width: @eightColumn !important;
+}
+.ui.grid > [class*="nine column"].row > .column {
+ width: @nineColumn !important;
+}
+.ui.grid > [class*="ten column"].row > .column {
+ width: @tenColumn !important;
+}
+.ui.grid > [class*="eleven column"].row > .column {
+ width: @elevenColumn !important;
+}
+.ui.grid > [class*="twelve column"].row > .column {
+ width: @twelveColumn !important;
+}
+.ui.grid > [class*="thirteen column"].row > .column {
+ width: @thirteenColumn !important;
+}
+.ui.grid > [class*="fourteen column"].row > .column {
+ width: @fourteenColumn !important;
+}
+.ui.grid > [class*="fifteen column"].row > .column {
+ width: @fifteenColumn !important;
+}
+.ui.grid > [class*="sixteen column"].row > .column {
+ width: @sixteenColumn !important;
+}
+
+/* Celled Page */
+.ui.celled.page.grid {
+ box-shadow: none;
+}
+
+/*-------------------
+ Column Width
+--------------------*/
+
+/* Sizing Combinations */
+.ui.grid > .row > [class*="one wide"].column,
+.ui.grid > .column.row > [class*="one wide"].column,
+.ui.grid > [class*="one wide"].column,
+.ui.column.grid > [class*="one wide"].column {
+ width: @oneWide !important;
+}
+.ui.grid > .row > [class*="two wide"].column,
+.ui.grid > .column.row > [class*="two wide"].column,
+.ui.grid > [class*="two wide"].column,
+.ui.column.grid > [class*="two wide"].column {
+ width: @twoWide !important;
+}
+.ui.grid > .row > [class*="three wide"].column,
+.ui.grid > .column.row > [class*="three wide"].column,
+.ui.grid > [class*="three wide"].column,
+.ui.column.grid > [class*="three wide"].column {
+ width: @threeWide !important;
+}
+.ui.grid > .row > [class*="four wide"].column,
+.ui.grid > .column.row > [class*="four wide"].column,
+.ui.grid > [class*="four wide"].column,
+.ui.column.grid > [class*="four wide"].column {
+ width: @fourWide !important;
+}
+.ui.grid > .row > [class*="five wide"].column,
+.ui.grid > .column.row > [class*="five wide"].column,
+.ui.grid > [class*="five wide"].column,
+.ui.column.grid > [class*="five wide"].column {
+ width: @fiveWide !important;
+}
+.ui.grid > .row > [class*="six wide"].column,
+.ui.grid > .column.row > [class*="six wide"].column,
+.ui.grid > [class*="six wide"].column,
+.ui.column.grid > [class*="six wide"].column {
+ width: @sixWide !important;
+}
+.ui.grid > .row > [class*="seven wide"].column,
+.ui.grid > .column.row > [class*="seven wide"].column,
+.ui.grid > [class*="seven wide"].column,
+.ui.column.grid > [class*="seven wide"].column {
+ width: @sevenWide !important;
+}
+.ui.grid > .row > [class*="eight wide"].column,
+.ui.grid > .column.row > [class*="eight wide"].column,
+.ui.grid > [class*="eight wide"].column,
+.ui.column.grid > [class*="eight wide"].column {
+ width: @eightWide !important;
+}
+.ui.grid > .row > [class*="nine wide"].column,
+.ui.grid > .column.row > [class*="nine wide"].column,
+.ui.grid > [class*="nine wide"].column,
+.ui.column.grid > [class*="nine wide"].column {
+ width: @nineWide !important;
+}
+.ui.grid > .row > [class*="ten wide"].column,
+.ui.grid > .column.row > [class*="ten wide"].column,
+.ui.grid > [class*="ten wide"].column,
+.ui.column.grid > [class*="ten wide"].column {
+ width: @tenWide !important;
+}
+.ui.grid > .row > [class*="eleven wide"].column,
+.ui.grid > .column.row > [class*="eleven wide"].column,
+.ui.grid > [class*="eleven wide"].column,
+.ui.column.grid > [class*="eleven wide"].column {
+ width: @elevenWide !important;
+}
+.ui.grid > .row > [class*="twelve wide"].column,
+.ui.grid > .column.row > [class*="twelve wide"].column,
+.ui.grid > [class*="twelve wide"].column,
+.ui.column.grid > [class*="twelve wide"].column {
+ width: @twelveWide !important;
+}
+.ui.grid > .row > [class*="thirteen wide"].column,
+.ui.grid > .column.row > [class*="thirteen wide"].column,
+.ui.grid > [class*="thirteen wide"].column,
+.ui.column.grid > [class*="thirteen wide"].column {
+ width: @thirteenWide !important;
+}
+.ui.grid > .row > [class*="fourteen wide"].column,
+.ui.grid > .column.row > [class*="fourteen wide"].column,
+.ui.grid > [class*="fourteen wide"].column,
+.ui.column.grid > [class*="fourteen wide"].column {
+ width: @fourteenWide !important;
+}
+.ui.grid > .row > [class*="fifteen wide"].column,
+.ui.grid > .column.row > [class*="fifteen wide"].column,
+.ui.grid > [class*="fifteen wide"].column,
+.ui.column.grid > [class*="fifteen wide"].column {
+ width: @fifteenWide !important;
+}
+.ui.grid > .row > [class*="sixteen wide"].column,
+.ui.grid > .column.row > [class*="sixteen wide"].column,
+.ui.grid > [class*="sixteen wide"].column,
+.ui.column.grid > [class*="sixteen wide"].column {
+ width: @sixteenWide !important;
+}
+
+/*----------------------
+ Width per Device
+-----------------------*/
+
+/* Mobile Sizing Combinations */
+@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
+ .ui.grid > .row > [class*="one wide mobile"].column,
+ .ui.grid > .column.row > [class*="one wide mobile"].column,
+ .ui.grid > [class*="one wide mobile"].column,
+ .ui.column.grid > [class*="one wide mobile"].column {
+ width: @oneWide !important;
+ }
+ .ui.grid > .row > [class*="two wide mobile"].column,
+ .ui.grid > .column.row > [class*="two wide mobile"].column,
+ .ui.grid > [class*="two wide mobile"].column,
+ .ui.column.grid > [class*="two wide mobile"].column {
+ width: @twoWide !important;
+ }
+ .ui.grid > .row > [class*="three wide mobile"].column,
+ .ui.grid > .column.row > [class*="three wide mobile"].column,
+ .ui.grid > [class*="three wide mobile"].column,
+ .ui.column.grid > [class*="three wide mobile"].column {
+ width: @threeWide !important;
+ }
+ .ui.grid > .row > [class*="four wide mobile"].column,
+ .ui.grid > .column.row > [class*="four wide mobile"].column,
+ .ui.grid > [class*="four wide mobile"].column,
+ .ui.column.grid > [class*="four wide mobile"].column {
+ width: @fourWide !important;
+ }
+ .ui.grid > .row > [class*="five wide mobile"].column,
+ .ui.grid > .column.row > [class*="five wide mobile"].column,
+ .ui.grid > [class*="five wide mobile"].column,
+ .ui.column.grid > [class*="five wide mobile"].column {
+ width: @fiveWide !important;
+ }
+ .ui.grid > .row > [class*="six wide mobile"].column,
+ .ui.grid > .column.row > [class*="six wide mobile"].column,
+ .ui.grid > [class*="six wide mobile"].column,
+ .ui.column.grid > [class*="six wide mobile"].column {
+ width: @sixWide !important;
+ }
+ .ui.grid > .row > [class*="seven wide mobile"].column,
+ .ui.grid > .column.row > [class*="seven wide mobile"].column,
+ .ui.grid > [class*="seven wide mobile"].column,
+ .ui.column.grid > [class*="seven wide mobile"].column {
+ width: @sevenWide !important;
+ }
+ .ui.grid > .row > [class*="eight wide mobile"].column,
+ .ui.grid > .column.row > [class*="eight wide mobile"].column,
+ .ui.grid > [class*="eight wide mobile"].column,
+ .ui.column.grid > [class*="eight wide mobile"].column {
+ width: @eightWide !important;
+ }
+ .ui.grid > .row > [class*="nine wide mobile"].column,
+ .ui.grid > .column.row > [class*="nine wide mobile"].column,
+ .ui.grid > [class*="nine wide mobile"].column,
+ .ui.column.grid > [class*="nine wide mobile"].column {
+ width: @nineWide !important;
+ }
+ .ui.grid > .row > [class*="ten wide mobile"].column,
+ .ui.grid > .column.row > [class*="ten wide mobile"].column,
+ .ui.grid > [class*="ten wide mobile"].column,
+ .ui.column.grid > [class*="ten wide mobile"].column {
+ width: @tenWide !important;
+ }
+ .ui.grid > .row > [class*="eleven wide mobile"].column,
+ .ui.grid > .column.row > [class*="eleven wide mobile"].column,
+ .ui.grid > [class*="eleven wide mobile"].column,
+ .ui.column.grid > [class*="eleven wide mobile"].column {
+ width: @elevenWide !important;
+ }
+ .ui.grid > .row > [class*="twelve wide mobile"].column,
+ .ui.grid > .column.row > [class*="twelve wide mobile"].column,
+ .ui.grid > [class*="twelve wide mobile"].column,
+ .ui.column.grid > [class*="twelve wide mobile"].column {
+ width: @twelveWide !important;
+ }
+ .ui.grid > .row > [class*="thirteen wide mobile"].column,
+ .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
+ .ui.grid > [class*="thirteen wide mobile"].column,
+ .ui.column.grid > [class*="thirteen wide mobile"].column {
+ width: @thirteenWide !important;
+ }
+ .ui.grid > .row > [class*="fourteen wide mobile"].column,
+ .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
+ .ui.grid > [class*="fourteen wide mobile"].column,
+ .ui.column.grid > [class*="fourteen wide mobile"].column {
+ width: @fourteenWide !important;
+ }
+ .ui.grid > .row > [class*="fifteen wide mobile"].column,
+ .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
+ .ui.grid > [class*="fifteen wide mobile"].column,
+ .ui.column.grid > [class*="fifteen wide mobile"].column {
+ width: @fifteenWide !important;
+ }
+ .ui.grid > .row > [class*="sixteen wide mobile"].column,
+ .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
+ .ui.grid > [class*="sixteen wide mobile"].column,
+ .ui.column.grid > [class*="sixteen wide mobile"].column {
+ width: @sixteenWide !important;
+ }
+}
+
+/* Tablet Sizing Combinations */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui.grid > .row > [class*="one wide tablet"].column,
+ .ui.grid > .column.row > [class*="one wide tablet"].column,
+ .ui.grid > [class*="one wide tablet"].column,
+ .ui.column.grid > [class*="one wide tablet"].column {
+ width: @oneWide !important;
+ }
+ .ui.grid > .row > [class*="two wide tablet"].column,
+ .ui.grid > .column.row > [class*="two wide tablet"].column,
+ .ui.grid > [class*="two wide tablet"].column,
+ .ui.column.grid > [class*="two wide tablet"].column {
+ width: @twoWide !important;
+ }
+ .ui.grid > .row > [class*="three wide tablet"].column,
+ .ui.grid > .column.row > [class*="three wide tablet"].column,
+ .ui.grid > [class*="three wide tablet"].column,
+ .ui.column.grid > [class*="three wide tablet"].column {
+ width: @threeWide !important;
+ }
+ .ui.grid > .row > [class*="four wide tablet"].column,
+ .ui.grid > .column.row > [class*="four wide tablet"].column,
+ .ui.grid > [class*="four wide tablet"].column,
+ .ui.column.grid > [class*="four wide tablet"].column {
+ width: @fourWide !important;
+ }
+ .ui.grid > .row > [class*="five wide tablet"].column,
+ .ui.grid > .column.row > [class*="five wide tablet"].column,
+ .ui.grid > [class*="five wide tablet"].column,
+ .ui.column.grid > [class*="five wide tablet"].column {
+ width: @fiveWide !important;
+ }
+ .ui.grid > .row > [class*="six wide tablet"].column,
+ .ui.grid > .column.row > [class*="six wide tablet"].column,
+ .ui.grid > [class*="six wide tablet"].column,
+ .ui.column.grid > [class*="six wide tablet"].column {
+ width: @sixWide !important;
+ }
+ .ui.grid > .row > [class*="seven wide tablet"].column,
+ .ui.grid > .column.row > [class*="seven wide tablet"].column,
+ .ui.grid > [class*="seven wide tablet"].column,
+ .ui.column.grid > [class*="seven wide tablet"].column {
+ width: @sevenWide !important;
+ }
+ .ui.grid > .row > [class*="eight wide tablet"].column,
+ .ui.grid > .column.row > [class*="eight wide tablet"].column,
+ .ui.grid > [class*="eight wide tablet"].column,
+ .ui.column.grid > [class*="eight wide tablet"].column {
+ width: @eightWide !important;
+ }
+ .ui.grid > .row > [class*="nine wide tablet"].column,
+ .ui.grid > .column.row > [class*="nine wide tablet"].column,
+ .ui.grid > [class*="nine wide tablet"].column,
+ .ui.column.grid > [class*="nine wide tablet"].column {
+ width: @nineWide !important;
+ }
+ .ui.grid > .row > [class*="ten wide tablet"].column,
+ .ui.grid > .column.row > [class*="ten wide tablet"].column,
+ .ui.grid > [class*="ten wide tablet"].column,
+ .ui.column.grid > [class*="ten wide tablet"].column {
+ width: @tenWide !important;
+ }
+ .ui.grid > .row > [class*="eleven wide tablet"].column,
+ .ui.grid > .column.row > [class*="eleven wide tablet"].column,
+ .ui.grid > [class*="eleven wide tablet"].column,
+ .ui.column.grid > [class*="eleven wide tablet"].column {
+ width: @elevenWide !important;
+ }
+ .ui.grid > .row > [class*="twelve wide tablet"].column,
+ .ui.grid > .column.row > [class*="twelve wide tablet"].column,
+ .ui.grid > [class*="twelve wide tablet"].column,
+ .ui.column.grid > [class*="twelve wide tablet"].column {
+ width: @twelveWide !important;
+ }
+ .ui.grid > .row > [class*="thirteen wide tablet"].column,
+ .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
+ .ui.grid > [class*="thirteen wide tablet"].column,
+ .ui.column.grid > [class*="thirteen wide tablet"].column {
+ width: @thirteenWide !important;
+ }
+ .ui.grid > .row > [class*="fourteen wide tablet"].column,
+ .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
+ .ui.grid > [class*="fourteen wide tablet"].column,
+ .ui.column.grid > [class*="fourteen wide tablet"].column {
+ width: @fourteenWide !important;
+ }
+ .ui.grid > .row > [class*="fifteen wide tablet"].column,
+ .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
+ .ui.grid > [class*="fifteen wide tablet"].column,
+ .ui.column.grid > [class*="fifteen wide tablet"].column {
+ width: @fifteenWide !important;
+ }
+ .ui.grid > .row > [class*="sixteen wide tablet"].column,
+ .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
+ .ui.grid > [class*="sixteen wide tablet"].column,
+ .ui.column.grid > [class*="sixteen wide tablet"].column {
+ width: @sixteenWide !important;
+ }
+}
+
+/* Computer/Desktop Sizing Combinations */
+@media only screen and (min-width: @computerBreakpoint) {
+ .ui.grid > .row > [class*="one wide computer"].column,
+ .ui.grid > .column.row > [class*="one wide computer"].column,
+ .ui.grid > [class*="one wide computer"].column,
+ .ui.column.grid > [class*="one wide computer"].column {
+ width: @oneWide !important;
+ }
+ .ui.grid > .row > [class*="two wide computer"].column,
+ .ui.grid > .column.row > [class*="two wide computer"].column,
+ .ui.grid > [class*="two wide computer"].column,
+ .ui.column.grid > [class*="two wide computer"].column {
+ width: @twoWide !important;
+ }
+ .ui.grid > .row > [class*="three wide computer"].column,
+ .ui.grid > .column.row > [class*="three wide computer"].column,
+ .ui.grid > [class*="three wide computer"].column,
+ .ui.column.grid > [class*="three wide computer"].column {
+ width: @threeWide !important;
+ }
+ .ui.grid > .row > [class*="four wide computer"].column,
+ .ui.grid > .column.row > [class*="four wide computer"].column,
+ .ui.grid > [class*="four wide computer"].column,
+ .ui.column.grid > [class*="four wide computer"].column {
+ width: @fourWide !important;
+ }
+ .ui.grid > .row > [class*="five wide computer"].column,
+ .ui.grid > .column.row > [class*="five wide computer"].column,
+ .ui.grid > [class*="five wide computer"].column,
+ .ui.column.grid > [class*="five wide computer"].column {
+ width: @fiveWide !important;
+ }
+ .ui.grid > .row > [class*="six wide computer"].column,
+ .ui.grid > .column.row > [class*="six wide computer"].column,
+ .ui.grid > [class*="six wide computer"].column,
+ .ui.column.grid > [class*="six wide computer"].column {
+ width: @sixWide !important;
+ }
+ .ui.grid > .row > [class*="seven wide computer"].column,
+ .ui.grid > .column.row > [class*="seven wide computer"].column,
+ .ui.grid > [class*="seven wide computer"].column,
+ .ui.column.grid > [class*="seven wide computer"].column {
+ width: @sevenWide !important;
+ }
+ .ui.grid > .row > [class*="eight wide computer"].column,
+ .ui.grid > .column.row > [class*="eight wide computer"].column,
+ .ui.grid > [class*="eight wide computer"].column,
+ .ui.column.grid > [class*="eight wide computer"].column {
+ width: @eightWide !important;
+ }
+ .ui.grid > .row > [class*="nine wide computer"].column,
+ .ui.grid > .column.row > [class*="nine wide computer"].column,
+ .ui.grid > [class*="nine wide computer"].column,
+ .ui.column.grid > [class*="nine wide computer"].column {
+ width: @nineWide !important;
+ }
+ .ui.grid > .row > [class*="ten wide computer"].column,
+ .ui.grid > .column.row > [class*="ten wide computer"].column,
+ .ui.grid > [class*="ten wide computer"].column,
+ .ui.column.grid > [class*="ten wide computer"].column {
+ width: @tenWide !important;
+ }
+ .ui.grid > .row > [class*="eleven wide computer"].column,
+ .ui.grid > .column.row > [class*="eleven wide computer"].column,
+ .ui.grid > [class*="eleven wide computer"].column,
+ .ui.column.grid > [class*="eleven wide computer"].column {
+ width: @elevenWide !important;
+ }
+ .ui.grid > .row > [class*="twelve wide computer"].column,
+ .ui.grid > .column.row > [class*="twelve wide computer"].column,
+ .ui.grid > [class*="twelve wide computer"].column,
+ .ui.column.grid > [class*="twelve wide computer"].column {
+ width: @twelveWide !important;
+ }
+ .ui.grid > .row > [class*="thirteen wide computer"].column,
+ .ui.grid > .column.row > [class*="thirteen wide computer"].column,
+ .ui.grid > [class*="thirteen wide computer"].column,
+ .ui.column.grid > [class*="thirteen wide computer"].column {
+ width: @thirteenWide !important;
+ }
+ .ui.grid > .row > [class*="fourteen wide computer"].column,
+ .ui.grid > .column.row > [class*="fourteen wide computer"].column,
+ .ui.grid > [class*="fourteen wide computer"].column,
+ .ui.column.grid > [class*="fourteen wide computer"].column {
+ width: @fourteenWide !important;
+ }
+ .ui.grid > .row > [class*="fifteen wide computer"].column,
+ .ui.grid > .column.row > [class*="fifteen wide computer"].column,
+ .ui.grid > [class*="fifteen wide computer"].column,
+ .ui.column.grid > [class*="fifteen wide computer"].column {
+ width: @fifteenWide !important;
+ }
+ .ui.grid > .row > [class*="sixteen wide computer"].column,
+ .ui.grid > .column.row > [class*="sixteen wide computer"].column,
+ .ui.grid > [class*="sixteen wide computer"].column,
+ .ui.column.grid > [class*="sixteen wide computer"].column {
+ width: @sixteenWide !important;
+ }
+}
+
+/* Large Monitor Sizing Combinations */
+@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){
+ .ui.grid > .row > [class*="one wide large screen"].column,
+ .ui.grid > .column.row > [class*="one wide large screen"].column,
+ .ui.grid > [class*="one wide large screen"].column,
+ .ui.column.grid > [class*="one wide large screen"].column {
+ width: @oneWide !important;
+ }
+ .ui.grid > .row > [class*="two wide large screen"].column,
+ .ui.grid > .column.row > [class*="two wide large screen"].column,
+ .ui.grid > [class*="two wide large screen"].column,
+ .ui.column.grid > [class*="two wide large screen"].column {
+ width: @twoWide !important;
+ }
+ .ui.grid > .row > [class*="three wide large screen"].column,
+ .ui.grid > .column.row > [class*="three wide large screen"].column,
+ .ui.grid > [class*="three wide large screen"].column,
+ .ui.column.grid > [class*="three wide large screen"].column {
+ width: @threeWide !important;
+ }
+ .ui.grid > .row > [class*="four wide large screen"].column,
+ .ui.grid > .column.row > [class*="four wide large screen"].column,
+ .ui.grid > [class*="four wide large screen"].column,
+ .ui.column.grid > [class*="four wide large screen"].column {
+ width: @fourWide !important;
+ }
+ .ui.grid > .row > [class*="five wide large screen"].column,
+ .ui.grid > .column.row > [class*="five wide large screen"].column,
+ .ui.grid > [class*="five wide large screen"].column,
+ .ui.column.grid > [class*="five wide large screen"].column {
+ width: @fiveWide !important;
+ }
+ .ui.grid > .row > [class*="six wide large screen"].column,
+ .ui.grid > .column.row > [class*="six wide large screen"].column,
+ .ui.grid > [class*="six wide large screen"].column,
+ .ui.column.grid > [class*="six wide large screen"].column {
+ width: @sixWide !important;
+ }
+ .ui.grid > .row > [class*="seven wide large screen"].column,
+ .ui.grid > .column.row > [class*="seven wide large screen"].column,
+ .ui.grid > [class*="seven wide large screen"].column,
+ .ui.column.grid > [class*="seven wide large screen"].column {
+ width: @sevenWide !important;
+ }
+ .ui.grid > .row > [class*="eight wide large screen"].column,
+ .ui.grid > .column.row > [class*="eight wide large screen"].column,
+ .ui.grid > [class*="eight wide large screen"].column,
+ .ui.column.grid > [class*="eight wide large screen"].column {
+ width: @eightWide !important;
+ }
+ .ui.grid > .row > [class*="nine wide large screen"].column,
+ .ui.grid > .column.row > [class*="nine wide large screen"].column,
+ .ui.grid > [class*="nine wide large screen"].column,
+ .ui.column.grid > [class*="nine wide large screen"].column {
+ width: @nineWide !important;
+ }
+ .ui.grid > .row > [class*="ten wide large screen"].column,
+ .ui.grid > .column.row > [class*="ten wide large screen"].column,
+ .ui.grid > [class*="ten wide large screen"].column,
+ .ui.column.grid > [class*="ten wide large screen"].column {
+ width: @tenWide !important;
+ }
+ .ui.grid > .row > [class*="eleven wide large screen"].column,
+ .ui.grid > .column.row > [class*="eleven wide large screen"].column,
+ .ui.grid > [class*="eleven wide large screen"].column,
+ .ui.column.grid > [class*="eleven wide large screen"].column {
+ width: @elevenWide !important;
+ }
+ .ui.grid > .row > [class*="twelve wide large screen"].column,
+ .ui.grid > .column.row > [class*="twelve wide large screen"].column,
+ .ui.grid > [class*="twelve wide large screen"].column,
+ .ui.column.grid > [class*="twelve wide large screen"].column {
+ width: @twelveWide !important;
+ }
+ .ui.grid > .row > [class*="thirteen wide large screen"].column,
+ .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
+ .ui.grid > [class*="thirteen wide large screen"].column,
+ .ui.column.grid > [class*="thirteen wide large screen"].column {
+ width: @thirteenWide !important;
+ }
+ .ui.grid > .row > [class*="fourteen wide large screen"].column,
+ .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
+ .ui.grid > [class*="fourteen wide large screen"].column,
+ .ui.column.grid > [class*="fourteen wide large screen"].column {
+ width: @fourteenWide !important;
+ }
+ .ui.grid > .row > [class*="fifteen wide large screen"].column,
+ .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
+ .ui.grid > [class*="fifteen wide large screen"].column,
+ .ui.column.grid > [class*="fifteen wide large screen"].column {
+ width: @fifteenWide !important;
+ }
+ .ui.grid > .row > [class*="sixteen wide large screen"].column,
+ .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
+ .ui.grid > [class*="sixteen wide large screen"].column,
+ .ui.column.grid > [class*="sixteen wide large screen"].column {
+ width: @sixteenWide !important;
+ }
+}
+
+/* Widescreen Sizing Combinations */
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+ .ui.grid > .row > [class*="one wide widescreen"].column,
+ .ui.grid > .column.row > [class*="one wide widescreen"].column,
+ .ui.grid > [class*="one wide widescreen"].column,
+ .ui.column.grid > [class*="one wide widescreen"].column {
+ width: @oneWide !important;
+ }
+ .ui.grid > .row > [class*="two wide widescreen"].column,
+ .ui.grid > .column.row > [class*="two wide widescreen"].column,
+ .ui.grid > [class*="two wide widescreen"].column,
+ .ui.column.grid > [class*="two wide widescreen"].column {
+ width: @twoWide !important;
+ }
+ .ui.grid > .row > [class*="three wide widescreen"].column,
+ .ui.grid > .column.row > [class*="three wide widescreen"].column,
+ .ui.grid > [class*="three wide widescreen"].column,
+ .ui.column.grid > [class*="three wide widescreen"].column {
+ width: @threeWide !important;
+ }
+ .ui.grid > .row > [class*="four wide widescreen"].column,
+ .ui.grid > .column.row > [class*="four wide widescreen"].column,
+ .ui.grid > [class*="four wide widescreen"].column,
+ .ui.column.grid > [class*="four wide widescreen"].column {
+ width: @fourWide !important;
+ }
+ .ui.grid > .row > [class*="five wide widescreen"].column,
+ .ui.grid > .column.row > [class*="five wide widescreen"].column,
+ .ui.grid > [class*="five wide widescreen"].column,
+ .ui.column.grid > [class*="five wide widescreen"].column {
+ width: @fiveWide !important;
+ }
+ .ui.grid > .row > [class*="six wide widescreen"].column,
+ .ui.grid > .column.row > [class*="six wide widescreen"].column,
+ .ui.grid > [class*="six wide widescreen"].column,
+ .ui.column.grid > [class*="six wide widescreen"].column {
+ width: @sixWide !important;
+ }
+ .ui.grid > .row > [class*="seven wide widescreen"].column,
+ .ui.grid > .column.row > [class*="seven wide widescreen"].column,
+ .ui.grid > [class*="seven wide widescreen"].column,
+ .ui.column.grid > [class*="seven wide widescreen"].column {
+ width: @sevenWide !important;
+ }
+ .ui.grid > .row > [class*="eight wide widescreen"].column,
+ .ui.grid > .column.row > [class*="eight wide widescreen"].column,
+ .ui.grid > [class*="eight wide widescreen"].column,
+ .ui.column.grid > [class*="eight wide widescreen"].column {
+ width: @eightWide !important;
+ }
+ .ui.grid > .row > [class*="nine wide widescreen"].column,
+ .ui.grid > .column.row > [class*="nine wide widescreen"].column,
+ .ui.grid > [class*="nine wide widescreen"].column,
+ .ui.column.grid > [class*="nine wide widescreen"].column {
+ width: @nineWide !important;
+ }
+ .ui.grid > .row > [class*="ten wide widescreen"].column,
+ .ui.grid > .column.row > [class*="ten wide widescreen"].column,
+ .ui.grid > [class*="ten wide widescreen"].column,
+ .ui.column.grid > [class*="ten wide widescreen"].column {
+ width: @tenWide !important;
+ }
+ .ui.grid > .row > [class*="eleven wide widescreen"].column,
+ .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
+ .ui.grid > [class*="eleven wide widescreen"].column,
+ .ui.column.grid > [class*="eleven wide widescreen"].column {
+ width: @elevenWide !important;
+ }
+ .ui.grid > .row > [class*="twelve wide widescreen"].column,
+ .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
+ .ui.grid > [class*="twelve wide widescreen"].column,
+ .ui.column.grid > [class*="twelve wide widescreen"].column {
+ width: @twelveWide !important;
+ }
+ .ui.grid > .row > [class*="thirteen wide widescreen"].column,
+ .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
+ .ui.grid > [class*="thirteen wide widescreen"].column,
+ .ui.column.grid > [class*="thirteen wide widescreen"].column {
+ width: @thirteenWide !important;
+ }
+ .ui.grid > .row > [class*="fourteen wide widescreen"].column,
+ .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
+ .ui.grid > [class*="fourteen wide widescreen"].column,
+ .ui.column.grid > [class*="fourteen wide widescreen"].column {
+ width: @fourteenWide !important;
+ }
+ .ui.grid > .row > [class*="fifteen wide widescreen"].column,
+ .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
+ .ui.grid > [class*="fifteen wide widescreen"].column,
+ .ui.column.grid > [class*="fifteen wide widescreen"].column {
+ width: @fifteenWide !important;
+ }
+ .ui.grid > .row > [class*="sixteen wide widescreen"].column,
+ .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
+ .ui.grid > [class*="sixteen wide widescreen"].column,
+ .ui.column.grid > [class*="sixteen wide widescreen"].column {
+ width: @sixteenWide !important;
+ }
+}
+
+/*----------------------
+ Centered
+-----------------------*/
+
+.ui.centered.grid,
+.ui.centered.grid > .row,
+.ui.grid > .centered.row {
+ text-align: center;
+ justify-content: center;
+}
+.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
+.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
+.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
+ text-align: left;
+}
+
+.ui.grid > .centered.column,
+.ui.grid > .row > .centered.column {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/*----------------------
+ Relaxed
+-----------------------*/
+
+.ui.relaxed.grid > .column:not(.row),
+.ui.relaxed.grid > .row > .column,
+.ui.grid > .relaxed.row > .column {
+ padding-left: (@relaxedGutterWidth / 2);
+ padding-right: (@relaxedGutterWidth / 2);
+}
+
+.ui[class*="very relaxed"].grid > .column:not(.row),
+.ui[class*="very relaxed"].grid > .row > .column,
+.ui.grid > [class*="very relaxed"].row > .column {
+ padding-left: (@veryRelaxedGutterWidth / 2);
+ padding-right: (@veryRelaxedGutterWidth / 2);
+}
+
+/* Coupling with UI Divider */
+.ui.relaxed.grid .row + .ui.divider,
+.ui.grid .relaxed.row + .ui.divider {
+ margin-left: (@relaxedGutterWidth / 2);
+ margin-right: (@relaxedGutterWidth / 2);
+}
+.ui[class*="very relaxed"].grid .row + .ui.divider,
+.ui.grid [class*="very relaxed"].row + .ui.divider {
+ margin-left: (@veryRelaxedGutterWidth / 2);
+ margin-right: (@veryRelaxedGutterWidth / 2);
+}
+
+
+/*----------------------
+ Padded
+-----------------------*/
+
+.ui.padded.grid:not(.vertically):not(.horizontally) {
+ margin: 0em !important;
+}
+[class*="horizontally padded"].ui.grid {
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+}
+[class*="vertically padded"].ui.grid {
+ margin-top: 0em !important;
+ margin-bottom: 0em !important;
+}
+
+/*----------------------
+ "Floated"
+-----------------------*/
+
+.ui.grid [class*="left floated"].column {
+ margin-right: auto;
+}
+.ui.grid [class*="right floated"].column {
+ margin-left: auto;
+}
+
+
+/*----------------------
+ Divided
+-----------------------*/
+
+.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
+.ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
+ box-shadow: @dividedBorder;
+}
+
+/* Swap from padding to margin on columns to have dividers align */
+.ui[class*="vertically divided"].grid > .column:not(.row),
+.ui[class*="vertically divided"].grid > .row > .column {
+ margin-top: (@rowSpacing / 2);
+ margin-bottom: (@rowSpacing / 2);
+ padding-top: 0rem;
+ padding-bottom: 0rem;
+}
+.ui[class*="vertically divided"].grid > .row {
+ margin-top: 0em;
+ margin-bottom: 0em;
+}
+
+
+
+/* No divider on first column on row */
+.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
+.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: none;
+}
+
+/* No space on top of first row */
+.ui[class*="vertically divided"].grid > .row:first-child > .column {
+ margin-top: 0em;
+}
+
+
+/* Divided Row */
+.ui.grid > .divided.row > .column {
+ box-shadow: @dividedBorder;
+}
+.ui.grid > .divided.row > .column:first-child {
+ box-shadow: none;
+}
+
+/* Vertically Divided */
+.ui[class*="vertically divided"].grid > .row {
+ position: relative;
+}
+.ui[class*="vertically divided"].grid > .row:before {
+ position: absolute;
+ content: "";
+ top: 0em;
+ left: 0px;
+
+ width: ~"calc(100% - "@gutterWidth~")";
+ height: 1px;
+
+ margin: 0% (@gutterWidth / 2);
+ box-shadow: @verticallyDividedBorder;
+}
+
+/* Padded Horizontally Divided */
+[class*="horizontally padded"].ui.divided.grid,
+.ui.padded.divided.grid:not(.vertically):not(.horizontally) {
+ width: 100%;
+}
+
+/* First Row Vertically Divided */
+.ui[class*="vertically divided"].grid > .row:first-child:before {
+ box-shadow: none;
+}
+
+/* Inverted Divided */
+.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
+.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
+ box-shadow: @dividedInvertedBorder;
+}
+.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
+.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: none;
+}
+.ui.inverted[class*="vertically divided"].grid > .row:before {
+ box-shadow: @verticallyDividedInvertedBorder;
+}
+
+/* Relaxed */
+.ui.relaxed[class*="vertically divided"].grid > .row:before {
+ margin-left: (@relaxedGutterWidth / 2);
+ margin-right: (@relaxedGutterWidth / 2);
+ width: ~"calc(100% - "@relaxedGutterWidth~")";
+}
+.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+ margin-left: @veryRelaxedGutterWidth;
+ margin-right: @veryRelaxedGutterWidth;
+ width: ~"calc(100% - "@veryRelaxedGutterWidth~")";
+}
+
+/*----------------------
+ Celled
+-----------------------*/
+
+.ui.celled.grid {
+ width: 100%;
+ margin: @celledMargin;
+ box-shadow: @celledGridDivider;
+}
+
+.ui.celled.grid > .row {
+ width: 100% !important;
+ margin: 0em;
+ padding: 0em;
+ box-shadow: @celledRowDivider;
+}
+.ui.celled.grid > .column:not(.row),
+.ui.celled.grid > .row > .column {
+ box-shadow: @celledColumnDivider;
+}
+
+.ui.celled.grid > .column:first-child,
+.ui.celled.grid > .row > .column:first-child {
+ box-shadow: none;
+}
+
+.ui.celled.grid > .column:not(.row),
+.ui.celled.grid > .row > .column {
+ padding: @celledPadding;
+}
+.ui.relaxed.celled.grid > .column:not(.row),
+.ui.relaxed.celled.grid > .row > .column {
+ padding: @celledRelaxedPadding;
+}
+.ui[class*="very relaxed"].celled.grid > .column:not(.row),
+.ui[class*="very relaxed"].celled.grid > .row > .column {
+ padding: @celledVeryRelaxedPadding;
+}
+
+/* Internally Celled */
+.ui[class*="internally celled"].grid {
+ box-shadow: none;
+ margin: 0em;
+}
+.ui[class*="internally celled"].grid > .row:first-child {
+ box-shadow: none;
+}
+.ui[class*="internally celled"].grid > .row > .column:first-child {
+ box-shadow: none;
+}
+
+/*----------------------
+ Vertically Aligned
+-----------------------*/
+
+/* Top Aligned */
+.ui[class*="top aligned"].grid > .column:not(.row),
+.ui[class*="top aligned"].grid > .row > .column,
+.ui.grid > [class*="top aligned"].row > .column,
+.ui.grid > [class*="top aligned"].column:not(.row),
+.ui.grid > .row > [class*="top aligned"].column {
+ flex-direction: column;
+ vertical-align: top;
+ align-self: flex-start !important;
+}
+
+/* Middle Aligned */
+.ui[class*="middle aligned"].grid > .column:not(.row),
+.ui[class*="middle aligned"].grid > .row > .column,
+.ui.grid > [class*="middle aligned"].row > .column,
+.ui.grid > [class*="middle aligned"].column:not(.row),
+.ui.grid > .row > [class*="middle aligned"].column {
+ flex-direction: column;
+ vertical-align: middle;
+ align-self: center !important;
+}
+
+/* Bottom Aligned */
+.ui[class*="bottom aligned"].grid > .column:not(.row),
+.ui[class*="bottom aligned"].grid > .row > .column,
+.ui.grid > [class*="bottom aligned"].row > .column,
+.ui.grid > [class*="bottom aligned"].column:not(.row),
+.ui.grid > .row > [class*="bottom aligned"].column {
+ flex-direction: column;
+ vertical-align: bottom;
+ align-self: flex-end !important;
+}
+
+/* Stretched */
+.ui.stretched.grid > .row > .column,
+.ui.stretched.grid > .column,
+.ui.grid > .stretched.row > .column,
+.ui.grid > .stretched.column:not(.row),
+.ui.grid > .row > .stretched.column {
+ display: inline-flex !important;
+ align-self: stretch;
+ flex-direction: column;
+}
+
+.ui.stretched.grid > .row > .column > *,
+.ui.stretched.grid > .column > *,
+.ui.grid > .stretched.row > .column > *,
+.ui.grid > .stretched.column:not(.row) > *,
+.ui.grid > .row > .stretched.column > * {
+ flex-grow: 1;
+}
+
+/*----------------------
+ Horizontally Centered
+-----------------------*/
+
+/* Left Aligned */
+.ui[class*="left aligned"].grid > .column,
+.ui[class*="left aligned"].grid > .row > .column,
+.ui.grid > [class*="left aligned"].row > .column,
+.ui.grid > [class*="left aligned"].column.column,
+.ui.grid > .row > [class*="left aligned"].column.column {
+ text-align: left;
+ align-self: inherit;
+}
+
+/* Center Aligned */
+.ui[class*="center aligned"].grid > .column,
+.ui[class*="center aligned"].grid > .row > .column,
+.ui.grid > [class*="center aligned"].row > .column,
+.ui.grid > [class*="center aligned"].column.column,
+.ui.grid > .row > [class*="center aligned"].column.column {
+ text-align: center;
+ align-self: inherit;
+}
+.ui[class*="center aligned"].grid {
+ justify-content: center;
+}
+
+/* Right Aligned */
+.ui[class*="right aligned"].grid > .column,
+.ui[class*="right aligned"].grid > .row > .column,
+.ui.grid > [class*="right aligned"].row > .column,
+.ui.grid > [class*="right aligned"].column.column,
+.ui.grid > .row > [class*="right aligned"].column.column {
+ text-align: right;
+ align-self: inherit;
+}
+
+/* Justified */
+.ui.justified.grid > .column,
+.ui.justified.grid > .row > .column,
+.ui.grid > .justified.row > .column,
+.ui.grid > .justified.column.column,
+.ui.grid > .row > .justified.column.column {
+ text-align: justify;
+ hyphens: auto;
+}
+
+/*----------------------
+ Colored
+-----------------------*/
+
+.ui.grid > .row > .red.column,
+.ui.grid > .row > .orange.column,
+.ui.grid > .row > .yellow.column,
+.ui.grid > .row > .olive.column,
+.ui.grid > .row > .green.column,
+.ui.grid > .row > .teal.column,
+.ui.grid > .row > .blue.column,
+.ui.grid > .row > .violet.column,
+.ui.grid > .row > .purple.column,
+.ui.grid > .row > .pink.column,
+.ui.grid > .row > .brown.column,
+.ui.grid > .row > .grey.column,
+.ui.grid > .row > .black.column {
+ margin-top: -(@rowSpacing / 2);
+ margin-bottom: -(@rowSpacing / 2);
+ padding-top: (@rowSpacing / 2);
+ padding-bottom: (@rowSpacing / 2);
+}
+
+/* Red */
+.ui.grid > .red.row,
+.ui.grid > .red.column,
+.ui.grid > .row > .red.column {
+ background-color: @red !important;
+ color: @white;
+}
+/* Orange */
+.ui.grid > .orange.row,
+.ui.grid > .orange.column,
+.ui.grid > .row > .orange.column {
+ background-color: @orange !important;
+ color: @white;
+}
+/* Yellow */
+.ui.grid > .yellow.row,
+.ui.grid > .yellow.column,
+.ui.grid > .row > .yellow.column {
+ background-color: @yellow !important;
+ color: @white;
+}
+/* Olive */
+.ui.grid > .olive.row,
+.ui.grid > .olive.column,
+.ui.grid > .row > .olive.column {
+ background-color: @olive !important;
+ color: @white;
+}
+/* Green */
+.ui.grid > .green.row,
+.ui.grid > .green.column,
+.ui.grid > .row > .green.column {
+ background-color: @green !important;
+ color: @white;
+}
+/* Teal */
+.ui.grid > .teal.row,
+.ui.grid > .teal.column,
+.ui.grid > .row > .teal.column {
+ background-color: @teal !important;
+ color: @white;
+}
+/* Blue */
+.ui.grid > .blue.row,
+.ui.grid > .blue.column,
+.ui.grid > .row > .blue.column {
+ background-color: @blue !important;
+ color: @white;
+}
+/* Violet */
+.ui.grid > .violet.row,
+.ui.grid > .violet.column,
+.ui.grid > .row > .violet.column {
+ background-color: @violet !important;
+ color: @white;
+}
+/* Purple */
+.ui.grid > .purple.row,
+.ui.grid > .purple.column,
+.ui.grid > .row > .purple.column {
+ background-color: @purple !important;
+ color: @white;
+}
+/* Pink */
+.ui.grid > .pink.row,
+.ui.grid > .pink.column,
+.ui.grid > .row > .pink.column {
+ background-color: @pink !important;
+ color: @white;
+}
+/* Brown */
+.ui.grid > .brown.row,
+.ui.grid > .brown.column,
+.ui.grid > .row > .brown.column {
+ background-color: @brown !important;
+ color: @white;
+}
+/* Grey */
+.ui.grid > .grey.row,
+.ui.grid > .grey.column,
+.ui.grid > .row > .grey.column {
+ background-color: @grey !important;
+ color: @white;
+}
+/* Black */
+.ui.grid > .black.row,
+.ui.grid > .black.column,
+.ui.grid > .row > .black.column {
+ background-color: @black !important;
+ color: @white;
+}
+
+
+/*----------------------
+ Equal Width
+-----------------------*/
+
+.ui[class*="equal width"].grid > .column:not(.row),
+.ui[class*="equal width"].grid > .row > .column,
+.ui.grid > [class*="equal width"].row > .column {
+ display: inline-block;
+ flex-grow: 1;
+}
+.ui[class*="equal width"].grid > .wide.column,
+.ui[class*="equal width"].grid > .row > .wide.column,
+.ui.grid > [class*="equal width"].row > .wide.column {
+ flex-grow: 0;
+}
+
+
+/*----------------------
+ Reverse
+-----------------------*/
+
+
+/* Mobile */
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui[class*="mobile reversed"].grid,
+ .ui[class*="mobile reversed"].grid > .row,
+ .ui.grid > [class*="mobile reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="mobile vertically reversed"].grid,
+ .ui.stackable[class*="mobile reversed"] {
+ flex-direction: column-reverse;
+ }
+
+ /* Divided Reversed */
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ /* Celled Reversed */
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+}
+
+/* Tablet */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui[class*="tablet reversed"].grid,
+ .ui[class*="tablet reversed"].grid > .row,
+ .ui.grid > [class*="tablet reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="tablet vertically reversed"].grid {
+ flex-direction: column-reverse;
+ }
+
+ /* Divided Reversed */
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ /* Celled Reversed */
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+}
+
+/* Computer */
+@media only screen and (min-width: @computerBreakpoint) {
+ .ui[class*="computer reversed"].grid,
+ .ui[class*="computer reversed"].grid > .row,
+ .ui.grid > [class*="computer reversed"].row {
+ flex-direction: row-reverse;
+ }
+ .ui[class*="computer vertically reversed"].grid {
+ flex-direction: column-reverse;
+ }
+
+ /* Divided Reversed */
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
+ box-shadow: @dividedBorder;
+ }
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
+ box-shadow: none;
+ }
+ /* Vertically Divided Reversed */
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+ box-shadow: @verticallyDividedBorder;
+ }
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+ box-shadow: none;
+ }
+ /* Celled Reversed */
+ .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
+ box-shadow: @celledColumnDivider;
+ }
+ .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
+ box-shadow: none;
+ }
+}
+
+
+/*-------------------
+ Doubling
+--------------------*/
+
+/* Tablet Only */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui.doubling.grid {
+ width: auto;
+ }
+ .ui.grid > .doubling.row,
+ .ui.doubling.grid > .row {
+ margin: 0em !important;
+ padding: 0em !important;
+ }
+ .ui.grid > .doubling.row > .column,
+ .ui.doubling.grid > .row > .column {
+ display: inline-block !important;
+ padding-top: (@rowSpacing / 2) !important;
+ padding-bottom: (@rowSpacing / 2) !important;
+ box-shadow: none !important;
+ margin: 0em;
+ }
+ .ui[class*="two column"].doubling.grid > .row > .column,
+ .ui[class*="two column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="two column"].doubling.row.row > .column {
+ width: @oneColumn !important;
+ }
+ .ui[class*="three column"].doubling.grid > .row > .column,
+ .ui[class*="three column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="three column"].doubling.row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="four column"].doubling.grid > .row > .column,
+ .ui[class*="four column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="four column"].doubling.row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="five column"].doubling.grid > .row > .column,
+ .ui[class*="five column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="five column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="six column"].doubling.grid > .row > .column,
+ .ui[class*="six column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="six column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="seven column"].doubling.grid > .row > .column,
+ .ui[class*="seven column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="seven column"].doubling.row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="eight column"].doubling.grid > .row > .column,
+ .ui[class*="eight column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="eight column"].doubling.row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="nine column"].doubling.grid > .row > .column,
+ .ui[class*="nine column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="nine column"].doubling.row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="ten column"].doubling.grid > .row > .column,
+ .ui[class*="ten column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="ten column"].doubling.row.row > .column {
+ width: @fiveColumn !important;
+ }
+ .ui[class*="eleven column"].doubling.grid > .row > .column,
+ .ui[class*="eleven column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="eleven column"].doubling.row.row > .column {
+ width: @fiveColumn !important;
+ }
+ .ui[class*="twelve column"].doubling.grid > .row > .column,
+ .ui[class*="twelve column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="twelve column"].doubling.row.row > .column {
+ width: @sixColumn !important;
+ }
+ .ui[class*="thirteen column"].doubling.grid > .row > .column,
+ .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
+ width: @sixColumn !important;
+ }
+ .ui[class*="fourteen column"].doubling.grid > .row > .column,
+ .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
+ width: @sevenColumn !important;
+ }
+ .ui[class*="fifteen column"].doubling.grid > .row > .column,
+ .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
+ width: @sevenColumn !important;
+ }
+ .ui[class*="sixteen column"].doubling.grid > .row > .column,
+ .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
+ .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
+ width: @eightColumn !important;
+ }
+}
+
+/* Mobile Only */
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.grid > .doubling.row,
+ .ui.doubling.grid > .row {
+ margin: 0em !important;
+ padding: 0em !important;
+ }
+ .ui.grid > .doubling.row > .column,
+ .ui.doubling.grid > .row > .column {
+ padding-top: (@rowSpacing / 2) !important;
+ padding-bottom: (@rowSpacing / 2) !important;
+ margin: 0em !important;
+ box-shadow: none !important;
+ }
+ .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
+ width: @oneColumn !important;
+ }
+ .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
+ width: @twoColumn !important;
+ }
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
+ width: @threeColumn !important;
+ }
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
+ width: @fourColumn !important;
+ }
+}
+
+/*-------------------
+ Stackable
+--------------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.stackable.grid {
+ width: auto;
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+ }
+ .ui.stackable.grid > .row > .wide.column,
+ .ui.stackable.grid > .wide.column,
+ .ui.stackable.grid > .column.grid > .column,
+ .ui.stackable.grid > .column.row > .column,
+ .ui.stackable.grid > .row > .column,
+ .ui.stackable.grid > .column:not(.row),
+ .ui.grid > .stackable.stackable.row > .column {
+ width: 100% !important;
+ margin: 0em 0em !important;
+ box-shadow: none !important;
+ padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
+ }
+ .ui.stackable.grid:not(.vertically) > .row {
+ margin: 0em;
+ padding: 0em;
+ }
+
+ /* Coupling */
+ .ui.container > .ui.stackable.grid > .column,
+ .ui.container > .ui.stackable.grid > .row > .column {
+ padding-left: 0em !important;
+ padding-right: 0em !important;
+ }
+
+ /* Don't pad inside segment or nested grid */
+ .ui.grid .ui.stackable.grid,
+ .ui.segment:not(.vertical) .ui.stackable.page.grid {
+ margin-left: -(@stackableGutter / 2) !important;
+ margin-right: -(@stackableGutter / 2) !important;
+ }
+
+ /* Divided Stackable */
+ .ui.stackable.divided.grid > .row:first-child > .column:first-child,
+ .ui.stackable.celled.grid > .row:first-child > .column:first-child,
+ .ui.stackable.divided.grid > .column:not(.row):first-child,
+ .ui.stackable.celled.grid > .column:not(.row):first-child {
+ border-top: none !important;
+ }
+ .ui.inverted.stackable.celled.grid > .column:not(.row),
+ .ui.inverted.stackable.divided.grid > .column:not(.row),
+ .ui.inverted.stackable.celled.grid > .row > .column,
+ .ui.inverted.stackable.divided.grid > .row > .column {
+ border-top: @stackableInvertedMobileBorder;
+ }
+
+ .ui.stackable.celled.grid > .column:not(.row),
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
+ .ui.stackable.celled.grid > .row > .column,
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
+ border-top: @stackableMobileBorder;
+ box-shadow: none !important;
+ padding-top: @stackableRowSpacing !important;
+ padding-bottom: @stackableRowSpacing !important;
+ }
+
+ .ui.stackable.celled.grid > .row {
+ box-shadow: none !important;
+ }
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
+ padding-left: 0em !important;
+ padding-right: 0em !important;
+ }
+
+}
+
+/*----------------------
+ Only (Device)
+-----------------------*/
+
+
+/* These include arbitrary class repetitions for forced specificity */
+
+/* Mobile Only Hide */
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
+ display: none !important;
+ }
+ .ui[class*="computer only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
+ display: none !important;
+ }
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+ display: none !important;
+ }
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+ display: none !important;
+ }
+}
+/* Tablet Only Hide */
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+ .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
+ display: none !important;
+ }
+ .ui[class*="computer only"].grid.grid.grid:not(.tablet),
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
+ display: none !important;
+ }
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+ display: none !important;
+ }
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+ display: none !important;
+ }
+}
+
+/* Computer Only Hide */
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+ display: none !important;
+ }
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+ display: none !important;
+ }
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
+ display: none !important;
+ }
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+ display: none !important;
+ }
+}
+
+/* Large Screen Only Hide */
+@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+ display: none !important;
+ }
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+ display: none !important;
+ }
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
+ display: none !important;
+ }
+}
+
+/* Widescreen Only Hide */
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
+ display: none !important;
+ }
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
+ display: none !important;
+ }
+}
+
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/menu.less b/semantic/src/definitions/collections/menu.less
new file mode 100644
index 0000000..3285b97
--- /dev/null
+++ b/semantic/src/definitions/collections/menu.less
@@ -0,0 +1,1965 @@
+/*
+ * # Semantic - Menu
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2015 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'menu';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Standard
+*******************************/
+
+/*--------------
+ Menu
+---------------*/
+
+.ui.menu {
+ display: flex;
+ margin: @margin;
+ font-family: @fontFamily;
+ background: @background;
+ font-weight: @fontWeight;
+ border: @border;
+ box-shadow: @boxShadow;
+ border-radius: @borderRadius;
+ min-height: @minHeight;
+}
+
+.ui.menu:after {
+ content: '';
+ display: block;
+ height: 0px;
+ clear: both;
+ visibility: hidden;
+}
+
+.ui.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.menu:last-child {
+ margin-bottom: 0rem;
+}
+
+
+/*--------------
+ Sub-Menu
+---------------*/
+
+.ui.menu .menu {
+ margin: 0em;
+}
+
+.ui.menu:not(.vertical) > .menu {
+ display: flex;
+}
+
+/*--------------
+ Item
+---------------*/
+
+.ui.menu:not(.vertical) .item {
+ display: flex;
+ align-items: center;
+}
+
+.ui.menu .item {
+ position: relative;
+ vertical-align: middle;
+ line-height: 1;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ flex: 0 0 auto;
+ user-select: none;
+
+ background: @itemBackground;
+ padding: @itemVerticalPadding @itemHorizontalPadding;
+ text-transform: @itemTextTransform;
+ color: @itemTextColor;
+ font-weight: @itemFontWeight;
+ transition: @itemTransition;
+}
+
+.ui.menu > .item:first-child {
+ border-radius: @borderRadius 0px 0px @borderRadius;
+}
+
+/* Border */
+.ui.menu .item:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ right: 0px;
+ height: 100%;
+
+ width: @dividerSize;
+ background: @dividerBackground;
+}
+
+/*--------------
+ Text Content
+---------------*/
+
+.ui.menu .text.item > *,
+.ui.menu .item > a:not(.ui),
+.ui.menu .item > p:only-child {
+ user-select: text;
+ line-height: @textLineHeight;
+}
+.ui.menu .item > p:first-child {
+ margin-top: 0;
+}
+.ui.menu .item > p:last-child {
+ margin-bottom: 0;
+}
+
+/*--------------
+ Icons
+---------------*/
+
+.ui.menu .item > i.icon {
+ opacity: @iconOpacity;
+ float: @iconFloat;
+ margin: @iconMargin;
+}
+
+/*--------------
+ Button
+---------------*/
+
+.ui.menu:not(.vertical) .item > .button {
+ position: relative;
+ top: @buttonOffset;
+ margin: @buttonMargin;
+ padding-bottom: @buttonVerticalPadding;
+ padding-top: @buttonVerticalPadding;
+ font-size: @buttonSize;
+}
+
+/*----------------
+ Grid / Container
+-----------------*/
+
+.ui.menu > .grid,
+.ui.menu > .container {
+ display: flex;
+ align-items: inherit;
+ flex-direction: inherit;
+}
+
+/*--------------
+ Inputs
+---------------*/
+
+.ui.menu .item > .input {
+ width: 100%;
+}
+.ui.menu:not(.vertical) .item > .input {
+ position: relative;
+ top: @inputOffset;
+ margin: @inputVerticalMargin 0em;
+}
+.ui.menu .item > .input input {
+ font-size: @inputSize;
+ padding-top: @inputVerticalPadding;
+ padding-bottom: @inputVerticalPadding;
+}
+
+
+/*--------------
+ Header
+---------------*/
+
+.ui.menu .header.item,
+.ui.vertical.menu .header.item {
+ margin: 0em;
+ background: @headerBackground;
+ text-transform: @headerTextTransform;
+ font-weight: @headerWeight;
+}
+
+.ui.vertical.menu .item > .header:not(.ui) {
+ margin: @verticalHeaderMargin;
+ font-size: @verticalHeaderFontSize;
+ font-weight: @verticalHeaderFontWeight;
+}
+
+/*--------------
+ Dropdowns
+---------------*/
+
+
+/* Dropdown Icon */
+.ui.menu .item > i.dropdown.icon {
+ padding: 0em;
+ float: @dropdownIconFloat;
+ margin: 0em 0em 0em @dropdownIconDistance;
+}
+
+/* Menu */
+.ui.menu .dropdown.item .menu {
+ left: 0px;
+ min-width: ~"calc(100% - 1px)";
+ border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+ background: @dropdownBackground;
+ margin: @dropdownMenuDistance 0px 0px;
+ box-shadow: @dropdownMenuBoxShadow;
+ flex-direction: column !important;
+}
+
+
+/* Menu Items */
+.ui.menu .ui.dropdown .menu > .item {
+ margin: 0;
+ text-align: left;
+ font-size: @dropdownItemFontSize !important;
+ padding: @dropdownItemPadding !important;
+ background: @dropdownItemBackground !important;
+ color: @dropdownItemColor !important;
+ text-transform: @dropdownItemTextTransform !important;
+ font-weight: @dropdownItemFontWeight !important;
+ box-shadow: @dropdownItemBoxShadow !important;
+ transition: @dropdownItemTransition !important;
+}
+.ui.menu .ui.dropdown .menu > .item:hover {
+ background: @dropdownHoveredItemBackground !important;
+ color: @dropdownHoveredItemColor !important;
+}
+.ui.menu .ui.dropdown .menu > .selected.item {
+ background: @dropdownSelectedItemBackground !important;
+ color: @dropdownSelectedItemColor !important;
+}
+.ui.menu .ui.dropdown .menu > .active.item {
+ background: @dropdownActiveItemBackground !important;
+ font-weight: @dropdownActiveItemFontWeight !important;
+ color: @dropdownActiveItemColor !important;
+}
+
+.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
+ display: block;
+}
+.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
+ display: inline-block;
+ font-size: @dropdownItemIconFontSize !important;
+ float: @dropdownItemIconFloat;
+ margin: @dropdownItemIconMargin;
+}
+
+
+/* Secondary */
+.ui.secondary.menu .dropdown.item > .menu,
+.ui.text.menu .dropdown.item > .menu {
+ border-radius: @dropdownMenuBorderRadius;
+ margin-top: @secondaryDropdownMenuDistance;
+}
+
+/* Pointing */
+.ui.menu .pointing.dropdown.item .menu {
+ margin-top: @pointingDropdownMenuDistance;
+}
+
+/* Inverted */
+.ui.inverted.menu .search.dropdown.item > .search,
+.ui.inverted.menu .search.dropdown.item > .text {
+ color: @invertedSelectionDropdownColor;
+}
+
+/* Vertical */
+.ui.vertical.menu .dropdown.item > .icon {
+ float: right;
+ content: "\f0da";
+ margin-left: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu {
+ left: 100%;
+ min-width: 0;
+ margin: 0em 0em 0em @dropdownMenuDistance;
+ box-shadow: @dropdownVerticalMenuBoxShadow;
+ border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+}
+.ui.vertical.menu .dropdown.item.upward .menu {
+ bottom: 0;
+}
+.ui.vertical.menu .dropdown.item:not(.upward) .menu {
+ top: 0;
+}
+.ui.vertical.menu .active.dropdown.item {
+ border-top-right-radius: 0em;
+ border-bottom-right-radius: 0em;
+}
+.ui.vertical.menu .dropdown.active.item {
+ box-shadow: none;
+}
+
+/* Evenly Divided */
+.ui.item.menu .dropdown .menu .item {
+ width: 100%;
+}
+
+/*--------------
+ Labels
+---------------*/
+
+.ui.menu .item > .label {
+ background: @labelBackground;
+ color: @labelTextColor;
+ margin-left: @labelTextMargin;
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+.ui.vertical.menu .item > .label {
+ background: @labelBackground;
+ color: @labelTextColor;
+ margin-top: @labelOffset;
+ margin-bottom: @labelOffset;
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+.ui.menu .item > .floating.label {
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+
+/*--------------
+ Images
+---------------*/
+
+.ui.menu .item > img:not(.ui) {
+ display: inline-block;
+ vertical-align: middle;
+ margin: @imageMargin;
+ width: @imageWidth;
+}
+.ui.vertical.menu .item > img:not(.ui):only-child {
+ display: block;
+ max-width: 100%;
+ width: @verticalImageWidth;
+}
+
+/*******************************
+ Coupling
+*******************************/
+
+/*--------------
+ Sidebar
+---------------*/
+
+/* Show vertical dividers below last */
+
+.ui.vertical.sidebar.menu > .item:first-child:before {
+ display: block !important;
+}
+.ui.vertical.sidebar.menu > .item::before {
+ top: auto;
+ bottom: 0px;
+}
+
+/*--------------
+ Container
+---------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.menu > .ui.container {
+ width: 100% !important;
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+ }
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
+ border-left: @dividerSize solid @dividerBackground;
+ }
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Hover
+---------------*/
+
+
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover {
+ cursor: pointer;
+ background: @hoverItemBackground;
+ color: @hoverItemTextColor;
+}
+
+
+/*--------------
+ Pressed
+---------------*/
+
+.ui.link.menu .item:active,
+.ui.menu .link.item:active,
+.ui.menu a.item:active {
+ background: @pressedItemBackground;
+ color: @pressedItemTextColor;
+}
+
+
+/*--------------
+ Active
+---------------*/
+
+.ui.menu .active.item {
+ background: @activeItemBackground;
+ color: @activeItemTextColor;
+ font-weight: @activeItemFontWeight;
+ box-shadow: @activeItemBoxShadow;
+}
+.ui.menu .active.item > i.icon {
+ opacity: @activeIconOpacity;
+}
+
+/*--------------
+ Active Hover
+---------------*/
+
+.ui.menu .active.item:hover,
+.ui.vertical.menu .active.item:hover {
+ background-color: @activeHoverItemBackground;
+ color: @activeHoverItemColor;
+}
+
+
+/*--------------
+ Disabled
+---------------*/
+
+.ui.menu .item.disabled,
+.ui.menu .item.disabled:hover {
+ cursor: default;
+ background-color: transparent !important;
+ color: @disabledTextColor;
+}
+
+
+/*******************************
+ Types
+*******************************/
+
+/*------------------
+Floated Menu / Item
+-------------------*/
+
+/* Left Floated */
+.ui.menu:not(.vertical) .left.item,
+.ui.menu:not(.vertical) .left.menu {
+ display: flex;
+ margin-right: auto !important;
+}
+/* Right Floated */
+.ui.menu:not(.vertical) .right.item,
+.ui.menu:not(.vertical) .right.menu {
+ display: flex;
+ margin-left: auto !important;
+}
+
+/* Swapped Borders */
+.ui.menu .right.item::before,
+.ui.menu .right.menu > .item::before {
+ right: auto;
+ left: 0;
+}
+
+
+/*--------------
+ Vertical
+---------------*/
+
+.ui.vertical.menu {
+ display: block;
+ flex-direction: column;
+ background: @verticalBackground;
+ box-shadow: @verticalBoxShadow;
+}
+
+/*--- Item ---*/
+.ui.vertical.menu .item {
+ display: block;
+ background: @verticalItemBackground;
+ border-top: none;
+ border-right: none;
+}
+.ui.vertical.menu > .item:first-child {
+ border-radius: @borderRadius @borderRadius 0px 0px;
+}
+.ui.vertical.menu > .item:last-child {
+ border-radius: 0px 0px @borderRadius @borderRadius;
+}
+
+/*--- Label ---*/
+.ui.vertical.menu .item > .label {
+ float: right;
+ text-align: center;
+}
+
+/*--- Icon ---*/
+.ui.vertical.menu .item > i.icon {
+ width: @iconWidth;
+ float: @verticalIconFloat;
+ margin: @verticalIconMargin;
+}
+.ui.vertical.menu .item > .label + i.icon {
+ float: @labelAndIconFloat;
+ margin: @labelAndIconMargin;
+}
+
+
+/*--- Border ---*/
+.ui.vertical.menu .item:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ left: 0px;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+}
+
+.ui.vertical.menu .item:first-child:before {
+ display: none !important;
+}
+
+
+/*--- Sub Menu ---*/
+.ui.vertical.menu .item > .menu {
+ margin: @subMenuMargin;
+}
+.ui.vertical.menu .menu .item {
+ background: none;
+ padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
+ font-size: @subMenuFontSize;
+ color: @subMenuTextColor;
+}
+.ui.vertical.menu .item .menu a.item:hover,
+.ui.vertical.menu .item .menu .link.item:hover {
+ color: @darkTextColor;
+}
+.ui.vertical.menu .menu .item:before {
+ display: none;
+}
+
+/* Vertical Active */
+.ui.vertical.menu .active.item {
+ background: @activeItemBackground;
+ border-radius: 0em;
+ box-shadow: @verticalActiveBoxShadow;
+}
+.ui.vertical.menu > .active.item:first-child {
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.vertical.menu > .active.item:last-child {
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui.vertical.menu > .active.item:only-child {
+ border-radius: @borderRadius;
+}
+.ui.vertical.menu .active.item .menu .active.item {
+ border-left: none;
+}
+.ui.vertical.menu .item .menu .active.item {
+ background-color: @subMenuActiveBackground;
+ font-weight: @subMenuActiveFontWeight;
+ color: @subMenuActiveTextColor;
+}
+
+
+/*--------------
+ Tabular
+---------------*/
+
+.ui.tabular.menu {
+ border-radius: 0em;
+ box-shadow: none !important;
+ border: none;
+ background: @tabularBackground;
+ border-bottom: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.tabular.fluid.menu {
+ width: @tabularFluidWidth !important;
+}
+.ui.tabular.menu .item {
+ background: transparent;
+ border-bottom: none;
+
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ padding: @tabularVerticalPadding @tabularHorizontalPadding;
+ color: @tabularTextColor;
+}
+.ui.tabular.menu .item:before {
+ display: none;
+}
+
+/* Hover */
+.ui.tabular.menu .item:hover {
+ background-color: transparent;
+ color: @tabularHoveredTextColor;
+}
+
+/* Active */
+.ui.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-top-width: @tabularBorderWidth;
+ border-color: @tabularBorderColor;
+ font-weight: @tabularActiveWeight;
+ margin-bottom: -@tabularBorderWidth;
+ box-shadow: @tabularActiveBoxShadow;
+ border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;
+}
+
+/* Coupling with segment for attachment */
+.ui.tabular.menu + .attached:not(.top).segment,
+.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+ border-top: none;
+ margin-left: 0px;
+ margin-top: 0px;
+ margin-right: 0px;
+ width: 100%;
+}
+.top.attached.segment + .ui.bottom.tabular.menu {
+ position: relative;
+ width: @tabularFluidWidth;
+ left: -@tabularFluidOffset;
+}
+
+/* Bottom Vertical Tabular */
+.ui.bottom.tabular.menu {
+ background: @tabularBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-top: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.bottom.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: none;
+}
+.ui.bottom.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: -@tabularBorderWidth 0px 0px 0px;
+ border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
+}
+
+/* Vertical Tabular (Left) */
+.ui.vertical.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-right: none;
+}
+.ui.vertical.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0px -@tabularBorderWidth 0px 0px;
+ border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
+}
+
+/* Vertical Right Tabular */
+.ui.vertical.right.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: none;
+ border-left: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.right.tabular.menu .item {
+ background: none;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-left: none;
+}
+.ui.vertical.right.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0px 0px 0px -@tabularBorderWidth;
+ border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
+}
+
+/* Dropdown */
+.ui.tabular.menu .active.dropdown.item {
+ margin-bottom: 0px;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ border-bottom: none;
+}
+
+
+
+/*--------------
+ Pagination
+---------------*/
+
+.ui.pagination.menu {
+ margin: 0em;
+ display: inline-flex;
+ vertical-align: middle;
+}
+.ui.pagination.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.compact.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.pagination.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.pagination.menu .item {
+ min-width: @paginationMinWidth;
+ text-align: center;
+}
+.ui.pagination.menu .icon.item i.icon {
+ vertical-align: top;
+}
+
+/* Active */
+.ui.pagination.menu .active.item {
+ border-top: none;
+ padding-top: @itemVerticalPadding;
+ background-color: @paginationActiveBackground;
+ color: @paginationActiveTextColor;
+ box-shadow: none;
+}
+
+/*--------------
+ Secondary
+---------------*/
+
+.ui.secondary.menu {
+ background: @secondaryBackground;
+ margin-left: -@secondaryItemSpacing;
+ margin-right: -@secondaryItemSpacing;
+ border-radius: 0em;
+ border: none;
+ box-shadow: none;
+}
+
+/* Item */
+.ui.secondary.menu .item {
+ align-self: center;
+ box-shadow: none;
+ border: none;
+ padding: @secondaryItemPadding;
+ margin: @secondaryItemMargin;
+ background: @secondaryItemBackground;
+ transition: @secondaryItemTransition;
+ border-radius: @secondaryItemBorderRadius;
+}
+
+/* No Divider */
+.ui.secondary.menu .item:before {
+ display: none !important;
+}
+
+/* Header */
+.ui.secondary.menu .header.item {
+ border-radius: 0em;
+ border-right: @secondaryHeaderBorder;
+ background: @secondaryHeaderBackground;
+}
+
+/* Image */
+.ui.secondary.menu .item > img:not(.ui) {
+ margin: 0em;
+}
+
+/* Hover */
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu .link.item:hover,
+.ui.secondary.menu a.item:hover {
+ background: @secondaryHoverItemBackground;
+ color: @secondaryHoverItemColor;
+}
+
+/* Active */
+.ui.secondary.menu .active.item {
+ box-shadow: none;
+ background: @secondaryActiveItemBackground;
+ color: @secondaryActiveItemColor;
+ border-radius: @secondaryItemBorderRadius;
+}
+
+/* Active Hover */
+.ui.secondary.menu .active.item:hover {
+ box-shadow: none;
+ background: @secondaryActiveHoverItemBackground;
+ color: @secondaryActiveHoverItemColor;
+}
+
+
+/* Inverted */
+.ui.secondary.inverted.menu .link.item,
+.ui.secondary.inverted.menu a.item {
+ color: @secondaryInvertedColor !important;
+}
+.ui.secondary.inverted.menu .dropdown.item:hover,
+.ui.secondary.inverted.menu .link.item:hover,
+.ui.secondary.inverted.menu a.item:hover {
+ background: @secondaryInvertedHoverBackground;
+ color: @secondaryInvertedHoverColor !important;
+}
+.ui.secondary.inverted.menu .active.item {
+ background: @secondaryInvertedActiveBackground;
+ color: @secondaryInvertedActiveColor !important;
+}
+
+/* Fix item margins */
+.ui.secondary.item.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+}
+.ui.secondary.item.menu .item:last-child {
+ margin-right: 0em;
+}
+.ui.secondary.attached.menu {
+ box-shadow: none;
+}
+
+/* Sub Menu */
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+ margin: @secondaryMenuSubMenuMargin;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+ margin: @secondaryMenuSubMenuItemMargin;
+ padding: @secondaryMenuSubMenuItemPadding;
+}
+
+
+/*---------------------
+ Secondary Vertical
+-----------------------*/
+
+.ui.secondary.vertical.menu > .item {
+ border: none;
+ margin: @secondaryVerticalItemMargin;
+ border-radius: @secondaryVerticalItemBorderRadius !important;
+}
+.ui.secondary.vertical.menu > .header.item {
+ border-radius: 0em;
+}
+
+/* Sub Menu */
+.ui.vertical.secondary.menu .item > .menu .item {
+ background-color: transparent;
+}
+
+/* Inverted */
+.ui.secondary.inverted.menu {
+ background-color: transparent;
+}
+
+/*---------------------
+ Secondary Pointing
+-----------------------*/
+
+.ui.secondary.pointing.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+ border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
+}
+
+.ui.secondary.pointing.menu .item {
+ border-bottom-color: transparent;
+ border-bottom-style: solid;
+ border-radius: 0em;
+ align-self: flex-end;
+
+ margin: 0em 0em -@secondaryPointingBorderWidth;
+ padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+ border-bottom-width: @secondaryPointingBorderWidth;
+ transition: @secondaryItemTransition;
+}
+
+/* Item Types */
+.ui.secondary.pointing.menu .header.item {
+ color: @secondaryPointingHeaderColor !important;
+}
+.ui.secondary.pointing.menu .text.item {
+ box-shadow: none !important;
+}
+.ui.secondary.pointing.menu .item:after {
+ display: none;
+}
+
+/* Hover */
+.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu .link.item:hover,
+.ui.secondary.pointing.menu a.item:hover {
+ background-color: transparent;
+ color: @secondaryPointingHoverTextColor;
+}
+
+/* Pressed */
+.ui.secondary.pointing.menu .dropdown.item:active,
+.ui.secondary.pointing.menu .link.item:active,
+.ui.secondary.pointing.menu a.item:active {
+ background-color: transparent;
+ border-color: @secondaryPointingBorderColor;
+}
+
+/* Active */
+.ui.secondary.pointing.menu .active.item {
+ background-color: transparent;
+ box-shadow: none;
+ border-color: @secondaryPointingActiveBorderColor;
+ font-weight: @secondaryPointingActiveFontWeight;
+ color: @secondaryPointingActiveTextColor;
+}
+
+/* Active Hover */
+.ui.secondary.pointing.menu .active.item:hover {
+ border-color: @secondaryPointingActiveHoverBorderColor;
+ color: @secondaryPointingActiveHoverTextColor;
+}
+
+/* Active Dropdown */
+.ui.secondary.pointing.menu .active.dropdown.item {
+ border-color: @secondaryPointingActiveDropdownBorderColor;
+}
+
+/* Vertical Pointing */
+.ui.secondary.vertical.pointing.menu {
+ border-bottom-width: 0px;
+ border-right-width: @secondaryPointingBorderWidth;
+ border-right-style: solid;
+ border-right-color: @secondaryPointingBorderColor;
+}
+.ui.secondary.vertical.pointing.menu .item {
+ border-bottom: none;
+ border-right-style: solid;
+ border-right-color: transparent;
+ border-radius: 0em !important;
+ margin: @secondaryVerticalPointingItemMargin;
+ border-right-width: @secondaryPointingBorderWidth;
+}
+
+/* Vertical Active */
+.ui.secondary.vertical.pointing.menu .active.item {
+ border-color: @secondaryPointingActiveBorderColor;
+}
+
+/* Inverted */
+.ui.secondary.inverted.pointing.menu {
+ border-color: @secondaryPointingInvertedBorderColor;
+}
+
+.ui.secondary.inverted.pointing.menu {
+ border-width: @secondaryPointingBorderWidth;
+ border-color: @secondaryPointingBorderColor;
+}
+.ui.secondary.inverted.pointing.menu .item {
+ color: @secondaryPointingInvertedItemTextColor;
+}
+.ui.secondary.inverted.pointing.menu .header.item {
+ color: @secondaryPointingInvertedItemHeaderColor !important;
+}
+
+/* Hover */
+.ui.secondary.inverted.pointing.menu .link.item:hover,
+.ui.secondary.inverted.pointing.menu a.item:hover {
+ color: @secondaryPointingInvertedItemHoverTextColor;
+}
+
+
+/* Active */
+.ui.secondary.inverted.pointing.menu .active.item {
+ border-color: @secondaryPointingInvertedActiveBorderColor;
+ color: @secondaryPointingInvertedActiveColor;
+}
+
+/*--------------
+ Text Menu
+---------------*/
+
+.ui.text.menu {
+ background: none transparent;
+ border-radius: 0px;
+ box-shadow: none;
+ border: none;
+
+ margin: @textMenuMargin;
+}
+.ui.text.menu .item {
+ border-radius: 0px;
+ box-shadow: none;
+ align-self: center;
+ margin: @textMenuItemMargin;
+ padding: @textMenuItemPadding;
+ font-weight: @textMenuItemFontWeight;
+ color: @textMenuItemColor;
+ transition: @textMenuItemTransition;
+}
+
+/* Border */
+.ui.text.menu .item:before,
+.ui.text.menu .menu .item:before {
+ display: none !important;
+}
+
+/* Header */
+.ui.text.menu .header.item {
+ background-color: transparent;
+ opacity: 1;
+ color: @textMenuHeaderColor;
+ font-size: @textMenuHeaderSize;
+ text-transform: @textMenuHeaderTextTransform;
+ font-weight: @textMenuHeaderFontWeight;
+}
+
+/* Image */
+.ui.text.menu .item > img:not(.ui) {
+ margin: 0em;
+}
+
+/*--- fluid text ---*/
+.ui.text.item.menu .item {
+ margin: 0em;
+}
+
+/*--- vertical text ---*/
+.ui.vertical.text.menu {
+ margin: @textVerticalMenuMargin;
+}
+.ui.vertical.text.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+ margin-bottom: 0rem;
+}
+.ui.vertical.text.menu .item {
+ margin: @textVerticalMenuItemMargin;
+ padding-left: 0em;
+ padding-right: 0em;
+}
+.ui.vertical.text.menu .item > i.icon {
+ float: @textVerticalMenuIconFloat;
+ margin: @iconMargin;
+}
+.ui.vertical.text.menu .header.item {
+ margin: @textVerticalMenuHeaderMargin;
+}
+
+/* Vertical Sub Menu */
+.ui.vertical.text.menu .item:not(.dropdown) > .menu {
+ margin: @textMenuSubMenuMargin;
+}
+.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
+ margin: @textMenuSubMenuItemMargin;
+ padding: @textMenuSubMenuItemPadding;
+}
+
+/*--- hover ---*/
+.ui.text.menu .item:hover {
+ opacity: 1;
+ background-color: transparent;
+}
+
+/*--- active ---*/
+.ui.text.menu .active.item {
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+ font-weight: @textMenuActiveItemFontWeight;
+ color: @textMenuActiveItemColor;
+}
+
+/*--- active hover ---*/
+.ui.text.menu .active.item:hover {
+ background-color: transparent;
+}
+
+/* Disable Bariations */
+.ui.text.pointing.menu .active.item:after {
+ box-shadow: none;
+}
+.ui.text.attached.menu {
+ box-shadow: none;
+}
+
+/* Inverted */
+.ui.inverted.text.menu,
+.ui.inverted.text.menu .item,
+.ui.inverted.text.menu .item:hover,
+.ui.inverted.text.menu .active.item {
+ background-color: transparent !important;
+}
+
+/* Fluid */
+.ui.fluid.text.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+}
+
+/*--------------
+ Icon Only
+---------------*/
+
+/* Vertical Menu */
+.ui.vertical.icon.menu {
+ display: inline-block;
+ width: auto;
+}
+
+/* Item */
+.ui.icon.menu .item {
+ height: auto;
+ text-align: @iconMenuTextAlign;
+ color: @iconMenuItemColor;
+}
+
+/* Icon */
+.ui.icon.menu .item > .icon:not(.dropdown) {
+ margin: 0;
+ opacity: 1;
+}
+
+/* Icon Gylph */
+.ui.icon.menu .icon:before {
+ opacity: 1;
+}
+
+/* (x) Item Icon */
+.ui.menu .icon.item > .icon {
+ width: auto;
+ margin: 0em auto;
+}
+
+/* Vertical Icon */
+.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
+ display: block;
+ opacity: 1;
+ margin: 0em auto;
+ float: none;
+}
+
+/* Inverted */
+.ui.inverted.icon.menu .item {
+ color: @iconMenuInvertedItemColor;
+}
+
+/*--------------
+ Labeled Icon
+---------------*/
+
+/* Menu */
+.ui.labeled.icon.menu {
+ text-align: center;
+}
+
+/* Item */
+.ui.labeled.icon.menu .item {
+ min-width: @labeledIconMinWidth;
+ flex-direction: column;
+}
+
+/* Icon */
+.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
+ height: 1em;
+ display: block;
+ font-size: @labeledIconSize !important;
+ margin: 0em auto @labeledIconTextMargin !important;
+}
+
+/* Fluid */
+.ui.fluid.labeled.icon.menu > .item {
+ min-width: 0em;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Stackable
+---------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.stackable.menu {
+ flex-direction: column;
+ }
+ .ui.stackable.menu .item {
+ width: 100% !important;
+ }
+ .ui.stackable.menu .item:before {
+ position: absolute;
+ content: '';
+ top: auto;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+ }
+
+ .ui.stackable.menu .left.menu,
+ .ui.stackable.menu .left.item {
+ margin-right: 0 !important;
+ }
+ .ui.stackable.menu .right.menu,
+ .ui.stackable.menu .right.item {
+ margin-left: 0 !important;
+ }
+}
+
+/*--------------
+ Colors
+---------------*/
+
+/*--- Standard Colors ---*/
+.ui.menu .red.active.item,
+.ui.red.menu .active.item {
+ border-color: @red !important;
+ color: @red !important;
+}
+.ui.menu .orange.active.item,
+.ui.orange.menu .active.item {
+ border-color: @orange !important;
+ color: @orange !important;
+}
+.ui.menu .yellow.active.item,
+.ui.yellow.menu .active.item {
+ border-color: @yellow !important;
+ color: @yellow !important;
+}
+.ui.menu .olive.active.item,
+.ui.olive.menu .active.item {
+ border-color: @olive !important;
+ color: @olive !important;
+}
+.ui.menu .green.active.item,
+.ui.green.menu .active.item {
+ border-color: @green !important;
+ color: @green !important;
+}
+.ui.menu .teal.active.item,
+.ui.teal.menu .active.item {
+ border-color: @teal !important;
+ color: @teal !important;
+}
+.ui.menu .blue.active.item,
+.ui.blue.menu .active.item {
+ border-color: @blue !important;
+ color: @blue !important;
+}
+.ui.menu .violet.active.item,
+.ui.violet.menu .active.item {
+ border-color: @violet !important;
+ color: @violet !important;
+}
+.ui.menu .purple.active.item,
+.ui.purple.menu .active.item {
+ border-color: @purple !important;
+ color: @purple !important;
+}
+.ui.menu .pink.active.item,
+.ui.pink.menu .active.item {
+ border-color: @pink !important;
+ color: @pink !important;
+}
+.ui.menu .brown.active.item,
+.ui.brown.menu .active.item {
+ border-color: @brown !important;
+ color: @brown !important;
+}
+.ui.menu .grey.active.item,
+.ui.grey.menu .active.item {
+ border-color: @grey !important;
+ color: @grey !important;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+.ui.inverted.menu {
+ border: @invertedBorder;
+ background: @invertedBackground;
+ box-shadow: @invertedBoxShadow;
+}
+
+/* Menu Item */
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a:not(.ui) {
+ background: @invertedItemBackground;
+ color: @invertedItemTextColor;
+}
+.ui.inverted.menu .item.menu {
+ background: @invertedSubMenuBackground;
+}
+
+/*--- Border ---*/
+.ui.inverted.menu .item:before {
+ background: @invertedDividerBackground;
+}
+.ui.vertical.inverted.menu .item:before {
+ background: @invertedVerticalDividerBackground;
+}
+
+/* Sub Menu */
+.ui.vertical.inverted.menu .menu .item,
+.ui.vertical.inverted.menu .menu .item a:not(.ui) {
+ color: @invertedSubMenuColor;
+}
+
+/* Header */
+.ui.inverted.menu .header.item {
+ margin: 0em;
+ background: @invertedHeaderBackground;
+ box-shadow: none;
+}
+
+/* Disabled */
+.ui.inverted.menu .item.disabled,
+.ui.inverted.menu .item.disabled:hover {
+ color: @invertedDisabledTextColor;
+}
+
+/*--- Hover ---*/
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .dropdown.item:hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover {
+ background: @invertedHoverBackground;
+ color: @invertedHoverColor;
+}
+.ui.vertical.inverted.menu .item .menu a.item:hover,
+.ui.vertical.inverted.menu .item .menu .link.item:hover {
+ background: @invertedSubMenuBackground;
+ color: @invertedSubMenuHoverColor;
+}
+
+/*--- Pressed ---*/
+.ui.inverted.menu a.item:active,
+.ui.inverted.menu .link.item:active{
+ background: @invertedMenuPressedBackground;
+ color: @invertedMenuPressedColor;
+}
+
+/*--- Active ---*/
+.ui.inverted.menu .active.item {
+ background: @invertedActiveBackground;
+ color: @invertedActiveColor !important;
+}
+.ui.inverted.vertical.menu .item .menu .active.item {
+ background: @invertedSubMenuActiveBackground;
+ color: @invertedSubMenuActiveColor;
+}
+.ui.inverted.pointing.menu .active.item:after {
+ background: @invertedArrowActiveColor !important;
+ margin: 0em !important;
+ box-shadow: none !important;
+ border: none !important;
+}
+
+/*--- Active Hover ---*/
+.ui.inverted.menu .active.item:hover {
+ background: @invertedActiveHoverBackground;
+ color: @invertedActiveHoverColor !important;
+}
+.ui.inverted.pointing.menu .active.item:hover:after {
+ background: @invertedArrowActiveHoverColor !important;
+}
+
+
+/*--------------
+ Floated
+---------------*/
+
+.ui.floated.menu {
+ float: left;
+ margin: 0rem @floatedDistance 0rem 0rem;
+}
+.ui.floated.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.right.floated.menu {
+ float: right;
+ margin: 0rem 0rem 0rem @floatedDistance;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+/* Red */
+.ui.inverted.menu .red.active.item,
+.ui.inverted.red.menu {
+ background-color: @red;
+}
+.ui.inverted.red.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.red.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Orange */
+.ui.inverted.menu .orange.active.item,
+.ui.inverted.orange.menu {
+ background-color: @orange;
+}
+.ui.inverted.orange.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.orange.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Yellow */
+.ui.inverted.menu .yellow.active.item,
+.ui.inverted.yellow.menu {
+ background-color: @yellow;
+}
+.ui.inverted.yellow.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.yellow.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Olive */
+.ui.inverted.menu .olive.active.item,
+.ui.inverted.olive.menu {
+ background-color: @olive;
+}
+.ui.inverted.olive.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.olive.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Green */
+.ui.inverted.menu .green.active.item,
+.ui.inverted.green.menu {
+ background-color: @green;
+}
+.ui.inverted.green.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.green.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Teal */
+.ui.inverted.menu .teal.active.item,
+.ui.inverted.teal.menu {
+ background-color: @teal;
+}
+.ui.inverted.teal.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.teal.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Blue */
+.ui.inverted.menu .blue.active.item,
+.ui.inverted.blue.menu {
+ background-color: @blue;
+}
+.ui.inverted.blue.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.blue.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Violet */
+.ui.inverted.menu .violet.active.item,
+.ui.inverted.violet.menu {
+ background-color: @violet;
+}
+.ui.inverted.violet.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.violet.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Purple */
+.ui.inverted.menu .purple.active.item,
+.ui.inverted.purple.menu {
+ background-color: @purple;
+}
+.ui.inverted.purple.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.purple.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Pink */
+.ui.inverted.menu .pink.active.item,
+.ui.inverted.pink.menu {
+ background-color: @pink;
+}
+.ui.inverted.pink.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.pink.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Brown */
+.ui.inverted.menu .brown.active.item,
+.ui.inverted.brown.menu {
+ background-color: @brown;
+}
+.ui.inverted.brown.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.brown.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Grey */
+.ui.inverted.menu .grey.active.item,
+.ui.inverted.grey.menu {
+ background-color: @grey;
+}
+.ui.inverted.grey.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.grey.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+
+/*--------------
+ Fitted
+---------------*/
+
+.ui.fitted.menu .item,
+.ui.fitted.menu .item .menu .item,
+.ui.menu .fitted.item {
+ padding: 0em;
+}
+.ui.horizontally.fitted.menu .item,
+.ui.horizontally.fitted.menu .item .menu .item,
+.ui.menu .horizontally.fitted.item {
+ padding-top: @itemVerticalPadding;
+ padding-bottom: @itemVerticalPadding;
+}
+.ui.vertically.fitted.menu .item,
+.ui.vertically.fitted.menu .item .menu .item,
+.ui.menu .vertically.fitted.item {
+ padding-left: @itemHorizontalPadding;
+ padding-right: @itemHorizontalPadding;
+}
+
+/*--------------
+ Borderless
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item .menu .item:before,
+.ui.menu .borderless.item:before {
+ background: none !important;
+}
+
+/*-------------------
+ Compact
+--------------------*/
+
+.ui.compact.menu {
+ display: inline-flex;
+ margin: 0em;
+ vertical-align: middle;
+}
+.ui.compact.vertical.menu {
+ display: inline-block;
+}
+.ui.compact.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.compact.menu .item:last-child:before {
+ display: none;
+}
+.ui.compact.vertical.menu {
+ width: auto !important;
+}
+.ui.compact.vertical.menu .item:last-child::before {
+ display: block;
+}
+
+/*-------------------
+ Fluid
+--------------------*/
+
+.ui.menu.fluid,
+.ui.vertical.menu.fluid {
+ width: 100% !important;
+}
+
+
+/*-------------------
+ Evenly Sized
+--------------------*/
+
+.ui.item.menu,
+.ui.item.menu .item {
+ width: 100%;
+ padding-left: 0em !important;
+ padding-right: 0em !important;
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+ text-align: center;
+ justify-content: center;
+}
+
+.ui.item.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.menu.two.item .item {
+ width: 50%;
+}
+.ui.menu.three.item .item {
+ width: 33.333%;
+}
+.ui.menu.four.item .item {
+ width: 25%;
+}
+.ui.menu.five.item .item {
+ width: 20%;
+}
+.ui.menu.six.item .item {
+ width: 16.666%;
+}
+.ui.menu.seven.item .item {
+ width: 14.285%;
+}
+.ui.menu.eight.item .item {
+ width: 12.500%;
+}
+.ui.menu.nine.item .item {
+ width: 11.11%;
+}
+.ui.menu.ten.item .item {
+ width: 10.0%;
+}
+.ui.menu.eleven.item .item {
+ width: 9.09%;
+}
+.ui.menu.twelve.item .item {
+ width: 8.333%;
+}
+
+/*--------------
+ Fixed
+---------------*/
+
+.ui.menu.fixed {
+ position: fixed;
+ z-index: 101;
+ margin: 0em;
+ width: 100%;
+}
+.ui.menu.fixed,
+.ui.menu.fixed .item:first-child,
+.ui.menu.fixed .item:last-child {
+ border-radius: 0px !important;
+}
+
+.ui.fixed.menu,
+.ui[class*="top fixed"].menu {
+ top: 0px;
+ left: 0px;
+ right: auto;
+ bottom: auto;
+}
+.ui[class*="top fixed"].menu {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+}
+.ui[class*="right fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-right: none;
+ top: 0px;
+ right: 0px;
+ left: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+}
+.ui[class*="bottom fixed"].menu {
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
+ bottom: 0px;
+ left: 0px;
+ top: auto;
+ right: auto;
+}
+.ui[class*="left fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-left: none;
+ top: 0px;
+ left: 0px;
+ right: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+}
+
+/* Coupling with Grid */
+.ui.fixed.menu + .ui.grid {
+ padding-top: @fixedPrecedingGridMargin;
+}
+
+
+/*-------------------
+ Pointing
+--------------------*/
+
+.ui.pointing.menu .item:after {
+ visibility: hidden;
+ position: absolute;
+ content: '';
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ background: none;
+
+ margin: (@arrowBorderWidth / 2) 0em 0em;
+ width: @arrowSize;
+ height: @arrowSize;
+
+ border: none;
+ border-bottom: @arrowBorder;
+ border-right: @arrowBorder;
+
+ z-index: @arrowZIndex;
+ transition: @arrowTransition;
+}
+.ui.vertical.pointing.menu .item:after {
+ position: absolute;
+ top: 50%;
+ right: 0%;
+ bottom: auto;
+ left: auto;
+
+ transform: translateX(50%) translateY(-50%) rotate(45deg);
+ margin: 0em -(@arrowBorderWidth / 2) 0em 0em;
+
+ border: none;
+ border-top: @arrowBorder;
+ border-right: @arrowBorder;
+}
+
+/* Active */
+.ui.pointing.menu .active.item:after {
+ visibility: visible;
+}
+.ui.pointing.menu .active.dropdown.item:after {
+ visibility: hidden;
+}
+
+/* Don't double up pointers */
+.ui.pointing.menu .dropdown.active.item:after,
+.ui.pointing.menu .active.item .menu .active.item:after {
+ display: none;
+}
+
+/* Colors */
+.ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowHoverColor;
+}
+.ui.pointing.menu .active.item:after {
+ background-color: @arrowActiveColor;
+}
+.ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowActiveHoverColor;
+}
+
+.ui.vertical.pointing.menu .active.item:hover:after {
+ background-color: @arrowVerticalHoverColor;
+}
+.ui.vertical.pointing.menu .active.item:after {
+ background-color: @arrowVerticalActiveColor;
+}
+.ui.vertical.pointing.menu .menu .active.item:after {
+ background-color: @arrowVerticalSubMenuColor;
+}
+
+
+
+/*--------------
+ Attached
+---------------*/
+
+/* Middle */
+.ui.attached.menu {
+ top: 0px;
+ bottom: 0px;
+ border-radius: 0px;
+ margin: 0em @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+}
+.ui.attached + .ui.attached.menu:not(.top) {
+ border-top: none;
+}
+
+/* Top */
+.ui[class*="top attached"].menu {
+ bottom: 0px;
+ margin-bottom: 0em;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.menu[class*="top attached"]:first-child {
+ margin-top: 0em;
+}
+
+/* Bottom */
+.ui[class*="bottom attached"].menu {
+ bottom: 0px;
+ margin-top: 0em;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui[class*="bottom attached"].menu:last-child {
+ margin-bottom: 0em;
+}
+
+/* Attached Menu Item */
+.ui.top.attached.menu > .item:first-child {
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui.bottom.attached.menu > .item:first-child {
+ border-radius: 0em 0em 0em @borderRadius;
+}
+
+/* Tabular Attached */
+.ui.attached.menu:not(.tabular) {
+ border: @attachedBorder;
+}
+.ui.attached.inverted.menu {
+ border: none;
+}
+.ui.attached.tabular.menu {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+/* Mini */
+.ui.mini.menu {
+ font-size: @mini;
+}
+.ui.mini.vertical.menu {
+ width: @miniWidth;
+}
+
+/* Tiny */
+.ui.tiny.menu {
+ font-size: @tiny;
+}
+.ui.tiny.vertical.menu {
+ width: @tinyWidth;
+}
+
+/* Small */
+.ui.small.menu {
+ font-size: @small;
+}
+.ui.small.vertical.menu {
+ width: @smallWidth;
+}
+
+/* Medium */
+.ui.menu {
+ font-size: @medium;
+}
+.ui.vertical.menu {
+ width: @mediumWidth;
+}
+
+/* Large */
+.ui.large.menu {
+ font-size: @large;
+}
+.ui.large.vertical.menu {
+ width: @largeWidth;
+}
+
+/* Huge */
+.ui.huge.menu {
+ font-size: @huge;
+}
+.ui.huge.vertical.menu {
+ width: @hugeWidth;
+}
+
+/* Big */
+.ui.big.menu {
+ font-size: @big;
+}
+.ui.big.vertical.menu {
+ width: @bigWidth;
+}
+
+/* Massive */
+.ui.massive.menu {
+ font-size: @massive;
+}
+.ui.massive.vertical.menu {
+ width: @massiveWidth;
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/message.less b/semantic/src/definitions/collections/message.less
new file mode 100644
index 0000000..7b75feb
--- /dev/null
+++ b/semantic/src/definitions/collections/message.less
@@ -0,0 +1,478 @@
+/*!
+ * # Semantic UI - Message
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'message';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Message
+*******************************/
+
+.ui.message {
+ position: relative;
+ min-height: 1em;
+ margin: @verticalMargin 0em;
+ background: @background;
+ padding: @padding;
+ line-height: @lineHeight;
+ color: @textColor;
+ transition: @transition;
+ border-radius: @borderRadius;
+ box-shadow: @boxShadow;
+}
+
+.ui.message:first-child {
+ margin-top: 0em;
+}
+.ui.message:last-child {
+ margin-bottom: 0em;
+}
+
+
+/*--------------
+ Content
+---------------*/
+
+/* Header */
+.ui.message .header {
+ display: @headerDisplay;
+ font-family: @headerFont;
+ font-weight: @headerFontWeight;
+ margin: @headerMargin;
+}
+
+/* Default font size */
+.ui.message .header:not(.ui) {
+ font-size: @headerFontSize;
+}
+
+/* Paragraph */
+.ui.message p {
+ opacity: @messageTextOpacity;
+ margin: @messageParagraphMargin 0em;
+}
+.ui.message p:first-child {
+ margin-top: 0em;
+}
+.ui.message p:last-child {
+ margin-bottom: 0em;
+}
+.ui.message .header + p {
+ margin-top: @headerParagraphDistance;
+}
+
+/* List */
+.ui.message .list:not(.ui) {
+ text-align: left;
+ padding: 0em;
+ opacity: @listOpacity;
+ list-style-position: @listStylePosition;
+ margin: @listMargin 0em 0em;
+}
+.ui.message .list:not(.ui):first-child {
+ margin-top: 0em;
+}
+.ui.message .list:not(.ui):last-child {
+ margin-bottom: 0em;
+}
+.ui.message .list:not(.ui) li {
+ position: relative;
+ list-style-type: none;
+ margin: 0em 0em @listItemMargin @listItemIndent;
+ padding: 0em;
+}
+.ui.message .list:not(.ui) li:before {
+ position: absolute;
+ content: '•';
+ left: -1em;
+ height: 100%;
+ vertical-align: baseline;
+}
+.ui.message .list:not(.ui) li:last-child {
+ margin-bottom: 0em;
+}
+
+
+/* Icon */
+.ui.message > .icon {
+ margin-right: @iconDistance;
+}
+
+/* Close Icon */
+.ui.message > .close.icon {
+ cursor: pointer;
+ position: absolute;
+ margin: 0em;
+ top: @closeTopDistance;
+ right: @closeRightDistance;
+ opacity: @closeOpacity;
+ transition: @closeTransition;
+}
+.ui.message > .close.icon:hover {
+ opacity: 1;
+}
+
+/* First / Last Element */
+.ui.message > :first-child {
+ margin-top: 0em;
+}
+.ui.message > :last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Coupling
+*******************************/
+
+.ui.dropdown .menu > .message {
+ margin: 0px -@borderWidth;
+}
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Visible
+---------------*/
+
+.ui.visible.visible.visible.visible.message {
+ display: block;
+}
+
+.ui.icon.visible.visible.visible.visible.message {
+ display: flex;
+}
+
+/*--------------
+ Hidden
+---------------*/
+
+.ui.hidden.hidden.hidden.hidden.message {
+ display: none;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Compact
+---------------*/
+
+.ui.compact.message {
+ display: inline-block;
+}
+
+
+/*--------------
+ Attached
+---------------*/
+
+.ui.attached.message {
+ margin-bottom: @attachedYOffset;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+ box-shadow: @attachedBoxShadow;
+ margin-left: @attachedXOffset;
+ margin-right: @attachedXOffset;
+}
+.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
+ margin-top: @attachedYOffset;
+ border-radius: 0em;
+}
+.ui.bottom.attached.message {
+ margin-top: @attachedYOffset;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+ box-shadow: @attachedBottomBoxShadow;
+}
+.ui.bottom.attached.message:not(:last-child) {
+ margin-bottom: @verticalMargin;
+}
+.ui.attached.icon.message {
+ width: auto;
+}
+
+
+/*--------------
+ Icon
+---------------*/
+
+.ui.icon.message {
+ display: flex;
+ width: 100%;
+ align-items: center;
+}
+.ui.icon.message > .icon:not(.close) {
+ display: block;
+ flex: 0 0 auto;
+ width: auto;
+ line-height: 1;
+ vertical-align: @iconVerticalAlign;
+ font-size: @iconSize;
+ opacity: @iconOpacity;
+}
+.ui.icon.message > .content {
+ display: block;
+ flex: 1 1 auto;
+ vertical-align: @iconVerticalAlign;
+}
+
+
+.ui.icon.message .icon:not(.close) + .content {
+ padding-left: @iconContentDistance;
+}
+.ui.icon.message .circular.icon {
+ width: 1em;
+}
+
+/*--------------
+ Floating
+---------------*/
+
+.ui.floating.message {
+ box-shadow: @floatingBoxShadow;
+}
+
+
+/*--------------
+ Colors
+---------------*/
+
+.ui.black.message {
+ background-color: @black;
+ color: @invertedTextColor;
+}
+
+/*--------------
+ Types
+---------------*/
+
+/* Positive */
+.ui.positive.message {
+ background-color: @positiveBackgroundColor;
+ color: @positiveTextColor;
+}
+.ui.positive.message,
+.ui.attached.positive.message {
+ box-shadow: @positiveBoxShadow;
+}
+.ui.positive.message .header {
+ color: @positiveHeaderColor;
+}
+
+/* Negative */
+.ui.negative.message {
+ background-color: @negativeBackgroundColor;
+ color: @negativeTextColor;
+}
+.ui.negative.message,
+.ui.attached.negative.message {
+ box-shadow: @negativeBoxShadow;
+}
+.ui.negative.message .header {
+ color: @negativeHeaderColor;
+}
+
+/* Info */
+.ui.info.message {
+ background-color: @infoBackgroundColor;
+ color: @infoTextColor;
+}
+.ui.info.message,
+.ui.attached.info.message {
+ box-shadow: @infoBoxShadow;
+}
+.ui.info.message .header {
+ color: @infoHeaderColor;
+}
+
+/* Warning */
+.ui.warning.message {
+ background-color: @warningBackgroundColor;
+ color: @warningTextColor;
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+ box-shadow: @warningBoxShadow;
+}
+.ui.warning.message .header {
+ color: @warningHeaderColor;
+}
+
+/* Error */
+.ui.error.message {
+ background-color: @errorBackgroundColor;
+ color: @errorTextColor;
+}
+.ui.error.message,
+.ui.attached.error.message {
+ box-shadow: @errorBoxShadow;
+}
+.ui.error.message .header {
+ color: @errorHeaderColor;
+}
+
+/* Success */
+.ui.success.message {
+ background-color: @successBackgroundColor;
+ color: @successTextColor;
+}
+.ui.success.message,
+.ui.attached.success.message {
+ box-shadow: @successBoxShadow;
+}
+.ui.success.message .header {
+ color: @successHeaderColor;
+}
+
+
+/* Colors */
+.ui.inverted.message,
+.ui.black.message {
+ background-color: @black;
+ color: @invertedTextColor;
+}
+
+.ui.red.message {
+ background-color: @redBackground;
+ color: @redTextColor;
+ box-shadow: @redBoxShadow;
+}
+.ui.red.message .header {
+ color: @redHeaderColor;
+}
+
+.ui.orange.message {
+ background-color: @orangeBackground;
+ color: @orangeTextColor;
+ box-shadow: @orangeBoxShadow;
+}
+.ui.orange.message .header {
+ color: @orangeHeaderColor;
+}
+
+.ui.yellow.message {
+ background-color: @yellowBackground;
+ color: @yellowTextColor;
+ box-shadow: @yellowBoxShadow;
+}
+.ui.yellow.message .header {
+ color: @yellowHeaderColor;
+}
+
+.ui.olive.message {
+ background-color: @oliveBackground;
+ color: @oliveTextColor;
+ box-shadow: @oliveBoxShadow;
+}
+.ui.olive.message .header {
+ color: @oliveHeaderColor;
+}
+
+.ui.green.message {
+ background-color: @greenBackground;
+ color: @greenTextColor;
+ box-shadow: @greenBoxShadow;
+}
+.ui.green.message .header {
+ color: @greenHeaderColor;
+}
+
+.ui.teal.message {
+ background-color: @tealBackground;
+ color: @tealTextColor;
+ box-shadow: @tealBoxShadow;
+}
+.ui.teal.message .header {
+ color: @tealHeaderColor;
+}
+
+.ui.blue.message {
+ background-color: @blueBackground;
+ color: @blueTextColor;
+ box-shadow: @blueBoxShadow;
+}
+.ui.blue.message .header {
+ color: @blueHeaderColor;
+}
+
+.ui.violet.message {
+ background-color: @violetBackground;
+ color: @violetTextColor;
+ box-shadow: @violetBoxShadow;
+}
+.ui.violet.message .header {
+ color: @violetHeaderColor;
+}
+
+.ui.purple.message {
+ background-color: @purpleBackground;
+ color: @purpleTextColor;
+ box-shadow: @purpleBoxShadow;
+}
+.ui.purple.message .header {
+ color: @purpleHeaderColor;
+}
+
+.ui.pink.message {
+ background-color: @pinkBackground;
+ color: @pinkTextColor;
+ box-shadow: @pinkBoxShadow;
+}
+.ui.pink.message .header {
+ color: @pinkHeaderColor;
+}
+
+.ui.brown.message {
+ background-color: @brownBackground;
+ color: @brownTextColor;
+ box-shadow: @brownBoxShadow;
+}
+.ui.brown.message .header {
+ color: @brownHeaderColor;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+.ui.mini.message {
+ font-size: @relativeMini;
+}
+.ui.tiny.message {
+ font-size: @relativeTiny;
+}
+.ui.small.message {
+ font-size: @relativeSmall;
+}
+.ui.message {
+ font-size: @relativeMedium;
+}
+.ui.large.message {
+ font-size: @relativeLarge;
+}
+.ui.big.message {
+ font-size: @relativeBig;
+}
+.ui.huge.message {
+ font-size: @relativeHuge;
+}
+.ui.massive.message {
+ font-size: @relativeMassive;
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/collections/table.less b/semantic/src/definitions/collections/table.less
new file mode 100644
index 0000000..b72dbac
--- /dev/null
+++ b/semantic/src/definitions/collections/table.less
@@ -0,0 +1,1114 @@
+/*!
+ * # Semantic UI - Table
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'table';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Table
+*******************************/
+
+/* Prototype */
+.ui.table {
+ width: 100%;
+ background: @background;
+ margin: @margin;
+ border: @border;
+ box-shadow: @boxShadow;
+ border-radius: @borderRadius;
+ text-align: @textAlign;
+ color: @color;
+ border-collapse: @borderCollapse;
+ border-spacing: @borderSpacing;
+}
+
+.ui.table:first-child {
+ margin-top: 0em;
+}
+.ui.table:last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Parts
+*******************************/
+
+/* Table Content */
+.ui.table th,
+.ui.table td {
+ transition: @transition;
+}
+
+/* Headers */
+.ui.table thead {
+ box-shadow: @headerBoxShadow;
+}
+.ui.table thead th {
+ cursor: auto;
+ background: @headerBackground;
+ text-align: @headerAlign;
+ color: @headerColor;
+ padding: @headerVerticalPadding @headerHorizontalPadding;
+ vertical-align: @headerVerticalAlign;
+ font-style: @headerFontStyle;
+ font-weight: @headerFontWeight;
+ text-transform: @headerTextTransform;
+ border-bottom: @headerBorder;
+ border-left: @headerDivider;
+}
+
+.ui.table thead tr > th:first-child {
+ border-left: none;
+}
+
+.ui.table thead tr:first-child > th:first-child {
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui.table thead tr:first-child > th:last-child {
+ border-radius: 0em @borderRadius 0em 0em;
+}
+.ui.table thead tr:first-child > th:only-child {
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+
+/* Footer */
+.ui.table tfoot {
+ box-shadow: @footerBoxShadow;
+}
+.ui.table tfoot th {
+ cursor: auto;
+ border-top: @footerBorder;
+ background: @footerBackground;
+ text-align: @footerAlign;
+ color: @footerColor;
+ padding: @footerVerticalPadding @footerHorizontalPadding;
+ vertical-align: @footerVerticalAlign;
+ font-style: @footerFontStyle;
+ font-weight: @footerFontWeight;
+ text-transform: @footerTextTransform;
+}
+.ui.table tfoot tr > th:first-child {
+ border-left: none;
+}
+.ui.table tfoot tr:first-child > th:first-child {
+ border-radius: 0em 0em 0em @borderRadius;
+}
+.ui.table tfoot tr:first-child > th:last-child {
+ border-radius: 0em 0em @borderRadius 0em;
+}
+.ui.table tfoot tr:first-child > th:only-child {
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+/* Table Row */
+.ui.table tr td {
+ border-top: @rowBorder;
+}
+.ui.table tr:first-child td {
+ border-top: none;
+}
+
+/* Table Cells */
+.ui.table td {
+ padding: @cellVerticalPadding @cellHorizontalPadding;
+ text-align: @cellTextAlign;
+}
+
+/* Icons */
+.ui.table > .icon {
+ vertical-align: @iconVerticalAlign;
+}
+.ui.table > .icon:only-child {
+ margin: 0em;
+}
+
+/* Table Segment */
+.ui.table.segment {
+ padding: 0em;
+}
+.ui.table.segment:after {
+ display: none;
+}
+.ui.table.segment.stacked:after {
+ display: block;
+}
+
+
+/* Responsive */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.table:not(.unstackable) {
+ width: 100%;
+ }
+ .ui.table:not(.unstackable) tbody,
+ .ui.table:not(.unstackable) tr,
+ .ui.table:not(.unstackable) tr > th,
+ .ui.table:not(.unstackable) tr > td {
+ display: block !important;
+ width: auto !important;
+ display: block !important;
+ }
+
+ .ui.table:not(.unstackable) {
+ padding: 0em;
+ }
+ .ui.table:not(.unstackable) thead {
+ display: @responsiveHeaderDisplay;
+ }
+ .ui.table:not(.unstackable) tfoot {
+ display: @responsiveFooterDisplay;
+ }
+ .ui.table:not(.unstackable) tr {
+ padding-top: @responsiveRowVerticalPadding;
+ padding-bottom: @responsiveRowVerticalPadding;
+ box-shadow: @responsiveRowBoxShadow;
+ }
+
+ .ui.table:not(.unstackable) tr > th,
+ .ui.table:not(.unstackable) tr > td {
+ background: none;
+ border: none !important;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;
+ box-shadow: @responsiveCellBoxShadow;
+ }
+ .ui.table:not(.unstackable) th:first-child,
+ .ui.table:not(.unstackable) td:first-child {
+ font-weight: bold;
+ }
+
+ /* Definition Table */
+ .ui.definition.table:not(.unstackable) thead th:first-child {
+ box-shadow: none !important;
+ }
+}
+
+
+/*******************************
+ Coupling
+*******************************/
+
+/* UI Image */
+.ui.table th .image,
+.ui.table th .image img,
+.ui.table td .image,
+.ui.table td .image img {
+ max-width: none;
+}
+
+
+/*******************************
+ Types
+*******************************/
+
+/*--------------
+ Complex
+---------------*/
+
+.ui.structured.table {
+ border-collapse: collapse;
+}
+.ui.structured.table thead th {
+ border-left: @headerDivider;
+ border-right: @headerDivider;
+}
+.ui.structured.sortable.table thead th {
+ border-left: @sortableBorder;
+ border-right: @sortableBorder;
+}
+.ui.structured.basic.table th {
+ border-left: @basicTableHeaderDivider;
+ border-right: @basicTableHeaderDivider;
+}
+.ui.structured.celled.table tr th,
+.ui.structured.celled.table tr td {
+ border-left: @cellBorder;
+ border-right: @cellBorder;
+}
+
+/*--------------
+ Definition
+---------------*/
+
+.ui.definition.table thead:not(.full-width) th:first-child {
+ pointer-events: none;
+ background: @definitionHeaderBackground;
+ font-weight: @definitionHeaderFontWeight;
+ color: @definitionHeaderColor;
+ box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+.ui.definition.table tfoot:not(.full-width) th:first-child {
+ pointer-events: none;
+ background: @definitionFooterBackground;
+ font-weight: @definitionFooterColor;
+ color: @definitionFooterFontWeight;
+ box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+/* Remove Border */
+.ui.celled.definition.table thead:not(.full-width) th:first-child {
+ box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;
+}
+.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
+ box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+/* Highlight Defining Column */
+.ui.definition.table tr td:first-child:not(.ignored),
+.ui.definition.table tr td.definition {
+ background: @definitionColumnBackground;
+ font-weight: @definitionColumnFontWeight;
+ color: @definitionColumnColor;
+ text-transform: @definitionColumnTextTransform;
+ box-shadow: @definitionColumnBoxShadow;
+ text-align: @definitionColumnTextAlign;
+ font-size: @definitionColumnFontSize;
+ padding-left: @definitionColumnHorizontalPadding;
+ padding-right: @definitionColumnHorizontalPadding;
+}
+
+
+/* Fix 2nd Column */
+.ui.definition.table thead:not(.full-width) th:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+.ui.definition.table td:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Positive
+---------------*/
+
+.ui.table tr.positive,
+.ui.table td.positive {
+ box-shadow: @positiveBoxShadow;
+}
+.ui.table tr.positive,
+.ui.table td.positive {
+ background: @positiveBackgroundColor !important;
+ color: @positiveColor !important;
+}
+
+/*--------------
+ Negative
+---------------*/
+
+.ui.table tr.negative,
+.ui.table td.negative {
+ box-shadow: @negativeBoxShadow;
+}
+.ui.table tr.negative,
+.ui.table td.negative {
+ background: @negativeBackgroundColor !important;
+ color: @negativeColor !important;
+}
+
+/*--------------
+ Error
+---------------*/
+
+.ui.table tr.error,
+.ui.table td.error {
+ box-shadow: @errorBoxShadow;
+}
+.ui.table tr.error,
+.ui.table td.error {
+ background: @errorBackgroundColor !important;
+ color: @errorColor !important;
+}
+/*--------------
+ Warning
+---------------*/
+
+.ui.table tr.warning,
+.ui.table td.warning {
+ box-shadow: @warningBoxShadow;
+}
+.ui.table tr.warning,
+.ui.table td.warning {
+ background: @warningBackgroundColor !important;
+ color: @warningColor !important;
+}
+
+/*--------------
+ Active
+---------------*/
+
+.ui.table tr.active,
+.ui.table td.active {
+ box-shadow: @activeBoxShadow;
+}
+.ui.table tr.active,
+.ui.table td.active {
+ background: @activeBackgroundColor !important;
+ color: @activeColor !important;
+}
+
+
+
+/*--------------
+ Disabled
+---------------*/
+
+.ui.table tr.disabled td,
+.ui.table tr td.disabled,
+.ui.table tr.disabled:hover,
+.ui.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @disabledTextColor;
+}
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Stackable
+---------------*/
+
+@media only screen and (max-width : @largestTabletScreen) {
+
+ .ui[class*="tablet stackable"].table,
+ .ui[class*="tablet stackable"].table tbody,
+ .ui[class*="tablet stackable"].table tr,
+ .ui[class*="tablet stackable"].table tr > th,
+ .ui[class*="tablet stackable"].table tr > td {
+ display: block !important;
+ width: 100% !important;
+ display: block !important;
+ }
+
+ .ui[class*="tablet stackable"].table {
+ padding: 0em;
+ }
+ .ui[class*="tablet stackable"].table thead {
+ display: @responsiveHeaderDisplay;
+ }
+ .ui[class*="tablet stackable"].table tfoot {
+ display: @responsiveFooterDisplay;
+ }
+ .ui[class*="tablet stackable"].table tr {
+ padding-top: @responsiveRowVerticalPadding;
+ padding-bottom: @responsiveRowVerticalPadding;
+ box-shadow: @responsiveRowBoxShadow;
+ }
+ .ui[class*="tablet stackable"].table tr > th,
+ .ui[class*="tablet stackable"].table tr > td {
+ background: none;
+ border: none !important;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
+ box-shadow: @responsiveCellBoxShadow;
+ }
+
+ /* Definition Table */
+ .ui.definition[class*="tablet stackable"].table thead th:first-child {
+ box-shadow: none !important;
+ }
+}
+
+/*--------------
+ Text Alignment
+---------------*/
+
+.ui.table[class*="left aligned"],
+.ui.table [class*="left aligned"] {
+ text-align: left;
+}
+.ui.table[class*="center aligned"],
+.ui.table [class*="center aligned"] {
+ text-align: center;
+}
+.ui.table[class*="right aligned"],
+.ui.table [class*="right aligned"] {
+ text-align: right;
+}
+
+/*------------------
+ Vertical Alignment
+------------------*/
+
+.ui.table[class*="top aligned"],
+.ui.table [class*="top aligned"] {
+ vertical-align: top;
+}
+.ui.table[class*="middle aligned"],
+.ui.table [class*="middle aligned"] {
+ vertical-align: middle;
+}
+.ui.table[class*="bottom aligned"],
+.ui.table [class*="bottom aligned"] {
+ vertical-align: bottom;
+}
+
+/*--------------
+ Collapsing
+---------------*/
+
+.ui.table th.collapsing,
+.ui.table td.collapsing {
+ width: 1px;
+ white-space: nowrap;
+}
+
+/*--------------
+ Fixed
+---------------*/
+
+.ui.fixed.table {
+ table-layout: fixed;
+}
+
+.ui.fixed.table th,
+.ui.fixed.table td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
+/*--------------
+ Selectable
+---------------*/
+
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+ background: @selectableBackground !important;
+ color: @selectableTextColor !important;
+}
+.ui.selectable.inverted.table tbody tr:hover,
+.ui.inverted.table tbody tr td.selectable:hover {
+ background: @selectableInvertedBackground !important;
+ color: @selectableInvertedTextColor !important;
+}
+
+/* Selectable Cell Link */
+.ui.table tbody tr td.selectable {
+ padding: 0em;
+}
+.ui.table tbody tr td.selectable > a:not(.ui) {
+ display: block;
+ color: inherit;
+ padding: @cellVerticalPadding @cellHorizontalPadding;
+}
+
+/* Other States */
+.ui.selectable.table tr.error:hover,
+.ui.table tr td.selectable.error:hover,
+.ui.selectable.table tr:hover td.error {
+ background: @errorBackgroundHover !important;
+ color: @errorColorHover !important;
+}
+.ui.selectable.table tr.warning:hover,
+.ui.table tr td.selectable.warning:hover,
+.ui.selectable.table tr:hover td.warning {
+ background: @warningBackgroundHover !important;
+ color: @warningColorHover !important;
+}
+.ui.selectable.table tr.active:hover,
+.ui.table tr td.selectable.active:hover,
+.ui.selectable.table tr:hover td.active {
+ background: @activeBackgroundColor !important;
+ color: @activeColor !important;
+}
+.ui.selectable.table tr.positive:hover,
+.ui.table tr td.selectable.positive:hover,
+.ui.selectable.table tr:hover td.positive {
+ background: @positiveBackgroundHover !important;
+ color: @positiveColorHover !important;
+}
+.ui.selectable.table tr.negative:hover,
+.ui.table tr td.selectable.negative:hover,
+.ui.selectable.table tr:hover td.negative {
+ background: @negativeBackgroundHover !important;
+ color: @negativeColorHover !important;
+}
+
+
+
+/*-------------------
+ Attached
+--------------------*/
+
+/* Middle */
+.ui.attached.table {
+ top: 0px;
+ bottom: 0px;
+ border-radius: 0px;
+ margin: 0em @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+ border: @attachedBorder;
+}
+.ui.attached + .ui.attached.table:not(.top) {
+ border-top: none;
+}
+
+/* Top */
+.ui[class*="top attached"].table {
+ bottom: 0px;
+ margin-bottom: 0em;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.table[class*="top attached"]:first-child {
+ margin-top: 0em;
+}
+
+/* Bottom */
+.ui[class*="bottom attached"].table {
+ bottom: 0px;
+ margin-top: 0em;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui[class*="bottom attached"].table:last-child {
+ margin-bottom: 0em;
+}
+
+/*--------------
+ Striped
+---------------*/
+
+/* Table Striping */
+.ui.striped.table > tr:nth-child(2n),
+.ui.striped.table tbody tr:nth-child(2n) {
+ background-color: @stripedBackground;
+}
+
+/* Stripes */
+.ui.inverted.striped.table > tr:nth-child(2n),
+.ui.inverted.striped.table tbody tr:nth-child(2n) {
+ background-color: @invertedStripedBackground;
+}
+
+/* Allow striped active hover */
+.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
+ background: @activeBackgroundHover !important;
+ color: @activeColorHover !important;
+}
+
+/*--------------
+ Single Line
+---------------*/
+
+.ui.table[class*="single line"],
+.ui.table [class*="single line"] {
+ white-space: nowrap;
+}
+.ui.table[class*="single line"],
+.ui.table [class*="single line"] {
+ white-space: nowrap;
+}
+
+/*-------------------
+ Colors
+--------------------*/
+
+/* Red */
+.ui.red.table {
+ border-top: @coloredBorderSize solid @red;
+}
+.ui.inverted.red.table {
+ background-color: @red !important;
+ color: @white !important;
+}
+
+/* Orange */
+.ui.orange.table {
+ border-top: @coloredBorderSize solid @orange;
+}
+.ui.inverted.orange.table {
+ background-color: @orange !important;
+ color: @white !important;
+}
+
+/* Yellow */
+.ui.yellow.table {
+ border-top: @coloredBorderSize solid @yellow;
+}
+.ui.inverted.yellow.table {
+ background-color: @yellow !important;
+ color: @white !important;
+}
+
+/* Olive */
+.ui.olive.table {
+ border-top: @coloredBorderSize solid @olive;
+}
+.ui.inverted.olive.table {
+ background-color: @olive !important;
+ color: @white !important;
+}
+
+/* Green */
+.ui.green.table {
+ border-top: @coloredBorderSize solid @green;
+}
+.ui.inverted.green.table {
+ background-color: @green !important;
+ color: @white !important;
+}
+
+/* Teal */
+.ui.teal.table {
+ border-top: @coloredBorderSize solid @teal;
+}
+.ui.inverted.teal.table {
+ background-color: @teal !important;
+ color: @white !important;
+}
+
+/* Blue */
+.ui.blue.table {
+ border-top: @coloredBorderSize solid @blue;
+}
+.ui.inverted.blue.table {
+ background-color: @blue !important;
+ color: @white !important;
+}
+
+/* Violet */
+.ui.violet.table {
+ border-top: @coloredBorderSize solid @violet;
+}
+.ui.inverted.violet.table {
+ background-color: @violet !important;
+ color: @white !important;
+}
+
+/* Purple */
+.ui.purple.table {
+ border-top: @coloredBorderSize solid @purple;
+}
+.ui.inverted.purple.table {
+ background-color: @purple !important;
+ color: @white !important;
+}
+
+/* Pink */
+.ui.pink.table {
+ border-top: @coloredBorderSize solid @pink;
+}
+.ui.inverted.pink.table {
+ background-color: @pink !important;
+ color: @white !important;
+}
+
+/* Brown */
+.ui.brown.table {
+ border-top: @coloredBorderSize solid @brown;
+}
+.ui.inverted.brown.table {
+ background-color: @brown !important;
+ color: @white !important;
+}
+
+/* Grey */
+.ui.grey.table {
+ border-top: @coloredBorderSize solid @grey;
+}
+.ui.inverted.grey.table {
+ background-color: @grey !important;
+ color: @white !important;
+}
+
+/* Black */
+.ui.black.table {
+ border-top: @coloredBorderSize solid @black;
+}
+.ui.inverted.black.table {
+ background-color: @black !important;
+ color: @white !important;
+}
+
+
+/*--------------
+ Column Count
+---------------*/
+
+/* Grid Based */
+.ui.one.column.table td {
+ width: @oneColumn;
+}
+.ui.two.column.table td {
+ width: @twoColumn;
+}
+.ui.three.column.table td {
+ width: @threeColumn;
+}
+.ui.four.column.table td {
+ width: @fourColumn;
+}
+.ui.five.column.table td {
+ width: @fiveColumn;
+}
+.ui.six.column.table td {
+ width: @sixColumn;
+}
+.ui.seven.column.table td {
+ width: @sevenColumn;
+}
+.ui.eight.column.table td {
+ width: @eightColumn;
+}
+.ui.nine.column.table td {
+ width: @nineColumn;
+}
+.ui.ten.column.table td {
+ width: @tenColumn;
+}
+.ui.eleven.column.table td {
+ width: @elevenColumn;
+}
+.ui.twelve.column.table td {
+ width: @twelveColumn;
+}
+.ui.thirteen.column.table td {
+ width: @thirteenColumn;
+}
+.ui.fourteen.column.table td {
+ width: @fourteenColumn;
+}
+.ui.fifteen.column.table td {
+ width: @fifteenColumn;
+}
+.ui.sixteen.column.table td {
+ width: @sixteenColumn;
+}
+
+/* Column Width */
+.ui.table th.one.wide,
+.ui.table td.one.wide {
+ width: @oneWide;
+}
+.ui.table th.two.wide,
+.ui.table td.two.wide {
+ width: @twoWide;
+}
+.ui.table th.three.wide,
+.ui.table td.three.wide {
+ width: @threeWide;
+}
+.ui.table th.four.wide,
+.ui.table td.four.wide {
+ width: @fourWide;
+}
+.ui.table th.five.wide,
+.ui.table td.five.wide {
+ width: @fiveWide;
+}
+.ui.table th.six.wide,
+.ui.table td.six.wide {
+ width: @sixWide;
+}
+.ui.table th.seven.wide,
+.ui.table td.seven.wide {
+ width: @sevenWide;
+}
+.ui.table th.eight.wide,
+.ui.table td.eight.wide {
+ width: @eightWide;
+}
+.ui.table th.nine.wide,
+.ui.table td.nine.wide {
+ width: @nineWide;
+}
+.ui.table th.ten.wide,
+.ui.table td.ten.wide {
+ width: @tenWide;
+}
+.ui.table th.eleven.wide,
+.ui.table td.eleven.wide {
+ width: @elevenWide;
+}
+.ui.table th.twelve.wide,
+.ui.table td.twelve.wide {
+ width: @twelveWide;
+}
+.ui.table th.thirteen.wide,
+.ui.table td.thirteen.wide {
+ width: @thirteenWide;
+}
+.ui.table th.fourteen.wide,
+.ui.table td.fourteen.wide {
+ width: @fourteenWide;
+}
+.ui.table th.fifteen.wide,
+.ui.table td.fifteen.wide {
+ width: @fifteenWide;
+}
+.ui.table th.sixteen.wide,
+.ui.table td.sixteen.wide {
+ width: @sixteenWide;
+}
+
+/*--------------
+ Sortable
+---------------*/
+
+.ui.sortable.table thead th {
+ cursor: pointer;
+ white-space: nowrap;
+ border-left: @sortableBorder;
+ color: @sortableColor;
+}
+.ui.sortable.table thead th:first-child {
+ border-left: none;
+}
+.ui.sortable.table thead th.sorted,
+.ui.sortable.table thead th.sorted:hover {
+ user-select: none;
+}
+
+.ui.sortable.table thead th:after {
+ display: none;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ content: '';
+ height: 1em;
+ width: @sortableIconWidth;
+ opacity: @sortableIconOpacity;
+ margin: 0em 0em 0em @sortableIconDistance;
+ font-family: @sortableIconFont;
+}
+.ui.sortable.table thead th.ascending:after {
+ content: @sortableIconAscending;
+}
+.ui.sortable.table thead th.descending:after {
+ content: @sortableIconDescending;
+}
+
+/* Hover */
+.ui.sortable.table th.disabled:hover {
+ cursor: auto;
+ color: @sortableDisabledColor;
+}
+.ui.sortable.table thead th:hover {
+ background: @sortableHoverBackground;
+ color: @sortableHoverColor;
+}
+
+/* Sorted */
+.ui.sortable.table thead th.sorted {
+ background: @sortableActiveBackground;
+ color: @sortableActiveColor;
+}
+.ui.sortable.table thead th.sorted:after {
+ display: inline-block;
+}
+
+/* Sorted Hover */
+.ui.sortable.table thead th.sorted:hover {
+ background: @sortableActiveHoverBackground;
+ color: @sortableActiveHoverColor;
+}
+
+/* Inverted */
+.ui.inverted.sortable.table thead th.sorted {
+ background: @sortableInvertedActiveBackground;
+ color: @sortableInvertedActiveColor;
+}
+.ui.inverted.sortable.table thead th:hover {
+ background: @sortableInvertedHoverBackground;
+ color: @sortableInvertedHoverColor;
+}
+.ui.inverted.sortable.table thead th {
+ border-left-color: @sortableInvertedBorderColor;
+ border-right-color: @sortableInvertedBorderColor;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+/* Text Color */
+.ui.inverted.table {
+ background: @invertedBackground;
+ color: @invertedCellColor;
+ border: @invertedBorder;
+}
+.ui.inverted.table th {
+ background-color: @invertedHeaderBackground;
+ border-color: @invertedHeaderBorderColor !important;
+ color: @invertedHeaderColor;
+}
+.ui.inverted.table tr td {
+ border-color: @invertedCellBorderColor !important;
+}
+
+.ui.inverted.table tr.disabled td,
+.ui.inverted.table tr td.disabled,
+.ui.inverted.table tr.disabled:hover td,
+.ui.inverted.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @invertedDisabledTextColor;
+}
+
+/* Definition */
+.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
+.ui.inverted.definition.table thead:not(.full-width) th:first-child {
+ background: @definitionPageBackground;
+}
+.ui.inverted.definition.table tr td:first-child {
+ background: @invertedDefinitionColumnBackground;
+ color: @invertedDefinitionColumnColor;
+}
+
+/*--------------
+ Collapsing
+---------------*/
+
+.ui.collapsing.table {
+ width: auto;
+}
+
+/*--------------
+ Basic
+---------------*/
+
+.ui.basic.table {
+ background: @basicTableBackground;
+ border: @basicTableBorder;
+ box-shadow: @basicBoxShadow;
+}
+.ui.basic.table thead,
+.ui.basic.table tfoot {
+ box-shadow: none;
+}
+.ui.basic.table th {
+ background: @basicTableHeaderBackground;
+ border-left: @basicTableHeaderDivider;
+}
+.ui.basic.table tbody tr {
+ border-bottom: @basicTableCellBorder;
+}
+.ui.basic.table td {
+ background: @basicTableCellBackground;
+}
+.ui.basic.striped.table tbody tr:nth-child(2n) {
+ background-color: @basicTableStripedBackground !important;
+}
+
+/* Very Basic */
+.ui[class*="very basic"].table {
+ border: none;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
+ padding: @basicTableCellPadding;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
+ padding-left: 0em;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
+ padding-right: 0em;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
+ padding-top: 0em;
+}
+
+/*--------------
+ Celled
+---------------*/
+
+.ui.celled.table tr th,
+.ui.celled.table tr td {
+ border-left: @cellBorder;
+}
+.ui.celled.table tr th:first-child,
+.ui.celled.table tr td:first-child {
+ border-left: none;
+}
+
+/*--------------
+ Padded
+---------------*/
+
+.ui.padded.table th {
+ padding-left: @paddedHorizontalPadding;
+ padding-right: @paddedHorizontalPadding;
+}
+.ui.padded.table th,
+.ui.padded.table td {
+ padding: @paddedVerticalPadding @paddedHorizontalPadding;
+}
+
+/* Very */
+.ui[class*="very padded"].table th {
+ padding-left: @veryPaddedHorizontalPadding;
+ padding-right: @veryPaddedHorizontalPadding;
+}
+.ui[class*="very padded"].table td {
+ padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+}
+
+/*--------------
+ Compact
+---------------*/
+
+.ui.compact.table th {
+ padding-left: @compactHorizontalPadding;
+ padding-right: @compactHorizontalPadding;
+}
+.ui.compact.table td {
+ padding: @compactVerticalPadding @compactHorizontalPadding;
+}
+
+/* Very */
+.ui[class*="very compact"].table th {
+ padding-left: @veryCompactHorizontalPadding;
+ padding-right: @veryCompactHorizontalPadding;
+}
+.ui[class*="very compact"].table td {
+ padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+/* Small */
+.ui.small.table {
+ font-size: @small;
+}
+
+/* Standard */
+.ui.table {
+ font-size: @medium;
+}
+
+/* Large */
+.ui.large.table {
+ font-size: @large;
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/elements/button.less b/semantic/src/definitions/elements/button.less
new file mode 100644
index 0000000..e5b2647
--- /dev/null
+++ b/semantic/src/definitions/elements/button.less
@@ -0,0 +1,3426 @@
+/*!
+ * # Semantic UI - Button
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'element';
+@element : 'button';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Button
+*******************************/
+
+.ui.button {
+ cursor: pointer;
+ display: inline-block;
+
+ min-height: 1em;
+
+ outline: none;
+ border: none;
+ vertical-align: @verticalAlign;
+ background: @background;
+ color: @textColor;
+
+ font-family: @fontFamily;
+
+ margin: 0em @horizontalMargin @verticalMargin 0em;
+ padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
+
+ text-transform: @textTransform;
+ text-shadow: @textShadow;
+ font-weight: @fontWeight;
+ line-height: @lineHeight;
+ font-style: normal;
+ text-align: center;
+ text-decoration: none;
+
+ border-radius: @borderRadius;
+ box-shadow: @boxShadow;
+
+ user-select: none;
+ transition: @transition;
+ will-change: @willChange;
+
+ -webkit-tap-highlight-color: @tapColor;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Hover
+---------------*/
+
+.ui.button:hover {
+ background-color: @hoverBackgroundColor;
+ background-image: @hoverBackgroundImage;
+ box-shadow: @hoverBoxShadow;
+ color: @hoverColor;
+}
+
+.ui.button:hover .icon {
+ opacity: @iconHoverOpacity;
+}
+
+/*--------------
+ Focus
+---------------*/
+
+.ui.button:focus {
+ background-color: @focusBackgroundColor;
+ color: @focusColor;
+ background-image: @focusBackgroundImage !important;
+ box-shadow: @focusBoxShadow !important;
+}
+
+.ui.button:focus .icon {
+ opacity: @iconFocusOpacity;
+}
+
+/*--------------
+ Down
+---------------*/
+
+.ui.button:active,
+.ui.active.button:active {
+ background-color: @downBackgroundColor;
+ background-image: @downBackgroundImage;
+ color: @downColor;
+ box-shadow: @downBoxShadow;
+}
+
+/*--------------
+ Active
+---------------*/
+
+.ui.active.button {
+ background-color: @activeBackgroundColor;
+ background-image: @activeBackgroundImage;
+ box-shadow: @activeBoxShadow;
+ color: @activeColor;
+}
+.ui.active.button:hover {
+ background-color: @activeHoverBackgroundColor;
+ background-image: @activeHoverBackgroundImage;
+ color: @activeHoverColor;
+}
+.ui.active.button:active {
+ background-color: @activeBackgroundColor;
+ background-image: @activeBackgroundImage;
+}
+
+
+/*--------------
+ Loading
+---------------*/
+
+/* Specificity hack */
+.ui.loading.loading.loading.loading.loading.loading.button {
+ position: relative;
+ cursor: default;
+ text-shadow: none !important;
+ color: transparent !important;
+ opacity: @loadingOpacity;
+ pointer-events: @loadingPointerEvents;
+ transition: @loadingTransition;
+}
+.ui.loading.button:before {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
+
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
+
+ border-radius: @circularRadius;
+ border: @loaderLineWidth solid @invertedLoaderFillColor;
+}
+.ui.loading.button:after {
+ position: absolute;
+ content: '';
+ top: 50%;
+ left: 50%;
+
+ margin: @loaderMargin;
+ width: @loaderSize;
+ height: @loaderSize;
+
+ animation: button-spin @loaderSpeed linear;
+ animation-iteration-count: infinite;
+
+ border-radius: @circularRadius;
+
+ border-color: @invertedLoaderLineColor transparent transparent;
+ border-style: solid;
+ border-width: @loaderLineWidth;
+
+ box-shadow: 0px 0px 0px 1px transparent;
+}
+.ui.labeled.icon.loading.button .icon {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+@keyframes button-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.ui.basic.loading.button:not(.inverted):before {
+ border-color: @loaderFillColor;
+}
+.ui.basic.loading.button:not(.inverted):after {
+ border-top-color: @loaderLineColor;
+}
+
+/*-------------------
+ Disabled
+--------------------*/
+
+.ui.buttons .disabled.button,
+.ui.disabled.button,
+.ui.button:disabled,
+.ui.disabled.button:hover,
+.ui.disabled.active.button {
+ cursor: default;
+ opacity: @disabledOpacity !important;
+ background-image: none !important;
+ box-shadow: none !important;
+ pointer-events: none !important;
+}
+
+/* Basic Group With Disabled */
+.ui.basic.buttons .ui.disabled.button {
+ border-color: @disabledBorderColor;
+}
+
+/*******************************
+ Types
+*******************************/
+
+/*-------------------
+ Animated
+--------------------*/
+
+.ui.animated.button {
+ position: relative;
+ overflow: hidden;
+ padding-right: 0em !important;
+ vertical-align: @animatedVerticalAlign;
+ z-index: @animatedZIndex;
+}
+
+.ui.animated.button .content {
+ will-change: transform, opacity;
+}
+.ui.animated.button .visible.content {
+ position: relative;
+ margin-right: @horizontalPadding;
+}
+.ui.animated.button .hidden.content {
+ position: absolute;
+ width: 100%;
+}
+
+/* Horizontal */
+.ui.animated.button .visible.content,
+.ui.animated.button .hidden.content {
+ transition: right @animationDuration @animationEasing 0s;
+}
+.ui.animated.button .visible.content {
+ left: auto;
+ right: 0%;
+}
+.ui.animated.button .hidden.content {
+ top: 50%;
+ left: auto;
+ right: -100%;
+ margin-top: -(@lineHeight / 2);
+}
+.ui.animated.button:focus .visible.content,
+.ui.animated.button:hover .visible.content {
+ left: auto;
+ right: 200%;
+}
+.ui.animated.button:focus .hidden.content,
+.ui.animated.button:hover .hidden.content {
+ left: auto;
+ right: 0%;
+}
+
+/* Vertical */
+.ui.vertical.animated.button .visible.content,
+.ui.vertical.animated.button .hidden.content {
+ transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+}
+.ui.vertical.animated.button .visible.content {
+ transform: translateY(0%);
+ right: auto;
+}
+.ui.vertical.animated.button .hidden.content {
+ top: -50%;
+ left: 0%;
+ right: auto;
+}
+.ui.vertical.animated.button:focus .visible.content,
+.ui.vertical.animated.button:hover .visible.content {
+ transform: translateY(200%);
+ right: auto;
+}
+.ui.vertical.animated.button:focus .hidden.content,
+.ui.vertical.animated.button:hover .hidden.content {
+ top: 50%;
+ right: auto;
+}
+
+/* Fade */
+.ui.fade.animated.button .visible.content,
+.ui.fade.animated.button .hidden.content {
+ transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+}
+.ui.fade.animated.button .visible.content {
+ left: auto;
+ right: auto;
+ opacity: 1;
+ transform: scale(1);
+}
+.ui.fade.animated.button .hidden.content {
+ opacity: 0;
+ left: 0%;
+ right: auto;
+ transform: scale(@fadeScaleHigh);
+}
+.ui.fade.animated.button:focus .visible.content,
+.ui.fade.animated.button:hover .visible.content {
+ left: auto;
+ right: auto;
+ opacity: 0;
+ transform: scale(@fadeScaleLow);
+}
+.ui.fade.animated.button:focus .hidden.content,
+.ui.fade.animated.button:hover .hidden.content {
+ left: 0%;
+ right: auto;
+ opacity: 1;
+ transform: scale(1);
+}
+
+/*-------------------
+ Inverted
+--------------------*/
+
+.ui.inverted.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
+ background: transparent none;
+ color: @white;
+ text-shadow: none !important;
+}
+
+/* Group */
+.ui.inverted.buttons .button {
+ margin: @invertedGroupButtonOffset;
+}
+.ui.inverted.buttons .button:first-child {
+ margin-left: 0em;
+}
+.ui.inverted.vertical.buttons .button {
+ margin: @invertedVerticalGroupButtonOffset;
+}
+.ui.inverted.vertical.buttons .button:first-child {
+ margin-top: 0em;
+}
+
+/* States */
+
+/* Hover */
+.ui.inverted.button:hover {
+ background: @white;
+ box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
+ color: @hoverColor;
+}
+
+/* Active / Focus */
+.ui.inverted.button:focus,
+.ui.inverted.button.active {
+ background: @white;
+ box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;
+ color: @focusColor;
+}
+
+/* Active Focus */
+.ui.inverted.button.active:focus {
+ background: @midWhite;
+ box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;
+ color: @focusColor;
+}
+
+
+/*-------------------
+ Labeled Button
+--------------------*/
+
+.ui.labeled.button:not(.icon) {
+ display: inline-flex;
+ flex-direction: row;
+ background: none !important;
+ padding: 0px !important;
+ border: none !important;
+ box-shadow: none !important;
+}
+
+.ui.labeled.button > .button {
+ margin: 0px;
+}
+.ui.labeled.button > .label {
+ display: flex;
+ align-items: @labeledLabelAlign;
+ margin: 0px 0px 0px @labeledLabelBorderOffset !important;
+ font-size: @labeledLabelFontSize;
+ padding: @labeledLabelPadding;
+ font-size: @labeledLabelFontSize;
+ border-color: @labeledLabelBorderColor;
+}
+
+/* Tag */
+.ui.labeled.button > .tag.label:before {
+ width: @labeledTagLabelSize;
+ height: @labeledTagLabelSize;
+}
+
+/* Right */
+.ui.labeled.button:not([class*="left labeled"]) > .button {
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+.ui.labeled.button:not([class*="left labeled"]) > .label {
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+
+/* Left Side */
+.ui[class*="left labeled"].button > .button {
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+}
+.ui[class*="left labeled"].button > .label {
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+
+/*-------------------
+ Social
+--------------------*/
+
+/* Facebook */
+.ui.facebook.button {
+ background-color: @facebookColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.facebook.button:hover {
+ background-color: @facebookHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.facebook.button:active {
+ background-color: @facebookDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* Twitter */
+.ui.twitter.button {
+ background-color: @twitterColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.twitter.button:hover {
+ background-color: @twitterHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.twitter.button:active {
+ background-color: @twitterDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* Google Plus */
+.ui.google.plus.button {
+ background-color: @googlePlusColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.google.plus.button:hover {
+ background-color: @googlePlusHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.google.plus.button:active {
+ background-color: @googlePlusDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* Linked In */
+.ui.linkedin.button {
+ background-color: @linkedInColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.linkedin.button:hover {
+ background-color: @linkedInHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.linkedin.button:active {
+ background-color: @linkedInDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* YouTube */
+.ui.youtube.button {
+ background-color: @youtubeColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.youtube.button:hover {
+ background-color: @youtubeHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.youtube.button:active {
+ background-color: @youtubeDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* Instagram */
+.ui.instagram.button {
+ background-color: @instagramColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.instagram.button:hover {
+ background-color: @instagramHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.instagram.button:active {
+ background-color: @instagramDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* Pinterest */
+.ui.pinterest.button {
+ background-color: @pinterestColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.pinterest.button:hover {
+ background-color: @pinterestHoverColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+.ui.pinterest.button:active {
+ background-color: @pinterestDownColor;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+}
+
+/* VK */
+.ui.vk.button {
+ background-color: #4D7198;
+ color: @white;
+ background-image: @coloredBackgroundImage;
+ box-shadow: @coloredBoxShadow;
+}
+.ui.vk.button:hover {
+ background-color: @vkHoverColor;
+ color: @white;
+}
+.ui.vk.button:active {
+ background-color: @vkDownColor;
+ color: @white;
+}
+
+/*--------------
+ Icon
+---------------*/
+
+.ui.button > .icon:not(.button) {
+ height: @iconHeight;
+ opacity: @iconOpacity;
+ margin: @iconMargin;
+ transition: @iconTransition;
+ vertical-align: @iconVerticalAlign;
+ color: @iconColor;
+}
+
+.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+ margin: @iconMargin;
+}
+.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
+ margin: @rightIconMargin;
+}
+
+/*******************************
+ Variations
+*******************************/
+
+
+/*-------------------
+ Floated
+--------------------*/
+
+.ui[class*="left floated"].buttons,
+.ui[class*="left floated"].button {
+ float: left;
+ margin-left: 0em;
+ margin-right: @floatedMargin;
+}
+.ui[class*="right floated"].buttons,
+.ui[class*="right floated"].button {
+ float: right;
+ margin-right: 0em;
+ margin-left: @floatedMargin;
+}
+
+/*-------------------
+ Compact
+--------------------*/
+
+.ui.compact.buttons .button,
+.ui.compact.button {
+ padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );
+}
+.ui.compact.icon.buttons .button,
+.ui.compact.icon.button {
+ padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );
+}
+.ui.compact.labeled.icon.buttons .button,
+.ui.compact.labeled.icon.button {
+ padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );
+}
+
+/*-------------------
+ Sizes
+--------------------*/
+
+.ui.mini.buttons .button,
+.ui.mini.buttons .or,
+.ui.mini.button {
+ font-size: @mini;
+}
+.ui.tiny.buttons .button,
+.ui.tiny.buttons .or,
+.ui.tiny.button {
+ font-size: @tiny;
+}
+.ui.small.buttons .button,
+.ui.small.buttons .or,
+.ui.small.button {
+ font-size: @small;
+}
+.ui.buttons .button,
+.ui.buttons .or,
+.ui.button {
+ font-size: @medium;
+}
+.ui.large.buttons .button,
+.ui.large.buttons .or,
+.ui.large.button {
+ font-size: @large;
+}
+.ui.big.buttons .button,
+.ui.big.buttons .or,
+.ui.big.button {
+ font-size: @big;
+}
+.ui.huge.buttons .button,
+.ui.huge.buttons .or,
+.ui.huge.button {
+ font-size: @huge;
+}
+.ui.massive.buttons .button,
+.ui.massive.buttons .or,
+.ui.massive.button {
+ font-size: @massive;
+}
+
+/*--------------
+ Icon Only
+---------------*/
+
+.ui.icon.buttons .button,
+.ui.icon.button {
+ padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset );
+}
+.ui.icon.buttons .button > .icon,
+.ui.icon.button > .icon {
+ opacity: @iconButtonOpacity;
+ margin: 0em !important;
+ vertical-align: top;
+}
+
+
+/*-------------------
+ Basic
+--------------------*/
+
+.ui.basic.buttons .button,
+.ui.basic.button {
+ background: @basicBackground !important;
+ color: @basicTextColor !important;
+ font-weight: @basicFontWeight;
+ border-radius: @basicBorderRadius;
+ text-transform: @basicTextTransform;
+ text-shadow: none !important;
+ box-shadow: @basicBoxShadow;
+}
+.ui.basic.buttons {
+ box-shadow: @basicGroupBoxShadow;
+ border: @basicGroupBorder;
+ border-radius: @borderRadius;
+}
+.ui.basic.buttons .button {
+ border-radius: 0em;
+}
+
+.ui.basic.buttons .button:hover,
+.ui.basic.button:hover {
+ background: @basicHoverBackground !important;
+ color: @basicHoverTextColor !important;
+ box-shadow: @basicHoverBoxShadow;
+}
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus {
+ background: @basicFocusBackground !important;
+ color: @basicFocusTextColor !important;
+ box-shadow: @basicFocusBoxShadow;
+}
+.ui.basic.buttons .button:active,
+.ui.basic.button:active {
+ background: @basicDownBackground !important;
+ color: @basicDownTextColor !important;
+ box-shadow: @basicDownBoxShadow;
+}
+.ui.basic.buttons .active.button,
+.ui.basic.active.button {
+ background: @basicActiveBackground !important;
+ box-shadow: @basicActiveBoxShadow !important;
+ color: @basicActiveTextColor;
+}
+.ui.basic.buttons .active.button:hover,
+.ui.basic.active.button:hover {
+ background-color: @transparentBlack;
+}
+
+/* Vertical */
+.ui.basic.buttons .button:hover {
+ box-shadow: @basicHoverBoxShadow inset;
+}
+.ui.basic.buttons .button:active {
+ box-shadow: @basicDownBoxShadow inset;
+}
+.ui.basic.buttons .active.button {
+ box-shadow: @basicActiveBoxShadow !important;
+}
+
+/* Standard Basic Inverted */
+.ui.basic.inverted.buttons .button,
+.ui.basic.inverted.button {
+ background-color: transparent !important;
+ color: @offWhite !important;
+ box-shadow: @basicInvertedBoxShadow !important;
+}
+.ui.basic.inverted.buttons .button:hover,
+.ui.basic.inverted.button:hover {
+ color: @white !important;
+ box-shadow: @basicInvertedHoverBoxShadow !important;
+}
+.ui.basic.inverted.buttons .button:focus,
+.ui.basic.inverted.button:focus {
+ color: @white !important;
+ box-shadow: @basicInvertedFocusBoxShadow !important;
+}
+.ui.basic.inverted.buttons .button:active,
+.ui.basic.inverted.button:active {
+ background-color: @transparentWhite !important;
+ color: @white !important;
+ box-shadow: @basicInvertedDownBoxShadow !important;
+}
+.ui.basic.inverted.buttons .active.button,
+.ui.basic.inverted.active.button {
+ background-color: @transparentWhite;
+ color: @invertedTextColor;
+ text-shadow: @invertedTextShadow;
+ box-shadow: @basicInvertedActiveBoxShadow;
+}
+.ui.basic.inverted.buttons .active.button:hover,
+.ui.basic.inverted.active.button:hover {
+ background-color: @strongTransparentWhite;
+ box-shadow: @basicInvertedHoverBoxShadow !important;
+}
+
+
+/* Basic Group */
+.ui.basic.buttons .button {
+ border-left: @basicGroupBorder;
+ box-shadow: none;
+}
+.ui.basic.vertical.buttons .button {
+ border-left: none;
+}
+.ui.basic.vertical.buttons .button {
+ border-left-width: 0px;
+ border-top: @basicGroupBorder;
+}
+.ui.basic.vertical.buttons .button:first-child {
+ border-top-width: 0px;
+}
+
+
+
+/*--------------
+ Labeled Icon
+---------------*/
+
+.ui.labeled.icon.buttons .button,
+.ui.labeled.icon.button {
+ position: relative;
+ padding-left: @labeledIconPadding !important;
+ padding-right: @horizontalPadding !important;
+}
+
+/* Left Labeled */
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+ position: absolute;
+ height: 100%;
+ line-height: 1;
+ border-radius: 0px;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ text-align: center;
+
+ margin: @labeledIconMargin;
+ width: @labeledIconWidth;
+ background-color: @labeledIconBackgroundColor;
+ color: @labeledIconColor;
+ box-shadow: @labeledIconLeftShadow;
+}
+
+/* Left Labeled */
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+ top: 0em;
+ left: 0em;
+}
+
+/* Right Labeled */
+.ui[class*="right labeled"].icon.button {
+ padding-right: @labeledIconPadding !important;
+ padding-left: @horizontalPadding !important;
+}
+.ui[class*="right labeled"].icon.button > .icon {
+ left: auto;
+ right: 0em;
+ border-radius: 0px;
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+ box-shadow: @labeledIconRightShadow;
+}
+
+
+.ui.labeled.icon.buttons > .button > .icon:before,
+.ui.labeled.icon.button > .icon:before,
+.ui.labeled.icon.buttons > .button > .icon:after,
+.ui.labeled.icon.button > .icon:after {
+ display: block;
+ position: absolute;
+ width: 100%;
+ top: 50%;
+ text-align: center;
+ transform: translateY(-50%);
+}
+
+.ui.labeled.icon.buttons .button > .icon {
+ border-radius: 0em;
+}
+.ui.labeled.icon.buttons .button:first-child > .icon {
+ border-top-left-radius: @borderRadius;
+ border-bottom-left-radius: @borderRadius;
+}
+.ui.labeled.icon.buttons .button:last-child > .icon {
+ border-top-right-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+}
+.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
+ border-radius: 0em;
+ border-top-left-radius: @borderRadius;
+}
+.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
+ border-radius: 0em;
+ border-bottom-left-radius: @borderRadius;
+}
+
+/* Fluid Labeled */
+.ui.fluid[class*="left labeled"].icon.button,
+.ui.fluid[class*="right labeled"].icon.button {
+ padding-left: @horizontalPadding !important;
+ padding-right: @horizontalPadding !important;
+}
+
+
+
+
+/*--------------
+ Toggle
+---------------*/
+
+/* Toggle (Modifies active state to give affordances) */
+.ui.toggle.buttons .active.button,
+.ui.buttons .button.toggle.active,
+.ui.button.toggle.active {
+ background-color: @positiveColor !important;
+ box-shadow: none !important;
+ text-shadow: @invertedTextShadow;
+ color: @invertedTextColor !important;
+}
+.ui.button.toggle.active:hover {
+ background-color: @positiveColorHover !important;
+ text-shadow: @invertedTextShadow;
+ color: @invertedTextColor !important;
+}
+
+/*--------------
+ Circular
+---------------*/
+
+.ui.circular.button {
+ border-radius: 10em;
+}
+.ui.circular.button > .icon {
+ width: 1em;
+ vertical-align: baseline;
+}
+
+
+/*-------------------
+ Or Buttons
+--------------------*/
+
+.ui.buttons .or {
+ position: relative;
+ width: @orGap;
+ height: @orHeight;
+ z-index: @orZIndex;
+}
+.ui.buttons .or:before {
+ position: absolute;
+ text-align: center;
+ border-radius: @circularRadius;
+
+ content: @orText;
+ top: 50%;
+ left: 50%;
+ background-color: @orBackgroundColor;
+ text-shadow: @orTextShadow;
+
+ margin-top: @orVerticalOffset;
+ margin-left: @orHorizontalOffset;
+
+ width: @orCircleSize;
+ height: @orCircleSize;
+
+ line-height: @orLineHeight;
+ color: @orTextColor;
+
+ font-style: @orTextStyle;
+ font-weight: @orTextWeight;
+
+ box-shadow: @orBoxShadow;
+}
+.ui.buttons .or[data-text]:before {
+ content: attr(data-text);
+}
+
+/* Fluid Or */
+.ui.fluid.buttons .or {
+ width: 0em !important;
+}
+.ui.fluid.buttons .or:after {
+ display: none;
+}
+
+
+/*-------------------
+ Attached
+--------------------*/
+
+
+/* Singular */
+.ui.attached.button {
+ position: relative;
+ display: block;
+ margin: 0em;
+ border-radius: 0em;
+ box-shadow: @attachedBoxShadow !important;
+}
+
+/* Top / Bottom */
+.ui.attached.top.button {
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.attached.bottom.button {
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+/* Left / Right */
+.ui.left.attached.button {
+ display: inline-block;
+ border-left: none;
+ text-align: right;
+
+ padding-right: @attachedHorizontalPadding;
+ border-radius: @borderRadius 0em 0em @borderRadius;
+}
+.ui.right.attached.button {
+ display: inline-block;
+ text-align: left;
+ padding-left: @attachedHorizontalPadding;
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+
+/* Plural */
+.ui.attached.buttons {
+ position: relative;
+ display: flex;
+ border-radius: 0em;
+ width: auto !important;
+ z-index: @attachedZIndex;
+ margin-left: @attachedOffset;
+ margin-right: @attachedOffset;
+}
+.ui.attached.buttons .button {
+ margin: 0em;
+}
+.ui.attached.buttons .button:first-child {
+ border-radius: 0em;
+}
+.ui.attached.buttons .button:last-child {
+ border-radius: 0em;
+}
+
+/* Top / Bottom */
+.ui[class*="top attached"].buttons {
+ margin-bottom: @attachedOffset;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui[class*="top attached"].buttons .button:first-child {
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui[class*="top attached"].buttons .button:last-child {
+ border-radius: 0em @borderRadius 0em 0em;
+}
+
+.ui[class*="bottom attached"].buttons {
+ margin-top: @attachedOffset;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui[class*="bottom attached"].buttons .button:first-child {
+ border-radius: 0em 0em 0em @borderRadius;
+}
+.ui[class*="bottom attached"].buttons .button:last-child {
+ border-radius: 0em 0em @borderRadius 0em;
+}
+
+/* Left / Right */
+.ui[class*="left attached"].buttons {
+ display: inline-flex;
+ margin-right: 0em;
+ margin-left: @attachedOffset;
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui[class*="left attached"].buttons .button:first-child {
+ margin-left: @attachedOffset;
+ border-radius: 0em @borderRadius 0em 0em;
+}
+.ui[class*="left attached"].buttons .button:last-child {
+ margin-left: @attachedOffset;
+ border-radius: 0em 0em @borderRadius 0em;
+}
+
+.ui[class*="right attached"].buttons {
+ display: inline-flex;
+ margin-left: 0em;
+ margin-right: @attachedOffset;
+ border-radius: @borderRadius 0em 0em @borderRadius;
+}
+.ui[class*="right attached"].buttons .button:first-child {
+ margin-left: @attachedOffset;
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui[class*="right attached"].buttons .button:last-child {
+ margin-left: @attachedOffset;
+ border-radius: 0em 0em 0em @borderRadius;
+}
+
+/*-------------------
+ Fluid
+--------------------*/
+
+.ui.fluid.buttons,
+.ui.fluid.button {
+ width: 100%;
+}
+.ui.fluid.button {
+ display: block;
+}
+
+.ui.two.buttons {
+ width: 100%;
+}
+.ui.two.buttons > .button {
+ width: 50%;
+}
+
+.ui.three.buttons {
+ width: 100%;
+}
+.ui.three.buttons > .button {
+ width: 33.333%;
+}
+
+.ui.four.buttons {
+ width: 100%;
+}
+.ui.four.buttons > .button {
+ width: 25%;
+}
+
+.ui.five.buttons {
+ width: 100%;
+}
+.ui.five.buttons > .button {
+ width: 20%;
+}
+
+.ui.six.buttons {
+ width: 100%;
+}
+.ui.six.buttons > .button {
+ width: 16.666%;
+}
+
+.ui.seven.buttons {
+ width: 100%;
+}
+.ui.seven.buttons > .button {
+ width: 14.285%;
+}
+
+.ui.eight.buttons {
+ width: 100%;
+}
+.ui.eight.buttons > .button {
+ width: 12.500%;
+}
+
+.ui.nine.buttons {
+ width: 100%;
+}
+.ui.nine.buttons > .button {
+ width: 11.11%;
+}
+
+.ui.ten.buttons {
+ width: 100%;
+}
+.ui.ten.buttons > .button {
+ width: 10%;
+}
+
+.ui.eleven.buttons {
+ width: 100%;
+}
+.ui.eleven.buttons > .button {
+ width: 9.09%;
+}
+
+.ui.twelve.buttons {
+ width: 100%;
+}
+.ui.twelve.buttons > .button {
+ width: 8.3333%;
+}
+
+/* Fluid Vertical Buttons */
+.ui.fluid.vertical.buttons,
+.ui.fluid.vertical.buttons > .button {
+ display: flex;
+ width: auto;
+}
+
+.ui.two.vertical.buttons > .button {
+ height: 50%;
+}
+.ui.three.vertical.buttons > .button {
+ height: 33.333%;
+}
+.ui.four.vertical.buttons > .button {
+ height: 25%;
+}
+.ui.five.vertical.buttons > .button {
+ height: 20%;
+}
+.ui.six.vertical.buttons > .button {
+ height: 16.666%;
+}
+.ui.seven.vertical.buttons > .button {
+ height: 14.285%;
+}
+.ui.eight.vertical.buttons > .button {
+ height: 12.500%;
+}
+.ui.nine.vertical.buttons > .button {
+ height: 11.11%;
+}
+.ui.ten.vertical.buttons > .button {
+ height: 10%;
+}
+.ui.eleven.vertical.buttons > .button {
+ height: 9.09%;
+}
+.ui.twelve.vertical.buttons > .button {
+ height: 8.3333%;
+}
+
+
+/*-------------------
+ Colors
+--------------------*/
+
+/*--- Black ---*/
+.ui.black.buttons .button,
+.ui.black.button {
+ background-color: @black;
+ color: @blackTextColor;
+ text-shadow: @blackTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.black.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.black.buttons .button:hover,
+.ui.black.button:hover {
+ background-color: @blackHover;
+ color: @blackTextColor;
+ text-shadow: @blackTextShadow;
+}
+.ui.black.buttons .button:focus,
+.ui.black.button:focus {
+ background-color: @blackFocus;
+ color: @blackTextColor;
+ text-shadow: @blackTextShadow;
+}
+.ui.black.buttons .button:active,
+.ui.black.button:active {
+ background-color: @blackDown;
+ color: @blackTextColor;
+ text-shadow: @blackTextShadow;
+}
+.ui.black.buttons .active.button,
+.ui.black.buttons .active.button:active,
+.ui.black.active.button,
+.ui.black.button .active.button:active {
+ background-color: @blackActive;
+ color: @blackTextColor;
+ text-shadow: @blackTextShadow;
+}
+
+/* Basic */
+.ui.basic.black.buttons .button,
+.ui.basic.black.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;
+ color: @black !important;
+}
+.ui.basic.black.buttons .button:hover,
+.ui.basic.black.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;
+ color: @blackHover !important;
+}
+.ui.basic.black.buttons .button:focus,
+.ui.basic.black.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;
+ color: @blackHover !important;
+}
+.ui.basic.black.buttons .active.button,
+.ui.basic.black.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important;
+ color: @blackDown !important;
+}
+.ui.basic.black.buttons .button:active,
+.ui.basic.black.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;
+ color: @blackDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.black.buttons .button,
+.ui.inverted.black.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;
+ color: @invertedTextColor;
+}
+.ui.inverted.black.buttons .button:hover,
+.ui.inverted.black.button:hover,
+.ui.inverted.black.buttons .button:focus,
+.ui.inverted.black.button:focus,
+.ui.inverted.black.buttons .button.active,
+.ui.inverted.black.button.active,
+.ui.inverted.black.buttons .button:active,
+.ui.inverted.black.button:active {
+ box-shadow: none !important;
+ color: @lightBlackTextColor;
+}
+.ui.inverted.black.buttons .button:hover,
+.ui.inverted.black.button:hover {
+ background-color: @lightBlackHover;
+}
+.ui.inverted.black.buttons .button:focus,
+.ui.inverted.black.button:focus {
+ background-color: @lightBlackFocus;
+}
+.ui.inverted.black.buttons .active.button,
+.ui.inverted.black.active.button {
+ background-color: @lightBlackActive;
+}
+.ui.inverted.black.buttons .button:active,
+.ui.inverted.black.button:active {
+ background-color: @lightBlackDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.black.basic.buttons .button,
+.ui.inverted.black.buttons .basic.button,
+.ui.inverted.black.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.black.basic.buttons .button:hover,
+.ui.inverted.black.buttons .basic.button:hover,
+.ui.inverted.black.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important;
+ color: @white !important;
+}
+.ui.inverted.black.basic.buttons .button:focus,
+.ui.inverted.black.basic.buttons .button:focus,
+.ui.inverted.black.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important;
+ color: @lightBlack !important;
+}
+.ui.inverted.black.basic.buttons .active.button,
+.ui.inverted.black.buttons .basic.active.button,
+.ui.inverted.black.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important;
+ color: @white !important;
+}
+.ui.inverted.black.basic.buttons .button:active,
+.ui.inverted.black.buttons .basic.button:active,
+.ui.inverted.black.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;
+ color: @white !important;
+}
+
+/*--- Grey ---*/
+.ui.grey.buttons .button,
+.ui.grey.button {
+ background-color: @grey;
+ color: @greyTextColor;
+ text-shadow: @greyTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.grey.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.grey.buttons .button:hover,
+.ui.grey.button:hover {
+ background-color: @greyHover;
+ color: @greyTextColor;
+ text-shadow: @greyTextShadow;
+}
+.ui.grey.buttons .button:focus,
+.ui.grey.button:focus {
+ background-color: @greyFocus;
+ color: @greyTextColor;
+ text-shadow: @greyTextShadow;
+}
+.ui.grey.buttons .button:active,
+.ui.grey.button:active {
+ background-color: @greyDown;
+ color: @greyTextColor;
+ text-shadow: @greyTextShadow;
+}
+.ui.grey.buttons .active.button,
+.ui.grey.buttons .active.button:active,
+.ui.grey.active.button,
+.ui.grey.button .active.button:active {
+ background-color: @greyActive;
+ color: @greyTextColor;
+ text-shadow: @greyTextShadow;
+}
+
+/* Basic */
+.ui.basic.grey.buttons .button,
+.ui.basic.grey.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;
+ color: @grey !important;
+}
+.ui.basic.grey.buttons .button:hover,
+.ui.basic.grey.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important;
+ color: @greyHover !important;
+}
+.ui.basic.grey.buttons .button:focus,
+.ui.basic.grey.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;
+ color: @greyHover !important;
+}
+.ui.basic.grey.buttons .active.button,
+.ui.basic.grey.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important;
+ color: @greyDown !important;
+}
+.ui.basic.grey.buttons .button:active,
+.ui.basic.grey.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important;
+ color: @greyDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.grey.buttons .button,
+.ui.inverted.grey.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;
+ color: @invertedTextColor;
+}
+.ui.inverted.grey.buttons .button:hover,
+.ui.inverted.grey.button:hover,
+.ui.inverted.grey.buttons .button:focus,
+.ui.inverted.grey.button:focus,
+.ui.inverted.grey.buttons .button.active,
+.ui.inverted.grey.button.active,
+.ui.inverted.grey.buttons .button:active,
+.ui.inverted.grey.button:active {
+ box-shadow: none !important;
+ color: @lightGreyTextColor;
+}
+.ui.inverted.grey.buttons .button:hover,
+.ui.inverted.grey.button:hover {
+ background-color: @lightGreyHover;
+}
+.ui.inverted.grey.buttons .button:focus,
+.ui.inverted.grey.button:focus {
+ background-color: @lightGreyFocus;
+}
+.ui.inverted.grey.buttons .active.button,
+.ui.inverted.grey.active.button {
+ background-color: @lightGreyActive;
+}
+.ui.inverted.grey.buttons .button:active,
+.ui.inverted.grey.button:active {
+ background-color: @lightGreyDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.grey.basic.buttons .button,
+.ui.inverted.grey.buttons .basic.button,
+.ui.inverted.grey.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.grey.basic.buttons .button:hover,
+.ui.inverted.grey.buttons .basic.button:hover,
+.ui.inverted.grey.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important;
+ color: @white !important;
+}
+.ui.inverted.grey.basic.buttons .button:focus,
+.ui.inverted.grey.basic.buttons .button:focus,
+.ui.inverted.grey.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important;
+ color: @lightGrey !important;
+}
+.ui.inverted.grey.basic.buttons .active.button,
+.ui.inverted.grey.buttons .basic.active.button,
+.ui.inverted.grey.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important;
+ color: @white !important;
+}
+.ui.inverted.grey.basic.buttons .button:active,
+.ui.inverted.grey.buttons .basic.button:active,
+.ui.inverted.grey.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important;
+ color: @white !important;
+}
+
+
+/*--- Brown ---*/
+.ui.brown.buttons .button,
+.ui.brown.button {
+ background-color: @brown;
+ color: @brownTextColor;
+ text-shadow: @brownTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.brown.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.brown.buttons .button:hover,
+.ui.brown.button:hover {
+ background-color: @brownHover;
+ color: @brownTextColor;
+ text-shadow: @brownTextShadow;
+}
+.ui.brown.buttons .button:focus,
+.ui.brown.button:focus {
+ background-color: @brownFocus;
+ color: @brownTextColor;
+ text-shadow: @brownTextShadow;
+}
+.ui.brown.buttons .button:active,
+.ui.brown.button:active {
+ background-color: @brownDown;
+ color: @brownTextColor;
+ text-shadow: @brownTextShadow;
+}
+.ui.brown.buttons .active.button,
+.ui.brown.buttons .active.button:active,
+.ui.brown.active.button,
+.ui.brown.button .active.button:active {
+ background-color: @brownActive;
+ color: @brownTextColor;
+ text-shadow: @brownTextShadow;
+}
+
+/* Basic */
+.ui.basic.brown.buttons .button,
+.ui.basic.brown.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;
+ color: @brown !important;
+}
+.ui.basic.brown.buttons .button:hover,
+.ui.basic.brown.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important;
+ color: @brownHover !important;
+}
+.ui.basic.brown.buttons .button:focus,
+.ui.basic.brown.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;
+ color: @brownHover !important;
+}
+.ui.basic.brown.buttons .active.button,
+.ui.basic.brown.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important;
+ color: @brownDown !important;
+}
+.ui.basic.brown.buttons .button:active,
+.ui.basic.brown.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important;
+ color: @brownDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.brown.buttons .button,
+.ui.inverted.brown.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important;
+ color: @lightBrown;
+}
+.ui.inverted.brown.buttons .button:hover,
+.ui.inverted.brown.button:hover,
+.ui.inverted.brown.buttons .button:focus,
+.ui.inverted.brown.button:focus,
+.ui.inverted.brown.buttons .button.active,
+.ui.inverted.brown.button.active,
+.ui.inverted.brown.buttons .button:active,
+.ui.inverted.brown.button:active {
+ box-shadow: none !important;
+ color: @lightBrownTextColor;
+}
+.ui.inverted.brown.buttons .button:hover,
+.ui.inverted.brown.button:hover {
+ background-color: @lightBrownHover;
+}
+.ui.inverted.brown.buttons .button:focus,
+.ui.inverted.brown.button:focus {
+ background-color: @lightBrownFocus;
+}
+.ui.inverted.brown.buttons .active.button,
+.ui.inverted.brown.active.button {
+ background-color: @lightBrownActive;
+}
+.ui.inverted.brown.buttons .button:active,
+.ui.inverted.brown.button:active {
+ background-color: @lightBrownDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.brown.basic.buttons .button,
+.ui.inverted.brown.buttons .basic.button,
+.ui.inverted.brown.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.brown.basic.buttons .button:hover,
+.ui.inverted.brown.buttons .basic.button:hover,
+.ui.inverted.brown.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important;
+ color: @lightBrown !important;
+}
+.ui.inverted.brown.basic.buttons .button:focus,
+.ui.inverted.brown.basic.buttons .button:focus,
+.ui.inverted.brown.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important;
+ color: @lightBrown !important;
+}
+.ui.inverted.brown.basic.buttons .active.button,
+.ui.inverted.brown.buttons .basic.active.button,
+.ui.inverted.brown.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important;
+ color: @lightBrown !important;
+}
+.ui.inverted.brown.basic.buttons .button:active,
+.ui.inverted.brown.buttons .basic.button:active,
+.ui.inverted.brown.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important;
+ color: @lightBrown !important;
+}
+
+/*--- Blue ---*/
+.ui.blue.buttons .button,
+.ui.blue.button {
+ background-color: @blue;
+ color: @blueTextColor;
+ text-shadow: @blueTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.blue.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.blue.buttons .button:hover,
+.ui.blue.button:hover {
+ background-color: @blueHover;
+ color: @blueTextColor;
+ text-shadow: @blueTextShadow;
+}
+.ui.blue.buttons .button:focus,
+.ui.blue.button:focus {
+ background-color: @blueFocus;
+ color: @blueTextColor;
+ text-shadow: @blueTextShadow;
+}
+.ui.blue.buttons .button:active,
+.ui.blue.button:active {
+ background-color: @blueDown;
+ color: @blueTextColor;
+ text-shadow: @blueTextShadow;
+}
+.ui.blue.buttons .active.button,
+.ui.blue.buttons .active.button:active,
+.ui.blue.active.button,
+.ui.blue.button .active.button:active {
+ background-color: @blueActive;
+ color: @blueTextColor;
+ text-shadow: @blueTextShadow;
+}
+
+/* Basic */
+.ui.basic.blue.buttons .button,
+.ui.basic.blue.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;
+ color: @blue !important;
+}
+.ui.basic.blue.buttons .button:hover,
+.ui.basic.blue.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;
+ color: @blueHover !important;
+}
+.ui.basic.blue.buttons .button:focus,
+.ui.basic.blue.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;
+ color: @blueHover !important;
+}
+.ui.basic.blue.buttons .active.button,
+.ui.basic.blue.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important;
+ color: @blueDown !important;
+}
+.ui.basic.blue.buttons .button:active,
+.ui.basic.blue.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;
+ color: @blueDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.blue.buttons .button,
+.ui.inverted.blue.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;
+ color: @lightBlue;
+}
+.ui.inverted.blue.buttons .button:hover,
+.ui.inverted.blue.button:hover,
+.ui.inverted.blue.buttons .button:focus,
+.ui.inverted.blue.button:focus,
+.ui.inverted.blue.buttons .button.active,
+.ui.inverted.blue.button.active,
+.ui.inverted.blue.buttons .button:active,
+.ui.inverted.blue.button:active {
+ box-shadow: none !important;
+ color: @lightBlueTextColor;
+}
+.ui.inverted.blue.buttons .button:hover,
+.ui.inverted.blue.button:hover {
+ background-color: @lightBlueHover;
+}
+.ui.inverted.blue.buttons .button:focus,
+.ui.inverted.blue.button:focus {
+ background-color: @lightBlueFocus;
+}
+.ui.inverted.blue.buttons .active.button,
+.ui.inverted.blue.active.button {
+ background-color: @lightBlueActive;
+}
+.ui.inverted.blue.buttons .button:active,
+.ui.inverted.blue.button:active {
+ background-color: @lightBlueDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.blue.basic.buttons .button,
+.ui.inverted.blue.buttons .basic.button,
+.ui.inverted.blue.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.blue.basic.buttons .button:hover,
+.ui.inverted.blue.buttons .basic.button:hover,
+.ui.inverted.blue.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important;
+ color: @lightBlue !important;
+}
+.ui.inverted.blue.basic.buttons .button:focus,
+.ui.inverted.blue.basic.buttons .button:focus,
+.ui.inverted.blue.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important;
+ color: @lightBlue !important;
+}
+.ui.inverted.blue.basic.buttons .active.button,
+.ui.inverted.blue.buttons .basic.active.button,
+.ui.inverted.blue.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important;
+ color: @lightBlue !important;
+}
+.ui.inverted.blue.basic.buttons .button:active,
+.ui.inverted.blue.buttons .basic.button:active,
+.ui.inverted.blue.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;
+ color: @lightBlue !important;
+}
+
+/*--- Green ---*/
+.ui.green.buttons .button,
+.ui.green.button {
+ background-color: @green;
+ color: @greenTextColor;
+ text-shadow: @greenTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.green.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover {
+ background-color: @greenHover;
+ color: @greenTextColor;
+ text-shadow: @greenTextShadow;
+}
+.ui.green.buttons .button:focus,
+.ui.green.button:focus {
+ background-color: @greenFocus;
+ color: @greenTextColor;
+ text-shadow: @greenTextShadow;
+}
+.ui.green.buttons .button:active,
+.ui.green.button:active {
+ background-color: @greenDown;
+ color: @greenTextColor;
+ text-shadow: @greenTextShadow;
+}
+.ui.green.buttons .active.button,
+.ui.green.buttons .active.button:active,
+.ui.green.active.button,
+.ui.green.button .active.button:active {
+ background-color: @greenActive;
+ color: @greenTextColor;
+ text-shadow: @greenTextShadow;
+}
+
+
+/* Basic */
+.ui.basic.green.buttons .button,
+.ui.basic.green.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;
+ color: @green !important;
+}
+.ui.basic.green.buttons .button:hover,
+.ui.basic.green.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;
+ color: @greenHover !important;
+}
+.ui.basic.green.buttons .button:focus,
+.ui.basic.green.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;
+ color: @greenHover !important;
+}
+.ui.basic.green.buttons .active.button,
+.ui.basic.green.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important;
+ color: @greenDown !important;
+}
+.ui.basic.green.buttons .button:active,
+.ui.basic.green.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;
+ color: @greenDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.green.buttons .button,
+.ui.inverted.green.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;
+ color: @lightGreen;
+}
+.ui.inverted.green.buttons .button:hover,
+.ui.inverted.green.button:hover,
+.ui.inverted.green.buttons .button:focus,
+.ui.inverted.green.button:focus,
+.ui.inverted.green.buttons .button.active,
+.ui.inverted.green.button.active,
+.ui.inverted.green.buttons .button:active,
+.ui.inverted.green.button:active {
+ box-shadow: none !important;
+ color: @greenTextColor;
+}
+.ui.inverted.green.buttons .button:hover,
+.ui.inverted.green.button:hover {
+ background-color: @lightGreenHover;
+}
+.ui.inverted.green.buttons .button:focus,
+.ui.inverted.green.button:focus {
+ background-color: @lightGreenFocus;
+}
+.ui.inverted.green.buttons .active.button,
+.ui.inverted.green.active.button {
+ background-color: @lightGreenActive;
+}
+.ui.inverted.green.buttons .button:active,
+.ui.inverted.green.button:active {
+ background-color: @lightGreenDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.green.basic.buttons .button,
+.ui.inverted.green.buttons .basic.button,
+.ui.inverted.green.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.green.basic.buttons .button:hover,
+.ui.inverted.green.buttons .basic.button:hover,
+.ui.inverted.green.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important;
+ color: @lightGreen !important;
+}
+.ui.inverted.green.basic.buttons .button:focus,
+.ui.inverted.green.basic.buttons .button:focus,
+.ui.inverted.green.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important;
+ color: @lightGreen !important;
+}
+.ui.inverted.green.basic.buttons .active.button,
+.ui.inverted.green.buttons .basic.active.button,
+.ui.inverted.green.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important;
+ color: @lightGreen !important;
+}
+.ui.inverted.green.basic.buttons .button:active,
+.ui.inverted.green.buttons .basic.button:active,
+.ui.inverted.green.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;
+ color: @lightGreen !important;
+}
+
+/*--- Orange ---*/
+.ui.orange.buttons .button,
+.ui.orange.button {
+ background-color: @orange;
+ color: @orangeTextColor;
+ text-shadow: @orangeTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.orange.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.orange.buttons .button:hover,
+.ui.orange.button:hover {
+ background-color: @orangeHover;
+ color: @orangeTextColor;
+ text-shadow: @orangeTextShadow;
+}
+.ui.orange.buttons .button:focus,
+.ui.orange.button:focus {
+ background-color: @orangeFocus;
+ color: @orangeTextColor;
+ text-shadow: @orangeTextShadow;
+}
+.ui.orange.buttons .button:active,
+.ui.orange.button:active {
+ background-color: @orangeDown;
+ color: @orangeTextColor;
+ text-shadow: @orangeTextShadow;
+}
+.ui.orange.buttons .active.button,
+.ui.orange.buttons .active.button:active,
+.ui.orange.active.button,
+.ui.orange.button .active.button:active {
+ background-color: @orangeActive;
+ color: @orangeTextColor;
+ text-shadow: @orangeTextShadow;
+}
+
+/* Basic */
+.ui.basic.orange.buttons .button,
+.ui.basic.orange.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;
+ color: @orange !important;
+}
+.ui.basic.orange.buttons .button:hover,
+.ui.basic.orange.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;
+ color: @orangeHover !important;
+}
+.ui.basic.orange.buttons .button:focus,
+.ui.basic.orange.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;
+ color: @orangeHover !important;
+}
+.ui.basic.orange.buttons .active.button,
+.ui.basic.orange.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important;
+ color: @orangeDown !important;
+}
+.ui.basic.orange.buttons .button:active,
+.ui.basic.orange.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;
+ color: @orangeDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.orange.buttons .button,
+.ui.inverted.orange.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;
+ color: @lightOrange;
+}
+.ui.inverted.orange.buttons .button:hover,
+.ui.inverted.orange.button:hover,
+.ui.inverted.orange.buttons .button:focus,
+.ui.inverted.orange.button:focus,
+.ui.inverted.orange.buttons .button.active,
+.ui.inverted.orange.button.active,
+.ui.inverted.orange.buttons .button:active,
+.ui.inverted.orange.button:active {
+ box-shadow: none !important;
+ color: @lightOrangeTextColor;
+}
+.ui.inverted.orange.buttons .button:hover,
+.ui.inverted.orange.button:hover {
+ background-color: @lightOrangeHover;
+}
+.ui.inverted.orange.buttons .button:focus,
+.ui.inverted.orange.button:focus {
+ background-color: @lightOrangeFocus;
+}
+.ui.inverted.orange.buttons .active.button,
+.ui.inverted.orange.active.button {
+ background-color: @lightOrangeActive;
+}
+.ui.inverted.orange.buttons .button:active,
+.ui.inverted.orange.button:active {
+ background-color: @lightOrangeDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.orange.basic.buttons .button,
+.ui.inverted.orange.buttons .basic.button,
+.ui.inverted.orange.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.orange.basic.buttons .button:hover,
+.ui.inverted.orange.buttons .basic.button:hover,
+.ui.inverted.orange.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important;
+ color: @lightOrange !important;
+}
+.ui.inverted.orange.basic.buttons .button:focus,
+.ui.inverted.orange.basic.buttons .button:focus,
+.ui.inverted.orange.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important;
+ color: @lightOrange !important;
+}
+.ui.inverted.orange.basic.buttons .active.button,
+.ui.inverted.orange.buttons .basic.active.button,
+.ui.inverted.orange.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important;
+ color: @lightOrange !important;
+}
+.ui.inverted.orange.basic.buttons .button:active,
+.ui.inverted.orange.buttons .basic.button:active,
+.ui.inverted.orange.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;
+ color: @lightOrange !important;
+}
+
+/*--- Pink ---*/
+.ui.pink.buttons .button,
+.ui.pink.button {
+ background-color: @pink;
+ color: @pinkTextColor;
+ text-shadow: @pinkTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.pink.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.pink.buttons .button:hover,
+.ui.pink.button:hover {
+ background-color: @pinkHover;
+ color: @pinkTextColor;
+ text-shadow: @pinkTextShadow;
+}
+.ui.pink.buttons .button:focus,
+.ui.pink.button:focus {
+ background-color: @pinkFocus;
+ color: @pinkTextColor;
+ text-shadow: @pinkTextShadow;
+}
+.ui.pink.buttons .button:active,
+.ui.pink.button:active {
+ background-color: @pinkDown;
+ color: @pinkTextColor;
+ text-shadow: @pinkTextShadow;
+}
+.ui.pink.buttons .active.button,
+.ui.pink.buttons .active.button:active,
+.ui.pink.active.button,
+.ui.pink.button .active.button:active {
+ background-color: @pinkActive;
+ color: @pinkTextColor;
+ text-shadow: @pinkTextShadow;
+}
+
+/* Basic */
+.ui.basic.pink.buttons .button,
+.ui.basic.pink.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;
+ color: @pink !important;
+}
+.ui.basic.pink.buttons .button:hover,
+.ui.basic.pink.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;
+ color: @pinkHover !important;
+}
+.ui.basic.pink.buttons .button:focus,
+.ui.basic.pink.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;
+ color: @pinkHover !important;
+}
+.ui.basic.pink.buttons .active.button,
+.ui.basic.pink.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important;
+ color: @pinkDown !important;
+}
+.ui.basic.pink.buttons .button:active,
+.ui.basic.pink.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;
+ color: @pinkDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.pink.buttons .button,
+.ui.inverted.pink.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;
+ color: @lightPink;
+}
+.ui.inverted.pink.buttons .button:hover,
+.ui.inverted.pink.button:hover,
+.ui.inverted.pink.buttons .button:focus,
+.ui.inverted.pink.button:focus,
+.ui.inverted.pink.buttons .button.active,
+.ui.inverted.pink.button.active,
+.ui.inverted.pink.buttons .button:active,
+.ui.inverted.pink.button:active {
+ box-shadow: none !important;
+ color: @lightPinkTextColor;
+}
+.ui.inverted.pink.buttons .button:hover,
+.ui.inverted.pink.button:hover {
+ background-color: @lightPinkHover;
+}
+.ui.inverted.pink.buttons .button:focus,
+.ui.inverted.pink.button:focus {
+ background-color: @lightPinkFocus;
+}
+.ui.inverted.pink.buttons .active.button,
+.ui.inverted.pink.active.button {
+ background-color: @lightPinkActive;
+}
+.ui.inverted.pink.buttons .button:active,
+.ui.inverted.pink.button:active {
+ background-color: @lightPinkDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.pink.basic.buttons .button,
+.ui.inverted.pink.buttons .basic.button,
+.ui.inverted.pink.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.pink.basic.buttons .button:hover,
+.ui.inverted.pink.buttons .basic.button:hover,
+.ui.inverted.pink.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important;
+ color: @lightPink !important;
+}
+.ui.inverted.pink.basic.buttons .button:focus,
+.ui.inverted.pink.basic.buttons .button:focus,
+.ui.inverted.pink.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important;
+ color: @lightPink !important;
+}
+.ui.inverted.pink.basic.buttons .active.button,
+.ui.inverted.pink.buttons .basic.active.button,
+.ui.inverted.pink.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important;
+ color: @lightPink !important;
+}
+.ui.inverted.pink.basic.buttons .button:active,
+.ui.inverted.pink.buttons .basic.button:active,
+.ui.inverted.pink.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;
+ color: @lightPink !important;
+}
+
+
+/*--- Violet ---*/
+.ui.violet.buttons .button,
+.ui.violet.button {
+ background-color: @violet;
+ color: @violetTextColor;
+ text-shadow: @violetTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.violet.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.violet.buttons .button:hover,
+.ui.violet.button:hover {
+ background-color: @violetHover;
+ color: @violetTextColor;
+ text-shadow: @violetTextShadow;
+}
+.ui.violet.buttons .button:focus,
+.ui.violet.button:focus {
+ background-color: @violetFocus;
+ color: @violetTextColor;
+ text-shadow: @violetTextShadow;
+}
+.ui.violet.buttons .button:active,
+.ui.violet.button:active {
+ background-color: @violetDown;
+ color: @violetTextColor;
+ text-shadow: @violetTextShadow;
+}
+.ui.violet.buttons .active.button,
+.ui.violet.buttons .active.button:active,
+.ui.violet.active.button,
+.ui.violet.button .active.button:active {
+ background-color: @violetActive;
+ color: @violetTextColor;
+ text-shadow: @violetTextShadow;
+}
+
+/* Basic */
+.ui.basic.violet.buttons .button,
+.ui.basic.violet.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;
+ color: @violet !important;
+}
+.ui.basic.violet.buttons .button:hover,
+.ui.basic.violet.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important;
+ color: @violetHover !important;
+}
+.ui.basic.violet.buttons .button:focus,
+.ui.basic.violet.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;
+ color: @violetHover !important;
+}
+.ui.basic.violet.buttons .active.button,
+.ui.basic.violet.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important;
+ color: @violetDown !important;
+}
+.ui.basic.violet.buttons .button:active,
+.ui.basic.violet.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important;
+ color: @violetDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.violet.buttons .button,
+.ui.inverted.violet.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important;
+ color: @lightViolet;
+}
+.ui.inverted.violet.buttons .button:hover,
+.ui.inverted.violet.button:hover,
+.ui.inverted.violet.buttons .button:focus,
+.ui.inverted.violet.button:focus,
+.ui.inverted.violet.buttons .button.active,
+.ui.inverted.violet.button.active,
+.ui.inverted.violet.buttons .button:active,
+.ui.inverted.violet.button:active {
+ box-shadow: none !important;
+ color: @lightVioletTextColor;
+}
+.ui.inverted.violet.buttons .button:hover,
+.ui.inverted.violet.button:hover {
+ background-color: @lightVioletHover;
+}
+.ui.inverted.violet.buttons .button:focus,
+.ui.inverted.violet.button:focus {
+ background-color: @lightVioletFocus;
+}
+.ui.inverted.violet.buttons .active.button,
+.ui.inverted.violet.active.button {
+ background-color: @lightVioletActive;
+}
+.ui.inverted.violet.buttons .button:active,
+.ui.inverted.violet.button:active {
+ background-color: @lightVioletDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.violet.basic.buttons .button,
+.ui.inverted.violet.buttons .basic.button,
+.ui.inverted.violet.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.violet.basic.buttons .button:hover,
+.ui.inverted.violet.buttons .basic.button:hover,
+.ui.inverted.violet.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important;
+ color: @lightViolet !important;
+}
+.ui.inverted.violet.basic.buttons .button:focus,
+.ui.inverted.violet.basic.buttons .button:focus,
+.ui.inverted.violet.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important;
+ color: @lightViolet !important;
+}
+.ui.inverted.violet.basic.buttons .active.button,
+.ui.inverted.violet.buttons .basic.active.button,
+.ui.inverted.violet.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important;
+ color: @lightViolet !important;
+}
+.ui.inverted.violet.basic.buttons .button:active,
+.ui.inverted.violet.buttons .basic.button:active,
+.ui.inverted.violet.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important;
+ color: @lightViolet !important;
+}
+
+/*--- Purple ---*/
+.ui.purple.buttons .button,
+.ui.purple.button {
+ background-color: @purple;
+ color: @purpleTextColor;
+ text-shadow: @purpleTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.purple.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.purple.buttons .button:hover,
+.ui.purple.button:hover {
+ background-color: @purpleHover;
+ color: @purpleTextColor;
+ text-shadow: @purpleTextShadow;
+}
+.ui.purple.buttons .button:focus,
+.ui.purple.button:focus {
+ background-color: @purpleFocus;
+ color: @purpleTextColor;
+ text-shadow: @purpleTextShadow;
+}
+.ui.purple.buttons .button:active,
+.ui.purple.button:active {
+ background-color: @purpleDown;
+ color: @purpleTextColor;
+ text-shadow: @purpleTextShadow;
+}
+.ui.purple.buttons .active.button,
+.ui.purple.buttons .active.button:active,
+.ui.purple.active.button,
+.ui.purple.button .active.button:active {
+ background-color: @purpleActive;
+ color: @purpleTextColor;
+ text-shadow: @purpleTextShadow;
+}
+
+/* Basic */
+.ui.basic.purple.buttons .button,
+.ui.basic.purple.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;
+ color: @purple !important;
+}
+.ui.basic.purple.buttons .button:hover,
+.ui.basic.purple.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;
+ color: @purpleHover !important;
+}
+.ui.basic.purple.buttons .button:focus,
+.ui.basic.purple.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;
+ color: @purpleHover !important;
+}
+.ui.basic.purple.buttons .active.button,
+.ui.basic.purple.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important;
+ color: @purpleDown !important;
+}
+.ui.basic.purple.buttons .button:active,
+.ui.basic.purple.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;
+ color: @purpleDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.purple.buttons .button,
+.ui.inverted.purple.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;
+ color: @lightPurple;
+}
+.ui.inverted.purple.buttons .button:hover,
+.ui.inverted.purple.button:hover,
+.ui.inverted.purple.buttons .button:focus,
+.ui.inverted.purple.button:focus,
+.ui.inverted.purple.buttons .button.active,
+.ui.inverted.purple.button.active,
+.ui.inverted.purple.buttons .button:active,
+.ui.inverted.purple.button:active {
+ box-shadow: none !important;
+ color: @lightPurpleTextColor;
+}
+.ui.inverted.purple.buttons .button:hover,
+.ui.inverted.purple.button:hover {
+ background-color: @lightPurpleHover;
+}
+.ui.inverted.purple.buttons .button:focus,
+.ui.inverted.purple.button:focus {
+ background-color: @lightPurpleFocus;
+}
+.ui.inverted.purple.buttons .active.button,
+.ui.inverted.purple.active.button {
+ background-color: @lightPurpleActive;
+}
+.ui.inverted.purple.buttons .button:active,
+.ui.inverted.purple.button:active {
+ background-color: @lightPurpleDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.purple.basic.buttons .button,
+.ui.inverted.purple.buttons .basic.button,
+.ui.inverted.purple.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.purple.basic.buttons .button:hover,
+.ui.inverted.purple.buttons .basic.button:hover,
+.ui.inverted.purple.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important;
+ color: @lightPurple !important;
+}
+.ui.inverted.purple.basic.buttons .button:focus,
+.ui.inverted.purple.basic.buttons .button:focus,
+.ui.inverted.purple.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important;
+ color: @lightPurple !important;
+}
+.ui.inverted.purple.basic.buttons .active.button,
+.ui.inverted.purple.buttons .basic.active.button,
+.ui.inverted.purple.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important;
+ color: @lightPurple !important;
+}
+.ui.inverted.purple.basic.buttons .button:active,
+.ui.inverted.purple.buttons .basic.button:active,
+.ui.inverted.purple.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;
+ color: @lightPurple !important;
+}
+
+/*--- Red ---*/
+.ui.red.buttons .button,
+.ui.red.button {
+ background-color: @red;
+ color: @redTextColor;
+ text-shadow: @redTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.red.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.red.buttons .button:hover,
+.ui.red.button:hover {
+ background-color: @redHover;
+ color: @redTextColor;
+ text-shadow: @redTextShadow;
+}
+.ui.red.buttons .button:focus,
+.ui.red.button:focus {
+ background-color: @redFocus;
+ color: @redTextColor;
+ text-shadow: @redTextShadow;
+}
+.ui.red.buttons .button:active,
+.ui.red.button:active {
+ background-color: @redDown;
+ color: @redTextColor;
+ text-shadow: @redTextShadow;
+}
+.ui.red.buttons .active.button,
+.ui.red.buttons .active.button:active,
+.ui.red.active.button,
+.ui.red.button .active.button:active {
+ background-color: @redActive;
+ color: @redTextColor;
+ text-shadow: @redTextShadow;
+}
+
+/* Basic */
+.ui.basic.red.buttons .button,
+.ui.basic.red.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;
+ color: @red !important;
+}
+.ui.basic.red.buttons .button:hover,
+.ui.basic.red.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;
+ color: @redHover !important;
+}
+.ui.basic.red.buttons .button:focus,
+.ui.basic.red.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;
+ color: @redHover !important;
+}
+.ui.basic.red.buttons .active.button,
+.ui.basic.red.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important;
+ color: @redDown !important;
+}
+.ui.basic.red.buttons .button:active,
+.ui.basic.red.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;
+ color: @redDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.red.buttons .button,
+.ui.inverted.red.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;
+ color: @lightRed;
+}
+.ui.inverted.red.buttons .button:hover,
+.ui.inverted.red.button:hover,
+.ui.inverted.red.buttons .button:focus,
+.ui.inverted.red.button:focus,
+.ui.inverted.red.buttons .button.active,
+.ui.inverted.red.button.active,
+.ui.inverted.red.buttons .button:active,
+.ui.inverted.red.button:active {
+ box-shadow: none !important;
+ color: @lightRedTextColor;
+}
+.ui.inverted.red.buttons .button:hover,
+.ui.inverted.red.button:hover {
+ background-color: @lightRedHover;
+}
+.ui.inverted.red.buttons .button:focus,
+.ui.inverted.red.button:focus {
+ background-color: @lightRedFocus;
+}
+.ui.inverted.red.buttons .active.button,
+.ui.inverted.red.active.button {
+ background-color: @lightRedActive;
+}
+.ui.inverted.red.buttons .button:active,
+.ui.inverted.red.button:active {
+ background-color: @lightRedDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.red.basic.buttons .button,
+.ui.inverted.red.buttons .basic.button,
+.ui.inverted.red.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.red.basic.buttons .button:hover,
+.ui.inverted.red.buttons .basic.button:hover,
+.ui.inverted.red.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important;
+ color: @lightRed !important;
+}
+.ui.inverted.red.basic.buttons .button:focus,
+.ui.inverted.red.basic.buttons .button:focus,
+.ui.inverted.red.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important;
+ color: @lightRed !important;
+}
+.ui.inverted.red.basic.buttons .active.button,
+.ui.inverted.red.buttons .basic.active.button,
+.ui.inverted.red.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important;
+ color: @lightRed !important;
+}
+.ui.inverted.red.basic.buttons .button:active,
+.ui.inverted.red.buttons .basic.button:active,
+.ui.inverted.red.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;
+ color: @lightRed !important;
+}
+
+
+/*--- Teal ---*/
+.ui.teal.buttons .button,
+.ui.teal.button {
+ background-color: @teal;
+ color: @tealTextColor;
+ text-shadow: @tealTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.teal.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.teal.buttons .button:hover,
+.ui.teal.button:hover {
+ background-color: @tealHover;
+ color: @tealTextColor;
+ text-shadow: @tealTextShadow;
+}
+.ui.teal.buttons .button:focus,
+.ui.teal.button:focus {
+ background-color: @tealFocus;
+ color: @tealTextColor;
+ text-shadow: @tealTextShadow;
+}
+.ui.teal.buttons .button:active,
+.ui.teal.button:active {
+ background-color: @tealDown;
+ color: @tealTextColor;
+ text-shadow: @tealTextShadow;
+}
+.ui.teal.buttons .active.button,
+.ui.teal.buttons .active.button:active,
+.ui.teal.active.button,
+.ui.teal.button .active.button:active {
+ background-color: @tealActive;
+ color: @tealTextColor;
+ text-shadow: @tealTextShadow;
+}
+
+/* Basic */
+.ui.basic.teal.buttons .button,
+.ui.basic.teal.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;
+ color: @teal !important;
+}
+.ui.basic.teal.buttons .button:hover,
+.ui.basic.teal.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;
+ color: @tealHover !important;
+}
+.ui.basic.teal.buttons .button:focus,
+.ui.basic.teal.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;
+ color: @tealHover !important;
+}
+.ui.basic.teal.buttons .active.button,
+.ui.basic.teal.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important;
+ color: @tealDown !important;
+}
+.ui.basic.teal.buttons .button:active,
+.ui.basic.teal.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;
+ color: @tealDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.teal.buttons .button,
+.ui.inverted.teal.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;
+ color: @lightTeal;
+}
+.ui.inverted.teal.buttons .button:hover,
+.ui.inverted.teal.button:hover,
+.ui.inverted.teal.buttons .button:focus,
+.ui.inverted.teal.button:focus,
+.ui.inverted.teal.buttons .button.active,
+.ui.inverted.teal.button.active,
+.ui.inverted.teal.buttons .button:active,
+.ui.inverted.teal.button:active {
+ box-shadow: none !important;
+ color: @lightTealTextColor;
+}
+.ui.inverted.teal.buttons .button:hover,
+.ui.inverted.teal.button:hover {
+ background-color: @lightTealHover;
+}
+.ui.inverted.teal.buttons .button:focus,
+.ui.inverted.teal.button:focus {
+ background-color: @lightTealFocus;
+}
+.ui.inverted.teal.buttons .active.button,
+.ui.inverted.teal.active.button {
+ background-color: @lightTealActive;
+}
+.ui.inverted.teal.buttons .button:active,
+.ui.inverted.teal.button:active {
+ background-color: @lightTealDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.teal.basic.buttons .button,
+.ui.inverted.teal.buttons .basic.button,
+.ui.inverted.teal.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.teal.basic.buttons .button:hover,
+.ui.inverted.teal.buttons .basic.button:hover,
+.ui.inverted.teal.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important;
+ color: @lightTeal !important;
+}
+.ui.inverted.teal.basic.buttons .button:focus,
+.ui.inverted.teal.basic.buttons .button:focus,
+.ui.inverted.teal.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important;
+ color: @lightTeal !important;
+}
+.ui.inverted.teal.basic.buttons .active.button,
+.ui.inverted.teal.buttons .basic.active.button,
+.ui.inverted.teal.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important;
+ color: @lightTeal !important;
+}
+.ui.inverted.teal.basic.buttons .button:active,
+.ui.inverted.teal.buttons .basic.button:active,
+.ui.inverted.teal.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;
+ color: @lightTeal !important;
+}
+
+
+/*--- Olive ---*/
+.ui.olive.buttons .button,
+.ui.olive.button {
+ background-color: @olive;
+ color: @oliveTextColor;
+ text-shadow: @oliveTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.olive.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.olive.buttons .button:hover,
+.ui.olive.button:hover {
+ background-color: @oliveHover;
+ color: @oliveTextColor;
+ text-shadow: @oliveTextShadow;
+}
+.ui.olive.buttons .button:focus,
+.ui.olive.button:focus {
+ background-color: @oliveFocus;
+ color: @oliveTextColor;
+ text-shadow: @oliveTextShadow;
+}
+.ui.olive.buttons .button:active,
+.ui.olive.button:active {
+ background-color: @oliveDown;
+ color: @oliveTextColor;
+ text-shadow: @oliveTextShadow;
+}
+.ui.olive.buttons .active.button,
+.ui.olive.buttons .active.button:active,
+.ui.olive.active.button,
+.ui.olive.button .active.button:active {
+ background-color: @oliveActive;
+ color: @oliveTextColor;
+ text-shadow: @oliveTextShadow;
+}
+
+/* Basic */
+.ui.basic.olive.buttons .button,
+.ui.basic.olive.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;
+ color: @olive !important;
+}
+.ui.basic.olive.buttons .button:hover,
+.ui.basic.olive.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important;
+ color: @oliveHover !important;
+}
+.ui.basic.olive.buttons .button:focus,
+.ui.basic.olive.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;
+ color: @oliveHover !important;
+}
+.ui.basic.olive.buttons .active.button,
+.ui.basic.olive.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important;
+ color: @oliveDown !important;
+}
+.ui.basic.olive.buttons .button:active,
+.ui.basic.olive.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important;
+ color: @oliveDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.olive.buttons .button,
+.ui.inverted.olive.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important;
+ color: @lightOlive;
+}
+.ui.inverted.olive.buttons .button:hover,
+.ui.inverted.olive.button:hover,
+.ui.inverted.olive.buttons .button:focus,
+.ui.inverted.olive.button:focus,
+.ui.inverted.olive.buttons .button.active,
+.ui.inverted.olive.button.active,
+.ui.inverted.olive.buttons .button:active,
+.ui.inverted.olive.button:active {
+ box-shadow: none !important;
+ color: @lightOliveTextColor;
+}
+.ui.inverted.olive.buttons .button:hover,
+.ui.inverted.olive.button:hover {
+ background-color: @lightOliveHover;
+}
+.ui.inverted.olive.buttons .button:focus,
+.ui.inverted.olive.button:focus {
+ background-color: @lightOliveFocus;
+}
+.ui.inverted.olive.buttons .active.button,
+.ui.inverted.olive.active.button {
+ background-color: @lightOliveActive;
+}
+.ui.inverted.olive.buttons .button:active,
+.ui.inverted.olive.button:active {
+ background-color: @lightOliveDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.olive.basic.buttons .button,
+.ui.inverted.olive.buttons .basic.button,
+.ui.inverted.olive.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.olive.basic.buttons .button:hover,
+.ui.inverted.olive.buttons .basic.button:hover,
+.ui.inverted.olive.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important;
+ color: @lightOlive !important;
+}
+.ui.inverted.olive.basic.buttons .button:focus,
+.ui.inverted.olive.basic.buttons .button:focus,
+.ui.inverted.olive.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important;
+ color: @lightOlive !important;
+}
+.ui.inverted.olive.basic.buttons .active.button,
+.ui.inverted.olive.buttons .basic.active.button,
+.ui.inverted.olive.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important;
+ color: @lightOlive !important;
+}
+.ui.inverted.olive.basic.buttons .button:active,
+.ui.inverted.olive.buttons .basic.button:active,
+.ui.inverted.olive.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important;
+ color: @lightOlive !important;
+}
+
+/*--- Yellow ---*/
+.ui.yellow.buttons .button,
+.ui.yellow.button {
+ background-color: @yellow;
+ color: @yellowTextColor;
+ text-shadow: @yellowTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.yellow.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.yellow.buttons .button:hover,
+.ui.yellow.button:hover {
+ background-color: @yellowHover;
+ color: @yellowTextColor;
+ text-shadow: @yellowTextShadow;
+}
+.ui.yellow.buttons .button:focus,
+.ui.yellow.button:focus {
+ background-color: @yellowFocus;
+ color: @yellowTextColor;
+ text-shadow: @yellowTextShadow;
+}
+.ui.yellow.buttons .button:active,
+.ui.yellow.button:active {
+ background-color: @yellowDown;
+ color: @yellowTextColor;
+ text-shadow: @yellowTextShadow;
+}
+.ui.yellow.buttons .active.button,
+.ui.yellow.buttons .active.button:active,
+.ui.yellow.active.button,
+.ui.yellow.button .active.button:active {
+ background-color: @yellowActive;
+ color: @yellowTextColor;
+ text-shadow: @yellowTextShadow;
+}
+
+/* Basic */
+.ui.basic.yellow.buttons .button,
+.ui.basic.yellow.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;
+ color: @yellow !important;
+}
+.ui.basic.yellow.buttons .button:hover,
+.ui.basic.yellow.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;
+ color: @yellowHover !important;
+}
+.ui.basic.yellow.buttons .button:focus,
+.ui.basic.yellow.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;
+ color: @yellowHover !important;
+}
+.ui.basic.yellow.buttons .active.button,
+.ui.basic.yellow.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important;
+ color: @yellowDown !important;
+}
+.ui.basic.yellow.buttons .button:active,
+.ui.basic.yellow.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;
+ color: @yellowDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/* Inverted */
+.ui.inverted.yellow.buttons .button,
+.ui.inverted.yellow.button {
+ background-color: transparent;
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;
+ color: @lightYellow;
+}
+.ui.inverted.yellow.buttons .button:hover,
+.ui.inverted.yellow.button:hover,
+.ui.inverted.yellow.buttons .button:focus,
+.ui.inverted.yellow.button:focus,
+.ui.inverted.yellow.buttons .button.active,
+.ui.inverted.yellow.button.active,
+.ui.inverted.yellow.buttons .button:active,
+.ui.inverted.yellow.button:active {
+ box-shadow: none !important;
+ color: @lightYellowTextColor;
+}
+.ui.inverted.yellow.buttons .button:hover,
+.ui.inverted.yellow.button:hover {
+ background-color: @lightYellowHover;
+}
+.ui.inverted.yellow.buttons .button:focus,
+.ui.inverted.yellow.button:focus {
+ background-color: @lightYellowFocus;
+}
+.ui.inverted.yellow.buttons .active.button,
+.ui.inverted.yellow.active.button {
+ background-color: @lightYellowActive;
+}
+.ui.inverted.yellow.buttons .button:active,
+.ui.inverted.yellow.button:active {
+ background-color: @lightYellowDown;
+}
+
+/* Inverted Basic */
+.ui.inverted.yellow.basic.buttons .button,
+.ui.inverted.yellow.buttons .basic.button,
+.ui.inverted.yellow.basic.button {
+ background-color: transparent;
+ box-shadow: @basicInvertedBoxShadow !important;
+ color: @white !important;
+}
+.ui.inverted.yellow.basic.buttons .button:hover,
+.ui.inverted.yellow.buttons .basic.button:hover,
+.ui.inverted.yellow.basic.button:hover {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important;
+ color: @lightYellow !important;
+}
+.ui.inverted.yellow.basic.buttons .button:focus,
+.ui.inverted.yellow.basic.buttons .button:focus,
+.ui.inverted.yellow.basic.button:focus {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important;
+ color: @lightYellow !important;
+}
+.ui.inverted.yellow.basic.buttons .active.button,
+.ui.inverted.yellow.buttons .basic.active.button,
+.ui.inverted.yellow.basic.active.button {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important;
+ color: @lightYellow !important;
+}
+.ui.inverted.yellow.basic.buttons .button:active,
+.ui.inverted.yellow.buttons .basic.button:active,
+.ui.inverted.yellow.basic.button:active {
+ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;
+ color: @lightYellow !important;
+}
+
+
+/*-------------------
+ Primary
+--------------------*/
+
+/*--- Standard ---*/
+.ui.primary.buttons .button,
+.ui.primary.button {
+ background-color: @primaryColor;
+ color: @primaryTextColor;
+ text-shadow: @primaryTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.primary.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.primary.buttons .button:hover,
+.ui.primary.button:hover {
+ background-color: @primaryColorHover;
+ color: @primaryTextColor;
+ text-shadow: @primaryTextShadow;
+}
+.ui.primary.buttons .button:focus,
+.ui.primary.button:focus {
+ background-color: @primaryColorFocus;
+ color: @primaryTextColor;
+ text-shadow: @primaryTextShadow;
+}
+.ui.primary.buttons .button:active,
+.ui.primary.button:active {
+ background-color: @primaryColorDown;
+ color: @primaryTextColor;
+ text-shadow: @primaryTextShadow;
+}
+.ui.primary.buttons .active.button,
+.ui.primary.buttons .active.button:active,
+.ui.primary.active.button,
+.ui.primary.button .active.button:active {
+ background-color: @primaryColorActive;
+ color: @primaryTextColor;
+ text-shadow: @primaryTextShadow;
+}
+
+/* Basic */
+.ui.basic.primary.buttons .button,
+.ui.basic.primary.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important;
+ color: @primaryColor !important;
+}
+.ui.basic.primary.buttons .button:hover,
+.ui.basic.primary.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important;
+ color: @primaryColorHover !important;
+}
+.ui.basic.primary.buttons .button:focus,
+.ui.basic.primary.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important;
+ color: @primaryColorHover !important;
+}
+.ui.basic.primary.buttons .active.button,
+.ui.basic.primary.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important;
+ color: @primaryColorDown !important;
+}
+.ui.basic.primary.buttons .button:active,
+.ui.basic.primary.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important;
+ color: @primaryColorDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/*-------------------
+ Secondary
+--------------------*/
+
+/* Standard */
+.ui.secondary.buttons .button,
+.ui.secondary.button {
+ background-color: @secondaryColor;
+ color: @secondaryTextColor;
+ text-shadow: @secondaryTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.secondary.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.secondary.buttons .button:hover,
+.ui.secondary.button:hover {
+ background-color: @secondaryColorHover;
+ color: @secondaryTextColor;
+ text-shadow: @secondaryTextShadow;
+}
+.ui.secondary.buttons .button:focus,
+.ui.secondary.button:focus {
+ background-color: @secondaryColorFocus;
+ color: @secondaryTextColor;
+ text-shadow: @secondaryTextShadow;
+}
+.ui.secondary.buttons .button:active,
+.ui.secondary.button:active {
+ background-color: @secondaryColorDown;
+ color: @secondaryTextColor;
+ text-shadow: @secondaryTextShadow;
+}
+.ui.secondary.buttons .active.button,
+.ui.secondary.buttons .active.button:active,
+.ui.secondary.active.button,
+.ui.secondary.button .active.button:active {
+ background-color: @secondaryColorActive;
+ color: @secondaryTextColor;
+ text-shadow: @secondaryTextShadow;
+}
+
+/* Basic */
+.ui.basic.secondary.buttons .button,
+.ui.basic.secondary.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important;
+ color: @secondaryColor !important;
+}
+.ui.basic.secondary.buttons .button:hover,
+.ui.basic.secondary.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important;
+ color: @secondaryColorHover !important;
+}
+.ui.basic.secondary.buttons .button:focus,
+.ui.basic.secondary.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important;
+ color: @secondaryColorHover !important;
+}
+.ui.basic.secondary.buttons .active.button,
+.ui.basic.secondary.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important;
+ color: @secondaryColorDown !important;
+}
+.ui.basic.secondary.buttons .button:active,
+.ui.basic.secondary.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important;
+ color: @secondaryColorDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/*---------------
+ Positive
+----------------*/
+
+/* Standard */
+.ui.positive.buttons .button,
+.ui.positive.button {
+ background-color: @positiveColor;
+ color: @positiveTextColor;
+ text-shadow: @positiveTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.positive.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.positive.buttons .button:hover,
+.ui.positive.button:hover {
+ background-color: @positiveColorHover;
+ color: @positiveTextColor;
+ text-shadow: @positiveTextShadow;
+}
+.ui.positive.buttons .button:focus,
+.ui.positive.button:focus {
+ background-color: @positiveColorFocus;
+ color: @positiveTextColor;
+ text-shadow: @positiveTextShadow;
+}
+.ui.positive.buttons .button:active,
+.ui.positive.button:active {
+ background-color: @positiveColorDown;
+ color: @positiveTextColor;
+ text-shadow: @positiveTextShadow;
+}
+.ui.positive.buttons .active.button,
+.ui.positive.buttons .active.button:active,
+.ui.positive.active.button,
+.ui.positive.button .active.button:active {
+ background-color: @positiveColorActive;
+ color: @positiveTextColor;
+ text-shadow: @positiveTextShadow;
+}
+
+/* Basic */
+.ui.basic.positive.buttons .button,
+.ui.basic.positive.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important;
+ color: @positiveColor !important;
+}
+.ui.basic.positive.buttons .button:hover,
+.ui.basic.positive.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important;
+ color: @positiveColorHover !important;
+}
+.ui.basic.positive.buttons .button:focus,
+.ui.basic.positive.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important;
+ color: @positiveColorHover !important;
+}
+.ui.basic.positive.buttons .active.button,
+.ui.basic.positive.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important;
+ color: @positiveColorDown !important;
+}
+.ui.basic.positive.buttons .button:active,
+.ui.basic.positive.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important;
+ color: @positiveColorDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/*---------------
+ Negative
+----------------*/
+
+/* Standard */
+.ui.negative.buttons .button,
+.ui.negative.button {
+ background-color: @negativeColor;
+ color: @negativeTextColor;
+ text-shadow: @negativeTextShadow;
+ background-image: @coloredBackgroundImage;
+}
+.ui.negative.button {
+ box-shadow: @coloredBoxShadow;
+}
+.ui.negative.buttons .button:hover,
+.ui.negative.button:hover {
+ background-color: @negativeColorHover;
+ color: @negativeTextColor;
+ text-shadow: @negativeTextShadow;
+}
+.ui.negative.buttons .button:focus,
+.ui.negative.button:focus {
+ background-color: @negativeColorFocus;
+ color: @negativeTextColor;
+ text-shadow: @negativeTextShadow;
+}
+.ui.negative.buttons .button:active,
+.ui.negative.button:active {
+ background-color: @negativeColorDown;
+ color: @negativeTextColor;
+ text-shadow: @negativeTextShadow;
+}
+.ui.negative.buttons .active.button,
+.ui.negative.buttons .active.button:active,
+.ui.negative.active.button,
+.ui.negative.button .active.button:active {
+ background-color: @negativeColorActive;
+ color: @negativeTextColor;
+ text-shadow: @negativeTextShadow;
+}
+
+/* Basic */
+.ui.basic.negative.buttons .button,
+.ui.basic.negative.button {
+ box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important;
+ color: @negativeColor !important;
+}
+.ui.basic.negative.buttons .button:hover,
+.ui.basic.negative.button:hover {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important;
+ color: @negativeColorHover !important;
+}
+.ui.basic.negative.buttons .button:focus,
+.ui.basic.negative.button:focus {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important;
+ color: @negativeColorHover !important;
+}
+.ui.basic.negative.buttons .active.button,
+.ui.basic.negative.active.button {
+ background: transparent !important;
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important;
+ color: @negativeColorDown !important;
+}
+.ui.basic.negative.buttons .button:active,
+.ui.basic.negative.button:active {
+ box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important;
+ color: @negativeColorDown !important;
+}
+.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
+ margin-left: -@basicColoredBorderSize;
+}
+
+/*******************************
+ Groups
+*******************************/
+
+.ui.buttons {
+ display: inline-flex;
+ flex-direction: row;
+ font-size: 0em;
+ vertical-align: baseline;
+ margin: @verticalMargin @horizontalMargin 0em 0em;
+}
+.ui.buttons:not(.basic):not(.inverted) {
+ box-shadow: @groupBoxShadow;
+}
+
+/* Clearfix */
+.ui.buttons:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+/* Standard Group */
+.ui.buttons .button {
+ flex: 1 0 auto;
+ margin: 0em;
+ border-radius: 0em;
+ margin: @groupButtonOffset;
+}
+.ui.buttons > .ui.button:not(.basic):not(.inverted),
+.ui.buttons:not(.basic):not(.inverted) > .button {
+ box-shadow: @groupButtonBoxShadow;
+}
+
+.ui.buttons .button:first-child {
+ border-left: none;
+ margin-left: 0em;
+ border-top-left-radius: @borderRadius;
+ border-bottom-left-radius: @borderRadius;
+}
+.ui.buttons .button:last-child {
+ border-top-right-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+}
+
+/* Vertical Style */
+.ui.vertical.buttons {
+ display: inline-flex;
+ flex-direction: column;
+}
+.ui.vertical.buttons .button {
+ display: block;
+ float: none;
+ width: 100%;
+ margin: @verticalGroupOffset;
+ box-shadow: @verticalBoxShadow;
+ border-radius: 0em;
+}
+.ui.vertical.buttons .button:first-child {
+ border-top-left-radius: @borderRadius;
+ border-top-right-radius: @borderRadius;
+}
+.ui.vertical.buttons .button:last-child {
+ margin-bottom: 0px;
+ border-bottom-left-radius: @borderRadius;
+ border-bottom-right-radius: @borderRadius;
+}
+.ui.vertical.buttons .button:only-child {
+ border-radius: @borderRadius;
+}
+
+.loadUIOverrides();
+
diff --git a/semantic/src/definitions/elements/container.less b/semantic/src/definitions/elements/container.less
new file mode 100644
index 0000000..14b32f2
--- /dev/null
+++ b/