Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-20 23:14:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(theme): theme refactor, buttons, toaster, preloader

Browse source
This commit is contained in:
Dmitry Nehaychik 2017-06-02 12:43:23 +03:00
parent d5f69647aa
commit 59ef144716
77 changed files with 1324 additions and 954 deletions
Download patch file Download diff file Expand all files Collapse all files

224
src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.html Normal file
View file

@ -0,0 +1,224 @@
<div class="row">
<div class="btn-default-container col-md-4">
<div class="btn-container-title">
<span>Primary Button</span>
</div>
<div>
<button class="btn btn-primary btn-demo">Primary</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-primary btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#7659ff</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-primary btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-primary btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
<div class="btn-default-container col-md-4">
<div class="btn-container-title">
<span>Warning Button</span>
</div>
<div>
<button class="btn btn-warning btn-demo">Warning</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-warning btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#ffcb17</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-warning btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-warning btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
<div class="btn-default-container col-md-4">
<div class="btn-container-title">
<span>Success Button</span>
</div>
<div>
<button class="btn btn-success btn-demo">Success</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-success btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#00d977</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-success btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-success btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
<div class="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<span>Info Button</span>
</div>
<div>
<button class="btn btn-info btn-demo">Info</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-info btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#0088ff</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-info btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-info btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
<div class="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<span>Danger Button</span>
</div>
<div>
<button class="btn btn-danger btn-demo">Danger</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-danger btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>#ff386a</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-danger btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-danger btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
<div class="btn-default-container col-md-4 col-sm-6 col-6">
<div class="btn-container-title">
<span>Default Button</span>
</div>
<div>
<button class="btn btn-demo">Default</button>
</div>
<div class="btn-details-container">
<div class="btn-details-item">
<div>
<button class="btn btn-empty"></button>
</div>
<div>
<span>Default</span>
<span>transparent</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-empty hover"></button>
</div>
<div>
<span>Hover</span>
<span>20% white</span>
</div>
</div>
<div class="btn-details-item">
<div>
<button class="btn btn-empty active"></button>
</div>
<div>
<span>Active</span>
<span>20% black</span>
</div>
</div>
</div>
</div>
</div>