Update styles for progress (#2570)
This commit is contained in:
parent
71e4d539f6
commit
5c6a800b62
@ -6,6 +6,7 @@ from types import SimpleNamespace
|
|||||||
from typing import Optional
|
from typing import Optional
|
||||||
|
|
||||||
from reflex.components.component import Component
|
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.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
|
||||||
from reflex.style import Style
|
from reflex.style import Style
|
||||||
from reflex.vars import Var
|
from reflex.vars import Var
|
||||||
@ -34,10 +35,11 @@ class ProgressRoot(ProgressComponent):
|
|||||||
{
|
{
|
||||||
"position": "relative",
|
"position": "relative",
|
||||||
"overflow": "hidden",
|
"overflow": "hidden",
|
||||||
"background": "black",
|
"background": "var(--gray-a3)",
|
||||||
"border_radius": "99999px",
|
"border_radius": "99999px",
|
||||||
"width": "300px",
|
"width": "100%",
|
||||||
"height": "25px",
|
"height": "20px",
|
||||||
|
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
|
||||||
**self.style,
|
**self.style,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@ -56,14 +58,15 @@ class ProgressIndicator(ProgressComponent):
|
|||||||
def _apply_theme(self, theme: Component):
|
def _apply_theme(self, theme: Component):
|
||||||
self.style = Style(
|
self.style = Style(
|
||||||
{
|
{
|
||||||
"background-color": "white",
|
"background-color": "var(--accent-9)",
|
||||||
"width": "100%",
|
"width": "100%",
|
||||||
"height": "100%",
|
"height": "100%",
|
||||||
"transition": f"transform 660ms linear",
|
f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
|
||||||
"&[data_state='loading']": {
|
"&[data_state='loading']": {
|
||||||
"transition": f"transform 660ms linear",
|
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
|
||||||
},
|
},
|
||||||
"transform": f"translateX(-{100 - self.value}%)", # type: ignore
|
"transform": f"translateX(-{100 - self.value}%)", # type: ignore
|
||||||
|
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -10,6 +10,7 @@ from reflex.style import Style
|
|||||||
from types import SimpleNamespace
|
from types import SimpleNamespace
|
||||||
from typing import Optional
|
from typing import Optional
|
||||||
from reflex.components.component import Component
|
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.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
|
||||||
from reflex.style import Style
|
from reflex.style import Style
|
||||||
from reflex.vars import Var
|
from reflex.vars import Var
|
||||||
|
Loading…
Reference in New Issue
Block a user