mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-21 21:40:49 +02:00
refactor(theme): theme refactor, buttons, toaster, preloader
This commit is contained in:
Dmitry Nehaychik
parent
d5f69647aa
commit
59ef144716
77 changed files with 1324 additions and 954 deletions
|
|
@ -40,6 +40,7 @@
|
|||
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
|
||||
"@swimlane/ngx-charts": "5.2.0",
|
||||
"angular2-echarts": "1.1.7",
|
||||
"angular2-toaster": "^4.0.0",
|
||||
"bootstrap": "4.0.0-alpha.6",
|
||||
"chart.js": "2.5.0",
|
||||
"ckeditor": "4.6.2",
|
||||
|
|
@ -59,8 +60,10 @@
|
|||
"normalize.css": "6.0.0",
|
||||
"roboto-fontface": "0.7.0",
|
||||
"rxjs": "5.4.0",
|
||||
"segoe-fonts": "1.0.1",
|
||||
"tether": "1.4.0",
|
||||
"tinymce": "4.5.7",
|
||||
"typeface-exo": "0.0.22",
|
||||
"web-animations-js": "2.2.5",
|
||||
"zone.js": "0.8.10"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
@mixin base-footer-theme($theme-name) {
|
||||
/deep/ base-footer {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@mixin base-header-theme($theme-name) {
|
||||
/deep/ header {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@mixin search-input-theme($theme-name) {
|
||||
/deep/ search-input {
|
||||
input {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,4 +24,10 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ search-input {
|
||||
input {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
@import '../components/header/header.component.theme';
|
||||
@import '../components/search-input/search-input.component.theme';
|
||||
@import '../components/footer/footer.component.theme';
|
||||
|
||||
// TODO: probably move this file into the components folder?
|
||||
|
||||
@mixin custom-components-theme($theme-name) {
|
||||
@include base-header-theme($theme-name);
|
||||
@include base-footer-theme($theme-name);
|
||||
@include search-input-theme($theme-name);
|
||||
}
|
||||
114
src/app/@theme/styles/cosmic/_buttons.scss
Normal file
114
src/app/@theme/styles/cosmic/_buttons.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
@mixin btn-component($bevel-bd, $glow) {
|
||||
.btn-bevel-border {
|
||||
box-shadow: 0 3px 0 0 $bevel-bd;
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
|
||||
}
|
||||
|
||||
.btn-glow {
|
||||
box-shadow: 0 2px 12px 0 $glow;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hero-container {
|
||||
padding-right: 0;
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn-components-container {
|
||||
.btn-component {
|
||||
display: flex;
|
||||
|
||||
.btn-gradient,
|
||||
.btn-border,
|
||||
.btn-bevel-border,
|
||||
.btn-shadow,
|
||||
.btn-glow {
|
||||
width: $btn-component-size;
|
||||
height: $btn-component-size;
|
||||
border-radius: $btn-component-bd-radius;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-component-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
height: $btn-component-size;
|
||||
}
|
||||
|
||||
.btn-component-header {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-component-subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-container {
|
||||
.btn-gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
|
||||
}
|
||||
|
||||
&.warning-container {
|
||||
.btn-gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
|
||||
}
|
||||
|
||||
&.success-container {
|
||||
.btn-gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-success-bevel-bd, $btn-success-glow);
|
||||
}
|
||||
|
||||
&.info-container {
|
||||
.btn-gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-info-bevel-bd, $btn-info-glow);
|
||||
}
|
||||
|
||||
&.danger-container {
|
||||
.btn-gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
|
||||
}
|
||||
|
||||
&.default-container {
|
||||
.btn-border {
|
||||
color: $btn-default-color;
|
||||
border: $btn-default-border-width solid $btn-default-border;
|
||||
}
|
||||
|
||||
@include btn-component($btn-default-bevel-bd, $btn-default-glow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
@mixin nga-layout-override($theme-name) {;
|
||||
@mixin ngx-layout-theme($theme-name) {
|
||||
|
||||
// TODO: refactor this
|
||||
/deep/ .layout {
|
||||
.layout {
|
||||
|
||||
nga-layout-header > nav {
|
||||
|
||||
|
|
@ -56,4 +55,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-menu {
|
||||
> ul > li:first-child {
|
||||
a {
|
||||
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
|
||||
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
|
||||
margin: 1rem;
|
||||
border-radius: $nga-radius;
|
||||
height: 3.5rem;
|
||||
color: $nga-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/app/@theme/styles/cosmic/_misc.scss
Normal file
15
src/app/@theme/styles/cosmic/_misc.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../components';
|
||||
@import 'variables';
|
||||
|
||||
@import '~@nga/theme/styles/themes/nga.theme.cosmic';
|
||||
@import 'overrides/all';
|
||||
|
||||
$theme-name: 'cosmic';
|
||||
|
||||
// @nga/theme module styles
|
||||
@include nga-theme($theme-name) {
|
||||
@include nga-theme-overrides($theme-name);
|
||||
@include custom-components-theme($theme-name);
|
||||
}
|
||||
|
||||
// @nga/bootstrap module styles
|
||||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
@include nga-bootstrap($theme-name);
|
||||
|
||||
// @nga/maps module styles
|
||||
@import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
|
||||
@include nga-maps($theme-name);
|
||||
|
||||
// @nga/typography module styles
|
||||
@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
|
||||
@include nga-typography($theme-name);
|
||||
|
||||
// @nga/charts module styles
|
||||
@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
|
||||
@include nga-charts($theme-name);
|
||||
|
||||
// @nga/components module styles
|
||||
@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
|
||||
@include nga-components($theme-name);
|
||||
|
||||
// @nga/tables module styles
|
||||
@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
|
||||
@include nga-tables($theme-name);
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@mixin nga-menu-override($theme-name) {
|
||||
/deep/ nga-menu {
|
||||
> ul > li:first-child {
|
||||
a {
|
||||
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
|
||||
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
|
||||
margin: 1rem;
|
||||
border-radius: $nga-radius;
|
||||
height: 3.5rem;
|
||||
color: $nga-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import 'nga-layout';
|
||||
@import 'nga-menu';
|
||||
|
||||
@mixin nga-theme-overrides($theme-name) {
|
||||
@include nga-layout-override($theme-name);
|
||||
@include nga-menu-override($theme-name);
|
||||
}
|
||||
21
src/app/@theme/styles/cosmic/theme.scss
Normal file
21
src/app/@theme/styles/cosmic/theme.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'cosmic';
|
||||
|
||||
@import '~@nga/theme/styles/themes/cosmic/theme';
|
||||
@import './layout';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-layout-theme($nga-theme);
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/cosmic/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
114
src/app/@theme/styles/default/_buttons.scss
Normal file
114
src/app/@theme/styles/default/_buttons.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
@mixin btn-component($bevel-bd, $glow) {
|
||||
.btn-bevel-border {
|
||||
box-shadow: 0 3px 0 0 $bevel-bd;
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
|
||||
}
|
||||
|
||||
.btn-glow {
|
||||
box-shadow: 0 2px 12px 0 $glow;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hero-container {
|
||||
padding-right: 0;
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn-components-container {
|
||||
.btn-component {
|
||||
display: flex;
|
||||
|
||||
.btn-gradient,
|
||||
.btn-border,
|
||||
.btn-bevel-border,
|
||||
.btn-shadow,
|
||||
.btn-glow {
|
||||
width: $btn-component-size;
|
||||
height: $btn-component-size;
|
||||
border-radius: $btn-component-bd-radius;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-component-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
height: $btn-component-size;
|
||||
}
|
||||
|
||||
.btn-component-header {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-component-subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-container {
|
||||
.btn-gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
|
||||
}
|
||||
|
||||
&.warning-container {
|
||||
.btn-gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
|
||||
}
|
||||
|
||||
&.success-container {
|
||||
.btn-gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-success-bevel-bd, $btn-success-glow);
|
||||
}
|
||||
|
||||
&.info-container {
|
||||
.btn-gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-info-bevel-bd, $btn-info-glow);
|
||||
}
|
||||
|
||||
&.danger-container {
|
||||
.btn-gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
|
||||
}
|
||||
|
||||
&.default-container {
|
||||
.btn-border {
|
||||
color: $btn-default-color;
|
||||
border: $btn-default-border-width solid $btn-default-border;
|
||||
}
|
||||
|
||||
@include btn-component($btn-default-bevel-bd, $btn-default-glow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/app/@theme/styles/default/_misc.scss
Normal file
15
src/app/@theme/styles/default/_misc.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../components';
|
||||
@import 'overrides/all';
|
||||
|
||||
@import '~@nga/theme/styles/themes/nga.theme.default';
|
||||
|
||||
$theme-name: 'default';
|
||||
|
||||
// @nga/theme module styles
|
||||
@include nga-theme($theme-name) {
|
||||
@include nga-theme-overrides($theme-name);
|
||||
@include custom-components-theme($theme-name);
|
||||
}
|
||||
|
||||
// @nga/bootstrap module styles
|
||||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
@include nga-bootstrap($theme-name);
|
||||
|
||||
// @nga/maps module styles
|
||||
@import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
|
||||
@include nga-maps($theme-name);
|
||||
|
||||
// @nga/typography module styles
|
||||
@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
|
||||
@include nga-typography($theme-name);
|
||||
|
||||
// @nga/charts module styles
|
||||
@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
|
||||
@include nga-charts($theme-name);
|
||||
|
||||
// @nga/components module styles
|
||||
@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
|
||||
@include nga-components($theme-name);
|
||||
|
||||
// @nga/tables module styles
|
||||
@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
|
||||
@include nga-tables($theme-name);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@mixin nga-theme-overrides($theme-name) {
|
||||
}
|
||||
19
src/app/@theme/styles/default/theme.scss
Normal file
19
src/app/@theme/styles/default/theme.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'default';
|
||||
|
||||
@import '~@nga/theme/styles/themes/default/theme';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/default/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
114
src/app/@theme/styles/light/_buttons.scss
Normal file
114
src/app/@theme/styles/light/_buttons.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
@mixin ngx-buttons-theme($theme-name) {
|
||||
|
||||
$btn-component-size: 50px;
|
||||
$btn-component-bd-radius: 12px;
|
||||
|
||||
@mixin btn-component($bevel-bd, $glow) {
|
||||
.btn-bevel-border {
|
||||
box-shadow: 0 3px 0 0 $bevel-bd;
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: 0 4px 10px 0 $nga-color-gradient-shadow;
|
||||
}
|
||||
|
||||
.btn-glow {
|
||||
box-shadow: 0 2px 12px 0 $glow;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-hero-container {
|
||||
padding-right: 0;
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.container-btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.btn-components-container {
|
||||
.btn-component {
|
||||
display: flex;
|
||||
|
||||
.btn-gradient,
|
||||
.btn-border,
|
||||
.btn-bevel-border,
|
||||
.btn-shadow,
|
||||
.btn-glow {
|
||||
width: $btn-component-size;
|
||||
height: $btn-component-size;
|
||||
border-radius: $btn-component-bd-radius;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn-component-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
height: $btn-component-size;
|
||||
}
|
||||
|
||||
.btn-component-header {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-component-subheader {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary-container {
|
||||
.btn-gradient {
|
||||
@include primary-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-primary-bevel-bd, $btn-primary-glow);
|
||||
}
|
||||
|
||||
&.warning-container {
|
||||
.btn-gradient {
|
||||
@include warning-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-warning-bevel-bd, $btn-warning-glow);
|
||||
}
|
||||
|
||||
&.success-container {
|
||||
.btn-gradient {
|
||||
@include success-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-success-bevel-bd, $btn-success-glow);
|
||||
}
|
||||
|
||||
&.info-container {
|
||||
.btn-gradient {
|
||||
@include info-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-info-bevel-bd, $btn-info-glow);
|
||||
}
|
||||
|
||||
&.danger-container {
|
||||
.btn-gradient {
|
||||
@include danger-gradient();
|
||||
}
|
||||
|
||||
@include btn-component($btn-danger-bevel-bd, $btn-danger-glow);
|
||||
}
|
||||
|
||||
&.default-container {
|
||||
.btn-border {
|
||||
color: $btn-default-color;
|
||||
border: $btn-default-border-width solid $btn-default-border;
|
||||
}
|
||||
|
||||
@include btn-component($btn-default-bevel-bd, $btn-default-glow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/app/@theme/styles/light/_misc.scss
Normal file
15
src/app/@theme/styles/light/_misc.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@mixin ngx-misc-theme($theme-name) {
|
||||
agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '../components';
|
||||
@import 'overrides/all';
|
||||
|
||||
@import '~@nga/theme/styles/themes/nga.theme.light';
|
||||
|
||||
$theme-name: 'light';
|
||||
|
||||
// @nga/theme module styles
|
||||
@include nga-theme($theme-name) {
|
||||
@include nga-theme-overrides($theme-name);
|
||||
@include custom-components-theme($theme-name);
|
||||
}
|
||||
|
||||
// @nga/bootstrap module styles
|
||||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
@include nga-bootstrap($theme-name);
|
||||
|
||||
// @nga/maps module styles
|
||||
@import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
|
||||
@include nga-maps($theme-name);
|
||||
|
||||
// @nga/typography module styles
|
||||
@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
|
||||
@include nga-typography($theme-name);
|
||||
|
||||
// @nga/charts module styles
|
||||
@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
|
||||
@include nga-charts($theme-name);
|
||||
|
||||
// @nga/components module styles
|
||||
@import '~@nga/theme/overrides/components/styles/themes/nga.theme.default';
|
||||
@include nga-components($theme-name);
|
||||
|
||||
// @nga/tables module styles
|
||||
@import '~@nga/theme/overrides/tables/styles/themes/nga.theme.default';
|
||||
@include nga-tables($theme-name);
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@mixin nga-theme-overrides($theme-name) {
|
||||
}
|
||||
19
src/app/@theme/styles/light/theme.scss
Normal file
19
src/app/@theme/styles/light/theme.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
$nga-theme: 'light';
|
||||
|
||||
@import '~@nga/theme/styles/themes/light/theme';
|
||||
@import './buttons';
|
||||
@import './misc';
|
||||
|
||||
@include nga-theme-install($nga-theme) {
|
||||
@include ngx-buttons-theme($nga-theme);
|
||||
@include ngx-misc-theme($nga-theme);
|
||||
};
|
||||
|
||||
@import '~@nga/auth/styles/themes/light/theme';
|
||||
@include nga-auth-install($nga-theme);
|
||||
|
|
@ -22,7 +22,6 @@ import { AppRoutingModule } from './app-routing.module';
|
|||
HttpModule,
|
||||
AppRoutingModule,
|
||||
CoreModule,
|
||||
PagesModule,
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
/deep/ .echart {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,20 @@ import { Routes, RouterModule } from '@angular/router';
|
|||
|
||||
import { ComponentsComponent } from './components.component';
|
||||
import { TreeComponent } from './tree/tree.component';
|
||||
import { ToasterComponent } from './toaster/toaster.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: ComponentsComponent,
|
||||
children: [{
|
||||
children: [
|
||||
{
|
||||
path: 'tree',
|
||||
component: TreeComponent,
|
||||
}],
|
||||
}, {
|
||||
path: 'toaster',
|
||||
component: ToasterComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -22,4 +28,5 @@ export class ComponentsRoutingModule { }
|
|||
export const routedComponents = [
|
||||
ComponentsComponent,
|
||||
TreeComponent,
|
||||
ToasterComponent,
|
||||
];
|
||||
|
|
|
|||
56
src/app/pages/components/toaster/toaster.component.html
Normal file
56
src/app/pages/components/toaster/toaster.component.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<nga-card>
|
||||
<nga-card-header>
|
||||
Toaster configuration
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<toaster-container [toasterconfig]="config"></toaster-container>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Place to show toast:</label>
|
||||
<select class="form-control" [(ngModel)]="position" name="position">
|
||||
<option *ngFor="let position of positions" [ngValue]="position">{{position}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Animation type:</label>
|
||||
<select class="form-control" [(ngModel)]="animationType"name="animation">
|
||||
<option *ngFor="let type of animations" [ngValue]="type">{{type}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Title:</label>
|
||||
<input class="form-control" [(ngModel)]="title" name="title">
|
||||
</div>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Content:</label>
|
||||
<input class="form-control" [(ngModel)]="content" name="content">
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Time to hide toast, ms. 0 to persistent toast:</label><input class="form-control" type="number" [(ngModel)]="timeout"name="timeout">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Limit number of toasts:</label><input class="form-control" type="number" [(ngModel)]="toastsLimit" name="limit">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label">Toast type:</label>
|
||||
<select class="form-control" [(ngModel)]="type" name="type">
|
||||
<option *ngFor="let type of types" [ngValue]="type">{{type}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isNewestOnTop" name="onTop">Newest on top</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isHideOnClick"name="hideOnClick">Hide on click</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isDuplicatesPrevented" name="noDupl">Prevent arising of duplicate toast</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-control-label"><input type="checkbox" [(ngModel)]="isCloseButton" name="closeBtn">Close button</label>
|
||||
</div>
|
||||
<button class="btn btn-default" (click)="makeToast()">Show toast</button>
|
||||
<button class="btn btn-default" (click)="clearToasts()">Clear all toasts</button>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
3
src/app/pages/components/toaster/toaster.component.scss
Normal file
3
src/app/pages/components/toaster/toaster.component.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
input[type='checkbox'] {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
52
src/app/pages/components/toaster/toaster.component.ts
Normal file
52
src/app/pages/components/toaster/toaster.component.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ToasterService, ToasterConfig, Toast } from 'angular2-toaster';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-toasters',
|
||||
styleUrls: ['toaster.component.scss'],
|
||||
templateUrl: 'toaster.component.html',
|
||||
})
|
||||
export class ToasterComponent {
|
||||
constructor(private toasterService: ToasterService) {}
|
||||
|
||||
title: string = 'HI there!';
|
||||
content: string = `I'm cool toaster!`;
|
||||
type: string = 'default';
|
||||
isCloseButton: boolean = true;
|
||||
config: ToasterConfig;
|
||||
|
||||
isHideOnClick: boolean = true;
|
||||
isNewestOnTop: boolean = true;
|
||||
toastsLimit: number = 5;
|
||||
position: string = 'toast-bottom-right';
|
||||
timeout: number = 5000;
|
||||
isDuplicatesPrevented: boolean = false;
|
||||
animationType: string = 'fade';
|
||||
types: string[] = ['default', 'info', 'wait', 'success', 'warning', 'error'];
|
||||
animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
|
||||
positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
|
||||
'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];
|
||||
|
||||
makeToast() {
|
||||
this.config = new ToasterConfig({
|
||||
positionClass: this.position,
|
||||
timeout: this.timeout,
|
||||
newestOnTop: this.isNewestOnTop,
|
||||
preventDuplicates: this.isDuplicatesPrevented,
|
||||
animation: this.animationType,
|
||||
limit: this.toastsLimit,
|
||||
});
|
||||
const toast: Toast = {
|
||||
type: this.type,
|
||||
title: this.title,
|
||||
body: this.content,
|
||||
timeout: this.timeout,
|
||||
showCloseButton: this.isCloseButton,
|
||||
};
|
||||
this.toasterService.popAsync(toast);
|
||||
}
|
||||
|
||||
clearToasts() {
|
||||
this.toasterService.clear();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
nga-card {
|
||||
nga-card-body {
|
||||
/deep/ agm-map {
|
||||
.agm-map-container-inner {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-gmaps',
|
||||
styleUrls: ['./gmaps.component.scss'],
|
||||
templateUrl: './gmaps.component.html',
|
||||
})
|
||||
export class GmapsComponent {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,3 @@
|
|||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
nga-card {
|
||||
nga-card-body {
|
||||
.leaflet-container {
|
||||
height: calc(#{$nga-card-height-xmedium} - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { NgaMenuItem } from '@nga/theme';
|
|||
|
||||
import { List } from 'immutable';
|
||||
|
||||
// TODO: refactor array styles
|
||||
export const menuItems: List<NgaMenuItem> = List([{
|
||||
title: 'Dashboard',
|
||||
icon: 'ion ion-ios-home-outline',
|
||||
|
|
@ -32,7 +33,7 @@ export const menuItems: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Animated Searches',
|
||||
link: '/pages/ui-features/search-fields',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
link: '/pages/ui-features/tabs',
|
||||
|
|
@ -40,10 +41,15 @@ export const menuItems: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Components',
|
||||
icon: 'ion ion-ios-gear-outline',
|
||||
children: List<NgaMenuItem>([{
|
||||
title: 'Tree',
|
||||
link: '/pages/components/tree',
|
||||
}]),
|
||||
children: List<NgaMenuItem>([
|
||||
{
|
||||
title: 'Tree',
|
||||
link: '/pages/components/tree',
|
||||
}, {
|
||||
title: 'Toaster',
|
||||
link: '/pages/components/toaster',
|
||||
},
|
||||
]),
|
||||
}, {
|
||||
title: 'Maps',
|
||||
icon: 'ion ion-ios-location-outline',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss';
|
||||
import 'style-loader!../@theme/styles/light/light.theme.scss';
|
||||
import 'style-loader!../@theme/styles/default/default.theme.scss';
|
||||
import 'style-loader!../@theme/styles/cosmic/theme.scss';
|
||||
import 'style-loader!../@theme/styles/light/theme.scss';
|
||||
import 'style-loader!../@theme/styles/default/theme.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-pages',
|
||||
|
|
|
|||
|
|
@ -1,85 +1,33 @@
|
|||
<div class="row">
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Flat buttons
|
||||
</nga-card-header>
|
||||
<nga-card-header>Hero Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Raised buttons
|
||||
</nga-card-header>
|
||||
<nga-card-header>Button Shapes</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Different sizes
|
||||
</nga-card-header>
|
||||
<nga-card-header>Button Sizes</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-sized-buttons class="button-panel df-size-button-panel"></ngx-sized-buttons>
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-3 col-md-3">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Disabled
|
||||
</nga-card-header>
|
||||
<nga-card-header>Default Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Icon buttons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-icon-buttons></ngx-icon-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Button dropdowns
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Large buttons
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-large-buttons class="large-buttons-panel"></ngx-large-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-6 col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
Button groups
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-group-buttons></ngx-group-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,164 +1,9 @@
|
|||
:host {
|
||||
:host /deep/ {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
|
||||
/deep/ {
|
||||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
|
||||
&.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: 0 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;
|
||||
|
||||
span {
|
||||
.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
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;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
&.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,4 @@ import { Component } from '@angular/core';
|
|||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
|
|||
31
src/app/pages/ui-features/buttons/buttons.module.ts
Normal file
31
src/app/pages/ui-features/buttons/buttons.module.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { SharedModule } from '../../../shared.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';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<div class="row">
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<span>Primary Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-demo">Primary</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-primary btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>#7659ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-primary btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-primary btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<span>Warning Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-warning btn-demo">Warning</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-warning btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>#ffcb17</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-warning btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-warning btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4">
|
||||
<div class="btn-container-title">
|
||||
<span>Success Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-demo">Success</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-success btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>#00d977</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-success btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-success btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4 col-sm-6 col-6">
|
||||
<div class="btn-container-title">
|
||||
<span>Info Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-info btn-demo">Info</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-info btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>#0088ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-info btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-info btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4 col-sm-6 col-6">
|
||||
<div class="btn-container-title">
|
||||
<span>Danger Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-danger btn-demo">Danger</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-danger btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>#ff386a</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-danger btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-danger btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-default-container col-md-4 col-sm-6 col-6">
|
||||
<div class="btn-container-title">
|
||||
<span>Default Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-demo">Default</button>
|
||||
</div>
|
||||
<div class="btn-details-container">
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-empty"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Default</span>
|
||||
<span>transparent</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-empty hover"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hover</span>
|
||||
<span>20% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-details-item">
|
||||
<div>
|
||||
<button class="btn btn-empty active"></button>
|
||||
</div>
|
||||
<div>
|
||||
<span>Active</span>
|
||||
<span>20% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
$btn-empty-size: 50px;
|
||||
|
||||
.btn-empty {
|
||||
height: $btn-empty-size !important;
|
||||
width: $btn-empty-size !important;
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.btn-default-container {
|
||||
.btn-container-title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.btn-details-container {
|
||||
margin-top: 24px;
|
||||
|
||||
.btn-details-item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 17px;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<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,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-disabled-buttons',
|
||||
templateUrl: './disabled.component.html',
|
||||
})
|
||||
export class DisabledButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle>
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-success" ngbDropdownToggle>
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-info" ngbDropdownToggle>
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-default" ngbDropdownToggle>
|
||||
Default
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-warning" ngbDropdownToggle>
|
||||
Warning
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<div class="btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-danger" ngbDropdownToggle>
|
||||
Danger
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="panel-subtitle">Split button dropdowns</h5>
|
||||
|
||||
<div class="row btns-row">
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-default">Default</button>
|
||||
<button type="button" class="btn btn-default" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6 col-lg-4 col-md-6">
|
||||
<div class="btn-group flex-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger" ngbDropdownToggle>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-item"><a href="#">Action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Another action</a></li>
|
||||
<li class="dropdown-item"><a href="#">Something else here</a></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-item"><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dropdown-buttons',
|
||||
templateUrl: './dropdown.component.html',
|
||||
})
|
||||
export class DropdownButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<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,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-flat-buttons',
|
||||
templateUrl: './flat.component.html',
|
||||
})
|
||||
export class FlatButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<div class="btn-group-example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-danger">Left</button>
|
||||
<button type="button" class="btn btn-danger">Middle</button>
|
||||
<button type="button" class="btn btn-danger">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar-example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-group-buttons',
|
||||
templateUrl: './group.component.html',
|
||||
})
|
||||
export class GroupButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<div class="row">
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Primary Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-primary btn-primary-hero btn-demo">Primary</button>
|
||||
</div>
|
||||
<div class="btn-components-container primary-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Warning Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-warning btn-warning-hero btn-demo">Warning</button>
|
||||
</div>
|
||||
<div class="btn-components-container warning-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Success Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-success btn-success-hero btn-demo">Success</button>
|
||||
</div>
|
||||
<div class="btn-components-container success-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Info Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-info btn-info-hero btn-demo">Info</button>
|
||||
</div>
|
||||
<div class="btn-components-container info-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Danger Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-danger btn-danger-hero btn-demo">Danger</button>
|
||||
</div>
|
||||
<div class="btn-components-container danger-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-gradient"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Linear Gradient</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 3px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-hero-container col-md-2">
|
||||
<div class="container-title">
|
||||
<span>Ghost Button</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn btn-hero btn-demo">Ghost</button>
|
||||
</div>
|
||||
<div class="btn-components-container default-container">
|
||||
<div class="btn-component">
|
||||
<div class="btn-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Border</span>
|
||||
<span class="btn-component-subheader">to right, #7659ff, #ac63ff</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-bevel-border"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Bevel Border</span>
|
||||
<span class="btn-component-subheader">0 2px 0 0</span>
|
||||
<span class="btn-component-subheader">#6938c9</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-shadow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Shadow</span>
|
||||
<span class="btn-component-subheader">0 4px 10px 0</span>
|
||||
<span class="btn-component-subheader">rgba (6, 7, 64, 0.5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-component">
|
||||
<div class="btn-glow"></div>
|
||||
<div class="btn-component-details">
|
||||
<span class="btn-component-header">Glow</span>
|
||||
<span class="btn-component-subheader">0 2px 12px 0</span>
|
||||
<span class="btn-component-subheader">rgba (137, 66, 254, 0.8)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent {
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-icon"><i class="ion-android-download"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="ion-stats-bars"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-icon"><i class="ion-android-checkmark-circle"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-icon"><i class="ion-information"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-icon"><i class="ion-android-warning"></i></button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-icon"><i class="ion-nuclear"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h5 class="panel-subtitle">Buttons with icons</h5>
|
||||
|
||||
<ul class="btn-list clearfix">
|
||||
<li>
|
||||
<button type="button" class="btn btn-primary btn-with-icon"><i class="ion-android-download"></i>Primary</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-default btn-with-icon"><i class="ion-stats-bars"></i>Default</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-success btn-with-icon"><i class="ion-android-checkmark-circle"></i>Success
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-info btn-with-icon"><i class="ion-information"></i>Info</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-warning btn-with-icon"><i class="ion-android-warning"></i>Warning</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn-danger btn-with-icon"><i class="ion-nuclear"></i>Danger</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icon-buttons',
|
||||
templateUrl: './icon.component.html',
|
||||
})
|
||||
export class IconButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<div class="row btns-row btns-same-width-lg">
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-primary btn-lg">Primary</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-success btn-lg">Success</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-info btn-lg">Info</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-default btn-lg">Default</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-warning btn-lg">Warning</button>
|
||||
</div>
|
||||
<div class="col-sm-4 col-6">
|
||||
<button type="button" class="btn btn-danger btn-lg">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-large-buttons',
|
||||
templateUrl: './large.component.html',
|
||||
})
|
||||
export class LargeButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<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,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-raised-buttons',
|
||||
templateUrl: './raised.component.html',
|
||||
})
|
||||
export class RaisedButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-rectangle btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-semi-round btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-shape-name">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="btn-shape-details">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-round btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.btn-shape-name {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.btn-shape-details {
|
||||
margin-bottom: 19px;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<div class="row">
|
||||
<div class="btn-size-container col-md-4">
|
||||
<div>
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>1.25rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-3">
|
||||
<div>
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>1rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-3">
|
||||
<div>
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0.875rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-size-container col-md-2">
|
||||
<div>
|
||||
<span>Tiny Button</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>0.625rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-tn">Tiny</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.btn-size-container {
|
||||
div:nth-child(1) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
color: #ffffff;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<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,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-sized-buttons',
|
||||
templateUrl: './sized.component.html',
|
||||
})
|
||||
export class SizedButtonsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -158,74 +158,3 @@
|
|||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header></nga-card-header>
|
||||
<nga-card-body>
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="assets/img/typography/banner.png" alt="" />
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Columns</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="assets/img/typography/typo03.png" alt="" title="" />
|
||||
</div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a href>dapibus</a> magna rutrum.
|
||||
Ornare neque suspendisse <a href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a href>felis amet eu</a>.
|
||||
Congue magna elit quisque quia, nullam justo sagittis, ante erat libero placerat, proin condimentum consectetuer
|
||||
lacus. Velit condimentum velit, sed penatibus arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="assets/img/typography/typo01.png" alt="" title="" />
|
||||
</div>
|
||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum lobortis
|
||||
purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet fusce, ullamcorper
|
||||
debitis primis arcu tellus vestibulum ac.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
<div class="img-wrapper"><img src="assets/img/typography/typo04.png" alt="" /></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna maecenas
|
||||
</p>
|
||||
<a href class="learn-more">Learn more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
<div class="img-wrapper"><img src="assets/img/typography/typo05.png" alt="" /></div>
|
||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in velit
|
||||
</p>
|
||||
<a href class="learn-more">Learn more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
<div class="img-wrapper"><img src="assets/img/typography/typo06.png" alt="" /></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,39 +3,23 @@ import { NgaTabsetModule, NgaRouteTabsetModule, NgaSearchModule } from '@nga/the
|
|||
|
||||
import { SharedModule } from '../../shared.module';
|
||||
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
|
||||
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||
import { UiFeaturesComponent } from './ui-features.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { IconsComponent } from './icons/icons.component';
|
||||
import { FlatButtonsComponent } from './buttons/flat/flat.component';
|
||||
import { RaisedButtonsComponent } from './buttons/raised/raised.component';
|
||||
import { SizedButtonsComponent } from './buttons/sized/sized.component';
|
||||
import { DisabledButtonsComponent } from './buttons/disabled/disabled.component';
|
||||
import { IconButtonsComponent } from './buttons/icon/icon.component';
|
||||
import { DropdownButtonsComponent } from './buttons/dropdown/dropdown.component';
|
||||
import { GroupButtonsComponent } from './buttons/group/group.component';
|
||||
import { LargeButtonsComponent } from './buttons/large/large.component';
|
||||
import { ModalComponent } from './modals/modal/modal.component';
|
||||
import { TypographyComponent } from './typography/typography.component';
|
||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||
import { SearchComponent } from './search-fields/search-fields.component';
|
||||
|
||||
const COMPONENTS = [
|
||||
const components = [
|
||||
UiFeaturesComponent,
|
||||
ButtonsComponent,
|
||||
GridComponent,
|
||||
ModalsComponent,
|
||||
IconsComponent,
|
||||
FlatButtonsComponent,
|
||||
RaisedButtonsComponent,
|
||||
SizedButtonsComponent,
|
||||
DisabledButtonsComponent,
|
||||
IconButtonsComponent,
|
||||
DropdownButtonsComponent,
|
||||
GroupButtonsComponent,
|
||||
LargeButtonsComponent,
|
||||
ModalComponent,
|
||||
TypographyComponent,
|
||||
TabsComponent,
|
||||
|
|
@ -51,9 +35,10 @@ const COMPONENTS = [
|
|||
NgaTabsetModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaSearchModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
...components,
|
||||
],
|
||||
entryComponents: [
|
||||
ModalComponent,
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 549 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 592 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 818 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 799 KiB |
|
|
@ -10,5 +10,16 @@
|
|||
</head>
|
||||
<body>
|
||||
<ngx-app>Loading...</ngx-app>
|
||||
|
||||
<style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden} .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite} .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%} .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite} .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
|
||||
<div id="nga-global-spinner" class="spinner">
|
||||
<div class="blob blob-0"></div>
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
<div class="blob blob-3"></div>
|
||||
<div class="blob blob-4"></div>
|
||||
<div class="blob blob-5"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -268,6 +268,10 @@ angular2-echarts@1.1.7:
|
|||
version "1.1.7"
|
||||
resolved "https://registry.yarnpkg.com/angular2-echarts/-/angular2-echarts-1.1.7.tgz#ef12cbcdfa477b0d82e974f8db97086e18ef9696"
|
||||
|
||||
angular2-toaster@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/angular2-toaster/-/angular2-toaster-4.0.0.tgz#716986be9f4bc2e9c26ae31824b015139edbff3e"
|
||||
|
||||
ansi-escapes@^1.1.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
|
||||
|
|
@ -4917,6 +4921,10 @@ scss-tokenizer@^0.2.3:
|
|||
js-base64 "^2.1.8"
|
||||
source-map "^0.4.2"
|
||||
|
||||
segoe-fonts@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/segoe-fonts/-/segoe-fonts-1.0.1.tgz#ec2c8270921b8457bc2ce166b1aee1068cba7cb7"
|
||||
|
||||
select-hose@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
||||
|
|
@ -5692,6 +5700,10 @@ type-is@~1.6.14:
|
|||
media-typer "0.3.0"
|
||||
mime-types "~2.1.15"
|
||||
|
||||
typeface-exo@0.0.22:
|
||||
version "0.0.22"
|
||||
resolved "https://registry.yarnpkg.com/typeface-exo/-/typeface-exo-0.0.22.tgz#8308dfd4e52d0f538cacff9f2aa176e9e18d894f"
|
||||
|
||||
typescript@2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue