build: starter-kit clean up

This commit is contained in:
Dmitry Nehaychik 2018-02-27 13:50:49 +03:00 committed by Sergey Andrievskiy
parent 4ff3d938e4
commit 66b86fa915
414 changed files with 235 additions and 19468 deletions

View file

@ -1,123 +0,0 @@
<div class="row">
<div class="col-lg-12">
<nb-card>
<nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" hero>
{{ status }}
</button>
<button disabled nbButton hero>
disabled
</button>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Default Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status">
{{ status }}
</button>
<button disabled nbButton>
disabled
</button>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Outline Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" outline>
{{ status }}
</button>
<button disabled nbButton outline>
disabled
</button>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Ghost Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" ghost>
{{ status }}
</button>
<button disabled nbButton outline>
disabled
</button>
</div>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<nb-card>
<nb-card-header>Button shapes</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let shape of shapes" nbButton [shape]="shape">
{{ shape }}
</button>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Button sizes</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let size of sizes" nbButton [size]="size">
{{ size }}
</button>
</div>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<nb-card class="actions-card">
<nb-card-header>Action Groups</nb-card-header>
<nb-card-body>
<nb-actions size="medium">
<nb-action icon="menu-outline"></nb-action>
<nb-action icon="search-outline"></nb-action>
<nb-action icon="email-outline"></nb-action>
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
<nb-user name="Han Solo"></nb-user>
</nb-action>
<nb-action icon="settings-2-outline"></nb-action>
</nb-actions>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-body>
<nb-actions size="medium" fullWidth>
<nb-action>
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
<span>Pause</span>
</nb-action>
<nb-action>
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
<span>Logs</span>
</nb-action>
<nb-action>
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
<span>Search</span>
</nb-action>
<nb-action>
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
<span>Setup</span>
</nb-action>
</nb-actions>
</nb-card-body>
</nb-card>
</div>
</div>

View file

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
.buttons-row {
margin: -0.5rem;
}
button[nbButton] {
margin: 0.5rem;
}
.action-icon {
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);
}
.actions-card {
height: 8rem;
}
}

View file

@ -1,13 +0,0 @@
import { Component } from '@angular/core';
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
@Component({
selector: 'ngx-buttons',
styleUrls: ['./buttons.component.scss'],
templateUrl: './buttons.component.html',
})
export class ButtonsComponent {
statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
}

View file

@ -1,32 +0,0 @@
<div class="row">
<div class="col-md-12 col-lg-4 col-xxxl-4">
<nb-card>
<nb-card-header>Common Datepicker</nb-card-header>
<nb-card-body>
<input nbInput
placeholder="Form Picker"
[nbDatepicker]="formpicker">
<nb-datepicker #formpicker></nb-datepicker>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12 col-lg-4 col-xxxl-4">
<nb-card>
<nb-card-header>Datepicker With Range</nb-card-header>
<nb-card-body>
<input nbInput placeholder="Range Picker" [nbDatepicker]="rangepicker">
<nb-rangepicker #rangepicker></nb-rangepicker>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-12 col-lg-4 col-xxxl-4">
<nb-card>
<nb-card-header>Datepicker With Disabled Min Max Values</nb-card-header>
<nb-card-body>
<input nbInput placeholder="Min Max Picker" [nbDatepicker]="picker">
<nb-datepicker #picker [min]="min" [max]="max"></nb-datepicker>
</nb-card-body>
</nb-card>
</div>
</div>

View file

@ -1,12 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card-body {
display: flex;
justify-content: space-between;
input {
width: 100%;
}
}
}

View file

@ -1,18 +0,0 @@
import { Component } from '@angular/core';
import { NbDateService } from '@nebular/theme';
@Component({
selector: 'ngx-datepicker',
templateUrl: 'datepicker.component.html',
styleUrls: ['datepicker.component.scss'],
})
export class DatepickerComponent {
min: Date;
max: Date;
constructor(protected dateService: NbDateService<Date>) {
this.min = this.dateService.addDay(this.dateService.today(), -5);
this.max = this.dateService.addDay(this.dateService.today(), 5);
}
}

View file

