0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Almost there in terms of styling

Browse source
This commit is contained in:
Manav Rathi 2024-03-31 17:54:38 +05:30
parent d3df6b31ae
commit 5dfafa28c7
No known key found for this signature in database
1 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/apps/photos/src/pages/index.tsx
View file

@ -271,7 +271,7 @@ const PRSExample: React.FC = () => {
totalSlides={3}
isPlaying={true}
>
<CustomSlider>
<Slider>
<Slide index={0}>
<Img
src="/images/onboarding-lock/1x.png"
@ -309,18 +309,34 @@ const PRSExample: React.FC = () => {
<TextContainer>{t("HERO_SLIDE_3")}</TextContainer>
</SlideContents>
</Slide>
</CustomSlider>
</Slider>
<CustomDotGroup />
</CarouselProvider>
);
};
const CustomSlider = styled(Slider)`
border: 1px solid green;
`;
const CustomDotGroup = styled(DotGroup)`
border: 1px solid tomato;
margin-block-start: 2px;
margin-block-end: 24px;
button {
margin-inline-end: 12px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 0;
background-color: #fff;
opacity: 0.5;
transition: opacity 0.6s ease;
/* background-clip: padding-box; */
/* border-top: 10px solid transparent; */
/* border-bottom: 10px solid transparent; */
}
button.carousel__dot--selected {
background-color: #51cd7c;
opacity: 1;
}
`;
const SlideContents = styled("div")`