mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-23 10:50:13 +01:00
refactor(theme): theme refactor, buttons, toaster, preloader
This commit is contained in:
Dmitry Nehaychik
parent
d5f69647aa
commit
59ef144716
77 changed files with 1324 additions and 954 deletions
|
|
@ -1,85 +1,33 @@
|
|||
<div class="row">
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Flat buttons
|
||||
</nga-card-header>
|
||||
<nga-card-header>Hero Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Raised buttons
|
||||
</nga-card-header>
|
||||
<nga-card-header>Button Shapes</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Different sizes
|
||||
</nga-card-header>
|
||||
<nga-card-header>Button Sizes</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-sized-buttons class="button-panel df-size-button-panel"></ngx-sized-buttons>
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Disabled
|
||||
</nga-card-header>
|
||||
<nga-card-header>Default Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Icon buttons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-icon-buttons></ngx-icon-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Button dropdowns
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Large buttons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-large-buttons class="large-buttons-panel"></ngx-large-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Button groups
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-group-buttons></ngx-group-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,164 +1,9 @@
|
|||
:host {
|
||||
:host /deep/ {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
/deep/ {
|
||||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
|
||||
&.row-sm {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&.row-xs {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
& {
|
||||
.row {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns-row {
|
||||
& {
|
||||
div {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.btns-same-width-sm {
|
||||
.btn {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-md {
|
||||
.btn {
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-lg {
|
||||
.btn {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.btn-list {
|
||||
margin: 0 0 0 -18px;
|
||||
padding: 0;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
|
||||
li {
|
||||
margin: 0 0 12px 18px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
$btn-icon-size: 34px;
|
||||
|
||||
.btn-icon {
|
||||
width: $btn-icon-size;
|
||||
height: $btn-icon-size;
|
||||
line-height: $btn-icon-size;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group-example {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-toolbar-example {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.progress-buttons-container {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-panel {
|
||||
height: 315px;
|
||||
|
||||
.btn {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.large-buttons-panel {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.button-panel {
|
||||
&.df-size-button-panel {
|
||||
.btn-xs {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.btn-mm {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.btn-md {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.btn-xm {
|
||||
width: 175px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
&.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,4 @@ import { Component } from '@angular/core';
|
|||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
|
|||
31
src/app/pages/ui-features/buttons/buttons.module.ts
Normal file
31
src/app/pages/ui-features/buttons/buttons.module.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { SharedModule } from '../../../shared.module';
|
||||
|
||||
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
|
||||
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
$btn-empty-size: 50px;
|
||||
|
||||
.btn-empty {
|
||||
height: $btn-empty-size !important;
|
||||
width: $btn-empty-size !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.btn-default-container {
|
||||
.btn-container-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.btn-details-container {
|
||||
margin-top: 24px;
|
||||
|
||||
.btn-details-item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-default" disabled="disabled">Default</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-success" disabled="disabled">Success</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-info" disabled="disabled">Info</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-disabled-buttons',
|
||||
templateUrl: './disabled.component.html',
|
||||
})
|
||||
export class DisabledButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle>
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-success" ngbDropdownToggle>
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-info" ngbDropdownToggle>
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-default" ngbDropdownToggle>
|
||||
Default
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-warning" ngbDropdownToggle>
|
||||
Warning
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-danger" ngbDropdownToggle>
|
||||
Danger
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="panel-subtitle">Split button dropdowns</h5>
|
||||
|
||||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-default" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dropdown-buttons',
|
||||
templateUrl: './dropdown.component.html',
|
||||
})
|
||||
export class DropdownButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-flat-buttons',
|
||||
templateUrl: './flat.component.html',
|
||||
})
|
||||
export class FlatButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<div class="btn-group-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-danger">Left</button>
|
||||
<button type="button" class="btn btn-danger">Middle</button>
|
||||
<button type="button" class="btn btn-danger">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-group-buttons',
|
||||
templateUrl: './group.component.html',
|
||||
})
|
||||
export class GroupButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<div class="row">
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Primary Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-primary btn-primary-hero btn-demo">Primary</button>
|
||||
</div>
|
||||
<div class="btn-components-container primary-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Warning Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-warning btn-warning-hero btn-demo">Warning</button>
|
||||
</div>
|
||||
<div class="btn-components-container warning-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Success Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-success btn-success-hero btn-demo">Success</button>
|
||||
</div>
|
||||
<div class="btn-components-container success-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Info Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-info btn-info-hero btn-demo">Info</button>
|
||||
</div>
|
||||
<div class="btn-components-container info-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Danger Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-danger btn-danger-hero btn-demo">Danger</button>
|
||||
</div>
|
||||
<div class="btn-components-container danger-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Ghost Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-hero btn-demo">Ghost</button>
|
||||
</div>
|
||||
<div class="btn-components-container default-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Border</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 2px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h5 class="panel-subtitle">Buttons with icons</h5>
|
||||
|
||||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icon-buttons',
|
||||
templateUrl: './icon.component.html',
|
||||
})
|
||||
export class IconButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="row btns-row btns-same-width-lg">
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-default btn-lg">Default</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-large-buttons',
|
||||
templateUrl: './large.component.html',
|
||||
})
|
||||
export class LargeButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-default btn-raised">Default</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-success btn-raised">Success</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-info btn-raised">Info</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-raised-buttons',
|
||||
templateUrl: './raised.component.html',
|
||||
})
|
||||
export class RaisedButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-round btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.btn-shape-name {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.btn-shape-details {
|
||||
margin-bottom: 19px;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="row">
|
||||
<div class="btn-size-container col-md-4">
|
||||
<div>
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>1.25rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-3">
|
||||
<div>
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>1rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-3">
|
||||
<div>
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0.875rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-2">
|
||||
<div>
|
||||
<span>Tiny Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0.625rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-tn">Tiny</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.btn-size-container {
|
||||
div:nth-child(1) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
color: #ffffff;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-default btn-xs">Default</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-primary btn-sm">Primary</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-success btn-mm">Success</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-info btn-md">Info</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-warning btn-xm">Warning</button>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-sized-buttons',
|
||||
templateUrl: './sized.component.html',
|
||||
})
|
||||
export class SizedButtonsComponent {
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue