SidePanel.module.css124 lines · main

1	/*
2	Side Panel animations imported first as so placement styles are not affected.
3	*/
4
5	/* overlay animation */
6	.sbui-sidepanel-overlay--enter {
7	@apply ease-out duration-200;
8	}
9	.sbui-sidepanel-overlay--enterFrom {
10	@apply opacity-0;
11	}
12	.sbui-sidepanel-overlay--enterTo {
13	@apply opacity-100;
14	}
15	.sbui-sidepanel-overlay--leave {
16	@apply ease-in duration-200;
17	}
18	.sbui-sidepanel-overlay--leaveFrom {
19	@apply opacity-100;
20	}
21	.sbui-sidepanel-overlay--leaveTo {
22	@apply opacity-0;
23	}
24
25	/* panel animation */
26	.sbui-sidepanel--enter {
27	@apply transform transition ease-in-out duration-200 lg:duration-300;
28	}
29	.sbui-sidepanel--enterFrom {
30	@apply translate-x-full;
31	}
32	.sbui-sidepanel--enterFrom--left {
33	@apply -translate-x-full;
34	}
35	.sbui-sidepanel--enterTo {
36	@apply translate-x-0;
37	}
38	.sbui-sidepanel--leave {
39	@apply transform transition ease-in-out duration-200 lg:duration-300;
40	}
41	.sbui-sidepanel--leaveFrom {
42	@apply translate-x-0;
43	}
44	.sbui-sidepanel--leaveTo {
45	@apply translate-x-full;
46	}
47	.sbui-sidepanel--leaveTo--left {
48	@apply -translate-x-full;
49	}
50
51	/* .sbui-sidepanel-overlay-container {
52	@apply fixed inset-0 transition-opacity;
53	} */
54
55	/* .sbui-sidepanel-overlay {
56	@apply absolute inset-0 bg-surface-100 opacity-75;
57	} */
58
59	.sbui-sidepanel--left {
60	@apply left-0 pr-10;
61	}
62
63	.sbui-sidepanel--right {
64	@apply right-0 pl-10;
65	}
66
67	.sbui-sidepanel--medium {
68	@apply w-screen max-w-md h-full;
69	}
70
71	.sbui-sidepanel--wide {
72	@apply w-screen max-w-2xl h-full;
73	}
74
75	/* .sbui-sidepanel-fixed {
76	@apply fixed inset-0 overflow-hidden;
77	} */
78
79	/* .sbui-sidepanel-absolute {
80	@apply absolute inset-0 overflow-hidden;
81	} */
82
83	/* .sbui-sidepanel-container {
84	@apply absolute inset-y-0 max-w-full flex h-screen;
85	} */
86
87	/* .sbui-sidepanel {
88	@apply h-full flex flex-col bg-white dark:bg-dark-700 shadow-xl;
89	} */
90
91	.sbui-sidepanel-header {
92	@apply space-y-1 py-6 px-4 bg-gray-50 dark:bg-dark-600 sm:px-6;
93	}
94
95	.sbui-sidepanel-close-container {
96	@apply h-7 flex items-center;
97	}
98
99	.sbui-sidepanel-close-container button,
100	.dark .sbui-sidepanel-close-container button {
101	@apply text-gray-300;
102	@apply hover:text-gray-400;
103
104	/* @apply dark:text-dark-400; */
105	/* @apply dark:hover:text-dark-300; */
106
107	@apply hover:bg-transparent;
108	}
109
110	/* .sbui-sidepanel-content {
111	@apply relative flex-1 px-4 sm:px-6;
112	} */
113
114	.sbui-sidepanel-footer-container {
115	@apply p-4 bg-gray-50 dark:bg-dark-600;
116	}
117
118	.sbui-sidepanel-footer {
119	@apply flex shrink-0;
120	}
121
122	.sbui-sidepanel__trigger {
123	@apply border-none bg-transparent p-0 focus:ring-0;
124	}