consul/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss

106 lines
2.0 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
*::before, *::after {
display: inline-block;
vertical-align: text-top;
background-repeat: no-repeat;
background-position: center;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
}
*::before {
animation-name: var(--icon-name-start, var(--icon-name)),
var(--icon-size-start, var(--icon-size, icon-000));
background-color: var(--icon-color-start, var(--icon-color));
}
*::after {
animation-name: var(--icon-name-end, var(--icon-name)),
var(--icon-size-end, var(--icon-size, icon-000));
background-color: var(--icon-color-end, var(--icon-color));
}
[style*='--icon-color-start']::before {
color: var(--icon-color-start);
}
[style*='--icon-color-end']::after {
color: var(--icon-color-end);
}
[style*='--icon-name-start']::before,
[style*='--icon-name-end']::after {
content: '';
}
@keyframes icon-000 {
100% {
width: 1.2em;
height: 1.2em;
}
}
@keyframes icon-100 {
100% {
width: 0.625rem; /* 10px */
height: 0.625rem; /* 10px */
}
}
@keyframes icon-200 {
100% {
width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
}
}
@keyframes icon-300 {
100% {
width: 1rem; /* 16px */
height: 1rem; /* 16px */
}
}
@keyframes icon-400 {
100% {
width: 1.125rem; /* 18px */
height: 1.125rem; /* 18px */
}
}
@keyframes icon-500 {
100% {
width: 1.250rem; /* 20px */
height: 1.250rem; /* 20px */
}
}
@keyframes icon-600 {
100% {
width: 1.375rem; /* 22px */
height: 1.375rem; /* 22px */
}
}
@keyframes icon-700 {
100% {
width: 1.500rem; /* 24px */
height: 1.500rem; /* 24px */
}
}
@keyframes icon-800 {
100% {
width: 1.625rem; /* 26px */
height: 1.625rem; /* 26px */
}
}
@keyframes icon-900 {
100% {
width: 1.750rem; /* 28px */
height: 1.750rem; /* 28px */
}
}
@keyframes icon-999 {
100% {
width: 100%;
height: 100%;
}
}