@ -1,87 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Default Inputs</nb-card-header>
<nb-card-body>
<input type="text" nbInput fullWidth placeholder="Project">
<div class="full-name-inputs">
<input type="text" nbInput fullWidth placeholder="Nick">
<input type="text" nbInput fullWidth placeholder="Last Name">
</div>
<input type="password" nbInput fullWidth placeholder="Password">
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
<input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium Input">
<input type="text" nbInput fullWidth fieldSize="large" placeholder="Large Input">
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Select</nb-card-header>
<nb-card-body>
<nb-select selected="1">
<nb-option value="1">Option 1</nb-option>
<nb-option value="2">Option 2</nb-option>
</nb-select>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Validation States</nb-card-header>
<nb-card-body>
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
<input type="text" nbInput fullWidth status="success" placeholder="Warning Input">
<input type="text" nbInput fullWidth status="warning" placeholder="Danger Input">
<input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
<input type="text" nbInput fullWidth status="primary" placeholder="Input with Primary">
<div class="validation-checkboxes">
<nb-checkbox status="success">Success Checkbox</nb-checkbox>
<nb-checkbox status="warning">Warning Checkbox</nb-checkbox>
<nb-checkbox status="danger">Danger Checkbox</nb-checkbox>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Checkboxes & Radios</nb-card-header>
<nb-card-body class="checkbox-radio">
<div class="demo-items">
<nb-checkbox>Checkbox 1</nb-checkbox>
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
</div>
<div class="demo-items">
<nb-radio-group [(value)]="radioGroupValue">
<nb-radio
[value]="'This is value 1'">
Radio 1
</nb-radio>
<nb-radio
[value]="'This is value 2'">
Radio 2
</nb-radio>
<nb-radio
[value]="'This is value 3'">
Radio 3
</nb-radio>
</nb-radio-group>
</div>
<div class="demo-items">
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
<nb-radio-group disabled>
<nb-radio
[value]="'Disabled Value'">
Disabled Radio
</nb-radio>
</nb-radio-group>
</div>
</nb-card-body>
</nb-card>
</div>
</div>

View file

@ -1,26 +0,0 @@
nb-card-body {
overflow: visible;
padding-top: 0;
> * {
margin-top: 1rem;
}
}
.full-name-inputs,
.validation-checkboxes {
display: flex;
margin: 0 -0.5rem;
> * {
margin: 0 0.5rem;
}
}
.checkbox-radio {
display: flex;
}
.demo-items {
flex: 1 0 33%;
}

View file

@ -1,13 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html',
})
export class FormInputsComponent {
starRate = 2;
heartRate = 4;
radioGroupValue = 'This is value 2';
}

View file

