mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
camelCaseToDash pipe added,
material colors added class helpers and global class added. Material Colors Demo page added.
This commit is contained in:
mustafahlvc
parent
5f34825189
commit
196e1644ff
|
|
@ -12,6 +12,7 @@ fuse-layout {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
fuse-content {
|
fuse-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -183,77 +183,77 @@ export class FuseNavigation
|
||||||
{
|
{
|
||||||
'title': 'Alerts',
|
'title': 'Alerts',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/alerts'
|
'url' : '/ui/elements/alerts'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Badges',
|
'title': 'Badges',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/badges'
|
'url' : '/ui/elements/badges'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Breadcrumb',
|
'title': 'Breadcrumb',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/breadcrumb'
|
'url' : '/ui/elements/breadcrumb'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Buttons',
|
'title': 'Buttons',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/buttons'
|
'url' : '/ui/elements/buttons'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Button Group',
|
'title': 'Button Group',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/button-group'
|
'url' : '/ui/elements/button-group'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Cards',
|
'title': 'Cards',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/cards'
|
'url' : '/ui/elements/cards'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Dropdowns',
|
'title': 'Dropdowns',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/dropdowns'
|
'url' : '/ui/elements/dropdowns'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Forms',
|
'title': 'Forms',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/forms'
|
'url' : '/ui/elements/forms'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Input Group',
|
'title': 'Input Group',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/input-group'
|
'url' : '/ui/elements/input-group'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Jumbotron',
|
'title': 'Jumbotron',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/jumbotron'
|
'url' : '/ui/elements/jumbotron'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'List Group',
|
'title': 'List Group',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/list-group'
|
'url' : '/ui/elements/list-group'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Navs',
|
'title': 'Navs',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/navs'
|
'url' : '/ui/elements/navs'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Navbar',
|
'title': 'Navbar',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/navbar'
|
'url' : '/ui/elements/navbar'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Pagination',
|
'title': 'Pagination',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/pagination'
|
'url' : '/ui/elements/pagination'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Progress',
|
'title': 'Progress',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/elements/progress'
|
'url' : '/ui/elements/progress'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -265,12 +265,12 @@ export class FuseNavigation
|
||||||
{
|
{
|
||||||
'title': 'Simple Table',
|
'title': 'Simple Table',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/tables/simple-table'
|
'url' : '/ui/tables/simple-table'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'Data Table',
|
'title': 'Data Table',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'url' : '/user-interface/tables/data-table'
|
'url' : '/ui/tables/data-table'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -362,7 +362,7 @@ export class FuseNavigation
|
||||||
'title': 'Colors',
|
'title': 'Colors',
|
||||||
'type' : 'nav-item',
|
'type' : 'nav-item',
|
||||||
'icon' : 'color_lens',
|
'icon' : 'color_lens',
|
||||||
'url' : '/user-interface/colors'
|
'url' : '/ui/colors'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'title': 'COMPONENTS',
|
'title': 'COMPONENTS',
|
||||||
|
|
|
||||||
663
src/app/core/matColors.ts
Normal file
663
src/app/core/matColors.ts
Normal file
|
|
@ -0,0 +1,663 @@
|
||||||
|
const black87 = 'rgba(black, 0.87)';
|
||||||
|
const white87 = 'rgba(white, 0.87)';
|
||||||
|
const black12 = 'rgba(black, 0.12)';
|
||||||
|
const white12 = 'rgba(white, 0.12)';
|
||||||
|
const black6 = 'rgba(black, 0.06)';
|
||||||
|
const white6 = 'rgba(white, 0.06)';
|
||||||
|
const matColors = {
|
||||||
|
'red': {
|
||||||
|
50 : '#ffebee',
|
||||||
|
100 : '#ffcdd2',
|
||||||
|
200 : '#ef9a9a',
|
||||||
|
300 : '#e57373',
|
||||||
|
400 : '#ef5350',
|
||||||
|
500 : '#f44336',
|
||||||
|
600 : '#e53935',
|
||||||
|
700 : '#d32f2f',
|
||||||
|
800 : '#c62828',
|
||||||
|
900 : '#b71c1c',
|
||||||
|
A100 : '#ff8a80',
|
||||||
|
A200 : '#ff5252',
|
||||||
|
A400 : '#ff1744',
|
||||||
|
A700 : '#d50000',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: 'white',
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'pink': {
|
||||||
|
50 : '#fce4ec',
|
||||||
|
100 : '#f8bbd0',
|
||||||
|
200 : '#f48fb1',
|
||||||
|
300 : '#f06292',
|
||||||
|
400 : '#ec407a',
|
||||||
|
500 : '#e91e63',
|
||||||
|
600 : '#d81b60',
|
||||||
|
700 : '#c2185b',
|
||||||
|
800 : '#ad1457',
|
||||||
|
900 : '#880e4f',
|
||||||
|
A100 : '#ff80ab',
|
||||||
|
A200 : '#ff4081',
|
||||||
|
A400 : '#f50057',
|
||||||
|
A700 : '#c51162',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: 'white',
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'purple': {
|
||||||
|
50 : '#f3e5f5',
|
||||||
|
100 : '#e1bee7',
|
||||||
|
200 : '#ce93d8',
|
||||||
|
300 : '#ba68c8',
|
||||||
|
400 : '#ab47bc',
|
||||||
|
500 : '#9c27b0',
|
||||||
|
600 : '#8e24aa',
|
||||||
|
700 : '#7b1fa2',
|
||||||
|
800 : '#6a1b9a',
|
||||||
|
900 : '#4a148c',
|
||||||
|
A100 : '#ea80fc',
|
||||||
|
A200 : '#e040fb',
|
||||||
|
A400 : '#d500f9',
|
||||||
|
A700 : '#aa00ff',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : 'white',
|
||||||
|
400 : 'white',
|
||||||
|
500 : white87,
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: 'white',
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'deep-purple': {
|
||||||
|
50 : '#ede7f6',
|
||||||
|
100 : '#d1c4e9',
|
||||||
|
200 : '#b39ddb',
|
||||||
|
300 : '#9575cd',
|
||||||
|
400 : '#7e57c2',
|
||||||
|
500 : '#673ab7',
|
||||||
|
600 : '#5e35b1',
|
||||||
|
700 : '#512da8',
|
||||||
|
800 : '#4527a0',
|
||||||
|
900 : '#311b92',
|
||||||
|
A100 : '#b388ff',
|
||||||
|
A200 : '#7c4dff',
|
||||||
|
A400 : '#651fff',
|
||||||
|
A700 : '#6200ea',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : 'white',
|
||||||
|
400 : 'white',
|
||||||
|
500 : white87,
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: white87,
|
||||||
|
A700: white87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'indigo': {
|
||||||
|
50 : '#e8eaf6',
|
||||||
|
100 : '#c5cae9',
|
||||||
|
200 : '#9fa8da',
|
||||||
|
300 : '#7986cb',
|
||||||
|
400 : '#5c6bc0',
|
||||||
|
500 : '#3f51b5',
|
||||||
|
600 : '#3949ab',
|
||||||
|
700 : '#303f9f',
|
||||||
|
800 : '#283593',
|
||||||
|
900 : '#1a237e',
|
||||||
|
A100 : '#8c9eff',
|
||||||
|
A200 : '#536dfe',
|
||||||
|
A400 : '#3d5afe',
|
||||||
|
A700 : '#304ffe',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : 'white',
|
||||||
|
400 : 'white',
|
||||||
|
500 : white87,
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: 'white',
|
||||||
|
A700: white87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'blue': {
|
||||||
|
50 : '#e3f2fd',
|
||||||
|
100 : '#bbdefb',
|
||||||
|
200 : '#90caf9',
|
||||||
|
300 : '#64b5f6',
|
||||||
|
400 : '#42a5f5',
|
||||||
|
500 : '#2196f3',
|
||||||
|
600 : '#1e88e5',
|
||||||
|
700 : '#1976d2',
|
||||||
|
800 : '#1565c0',
|
||||||
|
900 : '#0d47a1',
|
||||||
|
A100 : '#82b1ff',
|
||||||
|
A200 : '#448aff',
|
||||||
|
A400 : '#2979ff',
|
||||||
|
A700 : '#2962ff',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: 'white',
|
||||||
|
A400: 'white',
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'light-blue': {
|
||||||
|
50 : '#e1f5fe',
|
||||||
|
100 : '#b3e5fc',
|
||||||
|
200 : '#81d4fa',
|
||||||
|
300 : '#4fc3f7',
|
||||||
|
400 : '#29b6f6',
|
||||||
|
500 : '#03a9f4',
|
||||||
|
600 : '#039be5',
|
||||||
|
700 : '#0288d1',
|
||||||
|
800 : '#0277bd',
|
||||||
|
900 : '#01579b',
|
||||||
|
A100 : '#80d8ff',
|
||||||
|
A200 : '#40c4ff',
|
||||||
|
A400 : '#00b0ff',
|
||||||
|
A700 : '#0091ea',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : 'white',
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'cyan': {
|
||||||
|
50 : '#e0f7fa',
|
||||||
|
100 : '#b2ebf2',
|
||||||
|
200 : '#80deea',
|
||||||
|
300 : '#4dd0e1',
|
||||||
|
400 : '#26c6da',
|
||||||
|
500 : '#00bcd4',
|
||||||
|
600 : '#00acc1',
|
||||||
|
700 : '#0097a7',
|
||||||
|
800 : '#00838f',
|
||||||
|
900 : '#006064',
|
||||||
|
A100 : '#84ffff',
|
||||||
|
A200 : '#18ffff',
|
||||||
|
A400 : '#00e5ff',
|
||||||
|
A700 : '#00b8d4',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : 'white',
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'teal': {
|
||||||
|
50 : '#e0f2f1',
|
||||||
|
100 : '#b2dfdb',
|
||||||
|
200 : '#80cbc4',
|
||||||
|
300 : '#4db6ac',
|
||||||
|
400 : '#26a69a',
|
||||||
|
500 : '#009688',
|
||||||
|
600 : '#00897b',
|
||||||
|
700 : '#00796b',
|
||||||
|
800 : '#00695c',
|
||||||
|
900 : '#004d40',
|
||||||
|
A100 : '#a7ffeb',
|
||||||
|
A200 : '#64ffda',
|
||||||
|
A400 : '#1de9b6',
|
||||||
|
A700 : '#00bfa5',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'green': {
|
||||||
|
50 : '#e8f5e9',
|
||||||
|
100 : '#c8e6c9',
|
||||||
|
200 : '#a5d6a7',
|
||||||
|
300 : '#81c784',
|
||||||
|
400 : '#66bb6a',
|
||||||
|
500 : '#4caf50',
|
||||||
|
600 : '#43a047',
|
||||||
|
700 : '#388e3c',
|
||||||
|
800 : '#2e7d32',
|
||||||
|
900 : '#1b5e20',
|
||||||
|
A100 : '#b9f6ca',
|
||||||
|
A200 : '#69f0ae',
|
||||||
|
A400 : '#00e676',
|
||||||
|
A700 : '#00c853',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'lightGreen': {
|
||||||
|
50 : '#f1f8e9',
|
||||||
|
100 : '#dcedc8',
|
||||||
|
200 : '#c5e1a5',
|
||||||
|
300 : '#aed581',
|
||||||
|
400 : '#9ccc65',
|
||||||
|
500 : '#8bc34a',
|
||||||
|
600 : '#7cb342',
|
||||||
|
700 : '#689f38',
|
||||||
|
800 : '#558b2f',
|
||||||
|
900 : '#33691e',
|
||||||
|
A100 : '#ccff90',
|
||||||
|
A200 : '#b2ff59',
|
||||||
|
A400 : '#76ff03',
|
||||||
|
A700 : '#64dd17',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : black87,
|
||||||
|
700 : black87,
|
||||||
|
800 : 'white',
|
||||||
|
900 : 'white',
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'lime': {
|
||||||
|
50 : '#f9fbe7',
|
||||||
|
100 : '#f0f4c3',
|
||||||
|
200 : '#e6ee9c',
|
||||||
|
300 : '#dce775',
|
||||||
|
400 : '#d4e157',
|
||||||
|
500 : '#cddc39',
|
||||||
|
600 : '#c0ca33',
|
||||||
|
700 : '#afb42b',
|
||||||
|
800 : '#9e9d24',
|
||||||
|
900 : '#827717',
|
||||||
|
A100 : '#f4ff81',
|
||||||
|
A200 : '#eeff41',
|
||||||
|
A400 : '#c6ff00',
|
||||||
|
A700 : '#aeea00',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : black87,
|
||||||
|
700 : black87,
|
||||||
|
800 : black87,
|
||||||
|
900 : 'white',
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'yellow': {
|
||||||
|
50 : '#fffde7',
|
||||||
|
100 : '#fff9c4',
|
||||||
|
200 : '#fff59d',
|
||||||
|
300 : '#fff176',
|
||||||
|
400 : '#ffee58',
|
||||||
|
500 : '#ffeb3b',
|
||||||
|
600 : '#fdd835',
|
||||||
|
700 : '#fbc02d',
|
||||||
|
800 : '#f9a825',
|
||||||
|
900 : '#f57f17',
|
||||||
|
A100 : '#ffff8d',
|
||||||
|
A200 : '#ffff00',
|
||||||
|
A400 : '#ffea00',
|
||||||
|
A700 : '#ffd600',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : black87,
|
||||||
|
700 : black87,
|
||||||
|
800 : black87,
|
||||||
|
900 : black87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'amber': {
|
||||||
|
50 : '#fff8e1',
|
||||||
|
100 : '#ffecb3',
|
||||||
|
200 : '#ffe082',
|
||||||
|
300 : '#ffd54f',
|
||||||
|
400 : '#ffca28',
|
||||||
|
500 : '#ffc107',
|
||||||
|
600 : '#ffb300',
|
||||||
|
700 : '#ffa000',
|
||||||
|
800 : '#ff8f00',
|
||||||
|
900 : '#ff6f00',
|
||||||
|
A100 : '#ffe57f',
|
||||||
|
A200 : '#ffd740',
|
||||||
|
A400 : '#ffc400',
|
||||||
|
A700 : '#ffab00',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : black87,
|
||||||
|
700 : black87,
|
||||||
|
800 : black87,
|
||||||
|
900 : black87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: black87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'orange': {
|
||||||
|
50 : '#fff3e0',
|
||||||
|
100 : '#ffe0b2',
|
||||||
|
200 : '#ffcc80',
|
||||||
|
300 : '#ffb74d',
|
||||||
|
400 : '#ffa726',
|
||||||
|
500 : '#ff9800',
|
||||||
|
600 : '#fb8c00',
|
||||||
|
700 : '#f57c00',
|
||||||
|
800 : '#ef6c00',
|
||||||
|
900 : '#e65100',
|
||||||
|
A100 : '#ffd180',
|
||||||
|
A200 : '#ffab40',
|
||||||
|
A400 : '#ff9100',
|
||||||
|
A700 : '#ff6d00',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : black87,
|
||||||
|
700 : black87,
|
||||||
|
800 : 'white',
|
||||||
|
900 : 'white',
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: 'black',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'deep-orange': {
|
||||||
|
50 : '#fbe9e7',
|
||||||
|
100 : '#ffccbc',
|
||||||
|
200 : '#ffab91',
|
||||||
|
300 : '#ff8a65',
|
||||||
|
400 : '#ff7043',
|
||||||
|
500 : '#ff5722',
|
||||||
|
600 : '#f4511e',
|
||||||
|
700 : '#e64a19',
|
||||||
|
800 : '#d84315',
|
||||||
|
900 : '#bf360c',
|
||||||
|
A100 : '#ff9e80',
|
||||||
|
A200 : '#ff6e40',
|
||||||
|
A400 : '#ff3d00',
|
||||||
|
A700 : '#dd2c00',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : 'white',
|
||||||
|
600 : 'white',
|
||||||
|
700 : 'white',
|
||||||
|
800 : 'white',
|
||||||
|
900 : 'white',
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: 'white',
|
||||||
|
A700: 'white',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'brown': {
|
||||||
|
50 : '#efebe9',
|
||||||
|
100 : '#d7ccc8',
|
||||||
|
200 : '#bcaaa4',
|
||||||
|
300 : '#a1887f',
|
||||||
|
400 : '#8d6e63',
|
||||||
|
500 : '#795548',
|
||||||
|
600 : '#6d4c41',
|
||||||
|
700 : '#5d4037',
|
||||||
|
800 : '#4e342e',
|
||||||
|
900 : '#3e2723',
|
||||||
|
A100 : '#d7ccc8',
|
||||||
|
A200 : '#bcaaa4',
|
||||||
|
A400 : '#8d6e63',
|
||||||
|
A700 : '#5d4037',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : 'white',
|
||||||
|
400 : 'white',
|
||||||
|
500 : white87,
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: 'white',
|
||||||
|
A700: white87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'grey': {
|
||||||
|
0 : '#ffffff',
|
||||||
|
50 : '#fafafa',
|
||||||
|
100 : '#f5f5f5',
|
||||||
|
200 : '#eeeeee',
|
||||||
|
300 : '#e0e0e0',
|
||||||
|
400 : '#bdbdbd',
|
||||||
|
500 : '#9e9e9e',
|
||||||
|
600 : '#757575',
|
||||||
|
700 : '#616161',
|
||||||
|
800 : '#424242',
|
||||||
|
900 : '#212121',
|
||||||
|
1000 : '#000000',
|
||||||
|
A100 : '#ffffff',
|
||||||
|
A200 : '#eeeeee',
|
||||||
|
A400 : '#bdbdbd',
|
||||||
|
A700 : '#616161',
|
||||||
|
contrast: {
|
||||||
|
0 : black87,
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : black87,
|
||||||
|
500 : black87,
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
1000: white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: black87,
|
||||||
|
A700: white87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'blue-grey': {
|
||||||
|
50 : '#eceff1',
|
||||||
|
100 : '#cfd8dc',
|
||||||
|
200 : '#b0bec5',
|
||||||
|
300 : '#90a4ae',
|
||||||
|
400 : '#78909c',
|
||||||
|
500 : '#607d8b',
|
||||||
|
600 : '#546e7a',
|
||||||
|
700 : '#455a64',
|
||||||
|
800 : '#37474f',
|
||||||
|
900 : '#263238',
|
||||||
|
A100 : '#cfd8dc',
|
||||||
|
A200 : '#b0bec5',
|
||||||
|
A400 : '#78909c',
|
||||||
|
A700 : '#455a64',
|
||||||
|
contrast: {
|
||||||
|
50 : black87,
|
||||||
|
100 : black87,
|
||||||
|
200 : black87,
|
||||||
|
300 : black87,
|
||||||
|
400 : 'white',
|
||||||
|
500 : 'white',
|
||||||
|
600 : white87,
|
||||||
|
700 : white87,
|
||||||
|
800 : white87,
|
||||||
|
900 : white87,
|
||||||
|
A100: black87,
|
||||||
|
A200: black87,
|
||||||
|
A400: 'white',
|
||||||
|
A700: white87,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export class MatColors
|
||||||
|
{
|
||||||
|
// public static colors =
|
||||||
|
// Color palettes from the Material Design spec.
|
||||||
|
// See https://www.google.com/design/spec/style/color.html
|
||||||
|
//
|
||||||
|
|
||||||
|
public static black87 = black87;
|
||||||
|
public static white87 = white87;
|
||||||
|
public static black12 = black12;
|
||||||
|
public static white12 = white12;
|
||||||
|
public static black6 = black6;
|
||||||
|
public static white6 = white6;
|
||||||
|
public static all = matColors;
|
||||||
|
|
||||||
|
public static getColor(colorName)
|
||||||
|
{
|
||||||
|
if ( matColors[colorName] )
|
||||||
|
{
|
||||||
|
return matColors[colorName];
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/app/core/pipes/camelCaseToDash.pipe.ts
Normal file
10
src/app/core/pipes/camelCaseToDash.pipe.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Pipe, PipeTransform } from '@angular/core';
|
||||||
|
|
||||||
|
@Pipe({name: 'camelCaseToDash'})
|
||||||
|
export class CamelCaseToDashPipe implements PipeTransform
|
||||||
|
{
|
||||||
|
transform(value: string, args: any[] = [])
|
||||||
|
{
|
||||||
|
return value ? String(value).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,13 +4,15 @@ import { KeysPipe } from './keys.pipe';
|
||||||
import { GetByIdPipe } from './getById.pipe';
|
import { GetByIdPipe } from './getById.pipe';
|
||||||
import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe';
|
import { HtmlToPlaintextPipe } from './htmlToPlaintext.pipe';
|
||||||
import { FilterPipe } from './filter.pipe';
|
import { FilterPipe } from './filter.pipe';
|
||||||
|
import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
KeysPipe,
|
KeysPipe,
|
||||||
GetByIdPipe,
|
GetByIdPipe,
|
||||||
HtmlToPlaintextPipe,
|
HtmlToPlaintextPipe,
|
||||||
FilterPipe
|
FilterPipe,
|
||||||
|
CamelCaseToDashPipe
|
||||||
|
|
||||||
],
|
],
|
||||||
imports : [],
|
imports : [],
|
||||||
|
|
@ -18,7 +20,8 @@ import { FilterPipe } from './filter.pipe';
|
||||||
KeysPipe,
|
KeysPipe,
|
||||||
GetByIdPipe,
|
GetByIdPipe,
|
||||||
HtmlToPlaintextPipe,
|
HtmlToPlaintextPipe,
|
||||||
FilterPipe
|
FilterPipe,
|
||||||
|
CamelCaseToDashPipe
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
$matColorsMap: (
|
||||||
|
red: $mat-red,
|
||||||
|
pink:$mat-pink,
|
||||||
|
purple:$mat-purple,
|
||||||
|
deep-purple:$mat-deep-purple,
|
||||||
|
indigo:$mat-indigo,
|
||||||
|
blue:$mat-blue,
|
||||||
|
light-blue:$mat-light-blue,
|
||||||
|
cyan:$mat-cyan,
|
||||||
|
teal:$mat-teal,
|
||||||
|
green:$mat-green,
|
||||||
|
light-green:$mat-light-green,
|
||||||
|
lime:$mat-lime,
|
||||||
|
yellow:$mat-yellow,
|
||||||
|
amber:$mat-amber,
|
||||||
|
orange:$mat-orange,
|
||||||
|
deep-orange:$mat-deep-orange,
|
||||||
|
brown:$mat-brown,
|
||||||
|
grey:$mat-grey,
|
||||||
|
blue-grey:$mat-blue-grey
|
||||||
|
);
|
||||||
|
|
||||||
|
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||||
|
|
||||||
|
@each $colorName, $colorMap in $matColorsMap {
|
||||||
|
|
||||||
|
@each $hue in $matColorHues {
|
||||||
|
|
||||||
|
$bgColor: map-get($colorMap, $hue);
|
||||||
|
$fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-bg {
|
||||||
|
background-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-#{$colorName}-#{$hue}-bg {
|
||||||
|
background-color: $bgColor !important;
|
||||||
|
color: $fgColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-fg {
|
||||||
|
color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-border {
|
||||||
|
border-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-border-top {
|
||||||
|
border-top-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-border-right {
|
||||||
|
border-right-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-border-bottom {
|
||||||
|
border-bottom-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-#{$hue}-border-left {
|
||||||
|
border-left-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ($hue == 500) {
|
||||||
|
|
||||||
|
.md-#{$colorName}-bg {
|
||||||
|
background-color: $bgColor !important;
|
||||||
|
color: $fgColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-bg {
|
||||||
|
background-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-fg {
|
||||||
|
color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-border {
|
||||||
|
border-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-border-top {
|
||||||
|
border-top-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-border-right {
|
||||||
|
border-right-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-border-bottom {
|
||||||
|
border-bottom-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$colorName}-border-left {
|
||||||
|
border-left-color: $bgColor !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
76
src/app/main/ui/colors/colors.component.html
Normal file
76
src/app/main/ui/colors/colors.component.html
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
|
||||||
|
|
||||||
|
<!-- HEADER -->
|
||||||
|
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<h1 class="title">Material Colors</h1>
|
||||||
|
|
||||||
|
<a md-raised-button class="reference-button"
|
||||||
|
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
||||||
|
target="_blank">
|
||||||
|
<md-icon>link</md-icon>
|
||||||
|
<span>Reference</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
<!-- CONTENT -->
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<md-tab-group class="color-tabs" md-dynamic-height="true" (selectChange)="selectColor($event)">
|
||||||
|
|
||||||
|
<md-tab *ngFor="let color of (colors | keys)" label="{{color.key}}">
|
||||||
|
<ng-template md-tab-label>
|
||||||
|
<span class="text-capitalize">{{color.key}}</span>
|
||||||
|
</ng-template>
|
||||||
|
</md-tab>
|
||||||
|
|
||||||
|
</md-tab-group>
|
||||||
|
|
||||||
|
<div class="color-tabs-content p-24" fxLayout="column">
|
||||||
|
|
||||||
|
<div class="h3 pb-16">Fuse has classes for every single color from
|
||||||
|
<a href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
||||||
|
target="_blank">Material
|
||||||
|
Design Color Palette</a> for your convenient. You can use them with pretty much every
|
||||||
|
element.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="color-header colored-bg p-8"
|
||||||
|
[ngClass]="'md-'+selectedColor+'-bg'"
|
||||||
|
fxLayout="column">
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-capitalize">{{selectedColor}}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-8" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
<div>500</div>
|
||||||
|
<div>
|
||||||
|
{{selectedColorDefaultValue}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="color" fxLayout="column" fxFlex="1 0 auto">
|
||||||
|
|
||||||
|
<div class="colored-bg p-8"
|
||||||
|
*ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"
|
||||||
|
fxFlex="1 0 auto" fxLayout="row" fxLayout.sm="column"
|
||||||
|
[ngClass]="selectedColor+'-'+hue+'-bg'">
|
||||||
|
|
||||||
|
<div class="p-8" fxFlex>{{hue}}</div>
|
||||||
|
|
||||||
|
<div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex>
|
||||||
|
.{{'md-'+selectedColor+'-'+hue+'-bg'}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8" fxFlex>.{{selectedColor+'-'+hue+'-bg'}}</div>
|
||||||
|
|
||||||
|
<div class="fg-box mat-elevation-z2 p-8"
|
||||||
|
[ngClass]="selectedColor+'-'+hue+'-fg'">
|
||||||
|
.{{selectedColor+'-'+hue+'-fg'}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- / CONTENT -->
|
||||||
|
</div>
|
||||||
29
src/app/main/ui/colors/colors.component.scss
Normal file
29
src/app/main/ui/colors/colors.component.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
:host {
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
.color-tabs {
|
||||||
|
|
||||||
|
.mat-tab-body {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-tabs-content {
|
||||||
|
|
||||||
|
.color {
|
||||||
|
|
||||||
|
.fg-box {
|
||||||
|
background-color: white;
|
||||||
|
min-width: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colored-bg {
|
||||||
|
transition: background-color 400ms ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
37
src/app/main/ui/colors/colors.component.ts
Normal file
37
src/app/main/ui/colors/colors.component.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { MatColors } from '../../../core/matColors';
|
||||||
|
import { MdTab } from '@angular/material';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector : 'fuse-colors',
|
||||||
|
templateUrl: './colors.component.html',
|
||||||
|
styleUrls : ['./colors.component.scss']
|
||||||
|
})
|
||||||
|
export class ColorsComponent implements OnInit
|
||||||
|
{
|
||||||
|
colors: {};
|
||||||
|
selectedColor: string;
|
||||||
|
selectedColorDefaultValue: string;
|
||||||
|
|
||||||
|
constructor()
|
||||||
|
{
|
||||||
|
this.colors = MatColors.all;
|
||||||
|
this.updateSelectedColor('red');
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
selectColor(selected)
|
||||||
|
{
|
||||||
|
this.updateSelectedColor(selected.tab.textLabel);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateSelectedColor(colorName)
|
||||||
|
{
|
||||||
|
this.selectedColor = colorName;
|
||||||
|
this.selectedColorDefaultValue = MatColors.getColor(this.selectedColor)[500];
|
||||||
|
}
|
||||||
|
}
|
||||||
26
src/app/main/ui/colors/colors.module.ts
Normal file
26
src/app/main/ui/colors/colors.module.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
import { SharedModule } from '../../../core/modules/shared.module';
|
||||||
|
import { FuseDemoModule } from '../../../core/components/demo/demo.module';
|
||||||
|
import { ColorsComponent } from './colors.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path : 'ui/colors',
|
||||||
|
component: ColorsComponent
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports : [
|
||||||
|
SharedModule,
|
||||||
|
RouterModule.forChild(routes),
|
||||||
|
FuseDemoModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
ColorsComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class UIColorsModule
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
|
import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
|
||||||
|
import { UIColorsModule } from './colors/colors.module';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports : [
|
imports: [
|
||||||
|
UIColorsModule,
|
||||||
UIPageLayoutsModule
|
UIPageLayoutsModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user