cybercore-css 0.2.0

package/src/scss/utilities/_layout.scss

@@ -0,0 +1,202 @@
+// ============================================================
+// Layout Utilities
+// Overflow, z-index, object-fit, aspect-ratio
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Overflow
+  // --------------------------------------------------------
+
+  .cyber-overflow-auto {
+    overflow: auto;
+  }
+
+  .cyber-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .cyber-overflow-visible {
+    overflow: visible;
+  }
+
+  .cyber-overflow-scroll {
+    overflow: scroll;
+  }
+
+  .cyber-overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .cyber-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .cyber-overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .cyber-overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .cyber-overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .cyber-overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  // --------------------------------------------------------
+  // Z-Index
+  // --------------------------------------------------------
+
+  .cyber-z-0 {
+    z-index: 0;
+  }
+
+  .cyber-z-10 {
+    z-index: 10;
+  }
+
+  .cyber-z-20 {
+    z-index: 20;
+  }
+
+  .cyber-z-30 {
+    z-index: 30;
+  }
+
+  .cyber-z-40 {
+    z-index: 40;
+  }
+
+  .cyber-z-50 {
+    z-index: 50;
+  }
+
+  .cyber-z-auto {
+    z-index: auto;
+  }
+
+  .cyber-z-dropdown {
+    z-index: 1000;
+  }
+
+  .cyber-z-sticky {
+    z-index: 1020;
+  }
+
+  .cyber-z-fixed {
+    z-index: 1030;
+  }
+
+  .cyber-z-modal-backdrop {
+    z-index: 1040;
+  }
+
+  .cyber-z-modal {
+    z-index: 1050;
+  }
+
+  .cyber-z-popover {
+    z-index: 1060;
+  }
+
+  .cyber-z-tooltip {
+    z-index: 1070;
+  }
+
+  // --------------------------------------------------------
+  // Object Fit
+  // --------------------------------------------------------
+
+  .cyber-object-contain {
+    object-fit: contain;
+  }
+
+  .cyber-object-cover {
+    object-fit: cover;
+  }
+
+  .cyber-object-fill {
+    object-fit: fill;
+  }
+
+  .cyber-object-none {
+    object-fit: none;
+  }
+
+  .cyber-object-scale-down {
+    object-fit: scale-down;
+  }
+
+  // --------------------------------------------------------
+  // Object Position
+  // --------------------------------------------------------
+
+  .cyber-object-center {
+    object-position: center;
+  }
+
+  .cyber-object-top {
+    object-position: top;
+  }
+
+  .cyber-object-bottom {
+    object-position: bottom;
+  }
+
+  .cyber-object-left {
+    object-position: left;
+  }
+
+  .cyber-object-right {
+    object-position: right;
+  }
+
+  // --------------------------------------------------------
+  // Aspect Ratio
+  // --------------------------------------------------------
+
+  .cyber-aspect-auto {
+    aspect-ratio: auto;
+  }
+
+  .cyber-aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+
+  .cyber-aspect-video {
+    aspect-ratio: 16 / 9;
+  }
+
+  .cyber-aspect-4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  .cyber-aspect-3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  .cyber-aspect-2-1 {
+    aspect-ratio: 2 / 1;
+  }
+
+  // --------------------------------------------------------
+  // Visibility
+  // --------------------------------------------------------
+
+  .cyber-visible {
+    visibility: visible;
+  }
+
+  .cyber-invisible {
+    visibility: hidden;
+  }
+
+  .cyber-collapse {
+    visibility: collapse;
+  }
+}

package/src/scss/utilities/_position.scss

