Fixed markup, refactored css
This commit is contained in:
		
							parent
							
								
									25dbe641da
								
							
						
					
					
						commit
						3c79cad7a2
					
				| @ -88,3 +88,4 @@ | ||||
|               | ||||
|         </ng-template> | ||||
|     </p-timeline> | ||||
| </div> | ||||
| @ -2,17 +2,17 @@ | ||||
|     <div class="col-12 lg:col-6"> | ||||
|         <div class="card"> | ||||
|             <h5>Linear Chart</h5> | ||||
|             <p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart> | ||||
|             <p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="card flex flex-column align-items-center"> | ||||
|             <h5 class="text-left w-full">Pie Chart</h5> | ||||
|             <p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart> | ||||
|             <p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="card flex flex-column align-items-center"> | ||||
|             <h5 class="text-left w-full">Polar Area Chart</h5> | ||||
|             <p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart> | ||||
|             <p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="col-12 lg:col-6"> | ||||
| @ -23,12 +23,12 @@ | ||||
| 
 | ||||
|         <div class="card flex flex-column align-items-center"> | ||||
|             <h5 class="text-left w-full">Doughnut Chart</h5> | ||||
|             <p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart> | ||||
|             <p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="card flex flex-column align-items-center"> | ||||
|             <h5 class="text-left w-full">Radar Chart</h5> | ||||
|             <p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart> | ||||
|             <p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart> | ||||
|         </div> | ||||
|     </div> | ||||
| </div> | ||||
|  | ||||
| @ -1,11 +1,15 @@ | ||||
| .product-badge { | ||||
| .customer-badge, | ||||
| .product-badge, | ||||
| .order-badge { | ||||
|     border-radius: var(--border-radius); | ||||
|     padding: .25em .5rem; | ||||
|     text-transform: uppercase; | ||||
|     font-weight: 700; | ||||
|     font-size: 12px; | ||||
|     letter-spacing: .3px; | ||||
| } | ||||
| 
 | ||||
| .product-badge { | ||||
|     &.status-instock { | ||||
|         background: #C8E6C9; | ||||
|         color: #256029; | ||||
| @ -23,13 +27,6 @@ | ||||
| } | ||||
| 
 | ||||
| .customer-badge { | ||||
|     border-radius: var(--border-radius); | ||||
|     padding: .25em .5rem; | ||||
|     text-transform: uppercase; | ||||
|     font-weight: 700; | ||||
|     font-size: 12px; | ||||
|     letter-spacing: .3px; | ||||
| 
 | ||||
|     &.status-qualified { | ||||
|         background: #C8E6C9; | ||||
|         color: #256029; | ||||
| @ -62,13 +59,6 @@ | ||||
| } | ||||
| 
 | ||||
| .order-badge { | ||||
|     border-radius: var(--border-radius); | ||||
|     padding: .25em .5rem; | ||||
|     text-transform: uppercase; | ||||
|     font-weight: 700; | ||||
|     font-size: 12px; | ||||
|     letter-spacing: .3px; | ||||
| 
 | ||||
|     &.order-delivered { | ||||
|         background: #C8E6C9; | ||||
|         color: #256029; | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user