Add not-visuallyhidden class

This allows for toggling whether an element is hidden or not responsively (e.g. should be hidden on mobile but visible on medium screens and upwards).

Author: opdavies

index.js

@@ -3,6 +3,17 @@ module.exports = function (variants) {
     const className = 'visuallyhidden';
     const focusClassName = 'focusable';
 
+    const original = {
+      clip: 'auto',
+      clipPath: 'none',
+      height: 'auto',
+      margin: 'auto',
+      overflow: 'auto',
+      position: 'relative',
+      width: 'auto',
+      whiteSpace: 'normal',
+    }
+
     const focusable = {
       clip: 'auto',
       clipPath: 'none',
@@ -28,6 +39,8 @@ module.exports = function (variants) {
         whiteSpace: 'nowrap', /* 1 */
       },
 
+      [`.not-${className}`]: original,
+
       [`.${className}.${focusClassName}:active`]: focusable,
       [`.${className}.${focusClassName}:focus`]: focusable,