Style#

Composable CSS-in-Python utilities: Style, Theme, CssClass, StyleSheet.

Build CSS from Python kwargs, centralize design tokens, and inject efficient CSS classes into the DOM instead of sending inline style strings per component.

class ngapp.style.CssClass(name, sheet=None)#

Bases: object

CSS class handle with support for nested descendant rules.

Compose with + to join class names:

sidebar = CssClass("ngs0")
hidden  = CssClass("ngs1")
sidebar + hidden            # CssClass("ngs0 ngs1")
sidebar + "bg-primary"      # CssClass("ngs0 bg-primary")
"q-pa-md" + sidebar         # CssClass("q-pa-md ngs0")

Add nested CSS rules that target children/descendants:

panel = css.add(Style(height="100%"))
panel.rule(".q-checkbox__label", font_size="0.82rem")
panel.rule(".q-slider", margin="2px 0", padding="0 4px")

# Pass a Style object instead of kwargs:
panel.rule(".q-field", Style(margin_bottom="2px"))

# Chaining:
panel.rule(".q-checkbox__label", font_size="0.82rem")              .rule(".q-slider", margin="2px 0")

# Dict-style subscript:
panel[".q-checkbox__label"] = Style(font_size="0.82rem")

rule(selector, style=None, **kwargs)#

Add a nested CSS rule scoped to this class.

Args:

selector: CSS selector for descendants, e.g. .q-checkbox__label style: Optional Style object. If not given, kwargs are

used to construct one.

**kwargs: CSS properties (same syntax as Style).

Returns:

self for chaining.

Example:

panel.rule(".q-checkbox__label", font_size="0.82rem")
panel.rule(".q-input", Style(margin_bottom="2px"))

class ngapp.style.Style(**kwargs)#

Bases: object

Composable CSS property bag.

Keyword arguments become CSS properties (underscores → hyphens). Merge with | (right side wins, None removes a property). Converts to a CSS string via str().

Example:

overlay = Style(position="fixed", z_index=9999, color="white")
hidden  = overlay | Style(display="none")
str(overlay)  # "position: fixed; z-index: 9999; color: white;"

class ngapp.style.StyleSheet(prefix='ngs')#

Bases: object

Registers Style objects as CSS classes and injects them into the DOM.

Basic usage:

css = StyleSheet()
sidebar = css.add(Style(height="100%", background="#f5f7fa"))
hidden  = css.add(Style(display="none"))
Div(ui_class=str(sidebar + hidden))  # "ngs0 ngs1"
css.inject(app)                      # creates a <style> tag in <head>

Nested rules via the returned CssClass handle:

panel = css.add(Style(overflow_y="auto"))
panel.rule(".q-checkbox__label", font_size="0.82rem")
panel.rule(".q-slider", margin="2px 0", padding="0 4px")

# Chaining:
panel.rule(".q-checkbox__label", font_size="0.82rem") \
     .rule(".q-field--dense", margin_bottom="2px")

# Dict-style:
panel[".q-checkbox__label"] = Style(font_size="0.82rem")

add(style, name=None)#: Register a style and return a CssClass for it.

add_rule(selector, style)#

Add a CSS rule with an arbitrary selector.

Use this for descendant/nested selectors that target sub-components within a container:

css.add_rule(".my-panel .q-checkbox", Style(font_size="0.8rem"))
css.add_rule(".my-panel .q-input", Style(margin_bottom="2px"))

inject(app)#

Inject all registered styles into the DOM as a <style> tag.

Uses app.call_js, so it is safe to call during __init__.

scoped(parent, rules)#

Add multiple nested rules scoped under a parent class.

Args:: parent: A CssClass (from add()) or a string class name. rules: A dict mapping CSS selectors to Style objects.

Each selector is prefixed with .parent_class.

Example:

panel = css.add(Style(overflow_y="auto"))
css.scoped(panel, {
    ".q-checkbox__label": Style(font_size="0.82rem"),
    ".q-slider": Style(margin="2px 0"),
})

class ngapp.style.Theme(**kwargs)#

Bases: object

Centralized design tokens (colors, spacing, font sizes).

All keyword arguments are stored as attributes. Pass a spacing tuple to enable the sp() helper.

Attributes named after Quasar brand colors (primary, secondary, accent, dark, positive, negative, info, warning) can be applied to the app with apply(), replacing set_colors.

Example:

theme = Theme(primary="#164d7d", border="#e0e0e0", spacing=(0, 4, 8, 12, 16))
theme.primary       # "#164d7d"
theme.sp(2)         # "8px"
theme.border_line() # "1px solid #e0e0e0"
theme.apply(app)    # sets --q-primary on the page

apply(app)#

Apply Quasar brand colors from this theme to the app.

Picks up any attributes named primary, secondary, accent, dark, positive, negative, info, or warning and passes them to app.set_colors().

border_line(width='1px', style='solid', color=None)#: Return a CSS border shorthand, e.g. "1px solid #e0e0e0".

sp(index)#: Return spacing[index] as a pixel string, e.g. "8px".