style

Attach Sketch classes to elements, and the styles the components share: the focus ring, the hairline border, corner radii and the look of a disabled control. Use them to style your own markup to match.

Values

anchor_name

</>

pub fn anchor_name(id: String) -> String

A CSS anchor name derived from an element id, for tying a floating element such as a popover to the element that opens it. Characters that cannot appear in a CSS identifier become _. Put it in data-howdy-anchor on the opener and data-howdy-anchored on the floating element: howdy/ui/behaviour applies the names when the element opens, since a strict Content Security Policy forbids inline styles.

border_line

</>

pub fn border_line() -> String

The hairline border as a border value, for shorthands of your own.

bordered

</>

pub fn bordered() -> css.Style

A hairline border on every side, in the theme’s border colour.

bordered_side

</>

pub fn bordered_side(side: String) -> css.Style

A hairline border on one side: "top", "bottom", "inline-start" or "inline-end".

class

</>

pub fn class(class: css.Class) -> attribute.Attribute(msg)

Register a Sketch class and use it on an element. The CSS is included by howdy/ui/page and howdy/ui/live, or by styles.

disabled_look

</>

pub fn disabled_look() -> css.Style

A disabled control: faded, with a not-allowed cursor.

disabled_look_with

</>

pub fn disabled_look_with(cursor cursor: String) -> css.Style

A disabled control, faded, with a cursor of your own, such as "default" for a control that is not a form field.

focus_outline

</>

pub fn focus_outline() -> css.Style

The outline of the focus ring alone, for showing it under a selector of your own, such as :focus-within.

focus_ring

</>

pub fn focus_ring() -> css.Style

The focus ring, shown when a control is focused from the keyboard: focus_outline offset by 2px.

focus_ring_offset

</>

pub fn focus_ring_offset(offset: String) -> css.Style

The focus ring with an outline offset of your own, such as "-2px" to draw it inside an element that fills its container.

pill

</>

pub fn pill() -> css.Style

Fully rounded ends, for badges and other pills.

radius

</>

pub fn radius(value: String) -> css.Style

Rounded corners, usually one of the theme’s radius tokens.

rule

</>

pub fn rule(name: String, css: String) -> Nil

Register CSS a Sketch class cannot carry, such as @keyframes and the rules that apply them, under a stable name. Call it while rendering the element that needs it: the block is included once per document by howdy/ui/page, howdy/ui/live and styles, however many elements register it. A published stylesheet includes the built-in rules; add your own with export.rules.

styles

</>

pub fn styles() -> element.Element(msg)

A <style> element holding the CSS for every class used so far. Build it after the elements it styles. Pages and live views include this for you.