Modal.module.css137 lines · main

1	/*
2	Modal animations imported first as so placement styles are not affected.
3	*/
4
5	/* overlay animation */
6	.sbui-modal-overlay--enter {
7	@apply ease-out duration-200;
8	}
9	.sbui-modal-overlay--enterFrom {
10	@apply opacity-0;
11	}
12	.sbui-modal-overlay--enterTo {
13	@apply opacity-100;
14	}
15	.sbui-modal-overlay--leave {
16	@apply ease-in duration-150;
17	}
18	.sbui-modal-overlay--leaveFrom {
19	@apply opacity-100;
20	}
21	.sbui-modal-overlay--leaveTo {
22	@apply opacity-0;
23	}
24
25	/* modal animation */
26	.sbui-modal--enter {
27	@apply ease-out duration-150 delay-150;
28	}
29	.sbui-modal--enterFrom {
30	@apply opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95;
31	}
32	.sbui-modal--enterTo {
33	@apply opacity-100 translate-y-0 transform sm:scale-100;
34	}
35	.sbui-modal--leave {
36	@apply ease-in duration-150;
37	}
38	.sbui-modal--leaveFrom {
39	@apply opacity-100 translate-y-0 transform sm:scale-100;
40	}
41	.sbui-modal--leaveTo {
42	@apply opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95;
43	}
44
45	.sbui-modal-container {
46	@apply fixed z-50 inset-0;
47	}
48
49	.sbui-modal-flex-container {
50	@apply flex items-end justify-center min-h-screen pt-4 px-6 pb-20 text-center sm:block sm:p-0;
51	}
52
53	.sbui-modal-overlay-container {
54	@apply fixed inset-0 transition-opacity;
55	}
56
57	.sbui-modal-overlay {
58	@apply absolute inset-0 bg-gray-900 opacity-75;
59	}
60
61	.sbui-modal-div-trick {
62	@apply hidden sm:inline-block sm:align-middle sm:h-screen;
63	}
64
65	/* .sbui-modal {
66	@apply inline-block bg-white dark:bg-dark-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all align-middle;
67	@apply border-gray-400 border border-solid;
68	@apply dark:border-gray-600 border border-solid;
69
70	position: absolute;
71	top: 50%;
72	left: 50%;
73	transform: translate(-50%, -50%);
74	} */
75
76	.sbui-modal--tiny {
77	@apply sm:align-middle sm:w-full sm:max-w-xs;
78	}
79
80	.sbui-modal--small {
81	@apply sm:align-middle sm:w-full sm:max-w-sm;
82	}
83
84	.sbui-modal--medium {
85	@apply sm:align-middle sm:w-full sm:max-w-lg;
86	}
87
88	.sbui-modal--large {
89	@apply sm:align-middle sm:w-full max-w-xl;
90	}
91
92	.sbui-modal-content {
93	@apply px-6 pt-5 pb-5 sm:p-6;
94	}
95
96	.sbui-modal-footer {
97	@apply sm:flex sm:flex-row justify-end;
98	}
99
100	.sbui-modal-footer--with-bg {
101	@apply bg-gray-50 dark:bg-dark-600 px-6 py-3 sm:px-6 sm:flex sm:flex-row justify-end;
102	}
103
104	.sbui-modal-icon-container {
105	@apply mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10;
106	}
107
108	.sbui-modal-icon-container--danger {
109	@apply text-red-600 bg-red-600/20;
110	}
111
112	.sbui-modal-icon-container--warning {
113	@apply text-yellow-500 bg-yellow-500/20;
114	}
115
116	.sbui-modal-icon-container--success {
117	@apply text-brand-300 bg-brand-300/20;
118	}
119
120	.sbui-modal-close-container {
121	@apply absolute right-1 top-1;
122	}
123
124	.sbui-modal-close-container button,
125	.dark .sbui-modal-close-container button {
126	@apply text-gray-300;
127	@apply hover:text-gray-400;
128
129	/* @apply dark:text-dark-400; */
130	@apply hover:text-dark-300;
131
132	@apply hover:bg-transparent;
133	}
134
135	.sbui-sidepanel__trigger {
136	@apply border-none bg-transparent p-0 focus:ring-0;
137	}