:star:

18 files changed, 8841 insertions, 0 deletions

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();