fomantic-ui 2.10.0-beta.8 → 2.10.0-beta.81

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;
     }
 
@@ -1707,10 +1707,7 @@ Floated Menu / Item
 
     .ui.fixed.menu,
     .ui[class*="top fixed"].menu {
-        top: 0;
-        left: 0;
-        right: auto;
-        bottom: auto;
+        inset: 0 auto auto 0;
     }
     .ui[class*="top fixed"].menu {
         border-top: none;
@@ -1721,10 +1718,7 @@ Floated Menu / Item
         border-top: none;
         border-bottom: none;
         border-right: none;
-        top: 0;
-        right: 0;
-        left: auto;
-        bottom: auto;
+        inset: 0 0 auto auto;
         width: auto;
         height: 100%;
     }
@@ -1732,19 +1726,13 @@ Floated Menu / Item
         border-bottom: none;
         border-left: none;
         border-right: none;
-        bottom: 0;
-        left: 0;
-        top: auto;
-        right: auto;
+        inset: auto auto 0 0;
     }
     .ui[class*="left fixed"].menu {
         border-top: none;
         border-bottom: none;
         border-left: none;
-        top: 0;
-        left: 0;
-        right: auto;
-        bottom: auto;
+        inset: 0 auto auto 0;
         width: auto;
         height: 100%;
     }
@@ -1780,10 +1768,7 @@ Floated Menu / Item
     & when (@variationMenuVertical) {
         .ui.vertical.pointing.menu .item::after {
             position: absolute;
-            top: 50%;
-            right: 0;
-            bottom: auto;
-            left: auto;
+            inset: 50% 0 auto auto;
             transform: translateX(50%) translateY(-50%) rotate(45deg);
             margin: 0 -(@arrowBorderWidth / 2) 0 0;
             border: none;
@@ -1903,22 +1888,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 +1921,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 +1929,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 +2003,9 @@ Floated Menu / Item
     }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
+& when (@variationMenuTabbedLegacyTabular) {
+    .tabbed:extend(.tabular all) {
+    }
+}
+
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/collections/message.less

@@ -215,7 +215,7 @@
         margin-left: @attachedXOffset;
         margin-right: @attachedXOffset;
     }
-    .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
+    .ui.attached + .ui.attached.message:not(.top, .bottom) {
         margin-top: @attachedYOffset;
         border-radius: 0;
     }
@@ -443,5 +443,4 @@
     });
 }
 
-// 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) {
@@ -1987,5 +1987,4 @@
     });
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/button.less

@@ -633,15 +633,15 @@
     color: @iconColor;
 }
 
-.ui.button@{notIcon} > .icon:not(.button):not(.dropdown),
-.ui.button@{notIcon} > .icons:not(.button):not(.dropdown) {
+.ui.button@{notIcon} > .icon:not(.button, .dropdown),
+.ui.button@{notIcon} > .icons:not(.button, .dropdown) {
     margin: @iconMargin;
     vertical-align: @iconVerticalAlign;
 }
-.ui.button@{notIcon} > .icons:not(.button):not(.dropdown) > .icon {
+.ui.button@{notIcon} > .icons:not(.button, .dropdown) > .icon {
     vertical-align: @iconVerticalAlign;
 }
-.ui.button@{notIcon} > .right.icon:not(.button):not(.dropdown) {
+.ui.button@{notIcon} > .right.icon:not(.button, .dropdown) {
     margin: @rightIconMargin;
 }
 
@@ -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;
@@ -2042,5 +2041,4 @@
     }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/container.less

@@ -359,5 +359,4 @@
     }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/divider.less

@@ -33,7 +33,7 @@
     letter-spacing: @letterSpacing;
     color: @color;
     user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0);
 }
 
 /* --------------
@@ -295,5 +295,4 @@
     });
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/emoji.less

@@ -79,6 +79,7 @@ each(@size-map, {
     }
 });
 
+// stylelint-disable less/no-duplicate-variables
 each(@emoji-map, {
     & when (@variationEmojiColons) {
         em[data-emoji=":@{value}:"]::before {
@@ -93,5 +94,4 @@ each(@emoji-map, {
 
 /* rtl:end:ignore */
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/flag.less

