fomantic-ui 2.10.0-beta.10 → 2.10.0-beta.11

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.10.0-beta.10+3ca268e
+ * # Fomantic UI - 2.10.0-beta.11+6d1b302
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/examples/attached.html

@@ -195,7 +195,7 @@
         <a class="item">Item</a>
       </div>
 
-      <div class="ui top attached tabular menu">
+      <div class="ui top attached tabbed menu">
         <a class="active item">Active Item</a>
         <a class="item">Item</a>
         <a class="item">Item</a>

package/examples/components/menu.html

@@ -187,7 +187,7 @@
   </div>
 
   <div class="column">
-    <div class="ui tabular menu">
+    <div class="ui tabbed menu">
       <div class="active item">Link</div>
       <a class="item">Link</a>
       <a class="item">Link</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.10.0-beta.10+3ca268e",
+  "version": "2.10.0-beta.11+6d1b302",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/collections/menu.less

@@ -19,7 +19,7 @@
 
 @notSecondary: if(@variationMenuSecondary, e(":not(.secondary)"));
 @notText: if(@variationMenuText, e(":not(.text)"));
-@notTabular: if(@variationMenuTabular, e(":not(.tabular)"));
+@notTabbed: if(@variationMenuTabbed, e(":not(.tabbed)"));
 @notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
 @notBorderless: if(@variationMenuBorderless, e(":not(.borderless)"));
 @notFluid: if(@variationMenuFluid, e(":not(.fluid)"));
@@ -407,11 +407,11 @@
     }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .item:not(.right)@{notBorderless}:first-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .item:not(.right)@{notBorderless}:first-child {
         border-left: @dividerSize solid @dividerBackground;
     }
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.item@{notBorderless}:last-child,
-    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.menu > .item@{notBorderless}:last-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .right.item@{notBorderless}:last-child,
+    .ui.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} > .container > .right.menu > .item@{notBorderless}:last-child {
         border-right: @dividerSize solid @dividerBackground;
     }
 }
@@ -629,156 +629,156 @@ Floated Menu / Item
     }
 }
 
