Skip to content

Commit 17d9a49

Browse files
bcakmakoglubcakmakoglu
committed
docs: add copy icon overrides
1 parent 811595c commit 17d9a49

File tree

2 files changed

+74
-48
lines changed

2 files changed

+74
-48
lines changed

‎docs/src/.vitepress/theme/style.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,15 @@
131131
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
132132
}
133133

134+
:root {
135+
--vp-icon-copy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9InJnYmEoMTI4LDEyOCwxMjgsMSkiPjxwYXRoIGQ9Ik00IDEuNUgzYTIgMiAwIDAgMC0yIDJWMTRhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0yVjMuNWEyIDIgMCAwIDAtMi0yaC0xdjFoMWExIDEgMCAwIDEgMSAxVjE0YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjMuNWExIDEgMCAwIDEgMS0xaDF2LTF6Ii8+PHBhdGggZD0iTTkuNSAxYS41LjUgMCAwIDEgLjUuNXYxYS41LjUgMCAwIDEtLjUuNWgtM2EuNS41IDAgMCAxLS41LS41di0xYS41LjUgMCAwIDEgLjUtLjVoM3ptLTMtMUExLjUgMS41IDAgMCAwIDUgMS41djFBMS41IDEuNSAwIDAgMCA2LjUgNGgzQTEuNSAxLjUgMCAwIDAgMTEgMi41di0xQTEuNSAxLjUgMCAwIDAgOS41IDBoLTN6Ii8+PC9nPjwvc3ZnPg== ");
136+
--vp-icon-copied: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9InJnYmEoMTI4LDEyOCwxMjgsMSkiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjg1NCA3LjE0NmEuNS41IDAgMCAxIDAgLjcwOGwtMyAzYS41LjUgMCAwIDEtLjcwOCAwbC0xLjUtMS41YS41LjUgMCAxIDEgLjcwOC0uNzA4TDcuNSA5Ljc5M2wyLjY0Ni0yLjY0N2EuNS41IDAgMCAxIC43MDggMHoiLz48cGF0aCBkPSJNNCAxLjVIM2EyIDIgMCAwIDAtMiAyVjE0YTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDItMlYzLjVhMiAyIDAgMCAwLTItMmgtMXYxaDFhMSAxIDAgMCAxIDEgMVYxNGExIDEgMCAwIDEtMSAxSDNhMSAxIDAgMCAxLTEtMVYzLjVhMSAxIDAgMCAxIDEtMWgxdi0xeiIvPjxwYXRoIGQ9Ik05LjUgMWEuNS41IDAgMCAxIC41LjV2MWEuNS41IDAgMCAxLS41LjVoLTNhLjUuNSAwIDAgMS0uNS0uNXYtMWEuNS41IDAgMCAxIC41LS41aDN6bS0zLTFBMS41IDEuNSAwIDAgMCA1IDEuNXYxQTEuNSAxLjUgMCAwIDAgNi41IDRoM0ExLjUgMS41IDAgMCAwIDExIDIuNXYtMUExLjUgMS41IDAgMCAwIDkuNSAwaC0zeiIvPjwvZz48L3N2Zz4=");
137+
}
138+
139+
.copy {
140+
color: rgba(128,128,128,1)
141+
}
142+
134143
/**
135144
* Component: Algolia
136145
* -------------------------------------------------------------------------- */

‎docs/src/guide/theming.md

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,11 @@ Below are a couple of examples on how you can do this:
8686

8787
Directly styling the Vue Flow component:
8888

89-
```vue{5-6,8-9}
89+
```html{4-5}
9090
<div style="height: 300px">
9191
<VueFlow
9292
v-model="elements"
93-
94-
<!-- You can pass a class name to the component -->
9593
class="my-diagram-class"
96-
97-
<!-- You can pass an object containing CSSProperties or CSS variables -->
9894
:style="{ background: 'red' }"
9995
/>
10096
</div>
@@ -159,19 +155,29 @@ These alterations can be implemented either on a global scale or to individual e
159155
}
160156
```
161157

162-
```js{2-3} [<LogosJavascript />]
158+
```js{6-7} [<LogosJavascript />]
163159
const elements = ref([
164-
/* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
165-
{ id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
160+
{
161+
id: '1',
162+
label: 'Node 1',
163+
position: { x: 100, y: 100 },
164+
/* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
165+
style: { '--vf-node-color': 'blue' }
166+
},
166167
])
167168
```
168169

