From 823344c19094680e80e2b56449a243e183db8b06 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Mon, 14 Dec 2020 23:21:39 -0800 Subject: :star: --- semantic/src/definitions/behaviors/api.js | 1177 +++++ semantic/src/definitions/behaviors/form.js | 2033 ++++++++ semantic/src/definitions/behaviors/state.js | 711 +++ semantic/src/definitions/behaviors/visibility.js | 1313 ++++++ .../src/definitions/collections/breadcrumb.less | 122 + semantic/src/definitions/collections/form.less | 1112 +++++ semantic/src/definitions/collections/grid.less | 1947 ++++++++ semantic/src/definitions/collections/menu.less | 1939 ++++++++ semantic/src/definitions/collections/message.less | 414 ++ semantic/src/definitions/collections/table.less | 1322 ++++++ semantic/src/definitions/elements/button.less | 1881 ++++++++ semantic/src/definitions/elements/container.less | 160 + semantic/src/definitions/elements/divider.less | 298 ++ semantic/src/definitions/elements/emoji.less | 72 + semantic/src/definitions/elements/flag.less | 52 + semantic/src/definitions/elements/header.less | 487 ++ semantic/src/definitions/elements/icon.less | 374 ++ semantic/src/definitions/elements/image.less | 321 ++ semantic/src/definitions/elements/input.less | 565 +++ semantic/src/definitions/elements/label.less | 1032 ++++ semantic/src/definitions/elements/list.less | 1021 ++++ semantic/src/definitions/elements/loader.less | 416 ++ semantic/src/definitions/elements/placeholder.less | 248 + semantic/src/definitions/elements/rail.less | 147 + semantic/src/definitions/elements/reveal.less | 289 ++ semantic/src/definitions/elements/segment.less | 774 +++ semantic/src/definitions/elements/step.less | 630 +++ semantic/src/definitions/elements/text.less | 74 + semantic/src/definitions/globals/reset.less | 40 + semantic/src/definitions/globals/site.js | 493 ++ semantic/src/definitions/globals/site.less | 207 + semantic/src/definitions/modules/accordion.js | 618 +++ semantic/src/definitions/modules/accordion.less | 219 + semantic/src/definitions/modules/calendar.js | 1774 +++++++ semantic/src/definitions/modules/calendar.less | 195 + semantic/src/definitions/modules/checkbox.js | 876 ++++ semantic/src/definitions/modules/checkbox.less | 814 ++++ semantic/src/definitions/modules/dimmer.js | 753 +++ semantic/src/definitions/modules/dimmer.less | 390 ++ semantic/src/definitions/modules/dropdown.js | 4238 +++++++++++++++++ semantic/src/definitions/modules/dropdown.less | 1850 ++++++++ semantic/src/definitions/modules/embed.js | 709 +++ semantic/src/definitions/modules/embed.less | 160 + semantic/src/definitions/modules/modal.js | 1209 +++++ semantic/src/definitions/modules/modal.less | 583 +++ semantic/src/definitions/modules/nag.js | 492 ++ semantic/src/definitions/modules/nag.less | 158 + semantic/src/definitions/modules/popup.js | 1541 ++++++ semantic/src/definitions/modules/popup.less | 841 ++++ semantic/src/definitions/modules/progress.js | 1035 ++++ semantic/src/definitions/modules/progress.less | 618 +++ semantic/src/definitions/modules/rating.js | 554 +++ semantic/src/definitions/modules/rating.less | 177 + semantic/src/definitions/modules/search.js | 1565 +++++++ semantic/src/definitions/modules/search.less | 560 +++ semantic/src/definitions/modules/shape.js | 848 ++++ semantic/src/definitions/modules/shape.less | 155 + semantic/src/definitions/modules/sidebar.js | 1036 ++++ semantic/src/definitions/modules/sidebar.less | 654 +++ semantic/src/definitions/modules/slider.js | 1314 ++++++ semantic/src/definitions/modules/slider.less | 417 ++ semantic/src/definitions/modules/sticky.js | 957 ++++ semantic/src/definitions/modules/sticky.less | 74 + semantic/src/definitions/modules/tab.js | 1001 ++++ semantic/src/definitions/modules/tab.less | 91 + semantic/src/definitions/modules/toast.js | 872 ++++ semantic/src/definitions/modules/toast.less | 590 +++ semantic/src/definitions/modules/transition.js | 1109 +++++ semantic/src/definitions/modules/transition.less | 82 + semantic/src/definitions/views/ad.less | 297 ++ semantic/src/definitions/views/card.less | 978 ++++ semantic/src/definitions/views/comment.less | 291 ++ semantic/src/definitions/views/feed.less | 304 ++ semantic/src/definitions/views/item.less | 559 +++ semantic/src/definitions/views/statistic.less | 421 ++ semantic/src/semantic.less | 72 + semantic/src/site/collections/breadcrumb.overrides | 3 + semantic/src/site/collections/breadcrumb.variables | 3 + semantic/src/site/collections/form.overrides | 3 + semantic/src/site/collections/form.variables | 3 + semantic/src/site/collections/grid.overrides | 3 + semantic/src/site/collections/grid.variables | 3 + semantic/src/site/collections/menu.overrides | 3 + semantic/src/site/collections/menu.variables | 3 + semantic/src/site/collections/message.overrides | 3 + semantic/src/site/collections/message.variables | 3 + semantic/src/site/collections/table.overrides | 3 + semantic/src/site/collections/table.variables | 3 + semantic/src/site/elements/button.overrides | 3 + semantic/src/site/elements/button.variables | 3 + semantic/src/site/elements/container.overrides | 3 + semantic/src/site/elements/container.variables | 3 + semantic/src/site/elements/divider.overrides | 3 + semantic/src/site/elements/divider.variables | 3 + semantic/src/site/elements/flag.overrides | 3 + semantic/src/site/elements/flag.variables | 3 + semantic/src/site/elements/header.overrides | 3 + semantic/src/site/elements/header.variables | 3 + semantic/src/site/elements/icon.overrides | 3 + semantic/src/site/elements/icon.variables | 3 + semantic/src/site/elements/image.overrides | 3 + semantic/src/site/elements/image.variables | 3 + semantic/src/site/elements/input.overrides | 3 + semantic/src/site/elements/input.variables | 3 + semantic/src/site/elements/label.overrides | 3 + semantic/src/site/elements/label.variables | 3 + semantic/src/site/elements/list.overrides | 3 + semantic/src/site/elements/list.variables | 3 + semantic/src/site/elements/loader.overrides | 3 + semantic/src/site/elements/loader.variables | 3 + semantic/src/site/elements/rail.overrides | 3 + semantic/src/site/elements/rail.variables | 3 + semantic/src/site/elements/reveal.overrides | 3 + semantic/src/site/elements/reveal.variables | 3 + semantic/src/site/elements/segment.overrides | 3 + semantic/src/site/elements/segment.variables | 3 + semantic/src/site/elements/step.overrides | 3 + semantic/src/site/elements/step.variables | 3 + semantic/src/site/globals/reset.overrides | 3 + semantic/src/site/globals/reset.variables | 3 + semantic/src/site/globals/site.overrides | 3 + semantic/src/site/globals/site.variables | 3 + semantic/src/site/modules/accordion.overrides | 3 + semantic/src/site/modules/accordion.variables | 3 + semantic/src/site/modules/chatroom.overrides | 3 + semantic/src/site/modules/chatroom.variables | 3 + semantic/src/site/modules/checkbox.overrides | 3 + semantic/src/site/modules/checkbox.variables | 3 + semantic/src/site/modules/dimmer.overrides | 3 + semantic/src/site/modules/dimmer.variables | 3 + semantic/src/site/modules/dropdown.overrides | 3 + semantic/src/site/modules/dropdown.variables | 3 + semantic/src/site/modules/embed.overrides | 3 + semantic/src/site/modules/embed.variables | 0 semantic/src/site/modules/modal.overrides | 3 + semantic/src/site/modules/modal.variables | 3 + semantic/src/site/modules/nag.overrides | 3 + semantic/src/site/modules/nag.variables | 3 + semantic/src/site/modules/popup.overrides | 3 + semantic/src/site/modules/popup.variables | 3 + semantic/src/site/modules/progress.overrides | 3 + semantic/src/site/modules/progress.variables | 3 + semantic/src/site/modules/rating.overrides | 3 + semantic/src/site/modules/rating.variables | 3 + semantic/src/site/modules/search.overrides | 3 + semantic/src/site/modules/search.variables | 3 + semantic/src/site/modules/shape.overrides | 3 + semantic/src/site/modules/shape.variables | 3 + semantic/src/site/modules/sidebar.overrides | 3 + semantic/src/site/modules/sidebar.variables | 3 + semantic/src/site/modules/sticky.overrides | 3 + semantic/src/site/modules/sticky.variables | 3 + semantic/src/site/modules/tab.overrides | 3 + semantic/src/site/modules/tab.variables | 3 + semantic/src/site/modules/transition.overrides | 3 + semantic/src/site/modules/transition.variables | 3 + semantic/src/site/views/ad.overrides | 3 + semantic/src/site/views/ad.variables | 3 + semantic/src/site/views/card.overrides | 3 + semantic/src/site/views/card.variables | 3 + semantic/src/site/views/comment.overrides | 3 + semantic/src/site/views/comment.variables | 3 + semantic/src/site/views/feed.overrides | 3 + semantic/src/site/views/feed.variables | 3 + semantic/src/site/views/item.overrides | 3 + semantic/src/site/views/item.variables | 3 + semantic/src/site/views/statistic.overrides | 3 + semantic/src/site/views/statistic.variables | 3 + semantic/src/theme.config | 98 + semantic/src/theme.less | 77 + .../src/themes/amazon/elements/button.overrides | 46 + .../src/themes/amazon/elements/button.variables | 58 + semantic/src/themes/amazon/globals/site.variables | 43 + semantic/src/themes/basic/assets/fonts/icons.eot | Bin 0 -> 40166 bytes semantic/src/themes/basic/assets/fonts/icons.svg | 450 ++ semantic/src/themes/basic/assets/fonts/icons.ttf | Bin 0 -> 39924 bytes semantic/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 + semantic/src/themes/basic/elements/icon.overrides | 189 + semantic/src/themes/basic/elements/icon.variables | 12 + semantic/src/themes/basic/elements/step.overrides | 10 + semantic/src/themes/basic/elements/step.variables | 18 + semantic/src/themes/basic/globals/reset.overrides | 5 + semantic/src/themes/basic/globals/reset.variables | 3 + .../src/themes/basic/modules/progress.overrides | 3 + .../src/themes/basic/modules/progress.variables | 15 + semantic/src/themes/basic/views/card.overrides | 4 + semantic/src/themes/basic/views/card.variables | 35 + .../src/themes/bookish/elements/header.overrides | 15 + .../src/themes/bookish/elements/header.variables | 37 + .../themes/bootstrap3/elements/button.overrides | 0 .../themes/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 + semantic/src/themes/chubby/views/comment.overrides | 12 + semantic/src/themes/chubby/views/comment.variables | 46 + .../src/themes/classic/collections/table.overrides | 3 + .../src/themes/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 + semantic/src/themes/classic/views/card.overrides | 98 + semantic/src/themes/classic/views/card.variables | 22 + .../src/themes/colored/modules/checkbox.overrides | 0 .../src/themes/colored/modules/checkbox.variables | 29 + .../themes/default/assets/fonts/brand-icons.eot | Bin 0 -> 133034 bytes .../themes/default/assets/fonts/brand-icons.svg | 3570 ++++++++++++++ .../themes/default/assets/fonts/brand-icons.ttf | Bin 0 -> 132728 bytes .../themes/default/assets/fonts/brand-icons.woff | Bin 0 -> 89824 bytes .../themes/default/assets/fonts/brand-icons.woff2 | Bin 0 -> 76612 bytes semantic/src/themes/default/assets/fonts/icons.eot | Bin 0 -> 202902 bytes semantic/src/themes/default/assets/fonts/icons.svg | 4938 ++++++++++++++++++++ semantic/src/themes/default/assets/fonts/icons.ttf | Bin 0 -> 202616 bytes .../src/themes/default/assets/fonts/icons.woff | Bin 0 -> 103300 bytes .../src/themes/default/assets/fonts/icons.woff2 | Bin 0 -> 79444 bytes .../themes/default/assets/fonts/outline-icons.eot | Bin 0 -> 34390 bytes .../themes/default/assets/fonts/outline-icons.svg | 803 ++++ .../themes/default/assets/fonts/outline-icons.ttf | Bin 0 -> 34092 bytes .../themes/default/assets/fonts/outline-icons.woff | Bin 0 -> 16800 bytes .../default/assets/fonts/outline-icons.woff2 | Bin 0 -> 13584 bytes .../src/themes/default/assets/images/flags.png | Bin 0 -> 28123 bytes .../default/collections/breadcrumb.overrides | 3 + .../default/collections/breadcrumb.variables | 38 + .../src/themes/default/collections/form.overrides | 3 + .../src/themes/default/collections/form.variables | 170 + .../src/themes/default/collections/grid.overrides | 4 + .../src/themes/default/collections/grid.variables | 119 + .../src/themes/default/collections/menu.overrides | 3 + .../src/themes/default/collections/menu.variables | 483 ++ .../themes/default/collections/message.overrides | 3 + .../themes/default/collections/message.variables | 234 + .../src/themes/default/collections/table.overrides | 0 .../src/themes/default/collections/table.variables | 250 + .../src/themes/default/elements/button.overrides | 3 + .../src/themes/default/elements/button.variables | 404 ++ .../themes/default/elements/container.overrides | 3 + .../themes/default/elements/container.variables | 58 + .../src/themes/default/elements/divider.overrides | 18 + .../src/themes/default/elements/divider.variables | 54 + .../src/themes/default/elements/emoji.overrides | 3094 ++++++++++++ .../src/themes/default/elements/emoji.variables | 18 + .../src/themes/default/elements/flag.overrides | 994 ++++ .../src/themes/default/elements/flag.variables | 13 + .../src/themes/default/elements/header.overrides | 4 + .../src/themes/default/elements/header.variables | 168 + .../src/themes/default/elements/icon.overrides | 2038 ++++++++ .../src/themes/default/elements/icon.variables | 95 + .../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 | 102 + .../src/themes/default/elements/label.overrides | 3 + .../src/themes/default/elements/label.variables | 268 ++ .../src/themes/default/elements/list.overrides | 3 + .../src/themes/default/elements/list.variables | 236 + .../src/themes/default/elements/loader.overrides | 3 + .../src/themes/default/elements/loader.variables | 73 + .../themes/default/elements/placeholder.overrides | 3 + .../themes/default/elements/placeholder.variables | 55 + .../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 | 18 + .../src/themes/default/elements/segment.overrides | 3 + .../src/themes/default/elements/segment.variables | 155 + .../src/themes/default/elements/step.overrides | 16 + .../src/themes/default/elements/step.variables | 139 + .../src/themes/default/elements/text.overrides | 3 + .../src/themes/default/elements/text.variables | 18 + semantic/src/themes/default/globals/colors.less | 615 +++ .../src/themes/default/globals/reset.overrides | 349 ++ .../src/themes/default/globals/reset.variables | 3 + semantic/src/themes/default/globals/site.overrides | 3 + semantic/src/themes/default/globals/site.variables | 1461 ++++++ .../src/themes/default/globals/variation.variables | 560 +++ .../src/themes/default/modules/accordion.overrides | 28 + .../src/themes/default/modules/accordion.variables | 100 + .../src/themes/default/modules/calendar.overrides | 3 + .../src/themes/default/modules/calendar.variables | 20 + .../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 | 220 + .../src/themes/default/modules/dimmer.overrides | 3 + .../src/themes/default/modules/dimmer.variables | 66 + .../src/themes/default/modules/dropdown.overrides | 62 + .../src/themes/default/modules/dropdown.variables | 471 ++ .../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 | 250 + semantic/src/themes/default/modules/nag.overrides | 3 + semantic/src/themes/default/modules/nag.variables | 74 + .../src/themes/default/modules/popup.overrides | 3 + .../src/themes/default/modules/popup.variables | 138 + .../src/themes/default/modules/progress.overrides | 3 + .../src/themes/default/modules/progress.variables | 129 + .../src/themes/default/modules/rating.overrides | 3 + .../src/themes/default/modules/rating.variables | 47 + .../src/themes/default/modules/search.overrides | 3 + .../src/themes/default/modules/search.variables | 181 + .../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/slider.overrides | 3 + .../src/themes/default/modules/slider.variables | 83 + .../src/themes/default/modules/sticky.overrides | 3 + .../src/themes/default/modules/sticky.variables | 7 + semantic/src/themes/default/modules/tab.overrides | 3 + semantic/src/themes/default/modules/tab.variables | 11 + .../src/themes/default/modules/toast.overrides | 3 + .../src/themes/default/modules/toast.variables | 83 + .../themes/default/modules/transition.overrides | 997 ++++ .../themes/default/modules/transition.variables | 10 + semantic/src/themes/default/views/ad.overrides | 3 + semantic/src/themes/default/views/ad.variables | 13 + semantic/src/themes/default/views/card.overrides | 3 + semantic/src/themes/default/views/card.variables | 241 + .../src/themes/default/views/comment.overrides | 3 + .../src/themes/default/views/comment.variables | 98 + semantic/src/themes/default/views/feed.overrides | 3 + semantic/src/themes/default/views/feed.variables | 141 + semantic/src/themes/default/views/item.overrides | 3 + semantic/src/themes/default/views/item.variables | 186 + .../src/themes/default/views/statistic.overrides | 3 + .../src/themes/default/views/statistic.variables | 111 + semantic/src/themes/duo/elements/loader.overrides | 3 + semantic/src/themes/duo/elements/loader.variables | 6 + .../themes/fixed-width/collections/grid.overrides | 3 + .../themes/fixed-width/collections/grid.variables | 23 + .../src/themes/fixed-width/modules/modal.overrides | 3 + .../src/themes/fixed-width/modules/modal.variables | 37 + .../src/themes/flat/collections/form.overrides | 28 + .../src/themes/flat/collections/form.variables | 74 + semantic/src/themes/flat/globals/site.overrides | 3 + semantic/src/themes/flat/globals/site.variables | 106 + .../themes/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 .../themes/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 + .../themes/github/collections/message.overrides | 11 + .../themes/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 + semantic/src/themes/github/elements/icon.overrides | 208 + semantic/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 + semantic/src/themes/github/elements/step.overrides | 26 + semantic/src/themes/github/elements/step.variables | 26 + semantic/src/themes/github/globals/site.variables | 47 + .../src/themes/github/modules/dropdown.overrides | 53 + .../src/themes/github/modules/dropdown.variables | 35 + semantic/src/themes/github/modules/popup.variables | 12 + .../src/themes/gmail/collections/message.overrides | 0 .../src/themes/gmail/collections/message.variables | 15 + semantic/src/themes/instagram/views/card.overrides | 12 + semantic/src/themes/instagram/views/card.variables | 23 + .../src/themes/joypixels/elements/emoji.overrides | 3094 ++++++++++++ .../src/themes/joypixels/elements/emoji.variables | 21 + .../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 .../src/themes/material/collections/menu.overrides | 1 + .../src/themes/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 + .../src/themes/material/modules/dropdown.overrides | 5 + .../src/themes/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 + semantic/src/themes/rtl/globals/site.overrides | 6 + semantic/src/themes/rtl/globals/site.variables | 14 + .../src/themes/striped/modules/progress.overrides | 29 + .../src/themes/striped/modules/progress.variables | 3 + semantic/src/themes/timeline/views/feed.overrides | 27 + semantic/src/themes/timeline/views/feed.variables | 36 + .../src/themes/twitter/elements/button.overrides | 13 + .../src/themes/twitter/elements/button.variables | 44 + .../src/themes/twitter/elements/emoji.overrides | 3094 ++++++++++++ .../src/themes/twitter/elements/emoji.variables | 18 + 425 files changed, 95244 insertions(+) create mode 100644 semantic/src/definitions/behaviors/api.js create mode 100644 semantic/src/definitions/behaviors/form.js create mode 100644 semantic/src/definitions/behaviors/state.js create mode 100644 semantic/src/definitions/behaviors/visibility.js create mode 100644 semantic/src/definitions/collections/breadcrumb.less create mode 100644 semantic/src/definitions/collections/form.less create mode 100644 semantic/src/definitions/collections/grid.less create mode 100644 semantic/src/definitions/collections/menu.less create mode 100644 semantic/src/definitions/collections/message.less create mode 100644 semantic/src/definitions/collections/table.less create mode 100644 semantic/src/definitions/elements/button.less create mode 100644 semantic/src/definitions/elements/container.less create mode 100644 semantic/src/definitions/elements/divider.less create mode 100644 semantic/src/definitions/elements/emoji.less create mode 100644 semantic/src/definitions/elements/flag.less create mode 100644 semantic/src/definitions/elements/header.less create mode 100644 semantic/src/definitions/elements/icon.less create mode 100644 semantic/src/definitions/elements/image.less create mode 100644 semantic/src/definitions/elements/input.less create mode 100644 semantic/src/definitions/elements/label.less create mode 100644 semantic/src/definitions/elements/list.less create mode 100644 semantic/src/definitions/elements/loader.less create mode 100644 semantic/src/definitions/elements/placeholder.less create mode 100644 semantic/src/definitions/elements/rail.less create mode 100644 semantic/src/definitions/elements/reveal.less create mode 100644 semantic/src/definitions/elements/segment.less create mode 100644 semantic/src/definitions/elements/step.less create mode 100644 semantic/src/definitions/elements/text.less create mode 100644 semantic/src/definitions/globals/reset.less create mode 100644 semantic/src/definitions/globals/site.js create mode 100644 semantic/src/definitions/globals/site.less create mode 100644 semantic/src/definitions/modules/accordion.js create mode 100644 semantic/src/definitions/modules/accordion.less create mode 100644 semantic/src/definitions/modules/calendar.js create mode 100644 semantic/src/definitions/modules/calendar.less create mode 100644 semantic/src/definitions/modules/checkbox.js create mode 100644 semantic/src/definitions/modules/checkbox.less create mode 100644 semantic/src/definitions/modules/dimmer.js create mode 100644 semantic/src/definitions/modules/dimmer.less create mode 100644 semantic/src/definitions/modules/dropdown.js create mode 100644 semantic/src/definitions/modules/dropdown.less create mode 100644 semantic/src/definitions/modules/embed.js create mode 100644 semantic/src/definitions/modules/embed.less create mode 100644 semantic/src/definitions/modules/modal.js create mode 100644 semantic/src/definitions/modules/modal.less create mode 100644 semantic/src/definitions/modules/nag.js create mode 100644 semantic/src/definitions/modules/nag.less create mode 100644 semantic/src/definitions/modules/popup.js create mode 100644 semantic/src/definitions/modules/popup.less create mode 100644 semantic/src/definitions/modules/progress.js create mode 100644 semantic/src/definitions/modules/progress.less create mode 100644 semantic/src/definitions/modules/rating.js create mode 100644 semantic/src/definitions/modules/rating.less create mode 100644 semantic/src/definitions/modules/search.js create mode 100644 semantic/src/definitions/modules/search.less create mode 100644 semantic/src/definitions/modules/shape.js create mode 100644 semantic/src/definitions/modules/shape.less create mode 100644 semantic/src/definitions/modules/sidebar.js create mode 100644 semantic/src/definitions/modules/sidebar.less create mode 100644 semantic/src/definitions/modules/slider.js create mode 100644 semantic/src/definitions/modules/slider.less create mode 100644 semantic/src/definitions/modules/sticky.js create mode 100644 semantic/src/definitions/modules/sticky.less create mode 100644 semantic/src/definitions/modules/tab.js create mode 100644 semantic/src/definitions/modules/tab.less create mode 100644 semantic/src/definitions/modules/toast.js create mode 100644 semantic/src/definitions/modules/toast.less create mode 100644 semantic/src/definitions/modules/transition.js create mode 100644 semantic/src/definitions/modules/transition.less create mode 100644 semantic/src/definitions/views/ad.less create mode 100644 semantic/src/definitions/views/card.less create mode 100644 semantic/src/definitions/views/comment.less create mode 100644 semantic/src/definitions/views/feed.less create mode 100644 semantic/src/definitions/views/item.less create mode 100644 semantic/src/definitions/views/statistic.less create mode 100644 semantic/src/semantic.less create mode 100644 semantic/src/site/collections/breadcrumb.overrides create mode 100644 semantic/src/site/collections/breadcrumb.variables create mode 100644 semantic/src/site/collections/form.overrides create mode 100644 semantic/src/site/collections/form.variables create mode 100644 semantic/src/site/collections/grid.overrides create mode 100644 semantic/src/site/collections/grid.variables create mode 100644 semantic/src/site/collections/menu.overrides create mode 100644 semantic/src/site/collections/menu.variables create mode 100644 semantic/src/site/collections/message.overrides create mode 100644 semantic/src/site/collections/message.variables create mode 100644 semantic/src/site/collections/table.overrides create mode 100644 semantic/src/site/collections/table.variables create mode 100644 semantic/src/site/elements/button.overrides create mode 100644 semantic/src/site/elements/button.variables create mode 100644 semantic/src/site/elements/container.overrides create mode 100644 semantic/src/site/elements/container.variables create mode 100644 semantic/src/site/elements/divider.overrides create mode 100644 semantic/src/site/elements/divider.variables create mode 100644 semantic/src/site/elements/flag.overrides create mode 100644 semantic/src/site/elements/flag.variables create mode 100644 semantic/src/site/elements/header.overrides create mode 100644 semantic/src/site/elements/header.variables create mode 100644 semantic/src/site/elements/icon.overrides create mode 100644 semantic/src/site/elements/icon.variables create mode 100644 semantic/src/site/elements/image.overrides create mode 100644 semantic/src/site/elements/image.variables create mode 100644 semantic/src/site/elements/input.overrides create mode 100644 semantic/src/site/elements/input.variables create mode 100644 semantic/src/site/elements/label.overrides create mode 100644 semantic/src/site/elements/label.variables create mode 100644 semantic/src/site/elements/list.overrides create mode 100644 semantic/src/site/elements/list.variables create mode 100644 semantic/src/site/elements/loader.overrides create mode 100644 semantic/src/site/elements/loader.variables create mode 100644 semantic/src/site/elements/rail.overrides create mode 100644 semantic/src/site/elements/rail.variables create mode 100644 semantic/src/site/elements/reveal.overrides create mode 100644 semantic/src/site/elements/reveal.variables create mode 100644 semantic/src/site/elements/segment.overrides create mode 100644 semantic/src/site/elements/segment.variables create mode 100644 semantic/src/site/elements/step.overrides create mode 100644 semantic/src/site/elements/step.variables create mode 100644 semantic/src/site/globals/reset.overrides create mode 100644 semantic/src/site/globals/reset.variables create mode 100644 semantic/src/site/globals/site.overrides create mode 100644 semantic/src/site/globals/site.variables create mode 100644 semantic/src/site/modules/accordion.overrides create mode 100644 semantic/src/site/modules/accordion.variables create mode 100644 semantic/src/site/modules/chatroom.overrides create mode 100644 semantic/src/site/modules/chatroom.variables create mode 100644 semantic/src/site/modules/checkbox.overrides create mode 100644 semantic/src/site/modules/checkbox.variables create mode 100644 semantic/src/site/modules/dimmer.overrides create mode 100644 semantic/src/site/modules/dimmer.variables create mode 100644 semantic/src/site/modules/dropdown.overrides create mode 100644 semantic/src/site/modules/dropdown.variables create mode 100644 semantic/src/site/modules/embed.overrides create mode 100644 semantic/src/site/modules/embed.variables create mode 100644 semantic/src/site/modules/modal.overrides create mode 100644 semantic/src/site/modules/modal.variables create mode 100644 semantic/src/site/modules/nag.overrides create mode 100644 semantic/src/site/modules/nag.variables create mode 100644 semantic/src/site/modules/popup.overrides create mode 100644 semantic/src/site/modules/popup.variables create mode 100644 semantic/src/site/modules/progress.overrides create mode 100644 semantic/src/site/modules/progress.variables create mode 100644 semantic/src/site/modules/rating.overrides create mode 100644 semantic/src/site/modules/rating.variables create mode 100644 semantic/src/site/modules/search.overrides create mode 100644 semantic/src/site/modules/search.variables create mode 100644 semantic/src/site/modules/shape.overrides create mode 100644 semantic/src/site/modules/shape.variables create mode 100644 semantic/src/site/modules/sidebar.overrides create mode 100644 semantic/src/site/modules/sidebar.variables create mode 100644 semantic/src/site/modules/sticky.overrides create mode 100644 semantic/src/site/modules/sticky.variables create mode 100644 semantic/src/site/modules/tab.overrides create mode 100644 semantic/src/site/modules/tab.variables create mode 100644 semantic/src/site/modules/transition.overrides create mode 100644 semantic/src/site/modules/transition.variables create mode 100644 semantic/src/site/views/ad.overrides create mode 100644 semantic/src/site/views/ad.variables create mode 100644 semantic/src/site/views/card.overrides create mode 100644 semantic/src/site/views/card.variables create mode 100644 semantic/src/site/views/comment.overrides create mode 100644 semantic/src/site/views/comment.variables create mode 100644 semantic/src/site/views/feed.overrides create mode 100644 semantic/src/site/views/feed.variables create mode 100644 semantic/src/site/views/item.overrides create mode 100644 semantic/src/site/views/item.variables create mode 100644 semantic/src/site/views/statistic.overrides create mode 100644 semantic/src/site/views/statistic.variables create mode 100644 semantic/src/theme.config create mode 100644 semantic/src/theme.less create mode 100644 semantic/src/themes/amazon/elements/button.overrides create mode 100644 semantic/src/themes/amazon/elements/button.variables create mode 100644 semantic/src/themes/amazon/globals/site.variables create mode 100644 semantic/src/themes/basic/assets/fonts/icons.eot create mode 100644 semantic/src/themes/basic/assets/fonts/icons.svg create mode 100644 semantic/src/themes/basic/assets/fonts/icons.ttf create mode 100644 semantic/src/themes/basic/assets/fonts/icons.woff create mode 100644 semantic/src/themes/basic/collections/table.overrides create mode 100644 semantic/src/themes/basic/collections/table.variables create mode 100644 semantic/src/themes/basic/elements/button.overrides create mode 100644 semantic/src/themes/basic/elements/button.variables create mode 100644 semantic/src/themes/basic/elements/icon.overrides create mode 100644 semantic/src/themes/basic/elements/icon.variables create mode 100644 semantic/src/themes/basic/elements/step.overrides create mode 100644 semantic/src/themes/basic/elements/step.variables create mode 100644 semantic/src/themes/basic/globals/reset.overrides create mode 100644 semantic/src/themes/basic/globals/reset.variables create mode 100644 semantic/src/themes/basic/modules/progress.overrides create mode 100644 semantic/src/themes/basic/modules/progress.variables create mode 100644 semantic/src/themes/basic/views/card.overrides create mode 100644 semantic/src/themes/basic/views/card.variables create mode 100644 semantic/src/themes/bookish/elements/header.overrides create mode 100644 semantic/src/themes/bookish/elements/header.variables create mode 100644 semantic/src/themes/bootstrap3/elements/button.overrides create mode 100644 semantic/src/themes/bootstrap3/elements/button.variables create mode 100644 semantic/src/themes/chubby/collections/form.overrides create mode 100644 semantic/src/themes/chubby/collections/form.variables create mode 100644 semantic/src/themes/chubby/collections/menu.overrides create mode 100644 semantic/src/themes/chubby/collections/menu.variables create mode 100644 semantic/src/themes/chubby/elements/button.overrides create mode 100644 semantic/src/themes/chubby/elements/button.variables create mode 100644 semantic/src/themes/chubby/elements/header.overrides create mode 100644 semantic/src/themes/chubby/elements/header.variables create mode 100644 semantic/src/themes/chubby/modules/accordion.overrides create mode 100644 semantic/src/themes/chubby/modules/accordion.variables create mode 100644 semantic/src/themes/chubby/views/comment.overrides create mode 100644 semantic/src/themes/chubby/views/comment.variables create mode 100644 semantic/src/themes/classic/collections/table.overrides create mode 100644 semantic/src/themes/classic/collections/table.variables create mode 100644 semantic/src/themes/classic/elements/button.overrides create mode 100644 semantic/src/themes/classic/elements/button.variables create mode 100644 semantic/src/themes/classic/elements/header.overrides create mode 100644 semantic/src/themes/classic/elements/header.variables create mode 100644 semantic/src/themes/classic/modules/progress.overrides create mode 100644 semantic/src/themes/classic/modules/progress.variables create mode 100644 semantic/src/themes/classic/views/card.overrides create mode 100644 semantic/src/themes/classic/views/card.variables create mode 100644 semantic/src/themes/colored/modules/checkbox.overrides create mode 100644 semantic/src/themes/colored/modules/checkbox.variables create mode 100644 semantic/src/themes/default/assets/fonts/brand-icons.eot create mode 100644 semantic/src/themes/default/assets/fonts/brand-icons.svg create mode 100644 semantic/src/themes/default/assets/fonts/brand-icons.ttf create mode 100644 semantic/src/themes/default/assets/fonts/brand-icons.woff create mode 100644 semantic/src/themes/default/assets/fonts/brand-icons.woff2 create mode 100644 semantic/src/themes/default/assets/fonts/icons.eot create mode 100644 semantic/src/themes/default/assets/fonts/icons.svg create mode 100644 semantic/src/themes/default/assets/fonts/icons.ttf create mode 100644 semantic/src/themes/default/assets/fonts/icons.woff create mode 100644 semantic/src/themes/default/assets/fonts/icons.woff2 create mode 100644 semantic/src/themes/default/assets/fonts/outline-icons.eot create mode 100644 semantic/src/themes/default/assets/fonts/outline-icons.svg create mode 100644 semantic/src/themes/default/assets/fonts/outline-icons.ttf create mode 100644 semantic/src/themes/default/assets/fonts/outline-icons.woff create mode 100644 semantic/src/themes/default/assets/fonts/outline-icons.woff2 create mode 100644 semantic/src/themes/default/assets/images/flags.png create mode 100644 semantic/src/themes/default/collections/breadcrumb.overrides create mode 100644 semantic/src/themes/default/collections/breadcrumb.variables create mode 100644 semantic/src/themes/default/collections/form.overrides create mode 100644 semantic/src/themes/default/collections/form.variables create mode 100644 semantic/src/themes/default/collections/grid.overrides create mode 100644 semantic/src/themes/default/collections/grid.variables create mode 100644 semantic/src/themes/default/collections/menu.overrides create mode 100644 semantic/src/themes/default/collections/menu.variables create mode 100644 semantic/src/themes/default/collections/message.overrides create mode 100644 semantic/src/themes/default/collections/message.variables create mode 100644 semantic/src/themes/default/collections/table.overrides create mode 100644 semantic/src/themes/default/collections/table.variables create mode 100644 semantic/src/themes/default/elements/button.overrides create mode 100644 semantic/src/themes/default/elements/button.variables create mode 100644 semantic/src/themes/default/elements/container.overrides create mode 100644 semantic/src/themes/default/elements/container.variables create mode 100644 semantic/src/themes/default/elements/divider.overrides create mode 100644 semantic/src/themes/default/elements/divider.variables create mode 100644 semantic/src/themes/default/elements/emoji.overrides create mode 100644 semantic/src/themes/default/elements/emoji.variables create mode 100644 semantic/src/themes/default/elements/flag.overrides create mode 100644 semantic/src/themes/default/elements/flag.variables create mode 100644 semantic/src/themes/default/elements/header.overrides create mode 100644 semantic/src/themes/default/elements/header.variables create mode 100644 semantic/src/themes/default/elements/icon.overrides create mode 100644 semantic/src/themes/default/elements/icon.variables create mode 100644 semantic/src/themes/default/elements/image.overrides create mode 100644 semantic/src/themes/default/elements/image.variables create mode 100644 semantic/src/themes/default/elements/input.overrides create mode 100644 semantic/src/themes/default/elements/input.variables create mode 100644 semantic/src/themes/default/elements/label.overrides create mode 100644 semantic/src/themes/default/elements/label.variables create mode 100644 semantic/src/themes/default/elements/list.overrides create mode 100644 semantic/src/themes/default/elements/list.variables create mode 100644 semantic/src/themes/default/elements/loader.overrides create mode 100644 semantic/src/themes/default/elements/loader.variables create mode 100644 semantic/src/themes/default/elements/placeholder.overrides create mode 100644 semantic/src/themes/default/elements/placeholder.variables create mode 100644 semantic/src/themes/default/elements/rail.overrides create mode 100644 semantic/src/themes/default/elements/rail.variables create mode 100644 semantic/src/themes/default/elements/reveal.overrides create mode 100644 semantic/src/themes/default/elements/reveal.variables create mode 100644 semantic/src/themes/default/elements/segment.overrides create mode 100644 semantic/src/themes/default/elements/segment.variables create mode 100644 semantic/src/themes/default/elements/step.overrides create mode 100644 semantic/src/themes/default/elements/step.variables create mode 100644 semantic/src/themes/default/elements/text.overrides create mode 100644 semantic/src/themes/default/elements/text.variables create mode 100644 semantic/src/themes/default/globals/colors.less create mode 100644 semantic/src/themes/default/globals/reset.overrides create mode 100644 semantic/src/themes/default/globals/reset.variables create mode 100644 semantic/src/themes/default/globals/site.overrides create mode 100644 semantic/src/themes/default/globals/site.variables create mode 100644 semantic/src/themes/default/globals/variation.variables create mode 100644 semantic/src/themes/default/modules/accordion.overrides create mode 100644 semantic/src/themes/default/modules/accordion.variables create mode 100644 semantic/src/themes/default/modules/calendar.overrides create mode 100644 semantic/src/themes/default/modules/calendar.variables create mode 100644 semantic/src/themes/default/modules/chatroom.overrides create mode 100644 semantic/src/themes/default/modules/chatroom.variables create mode 100644 semantic/src/themes/default/modules/checkbox.overrides create mode 100644 semantic/src/themes/default/modules/checkbox.variables create mode 100644 semantic/src/themes/default/modules/dimmer.overrides create mode 100644 semantic/src/themes/default/modules/dimmer.variables create mode 100644 semantic/src/themes/default/modules/dropdown.overrides create mode 100644 semantic/src/themes/default/modules/dropdown.variables create mode 100644 semantic/src/themes/default/modules/embed.overrides create mode 100644 semantic/src/themes/default/modules/embed.variables create mode 100644 semantic/src/themes/default/modules/modal.overrides create mode 100644 semantic/src/themes/default/modules/modal.variables create mode 100644 semantic/src/themes/default/modules/nag.overrides create mode 100644 semantic/src/themes/default/modules/nag.variables create mode 100644 semantic/src/themes/default/modules/popup.overrides create mode 100644 semantic/src/themes/default/modules/popup.variables create mode 100644 semantic/src/themes/default/modules/progress.overrides create mode 100644 semantic/src/themes/default/modules/progress.variables create mode 100644 semantic/src/themes/default/modules/rating.overrides create mode 100644 semantic/src/themes/default/modules/rating.variables create mode 100644 semantic/src/themes/default/modules/search.overrides create mode 100644 semantic/src/themes/default/modules/search.variables create mode 100644 semantic/src/themes/default/modules/shape.overrides create mode 100644 semantic/src/themes/default/modules/shape.variables create mode 100644 semantic/src/themes/default/modules/sidebar.overrides create mode 100644 semantic/src/themes/default/modules/sidebar.variables create mode 100644 semantic/src/themes/default/modules/slider.overrides create mode 100644 semantic/src/themes/default/modules/slider.variables create mode 100644 semantic/src/themes/default/modules/sticky.overrides create mode 100644 semantic/src/themes/default/modules/sticky.variables create mode 100644 semantic/src/themes/default/modules/tab.overrides create mode 100644 semantic/src/themes/default/modules/tab.variables create mode 100644 semantic/src/themes/default/modules/toast.overrides create mode 100644 semantic/src/themes/default/modules/toast.variables create mode 100644 semantic/src/themes/default/modules/transition.overrides create mode 100644 semantic/src/themes/default/modules/transition.variables create mode 100644 semantic/src/themes/default/views/ad.overrides create mode 100644 semantic/src/themes/default/views/ad.variables create mode 100644 semantic/src/themes/default/views/card.overrides create mode 100644 semantic/src/themes/default/views/card.variables create mode 100644 semantic/src/themes/default/views/comment.overrides create mode 100644 semantic/src/themes/default/views/comment.variables create mode 100644 semantic/src/themes/default/views/feed.overrides create mode 100644 semantic/src/themes/default/views/feed.variables create mode 100644 semantic/src/themes/default/views/item.overrides create mode 100644 semantic/src/themes/default/views/item.variables create mode 100644 semantic/src/themes/default/views/statistic.overrides create mode 100644 semantic/src/themes/default/views/statistic.variables create mode 100644 semantic/src/themes/duo/elements/loader.overrides create mode 100644 semantic/src/themes/duo/elements/loader.variables create mode 100644 semantic/src/themes/fixed-width/collections/grid.overrides create mode 100644 semantic/src/themes/fixed-width/collections/grid.variables create mode 100644 semantic/src/themes/fixed-width/modules/modal.overrides create mode 100644 semantic/src/themes/fixed-width/modules/modal.variables create mode 100644 semantic/src/themes/flat/collections/form.overrides create mode 100644 semantic/src/themes/flat/collections/form.variables create mode 100644 semantic/src/themes/flat/globals/site.overrides create mode 100644 semantic/src/themes/flat/globals/site.variables create mode 100644 semantic/src/themes/github/assets/fonts/octicons-local.ttf create mode 100644 semantic/src/themes/github/assets/fonts/octicons.svg create mode 100644 semantic/src/themes/github/assets/fonts/octicons.ttf create mode 100644 semantic/src/themes/github/assets/fonts/octicons.woff create mode 100644 semantic/src/themes/github/collections/breadcrumb.variables create mode 100644 semantic/src/themes/github/collections/form.overrides create mode 100644 semantic/src/themes/github/collections/form.variables create mode 100644 semantic/src/themes/github/collections/grid.variables create mode 100644 semantic/src/themes/github/collections/menu.overrides create mode 100644 semantic/src/themes/github/collections/menu.variables create mode 100644 semantic/src/themes/github/collections/message.overrides create mode 100644 semantic/src/themes/github/collections/message.variables create mode 100644 semantic/src/themes/github/collections/table.variables create mode 100644 semantic/src/themes/github/elements/button.overrides create mode 100644 semantic/src/themes/github/elements/button.variables create mode 100644 semantic/src/themes/github/elements/header.variables create mode 100644 semantic/src/themes/github/elements/icon.overrides create mode 100644 semantic/src/themes/github/elements/icon.variables create mode 100644 semantic/src/themes/github/elements/image.variables create mode 100644 semantic/src/themes/github/elements/input.overrides create mode 100644 semantic/src/themes/github/elements/input.variables create mode 100644 semantic/src/themes/github/elements/label.overrides create mode 100644 semantic/src/themes/github/elements/label.variables create mode 100644 semantic/src/themes/github/elements/segment.overrides create mode 100644 semantic/src/themes/github/elements/segment.variables create mode 100644 semantic/src/themes/github/elements/step.overrides create mode 100644 semantic/src/themes/github/elements/step.variables create mode 100644 semantic/src/themes/github/globals/site.variables create mode 100644 semantic/src/themes/github/modules/dropdown.overrides create mode 100644 semantic/src/themes/github/modules/dropdown.variables create mode 100644 semantic/src/themes/github/modules/popup.variables create mode 100644 semantic/src/themes/gmail/collections/message.overrides create mode 100644 semantic/src/themes/gmail/collections/message.variables create mode 100644 semantic/src/themes/instagram/views/card.overrides create mode 100644 semantic/src/themes/instagram/views/card.variables create mode 100644 semantic/src/themes/joypixels/elements/emoji.overrides create mode 100644 semantic/src/themes/joypixels/elements/emoji.variables create mode 100644 semantic/src/themes/material/assets/fonts/icons.eot create mode 100644 semantic/src/themes/material/assets/fonts/icons.svg create mode 100644 semantic/src/themes/material/assets/fonts/icons.ttf create mode 100644 semantic/src/themes/material/assets/fonts/icons.woff create mode 100644 semantic/src/themes/material/assets/fonts/icons.woff2 create mode 100644 semantic/src/themes/material/collections/menu.overrides create mode 100644 semantic/src/themes/material/collections/menu.variables create mode 100644 semantic/src/themes/material/elements/button.overrides create mode 100644 semantic/src/themes/material/elements/button.variables create mode 100644 semantic/src/themes/material/elements/header.overrides create mode 100644 semantic/src/themes/material/elements/header.variables create mode 100644 semantic/src/themes/material/elements/icon.overrides create mode 100644 semantic/src/themes/material/elements/icon.variables create mode 100644 semantic/src/themes/material/globals/site.overrides create mode 100644 semantic/src/themes/material/globals/site.variables create mode 100644 semantic/src/themes/material/modules/dropdown.overrides create mode 100644 semantic/src/themes/material/modules/dropdown.variables create mode 100644 semantic/src/themes/material/modules/modal.overrides create mode 100644 semantic/src/themes/material/modules/modal.variables create mode 100644 semantic/src/themes/pulsar/elements/loader.overrides create mode 100644 semantic/src/themes/pulsar/elements/loader.variables create mode 100644 semantic/src/themes/raised/elements/button.overrides create mode 100644 semantic/src/themes/raised/elements/button.variables create mode 100644 semantic/src/themes/resetcss/globals/reset.overrides create mode 100644 semantic/src/themes/resetcss/globals/reset.variables create mode 100644 semantic/src/themes/round/elements/button.overrides create mode 100644 semantic/src/themes/round/elements/button.variables create mode 100644 semantic/src/themes/rtl/globals/site.overrides create mode 100644 semantic/src/themes/rtl/globals/site.variables create mode 100644 semantic/src/themes/striped/modules/progress.overrides create mode 100644 semantic/src/themes/striped/modules/progress.variables create mode 100644 semantic/src/themes/timeline/views/feed.overrides create mode 100644 semantic/src/themes/timeline/views/feed.variables create mode 100644 semantic/src/themes/twitter/elements/button.overrides create mode 100644 semantic/src/themes/twitter/elements/button.variables create mode 100644 semantic/src/themes/twitter/elements/emoji.overrides create mode 100644 semantic/src/themes/twitter/elements/emoji.variables (limited to 'semantic/src') diff --git a/semantic/src/definitions/behaviors/api.js b/semantic/src/definitions/behaviors/api.js new file mode 100644 index 0000000..845046b --- /dev/null +++ b/semantic/src/definitions/behaviors/api.js @@ -0,0 +1,1177 @@ +/*! + * # Fomantic-UI - API + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isWindow = $.isWindow || function(obj) { + return obj != null && obj === obj.window; +}; + + 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() { + module.verbose('This behavior will be deleted due to typo. Use "was successful" instead.'); + return module.was.successful(); + }, + successful: 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.rawResponse + ? 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.successful() ) { + 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 || xhr.status >= 300) && 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($module, 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(Array.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, + +// whether onResponse should work with response value without force converting into an object + rawResponse : false, + + // callbacks before request + beforeSend : function(settings) { return settings; }, + beforeXHR : function(xhr) {}, + onRequest : function(promise, xhr) {}, + + // after request + onResponse : false, // function(response) { }, + + // response was successful, if JSON passed validation + onSuccess : function(response, $module) {}, + + // request finished without aborting + onComplete : function(response, $module) {}, + + // failed JSON success test + onFailure : function(response, $module) {}, + + // server error + onError : function(errorMessage, $module) {}, + + // request aborted + onAbort : function(errorMessage, $module) {}, + + successTest : false, + + // errors + error : { + beforeSend : 'The before send function has aborted the request', + error : 'There was an error with your request', + exitConditions : 'API Request Aborted. Exit conditions met', + JSONParse : 'JSON could not be parsed during error handling', + legacyParameters : 'You are using legacy API success callback names', + method : 'The method you called is not defined', + missingAction : 'API action used but no url was defined', + missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object', + missingURL : 'No URL specified for api event', + noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.', + noStorage : 'Caching responses locally requires session storage', + parseError : 'There was an error parsing your request', + requiredParameter : 'Missing a required URL parameter: ', + statusMessage : 'Server gave an error: ', + timeout : 'Your request timed out' + }, + + regExp : { + required : /\{\$*[A-z0-9]+\}/g, + optional : /\{\/\$*[A-z0-9]+\}/g, + }, + + className: { + loading : 'loading', + error : 'error' + }, + + selector: { + disabled : '.disabled', + form : 'form' + }, + + metadata: { + action : 'action', + url : 'url' + } +}; + + + +})( jQuery, window, document ); diff --git a/semantic/src/definitions/behaviors/form.js b/semantic/src/definitions/behaviors/form.js new file mode 100644 index 0000000..6fbb07e --- /dev/null +++ b/semantic/src/definitions/behaviors/form.js @@ -0,0 +1,2033 @@ +/*! + * # Fomantic-UI - Form Validation + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +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, + + submitting = false, + dirty = false, + history = ['clean', 'clean'], + + 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(); + if (settings.autoCheckRequired) { + module.set.autoCheck(); + } + 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); + submitting = true; + $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(index, el) { + var + $input = $(el), + type = $input.prop('type'), + inputEvent = module.get.changeEvent(type, $input) + ; + $input.on(inputEvent + eventNamespace, module.event.field.change); + }); + + // Dirty events + if (settings.preventLeaving) { + $(window).on('beforeunload' + eventNamespace, module.event.beforeUnload); + } + + $field.on('change click keyup keydown blur', function(e) { + $(this).triggerHandler(e.type + ".dirty"); + }); + + $field.on('change.dirty click.dirty keyup.dirty keydown.dirty blur.dirty', module.determine.isDirty); + + $module.on('dirty' + eventNamespace, function(e) { + settings.onDirty.call(); + }); + + $module.on('clean' + eventNamespace, function(e) { + settings.onClean.call(); + }) + }, + + clear: function() { + $field.each(function (index, el) { + var + $field = $(el), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $prompt = $fieldGroup.find(selector.prompt), + $calendar = $field.closest(selector.uiCalendar), + defaultValue = $field.data(metadata.defaultValue) || '', + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'), + isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')), + 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', true); + } + else if(isCheckbox) { + $field.prop('checked', false); + } + else if (isCalendar) { + $calendar.calendar('clear'); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(''); + } + }); + module.remove.states(); + }, + + reset: function() { + $field.each(function (index, el) { + var + $field = $(el), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + $calendar = $field.closest(selector.uiCalendar), + $prompt = $fieldGroup.find(selector.prompt), + defaultValue = $field.data(metadata.defaultValue), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'), + isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')), + 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', true); + } + else if(isCheckbox) { + module.verbose('Resetting checkbox value', $element, defaultValue); + $field.prop('checked', defaultValue); + } + else if (isCalendar) { + $calendar.calendar('set date', defaultValue); + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(defaultValue); + } + }); + module.remove.states(); + }, + + determine: { + isValid: function() { + var + allValid = true + ; + $.each(validation, function(fieldName, field) { + if( !( module.validate.field(field, fieldName, true) ) ) { + allValid = false; + } + }); + return allValid; + }, + isDirty: function(e) { + var formIsDirty = false; + + $field.each(function(index, el) { + var + $el = $(el), + isCheckbox = ($el.filter(selector.checkbox).length > 0), + isDirty + ; + + if (isCheckbox) { + isDirty = module.is.checkboxDirty($el); + } else { + isDirty = module.is.fieldDirty($el); + } + + $el.data(settings.metadata.isDirty, isDirty); + + formIsDirty |= isDirty; + }); + + if (formIsDirty) { + module.set.dirty(); + } else { + module.set.clean(); + } + + if (e && e.namespace === 'dirty') { + e.stopImmediatePropagation(); + e.preventDefault(); + } + } + }, + + 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' || Array.isArray(rules)); + }, + empty: function($field) { + if(!$field || $field.length === 0) { + return true; + } + else if($field.is(selector.checkbox)) { + return !$field.is(':checked'); + } + else { + return module.is.blank($field); + } + }, + blank: function($field) { + return String($field.val()).trim() === ''; + }, + valid: function(field, showErrors) { + var + allValid = true + ; + if(field) { + module.verbose('Checking if field is valid', field); + return module.validate.field(validation[field], field, !!showErrors); + } + else { + module.verbose('Checking if form is valid'); + $.each(validation, function(fieldName, field) { + if( !module.is.valid(fieldName, showErrors) ) { + allValid = false; + } + }); + return allValid; + } + }, + dirty: function() { + return dirty; + }, + clean: function() { + return !dirty; + }, + fieldDirty: function($el) { + var initialValue = $el.data(metadata.defaultValue); + // Explicitly check for null/undefined here as value may be `false`, so ($el.data(dataInitialValue) || '') would not work + if (initialValue == null) { initialValue = ''; } + else if(Array.isArray(initialValue)) { + initialValue = initialValue.toString(); + } + var currentValue = $el.val(); + if (currentValue == null) { currentValue = ''; } + // multiple select values are returned as arrays which are never equal, so do string conversion first + else if(Array.isArray(currentValue)) { + currentValue = currentValue.toString(); + } + // Boolean values can be encoded as "true/false" or "True/False" depending on underlying frameworks so we need a case insensitive comparison + var boolRegex = /^(true|false)$/i; + var isBoolValue = boolRegex.test(initialValue) && boolRegex.test(currentValue); + if (isBoolValue) { + var regex = new RegExp("^" + initialValue + "$", "i"); + return !regex.test(currentValue); + } + + return currentValue !== initialValue; + }, + checkboxDirty: function($el) { + var initialValue = $el.data(metadata.defaultValue); + var currentValue = $el.is(":checked"); + + return initialValue !== currentValue; + }, + justDirty: function() { + return (history[0] === 'dirty'); + }, + justClean: function() { + return (history[0] === 'clean'); + } + }, + + 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') { + 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 ); + if(!settings.inline) { + module.validate.form(false,true); + } + }, settings.delay); + } + } + }, + beforeUnload: function(event) { + if (module.is.dirty() && !submitting) { + var event = event || window.event; + + // For modern browsers + if (event) { + event.returnValue = settings.text.leavingMessage; + } + + // For olders... + return settings.text.leavingMessage; + } + } + + }, + + 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), + $field = module.get.field(field.identifier), + value = $field.val(), + prompt = $.isFunction(rule.prompt) + ? rule.prompt(value) + : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule, + requiresValue = (prompt.search('{value}') !== -1), + requiresName = (prompt.search('{name}') !== -1), + $label, + name + ; + if(requiresValue) { + prompt = prompt.replace(/\{value\}/g, $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\}/g, name); + } + prompt = prompt.replace(/\{identifier\}/g, field.identifier); + prompt = prompt.replace(/\{ruleValue\}/g, 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 + ; + 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); + var t; + if((t=$field.filter('#' + identifier)).length > 0 ) { + return t; + } + if((t=$field.filter('[name="' + identifier +'"]')).length > 0 ) { + return t; + } + if((t=$field.filter('[name="' + identifier +'[]"]')).length > 0 ) { + return t; + } + if((t=$field.filter('[data-' + metadata.validate + '="'+ identifier +'"]')).length > 0 ) { + return t; + } + 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; + $.each(module.get.field(identifier), function(index, groupField) { + if(groupField == $field[0]) { + field.identifier = identifier; + fieldValidation = field; + return false; + } + }); + }); + 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 = Array.isArray(fields) + ? module.get.fields(fields) + : $field, + values = {} + ; + $fields.each(function(index, field) { + var + $field = $(field), + $calendar = $field.closest(selector.uiCalendar), + name = $field.prop('name'), + value = $field.val(), + isCheckbox = $field.is(selector.checkbox), + isRadio = $field.is(selector.radio), + isMultiple = (name.indexOf('[]') !== -1), + isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')), + isChecked = (isCheckbox) + ? $field.is(':checked') + : false + ; + if(name) { + if(isMultiple) { + name = name.replace('[]', ''); + if(!values[name]) { + values[name] = []; + } + if(isCheckbox) { + if(isChecked) { + values[name].push(value || true); + } + else { + values[name].push(false); + } + } + else { + values[name].push(value); + } + } + else { + if(isRadio) { + if(values[name] === undefined || values[name] === false) { + values[name] = (isChecked) + ? value || true + : false + ; + } + } + else if(isCheckbox) { + if(isChecked) { + values[name] = value || true; + } + else { + values[name] = false; + } + } + else if(isCalendar) { + var date = $calendar.calendar('get date'); + + if (date !== null) { + if (settings.dateHandling == 'date') { + values[name] = date; + } else if(settings.dateHandling == 'input') { + values[name] = $calendar.calendar('get input date') + } else if (settings.dateHandling == 'formatter') { + var type = $calendar.calendar('setting', 'type'); + + switch(type) { + case 'date': + values[name] = settings.formatter.date(date); + break; + + case 'datetime': + values[name] = settings.formatter.datetime(date); + break; + + case 'time': + values[name] = settings.formatter.time(date); + break; + + case 'month': + values[name] = settings.formatter.month(date); + break; + + case 'year': + values[name] = settings.formatter.year(date); + break; + + default: + module.debug('Wrong calendar mode', $calendar, type); + values[name] = ''; + } + } + } else { + values[name] = ''; + } + } else { + values[name] = value; + } + } + } + }); + return values; + }, + dirtyFields: function() { + return $field.filter(function(index, e) { + return $(e).data(metadata.isDirty); + }); + } + }, + + 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; + } + + }, + + can: { + useElement: function(element){ + if ($.fn[element] !== undefined) { + return true; + } + module.error(error.noElement.replace('{element}',element)); + 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) { + // Validation should have at least a standard format + if(validation[name] === undefined || validation[name].rules === undefined) { + validation[name] = { + rules: [] + }; + } + var + newValidation = { + rules: [] + } + ; + if(module.is.shorthandRules(rules)) { + rules = Array.isArray(rules) + ? rules + : [rules] + ; + $.each(rules, function(_index, rule) { + newValidation.rules.push({ type: rule }); + }); + } + else { + newValidation.rules = rules.rules; + } + // For each new rule, check if there's not already one with the same type + $.each(newValidation.rules, function (_index, rule) { + if ($.grep(validation[name].rules, function(item){ return item.type == rule.type; }).length == 0) { + validation[name].rules.push(rule); + } + }); + module.debug('Adding rules', newValidation.rules, 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, internal) { + 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); + if(!internal) { + $fieldGroup + .addClass(className.error) + ; + } + if(settings.inline) { + if(!promptExists) { + $prompt = settings.templates.prompt(errors, className.label); + $prompt + .appendTo($fieldGroup) + ; + } + $prompt + .html(errors[0]) + ; + if(!promptExists) { + if(settings.transition && module.can.useElement('transition') && $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: { + errors: function() { + module.debug('Removing form error messages'); + $message.empty(); + }, + states: function() { + $module.removeClass(className.error).removeClass(className.success); + if(!settings.inline) { + module.remove.errors(); + } + module.determine.isDirty(); + }, + rule: function(field, rule) { + var + rules = Array.isArray(rule) + ? rule + : [rule] + ; + if(validation[field] === undefined || !Array.isArray(validation[field].rules)) { + return; + } + if(rule === undefined) { + module.debug('Removed all rules'); + validation[field].rules = []; + return; + } + $.each(validation[field].rules, function(index, rule) { + if(rule && rules.indexOf(rule.type) !== -1) { + module.debug('Removed rule', rule.type); + validation[field].rules.splice(index, 1); + } + }); + }, + field: function(field) { + var + fields = Array.isArray(field) + ? field + : [field] + ; + $.each(fields, function(index, field) { + module.remove.rule(field); + }); + }, + // alias + rules: function(field, rules) { + if(Array.isArray(field)) { + $.each(field, 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 && module.can.useElement('transition') && $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 (index, el) { + var + $el = $(el), + $parent = $el.parent(), + isCheckbox = ($el.filter(selector.checkbox).length > 0), + isDropdown = $parent.is(selector.uiDropdown) && module.can.useElement('dropdown'), + $calendar = $el.closest(selector.uiCalendar), + isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')), + value = (isCheckbox) + ? $el.is(':checked') + : $el.val() + ; + if (isDropdown) { + $parent.dropdown('save defaults'); + } + else if (isCalendar) { + $calendar.calendar('refresh'); + } + $el.data(metadata.defaultValue, value); + $el.data(metadata.isDirty, false); + }); + }, + 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(), + $calendar = $field.closest(selector.uiCalendar), + isMultiple = Array.isArray(value), + isCheckbox = $element.is(selector.uiCheckbox) && module.can.useElement('checkbox'), + isDropdown = $element.is(selector.uiDropdown) && module.can.useElement('dropdown'), + isRadio = ($field.is(selector.radio) && isCheckbox), + isCalendar = ($calendar.length > 0 && module.can.useElement('calendar')), + 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 || value === 1) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else if(isDropdown) { + module.verbose('Setting dropdown value', value, $element); + $element.dropdown('set selected', value); + } + else if (isCalendar) { + $calendar.calendar('set date',value); + } + else { + module.verbose('Setting field value', value, $field); + $field.val(value); + } + } + }); + }, + dirty: function() { + module.verbose('Setting state dirty'); + dirty = true; + history[0] = history[1]; + history[1] = 'dirty'; + + if (module.is.justClean()) { + $module.trigger('dirty'); + } + }, + clean: function() { + module.verbose('Setting state clean'); + dirty = false; + history[0] = history[1]; + history[1] = 'clean'; + + if (module.is.justDirty()) { + $module.trigger('clean'); + } + }, + asClean: function() { + module.set.defaults(); + module.set.clean(); + }, + asDirty: function() { + module.set.defaults(); + module.set.dirty(); + }, + autoCheck: function() { + module.debug('Enabling auto check on required fields'); + $field.each(function (_index, el) { + var + $el = $(el), + $elGroup = $(el).closest($group), + isCheckbox = ($el.filter(selector.checkbox).length > 0), + isRequired = $el.prop('required') || $elGroup.hasClass(className.required) || $elGroup.parent().hasClass(className.required), + isDisabled = $el.is(':disabled') || $elGroup.hasClass(className.disabled) || $elGroup.parent().hasClass(className.disabled), + validation = module.get.validation($el), + hasEmptyRule = validation + ? $.grep(validation.rules, function(rule) { return rule.type == "empty" }) !== 0 + : false, + identifier = validation.identifier || $el.attr('id') || $el.attr('name') || $el.data(metadata.validate) + ; + if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) { + if (isCheckbox) { + module.verbose("Adding 'checked' rule on field", identifier); + module.add.rule(identifier, "checked"); + } else { + module.verbose("Adding 'empty' rule on field", identifier); + module.add.rule(identifier, "empty"); + } + } + }); + } + }, + + validate: { + + form: function(event, ignoreCallbacks) { + var values = module.get.values(); + + // 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(!settings.inline) { + module.remove.errors(); + } + if(ignoreCallbacks !== true) { + return settings.onSuccess.call(element, event, values); + } + } + else { + module.debug('Form has errors'); + submitting = false; + module.set.error(); + if(!settings.inline) { + module.add.errors(formErrors); + } + // prevent ajax submit + if(event && $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; + } + var isDisabled = !$field.filter(':not(:disabled)').length; + if(isDisabled) { + module.debug('Field is disabled. Skipping', identifier); + } + else if(field.optional && module.is.blank($field)){ + module.debug('Field is optional and blank. Skipping', identifier); + } + else if(field.depends && module.is.empty($dependsField)) { + module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField); + } + else if(field.rules !== undefined) { + if(showErrors) { + $field.closest($group).removeClass(className.error); + } + $.each(field.rules, function(index, rule) { + if( module.has.field(identifier)) { + var invalidFields = module.validate.rule(field, rule,true) || []; + if (invalidFields.length>0){ + module.debug('Field is invalid', identifier, rule.type); + fieldErrors.push(module.get.prompt(rule, field)); + fieldValid = false; + if(showErrors){ + $(invalidFields).closest($group).addClass(className.error); + } + } + } + }); + } + 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, true); + settings.onInvalid.call($field, fieldErrors); + } + return false; + } + return true; + }, + + // takes validation rule and returns whether field passes rule + rule: function(field, rule, internal) { + var + $field = module.get.field(field.identifier), + ancillary = module.get.ancillaryValue(rule), + ruleName = module.get.ruleName(rule), + ruleFunction = settings.rules[ruleName], + invalidFields = [], + isCheckbox = $field.is(selector.checkbox), + isValid = function(field){ + var value = (isCheckbox ? $(field).filter(':checked').val() : $(field).val()); + // cast to string avoiding encoding special values + value = (value === undefined || value === '' || value === null) + ? '' + : (settings.shouldTrim) ? String(value + '').trim() : String(value + '') + ; + return ruleFunction.call(field, value, ancillary, $module); + } + ; + if( !$.isFunction(ruleFunction) ) { + module.error(error.noRule, ruleName); + return; + } + if(isCheckbox) { + if (!isValid($field)) { + invalidFields = $field; + } + } else { + $.each($field, function (index, field) { + if (!isValid(field)) { + invalidFields.push(field); + } + }); + } + return internal ? invalidFields : !(invalidFields.length>0); + } + }, + + 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(Array.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, + shouldTrim : true, + + transition : 'scale', + duration : 200, + + autoCheckRequired : false, + preventLeaving : false, + dateHandling : 'date', // 'date', 'input', 'formatter' + + onValid : function() {}, + onInvalid : function() {}, + onSuccess : function() { return true; }, + onFailure : function() { return false; }, + onDirty : function() {}, + onClean : function() {}, + + metadata : { + defaultValue : 'default', + validate : 'validate', + isDirty : 'isDirty' + }, + + 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', + leavingMessage : 'There are unsaved changes on this page which will be discarded if you continue.' + }, + + prompt: { + empty : '{name} must have a value', + checked : '{name} must be checked', + email : '{name} must be a valid e-mail', + url : '{name} must be a valid url', + regExp : '{name} is not formatted correctly', + integer : '{name} must be an integer', + decimal : '{name} must be a decimal number', + number : '{name} must be set to a number', + is : '{name} must be "{ruleValue}"', + isExactly : '{name} must be exactly "{ruleValue}"', + not : '{name} cannot be set to "{ruleValue}"', + notExactly : '{name} cannot be set to exactly "{ruleValue}"', + contain : '{name} must contain "{ruleValue}"', + containExactly : '{name} must contain exactly "{ruleValue}"', + doesntContain : '{name} cannot contain "{ruleValue}"', + doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"', + minLength : '{name} must be at least {ruleValue} characters', + length : '{name} must be at least {ruleValue} characters', + exactLength : '{name} must be exactly {ruleValue} characters', + maxLength : '{name} cannot be longer than {ruleValue} characters', + match : '{name} must match {ruleValue} field', + different : '{name} must have a different value than {ruleValue} field', + creditCard : '{name} must be a valid credit card number', + minCount : '{name} must have at least {ruleValue} choices', + exactCount : '{name} must have exactly {ruleValue} choices', + maxCount : '{name} must have {ruleValue} or less choices' + }, + + selector : { + checkbox : 'input[type="checkbox"], input[type="radio"]', + clear : '.clear', + field : 'input:not(.search), 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', + uiCalendar : '.ui.calendar' + }, + + className : { + error : 'error', + label : 'ui basic red pointing prompt label', + pressed : 'down', + success : 'success', + required : 'required', + disabled : 'disabled' + }, + + 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.', + noElement : 'This module requires ui {element}' + }, + + templates: { + + // template that produces error message + error: function(errors) { + var + html = ''; + return $(html); + }, + + // template that produces label + prompt: function(errors, labelClasses) { + return $('
') + .addClass(labelClasses) + .html(errors[0]) + ; + } + }, + + formatter: { + date: function(date) { + return Intl.DateTimeFormat('en-GB').format(date); + }, + datetime: function(date) { + return Intl.DateTimeFormat('en-GB', { + year: "numeric", + month: "2-digit", + day: "2-digit", + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }).format(date); + }, + time: function(date) { + return Intl.DateTimeFormat('en-GB', { + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }).format(date); + }, + month: function(date) { + return Intl.DateTimeFormat('en-GB', { + month: '2-digit', + year: 'numeric' + }).format(date); + }, + year: function(date) { + return Intl.DateTimeFormat('en-GB', { + year: 'numeric' + }).format(date); + } + }, + + rules: { + + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || Array.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, $module) { + var + matchingValue, + matchingElement + ; + if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('#' + identifier)).length > 0) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) { + matchingValue = matchingElement; + } + return (matchingValue !== undefined) + ? ( value.toString() == matchingValue.toString() ) + : false + ; + }, + + // different than another field + different: function(value, identifier, $module) { + // use either id or name of field + var + matchingValue, + matchingElement + ; + if((matchingElement = $module.find('[data-validate="'+ identifier +'"]')).length > 0 ) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('#' + identifier)).length > 0) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('[name="' + identifier +'"]')).length > 0) { + matchingValue = matchingElement.val(); + } + else if((matchingElement = $module.find('[name="' + identifier +'[]"]')).length > 0 ) { + matchingValue = matchingElement; + } + return (matchingValue !== undefined) + ? ( value.toString() !== matchingValue.toString() ) + : false + ; + }, + + creditCard: function(cardNumber, cardTypes) { + var + cards = { + visa: { + pattern : /^4/, + length : [16] + }, + amex: { + pattern : /^3[47]/, + length : [15] + }, + mastercard: { + pattern : /^5[1-5]/, + length : [16] + }, + discover: { + pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/, + length : [16] + }, + unionPay: { + pattern : /^(62|88)/, + length : [16, 17, 18, 19] + }, + jcb: { + pattern : /^35(2[89]|[3-8][0-9])/, + length : [16] + }, + maestro: { + pattern : /^(5018|5020|5038|6304|6759|676[1-3])/, + length : [12, 13, 14, 15, 16, 17, 18, 19] + }, + dinersClub: { + pattern : /^(30[0-5]|^36)/, + length : [14] + }, + laser: { + pattern : /^(6304|670[69]|6771)/, + length : [16, 17, 18, 19] + }, + visaElectron: { + pattern : /^(4026|417500|4508|4844|491(3|7))/, + length : [16] + } + }, + valid = {}, + validCard = false, + requiredTypes = (typeof cardTypes == 'string') + ? cardTypes.split(',') + : false, + unionPay, + validation + ; + + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // allow dashes in card + cardNumber = cardNumber.replace(/[\-]/g, ''); + + // verify card types + if(requiredTypes) { + $.each(requiredTypes, function(index, type){ + // verify each card type + validation = cards[type]; + if(validation) { + valid = { + length : ($.inArray(cardNumber.length, validation.length) !== -1), + pattern : (cardNumber.search(validation.pattern) !== -1) + }; + if(valid.length && valid.pattern) { + validCard = true; + } + } + }); + + if(!validCard) { + return false; + } + } + + // skip luhn for UnionPay + unionPay = { + number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1), + pattern : (cardNumber.search(cards.unionPay.pattern) !== -1) + }; + if(unionPay.number && unionPay.pattern) { + return true; + } + + // verify luhn, adapted from + var + length = cardNumber.length, + multiple = 0, + producedValue = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + [0, 2, 4, 6, 8, 1, 3, 5, 7, 9] + ], + sum = 0 + ; + while (length--) { + sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)]; + multiple ^= 1; + } + return (sum % 10 === 0 && sum > 0); + }, + + minCount: function(value, minCount) { + if(minCount == 0) { + return true; + } + if(minCount == 1) { + return (value !== ''); + } + return (value.split(',').length >= minCount); + }, + + exactCount: function(value, exactCount) { + if(exactCount == 0) { + return (value === ''); + } + if(exactCount == 1) { + return (value !== '' && value.search(',') === -1); + } + return (value.split(',').length == exactCount); + }, + + maxCount: function(value, maxCount) { + if(maxCount == 0) { + return false; + } + if(maxCount == 1) { + return (value.search(',') === -1); + } + return (value.split(',').length <= maxCount); + } + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/src/definitions/behaviors/state.js b/semantic/src/definitions/behaviors/state.js new file mode 100644 index 0000000..149b4af --- /dev/null +++ b/semantic/src/definitions/behaviors/state.js @@ -0,0 +1,711 @@ +/*! + * # Fomantic-UI - State + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +"use strict"; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +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 || '', + + 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(Array.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.state.settings = { + + // module info + name : 'State', + + // debug output + debug : false, + + // verbose debug output + verbose : false, + + // namespace for events + namespace : 'state', + + // debug data includes performance + performance : true, + + // callback occurs on state change + onActivate : function() {}, + onDeactivate : function() {}, + onChange : function() {}, + + // state test functions + activateTest : function() { return true; }, + deactivateTest : function() { return true; }, + + // whether to automatically map default states + automatic : true, + + // activate / deactivate changes all elements instantiated at same time + sync : false, + + // default flash text duration, used for temporarily changing text of an element + flashDuration : 1000, + + // selector filter + filter : { + text : '.loading, .disabled', + active : '.disabled' + }, + + context : false, + + // error + error: { + beforeSend : 'The before send function has cancelled state change', + method : 'The method you called is not defined.' + }, + + // metadata + metadata: { + promise : 'promise', + storedText : 'stored-text' + }, + + // change class on state + className: { + active : 'active', + disabled : 'disabled', + error : 'error', + loading : 'loading', + success : 'success', + warning : 'warning' + }, + + selector: { + // selector for text node + text: false + }, + + defaults : { + input: { + disabled : true, + loading : true, + active : true + }, + button: { + disabled : true, + loading : true, + active : true, + }, + progress: { + active : true, + success : true, + warning : true, + error : true + } + }, + + states : { + active : true, + disabled : true, + error : true, + loading : true, + success : true, + warning : true + }, + + text : { + disabled : false, + flash : false, + hover : false, + active : false, + inactive : false, + activate : false, + deactivate : false + } + +}; + + + +})( jQuery, window, document ); diff --git a/semantic/src/definitions/behaviors/visibility.js b/semantic/src/definitions/behaviors/visibility.js new file mode 100644 index 0000000..4e40619 --- /dev/null +++ b/semantic/src/definitions/behaviors/visibility.js @@ -0,0 +1,1313 @@ +/*! + * # Fomantic-UI - Visibility + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +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, + + 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() + ; + // 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.topPassed; + element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed; + element.pixelsPassed = 0; + element.percentagePassed = 0; + + // meta calculations + element.onScreen = ((element.topVisible || element.passing) && !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(Array.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 : 'constraint', + visible : 'visible' + }, + + error : { + method : 'The method you called is not defined.', + visible : 'Element is hidden, you must call refresh after element becomes visible' + } + +}; + +})( jQuery, window, document ); diff --git a/semantic/src/definitions/collections/breadcrumb.less b/semantic/src/definitions/collections/breadcrumb.less new file mode 100644 index 0000000..df6f979 --- /dev/null +++ b/semantic/src/definitions/collections/breadcrumb.less @@ -0,0 +1,122 @@ +/*! + * # Fomantic-UI - Breadcrumb + * http://github.com/fomantic/Fomantic-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: @lineHeight; + display: @display; + margin: @verticalMargin 0; + vertical-align: @verticalAlign; +} +.ui.breadcrumb:first-child { + margin-top: 0; +} +.ui.breadcrumb:last-child { + margin-bottom: 0; +} + +/******************************* + Content +*******************************/ + +/* Divider */ +.ui.breadcrumb .divider { + display: inline-block; + opacity: @dividerOpacity; + margin: 0 @dividerSpacing 0; + + 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; +} + +& when (@variationBreadcrumbInverted) { + /* Inverted */ + .ui.inverted.breadcrumb { + color: @invertedColor; + } + .ui.inverted.breadcrumb > .active.section { + color: @invertedActiveColor; + } + .ui.inverted.breadcrumb > .divider { + color: @invertedDividerColor; + } +} + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: @activeFontWeight; +} + + +/******************************* + Variations +*******************************/ + +.ui.breadcrumb { + font-size: @medium; +} +& when not (@variationBreadcrumbSizes = false) { + each(@variationBreadcrumbSizes, { + @s: @@value; + .ui.@{value}.breadcrumb { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/form.less b/semantic/src/definitions/collections/form.less new file mode 100644 index 0000000..3cde7f1 --- /dev/null +++ b/semantic/src/definitions/collections/form.less @@ -0,0 +1,1112 @@ +/*! + * # Fomantic-UI - Form + * http://github.com/fomantic/Fomantic-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 .fields .fields, +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0; +} + +.ui.form .fields .field { + clear: both; + margin: 0; +} + + +/*-------------------- + 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: 0; + outline: none; + -webkit-appearance: none; + -webkit-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.input textarea, +.ui.form textarea { + margin: 0; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + + padding: @textAreaPadding; + background: @textAreaBackground; + border: @textAreaBorder; + outline: none; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @textAreaTransition; + font-size: @textAreaFontSize; + font-family: @inputFont; + 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; +} + +/*-------------------- + Checkbox margin +---------------------*/ + +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { + margin-top: @checkboxLabelFieldTopMargin; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { + margin-top: @inputLineHeight + @checkboxFieldTopMargin; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { + margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin; +} +.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { + margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { + margin-top: @checkboxFieldTopMargin / 2; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { + margin-top: @checkboxToggleFieldTopMargin / 2; +} +.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { + margin-top: @checkboxSliderFieldTopMargin / 2; +} + +& when (@variationFormTransparent) { + /*-------------------- + Transparent + ---------------------*/ + + .ui.form .field .transparent.input:not(.icon) input, + .ui.form .field input.transparent, + .ui.form .field textarea.transparent { + padding: @transparentPadding; + } + + .ui.form .field input.transparent, + .ui.form .field textarea.transparent { + border-color: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + } +} +/*-------------------------- + 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 { + min-width: auto; + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +& when (@variationFormInline) { + /* 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%; +} + +& when (@variationFormInline) { + /* 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: 0; +} + + +/*-------------------- + Types of Messages +---------------------*/ +& when (@variationFormStates) { + each(@formStates, { + @state: replace(@key, '@', ''); + .ui.form .@{state}.message, + .ui.form .@{state}.message:empty { + display: none; + } + }) +} + +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: @promptBackground !important; + border: @promptBorder !important; + color: @promptTextColor !important; +} +& when (@variationFormInline) { + .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: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth; + bottom: auto; + right: auto; + top: 50%; + left: 0; + } +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0 0 0 100px @inputAutoFillBackground inset !important; + border-color: @inputAutoFillBorder !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0 0 0 100px @inputAutoFillFocusBackground inset !important; + border-color: @inputAutoFillFocusBorder !important; +} + + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form :-ms-input-placeholder { + color: @inputPlaceholderColor !important; +} +.ui.form ::-moz-placeholder { + color: @inputPlaceholderColor; +} + +.ui.form :focus::-webkit-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus:-ms-input-placeholder { + color: @inputPlaceholderFocusColor !important; +} +.ui.form :focus::-moz-placeholder { + color: @inputPlaceholderFocusColor; +} + + + +/*-------------------- + 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; +} +& when (@variationInputAction) { + .ui.form .ui.action.input:not([class*="left action"]) { + & input:not([type]):focus, + input[type="date"]:focus, + input[type="datetime-local"]:focus, + input[type="email"]:focus, + input[type="number"]:focus, + input[type="password"]:focus, + input[type="search"]:focus, + input[type="tel"]:focus, + input[type="time"]:focus, + input[type="text"]:focus, + input[type="file"]:focus, + input[type="url"]:focus { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + .ui.form .ui[class*="left action"].input { + & input:not([type]), + input[type="date"], + input[type="datetime-local"], + input[type="email"], + input[type="number"], + input[type="password"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="text"], + input[type="file"], + input[type="url"] { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } +} +.ui.form textarea:focus { + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; + -webkit-appearance: none; +} + +& when (@variationFormStates) { + /*-------------------- + States + ---------------------*/ + each(@formStates, { + @state: replace(@key, '@', ''); + @c: @formStates[@@state][color]; + @bg: @formStates[@@state][background]; + @bdc: @formStates[@@state][borderColor]; + + /* On Form */ + .ui.form.@{state} .@{state}.message:not(:empty) { + display: block; + } + .ui.form.@{state} .compact.@{state}.message:not(:empty) { + display: inline-block; + } + .ui.form.@{state} .icon.@{state}.message:not(:empty) { + display: flex; + } + + /* On Field(s) */ + .ui.form .fields.@{state} .@{state}.message:not(:empty), + .ui.form .field.@{state} .@{state}.message:not(:empty) { + display: block; + } + .ui.form .fields.@{state} .compact.@{state}.message:not(:empty), + .ui.form .field.@{state} .compact.@{state}.message:not(:empty) { + display: inline-block; + } + .ui.form .fields.@{state} .icon.@{state}.message:not(:empty), + .ui.form .field.@{state} .icon.@{state}.message:not(:empty) { + display: flex; + } + + .ui.ui.form .fields.@{state} .field label, + .ui.ui.form .field.@{state} label, + .ui.ui.form .fields.@{state} .field .input, + .ui.ui.form .field.@{state} .input { + color: @c; + } + + .ui.form .fields.@{state} .field .corner.label, + .ui.form .field.@{state} .corner.label { + border-color: @c; + color: @formStates[@@state][cornerLabelColor]; + } + + .ui.form .fields.@{state} .field textarea, + .ui.form .fields.@{state} .field select, + .ui.form .fields.@{state} .field input:not([type]), + .ui.form .fields.@{state} .field input[type="date"], + .ui.form .fields.@{state} .field input[type="datetime-local"], + .ui.form .fields.@{state} .field input[type="email"], + .ui.form .fields.@{state} .field input[type="number"], + .ui.form .fields.@{state} .field input[type="password"], + .ui.form .fields.@{state} .field input[type="search"], + .ui.form .fields.@{state} .field input[type="tel"], + .ui.form .fields.@{state} .field input[type="time"], + .ui.form .fields.@{state} .field input[type="text"], + .ui.form .fields.@{state} .field input[type="file"], + .ui.form .fields.@{state} .field input[type="url"], + .ui.form .field.@{state} textarea, + .ui.form .field.@{state} select, + .ui.form .field.@{state} input:not([type]), + .ui.form .field.@{state} input[type="date"], + .ui.form .field.@{state} input[type="datetime-local"], + .ui.form .field.@{state} input[type="email"], + .ui.form .field.@{state} input[type="number"], + .ui.form .field.@{state} input[type="password"], + .ui.form .field.@{state} input[type="search"], + .ui.form .field.@{state} input[type="tel"], + .ui.form .field.@{state} input[type="time"], + .ui.form .field.@{state} input[type="text"], + .ui.form .field.@{state} input[type="file"], + .ui.form .field.@{state} input[type="url"] { + color: @c; + background: @bg; + border-color: @formStates[@@state][borderColor]; + border-radius: @formStates[@@state][borderRadius]; + box-shadow: @formStates[@@state][boxShadow]; + } + + .ui.form .field.@{state} textarea:focus, + .ui.form .field.@{state} select:focus, + .ui.form .field.@{state} input:not([type]):focus, + .ui.form .field.@{state} input[type="date"]:focus, + .ui.form .field.@{state} input[type="datetime-local"]:focus, + .ui.form .field.@{state} input[type="email"]:focus, + .ui.form .field.@{state} input[type="number"]:focus, + .ui.form .field.@{state} input[type="password"]:focus, + .ui.form .field.@{state} input[type="search"]:focus, + .ui.form .field.@{state} input[type="tel"]:focus, + .ui.form .field.@{state} input[type="time"]:focus, + .ui.form .field.@{state} input[type="text"]:focus, + .ui.form .field.@{state} input[type="file"]:focus, + .ui.form .field.@{state} input[type="url"]:focus { + background: @formStates[@@state][inputFocusBackground]; + border-color: @formStates[@@state][inputFocusBorderColor]; + color: @formStates[@@state][inputFocusColor]; + + box-shadow: @formStates[@@state][inputFocusBoxShadow]; + } + + /* Preserve Native Select Stylings */ + .ui.form .field.@{state} select { + -webkit-appearance: menulist-button; + } + + /*------------------ + Input State + --------------------*/ + /* Transparent */ + .ui.form .field.@{state} .transparent.input input, + .ui.form .field.@{state} .transparent.input textarea, + .ui.form .field.@{state} input.transparent, + .ui.form .field.@{state} textarea.transparent { + background-color: @formStates[@@state][transparentBackground] !important; + color: @formStates[@@state][transparentColor] !important; + } + + /* Autofilled */ + .ui.form .@{state}.@{state} input:-webkit-autofill { + box-shadow: 0 0 0 100px @formStates[@@state][inputAutoFillBackground] inset !important; + border-color: @formStates[@@state][inputAutoFillBorderColor] !important; + } + + /* Placeholder */ + .ui.form .@{state} ::-webkit-input-placeholder { + color: @formStates[@@state][inputPlaceholderColor]; + } + .ui.form .@{state} :-ms-input-placeholder { + color: @formStates[@@state][inputPlaceholderColor] !important; + } + .ui.form .@{state} ::-moz-placeholder { + color: @formStates[@@state][inputPlaceholderColor]; + } + + .ui.form .@{state} :focus::-webkit-input-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor]; + } + .ui.form .@{state} :focus:-ms-input-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor] !important; + } + .ui.form .@{state} :focus::-moz-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor]; + } + + /*------------------ + Dropdown State + --------------------*/ + + .ui.form .fields.@{state} .field .ui.dropdown, + .ui.form .fields.@{state} .field .ui.dropdown .item, + .ui.form .field.@{state} .ui.dropdown, + .ui.form .field.@{state} .ui.dropdown .text, + .ui.form .field.@{state} .ui.dropdown .item { + background: @bg; + color: @c; + } + .ui.form .fields.@{state} .field .ui.dropdown, + .ui.form .field.@{state} .ui.dropdown { + border-color: @bdc !important; + } + .ui.form .fields.@{state} .field .ui.dropdown:hover, + .ui.form .field.@{state} .ui.dropdown:hover { + border-color: @bdc !important; + } + .ui.form .fields.@{state} .field .ui.dropdown:hover .menu, + .ui.form .field.@{state} .ui.dropdown:hover .menu { + border-color: @bdc; + } + .ui.form .fields.@{state} .field .ui.multiple.selection.dropdown > .label, + .ui.form .field.@{state} .ui.multiple.selection.dropdown > .label { + background-color: @formStates[@@state][dropdownLabelBackground]; + color: @formStates[@@state][dropdownLabelColor]; + } + + /* Hover */ + .ui.form .fields.@{state} .field .ui.dropdown .menu .item:hover, + .ui.form .field.@{state} .ui.dropdown .menu .item:hover { + background-color: @formStates[@@state][dropdownHoverBackground]; + } + + /* Selected */ + .ui.form .fields.@{state} .field .ui.dropdown .menu .selected.item, + .ui.form .field.@{state} .ui.dropdown .menu .selected.item { + background-color: @formStates[@@state][dropdownSelectedBackground]; + } + + /* Active */ + .ui.form .fields.@{state} .field .ui.dropdown .menu .active.item, + .ui.form .field.@{state} .ui.dropdown .menu .active.item { + background-color: @formStates[@@state][dropdownActiveBackground] !important; + } + + /*-------------------- + Checkbox State + ---------------------*/ + .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label, + .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label, + .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box, + .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box { + color: @c; + } + .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before, + .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before, + .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box:before, + .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box:before { + background: @bg; + border-color: @bdc; + } + .ui.form .fields.@{state} .field .checkbox label:after, + .ui.form .field.@{state} .checkbox label:after, + .ui.form .fields.@{state} .field .checkbox .box:after, + .ui.form .field.@{state} .checkbox .box:after { + color: @c; + } + }) +} + +& when (@variationFormDisabled) { + /*-------------------- + 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; + } +} + +& when (@variationFormLoading) { + /*-------------- + 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.segments:before { + border-radius: @defaultBorderRadius; + } + + .ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; + border-radius: @circularRadius; + + box-shadow: 0 0 0 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; + } +} + +/******************************* + Element Types +*******************************/ + +& when (@variationFormRequired) { + /*-------------------- + 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, + .ui.form label.required: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, + .ui.form label.required: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 +*******************************/ + +& when (@variationFormInverted) { + /*-------------------- + 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; + } + .ui.inverted.loading.form { + color: @invertedLoaderLineColor; + } + .ui.inverted.loading.form:before { + background: @loaderInvertedDimmerColor; + } + /* 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; + } +} + +& when (@variationFormGrouped) { + /*-------------------- + Field Groups + ---------------------*/ + + /* Grouped Vertically */ + + .ui.form .grouped.fields { + display: block; + margin: @groupedMargin; + } + + .ui.form .grouped.fields:last-child { + margin-bottom: 0; + } + + .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: 0; + } + .ui.form .grouped.inline.fields .ui.checkbox { + margin-bottom: @groupedInlineCheckboxBottomMargin; + } +} + +/*-------------------- + 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; + margin-bottom: 0; + } + + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { + width: @oneColumn; + margin: 0 0 @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; +} +.ui.form .two.wide.field { + width: @twoWide; +} +.ui.form .three.wide.field { + width: @threeWide; +} +.ui.form .four.wide.field { + width: @fourWide; +} +.ui.form .five.wide.field { + width: @fiveWide; +} +.ui.form .six.wide.field { + width: @sixWide; +} +.ui.form .seven.wide.field { + width: @sevenWide; +} +.ui.form .eight.wide.field { + width: @eightWide; +} +.ui.form .nine.wide.field { + width: @nineWide; +} +.ui.form .ten.wide.field { + width: @tenWide; +} +.ui.form .eleven.wide.field { + width: @elevenWide; +} +.ui.form .twelve.wide.field { + width: @twelveWide; +} +.ui.form .thirteen.wide.field { + width: @thirteenWide; +} +.ui.form .fourteen.wide.field { + width: @fourteenWide; +} +.ui.form .fifteen.wide.field { + width: @fifteenWide; +} +.ui.form .sixteen.wide.field { + width: @sixteenWide; +} + + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; +} + +& when (@variationFormInline) { + /*-------------------- + Inline Fields + ---------------------*/ + + .ui.form .inline.fields { + margin: @fieldMargin; + align-items: center; + } + .ui.form .inline.fields .field { + margin: 0; + 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: 0; + margin-bottom: 0; + 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: 0; + margin-bottom: 0; + + vertical-align: middle; + font-size: @inlineInputSize; + } + + .ui.form .inline.fields .field .calendar:not(.popup), + .ui.form .inline.field .calendar:not(.popup) { + display:inline-block; + } + + .ui.form .inline.fields .field .calendar:not(.popup) > .input > input, + .ui.form .inline.field .calendar:not(.popup) > .input > input { + width: @inlineCalendarWidth; + } + + /* Label */ + .ui.form .inline.fields .field > :first-child, + .ui.form .inline.field > :first-child { + margin: 0 @inlineLabelDistance 0 0; + } + .ui.form .inline.fields .field > :only-child, + .ui.form .inline.field > :only-child { + margin: 0; + } + + /* 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.form, +.ui.form .field .dropdown, +.ui.form .field .dropdown .menu > .item { + font-size: @medium; +} +& when not (@variationFormSizes = false) { + each(@variationFormSizes, { + @s: @@value; + .ui.@{value}.form, + .ui.@{value}.form .field .dropdown, + .ui.@{value}.form .field .dropdown .menu > .item { + font-size: @s; + } + }) +} + + +.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/grid.less b/semantic/src/definitions/collections/grid.less new file mode 100644 index 0000000..1b5e252 --- /dev/null +++ b/semantic/src/definitions/collections/grid.less @@ -0,0 +1,1947 @@ +/*! + * # Fomantic-UI - Grid + * http://github.com/fomantic/Fomantic-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: 0; +} + +/*---------------------- + 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: 0; + 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: 0; + margin-bottom: 0; +} + +/*------------------- + 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: 0; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0; +} + +/* 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: e(%("calc(50%% - %d)", @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 +*******************************/ + +& when (@variationGridPage) { + /*----------------------- + Page Grid + -------------------------*/ + + @media only screen and (max-width: @largestMobileScreen) { + .ui.page.grid { + width: @mobileWidth; + padding-left: @mobileGutter; + padding-right: @mobileGutter; + margin-left: 0; + margin-right: 0; + } + } + @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; +} + +& when (@variationGridCelled) and (@variationGridPage){ + /* 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; + } +} + +& when (@variationGridCentered) { + /*---------------------- + 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; + } +} + +& when (@variationGridRelaxed) { + /*---------------------- + 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); + } +} + +& when (@variationGridPadded) { + /*---------------------- + Padded + -----------------------*/ + + .ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0 !important; + } + [class*="horizontally padded"].ui.grid { + margin-left: 0 !important; + margin-right: 0 !important; + } + [class*="vertically padded"].ui.grid { + margin-top: 0 !important; + margin-bottom: 0 !important; + } +} + +& when (@variationGridFloated) { + /*---------------------- + "Floated" + -----------------------*/ + + .ui.grid [class*="left floated"].column { + margin-right: auto; + } + .ui.grid [class*="right floated"].column { + margin-left: auto; + } +} + +& when (@variationGridDivided) { + /*---------------------- + 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: 0; + padding-bottom: 0; + } + .ui[class*="vertically divided"].grid > .row { + margin-top: 0; + margin-bottom: 0; + } + + + + /* 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: 0; + } + + + /* 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: 0; + left: 0; + + width: e(%("calc(100%% - %d)", @gutterWidth)); + height: 1px; + + margin: 0 (@gutterWidth / 2); + box-shadow: @verticallyDividedBorder; + } + + & when (@variationGridPadded) { + /* 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; + } + & when (@variationGridInverted) { + /* 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; + } + } + & when (@variationGridRelaxed) { + /* Relaxed */ + .ui.relaxed[class*="vertically divided"].grid > .row:before { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); + width: e(%("calc(100%% - %d)", @relaxedGutterWidth)); + } + .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); + width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth)); + } + } +} + +& when (@variationGridCelled) { + /*---------------------- + Celled + -----------------------*/ + + .ui.celled.grid { + width: 100%; + margin: @celledMargin; + box-shadow: @celledGridDivider; + } + + .ui.celled.grid > .row { + width: 100% !important; + margin: 0; + padding: 0; + 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; + } + & when (@variationGridRelaxed) { + .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: 0; + } + .ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; + } + .ui[class*="internally celled"].grid > .row > .column:first-child { + box-shadow: none; + } +} + +& when (@variationGridAligned) { + /*---------------------- + 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; + } +} + +& when (@variationGridStretched) { + /* 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; + } +} + +& when (@variationGridAligned) { + /*---------------------- + 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; + } +} + +& when (@variationGridJustified) { + /* 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 +-----------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + + .ui.grid > .@{color}.row, + .ui.grid > .@{color}.column, + .ui.grid > .row > .@{color}.column { + background-color: @c; + 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; +} + +& when (@variationGridReversed) { + /*---------------------- + 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; + } + & when (@variationGridDivided) { + /* 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; + } + } + & when (@variationGridCelled) { + /* 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; + } + & when (@variationGridDivided) { + /* 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; + } + } + & when (@variationGridCelled) { + /* 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; + } + & when (@variationGridDivided) { + /* 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; + } + } + & when (@variationGridCelled) { + /* 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; + } + } + } +} + +& when (@variationGridDoubling) { + /*------------------- + 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: 0 !important; + padding: 0 !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: 0; + } + .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: 0 !important; + padding: 0 !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + margin: 0 !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; + } + } +} + +& when (@variationGridStackable) { + /*------------------- + Stackable + --------------------*/ + + @media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.grid { + width: auto; + margin-left: 0 !important; + margin-right: 0 !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.stackable.row > .column { + width: 100% !important; + margin: 0 0 !important; + box-shadow: none !important; + padding: (@stackableRowSpacing / 2) (@stackableGutter / 2); + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0; + padding: 0; + } + + /* Coupling */ + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0 !important; + padding-right: 0 !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; + } + & when (@variationGridInverted) { + .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; + } + & when (@variationGridCelled) { + .ui.stackable.celled.grid > .row { + box-shadow: none !important; + } + } + & when (@variationGridDivided) { + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .row > .column { + padding-left: 0 !important; + padding-right: 0 !important; + } + } + } + +} + +/*---------------------- + 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; + } +} + +& when (@variationGridCompact) { + /*----------------- + Compact + -----------------*/ + + .ui.ui.ui.compact.grid > .column:not(.row), + .ui.ui.ui.compact.grid > .row > .column { + padding-left: (@compactGutterWidth / 2); + padding-right: (@compactGutterWidth / 2); + } + + .ui.ui.ui.compact.grid > * { + padding-left: (@compactGutterWidth / 2); + padding-right: (@compactGutterWidth / 2); + } + + /* Row */ + .ui.ui.ui.compact.grid > .row { + padding-top: (@compactRowSpacing / 2); + padding-bottom: (@compactRowSpacing / 2); + } + + /* Columns */ + .ui.ui.ui.compact.grid > .column:not(.row) { + padding-top: (@compactRowSpacing / 2); + padding-bottom: (@compactRowSpacing / 2); + } + & when (@variationGridRelaxed) and (@variationGridCelled) { + /* Relaxed + Celled */ + .ui.compact.relaxed.celled.grid > .column:not(.row), + .ui.compact.relaxed.celled.grid > .row > .column { + padding: @compactCelledRelaxedPadding; + } + .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), + .ui.compact[class*="very relaxed"].celled.grid > .row > .column { + padding: @compactCelledVeryRelaxedPadding; + } + } + + /*----------------- + Very compact + -----------------*/ + + .ui.ui.ui[class*="very compact"].grid > .column:not(.row), + .ui.ui.ui[class*="very compact"].grid > .row > .column { + padding-left: (@veryCompactGutterWidth / 2); + padding-right: (@veryCompactGutterWidth / 2); + } + + .ui.ui.ui[class*="very compact"].grid > * { + padding-left: (@veryCompactGutterWidth / 2); + padding-right: (@veryCompactGutterWidth / 2); + } + + /* Row */ + .ui.ui.ui[class*="very compact"].grid > .row { + padding-top: (@veryCompactRowSpacing / 2); + padding-bottom: (@veryCompactRowSpacing / 2); + padding-left: (@veryCompactGutterWidth * 1.5); + padding-right: (@veryCompactGutterWidth * 1.5); + } + + /* Columns */ + .ui.ui.ui[class*="very compact"].grid > .column:not(.row) { + padding-top: (@veryCompactRowSpacing / 2); + padding-bottom: (@veryCompactRowSpacing / 2); + } + & when (@variationGridRelaxed) and (@variationGridCelled) { + /* Relaxed + Celled */ + .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row), + .ui[class*="very compact"].relaxed.celled.grid > .row > .column { + padding: @veryCompactCelledRelaxedPadding; + } + .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row), + .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column { + padding: @veryCompactCelledVeryRelaxedPadding; + } + } +} + + +.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/menu.less b/semantic/src/definitions/collections/menu.less new file mode 100644 index 0000000..3d712ed --- /dev/null +++ b/semantic/src/definitions/collections/menu.less @@ -0,0 +1,1939 @@ +/* + * # Fomantic - Menu + * http://github.com/fomantic/Fomantic-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: 0; + clear: both; + visibility: hidden; +} + +.ui.menu:first-child { + margin-top: 0; +} +.ui.menu:last-child { + margin-bottom: 0; +} + + +/*-------------- + Sub-Menu +---------------*/ + +.ui.menu .menu { + margin: 0; +} + +.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 0 0 @borderRadius; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0; + right: 0; + 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 0; +} +.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: 0; + background: @headerBackground; + text-transform: @headerTextTransform; + font-weight: @headerWeight; +} + +& when (@variationMenuVertical) { + .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: 0; + float: @dropdownIconFloat; + margin: 0 0 0 @dropdownIconDistance; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + min-width: e("calc(100% - 1px)"); + border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0 0; + 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 > .icons, +.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { + display: inline-block; + font-size: @dropdownItemIconFontSize !important; + float: @dropdownItemIconFloat; + margin: @dropdownItemIconMargin !important; +} + +& when (@variationMenuSecondary) or (@variationMenuText) { + /* 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; +} + +& when (@variationMenuInverted) { + /* Inverted */ + .ui.inverted.menu .search.dropdown.item > .search, + .ui.inverted.menu .search.dropdown.item > .text { + color: @invertedSelectionDropdownColor; + } +} + +& when (@variationMenuVertical) { + /* Vertical */ + .ui.vertical.menu .dropdown.item > i.icon { + float: right; + content: "\f0da"; + margin-left: 1em; + } + .ui.vertical.menu .dropdown.item .menu { + left: 100%; + /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ + min-width: 0; + min-width: max-content; + margin: 0 0 0 @dropdownMenuDistance; + box-shadow: @dropdownVerticalMenuBoxShadow; + border-radius: 0 @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: 0; + border-bottom-right-radius: 0; + } + .ui.vertical.menu .dropdown.active.item { + box-shadow: none; + } +} + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; +} + +/*-------------- + Labels +---------------*/ + +.ui.menu .item > .label:not(.floating) { + margin-left: @labelTextMargin; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +& when (@variationMenuVertical) { + .ui.vertical.menu .item > .label { + margin-top: @labelOffset; + margin-bottom: @labelOffset; + padding: @labelVerticalPadding @labelHorizontalPadding; + } +} +.ui.menu .item > .floating.label { + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; +} +.ui.menu .item > .image.label img { + margin: @imageLabelImageMargin; + height: @imageLabelHeight; +} +/*-------------- + Images +---------------*/ + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: @imageMargin; + width: @imageWidth; +} +& when (@variationMenuVertical) { + .ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: @verticalImageWidth; + } +} + +/******************************* + Coupling +*******************************/ + +/*-------------- + List +---------------*/ + +/* Menu divider shouldnt apply */ +.ui.menu .list .item:before { + background: none !important; +} + +& when (@variationMenuVertical) { + /*-------------- + 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: 0; + } +} + +/*-------------- + Container +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !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; + } + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { + border-right: @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.ui.menu .item.disabled { + cursor: default; + background-color: transparent; + color: @disabledTextColor; + pointer-events: none; +} + + +/******************************* + 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; +} + +.ui.menu:not(.vertical) :not(.dropdown) > .left.menu, +.ui.menu:not(.vertical) :not(.dropdown) > .right.menu { + display: inherit; +} + +/* Center */ +.ui.menu:not(.vertical) .center.item, +.ui.menu:not(.vertical) .center.menu { + display: flex; + margin-left: auto !important; + margin-right: auto !important; +} + +/* Swapped Borders */ +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + +/* Remove Outer Borders */ +.ui.menu .center.item:last-child::before, +.ui.menu .center.menu > .item:last-child::before { + display: none; +} + +& when (@variationMenuVertical) { + /*-------------- + 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 0 0; + } + .ui.vertical.menu > .item:last-child { + border-radius: 0 0 @borderRadius @borderRadius; + } + + /*--- Label ---*/ + .ui.vertical.menu .item > .label { + float: right; + text-align: center; + } + + /*--- Icon ---*/ + .ui.vertical.menu .item > i.icon, + .ui.vertical.menu .item > i.icons { + 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: 0; + 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: 0; + box-shadow: @verticalActiveBoxShadow; + } + .ui.vertical.menu > .active.item:first-child { + border-radius: @borderRadius @borderRadius 0 0; + } + .ui.vertical.menu > .active.item:last-child { + border-radius: 0 0 @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; + } +} + +& when (@variationMenuTabular) { + /*-------------- + Tabular + ---------------*/ + + .ui.tabular.menu { + border-radius: 0; + 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 0 0 !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: 0; + margin-top: 0; + margin-right: 0; + 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: 0; + 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 0 0 0; + border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important; + } + & when (@variationMenuVertical) { + /* Vertical Tabular (Left) */ + .ui.vertical.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0; + 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: 0 -@tabularBorderWidth 0 0; + border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important; + } + + /* Vertical Right Tabular */ + .ui.vertical.right.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0; + 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: 0 0 0 -@tabularBorderWidth; + border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important; + } + } + /* Dropdown */ + .ui.tabular.menu .active.dropdown.item { + margin-bottom: 0; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + border-bottom: none; + } +} + + +& when (@variationMenuPagination) { + /*-------------- + Pagination + ---------------*/ + + .ui.pagination.menu { + margin: 0; + display: inline-flex; + vertical-align: middle; + } + .ui.pagination.menu .item:last-child { + border-radius: 0 @borderRadius @borderRadius 0; + } + .ui.compact.menu .item:last-child { + border-radius: 0 @borderRadius @borderRadius 0; + } + .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; + } +} + +& when (@variationMenuSecondary) { + /*-------------- + Secondary + ---------------*/ + + .ui.secondary.menu { + background: @secondaryBackground; + margin-left: -@secondaryItemSpacing; + margin-right: -@secondaryItemSpacing; + border-radius: 0; + 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: 0; + border-right: @secondaryHeaderBorder; + background: @secondaryHeaderBackground; + } + + /* Image */ + .ui.secondary.menu .item > img:not(.ui) { + margin: 0; + } + + /* 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; + } + + & when (@variationMenuInverted) { + /* Inverted */ + .ui.secondary.inverted.menu .link.item:not(.disabled), + .ui.secondary.inverted.menu a.item:not(.disabled) { + color: @secondaryInvertedColor; + } + .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; + } + .ui.secondary.inverted.menu .active.item { + background: @secondaryInvertedActiveBackground; + color: @secondaryInvertedActiveColor; + } + } + /* Fix item margins */ + .ui.secondary.item.menu { + margin-left: 0; + margin-right: 0; + } + .ui.secondary.item.menu .item:last-child { + margin-right: 0; + } + & when (@variationMenuAttached) { + .ui.secondary.attached.menu { + box-shadow: none; + } + } + & when (@variationMenuVertical) { + /*--------------------- + Secondary Vertical + -----------------------*/ + + /* 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; + } + + + .ui.secondary.vertical.menu > .item { + border: none; + margin: @secondaryVerticalItemMargin; + border-radius: @secondaryVerticalItemBorderRadius !important; + } + .ui.secondary.vertical.menu > .header.item { + border-radius: 0; + } + + /* Sub Menu */ + .ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; + } + + /* Inverted */ + .ui.secondary.inverted.menu { + background-color: transparent; + } + } + + & when (@variationMenuPointing) { + /*--------------------- + Secondary Pointing + -----------------------*/ + + .ui.secondary.pointing.menu { + margin-left: 0; + margin-right: 0; + border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; + } + + .ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0; + align-self: flex-end; + + margin: 0 0 -@secondaryPointingBorderWidth; + padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; + border-bottom-width: @secondaryPointingBorderWidth; + transition: @secondaryItemTransition; + } + .ui.secondary.pointing.menu .ui.dropdown .menu .item { + border-bottom-width: 0; + } + + .ui.secondary.pointing.menu .item > .label:not(.floating) { + margin-top: -@labelVerticalPadding; + margin-bottom: -@labelVerticalPadding; + } + .ui.secondary.pointing.menu .item > .circular.label { + margin-top: -@circularLabelVerticalPadding; + margin-bottom: -@circularLabelVerticalPadding; + } + + /* 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; + } + & when (@variationMenuVertical) { + /* Vertical Pointing */ + .ui.secondary.vertical.pointing.menu { + border-bottom-width: 0; + 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: 0 !important; + margin: @secondaryVerticalPointingItemMargin; + border-right-width: @secondaryPointingBorderWidth; + } + + /* Vertical Active */ + .ui.secondary.vertical.pointing.menu .active.item { + border-color: @secondaryPointingActiveBorderColor; + } + } + & when (@variationMenuInverted) { + /* Inverted */ + .ui.secondary.inverted.pointing.menu { + border-color: @secondaryPointingInvertedBorderColor; + } + + .ui.secondary.inverted.pointing.menu .item:not(.disabled) { + 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.ui.secondary.inverted.pointing.menu .active.item { + border-color: @secondaryPointingInvertedActiveBorderColor; + color: @secondaryPointingInvertedActiveColor; + background-color: transparent; + } + } + } +} + +& when (@variationMenuText) { + /*-------------- + Text Menu + ---------------*/ + + .ui.text.menu { + background: none transparent; + border-radius: 0; + box-shadow: none; + border: none; + + margin: @textMenuMargin; + } + .ui.text.menu .item { + border-radius: 0; + 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: 0; + } + + /*--- fluid text ---*/ + .ui.text.item.menu .item { + margin: 0; + } + & when (@variationMenuVertical) { + /*--- vertical text ---*/ + .ui.vertical.text.menu { + margin: @textVerticalMenuMargin; + } + .ui.vertical.text.menu:first-child { + margin-top: 0; + } + .ui.vertical.text.menu:last-child { + margin-bottom: 0; + } + .ui.vertical.text.menu .item { + margin: @textVerticalMenuItemMargin; + padding-left: 0; + padding-right: 0; + } + .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; + } + & when (@variationMenuPointing) { + /* Disable Bariations */ + .ui.text.pointing.menu .active.item:after { + box-shadow: none; + } + } + & when (@variationMenuAttached) { + .ui.text.attached.menu { + box-shadow: none; + } + } + & when (@variationMenuInverted) { + /* 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; + } + } + & when (@variationMenuFluid) { + /* Fluid */ + .ui.fluid.text.menu { + margin-left: 0; + margin-right: 0; + } + } +} + +/*-------------- + 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 > i.icon:not(.dropdown) { + margin: 0; + opacity: 1; +} + +/* Icon Gylph */ +.ui.icon.menu i.icon:before { + opacity: 1; +} + +/* (x) Item Icon */ +.ui.menu .icon.item > i.icon { + width: auto; + margin: 0 auto; +} + +/* Vertical Icon */ +.ui.vertical.icon.menu .item > i.icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0 auto; + float: none; +} + +/* Inverted */ +.ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; +} + +& when (@variationMenuLabeled) { + /*-------------- + 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 > i.icon:not(.dropdown) { + height: 1em; + display: block; + font-size: @labeledIconSize !important; + margin: 0 auto @labeledIconTextMargin !important; + } + & when (@variationMenuFluid) { + /* Fluid */ + .ui.fluid.labeled.icon.menu > .item { + min-width: 0; + } + } +} + + +/******************************* + Variations +*******************************/ + +& when (@variationMenuStackable) { + /*-------------- + 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: 0; + left: 0; + 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 .center.menu, + .ui.stackable.menu .center.item { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .ui.stackable.menu .right.menu, + .ui.stackable.menu .center.menu, + .ui.stackable.menu .left.menu { + flex-direction: column; + } + } +} + +/*-------------- + Colors +---------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + + & when not (@color=secondary) { + .ui.ui.ui.menu .@{color}.active.item, + .ui.ui.@{color}.menu .active.item:hover, + .ui.ui.@{color}.menu .active.item { + & when not (@secondaryPointingActiveBorderColor = currentColor) { + border-color: @c; + } + color: @c; + } + } +}) + +& when (@variationMenuInverted) { + /*-------------- + 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; + } + & when (@variationMenuVertical) { + .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: 0; + background: @invertedHeaderBackground; + box-shadow: none; + } + + /* Disabled */ + .ui.ui.inverted.menu .item.disabled { + 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; + } + & when (@variationMenuVertical) { + .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; + } + & when (@variationMenuVertical) { + .ui.inverted.vertical.menu .item .menu .active.item { + background: @invertedSubMenuActiveBackground; + color: @invertedSubMenuActiveColor; + } + } + & when (@variationMenuPointing) { + .ui.inverted.pointing.menu .active.item:after { + background: @invertedArrowActiveColor; + margin: 0 !important; + box-shadow: none !important; + border: none !important; + } + } + + /*--- Active Hover ---*/ + .ui.inverted.menu .active.item:hover { + background: @invertedActiveHoverBackground; + color: @invertedActiveHoverColor !important; + } + & when (@variationMenuPointing) { + .ui.inverted.pointing.menu .active.item:hover:after { + background: @invertedArrowActiveHoverColor; + } + } +} + +& when (@variationMenuFloated) { + /*-------------- + Floated + ---------------*/ + + .ui.floated.menu { + float: left; + margin: 0 @floatedDistance 0 0; + } + .ui.floated.menu .item:last-child:before { + display: none; + } + + .ui.right.floated.menu { + float: right; + margin: 0 0 0 @floatedDistance; + } +} + +& when (@variationMenuInverted) { + /*-------------- + Inverted + ---------------*/ + + each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @h: @colors[@@color][hover]; + + & when not (@color=secondary) { + .ui.ui.ui.inverted.menu .@{color}.active.item, + .ui.ui.inverted.@{color}.menu { + background-color: @c; + } + .ui.inverted.@{color}.menu .item:before { + background-color: @invertedColoredDividerBackground; + } + .ui.ui.inverted.@{color}.menu .active.item { + background-color: @invertedColoredActiveBackground; + } + & when (@variationMenuPointing) { + .ui.inverted.pointing.@{color}.menu .active.item { + background-color: @h; + } + } + } + }) + + & when (@variationMenuPointing) { + .ui.ui.ui.inverted.pointing.menu .active.item:after { + background-color: inherit; + } + } +} + +& when (@variationMenuFitted) { + /*-------------- + Fitted + ---------------*/ + + .ui.fitted.menu .item, + .ui.fitted.menu .item .menu .item, + .ui.menu .fitted.item { + padding: 0; + } + .ui.horizontally.fitted.menu .item, + .ui.horizontally.fitted.menu .item .menu .item, + .ui.menu .horizontally.fitted.item { + padding-top: @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; + } +} + +& when (@variationMenuBorderless) { + /*-------------- + Borderless + ---------------*/ + + .ui.borderless.menu .item:before, + .ui.borderless.menu .item .menu .item:before, + .ui.menu .borderless.item:before { + background: none !important; + } +} + +& when (@variationMenuCompact) { + /*------------------- + Compact + --------------------*/ + + .ui.compact.menu { + display: inline-flex; + margin: 0; + vertical-align: middle; + } + & when (@variationMenuVertical) { + .ui.compact.vertical.menu { + /* IE hack to make dropdown icons appear inline */ + display: -ms-inline-flexbox !important; + display: inline-block; + } + } + .ui.compact.menu:not(.secondary) .item:last-child { + border-radius: 0 @borderRadius @borderRadius 0; + } + .ui.compact.menu .item:last-child:before { + display: none; + } + & when (@variationMenuVertical) { + .ui.compact.vertical.menu { + width: auto !important; + } + .ui.compact.vertical.menu .item:last-child::before { + display: block; + } + } +} + +& when (@variationMenuFluid) { + /*------------------- + Fluid + --------------------*/ + + .ui.menu.fluid, + .ui.vertical.menu.fluid { + width: 100% !important; + } +} + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + text-align: center; + justify-content: center; +} +.ui.attached.item.menu:not(.tabular) { + margin: 0 @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%; +} + +& when (@variationMenuFixed) { + /*-------------- + Fixed + ---------------*/ + + .ui.menu.fixed { + position: fixed; + z-index: 101; + margin: 0; + width: 100%; + } + .ui.menu.fixed, + .ui.menu.fixed .item:first-child, + .ui.menu.fixed .item:last-child { + border-radius: 0 !important; + } + + .ui.fixed.menu, + .ui[class*="top fixed"].menu { + top: 0; + left: 0; + right: auto; + bottom: auto; + } + .ui[class*="top fixed"].menu { + border-top: none; + border-left: none; + border-right: none; + } + .ui[class*="right fixed"].menu { + border-top: none; + border-bottom: none; + border-right: none; + top: 0; + right: 0; + left: auto; + bottom: auto; + width: auto; + height: 100%; + } + .ui[class*="bottom fixed"].menu { + border-bottom: none; + border-left: none; + border-right: none; + bottom: 0; + left: 0; + top: auto; + right: auto; + } + .ui[class*="left fixed"].menu { + border-top: none; + border-bottom: none; + border-left: none; + top: 0; + left: 0; + right: auto; + bottom: auto; + width: auto; + height: 100%; + } + + /* Coupling with Grid */ + .ui.fixed.menu + .ui.grid { + padding-top: @fixedPrecedingGridMargin; + } +} + +& when (@variationMenuPointing) { + /*------------------- + 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) 0 0; + width: @arrowSize; + height: @arrowSize; + + border: none; + border-bottom: @arrowBorder; + border-right: @arrowBorder; + + z-index: @arrowZIndex; + transition: @arrowTransition; + } + & when (@variationMenuVertical) { + .ui.vertical.pointing.menu .item:after { + position: absolute; + top: 50%; + right: 0; + bottom: auto; + left: auto; + + transform: translateX(50%) translateY(-50%) rotate(45deg); + margin: 0 -(@arrowBorderWidth / 2) 0 0; + + border: none; + border-top: @arrowBorder; + border-right: @arrowBorder; + } + } + .ui.pointing.menu .ui.dropdown .menu .item:after, + .ui.vertical.pointing.menu .ui.dropdown .menu .item:after { + display: none; + } + + /* 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; + } + & when (@variationMenuVertical) { + .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; + } + } +} + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + + .ui.inverted.pointing.menu .@{color}.active.item:after { + background-color: @c; + } +}) + +& when (@variationMenuAttached) { + /*-------------- + Attached + ---------------*/ + + /* Middle */ + .ui.attached.menu { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 @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: 0; + margin-bottom: 0; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0 0; + } + .ui.menu[class*="top attached"]:first-child { + margin-top: 0; + } + + /* Bottom */ + .ui[class*="bottom attached"].menu { + bottom: 0; + margin-top: 0; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0 0 @borderRadius @borderRadius; + } + .ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0; + } + + /* Attached Menu Item */ + .ui.top.attached.menu > .item:first-child { + border-radius: @borderRadius 0 0 0; + } + .ui.bottom.attached.menu > .item:first-child { + border-radius: 0 0 0 @borderRadius; + } + + /* Tabular Attached */ + .ui.attached.menu:not(.tabular) { + border: @attachedBorder; + } + & when (@variationMenuInverted) { + .ui.attached.inverted.menu { + border: none; + } + } + & when (@variationMenuTabular) { + .ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; + } + } +} + +/*-------------- + Sizes +---------------*/ + +.ui.menu { + font-size: @medium; +} +.ui.vertical.menu { + width: @mediumWidth; +} +& when not (@variationMenuSizes = false) { + each(@variationMenuSizes, { + @w: @{value}Width; + @s: @@value; + .ui.@{value}.menu, + .ui.@{value}.menu .dropdown, + .ui.@{value}.menu .dropdown .menu > .item { + font-size: @s; + } + .ui.@{value}.vertical.menu:not(.icon) { + width: @@w; + } + }) +} + +/*------------------- + Inverted dropdowns +--------------------*/ +.ui.menu .ui.inverted.inverted.dropdown.item .menu { + background: @invertedDropdownBackground; + box-shadow: @invertedDropdownMenuBoxShadow; +} + +.ui.menu .ui.inverted.dropdown .menu > .item { + color: @invertedDropdownItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .active.item { + background: @invertedDropdownActiveItemBackground !important; + color: @invertedDropdownActiveItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .item:hover { + background: @invertedDropdownHoveredItemBackground !important; + color: @invertedDropdownHoveredItemColor !important; +} + +.ui.menu .ui.inverted.dropdown .menu > .selected.item { + background: @invertedDropdownSelectedItemBackground !important; + color: @invertedDropdownSelectedItemColor !important; +} + +& when (@variationMenuVertical) { + /* Vertical */ + .ui.vertical.menu .inverted.dropdown.item .menu { + box-shadow: @invertedDropdownMenuBoxShadow; + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/message.less b/semantic/src/definitions/collections/message.less new file mode 100644 index 0000000..e237277 --- /dev/null +++ b/semantic/src/definitions/collections/message.less @@ -0,0 +1,414 @@ +/*! + * # Fomantic-UI - Message + * http://github.com/fomantic/Fomantic-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 0; + background: @background; + padding: @padding; + line-height: @lineHeight; + color: @textColor; + transition: @transition; + border-radius: @borderRadius; + box-shadow: @boxShadow; +} + +.ui.message:first-child { + margin-top: 0; +} +.ui.message:last-child { + margin-bottom: 0; +} + + +/*-------------- + 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 0; +} +.ui.message p:first-child { + margin-top: 0; +} +.ui.message p:last-child { + margin-bottom: 0; +} +.ui.message .header + p { + margin-top: @headerParagraphDistance; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0; + opacity: @listOpacity; + list-style-position: @listStylePosition; + margin: @listMargin 0 0; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0 0 @listItemMargin @listItemIndent; + padding: 0; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0; +} + + +/* Icon */ +.ui.message > i.icon { + margin-right: @iconDistance; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0; + top: @closeTopDistance; + right: @closeRightDistance; + opacity: @closeOpacity; + transition: @closeTransition; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0; +} +.ui.message > :last-child { + margin-bottom: 0; +} + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0 -@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 +*******************************/ + +& when (@variationMessageCompact) { + /*-------------- + Compact + ---------------*/ + + .ui.compact.message { + display: inline-block; + } + .ui.compact.icon.message { + display: inline-flex; + width: auto; + } +} + +& when (@variationMessageAttached) { + /*-------------- + Attached + ---------------*/ + + .ui.attached.message { + margin-bottom: @attachedYOffset; + border-radius: @borderRadius @borderRadius 0 0; + box-shadow: @attachedBoxShadow; + margin-left: @attachedXOffset; + margin-right: @attachedXOffset; + } + .ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: @attachedYOffset; + border-radius: 0; + } + .ui.bottom.attached.message { + margin-top: @attachedYOffset; + border-radius: 0 0 @borderRadius @borderRadius; + box-shadow: @attachedBottomBoxShadow; + } + .ui.bottom.attached.message:not(:last-child) { + margin-bottom: @verticalMargin; + } + & when (@variationMessageIcon) { + .ui.attached.icon.message { + width: auto; + } + } +} + +& when (@variationMessageIcon) { + /*-------------- + Icon + ---------------*/ + + .ui.icon.message { + display: flex; + width: 100%; + align-items: center; + } + .ui.icon.message > i.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 > i.icon:not(.close) + .content { + padding-left: @iconContentDistance; + } + .ui.icon.message > i.circular.icon { + width: 1em; + } +} + +& when (@variationMessageFloating) { + /*-------------- + Floating + ---------------*/ + + .ui.floating.message { + box-shadow: @floatingBoxShadow; + } +} + + +/*-------------- + Colors +---------------*/ + +/*-------------- + Types +---------------*/ +& when (@variationMessageConsequences) { + + @consequences: { + @positive: { + background : @positiveBackgroundColor; + header : @positiveHeaderColor; + boxShadow : @positiveBoxShadow; + boxFloatShadow : @positiveBoxFloatingShadow; + text : @positiveTextColor; + }; + @negative: { + background : @negativeBackgroundColor; + header : @negativeHeaderColor; + boxShadow : @negativeBoxShadow; + boxFloatShadow : @negativeBoxFloatingShadow; + text : @negativeTextColor; + }; + @info: { + background : @infoBackgroundColor; + header : @infoHeaderColor; + boxShadow : @infoBoxShadow; + boxFloatShadow : @infoBoxFloatingShadow; + text : @infoTextColor; + }; + @warning: { + background : @warningBackgroundColor; + header : @warningHeaderColor; + boxShadow : @warningBoxShadow; + boxFloatShadow : @warningBoxFloatingShadow; + text : @warningTextColor; + }; + @error: { + background : @errorBackgroundColor; + header : @errorHeaderColor; + boxShadow : @errorBoxShadow; + boxFloatShadow : @errorBoxFloatingShadow; + text : @errorTextColor; + }; + @success: { + background : @successBackgroundColor; + header : @successHeaderColor; + boxShadow : @successBoxShadow; + boxFloatShadow : @successBoxFloatingShadow; + text : @successTextColor; + }; + } + + /* Colors */ + + each(@consequences, { + @color: replace(@key, '@', ''); + @bg: @consequences[@@color][background]; + @hd: @consequences[@@color][header]; + @bs: @consequences[@@color][boxShadow]; + @bfs: @consequences[@@color][boxFloatShadow]; + @t: @consequences[@@color][text]; + + .ui.@{color}.message { + background-color: @bg; + color: @t; + } + + .ui.@{color}.message, + .ui.attached.@{color}.message { + box-shadow: @bs; + } + & when (@variationMessageFloating) { + .ui.floating.@{color}.message { + box-shadow: @bfs; + } + } + .ui.@{color}.message .header { + color: @hd; + } + }) +} + +each(@colors, { + @color: replace(@key, '@', ''); + @bg: @colors[@@color][background]; + @hd: @colors[@@color][header]; + @bs: @colors[@@color][boxShadow]; + @bfs: @colors[@@color][boxFloatShadow]; + @t: @colors[@@color][text]; + @isVeryDark: @colors[@@color][isVeryDark]; + + .ui.@{color}.message { + & when not (@isVeryDark) { + background-color: @bg; + color: @t; + } + & when (@isVeryDark) { + background-color: @black; + color: @invertedTextColor; + } + } + + .ui.@{color}.message, + .ui.attached.@{color}.message { + & when not (@isVeryDark) { + box-shadow: @bs; + } + } + & when (@variationMessageFloating) { + .ui.floating.@{color}.message { + & when not (@isVeryDark) { + box-shadow: @bfs; + } + } + } + + .ui.@{color}.message .header { + & when not (@isVeryDark) { + color: @hd; + } + & when (@isVeryDark) { + color: @invertedTextColor; + } + } +}) + +& when (@variationMessageInverted) { + .ui.inverted.message { + background-color: @black; + color: @invertedTextColor; + } +} + +/*-------------- + Sizes +---------------*/ + +.ui.message { + font-size: @relativeMedium; +} +& when not (@variationMessageSizes = false) { + each(@variationMessageSizes, { + @s: @{value}MessageSize; + .ui.@{value}.message { + font-size: @@s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/table.less b/semantic/src/definitions/collections/table.less new file mode 100644 index 0000000..f185282 --- /dev/null +++ b/semantic/src/definitions/collections/table.less @@ -0,0 +1,1322 @@ +/*! + * # Fomantic-UI - Table + * http://github.com/fomantic/Fomantic-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; + vertical-align: @verticalAlign; + color: @color; + border-collapse: @borderCollapse; + border-spacing: @borderSpacing; +} + +.ui.table:first-child { + margin-top: 0; +} +.ui.table:last-child { + margin-bottom: 0; +} +.ui.table > thead, +.ui.table > tbody { + text-align: inherit; + vertical-align: inherit; +} + +/******************************* + Parts +*******************************/ + +/* Table Content */ +.ui.table th, +.ui.table td { + transition: @transition; +} + +/* Rowspan helper class */ +.ui.table th.rowspanned, +.ui.table td.rowspanned { + display:none; +} + +/* Headers */ +.ui.table > thead { + box-shadow: @headerBoxShadow; +} +.ui.table > thead > tr > 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 0 0 0; +} +.ui.table > thead > tr:first-child > th:last-child { + border-radius: 0 @borderRadius 0 0; +} +.ui.table > thead > tr:first-child > th:only-child { + border-radius: @borderRadius @borderRadius 0 0; +} + +/* Footer */ +.ui.table > tfoot { + box-shadow: @footerBoxShadow; +} +.ui.table > tfoot > tr > th, +.ui.table > tfoot > tr > td { + 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, +.ui.table > tfoot > tr > td:first-child { + border-left: none; +} +.ui.table > tfoot > tr:first-child > th:first-child, +.ui.table > tfoot > tr:first-child > td:first-child { + border-radius: 0 0 0 @borderRadius; +} +.ui.table > tfoot > tr:first-child > th:last-child, +.ui.table > tfoot > tr:first-child > td:last-child { + border-radius: 0 0 @borderRadius 0; +} +.ui.table > tfoot > tr:first-child > th:only-child, +.ui.table > tfoot > tr:first-child > td:only-child { + border-radius: 0 0 @borderRadius @borderRadius; +} + +/* Table Row */ +.ui.table > tr > td, +.ui.table > tbody > tr > td { + border-top: @rowBorder; +} +.ui.table > tr:first-child > td, +.ui.table > tbody > tr:first-child > td { + border-top: none; +} + +/* Repeated tbody */ +.ui.table > tbody + tbody tr:first-child > td { + border-top: @rowBorder; +} + +/* Table Cells */ +.ui.table > tbody > tr > td, +.ui.table > tr > td { + padding: @cellVerticalPadding @cellHorizontalPadding; + text-align: @cellTextAlign; +} + +/* Icons */ +.ui.table > i.icon { + vertical-align: @iconVerticalAlign; +} +.ui.table > i.icon:only-child { + margin: 0; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0; +} +.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%; + padding: 0; + } + .ui.table:not(.unstackable) > thead, + .ui.table:not(.unstackable) > thead > tr, + .ui.table:not(.unstackable) > tfoot, + .ui.table:not(.unstackable) > tfoot > tr, + .ui.table:not(.unstackable) > tbody, + .ui.table:not(.unstackable) > tr, + .ui.table:not(.unstackable) > tbody > tr, + .ui.table:not(.unstackable) > tr > th:not(.rowspanned), + .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned), + .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned), + .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned), + .ui.table:not(.unstackable) > tr > td:not(.rowspanned), + .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned), + .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) { + display: block !important; + width: auto !important; + } + + .ui.table:not(.unstackable) > thead { + display: @responsiveHeaderDisplay; + } + .ui.table:not(.unstackable) > tfoot { + display: @responsiveFooterDisplay; + } + .ui.ui.ui.ui.table:not(.unstackable) > tr, + .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, + .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr, + .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + + .ui.ui.ui.ui.table:not(.unstackable) > tr > th, + .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, + .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, + .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th, + .ui.ui.ui.ui.table:not(.unstackable) > tr > td, + .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td, + .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td { + background: none; + border: none; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow; + } + .ui.table:not(.unstackable) > tr > th:first-child, + .ui.table:not(.unstackable) > thead > tr > th:first-child, + .ui.table:not(.unstackable) > tbody > tr > th:first-child, + .ui.table:not(.unstackable) > tfoot > tr > th:first-child, + .ui.table:not(.unstackable) > tr > td:first-child, + .ui.table:not(.unstackable) > tbody > tr > td:first-child, + .ui.table:not(.unstackable) > tfoot > tr > td:first-child { + font-weight: @responsiveCellHeaderFontWeight; + } + + /* Definition Table */ + .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { + box-shadow: none !important; + } + & when (@variationTableMarked) { + each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset; + } + } + & when (@variationTableInverted) { + .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; + } + } + } + }) + } +} + + +/******************************* + Coupling +*******************************/ + +/* UI Image */ +.ui.table .collapsing .image, +.ui.table .collapsing .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + +/*-------------- + Complex +---------------*/ +& when (@variationTableStructured) { + .ui.structured.table { + border-collapse: collapse; + } + .ui.structured.table > thead > tr > th { + border-left: @headerDivider; + border-right: @headerDivider; + } + & when (@variationTableSortable) { + .ui.structured.sortable.table > thead > tr > th { + border-left: @sortableBorder; + border-right: @sortableBorder; + } + } + & when (@variationTableBasic) { + .ui.structured.basic.table > tr > th, + .ui.structured.basic.table > thead > tr > th, + .ui.structured.basic.table > tbody > tr > th, + .ui.structured.basic.table > tfoot > tr > th { + border-left: @basicTableHeaderDivider; + border-right: @basicTableHeaderDivider; + } + } + & when (@variationTableCelled) { + .ui.structured.celled.table > tr > th, + .ui.structured.celled.table > thead > tr > th, + .ui.structured.celled.table > tbody > tr > th, + .ui.structured.celled.table > tfoot > tr > th, + .ui.structured.celled.table > tr > td, + .ui.structured.celled.table > tbody > tr > td , + .ui.structured.celled.table > tfoot > tr > td { border-left: @cellBorder; + border-right: @cellBorder; + } + } +} + +& when (@variationTableDefinition) { + /*-------------- + Definition + ---------------*/ + + .ui.definition.table > thead:not(.full-width) > tr > th:first-child { + pointer-events: none; + background: @definitionHeaderBackground; + font-weight: @definitionHeaderFontWeight; + color: @definitionHeaderColor; + box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; + -moz-transform: scale(1); + } + + .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child { + pointer-events: none; + background: @definitionFooterBackground; + font-weight: @definitionFooterFontWeight; + color: @definitionFooterColor; + box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; + -moz-transform: scale(1); + } + + /* Highlight Defining Column */ + .ui.definition.table > tr > td:first-child:not(.ignored), + .ui.definition.table > tbody > tr > td:first-child:not(.ignored), + .ui.definition.table > tfoot > 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) > tr > th:nth-child(2) { + border-left: @borderWidth solid @borderColor; + } + .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2) , + .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { border-left: @borderWidth solid @borderColor; + } + .ui.definition.table > tr > td:nth-child(2), + .ui.definition.table > tbody > tr > td:nth-child(2) { + border-left: @borderWidth solid @borderColor; + } +} + +/******************************* + States +*******************************/ + +& when (@variationTablePositive) { + /*-------------- + Positive + ---------------*/ + + .ui.ui.ui.ui.table tr.positive, + .ui.ui.table td.positive { + box-shadow: @positiveBoxShadow; + background: @positiveBackgroundColor; + color: @positiveColor; + } +} + +& when (@variationTableNegative) { + /*-------------- + Negative + ---------------*/ + + .ui.ui.ui.ui.table tr.negative, + .ui.ui.table td.negative { + box-shadow: @negativeBoxShadow; + background: @negativeBackgroundColor; + color: @negativeColor; + } +} + +& when (@variationTableError) { + /*-------------- + Error + ---------------*/ + + .ui.ui.ui.ui.table tr.error, + .ui.ui.table td.error { + box-shadow: @errorBoxShadow; + background: @errorBackgroundColor; + color: @errorColor; + } +} + +& when (@variationTableWarning) { + /*-------------- + Warning + ---------------*/ + + .ui.ui.ui.ui.table tr.warning, + .ui.ui.table td.warning { + box-shadow: @warningBoxShadow; + background: @warningBackgroundColor; + color: @warningColor; + } +} + +& when (@variationTableActive) { + /*-------------- + Active + ---------------*/ + + .ui.ui.ui.ui.table tr.active, + .ui.ui.table td.active { + box-shadow: @activeBoxShadow; + background: @activeBackgroundColor; + color: @activeColor; + } +} + + +& when (@variationTableDisabled) { + /*-------------- + 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 +*******************************/ +& when (@variationTableStackable) { + /*-------------- + Stackable + ---------------*/ + + @media only screen and (max-width : @largestTabletScreen) { + + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table > thead, + .ui[class*="tablet stackable"].table > thead > tr, + .ui[class*="tablet stackable"].table > tfoot, + .ui[class*="tablet stackable"].table > tfoot > tr, + .ui[class*="tablet stackable"].table > tbody, + .ui[class*="tablet stackable"].table > tbody > tr, + .ui[class*="tablet stackable"].table > tr, + .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned), + .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned), + .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned), + .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned), + .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned), + .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned), + .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) { + display: block !important; + width: 100% !important; + } + + .ui[class*="tablet stackable"].table { + padding: 0; + } + .ui[class*="tablet stackable"].table > thead { + display: @responsiveHeaderDisplay; + } + .ui[class*="tablet stackable"].table > tfoot { + display: @responsiveFooterDisplay; + } + .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, + .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, + .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr, + .ui.ui.ui.ui[class*="tablet stackable"].table > tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + .ui[class*="tablet stackable"].table > thead > tr > th, + .ui[class*="tablet stackable"].table > tbody > tr > th, + .ui[class*="tablet stackable"].table > tfoot > tr > th, + .ui[class*="tablet stackable"].table > tr > th, + .ui[class*="tablet stackable"].table > tbody > tr > td, + .ui[class*="tablet stackable"].table > tfoot > tr > td, + .ui[class*="tablet stackable"].table > tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow; + } + & when (@variationTableDefinition) { + /* Definition Table */ + .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { + box-shadow: none !important; + } + } + } + & when (@variationTableMarked) { + each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset; + } + } + & when (@variationTableInverted) { + .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} { + &.left { + box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; + } + } + } + }) + } +} + +& when (@variationTableAligned) { + /*-------------- + 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; + } +} + +& when (@variationTableCollapsing) { + /*-------------- + Collapsing + ---------------*/ + + .ui.table th.collapsing, + .ui.table td.collapsing { + width: 1px; + white-space: nowrap; + } +} + +& when (@variationTableFixed) { + /*-------------- + Fixed + ---------------*/ + + .ui.fixed.table { + table-layout: fixed; + } + + .ui.fixed.table th, + .ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; + } +} + + +& when (@variationTableSelectable) { + /*-------------- + Selectable + ---------------*/ + + .ui.ui.selectable.table > tbody > tr:hover, + .ui.table tbody tr td.selectable:hover { + background: @selectableBackground; + color: @selectableTextColor; + } + & when (@variationTableInverted) { + .ui.ui.selectable.inverted.table > tbody > tr:hover, + .ui.inverted.table tbody tr td.selectable:hover { + background: @selectableInvertedBackground; + color: @selectableInvertedTextColor; + } + } + /* Selectable Cell Link */ + .ui.table tbody tr td.selectable { + padding: 0; + } + .ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: @cellVerticalPadding @cellHorizontalPadding; + } + .ui.table > tr > td.selectable, + .ui.table > tbody > tr > td.selectable, + .ui.selectable.table > tbody > tr, + .ui.selectable.table > tr { + cursor:pointer; + } + & when (@variationTableError) { + /* Other States */ + .ui.ui.selectable.table tr.error:hover, + .ui.table tr td.selectable.error:hover, + .ui.selectable.table tr:hover td.error { + background: @errorBackgroundHover; + color: @errorColorHover; + } + } + & when (@variationTableWarning) { + .ui.ui.selectable.table tr.warning:hover, + .ui.table tr td.selectable.warning:hover, + .ui.selectable.table tr:hover td.warning { + background: @warningBackgroundHover; + color: @warningColorHover; + } + } + & when (@variationTableActive) { + .ui.ui.selectable.table tr.active:hover, + .ui.table tr td.selectable.active:hover, + .ui.selectable.table tr:hover td.active { + background: @activeBackgroundColor; + color: @activeColor; + } + } + & when (@variationTablePositive) { + .ui.ui.selectable.table tr.positive:hover, + .ui.table tr td.selectable.positive:hover, + .ui.selectable.table tr:hover td.positive { + background: @positiveBackgroundHover; + color: @positiveColorHover; + } + } + & when (@variationTableNegative) { + .ui.ui.selectable.table tr.negative:hover, + .ui.table tr td.selectable.negative:hover, + .ui.selectable.table tr:hover td.negative { + background: @negativeBackgroundHover; + color: @negativeColorHover; + } + } +} + + +& when (@variationTableAttached) { + /*------------------- + Attached + --------------------*/ + + /* Middle */ + .ui.attached.table { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 @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: 0; + margin-bottom: 0; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0 0; + } + .ui.table[class*="top attached"]:first-child { + margin-top: 0; + } + + /* Bottom */ + .ui[class*="bottom attached"].table { + bottom: 0; + margin-top: 0; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0 0 @borderRadius @borderRadius; + } + .ui[class*="bottom attached"].table:last-child { + margin-bottom: 0; + } +} + +& when (@variationTableStriped) { + /*-------------- + Striped + ---------------*/ + + /* Table Striping */ + .ui.striped.table > tr:nth-child(2n), + .ui.striped.table > tbody > tr:nth-child(2n) { + background-color: @stripedBackground; + } + & when (@variationTableInverted) { + /* Stripes */ + .ui.inverted.striped.table > tr:nth-child(2n), + .ui.inverted.striped.table > tbody > tr:nth-child(2n) { + background-color: @invertedStripedBackground; + } + } + & when (@variationTableSelectable) { + /* Allow striped active hover */ + .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { + background: @activeBackgroundHover; + color: @activeColorHover; + } + } +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @t: @colors[@@color][text]; + @ht: @colors[@@color][hoverText]; + @l: @colors[@@color][light]; + @lh: @colors[@@color][lightHover]; + @r: @colors[@@color][ribbon]; + @b: @colors[@@color][bright]; + @bh: @colors[@@color][brightHover]; + @isDark: @colors[@@color][isDark]; + @isVeryDark: @colors[@@color][isVeryDark]; + + .ui.@{color}.table { + border-top: @coloredBorderSize solid @c; + } + & when (@variationTableInverted) { + .ui.inverted.@{color}.table { + background-color: @c; + color: @white; + } + } + .ui.ui.ui.ui.table tr.@{color}:not(.marked), + .ui.ui.table td.@{color}:not(.marked) { + & when (@stateMarkerWidth > 0) { + box-shadow: @stateMarkerWidth 0 0 @r inset; + } + & when (@isDark) { + background: @l; + } + & when not (@isDark) { + background: @b; + } + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @t; + } + } + & when (@variationTableSelectable) { + .ui.ui.selectable.table tr.@{color}:not(.marked):hover, + .ui.table tr td.selectable.@{color}:not(.marked):hover, + .ui.selectable.table tr:hover td.@{color}:not(.marked) { + & when (@isDark) { + background: @lh; + } + & when not (@isDark) { + background: @bh; + } + & when (@isVeryDark) { + color: @white; + } + & when not (@isVeryDark) { + color: @ht; + } + } + } + & when (@variationTableMarked) { + .ui.table td.marked.@{color}, + .ui.table tr.marked.@{color} { + &.left { + box-shadow: @coloredBorderSize 0 0 0 @c inset; + } + &.right { + box-shadow: -@coloredBorderSize 0 0 0 @c inset; + } + } + & when (@variationTableInverted) { + .ui.inverted.table td.marked.@{color}, + .ui.inverted.table tr.marked.@{color} { + &.left { + box-shadow: @coloredBorderSize 0 0 0 @l inset; + } + &.right { + box-shadow: -@coloredBorderSize 0 0 0 @l inset; + } + } + } + } + +}) + +/*-------------- + 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; +} + +& when (@variationTableSortable) { + /*-------------- + Sortable + ---------------*/ + + .ui.sortable.table > thead > tr > th { + cursor: pointer; + white-space: nowrap; + border-left: @sortableBorder; + color: @sortableColor; + } + .ui.sortable.table > thead > tr > 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 > tr > th:after { + display: none; + font-style: normal; + font-weight: @normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: @sortableIconWidth; + opacity: @sortableIconOpacity; + margin: 0 0 0 @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 > tr > th:hover { + color: @sortableHoverColor; + } + .ui.sortable.table:not(.basic) > thead > tr > th:hover { + background: @sortableHoverBackground; + } + + /* Sorted */ + .ui.sortable.table thead th.sorted { + color: @sortableActiveColor; + } + .ui.sortable.table:not(.basic) thead th.sorted { + background: @sortableActiveBackground; + } + .ui.sortable.table thead th.sorted:after { + display: inline-block; + } + + /* Sorted Hover */ + .ui.sortable.table thead th.sorted:hover { + color: @sortableActiveHoverColor; + } + .ui.sortable.table:not(.basic) thead th.sorted:hover { + background: @sortableActiveHoverBackground; + } + & when (@variationTableInverted) { + /* Inverted */ + .ui.inverted.sortable.table thead th.sorted { + color: @sortableInvertedActiveColor; + } + .ui.inverted.sortable.table:not(.basic) thead th.sorted { + background: @sortableInvertedActiveBackground; + } + .ui.inverted.sortable.table > thead > tr > th:hover { + color: @sortableInvertedHoverColor; + } + .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover { + background: @sortableInvertedHoverBackground; + } + .ui.inverted.sortable.table:not(.basic) > thead > tr > th { + border-left-color: @sortableInvertedBorderColor; + border-right-color: @sortableInvertedBorderColor; + } + } +} + +& when (@variationTableInverted) { + /*-------------- + Inverted + ---------------*/ + + /* Text Color */ + .ui.inverted.table { + background: @invertedBackground; + color: @invertedCellColor; + border: @invertedBorder; + } + .ui.ui.inverted.table > thead > tr > th, + .ui.ui.inverted.table > tbody > tr > th, + .ui.ui.inverted.table > tfoot > tr > th, + .ui.ui.inverted.table > tfoot > tr > td, + .ui.ui.inverted.table > tr > th { + background-color: @invertedHeaderBackground; + border-color: @invertedHeaderBorderColor; + color: @invertedHeaderColor; + } + .ui.inverted.table > tbody > tr > td, + .ui.inverted.table > tfoot > tr > td, + .ui.inverted.table > tr > td { + border-color: @invertedCellBorderColor; + } + + .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; + } + .ui.inverted.table tr td.disabled:not([class="disabled"]), + .ui.inverted.table tr.disabled:not([class="disabled"]) td, + .ui.inverted.table tr.disabled td[class]:not(.disabled), + .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) { + color: @disabledTextColor; + } + & when (@variationTableDefinition) { + /* Definition */ + .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child, + .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child { + background: @definitionPageBackground; + } + .ui.inverted.definition.table > tbody > tr > td:first-child + .ui.inverted.definition.table > tfoot > tr > td:first-child, + .ui.inverted.definition.table > tr > td:first-child { + background: @invertedDefinitionColumnBackground; + color: @invertedDefinitionColumnColor; + } + } +} + +& when (@variationTableCollapsing) { + /*-------------- + Collapsing + ---------------*/ + + .ui.collapsing.table { + width: auto; + } +} + +& when (@variationTableBasic) { + /*-------------- + 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 > thead > tr > th, + .ui.basic.table > tbody > tr > th, + .ui.basic.table > tfoot > tr > th, + .ui.basic.table > tr > th { + background: @basicTableHeaderBackground; + border-left: @basicTableHeaderDivider; + } + .ui.basic.table > tbody > tr { + border-bottom: @basicTableCellBorder; + } + .ui.basic.table > tbody > tr > td, + .ui.basic.table > tfoot > tr > td, + .ui.basic.table >tr > td { + background: @basicTableCellBackground; + } + & when (@variationTableStriped) { + .ui.basic.striped.table > tbody > tr:nth-child(2n) { + background-color: @basicTableStripedBackground; + } + } + /* Very Basic */ + .ui[class*="very basic"].table { + border: none; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { + padding: @basicTableCellPadding; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child , + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { + padding-left: 0; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot >tr > td:last-child { + padding-right: 0; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { + padding-top: 0; + } +} + +& when (@variationTableCelled) { + /*-------------- + Celled + ---------------*/ + + .ui.celled.table > tr > th, + .ui.celled.table > thead > tr > th, + .ui.celled.table > tbody > tr > th, + .ui.celled.table > tfoot > tr > th, + .ui.celled.table > tr > td, + .ui.celled.table > tbody > tr > td , + .ui.celled.table > tfoot > tr > td { + border-left: @cellBorder; + } + & when (@variationTableInverted) { + .ui.inverted.celled.table > tbody > tr > td, + .ui.inverted.celled.table > tr > td { + border-left: @invertedCellBorder; + } + } + .ui.celled.table > tr > th:first-child, + .ui.celled.table > thead > tr > th:first-child, + .ui.celled.table > tbody > tr > th:first-child, + .ui.celled.table > tfoot > tr > th:first-child, + .ui.celled.table > tr > td:first-child, + .ui.celled.table > tbody > tr > td:first-child, + .ui.celled.table > tfoot >tr > td:first-child { + border-left: none; + } +} + +& when (@variationTablePadded) { + /*-------------- + Padded + ---------------*/ + + .ui.padded.table > tr > th, + .ui.padded.table > thead > tr > th, + .ui.padded.table > tbody > tr > th, + .ui.padded.table > tfoot > tr > th { + padding-left: @paddedHorizontalPadding; + padding-right: @paddedHorizontalPadding; + } + .ui.padded.table > tr > th, + .ui.padded.table > thead > tr > th, + .ui.padded.table > tbody > tr > th, + .ui.padded.table > tfoot > tr > th, + .ui.padded.table > tr > td, + .ui.padded.table > tbody > tr > td , + .ui.padded.table > tfoot > tr > td { + padding: @paddedVerticalPadding @paddedHorizontalPadding; + } + + /* Very */ + .ui[class*="very padded"].table > tr > th, + .ui[class*="very padded"].table > thead > tr > th, + .ui[class*="very padded"].table > tbody > tr > th, + .ui[class*="very padded"].table > tfoot > tr > th { + padding-left: @veryPaddedHorizontalPadding; + padding-right: @veryPaddedHorizontalPadding; + } + .ui[class*="very padded"].table > tr > td, + .ui[class*="very padded"].table > tbody > tr > td , + .ui[class*="very padded"].table > tfoot > tr > td { + padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; + } +} + +& when (@variationTableCompact) { + /*-------------- + Compact + ---------------*/ + + .ui.compact.table > tr > th, + .ui.compact.table > thead > tr > th, + .ui.compact.table > tbody > tr > th, + .ui.compact.table > tfoot > tr > th { + padding-left: @compactHorizontalPadding; + padding-right: @compactHorizontalPadding; + } + .ui.compact.table > tr > td, + .ui.compact.table > tbody > tr > td , + .ui.compact.table > tfoot > tr > td { + padding: @compactVerticalPadding @compactHorizontalPadding; + } + + /* Very */ + .ui[class*="very compact"].table > tr > th, + .ui[class*="very compact"].table > thead > tr > th, + .ui[class*="very compact"].table > tbody > tr > th, + .ui[class*="very compact"].table > tfoot > tr > th { + padding-left: @veryCompactHorizontalPadding; + padding-right: @veryCompactHorizontalPadding; + } + .ui[class*="very compact"].table > tr > td, + .ui[class*="very compact"].table > tbody > tr > td , + .ui[class*="very compact"].table > tfoot > tr > td { + padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; + } +} + +/*-------------- + Sizes +---------------*/ + +/* Standard */ +.ui.table { + font-size: @medium; +} +& when not (@variationTableSizes = false) { + each(@variationTableSizes, { + @s: @@value; + .ui.@{value}.table { + font-size: @s; + } + }) +} + + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/button.less b/semantic/src/definitions/elements/button.less new file mode 100644 index 0000000..3e648a5 --- /dev/null +++ b/semantic/src/definitions/elements/button.less @@ -0,0 +1,1881 @@ +/*! + * # Fomantic-UI - Button + * http://github.com/fomantic/Fomantic-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: 0 @horizontalMargin @verticalMargin 0; + 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; + box-shadow: @focusBoxShadow; +} + +.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; + 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; + + border-radius: @circularRadius; + + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid currentColor; + color: @invertedLoaderLineColor; + + box-shadow: 0 0 0 1px transparent; +} +& when (@variationButtonLabeledIcon){ + .ui.labeled.icon.loading.button .icon { + background-color: transparent; + box-shadow: none; + } +} +& when (@variationButtonBasic){ + .ui.basic.loading.button:not(.inverted):before { + border-color: @loaderFillColor; + } + .ui.basic.loading.button:not(.inverted):after { + border-color: @loaderLineColor; + } +} +& when (@variationButtonDisabled){ + /*------------------- + Disabled + --------------------*/ + + .ui.buttons .disabled.button:not(.basic), + .ui.disabled.button, + .ui.button:disabled, + .ui.disabled.button:hover, + .ui.disabled.active.button { + cursor: default; + opacity: @disabledOpacity !important; + background-image: none; + box-shadow: none; + pointer-events: none !important; + } + & when (@variationButtonBasic){ + /* Basic Group With Disabled */ + .ui.basic.buttons .ui.disabled.button { + border-color: @disabledBorderColor; + } + } +} + +/******************************* + Types +*******************************/ +& when (@variationButtonAnimated){ + /*------------------- + Animated + --------------------*/ + + .ui.animated.button { + position: relative; + overflow: hidden; + padding-right: 0 !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); + } +} + +& when (@variationButtonInverted) { + /*------------------- + Inverted + --------------------*/ + + .ui.inverted.button { + box-shadow: 0 0 0 @invertedBorderSize @white inset; + background: transparent none; + color: @white; + text-shadow: none !important; + } + + /* Group */ + .ui.inverted.buttons .button { + margin: @invertedGroupButtonOffset; + } + .ui.inverted.buttons .button:first-child { + margin-left: 0; + } + .ui.inverted.vertical.buttons .button { + margin: @invertedVerticalGroupButtonOffset; + } + .ui.inverted.vertical.buttons .button:first-child { + margin-top: 0; + } + + /* States */ + + /* Hover */ + .ui.inverted.button:hover { + background: @white; + box-shadow: 0 0 0 @invertedBorderSize @white inset; + color: @hoverColor; + } + + /* Active / Focus */ + .ui.inverted.button:focus, + .ui.inverted.button.active { + background: @white; + box-shadow: 0 0 0 @invertedBorderSize @white inset; + color: @focusColor; + } + + /* Active Focus */ + .ui.inverted.button.active:focus { + background: @midWhite; + box-shadow: 0 0 0 @invertedBorderSize @midWhite inset; + color: @focusColor; + } +} + +& when (@variationButtonLabeled) or (@variationButtonLabeledIcon){ + /*------------------- + Labeled Button + --------------------*/ + + .ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none; + padding: 0 !important; + border: none; + box-shadow: none; + } + + .ui.labeled.button > .button { + margin: 0; + } + .ui.labeled.button > .label { + display: flex; + align-items: @labeledLabelAlign; + margin: 0 0 0 @labeledLabelBorderOffset !important; + font-size: @labeledLabelFontSize; + padding: @labeledLabelPadding; + 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: 0; + border-bottom-right-radius: 0; + } + .ui.labeled.button:not([class*="left labeled"]) > .label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + /* Left Side */ + .ui[class*="left labeled"].button > .button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .ui[class*="left labeled"].button > .label { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +& when (@variationButtonSocial) { + /*------------------- + 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: @vkColor; + 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; + } + + /* WhatsApp */ + .ui.whatsapp.button { + background-color: @whatsAppColor; + color: @white; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; + } + .ui.whatsapp.button:hover { + background-color: @whatsAppHoverColor; + color: @white; + } + .ui.whatsapp.button:active { + background-color: @whatsAppDownColor; + color: @white; + } + + /* Telegram */ + .ui.telegram.button { + background-color: @telegramColor; + color: @white; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; + } + .ui.telegram.button:hover { + background-color: @telegramHoverColor; + color: @white; + } + .ui.telegram.button:active { + background-color: @telegramDownColor; + color: @white; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: @iconHeight; + opacity: @iconOpacity; + transition: @iconTransition; + color: @iconColor; +} + +.ui.button:not(.icon) > .icon:not(.button):not(.dropdown), +.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { + margin: @iconMargin; + vertical-align: @iconVerticalAlign; +} +.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { + vertical-align: @iconVerticalAlign; +} +.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { + margin: @rightIconMargin; +} + +/******************************* + Variations +*******************************/ + +& when (@variationButtonFloated) { + /*------------------- + Floated + --------------------*/ + + .ui[class*="left floated"].buttons, + .ui[class*="left floated"].button { + float: left; + margin-left: 0; + margin-right: @floatedMargin; + } + + .ui[class*="right floated"].buttons, + .ui[class*="right floated"].button { + float: right; + margin-right: 0; + margin-left: @floatedMargin; + } +} + +& when (@variationButtonCompact) { + /*------------------- + 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 ); + } + + .ui.compact.labeled.icon.buttons .button > .icon, + .ui.compact.labeled.icon.button > .icon { + padding: @compactVerticalPadding 0 @compactVerticalPadding 0; + } +} +/*------------------- + Sizes +--------------------*/ + +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: @medium; +} + +& when not (@variationButtonSizes = false) { + each(@variationButtonSizes, { + @s: @@value; + .ui.@{value}.buttons .dropdown, + .ui.@{value}.buttons .dropdown .menu > .item, + .ui.@{value}.buttons .button, + .ui.@{value}.buttons .or, + .ui.ui.ui.ui.@{value}.button { + font-size: @s; + } + }) +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button:not(.animated):not(.compact) { + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); +} +.ui.animated.icon.button > .content > .icon, +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: @iconButtonOpacity; + margin: 0 !important; + vertical-align: top; +} +.ui.animated.button > .content > .icon { + vertical-align: top; +} + +& when (@variationButtonBasic) { + /*------------------- + Basic + --------------------*/ + + .ui.basic.buttons .button, + .ui.basic.button { + background: @basicBackground; + color: @basicTextColor; + 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: 0; + } + + .ui.basic.buttons .button:hover, + .ui.basic.button:hover { + background: @basicHoverBackground; + color: @basicHoverTextColor; + box-shadow: @basicHoverBoxShadow; + } + + .ui.basic.buttons .button:focus, + .ui.basic.button:focus { + background: @basicFocusBackground; + color: @basicFocusTextColor; + box-shadow: @basicFocusBoxShadow; + } + + .ui.basic.buttons .button:active, + .ui.basic.button:active { + background: @basicDownBackground; + color: @basicDownTextColor; + box-shadow: @basicDownBoxShadow; + } + + .ui.basic.buttons .active.button, + .ui.basic.active.button { + background: @basicActiveBackground; + box-shadow: @basicActiveBoxShadow; + 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; + } + & when (@variationButtonInverted) { + /* Standard Basic Inverted */ + + .ui.basic.inverted.buttons .button, + .ui.basic.inverted.button { + background-color: transparent; + color: @offWhite; + box-shadow: @basicInvertedBoxShadow; + } + + .ui.basic.inverted.buttons .button:hover, + .ui.basic.inverted.button:hover { + color: @white; + box-shadow: @basicInvertedHoverBoxShadow; + } + + .ui.basic.inverted.buttons .button:focus, + .ui.basic.inverted.button:focus { + color: @white; + box-shadow: @basicInvertedFocusBoxShadow; + } + + .ui.basic.inverted.buttons .button:active, + .ui.basic.inverted.button:active { + background-color: @transparentWhite; + color: @white; + box-shadow: @basicInvertedDownBoxShadow; + } + + .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; + } + } + + & when (@variationButtonBasic) { + /* Basic Group */ + .ui.basic.buttons .button { + border-left: @basicGroupBorder; + box-shadow: none; + } + + .ui.basic.vertical.buttons .button { + border-left: none; + border-left-width: 0; + border-top: @basicGroupBorder; + } + + .ui.basic.vertical.buttons .button:first-child { + border-top-width: 0; + } + } +} + +& when (@variationButtonTertiary) { + /*------------------- + Tertiary + --------------------*/ + + /* Overline Mixin */ + .ui.tertiary.button { + transition: color @defaultDuration @defaultEasing !important; + border-radius: 0; + margin: (@verticalPadding - @tertiaryLinePadding) + (@horizontalMargin) + (@verticalPadding + @shadowOffset + @verticalMargin - @tertiaryLinePadding) + 0 !important; + padding: @tertiaryLinePadding !important; + + & when (@tertiaryWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryLineColor; + } + + & when (@tertiaryWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryLineColor; + } + + & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ + box-shadow: none; + } + + color: @tertiaryTextColor; + background: @tertiaryBackgroundColor; + } + + .ui.tertiary.button:hover { + + & when (@tertiaryHoverWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryHoverLineColor; + } + + & when (@tertiaryHoverWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryHoverLineColor; + } + + & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { + box-shadow: none; + } + + color: @tertiaryHoverColor; + background: @tertiaryHoverBackgroundColor; + } + + .ui.tertiary.button:focus { + & when (@tertiaryFocusWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryFocusLineColor; + } + + & when (@tertiaryFocusWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryFocusLineColor; + } + + & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false){ + box-shadow: none; + } + + color: @tertiaryFocusColor; + background: @tertiaryFocusBackgroundColor; + } + + .ui.tertiary.button:active { + & when (@tertiaryActiveWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tertiaryActiveLineColor; + border-radius: @borderRadius @borderRadius 0 0; + } + + & when (@tertiaryActiveWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tertiaryActiveLineColor; + border-radius: 0 0 @borderRadius @borderRadius; + } + + & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false){ + box-shadow: none; + border-radius: 0; + } + + color: @tertiaryActiveColor; + background: @tertiaryActiveBackgroundColor; + } +} + +& when (@variationButtonLabeledIcon) { + /*-------------- + 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; + top: 0; + left: 0; + height: 100%; + line-height: 1; + border-radius: 0; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + animation: none; + padding: @verticalPadding 0 @verticalPadding 0; + + margin: @labeledIconMargin; + width: @labeledIconWidth; + background-color: @labeledIconBackgroundColor; + color: @labeledIconColor; + box-shadow: @labeledIconLeftShadow; + } + + /* 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: 0; + border-radius: 0; + 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: relative; + width: 100%; + top: 0; + text-align: center; + } + + .ui.labeled.icon.buttons .button > .icon { + border-radius: 0; + } + + .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: 0; + border-top-left-radius: @borderRadius; + } + + .ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0; + border-bottom-left-radius: @borderRadius; + } + + /* Loading Icon in Labeled Button */ + .ui.labeled.icon.button > .loading.icon:before { + animation: loader 2s linear infinite; + } +} + +& when (@variationButtonToggle) { + /*-------------- + Toggle + ---------------*/ + + /* Toggle (Modifies active state to give affordances) */ + .ui.toggle.buttons .active.button, + .ui.buttons .button.toggle.active, + .ui.button.toggle.active { + background-color: @toggleBackgroundColor; + box-shadow: none; + text-shadow: @toggleTextShadow; + color: @toggleColor; + } + + .ui.button.toggle.active:hover { + background-color: @toggleHoverBackgroundColor; + text-shadow: @toggleHoverTextShadow; + color: @toggleHoverColor; + } +} + +& when (@variationButtonCircular) { + /*-------------- + Circular + ---------------*/ + + .ui.circular.button { + border-radius: @circularBorderRadius; + } + + .ui.circular.button > .icon { + width: @circularIconWidth; + vertical-align: baseline; + } +} + +& when (@variationButtonOr) { + /*------------------- + 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: 0 !important; + } + + .ui.fluid.buttons .or:after { + display: none; + } + +} + +& when (@variationButtonAttached) { + /*------------------- + Attached + --------------------*/ + + + /* Singular */ + .ui.attached.button { + position: relative; + display: block; + margin: 0; + border-radius: 0; + box-shadow: @attachedBoxShadow; + } + + /* Top / Bottom */ + .ui.attached.top.button { + border-radius: @borderRadius @borderRadius 0 0; + } + + .ui.attached.bottom.button { + border-radius: 0 0 @borderRadius @borderRadius; + } + + /* Left / Right */ + .ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + + padding-right: @attachedHorizontalPadding; + border-radius: @borderRadius 0 0 @borderRadius; + } + + .ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: @attachedHorizontalPadding; + border-radius: 0 @borderRadius @borderRadius 0; + } + + /* Plural */ + .ui.attached.buttons { + position: relative; + display: flex; + border-radius: 0; + width: auto !important; + z-index: @attachedZIndex; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + } + + .ui.attached.buttons .button { + margin: 0; + } + + .ui.attached.buttons .button:first-child { + border-radius: 0; + } + + .ui.attached.buttons .button:last-child { + border-radius: 0; + } + + /* Top / Bottom */ + .ui[class*="top attached"].buttons { + margin-bottom: @attachedOffset; + border-radius: @borderRadius @borderRadius 0 0; + } + + .ui[class*="top attached"].buttons .button:first-child { + border-radius: @borderRadius 0 0 0; + } + + .ui[class*="top attached"].buttons .button:last-child { + border-radius: 0 @borderRadius 0 0; + } + + .ui[class*="bottom attached"].buttons { + margin-top: @attachedOffset; + border-radius: 0 0 @borderRadius @borderRadius; + } + + .ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0 0 0 @borderRadius; + } + + .ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0 0 @borderRadius 0; + } + + /* Left / Right */ + .ui[class*="left attached"].buttons { + display: inline-flex; + margin-right: 0; + margin-left: @attachedOffset; + border-radius: 0 @borderRadius @borderRadius 0; + } + + .ui[class*="left attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: 0 @borderRadius 0 0; + } + + .ui[class*="left attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0 0 @borderRadius 0; + } + + .ui[class*="right attached"].buttons { + display: inline-flex; + margin-left: 0; + margin-right: @attachedOffset; + border-radius: @borderRadius 0 0 @borderRadius; + } + + .ui[class*="right attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: @borderRadius 0 0 0; + } + + .ui[class*="right attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0 0 0 @borderRadius; + } +} + +& when (@variationButtonFluid) { + /*------------------- + 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; + justify-content: center; + } + + .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 +--------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @h: @colors[@@color][hover]; + @f: @colors[@@color][focus]; + @d: @colors[@@color][down]; + @a: @colors[@@color][active]; + @t: @colors[@@color][text]; + @s: @colors[@@color][shadow]; + @l: @colors[@@color][light]; + @lh: @colors[@@color][lightHover]; + @lf: @colors[@@color][lightFocus]; + @ld: @colors[@@color][lightDown]; + @la: @colors[@@color][lightActive]; + @lt: @colors[@@color][lightText]; + @ls: @colors[@@color][lightShadow]; + @ty: @colors[@@color][tertiary]; + @tyh: @colors[@@color][tertiaryHover]; + @tyf: @colors[@@color][tertiaryFocus]; + @tya: @colors[@@color][tertiaryActive]; + @isDark: @colors[@@color][isDark]; + @isVeryDark: @colors[@@color][isVeryDark]; + + .ui.@{color}.buttons .button, + .ui.@{color}.button { + background-color: @c; + color: @t; + text-shadow: @s; + background-image: @coloredBackgroundImage; + } + .ui.@{color}.button { + box-shadow: @coloredBoxShadow; + } + .ui.@{color}.buttons .button:hover, + .ui.@{color}.button:hover { + background-color: @h; + color: @t; + text-shadow: @s; + } + .ui.@{color}.buttons .button:focus, + .ui.@{color}.button:focus { + background-color: @f; + color: @t; + text-shadow: @s; + } + .ui.@{color}.buttons .button:active, + .ui.@{color}.button:active { + background-color: @d; + color: @t; + text-shadow: @s; + } + .ui.@{color}.buttons .active.button, + .ui.@{color}.buttons .active.button:active, + .ui.@{color}.active.button, + .ui.@{color}.button .active.button:active { + background-color: @a; + color: @t; + text-shadow: @s; + } + + & when (@variationButtonBasic) { + /* Basic */ + .ui.basic.@{color}.buttons .button, + .ui.basic.@{color}.button { + background: transparent; + box-shadow: 0 0 0 @basicBorderSize @c inset ; + color: @c ; + } + .ui.basic.@{color}.buttons .button:hover, + .ui.basic.@{color}.button:hover { + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @h inset ; + color: @h ; + } + .ui.basic.@{color}.buttons .button:focus, + .ui.basic.@{color}.button:focus { + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @f inset ; + color: @h ; + } + .ui.basic.@{color}.buttons .active.button, + .ui.basic.@{color}.active.button { + background: transparent ; + box-shadow: 0 0 0 @basicColoredBorderSize @a inset ; + color: @d ; + } + .ui.basic.@{color}.buttons .button:active, + .ui.basic.@{color}.button:active { + box-shadow: 0 0 0 @basicColoredBorderSize @d inset ; + color: @d ; + } + + .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; + } + } + & when (@variationButtonInverted) { + /* Inverted */ + .ui.inverted.@{color}.buttons .button, + .ui.inverted.@{color}.button { + background-color: transparent; + + & when (@isDark) { + box-shadow: 0 0 0 @invertedBorderSize @solidBorderColor inset ; + color: @invertedTextColor; + } + + & when not (@isDark) { + box-shadow: 0 0 0 @invertedBorderSize @l inset ; + color: @l; + } + } + .ui.inverted.@{color}.buttons .button:hover, + .ui.inverted.@{color}.button:hover, + .ui.inverted.@{color}.buttons .button:focus, + .ui.inverted.@{color}.button:focus, + .ui.inverted.@{color}.buttons .button.active, + .ui.inverted.@{color}.button.active, + .ui.inverted.@{color}.buttons .button:active, + .ui.inverted.@{color}.button:active { + box-shadow: none ; + color: @lt; + } + .ui.inverted.@{color}.buttons .button:hover, + .ui.inverted.@{color}.button:hover { + background-color: @lh; + } + .ui.inverted.@{color}.buttons .button:focus, + .ui.inverted.@{color}.button:focus { + background-color: @lf; + } + .ui.inverted.@{color}.buttons .active.button, + .ui.inverted.@{color}.active.button { + background-color: @la; + } + .ui.inverted.@{color}.buttons .button:active, + .ui.inverted.@{color}.button:active { + background-color: @ld; + } + + /* Inverted Basic */ + .ui.inverted.@{color}.basic.buttons .button, + .ui.inverted.@{color}.buttons .basic.button, + .ui.inverted.@{color}.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow ; + color: @white ; + } + .ui.inverted.@{color}.basic.buttons .button:hover, + .ui.inverted.@{color}.buttons .basic.button:hover, + .ui.inverted.@{color}.basic.button:hover { + box-shadow: 0 0 0 @invertedBorderSize @lh inset ; + + & when (@isDark) { + color: @white ; + } + + & when not (@isDark) { + color: @l ; + } + } + .ui.inverted.@{color}.basic.buttons .button:focus, + .ui.inverted.@{color}.basic.buttons .button:focus, + .ui.inverted.@{color}.basic.button:focus { + box-shadow: 0 0 0 @invertedBorderSize @lf inset ; + color: @l ; + } + .ui.inverted.@{color}.basic.buttons .active.button, + .ui.inverted.@{color}.buttons .basic.active.button, + .ui.inverted.@{color}.basic.active.button { + box-shadow: 0 0 0 @invertedBorderSize @la inset ; + + & when (@isDark) { + color: @white ; + } + + & when not (@isDark) { + color: @l ; + } + } + & when (@variationButtonBasic) { + .ui.inverted.@{color}.basic.buttons .button:active, + .ui.inverted.@{color}.buttons .basic.button:active, + .ui.inverted.@{color}.basic.button:active { + box-shadow: 0 0 0 @invertedBorderSize @ld inset; + + & when (@isDark) { + color: @white; + } + + & when not (@isDark) { + color: @l; + } + } + } + } + + & when (@variationButtonTertiary) { + /* Tertiary */ + + .ui.tertiary.@{color}.buttons .button, + .ui.tertiary.@{color}.buttons .tertiary.button, + .ui.tertiary.@{color}.button { + background: transparent; + + + + & when (@tertiaryWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @ty; + } + + & when (@tertiaryWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @ty; + } + + & when (@tertiaryWithUnderline = false) and (@tertiaryWithOverline = false){ + box-shadow: none; + } + + color: @c; + } + + .ui.tertiary.@{color}.buttons .button:hover, + .ui.tertiary.@{color}.buttons button:hover, + .ui.tertiary.@{color}.button:hover { + + + + & when (@tertiaryHoverWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tyh; + } + + & when (@tertiaryHoverWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tyh; + } + + & when (@tertiaryHoverWithUnderline = false) and (@tertiaryHoverWithOverline = false) { + box-shadow: none; + } + + + color: @tyh; + } + + .ui.tertiary.@{color}.buttons .button:focus, + .ui.tertiary.@{color}.buttons .tertiary.button:focus, + .ui.tertiary.@{color}.button:focus { + + + + + & when (@tertiaryFocusWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tyf; + } + + & when (@tertiaryFocusWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tyf; + } + + & when (@tertiaryFocusWithUnderline = false) and (@tertiaryFocusWithOverline = false) { + box-shadow: none; + } + + + color: @tyf; + } + + .ui.tertiary.@{color}.buttons .active.button, + .ui.tertiary.@{color}.buttons .tertiary.active.button, + .ui.tertiary.@{color}.active.button, + .ui.tertiary.@{color}.buttons .button:active, + .ui.tertiary.@{color}.buttons .tertiary.button:active, + .ui.tertiary.@{color}.button:active { + + + + & when (@tertiaryActiveWithUnderline = true) { + box-shadow: inset 0 -@tertiaryLineHeight 0 @tya; + } + + & when (@tertiaryActiveWithOverline = true) { + box-shadow: inset 0 @tertiaryLineHeight 0 @tya; + } + + & when (@tertiaryActiveWithUnderline = false) and (@tertiaryActiveWithOverline = false) { + box-shadow: none; + } + + color: @a; + } + } +}) + +.addConsequence(@consequence) { + + @_backgroundColor: "@{consequence}Color"; + @_backgroundColorHover: "@{consequence}ColorHover"; + @_backgroundColorFocus: "@{consequence}ColorFocus"; + @_backgroundColorDown: "@{consequence}ColorDown"; + @_backgroundColorActive: "@{consequence}ColorActive"; + @_textColor: "@{consequence}TextColor"; + @_textShadow: "@{consequence}TextShadow"; + + /* Standard */ + .ui.@{consequence}.buttons .button, + .ui.@{consequence}.button { + background-color: @@_backgroundColor; + color: @@_textColor; + text-shadow: @@_textShadow; + background-image: @coloredBackgroundImage; + } + .ui.@{consequence}.button { + box-shadow: @coloredBoxShadow; + } + .ui.@{consequence}.buttons .button:hover, + .ui.@{consequence}.button:hover { + background-color: @@_backgroundColorHover; + color: @@_textColor; + text-shadow: @@_textShadow; + } + .ui.@{consequence}.buttons .button:focus, + .ui.@{consequence}.button:focus { + background-color: @@_backgroundColorFocus; + color: @@_textColor; + text-shadow: @@_textShadow; + } + .ui.@{consequence}.buttons .button:active, + .ui.@{consequence}.button:active { + background-color: @@_backgroundColorDown; + color: @@_textColor; + text-shadow: @@_textShadow; + } + .ui.@{consequence}.buttons .active.button, + .ui.@{consequence}.buttons .active.button:active, + .ui.@{consequence}.active.button, + .ui.@{consequence}.button .active.button:active { + background-color: @@_backgroundColorActive; + color: @@_textColor; + text-shadow: @@_textShadow; + } + & when (@variationButtonBasic) { + /* Basic */ + .ui.basic.@{consequence}.buttons .button, + .ui.basic.@{consequence}.button { + background: transparent; + box-shadow: 0 0 0 @basicBorderSize @@_backgroundColor inset; + color: @@_backgroundColor; + } + .ui.basic.@{consequence}.buttons .button:hover, + .ui.basic.@{consequence}.button:hover { + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorHover inset; + color: @@_backgroundColorHover; + } + .ui.basic.@{consequence}.buttons .button:focus, + .ui.basic.@{consequence}.button:focus { + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorFocus inset; + color: @@_backgroundColorHover; + } + .ui.basic.@{consequence}.buttons .active.button, + .ui.basic.@{consequence}.active.button { + background: transparent; + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorActive inset; + color: @@_backgroundColorDown; + } + .ui.basic.@{consequence}.buttons .button:active, + .ui.basic.@{consequence}.button:active { + box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset; + color: @@_backgroundColorDown; + } + .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; + } + } +} + +/*--------------- + Positive +----------------*/ + +.addConsequence(positive); + +/*--------------- + Negative +----------------*/ + +.addConsequence(negative); + +& when (@variationButtonGroups) { + /******************************* + Groups + *******************************/ + + .ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0; + vertical-align: baseline; + margin: @verticalMargin @horizontalMargin 0 0; + } + + .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; + border-radius: 0; + margin: @groupButtonOffset; + } + + .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { + box-shadow: @groupButtonBoxShadow; + } + + .ui.buttons .button:first-child { + border-left: none; + margin-left: 0; + 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: 0; + } + + .ui.vertical.buttons .button:first-child { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; + } + + .ui.vertical.buttons .button:last-child { + margin-bottom: 0; + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; + } + + .ui.vertical.buttons .button:only-child { + border-radius: @borderRadius; + } +} +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/container.less b/semantic/src/definitions/elements/container.less new file mode 100644 index 0000000..26f1858 --- /dev/null +++ b/semantic/src/definitions/elements/container.less @@ -0,0 +1,160 @@ +/*! + * # Fomantic-UI - Container + * http://github.com/fomantic/Fomantic-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; +} + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.ui.ui.container:not(.fluid) { + width: @mobileWidth; + margin-left: @mobileGutter; + margin-right: @mobileGutter; + } + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @mobileGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth; + } + .ui.ui.ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth; + } + } + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.ui.ui.container:not(.fluid) { + width: @tabletWidth; + margin-left: @tabletGutter; + margin-right: @tabletGutter; + } + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @tabletGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth; + } + .ui.ui.ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth; + } + } + } +} + +/* Small Monitor */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.ui.ui.container:not(.fluid) { + width: @computerWidth; + margin-left: @computerGutter; + margin-right: @computerGutter; + } + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @computerGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @computerRelaxedGridWidth; + } + .ui.ui.ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth; + } + } + } +} + +/* Large Monitor */ +@media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.ui.ui.container:not(.fluid) { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter; + margin-right: @largeMonitorGutter; + } + & when (@variationContainerGrid) or (@variationContainerRelaxed) { + .ui.ui.ui.grid.container { + width: @largeMonitorGridWidth; + } + & when (@variationContainerRelaxed) { + .ui.ui.ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth; + } + .ui.ui.ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth; + } + } + } +} + +/******************************* + Types +*******************************/ + +& when (@variationContainerText) { + /* Text Container */ + .ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth; + line-height: @textLineHeight; + font-size: @textSize; + } +} + +& when (@variationContainerFluid) { + /* Fluid */ + .ui.fluid.container { + width: 100%; + } +} + +/******************************* + Variations +*******************************/ +& when (@variationContainerAligned) { + .ui[class*="left aligned"].container { + text-align: left; + } + .ui[class*="center aligned"].container { + text-align: center; + } + .ui[class*="right aligned"].container { + text-align: right; + } +} +& when (@variationContainerJustified) { + .ui.justified.container { + text-align: justify; + hyphens: auto; + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/divider.less b/semantic/src/definitions/elements/divider.less new file mode 100644 index 0000000..d23167d --- /dev/null +++ b/semantic/src/definitions/elements/divider.less @@ -0,0 +1,298 @@ +/*! + * # Fomantic-UI - Divider + * http://github.com/fomantic/Fomantic-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: 0; + + 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 @borderStyle @shadowColor; + border-bottom: @highlightWidth @borderStyle @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +& when (@variationDividerHorizontal) { + /*-------------- + 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%; + } +} + +& when (@variationDividerVertical) { + /*-------------- + Vertical + ---------------*/ + + .ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + + margin: 0; + padding: 0; + width: auto; + height: 50%; + + line-height: 0; + text-align: center; + transform: translateX(-50%); + } + + .ui.vertical.divider:before, + .ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + + border-left: @shadowWidth @borderStyle @shadowColor; + border-right: @highlightWidth @borderStyle @highlightColor; + + width: 0; + height: @verticalDividerHeight; + } + + .ui.vertical.divider:before { + top: -100%; + } + .ui.vertical.divider:after { + top: auto; + bottom: 0; + } + + /* 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 { + 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%; + } + } +} + +& when (@variationDividerIcon) { + /*-------------- + Icon + ---------------*/ + + .ui.divider > .icon { + margin: @dividerIconMargin; + font-size: @dividerIconSize; + height: 1em; + vertical-align: middle; + } +} + +& when (@variationDividerHorizontal) { + /*-------------- + Header + ---------------*/ + .ui.horizontal.divider[class*="left aligned"] { + &:before { + display: none; + } + &:after { + width: 100%; + } + } + .ui.horizontal.divider[class*="right aligned"] { + &:before { + width: 100%; + } + &:after { + display: none; + } + } +} + +/******************************* + Variations +*******************************/ + +& when (@variationDividerHidden) { + /*-------------- + Hidden + ---------------*/ + + .ui.hidden.divider { + border-color: transparent !important; + } + + .ui.hidden.divider:before, + .ui.hidden.divider:after { + display: none; + } +} + +/*-------------- + Inverted +---------------*/ +& when (@variationDividerInverted) { + .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 +---------------*/ +& when (@variationDividerFitted) { + .ui.fitted.divider { + margin: 0; + } +} + +& when (@variationDividerClearing) { + /*-------------- + Clearing + ---------------*/ + + .ui.clearing.divider { + clear: both; + } +} + +& when (@variationDividerSection) { + /*-------------- + Section + ---------------*/ + + .ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; + } +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: @medium; +} +& when not (@variationDividerSizes = false) { + each(@variationDividerSizes, { + @s: @@value; + .ui.@{value}.divider { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/emoji.less b/semantic/src/definitions/elements/emoji.less new file mode 100644 index 0000000..6e80621 --- /dev/null +++ b/semantic/src/definitions/elements/emoji.less @@ -0,0 +1,72 @@ +/*! + * # Fomantic UI - Emoji + * https://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'emoji'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Emoji +*******************************/ + + +em[data-emoji] { + opacity: @opacity; + + speak: none; + backface-visibility: hidden; +} + +em[data-emoji]:before { + content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0'; + display: inline-block; + line-height: @emojiLineHeight; + background-repeat: no-repeat; + background-position: center center; + & when not (@emojiFileType = 'svg') { + background-size: contain; + } +} + + +/******************************* + States +*******************************/ + +em[data-emoji].disabled { + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +em[data-emoji].loading:before { + animation: loader @loadingDuration linear infinite; +} + + +/*------------------- + Link +--------------------*/ + +em[data-emoji].link:not(.disabled) { + cursor: pointer; +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/flag.less b/semantic/src/definitions/elements/flag.less new file mode 100644 index 0000000..b691d18 --- /dev/null +++ b/semantic/src/definitions/elements/flag.less @@ -0,0 +1,52 @@ +/*! + * # Fomantic-UI - Flag + * http://github.com/fomantic/Fomantic-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: 0 @margin 0 0; + + text-decoration: inherit; + + speak: none; + -webkit-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/semantic/src/definitions/elements/header.less b/semantic/src/definitions/elements/header.less new file mode 100644 index 0000000..669f316 --- /dev/null +++ b/semantic/src/definitions/elements/header.less @@ -0,0 +1,487 @@ +/*! + * # Fomantic-UI - Header + * http://github.com/fomantic/Fomantic-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; +} + +& when (@variationHeaderSub) { + /*-------------- + Sub Header + ---------------*/ + + .ui.header .sub.header { + display: block; + font-weight: @normal; + padding: 0; + margin: @subHeaderMargin; + font-size: @subHeaderFontSize; + line-height: @subHeaderLineHeight; + color: @subHeaderColor; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.header > i.icon { + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; +} + +/* With Text Node */ +.ui.header > i.icon:only-child { + display: inline-block; + padding: 0; + 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 > i.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 +---------------*/ +& when not (@variationHeaderTags = false) { + each(@variationHeaderTags, { + @sf: @{value}SubHeaderFontSize; + @s: @@value; + @{value}.ui.header { + font-size: @s; + } + & when (@variationHeaderSub) { + @{value}.ui.header .sub.header { + font-size: @@sf; + } + } + }) +} + +/*-------------- + Content Heading +---------------*/ + +& when not (@variationHeaderSizes = false) { + each(@variationHeaderSizes, { + @sf: @{value}SubHeaderFontSize; + @shf: @{value}SubHeadingSize; + @s: @{value}FontSize;; + .ui.@{value}.header { + font-size: @@s; + & when (@@s >= 2) { + min-height: 1em; + } + } + & when (@variationHeaderSub) { + .ui.@{value}.header .sub.header { + font-size: @@sf; + } + .ui.@{value}.sub.header { + font-size: @@shf; + } + } + }) +} + +& when (@variationHeaderSub) { + /*-------------- + Sub Heading + ---------------*/ + + .ui.sub.header { + padding: 0; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; + } +} + +& when (@variationHeaderIcon) { + /*------------------- + Icon + --------------------*/ + + .ui.icon.header { + display: inline-block; + text-align: center; + margin: @iconHeaderTopMargin 0 @iconHeaderBottomMargin; + } + .ui.icon.header:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + + .ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; + } + .ui.icon.header > i.icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0; + font-size: @iconHeaderSize; + margin: 0 auto @iconHeaderMargin; + opacity: @iconHeaderOpacity; + } + .ui.icon.header .corner.icon { + font-size: @cornerIconHeaderSize; + } + .ui.icon.header .content { + display: block; + padding: 0; + } + .ui.icon.header > i.circular.icon { + font-size: @circularHeaderIconSize; + } + .ui.icon.header > i.square.icon { + font-size: @squareHeaderIconSize; + } + & when (@variationHeaderBlock) { + .ui.block.icon.header > i.icon { + margin-bottom: 0; + } + } + .ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; + } +} + +/******************************* + States +*******************************/ +& when (@variationHeaderDisabled) { + .ui.disabled.header { + opacity: @disabledOpacity; + } +} + + +/******************************* + Variations +*******************************/ + +& when (@variationHeaderInverted) { + /*------------------- + Inverted + --------------------*/ + + .ui.inverted.header { + color: @invertedColor; + } + .ui.inverted.header .sub.header { + color: @invertedSubHeaderColor; + } + & when (@variationHeaderAttached) { + .ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; + border-color: transparent; + } + } + & when (@variationHeaderBlock) { + .ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; + border-bottom: none; + } + } +} + + +/*------------------- + Colors +--------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + @h: @colors[@@color][hover]; + @lh: @colors[@@color][lightHover]; + + .ui.@{color}.header { + color: @c; + } + a.ui.@{color}.header:hover { + color: @h; + } + & when (@variationHeaderDividing) { + .ui.@{color}.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @c; + } + } + & when (@variationHeaderInverted) { + .ui.inverted.@{color}.header.header.header { + color: @l; + } + a.ui.inverted.@{color}.header.header.header:hover { + color: @lh; + } + .ui.inverted.@{color}.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @l; + } + } +}) + +& when (@variationHeaderAligned) { + /*------------------- + 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; + } +} + +& when (@variationHeaderJustified) { + .ui.justified.header { + text-align: justify; + } + .ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; + } +} + +& when (@variationHeaderFloated) { + /*------------------- + Floated + --------------------*/ + + .ui.floated.header, + .ui[class*="left floated"].header { + float: left; + margin-top: 0; + margin-right: @floatedMargin; + } + .ui[class*="right floated"].header { + float: right; + margin-top: 0; + margin-left: @floatedMargin; + } +} + +& when (@variationHeaderFitted) { + /*------------------- + Fitted + --------------------*/ + + .ui.fitted.header { + padding: 0; + } +} + +& when (@variationHeaderDividing) { + /*------------------- + Dividing + --------------------*/ + + .ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; + } + .ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; + } + .ui.dividing.header i.icon { + margin-bottom: @dividedIconPadding; + } + & when (@variationHeaderInverted) { + .ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; + } + } +} + +& when (@variationHeaderBlock) { + /*------------------- + Block + --------------------*/ + + .ui.block.header { + background: @blockBackground; + padding: @blockVerticalPadding @blockHorizontalPadding; + box-shadow: @blockBoxShadow; + border: @blockBorder; + border-radius: @blockBorderRadius; + } + .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumBlock; + } + & when not (@variationHeaderSizes = false) { + each(@variationHeaderSizes, { + @s: @{value}Block; + .ui.@{value}.block.header { + font-size: @@s; + } + }) + } +} + +& when (@variationHeaderAttached) { + /*------------------- + Attached + --------------------*/ + + .ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin: 0 @attachedOffset 0 @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; + border-radius: 0; + } + .ui.attached.block.header { + background: @blockBackground; + } + .ui.attached:not(.top).header { + border-top: none; + } + .ui.top.attached.header { + border-radius: @attachedBorderRadius @attachedBorderRadius 0 0; + } + .ui.bottom.attached.header { + border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius; + } + + /* Attached Sizes */ + .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumAttachedSize; + } + & when not (@variationHeaderSizes = false) { + each(@variationHeaderSizes, { + @s: @{value}AttachedSize; + .ui.@{value}.attached.header { + font-size: @@s; + } + }) + } +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumFontSize; +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/icon.less b/semantic/src/definitions/elements/icon.less new file mode 100644 index 0000000..e97ae46 --- /dev/null +++ b/semantic/src/definitions/elements/icon.less @@ -0,0 +1,374 @@ +/*! + * # Fomantic-UI - Icon + * http://github.com/fomantic/Fomantic-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: 0 @distanceFromText 0 0; + + width: @width; + height: @height; + + font-family: 'Icons'; + font-style: normal; + font-weight: @normal; + text-decoration: inherit; + text-align: center; + + speak: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + backface-visibility: hidden; +} + +i.icon:before { + background: none !important; +} + +/******************************* + Types +*******************************/ + +& when (@variationIconLoading) { + /*-------------- + Loading + ---------------*/ + + i.icon.loading { + height: 1em; + line-height: 1; + animation: loader @loadingDuration linear infinite; + } +} + +/******************************* + States +*******************************/ + +i.icon:hover, i.icons:hover, +i.icon:active, i.icons:active, +i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { + opacity: 1; +} + +& when (@variationIconDisabled) { + i.disabled.icon, i.disabled.icons { + opacity: @disabledOpacity; + cursor: default; + pointer-events: none; + } +} + +/******************************* + Variations +*******************************/ + +& when (@variationIconFitted) { + /*------------------- + Fitted + --------------------*/ + + i.fitted.icon { + width: auto; + margin: 0 !important; + } +} + +& when (@variationIconLink) { + /*------------------- + Link + --------------------*/ + + i.link.icon:not(.disabled), i.link.icons:not(.disabled) { + cursor: pointer; + opacity: @linkOpacity; + transition: opacity @defaultDuration @defaultEasing; + } + i.link.icon:hover, i.link.icons:hover { + opacity: 1; + } +} + +& when (@variationIconCircular) { + /*------------------- + Circular + --------------------*/ + + i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + + padding: @circularPadding !important; + box-shadow: @circularShadow; + + width: @circularSize !important; + height: @circularSize !important; + } + & when (@variationIconInverted) { + i.circular.inverted.icon { + border: none; + box-shadow: none; + } + } +} + +& when (@variationIconFlipped) { + /*------------------- + Flipped + --------------------*/ + + i.flipped.icon, + i.horizontally.flipped.icon { + transform: scale(-1, 1); + } + i.vertically.flipped.icon { + transform: scale(1, -1); + } +} + +& when (@variationIconRotated) { + /*------------------- + 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); + } + + i.halfway.rotated.icon { + transform: rotate(180deg); + } +} + +& when (@variationIconFlipped) and (@variationIconRotated) { + /*-------------------------- + Flipped & Rotated + ---------------------------*/ + + i.rotated.flipped.icon, + i.right.rotated.flipped.icon, + i.clockwise.rotated.flipped.icon { + transform: scale(-1, 1) rotate(90deg); + } + + i.left.rotated.flipped.icon, + i.counterclockwise.rotated.flipped.icon { + transform: scale(-1, 1) rotate(-90deg); + } + + i.halfway.rotated.flipped.icon { + transform: scale(-1, 1) rotate(180deg); + } + + i.rotated.vertically.flipped.icon, + i.right.rotated.vertically.flipped.icon, + i.clockwise.rotated.vertically.flipped.icon { + transform: scale(1, -1) rotate(90deg); + } + + i.left.rotated.vertically.flipped.icon, + i.counterclockwise.rotated.vertically.flipped.icon { + transform: scale(1, -1) rotate(-90deg); + } + + i.halfway.rotated.vertically.flipped.icon { + transform: scale(1, -1) rotate(180deg); + } +} + +& when (@variationIconBordered) { + /*------------------- + Bordered + --------------------*/ + + i.bordered.icon { + line-height: 1; + vertical-align: baseline; + + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; + } + & when (@variationIconInverted) { + i.bordered.inverted.icon { + border: none; + box-shadow: none; + } + } +} + +& when (@variationIconInverted) { + /*------------------- + Inverted + --------------------*/ + + /* Inverted Shapes */ + i.inverted.bordered.icon, + i.inverted.circular.icon { + background-color: @black; + color: @white; + } + + i.inverted.icon { + color: @white; + } +} + +/*------------------- + Colors +--------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + i.@{color}.icon.icon.icon.icon { + color: @c; + } + & when (@variationIconInverted) { + i.inverted.@{color}.icon.icon.icon.icon { + color: @l; + } + i.inverted.bordered.@{color}.icon.icon.icon.icon, + i.inverted.circular.@{color}.icon.icon.icon.icon { + background-color: @c; + color: @white; + } + } +}) + + +/*------------------- + Sizes +--------------------*/ + +i.icon, +i.icons { + font-size: @medium; + line-height: @lineHeight; +} +& when not (@variationIconSizes = false) { + each(@variationIconSizes, { + @s: @@value; + i.@{value}.@{value}.@{value}.icon, + i.@{value}.@{value}.@{value}.icons { + font-size: @s; + vertical-align: middle; + } + }) +} + +& when (@variationIconGroups) or (@variationIconCorner) { + /******************************* + 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: 0; + } + + i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + transform: none; + } + + & when (@variationIconCorner) { + /* Corner Icon */ + i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + transform: none; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; + } + i.icons .icon.corner[class*="top right"] { + top: 0; + left: auto; + right: 0; + bottom: auto; + } + i.icons .icon.corner[class*="top left"] { + top: 0; + left: 0; + right: auto; + bottom: auto; + } + i.icons .icon.corner[class*="bottom left"] { + top: auto; + left: 0; + right: auto; + bottom: 0; + } + i.icons .icon.corner[class*="bottom right"] { + top: auto; + left: auto; + right: 0; + bottom: 0; + } + & when (@variationIconInverted) { + i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; + } + } + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/image.less b/semantic/src/definitions/elements/image.less new file mode 100644 index 0000000..651b81e --- /dev/null +++ b/semantic/src/definitions/elements/image.less @@ -0,0 +1,321 @@ +/*! + * # Fomantic-UI - Image + * http://github.com/fomantic/Fomantic-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.ui.hidden.image { + display: none; +} +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} +.ui.images > .hidden.transition { + display: inline-block; + visibility: hidden; +} + +& when (@variationImageDisabled) { + .ui.disabled.images, + .ui.disabled.image { + cursor: default; + opacity: @disabledOpacity; + } +} + + +/******************************* + Variations +*******************************/ + +& when (@variationImageInline) { + /*-------------- + Inline + ---------------*/ + + .ui.inline.image, + .ui.inline.image svg, + .ui.inline.image img { + display: inline-block; + } +} + +& when (@variationImageAligned) { + /*------------------ + Vertical Aligned + -------------------*/ + + .ui.top.aligned.image, + .ui.top.aligned.image svg, + .ui.top.aligned.image img { + display: inline-block; + vertical-align: top; + } + .ui.middle.aligned.image, + .ui.middle.aligned.image svg, + .ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; + } + .ui.bottom.aligned.image, + .ui.bottom.aligned.image svg, + .ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; + } + .ui.top.aligned.images .image, + .ui.images .ui.top.aligned.image { + align-self: flex-start; + } + .ui.middle.aligned.images .image, + .ui.images .ui.middle.aligned.image { + align-self: center; + } + .ui.bottom.aligned.images .image, + .ui.images .ui.bottom.aligned.image { + align-self: flex-end; + } +} + +& when (@variationImageRounded) { + /*-------------- + Rounded + ---------------*/ + + .ui.rounded.images .image, + .ui.rounded.image, + .ui.rounded.images .image > *, + .ui.rounded.image > * { + border-radius: @roundedBorderRadius; + } +} + +& when (@variationImageBordered) { + /*-------------- + 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; + } +} + +& when (@variationImageCircular) { + /*-------------- + 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; + } +} + +& when (@variationImageFluid) { + /*-------------- + 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; + } +} + +& when (@variationImageAvatar) { + /*-------------- + 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; + } +} + +& when (@variationImageSpaced) { + /*------------------- + Spaced + --------------------*/ + + .ui.spaced.image { + display: inline-block !important; + margin-left: @spacedDistance; + margin-right: @spacedDistance; + } + + .ui[class*="left spaced"].image { + margin-left: @spacedDistance; + margin-right: 0; + } + + .ui[class*="right spaced"].image { + margin-left: 0; + margin-right: @spacedDistance; + } +} + +& when (@variationImageFloated) { + /*------------------- + 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: 0; + margin-bottom: @floatedVerticalMargin; + margin-left: @floatedHorizontalMargin; + } + + .ui.floated.images:last-child, + .ui.floated.image:last-child { + margin-bottom: 0; + } +} + +& when (@variationImageCentered) { + .ui.centered.image { + display: block; + margin-left: auto; + margin-right: auto; + } + .ui.centered.images { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + justify-content: center; + } +} + +/*-------------- + Sizes +---------------*/ + +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: @mediumWidth; + height: auto; + font-size: @medium; +} +& when not (@variationImageSizes = false) { + each(@variationImageSizes, { + @w: @{value}Width; + @s: @@value; + .ui.@{value}.images .image, + .ui.@{value}.images img, + .ui.@{value}.images svg, + .ui.@{value}.image { + width: @@w; + height: auto; + font-size: @s; + } + }) +} + +& when (@variationImageGroups) { + /******************************* + Groups + *******************************/ + + .ui.images { + font-size: 0; + margin: 0 -@imageHorizontalMargin 0; + } + + .ui.images .image, + .ui.images > img, + .ui.images > svg { + display: inline-block; + margin: 0 @imageHorizontalMargin @imageVerticalMargin; + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/input.less b/semantic/src/definitions/elements/input.less new file mode 100644 index 0000000..7782ede --- /dev/null +++ b/semantic/src/definitions/elements/input.less @@ -0,0 +1,565 @@ +/*! + * # Fomantic-UI - Input + * http://github.com/fomantic/Fomantic-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: 0; + 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 +*******************************/ +& when (@variationInputDisabled) { + /*-------------------- + 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; +} + +& when (@variationInputLoading) { + /*-------------------- + 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: loader @loaderSpeed infinite linear; + + border: @loaderLineWidth solid @loaderLineColor; + border-radius: @circularRadius; + + box-shadow: 0 0 0 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; +} + + +& when (@variationInputStates) { + /*-------------------- + States + ---------------------*/ + each(@formStates, { + @state: replace(@key, '@', ''); + + .ui.input.@{state} > input { + background-color: @formStates[@@state][background]; + border-color: @formStates[@@state][borderColor]; + color: @formStates[@@state][color]; + box-shadow: @formStates[@@state][boxShadow]; + } + + /* Placeholder */ + .ui.input.@{state} > input::-webkit-input-placeholder { + color: @formStates[@@state][inputPlaceholderColor]; + } + .ui.input.@{state} > input::-moz-placeholder { + color: @formStates[@@state][inputPlaceholderColor]; + } + .ui.input.@{state} > input:-ms-input-placeholder { + color: @formStates[@@state][inputPlaceholderColor] !important; + } + + /* Focused Placeholder */ + .ui.input.@{state} > input:focus::-webkit-input-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor]; + } + .ui.input.@{state} > input:focus::-moz-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor]; + } + .ui.input.@{state} > input:focus:-ms-input-placeholder { + color: @formStates[@@state][inputPlaceholderFocusColor] !important; + } + }) +} +/******************************* + Variations +*******************************/ + +& when (@variationInputTransparent) { + /*-------------------- + Transparent + ---------------------*/ + + + .ui.transparent.input > textarea, + .ui.transparent.input > input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0; + box-shadow: none !important; + border-radius: 0 !important; + } + .field .ui.transparent.input > textarea { + padding: @padding; + } + + /* Transparent Icon */ + :not(.field) > .ui.transparent.icon.input > i.icon { + width: @transparentIconWidth; + } + :not(.field) > .ui.ui.ui.transparent.icon.input > input { + padding-left: 0; + padding-right: @transparentIconMargin; + } + :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { + padding-left: @transparentIconMargin; + padding-right: 0; + } + & when (@variationInputInverted) { + /* Transparent Inverted */ + .ui.transparent.inverted.input { + color: @transparentInvertedColor; + } + .ui.ui.transparent.inverted.input > textarea, + .ui.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; + } + } +} + +& when (@variationInputIcon) { + /*-------------------- + Icon + ---------------------*/ + + .ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0; + right: 0; + margin: 0; + height: 100%; + + width: @iconWidth; + opacity: @iconOpacity; + border-radius: 0 @borderRadius @borderRadius 0; + transition: @iconTransition; + } + .ui.icon.input > i.icon:not(.link) { + pointer-events: none; + } + .ui.ui.ui.ui.icon.input > textarea, + .ui.ui.ui.ui.icon.input > input { + padding-right: @iconMargin; + } + + .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 0 0 @borderRadius; + } + .ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: @circularIconHorizontalOffset; + } + .ui.ui.ui.ui[class*="left icon"].input > textarea, + .ui.ui.ui.ui[class*="left icon"].input > input { + padding-left: @iconMargin; + padding-right: @horizontalPadding; + } + + /* Focus */ + .ui.icon.input > textarea:focus ~ i.icon, + .ui.icon.input > input:focus ~ i.icon { + opacity: 1; + } +} + +& when (@variationInputLabeled) { + /*-------------------- + 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: 0; + border-bottom-right-radius: 0; + } + .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: transparent; + } + .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: @focusBorderColor; + } + + /* Regular Label on Right */ + .ui[class*="right labeled"].input > input { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-right-color: transparent !important; + } + .ui[class*="right labeled"].input > input + .label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .ui[class*="right labeled"].input > input:focus { + border-right-color: @focusBorderColor !important; + } +} + +& when (@variationInputCorner) { + /* Corner Label */ + .ui.labeled.input .corner.label { + top: @labelCornerTop; + right: @labelCornerRight; + font-size: @labelCornerSize; + border-radius: 0 @borderRadius 0 0; + } + + /* Spacing with corner label */ + .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea, + .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"]) > textarea, + .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"]) > i.icon { + margin-right: @labeledIconMargin; + } + + /* Left Labeled */ + .ui[class*="left corner labeled"].labeled.input > textarea, + .ui[class*="left corner labeled"].labeled.input > input { + padding-left: @labeledMargin !important; + } + & when (@variationInputIcon) { + .ui[class*="left corner labeled"].icon.input > textarea, + .ui[class*="left corner labeled"].icon.input > input { + padding-left: @labeledIconInputMargin !important; + } + .ui[class*="left corner labeled"].icon.input > i.icon { + margin-left: @labeledIconMargin; + } + } +} +& when (@variationInputIcon) { + .ui.icon.input > textarea ~ i.icon { + height: @textareaIconHeight; + } + :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { + height: @transparentTextareaIconHeight; + } +} +& when (@variationInputCorner) { + /* Corner Label Position */ + .ui.input > .ui.corner.label { + top: @borderWidth; + right: @borderWidth; + } + .ui.input > .ui.left.corner.label { + right: auto; + left: @borderWidth; + } +} + +& when (@variationInputLabeled) or (@variationInputAction) { + /* Labeled and action input states */ + each(@formStates, { + @state: replace(@key, '@', ''); + @borderColor: @formStates[@@state][borderColor]; + + .ui.form .field.@{state} > .ui.action.input > .ui.button, + .ui.form .field.@{state} > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, + .ui.action.input.@{state} > .ui.button, + .ui.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label { + border-top: @borderWidth solid @borderColor; + border-bottom: @borderWidth solid @borderColor; + } + .ui.form .field.@{state} > .ui[class*="left action"].input > .ui.button, + .ui.form .field.@{state} > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, + .ui[class*="left action"].input.@{state} > .ui.button, + .ui.labeled.input.@{state}:not(.right):not([class*="corner labeled"]) > .ui.label { + border-left: @borderWidth solid @borderColor; + } + .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button, + .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, + .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button, + .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label { + border-right: @borderWidth solid @borderColor; + } + .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, + .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > .ui.label:first-child { + border-left: @borderWidth solid @borderColor; + } + }) +} + +& when (@variationInputAction) { + /*-------------------- + 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; + } + + /* Input when ui Left*/ + .ui[class*="left action"].input > input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: transparent; + } + + /* Input when ui Right*/ + .ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-color: transparent; + } + + /* Button and Dropdown */ + .ui.action.input > .dropdown:first-child, + .ui.action.input > .button:first-child, + .ui.action.input > .buttons:first-child > .button { + border-radius: @borderRadius 0 0 @borderRadius; + } + .ui.action.input > .dropdown:not(:first-child), + .ui.action.input > .button:not(:first-child), + .ui.action.input > .buttons:not(:first-child) > .button { + border-radius: 0; + } + .ui.action.input > .dropdown:last-child, + .ui.action.input > .button:last-child, + .ui.action.input > .buttons:last-child > .button { + border-radius: 0 @borderRadius @borderRadius 0; + } + + /* Input Focus */ + .ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: @focusBorderColor; + } + + .ui.ui[class*="left action"].input > input:focus { + border-left-color: @focusBorderColor; + } +} + +& when (@variationInputInverted) { + /*-------------------- + Inverted + ---------------------*/ + + /* Standard */ + .ui.inverted.input > input { + border: none; + } +} + +& when (@variationInputFluid) { + /*-------------------- + Fluid + ---------------------*/ + + .ui.fluid.input { + display: flex; + } + .ui.fluid.input > input { + width: 0 !important; + } +} + +/*-------------------- + Size +---------------------*/ + +.ui.input { + font-size: @relativeMedium; +} +& when not (@variationInputSizes = false) { + each(@variationInputSizes, { + @s: @{value}InputSize; + .ui.@{value}.input { + font-size: @@s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/label.less b/semantic/src/definitions/elements/label.less new file mode 100644 index 0000000..4517ed7 --- /dev/null +++ b/semantic/src/definitions/elements/label.less @@ -0,0 +1,1032 @@ +/*! + * # Fomantic-UI - Label + * http://github.com/fomantic/Fomantic-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: 0; +} +.ui.label:last-child { + margin-right: 0; +} + +/* 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; +} + +/* Icon */ +.ui.left.icon.label > .icon, +.ui.label > .icon { + width: auto; + margin: 0 @iconDistance 0 0; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; +} +.ui.label > .detail .icon { + margin: 0 @detailIconDistance 0 0; +} + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; +} +.ui.label > .close.icon:hover, +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/* Backward compatible positioning */ +.ui.label.left.icon > .close.icon, +.ui.label.left.icon > .delete.icon { + margin: 0 @deleteMargin 0 0; +} +.ui.label:not(.icon) > .close.icon, +.ui.label:not(.icon) > .delete.icon { + margin: 0 0 0 @deleteMargin; +} + +/* Label for only an icon */ +.ui.icon.label > .icon { + margin: 0 auto; +} + +/* Right Side Icon */ +.ui.right.icon.label > .icon { + margin: 0 0 0 @iconDistance; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0 @groupHorizontalMargin @groupVerticalMargin 0; +} + + +/*------------------- + 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 ~ .ui.bottom.attached.label + :not(.attached), +.ui.top.attached.label + :not(.attached) { + margin-top: @attachedSegmentPadding !important; +} +.ui.bottom.attached.label ~ :last-child:not(.attached) { + margin-top:0; + margin-bottom: @attachedSegmentPadding !important; +} + +.ui.segment:not(.basic) > .ui.top.attached.label { + margin-top: @attachedOffset; +} +.ui.segment:not(.basic) > .ui.bottom.attached.label { + margin-bottom: @attachedOffset; +} +.ui.segment:not(.basic) > .ui.attached.label:not(.right) { + margin-left: @attachedOffset; +} +.ui.segment:not(.basic) > .ui.right.attached.label { + margin-right: @attachedOffset; +} +.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { + width: @attachedWidthOffset; +} + + + +/******************************* + Types +*******************************/ +& when (@variationLabelImage) { + .ui.image.label { + width: auto; + margin-top: 0; + margin-bottom: 0; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + + background: @imageLabelBackground; + padding: @imageLabelPadding; + border-radius: @imageLabelBorderRadius; + box-shadow: @imageLabelBoxShadow; + &.attached:not(.basic) when (@variationLabelAttached) { + padding: @imageLabelPadding; + } + } + + .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: 0 @imageLabelBorderRadius @imageLabelBorderRadius 0; + } + & when (@variationLabelAttached) { + .ui.bottom.attached.image.label:not(.right) > img, + .ui.top.right.attached.image.label > img { + border-top-left-radius: 0; + } + + .ui.top.attached.image.label:not(.right) > img, + .ui.bottom.right.attached.image.label > img { + border-bottom-left-radius: 0; + } + } +} + +& when (@variationLabelTag) { +/*------------------- + Tag +--------------------*/ + + .ui.tag.labels .label, + .ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: @tagHorizontalPadding; + padding-right: @tagHorizontalPadding; + + border-radius: 0 @borderRadius @borderRadius 0; + 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; + width: @tagCircleSize; + height: @tagCircleSize; + + box-shadow: @tagCircleBoxShadow; + border-radius: @circularRadius; + } + & when (@variationLabelBasic) { + .ui.basic.tag.labels .label:before, + .ui.basic.tag.label:before { + border-color: inherit; + border-width: @basicBorderWidth 0 0 @basicBorderWidth; + border-style: inherit; + right: @basicBorderFullWidthOffset; + } + .ui.basic.tag.labels .label:after, + .ui.basic.tag.label:after { + box-shadow: @basicTagCircleBoxShadow; + } + } +} + +& when (@variationLabelCorner) { +/*------------------- + Corner Label +--------------------*/ + + .ui.corner.label { + position: absolute; + top: 0; + right: 0; + margin: 0; + padding: 0; + 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: 0; + top: 0; + z-index: -1; + + width: 0; + height: 0; + background-color: transparent; + + border-top: 0 solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: @cornerTriangleSize solid transparent; + border-left: 0 solid transparent; + + border-right-color: inherit; + transition: @cornerTriangleTransition; + } + + .ui.corner.label .icon { + cursor: inherit; + position: absolute; + top: @cornerIconTopOffset; + left: auto; + right: @cornerIconRightOffset; + font-size: @cornerIconSize; + margin: 0; + } + + /* Left Corner */ + .ui.left.corner.label, + .ui.left.corner.label:after { + right: auto; + left: 0; + } + .ui.left.corner.label:after { + border-top: @cornerTriangleSize solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: 0 solid transparent; + border-left: 0 solid transparent; + + border-top-color: inherit; + } + .ui.left.corner.label .icon { + left: @cornerIconLeftOffset; + right: auto; + } + + /* Segment */ + .ui.segment > .ui.corner.label { + top: -1px; + right: -1px; + } + .ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; + } +} + +& when (@variationLabelRibbon) { + /*------------------- + Ribbon + --------------------*/ + + .ui.ribbon.label { + position: relative; + margin: 0; + min-width: max-content; + border-radius: 0 @borderRadius @borderRadius 0; + border-color: @ribbonShadowColor; + } + + .ui.ribbon.label:after { + position: absolute; + content: ''; + + top: 100%; + left: 0; + background-color: transparent; + + border-style: solid; + border-width: 0 @ribbonTriangleSize @ribbonTriangleSize 0; + border-color: transparent; + border-right-color: inherit; + + width: 0; + height: 0; + } + /* 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; + } + & when (@variationLabelBasic) { + .ui.basic.ribbon.label { + padding-top: @basicRibbonOffset; + padding-bottom: @basicRibbonOffset; + } + .ui.basic.ribbon.label:not([class*="right ribbon"]) { + padding-left: @basicRibbonTriangleSizeOffset; + padding-right: @basicRibbonTriangleSize; + } + .ui.basic[class*="right ribbon"].label { + padding-left: @basicRibbonTriangleSize; + padding-right: @basicRibbonTriangleSizeOffset; + } + .ui.basic.ribbon.label::after { + top: @basicBorderFullWidthOffset; + } + .ui.basic.ribbon.label:not([class*="right ribbon"])::after { + left: @basicBorderWidthOffset; + } + .ui.basic[class*="right ribbon"].label::after { + right: @basicBorderWidthOffset; + } + } + /* Right Ribbon */ + .ui[class*="right ribbon"].label { + text-align: left; + transform: translateX(-100%); + border-radius: @borderRadius 0 0 @borderRadius; + } + .ui[class*="right ribbon"].label:after { + left: auto; + right: 0; + + border-style: solid; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0; + 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; + } +} + +& when (@variationLabelAttached) { + /*------------------- + Attached + --------------------*/ + + .ui[class*="top attached"].label, + .ui.attached.label { + width: 100%; + position: absolute; + margin: 0; + top: 0; + left: 0; + + padding: @attachedVerticalPadding @attachedHorizontalPadding; + + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0 0; + } + .ui[class*="bottom attached"].label { + top: auto; + bottom: 0; + border-radius: 0 0 @attachedCornerBorderRadius @attachedCornerBorderRadius; + } + + .ui[class*="top left attached"].label { + width: auto; + margin-top: 0; + border-radius: @attachedCornerBorderRadius 0 @attachedBorderRadius 0; + } + + .ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0; + border-radius: 0 @attachedCornerBorderRadius 0 @attachedBorderRadius; + } + .ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0; + border-radius: 0 @attachedBorderRadius 0 @attachedCornerBorderRadius; + } + .ui[class*="bottom right attached"].label { + top: auto; + bottom: 0; + left: auto; + right: 0; + width: auto; + border-radius: @attachedBorderRadius 0 @attachedCornerBorderRadius 0; + } +} + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ +& when (@variationLabelDisabled) { + .ui.label.disabled { + opacity: 0.5; + } +} +/*------------------- + Hover +--------------------*/ + +.ui.labels a.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 +--------------------*/ + +.ui.labels a.active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:hover:before, +a.ui.active.label:hover: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 +*******************************/ + + +& when (@variationLabelBasic) { + /*------------------- + Basic + --------------------*/ + + .ui.basic.labels .label, + .ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; + padding-top: @basicVerticalPadding; + padding-bottom: @basicVerticalPadding; + padding-right: @basicHorizontalPadding; + } + .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, + .ui.basic.label:not(.tag):not(.image):not(.ribbon) { + padding-left: @basicHorizontalPadding; + } + & when (@variationLabelImage) { + .ui.basic.image.label { + padding-left: @basicImageLabelPadding; + } + } + + /* Link */ + .ui.basic.labels a.label:hover, + a.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBoxShadow; + } + & when (@variationLabelPointing) { + /* Pointing */ + .ui.basic.pointing.label:before { + border-color: inherit; + } + } +} + +& when (@variationLabelFluid) { + /*------------------- + Fluid + --------------------*/ + + .ui.label.fluid, + .ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; + } +} + +& when (@variationLabelInverted) { + /*------------------- + Inverted + --------------------*/ + + .ui.inverted.labels .label, + .ui.inverted.label { + color: @invertedTextColor; + background-color: @invertedBackgroundColor; + } + .ui.inverted.corner.label { + border-color: @invertedBackgroundColor; + } + .ui.inverted.corner.label:hover { + border-color: @backgroundColor; + transition: none; + } + .ui.inverted.basic.labels .label, + .ui.inverted.basic.label, + .ui.inverted.basic.label:hover { + border-color: @basicInvertedBorderColor; + background: @black; + } + .ui.inverted.basic.label:hover { + color: @linkColor; + } +} + +/*------------------- + Colors +--------------------*/ + +each(@colors,{ + @color : replace(@key,'@',''); + @isDark : @colors[@@color][isDark]; + @_labelColor : @colors[@@color][color]; + @_labelInvertedColor : @colors[@@color][light]; + @_labelTextColor : @colors[@@color][text]; + @_labelHover : @colors[@@color][hover]; + @_labelInvertedHover : @colors[@@color][lightHover]; + @_labelHoverTextColor : @colors[@@color][hoverText]; + @_labelRibbonShadow : @colors[@@color][ribbon]; + @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon]; + + .ui.@{color}.labels .label, + .ui.ui.ui.@{color}.label { + background-color: @_labelColor; + border-color: @_labelColor; + color: @_labelTextColor; + } + /* Link */ + .ui.@{color}.labels a.label:hover, + a.ui.ui.ui.@{color}.label:hover{ + background-color: @_labelHover; + border-color: @_labelHover; + color: @_labelHoverTextColor; + } + & when (@variationLabelRibbon) { + /* Ribbon */ + .ui.ui.ui.@{color}.ribbon.label { + border-color: @_labelRibbonShadow; + } + } + & when (@variationLabelBasic) { + /* Basic */ + .ui.basic.labels .@{color}.label, + .ui.ui.ui.basic.@{color}.label { + background: @basicBackground; + border-color: @_labelColor; + color: @_labelColor; + } + .ui.basic.labels a.@{color}.label:hover, + a.ui.ui.ui.basic.@{color}.label:hover { + background: @basicBackground; + border-color: @_labelHover; + color: @_labelHover; + } + } + & when (@variationLabelInverted) { + /* Inverted */ + .ui.inverted.labels .@{color}.label, + .ui.ui.ui.inverted.@{color}.label { + background-color: @_labelInvertedColor; + border-color: @_labelInvertedColor; + color: @black; + } + /* Inverted Link */ + .ui.inverted.labels a.@{color}.label:hover, + a.ui.ui.ui.inverted.@{color}.label:hover{ + background-color: @_labelInvertedHover; + border-color: @_labelInvertedHover; + & when not (@isDark) { + color: @black; + } + & when (@isDark) { + color: @_labelTextColor; + } + } + & when (@variationLabelRibbon) { + /* Inverted Ribbon */ + .ui.ui.ui.inverted.@{color}.ribbon.label { + border-color: @_labelInvertedRibbonShadow; + } + } + & when (@variationLabelBasic) { + /* Inverted Basic */ + .ui.inverted.basic.labels .@{color}.label, + .ui.ui.ui.inverted.basic.@{color}.label { + background-color: @invertedBackground; + border-color: @_labelInvertedColor; + & when not (@isDark) { + color: @_labelInvertedColor; + } + & when (@isDark) { + color: @invertedTextColor; + } + } + .ui.inverted.basic.labels a.@{color}.label:hover, + a.ui.ui.ui.inverted.basic.@{color}.label:hover { + border-color: @_labelInvertedHover; + background-color: @invertedBackground; + & when not (@isDark) { + color: @_labelInvertedHover; + } + } + & when (@variationLabelTag) { + /* Inverted Basic Tags */ + .ui.inverted.basic.tag.labels .@{color}.label, + .ui.ui.ui.inverted.@{color}.basic.tag.label { + border: @invertedBorderSize solid @_labelInvertedColor; + } + .ui.inverted.basic.tag.labels .@{color}.label:before, + .ui.ui.ui.inverted.@{color}.basic.tag.label:before { + border-color: inherit; + border-width: @invertedBorderSize 0 0 @invertedBorderSize; + border-style: inherit; + background-color: @invertedBackground; + right: e(%("calc(100%% + %d)", @invertedBorderSize)); + } + } + } + } +}) + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0 @horizontalLabelMargin 0 0; + + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; +} + +& when (@variationLabelCircular) { + /*------------------- + 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: 0; + min-height: 0; + overflow: hidden; + width: @emptyCircleSize; + height: @emptyCircleSize; + vertical-align: baseline; + } +} + +& when (@variationLabelPointing) { + /*------------------- + Pointing + --------------------*/ + + .ui.pointing.label { + position: relative; + } + + .ui.attached.pointing.label { + position: absolute; + } + + .ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: 0; + 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 0 0 @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: 0; + margin-bottom: @pointingVerticalDistance; + } + .ui[class*="bottom pointing"].label:before, + .ui[class*="pointing below"].label:before { + border-width: 0 @borderWidth @borderWidth 0; + top: auto; + right: auto; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; + } + /*--- Left ---*/ + .ui[class*="left pointing"].label { + margin-top: 0; + margin-left: @pointingHorizontalDistance; + } + .ui[class*="left pointing"].label:before { + border-width: 0 0 @borderWidth @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0; + } + /*--- Right ---*/ + .ui[class*="right pointing"].label { + margin-top: 0; + margin-right: @pointingHorizontalDistance; + } + .ui[class*="right pointing"].label:before { + border-width: @borderWidth @borderWidth 0 0; + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0; + bottom: auto; + left: auto; + } + & when (@variationLabelBasic) { + /* 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; + } + } +} + +& when (@variationLabelFloating) { + /*------------------ + Floating Label + -------------------*/ + + .ui.floating.label { + position: absolute; + z-index: @floatingZIndex; + top: @floatingTopOffset; + right: 0; + white-space: nowrap; + transform: translateX(50%); + } + .ui.right.aligned.floating.label { + transform: translateX(@floatingAlignOffset); + } + .ui.left.floating.label { + left:0; + right:auto; + transform: translateX(-50%); + } + .ui.left.aligned.floating.label { + transform: translateX(-@floatingAlignOffset); + } + .ui.bottom.floating.label { + top: auto; + bottom: @floatingBottomOffset; + } +} + +/*------------------- + Sizes +--------------------*/ + +.ui.labels .label, +.ui.label { + font-size: @medium; +} +& when not (@variationLabelSizes = false) { + each(@variationLabelSizes, { + @s: @@value; + .ui.@{value}.labels .label, + .ui.@{value}.label { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/list.less b/semantic/src/definitions/elements/list.less new file mode 100644 index 0000000..ca1abdc --- /dev/null +++ b/semantic/src/definitions/elements/list.less @@ -0,0 +1,1021 @@ +/*! + * # Fomantic-UI - List + * http://github.com/fomantic/Fomantic-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: 0; + padding-top: 0; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0; + padding-bottom: 0; +} + +/******************************* + 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:after, +.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: 0; +} +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: 0; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list:not(.icon) { + clear: both; + margin: 0; + padding: @childListPadding; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + +& when (@variationListIcon) { + /* Icon */ + .ui.list .list > .item > i.icon, + .ui.list > .item > i.icon { + display: table-cell; + min-width: 1.55em; + margin: 0; + padding-top: @iconOffset; + transition: @iconTransition; + &:not(.loading) { + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + } + } + .ui.list .list > .item > i.icon:only-child, + .ui.list > .item > i.icon:only-child { + display: inline-block; + min-width: auto; + vertical-align: @iconVerticalAlign; + } +} + +& when (@variationListImage) { + /* Image */ + .ui.list .list > .item > .image, + .ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0; + 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; + color: @contentColor; +} +& when (@variationListImage) or (@variationListIcon) { + .ui.list .list > .item > .image + .content, + .ui.list .list > .item > i.icon + .content, + .ui.list > .item > .image + .content, + .ui.list > .item > i.icon + .content { + display: table-cell; + width: 100%; + padding: 0 0 0 @contentDistance; + vertical-align: @contentVerticalAlign; + } +} +& when (@variationListIcon) { + .ui.list .list > .item > i.loading.icon + .content, + .ui.list > .item > i.loading.icon + .content { + padding-left: e(%("calc(%d + %d)", @iconDistance, @contentDistance)); + } +} +& when (@variationListImage) { + .ui.list .list > .item > img.image + .content, + .ui.list > .item > img.image + .content { + display: inline-block; + width: auto; + } +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0; + padding-left: 0; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0; + 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; +} + +& when (@variationListIcon) { + /* Linked Item Icons */ + .ui.list .list > a.item > i.icons, + .ui.list > a.item > i.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; +} + +& when (@variationListFloated) { + /* 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: 0; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0; +} + + +/******************************* + Types +*******************************/ + +& when (@variationListHorizontal) { + /*------------------- + Horizontal + --------------------*/ + + .ui.horizontal.list { + display: inline-block; + font-size: 0; + } + .ui.horizontal.list > .item { + display: inline-block; + margin-right: @horizontalSpacing; + font-size: 1rem; + } + .ui.horizontal.list:not(.celled) > .item:last-child { + margin-right: 0; + padding-right: 0; + } + .ui.horizontal.list .list:not(.icon) { + padding-left: 0; + padding-bottom: 0; + } + .ui.horizontal.list > .item > .image, + .ui.horizontal.list .list > .item > .image, + .ui.horizontal.list > .item > i.icon, + .ui.horizontal.list .list > .item > i.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; + } + & when (@variationListIcon) { + /* Horizontal List */ + .ui.horizontal.list > .item > i.icon , + .ui.horizontal.list .item > i.icons > i.icon { + margin: 0; + padding: 0 @horizontalIconDistance 0 0; + } + } + & when (@variationListImage) or (@variationListIcon) { + .ui.horizontal.list > .item > .image + .content, + .ui.horizontal.list > .item > i.icon, + .ui.horizontal.list > .item > i.icon + .content { + float: none; + display: inline-block; + width: auto; + } + } + & when (@variationListImage) { + .ui.horizontal.list > .item > .image { + display: inline-block; + } + } +} + +/******************************* + States +*******************************/ + +& when (@variationListDisabled) { + /*------------------- + Disabled + --------------------*/ + + .ui.list .list > .disabled.item, + .ui.list > .disabled.item { + pointer-events: none; + color: @disabledColor !important; + } + & when (@variationListInverted) { + .ui.inverted.list .list > .disabled.item, + .ui.inverted.list > .disabled.item { + color: @invertedDisabledColor !important; + } + } +} + +/*------------------- + Hover +--------------------*/ +& when (@variationListIcon) { + .ui.list .list > a.item:hover > .icons, + .ui.list > a.item:hover > .icons, + .ui.list .list > a.item:hover > i.icon, + .ui.list > a.item:hover > i.icon { + color: @itemLinkIconHoverColor; + } +} + +/******************************* + Variations +*******************************/ + +& when (@variationListInverted) { + /*------------------- + Inverted + --------------------*/ + & when (@variationListIcon) { + .ui.inverted.list .list > a.item > i.icon, + .ui.inverted.list > a.item > i.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; + } + .ui.inverted.list .list > .item > .content, + .ui.inverted.list > .item > .content { + color: @invertedContentColor; + } + /* 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; + } +} + +& when (@variationListAligned) { + /*------------------- + 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; + } +} + +& when (@variationListLink) { + /*------------------- + Link + --------------------*/ + + .ui.link.list .item, + .ui.link.list a.item, + .ui.link.list .item a:not(.ui) { + color: @linkListItemColor; + transition: @linkListTransition; + } + .ui.link.list.list a.item:hover, + .ui.link.list.list .item a:not(.ui):hover { + color: @linkListItemHoverColor; + } + .ui.link.list.list a.item:active, + .ui.link.list.list .item a:not(.ui):active { + color: @linkListItemDownColor; + } + .ui.link.list.list .active.item, + .ui.link.list.list .active.item a:not(.ui) { + color: @linkListItemActiveColor; + } + & when (@variationListInverted) { + /* 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.list a.item:hover, + .ui.inverted.link.list.list .item a:not(.ui):hover { + color: @invertedLinkListItemHoverColor; + } + .ui.inverted.link.list.list a.item:active, + .ui.inverted.link.list.list .item a:not(.ui):active { + color: @invertedLinkListItemDownColor; + } + .ui.inverted.link.list.list a.active.item, + .ui.inverted.link.list.list .active.item a:not(.ui) { + color: @invertedLinkListItemActiveColor; + } + } +} + +& when (@variationListSelection) { + /*------------------- + 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: 0; + } + .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; + } + + & when (@variationListInverted) { + /* Inverted */ + .ui.inverted.selection.list > .item { + background: @invertedSelectionListBackground; + color: @invertedSelectionListColor; + } + .ui.inverted.selection.list > .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; + } + .ui.inverted.selection.list > .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; + } + .ui.inverted.selection.list > .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; + } + } + + & when (@variationListCelled) or (@variationListDivided) { + /* 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: 0; + } + } +} + +& when (@variationListAnimated) { + /*------------------- + Animated + --------------------*/ + + .ui.animated.list > .item { + transition: @animatedListTransition; + } + .ui.animated.list:not(.horizontal) > .item:hover { + padding-left: @animatedListIndent; + } +} + +& when (@variationListFitted) { + /*------------------- + Fitted + --------------------*/ + .ui.fitted.list:not(.selection) .list > .item, + .ui.fitted.list:not(.selection) > .item { + padding-left: 0; + padding-right: 0; + } + .ui.fitted.selection.list .list > .item, + .ui.fitted.selection.list > .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; + } +} + +& when (@variationListBulleted) { + /*------------------- + 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:not(.icon) { + padding-left: @bulletChildDistance; + } + + & when (@variationListHorizontal) { + /* Horizontal Bulleted */ + ul.ui.horizontal.bulleted.list, + .ui.horizontal.bulleted.list { + margin-left: 0; + } + 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: 0; + } + 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; + } + } +} + +& when (@variationListOrdered) { + /*------------------- + Ordered + --------------------*/ + + ol.ui.list, + .ui.ordered.list, + .ui.ordered.list .list:not(.icon), + 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; + } + + & when (@variationListInverted) { + 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]:before, + .ui.ordered.list > .item[data-value]:before { + content: attr(data-value); + } + ol.ui.list li[value]:before { + content: attr(value); + } + + /* Child Lists */ + ol.ui.list ol, + .ui.ordered.list .list:not(.icon) { + margin-left: @orderedChildCountDistance; + } + ol.ui.list ol li:before, + .ui.ordered.list .list > .item:before { + margin-left: @orderedChildCountOffset; + } + + & when (@variationListHorizontal) { + /* Horizontal Ordered */ + ol.ui.horizontal.list, + .ui.ordered.horizontal.list { + margin-left: 0; + } + ol.ui.horizontal.list li:before, + .ui.ordered.horizontal.list .list > .item:before, + .ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0 @horizontalOrderedCountDistance 0 0; + } + } +} + +& when (@variationListSuffixed) { + /* Suffixed Ordered */ + ol.ui.suffixed.list li:before, + .ui.suffixed.ordered.list .list > .item:before, + .ui.suffixed.ordered.list > .item:before { + content: @orderedCountContentSuffixed; + } +} + +& when (@variationListDivided) { + /*------------------- + 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; + } + + & when (@variationListBulleted) { + /* Divided bulleted */ + .ui.divided.bulleted.list:not(.horizontal), + .ui.divided.bulleted.list .list:not(.icon) { + margin-left: 0; + padding-left: 0; + } + .ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: @bulletDistance; + } + } + + & when (@variationListOrdered) { + /* Divided Ordered */ + .ui.divided.ordered.list { + margin-left: 0; + } + .ui.divided.ordered.list .list > .item, + .ui.divided.ordered.list > .item { + padding-left: @orderedCountDistance; + } + .ui.divided.ordered.list .item .list:not(.icon) { + margin-left: 0; + margin-right: 0; + padding-bottom: @itemVerticalPadding; + } + .ui.divided.ordered.list .item .list > .item { + padding-left: @orderedChildCountDistance; + } + } + + & when (@variationListSelection) { + /* Divided Selection */ + + .ui.divided.selection.list .list > .item, + .ui.divided.selection.list > .item { + margin: 0; + border-radius: 0; + } + } + + & when (@variationListHorizontal) { + /* Divided horizontal */ + .ui.divided.horizontal.list { + margin-left: 0; + } + .ui.divided.horizontal.list > .item { + padding-left: @horizontalDividedSpacing; + } + .ui.divided.horizontal.list > .item:not(:last-child) { + padding-right: @horizontalDividedSpacing; + } + .ui.divided.horizontal.list > .item { + border-top: none; + border-right: @dividedBorder; + margin: 0; + line-height: @horizontalDividedLineHeight; + } + .ui.horizontal.divided.list > .item:last-child { + border-right: none; + } + } + + & when (@variationListInverted) { + /* Inverted */ + + .ui.divided.inverted.list > .item, + .ui.divided.inverted.list > .list, + .ui.divided.inverted.horizontal.list > .item { + border-color: @dividedInvertedBorderColor; + } + } +} + +& when (@variationListCelled) { + /*------------------- + 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: 0; + } + .ui.celled.list .list > .item:first-child { + border-top-width: 0; + } + + & when (@variationListBulleted) { + /* Celled Bulleted */ + .ui.celled.bulleted.list { + margin-left: 0; + } + .ui.celled.bulleted.list .list > .item, + .ui.celled.bulleted.list > .item { + padding-left: (@bulletDistance); + } + .ui.celled.bulleted.list .item .list:not(.icon) { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; + } + } + + & when (@variationListOrdered) { + /* Celled Ordered */ + .ui.celled.ordered.list { + margin-left: 0; + } + .ui.celled.ordered.list .list > .item, + .ui.celled.ordered.list > .item { + padding-left: @orderedCountDistance; + } + .ui.celled.ordered.list .item .list:not(.icon) { + margin-left: 0; + margin-right: 0; + padding-bottom: @itemVerticalPadding; + } + .ui.celled.ordered.list .list > .item { + padding-left: @orderedChildCountDistance; + } + } + + & when (@variationListHorizontal) { + /* Celled Horizontal */ + .ui.horizontal.celled.list { + margin-left: 0; + } + .ui.horizontal.celled.list .list > .item, + .ui.horizontal.celled.list > .item { + border-top: none; + border-left: @celledBorder; + margin: 0; + 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; + } + } + + & when (@variationListInverted) { + /* 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; + } + } +} + +& when (@variationListRelaxed) { + /*------------------- + 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; + } + + & when (@variationListHorizontal) { + .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; + } + + & when (@variationListHorizontal) { + .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.list { + font-size: @relativeMedium; +} +& when not (@variationListSizes = false) { + each(@variationListSizes, { + @rs: @{value}ListSize; + @s: @@value; + .ui.@{value}.list { + font-size: @@rs; + } + & when (@variationListHorizontal) { + .ui.@{value}.horizontal.list .list > .item, + .ui.@{value}.horizontal.list > .item { + font-size: @s; + } + } + }) +} + +.loadUIOverrides(); + diff --git a/semantic/src/definitions/elements/loader.less b/semantic/src/definitions/elements/loader.less new file mode 100644 index 0000000..0b64a84 --- /dev/null +++ b/semantic/src/definitions/elements/loader.less @@ -0,0 +1,416 @@ +/*! + * # Fomantic-UI - Loader + * http://github.com/fomantic/Fomantic-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: 0; + 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 infinite linear; + border: @loaderLineWidth solid @shapeBorderColor; + border-radius: @circularRadius; + + box-shadow: 0 0 0 1px transparent; +} + +& when (@variationLoaderSpeeds) { + /* Speeds */ + + .ui.fast.loading.loading:after, + .ui.fast.loading.loading .input > i.icon:after, + .ui.fast.loading.loading > i.icon:after, + .ui.fast.loader:after { + animation-duration: @loaderSpeedFast; + } + + .ui.slow.loading.loading:after, + .ui.slow.loading.loading .input > i.icon:after, + .ui.slow.loading.loading > i.icon:after, + .ui.slow.loader:after { + animation-duration: @loaderSpeedSlow; + } +} + +/* Active Animation */ +@keyframes loader { + 100% { + transform: rotate(360deg); + } +} + +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer > .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer > .ui.loader { + color: @invertedLoaderTextColor; +} +.ui.dimmer > .ui.loader:not(.elastic):before { + border-color: @invertedLoaderFillColor; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer > .ui.loader { + color: @loaderTextColor; +} +.ui.inverted.dimmer > .ui.loader:not(.elastic):before { + border-color: @loaderFillColor; +} + +/******************************* + Types +*******************************/ + +& when (@variationLoaderText) { + /*------------------- + Text + --------------------*/ + + .ui.ui.ui.ui.text.loader { + width: auto; + height: auto; + text-align: center; + font-style: normal; + } +} + + +/******************************* + States +*******************************/ +& when (@variationLoaderIndeterminate) { + .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 +--------------------*/ + +.ui.loader { + width: @medium; + height: @medium; + font-size: @mediumFontSize; +} +.ui.loader:before, +.ui.loader:after { + width: @medium; + height: @medium; + margin: @mediumOffset; +} +& when (@variationLoaderText) { + .ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); + } +} +& when not (@variationLoaderSizes = false) { + each(@variationLoaderSizes, { + @o: @{value}Offset; + @f: @{value}FontSize; + @s: @@value; + .ui.@{value}.loader { + width: @s; + height: @s; + font-size: @@f; + } + .ui.@{value}.loader:before, + .ui.@{value}.loader:after { + width: @s; + height: @s; + margin: @@o; + } + & when (@variationLoaderText) { + .ui.@{value}.text.loader { + min-width: @s; + padding-top: (@s + @textDistance); + } + } + }) +} + +/*------------------- + Colors +--------------------*/ + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + .ui.@{color}.elastic.loader.loader:before, + .ui.@{color}.basic.elastic.loading.button:before, + .ui.@{color}.basic.elastic.loading.button:after, + .ui.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before, + .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before, + .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after, + .ui.@{color}.loading.loading.loading.loading .input > i.icon:after, + .ui.@{color}.loading.loading.loading.loading > i.icon:after, + .ui.@{color}.loader.loader.loader:after { + color: @c; + } + .ui.inverted.@{color}.elastic.loader:before, + .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before, + .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before, + .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after, + .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after, + .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after, + .ui.inverted.@{color}.loader.loader.loader:after { + color: @l; + } +}) + +.ui.elastic.loader.loader:before, +.ui.elastic.loading.loading.loading:before, +.ui.elastic.loading.loading.loading .input > i.icon:before, +.ui.elastic.loading.loading.loading > i.icon:before, +.ui.loading.loading.loading.loading:not(.usual):after, +.ui.loading.loading.loading.loading .input > i.icon:after, +.ui.loading.loading.loading.loading > i.icon:after, +.ui.loader.loader.loader:after { + border-color: currentColor; +} +.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before { + color: @invertedLoaderLineColor; +} +.ui.elastic.basic.loading.button:before, +.ui.elastic.basic.loading.button:after { + color: @loaderLineColor; +} +.ui.double.loading.loading.loading.loading.button:after { + border-bottom-color: currentColor; +} + +& when (@variationLoaderInline) { + /*------------------- + Inline + --------------------*/ + + .ui.inline.loader { + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0; + top: 0; + 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; + } +} + +.ui.loading.loading.loading.loading.loading.loading:after, +.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after, +.ui.loading.loading.loading.loading.loading.loading > i.icon:after, +.ui.loader.loader.loader.loader.loader:after { + border-left-color:transparent; + border-right-color:transparent; +} +.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after, +.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after, +.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after, +.ui.loader.loader.loader.loader.loader.loader:not(.double):after { + border-bottom-color: transparent; +} +.ui.loading.loading.loading.loading.loading.loading.segment:after, +.ui.loading.loading.loading.loading.loading.loading.form:after { + border-left-color:@loaderFillColor; + border-right-color:@loaderFillColor; +} +.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, +.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { + border-bottom-color: @loaderFillColor; +} + +& when (@variationLoaderElastic) { + /*------------------- + Elastic + --------------------*/ + + .ui.dimmer > .ui.elastic.loader { + color: @invertedLoaderLineColor; + } + .ui.inverted.dimmer > .ui.elastic.loader { + color: @loaderLineColor; + } + .ui.elastic.loading.loading:not(.form):not(.segment):after, + .ui.elastic.loading.loading .input > i.icon:after, + .ui.elastic.loading.loading > i.icon:after, + .ui.elastic.loader.loader:after { + animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); + animation-delay: 0.3s; + } + .ui.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.elastic.loading.loading.loading .input > i.icon:before, + .ui.elastic.loading.loading.loading > i.icon:before, + .ui.elastic.loader.loader:before { + animation: elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); + -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); + border-right-color: transparent; + } + & when (@variationLoaderInline) { + .ui.elastic.inline.loader:empty { + animation: loader 8s infinite linear; + } + } + & when (@variationLoaderSpeeds) { + .ui.slow.elastic.loading.loading:not(.form):not(.segment):after, + .ui.slow.elastic.loading.loading .input > i.icon:after, + .ui.slow.elastic.loading.loading > i.icon:after, + .ui.slow.elastic.loader.loader:after { + animation-duration: 1.5s; + animation-delay: 0.45s; + } + .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.slow.elastic.loading.loading.loading .input > i.icon:before, + .ui.slow.elastic.loading.loading.loading > i.icon:before, + .ui.slow.elastic.loader.loader:before { + animation-duration: 1.5s; + } + .ui.fast.elastic.loading.loading:not(.form):not(.segment):after, + .ui.fast.elastic.loading.loading .input > i.icon:after, + .ui.fast.elastic.loading.loading > i.icon:after, + .ui.fast.elastic.loader.loader:after { + animation-duration: 0.66s; + animation-delay: 0.20s; + } + .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.fast.elastic.loading.loading.loading .input > i.icon:before, + .ui.fast.elastic.loading.loading.loading > i.icon:before, + .ui.fast.elastic.loader.loader:before { + animation-duration: 0.66s; + } + } + @keyframes elastic-loader { + 0%, 1% { + border-left-color: transparent; + border-bottom-color: transparent + } + 1.1%, 50% { + border-left-color: inherit; + } + 10%, 35.1%{ + border-bottom-color: transparent; + } + 10.1%, 35%{ + border-bottom-color: inherit; + } + 50.1%{ + border-left-color: transparent; + } + 100% { + border-left-color: transparent; + border-bottom-color: transparent; + transform: rotate(360deg); + } + } + + @keyframes currentcolor-elastic-loader { + 0%, 1% { + border-left-color: transparent; + border-bottom-color: transparent + } + 1.1%, 50% { + border-left-color: currentColor; + } + 10%, 35.1%{ + border-bottom-color: transparent; + } + 10.1%, 35%{ + border-bottom-color: currentColor; + } + 50.1%{ + border-left-color: transparent; + } + 100% { + border-left-color: transparent; + border-bottom-color: transparent; + transform: rotate(360deg); + } + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/placeholder.less b/semantic/src/definitions/elements/placeholder.less new file mode 100644 index 0000000..5440612 --- /dev/null +++ b/semantic/src/definitions/elements/placeholder.less @@ -0,0 +1,248 @@ +/*! + * # Fomantic-UI - Loader + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'placeholder'; + +@import (multiple) '../../theme.config'; + +/*------------------- + Content +--------------------*/ + +.ui.placeholder { + position: static; + overflow: hidden; + animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; + animation-iteration-count: infinite; + background-color: @white; + background-image: @placeholderLoadingGradient; + background-size: @placeholderLoadingGradientWidth 100%; + max-width: @placeholderMaxWidth; +} + +@keyframes placeholderShimmer{ + 0% { + background-position: -@placeholderLoadingGradientWidth 0 + } + 100% { + background-position: @placeholderLoadingGradientWidth 0 + } +} + +.ui.placeholder + .ui.placeholder { + margin-top: @consecutivePlaceholderSpacing; +} +.ui.placeholder + .ui.placeholder { + animation-delay: @placeholderAnimationInterval; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 2); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 3); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 4); +} + +.ui.placeholder, +.ui.placeholder > :before, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after { + background-color: @white; +} + +.ui.placeholder.hidden { + display:none; +} + +& when (@variationPlaceholderImage) { + /* Image */ + .ui.placeholder .image:not(.header):not(.ui):not(.icon) { + height: @placeholderImageHeight; + } + .ui.placeholder .square.image:not(.header) { + height: 0; + overflow: hidden; + /* 1/1 aspect ratio */ + padding-top: 100%; + } + .ui.placeholder .rectangular.image:not(.header) { + height: 0; + overflow: hidden; + /* 4/3 aspect ratio */ + padding-top: 75%; + } +} + +& when (@variationPlaceholderLine) or (@variationPlaceholderHeader) { + /* Lines */ + .ui.placeholder .line { + position: relative; + height: @placeholderLineMargin; + } + .ui.placeholder .line:before, + .ui.placeholder .line:after { + top: 100%; + position: absolute; + content: ''; + background-color: inherit; + } + .ui.placeholder .line:before { + left: 0; + } + .ui.placeholder .line:after { + right: 0; + } + + /* Any Lines */ + .ui.placeholder .line { + margin-bottom: @placeholderLineHeight; + } + .ui.placeholder .line:before, + .ui.placeholder .line:after { + height: @placeholderLineHeight; + } + .ui.placeholder .line:not(:first-child) { + margin-top: @placeholderLineHeight; + } + + /* Line Outdent */ + .ui.placeholder .line:nth-child(1):after { + width: @placeholderLineOneOutdent; + } + .ui.placeholder .line:nth-child(2):after { + width: @placeholderLineTwoOutdent; + } + .ui.placeholder .line:nth-child(3):after { + width: @placeholderLineThreeOutdent; + } + .ui.placeholder .line:nth-child(4):after { + width: @placeholderLineFourOutdent; + } + .ui.placeholder .line:nth-child(5):after { + width: @placeholderLineFiveOutdent; + } +} + +& when (@variationPlaceholderHeader) { + /* Header Image + 2 Lines */ + .ui.placeholder .header { + position: relative; + overflow: hidden; + } + /* Header Line 1 & 2*/ + .ui.placeholder .header .line { + margin-bottom: @placeholderHeaderLineHeight; + } + .ui.placeholder .header .line:before, + .ui.placeholder .header .line:after { + height: @placeholderHeaderLineHeight; + } + .ui.placeholder .header .line:not(:first-child) { + margin-top: @placeholderHeaderLineHeight; + } + .ui.placeholder .header .line:after { + width: @placeholderHeaderLineOneOutdent; + } + .ui.placeholder .header .line:nth-child(2):after { + width: @placeholderHeaderLineTwoOutdent; + } + + & when (@variationPlaceholderImage) { + /* Image Header */ + .ui.placeholder .image.header .line { + margin-left: @placeholderImageWidth; + } + .ui.placeholder .image.header .line:before { + width: @placeholderImageTextIndent; + } + .ui.placeholder .image.header:after { + display: block; + height: @placeholderLineMargin; + content: ''; + margin-left: @placeholderImageWidth; + } + } +} + +/* Spacing */ +.ui.placeholder .image .line:first-child, +.ui.placeholder .paragraph .line:first-child, +.ui.placeholder .header .line:first-child { + height: 0.01px; +} +.ui.placeholder .image:not(:first-child):before, +.ui.placeholder .paragraph:not(:first-child):before, +.ui.placeholder .header:not(:first-child):before { + height: @placeholderSpacing; + content: ''; + display: block; +} + +& when (@variationPlaceholderInverted) { + /* Inverted Content Loader */ + .ui.inverted.placeholder { + background-image: @placeholderInvertedLoadingGradient; + } + .ui.inverted.placeholder, + .ui.inverted.placeholder > :before, + .ui.inverted.placeholder .image.header:after, + .ui.inverted.placeholder .line, + .ui.inverted.placeholder .line:after { + background-color: @black; + } +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ +& when (@variationPlaceholderLengths) { + .ui.placeholder .full.line.line.line:after { + width: @placeholderFullLineOutdent; + } + .ui.placeholder .very.long.line.line.line:after { + width: @placeholderVeryLongLineOutdent; + } + .ui.placeholder .long.line.line.line:after { + width: @placeholderLongLineOutdent; + } + .ui.placeholder .medium.line.line.line:after { + width: @placeholderMediumLineOutdent; + } + .ui.placeholder .short.line.line.line:after { + width: @placeholderShortLineOutdent; + } + .ui.placeholder .very.short.line.line.line:after { + width: @placeholderVeryShortLineOutdent; + } +} + +& when (@variationPlaceholderFluid) { + /*------------------- + Fluid + --------------------*/ + + .ui.fluid.placeholder { + max-width: none; + } +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/rail.less b/semantic/src/definitions/elements/rail.less new file mode 100644 index 0000000..d7ffc51 --- /dev/null +++ b/semantic/src/definitions/elements/rail.less @@ -0,0 +1,147 @@ +/*! + * # Fomantic-UI - Rail + * http://github.com/fomantic/Fomantic-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: 0 @splitDistance 0 0; + margin: 0 @splitDistance 0 0; +} + +.ui.right.rail { + left: 100%; + right: auto; + padding: 0 0 0 @splitDistance; + margin: 0 0 0 @splitDistance; +} + +/******************************* + Variations +*******************************/ + +& when (@variationRailInternal) { + /*-------------- + Internal + ---------------*/ + + .ui.left.internal.rail { + left: 0; + right: auto; + padding: 0 0 0 @splitDistance; + margin: 0 0 0 @splitDistance; + } + + .ui.right.internal.rail { + left: auto; + right: 0; + padding: 0 @splitDistance 0 0; + margin: 0 @splitDistance 0 0; + } +} + +& when (@variationRailDividing) { + /*-------------- + Dividing + ---------------*/ + + .ui.dividing.rail { + width: @dividingWidth; + } + .ui.left.dividing.rail { + padding: 0 @splitDividingDistance 0 0; + margin: 0 @splitDividingDistance 0 0; + border-right: @dividingBorder; + } + .ui.right.dividing.rail { + border-left: @dividingBorder; + padding: 0 0 0 @splitDividingDistance; + margin: 0 0 0 @splitDividingDistance; + } +} + +& when (@variationRailDistance) { + /*-------------- + Distance + ---------------*/ + + .ui.close.rail { + width: @closeWidth; + } + .ui.close.left.rail { + padding: 0 @splitCloseDistance 0 0; + margin: 0 @splitCloseDistance 0 0; + } + .ui.close.right.rail { + padding: 0 0 0 @splitCloseDistance; + margin: 0 0 0 @splitCloseDistance; + } + + .ui.very.close.rail { + width: @veryCloseWidth; + } + .ui.very.close.left.rail { + padding: 0 @splitVeryCloseDistance 0 0; + margin: 0 @splitVeryCloseDistance 0 0; + } + .ui.very.close.right.rail { + padding: 0 0 0 @splitVeryCloseDistance; + margin: 0 0 0 @splitVeryCloseDistance; + } +} + +& when (@variationRailAttached) { + /*-------------- + Attached + ---------------*/ + + .ui.attached.left.rail, + .ui.attached.right.rail { + padding: 0; + margin: 0; + } +} + +/*-------------- + Sizing +---------------*/ + +.ui.rail { + font-size: @medium; +} +& when not (@variationRailSizes = false) { + each(@variationRailSizes, { + @s: @@value; + .ui.@{value}.rail { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/reveal.less b/semantic/src/definitions/elements/reveal.less new file mode 100644 index 0000000..839668e --- /dev/null +++ b/semantic/src/definitions/elements/reveal.less @@ -0,0 +1,289 @@ +/*! + * # Fomantic-UI - Reveal + * http://github.com/fomantic/Fomantic-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: 0; +} + +.ui.reveal > .visible.content { + position: absolute !important; + top: 0 !important; + left: 0 !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 +*******************************/ + +& when (@variationRevealSlide) { + /*-------------- + Slide + ---------------*/ + + .ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; + } + + .ui.slide.reveal > .content { + display: block; + width: 100%; + white-space: normal; + float: left; + + margin: 0; + 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; + } +} + +& when (@variationRevealFade) { + /*-------------- + Fade + ---------------*/ + + .ui.fade.reveal > .visible.content { + opacity: 1; + } + .ui.fade.active.reveal > .visible.content, + .ui.fade.reveal:hover > .visible.content { + opacity: 0; + } +} + +& when (@variationRevealMove) { + /*-------------- + Move + ---------------*/ + + .ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; + } + + .ui.move.reveal > .content { + display: block; + float: left; + white-space: normal; + + margin: 0; + 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; + } +} + + +& when (@variationRevealRotate) { + /*-------------- + 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 +*******************************/ + +& when (@variationRevealDisabled) { + .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; + } +} + + +/******************************* + Coupling +*******************************/ + +.ui.reveal > .ui.ribbon.label { + z-index: @overlayZIndex; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + transition-delay: 0s !important; +} + + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: @medium; +} +& when not (@variationRevealSizes = false) { + each(@variationRevealSizes, { + @s: @@value; + .ui.@{value}.reveal > .content { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/segment.less b/semantic/src/definitions/elements/segment.less new file mode 100644 index 0000000..ec5e19b --- /dev/null +++ b/semantic/src/definitions/elements/segment.less @@ -0,0 +1,774 @@ +/*! + * # Fomantic-UI - Segment + * http://github.com/fomantic/Fomantic-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: 0; +} +.ui.segment:last-child { + margin-bottom: 0; +} + +& when (@variationSegmentVertical) { + /* Vertical */ + .ui.vertical.segment { + margin: 0; + padding-left: 0; + padding-right: 0; + + background: none transparent; + border-radius: 0; + box-shadow: none; + border: none; + border-bottom: @borderWidth solid @borderColor; + } + .ui.vertical.segment:last-child { + border-bottom: none; + } +} + + +/*------------------- + Loose Coupling +--------------------*/ +& when (@variationSegmentInverted) { + /* Header */ + .ui.inverted.segment > .ui.header .sub.header, + .ui.inverted.segment > .ui.header { + color: @white; + } +} + +& when (@variationSegmentAttached) { + /* Label */ + .ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +} + +/* 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; +} + +/* Tab */ +.ui.segment.tab:last-child { + margin-bottom: @verticalMargin; +} + +/******************************* + Types +*******************************/ + +& when (@variationSegmentPlaceholder) { + /*------------------- + Placeholder + --------------------*/ + + .ui.placeholder.segment { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + max-width: initial; + animation: none; + overflow: visible; + padding: @placeholderPadding; + min-height: @placeholderMinHeight; + background: @placeholderBackground; + border-color: @placeholderBorderColor; + box-shadow: @placeholderBoxShadow; + } + + .ui.placeholder.segment .button, + .ui.placeholder.segment textarea { + display: block; + } + .ui.placeholder.segment .field, + .ui.placeholder.segment textarea, + .ui.placeholder.segment > .ui.input, + .ui.placeholder.segment .button { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; + } + .ui.placeholder.segment .column .button, + .ui.placeholder.segment .column .field, + .ui.placeholder.segment .column textarea, + .ui.placeholder.segment .column > .ui.input { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; + } + + .ui.placeholder.segment > .inline { + align-self: center; + } + .ui.placeholder.segment > .inline > .button { + display: inline-block; + width: auto; + margin: @placeholderContentInlineButtonMargin; + } + .ui.placeholder.segment > .inline > .button:last-child { + margin-right: 0; + } +} + +& when (@variationSegmentPiled) { + /*------------------- + Piled + --------------------*/ + + .ui.piled.segments, + .ui.piled.segment { + margin: @piledMargin 0; + box-shadow: @piledBoxShadow; + z-index: @piledZIndex; + } + .ui.piled.segment:first-child { + margin-top: 0; + } + .ui.piled.segment:last-child { + margin-bottom: 0; + } + .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: 0; + 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; + } + & when (@variationSegmentAttached) { + /* Piled Attached */ + .ui[class*="top attached"].piled.segment { + margin-top: @piledMargin; + margin-bottom: 0; + } + .ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0; + } + .ui.piled.segment[class*="bottom attached"] { + margin-top: 0; + margin-bottom: @piledMargin; + } + .ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0; + } + } +} + +& when (@variationSegmentStacked) { + /*------------------- + 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: 0; + } + & when (@variationSegmentInverted) { + /* 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; + } + } +} + +& when (@variationSegmentPadded) { + /*------------------- + Padded + --------------------*/ + + .ui.padded.segment { + padding: @paddedSegmentPadding; + } + + .ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; + } + + & when (@variationSegmentVertical) { + /* Padded vertical */ + .ui.padded.segment.vertical.segment, + .ui[class*="very padded"].vertical.segment { + padding-left: 0; + padding-right: 0; + } + } +} + +& when (@variationSegmentCompact) { + /*------------------- + 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; + } +} + +& when (@variationSegmentCircular) { + /*------------------- + Circular + --------------------*/ + + .ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; + } +} + +& when (@variationSegmentRaised) { + /*------------------- + Raised + --------------------*/ + + .ui.raised.raised.segments, + .ui.raised.raised.segment { + box-shadow: @raisedBoxShadow; + } +} + +& when (@variationSegmentGroups) { + /******************************* + 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: 0; + } + .ui.segments:last-child { + margin-bottom: 0; + } + + + /* Nested Segment */ + .ui.segments > .segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: @groupedSegmentMargin; + width: @groupedSegmentWidth; + box-shadow: @groupedSegmentBoxShadow; + border: @groupedSegmentBorder; + border-top: @groupedSegmentDivider; + } + + .ui.segments:not(.horizontal) > .segment:first-child { + top: @attachedTopOffset; + bottom: 0; + border-top: none; + margin-top: 0; + margin-bottom: 0; + border-radius: @borderRadius @borderRadius 0 0; + } + + /* Bottom */ + .ui.segments:not(.horizontal) > .segment:last-child { + top: @attachedBottomOffset; + bottom: 0; + margin-top: 0; + margin-bottom: 0; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0 0 @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: 0; + } + + & when (@variationSegmentHorizontal) { + /* Horizontal Group */ + .ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + padding: 0; + box-shadow: @boxShadow; + margin: @margin; + border-radius: @borderRadius; + border: @border; + } + .ui.stackable.horizontal.segments { + flex-wrap: wrap; + } + + /* Nested Horizontal Group */ + .ui.segments > .horizontal.segments { + margin: 0; + background-color: transparent; + border-radius: 0; + border: none; + box-shadow: none; + border-top: @groupedSegmentDivider; + } + + /* Horizontal Segment */ + .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { + flex: 1 1 auto; + -ms-flex: 1 1 0; /* Solves #2550 MS Flex */ + } + .ui.horizontal.segments > .segment { + margin: 0; + min-width: 0; + border-radius: 0; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; + } + + /* Border Fixes */ + .ui.segments > .horizontal.segments:first-child { + border-top: none; + } + .ui.horizontal.segments:not(.stackable) > .segment:first-child { + border-left: none; + } + .ui.horizontal.segments > .segment:first-child { + border-radius: @borderRadius 0 0 @borderRadius; + } + .ui.horizontal.segments > .segment:last-child { + border-radius: 0 @borderRadius @borderRadius 0; + } + } +} + + +/******************************* + States +*******************************/ + +& when (@variationSegmentDisabled) { + /*-------------- + Disabled + ---------------*/ + + .ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; + } +} + +& when (@variationSegmentLoading) { + /*-------------- + Loading + ---------------*/ + + .ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + text-shadow: none !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: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid @loaderLineColor; + border-radius: @circularRadius; + + box-shadow: 0 0 0 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; + } +} + + + +/******************************* + Variations +*******************************/ + +& when (@variationSegmentBasic) { + /*------------------- + Basic + --------------------*/ + + .ui.basic.segment, + .ui.segments .ui.basic.segment, + .ui.basic.segments { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; + } +} + +& when (@variationSegmentClearing) { + /*------------------- + Clearing + --------------------*/ + + .ui.clearing.segment:after { + content: ""; + display: block; + clear: both; + } +} + +/*------------------- + Colors +--------------------*/ + +each(@colors,{ + @color: replace(@key,'@',''); + @c: @colors[@@color][color]; + & when not (@color=primary) and not (@color=secondary) { + .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) { + border-top: @coloredBorderSize solid @c; + } + & when (@variationSegmentInverted) { + .ui.inverted.@{color}.segment.segment.segment.segment.segment { + background-color: @c; + color: @white; + } + } + } +}) + +& when (@variationSegmentAligned) { + /*------------------- + 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; + } +} + +& when (@variationSegmentFloating) { + /*------------------- + Floated + --------------------*/ + + .ui.floated.segment, + .ui[class*="left floated"].segment { + float: left; + margin-right: @floatedDistance; + } + .ui[class*="right floated"].segment { + float: right; + margin-left: @floatedDistance; + } +} + +& when (@variationSegmentInverted) { + /*------------------- + 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; + } + & when (@variationSegmentAttached) { + /* Attached */ + .ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; + } + } + & when (@variationSegmentLoading) { + /* Loading */ + .ui.inverted.loading.segment { + color: @invertedLoaderLineColor; + } + .ui.inverted.loading.segment:before { + background: @loaderInvertedDimmerColor; + } + } +} + +/*------------------- + Emphasis +--------------------*/ +& when (@variationSegmentSecondary) { + /* Secondary */ + .ui.secondary.segment { + background: @secondaryBackground; + color: @secondaryColor; + } + & when (@variationSegmentInverted) { + .ui.secondary.inverted.segment { + background: @secondaryInvertedBackground; + color: @secondaryInvertedColor; + } + } +} + +& when (@variationSegmentTertiary) { + /* Tertiary */ + .ui.tertiary.segment { + background: @tertiaryBackground; + color: @tertiaryColor; + } + & when (@variationSegmentInverted) { + .ui.tertiary.inverted.segment { + background: @tertiaryInvertedBackground; + color: @tertiaryInvertedColor; + } + } +} + +& when (@variationSegmentAttached) { + /*------------------- + Attached + --------------------*/ + + /* Middle */ + .ui.attached.segment { + top: 0; + bottom: 0; + border-radius: 0; + margin: 0 @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: 0; + margin-bottom: 0; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0 0; + } + .ui.segment[class*="top attached"]:first-child { + margin-top: 0; + } + + /* Bottom */ + .ui.segment[class*="bottom attached"] { + bottom: 0; + margin-top: 0; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0 0 @borderRadius @borderRadius; + } + .ui.segment[class*="bottom attached"]:last-child { + margin-bottom: @verticalMargin; + } +} + +& when (@variationSegmentFitted) { + /*-------------- + Fitted + ---------------*/ + + .ui.fitted.segment:not(.horizontally) { + padding-top: 0; + padding-bottom: 0; + } + .ui.fitted.segment:not(.vertically) { + padding-left: 0; + padding-right: 0; + } +} + +/*------------------- + Size +--------------------*/ + +.ui.segments .segment, +.ui.segment { + font-size: @medium; +} +& when not (@variationSegmentSizes = false) { + each(@variationSegmentSizes, { + @s: @@value; + .ui.@{value}.segments .segment, + .ui.@{value}.segment { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/step.less b/semantic/src/definitions/elements/step.less new file mode 100644 index 0000000..fa339e8 --- /dev/null +++ b/semantic/src/definitions/elements/step.less @@ -0,0 +1,630 @@ +/*! + * # Fomantic-UI - Step + * http://github.com/fomantic/Fomantic-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; +} +.ui.steps:not(.unstackable) { + flex-wrap: wrap; +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0; +} + + +/******************************* + 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; + 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 0 0 @stepsBorderRadius; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0 @stepsBorderRadius @stepsBorderRadius 0; + border-right: none; + margin-right: 0; +} + +/* 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 > i.icon { + line-height: 1; + font-size: @iconSize; + margin: 0 @iconDistance 0 0; +} +.ui.steps .step > i.icon, +.ui.steps .step > i.icon ~ .content { + display: block; + flex: 0 1 auto; + align-self: @iconAlign; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > i.icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + +/******************************* + Types +*******************************/ + +& when (@variationStepOrdered) { + /*-------------- + Ordered + ---------------*/ + + .ui.ordered.steps { + counter-reset: ordered; + } + .ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counter(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; + } +} + +& when (@variationStepVertical) { + /*-------------- + 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 0 0; + } + .ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + } + .ui.vertical.steps .step:only-child { + border-radius: @stepsBorderRadius; + } + + + /* Arrow */ + .ui.vertical.steps .step:after { + top: @verticalArrowTopOffset; + right: @verticalArrowRightOffset; + border-width: @verticalArrowBorderWidth; + display: @verticalArrowDisplay; + } + .ui.right.vertical.steps .step:after { + border-width: @verticalLeftArrowBorderWidth; + left: @verticalLeftArrowLeftOffset; + right: @verticalLeftArrowRightOffset; + transform: translateY(-50%) translateX(-50%) rotate(-45deg); + } + + .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; + border-right: none; + border-bottom: @stepsBorder; + } + .ui.steps:not(.unstackable) .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; + } + .ui.steps:not(.unstackable) .step:last-child { + border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + border-bottom: none; + } + + /* Arrow */ + .ui.steps:not(.unstackable) .step:after { + top: unset; + bottom: -@arrowSize; + right: 50%; + transform: translateY(-50%) translateX(50%) rotate(45deg); + } + .ui.vertical.steps .active.step:last-child:after { + display: none; + } + /* Content */ + .ui.steps:not(.unstackable) .step .content { + text-align: center; + } + + /* Icon */ + .ui.steps:not(.unstackable) .step > i.icon, + .ui.ordered.steps:not(.unstackable) .step:before { + margin: 0 0 @mobileIconDistance 0; + } + +} + +/******************************* + 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 i.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 > i.icon:before, +.ui.ordered.steps .step.completed:before { + color: @completedColor; +} + +& when (@variationStepDisabled) { + /* 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 +*******************************/ + +& when (@variationStepStackable) { + /*-------------- + 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; + border-right: none; + border-bottom: @stepsBorder; + } + .ui[class*="tablet stackable"].steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; + } + .ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + border-bottom: none; + } + + /* Arrow */ + .ui[class*="tablet stackable"].steps .step:after { + top: unset; + bottom: -@arrowSize; + right: 50%; + transform: translateY(-50%) translateX(50%) rotate(45deg); + } + + /* Content */ + .ui[class*="tablet stackable"].steps .step .content { + text-align: center; + } + + /* Icon */ + .ui[class*="tablet stackable"].steps .step > i.icon, + .ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0 0 @mobileIconDistance 0; + } + + } +} + +& when (@variationStepFluid) { + /*-------------- + Fluid + ---------------*/ + + /* Fluid */ + .ui.fluid.steps { + display: flex; + width: 100%; + } +} + +& when (@variationStepAttached) { + /*-------------- + Attached + ---------------*/ + + /* Top */ + .ui.attached.steps { + width: @attachedWidth !important; + margin: 0 @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0 0; + } + .ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0 0 0; + } + .ui.attached.steps .step:last-child { + border-radius: 0 @stepsBorderRadius 0 0; + } + + /* Bottom */ + .ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0; + border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + } + .ui.bottom.attached.steps .step:first-child { + border-radius: 0 0 0 @stepsBorderRadius; + } + .ui.bottom.attached.steps .step:last-child { + border-radius: 0 0 @stepsBorderRadius 0; + } +} + +/*------------------- + 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.steps .step, +.ui.step { + font-size: @medium; +} +& when not (@variationStepSizes = false) { + each(@variationStepSizes, { + @s: @@value; + .ui.@{value}.steps .step, + .ui.@{value}.step { + font-size: @s; + } + }) +} + +& when (@variationStepInverted) { + /*-------------- + Inverted + ---------------*/ + + .ui.inverted.steps { + border: 1px solid @solidWhiteBorderColor; + } + + .ui.inverted.steps .step { + color: @invertedTextColor; + background: @black; + border-color: @solidWhiteBorderColor; + } + + .ui.inverted.steps .step:after { + background-color: @black; + border-color: @solidWhiteBorderColor; + } + + .ui.inverted.steps .step .description { + color: @invertedTextColor; + } + + /* Active */ + .ui.inverted.steps .step.active, + .ui.inverted.steps .step.active:after { + background: @invertedActiveBackground; + } + .ui.inverted.ordered.steps .step.active:before, + .ui.inverted.steps .active.step i.icon { + color: @invertedSelectedTextColor; + } + + & when (@variationStepDisabled) { + /* Disabled */ + .ui.inverted.steps .disabled.step, + .ui.inverted.steps .disabled.step:after { + background: @invertedDisabledBackground; + } + .ui.inverted.steps .disabled.step, + .ui.inverted.steps .disabled.step .title, + .ui.inverted.steps .disabled.step .description { + color: @invertedDisabledTextColor; + } + } + + /* Link Hover */ + .ui.inverted.steps .link.step:hover::after, + .ui.inverted.steps .link.step:hover, + .ui.inverted.steps a.step:hover::after, + .ui.inverted.steps a.step:hover { + background: @invertedHoverBackground; + color: @invertedHoveredTextColor; + } + + /* Link Down */ + .ui.inverted.steps .link.step:active::after, + .ui.inverted.steps .link.step:active, + .ui.inverted.steps a.step:active::after, + .ui.inverted.steps a.step:active { + background: @invertedActiveHoverBackground; + color: @invertedPressedTextColor; + } +} + + +.loadUIOverrides(); diff --git a/semantic/src/definitions/elements/text.less b/semantic/src/definitions/elements/text.less new file mode 100644 index 0000000..f2256c5 --- /dev/null +++ b/semantic/src/definitions/elements/text.less @@ -0,0 +1,74 @@ +/*! + * # Fomantic-UI - Text + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'text'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Text +*******************************/ +span.ui.text { + line-height: @lineHeight; +} + +each(@colors, { + @color: replace(@key, '@', ''); + @c: @colors[@@color][color]; + @l: @colors[@@color][light]; + + span.ui.@{color}.text { + color: @c; + } + & when (@variationTextInverted) { + span.ui.inverted.@{color}.text { + color: @l; + } + } +}) + +& when (@variationTextStates) { + each(@textStates, { + @state: replace(@key, '@', ''); + @c: @textStates[@@state][color]; + + span.ui.@{state}.text { + color: @c; + } + }) +} + +& when (@variationTextDisabled) { + span.ui.disabled.text { + opacity: @disabledOpacity; + } +} + +/* Sizes */ +span.ui.medium.text { + font-size: @medium; +} +& when not (@variationTextSizes = false) { + each(@variationTextSizes, { + @s: @@value; + span.ui.@{value}.text { + font-size: @s; + } + }) +} + +.loadUIOverrides(); diff --git a/semantic/src/definitions/globals/reset.less b/semantic/src/definitions/globals/reset.less new file mode 100644 index 0000000..1ebcf6b --- /dev/null +++ b/semantic/src/definitions/globals/reset.less @@ -0,0 +1,40 @@ +/*! + * # Fomantic-UI - Reset + * http://github.com/fomantic/Fomantic-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/semantic/src/definitions/globals/site.js b/semantic/src/definitions/globals/site.js new file mode 100644 index 0000000..bc53e9f --- /dev/null +++ b/semantic/src/definitions/globals/site.js @@ -0,0 +1,493 @@ +/*! + * # Fomantic-UI - Site + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +$.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, + + 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(Array.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', + 'calendar', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'form', + 'modal', + 'nag', + 'popup', + 'slider', + 'rating', + 'shape', + 'sidebar', + 'state', + 'sticky', + 'tab', + 'toast', + 'transition', + 'visibility', + 'visit' + ], + + siteNamespace : 'site', + namespaceStub : { + cache : {}, + config : {}, + sections : {}, + section : {}, + utilities : {} + } + +}; + +// allows for selection of elements with data attributes +$.extend($.expr[ ":" ], { + data: ($.expr.createPseudo) + ? $.expr.createPseudo(function(dataName) { + return function(elem) { + return !!$.data(elem, dataName); + }; + }) + : function(elem, i, match) { + // support: jQuery < 1.8 + return !!$.data(elem, match[ 3 ]); + } +}); + + +})( jQuery, window, document ); diff --git a/semantic/src/definitions/globals/site.less b/semantic/src/definitions/globals/site.less new file mode 100644 index 0000000..876deb3 --- /dev/null +++ b/semantic/src/definitions/globals/site.less @@ -0,0 +1,207 @@ +/*! + * # Fomantic-UI - Site + * http://github.com/fomantic/Fomantic-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: 0; + padding: 0; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; +} + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0; +} + +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: 0; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0; +} + + +/******************************* + Text +*******************************/ + +p { + margin: @paragraphMargin; + line-height: @paragraphLineHeight; +} +p:first-child { + margin-top: 0; +} +p:last-child { + margin-bottom: 0; +} + +/*------------------- + 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; + height: @customScrollbarHeight; + } + 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:not(.dimmer)::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; + } + body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + body .ui.inverted:not(.dimmer)::-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/semantic/src/definitions/modules/accordion.js b/semantic/src/definitions/modules/accordion.js new file mode 100644 index 0000000..392d498 --- /dev/null +++ b/semantic/src/definitions/modules/accordion.js @@ -0,0 +1,618 @@ +/*! + * # Fomantic-UI - Accordion + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +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), + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous instance', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $title = $module.find(selector.title); + $content = $module.find(selector.content); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, + + event: { + click: function() { + module.toggle.call(this); + } + }, + + toggle: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) + ; + module.debug('Toggling visibility of content', $activeTitle); + if(isOpen || isOpening) { + if(settings.collapsible) { + module.close.call($activeTitle); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open.call($activeTitle); + } + }, + + open: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) + ; + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + settings.onChanging.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + skipInlineHidden : true, + onComplete: function() { + $activeContent.children().removeClass(className.transition); + } + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; + }, + + close: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) + ; + if((isActive || isOpening) && !isClosing) { + module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); + settings.onChanging.call($activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + skipInlineHidden : true + }) + ; + } + 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, + skipInlineHidden : true + }) + ; + } + 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(Array.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + + name : 'Accordion', + namespace : 'accordion', + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // event on title that opens accordion + + observeChanges : true, // whether accordion should automatically refresh on DOM insertion + + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + onOpening : function(){}, // callback before open animation + onClosing : function(){}, // callback before closing animation + onChanging : function(){}, // callback before closing or opening animation + + onOpen : function(){}, // callback after open animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active', + animating : 'animating', + transition: 'transition' + }, + + selector : { + accordion : '.accordion', + title : '.title', + trigger : '.title', + content : '.content' + } + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); + diff --git a/semantic/src/definitions/modules/accordion.less b/semantic/src/definitions/modules/accordion.less new file mode 100644 index 0000000..7fe052f --- /dev/null +++ b/semantic/src/definitions/modules/accordion.less @@ -0,0 +1,219 @@ +/*! + * # Fomantic-UI - Accordion + * http://github.com/fomantic/Fomantic-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; +} + +/* 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: 0; +} + +/* 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 +*******************************/ + +& when (@variationAccordionStyled) { + /*-------------- + 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 { + margin: @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 +*******************************/ + +/*-------------- + Not Active +---------------*/ + +.ui.accordion .title ~ .content:not(.active), +.ui.accordion .accordion .title ~ .content:not(.active) { + display: none; +} + +/******************************* + Variations +*******************************/ + +& when (@variationAccordionFluid) { + /*-------------- + Fluid + ---------------*/ + + .ui.fluid.accordion, + .ui.fluid.accordion .accordion { + width: 100%; + } +} + +& when (@variationAccordionInverted) { + /*-------------- + Inverted + ---------------*/ + + .ui.inverted.accordion .title:not(.ui) { + color: @invertedTitleColor; + } +} + +.loadUIOverrides(); + diff --git a/semantic/src/definitions/modules/calendar.js b/semantic/src/definitions/modules/calendar.js new file mode 100644 index 0000000..1757f32 --- /dev/null +++ b/semantic/src/definitions/modules/calendar.js @@ -0,0 +1,1774 @@ +/*! + * # Fomantic-UI - Calendar + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.calendar = 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, + timeGapTable = { + '5': {'row': 4, 'column': 3 }, + '10': {'row': 3, 'column': 2 }, + '15': {'row': 2, 'column': 2 }, + '20': {'row': 3, 'column': 1 }, + '30': {'row': 2, 'column': 1 } + }, + numberText = ['','one','two','three','four','five','six','seven','eight'] + ; + + $allModules + .each(function () { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.calendar.settings, parameters) + : $.extend({}, $.fn.calendar.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + formatter = settings.formatter, + parser = settings.parser, + metadata = settings.metadata, + timeGap = timeGapTable[settings.minTimeGap], + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $input = $module.find(selector.input), + $container = $module.find(selector.popup), + $activator = $module.find(selector.activator), + + element = this, + instance = $module.data(moduleNamespace), + + isTouch, + isTouchDown = false, + isInverted = $module.hasClass(className.inverted), + focusDateUsedForRange = false, + selectionComplete = false, + classObserver, + module + ; + + module = { + + initialize: function () { + module.debug('Initializing calendar for', element, $module); + + isTouch = module.get.isTouch(); + module.setup.config(); + module.setup.popup(); + module.setup.inline(); + module.setup.input(); + module.setup.date(); + module.create.calendar(); + + module.bind.events(); + module.observeChanges(); + module.instantiate(); + }, + + instantiate: function () { + module.verbose('Storing instance of calendar'); + instance = module; + $module.data(moduleNamespace, instance); + }, + + destroy: function () { + module.verbose('Destroying previous calendar for', element); + $module.removeData(moduleNamespace); + module.unbind.events(); + module.disconnect.classObserver(); + }, + + setup: { + config: function () { + if (module.get.minDate() !== null) { + module.set.minDate($module.data(metadata.minDate)); + } + if (module.get.maxDate() !== null) { + module.set.maxDate($module.data(metadata.maxDate)); + } + module.setting('type', module.get.type()); + module.setting('on', settings.on || ($input.length ? 'focus' : 'click')); + }, + popup: function () { + if (settings.inline) { + return; + } + if (!$activator.length) { + $activator = $module.children().first(); + if (!$activator.length) { + return; + } + } + if ($.fn.popup === undefined) { + module.error(error.popup); + return; + } + if (!$container.length) { + //prepend the popup element to the activator's parent so that it has less chance of messing with + //the styling (eg input action button needs to be the last child to have correct border radius) + var $activatorParent = $activator.parent(), + domPositionFunction = $activatorParent.closest(selector.append).length !== 0 ? 'appendTo' : 'prependTo'; + $container = $('
').addClass(className.popup)[domPositionFunction]($activatorParent); + } + $container.addClass(className.calendar); + if(isInverted){ + $container.addClass(className.inverted); + } + var onVisible = function () { + module.refreshTooltips(); + return settings.onVisible.apply($container, arguments); + }; + var onHidden = settings.onHidden; + if (!$input.length) { + //no input, $container has to handle focus/blur + $container.attr('tabindex', '0'); + onVisible = function () { + module.refreshTooltips(); + module.focus(); + return settings.onVisible.apply($container, arguments); + }; + onHidden = function () { + module.blur(); + return settings.onHidden.apply($container, arguments); + }; + } + var onShow = function () { + //reset the focus date onShow + module.set.focusDate(module.get.date()); + module.set.mode(module.get.validatedMode(settings.startMode)); + return settings.onShow.apply($container, arguments); + }; + var on = module.setting('on'); + var options = $.extend({}, settings.popupOptions, { + popup: $container, + on: on, + hoverable: on === 'hover', + closable: on === 'click', + onShow: onShow, + onVisible: onVisible, + onHide: settings.onHide, + onHidden: onHidden + }); + module.popup(options); + }, + inline: function () { + if ($activator.length && !settings.inline) { + return; + } + settings.inline = true; + $container = $('
').addClass(className.calendar).appendTo($module); + if (!$input.length) { + $container.attr('tabindex', '0'); + } + }, + input: function () { + if (settings.touchReadonly && $input.length && isTouch) { + $input.prop('readonly', true); + } + module.check.disabled(); + }, + date: function () { + var date; + if (settings.initialDate) { + date = parser.date(settings.initialDate, settings); + } else if ($module.data(metadata.date) !== undefined) { + date = parser.date($module.data(metadata.date), settings); + } else if ($input.length) { + date = parser.date($input.val(), settings); + } + module.set.date(date, settings.formatInput, false); + module.set.mode(module.get.mode(), false); + } + }, + + trigger: { + change: function() { + var + inputElement = $input[0] + ; + if(inputElement) { + var events = document.createEvent('HTMLEvents'); + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + create: { + calendar: function () { + var i, r, c, p, row, cell, pageGrid; + + var + mode = module.get.mode(), + today = new Date(), + date = module.get.date(), + focusDate = module.get.focusDate(), + display = module.helper.dateInRange(focusDate || date || settings.initialDate || today) + ; + + if (!focusDate) { + focusDate = display; + module.set.focusDate(focusDate, false, false); + } + + var + isYear = mode === 'year', + isMonth = mode === 'month', + isDay = mode === 'day', + isHour = mode === 'hour', + isMinute = mode === 'minute', + isTimeOnly = settings.type === 'time' + ; + + var multiMonth = Math.max(settings.multiMonth, 1); + var monthOffset = !isDay ? 0 : module.get.monthOffset(); + + var + minute = display.getMinutes(), + hour = display.getHours(), + day = display.getDate(), + startMonth = display.getMonth() + monthOffset, + year = display.getFullYear() + ; + + var columns = isDay ? settings.showWeekNumbers ? 8 : 7 : isHour ? 4 : timeGap['column']; + var rows = isDay || isHour ? 6 : timeGap['row']; + var pages = isDay ? multiMonth : 1; + + var container = $container; + var tooltipPosition = container.hasClass("left") ? "right center" : "left center"; + container.empty(); + if (pages > 1) { + pageGrid = $('
').addClass(className.grid).appendTo(container); + } + + for (p = 0; p < pages; p++) { + if (pages > 1) { + var pageColumn = $('
').addClass(className.column).appendTo(pageGrid); + container = pageColumn; + } + + var month = startMonth + p; + var firstMonthDayColumn = (new Date(year, month, 1).getDay() - settings.firstDayOfWeek % 7 + 7) % 7; + if (!settings.constantHeight && isDay) { + var requiredCells = new Date(year, month + 1, 0).getDate() + firstMonthDayColumn; + rows = Math.ceil(requiredCells / 7); + } + + var + yearChange = isYear ? 10 : isMonth ? 1 : 0, + monthChange = isDay ? 1 : 0, + dayChange = isHour || isMinute ? 1 : 0, + prevNextDay = isHour || isMinute ? day : 1, + prevDate = new Date(year - yearChange, month - monthChange, prevNextDay - dayChange, hour), + nextDate = new Date(year + yearChange, month + monthChange, prevNextDay + dayChange, hour), + prevLast = isYear ? new Date(Math.ceil(year / 10) * 10 - 9, 0, 0) : + isMonth ? new Date(year, 0, 0) : isDay ? new Date(year, month, 0) : new Date(year, month, day, -1), + nextFirst = isYear ? new Date(Math.ceil(year / 10) * 10 + 1, 0, 1) : + isMonth ? new Date(year + 1, 0, 1) : isDay ? new Date(year, month + 1, 1) : new Date(year, month, day + 1) + ; + + var tempMode = mode; + if (isDay && settings.showWeekNumbers){ + tempMode += ' andweek'; + } + var table = $('').addClass(className.table).addClass(tempMode).addClass(numberText[columns] + ' column').appendTo(container); + if(isInverted){ + table.addClass(className.inverted); + } + var textColumns = columns; + //no header for time-only mode + if (!isTimeOnly) { + var thead = $('').appendTo(table); + + row = $('').appendTo(thead); + cell = $('').appendTo(thead); + if(settings.showWeekNumbers) { + cell = $('').appendTo(table); + i = isYear ? Math.ceil(year / 10) * 10 - 9 : isDay ? 1 - firstMonthDayColumn : 0; + for (r = 0; r < rows; r++) { + row = $('').appendTo(tbody); + if(isDay && settings.showWeekNumbers){ + cell = $('').appendTo(tbody); + var todayButton = $('
').attr('colspan', '' + columns).appendTo(row); + + var headerDate = isYear || isMonth ? new Date(year, 0, 1) : + isDay ? new Date(year, month, 1) : new Date(year, month, day, hour, minute); + var headerText = $('').addClass(className.link).appendTo(cell); + headerText.text(formatter.header(headerDate, mode, settings)); + var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') : + isDay ? (settings.disableMonth ? 'year' : 'month') : 'day'; + headerText.data(metadata.mode, newMode); + + if (p === 0) { + var prev = $('').addClass(className.prev).appendTo(cell); + prev.data(metadata.focusDate, prevDate); + prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode)); + $('').addClass(className.prevIcon).appendTo(prev); + } + + if (p === pages - 1) { + var next = $('').addClass(className.next).appendTo(cell); + next.data(metadata.focusDate, nextDate); + next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode)); + $('').addClass(className.nextIcon).appendTo(next); + } + if (isDay) { + row = $('
').appendTo(row); + cell.text(settings.text.weekNo); + cell.addClass(className.weekCell); + textColumns--; + } + for (i = 0; i < textColumns; i++) { + cell = $('').appendTo(row); + cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings)); + } + } + } + + var tbody = $('
').appendTo(row); + cell.text(module.get.weekOfYear(year,month,i+1-settings.firstDayOfWeek)); + cell.addClass(className.weekCell); + } + for (c = 0; c < textColumns; c++, i++) { + var cellDate = isYear ? new Date(i, month, 1, hour, minute) : + isMonth ? new Date(year, i, 1, hour, minute) : isDay ? new Date(year, month, i, hour, minute) : + isHour ? new Date(year, month, day, i) : new Date(year, month, day, hour, i * settings.minTimeGap); + var cellText = isYear ? i : + isMonth ? settings.text.monthsShort[i] : isDay ? cellDate.getDate() : + formatter.time(cellDate, settings, true); + cell = $('').addClass(className.cell).appendTo(row); + cell.text(cellText); + cell.data(metadata.date, cellDate); + var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12); + var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode); + if (disabled) { + var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates); + if (disabledDate !== null && disabledDate[metadata.message]) { + cell.attr("data-tooltip", disabledDate[metadata.message]); + cell.attr("data-position", disabledDate[metadata.position] || tooltipPosition); + if(disabledDate[metadata.inverted] || (isInverted && disabledDate[metadata.inverted] === undefined)) { + cell.attr("data-inverted", ''); + } + if(disabledDate[metadata.variation]) { + cell.attr("data-variation", disabledDate[metadata.variation]); + } + } + } else { + var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates); + if (eventDate !== null) { + cell.addClass(eventDate[metadata.class] || settings.eventClass); + if (eventDate[metadata.message]) { + cell.attr("data-tooltip", eventDate[metadata.message]); + cell.attr("data-position", eventDate[metadata.position] || tooltipPosition); + if(eventDate[metadata.inverted] || (isInverted && eventDate[metadata.inverted] === undefined)) { + cell.attr("data-inverted", ''); + } + if(eventDate[metadata.variation]) { + cell.attr("data-variation", eventDate[metadata.variation]); + } + } + } + } + var active = module.helper.dateEqual(cellDate, date, mode); + var isToday = module.helper.dateEqual(cellDate, today, mode); + cell.toggleClass(className.adjacentCell, adjacent); + cell.toggleClass(className.disabledCell, disabled); + cell.toggleClass(className.activeCell, active && !adjacent); + if (!isHour && !isMinute) { + cell.toggleClass(className.todayCell, !adjacent && isToday); + } + + // Allow for external modifications of each cell + var cellOptions = { + mode: mode, + adjacent: adjacent, + disabled: disabled, + active: active, + today: isToday + }; + formatter.cell(cell, cellDate, cellOptions); + + if (module.helper.dateEqual(cellDate, focusDate, mode)) { + //ensure that the focus date is exactly equal to the cell date + //so that, if selected, the correct value is set + module.set.focusDate(cellDate, false, false); + } + } + } + + if (settings.today) { + var todayRow = $('
').attr('colspan', '' + columns).addClass(className.today).appendTo(todayRow); + todayButton.text(formatter.today(settings)); + todayButton.data(metadata.date, today); + } + + module.update.focus(false, table); + + if(settings.inline){ + module.refreshTooltips(); + } + } + } + }, + + update: { + focus: function (updateRange, container) { + container = container || $container; + var mode = module.get.mode(); + var date = module.get.date(); + var focusDate = module.get.focusDate(); + var startDate = module.get.startDate(); + var endDate = module.get.endDate(); + var rangeDate = (updateRange ? focusDate : null) || date || (!isTouch ? focusDate : null); + + container.find('td').each(function () { + var cell = $(this); + var cellDate = cell.data(metadata.date); + if (!cellDate) { + return; + } + var disabled = cell.hasClass(className.disabledCell); + var active = cell.hasClass(className.activeCell); + var adjacent = cell.hasClass(className.adjacentCell); + var focused = module.helper.dateEqual(cellDate, focusDate, mode); + var inRange = !rangeDate ? false : + ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) || + (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate))); + cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && (!adjacent || (settings.selectAdjacentDays && adjacent)) && !disabled); + + if (module.helper.isTodayButton(cell)) { + return; + } + cell.toggleClass(className.rangeCell, inRange && !active && !disabled); + }); + } + }, + + refresh: function () { + module.create.calendar(); + }, + + refreshTooltips: function() { + var winWidth = $(window).width(); + $container.find('td[data-position]').each(function () { + var cell = $(this); + var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,''); + var tooltipPosition = cell.attr('data-position'); + // use a fallback width of 250 (calendar width) for IE/Edge (which return "auto") + var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left'; + if(tooltipPosition.indexOf(calcPosition) === -1) { + cell.attr('data-position',tooltipPosition.replace(/(left|right)/,calcPosition)); + } + }); + }, + + bind: { + events: function () { + module.debug('Binding events'); + $container.on('mousedown' + eventNamespace, module.event.mousedown); + $container.on('touchstart' + eventNamespace, module.event.mousedown); + $container.on('mouseup' + eventNamespace, module.event.mouseup); + $container.on('touchend' + eventNamespace, module.event.mouseup); + $container.on('mouseover' + eventNamespace, module.event.mouseover); + if ($input.length) { + $input.on('input' + eventNamespace, module.event.inputChange); + $input.on('focus' + eventNamespace, module.event.inputFocus); + $input.on('blur' + eventNamespace, module.event.inputBlur); + $input.on('keydown' + eventNamespace, module.event.keydown); + } else { + $container.on('keydown' + eventNamespace, module.event.keydown); + } + } + }, + + unbind: { + events: function () { + module.debug('Unbinding events'); + $container.off(eventNamespace); + if ($input.length) { + $input.off(eventNamespace); + } + } + }, + + event: { + mouseover: function (event) { + var target = $(event.target); + var date = target.data(metadata.date); + var mousedown = event.buttons === 1; + if (date) { + module.set.focusDate(date, false, true, mousedown); + } + }, + mousedown: function (event) { + if ($input.length) { + //prevent the mousedown on the calendar causing the input to lose focus + event.preventDefault(); + } + isTouchDown = event.type.indexOf('touch') >= 0; + var target = $(event.target); + var date = target.data(metadata.date); + if (date) { + module.set.focusDate(date, false, true, true); + } + }, + mouseup: function (event) { + //ensure input has focus so that it receives keydown events for calendar navigation + module.focus(); + event.preventDefault(); + event.stopPropagation(); + isTouchDown = false; + var target = $(event.target); + if (target.hasClass("disabled")) { + return; + } + var parent = target.parent(); + if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) { + //clicked on a child element, switch to parent (used when clicking directly on prev/next icon element) + target = parent; + } + var date = target.data(metadata.date); + var focusDate = target.data(metadata.focusDate); + var mode = target.data(metadata.mode); + if (date && settings.onSelect.call(element, date, module.get.mode()) !== false) { + var forceSet = target.hasClass(className.today); + module.selectDate(date, forceSet); + } + else if (focusDate) { + module.set.focusDate(focusDate); + } + else if (mode) { + module.set.mode(mode); + } + }, + keydown: function (event) { + var keyCode = event.which; + if (keyCode === 27 || keyCode === 9) { + //esc || tab + module.popup('hide'); + } + + if (module.popup('is visible')) { + if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) { + //arrow keys + var mode = module.get.mode(); + var bigIncrement = mode === 'day' ? 7 : mode === 'hour' ? 4 : mode === 'minute' ? timeGap['column'] : 3; + var increment = keyCode === 37 ? -1 : keyCode === 38 ? -bigIncrement : keyCode == 39 ? 1 : bigIncrement; + increment *= mode === 'minute' ? settings.minTimeGap : 1; + var focusDate = module.get.focusDate() || module.get.date() || new Date(); + var year = focusDate.getFullYear() + (mode === 'year' ? increment : 0); + var month = focusDate.getMonth() + (mode === 'month' ? increment : 0); + var day = focusDate.getDate() + (mode === 'day' ? increment : 0); + var hour = focusDate.getHours() + (mode === 'hour' ? increment : 0); + var minute = focusDate.getMinutes() + (mode === 'minute' ? increment : 0); + var newFocusDate = new Date(year, month, day, hour, minute); + if (settings.type === 'time') { + newFocusDate = module.helper.mergeDateTime(focusDate, newFocusDate); + } + if (module.helper.isDateInRange(newFocusDate, mode)) { + module.set.focusDate(newFocusDate); + } + } else if (keyCode === 13) { + //enter + var mode = module.get.mode(); + var date = module.get.focusDate(); + if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) { + module.selectDate(date); + } + //disable form submission: + event.preventDefault(); + event.stopPropagation(); + } + } + + if (keyCode === 38 || keyCode === 40) { + //arrow-up || arrow-down + event.preventDefault(); //don't scroll + module.popup('show'); + } + }, + inputChange: function () { + var val = $input.val(); + var date = parser.date(val, settings); + module.set.date(date, false); + }, + inputFocus: function () { + $container.addClass(className.active); + }, + inputBlur: function () { + $container.removeClass(className.active); + if (settings.formatInput) { + var date = module.get.date(); + var text = formatter.datetime(date, settings); + $input.val(text); + } + if(selectionComplete){ + module.trigger.change(); + selectionComplete = false; + } + }, + class: { + mutation: function(mutations) { + mutations.forEach(function(mutation) { + if(mutation.attributeName === "class") { + module.check.disabled(); + } + }); + } + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + classObserver = new MutationObserver(module.event.class.mutation); + module.debug('Setting up mutation observer', classObserver); + module.observe.class(); + } + }, + + disconnect: { + classObserver: function() { + if($input.length && classObserver) { + classObserver.disconnect(); + } + } + }, + + observe: { + class: function() { + if($input.length && classObserver) { + classObserver.observe($module[0], { + attributes : true + }); + } + } + }, + + is: { + disabled: function() { + return $module.hasClass(className.disabled); + } + }, + + check: { + disabled: function(){ + $input.attr('tabindex',module.is.disabled() ? -1 : 0); + } + }, + + get: { + weekOfYear: function(weekYear,weekMonth,weekDay) { + // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm + var ms1d = 864e5, // milliseconds in a day + ms7d = 7 * ms1d; // milliseconds in a week + + return function() { // return a closure so constants get calculated only once + var DC3 = Date.UTC(weekYear, weekMonth, weekDay + 3) / ms1d, // an Absolute Day Number + AWN = Math.floor(DC3 / 7), // an Absolute Week Number + Wyr = new Date(AWN * ms7d).getUTCFullYear(); + + return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1; + }(); + }, + date: function () { + return module.helper.sanitiseDate($module.data(metadata.date)) || null; + }, + inputDate: function() { + return $input.val(); + }, + focusDate: function () { + return $module.data(metadata.focusDate) || null; + }, + startDate: function () { + var startModule = module.get.calendarModule(settings.startCalendar); + return (startModule ? startModule.get.date() : $module.data(metadata.startDate)) || null; + }, + endDate: function () { + var endModule = module.get.calendarModule(settings.endCalendar); + return (endModule ? endModule.get.date() : $module.data(metadata.endDate)) || null; + }, + minDate: function() { + return $module.data(metadata.minDate) || null; + }, + maxDate: function() { + return $module.data(metadata.maxDate) || null; + }, + monthOffset: function () { + return $module.data(metadata.monthOffset) || 0; + }, + mode: function () { + //only returns valid modes for the current settings + var mode = $module.data(metadata.mode) || settings.startMode; + return module.get.validatedMode(mode); + }, + validatedMode: function(mode){ + var validModes = module.get.validModes(); + if ($.inArray(mode, validModes) >= 0) { + return mode; + } + return settings.type === 'time' ? 'hour' : + settings.type === 'month' ? 'month' : + settings.type === 'year' ? 'year' : 'day'; + }, + type: function() { + return $module.data(metadata.type) || settings.type; + }, + validModes: function () { + var validModes = []; + if (settings.type !== 'time') { + if (!settings.disableYear || settings.type === 'year') { + validModes.push('year'); + } + if (!(settings.disableMonth || settings.type === 'year') || settings.type === 'month') { + validModes.push('month'); + } + if (settings.type.indexOf('date') >= 0) { + validModes.push('day'); + } + } + if (settings.type.indexOf('time') >= 0) { + validModes.push('hour'); + if (!settings.disableMinute) { + validModes.push('minute'); + } + } + return validModes; + }, + isTouch: function () { + try { + document.createEvent('TouchEvent'); + return true; + } + catch (e) { + return false; + } + }, + calendarModule: function (selector) { + if (!selector) { + return null; + } + if (!(selector instanceof $)) { + selector = $(selector).first(); + } + //assume range related calendars are using the same namespace + return selector.data(moduleNamespace); + } + }, + + set: { + date: function (date, updateInput, fireChange) { + updateInput = updateInput !== false; + fireChange = fireChange !== false; + date = module.helper.sanitiseDate(date); + date = module.helper.dateInRange(date); + + var mode = module.get.mode(); + var text = formatter.datetime(date, settings); + + if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) { + return false; + } + + module.set.focusDate(date); + + if (settings.isDisabled(date, mode)) { + return false; + } + + var endDate = module.get.endDate(); + if (!!endDate && !!date && date > endDate) { + //selected date is greater than end date in range, so clear end date + module.set.endDate(undefined); + } + module.set.dataKeyValue(metadata.date, date); + + if (updateInput && $input.length) { + $input.val(text); + } + + if (fireChange) { + settings.onChange.call(element, date, text, mode); + } + }, + startDate: function (date, refreshCalendar) { + date = module.helper.sanitiseDate(date); + var startModule = module.get.calendarModule(settings.startCalendar); + if (startModule) { + startModule.set.date(date); + } + module.set.dataKeyValue(metadata.startDate, date, refreshCalendar); + }, + endDate: function (date, refreshCalendar) { + date = module.helper.sanitiseDate(date); + var endModule = module.get.calendarModule(settings.endCalendar); + if (endModule) { + endModule.set.date(date); + } + module.set.dataKeyValue(metadata.endDate, date, refreshCalendar); + }, + focusDate: function (date, refreshCalendar, updateFocus, updateRange) { + date = module.helper.sanitiseDate(date); + date = module.helper.dateInRange(date); + var isDay = module.get.mode() === 'day'; + var oldFocusDate = module.get.focusDate(); + if (isDay && date && oldFocusDate) { + var yearDelta = date.getFullYear() - oldFocusDate.getFullYear(); + var monthDelta = yearDelta * 12 + date.getMonth() - oldFocusDate.getMonth(); + if (monthDelta) { + var monthOffset = module.get.monthOffset() - monthDelta; + module.set.monthOffset(monthOffset, false); + } + } + var changed = module.set.dataKeyValue(metadata.focusDate, date, !!date && refreshCalendar); + updateFocus = (updateFocus !== false && changed && refreshCalendar === false) || focusDateUsedForRange != updateRange; + focusDateUsedForRange = updateRange; + if (updateFocus) { + module.update.focus(updateRange); + } + }, + minDate: function (date) { + date = module.helper.sanitiseDate(date); + if (settings.maxDate !== null && settings.maxDate <= date) { + module.verbose('Unable to set minDate variable bigger that maxDate variable', date, settings.maxDate); + } else { + module.setting('minDate', date); + module.set.dataKeyValue(metadata.minDate, date); + } + }, + maxDate: function (date) { + date = module.helper.sanitiseDate(date); + if (settings.minDate !== null && settings.minDate >= date) { + module.verbose('Unable to set maxDate variable lower that minDate variable', date, settings.minDate); + } else { + module.setting('maxDate', date); + module.set.dataKeyValue(metadata.maxDate, date); + } + }, + monthOffset: function (monthOffset, refreshCalendar) { + var multiMonth = Math.max(settings.multiMonth, 1); + monthOffset = Math.max(1 - multiMonth, Math.min(0, monthOffset)); + module.set.dataKeyValue(metadata.monthOffset, monthOffset, refreshCalendar); + }, + mode: function (mode, refreshCalendar) { + module.set.dataKeyValue(metadata.mode, mode, refreshCalendar); + }, + dataKeyValue: function (key, value, refreshCalendar) { + var oldValue = $module.data(key); + var equal = oldValue === value || (oldValue <= value && oldValue >= value); //equality test for dates and string objects + if (value) { + $module.data(key, value); + } else { + $module.removeData(key); + } + refreshCalendar = refreshCalendar !== false && !equal; + if (refreshCalendar) { + module.refresh(); + } + return !equal; + } + }, + + selectDate: function (date, forceSet) { + module.verbose('New date selection', date); + var mode = module.get.mode(); + var complete = forceSet || mode === 'minute' || + (settings.disableMinute && mode === 'hour') || + (settings.type === 'date' && mode === 'day') || + (settings.type === 'month' && mode === 'month') || + (settings.type === 'year' && mode === 'year'); + if (complete) { + var canceled = module.set.date(date) === false; + if (!canceled) { + selectionComplete = true; + if(settings.closable) { + module.popup('hide'); + //if this is a range calendar, focus the container or input. This will open the popup from its event listeners. + var endModule = module.get.calendarModule(settings.endCalendar); + if (endModule) { + if (endModule.setting('on') !== 'focus') { + endModule.popup('show'); + } + endModule.focus(); + } + } + } + } else { + var newMode = mode === 'year' ? (!settings.disableMonth ? 'month' : 'day') : + mode === 'month' ? 'day' : mode === 'day' ? 'hour' : 'minute'; + module.set.mode(newMode); + if (mode === 'hour' || (mode === 'day' && module.get.date())) { + //the user has chosen enough to consider a valid date/time has been chosen + module.set.date(date, true, false); + } else { + module.set.focusDate(date); + } + } + }, + + changeDate: function (date) { + module.set.date(date); + }, + + clear: function () { + module.set.date(undefined); + }, + + popup: function () { + return $activator.popup.apply($activator, arguments); + }, + + focus: function () { + if ($input.length) { + $input.focus(); + } else { + $container.focus(); + } + }, + blur: function () { + if ($input.length) { + $input.blur(); + } else { + $container.blur(); + } + }, + + helper: { + isDisabled: function(date, mode) { + return (mode === 'day' || mode === 'month' || mode === 'year') && ((settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){ + if(typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date) { + return module.helper.dateEqual(date, d, mode); + } + if (d !== null && typeof d === 'object') { + if (d[metadata.year]) { + if (typeof d[metadata.year] === 'number') { + return date.getFullYear() == d[metadata.year]; + } else if (Array.isArray(d[metadata.year])) { + return d[metadata.year].indexOf(date.getFullYear()) > -1; + } + } else if (d[metadata.month]) { + if (typeof d[metadata.month] === 'number') { + return date.getMonth() == d[metadata.month]; + } else if (Array.isArray(d[metadata.month])) { + return d[metadata.month].indexOf(date.getMonth()) > -1; + } else if (d[metadata.month] instanceof Date) { + var sdate = module.helper.sanitiseDate(d[metadata.month]); + return (date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear()) + } + } else if (d[metadata.date] && mode === 'day') { + if (d[metadata.date] instanceof Date) { + return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode); + } else if (Array.isArray(d[metadata.date])) { + return d[metadata.date].some(function(idate) { + return module.helper.dateEqual(date, idate, mode); + }); + } + } + } + })); + }, + isEnabled: function(date, mode) { + if (mode === 'day') { + return settings.enabledDates.length === 0 || settings.enabledDates.some(function(d){ + if(typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date) { + return module.helper.dateEqual(date, d, mode); + } + if (d !== null && typeof d === 'object' && d[metadata.date]) { + return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode); + } + }); + } else { + return true; + } + }, + findDayAsObject: function(date, mode, dates) { + if (mode === 'day' || mode === 'month' || mode === 'year') { + var d; + for (var i = 0; i < dates.length; i++) { + d = dates[i]; + if(typeof d === 'string') { + d = module.helper.sanitiseDate(d); + } + if (d instanceof Date && module.helper.dateEqual(date, d, mode)) { + var dateObject = {}; + dateObject[metadata.date] = d; + return dateObject; + } + else if (d !== null && typeof d === 'object') { + if (d[metadata.year]) { + if (typeof d[metadata.year] === 'number' && date.getFullYear() == d[metadata.year]) { + return d; + } else if (Array.isArray(d[metadata.year])) { + if (d[metadata.year].indexOf(date.getFullYear()) > -1) { + return d; + } + } + } else if (d[metadata.month]) { + if (typeof d[metadata.month] === 'number' && date.getMonth() == d[metadata.month]) { + return d; + } else if (Array.isArray(d[metadata.month])) { + if (d[metadata.month].indexOf(date.getMonth()) > -1) { + return d; + } + } else if (d[metadata.month] instanceof Date) { + var sdate = module.helper.sanitiseDate(d[metadata.month]); + if ((date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())) { + return d; + } + } + } else if (d[metadata.date] && mode === 'day') { + if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode)) { + return d; + } else if (Array.isArray(d[metadata.date])) { + if(d[metadata.date].some(function(idate) { return module.helper.dateEqual(date, idate, mode); })) { + return d; + } + } + } + } + } + } + return null; + }, + sanitiseDate: function (date) { + if (!date) { + return undefined; + } + if (!(date instanceof Date)) { + date = parser.date('' + date, settings); + } + if (!date || date === null || isNaN(date.getTime())) { + return undefined; + } + return date; + }, + dateDiff: function (date1, date2, mode) { + mode = mode || 'day'; + var isTimeOnly = settings.type === 'time'; + var isYear = mode === 'year'; + var isYearOrMonth = isYear || mode === 'month'; + var isMinute = mode === 'minute'; + var isHourOrMinute = isMinute || mode === 'hour'; + //only care about a minute accuracy of settings.minTimeGap + date1 = new Date( + isTimeOnly ? 2000 : date1.getFullYear(), + isTimeOnly ? 0 : isYear ? 0 : date1.getMonth(), + isTimeOnly ? 1 : isYearOrMonth ? 1 : date1.getDate(), + !isHourOrMinute ? 0 : date1.getHours(), + !isMinute ? 0 : settings.minTimeGap * Math.floor(date1.getMinutes() / settings.minTimeGap)); + date2 = new Date( + isTimeOnly ? 2000 : date2.getFullYear(), + isTimeOnly ? 0 : isYear ? 0 : date2.getMonth(), + isTimeOnly ? 1 : isYearOrMonth ? 1 : date2.getDate(), + !isHourOrMinute ? 0 : date2.getHours(), + !isMinute ? 0 : settings.minTimeGap * Math.floor(date2.getMinutes() / settings.minTimeGap)); + return date2.getTime() - date1.getTime(); + }, + dateEqual: function (date1, date2, mode) { + return !!date1 && !!date2 && module.helper.dateDiff(date1, date2, mode) === 0; + }, + isDateInRange: function (date, mode, minDate, maxDate) { + if (!minDate && !maxDate) { + var startDate = module.get.startDate(); + minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate; + maxDate = settings.maxDate; + } + minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap)); + return !(!date || + (minDate && module.helper.dateDiff(date, minDate, mode) > 0) || + (maxDate && module.helper.dateDiff(maxDate, date, mode) > 0)); + }, + dateInRange: function (date, minDate, maxDate) { + if (!minDate && !maxDate) { + var startDate = module.get.startDate(); + minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate; + maxDate = settings.maxDate; + } + minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap)); + var isTimeOnly = settings.type === 'time'; + return !date ? date : + (minDate && module.helper.dateDiff(date, minDate, 'minute') > 0) ? + (isTimeOnly ? module.helper.mergeDateTime(date, minDate) : minDate) : + (maxDate && module.helper.dateDiff(maxDate, date, 'minute') > 0) ? + (isTimeOnly ? module.helper.mergeDateTime(date, maxDate) : maxDate) : + date; + }, + mergeDateTime: function (date, time) { + return (!date || !time) ? time : + new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes()); + }, + isTodayButton: function(element) { + return element.text() === settings.text.today; + } + }, + + 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 (Array.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.calendar.settings = { + + name : 'Calendar', + namespace : 'calendar', + + silent: false, + debug: false, + verbose: false, + performance: false, + + type : 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year' + firstDayOfWeek : 0, // day for first day column (0 = Sunday) + constantHeight : true, // add rows to shorter months to keep day calendar height consistent (6 rows) + today : false, // show a 'today/now' button at the bottom of the calendar + closable : true, // close the popup after selecting a date/time + monthFirst : true, // month before day when parsing/converting date from/to text + touchReadonly : true, // set input to readonly on touch devices + inline : false, // create the calendar inline instead of inside a popup + on : null, // when to show the popup (defaults to 'focus' for input, 'click' for others) + initialDate : null, // date to display initially when no date is selected (null = now) + startMode : false, // display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day') + minDate : null, // minimum date/time that can be selected, dates/times before are disabled + maxDate : null, // maximum date/time that can be selected, dates/times after are disabled + ampm : true, // show am/pm in time mode + disableYear : false, // disable year selection mode + disableMonth : false, // disable month selection mode + disableMinute : false, // disable minute selection mode + formatInput : true, // format the input text upon input blur and module creation + startCalendar : null, // jquery object or selector for another calendar that represents the start date of a date range + endCalendar : null, // jquery object or selector for another calendar that represents the end date of a date range + multiMonth : 1, // show multiple months when in 'day' mode + minTimeGap : 5, + showWeekNumbers : null, // show Number of Week at the very first column of a dayView + disabledDates : [], // specific day(s) which won't be selectable and contain additional information. + disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday) + enabledDates : [], // specific day(s) which will be selectable, all other days will be disabled + eventDates : [], // specific day(s) which will be shown in a different color and using tooltips + centuryBreak : 60, // starting short year until 99 where it will be assumed to belong to the last century + currentCentury : 2000, // century to be added to 2-digit years (00 to {centuryBreak}-1) + selectAdjacentDays : false, // The calendar can show dates from adjacent month. These adjacent month dates can also be made selectable. + // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden) + popupOptions: { + position: 'bottom left', + lastResort: 'bottom left', + prefer: 'opposite', + hideOnScroll: false + }, + + text: { + days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], + months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], + monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + today: 'Today', + now: 'Now', + am: 'AM', + pm: 'PM', + weekNo: 'Week' + }, + + formatter: { + header: function (date, mode, settings) { + return mode === 'year' ? settings.formatter.yearHeader(date, settings) : + mode === 'month' ? settings.formatter.monthHeader(date, settings) : + mode === 'day' ? settings.formatter.dayHeader(date, settings) : + mode === 'hour' ? settings.formatter.hourHeader(date, settings) : + settings.formatter.minuteHeader(date, settings); + }, + yearHeader: function (date, settings) { + var decadeYear = Math.ceil(date.getFullYear() / 10) * 10; + return (decadeYear - 9) + ' - ' + (decadeYear + 2); + }, + monthHeader: function (date, settings) { + return date.getFullYear(); + }, + dayHeader: function (date, settings) { + var month = settings.text.months[date.getMonth()]; + var year = date.getFullYear(); + return month + ' ' + year; + }, + hourHeader: function (date, settings) { + return settings.formatter.date(date, settings); + }, + minuteHeader: function (date, settings) { + return settings.formatter.date(date, settings); + }, + dayColumnHeader: function (day, settings) { + return settings.text.days[day]; + }, + datetime: function (date, settings) { + if (!date) { + return ''; + } + var day = settings.type === 'time' ? '' : settings.formatter.date(date, settings); + var time = settings.type.indexOf('time') < 0 ? '' : settings.formatter.time(date, settings, false); + var separator = settings.type === 'datetime' ? ' ' : ''; + return day + separator + time; + }, + date: function (date, settings) { + if (!date) { + return ''; + } + var day = date.getDate(); + var month = settings.text.months[date.getMonth()]; + var year = date.getFullYear(); + return settings.type === 'year' ? year : + settings.type === 'month' ? month + ' ' + year : + (settings.monthFirst ? month + ' ' + day : day + ' ' + month) + ', ' + year; + }, + time: function (date, settings, forCalendar) { + if (!date) { + return ''; + } + var hour = date.getHours(); + var minute = date.getMinutes(); + var ampm = ''; + if (settings.ampm) { + ampm = ' ' + (hour < 12 ? settings.text.am : settings.text.pm); + hour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour; + } + return hour + ':' + (minute < 10 ? '0' : '') + minute + ampm; + }, + today: function (settings) { + return settings.type === 'date' ? settings.text.today : settings.text.now; + }, + cell: function (cell, date, cellOptions) { + } + }, + + parser: { + date: function (text, settings) { + if (text instanceof Date) { + return text; + } + if (!text) { + return null; + } + text = String(text).trim(); + if (text.length === 0) { + return null; + } + if(text.match(/^[0-9]{4}[\/\-\.][0-9]{2}[\/\-\.][0-9]{2}$/)){ + text = text.replace(/[\/\-\.]/g,'/') + ' 00:00:00'; + } + // Reverse date and month in some cases + text = settings.monthFirst || !text.match(/^[0-9]{2}[\/\-\.]/) ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1'); + var textDate = new Date(text); + var numberOnly = text.match(/^[0-9]+$/) !== null; + if(!numberOnly && !isNaN(textDate.getDate())) { + return textDate; + } + text = text.toLowerCase(); + + var i, j, k; + var minute = -1, hour = -1, day = -1, month = -1, year = -1; + var isAm = undefined; + + var isTimeOnly = settings.type === 'time'; + var isDateOnly = settings.type.indexOf('time') < 0; + + var words = text.split(settings.regExp.dateWords), word; + var numbers = text.split(settings.regExp.dateNumbers), number; + + var parts; + var monthString; + + if (!isDateOnly) { + //am/pm + isAm = $.inArray(settings.text.am.toLowerCase(), words) >= 0 ? true : + $.inArray(settings.text.pm.toLowerCase(), words) >= 0 ? false : undefined; + + //time with ':' + for (i = 0; i < numbers.length; i++) { + number = numbers[i]; + if (number.indexOf(':') >= 0) { + if (hour < 0 || minute < 0) { + parts = number.split(':'); + for (k = 0; k < Math.min(2, parts.length); k++) { + j = parseInt(parts[k]); + if (isNaN(j)) { + j = 0; + } + if (k === 0) { + hour = j % 24; + } else { + minute = j % 60; + } + } + } + numbers.splice(i, 1); + } + } + } + + if (!isTimeOnly) { + //textual month + for (i = 0; i < words.length; i++) { + word = words[i]; + if (word.length <= 0) { + continue; + } + for (j = 0; j < settings.text.months.length; j++) { + monthString = settings.text.months[j]; + monthString = monthString.substring(0, word.length).toLowerCase(); + if (monthString === word) { + month = j + 1; + break; + } + } + if (month >= 0) { + break; + } + } + + //year > settings.centuryBreak + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i]); + if (isNaN(j)) { + continue; + } + if (j >= settings.centuryBreak && i === numbers.length-1) { + if (j <= 99) { + j += settings.currentCentury - 100; + } + year = j; + numbers.splice(i, 1); + break; + } + } + + //numeric month + if (month < 0) { + for (i = 0; i < numbers.length; i++) { + k = i > 1 || settings.monthFirst ? i : i === 1 ? 0 : 1; + j = parseInt(numbers[k]); + if (isNaN(j)) { + continue; + } + if (1 <= j && j <= 12) { + month = j; + numbers.splice(k, 1); + break; + } + } + } + + //day + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i]); + if (isNaN(j)) { + continue; + } + if (1 <= j && j <= 31) { + day = j; + numbers.splice(i, 1); + break; + } + } + + //year <= settings.centuryBreak + if (year < 0) { + for (i = numbers.length - 1; i >= 0; i--) { + j = parseInt(numbers[i]); + if (isNaN(j)) { + continue; + } + if (j <= 99) { + j += settings.currentCentury; + } + year = j; + numbers.splice(i, 1); + break; + } + } + } + + if (!isDateOnly) { + //hour + if (hour < 0) { + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i]); + if (isNaN(j)) { + continue; + } + if (0 <= j && j <= 23) { + hour = j; + numbers.splice(i, 1); + break; + } + } + } + + //minute + if (minute < 0) { + for (i = 0; i < numbers.length; i++) { + j = parseInt(numbers[i]); + if (isNaN(j)) { + continue; + } + if (0 <= j && j <= 59) { + minute = j; + numbers.splice(i, 1); + break; + } + } + } + } + + if (minute < 0 && hour < 0 && day < 0 && month < 0 && year < 0) { + return null; + } + + if (minute < 0) { + minute = 0; + } + if (hour < 0) { + hour = 0; + } + if (day < 0) { + day = 1; + } + if (month < 0) { + month = 1; + } + if (year < 0) { + year = new Date().getFullYear(); + } + + if (isAm !== undefined) { + if (isAm) { + if (hour === 12) { + hour = 0; + } + } else if (hour < 12) { + hour += 12; + } + } + + var date = new Date(year, month - 1, day, hour, minute); + if (date.getMonth() !== month - 1 || date.getFullYear() !== year) { + //month or year don't match up, switch to last day of the month + date = new Date(year, month, 0, hour, minute); + } + return isNaN(date.getTime()) ? null : date; + } + }, + + // callback before date is changed, return false to cancel the change + onBeforeChange: function (date, text, mode) { + return true; + }, + + // callback when date changes + onChange: function (date, text, mode) { + }, + + // callback before show animation, return false to prevent show + onShow: function () { + }, + + // callback after show animation + onVisible: function () { + }, + + // callback before hide animation, return false to prevent hide + onHide: function () { + }, + + // callback after hide animation + onHidden: function () { + }, + + // callback before item is selected, return false to prevent selection + onSelect: function (date, mode) { + }, + + // is the given date disabled? + isDisabled: function (date, mode) { + return false; + }, + + selector: { + popup: '.ui.popup', + input: 'input', + activator: 'input', + append: '.inline.field,.inline.fields' + }, + + regExp: { + dateWords: /[^A-Za-z\u00C0-\u024F]+/g, + dateNumbers: /[^\d:]+/g + }, + + error: { + popup: 'UI Popup, a required component is not included in this page', + method: 'The method you called is not defined.' + }, + + className: { + calendar: 'calendar', + active: 'active', + popup: 'ui popup', + grid: 'ui equal width grid', + column: 'column', + table: 'ui celled center aligned unstackable table', + inverted: 'inverted', + prev: 'prev link', + next: 'next link', + prevIcon: 'chevron left icon', + nextIcon: 'chevron right icon', + link: 'link', + cell: 'link', + disabledCell: 'disabled', + weekCell: 'disabled', + adjacentCell: 'adjacent', + activeCell: 'active', + rangeCell: 'range', + focusCell: 'focus', + todayCell: 'today', + today: 'today link', + disabled: 'disabled' + }, + + metadata: { + date: 'date', + focusDate: 'focusDate', + startDate: 'startDate', + endDate: 'endDate', + minDate: 'minDate', + maxDate: 'maxDate', + mode: 'mode', + type: 'type', + monthOffset: 'monthOffset', + message: 'message', + class: 'class', + inverted: 'inverted', + variation: 'variation', + position: 'position', + month: 'month', + year: 'year' + }, + + eventClass: 'blue' +}; + +})(jQuery, window, document); diff --git a/semantic/src/definitions/modules/calendar.less b/semantic/src/definitions/modules/calendar.less new file mode 100644 index 0000000..aaa7f11 --- /dev/null +++ b/semantic/src/definitions/modules/calendar.less @@ -0,0 +1,195 @@ +/*! + * # Fomantic-UI - Calendar + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'calendar'; + +@import (multiple) '../../theme.config'; + +/******************************* + Popup +*******************************/ + +.ui.calendar .ui.popup { + max-width: none; + padding: 0; + border: none; + user-select: none; +} + +/******************************* + Calendar +*******************************/ + +.ui.calendar .calendar:focus { + outline: 0; +} + +/******************************* + Grid +*******************************/ + +.ui.calendar .ui.popup .ui.grid { + display: block; + white-space: nowrap; +} + +.ui.calendar .ui.popup .ui.grid > .column { + width: auto; +} + +/******************************* + Table +*******************************/ + +.ui.calendar .ui.table.year, +.ui.calendar .ui.table.month, +.ui.calendar .ui.table.minute { + min-width: 15em; +} + +.ui.calendar .ui.table.day { + min-width: 18em; +} + +.ui.calendar .ui.table.day.andweek { + min-width: 22em; +} + +.ui.calendar .ui.table.hour { + min-width: 20em; +} + +.ui.calendar .ui.table tr th, +.ui.calendar .ui.table tr td { + padding: 0.5em; + white-space: nowrap; +} + +.ui.calendar .ui.table tr th { + border-left: none; +} + +.ui.calendar .ui.table tr th i.icon { + margin: 0; +} + +.ui.calendar .ui.table tr:first-child th { + position: relative; + padding-left: 0; + padding-right: 0; +} + +.ui.calendar .ui.table.day tr:first-child th { + border: none; +} + +.ui.calendar .ui.table.day tr:nth-child(2) th { + padding-top: 0.2em; + padding-bottom: 0.3em; +} + +.ui.calendar .ui.table tr td { + padding-left: 0.1em; + padding-right: 0.1em; +} + +.ui.calendar .ui.table tr .link { + cursor: pointer; +} + +.ui.calendar .ui.table tr .prev.link { + width: 14.28571429%; + position: absolute; + left: 0; +} + +.ui.calendar .ui.table tr .next.link { + width: 14.28571429%; + position: absolute; + right: 0; +} + +.ui.ui.calendar .ui.table tr .disabled { + pointer-events: auto; + cursor: default; + color: @disabledTextColor; +} + +.ui.calendar .ui.table tr .adjacent:not(.disabled) { + color: @adjacentTextColor; + background: @adjacentBackground; +} + +/*-------------- + States +---------------*/ + +.ui.calendar .ui.table tr td.today { + font-weight: @todayFontWeight; +} + +.ui.calendar .ui.table tr td.range { + background: @rangeBackground; + color: @rangeTextColor; + box-shadow: @rangeBoxShadow; +} + +.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus, +.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus { + box-shadow: @focusBoxShadow; +} + +& when (@variationCalendarInverted) { + .ui.inverted.calendar .ui.table.inverted tr td.range { + background: @rangeInvertedBackground; + color: @rangeInvertedTextColor; + box-shadow: @rangeInvertedBoxShadow; + } + + .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus, + .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus { + box-shadow: @focusInvertedBoxShadow; + } + .ui.inverted.calendar .ui.inverted.table tr .disabled { + color: @invertedDisabledTextColor; + } + + .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) { + color: @adjacentInvertedTextColor; + background: @adjacentInvertedBackground; + } +} + +/******************************* + States +*******************************/ + +& when (@variationCalendarDisabled) { + /*-------------------- + Disabled + ---------------------*/ + + .ui.disabled.calendar { + opacity: @disabledOpacity; + } + + .ui.disabled.calendar > .input, + .ui.disabled.calendar .ui.table tr .link { + pointer-events: none; + } +} + + +.loadUIOverrides(); diff --git a/semantic/src/definitions/modules/checkbox.js b/semantic/src/definitions/modules/checkbox.js new file mode 100644 index 0000000..c5540ba --- /dev/null +++ b/semantic/src/definitions/modules/checkbox.js @@ -0,0 +1,876 @@ +/*! + * # Fomantic-UI - Checkbox + * http://github.com/fomantic/Fomantic-UI/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +$.isFunction = $.isFunction || function(obj) { + return typeof obj === "function" && typeof obj.nodeType !== "number"; +}; + +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); + } + }, + + preventDefaultOnInputTarget: function() { + if(typeof event !== 'undefined' && event !== null && $(event.target).is(selector.input)) { + module.verbose('Preventing default check action after manual check action'); + event.preventDefault(); + } + }, + + event: { + change: function(event) { + if( !module.should.ignoreCallbacks() ) { + settings.onChange.call(input); + } + }, + 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, + left : 37, + up : 38, + right : 39, + down : 40 + } + ; + + var r = module.get.radios(), + rIndex = r.index($module), + rLen = r.length, + checkIndex = false; + + if(key == keyCode.left || key == keyCode.up) { + checkIndex = (rIndex === 0 ? rLen : rIndex) - 1; + } else if(key == keyCode.right || key == keyCode.down) { + checkIndex = rIndex === rLen-1 ? 0 : rIndex+1; + } + + if (!module.should.ignoreCallbacks() && checkIndex !== false) { + if(settings.beforeUnchecked.apply(input)===false) { + module.verbose('Option not allowed to be unchecked, cancelling key navigation'); + return false; + } + if (settings.beforeChecked.apply($(r[checkIndex]).children(selector.input)[0])===false) { + module.verbose('Next option should not allow check, cancelling key navigation'); + return false; + } + } + + 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 && settings.enableEnterKey)) ) { + 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); + module.trigger.change(); + } + module.preventDefaultOnInputTarget(); + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + module.trigger.change(); + } + module.preventDefaultOnInputTarget(); + }, + + 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); + module.trigger.change(); + } + }, + + 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); + module.trigger.change(); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + if( !module.should.ignoreCallbacks() ) { + settings.onEnable.call(input); + // preserve legacy callbacks + settings.onEnabled.call(input); + module.trigger.change(); + } + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + if( !module.should.ignoreCallbacks() ) { + settings.onDisable.call(input); + // preserve legacy callbacks + settings.onDisabled.call(input); + module.trigger.change(); + } + }, + + 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.is.initialLoad() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(!module.should.ignoreCallbacks() && 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.is.initialLoad() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(!module.should.ignoreCallbacks() && settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.is.initialLoad() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(!module.should.ignoreCallbacks() && settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.is.initialLoad() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(!module.should.ignoreCallbacks() && settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + 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) + ; + }, + 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) + ; + }, + 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) + ; + }, + 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') + ; + }, + 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) + ; + }, + 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 + inputElement = $input[0] + ; + if(inputElement) { + var events = document.createEvent('HTMLEvents'); + 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 = $('