Skip to content

Commit 04d4102

Browse files
pboivinpboivin
authored
Merge pull request #140 from pboivin/fix/theme-css-import
fix: Remove tailwind utils from plugin.css
2 parents 85d0d4c + a0c4308 commit 04d4102

File tree

3 files changed

+205
-4
lines changed

3 files changed

+205
-4
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev:styles": "npx tailwindcss -i resources/css/plugin.css -o resources/dist/filament-peek.css --postcss --watch",
4+
"dev:styles": "npx tailwindcss -i resources/css/internal.css -o resources/dist/filament-peek.css --postcss --watch",
55
"dev:scripts": "esbuild resources/js/plugin.js --bundle --sourcemap=inline --outfile=resources/dist/filament-peek.js --watch",
6-
"build:styles": "npx tailwindcss -i resources/css/plugin.css -o resources/dist/filament-peek.css --postcss --minify && npm run purge",
6+
"build:styles": "npx tailwindcss -i resources/css/internal.css -o resources/dist/filament-peek.css --postcss --minify && npm run purge",
77
"build:scripts": "esbuild resources/js/plugin.js --bundle --minify --outfile=resources/dist/filament-peek.js",
88
"purge": "filament-purge -i resources/dist/filament-peek.css -o resources/dist/filament-peek.css",
99
"dev": "npm-run-all --parallel dev:*",

