feature: add large breakpoint

once-ui-system · Jan 10, 2025 · 9b3ac77 · 9b3ac77
1 parent 63ac6c5
commit 9b3ac77
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/src/once-ui/components/Flex.tsx b/src/once-ui/components/Flex.tsx
@@ -302,4 +302,4 @@ const Flex = forwardRef<HTMLDivElement, ComponentProps>(
 );
 
 Flex.displayName = "Flex";
-export { Flex };
+export { Flex };
diff --git a/src/once-ui/interfaces.ts b/src/once-ui/interfaces.ts
@@ -133,8 +133,8 @@ export interface StyleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ConditionalProps extends HTMLAttributes<HTMLDivElement> {
-  hide?: "s" | "m";
-  show?: "s" | "m";
+  hide?: "s" | "m" | "l";
+  show?: "s" | "m" | "l";
 }
 
 export interface DisplayProps extends HTMLAttributes<HTMLDivElement> {

diff --git a/src/once-ui/styles/layout.scss b/src/once-ui/styles/layout.scss
@@ -26,6 +26,10 @@
     flex-direction: row-reverse;
 }
 
+.l-flex-show {
+    display: none;
+}
+
 .m-flex-show {
     display: none;
 }
@@ -34,6 +38,32 @@
     display: none;
 }
 
+@media (--l) {
+    .l-flex-hide {
+        display: none !important;
+    }
+
+    .l-flex-show {
+        display: flex !important;
+    }
+
+    .l-flex-column {
+        flex-direction: column !important;
+    }
+
+    .l-flex-row {
+        flex-direction: row !important;
+    }
+
+    .l-flex-column-reverse {
+        flex-direction: column-reverse !important;
+    }
+
+    .l-flex-row-reverse {
+        flex-direction: row-reverse !important;
+    }
+}
+
 @media (--m) {
     .m-flex-hide {
         display: none !important;