cybercore-css 0.2.0

package/src/scss/utilities/_transforms.scss

@@ -0,0 +1,212 @@
+// ============================================================
+// Transform Utilities
+// Scale, rotate, translate, skew
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Scale
+  // --------------------------------------------------------
+
+  .cyber-scale-0 {
+    transform: scale(0);
+  }
+
+  .cyber-scale-50 {
+    transform: scale(0.5);
+  }
+
+  .cyber-scale-75 {
+    transform: scale(0.75);
+  }
+
+  .cyber-scale-90 {
+    transform: scale(0.9);
+  }
+
+  .cyber-scale-95 {
+    transform: scale(0.95);
+  }
+
+  .cyber-scale-100 {
+    transform: scale(1);
+  }
+
+  .cyber-scale-105 {
+    transform: scale(1.05);
+  }
+
+  .cyber-scale-110 {
+    transform: scale(1.1);
+  }
+
+  .cyber-scale-125 {
+    transform: scale(1.25);
+  }
+
+  .cyber-scale-150 {
+    transform: scale(1.5);
+  }
+
+  // X scale
+  .cyber-scale-x-0 {
+    transform: scaleX(0);
+  }
+
+  .cyber-scale-x-100 {
+    transform: scaleX(1);
+  }
+
+  // Y scale
+  .cyber-scale-y-0 {
+    transform: scaleY(0);
+  }
+
+  .cyber-scale-y-100 {
+    transform: scaleY(1);
+  }
+
+  // --------------------------------------------------------
+  // Rotate
+  // --------------------------------------------------------
+
+  .cyber-rotate-0 {
+    transform: rotate(0deg);
+  }
+
+  .cyber-rotate-45 {
+    transform: rotate(45deg);
+  }
+
+  .cyber-rotate-90 {
+    transform: rotate(90deg);
+  }
+
+  .cyber-rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .cyber--rotate-45 {
+    transform: rotate(-45deg);
+  }
+
+  .cyber--rotate-90 {
+    transform: rotate(-90deg);
+  }
+
+  .cyber--rotate-180 {
+    transform: rotate(-180deg);
+  }
+
+  // --------------------------------------------------------
+  // Translate
+  // --------------------------------------------------------
+
+  .cyber-translate-x-0 {
+    transform: translateX(0);
+  }
+
+  .cyber-translate-x-full {
+    transform: translateX(100%);
+  }
+
+  .cyber--translate-x-full {
+    transform: translateX(-100%);
+  }
+
+  .cyber-translate-y-0 {
+    transform: translateY(0);
+  }
+
+  .cyber-translate-y-full {
+    transform: translateY(100%);
+  }
+
+  .cyber--translate-y-full {
+    transform: translateY(-100%);
+  }
+
+  // --------------------------------------------------------
+  // Skew
+  // --------------------------------------------------------
+
+  .cyber-skew-x-0 {
+    transform: skewX(0deg);
+  }
+
+  .cyber-skew-x-3 {
+    transform: skewX(3deg);
+  }
+
+  .cyber-skew-x-6 {
+    transform: skewX(6deg);
+  }
+
+  .cyber-skew-x-12 {
+    transform: skewX(12deg);
+  }
+
+  .cyber--skew-x-3 {
+    transform: skewX(-3deg);
+  }
+
+  .cyber--skew-x-6 {
+    transform: skewX(-6deg);
+  }
+
+  .cyber--skew-x-12 {
+    transform: skewX(-12deg);
+  }
+
+  .cyber-skew-y-0 {
+    transform: skewY(0deg);
+  }
+
+  .cyber-skew-y-3 {
+    transform: skewY(3deg);
+  }
+
+  .cyber-skew-y-6 {
+    transform: skewY(6deg);
+  }
+
+  // --------------------------------------------------------
+  // Transform Origin
+  // --------------------------------------------------------
+
+  .cyber-origin-center {
+    transform-origin: center;
+  }
+
+  .cyber-origin-top {
+    transform-origin: top;
+  }
+
+  .cyber-origin-top-right {
+    transform-origin: top right;
+  }
+
+  .cyber-origin-right {
+    transform-origin: right;
+  }
+
+  .cyber-origin-bottom-right {
+    transform-origin: bottom right;
+  }
+
+  .cyber-origin-bottom {
+    transform-origin: bottom;
+  }
+
+  .cyber-origin-bottom-left {
+    transform-origin: bottom left;
+  }
+
+  .cyber-origin-left {
+    transform-origin: left;
+  }
+
+  .cyber-origin-top-left {
+    transform-origin: top left;
+  }
+}

