@zuzjs/ui 0.2.0 → 0.2.4

package/dist/styles.css

@@ -105,6 +105,213 @@ button {
   text-decoration: underline;
 }
 
+.flex {
+  display: flex;
+}
+.flex.ass {
+  align-self: flex-start;
+}
+.flex.asc {
+  align-self: center;
+}
+.flex.ase {
+  align-self: flex-end;
+}
+.flex.ais {
+  align-items: flex-start;
+}
+.flex.aic {
+  align-items: center;
+}
+.flex.aie {
+  align-items: flex-end;
+}
+.flex.jcs {
+  justify-content: flex-start;
+}
+.flex.jcc {
+  justify-content: center;
+}
+.flex.jce {
+  justify-content: flex-end;
+}
+
+/*
+    COLORS
+    It will generate .cfff { color: #fff; } from 'fff'
+*/
+.cfff {
+  color: #fff;
+}
+
+.c111 {
+  color: #111;
+}
+
+.c222 {
+  color: #222;
+}
+
+.c333 {
+  color: #333;
+}
+
+.c444 {
+  color: #444;
+}
+
+.c555 {
+  color: #555;
+}
+
+.c666 {
+  color: #666;
+}
+
+.c777 {
+  color: #777;
+}
+
+.c888 {
+  color: #888;
+}
+
+.c999 {
+  color: #999;
+}
+
+/*
+    FONT SIZES
+    It will generate .s10 { font-size: 12px; } from '12'
+*/
+.s10 {
+  font-size: 10px;
+}
+
+.s12 {
+  font-size: 12px;
+}
+
+.s14 {
+  font-size: 14px;
+}
+
+.s16 {
+  font-size: 16px;
+}
+
+.s18 {
+  font-size: 18px;
+}
+
+.s20 {
+  font-size: 20px;
+}
+
+.s22 {
+  font-size: 22px;
+}
+
+.s24 {
+  font-size: 24px;
+}
+
+.s26 {
+  font-size: 26px;
+}
+
+.s28 {
+  font-size: 28px;
+}
+
+.s30 {
+  font-size: 30px;
+}
+
+.s32 {
+  font-size: 32px;
+}
+
+.s34 {
+  font-size: 34px;
+}
+
+.s36 {
+  font-size: 36px;
+}
+
+.s38 {
+  font-size: 38px;
+}
+
+.s40 {
+  font-size: 40px;
+}
+
+.s42 {
+  font-size: 42px;
+}
+
+.s44 {
+  font-size: 44px;
+}
+
+.s46 {
+  font-size: 46px;
+}
+
+.s48 {
+  font-size: 48px;
+}
+
+.s50 {
+  font-size: 50px;
+}
+
+.s52 {
+  font-size: 52px;
+}
+
+.s54 {
+  font-size: 54px;
+}
+
+.s56 {
+  font-size: 56px;
+}
+
+.s58 {
+  font-size: 58px;
+}
+
+.s60 {
+  font-size: 60px;
+}
+
+.s62 {
+  font-size: 62px;
+}
+
+.s64 {
+  font-size: 64px;
+}
+
+.s66 {
+  font-size: 66px;
+}
+
+.s68 {
+  font-size: 68px;
+}
+
+.s70 {
+  font-size: 70px;
+}
+
+.s72 {
+  font-size: 72px;
+}
+
 @-webkit-keyframes rotating /* Safari and Chrome */ {
   from {
     -webkit-transform: rotate(0deg);
@@ -159,4 +366,49 @@ button {
 }
 .zuz-toast.visible {
   transform: translate(-50%, 0px) scale(1) !important;
+}
+
+.zuz-checkbox {
+  opacity: 0;
+  position: absolute;
+}
+.zuz-checkbox + label {
+  position: relative;
+  display: inline-block;
+  user-select: none;
+  transition: 0.4s ease;
+  height: 26px;
+  width: 44px;
+  border-radius: 60px;
+  background: #eee;
+}
+.zuz-checkbox + label:before {
+  content: "";
+  position: absolute;
+  display: block;
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  height: 26px;
+  width: 44px;
+  top: 0;
+  left: 0;
+  border-radius: 30px;
+}
+.zuz-checkbox + label:after {
+  content: "";
+  position: absolute;
+  display: block;
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: #fff;
+  height: 22px;
+  width: 22px;
+  top: 2px;
+  left: 2px;
+  border-radius: 60px;
+}
+.zuz-checkbox:checked + label:before {
+  background: green;
+  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
+}
+.zuz-checkbox:checked + label:after {
+  left: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "type": "module",
   "main": "dist/index.js",
   "exports": {