Merge pull request #1055 from bolt-design-system/feature/bolt-tool-ie…

…11-only-mixin

Dev tool: IE11-only SCSS mixin

packages/components/lists/bolt-li/src/li.scss

@@ -108,7 +108,7 @@ bolt-ol {
 }
 
 // [Mai] This is an IE specific fix to center the number inside the circle. IE calculates line-height differently.
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@include bolt-ie11-only {
   .c-bolt-li--ol-item:before {
     line-height: $bolt-line-height--medium;
   }

packages/core/styles/02-tools/tools-ie11-only/README.md

@@ -0,0 +1,9 @@
+# @bolt/tools-ie11-only
+Define CSS that only targets Internet Explorer 11.
+
+- [Sass Docs](https://www.boltdesignsystem.com/docs/#tools: ie11-only)
+
+## Install
+```bash
+npm install @bolt/tools-ie11-only
+```

packages/core/styles/02-tools/tools-ie11-only/_tools-ie11-only.scss

@@ -0,0 +1,21 @@
+/* ------------------------------------ *\
+   IE11 Only CSS
+\* ------------------------------------ */
+
+////
+/// @group Tools: Utilities
+/// @author Mike Mai
+////
+
+/// Define CSS that only targets Internet Explorer 11.
+/// @example scss
+/// .element {
+///    @include bolt-ie11-only {
+///      display: block;
+///    }
+/// }
+@mixin bolt-ie11-only() {
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    @content;
+  }
+}

packages/core/styles/index.scss

@@ -39,6 +39,7 @@
 @import '02-tools/tools-font-size/_tools-font-size';
 @import '02-tools/tools-font-weight/_tools-font-weight';
 @import '02-tools/tools-full-bleed/_tools-full-bleed';
+@import '02-tools/tools-ie11-only/_tools-ie11-only';
 @import '02-tools/tools-linear-interpolation/_tools-linear-interpolation';
 @import '02-tools/tools-list-remove/_tools-list-remove';
 @import '02-tools/tools-list-sort/_tools-list-sort';