lookbook 1.3.1 → 1.3.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/lookbook/css/themes/blue.css +3 -1
- data/app/assets/lookbook/css/themes/indigo.css +3 -1
- data/app/assets/lookbook/css/themes/zinc.css +3 -1
- data/app/components/lookbook/code/component.css +2 -2
- data/app/components/lookbook/code/component.html.erb +2 -1
- data/app/components/lookbook/code/component.rb +13 -2
- data/app/components/lookbook/code/highlight_github.css +406 -0
- data/app/components/lookbook/nav/item/component.html.erb +1 -1
- data/app/components/lookbook/params/editor/component.html.erb +2 -2
- data/app/components/lookbook/params/field/component.css +3 -3
- data/app/components/lookbook/split_layout/component.html.erb +1 -1
- data/app/components/lookbook/viewport/component.css +1 -1
- data/app/components/lookbook/viewport/component.html.erb +1 -1
- data/app/views/lookbook/inspector/panels/_notes.html.erb +2 -2
- data/app/views/lookbook/inspector/panels/_params.html.erb +1 -1
- data/config/app.yml +3 -0
- data/lib/lookbook/stores/config_store.rb +4 -0
- data/lib/lookbook/version.rb +1 -1
- data/public/lookbook-assets/css/lookbook.css +404 -211
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/css/themes/blue.css +3 -1
- data/public/lookbook-assets/css/themes/blue.css.map +1 -1
- data/public/lookbook-assets/css/themes/indigo.css +3 -1
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
- data/public/lookbook-assets/css/themes/zinc.css +3 -1
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
- metadata +2 -2
- data/app/components/lookbook/code/highlight_github_light.css +0 -217
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6a75bef1487d9f1c5952ef77ae412f7c29164eb51e3afb416a0edcc7e2bd289c
|
4
|
+
data.tar.gz: 75700234c84897f13a04eedf97eb59f1974785428ceac2f24bb2bfe29b10a5f3
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7064ac9dc7e1cdf8f61fd4f26affcb0ddc5c0a16f78ce081d1628ab46139386813b09660ead2703aed8abb2117fde9516254a7cc448e3225875b6652e51dc9ee
|
7
|
+
data.tar.gz: 79ee84dc0ac3b2cc92281c6da717a37979881b24e7d36fe6c1a15844c5ec22b41a83f03e71a32e0b61aa89f829ed53ed3462178c9c007dadcf08062fb8d54e62
|
@@ -22,6 +22,7 @@
|
|
22
22
|
--lookbook-base-900: theme("colors.zinc.900");
|
23
23
|
--lookbook-text: var(--lookbook-base-800);
|
24
24
|
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
25
26
|
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
27
|
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
28
|
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
@@ -50,15 +51,16 @@
|
|
50
51
|
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
52
|
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
53
|
--lookbook-viewport-handle: var(--lookbook-white);
|
54
|
+
--lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
|
53
55
|
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
56
|
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
57
|
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
58
|
--lookbook-page-bg: var(--lookbook-white);
|
57
59
|
--lookbook-drawer-bg: var(--lookbook-base-50);
|
60
|
+
--lookbook-params-editor-bg: var(--lookbook-white);
|
58
61
|
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
62
|
--lookbook-header-text: var(--lookbook-white);
|
60
63
|
--lookbook-header-border: var(--lookbook-accent-700);
|
61
64
|
--lookbook-blank-slate-title: var(--lookbook-accent-600);
|
62
65
|
--lookbook-branding-text: var(--lookbook-header-text);
|
63
|
-
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
64
66
|
}
|
@@ -22,6 +22,7 @@
|
|
22
22
|
--lookbook-base-900: theme("colors.zinc.900");
|
23
23
|
--lookbook-text: var(--lookbook-base-800);
|
24
24
|
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
25
26
|
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
27
|
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
28
|
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
@@ -50,15 +51,16 @@
|
|
50
51
|
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
52
|
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
53
|
--lookbook-viewport-handle: var(--lookbook-white);
|
54
|
+
--lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
|
53
55
|
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
56
|
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
57
|
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
58
|
--lookbook-page-bg: var(--lookbook-white);
|
57
59
|
--lookbook-drawer-bg: var(--lookbook-base-50);
|
60
|
+
--lookbook-params-editor-bg: var(--lookbook-white);
|
58
61
|
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
62
|
--lookbook-header-text: var(--lookbook-white);
|
60
63
|
--lookbook-header-border: var(--lookbook-accent-700);
|
61
64
|
--lookbook-blank-slate-title: var(--lookbook-accent-600);
|
62
65
|
--lookbook-branding-text: var(--lookbook-header-text);
|
63
|
-
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
64
66
|
}
|
@@ -22,6 +22,7 @@
|
|
22
22
|
--lookbook-base-900: theme("colors.zinc.900");
|
23
23
|
--lookbook-text: var(--lookbook-base-800);
|
24
24
|
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
25
26
|
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
27
|
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
28
|
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
@@ -50,15 +51,16 @@
|
|
50
51
|
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
52
|
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
53
|
--lookbook-viewport-handle: var(--lookbook-white);
|
54
|
+
--lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
|
53
55
|
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
56
|
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
57
|
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
58
|
--lookbook-page-bg: var(--lookbook-white);
|
57
59
|
--lookbook-drawer-bg: var(--lookbook-base-50);
|
60
|
+
--lookbook-params-editor-bg: var(--lookbook-white);
|
58
61
|
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
62
|
--lookbook-header-text: var(--lookbook-white);
|
60
63
|
--lookbook-header-border: var(--lookbook-accent-700);
|
61
64
|
--lookbook-blank-slate-title: var(--lookbook-accent-600);
|
62
65
|
--lookbook-branding-text: var(--lookbook-header-text);
|
63
|
-
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
64
66
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
@import "./
|
1
|
+
@import "./highlight_github.css";
|
2
2
|
|
3
3
|
@layer components {
|
4
4
|
[data-component="code"] {
|
@@ -25,7 +25,7 @@
|
|
25
25
|
|
26
26
|
& .line-numbers {
|
27
27
|
width: min-content;
|
28
|
-
@apply
|
28
|
+
@apply border-r border-dashed z-10 h-full p-3 select-none text-right;
|
29
29
|
}
|
30
30
|
|
31
31
|
& .line-number {
|
@@ -9,7 +9,8 @@ module Lookbook
|
|
9
9
|
highlight_lines: [],
|
10
10
|
start_line: 1,
|
11
11
|
wrap: false,
|
12
|
-
theme:
|
12
|
+
theme: nil,
|
13
|
+
dark: false,
|
13
14
|
full_height: false,
|
14
15
|
**html_attrs
|
15
16
|
)
|
@@ -23,6 +24,7 @@ module Lookbook
|
|
23
24
|
@highlight_lines = highlight_lines
|
24
25
|
@wrap = wrap
|
25
26
|
@theme = theme
|
27
|
+
@dark = dark
|
26
28
|
@full_height = full_height
|
27
29
|
super(**html_attrs)
|
28
30
|
end
|
@@ -44,7 +46,16 @@ module Lookbook
|
|
44
46
|
end
|
45
47
|
|
46
48
|
def full_height?
|
47
|
-
@full_height
|
49
|
+
@full_height
|
50
|
+
end
|
51
|
+
|
52
|
+
def is_dark?
|
53
|
+
@dark
|
54
|
+
end
|
55
|
+
|
56
|
+
def before_render
|
57
|
+
@theme ||= (config.highlighter_options && config.highlighter_options[:theme]&.to_sym) || :github
|
58
|
+
@dark ||= ActiveModel::Type::Boolean.new.cast((config.highlighter_options && config.highlighter_options[:dark]) || false)
|
48
59
|
end
|
49
60
|
|
50
61
|
protected
|
@@ -0,0 +1,406 @@
|
|
1
|
+
.theme-github {
|
2
|
+
--dark-bg: #111111;
|
3
|
+
--dark-gray-1: #404040;
|
4
|
+
--dark-gray-2: #d0d0d0;
|
5
|
+
--dark-gray-3: #cccccc;
|
6
|
+
--dark-gray-4: #777777;
|
7
|
+
--dark-gray-5: #aaaaaa;
|
8
|
+
--dark-gray-6: #bbbbbb;
|
9
|
+
--dark-gray-7: #666666;
|
10
|
+
--dark-blue-1: #3677a9;
|
11
|
+
--dark-blue-2: #24909d;
|
12
|
+
--dark-blue-3: #447fcf;
|
13
|
+
--dark-blue-4: #009988;
|
14
|
+
--dark-red-1: #a61717;
|
15
|
+
--dark-red-2: #331111;
|
16
|
+
--dark-red-3: #e50808;
|
17
|
+
--dark-red-4: #520000;
|
18
|
+
--dark-red-5: #d22323;
|
19
|
+
--dark-red-6: #cd2828;
|
20
|
+
--dark-yellow-1: #e9b96e;
|
21
|
+
--dark-yellow-2: #ffa500;
|
22
|
+
--dark-orange: #d2691e;
|
23
|
+
--dark-white: #ffffff;
|
24
|
+
--dark-green-1: #589819;
|
25
|
+
--dark-green-2: #6ab825;
|
26
|
+
--dark-green-3: #44ccaa;
|
27
|
+
|
28
|
+
--light-bg: #ffffff;
|
29
|
+
--light-gray-1: #f8f8f8;
|
30
|
+
--light-gray-2: #27272a;
|
31
|
+
--light-gray-3: #cccccc;
|
32
|
+
--light-gray-4: #888888;
|
33
|
+
--light-gray-5: #999999;
|
34
|
+
--light-gray-6: #555555;
|
35
|
+
--light-gray-7: #bbbbbb;
|
36
|
+
--light-yellow-1: #999988;
|
37
|
+
--light-red-1: #a61717;
|
38
|
+
--light-red-2: #e3d2d2;
|
39
|
+
--light-red-3: #dd1144;
|
40
|
+
--light-red-4: #ffdddd;
|
41
|
+
--light-red-5: #aa0000;
|
42
|
+
--light-red-6: #990000;
|
43
|
+
--light-purple-1: #800080;
|
44
|
+
--light-purple-2: #990073;
|
45
|
+
--light-black: #000000;
|
46
|
+
--light-green-1: #ddffdd;
|
47
|
+
--light-green-2: #009926;
|
48
|
+
--light-blue-1: #445588;
|
49
|
+
--light-blue-2: #009999;
|
50
|
+
--light-blue-3: #008080;
|
51
|
+
--light-blue-4: #0086b3;
|
52
|
+
--light-blue-5: #3c5d5d;
|
53
|
+
--light-blue-6: #000080;
|
54
|
+
|
55
|
+
--hl-bg: var(--light-bg);
|
56
|
+
--hl-hll-bg: var(--light-gray-1);
|
57
|
+
--hl-border: var(--light-gray-3);
|
58
|
+
--hl-line-number: var(--light-gray-2);
|
59
|
+
--hl-comment: var(--light-yellow-1);
|
60
|
+
--hl-comment-preproc: var(--light-gray-5);
|
61
|
+
--hl-comment-special-fg: var(--light-gray-5);
|
62
|
+
--hl-comment-special-bg: transparent;
|
63
|
+
--hl-error-fg: var(--light-red-1);
|
64
|
+
--hl-error-bg: var(--light-red-2);
|
65
|
+
--hl-subtle-fg: var(--light-gray-2);
|
66
|
+
--hl-entity: var(--light-purple-1);
|
67
|
+
--hl-keyword: var(--light-black);
|
68
|
+
--hl-output: var(--light-gray-4);
|
69
|
+
--hl-operator: var(--light-black);
|
70
|
+
--hl-punctuation: var(--light-gray-6);
|
71
|
+
--hl-string: var(--light-red-3);
|
72
|
+
--hl-string-other: var(--light-red-3);
|
73
|
+
--hl-string-regex: var(--light-green-2);
|
74
|
+
--hl-string-symbol: var(--light-purple-2);
|
75
|
+
--hl-deleted-fg: var(--light-black);
|
76
|
+
--hl-deleted-bg: var(--light-red-4);
|
77
|
+
--hl-danger: var(--light-red-5);
|
78
|
+
--hl-heading: var(--light-gray-5);
|
79
|
+
--hl-inserted-fg: var(--light-black);
|
80
|
+
--hl-inserted-bg: var(--light-green-1);
|
81
|
+
--hl-prompt: var(--light-gray-6);
|
82
|
+
--hl-subheading: var(--light-purple-1);
|
83
|
+
--hl-keyword-crude: var(--light-black);
|
84
|
+
--hl-keyword-subtle: var(--light-blue-1);
|
85
|
+
--hl-number: var(--light-blue-2);
|
86
|
+
--hl-attribute: var(--light-blue-3);
|
87
|
+
--hl-builtin: var(--light-blue-4);
|
88
|
+
--hl-builtin-pseudo: var(--light-gray-5);
|
89
|
+
--hl-class: var(--light-blue-1);
|
90
|
+
--hl-variable: var(--light-blue-3);
|
91
|
+
--hl-decorator: var(--light-blue-5);
|
92
|
+
--hl-exception: var(--light-red-6);
|
93
|
+
--hl-function: var(--light-red-6);
|
94
|
+
--hl-namespace: var(--light-gray-6);
|
95
|
+
--hl-tag: var(--light-blue-6);
|
96
|
+
--hl-word: var(--light-black);
|
97
|
+
--hl-whitespace: var(--light-gray-7);
|
98
|
+
|
99
|
+
&.dark {
|
100
|
+
--hl-bg: var(--dark-bg);
|
101
|
+
--hl-hll-bg: var(--dark-gray-1);
|
102
|
+
--hl-border: var(--dark-gray-4);
|
103
|
+
--hl-line-number: var(--dark-gray-2);
|
104
|
+
--hl-comment: var(--dark-blue-1);
|
105
|
+
--hl-comment-preproc: var(--dark-orange);
|
106
|
+
--hl-comment-special-fg: var(--dark-red-3);
|
107
|
+
--hl-comment-special-bg: var(--dark-red-4);
|
108
|
+
--hl-error-fg: var(--dark-red-1);
|
109
|
+
--hl-error-bg: var(--dark-red-2);
|
110
|
+
--hl-subtle-fg: var(--dark-gray-2);
|
111
|
+
--hl-entity: var(--dark-gray-2);
|
112
|
+
--hl-keyword: var(--dark-gray-3);
|
113
|
+
--hl-output: var(--dark-gray-3);
|
114
|
+
--hl-operator: var(--dark-gray-4);
|
115
|
+
--hl-punctuation: var(--dark-yellow-1);
|
116
|
+
--hl-string: var(--dark-orange);
|
117
|
+
--hl-string-other: var(--dark-yellow-2);
|
118
|
+
--hl-string-regex: var(--dark-red-6);
|
119
|
+
--hl-string-symbol: var(--dark-orange);
|
120
|
+
--hl-deleted-fg: var(--dark-red-5);
|
121
|
+
--hl-deleted-bg: transparent;
|
122
|
+
--hl-danger: var(--dark-red-5);
|
123
|
+
--hl-heading: var(--dark-white);
|
124
|
+
--hl-inserted-fg: var(--dark-green-1);
|
125
|
+
--hl-inserted-bg: transparent;
|
126
|
+
--hl-prompt: var(--dark-gray-5);
|
127
|
+
--hl-subheading: var(--dark-white);
|
128
|
+
--hl-keyword-crude: var(--dark-green-2);
|
129
|
+
--hl-keyword-subtle: var(--dark-green-2);
|
130
|
+
--hl-number: var(--dark-red-6);
|
131
|
+
--hl-attribute: var(--dark-gray-6);
|
132
|
+
--hl-builtin: var(--dark-blue-2);
|
133
|
+
--hl-builtin-pseudo: var(--dark-blue-2);
|
134
|
+
--hl-class: var(--dark-blue-3);
|
135
|
+
--hl-variable: var(--dark-green-3);
|
136
|
+
--hl-decorator: var(--dark-yellow-2);
|
137
|
+
--hl-exception: var(--dark-gray-6);
|
138
|
+
--hl-function: var(--dark-blue-4);
|
139
|
+
--hl-namespace: var(--dark-blue-3);
|
140
|
+
--hl-tag: var(--dark-green-2);
|
141
|
+
--hl-word: var(--dark-green-2);
|
142
|
+
--hl-whitespace: var(--dark-gray-7);
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
.theme-github {
|
147
|
+
background-color: var(--hl-bg);
|
148
|
+
|
149
|
+
.line-numbers {
|
150
|
+
background-color: var(--hl-bg);
|
151
|
+
border-color: var(--hl-border);
|
152
|
+
color: var(--hl-line-number);
|
153
|
+
}
|
154
|
+
|
155
|
+
.highlight {
|
156
|
+
.hll {
|
157
|
+
background-color: var(--hl-hll-bg);
|
158
|
+
}
|
159
|
+
.c {
|
160
|
+
color: var(--hl-comment);
|
161
|
+
font-style: italic;
|
162
|
+
} /* Comment */
|
163
|
+
.err {
|
164
|
+
color: var(--hl-error-fg);
|
165
|
+
background-color: var(--hl-error-bg);
|
166
|
+
} /* Error */
|
167
|
+
.g {
|
168
|
+
color: var(--hl-subtle-fg);
|
169
|
+
} /* Generic */
|
170
|
+
.k {
|
171
|
+
color: var(--hl-keyword);
|
172
|
+
font-weight: bold;
|
173
|
+
} /* Keyword; catches prefixes and css3 */
|
174
|
+
.l {
|
175
|
+
color: var(--hl-subtle-fg);
|
176
|
+
} /* Literal */
|
177
|
+
.n,
|
178
|
+
.h {
|
179
|
+
color: var(--hl-keyword);
|
180
|
+
} /* Name */
|
181
|
+
.o {
|
182
|
+
color: var(--hl-operator);
|
183
|
+
font-weight: bold;
|
184
|
+
} /* Operator */
|
185
|
+
.x {
|
186
|
+
color: var(--hl-subtle-fg);
|
187
|
+
} /* Other */
|
188
|
+
.p {
|
189
|
+
color: var(--hl-punctuation);
|
190
|
+
} /* Punctuation */
|
191
|
+
.cm {
|
192
|
+
color: var(--hl-comment);
|
193
|
+
font-style: italic;
|
194
|
+
} /* Comment.Multiline */
|
195
|
+
.cp {
|
196
|
+
color: var(--hl-comment-preproc);
|
197
|
+
font-weight: bold;
|
198
|
+
} /* Comment.Preproc */
|
199
|
+
.c1 {
|
200
|
+
color: var(--hl-comment);
|
201
|
+
font-style: italic;
|
202
|
+
} /* Comment.Single */
|
203
|
+
.cs {
|
204
|
+
color: var(--hl-comment-special-fg);
|
205
|
+
background-color: var(--hl-comment-special-bg);
|
206
|
+
font-weight: bold;
|
207
|
+
font-style: italic;
|
208
|
+
} /* Comment.Special */
|
209
|
+
.gd {
|
210
|
+
color: var(--hl-deleted-fg);
|
211
|
+
background-color: var(--hl-deleted-bg);
|
212
|
+
} /* Generic.Deleted */
|
213
|
+
.ge {
|
214
|
+
color: var(--hl-subtle-fg);
|
215
|
+
font-style: italic;
|
216
|
+
} /* Generic.Emph */
|
217
|
+
.gr {
|
218
|
+
color: var(--hl-danger);
|
219
|
+
} /* Generic.Error */
|
220
|
+
.gh {
|
221
|
+
color: var(--hl-heading);
|
222
|
+
} /* Generic.Heading */
|
223
|
+
.gi {
|
224
|
+
color: var(--hl-inserted-fg);
|
225
|
+
background-color: var(--hl-inserted-bg);
|
226
|
+
} /* Generic.Inserted */
|
227
|
+
.go {
|
228
|
+
color: var(--hl-output);
|
229
|
+
} /* Generic.Output */
|
230
|
+
.gp {
|
231
|
+
color: var(--hl-prompt);
|
232
|
+
} /* Generic.Prompt */
|
233
|
+
.gs {
|
234
|
+
color: var(--hl-subtle-fg);
|
235
|
+
font-weight: bold;
|
236
|
+
} /* Generic.Strong */
|
237
|
+
.gu {
|
238
|
+
color: var(--hl-subheading);
|
239
|
+
font-weight: bold;
|
240
|
+
} /* Generic.Subheading */
|
241
|
+
.gt {
|
242
|
+
color: var(--hl-danger);
|
243
|
+
} /* Generic.Traceback */
|
244
|
+
.kc {
|
245
|
+
color: var(--hl-keyword-crude);
|
246
|
+
font-weight: bold;
|
247
|
+
} /* Keyword.Constant */
|
248
|
+
.kd {
|
249
|
+
color: var(--hl-keyword-crude);
|
250
|
+
font-weight: bold;
|
251
|
+
} /* Keyword.Declaration */
|
252
|
+
.kn {
|
253
|
+
color: var(--hl-keyword-crude);
|
254
|
+
font-weight: bold;
|
255
|
+
} /* Keyword.Namespace */
|
256
|
+
.kp {
|
257
|
+
color: var(--hl-keyword-crude);
|
258
|
+
font-weight: bold;
|
259
|
+
} /* Keyword.Pseudo */
|
260
|
+
.kr {
|
261
|
+
color: var(--hl-keyword-crude);
|
262
|
+
font-weight: bold;
|
263
|
+
} /* Keyword.Reserved */
|
264
|
+
.kt {
|
265
|
+
color: var(--hl-keyword-subtle);
|
266
|
+
font-weight: bold;
|
267
|
+
} /* Keyword.Type */
|
268
|
+
.ld {
|
269
|
+
color: var(--hl-subtle-fg);
|
270
|
+
} /* Literal.Date */
|
271
|
+
.m {
|
272
|
+
color: var(--hl-number);
|
273
|
+
} /* Literal.Number */
|
274
|
+
.s {
|
275
|
+
color: var(--hl-string);
|
276
|
+
} /* Literal.String */
|
277
|
+
.na {
|
278
|
+
color: var(--hl-attribute);
|
279
|
+
} /* Name.Attribute */
|
280
|
+
.nb {
|
281
|
+
color: var(--hl-builtin);
|
282
|
+
} /* Name.Builtin */
|
283
|
+
.nc {
|
284
|
+
color: var(--hl-class);
|
285
|
+
font-weight: bold;
|
286
|
+
} /* Name.Class */
|
287
|
+
.no {
|
288
|
+
color: var(--hl-variable);
|
289
|
+
} /* Name.Constant */
|
290
|
+
.nd {
|
291
|
+
color: var(--hl-decorator);
|
292
|
+
} /* Name.Decorator */
|
293
|
+
.ni {
|
294
|
+
color: var(--hl-entity);
|
295
|
+
} /* Name.Entity */
|
296
|
+
.ne {
|
297
|
+
color: var(--hl-exception);
|
298
|
+
font-weight: bold;
|
299
|
+
} /* Name.Exception */
|
300
|
+
.nf {
|
301
|
+
color: var(--hl-function);
|
302
|
+
font-weight: bold;
|
303
|
+
} /* Name.Function */
|
304
|
+
.nl {
|
305
|
+
color: var(--hl-subtle-fg);
|
306
|
+
} /* Name.Label */
|
307
|
+
.nn {
|
308
|
+
color: var(--hl-namespace);
|
309
|
+
} /* Name.Namespace */
|
310
|
+
.nx {
|
311
|
+
color: var(--hl-subtle-fg);
|
312
|
+
} /* Name.Other */
|
313
|
+
.py {
|
314
|
+
color: var(--hl-subtle-fg);
|
315
|
+
} /* Name.Property */
|
316
|
+
.nt {
|
317
|
+
color: var(--hl-tag);
|
318
|
+
} /* Name.Tag */
|
319
|
+
.nv {
|
320
|
+
color: var(--hl-variable);
|
321
|
+
} /* Name.Variable */
|
322
|
+
.ow {
|
323
|
+
color: var(--hl-word);
|
324
|
+
font-weight: bold;
|
325
|
+
} /* Operator.Word */
|
326
|
+
.w {
|
327
|
+
color: var(--hl-whitespace);
|
328
|
+
} /* Text.Whitespace */
|
329
|
+
.mf {
|
330
|
+
color: var(--hl-number);
|
331
|
+
} /* Literal.Number.Float */
|
332
|
+
.mh {
|
333
|
+
color: var(--hl-number);
|
334
|
+
} /* Literal.Number.Hex */
|
335
|
+
.mi {
|
336
|
+
color: var(--hl-number);
|
337
|
+
} /* Literal.Number.Integer */
|
338
|
+
.mo {
|
339
|
+
color: var(--hl-number);
|
340
|
+
} /* Literal.Number.Oct */
|
341
|
+
.sb {
|
342
|
+
color: var(--hl-string);
|
343
|
+
} /* Literal.String.Backtick */
|
344
|
+
.sc {
|
345
|
+
color: var(--hl-string);
|
346
|
+
} /* Literal.String.Char */
|
347
|
+
.sd {
|
348
|
+
color: var(--hl-string);
|
349
|
+
} /* Literal.String.Doc */
|
350
|
+
.s2 {
|
351
|
+
color: var(--hl-string);
|
352
|
+
} /* Literal.String.Double */
|
353
|
+
.se {
|
354
|
+
color: var(--hl-string);
|
355
|
+
} /* Literal.String.Escape */
|
356
|
+
.sh {
|
357
|
+
color: var(--hl-string);
|
358
|
+
} /* Literal.String.Heredoc */
|
359
|
+
.si {
|
360
|
+
color: var(--hl-string);
|
361
|
+
} /* Literal.String.Interpol */
|
362
|
+
.sx {
|
363
|
+
color: var(--hl-string-other);
|
364
|
+
} /* Literal.String.Other */
|
365
|
+
.sr {
|
366
|
+
color: var(--hl-string-regex);
|
367
|
+
} /* Literal.String.Regex */
|
368
|
+
.s1 {
|
369
|
+
color: var(--hl-string);
|
370
|
+
} /* Literal.String.Single */
|
371
|
+
.ss {
|
372
|
+
color: var(--hl-string-symbol);
|
373
|
+
} /* Literal.String.Symbol */
|
374
|
+
.bp {
|
375
|
+
color: var(--hl-builtin-pseudo);
|
376
|
+
} /* Name.Builtin.Pseudo */
|
377
|
+
.vc {
|
378
|
+
color: var(--hl-variable);
|
379
|
+
} /* Name.Variable.Class */
|
380
|
+
.vg {
|
381
|
+
color: var(--hl-variable);
|
382
|
+
} /* Name.Variable.Global */
|
383
|
+
.vi {
|
384
|
+
color: var(--hl-variable);
|
385
|
+
} /* Name.Variable.Instance */
|
386
|
+
.il {
|
387
|
+
color: var(--hl-number);
|
388
|
+
} /* Literal.Number.Integer.Long */
|
389
|
+
|
390
|
+
/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
|
391
|
+
.line-number {
|
392
|
+
-webkit-user-select: none;
|
393
|
+
-moz-user-select: none;
|
394
|
+
}
|
395
|
+
|
396
|
+
/* Mozilla specific */
|
397
|
+
.line-number::-moz-selection {
|
398
|
+
background-color: transparent;
|
399
|
+
}
|
400
|
+
|
401
|
+
/* Other major browsers */
|
402
|
+
.line-number::selection {
|
403
|
+
background-color: transparent;
|
404
|
+
}
|
405
|
+
}
|
406
|
+
}
|
@@ -8,7 +8,7 @@
|
|
8
8
|
cloak: true do %>
|
9
9
|
<%= lookbook_tag href.present? ? :a : :button,
|
10
10
|
href: href,
|
11
|
-
class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
|
11
|
+
class: "flex w-full items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
|
12
12
|
style: "padding-left: #{left_pad}px",
|
13
13
|
"x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
|
14
14
|
<div class="relative flex items-center w-full">
|
@@ -1,5 +1,5 @@
|
|
1
|
-
<%= render_component_tag class: "
|
2
|
-
<div class="bg-
|
1
|
+
<%= render_component_tag class: "overflow-hidden" do %>
|
2
|
+
<div class="bg-lookbook-params-editor-bg border border-lookbook-divider rounded-md overflow-x-auto">
|
3
3
|
<table class="border-collapse w-full" :class="narrow && 'linear'">
|
4
4
|
<thead>
|
5
5
|
<tr>
|
@@ -3,7 +3,7 @@
|
|
3
3
|
table:not(.linear) {
|
4
4
|
thead {
|
5
5
|
tr {
|
6
|
-
@apply border-b border-
|
6
|
+
@apply border-b border-lookbook-divider;
|
7
7
|
}
|
8
8
|
|
9
9
|
th {
|
@@ -21,7 +21,7 @@
|
|
21
21
|
|
22
22
|
tbody {
|
23
23
|
tr + tr td {
|
24
|
-
@apply border-t border-
|
24
|
+
@apply border-t border-lookbook-divider;
|
25
25
|
}
|
26
26
|
|
27
27
|
td {
|
@@ -53,7 +53,7 @@
|
|
53
53
|
}
|
54
54
|
|
55
55
|
tr:not(:last-child) {
|
56
|
-
@apply border-b border-
|
56
|
+
@apply border-b border-lookbook-divider;
|
57
57
|
}
|
58
58
|
|
59
59
|
tr {
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<% panes.each.with_index(1) do |pane, i| %>
|
3
3
|
<%= pane %>
|
4
4
|
<% if i < panes.size %>
|
5
|
-
<div class="bg-lookbook-divider relative" x-init="registerGutter">
|
5
|
+
<div class="bg-lookbook-divider relative z-50" x-init="registerGutter">
|
6
6
|
<div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
|
7
7
|
'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
|
8
8
|
'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal
|
@@ -4,7 +4,7 @@
|
|
4
4
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
|
5
5
|
|
6
6
|
.resize-handle {
|
7
|
-
@apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-
|
7
|
+
@apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-viewport-handle-hover hover:bg-opacity-20;
|
8
8
|
@apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
|
9
9
|
}
|
10
10
|
}
|
@@ -27,7 +27,7 @@
|
|
27
27
|
style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
|
28
28
|
<iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
|
29
29
|
x-ref="iframe"
|
30
|
-
class="h-full w-full border border-lookbook-divider"
|
30
|
+
class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
|
31
31
|
:class="{ 'pointer-events-none': reflowing }"
|
32
32
|
style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
|
33
33
|
src="<%= @src %>"
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<% if items.many? %>
|
3
3
|
<div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
|
4
4
|
<% items.each do |item| %>
|
5
|
-
<div class="
|
5
|
+
<div class="p-4 relative">
|
6
6
|
<h6 class="italic font-mono mb-4 opacity-40">
|
7
7
|
# <%= item.label %>
|
8
8
|
</h6>
|
@@ -11,7 +11,7 @@
|
|
11
11
|
<% end %>
|
12
12
|
</div>
|
13
13
|
<% else %>
|
14
|
-
<div class="
|
14
|
+
<div class="p-4 w-full h-full bg-lookbook-prose-bg">
|
15
15
|
<%= lookbook_render :prose do %>
|
16
16
|
<%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
|
17
17
|
<% end %>
|
data/config/app.yml
CHANGED