@@ -0,0 +1,168 @@
+// ============================================================
+// Position Utilities
+// Position, inset, and placement helpers
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Position
+  // --------------------------------------------------------
+
+  .cyber-static {
+    position: static;
+  }
+
+  .cyber-relative {
+    position: relative;
+  }
+
+  .cyber-absolute {
+    position: absolute;
+  }
+
+  .cyber-fixed {
+    position: fixed;
+  }
+
+  .cyber-sticky {
+    position: sticky;
+  }
+
+  // --------------------------------------------------------
+  // Inset (all sides)
+  // --------------------------------------------------------
+
+  .cyber-inset-0 {
+    inset: 0;
+  }
+
+  .cyber-inset-auto {
+    inset: auto;
+  }
+
+  .cyber-inset-x-0 {
+    right: 0;
+    left: 0;
+  }
+
+  .cyber-inset-y-0 {
+    top: 0;
+    bottom: 0;
+  }
+
+  // --------------------------------------------------------
+  // Top
+  // --------------------------------------------------------
+
+  .cyber-top-0 {
+    top: 0;
+  }
+
+  .cyber-top-auto {
+    top: auto;
+  }
+
+  .cyber-top-half {
+    top: 50%;
+  }
+
+  .cyber-top-full {
+    top: 100%;
+  }
+
+  // --------------------------------------------------------
+  // Right
+  // --------------------------------------------------------
+
+  .cyber-right-0 {
+    right: 0;
+  }
+
+  .cyber-right-auto {
+    right: auto;
+  }
+
+  .cyber-right-half {
+    right: 50%;
+  }
+
+  .cyber-right-full {
+    right: 100%;
+  }
+
+  // --------------------------------------------------------
+  // Bottom
+  // --------------------------------------------------------
+
+  .cyber-bottom-0 {
+    bottom: 0;
+  }
+
+  .cyber-bottom-auto {
+    bottom: auto;
+  }
+
+  .cyber-bottom-half {
+    bottom: 50%;
+  }
+
+  .cyber-bottom-full {
+    bottom: 100%;
+  }
+
+  // --------------------------------------------------------
+  // Left
+  // --------------------------------------------------------
+
+  .cyber-left-0 {
+    left: 0;
+  }
+
+  .cyber-left-auto {
+    left: auto;
+  }
+
+  .cyber-left-half {
+    left: 50%;
+  }
+
+  .cyber-left-full {
+    left: 100%;
+  }
+
+  // --------------------------------------------------------
+  // Centering transforms
+  // --------------------------------------------------------
+
+  .cyber-translate-x-half {
+    transform: translateX(50%);
+  }
+
+  .cyber-translate-x-neg-half {
+    transform: translateX(-50%);
+  }
+
+  .cyber-translate-y-half {
+    transform: translateY(50%);
+  }
+
+  .cyber-translate-y-neg-half {
+    transform: translateY(-50%);
+  }
+
+  .cyber-center-x {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .cyber-center-y {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .cyber-center-xy {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/scss/utilities/_shadows.scss

@@ -0,0 +1,164 @@
+// ============================================================
+// Shadow & Opacity Utilities
+// Box shadows, drop shadows, and opacity
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Box Shadow
+  // --------------------------------------------------------
+
+  .cyber-shadow-none {
+    box-shadow: none;
+  }
+
+  .cyber-shadow-sm {
+    box-shadow:
+      0 1px 2px 0 rgb(0 0 0 / 5%),
+      0 1px 3px 0 rgb(0 0 0 / 10%);
+  }
+
+  .cyber-shadow {
+    box-shadow:
+      0 1px 3px 0 rgb(0 0 0 / 10%),
+      0 1px 2px -1px rgb(0 0 0 / 10%);
+  }
+
+  .cyber-shadow-md {
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 10%),
+      0 2px 4px -2px rgb(0 0 0 / 10%);
+  }
+
+  .cyber-shadow-lg {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 10%),
+      0 4px 6px -4px rgb(0 0 0 / 10%);
+  }
+
+  .cyber-shadow-xl {
+    box-shadow:
+      0 20px 25px -5px rgb(0 0 0 / 10%),
+      0 8px 10px -6px rgb(0 0 0 / 10%);
+  }
+
+  .cyber-shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  }
+
+  .cyber-shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
+  }
+
+  // --------------------------------------------------------
+  // Glow Shadows (Cyber themed)
+  // --------------------------------------------------------
+
+  .cyber-shadow-glow {
+    box-shadow: var(--glow-cyan);
+  }
+
+  .cyber-shadow-glow-magenta {
+    box-shadow: var(--glow-magenta);
+  }
+
+  .cyber-shadow-glow-yellow {
+    box-shadow: var(--glow-yellow);
+  }
+
+  .cyber-shadow-glow-green {
+    box-shadow: var(--glow-green);
+  }
+
+  // --------------------------------------------------------
+  // Opacity
+  // --------------------------------------------------------
+
+  .cyber-opacity-0 {
+    opacity: 0%;
+  }
+
+  .cyber-opacity-5 {
+    opacity: 5%;
+  }
+
+  .cyber-opacity-10 {
+    opacity: 10%;
+  }
+
+  .cyber-opacity-20 {
+    opacity: 20%;
+  }
+
+  .cyber-opacity-25 {
+    opacity: 25%;
+  }
+
+  .cyber-opacity-30 {
+    opacity: 30%;
+  }
+
+  .cyber-opacity-40 {
+    opacity: 40%;
+  }
+
+  .cyber-opacity-50 {
+    opacity: 50%;
+  }
+
+  .cyber-opacity-60 {
+    opacity: 60%;
+  }
+
+  .cyber-opacity-70 {
+    opacity: 70%;
+  }
+
+  .cyber-opacity-75 {
+    opacity: 75%;
+  }
+
+  .cyber-opacity-80 {
+    opacity: 80%;
+  }
+
+  .cyber-opacity-90 {
+    opacity: 90%;
+  }
+
+  .cyber-opacity-95 {
+    opacity: 95%;
+  }
+
+  .cyber-opacity-100 {
+    opacity: 100%;
+  }
+
+  // --------------------------------------------------------
+  // Backdrop Filter
+  // --------------------------------------------------------
+
+  .cyber-backdrop-blur-none {
+    backdrop-filter: blur(0);
+  }
+
+  .cyber-backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+  }
+
+  .cyber-backdrop-blur {
+    backdrop-filter: blur(8px);
+  }
+
+  .cyber-backdrop-blur-md {
+    backdrop-filter: blur(12px);
+  }
+
+  .cyber-backdrop-blur-lg {
+    backdrop-filter: blur(16px);
+  }
+
+  .cyber-backdrop-blur-xl {
+    backdrop-filter: blur(24px);
+  }
+}