mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-10 02:14:20 +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
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
div {
|
||||
text-align: center;
|
||||
background-color: nb-theme(color-bg-active);
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
padding: 0.75rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
Eva Icons
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon" *ngFor="let icon of evaIcons">
|
||||
<i class="eva-icon-container" [nbPopover]="icon">
|
||||
<i [innerHTML]="icon | eva: { animationType: 'pulse' }"></i>
|
||||
</i>
|
||||
</div>
|
||||
<nb-icon *ngFor="let icon of evaIcons" [icon]="icon" pack="eva"></nb-icon>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<a href="https://akveo.github.io/eva-icons/" target="_blank">See all Eva Icons</a>
|
||||
|
|
@ -18,27 +14,13 @@
|
|||
</div>
|
||||
|
||||
<div class="col-md-12 col-lg-6">
|
||||
<nb-card class="nb-icons">
|
||||
<nb-card-header>
|
||||
Nebular
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon"
|
||||
*ngFor="let icon of icons.nebular">
|
||||
<i class="{{ icon }}" [nbPopover]="icon"></i>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Font awesome icons
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon"
|
||||
*ngFor="let icon of icons.fontAwesome">
|
||||
<i class="{{ icon }}" [nbPopover]="icon"></i>
|
||||
</div>
|
||||
<nb-icon *ngFor="let icon of icons.fontAwesome" [icon]="icon" pack="fa"></nb-icon>
|
||||
<nb-icon *ngFor="let icon of icons.fontAwesomeRegular" [icon]="icon" pack="far"></nb-icon>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">
|
||||
|
|
@ -52,9 +34,7 @@
|
|||
Ionicons
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="icon" *ngFor="let icon of icons.ionicons">
|
||||
<i class="{{ icon }}" [nbPopover]="icon"></i>
|
||||
</div>
|
||||
<nb-icon *ngFor="let icon of icons.ionicons" [icon]="icon" pack="ion"></nb-icon>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<a href="http://ionicons.com/" target="_blank">See all ionicons</a>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,14 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
padding: 1.25rem 0;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
|
||||
i:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.eva-icon-container {
|
||||
fill: nb-theme(card-fg-text);
|
||||
}
|
||||
|
||||
.nb-icons .icon {
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nb-icon {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
nb-card-footer {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { icons } from 'eva-icons';
|
||||
import { NbIconLibraries } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icons',
|
||||
|
|
@ -11,56 +11,43 @@ export class IconsComponent {
|
|||
|
||||
evaIcons = [];
|
||||
|
||||
constructor() {
|
||||
this.evaIcons = Object.keys(icons).filter(icon => icon.indexOf('outline') === -1);
|
||||
constructor(iconsLibrary: NbIconLibraries) {
|
||||
this.evaIcons = Array.from(iconsLibrary.getPack('eva').icons.keys())
|
||||
.filter(icon => icon.indexOf('outline') === -1);
|
||||
|
||||
iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' });
|
||||
iconsLibrary.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' });
|
||||
iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
|
||||
}
|
||||
|
||||
icons = {
|
||||
|
||||
nebular: ['nb-alert', 'nb-angle-double-left', 'nb-angle-double-right',
|
||||
'nb-arrow-down', 'nb-arrow-dropdown', 'nb-arrow-dropleft',
|
||||
'nb-arrow-dropright', 'nb-arrow-dropup', 'nb-arrow-left', 'nb-arrow-retweet', 'nb-arrow-right',
|
||||
'nb-arrow-thin-down', 'nb-arrow-thin-left', 'nb-arrow-thin-right', 'nb-arrow-thin-up',
|
||||
'nb-arrow-up', 'nb-audio', 'nb-bar-chart', 'nb-checkmark', 'nb-chevron-down',
|
||||
'nb-chevron-down-outline', 'nb-chevron-left', 'nb-chevron-left-outline', 'nb-chevron-right',
|
||||
'nb-chevron-right-outline', 'nb-chevron-up', 'nb-chevron-up-outline', 'nb-close',
|
||||
'nb-close-circled', 'nb-cloudy', 'nb-coffee-maker', 'nb-compose', 'nb-edit', 'nb-email',
|
||||
'nb-flame-circled', 'nb-gear', 'nb-grid-a', 'nb-grid-a-outline', 'nb-grid-b', 'nb-grid-b-outline',
|
||||
'nb-heart', 'nb-home', 'nb-keypad', 'nb-layout-centre', 'nb-layout-default', 'nb-layout-one-column',
|
||||
'nb-layout-sidebar-left', 'nb-layout-sidebar-right', 'nb-layout-two-column', 'nb-lightbulb',
|
||||
'nb-list', 'nb-location', 'nb-locked', 'nb-loop', 'nb-loop-circled', 'nb-menu', 'nb-notifications',
|
||||
'nb-paper-plane', 'nb-partlysunny', 'nb-pause', 'nb-pause-outline', 'nb-person', 'nb-phone',
|
||||
'nb-play', 'nb-play-outline', 'nb-plus', 'nb-plus-circled', 'nb-power', 'nb-power-circled',
|
||||
'nb-rainy', 'nb-roller-shades', 'nb-search', 'nb-shuffle', 'nb-skip-backward',
|
||||
'nb-skip-backward-outline', 'nb-skip-forward', 'nb-skip-forward-outline', 'nb-snowy-circled',
|
||||
'nb-square', 'nb-square-outline', 'nb-star', 'nb-sunny', 'nb-sunny-circled', 'nb-tables', 'nb-title',
|
||||
'nb-trash', 'nb-volume-high', 'nb-volume-mute', 'nb-drop', 'nb-drops', 'nb-info', 'nb-expand', 'nb-collapse',
|
||||
'nb-e-commerce', 'nb-danger', 'nb-checkmark-circle', 'nb-help'],
|
||||
|
||||
ionicons: [
|
||||
'ion-ionic', 'ion-arrow-right-b', 'ion-arrow-down-b', 'ion-arrow-left-b', 'ion-arrow-up-c', 'ion-arrow-right-c',
|
||||
'ion-arrow-down-c', 'ion-arrow-left-c', 'ion-arrow-return-right', 'ion-arrow-return-left', 'ion-arrow-swap',
|
||||
'ion-arrow-shrink', 'ion-arrow-expand', 'ion-arrow-move', 'ion-arrow-resize', 'ion-chevron-up',
|
||||
'ion-chevron-right', 'ion-chevron-down', 'ion-chevron-left', 'ion-navicon-round', 'ion-navicon',
|
||||
'ion-drag', 'ion-log-in', 'ion-log-out', 'ion-checkmark-round', 'ion-checkmark', 'ion-checkmark-circled',
|
||||
'ion-close-round', 'ion-plus-round', 'ion-minus-round', 'ion-information', 'ion-help',
|
||||
'ion-backspace-outline', 'ion-help-buoy', 'ion-asterisk', 'ion-alert', 'ion-alert-circled',
|
||||
'ion-refresh', 'ion-loop', 'ion-shuffle', 'ion-home', 'ion-search', 'ion-flag', 'ion-star',
|
||||
'ion-heart', 'ion-heart-broken', 'ion-gear-a', 'ion-gear-b', 'ion-toggle-filled', 'ion-toggle',
|
||||
'ion-settings', 'ion-wrench', 'ion-hammer', 'ion-edit', 'ion-trash-a', 'ion-trash-b',
|
||||
'ion-document', 'ion-document-text', 'ion-clipboard', 'ion-scissors', 'ion-funnel',
|
||||
'ion-bookmark', 'ion-email', 'ion-email-unread', 'ion-folder', 'ion-filing', 'ion-archive',
|
||||
'ion-reply', 'ion-reply-all', 'ion-forward',
|
||||
'ionic', 'arrow-right-b', 'arrow-down-b', 'arrow-left-b', 'arrow-up-c', 'arrow-right-c',
|
||||
'arrow-down-c', 'arrow-left-c', 'arrow-return-right', 'arrow-return-left', 'arrow-swap',
|
||||
'arrow-shrink', 'arrow-expand', 'arrow-move', 'arrow-resize', 'chevron-up',
|
||||
'chevron-right', 'chevron-down', 'chevron-left', 'navicon-round', 'navicon',
|
||||
'drag', 'log-in', 'log-out', 'checkmark-round', 'checkmark', 'checkmark-circled',
|
||||
'close-round', 'plus-round', 'minus-round', 'information', 'help',
|
||||
'backspace-outline', 'help-buoy', 'asterisk', 'alert', 'alert-circled',
|
||||
'refresh', 'loop', 'shuffle', 'home', 'search', 'flag', 'star',
|
||||
'heart', 'heart-broken', 'gear-a', 'gear-b', 'toggle-filled', 'toggle',
|
||||
'settings', 'wrench', 'hammer', 'edit', 'trash-a', 'trash-b',
|
||||
'document', 'document-text', 'clipboard', 'scissors', 'funnel',
|
||||
'bookmark', 'email', 'email-unread', 'folder', 'filing', 'archive',
|
||||
'reply', 'reply-all', 'forward',
|
||||
],
|
||||
|
||||
fontAwesome: [
|
||||
'fa fa-adjust', 'fa fa-anchor', 'fa fa-archive', 'fa fa-chart-area', 'fa fa-arrows-alt', 'fa fa-arrows-alt-h',
|
||||
'fa fa-arrows-alt-v', 'fa fa-asterisk', 'fa fa-at', 'fa fa-car', 'fa fa-ban', 'fa fa-university',
|
||||
'fa fa-chart-bar', 'far fa-chart-bar', 'fa fa-barcode', 'fa fa-bars', 'fa fa-bed', 'fa fa-beer',
|
||||
'fa fa-bell', 'far fa-bell', 'fa fa-bell-slash', 'far fa-bell-slash', 'fa fa-bicycle', 'fa fa-binoculars',
|
||||
'fa fa-birthday-cake', 'fa fa-bolt', 'fa fa-bomb', 'fa fa-book', 'fa fa-bookmark', 'far fa-bookmark',
|
||||
'fa fa-briefcase', 'fa fa-bug', 'fa fa-building', 'far fa-building', 'fa fa-bullhorn',
|
||||
'adjust', 'anchor', 'archive', 'chart-area', 'arrows-alt', 'arrows-alt-h',
|
||||
'arrows-alt-v', 'asterisk', 'at', 'car', 'ban', 'university',
|
||||
'chart-bar', 'barcode', 'bars', 'bed', 'beer',
|
||||
'bell', 'bell-slash', 'bicycle', 'binoculars',
|
||||
'birthday-cake', 'bolt', 'bomb', 'book', 'bookmark',
|
||||
'briefcase', 'bug', 'building', 'bullhorn',
|
||||
],
|
||||
|
||||
fontAwesomeRegular: [ 'chart-bar', 'bell', 'bell-slash', 'bookmark', 'building' ],
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,159 +1,116 @@
|
|||
<div class="row">
|
||||
<div class="col-xxxl-8">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xxl-7">
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Used Fonts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="font-row font-secondary">
|
||||
<div class="header">
|
||||
<div class="name bold">Exo</div>
|
||||
|
||||
<div class="variants">
|
||||
<span class="font-w-bold">Bold</span>
|
||||
<span class="font-w-regular">Regular</span>
|
||||
<span class="font-w-light">Light</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||||
there live the blind texts.
|
||||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="font-row font-main">
|
||||
<div class="header">
|
||||
<div class="name bold">Roboto</div>
|
||||
|
||||
<div class="variants">
|
||||
<span class="font-w-bold">Bold</span>
|
||||
<span class="font-w-regular">Regular</span>
|
||||
<span class="font-w-light">Light</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||||
there live the blind texts.
|
||||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</p>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card size="small">
|
||||
<nb-card-header>
|
||||
Article Example
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>So what's About the grammar?</h4>
|
||||
<p class="text-indent">
|
||||
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
||||
there live the blind texts.
|
||||
They live in <strong>Bookmarksgrove</strong>.
|
||||
</p>
|
||||
<p class="text-indent">
|
||||
A small <strong>river named Duden</strong> flows by their place and supplies it with the
|
||||
necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly
|
||||
into your mouth.
|
||||
Even the all-powerful Pointing has no control about the blind texts it is an almost
|
||||
unorthographic life One day however a small
|
||||
line of blind text by the name of
|
||||
<a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
|
||||
the far <strong>World of Grammar</strong>.
|
||||
</p>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6 col-xxl-5">
|
||||
<nb-card size="medium" class="headings-card">
|
||||
<nb-card-header>
|
||||
Headings
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>H1. Heading</h1>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 2.5rem (40px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h2>H2. Heading</h2>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 2rem (32px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3>H3. Heading</h3>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 1.75rem (28px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h4>H4. Heading</h4>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 1.5rem (24px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h5>H5. Heading</h5>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 1.25rem (20px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h6>H6. Heading</h6>
|
||||
</div>
|
||||
|
||||
<div class="detail font-w-light">
|
||||
Demibold 1rem (16px)
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card size="small">
|
||||
<nb-card-header>
|
||||
Blockquotes
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
|
||||
</blockquote>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
|
||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
<blockquote class="blockquote-reverse">
|
||||
<p class="mb-0">Far far away, behind the word mountains.</p>
|
||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xxxl-4">
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Used Fonts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="font-row">
|
||||
<div class="header">
|
||||
<div class="name bold">Open Sans</div>
|
||||
</div>
|
||||
<p>
|
||||
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||||
there live the blind texts.
|
||||
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||
</p>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xxxl-4">
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'xxlarge' : 'large'">
|
||||
<nb-card size="medium" class="headings-card">
|
||||
<nb-card-header>
|
||||
Headings
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>H1. Heading</h1>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 2.25rem (36px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h2>H2. Heading</h2>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 2rem (32px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3>H3. Heading</h3>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 1.875rem (30px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h4>H4. Heading</h4>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 1.625rem (26px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h5>H5. Heading</h5>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 1.375rem (22px)
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<h6>H6. Heading</h6>
|
||||
</div>
|
||||
|
||||
<div class="detail">
|
||||
800 1.125rem (18px)
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xxxl-4">
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'medium' : 'large'">
|
||||
<nb-card-header>
|
||||
Article Example
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>So what's About the grammar?</h4>
|
||||
<p>
|
||||
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
||||
there live the blind texts.
|
||||
They live in <strong>Bookmarksgrove</strong>.
|
||||
</p>
|
||||
<p>
|
||||
A small <strong>river named Duden</strong> flows by their place and supplies it with the
|
||||
necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly
|
||||
into your mouth.
|
||||
Even the all-powerful Pointing has no control about the blind texts it is an almost
|
||||
unorthographic life One day however a small
|
||||
line of blind text by the name of
|
||||
<a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
|
||||
the far <strong>World of Grammar</strong>.
|
||||
</p>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xxxl-4">
|
||||
<nb-card size="large">
|
||||
<nb-card-header>
|
||||
Font Colors
|
||||
</nb-card-header>
|
||||
|
|
@ -187,38 +144,38 @@
|
|||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-primary">
|
||||
<div class="color bg-primary"></div>
|
||||
<div class="item text-status-primary">
|
||||
<div class="color bg-status-primary"></div>
|
||||
<div>
|
||||
<h5 class="text-primary">Primary Text</h5>
|
||||
<h5 class="text-status-primary">Primary Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-success">
|
||||
<div class="color bg-success"></div>
|
||||
<div class="item text-status-success">
|
||||
<div class="color bg-status-success"></div>
|
||||
<div>
|
||||
<h5 class="text-success">Success Text</h5>
|
||||
<h5 class="text-status-success">Success Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-info">
|
||||
<div class="color bg-info"></div>
|
||||
<div class="item text-status-info">
|
||||
<div class="color bg-status-info"></div>
|
||||
<div>
|
||||
<h5 class="text-info">Info Text</h5>
|
||||
<h5 class="text-status-info">Info Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-warning">
|
||||
<div class="color bg-warning"></div>
|
||||
<div class="item text-status-warning">
|
||||
<div class="color bg-status-warning"></div>
|
||||
<div>
|
||||
<h5 class="text-warning">Warning Text</h5>
|
||||
<h5 class="text-status-warning">Warning Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-danger">
|
||||
<div class="color bg-danger"></div>
|
||||
<div class="item text-status-danger">
|
||||
<div class="color bg-status-danger"></div>
|
||||
<div>
|
||||
<h5 class="text-danger">Danger Text</h5>
|
||||
<h5 class="text-status-danger">Danger Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -233,49 +190,24 @@
|
|||
Alerts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
<div class="alert alert-hint" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-xxxl-4">
|
||||
<nb-card size="large">
|
||||
<nb-card-header>
|
||||
Text Types
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<h4>Highlighted text</h4>
|
||||
<p class="mb-5">
|
||||
Far far away, behind the word mountains, far from the countries
|
||||
Vokalia and <mark>Consonantia, there live the blind texts.</mark>
|
||||
</p>
|
||||
<h4>Bold Text</h4>
|
||||
<p class="mb-5">
|
||||
Far far away, behind the word mountains, far from the countries
|
||||
Vokalia and <strong>Consonantia, there live the blind texts.</strong>
|
||||
</p>
|
||||
<h4>Link Text</h4>
|
||||
<p class="mb-5">
|
||||
Far far away, behind the word mountains, far from the countries
|
||||
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
|
||||
</p>
|
||||
<nb-alert>
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</nb-alert>
|
||||
<nb-alert status="primary">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</nb-alert>
|
||||
<nb-alert status="success">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</nb-alert>
|
||||
<nb-alert status="info">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</nb-alert>
|
||||
<nb-alert status="warning">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</nb-alert>
|
||||
<nb-alert status="danger">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,17 +2,6 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
.font-secondary .font-header .name {
|
||||
font-size: 4.5rem;
|
||||
line-height: 4rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-main .font-header .name {
|
||||
font-size: 3rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.font-row {
|
||||
&:first-child {
|
||||
margin-bottom: 2rem;
|
||||
|
|
@ -28,15 +17,15 @@
|
|||
}
|
||||
|
||||
.headings-card {
|
||||
nb-card-body {
|
||||
padding: 1rem 1.25rem;
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: 0.675rem;
|
||||
margin-bottom: 0.675rem;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -48,13 +37,10 @@
|
|||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
color: nb-theme(color-fg-heading);
|
||||
border-bottom: 1px solid nb-theme(divider-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
|
|
@ -78,16 +64,12 @@
|
|||
span {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,10 +101,43 @@
|
|||
}
|
||||
|
||||
.text-link {
|
||||
color: nb-theme(link-color);
|
||||
color: nb-theme(link-text-color);
|
||||
}
|
||||
|
||||
.bg-link {
|
||||
background: nb-theme(link-color);
|
||||
background: nb-theme(link-text-color);
|
||||
}
|
||||
|
||||
.bg-heading {
|
||||
background: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
.bg-body {
|
||||
background: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
.bg-hint {
|
||||
background: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
.text-hint {
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
.bg-link {
|
||||
background: nb-theme(link-text-color);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: nb-theme(link-text-color);
|
||||
}
|
||||
|
||||
@each $status in nb-get-statuses() {
|
||||
.bg-status-#{$status} {
|
||||
background: nb-theme(text-#{$status}-color);
|
||||
}
|
||||
.text-status-#{$status} {
|
||||
color: nb-theme(text-#{$status}-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||
|
|
@ -18,6 +19,11 @@ const components = [
|
|||
|
||||
@NgModule({
|
||||
imports: [
|
||||
NbCardModule,
|
||||
NbPopoverModule,
|
||||
NbSearchModule,
|
||||
NbIconModule,
|
||||
NbAlertModule,
|
||||
ThemeModule,
|
||||
UiFeaturesRoutingModule,
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue