diff --git a/components/loadingMolecule/config.css b/components/loadingMolecule/config.css index 5c85b8e81..ba9d05f09 100644 --- a/components/loadingMolecule/config.css +++ b/components/loadingMolecule/config.css @@ -1,18 +1,6 @@ :root { - --menu-expand-duration: 0.3s; - --menu-fade-duration: 0.2s; - --menu-ripple-delay: 0.3s; - --menu-background-color: var(--color-white); - --menu-padding: calc(0.8 * var(--unit)) 0; - --menu-outline-border-radius: calc(0.2 * var(--unit)); - --menu-item-hover-background: var(--palette-grey-200); - --menu-item-selected-background: transparent; - --menu-item-icon-font-size: calc(1.4 * var(--unit)); - --menu-item-icon-size: calc(1.6 * var(--menu-item-icon-font-size)); - --menu-item-height: calc(2.8 * var(--unit)); - --menu-item-padding: calc(1.6 * var(--unit)); - --menu-item-font-size: calc(1.6 * var(--unit)); - --menu-divider-height: calc((2.8 / 4) * var(--unit)); - --menu-icon-size: calc(2.3 * var(--unit)); - --menu-icon-ripple-duration: 650ms; + --loading-molecule-animation-delay: .15s; + --loading-molecule-animation-duration: 2s; + --loading-moledule-scale-small: .5; + --loading-moledule-scale-large: 1.5; } diff --git a/components/loadingMolecule/theme.css b/components/loadingMolecule/theme.css index 47f07a288..8ec11cf24 100644 --- a/components/loadingMolecule/theme.css +++ b/components/loadingMolecule/theme.css @@ -15,31 +15,31 @@ } .left-solid { - animation: pulse 2s ease infinite; - animation-delay: 0.15s; + animation: pulse var(--loading-molecule-animation-duration) ease infinite; + animation-delay: var(--loading-molecule-animation-delay); } .left-gradient { - animation: pulse 2s ease infinite; - animation-delay: 0.3s; + animation: pulse var(--loading-molecule-animation-duration) ease infinite; + animation-delay: calc(2 * var(--loading-molecule-animation-delay)); } .right-solid { - animation: pulse 2s ease infinite; - animation-delay: 0.45s; + animation: pulse var(--loading-molecule-animation-duration) ease infinite; + animation-delay: calc(3 * var(--loading-molecule-animation-delay)); } .right-gradient { - animation: pulse 2s ease infinite; - animation-delay: 0.6s; + animation: pulse var(--loading-molecule-animation-duration) ease infinite; + animation-delay: calc(4 * var(--loading-molecule-animation-delay)); } .small svg { - transform: scale(.5); + transform: scale(var(--loading-moledule-scale-small)); } .large svg { - transform: scale(1.5); + transform: scale(var(--loading-moledule-scale-large)); } @keyframes pulse {