Merge pull request #29 from viivue/1.1.10

1.1.10

css/extra.css

@@ -67,3 +67,18 @@ ul.list-style-none > li,
 .list-style-none ul > li {
     padding:0;
 }
+
+/*
+ * Visually hidden
+ * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
+ */
+.visually-hidden {
+    position:absolute;
+    overflow:hidden;
+    clip:rect(0 0 0 0);
+    width:1px;
+    height:1px;
+    margin:-1px;
+    padding:0;
+    border:0;
+}

css/transitions.css

@@ -4,23 +4,53 @@
  */
 /* transition */
 .t {
-    transition-duration:.25s;
-    transition-property:all;
-    transition-timing-function:ease;
-    transition-delay:0s;
+  transition-duration:.25s;
+  transition-property:all;
+  transition-timing-function:ease;
+  transition-delay:0s;
 }
 
 /* slow */
 .t-slow {
-    transition-duration:.6s;
+  transition-duration:.6s;
 }
 
 /* fast */
 .t-fast {
-    transition-duration:.1s;
+  transition-duration:.1s;
 }
 
 /* opacity */
 .t-opacity {
-    transition-property:opacity;
+  transition-property:opacity;
+}
+
+/* opacity-color */
+.t-opacity-color {
+  transition-property:opacity, color;
+}
+
+/* transform */
+.t-transform {
+  transition-property:transform;
+}
+
+/* transform-opacity */
+.t-transform-opacity {
+  transition-property:transform, opacity;
+}
+
+/* transform-opacity-color */
+.t-transform-opacity-color {
+  transition-property:transform, opacity, color;
+}
+
+/* transform-color */
+.t-transform-color {
+  transition-property:transform, color;
+}
+
+/* color */
+.t-color {
+  transition-property:color;
 }

dist/atomic.css

@@ -1,5 +1,5 @@
 /*!
-* Atomic CSS 1.1.9
+* Atomic CSS 1.1.10
 * https://github.com/viivue/atomic-css
 */
 /**
@@ -647,6 +647,36 @@
   transition-property:opacity;
 }
 
+/* opacity-color */
+.t-opacity-color {
+  transition-property:opacity, color;
+}
+
+/* transform */
+.t-transform {
+  transition-property:transform;
+}
+
+/* transform-opacity */
+.t-transform-opacity {
+  transition-property:transform, opacity;
+}
+
+/* transform-opacity-color */
+.t-transform-opacity-color {
+  transition-property:transform, opacity, color;
+}
+
+/* transform-color */
+.t-transform-color {
+  transition-property:transform, color;
+}
+
+/* color */
+.t-color {
+  transition-property:color;
+}
+
 /**
  * Object fit
  * https://stackoverflow.design/product/base/object-fit/
@@ -1034,3 +1064,18 @@ ul.list-style-none > li,
 .list-style-none ul > li {
   padding:0;
 }
+
+/*
+ * Visually hidden
+ * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
+ */
+.visually-hidden {
+  position:absolute;
+  overflow:hidden;
+  clip:rect(0 0 0 0);
+  width:1px;
+  height:1px;
+  margin:-1px;
+  padding:0;
+  border:0;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viivue/atomic-css",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "⚛️ Customizable Atomic CSS Framework.",
   "main": "./dist/atomic.min.css",
   "scripts": {

scss/_defs.scss

@@ -1,7 +1,7 @@
 /// Definitions
 /// DO NOT EDIT!
 
-$version: "1.1.9";
+$version: "1.1.10";
 $info: ();
 
 // axes

scss/extra.scss

@@ -73,4 +73,20 @@ ul.list-style-none,
 ul.list-style-none > li,
 .list-style-none ul > li {
   padding: 0;
+}
+
+
+/*
+ * Visually hidden
+ * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
+ */
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
 }

scss/transitions.scss

@@ -20,7 +20,31 @@ $dataset: (
         opacity:(
                 selectors:'.t-opacity',
                 inline:'transition-property: opacity'
-        )
+        ),
+        opacity-color:(
+                selectors:'.t-opacity-color',
+                inline:'transition-property: opacity, color'
+        ),
+        transform :(
+                selectors:'.t-transform',
+                inline:'transition-property: transform'
+        ),
+        transform-opacity :(
+                selectors:'.t-transform-opacity ',
+                inline:'transition-property: transform, opacity'
+        ),
+        transform-opacity-color:(
+                selectors:'.t-transform-opacity-color',
+                inline:'transition-property: transform, opacity, color'
+        ),
+        transform-color:(
+                selectors:'.t-transform-color',
+                inline:'transition-property: transform, color'
+        ),
+        color :(
+                selectors:'.t-color',
+                inline:'transition-property: color'
+        ),
 );
 
 // print