From cefc7a173ef3c28ea9f180bd31341f51ac018a51 Mon Sep 17 00:00:00 2001 From: Ashton Thomas Date: Sun, 28 Jan 2018 14:14:25 -0600 Subject: [PATCH] add the full semantic-ui package for styling # The below will hang on: semantic-ui: Starting run setup # https://github.com/yarnpkg/yarn/issues/976#issuecomment-328330324 yarn add semantic-ui --dev # Kill the setup # copy node_modules/semantic-ui/semantic.json.example > root/semantic.ui (and set autoInstall to true) cp node_modules/semantic-ui/semantic.json.example semantic.json # now set autoInstall to true and re-run yarn yarn add semantic-ui --dev # I'm not sure, but you may want to add dist/ to .gitignore # This may require others to run gulp build for the semantic ui assets # but may keep commits cleaner in the future (I dunno?) # import css in your component: app/jacascript/packs/hello_react.jsx # See readme for code that goes in here # ALSO INCLUDE THE stylesheet_pack_tag with the same component name # in the view: app/views/site/signup.html.erb # (this wasted a lot of my time) # see Readme for code that goes in here # reloading the app should apply the semantic-ui styling --- .gitignore | 2 + app/javascript/packs/hello_react.jsx | 2 + app/views/site/signup.html.erb | 1 + gulpfile.js | 72 + package.json | 1 + semantic.json | 22 + src/definitions/behaviors/api.js | 1167 +++++ src/definitions/behaviors/colorize.js | 280 ++ src/definitions/behaviors/form.js | 1706 ++++++++ src/definitions/behaviors/state.js | 708 +++ src/definitions/behaviors/visibility.js | 1311 ++++++ src/definitions/behaviors/visit.js | 525 +++ src/definitions/collections/breadcrumb.less | 122 + src/definitions/collections/form.less | 1053 +++++ src/definitions/collections/grid.less | 1920 ++++++++ src/definitions/collections/menu.less | 1972 +++++++++ src/definitions/collections/message.less | 481 ++ src/definitions/collections/table.less | 1114 +++++ src/definitions/elements/button.less | 3426 +++++++++++++++ src/definitions/elements/container.less | 143 + src/definitions/elements/divider.less | 255 ++ src/definitions/elements/flag.less | 52 + src/definitions/elements/header.less | 708 +++ src/definitions/elements/icon.less | 501 +++ src/definitions/elements/image.less | 324 ++ src/definitions/elements/input.less | 508 +++ src/definitions/elements/label.less | 1257 ++++++ src/definitions/elements/list.less | 951 ++++ src/definitions/elements/loader.less | 332 ++ src/definitions/elements/rail.less | 154 + src/definitions/elements/reveal.less | 265 ++ src/definitions/elements/segment.less | 775 ++++ src/definitions/elements/step.less | 562 +++ src/definitions/globals/reset.less | 40 + src/definitions/globals/site.js | 487 +++ src/definitions/globals/site.less | 207 + src/definitions/modules/accordion.js | 610 +++ src/definitions/modules/accordion.less | 219 + src/definitions/modules/checkbox.js | 831 ++++ src/definitions/modules/checkbox.less | 598 +++ src/definitions/modules/dimmer.js | 708 +++ src/definitions/modules/dimmer.less | 206 + src/definitions/modules/dropdown.js | 3879 +++++++++++++++++ src/definitions/modules/dropdown.less | 1410 ++++++ src/definitions/modules/embed.js | 696 +++ src/definitions/modules/embed.less | 163 + src/definitions/modules/modal.js | 967 ++++ src/definitions/modules/modal.less | 571 +++ src/definitions/modules/nag.js | 507 +++ src/definitions/modules/nag.less | 158 + src/definitions/modules/popup.js | 1486 +++++++ src/definitions/modules/popup.less | 712 +++ src/definitions/modules/progress.js | 931 ++++ src/definitions/modules/progress.less | 503 +++ src/definitions/modules/rating.js | 508 +++ src/definitions/modules/rating.less | 191 + src/definitions/modules/search.js | 1451 ++++++ src/definitions/modules/search.less | 417 ++ src/definitions/modules/shape.js | 921 ++++ src/definitions/modules/shape.less | 150 + src/definitions/modules/sidebar.js | 1033 +++++ src/definitions/modules/sidebar.less | 538 +++ src/definitions/modules/sticky.js | 959 ++++ src/definitions/modules/sticky.less | 74 + src/definitions/modules/tab.js | 952 ++++ src/definitions/modules/tab.less | 94 + src/definitions/modules/transition.js | 1095 +++++ src/definitions/modules/transition.less | 78 + src/definitions/views/ad.less | 268 ++ src/definitions/views/card.less | 1059 +++++ src/definitions/views/comment.less | 269 ++ src/definitions/views/feed.less | 278 ++ src/definitions/views/item.less | 474 ++ src/definitions/views/statistic.less | 557 +++ src/semantic.less | 66 + src/site/collections/breadcrumb.overrides | 3 + src/site/collections/breadcrumb.variables | 3 + src/site/collections/form.overrides | 3 + src/site/collections/form.variables | 3 + src/site/collections/grid.overrides | 3 + src/site/collections/grid.variables | 3 + src/site/collections/menu.overrides | 3 + src/site/collections/menu.variables | 3 + src/site/collections/message.overrides | 3 + src/site/collections/message.variables | 3 + src/site/collections/table.overrides | 3 + src/site/collections/table.variables | 3 + src/site/elements/button.overrides | 3 + src/site/elements/button.variables | 3 + src/site/elements/container.overrides | 3 + src/site/elements/container.variables | 3 + src/site/elements/divider.overrides | 3 + src/site/elements/divider.variables | 3 + src/site/elements/flag.overrides | 3 + src/site/elements/flag.variables | 3 + src/site/elements/header.overrides | 3 + src/site/elements/header.variables | 3 + src/site/elements/icon.overrides | 3 + src/site/elements/icon.variables | 3 + src/site/elements/image.overrides | 3 + src/site/elements/image.variables | 3 + src/site/elements/input.overrides | 3 + src/site/elements/input.variables | 3 + src/site/elements/label.overrides | 3 + src/site/elements/label.variables | 3 + src/site/elements/list.overrides | 3 + src/site/elements/list.variables | 3 + src/site/elements/loader.overrides | 3 + src/site/elements/loader.variables | 3 + src/site/elements/rail.overrides | 3 + src/site/elements/rail.variables | 3 + src/site/elements/reveal.overrides | 3 + src/site/elements/reveal.variables | 3 + src/site/elements/segment.overrides | 3 + src/site/elements/segment.variables | 3 + src/site/elements/step.overrides | 3 + src/site/elements/step.variables | 3 + src/site/globals/reset.overrides | 3 + src/site/globals/reset.variables | 3 + src/site/globals/site.overrides | 3 + src/site/globals/site.variables | 3 + src/site/modules/accordion.overrides | 3 + src/site/modules/accordion.variables | 3 + src/site/modules/chatroom.overrides | 3 + src/site/modules/chatroom.variables | 3 + src/site/modules/checkbox.overrides | 3 + src/site/modules/checkbox.variables | 3 + src/site/modules/dimmer.overrides | 3 + src/site/modules/dimmer.variables | 3 + src/site/modules/dropdown.overrides | 3 + src/site/modules/dropdown.variables | 3 + src/site/modules/embed.overrides | 3 + src/site/modules/embed.variables | 0 src/site/modules/modal.overrides | 3 + src/site/modules/modal.variables | 3 + src/site/modules/nag.overrides | 3 + src/site/modules/nag.variables | 3 + src/site/modules/popup.overrides | 3 + src/site/modules/popup.variables | 3 + src/site/modules/progress.overrides | 3 + src/site/modules/progress.variables | 3 + src/site/modules/rating.overrides | 3 + src/site/modules/rating.variables | 3 + src/site/modules/search.overrides | 3 + src/site/modules/search.variables | 3 + src/site/modules/shape.overrides | 3 + src/site/modules/shape.variables | 3 + src/site/modules/sidebar.overrides | 3 + src/site/modules/sidebar.variables | 3 + src/site/modules/sticky.overrides | 3 + src/site/modules/sticky.variables | 3 + src/site/modules/tab.overrides | 3 + src/site/modules/tab.variables | 3 + src/site/modules/transition.overrides | 3 + src/site/modules/transition.variables | 3 + src/site/views/ad.overrides | 3 + src/site/views/ad.variables | 3 + src/site/views/card.overrides | 3 + src/site/views/card.variables | 3 + src/site/views/comment.overrides | 3 + src/site/views/comment.variables | 3 + src/site/views/feed.overrides | 3 + src/site/views/feed.variables | 3 + src/site/views/item.overrides | 3 + src/site/views/item.variables | 3 + src/site/views/statistic.overrides | 3 + src/site/views/statistic.variables | 3 + src/theme.config | 92 + src/theme.less | 61 + src/themes/amazon/elements/button.overrides | 46 + src/themes/amazon/elements/button.variables | 58 + src/themes/amazon/globals/site.variables | 43 + src/themes/basic/assets/fonts/icons.eot | Bin 0 -> 40166 bytes src/themes/basic/assets/fonts/icons.svg | 450 ++ src/themes/basic/assets/fonts/icons.ttf | Bin 0 -> 39924 bytes src/themes/basic/assets/fonts/icons.woff | Bin 0 -> 24676 bytes src/themes/basic/collections/table.overrides | 4 + src/themes/basic/collections/table.variables | 11 + src/themes/basic/elements/button.overrides | 4 + src/themes/basic/elements/button.variables | 44 + src/themes/basic/elements/icon.overrides | 189 + src/themes/basic/elements/icon.variables | 12 + src/themes/basic/elements/step.overrides | 10 + src/themes/basic/elements/step.variables | 18 + src/themes/basic/globals/reset.overrides | 5 + src/themes/basic/globals/reset.variables | 3 + src/themes/basic/modules/progress.overrides | 3 + src/themes/basic/modules/progress.variables | 15 + src/themes/basic/views/card.overrides | 4 + src/themes/basic/views/card.variables | 35 + src/themes/bookish/elements/header.overrides | 15 + src/themes/bookish/elements/header.variables | 37 + .../bootstrap3/elements/button.overrides | 0 .../bootstrap3/elements/button.variables | 63 + src/themes/chubby/collections/form.overrides | 16 + src/themes/chubby/collections/form.variables | 9 + src/themes/chubby/collections/menu.overrides | 0 src/themes/chubby/collections/menu.variables | 40 + src/themes/chubby/elements/button.overrides | 21 + src/themes/chubby/elements/button.variables | 57 + src/themes/chubby/elements/header.overrides | 5 + src/themes/chubby/elements/header.variables | 21 + src/themes/chubby/modules/accordion.overrides | 7 + src/themes/chubby/modules/accordion.variables | 15 + src/themes/chubby/views/comment.overrides | 12 + src/themes/chubby/views/comment.variables | 46 + .../classic/collections/table.overrides | 3 + .../classic/collections/table.variables | 14 + src/themes/classic/elements/button.overrides | 3 + src/themes/classic/elements/button.variables | 96 + src/themes/classic/elements/header.overrides | 3 + src/themes/classic/elements/header.variables | 12 + src/themes/classic/modules/progress.overrides | 3 + src/themes/classic/modules/progress.variables | 9 + src/themes/classic/views/card.overrides | 98 + src/themes/classic/views/card.variables | 22 + src/themes/colored/modules/checkbox.overrides | 0 src/themes/colored/modules/checkbox.variables | 29 + src/themes/default/assets/fonts/icons.eot | Bin 0 -> 165742 bytes src/themes/default/assets/fonts/icons.svg | 2671 ++++++++++++ src/themes/default/assets/fonts/icons.ttf | Bin 0 -> 165548 bytes src/themes/default/assets/fonts/icons.woff | Bin 0 -> 98024 bytes src/themes/default/assets/fonts/icons.woff2 | Bin 0 -> 77160 bytes src/themes/default/assets/images/flags.png | Bin 0 -> 28123 bytes .../default/collections/breadcrumb.overrides | 3 + .../default/collections/breadcrumb.variables | 33 + src/themes/default/collections/form.overrides | 3 + src/themes/default/collections/form.variables | 195 + src/themes/default/collections/grid.overrides | 4 + src/themes/default/collections/grid.variables | 103 + src/themes/default/collections/menu.overrides | 3 + src/themes/default/collections/menu.variables | 458 ++ .../default/collections/message.overrides | 3 + .../default/collections/message.variables | 158 + .../default/collections/table.overrides | 0 .../default/collections/table.variables | 246 ++ src/themes/default/elements/button.overrides | 3 + src/themes/default/elements/button.variables | 358 ++ .../default/elements/container.overrides | 3 + .../default/elements/container.variables | 58 + src/themes/default/elements/divider.overrides | 18 + src/themes/default/elements/divider.variables | 53 + src/themes/default/elements/flag.overrides | 986 +++++ src/themes/default/elements/flag.variables | 13 + src/themes/default/elements/header.overrides | 4 + src/themes/default/elements/header.variables | 151 + src/themes/default/elements/icon.overrides | 991 +++++ src/themes/default/elements/icon.variables | 62 + src/themes/default/elements/image.overrides | 3 + src/themes/default/elements/image.variables | 44 + src/themes/default/elements/input.overrides | 3 + src/themes/default/elements/input.variables | 101 + src/themes/default/elements/label.overrides | 3 + src/themes/default/elements/label.variables | 254 ++ src/themes/default/elements/list.overrides | 3 + src/themes/default/elements/list.variables | 224 + src/themes/default/elements/loader.overrides | 3 + src/themes/default/elements/loader.variables | 72 + src/themes/default/elements/rail.overrides | 3 + src/themes/default/elements/rail.variables | 34 + src/themes/default/elements/reveal.overrides | 3 + src/themes/default/elements/reveal.variables | 17 + src/themes/default/elements/segment.overrides | 3 + src/themes/default/elements/segment.variables | 139 + src/themes/default/elements/step.overrides | 16 + src/themes/default/elements/step.variables | 130 + src/themes/default/globals/reset.overrides | 447 ++ src/themes/default/globals/reset.variables | 3 + src/themes/default/globals/site.overrides | 3 + src/themes/default/globals/site.variables | 960 ++++ .../default/modules/accordion.overrides | 28 + .../default/modules/accordion.variables | 100 + src/themes/default/modules/chatroom.overrides | 3 + src/themes/default/modules/chatroom.variables | 3 + src/themes/default/modules/checkbox.overrides | 36 + src/themes/default/modules/checkbox.variables | 193 + src/themes/default/modules/dimmer.overrides | 3 + src/themes/default/modules/dimmer.variables | 61 + src/themes/default/modules/dropdown.overrides | 62 + src/themes/default/modules/dropdown.variables | 375 ++ src/themes/default/modules/embed.overrides | 3 + src/themes/default/modules/embed.variables | 53 + src/themes/default/modules/modal.overrides | 3 + src/themes/default/modules/modal.variables | 188 + src/themes/default/modules/nag.overrides | 3 + src/themes/default/modules/nag.variables | 74 + src/themes/default/modules/popup.overrides | 3 + src/themes/default/modules/popup.variables | 137 + src/themes/default/modules/progress.overrides | 3 + src/themes/default/modules/progress.variables | 113 + src/themes/default/modules/rating.overrides | 68 + src/themes/default/modules/rating.variables | 103 + src/themes/default/modules/search.overrides | 3 + src/themes/default/modules/search.variables | 158 + src/themes/default/modules/shape.overrides | 3 + src/themes/default/modules/shape.variables | 40 + src/themes/default/modules/sidebar.overrides | 3 + src/themes/default/modules/sidebar.variables | 45 + src/themes/default/modules/sticky.overrides | 3 + src/themes/default/modules/sticky.variables | 7 + src/themes/default/modules/tab.overrides | 3 + src/themes/default/modules/tab.variables | 11 + .../default/modules/transition.overrides | 910 ++++ .../default/modules/transition.variables | 10 + src/themes/default/views/ad.overrides | 3 + src/themes/default/views/ad.variables | 13 + src/themes/default/views/card.overrides | 3 + src/themes/default/views/card.variables | 220 + src/themes/default/views/comment.overrides | 3 + src/themes/default/views/comment.variables | 98 + src/themes/default/views/feed.overrides | 3 + src/themes/default/views/feed.variables | 141 + src/themes/default/views/item.overrides | 3 + src/themes/default/views/item.variables | 157 + src/themes/default/views/statistic.overrides | 3 + src/themes/default/views/statistic.variables | 98 + src/themes/duo/elements/loader.overrides | 3 + src/themes/duo/elements/loader.variables | 6 + .../fixed-width/collections/grid.overrides | 3 + .../fixed-width/collections/grid.variables | 23 + .../fixed-width/modules/modal.overrides | 3 + .../fixed-width/modules/modal.variables | 37 + src/themes/flat/collections/form.overrides | 28 + src/themes/flat/collections/form.variables | 74 + src/themes/flat/globals/site.overrides | 3 + src/themes/flat/globals/site.variables | 107 + .../github/assets/fonts/octicons-local.ttf | Bin 0 -> 53604 bytes src/themes/github/assets/fonts/octicons.svg | 200 + src/themes/github/assets/fonts/octicons.ttf | Bin 0 -> 31740 bytes src/themes/github/assets/fonts/octicons.woff | Bin 0 -> 17772 bytes .../github/collections/breadcrumb.variables | 11 + src/themes/github/collections/form.overrides | 16 + src/themes/github/collections/form.variables | 40 + src/themes/github/collections/grid.variables | 2 + src/themes/github/collections/menu.overrides | 7 + src/themes/github/collections/menu.variables | 61 + .../github/collections/message.overrides | 11 + .../github/collections/message.variables | 29 + src/themes/github/collections/table.variables | 8 + src/themes/github/elements/button.overrides | 4 + src/themes/github/elements/button.variables | 77 + src/themes/github/elements/header.variables | 9 + src/themes/github/elements/icon.overrides | 208 + src/themes/github/elements/icon.variables | 13 + src/themes/github/elements/image.variables | 5 + src/themes/github/elements/input.overrides | 32 + src/themes/github/elements/input.variables | 16 + src/themes/github/elements/label.overrides | 9 + src/themes/github/elements/label.variables | 4 + src/themes/github/elements/segment.overrides | 3 + src/themes/github/elements/segment.variables | 40 + src/themes/github/elements/step.overrides | 26 + src/themes/github/elements/step.variables | 26 + src/themes/github/globals/site.variables | 47 + src/themes/github/modules/dropdown.overrides | 53 + src/themes/github/modules/dropdown.variables | 35 + src/themes/github/modules/popup.variables | 12 + .../gmail/collections/message.overrides | 0 .../gmail/collections/message.variables | 15 + src/themes/instagram/views/card.overrides | 12 + src/themes/instagram/views/card.variables | 23 + src/themes/material/assets/fonts/icons.eot | Bin 0 -> 143258 bytes src/themes/material/assets/fonts/icons.svg | 2373 ++++++++++ src/themes/material/assets/fonts/icons.ttf | Bin 0 -> 128180 bytes src/themes/material/assets/fonts/icons.woff | Bin 0 -> 57620 bytes src/themes/material/assets/fonts/icons.woff2 | Bin 0 -> 44300 bytes .../material/collections/menu.overrides | 1 + .../material/collections/menu.variables | 10 + src/themes/material/elements/button.overrides | 15 + src/themes/material/elements/button.variables | 97 + src/themes/material/elements/header.overrides | 15 + src/themes/material/elements/header.variables | 21 + src/themes/material/elements/icon.overrides | 934 ++++ src/themes/material/elements/icon.variables | 11 + src/themes/material/globals/site.overrides | 0 src/themes/material/globals/site.variables | 128 + .../material/modules/dropdown.overrides | 5 + .../material/modules/dropdown.variables | 20 + src/themes/material/modules/modal.overrides | 6 + src/themes/material/modules/modal.variables | 15 + src/themes/pulsar/elements/loader.overrides | 70 + src/themes/pulsar/elements/loader.variables | 7 + src/themes/raised/elements/button.overrides | 3 + src/themes/raised/elements/button.variables | 27 + src/themes/resetcss/globals/reset.overrides | 52 + src/themes/resetcss/globals/reset.variables | 3 + src/themes/round/elements/button.overrides | 0 src/themes/round/elements/button.variables | 138 + src/themes/rtl/globals/site.overrides | 6 + src/themes/rtl/globals/site.variables | 14 + src/themes/striped/modules/progress.overrides | 29 + src/themes/striped/modules/progress.variables | 3 + src/themes/timeline/views/feed.overrides | 27 + src/themes/timeline/views/feed.variables | 36 + src/themes/twitter/elements/button.overrides | 13 + src/themes/twitter/elements/button.variables | 44 + tasks/README.md | 17 + tasks/admin/components/create.js | 332 ++ tasks/admin/components/init.js | 170 + tasks/admin/components/update.js | 184 + tasks/admin/distributions/create.js | 219 + tasks/admin/distributions/init.js | 169 + tasks/admin/distributions/update.js | 179 + tasks/admin/publish.js | 25 + tasks/admin/register.js | 55 + tasks/admin/release.js | 29 + tasks/build.js | 50 + tasks/build/assets.js | 35 + tasks/build/css.js | 113 + tasks/build/javascript.js | 77 + tasks/check-install.js | 28 + tasks/clean.js | 14 + tasks/collections/README.md | 16 + tasks/collections/admin.js | 49 + tasks/collections/build.js | 19 + tasks/collections/internal.js | 227 + tasks/collections/rtl.js | 16 + tasks/config/admin/github.js | 37 + tasks/config/admin/oauth.example.js | 11 + tasks/config/admin/release.js | 111 + tasks/config/admin/templates/README.md | 32 + tasks/config/admin/templates/bower.json | 29 + .../admin/templates/component-package.js | 14 + tasks/config/admin/templates/composer.json | 20 + tasks/config/admin/templates/css-package.js | 34 + tasks/config/admin/templates/less-package.js | 21 + tasks/config/admin/templates/package.json | 17 + tasks/config/defaults.js | 117 + tasks/config/docs.js | 32 + tasks/config/npm/gulpfile.js | 72 + tasks/config/project/config.js | 141 + tasks/config/project/install.js | 757 ++++ tasks/config/project/release.js | 65 + tasks/config/tasks.js | 170 + tasks/config/user.js | 58 + tasks/docs/build.js | 189 + tasks/docs/metadata.js | 138 + tasks/docs/serve.js | 255 ++ tasks/install.js | 459 ++ tasks/rtl/build.js | 132 + tasks/rtl/watch.js | 221 + tasks/version.js | 11 + tasks/watch.js | 231 + yarn.lock | 1867 +++++++- 444 files changed, 77316 insertions(+), 45 deletions(-) create mode 100644 gulpfile.js create mode 100644 semantic.json create mode 100644 src/definitions/behaviors/api.js create mode 100644 src/definitions/behaviors/colorize.js create mode 100644 src/definitions/behaviors/form.js create mode 100644 src/definitions/behaviors/state.js create mode 100644 src/definitions/behaviors/visibility.js create mode 100644 src/definitions/behaviors/visit.js create mode 100755 src/definitions/collections/breadcrumb.less create mode 100755 src/definitions/collections/form.less create mode 100755 src/definitions/collections/grid.less create mode 100755 src/definitions/collections/menu.less create mode 100755 src/definitions/collections/message.less create mode 100755 src/definitions/collections/table.less create mode 100755 src/definitions/elements/button.less create mode 100644 src/definitions/elements/container.less create mode 100755 src/definitions/elements/divider.less create mode 100755 src/definitions/elements/flag.less create mode 100755 src/definitions/elements/header.less create mode 100755 src/definitions/elements/icon.less create mode 100755 src/definitions/elements/image.less create mode 100755 src/definitions/elements/input.less create mode 100755 src/definitions/elements/label.less create mode 100755 src/definitions/elements/list.less create mode 100755 src/definitions/elements/loader.less create mode 100755 src/definitions/elements/rail.less create mode 100755 src/definitions/elements/reveal.less create mode 100755 src/definitions/elements/segment.less create mode 100755 src/definitions/elements/step.less create mode 100755 src/definitions/globals/reset.less create mode 100644 src/definitions/globals/site.js create mode 100755 src/definitions/globals/site.less create mode 100644 src/definitions/modules/accordion.js create mode 100755 src/definitions/modules/accordion.less create mode 100644 src/definitions/modules/checkbox.js create mode 100755 src/definitions/modules/checkbox.less create mode 100755 src/definitions/modules/dimmer.js create mode 100755 src/definitions/modules/dimmer.less create mode 100644 src/definitions/modules/dropdown.js create mode 100755 src/definitions/modules/dropdown.less create mode 100644 src/definitions/modules/embed.js create mode 100644 src/definitions/modules/embed.less create mode 100755 src/definitions/modules/modal.js create mode 100755 src/definitions/modules/modal.less create mode 100644 src/definitions/modules/nag.js create mode 100755 src/definitions/modules/nag.less create mode 100644 src/definitions/modules/popup.js create mode 100755 src/definitions/modules/popup.less create mode 100644 src/definitions/modules/progress.js create mode 100755 src/definitions/modules/progress.less create mode 100644 src/definitions/modules/rating.js create mode 100755 src/definitions/modules/rating.less create mode 100644 src/definitions/modules/search.js create mode 100755 src/definitions/modules/search.less create mode 100644 src/definitions/modules/shape.js create mode 100755 src/definitions/modules/shape.less create mode 100644 src/definitions/modules/sidebar.js create mode 100755 src/definitions/modules/sidebar.less create mode 100755 src/definitions/modules/sticky.js create mode 100755 src/definitions/modules/sticky.less create mode 100644 src/definitions/modules/tab.js create mode 100755 src/definitions/modules/tab.less create mode 100644 src/definitions/modules/transition.js create mode 100755 src/definitions/modules/transition.less create mode 100644 src/definitions/views/ad.less create mode 100755 src/definitions/views/card.less create mode 100755 src/definitions/views/comment.less create mode 100755 src/definitions/views/feed.less create mode 100755 src/definitions/views/item.less create mode 100755 src/definitions/views/statistic.less create mode 100644 src/semantic.less create mode 100644 src/site/collections/breadcrumb.overrides create mode 100644 src/site/collections/breadcrumb.variables create mode 100644 src/site/collections/form.overrides create mode 100644 src/site/collections/form.variables create mode 100644 src/site/collections/grid.overrides create mode 100644 src/site/collections/grid.variables create mode 100644 src/site/collections/menu.overrides create mode 100644 src/site/collections/menu.variables create mode 100644 src/site/collections/message.overrides create mode 100644 src/site/collections/message.variables create mode 100644 src/site/collections/table.overrides create mode 100644 src/site/collections/table.variables create mode 100644 src/site/elements/button.overrides create mode 100644 src/site/elements/button.variables create mode 100644 src/site/elements/container.overrides create mode 100644 src/site/elements/container.variables create mode 100644 src/site/elements/divider.overrides create mode 100644 src/site/elements/divider.variables create mode 100644 src/site/elements/flag.overrides create mode 100644 src/site/elements/flag.variables create mode 100644 src/site/elements/header.overrides create mode 100644 src/site/elements/header.variables create mode 100644 src/site/elements/icon.overrides create mode 100644 src/site/elements/icon.variables create mode 100644 src/site/elements/image.overrides create mode 100644 src/site/elements/image.variables create mode 100644 src/site/elements/input.overrides create mode 100644 src/site/elements/input.variables create mode 100644 src/site/elements/label.overrides create mode 100644 src/site/elements/label.variables create mode 100644 src/site/elements/list.overrides create mode 100644 src/site/elements/list.variables create mode 100644 src/site/elements/loader.overrides create mode 100644 src/site/elements/loader.variables create mode 100644 src/site/elements/rail.overrides create mode 100644 src/site/elements/rail.variables create mode 100644 src/site/elements/reveal.overrides create mode 100644 src/site/elements/reveal.variables create mode 100644 src/site/elements/segment.overrides create mode 100644 src/site/elements/segment.variables create mode 100644 src/site/elements/step.overrides create mode 100644 src/site/elements/step.variables create mode 100644 src/site/globals/reset.overrides create mode 100644 src/site/globals/reset.variables create mode 100644 src/site/globals/site.overrides create mode 100644 src/site/globals/site.variables create mode 100644 src/site/modules/accordion.overrides create mode 100644 src/site/modules/accordion.variables create mode 100644 src/site/modules/chatroom.overrides create mode 100644 src/site/modules/chatroom.variables create mode 100644 src/site/modules/checkbox.overrides create mode 100644 src/site/modules/checkbox.variables create mode 100644 src/site/modules/dimmer.overrides create mode 100644 src/site/modules/dimmer.variables create mode 100644 src/site/modules/dropdown.overrides create mode 100644 src/site/modules/dropdown.variables create mode 100644 src/site/modules/embed.overrides create mode 100644 src/site/modules/embed.variables create mode 100644 src/site/modules/modal.overrides create mode 100644 src/site/modules/modal.variables create mode 100644 src/site/modules/nag.overrides create mode 100644 src/site/modules/nag.variables create mode 100644 src/site/modules/popup.overrides create mode 100644 src/site/modules/popup.variables create mode 100644 src/site/modules/progress.overrides create mode 100644 src/site/modules/progress.variables create mode 100644 src/site/modules/rating.overrides create mode 100644 src/site/modules/rating.variables create mode 100644 src/site/modules/search.overrides create mode 100644 src/site/modules/search.variables create mode 100644 src/site/modules/shape.overrides create mode 100644 src/site/modules/shape.variables create mode 100644 src/site/modules/sidebar.overrides create mode 100644 src/site/modules/sidebar.variables create mode 100644 src/site/modules/sticky.overrides create mode 100644 src/site/modules/sticky.variables create mode 100644 src/site/modules/tab.overrides create mode 100644 src/site/modules/tab.variables create mode 100644 src/site/modules/transition.overrides create mode 100644 src/site/modules/transition.variables create mode 100644 src/site/views/ad.overrides create mode 100644 src/site/views/ad.variables create mode 100644 src/site/views/card.overrides create mode 100644 src/site/views/card.variables create mode 100644 src/site/views/comment.overrides create mode 100644 src/site/views/comment.variables create mode 100644 src/site/views/feed.overrides create mode 100644 src/site/views/feed.variables create mode 100644 src/site/views/item.overrides create mode 100644 src/site/views/item.variables create mode 100644 src/site/views/statistic.overrides create mode 100644 src/site/views/statistic.variables create mode 100644 src/theme.config create mode 100644 src/theme.less create mode 100644 src/themes/amazon/elements/button.overrides create mode 100644 src/themes/amazon/elements/button.variables create mode 100644 src/themes/amazon/globals/site.variables create mode 100644 src/themes/basic/assets/fonts/icons.eot create mode 100644 src/themes/basic/assets/fonts/icons.svg create mode 100644 src/themes/basic/assets/fonts/icons.ttf create mode 100644 src/themes/basic/assets/fonts/icons.woff create mode 100644 src/themes/basic/collections/table.overrides create mode 100644 src/themes/basic/collections/table.variables create mode 100644 src/themes/basic/elements/button.overrides create mode 100644 src/themes/basic/elements/button.variables create mode 100644 src/themes/basic/elements/icon.overrides create mode 100644 src/themes/basic/elements/icon.variables create mode 100644 src/themes/basic/elements/step.overrides create mode 100644 src/themes/basic/elements/step.variables create mode 100644 src/themes/basic/globals/reset.overrides create mode 100644 src/themes/basic/globals/reset.variables create mode 100644 src/themes/basic/modules/progress.overrides create mode 100644 src/themes/basic/modules/progress.variables create mode 100644 src/themes/basic/views/card.overrides create mode 100644 src/themes/basic/views/card.variables create mode 100644 src/themes/bookish/elements/header.overrides create mode 100644 src/themes/bookish/elements/header.variables create mode 100644 src/themes/bootstrap3/elements/button.overrides create mode 100644 src/themes/bootstrap3/elements/button.variables create mode 100644 src/themes/chubby/collections/form.overrides create mode 100644 src/themes/chubby/collections/form.variables create mode 100644 src/themes/chubby/collections/menu.overrides create mode 100644 src/themes/chubby/collections/menu.variables create mode 100644 src/themes/chubby/elements/button.overrides create mode 100644 src/themes/chubby/elements/button.variables create mode 100644 src/themes/chubby/elements/header.overrides create mode 100644 src/themes/chubby/elements/header.variables create mode 100644 src/themes/chubby/modules/accordion.overrides create mode 100644 src/themes/chubby/modules/accordion.variables create mode 100644 src/themes/chubby/views/comment.overrides create mode 100644 src/themes/chubby/views/comment.variables create mode 100644 src/themes/classic/collections/table.overrides create mode 100644 src/themes/classic/collections/table.variables create mode 100644 src/themes/classic/elements/button.overrides create mode 100644 src/themes/classic/elements/button.variables create mode 100644 src/themes/classic/elements/header.overrides create mode 100644 src/themes/classic/elements/header.variables create mode 100644 src/themes/classic/modules/progress.overrides create mode 100644 src/themes/classic/modules/progress.variables create mode 100644 src/themes/classic/views/card.overrides create mode 100644 src/themes/classic/views/card.variables create mode 100644 src/themes/colored/modules/checkbox.overrides create mode 100644 src/themes/colored/modules/checkbox.variables create mode 100644 src/themes/default/assets/fonts/icons.eot create mode 100644 src/themes/default/assets/fonts/icons.svg create mode 100644 src/themes/default/assets/fonts/icons.ttf create mode 100644 src/themes/default/assets/fonts/icons.woff create mode 100644 src/themes/default/assets/fonts/icons.woff2 create mode 100644 src/themes/default/assets/images/flags.png create mode 100644 src/themes/default/collections/breadcrumb.overrides create mode 100644 src/themes/default/collections/breadcrumb.variables create mode 100644 src/themes/default/collections/form.overrides create mode 100644 src/themes/default/collections/form.variables create mode 100644 src/themes/default/collections/grid.overrides create mode 100644 src/themes/default/collections/grid.variables create mode 100644 src/themes/default/collections/menu.overrides create mode 100644 src/themes/default/collections/menu.variables create mode 100644 src/themes/default/collections/message.overrides create mode 100644 src/themes/default/collections/message.variables create mode 100644 src/themes/default/collections/table.overrides create mode 100644 src/themes/default/collections/table.variables create mode 100644 src/themes/default/elements/button.overrides create mode 100644 src/themes/default/elements/button.variables create mode 100644 src/themes/default/elements/container.overrides create mode 100644 src/themes/default/elements/container.variables create mode 100644 src/themes/default/elements/divider.overrides create mode 100644 src/themes/default/elements/divider.variables create mode 100644 src/themes/default/elements/flag.overrides create mode 100644 src/themes/default/elements/flag.variables create mode 100644 src/themes/default/elements/header.overrides create mode 100644 src/themes/default/elements/header.variables create mode 100644 src/themes/default/elements/icon.overrides create mode 100644 src/themes/default/elements/icon.variables create mode 100644 src/themes/default/elements/image.overrides create mode 100644 src/themes/default/elements/image.variables create mode 100644 src/themes/default/elements/input.overrides create mode 100644 src/themes/default/elements/input.variables create mode 100644 src/themes/default/elements/label.overrides create mode 100644 src/themes/default/elements/label.variables create mode 100644 src/themes/default/elements/list.overrides create mode 100644 src/themes/default/elements/list.variables create mode 100644 src/themes/default/elements/loader.overrides create mode 100644 src/themes/default/elements/loader.variables create mode 100644 src/themes/default/elements/rail.overrides create mode 100644 src/themes/default/elements/rail.variables create mode 100644 src/themes/default/elements/reveal.overrides create mode 100644 src/themes/default/elements/reveal.variables create mode 100644 src/themes/default/elements/segment.overrides create mode 100644 src/themes/default/elements/segment.variables create mode 100644 src/themes/default/elements/step.overrides create mode 100644 src/themes/default/elements/step.variables create mode 100755 src/themes/default/globals/reset.overrides create mode 100644 src/themes/default/globals/reset.variables create mode 100644 src/themes/default/globals/site.overrides create mode 100755 src/themes/default/globals/site.variables create mode 100644 src/themes/default/modules/accordion.overrides create mode 100644 src/themes/default/modules/accordion.variables create mode 100644 src/themes/default/modules/chatroom.overrides create mode 100644 src/themes/default/modules/chatroom.variables create mode 100644 src/themes/default/modules/checkbox.overrides create mode 100644 src/themes/default/modules/checkbox.variables create mode 100644 src/themes/default/modules/dimmer.overrides create mode 100644 src/themes/default/modules/dimmer.variables create mode 100644 src/themes/default/modules/dropdown.overrides create mode 100755 src/themes/default/modules/dropdown.variables create mode 100644 src/themes/default/modules/embed.overrides create mode 100644 src/themes/default/modules/embed.variables create mode 100644 src/themes/default/modules/modal.overrides create mode 100755 src/themes/default/modules/modal.variables create mode 100644 src/themes/default/modules/nag.overrides create mode 100644 src/themes/default/modules/nag.variables create mode 100644 src/themes/default/modules/popup.overrides create mode 100644 src/themes/default/modules/popup.variables create mode 100644 src/themes/default/modules/progress.overrides create mode 100644 src/themes/default/modules/progress.variables create mode 100644 src/themes/default/modules/rating.overrides create mode 100644 src/themes/default/modules/rating.variables create mode 100644 src/themes/default/modules/search.overrides create mode 100644 src/themes/default/modules/search.variables create mode 100644 src/themes/default/modules/shape.overrides create mode 100644 src/themes/default/modules/shape.variables create mode 100644 src/themes/default/modules/sidebar.overrides create mode 100644 src/themes/default/modules/sidebar.variables create mode 100644 src/themes/default/modules/sticky.overrides create mode 100644 src/themes/default/modules/sticky.variables create mode 100644 src/themes/default/modules/tab.overrides create mode 100644 src/themes/default/modules/tab.variables create mode 100644 src/themes/default/modules/transition.overrides create mode 100644 src/themes/default/modules/transition.variables create mode 100644 src/themes/default/views/ad.overrides create mode 100644 src/themes/default/views/ad.variables create mode 100644 src/themes/default/views/card.overrides create mode 100644 src/themes/default/views/card.variables create mode 100644 src/themes/default/views/comment.overrides create mode 100644 src/themes/default/views/comment.variables create mode 100644 src/themes/default/views/feed.overrides create mode 100644 src/themes/default/views/feed.variables create mode 100644 src/themes/default/views/item.overrides create mode 100644 src/themes/default/views/item.variables create mode 100644 src/themes/default/views/statistic.overrides create mode 100644 src/themes/default/views/statistic.variables create mode 100644 src/themes/duo/elements/loader.overrides create mode 100644 src/themes/duo/elements/loader.variables create mode 100644 src/themes/fixed-width/collections/grid.overrides create mode 100644 src/themes/fixed-width/collections/grid.variables create mode 100644 src/themes/fixed-width/modules/modal.overrides create mode 100644 src/themes/fixed-width/modules/modal.variables create mode 100644 src/themes/flat/collections/form.overrides create mode 100644 src/themes/flat/collections/form.variables create mode 100644 src/themes/flat/globals/site.overrides create mode 100644 src/themes/flat/globals/site.variables create mode 100644 src/themes/github/assets/fonts/octicons-local.ttf create mode 100644 src/themes/github/assets/fonts/octicons.svg create mode 100644 src/themes/github/assets/fonts/octicons.ttf create mode 100644 src/themes/github/assets/fonts/octicons.woff create mode 100644 src/themes/github/collections/breadcrumb.variables create mode 100644 src/themes/github/collections/form.overrides create mode 100644 src/themes/github/collections/form.variables create mode 100644 src/themes/github/collections/grid.variables create mode 100644 src/themes/github/collections/menu.overrides create mode 100644 src/themes/github/collections/menu.variables create mode 100644 src/themes/github/collections/message.overrides create mode 100644 src/themes/github/collections/message.variables create mode 100644 src/themes/github/collections/table.variables create mode 100644 src/themes/github/elements/button.overrides create mode 100644 src/themes/github/elements/button.variables create mode 100644 src/themes/github/elements/header.variables create mode 100644 src/themes/github/elements/icon.overrides create mode 100644 src/themes/github/elements/icon.variables create mode 100644 src/themes/github/elements/image.variables create mode 100644 src/themes/github/elements/input.overrides create mode 100644 src/themes/github/elements/input.variables create mode 100644 src/themes/github/elements/label.overrides create mode 100644 src/themes/github/elements/label.variables create mode 100644 src/themes/github/elements/segment.overrides create mode 100644 src/themes/github/elements/segment.variables create mode 100644 src/themes/github/elements/step.overrides create mode 100644 src/themes/github/elements/step.variables create mode 100644 src/themes/github/globals/site.variables create mode 100644 src/themes/github/modules/dropdown.overrides create mode 100644 src/themes/github/modules/dropdown.variables create mode 100644 src/themes/github/modules/popup.variables create mode 100644 src/themes/gmail/collections/message.overrides create mode 100644 src/themes/gmail/collections/message.variables create mode 100644 src/themes/instagram/views/card.overrides create mode 100644 src/themes/instagram/views/card.variables create mode 100644 src/themes/material/assets/fonts/icons.eot create mode 100644 src/themes/material/assets/fonts/icons.svg create mode 100644 src/themes/material/assets/fonts/icons.ttf create mode 100644 src/themes/material/assets/fonts/icons.woff create mode 100644 src/themes/material/assets/fonts/icons.woff2 create mode 100644 src/themes/material/collections/menu.overrides create mode 100644 src/themes/material/collections/menu.variables create mode 100644 src/themes/material/elements/button.overrides create mode 100644 src/themes/material/elements/button.variables create mode 100644 src/themes/material/elements/header.overrides create mode 100644 src/themes/material/elements/header.variables create mode 100644 src/themes/material/elements/icon.overrides create mode 100644 src/themes/material/elements/icon.variables create mode 100644 src/themes/material/globals/site.overrides create mode 100644 src/themes/material/globals/site.variables create mode 100644 src/themes/material/modules/dropdown.overrides create mode 100644 src/themes/material/modules/dropdown.variables create mode 100644 src/themes/material/modules/modal.overrides create mode 100644 src/themes/material/modules/modal.variables create mode 100644 src/themes/pulsar/elements/loader.overrides create mode 100644 src/themes/pulsar/elements/loader.variables create mode 100644 src/themes/raised/elements/button.overrides create mode 100644 src/themes/raised/elements/button.variables create mode 100644 src/themes/resetcss/globals/reset.overrides create mode 100644 src/themes/resetcss/globals/reset.variables create mode 100644 src/themes/round/elements/button.overrides create mode 100644 src/themes/round/elements/button.variables create mode 100644 src/themes/rtl/globals/site.overrides create mode 100644 src/themes/rtl/globals/site.variables create mode 100644 src/themes/striped/modules/progress.overrides create mode 100644 src/themes/striped/modules/progress.variables create mode 100644 src/themes/timeline/views/feed.overrides create mode 100644 src/themes/timeline/views/feed.variables create mode 100644 src/themes/twitter/elements/button.overrides create mode 100644 src/themes/twitter/elements/button.variables create mode 100644 tasks/README.md create mode 100644 tasks/admin/components/create.js create mode 100644 tasks/admin/components/init.js create mode 100644 tasks/admin/components/update.js create mode 100644 tasks/admin/distributions/create.js create mode 100644 tasks/admin/distributions/init.js create mode 100644 tasks/admin/distributions/update.js create mode 100644 tasks/admin/publish.js create mode 100644 tasks/admin/register.js create mode 100644 tasks/admin/release.js create mode 100644 tasks/build.js create mode 100644 tasks/build/assets.js create mode 100644 tasks/build/css.js create mode 100644 tasks/build/javascript.js create mode 100644 tasks/check-install.js create mode 100644 tasks/clean.js create mode 100644 tasks/collections/README.md create mode 100644 tasks/collections/admin.js create mode 100644 tasks/collections/build.js create mode 100644 tasks/collections/internal.js create mode 100644 tasks/collections/rtl.js create mode 100644 tasks/config/admin/github.js create mode 100644 tasks/config/admin/oauth.example.js create mode 100644 tasks/config/admin/release.js create mode 100644 tasks/config/admin/templates/README.md create mode 100644 tasks/config/admin/templates/bower.json create mode 100644 tasks/config/admin/templates/component-package.js create mode 100644 tasks/config/admin/templates/composer.json create mode 100644 tasks/config/admin/templates/css-package.js create mode 100644 tasks/config/admin/templates/less-package.js create mode 100644 tasks/config/admin/templates/package.json create mode 100644 tasks/config/defaults.js create mode 100644 tasks/config/docs.js create mode 100644 tasks/config/npm/gulpfile.js create mode 100644 tasks/config/project/config.js create mode 100755 tasks/config/project/install.js create mode 100644 tasks/config/project/release.js create mode 100755 tasks/config/tasks.js create mode 100644 tasks/config/user.js create mode 100644 tasks/docs/build.js create mode 100644 tasks/docs/metadata.js create mode 100644 tasks/docs/serve.js create mode 100755 tasks/install.js create mode 100644 tasks/rtl/build.js create mode 100644 tasks/rtl/watch.js create mode 100644 tasks/version.js create mode 100644 tasks/watch.js diff --git a/.gitignore b/.gitignore index b0580ed..28f32e6 100644 --- a/.gitignore +++ b/.gitignore @@ -30,3 +30,5 @@ yarn-debug.log* yarn-error.log* .yarn-integrity + +dist/ diff --git a/app/javascript/packs/hello_react.jsx b/app/javascript/packs/hello_react.jsx index 7a3e088..4f91335 100644 --- a/app/javascript/packs/hello_react.jsx +++ b/app/javascript/packs/hello_react.jsx @@ -8,6 +8,8 @@ import PropTypes from 'prop-types' import { Button } from 'semantic-ui-react' +import '../../../dist/semantic.min.css'; + const Hello = props => (
Hello {props.name}!
) diff --git a/app/views/site/signup.html.erb b/app/views/site/signup.html.erb index 02089f3..dc326cd 100644 --- a/app/views/site/signup.html.erb +++ b/app/views/site/signup.html.erb @@ -2,3 +2,4 @@

