/
githubmirror
/
ionic
Обзор
Документация
Войти
/
githubmirror
/
ionic
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
core/src/components/skeleton-text/skeleton-text.scss
74 строки
1 KB
Liam DeBeasi
chore(): switch to using disallow terminology (#23618)
13 июл 2021, 21:03
Не верифицирован
13 июл 2021, 21:03
7315e01
Код
Авторство
О чём код?
@import "./skeleton-text.vars"; // Skeleton Text // -------------------------------------------------- :host { /** * @prop --background: Background of the skeleton text * @prop --background-rgb: Background of the skeleton text in rgb format * * @prop --border-radius: Border radius of the skeleton text */ --background: #{$skeleton-text-background}; @include border-radius(var(--border-radius, inherit)); display: block; width: 100%; height: inherit; margin-top: 4px; margin-bottom: 4px; background: var(--background); line-height: 10px; user-select: none; pointer-events: none; } span { display: inline-block; } :host(.in-media) { @include margin(0); height: 100%; } // Animated Skeleton Text // ----------------------------------------------------------- :host(.skeleton-text-animated) { position: relative; background: linear-gradient( to right, $skeleton-text-background 8%, $skeleton-text-background-animated 18%, $skeleton-text-background 33% ); background-size: 800px 104px; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: shimmer; animation-timing-function: linear; } /* stylelint-disable property-disallowed-list */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* stylelint-enable property-disallowed-list */