mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
65 lines
2.9 KiB
HTML
65 lines
2.9 KiB
HTML
<nb-card>
|
|
<nb-card-header>Hero Buttons</nb-card-header>
|
|
<nb-card-body>
|
|
<div class="row">
|
|
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
|
<div class="container-title">
|
|
<span>{{ hb.title }}</span>
|
|
</div>
|
|
<div class="container-btn">
|
|
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
|
|
</div>
|
|
<div class="{{ hb.container }}">
|
|
<div class="state-container" *ngIf="hb[themeName].border">
|
|
<div class="state-value border"></div>
|
|
<div class="state-details">
|
|
<span class="header">Border</span>
|
|
<span class="subheader">{{ hb[themeName].border }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
|
<div class="state-value gradient"></div>
|
|
<div class="state-details">
|
|
<span class="header">Linear Gradient</span>
|
|
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
|
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="state-container">
|
|
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
|
<div class="state-details" *ngIf="hb[themeName].bevel">
|
|
<span class="header">Bevel</span>
|
|
<span class="subheader">0 3px 0 0</span>
|
|
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
|
</div>
|
|
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
|
<span class="header">No Bevel</span>
|
|
</div>
|
|
</div>
|
|
<div class="state-container">
|
|
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
|
<div class="state-details" *ngIf="hb[themeName].shadow">
|
|
<span class="header">Shadow</span>
|
|
<span class="subheader">0 4px 10px 0</span>
|
|
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
|
</div>
|
|
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
|
<span class="header">No Shadow</span>
|
|
</div>
|
|
</div>
|
|
<div class="state-container">
|
|
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
|
<div class="state-details" *ngIf="hb[themeName].glow">
|
|
<span class="header">Glow</span>
|
|
<span class="subheader">0 2px 12px 0</span>
|
|
<span class="subheader">{{ hb[themeName].glow }}</span>
|
|
</div>
|
|
<div class="state-details" *ngIf="!hb[themeName].glow">
|
|
<span class="header">No Glow</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nb-card-body>
|
|
</nb-card>
|