Find me in app/views/site/signup.html.erb

<%= javascript_pack_tag 'hello_react' %> +<%= stylesheet_pack_tag 'hello_react' %> diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..bde1960 --- /dev/null +++ b/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/package.json b/package.json index 113bb57..131512b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "semantic-ui-react": "^0.77.2" }, "devDependencies": { + "semantic-ui": "^2.2.13", "webpack-dev-server": "^2.11.1" } } diff --git a/semantic.json b/semantic.json new file mode 100644 index 0000000..8c44fc0 --- /dev/null +++ b/semantic.json @@ -0,0 +1,22 @@ +{ + "base": "", + "paths": { + "source": { + "config": "src/theme.config", + "definitions": "src/definitions/", + "site": "src/site/", + "themes": "src/themes/" + }, + "output": { + "packaged": "dist/", + "uncompressed": "dist/components/", + "compressed": "dist/components/", + "themes": "dist/themes/" + }, + "clean": "dist/" + }, + "permission": false, + "autoInstall": true, + "rtl": false, + "version": "2.2.13" +} \ No newline at end of file diff --git a/src/definitions/behaviors/api.js b/src/definitions/behaviors/api.js new file mode 100644 index 0000000..578e201 --- /dev/null +++ b/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/src/definitions/behaviors/colorize.js b/src/definitions/behaviors/colorize.js new file mode 100644 index 0000000..31efb1c --- /dev/null +++ b/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 = $('')[0], + imageCanvas = $('')[0], + overlayCanvas = $('')[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/src/definitions/behaviors/form.js b/src/definitions/behaviors/form.js new file mode 100644 index 0000000..c28c546 --- /dev/null +++ b/src/definitions/behaviors/form.js @@ -0,0 +1,1706 @@ +/*! + * # 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)); + }, + shorthandFields: function(fields) { + var + fieldKeys = Object.keys(fields), + firstRule = fields[fieldKeys[0]] + ; + return module.is.shorthandRules(firstRule); + }, + // duck type rule test + shorthandRules: function(rules) { + return (typeof rules == 'string' || $.isArray(rules)); + }, + 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' + ; + }, + fieldsFromShorthand: function(fields) { + var + fullFields = {} + ; + $.each(fields, function(name, rules) { + if(typeof rules == 'string') { + rules = [rules]; + } + fullFields[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + fullFields[name].rules.push({ type: rule }); + }); + }); + return fullFields; + }, + 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 && module.is.shorthandFields(parameters.fields)) { + parameters.fields = module.get.fieldsFromShorthand(parameters.fields); + } + 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 $(''); + }, + fields: function(fields) { + var + $fields = $() + ; + $.each(fields, function(index, name) { + $fields = $fields.add( module.get.field(name) ); + }); + return $fields; + }, + validation: function($field) { + var + fieldValidation, + identifier + ; + if(!validation) { + return false; + } + $.each(validation, function(fieldName, field) { + identifier = field.identifier || fieldName; + if( module.get.field(identifier)[0] == $field[0] ) { + field.identifier = identifier; + fieldValidation = field; + } + }); + return fieldValidation || false; + }, + value: function (field) { + var + fields = [], + results + ; + fields.push(field); + results = module.get.values.call(element, fields); + return results[field]; + }, + values: function (fields) { + var + $fields = $.isArray(fields) + ? module.get.fields(fields) + : $field, + values = {} + ; + $fields.each(function(index, field) { + var + $field = $(field), + type = $field.prop('type'), + name = $field.prop('name'), + value = $field.val(), + isCheckbox = $field.is(selector.checkbox), + isRadio = $field.is(selector.radio), + isMultiple = (name.indexOf('[]') !== -1), + isChecked = (isCheckbox) + ? $field.is(':checked') + : false + ; + if(name) { + if(isMultiple) { + name = name.replace('[]', ''); + if(!values[name]) { + values[name] = []; + } + if(isCheckbox) { + if(isChecked) { + values[name].push(value || true); + } + else { + values[name].push(false); + } + } + else { + values[name].push(value); + } + } + else { + if(isRadio) { + if(values[name] === undefined) { + values[name] = (isChecked) + ? true + : false + ; + } + } + else if(isCheckbox) { + if(isChecked) { + values[name] = value || true; + } + else { + values[name] = false; + } + } + else { + values[name] = value; + } + } + } + }); + return values; + } + }, + + has: { + + field: function(identifier) { + module.verbose('Checking for existence of a field with identifier', identifier); + identifier = module.escape.string(identifier); + if(typeof identifier !== 'string') { + module.error(error.identifier, identifier); + } + if($field.filter('#' + identifier).length > 0 ) { + return true; + } + else if( $field.filter('[name="' + identifier +'"]').length > 0 ) { + return true; + } + else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) { + return true; + } + return false; + } + + }, + + escape: { + string: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + + add: { + // alias + rule: function(name, rules) { + module.add.field(name, rules); + }, + field: function(name, rules) { + var + newValidation = {} + ; + if(module.is.shorthandRules(rules)) { + rules = $.isArray(rules) + ? rules + : [rules] + ; + newValidation[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + newValidation[name].rules.push({ type: rule }); + }); + } + else { + newValidation[name] = rules; + } + validation = $.extend({}, validation, newValidation); + module.debug('Adding rules', newValidation, validation); + }, + fields: function(fields) { + var + newValidation + ; + if(fields && module.is.shorthandFields(fields)) { + newValidation = module.get.fieldsFromShorthand(fields); + } + else { + newValidation = fields; + } + validation = $.extend({}, validation, newValidation); + }, + prompt: function(identifier, errors) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt), + promptExists = ($prompt.length !== 0) + ; + errors = (typeof errors == 'string') + ? [errors] + : errors + ; + module.verbose('Adding field error state', identifier); + $fieldGroup + .addClass(className.error) + ; + if(settings.inline) { + if(!promptExists) { + $prompt = settings.templates.prompt(errors); + $prompt + .appendTo($fieldGroup) + ; + } + $prompt + .html(errors[0]) + ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } + } + else { + module.verbose('Inline errors are disabled, no inline error added', identifier); + } + } + }, + errors: function(errors) { + module.debug('Adding form error messages', errors); + module.set.error(); + $message + .html( settings.templates.error(errors) ) + ; + } + }, + + remove: { + rule: function(field, rule) { + var + rules = $.isArray(rule) + ? rule + : [rule] + ; + if(rule == undefined) { + module.debug('Removed all rules'); + validation[field].rules = []; + return; + } + if(validation[field] == undefined || !$.isArray(validation[field].rules)) { + return; + } + $.each(validation[field].rules, function(index, rule) { + if(rules.indexOf(rule.type) !== -1) { + module.debug('Removed rule', rule.type); + validation[field].rules.splice(index, 1); + } + }); + }, + field: function(field) { + var + fields = $.isArray(field) + ? field + : [field] + ; + $.each(fields, function(index, field) { + module.remove.rule(field); + }); + }, + // alias + rules: function(field, rules) { + if($.isArray(field)) { + $.each(fields, function(index, field) { + module.remove.rule(field, rules); + }); + } + else { + module.remove.rule(field, rules); + } + }, + fields: function(fields) { + module.remove.field(fields); + }, + prompt: function(identifier) { + var + $field = module.get.field(identifier), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.children(selector.prompt) + ; + $fieldGroup + .removeClass(className.error) + ; + if(settings.inline && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', identifier); + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } + } + } + }, + + set: { + success: function() { + $module + .removeClass(className.error) + .addClass(className.success) + ; + }, + defaults: function () { + $field + .each(function () { + var + $field = $(this), + isCheckbox = ($field.filter(selector.checkbox).length > 0), + value = (isCheckbox) + ? $field.is(':checked') + : $field.val() + ; + $field.data(metadata.defaultValue, value); + }) + ; + }, + error: function() { + $module + .removeClass(className.success) + .addClass(className.error) + ; + }, + value: function (field, value) { + var + fields = {} + ; + fields[field] = value; + return module.set.values.call(element, fields); + }, + values: function (fields) { + if($.isEmptyObject(fields)) { + return; + } + $.each(fields, function(key, value) { + var + $field = module.get.field(key), + $element = $field.parent(), + isMultiple = $.isArray(value), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isRadio = ($field.is(selector.radio) && isCheckbox), + fieldExists = ($field.length > 0), + $multipleField + ; + if(fieldExists) { + if(isMultiple && isCheckbox) { + module.verbose('Selecting multiple', value, $field); + $element.checkbox('uncheck'); + $.each(value, function(index, value) { + $multipleField = $field.filter('[value="' + value + '"]'); + $element = $multipleField.parent(); + if($multipleField.length > 0) { + $element.checkbox('check'); + } + }); + } + else if(isRadio) { + module.verbose('Selecting radio value', value, $field); + $field.filter('[value="' + value + '"]') + .parent(selector.uiCheckbox) + .checkbox('check') + ; + } + else if(isCheckbox) { + module.verbose('Setting checkbox value', value, $element); + if(value === true) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else if(isDropdown) { + module.verbose('Setting dropdown value', value, $element); + $element.dropdown('set selected', value); + } + else { + module.verbose('Setting field value', value, $field); + $field.val(value); + } + } + }); + } + }, + + validate: { + + form: function(event, ignoreCallbacks) { + var + values = module.get.values(), + apiRequest + ; + + // input keydown event will fire submit repeatedly by browser default + if(keyHeldDown) { + return false; + } + + // reset errors + formErrors = []; + if( module.determine.isValid() ) { + module.debug('Form has no validation errors, submitting'); + module.set.success(); + if(ignoreCallbacks !== true) { + return settings.onSuccess.call(element, event, values); + } + } + else { + module.debug('Form has errors'); + module.set.error(); + if(!settings.inline) { + module.add.errors(formErrors); + } + // prevent ajax submit + if($module.data('moduleApi') !== undefined) { + event.stopImmediatePropagation(); + } + if(ignoreCallbacks !== true) { + return settings.onFailure.call(element, formErrors, values); + } + } + }, + + // takes a validation object and returns whether field passes validation + field: function(field, fieldName, showErrors) { + showErrors = (showErrors !== undefined) + ? showErrors + : true + ; + if(typeof field == 'string') { + module.verbose('Validating field', field); + fieldName = field; + field = validation[field]; + } + var + identifier = field.identifier || fieldName, + $field = module.get.field(identifier), + $dependsField = (field.depends) + ? module.get.field(field.depends) + : false, + fieldValid = true, + fieldErrors = [] + ; + if(!field.identifier) { + module.debug('Using field name as identifier', identifier); + field.identifier = identifier; + } + if($field.prop('disabled')) { + module.debug('Field is disabled. Skipping', identifier); + fieldValid = true; + } + else if(field.optional && module.is.blank($field)){ + module.debug('Field is optional and blank. Skipping', identifier); + fieldValid = true; + } + else if(field.depends && module.is.empty($dependsField)) { + module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField); + fieldValid = true; + } + else if(field.rules !== undefined) { + $.each(field.rules, function(index, rule) { + if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) { + module.debug('Field is invalid', identifier, rule.type); + fieldErrors.push(module.get.prompt(rule, field)); + fieldValid = false; + } + }); + } + if(fieldValid) { + if(showErrors) { + module.remove.prompt(identifier, fieldErrors); + settings.onValid.call($field); + } + } + else { + if(showErrors) { + formErrors = formErrors.concat(fieldErrors); + module.add.prompt(identifier, fieldErrors); + settings.onInvalid.call($field, fieldErrors); + } + return false; + } + return true; + }, + + // takes validation rule and returns whether field passes rule + rule: function(field, rule) { + var + $field = module.get.field(field.identifier), + type = rule.type, + value = $field.val(), + isValid = true, + ancillary = module.get.ancillaryValue(rule), + ruleName = module.get.ruleName(rule), + ruleFunction = settings.rules[ruleName] + ; + if( !$.isFunction(ruleFunction) ) { + module.error(error.noRule, ruleName); + return; + } + // cast to string avoiding encoding special values + value = (value === undefined || value === '' || value === null) + ? '' + : $.trim(value + '') + ; + return ruleFunction.call($field, value, ancillary); + } + }, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + return false; + } + }); + } + if( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + module.initialize(); + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.form.settings = { + + name : 'Form', + namespace : 'form', + + debug : false, + verbose : false, + performance : true, + + fields : false, + + keyboardShortcuts : true, + on : 'submit', + inline : false, + + delay : 200, + revalidate : true, + + transition : 'scale', + duration : 200, + + onValid : function() {}, + onInvalid : function() {}, + onSuccess : function() { return true; }, + onFailure : function() { return false; }, + + metadata : { + defaultValue : 'default', + validate : 'validate' + }, + + regExp: { + htmlID : /^[a-zA-Z][\w:.-]*$/g, + bracket : /\[(.*)\]/i, + decimal : /^\d+\.?\d*$/, + email : /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i, + escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, + flags : /^\/(.*)\/(.*)?/, + integer : /^\-?\d+$/, + number : /^\-?\d*(\.\d+)?$/, + url : /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/i + }, + + text: { + unspecifiedRule : 'Please enter a valid value', + unspecifiedField : 'This field' + }, + + prompt: { + empty : '{name} must have a value', + checked : '{name} must be checked', + email : '{name} must be a valid e-mail', + url : '{name} must be a valid url', + regExp : '{name} is not formatted correctly', + integer : '{name} must be an integer', + decimal : '{name} must be a decimal number', + number : '{name} must be set to a number', + is : '{name} must be "{ruleValue}"', + isExactly : '{name} must be exactly "{ruleValue}"', + not : '{name} cannot be set to "{ruleValue}"', + notExactly : '{name} cannot be set to exactly "{ruleValue}"', + contain : '{name} 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 = '
    ' + ; + $.each(errors, function(index, value) { + html += '
  • ' + value + '
    • '; + }); + html += '
'; + return $(html); + }, + + // template that produces label + prompt: function(errors) { + return $('
') + .addClass('ui basic red pointing prompt label') + .html(errors[0]) + ; + } + }, + + rules: { + + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || $.isArray(value) && value.length === 0); + }, + + // checkbox checked + checked: function() { + return ($(this).filter(':checked').length > 0); + }, + + // is most likely an email + email: function(value){ + return $.fn.form.settings.regExp.email.test(value); + }, + + // value is most likely url + url: function(value) { + return $.fn.form.settings.regExp.url.test(value); + }, + + // matches specified regExp + regExp: function(value, regExp) { + if(regExp instanceof RegExp) { + return value.match(regExp); + } + var + regExpParts = regExp.match($.fn.form.settings.regExp.flags), + flags + ; + // regular expression specified as /baz/gi (flags) + if(regExpParts) { + regExp = (regExpParts.length >= 2) + ? regExpParts[1] + : regExp + ; + flags = (regExpParts.length >= 3) + ? regExpParts[2] + : '' + ; + } + return value.match( new RegExp(regExp, flags) ); + }, + + // is valid integer or matches range + integer: function(value, range) { + var + intRegExp = $.fn.form.settings.regExp.integer, + min, + max, + parts + ; + if( !range || ['', '..'].indexOf(range) !== -1) { + // do nothing + } + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { + min = max = range - 0; + } + } + else { + parts = range.split('..', 2); + if(intRegExp.test(parts[0])) { + min = parts[0] - 0; + } + if(intRegExp.test(parts[1])) { + max = parts[1] - 0; + } + } + return ( + intRegExp.test(value) && + (min === undefined || value >= min) && + (max === undefined || value <= max) + ); + }, + + // is valid number (with decimal) + decimal: function(value) { + return $.fn.form.settings.regExp.decimal.test(value); + }, + + // is valid number + number: function(value) { + return $.fn.form.settings.regExp.number.test(value); + }, + + // is value (case insensitive) + is: function(value, text) { + text = (typeof text == 'string') + ? text.toLowerCase() + : text + ; + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + return (value == text); + }, + + // is value + isExactly: function(value, text) { + return (value == text); + }, + + // value is not another value (case insensitive) + not: function(value, notValue) { + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + notValue = (typeof notValue == 'string') + ? notValue.toLowerCase() + : notValue + ; + return (value != notValue); + }, + + // value is not another value (case sensitive) + notExactly: function(value, notValue) { + return (value != notValue); + }, + + // value contains text (insensitive) + contains: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) !== -1); + }, + + // value contains text (case sensitive) + containsExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) !== -1); + }, + + // value contains text (insensitive) + doesntContain: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) === -1); + }, + + // value contains text (case sensitive) + doesntContainExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) === -1); + }, + + // is at least string length + minLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // see rls notes for 2.0.6 (this is a duplicate of minLength) + length: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // is exactly length + exactLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length == requiredLength) + : false + ; + }, + + // is less than length + maxLength: function(value, maxLength) { + return (value !== undefined) + ? (value.length <= maxLength) + : false + ; + }, + + // matches another field + match: function(value, identifier) { + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() == matchingValue.toString() ) + : false + ; + }, + + // different than another field + different: function(value, identifier) { + // use either id or name of field + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() !== matchingValue.toString() ) + : false + ; + }, + + creditCard: function(cardNumber, cardTypes) { + var + cards = { + visa: { + pattern : /^4/, + length : [16] + }, + amex: { + pattern : /^3[47]/, + length : [15] + }, + mastercard: { + pattern : /^5[1-5]/, + length : [16] + }, + discover: { + pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/, + length : [16] + }, + unionPay: { + pattern : /^(62|88)/, + length : [16, 17, 18, 19] + }, + jcb: { + pattern : /^35(2[89]|[3-8][0-9])/, + length : [16] + }, + maestro: { + pattern : /^(5018|5020|5038|6304|6759|676[1-3])/, + length : [12, 13, 14, 15, 16, 17, 18, 19] + }, + dinersClub: { + pattern : /^(30[0-5]|^36)/, + length : [14] + }, + laser: { + pattern : /^(6304|670[69]|6771)/, + length : [16, 17, 18, 19] + }, + visaElectron: { + pattern : /^(4026|417500|4508|4844|491(3|7))/, + length : [16] + } + }, + valid = {}, + validCard = false, + requiredTypes = (typeof cardTypes == 'string') + ? cardTypes.split(',') + : false, + unionPay, + validation + ; + + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // allow dashes in card + cardNumber = cardNumber.replace(/[\-]/g, ''); + + // verify card types + if(requiredTypes) { + $.each(requiredTypes, function(index, type){ + // verify each card type + validation = cards[type]; + if(validation) { + valid = { + length : ($.inArray(cardNumber.length, validation.length) !== -1), + pattern : (cardNumber.search(validation.pattern) !== -1) + }; + if(valid.length && valid.pattern) { + validCard = true; + } + } + }); + + if(!validCard) { + return false; + } + } + + // skip luhn for UnionPay + unionPay = { + number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1), + pattern : (cardNumber.search(cards.unionPay.pattern) !== -1) + }; + if(unionPay.number && unionPay.pattern) { + return true; + } + + // verify luhn, adapted from + var + length = cardNumber.length, + multiple = 0, + producedValue = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + [0, 2, 4, 6, 8, 1, 3, 5, 7, 9] + ], + sum = 0 + ; + while (length--) { + sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)]; + multiple ^= 1; + } + return (sum % 10 === 0 && sum > 0); + }, + + minCount: function(value, minCount) { + if(minCount == 0) { + return true; + } + if(minCount == 1) { + return (value !== ''); + } + return (value.split(',').length >= minCount); + }, + + exactCount: function(value, exactCount) { + if(exactCount == 0) { + return (value === ''); + } + if(exactCount == 1) { + return (value !== '' && value.search(',') === -1); + } + return (value.split(',').length == exactCount); + }, + + maxCount: function(value, maxCount) { + if(maxCount == 0) { + return false; + } + if(maxCount == 1) { + return (value.search(',') === -1); + } + return (value.split(',').length <= maxCount); + } + } + +}; + +})( jQuery, window, document ); diff --git a/src/definitions/behaviors/state.js b/src/definitions/behaviors/state.js new file mode 100644 index 0000000..83f9ae7 --- /dev/null +++ b/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/src/definitions/behaviors/visibility.js b/src/definitions/behaviors/visibility.js new file mode 100644 index 0000000..fcffbd8 --- /dev/null +++ b/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/src/definitions/behaviors/visit.js b/src/definitions/behaviors/visit.js new file mode 100644 index 0000000..df88d0b --- /dev/null +++ b/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/src/definitions/collections/breadcrumb.less b/src/definitions/collections/breadcrumb.less new file mode 100755 index 0000000..67a4e31 --- /dev/null +++ b/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/src/definitions/collections/form.less b/src/definitions/collections/form.less new file mode 100755 index 0000000..6839e9a --- /dev/null +++ b/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:not(.unstackable) .fields > .field, + .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .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:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .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/src/definitions/collections/grid.less b/src/definitions/collections/grid.less new file mode 100755 index 0000000..ba1b535 --- /dev/null +++ b/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/src/definitions/collections/menu.less b/src/definitions/collections/menu.less new file mode 100755 index 0000000..defaad5 --- /dev/null +++ b/src/definitions/collections/menu.less @@ -0,0 +1,1972 @@ +/* + * # 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 { + 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; + } + + .ui.stackable.menu .right.menu, + .ui.stackable.menu .left.menu { + flex-direction: column; + } +} + +/*-------------- + 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.attached.item.menu { + margin: 0em @attachedHorizontalOffset !important; +} + +.ui.item.menu .item:last-child:before { + display: none; +} + +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.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/src/definitions/collections/message.less b/src/definitions/collections/message.less new file mode 100755 index 0000000..8712679 --- /dev/null +++ b/src/definitions/collections/message.less @@ -0,0 +1,481 @@ +/*! + * # 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; +} +.ui.compact.icon.message { + display: inline-flex; +} + + +/*-------------- + 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/src/definitions/collections/table.less b/src/definitions/collections/table.less new file mode 100755 index 0000000..b11eef8 --- /dev/null +++ b/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 !important; +} +.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/src/definitions/elements/button.less b/src/definitions/elements/button.less new file mode 100755 index 0000000..e5b2647 --- /dev/null +++ b/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/src/definitions/elements/container.less b/src/definitions/elements/container.less new file mode 100644 index 0000000..14b32f2 --- /dev/null +++ b/src/definitions/elements/container.less @@ -0,0 +1,143 @@ +/*! + * # Semantic UI - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'container'; + +@import (multiple) '../../theme.config'; + +/******************************* + Container +*******************************/ + +/* All Sizes */ +.ui.container { + display: block; + max-width: @maxWidth !important; +} + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.container { + width: @mobileWidth !important; + margin-left: @mobileGutter !important; + margin-right: @mobileGutter !important; + } + .ui.grid.container { + width: @mobileGridWidth !important; + } + .ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth !important; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.container { + width: @tabletWidth; + margin-left: @tabletGutter !important; + margin-right: @tabletGutter !important; + } + .ui.grid.container { + width: @tabletGridWidth !important; + } + .ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth !important; + } +} + +/* Small Monitor */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.container { + width: @computerWidth; + margin-left: @computerGutter !important; + margin-right: @computerGutter !important; + } + .ui.grid.container { + width: @computerGridWidth !important; + } + .ui.relaxed.grid.container { + width: @computerRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth !important; + } +} + +/* Large Monitor */ +@media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.container { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; + } + .ui.grid.container { + width: @largeMonitorGridWidth !important; + } + .ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth !important; + } +} + +/******************************* + Types +*******************************/ + + +/* Text Container */ +.ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth !important; + line-height: @textLineHeight; +} + +.ui.text.container { + font-size: @textSize; +} + +/* Fluid */ +.ui.fluid.container { + width: 100%; +} + + +/******************************* + Variations +*******************************/ + +.ui[class*="left aligned"].container { + text-align: left; +} +.ui[class*="center aligned"].container { + text-align: center; +} +.ui[class*="right aligned"].container { + text-align: right; +} +.ui.justified.container { + text-align: justify; + hyphens: auto; +} + + +.loadUIOverrides(); diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less new file mode 100755 index 0000000..28c0c68 --- /dev/null +++ b/src/definitions/elements/divider.less @@ -0,0 +1,255 @@ +/*! + * # Semantic UI - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'divider'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Divider +*******************************/ + +.ui.divider { + margin: @margin; + + line-height: 1; + height: 0em; + + font-weight: @fontWeight; + text-transform: @textTransform; + letter-spacing: @letterSpacing; + color: @color; + + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*-------------- + Basic +---------------*/ + +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + display: table; + white-space: nowrap; + + height: auto; + margin: @horizontalMargin; + line-height: 1; + text-align: center; +} + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; +} + +.ui.horizontal.divider:before { + background-position: right @horizontalDividerMargin top 50%; +} +.ui.horizontal.divider:after { + background-position: left @horizontalDividerMargin top 50%; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + + margin: 0rem; + padding: 0em; + width: auto; + height: 50%; + + line-height: 0em; + text-align: center; + transform: translateX(-50%); +} + +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + + border-left: @shadowWidth solid @shadowColor; + border-right: @highlightWidth solid @highlightColor; + + width: 0%; + height: @verticalDividerHeight; +} + +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} + +/* Inside grid */ +@media only screen and (max-width : @largestMobileScreen) { + + .ui.stackable.grid .ui.vertical.divider, + .ui.grid .stackable.row .ui.vertical.divider { + display: table; + white-space: nowrap; + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; + text-align: center; + position: static; + top: 0; + left: 0; + transform: none; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + position: static; + left: 0; + border-left: none; + border-right: none; + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before { + background-position: right @horizontalDividerMargin top 50%; + } + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-position: left @horizontalDividerMargin top 50%; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.divider > .icon { + margin: @dividerIconMargin; + font-size: @dividerIconSize; + height: 1em; + vertical-align: middle; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent !important; +} +.ui.hidden.divider:before, +.ui.hidden.divider:after { + display: none; +} + +/*-------------- + Inverted +---------------*/ + +.ui.divider.inverted, +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: @invertedTextColor; +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: @invertedShadowColor !important; + border-left-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; + border-right-color: @invertedHighlightColor !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.divider { + margin: 0em; +} + +/*-------------- + Clearing +---------------*/ + +.ui.clearing.divider { + clear: both; +} + +/*-------------- + Section +---------------*/ + +.ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: @medium; +} + + +.loadUIOverrides(); diff --git a/src/definitions/elements/flag.less b/src/definitions/elements/flag.less new file mode 100755 index 0000000..1f4145e --- /dev/null +++ b/src/definitions/elements/flag.less @@ -0,0 +1,52 @@ +/*! + * # Semantic UI - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'flag'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + + width: @width; + height: @height; + + line-height: @height; + vertical-align: @verticalAlign; + margin: 0em @margin 0em 0em; + + text-decoration: inherit; + + speak: none; + font-smoothing: antialiased; + backface-visibility: hidden; +} + +/* Sprite */ +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url(@spritePath) no-repeat -108px -1976px; + width: @width; + height: @height; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less new file mode 100755 index 0000000..07ef64f --- /dev/null +++ b/src/definitions/elements/header.less @@ -0,0 +1,708 @@ +/*! + * # Semantic UI - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'header'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Header +*******************************/ + +/* Standard */ +.ui.header { + border: none; + margin: @margin; + padding: @verticalPadding @horizontalPadding; + font-family: @fontFamily; + font-weight: @fontWeight; + line-height: @lineHeight; + text-transform: @textTransform; + color: @textColor; +} + +.ui.header:first-child { + margin-top: @firstMargin; +} +.ui.header:last-child { + margin-bottom: @lastMargin; +} + +/*-------------- + Sub Header +---------------*/ + +.ui.header .sub.header { + display: block; + font-weight: normal; + padding: 0em; + margin: @subHeaderMargin; + font-size: @subHeaderFontSize; + line-height: @subHeaderLineHeight; + color: @subHeaderColor; +} + +/*-------------- + Icon +---------------*/ + +.ui.header > .icon { + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: @iconMargin; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image:not(.icon), +.ui.header > img { + display: inline-block; + margin-top: @imageOffset; + width: @imageWidth; + height: @imageHeight; + vertical-align: @imageAlignment; +} +.ui.header > .image:not(.icon):only-child, +.ui.header > img:only-child { + margin-right: @imageMargin; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: @contentAlignment; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: @imageMargin; + vertical-align: @contentImageAlignment; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: @iconMargin; + display: table-cell; + vertical-align: @contentIconAlignment; +} + + +/*-------------- + Loose Coupling +---------------*/ + +.ui.header .ui.label { + font-size: @labelSize; + margin-left: @labelDistance; + vertical-align: @labelVerticalAlign; +} + +/* Positioning */ +.ui.header + p { + margin-top: @nextParagraphDistance; +} + + + +/******************************* + Types +*******************************/ + + +/*-------------- + Page +---------------*/ + +h1.ui.header { + font-size: @h1; +} +h2.ui.header { + font-size: @h2; +} +h3.ui.header { + font-size: @h3; +} +h4.ui.header { + font-size: @h4; +} +h5.ui.header { + font-size: @h5; +} + + +/* Sub Header */ +h1.ui.header .sub.header { + font-size: @h1SubHeaderFontSize; +} +h2.ui.header .sub.header { + font-size: @h2SubHeaderFontSize; +} +h3.ui.header .sub.header { + font-size: @h3SubHeaderFontSize; +} +h4.ui.header .sub.header { + font-size: @h4SubHeaderFontSize; +} +h5.ui.header .sub.header { + font-size: @h5SubHeaderFontSize; +} + + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: @hugeFontSize; +} +.ui.large.header { + font-size: @largeFontSize; +} +.ui.medium.header { + font-size: @mediumFontSize; +} +.ui.small.header { + font-size: @smallFontSize; +} +.ui.tiny.header { + font-size: @tinyFontSize; +} + +/* Sub Header */ +.ui.huge.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.large.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.header .sub.header { + font-size: @subHeaderFontSize; +} +.ui.small.header .sub.header { + font-size: @smallSubHeaderFontSize; +} +.ui.tiny.header .sub.header { + font-size: @tinySubHeaderFontSize; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; +} + +.ui.small.sub.header { + font-size: @smallSubHeadingSize; +} +.ui.sub.header { + font-size: @subHeadingFontSize; +} +.ui.large.sub.header { + font-size: @largeSubHeadingSize; +} +.ui.huge.sub.header { + font-size: @hugeSubHeadingSize; +} + + + +/*------------------- + Icon +--------------------*/ + +.ui.icon.header { + display: inline-block; + text-align: center; + margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; +} +.ui.icon.header:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; +} +.ui.icon.header .icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0em; + font-size: @iconHeaderSize; + margin: 0em auto @iconHeaderMargin; + opacity: @iconHeaderOpacity; +} +.ui.icon.header .content { + display: block; + padding: 0em; +} +.ui.icon.header .circular.icon { + font-size: @circularHeaderIconSize; +} +.ui.icon.header .square.icon { + font-size: @squareHeaderIconSize; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} + +/******************************* + States +*******************************/ + +.ui.disabled.header { + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.header { + color: @invertedColor; +} +.ui.inverted.header .sub.header { + color: @invertedSubHeaderColor; +} +.ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; +} +.ui.inverted.block.header { + border-bottom: none; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.header { + color: @red !important; +} +a.ui.red.header:hover { + color: @redHover !important; +} +.ui.red.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @red; +} + +/* Inverted */ +.ui.inverted.red.header { + color: @lightRed !important; +} +a.ui.inverted.red.header:hover { + color: @lightRedHover !important; +} + +/*--- Orange ---*/ +.ui.orange.header { + color: @orange !important; +} +a.ui.orange.header:hover { + color: @orangeHover !important; +} +.ui.orange.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @orange; +} +/* Inverted */ +.ui.inverted.orange.header { + color: @lightOrange !important; +} +a.ui.inverted.orange.header:hover { + color: @lightOrangeHover !important; +} + +/*--- Olive ---*/ +.ui.olive.header { + color: @olive !important; +} +a.ui.olive.header:hover { + color: @oliveHover !important; +} +.ui.olive.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @olive; +} +/* Inverted */ +.ui.inverted.olive.header { + color: @lightOlive !important; +} +a.ui.inverted.olive.header:hover { + color: @lightOliveHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.header { + color: @yellow !important; +} +a.ui.yellow.header:hover { + color: @yellowHover !important; +} +.ui.yellow.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @yellow; +} +/* Inverted */ +.ui.inverted.yellow.header { + color: @lightYellow !important; +} +a.ui.inverted.yellow.header:hover { + color: @lightYellowHover !important; +} + +/*--- Green ---*/ +.ui.green.header { + color: @green !important; +} +a.ui.green.header:hover { + color: @greenHover !important; +} +.ui.green.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @green; +} +/* Inverted */ +.ui.inverted.green.header { + color: @lightGreen !important; +} +a.ui.inverted.green.header:hover { + color: @lightGreenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.header { + color: @teal !important; +} +a.ui.teal.header:hover { + color: @tealHover !important; +} +.ui.teal.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @teal; +} +/* Inverted */ +.ui.inverted.teal.header { + color: @lightTeal !important; +} +a.ui.inverted.teal.header:hover { + color: @lightTealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.header { + color: @blue !important; +} +a.ui.blue.header:hover { + color: @blueHover !important; +} +.ui.blue.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @blue; +} +/* Inverted */ +.ui.inverted.blue.header { + color: @lightBlue !important; +} +a.ui.inverted.blue.header:hover { + color: @lightBlueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.header { + color: @violet !important; +} +a.ui.violet.header:hover { + color: @violetHover !important; +} +.ui.violet.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @violet; +} +/* Inverted */ +.ui.inverted.violet.header { + color: @lightViolet !important; +} +a.ui.inverted.violet.header:hover { + color: @lightVioletHover !important; +} + +/*--- Purple ---*/ +.ui.purple.header { + color: @purple !important; +} +a.ui.purple.header:hover { + color: @purpleHover !important; +} +.ui.purple.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @purple; +} +/* Inverted */ +.ui.inverted.purple.header { + color: @lightPurple !important; +} +a.ui.inverted.purple.header:hover { + color: @lightPurpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.header { + color: @pink !important; +} +a.ui.pink.header:hover { + color: @pinkHover !important; +} +.ui.pink.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @pink; +} +/* Inverted */ +.ui.inverted.pink.header { + color: @lightPink !important; +} +a.ui.inverted.pink.header:hover { + color: @lightPinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.header { + color: @brown !important; +} +a.ui.brown.header:hover { + color: @brownHover !important; +} +.ui.brown.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @brown; +} +/* Inverted */ +.ui.inverted.brown.header { + color: @lightBrown !important; +} +a.ui.inverted.brown.header:hover { + color: @lightBrownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.header { + color: @grey !important; +} +a.ui.grey.header:hover { + color: @greyHover !important; +} +.ui.grey.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @grey; +} +/* Inverted */ +.ui.inverted.grey.header { + color: @lightGrey !important; +} +a.ui.inverted.grey.header:hover { + color: @lightGreyHover !important; +} + + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; +} +.ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; +} +.ui.dividing.header .icon { + margin-bottom: @dividedIconPadding; +} + +.ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; +} + + +/*------------------- + Block +--------------------*/ + +.ui.block.header { + background: @blockBackground; + padding: @blockVerticalPadding @blockHorizontalPadding; + box-shadow: @blockBoxShadow; + border: @blockBorder; + border-radius: @blockBorderRadius; +} + +.ui.tiny.block.header { + font-size: @tinyBlock; +} +.ui.small.block.header { + font-size: @smallBlock; +} +.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumBlock; +} +.ui.large.block.header { + font-size: @largeBlock; +} +.ui.huge.block.header { + font-size: @hugeBlock; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached.block.header { + background: @blockBackground; +} + +.ui.attached:not(.top):not(.bottom).header { + margin-top: 0em; + margin-bottom: 0em; + border-top: none; + border-radius: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: @tinyAttachedSize; +} +.ui.small.attached.header { + font-size: @smallAttachedSize; +} +.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumAttachedSize; +} +.ui.large.attached.header { + font-size: @largeAttachedSize; +} +.ui.huge.attached.header { + font-size: @hugeAttachedSize; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumFontSize; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less new file mode 100755 index 0000000..d3ca190 --- /dev/null +++ b/src/definitions/elements/icon.less @@ -0,0 +1,501 @@ +/*! + * # Semantic UI - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'icon'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Icon +*******************************/ + +@font-face { + font-family: 'Icons'; + src: @fallbackSRC; + src: @src; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +i.icon { + display: inline-block; + opacity: @opacity; + + margin: 0em @distanceFromText 0em 0em; + + width: @width; + height: @height; + + font-family: 'Icons'; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + text-align: center; + + speak: none; + font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + backface-visibility: hidden; +} + +i.icon:before { + background: none !important; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Loading +---------------*/ + +i.icon.loading { + height: 1em; + line-height: 1; + animation: icon-loading @loadingDuration linear infinite; +} +@keyframes icon-loading { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/******************************* + States +*******************************/ + +i.icon.hover { + opacity: 1 !important; +} + +i.icon.active { + opacity: 1 !important; +} + +i.emphasized.icon { + opacity: 1 !important; +} + +i.disabled.icon { + opacity: @disabledOpacity !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Fitted +--------------------*/ + +i.fitted.icon { + width: auto; + margin: 0em; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon, i.link.icons { + cursor: pointer; + opacity: @linkOpacity; + transition: opacity @defaultDuration @defaultEasing; +} +i.link.icon:hover, i.link.icons:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + + padding: @circularPadding !important; + box-shadow: @circularShadow; + + width: @circularSize !important; + height: @circularSize !important; +} +i.circular.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; +} +i.bordered.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + +/* Inverted Shapes */ +i.inverted.bordered.icon, +i.inverted.circular.icon { + background-color: @black !important; + color: @white !important; +} + +i.inverted.icon { + color: @white; +} + + +/*------------------- + Colors +--------------------*/ + +/* Red */ +i.red.icon { + color: @red !important; +} +i.inverted.red.icon { + color: @lightRed !important; +} +i.inverted.bordered.red.icon, +i.inverted.circular.red.icon { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +i.orange.icon { + color: @orange !important; +} +i.inverted.orange.icon { + color: @lightOrange !important; +} +i.inverted.bordered.orange.icon, +i.inverted.circular.orange.icon { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +i.yellow.icon { + color: @yellow !important; +} +i.inverted.yellow.icon { + color: @lightYellow !important; +} +i.inverted.bordered.yellow.icon, +i.inverted.circular.yellow.icon { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +i.olive.icon { + color: @olive !important; +} +i.inverted.olive.icon { + color: @lightOlive !important; +} +i.inverted.bordered.olive.icon, +i.inverted.circular.olive.icon { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +i.green.icon { + color: @green !important; +} +i.inverted.green.icon { + color: @lightGreen !important; +} +i.inverted.bordered.green.icon, +i.inverted.circular.green.icon { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +i.teal.icon { + color: @teal !important; +} +i.inverted.teal.icon { + color: @lightTeal !important; +} +i.inverted.bordered.teal.icon, +i.inverted.circular.teal.icon { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +i.blue.icon { + color: @blue !important; +} +i.inverted.blue.icon { + color: @lightBlue !important; +} +i.inverted.bordered.blue.icon, +i.inverted.circular.blue.icon { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +i.violet.icon { + color: @violet !important; +} +i.inverted.violet.icon { + color: @lightViolet !important; +} +i.inverted.bordered.violet.icon, +i.inverted.circular.violet.icon { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +i.purple.icon { + color: @purple !important; +} +i.inverted.purple.icon { + color: @lightPurple !important; +} +i.inverted.bordered.purple.icon, +i.inverted.circular.purple.icon { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +i.pink.icon { + color: @pink !important; +} +i.inverted.pink.icon { + color: @lightPink !important; +} +i.inverted.bordered.pink.icon, +i.inverted.circular.pink.icon { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +i.brown.icon { + color: @brown !important; +} +i.inverted.brown.icon { + color: @lightBrown !important; +} +i.inverted.bordered.brown.icon, +i.inverted.circular.brown.icon { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +i.grey.icon { + color: @grey !important; +} +i.inverted.grey.icon { + color: @lightGrey !important; +} +i.inverted.bordered.grey.icon, +i.inverted.circular.grey.icon { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +i.black.icon { + color: @black !important; +} +i.inverted.black.icon { + color: @lightBlack !important; +} +i.inverted.bordered.black.icon, +i.inverted.circular.black.icon { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.mini.icon, +i.mini.icons { + line-height: 1; + font-size: @mini; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: @tiny; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: @small; +} +i.icon, +i.icons { + font-size: @medium; +} +i.large.icon, +i.large.icons { + line-height: 1; + vertical-align: middle; + font-size: @large; +} +i.big.icon, +i.big.icons { + line-height: 1; + vertical-align: middle; + font-size: @big; +} +i.huge.icon, +i.huge.icons { + line-height: 1; + vertical-align: middle; + font-size: @huge; +} +i.massive.icon, +i.massive.icons { + line-height: 1; + vertical-align: middle; + font-size: @massive; +} + +/******************************* + Groups +*******************************/ + +i.icons { + display: inline-block; + position: relative; + line-height: 1; +} + +i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + margin: 0em; + margin: 0; +} + +i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + transform: none; + margin-right: @distanceFromText; +} + +/* Corner Icon */ +i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + transform: none; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; +} +i.icons .top.right.corner.icon { + top: 0; + left: auto; + right: 0; + bottom: auto; +} +i.icons .top.left.corner.icon { + top: 0; + left: 0; + right: auto; + bottom: auto; +} +i.icons .bottom.left.corner.icon { + top: auto; + left: 0; + right: auto; + bottom: 0; +} +i.icons .bottom.right.corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; +} + +i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/image.less b/src/definitions/elements/image.less new file mode 100755 index 0000000..b996cde --- /dev/null +++ b/src/definitions/elements/image.less @@ -0,0 +1,324 @@ +/*! + * # Semantic UI - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'image'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Image +*******************************/ + +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: @placeholderColor; +} + +img.ui.image { + display: block; +} + +.ui.image svg, +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} + + +/******************************* + States +*******************************/ + +.ui.hidden.images, +.ui.hidden.image { + display: none; +} +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} + + +.ui.disabled.images, +.ui.disabled.image { + cursor: default; + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inline +---------------*/ + +.ui.inline.image, +.ui.inline.image svg, +.ui.inline.image img { + display: inline-block; +} + +/*------------------ + Vertical Aligned +-------------------*/ + +.ui.top.aligned.images .image, +.ui.top.aligned.image, +.ui.top.aligned.image svg, +.ui.top.aligned.image img { + display: inline-block; + vertical-align: top; +} +.ui.middle.aligned.images .image, +.ui.middle.aligned.image, +.ui.middle.aligned.image svg, +.ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; +} +.ui.bottom.aligned.images .image, +.ui.bottom.aligned.image, +.ui.bottom.aligned.image svg, +.ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; +} + +/*-------------- + Rounded +---------------*/ + +.ui.rounded.images .image, +.ui.rounded.image, +.ui.rounded.images .image > *, +.ui.rounded.image > * { + border-radius: @roundedBorderRadius; +} + +/*-------------- + Bordered +---------------*/ + +.ui.bordered.images .image, +.ui.bordered.images img, +.ui.bordered.images svg, +.ui.bordered.image img, +.ui.bordered.image svg, +img.ui.bordered.image { + border: @imageBorder; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images, +.ui.circular.image { + overflow: hidden; +} + +.ui.circular.images .image, +.ui.circular.image, +.ui.circular.images .image > *, +.ui.circular.image > * { + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.images svg, +.ui.fluid.image svg, +.ui.fluid.image img { + display: block; + width: 100%; + height: auto; +} + + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.images svg, +.ui.avatar.image img, +.ui.avatar.image svg, +.ui.avatar.image { + margin-right: @avatarMargin; + + display: inline-block; + width: @avatarSize; + height: @avatarSize; + + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*------------------- + Spaced +--------------------*/ + +.ui.spaced.image { + display: inline-block !important; + margin-left: @spacedDistance; + margin-right: @spacedDistance; +} + +.ui[class*="left spaced"].image { + margin-left: @spacedDistance; + margin-right: 0em; +} + +.ui[class*="right spaced"].image { + margin-left: 0em; + margin-right: @spacedDistance; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: @floatedHorizontalMargin; + margin-bottom: @floatedVerticalMargin; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-right: 0em; + margin-bottom: @floatedVerticalMargin; + margin-left: @floatedHorizontalMargin; +} + +.ui.floated.images:last-child, +.ui.floated.image:last-child { + margin-bottom: 0em; +} + + +.ui.centered.images, +.ui.centered.image { + margin-left: auto; + margin-right: auto; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.images svg, +.ui.mini.image { + width: @miniWidth; + height: auto; + font-size: @mini; +} +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.images svg, +.ui.tiny.image { + width: @tinyWidth; + height: auto; + font-size: @tiny; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.images svg, +.ui.small.image { + width: @smallWidth; + height: auto; + font-size: @small; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: @mediumWidth; + height: auto; + font-size: @medium; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.images svg, +.ui.large.image { + width: @largeWidth; + height: auto; + font-size: @large; +} +.ui.big.images .image, +.ui.big.images img, +.ui.big.images svg, +.ui.big.image { + width: @bigWidth; + height: auto; + font-size: @big; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.images svg, +.ui.huge.image { + width: @hugeWidth; + height: auto; + font-size: @huge; +} +.ui.massive.images .image, +.ui.massive.images img, +.ui.massive.images svg, +.ui.massive.image { + width: @massiveWidth; + height: auto; + font-size: @massive; +} + + +/******************************* + Groups +*******************************/ + +.ui.images { + font-size: 0em; + margin: 0em -@imageHorizontalMargin 0rem; +} + +.ui.images .image, +.ui.images img, +.ui.images svg { + display: inline-block; + margin: 0em @imageHorizontalMargin @imageVerticalMargin; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less new file mode 100755 index 0000000..0778af3 --- /dev/null +++ b/src/definitions/elements/input.less @@ -0,0 +1,508 @@ +/*! + * # Semantic UI - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'input'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: normal; + font-style: normal; + display: inline-flex; + color: @inputColor; +} +.ui.input input { + margin: 0em; + max-width: 100%; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: @textAlign; + line-height: @lineHeight; + + font-family: @inputFont; + padding: @padding; + + background: @background; + border: @border; + color: @inputColor; + border-radius: @borderRadius; + transition: @transition; + + box-shadow: @boxShadow; +} + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.input input::-webkit-input-placeholder { + color: @placeholderColor; +} +.ui.input input::-moz-placeholder { + color: @placeholderColor; +} +.ui.input input:-ms-input-placeholder { + color: @placeholderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input:not(.disabled) input[disabled] { + opacity: @disabledOpacity; +} + +.ui.disabled.input input, +.ui.input:not(.disabled) input[disabled] { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input input:active, +.ui.input.down input { + border-color: @downBorderColor; + background: @downBackground; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.loading.input > i.icon: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: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus input, +.ui.input input:focus { + border-color: @focusBorderColor; + background: @focusBackground; + color: @focusColor; + box-shadow: @focusBoxShadow; +} +.ui.input.focus input::-webkit-input-placeholder, +.ui.input input:focus::-webkit-input-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input::-moz-placeholder, +.ui.input input:focus::-moz-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus input:-ms-input-placeholder, +.ui.input input:focus:-ms-input-placeholder { + color: @placeholderFocusColor; +} + + + +/*-------------------- + Error +---------------------*/ + +.ui.input.error input { + background-color: @errorBackground; + border-color: @errorBorder; + color: @errorColor; + box-shadow: @errorBoxShadow; +} + +/* Error Placeholder */ +.ui.input.error input::-webkit-input-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input::-moz-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error input:-ms-input-placeholder { + color: @placeholderErrorColor !important; +} + +/* Focused Error Placeholder */ +.ui.input.error input:focus::-webkit-input-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus::-moz-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error input:focus:-ms-input-placeholder { + color: @placeholderErrorFocusColor !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + + +.ui.transparent.input input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !important; + border-radius: 0px !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: @transparentIconWidth; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: @transparentIconMargin !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: @transparentIconMargin !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: @transparentInvertedColor; +} +.ui.transparent.inverted.input input { + color: inherit; +} + +.ui.transparent.inverted.input input::-webkit-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input input:-ms-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} + + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + + width: @iconWidth; + opacity: @iconOpacity; + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @iconTransition; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input input { + padding-right: @iconMargin !important; +} + +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: @iconOffset; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: @circularIconVerticalOffset; + right: @circularIconHorizontalOffset; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: @borderWidth; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: @circularIconHorizontalOffset; +} +.ui[class*="left icon"].input > input { + padding-left: @iconMargin !important; + padding-right: @horizontalPadding !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + +/* Adjacent Label */ +.ui.labeled.input > .label { + flex: 0 0 auto; + margin: 0; + font-size: @relativeMedium; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: @focusBorderColor; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.ui[class*="right labeled"].input input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: @labelCornerTop; + right: @labelCornerRight; + font-size: @labelCornerSize; + border-radius: 0em @borderRadius 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { + padding-right: @labeledMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: @labeledIconInputMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: @labeledIconMargin; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input input { + padding-left: @labeledMargin !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: @labeledIconInputMargin !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: @labeledIconMargin; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: @borderWidth; + right: @borderWidth; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: @borderWidth; +} + + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: flex; + align-items: center; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), +.ui.action.input:not([class*="left action"]) > .button:not(:first-child), +.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px @borderRadius @borderRadius 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: @borderRadius 0px 0px @borderRadius; +} +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: @focusBorderColor !important; +} + +/*-------------------- + Inverted +---------------------*/ + +/* Standard */ +.ui.inverted.input input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: @relativeMini; +} +.ui.small.input { + font-size: @relativeSmall; +} +.ui.input { + font-size: @relativeMedium; +} +.ui.large.input { + font-size: @relativeLarge; +} +.ui.big.input { + font-size: @relativeBig; +} +.ui.huge.input { + font-size: @relativeHuge; +} +.ui.massive.input { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less new file mode 100755 index 0000000..7141666 --- /dev/null +++ b/src/definitions/elements/label.less @@ -0,0 +1,1257 @@ +/*! + * # Semantic UI - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'label'; + +@import (multiple) '../../theme.config'; + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: @verticalAlign; + + margin: @verticalMargin @horizontalMargin; + + background-color: @backgroundColor; + background-image: @backgroundImage; + padding: @verticalPadding @horizontalPadding; + color: @color; + + text-transform: @textTransform; + font-weight: @fontWeight; + + border: @border; + border-radius: @borderRadius; + transition: @transition; +} + +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: @linkOpacity; + transition: @linkTransition; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: @imageHeight !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em @iconDistance 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; +} +.ui.label > .detail .icon { + margin: 0em @detailIconDistance 0em 0em; +} + + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: @deleteMargin; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; +} + + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: @lineHeightOffset; +} + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached), +.ui.top.attached.label + [class*="right floated"] + * { + margin-top: @attachedSegmentPadding !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: @attachedSegmentPadding !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + + background: @imageLabelBackground; + padding: @imageLabelPadding; + border-radius: @imageLabelBorderRadius; + box-shadow: @imageLabelBoxShadow; +} + +.ui.image.label img { + display: inline-block; + vertical-align: top; + + height: @imageLabelImageHeight; + margin: @imageLabelImageMargin; + border-radius: @imageLabelImageBorderRadius; +} + +.ui.image.label .detail { + background: @imageLabelDetailBackground; + margin: @imageLabelDetailMargin; + padding: @imageLabelDetailPadding; + border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: @tagHorizontalPadding; + padding-right: @tagHorizontalPadding; + + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @tagTransition; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + transform: translateY(-50%) translateX(50%) rotate(-45deg); + + top: @tagTriangleTopOffset; + right: @tagTriangleRightOffset; + content: ''; + + background-color: inherit; + background-image: @tagTriangleBackgroundImage; + + width: @tagTriangleSize; + height: @tagTriangleSize; + transition: @tagTransition; +} + + +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -(@tagCircleSize / 2); + + margin-top: -(@tagCircleSize / 2); + background-color: @tagCircleColor !important; + width: @tagCircleSize; + height: @tagCircleSize; + + box-shadow: @tagCircleBoxShadow; + border-radius: @circularRadius; +} + + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + + border-color: @backgroundColor; + + width: @cornerTriangleSize; + height: @cornerTriangleSize; + z-index: @cornerTriangleZIndex; + transition: @cornerTriangleTransition; +} + +/* Icon Label */ +.ui.corner.label{ + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + + width: 0em; + height: 0em; + background-color: transparent !important; + + border-top: 0em solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: @cornerTriangleSize solid transparent; + border-left: 0em solid transparent; + + border-right-color: inherit; + transition: @cornerTriangleTransition; +} + +.ui.corner.label .icon { + cursor: default; + position: relative; + top: @cornerIconTopOffset; + left: @cornerIconLeftOffset; + font-size: @cornerIconSize; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: @cornerTriangleSize solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -@cornerIconLeftOffset; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: max-content; + border-radius: 0em @borderRadius @borderRadius 0em; + border-color: @ribbonShadowColor; +} + +.ui.ribbon.label:after { + position: absolute; + content: ''; + + top: 100%; + left: 0%; + background-color: transparent !important; + + border-style: solid; + border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; + border-color: transparent; + border-right-color: inherit; + + width: 0em; + height: 0em; +} +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + transform: translateX(-100%); + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + + border-style: solid; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: @ribbonImageTopDistance; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: @ribbonImageOffset; +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: @rightRibbonImageOffset; + padding-left: @horizontalPadding; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: @ribbonTableOffset; +} +.ui.table td > .ui[class*="right ribbon"].label { + left: @rightRibbonTableOffset; + padding-left: @horizontalPadding; +} + + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + + padding: @attachedVerticalPadding @attachedHorizontalPadding; + + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius; +} + +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em; +} + +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: @labelHoverBackgroundColor; + border-color: @labelHoverBackgroundColor; + + background-image: @labelHoverBackgroundImage; + color: @labelHoverTextColor; +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: @labelHoverTextColor; +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} +.ui.active.label:before { + background-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} + + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: @red !important; + border-color: @red !important; + color: @redTextColor !important; +} +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover{ + background-color: @redHover !important; + border-color: @redHover !important; + color: @redHoverTextColor !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.red.ribbon.label { + border-color: @redRibbonShadow !important; +} +/* Basic */ +.ui.basic.red.label { + background-color: @white !important; + color: @red !important; + border-color: @red !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: @white !important; + color: @redHover !important; + border-color: @redHover !important; +} + +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: @orange !important; + border-color: @orange !important; + color: @orangeTextColor !important; +} +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover{ + background-color: @orangeHover !important; + border-color: @orangeHover !important; + color: @orangeHoverTextColor !important; +} +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: @orangeRibbonShadow !important; +} +/* Basic */ +.ui.basic.orange.label { + background-color: @white !important; + color: @orange !important; + border-color: @orange !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: @white !important; + color: @orangeHover !important; + border-color: @orangeHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: @yellow !important; + border-color: @yellow !important; + color: @yellowTextColor !important; +} +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover{ + background-color: @yellowHover !important; + border-color: @yellowHover !important; + color: @yellowHoverTextColor !important; +} +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: @yellowRibbonShadow !important; +} +/* Basic */ +.ui.basic.yellow.label { + background-color: @white !important; + color: @yellow !important; + border-color: @yellow !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: @white !important; + color: @yellowHover !important; + border-color: @yellowHover !important; +} + +/*--- Olive ---*/ +.ui.olive.labels .label, +.ui.olive.label { + background-color: @olive !important; + border-color: @olive !important; + color: @oliveTextColor !important; +} +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover{ + background-color: @oliveHover !important; + border-color: @oliveHover !important; + color: @oliveHoverTextColor !important; +} +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.olive.label { + background-color: @white !important; + color: @olive !important; + border-color: @olive !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: @white !important; + color: @oliveHover !important; + border-color: @oliveHover !important; +} + +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: @green !important; + border-color: @green !important; + color: @greenTextColor !important; +} +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover{ + background-color: @greenHover !important; + border-color: @greenHover !important; + color: @greenHoverTextColor !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.green.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.green.label { + background-color: @white !important; + color: @green !important; + border-color: @green !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: @white !important; + color: @greenHover !important; + border-color: @greenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: @teal !important; + border-color: @teal !important; + color: @tealTextColor !important; +} +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover{ + background-color: @tealHover !important; + border-color: @tealHover !important; + color: @tealHoverTextColor !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: @tealRibbonShadow !important; +} +/* Basic */ +.ui.basic.teal.label { + background-color: @white !important; + color: @teal !important; + border-color: @teal !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: @white !important; + color: @tealHover !important; + border-color: @tealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: @blue !important; + border-color: @blue !important; + color: @blueTextColor !important; +} +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover{ + background-color: @blueHover !important; + border-color: @blueHover !important; + color: @blueHoverTextColor !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: @blueRibbonShadow !important; +} +/* Basic */ +.ui.basic.blue.label { + background-color: @white !important; + color: @blue !important; + border-color: @blue !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: @white !important; + color: @blueHover !important; + border-color: @blueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.labels .label, +.ui.violet.label { + background-color: @violet !important; + border-color: @violet !important; + color: @violetTextColor !important; +} +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover{ + background-color: @violetHover !important; + border-color: @violetHover !important; + color: @violetHoverTextColor !important; +} +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: @violetRibbonShadow !important; +} +/* Basic */ +.ui.basic.violet.label { + background-color: @white !important; + color: @violet !important; + border-color: @violet !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: @white !important; + color: @violetHover !important; + border-color: @violetHover !important; +} + +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: @purple !important; + border-color: @purple !important; + color: @purpleTextColor !important; +} +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover{ + background-color: @purpleHover !important; + border-color: @purpleHover !important; + color: @purpleHoverTextColor !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: @purpleRibbonShadow !important; +} +/* Basic */ +.ui.basic.purple.label { + background-color: @white !important; + color: @purple !important; + border-color: @purple !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: @white !important; + color: @purpleHover !important; + border-color: @purpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.labels .label, +.ui.pink.label { + background-color: @pink !important; + border-color: @pink !important; + color: @pinkTextColor !important; +} +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover{ + background-color: @pinkHover !important; + border-color: @pinkHover !important; + color: @pinkHoverTextColor !important; +} +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: @pinkRibbonShadow !important; +} +/* Basic */ +.ui.basic.pink.label { + background-color: @white !important; + color: @pink !important; + border-color: @pink !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: @white !important; + color: @pinkHover !important; + border-color: @pinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.labels .label, +.ui.brown.label { + background-color: @brown !important; + border-color: @brown !important; + color: @brownTextColor !important; +} +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover{ + background-color: @brownHover !important; + border-color: @brownHover !important; + color: @brownHoverTextColor !important; +} +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.brown.label { + background-color: @white !important; + color: @brown !important; + border-color: @brown !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: @white !important; + color: @brownHover !important; + border-color: @brownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.labels .label, +.ui.grey.label { + background-color: @grey !important; + border-color: @grey !important; + color: @greyTextColor !important; +} +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover{ + background-color: @greyHover !important; + border-color: @greyHover !important; + color: @greyHoverTextColor !important; +} +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.grey.label { + background-color: @white !important; + color: @grey !important; + border-color: @grey !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: @white !important; + color: @greyHover !important; + border-color: @greyHover !important; +} + +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: @black !important; + border-color: @black !important; + color: @blackTextColor !important; +} +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover{ + background-color: @blackHover !important; + border-color: @blackHover !important; + color: @blackHoverTextColor !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.black.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.black.label { + background-color: @white !important; + color: @black !important; + border-color: @black !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: @white !important; + color: @blackHover !important; + border-color: @blackHover !important; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBorder; + box-shadow: @basicHoverBoxShadow; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: @invertedTextColor !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em @horizontalLabelMargin 0em 0em; + + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; +} + + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: @circularMinSize; + min-height: @circularMinSize; + + padding: @circularPadding !important; + + line-height: 1em; + text-align: center; + border-radius: @circularRadius; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: @emptyCircleSize; + height: @emptyCircleSize; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} + +.ui.attached.pointing.label { + position: absolute; +} + +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: @pointingBorderColor; +} +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + transform: rotate(45deg); + background-image: none; + + z-index: @pointingTriangleZIndex; + width: @pointingTriangleSize; + height: @pointingTriangleSize; + transition: @pointingTriangleTransition; +} + +/*--- Above ---*/ +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: @pointingVerticalDistance; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: @borderWidth 0px 0px @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} +/*--- Below ---*/ +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: @pointingVerticalDistance; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px @borderWidth @borderWidth 0px; + top: auto; + right: auto; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} +/*--- Left ---*/ +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: @pointingHorizontalDistance; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px @borderWidth @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: @pointingHorizontalDistance; +} +.ui[class*="right pointing"].label:before { + border-width: @borderWidth @borderWidth 0px 0px; + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: @basicPointingTriangleOffset; +} +/*--- Below ---*/ +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: -@basicPointingTriangleOffset; +} +/*--- Left ---*/ +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: @basicPointingTriangleOffset; +} +/*--- Right ---*/ +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: @basicPointingTriangleOffset; +} + + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: @floatingZIndex; + top: @floatingTopOffset; + left: 100%; + margin: 0em 0em 0em @floatingLeftOffset !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: @mini; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: @tiny; +} +.ui.small.labels .label, +.ui.small.label { + font-size: @small; +} +.ui.labels .label, +.ui.label { + font-size: @medium; +} +.ui.large.labels .label, +.ui.large.label { + font-size: @large; +} +.ui.big.labels .label, +.ui.big.label { + font-size: @big; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: @huge; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less new file mode 100755 index 0000000..b9c9cf4 --- /dev/null +++ b/src/definitions/elements/list.less @@ -0,0 +1,951 @@ +/*! + * # Semantic UI - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'list'; + +@import (multiple) '../../theme.config'; + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: @listStyleType; + margin: @margin; + padding: @verticalPadding @horizontalPadding; +} + +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list > .item, +.ui.list .list > .item { + display: list-item; + table-layout: fixed; + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemPadding; + line-height: @itemLineHeight; +} + +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list > .list > .item, +.ui.list > .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: @childListPadding; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + + +/* Icon */ +.ui.list .list > .item > i.icon, +.ui.list > .item > i.icon { + display: table-cell; + margin: 0em; + padding-top: @iconOffset; + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + transition: @iconTransition; +} +.ui.list .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + vertical-align: @iconVerticalAlign; +} + + +/* Image */ +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + vertical-align: @imageAlign; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: @imageDistance; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: @imageAlign; +} + +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { + display: inline-block; +} + +/* Content */ +.ui.list .list > .item > .content, +.ui.list > .item > .content { + line-height: @contentLineHeight; +} +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { + display: table-cell; + padding: 0em 0em 0em @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0em; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; +} + +/* Description */ +.ui.list .list > .item .description, +.ui.list > .item .description { + display: block; + color: @itemDescriptionColor; +} + +/* Child Link */ +.ui.list > .item a, +.ui.list .list > .item a { + cursor: pointer; +} + +/* Linking Item */ +.ui.list .list > a.item, +.ui.list > a.item { + cursor: pointer; + color: @itemLinkColor; +} +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: @itemLinkHoverColor; +} + +/* Linked Item Icons */ +.ui.list .list > a.item i.icon, +.ui.list > a.item i.icon { + color: @itemLinkIconColor; +} + +/* Header Link */ +.ui.list .list > .item a.header, +.ui.list > .item a.header { + cursor: pointer; + color: @itemHeaderLinkColor !important; +} +.ui.list .list > .item a.header:hover, +.ui.list > .item a.header:hover { + color: @itemHeaderLinkHoverColor !important; +} + +/* Floated Content */ +.ui[class*="left floated"].list { + float: left; +} +.ui[class*="right floated"].list { + float: right; +} + +.ui.list .list > .item [class*="left floated"], +.ui.list > .item [class*="left floated"] { + float: left; + margin: @leftFloatMargin; +} +.ui.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: @rightFloatMargin; +} + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list > .item, +.ui.menu .ui.list .list > .item { + display: list-item; + table-layout: fixed; + background-color: transparent; + + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemVerticalPadding @itemHorizontalPadding; + line-height: @itemLineHeight; +} +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0em; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0em; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: @horizontalSpacing; + font-size: 1rem; +} +.ui.horizontal.list:not(.celled) > .item:first-child { + margin-left: 0em !important; + padding-left: 0em !important; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +.ui.horizontal.list > .item > .image, +.ui.horizontal.list .list > .item > .image, +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list .list > .item > .icon, +.ui.horizontal.list > .item > .content, +.ui.horizontal.list .list > .item > .content { + vertical-align: @horizontalVerticalAlign; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Horizontal List */ +.ui.horizontal.list > .item > i.icon { + margin: 0em; + padding: 0em @horizontalIconDistance 0em 0em; +} +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { + pointer-events: none; + color: @disabledColor !important; +} +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { + color: @invertedDisabledColor !important; +} + +/*------------------- + Hover +--------------------*/ + +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { + color: @itemLinkIconHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { + color: @invertedIconLinkColor; +} +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { + color: @invertedHeaderColor; +} +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { + color: @invertedDescriptionColor; +} + +/* Item Link */ +.ui.inverted.list .list > a.item, +.ui.inverted.list > a.item { + cursor: pointer; + color: @invertedItemLinkColor; +} +.ui.inverted.list .list > a.item:hover, +.ui.inverted.list > a.item:hover { + color: @invertedItemLinkHoverColor; +} + + +/* Linking Content */ +.ui.inverted.list .item a:not(.ui) { + color: @invertedItemLinkColor !important; +} +.ui.inverted.list .item a:not(.ui):hover { + color: @invertedItemLinkHoverColor !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.list[class*="top aligned"] .image, +.ui.list[class*="top aligned"] .content, +.ui.list [class*="top aligned"] { + vertical-align: top !important; +} +.ui.list[class*="middle aligned"] .image, +.ui.list[class*="middle aligned"] .content, +.ui.list [class*="middle aligned"] { + vertical-align: middle !important; +} +.ui.list[class*="bottom aligned"] .image, +.ui.list[class*="bottom aligned"] .content, +.ui.list [class*="bottom aligned"] { + vertical-align: bottom !important; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: @linkListItemColor; + transition: @linkListTransition; +} +.ui.link.list a.item:hover, +.ui.link.list .item a:not(.ui):hover { + color: @linkListItemHoverColor; +} +.ui.link.list a.item:active, +.ui.link.list .item a:not(.ui):active { + color: @linkListItemDownColor; +} +.ui.link.list .active.item, +.ui.link.list .active.item a:not(.ui) { + color: @linkListItemActiveColor; +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a:not(.ui) { + color: @invertedLinkListItemColor; +} +.ui.inverted.link.list a.item:hover, +.ui.inverted.link.list .item a:not(.ui):hover { + color: @invertedLinkListItemHoverColor; +} +.ui.inverted.link.list a.item:active, +.ui.inverted.link.list .item a:not(.ui):active { + color: @invertedLinkListItemDownColor; +} +.ui.inverted.link.list a.active.item, +.ui.inverted.link.list .active.item a:not(.ui) { + color: @invertedLinkListItemActiveColor; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .list > .item, +.ui.selection.list > .item { + cursor: pointer; + background: @selectionListBackground; + padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; + margin: @selectionListItemMargin; + color: @selectionListColor; + border-radius: @selectionListItemBorderRadius; + transition: @selectionListTransition; +} +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { + margin-bottom: 0em; +} +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { + background: @selectionListHoverBackground; + color: @selectionListHoverColor; +} +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { + background: @selectionListDownBackground; + color: @selectionListDownColor; +} +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { + background: @selectionListActiveBackground; + color: @selectionListActiveColor; +} + +/* Inverted */ +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { + background: @invertedSelectionListBackground; + color: @invertedSelectionListColor; +} +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; +} +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; +} +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; +} + +/* Celled / Divided Selection List */ +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { + border-radius: 0em; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list > .item { + transition: @animatedListTransition; +} +.ui.animated.list:not(.horizontal) > .item:hover { + padding-left: @animatedListIndent; +} + +/*------------------- + Fitted +--------------------*/ +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { + padding-left: 0em; + padding-right: 0em; +} +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: @bulletDistance; +} +ul.ui.list li, +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { + user-select: none; + pointer-events: none; + position: absolute; + top: auto; + left: auto; + font-weight: normal; + margin-left: @bulletOffset; + content: @bulletCharacter; + opacity: @bulletOpacity; + color: @bulletColor; + vertical-align: @bulletVerticalAlign; +} + +ul.ui.list li:before, +.ui.bulleted.list .list > a.item:before, +.ui.bulleted.list > a.item:before { + color: @bulletLinkColor; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: @bulletChildDistance; +} + +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list > .item { + margin-left: @horizontalBulletSpacing; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list > .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li::before, +.ui.horizontal.bulleted.list > .item::before { + color: @horizontalBulletColor; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list > .item:first-child::before { + display: none; +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +.ui.ordered.list, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: @orderedCountDistance; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { + position: absolute; + top: auto; + left: auto; + user-select: none; + pointer-events: none; + margin-left: -(@orderedCountDistance); + counter-increment: @orderedCountName; + content: @orderedCountContent; + text-align: @orderedCountTextAlign; + color: @orderedCountColor; + vertical-align: @orderedCountVerticalAlign; + opacity: @orderedCountOpacity; +} + +ol.ui.inverted.list li:before, +.ui.ordered.inverted.list .list > .item:before, +.ui.ordered.inverted.list > .item:before { + color: @orderedInvertedCountColor; +} + +/* Value */ +.ui.ordered.list > .list > .item[data-value], +.ui.ordered.list > .item[data-value] { + content: attr(data-value); +} +ol.ui.list li[value]:before { + content: attr(value); +} + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: @orderedChildCountDistance; +} +ol.ui.list ol li:before, +.ui.ordered.list .list > .item:before { + margin-left: @orderedChildCountOffset; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0em @horizontalOrderedCountDistance 0em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list > .item { + border-top: @dividedBorder; +} +.ui.divided.list .list > .item { + border-top: @dividedChildListBorder; +} +.ui.divided.list .item .list > .item { + border-top: @dividedChildItemBorder; +} +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list > .item:first-child { + border-top-width: @dividedBorderWidth; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: @bulletDistance; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.divided.ordered.list .item .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Divided Selection */ +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { + margin: 0em; + border-radius: 0em; +} + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item:not(:first-child) { + padding-left: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item:not(:last-child) { + padding-right: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: @dividedBorder; + margin: 0em; + line-height: @horizontalDividedLineHeight; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; +} +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list > .item { + border-color: @dividedInvertedBorderColor; +} + + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: @celledBorder; + padding-left: @celledHorizontalPadding; + padding-right: @celledHorizontalPadding; +} +.ui.celled.list > .item:last-child { + border-bottom: @celledBorder; +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Sub Menu */ +.ui.celled.list .item .list > .item { + border-width: 0px; +} +.ui.celled.list .list > .item:first-child { + border-top-width: 0px; +} + +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list .list > .item, +.ui.celled.bulleted.list > .item { + padding-left: (@bulletDistance); +} +.ui.celled.bulleted.list .item .list { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.celled.ordered.list .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { + border-top: none; + border-left: @celledBorder; + margin: 0em; + padding-left: @horizontalCelledSpacing; + padding-right: @horizontalCelledSpacing; + + line-height: @horizontalCelledLineHeight; +} +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { + border-bottom: none; + border-right: @celledBorder; +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: @celledInvertedBorder; +} +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { + border-color: @celledInvertedBorder; +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { + padding-top: @relaxedItemVerticalPadding; +} +.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @relaxedItemVerticalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:first-child), +.ui.horizontal.relaxed.list > .item:not(:first-child) { + padding-left: @relaxedHorizontalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:last-child), +.ui.horizontal.relaxed.list > .item:not(:last-child) { + padding-right: @relaxedHorizontalPadding; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { + padding-top: @veryRelaxedItemVerticalPadding; +} +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @veryRelaxedItemVerticalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { + padding-left: @veryRelaxedHorizontalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { + padding-right: @veryRelaxedHorizontalPadding; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: @relativeMini; +} +.ui.tiny.list { + font-size: @relativeTiny; +} +.ui.small.list { + font-size: @relativeSmall; +} +.ui.list { + font-size: @relativeMedium; +} +.ui.large.list { + font-size: @relativeLarge; +} +.ui.big.list { + font-size: @relativeBig; +} +.ui.huge.list { + font-size: @relativeHuge; +} +.ui.massive.list { + font-size: @relativeMassive; +} + +.ui.mini.horizontal.list .list > .item, +.ui.mini.horizontal.list > .item { + font-size: @mini; +} +.ui.tiny.horizontal.list .list > .item, +.ui.tiny.horizontal.list > .item { + font-size: @tiny; +} +.ui.small.horizontal.list .list > .item, +.ui.small.horizontal.list > .item { + font-size: @small; +} +.ui.horizontal.list .list > .item, +.ui.horizontal.list > .item { + font-size: @medium; +} +.ui.large.horizontal.list .list > .item, +.ui.large.horizontal.list > .item { + font-size: @large; +} +.ui.big.horizontal.list .list > .item, +.ui.big.horizontal.list > .item { + font-size: @big; +} +.ui.huge.horizontal.list .list > .item, +.ui.huge.horizontal.list > .item { + font-size: @huge; +} +.ui.massive.horizontal.list .list > .item, +.ui.massive.horizontal.list > .item { + font-size: @massive; +} + +.loadUIOverrides(); + diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less new file mode 100755 index 0000000..40d5de6 --- /dev/null +++ b/src/definitions/elements/loader.less @@ -0,0 +1,332 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'loader'; + +@import (multiple) '../../theme.config'; + +/******************************* + Loader +*******************************/ + + +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: @loaderTopOffset; + left: @loaderLeftOffset; + margin: 0px; + text-align: center; + z-index: 1000; + transform: translateX(-50%) translateY(-50%); +} + +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} + +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + animation: loader @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @shapeBorderColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + +/* Active Animation */ +@keyframes loader { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Sizes */ +.ui.mini.loader:before, +.ui.mini.loader:after { + width: @mini; + height: @mini; + margin: @miniOffset; +} +.ui.tiny.loader:before, +.ui.tiny.loader:after { + width: @tiny; + height: @tiny; + margin: @tinyOffset; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: @small; + height: @small; + margin: @smallOffset; +} +.ui.loader:before, +.ui.loader:after { + width: @medium; + height: @medium; + margin: @mediumOffset; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: @large; + height: @large; + margin: @largeOffset; +} +.ui.big.loader:before, +.ui.big.loader:after { + width: @big; + height: @big; + margin: @bigOffset; +} +.ui.huge.loader:before, +.ui.huge.loader:after { + width: @huge; + height: @huge; + margin: @hugeOffset; +} +.ui.massive.loader:before, +.ui.massive.loader:after { + width: @massive; + height: @massive; + margin: @massiveOffset; +} + +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: @invertedLoaderTextColor; +} +.ui.dimmer .ui.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.dimmer .ui.loader:after { + border-color: @invertedShapeBorderColor; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: @loaderTextColor; +} +.ui.inverted.dimmer .ui.loader:before { + border-color: @loaderFillColor; +} +.ui.inverted.dimmer .ui.loader:after { + border-color: @shapeBorderColor; +} + +/******************************* + Types +*******************************/ + + +/*------------------- + Text +--------------------*/ + +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} + + +/******************************* + States +*******************************/ + +.ui.indeterminate.loader:after { + animation-direction: @indeterminateDirection; + animation-duration: @indeterminateSpeed; +} + +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + + +/* Loader */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: @mini; + height: @mini; + font-size: @miniFontSize; +} +.ui.inverted.dimmer .ui.tiny.loader, +.ui.tiny.loader { + width: @tiny; + height: @tiny; + font-size: @tinyFontSize; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: @small; + height: @small; + font-size: @smallFontSize; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: @medium; + height: @medium; + font-size: @mediumFontSize; +} +.ui.inverted.dimmer .ui.large.loader, +.ui.large.loader { + width: @large; + height: @large; + font-size: @largeFontSize; +} +.ui.inverted.dimmer .ui.big.loader, +.ui.big.loader { + width: @big; + height: @big; + font-size: @bigFontSize; +} +.ui.inverted.dimmer .ui.huge.loader, +.ui.huge.loader { + width: @huge; + height: @huge; + font-size: @hugeFontSize; +} +.ui.inverted.dimmer .ui.massive.loader, +.ui.massive.loader { + width: @massive; + height: @massive; + font-size: @massiveFontSize; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: @mini; + padding-top: (@mini + @textDistance); +} +.ui.tiny.text.loader { + min-width: @tiny; + padding-top: (@tiny + @textDistance); +} +.ui.small.text.loader { + min-width: @small; + padding-top: (@small + @textDistance); +} +.ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); +} +.ui.large.text.loader { + min-width: @large; + padding-top: (@large + @textDistance); +} +.ui.big.text.loader { + min-width: @big; + padding-top: (@big + @textDistance); +} +.ui.huge.text.loader { + min-width: @huge; + padding-top: (@huge + @textDistance); +} +.ui.massive.text.loader { + min-width: @massive; + padding-top: (@massive + @textDistance); +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.loader { + color: @invertedLoaderTextColor +} +.ui.inverted.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.inverted.loader:after { + border-top-color: @invertedLoaderLineColor; +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0em; + top: 0em; + transform: none; +} + +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* Centered Inline */ +.ui.centered.inline.loader.active, +.ui.centered.inline.loader.visible { + display: block; + margin-left: auto; + margin-right: auto; +} + + +.loadUIOverrides(); diff --git a/src/definitions/elements/rail.less b/src/definitions/elements/rail.less new file mode 100755 index 0000000..7eacee7 --- /dev/null +++ b/src/definitions/elements/rail.less @@ -0,0 +1,154 @@ +/*! + * # Semantic UI - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'rail'; + +@import (multiple) '../../theme.config'; + +/******************************* + Rails +*******************************/ + +.ui.rail { + position: absolute; + top: 0%; + width: @width; + height: @height; +} + +.ui.left.rail { + left: auto; + right: 100%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + +.ui.right.rail { + left: 100%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Internal +---------------*/ + +.ui.left.internal.rail { + left: 0%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +.ui.right.internal.rail { + left: auto; + right: 0%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + + +/*-------------- + Dividing +---------------*/ + +.ui.dividing.rail { + width: @dividingWidth; +} +.ui.left.dividing.rail { + padding: 0em @splitDividingDistance 0em 0em; + margin: 0em @splitDividingDistance 0em 0em; + border-right: @dividingBorder; +} +.ui.right.dividing.rail { + border-left: @dividingBorder; + padding: 0em 0em 0em @splitDividingDistance; + margin: 0em 0em 0em @splitDividingDistance; +} + +/*-------------- + Distance +---------------*/ + +.ui.close.rail { + width: @closeWidth; +} +.ui.close.left.rail { + padding: 0em @splitCloseDistance 0em 0em; + margin: 0em @splitCloseDistance 0em 0em; +} +.ui.close.right.rail { + padding: 0em 0em 0em @splitCloseDistance; + margin: 0em 0em 0em @splitCloseDistance; +} + +.ui.very.close.rail { + width: @veryCloseWidth; +} +.ui.very.close.left.rail { + padding: 0em @splitVeryCloseDistance 0em 0em; + margin: 0em @splitVeryCloseDistance 0em 0em; +} +.ui.very.close.right.rail { + padding: 0em 0em 0em @splitVeryCloseDistance; + margin: 0em 0em 0em @splitVeryCloseDistance; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.left.rail, +.ui.attached.right.rail { + padding: 0em; + margin: 0em; +} + +/*-------------- + Sizing +---------------*/ + +.ui.mini.rail { + font-size: @mini; +} +.ui.tiny.rail { + font-size: @tiny; +} +.ui.small.rail { + font-size: @small; +} +.ui.rail { + font-size: @medium; +} +.ui.large.rail { + font-size: @large; +} +.ui.big.rail { + font-size: @big; +} +.ui.huge.rail { + font-size: @huge; +} +.ui.massive.rail { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/definitions/elements/reveal.less b/src/definitions/elements/reveal.less new file mode 100755 index 0000000..353ba63 --- /dev/null +++ b/src/definitions/elements/reveal.less @@ -0,0 +1,265 @@ +/*! + * # Semantic UI - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'reveal'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} + +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: @topZIndex !important; + transition: @transition; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: @bottomZIndex !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: @activeZIndex !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.slide.reveal > .content { + display: block; + width: 100%; + float: left; + + margin: 0em; + transition: @slideTransition; +} + +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .visible.content { + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.up.reveal > .hidden.content { + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + +.ui.slide.down.reveal > .hidden.content { + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.move.reveal > .content { + display: block; + float: left; + + margin: 0em; + transition: @moveTransition; +} + +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} + + + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + transition-duration: @transitionDuration; + transform: rotate(0deg); +} + +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.content, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + transform: rotate(@rotateDegrees); +} + +.ui.rotate.left.reveal > .visible.content { + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + transform: rotate(-@rotateDegrees); +} + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + transition-delay: 0s !important; +} + + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: @medium !important; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less new file mode 100755 index 0000000..0294551 --- /dev/null +++ b/src/definitions/elements/segment.less @@ -0,0 +1,775 @@ +/*! + * # Semantic UI - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'segment'; + +@import (multiple) '../../theme.config'; + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: @background; + box-shadow: @boxShadow; + margin: @margin; + padding: @padding; + border-radius: @borderRadius; + border: @border; +} + +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} + + +/* Vertical */ +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + border-bottom: @borderWidth solid @borderColor; +} +.ui.vertical.segment:last-child { + border-bottom: none; +} + + +/*------------------- + Loose Coupling +--------------------*/ + +/* Header */ +.ui.inverted.segment > .ui.header { + color: @white; +} + +/* Label */ +.ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} + +/* Grid */ +.ui.page.grid.segment, +.ui.grid > .row > .ui.segment.column, +.ui.grid > .ui.segment.column { + padding-top: @pageGridMargin; + padding-bottom: @pageGridMargin; +} +.ui.grid.segment { + margin: @margin; + border-radius: @borderRadius; +} + +/* Table */ +.ui.basic.table.segment { + background: @background; + border: @border; + box-shadow: @boxShadow; +} +.ui[class*="very basic"].table.segment { + padding: @padding; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: @piledMargin 0em; + box-shadow: @piledBoxShadow; + z-index: @piledZIndex; +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: @white; + visibility: visible; + content: ''; + display: block; + height: 100%; + left: 0px; + position: absolute; + width: 100%; + border: @piledBorder; + box-shadow: @piledBoxShadow; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + transform: rotate(-@piledDegrees); + top: 0; + z-index: -2; +} +.ui.piled.segments:after, +.ui.piled.segment:after { + transform: rotate(@piledDegrees); + top: 0; + z-index: -1; +} + +/* Piled Attached */ +.ui[class*="top attached"].piled.segment { + margin-top: @piledMargin; + margin-bottom: 0em; +} +.ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0em; +} +.ui.piled.segment[class*="bottom attached"] { + margin-top: 0em; + margin-bottom: @piledMargin; +} +.ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Stacked +--------------------*/ + +.ui.stacked.segment { + padding-bottom: @stackedPadding; +} +.ui.stacked.segments:before, +.ui.stacked.segments:after, +.ui.stacked.segment:before, +.ui.stacked.segment:after { + content: ''; + position: absolute; + bottom: -(@stackedHeight / 2); + left: 0%; + + border-top: 1px solid @borderColor; + background: @stackedPageBackground; + + width: 100%; + height: @stackedHeight; + visibility: visible; +} +.ui.stacked.segments:before, +.ui.stacked.segment:before { + display: none; +} + +/* Add additional page */ +.ui.tall.stacked.segments:before, +.ui.tall.stacked.segment:before { + display: block; + bottom: 0px; +} + +/* Inverted */ +.ui.stacked.inverted.segments:before, +.ui.stacked.inverted.segments:after, +.ui.stacked.inverted.segment:before, +.ui.stacked.inverted.segment:after { + background-color: @subtleTransparentBlack; + border-top: 1px solid @selectedBorderColor; +} + +/*------------------- + Padded +--------------------*/ + +.ui.padded.segment { + padding: @paddedSegmentPadding; +} + +.ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; +} + +/* Padded vertical */ +.ui.padded.segment.vertical.segment, +.ui[class*="very padded"].vertical.segment { + padding-left: 0px; + padding-right: 0px; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + flex: 0 1 auto; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segments, +.ui.raised.segment { + box-shadow: @raisedBoxShadow; +} + + +/******************************* + Groups +*******************************/ + +/* Group */ +.ui.segments { + flex-direction: column; + position: relative; + margin: @groupedMargin; + border: @groupedBorder; + box-shadow: @groupedBoxShadow; + border-radius: @groupedBorderRadius; +} +.ui.segments:first-child { + margin-top: 0em; +} +.ui.segments:last-child { + margin-bottom: 0em; +} + + +/* Nested Segment */ +.ui.segments > .segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: @groupedSegmentMargin; + width: @groupedSegmentWidth; + box-shadow: @groupedSegmentBoxShadow; + border: @groupedSegmentBorder; + border-top: @groupedSegmentDivider; +} + +.ui.segments:not(.horizontal) > .segment:first-child { + top: @attachedTopOffset; + bottom: 0px; + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: @attachedBottomOffset; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Only */ +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: @borderRadius; +} + + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: @groupedSegmentDivider; + margin: @nestedGroupMargin; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0em; +} + +/* Horizontal Group */ +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: @background; + box-shadow: @boxShadow; + margin: @margin; + border-radius: @borderRadius; + border: @border; +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-top: @groupedSegmentDivider; +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + flex: 1 1 auto; + -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ + margin: 0em; + min-width: 0px; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; +} + +/* Border Fixes */ +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments > .segment:first-child { + border-left: none; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + border-radius: @borderRadius; + z-index: @loaderDimmerZIndex; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: segment-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 segment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; +} + +/*------------------- + Clearing +--------------------*/ + +.ui.clearing.segment:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: @coloredBorderSize solid @red !important; +} +.ui.inverted.red.segment { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: @coloredBorderSize solid @orange !important; +} +.ui.inverted.orange.segment { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: @coloredBorderSize solid @yellow !important; +} +.ui.inverted.yellow.segment { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: @coloredBorderSize solid @olive !important; +} +.ui.inverted.olive.segment { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: @coloredBorderSize solid @green !important; +} +.ui.inverted.green.segment { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: @coloredBorderSize solid @teal !important; +} +.ui.inverted.teal.segment { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: @coloredBorderSize solid @blue !important; +} +.ui.inverted.blue.segment { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: @coloredBorderSize solid @violet !important; +} +.ui.inverted.violet.segment { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: @coloredBorderSize solid @purple !important; +} +.ui.inverted.purple.segment { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: @coloredBorderSize solid @pink !important; +} +.ui.inverted.pink.segment { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: @coloredBorderSize solid @brown !important; +} +.ui.inverted.brown.segment { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: @coloredBorderSize solid @grey !important; +} +.ui.inverted.grey.segment { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: @coloredBorderSize solid @black !important; +} +.ui.inverted.black.segment { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="right aligned"].segment { + text-align: right; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui[class*="left floated"].segment { + float: left; + margin-right: @floatedDistance; +} +.ui[class*="right floated"].segment { + float: right; + margin-left: @floatedDistance; +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + border: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background: @invertedBackground; + color: @invertedTextColor; +} + +/* Nested */ +.ui.inverted.segment .segment { + color: @textColor; +} +.ui.inverted.segment .inverted.segment { + color: @invertedTextColor; +} + +/* Attached */ +.ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; +} + +/*------------------- + Emphasis +--------------------*/ + +/* Secondary */ +.ui.secondary.segment { + background: @secondaryBackground; + color: @secondaryColor; +} +.ui.secondary.inverted.segment { + background: @secondaryInvertedBackground; + color: @secondaryInvertedColor; +} + +/* Tertiary */ +.ui.tertiary.segment { + background: @tertiaryBackground; + color: @tertiaryColor; +} +.ui.tertiary.inverted.segment { + background: @tertiaryInvertedBackground; + color: @tertiaryInvertedColor; +} + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].segment { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui.segment[class*="bottom attached"] { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Size +--------------------*/ + +.ui.mini.segments .segment, +.ui.mini.segment { + font-size: @mini; +} +.ui.tiny.segments .segment, +.ui.tiny.segment { + font-size: @tiny; +} +.ui.small.segments .segment, +.ui.small.segment { + font-size: @small; +} +.ui.segments .segment, +.ui.segment { + font-size: @medium; +} +.ui.large.segments .segment, +.ui.large.segment { + font-size: @large; +} +.ui.big.segments .segment, +.ui.big.segment { + font-size: @big; +} +.ui.huge.segments .segment, +.ui.huge.segment { + font-size: @huge; +} +.ui.massive.segments .segment, +.ui.massive.segment { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less new file mode 100755 index 0000000..5c4aff2 --- /dev/null +++ b/src/definitions/elements/step.less @@ -0,0 +1,562 @@ +/*! + * # Semantic UI - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Step +*******************************/ + +/*-------------- + Load Theme +---------------*/ + +@type : 'element'; +@element : 'step'; + +@import (multiple) '../../theme.config'; + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: inline-flex; + flex-direction: row; + align-items: stretch; + margin: @stepMargin; + background: @stepsBackground; + box-shadow: @stepsBoxShadow; + line-height: @lineHeight; + border-radius: @stepsBorderRadius; + border: @stepsBorder; +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0em; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0em; +} + + +/******************************* + Singular +*******************************/ + +.ui.steps .step { + position: relative; + display: flex; + flex: 1 0 auto; + flex-wrap: wrap; + flex-direction: row; + vertical-align: middle; + align-items: center; + justify-content: @justifyContent; + + margin: @verticalMargin @horizontalMargin; + padding: @verticalPadding @horizontalPadding; + background: @background; + color: @textColor; + box-shadow: @boxShadow; + border-radius: @borderRadius; + border: @border; + border-right: @divider; + transition: @transition; +} + +/* Arrow */ +.ui.steps .step:after { + display: none; + position: absolute; + z-index: 2; + content: ''; + top: @arrowTopOffset; + right: @arrowRightOffset; + border: medium none; + background-color: @arrowBackgroundColor; + width: @arrowSize; + height: @arrowSize; + + border-style: solid; + border-color: @borderColor; + border-width: @arrowBorderWidth; + + transition: @transition; + transform: translateY(-50%) translateX(50%) rotate(-45deg); +} + +/* First Step */ +.ui.steps .step:first-child { + padding-left: @horizontalPadding; + border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em; +} +.ui.steps .step:last-child { + border-right: none; + margin-right: 0em; +} + +/* Only Step */ +.ui.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/******************************* + Content +*******************************/ + +/* Title */ +.ui.steps .step .title { + font-family: @titleFontFamily; + font-size: @titleFontSize; + font-weight: @titleFontWeight; +} +.ui.steps .step > .title { + width: 100%; +} + +/* Description */ +.ui.steps .step .description { + font-weight: @descriptionFontWeight; + font-size: @descriptionFontSize; + color: @descriptionColor; +} +.ui.steps .step > .description { + width: 100%; +} +.ui.steps .step .title ~ .description { + margin-top: @descriptionDistance; +} + +/* Icon */ +.ui.steps .step > .icon { + line-height: 1; + font-size: @iconSize; + margin: 0em @iconDistance 0em 0em; +} +.ui.steps .step > .icon, +.ui.steps .step > .icon ~ .content { + display: block; + flex: 0 1 auto; + align-self: @iconAlign; +} +.ui.steps .step > .icon ~ .content { + flex-grow: 1 0 auto; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > .icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Ordered +---------------*/ + +.ui.ordered.steps { + counter-reset: ordered; +} +.ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counters(ordered, "."); + align-self: @iconAlign; + margin-right: @iconDistance; + font-size: @iconSize; + counter-increment: ordered; + font-family: @orderedFontFamily; + font-weight: @orderedFontWeight; +} + +.ui.ordered.steps .step > * { + display: block; + align-self: @iconAlign; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: inline-flex; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + justify-content: flex-start; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @verticalDivider; +} +.ui.vertical.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.vertical.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .step:after { + top: @verticalArrowTopOffset; + right: @verticalArrowRightOffset; + border-width: @verticalArrowBorderWidth; +} + +.ui.vertical.steps .step:after { + display: @verticalArrowDisplay; +} +.ui.vertical.steps .active.step:after { + display: @verticalActiveArrowDisplay; +} +.ui.vertical.steps .step:last-child:after { + display: @verticalLastArrowDisplay; +} +.ui.vertical.steps .active.step:last-child:after { + display: @verticalActiveLastArrowDisplay; +} + + +/*--------------- + Responsive +----------------*/ + +/* Mobile (Default) */ +@media only screen and (max-width: (@largestMobileScreen)) { + + .ui.steps:not(.unstackable) { + display: inline-flex; + overflow: visible; + flex-direction: column; + } + .ui.steps:not(.unstackable) .step { + width: 100% !important; + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + } + .ui.steps:not(.unstackable) .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; + } + .ui.steps:not(.unstackable) .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; + } + + /* Arrow */ + .ui.steps:not(.unstackable) .step:after { + display: none !important; + } + + /* Content */ + .ui.steps:not(.unstackable) .step .content { + text-align: center; + } + + /* Icon */ + .ui.steps:not(.unstackable) .step > .icon, + .ui.ordered.steps:not(.unstackable) .step:before { + margin: 0em 0em @mobileIconDistance 0em; + } + +} + +/******************************* + States +*******************************/ + +/* Link Hover */ +.ui.steps .link.step:hover::after, +.ui.steps .link.step:hover, +.ui.steps a.step:hover::after, +.ui.steps a.step:hover { + background: @hoverBackground; + color: @hoverColor; +} + +/* Link Down */ +.ui.steps .link.step:active::after, +.ui.steps .link.step:active, +.ui.steps a.step:active::after, +.ui.steps a.step:active { + background: @downBackground; + color: @downColor; +} + +/* Active */ +.ui.steps .step.active { + cursor: auto; + background: @activeBackground; +} +.ui.steps .step.active:after { + background: @activeBackground; +} +.ui.steps .step.active .title { + color: @activeColor; +} +.ui.ordered.steps .step.active:before, +.ui.steps .active.step .icon { + color: @activeIconColor; +} + +/* Active Arrow */ +.ui.steps .step:after { + display: @arrowDisplay; +} +.ui.steps .active.step:after { + display: @activeArrowDisplay; +} +.ui.steps .step:last-child:after { + display: @lastArrowDisplay; +} +.ui.steps .active.step:last-child:after { + display: @activeLastArrowDisplay; +} + +/* Active Hover */ +.ui.steps .link.active.step:hover::after, +.ui.steps .link.active.step:hover, +.ui.steps a.active.step:hover::after, +.ui.steps a.active.step:hover { + cursor: pointer; + background: @activeHoverBackground; + color: @activeHoverColor; +} + +/* Completed */ +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: @completedColor; +} + +/* Disabled */ +.ui.steps .disabled.step { + cursor: auto; + background: @disabledBackground; + pointer-events: none; +} +.ui.steps .disabled.step, +.ui.steps .disabled.step .title, +.ui.steps .disabled.step .description { + color: @disabledColor; +} +.ui.steps .disabled.step:after { + background: @disabledBackground; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +/* Tablet Or Below */ +@media only screen and (max-width: @largestTabletScreen) { + +.ui[class*="tablet stackable"].steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} + +/* Steps */ +.ui[class*="tablet stackable"].steps .step { + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui[class*="tablet stackable"].steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui[class*="tablet stackable"].steps .step:after { + display: none !important; +} + +/* Content */ +.ui[class*="tablet stackable"].steps .step .content { + text-align: center; +} + +/* Icon */ +.ui[class*="tablet stackable"].steps .step > .icon, +.ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/*-------------- + Fluid +---------------*/ + +/* Fluid */ +.ui.fluid.steps { + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + +/* Top */ +.ui.attached.steps { + width: @attachedWidth !important; + margin: 0em @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0em 0em 0em; +} +.ui.attached.steps .step:last-child { + border-radius: 0em @stepsBorderRadius 0em 0em; +} + +/* Bottom */ +.ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0em; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:first-child { + border-radius: 0em 0em 0em @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius 0em; +} + +/*------------------- + Evenly Divided +--------------------*/ + +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + width: 100%; +} +.ui.one.steps > .step, +.ui.two.steps > .step, +.ui.three.steps > .step, +.ui.four.steps > .step, +.ui.five.steps > .step, +.ui.six.steps > .step, +.ui.seven.steps > .step, +.ui.eight.steps > .step { + flex-wrap: nowrap; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} + +/*------------------- + Sizes +--------------------*/ + + +.ui.mini.steps .step, +.ui.mini.step { + font-size: @mini; +} +.ui.tiny.steps .step, +.ui.tiny.step { + font-size: @tiny; +} +.ui.small.steps .step, +.ui.small.step { + font-size: @small; +} +.ui.steps .step, +.ui.step { + font-size: @medium; +} +.ui.large.steps .step, +.ui.large.step { + font-size: @large; +} +.ui.big.steps .step, +.ui.big.step { + font-size: @big; +} +.ui.huge.steps .step, +.ui.huge.step { + font-size: @huge; +} +.ui.massive.steps .step, +.ui.massive.step { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/src/definitions/globals/reset.less b/src/definitions/globals/reset.less new file mode 100755 index 0000000..7514d94 --- /dev/null +++ b/src/definitions/globals/reset.less @@ -0,0 +1,40 @@ +/*! + * # Semantic UI - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'reset'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reset +*******************************/ + +/* Border-Box */ +*, +*:before, +*:after { + box-sizing: inherit; +} +html { + box-sizing: border-box; +} + +/* iPad Input Shadows */ +input[type="text"], input[type="email"], input[type="search"], input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; /* mobile firefox too! */ +} + +.loadUIOverrides(); diff --git a/src/definitions/globals/site.js b/src/definitions/globals/site.js new file mode 100644 index 0000000..63cbd9d --- /dev/null +++ b/src/definitions/globals/site.js @@ -0,0 +1,487 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +$.site = $.fn.site = function(parameters) { + var + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.site.settings, parameters) + : $.extend({}, $.site.settings), + + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $document = $(document), + $module = $document, + element = this, + instance = $module.data(moduleNamespace), + + module, + returnedValue + ; + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function() { + module.fix.console(); + module.fix.requestAnimationFrame(); + }, + + fix: { + console: function() { + module.debug('Normalizing window.console'); + if (console === undefined || console.log === undefined) { + module.verbose('Console not available, normalizing events'); + module.disable.console(); + } + if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') { + module.verbose('Console group not available, normalizing events'); + window.console.group = function() {}; + window.console.groupEnd = function() {}; + window.console.groupCollapsed = function() {}; + } + if (typeof console.markTimeline == 'undefined') { + module.verbose('Mark timeline not available, normalizing events'); + window.console.markTimeline = function() {}; + } + }, + consoleClear: function() { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function() {}; + }, + requestAnimationFrame: function() { + module.debug('Normalizing requestAnimationFrame'); + if(window.requestAnimationFrame === undefined) { + module.debug('RequestAnimationFrame not available, normalizing event'); + window.requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + } + } + }, + + moduleExists: function(name) { + return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); + }, + + enabled: { + modules: function(modules) { + var + enabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(module.moduleExists(name)) { + enabledModules.push(name); + } + }); + return enabledModules; + } + }, + + disabled: { + modules: function(modules) { + var + disabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(!module.moduleExists(name)) { + disabledModules.push(name); + } + }); + return disabledModules; + } + }, + + change: { + setting: function(setting, value, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? (modules === 'all') + ? settings.modules + : [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + namespace = (module.moduleExists(name)) + ? $.fn[name].settings.namespace || false + : true, + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', setting, value, name); + $.fn[name].settings[setting] = value; + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', setting, value); + } + } + } + }); + }, + settings: function(newSettings, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', newSettings, name); + $.extend(true, $.fn[name].settings, newSettings); + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', newSettings); + } + } + } + }); + } + }, + + enable: { + console: function() { + module.console(true); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling debug for modules', modules); + module.change.setting('debug', true, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling verbose debug for modules', modules); + module.change.setting('verbose', true, modules, modifyExisting); + } + }, + disable: { + console: function() { + module.console(false); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling debug for modules', modules); + module.change.setting('debug', false, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling verbose debug for modules', modules); + module.change.setting('verbose', false, modules, modifyExisting); + } + }, + + console: function(enable) { + if(enable) { + if(instance.cache.console === undefined) { + module.error(error.console); + return; + } + module.debug('Restoring console function'); + window.console = instance.cache.console; + } + else { + module.debug('Disabling console function'); + instance.cache.console = window.console; + window.console = { + clear : function(){}, + error : function(){}, + group : function(){}, + groupCollapsed : function(){}, + groupEnd : function(){}, + info : function(){}, + log : function(){}, + markTimeline : function(){}, + warn : function(){} + }; + } + }, + + destroy: function() { + module.verbose('Destroying previous site for', $module); + $module + .removeData(moduleNamespace) + ; + }, + + cache: {}, + + setting: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; + } + else { + return module[name]; + } + }, + debug: function() { + if(settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.site.settings = { + + name : 'Site', + namespace : 'site', + + error : { + console : 'Console cannot be restored, most likely it was overwritten outside of module', + method : 'The method you called is not defined.' + }, + + debug : false, + verbose : false, + performance : true, + + modules: [ + 'accordion', + 'api', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'form', + 'modal', + 'nag', + 'popup', + 'rating', + 'shape', + 'sidebar', + 'state', + 'sticky', + 'tab', + 'transition', + 'visit', + 'visibility' + ], + + siteNamespace : 'site', + namespaceStub : { + cache : {}, + config : {}, + sections : {}, + section : {}, + utilities : {} + } + +}; + +// allows for selection of elements with data attributes +$.extend($.expr[ ":" ], { + data: ($.expr.createPseudo) + ? $.expr.createPseudo(function(dataName) { + return function(elem) { + return !!$.data(elem, dataName); + }; + }) + : function(elem, i, match) { + // support: jQuery < 1.8 + return !!$.data(elem, match[ 3 ]); + } +}); + + +})( jQuery, window, document ); diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less new file mode 100755 index 0000000..ecb86e6 --- /dev/null +++ b/src/definitions/globals/site.less @@ -0,0 +1,207 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'site'; + +@import (multiple) '../../theme.config'; + +/******************************* + Page +*******************************/ + +.loadFonts(); + +html, +body { + height: 100%; +} + +html { + font-size: @emSize; +} + +body { + margin: 0px; + padding: 0px; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; + font-smoothing: @fontSmoothing; +} + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0em; +} + +h1 { + min-height: 1rem; + font-size: @h1; +} +h2 { + font-size: @h2; +} +h3 { + font-size: @h3; +} +h4 { + font-size: @h4; +} +h5 { + font-size: @h5; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + + +/******************************* + Text +*******************************/ + +p { + margin: @paragraphMargin; + line-height: @paragraphLineHeight; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: @linkColor; + text-decoration: @linkUnderline; +} +a:hover { + color: @linkHoverColor; + text-decoration: @linkHoverUnderline; +} + + +/******************************* + Scrollbars +*******************************/ + +.addScrollbars() when (@useCustomScrollbars) { + + /* Force Simple Scrollbars */ + body ::-webkit-scrollbar { + -webkit-appearance: none; + width: @customScrollbarWidth; + } + body ::-webkit-scrollbar-track { + background: @trackBackground; + border-radius: @trackBorderRadius; + } + body ::-webkit-scrollbar-thumb { + cursor: pointer; + border-radius: @thumbBorderRadius; + background: @thumbBackground; + transition: @thumbTransition; + } + body ::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInactiveBackground; + } + body ::-webkit-scrollbar-thumb:hover { + background: @thumbHoverBackground; + } + + /* Inverted UI */ + body .ui.inverted::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb:hover { + background: @thumbInvertedHoverBackground; + } +} + +/******************************* + Highlighting +*******************************/ + +/* Site */ +::-webkit-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::-moz-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::selection { + background-color: @highlightBackground; + color: @highlightColor; +} + +/* Form */ +textarea::-webkit-selection, +input::-webkit-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::-moz-selection, +input::-moz-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::selection, +input::selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} + +.addScrollbars(); +.loadUIOverrides(); diff --git a/src/definitions/modules/accordion.js b/src/definitions/modules/accordion.js new file mode 100644 index 0000000..a6b327c --- /dev/null +++ b/src/definitions/modules/accordion.js @@ -0,0 +1,610 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.accordion = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous instance', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $title = $module.find(selector.title); + $content = $module.find(selector.content); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, + + event: { + click: function() { + module.toggle.call(this); + } + }, + + toggle: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) + ; + module.debug('Toggling visibility of content', $activeTitle); + if(isOpen || isOpening) { + if(settings.collapsible) { + module.close.call($activeTitle); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open.call($activeTitle); + } + }, + + open: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) + ; + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; + }, + + close: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) + ; + if((isActive || isOpening) && !isClosing) { + module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideUp(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; + module.reset.display.call(this); + settings.onClose.call(this); + settings.onChange.call(this); + }) + ; + } + }, + + closeOthers: function(index) { + var + $activeTitle = (index !== undefined) + ? $title.eq(index) + : $(this).closest(selector.title), + $parentTitles = $activeTitle.parents(selector.content).prev(selector.title), + $activeAccordion = $activeTitle.closest(selector.accordion), + activeSelector = selector.title + '.' + className.active + ':visible', + activeContent = selector.content + '.' + className.active + ':visible', + $openTitles, + $nestedTitles, + $openContents + ; + if(settings.closeNested) { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $openContents = $openTitles.next($content); + } + else { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); + $openTitles = $openTitles.not($nestedTitles); + $openContents = $openTitles.next($content); + } + if( ($openTitles.length > 0) ) { + module.debug('Exclusive enabled, closing other content', $openTitles); + $openTitles + .removeClass(className.active) + ; + $openContents + .removeClass(className.animating) + .stop(true, true) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $openContents + .children() + .transition({ + animation : 'fade out', + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $openContents + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $openContents + .slideUp(settings.duration , settings.easing, function() { + $(this).removeClass(className.active); + module.reset.display.call(this); + }) + ; + } + }, + + reset: { + + display: function() { + module.verbose('Removing inline display from element', this); + $(this).css('display', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + opacity: function() { + module.verbose('Removing inline opacity from element', this); + $(this).css('opacity', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + module.debug('Changing internal', name, value); + if(value !== undefined) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else { + module[name] = value; + } + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.debug.apply(console, arguments); + } + } + }, + verbose: function() { + if(!settings.silent && settings.verbose && settings.debug) { + if(settings.performance) { + module.performance.log(arguments); + } + else { + module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); + module.verbose.apply(console, arguments); + } + } + }, + error: function() { + if(!settings.silent) { + module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); + module.error.apply(console, arguments); + } + }, + performance: { + log: function(message) { + var + currentTime, + executionTime, + previousTime + ; + if(settings.performance) { + currentTime = new Date().getTime(); + previousTime = time || currentTime; + executionTime = currentTime - previousTime; + time = currentTime; + performance.push({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + + name : 'Accordion', + namespace : 'accordion', + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // event on title that opens accordion + + observeChanges : true, // whether accordion should automatically refresh on DOM insertion + + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + + onOpening : function(){}, // callback before open animation + onOpen : function(){}, // callback after open animation + onClosing : function(){}, // callback before closing animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active', + animating : 'animating' + }, + + selector : { + accordion : '.accordion', + title : '.title', + trigger : '.title', + content : '.content' + } + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); + diff --git a/src/definitions/modules/accordion.less b/src/definitions/modules/accordion.less new file mode 100755 index 0000000..835f490 --- /dev/null +++ b/src/definitions/modules/accordion.less @@ -0,0 +1,219 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'accordion'; + +@import (multiple) '../../theme.config'; + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .accordion { + max-width: 100%; +} +.ui.accordion .accordion { + margin: @childAccordionMargin; + padding: @childAccordionPadding; +} + +/* Title */ +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; +} + +/* Default Styling */ +.ui.accordion .title:not(.ui) { + padding: @titlePadding; + font-family: @titleFont; + font-size: @titleFontSize; + color: @titleColor; +} + +/* Content */ +.ui.accordion .title ~ .content, +.ui.accordion .accordion .title ~ .content { + display: none; +} + +/* Default Styling */ +.ui.accordion:not(.styled) .title ~ .content:not(.ui), +.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { + margin: @contentMargin; + padding: @contentPadding; +} +.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { + padding-bottom: 0em; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: @iconDisplay; + float: @iconFloat; + opacity: @iconOpacity; + width: @iconWidth; + height: @iconHeight; + margin: @iconMargin; + padding: @iconPadding; + font-size: @iconFontSize; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + transform: @iconTransform; +} + +/*-------------- + Coupling +---------------*/ + +/* Menu */ +.ui.accordion.menu .item .title { + display: block; + padding: @menuTitlePadding; +} +.ui.accordion.menu .item .title > .dropdown.icon { + float: @menuIconFloat; + margin: @menuIconMargin; + transform: @menuIconTransform; +} + +/* Header */ +.ui.accordion .ui.header .dropdown.icon { + font-size: @iconFontSize; + margin: @iconMargin; +} + +/******************************* + States +*******************************/ + +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + transform: @activeIconTransform; +} + +.ui.accordion.menu .item .active.title > .dropdown.icon { + transform: @activeIconTransform; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Styled +---------------*/ + +.ui.styled.accordion { + width: @styledWidth; +} + +.ui.styled.accordion, +.ui.styled.accordion .accordion { + border-radius: @styledBorderRadius; + background: @styledBackground; + box-shadow: @styledBoxShadow; +} +.ui.styled.accordion .title, +.ui.styled.accordion .accordion .title { + margin: @styledTitleMargin; + padding: @styledTitlePadding; + color: @styledTitleColor; + font-weight: @styledTitleFontWeight; + border-top: @styledTitleBorder; + transition: @styledTitleTransition; +} +.ui.styled.accordion > .title:first-child, +.ui.styled.accordion .accordion .title:first-child { + border-top: none; +} + + +/* Content */ +.ui.styled.accordion .content, +.ui.styled.accordion .accordion .content { + margin: @styledContentMargin; + padding: @styledContentPadding; +} +.ui.styled.accordion .accordion .content { + padding: @styledChildContentMargin; + padding: @styledChildContentPadding; +} + + +/* Hover */ +.ui.styled.accordion .title:hover, +.ui.styled.accordion .active.title, +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledTitleHoverBackground; + color: @styledTitleHoverColor; +} +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledHoverChildTitleBackground; + color: @styledHoverChildTitleColor; +} + + +/* Active */ +.ui.styled.accordion .active.title { + background: @styledActiveTitleBackground; + color: @styledActiveTitleColor; +} +.ui.styled.accordion .accordion .active.title { + background: @styledActiveChildTitleBackground; + color: @styledActiveChildTitleColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Active +---------------*/ + +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.accordion .title:not(.ui) { + color: @invertedTitleColor; +} + +.loadUIOverrides(); + diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js new file mode 100644 index 0000000..4c92984 --- /dev/null +++ b/src/definitions/modules/checkbox.js @@ -0,0 +1,831 @@ +/*! + * # Semantic UI - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.checkbox = function(parameters) { + var + $allModules = $(this), + moduleSelector = $allModules.selector || '', + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = $.extend(true, {}, $.fn.checkbox.settings, parameters), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), + + observer, + element = this, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing checkbox', settings); + + module.create.label(); + module.bind.events(); + + module.set.tabbable(); + module.hide.input(); + + module.observeChanges(); + module.instantiate(); + module.setup(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying module'); + module.unbind.events(); + module.show.input(); + $module.removeData(moduleNamespace); + }, + + fix: { + reference: function() { + if( $module.is(selector.input) ) { + module.debug('Behavior called on adjusting invoked element'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + + setup: function() { + module.set.initialLoad(); + if( module.is.indeterminate() ) { + module.debug('Initial value is indeterminate'); + module.indeterminate(); + } + else if( module.is.checked() ) { + module.debug('Initial value is checked'); + module.check(); + } + else { + module.debug('Initial value is unchecked'); + module.uncheck(); + } + module.remove.initialLoad(); + }, + + refresh: function() { + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modifying z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modifying z-index to be selectable'); + $input.removeClass(className.hidden); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + attachEvents: function(selector, event) { + var + $element = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($element.length > 0) { + module.debug('Attaching checkbox events to element', selector, event); + $element + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound); + } + }, + + event: { + click: function(event) { + var + $target = $(event.target) + ; + if( $target.is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + if( $target.is(selector.link) ) { + module.debug('Clicking link inside checkbox, skipping toggle'); + return; + } + module.toggle(); + $input.focus(); + event.preventDefault(); + }, + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + space : 32, + escape : 27 + } + ; + if(key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.blur(); + shortcutPressed = true; + } + else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } + else { + shortcutPressed = false; + } + }, + keyup: function(event) { + if(shortcutPressed) { + event.preventDefault(); + } + } + }, + + check: function() { + if( !module.should.allowCheck() ) { + return; + } + module.debug('Checking checkbox', $input); + module.set.checked(); + if( !module.should.ignoreCallbacks() ) { + settings.onChecked.call(input); + settings.onChange.call(input); + } + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + settings.onChange.call(input); + } + }, + + indeterminate: function() { + if( module.should.allowIndeterminate() ) { + module.debug('Checkbox is already indeterminate'); + return; + } + module.debug('Making checkbox indeterminate'); + module.set.indeterminate(); + if( !module.should.ignoreCallbacks() ) { + settings.onIndeterminate.call(input); + settings.onChange.call(input); + } + }, + + determinate: function() { + if( module.should.allowDeterminate() ) { + module.debug('Checkbox is already determinate'); + return; + } + module.debug('Making checkbox determinate'); + module.set.determinate(); + if( !module.should.ignoreCallbacks() ) { + settings.onDeterminate.call(input); + settings.onChange.call(input); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + settings.onEnable.call(input); + // preserve legacy callbacks + settings.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisable.call(input); + // preserve legacy callbacks + settings.onDisabled.call(input); + }, + + get: { + radios: function() { + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); + }, + otherRadios: function() { + return module.get.radios().not($module); + }, + name: function() { + return $input.attr('name'); + } + }, + + is: { + initialLoad: function() { + return initialLoad; + }, + radio: function() { + return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); + }, + indeterminate: function() { + return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); + }, + checked: function() { + return $input.prop('checked') !== undefined && $input.prop('checked'); + }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, + unchecked: function() { + return !module.is.checked(); + } + }, + + should: { + allowCheck: function() { + if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(settings.beforeChecked.apply(input) === false) { + module.debug('Should not allow check, beforeChecked cancelled'); + return false; + } + return true; + }, + allowUncheck: function() { + if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + forceCallbacks: function() { + return (module.is.initialLoad() && settings.fireOnInit); + }, + ignoreCallbacks: function() { + return (initialLoad && !settings.fireOnInit); + } + }, + + can: { + change: function() { + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); + }, + uncheck: function() { + return (typeof settings.uncheckable === 'boolean') + ? settings.uncheckable + : !module.is.radio() + ; + } + }, + + set: { + initialLoad: function() { + initialLoad = true; + }, + checked: function() { + module.verbose('Setting class to checked'); + $module + .removeClass(className.indeterminate) + .addClass(className.checked) + ; + if( module.is.radio() ) { + module.uncheckOthers(); + } + if(!module.is.indeterminate() && module.is.checked()) { + module.debug('Input is already checked, skipping input property change'); + return; + } + module.verbose('Setting state to checked', input); + $input + .prop('indeterminate', false) + .prop('checked', true) + ; + module.trigger.change(); + }, + unchecked: function() { + module.verbose('Removing checked class'); + $module + .removeClass(className.indeterminate) + .removeClass(className.checked) + ; + if(!module.is.indeterminate() && module.is.unchecked() ) { + module.debug('Input is already unchecked'); + return; + } + module.debug('Setting state to unchecked'); + $input + .prop('indeterminate', false) + .prop('checked', false) + ; + module.trigger.change(); + }, + indeterminate: function() { + module.verbose('Setting class to indeterminate'); + $module + .addClass(className.indeterminate) + ; + if( module.is.indeterminate() ) { + module.debug('Input is already indeterminate, skipping input property change'); + return; + } + module.debug('Setting state to indeterminate'); + $input + .prop('indeterminate', true) + ; + module.trigger.change(); + }, + determinate: function() { + module.verbose('Removing indeterminate class'); + $module + .removeClass(className.indeterminate) + ; + if( module.is.determinate() ) { + module.debug('Input is already determinate, skipping input property change'); + return; + } + module.debug('Setting state to determinate'); + $input + .prop('indeterminate', false) + ; + }, + disabled: function() { + module.verbose('Setting class to disabled'); + $module + .addClass(className.disabled) + ; + if( module.is.disabled() ) { + module.debug('Input is already disabled, skipping input property change'); + return; + } + module.debug('Setting state to disabled'); + $input + .prop('disabled', 'disabled') + ; + module.trigger.change(); + }, + enabled: function() { + module.verbose('Removing disabled class'); + $module.removeClass(className.disabled); + if( module.is.enabled() ) { + module.debug('Input is already enabled, skipping input property change'); + return; + } + module.debug('Setting state to enabled'); + $input + .prop('disabled', false) + ; + module.trigger.change(); + }, + tabbable: function() { + module.verbose('Adding tabindex to checkbox'); + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } + } + }, + + remove: { + initialLoad: function() { + initialLoad = false; + } + }, + + trigger: { + change: function() { + var + events = document.createEvent('HTMLEvents'), + inputElement = $input[0] + ; + if(inputElement) { + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + + create: { + label: function() { + if($input.prevAll(selector.label).length > 0) { + $input.prev(selector.label).detach().insertAfter($input); + module.debug('Moving existing label', $label); + } + else if( !module.has.label() ) { + $label = $('