Update styles for progress (#2570)

This commit is contained in:
Nikhil Rao 2024-02-13 06:20:36 +07:00 committed by GitHub
parent 71e4d539f6
commit 5c6a800b62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 6 deletions

View File

@ -6,6 +6,7 @@ from types import SimpleNamespace
from typing import Optional
from reflex.components.component import Component
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var
@ -34,10 +35,11 @@ class ProgressRoot(ProgressComponent):
{
"position": "relative",
"overflow": "hidden",
"background": "black",
"background": "var(--gray-a3)",
"border_radius": "99999px",
"width": "300px",
"height": "25px",
"width": "100%",
"height": "20px",
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
**self.style,
}
)
@ -56,14 +58,15 @@ class ProgressIndicator(ProgressComponent):
def _apply_theme(self, theme: Component):
self.style = Style(
{
"background-color": "white",
"background-color": "var(--accent-9)",
"width": "100%",
"height": "100%",
"transition": f"transform 660ms linear",
f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
"&[data_state='loading']": {
"transition": f"transform 660ms linear",
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
},
"transform": f"translateX(-{100 - self.value}%)", # type: ignore
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
}
)

View File

@ -10,6 +10,7 @@ from reflex.style import Style
from types import SimpleNamespace
from typing import Optional
from reflex.components.component import Component
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var