@once-ui-system/core 1.3.15 → 1.4.1

package/dist/styles/position.scss

@@ -1,3 +1,5 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
 .position-relative {
   position: relative;
 }
@@ -304,4 +306,934 @@
 
 .right-160 { 
   right: var(--static-space-160);
+}
+
+@include breakpoints.l {
+  .l-position-relative {
+    position: relative;
+  }
+  
+  .l-position-fixed {
+    position: fixed;
+  }
+  
+  .l-position-absolute {
+    position: absolute;
+  }
+  
+  .l-position-sticky {
+    position: sticky;
+  }
+  
+  .l-position-static {
+    position: static;
+  }
+  
+  .l-top-0 { 
+    top: 0;
+  }
+    
+  .l-left-0 { 
+    left: 0;
+  }
+    
+  .l-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .l-right-0 { 
+    right: 0;
+  }
+  
+  .l-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .l-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .l-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .l-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .l-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .l-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .l-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .l-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .l-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .l-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .l-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .l-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .l-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .l-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .l-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .l-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .l-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .l-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .l-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .l-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .l-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .l-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .l-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .l-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .l-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .l-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .l-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .l-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .l-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .l-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .l-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .l-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .l-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .l-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .l-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .l-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .l-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .l-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .l-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .l-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .l-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .l-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .l-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .l-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .l-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .l-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .l-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .l-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .l-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .l-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .l-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .l-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .l-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .l-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .l-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .l-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .l-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .l-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .l-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .l-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .l-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .l-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .l-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .l-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .l-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .l-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .l-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .l-right-160 { 
+    right: var(--static-space-160);
+  }
+}
+
+@include breakpoints.m {
+  .m-position-relative {
+    position: relative;
+  }
+  
+  .m-position-fixed {
+    position: fixed;
+  }
+  
+  .m-position-absolute {
+    position: absolute;
+  }
+  
+  .m-position-sticky {
+    position: sticky;
+  }
+  
+  .m-position-static {
+    position: static;
+  }
+  
+  .m-top-0 { 
+    top: 0;
+  }
+    
+  .m-left-0 { 
+    left: 0;
+  }
+    
+  .m-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .m-right-0 { 
+    right: 0;
+  }
+  
+  .m-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .m-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .m-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .m-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .m-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .m-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .m-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .m-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .m-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .m-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .m-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .m-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .m-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .m-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .m-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .m-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .m-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .m-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .m-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .m-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .m-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .m-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .m-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .m-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .m-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .m-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .m-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .m-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .m-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .m-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .m-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .m-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .m-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .m-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .m-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .m-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .m-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .m-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .m-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .m-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .m-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .m-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .m-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .m-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .m-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .m-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .m-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .m-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .m-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .m-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .m-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .m-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .m-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .m-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .m-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .m-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .m-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .m-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .m-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .m-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .m-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .m-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .m-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .m-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .m-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .m-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .m-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .m-right-160 { 
+    right: var(--static-space-160);
+  }
+}
+
+@include breakpoints.s {
+  .s-position-relative {
+    position: relative;
+  }
+  
+  .s-position-fixed {
+    position: fixed;
+  }
+  
+  .s-position-absolute {
+    position: absolute;
+  }
+  
+  .s-position-sticky {
+    position: sticky;
+  }
+  
+  .s-position-static {
+    position: static;
+  }
+  
+  .s-top-0 { 
+    top: 0;
+  }
+    
+  .s-left-0 { 
+    left: 0;
+  }
+    
+  .s-bottom-0 { 
+    bottom: 0;
+  }
+  
+  .s-right-0 { 
+    right: 0;
+  }
+  
+  .s-top-1 { 
+    top: var(--static-space-1);
+  }
+  
+  .s-left-1 { 
+    left: var(--static-space-1);
+  }
+  
+  .s-bottom-1 { 
+    bottom: var(--static-space-1);
+  }
+  
+  .s-right-1 { 
+    right: var(--static-space-1);
+  }
+  
+  .s-top-2 { 
+    top: var(--static-space-2);
+  }
+  
+  .s-left-2 { 
+    left: var(--static-space-2);
+  }
+  
+  .s-bottom-2 { 
+    bottom: var(--static-space-2);
+  }
+  
+  .s-right-2 { 
+    right: var(--static-space-2);
+  }
+  
+  .s-top-4 { 
+    top: var(--static-space-4);
+  }
+  
+  .s-left-4 { 
+    left: var(--static-space-4);
+  }
+  
+  .s-bottom-4 { 
+    bottom: var(--static-space-4);
+  }
+  
+  .s-right-4 { 
+    right: var(--static-space-4);
+  }
+  
+  .s-top-8 { 
+    top: var(--static-space-8);
+  }
+  
+  .s-left-8 { 
+    left: var(--static-space-8);
+  }
+  
+  .s-bottom-8 { 
+    bottom: var(--static-space-8);
+  }
+  
+  .s-right-8 { 
+    right: var(--static-space-8);
+  }
+  
+  .s-top-12 { 
+    top: var(--static-space-12);
+  }
+  
+  .s-left-12 { 
+    left: var(--static-space-12);
+  }
+  
+  .s-bottom-12 { 
+    bottom: var(--static-space-12);
+  }
+  
+  .s-right-12 { 
+    right: var(--static-space-12);
+  }
+  
+  .s-top-16 { 
+    top: var(--static-space-16);
+  }
+  
+  .s-left-16 { 
+    left: var(--static-space-16);
+  }
+  
+  .s-bottom-16 { 
+    bottom: var(--static-space-16);
+  }
+  
+  .s-right-16 { 
+    right: var(--static-space-16);
+  }
+  
+  .s-top-20 { 
+    top: var(--static-space-20);
+  }
+  
+  .s-left-20 { 
+    left: var(--static-space-20);
+  }
+  
+  .s-bottom-20 { 
+    bottom: var(--static-space-20);
+  }
+  
+  .s-right-20 { 
+    right: var(--static-space-20);
+  }
+  
+  .s-top-24 { 
+    top: var(--static-space-24);
+  }
+  
+  .s-left-24 { 
+    left: var(--static-space-24);
+  }
+  
+  .s-bottom-24 { 
+    bottom: var(--static-space-24);
+  }
+  
+  .s-right-24 { 
+    right: var(--static-space-24);
+  }
+  
+  .s-top-32 { 
+    top: var(--static-space-32);
+  }
+  
+  .s-left-32 { 
+    left: var(--static-space-32);
+  }
+  
+  .s-bottom-32 { 
+    bottom: var(--static-space-32);
+  }
+  
+  .s-right-32 { 
+    right: var(--static-space-32);
+  }
+  
+  .s-top-40 { 
+    top: var(--static-space-40);
+  }
+  
+  .s-left-40 { 
+    left: var(--static-space-40);
+  }
+  
+  .s-bottom-40 { 
+    bottom: var(--static-space-40);
+  }
+  
+  .s-right-40 { 
+    right: var(--static-space-40);
+  }
+  
+  .s-top-48 { 
+    top: var(--static-space-48);
+  }
+  
+  .s-left-48 { 
+    left: var(--static-space-48);
+  }
+  
+  .s-bottom-48 { 
+    bottom: var(--static-space-48);
+  }
+  
+  .s-right-48 { 
+    right: var(--static-space-48);
+  }
+  
+  .s-top-56 { 
+    top: var(--static-space-56);
+  }
+  
+  .s-left-56 { 
+    left: var(--static-space-56);
+  }
+  
+  .s-bottom-56 { 
+    bottom: var(--static-space-56);
+  }
+  
+  .s-right-56 { 
+    right: var(--static-space-56);
+  }
+  
+  .s-top-64 { 
+    top: var(--static-space-64);
+  }
+  
+  .s-left-64 { 
+    left: var(--static-space-64);
+  }
+  
+  .s-bottom-64 { 
+    bottom: var(--static-space-64);
+  }
+  
+  .s-right-64 { 
+    right: var(--static-space-64);
+  }
+  
+  .s-top-80 { 
+    top: var(--static-space-80);
+  }
+  
+  .s-left-80 { 
+    left: var(--static-space-80);
+  }
+  
+  .s-bottom-80 { 
+    bottom: var(--static-space-80);
+  }
+  
+  .s-right-80 { 
+    right: var(--static-space-80);
+  }
+  
+  .s-top-104 { 
+    top: var(--static-space-104); 
+  }
+  
+  .s-left-104 { 
+    left: var(--static-space-104); 
+  }
+  
+  .s-bottom-104 { 
+    bottom: var(--static-space-104); 
+  }
+  
+  .s-right-104 { 
+    right: var(--static-space-104); 
+  }
+  
+  .s-top-128 { 
+    top: var(--static-space-128); 
+  }
+  
+  .s-left-128 { 
+    left: var(--static-space-128); 
+  }
+  
+  .s-bottom-128 { 
+    bottom: var(--static-space-128); 
+  }
+  
+  .s-right-128 { 
+    right: var(--static-space-128); 
+  }
+  
+  .s-top-160 { 
+    top: var(--static-space-160); 
+  }
+  
+  .s-left-160 { 
+    left: var(--static-space-160); 
+  }
+  
+  .s-bottom-160 { 
+    bottom: var(--static-space-160); 
+  }
+  
+  .s-right-160 { 
+    right: var(--static-space-160);
+  }
 }