fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

package/src/definitions/collections/menu.less

@@ -218,7 +218,9 @@
   background: @dropdownBackground;
   margin: @dropdownMenuDistance 0 0;
   box-shadow: @dropdownMenuBoxShadow;
-  flex-direction: column !important;
+}
+.ui.menu .dropdown.item:not(.column) .menu {
+  flex-direction: column;
 }
 
 
@@ -269,9 +271,9 @@
   }
 }
 
-/* Pointing */
-.ui.menu .pointing.dropdown.item .menu {
-  margin-top: @pointingDropdownMenuDistance;
+  /* Pointing */
+  .ui.menu .pointing.dropdown.item .menu {
+    margin-top: @pointingDropdownMenuDistance;
 }
 
 & when (@variationMenuInverted) {
@@ -370,7 +372,7 @@
      List
 ---------------*/
 
-/* Menu divider shouldnt apply */
+/* Menu divider shouldn't apply */
 .ui.menu .list .item:before {
   background: none !important;
 }
@@ -677,11 +679,13 @@ Floated Menu / Item
     margin-bottom: -@tabularBorderWidth;
     box-shadow: @tabularActiveBoxShadow;
     border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important;
+    &:hover {
+      cursor: default;
+    }
   }
 
   /* Coupling with segment for attachment */
-  .ui.tabular.menu + .attached:not(.top).segment,
-  .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+  .ui.tabular.menu ~ .attached:not(.top).segment {
     border-top: none;
     margin-left: 0;
     margin-top: 0;
@@ -772,6 +776,18 @@ Floated Menu / Item
     border-top: @tabularOppositeBorderWidth solid transparent;
     border-bottom: none;
   }
+  & when (@variationMenuInverted) {
+    .ui.inverted.tabular.menu .active.item,
+    .ui.inverted.tabular.menu .active.item:hover {
+      background: @invertedTabularActiveBackground;
+      border-color: @invertedTabularBorderColor;
+    }
+    .ui.inverted.tabular.menu .item:not(.active):hover {
+      color: @invertedTabularHoveredTextColor;
+      background: transparent;
+      cursor: pointer;
+    }
+  }
 }
 
 
@@ -937,10 +953,11 @@ Floated Menu / Item
     .ui.vertical.secondary.menu .item > .menu .item {
       background-color: transparent;
     }
-
-    /* Inverted */
-    .ui.secondary.inverted.menu {
-      background-color: transparent;
+    & when (@variationMenuInverted) {
+      /* Inverted */
+      .ui.secondary.inverted.menu {
+        background-color: transparent;
+      }
     }
   }
 
@@ -1207,51 +1224,59 @@ Floated Menu / Item
   }
 }
 
-/*--------------
-    Icon Only
----------------*/
+& when (@variationMenuIcon) {
+  /*--------------
+      Icon Only
+  ---------------*/
 
-/* Vertical Menu */
-.ui.vertical.icon.menu {
-  display: inline-block;
-  width: auto;
-}
+  & when (@variationMenuVertical) {
+    /* Vertical Menu */
+    .ui.vertical.icon.menu {
+      display: inline-block;
+      width: auto;
+    }
+  }
 
-/* Item */
-.ui.icon.menu .item {
-  height: auto;
-  text-align: @iconMenuTextAlign;
-  color: @iconMenuItemColor;
-}
+  /* Item */
+  .ui.icon.menu .item {
+    height: auto;
+    text-align: @iconMenuTextAlign;
+    color: @iconMenuItemColor;
+  }
 
-/* Icon */
-.ui.icon.menu .item > i.icon:not(.dropdown) {
-  margin: 0;
-  opacity: 1;
-}
+  /* Icon */
+  .ui.icon.menu .item > i.icon:not(.dropdown) {
+    margin: 0;
+    opacity: 1;
+  }
 
-/* Icon Gylph */
-.ui.icon.menu i.icon:before {
-  opacity: 1;
-}
+  /* Icon Glyph */
+  .ui.icon.menu i.icon:before {
+    opacity: 1;
+  }
 
-/* (x) Item Icon */
-.ui.menu .icon.item > i.icon {
-  width: auto;
-  margin: 0 auto;
-}
+  /* (x) Item Icon */
+  .ui.menu .icon.item > i.icon {
+    width: auto;
+    margin: 0 auto;
+  }
 
-/* Vertical Icon */
-.ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
-  display: block;
-  opacity: 1;
-  margin: 0 auto;
-  float: none;
-}
+  /* Vertical Icon */
+  & when (@variationMenuVertical) {
+    .ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
+      display: block;
+      opacity: 1;
+      margin: 0 auto;
+      float: none;
+    }
+  }
 
