mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +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",
|
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
|
||||||
"@swimlane/ngx-charts": "5.2.0",
|
"@swimlane/ngx-charts": "5.2.0",
|
||||||
"angular2-echarts": "1.1.7",
|
"angular2-echarts": "1.1.7",
|
||||||
|
"angular2-toaster": "^4.0.0",
|
||||||
"bootstrap": "4.0.0-alpha.6",
|
"bootstrap": "4.0.0-alpha.6",
|
||||||
"chart.js": "2.5.0",
|
"chart.js": "2.5.0",
|
||||||
"ckeditor": "4.6.2",
|
"ckeditor": "4.6.2",
|
||||||
|
|
@ -59,8 +60,10 @@
|
||||||
"normalize.css": "6.0.0",
|
"normalize.css": "6.0.0",
|
||||||
"roboto-fontface": "0.7.0",
|
"roboto-fontface": "0.7.0",
|
||||||
"rxjs": "5.4.0",
|
"rxjs": "5.4.0",
|
||||||
|
"segoe-fonts": "1.0.1",
|
||||||
"tether": "1.4.0",
|
"tether": "1.4.0",
|
||||||
"tinymce": "4.5.7",
|
"tinymce": "4.5.7",
|
||||||
|
"typeface-exo": "0.0.22",
|
||||||
"web-animations-js": "2.2.5",
|
"web-animations-js": "2.2.5",
|
||||||
"zone.js": "0.8.10"
|
"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;
|
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
|
.layout {
|
||||||
/deep/ .layout {
|
|
||||||
|
|
||||||
nga-layout-header > nav {
|
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,
|
HttpModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
CoreModule,
|
CoreModule,
|
||||||
PagesModule,
|
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,3 @@
|
||||||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
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 { ComponentsComponent } from './components.component';
|
||||||
import { TreeComponent } from './tree/tree.component';
|
import { TreeComponent } from './tree/tree.component';
|
||||||
|
import { ToasterComponent } from './toaster/toaster.component';
|
||||||
|
|
||||||
const routes: Routes = [{
|
const routes: Routes = [{
|
||||||
path: '',
|
path: '',
|
||||||
component: ComponentsComponent,
|
component: ComponentsComponent,
|
||||||
children: [{
|
children: [
|
||||||
|
{
|
||||||
path: 'tree',
|
path: 'tree',
|
||||||
component: TreeComponent,
|
component: TreeComponent,
|
||||||
}],
|
}, {
|
||||||
|
path: 'toaster',
|
||||||
|
component: ToasterComponent,
|
||||||
|
},
|
||||||
|
],
|
||||||
}];
|
}];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
@ -22,4 +28,5 @@ export class ComponentsRoutingModule { }
|
||||||
export const routedComponents = [
|
export const routedComponents = [
|
||||||
ComponentsComponent,
|
ComponentsComponent,
|
||||||
TreeComponent,
|
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({
|
@Component({
|
||||||
selector: 'ngx-gmaps',
|
selector: 'ngx-gmaps',
|
||||||
styleUrls: ['./gmaps.component.scss'],
|
|
||||||
templateUrl: './gmaps.component.html',
|
templateUrl: './gmaps.component.html',
|
||||||
})
|
})
|
||||||
export class GmapsComponent {
|
export class GmapsComponent {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,3 @@
|
||||||
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
|
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
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';
|
import { List } from 'immutable';
|
||||||
|
|
||||||
|
// TODO: refactor array styles
|
||||||
export const menuItems: List<NgaMenuItem> = List([{
|
export const menuItems: List<NgaMenuItem> = List([{
|
||||||
title: 'Dashboard',
|
title: 'Dashboard',
|
||||||
icon: 'ion ion-ios-home-outline',
|
icon: 'ion ion-ios-home-outline',
|
||||||
|
|
@ -32,7 +33,7 @@ export const menuItems: List<NgaMenuItem> = List([{
|
||||||
}, {
|
}, {
|
||||||
title: 'Animated Searches',
|
title: 'Animated Searches',
|
||||||
link: '/pages/ui-features/search-fields',
|
link: '/pages/ui-features/search-fields',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Tabs',
|
title: 'Tabs',
|
||||||
link: '/pages/ui-features/tabs',
|
link: '/pages/ui-features/tabs',
|
||||||
|
|
@ -40,10 +41,15 @@ export const menuItems: List<NgaMenuItem> = List([{
|
||||||
}, {
|
}, {
|
||||||
title: 'Components',
|
title: 'Components',
|
||||||
icon: 'ion ion-ios-gear-outline',
|
icon: 'ion ion-ios-gear-outline',
|
||||||
children: List<NgaMenuItem>([{
|
children: List<NgaMenuItem>([
|
||||||
title: 'Tree',
|
{
|
||||||
link: '/pages/components/tree',
|
title: 'Tree',
|
||||||
}]),
|
link: '/pages/components/tree',
|
||||||
|
}, {
|
||||||
|
title: 'Toaster',
|
||||||
|
link: '/pages/components/toaster',
|
||||||
|
},
|
||||||
|
]),
|
||||||
}, {
|
}, {
|
||||||
title: 'Maps',
|
title: 'Maps',
|
||||||
icon: 'ion ion-ios-location-outline',
|
icon: 'ion ion-ios-location-outline',
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss';
|
import 'style-loader!../@theme/styles/cosmic/theme.scss';
|
||||||
import 'style-loader!../@theme/styles/light/light.theme.scss';
|
import 'style-loader!../@theme/styles/light/theme.scss';
|
||||||
import 'style-loader!../@theme/styles/default/default.theme.scss';
|
import 'style-loader!../@theme/styles/default/theme.scss';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-pages',
|
selector: 'ngx-pages',
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,33 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-3 col-md-3">
|
<div class="col-md-12">
|
||||||
<nga-card>
|
<nga-card>
|
||||||
<nga-card-header>
|
<nga-card-header>Hero Buttons</nga-card-header>
|
||||||
Flat buttons
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
<nga-card-body>
|
||||||
<ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
|
<ngx-hero-buttons></ngx-hero-buttons>
|
||||||
</nga-card-body>
|
</nga-card-body>
|
||||||
</nga-card>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 col-md-3">
|
<div class="col-md-6">
|
||||||
<nga-card>
|
<nga-card>
|
||||||
<nga-card-header>
|
<nga-card-header>Button Shapes</nga-card-header>
|
||||||
Raised buttons
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
<nga-card-body>
|
||||||
<ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
|
<ngx-shape-buttons></ngx-shape-buttons>
|
||||||
</nga-card-body>
|
</nga-card-body>
|
||||||
</nga-card>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 col-md-3">
|
<div class="col-md-6">
|
||||||
<nga-card>
|
<nga-card>
|
||||||
<nga-card-header>
|
<nga-card-header>Button Sizes</nga-card-header>
|
||||||
Different sizes
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
<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-body>
|
||||||
</nga-card>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 col-md-3">
|
<div class="col-md-6">
|
||||||
<nga-card>
|
<nga-card>
|
||||||
<nga-card-header>
|
<nga-card-header>Default Buttons</nga-card-header>
|
||||||
Disabled
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
<nga-card-body>
|
||||||
<ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
|
<ngx-default-buttons></ngx-default-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>
|
|
||||||
</nga-card-body>
|
</nga-card-body>
|
||||||
</nga-card>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,164 +1,9 @@
|
||||||
:host {
|
:host /deep/ {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
/deep/ {
|
.btn-demo {
|
||||||
.basic-btns {
|
width: 180px;
|
||||||
padding-top: 8px;
|
height: 48px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,4 @@ import { Component } from '@angular/core';
|
||||||
templateUrl: './buttons.component.html',
|
templateUrl: './buttons.component.html',
|
||||||
})
|
})
|
||||||
export class ButtonsComponent {
|
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>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
</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 { SharedModule } from '../../shared.module';
|
||||||
|
|
||||||
|
import { ButtonsModule } from './buttons/buttons.module';
|
||||||
|
|
||||||
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||||
import { UiFeaturesComponent } from './ui-features.component';
|
import { UiFeaturesComponent } from './ui-features.component';
|
||||||
import { ButtonsComponent } from './buttons/buttons.component';
|
|
||||||
import { GridComponent } from './grid/grid.component';
|
import { GridComponent } from './grid/grid.component';
|
||||||
import { ModalsComponent } from './modals/modals.component';
|
import { ModalsComponent } from './modals/modals.component';
|
||||||
import { IconsComponent } from './icons/icons.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 { ModalComponent } from './modals/modal/modal.component';
|
||||||
import { TypographyComponent } from './typography/typography.component';
|
import { TypographyComponent } from './typography/typography.component';
|
||||||
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
|
||||||
import { SearchComponent } from './search-fields/search-fields.component';
|
import { SearchComponent } from './search-fields/search-fields.component';
|
||||||
|
|
||||||
const COMPONENTS = [
|
const components = [
|
||||||
UiFeaturesComponent,
|
UiFeaturesComponent,
|
||||||
ButtonsComponent,
|
|
||||||
GridComponent,
|
GridComponent,
|
||||||
ModalsComponent,
|
ModalsComponent,
|
||||||
IconsComponent,
|
IconsComponent,
|
||||||
FlatButtonsComponent,
|
|
||||||
RaisedButtonsComponent,
|
|
||||||
SizedButtonsComponent,
|
|
||||||
DisabledButtonsComponent,
|
|
||||||
IconButtonsComponent,
|
|
||||||
DropdownButtonsComponent,
|
|
||||||
GroupButtonsComponent,
|
|
||||||
LargeButtonsComponent,
|
|
||||||
ModalComponent,
|
ModalComponent,
|
||||||
TypographyComponent,
|
TypographyComponent,
|
||||||
TabsComponent,
|
TabsComponent,
|
||||||
|
|
@ -51,9 +35,10 @@ const COMPONENTS = [
|
||||||
NgaTabsetModule,
|
NgaTabsetModule,
|
||||||
NgaRouteTabsetModule,
|
NgaRouteTabsetModule,
|
||||||
NgaSearchModule,
|
NgaSearchModule,
|
||||||
|
ButtonsModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...COMPONENTS,
|
...components,
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
ModalComponent,
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<ngx-app>Loading...</ngx-app>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
12
yarn.lock
12
yarn.lock
|
|
@ -268,6 +268,10 @@ angular2-echarts@1.1.7:
|
||||||
version "1.1.7"
|
version "1.1.7"
|
||||||
resolved "https://registry.yarnpkg.com/angular2-echarts/-/angular2-echarts-1.1.7.tgz#ef12cbcdfa477b0d82e974f8db97086e18ef9696"
|
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:
|
ansi-escapes@^1.1.0:
|
||||||
version "1.4.0"
|
version "1.4.0"
|
||||||
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
|
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"
|
js-base64 "^2.1.8"
|
||||||
source-map "^0.4.2"
|
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:
|
select-hose@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
|
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"
|
media-typer "0.3.0"
|
||||||
mime-types "~2.1.15"
|
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:
|
typescript@2.3.2:
|
||||||
version "2.3.2"
|
version "2.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
|
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue