update css

2021-12-23 10:23:33 +03:00
parent 38574a958f
commit 69d2af13e0
5 changed files with 134 additions and 171 deletions
--- a/src/app/pages/app.timelinedemo.component.ts
+++ b/src/app/pages/app.timelinedemo.component.ts
@@ -3,7 +3,47 @@ import {PrimeIcons} from 'primeng/api';

@Component({
    templateUrl: './app.timelinedemo.component.html',
-    styleUrls: ['./app.timelinedemo.scss']
+    styles: [`
+        .custom-marker {
+            display: flex;
+            width: 2rem;
+            height: 2rem;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff;
+            border-radius: 50%;
+            z-index: 1;
+        }
+        
+        ::ng-deep {
+            .p-timeline-event-content,
+            .p-timeline-event-opposite {
+                line-height: 1;
+            }
+        }
+        
+        @media screen and (max-width: 960px) {
+            ::ng-deep {
+                .customized-timeline {
+                    .p-timeline-event:nth-child(even) {
+                        flex-direction: row !important;
+        
+                        .p-timeline-event-content {
+                            text-align: left !important;
+                        }
+                    }
+        
+                    .p-timeline-event-opposite {
+                        flex: 0;
+                    }
+        
+                    .p-card {
+                        margin-top: 1rem;
+                    }
+                }
+            }
+        }    
+    `]
 })
 export class AppTimelineDemoComponent implements OnInit{