fomantic-ui 2.9.0-beta.272 → 2.9.0-beta.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.272+5e88144",
+  "version": "2.9.0-beta.275+3f2aae7",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -64,7 +64,7 @@
     "less": "^3.7.1 || ^4.0.0",
     "map-stream": "^0.1.0",
     "merge-stream": "^2.0.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.4",
     "normalize-path": "^3.0.0",
     "replace-ext": "^1.0.0",
     "require-dot-file": "^0.4.0",
@@ -75,7 +75,7 @@
     "all-contributors-cli": "^6.7.0",
     "auto-changelog": "^1.15.0",
     "node-fetch": "^2.6.0",
-    "semver": "^6.3.0"
+    "semver": "^7.3.5"
   },
   "engines": {
     "node": ">=10.15.3",

package/src/definitions/collections/form.less

@@ -345,7 +345,7 @@
   background: @promptBackground !important;
   border: @promptBorder !important;
   color: @promptTextColor !important;
-  & li:before {
+  & li::before {
     color: @promptTextColor;
   }
 }
@@ -355,8 +355,8 @@
     vertical-align: top;
     margin: @inlinePromptMargin;
   }
-  .ui.form .inline.fields .field .prompt:before,
-  .ui.form .inline.field .prompt:before {
+  .ui.form .inline.fields .field .prompt::before,
+  .ui.form .inline.field .prompt::before {
     border-width: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth;
     bottom: auto;
     right: auto;
@@ -541,7 +541,7 @@
       color: @c;
     }
 
-    .ui.form .fields.@{state} .field .ui.label, 
+    .ui.form .fields.@{state} .field .ui.label,
     .ui.form .field.@{state} .ui.label {
       background-color: @lbg;
     }
@@ -734,13 +734,13 @@
     .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
       color: @c;
     }