169-
```ts{4-5} [<LogosTypescript />]
170+
```ts{8-9} [<LogosTypescript />]
170171
import type { Elements } from '@vue-flow/core';
171172
172173
const elements = ref<Elements>([
173-
/* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
174-
{ id: '1', label: 'Node 1', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
174+
{
175+
id: '1',
176+
label: 'Node 1',
177+
position: { x: 100, y: 100 },
178+
/* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
179+
style: { '--vf-node-color': 'blue' }
180+
},
175181
])
176182
```
177183

@@ -192,40 +198,51 @@ Here's a concise list of CSS variables you can consider, along with their effect
192198

193199
## CSS Class Names
194200

195-
Here you'll find a handy reference guide of class names and their respective containers:
196-
197-
| Name | Container |
198-
|-------------------------------|---------------------------------------------------|
199-
| .vue-flow | The outer container |
200-
| .vue-flow__container | Wrapper for container elements |
201-
| .vue-flow__viewport | The inner container |
202-
| .vue-flow__transformationpane | Pane for movements like zooming and panning |
203-
| .vue-flow__selectionpane | Pane for handling user selection |
204-
| .vue-flow__selection | Defines current user selection box |
205-
| .vue-flow__edges | Wrapper rendering edges |
206-
| .vue-flow__edge | Wrapper around each edge element |
207-
| .vue-flow__edge-{type} | Edge type (either custom or default) |
208-
| .vue-flow__edge .selected | Defines the currently selected edge(s) |
209-
| .vue-flow__edge .animated | Defines an animated edge |
210-
| .vue-flow__edge-path | SVG path for edge elements |
211-
| .vue-flow__edge-text | Wrapper around edge label |
212-
| .vue-flow__edge-textbg | Background wrapper around edge label |
213-
| .vue-flow__connectionline | Container for the connection line elements |
214-
| .vue-flow__connection | Individual connection line element |
215-
| .vue-flow__connection-path | SVG path for connection line |
216-
| .vue-flow__nodes | Rendering wrapper around nodes |
217-
| .vue-flow__node | Wrapper around each node element |
218-
| .vue-flow__node .selected | Defines the currently selected node(s) |
219-
| .vue-flow__node-{type} | Node type (either custom or default) |
220-
| .vue-flow__nodesselection | Defines selection rectangle for nodes |
221-
| .vue-flow__handle | Wrapper around node handle elements |
222-
| .vue-flow__handle-bottom | Defines a handle at bottom |
223-
| .vue-flow__handle-top | Defines a handle at top |
224-
| .vue-flow__handle-left | Defines a handle at left |
225-
| .vue-flow__handle-right | Defines a handle at right |
226-
| .vue-flow__handle-connecting | Connection line is over the handle |
227-
| .vue-flow__handle-valid | Connection line over handle with valid connection |
228-
| .vue-flow__background | Background component |
229-
| .vue-flow__minimap | MiniMap component |
230-
| .vue-flow__controls | Controls component |
231-
201+
Here you'll find a handy reference guide of class names and their respective elements:
202+
203+
#### Containers
204+
| Name | Container |
205+
| --------------------- | ----------------------------------------- |
206+
| .vue-flow | The outer container |
207+
| .vue-flow__container | Wrapper for container elements |
208+
| .vue-flow__viewport | The inner container |
209+
| .vue-flow__background | Background component |
210+
| .vue-flow__minimap | MiniMap component |
211+
| .vue-flow__controls | Controls component |
212+
213+
#### Edges
214+
| Name | Description |
215+
| ------------------------- | ------------------------------------------------- |
216+
| .vue-flow__edges | Wrapper rendering edges |
217+
| .vue-flow__edge | Wrapper around each edge element |
218+
| .vue-flow__selectionpane | Pane for handling user selection |
219+
| .vue-flow__selection | Defines current user selection box |
220+
| .vue-flow__edge-{type} | Edge type (either custom or default) |
221+
| .vue-flow__edge .selected | Defines the currently selected edge(s) |
222+
| .vue-flow__edge .animated | Defines an animated edge |
223+
| .vue-flow__edge-path | SVG path for edge elements |
224+
| .vue-flow__edge-text | Wrapper around edge label |
225+
| .vue-flow__edge-textbg | Background wrapper around edge label |
226+
| .vue-flow__connectionline | Container for the connection line elements |
227+
| .vue-flow__connection | Individual connection line element |
228+
| .vue-flow__connection-path| SVG path for connection line |
229+
230+
#### Nodes
231+
| Name | Description |
232+
| --------------------- | ----------------------------------------- |
233+
| .vue-flow__nodes | Rendering wrapper around nodes |
234+
| .vue-flow__node | Wrapper around each node element |
235+
| .vue-flow__node .selected | Defines the currently selected node(s) |
236+
| .vue-flow__node-{type} | Node type (either custom or default) |
237+
| .vue-flow__nodesselection | Defines selection rectangle for nodes |
238+
239+
#### Node Handles
240+
| Name | Description |
241+
| ------------------------- | ----------------------------------------- |
242+
| .vue-flow__handle | Wrapper around node handle elements |
243+
| .vue-flow__handle-bottom | Defines a handle at bottom |
244+
| .vue-flow__handle-top | Defines a handle at top |
245+
| .vue-flow__handle-left | Defines a handle at left |
246+
| .vue-flow__handle-right | Defines a handle at right |
247+
| .vue-flow__handle-connecting | Connection line is over the handle |
248+
| .vue-flow__handle-valid | Connection line over handle with valid connection |

0 commit comments

Comments
 (0)