mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-21 01:40:13 +01:00
refactor: layout & form
This commit is contained in:
Dmitry Nehaychik
parent
da3cd140f5
commit
da8bcf7b32
26 changed files with 877 additions and 671 deletions
876
package-lock.json
generated
876
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -64,6 +64,7 @@
|
|||
"ng2-completer": "2.0.8",
|
||||
"ng2-smart-table": "1.3.5",
|
||||
"ngx-echarts": "^4.0.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"normalize.css": "6.0.0",
|
||||
"pace-js": "1.0.2",
|
||||
"roboto-fontface": "0.8.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="header-container"
|
||||
[class.left]="position === 'normal'"
|
||||
[class.right]="position === 'inverse'">
|
||||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<a (click)="toggleSidebar()" href="#" class="navigation">
|
||||
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
||||
<nb-icon icon="menu-2-outline"></nb-icon>
|
||||
</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||
|
|
@ -13,17 +11,15 @@
|
|||
</div>
|
||||
|
||||
<div class="header-container">
|
||||
<nb-actions
|
||||
size="small"
|
||||
[class.right]="position === 'normal'"
|
||||
[class.left]="position === 'inverse'">
|
||||
<nb-action *nbIsGranted="['view', 'user']" >
|
||||
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
||||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
||||
<nb-action *nbIsGranted="['view', 'user']" >
|
||||
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
@import '../../styles/themes';
|
||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
||||
//
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -43,13 +41,13 @@
|
|||
align-items: center;
|
||||
width: auto;
|
||||
|
||||
.navigation {
|
||||
.sidebar-toggle {
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
|
||||
color: nb-theme(text-hint-color);
|
||||
nb-icon {
|
||||
font-size: 2.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,155 +60,4 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
//
|
||||
// @include nb-for-theme(corporate) {
|
||||
// $menu-action-separator-color: #3f4550;
|
||||
//
|
||||
// nb-action {
|
||||
// @include nb-ltr(border-left-color, $menu-action-separator-color);
|
||||
// @include nb-rtl(border-right-color, $menu-action-separator-color);
|
||||
// }
|
||||
//
|
||||
// .header-container .logo {
|
||||
// @include nb-ltr(border, none);
|
||||
// @include nb-rtl(border, none);
|
||||
// }
|
||||
//
|
||||
// .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
|
||||
// color: nb-theme(color-white);
|
||||
// background: transparent;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ngx-layout-direction-switcher {
|
||||
// margin: 0 1.5rem;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// margin: nb-theme(layout-padding);
|
||||
// margin-top: 0;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xl) {
|
||||
// ngx-layout-direction-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .toggle-settings ::ng-deep a {
|
||||
// display: block;
|
||||
// text-decoration: none;
|
||||
// line-height: 1;
|
||||
//
|
||||
// i {
|
||||
// color: nb-theme(color-fg-highlight);
|
||||
// font-size: 2.25rem;
|
||||
// border-radius: 50%;
|
||||
// position: relative;
|
||||
// animation-name: pulse-light;
|
||||
//
|
||||
// &::after {
|
||||
// content: ' ';
|
||||
// // hack to be able to set border-radius
|
||||
// background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
|
||||
// border-radius: 50%;
|
||||
// pointer-events: none;
|
||||
//
|
||||
// position: absolute;
|
||||
// top: 52.3%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// width: 13%;
|
||||
// height: 13%;
|
||||
//
|
||||
// animation: 3s linear infinite pulse;
|
||||
//
|
||||
// @include nb-for-theme(default) {
|
||||
// animation-name: pulse-light;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include keyframes(pulse) {
|
||||
// 0% {
|
||||
// //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
|
||||
// }
|
||||
// 20% {
|
||||
// //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
// }
|
||||
// 100% {
|
||||
// //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include keyframes(pulse-light) {
|
||||
// 0% {
|
||||
// box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
|
||||
// }
|
||||
// 20% {
|
||||
// box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
|
||||
// }
|
||||
// 100% {
|
||||
// box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(md) {
|
||||
//
|
||||
// nb-action:not(.toggle-settings) {
|
||||
// border: none;
|
||||
// }
|
||||
//
|
||||
// .control-item {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .toggle-settings {
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// ngx-layout-direction-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// margin: 0 0.5rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(sm) {
|
||||
//
|
||||
// nb-user ::ng-deep .user-name {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(is) {
|
||||
//
|
||||
// .header-container {
|
||||
// .logo {
|
||||
// font-size: 1.25rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .toggle-settings {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// nb-action:not(.toggle-settings) {
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// .right ::ng-deep {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
|
||||
import { UserData } from '../../../@core/data/users';
|
||||
|
|
@ -11,8 +11,6 @@ import { LayoutService } from '../../../@core/utils';
|
|||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
@Input() position = 'normal';
|
||||
|
||||
user: any;
|
||||
|
||||
themes = [
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
|
|
@ -11,8 +10,6 @@ import { Component } from '@angular/core';
|
|||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nb-sidebar-header>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
|
|||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-three-columns-layout',
|
||||
styleUrls: ['./three-columns.layout.scss'],
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@import '~@nebular/theme/styles/themes';
|
||||
|
||||
// which themes you what to enable (empty to enable all)
|
||||
$nb-enabled-themes: (default);
|
||||
//$nb-enabled-themes: (default, dark, cos);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
padding: nb-theme(card-padding);
|
||||
|
||||
.cover {
|
||||
border-radius: nb-theme(radius) / 2;
|
||||
//border-radius: nb-theme(radius) / 2;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../../@theme/theme.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';
|
||||
import { ActionGroupsComponent } from './action-groups/action-groups.component';
|
||||
import { LabeledActionsGroupComponent } from './labeled-actions-group/labeled-actions-group.component';
|
||||
import { OutlineButtonsComponent } from './outline-buttons/outline-buttons.component';
|
||||
import { ButtonElementsComponent } from './button-elements/button-elements.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
OutlineButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
ActionGroupsComponent,
|
||||
LabeledActionsGroupComponent,
|
||||
ButtonElementsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -17,9 +17,6 @@
|
|||
<div class="input-group">
|
||||
<input type="password" nbInput fullWidth placeholder="Password">
|
||||
</div>
|
||||
<div class="input-group has-person-icon">
|
||||
<input type="text" placeholder="With Icon" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||
</div>
|
||||
|
|
@ -49,6 +46,19 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Select</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<nb-select selected="1">
|
||||
<nb-option value="1">Option 1</nb-option>
|
||||
<nb-option value="2">Option 2</nb-option>
|
||||
</nb-select>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
|
|
@ -56,18 +66,18 @@
|
|||
<input type="text" nbInput fullWidth status="info" placeholder="Input with Info">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="success" placeholder="Input with Warning">
|
||||
<input type="text" nbInput fullWidth status="success" placeholder="Warning Input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Input with Danger">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Danger Input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Input with Danger">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Danger Input">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes row">
|
||||
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
|
||||
<nb-checkbox status="success" class="col-sm-4">Success Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Warning Checkbox</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">Danger Checkbox</nb-checkbox>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -76,11 +86,11 @@
|
|||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes col-sm-4">
|
||||
<div class="demo-items col-sm-4">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
</div>
|
||||
<div class="demo-radio col-sm-4">
|
||||
<div class="demo-items col-sm-4">
|
||||
<nb-radio-group [(value)]="radioGroupValue">
|
||||
<nb-radio
|
||||
[value]="'This is value 1'">
|
||||
|
|
@ -96,7 +106,7 @@
|
|||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</div>
|
||||
<div class="demo-disabled-checkbox-radio col-sm-4">
|
||||
<div class="demo-items col-sm-4">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<nb-radio-group disabled>
|
||||
<nb-radio
|
||||
|
|
|
|||
|
|
@ -1,130 +1,35 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.custom-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-disabled-checkbox-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-rating {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group.has-person-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\F47D';
|
||||
font-family: 'Ionicons';
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 1rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
ngb-rating {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ngb-rating i {
|
||||
color: nb-theme(color-success);
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
button:not(.btn-icon) {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@
|
|||
<nb-card-header>Inline form</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form class="form-inline">
|
||||
<input type="text" class="form-control full-width" placeholder="Jane Doe">
|
||||
<div class="input-group full-width">
|
||||
<div class="input-group-addon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
<input type="text" nbInput fullWidth placeholder="Jane Doe">
|
||||
<input type="text" nbInput fullWidth placeholder="Email">
|
||||
<nb-checkbox>Remember me</nb-checkbox>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="submit" nbButton status="primary">Submit</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -24,46 +21,30 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail1" class="col-sm-3 col-form-label">Email</label>
|
||||
<label for="inputEmail1" class="label col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
|
||||
<input type="email" nbInput fullWidth id="inputEmail1" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword2" class="col-sm-3 col-form-label">Password</label>
|
||||
<label for="inputPassword2" class="label col-sm-3 col-form-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
|
||||
<input type="password" nbInput fullWidth id="inputPassword2" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3">Radios</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="form-check">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option one is this and that—be sure to include why it's great</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option two can be something else and selecting it will deselect option one</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="gridRadios" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Option three is disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
<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" class="btn btn-primary">Sign in</button>
|
||||
<button type="submit" nbButton status="primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -75,15 +56,15 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
<input type="text" nbInput fullWidth placeholder="Recipients">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Subject">
|
||||
<input type="text" nbInput fullWidth placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" placeholder="Message"></textarea>
|
||||
<textarea nbInput placeholder="Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Send</button>
|
||||
<button type="submit" nbButton status="success">Send</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -95,17 +76,17 @@
|
|||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
|
||||
<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">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
<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" class="btn btn-danger">Submit</button>
|
||||
<button type="submit" nbButton status="danger">Submit</button>
|
||||
</form>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -116,32 +97,32 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="inputFirstName">First Name</label>
|
||||
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
|
||||
<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">Last Name</label>
|
||||
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
|
||||
<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">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
|
||||
<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">Website</label>
|
||||
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
|
||||
<label for="inputWebsite" class="label">Website</label>
|
||||
<input type="text" nbInput fullWidth id="inputWebsite" placeholder="Website">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
<button type="submit" nbButton>Submit</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
@ -154,15 +135,15 @@
|
|||
<nb-card-body>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-3 form-control-label">Email</label>
|
||||
<label for="inputEmail3" class="label col-sm-3 form-control-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
<input type="email" nbInput fullWidth id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-3 form-control-label">Password</label>
|
||||
<label for="inputPassword3" class="label col-sm-3 form-control-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
<input type="password" nbInput fullWidth id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
|
@ -174,7 +155,7 @@
|
|||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="offset-sm-3 col-sm-9">
|
||||
<button type="submit" class="btn btn-warning">Sign in</button>
|
||||
<button type="submit" nbButton status="warning">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,15 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.full-width {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-inline > * {
|
||||
@include nb-ltr(margin, 0 1.5rem 1.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 1.5rem 1.5rem);
|
||||
}
|
||||
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
padding-bottom: 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,55 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbCheckboxModule, NbDatepickerModule,
|
||||
NbInputModule,
|
||||
NbRadioModule, NbSelectModule,
|
||||
NbUserModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { FormsRoutingModule } from './forms-routing.module';
|
||||
import { ButtonsModule } from './buttons/buttons.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 { NbInputModule } from '@nebular/theme';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { DefaultButtonsComponent } from './buttons/default-buttons/default-buttons.component';
|
||||
import { OutlineButtonsComponent } from './buttons/outline-buttons/outline-buttons.component';
|
||||
import { HeroButtonComponent } from './buttons/hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './buttons/shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './buttons/size-buttons/size-buttons.component';
|
||||
import { ActionGroupsComponent } from './buttons/action-groups/action-groups.component';
|
||||
import { LabeledActionsGroupComponent } from './buttons/labeled-actions-group/labeled-actions-group.component';
|
||||
import { ButtonElementsComponent } from './buttons/button-elements/button-elements.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
NbInputModule,
|
||||
NbCardModule,
|
||||
NbButtonModule,
|
||||
NbActionsModule,
|
||||
NbUserModule,
|
||||
NbCheckboxModule,
|
||||
NbRadioModule,
|
||||
NbDatepickerModule,
|
||||
FormsRoutingModule,
|
||||
ButtonsModule,
|
||||
NbSelectModule,
|
||||
],
|
||||
declarations: [
|
||||
FormsComponent,
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
OutlineButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
ActionGroupsComponent,
|
||||
LabeledActionsGroupComponent,
|
||||
ButtonElementsComponent,
|
||||
FormInputsComponent,
|
||||
FormLayoutsComponent,
|
||||
DatepickerComponent,
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
@import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints';
|
||||
@import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.accordion-container {
|
||||
nb-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.accordion-container {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.accordion-container {
|
||||
nb-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.accordion-container {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.infinite-cards {
|
||||
nb-card {
|
||||
&.own-scroll {
|
||||
height: 50vh;
|
||||
}
|
||||
.infinite-cards {
|
||||
nb-card {
|
||||
&.own-scroll {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NewsService } from '../services/news.service';
|
||||
import { NewsService } from '../news.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-infinite-list',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.title-placeholder {
|
||||
|
|
@ -18,8 +18,10 @@
|
|||
height: 1.25rem;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-install-component() {
|
||||
[class$='placeholder'] {
|
||||
//background: rgba(nb-theme(layout-bg), 0.6);
|
||||
background: nb-theme(background-basic-color-4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NewsPost } from '../../services/news.service';
|
||||
import { NewsPost } from '../../news.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-news-post',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { InfiniteListComponent } from './infinite-list/infinite-list.component';
|
|||
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
|
||||
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
|
||||
import { AccordionComponent } from './accordion/accordion.component';
|
||||
import { NewsService } from './services/news.service';
|
||||
import { NewsService } from './news.service';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
:host ::ng-deep nb-stepper .step-content {
|
||||
text-align: center;
|
||||
|
||||
@include nb-install-component() {
|
||||
::ng-deep nb-stepper .step-content {
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ nb-tabset {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
::ng-deep ngx-tab1, ::ng-deep ngx-tab2 {
|
||||
:host ::ng-deep ngx-tab1, :host ::ng-deep ngx-tab2 {
|
||||
display: block;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: nb-theme(card-padding) 0 0 0;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ const routes: Routes = [{
|
|||
loadChildren: () => import('./layout/layout.module')
|
||||
.then(m => m.LayoutModule),
|
||||
},
|
||||
// {
|
||||
// path: 'forms',
|
||||
// loadChildren: () => import('./forms/forms.module')
|
||||
// .then(m => m.FormsModule),
|
||||
// },
|
||||
{
|
||||
path: 'forms',
|
||||
loadChildren: () => import('./forms/forms.module')
|
||||
.then(m => m.FormsModule),
|
||||
},
|
||||
// {
|
||||
// path: 'ui-features',
|
||||
// loadChildren: () => import('./ui-features/ui-features.module')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue