Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 438693a

Browse files
peterpeterparkerpeterpeterparker
authored
Merge pull request #701 from deckgo/inline-editor-variables
feat: add inline editor box-shadow variables
2 parents 29fa5a9 + 398d7ce commit 438693a

File tree

4 files changed

+48
-36
lines changed

4 files changed

+48
-36
lines changed

‎docs/docs/components/app-components-inline-editor/app-components-inline-editor.md‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -110,42 +110,44 @@ If you provide custom actions, a `slot` is going to be generated on the flight f
110110

111111
The `<deckgo-inline-editor/>` could be styled using the following CSS4 variables which would only applies on the type `<svg/>`:
112112

113-
| CSS4 variable | Default | Note |
114-
| ---------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------- |
115-
| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) |
116-
| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) |
117-
| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar |
118-
| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar |
119-
| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar |
120-
| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar |
121-
| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane |
122-
| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar |
123-
| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar |
124-
| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator |
125-
| --deckgo-inline-editor-button-color | #3880ff | The buttons color |
126-
| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size |
127-
| --deckgo-inline-editor-button-font-family | inherit | The buttons font family |
128-
| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active |
129-
| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled |
130-
| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed |
131-
| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url |
132-
| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url |
133-
| --deckgo-inline-editor-width | inherit | The width of the toolbar |
113+
| CSS4 variable | Default | Note |
114+
| ---------------------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------- |
115+
| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) |
116+
| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) |
117+
| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar |
118+
| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar |
119+
| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar |
120+
| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar |
121+
| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane |
122+
| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar |
123+
| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar |
124+
| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator |
125+
| --deckgo-inline-editor-button-color | #3880ff | The buttons color |
126+
| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size |
127+
| --deckgo-inline-editor-button-font-family | inherit | The buttons font family |
128+
| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active |
129+
| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled |
130+
| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed |
131+
| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url |
132+
| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url |
133+
| --deckgo-inline-editor-width | inherit | The width of the toolbar |
134+
| --deckgo-inline-editor-box-shadow | 0 0 8px 4px rgba(0, 0, 0, 0.1) | A box shadow for the toolbar |
135+
| --deckgo-inline-editor-triangle-box-shadow | 0 0 8px 4px rgba(0, 0, 0, 0.1) | A box shadow for the triangle above the toolbar |
134136

135137
Furthermore, the following variables are also available but only have an effects on mobile devices:
136138

137-
| CSS4 variable | Default | Note |
138-
| ---------------------------------------------------- | ------------------------------------------------------------ | ---------------------------- |
139-
| --deckgo-inline-editor-mobile-box-shadow | 0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15) | A box shadow for the toolbar |
140-
| --deckgo-inline-editor-mobile-background-top | #fff | \*\* |
141-
| --deckgo-inline-editor-mobile-border | 0 | \*\* |
142-
| --deckgo-inline-editor-button-mobile-color | black | \*\* |
143-
| --deckgo-inline-editor-mobile-background-bottom | #fff | \*\* |
144-
| --deckgo-inline-editor-button-mobile-color-active | #3880ff | \*\* |
145-
| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | \*\* |
146-
| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | \*\* |
147-
| --deckgo-inline-editor-link-mobile-color | inherit | \*\* |
148-
| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | \*\* |
139+
| CSS4 variable | Default | Note |
140+
| ---------------------------------------------------- | ------------------------------ | ---------------------------- |
141+
| --deckgo-inline-editor-mobile-box-shadow | 0 0 8px 4px rgba(0, 0, 0, 0.1) | A box shadow for the toolbar |
142+
| --deckgo-inline-editor-mobile-background-top | #fff | \*\* |
143+
| --deckgo-inline-editor-mobile-border | 0 | \*\* |
144+
| --deckgo-inline-editor-button-mobile-color | black | \*\* |
145+
| --deckgo-inline-editor-mobile-background-bottom | #fff | \*\* |
146+
| --deckgo-inline-editor-button-mobile-color-active | #3880ff | \*\* |
147+
| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | \*\* |
148+
| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | \*\* |
149+
| --deckgo-inline-editor-link-mobile-color | inherit | \*\* |
150+
| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | \*\* |
149151

150152
\*\* like above but for mobile
151153

‎docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,16 @@ export class AppComponentsInlineEditor {
468468
<td>inherit</td>
469469
<td>The width of the toolbar</td>
470470
</tr>
471+
<tr>
472+
<td>--deckgo-inline-editor-box-shadow</td>
473+
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
474+
<td>A box shadow for the toolbar</td>
475+
</tr>
476+
<tr>
477+
<td>--deckgo-inline-editor-triangle-box-shadow</td>
478+
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
479+
<td>A box shadow for the triangle above the toolbar</td>
480+
</tr>
471481
</tbody>
472482
</table>
473483
<p>Furthermore, the following variables are also available but only have an effects on mobile devices:</p>
@@ -482,7 +492,7 @@ export class AppComponentsInlineEditor {
482492
<tbody>
483493
<tr>
484494
<td>--deckgo-inline-editor-mobile-box-shadow</td>
485-
<td>0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15)</td>
495+
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
486496
<td>A box shadow for the toolbar</td>
487497
</tr>
488498
<tr>

‎webcomponents/inline-editor/src/components/components/triangle/triangle.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ div.triangle {
2020
transform: rotate(45deg);
2121
top: 28px;
2222
left: 8px;
23-
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
23+
box-shadow: var(--deckgo-inline-editor-triangle-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.1));
2424

2525
border: var(--deckgo-inline-editor-border);
2626
}

‎webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ div.deckgo-tools {
2828

2929
transform: var(--deckgo-inline-editor-transform);
3030

31-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
31+
box-shadow: var(--deckgo-inline-editor-box-shadow, 0 0 8px 4px rgba(0, 0, 0, 0.1));
3232

3333
&.deckgo-tools-sticky,
3434
&.deckgo-tools-mobile.deckgo-tools-sticky {

0 commit comments

Comments
 (0)