-/* Inverted */
-.ui.inverted.icon.menu .item {
-  color: @iconMenuInvertedItemColor;
+  /* Inverted */
+  & when (@variationMenuInverted) {
+    .ui.inverted.icon.menu .item {
+      color: @iconMenuInvertedItemColor;
+    }
+  }
 }
 
 & when (@variationMenuLabeled) {
@@ -1338,22 +1363,23 @@ Floated Menu / Item
 /*--------------
      Colors
 ---------------*/
+& when not (@variationMenuColors = false) {
+  each(@variationMenuColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-
-  & when not (@color=secondary) {
-    .ui.ui.ui.menu .@{color}.active.item,
-    .ui.ui.@{color}.menu .active.item:hover,
-    .ui.ui.@{color}.menu .active.item {
-      & when not (@secondaryPointingActiveBorderColor = currentColor) {
-        border-color: @c;
+    & when not (@color=secondary) {
+      .ui.ui.ui.menu .@{color}.active.item,
+      .ui.ui.@{color}.menu .active.item:hover,
+      .ui.ui.@{color}.menu .active.item {
+        & when not (@secondaryPointingActiveBorderColor = currentColor) {
+          border-color: @c;
+        }
+        color: @c;
       }
-      color: @c;
     }
-  }
-})
+  })
+}
 
 & when (@variationMenuInverted) {
   /*--------------
@@ -1475,34 +1501,44 @@ each(@colors, {
   }
 }
 
+& when (@variationMenuCentered) {
+  .ui.center.aligned.menu,
+  .ui.centered.menu {
+    display: inline-flex;
+    transform: translateX(-50%);
+    margin-left:50%;
+  }
+}
+
 & when (@variationMenuInverted) {
   /*--------------
       Inverted
   ---------------*/
-
-  each(@colors, {
-    @color: replace(@key, '@', '');
-    @c: @colors[@@color][color];
-    @h: @colors[@@color][hover];
-
-    & when not (@color=secondary) {
-      .ui.ui.ui.inverted.menu .@{color}.active.item,
-      .ui.ui.inverted.@{color}.menu {
-        background-color: @c;
-      }
-      .ui.inverted.@{color}.menu .item:before {
-        background-color: @invertedColoredDividerBackground;
-      }
-      .ui.ui.inverted.@{color}.menu .active.item {
-        background-color: @invertedColoredActiveBackground;
-      }
-      & when (@variationMenuPointing) {
-        .ui.inverted.pointing.@{color}.menu .active.item {
-          background-color: @h;
+  & when not (@variationMenuColors = false) {
+    each(@variationMenuColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @h: @colors[@@color][hover];
+
+      & when not (@color=secondary) {
+        .ui.ui.ui.inverted.menu .@{color}.active.item,
+        .ui.ui.inverted.@{color}.menu {
+          background-color: @c;
+        }
+        .ui.inverted.@{color}.menu .item:before {
+          background-color: @invertedColoredDividerBackground;
+        }
+        .ui.ui.inverted.@{color}.menu .active.item {
+          background-color: @invertedColoredActiveBackground;
+        }
+        & when (@variationMenuPointing) {
+          .ui.inverted.pointing.@{color}.menu .active.item {
+            background-color: @h;
+          }
         }
       }
-    }
-  })
+    })
+  }
 
   & when (@variationMenuPointing) {
     .ui.ui.ui.inverted.pointing.menu .active.item:after {
@@ -1614,38 +1650,40 @@ each(@colors, {
   display: none;
 }
 
-.ui.menu.two.item .item {
-  width: 50%;
-}
-.ui.menu.three.item .item {
-  width: 33.333%;
-}
-.ui.menu.four.item .item {
-  width: 25%;
-}
-.ui.menu.five.item .item {
-  width: 20%;
-}
-.ui.menu.six.item .item {
-  width: 16.666%;
-}
-.ui.menu.seven.item .item {
-  width: 14.285%;
-}
-.ui.menu.eight.item .item {
-  width: 12.500%;
-}
-.ui.menu.nine.item .item {
-  width: 11.11%;
-}
-.ui.menu.ten.item .item {
-  width: 10.0%;
-}
-.ui.menu.eleven.item .item {
-  width: 9.09%;
-}
-.ui.menu.twelve.item .item {
-  width: 8.333%;
+& when (@variationMenuEqualWidth) {
+  .ui.menu.two.item .item {
+    width: 50%;
+  }
+  .ui.menu.three.item .item {
+    width: 33.333%;
+  }
+  .ui.menu.four.item .item {
+    width: 25%;
+  }
+  .ui.menu.five.item .item {
+    width: 20%;
+  }
+  .ui.menu.six.item .item {
+    width: 16.666%;
+  }
+  .ui.menu.seven.item .item {
+    width: 14.285%;
+  }
+  .ui.menu.eight.item .item {
+    width: 12.500%;
+  }
+  .ui.menu.nine.item .item {
+    width: 11.11%;
+  }
+  .ui.menu.ten.item .item {
+    width: 10.0%;
+  }
+  .ui.menu.eleven.item .item {
+    width: 9.09%;
+  }
+  .ui.menu.twelve.item .item {
+    width: 8.333%;
+  }
 }
 
 & when (@variationMenuFixed) {
@@ -1798,14 +1836,16 @@ each(@colors, {
   }
 }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
+& when not (@variationMenuColors = false) {
+  each(@variationMenuColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
 
-  .ui.inverted.pointing.menu .@{color}.active.item:after {
-    background-color: @c;
-  }
-})
+    .ui.inverted.pointing.menu .@{color}.active.item:after {
+      background-color: @c;
+    }
+  })
+}
 
 & when (@variationMenuAttached) {
   /*--------------
@@ -1860,13 +1900,18 @@ each(@colors, {
   }
 
   /* Tabular Attached */
-  .ui.attached.menu:not(.tabular) {
+  .ui.attached.menu:not(.tabular):not(.text) {
     border: @attachedBorder;
   }
   & when (@variationMenuInverted) {
     .ui.attached.inverted.menu {
       border: none;
     }
+    & when (@variationMenuTabular) {
+      .ui[class*="top attached"].inverted.tabular.menu {
+        border-bottom: @invertedTabularBorder;
+      }
+    }
   }
   & when (@variationMenuTabular) {
     .ui.attached.tabular.menu {
@@ -1884,8 +1929,10 @@ each(@colors, {
 .ui.menu {
   font-size: @medium;
 }
-.ui.vertical.menu {
-  width: @mediumWidth;
+& when (@variationMenuVertical) {
+  .ui.vertical.menu {
+    width: @mediumWidth;
+  }
 }
 & when not (@variationMenuSizes = false) {
   each(@variationMenuSizes, {
@@ -1896,8 +1943,10 @@ each(@colors, {
     .ui.@{value}.menu .dropdown .menu > .item {
       font-size: @s;
     }
-    .ui.@{value}.vertical.menu:not(.icon) {
-      width: @@w;
+    & when (@variationMenuVertical) {
+      .ui.@{value}.vertical.menu:not(.icon) {
+        width: @@w;
+      }
     }
   })
 }

package/src/definitions/collections/message.less

@@ -105,11 +105,15 @@
   margin-bottom: 0;
 }
 
-
-/* Icon */
-.ui.message > .icons,
-.ui.message > i.icon {
-  margin-right: @iconDistance;
+& when (@variationMessageIcon) {
+  /* Icon */
+  .ui.icon.message > .icons,
+  .ui.icon.message > i.icon {
+    margin-right: @iconDistance;
+    &:last-child {
+      margin: 0 0 0 @iconDistance;
+    }
+  }
 }
 
 /* Close Icon */
@@ -170,6 +174,21 @@
 /*******************************
             Variations
 *******************************/
+& when (@variationMessageCentered) {
+  .ui.centered.message,
+  .ui.center.aligned.message {
+    text-align: center;
+    justify-content: center;
+    & > .content {
+      flex: 0 0 auto;
+    }
+  }
+}
+& when (@variationMessageRightAligned) {
+  .ui.right.aligned.message {
+    text-align: right;
+  }
+}
 
 & when (@variationMessageCompact) {
   /*--------------
@@ -269,7 +288,7 @@
 /*--------------
      Types
 ---------------*/
-& when (@variationMessageConsequences) {
+& when not (@variationMessageConsequences = false) {
 
   @consequences: {
     @positive: {
@@ -278,6 +297,7 @@
       boxShadow      : @positiveBoxShadow;
       boxFloatShadow : @positiveBoxFloatingShadow;
       text           : @positiveTextColor;
+      invertedText   : @positiveBorderColor;
     };
     @negative: {
       background     : @negativeBackgroundColor;
@@ -285,6 +305,7 @@
       boxShadow      : @negativeBoxShadow;
       boxFloatShadow : @negativeBoxFloatingShadow;
       text           : @negativeTextColor;
+      invertedText   : @negativeBorderColor;
     };
     @info: {
       background     : @infoBackgroundColor;
@@ -292,6 +313,7 @@
       boxShadow      : @infoBoxShadow;
       boxFloatShadow : @infoBoxFloatingShadow;
       text           : @infoTextColor;
+      invertedText   : @formInfoLabelBackground;
     };
     @warning: {
       background     : @warningBackgroundColor;
@@ -299,6 +321,7 @@
       boxShadow      : @warningBoxShadow;
       boxFloatShadow : @warningBoxFloatingShadow;
       text           : @warningTextColor;
+      invertedText   : @formWarningLabelBackground;
     };
     @error: {
       background     : @errorBackgroundColor;
@@ -306,6 +329,7 @@
       boxShadow      : @errorBoxShadow;
       boxFloatShadow : @errorBoxFloatingShadow;
       text           : @errorTextColor;
+      invertedText   : @formErrorLabelBackground;
     };
     @success: {
       background     : @successBackgroundColor;
@@ -313,18 +337,20 @@
       boxShadow      : @successBoxShadow;
       boxFloatShadow : @successBoxFloatingShadow;
       text           : @successTextColor;
+      invertedText   : @formSuccessLabelBackground;
     };
   }
 
   /* Colors */
 
-  each(@consequences, {
-    @color: replace(@key, '@', '');
+  each(@variationMessageConsequences, {
+    @color: @value;
     @bg: @consequences[@@color][background];
     @hd: @consequences[@@color][header];
     @bs: @consequences[@@color][boxShadow];
     @bfs: @consequences[@@color][boxFloatShadow];
     @t: @consequences[@@color][text];
+    @it: @consequences[@@color][invertedText];
 
     .ui.@{color}.message {
       background-color: @bg;
@@ -343,52 +369,59 @@
     .ui.@{color}.message .header {
       color: @hd;
     }
+    & when (@variationMessageInverted) {
+      .ui.inverted.@{color}.message,
+      .ui.inverted.@{color}.message .header {
+        color: @it;
+      }
+    }
   })
 }
+& when not (@variationMessageColors = false) {
+  each(@variationMessageColors, {
+    @color: @value;
+    @bg: @colors[@@color][background];
+    @hd: @colors[@@color][header];
+    @bs: @colors[@@color][boxShadow];
+    @bfs: @colors[@@color][boxFloatShadow];
+    @t: @colors[@@color][text];
+    @isVeryDark: @colors[@@color][isVeryDark];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @bg: @colors[@@color][background];
-  @hd: @colors[@@color][header];
-  @bs: @colors[@@color][boxShadow];
-  @bfs: @colors[@@color][boxFloatShadow];
-  @t: @colors[@@color][text];
-  @isVeryDark: @colors[@@color][isVeryDark];
-
-  .ui.@{color}.message {
-    & when not (@isVeryDark) {
-      background-color: @bg;
-      color: @t;
-    }
-    & when (@isVeryDark) {
-      background-color: @black;
-      color: @invertedTextColor;
+    .ui.@{color}.message {
+      & when not (@isVeryDark) {
+        background-color: @bg;
+        color: @t;
+      }
+      & when (@isVeryDark) {
+        background-color: @black;
+        color: @invertedTextColor;
+      }
     }
-  }
 
-  .ui.@{color}.message,
-  .ui.attached.@{color}.message {
-    & when not (@isVeryDark) {
-      box-shadow: @bs;
-    }
-  }
-  & when (@variationMessageFloating) {
-    .ui.floating.@{color}.message {
+    .ui.@{color}.message,
+    .ui.attached.@{color}.message {
       & when not (@isVeryDark) {
-        box-shadow: @bfs;
+        box-shadow: @bs;
       }
     }
-  }
-
-  .ui.@{color}.message .header {
-    & when not (@isVeryDark) {
-      color: @hd;
+    & when (@variationMessageFloating) {
+      .ui.floating.@{color}.message {
+        & when not (@isVeryDark) {
+          box-shadow: @bfs;
+        }
+      }
     }
-    & when (@isVeryDark) {
-      color: @invertedTextColor;
+
+    .ui.@{color}.message .header {
+      & when not (@isVeryDark) {
+        color: @hd;
+      }
+      & when (@isVeryDark) {
+        color: @invertedTextColor;
+      }
     }
-  }
-})
+  })
+}
 
 & when (@variationMessageInverted) {
   .ui.inverted.message {