‎resources/css/internal.css

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
/**
2+
* NOTE:
3+
* This file is for the internal CSS build distributed with the plugin.
4+
* Use `plugin.css` if you are trying to integrate with a custom Filament Theme.
5+
*
6+
* @see https://github.com/pboivin/filament-peek/blob/2.x/docs/configuration.md#integrating-with-a-custom-theme
7+
*/
8+
9+
@tailwind utilities;
10+
11+
/*** Modal structure ***/
12+
13+
.filament-peek-modal {
14+
@apply fixed left-0 top-0 z-[9000] h-screen w-screen;
15+
@apply flex bg-gray-50 text-gray-950;
16+
@apply m-0 p-0 !important;
17+
@apply dark:bg-gray-950 dark:text-white;
18+
19+
--filament-peek-panel-header-height: 4.8rem;
20+
--filament-peek-builder-actions-height: 4.25rem;
21+
}
22+
23+
.filament-peek-panel {
24+
@apply flex flex-col;
25+
}
26+
27+
.filament-peek-panel-header {
28+
@apply flex items-center justify-between border-b bg-white p-4;
29+
@apply text-sm font-medium text-gray-900;
30+
@apply dark:border-gray-800 dark:bg-gray-900 dark:text-white;
31+
min-height: var(--filament-peek-panel-header-height);
32+
user-select: none;
33+
}
34+
35+
.filament-peek-panel-body {
36+
@apply flex-grow bg-gray-100 p-4;
37+
@apply dark:bg-gray-950;
38+
39+
iframe {
40+
@apply mx-auto shadow-2xl;
41+
transition: all 200ms;
42+
}
43+
44+
&.allow-iframe-overflow {
45+
@apply overflow-y-auto;
46+
}
47+
}
48+
49+
body.is-filament-peek-preview-modal-open {
50+
@apply overflow-hidden;
51+
}
52+
53+
/*** Preview ***/
54+
55+
.filament-peek-preview {
56+
@apply flex-grow max-w-full;
57+
58+
.filament-peek-panel-header > * {
59+
@apply min-w-[10rem];
60+
}
61+
}
62+
63+
.filament-peek-device-presets {
64+
@apply hidden justify-center xl:flex;
65+
66+
button {
67+
@apply mx-2 inline-flex flex-col items-center disabled:opacity-25;
68+
69+
svg {
70+
@apply h-6 w-6;
71+
}
72+
73+
&:after {
74+
@apply mt-1 block h-1 w-1 rounded-full bg-transparent;
75+
content: '';
76+
}
77+
78+
&.is-active-device-preset:after {
79+
@apply bg-current opacity-25;
80+
}
81+
}
82+
}
83+
84+
.filament-peek-rotate-preset {
85+
svg {
86+
@apply relative -top-1;
87+
}
88+
}
89+
90+
.filament-peek-modal-actions {
91+
@apply flex justify-end;
92+
}
93+
94+
/*** Editor ***/
95+
96+
.filament-peek-editor {
97+
@apply hidden border-r rtl:border-l;
98+
@apply dark:border-gray-700;
99+
100+
.filament-peek-panel-body {
101+
@apply flex h-full w-full p-0;
102+
}
103+
}
104+
105+
.filament-peek-editor-icon {
106+
@apply gap-0 border-0 p-2 bg-transparent !important;
107+
108+
&:not(:focus) {
109+
box-shadow: none !important;
110+
}
111+
112+
svg {
113+
@apply text-gray-900 dark:text-white;
114+
}
115+
116+
&.is-icon-active {
117+
svg {
118+
@apply text-primary-600;
119+
}
120+
}
121+
}
122+
123+
.filament-peek-editor-auto-refresh-label {
124+
@apply inline-flex items-center gap-2 p-2;
125+
}
126+
127+
.filament-peek-builder-editor {
128+
@apply relative flex h-full w-full flex-col;
129+
}
130+
131+
.filament-peek-builder-content {
132+
@apply w-full overflow-y-auto p-4;
133+
height: calc(100vh - var(--filament-peek-panel-header-height));
134+
max-height: calc(100vh - var(--filament-peek-panel-header-height));
135+
136+
.tippy-content [x-ref="panel"] {
137+
@apply text-gray-900 dark:text-gray-300;
138+
}
139+
}
140+
141+
.filament-peek-builder-actions {
142+
@apply hidden;
143+
}
144+
145+
.filament-peek-builder-editor.has-sidebar-actions {
146+
.filament-peek-builder-content {
147+
@apply w-full overflow-y-auto p-4;
148+
height: calc(
149+
100vh - var(--filament-peek-panel-header-height) -
150+
var(--filament-peek-builder-actions-height)
151+
);
152+
max-height: calc(
153+
100vh - var(--filament-peek-panel-header-height) -
154+
var(--filament-peek-builder-actions-height)
155+
);
156+
}
157+
158+
.filament-peek-builder-actions {
159+
@apply block w-full border-t dark:border-gray-700;
160+
height: var(--filament-peek-builder-actions-height);
161+
}
162+
163+
/* Main builder */
164+
.fi-fo-builder > .fi-fo-builder-block-picker {
165+
@apply absolute bottom-0 left-0 w-full p-4;
166+
}
167+
168+
/* Nested buidlers */
169+
.fi-fo-builder .fi-fo-builder > .fi-fo-builder-block-picker {
170+
position: initial;
171+
padding: initial;
172+
}
173+
}
174+
175+
/*** Resizer ***/
176+
177+
.filament-peek-editor-resizer {
178+
@apply absolute left-[100%] top-0 h-full w-[9px] bg-transparent;
179+
@apply border-l-[3px] border-transparent;
180+
@apply rtl:right-[100%] rtl:border-l-0 rtl:border-r-[3px];
181+
182+
&:hover {
183+
@apply border-gray-500;
184+
cursor: ew-resize;
185+
}
186+
}
187+
188+
.filament-peek-iframe-cover {
189+
@apply hidden;
190+
}
191+
192+
.is-filament-peek-editor-resizing {
193+
user-select: none;
194+
cursor: ew-resize;
195+
196+
.filament-peek-editor-resizer {
197+
@apply border-gray-500;
198+
}
199+
200+
.filament-peek-iframe-cover {
201+
@apply block fixed inset-0 z-[9010];
202+
}
203+
}

‎resources/css/plugin.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@tailwind utilities;
2-
31
/*** Modal structure ***/
42

53
.filament-peek-modal {

0 commit comments

Comments
 (0)