-    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before {
+    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label::before,
+    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label::before {
       background: @bg;
       border-color: @bdc;
     }
-    .ui.form .fields.@{state} .field .checkbox label:after,
-    .ui.form .field.@{state} .checkbox label:after {
+    .ui.form .fields.@{state} .field .checkbox label::after,
+    .ui.form .field.@{state} .checkbox label::after {
       color: @c;
     }
 
@@ -783,7 +783,7 @@
     cursor: default;
     pointer-events: none;
   }
-  .ui.loading.form:before {
+  .ui.loading.form::before {
     position: absolute;
     content: '';
     top: 0;
@@ -794,11 +794,11 @@
     z-index: @loaderDimmerZIndex;
   }
 
-  .ui.loading.form.segments:before {
+  .ui.loading.form.segments::before {
     border-radius: @defaultBorderRadius;
   }
 
-  .ui.loading.form:after {
+  .ui.loading.form::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -827,27 +827,27 @@
        Required Field
   ---------------------*/
 
-  .ui.form .required.fields:not(.grouped) > .field > label:after,
-  .ui.form .required.fields.grouped > label:after,
-  .ui.form .required.field > label:after,
-  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-  .ui.form .required.field > .checkbox:after,
-  .ui.form label.required:after {
+  .ui.form .required.fields:not(.grouped) > .field > label::after,
+  .ui.form .required.fields.grouped > label::after,
+  .ui.form .required.field > label::after,
+  .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+  .ui.form .required.field > .checkbox::after,
+  .ui.form label.required::after {
     margin: @requiredMargin;
     content: @requiredContent;
     color: @requiredColor;
   }
 
-  .ui.form .required.fields:not(.grouped) > .field > label:after,
-  .ui.form .required.fields.grouped > label:after,
-  .ui.form .required.field > label:after,
-  .ui.form label.required:after {
+  .ui.form .required.fields:not(.grouped) > .field > label::after,
+  .ui.form .required.fields.grouped > label::after,
+  .ui.form .required.field > label::after,
+  .ui.form label.required::after {
     display: inline-block;
     vertical-align: top;
   }
 
-  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-  .ui.form .required.field > .checkbox:after {
+  .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+  .ui.form .required.field > .checkbox::after {
     position: absolute;
     top: 0;
     left: 100%;
@@ -878,7 +878,7 @@
   .ui.inverted.loading.form {
     color: @invertedLoaderLineColor;
   }
-  .ui.inverted.loading.form:before {
+  .ui.inverted.loading.form::before {
     background: @loaderInvertedDimmerColor;
   }
   /* Inverted Field */

package/src/definitions/collections/grid.less

@@ -1096,7 +1096,7 @@
     .ui[class*="vertically divided"].grid > .row {
       position: relative;
     }
-    .ui[class*="vertically divided"].grid > .row:before {
+    .ui[class*="vertically divided"].grid > .row::before {
       position: absolute;
       content: "";
       top: 0;
@@ -1119,7 +1119,7 @@
   }
   & when (@variationGridVertical) {
     /* First Row Vertically Divided */
-    .ui[class*="vertically divided"].grid > .row:first-child:before {
+    .ui[class*="vertically divided"].grid > .row:first-child::before {
       box-shadow: none;
     }
   }
@@ -1134,20 +1134,20 @@
       box-shadow: none;
     }
     & when (@variationGridVertical) {
-      .ui.inverted[class*="vertically divided"].grid > .row:before {
+      .ui.inverted[class*="vertically divided"].grid > .row::before {
         box-shadow: @verticallyDividedInvertedBorder;
       }
     }
   }
   & when (@variationGridRelaxed) and (@variationGridVertical) {
     /* Relaxed */
-    .ui.relaxed[class*="vertically divided"].grid > .row:before {
+    .ui.relaxed[class*="vertically divided"].grid > .row::before {
       margin-left: (@relaxedGutterWidth / 2);
       margin-right: (@relaxedGutterWidth / 2);
       width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
     }
     & when (@variationGridVeryRelaxed) {
-      .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+      .ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
         margin-left: (@veryRelaxedGutterWidth / 2);
         margin-right: (@veryRelaxedGutterWidth / 2);
         width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
@@ -1391,10 +1391,10 @@
         box-shadow: none;
       }
       /* Vertically Divided Reversed */
-      .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+      .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
         box-shadow: @verticallyDividedBorder;
       }
-      .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+      .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
         box-shadow: none;
       }
     }
@@ -1430,10 +1430,10 @@
         box-shadow: none;
       }
       /* Vertically Divided Reversed */
-      .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+      .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
         box-shadow: @verticallyDividedBorder;
       }
-      .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+      .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
         box-shadow: none;
       }
     }
@@ -1469,10 +1469,10 @@
         box-shadow: none;
       }
       /* Vertically Divided Reversed */
-      .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+      .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
         box-shadow: @verticallyDividedBorder;
       }
-      .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+      .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
         box-shadow: none;
       }
     }

package/src/definitions/collections/menu.less

@@ -39,7 +39,7 @@
   min-height: @minHeight;
 }
 
