From 5ead6df8cc996181b555f9a197fd8622d5473f9b Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Thu, 18 Jun 2020 20:07:13 +0200 Subject: [PATCH] build(docs): add sdk styling with variables --- src/pages/docs/sdk/getting-started/styling.md | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/pages/docs/sdk/getting-started/styling.md b/src/pages/docs/sdk/getting-started/styling.md index c988db9d1..9328938c1 100644 --- a/src/pages/docs/sdk/getting-started/styling.md +++ b/src/pages/docs/sdk/getting-started/styling.md @@ -2,13 +2,29 @@ title: 'Styling' --- - - We don't inject any CSS into your application. -The card previsualization is shipped with a default minimal inline style. +Instead, the card previsualization is shipped with a default minimal inline style. + +If you need to adapt the _look and feel_, two can use one of the following strategies + +## CSS Variables + +You can use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to overwrite the default values: + +**--microlink-hover-background-color**: `#f5f8fa` +**--microlink-hover-border-color**: `#8899A680` +**--microlink-background-color**: `#fff` +**--microlink-border-style**: `solid` +**--microlink-border-width**: `1px` +**--microlink-border**: `1px solid #e1e8ed` +**--microlink-color**: `#181919` +**--microlink-color**: `#e1e8ed` +**--microlink-max-width**: `500px` + +## CSS Classes -If you need to adapt the _look and feel_, each component of the card has been assigned a [BEM](http://getbem.com/introduction) class name: +When the microlink UI card is rendered, each subcomponent of the card has been assigned a [BEM](http://getbem.com/introduction) class name: - **microlink_card**: The root element of the card. - **microlink_card\_\_content_description**: The `p` tag of the card description.