You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@senssoft.apache.org by ar...@apache.org on 2016/10/21 16:12:33 UTC
[40/48] incubator-senssoft-tap git commit: Cherry pick front end
bundle
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/collections/menu.less
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/collections/menu.less b/semantic/src/definitions/collections/menu.less
new file mode 100755
index 0000000..3266135
--- /dev/null
+++ b/semantic/src/definitions/collections/menu.less
@@ -0,0 +1,1972 @@
+/*
+ * # Semantic - Menu
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2015 Contributor
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'menu';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Standard
+*******************************/
+
+/*--------------
+ Menu
+---------------*/
+
+.ui.menu {
+ display: flex;
+ margin: @margin;
+ font-family: @fontFamily;
+ background: @background;
+ font-weight: @fontWeight;
+ border: @border;
+ box-shadow: @boxShadow;
+ border-radius: @borderRadius;
+ min-height: @minHeight;
+}
+
+.ui.menu:after {
+ content: '';
+ display: block;
+ height: 0px;
+ clear: both;
+ visibility: hidden;
+}
+
+.ui.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.menu:last-child {
+ margin-bottom: 0rem;
+}
+
+
+/*--------------
+ Sub-Menu
+---------------*/
+
+.ui.menu .menu {
+ margin: 0em;
+}
+
+.ui.menu:not(.vertical) > .menu {
+ display: flex;
+}
+
+/*--------------
+ Item
+---------------*/
+
+.ui.menu:not(.vertical) .item {
+ display: flex;
+ align-items: center;
+}
+
+.ui.menu .item {
+ position: relative;
+ vertical-align: middle;
+ line-height: 1;
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
+ flex: 0 0 auto;
+ user-select: none;
+
+ background: @itemBackground;
+ padding: @itemVerticalPadding @itemHorizontalPadding;
+ text-transform: @itemTextTransform;
+ color: @itemTextColor;
+ font-weight: @itemFontWeight;
+ transition: @itemTransition;
+}
+
+.ui.menu > .item:first-child {
+ border-radius: @borderRadius 0px 0px @borderRadius;
+}
+
+/* Border */
+.ui.menu .item:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ right: 0px;
+ height: 100%;
+
+ width: @dividerSize;
+ background: @dividerBackground;
+}
+
+/*--------------
+ Text Content
+---------------*/
+
+.ui.menu .text.item > *,
+.ui.menu .item > a:not(.ui),
+.ui.menu .item > p:only-child {
+ user-select: text;
+ line-height: @textLineHeight;
+}
+.ui.menu .item > p:first-child {
+ margin-top: 0;
+}
+.ui.menu .item > p:last-child {
+ margin-bottom: 0;
+}
+
+/*--------------
+ Icons
+---------------*/
+
+.ui.menu .item > i.icon {
+ opacity: @iconOpacity;
+ float: @iconFloat;
+ margin: @iconMargin;
+}
+
+/*--------------
+ Button
+---------------*/
+
+.ui.menu:not(.vertical) .item > .button {
+ position: relative;
+ top: @buttonOffset;
+ margin: @buttonMargin;
+ padding-bottom: @buttonVerticalPadding;
+ padding-top: @buttonVerticalPadding;
+ font-size: @buttonSize;
+}
+
+/*----------------
+ Grid / Container
+-----------------*/
+
+.ui.menu > .grid,
+.ui.menu > .container {
+ display: flex;
+ align-items: inherit;
+ flex-direction: inherit;
+}
+
+/*--------------
+ Inputs
+---------------*/
+
+.ui.menu .item > .input {
+ width: 100%;
+}
+.ui.menu:not(.vertical) .item > .input {
+ position: relative;
+ top: @inputOffset;
+ margin: @inputVerticalMargin 0em;
+}
+.ui.menu .item > .input input {
+ font-size: @inputSize;
+ padding-top: @inputVerticalPadding;
+ padding-bottom: @inputVerticalPadding;
+}
+
+
+/*--------------
+ Header
+---------------*/
+
+.ui.menu .header.item,
+.ui.vertical.menu .header.item {
+ margin: 0em;
+ background: @headerBackground;
+ text-transform: @headerTextTransform;
+ font-weight: @headerWeight;
+}
+
+.ui.vertical.menu .item > .header:not(.ui) {
+ margin: @verticalHeaderMargin;
+ font-size: @verticalHeaderFontSize;
+ font-weight: @verticalHeaderFontWeight;
+}
+
+/*--------------
+ Popup
+---------------*/
+
+.ui.menu .ui.popup {
+ display: none;
+}
+.ui.menu .ui.visible.popup {
+ display: block;
+}
+
+
+/*--------------
+ Dropdowns
+---------------*/
+
+
+/* Dropdown Icon */
+.ui.menu .item > i.dropdown.icon {
+ padding: 0em;
+ float: @dropdownIconFloat;
+ margin: 0em 0em 0em @dropdownIconDistance;
+}
+
+/* Menu */
+.ui.menu .dropdown.item .menu {
+ left: 0px;
+ min-width: ~"calc(100% - 1px)";
+ border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+ background: @dropdownBackground;
+ margin: @dropdownMenuDistance 0px 0px;
+ box-shadow: @dropdownMenuBoxShadow;
+ flex-direction: column !important;
+}
+
+
+/* Menu Items */
+.ui.menu .ui.dropdown .menu > .item {
+ margin: 0;
+ text-align: left;
+ font-size: @dropdownItemFontSize !important;
+ padding: @dropdownItemPadding !important;
+ background: @dropdownItemBackground !important;
+ color: @dropdownItemColor !important;
+ text-transform: @dropdownItemTextTransform !important;
+ font-weight: @dropdownItemFontWeight !important;
+ box-shadow: @dropdownItemBoxShadow !important;
+ transition: @dropdownItemTransition !important;
+}
+.ui.menu .ui.dropdown .menu > .item:hover {
+ background: @dropdownHoveredItemBackground !important;
+ color: @dropdownHoveredItemColor !important;
+}
+.ui.menu .ui.dropdown .menu > .selected.item {
+ background: @dropdownSelectedItemBackground !important;
+ color: @dropdownSelectedItemColor !important;
+}
+.ui.menu .ui.dropdown .menu > .active.item {
+ background: @dropdownActiveItemBackground !important;
+ font-weight: @dropdownActiveItemFontWeight !important;
+ color: @dropdownActiveItemColor !important;
+}
+
+.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
+ display: block;
+}
+.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
+ display: inline-block;
+ font-size: @dropdownItemIconFontSize !important;
+ float: @dropdownItemIconFloat;
+ margin: @dropdownItemIconMargin;
+}
+
+
+/* Secondary */
+.ui.secondary.menu .dropdown.item > .menu,
+.ui.text.menu .dropdown.item > .menu {
+ border-radius: @dropdownMenuBorderRadius;
+ margin-top: @secondaryDropdownMenuDistance;
+}
+
+/* Pointing */
+.ui.menu .pointing.dropdown.item .menu {
+ margin-top: @pointingDropdownMenuDistance;
+}
+
+/* Inverted */
+.ui.inverted.menu .search.dropdown.item > .search,
+.ui.inverted.menu .search.dropdown.item > .text {
+ color: @invertedSelectionDropdownColor;
+}
+
+/* Vertical */
+.ui.vertical.menu .dropdown.item > .icon {
+ float: right;
+ content: "\f0da";
+ margin-left: 1em;
+}
+.ui.vertical.menu .dropdown.item .menu {
+ top: 0% !important;
+ left: 100%;
+ min-width: 0;
+ margin: 0em 0em 0em @dropdownMenuDistance;
+ box-shadow: @dropdownVerticalMenuBoxShadow;
+ border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
+}
+.ui.vertical.menu .active.dropdown.item {
+ border-top-right-radius: 0em;
+ border-bottom-right-radius: 0em;
+}
+.ui.vertical.menu .dropdown.active.item {
+ box-shadow: none;
+}
+
+/* Evenly Divided */
+.ui.item.menu .dropdown .menu .item {
+ width: 100%;
+}
+
+/*--------------
+ Labels
+---------------*/
+
+.ui.menu .item > .label {
+ background: @labelBackground;
+ color: @labelTextColor;
+ margin-left: @labelTextMargin;
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+.ui.vertical.menu .item > .label {
+ background: @labelBackground;
+ color: @labelTextColor;
+ margin-top: @labelOffset;
+ margin-bottom: @labelOffset;
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+.ui.menu .item > .floating.label {
+ padding: @labelVerticalPadding @labelHorizontalPadding;
+}
+
+/*--------------
+ Images
+---------------*/
+
+.ui.menu .item > img:not(.ui) {
+ display: inline-block;
+ vertical-align: middle;
+ margin: @imageMargin;
+ width: @imageWidth;
+}
+.ui.vertical.menu .item > img:not(.ui):only-child {
+ display: block;
+ max-width: 100%;
+ width: @verticalImageWidth;
+}
+
+/*******************************
+ Coupling
+*******************************/
+
+/*--------------
+ Sidebar
+---------------*/
+
+/* Show vertical dividers below last */
+
+.ui.vertical.sidebar.menu > .item:first-child:before {
+ display: block !important;
+}
+.ui.vertical.sidebar.menu > .item::before {
+ top: auto;
+ bottom: 0px;
+}
+
+/*--------------
+ Container
+---------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.menu > .ui.container {
+ width: 100% !important;
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+ }
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
+ border-left: @dividerSize solid @dividerBackground;
+ }
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Hover
+---------------*/
+
+
+.ui.link.menu .item:hover,
+.ui.menu .dropdown.item:hover,
+.ui.menu .link.item:hover,
+.ui.menu a.item:hover {
+ cursor: pointer;
+ background: @hoverItemBackground;
+ color: @hoverItemTextColor;
+}
+
+
+/*--------------
+ Pressed
+---------------*/
+
+.ui.link.menu .item:active,
+.ui.menu .link.item:active,
+.ui.menu a.item:active {
+ background: @pressedItemBackground;
+ color: @pressedItemTextColor;
+}
+
+
+/*--------------
+ Active
+---------------*/
+
+.ui.menu .active.item {
+ background: @activeItemBackground;
+ color: @activeItemTextColor;
+ font-weight: @activeItemFontWeight;
+ box-shadow: @activeItemBoxShadow;
+}
+.ui.menu .active.item > i.icon {
+ opacity: @activeIconOpacity;
+}
+
+/*--------------
+ Active Hover
+---------------*/
+
+.ui.menu .active.item:hover,
+.ui.vertical.menu .active.item:hover {
+ background-color: @activeHoverItemBackground;
+ color: @activeHoverItemColor;
+}
+
+
+/*--------------
+ Disabled
+---------------*/
+
+.ui.menu .item.disabled,
+.ui.menu .item.disabled:hover {
+ cursor: default;
+ background-color: transparent !important;
+ color: @disabledTextColor;
+}
+
+
+/*******************************
+ Types
+*******************************/
+
+/*------------------
+Floated Menu / Item
+-------------------*/
+
+/* Left Floated */
+.ui.menu:not(.vertical) .left.item,
+.ui.menu:not(.vertical) .left.menu {
+ display: flex;
+ margin-right: auto !important;
+}
+/* Right Floated */
+.ui.menu:not(.vertical) .right.item,
+.ui.menu:not(.vertical) .right.menu {
+ display: flex;
+ margin-left: auto !important;
+}
+
+/* Swapped Borders */
+.ui.menu .right.item::before,
+.ui.menu .right.menu > .item::before {
+ right: auto;
+ left: 0;
+}
+
+
+/*--------------
+ Vertical
+---------------*/
+
+.ui.vertical.menu {
+ display: block;
+ flex-direction: column;
+ background: @verticalBackground;
+ box-shadow: @verticalBoxShadow;
+}
+
+/*--- Item ---*/
+.ui.vertical.menu .item {
+ display: block;
+ background: @verticalItemBackground;
+ border-top: none;
+ border-right: none;
+}
+.ui.vertical.menu > .item:first-child {
+ border-radius: @borderRadius @borderRadius 0px 0px;
+}
+.ui.vertical.menu > .item:last-child {
+ border-radius: 0px 0px @borderRadius @borderRadius;
+}
+
+/*--- Label ---*/
+.ui.vertical.menu .item > .label {
+ float: right;
+ text-align: center;
+}
+
+/*--- Icon ---*/
+.ui.vertical.menu .item > i.icon {
+ width: @iconWidth;
+ float: @verticalIconFloat;
+ margin: @verticalIconMargin;
+}
+.ui.vertical.menu .item > .label + i.icon {
+ float: @labelAndIconFloat;
+ margin: @labelAndIconMargin;
+}
+
+
+/*--- Border ---*/
+.ui.vertical.menu .item:before {
+ position: absolute;
+ content: '';
+ top: 0%;
+ left: 0px;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+}
+
+.ui.vertical.menu .item:first-child:before {
+ display: none !important;
+}
+
+
+/*--- Sub Menu ---*/
+.ui.vertical.menu .item > .menu {
+ margin: @subMenuMargin;
+}
+.ui.vertical.menu .menu .item {
+ background: none;
+ padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
+ font-size: @subMenuFontSize;
+ color: @subMenuTextColor;
+}
+.ui.vertical.menu .item .menu a.item:hover,
+.ui.vertical.menu .item .menu .link.item:hover {
+ color: @darkTextColor;
+}
+.ui.vertical.menu .menu .item:before {
+ display: none;
+}
+
+/* Vertical Active */
+.ui.vertical.menu .active.item {
+ background: @activeItemBackground;
+ border-radius: 0em;
+ box-shadow: @verticalActiveBoxShadow;
+}
+.ui.vertical.menu > .active.item:first-child {
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.vertical.menu > .active.item:last-child {
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui.vertical.menu > .active.item:only-child {
+ border-radius: @borderRadius;
+}
+.ui.vertical.menu .active.item .menu .active.item {
+ border-left: none;
+}
+.ui.vertical.menu .item .menu .active.item {
+ background-color: @subMenuActiveBackground;
+ font-weight: @subMenuActiveFontWeight;
+ color: @subMenuActiveTextColor;
+}
+
+
+/*--------------
+ Tabular
+---------------*/
+
+.ui.tabular.menu {
+ border-radius: 0em;
+ box-shadow: none !important;
+ border: none;
+ background: @tabularBackground;
+ border-bottom: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.tabular.fluid.menu {
+ width: @tabularFluidWidth !important;
+}
+.ui.tabular.menu .item {
+ background: transparent;
+ border-bottom: none;
+
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ padding: @tabularVerticalPadding @tabularHorizontalPadding;
+ color: @tabularTextColor;
+}
+.ui.tabular.menu .item:before {
+ display: none;
+}
+
+/* Hover */
+.ui.tabular.menu .item:hover {
+ background-color: transparent;
+ color: @tabularHoveredTextColor;
+}
+
+/* Active */
+.ui.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-top-width: @tabularBorderWidth;
+ border-color: @tabularBorderColor;
+ font-weight: @tabularActiveWeight;
+ margin-bottom: -@tabularBorderWidth;
+ box-shadow: @tabularActiveBoxShadow;
+ border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;
+}
+
+/* Coupling with segment for attachment */
+.ui.tabular.menu + .attached:not(.top).segment,
+.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+ border-top: none;
+ margin-left: 0px;
+ margin-top: 0px;
+ margin-right: 0px;
+ width: 100%;
+}
+.top.attached.segment + .ui.bottom.tabular.menu {
+ position: relative;
+ width: @tabularFluidWidth;
+ left: -@tabularFluidOffset;
+}
+
+/* Bottom Vertical Tabular */
+.ui.bottom.tabular.menu {
+ background: @tabularBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-top: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.bottom.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: none;
+}
+.ui.bottom.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: -@tabularBorderWidth 0px 0px 0px;
+ border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;
+}
+
+/* Vertical Tabular (Left) */
+.ui.vertical.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.tabular.menu .item {
+ background: none;
+ border-left: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-right: none;
+}
+.ui.vertical.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0px -@tabularBorderWidth 0px 0px;
+ border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
+}
+
+/* Vertical Right Tabular */
+.ui.vertical.right.tabular.menu {
+ background: @tabularVerticalBackground;
+ border-radius: 0em;
+ box-shadow: none !important;
+ border-bottom: none;
+ border-right: none;
+ border-left: @tabularBorderWidth solid @tabularBorderColor;
+}
+.ui.vertical.right.tabular.menu .item {
+ background: none;
+ border-right: @tabularBorderWidth solid transparent;
+ border-bottom: @tabularBorderWidth solid transparent;
+ border-top: @tabularBorderWidth solid transparent;
+ border-left: none;
+}
+.ui.vertical.right.tabular.menu .active.item {
+ background: @tabularActiveBackground;
+ color: @tabularActiveColor;
+ border-color: @tabularBorderColor;
+ margin: 0px 0px 0px -@tabularBorderWidth;
+ border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;
+}
+
+/* Dropdown */
+.ui.tabular.menu .active.dropdown.item {
+ margin-bottom: 0px;
+ border-left: @tabularBorderWidth solid transparent;
+ border-right: @tabularBorderWidth solid transparent;
+ border-top: @tabularOppositeBorderWidth solid transparent;
+ border-bottom: none;
+}
+
+
+
+/*--------------
+ Pagination
+---------------*/
+
+.ui.pagination.menu {
+ margin: 0em;
+ display: inline-flex;
+ vertical-align: middle;
+}
+.ui.pagination.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.compact.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.pagination.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.pagination.menu .item {
+ min-width: @paginationMinWidth;
+ text-align: center;
+}
+.ui.pagination.menu .icon.item i.icon {
+ vertical-align: top;
+}
+
+/* Active */
+.ui.pagination.menu .active.item {
+ border-top: none;
+ padding-top: @itemVerticalPadding;
+ background-color: @paginationActiveBackground;
+ color: @paginationActiveTextColor;
+ box-shadow: none;
+}
+
+/*--------------
+ Secondary
+---------------*/
+
+.ui.secondary.menu {
+ background: @secondaryBackground;
+ margin-left: -@secondaryItemSpacing;
+ margin-right: -@secondaryItemSpacing;
+ border-radius: 0em;
+ border: none;
+ box-shadow: none;
+}
+
+/* Item */
+.ui.secondary.menu .item {
+ align-self: center;
+ box-shadow: none;
+ border: none;
+ padding: @secondaryItemPadding;
+ margin: @secondaryItemMargin;
+ background: @secondaryItemBackground;
+ transition: @secondaryItemTransition;
+ border-radius: @secondaryItemBorderRadius;
+}
+
+/* No Divider */
+.ui.secondary.menu .item:before {
+ display: none !important;
+}
+
+/* Header */
+.ui.secondary.menu .header.item {
+ border-radius: 0em;
+ border-right: @secondaryHeaderBorder;
+ background: @secondaryHeaderBackground;
+}
+
+/* Image */
+.ui.secondary.menu .item > img:not(.ui) {
+ margin: 0em;
+}
+
+/* Hover */
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu .link.item:hover,
+.ui.secondary.menu a.item:hover {
+ background: @secondaryHoverItemBackground;
+ color: @secondaryHoverItemColor;
+}
+
+/* Active */
+.ui.secondary.menu .active.item {
+ box-shadow: none;
+ background: @secondaryActiveItemBackground;
+ color: @secondaryActiveItemColor;
+ border-radius: @secondaryItemBorderRadius;
+}
+
+/* Active Hover */
+.ui.secondary.menu .active.item:hover {
+ box-shadow: none;
+ background: @secondaryActiveHoverItemBackground;
+ color: @secondaryActiveHoverItemColor;
+}
+
+
+/* Inverted */
+.ui.secondary.inverted.menu .link.item,
+.ui.secondary.inverted.menu a.item {
+ color: @secondaryInvertedColor !important;
+}
+.ui.secondary.inverted.menu .dropdown.item:hover,
+.ui.secondary.inverted.menu .link.item:hover,
+.ui.secondary.inverted.menu a.item:hover {
+ background: @secondaryInvertedHoverBackground;
+ color: @secondaryInvertedHoverColor !important;
+}
+.ui.secondary.inverted.menu .active.item {
+ background: @secondaryInvertedActiveBackground;
+ color: @secondaryInvertedActiveColor !important;
+}
+
+/* Fix item margins */
+.ui.secondary.item.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+}
+.ui.secondary.item.menu .item:last-child {
+ margin-right: 0em;
+}
+.ui.secondary.attached.menu {
+ box-shadow: none;
+}
+
+/* Sub Menu */
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+ margin: @secondaryMenuSubMenuMargin;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+ margin: @secondaryMenuSubMenuItemMargin;
+ padding: @secondaryMenuSubMenuItemPadding;
+}
+
+
+/*---------------------
+ Secondary Vertical
+-----------------------*/
+
+.ui.secondary.vertical.menu > .item {
+ border: none;
+ margin: @secondaryVerticalItemMargin;
+ border-radius: @secondaryVerticalItemBorderRadius !important;
+}
+.ui.secondary.vertical.menu > .header.item {
+ border-radius: 0em;
+}
+
+/* Sub Menu */
+.ui.vertical.secondary.menu .item > .menu .item {
+ background-color: transparent;
+}
+
+/* Inverted */
+.ui.secondary.inverted.menu {
+ background-color: transparent;
+}
+
+/*---------------------
+ Secondary Pointing
+-----------------------*/
+
+.ui.secondary.pointing.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+ border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
+}
+
+.ui.secondary.pointing.menu .item {
+ border-bottom-color: transparent;
+ border-bottom-style: solid;
+ border-radius: 0em;
+ align-self: flex-end;
+
+ margin: 0em 0em -@secondaryPointingBorderWidth;
+ padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+ border-bottom-width: @secondaryPointingBorderWidth;
+ transition: @secondaryItemTransition;
+}
+
+/* Item Types */
+.ui.secondary.pointing.menu .header.item {
+ color: @secondaryPointingHeaderColor !important;
+}
+.ui.secondary.pointing.menu .text.item {
+ box-shadow: none !important;
+}
+.ui.secondary.pointing.menu .item:after {
+ display: none;
+}
+
+/* Hover */
+.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu .link.item:hover,
+.ui.secondary.pointing.menu a.item:hover {
+ background-color: transparent;
+ color: @secondaryPointingHoverTextColor;
+}
+
+/* Pressed */
+.ui.secondary.pointing.menu .dropdown.item:active,
+.ui.secondary.pointing.menu .link.item:active,
+.ui.secondary.pointing.menu a.item:active {
+ background-color: transparent;
+ border-color: @secondaryPointingBorderColor;
+}
+
+/* Active */
+.ui.secondary.pointing.menu .active.item {
+ background-color: transparent;
+ box-shadow: none;
+ border-color: @secondaryPointingActiveBorderColor;
+ font-weight: @secondaryPointingActiveFontWeight;
+ color: @secondaryPointingActiveTextColor;
+}
+
+/* Active Hover */
+.ui.secondary.pointing.menu .active.item:hover {
+ border-color: @secondaryPointingActiveHoverBorderColor;
+ color: @secondaryPointingActiveHoverTextColor;
+}
+
+/* Active Dropdown */
+.ui.secondary.pointing.menu .active.dropdown.item {
+ border-color: @secondaryPointingActiveDropdownBorderColor;
+}
+
+/* Vertical Pointing */
+.ui.secondary.vertical.pointing.menu {
+ border-bottom-width: 0px;
+ border-right-width: @secondaryPointingBorderWidth;
+ border-right-style: solid;
+ border-right-color: @secondaryPointingBorderColor;
+}
+.ui.secondary.vertical.pointing.menu .item {
+ border-bottom: none;
+ border-right-style: solid;
+ border-right-color: transparent;
+ border-radius: 0em !important;
+ margin: @secondaryVerticalPointingItemMargin;
+ border-right-width: @secondaryPointingBorderWidth;
+}
+
+/* Vertical Active */
+.ui.secondary.vertical.pointing.menu .active.item {
+ border-color: @secondaryPointingActiveBorderColor;
+}
+
+/* Inverted */
+.ui.secondary.inverted.pointing.menu {
+ border-color: @secondaryPointingInvertedBorderColor;
+}
+
+.ui.secondary.inverted.pointing.menu {
+ border-width: @secondaryPointingBorderWidth;
+ border-color: @secondaryPointingBorderColor;
+}
+.ui.secondary.inverted.pointing.menu .item {
+ color: @secondaryPointingInvertedItemTextColor;
+}
+.ui.secondary.inverted.pointing.menu .header.item {
+ color: @secondaryPointingInvertedItemHeaderColor !important;
+}
+
+/* Hover */
+.ui.secondary.inverted.pointing.menu .link.item:hover,
+.ui.secondary.inverted.pointing.menu a.item:hover {
+ color: @secondaryPointingInvertedItemHoverTextColor;
+}
+
+
+/* Active */
+.ui.secondary.inverted.pointing.menu .active.item {
+ border-color: @secondaryPointingInvertedActiveBorderColor;
+ color: @secondaryPointingInvertedActiveColor;
+}
+
+/*--------------
+ Text Menu
+---------------*/
+
+.ui.text.menu {
+ background: none transparent;
+ border-radius: 0px;
+ box-shadow: none;
+ border: none;
+
+ margin: @textMenuMargin;
+}
+.ui.text.menu .item {
+ border-radius: 0px;
+ box-shadow: none;
+ align-self: center;
+ margin: @textMenuItemMargin;
+ padding: @textMenuItemPadding;
+ font-weight: @textMenuItemFontWeight;
+ color: @textMenuItemColor;
+ transition: @textMenuItemTransition;
+}
+
+/* Border */
+.ui.text.menu .item:before,
+.ui.text.menu .menu .item:before {
+ display: none !important;
+}
+
+/* Header */
+.ui.text.menu .header.item {
+ background-color: transparent;
+ opacity: 1;
+ color: @textMenuHeaderColor;
+ font-size: @textMenuHeaderSize;
+ text-transform: @textMenuHeaderTextTransform;
+ font-weight: @textMenuHeaderFontWeight;
+}
+
+/* Image */
+.ui.text.menu .item > img:not(.ui) {
+ margin: 0em;
+}
+
+/*--- fluid text ---*/
+.ui.text.item.menu .item {
+ margin: 0em;
+}
+
+/*--- vertical text ---*/
+.ui.vertical.text.menu {
+ margin: @textVerticalMenuMargin;
+}
+.ui.vertical.text.menu:first-child {
+ margin-top: 0rem;
+}
+.ui.vertical.text.menu:last-child {
+ margin-bottom: 0rem;
+}
+.ui.vertical.text.menu .item {
+ margin: @textVerticalMenuItemMargin;
+ padding-left: 0em;
+ padding-right: 0em;
+}
+.ui.vertical.text.menu .item > i.icon {
+ float: @textVerticalMenuIconFloat;
+ margin: @iconMargin;
+}
+.ui.vertical.text.menu .header.item {
+ margin: @textVerticalMenuHeaderMargin;
+}
+
+/* Vertical Sub Menu */
+.ui.vertical.text.menu .item:not(.dropdown) > .menu {
+ margin: @textMenuSubMenuMargin;
+}
+.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
+ margin: @textMenuSubMenuItemMargin;
+ padding: @textMenuSubMenuItemPadding;
+}
+
+/*--- hover ---*/
+.ui.text.menu .item:hover {
+ opacity: 1;
+ background-color: transparent;
+}
+
+/*--- active ---*/
+.ui.text.menu .active.item {
+ background-color: transparent;
+ border: none;
+ box-shadow: none;
+ font-weight: @textMenuActiveItemFontWeight;
+ color: @textMenuActiveItemColor;
+}
+
+/*--- active hover ---*/
+.ui.text.menu .active.item:hover {
+ background-color: transparent;
+}
+
+/* Disable Bariations */
+.ui.text.pointing.menu .active.item:after {
+ box-shadow: none;
+}
+.ui.text.attached.menu {
+ box-shadow: none;
+}
+
+/* Inverted */
+.ui.inverted.text.menu,
+.ui.inverted.text.menu .item,
+.ui.inverted.text.menu .item:hover,
+.ui.inverted.text.menu .active.item {
+ background-color: transparent !important;
+}
+
+/* Fluid */
+.ui.fluid.text.menu {
+ margin-left: 0em;
+ margin-right: 0em;
+}
+
+/*--------------
+ Icon Only
+---------------*/
+
+/* Vertical Menu */
+.ui.vertical.icon.menu {
+ display: inline-block;
+ width: auto;
+}
+
+/* Item */
+.ui.icon.menu .item {
+ height: auto;
+ text-align: @iconMenuTextAlign;
+ color: @iconMenuItemColor;
+}
+
+/* Icon */
+.ui.icon.menu .item > .icon:not(.dropdown) {
+ margin: 0;
+ opacity: 1;
+}
+
+/* Icon Gylph */
+.ui.icon.menu .icon:before {
+ opacity: 1;
+}
+
+/* (x) Item Icon */
+.ui.menu .icon.item > .icon {
+ width: auto;
+ margin: 0em auto;
+}
+
+/* Vertical Icon */
+.ui.vertical.icon.menu .item > .icon:not(.dropdown) {
+ display: block;
+ opacity: 1;
+ margin: 0em auto;
+ float: none;
+}
+
+/* Inverted */
+.ui.inverted.icon.menu .item {
+ color: @iconMenuInvertedItemColor;
+}
+
+/*--------------
+ Labeled Icon
+---------------*/
+
+/* Menu */
+.ui.labeled.icon.menu {
+ text-align: center;
+}
+
+/* Item */
+.ui.labeled.icon.menu .item {
+ min-width: @labeledIconMinWidth;
+ flex-direction: column;
+}
+
+/* Icon */
+.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
+ height: 1em;
+ display: block;
+ font-size: @labeledIconSize !important;
+ margin: 0em auto @labeledIconTextMargin !important;
+}
+
+/* Fluid */
+.ui.fluid.labeled.icon.menu > .item {
+ min-width: 0em;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Stackable
+---------------*/
+
+@media only screen and (max-width: @largestMobileScreen) {
+ .ui.stackable.menu {
+ flex-direction: column;
+ }
+ .ui.stackable.menu .item {
+ width: 100% !important;
+ }
+ .ui.stackable.menu .item:before {
+ position: absolute;
+ content: '';
+ top: auto;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ height: @dividerSize;
+ background: @verticalDividerBackground;
+ }
+
+ .ui.stackable.menu .left.menu,
+ .ui.stackable.menu .left.item {
+ margin-right: 0 !important;
+ }
+ .ui.stackable.menu .right.menu,
+ .ui.stackable.menu .right.item {
+ margin-left: 0 !important;
+ }
+}
+
+/*--------------
+ Colors
+---------------*/
+
+/*--- Standard Colors ---*/
+.ui.menu .red.active.item,
+.ui.red.menu .active.item {
+ border-color: @red !important;
+ color: @red !important;
+}
+.ui.menu .orange.active.item,
+.ui.orange.menu .active.item {
+ border-color: @orange !important;
+ color: @orange !important;
+}
+.ui.menu .yellow.active.item,
+.ui.yellow.menu .active.item {
+ border-color: @yellow !important;
+ color: @yellow !important;
+}
+.ui.menu .olive.active.item,
+.ui.olive.menu .active.item {
+ border-color: @olive !important;
+ color: @olive !important;
+}
+.ui.menu .green.active.item,
+.ui.green.menu .active.item {
+ border-color: @green !important;
+ color: @green !important;
+}
+.ui.menu .teal.active.item,
+.ui.teal.menu .active.item {
+ border-color: @teal !important;
+ color: @teal !important;
+}
+.ui.menu .blue.active.item,
+.ui.blue.menu .active.item {
+ border-color: @blue !important;
+ color: @blue !important;
+}
+.ui.menu .violet.active.item,
+.ui.violet.menu .active.item {
+ border-color: @violet !important;
+ color: @violet !important;
+}
+.ui.menu .purple.active.item,
+.ui.purple.menu .active.item {
+ border-color: @purple !important;
+ color: @purple !important;
+}
+.ui.menu .pink.active.item,
+.ui.pink.menu .active.item {
+ border-color: @pink !important;
+ color: @pink !important;
+}
+.ui.menu .brown.active.item,
+.ui.brown.menu .active.item {
+ border-color: @brown !important;
+ color: @brown !important;
+}
+.ui.menu .grey.active.item,
+.ui.grey.menu .active.item {
+ border-color: @grey !important;
+ color: @grey !important;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+.ui.inverted.menu {
+ border: @invertedBorder;
+ background: @invertedBackground;
+ box-shadow: @invertedBoxShadow;
+}
+
+/* Menu Item */
+.ui.inverted.menu .item,
+.ui.inverted.menu .item > a:not(.ui) {
+ background: @invertedItemBackground;
+ color: @invertedItemTextColor;
+}
+.ui.inverted.menu .item.menu {
+ background: @invertedSubMenuBackground;
+}
+
+/*--- Border ---*/
+.ui.inverted.menu .item:before {
+ background: @invertedDividerBackground;
+}
+.ui.vertical.inverted.menu .item:before {
+ background: @invertedVerticalDividerBackground;
+}
+
+/* Sub Menu */
+.ui.vertical.inverted.menu .menu .item,
+.ui.vertical.inverted.menu .menu .item a:not(.ui) {
+ color: @invertedSubMenuColor;
+}
+
+/* Header */
+.ui.inverted.menu .header.item {
+ margin: 0em;
+ background: @invertedHeaderBackground;
+ box-shadow: none;
+}
+
+/* Disabled */
+.ui.inverted.menu .item.disabled,
+.ui.inverted.menu .item.disabled:hover {
+ color: @invertedDisabledTextColor;
+}
+
+/*--- Hover ---*/
+.ui.link.inverted.menu .item:hover,
+.ui.inverted.menu .dropdown.item:hover,
+.ui.inverted.menu .link.item:hover,
+.ui.inverted.menu a.item:hover {
+ background: @invertedHoverBackground;
+ color: @invertedHoverColor;
+}
+.ui.vertical.inverted.menu .item .menu a.item:hover,
+.ui.vertical.inverted.menu .item .menu .link.item:hover {
+ background: @invertedSubMenuBackground;
+ color: @invertedSubMenuHoverColor;
+}
+
+/*--- Pressed ---*/
+.ui.inverted.menu a.item:active,
+.ui.inverted.menu .link.item:active{
+ background: @invertedMenuPressedBackground;
+ color: @invertedMenuPressedColor;
+}
+
+/*--- Active ---*/
+.ui.inverted.menu .active.item {
+ background: @invertedActiveBackground;
+ color: @invertedActiveColor !important;
+}
+.ui.inverted.vertical.menu .item .menu .active.item {
+ background: @invertedSubMenuActiveBackground;
+ color: @invertedSubMenuActiveColor;
+}
+.ui.inverted.pointing.menu .active.item:after {
+ background: @invertedArrowActiveColor !important;
+ margin: 0em !important;
+ box-shadow: none !important;
+ border: none !important;
+}
+
+/*--- Active Hover ---*/
+.ui.inverted.menu .active.item:hover {
+ background: @invertedActiveHoverBackground;
+ color: @invertedActiveHoverColor !important;
+}
+.ui.inverted.pointing.menu .active.item:hover:after {
+ background: @invertedArrowActiveHoverColor !important;
+}
+
+
+/*--------------
+ Floated
+---------------*/
+
+.ui.floated.menu {
+ float: left;
+ margin: 0rem @floatedDistance 0rem 0rem;
+}
+.ui.floated.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.right.floated.menu {
+ float: right;
+ margin: 0rem 0rem 0rem @floatedDistance;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+/* Red */
+.ui.inverted.menu .red.active.item,
+.ui.inverted.red.menu {
+ background-color: @red;
+}
+.ui.inverted.red.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.red.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Orange */
+.ui.inverted.menu .orange.active.item,
+.ui.inverted.orange.menu {
+ background-color: @orange;
+}
+.ui.inverted.orange.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.orange.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Yellow */
+.ui.inverted.menu .yellow.active.item,
+.ui.inverted.yellow.menu {
+ background-color: @yellow;
+}
+.ui.inverted.yellow.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.yellow.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Olive */
+.ui.inverted.menu .olive.active.item,
+.ui.inverted.olive.menu {
+ background-color: @olive;
+}
+.ui.inverted.olive.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.olive.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Green */
+.ui.inverted.menu .green.active.item,
+.ui.inverted.green.menu {
+ background-color: @green;
+}
+.ui.inverted.green.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.green.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Teal */
+.ui.inverted.menu .teal.active.item,
+.ui.inverted.teal.menu {
+ background-color: @teal;
+}
+.ui.inverted.teal.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.teal.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Blue */
+.ui.inverted.menu .blue.active.item,
+.ui.inverted.blue.menu {
+ background-color: @blue;
+}
+.ui.inverted.blue.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.blue.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Violet */
+.ui.inverted.menu .violet.active.item,
+.ui.inverted.violet.menu {
+ background-color: @violet;
+}
+.ui.inverted.violet.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.violet.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Purple */
+.ui.inverted.menu .purple.active.item,
+.ui.inverted.purple.menu {
+ background-color: @purple;
+}
+.ui.inverted.purple.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.purple.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Pink */
+.ui.inverted.menu .pink.active.item,
+.ui.inverted.pink.menu {
+ background-color: @pink;
+}
+.ui.inverted.pink.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.pink.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Brown */
+.ui.inverted.menu .brown.active.item,
+.ui.inverted.brown.menu {
+ background-color: @brown;
+}
+.ui.inverted.brown.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.brown.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+/* Grey */
+.ui.inverted.menu .grey.active.item,
+.ui.inverted.grey.menu {
+ background-color: @grey;
+}
+.ui.inverted.grey.menu .item:before {
+ background-color: @invertedColoredDividerBackground;
+}
+.ui.inverted.grey.menu .active.item {
+ background-color: @invertedColoredActiveBackground !important;
+}
+
+
+/*--------------
+ Fitted
+---------------*/
+
+.ui.fitted.menu .item,
+.ui.fitted.menu .item .menu .item,
+.ui.menu .fitted.item {
+ padding: 0em;
+}
+.ui.horizontally.fitted.menu .item,
+.ui.horizontally.fitted.menu .item .menu .item,
+.ui.menu .horizontally.fitted.item {
+ padding-top: @itemVerticalPadding;
+ padding-bottom: @itemVerticalPadding;
+}
+.ui.vertically.fitted.menu .item,
+.ui.vertically.fitted.menu .item .menu .item,
+.ui.menu .vertically.fitted.item {
+ padding-left: @itemHorizontalPadding;
+ padding-right: @itemHorizontalPadding;
+}
+
+/*--------------
+ Borderless
+---------------*/
+
+.ui.borderless.menu .item:before,
+.ui.borderless.menu .item .menu .item:before,
+.ui.menu .borderless.item:before {
+ background: none !important;
+}
+
+/*-------------------
+ Compact
+--------------------*/
+
+.ui.compact.menu {
+ display: inline-flex;
+ margin: 0em;
+ vertical-align: middle;
+}
+.ui.compact.vertical.menu {
+ display: inline-block;
+}
+.ui.compact.menu .item:last-child {
+ border-radius: 0em @borderRadius @borderRadius 0em;
+}
+.ui.compact.menu .item:last-child:before {
+ display: none;
+}
+.ui.compact.vertical.menu {
+ width: auto !important;
+}
+.ui.compact.vertical.menu .item:last-child::before {
+ display: block;
+}
+
+/*-------------------
+ Fluid
+--------------------*/
+
+.ui.menu.fluid,
+.ui.vertical.menu.fluid {
+ width: 100% !important;
+}
+
+
+/*-------------------
+ Evenly Sized
+--------------------*/
+
+.ui.item.menu,
+.ui.item.menu .item {
+ width: 100%;
+ padding-left: 0em !important;
+ padding-right: 0em !important;
+ margin-left: 0em !important;
+ margin-right: 0em !important;
+ text-align: center;
+ justify-content: center;
+}
+
+.ui.item.menu .item:last-child:before {
+ display: none;
+}
+
+.ui.menu.two.item .item {
+ width: 50%;
+}
+.ui.menu.three.item .item {
+ width: 33.333%;
+}
+.ui.menu.four.item .item {
+ width: 25%;
+}
+.ui.menu.five.item .item {
+ width: 20%;
+}
+.ui.menu.six.item .item {
+ width: 16.666%;
+}
+.ui.menu.seven.item .item {
+ width: 14.285%;
+}
+.ui.menu.eight.item .item {
+ width: 12.500%;
+}
+.ui.menu.nine.item .item {
+ width: 11.11%;
+}
+.ui.menu.ten.item .item {
+ width: 10.0%;
+}
+.ui.menu.eleven.item .item {
+ width: 9.09%;
+}
+.ui.menu.twelve.item .item {
+ width: 8.333%;
+}
+
+/*--------------
+ Fixed
+---------------*/
+
+.ui.menu.fixed {
+ position: fixed;
+ z-index: 101;
+ margin: 0em;
+ width: 100%;
+}
+.ui.menu.fixed,
+.ui.menu.fixed .item:first-child,
+.ui.menu.fixed .item:last-child {
+ border-radius: 0px !important;
+}
+
+.ui.fixed.menu,
+.ui[class*="top fixed"].menu {
+ top: 0px;
+ left: 0px;
+ right: auto;
+ bottom: auto;
+}
+.ui[class*="top fixed"].menu {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+}
+.ui[class*="right fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-right: none;
+ top: 0px;
+ right: 0px;
+ left: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+}
+.ui[class*="bottom fixed"].menu {
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
+ bottom: 0px;
+ left: 0px;
+ top: auto;
+ right: auto;
+}
+.ui[class*="left fixed"].menu {
+ border-top: none;
+ border-bottom: none;
+ border-left: none;
+ top: 0px;
+ left: 0px;
+ right: auto;
+ bottom: auto;
+ width: auto;
+ height: 100%;
+}
+
+/* Coupling with Grid */
+.ui.fixed.menu + .ui.grid {
+ padding-top: @fixedPrecedingGridMargin;
+}
+
+
+/*-------------------
+ Pointing
+--------------------*/
+
+.ui.pointing.menu .item:after {
+ visibility: hidden;
+ position: absolute;
+ content: '';
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ background: none;
+
+ margin: (@arrowBorderWidth / 2) 0em 0em;
+ width: @arrowSize;
+ height: @arrowSize;
+
+ border: none;
+ border-bottom: @arrowBorder;
+ border-right: @arrowBorder;
+
+ z-index: @arrowZIndex;
+ transition: @arrowTransition;
+}
+.ui.vertical.pointing.menu .item:after {
+ position: absolute;
+ top: 50%;
+ right: 0%;
+ bottom: auto;
+ left: auto;
+
+ transform: translateX(50%) translateY(-50%) rotate(45deg);
+ margin: 0em -(@arrowBorderWidth / 2) 0em 0em;
+
+ border: none;
+ border-top: @arrowBorder;
+ border-right: @arrowBorder;
+}
+
+/* Active */
+.ui.pointing.menu .active.item:after {
+ visibility: visible;
+}
+.ui.pointing.menu .active.dropdown.item:after {
+ visibility: hidden;
+}
+
+/* Don't double up pointers */
+.ui.pointing.menu .dropdown.active.item:after,
+.ui.pointing.menu .active.item .menu .active.item:after {
+ display: none;
+}
+
+/* Colors */
+.ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowHoverColor;
+}
+.ui.pointing.menu .active.item:after {
+ background-color: @arrowActiveColor;
+}
+.ui.pointing.menu .active.item:hover:after {
+ background-color: @arrowActiveHoverColor;
+}
+
+.ui.vertical.pointing.menu .active.item:hover:after {
+ background-color: @arrowVerticalHoverColor;
+}
+.ui.vertical.pointing.menu .active.item:after {
+ background-color: @arrowVerticalActiveColor;
+}
+.ui.vertical.pointing.menu .menu .active.item:after {
+ background-color: @arrowVerticalSubMenuColor;
+}
+
+
+
+/*--------------
+ Attached
+---------------*/
+
+/* Middle */
+.ui.attached.menu {
+ top: 0px;
+ bottom: 0px;
+ border-radius: 0px;
+ margin: 0em @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+}
+.ui.attached + .ui.attached.menu:not(.top) {
+ border-top: none;
+}
+
+/* Top */
+.ui[class*="top attached"].menu {
+ bottom: 0px;
+ margin-bottom: 0em;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.menu[class*="top attached"]:first-child {
+ margin-top: 0em;
+}
+
+/* Bottom */
+.ui[class*="bottom attached"].menu {
+ bottom: 0px;
+ margin-top: 0em;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui[class*="bottom attached"].menu:last-child {
+ margin-bottom: 0em;
+}
+
+/* Attached Menu Item */
+.ui.top.attached.menu > .item:first-child {
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui.bottom.attached.menu > .item:first-child {
+ border-radius: 0em 0em 0em @borderRadius;
+}
+
+/* Tabular Attached */
+.ui.attached.menu:not(.tabular) {
+ border: @attachedBorder;
+}
+.ui.attached.inverted.menu {
+ border: none;
+}
+.ui.attached.tabular.menu {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+/* Mini */
+.ui.mini.menu {
+ font-size: @mini;
+}
+.ui.mini.vertical.menu {
+ width: @miniWidth;
+}
+
+/* Tiny */
+.ui.tiny.menu {
+ font-size: @tiny;
+}
+.ui.tiny.vertical.menu {
+ width: @tinyWidth;
+}
+
+/* Small */
+.ui.small.menu {
+ font-size: @small;
+}
+.ui.small.vertical.menu {
+ width: @smallWidth;
+}
+
+/* Medium */
+.ui.menu {
+ font-size: @medium;
+}
+.ui.vertical.menu {
+ width: @mediumWidth;
+}
+
+/* Large */
+.ui.large.menu {
+ font-size: @large;
+}
+.ui.large.vertical.menu {
+ width: @largeWidth;
+}
+
+/* Huge */
+.ui.huge.menu {
+ font-size: @huge;
+}
+.ui.huge.vertical.menu {
+ width: @hugeWidth;
+}
+
+/* Big */
+.ui.big.menu {
+ font-size: @big;
+}
+.ui.big.vertical.menu {
+ width: @bigWidth;
+}
+
+/* Massive */
+.ui.massive.menu {
+ font-size: @massive;
+}
+.ui.massive.vertical.menu {
+ width: @massiveWidth;
+}
+
+.loadUIOverrides();
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/collections/message.less
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/collections/message.less b/semantic/src/definitions/collections/message.less
new file mode 100755
index 0000000..5de262f
--- /dev/null
+++ b/semantic/src/definitions/collections/message.less
@@ -0,0 +1,478 @@
+/*!
+ * # Semantic UI - Message
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'message';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Message
+*******************************/
+
+.ui.message {
+ position: relative;
+ min-height: 1em;
+ margin: @verticalMargin 0em;
+ background: @background;
+ padding: @verticalPadding @horizontalPadding;
+ line-height: @lineHeight;
+ color: @textColor;
+ transition: @transition;
+ border-radius: @borderRadius;
+ box-shadow: @boxShadow;
+}
+
+.ui.message:first-child {
+ margin-top: 0em;
+}
+.ui.message:last-child {
+ margin-bottom: 0em;
+}
+
+
+/*--------------
+ Content
+---------------*/
+
+/* Header */
+.ui.message .header {
+ display: @headerDisplay;
+ font-family: @headerFont;
+ font-weight: @headerFontWeight;
+ margin: @headerMargin;
+}
+
+/* Default font size */
+.ui.message .header:not(.ui) {
+ font-size: @headerFontSize;
+}
+
+/* Paragraph */
+.ui.message p {
+ opacity: @messageTextOpacity;
+ margin: @messageParagraphMargin 0em;
+}
+.ui.message p:first-child {
+ margin-top: 0em;
+}
+.ui.message p:last-child {
+ margin-bottom: 0em;
+}
+.ui.message .header + p {
+ margin-top: @headerParagraphDistance;
+}
+
+/* List */
+.ui.message .list:not(.ui) {
+ text-align: left;
+ padding: 0em;
+ opacity: @listOpacity;
+ list-style-position: @listStylePosition;
+ margin: @listMargin 0em 0em;
+}
+.ui.message .list:not(.ui):first-child {
+ margin-top: 0em;
+}
+.ui.message .list:not(.ui):last-child {
+ margin-bottom: 0em;
+}
+.ui.message .list:not(.ui) li {
+ position: relative;
+ list-style-type: none;
+ margin: 0em 0em @listItemMargin @listItemIndent;
+ padding: 0em;
+}
+.ui.message .list:not(.ui) li:before {
+ position: absolute;
+ content: '\u2022';
+ left: -1em;
+ height: 100%;
+ vertical-align: baseline;
+}
+.ui.message .list:not(.ui) li:last-child {
+ margin-bottom: 0em;
+}
+
+
+/* Icon */
+.ui.message > .icon {
+ margin-right: @iconDistance;
+}
+
+/* Close Icon */
+.ui.message > .close.icon {
+ cursor: pointer;
+ position: absolute;
+ margin: 0em;
+ top: @closeTopDistance;
+ right: @closeRightDistance;
+ opacity: @closeOpacity;
+ transition: @closeTransition;
+}
+.ui.message > .close.icon:hover {
+ opacity: 1;
+}
+
+/* First / Last Element */
+.ui.message > :first-child {
+ margin-top: 0em;
+}
+.ui.message > :last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Coupling
+*******************************/
+
+.ui.dropdown .menu > .message {
+ margin: 0px -@borderWidth;
+}
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Visible
+---------------*/
+
+.ui.visible.visible.visible.visible.message {
+ display: block;
+}
+
+.ui.icon.visible.visible.visible.visible.message {
+ display: flex;
+}
+
+/*--------------
+ Hidden
+---------------*/
+
+.ui.hidden.hidden.hidden.hidden.message {
+ display: none;
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Compact
+---------------*/
+
+.ui.compact.message {
+ display: inline-block;
+}
+
+
+/*--------------
+ Attached
+---------------*/
+
+.ui.attached.message {
+ margin-bottom: @attachedYOffset;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+ box-shadow: @attachedBoxShadow;
+ margin-left: @attachedXOffset;
+ margin-right: @attachedXOffset;
+}
+.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
+ margin-top: @attachedYOffset;
+ border-radius: 0em;
+}
+.ui.bottom.attached.message {
+ margin-top: @attachedYOffset;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+ box-shadow: @attachedBottomBoxShadow;
+}
+.ui.bottom.attached.message:not(:last-child) {
+ margin-bottom: @verticalMargin;
+}
+.ui.attached.icon.message {
+ width: auto;
+}
+
+
+/*--------------
+ Icon
+---------------*/
+
+.ui.icon.message {
+ display: flex;
+ width: 100%;
+ align-items: center;
+}
+.ui.icon.message > .icon:not(.close) {
+ display: block;
+ flex: 0 0 auto;
+ width: auto;
+ line-height: 1;
+ vertical-align: @iconVerticalAlign;
+ font-size: @iconSize;
+ opacity: @iconOpacity;
+}
+.ui.icon.message > .content {
+ display: block;
+ flex: 1 1 auto;
+ vertical-align: @iconVerticalAlign;
+}
+
+
+.ui.icon.message .icon:not(.close) + .content {
+ padding-left: @iconContentDistance;
+}
+.ui.icon.message .circular.icon {
+ width: 1em;
+}
+
+/*--------------
+ Floating
+---------------*/
+
+.ui.floating.message {
+ box-shadow: @floatingBoxShadow;
+}
+
+
+/*--------------
+ Colors
+---------------*/
+
+.ui.black.message {
+ background-color: @black;
+ color: @invertedTextColor;
+}
+
+/*--------------
+ Types
+---------------*/
+
+/* Positive */
+.ui.positive.message {
+ background-color: @positiveBackgroundColor;
+ color: @positiveTextColor;
+}
+.ui.positive.message,
+.ui.attached.positive.message {
+ box-shadow: @positiveBoxShadow;
+}
+.ui.positive.message .header {
+ color: @positiveHeaderColor;
+}
+
+/* Negative */
+.ui.negative.message {
+ background-color: @negativeBackgroundColor;
+ color: @negativeTextColor;
+}
+.ui.negative.message,
+.ui.attached.negative.message {
+ box-shadow: @negativeBoxShadow;
+}
+.ui.negative.message .header {
+ color: @negativeHeaderColor;
+}
+
+/* Info */
+.ui.info.message {
+ background-color: @infoBackgroundColor;
+ color: @infoTextColor;
+}
+.ui.info.message,
+.ui.attached.info.message {
+ box-shadow: @infoBoxShadow;
+}
+.ui.info.message .header {
+ color: @infoHeaderColor;
+}
+
+/* Warning */
+.ui.warning.message {
+ background-color: @warningBackgroundColor;
+ color: @warningTextColor;
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+ box-shadow: @warningBoxShadow;
+}
+.ui.warning.message .header {
+ color: @warningHeaderColor;
+}
+
+/* Error */
+.ui.error.message {
+ background-color: @errorBackgroundColor;
+ color: @errorTextColor;
+}
+.ui.error.message,
+.ui.attached.error.message {
+ box-shadow: @errorBoxShadow;
+}
+.ui.error.message .header {
+ color: @errorHeaderColor;
+}
+
+/* Success */
+.ui.success.message {
+ background-color: @successBackgroundColor;
+ color: @successTextColor;
+}
+.ui.success.message,
+.ui.attached.success.message {
+ box-shadow: @successBoxShadow;
+}
+.ui.success.message .header {
+ color: @successHeaderColor;
+}
+
+
+/* Colors */
+.ui.inverted.message,
+.ui.black.message {
+ background-color: @black;
+ color: @invertedTextColor;
+}
+
+.ui.red.message {
+ background-color: @redBackground;
+ color: @redTextColor;
+ box-shadow: @redBoxShadow;
+}
+.ui.red.message .header {
+ color: @redHeaderColor;
+}
+
+.ui.orange.message {
+ background-color: @orangeBackground;
+ color: @orangeTextColor;
+ box-shadow: @orangeBoxShadow;
+}
+.ui.orange.message .header {
+ color: @orangeHeaderColor;
+}
+
+.ui.yellow.message {
+ background-color: @yellowBackground;
+ color: @yellowTextColor;
+ box-shadow: @yellowBoxShadow;
+}
+.ui.yellow.message .header {
+ color: @yellowHeaderColor;
+}
+
+.ui.olive.message {
+ background-color: @oliveBackground;
+ color: @oliveTextColor;
+ box-shadow: @oliveBoxShadow;
+}
+.ui.olive.message .header {
+ color: @oliveHeaderColor;
+}
+
+.ui.green.message {
+ background-color: @greenBackground;
+ color: @greenTextColor;
+ box-shadow: @greenBoxShadow;
+}
+.ui.green.message .header {
+ color: @greenHeaderColor;
+}
+
+.ui.teal.message {
+ background-color: @tealBackground;
+ color: @tealTextColor;
+ box-shadow: @tealBoxShadow;
+}
+.ui.teal.message .header {
+ color: @tealHeaderColor;
+}
+
+.ui.blue.message {
+ background-color: @blueBackground;
+ color: @blueTextColor;
+ box-shadow: @blueBoxShadow;
+}
+.ui.blue.message .header {
+ color: @blueHeaderColor;
+}
+
+.ui.violet.message {
+ background-color: @violetBackground;
+ color: @violetTextColor;
+ box-shadow: @violetBoxShadow;
+}
+.ui.violet.message .header {
+ color: @violetHeaderColor;
+}
+
+.ui.purple.message {
+ background-color: @purpleBackground;
+ color: @purpleTextColor;
+ box-shadow: @purpleBoxShadow;
+}
+.ui.purple.message .header {
+ color: @purpleHeaderColor;
+}
+
+.ui.pink.message {
+ background-color: @pinkBackground;
+ color: @pinkTextColor;
+ box-shadow: @pinkBoxShadow;
+}
+.ui.pink.message .header {
+ color: @pinkHeaderColor;
+}
+
+.ui.brown.message {
+ background-color: @brownBackground;
+ color: @brownTextColor;
+ box-shadow: @brownBoxShadow;
+}
+.ui.brown.message .header {
+ color: @brownHeaderColor;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+.ui.mini.message {
+ font-size: @relativeMini;
+}
+.ui.tiny.message {
+ font-size: @relativeTiny;
+}
+.ui.small.message {
+ font-size: @relativeSmall;
+}
+.ui.message {
+ font-size: @relativeMedium;
+}
+.ui.large.message {
+ font-size: @relativeLarge;
+}
+.ui.big.message {
+ font-size: @relativeBig;
+}
+.ui.huge.message {
+ font-size: @relativeHuge;
+}
+.ui.massive.message {
+ font-size: @relativeMassive;
+}
+
+.loadUIOverrides();
http://git-wip-us.apache.org/repos/asf/incubator-senssoft-tap/blob/db97ec6f/semantic/src/definitions/collections/table.less
----------------------------------------------------------------------
diff --git a/semantic/src/definitions/collections/table.less b/semantic/src/definitions/collections/table.less
new file mode 100755
index 0000000..b72dbac
--- /dev/null
+++ b/semantic/src/definitions/collections/table.less
@@ -0,0 +1,1114 @@
+/*!
+ * # Semantic UI - Table
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'collection';
+@element : 'table';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Table
+*******************************/
+
+/* Prototype */
+.ui.table {
+ width: 100%;
+ background: @background;
+ margin: @margin;
+ border: @border;
+ box-shadow: @boxShadow;
+ border-radius: @borderRadius;
+ text-align: @textAlign;
+ color: @color;
+ border-collapse: @borderCollapse;
+ border-spacing: @borderSpacing;
+}
+
+.ui.table:first-child {
+ margin-top: 0em;
+}
+.ui.table:last-child {
+ margin-bottom: 0em;
+}
+
+/*******************************
+ Parts
+*******************************/
+
+/* Table Content */
+.ui.table th,
+.ui.table td {
+ transition: @transition;
+}
+
+/* Headers */
+.ui.table thead {
+ box-shadow: @headerBoxShadow;
+}
+.ui.table thead th {
+ cursor: auto;
+ background: @headerBackground;
+ text-align: @headerAlign;
+ color: @headerColor;
+ padding: @headerVerticalPadding @headerHorizontalPadding;
+ vertical-align: @headerVerticalAlign;
+ font-style: @headerFontStyle;
+ font-weight: @headerFontWeight;
+ text-transform: @headerTextTransform;
+ border-bottom: @headerBorder;
+ border-left: @headerDivider;
+}
+
+.ui.table thead tr > th:first-child {
+ border-left: none;
+}
+
+.ui.table thead tr:first-child > th:first-child {
+ border-radius: @borderRadius 0em 0em 0em;
+}
+.ui.table thead tr:first-child > th:last-child {
+ border-radius: 0em @borderRadius 0em 0em;
+}
+.ui.table thead tr:first-child > th:only-child {
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+
+/* Footer */
+.ui.table tfoot {
+ box-shadow: @footerBoxShadow;
+}
+.ui.table tfoot th {
+ cursor: auto;
+ border-top: @footerBorder;
+ background: @footerBackground;
+ text-align: @footerAlign;
+ color: @footerColor;
+ padding: @footerVerticalPadding @footerHorizontalPadding;
+ vertical-align: @footerVerticalAlign;
+ font-style: @footerFontStyle;
+ font-weight: @footerFontWeight;
+ text-transform: @footerTextTransform;
+}
+.ui.table tfoot tr > th:first-child {
+ border-left: none;
+}
+.ui.table tfoot tr:first-child > th:first-child {
+ border-radius: 0em 0em 0em @borderRadius;
+}
+.ui.table tfoot tr:first-child > th:last-child {
+ border-radius: 0em 0em @borderRadius 0em;
+}
+.ui.table tfoot tr:first-child > th:only-child {
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+
+/* Table Row */
+.ui.table tr td {
+ border-top: @rowBorder;
+}
+.ui.table tr:first-child td {
+ border-top: none;
+}
+
+/* Table Cells */
+.ui.table td {
+ padding: @cellVerticalPadding @cellHorizontalPadding;
+ text-align: @cellTextAlign;
+}
+
+/* Icons */
+.ui.table > .icon {
+ vertical-align: @iconVerticalAlign;
+}
+.ui.table > .icon:only-child {
+ margin: 0em;
+}
+
+/* Table Segment */
+.ui.table.segment {
+ padding: 0em;
+}
+.ui.table.segment:after {
+ display: none;
+}
+.ui.table.segment.stacked:after {
+ display: block;
+}
+
+
+/* Responsive */
+@media only screen and (max-width : @largestMobileScreen) {
+ .ui.table:not(.unstackable) {
+ width: 100%;
+ }
+ .ui.table:not(.unstackable) tbody,
+ .ui.table:not(.unstackable) tr,
+ .ui.table:not(.unstackable) tr > th,
+ .ui.table:not(.unstackable) tr > td {
+ display: block !important;
+ width: auto !important;
+ display: block !important;
+ }
+
+ .ui.table:not(.unstackable) {
+ padding: 0em;
+ }
+ .ui.table:not(.unstackable) thead {
+ display: @responsiveHeaderDisplay;
+ }
+ .ui.table:not(.unstackable) tfoot {
+ display: @responsiveFooterDisplay;
+ }
+ .ui.table:not(.unstackable) tr {
+ padding-top: @responsiveRowVerticalPadding;
+ padding-bottom: @responsiveRowVerticalPadding;
+ box-shadow: @responsiveRowBoxShadow;
+ }
+
+ .ui.table:not(.unstackable) tr > th,
+ .ui.table:not(.unstackable) tr > td {
+ background: none;
+ border: none !important;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;
+ box-shadow: @responsiveCellBoxShadow;
+ }
+ .ui.table:not(.unstackable) th:first-child,
+ .ui.table:not(.unstackable) td:first-child {
+ font-weight: bold;
+ }
+
+ /* Definition Table */
+ .ui.definition.table:not(.unstackable) thead th:first-child {
+ box-shadow: none !important;
+ }
+}
+
+
+/*******************************
+ Coupling
+*******************************/
+
+/* UI Image */
+.ui.table th .image,
+.ui.table th .image img,
+.ui.table td .image,
+.ui.table td .image img {
+ max-width: none;
+}
+
+
+/*******************************
+ Types
+*******************************/
+
+/*--------------
+ Complex
+---------------*/
+
+.ui.structured.table {
+ border-collapse: collapse;
+}
+.ui.structured.table thead th {
+ border-left: @headerDivider;
+ border-right: @headerDivider;
+}
+.ui.structured.sortable.table thead th {
+ border-left: @sortableBorder;
+ border-right: @sortableBorder;
+}
+.ui.structured.basic.table th {
+ border-left: @basicTableHeaderDivider;
+ border-right: @basicTableHeaderDivider;
+}
+.ui.structured.celled.table tr th,
+.ui.structured.celled.table tr td {
+ border-left: @cellBorder;
+ border-right: @cellBorder;
+}
+
+/*--------------
+ Definition
+---------------*/
+
+.ui.definition.table thead:not(.full-width) th:first-child {
+ pointer-events: none;
+ background: @definitionHeaderBackground;
+ font-weight: @definitionHeaderFontWeight;
+ color: @definitionHeaderColor;
+ box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+.ui.definition.table tfoot:not(.full-width) th:first-child {
+ pointer-events: none;
+ background: @definitionFooterBackground;
+ font-weight: @definitionFooterColor;
+ color: @definitionFooterFontWeight;
+ box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+/* Remove Border */
+.ui.celled.definition.table thead:not(.full-width) th:first-child {
+ box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;
+}
+.ui.celled.definition.table tfoot:not(.full-width) th:first-child {
+ box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;
+}
+
+/* Highlight Defining Column */
+.ui.definition.table tr td:first-child:not(.ignored),
+.ui.definition.table tr td.definition {
+ background: @definitionColumnBackground;
+ font-weight: @definitionColumnFontWeight;
+ color: @definitionColumnColor;
+ text-transform: @definitionColumnTextTransform;
+ box-shadow: @definitionColumnBoxShadow;
+ text-align: @definitionColumnTextAlign;
+ font-size: @definitionColumnFontSize;
+ padding-left: @definitionColumnHorizontalPadding;
+ padding-right: @definitionColumnHorizontalPadding;
+}
+
+
+/* Fix 2nd Column */
+.ui.definition.table thead:not(.full-width) th:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+.ui.definition.table td:nth-child(2) {
+ border-left: @borderWidth solid @borderColor;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+/*--------------
+ Positive
+---------------*/
+
+.ui.table tr.positive,
+.ui.table td.positive {
+ box-shadow: @positiveBoxShadow;
+}
+.ui.table tr.positive,
+.ui.table td.positive {
+ background: @positiveBackgroundColor !important;
+ color: @positiveColor !important;
+}
+
+/*--------------
+ Negative
+---------------*/
+
+.ui.table tr.negative,
+.ui.table td.negative {
+ box-shadow: @negativeBoxShadow;
+}
+.ui.table tr.negative,
+.ui.table td.negative {
+ background: @negativeBackgroundColor !important;
+ color: @negativeColor !important;
+}
+
+/*--------------
+ Error
+---------------*/
+
+.ui.table tr.error,
+.ui.table td.error {
+ box-shadow: @errorBoxShadow;
+}
+.ui.table tr.error,
+.ui.table td.error {
+ background: @errorBackgroundColor !important;
+ color: @errorColor !important;
+}
+/*--------------
+ Warning
+---------------*/
+
+.ui.table tr.warning,
+.ui.table td.warning {
+ box-shadow: @warningBoxShadow;
+}
+.ui.table tr.warning,
+.ui.table td.warning {
+ background: @warningBackgroundColor !important;
+ color: @warningColor !important;
+}
+
+/*--------------
+ Active
+---------------*/
+
+.ui.table tr.active,
+.ui.table td.active {
+ box-shadow: @activeBoxShadow;
+}
+.ui.table tr.active,
+.ui.table td.active {
+ background: @activeBackgroundColor !important;
+ color: @activeColor !important;
+}
+
+
+
+/*--------------
+ Disabled
+---------------*/
+
+.ui.table tr.disabled td,
+.ui.table tr td.disabled,
+.ui.table tr.disabled:hover,
+.ui.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @disabledTextColor;
+}
+
+/*******************************
+ Variations
+*******************************/
+
+/*--------------
+ Stackable
+---------------*/
+
+@media only screen and (max-width : @largestTabletScreen) {
+
+ .ui[class*="tablet stackable"].table,
+ .ui[class*="tablet stackable"].table tbody,
+ .ui[class*="tablet stackable"].table tr,
+ .ui[class*="tablet stackable"].table tr > th,
+ .ui[class*="tablet stackable"].table tr > td {
+ display: block !important;
+ width: 100% !important;
+ display: block !important;
+ }
+
+ .ui[class*="tablet stackable"].table {
+ padding: 0em;
+ }
+ .ui[class*="tablet stackable"].table thead {
+ display: @responsiveHeaderDisplay;
+ }
+ .ui[class*="tablet stackable"].table tfoot {
+ display: @responsiveFooterDisplay;
+ }
+ .ui[class*="tablet stackable"].table tr {
+ padding-top: @responsiveRowVerticalPadding;
+ padding-bottom: @responsiveRowVerticalPadding;
+ box-shadow: @responsiveRowBoxShadow;
+ }
+ .ui[class*="tablet stackable"].table tr > th,
+ .ui[class*="tablet stackable"].table tr > td {
+ background: none;
+ border: none !important;
+ padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
+ box-shadow: @responsiveCellBoxShadow;
+ }
+
+ /* Definition Table */
+ .ui.definition[class*="tablet stackable"].table thead th:first-child {
+ box-shadow: none !important;
+ }
+}
+
+/*--------------
+ Text Alignment
+---------------*/
+
+.ui.table[class*="left aligned"],
+.ui.table [class*="left aligned"] {
+ text-align: left;
+}
+.ui.table[class*="center aligned"],
+.ui.table [class*="center aligned"] {
+ text-align: center;
+}
+.ui.table[class*="right aligned"],
+.ui.table [class*="right aligned"] {
+ text-align: right;
+}
+
+/*------------------
+ Vertical Alignment
+------------------*/
+
+.ui.table[class*="top aligned"],
+.ui.table [class*="top aligned"] {
+ vertical-align: top;
+}
+.ui.table[class*="middle aligned"],
+.ui.table [class*="middle aligned"] {
+ vertical-align: middle;
+}
+.ui.table[class*="bottom aligned"],
+.ui.table [class*="bottom aligned"] {
+ vertical-align: bottom;
+}
+
+/*--------------
+ Collapsing
+---------------*/
+
+.ui.table th.collapsing,
+.ui.table td.collapsing {
+ width: 1px;
+ white-space: nowrap;
+}
+
+/*--------------
+ Fixed
+---------------*/
+
+.ui.fixed.table {
+ table-layout: fixed;
+}
+
+.ui.fixed.table th,
+.ui.fixed.table td {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
+/*--------------
+ Selectable
+---------------*/
+
+.ui.selectable.table tbody tr:hover,
+.ui.table tbody tr td.selectable:hover {
+ background: @selectableBackground !important;
+ color: @selectableTextColor !important;
+}
+.ui.selectable.inverted.table tbody tr:hover,
+.ui.inverted.table tbody tr td.selectable:hover {
+ background: @selectableInvertedBackground !important;
+ color: @selectableInvertedTextColor !important;
+}
+
+/* Selectable Cell Link */
+.ui.table tbody tr td.selectable {
+ padding: 0em;
+}
+.ui.table tbody tr td.selectable > a:not(.ui) {
+ display: block;
+ color: inherit;
+ padding: @cellVerticalPadding @cellHorizontalPadding;
+}
+
+/* Other States */
+.ui.selectable.table tr.error:hover,
+.ui.table tr td.selectable.error:hover,
+.ui.selectable.table tr:hover td.error {
+ background: @errorBackgroundHover !important;
+ color: @errorColorHover !important;
+}
+.ui.selectable.table tr.warning:hover,
+.ui.table tr td.selectable.warning:hover,
+.ui.selectable.table tr:hover td.warning {
+ background: @warningBackgroundHover !important;
+ color: @warningColorHover !important;
+}
+.ui.selectable.table tr.active:hover,
+.ui.table tr td.selectable.active:hover,
+.ui.selectable.table tr:hover td.active {
+ background: @activeBackgroundColor !important;
+ color: @activeColor !important;
+}
+.ui.selectable.table tr.positive:hover,
+.ui.table tr td.selectable.positive:hover,
+.ui.selectable.table tr:hover td.positive {
+ background: @positiveBackgroundHover !important;
+ color: @positiveColorHover !important;
+}
+.ui.selectable.table tr.negative:hover,
+.ui.table tr td.selectable.negative:hover,
+.ui.selectable.table tr:hover td.negative {
+ background: @negativeBackgroundHover !important;
+ color: @negativeColorHover !important;
+}
+
+
+
+/*-------------------
+ Attached
+--------------------*/
+
+/* Middle */
+.ui.attached.table {
+ top: 0px;
+ bottom: 0px;
+ border-radius: 0px;
+ margin: 0em @attachedHorizontalOffset;
+ width: @attachedWidth;
+ max-width: @attachedWidth;
+ box-shadow: @attachedBoxShadow;
+ border: @attachedBorder;
+}
+.ui.attached + .ui.attached.table:not(.top) {
+ border-top: none;
+}
+
+/* Top */
+.ui[class*="top attached"].table {
+ bottom: 0px;
+ margin-bottom: 0em;
+ top: @attachedTopOffset;
+ margin-top: @verticalMargin;
+ border-radius: @borderRadius @borderRadius 0em 0em;
+}
+.ui.table[class*="top attached"]:first-child {
+ margin-top: 0em;
+}
+
+/* Bottom */
+.ui[class*="bottom attached"].table {
+ bottom: 0px;
+ margin-top: 0em;
+ top: @attachedBottomOffset;
+ margin-bottom: @verticalMargin;
+ box-shadow: @attachedBottomBoxShadow;
+ border-radius: 0em 0em @borderRadius @borderRadius;
+}
+.ui[class*="bottom attached"].table:last-child {
+ margin-bottom: 0em;
+}
+
+/*--------------
+ Striped
+---------------*/
+
+/* Table Striping */
+.ui.striped.table > tr:nth-child(2n),
+.ui.striped.table tbody tr:nth-child(2n) {
+ background-color: @stripedBackground;
+}
+
+/* Stripes */
+.ui.inverted.striped.table > tr:nth-child(2n),
+.ui.inverted.striped.table tbody tr:nth-child(2n) {
+ background-color: @invertedStripedBackground;
+}
+
+/* Allow striped active hover */
+.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {
+ background: @activeBackgroundHover !important;
+ color: @activeColorHover !important;
+}
+
+/*--------------
+ Single Line
+---------------*/
+
+.ui.table[class*="single line"],
+.ui.table [class*="single line"] {
+ white-space: nowrap;
+}
+.ui.table[class*="single line"],
+.ui.table [class*="single line"] {
+ white-space: nowrap;
+}
+
+/*-------------------
+ Colors
+--------------------*/
+
+/* Red */
+.ui.red.table {
+ border-top: @coloredBorderSize solid @red;
+}
+.ui.inverted.red.table {
+ background-color: @red !important;
+ color: @white !important;
+}
+
+/* Orange */
+.ui.orange.table {
+ border-top: @coloredBorderSize solid @orange;
+}
+.ui.inverted.orange.table {
+ background-color: @orange !important;
+ color: @white !important;
+}
+
+/* Yellow */
+.ui.yellow.table {
+ border-top: @coloredBorderSize solid @yellow;
+}
+.ui.inverted.yellow.table {
+ background-color: @yellow !important;
+ color: @white !important;
+}
+
+/* Olive */
+.ui.olive.table {
+ border-top: @coloredBorderSize solid @olive;
+}
+.ui.inverted.olive.table {
+ background-color: @olive !important;
+ color: @white !important;
+}
+
+/* Green */
+.ui.green.table {
+ border-top: @coloredBorderSize solid @green;
+}
+.ui.inverted.green.table {
+ background-color: @green !important;
+ color: @white !important;
+}
+
+/* Teal */
+.ui.teal.table {
+ border-top: @coloredBorderSize solid @teal;
+}
+.ui.inverted.teal.table {
+ background-color: @teal !important;
+ color: @white !important;
+}
+
+/* Blue */
+.ui.blue.table {
+ border-top: @coloredBorderSize solid @blue;
+}
+.ui.inverted.blue.table {
+ background-color: @blue !important;
+ color: @white !important;
+}
+
+/* Violet */
+.ui.violet.table {
+ border-top: @coloredBorderSize solid @violet;
+}
+.ui.inverted.violet.table {
+ background-color: @violet !important;
+ color: @white !important;
+}
+
+/* Purple */
+.ui.purple.table {
+ border-top: @coloredBorderSize solid @purple;
+}
+.ui.inverted.purple.table {
+ background-color: @purple !important;
+ color: @white !important;
+}
+
+/* Pink */
+.ui.pink.table {
+ border-top: @coloredBorderSize solid @pink;
+}
+.ui.inverted.pink.table {
+ background-color: @pink !important;
+ color: @white !important;
+}
+
+/* Brown */
+.ui.brown.table {
+ border-top: @coloredBorderSize solid @brown;
+}
+.ui.inverted.brown.table {
+ background-color: @brown !important;
+ color: @white !important;
+}
+
+/* Grey */
+.ui.grey.table {
+ border-top: @coloredBorderSize solid @grey;
+}
+.ui.inverted.grey.table {
+ background-color: @grey !important;
+ color: @white !important;
+}
+
+/* Black */
+.ui.black.table {
+ border-top: @coloredBorderSize solid @black;
+}
+.ui.inverted.black.table {
+ background-color: @black !important;
+ color: @white !important;
+}
+
+
+/*--------------
+ Column Count
+---------------*/
+
+/* Grid Based */
+.ui.one.column.table td {
+ width: @oneColumn;
+}
+.ui.two.column.table td {
+ width: @twoColumn;
+}
+.ui.three.column.table td {
+ width: @threeColumn;
+}
+.ui.four.column.table td {
+ width: @fourColumn;
+}
+.ui.five.column.table td {
+ width: @fiveColumn;
+}
+.ui.six.column.table td {
+ width: @sixColumn;
+}
+.ui.seven.column.table td {
+ width: @sevenColumn;
+}
+.ui.eight.column.table td {
+ width: @eightColumn;
+}
+.ui.nine.column.table td {
+ width: @nineColumn;
+}
+.ui.ten.column.table td {
+ width: @tenColumn;
+}
+.ui.eleven.column.table td {
+ width: @elevenColumn;
+}
+.ui.twelve.column.table td {
+ width: @twelveColumn;
+}
+.ui.thirteen.column.table td {
+ width: @thirteenColumn;
+}
+.ui.fourteen.column.table td {
+ width: @fourteenColumn;
+}
+.ui.fifteen.column.table td {
+ width: @fifteenColumn;
+}
+.ui.sixteen.column.table td {
+ width: @sixteenColumn;
+}
+
+/* Column Width */
+.ui.table th.one.wide,
+.ui.table td.one.wide {
+ width: @oneWide;
+}
+.ui.table th.two.wide,
+.ui.table td.two.wide {
+ width: @twoWide;
+}
+.ui.table th.three.wide,
+.ui.table td.three.wide {
+ width: @threeWide;
+}
+.ui.table th.four.wide,
+.ui.table td.four.wide {
+ width: @fourWide;
+}
+.ui.table th.five.wide,
+.ui.table td.five.wide {
+ width: @fiveWide;
+}
+.ui.table th.six.wide,
+.ui.table td.six.wide {
+ width: @sixWide;
+}
+.ui.table th.seven.wide,
+.ui.table td.seven.wide {
+ width: @sevenWide;
+}
+.ui.table th.eight.wide,
+.ui.table td.eight.wide {
+ width: @eightWide;
+}
+.ui.table th.nine.wide,
+.ui.table td.nine.wide {
+ width: @nineWide;
+}
+.ui.table th.ten.wide,
+.ui.table td.ten.wide {
+ width: @tenWide;
+}
+.ui.table th.eleven.wide,
+.ui.table td.eleven.wide {
+ width: @elevenWide;
+}
+.ui.table th.twelve.wide,
+.ui.table td.twelve.wide {
+ width: @twelveWide;
+}
+.ui.table th.thirteen.wide,
+.ui.table td.thirteen.wide {
+ width: @thirteenWide;
+}
+.ui.table th.fourteen.wide,
+.ui.table td.fourteen.wide {
+ width: @fourteenWide;
+}
+.ui.table th.fifteen.wide,
+.ui.table td.fifteen.wide {
+ width: @fifteenWide;
+}
+.ui.table th.sixteen.wide,
+.ui.table td.sixteen.wide {
+ width: @sixteenWide;
+}
+
+/*--------------
+ Sortable
+---------------*/
+
+.ui.sortable.table thead th {
+ cursor: pointer;
+ white-space: nowrap;
+ border-left: @sortableBorder;
+ color: @sortableColor;
+}
+.ui.sortable.table thead th:first-child {
+ border-left: none;
+}
+.ui.sortable.table thead th.sorted,
+.ui.sortable.table thead th.sorted:hover {
+ user-select: none;
+}
+
+.ui.sortable.table thead th:after {
+ display: none;
+ font-style: normal;
+ font-weight: normal;
+ text-decoration: inherit;
+ content: '';
+ height: 1em;
+ width: @sortableIconWidth;
+ opacity: @sortableIconOpacity;
+ margin: 0em 0em 0em @sortableIconDistance;
+ font-family: @sortableIconFont;
+}
+.ui.sortable.table thead th.ascending:after {
+ content: @sortableIconAscending;
+}
+.ui.sortable.table thead th.descending:after {
+ content: @sortableIconDescending;
+}
+
+/* Hover */
+.ui.sortable.table th.disabled:hover {
+ cursor: auto;
+ color: @sortableDisabledColor;
+}
+.ui.sortable.table thead th:hover {
+ background: @sortableHoverBackground;
+ color: @sortableHoverColor;
+}
+
+/* Sorted */
+.ui.sortable.table thead th.sorted {
+ background: @sortableActiveBackground;
+ color: @sortableActiveColor;
+}
+.ui.sortable.table thead th.sorted:after {
+ display: inline-block;
+}
+
+/* Sorted Hover */
+.ui.sortable.table thead th.sorted:hover {
+ background: @sortableActiveHoverBackground;
+ color: @sortableActiveHoverColor;
+}
+
+/* Inverted */
+.ui.inverted.sortable.table thead th.sorted {
+ background: @sortableInvertedActiveBackground;
+ color: @sortableInvertedActiveColor;
+}
+.ui.inverted.sortable.table thead th:hover {
+ background: @sortableInvertedHoverBackground;
+ color: @sortableInvertedHoverColor;
+}
+.ui.inverted.sortable.table thead th {
+ border-left-color: @sortableInvertedBorderColor;
+ border-right-color: @sortableInvertedBorderColor;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+/* Text Color */
+.ui.inverted.table {
+ background: @invertedBackground;
+ color: @invertedCellColor;
+ border: @invertedBorder;
+}
+.ui.inverted.table th {
+ background-color: @invertedHeaderBackground;
+ border-color: @invertedHeaderBorderColor !important;
+ color: @invertedHeaderColor;
+}
+.ui.inverted.table tr td {
+ border-color: @invertedCellBorderColor !important;
+}
+
+.ui.inverted.table tr.disabled td,
+.ui.inverted.table tr td.disabled,
+.ui.inverted.table tr.disabled:hover td,
+.ui.inverted.table tr:hover td.disabled {
+ pointer-events: none;
+ color: @invertedDisabledTextColor;
+}
+
+/* Definition */
+.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
+.ui.inverted.definition.table thead:not(.full-width) th:first-child {
+ background: @definitionPageBackground;
+}
+.ui.inverted.definition.table tr td:first-child {
+ background: @invertedDefinitionColumnBackground;
+ color: @invertedDefinitionColumnColor;
+}
+
+/*--------------
+ Collapsing
+---------------*/
+
+.ui.collapsing.table {
+ width: auto;
+}
+
+/*--------------
+ Basic
+---------------*/
+
+.ui.basic.table {
+ background: @basicTableBackground;
+ border: @basicTableBorder;
+ box-shadow: @basicBoxShadow;
+}
+.ui.basic.table thead,
+.ui.basic.table tfoot {
+ box-shadow: none;
+}
+.ui.basic.table th {
+ background: @basicTableHeaderBackground;
+ border-left: @basicTableHeaderDivider;
+}
+.ui.basic.table tbody tr {
+ border-bottom: @basicTableCellBorder;
+}
+.ui.basic.table td {
+ background: @basicTableCellBackground;
+}
+.ui.basic.striped.table tbody tr:nth-child(2n) {
+ background-color: @basicTableStripedBackground !important;
+}
+
+/* Very Basic */
+.ui[class*="very basic"].table {
+ border: none;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
+ padding: @basicTableCellPadding;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {
+ padding-left: 0em;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child,
+.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child {
+ padding-right: 0em;
+}
+.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th {
+ padding-top: 0em;
+}
+
+/*--------------
+ Celled
+---------------*/
+
+.ui.celled.table tr th,
+.ui.celled.table tr td {
+ border-left: @cellBorder;
+}
+.ui.celled.table tr th:first-child,
+.ui.celled.table tr td:first-child {
+ border-left: none;
+}
+
+/*--------------
+ Padded
+---------------*/
+
+.ui.padded.table th {
+ padding-left: @paddedHorizontalPadding;
+ padding-right: @paddedHorizontalPadding;
+}
+.ui.padded.table th,
+.ui.padded.table td {
+ padding: @paddedVerticalPadding @paddedHorizontalPadding;
+}
+
+/* Very */
+.ui[class*="very padded"].table th {
+ padding-left: @veryPaddedHorizontalPadding;
+ padding-right: @veryPaddedHorizontalPadding;
+}
+.ui[class*="very padded"].table td {
+ padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+}
+
+/*--------------
+ Compact
+---------------*/
+
+.ui.compact.table th {
+ padding-left: @compactHorizontalPadding;
+ padding-right: @compactHorizontalPadding;
+}
+.ui.compact.table td {
+ padding: @compactVerticalPadding @compactHorizontalPadding;
+}
+
+/* Very */
+.ui[class*="very compact"].table th {
+ padding-left: @veryCompactHorizontalPadding;
+ padding-right: @veryCompactHorizontalPadding;
+}
+.ui[class*="very compact"].table td {
+ padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+}
+
+/*--------------
+ Sizes
+---------------*/
+
+/* Small */
+.ui.small.table {
+ font-size: @small;
+}
+
+/* Standard */
+.ui.table {
+ font-size: @medium;
+}
+
+/* Large */
+.ui.large.table {
+ font-size: @large;
+}
+
+.loadUIOverrides();