View Source Pyro.Overrides.Default (Pyro v0.0.4)
This is the default style configuration for Pyro components.
It can be helpful to view the source of this override configuration to get an idea of how to write your own style overrides.
- Captured functions with arity 1 and the arg named
passed_assigns
are passed component assigns at runtime, allowing complex conditional logic assign_overridables/1
preserves the definition order of attrs and assigns them in that order, preserving dependency chains- Attrs with type
:tails_classes
utilizeTails
, and are merged by the component to prevent weird precedence conflicts and HTML bloat
makeup
Makeup
makeup_light
:default_style/0
makeup_dark
:native_style/0
global-style
Global Style
@layer root {
::selection,
::-moz-selection {
@apply text-white bg-sky-500 bg-opacity-100;
}
:root {
--scrollbar-width: 0.5rem;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-height: auto;
scrollbar-color: theme(colors.sky.500) transparent;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
*::-webkit-scrollbar-button {
@apply bg-transparent h-0 w-0;
}
::-webkit-scrollbar-corner {
@apply bg-transparent;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-track-piece {
@apply bg-transparent;
}
*::-webkit-scrollbar-thumb {
@apply bg-sky-500 border-none rounded-full;
}
var {
@apply not-italic rounded font-mono text-sm font-semibold px-2 py-px mx-px;
@apply bg-slate-900 text-white;
@apply dark:bg-white dark:text-slate-900;
}
html, body {
@apply bg-white text-slate-900 dark:text-white dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800;
}
}
@layer component {
.progress {
@apply rounded w-full
}
.progress::-webkit-progress-bar {
@apply rounded;
}
.progress::-webkit-progress-value {
@apply rounded;
}
.progress::-moz-progress-bar {
@apply rounded;
}
.progress.slate,
.progress.slate::-webkit-progress-bar {
@apply bg-slate-100 dark:bg-slate-900;
}
.progress.slate::-webkit-progress-value {
@apply bg-slate-500;
}
.progress.slate::-moz-progress-bar {
@apply bg-slate-500;
}
.progress.gray,
.progress.gray::-webkit-progress-bar {
@apply bg-gray-100 dark:bg-gray-900;
}
.progress.gray::-webkit-progress-value {
@apply bg-gray-500;
}
.progress.gray::-moz-progress-bar {
@apply bg-gray-500;
}
.progress.zinc,
.progress.zinc::-webkit-progress-bar {
@apply bg-zinc-100 dark:bg-zinc-900;
}
.progress.zinc::-webkit-progress-value {
@apply bg-zinc-500;
}
.progress.zinc::-moz-progress-bar {
@apply bg-zinc-500;
}
.progress.neutral,
.progress.neutral::-webkit-progress-bar {
@apply bg-neutral-100 dark:bg-neutral-900;
}
.progress.neutral::-webkit-progress-value {
@apply bg-neutral-500;
}
.progress.neutral::-moz-progress-bar {
@apply bg-neutral-500;
}
.progress.stone,
.progress.stone::-webkit-progress-bar {
@apply bg-stone-100 dark:bg-stone-900;
}
.progress.stone::-webkit-progress-value {
@apply bg-stone-500;
}
.progress.stone::-moz-progress-bar {
@apply bg-stone-500;
}
.progress.red,
.progress.red::-webkit-progress-bar {
@apply bg-red-100 dark:bg-red-900;
}
.progress.red::-webkit-progress-value {
@apply bg-red-500;
}
.progress.red::-moz-progress-bar {
@apply bg-red-500;
}
.progress.orange,
.progress.orange::-webkit-progress-bar {
@apply bg-orange-100 dark:bg-orange-900;
}
.progress.orange::-webkit-progress-value {
@apply bg-orange-500;
}
.progress.orange::-moz-progress-bar {
@apply bg-orange-500;
}
.progress.amber,
.progress.amber::-webkit-progress-bar {
@apply bg-amber-100 dark:bg-amber-900;
}
.progress.amber::-webkit-progress-value {
@apply bg-amber-500;
}
.progress.amber::-moz-progress-bar {
@apply bg-amber-500;
}
.progress.yellow,
.progress.yellow::-webkit-progress-bar {
@apply bg-yellow-100 dark:bg-yellow-900;
}
.progress.yellow::-webkit-progress-value {
@apply bg-yellow-500;
}
.progress.yellow::-moz-progress-bar {
@apply bg-yellow-500;
}
.progress.lime,
.progress.lime::-webkit-progress-bar {
@apply bg-lime-100 dark:bg-lime-900;
}
.progress.lime::-webkit-progress-value {
@apply bg-lime-500;
}
.progress.lime::-moz-progress-bar {
@apply bg-lime-500;
}
.progress.green,
.progress.green::-webkit-progress-bar {
@apply bg-green-100 dark:bg-green-900;
}
.progress.green::-webkit-progress-value {
@apply bg-green-500;
}
.progress.green::-moz-progress-bar {
@apply bg-green-500;
}
.progress.emerald,
.progress.emerald::-webkit-progress-bar {
@apply bg-emerald-100 dark:bg-emerald-900;
}
.progress.emerald::-webkit-progress-value {
@apply bg-emerald-500;
}
.progress.emerald::-moz-progress-bar {
@apply bg-emerald-500;
}
.progress.teal,
.progress.teal::-webkit-progress-bar {
@apply bg-teal-100 dark:bg-teal-900;
}
.progress.teal::-webkit-progress-value {
@apply bg-teal-500;
}
.progress.teal::-moz-progress-bar {
@apply bg-teal-500;
}
.progress.cyan,
.progress.cyan::-webkit-progress-bar {
@apply bg-cyan-100 dark:bg-cyan-900;
}
.progress.cyan::-webkit-progress-value {
@apply bg-cyan-500;
}
.progress.cyan::-moz-progress-bar {
@apply bg-cyan-500;
}
.progress.sky,
.progress.sky::-webkit-progress-bar {
@apply bg-sky-100 dark:bg-sky-900;
}
.progress.sky::-webkit-progress-value {
@apply bg-sky-500;
}
.progress.sky::-moz-progress-bar {
@apply bg-sky-500;
}
.progress.blue,
.progress.blue::-webkit-progress-bar {
@apply bg-blue-100 dark:bg-blue-900;
}
.progress.blue::-webkit-progress-value {
@apply bg-blue-500;
}
.progress.blue::-moz-progress-bar {
@apply bg-blue-500;
}
.progress.indigo,
.progress.indigo::-webkit-progress-bar {
@apply bg-indigo-100 dark:bg-indigo-900;
}
.progress.indigo::-webkit-progress-value {
@apply bg-indigo-500;
}
.progress.indigo::-moz-progress-bar {
@apply bg-indigo-500;
}
.progress.violet,
.progress.violet::-webkit-progress-bar {
@apply bg-violet-100 dark:bg-violet-900;
}
.progress.violet::-webkit-progress-value {
@apply bg-violet-500;
}
.progress.violet::-moz-progress-bar {
@apply bg-violet-500;
}
.progress.purple,
.progress.purple::-webkit-progress-bar {
@apply bg-purple-100 dark:bg-purple-900;
}
.progress.purple::-webkit-progress-value {
@apply bg-purple-500;
}
.progress.purple::-moz-progress-bar {
@apply bg-purple-500;
}
.progress.fuchsia,
.progress.fuchsia::-webkit-progress-bar {
@apply bg-fuchsia-100 dark:bg-fuchsia-900;
}
.progress.fuchsia::-webkit-progress-value {
@apply bg-fuchsia-500;
}
.progress.fuchsia::-moz-progress-bar {
@apply bg-fuchsia-500;
}
.progress.pink,
.progress.pink::-webkit-progress-bar {
@apply bg-pink-100 dark:bg-pink-900;
}
.progress.pink::-webkit-progress-value {
@apply bg-pink-500;
}
.progress.pink::-moz-progress-bar {
@apply bg-pink-500;
}
.progress.rose,
.progress.rose::-webkit-progress-bar {
@apply bg-rose-100 dark:bg-rose-900;
}
.progress.rose::-webkit-progress-value {
@apply bg-rose-500;
}
.progress.rose::-moz-progress-bar {
@apply bg-rose-500;
}
}
overrides
Overrides
Elixir.Pyro.Components.Autocomplete.render/1
:option_label_key
:label
:option_value_key
:id
:description_class
"text-xs text-slate-600 dark:text-slate-400"
:throttle_time
212
:listbox_option_class
Pyro.Overrides.Default.autocomplete_listbox_option_class/1
:class
"grid gap-1 content-start"
:prompt
"Search options"
:listbox_class
["absolute z-10 grid content-start top-0 left-0", "sm:text-sm sm:leading-6", "bg-white text-slate-900 dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800 dark:text-white", "border border-slate-300 rounded-lg", "shadow-lg "]
:input_class
Pyro.Overrides.Default.input_class/1
Elixir.Pyro.Components.Core.back/1
:icon_name
"hero-chevron-left-solid"
:class
"font-black border-b-2 border-dotted text-slate-900 border-slate-900 dark:text-white dark:border-white hover:text-sky-500 hover:border-sky-500 active:text-sky-500 active:border-sky-500 active:border-solid"
:icon_class
"w-3 h-3 stroke-current align-baseline"
Elixir.Pyro.Components.Core.button/1
:icon_class
Pyro.Overrides.Default.button_icon_class/1
:sizes
["xs", "sm", "md", "lg", "xl"]
:class
Pyro.Overrides.Default.button_class/1
:size
"md"
:variant
"solid"
:shapes
["rounded", "square", "pill"]
:variants
["solid", "inverted", "outline"]
:case
"uppercase"
:ping_class
Pyro.Overrides.Default.button_ping_class/1
:shape
"rounded"
:color
"sky"
:colors
["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
Elixir.Pyro.Components.Core.error/1
:icon_name
"hero-exclamation-circle-mini"
:icon_class
"h-5 w-5 flex-none inline"
:class
"phx-no-feedback:hidden flex gap-1 text-sm leading-6 text-red-600 dark:text-red-500"
Elixir.Pyro.Components.Core.flash/1
:title
Pyro.Overrides.Default.flash_title/1
:ttl
10000
:icon_name
Pyro.Overrides.Default.flash_icon_name/1
:control_class
"grid grid-cols-[1fr,auto] items-center gap-1"
:close_icon_class
"h-5 w-5 stroke-current opacity-40 group-hover:opacity-70 block -mr-2"
:kinds
["info", "error", "warning", "success", "slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
:autoshow
true
:title_class
"flex items-center gap-1.5 text-sm font-semibold leading-6"
:close
true
:kind
"slate"
:show_js
Pyro.Overrides.Default.flash_show_js/2
:close_icon_name
"hero-x-mark-mini"
:class
Pyro.Overrides.Default.flash_class/1
:progress_class
"border border-black/25"
:message_class
"text-sm whitespace-pre-wrap"
:hide_js
Pyro.Overrides.Default.flash_hide_js/2
Elixir.Pyro.Components.Core.flash_group/1
:include_kinds
["info", "error", "warning", "success", "slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
:class
"absolute top-2 right-2 grid gap-2"
Elixir.Pyro.Components.Core.header/1
:subtitle_class
"mt-2 text-sm leading-6 text-slate-600 dark:text-slate-200"
:class
Pyro.Overrides.Default.header_class/1
:title_class
Pyro.Overrides.Default.header_title_class/1
:actions_class
"no-flex flex gap-2"
Elixir.Pyro.Components.Core.icon/1
:class
"h-4 w-4 inline-block align-text-bottom"
Elixir.Pyro.Components.Core.input/1
:clear_on_escape
true
:class
"grid gap-1 content-start"
:input_class
Pyro.Overrides.Default.input_class/1
:description_class
"text-xs text-slate-600 dark:text-slate-400"
:input_check_label_class
"flex items-center gap-2 text-sm leading-6 text-slate-800 dark:text-slate-100 font-semibold"
Elixir.Pyro.Components.Core.label/1
:class
"block text-sm font-semibold leading-6 text-slate-800 dark:text-slate-100"
Elixir.Pyro.Components.Core.list/1
:class
"grid grid-cols-[auto,1fr] gap-2"
:dd_class
""
:dt_class
"font-black leading-6"
Elixir.Pyro.Components.Core.modal/1
:class
"relative z-50 hidden"
:hide_js
Pyro.Overrides.Default.modal_hide_js/2
:show_js
Pyro.Overrides.Default.modal_show_js/2
Elixir.Pyro.Components.Core.simple_form/1
:class
"grid gap-2 bg-white text-slate-900 dark:text-white dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800"
:actions_class
"mt-2 flex items-center justify-between gap-6"
Elixir.Pyro.Components.Core.table/1
:tr_class
"relative group hover:bg-slate-50"
:th_action_class
"relative p-0 pb-4"
:th_label_class
"p-0 pb-4 pr-6 font-normal"
:tbody_class
"relative divide-y divide-slate-100 border-t border-slate-200 text-sm leading-6 "
:action_wrapper_class
"relative whitespace-nowrap py-4 text-right text-sm font-medium"
:class
"w-full"
:thead_class
"text-left text-[0.8125rem] leading-6"
:td_class
Pyro.Overrides.Default.table_td_class/1
:action_td_class
"p-0 w-14"
:action_class
"relative ml-4 font-semibold leading-6 hover:text-slate-700"
Elixir.Pyro.Components.Extra.a/1
:replace
false
:class
"font-black border-b-2 border-dotted text-slate-900 border-slate-900 dark:text-white dark:border-white hover:text-sky-500 hover:border-sky-500 active:text-sky-500 active:border-sky-500 active:border-solid"
Elixir.Pyro.Components.Extra.code/1
:copy_label
"Copy"
:class
["makeup whitespace-pre-wrap p-4 rounded relative", "shadow-md shadow-slate-900/5 dark:shadow-slate-300/5"]
:copy_class
"absolute top-1 right-1"
:copy
true
Elixir.Pyro.Components.Extra.copy_to_clipboard/1
:size
"md"
:variant
"solid"
:case
"uppercase"
:class
Pyro.Overrides.Default.button_class/1
:ttl
3000
:shape
"rounded"
:shapes
["rounded", "square", "pill"]
:colors
["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
:sizes
["xs", "sm", "md", "lg", "xl"]
:icon_class
Pyro.Overrides.Default.button_icon_class/1
:message
"Copied! 📋"
:color
"sky"
:variants
["solid", "inverted", "outline"]
Elixir.Pyro.Components.Extra.progress/1
:color
"sky"
:colors
["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
:size
"md"
:sizes
["xs", "sm", "md", "lg", "xl"]
:class
Pyro.Overrides.Default.progress_class/1
Elixir.Pyro.Components.Extra.spinner/1
:size
"md"
:class
Pyro.Overrides.Default.spinner_class/1
:sizes
["xs", "sm", "md", "lg", "xl"]
Elixir.Pyro.Components.Extra.tooltip/1
:vertical_offset
"2.25rem"
:icon_name
"hero-question-mark-circle-solid"
:tooltip_text_class
"bg-sky-500 text-white min-w-[20rem] p-2 rounded text-sm font-normal whitespace-pre"
:tooltip_class
["absolute invisible select-none group-hover:visible normal-case block z-10", "shadow-md shadow-slate-900/5 dark:shadow-slate-300/5"]
:class
"group hover:relative inline-block select-none hover:bg-sky-500 rounded cursor-help"
:horizontal_offset
"0"
Elixir.Pyro.Components.SmartForm.render_field/1
:field_group_class
Pyro.Overrides.Default.smart_form_field_group_class/1
:field_group_label_class
"font-black col-span-full"
Elixir.Pyro.Components.SmartForm.smart_form/1
:autocomplete
"off"
:class
Pyro.Overrides.Default.smart_form_class/1
:actions_class
"mt-2 flex items-center justify-between gap-6"
Link to this section Summary
Functions
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
Determine if the current path prop matches the uri prop.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
Link to this section Functions
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.
This override is passed component assigns and executed while being assigned at runtime.