mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-28 12:16:10 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -3,108 +3,83 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Project">
|
||||
</div>
|
||||
<div class="row full-name-inputs">
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Nick">
|
||||
</div>
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" nbInput fullWidth fieldSize="medium" placeholder="Medium Input">
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" nbInput fullWidth fieldSize="large" placeholder="Large Input">
|
||||
<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>
|
||||
<div class="form-group">
|
||||
<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">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="warning" placeholder="Input with Danger">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" nbInput fullWidth status="danger" placeholder="Input with Danger">
|
||||
</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>
|
||||
<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>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes 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">
|
||||
<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-disabled-checkbox-radio col-sm-4">
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,26 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
padding-top: 0;
|
||||
|
||||
@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;
|
||||
}
|
||||
> * {
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue