From 28d7e9aee274aea87c80d1bacd486bc6b39c73e2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Oct 2022 13:12:26 +0300
Subject: [PATCH] Refactored Demo CSS visuals
---
.../auth/login/login.component.html | 20 +-
.../components/auth/login/login.component.ts | 14 +-
.../components/landing/landing.component.html | 23 ++-
.../components/landing/landing.component.ts | 56 +----
.../uikit/button/buttondemo.component.html | 191 ++++++++++--------
.../uikit/charts/charts.component.ts | 16 +-
.../uikit/input/inputdemo.component.html | 19 +-
.../uikit/input/inputdemo.component.ts | 48 +----
.../uikit/list/listdemo.component.html | 6 +-
.../components/uikit/menus/menus.component.ts | 6 +-
.../messages/messagesdemo.component.html | 42 ++--
.../uikit/messages/messagesdemo.component.ts | 9 -
.../uikit/misc/miscdemo.component.html | 87 ++++----
.../overlays/overlaysdemo.component.html | 24 ++-
.../uikit/table/tabledemo.component.html | 10 +-
.../uikit/table/tabledemo.component.ts | 15 +-
src/assets/layout/styles/layout/_utils.scss | 2 +-
17 files changed, 248 insertions(+), 340 deletions(-)
diff --git a/src/app/demo/components/auth/login/login.component.html b/src/app/demo/components/auth/login/login.component.html
index 86dc54e..45c3955 100644
--- a/src/app/demo/components/auth/login/login.component.html
+++ b/src/app/demo/components/auth/login/login.component.html
@@ -1,24 +1,22 @@
-<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
- <div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
- <div class="col-12 mt-5 xl:mt-0 text-center">
- <img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
- </div>
- <div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
- <div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
+<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+ <div class="flex flex-column align-items-center justify-content-center">
+ <img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
+ <div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
+ <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius:53px">
<div class="text-center mb-5">
<img src="assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
<span class="text-600 font-medium">Sign in to continue</span>
</div>
- <div class="w-full md:w-10 mx-auto">
+ <div>
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
- <input id="email1" type="text" placeholder="Email address" pInputText class="w-full mb-3" style="padding:1rem;">
+ <input id="email1" type="text" placeholder="Email address" pInputText class="w-full md:w-30rem mb-5" style="padding:1rem">
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
- <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
+ <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="mb-5" inputStyleClass="w-full p-3 md:w-30rem"></p-password>
- <div class="flex align-items-center justify-content-between mb-5">
+ <div class="flex align-items-center justify-content-between mb-5 gap-5">
<div class="flex align-items-center">
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
<label for="rememberme1">Remember me</label>
diff --git a/src/app/demo/components/auth/login/login.component.ts b/src/app/demo/components/auth/login/login.component.ts
index 0d65c52..6a30f8b 100644
--- a/src/app/demo/components/auth/login/login.component.ts
+++ b/src/app/demo/components/auth/login/login.component.ts
@@ -5,18 +5,8 @@ import { LayoutService } from 'src/app/layout/service/app.layout.service';
selector: 'app-login',
templateUrl: './login.component.html',
styles: [`
- :host ::ng-deep .p-password input {
- width: 100%;
- padding:1rem;
- }
-
- :host ::ng-deep .pi-eye{
- transform:scale(1.6);
- margin-right: 1rem;
- color: var(--primary-color) !important;
- }
-
- :host ::ng-deep .pi-eye-slash{
+ :host ::ng-deep .pi-eye,
+ :host ::ng-deep .pi-eye-slash {
transform:scale(1.6);
margin-right: 1rem;
color: var(--primary-color) !important;
diff --git a/src/app/demo/components/landing/landing.component.html b/src/app/demo/components/landing/landing.component.html
index 59847ae..a274f50 100644
--- a/src/app/demo/components/landing/landing.component.html
+++ b/src/app/demo/components/landing/landing.component.html
@@ -7,25 +7,25 @@
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
<i class="pi pi-bars text-4xl"></i>
</a>
- <div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:85%">
+ <div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:120px">
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
<li>
- <a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
+ <a (click)="router.navigate(['/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Home</span>
</a>
</li>
<li>
- <a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
+ <a (click)="router.navigate(['/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Features</span>
</a>
</li>
<li>
- <a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
+ <a (click)="router.navigate(['/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Highlights</span>
</a>
</li>
<li>
- <a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
+ <a (click)="router.navigate(['/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
<span>Pricing</span>
</a>
</li>
@@ -37,13 +37,16 @@
</div>
</div>
- <div id="hero" class="grid py-4 px-4 lg:px-8 relative">
+ <div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
+ style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%); clip-path: ellipse(150% 87% at 93% 13%);">
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
</div>
- <img src="assets/demo/images/landing/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
+ <div class="flex justify-content-center md:justify-content-end">
+ <img src="assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto">
+ </div>
</div>
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
@@ -216,7 +219,7 @@
<div class="grid justify-content-between mt-8 md:mt-0">
<div class="col-12 lg:col-4 p-0 md:p-3">
- <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
+ <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Free</h3>
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free">
<div class="my-5 text-center">
@@ -247,7 +250,7 @@
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
- <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
+ <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Startup</h3>
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
<div class="my-5 text-center">
@@ -278,7 +281,7 @@
</div>
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
- <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
+ <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
<h3 class="text-900 text-center my-5">Enterprise</h3>
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
<div class="my-5 text-center">
diff --git a/src/app/demo/components/landing/landing.component.ts b/src/app/demo/components/landing/landing.component.ts
index 5075067..b10d35d 100644
--- a/src/app/demo/components/landing/landing.component.ts
+++ b/src/app/demo/components/landing/landing.component.ts
@@ -4,60 +4,10 @@ import { LayoutService } from 'src/app/layout/service/app.layout.service';
@Component({
selector: 'app-landing',
- templateUrl: './landing.component.html',
- styles: [`
- #hero{
- background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
- height:700px;
- overflow:hidden;
- }
-
- .pricing-card:hover{
- border:2px solid var(--cyan-200) !important;
- }
-
- @media screen and (min-width: 768px) {
- #hero{
- -webkit-clip-path: ellipse(150% 87% at 93% 13%);
- clip-path: ellipse(150% 87% at 93% 13%);
- height: 530px;
- }
- }
-
- @media screen and (min-width: 1300px){
- #hero > img {
- position: absolute;
- transform:scale(1.2);
- top:15%;
- }
-
- #hero > div > p {
- max-width: 450px;
- }
- }
-
- @media screen and (max-width: 1300px){
- #hero {
- height: 600px;
- }
-
- #hero > img {
- position:static;
- transform: scale(1);
- margin-left: auto;
- }
-
- #hero > div {
- width: 100%;
- }
-
- #hero > div > p {
- width: 100%;
- max-width: 100%;
- }
- }
- `]
+ templateUrl: './landing.component.html'
})
export class LandingComponent {
+
constructor(public layoutService: LayoutService, public router: Router) { }
+
}
diff --git a/src/app/demo/components/uikit/button/buttondemo.component.html b/src/app/demo/components/uikit/button/buttondemo.component.html
index 236543c..1a3aac4 100644
--- a/src/app/demo/components/uikit/button/buttondemo.component.html
+++ b/src/app/demo/components/uikit/button/buttondemo.component.html
@@ -2,43 +2,51 @@
<div class="col-12 md:col-6">
<div class="card">
<h5>Default</h5>
- <button pButton pRipple label="Submit" class="mr-2 mb-2"></button>
- <button pButton pRipple label="Disabled" disabled="true" class="mr-2 mb-2"></button>
- <p-button label="Link" styleClass="p-button-link mr-2 mb-2"></p-button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple label="Submit"></button>
+ <button pButton pRipple label="Disabled" disabled="true"></button>
+ <p-button label="Link" styleClass="p-button-link"></p-button>
+ </div>
</div>
<div class="card">
<h5>Severities</h5>
- <button pButton pRipple type="button" label="Primary" class="mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Secondary" class="p-button-secondary mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Success" class="p-button-success mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Info" class="p-button-info mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Warning" class="p-button-warning mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Help" class="p-button-help mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Danger" class="p-button-danger mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" label="Primary"></button>
+ <button pButton pRipple type="button" label="Secondary" class="p-button-secondary"></button>
+ <button pButton pRipple type="button" label="Success" class="p-button-success"></button>
+ <button pButton pRipple type="button" label="Info" class="p-button-info"></button>
+ <button pButton pRipple type="button" label="Warning" class="p-button-warning"></button>
+ <button pButton pRipple type="button" label="Help" class="p-button-help"></button>
+ <button pButton pRipple type="button" label="Danger" class="p-button-danger"></button>
+ </div>
</div>
<div class="card">
<h5>Text</h5>
- <button pButton pRipple type="button" label="Primary" class="p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Success" class="p-button-success p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Info" class="p-button-info p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Help" class="p-button-help p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" label="Primary" class="p-button-text"></button>
+ <button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text"></button>
+ <button pButton pRipple type="button" label="Success" class="p-button-success p-button-text"></button>
+ <button pButton pRipple type="button" label="Info" class="p-button-info p-button-text"></button>
+ <button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text"></button>
+ <button pButton pRipple type="button" label="Help" class="p-button-help p-button-text"></button>
+ <button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text"></button>
+ <button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain"></button>
+ </div>
</div>
<div class="card">
<h5>Outlined</h5>
- <button pButton pRipple type="button" label="Primary" class="p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" label="Primary" class="p-button-outlined"></button>
+ <button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary"></button>
+ <button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success"></button>
+ <button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info"></button>
+ <button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning"></button>
+ <button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help"></button>
+ <button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger"></button>
+ </div>
</div>
<div class="card">
@@ -46,100 +54,117 @@
<span class="p-buttonset">
<button pButton pRipple label="Save" icon="pi pi-check"></button>
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
- <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
</span>
</div>
<div class="card">
<h5>SplitButton</h5>
- <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info mr-2 mb-2"></p-splitButton>
- <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success mr-2 mb-2"></p-splitButton>
- <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning mr-2 mb-2"></p-splitButton>
- <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
- <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
+ <div class="flex flex-wrap gap-2">
+ <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info"></p-splitButton>
+ <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success"></p-splitButton>
+ <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning"></p-splitButton>
+ <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help"></p-splitButton>
+ <p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger"></p-splitButton>
+ </div>
</div>
<div class="card">
<h5>Templating</h5>
- <p-button styleClass="mr-2 mb-2 px-3">
- <img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
- </p-button>
-
- <p-button styleClass="p-button-outlined mr-2 mb-2">
- <img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
- <span class="ml-2 font-bold">PrimeNG</span>
- </p-button>
+ <div class="flex flex-wrap gap-2">
+ <p-button>
+ <img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
+ </p-button>
+
+ <p-button styleClass="p-button-outlined">
+ <img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
+ <span class="ml-2 font-bold">PrimeNG</span>
+ </p-button>
+ </div>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Icons</h5>
- <button pButton pRipple icon="pi pi-star-fill" class="mr-2 mb-2"></button>
- <button pButton pRipple label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></button>
- <button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple icon="pi pi-star-fill"></button>
+ <button pButton pRipple label="Submit" icon="pi pi-bookmark"></button>
+ <button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right"></button>
+ </div>
</div>
<div class="card">
<h5>Raised</h5>
- <button pButton pRipple type="button" label="Primary" class="p-button-raised mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" label="Primary" class="p-button-raised"></button>
+ <button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary"></button>
+ <button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success"></button>
+ <button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info"></button>
+ <button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning"></button>
+ <button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help"></button>
+ <button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger"></button>
+ </div>
</div>
<div class="card">
<h5>Rounded</h5>
- <button pButton pRipple type="button" label="Primary" class="p-button-rounded mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></button>
- <button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" label="Primary" class="p-button-rounded"></button>
+ <button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary"></button>
+ <button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success"></button>
+ <button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info"></button>
+ <button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning"></button>
+ <button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help"></button>
+ <button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger"></button>
+ </div>
</div>
<div class="card">
<h5>Rounded Icons</h5>
- <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded"></button>
+ <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></button>
+ <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success"></button>
+ <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info"></button>
+ <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning"></button>
+ <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help"></button>
+ <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger"></button>
+ </div>
</div>
<div class="card">
<h5>Rounded Text</h5>
- <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
+ <button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></button>
+ </div>
</div>
-
+
<div class="card">
<h5>Rounded Outlined</h5>
- <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
- <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></button>
+ <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></button>
+ </div>
</div>
<div class="card">
<h5>Loading</h5>
- <p-button label="Search" icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[0]" (onClick)="load(0)"></p-button>
- <p-button label="Search" icon="pi pi-search" iconPos="right" styleClass="mr-2 mb-2" [loading]="loading[1]" (onClick)="load(1)"></p-button>
- <p-button icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[2]" (onClick)="load(2)"></p-button>
- <p-button label="Search" styleClass="mr-2 mb-2" [loading]="loading[3]" (onClick)="load(3)"></p-button>
+ <div class="flex flex-wrap gap-2">
+ <p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (onClick)="load(0)"></p-button>
+ <p-button label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (onClick)="load(1)"></p-button>
+ <p-button icon="pi pi-search" [loading]="loading[2]" (onClick)="load(2)"></p-button>
+ <p-button label="Search" [loading]="loading[3]" (onClick)="load(3)"></p-button>
+ </div>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/demo/components/uikit/charts/charts.component.ts b/src/app/demo/components/uikit/charts/charts.component.ts
index cee5014..50a048d 100644
--- a/src/app/demo/components/uikit/charts/charts.component.ts
+++ b/src/app/demo/components/uikit/charts/charts.component.ts
@@ -50,14 +50,14 @@ export class ChartsComponent implements OnInit, OnDestroy {
datasets: [
{
label: 'My First dataset',
- backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
- borderColor: documentStyle.getPropertyValue('--bluegray-700'),
+ backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+ borderColor: documentStyle.getPropertyValue('--primary-700'),
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
- backgroundColor: documentStyle.getPropertyValue('--green-600'),
- borderColor: documentStyle.getPropertyValue('--green-600'),
+ backgroundColor: documentStyle.getPropertyValue('--bluegray-500'),
+ borderColor: documentStyle.getPropertyValue('--bluegray-500'),
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@@ -133,16 +133,16 @@ export class ChartsComponent implements OnInit, OnDestroy {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
- backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
- borderColor: documentStyle.getPropertyValue('--bluegray-700'),
+ backgroundColor: documentStyle.getPropertyValue('--primary-700'),
+ borderColor: documentStyle.getPropertyValue('--primary-700'),
tension: .4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
- backgroundColor: documentStyle.getPropertyValue('--green-600'),
- borderColor: documentStyle.getPropertyValue('--green-600'),
+ backgroundColor: documentStyle.getPropertyValue('--bluegray-600'),
+ borderColor: documentStyle.getPropertyValue('--bluegray-600'),
tension: .4
}
]
diff --git a/src/app/demo/components/uikit/input/inputdemo.component.html b/src/app/demo/components/uikit/input/inputdemo.component.html
index 8f327d8..972ec96 100644
--- a/src/app/demo/components/uikit/input/inputdemo.component.html
+++ b/src/app/demo/components/uikit/input/inputdemo.component.html
@@ -145,20 +145,11 @@
<h5>Multiselect</h5>
- <p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
- <ng-template let-value pTemplate="selectedItems">
- <div class="country-item country-item-value" *ngFor="let option of selectedMulti">
- <img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
- <div>{{option.name}}</div>
- </div>
- <div *ngIf="!selectedMulti || selectedMulti.length === 0" class="country-placeholder">
- Select Countries
- </div>
- </ng-template>
+ <p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" placeholder="Select a Country" optionLabel="name" class="multiselect-custom" display="chip">
<ng-template let-country pTemplate="item">
- <div class="country-item">
- <img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
- <div>{{country.name}}</div>
+ <div class="flex align-items-center">
+ <img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width:21px"/>
+ <span class="ml-2">{{country.name}}</span>
</div>
</ng-template>
</p-multiSelect>
@@ -179,7 +170,7 @@
<div class="col-12">
<div class="card">
<h5>InputGroup</h5>
- <div class="grid p-fluid">
+ <div class="grid">
<div class="col-12 md:col-6">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
diff --git a/src/app/demo/components/uikit/input/inputdemo.component.ts b/src/app/demo/components/uikit/input/inputdemo.component.ts
index b94cf75..4aa4fb9 100644
--- a/src/app/demo/components/uikit/input/inputdemo.component.ts
+++ b/src/app/demo/components/uikit/input/inputdemo.component.ts
@@ -4,53 +4,7 @@ import { SelectItem } from 'primeng/api';
import { CountryService } from 'src/app/demo/service/country.service';
@Component({
- templateUrl: './inputdemo.component.html',
- styles: [`
- :host ::ng-deep .p-multiselect {
- min-width: 15rem;
- }
-
- :host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
- min-width: 20rem;
- }
-
- :host ::ng-deep .multiselect-custom .p-multiselect-label {
- padding-top: .25rem;
- padding-bottom: .25rem;
-
- }
-
- :host ::ng-deep .multiselect-custom .country-item.country-item-value {
- padding: .25rem .5rem;
- border-radius: 3px;
- display: inline-flex;
- margin-right: .5rem;
- background-color: var(--primary-color);
- color: var(--primary-color-text);
- }
-
- :host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
- width: 17px;
- }
-
- :host ::ng-deep .multiselect-custom .country-item {
- display: flex;
- align-items: center;
- }
-
- :host ::ng-deep .multiselect-custom .country-item img.flag {
- width: 18px;
- margin-right: .5rem;
- }
-
- :host ::ng-deep .multiselect-custom .country-placeholder {
- padding: 0.25rem;
- }
-
- :host ::ng-deep .p-colorpicker {
- width: 2.5em
- }
- `]
+ templateUrl: './inputdemo.component.html'
})
export class InputDemoComponent implements OnInit {
countries: any[] = [];
diff --git a/src/app/demo/components/uikit/list/listdemo.component.html b/src/app/demo/components/uikit/list/listdemo.component.html
index 07a036d..6fc03c7 100644
--- a/src/app/demo/components/uikit/list/listdemo.component.html
+++ b/src/app/demo/components/uikit/list/listdemo.component.html
@@ -20,7 +20,7 @@
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
<div class="flex-1 text-center md:text-left">
<div class="font-bold text-2xl">{{product.name}}</div>
- <div class="mb-3">{{product.description}}</div>
+ <div class="mb-2">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<div class="flex align-items-center mt-2">
<i class="pi pi-tag mr-2"></i>
@@ -39,14 +39,14 @@
<ng-template let-product pTemplate="gridItem">
<div class="col-12 md:col-4">
<div class="card m-3 border-1 surface-border">
- <div class="flex align-items-center justify-content-between">
+ <div class="flex align-items-center justify-content-between mb-2">
<div class="flex align-items-center">
<i class="pi pi-tag mr-2"></i>
<span class="font-semibold">{{product.category}}</span>
</div>
<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
- <div class="text-center">
+ <div class="text-center mb-3">
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
<div class="text-2xl font-bold">{{product.name}}</div>
<div class="mb-3">{{product.description}}</div>
diff --git a/src/app/demo/components/uikit/menus/menus.component.ts b/src/app/demo/components/uikit/menus/menus.component.ts
index 34c2e35..e23d563 100644
--- a/src/app/demo/components/uikit/menus/menus.component.ts
+++ b/src/app/demo/components/uikit/menus/menus.component.ts
@@ -3,7 +3,11 @@ import { MegaMenuItem, MenuItem } from 'primeng/api';
@Component({
templateUrl: './menus.component.html',
- encapsulation: ViewEncapsulation.None
+ styles: [`
+ :host ::ng-deep .p-menubar-root-list {
+ flex-wrap: wrap;
+ }
+ `]
})
export class MenusComponent implements OnInit {
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.component.html b/src/app/demo/components/uikit/messages/messagesdemo.component.html
index 412e309..1e0f861 100644
--- a/src/app/demo/components/uikit/messages/messagesdemo.component.html
+++ b/src/app/demo/components/uikit/messages/messagesdemo.component.html
@@ -2,21 +2,25 @@
<div class="col-12 lg:col-6">
<div class="card">
<h5>Toast</h5>
- <p-toast key="tst" [baseZIndex]="99999"></p-toast>
- <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
- <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
- <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
- <button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
+ <p-toast key="tst"></p-toast>
+ <div class="flex flex-wrap gap-2">
+ <button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success"></button>
+ <button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info"></button>
+ <button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning"></button>
+ <button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
+ </div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card z-3">
<h5>Messages</h5>
- <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
- <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
- <button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
- <button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
+ <div class="flex flex-wrap gap-2">
+ <button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success"></button>
+ <button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info"></button>
+ <button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning"></button>
+ <button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
+ </div>
<p-messages [value]="msgs"></p-messages>
</div>
@@ -25,20 +29,16 @@
<div class="col-12 lg:col-8">
<div class="card">
<h5>Inline</h5>
- <div class="field grid">
- <label for="username" class="col-fixed w-9rem">Username</label>
- <div class="col">
- <input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
- <p-message severity="error" text="Field is required"></p-message>
- </div>
+ <div class="flex align-items-center flex-wrap gap-2 mb-3">
+ <label for="username" class="w-9rem">Username</label>
+ <input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid">
+ <p-message severity="error" text="Field is required"></p-message>
</div>
- <div class="field grid">
- <label for="email" class="col-fixed w-9rem">Email</label>
- <div class="col">
- <input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
- <p-message severity="error"></p-message>
- </div>
+ <div class="flex align-items-center flex-wrap gap-2">
+ <label for="email" class="w-9rem">Email</label>
+ <input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid">
+ <p-message severity="error"></p-message>
</div>
</div>
</div>
diff --git a/src/app/demo/components/uikit/messages/messagesdemo.component.ts b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
index 791e6b8..f342807 100644
--- a/src/app/demo/components/uikit/messages/messagesdemo.component.ts
+++ b/src/app/demo/components/uikit/messages/messagesdemo.component.ts
@@ -3,15 +3,6 @@ import { Message, MessageService } from 'primeng/api';
@Component({
templateUrl: './messagesdemo.component.html',
- styles: [`
- :host ::ng-deep .p-message {
- margin-left: .25em;
- }
-
- :host ::ng-deep .p-toast{
- z-index:99999;
- }
- `],
providers: [MessageService]
})
export class MessagesDemoComponent {
diff --git a/src/app/demo/components/uikit/misc/miscdemo.component.html b/src/app/demo/components/uikit/misc/miscdemo.component.html
index e70d40c..b610691 100644
--- a/src/app/demo/components/uikit/misc/miscdemo.component.html
+++ b/src/app/demo/components/uikit/misc/miscdemo.component.html
@@ -16,29 +16,34 @@
<div class="card">
<h4>Badge</h4>
<h5>Numbers</h5>
- <div>
- <p-badge value="2" styleClass="mr-2"></p-badge>
- <p-badge value="8" severity="success" styleClass="mr-2"></p-badge>
- <p-badge value="4" severity="info" styleClass="mr-2"></p-badge>
- <p-badge value="12" severity="warning" styleClass="mr-2"></p-badge>
+ <div class="flex flex-wrap gap-2">
+ <p-badge value="2"></p-badge>
+ <p-badge value="8" severity="success"></p-badge>
+ <p-badge value="4" severity="info"></p-badge>
+ <p-badge value="12" severity="warning"></p-badge>
<p-badge value="3" severity="danger"></p-badge>
</div>
<h5>Positioned Badge</h5>
- <i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
- <i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
- <i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
+ <div class="flex flex-wrap gap-2">
+ <i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
+ <i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
+ <i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
+ </div>
<h5>Inline Button Badge</h5>
- <p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
- <p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+ <div class="flex flex-wrap gap-2">
+ <p-button label="Emails" badge="8"></p-button>
+ <p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+ </div>
+
<h5>Sizes</h5>
- <div>
- <p-badge value="2" styleClass="mr-2"></p-badge>
- <p-badge value="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
- <p-badge value="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>
+ <div class="flex flex-wrap gap-2 align-items-end">
+ <p-badge value="2"></p-badge>
+ <p-badge value="4" size="large" severity="warning"></p-badge>
+ <p-badge value="6" size="xlarge" severity="success"></p-badge>
</div>
</div>
@@ -55,12 +60,14 @@
</p-avatarGroup>
<h5>Label - Circle</h5>
- <p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
- <p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
- <p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
+ <div class="flex flex-wrap gap-2 align-items-end">
+ <p-avatar label="P" size="xlarge" shape="circle"></p-avatar>
+ <p-avatar label="V" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
+ <p-avatar label="U" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
+ </div>
<h5>Icon - Badge</h5>
- <p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
+ <p-avatar icon="pi pi-user" pBadge value="4" severity="success" size="xlarge"></p-avatar>
</div>
<div class="card">
@@ -87,31 +94,37 @@
<div class="card">
<h4>Tag</h4>
<h5>Tags</h5>
- <p-tag styleClass="mr-2" value="Primary"></p-tag>
- <p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
- <p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
- <p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
- <p-tag severity="danger" value="Danger"></p-tag>
+ <div class="flex flex-wrap gap-2">
+ <p-tag value="Primary"></p-tag>
+ <p-tag severity="success" value="Success"></p-tag>
+ <p-tag severity="info" value="Info"></p-tag>
+ <p-tag severity="warning" value="Warning"></p-tag>
+ <p-tag severity="danger" value="Danger"></p-tag>
+ </div>
<h5>Pills</h5>
- <p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
- <p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
- <p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
- <p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
- <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
+ <div class="flex flex-wrap gap-2">
+ <p-tag value="Primary" [rounded]="true"></p-tag>
+ <p-tag severity="success" value="Success" [rounded]="true"></p-tag>
+ <p-tag severity="info" value="Info" [rounded]="true"></p-tag>
+ <p-tag severity="warning" value="Warning" [rounded]="true"></p-tag>
+ <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
+ </div>
<h5>Icons</h5>
- <p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
- <p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
- <p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
- <p-tag styleClass="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
- <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
+ <div class="flex flex-wrap gap-2">
+ <p-tag icon="pi pi-user" value="Primary"></p-tag>
+ <p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
+ <p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
+ <p-tag con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
+ <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
+ </div>
</div>
<div class="card">
<h4>Chip</h4>
<h5>Basic</h5>
- <div class="flex align-items-center flex-column sm:flex-row">
+ <div class="flex flex-wrap align-items-center">
<p-chip label="Action" styleClass="m-1"></p-chip>
<p-chip label="Comedy" styleClass="m-1"></p-chip>
<p-chip label="Mystery" styleClass="m-1"></p-chip>
@@ -119,7 +132,7 @@
</div>
<h5>Icon</h5>
- <div class="flex align-items-center flex-column sm:flex-row">
+ <div class="flex flex-wrap align-items-center">
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
@@ -127,7 +140,7 @@
</div>
<h5>Image</h5>
- <div class="flex align-items-center flex-column sm:flex-row">
+ <div class="flex flex-wrap align-items-center">
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
@@ -135,7 +148,7 @@
</div>
<h5>Styling</h5>
- <div class="flex align-items-center flex-column sm:flex-row">
+ <div class="flex flex-wrap align-items-center">
<p-chip label="Action" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip>
diff --git a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
index 2b042d1..cb8fb12 100644
--- a/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
+++ b/src/app/demo/components/uikit/overlays/overlaysdemo.component.html
@@ -23,14 +23,14 @@
<div class="card p-fluid">
<h5>Overlay Panel</h5>
- <div class="grid formgrid">
- <div class="col-6">
+ <div class="flex flex-wrap gap-2">
+ <div>
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width: '450px'}">
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
</p-overlayPanel>
</div>
- <div class="col-6">
+ <div>
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '450px'}">
<ng-template pTemplate>
@@ -91,22 +91,24 @@
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
</p-sidebar>
- <button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning mr-2"></button>
- <button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
- <button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
- <button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></button>
- <button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
+ <div class="flex flex-wrap gap-2">
+ <button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
+ <button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
+ <button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
+ <button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
+ <button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
+ </div>
</div>
</div>
<div class="col-12 lg:col-6">
<div class="card">
<h5>Tooltip</h5>
- <div class="formgroup-inline">
- <div class="field">
+ <div class="flex align-items-center gap-2">
+ <span>
<label for="firstname5" class="p-sr-only">Username</label>
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
- </div>
+ </span>
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
</div>
</div>
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.html b/src/app/demo/components/uikit/table/tabledemo.component.html
index a31d8f5..90d2c3c 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.html
+++ b/src/app/demo/components/uikit/table/tabledemo.component.html
@@ -119,10 +119,10 @@
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 12rem; ">
- <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
+ <p-progressBar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}"></p-progressBar>
</td>
<td class="text-center" style="min-width: 8rem;">
- <i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
+ <i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500': !customer.verified}"></i>
</td>
</tr>
</ng-template>
@@ -162,8 +162,8 @@
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
- <td style="width:200px" pFrozenColumn>{{customer.name}}</td>
- <td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
+ <td style="width:200px" pFrozenColumn class="font-bold">{{customer.name}}</td>
+ <td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" [ngClass]="{'font-bold': idFrozen}">{{customer.id}}</td>
<td style="width:200px">
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text ml-2">{{customer.country.name}}</span>
@@ -178,7 +178,7 @@
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
<span class="image-text ml-2">{{customer.representative.name}}</span>
</td>
- <td style="width:200px" pFrozenColumn alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
+ <td style="width:200px" pFrozenColumn class="font-bold" alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
</tr>
</ng-template>
</p-table>
diff --git a/src/app/demo/components/uikit/table/tabledemo.component.ts b/src/app/demo/components/uikit/table/tabledemo.component.ts
index 26aa5e6..9c86118 100644
--- a/src/app/demo/components/uikit/table/tabledemo.component.ts
+++ b/src/app/demo/components/uikit/table/tabledemo.component.ts
@@ -12,20 +12,7 @@ interface expandedRows {
@Component({
templateUrl: './tabledemo.component.html',
- providers: [MessageService, ConfirmationService],
- styles: [`
- :host ::ng-deep .p-frozen-column {
- font-weight: bold;
- }
-
- :host ::ng-deep .p-datatable-frozen-tbody {
- font-weight: bold;
- }
-
- :host ::ng-deep .p-progressbar {
- height:.5rem;
- }
- `]
+ providers: [MessageService, ConfirmationService]
})
export class TableDemoComponent implements OnInit {
diff --git a/src/assets/layout/styles/layout/_utils.scss b/src/assets/layout/styles/layout/_utils.scss
index 5143007..3a6fb0d 100644
--- a/src/assets/layout/styles/layout/_utils.scss
+++ b/src/assets/layout/styles/layout/_utils.scss
@@ -22,6 +22,6 @@
&.p-toast-top-right,
&.p-toast-top-left,
&.p-toast-top-center {
- top: 75px;
+ top: 100px;
}
}
\ No newline at end of file