-& when (@variationMenuTabular) {
+& when (@variationMenuTabbed) {
     /* --------------
-         Tabular
+         Tabbed
     --------------- */
 
-    .ui.tabular.menu {
+    .ui.tabbed.menu {
         border-radius: 0;
         box-shadow: none !important;
         border: none;
-        background: @tabularBackground;
-        border-bottom: @tabularBorderWidth solid @tabularBorderColor;
+        background: @tabbedBackground;
+        border-bottom: @tabbedBorderWidth solid @tabbedBorderColor;
     }
-    .ui.tabular.fluid.menu {
-        width: @tabularFluidWidth !important;
+    .ui.tabbed.fluid.menu {
+        width: @tabbedFluidWidth !important;
     }
-    .ui.tabular.menu .item {
+    .ui.tabbed.menu .item {
         background: transparent;
         border-bottom: none;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-top: @tabularOppositeBorderWidth solid transparent;
-        padding: @tabularVerticalPadding @tabularHorizontalPadding;
-        color: @tabularTextColor;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-top: @tabbedOppositeBorderWidth solid transparent;
+        padding: @tabbedVerticalPadding @tabbedHorizontalPadding;
+        color: @tabbedTextColor;
     }
-    .ui.tabular.menu .item::before {
+    .ui.tabbed.menu .item::before {
         display: none;
     }
 
     /* Hover */
-    .ui.tabular.menu .item:hover {
+    .ui.tabbed.menu .item:hover {
         background-color: transparent;
-        color: @tabularHoveredTextColor;
+        color: @tabbedHoveredTextColor;
     }
 
     /* Active */
-    .ui.tabular.menu .active.item {
-        background: @tabularActiveBackground;
-        color: @tabularActiveColor;
-        border-top-width: @tabularBorderWidth;
-        border-color: @tabularBorderColor;
-        font-weight: @tabularActiveWeight;
-        margin-bottom: -@tabularBorderWidth;
-        box-shadow: @tabularActiveBoxShadow;
-        border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important;
+    .ui.tabbed.menu .active.item {
+        background: @tabbedActiveBackground;
+        color: @tabbedActiveColor;
+        border-top-width: @tabbedBorderWidth;
+        border-color: @tabbedBorderColor;
+        font-weight: @tabbedActiveWeight;
+        margin-bottom: -@tabbedBorderWidth;
+        box-shadow: @tabbedActiveBoxShadow;
+        border-radius: @tabbedBorderRadius @tabbedBorderRadius 0 0 !important;
         &:hover {
             cursor: default;
         }
     }
 
     /* Coupling with segment for attachment */
-    .ui.tabular.menu ~ .attached:not(.top).segment {
+    .ui.tabbed.menu ~ .attached:not(.top).segment {
         border-top: none;
         margin-left: 0;
         margin-top: 0;
         margin-right: 0;
         width: 100%;
     }
-    .top.attached.segment + .ui.bottom.tabular.menu {
+    .top.attached.segment + .ui.bottom.tabbed.menu {
         position: relative;
-        width: @tabularFluidWidth;
-        left: -@tabularFluidOffset;
+        width: @tabbedFluidWidth;
+        left: -@tabbedFluidOffset;
     }
 
-    /* Bottom Vertical Tabular */
-    .ui.bottom.tabular.menu {
-        background: @tabularBackground;
+    /* Bottom Vertical Tabbed */
+    .ui.bottom.tabbed.menu {
+        background: @tabbedBackground;
         border-radius: 0;
         box-shadow: none !important;
         border-bottom: none;
-        border-top: @tabularBorderWidth solid @tabularBorderColor;
+        border-top: @tabbedBorderWidth solid @tabbedBorderColor;
     }
-    .ui.bottom.tabular.menu .item {
+    .ui.bottom.tabbed.menu .item {
         background: none;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-bottom: @tabularBorderWidth solid transparent;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-bottom: @tabbedBorderWidth solid transparent;
         border-top: none;
     }
-    .ui.bottom.tabular.menu .active.item {
-        background: @tabularActiveBackground;
-        color: @tabularActiveColor;
-        border-color: @tabularBorderColor;
-        margin: -@tabularBorderWidth 0 0 0;
-        border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important;
+    .ui.bottom.tabbed.menu .active.item {
+        background: @tabbedActiveBackground;
+        color: @tabbedActiveColor;
+        border-color: @tabbedBorderColor;
+        margin: -@tabbedBorderWidth 0 0 0;
+        border-radius: 0 0 @tabbedBorderRadius @tabbedBorderRadius !important;
     }
     & when (@variationMenuVertical) {
-        /* Vertical Tabular (Left) */
-        .ui.vertical.tabular.menu {
-            background: @tabularVerticalBackground;
+        /* Vertical Tabbed (Left) */
+        .ui.vertical.tabbed.menu {
+            background: @tabbedVerticalBackground;
             border-radius: 0;
             box-shadow: none !important;
             border-bottom: none;
-            border-right: @tabularBorderWidth solid @tabularBorderColor;
+            border-right: @tabbedBorderWidth solid @tabbedBorderColor;
         }
-        .ui.vertical.tabular.menu .item {
+        .ui.vertical.tabbed.menu .item {
             background: none;
-            border-left: @tabularBorderWidth solid transparent;
-            border-bottom: @tabularBorderWidth solid transparent;
-            border-top: @tabularBorderWidth solid transparent;
+            border-left: @tabbedBorderWidth solid transparent;
+            border-bottom: @tabbedBorderWidth solid transparent;
+            border-top: @tabbedBorderWidth solid transparent;
             border-right: none;
         }
-        .ui.vertical.tabular.menu .active.item {
-            background: @tabularActiveBackground;
-            color: @tabularActiveColor;
-            border-color: @tabularBorderColor;
-            margin: 0 -@tabularBorderWidth 0 0;
-            border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important;
+        .ui.vertical.tabbed.menu .active.item {
+            background: @tabbedActiveBackground;
+            color: @tabbedActiveColor;
+            border-color: @tabbedBorderColor;
+            margin: 0 -@tabbedBorderWidth 0 0;
+            border-radius: @tabbedBorderRadius 0 0 @tabbedBorderRadius !important;
         }
 
-        /* Vertical Right Tabular */
-        .ui.vertical.right.tabular.menu {
-            background: @tabularVerticalBackground;
+        /* Vertical Right Tabbed */
+        .ui.vertical.right.tabbed.menu {
+            background: @tabbedVerticalBackground;
             border-radius: 0;
             box-shadow: none !important;
             border-bottom: none;
             border-right: none;
-            border-left: @tabularBorderWidth solid @tabularBorderColor;
+            border-left: @tabbedBorderWidth solid @tabbedBorderColor;
         }
-        .ui.vertical.right.tabular.menu .item {
+        .ui.vertical.right.tabbed.menu .item {
             background: none;
-            border-right: @tabularBorderWidth solid transparent;
-            border-bottom: @tabularBorderWidth solid transparent;
-            border-top: @tabularBorderWidth solid transparent;
+            border-right: @tabbedBorderWidth solid transparent;
+            border-bottom: @tabbedBorderWidth solid transparent;
+            border-top: @tabbedBorderWidth solid transparent;
             border-left: none;
         }
-        .ui.vertical.right.tabular.menu .active.item {
-            background: @tabularActiveBackground;
-            color: @tabularActiveColor;
-            border-color: @tabularBorderColor;
-            margin: 0 0 0 -@tabularBorderWidth;
-            border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important;
+        .ui.vertical.right.tabbed.menu .active.item {
+            background: @tabbedActiveBackground;
+            color: @tabbedActiveColor;
+            border-color: @tabbedBorderColor;
+            margin: 0 0 0 -@tabbedBorderWidth;
+            border-radius: 0 @tabbedBorderRadius @tabbedBorderRadius 0 !important;
         }
     }
 
     /* Dropdown */
-    .ui.tabular.menu .active.dropdown.item {
+    .ui.tabbed.menu .active.dropdown.item {
         margin-bottom: 0;
-        border-left: @tabularBorderWidth solid transparent;
-        border-right: @tabularBorderWidth solid transparent;
-        border-top: @tabularOppositeBorderWidth solid transparent;
+        border-left: @tabbedBorderWidth solid transparent;
+        border-right: @tabbedBorderWidth solid transparent;
+        border-top: @tabbedOppositeBorderWidth 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.tabbed.menu .active.item,
+        .ui.inverted.tabbed.menu .active.item:hover {
+            background: @invertedTabbedActiveBackground;
+            border-color: @invertedTabbedBorderColor;
         }
-        .ui.inverted.tabular.menu .item:not(.active):hover {
-            color: @invertedTabularHoveredTextColor;
+        .ui.inverted.tabbed.menu .item:not(.active):hover {
+            color: @invertedTabbedHoveredTextColor;
             background: transparent;
             cursor: pointer;
         }
@@ -1643,8 +1643,8 @@ Floated Menu / Item
         text-align: center;
         justify-content: center;
     }
-    .ui.attached[class*="equal width"].menu@{notTabular},
-    .ui.attached.item.menu@{notTabular} {
+    .ui.attached[class*="equal width"].menu@{notTabbed},
+    .ui.attached.item.menu@{notTabbed} {
         margin: 0 @attachedHorizontalOffset !important;
     }
 
@@ -1903,22 +1903,22 @@ Floated Menu / Item
         border-radius: 0 0 0 @borderRadius;
     }
 
-    /* Tabular Attached */
-    .ui.attached.menu@{notTabular}@{notText} {
+    /* Tabbed Attached */
+    .ui.attached.menu@{notTabbed}@{notText} {
         border: @attachedBorder;
     }
     & when (@variationMenuInverted) {
         .ui.attached.inverted.menu {
             border: none;
         }
-        & when (@variationMenuTabular) {
-            .ui[class*="top attached"].inverted.tabular.menu {
-                border-bottom: @invertedTabularBorder;
+        & when (@variationMenuTabbed) {
+            .ui[class*="top attached"].inverted.tabbed.menu {
+                border-bottom: @invertedTabbedBorder;
             }
         }
     }
-    & when (@variationMenuTabular) {
-        .ui.attached.tabular.menu {
+    & when (@variationMenuTabbed) {
+        .ui.attached.tabbed.menu {
             margin-left: 0;
             margin-right: 0;
             width: 100%;
@@ -1936,7 +1936,7 @@ Floated Menu / Item
         & .item:first-child::before {
             display: none;
         }
-        &@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
+        &@{notSecondary}@{notText}@{notTabbed}@{notBorderless} .item {
             &:last-of-type,
             &:last-child {
                 border-right: @dividerSize solid @dividerBackground;
@@ -1944,7 +1944,7 @@ Floated Menu / Item
         }
     }
     & when (@variationMenuWrapped) {
-        .ui.wrapped.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
+        .ui.wrapped.menu@{notSecondary}@{notText}@{notTabbed}@{notBorderless} .item {
             &:first-child {
                 border-bottom-left-radius: 0;
             }
@@ -2018,5 +2018,10 @@ Floated Menu / Item
     }
 }
 
+& when (@variationMenuTabbedLegacyTabular) {
+    .tabbed:extend(.tabular all) {
+    }
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/themes/chubby/collections/menu.variables

@@ -37,4 +37,4 @@
 @paginationActiveBackground: @lightGrey;
 
 @borderColor: @darkWhite;
-@tabularBorderWidth: 2px;
+@tabbedBorderWidth: 2px;

package/src/themes/default/collections/menu.variables

@@ -304,28 +304,28 @@
 @iconMenuItemColor: @black;
 @iconMenuInvertedItemColor: @white;
 
-/* Tabular */
-@tabularBorderColor: @solidBorderColor;
-@tabularBackgroundColor: transparent;
-@tabularBackground: none @tabularBackgroundColor;
-@tabularBorderWidth: 1px;
-@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
-@tabularVerticalPadding: @itemVerticalPadding;
-@tabularHorizontalPadding: @relativeHuge;
-@tabularBorderRadius: @defaultBorderRadius;
-@tabularTextColor: @itemTextColor;
+/* Tabbed */
+@tabbedBorderColor: @solidBorderColor;
+@tabbedBackgroundColor: transparent;
+@tabbedBackground: none @tabbedBackgroundColor;
+@tabbedBorderWidth: 1px;
+@tabbedOppositeBorderWidth: @tabbedBorderWidth + 1px;
+@tabbedVerticalPadding: @itemVerticalPadding;
+@tabbedHorizontalPadding: @relativeHuge;
+@tabbedBorderRadius: @defaultBorderRadius;
+@tabbedTextColor: @itemTextColor;
 
-@tabularHoveredTextColor: @hoveredTextColor;
+@tabbedHoveredTextColor: @hoveredTextColor;
 
-@tabularVerticalBackground: none @tabularBackgroundColor;
+@tabbedVerticalBackground: none @tabbedBackgroundColor;
 
-@tabularFluidOffset: 1px;
-@tabularFluidWidth: e(%("calc(100%% + %d)", @tabularFluidOffset * 2));
+@tabbedFluidOffset: 1px;
+@tabbedFluidWidth: e(%("calc(100%% + %d)", @tabbedFluidOffset * 2));
 
-@tabularActiveBackground: none @white;
-@tabularActiveColor: @selectedTextColor;
-@tabularActiveBoxShadow: none;
-@tabularActiveWeight: @bold;
+@tabbedActiveBackground: none @white;
+@tabbedActiveColor: @selectedTextColor;
+@tabbedActiveBoxShadow: none;
+@tabbedActiveWeight: @bold;
 
 /* Pagination */
 @paginationMinWidth: 3em;
@@ -466,8 +466,8 @@
 @invertedDropdownSelectedItemBackground: @strongTransparentWhite;
 @invertedDropdownSelectedItemColor: @invertedDropdownItemColor;
 
-/* Tabular */
-@invertedTabularBorderColor: @solidWhiteBorderColor;
-@invertedTabularBorder: @borderWidth solid @invertedTabularBorderColor;
-@invertedTabularActiveBackground: none @black;
-@invertedTabularHoveredTextColor: @invertedHoveredTextColor;
+/* Tabbed */
+@invertedTabbedBorderColor: @solidWhiteBorderColor;
+@invertedTabbedBorder: @borderWidth solid @invertedTabbedBorderColor;
+@invertedTabbedActiveBackground: none @black;
+@invertedTabbedHoveredTextColor: @invertedHoveredTextColor;

package/src/themes/default/globals/variation.variables

@@ -320,7 +320,7 @@
 @variationMenuSecondary: true;
 @variationMenuPointing: true;
 @variationMenuVertical: true;
-@variationMenuTabular: true;
+@variationMenuTabbed: true;
 @variationMenuPagination: true;
 @variationMenuText: true;
 @variationMenuFluid: true;
@@ -337,6 +337,7 @@
 @variationMenuEqualWidth: true;
 @variationMenuWrapping: true;
 @variationMenuWrapped: true;
+@variationMenuTabbedLegacyTabular: false;
 @variationMenuSizes: @variationAllSizes;
 @variationMenuColors: @variationAllColors;