From 398d7ce6198bea57ff2628ccf7d20cc20380fa1b Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 17 Apr 2020 15:35:17 +0200 Subject: [PATCH] feat: add inline editor box-shadow variables Signed-off-by: peterpeterparker --- .../app-components-inline-editor.md | 68 ++++++++++--------- .../app-components-inline-editor.tsx | 12 +++- .../components/triangle/triangle.scss | 2 +- .../deckdeckgo-inline-editor.scss | 2 +- 4 files changed, 48 insertions(+), 36 deletions(-) diff --git a/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md b/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md index 4e3fcd937..c92df1d7b 100644 --- a/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md +++ b/docs/docs/components/app-components-inline-editor/app-components-inline-editor.md @@ -110,42 +110,44 @@ If you provide custom actions, a `slot` is going to be generated on the flight f The `` could be styled using the following CSS4 variables which would only applies on the type ``: -| 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 diff --git a/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx b/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx index 8c3b24700..ab3534b6f 100644 --- a/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx +++ b/docs/src/app/pages/docs/components/app-components-inline-editor/app-components-inline-editor.tsx @@ -468,6 +468,16 @@ export class AppComponentsInlineEditor { 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:

@@ -482,7 +492,7 @@ export class AppComponentsInlineEditor { --deckgo-inline-editor-mobile-box-shadow - 0 0px 1px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.15) + 0 0 8px 4px rgba(0, 0, 0, 0.1) A box shadow for the toolbar diff --git a/webcomponents/inline-editor/src/components/components/triangle/triangle.scss b/webcomponents/inline-editor/src/components/components/triangle/triangle.scss index 154257894..b105d01fa 100644 --- a/webcomponents/inline-editor/src/components/components/triangle/triangle.scss +++ b/webcomponents/inline-editor/src/components/components/triangle/triangle.scss @@ -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); } diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss index 18eb58045..3b8e4be7b 100644 --- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss +++ b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss @@ -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 {