mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
refactor(buttons): fix styles
This commit is contained in:
Alexander Zhukov
parent
59ef144716
commit
774fe48d65
11 changed files with 955 additions and 595 deletions
|
|
@ -1,222 +1,186 @@
|
|||
<div class="row">
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<div class="row default-buttons">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Primary Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container primary-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Warning Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container warning-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#7659ff</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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Success Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container success-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#7659ff</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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">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">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Info Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container info-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#7659ff</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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">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">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Danger Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container danger-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#7659ff</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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">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">
|
||||
<div class="button-container col-md-4">
|
||||
<div class="container-title">
|
||||
<span>Default Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="container-btn">
|
||||
<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 class="states-container default-container">
|
||||
<div class="state-container">
|
||||
<div class="original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">#7659ff</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 class="state-container">
|
||||
<div class="hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">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 class="state-container">
|
||||
<div class="active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue