theme ⇒ WeavyWidget.plugins.theme

Inject additional styles into the sealed widget shadow dom. You may define styles by either setting widget plugin options or by injecting them via addStyles

Kind: global mixin
Properties
NameTypeDescription
.createStyleSheet()function

createStyleSheet

.addStyles()function

addStyles

stylesstring

The current styles.

Example
<style id="widgetStyleOverrides" media="not all">
    // media="not all" keeps it from beeing applied on the page
    ...
</style>
<script>
    var widget = new WeavyWidget({
        plugins: {
            theme: {
                styles: ".weavy-dock{ background: red; }"
            }
        }
    });

    widget.addStyles(".weavy-wide { background: none !important; }");
    widget.addStyles(document.getElementById("widgetStyleOverrides").textContent);
</script>

Instance members

widget.createStyleSheet([css])

Creates a style sheet for the widget and adds any styles together with styles provided in options or by using addStyles. This function is automatically called on before:build

Kind: instance method of theme
ParamTypeDescription
[css]string

Optional additional css that will be appended to the previously provided styles.


widget.addStyles(css)

Add styles to the widget stylesheet.

Kind: instance method of theme
ParamTypeDescription
cssstring

The styles to apply. Full css including selectors etc may be used.


Static members

theme.defaults : Object

Default plugin options

Kind: static property of theme
Properties
NameTypeDescription
stylesstring

Styles applied when the widget is created

Example
WeavyWidget.plugins.theme.defaults = {
    styles: ""
};