# Toast Transient confirmation and notification messages. ## Installation Download: /api/catalog/toast/download Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything. Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically. Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Toast/Toast, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings. ## Parameters Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges. | Parameter | Type | Direction | Default | | --- | --- | --- | --- | | variant | string | input | "info" | | title | string | input | "Info" | | description | string | input | "Área Norte · estado muted" | | actionLabel | string | input | "" | | showDismiss | boolean | input | true | | reducedMotion | boolean | input | false | ## Embedded View usage ```json { "type": "ia.display.view", "props": { "path": "Viewcraft/Components/UI/Toast/Toast", "params": { "variant": "info", "title": "Info", "description": "Área Norte · estado muted", "actionLabel": "", "showDismiss": true, "reducedMotion": false }, "useDefaultViewWidth": false, "useDefaultViewHeight": false } } ``` ## Verification Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production. ## Files ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Toast/Toast/view.json ```json { "custom": {}, "params": { "variant": "info", "title": "Info", "description": "Área Norte · estado muted", "actionLabel": "", "showDismiss": true, "reducedMotion": false }, "propConfig": { "params.variant": { "paramDirection": "input", "persistent": true }, "params.title": { "paramDirection": "input", "persistent": true }, "params.description": { "paramDirection": "input", "persistent": true }, "params.actionLabel": { "paramDirection": "input", "persistent": true }, "params.showDismiss": { "paramDirection": "input", "persistent": true }, "params.reducedMotion": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 360, "height": 72 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "Toast" }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "flex-start", "style": { "classes": "vc/toast vc/toast-info", "gap": "12px", "minWidth": 0, "boxSizing": "border-box", "width": "100%", "paddingTop": "12px", "paddingRight": "14px", "paddingBottom": "12px", "paddingLeft": "14px" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "IconWrap" }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "classes": "vc/toast-icon-wrap", "width": "20px", "height": "20px", "minWidth": "20px", "minHeight": "20px", "overflow": "hidden", "flexGrow": 0, "flexShrink": 0, "boxSizing": "border-box" } }, "position": { "grow": 0, "shrink": 0, "basis": "20px" }, "children": [ { "type": "ia.display.icon", "version": 0, "meta": { "name": "StatusIcon", "visible": true }, "props": { "path": "material/info_outline", "color": "#a1a1aa", "style": { "classes": "vc/toast-icon", "width": "18px", "height": "18px", "minWidth": "18px", "minHeight": "18px", "padding": "0px", "margin": "0px" } }, "propConfig": { "props.path": { "binding": { "type": "expr", "config": { "expression": "if(lower(coalesce({view.params.variant}, 'info')) = 'success', 'material/check_circle', if(lower(coalesce({view.params.variant}, 'info')) = 'warning', 'material/warning_amber', if(lower(coalesce({view.params.variant}, 'info')) = 'destructive', 'material/error_outline', if(lower(coalesce({view.params.variant}, 'info')) = 'loading', 'material/sync', 'material/info_outline'))))" } } }, "props.color": { "binding": { "type": "expr", "config": { "expression": "if(lower(coalesce({view.params.variant}, 'info')) = 'success', '#4ade80', if(lower(coalesce({view.params.variant}, 'info')) = 'warning', '#eab308', if(lower(coalesce({view.params.variant}, 'info')) = 'destructive', '#f87171', '#a1a1aa')))" } } }, "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(coalesce({view.params.variant}, \"info\")) != \"loading\"" } } } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" } }, { "type": "ia.display.view", "version": 0, "meta": { "name": "LoadingIcon" }, "props": { "path": "Viewcraft/Components/UI/Loader/Loader", "params": { "variant": "dots", "size": 16, "label": "", "reducedMotion": false }, "useDefaultViewWidth": false, "useDefaultViewHeight": false, "style": { "minWidth": 0, "minHeight": 0, "width": "16px", "height": "16px", "overflow": "visible", "classes": "vc/toast-loader" } }, "position": { "grow": 0, "shrink": 0, "basis": "16px" }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(coalesce({view.params.variant}, \"info\")) = \"loading\"" } } }, "props.params.reducedMotion": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.reducedMotion}, false)" } } } } } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Body" }, "props": { "direction": "column", "wrap": "nowrap", "alignItems": "stretch", "justify": "center", "style": { "classes": "vc/toast-body", "gap": "2px", "minWidth": 0, "flexGrow": 1, "boxSizing": "border-box" } }, "position": { "grow": 1, "shrink": 1, "basis": "0%" }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Title" }, "props": { "text": "Info", "style": { "classes": "vc/toast-title", "fontSize": "14px", "fontWeight": 600, "color": "#fafafa", "padding": "0px", "margin": "0px", "lineHeight": "20px" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "{view.params.title}" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Description" }, "props": { "text": "Área Norte · estado muted", "style": { "classes": "vc/toast-description", "fontSize": "12px", "fontWeight": 400, "color": "#a1a1aa", "padding": "0px", "margin": "0px", "lineHeight": "16px" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "{view.params.description}" } } }, "meta.visible": { "binding": { "type": "expr", "config": { "expression": "len(trim(coalesce({view.params.description}, \"\"))) > 0" } } } } } ] }, { "type": "ia.display.view", "version": 0, "meta": { "name": "Action" }, "props": { "path": "Primitives/Button", "params": { "label": "Ack", "variant": "ghost", "size": "sm", "disabled": false, "onClickMessage": "" }, "useDefaultViewWidth": false, "useDefaultViewHeight": false, "style": { "minWidth": "32px", "minHeight": "32px", "height": "32px", "width": "56px", "classes": "vc/toast-action" } }, "position": { "grow": 0, "shrink": 0, "basis": "56px" }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "len(trim(coalesce({view.params.actionLabel}, \"\"))) > 0" } } }, "props.params.label": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.actionLabel}, \"Ack\")" } } } } }, { "type": "ia.display.view", "version": 0, "meta": { "name": "Dismiss" }, "props": { "path": "Primitives/Button", "params": { "label": "✕", "variant": "ghost", "size": "sm", "disabled": false, "onClickMessage": "" }, "useDefaultViewWidth": false, "useDefaultViewHeight": false, "style": { "minWidth": "32px", "minHeight": "32px", "height": "32px", "width": "32px", "classes": "vc/toast-dismiss" } }, "position": { "grow": 0, "shrink": 0, "basis": "32px" }, "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "coalesce({view.params.showDismiss}, true)" } } } } } ], "propConfig": { "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "\"vc/toast vc/toast-\" + lower(coalesce({view.params.variant}, \"info\")) + if(coalesce({view.params.reducedMotion}, false), \" vc/toast-reduced\", \"\")" } } } } } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Toast/Toast/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Loader/Loader/view.json ```json { "custom": {}, "params": { "variant": "spinner", "size": 24, "label": "Sincronizando...", "reducedMotion": false }, "propConfig": { "params.variant": { "paramDirection": "input", "persistent": true }, "params.size": { "paramDirection": "input", "persistent": true }, "params.label": { "paramDirection": "input", "persistent": true }, "params.reducedMotion": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 220, "height": 36 } }, "root": { "type": "ia.container.flex", "version": 0, "meta": { "name": "Loader" }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "flex-start", "style": { "gap": "8px", "minWidth": 0, "boxSizing": "border-box", "classes": "vc/loader vc/loader-24", "alignItems": "center", "overflow": "visible" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "\"vc/loader vc/loader-\" + toString({view.params.size}) + if(coalesce({view.params.reducedMotion}, false), \" vc/loader-reduced\", \"\")" } } } }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "Spinner", "visible": true }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "gap": "0px", "minWidth": 0, "boxSizing": "border-box", "alignItems": "center", "justifyContent": "center", "classes": "vc/loader-visual" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Ring" }, "props": { "text": " ", "style": { "padding": "0px", "margin": "0px", "classes": "vc/loader-spinner", "width": "24px", "height": "24px", "minWidth": "24px", "minHeight": "24px", "maxWidth": "24px", "maxHeight": "24px", "borderStyle": "solid", "borderWidth": "2px", "borderColor": "#3f3f46", "borderTopColor": "#fafafa", "borderRadius": "50%", "backgroundColor": "transparent", "overflow": "hidden", "fontSize": "1px", "lineHeight": "1px" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"16px\", \"24px\", \"32px\", \"24px\")" } } }, "props.style.borderWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"2px\", \"2px\", \"3px\", \"2px\")" } } } } } ], "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(toString({view.params.variant})) = \"spinner\"" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Dots", "visible": true }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "gap": "4px", "minWidth": 0, "boxSizing": "border-box", "alignItems": "center", "justifyContent": "center", "classes": "vc/loader-visual", "overflow": "visible" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "children": [ { "type": "ia.container.flex", "version": 0, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "classes": "vc/loader-dot vc/loader-dot-1", "width": "7px", "height": "7px", "minWidth": "7px", "minHeight": "7px", "padding": "0px", "margin": "0px", "borderRadius": "50%", "backgroundColor": "#fafafa", "overflow": "visible", "flexShrink": 0, "position": "relative", "zIndex": 2 } }, "meta": { "name": "Dot1" }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } } }, "children": [] }, { "type": "ia.container.flex", "version": 0, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "classes": "vc/loader-dot vc/loader-dot-2", "width": "7px", "height": "7px", "minWidth": "7px", "minHeight": "7px", "padding": "0px", "margin": "0px", "borderRadius": "50%", "backgroundColor": "#fafafa", "overflow": "visible", "flexShrink": 0, "position": "relative", "zIndex": 2 } }, "meta": { "name": "Dot2" }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } } }, "children": [] }, { "type": "ia.container.flex", "version": 0, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "classes": "vc/loader-dot vc/loader-dot-3", "width": "7px", "height": "7px", "minWidth": "7px", "minHeight": "7px", "padding": "0px", "margin": "0px", "borderRadius": "50%", "backgroundColor": "#fafafa", "overflow": "visible", "flexShrink": 0, "position": "relative", "zIndex": 2 } }, "meta": { "name": "Dot3" }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"6px\", \"8px\", \"10px\", \"8px\")" } } } }, "children": [] } ], "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(toString({view.params.variant})) = \"dots\"" } } }, "props.style.gap": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Bars", "visible": true }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "gap": "4px", "minWidth": 0, "boxSizing": "border-box", "alignItems": "center", "justifyContent": "center", "classes": "vc/loader-visual" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "children": [ { "type": "ia.container.flex", "version": 0, "meta": { "name": "Bar1" }, "props": { "direction": "column", "style": { "classes": "vc/loader-bar vc/loader-bar-1", "width": "4px", "height": "18px", "minWidth": "4px", "minHeight": "14px", "maxWidth": "4px", "maxHeight": "18px", "backgroundColor": "#a1a1aa", "borderRadius": "1px", "boxSizing": "border-box" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } } }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Bar1Inner" }, "props": { "text": " ", "style": { "width": "100%", "height": "100%", "backgroundColor": "#a1a1aa", "padding": "0px", "margin": "0px", "fontSize": "1px" } }, "position": { "grow": 1, "shrink": 0, "basis": "auto" } } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Bar2" }, "props": { "direction": "column", "style": { "classes": "vc/loader-bar vc/loader-bar-2", "width": "4px", "height": "18px", "minWidth": "4px", "minHeight": "14px", "maxWidth": "4px", "maxHeight": "18px", "backgroundColor": "#a1a1aa", "borderRadius": "1px", "boxSizing": "border-box" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } } }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Bar2Inner" }, "props": { "text": " ", "style": { "width": "100%", "height": "100%", "backgroundColor": "#a1a1aa", "padding": "0px", "margin": "0px", "fontSize": "1px" } }, "position": { "grow": 1, "shrink": 0, "basis": "auto" } } ] }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Bar3" }, "props": { "direction": "column", "style": { "classes": "vc/loader-bar vc/loader-bar-3", "width": "4px", "height": "18px", "minWidth": "4px", "minHeight": "14px", "maxWidth": "4px", "maxHeight": "18px", "backgroundColor": "#a1a1aa", "borderRadius": "1px", "boxSizing": "border-box" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.width": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } }, "props.style.maxWidth": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"3px\", \"4px\", \"5px\", \"4px\")" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"12px\", \"18px\", \"24px\", \"18px\")" } } } }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Bar3Inner" }, "props": { "text": " ", "style": { "width": "100%", "height": "100%", "backgroundColor": "#a1a1aa", "padding": "0px", "margin": "0px", "fontSize": "1px" } }, "position": { "grow": 1, "shrink": 0, "basis": "auto" } } ] } ], "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(toString({view.params.variant})) = \"bars\"" } } } } }, { "type": "ia.container.flex", "version": 0, "meta": { "name": "Ascii", "visible": true }, "props": { "direction": "row", "wrap": "nowrap", "alignItems": "center", "justify": "center", "style": { "gap": "3px", "minWidth": 0, "boxSizing": "border-box", "alignItems": "center", "justifyContent": "center", "classes": "vc/loader-visual" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "children": [ { "type": "ia.display.label", "version": 0, "meta": { "name": "Glyph" }, "props": { "text": "*", "style": { "padding": "0px", "margin": "0px", "classes": "vc/loader-glyph", "color": "#fafafa", "fontFamily": "ui-monospace, Consolas, monospace", "fontSize": "18px", "fontWeight": 700, "lineHeight": "1", "textAlign": "center" } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.style.fontSize": { "binding": { "type": "expr", "config": { "expression": "switch({view.params.size}, 16, 24, 32, \"14px\", \"20px\", \"26px\", \"20px\")" } } } } } ], "propConfig": { "meta.visible": { "binding": { "type": "expr", "config": { "expression": "lower(toString({view.params.variant})) = \"ascii\"" } } } } }, { "type": "ia.display.label", "version": 0, "meta": { "name": "Caption", "visible": true }, "props": { "text": "Sincronizando...", "style": { "padding": "0px", "margin": "0px", "classes": "vc/loader-label", "color": "#a1a1aa", "fontSize": "12px", "fontWeight": 500 } }, "position": { "grow": 0, "shrink": 0, "basis": "auto" }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "{view.params.label}" } } }, "meta.visible": { "binding": { "type": "expr", "config": { "expression": "len(toString({view.params.label})) > 0" } } } } } ] } } ``` ### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Loader/Loader/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/views/Primitives/Button/view.json ```json { "custom": { }, "params": { "label": "Button", "variant": "default", "size": "default", "disabled": false, "iconPath": "", "iconOnly": false, "onClickMessage": "", "hover": true }, "propConfig": { "params.label": { "paramDirection": "input", "persistent": true }, "params.variant": { "paramDirection": "input", "persistent": true }, "params.size": { "paramDirection": "input", "persistent": true }, "params.disabled": { "paramDirection": "input", "persistent": true }, "params.iconPath": { "paramDirection": "input", "persistent": true }, "params.iconOnly": { "paramDirection": "input", "persistent": true }, "params.onClickMessage": { "paramDirection": "input", "persistent": true }, "params.hover": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "width": 120, "height": 40 } }, "root": { "type": "ia.input.button", "version": 0, "meta": { "name": "root" }, "props": { "text": "Button", "primary": false, "enabled": true, "style": { "classes": "vc/btn vc/btn-default vc/btn-md", "overflow": "hidden", "paddingTop": "0px", "paddingBottom": "0px", "height": "36px", "minHeight": "36px", "opacity": 1 } }, "propConfig": { "props.text": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", if(len(trim(toString({view.params.label}))) \u003e 0, {view.params.label}, \"⋯\"), {view.params.label})" } } }, "props.enabled": { "binding": { "type": "expr", "config": { "expression": "!{view.params.disabled}" } } }, "props.style.classes": { "binding": { "type": "expr", "config": { "expression": "\"vc/btn \" + if({view.params.variant} = \"secondary\", \"vc/btn-secondary\", if({view.params.variant} = \"outline\", \"vc/btn-outline\", if({view.params.variant} = \"ghost\", \"vc/btn-ghost\", if({view.params.variant} = \"destructive\", \"vc/btn-destructive\", \"vc/btn-default\")))) + \" \" + if({view.params.iconOnly} || {view.params.size} = \"icon\", \"vc/btn-icon\", if({view.params.size} = \"sm\", \"vc/btn-sm\", if({view.params.size} = \"lg\", \"vc/btn-lg\", \"vc/btn-md\"))) + if({view.params.hover} = false, \" vc/btn-hover-off\", \"\") + if({view.params.disabled} = true, \" vc/btn-disabled\", \"\")" } } }, "props.style.height": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"36px\", if({view.params.size} = \"sm\", \"32px\", if({view.params.size} = \"lg\", \"40px\", \"36px\")))" } } }, "props.style.minHeight": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"36px\", if({view.params.size} = \"sm\", \"32px\", if({view.params.size} = \"lg\", \"40px\", \"36px\")))" } } }, "props.style.maxHeight": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"36px\", if({view.params.size} = \"sm\", \"32px\", if({view.params.size} = \"lg\", \"40px\", \"36px\")))" } } }, "props.style.width": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"36px\", \"\")" } } }, "props.style.minWidth": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"36px\", \"\")" } } }, "props.style.paddingLeft": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"0px\", if({view.params.size} = \"sm\", \"12px\", if({view.params.size} = \"lg\", \"24px\", \"16px\")))" } } }, "props.style.paddingRight": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"0px\", if({view.params.size} = \"sm\", \"12px\", if({view.params.size} = \"lg\", \"24px\", \"16px\")))" } } }, "props.style.paddingTop": { "binding": { "type": "expr", "config": { "expression": "\"0px\"" } } }, "props.style.paddingBottom": { "binding": { "type": "expr", "config": { "expression": "\"0px\"" } } }, "props.style.fontSize": { "binding": { "type": "expr", "config": { "expression": "if({view.params.iconOnly} || {view.params.size} = \"icon\", \"16px\", if({view.params.size} = \"sm\", \"12px\", \"14px\"))" } } }, "props.style.opacity": { "binding": { "type": "expr", "config": { "expression": "if({view.params.disabled} = true, 0.5, 1)" } } } }, "events": { "component": { "onActionPerformed": { "type": "script", "scope": "G", "config": { "script": "msg = \u0027\u0027\ntry:\n\tmsg = str(self.view.params.onClickMessage)\nexcept:\n\tmsg = \u0027\u0027\nif msg:\n\tsystem.perspective.sendMessage(msg, {\u0027variant\u0027: str(self.view.params.variant), \u0027label\u0027: str(self.view.params.label)}, scope=\u0027session\u0027)\n" } } } } } } ``` ### com.inductiveautomation.perspective/views/Primitives/Button/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "view.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "flex-start", "gap": "8px", "boxSizing": "border-box", "minWidth": 0 }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-24/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-24/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-reduced/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-reduced/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-visual/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "3px", "boxSizing": "border-box", "flexShrink": 0 }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-visual/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-spinner/style.json ```json { "base": { "style": { "borderStyle": "solid", "borderWidth": "2px", "borderColor": "#3f3f46", "borderRadius": "50%", "backgroundColor": "transparent", "padding": "0px", "margin": "0px", "overflow": "hidden", "boxSizing": "border-box" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-spinner/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot/style.json ```json { "base": { "style": { "backgroundColor": "#a1a1aa", "borderRadius": "999px", "padding": "0px", "margin": "0px", "overflow": "hidden" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-1/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-1/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-2/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-2/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-3/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-dot-3/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar/style.json ```json { "base": { "style": { "backgroundColor": "#a1a1aa", "borderRadius": "1px", "padding": "0px", "margin": "0px", "overflow": "hidden" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-1/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-1/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-2/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-2/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-3/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-bar-3/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-glyph/style.json ```json { "base": { "style": { "color": "#fafafa", "fontWeight": 600, "padding": "0px", "margin": "0px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-glyph/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-label/style.json ```json { "base": { "style": { "color": "#a1a1aa", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "whiteSpace": "nowrap", "padding": "0px", "margin": "0px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-label/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "solid", "borderWidth": "0px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-default/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "solid", "borderWidth": "0px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden", "backgroundColor": "#fafafa", "color": "#18181b" }, "mediaQueries": [] }, "variants": [ { "pseudo": "hover", "style": { "backgroundColor": "#e4e4e7" }, "mediaQueries": [] } ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-default/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-md/style.json ```json { "base": { "style": { "height": "36px", "minHeight": "36px", "maxHeight": "36px", "paddingTop": "0px", "paddingBottom": "0px", "paddingLeft": "16px", "paddingRight": "16px", "fontSize": "14px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-md/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-secondary/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "solid", "borderWidth": "0px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden", "backgroundColor": "#27272a", "color": "#fafafa" }, "mediaQueries": [] }, "variants": [ { "pseudo": "hover", "style": { "backgroundColor": "#3f3f46" }, "mediaQueries": [] } ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-secondary/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-outline/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "solid", "borderWidth": "1px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden", "backgroundColor": "transparent", "color": "#fafafa", "borderColor": "#3f3f46" }, "mediaQueries": [] }, "variants": [ { "pseudo": "hover", "style": { "backgroundColor": "#27272a" }, "mediaQueries": [] } ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-outline/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-ghost/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "none", "borderWidth": "0px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden", "backgroundColor": "transparent", "color": "#fafafa" }, "mediaQueries": [] }, "variants": [ { "pseudo": "hover", "style": { "backgroundColor": "#27272a" }, "mediaQueries": [] } ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-ghost/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-destructive/style.json ```json { "base": { "style": { "display": "flex", "alignItems": "center", "justifyContent": "center", "gap": "8px", "fontSize": "14px", "fontWeight": "500", "whiteSpace": "nowrap", "borderRadius": "6px", "borderStyle": "solid", "borderWidth": "0px", "boxShadow": "none", "boxSizing": "border-box", "cursor": "pointer", "overflow": "hidden", "backgroundColor": "#dc2626", "color": "#ffffff" }, "mediaQueries": [] }, "variants": [ { "pseudo": "hover", "style": { "backgroundColor": "#b91c1c" }, "mediaQueries": [] } ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-destructive/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-icon/style.json ```json { "base": { "style": { "width": "36px", "height": "36px", "minWidth": "36px", "minHeight": "36px", "maxWidth": "36px", "maxHeight": "36px", "padding": "0px", "fontSize": "16px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-icon/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-sm/style.json ```json { "base": { "style": { "height": "32px", "minHeight": "32px", "maxHeight": "32px", "paddingTop": "0px", "paddingBottom": "0px", "paddingLeft": "12px", "paddingRight": "12px", "fontSize": "12px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-sm/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-lg/style.json ```json { "base": { "style": { "height": "40px", "minHeight": "40px", "maxHeight": "40px", "paddingTop": "0px", "paddingBottom": "0px", "paddingLeft": "24px", "paddingRight": "24px", "fontSize": "14px" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-lg/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-hover-off/style.json ```json { "base": { "style": { "cursor": "default" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-hover-off/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-disabled/style.json ```json { "base": { "style": { "pointerEvents": "none", "cursor": "not-allowed", "opacity": "0.5" }, "mediaQueries": [ ] }, "variants": [ ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/btn-disabled/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-16/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-16/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-32/style.json ```json { "base": { "style": {}, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-32/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-demo/style.json ```json { "base": { "style": { "backgroundColor": "#09090b", "color": "#fafafa", "boxSizing": "border-box" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-demo/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-demo-card/style.json ```json { "base": { "style": { "backgroundColor": "#171717", "borderStyle": "solid", "borderWidth": "1px", "borderColor": "#3f3f46", "borderRadius": "10px", "boxSizing": "border-box" }, "mediaQueries": [] }, "variants": [] } ``` ### com.inductiveautomation.perspective/style-classes/vc/loader-demo-card/resource.json ```json { "scope": "G", "version": 1, "restricted": false, "overridable": true, "files": [ "style.json" ] } ``` ### stylesheet-snippet.css ```css @media (hover:hover) and (pointer:fine){ .psc-vc-lab-page .psc-vc\/btn-ghost:hover:not(:disabled), .psc-vc-lab-component .psc-vc\/btn-ghost:hover:not(:disabled){ background:var(--lab-surface)!important;border-color:#52525b!important } } .psc-vc-lab-page .psc-vc\/btn-outline, .psc-vc-lab-component .psc-vc\/btn-outline, .psc-vc-lab-popup .psc-vc\/btn-outline{background:var(--lab-panel);border-color:var(--lab-line);color:var(--lab-text)} .psc-vc-lab-page .psc-vc\/btn-ghost, .psc-vc-lab-component .psc-vc\/btn-ghost, .psc-vc-lab-popup .psc-vc\/btn-ghost{ color:var(--lab-text);background:var(--lab-surface)!important;border:1px solid var(--lab-line)!important;border-radius:8px!important } .psc-vc-lab-page .psc-vc\/btn-secondary, .psc-vc-lab-component .psc-vc\/btn-secondary, .psc-vc-lab-popup .psc-vc\/btn-secondary{color:var(--lab-text);background:var(--lab-surface);border-color:var(--lab-line)} .psc-vc-lab-page .psc-vc\/btn-default, .psc-vc-lab-component .psc-vc\/btn-default, .psc-vc-lab-popup .psc-vc\/btn-default{color:var(--lab-bg);background:var(--lab-text);border-color:var(--lab-text)} [class~="psc-vc/segmented-item"] [class~="psc-vc/btn"], .psc-vc\/segmented-item .psc-vc\/btn{ color:var(--vc-ui-muted,#b0b0b8)!important; background:transparent!important; box-shadow:none!important; border-color:transparent!important; } [class~="psc-vc/segmented-item-active"] [class~="psc-vc/btn"], .psc-vc\/segmented-item-active .psc-vc\/btn{ color:var(--vc-ui-text,#fafafa)!important; background:#3f3f46!important; border-radius:7px!important; box-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35)!important; } [class~="psc-vc/segmented-track"] [class~="psc-vc/btn-ghost"], .psc-vc\/segmented-track .psc-vc\/btn-ghost, [class~="psc-vc/segmented-track"] button[class~="psc-vc/btn-ghost"], .psc-vc\/segmented-track button.psc-vc\/btn-ghost{ color:var(--vc-ui-muted,#b0b0b8)!important; background:transparent!important; box-shadow:none!important; border-color:transparent!important; } [class~="psc-vc/segmented-track"] [class~="psc-vc/btn-secondary"], .psc-vc\/segmented-track .psc-vc\/btn-secondary, [class~="psc-vc/segmented-track"] button[class~="psc-vc/btn-secondary"], .psc-vc\/segmented-track button.psc-vc\/btn-secondary{ color:var(--vc-ui-text,#fafafa)!important; background:#3f3f46!important; border-radius:7px!important; box-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35)!important; } [class~="psc-vc/loader"], .psc-vc\/loader { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; box-sizing: border-box !important; min-width: 0 !important; color: var(--vc-foreground, #fafafa) !important; } [class~="psc-vc/loader-visual"], .psc-vc\/loader-visual { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 3px !important; box-sizing: border-box !important; flex-shrink: 0 !important; } [class~="psc-vc/loader-spinner"], .psc-vc\/loader-spinner { display: block !important; box-sizing: border-box !important; border: 2px solid #3f3f46 !important; border-top-color: #fafafa !important; border-radius: 50% !important; background: transparent !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; animation: vc-loader-spin 0.8s linear infinite; } [class~="psc-vc/loader-spinner"] .ia_label__text, .psc-vc\/loader-spinner .ia_label__text { display: none !important; } [class~="psc-vc/loader-dot"], .psc-vc\/loader-dot { display: block !important; background-color: var(--vc-primary, #fafafa) !important; border-radius: 999px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; flex-shrink: 0 !important; box-sizing: border-box !important; transform: none !important; position: relative !important; z-index: 2 !important; animation: vc-loader-dots 1.2s ease-in-out infinite; } [class~="psc-vc/loader-dot"] .ia_label__text, .psc-vc\/loader-dot .ia_label__text { display: none !important; } [class~="psc-vc/loader-dot-1"], .psc-vc\/loader-dot-1 { animation-delay: 0s; } [class~="psc-vc/loader-dot-2"], .psc-vc\/loader-dot-2 { animation-delay: 0.16s; } [class~="psc-vc/loader-dot-3"], .psc-vc\/loader-dot-3 { animation-delay: 0.32s; } [class~="psc-vc/loader-bar"], .psc-vc\/loader-bar { display: block !important; background-color: #a1a1aa !important; border-radius: 1px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; flex-shrink: 0 !important; transform-origin: center bottom; animation: vc-loader-bars 1s ease-in-out infinite; } [class~="psc-vc/loader-bar"] .ia_label__text, .psc-vc\/loader-bar .ia_label__text { display: none !important; } [class~="psc-vc/loader-bar-1"], .psc-vc\/loader-bar-1 { animation-delay: 0s; } [class~="psc-vc/loader-bar-2"], .psc-vc\/loader-bar-2 { animation-delay: 0.14s; } [class~="psc-vc/loader-bar-3"], .psc-vc\/loader-bar-3 { animation-delay: 0.28s; } [class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph { color: var(--vc-foreground, #fafafa) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0 !important; padding: 0 !important; margin: 0 !important; animation: vc-loader-pulse 1.4s ease-in-out infinite; } [class~="psc-vc/loader-label"], .psc-vc\/loader-label { color: var(--vc-muted-fg, #a1a1aa) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 16px !important; letter-spacing: 0 !important; white-space: nowrap !important; padding: 0 !important; margin: 0 !important; } [class~="psc-vc/loader-16"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-16 .psc-vc\/loader-spinner { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border-width: 2px !important; } [class~="psc-vc/loader-24"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-24 .psc-vc\/loader-spinner { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; border-width: 2px !important; } [class~="psc-vc/loader-32"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-32 .psc-vc\/loader-spinner { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-width: 3px !important; } [class~="psc-vc/loader-16"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-16 .psc-vc\/loader-dot { width: 6px !important; height: 6px !important; min-width: 6px !important; min-height: 6px !important; max-width: 6px !important; max-height: 6px !important; } [class~="psc-vc/loader-24"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-24 .psc-vc\/loader-dot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; max-width: 8px !important; max-height: 8px !important; } [class~="psc-vc/loader-32"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-32 .psc-vc\/loader-dot { width: 10px !important; height: 10px !important; min-width: 10px !important; min-height: 10px !important; max-width: 10px !important; max-height: 10px !important; } [class~="psc-vc/loader-16"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-16 .psc-vc\/loader-bar { width: 3px !important; height: 12px !important; min-width: 3px !important; min-height: 12px !important; } [class~="psc-vc/loader-24"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-24 .psc-vc\/loader-bar { width: 4px !important; height: 18px !important; min-width: 4px !important; min-height: 18px !important; } [class~="psc-vc/loader-32"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-32 .psc-vc\/loader-bar { width: 5px !important; height: 24px !important; min-width: 5px !important; min-height: 24px !important; } [class~="psc-vc/loader-16"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-16 .psc-vc\/loader-glyph { font-size: 14px !important; } [class~="psc-vc/loader-24"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-24 .psc-vc\/loader-glyph { font-size: 20px !important; } [class~="psc-vc/loader-32"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-32 .psc-vc\/loader-glyph { font-size: 26px !important; } [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-spinner"], .psc-vc\/loader-reduced .psc-vc\/loader-spinner, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-dot"], .psc-vc\/loader-reduced .psc-vc\/loader-dot, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-bar"], .psc-vc\/loader-reduced .psc-vc\/loader-bar, [class~="psc-vc/loader-reduced"] [class~="psc-vc/loader-glyph"], .psc-vc\/loader-reduced .psc-vc\/loader-glyph { animation: vc-loader-pulse 1.4s ease-in-out infinite !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { [class~="psc-vc/loader-spinner"], .psc-vc\/loader-spinner, [class~="psc-vc/loader-dot"], .psc-vc\/loader-dot, [class~="psc-vc/loader-bar"], .psc-vc\/loader-bar, [class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph { animation: vc-loader-pulse 1.4s ease-in-out infinite !important; transform: none !important; } } [class~="psc-vc/loader-24"] [class~="psc-vc/loader-visual"], .psc-vc\/loader-24 .psc-vc\/loader-visual { gap: 5px !important; } [class~="psc-vc/loader-32"] [class~="psc-vc/loader-visual"], .psc-vc\/loader-32 .psc-vc\/loader-visual { gap: 6px !important; } [class~="psc-vc/loader"] .component-meta-hidden, .psc-vc\/loader .component-meta-hidden { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; opacity: 0 !important; } [class~="psc-vc/loader-visual"], .psc-vc\/loader-visual { position: relative !important; z-index: 2 !important; overflow: visible !important; } [class~="psc-vc/loader-demo"], .psc-vc\/loader-demo { background-color: var(--vc-background, #09090b) !important; color: var(--vc-foreground, #fafafa) !important; box-sizing: border-box !important; } [class~="psc-vc/loader-demo-card"], .psc-vc\/loader-demo-card { background-color: var(--vc-panel, #171717) !important; border: 1px solid var(--vc-border, #3f3f46) !important; border-radius: 10px !important; box-sizing: border-box !important; } .psc-vc\/btn:disabled, .psc-vc\/btn[disabled], .psc-vc\/btn-disabled, [class~="psc-vc/btn-disabled"], [class~="psc-vc/btn"][class*="--disabled"], .psc-vc\/btn.ia_button--secondary--disabled, .psc-vc\/btn.ia_button--primary--disabled, button.psc-vc\/btn:disabled, button[class~="psc-vc/btn"][disabled], button[class~="psc-vc/btn"][class*="--disabled"] { opacity: 0.5 !important; cursor: not-allowed !important; } [class~="psc-vc/loader-bar"], .psc-vc\/loader-bar { background-color: #a1a1aa !important; min-width: 3px !important; min-height: 12px !important; } [class~="psc-vc/loader-dot"], .psc-vc\/loader-dot { background-color: var(--vc-primary, #fafafa) !important; color: var(--vc-foreground, #fafafa) !important; min-width: 5px !important; min-height: 5px !important; } [class~="psc-vc/loader-glyph"], .psc-vc\/loader-glyph { color: var(--vc-foreground, #fafafa) !important; min-width: 12px !important; min-height: 12px !important; } [class~="psc-vc/toast"], .psc-vc\/toast { background-color: var(--vc-panel, #171717) !important; border: 1px solid var(--vc-border, #3f3f46) !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18) !important; box-sizing: border-box !important; color: var(--vc-foreground, #fafafa) !important; min-height: 48px !important; height: auto !important; padding: 12px 14px !important; gap: 12px !important; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1) !important; opacity: 1 !important; transform: translateY(0) !important; } [class~="psc-vc/toast-info"], .psc-vc\/toast-info { border-color: var(--vc-border, #3f3f46) !important; border-width: 1px !important; border-style: solid !important; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18) !important; } [class~="psc-vc/toast-icon-wrap"], .psc-vc\/toast-icon-wrap { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; flex: 0 0 20px !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } [class~="psc-vc/toast-icon-wrap"] .component-meta-hidden, .psc-vc\/toast-icon-wrap .component-meta-hidden { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; flex: 0 0 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; opacity: 0 !important; } [class~="psc-vc/toast-icon"], .psc-vc\/toast-icon { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 20px !important; max-height: 20px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } [class~="psc-vc/toast-icon"] svg, .psc-vc\/toast-icon svg { width: 18px !important; height: 18px !important; } [class~="psc-vc/toast-loader"], .psc-vc\/toast-loader { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; flex: 0 0 16px !important; overflow: hidden !important; } [class~="psc-vc/toast-success"] [class~="psc-vc/toast-icon"], .psc-vc\/toast-success .psc-vc\/toast-icon, [class~="psc-vc/toast-success"] [class~="psc-vc/toast-icon"] svg, .psc-vc\/toast-success .psc-vc\/toast-icon svg { color: var(--vc-success, #4ade80) !important; fill: #4ade80 !important; } [class~="psc-vc/toast-warning"] [class~="psc-vc/toast-icon"], .psc-vc\/toast-warning .psc-vc\/toast-icon, [class~="psc-vc/toast-warning"] [class~="psc-vc/toast-icon"] svg, .psc-vc\/toast-warning .psc-vc\/toast-icon svg { color: #eab308 !important; fill: #eab308 !important; } [class~="psc-vc/toast-destructive"] [class~="psc-vc/toast-icon"], .psc-vc\/toast-destructive .psc-vc\/toast-icon, [class~="psc-vc/toast-destructive"] [class~="psc-vc/toast-icon"] svg, .psc-vc\/toast-destructive .psc-vc\/toast-icon svg { color: var(--vc-destructive, #f87171) !important; fill: #f87171 !important; } [class~="psc-vc/toast-info"] [class~="psc-vc/toast-icon"], .psc-vc\/toast-info .psc-vc\/toast-icon, [class~="psc-vc/toast-info"] [class~="psc-vc/toast-icon"] svg, .psc-vc\/toast-info .psc-vc\/toast-icon svg, [class~="psc-vc/toast-loading"] [class~="psc-vc/toast-icon"], .psc-vc\/toast-loading .psc-vc\/toast-icon { color: var(--vc-muted-fg, #a1a1aa) !important; fill: #a1a1aa !important; } [class~="psc-vc/toast-title"], .psc-vc\/toast-title, [class~="psc-vc/toast-title"] .ia_label__text { font-size: 14px !important; font-weight: 600 !important; color: var(--vc-foreground, #fafafa) !important; line-height: 20px !important; } [class~="psc-vc/toast-description"], .psc-vc\/toast-description, [class~="psc-vc/toast-description"] .ia_label__text { font-size: 12px !important; font-weight: 400 !important; color: var(--vc-muted-fg, #a1a1aa) !important; line-height: 16px !important; } [class~="psc-vc/toast-dismiss"], .psc-vc\/toast-dismiss, [class~="psc-vc/toast-action"], .psc-vc\/toast-action { min-width: 32px !important; min-height: 32px !important; } [class~="psc-vc/toast-dismiss"] button, [class~="psc-vc/toast-action"] button, .psc-vc\/toast-dismiss button, .psc-vc\/toast-action button, [class~="psc-vc/toast-dismiss"] .ia_button, [class~="psc-vc/toast-action"] .ia_button, [class~="psc-vc/toast-dismiss"] .ia-button, [class~="psc-vc/toast-action"] .ia-button { min-width: 32px !important; min-height: 32px !important; background-color: transparent !important; background-image: none !important; border: 1px solid var(--vc-border, #3f3f46) !important; color: var(--vc-foreground, #fafafa) !important; box-shadow: none !important; } [class~="psc-vc/toast-dismiss"] button:hover, [class~="psc-vc/toast-action"] button:hover, [class~="psc-vc/toast-dismiss"] .ia_button:hover, [class~="psc-vc/toast-action"] .ia_button:hover { background-color: var(--vc-secondary, #27272a) !important; border-color: #52525b !important; color: var(--vc-foreground, #fafafa) !important; } [class~="psc-vc/toast-reduced"], .psc-vc\/toast-reduced { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { [class~="psc-vc/toast"], .psc-vc\/toast { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1) !important; transform: none !important; } } [class~="psc-vc/segmented-track"] [class~="psc-vc/btn-ghost"], .psc-vc\/segmented-track .psc-vc\/btn-ghost { color: #b0b0b8 !important; background: transparent !important; box-shadow: none !important; } [class~="psc-vc/segmented-track"] [class~="psc-vc/btn-secondary"], .psc-vc\/segmented-track .psc-vc\/btn-secondary { color: var(--vc-foreground, #fafafa) !important; background: #3f3f46 !important; border-radius: 7px !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35) !important; } @keyframes vc-loader-spin { to { transform: rotate(360deg); } } @keyframes vc-loader-dots { 0%, 80%, 100% { opacity: 0.45; } 40% { opacity: 1; } } @keyframes vc-loader-bars { 0%, 80%, 100% { transform: scaleY(0.35); opacity: 0.35; } 40% { transform: scaleY(1); opacity: 1; } } @keyframes vc-loader-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } ```