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

feat: add inline editor box-shadow variables #701

Merged
merged 1 commit into from
Apr 17, 2020
Merged

feat: add inline editor box-shadow variables #701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions docs/docs/components/app-components-inline-editor/app-components-inline-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,42 +110,44 @@ If you provide custom actions, a `slot` is going to be generated on the flight f

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

| CSS4 variable | Default | Note |
| ---------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------- |
| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) |
| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) |
| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar |
| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar |
| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar |
| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar |
| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane |
| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar |
| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar |
| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator |
| --deckgo-inline-editor-button-color | #3880ff | The buttons color |
| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size |
| --deckgo-inline-editor-button-font-family | inherit | The buttons font family |
| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active |
| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled |
| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed |
| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url |
| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url |
| --deckgo-inline-editor-width | inherit | The width of the toolbar |
| CSS4 variable | Default | Note |
| ---------------------------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------- |
| --deckgo-inline-editor-background-top | white | The top background of the toolbar (linear gradient) |
| --deckgo-inline-editor-background-bottom | white | The bottom background of the toolbar (linear gradient) |
| --deckgo-inline-editor-border | 1px solid #3880ff | The border of the toolbar |
| --deckgo-inline-editor-border-radius | 8px | The border radius of the toolbar |
| --deckgo-inline-editor-padding | 0 8px | The padding of the toolbar |
| --deckgo-inline-editor-zindex | 1 | The z-Index of the toolbar |
| --deckgo-inline-editor-transform | | The transform property of the toolbar, useful for example if your viewport contains a split menu pane |
| --deckgo-inline-editor-sticky-bottom | 0 | The bottom attribute of the sticky toolbar |
| --deckgo-inline-editor-sticky-zindex | | The z-Index of the sticky toolbar |
| --deckgo-inline-editor-separator-background | rgba(255, 255, 255, .2) | The color of the separator |
| --deckgo-inline-editor-button-color | #3880ff | The buttons color |
| --deckgo-inline-editor-button-font-size | 1.4rem | The buttons font size |
| --deckgo-inline-editor-button-font-family | inherit | The buttons font family |
| --deckgo-inline-editor-button-color-active | black | The color of the buttons when active |
| --deckgo-inline-editor-button-color-disabled | #f4f5f8 | The color of the buttons when disabled |
| --deckgo-inline-editor-button-display-disabled | none | Per default the disable elements on title elements are not displayed |
| --deckgo-inline-editor-link-color | #3880ff | The color of the input field for the url |
| --deckgo-inline-editor-link-placeholder-color | #3880ff | The color of the placeholder of the input field for the url |
| --deckgo-inline-editor-width | inherit | The width of the toolbar |
| --deckgo-inline-editor-box-shadow | 0 0 8px 4px rgba(0, 0, 0, 0.1) | A box shadow for the toolbar |
| --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 |

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

| CSS4 variable | Default | Note |
| ---------------------------------------------------- | ------------------------------------------------------------ | ---------------------------- |
| --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 |
| --deckgo-inline-editor-mobile-background-top | #fff | \*\* |
| --deckgo-inline-editor-mobile-border | 0 | \*\* |
| --deckgo-inline-editor-button-mobile-color | black | \*\* |
| --deckgo-inline-editor-mobile-background-bottom | #fff | \*\* |
| --deckgo-inline-editor-button-mobile-color-active | #3880ff | \*\* |
| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | \*\* |
| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | \*\* |
| --deckgo-inline-editor-link-mobile-color | inherit | \*\* |
| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | \*\* |
| CSS4 variable | Default | Note |
| ---------------------------------------------------- | ------------------------------ | ---------------------------- |
| --deckgo-inline-editor-mobile-box-shadow | 0 0 8px 4px rgba(0, 0, 0, 0.1) | A box shadow for the toolbar |
| --deckgo-inline-editor-mobile-background-top | #fff | \*\* |
| --deckgo-inline-editor-mobile-border | 0 | \*\* |
| --deckgo-inline-editor-button-mobile-color | black | \*\* |
| --deckgo-inline-editor-mobile-background-bottom | #fff | \*\* |
| --deckgo-inline-editor-button-mobile-color-active | #3880ff | \*\* |
| --deckgo-inline-editor-button-mobile-color-disabled | #f4f5f8 | \*\* |
| --deckgo-inline-editor-separator-mobile-background | #f4f5f8 | \*\* |
| --deckgo-inline-editor-link-mobile-color | inherit | \*\* |
| --deckgo-inline-editor-link-mobile-placeholder-color | inherit | \*\* |

\*\* like above but for mobile

Expand Down
12 changes: 11 additions & 1 deletion ...c/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,16 @@ export class AppComponentsInlineEditor {
<td>inherit</td>
<td>The width of the toolbar</td>
</tr>
<tr>
<td>--deckgo-inline-editor-box-shadow</td>
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
<td>A box shadow for the toolbar</td>
</tr>
<tr>
<td>--deckgo-inline-editor-triangle-box-shadow</td>
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
<td>A box shadow for the triangle above the toolbar</td>
</tr>
</tbody>
</table>
<p>Furthermore, the following variables are also available but only have an effects on mobile devices:</p>
Expand All @@ -482,7 +492,7 @@ export class AppComponentsInlineEditor {
<tbody>
<tr>
<td>--deckgo-inline-editor-mobile-box-shadow</td>
<td>0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15)</td>
<td>0 0 8px 4px rgba(0, 0, 0, 0.1)</td>
<td>A box shadow for the toolbar</td>
</tr>
<tr>
Expand Down
2 changes: 1 addition & 1 deletion webcomponents/inline-editor/src/components/components/triangle/triangle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ div.triangle {
transform: rotate(45deg);
top: 28px;
left: 8px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: var(--deckgo-inline-editor-triangle-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.1));

border: var(--deckgo-inline-editor-border);
}
Expand Down
2 changes: 1 addition & 1 deletion webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ div.deckgo-tools {

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

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

&.deckgo-tools-sticky,
&.deckgo-tools-mobile.deckgo-tools-sticky {
Expand Down