@redseed/redseed-ui-tailwindcss 7.7.1 → 7.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/sidebar_layout.css +33 -0
- package/components.css +1 -0
- package/package.json +1 -1
- package/theme.css +15 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.rsui-sidebar-layout {
|
|
2
|
+
@apply w-full;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/* Default: sidebar stacks to top, appears on the right when side-by-side */
|
|
6
|
+
.rsui-sidebar-layout__container {
|
|
7
|
+
@apply flex-col-reverse @xl/flex-container:flex-row;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* stackBottom: sidebar stacks to bottom instead of top, only when stacked */
|
|
11
|
+
.rsui-sidebar-layout__container--stack-bottom {
|
|
12
|
+
@apply flex-col @xl/flex-container:flex-row;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* stackOff: always side-by-side, never stacks */
|
|
16
|
+
.rsui-sidebar-layout__container--stack-off {
|
|
17
|
+
@apply flex-row;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* sidebarLeft: sidebar appears on the left when side-by-side */
|
|
21
|
+
.rsui-sidebar-layout__container--sidebar-left {
|
|
22
|
+
@apply @xl/flex-container:flex-row-reverse;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.rsui-sidebar-layout__main {
|
|
26
|
+
@apply w-full overflow-auto flex flex-col;
|
|
27
|
+
@apply @3xs/flex-container:flex-[5];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.rsui-sidebar-layout__sidebar {
|
|
31
|
+
@apply w-full overflow-auto flex flex-col;
|
|
32
|
+
@apply @3xs/flex-container:flex-[4] @xl/flex-container:flex-[3] @3xl/flex-container:flex-[2];
|
|
33
|
+
}
|
package/components.css
CHANGED
|
@@ -82,6 +82,7 @@ Please be careful when adding new components and updating the order.
|
|
|
82
82
|
@import './components/record_count.css';
|
|
83
83
|
@import './components/section.css';
|
|
84
84
|
@import './components/section_header.css';
|
|
85
|
+
@import './components/sidebar_layout.css';
|
|
85
86
|
@import './components/section_footer.css';
|
|
86
87
|
@import './components/section_slider.css';
|
|
87
88
|
@import './components/section_slider_item.css';
|
package/package.json
CHANGED
package/theme.css
CHANGED
|
@@ -15,6 +15,21 @@
|
|
|
15
15
|
--breakpoint-2xl: 96rem; /* 1536px */
|
|
16
16
|
--breakpoint-3xl: 120rem; /* 1920px */
|
|
17
17
|
|
|
18
|
+
/* Container query breakpoints (independent from viewport breakpoints) */
|
|
19
|
+
--container-3xs: 16rem; /* 256px */
|
|
20
|
+
--container-2xs: 18rem; /* 288px */
|
|
21
|
+
--container-xs: 20rem; /* 320px */
|
|
22
|
+
--container-sm: 24rem; /* 384px */
|
|
23
|
+
--container-md: 28rem; /* 448px */
|
|
24
|
+
--container-lg: 32rem; /* 512px */
|
|
25
|
+
--container-xl: 36rem; /* 576px */
|
|
26
|
+
--container-2xl: 42rem; /* 672px */
|
|
27
|
+
--container-3xl: 48rem; /* 768px */
|
|
28
|
+
--container-4xl: 56rem; /* 896px */
|
|
29
|
+
--container-5xl: 64rem; /* 1024px */
|
|
30
|
+
--container-6xl: 72rem; /* 1152px */
|
|
31
|
+
--container-7xl: 80rem; /* 1280px */
|
|
32
|
+
|
|
18
33
|
--shadow-full: 0 0 6px 1px rgb(0 0 0 / 0.2);
|
|
19
34
|
--shadow-full-light: 0 0 6px 1px rgb(50 60 69 / 0.1);
|
|
20
35
|
}
|