-.ui.menu:after {
+.ui.menu::after {
   content: '';
   display: block;
   height: 0;
@@ -98,7 +98,7 @@
 }
 
 /* Border */
-.ui.menu .item:before {
+.ui.menu .item::before {
   position: absolute;
   content: '';
   top: 0;
@@ -373,7 +373,7 @@
 ---------------*/
 
 /* Menu divider shouldn't apply */
-.ui.menu .list .item:before {
+.ui.menu .list .item::before {
   background: none !important;
 }
 
@@ -384,7 +384,7 @@
 
   /* Show vertical dividers below last */
 
-  .ui.vertical.sidebar.menu > .item:first-child:before {
+  .ui.vertical.sidebar.menu > .item:first-child::before {
     display: block !important;
   }
   .ui.vertical.sidebar.menu > .item::before {
@@ -576,7 +576,7 @@ Floated Menu / Item
 
 
   /*--- Border ---*/
-  .ui.vertical.menu .item:before {
+  .ui.vertical.menu .item::before {
     position: absolute;
     content: '';
     top: 0;
@@ -586,7 +586,7 @@ Floated Menu / Item
     background: @verticalDividerBackground;
   }
 
-  .ui.vertical.menu .item:first-child:before {
+  .ui.vertical.menu .item:first-child::before {
     display: none !important;
   }
 
@@ -605,7 +605,7 @@ Floated Menu / Item
   .ui.vertical.menu .item .menu .link.item:hover {
     color: @darkTextColor;
   }
-  .ui.vertical.menu .menu .item:before {
+  .ui.vertical.menu .menu .item::before {
     display: none;
   }
 
@@ -659,7 +659,7 @@ Floated Menu / Item
     padding: @tabularVerticalPadding @tabularHorizontalPadding;
     color: @tabularTextColor;
   }
-  .ui.tabular.menu .item:before {
+  .ui.tabular.menu .item::before {
     display: none;
   }
 
@@ -807,7 +807,7 @@ Floated Menu / Item
   .ui.compact.menu .item:last-child {
     border-radius: 0 @borderRadius @borderRadius 0;
   }
-  .ui.pagination.menu .item:last-child:before {
+  .ui.pagination.menu .item:last-child::before {
     display: none;
   }
 
@@ -856,7 +856,7 @@ Floated Menu / Item
   }
 
   /* No Divider */
-  .ui.secondary.menu .item:before {
+  .ui.secondary.menu .item::before {
     display: none !important;
   }
 
@@ -1003,7 +1003,7 @@ Floated Menu / Item
     .ui.secondary.pointing.menu .text.item {
       box-shadow: none !important;
     }
-    .ui.secondary.pointing.menu .item:after {
+    .ui.secondary.pointing.menu .item::after {
       display: none;
     }
 
@@ -1119,8 +1119,8 @@ Floated Menu / Item
   }
 
   /* Border */
-  .ui.text.menu .item:before,
-  .ui.text.menu .menu .item:before {
+  .ui.text.menu .item::before,
+  .ui.text.menu .menu .item::before {
     display: none !important;
   }
 
@@ -1197,7 +1197,7 @@ Floated Menu / Item
   }
   & when (@variationMenuPointing) {
     /* Disable Bariations */
-    .ui.text.pointing.menu .active.item:after {
+    .ui.text.pointing.menu .active.item::after {
       box-shadow: none;
     }
   }
@@ -1251,7 +1251,7 @@ Floated Menu / Item
   }
 
   /* Icon Glyph */
-  .ui.icon.menu i.icon:before {
+  .ui.icon.menu i.icon::before {
     opacity: 1;
   }
 
@@ -1323,11 +1323,15 @@ Floated Menu / Item
   @media only screen and (max-width: @largestMobileScreen) {
     .ui.stackable.menu {
       flex-direction: column;
+
+      &.pointing .active.item::after when (@variationMenuPointing) {
+        display: none;
+      }
     }
     .ui.stackable.menu .item {
       width: 100% !important;
     }
-    .ui.stackable.menu .item:before {
+    .ui.stackable.menu .item::before {
       position: absolute;
       content: '';
       top: auto;
@@ -1403,11 +1407,11 @@ Floated Menu / Item
   }
 
   /*--- Border ---*/
-  .ui.inverted.menu .item:before {
+  .ui.inverted.menu .item::before {
     background: @invertedDividerBackground;
   }
   & when (@variationMenuVertical) {
-    .ui.vertical.inverted.menu .item:before {
+    .ui.vertical.inverted.menu .item::before {
       background: @invertedVerticalDividerBackground;
     }
     /* Sub Menu */
@@ -1462,7 +1466,7 @@ Floated Menu / Item
     }
   }
   & when (@variationMenuPointing) {
-    .ui.inverted.pointing.menu .active.item:after {
+    .ui.inverted.pointing.menu .active.item::after {
       background: @invertedArrowActiveColor;
       margin: 0 !important;
       box-shadow: none !important;
@@ -1476,7 +1480,7 @@ Floated Menu / Item
     color: @invertedActiveHoverColor !important;
   }
   & when (@variationMenuPointing) {
-    .ui.inverted.pointing.menu .active.item:hover:after {
+    .ui.inverted.pointing.menu .active.item:hover::after {
       background: @invertedArrowActiveHoverColor;
     }
   }
@@ -1491,7 +1495,7 @@ Floated Menu / Item
     float: left;
     margin: 0 @floatedDistance 0 0;
   }
-  .ui.floated.menu .item:last-child:before {
+  .ui.floated.menu .item:last-child::before {
     display: none;
   }
 
@@ -1525,7 +1529,7 @@ Floated Menu / Item
         .ui.ui.inverted.@{color}.menu {
           background-color: @c;
         }
-        .ui.inverted.@{color}.menu .item:before {
+        .ui.inverted.@{color}.menu .item::before {
           background-color: @invertedColoredDividerBackground;
         }
         .ui.ui.inverted.@{color}.menu .active.item {
@@ -1541,7 +1545,7 @@ Floated Menu / Item
   }
 
   & when (@variationMenuPointing) {
-    .ui.ui.ui.inverted.pointing.menu .active.item:after {
+    .ui.ui.ui.inverted.pointing.menu .active.item::after {
       background-color: inherit;
     }
   }
@@ -1576,9 +1580,9 @@ Floated Menu / Item
      Borderless
   ---------------*/
 
-  .ui.borderless.menu .item:before,
-  .ui.borderless.menu .item .menu .item:before,
-  .ui.menu .borderless.item:before {
+  .ui.borderless.menu .item::before,
+  .ui.borderless.menu .item .menu .item::before,
+  .ui.menu .borderless.item::before {
     background: none !important;
   }
 }
@@ -1603,7 +1607,7 @@ Floated Menu / Item
   .ui.compact.menu:not(.secondary) .item:last-child {
     border-radius: 0 @borderRadius @borderRadius 0;
   }
-  .ui.compact.menu .item:last-child:before {
+  .ui.compact.menu .item:last-child::before {
     display: none;
   }
   & when (@variationMenuVertical) {
@@ -1646,7 +1650,7 @@ Floated Menu / Item
   margin: 0 @attachedHorizontalOffset !important;
 }
 
-.ui.item.menu .item:last-child:before {
+.ui.item.menu .item:last-child::before {
   display: none;
 }
 
@@ -1758,7 +1762,7 @@ Floated Menu / Item
          Pointing
   --------------------*/
 
-  .ui.pointing.menu .item:after {
+  .ui.pointing.menu .item::after {
     visibility: hidden;
     position: absolute;
     content: '';
@@ -1779,7 +1783,7 @@ Floated Menu / Item
     transition: @arrowTransition;
   }
   & when (@variationMenuVertical) {
-    .ui.vertical.pointing.menu .item:after {
+    .ui.vertical.pointing.menu .item::after {
       position: absolute;
       top: 50%;
       right: 0;
@@ -1794,45 +1798,52 @@ Floated Menu / Item
       border-right: @arrowBorder;
     }
   }
-  .ui.pointing.menu .ui.dropdown .menu .item:after,
-  .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
+  .ui.pointing.menu .ui.dropdown .menu .item::after,
+  .ui.vertical.pointing.menu .ui.dropdown .menu .item::after {
     display: none;
   }
 
   /* Active */
-  .ui.pointing.menu .active.item:after {
+  .ui.pointing.menu .active.item::after {
     visibility: visible;
   }
-  .ui.pointing.menu .active.dropdown.item:after {
+  .ui.pointing.menu .active.dropdown.item::after {
     visibility: hidden;
   }
 
   /* Don't double up pointers */
-  .ui.pointing.menu .dropdown.active.item:after,
-  .ui.pointing.menu .active.item .menu .active.item:after {
+  .ui.pointing.menu .dropdown.active.item::after,
+  .ui.pointing.menu .active.item .menu .active.item::after {
     display: none;
   }
 
   /* Colors */
-  .ui.pointing.menu .active.item:hover:after {
+  .ui.pointing.menu .active.item:hover::after {
     background-color: @arrowHoverColor;
   }
-  .ui.pointing.menu .active.item:after {
+  .ui.pointing.menu .active.item::after {
     background-color: @arrowActiveColor;
   }
-  .ui.pointing.menu .active.item:hover:after {
+  .ui.pointing.menu .active.item:hover::after {
     background-color: @arrowActiveHoverColor;
   }
   & when (@variationMenuVertical) {
-    .ui.vertical.pointing.menu .active.item:hover:after {
+    .ui.vertical.pointing.menu .active.item:hover::after {
       background-color: @arrowVerticalHoverColor;
     }
-    .ui.vertical.pointing.menu .active.item:after {
+    .ui.vertical.pointing.menu .active.item::after {
       background-color: @arrowVerticalActiveColor;
     }
-    .ui.vertical.pointing.menu .menu .active.item:after {
+    .ui.vertical.pointing.menu .menu .active.item::after {
       background-color: @arrowVerticalSubMenuColor;
     }
+    & when (@variationMenuFluid) and (@variationGridStackable) {
+      @media only screen and (max-width: @largestMobileScreen) {
+        .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after {
+          display: none;
+        }
+      }
+    }
   }
 }
 
@@ -1841,7 +1852,7 @@ Floated Menu / Item
     @color: @value;
     @c: @colors[@@color][color];
 
-    .ui.inverted.pointing.menu .@{color}.active.item:after {
+    .ui.inverted.pointing.menu .@{color}.active.item::after {
       background-color: @c;
     }
   })

package/src/definitions/collections/message.less

@@ -94,7 +94,7 @@
   margin: 0 0 @listItemMargin @listItemIndent;
   padding: 0;
 }
-.ui.message .list:not(.ui) li:before {
+.ui.message .list:not(.ui) li::before {
   position: absolute;
   content: '•';
   left: -1em;

package/src/definitions/collections/table.less

@@ -165,10 +165,10 @@
 .ui.table.segment {
   padding: 0;
 }
-.ui.table.segment:after {
+.ui.table.segment::after {
   display: none;
 }
-.ui.table.segment.stacked:after {
+.ui.table.segment.stacked::after {
   display: block;
 }
 
@@ -1431,7 +1431,7 @@
     user-select: none;
   }
 
-  .ui.sortable.table > thead > tr > th:after {
+  .ui.sortable.table > thead > tr > th::after {
     display: none;
     font-style: normal;
     font-weight: @normal;
@@ -1443,10 +1443,10 @@
     margin: 0 0 0 @sortableIconDistance;
     font-family: @sortableIconFont;
   }
-  .ui.sortable.table thead th.ascending:after {
+  .ui.sortable.table thead th.ascending::after {
     content: @sortableIconAscending;
   }
-  .ui.sortable.table thead th.descending:after {
+  .ui.sortable.table thead th.descending::after {
     content: @sortableIconDescending;
   }
 
@@ -1471,7 +1471,7 @@
   .ui.sortable.table:not(.basic) thead th.sorted {
     background: @sortableActiveBackground;
   }
-  .ui.sortable.table thead th.sorted:after {
+  .ui.sortable.table thead th.sorted::after {
     display: inline-block;
   }
 

package/src/definitions/elements/button.less

@@ -138,7 +138,7 @@
     pointer-events: @loadingPointerEvents;
     transition: @loadingTransition;
   }
-  .ui.loading.button:before {
+  .ui.loading.button::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -151,7 +151,7 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @invertedLoaderFillColor;
   }
-  .ui.loading.button:after {
+  .ui.loading.button::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -177,10 +177,10 @@
   }
 }
 & when (@variationButtonBasic){
-  .ui.basic.loading.button:not(.inverted):before {
+  .ui.basic.loading.button:not(.inverted)::before {
     border-color: @loaderFillColor;
   }
-  .ui.basic.loading.button:not(.inverted):after {
+  .ui.basic.loading.button:not(.inverted)::after {
     border-color: @loaderLineColor;
   }
 }
@@ -404,7 +404,7 @@
   }
 
   /* Tag */
-  .ui.labeled.button > .tag.label:before {
+  .ui.labeled.button > .tag.label::before {
     width: @labeledTagLabelSize;
     height: @labeledTagLabelSize;
   }
@@ -1036,10 +1036,10 @@
   }
 
 
-  .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 {
+  .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%;
@@ -1072,7 +1072,7 @@
   }
 
   /* Loading Icon in Labeled Button */
-  .ui.labeled.icon.button > .loading.icon:before {
+  .ui.labeled.icon.button > .loading.icon::before {
     animation: loader 2s linear infinite;
   }
 }
@@ -1126,7 +1126,7 @@
     z-index: @orZIndex;
   }
 
-  .ui.buttons .or:before {
+  .ui.buttons .or::before {
     position: absolute;
     text-align: center;
     border-radius: @circularRadius;
@@ -1152,7 +1152,7 @@
     box-shadow: @orBoxShadow;
   }
 
-  .ui.buttons .or[data-text]:before {
+  .ui.buttons .or[data-text]::before {
     content: attr(data-text);
   }
 
@@ -1161,7 +1161,7 @@
     width: 0 !important;
   }
 
-  .ui.fluid.buttons .or:after {
+  .ui.fluid.buttons .or::after {
     display: none;
   }
 
@@ -1865,7 +1865,7 @@
   }
 
   /* Clearfix */
-  .ui.buttons:after {
+  .ui.buttons::after {
     content: ".";
     display: block;
     height: 0;