Merge pull request #325 from nostalgic-css/develop

Release v2.1.x

.storybook/config.js

@@ -1,9 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import {
-  addDecorator,
+  addParameters,
   configure,
 } from '@storybook/html';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 /* eslint-enable */
 
 import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved
@@ -14,7 +13,7 @@ function loadStories() {
   req.keys().forEach(filename => req(filename));
 }
 
-addDecorator(withBackgrounds([
+const options = [
   { name: 'Blue', value: 'blue' },
   { name: 'Green', value: 'green' },
   { name: 'Yellow', value: 'yellow' },
@@ -23,6 +22,8 @@ addDecorator(withBackgrounds([
   { name: 'Purple', value: 'purple' },
   { name: 'Black', value: 'black' },
   { name: 'White', value: 'white', default: true },
-]));
+];
+
+addParameters({ backgrounds: options });
 
 configure(loadStories, module);

package.json

@@ -49,9 +49,9 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
     "@semantic-release/exec": "^3.3.0",
-    "@storybook/addon-backgrounds": "^4.1.3",
-    "@storybook/addon-knobs": "^4.0.11",
-    "@storybook/html": "^4.0.11",
+    "@storybook/addon-backgrounds": "^5.0.0",
+    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/html": "^5.0.0",
     "autoprefixer": "^9.1.5",
     "babel-loader": "^8.0.4",
     "clean-css-cli": "^4.2.1",

scss/utilities/rounded-corners-mixin.scss

@@ -11,12 +11,27 @@
   border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
 }
 
+@mixin border-image-repeat() {
+  border-image-repeat: stretch;
+
+  // for chrome
+  @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+    border-image-repeat: space;
+  }
+
+  // for firefox
+  @supports (-moz-appearance: meterbar) {
+    border-image-repeat: stretch;
+  }
+}
+
 @mixin rounded-corners($isDark: false) {
   @extend %rounded-corner-defaults;
 
   border-image-slice: 3;
   border-image-width: 3;
-  border-image-repeat: stretch;
+
+  @include border-image-repeat();
 
   @if $isDark {
     @include border-image($color-white);
@@ -34,7 +49,8 @@
 
   border-image-slice: 2;
   border-image-width: 2;
-  border-image-repeat: stretch;
+
+  @include border-image-repeat();
 
   @if $isDark {
     @include compact-border-image($color-white);