fomantic-ui 2.10.0-beta.4 → 2.10.0-beta.40

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/definitions/collections/table.less

@@ -1667,19 +1667,19 @@
     .ui.basic.table > tfoot {
         box-shadow: none;
     }
-    .ui.basic.table > thead > tr > th,
-    .ui.basic.table > tbody > tr > th,
-    .ui.basic.table > tfoot > tr > th,
-    .ui.basic.table > tr > th {
+    .ui.ui.basic.table > thead > tr > th,
+    .ui.ui.basic.table > tbody > tr > th,
+    .ui.ui.basic.table > tfoot > tr > th,
+    .ui.ui.basic.table > tr > th {
         background: @basicTableHeaderBackground;
         border-left: @basicTableHeaderDivider;
     }
     .ui.basic.table > tbody > tr {
         border-bottom: @basicTableCellBorder;
     }
-    .ui.basic.table > tbody > tr > td,
-    .ui.basic.table > tfoot > tr > td,
-    .ui.basic.table > tr > td {
+    .ui.ui.basic.table > tbody > tr > td,
+    .ui.ui.basic.table > tfoot > tr > td,
+    .ui.ui.basic.table > tr > td {
         background: @basicTableCellBackground;
     }
     & when (@variationTableStriped) {

package/src/definitions/elements/button.less

@@ -658,7 +658,6 @@
     @media only screen and (max-width: @largestMobileScreen) {
         .ui.stackable.buttons {
             flex-direction: column;
-            width: 100%;
             & .button:first-child {
                 border-bottom-left-radius: 0;
                 border-top-right-radius: @borderRadius;

package/src/definitions/elements/label.less

@@ -471,6 +471,7 @@ a.ui.label {
     .ui.card .image > .ribbon.label {
         position: absolute;
         top: @ribbonImageTopDistance;
+        z-index: 1;
     }
     .ui.card .image > .ui.ribbon.label,
     .ui.image > .ui.ribbon.label {

package/src/definitions/globals/site.js

@@ -20,31 +20,29 @@
         : globalThis;
 
     $.fn.site = function (parameters) {
-        var
-            time           = Date.now(),
-            performance    = [],
+        let time = Date.now();
+        let performance = [];
 
-            query          = arguments[0],
-            methodInvoked  = typeof query === 'string',
-            queryArguments = [].slice.call(arguments, 1),
+        let query = arguments[0];
+        let methodInvoked = typeof query === 'string';
+        let queryArguments = [].slice.call(arguments, 1);
 
-            settings        = $.isPlainObject(parameters)
-                ? $.extend(true, {}, $.site.settings, parameters)
-                : $.extend({}, $.site.settings),
+        let settings = $.isPlainObject(parameters)
+            ? $.extend(true, {}, $.site.settings, parameters)
+            : $.extend({}, $.site.settings);
 
-            namespace       = settings.namespace,
-            error           = settings.error,
+        let namespace = settings.namespace;
+        let error = settings.error;
 
-            moduleNamespace = 'module-' + namespace,
+        let moduleNamespace = 'module-' + namespace;
 
-            $document       = $(document),
-            $module         = $document,
-            element         = this,
-            instance        = $module.data(moduleNamespace),
+        let $document = $(document);
+        let $module = $document;
+        let element = this;
+        let instance = $module.data(moduleNamespace);
 
-            module,
-            returnedValue
-        ;
+        let module;
+        let returnedValue;
         module = {
 
             initialize: function () {
@@ -55,8 +53,7 @@
                 module.verbose('Storing instance of site', module);
                 instance = module;
                 $module
-                    .data(moduleNamespace, module)
-                ;
+                    .data(moduleNamespace, module);
             },
 
             normalize: function () {
@@ -78,9 +75,7 @@
 
             enabled: {
                 modules: function (modules) {
-                    var
-                        enabledModules = []
-                    ;
+                    let enabledModules = [];
                     modules = modules || settings.modules;
                     $.each(modules, function (index, name) {
                         if (module.moduleExists(name)) {
@@ -94,9 +89,7 @@
 
             disabled: {
                 modules: function (modules) {
-                    var
-                        disabledModules = []
-                    ;
+                    let disabledModules = [];
                     modules = modules || settings.modules;
                     $.each(modules, function (index, name) {
                         if (!module.moduleExists(name)) {
@@ -119,12 +112,10 @@
                         ? modifyExisting
                         : true;
                     $.each(modules, function (index, name) {
-                        var
-                            namespace = module.moduleExists(name)
-                                ? $.fn[name].settings.namespace || false
-                                : true,
-                            $existingModules
-                        ;
+                        let namespace = module.moduleExists(name)
+                            ? $.fn[name].settings.namespace || false
+                            : true;
+                        let $existingModules;
                         if (module.moduleExists(name)) {
                             module.verbose('Changing default setting', setting, value, name);
                             $.fn[name].settings[setting] = value;
@@ -146,9 +137,7 @@
                         ? modifyExisting
                         : true;
                     $.each(modules, function (index, name) {
-                        var
-                            $existingModules
-                        ;
+                        let $existingModules;
                         if (module.moduleExists(name)) {
                             module.verbose('Changing default setting', newSettings, name);
                             $.extend(true, $.fn[name].settings, newSettings);
@@ -224,8 +213,7 @@
             destroy: function () {
                 module.verbose('Destroying previous site for', $module);
                 $module
-                    .removeData(moduleNamespace)
-                ;
+                    .removeData(moduleNamespace);
             },
 
             cache: {},
@@ -274,11 +262,9 @@
             },
             performance: {
                 log: function (message) {
-                    var
-                        currentTime,
-                        executionTime,
-                        previousTime
-                    ;
+                    let currentTime;
+                    let executionTime;
+                    let previousTime;
                     if (settings.performance) {
                         currentTime = Date.now();
                         previousTime = time || currentTime;
@@ -297,10 +283,8 @@
                     }, 500);
                 },
                 display: function () {
-                    var
-                        title = settings.name + ':',
-                        totalTime = 0
-                    ;
+                    let title = settings.name + ':';
+                    let totalTime = 0;
                     time = false;
                     clearTimeout(module.performance.timer);
                     $.each(performance, function (index, data) {
@@ -322,22 +306,19 @@
                 },
             },
             invoke: function (query, passedArguments, context) {
-                var
-                    object = instance,
-                    maxDepth,
-                    found,
-                    response
-                ;
+                let object = instance;
+                let maxDepth;
+                let found;
+                let response;
                 passedArguments = passedArguments || queryArguments;
                 context = context || element;
                 if (typeof query === 'string' && object !== undefined) {
                     query = query.split(/[ .]/);
                     maxDepth = query.length - 1;
                     $.each(query, function (depth, value) {
-                        var camelCaseValue = depth !== maxDepth
+                        let camelCaseValue = depth !== maxDepth
                             ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                            : query
-                        ;
+                            : query;
                         if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
                             object = object[camelCaseValue];
                         } else if (object[camelCaseValue] !== undefined) {