diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index a7a4030..1d032be 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -70,6 +70,12 @@ ion-slides { height: 100%; position: relative; box-shadow: 0px 10px 25px -7px rgba(var(--light-grey-rgb), 0.5); + transition: transform 0.3s; + transform: scale(0.9); + + &.swiper-slide-active { + transform: scale(1); + } } .image-holder { diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index c6dce2d..065fc42 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -33,7 +33,7 @@ export class HomePage implements OnInit { slideOpts = { slidesPerView: 1.5, - spaceBetween: 30, + spaceBetween: 15, initialSlide: 1, centeredSlides: true }; @@ -47,6 +47,16 @@ export class HomePage implements OnInit { ngOnInit() { this.newsData = [{ + id: 0, + image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg', + heading: 'KL Rahul scores fastest 100', + description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`, + type: 'ARTICLE', + isLiked: false, + isBookmarked: false, + likes: 308, + comments: [] + }, { id: 1, image: 'https://s3.india.com/wp-content/uploads/2020/10/Mayank-Agarwal-celebrates-Kings-XI-Punjabs-win-over-Mumbai-Indians-in-match-37-of-Dream11-IPL-2020-in-Dubai%C2%A9KXIP-Twitter.jpg', heading: 'KXIP beat MI by 3 Wickets', diff --git a/src/app/tabs/tabs.page.scss b/src/app/tabs/tabs.page.scss index 2c20000..db573a1 100644 --- a/src/app/tabs/tabs.page.scss +++ b/src/app/tabs/tabs.page.scss @@ -1,11 +1,12 @@ ion-tab-bar { - --background: var(--brand-black); + --background: white; --border: none; margin-top: -1px; + box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.5); ion-tab-button { ion-icon { - color: white; + color: var(--light-grey); font-size: 20px; &:nth-child(1) { @@ -19,7 +20,7 @@ ion-tab-bar { &.tab-selected { ion-icon { - color: white; + color: var(--brand-black); &:nth-child(2) { display: block;