diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index e0619c64cb..d48923495c 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -279,70 +279,6 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi endif::[] -- -== Theme Variants - -=== Compact - -Apply the `compact` theme to make the toolbar more compact. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - -=== No Border - -Apply the `no-border` theme variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - == Toolbar Actions diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index ca0544a2b8..4292714176 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -7,6 +7,165 @@ order: 50 --- = Rich Text Editor Styling +== Style Variants + +The following variants are supported: + +[cols="1,3,1"] +|=== +| Variant | Description | Supported by + +|`compact` +| Makes the toolbar more compact +| Lumo + +|`no-border` +| Removes the border around the editor +| Lumo + +|=== + +=== Compact + +Apply the `compact` style variant to make the toolbar more compact. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + + +=== No Border + +Apply the `no-border` style variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders. + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +include::../_styling-section-theming-props.adoc[tag=style-properties] + +=== Common Properties + +[cols="3,1"] +|=== +| Property | Supported by + +| `--vaadin-rich-text-editor-background` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-color` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-font-size` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-line-height` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-padding` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-background` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-gap` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-padding` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-background` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-border-color` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-border-radius` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-border-width` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-padding` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-button-text-color` +| Aura, Lumo + +|=== + +=== Overlay Properties + +[cols="3,1"] +|=== +| CSS Property | Supported by + +| `--vaadin-rich-text-editor-overlay-gap` +| Aura + +| `--vaadin-rich-text-editor-overlay-padding` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-color` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-radius` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-width` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-height` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-width` +| Aura +|=== + include::../_styling-section-intros.adoc[tag=selectors]