@amsterdam/design-system-css/dist/skeleton/skeleton.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

@media(prefers-reduced-motion: no-preference){.ams-skeleton__image,.ams-skeleton__line,.ams-skeleton__marker{animation:var(--ams-skeleton-animation)}}@keyframes ams-skeleton-heartbeat{10%{opacity:60%}20%{opacity:100%}30%{opacity:80%}40%{opacity:100%}}.ams-skeleton{display:flex;flex-direction:column;gap:var(--ams-skeleton-gap)}.ams-skeleton__heading,.ams-skeleton__paragraph,.ams-skeleton__table{display:flex;flex-direction:column}.ams-skeleton__list{display:flex;flex-direction:column;row-gap:var(--ams-skeleton-list-gap)}.ams-skeleton__image,.ams-skeleton__line,.ams-skeleton__marker{background-color:var(--ams-skeleton-background-color)}@media(forced-colors: active){.ams-skeleton__image,.ams-skeleton__line,.ams-skeleton__marker{background-color:GrayText}}.ams-skeleton__image{aspect-ratio:var(--ams-skeleton-image-aspect-ratio)}.ams-skeleton__heading .ams-skeleton__line{block-size:var(--ams-skeleton-heading-font-size);margin-block:calc((var(--ams-skeleton-heading-line-height) - 1)/2*var(--ams-skeleton-heading-font-size))}.ams-skeleton__list .ams-skeleton__line,.ams-skeleton__paragraph .ams-skeleton__line,.ams-skeleton__table .ams-skeleton__line{block-size:var(--ams-skeleton-line-font-size);margin-block:calc((var(--ams-skeleton-line-line-height) - 1)/2*var(--ams-skeleton-line-font-size))}.ams-skeleton__list-item{align-items:center;column-gap:var(--ams-skeleton-list-item-column-gap);display:flex;padding-inline-start:var(--ams-skeleton-list-item-padding-inline-start)}.ams-skeleton__marker{block-size:var(--ams-skeleton-list-item-marker-block-size);flex:none;inline-size:var(--ams-skeleton-list-item-marker-inline-size)}.ams-skeleton__table-row{border-block-end:var(--ams-skeleton-table-row-border-block-end);display:flex}.ams-skeleton__table-cell{flex:1;padding-block:var(--ams-skeleton-table-cell-padding-block);padding-inline:var(--ams-skeleton-table-cell-padding-inline)}.ams-skeleton__heading .ams-skeleton__line:nth-child(odd){inline-size:var(--ams-skeleton-heading-odd-inline-size)}.ams-skeleton__heading .ams-skeleton__line:nth-child(even){inline-size:var(--ams-skeleton-heading-even-inline-size)}.ams-skeleton__paragraph .ams-skeleton__line:nth-child(odd){inline-size:var(--ams-skeleton-paragraph-odd-inline-size)}.ams-skeleton__paragraph .ams-skeleton__line:nth-child(even){inline-size:var(--ams-skeleton-paragraph-even-inline-size)}.ams-skeleton__list-item:nth-child(odd) .ams-skeleton__line{inline-size:var(--ams-skeleton-list-odd-inline-size)}.ams-skeleton__list-item:nth-child(even) .ams-skeleton__line{inline-size:var(--ams-skeleton-list-even-inline-size)}.ams-skeleton__heading .ams-skeleton__line:last-child:not(:first-child){inline-size:var(--ams-skeleton-heading-last-inline-size)}.ams-skeleton__paragraph .ams-skeleton__line:last-child:not(:first-child){inline-size:var(--ams-skeleton-paragraph-last-inline-size)}.ams-skeleton__list-item:last-child:not(:first-child) .ams-skeleton__line{inline-size:var(--ams-skeleton-list-last-inline-size)}.ams-skeleton__table-row:nth-child(odd) .ams-skeleton__table-cell:nth-child(odd) .ams-skeleton__line,.ams-skeleton__table-row:nth-child(even) .ams-skeleton__table-cell:nth-child(even) .ams-skeleton__line{inline-size:var(--ams-skeleton-table-odd-inline-size)}.ams-skeleton__table-row:nth-child(odd) .ams-skeleton__table-cell:nth-child(even) .ams-skeleton__line,.ams-skeleton__table-row:nth-child(even) .ams-skeleton__table-cell:nth-child(odd) .ams-skeleton__line{inline-size:var(--ams-skeleton-table-even-inline-size)}/*# sourceMappingURL=skeleton.css.map */