package/src/scss/utilities/_transitions.scss

@@ -0,0 +1,174 @@
+// ============================================================
+// Transition Utilities
+// Transition property, duration, timing, delay
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Transition Property
+  // --------------------------------------------------------
+
+  .cyber-transition-none {
+    transition-property: none;
+  }
+
+  .cyber-transition-all {
+    transition-duration: var(--duration-base);
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .cyber-transition {
+    transition-duration: var(--duration-base);
+    transition-property:
+      color, background-color, border-color, text-decoration-color, fill, stroke, opacity,
+      box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .cyber-transition-colors {
+    transition-duration: var(--duration-base);
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .cyber-transition-opacity {
+    transition-duration: var(--duration-base);
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .cyber-transition-shadow {
+    transition-duration: var(--duration-base);
+    transition-property: box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .cyber-transition-transform {
+    transition-duration: var(--duration-base);
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  // --------------------------------------------------------
+  // Transition Duration
+  // --------------------------------------------------------
+
+  .cyber-duration-0 {
+    transition-duration: 0s;
+  }
+
+  .cyber-duration-75 {
+    transition-duration: 75ms;
+  }
+
+  .cyber-duration-100 {
+    transition-duration: 100ms;
+  }
+
+  .cyber-duration-150 {
+    transition-duration: 150ms;
+  }
+
+  .cyber-duration-200 {
+    transition-duration: 200ms;
+  }
+
+  .cyber-duration-300 {
+    transition-duration: 300ms;
+  }
+
+  .cyber-duration-500 {
+    transition-duration: 500ms;
+  }
+
+  .cyber-duration-700 {
+    transition-duration: 700ms;
+  }
+
+  .cyber-duration-1000 {
+    transition-duration: 1000ms;
+  }
+
+  // Named durations from variables
+  .cyber-duration-fast {
+    transition-duration: var(--duration-fast);
+  }
+
+  .cyber-duration-base {
+    transition-duration: var(--duration-base);
+  }
+
+  .cyber-duration-slow {
+    transition-duration: var(--duration-slow);
+  }
+
+  // --------------------------------------------------------
+  // Transition Timing Function
+  // --------------------------------------------------------
+
+  .cyber-ease-linear {
+    transition-timing-function: linear;
+  }
+
+  .cyber-ease-in {
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  .cyber-ease-out {
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .cyber-ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  // Named easings from variables
+  .cyber-ease-bounce {
+    transition-timing-function: var(--ease-bounce);
+  }
+
+  .cyber-ease-smooth {
+    transition-timing-function: var(--ease-smooth);
+  }
+
+  // --------------------------------------------------------
+  // Transition Delay
+  // --------------------------------------------------------
+
+  .cyber-delay-0 {
+    transition-delay: 0s;
+  }
+
+  .cyber-delay-75 {
+    transition-delay: 75ms;
+  }
+
+  .cyber-delay-100 {
+    transition-delay: 100ms;
+  }
+
+  .cyber-delay-150 {
+    transition-delay: 150ms;
+  }
+
+  .cyber-delay-200 {
+    transition-delay: 200ms;
+  }
+
+  .cyber-delay-300 {
+    transition-delay: 300ms;
+  }
+
+  .cyber-delay-500 {
+    transition-delay: 500ms;
+  }
+
+  .cyber-delay-700 {
+    transition-delay: 700ms;
+  }
+
+  .cyber-delay-1000 {
+    transition-delay: 1000ms;
+  }
+}