@ -1,165 +0,0 @@
<div class="row">
<div class="col-md-12">
<nb-card class="inline-form-card">
<nb-card-header>Inline form</nb-card-header>
<nb-card-body>
<form class="form-inline">
<input type="text" nbInput fullWidth placeholder="Jane Doe">
<input type="text" nbInput fullWidth placeholder="Email">
<nb-checkbox>Remember me</nb-checkbox>
<button type="submit" nbButton status="primary">Submit</button>
</form>
</nb-card-body>
</nb-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nb-card>
<nb-card-header>Using the Grid</nb-card-header>
<nb-card-body>
<form>
<div class="form-group row">
<label for="inputEmail1" class="label col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" nbInput fullWidth id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword2" class="label col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" nbInput fullWidth id="inputPassword2" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 label">Radios</label>
<div class="col-sm-9">
<nb-radio-group>
<nb-radio>Option 1</nb-radio>
<nb-radio>Option 2</nb-radio>
<nb-radio disabled>Disabled Option</nb-radio>
</nb-radio-group>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<button type="submit" nbButton status="primary">Sign in</button>
</div>
</div>
</form>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Form without labels</nb-card-header>
<nb-card-body>
<form>
<div class="form-group">
<input type="text" nbInput fullWidth placeholder="Recipients">
</div>
<div class="form-group">
<input type="text" nbInput fullWidth placeholder="Subject">
</div>
<div class="form-group">
<textarea nbInput placeholder="Message"></textarea>
</div>
<button type="submit" nbButton status="success">Send</button>
</form>
</nb-card-body>
</nb-card>
</div>
<div class="col-md-6">
<nb-card>
<nb-card-header>Basic form</nb-card-header>
<nb-card-body>
<form>
<div class="form-group">
<label for="exampleInputEmail1" class="label">Email address</label>
<input type="email" nbInput fullWidth id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="label">Password</label>
<input type="password" nbInput fullWidth id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<nb-checkbox>Check me out</nb-checkbox>
</div>
<button type="submit" nbButton status="danger">Submit</button>
</form>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Block form</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName" class="label">First Name</label>
<input type="text" nbInput fullWidth id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName" class="label">Last Name</label>
<input type="text" nbInput fullWidth id="inputLastName" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail" class="label">Email</label>
<input type="email" nbInput fullWidth id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputWebsite" class="label">Website</label>
<input type="text" nbInput fullWidth id="inputWebsite" placeholder="Website">
</div>
</div>
</div>
<button type="submit" nbButton>Submit</button>
</nb-card-body>
</nb-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nb-card>
<nb-card-header>Horizontal form</nb-card-header>
<nb-card-body>
<form class="form-horizontal">
<div class="form-group row">
<label for="inputEmail3" class="label col-sm-3 form-control-label">Email</label>
<div class="col-sm-9">
<input type="email" nbInput fullWidth id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="label col-sm-3 form-control-label">Password</label>
<div class="col-sm-9">
<input type="password" nbInput fullWidth id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="checkbox">
<nb-checkbox>Remember me</nb-checkbox>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<button type="submit" nbButton status="warning">Sign in</button>
</div>
</div>
</form>
</nb-card-body>
</nb-card>
</div>
</div>

View file

@ -1,15 +0,0 @@
nb-checkbox {
margin-bottom: 1rem;
}
.form-inline [fullWidth] {
flex: 1;
}
.form-inline > * {
margin: 0 1.5rem 1.5rem 0;
}
nb-card.inline-form-card nb-card-body {
padding-bottom: 0;
}

View file

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-form-layouts',
styleUrls: ['./form-layouts.component.scss'],
templateUrl: './form-layouts.component.html',
})
export class FormLayoutsComponent {
}

View file

@ -1,49 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsComponent } from './forms.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
import { DatepickerComponent } from './datepicker/datepicker.component';
import { ButtonsComponent } from './buttons/buttons.component';
const routes: Routes = [
{
path: '',
component: FormsComponent,
children: [
{
path: 'inputs',
component: FormInputsComponent,
},
{
path: 'layouts',
component: FormLayoutsComponent,
},
{
path: 'layouts',
component: FormLayoutsComponent,
},
{
path: 'buttons',
component: ButtonsComponent,
},
{
path: 'datepicker',
component: DatepickerComponent,
},
],
},
];
@NgModule({
imports: [
RouterModule.forChild(routes),
],
exports: [
RouterModule,
],
})
export class FormsRoutingModule {
}

View file

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-form-elements',
template: `
<router-outlet></router-outlet>
`,
})
export class FormsComponent {
}

View file

@ -1,45 +0,0 @@
import { NgModule } from '@angular/core';
import {
NbActionsModule,
NbButtonModule,
NbCardModule,
NbCheckboxModule,
NbDatepickerModule, NbIconModule,
NbInputModule,
NbRadioModule,
NbSelectModule,
NbUserModule,
} from '@nebular/theme';
import { ThemeModule } from '../../@theme/theme.module';
import { FormsRoutingModule } from './forms-routing.module';
import { FormsComponent } from './forms.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
import { DatepickerComponent } from './datepicker/datepicker.component';
import { ButtonsComponent } from './buttons/buttons.component';
@NgModule({
imports: [
ThemeModule,
NbInputModule,
NbCardModule,
NbButtonModule,
NbActionsModule,
NbUserModule,
NbCheckboxModule,
NbRadioModule,
NbDatepickerModule,
FormsRoutingModule,
NbSelectModule,
NbIconModule,
],
declarations: [
FormsComponent,
ButtonsComponent,
FormInputsComponent,
FormLayoutsComponent,
DatepickerComponent,
],
})
export class FormsModule { }