mirror of
https://github.com/elastic/kibana.git
synced 2025-06-28 03:01:21 -04:00
0a516cfbb9
* contributing guide -> asciidoc * Update docs/developer/contributing/index.asciidoc Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com> * Update CONTRIBUTING.md Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com> * Update docs/developer/best-practices/stability.asciidoc Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com> * Update docs/developer/contributing/index.asciidoc Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com> * address code review comments * Update docs/developer/contributing/development-documentation.asciidoc Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com> * review comment updates * fix bad ref Co-authored-by: Peter Schretlen <peter.schretlen@gmail.com>
36 lines
No EOL
928 B
Text
36 lines
No EOL
928 B
Text
[[kibana-sass]]
|
|
=== Styling with SASS
|
|
|
|
When writing a new component, create a sibling SASS file of the same
|
|
name and import directly into the JS/TS component file. Doing so ensures
|
|
the styles are never separated or lost on import and allows for better
|
|
modularization (smaller individual plugin asset footprint).
|
|
|
|
All SASS (.scss) files will automatically build with the
|
|
https://elastic.github.io/eui/#/guidelines/sass[EUI] & {kib} invisibles (SASS variables, mixins, functions) from
|
|
the {kib-repo}tree/{branch}/src/legacy/ui/public/styles/_globals_v7light.scss[globals_THEME.scss] file.
|
|
|
|
*Example:*
|
|
|
|
[source,tsx]
|
|
----
|
|
// component.tsx
|
|
|
|
import './component.scss';
|
|
|
|
export const Component = () => {
|
|
return (
|
|
<div className="plgComponent" />
|
|
);
|
|
}
|
|
----
|
|
|
|
[source,scss]
|
|
----
|
|
// component.scss
|
|
|
|
.plgComponent { ... }
|
|
----
|
|
|
|
Do not use the underscore `_` SASS file naming pattern when importing
|
|
directly into a javascript file. |