feat: Add "is-pixelated" class for avatars with styles for all browsers

Author: besasam

docs/script.js

@@ -346,20 +346,20 @@ const sampleCollection = [
   },
   {
     title: 'avatars',
-    description: 'It is recommended to "image-rendering: pixelated".',
+    description: 'It is recommended to use the class "is-pixelated".',
     showCode: false,
-    code: `<img class="nes-avatar" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+    code: `<img class="nes-avatar is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
 
-<img class="nes-avatar is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
-<img class="nes-avatar is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
-<img class="nes-avatar is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
+<img class="nes-avatar is-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
+<img class="nes-avatar is-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
 
 
-<img class="nes-avatar is-rounded" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
+<img class="nes-avatar is-rounded is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
 
-<img class="nes-avatar is-rounded is-small" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
-<img class="nes-avatar is-rounded is-medium" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">
-<img class="nes-avatar is-rounded is-large" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15" style="image-rendering: pixelated;">`,
+<img class="nes-avatar is-rounded is-small is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
+<img class="nes-avatar is-rounded is-medium is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">
+<img class="nes-avatar is-rounded is-large is-pixelated" alt="Gravatar image example" src="https://www.gravatar.com/avatar?s=15">`,
   },
   {
     title: 'balloons',

scss/elements/avatar.scss

@@ -7,6 +7,13 @@
   &.is-rounded {
     border-radius: 50px;
   }
+
+  &.is-pixelated {
+    -ms-interpolation-mode: nearest-neighbor;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: pixelated;
+  }
 }
 .nes-avatar {
   @include img-style(2px);

story/avatars/avatars.template.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export default () => {
   const isRounded = boolean('is-rounded', false);
+  const isPixelated = boolean('is-pixelated', false);
   const avatarSize = select('Avatar Classes', {
     default: '',
     'is-small': 'is-small',
@@ -15,12 +16,12 @@ export default () => {
     avatarSize,
     {
       'is-rounded': isRounded,
+      'is-pixelated': isPixelated,
     },
   );
 
   return `
     <img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
-      alt="Gravatar Image Example"
-      style="image-rendering: pixelated;">
+      alt="Gravatar Image Example">
   `;
 };