@@ -47,6 +47,7 @@ each(@size-map, {
 /* rtl:begin:ignore */
 
 // for simplicity, class and alias names have to be unique and different to countrycode otherwise false
+// stylelint-disable less/no-duplicate-variables
 each(@flags, {
     @unicode: replace(@key, "@", "");
     @cc: replace(@flags[@@unicode][countrycode], "_", ".", "g");
@@ -83,5 +84,4 @@ each(@flags, {
 
 /* rtl:end:ignore */
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/header.less

@@ -17,7 +17,7 @@
 
 @import (multiple) "../../theme.config";
 
-@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered):not(.aligned)"));
+@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered, .aligned)"));
 @notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
 
 /*******************************
@@ -430,7 +430,7 @@
         border: @blockBorder;
         border-radius: @blockBorderRadius;
     }
-    .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    .ui.block.header:not(h1, h2, h3, h4, h5, h6) {
         font-size: @mediumBlock;
     }
     & when not (@variationHeaderSizes = false) {
@@ -477,7 +477,7 @@
     }
 
     /* Attached Sizes */
-    .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+    .ui.attached.header:not(h1, h2, h3, h4, h5, h6) {
         font-size: @mediumAttachedSize;
     }
     & when not (@variationHeaderSizes = false) {
@@ -494,9 +494,8 @@
         Sizing
 -------------------- */
 
-.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+.ui.header:not(h1, h2, h3, h4, h5, h6) {
     font-size: @mediumFontSize;
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/icon.less

@@ -408,10 +408,7 @@ i.icons {
     & when (@variationIconCorner) {
         /* Corner Icon */
         i.icons .corner.icon {
-            top: auto;
-            left: auto;
-            right: @cornerOffset;
-            bottom: @cornerOffset;
+            inset: auto @cornerOffset @cornerOffset auto;
             font-size: @cornerIconSize;
             text-shadow: @cornerIconShadow;
             &@{notRotated}@{notFlipped} {
@@ -419,28 +416,16 @@ i.icons {
             }
         }
         i.icons .icon.corner[class*="top right"] {
-            top: @cornerOffset;
-            left: auto;
-            right: @cornerOffset;
-            bottom: auto;
+            inset: @cornerOffset @cornerOffset auto auto;
         }
         i.icons .icon.corner[class*="top left"] {
-            top: @cornerOffset;
-            left: @cornerOffset;
-            right: auto;
-            bottom: auto;
+            inset: @cornerOffset auto auto @cornerOffset;
         }
         i.icons .icon.corner[class*="bottom left"] {
-            top: auto;
-            left: @cornerOffset;
-            right: auto;
-            bottom: @cornerOffset;
+            inset: auto auto @cornerOffset @cornerOffset;
         }
         i.icons .icon.corner[class*="bottom right"] {
-            top: auto;
-            left: auto;
-            right: @cornerOffset;
-            bottom: @cornerOffset;
+            inset: auto @cornerOffset @cornerOffset auto;
         }
         & when (@variationIconInverted) {
             i.icons .inverted.corner.icon {
@@ -490,31 +475,19 @@ i.icons {
         i.circular.icons .icon.corner,
         i.bordered.icons .icon.corner[class*="bottom right"],
         i.circular.icons .icon.corner[class*="bottom right"] {
-            top: auto;
-            left: auto;
-            right: @borderedGroupCornerOffset;
-            bottom: @borderedGroupCornerOffset;
+            inset: auto @borderedGroupCornerOffset @borderedGroupCornerOffset auto;
         }
         i.bordered.icons .icon.corner[class*="top right"],
         i.circular.icons .icon.corner[class*="top right"] {
-            top: @borderedGroupCornerOffset;
-            left: auto;
-            right: @borderedGroupCornerOffset;
-            bottom: auto;
+            inset: @borderedGroupCornerOffset @borderedGroupCornerOffset auto auto;
         }
         i.bordered.icons .icon.corner[class*="top left"],
         i.circular.icons .icon.corner[class*="top left"] {
-            top: @borderedGroupCornerOffset;
-            left: @borderedGroupCornerOffset;
-            right: auto;
-            bottom: auto;
+            inset: @borderedGroupCornerOffset auto auto @borderedGroupCornerOffset;
         }
         i.bordered.icons .icon.corner[class*="bottom left"],
         i.circular.icons .icon.corner[class*="bottom left"] {
-            top: auto;
-            left: @borderedGroupCornerOffset;
-            right: auto;
-            bottom: @borderedGroupCornerOffset;
+            inset: auto auto @borderedGroupCornerOffset @borderedGroupCornerOffset;
         }
     }
 }
@@ -630,6 +603,7 @@ i.icons {
     }
 
     .generateIcons(@icon-duotone-map);
+    // stylelint-disable less/no-duplicate-variables
     .generateIcons(@icon-duotone-secondary-map, false, after);
 
     & when (@variationIconAliases) {
@@ -662,5 +636,4 @@ i.icons {
     }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";

package/src/definitions/elements/image.less

@@ -307,5 +307,4 @@ img.ui.image {
     }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
 @import (multiple, optional) "../../overrides.less";