Packages
noora
0.82.6
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
css/icon.css
/* Animated icon transitions (see `Noora.Icon.icon/1` with `active_name`). */
/* crossfade_rotate: the two icons are stacked; the inactive one is faded and
rotated out while the active one fades and rotates in. The `data-active`
attribute is toggled by the NooraIconTransition hook. */
.noora-icon-transition {
display: inline-grid;
place-items: center;
}
.noora-icon-transition > [data-part="icon-from"],
.noora-icon-transition > [data-part="icon-to"] {
grid-area: 1 / 1;
display: inline-flex;
}
/* Transitions are only enabled once the hook flags the element ready (after
the initial state has painted), so establishing the starting state on
mount — e.g. a collapsible setting its open state after this icon
initializes — never animates. */
.noora-icon-transition[data-ready] > [data-part="icon-from"],
.noora-icon-transition[data-ready] > [data-part="icon-to"] {
transition:
opacity 200ms var(--ease-out-cubic),
transform 200ms var(--ease-out-cubic);
}
.noora-icon-transition > [data-part="icon-to"] {
opacity: 0;
transform: rotate(-90deg);
}
.noora-icon-transition[data-active] > [data-part="icon-from"] {
opacity: 0;
transform: rotate(90deg);
}
.noora-icon-transition[data-active] > [data-part="icon-to"] {
opacity: 1;
transform: rotate(0);
}
@media (prefers-reduced-motion: reduce) {
.noora-icon-transition > [data-part="icon-from"],
.noora-icon-transition > [data-part="icon-to"] {
transition: none;
}
}