Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

buttons page in progress

Browse source
This commit is contained in:
nixa 2016-05-12 12:04:08 +03:00
parent 85d5441f71
commit 85072185e9
19 changed files with 372 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/app/pages/ui/components/buttons/buttons.component.ts Normal file
View file

@ -0,0 +1,20 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {BaCard} from '../../../../theme/components';
import {FlatButtons} from './components/flatButtons';
import {RaisedButtons} from './components/raisedButtons';
import {SizedButtons} from './components/sizedButtons';
import {DisabledButtons} from './components/disabledButtons';
@Component({
selector: 'buttons',
encapsulation: ViewEncapsulation.None,
directives: [BaCard, FlatButtons, RaisedButtons, SizedButtons, DisabledButtons],
styles: [require('./buttons.scss')],
template: require('./buttons.html'),
})
export class Buttons {
constructor() {
}
}

65
src/app/pages/ui/components/buttons/buttons.html Normal file
View file

@ -0,0 +1,65 @@
<div class="widgets">
<div class="row">
<div class="col-md-3">
<ba-card title="Flat Buttons" baCardClass="with-scroll button-panel">
<flat-buttons></flat-buttons>
</ba-card>
</div>
<div class="col-md-3">
<ba-card title="Raised Buttons" baCardClass="with-scroll button-panel">
<raised-buttons></raised-buttons>
</ba-card>
</div>
<div class="col-md-3">
<ba-card title="Different Sizes" baCardClass="with-scroll button-panel df-size-button-panel">
<sized-buttons></sized-buttons>
</ba-card>
</div>
<div class="col-md-3">
<ba-card title="Disabled" baCardClass="with-scroll button-panel">
<disabled-buttons></disabled-buttons>
</ba-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Icon Buttons"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/ui/buttons/widgets/iconButtons.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Large Buttons"
ba-panel-class="with-scroll large-buttons-panel">
<div ng-include="'app/pages/ui/buttons/widgets/largeButtons.html'"></div>
</div>
</div>
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Button Dropdowns"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/ui/buttons/widgets/dropdowns.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Button Groups"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/ui/buttons/widgets/buttonGroups.html'"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"
ba-panel
ba-panel-title="Progress Buttons"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/ui/buttons/widgets/progressButtons.html'"></div>
</div>
</div>
</div>

130
src/app/pages/ui/components/buttons/buttons.scss Normal file
View file

@ -0,0 +1,130 @@
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.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: 0px 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;
font-size: 16px;
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
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;
}

12
src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts Normal file
View file

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
@Component({
selector: 'disabled-buttons',
template: require('./disabledButtons.html'),
})
export class DisabledButtons {
constructor() {
}
}

18
src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.html Normal file
View file

@ -0,0 +1,18 @@
<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
src/app/pages/ui/components/buttons/components/disabledButtons/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './disabledButtons.component';

12
src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts Normal file
View file

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
@Component({
selector: 'flat-buttons',
template: require('./flatButtons.html'),
})
export class FlatButtons {
constructor() {
}
}

18
src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.html Normal file
View file

@ -0,0 +1,18 @@
<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
src/app/pages/ui/components/buttons/components/flatButtons/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './flatButtons.component';

1
src/app/pages/ui/components/buttons/components/raisedButtons/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './raisedButtons.component';

12
src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts Normal file
View file

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
@Component({
selector: 'raised-buttons',
template: require('./raisedButtons.html'),
})
export class RaisedButtons {
constructor() {
}
}

18
src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.html Normal file
View file

@ -0,0 +1,18 @@
<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
src/app/pages/ui/components/buttons/components/sizedButtons/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './sizedButtons.component';

12
src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts Normal file
View file

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
@Component({
selector: 'sized-buttons',
template: require('./sizedButtons.html'),
})
export class SizedButtons {
constructor() {
}
}

18
src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.html Normal file
View file

@ -0,0 +1,18 @@
<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
src/app/pages/ui/components/buttons/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './buttons.component';

6
src/app/pages/ui/ui.component.ts
View file

@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
import {RouteConfig} from '@angular/router-deprecated';
import {Typography} from './components/typography';
import {Buttons} from './components/buttons';
@Component({
selector: 'ui',
@ -17,6 +18,11 @@ import {Typography} from './components/typography';
path: '/typography',
useAsDefault: true
},
{
name: 'Buttons',
component: Buttons,
path: '/buttons',
}
])
export class Ui {

4
src/app/theme/components/sidebar/sidebar.service.ts
View file

@ -24,6 +24,10 @@ export class SidebarService {
title: 'Typography',
name: 'Typography',
},
{
title: 'Buttons',
name: 'Buttons',
},
]
},
{

22
src/app/theme/sass/_buttons.scss
View file

@ -7,6 +7,8 @@ $hover: 24;
.btn {
border-radius: 5px;
transition: all 0.1s ease;
padding: 0.344rem 1rem;
font-size: 0.9rem;
}
.btn:hover {
@ -274,3 +276,23 @@ button.progress-button {
padding: 8px 14px;
font-size: 16px;
}
.btn-group-xs>.btn, .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.btn-group-sm>.btn, .btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-group-lg>.btn, .btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}